From 42ca0b0db199f85d2a7e7f954a20cda6a61a95e5 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 18 Jan 2026 15:53:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E8=A3=82=E5=8F=98=E7=94=9F=E6=88=90=E7=8A=B6=E6=80=81=E7=9A=84?=
 =?UTF-8?q?=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用动态模糊占位图替代简单的 Loading 圈
- 添加流光扫描动画效果
- 增加更详细的生成中提示
---
 components/scene-fusion-view.tsx | 39 +++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/components/scene-fusion-view.tsx b/components/scene-fusion-view.tsx
index 516672056..47f70f354 100644
--- a/components/scene-fusion-view.tsx
+++ b/components/scene-fusion-view.tsx
@@ -519,16 +519,39 @@ export function SceneFusionView({ onBack }: SceneFusionViewProps) {
                       {scene.result ? (
                         <img src={scene.result} alt="生成结果" className="w-full h-full object-cover" />
                       ) : (
-                        <div className="w-full h-full flex flex-col items-center justify-center p-4">
+                        <div className="w-full h-full flex flex-col items-center justify-center p-0 relative overflow-hidden">
                           {scene.status === 'processing' ? (
-                            <div className="flex flex-col items-center gap-2">
-                              <Loader2 className="w-8 h-8 animate-spin text-primary" />
-                              <span className="text-xs text-muted-foreground">正在生成...</span>
-                            </div>
+                            <>
+                              {/* 背景模糊图 */}
+                              <img 
+                                src={scene.image} 
+                                alt="生成中" 
+                                className="w-full h-full object-cover absolute inset-0 blur-md opacity-80" 
+                              />
+                              {/* 动态遮罩层 */}
+                              <div className="absolute inset-0 bg-black/40" />
+                              
+                              {/* 动态光效 - 模拟扫描效果 */}
+                              <div className="absolute inset-0 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent)] bg-[length:200%_100%] animate-[shimmer_2s_infinite]" />
+                              
+                              {/* 中心 Loading */}
+                              <div className="relative z-10 flex flex-col items-center gap-3">
+                                <div className="relative">
+                                  {/* 外圈脉冲 */}
+                                  <div className="absolute inset-0 rounded-full bg-primary/20 animate-ping" />
+                                  <div className="bg-background/80 backdrop-blur-sm rounded-full p-3 shadow-lg border border-primary/20">
+                                    <Loader2 className="w-6 h-6 animate-spin text-primary" />
+                                  </div>
+                                </div>
+                                <div className="bg-background/60 backdrop-blur-md px-3 py-1 rounded-full border border-white/10">
+                                  <span className="text-xs font-medium text-white/90">正在融合...</span>
+                                </div>
+                              </div>
+                            </>
                           ) : scene.status === 'failed' ? (
-                            <div className="text-center">
-                              <p className="text-sm text-destructive mb-2">{scene.error || "生成失败"}</p>
-                              <Button size="sm" variant="outline" onClick={() => regenerateScene(scene.id)}>
+                            <div className="text-center p-4 relative z-10">
+                              <p className="text-sm text-destructive mb-2 font-medium">{scene.error || "生成失败"}</p>
+                              <Button size="sm" variant="outline" onClick={() => regenerateScene(scene.id)} className="bg-background/80 hover:bg-background">
                                 <RefreshCw className="w-3 h-3 mr-1" /> 重试
                               </Button>
                             </div>