实现运营概览页面:平台KPI、租户增长趋势、套餐分布图、操作记录

This commit is contained in:
yml2213
2026-07-14 11:15:08 +08:00
parent 05c95c0136
commit a0b9271707
+104 -5
View File
@@ -1,6 +1,105 @@
const AdminDashboard = () => ( import { Card, Table, Tag } from 'antd'
<div className="h-full flex items-center justify-center text-neutral-400 text-center"> import { ArrowUpOutlined, TeamOutlined, UserOutlined, DollarOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
<div><div className="text-lg mb-1"></div><div className="text-sm">...</div></div> import { Line, Pie } from '@ant-design/charts'
</div>
) const kpiData = [
{ label: '租户总数', value: '156', change: 8.3, icon: <TeamOutlined />, color: '#2563eb' },
{ label: '活跃租户', value: '138', change: 5.1, icon: <UserOutlined />, color: '#16a34a' },
{ label: '平台月收入', value: '¥89,400', change: 12.7, icon: <DollarOutlined />, color: '#d97706' },
{ label: '系统可用率', value: '99.95%', change: 0.02, icon: <SafetyCertificateOutlined />, color: '#0891b2' },
]
const trendData = [
{ date: '07-01', count: 142 }, { date: '07-03', count: 145 }, { date: '07-05', count: 148 },
{ date: '07-07', count: 150 }, { date: '07-09', count: 152 }, { date: '07-11', count: 154 },
{ date: '07-13', count: 156 },
]
const planDistribution = [
{ type: '基础版', value: 68 }, { type: '专业版', value: 52 }, { type: '企业版', value: 36 },
]
const operations = [
{ time: '2026-07-14 10:30', action: '开通新租户', target: '赵六科技', operator: '管理员A' },
{ time: '2026-07-14 09:15', action: '租户续费', target: '李四商贸', operator: '管理员B' },
{ time: '2026-07-13 16:20', action: '套餐升级', target: '王五集团', operator: '管理员A' },
{ time: '2026-07-13 14:00', action: '租户暂停', target: '孙八信息', operator: '管理员B' },
{ time: '2026-07-13 10:45', action: '开通新租户', target: '周九科技', operator: '管理员A' },
]
const actionColors: Record<string, string> = {
'开通新租户': 'green',
'租户续费': 'blue',
'套餐升级': 'orange',
'租户暂停': 'red',
}
const AdminDashboard = () => {
return (
<div>
<h2 className="text-lg font-semibold text-neutral-800 mb-5"></h2>
{/* KPI */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
{kpiData.map((k, i) => (
<Card key={i} className="!rounded-lg" bordered={false}>
<div className="flex items-center justify-between mb-3">
<span className="text-sm text-neutral-400">{k.label}</span>
<span className="text-lg" style={{ color: k.color }}>{k.icon}</span>
</div>
<div className="text-2xl font-bold text-neutral-800 mb-1">{k.value}</div>
<div className="text-xs text-green-600 flex items-center gap-1">
<ArrowUpOutlined /> {k.change}%
</div>
</Card>
))}
</div>
{/* 图表 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
<Card title="租户增长趋势(近30天)" className="!rounded-lg" bordered={false}>
<Line
data={trendData}
xField="date"
yField="count"
smooth
height={240}
color="#2563eb"
point={{ size: 3 }}
axis={{ y: { grid: true, gridStroke: '#f1f5f9' } }}
/>
</Card>
<Card title="套餐分布" className="!rounded-lg" bordered={false}>
<Pie
data={planDistribution}
angleField="value"
colorField="type"
height={240}
radius={0.8}
innerRadius={0.6}
label={{ text: 'type', position: 'outside' }}
legend={{ color: { position: 'bottom' } }}
/>
</Card>
</div>
{/* 最近操作 */}
<Card title="最近操作记录" className="!rounded-lg" bordered={false}>
<Table
dataSource={operations}
rowKey="time"
pagination={false}
size="middle"
columns={[
{ title: '时间', dataIndex: 'time', key: 'time', render: (t: string) => <span className="text-sm text-neutral-500">{t}</span> },
{ title: '操作', dataIndex: 'action', key: 'action', render: (a: string) => <Tag color={actionColors[a]}>{a}</Tag> },
{ title: '目标', dataIndex: 'target', key: 'target' },
{ title: '操作人', dataIndex: 'operator', key: 'operator', render: (o: string) => <span className="text-neutral-500">{o}</span> },
]}
/>
</Card>
</div>
)
}
export default AdminDashboard export default AdminDashboard