46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTask } from "@/shared/contexts/TaskContext";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function GlobalTaskIndicator() {
|
|
const { currentTask, isGenerating } = useTask();
|
|
const pathname = usePathname();
|
|
|
|
// 首页已有专门的进度条展示，因此在首页不显示顶部全局进度条
|
|
if (!isGenerating || pathname === "/") return null;
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg">
|
|
<div className="max-w-6xl mx-auto px-6 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
|
|
<span className="font-medium">
|
|
视频生成中... {currentTask?.progress || 0}%
|
|
</span>
|
|
{currentTask?.message && (
|
|
<span className="text-white/80 text-sm">
|
|
{currentTask.message}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded transition-colors text-sm"
|
|
>
|
|
查看详情
|
|
</Link>
|
|
</div>
|
|
<div className="mt-2 w-full bg-white/20 rounded-full h-1.5 overflow-hidden">
|
|
<div
|
|
className="bg-white h-full transition-all duration-300 ease-out"
|
|
style={{ width: `${currentTask?.progress || 0}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|