fix: polish channel groups and add production deployment

src/apps/admin/AdminChannelsPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Copy, Eye, FileText, Info, Pencil, Plus, Power, Search, Send, Trash2 } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { adminApi, type AdminChannel, type ChannelConnectionLogResponse, type CmppConnectionState } from '@/api/adminApi';
-import { Breadcrumb, Button, Input, Modal, Select, Tag, Textarea } from '@/components/ui';
+import { Breadcrumb, Button, Input, Modal, Pagination, Select, Tag, Textarea } from '@/components/ui';
 
 type Carrier = 'mobile' | 'unicom' | 'telecom' | 'all';
 type ChannelStatus = 'normal' | 'stopped' | 'connecting' | 'failed';
@@ -362,6 +362,8 @@ export function AdminChannelsPage() {
   const [testChannel, setTestChannel] = useState<SmsChannel | null>(null);
   const [confirmAction, setConfirmAction] = useState<ChannelConfirmAction | null>(null);
   const [logState, setLogState] = useState<ChannelLogState | null>(null);
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
 
   function loadChannels() {
     adminApi.listChannels()
@@ -389,6 +391,13 @@ export function AdminChannelsPage() {
     }),
     [carrier, channels, keyword, status],
   );
+  const totalPages = Math.max(1, Math.ceil(filteredChannels.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const visibleChannels = filteredChannels.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  useEffect(() => {
+    setPage(1);
+  }, [carrier, channels.length, keyword, status]);
 
   async function upsertChannel(nextChannel: SmsChannel) {
     try {
@@ -495,7 +504,7 @@ export function AdminChannelsPage() {
           <span>今日发送质量</span>
           <span>操作</span>
         </div>
-        {filteredChannels.map((channel) => (
+        {visibleChannels.map((channel) => (
           <article className="sms-channel-table__row" key={channel.id}>
             <div className="sms-channel-identity">
               <strong>{channel.name}</strong>
@@ -531,13 +540,14 @@ export function AdminChannelsPage() {
             </div>
           </article>
         ))}
-        <div className="sms-channel-pagination">
-          <Select options={[{ label: '10 条/页', value: '10' }, { label: '20 条/页', value: '20' }]} value="10" />
-          <Button disabled size="sm" variant="ghost">上一页</Button>
-          <Button size="sm" variant="secondary">1</Button>
-          <Button size="sm" variant="ghost">2</Button>
-          <Button size="sm" variant="ghost">下一页</Button>
-        </div>
+        <Pagination
+          nextDisabled={currentPage >= totalPages}
+          onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
+          onPrevious={() => setPage((value) => Math.max(1, value - 1))}
+          page={currentPage}
+          previousDisabled={currentPage <= 1}
+          total={filteredChannels.length}
+        />
       </div>
 
       {modal ? (