修复关闭按钮，修复直线改为曲线

src/components/common/flow/flowView.vue

@@ -23,14 +23,12 @@
     </div>
   </div>
   <div class="flow-view-box" v-loading="contentLoading">
-    <div id="flow-view-content">
-    </div>
+    <div id="flow-view-content"></div>
   </div>
   <TeleportContainer />
-  <FlowConfig v-model="drawerVisible" :nodeAttribute="nodeAttribute"></FlowConfig>
+  <FlowConfig v-model:drawerVisible="drawerVisible" :nodeAttribute="nodeAttribute"></FlowConfig>
 </template>
 <script setup lang="ts">
-
 import { onMounted, ref } from 'vue';
 import { getTeleport } from '@antv/x6-vue-shape';
 import { queryFlowTemplateDetailApi, queryFlowTemplateVersionApi } from '@/api/capability/flow';
@@ -74,8 +72,8 @@ const nodeAttribute = ref();
 
 const drawerVisible = ref(false);
 
-const getFlowVersionOptions = async() => {
-  const params:any = {};
+const getFlowVersionOptions = async () => {
+  const params: any = {};
   if (props.flowUuid) {
     params.code = props.flowUuid;
     params.type = 0;
@@ -83,7 +81,7 @@ const getFlowVersionOptions = async() => {
     params.code = props.flowCode;
     params.type = 1;
   }
-  const res:any = await queryFlowTemplateVersionApi(params);
+  const res: any = await queryFlowTemplateVersionApi(params);
   if (res.code === 200) {
     flowVersionOptions.value = res.data.map((item: any) => {
       return {
@@ -107,9 +105,9 @@ const changeVersionFun = () => {
 
 const contentLoading = ref(false);
 
-const getFlowDetail = async(uuid:string) => {
+const getFlowDetail = async (uuid: string) => {
   contentLoading.value = true;
-  const res:any = await queryFlowTemplateDetailApi({ uuid: uuid, status: 1 });
+  const res: any = await queryFlowTemplateDetailApi({ uuid: uuid, status: 1 });
   if (res.code === 200) {
     if (res.data.viewContent.length > 50) {
       const dataJson = JSON.parse(res.data.viewContent);
@@ -127,7 +125,7 @@ const getFlowDetail = async(uuid:string) => {
   }
 };
 
-const initGraph = async() => {
+const initGraph = async () => {
   graph.value = new Graph({
     panning: {
       enabled: true,
@@ -146,12 +144,21 @@ const initGraph = async() => {
     background: {
       color: '#F2F7FA',
     },
+    connecting: {
+      connector: { name: 'smooth' },
+      connectionPoint: 'anchor',
+      allowBlank: false,
+      snap: { radius: 20 },
+      allowEdge: false,
+      allowLoop: false,
+      highlight: true,
+    },
   });
   registerCustomNode();
   const nodeList = await getNodeList();
   createNode(nodeList, graph.value);
 
-  graph.value.on('node:click', ({ node }:any) => {
+  graph.value.on('node:click', ({ node }: any) => {
     console.log('click node', node);
     if (node.data.isApp) {
       nodeAttribute.value = node.data;
@@ -160,7 +167,7 @@ const initGraph = async() => {
   });
 };
 
-onMounted(async() => {
+onMounted(async () => {
   setTimeout(async () => {
     await initGraph();
     if (props.type === 'review') {
@@ -186,16 +193,14 @@ onMounted(async() => {
   //   console.log('e', e);
   // });
 });
-
 </script>
-<style lang="scss" >
+<style lang="scss">
 .flow-view-box {
   height: calc(100% - 40px);
-
 }
-  #header-box {
-    padding: 0;
-    height: auto;
-    margin-bottom: var(--margin-medium);
-  }
+#header-box {
+  padding: 0;
+  height: auto;
+  margin-bottom: var(--margin-medium);
+}
 </style>