Logan.Li
ac498c7ba2
Per guide ch.7 page split pattern (skeleton orchestrates, private components live in features/<domain>/): - InstancePage 1716->328, UsersPage 1309->240, TicketsPage 1076->195, TicketDetailPage 911->287, QueriesPage 883->479, LdapConfigPage 860->393, WorkflowPage 852->194 - new feature modules: datasource/ rbac/ ticket/ query/ system/ldap/ governance/workflow/ (components + hooks + types + utils) - stable keys replace index keys in dynamic lists; polling intervals and toast call sites preserved 1:1 (verified by agents) - filter/pagination state moved to URL query via new useQueryState hook (Instance/Users/Tickets/AuditLogs pages): refresh/share/back-button restore state; composite updates applied atomically - permission pure functions extracted to lib/permissions.ts (used by useAuth + useLogin); page-size audit: 0 pages over 700-line budget
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
/**
|
|
* 工单分页 — 页码窗口(最多展示 5 页)与上/下一页控制
|
|
* 可见性由父组件控制(仅 totalPages > 1 时渲染)
|
|
*/
|
|
|
|
interface TicketPaginationProps {
|
|
page: number;
|
|
total: number;
|
|
totalPages: number;
|
|
/** 页码跳转(父级写入 URL query) */
|
|
onPageChange: (page: number) => void;
|
|
}
|
|
|
|
export function TicketPagination({ page, total, totalPages, onPageChange }: TicketPaginationProps) {
|
|
return (
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-4 border-t border-[var(--dg-border)]">
|
|
<span className="text-sm text-[var(--dg-text-muted)]">共 {total} 条</span>
|
|
<div className="flex gap-1 overflow-x-auto">
|
|
<button
|
|
disabled={page <= 1}
|
|
onClick={() => onPageChange(page - 1)}
|
|
className="dg-btn dg-btn-ghost dg-btn-sm disabled:opacity-50"
|
|
>
|
|
上一页
|
|
</button>
|
|
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
|
let p: number;
|
|
if (totalPages <= 5) {
|
|
p = i + 1;
|
|
} else if (page <= 3) {
|
|
p = i + 1;
|
|
} else if (page >= totalPages - 2) {
|
|
p = totalPages - 4 + i;
|
|
} else {
|
|
p = page - 2 + i;
|
|
}
|
|
return (
|
|
<button
|
|
key={p}
|
|
onClick={() => onPageChange(p)}
|
|
className={`dg-btn dg-btn-sm dg-btn-ghost ${
|
|
p === page ? 'bg-blue-500 text-white hover:bg-blue-500' : ''
|
|
}`}
|
|
>
|
|
{p}
|
|
</button>
|
|
);
|
|
})}
|
|
<button
|
|
disabled={page >= totalPages}
|
|
onClick={() => onPageChange(page + 1)}
|
|
className="dg-btn dg-btn-ghost dg-btn-sm disabled:opacity-50"
|
|
>
|
|
下一页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|