状态

.umirc.ts

@@ -8,9 +8,10 @@ export default defineConfig({
   initialState: {},
   request: {},
   layout: {
-    title: '金科环境数字化平台',
+    title: '金科环境数字化管理平台',
     locale: false,
   },
+  title: "金科环境数字化管理平台",
   proxy: {
     '/api': {
       // target: 'http://47.96.12.136:8788/',
@@ -31,7 +32,7 @@ export default defineConfig({
       layout: false,
     },
     {
-      name: '流程图列表',
+      name: '审批流管理',
       path: '/flow',
       hideChildrenInMenu: true,
       routes: [
@@ -40,12 +41,12 @@ export default defineConfig({
           redirect: '/flow/list',
         },
         {
-          name: '流程图列表',
+          name: '审批流管理',
           path: '/flow/list',
           component: './Flow/index',
         },
         {
-          name: '流程图详情',
+          name: '审批流详情',
           path: '/flow/audit',
           component: './Flow/Audit',
           hideInMenu: true,

src/app.tsx

@@ -17,7 +17,7 @@ export const layout: RunTimeLayoutConfig = (initialState) => {
     navTheme: 'light',
     layout: 'side',
     contentWidth: 'Fluid',
-    title: '金科环境数字化平台',
+    title: '金科环境数字化管理平台',
     token: {
       sider: {
         colorMenuBackground: '#292f33',

src/components/UserDropdown/index.tsx

@@ -22,7 +22,7 @@ const items: MenuProps['items'] = [
 export default function UserDropdown(props: any) {
   const { user } = useModel('userInfo');
   return (
-    <Dropdown menu={{ items }}>
+    <Dropdown placement="top" menu={{ items }}>
       <a className={styles.action} onClick={(e) => e.preventDefault()}>
         <Avatar icon={<UserOutlined />} />
         <span className={styles.name}>{user?.CName}</span>

src/layouts/temp.tsx

@@ -0,0 +1,121 @@
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  Outlet,
+  useAppData,
+  useAccessMarkedRoutes,
+} from 'umi';
+import type { IRoute } from 'umi';
+import React, { useMemo } from 'react';
+import { ProLayout } from '@ant-design/pro-components';
+import logo from '@/assets/logo.png';
+import UserDropdown from '@/components/UserDropdown';
+
+// 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
+const filterRoutes = (
+  routes: any[],
+  filterFn: (route: IRoute) => boolean,
+): IRoute[] => {
+  if (routes.length === 0) {
+    return [];
+  }
+
+  let newRoutes = [];
+  for (const route of routes) {
+    const newRoute = { ...route };
+    if (filterFn(route)) {
+      if (Array.isArray(newRoute.routes)) {
+        newRoutes.push(...filterRoutes(newRoute.routes, filterFn));
+      }
+    } else {
+      if (Array.isArray(newRoute.children)) {
+        newRoute.children = filterRoutes(newRoute.children, filterFn);
+        newRoute.routes = newRoute.children;
+      }
+      newRoutes.push(newRoute);
+    }
+  }
+
+  return newRoutes;
+};
+
+// 格式化路由 处理因 wrapper 导致的 菜单 path 不一致
+const mapRoutes = (routes: IRoute[]) => {
+  if (routes.length === 0) {
+    return [];
+  }
+  return routes.map((route) => {
+    // 需要 copy 一份, 否则会污染原始数据
+    const newRoute = { ...route };
+    if (route.originPath) {
+      newRoute.path = route.originPath;
+    }
+
+    if (Array.isArray(route.routes)) {
+      newRoute.routes = mapRoutes(route.routes);
+    }
+
+    if (Array.isArray(route.children)) {
+      newRoute.children = mapRoutes(route.children);
+    }
+
+    return newRoute;
+  });
+};
+
+export default (props: any) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const data = useAppData();
+  const { clientRoutes } = data;
+  console.log(data);
+
+  // 现在的 layout 及 wrapper 实现是通过父路由的形式实现的, 会导致路由数据多了冗余层级, proLayout 消费时, 无法正确展示菜单, 这里对冗余数据进行过滤操作
+  const newRoutes = filterRoutes(clientRoutes, (route) => {
+    return route.isLayout || route.isWrapper;
+  });
+  const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes));
+
+  return (
+    <ProLayout
+      route={route}
+      location={location}
+      title={'金科环境数字化平台'}
+      navTheme="light"
+      siderWidth={256}
+      onMenuHeaderClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        navigate('/');
+      }}
+      menu={{ locale: false }}
+      logo={logo}
+      menuItemRender={(menuItemProps, defaultDom) => {
+        if (menuItemProps.isUrl || menuItemProps.children) {
+          return defaultDom;
+        }
+        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
+          return (
+            // handle wildcard route path, for example /slave/* from qiankun
+            <Link
+              to={menuItemProps.path.replace('/*', '')}
+              target={menuItemProps.target}
+            >
+              {defaultDom}
+            </Link>
+          );
+        }
+        return defaultDom;
+      }}
+      itemRender={(route: any) => (
+        <Link to={route.path}>{route.breadcrumbName}</Link>
+      )}
+      fixSiderbar
+      fixedHeader
+      rightContentRender={() => <UserDropdown />}
+    >
+      <Outlet />
+    </ProLayout>
+  );
+};