更新工作流组件，修改模式状态为'自动'，增加键盘左右键事件处理以支持草图选择，调整样式以改善响应式设计。

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;
   }

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'

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);

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);

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