feat: 流式布局点击一级菜单定位到子路由

src/utils/menuUtils.ts

@@ -1,97 +0,0 @@
-// src/utils/menuUtils.ts
-import { MenuVO } from "@/services/system/menu";
-import type { MenuDataItem } from "@ant-design/pro-components";
-// src/utils/menuUtils.ts
-
-// src/utils/menuUtils.ts
-// src/utils/route.ts
-export function transformMenuToRoutes(menuData: MenuVO[]): any[] {
-  return menuData.map((item) => ({
-    path: item.path,
-    name: item.name,
-    icon: item.icon,
-    component: item.component,
-    routes: item.children ? transformMenuToRoutes(item.children) : undefined,
-  }));
-}
-
-// src/utils/route.ts
-export function transformBackendMenuToFlatRoutes(menuData: any[]) {
-  const flatRoutes: any[] = [];
-
-  function processMenu(items: any[], parentRouteId = "ant-design-pro-layout") {
-    items.forEach((item) => {
-      const currentRouteId = `route-${item.id}`;
-
-      // 处理路径 - 如果是子路由，需要组合完整路径
-      let fullPath = item.path;
-      if (item.parentId !== 0 && !item.path.startsWith("/")) {
-        // 子路由需要相对路径
-        fullPath = item.path;
-      }
-
-      const route: any = {
-        id: currentRouteId,
-        path: fullPath,
-        name: item.name,
-        parentId: parentRouteId,
-      };
-
-      // 添加图标（如果不是 # 的话）
-      if (item.icon && item.icon !== "#") {
-        route.icon = item.icon;
-      }
-
-      // 添加组件路径
-      if (item.component) {
-        // 转换组件路径为动态导入格式
-        route.component = item.component;
-      }
-
-      // 其他属性
-      if (!item.visible) {
-        route.hideInMenu = true;
-      }
-
-      flatRoutes.push(route);
-
-      // 递归处理子菜单
-      if (item.children && item.children.length > 0) {
-        processMenu(item.children, currentRouteId);
-      }
-    });
-  }
-
-  processMenu(menuData);
-  return flatRoutes;
-}
-
-export function transformMenuData(menuData: any[]) {
-  const transformItem = (item: any, parentPath = "") => {
-    const fullPath = item.path.startsWith("/")
-      ? item.path
-      : `${parentPath}/${item.path}`;
-    const result: any = {
-      path: fullPath,
-      name: item.name,
-      key: `${item.id}`,
-    };
-    if (item.icon && item.icon !== "#") {
-      result.icon = item.icon;
-    }
-
-    if (!item.visible) {
-      result.hideInMenu = true;
-    }
-
-    if (item.children && item.children.length > 0) {
-      result.children = item.children.map((child: any) =>
-        transformItem(child, fullPath)
-      );
-    }
-
-    return;
-    result;
-  };
-  return menuData.map((item) => transformItem(item));
-}

src/utils/menuUtils.tsx

@@ -0,0 +1,69 @@
+import { Navigate } from '@umijs/max';
+import { Spin } from 'antd';
+import React from 'react';
+
+export const loopMenuItem = (menus: any[], pId: number | string): any[] => {
+  // console.log(menus, "menus");
+  return menus.flatMap((item) => {
+    let Component: React.ComponentType<any> | null = null;
+    if (item.component && item.component.length > 0) {
+      // 防止配置了路由，但本地暂未添加对应的页面，产生的错误
+      Component = React.lazy(() => {
+        const importComponent = () => import(`@/pages/${item.component}`);
+        const import404 = () => import('@/pages/404');
+        return importComponent().catch(import404);
+      });
+    }
+    if (item.children && item.children.length > 0) {
+      return [
+        {
+          path: item.path,
+          name: item.name,
+          // icon: item.icon,
+          id: item.id,
+          parentId: pId,
+          children: [
+            {
+              path: item.path,
+              element: (
+                <Navigate
+                  to={getFirstLeafPath(item.children, item.path)}
+                  replace
+                />
+              ),
+            },
+            ...loopMenuItem(item.children, item.menuID),
+          ],
+        },
+      ];
+    } else {
+      return [
+        {
+          path: item.path,
+          name: item.name,
+          // icon: item.icon,
+          id: item.menuID,
+          parentId: pId,
+          element: (
+            <React.Suspense
+              fallback={<Spin style={{ width: '100%', height: '100%' }} />}
+            >
+              {Component && <Component />}
+            </React.Suspense>
+          ),
+          children: [], // 添加缺失的 children 属性
+        },
+      ];
+    }
+  });
+};
+
+function getFirstLeafPath(menus: any[], parentPath: string): string {
+  const firstMenu = menus[0];
+  const currentPath = `${parentPath}/${firstMenu.path}`;
+  if (firstMenu.children && firstMenu.children.length > 0) {
+    return getFirstLeafPath(firstMenu.children, currentPath);
+  } else {
+    return currentPath;
+  }
+}