feat(workflow): edit nodes on click

This commit is contained in:
Xin Wang
2026-08-03 09:52:03 +08:00
parent f5c36a62aa
commit 02c88b36e6
2 changed files with 39 additions and 51 deletions

View File

@@ -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

View File

@@ -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={() => {