'use client';
import React from 'react';
import { motion } from 'framer-motion';
import { Skeleton } from '@/components/ui/skeleton';
import {
Image,
Video,
CheckCircle,
Music,
Loader2,
User,
Scissors,
Tv
} from 'lucide-react';
interface TaskInfoProps {
isLoading: boolean;
taskObject: any;
currentLoadingText: string;
}
// 根据加载文本返回对应的图标
const getStageIcon = (loadingText: string) => {
const text = loadingText.toLowerCase();
if (text.includes('sketch')) {
return Image;
} else if (text.includes('video')) {
return Video;
} else if (text.includes('character')) {
return User;
} else if (text.includes('audio')) {
return Music;
} else if (text.includes('post')) {
return Scissors;
} else if (text.includes('final')) {
return Tv;
} else if (text.includes('complete')) {
return CheckCircle;
} else {
return Loader2;
}
};
export function TaskInfo({ isLoading, taskObject, currentLoadingText }: TaskInfoProps) {
const StageIcon = getStageIcon(currentLoadingText);
if (isLoading) {
return (
<>
);
}
return (
<>
{taskObject?.projectName}：{taskObject?.taskName}
{currentLoadingText === 'Task completed' ? (
{currentLoadingText}
) : (
{/* 阶段图标 */}
{/* 背景发光效果 */}
{currentLoadingText}
{/* 主文字 - 颜色填充动画 */}
{currentLoadingText}
{/* 动态光点效果 */}
{/* 文字底部装饰线 */}
)}
);
}