From 2db52b90ffbc788a9ea3c297a4c6c70b65d84a40 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sun, 28 Jun 2026 20:27:07 +0800
Subject: [PATCH] feat: update FlowgramNodeRenderer port colors and add hover
 effects for improved interactivity

---
 .../_components/flowgram-node-renderer.tsx           |  5 +++--
 web/app/globals.css                                  | 12 ++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx b/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx
index 00f4b63..9f3fcf9 100644
--- a/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx
+++ b/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx
@@ -29,9 +29,10 @@ export function FlowgramNodeRenderer(props: WorkflowNodeProps) {
         selected ? "border-(--g-selection-background)" : "border-transparent"
       )}
       style={{ padding: 0 }}
-      portPrimaryColor="var(--g-selection-background)"
+      portClassName="workflow-node-port"
+      portPrimaryColor="#2575FC"
       portSecondaryColor="#c9cdd4"
-      portBackgroundColor="hsl(var(--background))"
+      portBackgroundColor="#FFFFFF"
     >
       {form?.render()}
     </WorkflowNodeRenderer>
diff --git a/web/app/globals.css b/web/app/globals.css
index 5f2643f..bf41cfe 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -366,3 +366,15 @@
     @apply font-sans;
   }
 }
+
+.workflow-node-port:hover .bg:not(.hasError),
+.workflow-node-port.hovered .bg:not(.hasError) {
+  cursor: crosshair;
+  transform: scale(1, 1) !important;
+  background: #2575fc !important;
+}
+
+.workflow-node-port:hover .bg > .symbol,
+.workflow-node-port.hovered .bg > .symbol {
+  opacity: 1 !important;
+}