update add meeting router children item

web/src/hooks/authProvider/index.tsx

@@ -9,6 +9,7 @@ import {
 import { routerArray } from "../../router/elementRoute";
 import { RouteItem } from "../../dtos/route";
 import { GetAuthUser } from "../../api/user-management";
+import { useLocation } from "react-router-dom";
 
 interface AuthContextOptions {
   token: string;
@@ -27,6 +28,8 @@ export const AuthContext = createContext<AuthContextOptions>(null!);
 const AuthProvider = (props: { children: React.ReactNode }) => {
   const defaultToken = localStorage.getItem("token") as string;
 
+  const pathname = useLocation().pathname;
+
   const defaulUserName = localStorage.getItem("username") as string;
 
   const [username, setUsername] = useState(defaulUserName);
@@ -126,10 +129,16 @@ const AuthProvider = (props: { children: React.ReactNode }) => {
         (adminPermission || (item.path !== "/user" && item.path !== "/manager"))
     );
 
-    return adminPermission
+    const routers = adminPermission
       ? routerList
-      : routerList.filter((item) => item.path !== "/whiteList");
-  }, [currentUserRolePermissions]);
+      : routerList.filter((item) => item.path !== "/meeting/whiteList");
+
+    return pathname.includes("/meeting")
+      ? routers.map((item) =>
+          item.path === "/meeting" ? { ...item, head: "智能会议" } : item
+        )
+      : routerList.filter((item) => item.path !== "/meeting/whiteList");
+  }, [currentUserRolePermissions, pathname]);
 
   useEffect(() => {
     if (token) {

web/src/pages/main/index.module.scss

@@ -24,27 +24,33 @@ $aClickColor: #30cea3;
       .item {
         font-size: 1rem;
         margin: 2rem 0;
+        display: flex;
+        position: relative;
+        justify-content: center;
 
         .itemNone {
           color: $aColor;
           text-decoration: none;
+          position: relative;
         }
 
         .itemClick {
           color: $aClickColor;
           text-decoration: none;
-          // font-weight: bolder;
+          position: relative;
         }
 
         .iconTitleContainer {
           display: flex;
           align-items: center;
           justify-content: center;
+          width: max-content;
         }
 
         .title {
           margin-left: 0.4rem;
           font-size: 1rem;
+          display: flex;
         }
       }
     }
@@ -68,3 +74,31 @@ $aClickColor: #30cea3;
     }
   }
 }
