From a6b1be4e631940a0bf0cec1a8634de06f422afe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Mon, 7 Jul 2025 12:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=E9=94=AE=E7=9B=98=E5=B7=A6=E5=8F=B3=E7=AE=AD?=
 =?UTF-8?q?=E5=A4=B4=E6=8C=89=E9=92=AE=E6=8E=A7=E5=88=B6=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/video-screen-layout.tsx | 39 +++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/components/video-screen-layout.tsx b/components/video-screen-layout.tsx
index 00e7c51..d2e8f5d 100644
--- a/components/video-screen-layout.tsx
+++ b/components/video-screen-layout.tsx
@@ -1,6 +1,6 @@
 'use client'; // Add this to ensure it's a client component
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { ChevronLeft, ChevronRight, Volume2, VolumeX, Play, Pause } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import dynamic from 'next/dynamic';
@@ -76,15 +76,15 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
   };
 
   // 应用音量设置到视频元素
-  const applyVolumeSettings = (videoElement: HTMLVideoElement) => {
+  const applyVolumeSettings = useCallback((videoElement: HTMLVideoElement) => {
     if (videoElement) {
       videoElement.volume = volume;
       videoElement.muted = isMuted;
     }
-  };
+  }, [volume, isMuted]);
 
   // 处理切换
-  const handleSlide = (direction: 'prev' | 'next') => {
+  const handleSlide = useCallback((direction: 'prev' | 'next') => {
     if (isAnimating) return;
 
     setIsAnimating(true);
@@ -112,7 +112,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
         }
       }
     }, 500);
-  };
+  }, [isAnimating, currentIndex, videos.length, isPlaying, applyVolumeSettings]);
 
   // 音量设置变化时应用到当前视频
   useEffect(() => {
@@ -120,7 +120,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
     if (currentVideo) {
       applyVolumeSettings(currentVideo);
     }
-  }, [volume, isMuted, currentIndex]);
+  }, [volume, isMuted, currentIndex, applyVolumeSettings]);
 
   // 播放状态变化时应用到当前视频
   useEffect(() => {
@@ -142,6 +142,33 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
     setIsPlaying(!isPlaying);
   };
 
+  // 键盘事件监听器 - 添加左右箭头键控制
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // 检查是否正在动画中，如果是则不处理
+      if (isAnimating) return;
+      
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault(); // 阻止默认行为
+          handleSlide('prev');
+          break;
+        case 'ArrowRight':
+          event.preventDefault(); // 阻止默认行为
+          handleSlide('next');
+          break;
+      }
+    };
+
+    // 添加键盘事件监听器
+    window.addEventListener('keydown', handleKeyDown);
+
+    // 清理函数 - 组件卸载时移除监听器
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isAnimating, handleSlide]); // 添加handleSlide到依赖项
+
   return (
     <div className="relative w-full h-[360px] overflow-hidden bg-[var(--background)]">
       {/* 视频面板容器 */}