fix: paginate operational list pages

src/apps/client/ClientSendDetailPage.tsx

@@ -60,18 +60,26 @@ export function ClientSendDetailPage() {
   const [contentKeyword, setContentKeyword] = useState('');
   const [phoneKeyword, setPhoneKeyword] = useState('');
   const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [applications, setApplications] = useState<Array<{ id: string; name: string }>>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
-  function loadData() {
+  function loadData(targetPage = page) {
     setLoading(true);
     clientApi.listMessages({
       applicationId: applicationId === 'all' ? undefined : applicationId,
       phoneNumber: phoneKeyword || undefined,
       status: status === 'all' ? undefined : status,
+      contentKeyword: contentKeyword || undefined,
+      queuedAtFrom: dateRange.start || undefined,
+      queuedAtTo: dateRange.end || undefined,
+      page: targetPage,
+      pageSize: 10,
     })
-      .then((items) => {
-        setRecords(items);
+      .then((result) => {
+        setRecords(result.items);
+        setTotal(result.total);
         setError('');
       })
       .catch((reason: Error) => setError(reason.message || '短信发送详情加载失败'))
@@ -79,37 +87,31 @@ export function ClientSendDetailPage() {
   }
 
   useEffect(() => {
-    loadData();
-  }, [applicationId, phoneKeyword, status]);
+    loadData(page);
+  }, [applicationId, contentKeyword, dateRange.end, dateRange.start, page, phoneKeyword, status]);
+
+  useEffect(() => {
+    clientApi.listApplicationOptions()
+      .then((items) => setApplications(items.map((item) => ({ id: item.id, name: item.name }))))
+      .catch((reason: Error) => setError(reason.message || '应用列表加载失败'));
+  }, []);
 
   const applicationOptions = useMemo(() => {
-    const applications = new Map<string, string>();
-    records.forEach((item) => {
-      if (item.applicationId) {
-        applications.set(item.applicationId, item.application?.name ?? item.applicationId);
-      }
-    });
     return [
       { label: '全部应用', value: 'all' },
-      ...Array.from(applications.entries()).map(([value, label]) => ({ label, value })),
+      ...applications.map((item) => ({ label: item.name, value: item.id })),
     ];
-  }, [records]);
+  }, [applications]);
 
-  const filteredRows = records.filter((item) => {
-    const sentDate = getDate(item.queuedAt);
-    const matchesStartDate = !dateRange.start || sentDate >= dateRange.start;
-    const matchesEndDate = !dateRange.end || sentDate <= dateRange.end;
-    const matchesContent = !contentKeyword || item.content.includes(contentKeyword);
-    return matchesStartDate && matchesEndDate && matchesContent;
-  });
+  const filteredRows = records;
   const pageSize = 10;
-  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize));
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = Math.min(page, totalPages);
-  const visibleRows = filteredRows.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+  const visibleRows = filteredRows;
 
   useEffect(() => {
     setPage(1);
-  }, [contentKeyword, dateRange.end, dateRange.start, records.length]);
+  }, [applicationId, contentKeyword, dateRange.end, dateRange.start, phoneKeyword, status]);
 
   return (
     <section className="page-stack">
@@ -122,7 +124,7 @@ export function ClientSendDetailPage() {
 
       <QueryPanel
         title="查询条件"
-        summary={<>共找到 <strong>{filteredRows.length}</strong> 条发送记录</>}
+        summary={<>共找到 <strong>{total}</strong> 条发送记录</>}
       >
         <Select label="应用名称" onChange={(event) => setApplicationId(event.target.value)} options={applicationOptions} value={applicationId} />
         <DateRangeInput label="发送时间" onChange={setDateRange} value={dateRange} />
@@ -232,7 +234,7 @@ export function ClientSendDetailPage() {
           totalPages={totalPages}
           onPageChange={setPage}
           previousDisabled={currentPage <= 1}
-          total={filteredRows.length}
+          total={total}
         />
       </div>
     </section>