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

app/service/Interaction/ScriptService.ts

@@ -53,7 +53,7 @@ export interface UseScriptService {
   /** 根据项目ID初始化已有剧本 */
   initializeFromProject: (projectId: string, script: string) => Promise<void>;
   /** 修改剧本 */
-  updateScript: (scriptText: string) => Promise<void>;
+  updateScript: () => Promise<void>;
   /** 应用剧本到视频生成流程 */
   applyScript: () => Promise<void>;
   /** 中断视频任务 */
@@ -105,6 +105,8 @@ export interface UseScriptService {
     resolution: string,
     language: string
   ) => Promise<void>;
+  /** 设置任何属性 */
+  setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
 }
 
 /**
@@ -113,6 +115,7 @@ export interface UseScriptService {
  * 包括剧本生成、项目创建、剧本保存等功能
  */
 export const useScriptService = (): UseScriptService => {
+  console.log('useScriptService----9((@@@@@@@@@@@@@@@@@@');
   // 响应式状态
   const [loading, setLoading] = useState<boolean>(false);
   const [synopsis, setSynopsis] = useState<string>("");
@@ -406,6 +409,30 @@ export const useScriptService = (): UseScriptService => {
     [characterArc, scriptEditUseCase]
   );
 
+  const setAnyAttributeWrapper = useCallback(
+    (type: string, value: SetStateAction<string>, tags?: string[]) => {
+      console.log('setAnyAttributeWrapper', type);
+      if (type === 'synopsis') {
+        setSynopsisWrapper(value);
+      } else if (type === 'categories') {
+        setCategoriesWrapper(tags || []);
+      } else if (type === 'protagonist') {
+        setProtagonistWrapper(value);
+      } else if (type === 'incitingIncident') {
+        setIncitingIncidentWrapper(value);
+      } else if (type === 'problem') {
+        setProblemWrapper(value);
+      } else if (type === 'conflict') {
+        setConflictWrapper(value);
+      } else if (type === 'stakes') {
+        setStakesWrapper(value);
+      } else if (type === 'characterArc') {
+        setCharacterArcWrapper(value);
+      }
+    },
+    [scriptEditUseCase]
+  );
+
   /**
    * 聚焦处理函数
    */
@@ -537,5 +564,7 @@ export const useScriptService = (): UseScriptService => {
     setConflict: setConflictWrapper,
     setStakes: setStakesWrapper,
     setCharacterArc: setCharacterArcWrapper,
+    // 封装统一的set函数
+    setAnyAttribute: setAnyAttributeWrapper,
   };
 };

components/pages/work-flow.tsx

