chore: 修改旅程连接线为折线

src/components/flow/CustomEdge.vue

 <script setup>
-import { StraightEdge, EdgeLabelRenderer, useVueFlow, getStraightPath } from '@vue-flow/core'
+import { StepEdge, EdgeLabelRenderer, useVueFlow, getSmoothStepPath } from '@vue-flow/core'
 import { CircleCloseFilled } from '@element-plus/icons-vue'
 
 const props = defineProps({
@@ -19,7 +19,7 @@ const props = defineProps({
 
 const { removeEdges } = useVueFlow()
 
-const path = computed(() => getStraightPath(props))
+const path = computed(() => getSmoothStepPath(props))
 
 const labelColor = computed(() => props.style?.stroke)
 </script>
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <template>
-  <StraightEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" :interactionWidth="2"></StraightEdge>
+  <StepEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" :interactionWidth="2"></StepEdge>
   <EdgeLabelRenderer>
     <div class="edge-label" :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)` }">
       <span v-if="label" :style="{ color: labelColor }">{{ label }}</span>

src/components/flow/Index.vue

@@ -6,6 +6,8 @@ export default {
 
 <script setup lang="ts">
 import { nanoid } from 'nanoid'
+import type { GraphNode } from '@vue-flow/core'
+
 import { VueFlow, useVueFlow, PanelPosition, MarkerType, ConnectionLineType } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import CustomNode from './CustomNode.vue'
@@ -34,6 +36,16 @@ const onDragOver = (event: DragEvent) => {
   }
 }
 
+function getDirection(source: GraphNode, target: GraphNode) {
+  const horizontalDistance = target.position.x - source.position.x
+  const verticalDistance = target.position.y - source.position.y
+  if (Math.abs(horizontalDistance) > Math.abs(verticalDistance)) {
+    return horizontalDistance > 0 ? 'right' : 'left'
+  } else {
+    return verticalDistance > 0 ? 'bottom' : 'top'
+  }
+}
+
 onConnect(params => {
   const map: any = {
     'handle-yes': { label: '是', style: { stroke: '#81b337' } },
@@ -49,10 +61,16 @@ onConnect(params => {
     stroke: '#5b6b73'
     // strokeWidth: 2
   }
+  const sourceNode = findNode(params.source)
+  const targetNode = findNode(params.target)
+  let direction = 'right'
+  if (sourceNode && targetNode) {
+    direction = getDirection(sourceNode, targetNode)
+  }
   addEdges([
     {
       ...params,
-      sourceHandle: 'handle-right',
+      sourceHandle: `handle-${direction}`,
       type: 'custom',
       markerEnd: MarkerType.ArrowClosed,
       style,