refactor: ♻️ 修改文件夹名称为小写

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;

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);
+}

src/components/layouts/components/footer/index.tsx

@@ -0,0 +1,8 @@
+import "./index.less";
+
+const year = new Date().getFullYear();
+function Footer() {
+	return <div className="footer-box">{year} © YZ-Admin By Coder Yangzi.</div>;
+}
+
+export default Footer;

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 ? (
+		<ExpandOutlined onClick={FullScreenFn} className="icon" />
+	) : (
+		<CompressOutlined onClick={FullScreenFn} className="icon" />
+	);
+}
+
+export default FullScreen;

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: (
+				<span>
+					<HomeOutlined className="mr-4" />
+					首页
+				</span>
+			)
+		},
+		{
+			key: "2",
+			label: (
+				<span>
+					<UserOutlined className="mr-4" />
+					个人信息
+				</span>
+			)
+		},
+		{
+			key: "3",
+			label: (
+				<span>
+					<KeyOutlined className="mr-4" />
+					修改密码
+				</span>
+			)
+		},
+		{
+			type: "divider"
+		},
+		{
+			key: "4",
+			label: (
+				<span>
+					<LogoutOutlined className="mr-4" />
+					退出登录
+				</span>
+			),
+			onClick: () => {
+				setIsModalOpen(true);
+			}
+		}
+	];
+	// 组件大小切换
+	const sizeItem = ["small", "middle", "large"];
+	const compItems: MenuProps["items"] = sizeItem.map(item => {
+		return {
+			key: item,
+			label: <span>{item}</span>,
+			disabled: componentSize === item,
+			onClick: () => {
+				dispatch(setComponentSize(item as SizeType));
+			}
+		};
+	});
+
+	// 国际化切换
+	const languageItems: MenuProps["items"] = [
+		{
+			key: "zh-cn",
+			disabled: language === "zh-cn",
+			label: <span>中文</span>,
+			onClick: () => {
+				dispatch(setLanguage("zh-cn"));
+			}
+		},
+		{
+			key: "en",
+			disabled: language === "en",
+			label: <span>英文</span>,
+			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 (
+		<>
+			{/* 弹框 */}
+			<Modal title="温馨提示" cancelText="取消" okText="确定" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+				<p>您是否确认退出登录?</p>
+			</Modal>
+
+			<Header className="header flx-justify-between">
+				<Button
+					type="text"
+					icon={isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+					onClick={collapsedFn}
+					style={{
+						fontSize: "16px",
+						width: 64,
+						height: 64
+					}}
+					size="large"
+				/>
+				<div className="func-box flx-center">
+					{/* <Tooltip placement="bottom" title="全屏"> */}
+					<FullScreen />
+					{/* </Tooltip> */}
+
+					{/* 国际化配置 */}
+					<Dropdown menu={{ items: languageItems }} trigger={["hover"]} placement="bottom" arrow>
+						{/* <Tooltip placement="left" title="国际化配置"> */}
+						<div className="flx-center">
+							<SvgIcon
+								name="language"
+								iconStyle={{
+									height: "22px",
+									width: "22px",
+									marginRight: "15px",
+									cursor: "pointer",
+									color: "var(--yz-svg-color)"
+								}}
+							/>
+						</div>
+						{/* </Tooltip> */}
+					</Dropdown>
+
+					{/* 组件大小 */}
+					<Dropdown menu={{ items: compItems }} trigger={["hover"]} placement="bottom" arrow>
+						{/* <Tooltip placement="left" title="组件尺寸配置"> */}
+						<FontSizeOutlined className="icon" />
+						{/* </Tooltip> */}
+					</Dropdown>
+
+					{/* 主题配置 */}
+					<Tooltip placement="bottom" title="主题配置">
+						<SkinOutlined
+							className="icon"
+							onClick={() => {
+								setOpen(true);
+							}}
+						/>
+					</Tooltip>
+					{/* 个人信息 */}
+					<p className="username ellipsis">Yangzi</p>
+					<Dropdown menu={{ items }} trigger={["hover"]} placement="bottom" arrow>
+						<Avatar className="icon avatar" style={{ backgroundColor: token.colorPrimary }} icon={<UserOutlined />} />
+					</Dropdown>
+				</div>
+				<ThemeComp open={open} close={close}></ThemeComp>
+			</Header>
+		</>
+	);
+}
+
+export default Head;

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);
+	}
+}

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 (
+		<Sider trigger={null} collapsible collapsed={isCollapsed}>
+			{/* logo */}
+			<div className="logo">
+				<img src={logo} alt="logo" />
+				<h2 style={{ display: isCollapsed ? "none" : "block" }}>YZ ADMIN</h2>
+			</div>
+
+			{/* 菜单 */}
+			<Menu
+				theme="light"
+				mode="inline"
+				onClick={menuHandle}
+				defaultSelectedKeys={[pathname]}
+				items={[
+					{
+						key: "/dashboard/index",
+						icon: <DashboardOutlined />,
+						label: "仪表盘"
+					},
+					{
+						key: "/err",
+						icon: <BugOutlined />,
+						label: "错误页",
+						children: [
+							{
+								key: "/404",
+								icon: <GlobalOutlined />,
+								label: "404"
+							},
+							{
+								key: "/500",
+								icon: <ApiOutlined />,
+								label: "500"
+							}
+						]
+					},
+					{
+						key: "/menu",
+						icon: <AlignLeftOutlined />,
+						label: "菜单",
+						children: [
+							{
+								key: "/menu1/index",
+								icon: <OrderedListOutlined />,
+								label: "menu1",
+								children: [
+									{
+										key: "/menu/menu1-1/index",
+										icon: <OrderedListOutlined />,
+										label: "menu1-1"
+									},
+									{
+										key: "/menu/menu1-2/index",
+										icon: <OrderedListOutlined />,
+										label: "menu1-2"
+									}
+								]
+							},
+							{
+								key: "/menu2/index",
+								icon: <OrderedListOutlined />,
+								label: "menu2",
+								children: [
+									{
+										key: "/menu/menu2-1/index",
+										icon: <OrderedListOutlined />,
+										label: "menu2-1"
+									},
+									{
+										key: "/menu/menu2-2/index",
+										icon: <OrderedListOutlined />,
+										label: "menu2-2"
+									}
+								]
+							}
+						]
+					},
+					{
+						key: "/icon/index",
+						icon: <SketchOutlined />,
+						label: "svg图标"
+					},
+					{
+						key: "/theme/index",
+						icon: <SkinOutlined />,
+						label: "主题"
+					}
+				]}
+			/>
+		</Sider>
+	);
+}
+
+export default Sidebar;