动态更新面包屑导航

src/layouts/BasicLayout.tsx

@@ -2,11 +2,13 @@
 import React from 'react';
 import ProLayout, { PageContainer } from '@ant-design/pro-layout';
 import { Link, useLocation, useIntl, useHistory } from 'umi';
+import { connect } from 'dva';
 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';
+import { BreadcrumbState } from '@/models/breadcrumb';
 
 
 const MenuRender = (item: any, isSubMenu: boolean) => {
@@ -32,22 +34,29 @@ const MenuRender = (item: any, isSubMenu: boolean) => {
   );
 };
 
-const BreadcrumbRender = (breadcrumb: any, intl: any, history: any) => {
-  const breadcrumbRoutes = breadcrumb?.routes;
+const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamicBreadcrumbName: string | null) => {
+  const breadcrumbRoutes = routeBreadcrumb?.routes;
   return (
     <Breadcrumb>
       <Breadcrumb.Item
         onClick={() => {
           history.push('/');
         }}
-        style={{ cursor: 'pointer' }}
       >
-        {intl.formatMessage({ id: 'menu.首页' })}
+        <span style={{ cursor: 'pointer' }}>
+          {intl.formatMessage({ id: 'menu.首页' })}
+        </span>
       </Breadcrumb.Item>
-      {breadcrumbRoutes?.map((item: any) => {
+      {breadcrumbRoutes?.map((item: any, index: number) => {
+        // 判断是否是最后一个面包屑项且存在动态名称
+        const isLastItem = index === (breadcrumbRoutes.length - 1);
+        const displayName = (isLastItem && dynamicBreadcrumbName)
+          ? dynamicBreadcrumbName
+          : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' });
+
         return (
           <Breadcrumb.Item key={item.path}>
-            {intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' })}
+            {displayName}
           </Breadcrumb.Item>
         );
       })}
@@ -55,7 +64,13 @@ const BreadcrumbRender = (breadcrumb: any, intl: any, history: any) => {
   );
 };
 
-const BasicLayout: React.FC = (props) => {
+interface BasicLayoutProps {
+  children: React.ReactNode;
+  breadcrumb: BreadcrumbState;
+}
+
+const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
+  const { children, breadcrumb } = props;
   const location = useLocation();
   const intl = useIntl();
   const history = useHistory();
@@ -81,14 +96,18 @@ const BasicLayout: React.FC = (props) => {
           ghost={true}
           header={{
             title: false,
-            breadcrumbRender: ({ breadcrumb }) => BreadcrumbRender(breadcrumb, intl, history),
+            breadcrumbRender: ({ breadcrumb: routeBreadcrumb }) =>
+              BreadcrumbRender(routeBreadcrumb, intl, history, breadcrumb.breadcrumbName),
           }}
         >
-          {props.children}
+          {children}
         </PageContainer>
       </ProLayout>
     </ConfigProvider>
   );
 };
 
-export default BasicLayout;
+export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
+  breadcrumb
+}))(BasicLayout);
+