Demo：增加节点标签显示位置的配置

web/src/lang/en_us.js

@@ -72,7 +72,10 @@ export default {
     watermarkAngle: 'Angle',
     watermarkTextOpacity: 'Text opacity',
     watermarkTextFontSize: 'Font size',
-    belowNode: 'Display below nodes'
+    belowNode: 'Display below nodes',
+    tagPosition: 'Node tag position',
+    tagPositionRight: 'Text right',
+    tagPositionBottom: 'Text bottom'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -70,7 +70,10 @@ export default {
     watermarkAngle: '旋转角度',
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '文字字号',
-    belowNode: '显示在节点下方'
+    belowNode: '显示在节点下方',
+    tagPosition: '节点标签显示的位置',
+    tagPositionRight: '文本右侧',
+    tagPositionBottom: '文本下面'
   },
   color: {
     moreColor: '更多颜色'

web/src/lang/zh_tw.js

@@ -40,7 +40,10 @@ export default {
     edge: '邊緣',
     rainbowLines: '彩虹線條',
     notUseRainbowLines: '不使用彩虹線條',
-    outerFramePadding: '外框內距'
+    outerFramePadding: '外框內距',
+    tagPosition: '節點標簽顯示的位置',
+    tagPositionRight: '文本右側',
+    tagPositionBottom: '文本下面'
   },
   setting: {
     title: '設置',

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

@@ -177,6 +177,38 @@
           >
         </div>
       </div>
+      <!-- 是否开启文本编辑时实时更新节点大小 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="config.openRealtimeRenderOnNodeTextEdit"
+            @change="
+              updateOtherConfig('openRealtimeRenderOnNodeTextEdit', $event)
+            "
+            >{{ $t('setting.openRealtimeRenderOnNodeTextEdit') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 是否显示滚动条 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isShowScrollbar"
+            @change="updateLocalConfig('isShowScrollbar', $event)"
+            >{{ $t('setting.isShowScrollbar') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 是否开启手绘风格 -->
+      <div class="row" v-if="supportHandDrawnLikeStyle">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isUseHandDrawnLikeStyle"
+            @change="updateLocalConfig('isUseHandDrawnLikeStyle', $event)"
+            >{{ $t('setting.isUseHandDrawnLikeStyle') }}</el-checkbox
+          >
+        </div>
+      </div>
       <!-- 配置鼠标滚轮行为 -->
       <div class="row">
         <div class="rowItem">
@@ -258,36 +290,30 @@
           </el-select>
         </div>
       </div>
-      <!-- 是否开启文本编辑时实时更新节点大小 -->
+      <!-- 标签显示的位置 -->
       <div class="row">
         <div class="rowItem">
-          <el-checkbox
-            v-model="config.openRealtimeRenderOnNodeTextEdit"
+          <span class="name">{{ $t('setting.tagPosition') }}</span>
+          <el-select
+            size="mini"
+            style="width: 120px"
+            v-model="config.tagPosition"
+            placeholder=""
             @change="
-              updateOtherConfig('openRealtimeRenderOnNodeTextEdit', $event)
+              value => {
+                updateOtherConfig('tagPosition', value)
+              }
             "
-            >{{ $t('setting.openRealtimeRenderOnNodeTextEdit') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 是否显示滚动条 -->
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="localConfigs.isShowScrollbar"
-            @change="updateLocalConfig('isShowScrollbar', $event)"
-            >{{ $t('setting.isShowScrollbar') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 是否开启手绘风格 -->
-      <div class="row" v-if="supportHandDrawnLikeStyle">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="localConfigs.isUseHandDrawnLikeStyle"
-            @change="updateLocalConfig('isUseHandDrawnLikeStyle', $event)"
-            >{{ $t('setting.isUseHandDrawnLikeStyle') }}</el-checkbox
           >
+            <el-option
+              :label="$t('setting.tagPositionRight')"
+              value="right"
+            ></el-option>
+            <el-option
+              :label="$t('setting.tagPositionBottom')"
+              value="bottom"
+            ></el-option>
+          </el-select>
         </div>
       </div>
     </div>
@@ -322,6 +348,7 @@ export default {
         mousewheelAction: 'zoom',
         mousewheelZoomActionReverse: false,
         createNewNodeBehavior: 'default',
+        tagPosition: 'right',
         openRealtimeRenderOnNodeTextEdit: true
       },
       watermarkConfig: {
@@ -373,14 +400,7 @@ export default {
 
     // 初始化其他配置
     initConfig() {
-      ;[
-        'openPerformance',
-        'enableFreeDrag',
-        'mousewheelAction',
-        'mousewheelZoomActionReverse',
-        'createNewNodeBehavior',
-        'openRealtimeRenderOnNodeTextEdit'
-      ].forEach(key => {
+      Object.keys(this.config).forEach(key => {
         this.config[key] = this.mindMap.getConfig(key)
       })
     },
@@ -417,6 +437,9 @@ export default {
       storeConfig({
         config: this.data.config
       })
+      if (key === 'tagPosition') {
+        this.mindMap.reRender()
+      }
     },
 
     // 更新水印配置