feat(pagination): persist page size + add 200/500 options

Add usePersistedPageSize hook (localStorage-backed, allowlist-validated)
and apply it across the paginated tables: Accounts, OperationsErrors,
PromptFilter logs. Usage logs were already updated in the previous
commit's Usage.tsx changes.

The default options list now includes 200 and 500 alongside the existing
10/20/50/100, addressing the need to scan more rows at a time. Per-page
choice now survives reloads and reopen (keyed per page name, e.g.
codex2api_page_size_accounts).

SchedulerBoard (card grid, base size 12) and PromptFilter's built-in
rule table (fixed small set) are intentionally untouched.

Closes #147

Author: james-6-23

frontend/src/hooks/usePersistedPageSize.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const STORAGE_PREFIX = 'codex2api_page_size_'
+
+/**
+ * usePersistedPageSize 提供按 key 持久化的分页大小状态。
+ *
+ * - 初值优先使用 localStorage 中保存的值;若不在 allowed 中或非法则回落 fallback。
+ * - 调用 setPageSize 时同步写回 localStorage。
+ *
+ * @param key       页面/表格的标识(写入 localStorage 时会加 codex2api_page_size_ 前缀)
+ * @param fallback  默认值
+ * @param allowed   合法 pageSize 集合;不在其中的持久化值会被忽略
+ */
+export function usePersistedPageSize(
+  key: string,
+  fallback: number,
+  allowed: number[],
+): [number, (next: number) => void] {
+  const storageKey = `${STORAGE_PREFIX}${key}`
+
+  const readInitial = (): number => {
+    if (typeof window === 'undefined') return fallback
+    try {
+      const raw = window.localStorage.getItem(storageKey)
+      if (!raw) return fallback
+      const parsed = Number.parseInt(raw, 10)
+      if (Number.isFinite(parsed) && allowed.includes(parsed)) {
+        return parsed
+      }
+    } catch {
+      /* localStorage 不可用时静默回落 */
+    }
+    return fallback
+  }
+
+  const [pageSize, setPageSizeState] = useState<number>(readInitial)
+
+  // allowed 变化时,如果当前值不再合法则回落到 fallback
+  useEffect(() => {
+    if (!allowed.includes(pageSize)) {
+      setPageSizeState(fallback)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowed.join(',')])
+
+  const setPageSize = useCallback(
+    (next: number) => {
+      if (!allowed.includes(next)) return
+      setPageSizeState(next)
+      try {
+        window.localStorage.setItem(storageKey, String(next))
+      } catch {
+        /* 静默 */
+      }
+    },
+    [storageKey, allowed],
+  )
+
+  return [pageSize, setPageSize]
+}
+
+/** 全站统一的可选分页大小,可在调用方按需裁剪。 */
+export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100, 200, 500]

frontend/src/pages/Accounts.tsx

@@ -9,6 +9,10 @@ import StatusBadge from "../components/StatusBadge";
 import ToastNotice from "../components/ToastNotice";
 import { useDataLoader, type LoadOptions } from "../hooks/useDataLoader";
 import { useConfirmDialog } from "../hooks/useConfirmDialog";
+import {
+  DEFAULT_PAGE_SIZE_OPTIONS,
+  usePersistedPageSize,
+} from "../hooks/usePersistedPageSize";
 import { useToast } from "../hooks/useToast";
 import type {
   AccountRow,
@@ -249,10 +253,14 @@ async function runAccountBatch(
 
 export default function Accounts() {
   const { t } = useTranslation();
-  const pageSizeOptions = [10, 20, 50, 100];
+  const pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
   const [showAdd, setShowAdd] = useState(false);
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
+  const [pageSize, setPageSize] = usePersistedPageSize(
+    "accounts",
+    20,
+    pageSizeOptions,
+  );
   const [statusFilter, setStatusFilter] = useState<
     | "all"
     | "normal"

frontend/src/pages/OperationsErrors.tsx

@@ -21,6 +21,7 @@ import StateShell from '../components/StateShell'
 import ToastNotice from '../components/ToastNotice'
 import { useDataLoader } from '../hooks/useDataLoader'
 import { useToast } from '../hooks/useToast'
+import { DEFAULT_PAGE_SIZE_OPTIONS, usePersistedPageSize } from '../hooks/usePersistedPageSize'
 import { getTimeRangeISO, type TimeRangeKey } from '../lib/timeRange'
 import { formatCompactEmail } from '../lib/utils'
 import { formatBeijingTime } from '../utils/time'
@@ -47,7 +48,7 @@ import {
 } from '@/components/ui/table'
 
 const ERROR_TIME_RANGES: TimeRangeKey[] = ['1h', '6h', '24h', '7d', '30d']
-const pageSizeOptions = [10, 20, 50, 100]
+const pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
 
 const errorTableHeadClass = 'text-[12px] font-semibold'
 const errorTableTextClass = 'text-[14px]'
@@ -58,7 +59,7 @@ export default function OperationsErrors() {
   const { toast, showToast } = useToast()
   const [timeRange, setTimeRange] = useState<TimeRangeKey>('1h')
   const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(20)
+  const [pageSize, setPageSize] = usePersistedPageSize('ops_errors', 20, pageSizeOptions)
   const [statusFilter, setStatusFilter] = useState('')
   const [errorKindFilter, setErrorKindFilter] = useState('')
   const [endpointFilter, setEndpointFilter] = useState('')

frontend/src/pages/PromptFilter.tsx

@@ -8,6 +8,7 @@ import PageHeader from '../components/PageHeader'
 import Pagination from '../components/Pagination'
 import StateShell from '../components/StateShell'
 import ToastNotice from '../components/ToastNotice'
+import { DEFAULT_PAGE_SIZE_OPTIONS, usePersistedPageSize } from '../hooks/usePersistedPageSize'
 import { useDataLoader } from '../hooks/useDataLoader'
 import { useToast } from '../hooks/useToast'
 import { formatBeijingTime, formatRelativeTime } from '../utils/time'
@@ -525,7 +526,7 @@ function LogsView({ clearLogs, clearing }: { clearLogs: () => Promise<void>; cle
   const [draftFilters, setDraftFilters] = useState<LogFilters>(emptyFilters)
   const [filters, setFilters] = useState<LogFilters>(emptyFilters)
   const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(20)
+  const [pageSize, setPageSize] = usePersistedPageSize('prompt_filter_logs', 20, DEFAULT_PAGE_SIZE_OPTIONS)
   const [logs, setLogs] = useState<PromptFilterLog[]>([])
   const [total, setTotal] = useState(0)
   const [loading, setLoading] = useState(false)
@@ -623,7 +624,7 @@ function LogsView({ clearLogs, clearing }: { clearLogs: () => Promise<void>; cle
 
         <StateShell loading={loading} error={error} isEmpty={!loading && logs.length === 0} onRetry={() => void loadLogs()} emptyTitle={t('promptFilter.noLogs')}>
           <PromptFilterLogsTable logs={logs} />
-          <Pagination page={page} totalPages={totalPages} totalItems={total} pageSize={pageSize} onPageChange={setPage} onPageSizeChange={(next) => { setPage(1); setPageSize(next) }} pageSizeOptions={[10, 20, 50, 100]} />
+          <Pagination page={page} totalPages={totalPages} totalItems={total} pageSize={pageSize} onPageChange={setPage} onPageSizeChange={(next) => { setPage(1); setPageSize(next) }} pageSizeOptions={DEFAULT_PAGE_SIZE_OPTIONS} />
         </StateShell>
       </CardContent>
     </Card>