高亮

src/views/workflow/chart/index.vue

@@ -128,7 +128,7 @@ Graph.registerPortLayout('start', (portsPositionArgs, elemBBox) => {
     return {
       position: {
         x: 3,
-        y: 25 + 3,
+        y: 25 + 7,
       },
     }
   })
@@ -143,8 +143,8 @@ Graph.registerPortLayout('end', (portsPositionArgs, elemBBox) => {
   return portsPositionArgs.map((_, index) => {
     return {
       position: {
-        x: elemBBox.width + 3,
-        y: 25 + 3,
+        x: elemBBox.width + 11,
+        y: 25 + 7,
       },
     }
   })
@@ -162,7 +162,7 @@ Graph.registerPortLayout('more', (portsPositionArgs, elemBBox) => {
     })
     return {
       position: {
-        x: elemBBox.width + 3,
+        x: elemBBox.width + 11,
         y: _.dy,
       },
     }
@@ -236,6 +236,34 @@ const initChart = () => {
         },
       ],
     },
+    highlighting: {
+      // 连接桩可以被连接时在连接桩外围围渲染一个包围框
+      magnetAvailable: {
+        name: 'stroke',
+        args: {
+          rx: 100,
+          ry: 100,
+          attrs: {
+            fill: '#fff',
+            stroke: 'rgba(var(--czr-main-color-rgb), 0.5)',
+            'stroke-width': 3,
+          },
+        },
+      },
+      // 连接桩吸附连线时在连接桩外围围渲染一个包围框
+      magnetAdsorbed: {
+        name: 'stroke',
+        args: {
+          rx: 100,
+          ry: 100,
+          attrs: {
+            fill: '#fff',
+            stroke: 'rgba(var(--czr-main-color-rgb), 1)',
+            'stroke-width': 3,
+          },
+        },
+      },
+    },
     connecting: {
       snap: { //  连线过程中自动吸附
         radius: 20,

src/views/workflow/chart/node-index.vue

@@ -54,14 +54,15 @@ onMounted(() => {
 
 .node {
   z-index: 10;
-  border: style.$borderStyle;
   border-radius: 10px;
   background-color: #ffffff;
   position: absolute;
   width: 240px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-width: 4px;
+  border-color: transparent;
   &:hover {
-    border-color: #286bfb;
+    border-color: var(--czr-main-color);
     cursor: pointer;
   }
   .node-title {