From 5f68e2d23149061a1d745c89341a799984592eb0 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Wed, 1 Jul 2020 17:23:39 +0800
Subject: [PATCH] chore: optimize the realization of theme color :star2:

---
 src/components/checkbox/ImgCheckbox.vue       |  2 +-
 src/components/menu/SideMenu.vue              | 22 ++----------
 src/components/result/Result.vue              |  2 +-
 src/components/setting/StyleItem.vue          | 36 -------------------
 .../transition/PageToggleTransition.vue       |  2 +-
 src/config/config.js                          |  4 +++
 src/config/{ => default}/animates.js          |  0
 src/config/index.js                           | 28 ++++-----------
 src/layouts/AdminLayout.vue                   |  2 +-
 src/layouts/header/AdminHeader.vue            |  2 +-
 src/pages/dashboard/workplace/WorkPlace.vue   |  6 ++--
 src/pages/login/Login.vue                     |  2 +-
 src/store/modules/setting.js                  |  2 +-
 src/theme/default/color.less                  | 18 ++--------
 src/utils/colors.js                           | 11 +++---
 src/utils/themeUtil.js                        | 21 +++++++----
 vue.config.js                                 |  9 ++---
 17 files changed, 46 insertions(+), 123 deletions(-)
 delete mode 100644 src/components/setting/StyleItem.vue
 create mode 100644 src/config/config.js
 rename src/config/{ => default}/animates.js (100%)

diff --git a/src/components/checkbox/ImgCheckbox.vue b/src/components/checkbox/ImgCheckbox.vue
index cedbee7..014c21a 100644
--- a/src/components/checkbox/ImgCheckbox.vue
+++ b/src/components/checkbox/ImgCheckbox.vue
@@ -138,7 +138,7 @@ export default {
       padding-top: 15px;
       padding-left: 24px;
       height: 100%;
-      color: #1890ff;
+      color: @primary-color;
       font-size: 14px;
       font-weight: bold;
     }
