增加切换任意主题色的功能

package.json

@@ -32,6 +32,7 @@
     "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1",
     "wangeditor": "^3.1.1",
+    "webpack-theme-color-replacer": "^1.2.15",
     "xlsx": "^0.13.3"
   },
   "devDependencies": {

src/components/main/components/change-theme/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <ColorPicker class="change-theme" v-model="primaryColor" @input="changeThemeColor"/>
+</template>
+
+<script>
+import client from 'webpack-theme-color-replacer/client'
+import colorUtil from 'webpack-theme-color-replacer/forElementUI'
+
+export default {
+  data () {
+    return {
+      primaryColor: localStorage.getItem('theme_color') || '#2d8cf0'
+    }
+  },
+  created () {
+    this.changeThemeColor(this.primaryColor)
+  },
+  methods: {
+    changeThemeColor (primaryColor) {
+      let options = {
+        newColors: colorUtil.getElementUISeries(primaryColor).concat('#fff'),
+        changeUrl (cssUrl) {
+          return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path
+        }
+      }
+      client.changer.changeColor(options, Promise).then(t => {
+        localStorage.setItem('theme_color', primaryColor)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .change-theme {
+    /deep/ .ivu-color-picker-input {
+      width: 34px;
+      cursor: pointer;
+      border-color: transparent;
+      padding-right: 8px;
+      margin-right: 4px;
+    }
+
+    /deep/ .ivu-icon-ios-arrow-down {
+      display: none;
+    }
+  }
+</style>

src/components/main/main.vue

@@ -16,6 +16,7 @@
           <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
           <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
           <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
+          <change-theme></change-theme>
         </header-bar>
       </Header>
       <Content class="main-content-con">
@@ -41,6 +42,7 @@ import TagsNav from './components/tags-nav'
 import User from './components/user'
 import ABackTop from './components/a-back-top'
 import Fullscreen from './components/fullscreen'
+import ChangeTheme from './components/change-theme'
 import Language from './components/language'
 import ErrorStore from './components/error-store'
 import { mapMutations, mapActions, mapGetters } from 'vuex'
@@ -57,6 +59,7 @@ export default {
     Language,
     TagsNav,
     Fullscreen,
+    ChangeTheme,
     ErrorStore,
     User,
     ABackTop

vue.config.js

@@ -1,3 +1,6 @@
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const colorUtil = require('webpack-theme-color-replacer/forElementUI')
+
 const path = require('path')
 
 const resolve = dir => {
@@ -35,9 +38,22 @@ module.exports = {
       .set('_c', resolve('src/components'))
   },
   // 设为false打包时不生成.map文件
-  productionSourceMap: false
+  productionSourceMap: false,
   // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
   // devServer: {
   //   proxy: 'localhost:3000'
   // }
+
+  configureWebpack: {
+    plugins: [
+      new ThemeColorReplacer({
+        fileName: 'css/theme-colors-[contenthash:8].css',
+        matchColors: colorUtil.getElementUISeries('#2d8cf0').concat('#fff'), // 主色系列
+        // 改变样式选择器，解决样式覆盖问题
+        changeSelector (selector) {
+          return selector
+        }
+      })
+    ]
+  }
 }