95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
|
// 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;
|