From 5f4abe14188a745f67ac3d61f6acc51649c7a24e Mon Sep 17 00:00:00 2001 From: rongxingsun Date: Fri, 7 Jun 2019 15:21:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=94=B9=E5=8F=98=E9=A2=9C?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 27b9dffa48083e7d9838f32b8981c30abfc951f0 [formerly 06cbe3b2364c0a802527426b9fb2945c79521492]]]]] Former-commit-id: 00c4123c1d7eb8c098d62f9d82c9fbe5286722bb Former-commit-id: 8a034bad24ce45a2180974bec4bb98aa22136872 Former-commit-id: c208536ddbb4a1ee18d0b4c6985e02ec857bdf52 [formerly 1651b96ca9070d2cd743063fafb83dd06b31403e] Former-commit-id: aec7f7119c7ac86d848dcb3226c4f018284a7470 Former-commit-id: ea29897c0709a4348a85161429003ba4405f59aa Former-commit-id: 5161b39309ce5c69a4ba3ea37ad85b6bbbab258b Former-commit-id: 0804b0bb33ea9e286fbde79c834e97952e86d63d Former-commit-id: 487a27193d189c11d12a79d339a5c1800d157597 --- .env | 1 + package.json | 5 +- .../components/header-color/index.vue | 41 +++++++++++++++++ src/layout/header-aside/layout.vue | 5 +- src/store/modules/d2admin/modules/account.js | 1 + src/store/modules/d2admin/modules/color.js | 46 +++++++++++++++++++ .../system/login/page.vue.REMOVED.git-id | 2 +- vue.config.js | 14 ++++++ yarn.lock.REMOVED.git-id | 2 +- 9 files changed, 112 insertions(+), 5 deletions(-) create mode 100644 src/layout/header-aside/components/header-color/index.vue create mode 100644 src/store/modules/d2admin/modules/color.js diff --git a/.env b/.env index 8ad3bfc8..3ac3302a 100644 --- a/.env +++ b/.env @@ -3,3 +3,4 @@ VUE_APP_API=/api/ VUE_APP_REPO=https://github.com/d2-projects/d2-admin VUE_APP_I18N_LOCALE=zh-chs VUE_APP_I18N_FALLBACK_LOCALE=en +VUE_APP_ELEMENT_COLOR=#409EFF diff --git a/package.json b/package.json index eb464fcf..95f3f592 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "countup.js": "^2.0.4", "dayjs": "^1.8.12", "echarts": "^4.2.1", - "element-ui": "^2.7.2", + "element-ui": "^2.9.1", "flex.css": "^1.1.7", "fuse.js": "^3.4.4", "github-markdown-css": "^3.0.1", @@ -72,6 +72,7 @@ "text-loader": "0.0.1", "uglifyjs-webpack-plugin": "^2.1.2", "vue-cli-plugin-i18n": "^0.6.0", - "vue-template-compiler": "^2.5.21" + "vue-template-compiler": "^2.5.21", + "webpack-theme-color-replacer": "^1.2.1" } } diff --git a/src/layout/header-aside/components/header-color/index.vue b/src/layout/header-aside/components/header-color/index.vue new file mode 100644 index 00000000..dfac4060 --- /dev/null +++ b/src/layout/header-aside/components/header-color/index.vue @@ -0,0 +1,41 @@ + + + diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue index 641a5693..fecd75f0 100644 --- a/src/layout/header-aside/layout.vue +++ b/src/layout/header-aside/layout.vue @@ -32,6 +32,7 @@ + @@ -92,6 +93,7 @@ import d2HeaderSize from './components/header-size' import d2HeaderTheme from './components/header-theme' import d2HeaderUser from './components/header-user' import d2HeaderLog from './components/header-log' +import d2HeaderColor from './components/header-color' import { mapState, mapGetters, mapActions } from 'vuex' import mixinSearch from './mixins/search' export default { @@ -109,7 +111,8 @@ export default { d2HeaderSize, d2HeaderTheme, d2HeaderUser, - d2HeaderLog + d2HeaderLog, + d2HeaderColor }, data () { return { diff --git a/src/store/modules/d2admin/modules/account.js b/src/store/modules/d2admin/modules/account.js index 1ab37af5..fb089607 100644 --- a/src/store/modules/d2admin/modules/account.js +++ b/src/store/modules/d2admin/modules/account.js @@ -107,6 +107,7 @@ export default { await dispatch('d2admin/menu/asideCollapseLoad', null, { root: true }) // DB -> store 持久化数据加载全局尺寸 await dispatch('d2admin/size/load', null, { root: true }) + await dispatch('d2admin/color/load', null, { root: true }) // end resolve() }) diff --git a/src/store/modules/d2admin/modules/color.js b/src/store/modules/d2admin/modules/color.js new file mode 100644 index 00000000..85c35175 --- /dev/null +++ b/src/store/modules/d2admin/modules/color.js @@ -0,0 +1,46 @@ +export default { + namespaced: true, + state: { + // 颜色 + value: process.env.VUE_APP_ELEMENT_COLOR + }, + actions: { + /** + * @description 设置颜色 + * @param {Object} state vuex state + * @param {String} color 尺寸 + */ + set ({ state, dispatch }, color) { + return new Promise(async resolve => { + // store 赋值 + state.value = color + // 持久化 + await dispatch('d2admin/db/set', { + dbName: 'sys', + path: 'color.value', + value: state.value, + user: true + }, { root: true }) + // end + resolve() + }) + }, + /** + * @description 从持久化数据读取颜色设置 + * @param {Object} state vuex state + */ + load ({ state, dispatch }) { + return new Promise(async resolve => { + // store 赋值 + state.value = await dispatch('d2admin/db/get', { + dbName: 'sys', + path: 'color.value', + defaultValue: process.env.VUE_APP_ELEMENT_COLOR, + user: true + }, { root: true }) + // end + resolve() + }) + } + } +} diff --git a/src/views/system/login/page.vue.REMOVED.git-id b/src/views/system/login/page.vue.REMOVED.git-id index a8611aa2..32f30df5 100644 --- a/src/views/system/login/page.vue.REMOVED.git-id +++ b/src/views/system/login/page.vue.REMOVED.git-id @@ -1 +1 @@ -fa1ae9f9a7f3f62b11777f83150787d16a763359 \ No newline at end of file +9c9dbaa47996b7dceac7c165fed90e73e4da0237 \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index cb5c5de8..cf540f99 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,6 +1,9 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const VueFilenameInjector = require('./tools/vue-filename-injector') +const ThemeColorReplacer = require('webpack-theme-color-replacer') +const forElementUI = require('webpack-theme-color-replacer/forElementUI') + // 拼接路径 const resolve = dir => require('path').join(__dirname, dir) @@ -26,6 +29,17 @@ module.exports = { } } }, + configureWebpack: { + plugins: [ + new ThemeColorReplacer({ + fileName: 'css/theme-colors.[contenthash:8].css', + matchColors: [ + ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR) // Element-ui主色系列 + ], + changeSelector: forElementUI.changeSelector + }) + ] + }, // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js chainWebpack: config => { /** diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id index c707f187..f7ddd3f3 100644 --- a/yarn.lock.REMOVED.git-id +++ b/yarn.lock.REMOVED.git-id @@ -1 +1 @@ -8a273c9068198d1dcc8d6b9738808332f76dabcb \ No newline at end of file +12deef00e0a1116ba0392a3851989164ee601528 \ No newline at end of file