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.includes('failed') ? (
|
||||
<motion.div className='flex items-center gap-2 justify-center'>
|
||||
<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
|
||||
className="relative"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
{
|
||||
currentLoadingText !== 'Task completed' && (
|
||||
currentLoadingText.includes('failed') ? (
|
||||
<motion.div className='flex items-center gap-2 justify-center'>
|
||||
<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="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"
|
||||
className="w-1.5 h-1.5 rounded-full"
|
||||
style={{ backgroundColor: stageColor }}
|
||||
animate={!isPauseWorkFlow ? {
|
||||
x: [0, 200, 0],
|
||||
opacity: [0, 1, 0],
|
||||
scale: [0.5, 1, 0.5],
|
||||
scale: [1, 1.5, 1],
|
||||
opacity: [1, 0.5, 1],
|
||||
transition: {
|
||||
duration: 2.5,
|
||||
duration: 1,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
repeatDelay: 0.2
|
||||
}
|
||||
}: {}}
|
||||
} : {}}
|
||||
/> */}
|
||||
|
||||
{/* 文字底部装饰线 */}
|
||||
|
||||
{/* 阶段图标 */}
|
||||
<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%"],
|
||||
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
|
||||
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 ? {
|
||||
scale: [1, 1.5, 1],
|
||||
opacity: [1, 0.5, 1],
|
||||
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
|
||||
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