📝 Update docs.

Added `pathMatchRegexp` to match routes and regexp if the route prefix is ignored

.env

@@ -0,0 +1,3 @@
+BROWSER=none
+HOST=0.0.0.0
+PORT=7000

.eslintignore

@@ -1 +1,7 @@
 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,34 +1,8 @@
 {
-  "extends": "airbnb",
+  "extends": "react-app",
   "rules": {
-    "semi": [2, "never"],
-    "no-console": 0,
-    "comma-dangle": [2, "always-multiline"],
-    "max-len": 0,
-    "react/jsx-first-prop-new-line": 0,
-    "space-before-function-paren": [2, "always"],
-    "no-unused-expressions": [0, {
-      "allowShortCircuit": true,
-      "allowTernary": true
-    }],
-    "arrow-body-style": [0, "never"],
-    "func-names": 0,
-    "prefer-const": 0,
-    "no-extend-native": 0,
-    "no-param-reassign": 0,
-    "no-restricted-syntax": 0,
-    "no-eval": 0,
-    "react/jsx-no-bind": 0,
-    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
-    "no-underscore-dangle": 0,
-  },
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 8,
-    "ecmaFeatures": {
-      "jsx": true,
-      "experimentalObjectRestSpread": true
-    }
+    "jsx-a11y/href-no-hash": "off",
+    "no-console": "warn",
+    "valid-jsdoc": "warn"
   }
 }

.github/issue_template.md

@@ -0,0 +1,8 @@
+> 请酌情提供细节，并保持issue精简便于查阅
+> 1. 功能需求 => 详细说明
+> 2. Bug反馈  
+> 2.1 简单描述下报错  
+> 2.2 你期望什么结果  
+> 2.3 如何操作导致的  
+> 2.4 可提供运行环境信息  
+> 3. 代码求助 => 可以提，未必及时答复

.gitignore

@@ -1,4 +1,23 @@
+coverage
 dist
 node_modules
-yarn.lock
 npm-debug.log
+yarn-error.log
+yarn.lock
+package-lock.json
+
+# ide
+.idea
+
+# Mac General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# umi
+.umi
+.umi-production
+
+# jslingui
+src/locales/_build
+src/locales/**/*.js

.prettierignore

@@ -0,0 +1,6 @@
+*.svg
+*.ejs
+.DS_Store
+.umi
+.umi-production
+src/locales/**/*.json

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.roadhogrc.js

@@ -1,26 +0,0 @@
-const path = require('path')
-
-const svgSpriteDirs = [
-  path.resolve(__dirname, 'src/svg/'),
-]
-
-export default {
-  entry: 'src/index.js',
-  svgSpriteLoaderDirs: svgSpriteDirs,
-  "theme": "./theme.config.js",
-  "env": {
-      "development": {
-        "extraBabelPlugins": [
-          "dva-hmr",
-          "transform-runtime",
-  		    ["import", { "libraryName": "antd", "style": true }]
-        ]
-      },
-      "production": {
-        "extraBabelPlugins": [
-          "transform-runtime",
-  		    ["import", { "libraryName": "antd", "style": true}]
-        ]
-      }
-  }
-}

.roadhogrc.mock.js

@@ -1,5 +0,0 @@
-const mock = {}
-require('fs').readdirSync(require('path').join(__dirname + '/src/mock')).forEach(function(file) {
-	Object.assign(mock, require('./src/mock/' + file))
-})
-module.exports = mock

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "declaration-empty-line-before": null,
+    "no-descending-specificity": null,
+    "selector-pseudo-class-no-unknown": null,
+    "selector-pseudo-element-colon-notation": null
+  }
+}

.travis.yml

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

.umirc.js

@@ -0,0 +1,97 @@
+// 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

