From a0abd6959c79f90c30f7f822c7a1cbb6c9fd46d3 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Feb 2026 17:18:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BE=93=E5=85=A5=E6=A1=86=E5=86=85?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=9B=BE=E7=89=87=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/canvas/CanvasChatPanel.tsx | 56 ++++++++++++++++-----------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index e3fe6250f..81f67e8dc 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -879,28 +879,37 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       
       {/* 底部输入区域 - Redesigned */}
       <div className="p-4 bg-background/80 backdrop-blur-md border-t">
-        {/* 附件预览 */}
-        {attachments.length > 0 && (
-          <div className="flex flex-wrap gap-2 mb-3">
-            {attachments.map((att, index) => (
-              <div key={index} className="relative group">
-                <img
-                  src={att.url}
-                  alt=""
-                  className="h-14 w-14 object-cover rounded-lg border shadow-sm"
-                />
-                <button
-                  className="absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-all shadow-sm hover:scale-110"
-                  onClick={() => removeAttachment(index)}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-
         <div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background">
+          {/* 附件标签 - 显示在输入框内部顶部 */}
+          {attachments.length > 0 && (
+            <div className="flex flex-wrap gap-2 px-4 pt-3">
+              {attachments.map((att, index) => (
+                <div 
+                  key={index} 
+                  className="inline-flex items-center gap-1.5 bg-muted/60 hover:bg-muted rounded-full pl-1 pr-2 py-1 group transition-colors"
+                >
+                  {/* 小缩略图 */}
+                  <img
+                    src={att.url}
+                    alt=""
+                    className="h-6 w-6 object-cover rounded-full border border-border/50"
+                  />
+                  {/* 图片名称 */}
+                  <span className="text-xs text-foreground/80 max-w-[80px] truncate">
+                    {att.name || 'Image'}
+                  </span>
+                  {/* 删除按钮 */}
+                  <button
+                    className="h-4 w-4 flex items-center justify-center rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+                    onClick={() => removeAttachment(index)}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          
           <Textarea
             ref={textareaRef}
             value={input}
@@ -912,7 +921,10 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
               }
             }}
             placeholder="请输入你的设计需求"
-            className="min-h-[80px] max-h-[150px] w-full text-sm resize-none bg-transparent border-none focus-visible:ring-0 p-4 pb-12 placeholder:text-muted-foreground/50"
+            className={cn(
+              "min-h-[60px] max-h-[120px] w-full text-sm resize-none bg-transparent border-none focus-visible:ring-0 px-4 pb-12 placeholder:text-muted-foreground/50",
+              attachments.length > 0 ? "pt-2" : "pt-4"
+            )}
             disabled={isLoading}
           />