From 4799ec156c9cb8e956df9f723bc6dc0f0b7bc588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Mon, 25 Nov 2019 20:18:29 +0800 Subject: [PATCH] feat: real dark (#4356) * new dark * change config name * merge master * button use less var * add popover config * style: change less var * better hove color * new style * use @ant-design/dark-theme * add umi-plugin-antd-theme * add theme config * add Welcome style * better config for dark * rm ThemeColorReplacer * remove webpack-theme-color * add load theme info * fix test * add test config * rm more theme values * remove unuse package --- azure-pipelines.yml | 5 +- config/config.ts | 73 ++++++++--- config/plugin.config.ts | 44 ------- config/themePluginConfig.ts | 115 ++++++++++++++++++ package.json | 15 ++- src/components/CopyBlock/index.less | 7 +- src/components/HeaderDropdown/index.less | 2 +- src/components/NoticeIcon/NoticeList.less | 4 +- .../SettingDrawer/themeColorClient.ts | 31 ----- src/e2e/baseLayout.e2e.js | 8 +- src/e2e/topMenu.e2e.js | 2 +- src/models/setting.ts | 42 +------ src/pages/Welcome.less | 8 ++ src/pages/Welcome.tsx | 12 +- src/typings.d.ts | 4 - tests/run-tests.js | 3 + 16 files changed, 216 insertions(+), 159 deletions(-) create mode 100644 config/themePluginConfig.ts delete mode 100644 src/components/SettingDrawer/themeColorClient.ts create mode 100644 src/pages/Welcome.less diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 2df685a5..8a4e672b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -38,7 +38,8 @@ jobs: displayName: install - script: npm run test:all env: - PROGRESS: none + PROGRESS: none + UMI_UI: none displayName: test - job: Windows @@ -55,6 +56,7 @@ jobs: - script: npm run test:all env: PROGRESS: none + UMI_UI: none displayName: test - script: npm run build env: @@ -75,4 +77,5 @@ jobs: - script: npm run env: PROGRESS: none + UMI_UI: none displayName: build diff --git a/config/config.ts b/config/config.ts index 06acb795..9e73853d 100644 --- a/config/config.ts +++ b/config/config.ts @@ -1,14 +1,17 @@ import { IConfig, IPlugin } from 'umi-types'; import defaultSettings from './defaultSettings'; // https://umijs.org/config/ - import slash from 'slash2'; -import webpackPlugin from './plugin.config'; +import themePluginConfig from './themePluginConfig'; + +// import darkTheme from '@ant-design/dark-theme'; + const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ; // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。 -const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env; +const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, TEST } = process.env; const isAntDesignProPreview = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site'; + const plugins: IPlugin[] = [ [ 'umi-plugin-react', @@ -37,8 +40,7 @@ const plugins: IPlugin[] = [ importWorkboxFrom: 'local', }, } - : false, - // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665 + : false, // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665 // dll features https://webpack.js.org/plugins/dll-plugin/ // dll: { // include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'], @@ -55,15 +57,55 @@ const plugins: IPlugin[] = [ autoAddMenu: true, }, ], -]; // 针对 preview.pro.ant.design 的 GA 统计代码 +]; if (isAntDesignProPreview) { + // 针对 preview.pro.ant.design 的 GA 统计代码 plugins.push([ 'umi-plugin-ga', { code: 'UA-72788897-6', }, ]); + plugins.push(['umi-plugin-antd-theme', themePluginConfig]); +} + +if (!TEST) { + plugins.push([ + 'umi-plugin-antd-theme', + { + theme: [ + { + key: 'dark', + fileName: 'dark.css', + theme: 'dark', + }, + { + key: 'dust', + fileName: 'dust.css', + modifyVars: { + '@primary-color': '#F5222D', + }, + }, + { + key: 'dust', + theme: 'dark', + fileName: 'dark-dust.css', + modifyVars: { + '@primary-color': '#F5222D', + }, + }, + { + key: 'volcano', + theme: 'dark', + fileName: 'dark-volcano.css', + modifyVars: { + '@primary-color': '#FA541C', + }, + }, + ], + }, + ]); } export default { @@ -134,6 +176,7 @@ export default { ], // Theme for antd: https://ant.design/docs/react/customize-theme-cn theme: { + // ...darkTheme, 'primary-color': primaryColor, }, define: { @@ -179,14 +222,12 @@ export default { manifest: { basePath: '/', }, - chainWebpack: webpackPlugin, - /* - proxy: { - '/server/api/': { - target: 'https://preview.pro.ant.design/', - changeOrigin: true, - pathRewrite: { '^/server': '' }, - }, - }, - */ + // chainWebpack: webpackPlugin, + // proxy: { + // '/server/api/': { + // target: 'https://preview.pro.ant.design/', + // changeOrigin: true, + // pathRewrite: { '^/server': '' }, + // }, + // }, } as IConfig; diff --git a/config/plugin.config.ts b/config/plugin.config.ts index 92a61403..d2d78ad7 100644 --- a/config/plugin.config.ts +++ b/config/plugin.config.ts @@ -1,8 +1,3 @@ -// Change theme plugin -// eslint-disable-next-line eslint-comments/abdeils - enable - pair; -/* eslint-disable import/no-extraneous-dependencies */ -import ThemeColorReplacer from 'webpack-theme-color-replacer'; -import generate from '@ant-design/colors/lib/generate'; import path from 'path'; function getModulePackageName(module: { context: string }) { @@ -25,33 +20,6 @@ function getModulePackageName(module: { context: string }) { } export default (config: any) => { - // preview.pro.ant.design only do not use in your production; - if ( - process.env.ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' || - process.env.NODE_ENV !== 'production' - ) { - config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [ - { - fileName: 'css/theme-colors-[contenthash:8].css', - matchColors: getAntdSerials('#1890ff'), // 主色系列 - // 改变样式选择器，解决样式覆盖问题 - changeSelector(selector: string): string { - switch (selector) { - case '.ant-calendar-today .ant-calendar-date': - return ':not(.ant-calendar-selected-date)' + selector; - case '.ant-btn:focus,.ant-btn:hover': - return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)'; - case '.ant-btn.active,.ant-btn:active': - return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'; - default: - return selector; - } - }, - // isJsUgly: true, - }, - ]); - } - // optimize chunks config.optimization // share the same chunks across different modules @@ -90,15 +58,3 @@ export default (config: any) => { }, }); }; - -const getAntdSerials = (color: string) => { - const lightNum = 9; - const devide10 = 10; - // 淡化（即less的tint） - const lightens = new Array(lightNum).fill(undefined).map((_, i: number) => { - return ThemeColorReplacer.varyColor.lighten(color, i / devide10); - }); - const colorPalettes = generate(color); - const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(','); - return lightens.concat(colorPalettes).concat(rgb); -}; diff --git a/config/themePluginConfig.ts b/config/themePluginConfig.ts new file mode 100644 index 00000000..af48f534 --- /dev/null +++ b/config/themePluginConfig.ts @@ -0,0 +1,115 @@ +export default { + theme: [ + { + key: 'dark', + fileName: 'dark.css', + theme: 'dark', + }, + { + key: 'dust', + fileName: 'dust.css', + modifyVars: { + '@primary-color': '#F5222D', + }, + }, + { + key: 'volcano', + fileName: 'volcano.css', + modifyVars: { + '@primary-color': '#FA541C', + }, + }, + { + key: 'sunset', + fileName: 'sunset.css', + modifyVars: { + '@primary-color': '#FAAD14', + }, + }, + { + key: 'cyan', + fileName: 'cyan.css', + modifyVars: { + '@primary-color': '#13C2C2', + }, + }, + { + key: 'green', + fileName: 'green.css', + modifyVars: { + '@primary-color': '#52C41A', + }, + }, + { + key: 'geekblue', + fileName: 'geekblue.css', + modifyVars: { + '@primary-color': '#2F54EB', + }, + }, + { + key: 'purple', + fileName: 'purple.css', + modifyVars: { + '@primary-color': '#722ED1', + }, + }, + + { + key: 'dust', + theme: 'dark', + fileName: 'dark-dust.css', + modifyVars: { + '@primary-color': '#F5222D', + }, + }, + { + key: 'volcano', + theme: 'dark', + fileName: 'dark-volcano.css', + modifyVars: { + '@primary-color': '#FA541C', + }, + }, + { + key: 'sunset', + theme: 'dark', + fileName: 'dark-sunset.css', + modifyVars: { + '@primary-color': '#FAAD14', + }, + }, + { + key: 'cyan', + theme: 'dark', + fileName: 'dark-cyan.css', + modifyVars: { + '@primary-color': '#13C2C2', + }, + }, + { + key: 'green', + theme: 'dark', + fileName: 'dark-green.css', + modifyVars: { + '@primary-color': '#52C41A', + }, + }, + { + key: 'geekblue', + theme: 'dark', + fileName: 'dark-geekblue.css', + modifyVars: { + '@primary-color': '#2F54EB', + }, + }, + { + key: 'purple', + theme: 'dark', + fileName: 'dark-purple.css', + modifyVars: { + '@primary-color': '#722ED1', + }, + }, + ], +}; diff --git a/package.json b/package.json index 4e749302..032bbc3b 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,8 @@ "not ie <= 10" ], "dependencies": { - "@ant-design/colors": "^3.1.0", - "@ant-design/pro-layout": "^4.5.16", + "@ant-design/dark-theme": "1.0.3", + "@ant-design/pro-layout": "4.8.0", "@antv/data-set": "^0.10.2", "antd": "^3.23.6", "classnames": "^2.2.6", @@ -73,12 +73,11 @@ "react-dom": "^16.8.6", "react-helmet": "^5.2.1", "redux": "^4.0.1", - "slash2": "^2.0.0", - "umi": "^2.9.6", - "umi-plugin-pro-block": "^1.3.4", - "umi-plugin-react": "^1.10.1", - "umi-request": "^1.2.7", - "webpack-theme-color-replacer": "^1.2.15" + "umi": "^2.8.7", + "umi-plugin-antd-theme": "^1.0.1", + "umi-plugin-pro-block": "^1.3.2", + "umi-plugin-react": "^1.9.5", + "umi-request": "^1.0.8" }, "devDependencies": { "@ant-design/pro-cli": "^1.0.13", diff --git a/src/components/CopyBlock/index.less b/src/components/CopyBlock/index.less index 83d899a1..00a9214e 100644 --- a/src/components/CopyBlock/index.less +++ b/src/components/CopyBlock/index.less @@ -1,3 +1,5 @@ +@import '~antd/es/style/themes/default.less'; + .copy-block { position: fixed; right: 80px; @@ -10,10 +12,9 @@ width: 40px; height: 40px; font-size: 20px; - background: #fff; + background: @input-bg; border-radius: 40px; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12); + box-shadow: @card-shadow; cursor: pointer; } diff --git a/src/components/HeaderDropdown/index.less b/src/components/HeaderDropdown/index.less index c2b98585..004b53eb 100644 --- a/src/components/HeaderDropdown/index.less +++ b/src/components/HeaderDropdown/index.less @@ -1,7 +1,7 @@ @import '~antd/es/style/themes/default.less'; .container > * { - background-color: #fff; + background-color: @popover-bg; border-radius: 4px; box-shadow: @shadow-1-down; } diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less index ce07d712..1aba6109 100755 --- a/src/components/NoticeIcon/NoticeList.less +++ b/src/components/NoticeIcon/NoticeList.less @@ -92,9 +92,7 @@ cursor: pointer; transition: all 0.3s; user-select: none; - &:hover { - color: @heading-color; - } + &:only-child { width: 100%; } diff --git a/src/components/SettingDrawer/themeColorClient.ts b/src/components/SettingDrawer/themeColorClient.ts deleted file mode 100644 index 19bcb055..00000000 --- a/src/components/SettingDrawer/themeColorClient.ts +++ /dev/null @@ -1,31 +0,0 @@ -// eslint-disable-next-line eslint-comments/disable-enable-pair -/* eslint-disable import/no-extraneous-dependencies */ -import client from 'webpack-theme-color-replacer/client'; -import generate from '@ant-design/colors/lib/generate'; - -export default { - getAntdSerials(color: string): string[] { - const lightCount = 9; - const divide = 10; - // 淡化（即less的tint） - let lightens = new Array(lightCount).fill(0); - lightens = lightens.map((_, i) => client.varyColor.lighten(color, i / divide)); - const colorPalettes = generate(color); - const rgb = client.varyColor.toNum3(color.replace('#', '')).join(','); - return lightens.concat(colorPalettes).concat(rgb); - }, - changeColor(color?: string): Promise { - if (!color) { - return Promise.resolve(); - } - const options = { - // 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}`; - }, - }; - return client.changer.changeColor(options, Promise); - }, -}; diff --git a/src/e2e/baseLayout.e2e.js b/src/e2e/baseLayout.e2e.js index 5d25f5c4..2e9a291d 100644 --- a/src/e2e/baseLayout.e2e.js +++ b/src/e2e/baseLayout.e2e.js @@ -19,6 +19,13 @@ function formatter(routes, parentPath = '') { return uniq(result.filter(item => !!item)); } +beforeAll(async () => { + await page.goto(`${BASE_URL}`); + await page.evaluate(() => { + localStorage.setItem('antd-pro-authority', '["admin"]'); + }); +}); + describe('Ant Design Pro E2E test', () => { const testPage = path => async () => { await page.goto(`${BASE_URL}${path}`); @@ -32,7 +39,6 @@ describe('Ant Design Pro E2E test', () => { }; const routers = formatter(RouterConfig); - console.log('routers', routers); routers.forEach(route => { it(`test pages ${route}`, testPage(route)); }); diff --git a/src/e2e/topMenu.e2e.js b/src/e2e/topMenu.e2e.js index 7c5f8556..a2b221c5 100644 --- a/src/e2e/topMenu.e2e.js +++ b/src/e2e/topMenu.e2e.js @@ -2,7 +2,7 @@ const BASE_URL = `http://localhost:${process.env.PORT || 8000}`; describe('Homepage', () => { it('topmenu should have footer', async () => { - const params = '/form/basic-form?navTheme=light&layout=topmenu'; + const params = '?navTheme=light&layout=topmenu'; await page.goto(`${BASE_URL}${params}`); await page.waitForSelector('footer', { timeout: 2000, diff --git a/src/models/setting.ts b/src/models/setting.ts index 7209d9b5..c915eed0 100644 --- a/src/models/setting.ts +++ b/src/models/setting.ts @@ -1,7 +1,5 @@ import { Reducer } from 'redux'; -import { message } from 'antd'; import defaultSettings, { DefaultSettings } from '../../config/defaultSettings'; -import themeColorClient from '../components/SettingDrawer/themeColorClient'; export interface SettingModelType { namespace: 'settings'; @@ -12,14 +10,6 @@ export interface SettingModelType { }; } -const updateTheme = (newPrimaryColor?: string) => { - if (newPrimaryColor) { - const timeOut = 0; - const hideMessage = message.loading('正在切换主题！', timeOut); - themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage()); - } -}; - const updateColorWeak: (colorWeak: boolean) => void = colorWeak => { const root = document.getElementById('root'); if (root) { @@ -37,14 +27,11 @@ const SettingModel: SettingModelType = { Object.keys(state).forEach(key => { if (urlParams.searchParams.has(key)) { const value = urlParams.searchParams.get(key); - setting[key] = value === '1' ? true : value; + setting[key] = value; } }); - const { primaryColor, colorWeak } = setting; + const { colorWeak } = setting; - if (primaryColor && state.primaryColor !== primaryColor) { - updateTheme(primaryColor); - } updateColorWeak(!!colorWeak); return { ...state, @@ -52,33 +39,12 @@ const SettingModel: SettingModelType = { }; }, changeSetting(state = defaultSettings, { payload }) { - const urlParams = new URL(window.location.href); - Object.keys(defaultSettings).forEach(key => { - if (urlParams.searchParams.has(key)) { - urlParams.searchParams.delete(key); - } - }); - Object.keys(payload).forEach(key => { - if (key === 'collapse') { - return; - } - let value = payload[key]; - if (value === true) { - value = 1; - } - if (defaultSettings[key] !== value) { - urlParams.searchParams.set(key, value); - } - }); - const { primaryColor, colorWeak, contentWidth } = payload; - if (primaryColor && state.primaryColor !== primaryColor) { - updateTheme(primaryColor); - } + const { colorWeak, contentWidth } = payload; + if (state.contentWidth !== contentWidth && window.dispatchEvent) { window.dispatchEvent(new Event('resize')); } updateColorWeak(!!colorWeak); - window.history.replaceState(null, 'setting', urlParams.href); return { ...state, ...payload, diff --git a/src/pages/Welcome.less b/src/pages/Welcome.less new file mode 100644 index 00000000..914c40d8 --- /dev/null +++ b/src/pages/Welcome.less @@ -0,0 +1,8 @@ +@import '~antd/lib/style/themes/default.less'; + +.pre { + margin: 12px 0; + padding: 12px 20px; + background: @input-bg; + box-shadow: @card-shadow; +} diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 52c8549e..0f5d96c1 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,16 +1,12 @@ import React from 'react'; -import { Card, Typography, Alert } from 'antd'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { FormattedMessage } from 'umi-plugin-react/locale'; +import { Card, Typography, Alert } from 'antd'; + +import styles from './Welcome.less'; const CodePreview: React.FC<{}> = ({ children }) => ( - 
+  
     
       {children}
     
diff --git a/src/typings.d.ts b/src/typings.d.ts
index e1ae4ed5..cd47da33 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -1,6 +1,4 @@
 declare module 'slash2';
-declare module 'antd-theme-webpack-plugin';
-
 declare module '*.css';
 declare module '*.less';
 declare module '*.scss';
@@ -17,8 +15,6 @@ declare module 'react-copy-to-clipboard';
 declare module 'react-fittext';
 declare module '@antv/data-set';
 declare module 'nzh/cn';
-declare module 'webpack-theme-color-replacer';
-declare module 'webpack-theme-color-replacer/client';
 
 // google analytics interface
 interface GAFieldsObject {
diff --git a/tests/run-tests.js b/tests/run-tests.js
index ea531ef1..93ee8d62 100644
--- a/tests/run-tests.js
+++ b/tests/run-tests.js
@@ -2,11 +2,14 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable eslint-comments/no-unlimited-disable */
 const { spawn } = require('child_process');
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { kill } = require('cross-port-killer');
 
 const env = Object.create(process.env);
 env.BROWSER = 'none';
 env.TEST = true;
+env.UMI_UI = 'none';
+env.PROGRESS = 'none';
 // flag to prevent multiple test
 let once = false;