From a0b9271707fe4efeb9ac9f2661ab34d3ae906b3f Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Tue, 14 Jul 2026 11:15:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=BF=90=E8=90=A5=E6=A6=82?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2=EF=BC=9A=E5=B9=B3=E5=8F=B0KPI?=
 =?UTF-8?q?=E3=80=81=E7=A7=9F=E6=88=B7=E5=A2=9E=E9=95=BF=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E3=80=81=E5=A5=97=E9=A4=90=E5=88=86=E5=B8=83=E5=9B=BE=E3=80=81?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/admin/Dashboard.tsx | 109 ++++++++++++++++++++++++++++--
 1 file changed, 104 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/admin/Dashboard.tsx b/web/src/pages/admin/Dashboard.tsx
index a2e3a9b..438b467 100644
--- a/web/src/pages/admin/Dashboard.tsx
+++ b/web/src/pages/admin/Dashboard.tsx
@@ -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>
-  </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