+
+.childrenItem {
+  margin-top: 1rem;
+  padding-left: 1rem;
+  margin-bottom: 1rem;
+}
+
+.childrenItemNone {
+  color: $aColor;
+  text-decoration: none;
+  position: absolute;
+  left: 1.8rem;
+  white-space: nowrap;
+}
+
+.childrenItemClick {
+  color: $aClickColor;
+  position: absolute;
+  left: 1.8rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.childrenSettingIcon {
+  position: absolute;
+  right: 1rem;
+  cursor: pointer;
+}

web/src/pages/main/index.tsx

@@ -1,33 +1,76 @@
 import styles from "./index.module.scss";
-import { Link, Outlet } from "react-router-dom";
+import { Link, Outlet, useLocation } from "react-router-dom";
 import useMainAction from "./hook";
 import UserInformation from "./components/user-information";
 import useAuth from "../../auth";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { useState } from "react";
 
 const Main = () => {
   const { filterRouter } = useAuth();
 
+  const pathname = useLocation().pathname;
+
+  const [isShowMeetingItem, setIsShowMeetingItem] = useState<boolean>(true);
+
   const { clickMainIndex, setMainClickIndex } = useMainAction();
 
   const routerTabBar = () => {
     return filterRouter?.map((item, index) => {
-      return (
+      return item.head ? (
         <div key={index} className={styles.item}>
           <Link
             to={item.path}
             onClick={() => {
               setMainClickIndex(index);
             }}
             className={
-              clickMainIndex === index ? styles.itemClick : styles.itemNone
+              pathname.includes(item.path) ? styles.itemClick : styles.itemNone
             }
           >
-            <div className={styles.iconTitleContainer}>
-              {item.icons}
-              <span className={styles.title}>{item.head}</span>
+            <div>
+              <div className={styles.iconTitleContainer}>
+                {item.icons}
+                <span className={styles.title}>{item.head}</span>
+              </div>
+              {item.path === "/meeting" &&
+                isShowMeetingItem &&
+                item.children?.map((item) => {
+                  return item.title ? (
+                    <div style={{ marginTop: "1rem" }}>
+                      <Link
+                        to={item.path}
+                        className={
+                          pathname.includes(item.path)
+                            ? styles.childrenItemClick
+                            : styles.childrenItemNone
+                        }
+                      >
+                        {item.title}
+                      </Link>
+                    </div>
+                  ) : (
+                    <></>
+                  );
+                })}
             </div>
           </Link>
+          {item.path === "/meeting" && (
+            <div
+              className={styles.childrenSettingIcon}
+              onClick={() => setIsShowMeetingItem((prev) => !prev)}
+            >
+              {isShowMeetingItem ? (
+                <KeyboardArrowUpIcon />
+              ) : (
+                <KeyboardArrowDownIcon />
+              )}
+            </div>
+          )}
         </div>
+      ) : (
+        <></>
       );
     });
   };

web/src/pages/meeting/index.module.scss

@@ -0,0 +1,3 @@
+.container {
+  overflow-y: auto;
+}

web/src/pages/meeting/index.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+import styles from "./index.module.scss";
+import { SnackbarProvider } from "notistack";
+
+export const Meeting = () => {
+  return (
+    <div className={styles.container}>
+      <SnackbarProvider
+        autoHideDuration={2000}
+        anchorOrigin={{ horizontal: "center", vertical: "top" }}
+      >
+        <Outlet />
+      </SnackbarProvider>
+    </div>
+  );
+};

web/src/router/elementRoute.tsx

@@ -6,10 +6,9 @@ import User from "../pages/user";
 import { RouteItem } from "../dtos/route";
 import MeetingList from "../pages/meeting-list";
 import { SendRequest } from "../pages/request";
-
+import GroupsIcon from "@mui/icons-material/Groups";
 import EmailIcon from "@mui/icons-material/Email";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
-import SettingsIcon from "@mui/icons-material/Settings";
 import {
   Navigate,
   Route,
@@ -28,6 +27,7 @@ import IsAuthUser from "../pages/auth";
 import useAuth from "../auth";
 import { useEffect } from "react";
 import MeetingWhiteList from "../pages/meeting-white-list";
+import { Meeting } from "../pages/meeting";
 
 export const routerArray: RouteItem[] = [
   {
@@ -58,7 +58,6 @@ export const routerArray: RouteItem[] = [
       },
     ],
   },
-
   {
     path: "/role",
     head: "角色权限",
@@ -92,21 +91,24 @@ export const routerArray: RouteItem[] = [
       },
     ],
   },
-  {
-    path: "/whiteList",
-    head: "会议总结",
-    icons: <SettingsIcon />,
-    element: <MeetingWhiteList />,
-  },
-  {
-    path: "/none",
-    head: "",
-    element: <None />,
-  },
+
   {
     path: "/meeting",
     head: "",
-    element: <MeetingList />,
+    element: <Meeting />,
+    icons: <GroupsIcon />,
+    children: [
+      {
+        path: "",
+        title: "",
+        elementChild: <MeetingList />,
+      },
+      {
+        path: "/meeting/whiteList",
+        title: "总结白名单",
+        elementChild: <MeetingWhiteList />,
+      },
+    ],
   },
   {
     path: "/user",
@@ -120,6 +122,11 @@ export const routerArray: RouteItem[] = [
     // icons: <SettingsIcon />,
     element: <Manager />,
   },
+  {
+    path: "/none",
+    head: "",
+    element: <None />,
+  },
 ];
 
 export const Router = () => {