fix: paginate operational list pages

src/apps/client/ClientTemplatesPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Edit3, MessageSquare, Plus, Search, Trash2 } from 'lucide-react';
 import { Button, DeleteRiskAction, Input, Modal, Pagination, Select, Tag, Textarea } from '@/components/ui';
 import { clientApi, type ClientSmsApplication, type ClientSmsSignatureView, type ClientSmsTemplate } from '@/api/adminApi';
@@ -217,13 +217,16 @@ export function ClientTemplatesPage() {
   const [loading, setLoading] = useState(true);
   const [modalTemplate, setModalTemplate] = useState<ClientSmsTemplate | 'new' | null>(null);
   const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const pageSize = 10;
 
-  function loadData() {
+  function loadData(targetPage = page) {
     setLoading(true);
-    Promise.all([clientApi.listApplications(), clientApi.listTemplates({ includeHistory: true }), clientApi.listSignatures()])
-      .then(([applicationItems, templateItems, signatureItems]) => {
+    Promise.all([clientApi.listApplicationOptions(), clientApi.listTemplatesPage({ includeHistory: true, keyword: keyword.trim() || undefined, page: targetPage, pageSize }), clientApi.listSignatureOptions()])
+      .then(([applicationItems, templateResult, signatureItems]) => {
         setApplications(applicationItems.filter((item) => item.status === 'active'));
-        setTemplates(templateItems.filter((item) => item.auditStatus !== 'deleted' && item.auditStatus !== 'disabled'));
+        setTemplates(templateResult.items.filter((item) => item.auditStatus !== 'deleted' && item.auditStatus !== 'disabled'));
+        setTotal(templateResult.total);
         setSignatures(signatureItems);
         setError('');
       })
@@ -232,20 +235,14 @@ export function ClientTemplatesPage() {
   }
 
   useEffect(() => {
-    loadData();
-  }, []);
+    const timer = window.setTimeout(() => loadData(page), 300);
+    return () => window.clearTimeout(timer);
+  }, [page, keyword]);
 
-  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 filteredTemplates = templates;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = Math.min(page, totalPages);
-  const visibleTemplates = filteredTemplates.slice((currentPage - 1) * pageSize, currentPage * pageSize);
-
-  useEffect(() => {
-    setPage(1);
-  }, [filteredTemplates.length, keyword]);
+  const visibleTemplates = templates;
 
   async function saveTemplate(state: TemplateFormState) {
     const existing = modalTemplate && modalTemplate !== 'new' ? modalTemplate : null;
@@ -282,7 +279,7 @@ export function ClientTemplatesPage() {
 
       <div className="template-toolbar">
         <Input
-          onChange={(event) => setKeyword(event.target.value)}
+          onChange={(event) => { setKeyword(event.target.value); setPage(1); }}
           placeholder="搜索模板名称、应用、签名或内容"
           prefix={<Search size={17} />}
           value={keyword}
@@ -327,7 +324,7 @@ export function ClientTemplatesPage() {
         totalPages={totalPages}
         onPageChange={setPage}
         previousDisabled={currentPage <= 1}
-        total={filteredTemplates.length}
+        total={total}
       />
       {!loading && !error && filteredTemplates.length === 0 ? <p className="muted">暂无短信模板。</p> : null}