feat: wire admin workflows to real APIs

src/apps/client/ClientSystemLogsPage.tsx

@@ -3,6 +3,7 @@ import { CalendarDays, Download, FileText, Search } from 'lucide-react';
 import {
   Button,
   Input,
+  Pagination,
   Select,
   Table,
   Tag,
@@ -53,6 +54,8 @@ export function ClientSystemLogsPage() {
   const [level, setLevel] = useState('all');
   const [module, setModule] = useState('all');
   const [range, setRange] = useState('today');
+  const [page, setPage] = useState(1);
+  const pageSize = 5;
 
   const moduleOptions = useMemo(() => {
     const modules = Array.from(new Set(logsSeed.map((item) => item.module)));
@@ -66,6 +69,9 @@ export function ClientSystemLogsPage() {
     const matchesModule = module === 'all' || item.module === module;
     return matchesKeyword && matchesLevel && matchesModule;
   });
+  const totalPages = Math.max(1, Math.ceil(filteredLogs.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const pagedLogs = filteredLogs.slice((currentPage - 1) * pageSize, currentPage * pageSize);
 
   const columns = useMemo<Array<TableColumn<SystemLog>>>(() => [
     { key: 'time', title: '时间', width: '190px', render: (record) => <span className="muted">{record.time}</span> },
@@ -89,13 +95,13 @@ export function ClientSystemLogsPage() {
 
       <div className="system-log-filters">
         <Input
-          onChange={(event) => setKeyword(event.target.value)}
+          onChange={(event) => { setKeyword(event.target.value); setPage(1); }}
           placeholder="搜索操作人、操作或详情"
           prefix={<Search size={16} />}
           value={keyword}
         />
         <Select
-          onChange={(event) => setLevel(event.target.value)}
+          onChange={(event) => { setLevel(event.target.value); setPage(1); }}
           options={[
             { label: '全部级别', value: 'all' },
             { label: '信息', value: 'info' },
@@ -105,7 +111,7 @@ export function ClientSystemLogsPage() {
           ]}
           value={level}
         />
-        <Select onChange={(event) => setModule(event.target.value)} options={moduleOptions} value={module} />
+        <Select onChange={(event) => { setModule(event.target.value); setPage(1); }} options={moduleOptions} value={module} />
       </div>
 
       <div className="system-log-range">
@@ -128,7 +134,15 @@ export function ClientSystemLogsPage() {
       </div>
 
       <div className="surface system-table-card">
-        <Table columns={columns} data={filteredLogs} emptyText="暂无系统日志" rowKey="id" />
+        <Table columns={columns} data={pagedLogs} emptyText="暂无系统日志" rowKey="id" />
+        <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={filteredLogs.length}
+        />
       </div>
     </section>
   );