forked from datawhale/whale-town-end
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Layout, Menu, Typography } from 'antd';
|
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
|
import { clearAuth } from '../lib/adminAuth';
|
|
|
|
const { Header, Content, Sider } = Layout;
|
|
|
|
export function AdminLayout() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const selectedKey = location.pathname.startsWith('/users') ? 'users' : 'users';
|
|
|
|
return (
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Sider width={220}>
|
|
<div style={{ padding: 16 }}>
|
|
<Typography.Title level={5} style={{ color: 'white', margin: 0 }}>
|
|
Whale Town Admin
|
|
</Typography.Title>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
selectedKeys={[selectedKey]}
|
|
items={[
|
|
{
|
|
key: 'users',
|
|
label: '用户管理',
|
|
onClick: () => navigate('/users'),
|
|
},
|
|
{
|
|
key: 'logout',
|
|
label: '退出登录',
|
|
onClick: () => {
|
|
clearAuth();
|
|
navigate('/login');
|
|
},
|
|
},
|
|
]}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ background: 'white', display: 'flex', alignItems: 'center' }}>
|
|
<Typography.Text>后台管理</Typography.Text>
|
|
</Header>
|
|
<Content style={{ padding: 16 }}>
|
|
<Outlet />
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
}
|