refactor: ♻️ 修改文件名称

coder-czy · Dec 20, 2023 · b999aa0 · b999aa0
1 parent fa61e66
commit b999aa0
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 7 deletions.
diff --git a/src/components/layouts/components/Header/index.tsx b/src/components/layouts/components/Header/index.tsx
@@ -17,8 +17,8 @@ import { SizeType } from "antd/es/config-provider/SizeContext";
 import { useDispatch, useSelector } from "@/store";
 import { updateCollapsed } from "@/store/module/sidebar";
 import { setComponentSize, setLanguage } from "@/store/module/global";
-import ThemeComp from "@/components/layouts/components/theme";
-import FullScreen from "@/components/layouts/components/fullScreen";
+import ThemeComp from "@/components/layouts/components/Theme";
+import FullScreen from "@/components/layouts/components/FullScreen";
 import SvgIcon from "@/components/svgIcon";
 
 const { Header } = Layout;

diff --git a/src/components/layouts/components/Theme/index.less b/src/components/layouts/components/Theme/index.less
@@ -0,0 +1,5 @@
+.theme {
+	.theme-color {
+		color: var(--yz-font-color);
+	}
+}
diff --git a/src/components/layouts/components/Theme/index.tsx b/src/components/layouts/components/Theme/index.tsx
@@ -0,0 +1,132 @@
+import { Drawer, ColorPicker, theme, Button, Switch } from "antd";
+import type { Color, ColorPickerProps } from "antd/es/color-picker";
+import { useState, useMemo, useEffect } from "react";
+import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
+
+import { useDispatch, useSelector } from "@/store";
+import { setIsDark, setTheme, setThemeMode } from "@/store/module/global";
+import "./index.less";
+
+type props = {
+	open: boolean;
+	close: () => void;
+};
+
+const ThemeComp = (props: props) => {
+	const dispatch = useDispatch();
+
+	const { open, close } = props;
+	const onClose = () => {
+		close();
+	};
+
+	// 修改主题
+	const { token } = theme.useToken();
+	const [themeVal, setColorHex] = useState<Color | string>(token.colorPrimary);
+	const [formatHex, setFormatHex] = useState<ColorPickerProps["format"]>("hex");
+	const hexString = useMemo(() => (typeof themeVal === "string" ? themeVal : themeVal.toHexString()), [themeVal]);
+	useEffect(() => {
+		dispatch(setTheme(hexString));
+	}, [themeVal]);
+
+	// 重置主题
+	const resetTheme = () => {
+		setColorHex("#a855f7");
+	};
+
+	const { themeMode, isDark, themeColor } = useSelector(state => state.global);
+	const changeTheme = (checked: boolean, mode: "" | "gray" | "week") => {
+		checked ? dispatch(setThemeMode(mode)) : dispatch(setThemeMode(""));
+	};
+
+	return (
+		<>
+			<Drawer className="theme" title="主题配置🎨" placement="right" onClose={onClose} open={open}>
+				<div className="flx-justify-between">
+					<p className="theme-color">主题颜色：</p>
+					<ColorPicker
+						format={formatHex}
+						presets={[
+							{
+								label: "推荐",
+								colors: [
+									"#000000",
+									"#000000E0",
+									"#000000A6",
+									"#00000073",
+									"#00000040",
+									"#00000026",
+									"#0000001A",
+									"#00000012",
+									"#0000000A",
+									"#00000005",
+									"#F5222D",
+									"#FA8C16",
+									"#FADB14",
+									"#8BBB11",
+									"#52C41A",
+									"#13A8A8",
+									"#1677FF",
+									"#2F54EB",
+									"#722ED1",
+									"#EB2F96",
+									"#F5222D4D",
+									"#FA8C164D",
+									"#FADB144D",
+									"#8BBB114D",
+									"#52C41A4D",
+									"#13A8A84D",
+									"#1677FF4D",
+									"#2F54EB4D",
+									"#722ED14D",
+									"#EB2F964D"
+								]
+							}
+						]}
+						showText
+						value={themeVal}
+						onFormatChange={setFormatHex}
+						onChange={setColorHex}
+					/>
+				</div>
+				<div className="flx-justify-between" style={{ marginTop: "20px" }}>
+					<p className="theme-color">重置主题：</p>
+					<Button type="primary" style={{ backgroundColor: themeColor }} onClick={resetTheme}>
+						重置
+					</Button>
+				</div>
+				<div className="flx-justify-between" style={{ marginTop: "20px" }}>
+					<p className="theme-color">暗黑模式：</p>
+					<Switch
+						checkedChildren={<>🌞</>}
+						unCheckedChildren={<>🌜</>}
+						defaultChecked={isDark}
+						onChange={checked => {
+							dispatch(setIsDark(checked));
+						}}
+					/>
+				</div>
+				<div className="flx-justify-between" style={{ marginTop: "20px" }}>
+					<p className="theme-color">灰色模式：</p>
+					<Switch
+						checkedChildren={<CheckOutlined />}
+						unCheckedChildren={<CloseOutlined />}
+						onChange={checked => changeTheme(checked, "gray")}
+						defaultChecked={themeMode === "gray"}
+					/>
+				</div>
+				<div className="flx-justify-between" style={{ marginTop: "20px" }}>
+					<p className="theme-color">色弱模式：</p>
+					<Switch
+						checkedChildren={<CheckOutlined />}
+						unCheckedChildren={<CloseOutlined />}
+						onChange={checked => changeTheme(checked, "week")}
+						defaultChecked={themeMode === "week"}
+					/>
+				</div>
+			</Drawer>
+		</>
+	);
+};
+
+export default ThemeComp;
diff --git a/src/components/layouts/components/header/index.tsx b/src/components/layouts/components/header/index.tsx
@@ -17,8 +17,8 @@ import { SizeType } from "antd/es/config-provider/SizeContext";
 import { useDispatch, useSelector } from "@/store";
 import { updateCollapsed } from "@/store/module/sidebar";
 import { setComponentSize, setLanguage } from "@/store/module/global";
-import ThemeComp from "@/components/layouts/components/theme";
-import FullScreen from "@/components/layouts/components/fullScreen";
+import ThemeComp from "@/components/layouts/components/Theme";
+import FullScreen from "@/components/layouts/components/FullScreen";
 import SvgIcon from "@/components/svgIcon";
 
 const { Header } = Layout;

diff --git a/src/components/layouts/index.tsx b/src/components/layouts/index.tsx
@@ -3,9 +3,9 @@ import { Outlet } from "react-router-dom";
 import { Layout } from "antd";
 
 import "./index.less";
-import Sidebar from "@/components/layouts/components/sidebar";
-import Header from "@/components/layouts/components/header";
-import Footer from "@/components/layouts/components/footer";
+import Sidebar from "@/components/layouts/components/Sidebar";
+import Header from "@/components/layouts/components/Header";
+import Footer from "@/components/layouts/components/Footer";
 
 const { Content } = Layout;