CI Bot
108 lines
2.2 KiB
TypeScript
108 lines
2.2 KiB
TypeScript
/**
|
|
* 侧边栏导航
|
|
*/
|
|
import React from 'react';
|
|
import { Layout, Menu } from 'antd';
|
|
import {
|
|
HomeOutlined,
|
|
AppstoreOutlined,
|
|
TeamOutlined,
|
|
CrownOutlined,
|
|
UserOutlined,
|
|
DashboardOutlined,
|
|
} from '@ant-design/icons';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import type { MenuProps } from 'antd';
|
|
|
|
const { Sider } = Layout;
|
|
|
|
interface SidebarProps {
|
|
collapsed: boolean;
|
|
}
|
|
|
|
const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const menuItems: MenuProps['items'] = [
|
|
{
|
|
key: '/',
|
|
icon: <HomeOutlined />,
|
|
label: '首页',
|
|
onClick: () => navigate('/'),
|
|
},
|
|
{
|
|
key: '/projects',
|
|
icon: <AppstoreOutlined />,
|
|
label: '项目',
|
|
disabled: true,
|
|
},
|
|
{
|
|
key: '/members',
|
|
icon: <TeamOutlined />,
|
|
label: '成员管理',
|
|
disabled: true,
|
|
},
|
|
{
|
|
key: '/subscription',
|
|
icon: <CrownOutlined />,
|
|
label: '订阅管理',
|
|
onClick: () => navigate('/subscription'),
|
|
},
|
|
{
|
|
key: '/admin',
|
|
icon: <DashboardOutlined />,
|
|
label: 'Admin（暂未开放）',
|
|
disabled: true,
|
|
},
|
|
{
|
|
key: '/profile',
|
|
icon: <UserOutlined />,
|
|
label: '个人中心',
|
|
onClick: () => navigate('/profile'),
|
|
},
|
|
];
|
|
|
|
// 根据当前路径选中菜单项
|
|
const selectedKey = '/' + location.pathname.split('/')[1];
|
|
|
|
return (
|
|
<Sider
|
|
collapsible
|
|
collapsed={collapsed}
|
|
trigger={null}
|
|
width={200}
|
|
style={{
|
|
overflow: 'auto',
|
|
height: '100vh',
|
|
position: 'sticky',
|
|
left: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: 64,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#fff',
|
|
fontSize: '18px',
|
|
fontWeight: 'bold',
|
|
}}
|
|
>
|
|
{collapsed ? '🦐' : '小虾 SaaS'}
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
selectedKeys={[selectedKey]}
|
|
items={menuItems}
|
|
/>
|
|
</Sider>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|