From 5e99cb1f95d1ec3190f436e2633baf007fcf22ee Mon Sep 17 00:00:00 2001
From: hz <hz932@qq.com>
Date: Sat, 25 May 2019 22:20:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E6=80=A7=E8=83=BD=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0ant-design=E5=9C=A8=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E6=97=B6=E5=8A=A8=E6=80=81=E6=94=B9=E5=8F=98=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=EF=BC=88=E5=88=A9=E7=94=A8webpack-theme-color-replace?=
 =?UTF-8?q?r=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/plugin.config.js                       | 41 +++++++++++++------
 package.json                                  |  3 +-
 .../SettingDrawer/themeColorClient.js         | 27 ++++++++++++
 src/models/setting.js                         |  8 ++++
 4 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 src/components/SettingDrawer/themeColorClient.js

diff --git a/config/plugin.config.js b/config/plugin.config.js
index 59ce550f..e57be8f8 100644
--- a/config/plugin.config.js
+++ b/config/plugin.config.js
@@ -1,7 +1,8 @@
 // Change theme plugin
 
 import MergeLessPlugin from 'antd-pro-merge-less';
-import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
+// import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
+const ThemeColorReplacer = require('webpack-theme-color-replacer');
 import path from 'path';
 
 function getModulePackageName(module) {
@@ -39,18 +40,21 @@ export default config => {
         outFile,
       },
     ]);
-
-    config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
-      {
-        antDir: path.join(__dirname, '../node_modules/antd'),
-        stylesDir,
-        varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
-        mainLessFile: outFile, //     themeVariables: ['@primary-color'],
-        indexFileName: 'index.html',
-        generateOne: true,
-        lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
-      },
-    ]);
+    config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [{
+      fileName: 'css/theme-colors.css',
+      matchColors: getAntdSerials('#1890ff'), // 主色系列
+    }]);
+    // config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
+    //   {
+    //     antDir: path.join(__dirname, '../node_modules/antd'),
+    //     stylesDir,
+    //     varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
+    //     mainLessFile: outFile, //     themeVariables: ['@primary-color'],
+    //     indexFileName: 'index.html',
+    //     generateOne: true,
+    //     lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
+    //   },
+    // ]);
   }
   // optimize chunks
   config.optimization
@@ -81,3 +85,14 @@ 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 0704f91a..f45c87f7 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "umi": "^2.4.4",
     "umi-plugin-react": "^1.7.2",
-    "umi-request": "^1.0.5"
+    "umi-request": "^1.0.5",
+    "webpack-theme-color-replacer": "^1.1.3"
   },
   "devDependencies": {
     "@types/history": "^4.7.2",
diff --git a/src/components/SettingDrawer/themeColorClient.js b/src/components/SettingDrawer/themeColorClient.js
new file mode 100644
index 00000000..9157c107
--- /dev/null
+++ b/src/components/SettingDrawer/themeColorClient.js
@@ -0,0 +1,27 @@
+const client = require('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)
+  },
+  changeColor (newColor) {
+    const lastColor = this.lastColor || this.primaryColor
+    const options = {
+      cssUrl: '/css/theme-colors.css', // hash模式下用相对路径
+      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)
+    this.lastColor = lastColor
+    return promise
+  }
+}
diff --git a/src/models/setting.js b/src/models/setting.js
index 3956ed3d..0ab74d90 100644
--- a/src/models/setting.js
+++ b/src/models/setting.js
@@ -1,6 +1,13 @@
 import { message } from 'antd';
 import defaultSettings from '../defaultSettings';
+import themeColorClient from '../components/SettingDrawer/themeColorClient'
 
+const updateTheme = newPrimaryColor => {
+  const hideMessage = message.loading('正在切换主题！', 0)
+  themeColorClient.changeColor(newPrimaryColor)
+    .finally(() => hideMessage())
+}
+/*
 let lessNodesAppended;
 const updateTheme = primaryColor => {
   // Don't compile less in production!
@@ -59,6 +66,7 @@ const updateTheme = primaryColor => {
     buildIt();
   }
 };
+*/
 
 const updateColorWeak = colorWeak => {
   document.body.className = colorWeak ? 'colorWeak' : '';
-- 
GitLab