feat(workflow): refactor port configuration and enhance edge styling

- Extract port markup and attributes to shared constants for reusability
- Add text label support to ports with '+' symbol and styling
- Update port radius from 4 to 6 pixels for better visibility
- Remove duplicate port configuration definitions from hook
- Replace all port group definitions to use centralized portMarkup and portAttrs
- Update edge connector to use smooth curve styling
- Change edge target marker from block to diamond shape
- Consolidate port styling logic to reduce code duplication and improve maintainability

web/src/views/Workflow/constant.ts

@@ -503,16 +503,44 @@ interface NodeConfig {
   ports?: PortsConfig;
 }
 
-const portAttrs = {
-  circle: {
-    r: 4, magnet: true, stroke: '#155EEF', strokeWidth: 2, fill: '#155EEF', position: { top: 22 }
+// 统一的端口 markup 配置
+export const portMarkup = [
+  {
+    tagName: 'circle',
+    selector: 'body',
   },
+  {
+    tagName: 'text',
+    selector: 'label',
+  },
+];
+
+// 统一的端口属性配置
+export const portAttrs = {
+  body: {
+    r: 6, 
+    magnet: true, 
+    stroke: '#155EEF', 
+    strokeWidth: 2, 
+    fill: '#155EEF',
+  },
+  label: {
+    text: '+',
+    fontSize: 12,
+    fontWeight: 'bold',
+    fill: '#FFFFFF',
+    textAnchor: 'middle',
+    textVerticalAnchor: 'middle',
+    pointerEvents: 'none',
+  }
 }
+
+// 统一的端口组配置
 const defaultPortGroups = {
-  // top: { position: 'top', attrs: portAttrs },
-  right: { position: 'right', attrs: portAttrs },
-  // bottom: { position: 'bottom', attrs: portAttrs },
-  left: { position: 'left', attrs: portAttrs },
+  // top: { position: 'top', markup: portMarkup, attrs: portAttrs },
+  right: { position: 'right', markup: portMarkup, attrs: portAttrs },
+  // bottom: { position: 'bottom', markup: portMarkup, attrs: portAttrs },
+  left: { position: 'left', markup: portMarkup, attrs: portAttrs },
 }
 const defaultPortItems = [
   // { group: 'top' },
@@ -570,7 +598,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
     height: 64,
     shape: 'normal-node',
     ports: {
-      groups: {right: { position: 'right', attrs: portAttrs }},
+      groups: {right: { position: 'right', markup: portMarkup, attrs: portAttrs }},
       items: [{ group: 'right' }],
     },
   },
@@ -579,7 +607,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
     height: 64,
     shape: 'normal-node',
     ports: {
-      groups: {left: { position: 'left', attrs: portAttrs }},
+      groups: {left: { position: 'left', markup: portMarkup, attrs: portAttrs }},
       items: [{ group: 'left' }],
     },
   },
@@ -588,7 +616,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
     height: 44,
     shape: 'cycle-start',
     ports: {
-      groups: {right: { position: 'right', attrs: portAttrs }},
+      groups: {right: { position: 'right', markup: portMarkup, attrs: portAttrs }},
       items: [{ group: 'right' }],
     },
   },
@@ -597,7 +625,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
     height: 44,
     shape: 'add-node',
     ports: {
-      groups: {left: { position: 'left', attrs: portAttrs }},
+      groups: {left: { position: 'left', markup: portMarkup, attrs: portAttrs }},
       items: [{ group: 'left' }],
     },
   },
@@ -615,7 +643,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
     height: 44,
     shape: 'cycle-start',
     ports: {
-      groups: {right: { position: 'right', attrs: portAttrs }},
+      groups: {right: { position: 'right', markup: portMarkup, attrs: portAttrs }},
       items: [{ group: 'right' }],
     },
   },
@@ -624,7 +652,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
     height: 44,
     shape: 'add-node',
     ports: {
-      groups: {left: { position: 'left', attrs: portAttrs }},
+      groups: {left: { position: 'left', markup: portMarkup, attrs: portAttrs }},
       items: [{ group: 'left' }],
     },
   }