Initial CMPP frontend prototype

2026-06-30 16:09:46 +08:00
commit 2f3c274a30
98 changed files with 25255 additions and 0 deletions
@@ -0,0 +1,53 @@
+import { Activity } from 'lucide-react';
+import { Button, Table, Tag, type TableColumn } from '@/components/ui';
+import { adminService, type Channel } from '@/mock';
+
+const columns: Array<TableColumn<Channel>> = [
+  { key: 'id', title: '通道编号', render: (record) => record.id },
+  { key: 'name', title: '通道名称', render: (record) => record.name },
+  { key: 'region', title: '区域', render: (record) => record.region },
+  { key: 'successRate', title: '成功率', render: (record) => `${record.successRate}%` },
+  { key: 'latencyMs', title: '平均延迟', render: (record) => `${record.latencyMs} ms` },
+  {
+    key: 'enabled',
+    title: '状态',
+    render: (record) => <Tag tone={record.enabled ? 'success' : 'danger'}>{record.enabled ? '运行中' : '已停用'}</Tag>,
+  },
+];
+
+export function AdminMonitorPage() {
+  const channels = adminService.getChannels();
+  const enabledChannels = channels.filter((item) => item.enabled).length;
+
+  return (
+    <section className="page-stack">
+      <div className="page-heading">
+        <div>
+          <p className="eyebrow">运营</p>
+          <h1>发送监控</h1>
+        </div>
+        <Button icon={<Activity size={16} />} variant="ghost">实时刷新</Button>
+      </div>
+      <div className="dashboard-grid">
+        <div className="surface metric-card">
+          <span>运行通道</span>
+          <strong>{enabledChannels}</strong>
+          <small>共 {channels.length} 条通道</small>
+        </div>
+        <div className="surface metric-card">
+          <span>平均成功率</span>
+          <strong>98.5%</strong>
+          <small>近 1 小时</small>
+        </div>
+        <div className="surface metric-card">
+          <span>平均延迟</span>
+          <strong>167 ms</strong>
+          <small>全通道加权</small>
+        </div>
+      </div>
+      <div className="surface">
+        <Table columns={columns} data={channels} rowKey="id" />
+      </div>
+    </section>
+  );
+}