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,123 @@
+import { useMemo } from 'react';
+import { BarChart3 } from 'lucide-react';
+import { Button, Chart, Tag } from '@/components/ui';
+import { auditTrend, channelShare, customerGrowth, hourlySendTrend } from '@/mock/chartData';
+import { adminService } from '@/mock';
+import { createBarOption, createLineOption, createPieOption } from '@/theme/chartOptions';
+
+export function AdminAnalyticsPage() {
+  const overview = adminService.getOverview();
+  const customers = adminService.getCustomers();
+
+  const sendTrendOption = useMemo(
+    () => createLineOption({
+      labels: hourlySendTrend.map((item) => item.time),
+      series: [
+        { name: '提交量', data: hourlySendTrend.map((item) => item.sent) },
+        { name: '成功量', data: hourlySendTrend.map((item) => item.success) },
+      ],
+    }),
+    [],
+  );
+
+  const auditTrendOption = useMemo(
+    () => createBarOption({
+      labels: auditTrend.map((item) => item.day),
+      series: [
+        { name: '通过', data: auditTrend.map((item) => item.approved) },
+        { name: '驳回', data: auditTrend.map((item) => item.rejected) },
+        { name: '待审', data: auditTrend.map((item) => item.pending) },
+      ],
+    }),
+    [],
+  );
+
+  const customerGrowthOption = useMemo(
+    () => createLineOption({
+      labels: customerGrowth.map((item) => item.month),
+      series: [
+        { name: '活跃客户', data: customerGrowth.map((item) => item.active) },
+        { name: '新增客户', data: customerGrowth.map((item) => item.new) },
+      ],
+    }),
+    [],
+  );
+
+  const channelShareOption = useMemo(() => createPieOption({ data: channelShare }), []);
+
+  return (
+    <section className="page-stack">
+      <div className="page-heading">
+        <div>
+          <p className="eyebrow">运营</p>
+          <h1>数据统计</h1>
+        </div>
+        <Button icon={<BarChart3 size={16} />} variant="ghost">导出报表</Button>
+      </div>
+
+      <div className="dashboard-grid">
+        <div className="surface metric-card">
+          <span>提交量</span>
+          <strong>{overview.todaySubmissions}</strong>
+          <small>今日审核提交</small>
+        </div>
+        <div className="surface metric-card">
+          <span>活跃客户</span>
+          <strong>{customers.filter((item) => item.status === 'active').length}</strong>
+          <small>当前平台客户</small>
+        </div>
+        <div className="surface metric-card">
+          <span>通道健康度</span>
+          <strong>{overview.channelHealth}%</strong>
+          <small>近 24 小时</small>
+        </div>
+      </div>
+
+      <div className="chart-grid">
+        <div className="surface chart-card">
+          <div className="section-heading">
+            <div>
+              <h2>发送趋势</h2>
+              <p className="muted">按 3 小时聚合短信提交与成功量。</p>
+            </div>
+            <Tag tone="info">今日</Tag>
+          </div>
+          <Chart height={320} option={sendTrendOption} />
+        </div>
+        <div className="surface chart-card">
+          <div className="section-heading">
+            <div>
+              <h2>通道占比</h2>
+              <p className="muted">按提交量估算。</p>
+            </div>
+            <Tag tone="accent">通道</Tag>
+          </div>
+          <Chart height={320} option={channelShareOption} />
+        </div>
+      </div>
+
+      <div className="chart-grid">
+        <div className="surface chart-card">
+          <div className="section-heading">
+            <div>
+              <h2>审核趋势</h2>
+              <p className="muted">近 7 天审核处理情况。</p>
+            </div>
+            <Tag tone="warning">审核</Tag>
+          </div>
+          <Chart height={320} option={auditTrendOption} />
+        </div>
+        <div className="surface chart-card">
+          <div className="section-heading">
+            <div>
+              <h2>客户增长</h2>
+              <p className="muted">平台客户增长与活跃趋势。</p>
+            </div>
+            <Tag tone="success">客户</Tag>
+          </div>
+          <Chart height={320} option={customerGrowthOption} />
+        </div>
+      </div>
+    </section>
+  );
+}