@@ -0,0 +1,87 @@
+
+<p align="center">
+  <a href="http://github.com/zuiidea/antd-admin">
+    <img alt="antd-admin" height="64" src="./docs/_media/logo.svg">
+  </a>
+</p>
+
+<h1 align="center">AntD Admin</h1>
+
+<div align="center">
+
+一套优秀的中后台前端解决方案
+
+[![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)
+[![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)
+![Travis (.org)](https://img.shields.io/travis/zuiidea/antd-admin.svg)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)
+[![Gitter](https://img.shields.io/gitter/room/antd-admin/antd-admin.svg)](https://gitter.im/antd-admin/antd-admin)
+
+</div>
+
+- 在线演示 - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
+- 使用文档 - [https://doc.antd-admin.zuiidea.com/#/zh-cn/](https://doc.antd-admin.zuiidea.com/#/zh-cn/)
+- 常见问题 - [https://doc.antd-admin.zuiidea.com/#/zh-cn/faq](https://doc.antd-admin.zuiidea.com/#/zh-cn/faq)
+- 更新日志 - [https://doc.antd-admin.zuiidea.com/#/zh-cn/change-log](https://doc.antd-admin.zuiidea.com/#/zh-cn/change-log)
+
+[English](./README.md) | 简体中文
+
+## 特性
+
+- 国际化，源码中抽离翻译字段，按需加载语言包
+- 动态权限，不同权限对应不同菜单
+- 优雅美观，Ant Design 设计体系
+- Mock 数据，本地数据调试
+
+
+## 使用
+
+1. 下载项目代码。
+
+```bash
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
+```
+
+2. 进入目录安装依赖，国内用户推荐使用 [cnpm](https://cnpmjs.org) 进行加速。
+
+```bash
+yarn install
+```
+
+或者
+
+```bash
+npm install
+```
+
+3. 启动本地服务器。
+
+```bash
+npm run start
+```
+
+4. 启动完成后打开浏览器访问 [http://localhost:7000](http://localhost:7000)，如果需要更改启动端口，可在 `.env` 文件中配置。
+
+
+> 更多信息请参考 [使用文档](https://doc.antd-admin.zuiidea.com/#/zh-cn/)。
+
+
+## 支持环境
+
+现代浏览器及 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
+
+## 参与贡献  
+
+我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 :smiley:
+- 在你的公司或个人项目中使用 AntD Admin。
+- 通过 [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)，更好的问题更容易获得帮助。

README.md

@@ -1,134 +1,86 @@
-# Antd Admin
 
-[![React Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)
-[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.3-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)
-[![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva)
+<p align="center">
+  <a href="http://github.com/zuiidea/antd-admin">
+    <img alt="antd-admin" height="64" src="./docs/_media/logo.svg">
+  </a>
+</p>
 
-[![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)
+<h1 align="center">AntD Admin</h1>
+
+<div align="center">
+
+A 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)
+[![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)
-[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
+![Travis (.org)](https://img.shields.io/travis/zuiidea/antd-admin.svg)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)
+[![Gitter](https://img.shields.io/gitter/room/antd-admin/antd-admin.svg)](https://gitter.im/antd-admin/antd-admin)
 
-演示地址 <http://zuiidea.github.io/antd-admin/>
+</div>
 
-备用地址 <http://47.92.30.98:8000>
+- Preview - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
+- Documentation - [https://doc.antd-admin.zuiidea.com](https://doc.antd-admin.zuiidea.com)
+- FAQ - [https://doc.antd-admin.zuiidea.com/#/faq](https://doc.antd-admin.zuiidea.com/#/faq)
+- ChangeLog - [https://doc.antd-admin.zuiidea.com/#/change-log](https://doc.antd-admin.zuiidea.com/#/change-log)
+
+English | [简体中文](./README-zh_CN.md) 
+
+## Features
+
+- Internationalization, extracting translation fields from source code, loading language packs on demand
+- Dynamic permissions, different permissions for different menus
+- Elegant and beautiful, Ant Design system
+- Mock data, local data debugging
 
 
-## 特性
+## Usage
 
--   基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践
--   基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发
--   基于Antd UI 设计语言，提供后台管理系统常见使用场景
--   基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载
--   浅度响应式设计
-
-## 注意
-如果使用到roadhog，且出现接口404
--  保证`package.json`里没有`roadhog`
--  删除`node_modules`
-- `npm i`
-- `npm i roadhog@0.6.0-beta.3 -g`
-
-## 更新日志
-
-### 4.2
-`2017-04-28`
-
--   修改user相关API使用`Restful`风格
--   增加user页面多条件查询[#266](https://github.com/zuiidea/antd-admin/issues/226)
--   修复菜单默认高亮[#201](https://github.com/zuiidea/antd-admin/issues/201)
-
-`2017-04-21`
-
--   重写Menu，Bread组件及配置文件，[说明](https://github.com/zuiidea/antd-admin/wiki/%E8%8F%9C%E5%8D%95%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6)
-
-### 4.1
-
-`2017-04-14`
-
--   升级开发工具为[roadhog](https://github.com/sorrycc/roadhog)
--   使用`roadhog`的mock功能
--   增强`utils/request.js`跨域处理能力
-
-## 开发构建
-
-### 目录结构
+1. Clone project code.
 
 ```bash
-├── /mock/           # 数据mock的接口文件
-├── /dist/           # 项目输出目录
-├── /src/            # 项目源码目录
-│ ├── /components/   # UI组件及UI相关方法
-│ │ ├── skin.less    # 全局样式
-│ │ └── vars.less    # 全局样式变量
-│ ├── /routes/       # 路由组件
-│ │ └── app.js       # 路由入口
-│ ├── /models/       # 数据模型
-│ ├── /services/     # 数据接口
-│ ├── /utils/        # 工具函数
-│ │ ├── config.js    # 项目常规配置
-│ │ ├── menu.js      # 侧边菜单配置
-│ │ ├── mock.js      # 数据拦截配置
-│ │ ├── config.js    # 项目常规配置
-│ │ ├── request.js   # 异步请求函数
-│ │ └── theme.js     # 项目需要在js中使用到样式变量
-│ ├── route.js       # 路由配置
-│ ├── index.js       # 入口文件
-│ └── index.html     
-├── package.json     # 项目信息
-└── proxy.config.js  # 数据mock配置
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
 ```
 
-文件夹命名说明:
-
--   components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如`DataTable`），方法首字母小写（如`layer`）,文件夹内主文件与文件夹同名，多文件以`index.js`导出对象（如`./src/components/Layout`）
--   routes：页面为单位以文件夹保存，文件夹名首字母小写（特殊除外，如`UIElement`）,文件夹内主文件以`index.js`导出，多文件时可建立`components`文件夹（如`./src/routes/dashboard`），如果有子路由，依次按照路由层次建立文件夹（如`./src/routes/UIElement`）
-
-### 快速开始
-
-克隆项目文件:
-
-    git clone https://github.com/zuiidea/antd-admin.git
-
-进入目录安装依赖:
-
-    npm i 或者 yarn install
-    npm i roadhog@0.6.0-beta.3 -g
-
-开发：
+2. Installation dependence.
 
 ```bash
-npm run dev    # 使用mock拦截请求，数据存储在localStroge里
-
-打开 http://localhost:8000
+yarn install
 ```
 
-构建：
+Or
 
 ```bash
-npm run build
-
-将会生成dist目录
+npm install
 ```
 
-代码检测：
+3. Start local server.
 
 ```bash
-npm run lint
+npm run start
 ```
 
-## 参考
+4. After the startup is complete, open a browser and visit [http://localhost:7000](http://localhost:7000), If you need to change the startup port, you can configure it in the `.env` file.
 
-用户列表：<https://github.com/dvajs/dva/tree/master/examples/user-dashboard>
 
-dashboard设计稿：<https://dribbble.com/shots/3108122-Dashboard-Admin> （已征得作者同意）
+> More instructions at [documentation](https://doc.antd-admin.zuiidea.com)。
 
-## 截屏
 
-web
+## Browsers support
 
-![](assets/demo4.gif)
+Modern browsers and 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
 
-![](assets/demo3.gif)
+## Contributing
+
+We very much welcome your contribution, you can build together with us in the following ways :smiley: 
+
+- Use Ant Design Pro in your daily work.
+- Submit [GitHub issues](http://github.com/zuiidea/antd-admin/issues)s to report bugs or ask questions.
+- Propose [Pull Request](http://github.com/zuiidea/antd-admin/pulls) to improve our code.

config/theme.config.js

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

docs/README.md

@@ -0,0 +1,83 @@
+<p align="center">
+  <a href="http://github.com/zuiidea/antd-admin">
+    <img alt="antd-admin" height="64" src="./_media/logo.svg">
+  </a>
+</p>
+
+<h1 align="center">AntD Admin</h1>
+
+<div align="center">
+
+A 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)
+[![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)
+![Travis (.org)](https://img.shields.io/travis/zuiidea/antd-admin.svg)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)
+[![Gitter](https://img.shields.io/gitter/room/antd-admin/antd-admin.svg)](https://gitter.im/antd-admin/antd-admin)
+
+</div>
+
+- Preview - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
+- Documentation - [https://doc.antd-admin.zuiidea.com](https://doc.antd-admin.zuiidea.com)
+- FAQ - [https://doc.antd-admin.zuiidea.com/#/faq](https://doc.antd-admin.zuiidea.com/#/faq)
+- ChangeLog - [https://doc.antd-admin.zuiidea.com/#/change-log](https://doc.antd-admin.zuiidea.com/#/change-log)
+
+## Features
+
+- Internationalization, extracting translation fields from source code, loading language packs on demand
+- Dynamic permissions, different permissions for different menus
+- Elegant and beautiful, Ant Design system
+- Mock data, local data debugging
+
+
+## Usage
+
+1. Clone project code.
+
+```bash
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
+```
+
+2. Installation dependence.
+
+```bash
+yarn install
+```
+
+Or
+
+```bash
+npm install
+```
+
+3. Start local server.
+
+```bash
+npm run start
+```
+
+4. After the startup is complete, open a browser and visit [http://localhost:7000](http://localhost:7000), If you need to change the startup port, you can configure it in the `.env` file.
+
+
+> More instructions at [documentation](https://doc.antd-admin.zuiidea.com)。
+
+
+## Browsers support
+
+Modern browsers and 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
+
+## Contributing
+
+We very much welcome your contribution, you can build together with us in the following ways :smiley: 
+
+- Use Ant Design Pro in your daily work.
+- Submit [GitHub issues](http://github.com/zuiidea/antd-admin/issues)s to report bugs or ask questions.
+- Propose [Pull Request](http://github.com/zuiidea/antd-admin/pulls) to improve our code.

docs/_media/logo.svg

@@ -0,0 +1,24 @@
+
+<svg width="169px" height="141px" viewBox="0 0 169 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="54.0428975%" y1="4.39752391%" x2="54.0428975%" y2="108.456714%" id="linearGradient-1">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="62.3089445%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="14.2201464%" x2="50%" y2="113.263844%" id="linearGradient-2">
+            <stop stop-color="#FA816E" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="65.9092442%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.000000, -5.000000)">
+            <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(83.718923, 75.312358) rotate(-24.000000) translate(-83.718923, -75.312358) " x="68.7189234" y="0.312357954" width="30" height="150" rx="15"></rect>
+            <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(129.009910, 75.580213) rotate(-24.000000) translate(-129.009910, -75.580213) " x="114.00991" y="0.580212739" width="30" height="150" rx="15"></rect>
+            <circle id="Oval" fill="url(#linearGradient-2)" cx="25" cy="120" r="25"></circle>
+        </g>
+    </g>
+</svg>

docs/_sidebar.md

@@ -0,0 +1,7 @@
+- Getting started
+  - [Quick Start](getting-started.md)
+- Customization
+  - [Configuration](configuration.md)
+- Guide
+  - [Deploy](deploy.md)
+- [Change Log](change-log.md)

docs/change-log.md

@@ -0,0 +1,50 @@
+## 5.0.0
+
+#### Optimization
+
+- Try to use decorators to simplify code writing and improve code readability.
+
+- API configurization to simplify the way data is obtained.
+
+- The files in `utils` are split and each has its own role.
+
+- Simplify the `utils/request` file without special handling.
+
+#### Specification
+
+- Functions add comments, parameters, return values, etc., ambiguous code adds comments, canonical reference [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#appendices-jsdoc-tag-reference).
+  
+- Semantic version number, specification participation [semantic version 2.0.0](https://semver.org/lang/zh-CN/).
+
+- Static code checking, unified code style, will use `prettier`, `stylelint`, `eslint` specification code before code submission.
+
+- Git submits information normalization, [git-commit-emoji-cn](https://github.com/liuchengxu/git-commit-emoji-cn).
+
+- Based on the pre-defined routing of `Umi`, there is no need to write a routing configuration file.
+
+- Use `React 16` new features such as `Fragment`, `Context`, `PureComponent`, etc.
+
+#### Features
+
+- 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 multiple layouts, which rules can be used according to the rules.
+
+- Support Antd Admin to automatically compile and deploy on Travis.
+
+- Generate a documentation website using `Docsify`.
+
+
+#### Style
+
+- Added Antd Admin standalone Logo.
+
+- Rewrite the overall layout component, optimize the menu, automatic breadcrumb navigation, menu auto-expansion and other logic.
+
+- The mobile menu is changed to drawer.
+
+#### Other
+
+- Discard components such as `IconFont`, `Search`, `DataTable` because they are well supported and replaceable in `Antd`.

docs/configuration.md

@@ -0,0 +1,102 @@
+# Configuration
+
+You can do some custom configuration in `/src/utils/config.js`:
+
+## siteName
+
+- Type `String`
+
+  Configure the site name, apply it to the login box, and display the title text at the top of the sidebar.
+
+## copyright
+
+- Type： `String`
+
+  Configure the copyright notice to apply to the login page, at the bottom of the `Primay` layout.
+
+## logoPath
+
+- Type： `String`
+
+  Configure the site logo to apply to the login box and the Logo display at the top of the sidebar.
+
+## apiPrefix
+
+- Type： `String`
+
+  Configure the prefix of the interface in the project. The interface related documents can be viewed [API configuration]()
+
+## fixedHeader
+
+- Type： `String`
+
+  Under the `Primary` layout, whether the top of the page is fixed when scrolling。
+
+## layouts
+
+- Type： `Array`
+
+  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
+        layouts: [
+            {
+                name: 'primary',
+                include: [/.*/],
+                exlude: [/(\/(en|zh))*\/login/],
+            },
+        ],
+    ```
+
+    The object properties for each layout are as follows:
+
+    - `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.
+  
+ > 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]().
+
+## i18n
+
+- Type： `Object`
+
+  Configure internationalization, the default configuration is as follows:
+
+  ```js
+  i18n: {
+      languages: [
+        {
+            key: 'en',
+            title: 'English',
+            flag: '/america.svg',
+        },
+        {
+            key: 'zh',
+            title: '中文',
+            flag: '/china.svg',
+        },
+      ],
+      defaultLanguage: 'en',
+  }
+  ```
+
+  ### i18n.languages
+
+  - Type： `Array`
+
+    Specify which languages the app supports, and the object properties for each language are as follows:
+
+    - `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;
+
+    - `flag` - The path of the flag icon of the language, the language switching display at the top of the `Primay` layout.
+
+ ### i18n.defaultLanguage
+   
+   - Type： `String`
+
+        Configure the default language.

docs/deploy.md

@@ -0,0 +1,111 @@
+# Deploy
+
+After the development is completed and verified in the development environment, it needs to be deployed to our users.
+
+## Build
+
+First execute the following command,
+
+```bash
+npm run build
+```
+
+After a few seconds, the output should look like this：
+
+```bash
+> antd-admin@5.0.0-beta build /Users/zuiidea/web/antd-admin
+> umi build
+
+[21:13:17] webpack compiled in 43s 868ms
+ DONE  Compiled successfully in 43877ms          21:13:17
+
+File sizes after gzip:
+
+  1.3 MB     dist/vendors.async.js
+  308.21 KB  dist/umi.js
+  45.49 KB   dist/vendors.chunk.css
+  36.08 KB   dist/p__chart__highCharts__index.async.js
+  33.53 KB   dist/p__user__index.async.js
+  22.36 KB   dist/p__chart__ECharts__index.async.js
+  4.21 KB    dist/p__dashboard__index.async.js
+  4.06 KB    dist/umi.css
+  ...
+```
+
+The `build` command will package all resources, including JavaScript, CSS, web fonts, images, html, and more. You can find these files in the `dist/` directory.
+
+> If you have requirements for using HashHistory , deploying html to non-root directories, statics, etc., check out [Umi Deployment] (https://umijs.org/en/guide/deploy.html).
+
+## Local verification
+
+
+Local verification can be done via `serve` before publishing.
+
+```
+$ yarn global add serve
+$ serve ./dist
+
+Serving!
+
+- Local:            http://localhost:5000
+- On Your Network:  http://{Your IP}:5000
+
+Copied local address to clipboard!
+
+```
+
+Access [http://localhost:5000](http://localhost:5000), under normal circumstances, it should be consistent with `npm start` (The API may not get the correct data).
+
+
+## Deploy
+
+Next, we can upload the static file to the server. If you use Nginx as the Web server, you can configure it in `ngnix.conf`:
+```
+server
+	{
+		listen       80;
+        # Specify an accessible domain name
+		server_name antd-admin.zuiidea.com;
+        # The directory where the compiled files are stored
+		root  /home/www/antd-admin/dist;
+
+        # Proxy server interface to avoid cross-domain
+		location /api {
+			 proxy_pass http://localhost:7000/api;
+		}
+
+         Because the front end uses BrowserHistory, it will route backback to index.html
+		location / {
+				index  index.html;
+				try_files $uri $uri/ /index.html;
+		}
+	}
+```
+
+Restart the web server and access [http://antd-admin.zuiidea.com](http://antd-admin.zuiidea.com) , You will see the correct page.
+
+```bash
+nginx -s reload
+```
+
+Similarly, if you use Caddy as a web server, you can do this in `Caddyfile`:
+
+```
+antd-admin.zuiidea.com {
+        gzip
+        root /home/www/antd-admin/dist
+        proxy /api http://localhost:7000
+
+        rewrite {
+                if {path} not_match ^/api
+                to {path} {path}/ /
+        }
+}
+
+
+antd-admin.zuiidea.com/public {
+        gzip
+        root  /home/www/antd-admin/dist/static/public
+}
+
+```

docs/getting-started.md

@@ -0,0 +1,73 @@
+# Quick Start
+
+> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) 、 [ES2015+](http://es6.ruanyifeng.com/) 、 [Antd Design](https://ant.design/docs/react/introduce-cn) .  Learn about [UmiJS](https://umijs.org/) , [Dva](http://github.com/dvajs/dva) . And properly installed and configured [Node.js](https://nodejs.org/) v8 or above, [Git](https://git-scm.com/). It would be helpful if you have pre-existing knowledge on those.
+
+## Installation
+
+```bash
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
+```
+
+## Scaffolding
+
+The project layout is as follows:
+
+```bash
+├── dist/               # Default build output directory
+├── mock/               # Mock files 
+├── public/             # Static resource 
+├── src/                # Source code
+│ ├── components/       # Components
+│ ├── e2e/              # Integrated Test Case
+│ ├── layouts/          # Common Layouts
+│ ├── locales/          # i18n resources
+│ ├── models/           # Global dva Model
+│ ├── pages/            # Sub-pages and templates
+│ ├── services/         # Backend Services
+│ │ ├── api.js          # API configuration
+│ │ └── index.js        # API export
+│ ├── themes/           # Themes
+│ │ ├── default.less    # Less variable
+│ │ ├── index.less      # Global style
+│ │ ├── mixin.less      # Less mixin
+│ │ └── vars.less       # Less variable and mixin
+│ ├── utils/            # Utility
+│ │ ├── config.js       # Application configuration
+│ │ ├── constant.js     # Static constant
+│ │ ├── index.js        # Utility methods
+│ │ ├── request.js      # Request function(axios)
+│ │ └── theme.js        # Style variables used in js
+├── .editorconfig       
+├── .env                
+├── .eslintrc           
+├── .gitignore          
+├── .prettierignore     
+├── .prettierrc         
+├── .stylelintrc.json   
+├── .travis.yml         
+└── .umirc.js           
+└──  package.json      
+```
+
+## Development
+
+1. Install Dependencies.
+
+```bash
+yarn install
+```
+
+Or
+
+```bash
+npm install
+```
+
+2. Start local server.
+
+```bash
+npm run start
+```
+
+3.  After the startup is complete, open a browser and visit [http://localhost:7000](http://localhost:7000), If you need to change the startup port, you can configure it in the `.env` file.

docs/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>antd-admin - An admin dashboard application demo built upon Ant Design and UmiJS</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="An admin dashboard application demo built upon Ant Design and UmiJS">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+  <link rel="icon" href="/_media/favicon.ico" />
+</head>
+
+<body>
+  <nav data-cloak class="app-nav">
+    <a href="/">En</a>
+    <a href="#/zh-cn/">中文</a>
+  </nav>
+  <div id="app">Loading...</div>
+  <script>
+    window.$docsify = {
+      name: 'AntD Admin',
+      loadSidebar: true,
+      maxLevel: 3,
+      subMaxLevel: 3,
+      auto2top: true,
+      autoHeader: true,
+      repo: 'zuiidea/antd-admin',
+      themeColor: '#1890ff',
+      search: {
+        paths: 'auto',
+        placeholder: {
+          '/zh-cn/': '搜索',
+          '/': 'Type to search'
+        },
+
+        noData: {
+          '/zh-cn/': '找不到结果',
+          '/': 'No Results'
+        }
+      }
+    }
+
+    // if (typeof navigator.serviceWorker !== 'undefined') {
+    //   navigator.serviceWorker.register('sw.js')
+    // }
+  </script>
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
+  <script src="//unpkg.com/docsify-copy-code"></script>
+</body>
+
+</html>

docs/now.dev.json

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

docs/now.json

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

docs/sw.js

@@ -0,0 +1,83 @@
+/* ===========================================================
+ * docsify sw.js
+ * ===========================================================
+ * Copyright 2016 @huxpro
+ * Licensed under Apache 2.0
+ * Register service worker.
+ * ========================================================== */
+
+const RUNTIME = 'docsify'
+const HOSTNAME_WHITELIST = [
+  self.location.hostname,
+  'fonts.gstatic.com',
+  'fonts.googleapis.com',
+  'unpkg.com'
+]
+
+// The Util Function to hack URLs of intercepted requests
+const getFixedUrl = (req) => {
+  var now = Date.now()
+  var url = new URL(req.url)
+
+  // 1. fixed http URL
+  // Just keep syncing with location.protocol
+  // fetch(httpURL) belongs to active mixed content.
+  // And fetch(httpRequest) is not supported yet.
+  url.protocol = self.location.protocol
+
+  // 2. add query for caching-busting.
+  // Github Pages served with Cache-Control: max-age=600
+  // max-age on mutable content is error-prone, with SW life of bugs can even extend.
+  // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
+  // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
+  if (url.hostname === self.location.hostname) {
+    url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
+  }
+  return url.href
+}
+
+/**
+ *  @Lifecycle Activate
+ *  New one activated when old isnt being used.
+ *
+ *  waitUntil(): activating ====> activated
+ */
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim())
+})
+
+/**
+ *  @Functional Fetch
+ *  All network requests are being intercepted here.
+ *
+ *  void respondWith(Promise<Response> r)
+ */
+self.addEventListener('fetch', event => {
+  // Skip some of cross-origin requests, like those for Google Analytics.
+  if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
+    // Stale-while-revalidate
+    // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
+    // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
+    const cached = caches.match(event.request)
+    const fixedUrl = getFixedUrl(event.request)
+    const fetched = fetch(fixedUrl, { cache: 'no-store' })
+    const fetchedCopy = fetched.then(resp => resp.clone())
+
+    // Call respondWith() with whatever we get first.
+    // If the fetch fails (e.g disconnected), wait for the cache.
+    // If there’s nothing in cache, wait for the fetch.
+    // If neither yields a response, return offline pages.
+    event.respondWith(
+      Promise.race([fetched.catch(_ => cached), cached])
+        .then(resp => resp || fetched)
+        .catch(_ => { /* eat any errors */ })
+    )
+
+    // Update the cache with the version we fetched (only for ok status)
+    event.waitUntil(
+      Promise.all([fetchedCopy, caches.open(RUNTIME)])
+        .then(([response, cache]) => response.ok && cache.put(event.request, response))
+        .catch(_ => { /* eat any errors */ })
+    )
+  }
+})

docs/zh-cn/README.md

@@ -0,0 +1,84 @@
+<p align="center">
+  <a href="http://github.com/zuiidea/antd-admin">
+    <img alt="antd-admin" height="64" src="../_media/logo.svg">
+  </a>
+</p>
+
+<h1 align="center">AntD Admin</h1>
+
+<div align="center">
+
+一套优秀的中后台前端解决方案
+
+[![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)
+[![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)
+![Travis (.org)](https://img.shields.io/travis/zuiidea/antd-admin.svg)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)
+[![Gitter](https://img.shields.io/gitter/room/antd-admin/antd-admin.svg)](https://gitter.im/antd-admin/antd-admin)
+
+</div>
+
+- 在线演示 - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
+- 使用文档 - [https://doc.antd-admin.zuiidea.com/#/zh-cn/](https://doc.antd-admin.zuiidea.com/#/zh-cn/)
+- 常见问题 - [https://doc.antd-admin.zuiidea.com/#/zh-cn/faq](https://doc.antd-admin.zuiidea.com/#/zh-cn/faq)
+- 更新日志 - [https://doc.antd-admin.zuiidea.com/#/zh-cn/change-log](https://doc.antd-admin.zuiidea.com/#/zh-cn/change-log)
+
+## 特性
+
+- 国际化，源码中抽离翻译字段，按需加载语言包
+- 动态权限，不同权限对应不同菜单
+- 优雅美观，Ant Design 设计体系
+- Mock 数据，本地数据调试
+
+
+## 使用
+
+1. 下载项目代码。
+
+```bash
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
+```
+
+2. 进入目录安装依赖，国内用户推荐使用 [cnpm](https://cnpmjs.org) 进行加速。
+
+```bash
+yarn install
+```
+
+或者
+
+```bash
+npm install
+```
+
+3. 启动本地服务器。
+
+```bash
+npm run start
+```
+
+4. 启动完成后打开浏览器访问 [http://localhost:7000](http://localhost:7000)，如果需要更改启动端口，可在 `.env` 文件中配置。
+
+
+> 更多信息请参考 [使用文档](https://doc.antd-admin.zuiidea.com/#/zh-cn/)。
+
+
+## 支持环境
+
+现代浏览器及 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
+
+## 参与贡献  
+
+我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 :smiley:
+- 在你的公司或个人项目中使用 AntD Admin。
+- 通过 [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)，更好的问题更容易获得帮助。

docs/zh-cn/_sidebar.md

@@ -0,0 +1,7 @@
+- 入门
+  - [快速上手](zh-cn/getting-started.md)
+- 定制化
+  - [配置项](zh-cn/configuration.md)
+- 指南
+  - [部署](zh-cn/deploy.md)
+- [更新日志](zh-cn/change-log.md)

docs/zh-cn/change-log.md

@@ -0,0 +1,52 @@
+## 5.0.0
+
+#### 优化
+
+- 尽量使用修饰器，简化代码编写，提高代码可读性。
+
+- API 配置化，简化获取数据方式。
+
+- `utils` 内文件拆分，各司其职。
+
+- 简化`utils/request`文件，不做特殊处理。
+
+#### 规范
+
+- 函数添加描述、参数、返回值等注释，含糊不清的代码增加注释，规范参考 [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#appendices-jsdoc-tag-reference)。
+  
+- 语义化版本号，规范参加 [语义化版本 2.0.0](https://semver.org/lang/zh-CN/)。
+
+- 静态代码检查，统一代码风格，代码提交前将会使用 `prettier`、`stylelint`、`eslint` 规范代码。
+
+- Git 提交信息规范化，[git-commit-emoji-cn](https://github.com/liuchengxu/git-commit-emoji-cn)。
+
+- 基于 `Umi` 的约定式路由，无需再写路由配置文件。  
+
+- 使用 `React 16` 新特性，如 `Fragment`、`Context`、 `PureComponent`等。
+
+#### 功能
+
+- 支持国际化，源码中抽离翻译字段，按需加载语言包，自动在线翻译。
+
+- 支持按需引入 `ant-design-pro` 组件、`lodash` 函数。
+  
+- 支持多布局，可根据规则规定哪些路由使用哪种布局。
+
+- 支持 Antd Admin 在 Travis 上自动编译和部署。
+
+- 使用 `Docsify` 生成文档网站。
+
+
+#### 样式
+
+- 新增 Antd Admin 独立 Logo。
+
+- 重写整体布局组件，优化菜单、面包屑导航自动高亮，菜单自动展开等逻辑。
+
+- 移动端菜单更改为抽屉式。
+
+#### 其他
+
+- 废弃 `IconFont`、 `Search`、`DataTable`等组件，因为在 `Antd` 中有很好的支持和可替代的。
+  
+

docs/zh-cn/configuration.md

@@ -0,0 +1,102 @@
+# 配置项
+
+你可以在 `/src/utils/config.js` 里做一些自定义配置：
+
+## siteName
+
+- 类型： `String`
+
+  配置站点名称，应用到登录框，侧边栏顶部的标题文字显示。
+
+## copyright
+
+- 类型： `String`
+
+  配置版权声明，应用到登录页、`Primay`布局底部。
+
+## logoPath
+
+- 类型： `String`
+
+  配置站点 Logo，应用到登录框，侧边栏顶部的 Logo 显示。
+
+## apiPrefix
+
+- 类型： `String`
+
+  配置项目中接口的前缀，接口相关文档可查看 [接口配置化]()
+
+## fixedHeader
+
+- 类型： `String`
+
+  在`Primary`布局下，页面滚动时是否固定顶部。
+
+## layouts
+
+- 类型： `Array`
+
+    配置哪些路由使用哪种布局，未指定路由使用默认布局 `Public`，项目中目前有 `Primary` 和 `Public` 两种布局，
+    默认配置如下：
+  
+    ```js
+        layouts: [
+            {
+                name: 'primary',
+                include: [/.*/],
+                exlude: [/(\/(en|zh))*\/login/],
+            },
+        ],
+    ```
+
+    每种布局的对象属性如下：
+
+    - `name` - 布局的名称；
+  
+    - `include` - 指定使用该布局的路由规则列表，规则可为正则表达式或者字符串；
+  
+    - `exlude` - 指定不使用该布局的路由规则列表，规则可为正则表达式或者字符串。
+  
+ > 注意：`exlude` 优先级高于 `include`，后面的布局优先级高于前面的布局。开发过程中可能需要结合`src/layouts`目录下的布局使用，具体方法可查看 [使用布局]()。
+
+## i18n
+
+- 类型： `Object`
+
+  配置国际化，默认配置如下：
+
+  ```js
+  i18n: {
+      languages: [
+        {
+            key: 'en',
+            title: 'English',
+            flag: '/america.svg',
+        },
+        {
+            key: 'zh',
+            title: '中文',
+            flag: '/china.svg',
+        },
+      ],
+      defaultLanguage: 'en',
+  }
+  ```
+
+  ### i18n.languages
+
+  - 类型： `Array`
+
+    指定应用支持哪些语言，每种语言的对象属性如下：
+
+    - `key` - 语言的`key`，应用到页面 url 上以区分语言，也对应 `src/locales` 目录下的语言包文件夹名；
+
+    - `title` - 语言名称，在登录页底部、`Primay` 布局顶部语言切换显示；
+
+    - `flag` - 语言的国旗图标的路径，在 `Primay` 布局顶部语言切换显示。
+
+ ### i18n.defaultLanguage
+   
+   - 类型： `String`
+
+        配置默认语言。

docs/zh-cn/deploy.md

@@ -0,0 +1,112 @@
+# 部署
+
+完成开发并且在开发环境验证之后，就需要部署给我们的用户了。
+
+## 构建
+
+先执行下面的命令，
+
+```bash
+npm run build
+```
+
+几秒后，输出应该如下：
+
+```bash
+> antd-admin@5.0.0-beta build /Users/zuiidea/web/antd-admin
+> umi build
+
+[21:13:17] webpack compiled in 43s 868ms
+ DONE  Compiled successfully in 43877ms          21:13:17
+
+File sizes after gzip:
+
+  1.3 MB     dist/vendors.async.js
+  308.21 KB  dist/umi.js
+  45.49 KB   dist/vendors.chunk.css
+  36.08 KB   dist/p__chart__highCharts__index.async.js
+  33.53 KB   dist/p__user__index.async.js
+  22.36 KB   dist/p__chart__ECharts__index.async.js
+  4.21 KB    dist/p__dashboard__index.async.js
+  4.06 KB    dist/umi.css
+  ...
+```
+
+`build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。
+
+> 如果  有使用 HashHistory 、 部署 html 到非根目录、静态化等需求，请查看[Umi 部署](https://umijs.org/zh/guide/deploy.html)。
+
+## 本地验证
+
+
+发布之前，可以通过 `serve` 做本地验证，
+
+```
+$ yarn global add serve
+$ serve ./dist
+
+Serving!
+
+- Local:            http://localhost:5000
+- On Your Network:  http://{Your IP}:5000
+
+Copied local address to clipboard!
+
+```
+
+访问 [http://localhost:5000](http://localhost:5000)，正常情况下法应该是和 `npm start` 一致的（接口可能无法获取到正确数据）。
+
+
+## 部署
+
+接下来，我们可以把静态文件上传到服务器，如果使用 Nginx 作为 Web server，你可以在 `ngnix.conf` 中这样配置：
+
+```
+server
+	{
+		listen       80;
+        # 指定可访问的域名
+		server_name antd-admin.zuiidea.com;
+        # 编译后的文件存放的目录
+		root  /home/www/antd-admin/dist;
+
+        # 代理服务端接口，避免跨域
+		location /api {
+			 proxy_pass http://localhost:7000/api;
+		}
+
+        # 因为前端使用了BrowserHistory，所以将路由 fallback 到 index.html
+		location / {
+				index  index.html;
+				try_files $uri $uri/ /index.html;
+		}
+	}
+```
+
+重启 Web server，访问 [http://antd-admin.zuiidea.com](http://antd-admin.zuiidea.com) ，你将看到正确的页面。
+
+```bash
+nginx -s reload
+```
+
+类似的，如果你使用 Caddy 作为 Web server，你可以在 `Caddyfile` 中这样配置：
+
+```
+antd-admin.zuiidea.com {
+        gzip
+        root /home/www/antd-admin/dist
+        proxy /api http://localhost:7000
+
+        rewrite {
+                if {path} not_match ^/api
+                to {path} {path}/ /
+        }
+}
+
+
+antd-admin.zuiidea.com/public {
+        gzip
+        root  /home/www/antd-admin/dist/static/public
+}
+
+```

docs/zh-cn/getting-started.md

@@ -0,0 +1,73 @@
+# 快速上手
+
+> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 、 [ES2015+](http://es6.ruanyifeng.com/) 、 [Antd Design](https://ant.design/docs/react/introduce-cn) , 了解 [UmiJS](https://umijs.org/) 、[Dva](http://github.com/dvajs/dva) ，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上 、[Git](https://git-scm.com/)。提前了解和学习这些知识会非常有帮助。
+
+## 安装
+
+```bash
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
+```
+
+## 目录结构
+
+应用的目录结构如下
+
+```bash
+├── dist/               # 默认build输出目录
+├── mock/               # Mock文件目录
+├── public/             # 静态资源文件目录
+├── src/                # 源码目录
+│ ├── components/       # 组件目录
+│ ├── e2e/              # e2e目录
+│ ├── layouts/          # 布局目录
+│ ├── locales/          # 国际化文件目录
+│ ├── models/           # 数据模型目录
+│ ├── pages/            # 页面组件目录
+│ ├── services/         # 数据接口目录
+│ │ ├── api.js          # 接口配置
+│ │ └── index.js        # 接口输出
+│ ├── themes/           # 项目样式目录
+│ │ ├── default.less    # 样式变量
+│ │ ├── index.less      # 全局样式
+│ │ ├── mixin.less      # 样式函数
+│ │ └── vars.less       # 样式变量及函数
+│ ├── utils/            # 工具函数目录
+│ │ ├── config.js       # 项目配置
+│ │ ├── constant.js     # 静态常量
+│ │ ├── index.js        # 工具函数
+│ │ ├── request.js      # 异步请求函数(axios)
+│ │ └── theme.js        # 项目需要在js中使用到样式变量
+├── .editorconfig       # 编辑器配置
+├── .env                # 环境变量
+├── .eslintrc           # ESlint配置
+├── .gitignore          # Git忽略文件配置
+├── .prettierignore     # Prettier忽略文件配置
+├── .prettierrc         # Prettier配置
+├── .stylelintrc.json   # Stylelint配置
+├── .travis.yml         # Travis配置
+└── .umirc.js           # Umi配置
+└──  package.json       # 项目信息
+```
+
+## 本地开发
+
+1. 进入目录安装依赖，国内用户推荐使用 [cnpm](https://cnpmjs.org) 进行加速
+
+```bash
+yarn install
+```
+
+或者
+
+```bash
+npm install
+```
+
+2. 启动本地服务器
+
+```bash
+npm run start
+```
+
+3. 启动完成后打开浏览器访问 [http://localhost:7000](http://localhost:7000)，如果需要更改启动端口，可在 `.env` 文件中配置。

docs/zh-cn/router.md

@@ -0,0 +1,5 @@
+# 路由
+
+本项目中采用约定式路由
+
+参考[umi 路由](https://umijs.org/zh/guide/router.html)

jest.config.js

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

mock/_utils.js

@@ -0,0 +1,62 @@
+/**
+ * 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.js

@@ -1,7 +1,6 @@
-import { color } from '../utils/theme'
-const Mock = require('mockjs')
-const config = require('../utils/config')
-const { apiPrefix } = config
+import { Mock, Constant } from './_utils'
+
+const { ApiPrefix, Color } = Constant
 
 const Dashboard = Mock.mock({
   'sales|8': [
@@ -55,11 +54,9 @@ const Dashboard = Mock.mock({
     },
   ],
   user: {
-    name: 'zuiidea',
-    email: 'zuiiidea@.gmail.com',
+    name: 'github',
     sales: 3241,
     sold: 3556,
-    avatar: 'http://tva4.sinaimg.cn/crop.0.0.996.996.180/6ee6a3a3jw8f0ks5pk7btj20ro0rodi0.jpg',
   },
   'completed|12': [
     {
@@ -73,11 +70,19 @@ const Dashboard = Mock.mock({
       name: '@last',
       'status|1-3': 1,
       content: '@sentence',
-      avatar () {
-        return Mock.Random.image('48x48', Mock.Random.color(), '#757575', 'png', this.name.substr(0, 1))
+      avatar() {
+        return Mock.Random.image(
+          '48x48',
+          Mock.Random.color(),
+          '#757575',
+          'png',
+          this.name.substr(0, 1)
+        )
       },
-      date () {
-        return `2016-${Mock.Random.date('MM-dd')} ${Mock.Random.time('HH:mm:ss')}`
+      date() {
+        return `2016-${Mock.Random.date('MM-dd')} ${Mock.Random.time(
+          'HH:mm:ss'
+        )}`
       },
     },
   ],
@@ -86,8 +91,10 @@ const Dashboard = Mock.mock({
       'id|+1': 1,
       name: '@last',
       'status|1-4': 1,
-      date () {
-        return `${Mock.Random.integer(2015, 2016)}-${Mock.Random.date('MM-dd')} ${Mock.Random.time('HH:mm:ss')}`
+      date() {
+        return `${Mock.Random.integer(2015, 2016)}-${Mock.Random.date(
+          'MM-dd'
+        )} ${Mock.Random.time('HH:mm:ss')}`
       },
       'price|10-200.1-2': 1,
     },
@@ -95,28 +102,33 @@ const Dashboard = Mock.mock({
   quote: {
     name: 'Joho Doe',
     title: 'Graphic Designer',
-    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',
+    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',
   },
   numbers: [
     {
       icon: 'pay-circle-o',
-      color: color.green,
+      color: Color.green,
       title: 'Online Review',
       number: 2781,
-    }, {
+    },
+    {
       icon: 'team',
-      color: color.blue,
+      color: Color.blue,
       title: 'New Customers',
       number: 3241,
-    }, {
+    },
+    {
       icon: 'message',
-      color: color.purple,
+      color: Color.purple,
       title: 'Active Projects',
       number: 253,
-    }, {
+    },
+    {
       icon: 'shopping-cart',
-      color: color.red,
+      color: Color.red,
       title: 'Referrals',
       number: 4324,
     },
@@ -124,7 +136,7 @@ const Dashboard = Mock.mock({
 })
 
 module.exports = {
-  [`GET ${apiPrefix}/dashboard`] (req, res) {
+  [`GET ${ApiPrefix}/dashboard`](req, res) {
     res.json(Dashboard)
   },
 }

mock/post.js

@@ -0,0 +1,67 @@
+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.js

@@ -0,0 +1,100 @@
+import { Constant } from './_utils'
+const { ApiPrefix } = Constant
+
+const database = [
+  {
+    id: '1',
+    icon: 'dashboard',
+    name: 'Dashboard',
+    zhName: '仪表盘',
+    route: '/dashboard',
+  },
+  {
+    id: '2',
+    breadcrumbParentId: '1',
+    name: 'Users',
+    zhName: '用户管理',
+    icon: 'user',
+    route: '/user',
+  },
+  {
+    id: '7',
+    breadcrumbParentId: '1',
+    name: 'Posts',
+    zhName: '文章管理',
+    icon: 'shopping-cart',
+    route: '/post',
+  },
+  {
+    id: '21',
+    menuParentId: '-1',
+    breadcrumbParentId: '2',
+    name: 'User Detail',
+    zhName: '用户详情',
+    route: '/user/:id',
+  },
+  {
+    id: '3',
+    breadcrumbParentId: '1',
+    name: 'Request',
+    zhName: 'Request',
+    icon: 'api',
+    route: '/request',
+  },
+  {
+    id: '4',
+    breadcrumbParentId: '1',
+    name: 'UI Element',
+    zhName: 'UI组件',
+    icon: 'camera-o',
+  },
+  {
+    id: '45',
+    breadcrumbParentId: '4',
+    menuParentId: '4',
+    name: 'Editor',
+    zhName: 'Editor',
+    icon: 'edit',
+    route: '/UIElement/editor',
+  },
+  {
+    id: '5',
+    breadcrumbParentId: '1',
+    name: 'Charts',
+    zhName: 'Charts',
+    icon: 'code-o',
+  },
+  {
+    id: '51',
+    breadcrumbParentId: '5',
+    menuParentId: '5',
+    name: 'ECharts',
+    zhName: 'ECharts',
+    icon: 'line-chart',
+    route: '/chart/ECharts',
+  },
+  {
+    id: '52',
+    breadcrumbParentId: '5',
+    menuParentId: '5',
+    name: 'HighCharts',
+    zhName: 'HighCharts',
+    icon: 'bar-chart',
+    route: '/chart/highCharts',
+  },
+  {
+    id: '53',
+    breadcrumbParentId: '5',
+    menuParentId: '5',
+    name: 'Rechartst',
+    zhName: 'Rechartst',
+    icon: 'area-chart',
+    route: '/chart/Recharts',
+  },
+]
+
+module.exports = {
+  [`GET ${ApiPrefix}/routes`](req, res) {
+    res.status(200).json(database)
+  },
+}

mock/user.js

@@ -1,7 +1,6 @@
-const qs = require('qs')
-const Mock = require('mockjs')
-const config = require('../utils/config')
-const { apiPrefix } = config
+import { Mock, Constant, qs, randomAvatar } from './_utils'
+
+const { ApiPrefix } = Constant
 
 let usersListData = Mock.mock({
   'data|80-100': [
@@ -15,24 +14,32 @@ let usersListData = Mock.mock({
       isMale: '@boolean',
       email: '@email',
       createTime: '@datetime',
-      avatar () {
-        return Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', this.nickName.substr(0, 1))
+      avatar() {
+        return randomAvatar()
       },
     },
   ],
 })
 
-
 let database = usersListData.data
 
+const EnumRoleType = {
+  ADMIN: 'admin',
+  DEFAULT: 'guest',
+  DEVELOPER: 'developer',
+}
+
 const userPermission = {
-  DEFAULT: [
-    'dashboard', 'chart',
-  ],
-  ADMIN: [
-    'dashboard', 'users', 'UIElement', 'UIElementIconfont', 'chart',
-  ],
-  DEVELOPER: ['dashboard', 'users', 'UIElement', 'UIElementIconfont', 'chart'],
+  DEFAULT: {
+    visit: ['1', '2', '21', '7', '5', '51', '52', '53'],
+    role: EnumRoleType.DEFAULT,
+  },
+  ADMIN: {
+    role: EnumRoleType.ADMIN,
+  },
+  DEVELOPER: {
+    role: EnumRoleType.DEVELOPER,
+  },
 }
 
 const adminUsers = [
@@ -41,16 +48,21 @@ const adminUsers = [
     username: 'admin',
     password: 'admin',
     permissions: userPermission.ADMIN,
-  }, {
+    avatar: randomAvatar(),
+  },
+  {
     id: 1,
     username: 'guest',
     password: 'guest',
     permissions: userPermission.DEFAULT,
-  }, {
+    avatar: randomAvatar(),
+  },
+  {
     id: 2,
     username: '吴彦祖',
     password: '123456',
     permissions: userPermission.DEVELOPER,
+    avatar: randomAvatar(),
   },
 ]
 
@@ -79,34 +91,37 @@ const NOTFOUND = {
 }
 
 module.exports = {
-
-  [`POST ${apiPrefix}/user/login`] (req, res) {
+  [`POST ${ApiPrefix}/user/login`](req, res) {
     const { username, password } = req.body
-    const user = adminUsers.filter((item) => item.username === username)
+    const user = adminUsers.filter(item => item.username === username)
 
-    if (user && user[0].password === password) {
+    if (user.length > 0 && user[0].password === password) {
       const now = new Date()
       now.setDate(now.getDate() + 1)
-      res.cookie('token', JSON.stringify({ id: user[0].id, deadline: now.getTime() }), {
-        maxAge: 900000,
-        httpOnly: true,
-      })
+      res.cookie(
+        'token',
+        JSON.stringify({ id: user[0].id, deadline: now.getTime() }),
+        {
+          maxAge: 900000,
+          httpOnly: true,
+        }
+      )
       res.json({ success: true, message: 'Ok' })
     } else {
       res.status(400).end()
     }
   },
 
-  [`GET ${apiPrefix}/user/logout`] (req, res) {
+  [`GET ${ApiPrefix}/user/logout`](req, res) {
     res.clearCookie('token')
     res.status(200).end()
   },
 
-  [`GET ${apiPrefix}/user`] (req, res) {
+  [`GET ${ApiPrefix}/user`](req, res) {
     const cookie = req.headers.cookie || ''
     const cookies = qs.parse(cookie.replace(/\s/g, ''), { delimiter: ';' })
     const response = {}
-    const user = {}
+    let user = {}
     if (!cookies.token) {
       res.status(200).send({ message: 'Not Login' })
       return
@@ -116,18 +131,17 @@ module.exports = {
       response.success = token.deadline > new Date().getTime()
     }
     if (response.success) {
-      const userItem = adminUsers.filter(_ => _.id === token.id)
-      if (userItem.length > 0) {
-        user.permissions = userItem[0].permissions
-        user.username = userItem[0].username
-        user.id = userItem[0].id
+      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) {
+  [`GET ${ApiPrefix}/users`](req, res) {
     const { query } = req
     let { pageSize, page, ...other } = query
     pageSize = pageSize || 10
@@ -136,7 +150,7 @@ 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)
@@ -150,7 +164,11 @@ module.exports = {
               }
               return true
             }
-            return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1
+            return (
+              String(item[key])
+                .trim()
+                .indexOf(decodeURI(other[key]).trim()) > -1
+            )
           }
           return true
         })
@@ -163,10 +181,24 @@ module.exports = {
     })
   },
 
-  [`POST ${apiPrefix}/user`] (req, res) {
+  [`POST ${ApiPrefix}/users/delete`](req, res) {
+    const { ids=[] } = req.body
+    database = database.filter(item => !ids.some(_ => _ === item.id))
+    res.status(204).end()
+  },
+
+  [`POST ${ApiPrefix}/user`](req, res) {
     const newData = req.body
     newData.createTime = Mock.mock('@now')
-    newData.avatar = newData.avatar || Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', newData.nickName.substr(0, 1))
+    newData.avatar =
+      newData.avatar ||
+      Mock.Random.image(
+        '100x100',
+        Mock.Random.color(),
+        '#757575',
+        'png',
+        newData.nickName.substr(0, 1)
+      )
     newData.id = Mock.mock('@id')
 
     database.unshift(newData)
@@ -174,33 +206,33 @@ module.exports = {
     res.status(200).end()
   },
 
-  [`GET ${apiPrefix}/user/:id`] (req, res) {
+  [`GET ${ApiPrefix}/user/:id`](req, res) {
     const { id } = req.params
     const data = queryArray(database, id, 'id')
     if (data) {
       res.status(200).json(data)
     } else {
-      res.status(404).json(NOTFOUND)
+      res.status(200).json(NOTFOUND)
     }
   },
 
-  [`DELETE ${apiPrefix}/user/:id`] (req, res) {
+  [`DELETE ${ApiPrefix}/user/:id`](req, res) {
     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(404).json(NOTFOUND)
+      res.status(200).json(NOTFOUND)
     }
   },
 
-  [`PATCH ${apiPrefix}/user/:id`] (req, res) {
+  [`PATCH ${ApiPrefix}/user/:id`](req, res) {
     const { id } = req.params
     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)
@@ -211,7 +243,7 @@ module.exports = {
     if (isExist) {
       res.status(201).end()
     } else {
-      res.status(404).json(NOTFOUND)
+      res.status(200).json(NOTFOUND)
     }
   },
 }

package.json

@@ -1,50 +1,115 @@
 {
+  "name": "antd-admin",
+  "version": "5.0.0-beta",
   "private": true,
+  "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
-    "antd": "^2.9.1",
-    "classnames": "^2.2.5",
-    "draftjs-to-markdown": "^0.4.0",
-    "dva": "^1.1.0",
-    "dva-loading": "^0.2.0",
-    "lodash": "^4.17.4",
+    "@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",
+    "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",
+    "json-format": "^1.0.1",
+    "lodash": "^4.17.11",
+    "md5": "^2.2.1",
     "nprogress": "^0.2.0",
-    "qs": "^6.2.0",
-    "react": "^15.4.1",
-    "react-countup": "1.3.0",
-    "react-dom": "^15.4.1",
-    "react-draft-wysiwyg": "^1.8.1",
-    "react-helmet": "^5.0.0",
-    "recharts": "^0.19.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",
+    "store": "^2.0.12"
   },
   "devDependencies": {
-    "antd": "^2.9.1",
-    "axios": "^0.15.3",
-    "babel-eslint": "^6.1.2",
+    "@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-dva-hmr": "^0.3.2",
-    "babel-plugin-import": "^1.1.1",
-    "babel-plugin-transform-runtime": "^6.9.0",
-    "babel-polyfill": "^6.23.0",
-    "babel-runtime": "^6.9.2",
-    "draftjs-to-html": "^0.7.0",
-    "eslint": "^3.17.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.16.0",
-    "eslint-plugin-jsx-a11y": "^1.4.2",
-    "eslint-plugin-react": "^5.1.1",
-    "jsonp": "^0.2.1",
-    "less-vars-to-js": "^1.1.2",
+    "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",
+    "less-vars-to-js": "^1.3.0",
+    "lint-staged": "^7.3.0",
     "mockjs": "^1.0.1-beta3",
-    "path-to-regexp": "^1.7.0",
-    "rc-tween-one": "^1.0.0",
-    "redbox-react": "^1.2.10"
+    "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"
+  },
+  "optionalDependencies": {
+    "puppeteer": "^1.9.0"
+  },
+  "lint-staged": {
+    "src/**/*.js": [
+      "eslint --ext .js --fix",
+      "npm run prettier",
+      "git add"
+    ],
+    "**/*.less": [
+      "stylelint --syntax less",
+      "npm run prettier",
+      "git add"
+    ]
+  },
+  "lingui": {
+    "fallbackLocale": "en",
+    "sourceLocale": "en",
+    "localeDir": "src/locales",
+    "srcPathDirs": [
+      "src/pages",
+      "src/layouts",
+      "src/components",
+      "src/layouts"
+    ],
+    "format": "minimal",
+    "extractBabelOptions": {
+      "presets": [
+        "umi/babel"
+      ]
+    }
   },
-  "pre-commit": [
-    "lint"
-  ],
   "scripts": {
-    "dev": "set BROWSER=none&&set HOST=0.0.0.0&&roadhog server",
-    "lint": "eslint --fix --ext .js src",
-    "build": "roadhog build --analyze"
+    "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)'",
+    "precommit": "lint-staged",
+    "add-locale": "lingui add-locale",
+    "extract": "lingui extract",
+    "trans": "lingui extract --clean && node ./scripts/translate.js",
+    "doc": "docsify serve docs"
   }
 }

public/america.svg

@@ -0,0 +1,63 @@
+<?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:#F0F0F0;" width="512" height="512"/>
+<g>
+	<rect y="64" style="fill:#D80027;" width="512" height="64"/>
+	<rect y="192" style="fill:#D80027;" width="512" height="64"/>
+	<rect y="320" style="fill:#D80027;" width="512" height="64"/>
+	<rect y="448" style="fill:#D80027;" width="512" height="64"/>
+</g>
+<rect style="fill:#2E52B2;" width="256" height="275.69"/>
+<g>
+	<polygon style="fill:#F0F0F0;" points="51.518,115.318 45.924,132.529 27.826,132.529 42.469,143.163 36.875,160.375 
+		51.518,149.741 66.155,160.375 60.56,143.163 75.203,132.529 57.106,132.529 	"/>
+	<polygon style="fill:#F0F0F0;" points="57.106,194.645 51.518,177.434 45.924,194.645 27.826,194.645 42.469,205.279 
+		36.875,222.49 51.518,211.857 66.155,222.49 60.56,205.279 75.203,194.645 	"/>
+	<polygon style="fill:#F0F0F0;" points="51.518,53.202 45.924,70.414 27.826,70.414 42.469,81.047 36.875,98.259 51.518,87.625 
+		66.155,98.259 60.56,81.047 75.203,70.414 57.106,70.414 	"/>
+	<polygon style="fill:#F0F0F0;" points="128.003,115.318 122.409,132.529 104.311,132.529 118.954,143.163 113.36,160.375 
+		128.003,149.741 142.64,160.375 137.045,143.163 151.689,132.529 133.591,132.529 	"/>
+	<polygon style="fill:#F0F0F0;" points="133.591,194.645 128.003,177.434 122.409,194.645 104.311,194.645 118.954,205.279 
+		113.36,222.49 128.003,211.857 142.64,222.49 137.045,205.279 151.689,194.645 	"/>
+	<polygon style="fill:#F0F0F0;" points="210.076,194.645 204.489,177.434 198.894,194.645 180.797,194.645 195.44,205.279 
+		189.845,222.49 204.489,211.857 219.125,222.49 213.531,205.279 228.174,194.645 	"/>
+	<polygon style="fill:#F0F0F0;" points="204.489,115.318 198.894,132.529 180.797,132.529 195.44,143.163 189.845,160.375 
+		204.489,149.741 219.125,160.375 213.531,143.163 228.174,132.529 210.076,132.529 	"/>
+	<polygon style="fill:#F0F0F0;" points="128.003,53.202 122.409,70.414 104.311,70.414 118.954,81.047 113.36,98.259 
+		128.003,87.625 142.64,98.259 137.045,81.047 151.689,70.414 133.591,70.414 	"/>
+	<polygon style="fill:#F0F0F0;" points="204.489,53.202 198.894,70.414 180.797,70.414 195.44,81.047 189.845,98.259 
+		204.489,87.625 219.125,98.259 213.531,81.047 228.174,70.414 210.076,70.414 	"/>
+</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>
+</g>
+</svg>

public/china.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D80027;}
+	.st1{fill:#FFDA44;}
+</style>
+<rect x="-49" y="141" class="st0" width="512" height="512"/>
+
+<g>
+	<polygon class="st1" points="91.1,296.8 113.2,364.8 184.7,364.8 126.9,406.9 149,474.9 91.1,432.9 33.2,474.9 55.4,406.9 
+		-2.5,364.8 69,364.8 	"/>
+	<polygon class="st1" points="254.5,537.5 237.6,516.7 212.6,526.4 227.1,503.9 210.2,483 236.1,489.9 250.7,467.4 252.1,494.2 
+		278.1,501.1 253,510.7 	"/>
+	<polygon class="st1" points="288.1,476.5 296.1,450.9 274.2,435.4 301,435 308.9,409.4 317.6,434.8 344.4,434.5 322.9,450.5 
+		331.5,475.9 309.6,460.4 	"/>
+	<polygon class="st1" points="333.4,328.9 321.6,353 340.8,371.7 314.3,367.9 302.5,391.9 297.9,365.5 271.3,361.7 295.1,349.2 
+		290.5,322.7 309.7,341.4 	"/>
+	<polygon class="st1" points="255.2,255.9 253.2,282.6 278.1,292.7 252,299.1 250.1,325.9 236,303.1 209.9,309.5 227.2,289 
+		213,266.3 237.9,276.4 	"/>
+</g>
+</svg>

public/logo.svg

@@ -0,0 +1,24 @@
+
+<svg width="169px" height="141px" viewBox="0 0 169 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="54.0428975%" y1="4.39752391%" x2="54.0428975%" y2="108.456714%" id="linearGradient-1">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="62.3089445%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="14.2201464%" x2="50%" y2="113.263844%" id="linearGradient-2">
+            <stop stop-color="#FA816E" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="65.9092442%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.000000, -5.000000)">
+            <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(83.718923, 75.312358) rotate(-24.000000) translate(-83.718923, -75.312358) " x="68.7189234" y="0.312357954" width="30" height="150" rx="15"></rect>
+            <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(129.009910, 75.580213) rotate(-24.000000) translate(-129.009910, -75.580213) " x="114.00991" y="0.580212739" width="30" height="150" rx="15"></rect>
+            <circle id="Oval" fill="url(#linearGradient-2)" cx="25" cy="120" r="25"></circle>
+        </g>
+    </g>
+</svg>

scripts/translate.js

@@ -0,0 +1,102 @@
+/**
+ *  Youdao Translate, My private account is for testing purposes only.
+ *  Please go to the official account to apply for an account. Thank you for your cooperation.
+ *  APP ID：055c2d71f9a05214
+ *  Secret key：ZcpuQxQW3NkQeKVkqrXIKQYXH57g2KuN
+ */
+
+/* eslint-disable */
+const md5 = require('md5')
+const qs = require('qs')
+const fs = require('fs')
+const path = require('path')
+const axios = require('axios')
+const jsonFormat = require('json-format')
+const { i18n } = require('../src/utils/config')
+const { languages, defaultLanguage } = i18n
+
+const locales = {}
+
+languages.forEach(item => {
+  locales[item.key] = require(`../src/locales/${item.key}/messages.json`)
+})
+
+const youdao = ({ q, from, to }) =>
+  new Promise((resolve, reject) => {
+    {
+      const appid = '055c2d71f9a05214'
+      const appse = 'ZcpuQxQW3NkQeKVkqrXIKQYXH57g2KuN'
+      const salt = Date.now()
+
+      const sign = md5(appid + q + salt + appse)
+      const query = qs.stringify({
+        q,
+        from,
+        to,
+        appKey: appid,
+        salt,
+        sign,
+      })
+
+      axios.get(`http://openapi.youdao.com/api?${query}`).then(({ data }) => {
+        if (data.query && data.translation[0]) {
+          resolve(data.translation[0])
+        } else {
+          resolve(q)
+        }
+      })
+    }
+  })
+
+const transform = async ({ from, to, locales, outputPath }) => {
+  for (const key in locales[from]) {
+    if (locales[to][key]) {
+      console.log(`add to skip: ${key}`)
+    } else {
+      let res = key
+      let way = 'youdao'
+      if (key.indexOf('/') !== 0) {
+        res = await youdao({
+          q: key,
+        })
+      } else {
+        res = `/${to + key}`
+        way = 'link'
+      }
+      if (res !== key) {
+        locales[to][key] = res
+        console.log(`${way}: ${from} -> ${to}: ${key} -> ${res}`)
+      } else {
+        console.log(`same: ${from} -> ${to}:  ${key}`)
+      }
+    }
+  }
+  await fs.writeFileSync(
+    path.resolve(__dirname, outputPath),
+    jsonFormat(locales[to], {
+      type: 'space',
+      size: 2,
+    })
+  )
+}
+;(async () => {
+  const tasks = languages
+    .map(item => ({
+      from: defaultLanguage,
+      to: item.key,
+    }))
+    .filter(item => item.from !== item.to)
+
+  for (const item of tasks) {
+    console.log(`start: ${item.from} -> ${item.to}`)
+    await transform({
+      from: item.from,
+      to: item.to,
+      locales,
+      outputPath: `../src/locales/${item.to}/messages.json`,
+    })
+    console.log(`completed: ${item.from} -> ${item.to}`)
+  }
+
+  console.log('All translations have been completed.')
+})()

src/components/DataTable/AnimTableBody.js

@@ -1,67 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { TweenOneGroup } from 'rc-tween-one'
-
-const enterAnim = [
-  {
-    opacity: 0,
-    x: 30,
-    backgroundColor: '#fffeee',
-    duration: 0,
-  }, {
-    height: 0,
-    duration: 200,
-    type: 'from',
-    delay: 250,
-    ease: 'easeOutQuad',
-    onComplete: (e) => {
-      e.target.style.height = 'auto'
-    },
-  }, {
-    opacity: 1,
-    x: 0,
-    duration: 250,
-    ease: 'easeOutQuad',
-  }, {
-    delay: 1000,
-    backgroundColor: '#fff',
-  },
-]
-
-const leaveAnim = [
-  {
-    duration: 250,
-    x: -30,
-    opacity: 0,
-  }, {
-    height: 0,
-    duration: 200,
-    ease: 'easeOutQuad',
-  },
-]
-
-const AnimTableBody = ({ body, page = 1, current }) => {
-  if (current !== +page) {
-    return body
-  }
-
-  return (
-    <TweenOneGroup
-      component="tbody"
-      className={body.props.className}
-      enter={enterAnim}
-      leave={leaveAnim}
-      appear={false}
-    >
-      {body.props.children}
-    </TweenOneGroup>
-  )
-}
-
-AnimTableBody.propTypes = {
-  body: PropTypes.element,
-  page: PropTypes.any,
-  current: PropTypes.number.isRequired,
-}
-
-export default AnimTableBody

src/components/DataTable/DataTable.js

@@ -1,112 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Table } from 'antd'
-import { request } from '../../utils'
-import lodash from 'lodash'
-import './DataTable.less'
-
-class DataTable extends React.Component {
-  constructor (props) {
-    super(props)
-    const { dataSource, pagination = {
-      showSizeChanger: true,
-      showQuickJumper: true,
-      showTotal: total => `共 ${total} 条`,
-      current: 1,
-      total: 100 },
-    } = props
-    this.state = {
-      loading: false,
-      dataSource,
-      fetchData: {},
-      pagination,
-    }
-  }
-
-  componentDidMount () {
-    if (this.props.fetch) {
-      this.fetch()
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const staticNextProps = lodash.cloneDeep(nextProps)
-    delete staticNextProps.columns
-    const { columns, ...otherProps } = this.props
-
-    if (!lodash.isEqual(staticNextProps, otherProps)) {
-      this.props = nextProps
-      this.fetch()
-    }
-  }
-
-  handleTableChange = (pagination, filters, sorter) => {
-    const pager = this.state.pagination
-    pager.current = pagination.current
-    this.setState({
-      pagination: pager,
-      fetchData: {
-        results: pagination.pageSize,
-        page: pagination.current,
-        sortField: sorter.field,
-        sortOrder: sorter.order,
-        ...filters,
-      },
-    }, () => {
-      this.fetch()
-    })
-  }
-
-  fetch = () => {
-    const { fetch: { url, data, dataKey } } = this.props
-    const { fetchData } = this.state
-    this.setState({ loading: true })
-    this.promise = request({
-      url,
-      data: {
-        ...data,
-        ...fetchData,
-      },
-    }).then((result) => {
-      if (!this.refs.DataTable) {
-        return
-      }
-      const { pagination } = this.state
-      pagination.total = result.total || pagination.total
-      this.setState({
-        loading: false,
-        dataSource: dataKey ? result[dataKey] : result.data,
-        pagination,
-      })
-    })
-  }
-
-  render () {
-    const { fetch, ...tableProps } = this.props
-    const { loading, dataSource, pagination } = this.state
-
-    return (<Table
-      ref="DataTable"
-      bordered
-      loading={loading}
-      onChange={this.handleTableChange}
-      {...tableProps}
-      pagination={pagination}
-      dataSource={dataSource}
-    />)
-  }
-}
-
-
-DataTable.propTypes = {
-  fetch: PropTypes.object,
-  rowKey: PropTypes.string,
-  pagination: React.PropTypes.oneOfType([
-    React.PropTypes.bool,
-    React.PropTypes.object,
-  ]),
-  columns: PropTypes.array,
-  dataSource: PropTypes.array,
-}
-
-export default DataTable

src/components/DataTable/package.json

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

src/components/DropOption/DropOption.js

@@ -2,17 +2,26 @@ 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>)
+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 = {

src/components/Editor/Editor.js

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

src/components/Editor/Editor.less

@@ -10,6 +10,9 @@
       box-sizing: content-box;
       width: 100%;
       border-radius: 0 0 2px 2px;
+      &:hover {
+        box-shadow: none;
+      }
     }
 
     .rdw-inline-wrapper {
@@ -25,12 +28,6 @@
       box-shadow: 1px 1px 0 #e8e8e8 inset;
     }
 
-    .rdw-dropdown-optionwrapper {
-      &:hover {
-        box-shadow: none;
-      }
-    }
-
     .rdw-colorpicker-option {
       box-shadow: none;
     }
@@ -100,12 +97,10 @@
   }
 
   .editor {
-    border: 1px solid #F1F1F1;
+    border: 1px solid #f1f1f1;
     padding: 5px;
     border-radius: 2px;
     height: auto;
     min-height: 200px;
   }
-
-  .toolbar {}
 }

src/components/FilterItem/FilterItem.js

@@ -2,21 +2,22 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './FilterItem.less'
 
-const FilterItem = ({
-  label = '',
-  children,
-}) => {
+const FilterItem = ({ label = '', children }) => {
   const labelArray = label.split('')
   return (
     <div className={styles.filterItem}>
-      {labelArray.length > 0
-        ? <div className={styles.labelWrap}>
-            {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
-          </div>
-        : ''}
-      <div className={styles.item}>
-        {children}
-      </div>
+      {labelArray.length > 0 ? (
+        <div className={styles.labelWrap}>
+          {labelArray.map((item, index) => (
+            <span className="labelText" key={index}>
+              {item}
+            </span>
+          ))}
+        </div>
+      ) : (
+        ''
+      )}
+      <div className={styles.item}>{children}</div>
     </div>
   )
 }

src/components/Iconfont/Iconfont.js

@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import './iconfont.less'
-
-const Iconfont = ({ type }) => <span
-  dangerouslySetInnerHTML={{
-    __html: `<svg class="iconfont" aria-hidden="true"><use xlink:href="#anticon-${type}"></use></svg>`,
-  }}
-/>
-
-Iconfont.propTypes = {
-  type: PropTypes.string,
-}
-
-export default Iconfont

src/components/Iconfont/iconfont.less

@@ -1,8 +0,0 @@
-:global .iconfont {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-  font-size: 16px;
-}

src/components/Iconfont/package.json

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

src/components/Layout/Bread.js

@@ -1,68 +1,66 @@
-import React from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
-import { Link } from 'dva/router'
+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'
-import pathToRegexp from 'path-to-regexp'
-import { queryArray } from '../../utils'
 
-const Bread = ({ menu }) => {
-  // 匹配当前路由
-  let pathArray = []
-  let current
-  for (let index in menu) {
-    if (menu[index].router && pathToRegexp(menu[index].router).exec(location.pathname)) {
-      current = menu[index]
-      break
-    }
-  }
+@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>
+      )
 
-  const getPathArray = (item) => {
-    pathArray.unshift(item)
-    if (item.bpid) {
-      getPathArray(queryArray(menu, item.bpid, 'id'))
-    }
-  }
-
-  if (!current) {
-    pathArray.push(menu[0])
-    pathArray.push({
-      id: 404,
-      name: 'Not Found',
+      return (
+        <Breadcrumb.Item key={key}>
+          {paths.length - 1 !== key ? (
+            <Link to={item.route || '#'}>{content}</Link>
+          ) : (
+            content
+          )}
+        </Breadcrumb.Item>
+      )
     })
-  } else {
-    getPathArray(current)
   }
+  render() {
+    const { routeList, location, i18n } = this.props
 
-  // 递归查找父级
-  const breads = pathArray.map((item, key) => {
-    const content = (
-      <span>{item.icon
-          ? <Icon type={item.icon} style={{ marginRight: 4 }} />
-          : ''}{item.name}</span>
+    // 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.Item key={key}>
-        {((pathArray.length - 1) !== key)
-          ? <Link to={item.router}>
-              {content}
-          </Link>
-          : content}
-      </Breadcrumb.Item>
-    )
-  })
-
-  return (
-    <div className={styles.bread}>
-      <Breadcrumb>
-        {breads}
+      <Breadcrumb className={styles.bread}>
+        {this.generateBreadcrumbs(paths)}
       </Breadcrumb>
-    </div>
-  )
+    )
+  }
 }
 
 Bread.propTypes = {
-  menu: PropTypes.array,
+  routeList: PropTypes.array,
 }
 
 export default Bread

src/components/Layout/Bread.less

@@ -1,8 +1,16 @@
-@import "../../themes/vars.less";
-
 .bread {
-  height: 64px;
-  line-height: 64px;
-  padding: 0 24px;
-  margin-bottom: -24px;
+  margin-bottom: 24px;
+
+  :global {
+    .ant-breadcrumb {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .bread {
+    margin-bottom: 12px;
+  }
 }

src/components/Layout/Footer.js

@@ -1,9 +0,0 @@
-import React from 'react'
-import styles from './Footer.less'
-import { config } from '../../utils'
-
-const Footer = () => <div className={styles.footer}>
-  {config.footerText}
-</div>
-
-export default Footer

src/components/Layout/Footer.less

@@ -1,12 +0,0 @@
-@import "../../themes/vars.less";
-
-.footer {
-  height: 48px;
-  line-height: 48px;
-  text-align: center;
-  font-size: 12px;
-  color: #999;
-  background: #fff;
-  box-shadow: @shadow-2;
-  width: 100%;
-}

src/components/Layout/Header.js

@@ -1,66 +1,174 @@
-import React from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon, Popover } from 'antd'
+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'
-import Menus from './Menu'
 
-const SubMenu = Menu.SubMenu
+const { SubMenu } = Menu
 
-function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu }) {
-  let handleClickMenu = e => e.key === 'logout' && logout()
-  const menusProps = {
-    menu,
-    siderFold: false,
-    darkTheme: false,
-    isNavbar,
-    handleClickNavMenu: switchMenuPopover,
-    location,
-    navOpenKeys,
-    changeOpenKeys,
+@withI18n()
+class Header extends PureComponent {
+  handleClickMenu = e => {
+    e.key === 'SignOut' && this.props.onSignOut()
   }
-  return (
-    <div className={styles.header}>
-      {isNavbar
-        ? <Popover placement="bottomLeft" onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger="click" content={<Menus {...menusProps} />}>
-          <div className={styles.button}>
-            <Icon type="bars" />
-          </div>
-        </Popover>
-        : <div className={styles.button} onClick={switchSider}>
-          <Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />
-        </div>}
-      <div className={styles.rightWarpper}>
-        <div className={styles.button}>
-          <Icon type="mail" />
-        </div>
-        <Menu mode="horizontal" onClick={handleClickMenu}>
-          <SubMenu style={{
-            float: 'right',
-          }} title={< span > <Icon type="user" />
-            {user.username} < /span>}
-          >
-            <Menu.Item key="logout">
-              Sign out
-            </Menu.Item>
+  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>
-      </div>
-    </div>
-  )
+      )
+    }
+
+    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 = {
-  menu: PropTypes.array,
+  fixed: PropTypes.bool,
   user: PropTypes.object,
-  logout: PropTypes.func,
-  switchSider: PropTypes.func,
-  siderFold: PropTypes.bool,
-  isNavbar: PropTypes.bool,
-  menuPopoverVisible: PropTypes.bool,
-  location: PropTypes.object,
-  switchMenuPopover: PropTypes.func,
-  navOpenKeys: PropTypes.array,
-  changeOpenKeys: PropTypes.func,
+  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,28 +1,79 @@
-@import "../../themes/vars.less";
+@import '~themes/vars.less';
 
 .header {
-  :global .ant-menu-horizontal {
-    & > .ant-menu-submenu {
-      float: right;
-    }
-    border: none;
-    display: inline-block;
-  }
+  padding: 0;
   box-shadow: @shadow-2;
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: 47px;
+  height: 72px;
+  z-index: 9;
+  align-items: center;
   background-color: #fff;
 
-  .rightWarpper {
+  &.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: 47px;
-    height: 47px;
-    line-height: 47px;
+    width: 72px;
+    height: 72px;
+    line-height: 72px;
     text-align: center;
     font-size: 18px;
     cursor: pointer;
@@ -30,28 +81,74 @@
 
     &:hover {
       color: @primary-color;
-      background-color: fade(@primary-color, 15%);
+      background-color: @hover-color;
     }
   }
 }
 
-.popovermenu {
-  width: 280px;
-  margin-left: 6px;
+.iconButton {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  cursor: pointer;
+  .background-hover();
 
-  :global .ant-popover-inner-content {
-    padding: 0;
-
-    .ant-menu-inline .ant-menu-item,
-    .ant-menu-vertical .ant-menu-item {
-      border-right: 0;
-      height: 48px;
-      line-height: 48px;
+  &:hover {
+    .iconFont {
+      color: @primary-color;
     }
+  }
 
-    .ant-menu-inline .ant-menu-item-selected,
-    .ant-menu-inline .ant-menu-selected {
-      border-right: 0;
+  & + .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/Layout.less

@@ -1,293 +0,0 @@
-@import "../../themes/vars.less";
-
-.layout {
-  position: relative;
-  height: 100vh;
-
-  &.withnavbar {
-    .main {
-      margin-left: 0;
-    }
-  }
-
-  &.fold {
-    .sider {
-      width: 42px;
-
-      .logo {
-        img {
-          width: 28px;
-          margin: 6px 7px;
-        }
-      }
-
-      :global {
-        .ant-menu-root {
-          width: 100%;
-          overflow: visible;
-
-          & > .ant-menu-item {
-            padding: 0;
-            text-align: center;
-
-            .anticon {
-              font-size: 14px;
-              margin-right: 0;
-            }
-          }
-
-          & > .ant-menu-submenu {
-            & > .ant-menu-submenu-title {
-              padding: 0;
-              text-align: center;
-
-              .anticon {
-                font-size: 14px;
-                margin-right: 0;
-              }
-
-              &::after {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .main {
-      margin-left: 42px;
-    }
-  }
-
-  .sider {
-    width: 224px;
-    background: #3e3e3e;
-    position: absolute;
-    overflow: visible;
-    padding-bottom: 24px;
-    height: 100vh;
-    transition: @transition-ease-out;
-    box-shadow: @shadow-1;
-    z-index: 520;
-    color: #999;
-
-    &.light {
-      background: #fff;
-
-      .switchtheme {
-        background: #fff;
-        border-top: solid 1px #f8f8f8;
-      }
-    }
-
-    .logo {
-      text-align: center;
-      height: 40px;
-      line-height: 40px;
-      cursor: pointer;
-      margin: 28px 0;
-      transition: @transition-ease-out;
-      overflow: hidden;
-
-      img {
-        width: 40px;
-        margin-right: 8px;
-        transition: @transition-ease-out;
-      }
-
-      span {
-        vertical-align: text-bottom;
-        font-size: 16px;
-        text-transform: uppercase;
-        display: inline-block;
-      }
-
-      .anticon {
-        transition: @transition-ease-out;
-      }
-    }
-
-    .switchtheme {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      height: 48px;
-      background-color: @dark-half;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 16px 0 24px;
-      overflow: hidden;
-      z-index: 1000;
-
-      span {
-        white-space: nowrap;
-        overflow: hidden;
-      }
-
-      :global {
-        .anticon {
-          min-width: 14px;
-          margin-right: 8px;
-          font-size: 14px;
-        }
-      }
-    }
-
-    :global {
-      .ant-menu-dark,
-      .ant-menu-dark .ant-menu-sub {
-        color: #999;
-      }
-
-      .ant-menu-root {
-        height: ~"calc(100vh - 144px)";
-        overflow-x: hidden;
-        border-right: none;
-
-        &::-webkit-scrollbar-thumb {
-          background-color: transparent;
-        }
-
-        &:hover {
-          &::-webkit-scrollbar-thumb {
-            background-color: rgba(0, 0, 0, 0.2);
-          }
-        }
-
-        &.ant-menu-vertical {
-          .ant-menu-sub {
-            height: 0;
-            opacity: 0;
-            transition: none;
-          }
-
-          .ant-menu-submenu-active {
-            .ant-menu-sub {
-              height: auto;
-              opacity: 1;
-            }
-          }
-        }
-      }
-
-      .ant-menu {
-        transition: @transition-ease-out;
-
-        .ant-menu-item,
-        .ant-menu-submenu-title {
-          overflow: hidden;
-          white-space: normal;
-        }
-      }
-    }
-  }
-
-  .main {
-    margin-left: 224px;
-    overflow: auto;
-    height: 100vh;
-    transition: @transition-ease-out;
-
-    :global {
-      .content-inner {
-        background: #fff;
-        padding: 24px;
-        box-shadow: @shadow-1;
-        min-height: e("calc(100vh - 184px)");
-      }
-    }
-
-    .container {
-      margin: 24px;
-    }
-
-    .content {
-      min-height: e("calc(100vh - 184px)");
-      position: relative;
-    }
-  }
-}
-
-:global .ant-menu-dark {
-  color: #999;
-  background-color: #3e3e3e;
-
-  .ant-menu-submenu-title:hover,
-  .ant-menu-submenu:hover {
-    color: @primary-color;
-  }
-
-  .ant-menu-sub {
-    color: #999;
-  }
-
-  .ant-menu-submenu-selected {
-    color: @primary-color;
-
-    &:not(.ant-menu-submenu-open) {
-      background-color: @dark-half;
-    }
-  }
-
-  .ant-menu-item,
-  .ant-menu-submenu-title {
-    & > a {
-      color: #999;
-    }
-
-    &:hover > a {
-      color: @primary-color;
-    }
-  }
-
-  &.ant-menu-inline {
-    .ant-menu-item-selected {
-      background-color: @dark-half;
-    }
-  }
-
-  .ant-menu-item-selected {
-    color: @primary-color;
-    background-color: @dark-half;
-
-    & > a {
-      color: @primary-color;
-    }
-
-    &:hover {
-      background-color: @dark-half;
-    }
-  }
-}
-
-.spin {
-  :global .ant-spin-container {
-    height: 100vh;
-  }
-}
-@media (max-width: 767px) {
-  .layout {
-    .main {
-      .container {
-        margin: 12px;
-      }
-
-      .bread {
-        padding: 0 12px;
-      }
-
-      .content {
-        min-height: e("calc(100vh - 160px)");
-      }
-
-      :global {
-        .content-inner {
-          padding: 12px;
-          min-height: e("calc(100vh - 160px)");
-        }
-      }
-    }
-  }
-}

src/components/Layout/Menu.js

@@ -1,129 +1,122 @@
-import React from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
-import { Link } from 'dva/router'
-import { arrayToTree, queryArray } from '../../utils'
-import pathToRegexp from 'path-to-regexp'
+import Navlink from 'umi/navlink'
+import withRouter from 'umi/withRouter'
+import {
+  arrayToTree,
+  queryAncestors,
+  pathMatchRegexp,
+  addLangPrefix,
+} from 'utils'
+import store from 'store'
 
-const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
-  // 生成树状
-  const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1), 'id', 'mpid')
-  const levelMap = {}
+const { SubMenu } = Menu
 
-  // 递归生成菜单
-  const getMenus = (menuTreeN, siderFoldN) => {
-    return menuTreeN.map(item => {
+@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) {
-        if (item.mpid) {
-          levelMap[item.id] = item.mpid
-        }
         return (
-          <Menu.SubMenu
+          <SubMenu
             key={item.id}
-            title={<span>
-              {item.icon && <Icon type={item.icon} />}
-              {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
-            </span>}
+            title={
+              <Fragment>
+                {item.icon && <Icon type={item.icon} />}
+                <span>{item.name}</span>
+              </Fragment>
+            }
           >
-            {getMenus(item.children, siderFoldN)}
-          </Menu.SubMenu>
+            {this.generateMenus(item.children)}
+          </SubMenu>
         )
       }
       return (
         <Menu.Item key={item.id}>
-          <Link to={item.router}>
+          <Navlink to={addLangPrefix(item.route) || '#'}>
             {item.icon && <Icon type={item.icon} />}
-            {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
-          </Link>
+            <span>{item.name}</span>
+          </Navlink>
         </Menu.Item>
       )
     })
   }
-  const menuItems = getMenus(menuTree, siderFold)
 
-  // 保持选中
-  const getAncestorKeys = (key) => {
-    let map = {}
-    const getParent = (index) => {
-      const result = [String(levelMap[index])]
-      if (levelMap[result[0]]) {
-        result.unshift(getParent(result[0])[0])
-      }
-      return result
-    }
-    for (let index in levelMap) {
-      if ({}.hasOwnProperty.call(levelMap, index)) {
-        map[index] = getParent(index)
-      }
-    }
-    return map[key] || []
+  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>
+    )
   }
-
-  const onOpenChange = (openKeys) => {
-    const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1))
-    const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1))
-    let nextOpenKeys = []
-    if (latestOpenKey) {
-      nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)
-    }
-    if (latestCloseKey) {
-      nextOpenKeys = getAncestorKeys(latestCloseKey)
-    }
-    changeOpenKeys(nextOpenKeys)
-  }
-
-  let menuProps = !siderFold ? {
-    onOpenChange,
-    openKeys: navOpenKeys,
-  } : {}
-
-
-  // 寻找选中路由
-  let currentMenu
-  let defaultSelectedKeys
-  for (let item of menu) {
-    if (item.router && pathToRegexp(item.router).exec(location.pathname)) {
-      currentMenu = item
-      break
-    }
-  }
-  const getPathArray = (array, current, pid, id) => {
-    let result = [String(current[id])]
-    const getPath = (item) => {
-      if (item && item[pid]) {
-        result.unshift(String(item[pid]))
-        getPath(queryArray(array, item[pid], id))
-      }
-    }
-    getPath(current)
-    return result
-  }
-  if (currentMenu) {
-    defaultSelectedKeys = getPathArray(menu, currentMenu, 'mpid', 'id')
-  }
-
-  return (
-    <Menu
-      {...menuProps}
-      mode={siderFold ? 'vertical' : 'inline'}
-      theme={darkTheme ? 'dark' : 'light'}
-      onClick={handleClickNavMenu}
-      defaultSelectedKeys={defaultSelectedKeys}
-    >
-      {menuItems}
-    </Menu>
-  )
 }
 
-Menus.propTypes = {
-  menu: PropTypes.array,
-  siderFold: PropTypes.bool,
-  darkTheme: PropTypes.bool,
-  location: PropTypes.object,
-  isNavbar: PropTypes.bool,
-  handleClickNavMenu: PropTypes.func,
-  navOpenKeys: PropTypes.array,
-  changeOpenKeys: PropTypes.func,
+SiderMenu.propTypes = {
+  menus: PropTypes.array,
+  theme: PropTypes.string,
+  isMobile: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onCollapseChange: PropTypes.func,
 }
 
-export default Menus
+export default SiderMenu

src/components/Layout/Sider.js

@@ -1,42 +1,88 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Switch } from 'antd'
-import styles from './Layout.less'
-import { config } from '../../utils'
-import Menus from './Menu'
+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'
 
-function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) {
-  const menusProps = {
-    menu,
-    siderFold,
-    darkTheme,
-    location,
-    navOpenKeys,
-    changeOpenKeys,
+@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>
+    )
   }
-  return (
-    <div>
-      <div className={styles.logo}>
-        <img alt={'logo'} src={config.logo} />
-        {siderFold ? '' : <span>{config.name}</span>}
-      </div>
-      <Menus {...menusProps} />
-      {!siderFold ? <div className={styles.switchtheme}>
-        <span><Icon type="bulb" />Switch Theme</span>
-        <Switch onChange={changeTheme} defaultChecked={darkTheme} checkedChildren="Dark" unCheckedChildren="Light" />
-      </div> : ''}
-    </div>
-  )
 }
 
 Sider.propTypes = {
-  menu: PropTypes.array,
-  siderFold: PropTypes.bool,
-  darkTheme: PropTypes.bool,
-  location: PropTypes.object,
-  changeTheme: PropTypes.func,
-  navOpenKeys: PropTypes.array,
-  changeOpenKeys: PropTypes.func,
+  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 +1,110 @@
-@import "../../themes/vars.less";
+@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

@@ -2,7 +2,5 @@ import Header from './Header'
 import Menu from './Menu'
 import Bread from './Bread'
 import Sider from './Sider'
-import Footer from './Footer'
-import styles from './Layout.less'
 
-export { Header, Menu, Bread, Sider, Footer, styles }
+export { Header, Menu, Bread, Sider }

src/components/Loader/Loader.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from './Loader.less'
+
+const Loader = ({ spinning = true, fullScreen }) => {
+  return (
+    <div
+      className={classNames(styles.loader, {
+        [styles.hidden]: !spinning,
+        [styles.fullScreen]: fullScreen,
+      })}
+    >
+      <div className={styles.warpper}>
+        <div className={styles.inner} />
+        <div className={styles.text}>LOADING</div>
+      </div>
+    </div>
+  )
+}
+
+Loader.propTypes = {
+  spinning: PropTypes.bool,
+  fullScreen: PropTypes.bool,
+}
+
+export default Loader

src/components/Loader/Loader.less

@@ -0,0 +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);
+  }
+}

src/components/Loader/package.json

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

src/components/Page/Page.js

@@ -0,0 +1,33 @@
+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/Page.less

@@ -0,0 +1,16 @@
+@import '~themes/vars.less';
+
+.contentInner {
+  background: #fff;
+  padding: 24px;
+  box-shadow: @shadow-1;
+  min-height: ~'calc(100vh - 230px)';
+  position: relative;
+}
+
+@media (max-width: 767px) {
+  .contentInner {
+    padding: 12px;
+    min-height: ~'calc(100vh - 160px)';
+  }
+}

src/components/Page/package.json

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

src/components/ScrollBar/index.js

@@ -0,0 +1,5 @@
+import ScrollBar from 'react-perfect-scrollbar'
+import 'react-perfect-scrollbar/dist/css/styles.css'
+import './index.less'
+
+export default ScrollBar

src/components/ScrollBar/index.less

@@ -0,0 +1,31 @@
+:global {
+  .ps--active-x > .ps__rail-x,
+  .ps--active-y > .ps__rail-y {
+    background-color: transparent;
+  }
+
+  .ps__rail-x:hover > .ps__thumb-x,
+  .ps__rail-x:focus > .ps__thumb-x {
+    height: 8px;
+  }
+
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y {
+    width: 8px;
+  }
+
+  .ps__rail-y,
+  .ps__rail-x {
+    z-index: 9;
+  }
+
+  .ps__thumb-y {
+    width: 4px;
+    right: 4px;
+  }
+
+  .ps__thumb-x {
+    height: 4px;
+    bottom: 4px;
+  }
+}

src/components/Search/Search.js

@@ -1,67 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactDOM from 'react-dom'
-import styles from './Search.less'
-import { Input, Select, Button, Icon } from 'antd'
-
-class Search extends React.Component {
-  state = {
-    clearVisible: false,
-    selectValue: (this.props.select && this.props.selectProps) ? this.props.selectProps.defaultValue : '',
-  }
-  handleSearch = () => {
-    const data = {
-      keyword: ReactDOM.findDOMNode(this.refs.searchInput).value,
-    }
-    if (this.props.select) {
-      data.field = this.state.selectValue
-    }
-    if (this.props.onSearch) this.props.onSearch(data)
-  }
-  handleInputChange = e => {
-    this.setState({
-      ...this.state,
-      clearVisible: e.target.value !== '',
-    })
-  }
-  handeleSelectChange = value => {
-    this.setState({
-      ...this.state,
-      selectValue: value,
-    })
-  }
-  handleClearInput = () => {
-    ReactDOM.findDOMNode(this.refs.searchInput).value = ''
-    this.setState({
-      clearVisible: false,
-    })
-    this.handleSearch()
-  }
-  render () {
-    const { size, select, selectOptions, selectProps, style, keyword } = this.props
-    const { clearVisible } = this.state
-    return (
-      <Input.Group compact size={size} className={styles.search} style={style}>
-        {select && <Select ref="searchSelect" onChange={this.handeleSelectChange} size={size} {...selectProps}>
-          {selectOptions && selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
-        </Select>}
-        <Input ref="searchInput" size={size} onChange={this.handleInputChange} onPressEnter={this.handleSearch} defaultValue={keyword} />
-        <Button size={size} type="primary" onClick={this.handleSearch}>搜索</Button>
-        {clearVisible && <Icon type="cross" onClick={this.handleClearInput} />}
-      </Input.Group>
-    )
-  }
-}
-
-
-Search.propTypes = {
-  size: PropTypes.string,
-  select: PropTypes.bool,
-  selectProps: PropTypes.object,
-  onSearch: PropTypes.func,
-  selectOptions: PropTypes.array,
-  style: PropTypes.object,
-  keyword: PropTypes.string,
-}
-
-export default Search

src/components/Search/Search.less

@@ -1,55 +0,0 @@
-.no-highlight() {
-  border-color: #e5e5e5;
-  box-shadow: none;
-}
-
-.search {
-  display: flex;
-  width: 100%;
-  position: relative;
-
-  :global {
-    .anticon-cross {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      right: 84px;
-      cursor: pointer;
-      color: #fff;
-      line-height: 18px;
-      border-radius: 50%!important;
-      background-color: rgba(0, 0, 0, .16);
-      top: 7px;
-      // opacity:
-    }
-
-    .ant-select {
-      width: 80px;
-      flex-shrink: 0;
-      flex-grow: 0;
-
-      &.ant-select-focused .ant-select-selection,
-      &.ant-select-open .ant-select-selection,
-      .ant-select-selection:active,
-      .ant-select-selection:focus,
-      .ant-select-selection:hover {
-        .no-highlight();
-      }
-    }
-
-    .ant-input {
-      &:focus,
-      &:hover {
-        .no-highlight();
-      }
-      flex-shrink: 1;
-      flex-grow: 1;
-    }
-
-    .ant-btn {
-      width: 80px;
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-  }
-}

src/components/index.js

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

src/components/layer/layer.js

@@ -1,83 +0,0 @@
-import { Modal, message } from 'antd'
-import React from 'react'
-import ReactDOM from 'react-dom'
-import classnames from 'classnames'
-import styles from './layer.less'
-const { info, success, error, warning, confirm } = Modal
-
-const layer = {
-  prefixCls: 'ant-layer',
-  index: 1,
-  info,
-  success,
-  error,
-  warning,
-  confirm,
-}
-
-layer.close = (index) => new Promise((resolve, reject) => {
-  const { prefixCls } = layer
-  let div = document.getElementById(`${prefixCls}-reference-${index}`)
-  if (index === undefined) {
-    const references = document.querySelectorAll(`.${prefixCls}-reference`)
-    div = references[references.length - 1]
-  }
-  if (!div) {
-    message.error('关闭失败，未找到Dom')
-    return
-  }
-  const unmountResult = ReactDOM.unmountComponentAtNode(div)
-  if (unmountResult && div.parentNode) {
-    div.parentNode.removeChild(div)
-    resolve(index)
-  } else {
-    reject(index)
-  }
-})
-
-layer.closeAll = () => {
-  const { prefixCls } = layer
-  const references = document.querySelectorAll(`.${prefixCls}-reference`)
-  let i = 0
-  while (i < references.length) {
-    layer.close()
-    i++
-  }
-}
-
-layer.open = (config) => {
-  const props = Object.assign({}, config)
-  const { content, ...modalProps } = props
-  const { className, wrapClassName = '', verticalCenter = true } = modalProps
-  const { prefixCls } = layer
-  const index = layer.index++
-  let div = document.createElement('div')
-  div.id = `${prefixCls}-reference-${index}`
-  div.className = `${prefixCls}-reference`
-  document.body.appendChild(div)
-
-  ReactDOM.render(
-    <Modal
-      visible
-      title="Title"
-      transitionName="zoom"
-      maskTransitionName="fade"
-      onCancel={() => {
-        layer.close(index)
-      }}
-      onOk={() => {
-        layer.close(index)
-      }}
-      {...modalProps}
-      wrapClassName={classnames({ [styles.verticalCenter]: verticalCenter, [wrapClassName]: true })}
-      className={classnames(prefixCls, className, [`${prefixCls}-${index}`])}
-    >
-      <div className={`${prefixCls}-body-wrapper`} style={{ maxHeight: document.body.clientHeight - 256 }}>
-        {content}
-      </div>
-    </Modal>, div)
-
-  return index
-}
-
-export default layer

src/components/layer/layer.less

@@ -1,14 +0,0 @@
-.verticalCenter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  :global .ant-modal {
-    top: 0;
-    padding-bottom: 0;
-
-    .ant-modal-body {
-      overflow-y: auto;
-    }
-  }
-}

src/e2e/login.e2e.js

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

src/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <link rel="stylesheet" href="/index.css" />
-  <!--[if lte IE 10]>
-      <script
-        src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
-  <![endif]-->
-</head>
-
-<body>
-  <div id="root"></div>
-  <script src="/index.js"></script>
-</body>
-
-</html>

src/index.js

@@ -1,24 +0,0 @@
-import './index.html'
-import 'babel-polyfill'
-import dva from 'dva'
-import createLoading from 'dva-loading'
-import { browserHistory } from 'dva/router'
-import { message } from 'antd'
-
-// 1. Initialize
-const app = dva({
-  ...createLoading(),
-  history: browserHistory,
-  onError (error) {
-    message.error(error.message)
-  },
-})
-
-// 2. Model
-app.model(require('./models/app'))
-
-// 3. Router
-app.router(require('./router'))
-
-// 4. Start
-app.start('#root')

src/layouts/BaseLayout.js

@@ -0,0 +1,55 @@
+import React, { PureComponent, Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'dva'
+import { Helmet } from 'react-helmet'
+import { Loader } from 'components'
+import { queryLayout } from 'utils'
+import NProgress from 'nprogress'
+import config from 'utils/config'
+import withRouter from 'umi/withRouter'
+
+import PublicLayout from './PublicLayout'
+import PrimaryLayout from './PrimaryLayout'
+import './BaseLayout.less'
+
+const LayoutMap = {
+  primary: PrimaryLayout,
+  public: PublicLayout,
+}
+
+@withRouter
+@connect(({ loading }) => ({ loading }))
+class BaseLayout extends PureComponent {
+  previousPath = ''
+
+  render() {
+    const { loading, children, location } = this.props
+    const Container = LayoutMap[queryLayout(config.layouts, location.pathname)]
+
+    const currentPath = location.pathname + location.search
+    if (currentPath !== this.previousPath) {
+      NProgress.start()
+    }
+
+    if (!loading.global) {
+      NProgress.done()
+      this.previousPath = currentPath
+    }
+
+    return (
+      <Fragment>
+        <Helmet>
+          <title>{config.siteName}</title>
+        </Helmet>
+        <Loader fullScreen spinning={loading.effects['app/query']} />
+        <Container>{children}</Container>
+      </Fragment>
+    )
+  }
+}
+
+BaseLayout.propTypes = {
+  loading: PropTypes.object,
+}
+
+export default BaseLayout

src/layouts/BaseLayout.less

@@ -0,0 +1,74 @@
+@import '~themes/vars.less';
+@import '~themes/index.less';
+
+:global {
+  #nprogress {
+    pointer-events: none;
+
+    .bar {
+      background: @primary-color;
+      position: fixed;
+      z-index: 2048;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 2px;
+    }
+
+    .peg {
+      display: block;
+      position: absolute;
+      right: 0;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+      opacity: 1;
+      transform: rotate(3deg) translate(0, -4px);
+    }
+
+    .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+
+    .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: @primary-color;
+      border-left-color: @primary-color;
+      border-radius: 50%;
+
+      :local {
+        animation: nprogress-spinner 400ms linear infinite;
+      }
+    }
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+
+    #nprogress {
+      .bar,
+      .spinner {
+        position: absolute;
+      }
+    }
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/layouts/PrimaryLayout.js

@@ -0,0 +1,169 @@
+/* global window */
+/* global document */
+import React, { PureComponent, Fragment } from 'react'
+import PropTypes from 'prop-types'
+import withRouter from 'umi/withRouter'
+import { connect } from 'dva'
+import { MyLayout } from 'components'
+import { BackTop, Layout, Drawer } from 'antd'
+import { GlobalFooter } from 'ant-design-pro'
+import { enquireScreen, unenquireScreen } from 'enquire-js'
+import { config, pathMatchRegexp, langFromPath } from 'utils'
+import Error from '../pages/404'
+import styles from './PrimaryLayout.less'
+
+const { Content } = Layout
+const { Header, Bread, Sider } = MyLayout
+
+@withRouter
+@connect(({ app, loading }) => ({ app, loading }))
+class PrimaryLayout extends PureComponent {
+  state = {
+    isMobile: false,
+  }
+
+  componentDidMount() {
+    this.enquireHandler = enquireScreen(mobile => {
+      const { isMobile } = this.state
+      if (isMobile !== mobile) {
+        this.setState({
+          isMobile: mobile,
+        })
+      }
+    })
+  }
+
+  componentWillUnmount() {
+    unenquireScreen(this.enquireHandler)
+  }
+
+  onCollapseChange = collapsed => {
+    this.props.dispatch({
+      type: 'app/handleCollapseChange',
+      payload: collapsed,
+    })
+  }
+
+  render() {
+    const { app, location, dispatch, children } = this.props
+    const {
+      user,
+      theme,
+      routeList,
+      collapsed,
+      permissions,
+      notifications,
+    } = app
+    const { isMobile } = this.state
+    const { onCollapseChange } = this
+
+    // Localized route name.
+    const newRouteList =
+      langFromPath(location.pathname) === 'zh'
+        ? routeList.map(item => {
+            const { zhName, ...other } = item
+            return {
+              ...other,
+              name: zhName,
+            }
+          })
+        : routeList
+
+    // Find a route that matches the pathname.
+    const currentRoute = newRouteList.find(
+      _ => _.route && pathMatchRegexp(_.route, location.pathname)
+    )
+
+    // Query whether you have permission to enter this page
+    const hasPermission = currentRoute
+      ? permissions.visit.includes(currentRoute.id)
+      : false
+
+    // MenuParentId is equal to -1 is not a available menu.
+    const menus = newRouteList.filter(_ => _.menuParentId !== '-1')
+
+    const headerProps = {
+      menus,
+      collapsed,
+      notifications,
+      onCollapseChange,
+      avatar: user.avatar,
+      username: user.username,
+      fixed: config.fixedHeader,
+      onAllNotificationsRead() {
+        dispatch({ type: 'app/allNotificationsRead' })
+      },
+      onSignOut() {
+        dispatch({ type: 'app/signOut' })
+      },
+    }
+
+    const siderProps = {
+      theme,
+      menus,
+      isMobile,
+      collapsed,
+      onCollapseChange,
+      onThemeChange(theme) {
+        dispatch({
+          type: 'app/handleThemeChange',
+          payload: theme,
+        })
+      },
+    }
+
+    return (
+      <Fragment>
+        <Layout>
+          {isMobile ? (
+            <Drawer
+              maskClosable
+              closable={false}
+              onClose={onCollapseChange.bind(this, !collapsed)}
+              visible={!collapsed}
+              placement="left"
+              width={200}
+              style={{
+                padding: 0,
+                height: '100vh',
+              }}
+            >
+              <Sider {...siderProps} collapsed={false} />
+            </Drawer>
+          ) : (
+            <Sider {...siderProps} />
+          )}
+          <div
+            className={styles.container}
+            style={{ paddingTop: config.fixedHeader ? 72 : 0 }}
+            id="primaryLayout"
+          >
+            <Header {...headerProps} />
+            <Content className={styles.content}>
+              <Bread routeList={newRouteList} />
+              {hasPermission ? children : <Error />}
+            </Content>
+            <BackTop
+              className={styles.backTop}
+              target={() => document.querySelector('#primaryLayout>div')}
+            />
+            <GlobalFooter
+              className={styles.footer}
+              copyright={config.copyright}
+            />
+          </div>
+        </Layout>
+      </Fragment>
+    )
+  }
+}
+
+PrimaryLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+  location: PropTypes.object,
+  dispatch: PropTypes.func,
+  app: PropTypes.object,
+  loading: PropTypes.object,
+}
+
+export default PrimaryLayout

src/layouts/PrimaryLayout.less

@@ -0,0 +1,58 @@
+@import '~themes/vars.less';
+
+.backTop {
+  right: 50px;
+
+  :global {
+    .ant-back-top-content {
+      background: @primary-color;
+      opacity: 0.3;
+      transition: all 0.3s;
+      box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.1);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.content {
+  padding: 24px;
+  min-height: ~'calc(100% - 72px)';
+  // overflow-y: scroll;
+}
+
+.container {
+  height: 100vh;
+  flex: 1;
+  width: ~'calc(100% - 256px)';
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.footer {
+  background: #fff;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  min-height: 72px;
+}
+
+@media (max-width: 767px) {
+  .content {
+    padding: 12px;
+  }
+
+  .backTop {
+    right: 20px;
+    bottom: 20px;
+  }
+
+  .container {
+    height: 100vh;
+    flex: 1;
+    width: 100%;
+  }
+}

src/layouts/PublicLayout.js

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

src/layouts/index.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import withRouter from 'umi/withRouter'
+import { LocaleProvider } from 'antd'
+import { I18nProvider } from '@lingui/react'
+import { langFromPath, defaultLanguage } from 'utils'
+import zh_CN from 'antd/lib/locale-provider/zh_CN'
+import en_US from 'antd/lib/locale-provider/en_US'
+
+import BaseLayout from './BaseLayout'
+
+const languages = {
+  zh: zh_CN,
+  en: en_US,
+}
+
+@withRouter
+class Layout extends Component {
+  state = {
+    catalogs: {},
+  }
+
+  language = defaultLanguage
+
+  componentDidMount() {
+    const language = langFromPath(this.props.location.pathname)
+    this.language = language
+    this.loadCatalog(language)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const language = langFromPath(nextProps.location.pathname)
+    const preLanguage = this.language
+    const { catalogs } = nextState
+
+    if (preLanguage !== language && !catalogs[language]) {
+      this.loadCatalog(language)
+      this.language = language
+      return false
+    }
+    this.language = language
+
+    return true
+  }
+
+  loadCatalog = async language => {
+    const catalog = await import(/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
+    `@lingui/loader!../locales/${language}/messages.json`)
+
+    this.setState(state => ({
+      catalogs: {
+        ...state.catalogs,
+        [language]: catalog,
+      },
+    }))
+  }
+
+  render() {
+    const { location, children } = this.props
+    const { catalogs } = this.state
+
+    let language = langFromPath(location.pathname)
+    // If the language pack is not loaded or is loading, use the default language
+    if (!catalogs[language]) language = defaultLanguage
+
+    return (
+      <LocaleProvider locale={languages[language]}>
+        <I18nProvider language={language} catalogs={catalogs}>
+          <BaseLayout>{children}</BaseLayout>
+        </I18nProvider>
+      </LocaleProvider>
+    )
+  }
+}
+
+export default Layout

src/locales/en/messages.json

@@ -0,0 +1,54 @@
+{
+  "/dashboard": "/dashboard",
+  "Add Param": "Add Param",
+  "Address": "Address",
+  "Age": "Age",
+  "Are you sure delete this record?": "Are you sure delete this record?",
+  "Author": "Author",
+  "Avatar": "Avatar",
+  "Categories": "Categories",
+  "Clear notifications": "Clear notifications",
+  "Comments": "Comments",
+  "Create": "Create",
+  "Create User": "Create User",
+  "CreateTime": "CreateTime",
+  "Dark": "Dark",
+  "Delete": "Delete",
+  "Email": "Email",
+  "Female": "Female",
+  "Gender": "Gender",
+  "Hi,": "Hi,",
+  "Image": "Image",
+  "Light": "Light",
+  "Male": "Male",
+  "Name": "Name",
+  "NickName": "NickName",
+  "Not Found": "Not Found",
+  "Operation": "Operation",
+  "Params": "Params",
+  "Password": "Password",
+  "Phone": "Phone",
+  "Pick an address": "Pick an address",
+  "Please pick an address": "Please pick an address",
+  "Publised": "Publised",
+  "Publish Date": "Publish Date",
+  "Reset": "Reset",
+  "Search": "Search",
+  "Search Name": "Search Name",
+  "Send": "Send",
+  "Sign in": "Sign in",
+  "Sign out": "Sign out",
+  "Switch Theme": "Switch Theme",
+  "Tags": "Tags",
+  "The input is not valid E-mail!": "The input is not valid E-mail!",
+  "The input is not valid phone!": "The input is not valid phone!",
+  "Title": "Title",
+  "Total {total} Items": "Total {total} Items",
+  "Unpublished": "Unpublished",
+  "Update": "Update",
+  "Update User": "Update User",
+  "Username": "Username",
+  "Views": "Views",
+  "Visibility": "Visibility",
+  "You have viewed all notifications.": "You have viewed all notifications."
+}

src/locales/zh/messages.json

@@ -0,0 +1,54 @@
+{
+  "/dashboard": "/zh/dashboard",
+  "Add Param": "添加参数",
+  "Address": "地址",
+  "Age": "年龄",
+  "Are you sure delete this record?": "您确定要删除这条记录吗?",
+  "Author": "作者",
+  "Avatar": "头像",
+  "Categories": "类别",
+  "Clear notifications": "清空消息",
+  "Comments": "评论数",
+  "Create": "创建",
+  "Create User": "创建用户",
+  "CreateTime": "创建时间",
+  "Dark": "暗",
+  "Delete": "删除",
+  "Email": "电子邮件",
+  "Female": "女",
+  "Gender": "性别",
+  "Hi,": "你好，",
+  "Image": "图像",
+  "Light": "明",
+  "Male": "男性",
+  "Name": "名字",
+  "NickName": "昵称",
+  "Not Found": "未找到",
+  "Operation": "操作",
+  "Params": "参数",
+  "Password": "密码",
+  "Phone": "电话",
+  "Pick an address": "选择地址",
+  "Please pick an address": "选择地址",
+  "Publised": "已发布",
+  "Publish Date": "发布日期",
+  "Reset": "重置",
+  "Search": "搜索",
+  "Search Name": "搜索名字",
+  "Send": "发送",
+  "Sign in": "登录",
+  "Sign out": "退出登录",
+  "Switch Theme": "切换主题",
+  "Tags": "标签",
+  "The input is not valid E-mail!": "输入的电子邮件无效!",
+  "The input is not valid phone!": "输入无效的手机!",
+  "Title": "标题",
+  "Total {total} Items": "总共 {total} 条记录",
+  "Unpublished": "未发布",
+  "Update": "更新",
+  "Update User": "更新用户",
+  "Username": "用户名",
+  "Views": "浏览数",
+  "Visibility": "可见性",
+  "You have viewed all notifications.": "您已查看所有通知"
+}