fix: complete first version issue remediation

src/components/ui/PagePrimitives.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { Button } from '@/components/ui/Button';
 
 type QueryPanelProps = {
@@ -10,10 +10,12 @@ type QueryPanelProps = {
 type PaginationProps = {
   total?: number;
   page?: number;
+  totalPages?: number;
   previousDisabled?: boolean;
   nextDisabled?: boolean;
   onPrevious?: () => void;
   onNext?: () => void;
+  onPageChange?: (page: number) => void;
 };
 
 type InlineTextPreviewProps = {
@@ -35,17 +37,31 @@ export function QueryPanel({ title, summary, children }: QueryPanelProps) {
 export function Pagination({
   total,
   page = 1,
+  totalPages,
   previousDisabled = true,
   nextDisabled = true,
   onPrevious,
   onNext,
+  onPageChange,
 }: 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]);
+
+  function changePage(nextPage: number) {
+    onPageChange?.(Math.min(pages, Math.max(1, nextPage)));
+  }
+
   return (
     <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>
       </div>
     </div>