feat: 添加分页组件PaginatedRow，优化首页内容展示逻辑

2025-09-04 14:24:13 +08:00
parent b9222cf33d
commit c755a6d466
4 changed files with 136 additions and 26 deletions
@@ -20,6 +20,7 @@ import { DoubanItem } from '@/lib/types';
 import CapsuleSwitch from '@/components/CapsuleSwitch';
 import ContinueWatching from '@/components/ContinueWatching';
 import PageLayout from '@/components/PageLayout';
+import PaginatedRow from '@/components/PaginatedRow';
 import { useSite } from '@/components/SiteProvider';
 import VideoCard from '@/components/VideoCard';

@@ -291,7 +292,7 @@ function HomeClient() {
                    <ChevronRight className='w-4 h-4 ml-1' />
                  </Link>
                </div>
-                <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
+                <PaginatedRow itemsPerPage={10}>
                  {loading
                    ? // 加载状态显示灰色占位数据 (显示10个，2行x5列)
                      Array.from({ length: 10 }).map((_, index) => (
@@ -305,8 +306,8 @@ function HomeClient() {
                          <div className='mt-2 h-4 bg-purple-200 rounded animate-pulse dark:bg-purple-800'></div>
                        </div>
                      ))
-                    : // 显示真实数据，只显示前10个实现2行布局
-                      hotMovies.slice(0, 10).map((movie, index) => (
+                    : // 显示真实数据
+                      hotMovies.map((movie, index) => (
                        <div
                          key={index}
                          className='w-full'
@@ -322,7 +323,7 @@ function HomeClient() {
                          />
                        </div>
                      ))}
-                </div>
+                </PaginatedRow>
              </section>

              {/* 热门剧集 */}
@@ -339,7 +340,7 @@ function HomeClient() {
                    <ChevronRight className='w-4 h-4 ml-1' />
                  </Link>
                </div>
-                <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
+                <PaginatedRow itemsPerPage={10}>
                  {loading
                    ? // 加载状态显示灰色占位数据 (显示10个，2行x5列)
                      Array.from({ length: 10 }).map((_, index) => (
@@ -353,8 +354,8 @@ function HomeClient() {
                          <div className='mt-2 h-4 bg-purple-200 rounded animate-pulse dark:bg-purple-800'></div>
                        </div>
                      ))
-                    : // 显示真实数据，只显示前10个实现2行布局
-                      hotTvShows.slice(0, 10).map((show, index) => (
+                    : // 显示真实数据
+                      hotTvShows.map((show, index) => (
                        <div
                          key={index}
                          className='w-full'
@@ -369,7 +370,7 @@ function HomeClient() {
                          />
                        </div>
                      ))}
-                </div>
+                </PaginatedRow>
              </section>

              {/* 热门综艺 */}
@@ -386,7 +387,7 @@ function HomeClient() {
                    <ChevronRight className='w-4 h-4 ml-1' />
                  </Link>
                </div>
-                <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
+                <PaginatedRow itemsPerPage={10}>
                  {loading
                    ? // 加载状态显示灰色占位数据 (显示10个，2行x5列)
                      Array.from({ length: 10 }).map((_, index) => (
@@ -400,8 +401,8 @@ function HomeClient() {
                          <div className='mt-2 h-4 bg-purple-200 rounded animate-pulse dark:bg-purple-800'></div>
                        </div>
                      ))
-                    : // 显示真实数据，只显示前10个实现2行布局
-                      hotVarietyShows.slice(0, 10).map((show, index) => (
+                    : // 显示真实数据
+                      hotVarietyShows.map((show, index) => (
                        <div
                          key={index}
                          className='w-full'
@@ -416,7 +417,7 @@ function HomeClient() {
                          />
                        </div>
                      ))}
-                </div>
+                </PaginatedRow>
              </section>

              {/* 首页底部 Logo */}
@@ -0,0 +1,104 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+interface PaginatedRowProps {
+  children: React.ReactNode[];
+  itemsPerPage?: number;
+  className?: string;
+}
+
+export default function PaginatedRow({
+  children,
+  itemsPerPage = 10,
+  className = '',
+}: PaginatedRowProps) {
+  const [currentPage, setCurrentPage] = useState(0);
+
+  // 计算总页数
+  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 showLeftButton = currentPage > 0;
+  const showRightButton = currentPage < totalPages - 1;
+
+  const handlePrevPage = () => {
+    if (currentPage > 0) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages - 1) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  // 如果没有足够的内容需要分页，就不显示按钮
+  const needsPagination = totalPages > 1;
+
+  return (
+    <div className={`relative group ${className}`}>
+      {/* 内容区域 */}
+      <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4'>
+        {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'>
+            <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'
+              aria-label='上一页'
+            >
+              <ChevronLeft className='w-6 h-6 text-gray-600 dark:text-gray-300' />
+            </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'
+              aria-label='下一页'
+            >
+              <ChevronRight className='w-6 h-6 text-gray-600 dark:text-gray-300' />
+            </button>
+          </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 ${
+                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'
+              }`}
+              aria-label={`第 ${index + 1} 页`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -228,7 +228,7 @@ export default function VideoCard({
    const configs = {
      playrecord: {
        showSourceName: true,
-        showProgress: true,
+        showProgress: false,
        showPlayButton: true,
        showHeart: true,
        showCheckCircle: true,