upgrade dep: umi^4.0.0-canary.20220429.4

adding user page

.eslintignore

@@ -1,7 +1 @@
-src/**/*-test.js
-src/public
-src/routes/chart/ECharts/theme
-src/routes/chart/highCharts/mapdata
-src/locales/_build/
-src/locales/**/*.js
 docs/**/*.js

.eslintrc

@@ -1,7 +1,8 @@
 {
   "extends": "react-app",
   "rules": {
-    "jsx-a11y/href-no-hash": "off",
+    "import/no-anonymous-default-export": 0,
+    "jsx-a11y/href-no-hash": 0,
     "no-console": "warn",
     "valid-jsdoc": "warn"
   }

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log
 yarn-error.log
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 
 # ide
 .idea
@@ -20,4 +21,6 @@ package-lock.json
 
 # jslingui
 src/locales/_build
-src/locales/**/*.js
+src/locales/**/*.js
+
+.vscode

.travis.yml

@@ -1,23 +1,18 @@
 language: node_js
 node_js:
-- node
+  - node
 script:
-- npm run build
+  - npm run build
 before_install:
-- |
-    if [ "$TRAVIS_BRANCH" = "develop" ]; then
-      for prefixed_envvar in ${!DEV_*}; do
-        eval export ${prefixed_envvar#DEV_}="${!prefixed_envvar}"
-      done
-    elif [ "$TRAVIS_BRANCH" = "master" ]; then
-      for prefixed_envvar in ${!PROD_*}; do
-        eval export ${prefixed_envvar#PROD_}="${!prefixed_envvar}"
-      done
-    fi
-- openssl aes-256-cbc -K $encrypted_18b2305b78c9_key -iv $encrypted_18b2305b78c9_iv -in config/id_rsa.enc -out ~/.ssh/id_rsa -d
-- chmod 600 ~/.ssh/id_rsa
-- echo -e "Host $HOST\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
-- yarn global add now
+  - yarn global add now
 after_script:
-- scp -o stricthostkeychecking=no -r ./dist root@$HOST:$BUILD_DIR
-- cd ./docs && now -A $DOC_NOW_CONFIG -t $NOW_TOKEN && now alias -A $DOC_NOW_CONFIG -t $NOW_TOKEN
+  - |
+    if [[ $TRAVIS_BRANCH == 'master' ]]; then
+      echo $PROD_SITE_NOW_CONFIG >> dist/vercel.json && echo $PROD_DOC_NOW_CONFIG >> docs/vercel.json;
+    else
+      echo $DEV_SITE_NOW_CONFIG >> dist/vercel.json && echo $DEV_DOC_NOW_CONFIG >> docs/vercel.json;
+    fi
+  - cd ./dist
+  - now -A vercel.json -t $NOW_TOKEN --prod -c
+  - cd ../docs
+  - now -A vercel.json -t $NOW_TOKEN --prod -c

.umirc.js

@@ -1,97 +0,0 @@
-// https://umijs.org/config/
-import { resolve } from 'path'
-import { i18n } from './src/utils/config'
-
-export default {
-  ignoreMomentLocale: true,
-  targets: { ie: 9 },
-  plugins: [
-    [
-      // https://umijs.org/plugin/umi-plugin-react.html
-      'umi-plugin-react',
-      {
-        dva: { immer: true },
-        antd: true,
-        dynamicImport: {
-          webpackChunkName: true,
-          loadingComponent: './components/Loader/Loader',
-        },
-        routes: {
-          exclude: [
-            /model\.(j|t)sx?$/,
-            /service\.(j|t)sx?$/,
-            /models\//,
-            /components\//,
-            /services\//,
-            /chart\/Container\.js$/,
-            /chart\/ECharts\/.+Component\.js$/,
-            /chart\/ECharts\/.+ComPonent\.js$/,
-            /chart\/ECharts\/theme\/.+\.js$/,
-            /chart\/highCharts\/.+Component\.js$/,
-            /chart\/highCharts\/mapdata\/.+\.js$/,
-            /chart\/Recharts\/.+Component\.js$/,
-            /chart\/Recharts\/Container\.js$/,
-          ],
-          update: routes => {
-            if (!i18n) return routes
-
-            const newRoutes = []
-            for (const item of routes[0].routes) {
-              newRoutes.push(item)
-              if (item.path) {
-                newRoutes.push(
-                  Object.assign({}, item, {
-                    path:
-                      `/:lang(${i18n.languages
-                        .map(item => item.key)
-                        .join('|')})` + item.path,
-                  })
-                )
-              }
-            }
-            routes[0].routes = newRoutes
-
-            return routes
-          },
-        },
-        dll: {
-          include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch', 'antd/es'],
-        },
-        hardSource: /* isMac */ process.platform === 'darwin',
-      },
-    ],
-  ],
-  // Theme for antd
-  // https://ant.design/docs/react/customize-theme
-  theme: './config/theme.config.js',
-  // Webpack Configuration
-  proxy: {
-    '/api/v1/weather': {
-      target: 'https://api.seniverse.com/',
-      changeOrigin: true,
-      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
-    },
-  },
-  alias: {
-    api: resolve(__dirname, './src/services/'),
-    components: resolve(__dirname, './src/components'),
-    config: resolve(__dirname, './src/utils/config'),
-    models: resolve(__dirname, './src/models'),
-    routes: resolve(__dirname, './src/routes'),
-    services: resolve(__dirname, './src/services'),
-    themes: resolve(__dirname, './src/themes'),
-    utils: resolve(__dirname, './src/utils'),
-  },
-  extraBabelPresets: ['@lingui/babel-preset-react'],
-  extraBabelPlugins: [
-    [
-      'import',
-      {
-        libraryName: 'lodash',
-        libraryDirectory: '',
-        camel2DashComponentName: false,
-      },
-      'lodash',
-    ],
-  ],
-}

README-zh_CN.md

@@ -38,7 +38,7 @@
 
 ## 使用
 
-1. 下载项目代码。
+1. 下载项目代码。
 
 ```bash
 git clone https://github.com/zuiidea/antd-admin.git my-project
@@ -71,11 +71,11 @@ npm run start
 
 ## 支持环境
 
-现代浏览器及 IE9。
+现代浏览器。
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## 参与贡献  
 
@@ -84,4 +84,4 @@ npm run start
 - 通过 [Issue](http://github.com/zuiidea/antd-admin/issues) 报告 bug 或进行咨询。
 - 提交 [Pull Request](http://github.com/zuiidea/antd-admin/pulls) 改进代码。
 
-> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

README.md

@@ -9,9 +9,9 @@
 
 <div align="center">
 
-A excellent front-end solution for enterprise applications.
+An excellent front-end solution for enterprise applications.
 
-[![antd](https://img.shields.io/badge/antd-^3.10.0-blue.svg?style=flat-square)](https://github.com/ant-design/ant-design)
+[![antd](https://img.shields.io/badge/antd-^4.0.0-blue.svg?style=flat-square)](https://github.com/ant-design/ant-design)
 [![umi](https://img.shields.io/badge/umi-^2.2.1-orange.svg?style=flat-square)](https://github.com/umijs/umi)
 [![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/issues)
 [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)
@@ -71,11 +71,11 @@ npm run start
 
 ## Browsers support
 
-Modern browsers and IE9.
+Modern browsers.
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## Contributing
 

config/config.prod.ts

@@ -0,0 +1,5 @@
+const config = {
+  publicPath: 'https://cdn.antd-admin.zuiidea.com/',
+}
+
+export default config

config/config.ts

@@ -0,0 +1,61 @@
+/**
+ * see more, https://umijs.org/config
+ */
+import lessToJs from 'less-vars-to-js'
+import fs from 'fs'
+import routes from './routes'
+import path from 'path'
+import proxy from './proxy'
+
+const theme = lessToJs(
+  fs.readFileSync(path.join(__dirname, '../src/themes/default.less'), 'utf8')
+)
+
+const config = {
+  hash: true,
+  ignoreMomentLocale: true,
+  targets: { ie: 11 },
+  theme,
+  proxy,
+  routes,
+  devtool: 'eval',
+  mock: {
+    exclude: ['utils/index'],
+  },
+  extraBabelPresets: ['@lingui/babel-preset-react'],
+  extraBabelPlugins: [
+    'macros',
+    [
+      'import',
+      {
+        libraryName: 'lodash',
+        libraryDirectory: '',
+        camel2DashComponentName: false,
+      },
+      'lodash',
+    ],
+    [
+      'import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: 'css',
+      },
+      'antd',
+    ],
+    [
+      'import',
+      {
+        libraryName: '@ant-design',
+        libraryDirectory: 'icons',
+        camel2DashComponentName: false,
+      },
+      'ant-design-icons',
+    ],
+  ],
+  chainWebpack: (memo) => {
+    memo.module.rule('po').test(/\.po$/).use('po').loader('@lingui/loader')
+  },
+}
+
+export default config

config/proxy.ts

@@ -0,0 +1,7 @@
+export default {
+  '/api/v1/weather': {
+    target: 'https://api.seniverse.com/',
+    changeOrigin: true,
+    pathRewrite: { '^/api/v1/weather': '/v3/weather' },
+  },
+}

config/routes.ts

@@ -0,0 +1,13 @@
+const routes = [
+  {
+    exact: false,
+    path: '/',
+    // component: '@/layouts/index', // comment due to double layout
+    routes: [
+      { exact: true, path: '/login', component: '@/pages/login' },
+      { exact: true, path: '/user', component: '@/pages/user' },
+    ],
+  },
+]
+
+export default routes

config/theme.config.js

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

docs/API-configuration.md

@@ -0,0 +1,86 @@
+# API configuration
+
+## Why
+
+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,
+  })
+}
+```
+
+## Configuration and use
+
+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 {
+  ...
+  queryUser: '/user/:id',
+  queryUserList: '/users',
+  updateUser: 'Patch /user/:id',
+  createUser: 'POST /user/:id',
+  removeUser: 'DELETE /user/:id',
+  removeUserList: 'POST /users/delete',
+  ...
+}
+```
+
+Used in other files
+
+```javascript
+import { queryUser } from 'api'
+
+// in the general file
+...
+queryUser(option).then(data => console.log(data))
+...
+
+/ / Model file
+...
+yield call(queryUser, option)
+...
+```
+
+## Method to realize
+
+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 api from './api'
+
+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]
+  }
+
+  return function(data) {
+    return request({
+      url,
+      data,
+      method,
+    })
+  }
+}
+
+const APIFunction = {}
+for (const key in api) {
+  APIFunction[key] = gen(api[key])
+}
+
+module.exports = APIFunction
+
+```

docs/README.md

@@ -8,7 +8,7 @@
 
 <div align="center">
 
-A excellent front-end solution for enterprise applications.
+An excellent front-end solution for enterprise applications.
 
 [![antd](https://img.shields.io/badge/antd-^3.10.0-blue.svg?style=flat-square)](https://github.com/ant-design/ant-design)
 [![umi](https://img.shields.io/badge/umi-^2.2.1-orange.svg?style=flat-square)](https://github.com/umijs/umi)
@@ -68,11 +68,11 @@ npm run start
 
 ## Browsers support
 
-Modern browsers and IE9.
+Modern browsers.
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## Contributing
 

docs/_sidebar.md

@@ -2,6 +2,11 @@
   - [Quick Start](getting-started.md)
 - Customization
   - [Configuration](configuration.md)
+  - [API Configuration](API-configuration.md)
+  - [I18n](i18n.md)
+  - [Layout](layout.md)
+  - [Request](request.md)
 - Guide
   - [Deploy](deploy.md)
 - [Change Log](change-log.md)
+- [FAQ](faq.md)

docs/change-log.md

@@ -28,7 +28,7 @@
 
 - Support internationalization, extract source fields from source code, load language packs on demand, and automatically translate online.
 
-- Support for the introduction of `ant-design-pro` components, `lodash` functions on demand.
+- Support for the introduction `lodash` functions on demand.
   
 - Support multiple layouts, which rules can be used according to the rules.
 

docs/configuration.md

@@ -12,7 +12,7 @@ You can do some custom configuration in `/src/utils/config.js`:
 
 - Type： `String`
 
-  Configure the copyright notice to apply to the login page, at the bottom of the `Primay` layout.
+  Configure the copyright notice to apply to the login page, at the bottom of the `Primary` layout.
 
 ## logoPath
 
@@ -24,7 +24,7 @@ You can do some custom configuration in `/src/utils/config.js`:
 
 - Type： `String`
 
-  Configure the prefix of the interface in the project. The interface related documents can be viewed [API configuration]()
+  Configure the prefix of the interface in the project. The interface related documents can be viewed [API configuration](API-configuration.md)
 
 ## fixedHeader
 
@@ -39,25 +39,25 @@ You can do some custom configuration in `/src/utils/config.js`:
   Configuration? Which routes use which layout, unspecified route uses the default layout `Public`, the project currently has `Primary` and `Public` layouts,
      The default configuration is as follows：
   
-    ```js
+    ```javascript
         layouts: [
             {
                 name: 'primary',
                 include: [/.*/],
-                exlude: [/(\/(en|zh))*\/login/],
+                exclude: [/(\/(en|zh))*\/login/],
             },
         ],
     ```
 
     The object properties for each layout are as follows:
 
-    - `name` - The name of the layout;
+    - `name` - The name of the layout;
   
     - `include` - Specifies a list of routing rules that use this layout, which can be a regular expression or a string;
   
-    - `exlude` - Specifies a list of routing rules that do not use this layout, which can be a regular expression or a string.
+    - `exclude` - Specifies a list of routing rules that do not use this layout, which can be a regular expression or a string.
   
- > Note: `exlude` takes precedence over `include`, and the layout behind it has a higher priority than the previous layout. The development process may need to be combined with the layout in the `src/layouts` directory. For details, see [Using Layout]().
+ > Note: `exclude` takes precedence over `include`, and the layout previous it has a higher priority than the behind layout. The development process may need to be combined with the layout in the `src/layouts` directory. For details, see [Using Layout](./layout.md).
 
 ## i18n
 
@@ -65,7 +65,7 @@ You can do some custom configuration in `/src/utils/config.js`:
 
   Configure internationalization, the default configuration is as follows:
 
-  ```js
+  ```javascript
   i18n: {
       languages: [
         {
@@ -91,9 +91,9 @@ You can do some custom configuration in `/src/utils/config.js`:
 
     - `key` - The `key` of the language is applied to the page url to distinguish the language, and also corresponds to the language package folder name in the `src/locales` directory;
 
-    - `title` - The name of the language, at the bottom of the login page, at the top of the `Primay` layout, the language switch is displayed;
+    - `title` - The name of the language, at the bottom of the login page, at the top of the `Primary` layout, the language switch is displayed;
 
-    - `flag` - The path of the flag icon of the language, the language switching display at the top of the `Primay` layout.
+    - `flag` - The path of the flag icon of the language, the language switching display at the top of the `Primary` layout.
 
  ### i18n.defaultLanguage
    

docs/deploy.md

@@ -2,6 +2,8 @@
 
 After the development is completed and verified in the development environment, it needs to be deployed to our users.
 
+![i18n](./_media/term_build.svg)
+
 ## Build
 
 First execute the following command,

docs/faq.md

@@ -0,0 +1,9 @@
+# FAQ
+
+Most asked
+
+## create new page
+
+    1. just copy a page in /src/pages (route here auto generated by [umi](https://umijs.org/guide/router.html#basic-routing))
+    2. modify namespace/pathToRegexp in model.js
+    3. modify mock route.js to add a route

docs/i18n.md

@@ -0,0 +1,75 @@
+# globalization
+
+## Add language
+
+Take Japanese as an example.
+
+![i18n](../_media/term_i18n.svg)
+
+1. Add a language pack local file, `ja` is the Japanese language code, and a list of languages ​​that support translation [有道智云](http://ai.youdao.com/docs/doc-trans-api.s#p05), the `src/locales/ja/messages.json` file will be generated after running the following command.
+
+   ```bash 
+   npm run add-locale ja
+   ```
+
+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
+   ```
+
+   You will see the following information:
+
+   ```bash
+   Catalog statistics:
+   ┌─────────────┬─────────────┬─────────┐
+   │ Language    │ Total count │ Missing │
+   ├─────────────┼─────────────┼─────────┤
+   │ en (source) │     52      │    -    │
+   │ ja          │     52      │   52    │
+   │ zh          │     52      │    0    │
+   └─────────────┴─────────────┴─────────┘
+   ```
+
+3. At the same time, we have added the relevant configuration in `src/utils/config.js`.
+
+   ```javascript
+   {
+       ...
+       i18n: {
+           languages: [
+               ...
+               {
+                   key:'ja',
+                   title: '日本語',
+                   flag: '/japanese.svg',
+               },
+           ],
+       },
+   }
+   ```
+
+   > Routing related effects, after the configuration `npm run start` takes effect after restart.
+
+4. Use the built-in commands for automatic translation. You will see the translated configuration in `src/locales/ja/messages.json`.
+
+   ```bash
+   npm run trans:only
+   ```
+
+   You will see the following information:
+
+   ```bash
+   start: en -> ja
+   ...
+   youdao: en -> ja: Unpublished -> 未発表
+   youdao: en -> ja: Update -> 更新
+   youdao: en -> ja: Update User -> ユーザーの更新
+   youdao: en -> ja: Username -> 名
+   ...
+   All translations have been completed.
+   ```
+
+   > `npm run trans` will execute `npm run extract` and `npm run trans:only` in order.
+
+5. Finally, you can adjust the inaccurate fields in `src/locales/ja/messages.json`. Start the development mode `npm run start`, open [http://localhost:7000/ja/login](http://localhost:7000/ja/login) and you will see the Japanese version of the app.

docs/layout.md

@@ -0,0 +1,60 @@
+# Layout
+
+## Add a new 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).
+
+```javascript
+   layouts: [
+           {
+               name: 'primary',
+               include: [/.*/],
+               exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/secondary\/(.*)/],
+           },
+           {
+               name: 'secondary',
+               include: [/(\/(en|zh))*\/secondary\/(.*)/],
+           },
+   ],
+```
+
+2. Add the `secondary` layout component to the `src/layouts/BaseLayout.js` file.
+
+```javascript
+   import SecondaryLayout from './SecondaryLayout'
+
+   const LayoutMap = {
+     primary: PrimaryLayout,
+     public: PublicLayout,
+     secondary: SecondaryLayout,
+   }
+```
+
+3. Add the `SecondaryLayout.js` file to the `src/layouts/` directory.
+
+```javascript
+   import React from 'react'
+
+   export default ({ children }) => {
+     return (
+       <div>
+         <h1>Secondary</h1>
+         {children}
+       </div>
+     )
+   }
+```
+
+4. Add a `secondary/index.js` file to the `src/pages/` directory.
+
+```javascript
+   import React from 'react'
+
+   export default ({ children }) => {
+     Return <div>Secondary page Content</div>
+   }
+```
+
+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 @@
-{
-  "name": "antd-admin-devdoc",
-  "alias": ["devdoc-antd-admin.now.sh", "devdoc.antd-admin.zuiidea.com"],
-  "type": "static",
-  "public": true
-}

docs/now.json

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

docs/request.md

@@ -0,0 +1,22 @@
+# HTTP request
+
+this project use axios for http service, file located in src/utils/request.js
+
+## Custom Header
+
+As for privilege access or modify cookie, you could add header param by yourself
+
+```
+axios.defaults.headers.common['Authorization'] = 'token'
+```
+
+Or
+
+```
+axios.interceptors.request.use(function (config) {
+  config.headers.token = window.localStorage.getItem('token');
+  return config;
+}, function (error) {
+  return Promise.reject(error);
+});
+```

docs/zh-cn/API-configuration.md

@@ -0,0 +1,86 @@
+# 接口配置
+
+## 为什么
+
+在使用了`redux`或者`dva`项目中，我们经常会写类似下面的`service`层的函数，使代码结构更清晰，但是很容易看出，我们会写很多相似的代码，在`antd-admin@5.0`中，使用了更加简洁的配置方式实现了相同的功能。
+
+```javascript
+export async function login(data) {
+  return request({
+    url: '/api/v1/user/login',
+    method: 'post',
+    data,
+  })
+}
+```
+
+## 配置和使用
+
+在`src/services/api.js`文件中，你会看到如下配置对象，对象的键用于调用时的函数名称，对象的值为请求的`url`，默认请求方式为`GET`，如果是其他请求方式对象的值的格式则为`'method url'`。
+
+```javascript
+export default {
+  ...
+  queryUser: '/user/:id',
+  queryUserList: '/users',
+  updateUser: 'Patch /user/:id',
+  createUser: 'POST /user/:id',
+  removeUser: 'DELETE /user/:id',
+  removeUserList: 'POST /users/delete',
+  ...
+}
+```
+
+在其他文件中使用
+
+```javascript
+import { queryUser } from 'api'
+
+// 一般文件中
+...
+queryUser(option).then(data => console.log(data))
+...
+
+// model文件中
+...
+yield call(queryUser, option)
+...
+```
+
+## 实现方式
+
+参考`src/services/index.js`文件，对api配置进行遍历，每个属性都返回对应的封装后的request函数。
+
+```javascript
+import request from 'utils/request'
+import { apiPrefix } from 'utils/config'
+
+import api from './api'
+
+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]
+  }
+
+  return function(data) {
+    return request({
+      url,
+      data,
+      method,
+    })
+  }
+}
+
+const APIFunction = {}
+for (const key in api) {
+  APIFunction[key] = gen(api[key])
+}
+
+module.exports = APIFunction
+
+```

docs/zh-cn/README.md

@@ -68,11 +68,11 @@ npm run start
 
 ## 支持环境
 
-现代浏览器及 IE9。
+现代浏览器。
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --------- | --------- | --------- | --------- | --------- | 
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## 参与贡献  
 

docs/zh-cn/_sidebar.md

@@ -2,6 +2,10 @@
   - [快速上手](zh-cn/getting-started.md)
 - 定制化
   - [配置项](zh-cn/configuration.md)
+  - [接口配置](zh-cn/API-configuration.md)
+  - [国际化](zh-cn/i18n.md)
+  - [布局](zh-cn/layout.md)
+  - [http 请求](zh-cn/request.md)
 - 指南
   - [部署](zh-cn/deploy.md)
 - [更新日志](zh-cn/change-log.md)

docs/zh-cn/change-log.md

@@ -28,7 +28,7 @@
 
 - 支持国际化，源码中抽离翻译字段，按需加载语言包，自动在线翻译。
 
-- 支持按需引入 `ant-design-pro` 组件、`lodash` 函数。
+- 支持按需引入 `lodash` 函数。
   
 - 支持多布局，可根据规则规定哪些路由使用哪种布局。
 

docs/zh-cn/configuration.md

@@ -24,7 +24,7 @@
 
 - 类型： `String`
 
-  配置项目中接口的前缀，接口相关文档可查看 [接口配置化]()
+  配置项目中接口的前缀，接口相关文档可查看 [接口配置](API-configuration.md)
 
 ## fixedHeader
 
@@ -39,12 +39,12 @@
     配置哪些路由使用哪种布局，未指定路由使用默认布局 `Public`，项目中目前有 `Primary` 和 `Public` 两种布局，
     默认配置如下：
   
-    ```js
+    ```javascript
         layouts: [
             {
                 name: 'primary',
                 include: [/.*/],
-                exlude: [/(\/(en|zh))*\/login/],
+                exclude: [/(\/(en|zh))*\/login/],
             },
         ],
     ```
@@ -55,9 +55,9 @@
   
     - `include` - 指定使用该布局的路由规则列表，规则可为正则表达式或者字符串；
   
-    - `exlude` - 指定不使用该布局的路由规则列表，规则可为正则表达式或者字符串。
+    - `exclude` - 指定不使用该布局的路由规则列表，规则可为正则表达式或者字符串。
   
- > 注意：`exlude` 优先级高于 `include`，后面的布局优先级高于前面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局]()。
+ > 注意：`exclude` 优先级高于 `include`，前面的布局优先级高于后面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局](./layout.md)。
 
 ## i18n
 
@@ -65,7 +65,7 @@
 
   配置国际化，默认配置如下：
 
-  ```js
+  ```javascript
   i18n: {
       languages: [
         {

docs/zh-cn/deploy.md

@@ -2,6 +2,8 @@
 
 完成开发并且在开发环境验证之后，就需要部署给我们的用户了。
 
+![i18n](../_media/term_build.svg)
+
 ## 构建
 
 先执行下面的命令，
@@ -34,7 +36,7 @@ File sizes after gzip:
 
 `build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。
 
-> 如果  有使用 HashHistory 、 部署 html 到非根目录、静态化等需求，请查看[Umi 部署](https://umijs.org/zh/guide/deploy.html)。
+> 如果有使用 HashHistory 、 部署 html 到非根目录、静态化等需求，请查看[Umi 部署](https://umijs.org/zh/guide/deploy.html)。
 
 ## 本地验证
 

docs/zh-cn/faq.md

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

docs/zh-cn/i18n.md

@@ -0,0 +1,75 @@
+# 国际化
+
+## 新增应用语言
+
+以新增日语为例。
+
+![i18n](../_media/term_i18n.svg)
+
+1. 添加语言包本地文件，`ja` 为日语的语言代码，支持翻译的语言列表参考 [有道智云](http://ai.youdao.com/docs/doc-trans-api.s#p05)，运行下面命令后会生成 `src/locales/ja/messages.json` 文件。
+
+   ```bash
+   npm run add-locale ja
+   ```
+
+2. 提取代码中需要翻译的字段，即 `<Trans>message</Trans>`、`` intl.formatMessage({ id: 'message `` 中 `message` 字段，运行下面命令后 `src/locales/ja/messages.json' }) 将会出现提取后的字段配置。
+
+   ```bash
+   npm run extract
+   ```
+
+   你将看到如下信息：
+
+   ```bash
+    Catalog statistics:
+    ┌─────────────┬─────────────┬─────────┐
+    │ Language    │ Total count │ Missing │
+    ├─────────────┼─────────────┼─────────┤
+    │ en (source) │     52      │    -    │
+    │ ja          │     52      │   52    │
+    │ zh          │     52      │    0    │
+    └─────────────┴─────────────┴─────────┘
+   ```
+
+3. 与此同时，我们在 `src/utils/config.js` 新增相关配置。
+
+   ```javascript
+   {
+       ...
+       i18n: {
+           languages: [
+               ...
+               {
+                   key:'ja',
+                   title: '日本語',
+                   flag: '/japanese.svg',
+               },
+           ],
+       },
+   }
+   ```
+
+   >  路由相关效果，配置后 `npm run start` 重启后生效。
+
+4. 使用内置的命令进行自动翻译，在 `src/locales/ja/messages.json` 中将会看到翻译后的配置。
+
+   ```bash
+   npm run trans:only
+   ```
+
+   你将看到如下信息：
+
+   ```bash
+   start: en -> ja
+   ...
+   youdao: en -> ja: Unpublished -> 未発表
+   youdao: en -> ja: Update -> 更新
+   youdao: en -> ja: Update User -> ユーザーの更新
+   youdao: en -> ja: Username -> 名
+   ...
+   All translations have been completed.
+   ```
+
+   > `npm run trans` 将会依次执行 `npm run extract` 和 `npm run trans:only`
+
+5. 最后，可以在 `src/locales/ja/messages.json` 中对翻译不准确的的字段进行调整。启动开发模式 `npm run start`，打开 [http://localhost:7000/ja/login](http://localhost:7000/ja/login)，你将看到日语版本的应用。

docs/zh-cn/layout.md

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

docs/zh-cn/request.md

@@ -0,0 +1,24 @@
+# HTTP请求
+
+本项目使用了axios提供http请求服务，文件在src/utils/request.js
+
+## 自定义Header
+
+为了提供鉴权、修改cookie等服务，可以手动修改Header
+
+```
+axios.defaults.headers.common['Authorization'] = 'token'
+```
+
+或者
+
+```
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+  // 在发送请求之前做些什么
+  config.headers.token = window.localStorage.getItem('token');
+  return config;
+}, function (error) {
+  return Promise.reject(error);
+});
+```

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  testURL: 'http://localhost:8000',
+  testURL: 'http://localhost:8000'
 }

manifest.json

@@ -0,0 +1,36 @@
+{
+  "name": "Antd-Admin",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A front-end solution for enterprise applications built upon Ant Design and UmiJS",
+  "icons": [{
+      "src": "logo/logo@96.png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "logo/logo@128.png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "logo/logo@144.png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "logo/logo@152.png",
+      "sizes": "152x152"
+    },
+    {
+      "src": "logo/logo@192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo/logo@384.png",
+      "sizes": "384x384"
+    },
+    {
+      "src": "logo/logo@512.png",
+      "sizes": "512x512"
+    }
+  ]
+}

mock/_utils.js

@@ -1,62 +0,0 @@
-/**
- * Query objects that specify keys and values in an array where all values are objects.
- * @param   {array}         array   An array where all values are objects, like [{key:1},{key:2}].
- * @param   {string}        key     The key of the object that needs to be queried.
- * @param   {string}        value   The value of the object that needs to be queried.
- * @return  {object|undefined}   Return frist object when query success.
- */
-export function queryArray(array, key, value) {
-  if (!Array.isArray(array)) {
-    return
-  }
-  return array.filter(_ => _[key] === value)
-}
-
-export function randomNumber(min, max) {
-  return Math.floor(Math.random() * (max - min) + min)
-}
-
-export function randomAvatar() {
-  // https://uifaces.co
-  const avatarList = [
-    'https://randomuser.me/api/portraits/men/32.jpg',
-    'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',
-    'https://d3iw72m71ie81c.cloudfront.net/female-17.jpg',
-    'https://randomuser.me/api/portraits/men/35.jpg',
-    'https://pbs.twimg.com/profile_images/835224725815246848/jdMBCxHS.jpg',
-    'https://pbs.twimg.com/profile_images/584098247641300992/N25WgvW_.png',
-    'https://d3iw72m71ie81c.cloudfront.net/male-5.jpg',
-    'https://images.pexels.com/photos/413723/pexels-photo-413723.jpeg?h=350&auto=compress&cs=tinysrgb',
-    'https://randomuser.me/api/portraits/women/44.jpg',
-    'https://randomuser.me/api/portraits/women/68.jpg',
-    'https://randomuser.me/api/portraits/women/65.jpg',
-    'https://randomuser.me/api/portraits/men/43.jpg',
-    'https://tinyfac.es/data/avatars/475605E3-69C5-4D2B-8727-61B7BB8C4699-500w.jpeg',
-    'https://pbs.twimg.com/profile_images/943227488292962306/teiNNAiy.jpg',
-    'https://randomuser.me/api/portraits/men/46.jpg'
-  ]
-  return avatarList[randomNumber(0, avatarList.length - 1)]
-}
-
-export const Constant = {
-  ApiPrefix: '/api/v1',
-  NotFound: {
-    message: 'Not Found',
-    documentation_url: '',
-  },
-  Color: {
-    green: '#64ea91',
-    blue: '#8fc9fb',
-    purple: '#d897eb',
-    red: '#f69899',
-    yellow: '#f8c82e',
-    peach: '#f797d6',
-    borderBase: '#e5e5e5',
-    borderSplit: '#f4f4f4',
-    grass: '#d6fbb5',
-    sky: '#c1e0fc',
-  },
-}
-
-export Mock from 'mockjs'
-export qs from 'qs'

mock/dashboard.ts

@@ -1,4 +1,5 @@
-import { Mock, Constant } from './_utils'
+import Mock from 'mockjs'
+import { Constant } from './utils'
 
 const { ApiPrefix, Color } = Constant
 
@@ -105,7 +106,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: [
     {
@@ -135,7 +136,7 @@ const Dashboard = Mock.mock({
   ],
 })
 
-module.exports = {
+export default {
   [`GET ${ApiPrefix}/dashboard`](req, res) {
     res.json(Dashboard)
   },

mock/index.d.ts

@@ -0,0 +1,2 @@
+declare module 'mockjs'
+declare module 'qs'

mock/post.js

@@ -1,67 +0,0 @@
-import { Mock, Constant } from './_utils'
-
-const { ApiPrefix } = Constant
-
-let postId = 0
-const database = Mock.mock({
-  'data|100': [
-    {
-      id() {
-        postId += 1
-        return postId + 10000
-      },
-      'status|1-2': 1,
-      title: '@title',
-      author: '@last',
-      categories: '@word',
-      tags: '@word',
-      'views|10-200': 1,
-      'comments|10-200': 1,
-      visibility: () => {
-        return Mock.mock(
-          '@pick(["Public",' + '"Password protected", ' + '"Private"])'
-        )
-      },
-      date: '@dateTime',
-      image() {
-        return Mock.Random.image(
-          '100x100',
-          Mock.Random.color(),
-          '#757575',
-          'png',
-          this.author.substr(0, 1)
-        )
-      },
-    },
-  ],
-}).data
-
-module.exports = {
-  [`GET ${ApiPrefix}/posts`](req, res) {
-    const { query } = req
-    let { pageSize, page, ...other } = query
-    pageSize = pageSize || 10
-    page = page || 1
-
-    let newData = database
-    for (let key in other) {
-      if ({}.hasOwnProperty.call(other, key)) {
-        newData = newData.filter(item => {
-          if ({}.hasOwnProperty.call(item, key)) {
-            return (
-              String(item[key])
-                .trim()
-                .indexOf(decodeURI(other[key]).trim()) > -1
-            )
-          }
-          return true
-        })
-      }
-    }
-
-    res.status(200).json({
-      data: newData.slice((page - 1) * pageSize, page * pageSize),
-      total: newData.length,
-    })
-  },
-}

mock/route.ts

@@ -1,4 +1,4 @@
-import { Constant } from './_utils'
+import { Constant } from './utils'
 const { ApiPrefix } = Constant
 
 const database = [
@@ -6,14 +6,24 @@ const database = [
     id: '1',
     icon: 'dashboard',
     name: 'Dashboard',
-    zhName: '仪表盘',
+    zh: {
+      name: '仪表盘',
+    },
+    'pt-br': {
+      name: 'Dashboard',
+    },
     route: '/dashboard',
   },
   {
     id: '2',
     breadcrumbParentId: '1',
     name: 'Users',
-    zhName: '用户管理',
+    zh: {
+      name: '用户管理',
+    },
+    'pt-br': {
+      name: 'Usuário',
+    },
     icon: 'user',
     route: '/user',
   },
@@ -21,7 +31,12 @@ const database = [
     id: '7',
     breadcrumbParentId: '1',
     name: 'Posts',
-    zhName: '文章管理',
+    zh: {
+      name: '用户管理',
+    },
+    'pt-br': {
+      name: 'Posts',
+    },
     icon: 'shopping-cart',
     route: '/post',
   },
@@ -30,14 +45,24 @@ const database = [
     menuParentId: '-1',
     breadcrumbParentId: '2',
     name: 'User Detail',
-    zhName: '用户详情',
+    zh: {
+      name: '用户详情',
+    },
+    'pt-br': {
+      name: 'Detalhes do usuário',
+    },
     route: '/user/:id',
   },
   {
     id: '3',
     breadcrumbParentId: '1',
     name: 'Request',
-    zhName: 'Request',
+    zh: {
+      name: 'Request',
+    },
+    'pt-br': {
+      name: 'Requisição',
+    },
     icon: 'api',
     route: '/request',
   },
@@ -45,7 +70,12 @@ const database = [
     id: '4',
     breadcrumbParentId: '1',
     name: 'UI Element',
-    zhName: 'UI组件',
+    zh: {
+      name: 'UI组件',
+    },
+    'pt-br': {
+      name: 'Elementos UI',
+    },
     icon: 'camera-o',
   },
   {
@@ -53,15 +83,25 @@ const database = [
     breadcrumbParentId: '4',
     menuParentId: '4',
     name: 'Editor',
-    zhName: 'Editor',
+    zh: {
+      name: 'Editor',
+    },
+    'pt-br': {
+      name: 'Editor',
+    },
     icon: 'edit',
-    route: '/UIElement/editor',
+    route: '/editor',
   },
   {
     id: '5',
     breadcrumbParentId: '1',
     name: 'Charts',
-    zhName: 'Charts',
+    zh: {
+      name: 'Charts',
+    },
+    'pt-br': {
+      name: 'Graficos',
+    },
     icon: 'code-o',
   },
   {
@@ -69,7 +109,12 @@ const database = [
     breadcrumbParentId: '5',
     menuParentId: '5',
     name: 'ECharts',
-    zhName: 'ECharts',
+    zh: {
+      name: 'ECharts',
+    },
+    'pt-br': {
+      name: 'ECharts',
+    },
     icon: 'line-chart',
     route: '/chart/ECharts',
   },
@@ -78,7 +123,12 @@ const database = [
     breadcrumbParentId: '5',
     menuParentId: '5',
     name: 'HighCharts',
-    zhName: 'HighCharts',
+    zh: {
+      name: 'HighCharts',
+    },
+    'pt-br': {
+      name: 'HighCharts',
+    },
     icon: 'bar-chart',
     route: '/chart/highCharts',
   },
@@ -87,13 +137,18 @@ const database = [
     breadcrumbParentId: '5',
     menuParentId: '5',
     name: 'Rechartst',
-    zhName: 'Rechartst',
+    zh: {
+      name: 'Rechartst',
+    },
+    'pt-br': {
+      name: 'Rechartst',
+    },
     icon: 'area-chart',
     route: '/chart/Recharts',
   },
 ]
 
-module.exports = {
+export default {
   [`GET ${ApiPrefix}/routes`](req, res) {
     res.status(200).json(database)
   },

mock/user.ts

@@ -1,8 +1,10 @@
-import { Mock, Constant, qs, randomAvatar } from './_utils'
+import Mock from 'mockjs'
+import qs from 'qs'
+import { Constant, randomAvatar, waitTime } from './utils'
 
 const { ApiPrefix } = Constant
 
-let usersListData = Mock.mock({
+const usersListData = Mock.mock({
   'data|80-100': [
     {
       id: '@id',
@@ -90,10 +92,28 @@ const NOTFOUND = {
   documentation_url: 'http://localhost:8000/request',
 }
 
-module.exports = {
-  [`POST ${ApiPrefix}/user/login`](req, res) {
+const authorized = (req, res) => {
+  const cookie = req.headers.cookie || ''
+  const cookies = qs.parse(cookie.replace(/\s/g, ''), { delimiter: ';' })
+  if (!cookies.token) {
+    res.status(401).send({ message: 'Not Login' })
+    return false
+  }
+
+  const token = JSON.parse(cookies.token)
+  if (cookies.token && token && token.deadline > new Date().getTime()) {
+    return token
+  }
+
+  res.status(401).send({ message: 'Not Login' })
+  return false
+}
+
+export default {
+  async [`POST ${ApiPrefix}/user/login`](req, res) {
+    await waitTime()
     const { username, password } = req.body
-    const user = adminUsers.filter(item => item.username === username)
+    const user = adminUsers.filter((item) => item.username === username)
 
     if (user.length > 0 && user[0].password === password) {
       const now = new Date()
@@ -112,33 +132,27 @@ module.exports = {
     }
   },
 
-  [`GET ${ApiPrefix}/user/logout`](req, res) {
+  async [`GET ${ApiPrefix}/user/logout`](req, res) {
+    await waitTime()
     res.clearCookie('token')
     res.status(200).end()
   },
 
-  [`GET ${ApiPrefix}/user`](req, res) {
-    const cookie = req.headers.cookie || ''
-    const cookies = qs.parse(cookie.replace(/\s/g, ''), { delimiter: ';' })
-    const response = {}
-    let user = {}
-    if (!cookies.token) {
-      res.status(200).send({ message: 'Not Login' })
+  async [`GET ${ApiPrefix}/user`](req, res) {
+    await waitTime()
+
+    const token = authorized(req, res)
+    if (!token) {
       return
     }
-    const token = JSON.parse(cookies.token)
-    if (token) {
-      response.success = token.deadline > new Date().getTime()
+
+    const userItem = adminUsers.find((_) => _.id === token.id)
+    if (userItem) {
+      const { password, ...rest } = userItem
+      res.json(rest)
+    } else {
+      res.status(401).send({ message: 'Not Login' })
     }
-    if (response.success) {
-      const userItem = adminUsers.find(_ => _.id === token.id)
-      if (userItem) {
-        const { password, ...other } = userItem
-        user = other
-      }
-    }
-    response.user = user
-    res.json(response)
   },
 
   [`GET ${ApiPrefix}/users`](req, res) {
@@ -150,10 +164,10 @@ module.exports = {
     let newData = database
     for (let key in other) {
       if ({}.hasOwnProperty.call(other, key)) {
-        newData = newData.filter(item => {
+        newData = newData.filter((item) => {
           if ({}.hasOwnProperty.call(item, key)) {
             if (key === 'address') {
-              return other[key].every(iitem => item[key].indexOf(iitem) > -1)
+              return other[key].every((iitem) => item[key].indexOf(iitem) > -1)
             } else if (key === 'createTime') {
               const start = new Date(other[key][0]).getTime()
               const end = new Date(other[key][1]).getTime()
@@ -165,9 +179,8 @@ module.exports = {
               return true
             }
             return (
-              String(item[key])
-                .trim()
-                .indexOf(decodeURI(other[key]).trim()) > -1
+              String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) >
+              -1
             )
           }
           return true
@@ -176,14 +189,14 @@ module.exports = {
     }
 
     res.status(200).json({
-      data: newData.slice((page - 1) * pageSize, page * pageSize),
+      list: newData.slice((page - 1) * pageSize, page * pageSize),
       total: newData.length,
     })
   },
 
   [`POST ${ApiPrefix}/users/delete`](req, res) {
-    const { ids=[] } = req.body
-    database = database.filter(item => !ids.some(_ => _ === item.id))
+    const { ids = [] } = req.body
+    database = database.filter((item) => !ids.some((_) => _ === item.id))
     res.status(204).end()
   },
 
@@ -220,7 +233,7 @@ module.exports = {
     const { id } = req.params
     const data = queryArray(database, id, 'id')
     if (data) {
-      database = database.filter(item => item.id !== id)
+      database = database.filter((item) => item.id !== id)
       res.status(204).end()
     } else {
       res.status(200).json(NOTFOUND)
@@ -232,7 +245,7 @@ module.exports = {
     const editItem = req.body
     let isExist = false
 
-    database = database.map(item => {
+    database = database.map((item) => {
       if (item.id === id) {
         isExist = true
         return Object.assign({}, item, editItem)

mock/utils/index.ts

@@ -0,0 +1,66 @@
+/**
+ * Query objects that specify keys and values in an array where all values are objects.
+ * @param   {array}         array   An array where all values are objects, like [{key:1},{key:2}].
+ * @param   {string}        key     The key of the object that needs to be queried.
+ * @param   {string}        value   The value of the object that needs to be queried.
+ * @return  {object|undefined}   Return frist object when query success.
+ */
+export function queryArray(array, key, value) {
+  if (!Array.isArray(array)) {
+    return
+  }
+  return array.filter((_) => _[key] === value)
+}
+
+export function randomNumber(min, max) {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+export function randomAvatar() {
+  const avatarList = [
+    'photo-1549492864-2ec7d66ffb04.jpeg',
+    'photo-1480535339474-e083439a320d.jpeg',
+    'photo-1523419409543-a5e549c1faa8.jpeg',
+    'photo-1519648023493-d82b5f8d7b8a.jpeg',
+    'photo-1523307730650-594bc63f9d67.jpeg',
+    'photo-1522962506050-a2f0267e4895.jpeg',
+    'photo-1489779162738-f81aed9b0a25.jpeg',
+    'photo-1534308143481-c55f00be8bd7.jpeg',
+    'photo-1519336555923-59661f41bb45.jpeg',
+    'photo-1551438632-e8c7d9a5d1b7.jpeg',
+    'photo-1525879000488-bff3b1c387cf.jpeg',
+    'photo-1487412720507-e7ab37603c6f.jpeg',
+    'photo-1510227272981-87123e259b17.jpeg',
+  ]
+  return `//image.zuiidea.com/${
+    avatarList[randomNumber(0, avatarList.length - 1)]
+  }?imageView2/1/w/200/h/200/format/webp/q/75|imageslim`
+}
+
+export const waitTime = (time: number = 300) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true)
+    }, time)
+  })
+}
+
+export const Constant = {
+  ApiPrefix: '/api/v1',
+  NotFound: {
+    message: 'Not Found',
+    documentation_url: '',
+  },
+  Color: {
+    green: '#64ea91',
+    blue: '#8fc9fb',
+    purple: '#d897eb',
+    red: '#f69899',
+    yellow: '#f8c82e',
+    peach: '#f797d6',
+    borderBase: '#e5e5e5',
+    borderSplit: '#f4f4f4',
+    grass: '#d6fbb5',
+    sky: '#c1e0fc',
+  },
+}

package.json

@@ -1,111 +1,122 @@
 {
   "name": "antd-admin",
-  "version": "5.0.0-beta",
-  "private": true,
+  "version": "6.0.0-a.1",
+  "license": "MIT",
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
-    "@lingui/react": "^2.7.0",
-    "ant-design-pro": "^2.1.0",
-    "antd": "^3.10.0",
-    "axios": "^0.18.0",
-    "babel-core": "7.0.0-bridge.0",
-    "classnames": "^2.2.6",
-    "d3-shape": "^1.2.2",
-    "draftjs-to-html": "^0.8.4",
-    "draftjs-to-markdown": "^0.5.1",
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-layout": "^6.37.0",
+    "@lingui/core": "^3.13.3",
+    "@lingui/detect-locale": "^3.13.3",
+    "@lingui/react": "^3.13.3",
+    "antd": "^4.20.1",
+    "axios": "^0.27.2",
+    "classnames": "^2.3.1",
     "dva-model-extend": "^0.1.2",
-    "echarts": "^4.2.0-rc.2",
-    "echarts-for-react": "^2.0.15-beta.0",
-    "echarts-gl": "^1.1.1",
-    "echarts-liquidfill": "^2.0.2",
-    "enquire-js": "^0.2.1",
-    "highcharts-exporting": "^0.1.7",
-    "highcharts-more": "^0.1.7",
+    "echarts": "^5.3.2",
+    "echarts-for-react": "^3.0.2",
+    "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
     "json-format": "^1.0.1",
-    "lodash": "^4.17.11",
-    "md5": "^2.2.1",
+    "lodash": "^4.17.21",
+    "make-plural": "^7.1.0",
+    "md5": "^2.3.0",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^2.4.0",
-    "prop-types": "^15.6.2",
-    "qs": "^6.5.2",
-    "rc-tween-one": "^2.2.8",
-    "react-adsense": "^0.0.6",
-    "react-countup": "^4.0.0-alpha.6",
-    "react-draft-wysiwyg": "^1.12.13",
-    "react-helmet": "^5.2.0",
-    "react-highcharts": "^16.0.2",
-    "react-perfect-scrollbar": "^1.4.0",
-    "recharts": "^1.3.0",
+    "path-to-regexp": "^6.2.0",
+    "prop-types": "^15.8.1",
+    "qs": "^6.10.3",
+    "react": "^18.1.0",
+    "react-countup": "^6.2.0",
+    "react-dom": "^18.1.0",
+    "react-helmet": "^6.1.0",
+    "react-highcharts": "^16.1.0",
+    "react-perfect-scrollbar": "^1.5.8",
+    "react-router-dom": "^6.3.0",
+    "recharts": "^2.1.9",
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@lingui/babel-preset-react": "^2.7.0",
-    "@lingui/cli": "^2.7.0",
-    "@lingui/loader": "^2.7.0",
-    "babel-eslint": "^10.0.1",
-    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-import": "^1.10.0",
-    "babel-plugin-macros": "^2.4.2",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.7.0",
-    "eslint-config-react-app": "^3.0.4",
-    "eslint-plugin-flowtype": "^3.0.0",
-    "eslint-plugin-import": "^2.6.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.1.0",
-    "husky": "^1.1.1",
+    "@babel/preset-react": "^7.16.7",
+    "@lingui/babel-preset-react": "^2.9.2",
+    "@lingui/cli": "^3.13.3",
+    "@lingui/loader": "^3.13.3",
+    "@lingui/macro": "^3.13.3",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "babel-plugin-dev-expression": "^0.2.3",
+    "babel-plugin-import": "^1.13.5",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": "^7.0.4",
     "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^7.3.0",
-    "mockjs": "^1.0.1-beta3",
-    "module": "^1.2.5",
-    "prettier": "^1.14.3",
-    "stylelint": "^9.6.0",
-    "stylelint-config-prettier": "^4.0.0",
-    "stylelint-config-standard": "^18.2.0",
-    "umi": "^2.2.1",
-    "umi-plugin-react": "^1.2.0"
+    "lint-staged": "^12.4.1",
+    "mockjs": "^1.1.0",
+    "prettier": "^2.6.2",
+    "stylelint": "^14.8.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0",
+    "typescript": "^4.6.4",
+    "umi": "4.0.0-canary.20220429.4"
   },
-  "optionalDependencies": {
-    "puppeteer": "^1.9.0"
+  "engines": {
+    "node": ">= 10.0.0"
   },
   "lint-staged": {
-    "src/**/*.js": [
-      "eslint --ext .js --fix",
-      "npm run prettier",
-      "git add"
+    "*.{ts,tsx,js,jsx}": [
+      "npm run eslint",
+      "npm run prettier"
     ],
-    "**/*.less": [
-      "stylelint --syntax less",
-      "npm run prettier",
-      "git add"
+    "*.less": [
+      "npm run stylelint",
+      "npm run prettier"
     ]
   },
   "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"
+        ],
+        "exclude": [
+          "**/node_modules/**"
+        ]
+      }
     ],
     "format": "minimal",
-    "extractBabelOptions": {
-      "presets": [
-        "umi/babel"
-      ]
-    }
+    "runtimeConfigModule": [
+      "@/hooks/useIntlProvider",
+      "i18n"
+    ]
   },
   "scripts": {
-    "analyze": "cross-env ANALYZE=1 umi build",
-    "build": "umi build",
-    "lint:js": "eslint --ext .js src",
-    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "start": "umi dev",
-    "test": "cross-env BABELRC=none umi test",
-    "prettier": "prettier --write 'src/**/*.(js|less)'",
+    "build": "cross-env UMI_ENV=prod umi build",
+    "test": "umi test",
+    "analyze": "cross-env ANALYZE=1 umi dev",
+    "eslint": "eslint --fix 'src/**/*.{ts,tsx,js.jsx}'",
+    "stylelint": "stylelint src/**/*.less --syntax less",
+    "prettier": "prettier --write 'src/**/*.{ts,tsx,js.jsx,less}'",
     "precommit": "lint-staged",
     "add-locale": "lingui add-locale",
     "extract": "lingui extract",

public/portugal.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect style="fill:#D80027;" width="512" height="512"/>
+<polygon style="fill:#6DA544;" points="196.641,0 196.641,264.348 196.641,512 0,512 0,0 "/>
+<circle style="fill:#FFDA44;" cx="196.641" cy="256" r="96"/>
+<path style="fill:#D80027;" d="M142.638,208v60c0,29.823,24.178,54,54,54s54-24.178,54-54v-60H142.638z"/>
+<path style="fill:#F0F0F0;" d="M196.638,286c-9.925,0-18-8.075-18-18v-24.001h36V268C214.638,277.925,206.563,286,196.638,286z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

scripts/translate.js

@@ -56,9 +56,21 @@ const transform = async ({ from, to, locales, outputPath }) => {
       let res = key
       let way = 'youdao'
       if (key.indexOf('/') !== 0) {
-        res = await youdao({
-          q: key,
-        })
+        const reg = '{([^{}]*)}'
+        const tasks = key
+          .match(new RegExp(`${reg}|((?<=(${reg}|^)).*?(?=(${reg}|$)))`, 'g'))
+          .map(item => {
+            if (new RegExp(reg).test(item)) {
+              return Promise.resolve(item)
+            }
+            return youdao({
+              q: item,
+              from,
+              to,
+            })
+          })
+
+        res = (await Promise.all(tasks)).join('')
       } else {
         res = `/${to + key}`
         way = 'link'

src/components/DropOption/DropOption.js

@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Dropdown, Button, Icon, Menu } from 'antd'
-
-const DropOption = ({
-  onMenuClick,
-  menuOptions = [],
-  buttonStyle,
-  dropdownProps,
-}) => {
-  const menu = menuOptions.map(item => (
-    <Menu.Item key={item.key}>{item.name}</Menu.Item>
-  ))
-  return (
-    <Dropdown
-      overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
-      {...dropdownProps}
-    >
-      <Button style={{ border: 'none', ...buttonStyle }}>
-        <Icon style={{ marginRight: 2 }} type="bars" />
-        <Icon type="down" />
-      </Button>
-    </Dropdown>
-  )
-}
-
-DropOption.propTypes = {
-  onMenuClick: PropTypes.func,
-  menuOptions: PropTypes.array.isRequired,
-  buttonStyle: PropTypes.object,
-  dropdownProps: PropTypes.object,
-}
-
-export default DropOption

src/components/DropOption/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "DropOption",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./DropOption.js"
-}

src/components/Editor/Editor.js

@@ -1,17 +0,0 @@
-import React from 'react'
-import { Editor } from 'react-draft-wysiwyg'
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import styles from './Editor.less'
-
-const DraftEditor = props => {
-  return (
-    <Editor
-      toolbarClassName={styles.toolbar}
-      wrapperClassName={styles.wrapper}
-      editorClassName={styles.editor}
-      {...props}
-    />
-  )
-}
-
-export default DraftEditor

src/components/Editor/Editor.less

@@ -1,106 +0,0 @@
-.wrapper {
-  height: 500px;
-
-  :global {
-    .rdw-dropdownoption-default {
-      padding: 6px;
-    }
-
-    .rdw-dropdown-optionwrapper {
-      box-sizing: content-box;
-      width: 100%;
-      border-radius: 0 0 2px 2px;
-      &:hover {
-        box-shadow: none;
-      }
-    }
-
-    .rdw-inline-wrapper {
-      flex-wrap: wrap;
-      margin-bottom: 0;
-
-      .rdw-option-wrapper {
-        margin-bottom: 6px;
-      }
-    }
-
-    .rdw-option-active {
-      box-shadow: 1px 1px 0 #e8e8e8 inset;
-    }
-
-    .rdw-colorpicker-option {
-      box-shadow: none;
-    }
-
-    .rdw-colorpicker-modal,
-    .rdw-embedded-modal,
-    .rdw-emoji-modal,
-    .rdw-image-modal,
-    .rdw-link-modal {
-      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    }
-
-    .rdw-colorpicker-modal,
-    .rdw-embedded-modal,
-    .rdw-link-modal {
-      height: auto;
-    }
-
-    .rdw-emoji-modal {
-      width: 214px;
-    }
-
-    .rdw-colorpicker-modal {
-      width: auto;
-    }
-
-    .rdw-embedded-modal-btn,
-    .rdw-image-modal-btn,
-    .rdw-link-modal-btn {
-      height: 32px;
-      margin-top: 12px;
-    }
-
-    .rdw-embedded-modal-input,
-    .rdw-embedded-modal-size-input,
-    .rdw-link-modal-input {
-      padding: 2px 6px;
-      height: 32px;
-    }
-
-    .rdw-dropdown-selectedtext {
-      color: #000;
-    }
-
-    .rdw-dropdown-wrapper,
-    .rdw-option-wrapper {
-      min-width: 36px;
-      transition: all 0.2s ease;
-      height: 30px;
-
-      &:active {
-        box-shadow: 1px 1px 0 #e8e8e8 inset;
-      }
-
-      &:hover {
-        box-shadow: 1px 1px 0 #e8e8e8;
-      }
-    }
-
-    .rdw-dropdown-wrapper {
-      min-width: 60px;
-    }
-
-    .rdw-editor-main {
-      box-sizing: border-box;
-    }
-  }
-
-  .editor {
-    border: 1px solid #f1f1f1;
-    padding: 5px;
-    border-radius: 2px;
-    height: auto;
-    min-height: 200px;
-  }
-}

src/components/Editor/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Editor",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Editor.js"
-}

src/components/FilterItem/index.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './FilterItem.less'
+import styles from './index.less'
 
-const FilterItem = ({ label = '', children }) => {
+interface FilterItemProps {
+  label: string
+}
+const FilterItem: React.FC<FilterItemProps> = ({ label = '', children }) => {
   const labelArray = label.split('')
   return (
     <div className={styles.filterItem}>
-      {labelArray.length > 0 ? (
+      {labelArray.length > 0 && (
         <div className={styles.labelWrap}>
           {labelArray.map((item, index) => (
             <span className="labelText" key={index}>
@@ -14,17 +16,10 @@ const FilterItem = ({ label = '', children }) => {
             </span>
           ))}
         </div>
-      ) : (
-        ''
       )}
       <div className={styles.item}>{children}</div>
     </div>
   )
 }
 
-FilterItem.propTypes = {
-  label: PropTypes.string,
-  children: PropTypes.element.isRequired,
-}
-
 export default FilterItem

src/components/FilterItem/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "FilterItem",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./FilterItem.js"
-}

src/components/GlobalFooter/index.less

@@ -0,0 +1,29 @@
+@import '~antd/lib/style/themes/default.less';
+
+.globalFooter {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: @text-color-secondary;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+
+      &:hover {
+        color: @text-color;
+      }
+    }
+  }
+
+  .copyright {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}

src/components/GlobalFooter/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import styles from './index.less'
+
+interface LinkItem {
+  key: string
+  title: React.ReactNode
+  href?: string
+  blankTarget?: boolean
+}
+
+interface GlobalFooterProps {
+  links?: LinkItem[]
+  copyright?: React.ReactNode
+}
+
+const GlobalFooter: React.FC<GlobalFooterProps> = ({
+  links = [],
+  copyright,
+}) => {
+  return (
+    <footer className={styles.globalFooter}>
+      <div className={styles.links}>
+        {links.map((link) => (
+          <a
+            key={link.key}
+            title={link.key}
+            target={link.blankTarget ? '_blank' : '_self'}
+            href={link.href}
+            rel="noreferrer"
+          >
+            {link.title}
+          </a>
+        ))}
+      </div>
+      {copyright && <div className={styles.copyright}>{copyright}</div>}
+    </footer>
+  )
+}
+
+export default GlobalFooter

src/components/Layout/Bread.js

@@ -1,66 +0,0 @@
-import React, { PureComponent, Fragment } from 'react'
-import PropTypes from 'prop-types'
-import { Breadcrumb, Icon } from 'antd'
-import Link from 'umi/navlink'
-import withRouter from 'umi/withRouter'
-import { withI18n } from '@lingui/react'
-import { pathMatchRegexp, queryAncestors } from 'utils'
-import styles from './Bread.less'
-
-@withI18n()
-@withRouter
-class Bread extends PureComponent {
-  generateBreadcrumbs = paths => {
-    return paths.map((item, key) => {
-      const content = (
-        <Fragment>
-          {item.icon ? (
-            <Icon type={item.icon} style={{ marginRight: 4 }} />
-          ) : null}
-          {item.name}
-        </Fragment>
-      )
-
-      return (
-        <Breadcrumb.Item key={key}>
-          {paths.length - 1 !== key ? (
-            <Link to={item.route || '#'}>{content}</Link>
-          ) : (
-            content
-          )}
-        </Breadcrumb.Item>
-      )
-    })
-  }
-  render() {
-    const { routeList, location, i18n } = this.props
-
-    // Find a route that matches the pathname.
-    const currentRoute = routeList.find(
-      _ => _.route && pathMatchRegexp(_.route, location.pathname)
-    )
-
-    // Find the breadcrumb navigation of the current route match and all its ancestors.
-    const paths = currentRoute
-      ? queryAncestors(routeList, currentRoute, 'breadcrumbParentId').reverse()
-      : [
-          routeList[0],
-          {
-            id: 404,
-            name: i18n.t`Not Found`,
-          },
-        ]
-
-    return (
-      <Breadcrumb className={styles.bread}>
-        {this.generateBreadcrumbs(paths)}
-      </Breadcrumb>
-    )
-  }
-}
-
-Bread.propTypes = {
-  routeList: PropTypes.array,
-}
-
-export default Bread

src/components/Layout/Bread.less

@@ -1,16 +0,0 @@
-.bread {
-  margin-bottom: 24px;
-
-  :global {
-    .ant-breadcrumb {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-@media (max-width: 767px) {
-  .bread {
-    margin-bottom: 12px;
-  }
-}

src/components/Layout/Header.js

@@ -1,174 +0,0 @@
-import React, { PureComponent, Fragment } from 'react'
-import PropTypes from 'prop-types'
-import { Menu, Icon, Layout, Avatar, Popover, Badge, List } from 'antd'
-import { Ellipsis } from 'ant-design-pro'
-import { Trans, withI18n } from '@lingui/react'
-import { setLocale } from 'utils'
-import moment from 'moment'
-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,
-      collapsed,
-      notifications,
-      onCollapseChange,
-      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>,
-    ]
-
-    if (config.i18n) {
-      const { languages } = config.i18n
-      const currentLanguage = languages.find(
-        item => item.key === i18n._language
-      )
-
-      rightContent.unshift(
-        <Menu
-          key="language"
-          selectedKeys={[currentLanguage.key]}
-          onClick={data => {
-            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>
-      )
-    }
-
-    rightContent.unshift(
-      <Popover
-        placement="bottomRight"
-        trigger="click"
-        key="notifications"
-        overlayClassName={styles.notificationPopover}
-        getPopupContainer={() => document.querySelector('#layoutHeader')}
-        content={
-          <div className={styles.notification}>
-            <List
-              itemLayout="horizontal"
-              dataSource={notifications}
-              locale={{
-                emptyText: <Trans>You have viewed all notifications.</Trans>,
-              }}
-              renderItem={item => (
-                <List.Item className={styles.notificationItem}>
-                  <List.Item.Meta
-                    title={
-                      <Ellipsis tooltip lines={1}>
-                        {item.title}
-                      </Ellipsis>
-                    }
-                    description={moment(item.date).fromNow()}
-                  />
-                  <Icon
-                    style={{ fontSize: 10, color: '#ccc' }}
-                    type="right"
-                    theme="outlined"
-                  />
-                </List.Item>
-              )}
-            />
-            {notifications.length ? (
-              <div
-                onClick={onAllNotificationsRead}
-                className={styles.clearButton}
-              >
-                <Trans>Clear notifications</Trans>
-              </div>
-            ) : null}
-          </div>
-        }
-      >
-        <Badge
-          count={notifications.length}
-          dot
-          offset={[-10, 10]}
-          className={styles.iconButton}
-        >
-          <Icon className={styles.iconFont} type="bell" />
-        </Badge>
-      </Popover>
-    )
-
-    return (
-      <Layout.Header
-        className={classnames(styles.header, {
-          [styles.fixed]: fixed,
-          [styles.collapsed]: collapsed,
-        })}
-        id="layoutHeader"
-      >
-        <div
-          className={styles.button}
-          onClick={onCollapseChange.bind(this, !collapsed)}
-        >
-          <Icon
-            type={classnames({
-              'menu-unfold': collapsed,
-              'menu-fold': !collapsed,
-            })}
-          />
-        </div>
-
-        <div className={styles.rightContainer}>{rightContent}</div>
-      </Layout.Header>
-    )
-  }
-}
-
-Header.propTypes = {
-  fixed: PropTypes.bool,
-  user: PropTypes.object,
-  menus: PropTypes.array,
-  collapsed: PropTypes.bool,
-  onSignOut: PropTypes.func,
-  notifications: PropTypes.array,
-  onCollapseChange: PropTypes.func,
-  onAllNotificationsRead: PropTypes.func,
-}
-
-export default Header

src/components/Layout/Header.less

@@ -1,154 +0,0 @@
-@import '~themes/vars.less';
-
-.header {
-  padding: 0;
-  box-shadow: @shadow-2;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  height: 72px;
-  z-index: 9;
-  align-items: center;
-  background-color: #fff;
-
-  &.fixed {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: ~'calc(100% - 256px)';
-    z-index: 9;
-    transition: width 0.2s;
-
-    &.collapsed {
-      width: ~'calc(100% - 80px)';
-    }
-  }
-
-  :global {
-    .ant-menu-submenu-title {
-      height: 72px;
-    }
-
-    .ant-menu-horizontal {
-      line-height: 72px;
-
-      & > .ant-menu-submenu:hover {
-        color: @primary-color;
-        background-color: @hover-color;
-      }
-    }
-
-    .ant-menu {
-      border-bottom: none;
-      height: 72px;
-    }
-
-    .ant-menu-horizontal > .ant-menu-submenu {
-      top: 0;
-      margin-top: 0;
-    }
-
-    .ant-menu-horizontal > .ant-menu-item,
-    .ant-menu-horizontal > .ant-menu-submenu {
-      border-bottom: none;
-    }
-
-    .ant-menu-horizontal > .ant-menu-item-active,
-    .ant-menu-horizontal > .ant-menu-item-open,
-    .ant-menu-horizontal > .ant-menu-item-selected,
-    .ant-menu-horizontal > .ant-menu-item:hover,
-    .ant-menu-horizontal > .ant-menu-submenu-active,
-    .ant-menu-horizontal > .ant-menu-submenu-open,
-    .ant-menu-horizontal > .ant-menu-submenu-selected,
-    .ant-menu-horizontal > .ant-menu-submenu:hover {
-      border-bottom: none;
-    }
-  }
-
-  .rightContainer {
-    display: flex;
-    align-items: center;
-  }
-
-  .button {
-    width: 72px;
-    height: 72px;
-    line-height: 72px;
-    text-align: center;
-    font-size: 18px;
-    cursor: pointer;
-    transition: @transition-ease-in;
-
-    &:hover {
-      color: @primary-color;
-      background-color: @hover-color;
-    }
-  }
-}
-
-.iconButton {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 24px;
-  cursor: pointer;
-  .background-hover();
-
-  &:hover {
-    .iconFont {
-      color: @primary-color;
-    }
-  }
-
-  & + .iconButton {
-    margin-left: 8px;
-  }
-
-  .iconFont {
-    color: #b2b0c7;
-    font-size: 24px;
-  }
-}
-
-.notification {
-  padding: 24px 0;
-  width: 320px;
-  .notificationItem {
-    transition: all 0.3s;
-    padding: 12px 24px;
-    cursor: pointer;
-    &:hover {
-      background-color: @hover-color;
-    }
-  }
-  .clearButton {
-    text-align: center;
-    height: 48px;
-    line-height: 48px;
-    cursor: pointer;
-    .background-hover();
-  }
-}
-
-.notificationPopover {
-  :global {
-    .ant-popover-inner-content {
-      padding: 0;
-    }
-    .ant-popover-arrow {
-      display: none;
-    }
-    .ant-list-item-content {
-      flex: 0;
-      margin-left: 16px;
-    }
-  }
-}
-
-@media (max-width: 767px) {
-  .header {
-    width: 100% !important;
-  }
-}

src/components/Layout/Menu.js

@@ -1,122 +0,0 @@
-import React, { PureComponent, Fragment } from 'react'
-import PropTypes from 'prop-types'
-import { Menu, Icon } from 'antd'
-import Navlink from 'umi/navlink'
-import withRouter from 'umi/withRouter'
-import {
-  arrayToTree,
-  queryAncestors,
-  pathMatchRegexp,
-  addLangPrefix,
-} from 'utils'
-import store from 'store'
-
-const { SubMenu } = Menu
-
-@withRouter
-class SiderMenu extends PureComponent {
-  state = {
-    openKeys: store.get('openKeys') || [],
-  }
-
-  onOpenChange = openKeys => {
-    const { menus } = this.props
-    const rootSubmenuKeys = menus.filter(_ => !_.menuParentId).map(_ => _.id)
-
-    const latestOpenKey = openKeys.find(
-      key => this.state.openKeys.indexOf(key) === -1
-    )
-
-    let newOpenKeys = openKeys
-    if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
-      newOpenKeys = latestOpenKey ? [latestOpenKey] : []
-    }
-
-    this.setState({
-      openKeys: newOpenKeys,
-    })
-    store.set('openKeys', newOpenKeys)
-  }
-
-  generateMenus = data => {
-    return data.map(item => {
-      if (item.children) {
-        return (
-          <SubMenu
-            key={item.id}
-            title={
-              <Fragment>
-                {item.icon && <Icon type={item.icon} />}
-                <span>{item.name}</span>
-              </Fragment>
-            }
-          >
-            {this.generateMenus(item.children)}
-          </SubMenu>
-        )
-      }
-      return (
-        <Menu.Item key={item.id}>
-          <Navlink to={addLangPrefix(item.route) || '#'}>
-            {item.icon && <Icon type={item.icon} />}
-            <span>{item.name}</span>
-          </Navlink>
-        </Menu.Item>
-      )
-    })
-  }
-
-  render() {
-    const {
-      collapsed,
-      theme,
-      menus,
-      location,
-      isMobile,
-      onCollapseChange,
-    } = this.props
-
-    // Generating tree-structured data for menu content.
-    const menuTree = arrayToTree(menus, 'id', 'menuParentId')
-
-    // Find a menu that matches the pathname.
-    const currentMenu = menus.find(
-      _ => _.route && pathMatchRegexp(_.route, location.pathname)
-    )
-
-    // Find the key that should be selected according to the current menu.
-    const selectedKeys = currentMenu
-      ? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id)
-      : []
-
-    return (
-      <Menu
-        mode="inline"
-        theme={theme}
-        onOpenChange={this.onOpenChange}
-        openKeys={this.state.openKeys}
-        inlineCollapsed={collapsed}
-        selectedKeys={selectedKeys}
-        onClick={
-          isMobile
-            ? () => {
-                onCollapseChange(true)
-              }
-            : undefined
-        }
-      >
-        {this.generateMenus(menuTree)}
-      </Menu>
-    )
-  }
-}
-
-SiderMenu.propTypes = {
-  menus: PropTypes.array,
-  theme: PropTypes.string,
-  isMobile: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  onCollapseChange: PropTypes.func,
-}
-
-export default SiderMenu

src/components/Layout/Sider.js

@@ -1,88 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { Icon, Switch, Layout } from 'antd'
-import { withI18n, Trans } from '@lingui/react'
-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,
-      collapsed,
-      onThemeChange,
-      onCollapseChange,
-    } = this.props
-
-    return (
-      <Layout.Sider
-        width={256}
-        theme={theme}
-        breakpoint="lg"
-        trigger={null}
-        collapsible
-        collapsed={collapsed}
-        onBreakpoint={isMobile ? null : onCollapseChange}
-        className={styles.sider}
-      >
-        <div className={styles.brand}>
-          <div className={styles.logo}>
-            <img alt="logo" src={config.logoPath} />
-            {collapsed ? null : <h1>{config.siteName}</h1>}
-          </div>
-        </div>
-
-        <div className={styles.menuContainer}>
-          <ScrollBar
-            option={{
-              // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
-              suppressScrollX: true,
-            }}
-          >
-            <SiderMenu
-              menus={menus}
-              theme={theme}
-              isMobile={isMobile}
-              collapsed={collapsed}
-              onCollapseChange={onCollapseChange}
-            />
-          </ScrollBar>
-        </div>
-        {collapsed ? null : (
-          <div className={styles.switchTheme}>
-            <span>
-              <Icon type="bulb" />
-              <Trans>Switch Theme</Trans>
-            </span>
-            <Switch
-              onChange={onThemeChange.bind(
-                this,
-                theme === 'dark' ? 'light' : 'dark'
-              )}
-              defaultChecked={theme === 'dark'}
-              checkedChildren={i18n.t`Dark`}
-              unCheckedChildren={i18n.t`Light`}
-            />
-          </div>
-        )}
-      </Layout.Sider>
-    )
-  }
-}
-
-Sider.propTypes = {
-  menus: PropTypes.array,
-  theme: PropTypes.string,
-  isMobile: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  onThemeChange: PropTypes.func,
-  onCollapseChange: PropTypes.func,
-}
-
-export default Sider

src/components/Layout/Sider.less

@@ -1,110 +0,0 @@
-@import '~themes/vars.less';
-
-.sider {
-  box-shadow: fade(@primary-color, 10%) 0 0 28px 0;
-  z-index: 10;
-  :global {
-    .ant-layout-sider-children {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-  }
-}
-
-.brand {
-  z-index: 1;
-  height: 72px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 24px;
-  box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
-  .logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      width: 36px;
-      margin-right: 8px;
-    }
-
-    h1 {
-      vertical-align: text-bottom;
-      font-size: 16px;
-      text-transform: uppercase;
-      display: inline-block;
-      font-weight: 700;
-      color: @primary-color;
-      white-space: nowrap;
-      margin-bottom: 0;
-      .text-gradient();
-
-      :local {
-        animation: fadeRightIn 300ms @ease-in-out;
-        animation-fill-mode: both;
-      }
-    }
-  }
-}
-
-.menuContainer {
-  height: ~'calc(100vh - 120px)';
-  overflow-x: hidden;
-  flex: 1;
-  padding: 24px 0;
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  :global {
-    .ant-menu-inline {
-      border-right: none;
-    }
-  }
-}
-
-.switchTheme {
-  width: 100%;
-  height: 48px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 16px;
-  overflow: hidden;
-  transition: all 0.3s;
-
-  span {
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 12px;
-  }
-
-  :global {
-    .anticon {
-      min-width: 14px;
-      margin-right: 4px;
-      font-size: 14px;
-    }
-  }
-}
-
-@keyframes fadeLeftIn {
-  0% {
-    transform: translateX(5px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}

src/components/Layout/index.js

@@ -1,6 +0,0 @@
-import Header from './Header'
-import Menu from './Menu'
-import Bread from './Bread'
-import Sider from './Sider'
-
-export { Header, Menu, Bread, Sider }

src/components/Loader/index.less

@@ -1,67 +1,67 @@
-.loader {
-  background-color: #fff;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 1;
-  text-align: center;
-
-  &.fullScreen {
-    position: fixed;
-  }
-
-  .warpper {
-    width: 100px;
-    height: 100px;
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
-  .inner {
-    width: 40px;
-    height: 40px;
-    margin: 0 auto;
-    text-indent: -12345px;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    border-left: 1px solid rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    z-index: 100001;
-
-    :local {
-      animation: spinner 600ms infinite linear;
-    }
-  }
-
-  .text {
-    width: 100px;
-    height: 20px;
-    text-align: center;
-    font-size: 12px;
-    letter-spacing: 4px;
-    color: #000;
-  }
-
-  &.hidden {
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
-  }
-}
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
+.loader {
+  background-color: #fff;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  &.fullScreen {
+    position: fixed;
+  }
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Loader/index.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import styles from './Loader.less'
+import styles from './index.less'
 
-const Loader = ({ spinning = true, fullScreen }) => {
+interface LoaderProps {
+  spinning?: boolean
+  fullScreen?: boolean
+}
+
+const Loader: React.FC<LoaderProps> = ({ spinning = false, fullScreen }) => {
   return (
     <div
       className={classNames(styles.loader, {
@@ -19,9 +23,4 @@ const Loader = ({ spinning = true, fullScreen }) => {
   )
 }
 
-Loader.propTypes = {
-  spinning: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-}
-
 export default Loader

src/components/Loader/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Loader",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Loader.js"
-}

src/components/Page/Page.js

@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Loader from '../Loader'
-import styles from './Page.less'
-
-export default class Page extends Component {
-  render() {
-    const { className, children, loading = false, inner = false } = this.props
-    const loadingStyle = {
-      height: 'calc(100vh - 184px)',
-      overflow: 'hidden',
-    }
-    return (
-      <div
-        className={classnames(className, {
-          [styles.contentInner]: inner,
-        })}
-        style={loading ? loadingStyle : null}
-      >
-        {loading ? <Loader spinning /> : ''}
-        {children}
-      </div>
-    )
-  }
-}
-
-Page.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  loading: PropTypes.bool,
-  inner: PropTypes.bool,
-}

src/components/Page/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~@/themes/vars.less';
 
 .contentInner {
   background: #fff;

src/components/Page/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import classnames from 'classnames'
+import Loader from '../Loader'
+import styles from './index.less'
+
+interface IPageProps {
+  inner?: boolean
+  loading?: boolean
+  className?: string
+}
+
+const Page: React.FC = (props: IPageProps) => {
+  const { className, children, loading = false, inner = false } = props
+  const loadingStyle = {
+    height: 'calc(100vh - 184px)',
+    overflow: 'hidden',
+  }
+
+  return (
+    <div
+      className={classnames(className, {
+        [styles.contentInner]: inner,
+      })}
+      style={loading ? loadingStyle : null}
+    >
+      {loading ? <Loader spinning /> : ''}
+      {children}
+    </div>
+  )
+}
+
+export default Page

src/components/Page/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Page",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Page.js"
-}

src/components/index.js

@@ -1,9 +0,0 @@
-import Editor from './Editor'
-import FilterItem from './FilterItem'
-import DropOption from './DropOption'
-import Loader from './Loader'
-import ScrollBar from './ScrollBar'
-import * as MyLayout from './Layout/index.js'
-import Page from './Page'
-
-export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar }

src/components/index.ts

@@ -0,0 +1,7 @@
+import FilterItem from './FilterItem'
+import Loader from './Loader'
+import ScrollBar from './ScrollBar'
+import GlobalFooter from './GlobalFooter'
+import Page from './Page'
+
+export { GlobalFooter, FilterItem, Loader, ScrollBar, Page }

src/configs/constants/index.ts

@@ -0,0 +1 @@
+export const LOCALE_LANGUAGE = 'LOCALE_LANGUAGE'

src/configs/default/index.ts

@@ -0,0 +1,33 @@
+import { IConfig, ISupportedLocales } from '@/typings'
+import { LOCALE_LANGUAGE } from '@/configs/constants'
+import checkLanguage from '@/utils/checkLanguage'
+import {
+  detect,
+  fromUrl,
+  fromStorage,
+  fromNavigator,
+} from '@lingui/detect-locale'
+
+const language = detect(
+  checkLanguage(fromUrl('lang')),
+  checkLanguage(fromStorage(LOCALE_LANGUAGE)),
+  checkLanguage(fromNavigator()),
+  'en'
+)
+
+export const config: IConfig = {
+  title: 'Antd Admin',
+  logo: 'logo.svg',
+  copyright: 'Ant Design Admin  © 2021 zuiidea',
+  language: language as ISupportedLocales,
+  apiPrefix: '/api/v1',
+
+  /* Layout configuration, specify which layout to use for route. */
+  layouts: [
+    {
+      name: 'primary',
+      include: [/.*/],
+      exlude: [/\/login/],
+    },
+  ],
+}

src/configs/index.ts

@@ -0,0 +1,8 @@
+import menus from './menus'
+import menuIcon from './menus/icon'
+
+export * from './default'
+export * from './languages'
+export * from './constants'
+
+export { menus, menuIcon }

src/configs/languages/index.ts

@@ -0,0 +1,32 @@
+import { ILanguage, ILanguages, IAntdI18nMap } from '@/typings'
+
+/**
+ * Countrys flags: https://www.flaticon.com/packs/countrys-flags
+ */
+export const language: ILanguage = {
+  en: {
+    flag: '/america.svg',
+    value: 'English',
+  },
+  zh: {
+    flag: '/china.svg',
+    value: '简体中文',
+  },
+  'pt-br': {
+    flag: '/portugal.svg',
+    value: 'Português',
+  },
+}
+
+export const languages: ILanguages[] = Object.entries(language).map(
+  ([key, value]: any) => ({
+    key,
+    ...value,
+  })
+)
+
+export const antdI18nMap: IAntdI18nMap = {
+  zh: 'zh_CN',
+  en: 'en_US',
+  'pt-br': 'pt_BR',
+}

src/configs/menus/icon.tsx

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

src/configs/menus/index.ts

@@ -0,0 +1,22 @@
+import { t } from '@lingui/macro'
+
+/*
+ * Note:
+ * Menu items with children need to set a key starting with "/"
+ * @see https://github.com/umijs/route-utils/blob/master/src/transformRoute/transformRoute.ts#L219
+ */
+
+const menus = [
+  {
+    path: '/',
+    name: t`Dashboard`,
+    icon: 'dashboard',
+  },
+  {
+    path: '/user',
+    name: t`User`,
+    icon: 'user',
+  },
+]
+
+export default menus

src/defaultSettings.ts

@@ -0,0 +1,8 @@
+import { SettingDrawerProps } from '@ant-design/pro-layout'
+
+const defaultSettings: SettingDrawerProps['settings'] = {
+  navTheme: 'light',
+  primaryColor: '#006EFF',
+}
+
+export default defaultSettings

src/e2e/login.e2e.js

@@ -18,7 +18,7 @@ describe('Login', () => {
   afterEach(() => page.close())
 
   it('should login with failure', async () => {
-    await page.waitFor(selector => !!document.querySelector('#username'), {
+    await page.waitFor((selector) => !!document.querySelector('#username'), {
       timeout: 3000,
     })
     await page.type('#username', 'wrong_user')

src/hooks/index.ts

@@ -0,0 +1,16 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useLingui } from '@lingui/react';
+import useConfig from './useConfig'
+import useIntlProvider from './useIntlProvider'
+import useLocalStorage from './useLocalStorage';
+import useRequest from './useRequest';
+
+export {
+  useConfig,
+  useNavigate,
+  useLocation,
+  useRequest,
+  useLocalStorage,
+  useIntlProvider,
+  useLingui,
+}

src/hooks/useConfig.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { ConfigContext } from '@/utils/context'
+
+const useConfig = () => {
+  return useContext(ConfigContext)
+}
+
+export default useConfig

src/hooks/useIntlProvider.ts

@@ -0,0 +1,47 @@
+import { useEffect, useContext, useState } from 'react';
+import { setupI18n } from '@lingui/core';
+import { LOCALE_LANGUAGE } from '@/configs/constants';
+import { ConfigContext } from '@/utils/context';
+import { useLocalStorage } from '@/hooks';
+import { antdI18nMap } from '@/configs';
+import { SupportedLocales } from '@/typings';
+import { ConfigProviderProps } from 'antd/lib/config-provider';
+import { en, zh } from 'make-plural/plurals';
+
+export const i18n = setupI18n({
+  localeData: {
+    en: { plurals: en },
+    zh: { plurals: zh },
+  },
+});
+
+const useIntlProvider = () => {
+  const { language: defaultLocale } = useContext(ConfigContext);
+  const [language, setLanguage] = useLocalStorage<SupportedLocales>(
+    LOCALE_LANGUAGE,
+    defaultLocale
+  );
+
+  const [locale, setLocale] = useState<ConfigProviderProps['locale']>();
+
+  useEffect(() => {
+    import(`@/locales/${language}/messages.json`).then(data => {
+      i18n.load(language, data.default);
+      i18n.activate(language);
+    });
+
+    const path = antdI18nMap[language];
+    import(`antd/lib/locale/${path}.js`).then(data => {
+      setLocale(data.default);
+    });
+  }, [language]);
+
+  return {
+    language,
+    setLanguage,
+    locale,
+    i18n,
+  };
+};
+
+export default useIntlProvider;