diff --git a/src/components/menu/SideMenu.vue b/src/components/menu/SideMenu.vue
index 07b66e9..f779f84 100644
--- a/src/components/menu/SideMenu.vue
+++ b/src/components/menu/SideMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider :class="[theme, 'side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+  <a-layout-sider :theme="theme" :class="['side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="@/assets/img/logo.png">
@@ -56,12 +56,6 @@ export default {
   }
   .side{
     z-index: 10;
-    &.light{
-      background-color: #fff;
-    }
-    &.dark{
-      background-color: #001529;
-    }
     .logo{
       height: 64px;
       position: relative;
@@ -70,32 +64,22 @@ export default {
       -webkit-transition: all .3s;
       transition: all .3s;
       overflow: hidden;
+      background-color: @layout-trigger-background;
       &.light{
         background-color: #fff;
         h1{
-          color: #1890ff;
-        }
-      }
-      &.dark{
-        background-color: #002140;
-        h1{
-          color: #fff;
+          color: @primary-color;
         }
       }
       h1{
         color: #fff;
         font-size: 20px;
         margin: 0 0 0 12px;
-        font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
-        font-weight: 600;
         display: inline-block;
-        height: 32px;
-        line-height: 32px;
         vertical-align: middle;
       }
       img{
         width: 32px;
-        display: inline-block;
         vertical-align: middle;
       }
     }
diff --git a/src/components/result/Result.vue b/src/components/result/Result.vue
index 3d02ceb..c0d0238 100644
--- a/src/components/result/Result.vue
+++ b/src/components/result/Result.vue
@@ -32,7 +32,7 @@ export default {
       margin-bottom: 24px;
     }
     .success {
-      color: green;
+      color: @success-color;
     }
     .error {
       color: red;
diff --git a/src/components/setting/StyleItem.vue b/src/components/setting/StyleItem.vue
deleted file mode 100644
index d3067de..0000000
--- a/src/components/setting/StyleItem.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="style">
-    <img :src="img" />
-    <div v-if="selected" class="select-item">
-      <a-icon type="check" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'StyleItem',
-  props: ['selected', 'img']
-}
-</script>
-
-<style lang="less" scoped>
-  .style{
-    margin-right: 16px;
-    position: relative;
-    border-radius: 4px;
-    cursor: pointer;
-    .select-item{
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 100%;
-      padding-top: 15px;
-      padding-left: 24px;
-      height: 100%;
-      color: #1890ff;
-      font-size: 14px;
-      font-weight: bold;
-    }
-  }
-</style>
diff --git a/src/components/transition/PageToggleTransition.vue b/src/components/transition/PageToggleTransition.vue
index 80a2d48..33a9a7e 100644
--- a/src/components/transition/PageToggleTransition.vue
+++ b/src/components/transition/PageToggleTransition.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import animates from '@/config/animates'
+  import {animates} from '@/config/default'
 
   export default {
     name: 'PageToggleTransition',
diff --git a/src/config/config.js b/src/config/config.js
new file mode 100644
index 0000000..6b8bfd4
--- /dev/null
+++ b/src/config/config.js
@@ -0,0 +1,4 @@
+// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
+module.exports = {
+  themeColor: '#13c2c2',
+}
diff --git a/src/config/animates.js b/src/config/default/animates.js
similarity index 100%
rename from src/config/animates.js
rename to src/config/default/animates.js
diff --git a/src/config/index.js b/src/config/index.js
index 6f88948..7f4d46d 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,22 +1,6 @@
-// 系统配置
-module.exports = {
-  lang: 'CN',
-  themeColor: '#1890ff',
-  theme: 'dark',
-  layout: 'side',
-  fixedHeader: false,
-  fixedSideBar: true,
-  weekMode: false,
-  multiPage: false,
-  systemName: 'Vue Antd Admin',
-  copyright: '2018 ICZER 工作室出品',
-  animate: {
-    name: 'bounce',
-    direction: 'left'
-  },
-  footerLinks: [
-    {link: 'https://pro.ant.design', name: 'Pro首页'},
-    {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
-    {link: 'https://ant.design', name: 'Ant Design'}
-  ],
-}
+const deepmerge = require('deepmerge')
+const _config = require('./config')
+const setting = require('./default').setting
+const config = deepmerge(setting, _config)
+
+module.exports = config
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 41c04ee..3e186cb 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -105,7 +105,7 @@ export default {
       min-height: auto;
     }
     .setting{
-      background-color: #1890ff;
+      background-color: @primary-color;
       color: #fff;
       border-radius: 5px 0 0 5px;
       line-height: 40px;
diff --git a/src/layouts/header/AdminHeader.vue b/src/layouts/header/AdminHeader.vue
index b435edb..6156242 100644
--- a/src/layouts/header/AdminHeader.vue
+++ b/src/layouts/header/AdminHeader.vue
@@ -83,7 +83,7 @@ export default {
     cursor: pointer;
     transition: color .3s;
     &:hover{
-      color: #1890ff;
+      color: @primary-color;
     }
   }
   .admin-header{
diff --git a/src/pages/dashboard/workplace/WorkPlace.vue b/src/pages/dashboard/workplace/WorkPlace.vue
index 4a39491..f30fe13 100644
--- a/src/pages/dashboard/workplace/WorkPlace.vue
+++ b/src/pages/dashboard/workplace/WorkPlace.vue
@@ -158,7 +158,7 @@ export default {
         vertical-align: top;
         font-size: 14px;
         &:hover {
-          color: #1890ff;
+          color: @primary-color;
         }
       }
     }
@@ -174,7 +174,7 @@ export default {
         display: inline-block;
         flex: 1 1 0;
         &:hover {
-          color: #1890ff;
+          color: @primary-color;
         }
       }
       .datetime {
@@ -219,7 +219,7 @@ export default {
       }
       &:hover {
         span {
-          color: #1890ff;
+          color: @primary-color;
         }
       }
     }
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index b6ce7fa..e378fe4 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -164,7 +164,7 @@ export default {
         transition: color 0.3s;
 
         &:hover {
-          color: #1890ff;
+          color: @primary-color;
         }
       }
     }
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index 4f66afa..af760e8 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -3,7 +3,7 @@ export default {
   namespaced: true,
   state: {
     isMobile: false,
-    animates: require('@/config/animates'),
+    animates: require('@/config/default/animates'),
     ...config,
     routesI18n: {}
   },
diff --git a/src/theme/default/color.less b/src/theme/default/color.less
index da6cc07..b5f22df 100644
--- a/src/theme/default/color.less
+++ b/src/theme/default/color.less
@@ -1,20 +1,6 @@
-@import '~ant-design-vue/lib/style/color/colors.less';
-@primary: #1890ff;
-@primary-color: @primary;
-@processing-color: @primary;
-@link-color: @primary;
-
-@primary-1: color(~`colorPalette('@{primary}', 1) `);
-@primary-2: color(~`colorPalette('@{primary}', 2) `);
-@primary-3: color(~`colorPalette('@{primary}', 3) `);
-@primary-4: color(~`colorPalette('@{primary}', 4) `);
-@primary-5: color(~`colorPalette('@{primary}', 5) `);
-@primary-6: color(~`colorPalette('@{primary}', 6) `);
-@primary-7: color(~`colorPalette('@{primary}', 7) `);
-@primary-8: color(~`colorPalette('@{primary}', 8) `);
-@primary-9: color(~`colorPalette('@{primary}', 9) `);
-@primary-10: color(~`colorPalette('@{primary}', 10) `);
+@import '~ant-design-vue/lib/style/themes/default';
 
+@primary: @primary-color;
 @gray-1: #ffffff;
 @gray-2: #fafafa;
 @gray-3: #f5f5f5;
diff --git a/src/utils/colors.js b/src/utils/colors.js
index e9c7170..1c607d1 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -1,17 +1,16 @@
-const {generate} = require('@ant-design/colors')
+const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 // ant design vue 默认主题色
 const antPrimaryColor = '#1890ff'
 // ant design vue 默认dark主题色，若主题色为默认主题色则返回此 dark 主题色系
 const antDarkColors = ['#000c17', '#001529', '#002140']
 
-function getDarkColors(color, theme) {
+function getDarkColors(color) {
   if (color == antPrimaryColor) {
     return antDarkColors
   }
-  const lightColors = generate(color, {theme: theme, backgroundColor: '#000000'})
-  const darkColors = generate(lightColors[5], {theme: theme, backgroundColor: '#000000'})
-  let deepDark = darkColors.slice(0, 3)
-  return deepDark
+  const darkColors = []
+  darkColors.push(varyColor.darken(color, 0.93), varyColor.darken(color, 0.83), varyColor.darken(color, 0.73))
+  return darkColors
 }
 
 module.exports = {getDarkColors}
diff --git a/src/utils/themeUtil.js b/src/utils/themeUtil.js
index c4880ab..403b7cb 100644
--- a/src/utils/themeUtil.js
+++ b/src/utils/themeUtil.js
@@ -1,4 +1,4 @@
-const varyColor = require('webpack-theme-color-replacer/client/varyColor')
+// const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 const client = require('webpack-theme-color-replacer/client')
 const generate =  require('@ant-design/colors/lib/generate').default
 const themeColor = require('../config').themeColor
@@ -7,13 +7,9 @@ const getDarkColors = require('../utils/colors').getDarkColors
 module.exports = {
   primaryColor: themeColor,
   getThemeColors(color) {
-    const lightens = new Array(9).fill().map((t, i) => {
-      return varyColor.lighten(color, i / 10)
-    })
     const palettes = generate(color)
-    const rgb = varyColor.toNum3(color.replace('#', '')).join(',')
-    let darkBgColors = getDarkColors(color, 'dark')
-    return palettes.concat(lightens).concat(rgb).concat(darkBgColors)
+    const darkBgColors = getDarkColors(color)
+    return palettes.concat(darkBgColors)
   },
   changeThemeColor (newColor) {
     let lastColor = this.lastColor || this.primaryColor
@@ -48,5 +44,16 @@ module.exports = {
       default :
         return selector
     }
+  },
+  modifyVars(color) {
+    let darkColors = getDarkColors(color)
+    return {
+      'primary-color': color,
+      'info-color': color,
+      'processing-color': color,
+      'menu-dark-submenu-bg': darkColors[0],
+      'layout-header-background': darkColors[1],
+      'layout-trigger-background': darkColors[2]
+    }
   }
 }
diff --git a/vue.config.js b/vue.config.js
index 4d1c9c8..93a72e7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,6 @@
 let path = require('path')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
-const {getThemeColors, changeSelector} = require('./src/utils/themeUtil')
+const {getThemeColors, changeSelector, modifyVars} = require('./src/utils/themeUtil')
 const themeColor = require('./src/config').themeColor
 
 module.exports = {
@@ -24,12 +24,7 @@ module.exports = {
     loaderOptions: {
       less: {
         lessOptions: {
-          modifyVars: {
-            // 'link-color': '#ff4d85',
-            // 'processing-color': '#ff4d85',
-            // 'primary-color': '#ff4d85',
-            // 'primary': '#1890ff',
-          },
+          modifyVars: modifyVars(themeColor),
           javascriptEnabled: true
         }
       }