From 72024c813893164adb5a492a7d2a9273ddd1e44f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E9=91=AB=E5=87=AF?= <wangxk@decent.cn>
Date: Thu, 4 Jun 2026 17:13:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E6=B7=BB=E5=8A=A0=E5=9B=BE?=
 =?UTF-8?q?=E5=83=8F=E8=8A=82=E7=82=B9=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在CanvasNode组件中添加onViewImage回调属性
- 实现图像节点点击时触发预览功能
- 修复事件冒泡问题，确保图像预览操作不会触发其他交互
---
 web/src/app/(user)/canvas/[id]/canvas-client-page.tsx | 1 +
 web/src/app/(user)/canvas/components/canvas-node.tsx  | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx b/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
index 1b9bf1b..a46ed92 100644
--- a/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
+++ b/web/src/app/(user)/canvas/[id]/canvas-client-page.tsx
@@ -2339,6 +2339,7 @@ function InfiniteCanvasPage() {
                             onSetBatchPrimary={setBatchPrimary}
                             onRetry={(node) => void handleRetryNode(node)}
                             onGenerateImage={generateImageFromTextNode}
+                            onViewImage={(node) => setPreviewNodeId(node.id)}
                             onContextMenu={(event, id) => {
                                 event.preventDefault();
                                 event.stopPropagation();
diff --git a/web/src/app/(user)/canvas/components/canvas-node.tsx b/web/src/app/(user)/canvas/components/canvas-node.tsx
index f2cb900..4fda12e 100644
--- a/web/src/app/(user)/canvas/components/canvas-node.tsx
+++ b/web/src/app/(user)/canvas/components/canvas-node.tsx
@@ -45,6 +45,7 @@ type CanvasNodeProps = {
     onSetBatchPrimary?: (node: CanvasNodeData) => void;
     onRetry?: (node: CanvasNodeData) => void;
     onGenerateImage?: (node: CanvasNodeData) => void;
+    onViewImage?: (node: CanvasNodeData) => void;
     onContextMenu: (event: React.MouseEvent, nodeId: string) => void;
 };
 
@@ -99,6 +100,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     onSetBatchPrimary,
     onRetry,
     onGenerateImage,
+    onViewImage,
     onContextMenu,
 }: CanvasNodeProps) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
@@ -269,6 +271,11 @@ export const CanvasNode = React.memo(function CanvasNode({
                         onToggleBatch?.(data.id);
                         return;
                     }
+                    if (data.type === CanvasNodeType.Image && hasImageContent) {
+                        event.stopPropagation();
+                        onViewImage?.(data);
+                        return;
+                    }
                     if (data.type !== CanvasNodeType.Text) return;
                     event.stopPropagation();
                     setIsEditingContent(true);