Demo：支持配置外框内边距

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'

web/src/lang/zh_cn.js

@@ -65,7 +65,8 @@ export default {
     center: '中心',
     edge: '边缘',
     rainbowLines: '彩虹线条',
-    notUseRainbowLines: '不使用彩虹线条'
+    notUseRainbowLines: '不使用彩虹线条',
+    outerFramePadding: '外框内边距'
   },
   color: {
     moreColor: '更多颜色'

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