实现运营概览页面:平台KPI、租户增长趋势、套餐分布图、操作记录
This commit is contained in:
@@ -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'
|
||||||
|
|
||||||
|
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>
|
</div>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default AdminDashboard
|
export default AdminDashboard
|
||||||
|
|||||||
Reference in New Issue
Block a user