feat: 添加AI剪辑功能到工作流页面

- 新增AIEditingIconButton组件引用
- 添加AI剪辑进度状态管理
- 实现AI剪辑完成和错误处理回调
- 在视频阶段显示AI剪辑按钮
This commit is contained in:
qikongjian 2025-08-31 01:42:40 +08:00
parent e2d16d0f10
commit 6555eb35a6

View File

@ -16,6 +16,7 @@ import { SaveEditUseCase } from "@/app/service/usecase/SaveEditUseCase";
import { useSearchParams } from "next/navigation";
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
import { Drawer } from 'antd';
import { AIEditingIconButton } from './work-flow/ai-editing-button';
const WorkFlow = React.memo(function WorkFlow() {
useEffect(() => {
@ -29,6 +30,7 @@ const WorkFlow = React.memo(function WorkFlow() {
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
const [aiEditingInProgress, setAiEditingInProgress] = React.useState(false);
const searchParams = useSearchParams();
const episodeId = searchParams.get('episodeId') || '';
@ -78,6 +80,28 @@ const WorkFlow = React.memo(function WorkFlow() {
setIsEditModalOpen(true);
}, []);
// AI剪辑回调函数
const handleAIEditingComplete = useCallback((finalVideoUrl: string) => {
console.log('🎉 AI剪辑完成最终视频URL:', finalVideoUrl);
// 更新任务对象的最终视频状态
setAnyAttribute('final', {
url: finalVideoUrl,
note: 'ai_edited'
});
// 切换到最终视频阶段
setAnyAttribute('currentStage', 'final_video');
setAiEditingInProgress(false);
}, [setAnyAttribute]);
const handleAIEditingError = useCallback((error: string) => {
console.error('❌ AI剪辑失败:', error);
// 这里可以显示错误提示
setAiEditingInProgress(false);
}, []);
return (
<ErrorBoundary>
<div className="w-full overflow-hidden h-[calc(100vh-5rem)] absolute top-[4rem] left-0 right-0 px-[1rem]">
@ -194,6 +218,22 @@ const WorkFlow = React.memo(function WorkFlow() {
)
}
{/* AI剪辑按钮 - 当有视频片段时显示 */}
{
(taskObject.currentStage === 'video' && taskObject.videos.data.length > 0) && (
<div className="absolute right-12 bottom-48 z-[49] flex gap-4">
<AIEditingIconButton
projectId={episodeId}
taskObject={taskObject}
size="md"
disabled={aiEditingInProgress || isPauseWorkFlow}
onComplete={handleAIEditingComplete}
onError={handleAIEditingError}
/>
</div>
)
}
{/* 智能对话按钮 */}
<div className="absolute right-12 bottom-32 z-[49] flex gap-4">
<GlassIconButton