|
|
@@ -1,7 +1,10 @@
|
|
|
import React from 'react';
|
|
|
-import {
|
|
|
- Card, Row, Col, Typography, Statistic
|
|
|
+import {
|
|
|
+ Card, Row, Col, Typography, Statistic, Space
|
|
|
} from 'antd';
|
|
|
+import {
|
|
|
+ UserOutlined, BellOutlined, EyeOutlined
|
|
|
+} from '@ant-design/icons';
|
|
|
|
|
|
const { Title } = Typography;
|
|
|
|
|
|
@@ -9,33 +12,61 @@ const { Title } = Typography;
|
|
|
export const DashboardPage = () => {
|
|
|
return (
|
|
|
<div>
|
|
|
- <Title level={2}>仪表盘</Title>
|
|
|
- <Row gutter={16}>
|
|
|
- <Col span={8}>
|
|
|
- <Card>
|
|
|
+ <div className="mb-6 flex justify-between items-center">
|
|
|
+ <Title level={2}>仪表盘</Title>
|
|
|
+ </div>
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} sm={12} lg={8}>
|
|
|
+ <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
|
|
|
+ <div className="flex items-center justify-between mb-2">
|
|
|
+ <Typography.Title level={5}>活跃用户</Typography.Title>
|
|
|
+ <UserOutlined style={{ fontSize: 24, color: '#1890ff' }} />
|
|
|
+ </div>
|
|
|
<Statistic
|
|
|
- title="活跃用户"
|
|
|
value={112893}
|
|
|
loading={false}
|
|
|
+ valueStyle={{ fontSize: 28 }}
|
|
|
+ prefix={<span style={{ color: '#52c41a' }}>↑</span>}
|
|
|
+ suffix="人"
|
|
|
/>
|
|
|
+ <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
|
|
|
+ 较昨日增长 12.5%
|
|
|
+ </div>
|
|
|
</Card>
|
|
|
</Col>
|
|
|
- <Col span={8}>
|
|
|
- <Card>
|
|
|
+ <Col xs={24} sm={12} lg={8}>
|
|
|
+ <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
|
|
|
+ <div className="flex items-center justify-between mb-2">
|
|
|
+ <Typography.Title level={5}>系统消息</Typography.Title>
|
|
|
+ <BellOutlined style={{ fontSize: 24, color: '#faad14' }} />
|
|
|
+ </div>
|
|
|
<Statistic
|
|
|
- title="系统消息"
|
|
|
value={93}
|
|
|
loading={false}
|
|
|
+ valueStyle={{ fontSize: 28 }}
|
|
|
+ prefix={<span style={{ color: '#faad14' }}>●</span>}
|
|
|
+ suffix="条"
|
|
|
/>
|
|
|
+ <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
|
|
|
+ 其中 5 条未读
|
|
|
+ </div>
|
|
|
</Card>
|
|
|
</Col>
|
|
|
- <Col span={8}>
|
|
|
- <Card>
|
|
|
+ <Col xs={24} sm={12} lg={8}>
|
|
|
+ <Card className="shadow-sm transition-all duration-300 hover:shadow-md">
|
|
|
+ <div className="flex items-center justify-between mb-2">
|
|
|
+ <Typography.Title level={5}>在线用户</Typography.Title>
|
|
|
+ <EyeOutlined style={{ fontSize: 24, color: '#722ed1' }} />
|
|
|
+ </div>
|
|
|
<Statistic
|
|
|
- title="在线用户"
|
|
|
value={1128}
|
|
|
loading={false}
|
|
|
+ valueStyle={{ fontSize: 28 }}
|
|
|
+ suffix="人"
|
|
|
/>
|
|
|
+ <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
|
|
|
+ 当前在线率 32.1%
|
|
|
+ </div>
|
|
|
</Card>
|
|
|
</Col>
|
|
|
</Row>
|