From c7e48c2ec59cf27c0512638d7e05f0dbd7dd6e94 Mon Sep 17 00:00:00 2001 From: yangzi <1131696774@qq.com> Date: Wed, 20 Dec 2023 17:10:42 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E6=96=87=E4=BB=B6=E5=A4=B9=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layouts/components/footer/index.less | 9 - .../layouts/components/footer/index.tsx | 8 - .../layouts/components/fullScreen/index.tsx | 30 --- .../layouts/components/header/index.tsx | 202 ------------------ .../{Footer => layoutFooter}/index.less | 0 .../{Footer => layoutFooter}/index.tsx | 0 .../index.tsx | 0 .../{Header => layoutHeader}/index.tsx | 4 +- .../{Sidebar => layoutSidebar}/index.less | 0 .../{Sidebar => layoutSidebar}/index.tsx | 0 .../{Theme => layoutTheme}/index.less | 0 .../{Theme => layoutTheme}/index.tsx | 0 .../layouts/components/sidebar/index.less | 7 - .../layouts/components/sidebar/index.tsx | 127 ----------- .../layouts/components/theme/index.less | 5 - .../layouts/components/theme/index.tsx | 132 ------------ src/components/layouts/index.tsx | 6 +- 17 files changed, 5 insertions(+), 525 deletions(-) delete mode 100644 src/components/layouts/components/footer/index.less delete mode 100644 src/components/layouts/components/footer/index.tsx delete mode 100644 src/components/layouts/components/fullScreen/index.tsx delete mode 100644 src/components/layouts/components/header/index.tsx rename src/components/layouts/components/{Footer => layoutFooter}/index.less (100%) rename src/components/layouts/components/{Footer => layoutFooter}/index.tsx (100%) rename src/components/layouts/components/{FullScreen => layoutFullScreen}/index.tsx (100%) rename src/components/layouts/components/{Header => layoutHeader}/index.tsx (96%) rename src/components/layouts/components/{Sidebar => layoutSidebar}/index.less (100%) rename src/components/layouts/components/{Sidebar => layoutSidebar}/index.tsx (100%) rename src/components/layouts/components/{Theme => layoutTheme}/index.less (100%) rename src/components/layouts/components/{Theme => layoutTheme}/index.tsx (100%) delete mode 100644 src/components/layouts/components/sidebar/index.less delete mode 100644 src/components/layouts/components/sidebar/index.tsx delete mode 100644 src/components/layouts/components/theme/index.less delete mode 100644 src/components/layouts/components/theme/index.tsx diff --git a/src/components/layouts/components/footer/index.less b/src/components/layouts/components/footer/index.less deleted file mode 100644 index 499e154..0000000 --- a/src/components/layouts/components/footer/index.less +++ /dev/null @@ -1,9 +0,0 @@ -.footer-box { - height: 30px; - font-size: 16px; - line-height: 30px; - color: var(--yz-font-color); - text-align: center; - background-color: var(--yz-background-color); - border-top: 1px solid var(--yz-border-color); -} diff --git a/src/components/layouts/components/footer/index.tsx b/src/components/layouts/components/footer/index.tsx deleted file mode 100644 index fcdbccc..0000000 --- a/src/components/layouts/components/footer/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import "./index.less"; - -const year = new Date().getFullYear(); -function Footer() { - return
{year} © YZ-Admin By Coder Yangzi.
; -} - -export default Footer; diff --git a/src/components/layouts/components/fullScreen/index.tsx b/src/components/layouts/components/fullScreen/index.tsx deleted file mode 100644 index 9e324b0..0000000 --- a/src/components/layouts/components/fullScreen/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useState, useEffect } from "react"; -import screenfull from "screenfull"; -import { ExpandOutlined, CompressOutlined } from "@ant-design/icons"; -import { message } from "antd"; - -function FullScreen() { - const [isFull, setIsFull] = useState(true); - const FullScreenFn = () => { - if (!screenfull.isEnabled) message.error("抱歉！您的浏览器不支持全屏！"); - screenfull.toggle(); - }; - useEffect(() => { - screenfull.on("change", () => { - if (screenfull.isFullscreen) { - setIsFull(false); - } else { - setIsFull(true); - } - return () => screenfull.off("change", () => {}); - }); - }, []); - - return isFull ? ( - - ) : ( - - ); -} - -export default FullScreen; diff --git a/src/components/layouts/components/header/index.tsx b/src/components/layouts/components/header/index.tsx deleted file mode 100644 index 9295a22..0000000 --- a/src/components/layouts/components/header/index.tsx +++ /dev/null @@ -1,202 +0,0 @@ -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import { Layout, Button, Tooltip, Dropdown, Avatar, theme, Modal } from "antd"; -import type { MenuProps } from "antd"; -import { - MenuUnfoldOutlined, - SkinOutlined, - MenuFoldOutlined, - UserOutlined, - FontSizeOutlined, - HomeOutlined, - KeyOutlined, - LogoutOutlined -} from "@ant-design/icons"; -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 SvgIcon from "@/components/svgIcon"; - -const { Header } = Layout; - -function Head() { - const dispatch = useDispatch(); - const { token } = theme.useToken(); - const navigate = useNavigate(); - const { componentSize, language } = useSelector(state => state.global); - const items: MenuProps["items"] = [ - { - key: "1", - label: ( - - - 首页 - - ) - }, - { - key: "2", - label: ( - - - 个人信息 - - ) - }, - { - key: "3", - label: ( - - - 修改密码 - - ) - }, - { - type: "divider" - }, - { - key: "4", - label: ( - - - 退出登录 - - ), - onClick: () => { - setIsModalOpen(true); - } - } - ]; - // 组件大小切换 - const sizeItem = ["small", "middle", "large"]; - const compItems: MenuProps["items"] = sizeItem.map(item => { - return { - key: item, - label: {item}, - disabled: componentSize === item, - onClick: () => { - dispatch(setComponentSize(item as SizeType)); - } - }; - }); - - // 国际化切换 - const languageItems: MenuProps["items"] = [ - { - key: "zh-cn", - disabled: language === "zh-cn", - label: 中文, - onClick: () => { - dispatch(setLanguage("zh-cn")); - } - }, - { - key: "en", - disabled: language === "en", - label: 英文, - onClick: () => { - dispatch(setLanguage("en")); - } - } - ]; - - // 主题弹窗 - const [open, setOpen] = useState(false); - const close = () => { - setOpen(false); - }; - - // 侧边栏收缩 - - const { isCollapsed } = useSelector(state => state.sidebar); - const collapsedFn = () => { - dispatch(updateCollapsed(!isCollapsed)); - }; - - const [isModalOpen, setIsModalOpen] = useState(false); - - // 弹框 - const handleOk = () => { - navigate("/login", { replace: true }); - }; - - const handleCancel = () => { - setIsModalOpen(false); - }; - - return ( - <> - {/* 弹框 */} - -

您是否确认退出登录?

- - -
-
- - ); -} - -export default Head; diff --git a/src/components/layouts/components/Footer/index.less b/src/components/layouts/components/layoutFooter/index.less similarity index 100% rename from src/components/layouts/components/Footer/index.less rename to src/components/layouts/components/layoutFooter/index.less diff --git a/src/components/layouts/components/Footer/index.tsx b/src/components/layouts/components/layoutFooter/index.tsx similarity index 100% rename from src/components/layouts/components/Footer/index.tsx rename to src/components/layouts/components/layoutFooter/index.tsx diff --git a/src/components/layouts/components/FullScreen/index.tsx b/src/components/layouts/components/layoutFullScreen/index.tsx similarity index 100% rename from src/components/layouts/components/FullScreen/index.tsx rename to src/components/layouts/components/layoutFullScreen/index.tsx diff --git a/src/components/layouts/components/Header/index.tsx b/src/components/layouts/components/layoutHeader/index.tsx similarity index 96% rename from src/components/layouts/components/Header/index.tsx rename to src/components/layouts/components/layoutHeader/index.tsx index 9295a22..b5daa4b 100644 --- a/src/components/layouts/components/Header/index.tsx +++ b/src/components/layouts/components/layoutHeader/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/layoutTheme"; +import FullScreen from "@/components/layouts/components/layoutFullScreen"; import SvgIcon from "@/components/svgIcon"; const { Header } = Layout; diff --git a/src/components/layouts/components/Sidebar/index.less b/src/components/layouts/components/layoutSidebar/index.less similarity index 100% rename from src/components/layouts/components/Sidebar/index.less rename to src/components/layouts/components/layoutSidebar/index.less diff --git a/src/components/layouts/components/Sidebar/index.tsx b/src/components/layouts/components/layoutSidebar/index.tsx similarity index 100% rename from src/components/layouts/components/Sidebar/index.tsx rename to src/components/layouts/components/layoutSidebar/index.tsx diff --git a/src/components/layouts/components/Theme/index.less b/src/components/layouts/components/layoutTheme/index.less similarity index 100% rename from src/components/layouts/components/Theme/index.less rename to src/components/layouts/components/layoutTheme/index.less diff --git a/src/components/layouts/components/Theme/index.tsx b/src/components/layouts/components/layoutTheme/index.tsx similarity index 100% rename from src/components/layouts/components/Theme/index.tsx rename to src/components/layouts/components/layoutTheme/index.tsx diff --git a/src/components/layouts/components/sidebar/index.less b/src/components/layouts/components/sidebar/index.less deleted file mode 100644 index 3e487a7..0000000 --- a/src/components/layouts/components/sidebar/index.less +++ /dev/null @@ -1,7 +0,0 @@ -.ant-layout .ant-layout-sider { - background-color: var(--yz-background-color); - border-right: 1px solid var(--yz-border-color); - .logo { - color: var(--yz-font-color); - } -} diff --git a/src/components/layouts/components/sidebar/index.tsx b/src/components/layouts/components/sidebar/index.tsx deleted file mode 100644 index fde2ac8..0000000 --- a/src/components/layouts/components/sidebar/index.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { Layout, Menu } from "antd"; -import { - DashboardOutlined, - BugOutlined, - GlobalOutlined, - SketchOutlined, - ApiOutlined, - SkinOutlined, - AlignLeftOutlined, - OrderedListOutlined -} from "@ant-design/icons"; -import { useNavigate, useLocation } from "react-router-dom"; - -import logo from "@/assets/logo.svg"; -import { useSelector } from "@/store"; -import "./index.less"; - -const { Sider } = Layout; - -function Sidebar() { - // 侧边栏收缩 - const { isCollapsed } = useSelector(state => state.sidebar); - - // 点击菜单跳转页面 - const navigate = useNavigate(); - const menuHandle = ({ key }: { key: string }) => { - navigate(key); - }; - - // 设置菜单选中 - const { pathname } = useLocation(); - - return ( - - {/* logo */} -
- logo -

