应用步骤转移至 store

Former-commit-id: c07d7d3c1abab2b72fd6c54122184b43e6df9c9e [formerly c18fa9a0f6eb3af737a6d749bae96deac6688662] [formerly c07d7d3c1abab2b72fd6c54122184b43e6df9c9e [formerly c18fa9a0f6eb3af737a6d749bae96deac6688662] [formerly c07d7d3c1abab2b72fd6c54122184b43e6df9c9e [formerly c18fa9a0f6eb3af737a6d749bae96deac6688662] [formerly c18fa9a0f6eb3af737a6d749bae96deac6688662 [formerly 7bb0ca4f2c958f790976f1abd7fcedfb305082c5 [formerly 826c951c93030795502a83ac3eb84a0000b11cff]]]]]
Former-commit-id: 1f98f7d0fa6526d7f27b592dd66ae2099b568819
Former-commit-id: bcf05503bdafe4a9aa7fd721731c936303c1d35e
Former-commit-id: 92e65631b6fb98bf0705ecea660786c9f45f6e4b [formerly 92a7e9b3bbe042feeee2c992a04955d02849a1dc]
Former-commit-id: 314357d10e65877badf66e9463d92067b0118583
Former-commit-id: d15204648dfcd1aa573864b341aaa49e8232443c
Former-commit-id: 3ab3bde98300024763fe3d4e109b936ac1dc428b
Former-commit-id: 9f2922246b9860af6530334337a8add139b10d4d
Former-commit-id: d4a0672bc723627a4bdf1a5371eba8eb3beb0cb2

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

@@ -1,11 +1,13 @@
 <template>
-  <el-color-picker :value="value" size="small" @change="changeColor"></el-color-picker>
+  <el-color-picker
+    class="btn-text can-hover"
+    :value="value"
+    size="mini"
+    @change="colorSet"/>
 </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',
@@ -15,27 +17,14 @@ export default {
     ])
   },
   watch: {
-    value (val, old) {
+    value (value) {
-      this.changeThemeColor(old, val)
+      this.colorSet(value)
     }
   },
-  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)
-    }
   }
 }
 </script>

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 })
+        // DB -> store 持久化数据加载颜色设置
         await dispatch('d2admin/color/load', null, { root: true })
         // end
         resolve()

src/store/modules/d2admin/modules/color.js

@@ -1,3 +1,6 @@
+import client from 'webpack-theme-color-replacer/client'
+import forElementUI from 'webpack-theme-color-replacer/forElementUI'
+
 export default {
   namespaced: true,
   state: {
@@ -10,8 +13,10 @@ export default {
      * @param {Object} state vuex state
      * @param {String} color 尺寸
      */
-    set ({ state, dispatch }, color) {
+    set ({ state, dispatch, commit }, color) {
       return new Promise(async resolve => {
+        // 记录上个值
+        const old = state.value
         // store 赋值
         state.value = color
         // 持久化
@@ -21,6 +26,11 @@ export default {
           value: state.value,
           user: true
         }, { root: true })
+        // 应用
+        commit('apply', {
+          oldColor: old,
+          newColor: state.value
+        })
         // end
         resolve()
       })
@@ -29,8 +39,10 @@ export default {
      * @description 从持久化数据读取颜色设置
      * @param {Object} state vuex state
      */
-    load ({ state, dispatch }) {
+    load ({ state, dispatch, commit }) {
       return new Promise(async resolve => {
+        // 记录上个值
+        const old = state.value
         // store 赋值
         state.value = await dispatch('d2admin/db/get', {
           dbName: 'sys',
@@ -38,9 +50,28 @@ export default {
           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)
+    }
   }
 }