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,71 @@
+import { useMemo, useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button, Table, Tag, type TableColumn } from '@/components/ui';
+
+type SensitiveLevel = 'low' | 'medium' | 'high';
+
+type SensitiveWordItem = {
+  id: string;
+  word: string;
+  category: string;
+  level: SensitiveLevel;
+  createdAt: string;
+  updatedAt: string;
+};
+
+const levelLabelMap: Record<SensitiveLevel, string> = {
+  low: '低',
+  medium: '中',
+  high: '高',
+};
+
+const levelToneMap: Record<SensitiveLevel, 'success' | 'warning' | 'danger'> = {
+  low: 'success',
+  medium: 'warning',
+  high: 'danger',
+};
+
+const initialItems: SensitiveWordItem[] = [
+  { id: 'SW20260630001', word: '高息贷款', category: '金融营销', level: 'high', createdAt: '2026-06-20 09:12:18', updatedAt: '2026-06-28 16:24:10' },
+  { id: 'SW20260630002', word: '中奖链接', category: '欺诈风险', level: 'high', createdAt: '2026-06-19 13:40:22', updatedAt: '2026-06-26 11:09:45' },
+  { id: 'SW20260630003', word: '限时返利', category: '营销规范', level: 'medium', createdAt: '2026-06-18 10:30:00', updatedAt: '2026-06-24 15:18:32' },
+  { id: 'SW20260630004', word: '免费领取', category: '普通营销', level: 'low', createdAt: '2026-06-17 17:06:51', updatedAt: '2026-06-21 09:05:14' },
+];
+
+export function AdminSensitiveWordsPage() {
+  const [items, setItems] = useState(initialItems);
+
+  const columns = useMemo<Array<TableColumn<SensitiveWordItem>>>(() => [
+    { key: 'word', title: '敏感词', width: '180px', render: (record) => <strong>{record.word}</strong> },
+    { key: 'category', title: '分类', width: '160px', render: (record) => record.category },
+    { key: 'level', title: '级别', width: '120px', render: (record) => <Tag tone={levelToneMap[record.level]}>{levelLabelMap[record.level]}</Tag> },
+    { key: 'createdAt', title: '创建时间', width: '190px', render: (record) => record.createdAt },
+    { key: 'updatedAt', title: '更新时间', width: '190px', render: (record) => record.updatedAt },
+    {
+      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>
+  );
+}