feat: support hoz scrolling

app/hosts/[hostname]/page.tsx

@@ -516,20 +516,28 @@ export default function HostDetail() {
 
   // 播放控制
   const nextFrame = () => {
-    if (currentFrameIndex < records.length - 1) {
+    setCurrentFrameIndex(prevIndex => {
-      setCurrentFrameIndex(currentFrameIndex + 1);
+      if (prevIndex < records.length - 1) {
-      setSelectedRecord(records[currentFrameIndex + 1]);
+        const newIndex = prevIndex + 1;
-    } else {
+        setSelectedRecord(records[newIndex]);
-      setAutoPlay(false);
+        return newIndex;
-    }
+      } else {
+        setAutoPlay(false);
+        return prevIndex;
+      }
+    });
     stopAutoPlayTimer();
   };
 
   const prevFrame = () => {
-    if (currentFrameIndex > 0) {
+    setCurrentFrameIndex(prevIndex => {
-      setCurrentFrameIndex(currentFrameIndex - 1);
+      if (prevIndex > 0) {
-      setSelectedRecord(records[currentFrameIndex - 1]);
+        const newIndex = prevIndex - 1;
-    }
+        setSelectedRecord(records[newIndex]);
+        return newIndex;
+      }
+      return prevIndex;
+    });
     stopAutoPlayTimer();
   };
 
@@ -597,6 +605,24 @@ export default function HostDetail() {
     };
   }, [selectedRecord, toggleAutoPlay, prevFrame, nextFrame, toggleRecordStar]);
 
+  // 滚轮事件处理
+  useEffect(() => {
+    const handleWheel = (event: WheelEvent) => {
+      if (event.deltaX < 0) {
+        // 向左滚动，上一帧
+        prevFrame();
+      } else if (event.deltaX > 0) {
+        // 向右滚动，下一帧
+        nextFrame();
+      }
+    };
+
+    document.addEventListener('wheel', handleWheel, { passive: true });
+    return () => {
+      document.removeEventListener('wheel', handleWheel);
+    };
+  }, [prevFrame, nextFrame]);
+
   // Effects
   useEffect(() => {
     fetchTimeDistribution();
@@ -785,7 +811,6 @@ export default function HostDetail() {
             {selectedRecord && (
               <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
 
-
                 {/* 图片预览区域 */}
                 {selectedRecord.screenshots.map((screenshot, sIndex) => (
                   <div key={sIndex} className="relative mb-6">