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

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

@@ -103,7 +103,6 @@ export function useWorkflowData() {
   } = useScriptService();
   // 初始化剧本
   useUpdateEffect(() => {
-    if (currentStep !== '0') {
     console.log('开始初始化剧本', originalText,episodeId);
     // TODO 为什么一开始没项目id
     originalText && initializeFromProject(episodeId, originalText).then(() => {
@@ -111,7 +110,6 @@ export function useWorkflowData() {
       // 自动模式下 应用剧本；手动模式 需要点击 下一步 触发
       mode.includes('auto') && applyScript();
     });
-    }
   }, [originalText], {mode: 'none'});
   // 监听剧本加载完毕
   useEffect(() => {

components/ui/edit-modal.tsx

@@ -101,7 +101,7 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
     if (activeTab === '0') {
       const scriptTabContent = scriptTabContentRef.current;
       if (scriptTabContent) {
-        return scriptTabContent.checkUpdate();
+        return scriptTabContent.switchBefore(tabId);
       }
     } else if (activeTab === '1') {
       const characterTabContent = characterTabContentRef.current;
@@ -183,6 +183,8 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
             setIsPauseWorkFlow={setIsPauseWorkFlow}
             isPauseWorkFlow={isPauseWorkFlow}
             originalText={originalText}
+            onApply={handleApply}
+            setActiveTab={setActiveTab}
           />
         );
       case '1':

components/ui/person-detection.tsx

@@ -41,6 +41,7 @@ export type PersonDetection = {
 };
 
 type Props = {
+  scanState: 'idle' | 'scanning' | 'detected' | 'failed' | 'timeout';
   backgroundImage?: string;
   videoSrc?: string;
   detections: PersonDetection[];
@@ -56,6 +57,7 @@ type Props = {
 };
 
 export const PersonDetectionScene: React.FC<Props> = ({
+  scanState,
   backgroundImage,
   videoSrc,
   detections,
@@ -201,6 +203,8 @@ export const PersonDetectionScene: React.FC<Props> = ({
         />
       )}
 
+      {scanState !== 'idle' && (
+        <>
           {/* 暗化层 */}
           <AnimatePresence>
             {isShowScan && (
@@ -285,7 +289,7 @@ export const PersonDetectionScene: React.FC<Props> = ({
 
           {/* 扫描动画效果 */}
           <AnimatePresence>
-        {isShowScan && (
+            {isShowScan && scanState === 'scanning' && (
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -405,6 +409,8 @@ export const PersonDetectionScene: React.FC<Props> = ({
               );
             })}
           </AnimatePresence>
+        </>
+      )}
     </div>
   );
 };

components/ui/script-tab-content.tsx

@@ -1,24 +1,29 @@
 import React, { useState, useCallback, useEffect, SetStateAction, forwardRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { FileText } from 'lucide-react';
+import { FileText, Undo2, X, TriangleAlert } from 'lucide-react';
 import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
 import { useEditData } from '@/components/pages/work-flow/use-edit-data';
+import FloatingGlassPanel from './FloatingGlassPanel';
 
 
 interface ScriptTabContentProps {
   setIsPauseWorkFlow: (isPauseWorkFlow: boolean) => void;
   isPauseWorkFlow: boolean;
   originalText?: string;
+  onApply: () => void;
+  setActiveTab: (tabId: string) => void;
 }
 
 export const ScriptTabContent = forwardRef<
-  { checkUpdate: () => boolean },
+  { switchBefore: (tabId: string) => boolean },
   ScriptTabContentProps
 >((props, ref) => {
-  const { setIsPauseWorkFlow, isPauseWorkFlow, originalText } = props;
+  const { setIsPauseWorkFlow, isPauseWorkFlow, originalText, onApply, setActiveTab } = props;
   const { loading, scriptData, setAnyAttribute, applyScript } = useEditData('script', originalText);
 
   const [isUpdate, setIsUpdate] = useState(false);
+  const [isRemindApplyUpdate, setIsRemindApplyUpdate] = useState(false);
+  const [nextToTabId, setNextToTabId] = useState<string>('');
 
   useEffect(() => {
     console.log('contentEditableRef---scriptTabContentIsChange', isUpdate);
@@ -26,9 +31,24 @@ export const ScriptTabContent = forwardRef<
 
   // 暴露方法给父组件
   React.useImperativeHandle(ref, () => ({
-    checkUpdate: () => isUpdate
+    switchBefore: (tabId: string) => {
+      setNextToTabId(tabId);
+      console.log('switchBefore', isUpdate);
+      if (isUpdate) {
+        setIsRemindApplyUpdate(true);
+      }
+      return isUpdate;
+    },
   }));
 
+  const handleApply = () => {
+    onApply();
+  }
+  const handleCancel = () => {
+    setIsRemindApplyUpdate(false);
+    setActiveTab(nextToTabId);
+  }
+
   // 如果loading 显示loading状态
   if (loading) {
     return (
@@ -66,6 +86,39 @@ export const ScriptTabContent = forwardRef<
           setIsUpdate={setIsUpdate}
         />
       </motion.div>
+
+      <FloatingGlassPanel
+        open={isRemindApplyUpdate}
+        width='500px'
+        clickMaskClose={false}
+      >
+        <div className="flex flex-col items-center gap-4 text-white py-4">
+          <div className="flex items-center gap-3">
+            <TriangleAlert className="w-6 h-6 text-yellow-400" />
+            <p className="text-lg font-medium">剧本内容已修改，是否需要应用？</p>
+          </div>
+
+          <div className="flex gap-3 mt-2">
+            <button
+              onClick={() => handleApply()}
+              data-alt="confirm-replace-button"
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition-colors duration-200 flex items-center gap-2"
+            >
+              <Undo2 className="w-4 h-4" />
+              Apply
+            </button>
+
+            <button
+              onClick={() => handleCancel()}
+              data-alt="ignore-button"
+              className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-md transition-colors duration-200 flex items-center gap-2"
+            >
+              <X className="w-4 h-4" />
+              Cancel
+            </button>
+          </div>
+        </div>
+      </FloatingGlassPanel>
     </div>
   );
 });

components/ui/shot-tab-content.tsx

@@ -329,6 +329,7 @@ export function ShotTabContent({
                   <PersonDetectionScene
                     videoSrc={shotData[selectedIndex]?.videoUrl[0]}
                     detections={detections}
+                    scanState={scanState}
                     triggerScan={scanState === 'scanning'}
                     triggerSuccess={scanState === 'detected'}
                     onScanTimeout={handleScanTimeout}