From ebd3a664995b86c3cadf443f97eea37f6e2b8d62 Mon Sep 17 00:00:00 2001 From: pincman Date: Wed, 15 May 2024 09:42:19 +0800 Subject: [PATCH] update --- apps/admin/src/app.tsx | 26 ++++---- apps/admin/src/components/i18n/constants.ts | 3 + apps/admin/src/components/i18n/data.ts | 15 +++++ apps/admin/src/components/i18n/hooks.ts | 11 ++++ apps/admin/src/components/i18n/index.tsx | 12 ++++ apps/admin/src/components/i18n/store.ts | 23 +++++++ apps/admin/src/components/i18n/types.ts | 10 +++ apps/admin/src/components/setting/index.tsx | 64 +++++++++++++++++++ .../{theme => setting}/style.module.css | 0 apps/admin/src/components/theme/demo.tsx | 48 -------------- apps/admin/src/components/theme/hooks.ts | 18 ++++-- apps/admin/src/components/theme/index.tsx | 33 ++++------ 12 files changed, 175 insertions(+), 88 deletions(-) create mode 100644 apps/admin/src/components/i18n/constants.ts create mode 100644 apps/admin/src/components/i18n/data.ts create mode 100644 apps/admin/src/components/i18n/hooks.ts create mode 100644 apps/admin/src/components/i18n/index.tsx create mode 100644 apps/admin/src/components/i18n/store.ts create mode 100644 apps/admin/src/components/i18n/types.ts create mode 100644 apps/admin/src/components/setting/index.tsx rename apps/admin/src/components/{theme => setting}/style.module.css (100%) delete mode 100644 apps/admin/src/components/theme/demo.tsx diff --git a/apps/admin/src/app.tsx b/apps/admin/src/app.tsx index e34fd2c..ef1d38d 100644 --- a/apps/admin/src/app.tsx +++ b/apps/admin/src/app.tsx @@ -2,24 +2,24 @@ import { StyleProvider } from '@ant-design/cssinjs'; import { ConfigProvider, App as AntdApp } from 'antd'; // import 'dayjs/locale/zh-cn'; -import { FC, useMemo } from 'react'; +import { FC } from 'react'; import $styles from './app.module.css'; -import { localeData } from './components/demo/constants'; import { Locale } from './components/demo/context'; -import { useLocale } from './components/demo/hooks'; +import { useLocaleData } from './components/i18n/hooks'; +import Setting from './components/setting'; import Theme from './components/theme'; -import ThemeDemo from './components/theme/demo'; import { useAntdAlgorithm } from './components/theme/hooks'; const Wrapper: FC = () => { - const locale = useLocale(); - const antdLocaleData = useMemo(() => { - if (!Object.keys(localeData).find((v) => v === locale.name)) { - return localeData[0]; - } - return localeData[locale.name]; - }, [locale.name]); + const locale = useLocaleData(); + // const locale = useLocale(); + // const antdLocaleData = useMemo(() => { + // if (!Object.keys(localeData).find((v) => v === locale.name)) { + // return localeData[0]; + // } + // return localeData[locale.name]; + // }, [locale.name]); // const themeState = useTheme(); // const algorithm = useMemo(() => { // const result = [themeState.compact ? theme.compactAlgorithm : theme.defaultAlgorithm]; @@ -29,7 +29,7 @@ const Wrapper: FC = () => { const algorithm = useAntdAlgorithm(); return ( { */} - + diff --git a/apps/admin/src/components/i18n/constants.ts b/apps/admin/src/components/i18n/constants.ts new file mode 100644 index 0000000..6accf51 --- /dev/null +++ b/apps/admin/src/components/i18n/constants.ts @@ -0,0 +1,3 @@ +import { LangType } from './types'; + +export const langs: `${LangType}`[] = ['en_US', 'zh_CN']; diff --git a/apps/admin/src/components/i18n/data.ts b/apps/admin/src/components/i18n/data.ts new file mode 100644 index 0000000..12335b5 --- /dev/null +++ b/apps/admin/src/components/i18n/data.ts @@ -0,0 +1,15 @@ +import enUS from 'antd/es/locale/en_US'; +import zhCN from 'antd/es/locale/zh_CN'; + +import { LangType, LocaleItem } from './types'; + +export const localeData: Record<`${LangType}`, LocaleItem> = { + en_US: { + label: '🇺🇸 english(US)', + antd: enUS, + }, + zh_CN: { + label: '🇨🇳 简体中文', + antd: zhCN, + }, +}; diff --git a/apps/admin/src/components/i18n/hooks.ts b/apps/admin/src/components/i18n/hooks.ts new file mode 100644 index 0000000..ac7a764 --- /dev/null +++ b/apps/admin/src/components/i18n/hooks.ts @@ -0,0 +1,11 @@ +import { useMemo } from 'react'; + +import { localeData } from './data'; +import { useLocaleStore } from './store'; + +export const useLocale = () => useLocaleStore((state) => state.lang); +export const useLocaleChange = () => useLocaleStore((state) => state.changeLang); +export const useLocaleData = () => { + const lang = useLocale(); + return useMemo(() => localeData[lang], [lang]); +}; diff --git a/apps/admin/src/components/i18n/index.tsx b/apps/admin/src/components/i18n/index.tsx new file mode 100644 index 0000000..bd076ca --- /dev/null +++ b/apps/admin/src/components/i18n/index.tsx @@ -0,0 +1,12 @@ +import { isNil } from 'lodash'; +import { FC, ReactNode } from 'react'; + +import { useLocaleChange } from './hooks'; +import { LangType } from './types'; + +const Locale: FC<{ children?: ReactNode } & { lang: `${LangType}` }> = ({ children, lang }) => { + const changeLocale = useLocaleChange(); + if (!isNil(changeLocale)) changeLocale(lang); + return <>{children}; +}; +export default Locale; diff --git a/apps/admin/src/components/i18n/store.ts b/apps/admin/src/components/i18n/store.ts new file mode 100644 index 0000000..265ac91 --- /dev/null +++ b/apps/admin/src/components/i18n/store.ts @@ -0,0 +1,23 @@ +import { isNil } from 'lodash'; + +import { createPersistStore } from '../store'; + +import { langs } from './constants'; +import { LangType } from './types'; + +export const useLocaleStore = createPersistStore<{ + lang: `${LangType}`; + changeLang: (name: `${LangType}`) => void; +}>( + (set) => ({ + lang: langs[0], + changeLang: (name: `${LangType}`) => + set((state) => { + const item = langs.find((n) => n === name); + if (!isNil(item)) state.lang = item; + }), + }), + { + name: 'locale', + }, +); diff --git a/apps/admin/src/components/i18n/types.ts b/apps/admin/src/components/i18n/types.ts new file mode 100644 index 0000000..265393f --- /dev/null +++ b/apps/admin/src/components/i18n/types.ts @@ -0,0 +1,10 @@ +import { Locale } from 'antd/es/locale'; + +export enum LangType { + EN_US = 'en_US', + ZH_CN = 'zh_CN', +} +export interface LocaleItem { + label: string; + antd: Locale; +} diff --git a/apps/admin/src/components/setting/index.tsx b/apps/admin/src/components/setting/index.tsx new file mode 100644 index 0000000..bf3482b --- /dev/null +++ b/apps/admin/src/components/setting/index.tsx @@ -0,0 +1,64 @@ +import { Calendar, Select, Switch } from 'antd'; +import { FC } from 'react'; + +import { langs } from '../i18n/constants'; +import { localeData } from '../i18n/data'; +import { useLocale, useLocaleChange } from '../i18n/hooks'; +import { useTheme, useThemeActions } from '../theme/hooks'; + +import $styles from './style.module.css'; + +const ThemeSetting: FC = () => { + const { mode, compact } = useTheme(); + const { toggleMode, toggleCompact } = useThemeActions(); + return ( + <> + + + + ); +}; + +export const LocaleSetting: FC = () => { + const locale = useLocale(); + const changeLocale = useLocaleChange(); + return ( + + ); +}; + +const Setting: FC = () => ( +
+

