lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化场景裂变生成状态的 UI
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source 
- 使用动态模糊占位图替代简单的 Loading 圈
- 添加流光扫描动画效果
- 增加更详细的生成中提示
This commit is contained in:
Your Name 2026-01-18 15:53:09 +08:00
parent 1d94176700
commit 42ca0b0db1
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/scene-fusion-view.tsx
View File

@ -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>