加载中设计

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">
+              renderLoading()
-                <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>
             )}
             {/* 生成失败 */}
             {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">
+          renderLoading()
-            <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>
         )}
         {currentSketch.status === 2 && (
           <div className="absolute inset-0 bg-[#fcb0ba1a] flex items-center justify-center">