动态改变颜色

.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

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"
   }
 }

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

@@ -0,0 +1,41 @@
+<template>
+  <el-color-picker :value="value" size="small" @change="changeColor"></el-color-picker>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import client from 'webpack-theme-color-replacer/client'
+import forElementUI from 'webpack-theme-color-replacer/forElementUI'
+
+export default {
+  name: 'd2-header-color',
+  computed: {
+    ...mapState('d2admin/color', [
+      'value'
+    ])
+  },
+  watch: {
+    value (val, old) {
+      this.changeThemeColor(old, val)
+    }
+  },
+  created () {
+    this.changeThemeColor(process.env.VUE_APP_ELEMENT_COLOR, this.value)
+  },
+  methods: {
+    ...mapActions({
+      colorSet: 'd2admin/color/set'
+    }),
+    changeColor (newColor) {
+      this.colorSet(newColor)
+    },
+    changeThemeColor (curColor, newColor) {
+      var options = {
+        oldColors: [...forElementUI.getElementUISeries(curColor)],
+        newColors: [...forElementUI.getElementUISeries(newColor)]
+      }
+      client.changer.changeColor(options, Promise)
+    }
+  }
+}
+</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-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,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()
       })

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

src/views/system/login/page.vue

@@ -91,9 +91,9 @@
             </a>
           </p>
           <p class="page-login--content-footer-copyright">
-            {{ $t('views.system.login.footer.copyright.copyright') }} 
-            <d2-icon name="copyright"/> 
-            {{ $t('views.system.login.footer.copyright.content') }} 
+            {{ $t('views.system.login.footer.copyright.copyright') }}
+            <d2-icon name="copyright"/>
+            {{ $t('views.system.login.footer.copyright.content') }}
             <a href="https://github.com/FairyEver">
               @{{ $t('views.system.login.footer.copyright.author') }}
             </a>

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

yarn.lock

@@ -3101,9 +3101,10 @@ element-resize-detector@^1.1.10:
   dependencies:
     batch-processor "^1.0.0"
 
-element-ui@^2.7.2:
-  version "2.8.2"
-  resolved "https://registry.npmjs.org/element-ui/-/element-ui-2.8.2.tgz#21a7a4cb92616b0f8b75d4d4e637d3a1cd8c09de"
+element-ui@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.9.1.tgz#a05f2e76023d529ba0dfa2d03ae16e5134b20c4e"
+  integrity sha1-oF8udgI9Upug36LQOuFuUTSyDE4=
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
@@ -9097,6 +9098,11 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
+webpack-theme-color-replacer@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/webpack-theme-color-replacer/download/webpack-theme-color-replacer-1.2.1.tgz#6ab2ba55095b55ae41aebb06378238b712636623"
+  integrity sha1-arK6VQlbVa5BrrsGN4I4txJjZiM=
+
 "webpack@>=4 < 4.29":
   version "4.28.4"
   resolved "https://registry.npmjs.org/webpack/-/webpack-4.28.4.tgz#1ddae6c89887d7efb752adf0c3cd32b9b07eacd0"