加载中...
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 0d18541..c04ce9a 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,20 +1,188 @@
-import * as React from "react"
+'use client'
+import * as React from 'react'
+import {useState, useEffect} from 'react'
+
import {
ChevronLeftIcon,
ChevronRightIcon,
MoreHorizontalIcon,
-} from "lucide-react"
+} from 'lucide-react'
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+import {cn} from '@/lib/utils'
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from './select'
+
+export interface PaginationProps {
+ page: number
+ size: number
+ total: number
+ sizeOptions?: number[]
+ onPageChange?: (page: number) => void
+ onSizeChange?: (size: number) => void
+ className?: string
+}
+
+function Pagination({
+ page,
+ size,
+ total,
+ sizeOptions = [10, 20, 50, 100],
+ onPageChange,
+ onSizeChange,
+ className,
+}: PaginationProps) {
+ const [currentPage, setCurrentPage] = useState(page)
+ const totalPages = Math.ceil(total / size)
+
+ // 同步外部 page 变化
+ useEffect(() => {
+ setCurrentPage(page)
+ }, [page])
+
+ // 分页器逻辑
+ const generatePaginationItems = () => {
+ // 最多显示7个页码，其余用省略号
+ const SIBLINGS = 1 // 当前页左右各显示的页码数
+ const DOTS = -1 // 省略号标记
+
+ if (totalPages <= 7) {
+ // 总页数少于7，全部显示
+ return Array.from({length: totalPages}, (_, i) => i + 1)
+ }
+
+ // 是否需要显示左边的省略号
+ const showLeftDots = currentPage > 2 + SIBLINGS
+
+ // 是否需要显示右边的省略号
+ const showRightDots = currentPage < totalPages - (2 + SIBLINGS)
+
+ if (showLeftDots && showRightDots) {
+ // 两边都有省略号
+ const leftSiblingIndex = Math.max(currentPage - SIBLINGS, 1)
+ const rightSiblingIndex = Math.min(currentPage + SIBLINGS, totalPages)
+
+ return [1, DOTS, ...Array.from(
+ {length: rightSiblingIndex - leftSiblingIndex + 1},
+ (_, i) => leftSiblingIndex + i,
+ ), DOTS, totalPages]
+ }
+
+ if (!showLeftDots && showRightDots) {
+ // 只有右边有省略号
+ return [...Array.from({length: 3 + SIBLINGS * 2}, (_, i) => i + 1), DOTS, totalPages]
+ }
+
+ if (showLeftDots && !showRightDots) {
+ // 只有左边有省略号
+ return [1, DOTS, ...Array.from(
+ {length: 3 + SIBLINGS * 2},
+ (_, i) => totalPages - (3 + SIBLINGS * 2) + i + 1,
+ )]
+ }
+
+ return []
+ }
+
+ const handlePageChange = (newPage: number) => {
+ if (newPage < 1 || newPage > totalPages || newPage === currentPage) {
+ return
+ }
+ setCurrentPage(newPage)
+ onPageChange?.(newPage)
+ }
+
+ const handlePageSizeChange = (newSize: string) => {
+ const parsedSize = parseInt(newSize, 10)
+ if (onSizeChange) {
+ onSizeChange(parsedSize)
+ }
+ }
+
+ const paginationItems = generatePaginationItems()
+
+ return (
+
+
+ 共
+ {' '}
+ {total}
+ {' '}
+ 条记录，每页
+
+ 条
+
+
+
+
+
+
+ handlePageChange(currentPage - 1)}
+ className={currentPage === 1 ? 'opacity-50 pointer-events-none' : ''}
+ />
+
+
+ {paginationItems.map((pageNum, index) => {
+ if (pageNum === -1) {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ handlePageChange(pageNum)}
+ >
+ {pageNum}
+
+
+ )
+ })}
+
+
+ handlePageChange(currentPage + 1)}
+ className={currentPage === totalPages ? 'opacity-50 pointer-events-none' : ''}
+ />
+
+
+
+
+
+ )
+}
+
+function PaginationLayout({className, ...props}: React.ComponentProps<'nav'>) {
return (
)
@@ -23,42 +191,39 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
function PaginationContent({
className,
...props
-}: React.ComponentProps<"ul">) {
+}: React.ComponentProps<'ul'>) {
return (
)
}
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
- return
+function PaginationItem({...props}: React.ComponentProps<'li'>) {
+ return
}
type PaginationLinkProps = {
isActive?: boolean
-} & Pick
, "size"> &
- React.ComponentProps<"a">
+} & React.ComponentProps<'a'>
function PaginationLink({
className,
isActive,
- size = "icon",
...props
}: PaginationLinkProps) {
return (
@@ -72,12 +237,10 @@ function PaginationPrevious({
return (
-
- Previous
+
)
}
@@ -89,12 +252,10 @@ function PaginationNext({
return (
- Next
-
+
)
}
@@ -102,15 +263,15 @@ function PaginationNext({
function PaginationEllipsis({
className,
...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
return (
-
+
More pages
)
@@ -118,6 +279,7 @@ function PaginationEllipsis({
export {
Pagination,
+ PaginationLayout,
PaginationContent,
PaginationLink,
PaginationItem,
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 51b74dd..b624ad7 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -12,7 +12,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
>
@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return (
)
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {