Merge pull request #1091 from jaywhen/patch-1

fix garbled characters in README-zh_CN.md

.travis.yml

@@ -4,24 +4,15 @@ node_js:
 script:
   - 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
-    else
-     for prefixed_envvar in ${!TEST_*}; do
-        eval export ${prefixed_envvar#TEST_}="${!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
 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

.umirc.js

@@ -3,47 +3,26 @@ import { resolve } from 'path'
 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 {
   // IMPORTANT! change next line to yours or delete. And hide in dev
-  // publicPath: 'https://cdn.antd-admin.zuiidea.com/',
-  hash: true,
-  ignoreMomentLocale: true,
-  targets: { ie: 9 },
-  dva: { immer: true },
-  antd: {},
-  dynamicImport: {
-    loading: 'components/Loader/Loader',
-  },
-  // not support in umi@3
-  // pwa: {
-  //   manifestOptions: {
-  //     srcPath: 'manifest.json',
-  //   },
-  // },
-  // Theme for antd
-  // https://ant.design/docs/react/customize-theme
-  theme: lessToJs(
-    fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
-  ),
-  // Webpack Configuration
-  proxy: {
-    '/api/v1/weather': {
-      target: 'https://api.seniverse.com/',
-      changeOrigin: true,
-      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
-    },
-  },
+  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'),
-    services: resolve(__dirname, './src/services'),
     themes: resolve(__dirname, './src/themes'),
     utils: resolve(__dirname, './src/utils'),
   },
-  extraBabelPresets: ['@lingui/babel-preset-react'],
+  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',
+  },
   extraBabelPlugins: [
     [
       'import',
@@ -54,18 +33,42 @@ export default {
       },
       'lodash',
     ],
+    [
+      'import',
+      {
+        libraryName: '@ant-design/icons',
+        libraryDirectory: 'es/icons',
+        camel2DashComponentName: false,
+      },
+      'ant-design-icons',
+    ],
+    [
+      'macros'
+    ]
   ],
