From 62f70a9bf5755186b857b7f0eadeeab923fad3a9 Mon Sep 17 00:00:00 2001
From: katelya <katelya77@gmail.com>
Date: Thu, 4 Sep 2025 16:07:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96PaginatedRow=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E7=BF=BB=E9=A1=B5=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E6=94=B9=E8=BF=9B=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PaginatedRow.tsx | 73 +++++++++++----------------------
 1 file changed, 25 insertions(+), 48 deletions(-)

diff --git a/src/components/PaginatedRow.tsx b/src/components/PaginatedRow.tsx
index 133854b..0ccd590 100644
--- a/src/components/PaginatedRow.tsx
+++ b/src/components/PaginatedRow.tsx
@@ -32,15 +32,14 @@ export default function PaginatedRow({
     }
   }, [children, startIndex, itemsPerPage]);
 
-  // 向前翻页
+  // 向前翻页 - 只有不在第一页时才能向前
   const handlePrevPage = () => {
-    setStartIndex((prev) => {
-      const newIndex = prev - itemsPerPage;
-      return newIndex < 0 ? Math.max(0, children.length - itemsPerPage) : newIndex;
-    });
+    if (startIndex > 0) {
+      setStartIndex((prev) => Math.max(0, prev - itemsPerPage));
+    }
   };
 
-  // 向后翻页 - 支持无限浏览
+  // 向后翻页 - 支持无限浏览，到达末尾时循环到开头
   const handleNextPage = () => {
     setStartIndex((prev) => {
       const newIndex = prev + itemsPerPage;
@@ -49,11 +48,9 @@ export default function PaginatedRow({
     });
   };
 
-  // 计算当前页码用于指示器
-  const currentPageIndex = Math.floor(startIndex / itemsPerPage);
-  const totalPages = Math.ceil(children.length / itemsPerPage);
-
-  // 如果没有足够的内容需要分页，就不显示按钮
+  // 检查是否可以向前翻页
+  const canGoPrev = startIndex > 0;
+  // 检查是否需要显示翻页按钮
   const needsPagination = children.length > itemsPerPage;
 
   return (
@@ -70,22 +67,24 @@ export default function PaginatedRow({
         {/* 改进的导航按钮 - 仅在容器悬停时显示 */}
         {needsPagination && (
           <>
-            {/* 左箭头按钮 */}
-            <button
-              onClick={handlePrevPage}
-              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 ${
-                isHovered ? 'opacity-100' : 'opacity-0'
-              }`}
-              style={{
-                // 确保按钮在两行中间
-                top: 'calc(50% - 20px)',
-              }}
-              aria-label='上一页'
-            >
-              <ChevronLeft className='w-5 h-5 text-white' />
-            </button>
+            {/* 左箭头按钮 - 只有不在第一页时才显示 */}
+            {canGoPrev && (
+              <button
+                onClick={handlePrevPage}
+                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 ${
+                  isHovered ? 'opacity-100' : 'opacity-0'
+                }`}
+                style={{
+                  // 确保按钮在两行中间
+                  top: 'calc(50% - 20px)',
+                }}
+                aria-label='上一页'
+              >
+                <ChevronLeft className='w-5 h-5 text-white' />
+              </button>
+            )}
 
-            {/* 右箭头按钮 */}
+            {/* 右箭头按钮 - 始终显示 */}
             <button
               onClick={handleNextPage}
               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 ${
@@ -102,28 +101,6 @@ export default function PaginatedRow({
           </>
         )}
       </div>
-
-      {/* 优化的页码指示器 - 显示无限浏览状态 */}
-      {needsPagination && (
-        <div className='flex justify-center mt-4 space-x-2'>
-          {Array.from({ length: Math.min(totalPages, 5) }, (_, index) => {
-            // 显示当前页附近的页码指示器
-            const displayIndex = (currentPageIndex + index) % totalPages;
-            return (
-              <button
-                key={`${displayIndex}-${currentPageIndex}`}
-                onClick={() => setStartIndex(displayIndex * itemsPerPage)}
-                className={`w-2 h-2 rounded-full transition-all duration-200 ${
-                  index === 0
-                    ? '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={`第 ${displayIndex + 1} 页`}
-              />
-            );
-          })}
-        </div>
-      )}
     </div>
   );
 }