From 32c17921caf3d2b8903ae69549582513ec60548e Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sat, 2 Sep 2023 08:31:08 +0800
Subject: [PATCH] =?UTF-8?q?Demo:=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
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 | 44 +++++++++++++++------
 web/src/pages/Edit/components/Edit.vue      |  5 ++-
 web/src/store.js                            |  4 +-
 5 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 5302cea9..f7548a76 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -50,7 +50,8 @@ export default {
     rootStyle: 'Root Node',
     associativeLineText: 'Associative line text',
     fontFamily: 'Font family',
-    fontSize: 'Font size'
+    fontSize: 'Font size',
+    isShowScrollbar: 'Is show scrollbar'
   },
   color: {
     moreColor: 'More color'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index dca9eb6e..2d2edf05 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -50,7 +50,8 @@ export default {
     rootStyle: '根节点',
     associativeLineText: '关联线文字',
     fontFamily: '字体',
-    fontSize: '字号'
+    fontSize: '字号',
+    isShowScrollbar: '是否显示滚动条'
   },
   color: {
     moreColor: '更多颜色'
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index d9705bf6..da5f0cde 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -753,6 +753,16 @@
           </el-select>
         </div>
       </div>
+      <!-- 是否显示滚动条 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isShowScrollbar"
+            @change="updateLocalConfig('isShowScrollbar', $event)"
+            >{{ $t('baseStyle.isShowScrollbar') }}</el-checkbox
+          >
+        </div>
+      </div>
     </div>
   </Sidebar>
 </template>
@@ -848,7 +858,10 @@ export default {
         }
       },
       updateWatermarkTimer: null,
-      enableNodeRichText: true
+      enableNodeRichText: true,
+      localConfigs: {
+        isShowScrollbar: false
+      }
     }
   },
   computed: {
@@ -894,9 +907,7 @@ export default {
     }
   },
   created() {
-    this.enableNodeRichText = this.localConfig.openNodeRichText
-    this.mousewheelAction = this.localConfig.mousewheelAction
-    this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
+    this.initLoacalConfig()
     this.$bus.$on('setData', this.onSetData)
   },
   beforeDestroy() {
@@ -963,6 +974,18 @@ export default {
       })
     },
 
+    // 初始化本地配置
+    initLoacalConfig() {
+      this.enableNodeRichText = this.localConfig.openNodeRichText
+      this.mousewheelAction = this.localConfig.mousewheelAction
+      this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
+      ;[
+        'isShowScrollbar'
+      ].forEach(key => {
+        this.localConfigs[key] = this.localConfig[key]
+      })
+    },
+
     // 初始化水印配置
     initWatermark() {
       let config = this.mindMap.getConfig('watermarkConfig')
@@ -1038,11 +1061,7 @@ export default {
       }, 300)
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-03 22:08:12
-     * @Desc: 设置margin
-     */
+    // 设置margin
     updateMargin(type, value) {
       this.style[type] = value
       if (!this.data.theme.config[this.marginActiveTab]) {
@@ -1078,12 +1097,11 @@ export default {
       })
     },
 
-    // 切换鼠标滚轮的行为
-    mousewheelActionChange(e) {
+    // 本地配置
+    updateLocalConfig(key, value) {
       this.setLocalConfig({
-        mousewheelAction: e
+        [key]: value
       })
-      this.mindMap.updateConfig
     }
   }
 }
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 15ff7891..6eb7d9db 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -22,7 +22,7 @@
     <NodeIconSidebar v-if="mindMap" :mindMap="mindMap"></NodeIconSidebar>
     <NodeIconToolbar v-if="mindMap" :mindMap="mindMap"></NodeIconToolbar>
     <OutlineEdit v-if="mindMap" :mindMap="mindMap"></OutlineEdit>
-    <!-- <Scrollbar v-if="mindMap" :mindMap="mindMap"></Scrollbar> -->
+    <Scrollbar v-if="isShowScrollbar && mindMap" :mindMap="mindMap"></Scrollbar>
   </div>
 </template>
 
@@ -138,7 +138,8 @@ export default {
       isZenMode: state => state.localConfig.isZenMode,
       openNodeRichText: state => state.localConfig.openNodeRichText,
       useLeftKeySelectionRightKeyDrag: state =>
-        state.localConfig.useLeftKeySelectionRightKeyDrag
+        state.localConfig.useLeftKeySelectionRightKeyDrag,
+      isShowScrollbar: state => state.localConfig.isShowScrollbar
     })
   },
   watch: {
diff --git a/web/src/store.js b/web/src/store.js
index 160ce417..c9808b36 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -15,7 +15,9 @@ const store = new Vuex.Store({
       // 是否开启节点富文本
       openNodeRichText: true,
       // 鼠标行为
-      useLeftKeySelectionRightKeyDrag: false
+      useLeftKeySelectionRightKeyDrag: false,
+      // 是否显示滚动条
+      isShowScrollbar: false
     },
     activeSidebar: '', // 当前显示的侧边栏
     isDark: false,// 是否是暗黑模式