diff --git a/src/components/PaginatedRow.tsx b/src/components/PaginatedRow.tsx index c2ec144..133854b 100644 --- a/src/components/PaginatedRow.tsx +++ b/src/components/PaginatedRow.tsx @@ -14,47 +14,68 @@ export default function PaginatedRow({ itemsPerPage = 10, className = '', }: PaginatedRowProps) { - const [currentPage, setCurrentPage] = useState(0); + const [startIndex, setStartIndex] = useState(0); + const [isHovered, setIsHovered] = useState(false); const uniqueId = useId(); // 为每个实例生成唯一ID - // 计算总页数 + // 获取当前显示的项目 - 支持无限向前浏览 + const currentItems = useMemo(() => { + const endIndex = startIndex + itemsPerPage; + // 如果超出范围,循环显示 + if (endIndex <= children.length) { + return children.slice(startIndex, endIndex); + } else { + // 当超出范围时,从头开始循环 + const firstPart = children.slice(startIndex); + const secondPart = children.slice(0, endIndex - children.length); + return [...firstPart, ...secondPart]; + } + }, [children, startIndex, itemsPerPage]); + + // 向前翻页 + const handlePrevPage = () => { + setStartIndex((prev) => { + const newIndex = prev - itemsPerPage; + return newIndex < 0 ? Math.max(0, children.length - itemsPerPage) : newIndex; + }); + }; + + // 向后翻页 - 支持无限浏览 + const handleNextPage = () => { + setStartIndex((prev) => { + const newIndex = prev + itemsPerPage; + // 当超出总长度时,从头开始,实现无限循环 + return newIndex >= children.length ? 0 : newIndex; + }); + }; + + // 计算当前页码用于指示器 + const currentPageIndex = Math.floor(startIndex / itemsPerPage); const totalPages = Math.ceil(children.length / itemsPerPage); - // 获取当前页的项目 - const currentItems = useMemo(() => { - const startIndex = currentPage * itemsPerPage; - const endIndex = startIndex + itemsPerPage; - return children.slice(startIndex, endIndex); - }, [children, currentPage, itemsPerPage]); - - // 无限循环翻页 - const handlePrevPage = () => { - setCurrentPage((prev) => (prev === 0 ? totalPages - 1 : prev - 1)); - }; - - const handleNextPage = () => { - setCurrentPage((prev) => (prev === totalPages - 1 ? 0 : prev + 1)); - }; - // 如果没有足够的内容需要分页,就不显示按钮 - const needsPagination = totalPages > 1; + const needsPagination = children.length > itemsPerPage; return (
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} > - {/* 内容区域 */} + {/* 内容区域 - 移除group类以避免悬停效果冲突 */}
{currentItems} - {/* 改进的导航按钮 - 放在网格中间位置 */} + {/* 改进的导航按钮 - 仅在容器悬停时显示 */} {needsPagination && ( <> - {/* 左箭头按钮 - 精确定位在两行中间 */} + {/* 左箭头按钮 */} - {/* 右箭头按钮 - 精确定位在两行中间 */} + {/* 右箭头按钮 */}
)}