feat(workflow): edit edges on click

frontend/src/components/workflow/ConditionEdge.tsx

@@ -9,10 +9,9 @@ import {
   EdgeLabelRenderer,
   getBezierPath,
   type EdgeProps,
-  useReactFlow,
 } from "@xyflow/react";
-import { Pencil, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 
 import { cn } from "@/lib/utils";
 import { EdgeActionContext } from "./context";
@@ -29,12 +28,7 @@ export function ConditionEdge({
   selected,
 }: EdgeProps) {
   const actions = useContext(EdgeActionContext);
-  const { setEdges } = useReactFlow();
-  const [hovered, setHovered] = useState(false);
 
-  // 点击标签:只选中这条边(露出编辑/删除按钮),不直接进入编辑。
-  const selectThisEdge = () =>
-    setEdges((eds) => eds.map((e) => ({ ...e, selected: e.id === id })));
   const [path, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -55,7 +49,6 @@ export function ConditionEdge({
         ? "表达式"
         : "默认路径")
   ).toString().trim();
-  const expanded = hovered || selected;
 
   return (
     <>
@@ -70,16 +63,15 @@ export function ConditionEdge({
       />
       <EdgeLabelRenderer>
         <div
-          className="nodrag nopan pointer-events-auto absolute flex items-center gap-1"
+          className="nodrag nopan group pointer-events-auto absolute after:absolute after:left-full after:top-0 after:h-full after:w-1 after:content-['']"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
           }}
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
         >
           <button
             type="button"
-            title="条件"
+            title="点击编辑条件"
+            aria-label="编辑连接条件"
             className={cn(
               "max-w-[160px] truncate rounded-full border px-2.5 py-1 text-xs shadow-sm transition-colors",
               label
@@ -87,31 +79,23 @@ export function ConditionEdge({
                 : "border-dashed border-hairline-strong bg-card/80 text-muted-soft hover:text-foreground",
               selected && "border-primary ring-2 ring-primary/30",
             )}
-            onClick={selectThisEdge}
+            onClick={() => actions.edit(id)}
           >
             {label || "＋ 条件"}
           </button>
 
-          {expanded && (
+          <button
-            <button
+            type="button"
-              type="button"
+            title="删除连线"
-              title="编辑条件"
+            aria-label="删除连线"
-              className="flex h-6 w-6 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
+            className="pointer-events-none absolute left-full top-1/2 ml-1 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-destructive group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
-              onClick={() => actions.edit(id)}
+            onClick={(event) => {
-            >
+              event.stopPropagation();
-              <Pencil size={12} />
+              actions.remove(id);
-            </button>
+            }}
-          )}
+          >
-          {expanded && (
+            <Trash2 size={12} />
-            <button
+          </button>
-              type="button"
-              title="删除连线"
-              className="flex h-6 w-6 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-destructive"
-              onClick={() => actions.remove(id)}
-            >
-              <Trash2 size={12} />
-            </button>
-          )}
         </div>
       </EdgeLabelRenderer>
     </>

frontend/src/components/workflow/WorkflowCanvas.tsx

@@ -552,6 +552,7 @@ export function WorkflowCanvas({
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
                 onConnectEnd={onConnectEnd}
+                onEdgeClick={(_, edge) => edgeActions.edit(edge.id)}
                 isValidConnection={isValidConnection}
                 onPaneClick={() => {
                   onEditingEdgeIdChange(null);