新增: 增加动态修改主题色功能；

package.json

@@ -24,6 +24,7 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@ant-design/colors": "^4.0.0",
     "@vue/cli-plugin-babel": "^4.4.0",
     "@vue/cli-plugin-eslint": "^4.4.0",
     "@vue/cli-service": "^4.4.0",
@@ -35,6 +36,7 @@
     "style-resources-loader": "^1.3.2",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",
     "vue-template-compiler": "^2.6.11",
+    "webpack-theme-color-replacer": "^1.3.12",
     "whatwg-fetch": "^3.0.0"
   },
   "eslintConfig": {
@@ -52,6 +54,8 @@
     "rules": {}
   },
   "browserslist": [
-    "ie 8"
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
   ]
 }

src/components/checkbox/ColorCheckbox.vue

@@ -42,10 +42,19 @@ const Group = {
     }
   },
   watch: {
-    values: function (newVal, oldVal) {
+    values() {
-      // 此条件是为解决单选时，触发两次chang事件问题
+      this.$emit('change', this.values, this.colors)
-      if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0]) || this.multiple) {
+    },
-        this.$emit('change', this.values, this.colors)
+    defaultValues(value) {
+      if (this.multiple) {
+        this.options.forEach(item => {
+          item.sChecked = value.indexOf(item.value) > -1
+        })
+      } else {
+        this.options.forEach(item => {
+          let first = value[0]
+          item.sChecked = first && first == item.value
+        })
       }
     }
   },
