feat: 改进物品标注交互，直接在画布图片上标注无需弹窗

components/canvas/ObjectPickerOverlay.tsx

@@ -225,6 +225,11 @@ export function ObjectPickerOverlay() {
     setPickedMarkers([]);
   }, [setPickerMode]);
   
+  // 🆕 改为直接在 ImageNode 中标注，不再使用全屏覆盖层
+  // 保留此组件以便将来可能需要切换回覆盖层模式
+  return null;
+  
+  // 原覆盖层代码（已禁用）
   if (!isPickerMode || !imageUrl) return null;
   
   return createPortal(

components/canvas/nodes/ImageNode.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { ImagePlus, Loader2, AlertCircle, MoreVertical, Scissors, Sparkles, Expand, Maximize2, Move3D, Layers, Download, Trash2, RefreshCw, Pencil, MessageSquarePlus, Crosshair } from "lucide-react";
+import { ImagePlus, Loader2, AlertCircle, MoreVertical, Scissors, Sparkles, Expand, Maximize2, Move3D, Layers, Download, Trash2, RefreshCw, Pencil, MessageSquarePlus, Crosshair, Check, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -29,6 +29,98 @@ import { cn } from "@/lib/utils";
 import { AngleEditDialog } from "@/components/angle-edit-dialog";
 import { SceneFusionDialog } from "@/components/scene-fusion-dialog";
 import { ImageAnnotator } from "@/components/image-annotator";
+import type { PickedObject } from "@/store/canvas";
+
+// 已标注的物品标记（本地状态）
+interface PickedMarker {
+  clickX: number;
+  clickY: number;
+  objectName: string;
+  index: number;
+}
+
+/**
+ * 在图片上绘制标记点，返回带标记的图片 base64
+ */
+async function drawMarkerOnImage(
+  imageUrl: string,
+  clickX: number,
+  clickY: number
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        reject(new Error('无法创建 canvas'));
+        return;
+      }
+      
+      // 压缩图片尺寸（最大 800px）
+      const maxSize = 800;
+      let width = img.width;
+      let height = img.height;
+      
+      if (width > maxSize || height > maxSize) {
+        if (width > height) {
+          height = (height / width) * maxSize;
+          width = maxSize;
+        } else {
+          width = (width / height) * maxSize;
+          height = maxSize;
+        }
+      }
+      
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      
+      // 计算标记位置
+      const markerX = clickX * width;
+      const markerY = clickY * height;
+      const markerRadius = Math.max(12, Math.min(width, height) * 0.025);
+      
+      // 绘制红色标记
+      ctx.beginPath();
+      ctx.arc(markerX, markerY, markerRadius + 3, 0, Math.PI * 2);
+      ctx.fillStyle = 'white';
+      ctx.fill();
+      
+      ctx.beginPath();
+      ctx.arc(markerX, markerY, markerRadius, 0, Math.PI * 2);
+      ctx.fillStyle = '#FF0000';
+      ctx.fill();
+      
+      // 绘制十字线
+      ctx.strokeStyle = '#FF0000';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(markerX - markerRadius * 2, markerY);
+      ctx.lineTo(markerX - markerRadius - 2, markerY);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(markerX + markerRadius + 2, markerY);
+      ctx.lineTo(markerX + markerRadius * 2, markerY);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(markerX, markerY - markerRadius * 2);
+      ctx.lineTo(markerX, markerY - markerRadius - 2);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(markerX, markerY + markerRadius + 2);
+      ctx.lineTo(markerX, markerY + markerRadius * 2);
+      ctx.stroke();
+      
+      resolve(canvas.toDataURL('image/jpeg', 0.85));
+    };
+    
+    img.onerror = () => reject(new Error('图片加载失败'));
+    img.src = imageUrl;
+  });
+}
 
 interface ImageNodeProps {
   node: CanvasNode;
@@ -58,6 +150,113 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
   const addPendingChatAttachment = useCanvasStore((state) => state.addPendingChatAttachment);
   const setPickerMode = useCanvasStore((state) => state.setPickerMode);
   
+  // 🆕 物品拾取相关状态
+  const isPickerMode = useCanvasStore((state) => state.isPickerMode);
+  const pickerTargetNodeId = useCanvasStore((state) => state.pickerTargetNodeId);
+  const isPickerLoading = useCanvasStore((state) => state.isPickerLoading);
+  const setPickerLoading = useCanvasStore((state) => state.setPickerLoading);
+  const addPendingPickedObject = useCanvasStore((state) => state.addPendingPickedObject);
+  
+  // 当前节点是否处于拾取模式
+  const isThisNodePicking = isPickerMode && pickerTargetNodeId === node.id;
+  
+  // 已标注的物品列表（本地状态）
+  const [pickedMarkers, setPickedMarkers] = useState<PickedMarker[]>([]);
+  // 当前正在识别的点击位置
+  const [currentClick, setCurrentClick] = useState<{ x: number; y: number } | null>(null);
+  
+  // 退出拾取模式时清空标记
+  useEffect(() => {
+    if (!isThisNodePicking) {
+      setPickedMarkers([]);
+      setCurrentClick(null);
+    }
+  }, [isThisNodePicking]);
+  
+  // 🆕 处理图片点击标注
+  const handlePickerClick = useCallback(async (e: React.MouseEvent<HTMLImageElement>) => {
+    if (!isThisNodePicking || isPickerLoading || !data.src) return;
+    
+    e.stopPropagation();
+    e.preventDefault();
+    
+    const img = e.currentTarget;
+    const rect = img.getBoundingClientRect();
+    
+    // 计算相对坐标 (0-1)
+    const clickX = (e.clientX - rect.left) / rect.width;
+    const clickY = (e.clientY - rect.top) / rect.height;
+    
+    setCurrentClick({ x: clickX, y: clickY });
+    setPickerLoading(true);
+    
+    try {
+      // 在图片上绘制红色标记点
+      const markedImageBase64 = await drawMarkerOnImage(data.src, clickX, clickY);
+      
+      const response = await fetch('/api/pick-object', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          imageData: markedImageBase64,
+          clickX,
+          clickY,
+        }),
+      });
+      
+      if (!response.ok) throw new Error('识别失败');
+      
+      const result = await response.json();
+      
+      if (result.success && result.object) {
+        const picked: PickedObject = {
+          imageUrl: data.src,
+          imageNodeId: node.id,
+          clickX,
+          clickY,
+          objectName: result.object.name,
+          objectPosition: result.object.position,
+          confidence: result.object.confidence,
+          boundingBox: result.object.boundingBox,
+        };
+        
+        addPendingPickedObject(picked);
+        
+        setPickedMarkers(prev => [...prev, {
+          clickX,
+          clickY,
+          objectName: result.object.name,
+          index: prev.length + 1,
+        }]);
+        
+        toast.success(`已添加: ${result.object.name}`);
+        setCurrentClick(null);
+      } else {
+        toast.error(result.error || '未能识别物品');
+        setCurrentClick(null);
+      }
+    } catch (error) {
+      console.error('物品拾取失败:', error);
+      toast.error('识别失败，请重试');
+      setCurrentClick(null);
+    } finally {
+      setPickerLoading(false);
+    }
+  }, [isThisNodePicking, isPickerLoading, data.src, node.id, setPickerLoading, addPendingPickedObject]);
+  
+  // 🆕 完成标注
+  const handleFinishPicking = useCallback(() => {
+    setPickerMode(false);
+    if (pickedMarkers.length > 0) {
+      toast.success(`已完成 ${pickedMarkers.length} 个物品标注`);
+    }
+  }, [setPickerMode, pickedMarkers.length]);
+  
+  // 🆕 取消标注
+  const handleCancelPicking = useCallback(() => {
+    setPickerMode(false);
+  }, [setPickerMode]);
+  
   // 获取工具栏位置 - 在渲染时直接计算
   const getToolbarPosition = () => {
     if (containerRef.current) {
@@ -418,18 +617,103 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
-        {/* 图片内容 - 使用 object-contain 保持原始比例，双击可放大查看 */}
+        {/* 图片内容 - 使用 object-contain 保持原始比例 */}
         {data.src ? (
-          <img
-            src={data.src}
-            alt={data.prompt || "图片"}
-            className="w-full h-full object-contain bg-muted/30 cursor-pointer"
-            draggable={false}
-            onDoubleClick={(e) => {
-              e.stopPropagation();
-              setFullscreenPreviewOpen(true);
-            }}
-          />
+          <div className="relative w-full h-full">
+            <img
+              src={data.src}
+              alt={data.prompt || "图片"}
+              className={cn(
+                "w-full h-full object-contain bg-muted/30",
+                isThisNodePicking ? "cursor-crosshair" : "cursor-pointer"
+              )}
+              draggable={false}
+              onClick={isThisNodePicking ? handlePickerClick : undefined}
+              onDoubleClick={(e) => {
+                if (!isThisNodePicking) {
+                  e.stopPropagation();
+                  setFullscreenPreviewOpen(true);
+                }
+              }}
+            />
+            
+            {/* 🆕 拾取模式：显示已标注的物品标记 */}
+            {isThisNodePicking && pickedMarkers.map((marker) => (
+              <div
+                key={`marker-${marker.index}`}
+                className="absolute pointer-events-none"
+                style={{
+                  left: `${marker.clickX * 100}%`,
+                  top: `${marker.clickY * 100}%`,
+                  transform: 'translate(-50%, -50%)',
+                }}
+              >
+                {/* 序号标记 */}
+                <div className="relative flex items-center justify-center">
+                  <div className="absolute w-8 h-8 rounded-full bg-blue-500/30 animate-ping" />
+                  <div className="w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold flex items-center justify-center shadow-lg border-2 border-white">
+                    {marker.index}
+                  </div>
+                </div>
+                {/* 物品名称 */}
+                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-blue-500 text-white text-xs px-2 py-0.5 rounded shadow-lg whitespace-nowrap">
+                  {marker.objectName}
+                </div>
+              </div>
+            ))}
+            
+            {/* 🆕 拾取模式：当前点击位置（正在识别） */}
+            {isThisNodePicking && currentClick && (
+              <div
+                className="absolute pointer-events-none"
+                style={{
+                  left: `${currentClick.x * 100}%`,
+                  top: `${currentClick.y * 100}%`,
+                  transform: 'translate(-50%, -50%)',
+                }}
+              >
+                <div className="w-6 h-6 rounded-full border-2 border-orange-500 border-dashed animate-spin" />
+              </div>
+            )}
+            
+            {/* 🆕 拾取模式：状态栏 */}
+            {isThisNodePicking && (
+              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-white rounded-full px-3 py-1.5 shadow-lg">
+                <Crosshair className="h-4 w-4 text-orange-500" />
+                <span className="text-xs font-medium">
+                  {isPickerLoading 
+                    ? '正在识别...' 
+                    : pickedMarkers.length > 0 
+                      ? `已标注 ${pickedMarkers.length} 个` 
+                      : '点击标注物品'}
+                </span>
+                {pickedMarkers.length > 0 && (
+                  <Button
+                    size="sm"
+                    className="h-6 rounded-full bg-black hover:bg-black/90 text-white px-3 text-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleFinishPicking();
+                    }}
+                  >
+                    <Check className="h-3 w-3 mr-1" />
+                    完成
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 rounded-full"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCancelPicking();
+                  }}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            )}
+          </div>
         ) : data.status === 'generating' ? (
           <div className="w-full h-full flex flex-col items-center justify-center bg-muted">
             <Loader2 className="h-8 w-8 animate-spin text-primary mb-2" />