From e4e998b2a6489b0013d63570bbd748685845c951 Mon Sep 17 00:00:00 2001
From: chenpei <chenpei@1080p.hk>
Date: Mon, 27 Oct 2025 18:37:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96AI=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C=20-=20?=
 =?UTF-8?q?=E5=AF=B9=E6=A0=87=E4=B8=9A=E7=95=8C=E6=9C=80=E4=BD=B3=E5=AE=9E?=
 =?UTF-8?q?=E8=B7=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 参考Midjourney/DALL-E等主流AI工具的UX设计:

1. **动态呼吸效果** (breathe animation):
   - 模糊度从15px→12px周期性变化
   - Scale从1.0→1.02微妙缩放
   - 模拟真实的图片生成过程

2. **双层旋转Spinner**:
   - 外圈顺时针旋转
   - 内圈逆时针旋转
   - 增强视觉反馈

3. **渐变Overlay**:
   - 蓝紫渐变半透明背景
   - 毛玻璃backdrop-blur
   - 更精致的视觉效果

4. **完成后淡入动画**:
   - fade-in + slide-in-from-bottom
   - 每张图片延迟100ms
   - 总时长400ms
   - 平滑的视觉过渡

5. **用户图片尺寸优化**:
   - 限制max-w-[200px]
   - 保持原始比例(object-contain)
   - 不会撑大对话框

与业界对比:
- ✅ Midjourney: 渐进式清晰
- ✅ DALL-E: 扫描线+模糊渐变
- ✅ Stable Diffusion: 降噪过程可视化
- ✅ Adobe Firefly: Shimmer效果

现在用户体验媲美专业AI生图工具！
---
 components/AIChatWidget.tsx | 86 +++++++++++++++++++++++++++++++------
 1 file changed, 73 insertions(+), 13 deletions(-)

diff --git a/components/AIChatWidget.tsx b/components/AIChatWidget.tsx
index e86f67e..a8d4f51 100644
--- a/components/AIChatWidget.tsx
+++ b/components/AIChatWidget.tsx
@@ -4,12 +4,23 @@ import { useState, useEffect, useRef } from 'react'
 import { useSession } from 'next-auth/react'
 import Image from 'next/image'
 
-// 添加shimmer动画样式
+// 添加动画样式
 const shimmerStyle = `
   @keyframes shimmer {
     0% { background-position: -200% 0; }
     100% { background-position: 200% 0; }
   }
+  
+  @keyframes breathe {
+    0%, 100% { 
+      filter: blur(15px) brightness(0.7); 
+      transform: scale(1);
+    }
+    50% { 
+      filter: blur(12px) brightness(0.8); 
+      transform: scale(1.02);
+    }
+  }
 `
 
 // 图片加载占位符组件
