轮播1次、生成视频阶段 未生成将草图模糊

This commit is contained in:
北枳 2025-07-07 19:43:58 +08:00
parent a6b1be4e63
commit c9fdf8b55a
2 changed files with 29 additions and 4 deletions

View File

@ -52,6 +52,9 @@ export default function WorkFlow() {
// 跟踪是否已经自动开始播放过,避免重复触发 // 跟踪是否已经自动开始播放过,避免重复触发
const hasAutoStartedRef = useRef(false); const hasAutoStartedRef = useRef(false);
// 跟踪循环播放的起始索引,用于判断是否完成一轮循环
const loopStartIndexRef = useRef<number | null>(null);
// 调试:监控关键状态变化 // 调试:监控关键状态变化
useEffect(() => { useEffect(() => {
@ -111,13 +114,30 @@ export default function WorkFlow() {
} }
}, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]); }, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]);
// 处理自动播放的分镜切换逻辑 // 处理自动播放的分镜切换逻辑 仅循环一轮
useEffect(() => { useEffect(() => {
if (isPlaying && taskSketch.length > 0) { if (isPlaying && taskSketch.length > 0) {
console.log('开始自动切换分镜,总数:', taskSketch.length); console.log('开始自动切换分镜,总数:', taskSketch.length);
// 记录循环开始时的索引
if (loopStartIndexRef.current === null) {
loopStartIndexRef.current = currentSketchIndex;
console.log('记录循环起始索引:', currentSketchIndex);
}
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentSketchIndex((prev: number) => { setCurrentSketchIndex((prev: number) => {
const nextIndex = (prev + 1) % taskSketch.length; 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; return nextIndex;
}); });
}, 1000); }, 1000);
@ -125,8 +145,11 @@ export default function WorkFlow() {
return () => { return () => {
clearInterval(interval); clearInterval(interval);
}; };
} else {
// 当停止播放时重置循环起始索引
loopStartIndexRef.current = null;
} }
}, [isPlaying, taskSketch.length, setCurrentSketchIndex]); }, [isPlaying, taskSketch.length, setCurrentSketchIndex, currentSketchIndex]);
// 模拟 AI 建议 英文 // 模拟 AI 建议 英文
const mockSuggestions = [ const mockSuggestions = [

View File

@ -179,10 +179,12 @@ export function ThumbnailGrid({
${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`} ${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`}
onClick={() => !isDragging && onSketchSelect(index)} onClick={() => !isDragging && onSketchSelect(index)}
> >
{/* 底层草图,始终显示 */} {/* 底层草图,始终显示 未生成对应的视频时显示的草图模糊掉 */}
<div className="w-full h-full transform hover:scale-105 transition-transform duration-500"> <div className="w-full h-full transform hover:scale-105 transition-transform duration-500">
<img <img
className="w-full h-full object-cover" className={`w-full h-full object-cover transition-all duration-300 ${
!taskVideos[index] ? 'filter blur-sm opacity-60' : ''
}`}
src={sketch.url} src={sketch.url}
alt={`Thumbnail ${index + 1}`} alt={`Thumbnail ${index + 1}`}
/> />