✨ Optimization Split Chunks, Antd Icon, CI.

Merge pull request #1060 from mlboy/patch-1
Update README.md
2026-10-20 08:16:39 +00:00 · 2020-08-20 14:16:32 +08:00 · 2020-06-03 14:46:44 +08:00 · 2020-05-13 07:42:01 +08:00 · 2020-05-10 21:05:23 +08:00 · 2020-05-10 21:04:40 +08:00
96 changed files with 1473 additions and 1001 deletions
@@ -1,23 +1,18 @@
 language: node_js
 node_js:
- node
+  - node
 script:
- npm run build
+  - npm run build
 before_install:
- |
-    if [ "$TRAVIS_BRANCH" = "develop" ]; then
-      for prefixed_envvar in ${!DEV_*}; do
-        eval export ${prefixed_envvar#DEV_}="${!prefixed_envvar}"
-      done
-    elif [ "$TRAVIS_BRANCH" = "master" ]; then
-      for prefixed_envvar in ${!PROD_*}; do
-        eval export ${prefixed_envvar#PROD_}="${!prefixed_envvar}"
-      done
-    fi
- openssl aes-256-cbc -K $encrypted_18b2305b78c9_key -iv $encrypted_18b2305b78c9_iv -in config/id_rsa.enc -out ~/.ssh/id_rsa -d
- chmod 600 ~/.ssh/id_rsa
- echo -e "Host $HOST\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
- yarn global add now
+  - yarn global add now
 after_script:
- scp -o stricthostkeychecking=no -r ./dist root@$HOST:$BUILD_DIR
- cd ./docs && now -A $DOC_NOW_CONFIG -t $NOW_TOKEN && now alias -A $DOC_NOW_CONFIG -t $NOW_TOKEN
+  - |
+    if [[ $TRAVIS_BRANCH == 'master' ]]; then
+      echo $PROD_SITE_NOW_CONFIG >> dist/vercel.json && echo $PROD_DOC_NOW_CONFIG >> docs/vercel.json;
+    else
+      echo $DEV_SITE_NOW_CONFIG >> dist/vercel.json && echo $DEV_DOC_NOW_CONFIG >> docs/vercel.json;
+    fi
+  - cd ./dist
+  - now -A vercel.json -t $NOW_TOKEN --prod -c
+  - cd ../docs
+  - now -A vercel.json -t $NOW_TOKEN --prod -c
@@ -1,92 +1,28 @@
 // https://umijs.org/config/
 import { resolve } from 'path'
-import { i18n } from './src/utils/config'
+const fs = require('fs')
+const path = require('path')
+const lessToJs = require('less-vars-to-js')
+const isDevelopment = process.env.NODE_ENV === 'development'

+// how to speed compile: https://umijs.org/guide/boost-compile-speed
 export default {
-  ignoreMomentLocale: true,
-  targets: { ie: 9 },
-  plugins: [
-    [
-      // https://umijs.org/plugin/umi-plugin-react.html
-      'umi-plugin-react',
-      {
-        dva: { immer: true },
-        antd: true,
-        dynamicImport: {
-          webpackChunkName: true,
-          loadingComponent: './components/Loader/Loader',
-        },
-        routes: {
-          exclude: [
-            /model\.(j|t)sx?$/,
-            /service\.(j|t)sx?$/,
-            /models\//,
-            /components\//,
-            /services\//,
-            /chart\/Container\.js$/,
-            /chart\/ECharts\/.+Component\.js$/,
-            /chart\/ECharts\/.+ComPonent\.js$/,
-            /chart\/ECharts\/theme\/.+\.js$/,
-            /chart\/highCharts\/.+Component\.js$/,
-            /chart\/highCharts\/mapdata\/.+\.js$/,
-            /chart\/Recharts\/.+Component\.js$/,
-            /chart\/Recharts\/Container\.js$/,
-          ],
-          update: routes => {
-            if (!i18n) return routes
-
-            const newRoutes = []
-            for (const item of routes[0].routes) {
-              newRoutes.push(item)
-              if (item.path) {
-                newRoutes.push(
-                  Object.assign({}, item, {
-                    path:
-                      `/:lang(${i18n.languages
-                        .map(item => item.key)
-                        .join('|')})` + item.path,
-                  })
-                )
-              }
-            }
-            routes[0].routes = newRoutes
-
-            return routes
-          },
-        },
-        dll: {
-          include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch', 'antd/es'],
-        },
-        hardSource: /* isMac */ process.platform === 'darwin',
-        pwa: {
-          manifestOptions: {
-            srcPath: 'manifest.json'
-          },
-        }
-      },
-    ],
-  ],
-  // Theme for antd
-  // https://ant.design/docs/react/customize-theme
-  theme: './config/theme.config.js',
-  // Webpack Configuration
-  proxy: {
-    '/api/v1/weather': {
-      target: 'https://api.seniverse.com/',
-      changeOrigin: true,
-      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
-    },
-  },
+  // IMPORTANT! change next line to yours or delete. And hide in dev
+  publicPath: isDevelopment ? '/' : 'https://cdn.antd-admin.zuiidea.com/',
  alias: {
    api: resolve(__dirname, './src/services/'),
    components: resolve(__dirname, './src/components'),
    config: resolve(__dirname, './src/utils/config'),
-    models: resolve(__dirname, './src/models'),
-    routes: resolve(__dirname, './src/routes'),
-    services: resolve(__dirname, './src/services'),
    themes: resolve(__dirname, './src/themes'),
    utils: resolve(__dirname, './src/utils'),
  },
+  antd: {},
+  // a lower cost way to genereate sourcemap, default is cheap-module-source-map, could save 60% time in dev hotload
+  devtool: 'eval',
+  dva: { immer: true },
+  dynamicImport: {
+    loading: 'components/Loader/Loader',
+  },
  extraBabelPresets: ['@lingui/babel-preset-react'],
  extraBabelPlugins: [
    [
@@ -98,5 +34,99 @@ export default {
      },
      'lodash',
    ],
+    [
+      'import',
+      {
+        libraryName: '@ant-design/icons',
+        libraryDirectory: 'es/icons',
+        camel2DashComponentName: false,
+      },
+      'ant-design-icons',
+    ],
  ],
+  hash: true,
+  ignoreMomentLocale: true,
+  // umi3 comple node_modules by default, could be disable
+  nodeModulesTransform: {
+    type: 'none',
+    exclude: [],
+  },
+  // Webpack Configuration
+  proxy: {
+    '/api/v1/weather': {
+      target: 'https://api.seniverse.com/',
+      changeOrigin: true,
+      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
+    },
+  },
+  targets: { ie: 9 },
+  // Theme for antd
+  // https://ant.design/docs/react/customize-theme
+  theme: lessToJs(
+    fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
+  ),
+  chainWebpack: function (config, { webpack }) {
+    config.merge({
+      optimization: {
+        minimize: true,
+        splitChunks: {
+          chunks: 'all',
+          minSize: 30000,
+          minChunks: 3,
+          automaticNameDelimiter: '.',
+          cacheGroups: {
+            react: {
+              name: 'react',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
+            },
+            antd: {
+              name: 'antd',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](antd|@ant-design\/icons)[\\/]/,
+            },
+            'echarts-gl': {
+              name: 'echarts-gl',
+              priority: 30,
+              test: /[\\/]node_modules[\\/]echarts-gl[\\/]/,
+            },
+            zrender: {
+              name: 'zrender',
+              priority: 30,
+              test: /[\\/]node_modules[\\/]zrender[\\/]/,
+            },
+            echarts: {
+              name: 'echarts',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](echarts|echarts-for-react|echarts-liquidfill)[\\/]/,
+            },
+            highcharts: {
+              name: 'highcharts',
+              priority: 20,
+              test: /[\\/]node_modules[\\/]highcharts[\\/]/,
+            },
+            recharts: {
+              name: 'recharts',
+              priority: 20,
+              test: /[\\/]node_modules[\\/]recharts[\\/]/,
+            },
+            draftjs: {
+              name: 'draftjs',
+              priority: 30,
+              test: /[\\/]node_modules[\\/](draft-js|react-draft-wysiwyg|draftjs-to-html|draftjs-to-markdown)[\\/]/,
+            },
+            async: {
+              chunks: 'async',
+              minChunks: 2,
+              name: 'async',
+              maxInitialRequests: 1,
+              minSize: 0,
+              priority: 5,
+              reuseExistingChunk: true,
+            },
+          },
+        },
+      },
+    })
+  },
 }
@@ -71,11 +71,11 @@ npm run start

 ## 支持环境

-现代浏览器及 IE9。
+现代浏览器。

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

 ## 参与贡献  

@@ -9,9 +9,9 @@

 <div align="center">

-A excellent front-end solution for enterprise applications.
+An excellent front-end solution for enterprise applications.

