From 02c88b36e632f7ef62147cfe7399d7cc520be3e6 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Mon, 3 Aug 2026 09:52:03 +0800
Subject: [PATCH] feat(workflow): edit nodes on click

---
 .../src/components/workflow/GenericNode.tsx   | 89 ++++++++-----------
 .../components/workflow/WorkflowCanvas.tsx    |  1 +
 2 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/workflow/GenericNode.tsx b/frontend/src/components/workflow/GenericNode.tsx
index 288cf26..9e2e710 100644
--- a/frontend/src/components/workflow/GenericNode.tsx
+++ b/frontend/src/components/workflow/GenericNode.tsx
@@ -2,11 +2,12 @@
 
 /**
  * 通用节点渲染器。所有节点类型共用一个组件,规格来自 NodeSpecsContext
- * (后端 /api/node-types)。悬停/选中时在右上角显示「编辑 / 复制 / 删除」按钮。
+ * (后端 /api/node-types)。点击节点由 React Flow 打开编辑抽屉；悬停/选中时
+ * 仅在右上角显示「复制 / 删除」按钮。
  */
 
 import { Handle, Position, type NodeProps } from "@xyflow/react";
-import { Copy, MessageSquareText, Pencil, Trash2 } from "lucide-react";
+import { Copy, MessageSquareText, Trash2 } from "lucide-react";
 import { useContext } from "react";
 
 import { cn } from "@/lib/utils";
@@ -117,56 +118,42 @@ export function GenericNode({ id, type, data, selected }: NodeProps) {
         </div>
       )}
 
-      {/* 悬停/选中时出现的操作按钮 */}
-      <div
-        className={cn(
-          "nodrag absolute -top-3 right-3 flex items-center gap-1 transition-opacity",
-          selected
-            ? "opacity-100"
-            : "opacity-0 group-hover:opacity-100",
-        )}
-      >
-        <button
-          type="button"
-          title="编辑节点"
-          aria-label="编辑节点"
-          className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
-          onClick={(e) => {
-            e.stopPropagation();
-            actions.edit(id);
-          }}
+      {/* 编辑入口是点击节点；这里仅保留悬停/选中时的辅助操作。 */}
+      {type !== "start" && (
+        <div
+          className={cn(
+            "nodrag absolute -top-3 right-3 flex items-center gap-1 transition-opacity",
+            selected
+              ? "opacity-100"
+              : "opacity-0 group-hover:opacity-100",
+          )}
         >
-          <Pencil size={13} />
-        </button>
-        {type !== "start" && (
-          <>
-            <button
-              type="button"
-              title="复制节点"
-              aria-label="复制节点"
-              className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
-              onClick={(e) => {
-                e.stopPropagation();
-                actions.duplicate(id);
-              }}
-            >
-              <Copy size={13} />
-            </button>
-            <button
-              type="button"
-              title="删除节点"
-              aria-label="删除节点"
-              className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-destructive"
-              onClick={(e) => {
-                e.stopPropagation();
-                actions.remove(id);
-              }}
-            >
-              <Trash2 size={13} />
-            </button>
-          </>
-        )}
-      </div>
+          <button
+            type="button"
+            title="复制节点"
+            aria-label="复制节点"
+            className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation();
+              actions.duplicate(id);
+            }}
+          >
+            <Copy size={13} />
+          </button>
+          <button
+            type="button"
+            title="删除节点"
+            aria-label="删除节点"
+            className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              actions.remove(id);
+            }}
+          >
+            <Trash2 size={13} />
+          </button>
+        </div>
+      )}
 
       <div className="flex items-start gap-3">
         <div
diff --git a/frontend/src/components/workflow/WorkflowCanvas.tsx b/frontend/src/components/workflow/WorkflowCanvas.tsx
index 873165d..f256a4a 100644
--- a/frontend/src/components/workflow/WorkflowCanvas.tsx
+++ b/frontend/src/components/workflow/WorkflowCanvas.tsx
@@ -551,6 +551,7 @@ export function WorkflowCanvas({
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
                 onConnectEnd={onConnectEnd}
+                onNodeClick={(_, node) => nodeActions.edit(node.id)}
                 onEdgeClick={(_, edge) => edgeActions.edit(edge.id)}
                 isValidConnection={isValidConnection}
                 onPaneClick={() => {