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

2025-09-04 14:24:13 +08:00
parent b9222cf33d
commit c755a6d466
4 changed files with 136 additions and 26 deletions
@@ -16,9 +16,12 @@ concurrency:
  cancel-in-progress: true
 env:
  REGISTRY: ghcr.io
+  IMAGE_NAME: katelya77/katelyatv
 jobs:
  build-and-push:
    runs-on: ubuntu-latest
+    env:
+      IMAGE_NAME: ${{ github.repository }}
    permissions:
      contents: read
      packages: write
@@ -35,7 +38,8 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Set image name to lowercase
-        run: echo "IMAGE_NAME=$(echo '${{ github.repository }}' | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+        id: image_name
+        run: echo "name=$(echo '${{ github.repository }}' | tr '[:upper:]' '[:lower:]')" >> $GITHUB_OUTPUT
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
        with:
@@ -52,7 +56,7 @@ jobs:
        id: meta
        uses: docker/metadata-action@v5
        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          images: ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}
          tags: |
            type=ref,event=branch
            type=ref,event=pr
@@ -63,8 +67,6 @@ jobs:
            org.opencontainers.image.description=katelyatv - A modern streaming platform
            org.opencontainers.image.url=${{ github.server_url }}/${{ github.repository }}
            org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }}
-            org.opencontainers.image.version=${{ steps.meta.outputs.version }}
-            org.opencontainers.image.created=${{ steps.meta.outputs.created }}
            org.opencontainers.image.revision=${{ github.sha }}
            org.opencontainers.image.licenses=MIT
      - name: Build Docker image
@@ -78,7 +80,7 @@ jobs:
          cache-from: type=gha,scope=${{ github.ref_name }}-${{ matrix.platform }}
          cache-to: type=gha,mode=max,scope=${{ github.ref_name }}-${{ matrix.platform }}
          outputs: |
-            type=image,name=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=${{ github.event_name != 'pull_request' }}
+            type=image,name=${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }},push-by-digest=true,name-canonical=true,push=${{ github.event_name != 'pull_request' }}
          provenance: false
          sbom: false
      - name: Export digest
@@ -105,9 +107,12 @@ jobs:
    needs:
      - build-and-push
    if: github.event_name != 'pull_request'
+    env:
+      REGISTRY: ghcr.io
    steps:
      - name: Set image name to lowercase
-        run: echo "IMAGE_NAME=$(echo '${{ github.repository }}' | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+        id: image_name
+        run: echo "name=$(echo '${{ github.repository }}' | tr '[:upper:]' '[:lower:]')" >> $GITHUB_OUTPUT
      - name: Download digests
        uses: actions/download-artifact@v4
        with:
@@ -126,7 +131,7 @@ jobs:
        id: meta
        uses: docker/metadata-action@v5
        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          images: ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}
          tags: |
            type=ref,event=branch
            type=sha,prefix={{branch}}-
@@ -135,28 +140,28 @@ jobs:
        working-directory: /tmp/digests
        run: |
          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}@sha256:%s ' *)
+            $(printf '${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}@sha256:%s ' *)
      - name: Get multi-arch digest
        id: get_digest
        run: |
          # 直接从 docker pull 获取 digest，这是最可靠的方法
-          digest=$(docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }} 2>&1 | grep "Digest:" | cut -d' ' -f2 || echo "")
+          digest=$(docker pull ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}:${{ steps.meta.outputs.version }} 2>&1 | grep "Digest:" | cut -d' ' -f2 || echo "")
          if [ -z "$digest" ]; then
            # 备选方案：使用 crane 风格的检查（如果支持的话）
-            digest=$(docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }} | grep "Digest:" | head -1 | cut -d' ' -f2 || echo "")
+            digest=$(docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}:${{ steps.meta.outputs.version }} | grep "Digest:" | head -1 | cut -d' ' -f2 || echo "")
          fi
          if [ -z "$digest" ]; then
            # 最后备选：从 raw manifest 计算
-            digest=$(docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }} --raw | sha256sum | awk '{print "sha256:"$1}')
+            digest=$(docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}:${{ steps.meta.outputs.version }} --raw | sha256sum | awk '{print "sha256:"$1}')
          fi
          echo "digest=$digest" >> $GITHUB_OUTPUT
      - name: Inspect image
        run: |
-          docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+          docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name }}:${{ steps.meta.outputs.version }}
      - name: Generate artifact attestation
        if: github.event_name != 'pull_request'
        uses: actions/attest-build-provenance@v1
        with:
-          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
+          subject-name: ${{ env.REGISTRY }}/${{ steps.image_name.outputs.name}}
          subject-digest: ${{ steps.get_digest.outputs.digest }}
          push-to-registry: true
@@ -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,