106 lines
3.9 KiB
TypeScript
106 lines
3.9 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
interface PaginationProps {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onPageChange: (page: number) => void;
|
|
maxVisiblePages?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export const Pagination = ({
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
maxVisiblePages = 7,
|
|
className = '',
|
|
}: PaginationProps) => {
|
|
const getVisiblePages = () => {
|
|
if (totalPages <= maxVisiblePages) {
|
|
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
}
|
|
|
|
const leftSiblingIndex = Math.max(currentPage - 1, 1);
|
|
const rightSiblingIndex = Math.min(currentPage + 1, totalPages);
|
|
|
|
const shouldShowLeftDots = leftSiblingIndex > 2;
|
|
const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
|
|
|
|
if (!shouldShowLeftDots && shouldShowRightDots) {
|
|
const leftRange = Array.from({ length: maxVisiblePages - 1 }, (_, i) => i + 1);
|
|
return [...leftRange, '...', totalPages];
|
|
}
|
|
|
|
if (shouldShowLeftDots && !shouldShowRightDots) {
|
|
const rightRange = Array.from(
|
|
{ length: maxVisiblePages - 1 },
|
|
(_, i) => totalPages - (maxVisiblePages - 2) + i
|
|
);
|
|
return [1, '...', ...rightRange];
|
|
}
|
|
|
|
if (shouldShowLeftDots && shouldShowRightDots) {
|
|
const middleRange = Array.from(
|
|
{ length: maxVisiblePages - 4 },
|
|
(_, i) => leftSiblingIndex + i
|
|
);
|
|
return [1, '...', ...middleRange, '...', totalPages];
|
|
}
|
|
|
|
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
};
|
|
|
|
const visiblePages = getVisiblePages();
|
|
|
|
return (
|
|
<motion.div
|
|
className={`flex items-center justify-center gap-2 mt-6 ${className}`}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage <= 1}
|
|
className="px-4 py-2 rounded-md bg-white border border-gray-200 hover:bg-gray-50
|
|
disabled:opacity-50 disabled:cursor-not-allowed transition-colors
|
|
shadow-sm text-gray-700 font-medium"
|
|
>
|
|
上一页
|
|
</motion.button>
|
|
|
|
<div className="flex gap-2">
|
|
{visiblePages.map((page, index) => (
|
|
<motion.button
|
|
key={index}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => typeof page === 'number' && onPageChange(page)}
|
|
className={`px-4 py-2 rounded-md font-medium transition-colors ${currentPage === page
|
|
? 'bg-blue-500 text-white shadow-md'
|
|
: page === '...'
|
|
? 'cursor-default'
|
|
: 'bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 shadow-sm'
|
|
}`}
|
|
>
|
|
{page}
|
|
</motion.button>
|
|
))}
|
|
</div>
|
|
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage >= totalPages}
|
|
className="px-4 py-2 rounded-md bg-white border border-gray-200 hover:bg-gray-50
|
|
disabled:opacity-50 disabled:cursor-not-allowed transition-colors
|
|
shadow-sm text-gray-700 font-medium"
|
|
>
|
|
下一页
|
|
</motion.button>
|
|
</motion.div>
|
|
);
|
|
}; |