-  chainWebpack: function(config, { webpack }) {
-    config.module
-      .rule('js-in-node_modules')
-      .exclude.add(/node_modules/)
-      .end()
-
-    config.module
-      .rule('ts-in-node_modules')
-      .exclude.add(/node_modules/)
-      .end()
-
+  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')
+  ),
+  webpack5: {},
+  chainWebpack: function (config, { webpack }) {
     config.merge({
       optimization: {
         minimize: true,
@@ -83,27 +86,37 @@ export default {
             antd: {
               name: 'antd',
               priority: 20,
-              test: /[\\/]node_modules[\\/](antd|@ant-design\/icons|@ant-design\/compatible)[\\/]/,
+              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-gl|echarts-liquidfill[\\/]/,
+              test: /[\\/]node_modules[\\/](echarts|echarts-for-react|echarts-liquidfill)[\\/]/,
             },
             highcharts: {
               name: 'highcharts',
               priority: 20,
-              test: /[\\/]node_modules[\\/](highcharts-exporting|highcharts-more|react-highcharts)[\\/]/,
+              test: /[\\/]node_modules[\\/]highcharts[\\/]/,
             },
             recharts: {
               name: 'recharts',
               priority: 20,
-              test: /[\\/]node_modules[\\/](recharts)[\\/]/,
+              test: /[\\/]node_modules[\\/]recharts[\\/]/,
             },
             draftjs: {
               name: 'draftjs',
-              priority: 20,
-              test: /[\\/]node_modules[\\/](draftjs-to-html|draftjs-to-markdown)[\\/]/,
+              priority: 30,
+              test: /[\\/]node_modules[\\/](draft-js|react-draft-wysiwyg|draftjs-to-html|draftjs-to-markdown)[\\/]/,
             },
             async: {
               chunks: 'async',

README-zh_CN.md

@@ -38,7 +38,7 @@
 
 ## 使用
 
-1. 下载项目代码。
+1. 下载项目代码。
 
 ```bash
 git clone https://github.com/zuiidea/antd-admin.git my-project
@@ -84,4 +84,4 @@ npm run start
 - 通过 [Issue](http://github.com/zuiidea/antd-admin/issues) 报告 bug 或进行咨询。
 - 提交 [Pull Request](http://github.com/zuiidea/antd-admin/pulls) 改进代码。
 
-> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

README.md

@@ -11,7 +11,7 @@
 
 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)

docs/API-configuration.md

@@ -5,11 +5,11 @@
 In the use of `redux` or `dva` projects, we often write functions like the following `service` layer to make the code structure clearer, but it is easy to see that we will write a lot of similar code in `antd -admin@5.0`, using the more concise configuration method to achieve the same function.
 
 ```javascript
-Export async function login(data) {
-  Return request({
-    Url: '/api/v1/user/login',
-    Method: 'post',
-    Data,
+export async function login(data) {
+  return request({
+    url: '/api/v1/user/login',
+    method: 'post',
+    data,
   })
 }
 ```
@@ -19,7 +19,7 @@ Export async function login(data) {
 In the `src/services/api.js` file, you will see the following configuration object, the object's key is used to call the function name, the object's value is the requested `url`, the default request method is `GET`, The format of the value of the other request mode object is `'method url'`.
 
 ```javascript
-Export default {
+export default {
   ...
   queryUser: '/user/:id',
   queryUserList: '/users',
@@ -34,7 +34,7 @@ Export default {
 Used in other files
 
 ```javascript
-Import { queryUser } from 'api'
+import { queryUser } from 'api'
 
 // in the general file
 ...
@@ -43,7 +43,7 @@ queryUser(option).then(data => console.log(data))
 
 / / Model file
 ...
-Yield call(queryUser, option)
+yield call(queryUser, option)
 ...
 ```
 
@@ -52,35 +52,35 @@ Yield call(queryUser, option)
 Refer to the `src/services/index.js` file to traverse the api configuration. Each property returns the corresponding encapsulated request function.
 
 ```javascript
-Import request from 'utils/request'
-Import { apiPrefix } from 'utils/config'
+import request from 'utils/request'
+import { apiPrefix } from 'utils/config'
 
-Import api from './api'
+import api from './api'
 
-Const gen = params => {
-  Let url = apiPrefix + params
-  Let method = 'GET'
+const gen = params => {
+  let url = apiPrefix + params
+  let method = 'GET'
 
-  Const paramsArray = params.split(' ')
-  If (paramsArray.length === 2) {
-    Method = paramsArray[0]
-    Url = apiPrefix + paramsArray[1]
+  const paramsArray = params.split(' ')
+  if (paramsArray.length === 2) {
+    method = paramsArray[0]
+    url = apiPrefix + paramsArray[1]
   }
 
-  Return function(data) {
-    Return request({
-      Url,
-      Data,
-      Method,
+  return function(data) {
+    return request({
+      url,
+      data,
+      method,
     })
   }
 }
 
-Const APIFunction = {}
-For (const key in api) {
+const APIFunction = {}
+for (const key in api) {
   APIFunction[key] = gen(api[key])
 }
 
-Module.exports = APIFunction
+module.exports = APIFunction
 
 ```

docs/i18n.md

@@ -12,7 +12,7 @@ Take Japanese as an example.
    npm run add-locale ja
    ```
 
-2. Extract the fields in the code that need to be translated, ie `<Trans>?message</Trans>`, `` i18n.t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.
+2. Extract the fields in the code that need to be translated, ie `<Trans>?message</Trans>`, `` t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.
 
    ```bash 
    npm run extract

docs/layout.md

@@ -2,7 +2,7 @@
 
 ## Add a new layout
 
-Take a new layout named `secondary` as an example to make the route starting with `seconday` use this layout.
+Take a new layout named `secondary` as an example to make the route starting with `secondary` use this layout.
 
 1. Add related configuration in `src/utils/config.js`. For details, please refer to [layouts](/configuration?id=layouts).
 
@@ -11,11 +11,11 @@ Take a new layout named `secondary` as an example to make the route starting wit
            {
                name: 'primary',
                include: [/.*/],
-               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
+               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/secondary\/(.*)/],
            },
            {
                name: 'secondary',
-               include: [/(\/(en|zh))*\/seconday\/(.*)/],
+               include: [/(\/(en|zh))*\/secondary\/(.*)/],
            },
    ],
 ```
@@ -26,9 +26,9 @@ Take a new layout named `secondary` as an example to make the route starting wit
    import SecondaryLayout from './SecondaryLayout'
 
    const LayoutMap = {
-     Primary: PrimaryLayout,
-     Public: PublicLayout,
-     Secondary: SecondaryLayout,
+     primary: PrimaryLayout,
+     public: PublicLayout,
+     secondary: SecondaryLayout,
    }
 ```
 
@@ -38,23 +38,23 @@ Take a new layout named `secondary` as an example to make the route starting wit
    import React from 'react'
 
    export default ({ children }) => {
-     Return (
+     return (
        <div>
-         <h1>Seconday</h1>
+         <h1>Secondary</h1>
          {children}
        </div>
      )
    }
 ```
 
-4. Add a `seconday/index.js` file to the `src/pages/` directory.
+4. Add a `secondary/index.js` file to the `src/pages/` directory.
 
 ```javascript
    import React from 'react'
 
    export default ({ children }) => {
-     Return <div>Seconday page Content</div>
+     Return <div>Secondary 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/secondary/](http://localhost:7000/secondary/) and you will see the page for the `secondary` layout.

docs/now.dev.json

@@ -1,6 +0,0 @@
-{
-  "version": 2,
-  "name": "antd-admin-devdoc",
-  "alias": ["devdoc-antd-admin.now.sh", "devdoc.antd-admin.zuiidea.com"],
-  "public": true
-}

docs/now.json

@@ -1,6 +0,0 @@
-{
-  "version": 2,
-  "name": "antd-admin-doc",
-  "alias": ["doc-antd-admin.now.sh", "doc.antd-admin.zuiidea.com"],
-  "public": true
-}

docs/zh-cn/layout.md

@@ -2,7 +2,7 @@
 
 ## 新增布局
 
-以新增名为 `secondary` 的布局为例，使以 `seconday` 开头的路由都使用该布局。
+以新增名为 `secondary` 的布局为例，使以 `secondary` 开头的路由都使用该布局。
 
 1. 在 `src/utils/config.js` 新增相关配置，参数详细请查看 [layouts](/zh-cn/configuration?id=layouts)。
 
@@ -11,11 +11,11 @@
            {
                name: 'primary',
                include: [/.*/],
-               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
+               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/secondary\/(.*)/],
            },
            {
                name: 'secondary',
-               include: [/(\/(en|zh))*\/seconday\/(.*)/],
+               include: [/(\/(en|zh))*\/secondary\/(.*)/],
            },
    ],
    ```
@@ -40,21 +40,21 @@
    export default ({ children }) => {
      return (
        <div>
-         <h1>Seconday</h1>
+         <h1>Secondary</h1>
          {children}
        </div>
      )
    }
    ```
 
-4. 在`src/pages/` 目录中新增 `seconday/index.js` 文件。
+4. 在`src/pages/` 目录中新增 `secondary/index.js` 文件。
 
    ```javascript
    import React from 'react'
 
    export default ({ children }) => {
-     return <div>Seconday page Content</div>
+     return <div>Secondary page Content</div>
    }
    ```
 
-5. 最后，启动开发模式 `npm run start`，打开 [http://localhost:7000/seconday/](http://localhost:7000/seconday/)，你将看到 `seconday` 布局的页面。
+5. 最后，启动开发模式 `npm run start`，打开 [http://localhost:7000/secondary/](http://localhost:7000/secondary/)，你将看到 `secondary` 布局的页面。

mock/dashboard.js

@@ -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: [
     {

package.json

@@ -4,20 +4,20 @@
   "license": "MIT",
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
-    "@ant-design/compatible": "^1.0.0",
-    "@ant-design/icons": "^4.0.0",
-    "@lingui/react": "^2.8.0",
+    "@ant-design/icons": "^4.2.2",
+    "@lingui/react": "^3.7.0",
     "antd": "^4.0.0",
-    "axios": "^0.19.0",
+    "axios": "^0.21.0",
     "classnames": "^2.2.6",
-    "d3-shape": "^1.3.0",
+    "d3-shape": "^2.1.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.4.0",
-    "echarts-for-react": "^2.0.15-beta.1",
-    "echarts-gl": "^1.1.1",
-    "echarts-liquidfill": "^2.0.2",
+    "echarts": "^5.0.0",
+    "echarts-for-react": "^3.0.0",
+    "echarts-gl": "^2.0.2",
+    "echarts-liquidfill": "^3.0.0",
     "enquire-js": "^0.2.1",
     "highcharts-exporting": "^0.1.7",
     "highcharts-more": "^0.1.7",
@@ -31,39 +31,41 @@
     "react-adsense": "^0.1.0",
     "react-countup": "^4.2.0",
     "react-draft-wysiwyg": "^1.13.0",
-    "react-helmet": "^5.2.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.9.0",
-    "@lingui/cli": "^2.9.0",
-    "@lingui/loader": "^2.9.0",
+    "@babel/preset-react": "^7.12.13",
+    "@lingui/cli": "^3.7.0",
+    "@lingui/macro": "^3.7.2",
     "@umijs/preset-react": "^1.4.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-macros": "^3.0.1",
     "babel-plugin-module-resolver": "^4.0.0",
-    "cross-env": "^6.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-react-app": "^5.0.0",
-    "eslint-plugin-flowtype": "^4.6.0",
+    "cross-env": "^7.0.0",
+    "eslint": "^7.0.0",
+    "eslint-config-react-app": "^6.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": "^2.5.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
     "husky": "^4.2.0",
     "less-vars-to-js": "^1.3.0",
     "lint-staged": "^10.0.0",
     "mockjs": "^1.1.0",
     "module": "^1.2.5",
-    "prettier": "^1.19.0",
+    "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.0.0"
+    "stylelint-config-standard": "^21.0.0",
+    "typescript": "^4.2.3",
+    "umi": "^3.2.0"
   },
   "engines": {
     "node": ">= 10.0.0"
@@ -81,19 +83,31 @@
     ]
   },
   "lingui": {
-    "fallbackLocale": "en",
+    "fallbackLocales": {
+      "default": "en"
+    },
     "sourceLocale": "en",
-    "localeDir": "src/locales",
-    "srcPathDirs": [
-      "src/pages",
-      "src/layouts",
-      "src/components",
-      "src/layouts"
+    "locales": [
+      "en",
+      "zh",
+      "pt-br"
+    ],
+    "catalogs": [
+      {
+        "path": "src/locales/{locale}/messages",
+        "include": [
+          "src/pages",
+          "src/layouts",
+          "src/components",
+          "src/layouts"
+        ]
+      }
     ],
     "format": "minimal",
     "extractBabelOptions": {
       "presets": [
-        "@umijs/babel-preset-umi"
+        "@umijs/babel-preset-umi",
+        "@babel/preset-react"
       ]
     }
   },

src/components/Layout/Bread.js

@@ -2,21 +2,20 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb } from 'antd'
 import { Link, withRouter } from 'umi'
-import { withI18n } from '@lingui/react'
-import { Icon as LegacyIcon } from '@ant-design/compatible'
-const { pathToRegexp } = require("path-to-regexp")
+import { t } from "@lingui/macro"
+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 = item && (
         <Fragment>
           {item.icon && (
-            <LegacyIcon type={item.icon} style={{ marginRight: 4 }} />
+            <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>
           )}
           {item.name}
         </Fragment>
@@ -36,11 +35,11 @@ class Bread extends PureComponent {
     })
   }
   render() {
-    const { routeList, location, i18n } = this.props
+    const { routeList, location } = this.props
 
     // Find a route that matches the pathname.
     const currentRoute = routeList.find(
-      _ => _.route && pathToRegexp(_.route).exec(location.pathname)
+      (_) => _.route && pathToRegexp(_.route).exec(location.pathname)
     )
 
     // Find the breadcrumb navigation of the current route match and all its ancestors.
@@ -50,7 +49,7 @@ class Bread extends PureComponent {
           routeList[0],
           {
             id: 404,
-            name: i18n.t`Not Found`,
+            name: t`Not Found`,
           },
         ]
 

src/components/Layout/Header.js

@@ -2,10 +2,14 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
 import { Ellipsis } from 'components'
-import { Icon as LegacyIcon } from '@ant-design/compatible'
-import { BellOutlined, RightOutlined } from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
-import { setLocale } from 'utils'
+import {
+  BellOutlined,
+  RightOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons'
+import { Trans } from "@lingui/macro"
+import { getLocale, setLocale } from 'utils'
 import moment from 'moment'
 import classnames from 'classnames'
 import config from 'config'
@@ -13,14 +17,12 @@ import styles from './Header.less'
 
 const { SubMenu } = Menu
 
-@withI18n()
 class Header extends PureComponent {
   handleClickMenu = e => {
     e.key === 'SignOut' && this.props.onSignOut()
   }
   render() {
     const {
-      i18n,
       fixed,
       avatar,
       username,
@@ -52,8 +54,9 @@ class Header extends PureComponent {
 
     if (config.i18n) {
       const { languages } = config.i18n
+      const language = getLocale()
       const currentLanguage = languages.find(
-        item => item.key === i18n._language
+        item => item.key === language
       )
 
       rightContent.unshift(
@@ -144,14 +147,8 @@ class Header extends PureComponent {
           className={styles.button}
           onClick={onCollapseChange.bind(this, !collapsed)}
         >
-          <LegacyIcon
-            type={classnames({
-              'menu-unfold': collapsed,
-              'menu-fold': !collapsed,
-            })}
-          />
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
         </div>
-
         <div className={styles.rightContainer}>{rightContent}</div>
       </Layout.Header>
     )

src/components/Layout/Menu.js

@@ -1,13 +1,10 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Icon as LegacyIcon } from '@ant-design/compatible'
 import { Menu } from 'antd'
 import { NavLink, withRouter } from 'umi'
-const { pathToRegexp } = require("path-to-regexp")
-import {
-  arrayToTree,
-  queryAncestors,
-} from 'utils'
+import { pathToRegexp } from 'path-to-regexp'
+import { arrayToTree, queryAncestors } from 'utils'
+import iconMap from 'utils/iconMap'
 import store from 'store'
 
 const { SubMenu } = Menu
@@ -45,7 +42,7 @@ class SiderMenu extends PureComponent {
             key={item.id}
             title={
               <Fragment>
-                {item.icon && <LegacyIcon type={item.icon} />}
+                {item.icon && iconMap[item.icon]}
                 <span>{item.name}</span>
               </Fragment>
             }
@@ -57,7 +54,7 @@ class SiderMenu extends PureComponent {
       return (
         <Menu.Item key={item.id}>
           <NavLink to={item.route || '#'}>
-            {item.icon && <LegacyIcon type={item.icon} />}
+            {item.icon && iconMap[item.icon]}
             <span>{item.name}</span>
           </NavLink>
         </Menu.Item>

src/components/Layout/Sider.js

@@ -1,18 +1,17 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Layout } from 'antd'
-import { withI18n, Trans } from '@lingui/react'
+import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { BulbOutlined } from '@ant-design/icons'
 import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
 import SiderMenu from './Menu'
 import styles from './Sider.less'
 
-@withI18n()
 class Sider extends PureComponent {
   render() {
     const {
-      i18n,
       menus,
       theme,
       isMobile,
@@ -67,8 +66,8 @@ class Sider extends PureComponent {
                 theme === 'dark' ? 'light' : 'dark'
               )}
               defaultChecked={theme === 'dark'}
-              checkedChildren={i18n.t`Dark`}
-              unCheckedChildren={i18n.t`Light`}
+              checkedChildren={t`Dark`}
+              unCheckedChildren={t`Light`}
             />
           </div>
         )}

src/layouts/index.js

@@ -1,15 +1,22 @@
 import React, { Component } from 'react'
 import { withRouter } from 'umi'
 import { ConfigProvider } from 'antd'
+import { i18n } from "@lingui/core"
 import { I18nProvider } from '@lingui/react'
 import { getLocale } from 'utils'
-const { i18n } = require('../../src/utils/config')
+import { zh, en, pt } from 'make-plural/plurals'
 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 plurals =  {
+  zh,
+  en,
+  'pt-br': pt,
+}
+
 const languages = {
   zh: zh_CN,
   en: en_US,
@@ -20,7 +27,6 @@ const { defaultLanguage } = i18n
 @withRouter
 class Layout extends Component {
   state = {
-    catalogs: {},
   }
 
   language = defaultLanguage
@@ -34,9 +40,8 @@ class Layout extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     const language = getLocale()
     const preLanguage = this.language
-    const { catalogs } = nextState
 
-    if (preLanguage !== language && !catalogs[language]) {
+    if (preLanguage !== language && !languages[language]) {
       language && this.loadCatalog(language)
       this.language = language
       return false
@@ -48,29 +53,27 @@ class Layout extends Component {
 
   loadCatalog = async language => {
     const catalog = await import(
-      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
-      `@lingui/loader!../locales/${language}/messages.json`
+      `../locales/${language}/messages.json`
     )
 
-    this.setState(state => ({
-      catalogs: {
-        ...state.catalogs,
-        [language]: catalog,
-      },
-    }))
+    i18n.load(language, catalog)
+    i18n.activate(language)
   }
 
   render() {
     const { children } = this.props
-    const { catalogs } = this.state
 
     let language = getLocale()
     // If the language pack is not loaded or is loading, use the default language
-    if (!catalogs[language]) language = defaultLanguage
+    if (!languages[language]) language = defaultLanguage
+
+    i18n.loadLocaleData(language, { plurals: plurals[language] })
+    i18n.load(language, languages[language])
+    i18n.activate(language)
 
     return (
-      <ConfigProvider locale={languages[language]}>
-        <I18nProvider language={language} catalogs={catalogs}>
+      <ConfigProvider locale={language}>
+        <I18nProvider i18n={i18n}>
           <BaseLayout>{children}</BaseLayout>
         </I18nProvider>
       </ConfigProvider>

src/pages/chart/ECharts/AirportCoordComponent.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 
-require('echarts/map/js/china.js')
+require('./map/js/china.js')
 
 const AirportCoordComponent = () => {
   let geoCoordMap = {

src/pages/chart/ECharts/BubbleGradientComponent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 const currentData = [
   [

src/pages/chart/ECharts/CalendarComponent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 const CalendarComponent = () => {
   const getVirtulData = year => {

src/pages/chart/ECharts/GCalendarComponent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 const GCalendarComponent = () => {
   const getVirtulData = year => {

src/pages/chart/ECharts/LunarCalendarComponent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 const LunarCalendarComponent = () => {
   const getOtion = () => {

src/pages/chart/ECharts/MapChartComponent.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 
-require('echarts/map/js/china.js')
+require('./map/js/china.js')
 
 class MapChartComponent extends React.Component {
   constructor() {

src/pages/chart/ECharts/ThemeChartComponent.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 const ThemeChartComponent = () => {
   const option = {

src/pages/chart/ECharts/TreemapComponent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 const TreemapComponent = () => {
   let diskData = [

src/pages/dashboard/components/browser.js

@@ -38,7 +38,7 @@ function Browser({ data }) {
       pagination={false}
       showHeader={false}
       columns={columns}
-      rowKey={(record, key) => key}
+      rowKey='name'
       dataSource={data}
     />
   )

src/pages/dashboard/components/comments.js

@@ -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>

src/pages/dashboard/components/numberCard.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Icon as LegacyIcon } from '@ant-design/compatible'
 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
@@ -12,7 +13,9 @@ function NumberCard({ icon, color, title, number, countUp }) {
       bordered={false}
       bodyStyle={{ padding: 10 }}
     >
-      <LegacyIcon 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}>

src/pages/dashboard/components/recentSales.js

@@ -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>

src/pages/dashboard/model.js

@@ -5,6 +5,7 @@ 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',
@@ -13,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: [],
@@ -27,8 +27,7 @@ export default modelExtend(model, {
     browser: [],
     cpu: {},
     user: {
-      avatar:
-        'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
+      avatar,
     },
   },
   subscriptions: {
@@ -62,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',

src/pages/index.js

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react'
 import { Redirect } from 'umi'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
 
-@withI18n()
 class Index extends PureComponent {
   render() {
-    const { i18n } = this.props
-    return <Redirect to={i18n.t`/dashboard`} />
+    return <Redirect to={t`/dashboard`} />
   }
 }
 

src/pages/login/index.js

@@ -4,7 +4,8 @@ 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 { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { setLocale } from 'utils'
 import config from 'utils/config'
 
@@ -12,12 +13,11 @@ import styles from './index.less'
 
 const FormItem = Form.Item
 
-@withI18n()
 @connect(({ loading, dispatch }) => ({ loading, dispatch }))
 class Login extends PureComponent {
 
   render() {
-    const { dispatch, loading, i18n } = this.props
+    const { dispatch, loading } = this.props
     
     const handleOk = values => {
       dispatch({ type: 'login/login', payload: values })
@@ -55,14 +55,14 @@ class Login extends PureComponent {
             <FormItem name="username" 
               rules={[{ required: true }]} hasFeedback>
                 <Input
-                  placeholder={i18n.t`Username`}
+                  placeholder={t`Username`}
                 />
             </FormItem>
             <FormItem name="password"
               rules={[{ required: true }]} hasFeedback>
                 <Input
                   type="password"
-                  placeholder={i18n.t`Password`}
+                  placeholder={t`Password`}
                 />
             </FormItem>
             <Row>

src/pages/post/components/List.js

@@ -1,21 +1,20 @@
 import React, { PureComponent } from 'react'
 import { Table, Avatar } from 'antd'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
 import { Ellipsis } from 'components'
 import styles from './List.less'
 
-@withI18n()
 class List extends PureComponent {
   render() {
-    const { i18n, ...tableProps } = this.props
+    const { ...tableProps } = this.props
     const columns = [
       {
-        title: i18n.t`Image`,
+        title: t`Image`,
         dataIndex: 'image',
         render: text => <Avatar shape="square" src={text} />,
       },
       {
-        title: i18n.t`Title`,
+        title: t`Title`,
         dataIndex: 'title',
         render: text => (
           <Ellipsis tooltip length={30}>
@@ -24,31 +23,31 @@ class List extends PureComponent {
         ),
       },
       {
-        title: i18n.t`Author`,
+        title: t`Author`,
         dataIndex: 'author',
       },
       {
-        title: i18n.t`Categories`,
+        title: t`Categories`,
         dataIndex: 'categories',
       },
       {
-        title: i18n.t`Tags`,
+        title: t`Tags`,
         dataIndex: 'tags',
       },
       {
-        title: i18n.t`Visibility`,
+        title: t`Visibility`,
         dataIndex: 'visibility',
       },
       {
-        title: i18n.t`Comments`,
+        title: t`Comments`,
         dataIndex: 'comments',
       },
       {
-        title: i18n.t`Views`,
+        title: t`Views`,
         dataIndex: 'views',
       },
       {
-        title: i18n.t`Publish Date`,
+        title: t`Publish Date`,
         dataIndex: 'date',
       },
     ]
@@ -58,7 +57,7 @@ class List extends PureComponent {
         {...tableProps}
         pagination={{
           ...tableProps.pagination,
-          showTotal: total => i18n.t`Total ${total} Items`,
+          showTotal: total => t`Total ${total} Items`,
         }}
         bordered
         scroll={{ x: 1200 }}

src/pages/post/index.js

@@ -4,7 +4,7 @@ import { connect } from 'umi'
 import { Tabs } from 'antd'
 import { history } from 'umi'
 import { stringify } from 'qs'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
 import { Page } from 'components'
 import List from './components/List'
 
@@ -15,7 +15,6 @@ const EnumPostStatus = {
   PUBLISHED: 2,
 }
 
-@withI18n()
 @connect(({ post, loading }) => ({ post, loading }))
 class Post extends PureComponent {
   handleTabClick = key => {
@@ -52,7 +51,7 @@ class Post extends PureComponent {
   }
 
   render() {
-    const { location, i18n } = this.props
+    const { location } = this.props
     const { query } = location
 
     return (
@@ -66,13 +65,13 @@ class Post extends PureComponent {
           onTabClick={this.handleTabClick}
         >
           <TabPane
-            tab={i18n.t`Publised`}
+            tab={t`Publised`}
             key={String(EnumPostStatus.PUBLISHED)}
           >
             <List {...this.listProps} />
           </TabPane>
           <TabPane
-            tab={i18n.t`Unpublished`}
+            tab={t`Unpublished`}
             key={String(EnumPostStatus.UNPUBLISH)}
           >
             <List {...this.listProps} />

src/pages/request/index.js

@@ -4,7 +4,7 @@ import { apiPrefix } from 'utils/config'
 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 { Trans } from "@lingui/macro"
 import api from '@/services/api'
 import { Page } from 'components'
 

src/pages/user/components/Filter.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 import { FilterItem } from 'components'
-
-import { Trans } from '@lingui/react'
+import { Trans } from "@lingui/macro"
+import { t } from "@lingui/macro"
 import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
@@ -67,7 +67,7 @@ class Filter extends Component {
   }
 
   render() {
-    const { onAdd, filter, i18n } = this.props
+    const { onAdd, filter } = this.props
     const { name, address } = filter
 
     let initialCreateTime = []
@@ -84,7 +84,7 @@ class Filter extends Component {
           <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
             <Form.Item name="name">
               <Search
-                placeholder={i18n.t`Search Name`}
+                placeholder={t`Search Name`}
                 onSearch={this.handleSubmit}
               />
             </Form.Item>
@@ -99,7 +99,7 @@ class Filter extends Component {
               <Cascader
                 style={{ width: '100%' }}
                 options={city}
-                placeholder={i18n.t`Please pick an address`}
+                placeholder={t`Please pick an address`}
               />
             </Form.Item>
           </Col>
@@ -110,7 +110,7 @@ class Filter extends Component {
             sm={{ span: 12 }}
             id="createTimeRangePicker"
           >
-            <FilterItem label={i18n.t`CreateTime`}>
+            <FilterItem label={t`CreateTime`}>
               <Form.Item name="createTime">
                 <RangePicker
                   style={{ width: '100%' }}

src/pages/user/components/List.js

@@ -2,22 +2,22 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Table, Modal, Avatar } from 'antd'
 import { DropOption } from 'components'
-import { Trans, withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import { Link } from 'umi'
 import styles from './List.less'
 
 const { confirm } = Modal
 
-@withI18n()
 class List extends PureComponent {
   handleMenuClick = (record, e) => {
-    const { onDeleteItem, onEditItem, i18n } = this.props
+    const { onDeleteItem, onEditItem } = this.props
 
     if (e.key === '1') {
       onEditItem(record)
     } else if (e.key === '2') {
       confirm({
-        title: i18n.t`Are you sure delete this record?`,
+        title: t`Are you sure delete this record?`,
         onOk() {
           onDeleteItem(record.id)
         },
@@ -26,14 +26,14 @@ class List extends PureComponent {
   }
 
   render() {
-    const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props
+    const { onDeleteItem, onEditItem, ...tableProps } = this.props
 
     const columns = [
       {
         title: <Trans>Avatar</Trans>,
         dataIndex: 'avatar',
         key: 'avatar',
-        width: 72,
+        width: '7%',
         fixed: 'left',
         render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
       },
@@ -51,12 +51,14 @@ class List extends PureComponent {
       {
         title: <Trans>Age</Trans>,
         dataIndex: 'age',
+        width: '6%',
         key: 'age',
       },
       {
         title: <Trans>Gender</Trans>,
         dataIndex: 'isMale',
         key: 'isMale',
+        width: '7%',
         render: text => <span>{text ? 'Male' : 'Female'}</span>,
       },
       {
@@ -83,13 +85,14 @@ class List extends PureComponent {
         title: <Trans>Operation</Trans>,
         key: 'operation',
         fixed: 'right',
+        width: '8%',
         render: (text, record) => {
           return (
             <DropOption
               onMenuClick={e => this.handleMenuClick(record, e)}
               menuOptions={[
-                { key: '1', name: i18n.t`Update` },
-                { key: '2', name: i18n.t`Delete` },
+                { key: '1', name: t`Update` },
+                { key: '2', name: t`Delete` },
               ]}
             />
           )
@@ -102,7 +105,7 @@ class List extends PureComponent {
         {...tableProps}
         pagination={{
           ...tableProps.pagination,
-          showTotal: total => i18n.t`Total ${total} Items`,
+          showTotal: total => t`Total ${total} Items`,
         }}
         className={styles.table}
         bordered

src/pages/user/components/Modal.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
-import { Trans } from '@lingui/react'
+import { Trans } from "@lingui/macro"
 import city from 'utils/city'
+import { t } from "@lingui/macro"
 
 const FormItem = Form.Item
 
@@ -36,21 +37,21 @@ class UserModal extends PureComponent {
   }
 
   render() {
-    const { i18n, item = {}, onOk, form, ...modalProps } = this.props
+    const { item = {}, onOk, form, ...modalProps } = this.props
 
     return (
       <Modal {...modalProps} onOk={this.handleOk}>
         <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}>
+            label={t`Name`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='nickName' rules={[{ required: true }]}
-            label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
+            label={t`NickName`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='isMale' rules={[{ required: true }]}
-            label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
+            label={t`Gender`} hasFeedback {...formItemLayout}>
             <Radio.Group>
               <Radio value>
                 <Trans>Male</Trans>
@@ -60,23 +61,23 @@ class UserModal extends PureComponent {
               </Radio>
             </Radio.Group>
           </FormItem>
-          <FormItem name='age' label={i18n.t`Age`} hasFeedback {...formItemLayout}>
+          <FormItem name='age' label={t`Age`} hasFeedback {...formItemLayout}>
             <InputNumber min={18} max={100} />
           </FormItem>
-          <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}>
+          <FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: t`The input is not valid phone!`, }]}
+            label={t`Phone`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
-          <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}>
+          <FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: t`The input is not valid E-mail!`, }]}
+            label={t`Email`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='address' rules={[{ required: true, }]}
-            label={i18n.t`Address`} hasFeedback {...formItemLayout}>
+            label={t`Address`} hasFeedback {...formItemLayout}>
             <Cascader
               style={{ width: '100%' }}
               options={city}
-              placeholder={i18n.t`Pick an address`}
+              placeholder={t`Pick an address`}
             />
           </FormItem>
         </Form>

src/pages/user/index.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types'
 import { history } from 'umi'
 import { connect } from 'umi'
 import { Row, Col, Button, Popconfirm } from 'antd'
-import { withI18n } from '@lingui/react'
+import { t } from "@lingui/macro"
 import { Page } from 'components'
 import { stringify } from 'qs'
 import List from './components/List'
 import Filter from './components/Filter'
 import Modal from './components/Modal'
 
-@withI18n()
 @connect(({ user, loading }) => ({ user, loading }))
 class User extends PureComponent {
   handleRefresh = newQuery => {
@@ -49,18 +48,17 @@ class User extends PureComponent {
   }
 
   get modalProps() {
-    const { dispatch, user, loading, i18n } = this.props
+    const { dispatch, user, loading } = 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`
+        modalType === 'create' ? t`Create User` : t`Update User`
       }`,
       centered: true,
       onOk: data => {
@@ -130,11 +128,10 @@ class User extends PureComponent {
   }
 
   get filterProps() {
-    const { location, dispatch, i18n } = this.props
+    const { location, dispatch } = this.props
     const { query } = location
 
     return {
-      i18n,
       filter: {
         ...query,
       },

src/utils/iconMap.jsx

@@ -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 />,
+}

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { cloneDeep, isEmpty } from 'lodash'
+import { cloneDeep } from 'lodash'
 const { parse, compile } = require("path-to-regexp")
 import { message } from 'antd'
 import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
@@ -8,7 +8,7 @@ const { CancelToken } = axios
 window.cancelRequest = new Map()
 
 export default function request(options) {
-  let { data, url, method = 'get' } = options
+  let { data, url } = options
   const cloneData = cloneDeep(data)
 
   try {
@@ -33,7 +33,6 @@ export default function request(options) {
   }
 
   options.url = url
-  options.params = cloneData
   options.cancelToken = new CancelToken(cancel => {
     window.cancelRequest.set(Symbol(Date.now()), {
       pathname: window.location.pathname,