Skip to content

Commit 26c0e51

Browse files
JerryFan626JerryFan626
committed
refactor: file structure
1 parent 71cee15 commit 26c0e51

9 files changed

Lines changed: 60 additions & 304 deletions

File tree

‎chat2db-client/.umirc.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ export default defineConfig({
2323
{
2424
path: '/',
2525
component: '@/layouts/GlobalLayout',
26-
routes: [{ path: '/', component: 'main' }],
26+
routes: [
27+
{
28+
path: '/',
29+
component: 'main',
30+
},
31+
],
2732
},
2833
],
2934

‎chat2db-client/src/hooks/useTheme.ts‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
import { useEffect, useState } from 'react';
2-
// import { addColorSchemeListener, colorSchemeListeners } from '@/layouts';
2+
import { addColorSchemeListener, colorSchemeListeners } from '@/layouts/GlobalLayout';
33
import { getOsTheme } from '@/utils';
44
import { ITheme } from '@/typings';
55
import { ThemeType, PrimaryColorType } from '@/constants';
66
import { getPrimaryColor, getTheme, setPrimaryColor, setTheme } from '@/utils/localStorage';
7+
import { v4 as uuidv4 } from 'uuid';
8+
9+
const colorSchemeListeners: {
10+
[key: string]: (theme: { backgroundColor: ThemeType; primaryColor: PrimaryColorType }) => void;
11+
} = {};
12+
13+
const addColorSchemeListener = (
14+
callback: (theme: { backgroundColor: ThemeType; primaryColor: PrimaryColorType }) => void,
15+
) => {
16+
const uuid = uuidv4();
17+
colorSchemeListeners[uuid] = callback;
18+
return uuid;
19+
};
720

821
const initialTheme = () => {
922
const localStorageTheme = getTheme();
1023
const localStoragePrimaryColor = getPrimaryColor();
1124

1225
// 判断localStorage的theme在不在ThemeType中, 如果存在就用localStorageTheme
13-
let backgroundColor = ThemeType.Light
26+
let backgroundColor = ThemeType.Light;
1427
if (Object.values(ThemeType).includes(localStorageTheme)) {
1528
backgroundColor = localStorageTheme;
1629
}
1730

18-
let primaryColor = PrimaryColorType.Golden_Purple
31+
let primaryColor = PrimaryColorType.Golden_Purple;
1932
if (Object.values(PrimaryColorType).includes(localStoragePrimaryColor)) {
2033
primaryColor = localStoragePrimaryColor;
2134
}
@@ -37,10 +50,10 @@ export function useTheme<T = ITheme>(): [T, React.Dispatch<React.SetStateAction<
3750
// const isDark = useMemo(() => appTheme.backgroundColor === ThemeType.Dark, [appTheme]);
3851

3952
useEffect(() => {
40-
// const uuid = addColorSchemeListener(setAppTheme as any);
41-
// return () => {
42-
// delete colorSchemeListeners[uuid];
43-
// };
53+
const uuid = addColorSchemeListener(setAppTheme as any);
54+
return () => {
55+
delete colorSchemeListeners[uuid];
56+
};
4457
}, []);
4558

4659
function handleAppThemeChange(theme: { backgroundColor: ThemeType; primaryColor: PrimaryColorType }) {
@@ -50,9 +63,9 @@ export function useTheme<T = ITheme>(): [T, React.Dispatch<React.SetStateAction<
5063
? ThemeType.DarkDimmed
5164
: ThemeType.Light;
5265
}
53-
// Object.keys(colorSchemeListeners)?.forEach((t) => {
54-
// colorSchemeListeners[t]?.(theme);
55-
// });
66+
Object.keys(colorSchemeListeners)?.forEach((t) => {
67+
colorSchemeListeners[t]?.(theme);
68+
});
5669
document.documentElement.setAttribute('theme', theme.backgroundColor);
5770
setTheme(theme.backgroundColor);
5871
document.documentElement.setAttribute('primary-color', theme.primaryColor);

‎chat2db-client/src/layouts/BasicLayout/index.less‎

Whitespace-only changes.

‎chat2db-client/src/layouts/BasicLayout/index.tsx‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎chat2db-client/src/layouts/GlobalLayout/index.tsx‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,53 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useLayoutEffect, useState } from 'react';
22
import usePollRequestService, { ServiceStatus } from '@/hooks/usePollRequestService';
33
import i18n, { isEn } from '@/i18n';
44
import { Button, ConfigProvider, Spin, Tooltip } from 'antd';
55
import antdEnUS from 'antd/locale/en_US';
66
import antdZhCN from 'antd/locale/zh_CN';
77
import service from '@/service/misc';
8-
import styles from './index.less';
98
import MyNotification from '@/components/MyNotification';
9+
import useCopyFocusData from '@/hooks/useFocusData';
1010
import { useTheme } from '@/hooks/useTheme';
1111
import { getAntdThemeConfig } from '@/theme';
12-
import useCopyFocusData from '@/hooks/useFocusData';
1312
import { Outlet } from 'umi';
1413
import init from '../init/init';
1514
import { GithubOutlined, SyncOutlined, WechatOutlined } from '@ant-design/icons';
15+
import { ThemeType } from '@/constants';
16+
import styles from './index.less';
1617

1718
const GlobalLayout = () => {
18-
const [appTheme] = useTheme();
19+
const [appTheme, setAppTheme] = useTheme();
20+
const [antdTheme, setAntdTheme] = useState<any>({});
21+
1922
const { serviceStatus, restartPolling } = usePollRequestService({
2023
loopService: service.testService,
2124
});
25+
2226
useCopyFocusData();
2327

24-
useEffect(() => {
28+
useLayoutEffect(() => {
29+
setAntdTheme(getAntdThemeConfig(appTheme));
30+
}, [appTheme]);
31+
32+
useLayoutEffect(() => {
2533
init();
34+
monitorOsTheme();
2635
}, []);
2736

37+
// 监听系统(OS)主题变化
38+
const monitorOsTheme = () => {
39+
function change(e: any) {
40+
if (appTheme.backgroundColor === ThemeType.FollowOs) {
41+
setAppTheme({
42+
...appTheme,
43+
backgroundColor: e.matches ? ThemeType.Dark : ThemeType.Light,
44+
});
45+
}
46+
}
47+
const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
48+
matchMedia.onchange = change;
49+
};
50+
2851
// 等待状态页面
2952
if (serviceStatus === ServiceStatus.PENDING) {
3053
return <Spin className={styles.loadingBox} size="large" />;
@@ -53,7 +76,7 @@ const GlobalLayout = () => {
5376
}
5477

5578
return (
56-
<ConfigProvider locale={isEn ? antdEnUS : antdZhCN} theme={getAntdThemeConfig(appTheme)}>
79+
<ConfigProvider locale={isEn ? antdEnUS : antdZhCN} theme={antdTheme}>
5780
<div className={styles.app}>
5881
<Outlet />
5982
</div>

‎chat2db-client/src/layouts/index.less‎

Lines changed: 0 additions & 104 deletions
This file was deleted.

0 commit comments

Comments
 (0)