130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { Layout, Menu, Button, Avatar, Dropdown, Space } from 'antd';
|
|
import { LogoutOutlined, UserOutlined, HomeOutlined, TeamOutlined, LockOutlined, UserAddOutlined, SettingOutlined, ClusterOutlined, ShoppingOutlined, BuildOutlined, ProjectOutlined, DollarOutlined } from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { authService } from '../services/auth.service';
|
|
|
|
const { Header, Content, Sider } = Layout;
|
|
|
|
const HomePage: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const user = authService.getUser();
|
|
|
|
const handleLogout = () => {
|
|
authService.logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
const menu = {
|
|
items: [
|
|
{
|
|
key: 'profile',
|
|
label: (
|
|
<span>
|
|
<UserOutlined /> 个人资料
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'logout',
|
|
label: (
|
|
<span>
|
|
<LogoutOutlined /> 退出登录
|
|
</span>
|
|
),
|
|
onClick: handleLogout,
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<Layout className="min-h-screen">
|
|
<Header className="bg-white shadow-sm px-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-xl font-bold text-blue-600">ERP系统</div>
|
|
<div className="flex items-center">
|
|
<Space>
|
|
<span className="mr-4">欢迎, {user?.name}</span>
|
|
<Dropdown menu={menu} placement="bottomRight">
|
|
<Button type="text" icon={<Avatar icon={<UserOutlined />} />} />
|
|
</Dropdown>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
</Header>
|
|
<Layout>
|
|
<Sider width={200} className="bg-white">
|
|
<Menu
|
|
mode="inline"
|
|
defaultSelectedKeys={['home']}
|
|
style={{ height: '100%', borderRight: 0 }}
|
|
onClick={({ key }) => {
|
|
switch (key) {
|
|
case 'home':
|
|
navigate('/');
|
|
break;
|
|
case 'customers':
|
|
navigate('/customers');
|
|
break;
|
|
case 'suppliers':
|
|
navigate('/suppliers');
|
|
break;
|
|
case 'subcontractors':
|
|
navigate('/subcontractors');
|
|
break;
|
|
case 'projects':
|
|
navigate('/projects');
|
|
break;
|
|
case 'finance':
|
|
navigate('/finance');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}}
|
|
>
|
|
<Menu.Item key="home" icon={<HomeOutlined />}>
|
|
首页
|
|
</Menu.Item>
|
|
<Menu.Item key="customers" icon={<ClusterOutlined />}>
|
|
客户管理
|
|
</Menu.Item>
|
|
<Menu.Item key="suppliers" icon={<ShoppingOutlined />}>
|
|
供应商管理
|
|
</Menu.Item>
|
|
<Menu.Item key="subcontractors" icon={<BuildOutlined />}>
|
|
分包商管理
|
|
</Menu.Item>
|
|
<Menu.Item key="projects" icon={<ProjectOutlined />}>
|
|
项目管理
|
|
</Menu.Item>
|
|
<Menu.Item key="finance" icon={<DollarOutlined />}>
|
|
财务管理
|
|
</Menu.Item>
|
|
<Menu.Item key="users" icon={<TeamOutlined />}>
|
|
用户管理
|
|
</Menu.Item>
|
|
<Menu.Item key="roles" icon={<LockOutlined />}>
|
|
角色管理
|
|
</Menu.Item>
|
|
<Menu.Item key="permissions" icon={<SettingOutlined />}>
|
|
权限管理
|
|
</Menu.Item>
|
|
<Menu.Item key="register" icon={<UserAddOutlined />}>
|
|
用户注册
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Sider>
|
|
<Content className="p-6">
|
|
<div className="bg-white rounded-lg shadow-sm p-6">
|
|
<h1 className="text-xl font-bold mb-4">欢迎使用ERP系统</h1>
|
|
<p>这是系统的主页面，您可以通过左侧菜单访问各个功能模块。</p>
|
|
</div>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|