feat(workflow): edit nodes on click
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
Reference in New Issue
Block a user