From 6dea1ef9b2ffb2aadc98f64e784dcfc60ed2b6ba 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, 18 Jul 2024 15:18:44 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=A4=96=E6=A1=86=E5=86=85=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lang/en_us.js                       |  3 +-
 web/src/lang/zh_cn.js                       |  3 +-
 web/src/pages/Edit/components/BaseStyle.vue | 61 ++++++++++++++++++++-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 4606f804..1ee51a2b 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -65,7 +65,8 @@ export default {
     center: 'Center',
     edge: 'Edge',
     rainbowLines: 'Rainbow lines',
-    notUseRainbowLines: 'Not use rainbow lines'
+    notUseRainbowLines: 'Not use rainbow lines',
+    outerFramePadding: 'Outer frame padding'
   },
   color: {
     moreColor: 'More color'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 0ffec9cc..4c8b26ca 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -65,7 +65,8 @@ export default {
     center: '中心',
     edge: '边缘',
     rainbowLines: '彩虹线条',
-    notUseRainbowLines: '不使用彩虹线条'
+    notUseRainbowLines: '不使用彩虹线条',
+    outerFramePadding: '外框内边距'
   },
   color: {
     moreColor: '更多颜色'
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 818a4739..bad63318 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -813,6 +813,36 @@
           </div>
         </div>
       </template>
+      <!-- 外框内边距 -->
+      <div class="title noTop">{{ $t('baseStyle.outerFramePadding') }}</div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.horizontal') }}</span>
+          <el-slider
+            style="width: 200px"
+            v-model="outerFramePadding.outerFramePaddingX"
+            @change="
+              value => {
+                updateOuterFramePadding('outerFramePaddingX', value)
+              }
+            "
+          ></el-slider>
+        </div>
+      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.horizontal') }}</span>
+          <el-slider
+            style="width: 200px"
+            v-model="outerFramePadding.outerFramePaddingY"
+            @change="
+              value => {
+                updateOuterFramePadding('outerFramePaddingY', value)
+              }
+            "
+          ></el-slider>
+        </div>
+      </div>
       <!-- 其他配置 -->
       <div class="title noTop">{{ $t('baseStyle.otherConfig') }}</div>
       <!-- 配置开启自由拖拽 -->
@@ -1058,7 +1088,11 @@ export default {
         isShowScrollbar: false,
         isUseHandDrawnLikeStyle: false
       },
-      currentLayout: '' // 当前结构
+      currentLayout: '', // 当前结构
+      outerFramePadding: {
+        outerFramePaddingX: 0,
+        outerFramePaddingY: 0
+      }
     }
   },
   computed: {
@@ -1129,6 +1163,7 @@ export default {
         this.initConfig()
         this.initWatermark()
         this.initRainbowLines()
+        this.initOuterFramePadding()
         this.currentLayout = this.mindMap.getLayout()
       } else {
         this.$refs.sidebar.show = false
@@ -1250,6 +1285,16 @@ export default {
         : null
     },
 
+    // 外框
+    initOuterFramePadding() {
+      this.outerFramePadding.outerFramePaddingX = this.mindMap.getConfig(
+        'outerFramePaddingX'
+      )
+      this.outerFramePadding.outerFramePaddingY = this.mindMap.getConfig(
+        'outerFramePaddingX'
+      )
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:27:32
@@ -1338,6 +1383,20 @@ export default {
       })
     },
 
+    // 更新外框
+    updateOuterFramePadding(prop, value) {
+      this.outerFramePadding[prop] = value
+      this.data.config = this.data.config || {}
+      this.data.config[prop] = value
+      this.mindMap.updateConfig({
+        [prop]: value
+      })
+      storeConfig({
+        config: this.data.config
+      })
+      this.mindMap.render()
+    },
+
     // 设置margin
     updateMargin(type, value) {
       this.style[type] = value