From c5ea5a2bdb0c4edd5aaa728c3300df68d2d05d38 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 11 Jun 2019 21:24:38 +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: ffb048da436b289c2e2651bd4496b161c9157146 [formerly ffb048da436b289c2e2651bd4496b161c9157146 [formerly ffb048da436b289c2e2651bd4496b161c9157146 [formerly ffb048da436b289c2e2651bd4496b161c9157146 [formerly a59428acb527bc6321c95fa760265dc833cf65e5 [formerly 45ec9aef742e446120981b198f8218987b672a1f]]]]]
Former-commit-id: 70d862d8e2078eafcec732ed447786d07c1e1430
Former-commit-id: 0a9e379b6fdcca1e745cba5e1be77b583e82ae58
Former-commit-id: 863a82d72ccc3a9d1bbcc8d7aa79f3d7660a973e [formerly c13c2a3bc22f90100f318e6893fb3c4abf7f8095]
Former-commit-id: e5fb7675c964ee555398f2ecbdfbf8d1d59d75c1
Former-commit-id: 89c8cd222507e826ad8fdda0cad8f3f37ed912bc
Former-commit-id: 758ef0f28887dded3b4f9a73839302f053870eba
Former-commit-id: e477522484af89ef63cf16c8e4bb1ced4bdbe242
Former-commit-id: e7249fde10c183f40e99c3ad5810815ac755dfab
---
.env | 1 +
babel.config.js | 4 +-
package-lock.json.REMOVED.git-id | 2 +-
package.json | 47 ++++++-----
.../theme/theme-base.scss.REMOVED.git-id | 2 +-
.../components/header-color/index.vue | 44 +++++++++++
src/layout/header-aside/layout.vue | 5 +-
src/store/modules/d2admin/modules/account.js | 2 +
src/store/modules/d2admin/modules/color.js | 77 +++++++++++++++++++
.../system/login/page.vue.REMOVED.git-id | 2 +-
vue.config.js | 19 +++++
yarn.lock.REMOVED.git-id | 2 +-
12 files changed, 177 insertions(+), 30 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/babel.config.js b/babel.config.js
index ba179669..5c7945a7 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,7 @@
module.exports = {
presets: [
'@vue/app'
- ]
+ ],
+ // 允许两种编码引入方式共存,也就是 common 规范与 es6 规范的共存处理
+ sourceType: 'unambiguous'
}
diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id
index c0fb3668..a2aafdc4 100644
--- a/package-lock.json.REMOVED.git-id
+++ b/package-lock.json.REMOVED.git-id
@@ -1 +1 @@
-fed37778e9514dc3dec6b8c767aa01b05250a597
\ No newline at end of file
+8a958b9beedab60284c0a4872380a0a8fb1dba52
\ No newline at end of file
diff --git a/package.json b/package.json
index eb464fcf..23cbf612 100644
--- a/package.json
+++ b/package.json
@@ -15,22 +15,21 @@
},
"dependencies": {
"@d2-admin/filters-dayjs": "^1.0.3",
- "@d2-projects/d2-crud": "^2.0.5",
+ "@d2-projects/d2-crud": "^2.1.1",
"@d2-projects/vue-table-export": "^1.0.1",
"@d2-projects/vue-table-import": "^1.0.0",
- "axios": "^0.18.0",
+ "axios": "^0.19.0",
"better-scroll": "^1.15.2",
- "clipboard-polyfill": "^2.8.0",
- "core-js": "^2.6.5",
+ "clipboard-polyfill": "^2.8.1",
"countup.js": "^2.0.4",
- "dayjs": "^1.8.12",
+ "dayjs": "^1.8.14",
"echarts": "^4.2.1",
- "element-ui": "^2.7.2",
+ "element-ui": "^2.9.1",
"flex.css": "^1.1.7",
- "fuse.js": "^3.4.4",
+ "fuse.js": "^3.4.5",
"github-markdown-css": "^3.0.1",
- "highlight.js": "^9.15.6",
- "hotkeys-js": "^3.6.2",
+ "highlight.js": "^9.15.8",
+ "hotkeys-js": "^3.6.11",
"js-cookie": "^2.2.0",
"lodash": "^4.17.11",
"lowdb": "^1.0.0",
@@ -41,37 +40,37 @@
"quill": "^1.3.6",
"screenfull": "^4.2.0",
"simplemde": "^1.11.2",
- "ua-parser-js": "^0.7.19",
+ "ua-parser-js": "^0.7.20",
"v-charts": "^1.19.0",
"v-contextmenu": "^2.8.0",
"vue": "^2.6.10",
"vue-grid-layout": "^2.3.4",
- "vue-i18n": "^8.0.0",
+ "vue-i18n": "^8.11.2",
"vue-json-tree-view": "^2.1.4",
- "vue-router": "^3.0.3",
+ "vue-router": "^3.0.6",
"vue-splitpane": "^1.0.4",
"vue-ueditor-wrap": "^2.4.1",
- "vuex": "^3.0.1"
+ "vuex": "^3.1.1"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
- "@vue/cli-plugin-babel": "^3.6.0",
- "@vue/cli-plugin-eslint": "^3.6.0",
- "@vue/cli-plugin-unit-jest": "^3.6.0",
- "@vue/cli-service": "^3.6.0",
+ "@vue/cli-plugin-babel": "^3.8.0",
+ "@vue/cli-plugin-eslint": "^3.8.0",
+ "@vue/cli-plugin-unit-jest": "^3.8.0",
+ "@vue/cli-service": "^3.8.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
- "babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
- "babel-jest": "^23.6.0",
+ "babel-jest": "^24.8.0",
"eslint": "^5.16.0",
- "eslint-plugin-vue": "^5.0.0",
- "sass": "^1.18.0",
+ "eslint-plugin-vue": "^5.2.2",
+ "sass": "^1.21.0",
"sass-loader": "^7.1.0",
- "svg-sprite-loader": "^4.1.3",
+ "svg-sprite-loader": "^4.1.6",
"text-loader": "0.0.1",
- "uglifyjs-webpack-plugin": "^2.1.2",
+ "uglifyjs-webpack-plugin": "^2.1.3",
"vue-cli-plugin-i18n": "^0.6.0",
- "vue-template-compiler": "^2.5.21"
+ "vue-template-compiler": "^2.6.10",
+ "webpack-theme-color-replacer": "^1.2.5"
}
}
diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
index bfbd532d..4155a2d1 100644
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-622f962f4363e0f0c973336d08765a77e90bbf3f
\ No newline at end of file
+b9f3262f3fb1e36a9bdc4b480799afc6ea5e7b07
\ No newline at end of file
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..f3d0d52d
--- /dev/null
+++ b/src/layout/header-aside/components/header-color/index.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 641a5693..a1f0d8ab 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..6d6615e0 100644
--- a/src/store/modules/d2admin/modules/account.js
+++ b/src/store/modules/d2admin/modules/account.js
@@ -107,6 +107,8 @@ export default {
await dispatch('d2admin/menu/asideCollapseLoad', null, { root: true })
// DB -> store 持久化数据加载全局尺寸
await dispatch('d2admin/size/load', null, { root: true })
+ // DB -> store 持久化数据加载颜色设置
+ 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..6dafc36f
--- /dev/null
+++ b/src/store/modules/d2admin/modules/color.js
@@ -0,0 +1,77 @@
+import client from 'webpack-theme-color-replacer/client'
+import forElementUI from 'webpack-theme-color-replacer/forElementUI'
+
+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, commit }, color) {
+ return new Promise(async resolve => {
+ // 记录上个值
+ const old = state.value
+ // store 赋值
+ state.value = color || process.env.VUE_APP_ELEMENT_COLOR
+ // 持久化
+ await dispatch('d2admin/db/set', {
+ dbName: 'sys',
+ path: 'color.value',
+ value: state.value,
+ user: true
+ }, { root: true })
+ // 应用
+ commit('apply', {
+ oldColor: old,
+ newColor: state.value
+ })
+ // end
+ resolve()
+ })
+ },
+ /**
+ * @description 从持久化数据读取颜色设置
+ * @param {Object} state vuex state
+ */
+ load ({ state, dispatch, commit }) {
+ return new Promise(async resolve => {
+ // 记录上个值
+ const old = state.value
+ // store 赋值
+ state.value = await dispatch('d2admin/db/get', {
+ dbName: 'sys',
+ path: 'color.value',
+ defaultValue: process.env.VUE_APP_ELEMENT_COLOR,
+ user: true
+ }, { root: true })
+ // 应用
+ commit('apply', {
+ oldColor: old,
+ newColor: state.value
+ })
+ // end
+ resolve()
+ })
+ }
+ },
+ mutations: {
+ /**
+ * @description 将 vuex 中的主题颜色设置应用到系统中
+ * @param {Object} state vuex state
+ * @param {Object} payload 设置
+ */
+ apply (state, { oldColor, newColor }) {
+ var options = {
+ oldColors: [...forElementUI.getElementUISeries(oldColor)],
+ newColors: [...forElementUI.getElementUISeries(newColor)]
+ }
+ client.changer.changeColor(options)
+ }
+ }
+}
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..1e8f91f5 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,22 @@ module.exports = {
}
}
},
+ // node_modules 需要babel成es5的包
+ transpileDependencies: [
+ 'webpack-theme-color-replacer'
+ ],
+ configureWebpack: {
+ plugins: [
+ new ThemeColorReplacer({
+ fileName: 'css/theme-colors.[contenthash:8].css',
+ matchColors: [
+ ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR) // Element-ui主色系列
+ ],
+ externalCssFiles: [ './node_modules/element-ui/lib/theme-chalk/index.css' ], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
+ 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..048f4d17 100644
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-8a273c9068198d1dcc8d6b9738808332f76dabcb
\ No newline at end of file
+b90ddad21ccad6e1a280693fba504af4a91c6fd3
\ No newline at end of file