118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Outlet, Navigate, useLocation } from 'react-router-dom';
|
||
|
|
import { Layout, Menu } from 'antd';
|
||
|
|
import {
|
||
|
|
UserOutlined,
|
||
|
|
SafetyOutlined,
|
||
|
|
FileTextOutlined,
|
||
|
|
DatabaseOutlined,
|
||
|
|
InfoCircleOutlined,
|
||
|
|
ArrowLeftOutlined,
|
||
|
|
SettingOutlined
|
||
|
|
} from '@ant-design/icons';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
|
||
|
|
const { Sider, Content } = Layout;
|
||
|
|
|
||
|
|
const AdminLayout: React.FC = () => {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
const menuItems = [
|
||
|
|
{
|
||
|
|
key: '/admin/users',
|
||
|
|
icon: <UserOutlined />,
|
||
|
|
label: '用户管理'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/admin/roles',
|
||
|
|
icon: <SafetyOutlined />,
|
||
|
|
label: '角色权限'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/admin/process',
|
||
|
|
icon: <SettingOutlined />,
|
||
|
|
label: '流程管理'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/admin/logs',
|
||
|
|
icon: <FileTextOutlined />,
|
||
|
|
label: '系统日志'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/admin/backup',
|
||
|
|
icon: <DatabaseOutlined />,
|
||
|
|
label: '数据备份'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '/admin/about',
|
||
|
|
icon: <InfoCircleOutlined />,
|
||
|
|
label: '关于系统'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout style={{ minHeight: '100vh' }}>
|
||
|
|
<Sider
|
||
|
|
width={220}
|
||
|
|
theme="light"
|
||
|
|
style={{
|
||
|
|
borderRight: '1px solid #f0f0f0',
|
||
|
|
background: '#fff'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{
|
||
|
|
height: 64,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
borderBottom: '1px solid #f0f0f0',
|
||
|
|
background: '#1890ff',
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
fontSize: 16
|
||
|
|
}}>
|
||
|
|
系统后台管理
|
||
|
|
</div>
|
||
|
|
<Menu
|
||
|
|
mode="inline"
|
||
|
|
selectedKeys={[location.pathname]}
|
||
|
|
items={menuItems}
|
||
|
|
onClick={({ key }) => navigate(key)}
|
||
|
|
style={{ borderRight: 0 }}
|
||
|
|
/>
|
||
|
|
<div style={{
|
||
|
|
position: 'absolute',
|
||
|
|
bottom: 20,
|
||
|
|
width: '100%',
|
||
|
|
padding: '0 16px'
|
||
|
|
}}>
|
||
|
|
<div
|
||
|
|
onClick={() => navigate('/dashboard')}
|
||
|
|
style={{
|
||
|
|
cursor: 'pointer',
|
||
|
|
color: '#1890ff',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: 8
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ArrowLeftOutlined /> 返回前台
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Sider>
|
||
|
|
<Layout>
|
||
|
|
<Content style={{
|
||
|
|
margin: 0,
|
||
|
|
background: '#f5f5f5',
|
||
|
|
minHeight: '100vh'
|
||
|
|
}}>
|
||
|
|
<Outlet />
|
||
|
|
</Content>
|
||
|
|
</Layout>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AdminLayout;
|