From 86409ca739c04f1958f394e4bb873286b8d96c44 Mon Sep 17 00:00:00 2001 From: yangzi <1131696774@qq.com> Date: Wed, 20 Dec 2023 15:22:06 +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=E4=B8=BA?= =?UTF-8?q?=E5=B0=8F=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layouts/components/Header/index.tsx | 4 +- .../layouts/components/footer/index.less | 9 + .../layouts/components/footer/index.tsx | 8 + .../layouts/components/fullScreen/index.tsx | 30 +++ .../layouts/components/header/index.tsx | 202 ++++++++++++++++++ .../layouts/components/sidebar/index.less | 7 + .../layouts/components/sidebar/index.tsx | 127 +++++++++++ src/components/layouts/index.tsx | 6 +- src/typings/global.d.ts | 5 - 9 files changed, 388 insertions(+), 10 deletions(-) create mode 100644 src/components/layouts/components/footer/index.less create mode 100644 src/components/layouts/components/footer/index.tsx create mode 100644 src/components/layouts/components/fullScreen/index.tsx create mode 100644 src/components/layouts/components/header/index.tsx create mode 100644 src/components/layouts/components/sidebar/index.less create mode 100644 src/components/layouts/components/sidebar/index.tsx diff --git a/src/components/layouts/components/Header/index.tsx b/src/components/layouts/components/Header/index.tsx index dea8898..dd2b48c 100644 --- 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 "../Theme/index"; -import FullScreen from "../FullScreen/index"; +import ThemeComp from "../theme/index"; +import FullScreen from "../fullScreen/index"; import SvgIcon from "@/components/svgIcon"; const { Header } = Layout; diff --git a/src/components/layouts/components/footer/index.less b/src/components/layouts/components/footer/index.less new file mode 100644 index 0000000..499e154 --- /dev/null +++ b/src/components/layouts/components/footer/index.less @@ -0,0 +1,9 @@ +.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 new file mode 100644 index 0000000..fcdbccc --- /dev/null +++ b/src/components/layouts/components/footer/index.tsx @@ -0,0 +1,8 @@ +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 new file mode 100644 index 0000000..9e324b0 --- /dev/null +++ b/src/components/layouts/components/fullScreen/index.tsx @@ -0,0 +1,30 @@ +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 new file mode 100644 index 0000000..dd2b48c --- /dev/null +++ b/src/components/layouts/components/header/index.tsx @@ -0,0 +1,202 @@ +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 "../theme/index"; +import FullScreen from "../fullScreen/index"; +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/sidebar/index.less b/src/components/layouts/components/sidebar/index.less new file mode 100644 index 0000000..3e487a7 --- /dev/null +++ b/src/components/layouts/components/sidebar/index.less @@ -0,0 +1,7 @@ +.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 new file mode 100644 index 0000000..fde2ac8 --- /dev/null +++ b/src/components/layouts/components/sidebar/index.tsx @@ -0,0 +1,127 @@ +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/index.tsx b/src/components/layouts/index.tsx index 6698497..690da80 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/Sidebar"; -import Header from "./components/Header"; -import Footer from "./components/Footer"; +import Sidebar from "./components/sidebar"; +import Header from "./components/header"; +import Footer from "./components/footer"; const { Content } = Layout; diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index 399d1c9..f5acf2a 100644 --- a/src/typings/global.d.ts +++ b/src/typings/global.d.ts @@ -16,8 +16,3 @@ declare interface ViteEnv { VITE_PROXY: [string, string][]; VITE_BUILD_GZIP: boolean; } - -declare module "*.tsx" { - import { FC } from "react"; - export default FC; -}