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' && ( { + 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) => { 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(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