From 0d29006f8b9b6f729c5900f7c64657c8a10d0bb4 Mon Sep 17 00:00:00 2001
From: hz <hz932@qq.com>
Date: Mon, 24 Jun 2019 03:48:18 -0500
Subject: [PATCH] Optimize and resolve theme color replacement issues (#4507)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 动态主题文件名（解决缓存问题）；简化客户端调用
---
 config/plugin.config.ts                       |  3 +-
 package.json                                  |  4 +--
 .../SettingDrawer/themeColorClient.ts         | 31 ++++++++++---------
 src/models/setting.ts                         |  8 +++--
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/config/plugin.config.ts b/config/plugin.config.ts
index d62068e6..4ba5a55e 100644
--- a/config/plugin.config.ts
+++ b/config/plugin.config.ts
@@ -32,7 +32,7 @@ export default (config: any) => {
   ) {
     config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
       {
-        fileName: 'css/theme-colors.css',
+        fileName: 'css/theme-colors-[contenthash:8].css',
         matchColors: getAntdSerials('#1890ff'), // 主色系列
         // 改变样式选择器，解决样式覆盖问题
         changeSelector(selector: string): string {
@@ -47,6 +47,7 @@ export default (config: any) => {
               return selector;
           }
         },
+        // isJsUgly: true,
       },
     ]);
   }
diff --git a/package.json b/package.json
index d96aab83..b0ae09ec 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "umi-plugin-ga": "^1.1.3",
     "umi-plugin-pro": "^1.0.2",
     "umi-types": "^0.3.8",
-    "webpack-theme-color-replacer": "^1.1.5"
+    "webpack-theme-color-replacer": "^1.2.15"
   },
   "optionalDependencies": {
     "puppeteer": "^1.17.0"
@@ -163,4 +163,4 @@
       "create-umi"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SettingDrawer/themeColorClient.ts b/src/components/SettingDrawer/themeColorClient.ts
index 355a99ae..d663e3bf 100644
--- a/src/components/SettingDrawer/themeColorClient.ts
+++ b/src/components/SettingDrawer/themeColorClient.ts
@@ -4,26 +4,27 @@ import client from 'webpack-theme-color-replacer/client';
 import generate from '@ant-design/colors/lib/generate';
 
 export default {
-  lastColor: '#1890ff',
-  primaryColor: '#1890ff',
-  getAntdSerials(color: string) {
+  getAntdSerials(color: string): string[] {
+    const lightCount = 9;
+    const divide = 10;
     // 淡化（即less的tint）
-    const lightens = new Array(9).fill(0).map((_, i) => client.varyColor.lighten(color, i / 10));
+    let lightens = new Array(lightCount).fill(0);
+    lightens = lightens.map((_, i) => client.varyColor.lighten(color, i / divide));
     const colorPalettes = generate(color);
     return lightens.concat(colorPalettes);
   },
-  changeColor(newColor?: string) {
-    const lastColor = this.lastColor || this.primaryColor;
+  changeColor(color?: string): Promise<void> {
+    if (!color) {
+      return Promise.resolve();
+    }
     const options = {
-      // hash模式下用相对路径
-      cssUrl: '/css/theme-colors.css',
-      // current colors array. The same as `matchColors`
-      oldColors: this.getAntdSerials(lastColor),
-      // new colors array, one-to-one corresponde with `oldColors`
-      newColors: this.getAntdSerials(newColor || this.primaryColor),
+      // new colors array, one-to-one corresponde with `matchColors`
+      newColors: this.getAntdSerials(color),
+      changeUrl(cssUrl: string): string {
+        // while router is not `hash` mode, it needs absolute path
+        return `/${cssUrl}`;
+      },
     };
-    const promise = client.changer.changeColor(options, Promise);
-    this.lastColor = lastColor;
-    return promise;
+    return client.changer.changeColor(options, Promise);
   },
 };
diff --git a/src/models/setting.ts b/src/models/setting.ts
index 15beb48e..2e52eb54 100644
--- a/src/models/setting.ts
+++ b/src/models/setting.ts
@@ -15,9 +15,11 @@ export interface SettingModelType {
 }
 
 const updateTheme = (newPrimaryColor?: string) => {
-  const timeOut = 0;
-  const hideMessage = message.loading('正在切换主题！', timeOut);
-  themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage());
+  if (newPrimaryColor) {
+    const timeOut = 0;
+    const hideMessage = message.loading('正在切换主题！', timeOut);
+    themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage());
+  }
 };
 
 /*
-- 
GitLab