refactor: 优化箭头展示，并适配屏幕变化

fe/src/components/NLP/rel.vue

@@ -2,12 +2,12 @@
   <div class="rel-box">
     <svg v-for="(relLine, idx) in relLines" :key="idx" class="rel"
         xmlns="http://www.w3.org/2000/svg" version="1.1" >
-      <marker id="arrow" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
+      <marker id="arrow" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
         <path d="M2,2 L10,6 L2,10 L6,6 L2,2" :style="`fill:${types[relDetails[idx]['type']]['color']}`"/>
       </marker>
       <path :d="relLine"
         :title="relDetails[idx]['type']"
-        :style="`stroke:${types[relDetails[idx]['type']]['color']};stroke-width:2;fill:#0000;marker-end:url(#arrow)`"
+        :style="`stroke:${types[relDetails[idx]['type']]['color']};stroke-width:3;fill:#0000;marker-end:url(#arrow)`"
         @contextmenu="delRel($event, idx)"
       />
     </svg>
@@ -15,7 +15,6 @@
 </template>
 
 <script>
-
 export default ({
   name: 'Rel',
   props: {
@@ -53,11 +52,12 @@ export default ({
       e.preventDefault()
       this.relDetails.splice(idx, 1)
       this.save()
-    }
     },
-  watch: {
-    relDetails: {
-      handler (val) {
+    calRelLines (val) {
+      console.log('21341234');
+      if (!val) {
+        val = this.relDetails
+      }
       console.log(this.types)
       let _relLines = []
       for (let i = 0; i < val.length; i++) {
@@ -74,6 +74,12 @@ export default ({
       }
       console.log(_relLines)
       this.relLines = _relLines
+    }
+  },
+  watch: {
+    relDetails: {
+      handler (val) {
+        this.calRelLines(val)
       },
       deep: true
     },
@@ -81,6 +87,12 @@ export default ({
       handler (val) {
       }
     }
+  },
+  mounted () {
+    let that = this
+    window.onresize = function () {
+      that.calRelLines()
+    }
   }
 })
 </script>
@@ -101,4 +113,8 @@ export default ({
     pointer-events: all;
     cursor: pointer;
   }
+  .rel:hover {
+    /* 抬起来一些 */
+    opacity: 0.5;
+  }
 </style>