暂存修改

components/pages/work-flow.tsx

@@ -81,76 +81,6 @@ export default function WorkFlow() {
     }
   }, [taskSketch.length, currentSketchIndex]);
 
-  // 第一个分镜视频生成完成时停止循环播放并切换到第一个
-  useEffect(() => {
-    if (taskVideos.length === 1 && isPlaying) {
-      console.log('第一个分镜视频生成完成，停止循环播放并切换到第一个分镜');
-      setIsPlaying(false); // 停止循环播放
-      setCurrentSketchIndex(0); // 切换到第一个分镜
-    }
-  }, [taskVideos.length, isPlaying, setIsPlaying, setCurrentSketchIndex]);
-
-  // 分镜草图生成完毕后自动开始播放
-  useEffect(() => {
-    if (
-      !isGeneratingSketch && // 分镜草图生成完毕
-      taskSketch.length > 0 && // 有分镜草图数据
-      sketchCount === totalSketchCount && // 确保所有分镜草图都生成完毕
-      (currentStep === '1' || currentStep === '2') && // 允许在步骤1或步骤2初期触发
-      !hasAutoStartedRef.current && // 还没有自动开始过播放
-      !isPlaying // 当前没有播放
-    ) {
-      console.log('所有分镜草图生成完毕，自动开始播放');
-      // 添加小延迟确保状态完全更新
-      setTimeout(() => {
-        hasAutoStartedRef.current = true;
-        setIsPlaying(true); // 自动开始播放
-      }, 500);
-    }
-    
-    // 当切换到步骤3及以后时重置标记
-    if (Number(currentStep) >= 3) {
-      hasAutoStartedRef.current = false;
-    }
-  }, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]);
-
-  // 处理自动播放的分镜切换逻辑 仅循环一轮
-  useEffect(() => {
-    if (isPlaying && taskSketch.length > 0) {
-      console.log('开始自动切换分镜，总数:', taskSketch.length);
-      
-      // 记录循环开始时的索引
-      if (loopStartIndexRef.current === null) {
-        loopStartIndexRef.current = currentSketchIndex;
-        console.log('记录循环起始索引:', currentSketchIndex);
-      }
-      
-      const interval = setInterval(() => {
-        setCurrentSketchIndex((prev: number) => {
-          const nextIndex = (prev + 1) % taskSketch.length;
-          
-          // 检查是否完成了一轮循环（回到起始索引）
-          if (nextIndex === loopStartIndexRef.current && prev !== loopStartIndexRef.current) {
-            console.log('完成一轮循环，停止自动播放');
-            setTimeout(() => {
-              setIsPlaying(false);
-              loopStartIndexRef.current = null; // 重置循环起始索引
-            }, 1000); // 延迟1秒停止，让最后一个分镜显示完整
-          }
-          
-          return nextIndex;
-        });
-      }, 1000);
-      
-      return () => {
-        clearInterval(interval);
-      };
-    } else {
-      // 当停止播放时重置循环起始索引
-      loopStartIndexRef.current = null;
-    }
-  }, [isPlaying, taskSketch.length, setCurrentSketchIndex, currentSketchIndex]);
-
   // 模拟 AI 建议 英文
   const mockSuggestions = [
     "Refine scene transitions",

components/pages/work-flow/task-info.tsx

@@ -20,6 +20,10 @@ interface TaskInfoProps {
   taskObject: any;
   currentLoadingText: string;
   dataLoadError?: string | null;
+  currentStep: string;
+  sketchCount: number;
+  isGeneratingVideo: boolean;
+  taskVideos: any[];
 }
 
 // 根据加载文本返回对应的图标
@@ -47,9 +51,133 @@ const getStageIcon = (loadingText: string) => {
 
 const TAG_COLORS = ['#FF5733', '#126821', '#8d3913', '#FF33A1', '#A133FF', '#FF3333', '#3333FF', '#A1A1A1', '#a1115e', '#30527f'];
 
-export function TaskInfo({ isLoading, taskObject, currentLoadingText, dataLoadError }: TaskInfoProps) {
+export function TaskInfo({ 
+  isLoading, 
+  taskObject, 
+  currentLoadingText, 
+  dataLoadError,
+  currentStep,
+  sketchCount,
+  isGeneratingVideo,
+  taskVideos
+}: TaskInfoProps) {
   const StageIcon = getStageIcon(currentLoadingText);
   const [isScriptModalOpen, setIsScriptModalOpen] = useState(false);
+  const [currentStage, setCurrentStage] = useState(0);
+  const prevSketchCountRef = useRef(sketchCount);
+  const prevIsGeneratingVideoRef = useRef(isGeneratingVideo);
+  const prevTaskVideosLengthRef = useRef(taskVideos?.length || 0);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  // 监听 currentStep 为 '1' 的情况
+  useEffect(() => {
+    console.log('Current Step Effect:', { currentStep, hasTitle: !!taskObject?.title });
+    
+    // 清除之前的定时器
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
+    if (currentStep === '1' && taskObject?.title) {
+      console.log('Setting up timer for script modal...');
+      timerRef.current = setTimeout(() => {
+        console.log('Opening script modal with stage 0');
+        setIsScriptModalOpen(true);
+        setCurrentStage(0);
+      }, 5000);
+    }
+  }, [currentStep, taskObject?.title]);
+
+  // 监听 sketchCount 变化
+  useEffect(() => {
+    console.log('SketchCount Effect:', { 
+      prevCount: prevSketchCountRef.current, 
+      currentCount: sketchCount,
+      isModalOpen: isScriptModalOpen 
+    });
+
+    // 从 0 变为 1 时关闭弹窗
+    if (prevSketchCountRef.current === 0 && sketchCount === 1) {
+      console.log('Closing modal: sketchCount changed from 0 to 1');
+      setIsScriptModalOpen(false);
+    }
+    // 从 1 变为其他非 0 值时切换弹窗
+    else if (prevSketchCountRef.current === 1 && sketchCount !== 0 && sketchCount !== 1) {
+      console.log('Toggling modal: sketchCount changed from 1 to other value');
+      setIsScriptModalOpen(prev => {
+        const newState = !prev;
+        if (newState) {
+          setCurrentStage(1);
+        }
+        return newState;
+      });
+    }
+
+    prevSketchCountRef.current = sketchCount;
+  }, [sketchCount]);
+
+  // 监听视频生成状态变化
+  useEffect(() => {
+    const currentTaskVideosLength = taskVideos?.length || 0;
+    console.log('Video Generation Effect:', {
+      prevGenerating: prevIsGeneratingVideoRef.current,
+      currentGenerating: isGeneratingVideo,
+      prevVideosLength: prevTaskVideosLengthRef.current,
+      currentVideosLength: currentTaskVideosLength,
+      isModalOpen: isScriptModalOpen
+    });
+
+    if (
+      (prevIsGeneratingVideoRef.current === false && isGeneratingVideo === true) ||
+      prevTaskVideosLengthRef.current !== currentTaskVideosLength
+    ) {
+      console.log('Toggling modal due to video generation changes');
+      setIsScriptModalOpen(prev => {
+        const newState = !prev;
+        if (newState) {
+          setCurrentStage(2);
+        }
+        return newState;
+      });
+    }
+
+    prevIsGeneratingVideoRef.current = isGeneratingVideo;
+    prevTaskVideosLengthRef.current = currentTaskVideosLength;
+  }, [isGeneratingVideo, taskVideos]);
+
+  // 监听最终步骤
+  useEffect(() => {
+    console.log('Final Steps Effect:', { currentStep, isModalOpen: isScriptModalOpen });
+    
+    if (currentStep === '5') {
+      console.log('Opening modal for final review');
+      setIsScriptModalOpen(true);
+      setCurrentStage(3);
+    } else if (currentStep === '6') {
+      console.log('Closing modal at completion');
+      setIsScriptModalOpen(false);
+    }
+  }, [currentStep]);
+
+  // 弹窗状态变化时的日志
+  useEffect(() => {
+    console.log('Modal State Changed:', { 
+      isOpen: isScriptModalOpen, 
+      currentStage,
+      currentStep,
+      sketchCount
+    });
+  }, [isScriptModalOpen, currentStage, currentStep, sketchCount]);
 
   // 使用 useMemo 缓存标签颜色映射
   const tagColors = useMemo(() => {
@@ -61,13 +189,13 @@ export function TaskInfo({ isLoading, taskObject, currentLoadingText, dataLoadEr
   }, [taskObject?.tags]); // 只在 tags 改变时重新计算
 
   // 自动触发打开 剧本 弹窗 延迟5秒
-  useEffect(() => {
+  // useEffect(() => {
-    if (taskObject?.title && currentLoadingText !== 'Task completed') {
+  //   if (taskObject?.title && currentLoadingText !== 'Task completed') {
-      setTimeout(() => {
+  //     setTimeout(() => {
-        setIsScriptModalOpen(true);
+  //       setIsScriptModalOpen(true);
-      }, 5000);
+  //     }, 5000);
-    }
+  //   }
-  }, [taskObject?.title]);
+  // }, [taskObject?.title]);
   
   if (isLoading) {
     return (
@@ -181,7 +309,7 @@ export function TaskInfo({ isLoading, taskObject, currentLoadingText, dataLoadEr
             <span>
               {taskObject?.title || 'loading project info...'}
             </span>
-            {/* <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2">
               <motion.div
                 whileHover={{ scale: 1.1 }}
                 whileTap={{ scale: 0.9 }}
@@ -189,7 +317,7 @@ export function TaskInfo({ isLoading, taskObject, currentLoadingText, dataLoadEr
               >
                 <Airplay className="w-4 h-4 text-blue-500 cursor-pointer" />
               </motion.div>
-            </div> */}
+            </div>
           </>
         ) : 'loading project info...'}
       </div>
@@ -209,7 +337,11 @@ export function TaskInfo({ isLoading, taskObject, currentLoadingText, dataLoadEr
 
       <ScriptModal 
         isOpen={isScriptModalOpen}
-        onClose={() => setIsScriptModalOpen(false)}
+        onClose={() => {
+          console.log('Modal manually closed');
+          setIsScriptModalOpen(false);
+        }}
+        currentStage={currentStage}
       />
       
       {currentLoadingText === 'Task completed' ? (

components/pages/work-flow/use-workflow-data.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData } from '@/api/video_flow';
 
@@ -55,6 +55,7 @@ export function useWorkflowData() {
   // 更新 taskObject 的类型
   const [taskObject, setTaskObject] = useState<TaskObject | null>(null);
   const [taskSketch, setTaskSketch] = useState<any[]>([]);
+  const [taskShotSketch, setTaskShotSketch] = useState<any[]>([]);
   const [taskVideos, setTaskVideos] = useState<any[]>([]);
   const [sketchCount, setSketchCount] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
@@ -70,6 +71,49 @@ export function useWorkflowData() {
   const [dataLoadError, setDataLoadError] = useState<string | null>(null);
   const [needStreamData, setNeedStreamData] = useState(false);
 
+  // 自动开始播放一轮
+  const autoPlaySketch = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      let currentIndex = 0;
+      const interval = 2000; // 每个草图显示2秒
+
+      const playNext = () => {
+        if (currentIndex < taskSketch.length) {
+          setCurrentSketchIndex(currentIndex);
+          currentIndex++;
+          setTimeout(playNext, interval);
+        } else {
+          // 播放完成后重置到第一个
+          setTimeout(() => {
+            setCurrentSketchIndex(0);
+            resolve();
+          }, 500); // 短暂延迟后重置
+        }
+      };
+
+      // 开始播放
+      playNext();
+    });
+  }, [taskSketch.length]);
+
+  // 草图生成完毕后自动播放一轮
+  useEffect(() => {
+    const handleAutoPlay = async () => {
+      if (!isGeneratingSketch && taskSketch.length > 0 && sketchCount === totalSketchCount && currentStep === '3' && !taskVideos.length) {
+        await autoPlaySketch();
+      }
+    };
+
+    handleAutoPlay();
+  }, [sketchCount, totalSketchCount, isGeneratingSketch, autoPlaySketch]);
+
+  // 添加手动播放控制
+  const handleManualPlay = useCallback(async () => {
+    if (!isGeneratingSketch && taskSketch.length > 0) {
+      await autoPlaySketch();
+    }
+  }, [isGeneratingSketch, taskSketch.length, autoPlaySketch]);
+
   // 获取流式数据
   const fetchStreamData = async () => {
     if (!episodeId || !needStreamData) return;
@@ -143,8 +187,8 @@ export function useWorkflowData() {
           }
         }
         if (task.task_name === 'generate_shot_sketch' && task.task_result) {
-          if (task.task_result.data.length >= 0 && taskSketch.length < task.task_result.data.length) {
+          if (task.task_result.data.length >= 0 && taskShotSketch.length < task.task_result.data.length) {
-            console.log('----------正在生成草图中 替换 sketch 数据');
+            console.log('----------正在生成草图中 替换 sketch 数据', taskShotSketch.length, task.task_result.data.length);
             // 正在生成草图中 替换 sketch 数据
             const sketchList = [];
             for (const sketch of task.task_result.data) {
@@ -154,6 +198,7 @@ export function useWorkflowData() {
               });
             }
             setTaskSketch(sketchList);
+            setTaskShotSketch(sketchList);
             setSketchCount(sketchList.length);
             setIsGeneratingSketch(true);
             setCurrentSketchIndex(sketchList.length - 1);
@@ -162,19 +207,23 @@ export function useWorkflowData() {
           if (task.task_status === 'COMPLETED') {
             // 草图生成完成
             setIsGeneratingSketch(false);
+            setIsGeneratingVideo(true);
             sketchCount = task.task_result.total_count;
             console.log('----------草图生成完成', sketchCount);
-            loadingText = LOADING_TEXT_MAP.video(0, task.task_result.total_count);
+            loadingText = LOADING_TEXT_MAP.getVideoStatus;
-            finalStep = '2';
+            finalStep = '3';
+          } else {
+
           }
           setTotalSketchCount(task.task_result.total_count);
         }
         if (task.task_name === 'generate_videos' && task.task_result) {
-          if (task.task_result.data.length >= 0 && taskVideos.length !== task.task_result.data.length) {
+          const realTaskResultData = task.task_result.data.filter((item: any) => item.urls && item.urls.length > 0);
+          if (realTaskResultData.length >= 0 && taskVideos.length !== realTaskResultData.length) {
             console.log('----------正在生成视频中-发生变化才触发');
             // 正在生成视频中 替换视频数据
             const videoList = [];
-            for (const video of task.task_result.data) {
+            for (const video of realTaskResultData) {
               // 每一项 video 有多个视频 先默认取第一个
               videoList.push({
                 url: video.urls[0],
@@ -349,6 +398,7 @@ export function useWorkflowData() {
             });
           }
           setTaskSketch(sketchList);
+          setTaskShotSketch(sketchList);
           setSketchCount(sketchList.length);
           setTotalSketchCount(data.shot_sketch.total_count);
           // 设置为最后一个草图
@@ -357,28 +407,31 @@ export function useWorkflowData() {
             setCurrentSketchIndex(data.shot_sketch.data.length - 1);
             loadingText = LOADING_TEXT_MAP.shotSketch(data.shot_sketch.data.length, data.shot_sketch.total_count);
           } else {
-            finalStep = '2';
+            finalStep = '3';
+            setIsGeneratingVideo(true);
             if (!data.character || !data.character.data || !data.character.data.length) {
-              loadingText = LOADING_TEXT_MAP.video(0, data.shot_sketch.data.length);
+              loadingText = LOADING_TEXT_MAP.getVideoStatus;
             }
           }
         }
-        if (data.video && data.video.data && data.video.data.length > 0) {
+        const realDataVideoData = data.video.data.filter((item: any) => item.urls && item.urls.length > 0);
+        if (realDataVideoData.length > 0) {
           const videoList = [];
-          for (const video of data.video.data) {
+          console.log('----------data.video.data', data.video.data);
-            // 每一项 video 有多个视频 先默认取第一个
+          for (const video of realDataVideoData) {
+            // 每一项 video 有多个视频 默认取存在的项
             videoList.push({
-              url: video.urls[0],
+              url: video.urls && video.urls.length > 0 ? video.urls.find((url: string) => url) : null,
               script: video.description,
               audio: null,
             });
           }
           setTaskVideos(videoList);
           // 如果在视频步骤，设置为最后一个视频
-          if (data.video.total_count > data.video.data.length) {
+          if (data.video.total_count > realDataVideoData.length) {
             setIsGeneratingVideo(true);
-            setCurrentSketchIndex(data.video.data.length - 1);
+            setCurrentSketchIndex(realDataVideoData.length - 1);
-            loadingText = LOADING_TEXT_MAP.video(data.video.data.length, data.video.total_count);
+            loadingText = LOADING_TEXT_MAP.video(realDataVideoData.length, data.video.total_count);
           } else {
             finalStep = '4';
             loadingText = LOADING_TEXT_MAP.audio;
@@ -459,5 +512,6 @@ export function useWorkflowData() {
     dataLoadError,
     setCurrentSketchIndex,
     retryLoadData,
+    handleManualPlay,
   };
 } 

components/ui/script-modal.tsx

@@ -7,9 +7,10 @@ import WorkOffice from '@/components/workflow/work-office/work-office';
 interface ScriptModalProps {
   isOpen: boolean;
   onClose: () => void;
+  currentStage?: number;
 }
 
-export function ScriptModal({ isOpen, onClose }: ScriptModalProps) {
+export function ScriptModal({ isOpen, onClose, currentStage = 0 }: ScriptModalProps) {
   return (
     <AnimatePresence mode="wait">
       {isOpen && (
@@ -76,7 +77,7 @@ export function ScriptModal({ isOpen, onClose }: ScriptModalProps) {
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.1, duration: 0.2 }}
               >
-                <WorkOffice />
+                <WorkOffice initialStage={currentStage} />
               </motion.div>
             </motion.div>
           </motion.div>

components/workflow/work-office/work-office.tsx

@@ -80,8 +80,12 @@ const ThinkingDots = ({ show, text, color }: { show: boolean; text: string; colo
   );
 };
 
-const WorkOffice: React.FC = () => {
+interface WorkOfficeProps {
-  const [currentStage, setCurrentStage] = useState(0);
+  initialStage?: number;
+}
+
+const WorkOffice: React.FC<WorkOfficeProps> = ({ initialStage = 0 }) => {
+  const [currentStage, setCurrentStage] = useState(initialStage);
   const [isPlaying, setIsPlaying] = useState(true);
   const [progress, setProgress] = useState(0);
   const [currentContent, setCurrentContent] = useState<Record<string, any>>(scriptwriterData);