walk

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

@@ -1,9 +1,10 @@
-import { MenuItem, RoleNameType, roleMenusMapping } from "./roleMenu.config";
+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";
 
 export const useMenu = () => {
   const navigate = useNavigate();
@@ -20,7 +21,7 @@ export const useMenu = () => {
         let menuItems: MenuItem[] = [];
         for (const key in roleMenusMapping)
           if (roleNames.includes(key))
-            menuItems = roleMenusMapping[key as RoleNameType];
+            menuItems = roleMenusMapping[key as ROLE_NAME];
         return (
           <Menu
             onClick={(e) => navigate(e.key)}

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

@@ -1,4 +1,4 @@
-import { ROLE_NAME } from "@/config";
+import { ROLE_NAME } from "@/constant";
 import {
   CloudUploadOutlined,
   DatabaseOutlined,

apps/dmp/src/modules/Admin/index.tsx

@@ -1,7 +1,14 @@
+import { Outlet } from "react-router";
+
 interface AdminDashboardProps {
   children?: JSX.Element;
 }
 
 export const AdminDashboard = (props: AdminDashboardProps) => {
-  return <div>AdminDashboard</div>;
+  return (
+    <div>
+      <p>AdminDashboard</p>
+      <Outlet />
+    </div>
+  );
 };

apps/dmp/src/modules/Annotator/index.tsx

@@ -1,7 +1,14 @@
+import { Outlet } from "react-router";
+
 interface AnnotatorDashBoardProps {
   children?: JSX.Element;
 }
 
 export const AnnotatorDashBoard = (props: AnnotatorDashBoardProps) => {
-  return <div>AnnotatorDashBoard</div>
+  return (
-}
+    <div>
+      <p>AnnotatorDashBoard</p>
+      <Outlet />
+    </div>
+  );
+};

apps/dmp/src/router/index.tsx

@@ -1,5 +1,12 @@
 import { useDomain } from "@/hook/useDomain";
-import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import {
+  BrowserRouter,
+  Route,
+  RouteObject,
+  Routes,
+  useLocation,
+  useRoutes,
+} from "react-router-dom";
 import { baseRoutes } from "./baseRoutes";
 import { roleRoutes } from "./roleRoutes";
 import { RouteGuard } from "./Guard";
@@ -33,15 +40,21 @@ export const RouterElements = observer(() => {
   );
   if (currentRoute) document.title = currentRoute.title || defaultDocumentTitle;
 
+  /**
+   * 递归children
+   */
+  const generateRoutes = (routes: (RouteObject & ExpandRouteProps)[]) =>
+    routes.map((r) => (
+      <Route key={r.path} path={r.path} element={r.element}>
+        {r.children && generateRoutes(r.children)}
+      </Route>
+    ));
+
   return (
     <RouteGuard ignorePaths={baseRoutes.map((r) => r.path!)}>
       <Routes>
-        {currentRoutes.map((r) => (
+        {generateRoutes(currentRoutes)}
-          <Route key={r.path} path={r.path} element={r.element} />
+        {generateRoutes(baseRoutes)}
-        ))}
-        {baseRoutes.map((r) => (
-          <Route key={r.path} path={r.path} element={r.element} />
-        ))}
       </Routes>
     </RouteGuard>
   );

apps/dmp/src/router/roleRoutes.tsx

@@ -4,6 +4,8 @@ import { DicomUpload } from "@/modules/Admin/Dicom/Upload";
 import { Navigate, RouteObject } from "react-router-dom";
 import { ExpandRouteProps } from ".";
 import { ROLE_NAME } from "@/constant";
+import { AdminDashboard } from "@/modules/Admin";
+import { AnnotatorDashBoard } from "@/modules/Annotator";
 
 export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
   {
@@ -11,7 +13,21 @@ export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
      * 管理员
      */
     [ROLE_NAME.ADMIN]: [
-      { path: "/", element: <Navigate to="list" replace />, title: "管理员" },
+      {
+        path: "/",
+        element: <AdminDashboard />,
+        title: "管理员",
+        children: [
+          {
+            path: "/",
+            element: <Navigate to="/list" replace />,
+          },
+          {
+            path: "/list",
+            element: <DicomList />,
+          },
+        ],
+      },
       {
         path: "/list",
         element: <DicomList />,
@@ -29,7 +45,8 @@ export const roleRoutes: Record<ROLE_NAME, (RouteObject & ExpandRouteProps)[]> =
     [ROLE_NAME.ANNOTATOR]: [
       {
         path: "/",
-        element: <Navigate to="/annotator/list" replace />,
+        // element: <Navigate to="/annotator/list" replace />,
+        element: <AnnotatorDashBoard />,
         title: "标注",
       },
       {