'use client'; import { useState, useEffect, useRef, useCallback } from 'react'; const MOCK_SKETCH_URLS = [ 'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg', 'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg', 'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg', 'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg', ]; const MOCK_SKETCH_SCRIPT = [ 'script-123', 'script-123', 'script-123', 'script-123', ]; const MOCK_VIDEO_URLS = [ 'https://cdn.qikongjian.com/videos/1750385931_99a8fb42-af89-4ae9-841a-a49869f026bd_text_to_video_0.mp4', 'https://cdn.qikongjian.com/videos/1750389908_37d4fffa-8516-43a3-a423-fc0274f40e8a_text_to_video_0.mp4', 'https://cdn.qikongjian.com/videos/1750384661_d8e30b79-828e-48cd-9025-ab62a996717c_text_to_video_0.mp4', 'https://cdn.qikongjian.com/videos/1750320040_4b47996e-7c70-490e-8433-80c7df990fdd_text_to_video_0.mp4', ]; const MOCK_SKETCH_COUNT = 8; export function useWorkflowData() { const [taskObject, setTaskObject] = useState(null); const [taskSketch, setTaskSketch] = useState([]); const [taskVideos, setTaskVideos] = useState([]); const [sketchCount, setSketchCount] = useState(0); const [isLoading, setIsLoading] = useState(true); const [currentStep, setCurrentStep] = useState('0'); const [currentSketchIndex, setCurrentSketchIndex] = useState(0); const [isGeneratingSketch, setIsGeneratingSketch] = useState(false); const [isGeneratingVideo, setIsGeneratingVideo] = useState(false); const [currentLoadingText, setCurrentLoadingText] = useState('加载中...'); // 模拟接口请求 获取任务详情 const getTaskDetail = async (taskId: string) => { const data = { projectId: 'projectId-123', projectName: "Project 1", taskId: taskId, taskName: "Task 1", taskDescription: "Task 1 Description", taskStatus: "1", taskProgress: 0, mode: 'auto', resolution: '1080p', }; return data; }; // 模拟接口请求 每次获取一个分镜草图 轮询获取 const getTaskSketch = async (taskId: string) => { if (isGeneratingSketch || taskSketch.length > 0) return; setIsGeneratingSketch(true); setTaskSketch([]); // 模拟分批获取分镜草图 for (let i = 0; i < MOCK_SKETCH_COUNT; i++) { await new Promise(resolve => setTimeout(resolve, 2000)); const newSketch = { id: `sketch-${i}`, url: MOCK_SKETCH_URLS[i % MOCK_SKETCH_URLS.length], script: MOCK_SKETCH_SCRIPT[i % MOCK_SKETCH_SCRIPT.length], status: 'done' }; setTaskSketch(prev => { if (prev.find(sketch => sketch.id === newSketch.id)) { return prev; } return [...prev, newSketch]; }); setCurrentSketchIndex(i); setSketchCount(i + 1); } setIsGeneratingSketch(false); }; // 模拟接口请求 每次获取一个角色 轮询获取 const getTaskRole = async (taskId: string) => { await new Promise(resolve => setTimeout(resolve, 2000)); }; // 模拟接口请求 获取背景音 const getTaskBackgroundAudio = async (taskId: string) => { await new Promise(resolve => setTimeout(resolve, 2000)); }; // 模拟接口请求 获取最终成品 const getTaskFinalProduct = async (taskId: string) => { await new Promise(resolve => setTimeout(resolve, 2000)); }; // 模拟接口请求 每次获取一个分镜视频 轮询获取 const getTaskVideo = async (taskId: string) => { setIsGeneratingVideo(true); setTaskVideos([]); // 模拟分批获取分镜视频 for (let i = 0; i < MOCK_SKETCH_COUNT; i++) { await new Promise(resolve => setTimeout(resolve, 5000)); const newVideo = { id: `video-${i}`, url: MOCK_VIDEO_URLS[i % MOCK_VIDEO_URLS.length], script: MOCK_SKETCH_SCRIPT[i % MOCK_SKETCH_SCRIPT.length], status: 'done' }; setTaskVideos(prev => { if (prev.find(video => video.id === newVideo.id)) { return prev; } return [...prev, newVideo]; }); setCurrentSketchIndex(i); } setIsGeneratingVideo(false); }; // 更新加载文字 useEffect(() => { if (isLoading) { setCurrentLoadingText('正在加载任务信息...'); return; } if (currentStep === '1') { if (isGeneratingSketch) { setCurrentLoadingText(`正在生成分镜草图 ${sketchCount + 1}/${MOCK_SKETCH_COUNT}...`); } else { setCurrentLoadingText('分镜草图生成完成'); } } else if (currentStep === '2') { setCurrentLoadingText('正在绘制角色...'); } else if (currentStep === '3') { if (isGeneratingVideo) { setCurrentLoadingText(`正在生成分镜视频 ${taskVideos.length + 1}/${taskSketch.length}...`); } else { setCurrentLoadingText('分镜视频生成完成'); } } else if (currentStep === '4') { setCurrentLoadingText('正在生成背景音...'); } else if (currentStep === '5') { setCurrentLoadingText('正在生成最终成品...'); } else { setCurrentLoadingText('任务完成'); } }, [isLoading, currentStep, isGeneratingSketch, sketchCount, isGeneratingVideo, taskVideos.length, taskSketch.length]); // 初始化数据 useEffect(() => { const taskId = localStorage.getItem("taskId") || "taskId-123"; getTaskDetail(taskId).then(async (data) => { setTaskObject(data); setIsLoading(false); setCurrentStep('1'); // 只在任务详情加载完成后获取分镜草图 await getTaskSketch(taskId); await new Promise(resolve => setTimeout(resolve, 2000)); // 修改 taskObject 下的 taskStatus 为 '2' setTaskObject((prev: any) => ({ ...prev, taskStatus: '2' })); setCurrentStep('2'); // 获取分镜草图后,开始绘制角色 await getTaskRole(taskId); await new Promise(resolve => setTimeout(resolve, 2000)); // 修改 taskObject 下的 taskStatus 为 '3' setTaskObject((prev: any) => ({ ...prev, taskStatus: '3' })); setCurrentStep('3'); // 获取绘制角色后,开始获取分镜视频 await getTaskVideo(taskId); await new Promise(resolve => setTimeout(resolve, 2000)); // 修改 taskObject 下的 taskStatus 为 '4' setTaskObject((prev: any) => ({ ...prev, taskStatus: '4' })); setCurrentStep('4'); // 获取分镜视频后,开始获取背景音 await getTaskBackgroundAudio(taskId); await new Promise(resolve => setTimeout(resolve, 2000)); // 修改 taskObject 下的 taskStatus 为 '5' setTaskObject((prev: any) => ({ ...prev, taskStatus: '5' })); setCurrentStep('5'); // 获取背景音后,开始获取最终成品 await getTaskFinalProduct(taskId); await new Promise(resolve => setTimeout(resolve, 2000)); // 修改 taskObject 下的 taskStatus 为 '6' setTaskObject((prev: any) => ({ ...prev, taskStatus: '6' })); setCurrentStep('6'); }); }, []); return { // 状态数据 taskObject, taskSketch, taskVideos, sketchCount, isLoading, currentStep, currentSketchIndex, isGeneratingSketch, isGeneratingVideo, currentLoadingText, // 操作方法 setCurrentSketchIndex, }; }