feat: wire admin workflows to real APIs

src/apps/admin/AdminGlobalBlacklistPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Trash2 } from 'lucide-react';
-import { Breadcrumb, Button, Table, type TableColumn } from '@/components/ui';
+import { Plus, Search, Trash2 } from 'lucide-react';
+import { Breadcrumb, Button, Input, Modal, Table, Textarea, type TableColumn } from '@/components/ui';
 
 type GlobalBlacklistItem = {
   id: string;
@@ -17,8 +17,22 @@ const initialItems: GlobalBlacklistItem[] = [
   { id: 'GBL20260630004', phone: '15250668026', createdAt: '2026-06-25 14:12:18', reason: '高频退订', expiredAt: '2026-08-25 23:59:59' },
 ];
 
+function nowText() {
+  return new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-');
+}
+
 export function AdminGlobalBlacklistPage() {
   const [items, setItems] = useState(initialItems);
+  const [keyword, setKeyword] = useState('');
+  const [phone, setPhone] = useState('');
+  const [reason, setReason] = useState('');
+  const [expiredAt, setExpiredAt] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const filteredItems = useMemo(() => items.filter((item) => {
+    const text = [item.phone, item.reason, item.expiredAt].join(' ');
+    return !keyword || text.includes(keyword);
+  }), [items, keyword]);
 
   const columns = useMemo<Array<TableColumn<GlobalBlacklistItem>>>(() => [
     { key: 'phone', title: '手机号码', width: '180px', render: (record) => <strong>{record.phone}</strong> },
@@ -38,6 +52,25 @@ export function AdminGlobalBlacklistPage() {
     },
   ], []);
 
+  function resetForm() {
+    setPhone('');
+    setReason('');
+    setExpiredAt('');
+  }
+
+  function addItem() {
+    const nextItem: GlobalBlacklistItem = {
+      id: `GBL${Date.now()}`,
+      phone: phone || '待补充号码',
+      createdAt: nowText(),
+      reason: reason || '运营手动加入',
+      expiredAt: expiredAt || '永久有效',
+    };
+    setItems((current) => [nextItem, ...current]);
+    resetForm();
+    setModalOpen(false);
+  }
+
   return (
     <section className="page-stack admin-security-page">
       <div className="page-heading">
@@ -45,11 +78,44 @@ export function AdminGlobalBlacklistPage() {
           <Breadcrumb items={['安全控制', '全局黑名单']} />
           <h1>全局黑名单</h1>
         </div>
+        <Button icon={<Plus size={16} />} onClick={() => setModalOpen(true)}>添加黑名单</Button>
+      </div>
+
+      <div className="surface admin-security-filter">
+        <Input
+          label="搜索"
+          onChange={(event) => setKeyword(event.target.value)}
+          placeholder="搜索手机号、原因或过期时间"
+          prefix={<Search size={16} />}
+          value={keyword}
+        />
+        <div className="admin-security-filter__actions">
+          <Button icon={<Search size={16} />}>查询</Button>
+          <Button onClick={() => setKeyword('')} variant="ghost">重置</Button>
+        </div>
       </div>
 
       <div className="surface admin-security-table-card">
-        <Table columns={columns} data={items} emptyText="暂无全局黑名单记录" rowKey="id" />
+        <Table columns={columns} data={filteredItems} emptyText="暂无全局黑名单记录" rowKey="id" />
       </div>
+
+      <Modal
+        footer={(
+          <>
+            <Button onClick={() => setModalOpen(false)} variant="ghost">取消</Button>
+            <Button onClick={addItem}>确认添加</Button>
+          </>
+        )}
+        onClose={() => setModalOpen(false)}
+        open={modalOpen}
+        title="添加全局黑名单"
+      >
+        <div className="admin-security-form">
+          <Input label="手机号码" onChange={(event) => setPhone(event.target.value)} placeholder="请输入手机号码" value={phone} />
+          <Input label="过期时间" onChange={(event) => setExpiredAt(event.target.value)} placeholder="例如 2026-12-31 23:59:59" value={expiredAt} />
+          <Textarea label="入库原因" onChange={(event) => setReason(event.target.value)} placeholder="请输入入库原因" rows={3} value={reason} />
+        </div>
+      </Modal>
     </section>
   );
 }