William
b84bac5828
CI / lint-and-build (push) Has been cancelled
- 左上角名称改为火炬VOD管理器 - 登录页使用渐变背景、LOGO、圆角卡片 - 视频列表、操作日志默认每页 10 条 - 布局增加底部版权信息 © meshel.cn · MIT 开源
104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
import { Layout as AntLayout, Menu, Dropdown, Space, Button, theme } from 'antd';
|
|
import {
|
|
VideoCameraOutlined,
|
|
SettingOutlined,
|
|
FileTextOutlined,
|
|
UserOutlined,
|
|
LogoutOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
|
import { useAuthStore } from '../store/auth';
|
|
|
|
const { Header, Sider, Content, Footer } = AntLayout;
|
|
|
|
export default function Layout() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { user, clearAuth } = useAuthStore();
|
|
const {
|
|
token: { colorBgContainer, borderRadiusLG },
|
|
} = theme.useToken();
|
|
|
|
const menuItems = [
|
|
{ key: '/videos', icon: <VideoCameraOutlined />, label: '视频库' },
|
|
{ key: '/accounts', icon: <SettingOutlined />, label: '账号配置' },
|
|
{ key: '/logs', icon: <FileTextOutlined />, label: '操作日志' },
|
|
];
|
|
|
|
const handleMenuClick = ({ key }: { key: string }) => {
|
|
navigate(key);
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
clearAuth();
|
|
navigate('/login');
|
|
};
|
|
|
|
const userMenuItems = [
|
|
{ key: 'user', label: user?.username, disabled: true },
|
|
{ key: 'role', label: `角色: ${user?.role === 'admin' ? '管理员' : '只读'}`, disabled: true },
|
|
{ type: 'divider' as const },
|
|
{ key: 'logout', icon: <LogoutOutlined />, label: '退出登录', onClick: handleLogout },
|
|
];
|
|
|
|
return (
|
|
<AntLayout style={{ minHeight: '100vh' }}>
|
|
<Sider trigger={null} collapsible theme="light">
|
|
<div
|
|
style={{
|
|
height: 64,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontWeight: 'bold',
|
|
fontSize: 16,
|
|
}}
|
|
>
|
|
火炬VOD管理器
|
|
</div>
|
|
<Menu
|
|
mode="inline"
|
|
selectedKeys={[location.pathname]}
|
|
items={menuItems}
|
|
onClick={handleMenuClick}
|
|
/>
|
|
</Sider>
|
|
<AntLayout>
|
|
<Header style={{ padding: '0 24px', background: colorBgContainer }}>
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', height: '100%' }}>
|
|
<Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
|
|
<Button type="text">
|
|
<Space>
|
|
<UserOutlined />
|
|
{user?.username}
|
|
</Space>
|
|
</Button>
|
|
</Dropdown>
|
|
</div>
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
margin: 24,
|
|
padding: 24,
|
|
background: colorBgContainer,
|
|
borderRadius: borderRadiusLG,
|
|
minHeight: 280,
|
|
}}
|
|
>
|
|
<Outlet />
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: 'center',
|
|
background: colorBgContainer,
|
|
color: '#888',
|
|
fontSize: 13,
|
|
}}
|
|
>
|
|
© {new Date().getFullYear()} meshel.cn · 火炬VOD管理器 · MIT 开源
|
|
</Footer>
|
|
</AntLayout>
|
|
</AntLayout>
|
|
);
|
|
}
|