fix: polish channel groups and add production deployment

src/apps/client/ClientApplicationsPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { ClipboardCopy, FileText } from 'lucide-react';
 import { clientApi, type ApplicationCmppParams, type ClientSmsApplication } from '@/api/adminApi';
-import { Button, Modal, Tag } from '@/components/ui';
+import { Button, Modal, Pagination, Tag } from '@/components/ui';
 
 type LinkStatus = 'connected' | 'degraded' | 'disconnected' | 'inactive';
 
@@ -61,6 +61,7 @@ export function ClientApplicationsPage() {
   const [params, setParams] = useState<ApplicationCmppParams | null>(null);
   const [loading, setLoading] = useState(true);
   const [paramsLoading, setParamsLoading] = useState(false);
+  const [page, setPage] = useState(1);
   const [error, setError] = useState('');
   const [paramsError, setParamsError] = useState('');
   const [copied, setCopied] = useState(false);
@@ -96,6 +97,14 @@ export function ClientApplicationsPage() {
   }
 
   const selectedRows = useMemo(() => params ? mapParams(params) : [], [params]);
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(applications.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const visibleApplications = applications.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  useEffect(() => {
+    setPage(1);
+  }, [applications.length]);
 
   function copyParams() {
     if (selectedRows.length === 0) {
@@ -123,7 +132,7 @@ export function ClientApplicationsPage() {
       ) : null}
 
       <div className="sms-app-grid">
-        {applications.map((application) => {
+        {visibleApplications.map((application) => {
           const linkStatus = normalizeStatus(application);
           return (
             <article className="sms-app-card" key={application.id}>
@@ -155,6 +164,14 @@ export function ClientApplicationsPage() {
           );
         })}
       </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={applications.length}
+      />
 
       <Modal
         footer={<Button disabled={!params} icon={<ClipboardCopy size={16} />} onClick={copyParams}>{copied ? '已复制' : '复制参数'}</Button>}