修复 分镜描述，重新生成视频，给接口传递描述文字 还是 旧数据

app/service/adapter/textToShot.ts

@@ -257,14 +257,16 @@ export class TextToShotAdapter {
     if (shotData.shotDescContent.length > 0) {
       // 合并所有描述段落的文本内容
       shotData.shotDescContent.forEach(paragraph => {
-        paragraph.content.forEach(node => {
-          if (node.type === 'text') {
-            currentScript += node.text;
-          }
-          if (node.type === 'characterToken') {
-            currentScript += node.attrs.name;
-          }
-        });
+        if (paragraph.content) {
+          paragraph.content.forEach(node => {
+            if (node.type === 'text') {
+              currentScript += node.text;
+            }
+            if (node.type === 'characterToken') {
+              currentScript += node.attrs.name;
+            }
+          });
+        }
       });
     }
 

components/ui/shot-editor/ShotsEditor.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
+import { useDeepCompareEffect } from "@/hooks/useDeepCompareEffect";
 import { Plus, X, UserRoundPlus, MessageCirclePlus, MessageCircleMore, ClipboardType } from "lucide-react";
 import ShotEditor from "./ShotEditor";
 import { toast } from "sonner";
@@ -51,16 +52,16 @@ export const ShotsEditor = forwardRef<any, ShotsEditorProps>(function ShotsEdito
   const descEditorRef = useRef<any>(null);
   const dialogEditorRef = useRef<any>(null);
 
-  useEffect(() => {
-    console.log('-==========shotInfo===========-', shotInfo);
+  useDeepCompareEffect(() => {
     if (shotInfo) {
+      console.log('-==========shotInfo===========-', shotInfo);
       const shots = shotInfo.map((shot) => {
         return TextToShotAdapter.fromLensType(shot, roles);
       });
       console.log('-==========shots===========-', shots);
       setShots(shots as Shot[]);
     }
-  }, [shotInfo]);
+  }, [shotInfo, roles]);
 
   const handleDescContentChange = (content: any) => {
     const shot = shots[currentShotIndex];

components/ui/shot-tab-content.tsx

@@ -47,11 +47,19 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
   const [isLoadingShots, setIsLoadingShots] = useState(false);
   const shotsEditorRef = useRef<any>(null);
   const [isRegenerate, setIsRegenerate] = useState(false);
+  const [pendingRegeneration, setPendingRegeneration] = useState(false);
 
   useEffect(() => {
     console.log('shotTabContent-----roles', roles);
   }, [roles]);
 
+  useEffect(() => {
+    if (pendingRegeneration) {
+      regenerateVideoSegment();
+      setPendingRegeneration(false);
+    }
+  }, [shotData[selectedIndex]?.lens]);
+
   // 监听当前选中index变化
   useEffect(() => {
     console.log('shotTabContent-----shotData', shotData);
@@ -165,13 +173,12 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
     console.log('regenerate');
     setIsRegenerate(true);
     const shotInfo = shotsEditorRef.current.getShotInfo();
-    console.log('shotTabContent-----shotInfo', shotInfo);
+    console.log('shotInfo', shotInfo);
     setSelectedSegment({
       ...shotData[selectedIndex],
       lens: shotInfo
     });
-    await regenerateVideoSegment();
-    setIsRegenerate(false);
+    setPendingRegeneration(true);
   };
 
   // 新增分镜
@@ -408,7 +415,7 @@ export const ShotTabContent = (props: ShotTabContentProps) => {
               <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"
+                  text-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                   disabled={isRegenerate}

hooks/useDeepCompareEffect.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+function useDeepCompareMemoize<T>(value: T) {
+  const ref = useRef<T>();
+  
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  
+  return ref.current;
+}
+
+export function useDeepCompareEffect(
+  callback: () => void | (() => void),
+  dependencies: any[]
+) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}