forked from datawhale/whale-town-end
feat:简单添加管理员后台功能
This commit is contained in:
52
client/src/app/AdminLayout.tsx
Normal file
52
client/src/app/AdminLayout.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user