wx44wx/ai-video-fullstack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workflow): edit nodes on click

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/components/workflow/GenericNode.tsx
View File

@@ -2,11 +2,12 @@
/** /**
* 通用节点渲染器。所有节点类型共用一个组件,规格来自 NodeSpecsContext * 通用节点渲染器。所有节点类型共用一个组件,规格来自 NodeSpecsContext
* (后端 /api/node-types)。悬停/选中时在右上角显示「编辑 / 复制 / 删除」按钮。 * (后端 /api/node-types)。点击节点由 React Flow 打开编辑抽屉；悬停/选中时
* 仅在右上角显示「复制 / 删除」按钮。
*/ */
import { Handle, Position, type NodeProps } from "@xyflow/react"; 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 { useContext } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -117,56 +118,42 @@ export function GenericNode({ id, type, data, selected }: NodeProps) {
</div> </div>
)} )}
{/* 悬停/选中时出现的操作按钮 */} {/* 编辑入口是点击节点；这里仅保留悬停/选中时的辅助操作。 */}
<div {type !== "start" && (
className={cn( <div
"nodrag absolute -top-3 right-3 flex items-center gap-1 transition-opacity", className={cn(
selected "nodrag absolute -top-3 right-3 flex items-center gap-1 transition-opacity",
? "opacity-100" selected
: "opacity-0 group-hover:opacity-100", ? "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);
}}
> >
<Pencil size={13} /> <button
</button> type="button"
{type !== "start" && ( title="复制节点"
<> aria-label="复制节点"
<button 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"
type="button" onClick={(e) => {
title="复制节点" e.stopPropagation();
aria-label="复制节点" actions.duplicate(id);
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(); <Copy size={13} />
actions.duplicate(id); </button>
}} <button
> type="button"
<Copy size={13} /> title="删除节点"
</button> aria-label="删除节点"
<button 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"
type="button" onClick={(e) => {
title="删除节点" e.stopPropagation();
aria-label="删除节点" actions.remove(id);
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(); <Trash2 size={13} />
actions.remove(id); </button>
}} </div>
> )}
<Trash2 size={13} />
</button>
</>
)}
</div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div <div

1
frontend/src/components/workflow/WorkflowCanvas.tsx
View File

@@ -551,6 +551,7 @@ export function WorkflowCanvas({
onEdgesChange={onEdgesChange} onEdgesChange={onEdgesChange}
onConnect={onConnect} onConnect={onConnect}
onConnectEnd={onConnectEnd} onConnectEnd={onConnectEnd}
onNodeClick={(_, node) => nodeActions.edit(node.id)}
onEdgeClick={(_, edge) => edgeActions.edit(edge.id)} onEdgeClick={(_, edge) => edgeActions.edit(edge.id)}
isValidConnection={isValidConnection} isValidConnection={isValidConnection}
onPaneClick={() => { onPaneClick={() => {