使用虚拟滚动

Author: senshinya

.vscode/settings.json

@@ -5,7 +5,9 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   // Tailwind CSS Autocomplete, add more if used in projects
   "tailwindCSS.classAttributes": [
     "class",
@@ -14,4 +16,4 @@
     "containerClassName"
   ],
   "typescript.preferences.importModuleSpecifier": "non-relative"
-}
+}

CHANGELOG

@@ -1,3 +1,9 @@
+## [100.1.1] - 2026-02-27
+
+### Changed
+
+- 搜索页使用虚拟滚动，优化滚动性能
+
 ## [100.1.0] - 2026-02-27
 
 ### Added

VERSION.txt

@@ -1 +1 @@
-100.1.0
+100.1.1

docker-compose.dev.yml

@@ -0,0 +1,39 @@
+version: '3.8'
+
+services:
+  redis:
+    image: redis:7-alpine
+    container_name: lunatv-redis
+    volumes:
+      - redis-data:/data
+    command: redis-server --appendonly yes
+    healthcheck:
+      test: ['CMD', 'redis-cli', 'ping']
+      interval: 5s
+      timeout: 3s
+      retries: 5
+
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: lunatv-app
+    ports:
+      - '3000:3000'
+    depends_on:
+      redis:
+        condition: service_healthy
+    environment:
+      # 存储类型：使用 redis
+      - NEXT_PUBLIC_STORAGE_TYPE=redis
+      # Redis 连接地址（容器内通过 service name 访问）
+      - REDIS_URL=redis://redis:6379
+      # 站长账号
+      - USERNAME=admin
+      # 站长密码
+      - PASSWORD=admin123
+      # 站点名称（可选）
+      - NEXT_PUBLIC_SITE_NAME=MoonTV
+
+volumes:
+  redis-data:

package.json

@@ -25,6 +25,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
+    "@tanstack/react-virtual": "^3.13.19",
     "@types/crypto-js": "^4.2.2",
     "@upstash/redis": "^1.25.0",
     "@vidstack/react": "^1.12.13",

pnpm-lock.yaml

@@ -0,0 +1,40 @@
+#!/bin/bash
+# 本地构建并启动 Docker 镜像 + Redis
+# 用法: ./scripts/dev-docker.sh [up|down|rebuild|logs]
+
+set -e
+
+COMPOSE_FILE="docker-compose.dev.yml"
+
+case "${1:-up}" in
+  up)
+    echo "🚀 构建并启动服务..."
+    docker compose -f "$COMPOSE_FILE" up -d --build
+    echo ""
+    echo "✅ 服务已启动"
+    echo "   应用: http://localhost:3000"
+    echo "   Redis: localhost:6379"
+    echo ""
+    echo "   默认账号: admin / admin123"
+    echo "   查看日志: ./scripts/dev-docker.sh logs"
+    echo "   停止服务: ./scripts/dev-docker.sh down"
+    ;;
+  down)
+    echo "🛑 停止并移除服务..."
+    docker compose -f "$COMPOSE_FILE" down
+    echo "✅ 已停止"
+    ;;
+  rebuild)
+    echo "🔄 重新构建并启动..."
+    docker compose -f "$COMPOSE_FILE" down
+    docker compose -f "$COMPOSE_FILE" up -d --build --force-recreate
+    echo "✅ 已重新构建并启动"
+    ;;
+  logs)
+    docker compose -f "$COMPOSE_FILE" logs -f
+    ;;
+  *)
+    echo "用法: $0 [up|down|rebuild|logs]"
+    exit 1
+    ;;
+esac

scripts/dev-docker.sh

@@ -19,6 +19,7 @@ import DoubanCustomSelector from '@/components/DoubanCustomSelector';
 import DoubanSelector from '@/components/DoubanSelector';
 import PageLayout from '@/components/PageLayout';
 import VideoCard from '@/components/VideoCard';
+import VirtualGrid from '@/components/VirtualGrid';
 
 function DoubanPageClient() {
   const searchParams = useSearchParams();
@@ -754,12 +755,18 @@ function DoubanPageClient() {
         {/* 内容展示区域 */}
         <div className='max-w-[95%] mx-auto mt-8 overflow-visible'>
           {/* 内容网格 */}
-          <div className='justify-start grid grid-cols-3 gap-x-2 gap-y-12 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] sm:gap-x-8 sm:gap-y-20'>
-            {loading || !selectorsReady
-              ? // 显示骨架屏
-              skeletonData.map((index) => <DoubanCardSkeleton key={index} />)
-              : // 显示实际数据
-              doubanData.map((item, index) => (
+          {loading || !selectorsReady
+            ? // 显示骨架屏
+            <div className='justify-start grid grid-cols-3 gap-x-2 gap-y-12 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] sm:gap-x-8 sm:gap-y-20'>
+              {skeletonData.map((index) => <DoubanCardSkeleton key={index} />)}
+            </div>
+            : // 显示实际数据
+            <VirtualGrid
+              items={doubanData}
+              className='grid-cols-3 gap-x-2 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] sm:gap-x-8'
+              rowGapClass='pb-12 sm:pb-20'
+              estimateRowHeight={320}
+              renderItem={(item, index) => (
                 <div key={`${item.title}-${index}`} className='w-full'>
                   <VideoCard
                     from='douban'
@@ -774,8 +781,9 @@ function DoubanPageClient() {
                     }
                   />
                 </div>
-              ))}
-          </div>
+              )}
+            />
+          }
 
           {/* 加载更多指示器 */}
           {hasMore && !loading && (