动态改变颜色

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

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