修改外框layout布局

2025-07-01 14:18:23 +08:00
parent 4e4b9a730d
commit 4e972b1841
10 changed files with 419 additions and 248 deletions
--- a/config/router.config.ts
+++ b/config/router.config.ts
@ -18,7 +18,9 @@ export default [
  },
  {
    path: '/',
-    component: '@/layouts/Index',
+    name: "首页",
+    component: '@/layouts/BasicLayout',
+    flatMenu: true,
    routes: [
      {
        path: '/',
@ -28,361 +30,250 @@ export default [
        redirect: '/index',
      },
      {
-        name: 'index',
        path: '/index',
-        meta: {
-          title: '首页',
-          icon: 'icon-shouye',
-        },
+        name: "首页",
+        icon: 'icon-shouye',
        component: '@/pages/index',
      },
      // 供应商评价分组
      {
-        name: 'supplierEvaluate',
+        name: '供应商评价',
        path: '/supplierEvaluate',
-        meta: {
-          title: '供应商评价',
-          icon: 'icon-youqinglianjie',
-        },
-        component: '@/layouts/MainLayout',
+        icon: 'icon-youqinglianjie',
        routes: [
          {
-            name: 'supplierTemplateManage',
+            name: '模板管理',
            path: '/supplierEvaluate/supplierTemplateManage',
-            meta: {
-              title: '模板管理',
-              icon: 'icon-fenlei',
-            },
+            icon: 'icon-fenlei',
            component: '@/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManage',
          },
          {
-            name: 'supplierTemplateManageAdd',
-            path: 'supplierTemplateManageAdd',
-            meta: {
-              title: '模板管理新增',
-              hide: true,
-              icon: 'icon-fenlei',
-            },
+            name: '模板管理新增',
+            path: '/supplierEvaluate/supplierTemplateManageAdd',
+            hideInMenu: true,
+            icon: 'icon-fenlei',
            component: '@/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd',
+            parentKeys: ['/supplierEvaluate/supplierTemplateManage'],
          },
          {
-            name: 'supplierTemplateManageDetail',
-            path: 'supplierTemplateManageDetail',
-            meta: {
-              title: '模板管理详情',
-              hide: true,
-              icon: 'icon-fenlei',
-            },
+            name: '模板管理详情',
+            path: '/supplierEvaluate/supplierTemplateManageDetail',
+            hideInMenu: true,
            component: '@/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageDetail',
+            parentKeys: ['/supplierEvaluate/supplierTemplateManage'],
          },
          {
-            name: 'supplierEvaluateRuleManage',
-            path: 'supplierEvaluateRuleManage',
-            meta: {
-              title: '评价规则管理',
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价规则管理',
+            path: '/supplierEvaluate/supplierEvaluateRuleManage',
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierEvaluateManage/supplierEvaluateRuleManage/supplierEvaluateRuleManage',
          },
          {
-            name: 'supplierTaskManage',
-            path: 'supplierTaskManage',
-            meta: {
-              title: '任务管理',
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '任务管理',
+            path: '/supplierEvaluate/supplierTaskManage',
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierEvaluateManage/supplierTaskManage/supplierTaskManage',
          },
          {
-            name: 'supplierTaskManageAdd',
-            path: 'supplierTaskManageAdd',
-            meta: {
-              title: '任务管理新增',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '任务管理新增',
+            path: '/supplierEvaluate/supplierTaskManageAdd',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierEvaluateManage/supplierTaskManage/supplierTaskManageAdd',
+            parentKeys: ['/supplierEvaluate/supplierTaskManage'],
          },
          {
-            name: 'supplierTaskManageDetail',
-            path: 'supplierTaskManageDetail',
-            meta: {
-              title: '任务管理详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '任务管理详情',
+            path: '/supplierEvaluate/supplierTaskManageDetail',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierEvaluate/supplierTaskManage'],
            component: '@/pages/supplierEvaluateManage/supplierTaskManage/supplierTaskManageDetail',
          },
          {
-            name: 'supplierEvaluateScore',
-            path: 'supplierEvaluateScore',
-            meta: {
-              title: '评价打分',
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价打分',
+            path: '/supplierEvaluate/supplierEvaluateScore',
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierEvaluateManage/supplierEvaluateScore/supplierEvaluateScore',
          },
          {
-            name: 'supplierEvaluateScoreDetail',
-            path: 'supplierEvaluateScoreDetail',
-            meta: {
-              title: '评价打分详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价打分详情',
+            path: '/supplierEvaluate/supplierEvaluateScoreDetail',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierEvaluate/supplierEvaluateScore'],
            component: '@/pages/supplierEvaluateManage/supplierEvaluateScore/supplierEvaluateScoreDetail',
          },
          {
-            name: 'supplierEvaluateResult',
-            path: 'supplierEvaluateResult',
-            meta: {
-              title: '评价结果',
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价结果',
+            path: '/supplierEvaluate/supplierEvaluateResult',
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResult',
          },
          {
-            name: 'supplierEvaluateResultInfo',
-            path: 'supplierEvaluateResultInfo',
-            meta: {
-              title: '评价结果详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价结果详情',
+            hide: true,
+            path: '/supplierEvaluate/supplierEvaluateResultInfo',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierEvaluate/supplierEvaluateResult'],
            component: '@/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResultInfo',
          },
          {
-            name: 'supplierEvaluateResultScoreDetail',
-            path: 'supplierEvaluateResultScoreDetail',
-            meta: {
-              title: '评价结果得分明细',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价结果得分明细',
+            path: '/supplierEvaluate/supplierEvaluateResultScoreDetail',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierEvaluate/supplierEvaluateResult'],
            component: '@/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResultScoreDetail',
          },
          {
-            name: 'supplierEvaluateResultScoreByList',
-            path: 'supplierEvaluateResultScoreByList',
-            meta: {
-              title: '评价结果打分情况',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价结果打分情况',
+            path: '/supplierEvaluate/supplierEvaluateResultScoreByList',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierEvaluate/supplierEvaluateResult'],
            component: '@/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResultScoreByList',
          },
          {
-            name: 'supplierEvaluateResultByZb',
-            path: 'supplierEvaluateResultByZb',
-            meta: {
-              title: '评价结果详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            name: '评价结果详情',
+            path: '/supplierEvaluate/supplierEvaluateResultByZb',
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierEvaluate/supplierEvaluateResult'],
            component: '@/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResultByZb',
          },
-          // {
-          //   name: 'supplierEvaluateResultApproval',
-          //   path: 'supplierEvaluateResultApproval',
-          //   meta: {
-          //     title: '评价结果审批',
-          //     icon: 'icon-liebiaomoshi',
-          //   },
-          //   component: '@/pages/supplierEvaluateManage/supplierEvaluateResultApproval/supplierEvaluateResultApproval',
-          // },
-          // {
-          //   name: 'supplierEvaluateResultApprovalInfo',
-          //   path: '/supplierEvaluateResultApproval/supplierEvaluateResultApprovalInfo',
-          //   meta: {
-          //     title: '评价审批详情',
-          //     hide: true,
-          //     icon: 'icon-liebiaomoshi',
-          //   },
-          //   component: '@/pages/supplierEvaluateManage/supplierEvaluateResultApproval/supplierEvaluateResultApprovalInfo',
-          // }
        ]
      },
      //数据统计
      {
-        name: 'dataStatistics',
+        name: '数据统计',
        path: '/dataStatistics',
-        meta: {
-          title: '数据统计',
-          icon: 'icon-fenlei',
-        },
+        icon: 'icon-fenlei',
        component: '@/layouts/MainLayout',
        routes: [
          {
-            name: 'supplierEvaluateStatistics',
+            name: '供应商评价情况统计',
            path: '/dataStatistics/supplierEvaluateStatistics',
-            meta: {
-              title: '供应商评价情况统计',
-              icon: 'icon-fenlei',
-            },
+            icon: 'icon-fenlei',
            component: '@/pages/dataStatistics/supplierEvaluateStatistics/supplierEvaluateStatistics',
          }, {
-            name: 'supplierAnnualStatistics',
+            name: '供应商年审情况统计',
            path: '/dataStatistics/supplierAnnualStatistics',
-            meta: {
-              title: '供应商年审情况统计',
-              icon: 'icon-fenlei',
-            },
+            icon: 'icon-fenlei',
            component: '@/pages/dataStatistics/supplierAnnualStatistics/supplierAnnualStatistics',
          }, {
-            name: 'supplierQualificationWarningStatistics',
+            name: '供应商资质预警统计',
            path: '/dataStatistics/supplierQualificationWarningStatistics',
-            meta: {
-              title: '供应商资质预警统计',
-              icon: 'icon-fenlei',
-            },
+            icon: 'icon-fenlei',
            component: '@/pages/dataStatistics/supplierQualificationWarningStatistics/supplierQualificationWarningStatistics',
          }, {
-            name: 'supplierExitStatistics',
+            name: '供应商清退情况统计',
            path: '/dataStatistics/supplierExitStatistics',
-            meta: {
-              title: '供应商清退情况统计',
-              icon: 'icon-fenlei',
-            },
+            icon: 'icon-fenlei',
            component: '@/pages/dataStatistics/supplierExitStatistics/supplierExitStatistics',
          }
        ]
      },
      // 供应商年审分组
      {
-        name: 'supplierAnnual',
+        name: '供应商年审',
        path: '/supplierAnnual',
-        meta: {
-          title: '供应商年审',
-          icon: 'icon-fenlei',
-        },
+        icon: 'icon-fenlei',
        component: '@/layouts/MainLayout',
        routes: [
          {
-            name: 'supplierAnnualTemplateManage',
+            name: '年审模板管理',
            path: 'supplierAnnualTemplateManage',
-            meta: {
-              title: '年审模板管理',
-              icon: 'icon-fenlei',
-            },
+            icon: 'icon-fenlei',
            component: '@/pages/supplierAnnualManage/supplierAnnualTemplateManage/supplierAnnualTemplateManage',
          },
          {
-            name: 'supplierAnnualTemplateManageAdd',
+            name: '年审模板管理新增',
            path: 'supplierAnnualTemplateManageAdd',
-            meta: {
-              title: '年审模板管理新增',
-              hide: true,
-              icon: 'icon-fenlei',
-            },
+            hideInMenu: true,
+            icon: 'icon-fenlei',
            component: '@/pages/supplierAnnualManage/supplierAnnualTemplateManage/supplierAnnualTemplateManageAdd',
          },
          {
-            name: 'supplierAnnualTemplateManageDetail',
+            name: '年审模板管理详情',
            path: 'supplierAnnualTemplateManageDetail',
-            meta: {
-              title: '年审模板管理详情',
-              hide: true,
-              icon: 'icon-fenlei',
-            },
+            hideInMenu: true,
+            icon: 'icon-fenlei',
            component: '@/pages/supplierAnnualManage/supplierAnnualTemplateManage/supplierAnnualTemplateManageDetail',
          },
          {
-            name: 'supplierAnnualTaskManage',
+            name: '年审任务管理',
            path: 'supplierAnnualTaskManage',
-            meta: {
-              title: '年审任务管理',
-              icon: 'icon-liebiaomoshi',
-            },
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierAnnualManage/supplierAnnualTaskManage/supplierAnnualTaskManage',
          },
          {
-            name: 'supplierAnnualTaskManageAdd',
+            name: '年审任务管理新增',
            path: 'supplierAnnualTaskManageAdd',
-            meta: {
-              title: '年审任务管理新增',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierAnnualManage/supplierAnnualTaskManage/supplierAnnualTaskManageAdd',
          },
          {
-            name: 'supplierAnnualTaskManageDetail',
+            name: '年审任务管理详情',
            path: 'supplierAnnualTaskManageDetail',
-            meta: {
-              title: '年审任务管理详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierAnnualManage/supplierAnnualTaskManage/supplierAnnualTaskManageDetail',
          },
          {
-            name: 'supplierAnnualReview',
+            name: '年度审查',
            path: 'supplierAnnualReview',
-            meta: {
-              title: '年度审查',
-              icon: 'icon-liebiaomoshi',
-            },
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierAnnualManage/supplierAnnualReview/supplierAnnualQuery',
          },
          {
-            name: 'supplierAnnualScore',
+            name: '年审打分',
            path: 'supplierAnnualScore',
-            meta: {
-              title: '年审打分',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierAnnualManage/supplierAnnualReview/supplierAnnualScore',
+            parentKeys: ['/supplierAnnual/supplierAnnualReview'],
          },
          {
-            name: 'supplierAnnualScoreDetail',
+            name: '年审打分详情',
            path: 'supplierAnnualScoreDetail',
-            meta: {
-              title: '年审打分详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierAnnual/supplierAnnualScore'],
            component: '@/pages/supplierAnnualManage/supplierAnnualReview/supplierAnnualScoreDetail',
          },

          {
-            name: 'supplierAnnualResult',
+            name: '年审结果',
            path: 'supplierAnnualResult',
-            meta: {
-              title: '年审结果',
-              icon: 'icon-liebiaomoshi',
-            },
+            icon: 'icon-liebiaomoshi',
            component: '@/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResult',
          },
          {
-            name: 'supplierAnnualResultQuery',
+            name: '年审结果一级查询列表',
            path: 'supplierAnnualResultQuery',
-            meta: {
-              title: '年审结果一级查询列表',
-              icon: 'icon-liebiaomoshi',
-              hide: true,
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierAnnual/supplierAnnualResult'],
            component: '@/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResultQuery',
          },
          {
-            name: 'supplierAnnualResultQuery2',
+            name: '年审结果二级查询列表',
            path: 'supplierAnnualResultQuery2',
-            meta: {
-              title: '年审结果二级查询列表',
-              icon: 'icon-liebiaomoshi',
-              hide: true,
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierAnnual/supplierAnnualResult'],
            component: '@/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResultQuery2',
          },

          {
-            name: 'supplierAnnualResultDetail',
+            name: '年审结果详情',
            path: 'supplierAnnualResultDetail',
-            meta: {
-              title: '年审结果详情',
-              hide: true,
-              icon: 'icon-liebiaomoshi',
-            },
+            hideInMenu: true,
+            icon: 'icon-liebiaomoshi',
+            parentKeys: ['/supplierAnnual/supplierAnnualResult'],
            component: '@/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResultDetail',
          }
        ]
--- a/src/layouts/BasicLayout.tsx
+++ b/src/layouts/BasicLayout.tsx
@ -0,0 +1,94 @@
+// src/layouts/BasicLayout.tsx
+import React from 'react';
+import ProLayout, { PageContainer } from '@ant-design/pro-layout';
+import { Link, useLocation, useIntl, useHistory } from 'umi';
+import defaultSettings from '../../config/defaultSettings';
+import routes from '../../config/router.config'; // 引入你的自定义路由结构
+import { ConfigProvider, Breadcrumb } from 'antd';
+import HeaderComponent from './Header';
+import IconFont from '@/components/IconFont/IconFont';
+
+
+const MenuRender = (item: any, isSubMenu: boolean) => {
+  const intl = useIntl();
+  return (
+    <>
+      {isSubMenu ? (
+        <span className="ant-pro-menu-item">
+          <IconFont type={item.icon as string} />
+          <span className="ant-pro-menu-item-title">
+            {intl.formatMessage({ id: `menu.${item.name}` || '' })}
+          </span>
+        </span>
+      ) : (
+        <Link className="ant-pro-menu-item" key={item.path} to={item.path || '/'} innerRef={null}>
+          <IconFont type={item.icon as string} />
+          <span className="ant-pro-menu-item-title">
+            {intl.formatMessage({ id: `menu.${item.name}` || '' })}
+          </span>
+        </Link>
+      )}
+    </>
+  );
+};
+
+const BreadcrumbRender = (breadcrumb: any, intl: any, history: any) => {
+  const breadcrumbRoutes = breadcrumb?.routes;
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Item
+        onClick={() => {
+          history.push('/');
+        }}
+        style={{ cursor: 'pointer' }}
+      >
+        {intl.formatMessage({ id: 'menu.首页' })}
+      </Breadcrumb.Item>
+      {breadcrumbRoutes?.map((item: any) => {
+        return (
+          <Breadcrumb.Item key={item.path}>
+            {intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' })}
+          </Breadcrumb.Item>
+        );
+      })}
+    </Breadcrumb>
+  );
+};
+
+const BasicLayout: React.FC = (props) => {
+  const location = useLocation();
+  const intl = useIntl();
+  const history = useHistory();
+  return (
+    <ConfigProvider>
+      <ProLayout
+        {...defaultSettings}
+        route={{ routes }}
+        subMenuItemRender={(menuItemProps, defaultDom) => {
+          return MenuRender(menuItemProps, true);
+        }}
+        menuItemRender={(item, dom) => {
+          return MenuRender(item, false);
+        }}
+        location={location}
+        fixSiderbar
+        layout="mix"
+        headerRender={() => {
+          return <HeaderComponent />;
+        }}
+      >
+        <PageContainer
+          ghost={true}
+          header={{
+            title: false,
+            breadcrumbRender: ({ breadcrumb }) => BreadcrumbRender(breadcrumb, intl, history),
+          }}
+        >
+          {props.children}
+        </PageContainer>
+      </ProLayout>
+    </ConfigProvider>
+  );
+};
+
+export default BasicLayout;
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@ -4,6 +4,7 @@ import LogoImg from '@/assets/img/logo.png';
 //导入菜单组件
 import Language from './Language';
 import User from './User';
+import './layout.less';
 const HeaderComponent: React.FC = (props) => {
  return (
    <div className="headerComponent">
--- a/src/layouts/Index.tsx
+++ b/src/layouts/Index.tsx
@ -1,14 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 // import Header from './Header';
 import { Layout, Breadcrumb } from 'antd';
-const { Header, Footer, Sider, Content } = Layout;
+  import { useLocation, useIntl, Link, connect } from 'umi';
+
+import type { ConnectProps, Dispatch } from 'umi';
+const { Header, Sider, Content } = Layout;
 //导入logo图片
 import HeaderComponent from './Header';
 import SiderMenu from './SiderMenu';
 import './layout.less';
+import type { BreadcrumbModelState } from '@/models/breadcrumb';
+
+interface LayoutIndexProps extends ConnectProps {
+  breadcrumb: BreadcrumbModelState;
+  dispatch: Dispatch;
+}
+
+const LayoutIndex: React.FC<LayoutIndexProps> = (props) => {
+  const { children, breadcrumb, dispatch } = props;
+  const location = useLocation();
+  const intl = useIntl();
+  // 当路由变化时更新面包屑
+  useEffect(() => {
+    console.log(location)
+    dispatch({
+      type: 'breadcrumb/updateBreadcrumbs',
+      payload: { pathname: location.pathname, intl },
+    });
+  }, [location.pathname, intl, dispatch]);

-const LayoutIndex: React.FC = (props) => {
-  const { children } = props;
  return (
    <>
      <Layout>
@ -21,9 +41,15 @@ const LayoutIndex: React.FC = (props) => {
          </Sider>
          <Layout className="layout-content">
            <Breadcrumb style={{ margin: '10px 0' }}>
-              <Breadcrumb.Item>Home</Breadcrumb.Item>
-              <Breadcrumb.Item>List</Breadcrumb.Item>
-              <Breadcrumb.Item>App</Breadcrumb.Item>
+              {breadcrumb.breadcrumbs.map((breadcrumbItem, index) => (
+                <Breadcrumb.Item key={breadcrumbItem.path}>
+                  {index < breadcrumb.breadcrumbs.length - 1 ? (
+                    <Link to={breadcrumbItem.path}>{breadcrumbItem.breadcrumbName}</Link>
+                  ) : (
+                    breadcrumbItem.breadcrumbName
+                  )}
+                </Breadcrumb.Item>
+              ))}
            </Breadcrumb>
            <Content>{children}</Content>
          </Layout>
@ -33,4 +59,6 @@ const LayoutIndex: React.FC = (props) => {
  );
 };

-export default LayoutIndex;
+export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbModelState }) => ({
+  breadcrumb,
+}))(LayoutIndex);
--- a/src/layouts/SiderMenu.tsx
+++ b/src/layouts/SiderMenu.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Menu } from 'antd';
+import { Menu, Tooltip } from 'antd';
 import { useIntl, Link, useHistory } from 'umi';
 import IconFont from '@/components/IconFont/IconFont';
 import routerConfig from '../../config/router.config';
@ -46,7 +46,7 @@ const generateMenuItems = (): IMenuItem[] => {
        // 创建菜单项
        const menuItem: IMenuItem = {
          label: route.meta?.title ? `menu.${route.meta.title}` : `menu.${route.name || ''}`,
-          key: route.name || '',
+          key: route.path || '',
          path: routePath,
          icon: route.meta?.icon || 'icon-liebiaomoshi',
        };
@ -84,10 +84,11 @@ const SiderMenu: React.FC = (props: any) => {
  useEffect(() => {
    // 获取当前激活菜单
    const path = history.location.pathname;
-    if (path.split('/').length > 1) {
-      setCurrent(path.split('/')[path.split('/').length - 1]);
-      return;
-    }
+    setCurrent(path);
+    // if (path.split('/').length > 1) {
+    //   setCurrent(path.split('/')[path.split('/').length - 1]);
+    //   return;
+    // }
  }, [history.location.pathname]);

  // 递归渲染菜单项
@ -95,15 +96,21 @@ const SiderMenu: React.FC = (props: any) => {
    return menuItems.map((item: IMenuItem) =>
      item.children && item.children.length > 0 ? (
        <Menu.SubMenu
-          key={item.key}
-          title={intl.formatMessage({ id: item.label })}
+          key={item.path}
+          title={
+            <Tooltip title={intl.formatMessage({ id: item.label })} placement="right">
+              <>{intl.formatMessage({ id: item.label })}</>
+            </Tooltip>
+          }
          icon={<IconFont type={item.icon} />}
        >
          {renderMenuItems(item.children)}
        </Menu.SubMenu>
      ) : (
-        <Menu.Item key={item.key} icon={<IconFont type={item.icon} />}>
-          <Link to={item.path}>{intl.formatMessage({ id: item.label })}</Link>
+        <Menu.Item key={item.path} icon={<IconFont type={item.icon} />}>
+          <Tooltip title={intl.formatMessage({ id: item.label })} placement="right">
+            <Link to={item.path}>{intl.formatMessage({ id: item.label })}</Link>
+          </Tooltip>
        </Menu.Item>
      ),
    );
--- a/src/locales/en-US/menu.ts
+++ b/src/locales/en-US/menu.ts
@ -18,6 +18,13 @@ export default {
  'menu.评价审批详情': 'Evaluation Approval Detail',
  'menu.年度审查': 'Annual Review',

+  // 数据统计模块
+  'menu.数据统计': 'Data Statistics',
+  'menu.供应商评价情况统计': 'Supplier Evaluation Statistics',
+  'menu.供应商年审情况统计': 'Supplier Annual Review Statistics',
+  'menu.供应商资质预警统计': 'Supplier Qualification Warning Statistics',
+  'menu.供应商清退情况统计': 'Supplier Exit Statistics',
+
  // 供应商年审模块
  'menu.供应商年审': 'Supplier Annual Review',
  'menu.年审模板管理': 'Annual Review Template Management',
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
@ -17,6 +17,13 @@ export default {
  'menu.评价结果审批': '评价结果审批',
  'menu.评价审批详情': '评价审批详情',

+  // 数据统计模块
+  'menu.数据统计': '数据统计',
+  'menu.供应商评价情况统计': '供应商评价情况统计',
+  'menu.供应商年审情况统计': '供应商年审情况统计',
+  'menu.供应商资质预警统计': '供应商资质预警统计',
+  'menu.供应商清退情况统计': '供应商清退情况统计',
+
  // 供应商年审模块
  'menu.供应商年审': '供应商年审',
  'menu.年审模板管理': '年审模板管理',
--- a/src/models/breadcrumb.ts
+++ b/src/models/breadcrumb.ts
@ -0,0 +1,136 @@
+import { Effect, Reducer } from 'umi';
+
+export interface BreadcrumbItem {
+  path: string;
+  breadcrumbName: string;
+}
+
+export interface BreadcrumbModelState {
+  breadcrumbs: BreadcrumbItem[];
+}
+
+export interface BreadcrumbModelType {
+  namespace: 'breadcrumb';
+  state: BreadcrumbModelState;
+  effects: {
+    updateBreadcrumbs: Effect;
+  };
+  reducers: {
+    saveBreadcrumbs: Reducer<BreadcrumbModelState>;
+  };
+}
+
+/**
+ * 生成面包屑数据
+ * @param pathname 当前路径
+ * @param intl 国际化对象
+ */
+const generateBreadcrumbs = (pathname: string, intl: any): BreadcrumbItem[] => {
+  // 如果是首页，直接返回首页
+  if (pathname === '/' || pathname === '/index') {
+    return [
+      {
+        path: '/',
+        breadcrumbName: intl.formatMessage({ id: 'menu.首页' }, { defaultMessage: '首页' }),
+      },
+    ];
+  }
+
+  // 构建面包屑数据
+  const breadcrumbs = [
+    {
+      path: '/',
+      breadcrumbName: intl.formatMessage({ id: 'menu.首页' }, { defaultMessage: '首页' }),
+    },
+  ];
+
+  // 按照斜杠分割路径
+  const pathSegments = pathname.split('/').filter(segment => segment);
+  let currentPath = '';
+
+  // 构建每一级的路径和对应的面包屑名称
+  for (let i = 0; i < pathSegments.length; i++) {
+    const segment = pathSegments[i];
+    currentPath += `/${segment}`;
+
+    // 尝试使用多语言配置
+    // 先尝试完整路径的多语言配置
+    let menuKey = `menu.${pathSegments.slice(0, i + 1).join('/')}`;
+    let menuName = intl.formatMessage({ id: menuKey }, { defaultMessage: '' });
+
+    // 如果完整路径没有对应的多语言，则尝试使用当前段的多语言
+    if (!menuName) {
+      menuKey = `menu.${segment}`;
+      menuName = intl.formatMessage({ id: menuKey }, { defaultMessage: '' });
+    }
+
+    // 如果仍然没有找到多语言配置，尝试使用特定页面的多语言配置
+    if (!menuName) {
+      // 处理特殊情况，如数据统计下的子页面
+      if (pathSegments[0] === 'dataStatistics') {
+        switch (segment) {
+          case 'supplierEvaluateStatistics':
+            menuName = intl.formatMessage({ id: 'menu.供应商评价情况统计' }, { defaultMessage: '供应商评价情况统计' });
+            break;
+          case 'supplierAnnualStatistics':
+            menuName = intl.formatMessage({ id: 'menu.供应商年审情况统计' }, { defaultMessage: '供应商年审情况统计' });
+            break;
+          case 'supplierQualificationWarningStatistics':
+            menuName = intl.formatMessage({ id: 'menu.供应商资质预警统计' }, { defaultMessage: '供应商资质预警统计' });
+            break;
+          case 'supplierExitStatistics':
+            menuName = intl.formatMessage({ id: 'menu.供应商清退情况统计' }, { defaultMessage: '供应商清退情况统计' });
+            break;
+          default:
+            menuName = segment;
+        }
+      } else if (pathSegments[0] === 'supplierEvaluate') {
+        // 处理供应商评价模块
+        menuName = intl.formatMessage({ id: `menu.${segment}` }, { defaultMessage: segment });
+      } else if (pathSegments[0] === 'supplierAnnual') {
+        // 处理供应商年审模块
+        menuName = intl.formatMessage({ id: `menu.${segment}` }, { defaultMessage: segment });
+      } else {
+        menuName = segment;
+      }
+    }
+
+    breadcrumbs.push({
+      path: currentPath,
+      breadcrumbName: menuName || segment,
+    });
+  }
+
+  return breadcrumbs;
+};
+
+const BreadcrumbModel: BreadcrumbModelType = {
+  namespace: 'breadcrumb',
+
+  state: {
+    breadcrumbs: [],
+  },
+
+  effects: {
+    *updateBreadcrumbs({ payload }, { put }) {
+      const { pathname, intl } = payload;
+      console.log(pathname)
+      const breadcrumbs = generateBreadcrumbs(pathname, intl);
+      yield put({
+        type: 'saveBreadcrumbs',
+        payload: breadcrumbs,
+      });
+    },
+  },
+
+  reducers: {
+    saveBreadcrumbs(state, { payload }) {
+      return {
+        ...state,
+        breadcrumbs: payload,
+      };
+    },
+  },
+};
+
+export default BreadcrumbModel;
--- a/src/models/readme.md
+++ b/src/models/readme.md
@ -3,4 +3,6 @@ dva 模块

 supplierAnnualTaskManage 年审任务功能模块

-supplierTaskManage 年审任务功能模块
+supplierTaskManage 年审任务功能模块
+
+breadcrumb 面包屑导航模块
--- a/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx
+++ b/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx
@ -238,7 +238,6 @@ const SupplierTemplateManageAdd: React.FC = () => {

  return (
    <div className="common-container">
-      <Card bordered={false}>
        <div className={styles.pageHeader}>
          <Title level={4} style={{ margin: 0 }}>
            {isEdit ? '编辑评价模板' : '新增评价模板'}
@ -392,7 +391,6 @@ const SupplierTemplateManageAdd: React.FC = () => {
            </Space>
          </div>
        </Form>
-      </Card>
    </div>
  );
 };