Fixed UI

Author: LyricTian

config/config.ts

@@ -1,11 +1,9 @@
 import { IConfig, IPlugin } from 'umi-types';
-
 import defaultSettings from './defaultSettings'; // https://umijs.org/config/
+
 import slash from 'slash2';
 import webpackPlugin from './plugin.config';
-
 const { pwa, primaryColor } = defaultSettings;
-
 const plugins: IPlugin[] = [
   [
     'umi-plugin-react',
@@ -14,19 +12,12 @@ const plugins: IPlugin[] = [
       dva: {
         hmr: true,
       },
-      locale: {
-        // default false
-        enable: true,
-        // default zh-CN
-        default: 'zh-CN',
-        // default true, when it is true, will use `navigator.language` overwrite default
-        baseNavigator: true,
+      locale: true,
+      dynamicImport: {
+        loadingComponent: './components/PageLoading/index',
+        webpackChunkName: true,
+        level: 3,
       },
-      // dynamicImport: {
-      //   loadingComponent: './components/PageLoading/index',
-      //   webpackChunkName: true,
-      //   level: 3,
-      // },
       pwa: pwa
         ? {
             workboxPluginMode: 'InjectManifest',
@@ -41,6 +32,7 @@ const plugins: IPlugin[] = [
       //   include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
       //   exclude: ['@babel/runtime', 'netlify-lambda'],
       // },
+      dll: true,
     },
   ],
   [
@@ -53,7 +45,6 @@ const plugins: IPlugin[] = [
     },
   ],
 ];
-
 export default {
   plugins,
   block: {
@@ -82,14 +73,29 @@ export default {
       path: '/',
       component: '../layouts/SecurityLayout',
       routes: [
-        { path: '/', redirect: '/dashboard' },
-        { path: '/dashboard', component: './Dashboard/Home' },
+        {
+          path: '/',
+          redirect: '/dashboard',
+        },
+        {
+          path: '/dashboard',
+          component: './Dashboard/Home',
+        },
         {
           path: '/system',
           routes: [
-            { path: '/system/menu', component: './Menu/MenuList' },
-            { path: '/system/role', component: './Role/RoleList' },
-            { path: '/system/user', component: './User/UserList' },
+            {
+              path: '/system/menu',
+              component: './Menu/MenuList',
+            },
+            {
+              path: '/system/role',
+              component: './Role/RoleList',
+            },
+            {
+              path: '/system/user',
+              component: './User/UserList',
+            },
           ],
         },
         {

config/plugin.config.ts

@@ -1,8 +1,6 @@
 // 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 +23,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 +61,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);
-};

package.json

@@ -66,12 +66,10 @@
     "react-helmet": "^5.2.1",
     "redux": "^4.0.1",
     "slash2": "^2.0.0",
-    "umi": "^2.9.6",
+    "umi": "^2.12.5",
     "umi-plugin-pro-block": "^1.3.4",
-    "umi-plugin-react": "^1.10.1",
-    "umi-request": "^1.2.7",
-    "uuid": "^3.3.3",
-    "webpack-theme-color-replacer": "^1.2.15"
+    "umi-plugin-react": "^1.14.8",
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^1.0.13",
@@ -111,7 +109,6 @@
     "prettier": "^1.17.1",
     "pro-download": "1.0.1",
     "stylelint": "^10.1.0",
-    "umi-plugin-ga": "^1.1.3",
     "umi-plugin-pro": "^1.0.2",
     "umi-types": "^0.5.0"
   },

src/components/SettingDrawer/themeColorClient.ts

@@ -32,7 +32,6 @@ describe('Ant Design Pro E2E test', () => {
   };
 
   const routers = formatter(RouterConfig);
-  console.log('routers', routers);
   routers.forEach(route => {
     it(`test pages ${route}`, testPage(route));
   });

src/e2e/baseLayout.e2e.js

@@ -2,7 +2,6 @@
 
 .header {
   position: relative;
-  padding: 0 12px 0 0;
   background: #002140;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 }

src/layouts/SecurityLayout.less

@@ -5,6 +5,7 @@ import { ConnectState } from '@/models/connect';
 import { ContainerQuery } from 'react-container-query';
 import CopyRight from '@/components/CopyRight';
 import DocumentTitle from 'react-document-title';
+import { Debounce } from 'lodash-decorators/debounce';
 import { GlobalContext } from '@/utils/context';
 import GlobalFooter from '@/components/GlobalFooter';
 import { GlobalModelState } from '@/models/global';
@@ -69,6 +70,14 @@ class SecurityLayout extends React.PureComponent<SecurityLayoutProps> {
     });
   }
 
+  @Debounce(600)
+  onTriggerResizeEvent() {
+    /* eslint class-methods-use-this: 0 */
+    const event = document.createEvent('HTMLEvents');
+    event.initEvent('resize', true, false);
+    window.dispatchEvent(event);
+  }
+
   dispatch = (action: any) => {
     const { dispatch } = this.props;
     dispatch(action);
@@ -285,7 +294,7 @@ class SecurityLayout extends React.PureComponent<SecurityLayoutProps> {
           </Menu>
         </Sider>
         <Layout>
-          <Header className={styles.header}>
+          <Header className={styles.header} style={{ padding: 0, paddingRight: 30 }}>
             <Icon
               className={styles.trigger}
               type={collapsed ? 'menu-unfold' : 'menu-fold'}