fix: unify analytics and report pagination controls

src/components/ui/PagePrimitives.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Pagination } from './PagePrimitives';
+
+describe('Pagination compatibility', () => {
+  it('preserves existing navigation without showing page size controls unless opted in', () => {
+    const previous = vi.fn();
+    const next = vi.fn();
+    const changePage = vi.fn();
+    render(
+      <Pagination
+        total={30}
+        page={2}
+        previousDisabled={false}
+        nextDisabled={false}
+        onPrevious={previous}
+        onNext={next}
+        onPageChange={changePage}
+      />,
+    );
+
+    expect(screen.queryByLabelText(/^每页数量/)).not.toBeInTheDocument();
+    expect(screen.getByText('显示 30 条记录')).toBeVisible();
+    expect(screen.getByLabelText('跳转页码')).toHaveAttribute('max', '3');
+    fireEvent.click(screen.getByRole('button', { name: '上一页' }));
+    fireEvent.click(screen.getByRole('button', { name: '下一页' }));
+    expect(previous).toHaveBeenCalledOnce();
+    expect(next).toHaveBeenCalledOnce();
+    fireEvent.click(screen.getByRole('button', { name: '首页' }));
+    expect(changePage).toHaveBeenLastCalledWith(1);
+    fireEvent.click(screen.getByRole('button', { name: '末页' }));
+    expect(changePage).toHaveBeenLastCalledWith(3);
+  });
+
+  it('derives total pages from the opted-in size when totalPages is omitted', () => {
+    const changePage = vi.fn();
+    render(<Pagination total={60} pageSize={25} onPageSizeChange={vi.fn()} onPageChange={changePage} />);
+
+    expect(screen.getByLabelText(/^每页数量/)).toHaveTextContent('25 条/页');
+    expect(screen.getByLabelText('跳转页码')).toHaveAttribute('max', '3');
+    fireEvent.click(screen.getByRole('button', { name: '末页' }));
+    expect(changePage).toHaveBeenLastCalledWith(3);
+  });
+
+  it('resets only the jump draft when the page changes and does not restore an older draft', () => {
+    const changePage = vi.fn();
+    const { rerender } = render(<Pagination total={100} page={1} onPageChange={changePage} />);
+    fireEvent.change(screen.getByLabelText('跳转页码'), { target: { value: '8' } });
+    expect(screen.getByLabelText('跳转页码')).toHaveValue(8);
+    expect(changePage).not.toHaveBeenCalled();
+
+    rerender(<Pagination total={100} page={2} onPageChange={changePage} />);
+    expect(screen.getByLabelText('跳转页码')).toHaveValue(2);
+    rerender(<Pagination total={100} page={1} onPageChange={changePage} />);
+    expect(screen.getByLabelText('跳转页码')).toHaveValue(1);
+
+    fireEvent.change(screen.getByLabelText('跳转页码'), { target: { value: '20' } });
+    fireEvent.keyDown(screen.getByLabelText('跳转页码'), { key: 'Enter' });
+    expect(changePage).toHaveBeenLastCalledWith(10);
+  });
+});

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>
   );
 }