From 8f1f9244210db9b7669750166d7401f6109967a3 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Feb 2026 15:21:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=80=89=E4=B8=AD=E5=B7=A5=E5=85=B7=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 选中图片时在顶部显示工具栏（放大、移除背景、场景、角度、扩展、调整）
2. 工具栏使用圆角胶囊样式，类似竞品设计
3. 显示图片标题和尺寸信息
4. 添加更多操作下拉菜单（下载、删除）

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/canvas/CanvasWorkspace.tsx |   4 +-
 components/canvas/nodes/ImageNode.tsx | 147 ++++++++++++++++----------
 2 files changed, 93 insertions(+), 58 deletions(-)

diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx
index 3a2ff49..b97ea0e 100644
--- a/components/canvas/CanvasWorkspace.tsx
+++ b/components/canvas/CanvasWorkspace.tsx
@@ -247,8 +247,8 @@ export function CanvasWorkspace() {
         }}
       />
 
-      {/* 节点层 - 使用虚拟化渲染 */}
-      <div className="absolute inset-0">
+      {/* 节点层 - 使用虚拟化渲染，允许工具栏溢出 */}
+      <div className="absolute inset-0" style={{ overflow: 'visible' }}>
         {visibleNodes.map(renderNode)}
       </div>
       
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 085bb9a..9265fcc 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -322,10 +322,21 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
 
   return (
     <>
+      {/* 选中时在图片上方显示标题和尺寸 */}
+      {isSelected && data.src && (
+        <div className="absolute -top-7 left-0 right-0 flex items-center justify-between text-xs text-muted-foreground px-1">
+          <div className="flex items-center gap-1">
+            <ImagePlus className="h-3 w-3" />
+            <span className="truncate max-w-[150px]">{data.prompt || '图片'}</span>
+          </div>
+          <span>{node.size.width} × {node.size.height}</span>
+        </div>
+      )}
+      
       <div
         className={cn(
-          "relative w-full h-full bg-card rounded-lg overflow-hidden border shadow-sm",
-          isSelected && "border-primary"
+          "relative w-full h-full bg-card rounded-lg overflow-hidden border-2 shadow-sm transition-colors",
+          isSelected ? "border-primary" : "border-transparent"
         )}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
@@ -381,91 +392,115 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
           </div>
         )}
 
-        {/* 选中时显示的顶部工具栏 - 和聊天窗口中的功能一致 */}
+        {/* 选中时显示的顶部工具栏 - 放在图片内部顶部，避免被裁剪 */}
         {isSelected && data.src && !isProcessing && (
           <div 
-            className="absolute -top-12 left-1/2 -translate-x-1/2 flex items-center gap-1 bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-1.5 z-10"
+            className="absolute top-2 left-1/2 -translate-x-1/2 flex items-center gap-0.5 bg-white/95 backdrop-blur-sm border border-gray-200 rounded-full shadow-xl px-2 py-1.5 z-50"
+            style={{ 
+              pointerEvents: 'auto',
+              minWidth: 'max-content',
+            }}
             onClick={(e) => e.stopPropagation()}
           >
+            {/* 放大/高清 */}
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 px-2 text-xs gap-1"
-              onClick={() => handleAction('rmbg')}
-              title="抠图"
-            >
-              <Scissors className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">抠图</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-8 px-2 text-xs gap-1"
+              className="h-9 px-3 text-xs gap-1.5 rounded-full hover:bg-gray-100"
               onClick={() => handleAction('enhance')}
-              title="变清晰"
+              title="高清放大"
             >
-              <Sparkles className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">变清晰</span>
+              <span className="text-[10px] font-medium text-gray-500 border border-gray-300 rounded px-1">HD</span>
+              <span>放大</span>
             </Button>
+            
+            {/* 移除背景/抠图 */}
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 px-2 text-xs gap-1"
-              onClick={() => handleAction('extend')}
-              title="扩展"
+              className="h-9 px-3 text-xs gap-1.5 rounded-full hover:bg-gray-100"
+              onClick={() => handleAction('rmbg')}
+              title="移除背景"
             >
-              <Expand className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">扩展</span>
+              <Scissors className="h-4 w-4" />
+              <span>移除背景</span>
             </Button>
+            
+            {/* 场景融合 */}
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 px-2 text-xs gap-1"
-              onClick={() => handleAction('resize')}
-              title="调整"
-            >
-              <Maximize2 className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">调整</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-8 px-2 text-xs gap-1"
-              onClick={() => handleAction('angle')}
-              title="角度"
-            >
-              <Move3D className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">角度</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-8 px-2 text-xs gap-1"
+              className="h-9 px-3 text-xs gap-1.5 rounded-full hover:bg-gray-100"
               onClick={() => handleAction('scene-fusion')}
-              title="场景"
+              title="场景融合"
             >
-              <Layers className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">场景</span>
+              <Layers className="h-4 w-4" />
+              <span>场景</span>
             </Button>
-            <div className="w-px h-5 bg-border mx-0.5" />
+            
+            {/* 角度编辑 */}
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 px-2 text-xs gap-1"
-              onClick={handleDownload}
-              title="下载"
+              className="h-9 px-3 text-xs gap-1.5 rounded-full hover:bg-gray-100"
+              onClick={() => handleAction('angle')}
+              title="角度编辑"
             >
-              <Download className="h-3.5 w-3.5" />
+              <Move3D className="h-4 w-4" />
+              <span>角度</span>
             </Button>
+            
+            {/* 扩展 */}
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 px-2 text-xs gap-1 text-destructive hover:text-destructive"
-              onClick={() => deleteNode(node.id)}
-              title="删除"
+              className="h-9 px-3 text-xs gap-1.5 rounded-full hover:bg-gray-100"
+              onClick={() => handleAction('extend')}
+              title="图片扩展"
             >
-              <Trash2 className="h-3.5 w-3.5" />
+              <Expand className="h-4 w-4" />
+              <span>扩展</span>
             </Button>
+            
+            {/* 尺寸调整 */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-9 px-3 text-xs gap-1.5 rounded-full hover:bg-gray-100"
+              onClick={() => handleAction('resize')}
+              title="尺寸调整"
+            >
+              <Maximize2 className="h-4 w-4" />
+              <span>调整</span>
+            </Button>
+            
+            {/* 更多操作 */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-9 px-2 rounded-full hover:bg-gray-100"
+                  title="更多"
+                >
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleDownload}>
+                  <Download className="h-4 w-4 mr-2" />
+                  下载图片
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem 
+                  onClick={() => deleteNode(node.id)}
+                  className="text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  删除
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         )}