动态改变颜色

Former-commit-id: 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 1915e090833022dc051aa9cdc18547dbe38fa926 [formerly 27b9dffa48083e7d9838f32b8981c30abfc951f0 [formerly 06cbe3b2364c0a802527426b9fb2945c79521492]]]]]
Former-commit-id: 00c4123c1d7eb8c098d62f9d82c9fbe5286722bb
Former-commit-id: 8a034bad24ce45a2180974bec4bb98aa22136872
Former-commit-id: c208536ddbb4a1ee18d0b4c6985e02ec857bdf52 [formerly 1651b96ca9070d2cd743063fafb83dd06b31403e]
Former-commit-id: aec7f7119c7ac86d848dcb3226c4f018284a7470
Former-commit-id: ea29897c0709a4348a85161429003ba4405f59aa
Former-commit-id: 5161b39309ce5c69a4ba3ea37ad85b6bbbab258b
Former-commit-id: 0804b0bb33ea9e286fbde79c834e97952e86d63d
Former-commit-id: 487a27193d189c11d12a79d339a5c1800d157597

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 {