动态改变颜色

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

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

babel.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ]
+  ],
+  // 允许两种编码引入方式共存,也就是 common 规范与 es6 规范的共存处理
+  sourceType: 'unambiguous'
 }

package-lock.json.REMOVED.git-id

@@ -1 +1 @@
-fed37778e9514dc3dec6b8c767aa01b05250a597
+8a958b9beedab60284c0a4872380a0a8fb1dba52

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",
+    "clipboard-polyfill": "^2.8.1",
-    "core-js": "^2.6.5",
     "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",
+    "highlight.js": "^9.15.8",
-    "hotkeys-js": "^3.6.2",
+    "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-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.6.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-plugin-unit-jest": "^3.6.0",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
-    "@vue/cli-service": "^3.6.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",
+    "eslint-plugin-vue": "^5.2.2",
-    "sass": "^1.18.0",
+    "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"
   }
 }

src/assets/style/theme/theme-base.scss.REMOVED.git-id

@@ -1 +1 @@
-622f962f4363e0f0c973336d08765a77e90bbf3f
+b9f3262f3fb1e36a9bdc4b480799afc6ea5e7b07

src/layout/header-aside/components/header-color/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-color-picker
+    class="btn-text can-hover"
+    :value="value"
+    :predefine="predefine"
+    size="mini"
+    @change="set"/>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'd2-header-color',
+  data () {
+    return {
+      predefine: [
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585'
+      ]
+    }
+  },
+  computed: {
+    ...mapState('d2admin/color', [
+      'value'
+    ])
+  },
+  watch: {
+    value (value) {
+      this.set(value)
+    }
+  },
+  methods: {
+    ...mapActions('d2admin/color', [
+      'set'
+    ])
+  }
+}
+</script>

src/layout/header-aside/layout.vue

@@ -32,6 +32,7 @@
           <d2-header-theme/>
           <d2-header-size/>
           <d2-header-locales/>
+          <d2-header-color/>
           <d2-header-user/>
         </div>
       </div>
@@ -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 {

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

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

src/views/system/login/page.vue.REMOVED.git-id

@@ -1 +1 @@
-fa1ae9f9a7f3f62b11777f83150787d16a763359
+9c9dbaa47996b7dceac7c165fed90e73e4da0237

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 => {
     /**

yarn.lock.REMOVED.git-id

@@ -1 +1 @@
-8a273c9068198d1dcc8d6b9738808332f76dabcb
+b90ddad21ccad6e1a280693fba504af4a91c6fd3