forked from 77media/video-flow
Task completed
This commit is contained in:
北枳
parent
d602dc49b6
commit
731695e833
@ -248,169 +248,173 @@ export function TaskInfo({
|
|||||||
currentLoadingText={currentLoadingText}
|
currentLoadingText={currentLoadingText}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{currentLoadingText.includes('failed') ? (
|
{
|
||||||
<motion.div className='flex items-center gap-2 justify-center'>
|
currentLoadingText !== 'Task completed' && (
|
||||||
<CircleAlert className="w-4 h-4 text-red-500/80" />
|
currentLoadingText.includes('failed') ? (
|
||||||
<span className="normalS400 subtitle-had8uE text-transparent bg-clip-text">{currentLoadingText}</span>
|
<motion.div className='flex items-center gap-2 justify-center'>
|
||||||
</motion.div>
|
<CircleAlert className="w-4 h-4 text-red-500/80" />
|
||||||
) : (
|
<span className="normalS400 subtitle-had8uE text-transparent bg-clip-text">{currentLoadingText}</span>
|
||||||
<motion.div
|
</motion.div>
|
||||||
className="flex items-center gap-2 justify-center"
|
) : (
|
||||||
initial={{ opacity: 0, y: -10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
|
||||||
>
|
|
||||||
{/* <motion.div
|
|
||||||
className="w-1.5 h-1.5 rounded-full"
|
|
||||||
style={{ backgroundColor: stageColor }}
|
|
||||||
animate={!isPauseWorkFlow ? {
|
|
||||||
scale: [1, 1.5, 1],
|
|
||||||
opacity: [1, 0.5, 1],
|
|
||||||
transition: {
|
|
||||||
duration: 1,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatDelay: 0.2
|
|
||||||
}
|
|
||||||
} : {}}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* 阶段图标 */}
|
|
||||||
<motion.div
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
key={currentLoadingText}
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0.5, x: 10 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
|
||||||
onMouseEnter={() => setIsStageIconsExpanded(true)}
|
|
||||||
onMouseLeave={() => setIsStageIconsExpanded(false)}
|
|
||||||
>
|
|
||||||
<StageIcons currentStage={currentStage} isExpanded={isStageIconsExpanded} isPauseWorkFlow={isPauseWorkFlow} setIsPauseWorkFlow={setIsPauseWorkFlow}/>
|
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
className="relative"
|
className="flex items-center gap-2 justify-center"
|
||||||
initial={{ opacity: 0, x: -10 }}
|
initial={{ opacity: 0, y: -10 }}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, x: 10 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.3 }}
|
||||||
>
|
>
|
||||||
{/* 背景发光效果 */}
|
|
||||||
<motion.div
|
|
||||||
className="absolute inset-0 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-purple-400 blur-sm"
|
|
||||||
animate={!isPauseWorkFlow ? {
|
|
||||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
|
|
||||||
transition: {
|
|
||||||
duration: 2,
|
|
||||||
repeat: Infinity,
|
|
||||||
ease: "linear"
|
|
||||||
}
|
|
||||||
}: {}}
|
|
||||||
style={{
|
|
||||||
backgroundSize: "200% 200%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="normalS400 subtitle-had8uE">{isPauseWorkFlow ? 'workflow paused' : currentLoadingText}</span>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* 主文字 - 颜色填充动画 */}
|
|
||||||
<motion.div
|
|
||||||
className="relative z-10 cursor-pointer"
|
|
||||||
animate={!isPauseWorkFlow ? {
|
|
||||||
scale: [1, 1.02, 1],
|
|
||||||
transition: {
|
|
||||||
duration: 1.5,
|
|
||||||
repeat: Infinity,
|
|
||||||
ease: "easeInOut"
|
|
||||||
}
|
|
||||||
}: {}}
|
|
||||||
onClick={() => setIsScriptModalOpen(true)}
|
|
||||||
>
|
|
||||||
<motion.span
|
|
||||||
className="normalS400 subtitle-had8uE text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-cyan-500 to-purple-600"
|
|
||||||
animate={!isPauseWorkFlow ? {
|
|
||||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
|
|
||||||
transition: {
|
|
||||||
duration: 3,
|
|
||||||
repeat: Infinity,
|
|
||||||
ease: "linear"
|
|
||||||
}
|
|
||||||
}: {}}
|
|
||||||
style={{
|
|
||||||
backgroundSize: "300% 300%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{currentLoadingText}
|
|
||||||
</motion.span>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* 动态光点效果 */}
|
|
||||||
{/* <motion.div
|
{/* <motion.div
|
||||||
className="absolute left-0 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full blur-sm"
|
className="w-1.5 h-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: stageColor }}
|
||||||
animate={!isPauseWorkFlow ? {
|
animate={!isPauseWorkFlow ? {
|
||||||
x: [0, 200, 0],
|
scale: [1, 1.5, 1],
|
||||||
opacity: [0, 1, 0],
|
opacity: [1, 0.5, 1],
|
||||||
scale: [0.5, 1, 0.5],
|
|
||||||
transition: {
|
transition: {
|
||||||
duration: 2.5,
|
duration: 1,
|
||||||
repeat: Infinity,
|
repeat: Infinity,
|
||||||
ease: "easeInOut",
|
repeatDelay: 0.2
|
||||||
}
|
}
|
||||||
}: {}}
|
} : {}}
|
||||||
/> */}
|
/> */}
|
||||||
|
|
||||||
{/* 文字底部装饰线 */}
|
{/* 阶段图标 */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="absolute bottom-0 left-0 h-0.5"
|
className="flex items-center gap-2"
|
||||||
style={{
|
key={currentLoadingText}
|
||||||
background: `linear-gradient(to right, ${stageColor}, rgb(34 211 238), rgb(168 85 247))`,
|
initial={{ opacity: 0, x: -10 }}
|
||||||
}}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0.5, x: 10 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
onMouseEnter={() => setIsStageIconsExpanded(true)}
|
||||||
|
onMouseLeave={() => setIsStageIconsExpanded(false)}
|
||||||
|
>
|
||||||
|
<StageIcons currentStage={currentStage} isExpanded={isStageIconsExpanded} isPauseWorkFlow={isPauseWorkFlow} setIsPauseWorkFlow={setIsPauseWorkFlow}/>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="relative"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 10 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
{/* 背景发光效果 */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-purple-400 blur-sm"
|
||||||
|
animate={!isPauseWorkFlow ? {
|
||||||
|
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
|
||||||
|
transition: {
|
||||||
|
duration: 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "linear"
|
||||||
|
}
|
||||||
|
}: {}}
|
||||||
|
style={{
|
||||||
|
backgroundSize: "200% 200%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="normalS400 subtitle-had8uE">{isPauseWorkFlow ? 'workflow paused' : currentLoadingText}</span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 主文字 - 颜色填充动画 */}
|
||||||
|
<motion.div
|
||||||
|
className="relative z-10 cursor-pointer"
|
||||||
|
animate={!isPauseWorkFlow ? {
|
||||||
|
scale: [1, 1.02, 1],
|
||||||
|
transition: {
|
||||||
|
duration: 1.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut"
|
||||||
|
}
|
||||||
|
}: {}}
|
||||||
|
onClick={() => setIsScriptModalOpen(true)}
|
||||||
|
>
|
||||||
|
<motion.span
|
||||||
|
className="normalS400 subtitle-had8uE text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-cyan-500 to-purple-600"
|
||||||
|
animate={!isPauseWorkFlow ? {
|
||||||
|
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
|
||||||
|
transition: {
|
||||||
|
duration: 3,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "linear"
|
||||||
|
}
|
||||||
|
}: {}}
|
||||||
|
style={{
|
||||||
|
backgroundSize: "300% 300%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{currentLoadingText}
|
||||||
|
</motion.span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* 动态光点效果 */}
|
||||||
|
{/* <motion.div
|
||||||
|
className="absolute left-0 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full blur-sm"
|
||||||
|
animate={!isPauseWorkFlow ? {
|
||||||
|
x: [0, 200, 0],
|
||||||
|
opacity: [0, 1, 0],
|
||||||
|
scale: [0.5, 1, 0.5],
|
||||||
|
transition: {
|
||||||
|
duration: 2.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}
|
||||||
|
}: {}}
|
||||||
|
/> */}
|
||||||
|
|
||||||
|
{/* 文字底部装饰线 */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-0 left-0 h-0.5"
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(to right, ${stageColor}, rgb(34 211 238), rgb(168 85 247))`,
|
||||||
|
}}
|
||||||
|
animate={!isPauseWorkFlow ? {
|
||||||
|
width: ["0%", "100%", "0%"],
|
||||||
|
transition: {
|
||||||
|
width: { duration: 2, repeat: Infinity, ease: "easeInOut" }
|
||||||
|
}
|
||||||
|
} : {}}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* <motion.div
|
||||||
|
className="w-1.5 h-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: stageColor }}
|
||||||
animate={!isPauseWorkFlow ? {
|
animate={!isPauseWorkFlow ? {
|
||||||
width: ["0%", "100%", "0%"],
|
scale: [1, 1.5, 1],
|
||||||
|
opacity: [1, 0.5, 1],
|
||||||
transition: {
|
transition: {
|
||||||
width: { duration: 2, repeat: Infinity, ease: "easeInOut" }
|
duration: 1,
|
||||||
|
repeat: Infinity,
|
||||||
|
repeatDelay: 0.2,
|
||||||
|
delay: 0.3
|
||||||
}
|
}
|
||||||
} : {}}
|
} : {}}
|
||||||
/>
|
/>
|
||||||
|
<motion.div
|
||||||
|
className="w-1.5 h-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: stageColor }}
|
||||||
|
animate={!isPauseWorkFlow ? {
|
||||||
|
scale: [1, 1.5, 1],
|
||||||
|
opacity: [1, 0.5, 1],
|
||||||
|
transition: {
|
||||||
|
duration: 1,
|
||||||
|
repeat: Infinity,
|
||||||
|
repeatDelay: 0.2,
|
||||||
|
delay: 0.3
|
||||||
|
}
|
||||||
|
} : {}}
|
||||||
|
/> */}
|
||||||
|
|
||||||
|
{/* // 跳转剪辑按钮
|
||||||
|
{showGotoCutButton && (
|
||||||
|
<Tooltip placement="top" title='AI-powered editing platform'>
|
||||||
|
<GlassIconButton icon={Scissors} size='sm' onClick={onGotoCut} />
|
||||||
|
</Tooltip>
|
||||||
|
)} */}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
)
|
||||||
|
)
|
||||||
{/* <motion.div
|
}
|
||||||
className="w-1.5 h-1.5 rounded-full"
|
|
||||||
style={{ backgroundColor: stageColor }}
|
|
||||||
animate={!isPauseWorkFlow ? {
|
|
||||||
scale: [1, 1.5, 1],
|
|
||||||
opacity: [1, 0.5, 1],
|
|
||||||
transition: {
|
|
||||||
duration: 1,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatDelay: 0.2,
|
|
||||||
delay: 0.3
|
|
||||||
}
|
|
||||||
} : {}}
|
|
||||||
/>
|
|
||||||
<motion.div
|
|
||||||
className="w-1.5 h-1.5 rounded-full"
|
|
||||||
style={{ backgroundColor: stageColor }}
|
|
||||||
animate={!isPauseWorkFlow ? {
|
|
||||||
scale: [1, 1.5, 1],
|
|
||||||
opacity: [1, 0.5, 1],
|
|
||||||
transition: {
|
|
||||||
duration: 1,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatDelay: 0.2,
|
|
||||||
delay: 0.3
|
|
||||||
}
|
|
||||||
} : {}}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* // 跳转剪辑按钮
|
|
||||||
{showGotoCutButton && (
|
|
||||||
<Tooltip placement="top" title='AI-powered editing platform'>
|
|
||||||
<GlassIconButton icon={Scissors} size='sm' onClick={onGotoCut} />
|
|
||||||
</Tooltip>
|
|
||||||
)} */}
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user