selfrelease
0df8aa77d9
- 员工花名册管理（加密存储、导入导出） - 薪酬管理（发薪批次、薪酬模版、加班费计算、工资条） - 社保公积金（多城市配置、版本管理、基数调整） - 解聘管理（6步流程、证据链、工作交接） - AI 助手（合同审查、风险预测、RAG 知识库） - Dashboard 仪表盘 - 设置与通知
96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
import clsx from 'clsx'
|
||
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||
|
||
interface PaginationProps {
|
||
page: number // 当前页（1-based）
|
||
pageSize: number // 每页条数
|
||
total: number // 总条数
|
||
onPageChange: (page: number) => void
|
||
onPageSizeChange?: (size: number) => void
|
||
pageSizeOptions?: number[]
|
||
}
|
||
|
||
export default function Pagination({
|
||
page,
|
||
pageSize,
|
||
total,
|
||
onPageChange,
|
||
onPageSizeChange,
|
||
pageSizeOptions = [10, 20, 50],
|
||
}: PaginationProps) {
|
||
const totalPages = Math.max(1, Math.ceil(total / pageSize))
|
||
const start = total === 0 ? 0 : (page - 1) * pageSize + 1
|
||
const end = Math.min(page * pageSize, total)
|
||
|
||
// 生成页码按钮（最多显示 7 个）
|
||
const pages: (number | '...')[] = []
|
||
if (totalPages <= 7) {
|
||
for (let i = 1; i <= totalPages; i++) pages.push(i)
|
||
} else {
|
||
pages.push(1)
|
||
if (page > 3) pages.push('...')
|
||
const s = Math.max(2, page - 1)
|
||
const e = Math.min(totalPages - 1, page + 1)
|
||
for (let i = s; i <= e; i++) pages.push(i)
|
||
if (page < totalPages - 2) pages.push('...')
|
||
pages.push(totalPages)
|
||
}
|
||
|
||
return (
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
{/* 左侧：条数信息 + 每页条数选择 */}
|
||
<div className="flex items-center gap-3 text-sm text-gray-500">
|
||
<span>共 {total} 条</span>
|
||
{onPageSizeChange && (
|
||
<select
|
||
className="border rounded px-1.5 py-0.5 text-sm text-gray-600 focus:outline-none focus:border-primary"
|
||
value={pageSize}
|
||
onChange={(e) => onPageSizeChange(Number(e.target.value))}
|
||
>
|
||
{pageSizeOptions.map((n) => (
|
||
<option key={n} value={n}>{n} 条/页</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
<span>第 {start}-{end} 条</span>
|
||
</div>
|
||
|
||
{/* 右侧：页码导航 */}
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
className="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
|
||
disabled={page <= 1}
|
||
onClick={() => onPageChange(page - 1)}
|
||
>
|
||
<ChevronLeft className="w-4 h-4" />
|
||
</button>
|
||
{pages.map((p, i) =>
|
||
p === '...' ? (
|
||
<span key={`ellipsis-${i}`} className="px-2 text-gray-500 text-sm">…</span>
|
||
) : (
|
||
<button
|
||
key={p}
|
||
className={clsx(
|
||
'min-w-[28px] h-7 rounded text-sm font-medium transition-colors',
|
||
p === page
|
||
? 'bg-primary text-white'
|
||
: 'text-gray-600 hover:bg-gray-100',
|
||
)}
|
||
onClick={() => onPageChange(p)}
|
||
>
|
||
{p}
|
||
</button>
|
||
),
|
||
)}
|
||
<button
|
||
className="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
|
||
disabled={page >= totalPages}
|
||
onClick={() => onPageChange(page + 1)}
|
||
>
|
||
<ChevronRight className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|