-[![antd](https://img.shields.io/badge/antd-^3.10.0-blue.svg?style=flat-square)](https://github.com/ant-design/ant-design)
+[![antd](https://img.shields.io/badge/antd-^4.0.0-blue.svg?style=flat-square)](https://github.com/ant-design/ant-design)
 [![umi](https://img.shields.io/badge/umi-^2.2.1-orange.svg?style=flat-square)](https://github.com/umijs/umi)
 [![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/issues)
 [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)
@@ -71,11 +71,11 @@ npm run start

 ## Browsers support

-Modern browsers and IE9.
+Modern browsers.

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

 ## Contributing

@@ -1,8 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const lessToJs = require('less-vars-to-js')
-
-module.exports = () => {
-  const themePath = path.join(__dirname, '../src/themes/default.less')
-  return lessToJs(fs.readFileSync(themePath, 'utf8'))
-}
@@ -8,7 +8,7 @@

 <div align="center">

-A excellent front-end solution for enterprise applications.
+An excellent front-end solution for enterprise applications.

 [![antd](https://img.shields.io/badge/antd-^3.10.0-blue.svg?style=flat-square)](https://github.com/ant-design/ant-design)
 [![umi](https://img.shields.io/badge/umi-^2.2.1-orange.svg?style=flat-square)](https://github.com/umijs/umi)
@@ -68,11 +68,11 @@ npm run start

 ## Browsers support

-Modern browsers and IE9.
+Modern browsers.

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

 ## Contributing

@@ -9,3 +9,4 @@
 - Guide
  - [Deploy](deploy.md)
 - [Change Log](change-log.md)
+- [FAQ](faq.md)
@@ -28,7 +28,7 @@

 - Support internationalization, extract source fields from source code, load language packs on demand, and automatically translate online.

- Support for the introduction of `ant-design-pro` components, `lodash` functions on demand.
+- Support for the introduction `lodash` functions on demand.
   
 - Support multiple layouts, which rules can be used according to the rules.

@@ -0,0 +1,9 @@
+# FAQ
+
+Most asked
+
+## create new page
+
+    1. just copy a page in /src/pages (route here auto generated by [umi](https://umijs.org/guide/router.html#basic-routing))
+    2. modify namespace/pathToRegexp in model.js
+    3. modify mock route.js to add a route
@@ -6,23 +6,23 @@ Take a new layout named `secondary` as an example to make the route starting wit

 1. Add related configuration in `src/utils/config.js`. For details, please refer to [layouts](/configuration?id=layouts).

-   ```javascript
+```javascript
    layouts: [
            {
                name: 'primary',
                include: [/.*/],
-               exlude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
+               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
            },
            {
                name: 'secondary',
                include: [/(\/(en|zh))*\/seconday\/(.*)/],
            },
    ],
-   ```
+```

 2. Add the `secondary` layout component to the `src/layouts/BaseLayout.js` file.

-   ```javascript
+```javascript
    import SecondaryLayout from './SecondaryLayout'

    const LayoutMap = {
@@ -30,11 +30,11 @@ Take a new layout named `secondary` as an example to make the route starting wit
      Public: PublicLayout,
      Secondary: SecondaryLayout,
    }
-   ```
+```

 3. Add the `SecondaryLayout.js` file to the `src/layouts/` directory.

-   ```javascript
+```javascript
    import React from 'react'

    export default ({ children }) => {
@@ -45,16 +45,16 @@ Take a new layout named `secondary` as an example to make the route starting wit
        </div>
      )
    }
-   ```
+```

 4. Add a `seconday/index.js` file to the `src/pages/` directory.

-   ```javascript
+```javascript
    import React from 'react'

    export default ({ children }) => {
      Return <div>Seconday page Content</div>
    }
-   ```
+```

-5. Finally, start the development mode `npm run start`, open [http://localhost:7000/seconday/](http://localhost:7000/seconday/) and you will see the page for the `seconday` layout.
+5. Finally, start the development mode `npm run start`, open [http://localhost:7000/seconday/](http://localhost:7000/seconday/) and you will see the page for the `seconday` layout.
@@ -1,6 +0,0 @@
-{
-  "name": "antd-admin-devdoc",
-  "alias": ["devdoc-antd-admin.now.sh", "devdoc.antd-admin.zuiidea.com"],
-  "type": "static",
-  "public": true
-}
@@ -1,6 +0,0 @@
-{
-  "name": "antd-admin-doc",
-  "alias": ["doc-antd-admin.now.sh", "doc.antd-admin.zuiidea.com"],
-  "type": "static",
-  "public": true
-}
@@ -68,11 +68,11 @@ npm run start

 ## 支持环境

-现代浏览器及 IE9。
+现代浏览器。

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

 ## 参与贡献  

@@ -28,7 +28,7 @@

 - 支持国际化，源码中抽离翻译字段，按需加载语言包，自动在线翻译。

- 支持按需引入 `ant-design-pro` 组件、`lodash` 函数。
+- 支持按需引入 `lodash` 函数。
  
 - 支持多布局，可根据规则规定哪些路由使用哪种布局。

@@ -44,7 +44,7 @@
            {
                name: 'primary',
                include: [/.*/],
-                exlude: [/(\/(en|zh))*\/login/],
+                exclude: [/(\/(en|zh))*\/login/],
            },
        ],
    ```
@@ -55,9 +55,9 @@
  
    - `include` - 指定使用该布局的路由规则列表，规则可为正则表达式或者字符串；
  
-    - `exlude` - 指定不使用该布局的路由规则列表，规则可为正则表达式或者字符串。
+    - `exclude` - 指定不使用该布局的路由规则列表，规则可为正则表达式或者字符串。
  
- > 注意：`exlude` 优先级高于 `include`，前面的布局优先级高于后面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局](./layout.md)。
+ > 注意：`exclude` 优先级高于 `include`，前面的布局优先级高于后面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局](./layout.md)。

 ## i18n

@@ -36,7 +36,7 @@ File sizes after gzip:

 `build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。

-> 如果  有使用 HashHistory 、 部署 html 到非根目录、静态化等需求，请查看[Umi 部署](https://umijs.org/zh/guide/deploy.html)。
+> 如果有使用 HashHistory 、 部署 html 到非根目录、静态化等需求，请查看[Umi 部署](https://umijs.org/zh/guide/deploy.html)。

 ## 本地验证

@@ -0,0 +1,7 @@
+# 问题集锦
+
+## 新建页面
+
+    1. 直接从/src/pages复制一个page (会自动创建路由[umi](https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1))
+    2. 修改 namespace/pathToRegexp 在 model.js
+    3. 修改 mock中route.js增加一条route
@@ -12,7 +12,7 @@
   npm run add-locale ja
   ```

-2. 提取代码中需要翻译的字段，即 `<Trans>message</Trans>`、`` i18n.t`message `` 中 `message` 字段，运行下面命令后 `src/locales/ja/messages.json` 将会出现提取后的字段配置。
+2. 提取代码中需要翻译的字段，即 `<Trans>message</Trans>`、`` intl.formatMessage({ id: 'message `` 中 `message` 字段，运行下面命令后 `src/locales/ja/messages.json' }) 将会出现提取后的字段配置。

   ```bash
   npm run extract
@@ -11,7 +11,7 @@
           {
               name: 'primary',
               include: [/.*/],
-               exlude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
+               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
           },
           {
               name: 'secondary',
@@ -4,10 +4,33 @@
  "display": "standalone",
  "background_color": "#fff",
  "description": "A front-end solution for enterprise applications built upon Ant Design and UmiJS",
-  "icons": [
+  "icons": [{
+      "src": "logo/logo@96.png",
+      "sizes": "72x72"
+    },
    {
-      "src": "logo.svg",
-      "sizes": "72x72 96x96 128x128 144x144 152x152 192x192 384x384 512x512"
+      "src": "logo/logo@128.png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "logo/logo@144.png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "logo/logo@152.png",
+      "sizes": "152x152"
+    },
+    {
+      "src": "logo/logo@192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo/logo@384.png",
+      "sizes": "384x384"
+    },
+    {
+      "src": "logo/logo@512.png",
+      "sizes": "512x512"
    }
  ]
 }
@@ -17,25 +17,22 @@ export function randomNumber(min, max) {
 }

 export function randomAvatar() {
-  // https://uifaces.co
  const avatarList = [
-    'https://randomuser.me/api/portraits/men/32.jpg',
-    'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',
-    'https://d3iw72m71ie81c.cloudfront.net/female-17.jpg',
-    'https://randomuser.me/api/portraits/men/35.jpg',
-    'https://pbs.twimg.com/profile_images/835224725815246848/jdMBCxHS.jpg',
-    'https://pbs.twimg.com/profile_images/584098247641300992/N25WgvW_.png',
-    'https://d3iw72m71ie81c.cloudfront.net/male-5.jpg',
-    'https://images.pexels.com/photos/413723/pexels-photo-413723.jpeg?h=350&auto=compress&cs=tinysrgb',
-    'https://randomuser.me/api/portraits/women/44.jpg',
-    'https://randomuser.me/api/portraits/women/68.jpg',
-    'https://randomuser.me/api/portraits/women/65.jpg',
-    'https://randomuser.me/api/portraits/men/43.jpg',
-    'https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg',
-    'https://pbs.twimg.com/profile_images/943227488292962306/teiNNAiy.jpg',
-    'https://randomuser.me/api/portraits/men/46.jpg'
+    'photo-1549492864-2ec7d66ffb04.jpeg',
+    'photo-1480535339474-e083439a320d.jpeg',
+    'photo-1523419409543-a5e549c1faa8.jpeg',
+    'photo-1519648023493-d82b5f8d7b8a.jpeg',
+    'photo-1523307730650-594bc63f9d67.jpeg',
+    'photo-1522962506050-a2f0267e4895.jpeg',
+    'photo-1489779162738-f81aed9b0a25.jpeg',
+    'photo-1534308143481-c55f00be8bd7.jpeg',
+    'photo-1519336555923-59661f41bb45.jpeg',
+    'photo-1551438632-e8c7d9a5d1b7.jpeg',
+    'photo-1525879000488-bff3b1c387cf.jpeg',
+    'photo-1487412720507-e7ab37603c6f.jpeg',
+    'photo-1510227272981-87123e259b17.jpeg'
  ]
-  return avatarList[randomNumber(0, avatarList.length - 1)]
+  return `//image.zuiidea.com/${avatarList[randomNumber(0, avatarList.length - 1)]}?imageView2/1/w/200/h/200/format/webp/q/75|imageslim`
 }

 export const Constant = {
@@ -105,7 +105,7 @@ const Dashboard = Mock.mock({
    content:
      "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
    avatar:
-      'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
+      '//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
  },
  numbers: [
    {
@@ -6,14 +6,24 @@ const database = [
    id: '1',
    icon: 'dashboard',
    name: 'Dashboard',
-    zhName: '仪表盘',
+    zh: {
+      name: '仪表盘'
+    },
+    'pt-br': {
+      name: 'Dashboard'
+    },
    route: '/dashboard',
  },
  {
    id: '2',
    breadcrumbParentId: '1',
    name: 'Users',
-    zhName: '用户管理',
+    zh: {
+      name: '用户管理'
+    },
+    'pt-br': {
+      name: 'Usuário'
+    },
    icon: 'user',
    route: '/user',
  },
@@ -21,7 +31,12 @@ const database = [
    id: '7',
    breadcrumbParentId: '1',
    name: 'Posts',
-    zhName: '文章管理',
+    zh: {
+      name: '用户管理'
+    },
+    'pt-br': {
+      name: 'Posts'
+    },
    icon: 'shopping-cart',
    route: '/post',
  },
@@ -30,14 +45,24 @@ const database = [
    menuParentId: '-1',
    breadcrumbParentId: '2',
    name: 'User Detail',
-    zhName: '用户详情',
+    zh: {
+      name: '用户详情'
+    },
+    'pt-br': {
+      name: 'Detalhes do usuário'
+    },
    route: '/user/:id',
  },
  {
    id: '3',
    breadcrumbParentId: '1',
    name: 'Request',
-    zhName: 'Request',
+    zh: {
+      name: 'Request'
+    },
+    'pt-br': {
+      name: 'Requisição'
+    },
    icon: 'api',
    route: '/request',
  },
@@ -45,7 +70,12 @@ const database = [
    id: '4',
    breadcrumbParentId: '1',
    name: 'UI Element',
-    zhName: 'UI组件',
+    zh: {
+      name: 'UI组件'
+    },
+    'pt-br': {
+      name: 'Elementos UI'
+    },
    icon: 'camera-o',
  },
  {
@@ -53,15 +83,25 @@ const database = [
    breadcrumbParentId: '4',
    menuParentId: '4',
    name: 'Editor',
-    zhName: 'Editor',
+    zh: {
+      name: 'Editor'
+    },
+    'pt-br': {
+      name: 'Editor'
+    },
    icon: 'edit',
-    route: '/UIElement/editor',
+    route: '/editor',
  },
  {
    id: '5',
    breadcrumbParentId: '1',
    name: 'Charts',
-    zhName: 'Charts',
+    zh: {
+      name: 'Charts'
+    },
+    'pt-br': {
+      name: 'Graficos'
+    },
    icon: 'code-o',
  },
  {
@@ -69,7 +109,12 @@ const database = [
    breadcrumbParentId: '5',
    menuParentId: '5',
    name: 'ECharts',
-    zhName: 'ECharts',
+    zh: {
+      name: 'ECharts'
+    },
+    'pt-br': {
+      name: 'ECharts'
+    },
    icon: 'line-chart',
    route: '/chart/ECharts',
  },
@@ -78,7 +123,12 @@ const database = [
    breadcrumbParentId: '5',
    menuParentId: '5',
    name: 'HighCharts',
-    zhName: 'HighCharts',
+    zh: {
+      name: 'HighCharts'
+    },
+    'pt-br': {
+      name: 'HighCharts'
+    },
    icon: 'bar-chart',
    route: '/chart/highCharts',
  },
@@ -87,7 +137,12 @@ const database = [
    breadcrumbParentId: '5',
    menuParentId: '5',
    name: 'Rechartst',
-    zhName: 'Rechartst',
+    zh: {
+      name: 'Rechartst'
+    },
+    'pt-br': {
+      name: 'Rechartst'
+    },
    icon: 'area-chart',
    route: '/chart/Recharts',
  },
@@ -1,4 +1,5 @@
-import { Mock, Constant, qs, randomAvatar } from './_utils'
+import { Mock, Constant, randomAvatar } from './_utils'
+import qs from 'qs'

 const { ApiPrefix } = Constant

@@ -1,21 +1,21 @@
 {
  "name": "antd-admin",
-  "version": "5.0.1",
-  "private": true,
+  "version": "5.3.0",
+  "license": "MIT",
  "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
  "dependencies": {
-    "@lingui/react": "^2.7.1",
-    "ant-design-pro": "^2.1.1",
-    "antd": "^3.10.7",
-    "axios": "^0.18.0",
-    "babel-core": "7.0.0-bridge.0",
+    "@ant-design/icons": "^4.2.2",
+    "@lingui/react": "^2.8.0",
+    "antd": "^4.0.0",
+    "axios": "^0.19.0",
    "classnames": "^2.2.6",
-    "d3-shape": "^1.2.2",
-    "draftjs-to-html": "^0.8.4",
-    "draftjs-to-markdown": "^0.5.1",
+    "d3-shape": "^1.3.0",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.0",
+    "draftjs-to-markdown": "^0.6.0",
    "dva-model-extend": "^0.1.2",
-    "echarts": "^4.2.0-rc.2",
-    "echarts-for-react": "^2.0.15-beta.0",
+    "echarts": "^4.4.0",
+    "echarts-for-react": "^2.0.15-beta.1",
    "echarts-gl": "^1.1.1",
    "echarts-liquidfill": "^2.0.2",
    "enquire-js": "^0.2.1",
@@ -25,49 +25,48 @@
    "lodash": "^4.17.11",
    "md5": "^2.2.1",
    "nprogress": "^0.2.0",
-    "path-to-regexp": "^2.4.0",
-    "prop-types": "^15.6.2",
-    "qs": "^6.5.2",
-    "rc-tween-one": "^2.2.17",
-    "react-adsense": "^0.0.6",
-    "react-countup": "^4.0.0-alpha.6",
-    "react-draft-wysiwyg": "^1.12.13",
-    "react-helmet": "^5.2.0",
-    "react-highcharts": "^16.0.2",
-    "react-perfect-scrollbar": "^1.4.2",
-    "recharts": "^1.3.6",
-    "store": "^2.0.12"
+    "path-to-regexp": "^6.1.0",
+    "prop-types": "^15.7.0",
+    "qs": "^6.9.0",
+    "react-adsense": "^0.1.0",
+    "react-countup": "^4.2.0",
+    "react-draft-wysiwyg": "^1.13.0",
+    "react-helmet": "^6.0.0",
+    "react-highcharts": "^16.1.0",
+    "react-perfect-scrollbar": "^1.5.0",
+    "recharts": "^2.0.0-beta.3",
+    "store": "^2.0.0"
  },
  "devDependencies": {
-    "@lingui/babel-preset-react": "^2.7.1",
-    "@lingui/cli": "^2.7.1",
-    "@lingui/loader": "^2.7.1",
+    "@lingui/babel-preset-react": "^2.9.0",
+    "@lingui/cli": "^2.9.0",
+    "@lingui/loader": "^2.9.0",
+    "@umijs/preset-react": "^1.4.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-import": "^1.10.0",
-    "babel-plugin-macros": "^2.4.2",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.9.0",
-    "eslint-config-react-app": "^3.0.5",
-    "eslint-plugin-flowtype": "^3.0.0",
-    "eslint-plugin-import": "^2.6.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.1.0",
-    "husky": "^1.1.4",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "cross-env": "^7.0.0",
+    "eslint": "^7.0.0",
+    "eslint-config-react-app": "^5.0.0",
+    "eslint-plugin-flowtype": "^5.1.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.14.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "husky": "^4.2.0",
    "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^8.0.4",
-    "mockjs": "^1.0.1-beta3",
+    "lint-staged": "^10.0.0",
+    "mockjs": "^1.1.0",
    "module": "^1.2.5",
-    "prettier": "^1.15.2",
-    "stylelint": "^9.8.0",
-    "stylelint-config-prettier": "^4.0.0",
-    "stylelint-config-standard": "^18.2.0",
-    "umi": "^2.2.8",
-    "umi-plugin-react": "^1.2.3"
+    "prettier": "^2.0.0",
+    "stylelint": "^13.2.0",
+    "stylelint-config-prettier": "^8.0.0",
+    "stylelint-config-standard": "^20.0.0",
+    "typescript": "^3.8.3",
+    "umi": "^3.2.0"
  },
-  "optionalDependencies": {
-    "puppeteer": "^1.10.0"
+  "engines": {
+    "node": ">= 10.0.0"
  },
  "lint-staged": {
    "src/**/*.js": [
@@ -94,18 +93,19 @@
    "format": "minimal",
    "extractBabelOptions": {
      "presets": [
-        "umi/babel"
+        "@umijs/babel-preset-umi"
      ]
    }
  },
  "scripts": {
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "umi build",
+    "check:model": "umi dva list model",
    "lint:js": "eslint --ext .js src",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "start": "umi dev",
    "test": "cross-env BABELRC=none umi test",
-    "prettier": "prettier --write 'src/**/*.(js|less)'",
+    "prettier": "prettier --write 'src/**/*.{js,less}'",
    "precommit": "lint-staged",
    "add-locale": "lingui add-locale",
    "extract": "lingui extract",
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect style="fill:#D80027;" width="512" height="512"/>
+<polygon style="fill:#6DA544;" points="196.641,0 196.641,264.348 196.641,512 0,512 0,0 "/>
+<circle style="fill:#FFDA44;" cx="196.641" cy="256" r="96"/>
+<path style="fill:#D80027;" d="M142.638,208v60c0,29.823,24.178,54,54,54s54-24.178,54-54v-60H142.638z"/>
+<path style="fill:#F0F0F0;" d="M196.638,286c-9.925,0-18-8.075-18-18v-24.001h36V268C214.638,277.925,206.563,286,196.638,286z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Dropdown, Button, Icon, Menu } from 'antd'
+import { BarsOutlined, DownOutlined } from '@ant-design/icons'
+import { Dropdown, Button, Menu } from 'antd'

 const DropOption = ({
  onMenuClick,
@@ -17,8 +18,8 @@ const DropOption = ({
      {...dropdownProps}
    >
      <Button style={{ border: 'none', ...buttonStyle }}>
-        <Icon style={{ marginRight: 2 }} type="bars" />
-        <Icon type="down" />
+        <BarsOutlined style={{ marginRight: 2 }} />
+        <DownOutlined />
      </Button>
    </Dropdown>
  )
@@ -0,0 +1,21 @@
+import React from 'react';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export interface EllipsisTooltipProps extends TooltipProps {
+  title?: undefined;
+  overlayStyle?: undefined;
+}
+
+export interface EllipsisProps {
+  tooltip?: boolean | EllipsisTooltipProps;
+  length?: number;
+  lines?: number;
+  style?: React.CSSProperties;
+  className?: string;
+  fullWidthRecognition?: boolean;
+}
+
+export function getStrFullLength(str: string): number;
+export function cutStrByFullLength(str: string, maxLength: number): string;
+
+export default class Ellipsis extends React.Component<EllipsisProps, any> {}
@@ -0,0 +1,270 @@
+import React, { Component } from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+/* eslint react/no-did-mount-set-state: 0 */
+/* eslint no-param-reassign: 0 */
+
+const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+const TooltipOverlayStyle = {
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
+};
+
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0);
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1;
+    }
+    return pre + 2;
+  }, 0);
+
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0;
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0);
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1;
+    } else {
+      showLength += 2;
+    }
+    if (showLength <= maxLength) {
+      return pre + cur;
+    }
+    return pre;
+  }, '');
+};
+
+const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
+  if (tooltip) {
+    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    return <Tooltip {...props}>{children}</Tooltip>;
+  }
+  return children;
+};
+
+const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
+  if (typeof text !== 'string') {
+    throw new Error('Ellipsis children must be string.');
+  }
+  const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length;
+  if (textLength <= length || length < 0) {
+    return <span {...other}>{text}</span>;
+  }
+  const tail = '...';
+  let displayText;
+  if (length - tail.length <= 0) {
+    displayText = '';
+  } else {
+    displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
+  }
+
+  const spanAttrs = tooltip ? {} : { ...other };
+  return getTooltip({
+    tooltip,
+    overlayStyle: TooltipOverlayStyle,
+    title: text,
+    children: (
+      <span {...spanAttrs}>
+        {displayText}
+        {tail}
+      </span>
+    ),
+  });
+};
+
+export default class Ellipsis extends Component {
+  state = {
+    text: '',
+    targetCount: 0,
+  };
+
+  componentDidMount() {
+    if (this.node) {
+      this.computeLine();
+    }
+  }
+
+  componentDidUpdate(perProps) {
+    const { lines } = this.props;
+    if (lines !== perProps.lines) {
+      this.computeLine();
+    }
+  }
+
+  computeLine = () => {
+    const { lines } = this.props;
+    if (lines && !isSupportLineClamp) {
+      const text = this.shadowChildren.innerText || this.shadowChildren.textContent;
+      const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
+      const targetHeight = lines * lineHeight;
+      this.content.style.height = `${targetHeight}px`;
+      const totalHeight = this.shadowChildren.offsetHeight;
+      const shadowNode = this.shadow.firstChild;
+
+      if (totalHeight <= targetHeight) {
+        this.setState({
+          text,
+          targetCount: text.length,
+        });
+        return;
+      }
+
+      // bisection
+      const len = text.length;
+      const mid = Math.ceil(len / 2);
+
+      const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
+
+      this.setState({
+        text,
+        targetCount: count,
+      });
+    }
+  };
+
+  bisection = (th, m, b, e, text, shadowNode) => {
+    const suffix = '...';
+    let mid = m;
+    let end = e;
+    let begin = b;
+    shadowNode.innerHTML = text.substring(0, mid) + suffix;
+    let sh = shadowNode.offsetHeight;
+
+    if (sh <= th) {
+      shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh > th || mid === begin) {
+        return mid;
+      }
+      begin = mid;
+      if (end - begin === 1) {
+        mid = 1 + begin;
+      } else {
+        mid = Math.floor((end - begin) / 2) + begin;
+      }
+      return this.bisection(th, mid, begin, end, text, shadowNode);
+    }
+    if (mid - 1 < 0) {
+      return mid;
+    }
+    shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
+    sh = shadowNode.offsetHeight;
+    if (sh <= th) {
+      return mid - 1;
+    }
+    end = mid;
+    mid = Math.floor((end - begin) / 2) + begin;
+    return this.bisection(th, mid, begin, end, text, shadowNode);
+  };
+
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleContent = n => {
+    this.content = n;
+  };
+
+  handleNode = n => {
+    this.node = n;
+  };
+
+  handleShadow = n => {
+    this.shadow = n;
+  };
+
+  handleShadowChildren = n => {
+    this.shadowChildren = n;
+  };
+
+  render() {
+    const { text, targetCount } = this.state;
+    const {
+      children,
+      lines,
+      length,
+      className,
+      tooltip,
+      fullWidthRecognition,
+      ...restProps
+    } = this.props;
+
+    const cls = classNames(styles.ellipsis, className, {
+      [styles.lines]: lines && !isSupportLineClamp,
+      [styles.lineClamp]: lines && isSupportLineClamp,
+    });
+
+    if (!lines && !length) {
+      return (
+        <span className={cls} {...restProps}>
+          {children}
+        </span>
+      );
+    }
+
+    // length
+    if (!lines) {
+      return (
+        <EllipsisText
+          className={cls}
+          length={length}
+          text={children || ''}
+          tooltip={tooltip}
+          fullWidthRecognition={fullWidthRecognition}
+          {...restProps}
+        />
+      );
+    }
+
+    const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
+
+    // support document.body.style.webkitLineClamp
+    if (isSupportLineClamp) {
+      const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
+
+      const node = (
+        <div id={id} className={cls} {...restProps}>
+          <style>{style}</style>
+          {children}
+        </div>
+      );
+
+      return getTooltip({
+        tooltip,
+        overlayStyle: TooltipOverlayStyle,
+        title: children,
+        children: node,
+      });
+    }
+
+    const childNode = (
+      <span ref={this.handleNode}>
+        {targetCount > 0 && text.substring(0, targetCount)}
+        {targetCount > 0 && targetCount < text.length && '...'}
+      </span>
+    );
+
+    return (
+      <div {...restProps} ref={this.handleRoot} className={cls}>
+        <div ref={this.handleContent}>
+          {getTooltip({
+            tooltip,
+            overlayStyle: TooltipOverlayStyle,
+            title: text,
+            children: childNode,
+          })}
+          <div className={styles.shadow} ref={this.handleShadowChildren}>
+            {children}
+          </div>
+          <div className={styles.shadow} ref={this.handleShadow}>
+            <span>{text}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
@@ -0,0 +1,24 @@
+.ellipsis {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.lines {
+  position: relative;
+  .shadow {
+    position: absolute;
+    z-index: -999;
+    display: block;
+    color: transparent;
+    opacity: 0;
+  }
+}
+
+.lineClamp {
+  position: relative;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
@@ -0,0 +1,17 @@
+---
+title: Ellipsis
+subtitle: 文本自动省略号
+cols: 1
+order: 10
+---
+
+文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
+
+## API
+
+| 参数                 | 说明                                             | 类型    | 默认值 |
+| -------------------- | ------------------------------------------------ | ------- | ------ |
+| tooltip              | 移动到文本展示完整内容的提示                     | boolean | -      |
+| length               | 在按照长度截取下的文本最大字符数，超过则截取省略 | number  | -      |
+| lines                | 在按照行数截取下最大的行数，超过则截取省略       | number  | `1`    |
+| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度      | boolean | -      |
@@ -0,0 +1,13 @@
+import { getStrFullLength, cutStrByFullLength } from './index';
+
+describe('test calculateShowLength', () => {
+  it('get full length', () => {
+    expect(getStrFullLength('一二，a,')).toEqual(8);
+  });
+  it('cut str by full length', () => {
+    expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a');
+  });
+  it('cut str when length small', () => {
+    expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
+  });
+});
@@ -6,7 +6,7 @@ const FilterItem = ({ label = '', children }) => {
  const labelArray = label.split('')
  return (
    <div className={styles.filterItem}>
-      {labelArray.length > 0 ? (
+      {labelArray.length > 0 && (
        <div className={styles.labelWrap}>
          {labelArray.map((item, index) => (
            <span className="labelText" key={index}>
@@ -14,8 +14,6 @@ const FilterItem = ({ label = '', children }) => {
            </span>
          ))}
        </div>
-      ) : (
-        ''
      )}
      <div className={styles.item}>{children}</div>
    </div>
@@ -0,0 +1,14 @@
+import React from 'react';
+export interface GlobalFooterProps {
+  links?: Array<{
+    key?: string;
+    title: React.ReactNode;
+    href: string;
+    blankTarget?: boolean;
+  }>;
+  copyright?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default class GlobalFooter extends React.Component<GlobalFooterProps, any> {}
@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const GlobalFooter = ({ className, links, copyright }) => {
+  const clsString = classNames(styles.globalFooter, className);
+  return (
+    <footer className={clsString}>
+      {links && (
+        <div className={styles.links}>
+          {links.map(link => (
+            <a
+              key={link.key}
+              title={link.key}
+              target={link.blankTarget ? '_blank' : '_self'}
+              href={link.href}
+            >
+              {link.title}
+            </a>
+          ))}
+        </div>
+      )}
+      {copyright && <div className={styles.copyright}>{copyright}</div>}
+    </footer>
+  );
+};
+
+export default GlobalFooter;
@@ -0,0 +1,29 @@
+@import '~antd/lib/style/themes/default.less';
+
+.globalFooter {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: @text-color-secondary;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+
+      &:hover {
+        color: @text-color;
+      }
+    }
+  }
+
+  .copyright {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}
@@ -0,0 +1,15 @@
+---
+title: GlobalFooter
+subtitle: 全局页脚
+cols: 1
+order: 7
+---
+
+页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。
+
+## API
+
+| 参数      | 说明     | 类型                                                             | 默认值 |
+| --------- | -------- | ---------------------------------------------------------------- | ------ |
+| links     | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -      |
+| copyright | 版权信息 | ReactNode                                                        | -      |
@@ -1,34 +1,37 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Breadcrumb, Icon } from 'antd'
-import Link from 'umi/navlink'
-import withRouter from 'umi/withRouter'
+import { Breadcrumb } from 'antd'
+import { Link, withRouter } from 'umi'
 import { withI18n } from '@lingui/react'
-import { pathMatchRegexp, queryAncestors } from 'utils'
+import iconMap from 'utils/iconMap'
+const { pathToRegexp } = require('path-to-regexp')
+import { queryAncestors } from 'utils'
 import styles from './Bread.less'

@withI18n()
@withRouter
 class Bread extends PureComponent {
-  generateBreadcrumbs = paths => {
+  generateBreadcrumbs = (paths) => {
    return paths.map((item, key) => {
-      const content = (
+      const content = item && (
        <Fragment>
-          {item.icon ? (
-            <Icon type={item.icon} style={{ marginRight: 4 }} />
-          ) : null}
+          {item.icon && (
+            <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>
+          )}
          {item.name}
        </Fragment>
      )

      return (
-        <Breadcrumb.Item key={key}>
-          {paths.length - 1 !== key ? (
-            <Link to={item.route || '#'}>{content}</Link>
-          ) : (
-            content
-          )}
-        </Breadcrumb.Item>
+        item && (
+          <Breadcrumb.Item key={key}>
+            {paths.length - 1 !== key ? (
+              <Link to={item.route || '#'}>{content}</Link>
+            ) : (
+              content
+            )}
+          </Breadcrumb.Item>
+        )
      )
    })
  }
@@ -37,7 +40,7 @@ class Bread extends PureComponent {

    // Find a route that matches the pathname.
    const currentRoute = routeList.find(
-      _ => _.route && pathMatchRegexp(_.route, location.pathname)
+      (_) => _.route && pathToRegexp(_.route).exec(location.pathname)
    )

    // Find the breadcrumb navigation of the current route match and all its ancestors.
@@ -1,7 +1,13 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon, Layout, Avatar, Popover, Badge, List } from 'antd'
-import { Ellipsis } from 'ant-design-pro'
+import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
+import { Ellipsis } from 'components'
+import {
+  BellOutlined,
+  RightOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons'
 import { Trans, withI18n } from '@lingui/react'
 import { setLocale } from 'utils'
 import moment from 'moment'
@@ -85,7 +91,7 @@ class Header extends PureComponent {
        trigger="click"
        key="notifications"
        overlayClassName={styles.notificationPopover}
-        getPopupContainer={() => document.querySelector('#layoutHeader')}
+        getPopupContainer={() => document.querySelector('#primaryLayout')}
        content={
          <div className={styles.notification}>
            <List
@@ -104,11 +110,7 @@ class Header extends PureComponent {
                    }
                    description={moment(item.date).fromNow()}
                  />
-                  <Icon
-                    style={{ fontSize: 10, color: '#ccc' }}
-                    type="right"
-                    theme="outlined"
-                  />
+                  <RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
                </List.Item>
              )}
            />
@@ -129,7 +131,7 @@ class Header extends PureComponent {
          offset={[-10, 10]}
          className={styles.iconButton}
        >
-          <Icon className={styles.iconFont} type="bell" />
+          <BellOutlined className={styles.iconFont} />
        </Badge>
      </Popover>
    )
@@ -146,14 +148,8 @@ class Header extends PureComponent {
          className={styles.button}
          onClick={onCollapseChange.bind(this, !collapsed)}
        >
-          <Icon
-            type={classnames({
-              'menu-unfold': collapsed,
-              'menu-fold': !collapsed,
-            })}
-          />
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
-
        <div className={styles.rightContainer}>{rightContent}</div>
      </Layout.Header>
    )
@@ -16,7 +16,7 @@
    top: 0;
    right: 0;
    width: ~'calc(100% - 256px)';
-    z-index: 9;
+    z-index: 29;
    transition: width 0.2s;

    &.collapsed {
@@ -1,14 +1,10 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon } from 'antd'
-import Navlink from 'umi/navlink'
-import withRouter from 'umi/withRouter'
-import {
-  arrayToTree,
-  queryAncestors,
-  pathMatchRegexp,
-  addLangPrefix,
-} from 'utils'
+import { Menu } from 'antd'
+import { NavLink, withRouter } from 'umi'
+import { pathToRegexp } from 'path-to-regexp'
+import { arrayToTree, queryAncestors } from 'utils'
+import iconMap from 'utils/iconMap'
 import store from 'store'

 const { SubMenu } = Menu
@@ -46,7 +42,7 @@ class SiderMenu extends PureComponent {
            key={item.id}
            title={
              <Fragment>
-                {item.icon && <Icon type={item.icon} />}
+                {item.icon && iconMap[item.icon]}
                <span>{item.name}</span>
              </Fragment>
            }
@@ -57,10 +53,10 @@ class SiderMenu extends PureComponent {
      }
      return (
        <Menu.Item key={item.id}>
-          <Navlink to={addLangPrefix(item.route) || '#'}>
-            {item.icon && <Icon type={item.icon} />}
+          <NavLink to={item.route || '#'}>
+            {item.icon && iconMap[item.icon]}
            <span>{item.name}</span>
-          </Navlink>
+          </NavLink>
        </Menu.Item>
      )
    })
@@ -81,7 +77,7 @@ class SiderMenu extends PureComponent {

    // Find a menu that matches the pathname.
    const currentMenu = menus.find(
-      _ => _.route && pathMatchRegexp(_.route, location.pathname)
+      _ => _.route && pathToRegexp(_.route).exec(location.pathname)
    )

    // Find the key that should be selected according to the current menu.
@@ -89,13 +85,17 @@ class SiderMenu extends PureComponent {
      ? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id)
      : []

+    const menuProps = collapsed
+      ? {}
+      : {
+          openKeys: this.state.openKeys,
+        }
+
    return (
      <Menu
        mode="inline"
        theme={theme}
        onOpenChange={this.onOpenChange}
-        openKeys={this.state.openKeys}
-        inlineCollapsed={collapsed}
        selectedKeys={selectedKeys}
        onClick={
          isMobile
@@ -104,6 +104,7 @@ class SiderMenu extends PureComponent {
              }
            : undefined
        }
+        {...menuProps}
      >
        {this.generateMenus(menuTree)}
      </Menu>
@@ -115,7 +116,6 @@ SiderMenu.propTypes = {
  menus: PropTypes.array,
  theme: PropTypes.string,
  isMobile: PropTypes.bool,
-  collapsed: PropTypes.bool,
  onCollapseChange: PropTypes.func,
 }

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Switch, Layout } from 'antd'
+import { Switch, Layout } from 'antd'
 import { withI18n, Trans } from '@lingui/react'
+import { BulbOutlined } from '@ant-design/icons'
 import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
 import SiderMenu from './Menu'
@@ -28,19 +29,19 @@ class Sider extends PureComponent {
        trigger={null}
        collapsible
        collapsed={collapsed}
-        onBreakpoint={isMobile ? null : onCollapseChange}
+        onBreakpoint={!isMobile && onCollapseChange}
        className={styles.sider}
      >
        <div className={styles.brand}>
          <div className={styles.logo}>
            <img alt="logo" src={config.logoPath} />
-            {collapsed ? null : <h1>{config.siteName}</h1>}
+            {!collapsed && <h1>{config.siteName}</h1>}
          </div>
        </div>

        <div className={styles.menuContainer}>
          <ScrollBar
-            option={{
+            options={{
              // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
              suppressScrollX: true,
            }}
@@ -54,10 +55,10 @@ class Sider extends PureComponent {
            />
          </ScrollBar>
        </div>
-        {collapsed ? null : (
+        {!collapsed && (
          <div className={styles.switchTheme}>
            <span>
-              <Icon type="bulb" />
+              <BulbOutlined />
              <Trans>Switch Theme</Trans>
            </span>
            <Switch
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'

-const Loader = ({ spinning = true, fullScreen }) => {
+const Loader = ({ spinning = false, fullScreen }) => {
  return (
    <div
      className={classNames(styles.loader, {
@@ -3,7 +3,9 @@ import FilterItem from './FilterItem'
 import DropOption from './DropOption'
 import Loader from './Loader'
 import ScrollBar from './ScrollBar'
+import GlobalFooter from './GlobalFooter'
+import Ellipsis from './Ellipsis'
 import * as MyLayout from './Layout/index.js'
 import Page from './Page'

-export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar }
+export { MyLayout, Editor, GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, Page, ScrollBar }
@@ -1,12 +1,12 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Helmet } from 'react-helmet'
 import { Loader } from 'components'
 import { queryLayout } from 'utils'
 import NProgress from 'nprogress'
 import config from 'utils/config'
-import withRouter from 'umi/withRouter'
+import { withRouter } from 'umi'

 import PublicLayout from './PublicLayout'
 import PrimaryLayout from './PrimaryLayout'
@@ -2,15 +2,16 @@
 /* global document */
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import withRouter from 'umi/withRouter'
-import { connect } from 'dva'
-import { MyLayout } from 'components'
+import { withRouter } from 'umi'
+import { connect } from 'umi'
+import { MyLayout, GlobalFooter } from 'components'
 import { BackTop, Layout, Drawer } from 'antd'
-import { GlobalFooter } from 'ant-design-pro'
 import { enquireScreen, unenquireScreen } from 'enquire-js'
-import { config, pathMatchRegexp, langFromPath } from 'utils'
+const { pathToRegexp } = require("path-to-regexp")
+import { config, getLocale } from 'utils'
 import Error from '../pages/404'
 import styles from './PrimaryLayout.less'
+import store from 'store'

 const { Content } = Layout
 const { Header, Bread, Sider } = MyLayout
@@ -46,32 +47,30 @@ class PrimaryLayout extends PureComponent {

  render() {
    const { app, location, dispatch, children } = this.props
-    const {
-      user,
-      theme,
-      routeList,
-      collapsed,
-      permissions,
-      notifications,
-    } = app
+    const { theme, collapsed, notifications } = app
+    const user = store.get('user') || {}
+    const permissions = store.get('permissions') || {}
+    const routeList = store.get('routeList') || []
    const { isMobile } = this.state
    const { onCollapseChange } = this

    // Localized route name.
+
+    const lang = getLocale()
    const newRouteList =
-      langFromPath(location.pathname) === 'zh'
+      lang !== 'en'
        ? routeList.map(item => {
-            const { zhName, ...other } = item
+            const { name, ...other } = item
            return {
              ...other,
-              name: zhName,
+              name: (item[lang] || {}).name || name,
            }
          })
        : routeList

    // Find a route that matches the pathname.
    const currentRoute = newRouteList.find(
-      _ => _.route && pathMatchRegexp(_.route, location.pathname)
+      _ => _.route && pathToRegexp(_.route).exec(location.pathname)
    )

    // Query whether you have permission to enter this page
@@ -145,7 +144,7 @@ class PrimaryLayout extends PureComponent {
            </Content>
            <BackTop
              className={styles.backTop}
-              target={() => document.querySelector('#primaryLayout>div')}
+              target={() => document.querySelector('#primaryLayout')}
            />
            <GlobalFooter
              className={styles.footer}
@@ -1,17 +1,21 @@
 import React, { Component } from 'react'
-import withRouter from 'umi/withRouter'
-import { LocaleProvider } from 'antd'
+import { withRouter } from 'umi'
+import { ConfigProvider } from 'antd'
 import { I18nProvider } from '@lingui/react'
-import { langFromPath, defaultLanguage } from 'utils'
+import { getLocale } from 'utils'
+const { i18n } = require('../../src/utils/config')
 import zh_CN from 'antd/lib/locale-provider/zh_CN'
 import en_US from 'antd/lib/locale-provider/en_US'
+import pt_BR from 'antd/lib/locale-provider/pt_BR'

 import BaseLayout from './BaseLayout'

 const languages = {
  zh: zh_CN,
  en: en_US,
+  'pt-br': pt_BR,
 }
+const { defaultLanguage } = i18n

@withRouter
 class Layout extends Component {
@@ -22,18 +26,18 @@ class Layout extends Component {
  language = defaultLanguage

  componentDidMount() {
-    const language = langFromPath(this.props.location.pathname)
+    const language = getLocale()
    this.language = language
-    this.loadCatalog(language)
+    language && this.loadCatalog(language)
  }

  shouldComponentUpdate(nextProps, nextState) {
-    const language = langFromPath(nextProps.location.pathname)
+    const language = getLocale()
    const preLanguage = this.language
    const { catalogs } = nextState

    if (preLanguage !== language && !catalogs[language]) {
-      this.loadCatalog(language)
+      language && this.loadCatalog(language)
      this.language = language
      return false
    }
@@ -43,8 +47,10 @@ class Layout extends Component {
  }

  loadCatalog = async language => {
-    const catalog = await import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
-    `@lingui/loader!../locales/${language}/messages.json`)
+    const catalog = await import(
+      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
+      `@lingui/loader!../locales/${language}/messages.json`
+    )

    this.setState(state => ({
      catalogs: {
@@ -55,19 +61,19 @@ class Layout extends Component {
  }

  render() {
-    const { location, children } = this.props
+    const { children } = this.props
    const { catalogs } = this.state

-    let language = langFromPath(location.pathname)
+    let language = getLocale()
    // If the language pack is not loaded or is loading, use the default language
    if (!catalogs[language]) language = defaultLanguage

    return (
-      <LocaleProvider locale={languages[language]}>
+      <ConfigProvider locale={languages[language]}>
        <I18nProvider language={language} catalogs={catalogs}>
          <BaseLayout>{children}</BaseLayout>
        </I18nProvider>
-      </LocaleProvider>
+      </ConfigProvider>
    )
  }
 }
@@ -0,0 +1,54 @@
+{
+  "/dashboard": "/dashboard",
+  "Add Param": "Add Parametro",
+  "Address": "Endereço",
+  "Age": "Ano",
+  "Are you sure delete this record?": "Tem certeza de excluir este registro?",
+  "Author": "Autor",
+  "Avatar": "Avatar",
+  "Categories": "Categorias",
+  "Clear notifications": "limpar notificações",
+  "Comments": "Comentarios",
+  "Create": "Criar",
+  "Create User": "Criar Usuário",
+  "CreateTime": "CreateTime",
+  "Dark": "Escuro",
+  "Delete": "Deletar",
+  "Email": "Email",
+  "Female": "Feminino",
+  "Gender": "Genero",
+  "Hi,": "Olá,",
+  "Image": "Imagem",
+  "Light": "Claro",
+  "Male": "masculino",
+  "Name": "Nome",
+  "NickName": "NickName",
+  "Not Found": "Não Encontrado",
+  "Operation": "Operation",
+  "Params": "Parametros",
+  "Password": "Senha",
+  "Phone": "Fone",
+  "Pick an address": "Escolha um endereço",
+  "Please pick an address": "Por favor, escolha um endereço",
+  "Publised": "Publicado",
+  "Publish Date": "Data de publicação",
+  "Reset": "Reset",
+  "Search": "procurar",
+  "Search Name": "Search Name",
+  "Send": "Enviar",
+  "Sign in": "Sign in",
+  "Sign out": "Sign out",
+  "Switch Theme": "Trocar tema",
+  "Tags": "Tags",
+  "The input is not valid E-mail!": "Não é um E-mail valido!",
+  "The input is not valid phone!": "Não é um telefone Valido!",
+  "Title": "Titulo",
+  "Total {total} Items": "Total {total} Items",
+  "Unpublished": "Não publicado",
+  "Update": "Atualizar",
+  "Update User": "Atualizar Usuário",
+  "Username": "Usuário",
+  "Views": "visualizações",
+  "Visibility": "Visibilidade",
+  "You have viewed all notifications.": "Você visualizou todas as notificações."
+}
@@ -1,21 +1,28 @@
 /* global window */

-import { router } from 'utils'
+import { history } from 'umi'
 import { stringify } from 'qs'
 import store from 'store'
+const { pathToRegexp } = require("path-to-regexp")
 import { ROLE_TYPE } from 'utils/constant'
-import { queryLayout, pathMatchRegexp } from 'utils'
+import { queryLayout } from 'utils'
 import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
-import { queryRouteList, logoutUser, queryUserInfo } from 'api'
+import api from 'api'
 import config from 'config'

+const { queryRouteList, logoutUser, queryUserInfo } = api
+
+const goDashboard = () => {
+  if (pathToRegexp(['/', '/login']).exec(window.location.pathname)) {
+    history.push({
+      pathname: '/dashboard',
+    })
+  }
+}
+
 export default {
  namespace: 'app',
  state: {
-    user: {},
-    permissions: {
-      visit: [],
-    },
    routeList: [
      {
        id: '1',
@@ -41,6 +48,9 @@ export default {
    ],
  },
  subscriptions: {
+    setup({ dispatch }) {
+      dispatch({ type: 'query' })
+    },
    setupHistory({ dispatch, history }) {
      history.listen(location => {
        dispatch({
@@ -65,16 +75,17 @@ export default {
        })
      })
    },
-
-    setup({ dispatch }) {
-      dispatch({ type: 'query' })
-    },
  },
  effects: {
    *query({ payload }, { call, put, select }) {
-      const { success, user } = yield call(queryUserInfo, payload)
+      // store isInit to prevent query trigger by refresh
+      const isInit = store.get('isInit')
+      if (isInit) {
+        goDashboard()
+        return
+      }
      const { locationPathname } = yield select(_ => _.app)
-
+      const { success, user } = yield call(queryUserInfo, payload)
      if (success && user) {
        const { list } = yield call(queryRouteList)
        const { permissions } = user
@@ -96,21 +107,13 @@ export default {
            return cases.every(_ => _)
          })
        }
-        yield put({
-          type: 'updateState',
-          payload: {
-            user,
-            permissions,
-            routeList,
-          },
-        })
-        if (pathMatchRegexp('/login', window.location.pathname)) {
-          router.push({
-            pathname: '/dashboard',
-          })
-        }
+        store.set('routeList', routeList)
+        store.set('permissions', permissions)
+        store.set('user', user)
+        store.set('isInit', true)
+        goDashboard()
      } else if (queryLayout(config.layouts, locationPathname) !== 'public') {
-        router.push({
+        history.push({
          pathname: '/login',
          search: stringify({
            from: locationPathname,
@@ -122,22 +125,10 @@ export default {
    *signOut({ payload }, { call, put }) {
      const data = yield call(logoutUser)
      if (data.success) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            user: {},
-            permissions: { visit: [] },
-            menu: [
-              {
-                id: '1',
-                icon: 'laptop',
-                name: 'Dashboard',
-                zhName: '仪表盘',
-                router: '/dashboard',
-              },
-            ],
-          },
-        })
+        store.set('routeList', [])
+        store.set('permissions', { visit: [] })
+        store.set('user', {})
+        store.set('isInit', false)
        yield put({ type: 'query' })
      } else {
        throw data
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Icon } from 'antd'
+import { FrownOutlined } from '@ant-design/icons'
 import { Page } from 'components'
 import styles from './404.less'

 const Error = () => (
  <Page inner>
    <div className={styles.error}>
-      <Icon type="frown-o" />
+      <FrownOutlined />
      <h1>404 Not Found</h1>
    </div>
  </Page>
@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ResponsiveContainer } from 'recharts'
-import styles from './Container.less'
-
-const Container = ({
-  children,
-  ratio = 5 / 2,
-  minHeight = 250,
-  maxHeight = 350,
-}) => (
-  <div className={styles.container} style={{ minHeight, maxHeight }}>
-    <div style={{ marginTop: `${100 / ratio}%` || '100%' }} />
-    <div className={styles.content} style={{ minHeight, maxHeight }}>
-      <ResponsiveContainer>{children}</ResponsiveContainer>
-    </div>
-  </div>
-)
-
-Container.propTypes = {
-  children: PropTypes.element.isRequired,
-  ratio: PropTypes.number,
-  minHeight: PropTypes.number,
-  maxHeight: PropTypes.number,
-}
-
-export default Container
@@ -1,20 +0,0 @@
-.container {
-  width: 100%;
-  position: relative;
-  display: inline-block;
-
-  :global {
-    .recharts-responsive-container {
-      width: e('calc(100% + 56px)') !important;
-      margin-left: -32px;
-    }
-  }
-}
-
-.content {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
@@ -1,6 +1,6 @@
 import React from 'react'
 import AdSense from 'react-adsense'
-import { Link } from 'react-router'
+import { Link } from 'umi'
 import DynamicChartComponent from './DynamicChartComponent.js'

 const MainPageComponent = () => {
@@ -38,7 +38,7 @@ function Browser({ data }) {
      pagination={false}
      showHeader={false}
      columns={columns}
-      rowKey={(record, key) => key}
+      rowKey='name'
      dataSource={data}
    />
  )
@@ -54,7 +54,7 @@ function Comments({ data }) {
        pagination={false}
        showHeader={false}
        columns={columns}
-        rowKey={(record, key) => key}
+        rowKey='avatar'
        dataSource={data.filter((item, key) => key < 3)}
      />
    </div>
@@ -73,7 +73,7 @@ function Completed({ data }) {
              return (
                <div className={styles.tooltip}>
                  <p className={styles.tiptitle}>{content.label}</p>
-                  <ul>{list}</ul>
+                  {content.payload && <ul>{list}</ul>}
                </div>
              )
            }}
@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Card } from 'antd'
+import { Card } from 'antd'
 import CountUp from 'react-countup'
+import iconMap from 'utils/iconMap'
 import styles from './numberCard.less'

+
 function NumberCard({ icon, color, title, number, countUp }) {
  return (
    <Card
@@ -11,7 +13,9 @@ function NumberCard({ icon, color, title, number, countUp }) {
      bordered={false}
      bodyStyle={{ padding: 10 }}
    >
-      <Icon className={styles.iconWarp} style={{ color }} type={icon} />
+      <span className={styles.iconWarp} style={{ color }}>
+        {iconMap[icon]}
+      </span>
      <div className={styles.content}>
        <p className={styles.title}>{title || 'No Title'}</p>
        <p className={styles.number}>
@@ -22,7 +26,7 @@ function NumberCard({ icon, color, title, number, countUp }) {
            useEasing
            useGrouping
            separator=","
-            {...countUp || {}}
+            {...(countUp || {})}
          />
        </p>
      </div>
@@ -53,7 +53,7 @@ function RecentSales({ data }) {
      <Table
        pagination={false}
        columns={columns}
-        rowKey={(record, key) => key}
+        rowKey='id'
        dataSource={data.filter((item, key) => key < 5)}
      />
    </div>
@@ -73,7 +73,7 @@ function Sales({ data }) {
              return (
                <div className={styles.tooltip}>
                  <p className={styles.tiptitle}>{content.label}</p>
-                  <ul>{list}</ul>
+                  {content.payload && <ul>{list}</ul>}
                </div>
              )
            }}
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Row, Col, Card } from 'antd'
 import { Color } from 'utils'
 import { Page, ScrollBar } from 'components'
@@ -17,6 +17,7 @@ import {
  User,
 } from './components'
 import styles from './index.less'
+import store from 'store'

 const bodyStyle = {
  bodyStyle: {
@@ -26,14 +27,14 @@ const bodyStyle = {
 }

@connect(({ app, dashboard, loading }) => ({
-  avatar: app.user.avatar,
-  username: app.user.username,
  dashboard,
  loading,
 }))
 class Dashboard extends PureComponent {
  render() {
-    const { avatar, username, dashboard, loading } = this.props
+    const userDetail = store.get('user')
+    const { avatar, username } = userDetail
+    const { dashboard, loading } = this.props
    const {
      weather,
      sales,
@@ -154,8 +155,6 @@ class Dashboard extends PureComponent {
 }

 Dashboard.propTypes = {
-  avatar: PropTypes.string,
-  username: PropTypes.string,
  dashboard: PropTypes.object,
  loading: PropTypes.object,
 }
@@ -1,9 +1,12 @@
 import { parse } from 'qs'
 import modelExtend from 'dva-model-extend'
-import { queryDashboard, queryWeather } from 'api'
-import { pathMatchRegexp } from 'utils'
+import api from 'api'
+const { pathToRegexp } = require("path-to-regexp")
 import { model } from 'utils/model'

+const { queryDashboard, queryWeather } = api
+const avatar = '//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236.jpeg'
+
 export default modelExtend(model, {
  namespace: 'dashboard',
  state: {
@@ -11,12 +14,11 @@ export default modelExtend(model, {
      city: '深圳',
      temperature: '30',
      name: '晴',
-      icon: '//s5.sencdn.com/web/icons/3d_50/2.png',
+      icon: '//cdn.antd-admin.zuiidea.com/sun.png',
    },
    sales: [],
    quote: {
-      avatar:
-        'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
+      avatar,
    },
    numbers: [],
    recentSales: [],
@@ -25,16 +27,15 @@ export default modelExtend(model, {
    browser: [],
    cpu: {},
    user: {
-      avatar:
-        'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
+      avatar,
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (
-          pathMatchRegexp('/dashboard', pathname) ||
-          pathMatchRegexp('/', pathname)
+          pathToRegexp('/dashboard').exec(pathname) ||
+          pathToRegexp('/').exec(pathname)
        ) {
          dispatch({ type: 'query' })
          dispatch({ type: 'queryWeather' })
@@ -60,7 +61,7 @@ export default modelExtend(model, {
          city: data.location.name,
          temperature: data.now.temperature,
          name: data.now.text,
-          icon: `//s5.sencdn.com/web/icons/3d_50/${data.now.code}.png`,
+          icon: `//cdn.antd-admin.zuiidea.com/web/icons/3d_50/${data.now.code}.png`,
        }
        yield put({
          type: 'updateState',
@@ -1,11 +1,11 @@
-import React from 'react'
-import { Editor } from 'components'
+import { Component } from 'react'
+import { Editor, Page } from 'components'
 import { convertToRaw } from 'draft-js'
 import { Row, Col, Card } from 'antd'
 import draftToHtml from 'draftjs-to-html'
 import draftToMarkdown from 'draftjs-to-markdown'

-export default class EditorPage extends React.Component {
+export default class EditorPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
@@ -26,17 +26,18 @@ export default class EditorPage extends React.Component {
      md: 24,
      style: {
        marginBottom: 32,
-      },
+      }
    }
    const textareaStyle = {
      minHeight: 496,
      width: '100%',
      background: '#f7f7f7',
      borderColor: '#F1F1F1',
-      padding: '16px 8px',
+      padding: '16px 8px'
    }
+
    return (
-      <div className="content-inner">
+      <Page inner>
        <Row gutter={32}>
          <Col {...colProps}>
            <Card title="Editor" style={{ overflow: 'visible' }}>
@@ -98,7 +99,7 @@ export default class EditorPage extends React.Component {
            </Card>
          </Col>
        </Row>
-      </div>
+      </Page>
    )
  }
 }
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import Redirect from 'umi/redirect'
+import { Redirect } from 'umi'
 import { withI18n } from '@lingui/react'

@withI18n()
@@ -1,38 +1,31 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
-import { Button, Row, Form, Icon, Input } from 'antd'
-import { GlobalFooter } from 'ant-design-pro'
+import { connect } from 'umi'
+import { Button, Row, Input, Form } from 'antd'
+import { GlobalFooter } from 'components'
+import { GithubOutlined } from '@ant-design/icons'
 import { Trans, withI18n } from '@lingui/react'
 import { setLocale } from 'utils'
 import config from 'utils/config'

 import styles from './index.less'
+
 const FormItem = Form.Item

@withI18n()
-@connect(({ loading }) => ({ loading }))
-@Form.create()
+@connect(({ loading, dispatch }) => ({ loading, dispatch }))
 class Login extends PureComponent {
-  handleOk = () => {
-    const { dispatch, form } = this.props
-    const { validateFieldsAndScroll } = form
-    validateFieldsAndScroll((errors, values) => {
-      if (errors) {
-        return
-      }
-      dispatch({ type: 'login/login', payload: values })
-    })
-  }

  render() {
-    const { loading, form, i18n } = this.props
-    const { getFieldDecorator } = form
-
+    const { dispatch, loading, i18n } = this.props
+    
+    const handleOk = values => {
+      dispatch({ type: 'login/login', payload: values })
+    }
    let footerLinks = [
      {
        key: 'github',
-        title: <Icon type="github" />,
+        title: <GithubOutlined />,
        href: 'https://github.com/zuiidea/antd-admin',
        blankTarget: true,
      },
@@ -56,46 +49,32 @@ class Login extends PureComponent {
            <img alt="logo" src={config.logoPath} />
            <span>{config.siteName}</span>
          </div>
-          <form>
-            <FormItem hasFeedback>
-              {getFieldDecorator('username', {
-                rules: [
-                  {
-                    required: true,
-                  },
-                ],
-              })(
+          <Form
+            onFinish={handleOk}
+            >
+            <FormItem name="username" 
+              rules={[{ required: true }]} hasFeedback>
                <Input
-                  onPressEnter={this.handleOk}
                  placeholder={i18n.t`Username`}
                />
-              )}
            </FormItem>
-            <FormItem hasFeedback>
-              {getFieldDecorator('password', {
-                rules: [
-                  {
-                    required: true,
-                  },
-                ],
-              })(
+            <FormItem name="password"
+              rules={[{ required: true }]} hasFeedback>
                <Input
                  type="password"
-                  onPressEnter={this.handleOk}
                  placeholder={i18n.t`Password`}
                />
-              )}
            </FormItem>
            <Row>
              <Button
                type="primary"
-                onClick={this.handleOk}
+                htmlType="submit"
                loading={loading.effects.login}
              >
                <Trans>Sign in</Trans>
              </Button>
              <p>
-                <span>
+                <span className="margin-right">
                  <Trans>Username</Trans>
                  ：guest
                </span>
@@ -105,7 +84,7 @@ class Login extends PureComponent {
                </span>
              </p>
            </Row>
-          </form>
+          </Form>
        </div>
        <div className={styles.footer}>
          <GlobalFooter links={footerLinks} copyright={config.copyright} />
@@ -1,11 +1,21 @@
-import { router, pathMatchRegexp } from 'utils'
-import { loginUser } from 'api'
+import { history } from 'umi'
+const { pathToRegexp } = require("path-to-regexp")
+import api from 'api'
+
+const { loginUser } = api

 export default {
  namespace: 'login',

  state: {},
-
+  // subscriptions: {
+  //   setup({ dispatch, history }) {
+  //     history.listen(location => {
+  //       if (pathToRegexp('/login').exec(location.pathname)) {
+  //       }
+  //     })
+  //   },
+  // },
  effects: {
    *login({ payload }, { put, call, select }) {
      const data = yield call(loginUser, payload)
@@ -13,11 +23,11 @@ export default {
      if (data.success) {
        const { from } = locationQuery
        yield put({ type: 'app/query' })
-        if (!pathMatchRegexp('/login', from)) {
-          if (from === '/') router.push('/dashboard')
-          else router.push(from)
+        if (!pathToRegexp('/login').exec(from)) {
+          if (['', '/'].includes(from)) history.push('/dashboard')
+          else history.push(from)
        } else {
-          router.push('/dashboard')
+          history.push('/dashboard')
        }
      } else {
        throw data
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import { Table, Avatar } from 'antd'
 import { withI18n } from '@lingui/react'
-import { Ellipsis } from 'ant-design-pro'
+import { Ellipsis } from 'components'
 import styles from './List.less'

@withI18n()
@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Tabs } from 'antd'
-import { router } from 'utils'
+import { history } from 'umi'
 import { stringify } from 'qs'
 import { withI18n } from '@lingui/react'
 import { Page } from 'components'
@@ -18,17 +18,28 @@ const EnumPostStatus = {
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
 class Post extends PureComponent {
-  render() {
-    const { post, loading, location, i18n } = this.props
+  handleTabClick = key => {
+    const { pathname } = this.props.location
+
+    history.push({
+      pathname,
+      search: stringify({
+        status: key,
+      }),
+    })
+  }
+
+  get listProps() {
+    const { post, loading, location } = this.props
    const { list, pagination } = post
    const { query, pathname } = location

-    const listProps = {
+    return {
      pagination,
      dataSource: list,
      loading: loading.effects['post/query'],
      onChange(page) {
-        router.push({
+        history.push({
          pathname,
          search: stringify({
            ...query,
@@ -38,15 +49,11 @@ class Post extends PureComponent {
        })
      },
    }
+  }

-    const handleTabClick = key => {
-      router.push({
-        pathname,
-        search: stringify({
-          status: key,
-        }),
-      })
-    }
+  render() {
+    const { location, i18n } = this.props
+    const { query } = location

    return (
      <Page inner>
@@ -56,19 +63,19 @@ class Post extends PureComponent {
              ? String(EnumPostStatus.UNPUBLISH)
              : String(EnumPostStatus.PUBLISHED)
          }
-          onTabClick={handleTabClick}
+          onTabClick={this.handleTabClick}
        >
          <TabPane
            tab={i18n.t`Publised`}
            key={String(EnumPostStatus.PUBLISHED)}
          >
-            <List {...listProps} />
+            <List {...this.listProps} />
          </TabPane>
          <TabPane
            tab={i18n.t`Unpublished`}
            key={String(EnumPostStatus.UNPUBLISH)}
          >
-            <List {...listProps} />
+            <List {...this.listProps} />
          </TabPane>
        </Tabs>
      </Page>
@@ -1,15 +1,17 @@
 import modelExtend from 'dva-model-extend'
-import { queryPostList } from 'api'
-import { pathMatchRegexp } from 'utils'
+import api from 'api'
+const { pathToRegexp } = require("path-to-regexp")
 import { pageModel } from 'utils/model'

+const { queryPostList } = api
+
 export default modelExtend(pageModel, {
  namespace: 'post',

  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(location => {
-        if (pathMatchRegexp('/post', location.pathname)) {
+        if (pathToRegexp('/post').exec(location.pathname)) {
          dispatch({
            type: 'query',
            payload: {
@@ -1,19 +1,9 @@
 import React from 'react'
 import { request } from 'utils'
 import { apiPrefix } from 'utils/config'
-import {
-  Row,
-  Col,
-  Select,
-  Input,
-  Button,
-  List,
-  Tag,
-  Form,
-  Icon,
-  Checkbox,
-} from 'antd'
+import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd'
 import classnames from 'classnames'
+import { CloseOutlined } from '@ant-design/icons'
 import { Trans } from '@lingui/react'
 import api from '@/services/api'
 import { Page } from 'components'
@@ -46,8 +36,8 @@ const requests = Object.values(api).map(item => {
 })

 let uuid = 2
-@Form.create()
 class RequestPage extends React.Component {
+  formRef = React.createRef()
  constructor(props) {
    super(props)
    this.state = {
@@ -62,15 +52,17 @@ class RequestPage extends React.Component {
  handleRequest = () => {
    const { method, url } = this.state

-    this.props.form.validateFields((err, values) => {
-      if (!err) {
+    this.formRef.current.validateFields()
+      .then(values => {
+        // values: { check[1]: true, key[1]: 'username', value[1]: 'admin' }
+
        const params = {}
-        if (values.key) {
-          values.key.forEach((item, index) => {
-            if (item && values.check[index]) {
-              params[item] = values.value[index]
-            }
-          })
+        for (let i in values) {
+          if (i.startsWith('check')) {
+            const index = i.match(/check\[(\d+)\]/)[1]
+            const key = values[`key[${index}]`]
+            params[key] = values[`value[${index}]`]
+          }
        }

        request({ method, url, data: params }).then(data => {
@@ -78,8 +70,23 @@ class RequestPage extends React.Component {
            result: JSON.stringify(data),
          })
        })
-      }
-    })
+      })
+      .catch(errorInfo => {
+        console.log(errorInfo)
+        /*
+        errorInfo:
+          {
+            values: {
+              username: 'username',
+              password: 'password',
+            },
+            errorFields: [
+              { password: ['username'], errors: ['Please input your Password!'] },
+            ],
+            outOfDate: false,
+          }
+        */
+      })
  }

  handleClickListItem = ({ method, url }) => {
@@ -127,7 +134,6 @@ class RequestPage extends React.Component {

  render() {
    const { result, url, method, keys, visible } = this.state
-    const { getFieldDecorator } = this.props.form

    return (
      <Page inner>
@@ -196,53 +202,51 @@ class RequestPage extends React.Component {
                <Trans>Send</Trans>
              </Button>
            </Row>
+            <Form ref={this.formRef} name="control-ref" >
+              <div
+                className={classnames(styles.paramsBlock, {
+                  [styles.hideParams]: !visible,
+                })}
+              >
+                {keys.map((key, index) => (
+                  <Row
+                    gutter={8}
+                    type="flex"
+                    justify="start"
+                    align="middle"
+                    key={key}
+                  >
+                    <Col style={{ marginTop: 8 }}>
+                      <Form.Item name={`check[${key}]`} valuePropName="checked">
+                        <Checkbox defaultChecked />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ marginTop: 8 }}>
+                      <Form.Item name={`key[${key}]`}>
+                        <Input placeholder="Key" />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ marginTop: 8 }}>
+                      <Form.Item name={`value[${key}]`}>
+                        <Input placeholder="Value" />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ marginTop: 8 }}>
+                      <CloseOutlined
+                        onClick={this.handleRemoveField.bind(this, key)}
+                        style={{ cursor: 'pointer' }}
+                      />
+                    </Col>
+                  </Row>
+                ))}

-            <div
-              className={classnames(styles.paramsBlock, {
-                [styles.hideParams]: !visible,
-              })}
-            >
-              {keys.map((key, index) => (
-                <Row
-                  gutter={8}
-                  type="flex"
-                  justify="start"
-                  align="middle"
-                  key={key}
-                >
-                  <Col style={{ marginTop: 8 }}>
-                    {getFieldDecorator(`check[${key}]`, {
-                      initialValue: true,
-                    })(<Checkbox defaultChecked />)}
-                  </Col>
-                  <Col style={{ marginTop: 8 }}>
-                    {getFieldDecorator(`key[${key}]`)(
-                      <Input placeholder="Key" />
-                    )}
-                  </Col>
-                  <Col style={{ marginTop: 8 }}>
-                    {getFieldDecorator(`value[${key}]`)(
-                      <Input placeholder="Value" />
-                    )}
-                  </Col>
-                  <Col style={{ marginTop: 8 }}>
-                    <Icon
-                      onClick={this.handleRemoveField.bind(this, key)}
-                      style={{ cursor: 'pointer' }}
-                      type="close"
-                      theme="outlined"
-                    />
-                  </Col>
+                <Row style={{ marginTop: 8 }}>
+                  <Button onClick={this.handleAddField}>
+                    <Trans>Add Param</Trans>
+                  </Button>
                </Row>
-              ))}
-
-              <Row style={{ marginTop: 8 }}>
-                <Button onClick={this.handleAddField}>
-                  <Trans>Add Param</Trans>
-                </Button>
-              </Row>
-            </div>
-
+              </div>
+            </Form>
            <div className={styles.result}>{result}</div>
          </Col>
        </Row>
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Page } from 'components'
 import styles from './index.less'

@@ -1,5 +1,7 @@
-import { pathMatchRegexp } from 'utils'
-import { queryUser } from 'api'
+const { pathToRegexp } = require("path-to-regexp")
+import api from 'api'
+
+const { queryUser } = api

 export default {
  namespace: 'userDetail',
@@ -11,7 +13,7 @@ export default {
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
-        const match = pathMatchRegexp('/user/:id', pathname)
+        const match = pathToRegexp('/user/:id').exec(pathname)
        if (match) {
          dispatch({ type: 'query', payload: { id: match[1] } })
        }
@@ -1,10 +1,10 @@
-/* global document */
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 import { FilterItem } from 'components'
-import { Trans, withI18n } from '@lingui/react'
-import { Form, Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
+
+import { Trans } from '@lingui/react'
+import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
 import city from 'utils/city'

 const { Search } = Input
@@ -23,12 +23,12 @@ const TwoColProps = {
  xl: 96,
 }

-@withI18n()
-@Form.create()
-class Filter extends PureComponent {
+class Filter extends Component {
+  formRef = React.createRef()
+
  handleFields = fields => {
    const { createTime } = fields
-    if (createTime.length) {
+    if (createTime && createTime.length) {
      fields.createTime = [
        moment(createTime[0]).format('YYYY-MM-DD'),
        moment(createTime[1]).format('YYYY-MM-DD'),
@@ -38,19 +38,14 @@ class Filter extends PureComponent {
  }

  handleSubmit = () => {
-    const { onFilterChange, form } = this.props
-    const { getFieldsValue } = form
-
-    let fields = getFieldsValue()
-    fields = this.handleFields(fields)
+    const { onFilterChange } = this.props
+    const values = this.formRef.current.getFieldsValue()
+    const fields = this.handleFields(values)
    onFilterChange(fields)
  }

  handleReset = () => {
-    const { form } = this.props
-    const { getFieldsValue, setFieldsValue } = form
-
-    const fields = getFieldsValue()
+    const fields = this.formRef.current.getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
@@ -60,22 +55,19 @@ class Filter extends PureComponent {
        }
      }
    }
-    setFieldsValue(fields)
+    this.formRef.current.setFieldsValue(fields)
    this.handleSubmit()
  }
  handleChange = (key, values) => {
-    const { form, onFilterChange } = this.props
-    const { getFieldsValue } = form
-
-    let fields = getFieldsValue()
+    const { onFilterChange } = this.props
+    let fields = this.formRef.current.getFieldsValue()
    fields[key] = values
    fields = this.handleFields(fields)
    onFilterChange(fields)
  }

  render() {
-    const { onAdd, filter, form, i18n } = this.props
-    const { getFieldDecorator } = form
+    const { onAdd, filter, i18n } = this.props
    const { name, address } = filter

    let initialCreateTime = []
@@ -87,86 +79,77 @@ class Filter extends PureComponent {
    }

    return (
-      <Row gutter={24}>
-        <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
-          {getFieldDecorator('name', { initialValue: name })(
-            <Search
-              placeholder={i18n.t`Search Name`}
-              onSearch={this.handleSubmit}
-            />
-          )}
-        </Col>
-        <Col
-          {...ColProps}
-          xl={{ span: 4 }}
-          md={{ span: 8 }}
-          id="addressCascader"
-        >
-          {getFieldDecorator('address', { initialValue: address })(
-            <Cascader
-              style={{ width: '100%' }}
-              options={city}
-              placeholder={i18n.t`Please pick an address`}
-              onChange={this.handleChange.bind(this, 'address')}
-              getPopupContainer={() =>
-                document.getElementById('addressCascader')
-              }
-            />
-          )}
-        </Col>
-        <Col
-          {...ColProps}
-          xl={{ span: 6 }}
-          md={{ span: 8 }}
-          sm={{ span: 12 }}
-          id="createTimeRangePicker"
-        >
-          <FilterItem label={i18n.t`CreateTime`}>
-            {getFieldDecorator('createTime', {
-              initialValue: initialCreateTime,
-            })(
-              <RangePicker
-                style={{ width: '100%' }}
-                onChange={this.handleChange.bind(this, 'createTime')}
-                getCalendarContainer={() => {
-                  return document.getElementById('createTimeRangePicker')
-                }}
+      <Form ref={this.formRef} name="control-ref" initialValues={{ name, address, createTime: initialCreateTime }}>
+        <Row gutter={24}>
+          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
+            <Form.Item name="name">
+              <Search
+                placeholder={i18n.t`Search Name`}
+                onSearch={this.handleSubmit}
              />
-            )}
-          </FilterItem>
-        </Col>
-        <Col
-          {...TwoColProps}
-          xl={{ span: 10 }}
-          md={{ span: 24 }}
-          sm={{ span: 24 }}
-        >
-          <Row type="flex" align="middle" justify="space-between">
-            <div>
-              <Button
-                type="primary"
-                className="margin-right"
-                onClick={this.handleSubmit}
-              >
-                <Trans>Search</Trans>
+            </Form.Item>
+          </Col>
+          <Col
+            {...ColProps}
+            xl={{ span: 4 }}
+            md={{ span: 8 }}
+            id="addressCascader"
+          >
+            <Form.Item name="address">
+              <Cascader
+                style={{ width: '100%' }}
+                options={city}
+                placeholder={i18n.t`Please pick an address`}
+              />
+            </Form.Item>
+          </Col>
+          <Col
+            {...ColProps}
+            xl={{ span: 6 }}
+            md={{ span: 8 }}
+            sm={{ span: 12 }}
+            id="createTimeRangePicker"
+          >
+            <FilterItem label={i18n.t`CreateTime`}>
+              <Form.Item name="createTime">
+                <RangePicker
+                  style={{ width: '100%' }}
+                />
+              </Form.Item>
+            </FilterItem>
+          </Col>
+          <Col
+            {...TwoColProps}
+            xl={{ span: 10 }}
+            md={{ span: 24 }}
+            sm={{ span: 24 }}
+          >
+            <Row type="flex" align="middle" justify="space-between">
+              <div>
+                <Button
+                  type="primary" htmlType="submit"
+                  className="margin-right"
+                  onClick={this.handleSubmit}
+                >
+                  <Trans>Search</Trans>
+                </Button>
+                <Button onClick={this.handleReset}>
+                  <Trans>Reset</Trans>
+                </Button>
+              </div>
+              <Button type="ghost" onClick={onAdd}>
+                <Trans>Create</Trans>
              </Button>
-              <Button onClick={this.handleReset}>
-                <Trans>Reset</Trans>
-              </Button>
-            </div>
-            <Button type="ghost" onClick={onAdd}>
-              <Trans>Create</Trans>
-            </Button>
-          </Row>
-        </Col>
-      </Row>
+            </Row>
+          </Col>
+        </Row>
+      </Form>
    )
  }
 }

 Filter.propTypes = {
  onAdd: PropTypes.func,
-  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
 }
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Table, Modal, Avatar } from 'antd'
 import { DropOption } from 'components'
 import { Trans, withI18n } from '@lingui/react'
-import Link from 'umi/link'
+import { Link } from 'umi'
 import styles from './List.less'

 const { confirm } = Modal
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
-import { Trans, withI18n } from '@lingui/react'
+import { Trans } from '@lingui/react'
 import city from 'utils/city'

 const FormItem = Form.Item
@@ -14,123 +14,70 @@ const formItemLayout = {
    span: 14,
  },
 }
-@withI18n()
-@Form.create()
-class UserModal extends PureComponent {
-  handleOk = () => {
-    const { item = {}, onOk, form } = this.props
-    const { validateFields, getFieldsValue } = form

-    validateFields(errors => {
-      if (errors) {
-        return
-      }
-      const data = {
-        ...getFieldsValue(),
-        key: item.key,
-      }
-      data.address = data.address.join(' ')
-      onOk(data)
-    })
+class UserModal extends PureComponent {
+  formRef = React.createRef()
+
+  handleOk = () => {
+    const { item = {}, onOk } = this.props
+
+    this.formRef.current.validateFields()
+      .then(values => {
+        const data = {
+          ...values,
+          key: item.key,
+        }
+        data.address = data.address.join(' ')
+        onOk(data)
+      })
+      .catch(errorInfo => {
+        console.log(errorInfo)
+      })
  }

  render() {
-    const { item = {}, onOk, form, i18n, ...modalProps } = this.props
-    const { getFieldDecorator } = form
+    const { i18n, item = {}, onOk, form, ...modalProps } = this.props

    return (
      <Modal {...modalProps} onOk={this.handleOk}>
-        <Form layout="horizontal">
-          <FormItem label={i18n.t`Name`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('name', {
-              initialValue: item.name,
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input />)}
+        <Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
+          <FormItem name='name' rules={[{ required: true }]}
+            label={i18n.t`Name`} hasFeedback {...formItemLayout}>
+            <Input />
          </FormItem>
-          <FormItem label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('nickName', {
-              initialValue: item.nickName,
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input />)}
+          <FormItem name='nickName' rules={[{ required: true }]}
+            label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
+            <Input />
          </FormItem>
-          <FormItem label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('isMale', {
-              initialValue: item.isMale,
-              rules: [
-                {
-                  required: true,
-                  type: 'boolean',
-                },
-              ],
-            })(
-              <Radio.Group>
-                <Radio value>
-                  <Trans>Male</Trans>
-                </Radio>
-                <Radio value={false}>
-                  <Trans>Female</Trans>
-                </Radio>
-              </Radio.Group>
-            )}
+          <FormItem name='isMale' rules={[{ required: true }]}
+            label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
+            <Radio.Group>
+              <Radio value>
+                <Trans>Male</Trans>
+              </Radio>
+              <Radio value={false}>
+                <Trans>Female</Trans>
+              </Radio>
+            </Radio.Group>
          </FormItem>
-          <FormItem label={i18n.t`Age`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('age', {
-              initialValue: item.age,
-              rules: [
-                {
-                  required: true,
-                  type: 'number',
-                },
-              ],
-            })(<InputNumber min={18} max={100} />)}
+          <FormItem name='age' label={i18n.t`Age`} hasFeedback {...formItemLayout}>
+            <InputNumber min={18} max={100} />
          </FormItem>
-          <FormItem label={i18n.t`Phone`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('phone', {
-              initialValue: item.phone,
-              rules: [
-                {
-                  required: true,
-                  pattern: /^1[34578]\d{9}$/,
-                  message: i18n.t`The input is not valid phone!`,
-                },
-              ],
-            })(<Input />)}
+          <FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: i18n.t`The input is not valid phone!`, }]}
+            label={i18n.t`Phone`} hasFeedback {...formItemLayout}>
+            <Input />
          </FormItem>
-          <FormItem label={i18n.t`Email`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('email', {
-              initialValue: item.email,
-              rules: [
-                {
-                  required: true,
-                  pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
-                  message: i18n.t`The input is not valid E-mail!`,
-                },
-              ],
-            })(<Input />)}
+          <FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: i18n.t`The input is not valid E-mail!`, }]}
+            label={i18n.t`Email`} hasFeedback {...formItemLayout}>
+            <Input />
          </FormItem>
-          <FormItem label={i18n.t`Address`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('address', {
-              initialValue: item.address && item.address.split(' '),
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(
-              <Cascader
-                style={{ width: '100%' }}
-                options={city}
-                placeholder={i18n.t`Pick an address`}
-              />
-            )}
+          <FormItem name='address' rules={[{ required: true, }]}
+            label={i18n.t`Address`} hasFeedback {...formItemLayout}>
+            <Cascader
+              style={{ width: '100%' }}
+              options={city}
+              placeholder={i18n.t`Pick an address`}
+            />
          </FormItem>
        </Form>
      </Modal>
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { router } from 'utils'
-import { connect } from 'dva'
+import { history } from 'umi'
+import { connect } from 'umi'
 import { Row, Col, Button, Popconfirm } from 'antd'
 import { withI18n } from '@lingui/react'
 import { Page } from 'components'
@@ -13,46 +13,62 @@ import Modal from './components/Modal'
@withI18n()
@connect(({ user, loading }) => ({ user, loading }))
 class User extends PureComponent {
-  render() {
-    const { location, dispatch, user, loading, i18n } = this.props
+  handleRefresh = newQuery => {
+    const { location } = this.props
    const { query, pathname } = location
-    const {
-      list,
-      pagination,
-      currentItem,
-      modalVisible,
-      modalType,
-      selectedRowKeys,
-    } = user

-    const handleRefresh = newQuery => {
-      router.push({
-        pathname,
-        search: stringify(
-          {
-            ...query,
-            ...newQuery,
-          },
-          { arrayFormat: 'repeat' }
-        ),
+    history.push({
+      pathname,
+      search: stringify(
+        {
+          ...query,
+          ...newQuery,
+        },
+        { arrayFormat: 'repeat' }
+      ),
+    })
+  }
+
+  handleDeleteItems = () => {
+    const { dispatch, user } = this.props
+    const { list, pagination, selectedRowKeys } = user
+
+    dispatch({
+      type: 'user/multiDelete',
+      payload: {
+        ids: selectedRowKeys,
+      },
+    }).then(() => {
+      this.handleRefresh({
+        page:
+          list.length === selectedRowKeys.length && pagination.current > 1
+            ? pagination.current - 1
+            : pagination.current,
      })
-    }
+    })
+  }

-    const modalProps = {
+  get modalProps() {
+    const { dispatch, user, loading, i18n } = this.props
+    const { currentItem, modalVisible, modalType } = user
+
+    return {
+      i18n,
      item: modalType === 'create' ? {} : currentItem,
      visible: modalVisible,
+      destroyOnClose: true,
      maskClosable: false,
      confirmLoading: loading.effects[`user/${modalType}`],
      title: `${
        modalType === 'create' ? i18n.t`Create User` : i18n.t`Update User`
      }`,
-      wrapClassName: 'vertical-center-modal',
-      onOk(data) {
+      centered: true,
+      onOk: data => {
        dispatch({
          type: `user/${modalType}`,
          payload: data,
        }).then(() => {
-          handleRefresh()
+          this.handleRefresh()
        })
      },
      onCancel() {
@@ -61,23 +77,28 @@ class User extends PureComponent {
        })
      },
    }
+  }

-    const listProps = {
+  get listProps() {
+    const { dispatch, user, loading } = this.props
+    const { list, pagination, selectedRowKeys } = user
+
+    return {
      dataSource: list,
      loading: loading.effects['user/query'],
      pagination,
-      onChange(page) {
-        handleRefresh({
+      onChange: page => {
+        this.handleRefresh({
          page: page.current,
          pageSize: page.pageSize,
        })
      },
-      onDeleteItem(id) {
+      onDeleteItem: id => {
        dispatch({
          type: 'user/delete',
          payload: id,
        }).then(() => {
-          handleRefresh({
+          this.handleRefresh({
            page:
              list.length === 1 && pagination.current > 1
                ? pagination.current - 1
@@ -106,15 +127,20 @@ class User extends PureComponent {
        },
      },
    }
+  }

-    const filterProps = {
+  get filterProps() {
+    const { location, dispatch, i18n } = this.props
+    const { query } = location
+
+    return {
+      i18n,
      filter: {
        ...query,
      },
-      onFilterChange(value) {
-        handleRefresh({
+      onFilterChange: value => {
+        this.handleRefresh({
          ...value,
-          page: 1,
        })
      },
      onAdd() {
@@ -126,26 +152,15 @@ class User extends PureComponent {
        })
      },
    }
+  }

-    const handleDeleteItems = () => {
-      dispatch({
-        type: 'user/multiDelete',
-        payload: {
-          ids: selectedRowKeys,
-        },
-      }).then(() => {
-        handleRefresh({
-          page:
-            list.length === selectedRowKeys.length && pagination.current > 1
-              ? pagination.current - 1
-              : pagination.current,
-        })
-      })
-    }
+  render() {
+    const { user } = this.props
+    const { selectedRowKeys } = user

    return (
      <Page inner>
-        <Filter {...filterProps} />
+        <Filter {...this.filterProps} />
        {selectedRowKeys.length > 0 && (
          <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
            <Col>
@@ -153,7 +168,7 @@ class User extends PureComponent {
              <Popconfirm
                title="Are you sure delete these items?"
                placement="left"
-                onConfirm={handleDeleteItems}
+                onConfirm={this.handleDeleteItems}
              >
                <Button type="primary" style={{ marginLeft: 8 }}>
                  Remove
@@ -162,8 +177,8 @@ class User extends PureComponent {
            </Col>
          </Row>
        )}
-        <List {...listProps} />
-        {modalVisible && <Modal {...modalProps} />}
+        <List {...this.listProps} />
+        <Modal {...this.modalProps} />
      </Page>
    )
  }
@@ -1,14 +1,15 @@
-/* global window */
 import modelExtend from 'dva-model-extend'
-import { pathMatchRegexp } from 'utils'
-import {
+const { pathToRegexp } = require("path-to-regexp")
+import api from 'api'
+import { pageModel } from 'utils/model'
+
+const {
  queryUserList,
  createUser,
  removeUser,
  updateUser,
  removeUserList,
-} from 'api'
-import { pageModel } from 'utils/model'
+} = api

 export default modelExtend(pageModel, {
  namespace: 'user',
@@ -23,7 +24,7 @@ export default modelExtend(pageModel, {
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(location => {
-        if (pathMatchRegexp('/user', location.pathname)) {
+        if (pathToRegexp('/user').exec(location.pathname)) {
          const payload = location.query || { page: 1, pageSize: 10 }
          dispatch({
            type: 'query',
@@ -1,8 +1,13 @@
 import { message } from 'antd'

 export default {
-  onError(e) {
+  onError(e, a) {
    e.preventDefault()
-    message.error(e.message)
+    if (e.message) {
+      message.error(e.message)
+    } else {
+      /* eslint-disable */
+      console.error(e)
+    }
  },
 }
@@ -35,4 +35,4 @@ APIFunction.queryWeather = params => {
  })
 }

-module.exports = APIFunction
+export default APIFunction
@@ -15,6 +15,10 @@ body {
  height: 8px;
 }

+.margin-right {
+  margin-right: 16px;
+}
+
 :global {
  .ant-breadcrumb {
    & > span {
@@ -63,21 +67,6 @@ body {
    box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
  }

-  .vertical-center-modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ant-modal {
-      top: 0;
-
-      .ant-modal-body {
-        max-height: 80vh;
-        overflow-y: auto;
-      }
-    }
-  }
-
  .ant-form-item-control {
    vertical-align: middle;
  }
@@ -94,13 +83,13 @@ body {
    padding: 12px 16px !important;
  }

-  .margin-right {
-    margin-right: 16px;
-  }
-
  a:focus {
    text-decoration: none;
  }
+
+  .ant-table-layout-fixed table {
+    table-layout: auto;
+  }
 }
@media (min-width: 1600px) {
  :global {
@@ -4052,4 +4052,4 @@ let DICT_FIXED = (function() {
  return tree(fixed)
 })()

-module.exports = DICT_FIXED
+export default DICT_FIXED
@@ -1,6 +1,6 @@
 module.exports = {
  siteName: 'AntD Admin',
-  copyright: 'Ant Design Admin  © 2018 zuiidea',
+  copyright: 'Ant Design Admin  ©2020 zuiidea',
  logoPath: '/logo.svg',
  apiPrefix: '/api/v1',
  fixedHeader: true, // sticky primary layout header
@@ -10,7 +10,7 @@ module.exports = {
    {
      name: 'primary',
      include: [/.*/],
-      exlude: [/(\/(en|zh))*\/login/],
+      exclude: [/(\/(en|zh))*\/login/],
    },
  ],

@@ -18,6 +18,11 @@ module.exports = {
  i18n: {
    /* Countrys flags: https://www.flaticon.com/packs/countrys-flags */
    languages: [
+      {
+        key: 'pt-br',
+        title: 'Português',
+        flag: '/portugal.svg',
+      },
      {
        key: 'en',
        title: 'English',
@@ -4,4 +4,4 @@ export const ROLE_TYPE = {
  DEVELOPER: 'developer',
 }

-export const CANCEL_REQUEST_MESSAGE = 'cancle request'
+export const CANCEL_REQUEST_MESSAGE = 'cancel request'
@@ -0,0 +1,31 @@
+import {
+  PayCircleOutlined,
+  ShoppingCartOutlined,
+  MessageOutlined,
+  TeamOutlined,
+  UserOutlined,
+  DashboardOutlined,
+  ApiOutlined,
+  CameraOutlined,
+  EditOutlined,
+  CodeOutlined,
+  LineOutlined,
+  BarChartOutlined,
+  AreaChartOutlined,
+} from '@ant-design/icons'
+
+export default {
+  'pay-circle-o': <PayCircleOutlined />,
+  'shopping-cart': <ShoppingCartOutlined />,
+  'camera-o': <CameraOutlined />,
+  'line-chart': <LineOutlined />,
+  'code-o': <CodeOutlined />,
+  'area-chart': <AreaChartOutlined />,
+  'bar-chart': <BarChartOutlined />,
+  message: <MessageOutlined />,
+  team: <TeamOutlined />,
+  dashboard: <DashboardOutlined />,
+  user: <UserOutlined />,
+  api: <ApiOutlined />,
+  edit: <EditOutlined />,
+}
@@ -1,6 +1,8 @@
-import { cloneDeep, isString, flow, curry } from 'lodash'
-import umiRouter from 'umi/router'
-import pathToRegexp from 'path-to-regexp'
+import { cloneDeep } from 'lodash'
+const { pathToRegexp } = require("path-to-regexp")
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import store from 'store'
 import { i18n } from './config'

 export classnames from 'classnames'
@@ -8,8 +10,8 @@ export config from './config'
 export request from './request'
 export { Color } from './theme'

-export const { defaultLanguage } = i18n
-export const languages = i18n.languages.map(item => item.key)
+export const languages = i18n ? i18n.languages.map(item => item.key) : []
+export const defaultLanguage = i18n ? i18n.defaultLanguage : ''

 /**
 * Query objects that specify keys and values in an array where all values are objects.
@@ -59,90 +61,7 @@ export function arrayToTree(
  return result
 }

-export const langFromPath = curry(
-  /**
-   * Query language from pathname.
-   * @param   {array}     languages         Specify which languages are currently available.
-   * @param   {string}    defaultLanguage   Specify the default language.
-   * @param   {string}    pathname          Pathname to be queried.
-   * @return  {string}    Return the queryed language.
-   */
-  (languages, defaultLanguage, pathname) => {
-    for (const item of languages) {
-      if (pathname.startsWith(`/${item}/`)) {
-        return item
-      }
-    }
-    return defaultLanguage
-  }
-)(languages)(defaultLanguage)

-export const deLangPrefix = curry(
-  /**
-   * Remove the language prefix in pathname.
-   * @param   {array}     languages  Specify which languages are currently available.
-   * @param   {string}    pathname   Remove the language prefix in the pathname.
-   * @return  {string}    Return the pathname after removing the language prefix.
-   */
-  (languages, pathname) => {
-    if (!pathname) {
-      return
-    }
-    for (const item of languages) {
-      if (pathname.startsWith(`/${item}/`)) {
-        return pathname.replace(`/${item}/`, '/')
-      }
-    }
-
-    return pathname
-  }
-)(languages)
-
-/**
- * Add the language prefix in pathname.
- * @param   {string}    pathname   Add the language prefix in the pathname.
- * @return  {string}    Return the pathname after adding the language prefix.
- */
-export function addLangPrefix(pathname) {
-  const prefix = langFromPath(window.location.pathname)
-  return `/${prefix}${deLangPrefix(pathname)}`
-}
-
-const routerAddLangPrefix = params => {
-  if (isString(params)) {
-    params = addLangPrefix(params)
-  } else {
-    params.pathname = addLangPrefix(params.pathname)
-  }
-  return params
-}
-
-/**
- * Adjust the router to automatically add the current language prefix before the pathname in push and replace.
- */
-const myRouter = { ...umiRouter }
-
-myRouter.push = flow(
-  routerAddLangPrefix,
-  umiRouter.push
-)
-
-myRouter.replace = flow(
-  routerAddLangPrefix,
-  myRouter.replace
-)
-
-export const router = myRouter
-
-/**
- * Whether the path matches the regexp if the language prefix is ignored, https://github.com/pillarjs/path-to-regexp.
- * @param   {string|regexp|array}     regexp     Specify a string, array of strings, or a regular expression.
- * @param   {string}                  pathname   Specify the pathname to match.
- * @return  {array|null}              Return the result of the match or null.
- */
-export function pathMatchRegexp(regexp, pathname) {
-  return pathToRegexp(regexp).exec(deLangPrefix(pathname))
-}

 /**
 * In an array object, traverse all parent IDs based on the value of an object.
@@ -206,12 +125,12 @@ export function queryLayout(layouts, pathname) {
  const isMatch = regepx => {
    return regepx instanceof RegExp
      ? regepx.test(pathname)
-      : pathMatchRegexp(regepx, pathname)
+      : pathToRegexp(regepx).exec(pathname)
  }

  for (const item of layouts) {
    let include = false
-    let exlude = false
+    let exclude = false
    if (item.include) {
      for (const regepx of item.include) {
        if (isMatch(regepx)) {
@@ -221,16 +140,16 @@ export function queryLayout(layouts, pathname) {
      }
    }

-    if (include && item.exlude) {
-      for (const regepx of item.exlude) {
+    if (include && item.exclude) {
+      for (const regepx of item.exclude) {
        if (isMatch(regepx)) {
-          exlude = true
+          exclude = true
          break
        }
      }
    }

-    if (include && !exlude) {
+    if (include && !exclude) {
      result = item.name
      break
    }
@@ -239,15 +158,15 @@ export function queryLayout(layouts, pathname) {
  return result
 }

+
 export function getLocale() {
-  return langFromPath(window.location.pathname)
+  return store.get('locale') || defaultLanguage
 }

 export function setLocale(language) {
  if (getLocale() !== language) {
-    umiRouter.push({
-      pathname: `/${language}${deLangPrefix(window.location.pathname)}`,
-      search: window.location.search,
-    })
+    moment.locale(language === 'zh' ? 'zh-cn' : language)
+    store.set('locale', language)
+    window.location.reload()
  }
-}
+}
@@ -1,19 +1,18 @@
-import { pathMatchRegexp } from './index'
-import pathToRegexp from 'path-to-regexp'
+const { pathToRegexp } = require("path-to-regexp")

-describe('test pathMatchRegexp', () => {
+describe('test pathToRegexp', () => {
  it('get right', () => {
-    expect(pathMatchRegexp('/user', '/zh/user')).toEqual(
+    expect(pathToRegexp('/user').exec('/zh/user')).toEqual(
      pathToRegexp('/user').exec('/user')
    )
-    expect(pathMatchRegexp('/user', '/user')).toEqual(
+    expect(pathToRegexp('/user').exec('/user')).toEqual(
      pathToRegexp('/user').exec('/user')
    )

-    expect(pathMatchRegexp('/user/:id', '/zh/user/1')).toEqual(
+    expect(pathToRegexp('/user/:id').exec('/zh/user/1')).toEqual(
      pathToRegexp('/user/:id').exec('/user/1')
    )
-    expect(pathMatchRegexp('/user/:id', '/user/1')).toEqual(
+    expect(pathToRegexp('/user/:id').exec('/user/1')).toEqual(
      pathToRegexp('/user/:id').exec('/user/1')
    )
  })
@@ -1,9 +1,8 @@
 import axios from 'axios'
 import { cloneDeep, isEmpty } from 'lodash'
-import pathToRegexp from 'path-to-regexp'
+const { parse, compile } = require("path-to-regexp")
 import { message } from 'antd'
 import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
-import qs from 'qs'

 const { CancelToken } = axios
 window.cancelRequest = new Map()
@@ -20,8 +19,8 @@ export default function request(options) {
      url = url.slice(domain.length)
    }

-    const match = pathToRegexp.parse(url)
-    url = pathToRegexp.compile(url)(data)
+    const match = parse(url)
+    url = compile(url)(data)

    for (const item of match) {
      if (item instanceof Object && item.name in cloneData) {
@@ -33,11 +32,8 @@ export default function request(options) {
    message.error(e.message)
  }

-  options.url =
-    method.toLocaleLowerCase() === 'get'
-      ? `${url}${isEmpty(cloneData) ? '' : '?'}${qs.stringify(cloneData)}`
-      : url
-
+  options.url = url
+  options.params = cloneData
  options.cancelToken = new CancelToken(cancel => {
    window.cancelRequest.set(Symbol(Date.now()), {
      pathname: window.location.pathname,
Author	SHA1	Message	Date
zuiidea	5abad21082	✨ Optimization Split Chunks, Antd Icon, CI.	2020-08-20 14:16:32 +08:00
Baorong Li	1ae41c7ae5	Merge pull request #1060 from mlboy/patch-1 Update README.md	2020-06-03 14:46:44 +08:00
mlboy	e41671dbf9	Update README.md 调整antd版本	2020-05-13 07:42:01 +08:00
Baorong Li	eaeb9092e4	bump antd-admin@5.3.0	2020-05-10 21:05:23 +08:00
Baorong Li	2f3ca0a006	Merge branch 'develop'	2020-05-10 21:04:40 +08:00
Baorong Li	1b65351be4	upgrade umi@3 fin.	2020-03-24 15:17:57 +08:00
Baorong Li	0422f6d51e	upgrade umi@3 partly	2020-03-24 12:12:20 +08:00
Baorong Li	8d050d4040	fix pathToRegexp not work	2020-03-20 11:59:04 +08:00
zuiidea	82b3a4b384	⚡️ Exclude node_modules by babel-loader.	2020-03-19 22:26:55 +08:00
Baorong Li	d2f391a881	upgrade umi@3 partly	2020-03-19 17:06:31 +08:00
Baorong Li	9e778487d9	upgrade umi@3 partly	2020-03-19 12:50:12 +08:00
Baorong Li	7938d71f2f	upgrade umi@3 partly	2020-03-19 00:05:44 +08:00
Baorong Li	422a6fed30	upgrade umi@3 partly	2020-03-18 16:17:25 +08:00
Baorong Li	c6ea0454b3	upgrade umi@3 partly	2020-03-15 08:24:05 +08:00
Baorong Li	467767a6c5	upgrade umi@3 partly	2020-03-05 23:22:02 +08:00
Baorong Li	cf795c512a	bump antd-admin@5.2.0	2020-03-05 20:21:22 +08:00
Baorong Li	18b499030d	upgrade antd@4.0.0	2020-02-29 22:47:45 +08:00
zuiidea	d800d6f3ce	Merge branch 'master' into develop	2020-01-08 09:31:45 +08:00
zuiidea	185f706107	💚 Fixing now config.	2020-01-07 17:17:57 +08:00
zuiidea	5a4661cdad	Merge branch 'develop' of https://github.com/zuiidea/antd-admin into develop	2020-01-07 16:02:51 +08:00
zuiidea	7abdd94a0e	🚀 Optimize deployment configuration.	2020-01-07 16:02:33 +08:00
Baorong Li	22f0684ab0	chore: docs normal	2020-01-07 15:58:48 +08:00
Baorong Li	80b2c63693	Merge pull request #1040 from vagusX/feat/migrate-antd-v4 feat: migrate to antd v4	2019-12-02 22:07:08 -06:00
vagusX	4b2a553bda	feat: add antd v4 dependencies	2019-12-03 10:19:54 +08:00
vagusX	ad30e73b10	feat: migrate to antd v4	2019-12-03 09:58:49 +08:00
Baorong Li	15b62e302d	bump antd-admin@5.1.3	2019-10-22 10:38:52 +08:00
Baorong Li	9d5ec20f20	Merge branch 'develop'	2019-10-22 10:37:43 +08:00
Baorong Li	c878425fd0	upgrade antd@3.24.x	2019-10-22 10:30:04 +08:00
Baorong Li	90e80dda64	Merge pull request #1022 from rioarray/feature/inline-conditional-rendering inline conditional rendering in some components	2019-10-17 16:32:30 +08:00
rioarray	1db5bfeab5	inline conditional rendering in some components	2019-10-17 14:45:30 +07:00
zuiidea	b2b3fcd4a3	✨ Support disable i18n.	2019-10-09 20:20:11 +08:00
Baorong Li	9cf97375c7	fix 404 when path = '/'	2019-08-01 23:12:42 +08:00
Baorong Li	7839b6affb	Merge pull request #1007 from Louis-7/master [fix] add notification popup to #primaryLayout instead of #layoutHeader	2019-07-25 08:26:35 -05:00
Louis	597064a07d	[fix] add notification popup to #primaryLayout instead of #layoutHeader	2019-07-25 11:47:32 +08:00
Baorong Li	0ea57d14c9	fix #980 cannot read property 'map' of null	2019-07-07 23:01:20 +08:00
Baorong Li	afd736d615	bump antd-admin@5.1.2	2019-07-07 22:48:34 +08:00
Baorong Li	ce9b8c376f	Merge pull request #996 from tuantvk/master 🐛 fix bug sub menu Charts when collapsed	2019-07-07 08:03:31 -05:00
tuantv	79776e6752	🐛 fix bug sub menu Charts when collapsed	2019-07-07 11:56:52 +07:00
zuiidea	a2432022a1	✨ Updating manifest logo and adding portugal flag image.	2019-07-02 17:47:16 +08:00
zuiidea	ea5ee96bdc	🎨 Improving format of the code.	2019-07-06 11:02:56 +08:00
zuiidea	fe954092a4	🐛 Fixing dva history.listen multiple triggers.	2019-07-06 10:50:50 +08:00
zuiidea	5e148fec92	Merge branch 'develop' of https://github.com/zuiidea/antd-admin into develop	2019-07-06 09:43:30 +08:00
Baorong Li	5daa2a9548	add moment locale setting	2019-07-05 22:26:29 +08:00
Baorong Li	f1913f7b18	add pt_BR locale-provider in layout	2019-07-05 22:16:54 +08:00
zuiidea	65a453553e	✨ Updating mock avatar image.	2019-07-05 19:52:37 +08:00
Baorong Li	29da8f24da	Merge pull request #989 from tuantvk/master 🐛 fix remove and update user error handleRefresh	2019-06-29 09:57:46 -05:00
tuantv	3443ad9968	🐛 fix edit and update user error handleRefresh	2019-06-29 21:19:57 +07:00
Baorong Li	838dc93eff	bump antd-admin@5.1.1	2019-06-29 10:56:03 +08:00
Baorong Li	07ef68ec1f	Merge remote-tracking branch 'origin/develop'	2019-06-29 10:54:10 +08:00
Baorong Li	3cb7f86086	fix login jump to /enundefined	2019-06-29 10:49:11 +08:00
Baorong Li	fc9565c157	add a flag to detect refresh saving query times in model/app.js	2019-06-24 20:50:09 +08:00
Baorong Li	557f6022f3	bump antd-admin@5.1.0	2019-06-24 16:05:28 +08:00
Baorong Li	d0a56169e3	revert dispatch query in model/app.js	2019-06-24 15:40:44 +08:00
Baorong Li	f7d6e2b4ed	Merge pull request #984 from lovemegowin/master refactor user,menu,permission storage strategy	2019-06-24 15:26:06 +08:00
lovemegowin	df82ee42fd	fix #985 , close #985	2019-06-24 15:20:25 +08:00
lovemegowin	a29d761483	refactor user, menu, permission storage strategy then make full loader unnecessary	2019-06-21 15:26:06 +08:00
lovemegowin	713a86b9d6	add null point assert	2019-06-21 15:23:19 +08:00
lovemegowin	d6250f16b0	fullScreen loader is not always necessary refactor default spinning to false	2019-06-21 14:12:15 +08:00
Baorong Li	1c5d5c3788	upgrade umi@2.8.x	2019-06-20 16:31:00 +08:00
Baorong Li	699e9d9ff1	fix warning inlineCollapsed not control Menu under Sider	2019-06-04 15:47:35 +08:00
Baorong Li	fad0cb931a	use options instead of option in react-perfect-scrollbar	2019-06-04 15:34:45 +08:00
Baorong Li	5d7ff55869	upgrade dependency	2019-06-04 15:09:51 +08:00
Baorong Li	642ccb5b82	Merge pull request #975 from deepred5/master fix: 关闭弹窗时有动画效果	2019-05-27 23:59:48 -05:00
深红	51a7ce0827	update: 关闭弹窗时销毁子元素，保证initialValue更新并且关闭弹窗时有动画效果	2019-05-28 10:27:27 +08:00
Baorong Li	157a54b11d	Merge pull request #969 from ccyanxyz/patch-1 fix markdown code block in docs/layout.md	2019-05-04 18:32:34 -05:00
cyan	be083d81fc	fix markdown code block	2019-05-05 00:38:43 +08:00
zuiidea	f6c869ad47	Merge pull request #965 from zuiidea/develop ✏️ Fixing typos, exlude => exclude.	2019-04-18 10:10:14 +08:00
zuiidea	bef5b26509	✏️ Fixing typos, exlude => exclude.	2019-04-18 09:58:16 +08:00
Baorong Li	59cfe24178	Merge branch 'develop' # Conflicts: # package.json	2019-04-10 07:27:25 +08:00
Baorong Li	87d0d58ae8	Merge commit '0ac4839e948f7b1d34c90d33f4ece483bd9d2f48'	2019-04-10 07:24:20 +08:00
Baorong Li	de8b6c972d	bump antd-admin@5.0.6	2019-04-10 07:24:06 +08:00
Baorong Li	0ac4839e94	upgrade umi@2.6.x	2019-04-10 07:22:53 +08:00
Baorong Li	565bce6d8b	refix #958 by reset form in componentDidUpdate	2019-04-05 09:02:25 +08:00
Baorong Li	b278b028cf	fix #958 redux form initialValues not updating with state	2019-04-04 16:45:28 +08:00
Baorong Li	33abd9369e	fix #957 an flaw ignored	2019-03-19 10:59:37 +08:00
Baorong Li	e6b2f7f271	fix #950 modify z-index in header	2019-03-13 16:59:12 +08:00
Baorong Li	0bd1e9cf59	fix #947 misspelled word cancel	2019-03-06 12:11:42 +08:00
Baorong Li	693625bf2c	bump antd-admin@5.0.5	2019-03-05 16:23:16 +08:00
Baorong Li	3a6c587569	upgrade antd@3.14	2019-03-05 16:17:12 +08:00
Baorong Li	bd85eaf0a0	fix less is not a command in prettier	2019-03-05 16:15:33 +08:00
Baorong Li	29aa0f416e	fix Cannot read property 'addEventListener' of null #946	2019-03-05 16:15:02 +08:00
Baorong Li	5b32607911	bump antd-admin@5.0.4	2019-02-19 22:00:36 +08:00
Baorong Li	76e5359752	upgrade umi@2.5.0	2019-02-19 21:46:01 +08:00
Baorong Li	5ec4efbb6e	reset default lang to en	2019-02-07 09:19:39 +08:00
Baorong Li	f8bb7b421a	remove description about support IE9/IE10 that not working well	2019-02-07 08:52:40 +08:00
Baorong Li	887c169aa8	upgrade and lock antd@3.13.0	2019-02-07 08:36:53 +08:00
Baorong Li	8c10dcc6c2	Merge pull request #939 from rrfaria/feature/pt-br added pt-br language and some improvements to language control to route mocks	2019-02-07 08:08:01 +08:00
Rafael Faria	671da6b5fa	added pt-br and some improvements to language control	2019-02-06 14:39:02 -02:00
Baorong Li	7fdb2f4ea8	bump antd-admin@5.0.3	2019-01-11 18:43:48 +08:00
Baorong Li	67388b31f5	enable umi treeShaking	2019-01-11 18:40:39 +08:00
Baorong Li	2379cca765	upgrade umi@2.4.0 & antd@3.12.x	2019-01-11 18:39:19 +08:00
Baorong Li	34be6651e5	fix #935 root path / will be not found after login	2019-01-10 17:36:23 +08:00
Baorong Li	10f8e3e8ef	fix mix require / module.exports and import / export #934	2019-01-08 23:30:18 +08:00
Baorong Li	0c6ea8eb5c	fix cannot read property 'hash' of undefined by turn off hardSource	2019-01-08 22:56:23 +08:00
Baorong Li	6e69b06e61	Publish antd-admin@5.0.2	2018-12-28 14:01:51 +08:00
Baorong Li	98ba383a68	upgrade umi@2.3 antd@3.11	2018-12-28 11:42:44 +08:00
Baorong Li	4e6d81a9bf	Merge pull request #928 from luckcoding/fix-bread-link fix bread route has no matching lang	2018-12-13 22:35:56 +08:00
Baorong Li	0e2c206023	Merge branch 'develop' into fix-bread-link	2018-12-13 22:35:47 +08:00
luckcoding	285f06d1e7	fix bread route has no matching lang	2018-12-13 16:57:49 +08:00
zuiidea	6aead03f3e	🐛 Fix style error when menu is collapsed.	2018-12-12 11:35:44 +08:00
Baorong Li	7eb9e06452	upgrade antd@3.10.9, umi@2.3.0-beta.3	2018-12-01 11:29:09 +08:00
zuiidea	fab06d5005	fix: 🐛 CI fails when pull request	2018-11-29 10:00:11 +08:00
zuiidea	16860f93ad	Merge pull request #920 from alexxyzeng/alex fix: show vertical centered modal in ie	2018-11-28 10:18:22 +08:00
xiayao	6ba45d5bc3	fix: show vertical centered modal in ie	2018-11-28 00:44:21 +08:00