继续观看列表使用虚拟滚动

src/components/ContinueWatching.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/lib/db.client';
 
 import VideoCard from '@/components/VideoCard';
-import ScrollableRow from '@/components/ScrollableRow';
+import VirtualScrollableRow from '@/components/VirtualScrollableRow';
 
 interface ContinueWatchingProps {
   className?: string;
@@ -103,56 +103,60 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
           </button>
         )}
       </div>
-      <ScrollableRow>
-        {loading
-          ? // 加载状态显示灰色占位数据
-            Array.from({ length: 8 }).map((_, index) => (
+      {loading ? (
+        // 加载状态显示灰色占位数据（使用原始 ScrollableRow）
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide">
+          {Array.from({ length: 8 }).map((_, index) => (
+            <div
+              key={index}
+              className='min-w-[180px] w-48 sm:min-w-[200px] sm:w-52'
+            >
+              <div className='relative aspect-[3/2] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
+                <div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
+              </div>
+              <div className='mt-1 h-1 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
+              <div className='mt-2 h-4 bg-gray-200 rounded animate-pulse dark:bg-gray-800 w-3/4'></div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        // 使用虚拟滚动显示真实数据
+        <VirtualScrollableRow>
+          {playRecords.map((record) => {
+            const { source, id } = parseKey(record.key);
+            return (
               <div
-                key={index}
+                key={record.key}
                 className='min-w-[180px] w-48 sm:min-w-[200px] sm:w-52'
               >
-                <div className='relative aspect-[3/2] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
-                  <div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
-                </div>
-                <div className='mt-1 h-1 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
-                <div className='mt-2 h-4 bg-gray-200 rounded animate-pulse dark:bg-gray-800 w-3/4'></div>
+                <VideoCard
+                  id={id}
+                  title={record.title}
+                  poster={record.cover}
+                  year={record.year}
+                  source={source}
+                  source_name={record.source_name}
+                  progress={getProgress(record)}
+                  episodes={record.total_episodes}
+                  currentEpisode={record.index}
+                  query={record.search_title}
+                  from='playrecord'
+                  onDelete={() =>
+                    setPlayRecords((prev) =>
+                      prev.filter((r) => r.key !== record.key)
+                    )
+                  }
+                  type={record.total_episodes > 1 ? 'tv' : ''}
+                  origin={record.origin}
+                  orientation='horizontal'
+                  playTime={record.play_time}
+                  totalTime={record.total_time}
+                />
               </div>
-            ))
-          : // 显示真实数据
-            playRecords.map((record) => {
-              const { source, id } = parseKey(record.key);
-              return (
-                <div
-                  key={record.key}
-                  className='min-w-[180px] w-48 sm:min-w-[200px] sm:w-52'
-                >
-                  <VideoCard
-                    id={id}
-                    title={record.title}
-                    poster={record.cover}
-                    year={record.year}
-                    source={source}
-                    source_name={record.source_name}
-                    progress={getProgress(record)}
-                    episodes={record.total_episodes}
-                    currentEpisode={record.index}
-                    query={record.search_title}
-                    from='playrecord'
-                    onDelete={() =>
-                      setPlayRecords((prev) =>
-                        prev.filter((r) => r.key !== record.key)
-                      )
-                    }
-                    type={record.total_episodes > 1 ? 'tv' : ''}
-                    origin={record.origin}
-                    orientation='horizontal'
-                    playTime={record.play_time}
-                    totalTime={record.total_time}
-                  />
-                </div>
-              );
-            })}
-      </ScrollableRow>
+            );
+          })}
+        </VirtualScrollableRow>
+      )}
     </section>
   );
 }