diff --git a/web/src/hooks/authProvider/index.tsx b/web/src/hooks/authProvider/index.tsx index 712474ff..7c525d25 100644 --- a/web/src/hooks/authProvider/index.tsx +++ b/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(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) { diff --git a/web/src/pages/main/index.module.scss b/web/src/pages/main/index.module.scss index 09da4d7a..2e9fb517 100644 --- a/web/src/pages/main/index.module.scss +++ b/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; +} diff --git a/web/src/pages/main/index.tsx b/web/src/pages/main/index.tsx index 7556784f..cd9ff40e 100644 --- a/web/src/pages/main/index.tsx +++ b/web/src/pages/main/index.tsx @@ -1,17 +1,24 @@ 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(true); + const { clickMainIndex, setMainClickIndex } = useMainAction(); const routerTabBar = () => { return filterRouter?.map((item, index) => { - return ( + return item.head ? (
{ setMainClickIndex(index); }} className={ - clickMainIndex === index ? styles.itemClick : styles.itemNone + pathname.includes(item.path) ? styles.itemClick : styles.itemNone } > -
- {item.icons} - {item.head} +
+
+ {item.icons} + {item.head} +
+ {item.path === "/meeting" && + isShowMeetingItem && + item.children?.map((item) => { + return item.title ? ( +
+ + {item.title} + +
+ ) : ( + <> + ); + })}
+ {item.path === "/meeting" && ( +
setIsShowMeetingItem((prev) => !prev)} + > + {isShowMeetingItem ? ( + + ) : ( + + )} +
+ )}
+ ) : ( + <> ); }); }; diff --git a/web/src/pages/meeting/index.module.scss b/web/src/pages/meeting/index.module.scss new file mode 100644 index 00000000..0b7528c1 --- /dev/null +++ b/web/src/pages/meeting/index.module.scss @@ -0,0 +1,3 @@ +.container { + overflow-y: auto; +} diff --git a/web/src/pages/meeting/index.tsx b/web/src/pages/meeting/index.tsx new file mode 100644 index 00000000..f8187ec3 --- /dev/null +++ b/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 ( +
+ + + +
+ ); +}; diff --git a/web/src/router/elementRoute.tsx b/web/src/router/elementRoute.tsx index cd6b3184..789fe883 100644 --- a/web/src/router/elementRoute.tsx +++ b/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: , - element: , - }, - { - path: "/none", - head: "", - element: , - }, + { path: "/meeting", head: "", - element: , + element: , + icons: , + children: [ + { + path: "", + title: "", + elementChild: , + }, + { + path: "/meeting/whiteList", + title: "总结白名单", + elementChild: , + }, + ], }, { path: "/user", @@ -120,6 +122,11 @@ export const routerArray: RouteItem[] = [ // icons: , element: , }, + { + path: "/none", + head: "", + element: , + }, ]; export const Router = () => {