更新代码

frontend/src/components/GlobalTaskIndicator.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useTask } from "@/contexts/TaskContext";
+import Link from "next/link";
+
+export default function GlobalTaskIndicator() {
+  const { currentTask, isGenerating } = useTask();
+
+  if (!isGenerating) 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>
+  );
+}