coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Demo：修改主题和暗色的关联逻辑

Browse Source
This commit is contained in:
街角小林 2024-02-26 16:50:00 +08:00
parent 9a8cd1dd24
commit cdc5c7aa81
25 changed files with 95 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/Edit/Index.vue
View File

@ -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
})
},

6
web/src/pages/Edit/components/BaseStyle.vue
View File

@ -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
},

4
web/src/pages/Edit/components/Color.vue
View File

@ -45,7 +45,9 @@ export default {
}
},
computed: {
...mapState(['isDark']),
...mapState({
isDark: state => state.localConfig.isDark
})
},
watch: {
color() {

2
web/src/pages/Edit/components/Contextmenu.vue
View File

@ -167,7 +167,7 @@ export default {
computed: {
...mapState({
isZenMode: state => state.localConfig.isZenMode,
isDark: state => state.isDark
isDark: state => state.localConfig.isDark
}),
expandList() {
return [

4
web/src/pages/Edit/components/Count.vue
View File

@ -36,7 +36,9 @@ export default {
}
},
computed: {
...mapState(['isDark']),
...mapState({
isDark: state => state.localConfig.isDark
}),
},
created() {
this.$bus.$on('data_change', this.onDataChange)

2
web/src/pages/Edit/components/Export.vue
View File

@ -113,7 +113,7 @@ export default {
computed: {
...mapState({
openNodeRichText: state => state.localConfig.openNodeRichText,
isDark: state => state.isDark
isDark: state => state.localConfig.isDark
}),
downTypeList() {

6
web/src/pages/Edit/components/FormulaSidebar.vue
View File

@ -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) {

4
web/src/pages/Edit/components/Navigator.vue
View File

@ -54,7 +54,9 @@ export default {
}
},
computed: {
...mapState(['isDark'])
...mapState({
isDark: state => state.localConfig.isDark
})
},
mounted() {
this.setSize()

11
web/src/pages/Edit/components/NavigatorToolbar.vue
View File

@ -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) {

5
web/src/pages/Edit/components/NodeIconSidebar.vue
View File

@ -78,7 +78,10 @@ export default {
}
},
computed: {
...mapState(['activeSidebar', 'isDark'])
...mapState({
activeSidebar: state => state.activeSidebar,
isDark: state => state.localConfig.isDark
})
},
watch: {
activeSidebar(val) {

5
web/src/pages/Edit/components/Outline.vue
View File

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

6
web/src/pages/Edit/components/OutlineEdit.vue
View File

@ -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) {

6
web/src/pages/Edit/components/OutlineSidebar.vue
View File

@ -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) {

4
web/src/pages/Edit/components/RichTextToolbar.vue
View File

@ -144,7 +144,9 @@ export default {
}
},
computed: {
...mapState(['isDark']),
...mapState({
isDark: state => state.localConfig.isDark
}),
fontFamilyList() {
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh

4
web/src/pages/Edit/components/Scrollbar.vue
View File

@ -47,7 +47,9 @@ export default {
}
},
computed: {
...mapState(['isDark'])
...mapState({
isDark: state => state.localConfig.isDark
})
},
mounted() {
this.setScrollBarWrapSize()

5
web/src/pages/Edit/components/Search.vue
View File

@ -78,7 +78,10 @@ export default {
}
},
computed: {
...mapState(['isDark', 'isReadonly'])
...mapState({
isReadonly: state => state.isReadonly,
isDark: state => state.localConfig.isDark
})
},
watch: {
searchText() {

5
web/src/pages/Edit/components/ShortcutKey.vue
View File

@ -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

4
web/src/pages/Edit/components/Sidebar.vue
View File

@ -39,7 +39,9 @@ export default {
}
},
computed: {
...mapState(['isDark'])
...mapState({
isDark: state => state.localConfig.isDark
})
},
watch: {
show(val, oldVal) {

5
web/src/pages/Edit/components/SidebarTrigger.vue
View File

@ -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

5
web/src/pages/Edit/components/Structure.vue
View File

@ -47,7 +47,10 @@ export default {
}
},
computed: {
...mapState(['activeSidebar', 'isDark'])
...mapState({
isDark: state => state.localConfig.isDark,
activeSidebar: state => state.activeSidebar
})
},
watch: {
activeSidebar(val) {

5
web/src/pages/Edit/components/Style.vue
View File

@ -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

13
web/src/pages/Edit/components/Theme.vue
View File

@ -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
})
}
}
}

5
web/src/pages/Edit/components/Toolbar.vue
View File

@ -116,7 +116,10 @@ export default {
}
},
computed: {
...mapState(['isHandleLocalFile', 'isDark'])
...mapState({
isDark: state => state.localConfig.isDark,
isHandleLocalFile: state => state.isHandleLocalFile
})
},
watch: {
isHandleLocalFile(val) {

4
web/src/pages/Edit/components/ToolbarNodeBtnList.vue
View File

@ -188,7 +188,9 @@ export default {
}
},
computed: {
...mapState(['isDark']),
...mapState({
isDark: state => state.localConfig.isDark
}),
hasRoot() {
return (
this.activeNodes.findIndex(node => {

10
web/src/store.js
View File

@ -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