Refactor WorkflowCanvasNode styling for improved layout and visual feedback

This commit is contained in:
mlogclub
2026-06-23 19:49:46 +08:00
parent 17852d0675
commit b7a98ad2a9
@@ -996,13 +996,14 @@ function WorkflowConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineCompon
<g> <g>
<path <path
fill="none" fill="none"
stroke="hsl(var(--primary) / 0.72)" stroke="var(--primary)"
opacity={0.72}
strokeDasharray="6 5" strokeDasharray="6 5"
strokeLinecap="round" strokeLinecap="round"
strokeWidth={2} strokeWidth={2}
d={edgePath} d={edgePath}
/> />
<circle cx={toX} cy={toY} r={4} fill="hsl(var(--primary))" /> <circle cx={toX} cy={toY} r={4} fill="var(--primary)" />
</g> </g>
) )
} }
@@ -1217,7 +1218,7 @@ function WorkflowCanvasNode({ id, data, selected }: NodeProps<WorkflowFlowNode>)
return ( return (
<div <div
className={[ className={[
"group/node relative w-52 overflow-hidden rounded-xl border bg-background shadow-[0_12px_34px_rgba(15,23,42,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_18px_42px_rgba(15,23,42,0.12)]", "group/node relative w-52 rounded-xl border bg-background shadow-[0_12px_34px_rgba(15,23,42,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_18px_42px_rgba(15,23,42,0.12)]",
selected ? "border-primary ring-4 ring-primary/10" : "", selected ? "border-primary ring-4 ring-primary/10" : "",
hasIssue ? "border-destructive/70" : "border-border/70", hasIssue ? "border-destructive/70" : "border-border/70",
].join(" ")} ].join(" ")}
@@ -1227,8 +1228,9 @@ function WorkflowCanvasNode({ id, data, selected }: NodeProps<WorkflowFlowNode>)
<WorkflowNodeHandle <WorkflowNodeHandle
type="target" type="target"
position={Position.Left} position={Position.Left}
className={cn("!-left-2.5", handleClassName)} className={cn("!left-0", handleClassName)}
/> />
<div className="overflow-hidden rounded-xl">
<div className="flex items-start gap-2 border-b border-border/60 bg-muted/20 px-3 py-2.5"> <div className="flex items-start gap-2 border-b border-border/60 bg-muted/20 px-3 py-2.5">
<div <div
className={cn( className={cn(
@@ -1262,10 +1264,11 @@ function WorkflowCanvasNode({ id, data, selected }: NodeProps<WorkflowFlowNode>)
</div> </div>
)} )}
</div> </div>
</div>
<WorkflowNodeHandle <WorkflowNodeHandle
type="source" type="source"
position={Position.Right} position={Position.Right}
className={cn("!-right-2.5", handleClassName)} className={cn("!right-0", handleClassName)}
/> />
<WorkflowAddAfterButton <WorkflowAddAfterButton
nodeId={id} nodeId={id}