From 4e1db01f4402ad003907ff51b8f08358543af2c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Thu, 24 Oct 2024 09:20:34 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E5=A2=9E=E5=8A=A0=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=A0=87=E7=AD=BE=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lang/en_us.js                     |  5 +-
 web/src/lang/zh_cn.js                     |  5 +-
 web/src/lang/zh_tw.js                     |  5 +-
 web/src/pages/Edit/components/Setting.vue | 89 ++++++++++++++---------
 4 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 3301fd1d..fe01ddec 100644
--- a/web/src/lang/en_us.js
+++ b/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'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index bce021f8..afc71bdd 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -70,7 +70,10 @@ export default {
     watermarkAngle: '旋转角度',
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '文字字号',
-    belowNode: '显示在节点下方'
+    belowNode: '显示在节点下方',
+    tagPosition: '节点标签显示的位置',
+    tagPositionRight: '文本右侧',
+    tagPositionBottom: '文本下面'
   },
   color: {
     moreColor: '更多颜色'
diff --git a/web/src/lang/zh_tw.js b/web/src/lang/zh_tw.js
index 78d30e9f..8785a8bf 100644
--- a/web/src/lang/zh_tw.js
+++ b/web/src/lang/zh_tw.js
@@ -40,7 +40,10 @@ export default {
     edge: '邊緣',
     rainbowLines: '彩虹線條',
     notUseRainbowLines: '不使用彩虹線條',
-    outerFramePadding: '外框內距'
+    outerFramePadding: '外框內距',
+    tagPosition: '節點標簽顯示的位置',
+    tagPositionRight: '文本右側',
+    tagPositionBottom: '文本下面'
   },
   setting: {
     title: '設置',
diff --git a/web/src/pages/Edit/components/Setting.vue b/web/src/pages/Edit/components/Setting.vue
index 9b31c951..436fe985 100644
--- a/web/src/pages/Edit/components/Setting.vue
+++ b/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()
+      }
     },
 
     // 更新水印配置