fix: paginate operational list pages

src/apps/admin/AdminSmsUplinkRecordsPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Search, Smartphone } from 'lucide-react';
 import { adminApi, type SmsMessageRecord, type SmsUplinkMatchCandidate, type SmsUplinkMessage } from '@/api/adminApi';
 import {
@@ -7,6 +7,7 @@ import {
   DateRangeInput,
   Input,
   Modal,
+  Pagination,
   Table,
   type DateRangeValue,
   type TableColumn,
@@ -210,12 +211,23 @@ export function AdminSmsUplinkRecordsPage() {
   const [error, setError] = useState('');
   const [detailError, setDetailError] = useState('');
   const [claimError, setClaimError] = useState('');
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
 
-  function loadData() {
+  function loadData(targetPage = page, filters = { phoneKeyword, contentKeyword, dateRange }) {
     setLoading(true);
-    adminApi.listAdminUplinkMessages()
-      .then((items) => {
-        setMessages(items);
+    adminApi.listAdminUplinkMessagesPage({
+      phoneNumber: filters.phoneKeyword.trim() || undefined,
+      keyword: filters.contentKeyword.trim() || undefined,
+      startTime: filters.dateRange.start ? `${filters.dateRange.start}T00:00:00+08:00` : undefined,
+      endTime: filters.dateRange.end ? `${filters.dateRange.end}T23:59:59.999+08:00` : undefined,
+      page: targetPage,
+      pageSize,
+    })
+      .then((result) => {
+        setMessages(result.items);
+        setTotal(result.total);
         setError('');
       })
       .catch((reason: Error) => setError(reason.message || '短信上行记录加载失败'))
@@ -233,32 +245,22 @@ export function AdminSmsUplinkRecordsPage() {
     }
 
     setMatching(true);
-    adminApi.listOperationMessages({ tenantId: message.tenantId ?? undefined, messageId: message.messageId })
-      .then((items) => setMatchedRecords(items))
+    adminApi.listOperationMessages({ tenantId: message.tenantId ?? undefined, messageId: message.messageId, page: 1, pageSize: 10 })
+      .then((result) => setMatchedRecords(result.items))
       .catch((reason: Error) => setDetailError(reason.message || '匹配发送记录加载失败'))
       .finally(() => setMatching(false));
   }
 
   useEffect(() => {
-    loadData();
-  }, []);
-
-  const filteredMessages = useMemo(
-    () => messages.filter((item) => {
-      const receivedDate = getDate(item.receivedAt);
-      const matchesStartDate = !dateRange.start || receivedDate >= dateRange.start;
-      const matchesEndDate = !dateRange.end || receivedDate <= dateRange.end;
-      const matchesPhone = !phoneKeyword || item.phoneNumber.includes(phoneKeyword);
-      const matchesContent = !contentKeyword || item.content.includes(contentKeyword);
-      return matchesStartDate && matchesEndDate && matchesPhone && matchesContent;
-    }),
-    [contentKeyword, dateRange.end, dateRange.start, messages, phoneKeyword],
-  );
+    loadData(page);
+  }, [page]);
 
   function resetFilters() {
     setDateRange({});
     setPhoneKeyword('');
     setContentKeyword('');
+    setPage(1);
+    loadData(1, { phoneKeyword: '', contentKeyword: '', dateRange: {} });
   }
 
   function handleClaim(candidate: SmsUplinkMatchCandidate) {
@@ -271,7 +273,7 @@ export function AdminSmsUplinkRecordsPage() {
       .then((updated) => {
         setMessages((items) => items.map((item) => (item.id === updated.id ? { ...item, ...updated } : item)));
         setSelectedMessage((current) => (current && current.id === updated.id ? { ...current, ...updated } : current));
-        loadData();
+        loadData(page);
       })
       .catch((reason: Error) => setClaimError(reason.message || '上行认领失败'))
       .finally(() => setClaimingId(''));
@@ -316,7 +318,7 @@ export function AdminSmsUplinkRecordsPage() {
         <Input label="手机号码" onChange={(event) => setPhoneKeyword(event.target.value)} prefix={<Smartphone size={16} />} value={phoneKeyword} />
         <Input label="上行内容" onChange={(event) => setContentKeyword(event.target.value)} value={contentKeyword} />
         <div className="admin-uplink-filter__actions">
-          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
+          <Button icon={<Search size={16} />} onClick={() => { setPage(1); loadData(1); }}>查询</Button>
           <Button onClick={resetFilters} variant="ghost">重置</Button>
         </div>
       </div>
@@ -324,7 +326,8 @@ export function AdminSmsUplinkRecordsPage() {
       {error ? <p className="form-error">{error}</p> : null}
 
       <div className="surface admin-uplink-table-card">
-        <Table columns={columns} data={loading ? [] : filteredMessages} emptyText={loading ? '正在加载真实上行短信记录...' : '暂无上行短信记录'} rowKey="id" />
+        <Table columns={columns} data={loading ? [] : messages} emptyText={loading ? '正在加载真实上行短信记录...' : '暂无上行短信记录'} pagination={false} rowKey="id" />
+        <Pagination page={page} totalPages={Math.max(1, Math.ceil(total / pageSize))} total={total} onPageChange={setPage} onPrevious={() => setPage((value) => Math.max(1, value - 1))} onNext={() => setPage((value) => Math.min(Math.max(1, Math.ceil(total / pageSize)), value + 1))} previousDisabled={page <= 1} nextDisabled={page >= Math.max(1, Math.ceil(total / pageSize))} />
       </div>
 
       {selectedMessage ? (