From a8b078b8ae86bbaa4258c5802be4aafde0384412 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 7 Feb 2026 21:56:54 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=90=E8=97=8F=E6=96=87=E5=AD=97=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=AE=9E=E7=8E=B0=E7=BB=86=E8=8A=82=E5=B9=B6=E6=8E=A5?=
 =?UTF-8?q?=E9=80=9A=E4=BE=A7=E6=A0=8F=E5=BF=AB=E6=8D=B7=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/canvas/[id]/page.tsx              | 15 ++++++++++++---
 components/canvas/nodes/ImageNode.tsx | 20 +++++++++++++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index 056d08225..69e6f167d 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -293,14 +293,23 @@ export default function CanvasEditorPage({ params }: PageProps) {
     });
   };
 
-  // 处理图片操作（占位函数，后续实现具体逻辑）
+  // 处理图片操作（通过事件分发到选中图片节点执行）
   const handleAction = (action: string) => {
     if (!selectedImageNode) {
       toast.error("请先选择一张图片");
       return;
     }
-    toast.info(`${action} 功能开发中...`);
-    // TODO: 实现具体的图片处理逻辑
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("canvas:image-action", {
+          detail: {
+            nodeId: selectedImageNode.id,
+            action,
+          },
+        }),
+      );
+    }
   };
 
   // AI 生成图片
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index a1fd9bfa3..b06e91cfc 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -742,6 +742,24 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
     }
   };
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const onExternalAction = (event: Event) => {
+      const customEvent = event as CustomEvent<{ nodeId?: string; action?: string }>;
+      const targetNodeId = customEvent.detail?.nodeId;
+      const action = customEvent.detail?.action;
+
+      if (!targetNodeId || !action || targetNodeId !== node.id) return;
+      void handleAction(action);
+    };
+
+    window.addEventListener("canvas:image-action", onExternalAction as EventListener);
+    return () => {
+      window.removeEventListener("canvas:image-action", onExternalAction as EventListener);
+    };
+  }, [handleAction, node.id]);
+
   // 角度编辑完成回调
   const handleAngleEditComplete = (resultUrl: string) => {
     // 创建新的图片节点显示结果
@@ -1437,7 +1455,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
 
           <div className="px-4 py-3 space-y-3 max-h-[360px] overflow-y-auto">
             <p className="text-xs text-muted-foreground">
-              自动调用 Qwen3VL 识别图片文字。确认后将调用火山生图模型替换文字，并尽可能保持原字体形状。
+              识别图片文字后可逐条修改或删除，应用后会在保持画面风格的前提下完成文字更新。
             </p>
 
             {isDetectingText && (