更新工作流组件,新增回退到指定步骤的功能,并优化暂停/播放按钮的显示逻辑。同时,编辑模态框中集成了回退功能,确保在不同选项下能够正确应用剧本。更新了相关接口的导入,提升了代码的可读性和功能性。

This commit is contained in:
北枳 2025-08-10 20:39:23 +08:00
parent 99ea9a2c0a
commit c12b77a74e
4 changed files with 35 additions and 12 deletions

View File

@ -46,7 +46,8 @@ export default function WorkFlow() {
mode,
setIsPauseWorkFlow,
setAnyAttribute,
applyScript
applyScript,
fallbackToStep
} = useWorkflowData();
const {
@ -225,8 +226,8 @@ export default function WorkFlow() {
{/* 暂停/播放按钮 */}
{
currentStep !== '6' && (
<div className="absolute right-12 bottom-16 z-[9999] flex gap-4">
(currentStep !== '6' && currentStep !== '0') && (
<div className="absolute right-12 bottom-16 z-[49] flex gap-4">
<GlassIconButton
icon={isPauseWorkFlow ? Play : Pause}
size='lg'
@ -273,6 +274,8 @@ export default function WorkFlow() {
setIsPauseWorkFlow={setIsPauseWorkFlow}
setAnyAttribute={setAnyAttribute}
isPauseWorkFlow={isPauseWorkFlow}
applyScript={applyScript}
fallbackToStep={fallbackToStep}
/>
</ErrorBoundary>
</div>

View File

@ -2,7 +2,7 @@
import { useState, useEffect, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData } from '@/api/video_flow';
import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData, pauseMovieProjectPlan, resumeMovieProjectPlan } from '@/api/video_flow';
import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
import { setSketchCount, setVideoCount } from '@/lib/store/workflowSlice';
import { useScriptService } from "@/app/service/Interaction/ScriptService";
@ -96,7 +96,7 @@ export function useWorkflowData() {
console.log('开始初始化剧本', originalText);
originalText && initializeFromProject(episodeId, originalText).then(() => {
console.log('应用剧本');
// 默认模式下 应用剧本
// 自动模式下 应用剧本;手动模式 需要点击 下一步 触发
mode.includes('auto') && applyScript();
});
}, [originalText]);
@ -110,7 +110,11 @@ export function useWorkflowData() {
}, [scriptBlocksMemo]);
// 监听继续 请求更新数据
useEffect(() => {
if (isPauseWorkFlow) {
pauseMovieProjectPlan({ project_id: episodeId });
} else {
resumeMovieProjectPlan({ project_id: episodeId });
}
}, [isPauseWorkFlow]);
// 自动开始播放一轮
@ -568,6 +572,12 @@ export function useWorkflowData() {
}
};
// 回退到 指定状态 重新获取数据
const fallbackToStep = (step: string) => {
setCurrentStep(step);
setNeedStreamData(true);
}
// 重试加载数据
const retryLoadData = () => {
setDataLoadError(null);
@ -617,6 +627,7 @@ export function useWorkflowData() {
mode,
setIsPauseWorkFlow,
setAnyAttribute,
applyScript
applyScript,
fallbackToStep
};
}

View File

@ -29,6 +29,7 @@ interface EditModalProps {
isPauseWorkFlow: boolean;
scriptData: any[] | null;
applyScript: any;
fallbackToStep: any;
}
const tabs = [
@ -57,7 +58,8 @@ export function EditModal({
setAnyAttribute,
isPauseWorkFlow,
scriptData,
applyScript
applyScript,
fallbackToStep
}: EditModalProps) {
const [activeTab, setActiveTab] = useState(activeEditTab);
const [currentIndex, setCurrentIndex] = useState(currentSketchIndex);
@ -104,6 +106,13 @@ export function EditModal({
const handleConfirmGotoFallback = () => {
console.log('handleConfirmGotoFallback');
if (activeTab === '0') {
fallbackToStep('0');
// 应用剧本
applyScript();
} else {
fallbackToStep('1');
}
}
const handleCloseRemindFallbackPanel = () => {
setIsRemindFallbackOpen(false);
@ -295,7 +304,7 @@ export function EditModal({
<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>
<p className="text-lg font-medium">The task will be regenerated and edited. Do you want to continue?</p>
</div>
<div className="flex gap-3 mt-2">
@ -305,7 +314,7 @@ export function EditModal({
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" />
Continue
</button>
<button
@ -314,7 +323,7 @@ export function EditModal({
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>

View File

@ -236,7 +236,7 @@ export function ShotTabContent({
>
<div className="flex items-center gap-2">
<span className="text-sm whitespace-nowrap flex items-center gap-1">
<span className='text-white/50'>Segment {index + 1}</span>
<span>Segment {index + 1}</span>
{shot.status === 0 && (
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
)}