From c5c8aa43f2212ada48f387ad77855a5c57045bc5 Mon Sep 17 00:00:00 2001
From: katelya <katelya77@gmail.com>
Date: Thu, 4 Sep 2025 15:35:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1Pag?=
 =?UTF-8?q?inatedRow=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=83=AD=E9=97=A8=E6=9D=BF=E5=9D=97=E7=9A=84=E5=88=87?=
 =?UTF-8?q?=E9=A1=B5=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 新功能:
- 实现无限循环翻页，不再局限于有限页数
- 重新设计翻页按钮，使用紫色渐变和更好的悬停效果
- 按钮位置居中对齐，放在两行内容的中间位置
- 为每个组件实例添加唯一ID，避免跨板块悬停效果冲突

 设计改进:
- 按钮使用渐变背景和阴影效果，提升视觉体验
- 优化按钮尺寸和间距，更加美观
- 改进页码指示器的动画效果
- 修复悬停状态下其他板块也高亮的问题

 Bug修复:
- 解决鼠标悬停在一个影视卡片时其他板块卡片也高亮的问题
- 修复只能显示两批内容的限制，现在支持无限循环
- 优化按钮定位，确保在各种屏幕尺寸下都能正确居中
---
 src/components/PaginatedRow.tsx | 70 ++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/PaginatedRow.tsx b/src/components/PaginatedRow.tsx
index 5a67bdb..c2ec144 100644
--- a/src/components/PaginatedRow.tsx
+++ b/src/components/PaginatedRow.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useId, useMemo, useState } from 'react';
 
 interface PaginatedRowProps {
   children: React.ReactNode[];
@@ -15,6 +15,7 @@ export default function PaginatedRow({
   className = '',
 }: PaginatedRowProps) {
   const [currentPage, setCurrentPage] = useState(0);
+  const uniqueId = useId(); // 为每个实例生成唯一ID
 
   // 计算总页数
   const totalPages = Math.ceil(children.length / itemsPerPage);
@@ -26,73 +27,70 @@ export default function PaginatedRow({
     return children.slice(startIndex, endIndex);
   }, [children, currentPage, itemsPerPage]);
 
-  // 是否显示左右按钮
-  const showLeftButton = currentPage > 0;
-  const showRightButton = currentPage < totalPages - 1;
-
+  // 无限循环翻页
   const handlePrevPage = () => {
-    if (currentPage > 0) {
-      setCurrentPage(currentPage - 1);
-    }
+    setCurrentPage((prev) => (prev === 0 ? totalPages - 1 : prev - 1));
   };
 
   const handleNextPage = () => {
-    if (currentPage < totalPages - 1) {
-      setCurrentPage(currentPage + 1);
-    }
+    setCurrentPage((prev) => (prev === totalPages - 1 ? 0 : prev + 1));
   };
 
   // 如果没有足够的内容需要分页，就不显示按钮
   const needsPagination = totalPages > 1;
 
   return (
-    <div className={`relative group ${className}`}>
+    <div
+      className={`relative group ${className}`}
+      data-paginated-row={uniqueId}
+    >
       {/* 内容区域 */}
-      <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
+      <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 relative'>
         {currentItems}
-      </div>
 
-      {/* 左箭头按钮 */}
-      {needsPagination && showLeftButton && (
-        <div className='absolute left-0 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
-          <div className='-translate-x-6'>
+        {/* 改进的导航按钮 - 放在网格中间位置 */}
+        {needsPagination && (
+          <>
+            {/* 左箭头按钮 - 精确定位在两行中间 */}
             <button
               onClick={handlePrevPage}
-              className='w-12 h-12 bg-white/95 rounded-full shadow-lg flex items-center justify-center hover:bg-white border border-gray-200 transition-transform hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-700 dark:border-gray-600'
+              className='absolute -left-12 z-20 w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 opacity-0 group-hover:opacity-100'
+              style={{
+                // 确保按钮在两行中间
+                top: 'calc(50% - 20px)',
+              }}
               aria-label='上一页'
             >
-              <ChevronLeft className='w-6 h-6 text-gray-600 dark:text-gray-300' />
+              <ChevronLeft className='w-5 h-5 text-white' />
             </button>
-          </div>
-        </div>
-      )}
 
-      {/* 右箭头按钮 */}
-      {needsPagination && showRightButton && (
-        <div className='absolute right-0 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
-          <div className='translate-x-6'>
+            {/* 右箭头按钮 - 精确定位在两行中间 */}
             <button
               onClick={handleNextPage}
-              className='w-12 h-12 bg-white/95 rounded-full shadow-lg flex items-center justify-center hover:bg-white border border-gray-200 transition-transform hover:scale-105 dark:bg-gray-800/90 dark:hover:bg-gray-700 dark:border-gray-600'
+              className='absolute -right-12 z-20 w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 opacity-0 group-hover:opacity-100'
+              style={{
+                // 确保按钮在两行中间
+                top: 'calc(50% - 20px)',
+              }}
               aria-label='下一页'
             >
-              <ChevronRight className='w-6 h-6 text-gray-600 dark:text-gray-300' />
+              <ChevronRight className='w-5 h-5 text-white' />
             </button>
-          </div>
-        </div>
-      )}
+          </>
+        )}
+      </div>
 
-      {/* 页码指示器 (可选) */}
+      {/* 优化的页码指示器 */}
       {needsPagination && (
         <div className='flex justify-center mt-4 space-x-2'>
           {Array.from({ length: totalPages }, (_, index) => (
             <button
               key={index}
               onClick={() => setCurrentPage(index)}
-              className={`w-2 h-2 rounded-full transition-colors ${
+              className={`w-2 h-2 rounded-full transition-all duration-200 ${
                 index === currentPage
-                  ? 'bg-purple-500 dark:bg-purple-400'
-                  : 'bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500'
+                  ? 'bg-purple-500 dark:bg-purple-400 scale-125'
+                  : 'bg-gray-300 hover:bg-purple-300 dark:bg-gray-600 dark:hover:bg-purple-500 hover:scale-110'
               }`}
               aria-label={`第 ${index + 1} 页`}
             />