chore: scaffold monorepo and migrate uhd_web design system (W0-A)
- pnpm workspace: apps/{web,server}, packages/{contracts,db,domain,adapters,tasks,agent,testkit}
- server: Hono + zod-openapi, API Key auth with scopes, redacting pino logger, SSE event bus with replay, worker heartbeat
- db: Kysely + pg, file migrator, 0001_init (settings/api_key/audit_event/outbox_event)
- web: React Router 7 SPA console shell with 12 workspace placeholders, uhd_web tokens/ui/guard scripts
- docs: ADR-001 (Node over Deno), dev runbook, design system rules
Co-Authored-By: Claude Fable 5.1 <[email protected]>
This commit is contained in:
umtandClaude Fable 5.1 committed
commit
b22c440139
138 files changed
+14455
No files matched your search
@@ -0,0 +1,154 @@
|
||||
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [10, 15, 20, 50, 100];
|
||||
|
||||
type PaginationProps = {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onPageSizeChange?: (size: number) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function Pagination({ page, pageSize, total, onPageChange, onPageSizeChange, className }: PaginationProps) {
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
|
||||
const to = Math.min(page * pageSize, total);
|
||||
|
||||
const isFirst = page <= 1;
|
||||
const isLast = page >= totalPages;
|
||||
|
||||
// 生成页码列表（最多显示 7 个按钮）
|
||||
function buildPages(): (number | "...")[] {
|
||||
if (totalPages <= 7) {
|
||||
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||
}
|
||||
if (page <= 4) {
|
||||
return [1, 2, 3, 4, 5, "...", totalPages];
|
||||
}
|
||||
if (page >= totalPages - 3) {
|
||||
return [1, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
|
||||
}
|
||||
return [1, "...", page - 1, page, page + 1, "...", totalPages];
|
||||
}
|
||||
|
||||
const pages = buildPages();
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-wrap items-center justify-between gap-3", className)}>
|
||||
{/* 左侧：总数 + 每页显示 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
共 <span className="font-medium text-foreground tabular-nums">{total}</span> 条 · 第{" "}
|
||||
<span className="font-medium text-foreground tabular-nums">{from}</span>
|
||||
{" 至 "}
|
||||
<span className="font-medium text-foreground tabular-nums">{to}</span> 条
|
||||
</span>
|
||||
|
||||
{/* 每页条数 */}
|
||||
{onPageSizeChange && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs text-muted-foreground/60 whitespace-nowrap">每页</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => {
|
||||
onPageSizeChange(Number(e.target.value));
|
||||
onPageChange(1); // 切换页大小时回到第 1 页
|
||||
}}
|
||||
className="h-7 rounded-lg border border-foreground/10 bg-foreground/5 px-2 text-xs text-foreground outline-none transition-colors focus:border-primary/50 cursor-pointer appearance-none pr-6"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "right 6px center",
|
||||
}}
|
||||
>
|
||||
{PAGE_SIZE_OPTIONS.map((s) => (
|
||||
<option key={s} value={s} className="bg-card text-foreground">
|
||||
{s} 条
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧：页码导航 */}
|
||||
<div className="flex items-center gap-0.5">
|
||||
{/* 首页 */}
|
||||
<NavBtn onClick={() => onPageChange(1)} disabled={isFirst} title="第一页">
|
||||
<ChevronsLeft className="h-3.5 w-3.5" />
|
||||
</NavBtn>
|
||||
|
||||
{/* 上一页 */}
|
||||
<NavBtn onClick={() => onPageChange(page - 1)} disabled={isFirst} title="上一页">
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
</NavBtn>
|
||||
|
||||
{/* 页码按钮 */}
|
||||
<div className="flex items-center gap-0.5 mx-1">
|
||||
{pages.map((p, i) =>
|
||||
p === "..." ? (
|
||||
<span
|
||||
key={`ellipsis-${i}`}
|
||||
className="flex h-7 w-6 items-center justify-center text-xs text-muted-foreground/40 select-none"
|
||||
>
|
||||
···
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => onPageChange(p as number)}
|
||||
className={cn(
|
||||
"flex h-7 min-w-[28px] px-1.5 items-center justify-center rounded-full text-xs font-medium transition-all",
|
||||
p === page ? "pill-selected" : "text-muted-foreground hover:bg-foreground/8 hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 下一页 */}
|
||||
<NavBtn onClick={() => onPageChange(page + 1)} disabled={isLast} title="下一页">
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
</NavBtn>
|
||||
|
||||
{/* 末页 */}
|
||||
<NavBtn onClick={() => onPageChange(totalPages)} disabled={isLast} title="最后一页">
|
||||
<ChevronsRight className="h-3.5 w-3.5" />
|
||||
</NavBtn>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NavBtn({
|
||||
children,
|
||||
onClick,
|
||||
disabled,
|
||||
title,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
onClick: () => void;
|
||||
disabled: boolean;
|
||||
title?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={title}
|
||||
className={cn(
|
||||
"flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-all",
|
||||
disabled ? "opacity-25 cursor-not-allowed" : "hover:bg-foreground/8 hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user