@@ -15,6 +15,7 @@ import { motion } from "framer-motion";
 import { GlassIconButton } from '@/components/ui/glass-icon-button';
 
 export default function WorkFlow() {
+  console.log('WorkFlow--0294877777777777')
   const containerRef = useRef<HTMLDivElement>(null);
   const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
   const [activeEditTab, setActiveEditTab] = React.useState('1');
@@ -44,6 +45,7 @@ export default function WorkFlow() {
     isPauseWorkFlow,
     mode,
     setIsPauseWorkFlow,
+    setAnyAttribute
   } = useWorkflowData();
 
   const {
@@ -189,6 +191,8 @@ export default function WorkFlow() {
                           onTogglePlay={togglePlay}
                           final={final}
                           setIsPauseWorkFlow={setIsPauseWorkFlow}
+                          setAnyAttribute={setAnyAttribute}
+                          isPauseWorkFlow={isPauseWorkFlow}
                         />
                       </ErrorBoundary>
                     </div>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, SetStateAction } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Edit3, Play, Pause, Volume2, VolumeX, Maximize, Minimize } from 'lucide-react';
 import { ProgressiveReveal, presets } from '@/components/ui/progressive-reveal';
@@ -26,6 +26,8 @@ interface MediaViewerProps {
   onTogglePlay: () => void;
   final?: any;
   setIsPauseWorkFlow: (isPause: boolean) => void;
+  setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
+  isPauseWorkFlow: boolean;
 }
 
 export function MediaViewer({
@@ -44,7 +46,9 @@ export function MediaViewer({
   onToggleVideoPlay,
   onTogglePlay,
   final,
-  setIsPauseWorkFlow
+  setIsPauseWorkFlow,
+  setAnyAttribute,
+  isPauseWorkFlow
 }: MediaViewerProps) {
   const mainVideoRef = useRef<HTMLVideoElement>(null);
   const finalVideoRef = useRef<HTMLVideoElement>(null);
@@ -808,7 +812,7 @@ export function MediaViewer({
       <div className="relative w-full h-full bg-white/10 rounded-lg overflow-hidden p-2">
         {
           scriptData ? (
-            <ScriptRenderer data={scriptData} setIsPauseWorkFlow={setIsPauseWorkFlow} />
+            <ScriptRenderer data={scriptData} setIsPauseWorkFlow={setIsPauseWorkFlow} setAnyAttribute={setAnyAttribute} isPauseWorkFlow={isPauseWorkFlow} />
           ) : (
             <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/use-workflow-data.tsx

@@ -54,6 +54,8 @@ interface TaskObject {
 }
 
 export function useWorkflowData() {
+  console.log('98877766777777888888990')
+
   const searchParams = useSearchParams();
   const episodeId = searchParams.get('episodeId') || '';
 
@@ -86,6 +88,7 @@ export function useWorkflowData() {
   const {
     scriptBlocksMemo, // 渲染剧本数据
     initializeFromProject,
+    setAnyAttribute
   } = useScriptService();
   // 初始化剧本
   useEffect(() => {
@@ -602,5 +605,6 @@ export function useWorkflowData() {
     isPauseWorkFlow,
     mode,
     setIsPauseWorkFlow,
+    setAnyAttribute
   };
 } 

components/script-renderer/ScriptRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useMemo, useEffect, SetStateAction } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { SquarePen, Lightbulb, Navigation, Globe, Copy, SendHorizontal, X, Plus } from 'lucide-react';
 import { ScriptData, ScriptBlock, ScriptContent, ThemeTagBgColor, ThemeType } from './types';
@@ -6,14 +6,15 @@ 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: any[];
   setIsPauseWorkFlow: (isPause: boolean) => void;
+  setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
+  isPauseWorkFlow: boolean;
 }
 
-export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPauseWorkFlow }) => {
+export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPauseWorkFlow, setAnyAttribute, isPauseWorkFlow }) => {
   const [activeBlockId, setActiveBlockId] = useState<string | null>(null);
   const [hoveredBlockId, setHoveredBlockId] = useState<string | null>(null);
   const contentRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
@@ -22,16 +23,7 @@ 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.find(block => block.id === 'categories');
@@ -119,21 +111,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
     if (contentEditableRef.current) {
       const text = contentEditableRef.current.innerText;
       console.log('contentEditableRef---text', text);
-      if (block.id === 'synopsis') {
+      setAnyAttribute(block.id, text);
-        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);
-      }
     }
   };
 
@@ -149,7 +127,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
     }
     setIsPauseWorkFlow(true);
     setAddThemeTag(value);
-    setCategories(value);
+    setAnyAttribute('categories', '', value);
   };
 
   const handleEditBlock = (block: ScriptBlock) => {

components/ui/script-tab-content.tsx

@@ -5,25 +5,11 @@ import * as Popover from '@radix-ui/react-popover';
 import { mockSceneOptions, mockCharacterOptions } from '@/app/model/enums';
 import { Button } from './button';
 import { Input } from './input';
-import { useScriptService } from '@/app/service/Interaction/ScriptService';
 
 const ScriptTabContent: React.FC = () => {
   // 获取当前项目ID（这里需要根据实际项目路由或上下文获取）
   const projectId = 'current-project-id'; // TODO: 从路由或上下文获取实际项目ID
 
-  const {
-    scriptSlices,
-    userPrompt,
-    loading,
-    error,
-    updateUserPrompt,
-    fetchScriptData,
-    setFocusedSlice,
-    updateScriptSliceText,
-    resetScript,
-    applyScript,
-    fetchProjectScript
-  } = useScriptService();
 
   // 组件挂载时获取项目剧本数据
   useEffect(() => {