style: layout

src/App.scss

@@ -75,6 +75,12 @@ body {
 }
 
 @font-face {
+  font-family: "SourceHanSerifCN-Medium";
+  src: url("~/public/fonts/SOURCEHANSERIFCN-REGULAR.OTF") format("opentype");
+  font-display: swap;
+}
+
+@font-face {
   font-family: "Source Han Sans CN-Regular";
   src: url("~/public/fonts/SourceHanSansCN-Regular.otf") format("opentype");
   font-display: swap;

src/components/FormPageFooter/index.scss

@@ -7,9 +7,10 @@
     align-items: center;
     justify-content: center;
     position: fixed;
-    left: 220px;
+    left: 200px;
     right: 0;
     bottom: 0;
+    padding-left: 70px;
     height: $height;
     background: white;
     border-top: 1px solid var(--border-color);

src/components/Z_RichText/index.module.scss

@@ -1,7 +1,6 @@
 .RichText {
   :global {
     .txtBox {
-      width: 1000px;
       border: 1px solid #ccc;
 
       // 隐藏媒体功能

src/pages/Layout/components/Header/index.module.scss

@@ -5,11 +5,22 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 40px;
-  height: 60px;
-  line-height: 60px;
-  background-color: #fff;
-  border-bottom: 1px solid var(--border-color);
+  height: 82px;
+  line-height: 82px;
+  background-color: transparent;
   z-index: var(--index-top);
+
+  &::after {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 82px;
+    background: url("../../../../assets/images/topic.jpg") no-repeat center /
+      cover;
+    z-index: -1;
+  }
 }
 
 .user {

src/pages/Layout/components/Header/index.tsx

@@ -38,10 +38,12 @@ const generateBreadcrumb = (
       breadcrumb.push({
         title: item.title,
         href:
-          i < paths.length - 1
+          i < paths.length - 1 && item.children
             ? `${isHashRoute ? "#" : ""}${item.redirect || item.path}`
             : undefined,
       });
+
+      if (!item.children) break;
     }
   }
 

src/pages/Layout/components/Menu/index.tsx

@@ -1,4 +1,4 @@
-import { Menu, MenuProps } from "antd";
+import { Image, Menu, MenuProps } from "antd";
 import { FC, memo, useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { DageRouteItem } from "@/router";
@@ -38,12 +38,18 @@ export const LayoutMenu: FC<LayoutMenuProps> = memo(
       (list: DageRouteItem[], level = 1): any[] => {
         const stack: DageRouteItem[] = [];
 
-        list.forEach((item) => {
+        list.forEach((item, index) => {
           let child: DageRouteItem[] = [];
-          const { title, path, icon, children, hide } = item;
+          const { title, path, children, hide } = item;
           const params = {
             key: path,
-            icon: icon,
+            icon: (
+              <Image
+                src={require(`@/assets/images/icon-${index + 1}-min.png`)}
+                width={45}
+                height={45}
+              />
+            ),
             label: title,
           };
 

src/pages/Layout/index.scss

@@ -2,7 +2,7 @@
   min-height: 100vh;
 
   .logo {
-    padding: 20px 20px 0;
+    padding: 23px 21px 0;
 
     img {
       width: 100%;
@@ -10,6 +10,10 @@
   }
 }
 
+.ant-layout-sider {
+  z-index: 1;
+}
+
 .layout-menu {
   color: #ffffff;
   font-size: 16px;
@@ -24,21 +28,42 @@
     min-height: 50px;
     line-height: 50px;
 
-    &-icon {
-      font-size: 20px !important;
+    .ant-image {
+      margin-right: 13px;
     }
   }
   .ant-menu-item {
+    width: 100%;
+    margin-inline: 0;
+
+    .ant-menu-title-content {
+      font-size: 18px;
+      font-family: "SourceHanSerifCN-Medium";
+    }
     &-selected {
+      overflow: initial;
       color: #ffffff !important;
-      background: var(--primary-color) !important;
 
       .ant-menu-title-content {
         color: inherit !important;
       }
+      span {
+        position: relative;
+        z-index: 1;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: url("../../assets/images/menu-item-hover-min.png") no-repeat
+          center / cover;
+      }
     }
     &-active .ant-menu-title-content {
-      color: var(--primary-color);
+      color: var(--second-color);
     }
   }
   .ant-menu-submenu {

src/pages/Layout/index.tsx

@@ -40,13 +40,16 @@ export default function CustomLayout() {
       <Layout hasSider className="layout">
         {/* 菜单 */}
         <Layout.Sider
-          width={220}
+          width={270}
           style={{
             position: "fixed",
             top: 0,
             left: 0,
             bottom: 0,
-            background: "#b6a384",
+            borderTopRightRadius: "46px",
+            borderBottomRightRadius: "46px",
+            zIndex: 2,
+            background: `url(${require("../../assets/images/menu.png")}) no-repeat center bottom / cover`,
           }}
         >
           <div className="logo">
@@ -61,19 +64,20 @@ export default function CustomLayout() {
           />
         </Layout.Sider>
 
-        <Layout style={{ marginLeft: 220 }}>
+        <Layout style={{ marginLeft: 270, zIndex: 1 }}>
           {/* 头部 */}
           <LayoutHeader menuData={menuList} />
 
           {/* 主体 */}
           <Content
             style={{
-              margin: "15px",
+              margin: 20,
               overflow: "initial",
               position: "relative",
               background: "#ffffff",
-              padding: 20,
-              borderRadius: 4,
+              padding: 30,
+              borderRadius: 30,
+              boxShadow: "0px 2px 4px 0px rgba(46,25,16,0.16)",
             }}
           >
             <Suspense fallback={<MemoSpinLoding />}>

src/pages/Layout/utils.ts

@@ -22,11 +22,17 @@ export const findRouteByPath = (
   routes: DageRouteItem[],
   path: string
 ): DageRouteItem | null => {
+  const temp = path.split("/");
+
   for (const route of routes) {
-    if (route.path === path) {
+    if (route.path.replace(/\/:[^/]+/g, "") === path) {
       return route;
     }
-    if (route.children) {
+    if (
+      temp.length !== 2 &&
+      route.path.indexOf(temp[1]) > -1 &&
+      route.children
+    ) {
       const subRoute = findRouteByPath(route.children, path);
       if (subRoute) {
         return subRoute;

src/router/index.tsx

@@ -1,13 +1,3 @@
-import {
-  UserOutlined,
-  SettingOutlined,
-  PictureOutlined,
-  CommentOutlined,
-  AppstoreOutlined,
-  BookOutlined,
-  ReadOutlined,
-  MessageOutlined,
-} from "@ant-design/icons";
 import React from "react";
 import { DageRouteItem } from "./types";
 
@@ -17,7 +7,6 @@ export const DEFAULT_ADMIN_MENU: DageRouteItem[] = [
   {
     path: "/banner",
     title: "海报管理",
-    icon: <PictureOutlined />,
     Component: React.lazy(() => import("../pages/Banner")),
     children: [
       {
@@ -37,7 +26,6 @@ export const DEFAULT_ADMIN_MENU: DageRouteItem[] = [
   {
     path: "/information",
     title: "资讯管理",
-    icon: <CommentOutlined />,
     Component: React.lazy(() => import("../pages/Information")),
     children: [
       {
@@ -61,13 +49,11 @@ export const DEFAULT_ADMIN_MENU: DageRouteItem[] = [
   {
     path: "/exhibition",
     title: "展厅管理",
-    icon: <AppstoreOutlined />,
     Component: React.lazy(() => import("../pages/Exhibition")),
   },
   {
     path: "/collection",
     title: "藏品管理",
-    icon: <BookOutlined />,
     Component: React.lazy(() => import("../pages/Collection")),
     children: [
       {
@@ -83,7 +69,6 @@ export const DEFAULT_ADMIN_MENU: DageRouteItem[] = [
   {
     path: "/questionnaire",
     title: "问卷管理",
-    icon: <ReadOutlined />,
     Component: React.lazy(() => import("../pages/Questionnaire")),
     children: [
       {
@@ -99,19 +84,16 @@ export const DEFAULT_ADMIN_MENU: DageRouteItem[] = [
   {
     path: "/message",
     title: "留言管理",
-    icon: <MessageOutlined />,
     Component: React.lazy(() => import("../pages/Message")),
   },
   {
     path: "/user",
     title: "用户管理",
-    icon: <UserOutlined />,
     Component: React.lazy(() => import("../pages/User")),
   },
   {
     path: "/log",
     title: "操作日志",
-    icon: <SettingOutlined />,
     Component: React.lazy(() => import("../pages/Log")),
   },
 ];