diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue index e7076c58..fba1c53f 100644 --- a/src/components/core/d2-layout-main/index.vue +++ b/src/components/core/d2-layout-main/index.vue @@ -77,11 +77,11 @@ export default { }, mounted () { // 加载主题 - this.d2adminThemeLoadFromLo() + this.d2adminThemeLoad() }, methods: { ...mapMutations([ - 'd2adminThemeLoadFromLo' + 'd2adminThemeLoad' ]) } } diff --git a/src/libs/util.js b/src/libs/util.js index 0e8ce5ae..6f291574 100644 --- a/src/libs/util.js +++ b/src/libs/util.js @@ -1,5 +1,14 @@ +import Cookies from 'js-cookie' + let util = {} +/** + * 得到现在的用户 + */ +util.uuid = function () { + return Cookies.get('uuid') +} + /** * 打开全屏 */ diff --git a/src/store/index.js b/src/store/index.js index a83f88d3..66c6f3f7 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -3,13 +3,10 @@ import Vuex from 'vuex' import d2admin from './modules/d2admin' -import theme from './modules/theme' - Vue.use(Vuex) export default new Vuex.Store({ modules: { - d2admin, - theme + d2admin } }) diff --git a/src/store/modules/d2admin.js b/src/store/modules/d2admin.js index 3a6d62ab..60fe8c78 100644 --- a/src/store/modules/d2admin.js +++ b/src/store/modules/d2admin.js @@ -1,15 +1,11 @@ import util from '@/libs/util.js' - -import themeList from '@/assets/style/theme/list.js' - import db from '@/libs/db.js' +import themeList from '@/assets/style/theme/list.js' export default { state: { // 系统 appName: 'D2Admin', - // 用户 - userId: '', // 全屏 isFullScreen: false, // 主题 @@ -31,19 +27,43 @@ export default { } }, /** - * 激活新的主题 + * 激活一个主题(应用到dom上) * @param {state} state vuex state + * @param {string} themeActiveValue 需要激活的主题名称 */ d2adminThemeSet (state, themeActiveValue) { - console.log('d2adminThemeSet', themeActiveValue) + // 从列表里找到需要激活的主题的数据 + const theme = state.themeList.find(e => e.value === themeActiveValue) + // 设置 state + state.themeActive = theme + // 设置 dom + document.body.className = `theme-${state.themeActive.value}` + // 保存到数据库 + this.commit('d2adminThemeSave', themeActiveValue) }, /** - * 从本地加载主题设置 + * 从数据库加载主题设置 * @param {state} state vuex state */ - d2adminThemeLoadFromLo (state) { - console.log(db.get('themeActive').find({name: 'hhh'}).value()) - // db.get('themeActive').push({name: 'hhh'}).write() + d2adminThemeLoad (state) { + const themeActive = db.get('themeActive').find({uuid: util.uuid()}).value() + this.commit('d2adminThemeSet', themeActive ? themeActive.value : state.themeList[0].value) + }, + /** + * 向数据保存一个主题 + * @param {state} state vuex state + * @param {string} themeActiveValue 需要保存的主题名称 + */ + d2adminThemeSave (state, themeActiveValue) { + const setting = db.get('themeActive').find({uuid: util.uuid()}) + if (setting.value()) { + setting.assign({value: themeActiveValue}).write() + } else { + db.get('themeActive').push({ + uuid: util.uuid(), + value: themeActiveValue + }).write() + } } } } diff --git a/src/store/modules/theme.js b/src/store/modules/theme.js deleted file mode 100644 index 4d26856a..00000000 --- a/src/store/modules/theme.js +++ /dev/null @@ -1,72 +0,0 @@ -import Cookies from 'js-cookie' - -export default { - state: { - list: [ - { - name: 'd2admin 经典', - value: 'd2', - preview: 'static/image/theme/d2/preview@2x.png' - }, - { - name: '紫罗兰', - value: 'violet', - preview: 'static/image/theme/violet/preview@2x.png' - }, - { - name: '简约线条', - value: 'line', - backgroundImage: 'static/image/bg/line-squashed.jpg', - preview: 'static/image/theme/line/preview@2x.png' - }, - { - name: '流星', - value: 'star', - backgroundImage: 'static/image/bg/star-squashed.jpg', - preview: 'static/image/theme/star/preview@2x.png' - }, - { - name: 'Tomorrow Night Blue (vsCode)', - value: 'tomorrow-night-blue', - preview: 'static/image/theme/tomorrow-night-blue/preview@2x.png' - } - ], - name: '', - backGroundImage: '' - }, - mutations: { - // 从 cookie 加载主题 - loadTheme (state) { - const name = Cookies.get('themeName') - if (name) { - // 设置 store - state.name = name - // 激活主题 - this.commit('activeTheme') - } else { - // 设置新的主题为列表第一项 - this.commit('setTheme', state.list[0].value) - } - }, - // 设置新的主题 - setTheme (state, name) { - // 设置 store - state.name = name - // 设置 Cookie - Cookies.set('themeName', name, { - expires: 365 - }) - // 激活主题 - this.commit('activeTheme') - }, - // 激活当前主题 - activeTheme (state) { - // 设置背景图片 - const themeSetting = state.list.find(e => e.value === state.name) - if (themeSetting) { - state.backGroundImage = themeSetting.backgroundImage || '' - } - document.body.className = `theme-${state.name}` - } - } -}