'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;
dataLoadError?: string | null;
}
// 根据加载文本返回对应的图标
const getStageIcon = (loadingText: string) => {
const text = loadingText.toLowerCase();
if (text.includes('sketch') || text.includes('草图')) {
return Image;
} else if (text.includes('video') || text.includes('视频')) {
return Video;
} else if (text.includes('character') || text.includes('角色')) {
return User;
} else if (text.includes('audio') || text.includes('音频')) {
return Music;
} else if (text.includes('post') || text.includes('后期')) {
return Scissors;
} else if (text.includes('final') || text.includes('最终')) {
return Tv;
} else if (text.includes('complete') || text.includes('完成')) {
return CheckCircle;
} else {
return Loader2;
}
};
export function TaskInfo({ isLoading, taskObject, currentLoadingText, dataLoadError }: TaskInfoProps) {
const StageIcon = getStageIcon(currentLoadingText);
if (isLoading) {
return (
<>
{taskObject?.projectName ?
`${taskObject.projectName}：${taskObject.taskName}` :
'正在加载项目信息...'
}
{/* 加载状态显示 */}
{/* 阶段图标 */}
{currentLoadingText}
{/* 错误提示 */}
{dataLoadError && (
{dataLoadError}
)}
);
}
return (
<>
{taskObject?.projectName}：{taskObject?.taskName}
{currentLoadingText === 'Task completed' ? (
{currentLoadingText}
) : (
{/* 阶段图标 */}
{/* 背景发光效果 */}
{currentLoadingText}
{/* 主文字 - 颜色填充动画 */}
{currentLoadingText}
{/* 动态光点效果 */}
{/* 文字底部装饰线 */}
)}
);
}