节点连线高亮

src/views/workflow/chart/index.vue

@@ -397,7 +397,10 @@ const initPlug = () => {
     new History({
       enabled: true,
       beforeAddCommand: (event, args: any) => {
-        if (args.key === 'ports' && args.options.propertyPath.includes('ports/items')) {
+        if (
+          args.key === 'ports' && args.options.propertyPath.includes('ports/items') ||
+          args.key === 'attrs'
+        ) {
           return false
         }
       }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="node" ref="ref_node">
+  <div class="node" ref="ref_node" :class="{active: state.node?.id === WorkflowStore.panel.node?.id}" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
     <div class="node-title">
       {{ state.nodeData?.title }}
       <div class="node-sub" v-if="state.nodeData?.subTitle">{{ state.nodeData.subTitle }}</div>
@@ -29,6 +29,7 @@ import testNode from '../instance/test/node/index.vue'
 import answerNode from '../instance/answer/node/index.vue'
 import {useWorkflowStore} from "@/stores";
 import {NodeType} from "@/views/workflow/types";
+import {lineActiveStyle, lineStyle} from "@/views/workflow/config";
 
 const WorkflowStore = useWorkflowStore()
 const getNode: any = inject('getNode')
@@ -40,6 +41,18 @@ const state: any = reactive({
   nodeData: {}
 })
 const ref_node = ref()
+const onMouseenter = () => {
+  const connectEdges = WorkflowStore.graph.getConnectedEdges(state.node.id)
+  connectEdges.forEach(edge => {
+    edge.attr(lineActiveStyle)
+  })
+}
+const onMouseleave = () => {
+  const connectEdges = WorkflowStore.graph.getConnectedEdges(state.node.id)
+  connectEdges.forEach(edge => {
+    edge.attr(lineStyle)
+  })
+}
 onMounted(() => {
   state.node = getNode()
   state.nodeData = state.node.data.workflowData
@@ -61,7 +74,7 @@ onMounted(() => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   border-width: 4px;
   border-color: transparent;
-  &:hover {
+  &:hover, &.active {
     border-color: var(--czr-main-color);
     cursor: pointer;
   }

src/views/workflow/config.ts

@@ -12,6 +12,13 @@ export const lineStyle = {
     targetMarker: null
   },
 }
+export const lineActiveStyle = {
+  line: {
+    stroke: 'var(--czr-main-color)',
+    strokeWidth: 2,
+    targetMarker: null
+  },
+}
 
 export const portStyle = {
   attrs: {