同步完整版代码

增加颜色切换功能


Former-commit-id: 37d688a0ee4ebadbb1980f2509d722931099c82c

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

@@ -104,6 +104,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,78 @@
+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} context
+     * @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} context
+     */
+    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} context
+     * @param {Object} payload oldColor {String} 旧的颜色
+     * @param {Object} payload newColor {String} 新颜色
+     */
+    apply (state, { oldColor, newColor }) {
+      var options = {
+        oldColors: [...forElementUI.getElementUISeries(oldColor)],
+        newColors: [...forElementUI.getElementUISeries(newColor)]
+      }
+      client.changer.changeColor(options)
+    }
+  }
+}