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,165 @@
+import { useState } from 'react';
+import { ClipboardCopy, FileText } from 'lucide-react';
+import { Button, Modal, Tag } from '@/components/ui';
+
+type LinkStatus = 'connected' | 'disconnected' | 'inactive';
+
+type SmsApplication = {
+  id: string;
+  name: string;
+  appid: string;
+  todaySuccess: number;
+  deliveryRate?: number;
+  price: string;
+  score?: string;
+  status: LinkStatus;
+  params: Array<{ label: string; value: string; highlight?: boolean }>;
+};
+
+const statusLabelMap: Record<LinkStatus, string> = {
+  connected: '已连接',
+  disconnected: '已断',
+  inactive: '未开通',
+};
+
+const statusToneMap: Record<LinkStatus, 'success' | 'danger' | 'info'> = {
+  connected: 'success',
+  disconnected: 'danger',
+  inactive: 'info',
+};
+
+const applications: SmsApplication[] = [
+  {
+    id: 'app-1',
+    name: '营销推广平台',
+    appid: 'AK_2024010912345678',
+    todaySuccess: 1500,
+    deliveryRate: 95,
+    price: '0.050 元',
+    score: '100分',
+    status: 'connected',
+    params: [
+      { label: 'ID', value: '113009756' },
+      { label: '企业名', value: '启瑞物业三网' },
+      { label: '开通时间', value: '2023-12-13' },
+      { label: '企业代码', value: 'qrhyyd' },
+      { label: '账号', value: 'qrhyyd' },
+      { label: '密码', value: 'm6yZvZKn', highlight: true },
+      { label: '网关IP', value: '121.40.172.212' },
+      { label: '网关端口', value: '7890' },
+      { label: '接入号', value: '106999999' },
+      { label: '绑定IP', value: '61.129.57.48' },
+      { label: '连接数', value: '1' },
+    ],
+  },
+  {
+    id: 'app-2',
+    name: '客服系统',
+    appid: 'AK_2024010987654321',
+    todaySuccess: 800,
+    deliveryRate: 90,
+    price: '0.060 元',
+    score: '80分',
+    status: 'disconnected',
+    params: [
+      { label: 'ID', value: '113009812' },
+      { label: '企业名', value: '客服系统三网' },
+      { label: '开通时间', value: '2024-01-09' },
+      { label: '企业代码', value: 'kfxt' },
+      { label: '账号', value: 'kfxt' },
+      { label: '密码', value: 'r8xKvP2m', highlight: true },
+      { label: '网关IP', value: '121.40.172.213' },
+      { label: '网关端口', value: '7890' },
+      { label: '接入号', value: '106988888' },
+      { label: '绑定IP', value: '61.129.57.49' },
+      { label: '连接数', value: '1' },
+    ],
+  },
+  {
+    id: 'app-3',
+    name: '验证码服务',
+    appid: 'AK_2024010811223344',
+    todaySuccess: 0,
+    price: '0.040 元',
+    status: 'inactive',
+    params: [
+      { label: 'ID', value: '-' },
+      { label: '企业名', value: '验证码服务' },
+      { label: '开通时间', value: '-' },
+      { label: '企业代码', value: '-' },
+      { label: '账号', value: '-' },
+      { label: '密码', value: '-' },
+      { label: '网关IP', value: '-' },
+      { label: '网关端口', value: '-' },
+      { label: '接入号', value: '-' },
+      { label: '绑定IP', value: '-' },
+      { label: '连接数', value: '-' },
+    ],
+  },
+];
+
+export function ClientApplicationsPage() {
+  const [selectedApp, setSelectedApp] = useState<SmsApplication | null>(null);
+
+  return (
+    <section className="page-stack">
+      <div className="sms-send-title">
+        <span className="sms-send-title__icon">
+          <FileText size={22} />
+        </span>
+        <h1>短信应用列表</h1>
+        <span className="muted">共 {applications.length} 个应用</span>
+      </div>
+
+      <div className="sms-app-grid">
+        {applications.map((application) => (
+          <article className="sms-app-card" key={application.id}>
+            <h2>{application.name}</h2>
+            <dl>
+              <div>
+                <dt>appid</dt>
+                <dd>{application.appid}</dd>
+              </div>
+              <div>
+                <dt>今日发送成功</dt>
+                <dd>{application.todaySuccess.toLocaleString('zh-CN')} 条</dd>
+              </div>
+              <div>
+                <dt>到达率</dt>
+                <dd>{application.deliveryRate ? `${application.deliveryRate}%` : '-'}</dd>
+              </div>
+              <div>
+                <dt>单价</dt>
+                <dd>{application.price}{application.score ? <span>（{application.score}）</span> : null}</dd>
+              </div>
+              <div>
+                <dt>CMPP链接状态</dt>
+                <dd><Tag tone={statusToneMap[application.status]}>{statusLabelMap[application.status]}</Tag></dd>
+              </div>
+            </dl>
+            <Button onClick={() => setSelectedApp(application)} variant="ghost">查看对接参数</Button>
+          </article>
+        ))}
+      </div>
+
+      <Modal
+        footer={<Button icon={<ClipboardCopy size={16} />}>复制参数</Button>}
+        onClose={() => setSelectedApp(null)}
+        open={Boolean(selectedApp)}
+        size="xl"
+        title="接口参数"
+      >
+        {selectedApp ? (
+          <div className="sms-app-param-table">
+            {selectedApp.params.map((item) => (
+              <div key={item.label}>
+                <span>{item.label}</span>
+                <strong className={item.highlight ? 'text-blue' : undefined}>{item.value}</strong>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </Modal>
+    </section>
+  );
+}