YZ ADMIN

-
- - {/* 菜单 */} - , - label: "仪表盘" - }, - { - key: "/err", - icon: , - label: "错误页", - children: [ - { - key: "/404", - icon: , - label: "404" - }, - { - key: "/500", - icon: , - label: "500" - } - ] - }, - { - key: "/menu", - icon: , - label: "菜单", - children: [ - { - key: "/menu1/index", - icon: , - label: "menu1", - children: [ - { - key: "/menu/menu1-1/index", - icon: , - label: "menu1-1" - }, - { - key: "/menu/menu1-2/index", - icon: , - label: "menu1-2" - } - ] - }, - { - key: "/menu2/index", - icon: , - label: "menu2", - children: [ - { - key: "/menu/menu2-1/index", - icon: , - label: "menu2-1" - }, - { - key: "/menu/menu2-2/index", - icon: , - label: "menu2-2" - } - ] - } - ] - }, - { - key: "/icon/index", - icon: , - label: "svg图标" - }, - { - key: "/theme/index", - icon: , - label: "主题" - } - ]} - /> - - ); -} - -export default Sidebar; diff --git a/src/components/layouts/components/theme/index.less b/src/components/layouts/components/theme/index.less deleted file mode 100644 index 4c27539..0000000 --- a/src/components/layouts/components/theme/index.less +++ /dev/null @@ -1,5 +0,0 @@ -.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 deleted file mode 100644 index 77270f9..0000000 --- a/src/components/layouts/components/theme/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -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(token.colorPrimary); - const [formatHex, setFormatHex] = useState("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 ( - <> - -
-

主题颜色：

- -
-
-

重置主题：

- -
-
-

暗黑模式：

- 🌞} - unCheckedChildren={<>🌜} - defaultChecked={isDark} - onChange={checked => { - dispatch(setIsDark(checked)); - }} - /> -
-
-

灰色模式：

- } - unCheckedChildren={} - onChange={checked => changeTheme(checked, "gray")} - defaultChecked={themeMode === "gray"} - /> -
-
-

色弱模式：

- } - unCheckedChildren={} - onChange={checked => changeTheme(checked, "week")} - defaultChecked={themeMode === "week"} - /> -
- - - ); -}; - -export default ThemeComp; diff --git a/src/components/layouts/index.tsx b/src/components/layouts/index.tsx index ddc94b1..45e5ad5 100644 --- 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/layoutSidebar"; +import Header from "@/components/layouts/components/layoutHeader"; +import Footer from "@/components/layouts/components/layoutFooter"; const { Content } = Layout;