更新 ScriptRenderer 以支持新的数据结构，优化剧本数据处理逻辑并添加调试信息；调整 TaskInfo 中的加载状态逻辑以适应新的剧本加载条件。

app/service/Interaction/ScriptService.ts

@@ -318,6 +318,7 @@ export const useScriptService = (): UseScriptService => {
   const setSynopsisWrapper = useCallback(
     (value: SetStateAction<string>) => {
       const newValue = typeof value === "function" ? value(synopsis) : value;
+      console.log('setSynopsisWrapper', newValue);
       setSynopsis(newValue);
       if (scriptEditUseCase) {
         scriptEditUseCase.updateStoryField("synopsis", newValue);
@@ -487,6 +488,8 @@ export const useScriptService = (): UseScriptService => {
     ];
     // 筛选出有内容的block
     const filteredArr = arr.filter(item => (item.content.length > 0 && item.content[0].text !== ''));
+    console.log('scriptBlocksMemo 所有关联数据', synopsis, categories, protagonist, incitingIncident, problem, conflict, stakes, characterArc);
+    console.log('scriptBlocksMemo', filteredArr);
     return filteredArr;
   }, [
     synopsis,

components/pages/work-flow/media-viewer.tsx

@@ -807,8 +807,8 @@ export function MediaViewer({
     return (
       <div className="relative w-full h-full bg-white/10 rounded-lg overflow-hidden p-2">
         {
-          mockScriptData ? (
+          scriptData ? (
-            <ScriptRenderer data={mockScriptData} setIsPauseWorkFlow={setIsPauseWorkFlow} />
+            <ScriptRenderer data={scriptData} setIsPauseWorkFlow={setIsPauseWorkFlow} />
           ) : (
             <div className="flex gap-2 w-full h-full">
               <div className="w-[70%] h-full rounded-lg gap-2 flex flex-col">

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

@@ -205,21 +205,13 @@ export function TaskInfo({
       setIsScriptModalOpen(true);
       setCurrentStage(1);
     }
-    // if (currentLoadingText.includes('character')) {
+    if (currentLoadingText.includes('script')) {
-    //   console.log('isScriptModalOpen-character', currentLoadingText, isScriptModalOpen);
+      console.log('isScriptModalOpen-script', currentLoadingText, isScriptModalOpen);
-    //   if (isScriptModalOpen) {
+      if (isScriptModalOpen) {
-    //     setIsScriptModalOpen(false);
+        setIsScriptModalOpen(false);
-
+      }
-    //     // 延迟8s 再次打开
+      setCurrentStage(0);
-    //     timerRef.current = setTimeout(() => {
+    }
-    //       setIsScriptModalOpen(true);
-    //       setCurrentStage(0);
-    //     }, 8000);
-    //   } else {
-    //     setIsScriptModalOpen(true);
-    //     setCurrentStage(0);
-    //   }
-    // }
     if (currentLoadingText.includes('initializing')) {
       console.log('isScriptModalOpen-initializing', currentLoadingText, isScriptModalOpen);
       setIsScriptModalOpen(true);

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

@@ -19,6 +19,7 @@ const STEP_MAP = {
 // 执行loading文字映射
 const LOADING_TEXT_MAP = {
   initializing: 'initializing...',
+  script: 'Generating script...',
   getSketchStatus: 'Getting sketch status...',
   sketch: (count: number, total: number) => `Generating sketch ${count + 1 > total ? total : count + 1}/${total}...`,
   sketchComplete: 'Sketch generation complete',
@@ -83,7 +84,6 @@ export function useWorkflowData() {
   const { sketchCount, videoCount } = useAppSelector((state) => state.workflow);
 
   const {
-    loading, // 加载状态
     scriptBlocksMemo, // 渲染剧本数据
     initializeFromProject,
   } = useScriptService();
@@ -94,10 +94,12 @@ export function useWorkflowData() {
   }, [originalText]);
   // 监听剧本加载完毕
   useEffect(() => {
-    if (!loading) {
+    if (scriptBlocksMemo.length > 0) {
-      console.log('开始初始化剧本-scriptBlocksMemo', scriptBlocksMemo);
+      console.log('scriptBlocksMemo 更新:', scriptBlocksMemo);
+      setScriptData(scriptBlocksMemo);
+      setCurrentLoadingText(LOADING_TEXT_MAP.script);
     }
-  }, [loading, scriptBlocksMemo]);
+  }, [scriptBlocksMemo]);
 
   // 自动开始播放一轮
   const autoPlaySketch = useCallback(() => {

components/script-renderer/ScriptRenderer.tsx

@@ -6,9 +6,10 @@ import ContentEditable, { ContentEditableEvent } from 'react-contenteditable';
 import { toast } from 'sonner';
 import { SelectDropdown } from '@/components/ui/select-dropdown';
 import { TypewriterText } from '@/components/workflow/work-office/common/TypewriterText';
+import { useScriptService } from '@/app/service/Interaction/ScriptService';
 
 interface ScriptRendererProps {
-  data: ScriptData;
+  data: any[];
   setIsPauseWorkFlow: (isPause: boolean) => void;
 }
 
@@ -21,14 +22,25 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
   const [addThemeTag, setAddThemeTag] = useState<string[]>([]);
   const [isInit, setIsInit] = useState(true);
 
+  const {
+    setSynopsis,
+    setCategories,
+    setProtagonist,
+    setIncitingIncident,
+    setProblem,
+    setConflict,
+    setStakes,
+    setCharacterArc,
+  } = useScriptService();
+
   useEffect(() => {
-    const themeBlock = data.blocks.find(block => block.id === 'categories');
+    const themeBlock = data.find(block => block.id === 'categories');
     if (themeBlock && themeBlock.content.length > 0) {
       const themeTag = themeBlock.content[0].text.split(',').map(item => item.trim());
       console.log('themeTag', themeTag);
       setAddThemeTag(themeTag);
     }
-  }, [data.blocks]);
+  }, [data]);
 
   // 添加聚焦效果
   useEffect(() => {
@@ -99,12 +111,30 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
   };
 
   const handleBlockTextChange = (block: ScriptBlock) => (e: ContentEditableEvent) => {
-    console.log(e.target.value);
+    // console.log(e.target.value);
   };
 
   const handleBlockTextBlur = (block: ScriptBlock) => (e: ContentEditableEvent) => {
-    console.log(e.target.value);
     setEditBlockId(null);
+    if (contentEditableRef.current) {
+      const text = contentEditableRef.current.innerText;
+      console.log('contentEditableRef---text', text);
+      if (block.id === 'synopsis') {
+        setSynopsis(text);
+      } else if (block.id === 'protagonist') {
+        setProtagonist(text);
+      } else if (block.id === 'incitingIncident') {
+        setIncitingIncident(text);
+      } else if (block.id === 'problem') {
+        setProblem(text);
+      } else if (block.id === 'conflict') {
+        setConflict(text);
+      } else if (block.id === 'stakes') {
+        setStakes(text);
+      } else if (block.id === 'characterArc') {
+        setCharacterArc(text);
+      }
+    }
   };
 
   const handleThemeTagChange = (value: string[]) => {
@@ -117,7 +147,9 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
       });
       return;
     }
+    setIsPauseWorkFlow(true);
     setAddThemeTag(value);
+    setCategories(value);
   };
 
   const handleEditBlock = (block: ScriptBlock) => {
@@ -248,7 +280,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
   return (
     <div className="flex h-full overflow-hidden pt-2">
       <div className="flex-1 overflow-y-auto pr-4">
-        {data.blocks.map(renderBlock)}
+        {data.map(renderBlock)}
       </div>
       <div className="flex-shrink-0 flex flex-col overflow-y-auto relative">
         {/* 翻译功能 待开发 */}
@@ -275,9 +307,9 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
         <div className="p-2 rounded-lg">
           <h3 className="text-lg font-semibold mb-1 text-blue-500 flex items-center gap-1">
             <Navigation className="w-4 h-4 transition-colors" />
-            导航
+            navigation
           </h3>
-          {data.blocks.map((block) => (
+          {data.map((block) => (
             <motion.div
               key={block.id}
               className={`py-1 px-1 my-1 rounded cursor-pointer transition-all duration-300 text-white/80