Demo: update

web/src/pages/Edit/components/NodeAnnotationBtn.vue

@@ -91,8 +91,10 @@
       slot="reference"
       class="toolbarBtn"
       :style="{
-        marginLeft: dir === 'v' ? '0px' : '20px',
+        marginLeft: dir === 'v' || rightHasBtn ? '0px' : '20px',
-        marginTop: dir === 'v' ? '10px' : '0px'
+        marginTop: dir === 'v' ? '10px' : '0px',
+        marginRight: rightHasBtn ? '20px' : '0px',
+        marginBottom: dir === 'v' && rightHasBtn ? '10px' : '0px'
       }"
       :class="{
         disabled: activeNodes.length <= 0 || hasGeneralization
@@ -128,6 +130,10 @@ export default {
     dir: {
       type: String,
       default: ''
+    },
+    rightHasBtn: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

web/src/pages/Edit/components/ToolbarNodeBtnList.vue

@@ -182,6 +182,7 @@
         v-if="item === 'annotation' && supportMark"
         :isDark="isDark"
         :dir="dir"
+        :rightHasBtn="annotationRightHasBtn"
         @setAnnotation="onSetAnnotation"
       ></NodeAnnotationBtn>
       <div
@@ -246,6 +247,12 @@ export default {
           return node.isGeneralization
         }) !== -1
       )
+    },
+    annotationRightHasBtn() {
+      const index = this.list.findIndex(item => {
+        return item === 'annotation'
+      })
+      return index !== -1 && index < this.list.length - 1
     }
   },
   created() {