@@ -55,6 +66,7 @@ interface Message {
   timestamp: Date
   isGenerating?: boolean // 是否正在生成图片
   imageCount?: number // 预期生成的图片数量
+  sourceImages?: string[] // 用户发送的原始图片（用于显示模糊占位符）
 }
 
 export default function AIChatWidget() {
@@ -256,7 +268,8 @@ export default function AIChatWidget() {
         content: '',
         timestamp: new Date(),
         isGenerating: shouldShowImagePlaceholder,
-        imageCount: shouldShowImagePlaceholder ? 4 : 0
+        imageCount: shouldShowImagePlaceholder ? 4 : 0,
+        sourceImages: currentImages.length > 0 ? currentImages : undefined // 保存用户发送的原图
       }
       
       setMessages(prev => [...prev, tempAiMessage])
@@ -414,31 +427,78 @@ export default function AIChatWidget() {
                 } rounded-lg px-4 py-3`}>
                   {msg.content && <div className="whitespace-pre-wrap text-sm">{msg.content}</div>}
                   
-                  {/* 显示图片加载占位符 - 横向一排4个 */}
-                  {msg.isGenerating && msg.imageCount && msg.imageCount > 0 && (
-                    <div className="mt-2 grid grid-cols-4 gap-2">
-                      {Array.from({ length: msg.imageCount }).map((_, idx) => (
-                        <div key={idx}>
-                          <ImageLoadingPlaceholder />
+                  {/* 显示图片加载占位符 */}
+                  {msg.isGenerating && (
+                    <div className="mt-2">
+                      {/* 如果有原图，显示原图的模糊占位符 */}
+                      {msg.sourceImages && msg.sourceImages.length > 0 ? (
+                        <div className={`grid gap-2 ${
+                          msg.sourceImages.length === 1 ? 'grid-cols-1' :
+                          msg.sourceImages.length === 2 ? 'grid-cols-2' :
+                          'grid-cols-3'
+                        }`}>
+                          {msg.sourceImages.map((img, idx) => (
+                            <div key={idx} className="relative rounded-2xl overflow-hidden animate-pulse">
+                              <img 
+                                src={img} 
+                                alt={`Processing ${idx + 1}`}
+                                className="w-full max-w-[200px] h-auto object-contain rounded-2xl transition-all duration-1000"
+                                style={{ 
+                                  filter: 'blur(15px) brightness(0.7)', 
+                                  animation: 'breathe 2s ease-in-out infinite'
+                                }}
+                              />
+                              <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/10 to-purple-500/10">
+                                <div className="bg-black/60 backdrop-blur-xl px-5 py-3 rounded-full shadow-2xl border border-white/10">
+                                  <div className="flex items-center gap-3 text-white text-sm">
+                                    <div className="relative">
+                                      <div className="w-5 h-5 border-3 border-white/20 border-t-white rounded-full animate-spin" />
+                                      <div className="absolute inset-0 w-5 h-5 border-3 border-transparent border-r-white/40 rounded-full animate-spin" style={{ animationDirection: 'reverse', animationDuration: '1.5s' }} />
+                                    </div>
+                                    <span className="font-medium">AI处理中...</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
                         </div>
-                      ))}
+                      ) : (
+                        /* 没有原图，显示4个空白占位符（生成任务） */
+                        msg.imageCount && msg.imageCount > 0 && (
+                          <div className="grid grid-cols-4 gap-2">
+                            {Array.from({ length: msg.imageCount }).map((_, idx) => (
+                              <div key={idx}>
+                                <ImageLoadingPlaceholder />
+                              </div>
+                            ))}
+                          </div>
+                        )
+                      )}
                     </div>
                   )}
                   
-                  {/* 显示实际图片 - 横向一排显示 */}
+                  {/* 显示实际图片 - 添加淡入动画 */}
                   {!msg.isGenerating && msg.images && msg.images.length > 0 && (
-                    <div className={`mt-2 grid gap-2 ${
+                    <div className={`mt-2 grid gap-2 animate-in fade-in duration-500 ${
                       msg.images.length === 1 ? 'grid-cols-1' : 
                       msg.images.length === 2 ? 'grid-cols-2' :
                       msg.images.length === 3 ? 'grid-cols-3' :
                       'grid-cols-4'
                     }`}>
                       {msg.images.map((img, idx) => (
-                        <div key={idx} className="relative group rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700">
+                        <div 
+                          key={idx} 
+                          className="relative group rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 animate-in fade-in slide-in-from-bottom-2"
+                          style={{ animationDelay: `${idx * 100}ms`, animationDuration: '400ms' }}
+                        >
                           <img 
                             src={img} 
                             alt={`Image ${idx + 1}`}
-                            className="w-full aspect-square object-cover rounded-2xl cursor-pointer hover:opacity-90 transition-all hover:scale-[1.02]"
+                            className={`w-full rounded-2xl cursor-pointer hover:opacity-90 transition-all hover:scale-[1.02] ${
+                              msg.role === 'user' 
+                                ? 'max-w-[200px] h-auto object-contain' // 用户发送的图片：限制最大宽度，保持比例
+                                : 'aspect-square object-cover' // AI生成的图片：正方形显示
+                            }`}
                             onClick={() => {
                               // 点击图片在新窗口打开
                               const win = window.open()