更新代码

src/layouts/BasicLayout.tsx

@@ -1,5 +1,5 @@
 // src/layouts/BasicLayout.tsx
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ProLayout, { PageContainer } from '@ant-design/pro-layout';
 import { Link, useLocation, useIntl, useHistory } from 'umi';
 import { connect } from 'dva';
@@ -34,6 +34,28 @@ const MenuRender = (item: any, isSubMenu: boolean) => {
   );
 };
 
+// 递归交集过滤函数
+function filterMenuByRouter(routes:any, menuRoutes:any) {
+  return routes.reduce((result:any, route:any) => {
+    // 只看有 name 的节点
+    const menu = menuRoutes.find(m => m.name === route.name);
+    if (menu) {
+      // 匹配到后，递归处理 children
+      let children = [];
+      if (route.children && menu.children) {
+        children = filterMenuByRouter(route.children, menu.children);
+      }
+      // 构建新节点，保留原 router.config.ts 路径等信息（比如 path, icon, ...其它字段）
+      result.push({
+        ...route,
+        // ...menu, // 可按需决定是否 menu 字段覆盖 route 字段（比如 path）
+        // children: children.length > 0 ? children : undefined
+      });
+    }
+    return result;
+  }, []);
+}
+
 const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamicBreadcrumbName: string | null) => {
   const breadcrumbRoutes = routeBreadcrumb?.routes;
   return (
@@ -74,11 +96,28 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const location = useLocation();
   const intl = useIntl();
   const history = useHistory();
+
+  const [menuRoutes, setMenuRoutes] = useState<any[]>([]);
+
+  useEffect(() => {
+    const menuStr = sessionStorage.getItem('menuList');
+    if (menuStr) {
+      const menusFromApi = JSON.parse(menuStr);
+      // routes是本地静态路由，menusFromApi是接口菜单
+      const finalMenus = filterMenuByRouter(routes, menusFromApi);
+      console.log(finalMenus);
+      
+      setMenuRoutes(finalMenus);
+    }
+  }, []);
+
+
   return (
     <ConfigProvider>
       <ProLayout
         {...defaultSettings}
         route={{ routes }}
+        // route={{ routes: menuRoutes }}
         subMenuItemRender={(menuItemProps, defaultDom) => {
           return MenuRender(menuItemProps, true);
         }}