From cdc5c7aa81458df7742deafaf13859099aeee600 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Mon, 26 Feb 2024 16:50:00 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E4=BF=AE=E6=94=B9=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=92=8C=E6=9A=97=E8=89=B2=E7=9A=84=E5=85=B3=E8=81=94?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/Index.vue | 2 +- web/src/pages/Edit/components/BaseStyle.vue | 6 +++++- web/src/pages/Edit/components/Color.vue | 4 +++- web/src/pages/Edit/components/Contextmenu.vue | 2 +- web/src/pages/Edit/components/Count.vue | 4 +++- web/src/pages/Edit/components/Export.vue | 2 +- web/src/pages/Edit/components/FormulaSidebar.vue | 6 +++++- web/src/pages/Edit/components/Navigator.vue | 4 +++- web/src/pages/Edit/components/NavigatorToolbar.vue | 11 ++++++++--- web/src/pages/Edit/components/NodeIconSidebar.vue | 5 ++++- web/src/pages/Edit/components/Outline.vue | 5 ++++- web/src/pages/Edit/components/OutlineEdit.vue | 6 +++++- web/src/pages/Edit/components/OutlineSidebar.vue | 6 +++++- web/src/pages/Edit/components/RichTextToolbar.vue | 4 +++- web/src/pages/Edit/components/Scrollbar.vue | 4 +++- web/src/pages/Edit/components/Search.vue | 5 ++++- web/src/pages/Edit/components/ShortcutKey.vue | 5 ++++- web/src/pages/Edit/components/Sidebar.vue | 4 +++- web/src/pages/Edit/components/SidebarTrigger.vue | 5 ++++- web/src/pages/Edit/components/Structure.vue | 5 ++++- web/src/pages/Edit/components/Style.vue | 5 ++++- web/src/pages/Edit/components/Theme.vue | 13 ++++++++----- web/src/pages/Edit/components/Toolbar.vue | 5 ++++- .../pages/Edit/components/ToolbarNodeBtnList.vue | 4 +++- web/src/store.js | 10 +++------- 25 files changed, 95 insertions(+), 37 deletions(-) diff --git a/web/src/pages/Edit/Index.vue b/web/src/pages/Edit/Index.vue index c33dde73..5590a0da 100644 --- a/web/src/pages/Edit/Index.vue +++ b/web/src/pages/Edit/Index.vue @@ -30,7 +30,7 @@ export default { computed: { ...mapState({ isZenMode: state => state.localConfig.isZenMode, - isDark: state => state.isDark, + isDark: state => state.localConfig.isDark, activeSidebar: state => state.activeSidebar }) }, diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 4bf7e056..3fc5be0c 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -1004,7 +1004,11 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'localConfig', 'isDark']), + ...mapState({ + activeSidebar: state => state.activeSidebar, + localConfig: state => state.localConfig, + isDark: state => state.localConfig.isDark + }), lineStyleList() { return lineStyleList[this.$i18n.locale] || lineStyleList.zh }, diff --git a/web/src/pages/Edit/components/Color.vue b/web/src/pages/Edit/components/Color.vue index bd81deb9..c2faf0dc 100644 --- a/web/src/pages/Edit/components/Color.vue +++ b/web/src/pages/Edit/components/Color.vue @@ -45,7 +45,9 @@ export default { } }, computed: { - ...mapState(['isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark + }) }, watch: { color() { diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue index 3cbf4858..42934637 100644 --- a/web/src/pages/Edit/components/Contextmenu.vue +++ b/web/src/pages/Edit/components/Contextmenu.vue @@ -167,7 +167,7 @@ export default { computed: { ...mapState({ isZenMode: state => state.localConfig.isZenMode, - isDark: state => state.isDark + isDark: state => state.localConfig.isDark }), expandList() { return [ diff --git a/web/src/pages/Edit/components/Count.vue b/web/src/pages/Edit/components/Count.vue index 0c276aba..ba62345e 100644 --- a/web/src/pages/Edit/components/Count.vue +++ b/web/src/pages/Edit/components/Count.vue @@ -36,7 +36,9 @@ export default { } }, computed: { - ...mapState(['isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark + }), }, created() { this.$bus.$on('data_change', this.onDataChange) diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue index 726c47db..272adb69 100644 --- a/web/src/pages/Edit/components/Export.vue +++ b/web/src/pages/Edit/components/Export.vue @@ -113,7 +113,7 @@ export default { computed: { ...mapState({ openNodeRichText: state => state.localConfig.openNodeRichText, - isDark: state => state.isDark + isDark: state => state.localConfig.isDark }), downTypeList() { diff --git a/web/src/pages/Edit/components/FormulaSidebar.vue b/web/src/pages/Edit/components/FormulaSidebar.vue index 79925695..c6e1140d 100644 --- a/web/src/pages/Edit/components/FormulaSidebar.vue +++ b/web/src/pages/Edit/components/FormulaSidebar.vue @@ -53,7 +53,11 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isDark', 'localConfig']) + ...mapState({ + activeSidebar: state => state.activeSidebar, + isDark: state => state.localConfig.isDark, + localConfig: state => state.localConfig + }) }, watch: { activeSidebar(val) { diff --git a/web/src/pages/Edit/components/Navigator.vue b/web/src/pages/Edit/components/Navigator.vue index 0a8d8dbc..5b8827c1 100644 --- a/web/src/pages/Edit/components/Navigator.vue +++ b/web/src/pages/Edit/components/Navigator.vue @@ -54,7 +54,9 @@ export default { } }, computed: { - ...mapState(['isDark']) + ...mapState({ + isDark: state => state.localConfig.isDark + }) }, mounted() { this.setSize() diff --git a/web/src/pages/Edit/components/NavigatorToolbar.vue b/web/src/pages/Edit/components/NavigatorToolbar.vue index 2ac228aa..819c79c4 100644 --- a/web/src/pages/Edit/components/NavigatorToolbar.vue +++ b/web/src/pages/Edit/components/NavigatorToolbar.vue @@ -132,13 +132,16 @@ export default { } }, computed: { - ...mapState(['isDark', 'isReadonly']) + ...mapState({ + isReadonly: state => state.isReadonly, + isDark: state => state.localConfig.isDark + }) }, created() { this.lang = getLang() }, methods: { - ...mapMutations(['setIsDark', 'setIsReadonly']), + ...mapMutations(['setLocalConfig', 'setIsReadonly']), readonlyChange() { this.setIsReadonly(!this.isReadonly) @@ -161,7 +164,9 @@ export default { }, toggleDark() { - this.setIsDark(!this.isDark) + this.setLocalConfig({ + isDark: !this.isDark + }) }, handleCommand(command) { diff --git a/web/src/pages/Edit/components/NodeIconSidebar.vue b/web/src/pages/Edit/components/NodeIconSidebar.vue index f4145466..6f6d3a23 100644 --- a/web/src/pages/Edit/components/NodeIconSidebar.vue +++ b/web/src/pages/Edit/components/NodeIconSidebar.vue @@ -78,7 +78,10 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isDark']) + ...mapState({ + activeSidebar: state => state.activeSidebar, + isDark: state => state.localConfig.isDark + }) }, watch: { activeSidebar(val) { diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue index a28b736c..279a27c5 100644 --- a/web/src/pages/Edit/components/Outline.vue +++ b/web/src/pages/Edit/components/Outline.vue @@ -70,7 +70,10 @@ export default { } }, computed: { - ...mapState(['isDark', 'isReadonly']) + ...mapState({ + isReadonly: state => state.isReadonly, + isDark: state => state.localConfig.isDark + }) }, created() { window.addEventListener('keydown', this.onKeyDown) diff --git a/web/src/pages/Edit/components/OutlineEdit.vue b/web/src/pages/Edit/components/OutlineEdit.vue index 6e53c92e..5c5471b6 100644 --- a/web/src/pages/Edit/components/OutlineEdit.vue +++ b/web/src/pages/Edit/components/OutlineEdit.vue @@ -77,7 +77,11 @@ export default { } }, computed: { - ...mapState(['isOutlineEdit', 'isDark', 'isReadonly']) + ...mapState({ + isReadonly: state => state.isReadonly, + isDark: state => state.localConfig.isDark, + isOutlineEdit: state => state.isOutlineEdit + }) }, watch: { isOutlineEdit(val) { diff --git a/web/src/pages/Edit/components/OutlineSidebar.vue b/web/src/pages/Edit/components/OutlineSidebar.vue index c79b5817..0f3f7779 100644 --- a/web/src/pages/Edit/components/OutlineSidebar.vue +++ b/web/src/pages/Edit/components/OutlineSidebar.vue @@ -33,7 +33,11 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isOutlineEdit', 'isDark']) + ...mapState({ + isDark: state => state.localConfig.isDark, + isOutlineEdit: state => state.isOutlineEdit, + activeSidebar: state => state.activeSidebar + }) }, watch: { activeSidebar(val) { diff --git a/web/src/pages/Edit/components/RichTextToolbar.vue b/web/src/pages/Edit/components/RichTextToolbar.vue index 8773f7bd..66bacb58 100644 --- a/web/src/pages/Edit/components/RichTextToolbar.vue +++ b/web/src/pages/Edit/components/RichTextToolbar.vue @@ -144,7 +144,9 @@ export default { } }, computed: { - ...mapState(['isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark + }), fontFamilyList() { return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh diff --git a/web/src/pages/Edit/components/Scrollbar.vue b/web/src/pages/Edit/components/Scrollbar.vue index 1aa28dd6..5fa2ebe2 100644 --- a/web/src/pages/Edit/components/Scrollbar.vue +++ b/web/src/pages/Edit/components/Scrollbar.vue @@ -47,7 +47,9 @@ export default { } }, computed: { - ...mapState(['isDark']) + ...mapState({ + isDark: state => state.localConfig.isDark + }) }, mounted() { this.setScrollBarWrapSize() diff --git a/web/src/pages/Edit/components/Search.vue b/web/src/pages/Edit/components/Search.vue index eb12101b..4285f1ae 100644 --- a/web/src/pages/Edit/components/Search.vue +++ b/web/src/pages/Edit/components/Search.vue @@ -78,7 +78,10 @@ export default { } }, computed: { - ...mapState(['isDark', 'isReadonly']) + ...mapState({ + isReadonly: state => state.isReadonly, + isDark: state => state.localConfig.isDark + }) }, watch: { searchText() { diff --git a/web/src/pages/Edit/components/ShortcutKey.vue b/web/src/pages/Edit/components/ShortcutKey.vue index 61d3a6d0..70a81545 100644 --- a/web/src/pages/Edit/components/ShortcutKey.vue +++ b/web/src/pages/Edit/components/ShortcutKey.vue @@ -38,7 +38,10 @@ export default { return {} }, computed: { - ...mapState(['activeSidebar', 'isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark, + activeSidebar: state => state.activeSidebar + }), shortcutKeyList() { return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh diff --git a/web/src/pages/Edit/components/Sidebar.vue b/web/src/pages/Edit/components/Sidebar.vue index 33ced970..c8938a45 100644 --- a/web/src/pages/Edit/components/Sidebar.vue +++ b/web/src/pages/Edit/components/Sidebar.vue @@ -39,7 +39,9 @@ export default { } }, computed: { - ...mapState(['isDark']) + ...mapState({ + isDark: state => state.localConfig.isDark + }) }, watch: { show(val, oldVal) { diff --git a/web/src/pages/Edit/components/SidebarTrigger.vue b/web/src/pages/Edit/components/SidebarTrigger.vue index 965e8dcc..d5f5711c 100644 --- a/web/src/pages/Edit/components/SidebarTrigger.vue +++ b/web/src/pages/Edit/components/SidebarTrigger.vue @@ -39,7 +39,10 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark, + activeSidebar: state => state.activeSidebar + }), triggerList() { return sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh diff --git a/web/src/pages/Edit/components/Structure.vue b/web/src/pages/Edit/components/Structure.vue index 3e7ed40f..93c11d2c 100644 --- a/web/src/pages/Edit/components/Structure.vue +++ b/web/src/pages/Edit/components/Structure.vue @@ -47,7 +47,10 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isDark']) + ...mapState({ + isDark: state => state.localConfig.isDark, + activeSidebar: state => state.activeSidebar + }) }, watch: { activeSidebar(val) { diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue index e4163db0..807d1f74 100644 --- a/web/src/pages/Edit/components/Style.vue +++ b/web/src/pages/Edit/components/Style.vue @@ -507,7 +507,10 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark, + activeSidebar: state => state.activeSidebar + }), fontFamilyList() { return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue index 7d744d54..539b4d23 100644 --- a/web/src/pages/Edit/components/Theme.vue +++ b/web/src/pages/Edit/components/Theme.vue @@ -58,7 +58,10 @@ export default { } }, computed: { - ...mapState(['activeSidebar', 'isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark, + activeSidebar: state => state.activeSidebar + }), currentList() { return this.groupList.find(item => { @@ -70,7 +73,6 @@ export default { activeSidebar(val) { if (val === 'theme') { this.theme = this.mindMap.getTheme() - this.handleDark() this.$refs.sidebar.show = true } else { this.$refs.sidebar.show = false @@ -80,14 +82,13 @@ export default { created() { this.initGroup() this.theme = this.mindMap.getTheme() - this.handleDark() this.mindMap.on('view_theme_change', this.handleViewThemeChange) }, beforeDestroy() { this.mindMap.off('view_theme_change', this.handleViewThemeChange) }, methods: { - ...mapMutations(['setIsDark']), + ...mapMutations(['setLocalConfig']), handleViewThemeChange() { this.theme = this.mindMap.getTheme() @@ -180,7 +181,9 @@ export default { let target = this.themeList.find(item => { return item.value === this.theme }) - this.setIsDark(target.dark) + this.setLocalConfig({ + isDark: target.dark + }) } } } diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue index d5d33a6e..0ea11401 100644 --- a/web/src/pages/Edit/components/Toolbar.vue +++ b/web/src/pages/Edit/components/Toolbar.vue @@ -116,7 +116,10 @@ export default { } }, computed: { - ...mapState(['isHandleLocalFile', 'isDark']) + ...mapState({ + isDark: state => state.localConfig.isDark, + isHandleLocalFile: state => state.isHandleLocalFile + }) }, watch: { isHandleLocalFile(val) { diff --git a/web/src/pages/Edit/components/ToolbarNodeBtnList.vue b/web/src/pages/Edit/components/ToolbarNodeBtnList.vue index 524c5227..3e9e2fb9 100644 --- a/web/src/pages/Edit/components/ToolbarNodeBtnList.vue +++ b/web/src/pages/Edit/components/ToolbarNodeBtnList.vue @@ -188,7 +188,9 @@ export default { } }, computed: { - ...mapState(['isDark']), + ...mapState({ + isDark: state => state.localConfig.isDark + }), hasRoot() { return ( this.activeNodes.findIndex(node => { diff --git a/web/src/store.js b/web/src/store.js index 2e6bb3b4..3f035dec 100644 --- a/web/src/store.js +++ b/web/src/store.js @@ -19,10 +19,11 @@ const store = new Vuex.Store({ // 是否显示滚动条 isShowScrollbar: false, // 是否开启手绘风格 - isUseHandDrawnLikeStyle: false + isUseHandDrawnLikeStyle: false, + // 是否是暗黑模式 + isDark: false, }, activeSidebar: '', // 当前显示的侧边栏 - isDark: false, // 是否是暗黑模式 isOutlineEdit: false, // 是否是大纲编辑模式 isReadonly: false // 是否只读 }, @@ -51,11 +52,6 @@ const store = new Vuex.Store({ state.activeSidebar = data }, - // 设置暗黑模式 - setIsDark(state, data) { - state.isDark = data - }, - // 设置大纲编辑模式 setIsOutlineEdit(state, data) { state.isOutlineEdit = data