diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx index 027074a..bbae7e2 100644 --- a/components/pages/work-flow.tsx +++ b/components/pages/work-flow.tsx @@ -33,6 +33,7 @@ const WorkFlow = React.memo(function WorkFlow() { const [aiEditingInProgress, setAiEditingInProgress] = React.useState(false); const [isHovered, setIsHovered] = React.useState(false); const [aiEditingResult, setAiEditingResult] = React.useState(null); + const aiEditingButtonRef = useRef<{ handleAIEditing: () => Promise }>(null); const searchParams = useSearchParams(); const episodeId = searchParams.get('episodeId') || ''; @@ -41,6 +42,12 @@ const WorkFlow = React.memo(function WorkFlow() { SaveEditUseCase.setProjectId(episodeId); // 使用自定义 hooks 管理状态 + // 处理编辑计划生成完成的回调 + const handleEditPlanGenerated = useCallback(() => { + console.log('✨ 编辑计划生成完成,开始AI剪辑'); + aiEditingButtonRef.current?.handleAIEditing(); + }, []); + const { taskObject, scriptData, @@ -60,7 +67,9 @@ const WorkFlow = React.memo(function WorkFlow() { showGotoCutButton, generateEditPlan, handleRetryVideo - } = useWorkflowData(); + } = useWorkflowData({ + onEditPlanGenerated: handleEditPlanGenerated + }); const { isVideoPlaying, @@ -209,6 +218,7 @@ const WorkFlow = React.memo(function WorkFlow() {
void; + stopAIEditing: () => void; +} + interface AIEditingIframeProps { /** 项目ID */ projectId: string; @@ -62,17 +68,18 @@ interface ProgressState { * AI剪辑iframe组件 * 提供无缝集成的智能剪辑功能,避免页面跳转 */ -export const AIEditingIframe: React.FC = ({ - projectId, - token, - userId, - onComplete, - onError, - onProgress, - buttonMode = false, - size = 'md', - autoStart = false -}) => { +export const AIEditingIframe = React.forwardRef((props, ref) => { + const { + projectId, + token, + userId, + onComplete, + onError, + onProgress, + buttonMode = false, + size = 'md', + autoStart = false + } = props; const [isVisible, setIsVisible] = useState(false); const [isMinimized, setIsMinimized] = useState(false); const [hideIframe, setHideIframe] = useState(true); // 默认隐藏iframe @@ -84,6 +91,7 @@ export const AIEditingIframe: React.FC = ({ const [isProcessing, setIsProcessing] = useState(false); const iframeRef = useRef(null); const progressIntervalRef = useRef(null); + const timeoutRef = useRef(null); // 构建智能剪辑URL const aiEditingUrl = `https://smartcut.movieflow.ai/ai-editor/${projectId}?token=${token}&user_id=${userId}&auto=true&embedded=true`; @@ -327,7 +335,7 @@ export const AIEditingIframe: React.FC = ({ }, [autoStart, isProcessing, progressState.stage, startAIEditing]); // 按钮模式渲染 - if (buttonMode) { + const renderButtonMode = () => { return (
{/* 主按钮 */} @@ -335,7 +343,7 @@ export const AIEditingIframe: React.FC = ({ onClick={startAIEditing} disabled={isProcessing} className={` - relative flex items-center gap-2 px-4 py-2 rounded-lg + fixed -top-[999999px] -left-[999999px] flex items-center gap-2 px-4 py-2 rounded-lg backdrop-blur-lg bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 shadow-xl text-white font-medium text-sm @@ -420,7 +428,8 @@ export const AIEditingIframe: React.FC = ({ } // 直接iframe模式渲染 - return ( + const renderIframeMode = () => { + return (