Skip to content

Commit b999aa0

Browse files
coder-czycoder-czy
committed
refactor: ♻️ 修改文件名称
1 parent fa61e66 commit b999aa0

File tree

5 files changed

+144
-7
lines changed

5 files changed

+144
-7
lines changed

‎src/components/layouts/components/Header/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { SizeType } from "antd/es/config-provider/SizeContext";
1717
import { useDispatch, useSelector } from "@/store";
1818
import { updateCollapsed } from "@/store/module/sidebar";
1919
import { setComponentSize, setLanguage } from "@/store/module/global";
20-
import ThemeComp from "@/components/layouts/components/theme";
21-
import FullScreen from "@/components/layouts/components/fullScreen";
20+
import ThemeComp from "@/components/layouts/components/Theme";
21+
import FullScreen from "@/components/layouts/components/FullScreen";
2222
import SvgIcon from "@/components/svgIcon";
2323

2424
const { Header } = Layout;

‎src/components/layouts/components/Theme/index.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.theme {
2+
.theme-color {
3+
color: var(--yz-font-color);
4+
}
5+
}

‎src/components/layouts/components/Theme/index.tsx

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { Drawer, ColorPicker, theme, Button, Switch } from "antd";
2+
import type { Color, ColorPickerProps } from "antd/es/color-picker";
3+
import { useState, useMemo, useEffect } from "react";
4+
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
5+
6+
import { useDispatch, useSelector } from "@/store";
7+
import { setIsDark, setTheme, setThemeMode } from "@/store/module/global";
8+
import "./index.less";
9+
10+
type props = {
11+
open: boolean;
12+
close: () => void;
13+
};
14+
15+
const ThemeComp = (props: props) => {
16+
const dispatch = useDispatch();
17+
18+
const { open, close } = props;
19+
const onClose = () => {
20+
close();
21+
};
22+
23+
// 修改主题
24+
const { token } = theme.useToken();
25+
const [themeVal, setColorHex] = useState<Color | string>(token.colorPrimary);
26+
const [formatHex, setFormatHex] = useState<ColorPickerProps["format"]>("hex");
27+
const hexString = useMemo(() => (typeof themeVal === "string" ? themeVal : themeVal.toHexString()), [themeVal]);
28+
useEffect(() => {
29+
dispatch(setTheme(hexString));
30+
}, [themeVal]);
31+
32+
// 重置主题
33+
const resetTheme = () => {
34+
setColorHex("#a855f7");
35+
};
36+
37+
const { themeMode, isDark, themeColor } = useSelector(state => state.global);
38+
const changeTheme = (checked: boolean, mode: "" | "gray" | "week") => {
39+
checked ? dispatch(setThemeMode(mode)) : dispatch(setThemeMode(""));
40+
};
41+
42+
return (
43+
<>
44+
<Drawer className="theme" title="主题配置🎨" placement="right" onClose={onClose} open={open}>
45+
<div className="flx-justify-between">
46+
<p className="theme-color">主题颜色：</p>
47+
<ColorPicker
48+
format={formatHex}
49+
presets={[
50+
{
51+
label: "推荐",
52+
colors: [
53+
"#000000",
54+
"#000000E0",
55+
"#000000A6",
56+
"#00000073",
57+
"#00000040",
58+
"#00000026",
59+
"#0000001A",
60+
"#00000012",
61+
"#0000000A",
62+
"#00000005",
63+
"#F5222D",
64+
"#FA8C16",
65+
"#FADB14",
66+
"#8BBB11",
67+
"#52C41A",
68+
"#13A8A8",
69+
"#1677FF",
70+
"#2F54EB",
71+
"#722ED1",
72+
"#EB2F96",
73+
"#F5222D4D",
74+
"#FA8C164D",
75+
"#FADB144D",
76+
"#8BBB114D",
77+
"#52C41A4D",
78+
"#13A8A84D",
79+
"#1677FF4D",
80+
"#2F54EB4D",
81+
"#722ED14D",
82+
"#EB2F964D"
83+
]
84+
}
85+
]}
86+
showText
87+
value={themeVal}
88+
onFormatChange={setFormatHex}
89+
onChange={setColorHex}
90+
/>
91+
</div>
92+
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
93+
<p className="theme-color">重置主题：</p>
94+
<Button type="primary" style={{ backgroundColor: themeColor }} onClick={resetTheme}>
95+
重置
96+
</Button>
97+
</div>
98+
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
99+
<p className="theme-color">暗黑模式：</p>
100+
<Switch
101+
checkedChildren={<>🌞</>}
102+
unCheckedChildren={<>🌜</>}
103+
defaultChecked={isDark}
104+
onChange={checked => {
105+
dispatch(setIsDark(checked));
106+
}}
107+
/>
108+
</div>
109+
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
110+
<p className="theme-color">灰色模式：</p>
111+
<Switch
112+
checkedChildren={<CheckOutlined />}
113+
unCheckedChildren={<CloseOutlined />}
114+
onChange={checked => changeTheme(checked, "gray")}
115+
defaultChecked={themeMode === "gray"}
116+
/>
117+
</div>
118+
<div className="flx-justify-between" style={{ marginTop: "20px" }}>
119+
<p className="theme-color">色弱模式：</p>
120+
<Switch
121+
checkedChildren={<CheckOutlined />}
122+
unCheckedChildren={<CloseOutlined />}
123+
onChange={checked => changeTheme(checked, "week")}
124+
defaultChecked={themeMode === "week"}
125+
/>
126+
</div>
127+
</Drawer>
128+
</>
129+
);
130+
};
131+
132+
export default ThemeComp;

‎src/components/layouts/components/header/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { SizeType } from "antd/es/config-provider/SizeContext";
1717
import { useDispatch, useSelector } from "@/store";
1818
import { updateCollapsed } from "@/store/module/sidebar";
1919
import { setComponentSize, setLanguage } from "@/store/module/global";
20-
import ThemeComp from "@/components/layouts/components/theme";
21-
import FullScreen from "@/components/layouts/components/fullScreen";
20+
import ThemeComp from "@/components/layouts/components/Theme";
21+
import FullScreen from "@/components/layouts/components/FullScreen";
2222
import SvgIcon from "@/components/svgIcon";
2323

2424
const { Header } = Layout;

‎src/components/layouts/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Outlet } from "react-router-dom";
33
import { Layout } from "antd";
44

55
import "./index.less";
6-
import Sidebar from "@/components/layouts/components/sidebar";
7-
import Header from "@/components/layouts/components/header";
8-
import Footer from "@/components/layouts/components/footer";
6+
import Sidebar from "@/components/layouts/components/Sidebar";
7+
import Header from "@/components/layouts/components/Header";
8+
import Footer from "@/components/layouts/components/Footer";
99

1010
const { Content } = Layout;
1111

0 commit comments

Comments
 (0)