From 1b2da4eb726a0a152ed5953b2fcd3f1175df5e1c Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Mon, 14 Nov 2022 19:25:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=A6=85=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/index.js                          | 25 +++++++++
 web/src/lang/en_us.js                         |  3 +-
 web/src/lang/zh_cn.js                         |  3 +-
 web/src/pages/Edit/Index.vue                  | 29 ++++++++--
 web/src/pages/Edit/components/Contextmenu.vue | 16 ++++++
 web/src/pages/Edit/components/Count.vue       | 18 +++++--
 web/src/pages/Edit/components/Edit.vue        | 12 +++--
 web/src/pages/Edit/components/Style.vue       | 18 +++++--
 web/src/pages/Edit/components/Toolbar.vue     | 54 +++++++++++++++----
 web/src/store.js                              | 21 +++++++-
 10 files changed, 172 insertions(+), 27 deletions(-)

diff --git a/web/src/api/index.js b/web/src/api/index.js
index db1ad0a7..b36ffddd 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -4,6 +4,7 @@ import Vue from 'vue'
 
 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
 const SIMPLE_MIND_MAP_LANG = 'SIMPLE_MIND_MAP_LANG'
+const SIMPLE_MIND_MAP_LOCAL_CONFIG = 'SIMPLE_MIND_MAP_LOCAL_CONFIG'
 
 /**
  * @Author: 王林
@@ -101,3 +102,27 @@ export const getLang = () => {
   storeLang('zh')
   return 'zh'
 }
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-11-14 18:57:31
+ * @Desc: 存储本地配置
+ */
+export const storeLocalConfig = config => {
+  localStorage.setItem(SIMPLE_MIND_MAP_LOCAL_CONFIG, JSON.stringify(config))
+}
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-11-14 18:57:37
+ * @Desc: 获取本地配置
+ */
+export const getLocalConfig = () => {
+  let config = localStorage.getItem(SIMPLE_MIND_MAP_LOCAL_CONFIG)
+  if (config) {
+    return JSON.parse(config)
+  }
+  return null
+}
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 835e8493..748b4c52 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -43,7 +43,8 @@ export default {
     level3: 'Level3',
     level4: 'Level4',
     level5: 'Level5',
-    level6: 'Level6'
+    level6: 'Level6',
+    zenMode: 'Zen mode'
   },
   count: {
     words: 'Words',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 213df682..3253f74e 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -43,7 +43,8 @@ export default {
     level3: '三级主题',
     level4: '四级主题',
     level5: '五级主题',
-    level6: '六级主题'
+    level6: '六级主题',
+    zenMode: '禅模式'
   },
   count: {
     words: '字数',
diff --git a/web/src/pages/Edit/Index.vue b/web/src/pages/Edit/Index.vue
index 3691b8d3..96091a77 100644
--- a/web/src/pages/Edit/Index.vue
+++ b/web/src/pages/Edit/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <template v-if="show">
-      <Toolbar></Toolbar>
+      <Toolbar v-if="!isZenMode"></Toolbar>
       <Edit></Edit>
     </template>
   </div>
@@ -10,7 +10,8 @@
 <script>
 import Toolbar from './components/Toolbar'
 import Edit from './components/Edit'
-import { mapActions } from 'vuex'
+import { mapState, mapActions, mapMutations } from 'vuex'
+import { getLocalConfig } from '@/api'
 
 export default {
   name: 'Index',
@@ -23,7 +24,13 @@ export default {
       show: false
     }
   },
+  computed: {
+    ...mapState({
+      isZenMode: state => state.localConfig.isZenMode
+    })
+  },
   async created() {
+    this.initLocalConfig()
     const loading = this.$loading({
       lock: true,
       text: '正在加载，请稍后...'
@@ -33,7 +40,23 @@ export default {
     loading.close()
   },
   methods: {
-    ...mapActions(['getUserMindMapData'])
+    ...mapActions(['getUserMindMapData']),
+    ...mapMutations(['setLocalConfig']),
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:07:03
+     * @Desc: 初始化本地配置
+     */
+    initLocalConfig() {
+      let config = getLocalConfig()
+      if (config) {
+        this.setLocalConfig({
+          ...this.$store.state.localConfig,
+          ...config
+        })
+      }
+    }
   }
 }
 </script>
diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
index b1ec0a6f..efc16f47 100644
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -89,11 +89,17 @@
         {{ $t('contextmenu.arrangeLayout') }}
         <span class="desc">Ctrl + L</span>
       </div>
+      <div class="item" @click="exec('TOGGLE_ZEN_MODE')">
+        {{ $t('contextmenu.zenMode') }}
+        {{ isZenMode ? '√' : '' }}
+      </div>
     </template>
   </div>
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex'
+
 /**
  * @Author: 王林
  * @Date: 2021-06-24 22:53:10
@@ -120,6 +126,9 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      isZenMode: state => state.localConfig.isZenMode
+    }),
     expandList() {
       return [
         this.$t('contextmenu.level1'),
@@ -181,6 +190,8 @@ export default {
     this.mindMap.keyCommand.removeShortcut('Control+x', this.cut)
   },
   methods: {
+    ...mapMutations(['setLocalConfig']),
+
     /**
      * @Author: 王林
      * @Date: 2021-07-14 21:38:50
@@ -276,6 +287,11 @@ export default {
         case 'RETURN_CENTER':
           this.mindMap.view.reset()
           break
+        case 'TOGGLE_ZEN_MODE':
+          this.setLocalConfig({
+            isZenMode: !this.isZenMode
+          })
+          break
         default:
           this.$bus.$emit('execCommand', key, ...args)
           break
diff --git a/web/src/pages/Edit/components/Count.vue b/web/src/pages/Edit/components/Count.vue
index 310dc3a9..b7fb3755 100644
--- a/web/src/pages/Edit/components/Count.vue
+++ b/web/src/pages/Edit/components/Count.vue
@@ -27,13 +27,23 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('data_change', data => {
+    this.$bus.$on('data_change', this.onDataChange)
+  },
+  beforeDestroy() {
+    this.$bus.$off('data_change', this.onDataChange)
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:20:20
+     * @Desc: 监听数据变化
+     */
+    onDataChange(data) {
       this.words = 0
       this.num = 0
       this.walk(data)
-    })
-  },
-  methods: {
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-06-30 22:13:07
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 0219938a..2db78d76 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="editContainer">
     <div class="mindMapContainer" ref="mindMapContainer"></div>
-    <Count></Count>
+    <Count v-if="!isZenMode"></Count>
     <Navigator :mindMap="mindMap"></Navigator>
-    <NavigatorToolbar :mindMap="mindMap"></NavigatorToolbar>
+    <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
     <Outline></Outline>
-    <Style></Style>
+    <Style v-if="!isZenMode"></Style>
     <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
     <Theme :mindMap="mindMap"></Theme>
     <Structure :mindMap="mindMap"></Structure>
@@ -31,6 +31,7 @@ import NodeNoteContentShow from './NodeNoteContentShow.vue'
 import { getData, storeData, storeConfig } from '@/api'
 import Navigator from './Navigator.vue'
 import NodeImgPreview from './NodeImgPreview.vue'
+import { mapState } from 'vuex'
 
 /**
  * @Author: 王林
@@ -61,6 +62,11 @@ export default {
       openTest: false
     }
   },
+  computed: {
+    ...mapState({
+      isZenMode: state => state.localConfig.isZenMode
+    })
+  },
   mounted() {
     this.getData()
     this.init()
diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue
index a112cc53..a10f2861 100644
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -440,7 +440,18 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.onNodeActive)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.onNodeActive)
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:16:21
+     * @Desc: 监听节点激活事件
+     */
+    onNodeActive(...args) {
       if (this.$refs.sidebar) this.$refs.sidebar.show = false
       this.$nextTick(() => {
         this.activeTab = 'normal'
@@ -449,9 +460,8 @@ export default {
           this.$refs.sidebar.show = this.activeNodes.length > 0
         this.initNodeStyle()
       })
-    })
-  },
-  methods: {
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-05-05 11:42:32
diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue
index bdc6a66d..abb08640 100644
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -236,24 +236,58 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('mode_change', mode => {
+    this.$bus.$on('mode_change', this.onModeChange)
+    this.$bus.$on('node_active', this.onNodeActive)
+    this.$bus.$on('back_forward', this.onBackForward)
+    this.$bus.$on('write_local_file', this.onWriteLocalFile)
+  },
+  beforeDestroy() {
+    this.$bus.$off('mode_change', this.onModeChange)
+    this.$bus.$off('node_active', this.onNodeActive)
+    this.$bus.$off('back_forward', this.onBackForward)
+    this.$bus.$off('write_local_file', this.onWriteLocalFile)
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:17:40
+     * @Desc: 监听模式切换
+     */
+    onModeChange(mode) {
       this.readonly = mode === 'readonly'
-    })
-    this.$bus.$on('node_active', (...args) => {
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:18:06
+     * @Desc: 监听节点激活
+     */
+    onNodeActive(...args) {
       this.activeNodes = args[1]
-    })
-    this.$bus.$on('back_forward', (index, len) => {
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:18:31
+     * @Desc: 监听前进后退
+     */
+    onBackForward(index, len) {
       this.backEnd = index <= 0
       this.forwardEnd = index >= len - 1
-    })
-    this.$bus.$on('write_local_file', content => {
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:19:14
+     * @Desc: 监听本地文件读写
+     */
+    onWriteLocalFile(content) {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
         this.writeLocalFile(content)
       }, 1000)
-    })
-  },
-  methods: {
+    },
+
     /**
      * @Author: 王林
      * @Date: 2022-09-24 15:40:09
diff --git a/web/src/store.js b/web/src/store.js
index a6182062..1444ac2b 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -1,13 +1,18 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import exampleData from 'simple-mind-map/example/exampleData'
+import { storeLocalConfig } from '@/api'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
     mindMapData: null, // 思维导图数据
-    isHandleLocalFile: false // 是否操作的是本地文件
+    isHandleLocalFile: false, // 是否操作的是本地文件
+    localConfig: {
+      // 本地配置
+      isZenMode: false // 是否是禅模式
+    }
   },
   mutations: {
     /**
@@ -27,6 +32,20 @@ const store = new Vuex.Store({
      */
     setIsHandleLocalFile(state, data) {
       state.isHandleLocalFile = data
+    },
+
+    /**
+     * javascript comment
+     * @Author: 王林25
+     * @Date: 2022-11-14 18:42:47
+     * @Desc: 设置本地配置
+     */
+    setLocalConfig(state, data) {
+      state.localConfig = {
+        ...state.localConfig,
+        ...data
+      }
+      storeLocalConfig(state.localConfig)
     }
   },
   actions: {