UHD_Media_Tool/apps/web/app/components/ui/pagination.tsx

import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
import { PAGE_SIZES } from "~/components/console/use-list-pagination.ts";
import { Button } from "~/components/ui/button.tsx";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select.tsx";
import { cn } from "~/lib/utils.ts";

export type PaginationProps = {
  page: number;
  pageSize: number;
  /** With hasMore, total is the loaded count, not a complete total. */
  total: number;
  hasMore?: boolean;
  busy?: boolean;
  onPageChange: (page: number) => void;
  onPageSizeChange?: (size: number) => void;
  className?: string;
};
export function pageNumbers(page: number, pages: number): (number | "…")[] {
  const values = new Set([1, pages, page - 1, page, page + 1]);
  const valid = [...values].filter((n) => n >= 1 && n <= pages).sort((a, b) => a - b);
  return valid.flatMap((n, i): (number | "…")[] => (i && n - valid[i - 1] > 1 ? ["…", n] : [n]));
}
/** Shared pagination for tables, cards and cursor-backed record lists. */
export function Pagination({
  page,
  pageSize,
  total,
  hasMore = false,
  busy = false,
  onPageChange,
  onPageSizeChange,
  className,
}: PaginationProps) {
  const loadedPages = Math.max(1, Math.ceil(total / pageSize));
  const pages = loadedPages + (hasMore ? 1 : 0);
  const from = total ? (page - 1) * pageSize + 1 : 0;
  const to = Math.min(page * pageSize, total);
  return (
    <nav
      aria-label="列表分页"
      aria-busy={busy}
      className={cn("flex flex-wrap items-center justify-between gap-3 border-t border-border/60 px-4 py-3", className)}
    >
      <div className="flex flex-wrap items-center gap-3 text-meta text-muted-foreground">
        <span aria-live="polite" className="tabular-nums">
          {hasMore ? `已加载 ${total} 条` : `共 ${total} 条`} · {from}–{to} 条
        </span>
        {onPageSizeChange ? (
          <div className="flex items-center gap-2">
            <span>每页</span>
            <Select value={String(pageSize)} disabled={busy} onValueChange={(value) => onPageSizeChange(Number(value))}>
              <SelectTrigger size="sm" aria-label="每页条数" className="min-w-24 text-caption text-foreground">
                <SelectValue />
              </SelectTrigger>
              <SelectContent position="popper" align="start" collisionPadding={16}>
                {PAGE_SIZES.map((size) => (
                  <SelectItem key={size} value={String(size)}>
                    {size} 条
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        ) : null}
      </div>
      <div className="flex max-w-full flex-wrap items-center gap-1">
        <Button
          type="button"
          size="sm"
          variant="ghost"
          aria-label="第一页"
          disabled={busy || page <= 1}
          onClick={() => onPageChange(1)}
        >
          <ChevronsLeft className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          size="sm"
          variant="outline"
          aria-label="上一页"
          disabled={busy || page <= 1}
          onClick={() => onPageChange(page - 1)}
        >
          <ChevronLeft className="h-4 w-4" />
          <span className="hidden sm:inline">上一页</span>
        </Button>
        {pageNumbers(page, pages).map((n, i) =>
          n === "…" ? (
            <span key={`gap-${i}`} aria-hidden className="px-1 text-muted-foreground">
              …
            </span>
          ) : (
            <Button
              key={n}
              type="button"
              size="sm"
              variant={n === page ? "secondary" : "ghost"}
              aria-label={`第 ${n} 页`}
              aria-current={n === page ? "page" : undefined}
              disabled={busy}
              onClick={() => onPageChange(n)}
            >
              {n}
            </Button>
          ),
        )}
        <Button
          type="button"
          size="sm"
          variant="outline"
          aria-label="下一页"
          disabled={busy || page >= pages}
          onClick={() => onPageChange(page + 1)}
        >
          <span className="hidden sm:inline">下一页</span>
          <ChevronRight className="h-4 w-4" />
        </Button>
        {!hasMore ? (
          <Button
            type="button"
            size="sm"
            variant="ghost"
            aria-label="最后一页"
            disabled={busy || page >= pages}
            onClick={() => onPageChange(pages)}
          >
            <ChevronsRight className="h-4 w-4" />
          </Button>
        ) : null}
      </div>
    </nav>
  );
}