fix: polish channel groups and add production deployment

src/apps/client/ClientTemplatesPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Edit3, MessageSquare, Plus, Search, Trash2 } from 'lucide-react';
-import { Button, Input, Modal, Select, Tag, Textarea } from '@/components/ui';
+import { Button, Input, Modal, Pagination, Select, Tag, Textarea } from '@/components/ui';
 import { clientApi, type ClientSmsApplication, type ClientSmsSignature, type ClientSmsTemplate } from '@/api/adminApi';
 
 type TemplateVariable = {
@@ -180,6 +180,7 @@ export function ClientTemplatesPage() {
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(true);
   const [modalTemplate, setModalTemplate] = useState<ClientSmsTemplate | 'new' | null>(null);
+  const [page, setPage] = useState(1);
 
   function loadData() {
     setLoading(true);
@@ -201,6 +202,14 @@ export function ClientTemplatesPage() {
   const filteredTemplates = useMemo(() => templates.filter((item) => (
     !keyword || [item.name, item.content, item.application?.name, item.signature?.name].join(' ').includes(keyword)
   )), [keyword, templates]);
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(filteredTemplates.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const visibleTemplates = filteredTemplates.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  useEffect(() => {
+    setPage(1);
+  }, [filteredTemplates.length, keyword]);
 
   async function saveTemplate(state: TemplateFormState) {
     const existing = modalTemplate && modalTemplate !== 'new' ? modalTemplate : null;
@@ -254,7 +263,7 @@ export function ClientTemplatesPage() {
       {error ? <p className="form-error">{error}</p> : null}
 
       <div className="template-card-grid">
-        {filteredTemplates.map((template) => {
+        {visibleTemplates.map((template) => {
           const variables = template.variables?.map((item) => item.name) ?? extractVariables(template.content).map((item) => item.name);
           return (
             <article className="template-card template-card--green" key={template.id}>
@@ -283,6 +292,14 @@ export function ClientTemplatesPage() {
           );
         })}
       </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={filteredTemplates.length}
+      />
       {!loading && !error && filteredTemplates.length === 0 ? <p className="muted">暂无短信模板。</p> : null}
 
       {modalTemplate ? (