From 6288abb771eb2da5eafbfbccdbaffbf0de3b32ca 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: Wed, 6 Aug 2025 21:38:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=BA'=E8=87=AA=E5=8A=A8'=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=94=AE=E7=9B=98=E5=B7=A6=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=8D=89=E5=9B=BE=E9=80=89=E6=8B=A9=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=94=B9=E5=96=84=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E8=AE=A1=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/style/work-flow.css          | 12 ++++++---
 components/pages/work-flow.tsx                |  2 +-
 components/pages/work-flow/thumbnail-grid.tsx | 27 ++++++++++++++++++-
 .../pages/work-flow/use-workflow-data.tsx     |  2 +-
 components/ui/HorizontalScroller.tsx          |  2 +-
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/components/pages/style/work-flow.css b/components/pages/style/work-flow.css
index 6c90f6e..f52b2b8 100644
--- a/components/pages/style/work-flow.css
+++ b/components/pages/style/work-flow.css
@@ -5,20 +5,26 @@
   flex-direction: column;
   width: 100%;
   /* max-width: 1200px; */
-  padding: 0 3rem;
+  /* padding: 0 3rem; */
   height: calc(100vh - 120px);
-  max-height: 800px;
   min-height: 600px;
   display: flex;
   overflow: hidden;
 }
 
+/* 大屏幕适配 */
+@media (width >= 1024px) {
+  .container-H2sRZG {
+    width: 85%;
+  }
+}
+
 /* 小屏幕适配 */
 @media (max-width: 768px) {
   .container-H2sRZG {
     padding-inline: 10px;
     max-width: 100%;
-    padding: 0 1rem;
+    padding: 0 3rem;
     height: calc(100vh - 80px);
     min-height: 500px;
   }
diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index 3e22339..8b28dec 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -225,7 +225,7 @@ export default function WorkFlow() {
                 tooltip={isPauseWorkFlow ? "Play" : "Pause"}
                 onClick={() => setIsPauseWorkFlow(!isPauseWorkFlow)}
               />
-              { mode !== 'auto' && (
+              { mode !== 'automatic' && (
                 <GlassIconButton
                   icon={ChevronLast}
                   size='lg'
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index 3372a77..f9035bb 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -49,9 +49,34 @@ export function ThumbnailGrid({
         behavior: 'smooth'
       });
     }
-    console.log('taskVideos', taskVideos);
   }, [currentSketchIndex, taskSketch.length]);
 
+  // 处理键盘左右键事件
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isVideoPhase = Number(currentStep) > 2 && taskVideos.length > 0 && Number(currentStep) < 6;
+      const maxIndex = isVideoPhase ? taskVideos.length - 1 : taskSketch.length - 1;
+      
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        let newIndex = currentSketchIndex;
+        
+        if (e.key === 'ArrowLeft') {
+          // 向左循环
+          newIndex = currentSketchIndex === 0 ? maxIndex : currentSketchIndex - 1;
+        } else {
+          // 向右循环
+          newIndex = currentSketchIndex === maxIndex ? 0 : currentSketchIndex + 1;
+        }
+        
+        onSketchSelect(newIndex);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentStep, currentSketchIndex, taskSketch.length, taskVideos.length, onSketchSelect]);
+
   // 处理鼠标/触摸拖动事件
   const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     setIsDragging(true);
diff --git a/components/pages/work-flow/use-workflow-data.tsx b/components/pages/work-flow/use-workflow-data.tsx
index 58c2c5d..f263aaa 100644
--- a/components/pages/work-flow/use-workflow-data.tsx
+++ b/components/pages/work-flow/use-workflow-data.tsx
@@ -75,7 +75,7 @@ export function useWorkflowData() {
   const [dataLoadError, setDataLoadError] = useState<string | null>(null);
   const [needStreamData, setNeedStreamData] = useState(false);
   const [isPauseWorkFlow, setIsPauseWorkFlow] = useState(false);
-  const [mode, setMode] = useState<'auto' | 'manual'>('auto');
+  const [mode, setMode] = useState<'automatic' | 'manual'>('automatic');
 
   const dispatch = useAppDispatch();
   const { sketchCount, videoCount } = useAppSelector((state) => state.workflow);
diff --git a/components/ui/HorizontalScroller.tsx b/components/ui/HorizontalScroller.tsx
index 4bd65f8..3fbdf4f 100644
--- a/components/ui/HorizontalScroller.tsx
+++ b/components/ui/HorizontalScroller.tsx
@@ -16,7 +16,7 @@ gsap.registerPlugin(Draggable)
 
 export interface HorizontalScrollerProps {
   children: ReactNode[]
-  itemWidth?: number | 'auto'
+  itemWidth?: number | string
   gap?: number
   selectedIndex?: number
   onItemClick?: (index: number) => void