新增禅模式

2026-02-17 22:08:25 +08:00 · 2022-11-14 19:25:25 +08:00
parent c31a67e7bd
commit fea7d32c97
10 changed files with 172 additions and 27 deletions
--- 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
+}
--- 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',
--- 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: '字数',
--- 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>
--- 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
--- 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
--- 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()
--- 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
--- 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
--- 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: {