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

2026-07-14 11:15:08 +08:00
parent 05c95c0136
commit a0b9271707
1 changed files with 104 additions and 5 deletions
@@ -1,6 +1,105 @@
-const AdminDashboard = () => (
-  <div className="h-full flex items-center justify-center text-neutral-400 text-center">
-    <div><div className="text-lg mb-1">运营概览</div><div className="text-sm">开发中...</div></div>
+import { Card, Table, Tag } from 'antd'
+import { ArrowUpOutlined, TeamOutlined, UserOutlined, DollarOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
+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>
  )
+}
+
 export default AdminDashboard