diff --git a/apps/dmp/src/components/Layout/Menu/index.tsx b/apps/dmp/src/components/Layout/Menu/index.tsx index 527b042..fa0c7ad 100644 --- a/apps/dmp/src/components/Layout/Menu/index.tsx +++ b/apps/dmp/src/components/Layout/Menu/index.tsx @@ -1,10 +1,28 @@ -import { MenuItem, roleMenusMapping } from "./roleMenu.config"; -import { UserService } from "@@/domain/User/UserService"; import { useEffect, useState } from "react"; -import { observer } from "mobx-react-lite"; import { useNavigate } from "react-router"; -import { Menu, Spin } from "antd"; -import { ROLE_NAME } from "@/constant"; +import { Menu, MenuProps } from "antd"; + +export type MenuItem = Required["items"][number]; + +type RoleMenusType = { + menuItems: MenuItem[]; +}; + +export const getItem = ( + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + children?: MenuItem[], + type?: "group" +): MenuItem => { + return { + key, + icon, + children, + label, + type, + } as MenuItem; +}; export const useMenu = () => { const navigate = useNavigate(); @@ -12,35 +30,21 @@ export const useMenu = () => { useEffect(() => setSelectedKeys([location.pathname]), []); - const RoleMenu: React.FC<{ domainService: UserService }> = observer( - ({ domainService }) => { - const { user } = domainService; - console.log(user); - const roleNames = user.getRolesName(); - if (roleNames) { - let menuItems: MenuItem[] = []; - for (const key in roleMenusMapping) - if (roleNames.includes(key)) - menuItems = roleMenusMapping[key as ROLE_NAME]; - return ( - navigate(e.key)} - style={{ width: "100%", height: "100%" }} - selectedKeys={selectedKeys} - defaultOpenKeys={["dicom"]} - mode="inline" - items={menuItems} - /> - ); - } else { - return ( -
- -
- ); - } - } - ); + const LeftMenu = (props: RoleMenusType) => { + const { menuItems } = props; + return menuItems.length > 0 ? ( + navigate(e.key)} + style={{ width: "100%", height: "100%" }} + selectedKeys={selectedKeys} + defaultOpenKeys={["dicom"]} + mode="inline" + items={menuItems} + /> + ) : ( + + ); + }; - return { RoleMenu }; + return { LeftMenu }; }; diff --git a/apps/dmp/src/components/Layout/Menu/roleMenu.config.tsx b/apps/dmp/src/components/Layout/Menu/roleMenu.config.tsx index c924dda..cad2c15 100644 --- a/apps/dmp/src/components/Layout/Menu/roleMenu.config.tsx +++ b/apps/dmp/src/components/Layout/Menu/roleMenu.config.tsx @@ -33,7 +33,7 @@ const adminMenuItems: MenuItem[] = [ const annotatorMenuItems: MenuItem[] = [ getItem("影像", "dicom", , [ - getItem("标注", "/annotator/list", ), + getItem("标注", "/list", ), ]), ]; diff --git a/apps/dmp/src/components/Layout/index.tsx b/apps/dmp/src/components/Layout/index.tsx index ec2d685..47378ef 100644 --- a/apps/dmp/src/components/Layout/index.tsx +++ b/apps/dmp/src/components/Layout/index.tsx @@ -1,23 +1,20 @@ import { Outlet, useLocation } from "react-router"; -import { useDomain } from "@/hook/useDomain"; -import { useMenu } from "./Menu"; +import { ReactNode } from "react"; import "./index.less"; + interface LayoutProps { children?: JSX.Element; + leftMenus?: ReactNode; } export const Layout = (props: LayoutProps) => { const location = useLocation(); - const { userDomainService } = useDomain(); - const { RoleMenu } = useMenu(); return (
{location.pathname}
- +
diff --git a/apps/dmp/src/modules/Admin/index.tsx b/apps/dmp/src/modules/Admin/index.tsx index 6b44596..46a2df2 100644 --- a/apps/dmp/src/modules/Admin/index.tsx +++ b/apps/dmp/src/modules/Admin/index.tsx @@ -1,14 +1,31 @@ +import { getItem, useMenu } from "@/components/Layout/Menu"; +import { Layout } from "@/components/Layout"; +import { + CloudUploadOutlined, + DatabaseOutlined, + UnorderedListOutlined, +} from "@ant-design/icons"; import { Outlet } from "react-router"; +import { MenuProps } from "antd"; interface AdminDashboardProps { children?: JSX.Element; } +export type MenuItem = Required["items"][number]; + +const adminMenuItems: MenuItem[] = [ + getItem("影像", "dicom", , [ + getItem("上传", "/upload", ), + getItem("列表", "/list", ), + ]), +]; + export const AdminDashboard = (props: AdminDashboardProps) => { + const { LeftMenu } = useMenu(); return ( -
-

AdminDashboard

+ }> -
+ ); }; diff --git a/apps/dmp/src/modules/Annotator/index.tsx b/apps/dmp/src/modules/Annotator/index.tsx index 64431e2..4ae5972 100644 --- a/apps/dmp/src/modules/Annotator/index.tsx +++ b/apps/dmp/src/modules/Annotator/index.tsx @@ -1,14 +1,23 @@ +import { CloudUploadOutlined, DatabaseOutlined } from "@ant-design/icons"; +import { MenuItem, getItem, useMenu } from "@/components/Layout/Menu"; +import { Layout } from "@/components/Layout"; import { Outlet } from "react-router"; interface AnnotatorDashBoardProps { children?: JSX.Element; } +const annotatorMenuItems: MenuItem[] = [ + getItem("影像", "dicom", , [ + getItem("标注", "/list", ), + ]), +]; + export const AnnotatorDashBoard = (props: AnnotatorDashBoardProps) => { + const { LeftMenu } = useMenu(); return ( -
-

AnnotatorDashBoard

+ }> -
+ ); }; diff --git a/apps/dmp/src/router/roleRoutes.tsx b/apps/dmp/src/router/roleRoutes.tsx index 36885b3..bcbcce0 100644 --- a/apps/dmp/src/router/roleRoutes.tsx +++ b/apps/dmp/src/router/roleRoutes.tsx @@ -16,7 +16,6 @@ export const roleRoutes: Record = { path: "/", element: , - title: "管理员", children: [ { path: "/", @@ -26,18 +25,22 @@ export const roleRoutes: Record = path: "/list", element: , }, + { + path: "/upload", + element: , + }, ], }, - { - path: "/list", - element: , - title: "管理员", - }, - { - path: "/upload", - element: , - title: "管理员", - }, + // { + // path: "/list", + // element: , + // title: "管理员", + // }, + // { + // path: "/upload", + // element: , + // title: "管理员", + // }, ], /** * 标注 @@ -45,14 +48,18 @@ export const roleRoutes: Record = [ROLE_NAME.ANNOTATOR]: [ { path: "/", - // element: , element: , title: "标注", - }, - { - path: "/annotator/list", - element: , - title: "标注", + children: [ + { + path: "/", + element: , + }, + { + path: "/list", + element: , + }, + ], }, ], };