126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { Card, Layout, Menu, Typography, Row, Col, Statistic } from 'antd';
|
|||
|
|
import {
|
|||
|
|
DashboardOutlined,
|
|||
|
|
ShoppingOutlined,
|
|||
|
|
UserOutlined,
|
|||
|
|
TruckOutlined,
|
|||
|
|
AuditOutlined,
|
|||
|
|
AlertOutlined,
|
|||
|
|
FileTextOutlined,
|
|||
|
|
DollarOutlined,
|
|||
|
|
BarChartOutlined
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
import { Link } from 'umi';
|
|||
|
|
|
|||
|
|
const { Header, Content, Sider } = Layout;
|
|||
|
|
const { Title, Text } = Typography;
|
|||
|
|
|
|||
|
|
const Dashboard: React.FC = () => {
|
|||
|
|
const menuItems = [
|
|||
|
|
{
|
|||
|
|
key: 'dashboard',
|
|||
|
|
icon: <DashboardOutlined />,
|
|||
|
|
label: <Link to="/">首页</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'products',
|
|||
|
|
icon: <ShoppingOutlined />,
|
|||
|
|
label: <Link to="/Product">商品管理</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'orders',
|
|||
|
|
icon: <FileTextOutlined />,
|
|||
|
|
label: <Link to="/Orders">订单管理</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'merchants',
|
|||
|
|
icon: <UserOutlined />,
|
|||
|
|
label: <Link to="/Merchant">商户管理</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'logistics',
|
|||
|
|
icon: <TruckOutlined />,
|
|||
|
|
label: <Link to="/Logistics">物流管理</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'aftersales',
|
|||
|
|
icon: <AlertOutlined />,
|
|||
|
|
label: <Link to="/AfterSales">售后服务</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'compliance',
|
|||
|
|
icon: <AuditOutlined />,
|
|||
|
|
label: <Link to="/Compliance">合规管理</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'blacklist',
|
|||
|
|
icon: <AlertOutlined />,
|
|||
|
|
label: <Link to="/Blacklist">黑名单管理</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'b2b',
|
|||
|
|
icon: <DollarOutlined />,
|
|||
|
|
label: <Link to="/B2B">B2B贸易</Link>
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'ads',
|
|||
|
|
icon: <BarChartOutlined />,
|
|||
|
|
label: <Link to="/Ad">广告管理</Link>
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|||
|
|
<Header style={{ display: 'flex', alignItems: 'center', background: '#1890ff' }}>
|
|||
|
|
<Title level={3} style={{ color: 'white', margin: 0 }}>Crawlful Hub 管理系统</Title>
|
|||
|
|
</Header>
|
|||
|
|
<Layout>
|
|||
|
|
<Sider width={200} style={{ background: '#f0f2f5' }}>
|
|||
|
|
<Menu
|
|||
|
|
mode="inline"
|
|||
|
|
style={{ height: '100%', borderRight: 0 }}
|
|||
|
|
defaultSelectedKeys={['dashboard']}
|
|||
|
|
items={menuItems}
|
|||
|
|
/>
|
|||
|
|
</Sider>
|
|||
|
|
<Layout style={{ padding: '0 24px 24px' }}>
|
|||
|
|
<Content style={{ padding: 24, margin: 0, minHeight: 280, background: '#fff' }}>
|
|||
|
|
<Title level={4}>系统概览</Title>
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<Card>
|
|||
|
|
<Statistic title="商品数量" value={1280} />
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<Card>
|
|||
|
|
<Statistic title="订单数量" value={960} />
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<Card>
|
|||
|
|
<Statistic title="商户数量" value={120} />
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<Card>
|
|||
|
|
<Statistic title="总销售额" value={1280000} prefix="¥" />
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
<div style={{ marginTop: 24 }}>
|
|||
|
|
<Card title="系统功能">
|
|||
|
|
<Text>
|
|||
|
|
欢迎使用 Crawlful Hub 管理系统，这是一个集商品管理、订单处理、商户管理、物流管理、售后服务、合规管理等功能于一体的综合管理平台。
|
|||
|
|
</Text>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</Content>
|
|||
|
|
</Layout>
|
|||
|
|
</Layout>
|
|||
|
|
</Layout>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Dashboard;
|