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

5 years ago · 066ab7ec22
parent 54e6a72f3a
commit 066ab7ec22
13 changed files with 107 additions and 19 deletions
--- a/package.json
+++ b/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"
  ]
 }
--- a/src/components/checkbox/ColorCheckbox.vue
+++ b/src/components/checkbox/ColorCheckbox.vue
@ -42,10 +42,19 @@ const Group = {
    }
  },
  watch: {
-    values: function (newVal, oldVal) {
-      // 此条件是为解决单选时，触发两次chang事件问题
-      if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0]) || this.multiple) {
-        this.$emit('change', this.values, this.colors)
+    values() {
+      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
+      }
    }
  }
 }
--- a/src/components/setting/Setting.vue
+++ b/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 ref="colorNode" color="rgb(245, 34, 45)" value="1" />
+      <color-checkbox-group @change="onColorChange" :defaultValues="['6']" :multiple="false">
+        <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) {
--- a/src/components/tool/FooterToolBar.vue
+++ b/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>
--- a/src/main.js
+++ b/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'
--- a/src/pages/components/Palette.vue
+++ b/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" />
--- a/src/theme/default/color.less
+++ b/src/theme/default/color.less
@ -0,0 +1,4 @@
+@import "../theme";
+@primary-color: @primary;
+@processing-color: @primary;
+@link-color: @primary;
--- a/src/theme/default/index.less
+++ b/src/theme/default/index.less
@ -0,0 +1 @@
+@import "color";
--- a/src/theme/index.less
+++ b/src/theme/index.less
@ -0,0 +1,2 @@
+@import '~ant-design-vue/dist/antd.less';
+@import "default/index";
--- a/src/theme/theme.less
+++ b/src/theme/theme.less
@ -0,0 +1 @@
+@primary: #1890ff;
--- a/src/utils/themeUtil.js
+++ b/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
+  }
+}
--- a/vue.config.js
+++ b/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',
--- a/yarn.lock
+++ b/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"