修改外框layout布局

2025-07-01 14:18:23 +08:00
parent 4e4b9a730d
commit 4e972b1841
10 changed files with 419 additions and 248 deletions
--- 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;