From 25c42c38527aa31b1596cde3aa59a7c4a4a05b39 Mon Sep 17 00:00:00 2001
From: hz <hz932@qq.com>
Date: Sun, 26 May 2019 12:31:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8@ant-design/colors=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E4=B8=BB=E9=A2=98=E8=89=B2=E7=B3=BB=EF=BC=9B=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9IE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/plugin.config.js                         | 16 +++-------------
 package.json                                    |  8 ++++----
 .../SettingDrawer/themeColorClient.js           | 17 ++++++-----------
 3 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/config/plugin.config.js b/config/plugin.config.js
index e57be8f8..4582fe2f 100644
--- a/config/plugin.config.js
+++ b/config/plugin.config.js
@@ -2,8 +2,9 @@
 
 import MergeLessPlugin from 'antd-pro-merge-less';
 // import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
-const ThemeColorReplacer = require('webpack-theme-color-replacer');
+import ThemeColorReplacer from 'webpack-theme-color-replacer';
 import path from 'path';
+import generate from '@ant-design/colors/lib/generate';
 
 function getModulePackageName(module) {
   if (!module.context) return null;
@@ -42,7 +43,7 @@ export default config => {
     ]);
     config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [{
       fileName: 'css/theme-colors.css',
-      matchColors: getAntdSerials('#1890ff'), // 主色系列
+      matchColors: generate('#1890ff'), // 主色系列
     }]);
     // config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
     //   {
@@ -85,14 +86,3 @@ export default config => {
       },
     });
 };
-
-function getAntdSerials(color) {
-  const lightens = new Array(9).fill().map((t, i) => {
-    return ThemeColorReplacer.varyColor.lighten(color, i / 10);
-  });
-  // 此处为了简化，采用了darken。实际按color.less需求可以引入tinycolor, colorPalette变换得到颜色值
-  const darkens = new Array(6).fill().map((t, i) => {
-    return ThemeColorReplacer.varyColor.darken(color, i / 10);
-  });
-  return lightens.concat(darkens);
-}
diff --git a/package.json b/package.json
index f45c87f7..5684d8d7 100644
--- a/package.json
+++ b/package.json
@@ -82,15 +82,14 @@
     "resize-observer-polyfill": "^1.5.1",
     "umi": "^2.4.4",
     "umi-plugin-react": "^1.7.2",
-    "umi-request": "^1.0.5",
-    "webpack-theme-color-replacer": "^1.1.3"
+    "umi-request": "^1.0.5"
   },
   "devDependencies": {
     "@types/history": "^4.7.2",
     "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
     "antd-pro-merge-less": "^1.0.0",
-    "antd-theme-webpack-plugin": "^1.2.0",
+    "@ant-design/colors": "^3.1.0",
     "babel-eslint": "^10.0.1",
     "chalk": "^2.4.2",
     "check-prettier": "^1.0.1",
@@ -127,7 +126,8 @@
     "tslint": "^5.12.1",
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",
-    "umi-plugin-ga": "^1.1.3"
+    "umi-plugin-ga": "^1.1.3",
+    "webpack-theme-color-replacer": "^1.1.4"
   },
   "optionalDependencies": {
     "puppeteer": "^1.12.1"
diff --git a/src/components/SettingDrawer/themeColorClient.js b/src/components/SettingDrawer/themeColorClient.js
index 9157c107..9918122c 100644
--- a/src/components/SettingDrawer/themeColorClient.js
+++ b/src/components/SettingDrawer/themeColorClient.js
@@ -1,17 +1,11 @@
-const client = require('webpack-theme-color-replacer/client')
+/* eslint-disable import/no-extraneous-dependencies */
+import generate from '@ant-design/colors/lib/generate';
+import client from 'webpack-theme-color-replacer/client'
 
 export default {
   primaryColor: '#1890ff',
   getAntdSerials (color) {
-    // 淡化（即less的tint）
-    const lightens = new Array(9).fill().map((t, i) => {
-      return client.varyColor.lighten(color, i / 10)
-    })
-    // 此处为了简化，采用了darken。实际按color.less需求可以引入tinycolor, colorPalette变换得到颜色值
-    const darkens = new Array(6).fill().map((t, i) => {
-      return client.varyColor.darken(color, i / 10)
-    })
-    return lightens.concat(darkens)
+    return generate(color)
   },
   changeColor (newColor) {
     const lastColor = this.lastColor || this.primaryColor
@@ -20,8 +14,9 @@ export default {
       oldColors: this.getAntdSerials(lastColor), // current colors array. The same as `matchColors`
       newColors: this.getAntdSerials(newColor || this.primaryColor) // new colors array, one-to-one corresponde with `oldColors`
     }
-    const promise = client.changer.changeColor(options)
+    const promise = client.changer.changeColor(options, Promise);
     this.lastColor = lastColor
     return promise
   }
 }
+
-- 
GitLab