fix: hoz scroll too fast; feat: img preload

app/hosts/[hostname]/page.tsx

@@ -124,6 +124,7 @@ export default function HostDetail() {
   const [imagesLoadedCount, setImagesLoadedCount] = useState(0);
   const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
   const autoPlayTimer = useRef<NodeJS.Timeout | null>(null);
+  const wheelDeltaAccumulator = useRef(0);
 
   // 格式化内存大小
   const formatMemory = (bytes: number | string) => {
@@ -516,28 +517,20 @@ export default function HostDetail() {
 
   // 播放控制
   const nextFrame = () => {
-    setCurrentFrameIndex(prevIndex => {
+    if (currentFrameIndex < records.length - 1) {
-      if (prevIndex < records.length - 1) {
+      setCurrentFrameIndex(currentFrameIndex + 1);
-        const newIndex = prevIndex + 1;
+      setSelectedRecord(records[currentFrameIndex + 1]);
-        setSelectedRecord(records[newIndex]);
+    } else {
-        return newIndex;
+      setAutoPlay(false);
-      } else {
+    }
-        setAutoPlay(false);
-        return prevIndex;
-      }
-    });
     stopAutoPlayTimer();
   };
 
   const prevFrame = () => {
-    setCurrentFrameIndex(prevIndex => {
+    if (currentFrameIndex > 0) {
-      if (prevIndex > 0) {
+      setCurrentFrameIndex(currentFrameIndex - 1);
-        const newIndex = prevIndex - 1;
+      setSelectedRecord(records[currentFrameIndex - 1]);
-        setSelectedRecord(records[newIndex]);
+    }
-        return newIndex;
-      }
-      return prevIndex;
-    });
     stopAutoPlayTimer();
   };
 
@@ -607,22 +600,37 @@ export default function HostDetail() {
 
   // 滚轮事件处理
   useEffect(() => {
+    const WHEEL_THRESHOLD = 20; // 累计多少像素后才切换（可调整）
+
     const handleWheel = (event: WheelEvent) => {
-      if (event.deltaX < 0) {
+      // 累计水平滚动距离
-        // 向左滚动，上一帧
+      wheelDeltaAccumulator.current += event.deltaX;
-        prevFrame();
+
-      } else if (event.deltaX > 0) {
+      // 检查是否超过阈值
-        // 向右滚动，下一帧
+      if (Math.abs(wheelDeltaAccumulator.current) >= WHEEL_THRESHOLD) {
-        nextFrame();
+        if (wheelDeltaAccumulator.current < 0) {
+          // 向左滚动，上一帧
+          prevFrame();
+        } else {
+          // 向右滚动，下一帧
+          nextFrame();
+        }
+        // 重置累计器
+        wheelDeltaAccumulator.current = 0;
       }
     };
 
     document.addEventListener('wheel', handleWheel, { passive: true });
     return () => {
       document.removeEventListener('wheel', handleWheel);
+      // 清理累计器
+      wheelDeltaAccumulator.current = 0;
     };
   }, [prevFrame, nextFrame]);
 
+
+
+
   // Effects
   useEffect(() => {
     fetchTimeDistribution();
@@ -810,7 +818,12 @@ export default function HostDetail() {
             {/* 图片预览区域及控制按钮 */}
             {selectedRecord && (
               <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
-
+                {
+                  !(navigator as any).connection?.saveData &&
+                  records.map(record => record.screenshots).flat()
+                    .filter((_, index) => Math.abs(index - currentFrameIndex) <= 20)
+                    .map(screenshot => <link rel="preload" key={screenshot.fileId} href={`/screenshots/${screenshot.fileId}`} as="image" />)
+                }
                 {/* 图片预览区域 */}
                 {selectedRecord.screenshots.map((screenshot, sIndex) => (
                   <div key={sIndex} className="relative mb-6">
@@ -875,8 +888,8 @@ export default function HostDetail() {
                     <button
                       onClick={toggleAutoPlay}
                       className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm ${autoPlay
-                          ? 'bg-red-500 hover:bg-red-600 text-white shadow-red-500/25'
+                        ? 'bg-red-500 hover:bg-red-600 text-white shadow-red-500/25'
-                          : 'bg-blue-500 hover:bg-blue-600 text-white shadow-blue-500/25'
+                        : 'bg-blue-500 hover:bg-blue-600 text-white shadow-blue-500/25'
                         } hover:shadow-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 ${autoPlay ? 'focus:ring-red-500' : 'focus:ring-blue-500'
                         }`}
                     >
@@ -902,8 +915,8 @@ export default function HostDetail() {
                       onClick={() => toggleRecordStar(selectedRecord.id)}
                       disabled={updatingStars.has(selectedRecord.id)}
                       className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm border ${selectedRecord.isStarred
-                          ? 'bg-yellow-50 hover:bg-yellow-100 dark:bg-yellow-900/20 dark:hover:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 shadow-yellow-500/20'
+                        ? 'bg-yellow-50 hover:bg-yellow-100 dark:bg-yellow-900/20 dark:hover:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 shadow-yellow-500/20'
-                          : 'bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600 hover:text-yellow-600 dark:hover:text-yellow-400'
+                        : 'bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600 hover:text-yellow-600 dark:hover:text-yellow-400'
                         } ${updatingStars.has(selectedRecord.id)
                           ? 'opacity-50 cursor-not-allowed'
                           : 'hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500'