From 0e0951963362381fdaa81dab52db4b0d7308d1a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Thu, 9 Oct 2025 14:32:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E4=B8=AD=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/work-flow/media-viewer.tsx | 45 +++++++++++++++------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index 35fc2e2..016648c 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -398,6 +398,37 @@ export const MediaViewer = React.memo(function MediaViewer({
     };
   }, []);
 
+  // 加载中
+  const renderLoading = () => {
+    return (
+      <div data-alt="generating-overlay" className="absolute inset-0 bg-black/40 flex items-center justify-center">
+        <div data-alt="generating-content" className="relative flex flex-col items-center gap-4">
+          {/* 渐变进度环 */}
+          <div className="relative w-24 h-24">
+            {/* 外层旋转渐变边框 */}
+            <div 
+              className="absolute inset-0 rounded-full opacity-80 animate-spin"
+              style={{
+                background: 'conic-gradient(from 0deg, transparent 0%, #3b82f6 25%, #60a5fa 50%, #93c5fd 75%, transparent 100%)',
+                animation: 'spin 2s linear infinite'
+              }}
+            />
+            {/* 内层遮罩（形成边框效果） */}
+            <div className="absolute inset-[2px] rounded-full bg-black/60 backdrop-blur-sm" />
+          </div>
+          
+          {/* 文案 */}
+          <div className="text-white text-center">
+            <div className="text-sm font-medium" role="status" aria-live="polite" aria-busy="true">
+              Generating...
+            </div>
+            <div className="text-xs text-white/60 mt-1">Processing your request</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   // 渲染底部通栏控制条（与图2一致）
   const renderBottomControls = (
     isFinal: boolean,
@@ -524,12 +555,7 @@ export const MediaViewer = React.memo(function MediaViewer({
           <div className="absolute inset-0 overflow-hidden z-20">
             {/* 生成中 */}
             {taskObject.videos.data[currentSketchIndex].video_status === 0 && (
-              <div className="absolute inset-0 bg-black/10 flex items-center justify-center">
-                <div className="text-blue-500 text-2xl font-bold flex items-center gap-2">
-                  <Loader2 className="w-10 h-10 animate-spin" />
-                  <span>Generating...</span>
-                </div>
-              </div>
+              renderLoading()
             )}
             {/* 生成失败 */}
             {taskObject.videos.data[currentSketchIndex].video_status === 2 && (
@@ -696,12 +722,7 @@ export const MediaViewer = React.memo(function MediaViewer({
       >
         {/* 状态 */}
         {currentSketch.status === 0 && (
-          <div className="absolute inset-0 bg-black/10 flex items-center justify-center">
-            <div className="text-blue-500 text-2xl font-bold flex items-center gap-2">
-              <Loader2 className="w-10 h-10 animate-spin" />
-              <span>Generating...</span>
-            </div>
-          </div>
+          renderLoading()
         )}
         {currentSketch.status === 2 && (
           <div className="absolute inset-0 bg-[#fcb0ba1a] flex items-center justify-center">