Setting Demo

+
+
+ +
+
+ +
+
+ +
+
+
+); +export default Setting; diff --git a/apps/admin/src/components/theme/style.module.css b/apps/admin/src/components/setting/style.module.css similarity index 100% rename from apps/admin/src/components/theme/style.module.css rename to apps/admin/src/components/setting/style.module.css diff --git a/apps/admin/src/components/theme/demo.tsx b/apps/admin/src/components/theme/demo.tsx deleted file mode 100644 index e767452..0000000 --- a/apps/admin/src/components/theme/demo.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Calendar, Switch } from 'antd'; -import { FC } from 'react'; - -import { useTheme, useThemeActions } from './hooks'; -import $styles from './style.module.css'; - -const Setting: FC = () => { - const { mode, compact } = useTheme(); - const { toggleMode, toggleCompact } = useThemeActions(); - return ( - <> - - - - ); -}; - -const ThemeDemo: FC = () => { - const { mode, compact } = useTheme(); - return ( -
-

Theme Setting Demo

-
-

主题模式: 「{mode === 'dark' ? '暗黑' : '明亮'}」

-

是否紧凑: 「{compact ? '是' : '否'}」

-
- -
-
- -
-
-
- ); -}; -export default ThemeDemo; diff --git a/apps/admin/src/components/theme/hooks.ts b/apps/admin/src/components/theme/hooks.ts index dcd1ab7..c361b6b 100644 --- a/apps/admin/src/components/theme/hooks.ts +++ b/apps/admin/src/components/theme/hooks.ts @@ -1,5 +1,5 @@ import { theme } from 'antd'; -import { omit } from 'lodash'; +import { debounce, omit } from 'lodash'; import { useCallback, useMemo } from 'react'; import { useShallow } from 'zustand/react/shallow'; @@ -30,17 +30,21 @@ export const useThemeActions = () => { const dispatch = useThemeStore((state) => state.dispatch); return { changeMode: useCallback( - (v: `${ThemeMode}`) => dispatch({ type: 'change_mode', value: v }), + debounce( + (v: `${ThemeMode}`) => () => dispatch({ type: 'change_mode', value: v }), + 100, + {}, + ), + [], + ), + toggleMode: useCallback( + debounce(() => dispatch({ type: 'toggle_mode' }), 100, {}), [], ), - toggleMode: useCallback(() => dispatch({ type: 'toggle_mode' }), []), changeCompact: useCallback( (v: boolean) => dispatch({ type: 'change_compact', value: v }), [], ), - toggleCompact: useCallback( - useCallback(() => dispatch({ type: 'toggle_compact' }), []), - [], - ), + toggleCompact: useCallback(() => dispatch({ type: 'toggle_compact' }), []), }; }; diff --git a/apps/admin/src/components/theme/index.tsx b/apps/admin/src/components/theme/index.tsx index 774b3e3..0b1cf19 100644 --- a/apps/admin/src/components/theme/index.tsx +++ b/apps/admin/src/components/theme/index.tsx @@ -1,40 +1,31 @@ -import { debounce, isNil } from 'lodash'; +import { isNil } from 'lodash'; import { FC, ReactNode } from 'react'; import { useLifecycles } from 'react-use'; +import { useThemeActions } from './hooks'; import { useThemeStore } from './store'; +import { ThemeMode } from './types'; -const Theme: FC<{ children?: ReactNode }> = ({ children }) => { +const Theme: FC<{ children?: ReactNode; mode?: `${ThemeMode}`; compact?: boolean }> = ({ + children, + mode, + compact, +}) => { + const { changeMode, changeCompact } = useThemeActions(); let unSub: () => void; - useLifecycles( () => { useThemeStore.subscribe( (state) => state.mode, - (mode) => { - debounce(() => { - console.log(mode); - }); + (m) => { const body = document.getElementsByTagName('body'); if (body.length) { body[0].classList.remove('light'); body[0].classList.remove('dark'); - body[0].classList.add(mode === 'dark' ? 'dark' : 'light'); + body[0].classList.add(m === 'dark' ? 'dark' : 'light'); } }, - // debounce( - // () => { - // const body = document.getElementsByTagName('body'); - // if (body.length) { - // body[0].classList.remove('light'); - // body[0].classList.remove('dark'); - // body[0].classList.add(mode === 'dark' ? 'dark' : 'light'); - // } - // }, - // 10, - // {}, - // ), { fireImmediately: true, }, @@ -44,6 +35,8 @@ const Theme: FC<{ children?: ReactNode }> = ({ children }) => { if (!isNil(unSub)) unSub(); }, ); + if (!isNil(mode)) changeMode(mode); + if (!isNil(compact)) changeCompact(compact); return <>{children}; };