fix: unify analytics and report pagination controls

src/components/ui/PagePrimitives.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { Button } from '@/components/ui/Button';
+import { Select } from '@/components/ui/Select';
 
 type QueryPanelProps = {
   title: ReactNode;
@@ -16,6 +17,9 @@ type PaginationProps = {
   onPrevious?: () => void;
   onNext?: () => void;
   onPageChange?: (page: number) => void;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
 };
 
 type InlineTextPreviewProps = {
@@ -34,6 +38,35 @@ export function QueryPanel({ title, summary, children }: QueryPanelProps) {
   );
 }
 
+function PaginationJump({
+  page,
+  pages,
+  onPageChange,
+}: {
+  page: number;
+  pages: number;
+  onPageChange: (page: number) => void;
+}) {
+  const [targetPage, setTargetPage] = useState(String(page));
+  return (
+    <label className="ui-pagination__jump">
+      第{' '}
+      <input
+        aria-label="跳转页码"
+        min="1"
+        max={pages}
+        onChange={(event) => setTargetPage(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') onPageChange(Number(targetPage));
+        }}
+        type="number"
+        value={targetPage}
+      />{' '}
+      / {pages} 页
+    </label>
+  );
+}
+
 export function Pagination({
   total,
   page = 1,
@@ -43,11 +76,11 @@ export function Pagination({
   onPrevious,
   onNext,
   onPageChange,
+  pageSize,
+  pageSizeOptions = [10, 25, 50, 100],
+  onPageSizeChange,
 }: PaginationProps) {
-  const pages = Math.max(1, totalPages ?? (typeof total === 'number' ? Math.ceil(total / 10) : page));
-  const [targetPage, setTargetPage] = useState(String(page));
-
-  useEffect(() => setTargetPage(String(page)), [page]);
+  const pages = Math.max(1, totalPages ?? (typeof total === 'number' ? Math.ceil(total / (pageSize ?? 10)) : page));
 
   function changePage(nextPage: number) {
     onPageChange?.(Math.min(pages, Math.max(1, nextPage)));
@@ -57,12 +90,34 @@ export function Pagination({
     <div className="ui-pagination">
       {typeof total === 'number' ? <span>显示 {total} 条记录</span> : <span />}
       <div>
-        <Button disabled={previousDisabled} onClick={onPrevious} size="sm" variant="ghost">上一页</Button>
-        {onPageChange ? <Button disabled={page <= 1} onClick={() => changePage(1)} size="sm" variant="ghost">首页</Button> : null}
-        <Button size="sm" variant="secondary">{page}</Button>
-        {onPageChange ? <label className="ui-pagination__jump">第 <input aria-label="跳转页码" min="1" max={pages} onChange={(event) => setTargetPage(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') changePage(Number(targetPage)); }} type="number" value={targetPage} /> / {pages} 页</label> : null}
-        {onPageChange ? <Button disabled={page >= pages} onClick={() => changePage(pages)} size="sm" variant="ghost">末页</Button> : null}
-        <Button disabled={nextDisabled} onClick={onNext} size="sm" variant="ghost">下一页</Button>
+        {typeof pageSize === 'number' && onPageSizeChange ? (
+          <Select
+            label="每页数量"
+            value={String(pageSize)}
+            options={pageSizeOptions.map((value) => ({ value: String(value), label: `${value} 条/页` }))}
+            onChange={(event) => onPageSizeChange(Number(event.target.value))}
+          />
+        ) : null}
+        <Button disabled={previousDisabled} onClick={onPrevious} size="sm" variant="ghost">
+          上一页
+        </Button>
+        {onPageChange ? (
+          <Button disabled={page <= 1} onClick={() => changePage(1)} size="sm" variant="ghost">
+            首页
+          </Button>
+        ) : null}
+        <Button size="sm" variant="secondary">
+          {page}
+        </Button>
+        {onPageChange ? <PaginationJump key={page} page={page} pages={pages} onPageChange={changePage} /> : null}
+        {onPageChange ? (
+          <Button disabled={page >= pages} onClick={() => changePage(pages)} size="sm" variant="ghost">
+            末页
+          </Button>
+        ) : null}
+        <Button disabled={nextDisabled} onClick={onNext} size="sm" variant="ghost">
+          下一页
+        </Button>
       </div>
     </div>
   );
@@ -72,7 +127,10 @@ export function InlineTextPreview({ label, leading, children }: InlineTextPrevie
   return (
     <div className="ui-inline-text-preview">
       <span>{label}</span>
-      <p>{leading}{children}</p>
+      <p>
+        {leading}
+        {children}
+      </p>
     </div>
   );
 }