修改外框layout布局

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;

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">

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);

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>
       ),
     );