修改比对式检测页面

frontend/src/views/home/components/RemoveableEdge.vue

@@ -1,85 +1,88 @@
 <script setup>
 import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
 import { computed } from 'vue'
+import { useCheckStore } from '@/stores/modules/check'
 
+const checkStore = useCheckStore()
 const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  sourceX: {
-    type: Number,
-    required: true,
-  },
-  sourceY: {
-    type: Number,
-    required: true,
-  },
-  targetX: {
-    type: Number,
-    required: true,
-  },
-  targetY: {
-    type: Number,
-    required: true,
-  },
-  sourcePosition: {
-    type: String,
-    required: true,
-  },
-  targetPosition: {
-    type: String,
-    required: true,
-  },
-  markerEnd: {
-    type: String,
-    required: false,
-  },
-  style: {
-    type: Object,
-    required: false,
-  },
+    id: {
+        type: String,
+        required: true
+    },
+    sourceX: {
+        type: Number,
+        required: true
+    },
+    sourceY: {
+        type: Number,
+        required: true
+    },
+    targetX: {
+        type: Number,
+        required: true
+    },
+    targetY: {
+        type: Number,
+        required: true
+    },
+    sourcePosition: {
+        type: String,
+        required: true
+    },
+    targetPosition: {
+        type: String,
+        required: true
+    },
+    markerEnd: {
+        type: String,
+        required: false
+    },
+    style: {
+        type: Object,
+        required: false
+    }
 })
 
 const { removeEdges } = useVueFlow()
 
 const path = computed(() => getBezierPath(props))
+const edgeStyle = computed(() => ({
+    ...props.style,
+    strokeWidth: 3
+}))
 </script>
 
 <script>
 export default {
-  inheritAttrs: false,
+    inheritAttrs: false
 }
 </script>
 
 <template>
-  <BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
-  <EdgeLabelRenderer>
-    <div
-      :style="{
-        pointerEvents: 'all',
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
-      }"
-      class="nodrag nopan"
-    >
-      <el-popconfirm 
-        title="确定要删除这条连线吗？" 
-        @confirm="removeEdges(id)"
-      >
-        <template #reference>
-          <el-icon class="edge-icon"><Delete/></el-icon>
-        </template>
-      </el-popconfirm>
-    </div>
-  </EdgeLabelRenderer>
+    <BaseEdge :id="id" :style="edgeStyle" :path="path[0]" :marker-end="markerEnd" />
+    <EdgeLabelRenderer>
+        <div
+            :style="{
+                pointerEvents: 'all',
+                position: 'absolute',
+                transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
+            }"
+            class="nodrag nopan"
+        >
+            <el-popconfirm v-if="checkStore.nodesConnectable" title="确定要删除这条连线吗？" @confirm="removeEdges(id)">
+                <template #reference>
+                    <el-icon class="edge-icon"><Delete /></el-icon>
+                </template>
+            </el-popconfirm>
+        </div>
+    </EdgeLabelRenderer>
 </template>
 <style scoped>
 .edge-icon {
-  background: white;
-  border-radius: 50%;
-  padding: 2px;
-  cursor: pointer;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    background: white;
+    border-radius: 50%;
+    padding: 2px;
+    cursor: pointer;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 }
 </style>