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,55 @@
+import { useMemo, useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button, Table, type TableColumn } from '@/components/ui';
+
+type GlobalBlacklistItem = {
+  id: string;
+  phone: string;
+  createdAt: string;
+  reason: string;
+  expiredAt: string;
+};
+
+const initialItems: GlobalBlacklistItem[] = [
+  { id: 'GBL20260630001', phone: '13500000888', createdAt: '2026-06-28 11:20:05', reason: '多企业投诉号码', expiredAt: '2026-12-28 23:59:59' },
+  { id: 'GBL20260630002', phone: '13755558888', createdAt: '2026-06-27 16:05:12', reason: '黑名单同步导入', expiredAt: '2026-09-27 23:59:59' },
+  { id: 'GBL20260630003', phone: '18800000555', createdAt: '2026-06-26 09:44:30', reason: '监管要求拦截', expiredAt: '2027-06-26 23:59:59' },
+  { id: 'GBL20260630004', phone: '15250668026', createdAt: '2026-06-25 14:12:18', reason: '高频退订', expiredAt: '2026-08-25 23:59:59' },
+];
+
+export function AdminGlobalBlacklistPage() {
+  const [items, setItems] = useState(initialItems);
+
+  const columns = useMemo<Array<TableColumn<GlobalBlacklistItem>>>(() => [
+    { key: 'phone', title: '手机号码', width: '180px', render: (record) => <strong>{record.phone}</strong> },
+    { key: 'createdAt', title: '入库时间', width: '190px', render: (record) => record.createdAt },
+    { key: 'reason', title: '入库原因', render: (record) => record.reason },
+    { key: 'expiredAt', title: '过期时间', width: '190px', render: (record) => record.expiredAt },
+    {
+      key: 'actions',
+      title: '操作',
+      width: '110px',
+      align: 'right',
+      render: (record) => (
+        <Button icon={<Trash2 size={15} />} onClick={() => setItems((current) => current.filter((item) => item.id !== record.id))} size="sm" variant="danger">
+          删除
+        </Button>
+      ),
+    },
+  ], []);
+
+  return (
+    <section className="page-stack admin-security-page">
+      <div className="page-heading">
+        <div>
+          <div className="breadcrumb-line">安全控制 / <strong>全局黑名单</strong></div>
+          <h1>全局黑名单</h1>
+        </div>
+      </div>
+
+      <div className="surface admin-security-table-card">
+        <Table columns={columns} data={items} emptyText="暂无全局黑名单记录" rowKey="id" />
+      </div>
+    </section>
+  );
+}