@@ -55,9 +64,8 @@ const Group = {
         this.values = this.values.filter(item => item !== option.value)
       } else {
         if (!this.multiple) {
-          this.values = [option.value]
           this.options.forEach(item => {
-            if (item.value !== option.value) {
+            if (item.value != option.value) {
               item.sChecked = false
             }
           })
@@ -97,9 +105,11 @@ export default {
   },
   data () {
     return {
-      sChecked: this.checked
+      sChecked: this.initChecked()
     }
   },
+  computed: {
+  },
   inject: ['groupContext'],
   watch: {
     'sChecked': function () {
@@ -118,13 +128,22 @@ export default {
   created () {
     const groupContext = this.groupContext
     if (groupContext) {
-      this.sChecked = groupContext.defaultValues.indexOf(this.value) >= 0
       groupContext.options.push(this)
     }
   },
   methods: {
     toggle () {
       this.sChecked = !this.sChecked
+    },
+    initChecked() {
+      let groupContext = this.groupContext
+      if (!groupContext) {
+        return this.check
+      }else if (groupContext.multiple) {
+        return groupContext.defaultValues.indexOf(this.value) > -1
+      } else {
+        return groupContext.defaultValues[0] == this.value
+      }
     }
   }
 }

src/components/setting/Setting.vue

@@ -7,8 +7,8 @@
       </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-checkbox-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
+      <color-checkbox-group @change="onColorChange" :defaultValues="['6']" :multiple="false">
-        <color-checkbox ref="colorNode" color="rgb(245, 34, 45)" value="1" />
+        <color-checkbox color="rgb(245, 34, 45)" value="1" />
         <color-checkbox color="rgb(250, 84, 28)" value="2" />
         <color-checkbox color="rgb(250, 173, 20)" value="3" />
         <color-checkbox color="rgb(19, 194, 194)" value="4" />
@@ -62,7 +62,7 @@
       </a-list>
     </setting-item>
     <a-divider />
-    <a-button id="copyBtn" data-clipboard-text="Sorry, you copy nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >拷贝代码</a-button>
+    <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >拷贝代码</a-button>
   </a-layout-sider>
 </template>
 
@@ -71,6 +71,7 @@ import SettingItem from './SettingItem'
 import ColorCheckbox from '../checkbox/ColorCheckbox'
 import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
+import themeUtil from '../../utils/themeUtil';
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
@@ -86,7 +87,8 @@ export default {
   methods: {
     onColorChange (values, colors) {
       if (colors.length > 0) {
-        this.$message.info(`您选择了主题色 ${colors}`)
+        let closeMessage = this.$message.loading(`您选择了主题色 ${colors}, 正在切换...`)
+        themeUtil.changeThemeColor(colors[0]).then(closeMessage)
       }
     },
     setTheme (values) {

src/components/tool/FooterToolBar.vue

@@ -21,12 +21,10 @@ export default {
     width: 100%;
     bottom: 0;
     right: 0;
-    height: 56px;
-    line-height: 56px;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
     background: #fff;
     border-top: 1px solid #e8e8e8;
-    padding: 0 24px;
+    padding: 12px 24px;
     z-index: 9;
   }
 </style>

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router/lazy'
-import 'ant-design-vue/dist/antd.css'
+import './theme/index.less'
 import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
 import axios from 'axios'

src/pages/components/Palette.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="text-align: center; margin-top: 48px">
-    <color-checkbox-group :defaultValues="['1']" @change="changeColor" :multiple="true" style="display: inline-block">
+    <color-checkbox-group :defaultValues="['1', '3', '4']" @change="changeColor" :multiple="true" style="display: inline-block">
       <color-checkbox color="rgb(245, 34, 45)" value="1" />
       <color-checkbox color="rgb(250, 84, 28)" value="2" />
       <color-checkbox color="rgb(250, 173, 20)" value="3" />

src/theme/default/color.less

@@ -0,0 +1,4 @@
+@import "../theme";
+@primary-color: @primary;
+@processing-color: @primary;
+@link-color: @primary;

src/theme/default/index.less

@@ -0,0 +1 @@
+@import "color";

src/theme/index.less

@@ -0,0 +1,2 @@
+@import '~ant-design-vue/dist/antd.less';
+@import "default/index";

src/theme/theme.less

@@ -0,0 +1 @@
+@primary: #1890ff;

src/utils/themeUtil.js

@@ -0,0 +1,17 @@
+import client from 'webpack-theme-color-replacer/client'
+import generate from '@ant-design/colors/lib/generate'
+
+export default {
+  primaryColor: '#1890ff',
+  changeThemeColor (newColor) {
+    let lastColor = this.lastColor || this.primaryColor
+    let options = {
+      cssUrl: '/css/theme-colors.css',
+      oldColors: generate(lastColor),
+      newColors: generate(newColor)
+    }
+    let promise = client.changer.changeColor(options)
+    this.lastColor = lastColor
+    return promise
+  }
+}

vue.config.js

@@ -1,12 +1,38 @@
+// let path = require('path')
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const generate = require('@ant-design/colors/lib/generate').default
+
 module.exports = {
   pluginOptions: {
     'style-resources-loader': {
       preProcessor: 'less',
+      // patterns: [path.resolve(__dirname, "./src/theme/theme.less")]
       patterns: []
     }
   },
   configureWebpack: config => {
     config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
+    config.plugins.push(
+      new ThemeColorReplacer({
+        fileName: 'css/theme-colors.css',
+        matchColors: generate('#1890ff')
+      })
+    )
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          modifyVars: {
+            // 'link-color': '#ff4d85',
+            // 'processing-color': '#ff4d85',
+            // 'primary-color': '#ff4d85',
+            // 'primary': '#1890ff',
+          },
+          javascriptEnabled: true
+        }
+      }
+    }
   },
   publicPath: './',
   outputDir: 'dist',

yarn.lock

@@ -9,6 +9,13 @@
   dependencies:
     tinycolor2 "^1.4.1"
 
+"@ant-design/colors@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-4.0.0.tgz#bcc1183b1fdfd1587d4e655035b3fc47bf3a4ab6"
+  integrity sha1-vMEYOx/f0Vh9TmVQNbP8R786SrY=
+  dependencies:
+    tinycolor2 "^1.4.1"
+
 "@ant-design/icons-vue@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-2.0.0.tgz#0357f5010a404e9f34a87a4b41b2a08df691dbce"
@@ -9384,7 +9391,7 @@ webpack-merge@^4.2.2:
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
+webpack-sources@*, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.npm.taobao.org/webpack-sources/download/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha1-7t2OwLko+/HL/plOItLYkPMwqTM=
@@ -9392,6 +9399,13 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
+webpack-theme-color-replacer@^1.3.12:
+  version "1.3.12"
+  resolved "https://registry.npm.taobao.org/webpack-theme-color-replacer/download/webpack-theme-color-replacer-1.3.12.tgz#0593a3149310c0e5b6b85afeccd61925b1b8e86b"
+  integrity sha1-BZOjFJMQwOW2uFr+zNYZJbG46Gs=
+  dependencies:
+    webpack-sources "*"
+
 webpack@^4.0.0:
   version "4.43.0"
   resolved "https://registry.npm.taobao.org/webpack/download/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"