You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.6 KiB
57 lines
1.6 KiB
import React from 'react';
|
|
import { Layout, Menu } from 'antd';
|
|
import { HomeOutlined, BarChartOutlined, AlertOutlined, SettingOutlined } from '@ant-design/icons';
|
|
|
|
const { Sider: AntSider } = Layout;
|
|
|
|
const Sider = ({ collapsed, theme, currentMenu, onMenuSelect }) => {
|
|
return (
|
|
<AntSider
|
|
collapsible
|
|
collapsed={collapsed}
|
|
style={{
|
|
background: theme === 'light' ? '#fff' : '#1f1f1f',
|
|
boxShadow: '2px 0 8px rgba(0, 0, 0, 0.1)'
|
|
}}
|
|
>
|
|
<div style={{
|
|
height: 64,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '16px',
|
|
fontWeight: 'bold',
|
|
color: theme === 'light' ? '#1890ff' : '#40a9ff',
|
|
borderBottom: `1px solid ${theme === 'light' ? '#f0f0f0' : '#333'}`
|
|
}}>
|
|
{!collapsed && '功能导航'}
|
|
</div>
|
|
<Menu
|
|
mode="inline"
|
|
selectedKeys={[currentMenu]}
|
|
onSelect={({ key }) => onMenuSelect(key)}
|
|
style={{
|
|
height: '100%',
|
|
borderRight: 0,
|
|
background: theme === 'light' ? '#fff' : '#1f1f1f'
|
|
}}
|
|
theme={theme}
|
|
>
|
|
<Menu.Item key="dashboard" icon={<HomeOutlined />}>
|
|
市场概览
|
|
</Menu.Item>
|
|
<Menu.Item key="detail" icon={<BarChartOutlined />}>
|
|
详情分析
|
|
</Menu.Item>
|
|
<Menu.Item key="risk-control" icon={<AlertOutlined />}>
|
|
风控管理
|
|
</Menu.Item>
|
|
<Menu.Item key="config" icon={<SettingOutlined />}>
|
|
配置管理
|
|
</Menu.Item>
|
|
</Menu>
|
|
</AntSider>
|
|
);
|
|
};
|
|
|
|
export default Sider; |