Merge branch 'dev' of https://git.qikongjian.com/77media/video-flow into dev

api/DTO/movieEdit.ts

@@ -621,7 +621,7 @@ export interface RoleResponse {
 }
 
 
-interface Role {
+export interface Role {
   name: string;
   url: string;
   status: number;
@@ -636,12 +636,30 @@ interface ShotSketch {
   script: string;
   status: number;
 }
-interface Video {
+export interface ShotVideo {
   video_id: string;
   urls: string[];
   video_status: number;
 }
 
+// 执行loading文字映射
+export const LOADING_TEXT_MAP = {
+  initializing: 'initializing...',
+  script: 'Generating script...',
+  getSketchStatus: 'Getting sketch status...',
+  sketch: (count: number, total: number) => `Generating sketch ${count}/${total}...`,
+  character: 'Getting character status...',
+  newCharacter: (count: number, total: number) => `Drawing character ${count}/${total}...`,
+  getShotSketchStatus: 'Getting shot sketch status...',
+  shotSketch: (count: number, total: number) => `Generating shot sketch ${count}/${total}...`,
+  getVideoStatus: 'Getting video status...',
+  video: (count: number, total: number) => `Generating video ${count}/${total}...`,
+  audio: 'Generating background audio...',
+  postProduction: (step: string) => `Post-production: ${step}...`,
+  final: 'Generating final product...',
+  complete: 'Task completed'
+} as const;
+
 export type Status = 'IN_PROGRESS' | 'COMPLETED' | 'FAILED';
 export type Stage = 'script' | 'character' | 'scene' | 'shot_sketch' | 'video' | 'final_video';
 // 添加 TaskObject 接口
@@ -663,7 +681,7 @@ export interface TaskObject {
     total_count: number;
   }; // 分镜草图
   videos: {
-    data: Video[];
+    data: ShotVideo[];
     total_count: number;
   }; // 视频
   final: {

app/service/Interaction/RoleShotService.ts

@@ -179,6 +179,7 @@ export const useRoleShotServiceHook = (projectId: string,selectRole?:RoleEntity,
         return role.fromDraft
       });
       console.log('newDraftRoleList', newDraftRoleList)
+      console.log('应用角色到分镜', shotSelectionList)
       // 循环调用接口，为每个选中的分镜单独调用
      const res = await Promise.all( shotSelectionList.map(async (shot) => {
         // 调用应用角色到分镜接口（不等待完成）
@@ -191,6 +192,8 @@ export const useRoleShotServiceHook = (projectId: string,selectRole?:RoleEntity,
         })
       }))
 
+      console.log('应用角色到分镜', res);
+
       SaveEditUseCase.setVideoTasks([
         ...SaveEditUseCase.videoTasks,
         ...res.map(item=>{

components/pages/work-flow.tsx

@@ -33,17 +33,9 @@ const WorkFlow = React.memo(function WorkFlow() {
   const {
     taskObject,
     scriptData,
-    taskSketch,
-    taskVideos,
-    sketchCount,
     isLoading,
-    currentStep,
     currentSketchIndex,
-    isGeneratingSketch,
-    isGeneratingVideo,
     currentLoadingText,
-    totalSketchCount,
-    final,
     dataLoadError,
     setCurrentSketchIndex,
     retryLoadData,
@@ -58,9 +50,8 @@ const WorkFlow = React.memo(function WorkFlow() {
 
   const {
     isVideoPlaying,
-    togglePlay,
     toggleVideoPlay,
-  } = usePlaybackControls(taskSketch, taskVideos, currentStep);
+  } = usePlaybackControls(taskObject.videos.data, taskObject.currentStage);
 
   useEffect(() => {
     console.log('changedIndex_work-flow', currentSketchIndex, taskObject);
@@ -97,10 +88,8 @@ const WorkFlow = React.memo(function WorkFlow() {
               <div className="info-UUGkPJ">
                 <ErrorBoundary>
                   <TaskInfo
-                    isLoading={isLoading}
                     taskObject={taskObject}
                     currentLoadingText={currentLoadingText}
-                    dataLoadError={dataLoadError}
                     roles={taskObject.roles.data}
                     isPauseWorkFlow={isPauseWorkFlow}
                   />
@@ -170,14 +159,7 @@ const WorkFlow = React.memo(function WorkFlow() {
                   <ThumbnailGrid
                     isDisabledFocus={isEditModalOpen || isPauseWorkFlow}
                     taskObject={taskObject}
-                    isLoading={isLoading}
                     currentSketchIndex={currentSketchIndex}
-                    taskSketch={taskSketch}
-                    taskVideos={taskVideos}
-                    isGeneratingSketch={isGeneratingSketch}
-                    isGeneratingVideo={isGeneratingVideo}
-                    sketchCount={sketchCount}
-                    totalSketchCount={totalSketchCount}
                     onSketchSelect={setCurrentSketchIndex}
                   />
                 </div>
@@ -228,6 +210,7 @@ const WorkFlow = React.memo(function WorkFlow() {
               SaveEditUseCase.clearData();
               setIsEditModalOpen(false)
             }}
+            taskObject={taskObject}
             currentSketchIndex={currentSketchIndex}
             roles={taskObject.roles.data}
             setIsPauseWorkFlow={setIsPauseWorkFlow}

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

@@ -10,12 +10,11 @@ import {
   Film,
   Scissors
 } from 'lucide-react';
+import { TaskObject } from '@/api/DTO/movieEdit';
 
 interface TaskInfoProps {
-  isLoading: boolean;
+  taskObject: TaskObject;
-  taskObject: any;
   currentLoadingText: string;
-  dataLoadError?: string | null;
   roles: any[];
   isPauseWorkFlow: boolean;
 }
@@ -120,17 +119,14 @@ const StageIcons = ({ currentStage, isExpanded, isPauseWorkFlow }: { currentStag
   );
 };
 
-export function TaskInfo({ 
+export function TaskInfo({
-  isLoading, 
+  taskObject,
-  taskObject, 
   currentLoadingText, 
-  dataLoadError,
   roles,
   isPauseWorkFlow
 }: TaskInfoProps) {
   const [isScriptModalOpen, setIsScriptModalOpen] = useState(false);
   const [currentStage, setCurrentStage] = useState(0);
-  const [isShowScriptIcon, setIsShowScriptIcon] = useState(true);
   const [isStageIconsExpanded, setIsStageIconsExpanded] = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -146,72 +142,39 @@ export function TaskInfo({
       timerRef.current = null;
     }
 
+    // 统一更新currentStage
+    if (currentLoadingText.includes('initializing') || currentLoadingText.includes('script') || currentLoadingText.includes('character')) {
+      setCurrentStage(0);
+    } else if (currentLoadingText.includes('sketch') && !currentLoadingText.includes('shot sketch')) {
+      setCurrentStage(1);
+    } else if (!currentLoadingText.includes('Post-production') && (currentLoadingText.includes('shot sketch') || currentLoadingText.includes('video'))) {
+      setCurrentStage(2);
+    } else if (currentLoadingText.includes('Post-production')) {
+      setCurrentStage(3);
+    }
+
     if (currentLoadingText.includes('Task completed')) {
       console.log('Closing modal at completion');
       setIsScriptModalOpen(false);
-      setIsShowScriptIcon(false);
     }
-    if (currentLoadingText.includes('Post-production')) {
+    if (currentLoadingText.includes('Post-production') || currentLoadingText.includes('status')) {
-      if (isScriptModalOpen) {
-        setIsScriptModalOpen(false);
-      }
-      setCurrentStage(3);
       console.log('isScriptModalOpen-Post-production', currentLoadingText, isScriptModalOpen);
-      timerRef.current = setTimeout(() => {
-        setIsScriptModalOpen(true);
-      }, 8000);
-    }
-    if (currentLoadingText.includes('Generating video')) {
-      console.log('isScriptModalOpen-video', currentLoadingText, isScriptModalOpen);
       if (isScriptModalOpen) {
         setIsScriptModalOpen(false);
-        setCurrentStage(2);
-
-        // 延迟8s 再次打开
-        timerRef.current = setTimeout(() => {
-          setIsScriptModalOpen(true);
-        }, 8000);
       } else {
         setIsScriptModalOpen(true);
-        setCurrentStage(2);
-      }
-    }
-    if (currentLoadingText.includes('video status')) {
-      if (isScriptModalOpen) {
-        setIsScriptModalOpen(false);
-      }
-      setCurrentStage(2);
-    }
-    if (currentLoadingText.includes('Generating sketch') || currentLoadingText.includes('Generating shot sketch')) {
-      console.log('isScriptModalOpen-sketch', currentLoadingText, isScriptModalOpen);
-      if (isScriptModalOpen) {
-        setIsScriptModalOpen(false);
-        setCurrentStage(1);
-
-        // 延迟8s 再次打开
         timerRef.current = setTimeout(() => {
-          setIsScriptModalOpen(true);
+          setIsScriptModalOpen(false);
         }, 8000);
-      } else {
-        setIsScriptModalOpen(true);
-        setCurrentStage(1);
       }
     }
-    if (currentLoadingText.includes('sketch status')) {
-      if (isScriptModalOpen) {
-        setIsScriptModalOpen(false);
-      }
-      setCurrentStage(1);
-    }
     if (currentLoadingText.includes('script')) {
       console.log('isScriptModalOpen-script', currentLoadingText, isScriptModalOpen);
       setIsScriptModalOpen(true);
-      setCurrentStage(0);
     }
     if (currentLoadingText.includes('initializing')) {
       console.log('isScriptModalOpen-initializing', currentLoadingText, isScriptModalOpen);
       setIsScriptModalOpen(true);
-      setCurrentStage(0);
     }
     return () => {
       if (timerRef.current) {

components/pages/work-flow/thumbnail-grid.tsx

@@ -10,28 +10,14 @@ import { TaskObject } from '@/api/DTO/movieEdit';
 interface ThumbnailGridProps {
   isDisabledFocus: boolean;
   taskObject: TaskObject;
-  isLoading: boolean;
   currentSketchIndex: number;
-  taskSketch: any[];
-  taskVideos: any[];
-  isGeneratingSketch: boolean;
-  isGeneratingVideo: boolean;
-  sketchCount: number;
-  totalSketchCount: number;
   onSketchSelect: (index: number) => void;
 }
 
 export function ThumbnailGrid({
   isDisabledFocus,
   taskObject,
-  isLoading,
   currentSketchIndex,
-  taskSketch,
-  taskVideos,
-  isGeneratingSketch,
-  isGeneratingVideo,
-  sketchCount,
-  totalSketchCount,
   onSketchSelect
 }: ThumbnailGridProps) {
   const thumbnailsRef = useRef<HTMLDivElement>(null);
@@ -166,89 +152,11 @@ export function ThumbnailGrid({
     console.log('taskObject.currentStage_thumbnail-grid', taskObject.currentStage);
   }, [taskObject.currentStage]);
 
-  // 渲染加载状态
-  if (isLoading) {
-    return (
-      <>
-        <Skeleton className="w-[128px] h-[128px] rounded-lg" />
-        <Skeleton className="w-[128px] h-[128px] rounded-lg" />
-        <Skeleton className="w-[128px] h-[128px] rounded-lg" />
-        <Skeleton className="w-[128px] h-[128px] rounded-lg" />
-      </>
-    );
-  }
-
   // 粗剪/精剪最终成片阶段不显示缩略图
   if (taskObject.currentStage === 'final_video') {
     return null;
   }
 
-  // 渲染生成中的缩略图
-  const renderGeneratingThumbnail = () => {
-    const currentSketch = taskSketch[currentSketchIndex];
-    const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)'];
-    const bgColors = currentSketch?.bg_rgb || defaultBgColors;
-
-    return (
-      <motion.div
-        className="relative aspect-video rounded-lg overflow-hidden"
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.3 }}
-      >
-        {/* 动态渐变背景 */}
-        <motion.div
-          className={`absolute inset-0 bg-gradient-to-r from-[${bgColors[0]}] via-[${bgColors[1]}] to-[${bgColors[2]}]`}
-          animate={{
-            backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
-          }}
-          transition={{
-            duration: 5,
-            repeat: Infinity,
-            ease: "linear"
-          }}
-          style={{
-            backgroundSize: "200% 200%",
-          }}
-        />
-        {/* 动态光效 */}
-        <motion.div
-          className="absolute inset-0 opacity-50"
-          style={{
-            background: "radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 50%)",
-          }}
-          animate={{
-            scale: [1, 1.2, 1],
-          }}
-          transition={{
-            duration: 2,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
-        />
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="relative">
-            <motion.div
-              className="absolute -inset-4 bg-gradient-to-r from-white via-sky-200 to-cyan-200 rounded-full opacity-60 blur-xl"
-              animate={{
-                scale: [1, 1.2, 1],
-                rotate: [0, 180, 360],
-              }}
-              transition={{
-                duration: 4,
-                repeat: Infinity,
-                ease: "linear"
-              }}
-            />
-          </div>
-        </div>
-        <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent">
-          <span className="text-xs text-white/90">Scene {sketchCount + 1}</span>
-        </div>
-      </motion.div>
-    );
-  };
-
   // 渲染视频阶段的缩略图
   const renderVideoThumbnails = () => (
     taskObject.videos.data.map((video, index) => {
@@ -354,7 +262,6 @@ export function ThumbnailGrid({
           </div>
         );
       })}
-      {isGeneratingSketch && sketchCount < totalSketchCount && renderGeneratingThumbnail()}
     </>
   );
 

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

@@ -5,13 +5,14 @@ import { useSearchParams } from 'next/navigation';
 import { useRoleServiceHook } from "@/app/service/Interaction/RoleService";
 import { useRoleShotServiceHook } from "@/app/service/Interaction/RoleShotService";
 import { useScriptService } from "@/app/service/Interaction/ScriptService";
+import { VideoSegmentEntity } from "@/app/service/domain/Entities";
 
 export const useEditData = (tabType: string, originalText?: string) => {
   const searchParams = useSearchParams();
   const projectId = searchParams.get('episodeId') || '';
   const [loading, setLoading] = useState(true);
   const [scriptData, setScriptData] = useState<any[]>([]);
-  const [shotData, setShotData] = useState<any[]>([]);
+  const [shotData, setShotData] = useState<VideoSegmentEntity[]>([]);
 
   const [roleData, setRoleData] = useState<any[]>([]);
 
@@ -24,6 +25,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
 
   const {
     videoSegments,
+    selectedSegment,
     scriptRoles,
     getVideoSegmentList,
     setSelectedSegment,
@@ -123,6 +125,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
     applyScript,
     // shot
     shotData,
+    selectedSegment,
     scriptRoles,
     setSelectedSegment,
     regenerateVideoSegment,

components/pages/work-flow/use-playback-controls.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect, useCallback } from 'react';
 
-export function usePlaybackControls(taskSketch: any[], taskVideos: any[], currentStep: string) {
+export function usePlaybackControls(taskVideos: any[], currentStage: string) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isVideoPlaying, setIsVideoPlaying] = useState(true);
   const [showControls, setShowControls] = useState(false);
@@ -19,24 +19,6 @@ export function usePlaybackControls(taskSketch: any[], taskVideos: any[], curren
     setIsVideoPlaying(prev => !prev);
   }, []);
 
-  // 自动播放逻辑 - 分镜草图（移除重复的定时器逻辑，由主组件处理）
-  // useEffect(() => {
-  //   if (isPlaying && taskSketch.length > 0) {
-  //     playTimerRef.current = setInterval(() => {
-  //       // 这里的切换逻辑需要在父组件中处理
-  //       // 因为需要访问 setCurrentSketchIndex
-  //     }, 1000);
-  //   } else if (playTimerRef.current) {
-  //     clearInterval(playTimerRef.current);
-  //   }
-
-  //   return () => {
-  //     if (playTimerRef.current) {
-  //       clearInterval(playTimerRef.current);
-  //     }
-  //   };
-  // }, [isPlaying, taskSketch.length]);
-
   // 视频自动播放逻辑
   useEffect(() => {
     if (isVideoPlaying && taskVideos.length > 0) {
@@ -55,20 +37,12 @@ export function usePlaybackControls(taskSketch: any[], taskVideos: any[], curren
     };
   }, [isVideoPlaying, taskVideos.length]);
 
-  // 当切换到视频模式时，停止分镜草图播放（注释掉，让用户手动控制）
-  // useEffect(() => {
-  //   if (Number(currentStep) >= 3) {
-  //     console.log('切换到步骤3+，停止分镜草图播放');
-  //     setIsPlaying(false);
-  //   }
-  // }, [currentStep]);
-
   // 当切换到分镜草图模式时，停止视频播放
   useEffect(() => {
-    if (currentStep !== '3') {
+    if (currentStage !== 'video') {
       setIsVideoPlaying(false);
     }
-  }, [currentStep]);
+  }, [currentStage]);
 
   return {
     isPlaying,

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

@@ -3,43 +3,9 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData, pauseMovieProjectPlan, resumeMovieProjectPlan } from '@/api/video_flow';
-import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
-import { setSketchCount, setVideoCount } from '@/lib/store/workflowSlice';
 import { useScriptService } from "@/app/service/Interaction/ScriptService";
 import { useUpdateEffect } from '@/app/hooks/useUpdateEffect';
-import { TaskObject, Status, Stage } from '@/api/DTO/movieEdit';
+import { LOADING_TEXT_MAP, TaskObject, Status, Stage } from '@/api/DTO/movieEdit';
-
-// 步骤映射
-const STEP_MAP = {
-  'initializing': '0',
-  'sketch': '1',
-  'character': '2',
-  'video': '3',
-  'music': '4',
-  'final_video': '6'
-} as const;
-// 执行loading文字映射
-const LOADING_TEXT_MAP = {
-  initializing: 'initializing...',
-  script: 'Generating script...',
-  getSketchStatus: 'Getting sketch status...',
-  sketch: (count: number, total: number) => `Generating sketch ${count}/${total}...`,
-  sketchComplete: 'Sketch generation complete',
-  character: 'Drawing characters...',
-  newCharacter: (count: number, total: number) => `Drawing character ${count}/${total}...`,
-  getShotSketchStatus: 'Getting shot sketch status...',
-  shotSketch: (count: number, total: number) => `Generating shot sketch ${count}/${total}...`,
-  getVideoStatus: 'Getting video status...',
-  video: (count: number, total: number) => `Generating video ${count}/${total}...`,
-  videoComplete: 'Video generation complete',
-  audio: 'Generating background audio...',
-  postProduction: (step: string) => `Post-production: ${step}...`,
-  final: 'Generating final product...',
-  complete: 'Task completed'
-} as const;
-
-type ApiStep = keyof typeof STEP_MAP;
-
 
 export function useWorkflowData() {
   useEffect(() => {
@@ -53,7 +19,7 @@ export function useWorkflowData() {
   let tempTaskObject = useRef<TaskObject>({
     title: '',
     tags: [],
-    currentStage: 'script',
+    currentStage: 'script' as Stage,
     status: 'IN_PROGRESS' as Status,
     roles: {
       data: [],
@@ -81,19 +47,8 @@ export function useWorkflowData() {
 
   // 更新 taskObject 的类型
   const [taskObject, setTaskObject] = useState<TaskObject>(tempTaskObject.current);
-  const [taskSketch, setTaskSketch] = useState<any[]>([]);
-  const [taskScenes, setTaskScenes] = useState<any[]>([]);
-  const [taskShotSketch, setTaskShotSketch] = useState<any[]>([]);
-  const [taskVideos, setTaskVideos] = useState<any[]>([]);
-  const [currentStep, setCurrentStep] = useState('0');
   const [currentSketchIndex, setCurrentSketchIndex] = useState(0);
-  const [isGeneratingSketch, setIsGeneratingSketch] = useState(false);
-  const [isGeneratingVideo, setIsGeneratingVideo] = useState(false);
   const [currentLoadingText, setCurrentLoadingText] = useState('loading project info...');
-  const [totalSketchCount, setTotalSketchCount] = useState(0);
-  const [roles, setRoles] = useState<any[]>([]);
-  const [music, setMusic] = useState<any[]>([]);
-  const [final, setFinal] = useState<any>(null);
   const [dataLoadError, setDataLoadError] = useState<string | null>(null);
   const [needStreamData, setNeedStreamData] = useState(false);
   const [isPauseWorkFlow, setIsPauseWorkFlow] = useState(false);
@@ -103,10 +58,6 @@ export function useWorkflowData() {
     isLoading: true
   });
 
-
-  const dispatch = useAppDispatch();
-  const { sketchCount, videoCount } = useAppSelector((state) => state.workflow);
-
   const {
     scriptBlocksMemo, // 渲染剧本数据
     initializeFromProject,
@@ -170,24 +121,24 @@ export function useWorkflowData() {
         console.log('应用剧本');
         // 自动模式下 应用剧本；手动模式 需要点击 下一步 触发
         // 确保仅自动触发一次
-        state.mode.includes('auto') && loadingText.current !== LOADING_TEXT_MAP.getSketchStatus && applyScript();
+        state.mode.includes('auto') && loadingText.current !== LOADING_TEXT_MAP.character && applyScript();
-        loadingText.current = LOADING_TEXT_MAP.getSketchStatus;
+        loadingText.current = LOADING_TEXT_MAP.character;
       } else {
         loadingText.current = LOADING_TEXT_MAP.script;
       }
     }
-    if (taskObject.currentStage === 'scene') {
-      const realSketchResultData = taskObject.scenes.data.filter((item: any) => item.status !== 0);
-      if (taskObject.scenes.total_count > realSketchResultData.length) {
-        loadingText.current = LOADING_TEXT_MAP.sketch(realSketchResultData.length, taskObject.scenes.total_count);
-      } else {
-        loadingText.current = LOADING_TEXT_MAP.character;
-      }
-    }
     if (taskObject.currentStage === 'character') {
       const realCharacterResultData = taskObject.roles.data.filter((item: any) => item.status !== 0);
       if (taskObject.roles.total_count > realCharacterResultData.length) {
         loadingText.current = LOADING_TEXT_MAP.newCharacter(realCharacterResultData.length, taskObject.roles.total_count);
+      } else {
+        loadingText.current = LOADING_TEXT_MAP.getSketchStatus;
+      }
+    }
+    if (taskObject.currentStage === 'scene') {
+      const realSketchResultData = taskObject.scenes.data.filter((item: any) => item.status !== 0);
+      if (taskObject.scenes.total_count > realSketchResultData.length) {
+        loadingText.current = LOADING_TEXT_MAP.sketch(realSketchResultData.length, taskObject.scenes.total_count);
       } else {
         loadingText.current = LOADING_TEXT_MAP.getShotSketchStatus;
       }
@@ -217,16 +168,6 @@ export function useWorkflowData() {
     setCurrentLoadingText(loadingText.current);
   }, [scriptBlocksMemo, taskObject.currentStage, taskObject.scenes.data, taskObject.roles.data, taskObject.shot_sketch.data, taskObject.videos.data, taskObject.status], {mode: 'none'});
 
-  // 更新 setSketchCount
-  const updateSketchCount = useCallback((count: number) => {
-    dispatch(setSketchCount(count));
-  }, [dispatch]);
-
-  // 更新 setVideoCount
-  const updateVideoCount = useCallback((count: number) => {
-    dispatch(setVideoCount(count));
-  }, [dispatch]);
-
   // 将 sketchCount 和 videoCount 放到 redux 中 每一次变化也要更新
 
   // 添加手动播放控制
@@ -249,13 +190,7 @@ export function useWorkflowData() {
         throw new Error(response.message);
       }
 
-      let sketchCount = 0;
       const all_task_data = response.data;
-      // all_task_data 下标0 和 下标1 换位置
-      const temp = all_task_data[0];
-      all_task_data[0] = all_task_data[1];
-      all_task_data[1] = temp;
-
       const { current: taskCurrent } = tempTaskObject;
 
       console.log('---look-all_task_data', all_task_data);
@@ -266,32 +201,6 @@ export function useWorkflowData() {
 
       for (const task of all_task_data) {
         // 如果有已完成的数据，同步到状态
-        if (task.task_name === 'generate_sketch' && task.task_result && task.task_result.data) {
-          let realSketchResultData = task.task_result.data.filter((item: any) => item.image_path);
-          if (task.task_status === 'COMPLETED') {
-            realSketchResultData = taskCurrent.scenes.data.filter((item: any) => item.status !== 0);
-          }
-          console.log('---look-realSketchResultData', realSketchResultData);
-          taskCurrent.scenes.total_count = task.task_result.total_count;
-          if (task.task_status !== 'COMPLETED' || taskCurrent.scenes.total_count !== realSketchResultData.length) {
-            taskCurrent.currentStage = 'scene';
-            // 正在生成草图中 替换 sketch 数据
-            const sketchList = [];
-            for (const sketch of task.task_result.data) {
-              sketchList.push({
-                url: sketch.image_path,
-                script: sketch.sketch_name,
-                status: sketch.image_path ? 1 : (task.task_status === 'COMPLETED' ? 2 : 0)
-              });
-            }
-            taskCurrent.scenes.data = sketchList;
-            if (task.task_status === 'COMPLETED') {
-              // 草图生成完成
-            }
-            break;
-          }
-        }
-
         if (task.task_name === 'generate_character' && task.task_result && task.task_result.data) {
           let realCharacterResultData = task.task_result.data.filter((item: any) => item.image_path);
           if (task.task_status === 'COMPLETED') {
@@ -317,6 +226,32 @@ export function useWorkflowData() {
           }
           
         }
+        
+        if (task.task_name === 'generate_sketch' && task.task_result && task.task_result.data) {
+          let realSketchResultData = task.task_result.data.filter((item: any) => item.image_path);
+          if (task.task_status === 'COMPLETED') {
+            realSketchResultData = taskCurrent.scenes.data.filter((item: any) => item.status !== 0);
+          }
+          console.log('---look-realSketchResultData', realSketchResultData);
+          taskCurrent.scenes.total_count = task.task_result.total_count;
+          if (task.task_status !== 'COMPLETED' || taskCurrent.scenes.total_count !== realSketchResultData.length) {
+            taskCurrent.currentStage = 'scene';
+            // 正在生成草图中 替换 sketch 数据
+            const sketchList = [];
+            for (const sketch of task.task_result.data) {
+              sketchList.push({
+                url: sketch.image_path,
+                script: sketch.sketch_name,
+                status: sketch.image_path ? 1 : (task.task_status === 'COMPLETED' ? 2 : 0)
+              });
+            }
+            taskCurrent.scenes.data = sketchList;
+            if (task.task_status === 'COMPLETED') {
+              // 草图生成完成
+            }
+            break;
+          }
+        }
 
         // debugger;
         if (task.task_name === 'generate_shot_sketch' && task.task_result && task.task_result.data) {
@@ -485,27 +420,6 @@ export function useWorkflowData() {
 
       // 如果有已完成的数据，同步到状态
       if (data) {
-        if (data.sketch && data.sketch.data) {
-          taskCurrent.currentStage = 'scene';
-          const realSketchResultData = data.sketch.data.filter((item: any) => item.image_path);
-          const sketchList = [];
-          for (const sketch of data.sketch.data) {
-            sketchList.push({
-              url: sketch.image_path,
-              script: sketch.sketch_name,
-              status: sketch.image_path ? 1 : (data.sketch.task_status === 'COMPLETED' ? 2 : 0)
-            });
-          }
-          taskCurrent.scenes.data = sketchList;
-          taskCurrent.scenes.total_count = data.sketch.total_count;
-          // 设置为最后一个草图
-          if (data.sketch.total_count > realSketchResultData.length) {
-            // 场景生成中
-            setIsGeneratingSketch(true);
-          } else {
-            // 场景生成完成
-          }
-        }
         if (data.character && data.character.data && data.character.data.length > 0) {
           taskCurrent.currentStage = 'character';
           const characterList = [];
@@ -524,6 +438,26 @@ export function useWorkflowData() {
             // 角色生成完成
           }
         }
+        if (data.sketch && data.sketch.data) {
+          taskCurrent.currentStage = 'scene';
+          const realSketchResultData = data.sketch.data.filter((item: any) => item.image_path);
+          const sketchList = [];
+          for (const sketch of data.sketch.data) {
+            sketchList.push({
+              url: sketch.image_path,
+              script: sketch.sketch_name,
+              status: sketch.image_path ? 1 : (data.sketch.task_status === 'COMPLETED' ? 2 : 0)
+            });
+          }
+          taskCurrent.scenes.data = sketchList;
+          taskCurrent.scenes.total_count = data.sketch.total_count;
+          // 设置为最后一个草图
+          if (data.sketch.total_count > realSketchResultData.length) {
+            // 场景生成中
+          } else {
+            // 场景生成完成
+          }
+        }
         if (data.shot_sketch && data.shot_sketch.data) {
           taskCurrent.currentStage = 'shot_sketch';
           const realShotResultData = data.shot_sketch.data.filter((item: any) => item.url);
@@ -629,17 +563,7 @@ export function useWorkflowData() {
   // 重试加载数据
   const retryLoadData = () => {
     setDataLoadError(null);
-    // 重置所有状态
-    setTaskSketch([]);
-    setTaskScenes([]);
-    setTaskVideos([]);
-    updateSketchCount(0);
-    updateVideoCount(0);
-    setRoles([]);
-    setMusic([]);
-    setFinal(null);
     setCurrentSketchIndex(0);
-    setCurrentStep('0');
     // 重新初始化
     initializeWorkflow();
   };
@@ -652,21 +576,9 @@ export function useWorkflowData() {
   return {
     taskObject,
     scriptData,
-    taskSketch,
-    taskScenes,
-    taskShotSketch,
-    taskVideos,
-    sketchCount,
     isLoading: state.isLoading,
-    currentStep,
     currentSketchIndex,
-    isGeneratingSketch,
-    isGeneratingVideo,
     currentLoadingText,
-    totalSketchCount,
-    roles,
-    music,
-    final,
     dataLoadError,
     setCurrentSketchIndex,
     retryLoadData,

components/ui/character-tab-content.tsx

@@ -11,30 +11,10 @@ import HorizontalScroller from './HorizontalScroller';
 import { useEditData } from '@/components/pages/work-flow/use-edit-data';
 import { useSearchParams } from 'next/navigation';
 import { RoleEntity } from '@/app/service/domain/Entities';
-
+import { Role } from '@/api/DTO/movieEdit';
-interface Appearance {
-  hairStyle: string;
-  skinTone: string;
-  facialFeatures: string;
-  bodyType: string;
-}
-
-interface Role {
-  name: string;
-  url: string;
-  sound: string;
-  soundDescription: string;
-  roleDescription: string;
-  age: number;
-  gender: 'male' | 'female' | 'other';
-  ethnicity: string;
-  appearance: Appearance;
-  // 新增标签数组
-  tags: string[];
-}
-
 
 interface CharacterTabContentProps {
+  originalRoles: Role[];
   onClose: () => void;
   onApply: () => void;
   setActiveTab: (tabId: string) => void;
@@ -42,10 +22,10 @@ interface CharacterTabContentProps {
 
 
 export const CharacterTabContent = forwardRef<
-  { switchBefore: (tabId: string) => boolean, saveBefore: () => void },
+  { switchBefore: (tabId: string) => boolean, saveOrCloseBefore: () => void },
 CharacterTabContentProps
 >((props, ref) => {
-  const { onClose, onApply, setActiveTab } = props;
+  const { onClose, onApply, setActiveTab, originalRoles } = props;
   const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false);
   const [replacePanelKey, setReplacePanelKey] = useState(0);
   const [ignoreReplace, setIgnoreReplace] = useState(false);
@@ -76,7 +56,6 @@ CharacterTabContentProps
     regenerateRole,
     fetchUserRoleLibrary,
     uploadImageAndUpdateRole,
-    changeTabCallback,
     // role shot
     shotSelectionList,
     fetchRoleShots,
@@ -91,7 +70,8 @@ CharacterTabContentProps
     switchBefore: (tabId: string) => {
       setNextToTabId(tabId);
       // 判断 角色是否修改
-      const isChange = selectedRole!.isChangeRole
+      const currentIndex = getCurrentIndex();
+      const isChange = currentIndex !== -1 && isRoleChange(originalRoles[currentIndex]);
       console.log('switchBefore', isChange);
       if (isChange) {
         setTriggerType('tab');
@@ -99,15 +79,16 @@ CharacterTabContentProps
       }
       return isChange;
     },
-    saveBefore: () => {
+    saveOrCloseBefore: () => {
-      console.log('saveBefore');
+      console.log('saveOrCloseBefore');
       // 判断 角色是否修改
-      changeTabCallback((isChange: Boolean) => {
+      const currentIndex = getCurrentIndex();
-        if (isChange) {
+      if (currentIndex !== -1 && isRoleChange(originalRoles[currentIndex])) {
-          setTriggerType('apply');
+        setTriggerType('apply');
-          handleStartReplaceCharacter();
+        handleStartReplaceCharacter();
-        }
+      } else {
-      });
+        onClose();
+      }
     }
   }));
 
@@ -179,24 +160,33 @@ CharacterTabContentProps
     setIsReplacePanelOpen(false);
   };
 
+  // 对比角色是否修改
+  const isRoleChange = (role: Role) => {
+    console.log('对比角色是否修改', role, selectedRole);
+    return role.name !== selectedRole?.name || role.url !== selectedRole?.imageUrl;
+  };
+  // 获取当前选中下标
+  const getCurrentIndex = () => {
+    return originalRoles.findIndex(role => role.name === selectedRole?.name);
+  };
+
   const handleChangeRole = (index: number) => {
-    const oldRole = roleData.find(role => role.id === selectedRole?.id);
     console.log('切换角色前对比');
-    changeTabCallback((isChange: Boolean) => {
+    const currentIndex = getCurrentIndex();
-      if (isChange) {
+    if (currentIndex === index) return;
-        setTriggerType('user');
+    if (currentIndex !== -1 && isRoleChange(originalRoles[currentIndex])) {
-        setIsRemindReplacePanelOpen(true);
+      setTriggerType('user');
-        setNextToUserIndex(index);
+      setIsRemindReplacePanelOpen(true);
-        return;
+      setNextToUserIndex(index);
-      }
+      return;
+    }
 
-      // 重置替换规则
+    // 重置替换规则
-      setEnableAnimation(false);
+    setEnableAnimation(false);
-      setIgnoreReplace(false);
+    setIgnoreReplace(false);
-      setIsRegenerate(false);
+    setIsRegenerate(false);
 
-      selectRole(roleData[index]);
+    selectRole(roleData[index]);
-    });
   };
 
   // 从角色库中选择角色
@@ -266,18 +256,8 @@ CharacterTabContentProps
     });
   };
 
-  // 如果loading 显示loading状态
-  if (loading) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
-        <div className="w-12 h-12 mb-4 animate-spin rounded-full border-b-2 border-blue-600" />
-        <p>Loading...</p>
-      </div>
-    );
-  }
-
   // 如果没有角色数据，显示占位内容
-  if (roleData.length === 0) {
+  if (originalRoles.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
         <Users className="w-16 h-16 mb-4" />
@@ -306,22 +286,22 @@ CharacterTabContentProps
           <HorizontalScroller
             itemWidth={96}
             gap={0}
-            selectedIndex={roleData.findIndex(role => role.id === selectedRole?.id)}
+            selectedIndex={originalRoles?.findIndex(role => role.name === selectedRole?.name)}
             onItemClick={(i: number) => handleChangeRole(i)}
           >
-            {roleData.map((role, index) => (
+            {originalRoles.map((role, index) => (
               <motion.div
                 key={`role-${index}`}
                 className={cn(
                   'relative flex-shrink-0 w-24 rounded-lg overflow-hidden cursor-pointer',
                   'aspect-[9/16]',
-                  role.id === selectedRole?.id ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
+                  role.name === selectedRole?.name ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
                 )}
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
               >
                 <img
-                  src={role.imageUrl}
+                  src={role.url}
                   alt={role.name}
                   className="w-full h-full object-cover"
                 />
@@ -335,78 +315,83 @@ CharacterTabContentProps
       </motion.div>
 
       {/* 下部分：角色详情 */}
-      <motion.div
+      { loading ? (
-        className="grid grid-cols-2 gap-6"
+        <div className="flex flex-col items-center justify-center min-h-[300px] text-white/50">
-        initial={{ opacity: 0, y: 20 }}
+          <Loader2 className="w-12 h-12 mb-4 animate-spin" />
-        animate={{ opacity: 1, y: 0 }}
+          <p>Loading...</p>
-        transition={{ delay: 0.2 }}
+        </div>
-      >
+      ) : (
+        <motion.div
+          className="grid grid-cols-2 gap-6"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
 
-        {/* 左列：角色预览 */}
+          {/* 左列：角色预览 */}
-        <div className="space-y-4">
+          <div className="space-y-4">
-          {/* 角色预览图 */}
+            {/* 角色预览图 */}
-          <div className="w-full h-full mx-auto rounded-lg relative group">
+            <div className="w-full h-full mx-auto rounded-lg relative group">
-            <ImageBlurTransition
+              <ImageBlurTransition
-              src={selectedRole?.imageUrl || ''}
+                src={selectedRole?.imageUrl || ''}
-              alt={selectedRole?.name || ''}
+                alt={selectedRole?.name || ''}
-              width='100%'
+                width='100%'
-              height='100%'
+                height='100%'
-              enableAnimation={enableAnimation}
+                enableAnimation={enableAnimation}
+              />
+              {/* 应用角色按钮 */}
+              <div className='absolute top-3 right-3 flex gap-2'>
+                <motion.button
+                  className="p-2 bg-black/50 hover:bg-black/70
+                    text-white rounded-full backdrop-blur-sm transition-colors z-10"
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={handleUploadClick}
+                  disabled={isUploading}
+                >
+                  {isUploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <ImageUp className="w-4 h-4" />}
+                </motion.button>
+                <motion.button
+                  className="p-2 bg-black/50 hover:bg-black/70
+                    text-white rounded-full backdrop-blur-sm transition-colors z-10"
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={() => handleOpenReplaceLibrary()}
+                >
+                  <Library className="w-4 h-4" />
+                </motion.button>
+              </div>
+            </div>
+
+          </div>
+          {/* 右列：角色信息 */}
+          <div className="space-y-4">
+            <CharacterEditor
+              ref={characterEditorRef}
+              className="min-h-[calc(100%-4rem)]"
+              description={selectedRole?.generateText || ''}
+              highlight={selectedRole?.tags || []}
+              onSmartPolish={handleSmartPolish}
+              onUpdateText={(text: string) => updateRoleText(text)}
             />
-            {/* 应用角色按钮 */}
+            {/* 重新生成按钮、替换形象按钮 */}
-            <div className='absolute top-3 right-3 flex gap-2'>
+            <div className="grid grid-cols-1 gap-2">
               <motion.button
-                className="p-2 bg-black/50 hover:bg-black/70
+                onClick={() => handleRegenerate()}
-                  text-white rounded-full backdrop-blur-sm transition-colors z-10"
+                className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
-                whileHover={{ scale: 1.05 }}
+                  text-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                whileTap={{ scale: 0.95 }}
+                whileHover={{ scale: 1.02 }}
-                onClick={handleUploadClick}
+                whileTap={{ scale: 0.98 }}
-                disabled={isUploading}
+                disabled={isRegenerate}
               >
-                {isUploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <ImageUp className="w-4 h-4" />}
+                <RefreshCw className="w-4 h-4" />
-              </motion.button>
+                <span>{isRegenerate ? 'Regenerating...' : 'Regenerate'}</span>
-              <motion.button
-                className="p-2 bg-black/50 hover:bg-black/70
-                  text-white rounded-full backdrop-blur-sm transition-colors z-10"
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                onClick={() => handleOpenReplaceLibrary()}
-              >
-                <Library className="w-4 h-4" />
               </motion.button>
             </div>
           </div>
-
+        </motion.div>
-        </div>
+      )}
-        {/* 右列：角色信息 */}
+      
-        <div className="space-y-4">
-          <CharacterEditor
-            ref={characterEditorRef}
-            className="min-h-[calc(100%-4rem)]"
-            description={selectedRole?.generateText || ''}
-            highlight={selectedRole?.tags || []}
-            onSmartPolish={handleSmartPolish}
-            onUpdateText={(text: string) => updateRoleText(text)}
-          />
-          {/* 重新生成按钮、替换形象按钮 */}
-          <div className="grid grid-cols-1 gap-2">
-            <motion.button
-              onClick={() => handleRegenerate()}
-              className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
-                text-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              disabled={isRegenerate}
-            >
-              <RefreshCw className="w-4 h-4" />
-              <span>{isRegenerate ? 'Regenerating...' : 'Regenerate'}</span>
-            </motion.button>
-          </div>
-        </div>
-
-
-
-      </motion.div>
 
       <FloatingGlassPanel
         open={isReplacePanelOpen}

components/ui/edit-modal.tsx

@@ -12,6 +12,7 @@ import { CharacterTabContent } from './character-tab-content';
 import { MusicTabContent } from './music-tab-content';
 import FloatingGlassPanel from './FloatingGlassPanel';
 import { SaveEditUseCase } from '@/app/service/usecase/SaveEditUseCase';
+import { TaskObject } from '@/api/DTO/movieEdit';
 
 interface EditModalProps {
   isOpen: boolean;
@@ -23,6 +24,7 @@ interface EditModalProps {
   isPauseWorkFlow: boolean;
   fallbackToStep: any;
   originalText?: string;
+  taskObject?: TaskObject;
 }
 
 const tabs = [
@@ -44,7 +46,8 @@ export function EditModal({
   setIsPauseWorkFlow,
   isPauseWorkFlow,
   fallbackToStep,
-  originalText
+  originalText,
+  taskObject
 }: EditModalProps) {
   const [activeTab, setActiveTab] = useState(activeEditTab);
   const [currentIndex, setCurrentIndex] = useState(currentSketchIndex);
@@ -55,6 +58,7 @@ export function EditModal({
   const [remindFallbackText, setRemindFallbackText] = useState('The task will be regenerated and edited. Do you want to continue?');
   const scriptTabContentRef = useRef<any>(null);
   const characterTabContentRef = useRef<any>(null);
+  const shotTabContentRef = useRef<any>(null);
   // 添加一个状态来标记是否是从切换tab触发的提醒
   const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null);
   const [disabledBtn, setDisabledBtn] = useState(false);
@@ -72,9 +76,9 @@ export function EditModal({
   const isTabDisabled = (tabId: string) => {
     if (tabId === 'settings') return false;
     // 换成 如果对应标签下 数据存在 就不禁用
-    // if (tabId === '1') return roles.length === 0;
+    if (tabId === '1') return taskObject?.roles.data.length === 0;
     // if (tabId === '2') return taskScenes.length === 0;
-    // if (tabId === '3') return sketchVideo.length === 0;
+    if (tabId === '3') return taskObject?.videos.data.length === 0;
     if (tabId === '4') return false;
     return false;
   };
@@ -98,6 +102,11 @@ export function EditModal({
       if (characterTabContent) {
         return characterTabContent.switchBefore(tabId);
       }
+    } else if (activeTab === '3') {
+      const shotTabContent = shotTabContentRef.current;
+      if (shotTabContent) {
+        return shotTabContent.switchBefore(tabId);
+      }
     }
     return false;
   }
@@ -117,11 +126,11 @@ export function EditModal({
     console.log('handleSave');
     // setIsRemindFallbackOpen(true);
     if (activeTab === '0') {
-      scriptTabContentRef.current.saveBefore();
+      scriptTabContentRef.current.saveOrCloseBefore();
     } else if (activeTab === '1') {
-      characterTabContentRef.current.saveBefore();
+      characterTabContentRef.current.saveOrCloseBefore();
     } else if (activeTab === '3') {
-      handleConfirmGotoFallback();
+      shotTabContentRef.current.saveOrCloseBefore('apply');
     }
   }
 
@@ -170,7 +179,13 @@ export function EditModal({
   const handleClickClose = () => {
     // TODO 关闭前 检查 当前tab 下是否有更新 如果有更新 则提醒用户 是否确认应用
     // 暂时 默认弹出提醒
-    setIsRemindCloseOpen(true);
+    if (activeTab === '0') {
+      scriptTabContentRef.current.saveOrCloseBefore();
+    } else if (activeTab === '1') {
+      characterTabContentRef.current.saveOrCloseBefore();
+    } else if (activeTab === '3') {
+      shotTabContentRef.current.saveOrCloseBefore('close');
+    }
   }
 
   const handleConfirmApply = () => {
@@ -195,6 +210,7 @@ export function EditModal({
             originalText={originalText}
             onApply={handleApply}
             setActiveTab={setActiveTab}
+            onClose={onClose}
           />
         );
       case '1':
@@ -204,6 +220,7 @@ export function EditModal({
             onClose={onClose}
             onApply={handleApply}
             setActiveTab={setActiveTab}
+            originalRoles={taskObject?.roles.data || []}
           />
         );
       case '2':
@@ -215,9 +232,12 @@ export function EditModal({
       case '3':
         return (
           <ShotTabContent
+            ref={shotTabContentRef}
+            originalVideos={taskObject?.videos.data || []}
             currentSketchIndex={currentIndex}
-            roles={roles}
             onApply={handleApply}
+            onClose={onClose}
+            setActiveTab={setActiveTab}
           />
         );
       case '4':

components/ui/script-tab-content.tsx

@@ -12,13 +12,14 @@ interface ScriptTabContentProps {
   originalText?: string;
   onApply: () => void;
   setActiveTab: (tabId: string) => void;
+  onClose: () => void;
 }
 
 export const ScriptTabContent = forwardRef<
-  { switchBefore: (tabId: string) => boolean, saveBefore: () => void },
+  { switchBefore: (tabId: string) => boolean, saveOrCloseBefore: () => void },
   ScriptTabContentProps
 >((props, ref) => {
-  const { setIsPauseWorkFlow, isPauseWorkFlow, originalText, onApply, setActiveTab } = props;
+  const { setIsPauseWorkFlow, isPauseWorkFlow, originalText, onApply, setActiveTab, onClose } = props;
   const { loading, scriptData, setAnyAttribute, applyScript } = useEditData('script', originalText);
 
   const [isUpdate, setIsUpdate] = useState(false);
@@ -39,10 +40,12 @@ export const ScriptTabContent = forwardRef<
       }
       return isUpdate;
     },
-    saveBefore: () => {
+    saveOrCloseBefore: () => {
-      console.log('saveBefore');
+      console.log('saveOrCloseBefore');
       if (isUpdate) {
         onApply();
+      } else {
+        onClose();
       }
     }
   }));

components/ui/shot-tab-content.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, forwardRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { RefreshCw, User, Loader2, X, Plus, Video, CircleX } from 'lucide-react';
 import { cn } from '@/public/lib/utils';
@@ -11,19 +11,26 @@ import FloatingGlassPanel from './FloatingGlassPanel';
 import { ReplaceCharacterPanel } from './replace-character-panel';
 import HorizontalScroller from './HorizontalScroller';
 import { useEditData } from '@/components/pages/work-flow/use-edit-data';
-import { RoleEntity } from '@/app/service/domain/Entities';
+import { RoleEntity, VideoSegmentEntity } from '@/app/service/domain/Entities';
+import { ShotVideo } from '@/api/DTO/movieEdit';
 
 interface ShotTabContentProps {
   currentSketchIndex: number;
-  roles?: any[];
+  originalVideos: ShotVideo[];
   onApply: () => void;
+  onClose: () => void;
+  setActiveTab: (tabId: string) => void;
 }
 
-export const ShotTabContent = (props: ShotTabContentProps) => {
+export const ShotTabContent = forwardRef<
-  const { currentSketchIndex = 0, roles = [], onApply } = props;
+  { switchBefore: (tabId: string) => boolean, saveOrCloseBefore: (type: 'apply' | 'close') => void },
+  ShotTabContentProps
+>((props, ref) => {
+  const { currentSketchIndex = 0, onApply, onClose, originalVideos, setActiveTab } = props;
   const {
     loading,
     shotData,
+    selectedSegment,
     scriptRoles,
     setSelectedSegment,
     regenerateVideoSegment,
@@ -36,8 +43,6 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
     calculateRecognitionBoxes,
     setSelectedRole
   } = useEditData('shot');
-  const [selectedIndex, setSelectedIndex] = useState(currentSketchIndex);
-
   const [detections, setDetections] = useState<PersonDetection[]>([]);
   const [scanState, setScanState] = useState<'idle' | 'scanning' | 'detected' | 'failed' | 'timeout'>('idle');
   const [isScanFailed, setIsScanFailed] = useState(false);
@@ -51,13 +56,54 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
   const [isRegenerate, setIsRegenerate] = useState(false);
   const [pendingRegeneration, setPendingRegeneration] = useState(false);
 
+  const [isInitialized, setIsInitialized] = useState(true);
+  const [triggerType, setTriggerType] = useState<'tab' | 'apply' | 'close'>('tab');
+  const [nextToTabId, setNextToTabId] = useState<string>('');
+  const [isRemindApplyUpdate, setIsRemindApplyUpdate] = useState(false);
+  const [updateData, setUpdateData] = useState<VideoSegmentEntity[]>([]);
+
   useEffect(() => {
     console.log('shotTabContent-----shotData', shotData);
   }, [shotData]);
 
+  useEffect(() => {
+    console.log('-==========shotData===========-', shotData);
+    // 只在初始化且有角色数据时执行
+    if (isInitialized && shotData.length > 0) {
+      setIsInitialized(false);
+      setSelectedSegment(shotData[0]);
+    }
+  }, [shotData, isInitialized]);
+
+  // 暴露方法给父组件
+  React.useImperativeHandle(ref, () => ({
+    switchBefore: (tabId: string) => {
+      setNextToTabId(tabId);
+      // 判断 是否修改数据
+      const isChange = handleGetUpdateData().length > 0;
+      console.log('switchBefore', isChange);
+      if (isChange) {
+        setTriggerType('tab');
+        setIsRemindApplyUpdate(true);
+      }
+      return isChange;
+    },
+    saveOrCloseBefore: (type: 'apply' | 'close') => {
+      console.log('saveOrCloseBefore');
+      // 判断 是否修改数据
+      const isChange = handleGetUpdateData().length > 0;
+      if (isChange) {
+        setTriggerType(type);
+        setIsRemindApplyUpdate(true);
+      } else {
+        onClose();
+      }
+    }
+  }));
+
   useEffect(() => {
     if (pendingRegeneration) {
-      console.log('pendingRegeneration', pendingRegeneration, shotData[selectedIndex]?.lens);
+      console.log('pendingRegeneration', pendingRegeneration, selectedSegment?.lens);
       regenerateVideoSegment().then(() => {
         setPendingRegeneration(false);
         setIsRegenerate(false);
@@ -65,16 +111,35 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
     }
   }, [pendingRegeneration]);
 
-  // 监听当前选中index变化
+  // 监听当前选中segment变化
   useEffect(() => {
     console.log('shotTabContent-----shotData', shotData);
-    if (shotData.length > 0) {
+    if (shotData.length > 0 && !selectedSegment) {
       // 清空检测状态 和 检测结果
       setScanState('idle');
       setDetections([]);
-      setSelectedSegment(shotData[selectedIndex]);
+      setSelectedSegment(shotData[0]);
     }
-  }, [selectedIndex, shotData]);
+  }, [shotData, selectedSegment]);
+
+  // 获取修改的数据
+  const handleGetUpdateData = () => {
+    console.log('handleGetUpdateData', shotData, originalVideos);
+    const updateData: VideoSegmentEntity[] = [];
+    shotData.forEach((shot, index) => {
+      const a = shot.videoUrl.map((url) => url.video_url).join(',');
+      const b = originalVideos[index].urls.join(',');
+      if (a !== b) {
+        updateData.push({
+          ...shot,
+          name: 'Segment ' + (index + 1)
+        });
+      }
+    });
+    console.log('updateData', updateData);
+    setUpdateData(updateData);
+    return updateData;
+  }
 
   // 处理扫描开始
   const handleScan = async () => {
@@ -174,16 +239,34 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
     onApply();
   };
 
+  // 应用修改
+  const handleApplyUpdate = () => {
+    console.log('apply update');
+    onApply();
+  }
+
+  // 忽略修改
+  const handleIgnoreUpdate = () => {
+    console.log('ignore update');
+    if (triggerType === 'apply') {
+      onClose();
+    } else if (triggerType === 'tab') {
+      setActiveTab(nextToTabId);
+    }
+  }
+
   // 点击按钮重新生成
   const handleRegenerate = async () => {
     console.log('regenerate');
     setIsRegenerate(true);
     const shotInfo = shotsEditorRef.current.getShotInfo();
     console.log('shotInfo', shotInfo);
-    setSelectedSegment({
+    if (selectedSegment) {
-      ...shotData[selectedIndex],
+      setSelectedSegment({
-      lens: shotInfo
+        ...selectedSegment,
-    });
+        lens: shotInfo
+      });
+    }
     setTimeout(() => {
       setPendingRegeneration(true);
     }, 1000);
@@ -197,22 +280,20 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
 
   // 切换选择分镜
   const handleSelectShot = (index: number) => {
-    // 切换前 判断数据是否发生变化
+    // 通过 video_id 找到对应的分镜
-    setSelectedIndex(index);
+    const selectedVideo = originalVideos[index];
+    const targetSegment = shotData.find(shot => 
+      shot.videoUrl.some(url => url.video_id === selectedVideo.video_id)
+    );
+    if (targetSegment) {
+      setSelectedSegment(targetSegment);
+    }
   };
 
-  // 如果loading 显示loading状态
+
-  if (loading) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
-        <div className="w-12 h-12 mb-4 animate-spin rounded-full border-b-2 border-blue-600" />
-        <p>Loading...</p>
-      </div>
-    );
-  }
 
   // 如果没有数据，显示空状态
-  if (shotData.length === 0) {
+  if (originalVideos.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
         <Video className="w-16 h-16 mb-4" />
@@ -233,28 +314,23 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
           <HorizontalScroller
             itemWidth={128}
             gap={0}
-            selectedIndex={selectedIndex}
+            selectedIndex={originalVideos.findIndex(shot => selectedSegment?.videoUrl.some(url => url.video_id === shot.video_id))}
             onItemClick={(i: number) => handleSelectShot(i)}
           >
-            {shotData.map((shot, index) => (
+            {originalVideos.map((shot, index) => (
               <motion.div
-                key={shot.id || index}
+                key={shot.video_id || index}
                 className={cn(
                   'relative flex-shrink-0 w-32 aspect-video rounded-lg overflow-hidden cursor-pointer group',
-                  selectedIndex === index ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
+                  selectedSegment?.videoUrl.some(url => url.video_id === shot.video_id) ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
                 )}
                 whileHover={{ scale: 1.02 }}
                 whileTap={{ scale: 0.98 }}
               >
-                {(shot.status === 0 || shot.videoUrl.length === 0) && (
+                {shot.urls.length > 0 && (
-                  <div className="w-full h-full flex items-center justify-center">
-                    <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
-                  </div>
-                )}
-                {shot.status === 1 && shot.videoUrl[0] && (
                   <video
-                    src={shot.videoUrl[0].video_url}
+                    src={shot.urls[0]}
-                    key={shot.videoUrl[0].video_url}
+                    key={shot.urls[0]}
                     className="w-full h-full object-cover"
                     muted
                     loop
@@ -263,12 +339,6 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
                     onMouseLeave={(e) => e.currentTarget.pause()}
                   />
                 )}
-                {/* 任务失败 */}
-                {shot.status === 2 && (
-                  <div className="w-full h-full flex items-center justify-center bg-red-500/10">
-                    <CircleX className="w-4 h-4 text-red-500" />
-                  </div>
-                )}
                 <div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/60 to-transparent">
                   <span className="text-xs text-white/90">{index + 1}</span>
                 </div>
@@ -291,14 +361,14 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
           <HorizontalScroller
             itemWidth={'auto'}
             gap={0}
-            selectedIndex={selectedIndex}
+            selectedIndex={originalVideos.findIndex(shot => selectedSegment?.videoUrl.some(url => url.video_id === shot.video_id))}
             onItemClick={(i: number) => handleSelectShot(i)}
           >
-            {shotData.map((shot, index) => {
+            {originalVideos.map((shot, index) => {
-              const isActive = selectedIndex === index;
+              const isActive = selectedSegment?.videoUrl.some(url => url.video_id === shot.video_id);
               return (
                 <motion.div
-                  key={shot.id || index}
+                  key={shot.video_id || index}
                   className={cn(
                     'flex-shrink-0 cursor-pointer transition-all duration-300',
                     isActive ? 'text-white' : 'text-white/50 hover:text-white/80'
@@ -311,14 +381,8 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
                   <div className="flex items-center gap-2">
                     <span className="text-sm whitespace-nowrap flex items-center gap-1">
                       <span>Segment {index + 1}</span>
-                      {shot.status === 0 && (
-                        <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
-                      )}
-                      {shot.status === 2 && (
-                        <CircleX className="w-4 h-4 text-red-500" />
-                      )}
                     </span>
-                    {index < shotData.length - 1 && (
+                    {index < originalVideos.length - 1 && (
                       <span className="text-white/20">|</span>
                     )}
                   </div>
@@ -335,7 +399,12 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
 
 
       {/* 下部分 */}
-      {shotData[selectedIndex] && (
+      {loading ? (
+        <div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
+          <div className="w-12 h-12 mb-4 animate-spin rounded-full border-b-2 border-blue-600" />
+          <p>Loading...</p>
+        </div>
+      ) : selectedSegment && (
         <motion.div
           className="grid grid-cols-2 gap-4 w-full"
           initial={{ opacity: 0, y: 20 }}
@@ -346,23 +415,23 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
           <div className="space-y-4 col-span-1">
             {/* 选中的视频预览 */}
             <>
-              {(shotData[selectedIndex]?.status === 0) && (
+              {(selectedSegment?.status === 0) && (
                 <div className="w-full h-full flex items-center gap-1 justify-center rounded-lg bg-black/30">
                   <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
                   <span className="text-white/50">Loading...</span>
                 </div>
               )}
               <AnimatePresence mode="wait">
-                {shotData[selectedIndex]?.status === 1 && shotData[selectedIndex]?.videoUrl.length &&  (
+                {selectedSegment?.status === 1 && selectedSegment?.videoUrl.length &&  (
                   <motion.div
                     className="aspect-video rounded-lg overflow-hidden relative group"
-                    key={`video-preview-${selectedIndex}`}
+                    key={`video-preview-${selectedSegment?.id}`}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
                   >
                     <PersonDetectionScene
-                      videoSrc={shotData[selectedIndex]?.videoUrl[0].video_url}
+                      videoSrc={selectedSegment?.videoUrl[0].video_url}
                       detections={detections}
                       scanState={scanState}
                       triggerScan={scanState === 'scanning'}
@@ -396,7 +465,7 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
                   </motion.div>
                 )}
               </AnimatePresence>
-              {(shotData[selectedIndex]?.status === 2) && (
+              {(selectedSegment?.status === 2) && (
                 <div className="w-full h-full flex gap-1 items-center justify-center rounded-lg bg-red-500/10">
                   <CircleX className="w-4 h-4 text-red-500" />
                   <span className="text-white/50">Failed, click to regenerate</span>
@@ -406,11 +475,11 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
           </div>
 
           {/* 基础配置 */}
-          <div className='space-y-4 col-span-1' key={selectedIndex}>
+          <div className='space-y-4 col-span-1' key={selectedSegment?.id}>
             <ShotsEditor
               ref={shotsEditorRef}
               roles={scriptRoles}
-              shotInfo={shotData[selectedIndex].lens}
+              shotInfo={selectedSegment.lens}
               style={{height: 'calc(100% - 4rem)'}}
             />
 
@@ -466,6 +535,79 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
         setIsReplaceLibraryOpen={setIsReplaceLibraryOpen}
         onSelect={handleSelectCharacter}
       />
+
+      <FloatingGlassPanel
+        open={isRemindApplyUpdate}
+        width='66vw'
+        onClose={() => setIsRemindApplyUpdate(false)}
+      >
+        <div className='h-full w-full flex flex-col'>
+          {/* 提示文字 有分镜被修改 是否需要应用 */}
+          <div className='flex-1 flex items-center justify-center'>
+            <span className='text-white/50'>Three are some segments have been modified, do you need to apply?</span>
+          </div>
+          {/* 已修改分镜列表 */}
+          <HorizontalScroller
+            itemWidth={128}
+            gap={0}
+          >
+            {updateData.map((shot, index) => (
+              <motion.div
+                key={shot.id || index}
+                className={cn(
+                  'relative flex-shrink-0 w-32 aspect-video rounded-lg overflow-hidden cursor-pointer group'
+                )}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {(shot.status === 0 || shot.videoUrl.length === 0) && (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
+                  </div>
+                )}
+                {shot.status === 1 && shot.videoUrl[0] && (
+                  <video
+                    src={shot.videoUrl[0].video_url}
+                    key={shot.videoUrl[0].video_url}
+                    className="w-full h-full object-cover"
+                    muted
+                    loop
+                    playsInline
+                    onMouseEnter={(e) => e.currentTarget.play()}
+                    onMouseLeave={(e) => e.currentTarget.pause()}
+                  />
+                )}
+                {/* 任务失败 */}
+                {shot.status === 2 && (
+                  <div className="w-full h-full flex items-center justify-center bg-red-500/10">
+                    <CircleX className="w-4 h-4 text-red-500" />
+                  </div>
+                )}
+                <div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/60 to-transparent">
+                  <span className="text-xs text-white/90">{shot.name}</span>
+                </div>
+              </motion.div>
+            ))}
+          </HorizontalScroller>
+          {/* 按钮 应用 忽略 */}
+          <div className='flex items-center justify-end gap-2'>
+            <motion.button
+              onClick={() => handleApplyUpdate()}
+              className='px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20
+                text-blue-500 rounded-lg transition-colors'
+            >
+              <span>Apply</span>
+            </motion.button>
+            <motion.button
+              onClick={() => handleIgnoreUpdate()}
+              className='px-4 py-2 bg-gray-500/10 hover:bg-gray-500/20
+                text-gray-500 rounded-lg transition-colors'
+            >
+              <span>Ignore</span>
+            </motion.button>
+          </div>
+        </div>
+      </FloatingGlassPanel>
     </div>
   );
-}
+});