feat: login

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 { Menu, MenuProps } from "antd";
-import { ROLE_NAME } from "@/constant";
+
+export type MenuItem = Required<MenuProps>["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,17 +30,9 @@ export const useMenu = () => {
 
   useEffect(() => setSelectedKeys([location.pathname]), []);
 
-  const RoleMenu: React.FC<{ domainService: UserService }> = observer(
+  const LeftMenu = (props: RoleMenusType) => {
-    ({ domainService }) => {
+    const { menuItems } = props;
-      const { user } = domainService;
+    return menuItems.length > 0 ? (
-      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 (
       <Menu
         onClick={(e) => navigate(e.key)}
         style={{ width: "100%", height: "100%" }}
@@ -31,16 +41,10 @@ export const useMenu = () => {
         mode="inline"
         items={menuItems}
       />
+    ) : (
+      <span></span>
     );
-      } else {
+  };
-        return (
+
-          <div style={{ textAlign: "center" }}>
+  return { LeftMenu };
-            <Spin />
-          </div>
-        );
-      }
-    }
-  );
-
-  return { RoleMenu };
 };

apps/dmp/src/components/Layout/Menu/roleMenu.config.tsx

@@ -33,7 +33,7 @@ const adminMenuItems: MenuItem[] = [
 
 const annotatorMenuItems: MenuItem[] = [
   getItem("影像", "dicom", <DatabaseOutlined />, [
-    getItem("标注", "/annotator/list", <CloudUploadOutlined />),
+    getItem("标注", "/list", <CloudUploadOutlined />),
   ]),
 ];
 

apps/dmp/src/components/Layout/index.tsx

@@ -1,23 +1,20 @@
 import { Outlet, useLocation } from "react-router";
-import { useDomain } from "@/hook/useDomain";
+import { ReactNode } from "react";
-import { useMenu } from "./Menu";
 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 (
     <div className="layout-container">
       <header> {location.pathname}</header>
       <div>
-        <aside>
+        <aside>{props.leftMenus}</aside>
-          <RoleMenu domainService={userDomainService} />
-        </aside>
         <main>
           <Outlet />
         </main>

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<MenuProps>["items"][number];
+
+const adminMenuItems: MenuItem[] = [
+  getItem("影像", "dicom", <DatabaseOutlined />, [
+    getItem("上传", "/upload", <CloudUploadOutlined />),
+    getItem("列表", "/list", <UnorderedListOutlined />),
+  ]),
+];
+
 export const AdminDashboard = (props: AdminDashboardProps) => {
+  const { LeftMenu } = useMenu();
   return (
-    <div>
+    <Layout leftMenus={<LeftMenu menuItems={adminMenuItems} />}>
-      <p>AdminDashboard</p>
       <Outlet />
-    </div>
+    </Layout>
   );
 };

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", <DatabaseOutlined />, [
+    getItem("标注", "/list", <CloudUploadOutlined />),
+  ]),
+];
+
 export const AnnotatorDashBoard = (props: AnnotatorDashBoardProps) => {
+  const { LeftMenu } = useMenu();
   return (
-    <div>
+    <Layout leftMenus={<LeftMenu menuItems={annotatorMenuItems} />}>
-      <p>AnnotatorDashBoard</p>
       <Outlet />
-    </div>
+    </Layout>
   );
 };

apps/dmp/src/router/roleRoutes.tsx

@@ -16,7 +16,6 @@ export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
       {
         path: "/",
         element: <AdminDashboard />,
-        title: "管理员",
         children: [
           {
             path: "/",
@@ -26,33 +25,41 @@ export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
             path: "/list",
             element: <DicomList />,
           },
-        ],
-      },
-      {
-        path: "/list",
-        element: <DicomList />,
-        title: "管理员",
-      },
           {
             path: "/upload",
             element: <DicomUpload />,
-        title: "管理员",
           },
         ],
+      },
+      // {
+      //   path: "/list",
+      //   element: <DicomList />,
+      //   title: "管理员",
+      // },
+      // {
+      //   path: "/upload",
+      //   element: <DicomUpload />,
+      //   title: "管理员",
+      // },
+    ],
     /**
      * 标注
      */
     [ROLE_NAME.ANNOTATOR]: [
       {
         path: "/",
-        // element: <Navigate to="/annotator/list" replace />,
         element: <AnnotatorDashBoard />,
         title: "标注",
+        children: [
+          {
+            path: "/",
+            element: <Navigate to="/list" replace />,
           },
           {
-        path: "/annotator/list",
+            path: "/list",
             element: <AnnotatorList />,
-        title: "标注",
+          },
+        ],
       },
     ],
   };