Merge pull request #1091 from jaywhen/patch-1

fix garbled characters in README-zh_CN.md

.umirc.js

@@ -23,7 +23,6 @@ export default {
   dynamicImport: {
     loading: 'components/Loader/Loader',
   },
-  extraBabelPresets: ['@lingui/babel-preset-react'],
   extraBabelPlugins: [
     [
       'import',
@@ -43,6 +42,9 @@ export default {
       },
       'ant-design-icons',
     ],
+    [
+      'macros'
+    ]
   ],
   hash: true,
   ignoreMomentLocale: true,
@@ -65,6 +67,7 @@ export default {
   theme: lessToJs(
     fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
   ),
+  webpack5: {},
   chainWebpack: function (config, { webpack }) {
     config.merge({
       optimization: {

README-zh_CN.md

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

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

package.json

@@ -5,19 +5,19 @@
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
-    "@lingui/react": "^2.8.0",
+    "@lingui/react": "^3.7.0",
     "antd": "^4.0.0",
-    "axios": "^0.19.0",
+    "axios": "^0.21.0",
     "classnames": "^2.2.6",
-    "d3-shape": "^1.3.0",
+    "d3-shape": "^2.1.0",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.0",
     "draftjs-to-markdown": "^0.6.0",
     "dva-model-extend": "^0.1.2",
-    "echarts": "^4.4.0",
-    "echarts-for-react": "^2.0.15-beta.1",
-    "echarts-gl": "^1.1.1",
-    "echarts-liquidfill": "^2.0.2",
+    "echarts": "^5.0.0",
+    "echarts-for-react": "^3.0.0",
+    "echarts-gl": "^2.0.2",
+    "echarts-liquidfill": "^3.0.0",
     "enquire-js": "^0.2.1",
     "highcharts-exporting": "^0.1.7",
     "highcharts-more": "^0.1.7",
@@ -38,16 +38,18 @@
     "store": "^2.0.0"
   },
   "devDependencies": {
-    "@lingui/babel-preset-react": "^2.9.0",
-    "@lingui/cli": "^2.9.0",
-    "@lingui/loader": "^2.9.0",
+    "@babel/preset-react": "^7.12.13",
+    "@lingui/cli": "^3.7.0",
+    "@lingui/macro": "^3.7.2",
     "@umijs/preset-react": "^1.4.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-macros": "^3.0.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "cross-env": "^7.0.0",
     "eslint": "^7.0.0",
-    "eslint-config-react-app": "^5.0.0",
+    "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.1.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
@@ -61,8 +63,8 @@
     "prettier": "^2.0.0",
     "stylelint": "^13.2.0",
     "stylelint-config-prettier": "^8.0.0",
-    "stylelint-config-standard": "^20.0.0",
-    "typescript": "^3.8.3",
+    "stylelint-config-standard": "^21.0.0",
+    "typescript": "^4.2.3",
     "umi": "^3.2.0"
   },
   "engines": {
@@ -81,19 +83,31 @@
     ]
   },
   "lingui": {
-    "fallbackLocale": "en",
+    "fallbackLocales": {
+      "default": "en"
+    },
     "sourceLocale": "en",
-    "localeDir": "src/locales",
-    "srcPathDirs": [
-      "src/pages",
-      "src/layouts",
-      "src/components",
-      "src/layouts"
+    "locales": [
+      "en",
+      "zh",
+      "pt-br"
+    ],
+    "catalogs": [
+      {
+        "path": "src/locales/{locale}/messages",
+        "include": [
+          "src/pages",
+          "src/layouts",
+          "src/components",
+          "src/layouts"
+        ]
+      }
     ],
     "format": "minimal",
     "extractBabelOptions": {
       "presets": [
-        "@umijs/babel-preset-umi"
+        "@umijs/babel-preset-umi",
+        "@babel/preset-react"
       ]
     }
   },

src/components/Layout/Bread.js

@@ -2,13 +2,12 @@ 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 { t } from "@lingui/macro"
 import iconMap from 'utils/iconMap'
 const { pathToRegexp } = require('path-to-regexp')
 import { queryAncestors } from 'utils'
 import styles from './Bread.less'
 
-@withI18n()
 @withRouter
 class Bread extends PureComponent {
   generateBreadcrumbs = (paths) => {
@@ -36,7 +35,7 @@ class Bread extends PureComponent {
     })
   }
   render() {
-    const { routeList, location, i18n } = this.props
+    const { routeList, location } = this.props
 
     // Find a route that matches the pathname.
     const currentRoute = routeList.find(
@@ -50,7 +49,7 @@ class Bread extends PureComponent {
           routeList[0],
           {
             id: 404,
-            name: i18n.t`Not Found`,
+            name: t`Not Found`,
           },
         ]
 

src/components/Layout/Header.js

@@ -8,8 +8,8 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
 } from '@ant-design/icons'
-import { Trans, withI18n } from '@lingui/react'
-import { setLocale } from 'utils'
+import { Trans } from "@lingui/macro"
+import { getLocale, setLocale } from 'utils'
 import moment from 'moment'
 import classnames from 'classnames'
 import config from 'config'
@@ -17,14 +17,12 @@ import styles from './Header.less'
 
 const { SubMenu } = Menu
 
-@withI18n()
 class Header extends PureComponent {
   handleClickMenu = e => {
     e.key === 'SignOut' && this.props.onSignOut()
   }
   render() {
     const {
-      i18n,
       fixed,
       avatar,
       username,
@@ -56,8 +54,9 @@ class Header extends PureComponent {
 
     if (config.i18n) {
       const { languages } = config.i18n
+      const language = getLocale()
       const currentLanguage = languages.find(
-        item => item.key === i18n._language
+        item => item.key === language
       )
 
       rightContent.unshift(

src/components/Layout/Sider.js

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

src/layouts/index.js

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

src/pages/chart/ECharts/AirportCoordComponent.js

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

src/pages/chart/ECharts/BubbleGradientComponent.js

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

src/pages/chart/ECharts/CalendarComponent.js

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

src/pages/chart/ECharts/GCalendarComponent.js

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

src/pages/chart/ECharts/LunarCalendarComponent.js

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

src/pages/chart/ECharts/MapChartComponent.js

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

src/pages/chart/ECharts/ThemeChartComponent.js

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

src/pages/chart/ECharts/TreemapComponent.js

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

src/pages/index.js

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

src/pages/login/index.js

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

src/pages/post/components/List.js

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

src/pages/post/index.js

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

src/pages/request/index.js

@@ -4,7 +4,7 @@ import { apiPrefix } from 'utils/config'
 import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd'
 import classnames from 'classnames'
 import { CloseOutlined } from '@ant-design/icons'
-import { Trans } from '@lingui/react'
+import { Trans } from "@lingui/macro"
 import api from '@/services/api'
 import { Page } from 'components'
 

src/pages/user/components/Filter.js

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

src/pages/user/components/List.js

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

src/pages/user/components/Modal.js

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

src/pages/user/index.js

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

src/utils/request.js

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