84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
|
import { Layout, Menu } from 'antd';
|
|
import { useState } from 'react';
|
|
import { Outlet, useLocation, useNavigate } from 'react-router';
|
|
import { routes } from '@/routes';
|
|
import { toMenuItems } from '@/routes/utils';
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
const menuItems = toMenuItems(routes);
|
|
|
|
const RootLayout = () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
return (
|
|
<Layout style={{ height: '100vh' }}>
|
|
<Header
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '0 24px',
|
|
background: '#fff',
|
|
borderBottom: '1px solid #f0f0f0',
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: 'bold', fontSize: 18 }}>TaoTie</span>
|
|
</Header>
|
|
<Layout style={{ overflow: 'hidden' }}>
|
|
<Sider
|
|
theme="light"
|
|
width={200}
|
|
collapsed={collapsed}
|
|
style={{ borderRight: '1px solid #f0f0f0', position: 'relative' }}
|
|
>
|
|
<Menu
|
|
mode="inline"
|
|
selectedKeys={[location.pathname]}
|
|
defaultOpenKeys={menuItems.map((item) => item.key)}
|
|
items={menuItems}
|
|
onClick={({ key }) => navigate(key)}
|
|
style={{ height: '100%', borderRight: 0, paddingBottom: 48 }}
|
|
/>
|
|
<div
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 48,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: collapsed ? 'center' : 'flex-end',
|
|
padding: collapsed ? 0 : '0 24px',
|
|
borderTop: '1px solid #f0f0f0',
|
|
cursor: 'pointer',
|
|
color: '#666',
|
|
background: '#fff',
|
|
transition: 'all 0.2s',
|
|
userSelect: 'none',
|
|
}}
|
|
>
|
|
{collapsed ? (
|
|
<MenuUnfoldOutlined />
|
|
) : (
|
|
<>
|
|
<MenuFoldOutlined style={{ marginRight: 8 }} />
|
|
<span style={{ fontSize: 13 }}>收起</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Sider>
|
|
<Content style={{ padding: 0, overflow: 'auto' }}>
|
|
<Outlet />
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default RootLayout;
|