bump version: 5.5.0

fix: correct typos in build config and demo

.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,33 @@ 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'
 
+const { theme } = require('antd')
+
+const mapToken = theme.defaultAlgorithm(theme.defaultSeed)
+const v4Token = Object.fromEntries(
+  Object.entries(mapToken).map(([k, v]) => [k, typeof v === 'string' ? v : String(v)])
+)
+
+// 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: false,
+  // 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,21 +40,48 @@ 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()
-
-    config.merge({
+  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' },
+    },
+  },
+  // Theme for antd
+  // https://ant.design/docs/react/customize-theme
+  theme: {
+    ...v4Token,
+    ...lessToJs(
+    fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
+    )
+  },
+  webpack5: {},
+  mfsu: {},
+  chainWebpack: function (config, { webpack }) {
+    !isDevelopment && config.merge({
       optimization: {
-        minimize: true,
+        minimize: false,
         splitChunks: {
           chunks: 'all',
           minSize: 30000,
@@ -78,32 +91,42 @@ export default {
             react: {
               name: 'react',
               priority: 20,
-              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
+              test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
             },
             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
@@ -65,6 +65,7 @@ npm run start
 
 4. 启动完成后打开浏览器访问 [http://localhost:7000](http://localhost:7000)，如果需要更改启动端口，可在 `.env` 文件中配置。
 
+5. 登录账号有2个，一个账号admin 密码admin;另一个账号guest 密码guest
 
 > 更多信息请参考 [使用文档](https://doc.antd-admin.zuiidea.com/#/zh-cn/)。
 
@@ -84,4 +85,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)
@@ -22,7 +22,7 @@ An excellent front-end solution for enterprise applications.
 </div>
 
 - Preview - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
-- Documentation - [https://doc.antd-admin.zuiidea.com](https://doc.antd-admin.zuiidea.com)
+- Documentation - [https://superlbr.gitee.io/antd-admin](https://superlbr.gitee.io/antd-admin)
 - FAQ - [https://doc.antd-admin.zuiidea.com/#/faq](https://doc.antd-admin.zuiidea.com/#/faq)
 - ChangeLog - [https://doc.antd-admin.zuiidea.com/#/change-log](https://doc.antd-admin.zuiidea.com/#/change-log)
 
@@ -65,6 +65,7 @@ npm run start
 
 4. After the startup is complete, open a browser and visit [http://localhost:7000](http://localhost:7000), If you need to change the startup port, you can configure it in the `.env` file.
 
+5. For login page, there're two account. Username: admin Password: admin / Username: guest Password: guest
 
 > More instructions at [documentation](https://doc.antd-admin.zuiidea.com)。
 

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` 布局的页面。

lingui.config.js

@@ -0,0 +1,21 @@
+import { formatter } from "@lingui/format-json"
+
+export default {
+  fallbackLocales: {
+    default: "en",
+  },
+  sourceLocale: "en",
+  locales: ["en", "zh", "pt-br"],
+  catalogs: [
+    {
+      path: "src/locales/{locale}/messages",
+      include: [
+        "src/pages",
+        "src/layouts",
+        "src/components",
+        "src/layouts",
+      ],
+    },
+  ],
+  format: formatter({ style: "minimal" }),
+}

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

@@ -1,69 +1,82 @@
 {
   "name": "antd-admin",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "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",
-    "antd": "^4.0.0",
-    "axios": "^0.19.0",
-    "classnames": "^2.2.6",
-    "d3-shape": "^1.3.0",
-    "draftjs-to-html": "^0.9.0",
+    "@ant-design/icons": "^4.8.3",
+    "@lingui/react": "^5.0.0",
+    "@rc-component/picker": "^1.9.0",
+    "antd": "^6.0.0",
+    "axios": "^1.0.0",
+    "classnames": "^2.5.1",
+    "d3-shape": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "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.5.0",
+    "echarts-for-react": "^3.0.2",
+    "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
     "enquire-js": "^0.2.1",
-    "highcharts-exporting": "^0.1.7",
-    "highcharts-more": "^0.1.7",
+    "highcharts": "^11.2.0",
+    "highcharts-react-official": "^3.2.3",
     "json-format": "^1.0.1",
-    "lodash": "^4.17.11",
-    "md5": "^2.2.1",
+    "lodash": "^4.17.21",
+    "make-plural": "^7.3.0",
+    "md5": "^2.3.0",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^6.1.0",
-    "prop-types": "^15.7.0",
-    "qs": "^6.9.0",
+    "path-to-regexp": "^6.2.2",
+    "prop-types": "^15.8.1",
+    "qs": "^6.12.0",
+    "react": "^18.2.0",
     "react-adsense": "^0.1.0",
-    "react-countup": "^4.2.0",
-    "react-draft-wysiwyg": "^1.13.0",
-    "react-helmet": "^5.2.0",
-    "react-highcharts": "^16.1.0",
-    "react-perfect-scrollbar": "^1.5.0",
-    "recharts": "^2.0.0-beta.3",
-    "store": "^2.0.0"
+    "react-countup": "^4.4.0",
+    "react-dom": "^18.2.0",
+    "react-draft-wysiwyg": "^1.15.0",
+    "react-helmet": "^6.1.0",
+    "react-perfect-scrollbar": "^1.5.8",
+    "recharts": "^2.12.4",
+    "store": "^2.0.12"
   },
   "devDependencies": {
-    "@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-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",
-    "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",
-    "husky": "^4.2.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-react": "^7.24.1",
+    "@lingui/cli": "^5.0.0",
+    "@lingui/core": "^5.0.0",
+    "@lingui/format-json": "^5.9.1",
+    "@umijs/preset-react": "^1.8.32",
+    "@lingui/macro": "^5.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-dev-expression": "^0.2.3",
+    "babel-plugin-import": "^1.13.8",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.10.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^4.3.8",
     "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^10.0.0",
+    "puppeteer-core": "^24.37.2",
+    "lint-staged": "^10.5.4",
     "mockjs": "^1.1.0",
     "module": "^1.2.5",
-    "prettier": "^1.19.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"
+    "prettier": "^2.8.8",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^21.0.0",
+    "typescript": "^4.9.5",
+    "umi": "^3.5.41"
+  },
+  "overrides": {
+    "@babel/core": "^7.29.0"
   },
   "engines": {
     "node": ">= 10.0.0"
@@ -81,31 +94,37 @@
     ]
   },
   "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"
     ],
-    "format": "minimal",
-    "extractBabelOptions": {
-      "presets": [
-        "@umijs/babel-preset-umi"
-      ]
-    }
+    "catalogs": [
+      {
+        "path": "src/locales/{locale}/messages",
+        "include": [
+          "src/pages",
+          "src/layouts",
+          "src/components",
+          "src/layouts"
+        ]
+      }
+    ]
   },
   "scripts": {
     "analyze": "cross-env ANALYZE=1 umi build",
-    "build": "umi build",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider umi build",
     "check:model": "umi dva list model",
     "lint:js": "eslint --ext .js src",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
-    "start": "umi dev",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider umi dev",
     "test": "cross-env BABELRC=none umi test",
     "prettier": "prettier --write 'src/**/*.{js,less}'",
+    "test:e2e": "node ./src/e2e/run-puppeteer.js",
     "precommit": "lint-staged",
     "add-locale": "lingui add-locale",
     "extract": "lingui extract",

src/components/DropOption/DropOption.js

@@ -9,14 +9,10 @@ const DropOption = ({
   buttonStyle,
   dropdownProps,
 }) => {
-  const menu = menuOptions.map(item => (
-    <Menu.Item key={item.key}>{item.name}</Menu.Item>
-  ))
+  const items = menuOptions.map(item => ({ key: item.key, label: item.name }))
+
   return (
-    <Dropdown
-      overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
-      {...dropdownProps}
-    >
+    <Dropdown overlay={<Menu onClick={onMenuClick} items={items} />} {...dropdownProps}>
       <Button style={{ border: 'none', ...buttonStyle }}>
         <BarsOutlined style={{ marginRight: 2 }} />
         <DownOutlined />

src/components/Ellipsis/index.js

@@ -40,7 +40,9 @@ export const cutStrByFullLength = (str = '', maxLength) => {
 
 const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
   if (tooltip) {
-    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    const base = tooltip === true ? {} : { ...tooltip };
+    const styleProp = overlayStyle ? { styles: { root: overlayStyle } } : {};
+    const props = { ...base, ...styleProp, title };
     return <Tooltip {...props}>{children}</Tooltip>;
   }
   return children;
@@ -63,17 +65,17 @@ const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other })
   }
 
   const spanAttrs = tooltip ? {} : { ...other };
-  return getTooltip({
-    tooltip,
-    overlayStyle: TooltipOverlayStyle,
-    title: text,
-    children: (
-      <span {...spanAttrs}>
-        {displayText}
-        {tail}
-      </span>
-    ),
-  });
+      return getTooltip({
+        tooltip,
+        overlayStyle: TooltipOverlayStyle,
+        title: text,
+        children: (
+          <span {...spanAttrs}>
+            {displayText}
+            {tail}
+          </span>
+        ),
+      });
 };
 
 export default class Ellipsis extends Component {

src/components/GlobalFooter/index.js

@@ -13,6 +13,7 @@ const GlobalFooter = ({ className, links, copyright }) => {
               key={link.key}
               title={link.key}
               target={link.blankTarget ? '_blank' : '_self'}
+              rel={link.blankTarget ? 'noreferrer noopener' : undefined}
               href={link.href}
             >
               {link.title}

src/components/GlobalFooter/index.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/style/themes/default.less';
+/* @import '~antd/lib/style/themes/default.less'; */
 
 .globalFooter {
   margin: 48px 0 24px 0;

src/components/Layout/Bread.js

@@ -2,45 +2,39 @@ 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 { i18n } from '@lingui/core'
+import iconMap from 'utils/iconMap'
+import { pathToRegexp } from 'path-to-regexp'
 import { queryAncestors } from 'utils'
 import styles from './Bread.less'
 
-@withI18n()
 @withRouter
 class Bread extends PureComponent {
-  generateBreadcrumbs = paths => {
-    return paths.map((item, key) => {
-      const content = item && (
-        <Fragment>
-          {item.icon && (
-            <LegacyIcon type={item.icon} style={{ marginRight: 4 }} />
-          )}
-          {item.name}
-        </Fragment>
-      )
+  generateBreadcrumbItems = paths => {
+    return paths
+      .map((item, key) => {
+        if (!item) return null
 
-      return (
-        item && (
-          <Breadcrumb.Item key={key}>
-            {paths.length - 1 !== key ? (
-              <Link to={item.route || '#'}>{content}</Link>
-            ) : (
-              content
-            )}
-          </Breadcrumb.Item>
+        const content = (
+          <Fragment>
+            {item.icon && <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>}
+            {item.name}
+          </Fragment>
         )
-      )
-    })
+
+        return ({
+          key: item.id || key,
+          title: paths.length - 1 !== key ? <Link to={item.route || '#'}>{content}</Link> : content,
+        })
+      })
+      .filter(Boolean)
   }
   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,15 +44,13 @@ class Bread extends PureComponent {
           routeList[0],
           {
             id: 404,
-            name: i18n.t`Not Found`,
+            name: i18n._('Not Found'),
           },
         ]
 
-    return (
-      <Breadcrumb className={styles.bread}>
-        {this.generateBreadcrumbs(paths)}
-      </Breadcrumb>
-    )
+    const items = this.generateBreadcrumbItems(paths)
+
+    return <Breadcrumb className={styles.bread} items={items} />
   }
 }
 

src/components/Layout/Header.js

@@ -2,25 +2,27 @@ 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 moment from 'moment'
+import {
+  BellOutlined,
+  RightOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons'
+import { i18n } from '@lingui/core'
+import { getLocale, setLocale } from 'utils'
+import dayjs from 'dayjs'
 import classnames from 'classnames'
 import config from 'config'
 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,
@@ -30,32 +32,52 @@ class Header extends PureComponent {
       onAllNotificationsRead,
     } = this.props
 
-    const rightContent = [
-      <Menu key="user" mode="horizontal" onClick={this.handleClickMenu}>
-        <SubMenu
-          title={
-            <Fragment>
-              <span style={{ color: '#999', marginRight: 4 }}>
-                <Trans>Hi,</Trans>
-              </span>
-              <span>{username}</span>
-              <Avatar style={{ marginLeft: 8 }} src={avatar} />
-            </Fragment>
-          }
-        >
-          <Menu.Item key="SignOut">
-            <Trans>Sign out</Trans>
-          </Menu.Item>
-        </SubMenu>
-      </Menu>,
+    const userMenuItems = [
+      {
+        key: 'user',
+        label: (
+          <Fragment>
+            <span style={{ color: '#999', marginRight: 4 }}>
+              {i18n._('Hi,')}
+            </span>
+            <span>{username}</span>
+            <Avatar style={{ marginLeft: 8 }} src={avatar} />
+          </Fragment>
+        ),
+            children: [
+          {
+            key: 'SignOut',
+            label: i18n._('Sign out'),
+          },
+        ],
+      },
     ]
 
+    const rightContent = [<Menu key="user" mode="horizontal" onClick={this.handleClickMenu} items={userMenuItems} />]
+
     if (config.i18n) {
       const { languages } = config.i18n
+      const language = getLocale()
       const currentLanguage = languages.find(
-        item => item.key === i18n._language
+        item => item.key === language
       )
 
+      const languageItems = [
+        {
+          key: 'language',
+          label: <Avatar size="small" src={currentLanguage.flag} />,
+          children: languages.map(item => ({
+            key: item.key,
+            label: (
+              <>
+                <Avatar size="small" style={{ marginRight: 8 }} src={item.flag} />
+                {item.title}
+              </>
+            ),
+          })),
+        },
+      ]
+
       rightContent.unshift(
         <Menu
           key="language"
@@ -64,20 +86,8 @@ class Header extends PureComponent {
             setLocale(data.key)
           }}
           mode="horizontal"
-        >
-          <SubMenu title={<Avatar size="small" src={currentLanguage.flag} />}>
-            {languages.map(item => (
-              <Menu.Item key={item.key}>
-                <Avatar
-                  size="small"
-                  style={{ marginRight: 8 }}
-                  src={item.flag}
-                />
-                {item.title}
-              </Menu.Item>
-            ))}
-          </SubMenu>
-        </Menu>
+          items={languageItems}
+        />
       )
     }
 
@@ -94,7 +104,7 @@ class Header extends PureComponent {
               itemLayout="horizontal"
               dataSource={notifications}
               locale={{
-                emptyText: <Trans>You have viewed all notifications.</Trans>,
+                emptyText: i18n._('You have viewed all notifications.'),
               }}
               renderItem={item => (
                 <List.Item className={styles.notificationItem}>
@@ -104,7 +114,7 @@ class Header extends PureComponent {
                         {item.title}
                       </Ellipsis>
                     }
-                    description={moment(item.date).fromNow()}
+                    description={dayjs(item.date).fromNow()}
                   />
                   <RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
                 </List.Item>
@@ -115,7 +125,7 @@ class Header extends PureComponent {
                 onClick={onAllNotificationsRead}
                 className={styles.clearButton}
               >
-                <Trans>Clear notifications</Trans>
+                {i18n._('Clear notifications')}
               </div>
             ) : null}
           </div>
@@ -138,20 +148,15 @@ class Header extends PureComponent {
           [styles.fixed]: fixed,
           [styles.collapsed]: collapsed,
         })}
+        style={{height: 72, backgroundColor: 'white', paddingInline: 0}}
         id="layoutHeader"
       >
         <div
           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/Header.less

@@ -27,6 +27,8 @@
   :global {
     .ant-menu-submenu-title {
       height: 72px;
+      display: flex;
+      align-items: center;
     }
 
     .ant-menu-horizontal {

src/components/Layout/Menu.js

@@ -1,16 +1,13 @@
 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
+// Use `items` prop for Menu (avoid JSX children like Menu.Item/SubMenu)
 
 @withRouter
 class SiderMenu extends PureComponent {
@@ -37,31 +34,30 @@ class SiderMenu extends PureComponent {
     store.set('openKeys', newOpenKeys)
   }
 
-  generateMenus = data => {
+  generateMenuItems = data => {
     return data.map(item => {
       if (item.children) {
-        return (
-          <SubMenu
-            key={item.id}
-            title={
-              <Fragment>
-                {item.icon && <LegacyIcon type={item.icon} />}
-                <span>{item.name}</span>
-              </Fragment>
-            }
-          >
-            {this.generateMenus(item.children)}
-          </SubMenu>
-        )
+        return {
+          key: item.id,
+          label: (
+            <Fragment>
+              {item.icon && iconMap[item.icon]}
+              <span>{item.name}</span>
+            </Fragment>
+          ),
+          children: this.generateMenuItems(item.children),
+        }
       }
-      return (
-        <Menu.Item key={item.id}>
+
+      return {
+        key: item.id,
+        label: (
           <NavLink to={item.route || '#'}>
-            {item.icon && <LegacyIcon type={item.icon} />}
+            {item.icon && iconMap[item.icon]}
             <span>{item.name}</span>
           </NavLink>
-        </Menu.Item>
-      )
+        ),
+      }
     })
   }
 
@@ -94,6 +90,8 @@ class SiderMenu extends PureComponent {
           openKeys: this.state.openKeys,
         }
 
+    const items = this.generateMenuItems(menuTree)
+
     return (
       <Menu
         mode="inline"
@@ -107,10 +105,9 @@ class SiderMenu extends PureComponent {
               }
             : undefined
         }
+        items={items}
         {...menuProps}
-      >
-        {this.generateMenus(menuTree)}
-      </Menu>
+      />
     )
   }
 }

src/components/Layout/Sider.js

@@ -1,18 +1,16 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Layout } from 'antd'
-import { withI18n, Trans } from '@lingui/react'
+import { i18n } from '@lingui/core'
 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,
@@ -29,7 +27,7 @@ class Sider extends PureComponent {
         trigger={null}
         collapsible
         collapsed={collapsed}
-        onBreakpoint={!isMobile && onCollapseChange}
+        onBreakpoint={!isMobile ? onCollapseChange : (broken) => {}}
         className={styles.sider}
       >
         <div className={styles.brand}>
@@ -59,7 +57,7 @@ class Sider extends PureComponent {
           <div className={styles.switchTheme}>
             <span>
               <BulbOutlined />
-              <Trans>Switch Theme</Trans>
+              {i18n._('Switch Theme')}
             </span>
             <Switch
               onChange={onThemeChange.bind(
@@ -67,8 +65,8 @@ class Sider extends PureComponent {
                 theme === 'dark' ? 'light' : 'dark'
               )}
               defaultChecked={theme === 'dark'}
-              checkedChildren={i18n.t`Dark`}
-              unCheckedChildren={i18n.t`Light`}
+              checkedChildren={i18n._('Dark')}
+              unCheckedChildren={i18n._('Light')}
             />
           </div>
         )}

src/e2e/login.e2e.js

@@ -1,41 +0,0 @@
-import puppeteer from 'puppeteer'
-
-describe('Login', () => {
-  let browser
-  let page
-
-  beforeAll(async () => {
-    browser = await puppeteer.launch({ args: ['--no-sandbox'] })
-  })
-
-  beforeEach(async () => {
-    page = await browser.newPage()
-    await page.goto('http://localhost:8000/en/login', {
-      waitUntil: 'networkidle2',
-    })
-  })
-
-  afterEach(() => page.close())
-
-  it('should login with failure', async () => {
-    await page.waitFor(selector => !!document.querySelector('#username'), {
-      timeout: 3000,
-    })
-    await page.type('#username', 'wrong_user')
-    await page.type('#password', 'wrong_password')
-    await page.click('button[type="button"]')
-    await page.waitForSelector('.anticon-close-circle') // should display error
-  })
-
-  it('should login successfully', async () => {
-    await page.waitForSelector('#username', { timeout: 3000 })
-    await page.type('#username', 'admin')
-    await page.type('#password', 'admin')
-    await page.click('button[type="button"]')
-    await page.waitForSelector('.ant-layout-footer')
-    const text = await page.evaluate(() => document.body.innerHTML)
-    expect(text).toContain('Ant Design Admin')
-  })
-
-  afterAll(() => browser.close())
-})

src/e2e/run-puppeteer.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+const puppeteer = require('puppeteer-core');
+
+(async () => {
+  // Use CHROME_PATH env var if provided, otherwise default macOS Chrome path
+  const executablePath = process.env.CHROME_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+  const url = process.env.E2E_URL || 'http://localhost:7000';
+
+  try {
+    const browser = await puppeteer.launch({
+      executablePath,
+      headless: true,
+      args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    });
+    const page = await browser.newPage();
+    await page.goto(url, { waitUntil: 'networkidle2' });
+    const title = await page.title();
+    console.log('E2E: page title =>', title);
+    await browser.close();
+    if (!/antd-admin/i.test(title)) process.exit(1);
+    process.exit(0);
+  } catch (err) {
+    console.error('E2E error:', err);
+    process.exit(1);
+  }
+})();

src/layouts/PrimaryLayout.js

@@ -1,13 +1,11 @@
-/* global window */
-/* global document */
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { withRouter } from 'umi'
 import { connect } from 'umi'
 import { MyLayout, GlobalFooter } from 'components'
-import { BackTop, Layout, Drawer } from 'antd'
+import { Drawer, FloatButton, Layout } from 'antd';
 import { enquireScreen, unenquireScreen } from 'enquire-js'
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
 import { config, getLocale } from 'utils'
 import Error from '../pages/404'
 import styles from './PrimaryLayout.less'
@@ -112,17 +110,17 @@ class PrimaryLayout extends PureComponent {
     }
 
     return (
-      <Fragment>
+      (<Fragment>
         <Layout>
           {isMobile ? (
             <Drawer
-              maskClosable
+              mask={{ closable: true }}
               closable={false}
               onClose={onCollapseChange.bind(this, !collapsed)}
-              visible={!collapsed}
+              open={!collapsed}
               placement="left"
               width={200}
-              style={{
+              rootStyle={{
                 padding: 0,
                 height: '100vh',
               }}
@@ -142,7 +140,7 @@ class PrimaryLayout extends PureComponent {
               <Bread routeList={newRouteList} />
               {hasPermission ? children : <Error />}
             </Content>
-            <BackTop
+            <FloatButton.BackTop
               className={styles.backTop}
               target={() => document.querySelector('#primaryLayout')}
             />
@@ -152,8 +150,8 @@ class PrimaryLayout extends PureComponent {
             />
           </div>
         </Layout>
-      </Fragment>
-    )
+      </Fragment>)
+    );
   }
 }
 

src/layouts/PublicLayout.js

@@ -1,3 +1,3 @@
-export default ({ children }) => {
-  return children
-}
+const PublicLayout = ({ children }) => children
+
+export default PublicLayout

src/layouts/index.js

@@ -1,76 +1,89 @@
 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_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 config from 'utils/config'
+import { zh, en, pt } from 'make-plural/plurals'
+import enMessages from '../locales/en/messages.json'
+import zhMessages from '../locales/zh/messages.json'
+import ptMessages from '../locales/pt-br/messages.json'
+import zhCN from 'antd/locale/zh_CN'
+import enUS from 'antd/locale/en_US'
+import ptBR from 'antd/locale/pt_BR'
 
 import BaseLayout from './BaseLayout'
 
-const languages = {
-  zh: zh_CN,
-  en: en_US,
-  'pt-br': pt_BR,
+i18n.loadLocaleData({
+  en: { plurals: en },
+  zh: { plurals: zh },
+  'pt-br': { plurals: pt }
+})
+
+// Activate the default language synchronously so I18nProvider doesn't render `null` in dev.
+// Avoid activating the user-selected language here because its messages may not be loaded yet.
+const configuredDefault = (config && config.i18n && config.i18n.defaultLanguage) || 'en'
+const _catalogs = {
+  en: enMessages,
+  zh: zhMessages,
+  'pt-br': ptMessages,
 }
-const { defaultLanguage } = i18n
+try {
+  const initialCatalog = _catalogs[configuredDefault]
+  if (initialCatalog) {
+    i18n.load(configuredDefault, initialCatalog)
+  }
+  i18n.activate(configuredDefault)
+} catch (e) {
+  // ignore activation errors during bootstrap
+}
+
+// antd
+const languages = {
+  zh: zhCN,
+  en: enUS,
+  'pt-br': ptBR
+}
+
+// remove unused defaultLanguage
 
 @withRouter
 class Layout extends Component {
   state = {
-    catalogs: {},
   }
 
-  language = defaultLanguage
-
   componentDidMount() {
-    const language = getLocale()
-    this.language = language
-    language && this.loadCatalog(language)
+    let language = getLocale()
+    if (!languages[language]) language = configuredDefault
+    this.loadCatalog(language).catch(() => {})
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    const language = getLocale()
-    const preLanguage = this.language
-    const { catalogs } = nextState
+  loadCatalog = async (lan) => {
+    const language = lan || i18n.defaultLanguage
+    try {
+      const catalogModule = await import(`../locales/${language}/messages.json`)
+      const catalog = catalogModule && catalogModule.default ? catalogModule.default : catalogModule
 
-    if (preLanguage !== language && !catalogs[language]) {
-      language && this.loadCatalog(language)
-      this.language = language
-      return false
+      i18n.load(language, catalog)
+      i18n.activate(language)
+    } catch (err) {
+      // If loading fails, fall back to default language and log a warning.
+      // eslint-disable-next-line no-console
+      console.warn(`Failed to load messages for locale "${language}":`, err)
     }
-    this.language = language
-
-    return true
-  }
-
-  loadCatalog = async language => {
-    const catalog = await import(
-      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
-      `@lingui/loader!../locales/${language}/messages.json`
-    )
-
-    this.setState(state => ({
-      catalogs: {
-        ...state.catalogs,
-        [language]: catalog,
-      },
-    }))
   }
 
   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 = configuredDefault
 
     return (
       <ConfigProvider locale={languages[language]}>
-        <I18nProvider language={language} catalogs={catalogs}>
+        <I18nProvider i18n={i18n}>
           <BaseLayout>{children}</BaseLayout>
         </I18nProvider>
       </ConfigProvider>

src/locales/en/messages.json

@@ -1,4 +1,5 @@
 {
+  "Password": "Password",
   "/dashboard": "/dashboard",
   "Add Param": "Add Param",
   "Address": "Address",
@@ -26,7 +27,6 @@
   "Not Found": "Not Found",
   "Operation": "Operation",
   "Params": "Params",
-  "Password": "Password",
   "Phone": "Phone",
   "Pick an address": "Pick an address",
   "Please pick an address": "Please pick an address",

src/locales/pt-br/messages.json

@@ -1,4 +1,5 @@
 {
+  "Password": "Senha",
   "/dashboard": "/dashboard",
   "Add Param": "Add Parametro",
   "Address": "Endereço",
@@ -26,7 +27,6 @@
   "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",

src/locales/zh/messages.json

@@ -1,4 +1,5 @@
 {
+  "Password": "密码",
   "/dashboard": "/zh/dashboard",
   "Add Param": "添加参数",
   "Address": "地址",
@@ -26,7 +27,6 @@
   "Not Found": "未找到",
   "Operation": "操作",
   "Params": "参数",
-  "Password": "密码",
   "Phone": "电话",
   "Pick an address": "选择地址",
   "Please pick an address": "选择地址",

src/models/app.js

@@ -1,9 +1,7 @@
-/* global window */
-
 import { history } from 'umi'
 import { stringify } from 'qs'
 import store from 'store'
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
 import { ROLE_TYPE } from 'utils/constant'
 import { queryLayout } from 'utils'
 import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
@@ -20,7 +18,7 @@ const goDashboard = () => {
   }
 }
 
-export default {
+const appModel = {
   namespace: 'app',
   state: {
     routeList: [
@@ -69,7 +67,7 @@ export default {
 
         cancelRequest.forEach((value, key) => {
           if (value.pathname !== window.location.pathname) {
-            value.cancel(CANCEL_REQUEST_MESSAGE)
+            value.abort(CANCEL_REQUEST_MESSAGE)
             cancelRequest.delete(key)
           }
         })
@@ -158,3 +156,5 @@ export default {
     },
   },
 }
+
+export default appModel

src/pages/chart/ECharts/AirportCoordComponent.js

@@ -1,321 +0,0 @@
-import React from 'react'
-import ReactEcharts from 'echarts-for-react'
-
-require('echarts/map/js/china.js')
-
-const AirportCoordComponent = () => {
-  let geoCoordMap = {
-    上海: [121.4648, 31.2891],
-    东莞: [113.8953, 22.901],
-    东营: [118.7073, 37.5513],
-    中山: [113.4229, 22.478],
-    临汾: [111.4783, 36.1615],
-    临沂: [118.3118, 35.2936],
-    丹东: [124.541, 40.4242],
-    丽水: [119.5642, 28.1854],
-    乌鲁木齐: [87.9236, 43.5883],
-    佛山: [112.8955, 23.1097],
-    保定: [115.0488, 39.0948],
-    兰州: [103.5901, 36.3043],
-    包头: [110.3467, 41.4899],
-    北京: [116.4551, 40.2539],
-    北海: [109.314, 21.6211],
-    南京: [118.8062, 31.9208],
-    南宁: [108.479, 23.1152],
-    南昌: [116.0046, 28.6633],
-    南通: [121.1023, 32.1625],
-    厦门: [118.1689, 24.6478],
-    台州: [121.1353, 28.6688],
-    合肥: [117.29, 32.0581],
-    呼和浩特: [111.4124, 40.4901],
-    咸阳: [108.4131, 34.8706],
-    哈尔滨: [127.9688, 45.368],
-    唐山: [118.4766, 39.6826],
-    嘉兴: [120.9155, 30.6354],
-    大同: [113.7854, 39.8035],
-    大连: [122.2229, 39.4409],
-    天津: [117.4219, 39.4189],
-    太原: [112.3352, 37.9413],
-    威海: [121.9482, 37.1393],
-    宁波: [121.5967, 29.6466],
-    宝鸡: [107.1826, 34.3433],
-    宿迁: [118.5535, 33.7775],
-    常州: [119.4543, 31.5582],
-    广州: [113.5107, 23.2196],
-    廊坊: [116.521, 39.0509],
-    延安: [109.1052, 36.4252],
-    张家口: [115.1477, 40.8527],
-    徐州: [117.5208, 34.3268],
-    德州: [116.6858, 37.2107],
-    惠州: [114.6204, 23.1647],
-    成都: [103.9526, 30.7617],
-    扬州: [119.4653, 32.8162],
-    承德: [117.5757, 41.4075],
-    拉萨: [91.1865, 30.1465],
-    无锡: [120.3442, 31.5527],
-    日照: [119.2786, 35.5023],
-    昆明: [102.9199, 25.4663],
-    杭州: [119.5313, 29.8773],
-    枣庄: [117.323, 34.8926],
-    柳州: [109.3799, 24.9774],
-    株洲: [113.5327, 27.0319],
-    武汉: [114.3896, 30.6628],
-    汕头: [117.1692, 23.3405],
-    江门: [112.6318, 22.1484],
-    沈阳: [123.1238, 42.1216],
-    沧州: [116.8286, 38.2104],
-    河源: [114.917, 23.9722],
-    泉州: [118.3228, 25.1147],
-    泰安: [117.0264, 36.0516],
-    泰州: [120.0586, 32.5525],
-    济南: [117.1582, 36.8701],
-    济宁: [116.8286, 35.3375],
-    海口: [110.3893, 19.8516],
-    淄博: [118.0371, 36.6064],
-    淮安: [118.927, 33.4039],
-    深圳: [114.5435, 22.5439],
-    清远: [112.9175, 24.3292],
-    温州: [120.498, 27.8119],
-    渭南: [109.7864, 35.0299],
-    湖州: [119.8608, 30.7782],
-    湘潭: [112.5439, 27.7075],
-    滨州: [117.8174, 37.4963],
-    潍坊: [119.0918, 36.524],
-    烟台: [120.7397, 37.5128],
-    玉溪: [101.9312, 23.8898],
-    珠海: [113.7305, 22.1155],
-    盐城: [120.2234, 33.5577],
-    盘锦: [121.9482, 41.0449],
-    石家庄: [114.4995, 38.1006],
-    福州: [119.4543, 25.9222],
-    秦皇岛: [119.2126, 40.0232],
-    绍兴: [120.564, 29.7565],
-    聊城: [115.9167, 36.4032],
-    肇庆: [112.1265, 23.5822],
-    舟山: [122.2559, 30.2234],
-    苏州: [120.6519, 31.3989],
-    莱芜: [117.6526, 36.2714],
-    菏泽: [115.6201, 35.2057],
-    营口: [122.4316, 40.4297],
-    葫芦岛: [120.1575, 40.578],
-    衡水: [115.8838, 37.7161],
-    衢州: [118.6853, 28.8666],
-    西宁: [101.4038, 36.8207],
-    西安: [109.1162, 34.2004],
-    贵阳: [106.6992, 26.7682],
-    连云港: [119.1248, 34.552],
-    邢台: [114.8071, 37.2821],
-    邯郸: [114.4775, 36.535],
-    郑州: [113.4668, 34.6234],
-    鄂尔多斯: [108.9734, 39.2487],
-    重庆: [107.7539, 30.1904],
-    金华: [120.0037, 29.1028],
-    铜川: [109.0393, 35.1947],
-    银川: [106.3586, 38.1775],
-    镇江: [119.4763, 31.9702],
-    长春: [125.8154, 44.2584],
-    长沙: [113.0823, 28.2568],
-    长治: [112.8625, 36.4746],
-    阳泉: [113.4778, 38.0951],
-    青岛: [120.4651, 36.3373],
-    韶关: [113.7964, 24.7028],
-  }
-
-  let BJData = [
-    [{ name: '北京' }, { name: '上海', value: 95 }],
-    [{ name: '北京' }, { name: '广州', value: 90 }],
-    [{ name: '北京' }, { name: '大连', value: 80 }],
-    [{ name: '北京' }, { name: '南宁', value: 70 }],
-    [{ name: '北京' }, { name: '南昌', value: 60 }],
-    [{ name: '北京' }, { name: '拉萨', value: 50 }],
-    [{ name: '北京' }, { name: '长春', value: 40 }],
-    [{ name: '北京' }, { name: '包头', value: 30 }],
-    [{ name: '北京' }, { name: '重庆', value: 20 }],
-    [{ name: '北京' }, { name: '常州', value: 10 }],
-  ]
-
-  let SHData = [
-    [{ name: '上海' }, { name: '包头', value: 95 }],
-    [{ name: '上海' }, { name: '昆明', value: 90 }],
-    [{ name: '上海' }, { name: '广州', value: 80 }],
-    [{ name: '上海' }, { name: '郑州', value: 70 }],
-    [{ name: '上海' }, { name: '长春', value: 60 }],
-    [{ name: '上海' }, { name: '重庆', value: 50 }],
-    [{ name: '上海' }, { name: '长沙', value: 40 }],
-    [{ name: '上海' }, { name: '北京', value: 30 }],
-    [{ name: '上海' }, { name: '丹东', value: 20 }],
-    [{ name: '上海' }, { name: '大连', value: 10 }],
-  ]
-
-  let GZData = [
-    [{ name: '广州' }, { name: '福州', value: 95 }],
-    [{ name: '广州' }, { name: '太原', value: 90 }],
-    [{ name: '广州' }, { name: '长春', value: 80 }],
-    [{ name: '广州' }, { name: '重庆', value: 70 }],
-    [{ name: '广州' }, { name: '西安', value: 60 }],
-    [{ name: '广州' }, { name: '成都', value: 50 }],
-    [{ name: '广州' }, { name: '常州', value: 40 }],
-    [{ name: '广州' }, { name: '北京', value: 30 }],
-    [{ name: '广州' }, { name: '北海', value: 20 }],
-    [{ name: '广州' }, { name: '海口', value: 10 }],
-  ]
-
-  let planePath =
-    'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
-
-  let convertData = function(data) {
-    let res = []
-    for (let i = 0; i < data.length; i += 1) {
-      let dataItem = data[i]
-      let fromCoord = geoCoordMap[dataItem[0].name]
-      let toCoord = geoCoordMap[dataItem[1].name]
-      if (fromCoord && toCoord) {
-        res.push({
-          fromName: dataItem[0].name,
-          toName: dataItem[1].name,
-          coords: [fromCoord, toCoord],
-        })
-      }
-    }
-    return res
-  }
-
-  let color = ['#a6c84c', '#ffa022', '#46bee9']
-  let series = []
-  ;[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
-    series.push(
-      {
-        name: `${item[0]} Top10`,
-        type: 'lines',
-        zlevel: 1,
-        effect: {
-          show: true,
-          period: 6,
-          trailLength: 0.7,
-          color: '#fff',
-          symbolSize: 3,
-        },
-        lineStyle: {
-          normal: {
-            color: color[i],
-            width: 0,
-            curveness: 0.2,
-          },
-        },
-        data: convertData(item[1]),
-      },
-      {
-        name: `${item[0]} Top10`,
-        type: 'lines',
-        zlevel: 2,
-        symbol: ['none', 'arrow'],
-        symbolSize: 10,
-        effect: {
-          show: true,
-          period: 6,
-          trailLength: 0,
-          symbol: planePath,
-          symbolSize: 15,
-        },
-        lineStyle: {
-          normal: {
-            color: color[i],
-            width: 1,
-            opacity: 0.6,
-            curveness: 0.2,
-          },
-        },
-        data: convertData(item[1]),
-      },
-      {
-        name: `${item[0]} Top10`,
-        type: 'effectScatter',
-        coordinateSystem: 'geo',
-        zlevel: 2,
-        rippleEffect: {
-          brushType: 'stroke',
-        },
-        label: {
-          normal: {
-            show: true,
-            position: 'right',
-            formatter: '{b}',
-          },
-        },
-        symbolSize(val) {
-          return val[2] / 8
-        },
-        itemStyle: {
-          normal: {
-            color: color[i],
-          },
-        },
-        data: item[1].map(dataItem => {
-          return {
-            name: dataItem[1].name,
-            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
-          }
-        }),
-      }
-    )
-  })
-
-  let option = {
-    backgroundColor: '#404a59',
-    title: {
-      text: '模拟迁徙',
-      subtext: '数据纯属虚构',
-      left: 'center',
-      textStyle: {
-        color: '#fff',
-      },
-    },
-    tooltip: {
-      trigger: 'item',
-    },
-    legend: {
-      orient: 'vertical',
-      top: 'bottom',
-      left: 'right',
-      data: ['北京 Top10', '上海 Top10', '广州 Top10'],
-      textStyle: {
-        color: '#fff',
-      },
-      selectedMode: 'single',
-    },
-    geo: {
-      map: 'china',
-      label: {
-        emphasis: {
-          show: false,
-        },
-      },
-      roam: true,
-      itemStyle: {
-        normal: {
-          areaColor: '#323c48',
-          borderColor: '#404a59',
-        },
-        emphasis: {
-          areaColor: '#2a333d',
-        },
-      },
-    },
-    series,
-  }
-
-  return (
-    <div className="examples">
-      <div className="parent">
-        <label> render a airport chart. </label>
-        <ReactEcharts
-          option={option}
-          style={{ height: '700px', width: '100%' }}
-          className="react_for_echarts"
-        />
-      </div>
-    </div>
-  )
-}
-
-export default AirportCoordComponent

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 = [
   [
@@ -88,8 +88,8 @@ const option = {
       symbolSize(data) {
         return Math.sqrt(data[2]) / 5e2
       },
-      label: {
-        emphasis: {
+      emphasis: {
+        label: {
           show: true,
           formatter(param) {
             return param.data[3]
@@ -98,21 +98,19 @@ const option = {
         },
       },
       itemStyle: {
-        normal: {
-          shadowBlur: 10,
-          shadowColor: 'rgba(120, 36, 50, 0.5)',
-          shadowOffsetY: 5,
-          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
-            {
-              offset: 0,
-              color: 'rgb(251, 118, 123)',
-            },
-            {
-              offset: 1,
-              color: 'rgb(204, 46, 72)',
-            },
-          ]),
-        },
+        shadowBlur: 10,
+        shadowColor: 'rgba(120, 36, 50, 0.5)',
+        shadowOffsetY: 5,
+        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: 'rgb(251, 118, 123)',
+          },
+          {
+            offset: 1,
+            color: 'rgb(204, 46, 72)',
+          },
+        ]),
       },
     },
     {
@@ -122,8 +120,8 @@ const option = {
       symbolSize(data) {
         return Math.sqrt(data[2]) / 5e2
       },
-      label: {
-        emphasis: {
+      emphasis: {
+        label: {
           show: true,
           formatter(param) {
             return param.data[3]
@@ -132,21 +130,19 @@ const option = {
         },
       },
       itemStyle: {
-        normal: {
-          shadowBlur: 10,
-          shadowColor: 'rgba(25, 100, 150, 0.5)',
-          shadowOffsetY: 5,
-          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
-            {
-              offset: 0,
-              color: 'rgb(129, 227, 238)',
-            },
-            {
-              offset: 1,
-              color: 'rgb(25, 183, 207)',
-            },
-          ]),
-        },
+        shadowBlur: 10,
+        shadowColor: 'rgba(25, 100, 150, 0.5)',
+        shadowOffsetY: 5,
+        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: 'rgb(129, 227, 238)',
+          },
+          {
+            offset: 1,
+            color: 'rgb(25, 183, 207)',
+          },
+        ]),
       },
     },
   ],

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/ChartAPIComponent.js

@@ -29,23 +29,19 @@ class ChartAPIComponent extends React.Component {
           left: '10%',
           width: '80%',
           label: {
-            normal: {
-              formatter: '{b}预期',
-            },
-            emphasis: {
+            formatter: '{b}预期',
+          },
+          emphasis: {
+            label: {
               position: 'inside',
               formatter: '{b}预期: {c}%',
             },
           },
           labelLine: {
-            normal: {
-              show: false,
-            },
+            show: false,
           },
           itemStyle: {
-            normal: {
-              opacity: 0.7,
-            },
+            opacity: 0.7,
           },
           data: [
             { value: 60, name: '访问' },
@@ -62,24 +58,20 @@ class ChartAPIComponent extends React.Component {
           width: '80%',
           maxSize: '80%',
           label: {
-            normal: {
-              position: 'inside',
-              formatter: '{c}%',
-              textStyle: {
-                color: '#fff',
-              },
-            },
-            emphasis: {
+            position: 'inside',
+            formatter: '{c}%',
+            color: '#fff',
+          },
+          emphasis: {
+            label: {
               position: 'inside',
               formatter: '{b}实际: {c}%',
             },
           },
           itemStyle: {
-            normal: {
-              opacity: 0.5,
-              borderColor: '#fff',
-              borderWidth: 2,
-            },
+            opacity: 0.5,
+            borderColor: '#fff',
+            borderWidth: 2,
           },
           data: [
             { value: 30, name: '访问' },

src/pages/chart/ECharts/ChartShowLoadingComponent.js

@@ -29,13 +29,15 @@ class ChartShowLoadingComponent extends React.Component {
         },
         radar: {
           indicator: [
-            { name: '销售（sales）', max: 6500 },
+            { name: '销售（sales）', max: 7000 },
             { name: '管理（Administration）', max: 16000 },
             { name: '信息技术（Information Techology）', max: 30000 },
             { name: '客服（Customer Support）', max: 38000 },
             { name: '研发（Development）', max: 52000 },
             { name: '市场（Marketing）', max: 25000 },
           ],
+          splitNumber: 5,
+          alignTicks: false,
         },
         series: [
           {

src/pages/chart/ECharts/ChartWithEventComponent.js

@@ -3,14 +3,22 @@ import ReactEcharts from 'echarts-for-react'
 
 const ChartWithEventComponent = () => {
   const onChartReady = echart => {
-    /* eslint-disable */
-    console.log('echart is ready', echart)
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.log('echart is ready', echart)
+    }
   }
   const onChartLegendselectchanged = (param, echart) => {
-    console.log(param, echart)
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.log(param, echart)
+    }
   }
   const onChartClick = (param, echart) => {
-    console.log(param, echart)
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.log(param, echart)
+    }
   }
   const getOtion = () => {
     const option = {
@@ -41,8 +49,9 @@ const ChartWithEventComponent = () => {
             { value: 135, name: '视频广告' },
             { value: 1548, name: '搜索引擎' },
           ],
-          itemStyle: {
-            emphasis: {
+          itemStyle: {},
+          emphasis: {
+            itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)',

src/pages/chart/ECharts/DynamicChartComponent.js

@@ -4,6 +4,7 @@ import ReactEcharts from 'echarts-for-react'
 class DynamicChartComponent extends React.Component {
   constructor(props) {
     super(props)
+    this.echartsRef = React.createRef()
     this.timeTicket = null
     this.count = 51
 
@@ -99,6 +100,7 @@ class DynamicChartComponent extends React.Component {
           name: '价格',
           max: 20,
           min: 0,
+          alignTicks: false,
           boundaryGap: [0.2, 0.2],
         },
         {
@@ -107,6 +109,7 @@ class DynamicChartComponent extends React.Component {
           name: '预购量',
           max: 1200,
           min: 0,
+          alignTicks: false,
           boundaryGap: [0.2, 0.2],
         },
       ],
@@ -117,9 +120,7 @@ class DynamicChartComponent extends React.Component {
           xAxisIndex: 1,
           yAxisIndex: 1,
           itemStyle: {
-            normal: {
-              barBorderRadius: 4,
-            },
+            borderRadius: 4,
           },
           animationEasing: 'elasticOut',
           animationDelay(idx) {
@@ -193,17 +194,13 @@ class DynamicChartComponent extends React.Component {
 
   render() {
     let code =
-      "<ReactEcharts ref='echartsInstance' \n" +
+      "<ReactEcharts ref={this.echartsRef} \n" +
       '    option={this.state.option} />\n'
     return (
       <div className="examples">
         <div className="parent">
           <label> use React state to render dynamic chart</label>
-          <ReactEcharts
-            ref="echarts_react"
-            option={this.state.option}
-            style={{ height: 400 }}
-          />
+          <ReactEcharts ref={this.echartsRef} option={this.state.option} style={{ height: 400 }} />
           <label> code below: use state of react to render dynamic chart</label>
           <pre>
             <code>{code}</code>

src/pages/chart/ECharts/EchartsComponent.js

@@ -7,10 +7,8 @@ import ThemeChartComponent from './ThemeChartComponent'
 import ChartShowLoadingComponent from './ChartShowLoadingComponent'
 import ChartAPIComponent from './ChartAPIComponent'
 import DynamicChartComponent from './DynamicChartComponent'
-import MapChartComponent from './MapChartComponent'
 
-// v1.2.0 add 7 demo.
-import AirportCoordComponent from './AirportCoordComponent'
+// removed MapChartComponent and AirportCoordComponent
 import CalendarComponent from './CalendarComponent'
 import GaugeComponent from './GaugeComponent'
 import GCalendarComponent from './GCalendarComponent'
@@ -28,8 +26,7 @@ const EchartsComponent = ({ type }) => {
   if (type === 'events') return <ChartWithEventComponent />
   if (type === 'theme') return <ThemeChartComponent />
   if (type === 'dynamic') return <DynamicChartComponent />
-  if (type === 'map') return <MapChartComponent />
-  if (type === 'airport') return <AirportCoordComponent />
+  // map and airport chart types removed
   if (type === 'graph') return <GraphComponent />
   if (type === 'calendar') return <CalendarComponent />
   if (type === 'treemap') return <TreemapComponent />

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/GaugeComponent.js

@@ -37,13 +37,10 @@ class GaugeComponent extends React.Component {
           },
           axisLabel: {
             // 坐标轴小标记
-            textStyle: {
-              // 属性lineStyle控制线条样式
-              fontWeight: 'bolder',
-              color: '#fff',
-              shadowColor: '#fff', // 默认透明
-              shadowBlur: 10,
-            },
+            fontWeight: 'bolder',
+            color: '#fff',
+            shadowColor: '#fff', // 默认透明
+            shadowBlur: 10,
           },
           axisTick: {
             // 坐标轴小标记
@@ -89,11 +86,9 @@ class GaugeComponent extends React.Component {
             shadowColor: '#fff', // 默认透明
             shadowBlur: 5,
             offsetCenter: [0, '50%'], // x, y，单位px
-            textStyle: {
-              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-              fontWeight: 'bolder',
-              color: '#fff',
-            },
+            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+            fontWeight: 'bolder',
+            color: '#fff',
           },
           data: [{ value: 40, name: 'km/h' }],
         },
@@ -118,13 +113,10 @@ class GaugeComponent extends React.Component {
           },
           axisLabel: {
             // 坐标轴小标记
-            textStyle: {
-              // 属性lineStyle控制线条样式
-              fontWeight: 'bolder',
-              color: '#fff',
-              shadowColor: '#fff', // 默认透明
-              shadowBlur: 10,
-            },
+            fontWeight: 'bolder',
+            color: '#fff',
+            shadowColor: '#fff', // 默认透明
+            shadowBlur: 10,
           },
           axisTick: {
             // 坐标轴小标记
@@ -172,11 +164,9 @@ class GaugeComponent extends React.Component {
             width: 80,
             height: 30,
             offsetCenter: [25, '20%'], // x, y，单位px
-            textStyle: {
-              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-              fontWeight: 'bolder',
-              color: '#fff',
-            },
+            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+            fontWeight: 'bolder',
+            color: '#fff',
           },
           data: [{ value: 1.5, name: 'x1000 r/min' }],
         },
@@ -211,13 +201,10 @@ class GaugeComponent extends React.Component {
             },
           },
           axisLabel: {
-            textStyle: {
-              // 属性lineStyle控制线条样式
-              fontWeight: 'bolder',
-              color: '#fff',
-              shadowColor: '#fff', // 默认透明
-              shadowBlur: 10,
-            },
+            fontWeight: 'bolder',
+            color: '#fff',
+            shadowColor: '#fff', // 默认透明
+            shadowBlur: 10,
             formatter(v) {
               switch (`${v}`) {
                 case '0':
@@ -280,13 +267,10 @@ class GaugeComponent extends React.Component {
             show: false,
           },
           axisLabel: {
-            textStyle: {
-              // 属性lineStyle控制线条样式
-              fontWeight: 'bolder',
-              color: '#fff',
-              shadowColor: '#fff', // 默认透明
-              shadowBlur: 10,
-            },
+            fontWeight: 'bolder',
+            color: '#fff',
+            shadowColor: '#fff', // 默认透明
+            shadowBlur: 10,
             formatter(v) {
               switch (`${v}`) {
                 case '0':

src/pages/chart/ECharts/GraphComponent.js

@@ -1325,10 +1325,8 @@ const GraphComponent = () => {
           layout: 'force',
           animation: false,
           label: {
-            normal: {
-              position: 'right',
-              formatter: '{b}',
-            },
+            position: 'right',
+            formatter: '{b}',
           },
           draggable: true,
           data: webkitDep.nodes.map((node, idx) => {

src/pages/chart/ECharts/LiquidfillComponent.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'
-
-require('echarts-liquidfill')
+import * as echarts from 'echarts'
+import 'echarts-liquidfill'
 
 const LiquidfillComponent = () => {
   const option = {
@@ -17,6 +17,7 @@ const LiquidfillComponent = () => {
       <div className="parent">
         <label>render a Liquidfill chart:</label>
         <ReactEcharts
+          echarts={echarts}
           option={option}
           style={{
             height: '400px',

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 = () => {
@@ -430,16 +430,12 @@ const LunarCalendarComponent = () => {
           coordinateSystem: 'calendar',
           symbolSize: 1,
           label: {
-            normal: {
-              show: true,
-              formatter(params) {
-                let d = echarts.number.parseDate(params.value[0])
-                return `${d.getDate()}\n\n${params.value[2]}\n\n`
-              },
-              textStyle: {
-                color: '#000',
-              },
+            show: true,
+            formatter(params) {
+              let d = echarts.number.parseDate(params.value[0])
+              return `${d.getDate()}\n\n${params.value[2]}\n\n`
             },
+            color: '#000',
           },
           data: lunarData,
         },
@@ -448,17 +444,13 @@ const LunarCalendarComponent = () => {
           coordinateSystem: 'calendar',
           symbolSize: 1,
           label: {
-            normal: {
-              show: true,
-              formatter(params) {
-                return `\n\n\n${params.value[3] || ''}`
-              },
-              textStyle: {
-                fontSize: 14,
-                fontWeight: 700,
-                color: '#a00',
-              },
+            show: true,
+            formatter(params) {
+              return `\n\n\n${params.value[3] || ''}`
             },
+            fontSize: 14,
+            fontWeight: 700,
+            color: '#a00',
           },
           data: lunarData,
         },

src/pages/chart/ECharts/MapChartComponent.js

@@ -1,209 +0,0 @@
-import React from 'react'
-import ReactEcharts from 'echarts-for-react'
-
-require('echarts/map/js/china.js')
-
-class MapChartComponent extends React.Component {
-  constructor() {
-    super()
-    this.timeTicket = null
-    const randomData = () => {
-      return Math.round(Math.random() * 1000)
-    }
-    const option = {
-      title: {
-        text: 'iphone销量',
-        subtext: '纯属虚构',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-        data: ['iphone3', 'iphone4', 'iphone5'],
-      },
-      visualMap: {
-        min: 0,
-        max: 2500,
-        left: 'left',
-        top: 'bottom',
-        text: ['高', '低'], // 文本，默认为数值文本
-        calculable: true,
-      },
-      toolbox: {
-        show: true,
-        orient: 'vertical',
-        left: 'right',
-        top: 'center',
-        feature: {
-          dataView: { readOnly: false },
-          restore: {},
-          saveAsImage: {},
-        },
-      },
-      series: [
-        {
-          name: 'iphone3',
-          type: 'map',
-          mapType: 'china',
-          roam: false,
-          label: {
-            normal: {
-              show: true,
-            },
-            emphasis: {
-              show: true,
-            },
-          },
-          data: [
-            { name: '北京', value: randomData() },
-            { name: '天津', value: randomData() },
-            { name: '上海', value: randomData() },
-            { name: '重庆', value: randomData() },
-            { name: '河北', value: randomData() },
-            { name: '河南', value: randomData() },
-            { name: '云南', value: randomData() },
-            { name: '辽宁', value: randomData() },
-            { name: '黑龙江', value: randomData() },
-            { name: '湖南', value: randomData() },
-            { name: '安徽', value: randomData() },
-            { name: '山东', value: randomData() },
-            { name: '新疆', value: randomData() },
-            { name: '江苏', value: randomData() },
-            { name: '浙江', value: randomData() },
-            { name: '江西', value: randomData() },
-            { name: '湖北', value: randomData() },
-            { name: '广西', value: randomData() },
-            { name: '甘肃', value: randomData() },
-            { name: '山西', value: randomData() },
-            { name: '内蒙古', value: randomData() },
-            { name: '陕西', value: randomData() },
-            { name: '吉林', value: randomData() },
-            { name: '福建', value: randomData() },
-            { name: '贵州', value: randomData() },
-            { name: '广东', value: randomData() },
-            { name: '青海', value: randomData() },
-            { name: '西藏', value: randomData() },
-            { name: '四川', value: randomData() },
-            { name: '宁夏', value: randomData() },
-            { name: '海南', value: randomData() },
-            { name: '台湾', value: randomData() },
-            { name: '香港', value: randomData() },
-            { name: '澳门', value: randomData() },
-          ],
-        },
-        {
-          name: 'iphone4',
-          type: 'map',
-          mapType: 'china',
-          label: {
-            normal: {
-              show: true,
-            },
-            emphasis: {
-              show: true,
-            },
-          },
-          data: [
-            { name: '北京', value: randomData() },
-            { name: '天津', value: randomData() },
-            { name: '上海', value: randomData() },
-            { name: '重庆', value: randomData() },
-            { name: '河北', value: randomData() },
-            { name: '安徽', value: randomData() },
-            { name: '新疆', value: randomData() },
-            { name: '浙江', value: randomData() },
-            { name: '江西', value: randomData() },
-            { name: '山西', value: randomData() },
-            { name: '内蒙古', value: randomData() },
-            { name: '吉林', value: randomData() },
-            { name: '福建', value: randomData() },
-            { name: '广东', value: randomData() },
-            { name: '西藏', value: randomData() },
-            { name: '四川', value: randomData() },
-            { name: '宁夏', value: randomData() },
-            { name: '香港', value: randomData() },
-            { name: '澳门', value: randomData() },
-          ],
-        },
-        {
-          name: 'iphone5',
-          type: 'map',
-          mapType: 'china',
-          label: {
-            normal: {
-              show: true,
-            },
-            emphasis: {
-              show: true,
-            },
-          },
-          data: [
-            { name: '北京', value: randomData() },
-            { name: '天津', value: randomData() },
-            { name: '上海', value: randomData() },
-            { name: '广东', value: randomData() },
-            { name: '台湾', value: randomData() },
-            { name: '香港', value: randomData() },
-            { name: '澳门', value: randomData() },
-          ],
-        },
-      ],
-    }
-    this.state = {
-      option,
-    }
-  }
-
-  componentDidMount() {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-    this.timeTicket = setInterval(() => {
-      const { option } = this.state
-      const r = new Date().getSeconds()
-      option.title.text = `iphone销量${r}`
-      option.series[0].name = `iphone销量${r}`
-      option.legend.data[0] = `iphone销量${r}`
-      this.setState({ option })
-    }, 1000)
-  }
-
-  componentWillUnmount() {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-  }
-
-  render() {
-    let code =
-      "require('echarts/map/js/china.js'); \n" +
-      '<ReactEcharts \n' +
-      '    option={this.state.option || {}} \n' +
-      "    style={{height: '350px', width: '100%'}}  \n" +
-      "    className='react_for_echarts' />"
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label>
-            {' '}
-            render a china map. <strong>MAP charts</strong>:{' '}
-          </label>
-          <ReactEcharts
-            option={this.state.option}
-            style={{ height: '500px', width: '100%' }}
-            className="react_for_echarts"
-          />
-          <label> code below: </label>
-          <pre>
-            <code>{code}</code>
-          </pre>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default MapChartComponent

src/pages/chart/ECharts/SimpleChartComponent.js

@@ -41,21 +41,21 @@ const SimpleChartComponent = () => {
         name: '邮件营销',
         type: 'line',
         stack: '总量',
-        areaStyle: { normal: {} },
+        areaStyle: {},
         data: [120, 132, 101, 134, 90, 230, 210],
       },
       {
         name: '联盟广告',
         type: 'line',
         stack: '总量',
-        areaStyle: { normal: {} },
+        areaStyle: {},
         data: [220, 182, 191, 234, 290, 330, 310],
       },
       {
         name: '视频广告',
         type: 'line',
         stack: '总量',
-        areaStyle: { normal: {} },
+        areaStyle: {},
         data: [150, 232, 201, 154, 190, 330, 410],
       },
     ],

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 = {
@@ -52,12 +52,12 @@ const ThemeChartComponent = () => {
         type: 'bar',
         stack: '总量',
         itemStyle: {
-          normal: {
-            barBorderColor: 'rgba(0,0,0,0)',
-            color: 'rgba(0,0,0,0)',
-          },
-          emphasis: {
-            barBorderColor: 'rgba(0,0,0,0)',
+          borderColor: 'rgba(0,0,0,0)',
+          color: 'rgba(0,0,0,0)',
+        },
+        emphasis: {
+          itemStyle: {
+            borderColor: 'rgba(0,0,0,0)',
             color: 'rgba(0,0,0,0)',
           },
         },
@@ -68,10 +68,8 @@ const ThemeChartComponent = () => {
         type: 'bar',
         stack: '总量',
         label: {
-          normal: {
-            show: true,
-            position: 'top',
-          },
+          show: true,
+          position: 'top',
         },
         data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
       },
@@ -80,10 +78,8 @@ const ThemeChartComponent = () => {
         type: 'bar',
         stack: '总量',
         label: {
-          normal: {
-            show: true,
-            position: 'bottom',
-          },
+          show: true,
+          position: 'bottom',
         },
         data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
       },

src/pages/chart/ECharts/TransparentBar3DComPonent.js

@@ -264,10 +264,8 @@ const option = {
 
       label: {
         show: false,
-        textStyle: {
-          fontSize: 16,
-          borderWidth: 1,
-        },
+        fontSize: 16,
+        borderWidth: 1,
       },
 
       itemStyle: {
@@ -276,10 +274,8 @@ const option = {
 
       emphasis: {
         label: {
-          textStyle: {
-            fontSize: 20,
-            color: '#900',
-          },
+          fontSize: 20,
+          color: '#900',
         },
         itemStyle: {
           color: '#900',

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 = [
@@ -190,26 +190,20 @@ const TreemapComponent = () => {
     return [
       {
         itemStyle: {
-          normal: {
-            borderWidth: 0,
-            gapWidth: 5,
-          },
+          borderWidth: 0,
+          gapWidth: 5,
         },
       },
       {
         itemStyle: {
-          normal: {
-            gapWidth: 1,
-          },
+          gapWidth: 1,
         },
       },
       {
         colorSaturation: [0.35, 0.5],
         itemStyle: {
-          normal: {
-            gapWidth: 1,
-            borderColorSaturation: 0.6,
-          },
+          gapWidth: 1,
+          borderColorSaturation: 0.6,
         },
       },
     ]
@@ -248,9 +242,7 @@ const TreemapComponent = () => {
           formatter: '{b}',
         },
         itemStyle: {
-          normal: {
-            borderColor: '#fff',
-          },
+          borderColor: '#fff',
         },
         levels: getLevelOption(),
         data: diskData,

src/pages/chart/ECharts/index.js

@@ -31,14 +31,6 @@ const chartList = [
     label: 'DynamicChart',
     value: 'dynamic',
   },
-  {
-    label: 'MapChart',
-    value: 'map',
-  },
-  {
-    label: 'AirportCoord',
-    value: 'airport',
-  },
   {
     label: 'Graph',
     value: 'graph',
@@ -101,7 +93,7 @@ class Chart extends React.Component {
         <div className={styles.chart}>
           <EchartsComponent type={this.state.type} />
         </div>
-        <div style={{ pading: 24, marginTop: 24 }}>
+        <div style={{ padding: 24, marginTop: 24 }}>
           All demos from{' '}
           <a href="https://github.com/hustcc/echarts-for-react">
             https://github.com/hustcc/echarts-for-react

src/pages/chart/ECharts/theme/macarons.js

@@ -1,32 +1,6 @@
-/* global define */
-;(function(root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    // eslint-disable-line
-    // AMD. Register as an anonymous module.
-    define(['exports', 'echarts'], factory) // eslint-disable-line
-  } else if (
-    typeof exports === 'object' &&
-    typeof exports.nodeName !== 'string'
-  ) {
-    // CommonJS
-    factory(exports, require('echarts'))
-  } else {
-    // Browser globals
-    factory({}, root.echarts)
-  }
-})(this, (exports, echarts) => {
-  let log = function(msg) {
-    if (typeof console !== 'undefined') {
-      /* eslint-disable */
-      console && console.error && console.error(msg)
-    }
-  }
-  if (!echarts) {
-    log('ECharts is not Loaded')
-    return
-  }
+import * as echarts from 'echarts'
 
-  let colorPalette = [
+let colorPalette = [
     '#2ec7c9',
     '#b6a2de',
     '#5ab1ef',
@@ -53,10 +27,8 @@
     color: colorPalette,
 
     title: {
-      textStyle: {
-        fontWeight: 'normal',
-        color: '#008acd',
-      },
+      fontWeight: 'normal',
+      color: '#008acd',
     },
 
     visualMap: {
@@ -66,9 +38,7 @@
 
     toolbox: {
       iconStyle: {
-        normal: {
-          borderColor: colorPalette[0],
-        },
+        borderColor: colorPalette[0],
       },
     },
 
@@ -135,8 +105,10 @@
         color: '#008acd',
       },
       controlStyle: {
-        normal: { color: '#008acd' },
-        emphasis: { color: '#008acd' },
+        color: '#008acd',
+      },
+      emphasis: {
+        controlStyle: { color: '#008acd' },
       },
       symbol: 'emptyCircle',
       symbolSize: 3,
@@ -150,13 +122,11 @@
 
     candlestick: {
       itemStyle: {
-        normal: {
+        color: '#d87a80',
+        color0: '#2ec7c9',
+        lineStyle: {
           color: '#d87a80',
           color0: '#2ec7c9',
-          lineStyle: {
-            color: '#d87a80',
-            color0: '#2ec7c9',
-          },
         },
       },
     },
@@ -167,19 +137,13 @@
     },
 
     map: {
-      label: {
-        normal: {
-          textStyle: {
-            color: '#d87a80',
-          },
-        },
-      },
+      label: { color: '#d87a80' },
       itemStyle: {
-        normal: {
-          borderColor: '#eee',
-          areaColor: '#ddd',
-        },
-        emphasis: {
+        borderColor: '#eee',
+        areaColor: '#ddd',
+      },
+      emphasis: {
+        itemStyle: {
           areaColor: '#fe994e',
         },
       },
@@ -215,5 +179,10 @@
     },
   }
 
+if (echarts && typeof echarts.registerTheme === 'function') {
   echarts.registerTheme('macarons', theme)
-})
+} else {
+  // Console may be used only to report theme registration failure; suppress lint here
+  // eslint-disable-next-line no-console
+  if (typeof console !== 'undefined' && console.error) console.error('ECharts is not loaded, failed to register macarons theme')
+}

src/pages/chart/ECharts/theme/shine.js

@@ -1,32 +1,6 @@
-/* global define */
-;(function(root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    // eslint-disable-line
-    // AMD. Register as an anonymous module.
-    define(['exports', 'echarts'], factory) // eslint-disable-line
-  } else if (
-    typeof exports === 'object' &&
-    typeof exports.nodeName !== 'string'
-  ) {
-    // CommonJS
-    factory(exports, require('echarts'))
-  } else {
-    // Browser globals
-    factory({}, root.echarts)
-  }
-})(this, (exports, echarts) => {
-  let log = function(msg) {
-    if (typeof console !== 'undefined') {
-      /* eslint-disable */
-      console && console.error && console.error(msg)
-    }
-  }
-  if (!echarts) {
-    log('ECharts is not Loaded')
-    return
-  }
+import * as echarts from 'echarts'
 
-  let colorPalette = [
+let colorPalette = [
     '#c12e34',
     '#e6b600',
     '#0098d9',
@@ -41,9 +15,7 @@
     color: colorPalette,
 
     title: {
-      textStyle: {
-        fontWeight: 'normal',
-      },
+      fontWeight: 'normal',
     },
 
     visualMap: {
@@ -52,9 +24,7 @@
 
     toolbox: {
       iconStyle: {
-        normal: {
-          borderColor: '#06467c',
-        },
+        borderColor: '#06467c',
       },
     },
 
@@ -73,23 +43,19 @@
         color: '#005eaa',
       },
       controlStyle: {
-        normal: {
-          color: '#005eaa',
-          borderColor: '#005eaa',
-        },
+        color: '#005eaa',
+        borderColor: '#005eaa',
       },
     },
 
     candlestick: {
       itemStyle: {
-        normal: {
+        color: '#c12e34',
+        color0: '#2b821d',
+        lineStyle: {
+          width: 1,
           color: '#c12e34',
           color0: '#2b821d',
-          lineStyle: {
-            width: 1,
-            color: '#c12e34',
-            color0: '#2b821d',
-          },
         },
       },
     },
@@ -99,24 +65,14 @@
     },
 
     map: {
-      label: {
-        normal: {
-          textStyle: {
-            color: '#c12e34',
-          },
-        },
-        emphasis: {
-          textStyle: {
-            color: '#c12e34',
-          },
-        },
-      },
+      label: { color: '#c12e34' },
       itemStyle: {
-        normal: {
-          borderColor: '#eee',
-          areaColor: '#ddd',
-        },
-        emphasis: {
+        borderColor: '#eee',
+        areaColor: '#ddd',
+      },
+      emphasis: {
+        label: { color: '#c12e34' },
+        itemStyle: {
           areaColor: '#e6b600',
         },
       },
@@ -138,9 +94,7 @@
         },
       },
       axisLabel: {
-        textStyle: {
-          color: 'auto',
-        },
+        color: 'auto',
       },
       splitLine: {
         length: 12,
@@ -154,9 +108,7 @@
         color: 'auto',
       },
       title: {
-        textStyle: {
-          color: '#333',
-        },
+        color: '#333',
       },
       detail: {
         textStyle: {
@@ -165,5 +117,10 @@
       },
     },
   }
+if (echarts && typeof echarts.registerTheme === 'function') {
   echarts.registerTheme('shine', theme)
-})
+} else {
+  // Console may be used only to report theme registration failure; suppress lint here
+  // eslint-disable-next-line no-console
+  if (typeof console !== 'undefined' && console.error) console.error('ECharts is not loaded, failed to register shine theme')
+}

src/pages/chart/highCharts/HighMoreComponent.js

@@ -1,10 +1,13 @@
 import React from 'react'
-import ReactHighcharts from 'react-highcharts'
-import HighchartsExporting from 'highcharts-exporting'
-import HighchartsMore from 'highcharts-more'
+import Highcharts from 'highcharts'
+import HighchartsMore from 'highcharts/highcharts-more'
+import Exporting from 'highcharts/modules/exporting'
+import Accessibility from 'highcharts/modules/accessibility'
+import HighchartsReact from 'highcharts-react-official'
 
-HighchartsMore(ReactHighcharts.Highcharts)
-HighchartsExporting(ReactHighcharts.Highcharts)
+HighchartsMore(Highcharts)
+Exporting(Highcharts)
+Accessibility(Highcharts)
 
 const config = {
   chart: {
@@ -47,7 +50,7 @@ const config = {
 }
 
 const HighMoreComponent = () => {
-  return <ReactHighcharts config={config} />
+  return <HighchartsReact highcharts={Highcharts} options={config} />
 }
 
 export default HighMoreComponent

src/pages/chart/highCharts/HighmapsComponent.js

@@ -1,5 +1,7 @@
 import React from 'react'
-import ReactHighmaps from 'react-highcharts/ReactHighmaps.src'
+import Highcharts from 'highcharts/highmaps'
+import Accessibility from 'highcharts/modules/accessibility'
+import HighchartsReact from 'highcharts-react-official'
 import maps from './mapdata/europe'
 
 const config = {
@@ -75,7 +77,9 @@ const config = {
   ],
 }
 
+Accessibility(Highcharts)
+
 const HighmapsComponent = () => {
-  return <ReactHighmaps config={config} />
+  return <HighchartsReact highcharts={Highcharts} constructorType={'mapChart'} options={config} />
 }
 export default HighmapsComponent

src/pages/chart/highCharts/HighstockComponent.js

@@ -1,5 +1,7 @@
 import React from 'react'
-import ReactHighstock from 'react-highcharts/ReactHighstock.src'
+import Highcharts from 'highcharts/highstock'
+import Accessibility from 'highcharts/modules/accessibility'
+import HighchartsReact from 'highcharts-react-official'
 
 const data = [
   [1220832000000, 22.56],
@@ -93,7 +95,15 @@ const config = {
 }
 
 const HighstockComponent = () => {
-  return <ReactHighstock config={config} />
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      constructorType={'stockChart'}
+      options={config}
+    />
+  )
 }
 
+Accessibility(Highcharts)
+
 export default HighstockComponent

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,18 +1,17 @@
 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
-      className={styles.numberCard}
-      bordered={false}
-      bodyStyle={{ padding: 10 }}
-    >
-      <LegacyIcon className={styles.iconWarp} style={{ color }} type={icon} />
+    <Card className={styles.numberCard} variant="shadow" styles={{ body: { padding: 10 } }}>
+      <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

@@ -1,5 +1,5 @@
 import React from 'react'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import PropTypes from 'prop-types'
 import { Table, Tag } from 'antd'
 import { Color } from 'utils'
@@ -38,7 +38,7 @@ function RecentSales({ data }) {
     {
       title: 'DATE',
       dataIndex: 'date',
-      render: text => moment(text).format('YYYY-MM-DD'),
+      render: text => dayjs(text).format('YYYY-MM-DD'),
     },
     {
       title: 'PRICE',
@@ -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/components/user.js

@@ -37,7 +37,7 @@ function User({ avatar, username, sales = 0, sold = 0 }) {
         </div>
       </div>
       <div className={styles.footer}>
-        <Button type="ghost" size="large">
+        <Button size="large">
           View Profile
         </Button>
       </div>

src/pages/dashboard/index.js

@@ -20,9 +20,11 @@ import styles from './index.less'
 import store from 'store'
 
 const bodyStyle = {
-  bodyStyle: {
-    height: 432,
-    background: '#fff',
+  styles: {
+    body: {
+      height: 432,
+      background: '#fff',
+    },
   },
 }
 
@@ -63,9 +65,11 @@ class Dashboard extends PureComponent {
           {numberCards}
           <Col lg={18} md={24}>
             <Card
-              bordered={false}
-              bodyStyle={{
-                padding: '24px 36px 24px 0',
+              variant="shadow"
+              styles={{
+                body: {
+                  padding: '24px 36px 24px 0',
+                },
               }}
             >
               <Sales data={sales} />
@@ -75,12 +79,14 @@ class Dashboard extends PureComponent {
             <Row gutter={24}>
               <Col lg={24} md={12}>
                 <Card
-                  bordered={false}
+                  variant="shadow"
                   className={styles.weather}
-                  bodyStyle={{
-                    padding: 0,
-                    height: 204,
-                    background: Color.blue,
+                  styles={{
+                    body: {
+                      padding: 0,
+                      height: 204,
+                      background: Color.blue,
+                    },
                   }}
                 >
                   <Weather
@@ -91,12 +97,14 @@ class Dashboard extends PureComponent {
               </Col>
               <Col lg={24} md={12}>
                 <Card
-                  bordered={false}
+                  variant="shadow"
                   className={styles.quote}
-                  bodyStyle={{
-                    padding: 0,
-                    height: 204,
-                    background: Color.peach,
+                  styles={{
+                    body: {
+                      padding: 0,
+                      height: 204,
+                      background: Color.peach,
+                    },
                   }}
                 >
                   <ScrollBar>
@@ -107,12 +115,12 @@ class Dashboard extends PureComponent {
             </Row>
           </Col>
           <Col lg={12} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <RecentSales data={recentSales} />
             </Card>
           </Col>
           <Col lg={12} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <ScrollBar>
                 <Comments data={comments} />
               </ScrollBar>
@@ -120,21 +128,23 @@ class Dashboard extends PureComponent {
           </Col>
           <Col lg={24} md={24}>
             <Card
-              bordered={false}
-              bodyStyle={{
-                padding: '24px 36px 24px 0',
+              variant="shadow"
+              styles={{
+                body: {
+                  padding: '24px 36px 24px 0',
+                },
               }}
             >
               <Completed data={completed} />
             </Card>
           </Col>
           <Col lg={8} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <Browser data={browser} />
             </Card>
           </Col>
           <Col lg={8} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <ScrollBar>
                 <Cpu {...cpu} />
               </ScrollBar>
@@ -142,8 +152,8 @@ class Dashboard extends PureComponent {
           </Col>
           <Col lg={8} md={24}>
             <Card
-              bordered={false}
-              bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}
+              variant="shadow"
+              styles={{ ...bodyStyle.styles, body: { ...bodyStyle.styles.body, padding: 0 } }}
             >
               <User {...user} avatar={avatar} username={username} />
             </Card>

src/pages/dashboard/model.js

@@ -1,10 +1,11 @@
 import { parse } from 'qs'
 import modelExtend from 'dva-model-extend'
 import api from 'api'
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from '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 { i18n } from '@lingui/core'
 
-@withI18n()
 class Index extends PureComponent {
   render() {
-    const { i18n } = this.props
-    return <Redirect to={i18n.t`/dashboard`} />
+    return <Redirect to={i18n._('/dashboard')} />
   }
 }
 

src/pages/login/index.js

@@ -4,7 +4,7 @@ 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 { i18n } from '@lingui/core'
 import { setLocale } from 'utils'
 import config from 'utils/config'
 
@@ -12,12 +12,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,15 +54,12 @@ class Login extends PureComponent {
             <FormItem name="username" 
               rules={[{ required: true }]} hasFeedback>
                 <Input
-                  placeholder={i18n.t`Username`}
+                  placeholder={i18n._('Username')}
+                  autoComplete="username"
                 />
             </FormItem>
-            <FormItem name="password"
-              rules={[{ required: true }]} hasFeedback>
-                <Input
-                  type="password"
-                  placeholder={i18n.t`Password`}
-                />
+            <FormItem name="password" rules={[{ required: true }]} hasFeedback>
+              <Input type="password" placeholder={i18n._('Password')} required autoComplete="current-password" />
             </FormItem>
             <Row>
               <Button
@@ -71,15 +67,15 @@ class Login extends PureComponent {
                 htmlType="submit"
                 loading={loading.effects.login}
               >
-                <Trans>Sign in</Trans>
+                {i18n._('Sign in')}
               </Button>
               <p>
                 <span className="margin-right">
-                  <Trans>Username</Trans>
+                  {i18n._('Username')}
                   ：guest
                 </span>
                 <span>
-                  <Trans>Password</Trans>
+                  {i18n._('Password')}
                   ：guest
                 </span>
               </p>

src/pages/login/model.js

@@ -1,10 +1,10 @@
 import { history } from 'umi'
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
 import api from 'api'
 
 const { loginUser } = api
 
-export default {
+const loginModel = {
   namespace: 'login',
 
   state: {},
@@ -35,3 +35,5 @@ export default {
     },
   },
 }
+
+export default loginModel

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 { i18n } from '@lingui/core'
 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: i18n._('Image'),
         dataIndex: 'image',
         render: text => <Avatar shape="square" src={text} />,
       },
       {
-        title: i18n.t`Title`,
+        title: i18n._('Title'),
         dataIndex: 'title',
         render: text => (
           <Ellipsis tooltip length={30}>
@@ -24,31 +23,31 @@ class List extends PureComponent {
         ),
       },
       {
-        title: i18n.t`Author`,
+        title: i18n._('Author'),
         dataIndex: 'author',
       },
       {
-        title: i18n.t`Categories`,
+        title: i18n._('Categories'),
         dataIndex: 'categories',
       },
       {
-        title: i18n.t`Tags`,
+        title: i18n._('Tags'),
         dataIndex: 'tags',
       },
       {
-        title: i18n.t`Visibility`,
+        title: i18n._('Visibility'),
         dataIndex: 'visibility',
       },
       {
-        title: i18n.t`Comments`,
+        title: i18n._('Comments'),
         dataIndex: 'comments',
       },
       {
-        title: i18n.t`Views`,
+        title: i18n._('Views'),
         dataIndex: 'views',
       },
       {
-        title: i18n.t`Publish Date`,
+        title: i18n._('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 => i18n._('Total {total} Items', { total }),
         }}
         bordered
         scroll={{ x: 1200 }}

src/pages/post/index.js

@@ -4,18 +4,17 @@ import { connect } from 'umi'
 import { Tabs } from 'antd'
 import { history } from 'umi'
 import { stringify } from 'qs'
-import { withI18n } from '@lingui/react'
+import { i18n } from '@lingui/core'
 import { Page } from 'components'
 import List from './components/List'
 
-const { TabPane } = Tabs
+// use `items` prop instead of Tabs.TabPane
 
 const EnumPostStatus = {
   UNPUBLISH: 1,
   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 (
@@ -63,21 +62,20 @@ class Post extends PureComponent {
               ? String(EnumPostStatus.UNPUBLISH)
               : String(EnumPostStatus.PUBLISHED)
           }
-          onTabClick={this.handleTabClick}
-        >
-          <TabPane
-            tab={i18n.t`Publised`}
-            key={String(EnumPostStatus.PUBLISHED)}
-          >
-            <List {...this.listProps} />
-          </TabPane>
-          <TabPane
-            tab={i18n.t`Unpublished`}
-            key={String(EnumPostStatus.UNPUBLISH)}
-          >
-            <List {...this.listProps} />
-          </TabPane>
-        </Tabs>
+          onChange={this.handleTabClick}
+          items={[
+            {
+              key: String(EnumPostStatus.PUBLISHED),
+              label: i18n._('Publised'),
+              children: <List {...this.listProps} />,
+            },
+            {
+              key: String(EnumPostStatus.UNPUBLISH),
+              label: i18n._('Unpublished'),
+              children: <List {...this.listProps} />,
+            },
+          ]}
+        />
       </Page>
     )
   }

src/pages/post/model.js

@@ -1,6 +1,6 @@
 import modelExtend from 'dva-model-extend'
 import api from 'api'
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
 import { pageModel } from 'utils/model'
 
 const { queryPostList } = api

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 { i18n } from '@lingui/core'
 import api from '@/services/api'
 import { Page } from 'components'
 
@@ -72,7 +72,10 @@ class RequestPage extends React.Component {
         })
       })
       .catch(errorInfo => {
-        console.log(errorInfo)
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error(errorInfo)
+        }
         /*
         errorInfo:
           {
@@ -189,7 +192,7 @@ class RequestPage extends React.Component {
                   onClick={this.handleVisible}
                   size="large"
                 >
-                  <Trans>Params</Trans>
+                  {i18n._('Params')}
                 </Button>
               </InputGroup>
 
@@ -199,7 +202,7 @@ class RequestPage extends React.Component {
                 style={{ width: 100 }}
                 onClick={this.handleRequest}
               >
-                <Trans>Send</Trans>
+                {i18n._('Send')}
               </Button>
             </Row>
             <Form ref={this.formRef} name="control-ref" >
@@ -242,7 +245,7 @@ class RequestPage extends React.Component {
 
                 <Row style={{ marginTop: 8 }}>
                   <Button onClick={this.handleAddField}>
-                    <Trans>Add Param</Trans>
+                    {i18n._('Add Param')}
                   </Button>
                 </Row>
               </div>

src/pages/user/[id]/models/detail.js

@@ -1,9 +1,9 @@
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
 import api from 'api'
 
 const { queryUser } = api
 
-export default {
+const userDetailModel = {
   namespace: 'userDetail',
 
   state: {
@@ -48,3 +48,5 @@ export default {
     },
   },
 }
+
+export default userDetailModel

src/pages/user/components/Filter.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import { FilterItem } from 'components'
-
-import { Trans } from '@lingui/react'
+import { i18n } from '@lingui/core'
 import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
@@ -30,8 +29,8 @@ class Filter extends Component {
     const { createTime } = fields
     if (createTime && createTime.length) {
       fields.createTime = [
-        moment(createTime[0]).format('YYYY-MM-DD'),
-        moment(createTime[1]).format('YYYY-MM-DD'),
+        dayjs(createTime[0]).format('YYYY-MM-DD'),
+        dayjs(createTime[1]).format('YYYY-MM-DD'),
       ]
     }
     return fields
@@ -67,15 +66,15 @@ class Filter extends Component {
   }
 
   render() {
-    const { onAdd, filter, i18n } = this.props
+    const { onAdd, filter } = this.props
     const { name, address } = filter
 
     let initialCreateTime = []
     if (filter.createTime && filter.createTime[0]) {
-      initialCreateTime[0] = moment(filter.createTime[0])
+      initialCreateTime[0] = dayjs(filter.createTime[0])
     }
     if (filter.createTime && filter.createTime[1]) {
-      initialCreateTime[1] = moment(filter.createTime[1])
+      initialCreateTime[1] = dayjs(filter.createTime[1])
     }
 
     return (
@@ -84,9 +83,9 @@ class Filter extends Component {
           <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
             <Form.Item name="name">
               <Search
-                placeholder={i18n.t`Search Name`}
-                onSearch={this.handleSubmit}
-              />
+                  placeholder={i18n._('Search Name')}
+                  onSearch={this.handleSubmit}
+                />
             </Form.Item>
           </Col>
           <Col
@@ -99,7 +98,7 @@ class Filter extends Component {
               <Cascader
                 style={{ width: '100%' }}
                 options={city}
-                placeholder={i18n.t`Please pick an address`}
+                placeholder={i18n._('Please pick an address')}
               />
             </Form.Item>
           </Col>
@@ -110,7 +109,7 @@ class Filter extends Component {
             sm={{ span: 12 }}
             id="createTimeRangePicker"
           >
-            <FilterItem label={i18n.t`CreateTime`}>
+            <FilterItem label={i18n._('CreateTime')}>
               <Form.Item name="createTime">
                 <RangePicker
                   style={{ width: '100%' }}
@@ -131,14 +130,14 @@ class Filter extends Component {
                   className="margin-right"
                   onClick={this.handleSubmit}
                 >
-                  <Trans>Search</Trans>
+                  {i18n._('Search')}
                 </Button>
                 <Button onClick={this.handleReset}>
-                  <Trans>Reset</Trans>
+                  {i18n._('Reset')}
                 </Button>
               </div>
-              <Button type="ghost" onClick={onAdd}>
-                <Trans>Create</Trans>
+              <Button onClick={onAdd}>
+                {i18n._('Create')}
               </Button>
             </Row>
           </Col>

src/pages/user/components/List.js

@@ -2,22 +2,21 @@ 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 { i18n } from '@lingui/core'
 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: i18n._('Are you sure delete this record?'),
         onOk() {
           onDeleteItem(record.id)
         },
@@ -26,70 +25,73 @@ class List extends PureComponent {
   }
 
   render() {
-    const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props
+    const { onDeleteItem, onEditItem, ...tableProps } = this.props
 
     const columns = [
       {
-        title: <Trans>Avatar</Trans>,
+        title: i18n._('Avatar'),
         dataIndex: 'avatar',
         key: 'avatar',
-        width: 72,
+        width: '7%',
         fixed: 'left',
         render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
       },
       {
-        title: <Trans>Name</Trans>,
+        title: i18n._('Name'),
         dataIndex: 'name',
         key: 'name',
         render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
       },
       {
-        title: <Trans>NickName</Trans>,
+        title: i18n._('NickName'),
         dataIndex: 'nickName',
         key: 'nickName',
       },
       {
-        title: <Trans>Age</Trans>,
+        title: i18n._('Age'),
         dataIndex: 'age',
+        width: '6%',
         key: 'age',
       },
       {
-        title: <Trans>Gender</Trans>,
+        title: i18n._('Gender'),
         dataIndex: 'isMale',
         key: 'isMale',
-        render: text => <span>{text ? 'Male' : 'Female'}</span>,
+        width: '7%',
+        render: text => <span>{text ? i18n._('Male') : i18n._('Female')}</span>,
       },
       {
-        title: <Trans>Phone</Trans>,
+        title: i18n._('Phone'),
         dataIndex: 'phone',
         key: 'phone',
       },
       {
-        title: <Trans>Email</Trans>,
+        title: i18n._('Email'),
         dataIndex: 'email',
         key: 'email',
       },
       {
-        title: <Trans>Address</Trans>,
+        title: i18n._('Address'),
         dataIndex: 'address',
         key: 'address',
       },
       {
-        title: <Trans>CreateTime</Trans>,
+        title: i18n._('CreateTime'),
         dataIndex: 'createTime',
         key: 'createTime',
       },
       {
-        title: <Trans>Operation</Trans>,
+        title: i18n._('Operation'),
         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: i18n._('Update') },
+                { key: '2', name: i18n._('Delete') },
               ]}
             />
           )
@@ -102,7 +104,7 @@ class List extends PureComponent {
         {...tableProps}
         pagination={{
           ...tableProps.pagination,
-          showTotal: total => i18n.t`Total ${total} Items`,
+          showTotal: total => i18n._('Total {total} Items', { total }),
         }}
         className={styles.table}
         bordered

src/pages/user/components/Modal.js

@@ -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 } from '@lingui/react'
+import { i18n } from '@lingui/core'
 import city from 'utils/city'
 
 const FormItem = Form.Item
@@ -31,57 +31,60 @@ class UserModal extends PureComponent {
         onOk(data)
       })
       .catch(errorInfo => {
-        console.log(errorInfo)
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error(errorInfo)
+        }
       })
   }
 
   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={i18n._('Name')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='nickName' rules={[{ required: true }]}
-            label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
+            label={i18n._('NickName')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='isMale' rules={[{ required: true }]}
-            label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
+            label={i18n._('Gender')} hasFeedback {...formItemLayout}>
             <Radio.Group>
               <Radio value>
-                <Trans>Male</Trans>
+                {i18n._('Male')}
               </Radio>
               <Radio value={false}>
-                <Trans>Female</Trans>
+                {i18n._('Female')}
               </Radio>
             </Radio.Group>
           </FormItem>
-          <FormItem name='age' label={i18n.t`Age`} hasFeedback {...formItemLayout}>
+          <FormItem name='age' label={i18n._('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: i18n._('The input is not valid phone!'), }]}
+            label={i18n._('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: i18n._('The input is not valid E-mail!'), }]}
+            label={i18n._('Email')} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
           <FormItem name='address' rules={[{ required: true, }]}
-            label={i18n.t`Address`} hasFeedback {...formItemLayout}>
+            label={i18n._('Address')} hasFeedback {...formItemLayout}>
             <Cascader
               style={{ width: '100%' }}
               options={city}
-              placeholder={i18n.t`Pick an address`}
+              placeholder={i18n._('Pick an address')}
             />
           </FormItem>
         </Form>
       </Modal>
-    )
+    );
   }
 }
 

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 { i18n } from '@lingui/core'
 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 { currentItem, modalVisible, modalType } = user
+    const { dispatch, user, loading } = this.props
+    const { currentItem, modalOpen, modalType } = user
 
     return {
-      i18n,
       item: modalType === 'create' ? {} : currentItem,
-      visible: modalVisible,
-      destroyOnClose: true,
-      maskClosable: false,
+      open: modalOpen,
+      destroyOnHidden: true,
+      mask: { closable: false },
       confirmLoading: loading.effects[`user/${modalType}`],
       title: `${
-        modalType === 'create' ? i18n.t`Create User` : i18n.t`Update User`
+        modalType === 'create' ? i18n._('Create User') : i18n._('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/pages/user/model.js

@@ -1,5 +1,5 @@
 import modelExtend from 'dva-model-extend'
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
 import api from 'api'
 import { pageModel } from 'utils/model'
 
@@ -16,7 +16,7 @@ export default modelExtend(pageModel, {
 
   state: {
     currentItem: {},
-    modalVisible: false,
+    modalOpen: false,
     modalType: 'create',
     selectedRowKeys: [],
   },
@@ -100,11 +100,11 @@ export default modelExtend(pageModel, {
 
   reducers: {
     showModal(state, { payload }) {
-      return { ...state, ...payload, modalVisible: true }
+      return { ...state, ...payload, modalOpen: true }
     },
 
     hideModal(state) {
-      return { ...state, modalVisible: false }
+      return { ...state, modalOpen: false }
     },
   },
 })

src/plugins/onError.js

@@ -1,13 +1,15 @@
 import { message } from 'antd'
 
-export default {
+const onErrorHandler = {
   onError(e, a) {
     e.preventDefault()
     if (e.message) {
       message.error(e.message)
     } else {
-      /* eslint-disable */
+      // eslint-disable-next-line no-console
       console.error(e)
     }
   },
 }
+
+export default onErrorHandler

src/services/api.js

@@ -1,4 +1,4 @@
-export default {
+const api = {
   queryRouteList: '/routes',
 
   queryUserInfo: '/user',
@@ -16,3 +16,5 @@ export default {
 
   queryDashboard: '/dashboard',
 }
+
+export default api

src/themes/default.less

@@ -1,16 +1,25 @@
-// 本文件是对 ant-design:
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-// 相应变量值的覆盖
-// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
-
-@import '../../node_modules/antd/lib/style/themes/default.less';
-
-@border-radius-base: 3px;
-@border-radius-sm: 2px;
-@shadow-color: rgba(0, 0, 0, 0.05);
-@shadow-1-down: 4px 4px 40px @shadow-color;
-@border-color-split: #f4f4f4;
-@border-color-base: #e5e5e5;
-@font-size-base: 13px;
-@text-color: #666;
-@hover-color: #f9f9fc;
+// 本文件是对 ant-design:
+// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+// 相应变量值的覆盖
+// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
+
+/* @import '../../node_modules/antd/lib/style/themes/default.less';*/
+
+@border-radius-base: 3px;
+@border-radius-sm: 2px;
+@shadow-color: rgba(0, 0, 0, 0.05);
+@shadow-1-down: 4px 4px 40px @shadow-color;
+@border-color-split: #f4f4f4;
+@border-color-base: #e5e5e5;
+@font-size-base: 13px;
+@text-color: #666;
+@hover-color: #f9f9fc;
+
+// Legacy token fallbacks (required by project's Less files)
+@primary-color: #1890ff;
+@success-color: #52c41a;
+@warning-color: #faad14;
+@error-color: #ff4d4f;
+@outline-fade: 20%;
+@text-color-secondary: fade(@text-color, 35%);
+@ease-in-out: ease-in-out;

src/themes/index.less

@@ -1,8 +1,9 @@
+@import '~antd/dist/reset.css';
 @import '~themes/vars.less';
 
 body {
   height: 100%;
-  overflow-y: hidden;
+  overflow-y: auto;
   background-color: #f8f8f8;
 }
 

src/utils/iconMap.jsx

@@ -0,0 +1,33 @@
+import {
+  PayCircleOutlined,
+  ShoppingCartOutlined,
+  MessageOutlined,
+  TeamOutlined,
+  UserOutlined,
+  DashboardOutlined,
+  ApiOutlined,
+  CameraOutlined,
+  EditOutlined,
+  CodeOutlined,
+  LineOutlined,
+  BarChartOutlined,
+  AreaChartOutlined,
+} from '@ant-design/icons'
+
+const iconMap = {
+  '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 />,
+}
+
+export default iconMap

src/utils/index.js

@@ -1,17 +1,21 @@
 import { cloneDeep } from 'lodash'
-const { pathToRegexp } = require("path-to-regexp")
-import moment from 'moment'
-import 'moment/locale/zh-cn'
+import { pathToRegexp } from 'path-to-regexp'
 import store from 'store'
-import { i18n } from './config'
+import { i18n } from '@lingui/core'
+
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(relativeTime)
 
 export classnames from 'classnames'
 export config from './config'
 export request from './request'
 export { Color } from './theme'
 
-export const languages = i18n ? i18n.languages.map(item => item.key) : []
-export const defaultLanguage = i18n ? i18n.defaultLanguage : ''
+export const languages = i18n && i18n.languages ? i18n.languages.map(item => item.key) : []
+export const defaultLanguage = i18n && i18n.defaultLanguage ? i18n.defaultLanguage : 'en'
 
 /**
  * Query objects that specify keys and values in an array where all values are objects.
@@ -165,8 +169,8 @@ export function getLocale() {
 
 export function setLocale(language) {
   if (getLocale() !== language) {
-    moment.locale(language === 'zh' ? 'zh-cn' : language)
+    dayjs.locale(language === 'zh' ? 'zh-cn' : language)
     store.set('locale', language)
     window.location.reload()
   }
-}
+}

src/utils/index.test.js

@@ -1,15 +1,18 @@
-const { pathToRegexp } = require("path-to-regexp")
+import { pathToRegexp } from 'path-to-regexp'
+
+// strip known locale prefix (e.g. /zh, /en, /pt-br) before matching
+const stripLocale = (p) => p.replace(/^\/(en|zh|pt-br)(\/|$)/, '/')
 
 describe('test pathToRegexp', () => {
   it('get right', () => {
-    expect(pathToRegexp('/user').exec('/zh/user')).toEqual(
+    expect(pathToRegexp('/user').exec(stripLocale('/zh/user'))).toEqual(
       pathToRegexp('/user').exec('/user')
     )
     expect(pathToRegexp('/user').exec('/user')).toEqual(
       pathToRegexp('/user').exec('/user')
     )
 
-    expect(pathToRegexp('/user/:id').exec('/zh/user/1')).toEqual(
+    expect(pathToRegexp('/user/:id').exec(stripLocale('/zh/user/1'))).toEqual(
       pathToRegexp('/user/:id').exec('/user/1')
     )
     expect(pathToRegexp('/user/:id').exec('/user/1')).toEqual(

src/utils/request.js

@@ -1,19 +1,18 @@
 import axios from 'axios'
-import { cloneDeep, isEmpty } from 'lodash'
-const { parse, compile } = require("path-to-regexp")
+import { cloneDeep } from 'lodash'
+import { parse, compile } from 'path-to-regexp'
 import { message } from 'antd'
 import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
 
-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 {
     let domain = ''
-    const urlMatch = url.match(/[a-zA-z]+:\/\/[^/]*/)
+    const urlMatch = url.match(/[A-Za-z]+:\/\/[^/]*/)
     if (urlMatch) {
       ;[domain] = urlMatch
       url = url.slice(domain.length)
@@ -33,12 +32,12 @@ 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,
-      cancel,
-    })
+  // Use AbortController signal for request cancellation (compatible with axios v2)
+  const controller = new AbortController()
+  options.signal = controller.signal
+  window.cancelRequest.set(Symbol(Date.now()), {
+    pathname: window.location.pathname,
+    abort: reason => controller.abort(reason || CANCEL_REQUEST_MESSAGE),
   })
 
   return axios(options)
@@ -63,9 +62,10 @@ export default function request(options) {
       })
     })
     .catch(error => {
-      const { response, message } = error
+      const { response, message: errMsg, code, name } = error
 
-      if (String(message) === CANCEL_REQUEST_MESSAGE) {
+      // axios v1 cancellation can surface as ERR_CANCELED / CanceledError or message matching our sentinel
+      if (String(errMsg) === CANCEL_REQUEST_MESSAGE || code === 'ERR_CANCELED' || name === 'CanceledError') {
         return {
           success: false,
         }
@@ -80,7 +80,7 @@ export default function request(options) {
         msg = data.message || statusText
       } else {
         statusCode = 600
-        msg = error.message || 'Network Error'
+        msg = errMsg || error.message || 'Network Error'
       }
 
       /* eslint-disable */