新增禅模式

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
+}

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',

web/src/lang/zh_cn.js

@@ -43,7 +43,8 @@ export default {
     level3: '三级主题',
     level4: '四级主题',
     level5: '五级主题',
-    level6: '六级主题'
+    level6: '六级主题',
+    zenMode: '禅模式'
   },
   count: {
     words: '字数',

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>

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

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

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()

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

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

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: {