From c9fdf8b55af393425a4e6fbadc1ee284edba1029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Mon, 7 Jul 2025 19:43:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD1=E6=AC=A1=E3=80=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E8=A7=86=E9=A2=91=E9=98=B6=E6=AE=B5=20=E6=9C=AA?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=B0=86=E8=8D=89=E5=9B=BE=E6=A8=A1=E7=B3=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/work-flow.tsx                | 27 +++++++++++++++++--
 components/pages/work-flow/thumbnail-grid.tsx |  6 +++--
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index 955fd14..f257904 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -52,6 +52,9 @@ export default function WorkFlow() {
 
   // 跟踪是否已经自动开始播放过，避免重复触发
   const hasAutoStartedRef = useRef(false);
+  
+  // 跟踪循环播放的起始索引，用于判断是否完成一轮循环
+  const loopStartIndexRef = useRef<number | null>(null);
 
   // 调试：监控关键状态变化
   useEffect(() => {
@@ -111,13 +114,30 @@ export default function WorkFlow() {
     }
   }, [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);
@@ -125,8 +145,11 @@ export default function WorkFlow() {
       return () => {
         clearInterval(interval);
       };
+    } else {
+      // 当停止播放时重置循环起始索引
+      loopStartIndexRef.current = null;
     }
-  }, [isPlaying, taskSketch.length, setCurrentSketchIndex]);
+  }, [isPlaying, taskSketch.length, setCurrentSketchIndex, currentSketchIndex]);
 
   // 模拟 AI 建议 英文
   const mockSuggestions = [
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index df6868e..35cff67 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -179,10 +179,12 @@ export function ThumbnailGrid({
             ${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`}
           onClick={() => !isDragging && onSketchSelect(index)}
         >
-          {/* 底层草图，始终显示 */}
+          {/* 底层草图，始终显示 未生成对应的视频时显示的草图模糊掉 */}
           <div className="w-full h-full transform hover:scale-105 transition-transform duration-500">
             <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}
               alt={`Thumbnail ${index + 1}`}
             />