fix: connect remaining sms pages to real backend

src/apps/admin/AdminChannelGroupsPage.tsx

@@ -1,104 +1,40 @@
-import { useMemo, useState } from 'react';
-import { Edit3, Layers3, Plus, Search, Trash2, UsersRound } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-import { Breadcrumb, Button, Input, Pagination } from '@/components/ui';
-
-type ChannelGroup = {
-  id: string;
-  name: string;
-  count: number;
-  channels: string[];
-};
-
-const initialGroups: ChannelGroup[] = [
-  {
-    id: 'medical-a',
-    name: '学医三网专用群',
-    count: 16,
-    channels: [
-      '三网行北-黄峰-三网-编号3.3',
-      '三网行北-黄峰（循环号用）-三网-编号3.4',
-      '移动映华北-上海富煌C60289-移动2.7',
-      '三网行北-北京富惠互联-三网-编号3.5',
-      '移动行北-上海悉斯4pp0131-移动2.8',
-    ],
-  },
-  {
-    id: 'medical-b',
-    name: '学医三网专用群',
-    count: 5,
-    channels: [
-      '三网行北-黄峰-三网-编号3.3',
-      '三网行北-黄峰（循环号用）-三网-编号3.4',
-      '移动映华北-上海富煌C60289-移动2.7',
-    ],
-  },
-  {
-    id: 'group-a',
-    name: 'XXXX通道组',
-    count: 3,
-    channels: [
-      '三网行北-黄峰-三网-编号3.3',
-      '三网行北-黄峰（循环号用）-三网-编号3.4',
-    ],
-  },
-  {
-    id: 'group-b',
-    name: 'XXXX通道组',
-    count: 1,
-    channels: ['三网行北-黄峰-三网-编号3.3'],
-  },
-  {
-    id: 'test-a',
-    name: '测试通道组A',
-    count: 8,
-    channels: [
-      '三网行北-黄峰-三网-编号3.3',
-      '移动映华北-上海富煌C60289-移动2.7',
-    ],
-  },
-  {
-    id: 'test-b',
-    name: '测试通道组B',
-    count: 12,
-    channels: ['三网行北-黄峰-三网-编号3.3'],
-  },
-  {
-    id: 'test-c',
-    name: '测试通道组C',
-    count: 6,
-    channels: [
-      '三网行北-黄峰-三网-编号3.3',
-      '三网行北-黄峰（循环号用）-三网-编号3.4',
-    ],
-  },
-  {
-    id: 'test-d',
-    name: '测试通道组D',
-    count: 2,
-    channels: ['三网行北-黄峰-三网-编号3.3'],
-  },
-];
+import { useEffect, useMemo, useState } from 'react';
+import { Layers3, Plus, Search, UsersRound } from 'lucide-react';
+import { Breadcrumb, Button, Input, Modal, Pagination } from '@/components/ui';
+import { adminApi, type ChannelGroup } from '@/api/adminApi';
 
 export function AdminChannelGroupsPage() {
-  const navigate = useNavigate();
   const [groupName, setGroupName] = useState('');
-  const [channelKeyword, setChannelKeyword] = useState('');
-  const [groups, setGroups] = useState(initialGroups);
+  const [groups, setGroups] = useState<ChannelGroup[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [code, setCode] = useState('');
+  const [error, setError] = useState('');
 
-  const filteredGroups = useMemo(() => groups.filter((group) => {
-    const nameMatched = group.name.includes(groupName.trim());
-    const channelMatched = group.channels.some((channel) => channel.includes(channelKeyword.trim()));
-    return nameMatched && channelMatched;
-  }), [channelKeyword, groupName, groups]);
-
-  function resetFilters() {
-    setGroupName('');
-    setChannelKeyword('');
+  function loadData() {
+    adminApi.listChannelGroups()
+      .then((items) => {
+        setGroups(items);
+        setError('');
+      })
+      .catch((failure: Error) => setError(failure.message || '通道组加载失败'));
   }
 
-  function removeGroup(id: string) {
-    setGroups((current) => current.filter((group) => group.id !== id));
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredGroups = useMemo(() => groups.filter((group) => !groupName.trim() || group.name.includes(groupName.trim())), [groupName, groups]);
+
+  function createGroup() {
+    adminApi.createChannelGroup({ code, name, status: 'active' })
+      .then(() => {
+        setModalOpen(false);
+        setName('');
+        setCode('');
+        loadData();
+      })
+      .catch((failure: Error) => setError(failure.message || '通道组创建失败'));
   }
 
   return (
@@ -107,17 +43,17 @@ export function AdminChannelGroupsPage() {
         <div>
           <Breadcrumb items={['短信通道组管理']} />
         </div>
-        <Button icon={<Plus size={16} />} onClick={() => navigate('/admin/channel-groups/new')}>
+        <Button icon={<Plus size={16} />} onClick={() => setModalOpen(true)}>
           添加通道组
         </Button>
       </div>
+      {error ? <p className="form-error">{error}</p> : null}
 
       <section className="surface channel-group-filter">
         <Input label="通道组名称" onChange={(event) => setGroupName(event.target.value)} placeholder="请输入通道组名称" value={groupName} />
-        <Input label="包含通道" onChange={(event) => setChannelKeyword(event.target.value)} placeholder="请输入包含的通道" value={channelKeyword} />
         <div className="channel-group-filter__actions">
-          <Button icon={<Search size={16} />}>查询</Button>
-          <Button onClick={resetFilters} variant="ghost">重置</Button>
+          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
+          <Button onClick={() => setGroupName('')} variant="ghost">重置</Button>
         </div>
       </section>
 
@@ -130,27 +66,37 @@ export function AdminChannelGroupsPage() {
                   <Layers3 size={18} />
                   <strong>{group.name}</strong>
                 </div>
-                <span title="包含通道数"><UsersRound size={16} />{group.count}</span>
+                <span title="包含通道数"><UsersRound size={16} />{group.items?.length ?? 0}</span>
               </header>
               <div className="channel-group-card__body">
-                {group.channels.slice(0, 5).map((channel) => (
-                  <p key={channel}>{channel}</p>
-                ))}
-                {group.count > group.channels.length ? <small>还有 {group.count - group.channels.length} 个通道...</small> : null}
+                {(group.items ?? []).slice(0, 5).map((item, index) => {
+                  const channel = item.channel as { name?: string } | undefined;
+                  return <p key={`${group.id}-${index}`}>{channel?.name ?? '未命名通道'}</p>;
+                })}
+                {(group.items?.length ?? 0) === 0 ? <p className="muted">暂无绑定通道</p> : null}
               </div>
-              <footer>
-                <Button icon={<Edit3 size={16} />} onClick={() => navigate(`/admin/channel-groups/${group.id}/edit`)} size="sm" variant="ghost">
-                  编辑
-                </Button>
-                <Button icon={<Trash2 size={16} />} onClick={() => removeGroup(group.id)} size="sm" variant="danger">
-                  删除
-                </Button>
-              </footer>
             </article>
           ))}
         </div>
         <Pagination nextDisabled={false} page={1} total={filteredGroups.length} />
       </section>
+
+      <Modal
+        footer={(
+          <>
+            <Button onClick={() => setModalOpen(false)} variant="ghost">取消</Button>
+            <Button disabled={!name || !code} onClick={createGroup}>保存</Button>
+          </>
+        )}
+        onClose={() => setModalOpen(false)}
+        open={modalOpen}
+        title="添加通道组"
+      >
+        <div className="admin-system-modal-form">
+          <Input label="通道组编码" onChange={(event) => setCode(event.target.value)} value={code} />
+          <Input label="通道组名称" onChange={(event) => setName(event.target.value)} value={name} />
+        </div>
+      </Modal>
     </div>
   );
 }