fix: paginate operational list pages

src/apps/admin/AdminReportRecordsPage.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Clock3, Eye, Search } from 'lucide-react';
 import { adminApi, type ReportRecord } from '@/api/adminApi';
-import { Breadcrumb, Button, DateRangeInput, Input, Modal, Select, Table, Tag, type DateRangeValue, type TableColumn } from '@/components/ui';
+import { Breadcrumb, Button, DateRangeInput, Input, Modal, Pagination, Select, Table, Tag, type DateRangeValue, type TableColumn } from '@/components/ui';
 
 const statusTone: Record<string, 'neutral' | 'info' | 'success' | 'warning' | 'danger'> = {
   pending: 'neutral',
@@ -71,28 +71,30 @@ export function AdminReportRecordsPage() {
   const [reportType, setReportType] = useState('all');
   const [detail, setDetail] = useState<ReportRecord | null>(null);
   const [error, setError] = useState('');
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const pageSize = 10;
 
-  function loadData() {
-    adminApi.listReportRecords()
-      .then((items) => {
-        setRecords(items);
+  function loadData(targetPage = page) {
+    adminApi.listReportRecordsPage({
+      keyword: keyword || undefined,
+      reportType: reportType === 'all' ? undefined : reportType as 'signature' | 'drainage',
+      createdAtFrom: dateRange.start || undefined,
+      createdAtTo: dateRange.end || undefined,
+      page: targetPage,
+      pageSize,
+    })
+      .then((result) => {
+        setRecords(result.items);
+        setTotal(result.total);
         setError('');
       })
       .catch((failure: Error) => setError(failure.message || '报备记录加载失败'));
   }
 
   useEffect(() => {
-    loadData();
-  }, []);
-
-  const filteredRecords = useMemo(() => records.filter((record) => {
-    const text = `${record.taskId}${record.channel?.name ?? ''}${record.action}${actionLabel[record.action] ?? ''}${recordSource(record)}${record.reason ?? ''}${record.task?.signature?.name ?? ''}${record.task?.signature?.purpose ?? ''}${record.task?.drainageInfo?.siteName ?? ''}${record.task?.drainageInfo?.url ?? ''}${record.task?.drainageInfo?.remark ?? ''}`;
-    const date = record.createdAt?.slice(0, 10) ?? '';
-    return (!keyword || text.includes(keyword))
-      && (!dateRange.start || date >= dateRange.start)
-      && (!dateRange.end || date <= dateRange.end)
-      && (reportType === 'all' || record.task?.reportType === reportType);
-  }), [dateRange.end, dateRange.start, keyword, records, reportType]);
+    loadData(page);
+  }, [page]);
 
   const columns: Array<TableColumn<ReportRecord>> = [
     { key: 'task', title: '报备任务号', width: '190px', render: (record) => <strong className="admin-task-id">{record.taskId}</strong> },
@@ -122,14 +124,24 @@ export function AdminReportRecordsPage() {
         <Select label="报备类型" onChange={(event) => setReportType(event.target.value)} options={[{ label: '全部类型', value: 'all' }, { label: '签名报备', value: 'signature' }, { label: '引流信息报备', value: 'drainage' }]} value={reportType} />
         <DateRangeInput label="提交时间" onChange={setDateRange} value={dateRange} />
         <div className="admin-task-filter__actions">
-          <Button icon={<Search size={16} />} onClick={loadData}>查询</Button>
+          <Button icon={<Search size={16} />} onClick={() => { if (page !== 1) setPage(1); else loadData(1); }}>查询</Button>
           <Button onClick={() => { setKeyword(''); setDateRange({}); setReportType('all'); }} variant="ghost">重置</Button>
         </div>
       </div>
 
       <div className="surface admin-task-table-card report-task-table-card">
-        <Table columns={columns} data={filteredRecords} emptyText="暂无报备记录" rowKey="id" />
+        <Table columns={columns} data={records} emptyText="暂无报备记录" pagination={false} rowKey="id" />
       </div>
+      <Pagination
+        nextDisabled={page * pageSize >= total}
+        onNext={() => setPage((current) => current + 1)}
+        onPageChange={setPage}
+        onPrevious={() => setPage((current) => Math.max(1, current - 1))}
+        page={page}
+        previousDisabled={page <= 1}
+        total={total}
+        totalPages={Math.max(1, Math.ceil(total / pageSize))}
+      />
 
       {detail ? <RecordDetailModal onClose={() => setDetail(null)} record={detail} /> : null}
     </section>