程序源代码

.browserslistrc

+> 1%
+last 2 versions
+not ie <= 10

.editorconfig

+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=2
+
+[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
+indent_style=space
+indent_size=2
+
+[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
+indent_style=space
+indent_size=2
+
+[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
+indent_style=space
+indent_size=2
+
+[*.svg]
+indent_style=space
+indent_size=2
+
+[*.js.map]
+indent_style=space
+indent_size=2
+
+[*.less]
+indent_style=space
+indent_size=2
+
+[*.vue]
+indent_style=space
+indent_size=2
+
+[{.analysis_options,*.yml,*.yaml}]
+indent_style=space
+indent_size=2
+

.env

+NODE_ENV=production
+VUE_APP_PREVIEW=false
+VUE_APP_API_BASE_URL=/api
\ No newline at end of file

.env.development

+NODE_ENV=development
+VUE_APP_PREVIEW=true
+VUE_APP_API_BASE_URL=/api
\ No newline at end of file

.env.preview

+NODE_ENV=production
+VUE_APP_PREVIEW=true
+VUE_APP_API_BASE_URL=/api
\ No newline at end of file

.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/strongly-recommended',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'generator-star-spacing': 'off',
+    'no-mixed-operators': 0,
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        'singleline': 5,
+        'multiline': {
+          'max': 1,
+          'allowFirstLine': false
+        }
+      }
+    ],
+    'vue/attribute-hyphenation': 0,
+    'vue/html-self-closing': 0,
+    'vue/component-name-in-template-casing': 0,
+    'vue/html-closing-bracket-spacing': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/no-unused-components': 0,
+    'vue/multiline-html-element-content-newline': 0,
+    'vue/no-use-v-if-with-v-for': 0,
+    'vue/html-closing-bracket-newline': 0,
+    'vue/no-parsing-error': 0,
+    'no-tabs': 0,
+    'quotes': [
+      2,
+      'single',
+      {
+        'avoidEscape': true,
+        'allowTemplateLiterals': true
+      }
+    ],
+    'semi': [
+      2,
+      'never',
+      {
+        'beforeStatementContinuationChars': 'never'
+      }
+    ],
+    'no-delete-var': 2,
+    'prefer-const': [
+      2,
+      {
+        'ignoreReadBeforeAssign': false
+      }
+    ]
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}

.gitattributes

+public/* linguist-vendored
\ No newline at end of file

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

.prettierrc

+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true
+}

.travis.yml

+language: node_js
+node_js:
+  - 10.15.0
+cache: yarn
+script:
+  - yarn
+  - yarn run lint --no-fix && yarn run build

LICENSE

+MIT License
+
+Copyright (c) 2018 Anan Yang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

README.md

+English | [简体中文](./README.zh-CN.md)
+
+<h1 align="center">Ant Design Pro Vue</h1>
+<div align="center">
+An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on  <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
+</div>
+
+<div align="center">
+
+[![Backers on Open Collective](https://opencollective.com/ant-design-pro-vue/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ant-design-pro-vue/sponsors/badge.svg)](#sponsors) [![License](https://img.shields.io/npm/l/package.json.svg?style=flat)](https://github.com/sendya/ant-design-pro-vue/blob/master/LICENSE)
+[![Release](https://img.shields.io/github/release/sendya/ant-design-pro-vue.svg?style=flat)](https://github.com/sendya/ant-design-pro-vue/releases/latest)
+[![Travis branch](https://travis-ci.org/sendya/ant-design-pro-vue.svg?branch=master)](https://travis-ci.org/sendya/ant-design-pro-vue)
+
+</div>
+
+- Preview: https://preview.pro.loacg.com
+- Home Page: https://pro.loacg.com
+- Documentation: https://pro.loacg.com/docs/getting-started
+- ChangeLog: https://pro.loacg.com/docs/changelog
+- FAQ: https://pro.loacg.com/docs/faq
+
+Overview
+----
+
+![dashboard + multi-tabs](https://static-2.loacg.com/open/static/github/20190224163345.jpg)
+
+![dashboard + setting](https://static-2.loacg.com/open/static/github/20181126112124.png)
+
+![user profile](https://static-2.loacg.com/open/static/github/20180916-134251.png)
+
+![permission list](https://static-2.loacg.com/open/static/github/20180916-154937.png)
+
+
+### Env and dependencies
+
+- node
+- yarn
+- webpack
+- eslint
+- @vue/cli ~3
+- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 
+- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - Picture edit
+- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - AntV G2
+- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation)  - Antv/G2 of Vue
+
+> Note:  [Yarn](https://yarnpkg.com/) package management is recommended, the exact same version loaded with the demo site of this project (yarn.lock) . but you can also use npm
+
+
+### Project setup
+
+- Clone repo
+```bash
+git clone https://github.com/sendya/ant-design-pro-vue.git
+cd ant-design-pro-vue
+```
+
+- Install dependencies
+```
+yarn install
+```
+
+- Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+- Compiles and minifies for production
+```
+yarn run build
+```
+
+- Lints and fixes files
+```
+yarn run lint
+```
+
+
+### Other
+
+- **IMPORTANT : About Issue feedback !! when opening Issue read [Issue / PR Contributing](https://github.com/sendya/ant-design-pro-vue/issues/90)**
+
+- [Vue-cli3](https://cli.vuejs.org/guide/) used by the project.
+
+- Disable Eslint (not recommended): remove `eslintConfig`  field in `package.json`  and `vue.config.js` field `lintOnSave: false`
+
+- Load on Demand: modify `/src/main.js` L14,  replace to `import './core/lazy_use'` code. more [load-on-demand.md](./docs/load-on-demand.md)
+
+- Customize Theme:  [Custom Theme Config (@kokoroli)](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
+
+- I18n: [locales (@musnow)](./src/locales/index.js)
+
+- Production env `mock` is disabled. use `src/mock/index.js`
+
+- Plz use `release` version
+
+## Browsers support
+
+Modern browsers and IE10.
+
+| [<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 |
+| --- | --- | --- | --- | --- |
+| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+
+## Contributors
+
+This project exists thanks to all the people who contribute. 
+<a href="https://github.com/sendya/ant-design-pro-vue/graphs/contributors"><img src="https://opencollective.com/ant-design-pro-vue/contributors.svg?width=890&button=false" /></a>
+
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ant-design-pro-vue#backer)]
+
+<a href="https://opencollective.com/ant-design-pro-vue#backers" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/backers.svg?width=890"></a>
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/ant-design-pro-vue#sponsor)]
+
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/9/avatar.svg"></a>
+

README.zh-CN.md

+[English](./README.md) | 简体中文
+
+<h1 align="center">Ant Design Pro Vue</h1>
+<div align="center">
+An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on  <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
+</div>
+
+<div align="center">
+
+[![Backers on Open Collective](https://opencollective.com/ant-design-pro-vue/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ant-design-pro-vue/sponsors/badge.svg)](#sponsors) [![License](https://img.shields.io/npm/l/package.json.svg?style=flat)](https://github.com/sendya/ant-design-pro-vue/blob/master/LICENSE)
+[![Release](https://img.shields.io/github/release/sendya/ant-design-pro-vue.svg?style=flat)](https://github.com/sendya/ant-design-pro-vue/releases/latest)
+[![Travis branch](https://travis-ci.org/sendya/ant-design-pro-vue.svg?branch=master)](https://travis-ci.org/sendya/ant-design-pro-vue)
+
+</div>
+
+- 预览: https://preview.pro.loacg.com
+- 首页: https://pro.loacg.com
+- 文档: https://pro.loacg.com/docs/getting-started
+- 更新日志: https://pro.loacg.com/docs/changelog
+- 常见问题: https://pro.loacg.com/docs/faq
+
+
+Overview
+----
+
+基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/) 
+
+![工作台-多标签模式](https://static-2.loacg.com/open/static/github/20190224163345.jpg)
+
+![工作台+设置菜单](https://static-2.loacg.com/open/static/github/20181126112124.png)
+
+![个人设置](https://static-2.loacg.com/open/static/github/20180916-134251.png)
+
+
+环境和依赖
+----
+
+- node
+- yarn
+- webpack
+- eslint
+- @vue/cli ~3
+- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
+- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
+- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
+- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation)  - antv/g2 封装实现
+
+> 请注意，我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本而引入了新版本所导致的问题。作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。
+
+
+
+项目下载和运行
+----
+
+- 拉取项目代码
+```bash
+git clone https://github.com/sendya/ant-design-pro-vue.git
+cd ant-design-pro-vue
+```
+
+- 安装依赖
+```
+yarn install
+```
+
+- 开发模式运行
+```
+yarn run serve
+```
+
+- 编译项目
+```
+yarn run build
+```
+
+- Lints and fixes files
+```
+yarn run lint
+```
+
+
+
+其他说明
+----
+
+- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 前，先阅读该内容：[Issue / PR 编写建议](https://github.com/sendya/ant-design-pro-vue/issues/90)** 
+
+- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请确保你所使用的 vue-cli 是新版，并且已经学习 cli 官方文档使用教程
+
+- 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码, `vue.config.js` 下的 `lintOnSave` 值改为 `false`
+
+- 开启组件按需加载 `/src/main.js` L14 修改为 `import './core/lazy_use'`
+
+- [修改 Ant Design 配色 (@kokoroli)](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
+
+- I18n: [多语言支持 (@musnow)](./src/locales/index.js)
+
+- 生成环境默认不加载 `mock`，更多详情请看 `src/mock/index.js`
+
+- **用于生产环境，请使用 `release` 版本代码，使用 master 代码出现的任何问题需要你自行解决**
+
+## 浏览器兼容
+
+Modern browsers and IE10.
+
+| [<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 |
+| --- | --- | --- | --- | --- |
+| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+
+## Contributors
+
+This project exists thanks to all the people who contribute. 
+<a href="https://github.com/sendya/ant-design-pro-vue/graphs/contributors"><img src="https://opencollective.com/ant-design-pro-vue/contributors.svg?width=890&button=false" /></a>
+
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ant-design-pro-vue#backer)]
+
+<a href="https://opencollective.com/ant-design-pro-vue#backers" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/backers.svg?width=890"></a>
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/ant-design-pro-vue#sponsor)]
+
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/ant-design-pro-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-pro-vue/sponsor/9/avatar.svg"></a>

babel.config.js

+const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+
+const plugins = []
+if (IS_PROD) {
+  plugins.push('transform-remove-console')
+}
+
+// lazy load ant-design-vue
+// if your use import on Demand, Use this code
+plugins.push(['import', {
+  'libraryName': 'ant-design-vue',
+  'libraryDirectory': 'es',
+  'style': true // `style: true` 会加载 less 文件
+}])
+
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+    [
+      '@babel/preset-env',
+      {
+        'useBuiltIns': 'entry',
+        'corejs': 3
+      }
+    ]
+  ],
+  plugins
+}

config/plugin.config.js

+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const generate = require('@ant-design/colors/lib/generate').default
+
+const getAntdSerials = (color) => {
+  // 淡化（即less的tint）
+  const lightens = new Array(9).fill().map((t, i) => {
+    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
+  })
+  const colorPalettes = generate(color)
+  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
+  return lightens.concat(colorPalettes).concat(rgb)
+}
+
+const themePluginOption = {
+  fileName: 'css/theme-colors-[contenthash:8].css',
+  matchColors: getAntdSerials('#1890ff'), // 主色系列
+  // 改变样式选择器，解决样式覆盖问题
+  changeSelector (selector) {
+    switch (selector) {
+      case '.ant-calendar-today .ant-calendar-date':
+        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
+      case '.ant-btn:focus,.ant-btn:hover':
+        return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
+      case '.ant-btn.active,.ant-btn:active':
+        return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
+      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+        return ':not(.ant-steps-item-process)' + selector
+      case '.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':
+      case '.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':
+        return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
+      case '.ant-menu-horizontal > .ant-menu-item-selected > a':
+        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
+      case '.ant-menu-horizontal > .ant-menu-item > a:hover':
+        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
+      default :
+        return selector
+    }
+  }
+}
+
+const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)
+
+module.exports = createThemeColorReplacerPlugin

docs/add-page-loading-animate.md

+为首屏增加 加载动画
+====
+
+
+
+## 需求
+
+> 为了缓解用户第一次访问时，加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好，进行的一个优化动效。
+
+
+
+## 实现方案
+
+1. 将 动画加载 dom 元素放在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下的所有元素。
+2. 将 动画加载 dom 元素放在 body 下，Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画
+
+最后一步：
+​	将样式插入到 `public/index.html` 文件的 `<head></head>` 最好写成内联 `<style>动画样式</style>` 
+
+
+
+----
+
+目前提供有两个样式，均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案，可以直接参考 `public/index.html`
+
+
+## 写在最后
+
+目前 pro 有页面 overflow 显示出浏览器滚动条时，页面会抖动一下的问题。
+
+欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下，建议请直接使用 pro 进行改造，也欢迎直接 PR 到 pro 的仓库

docs/load-on-demand.md

+按需加载 减小打包
+====
+
+
+
+## 按需引入组件依赖
+
+`Ant Design Pro Vue` 默认编码工作并不支持按需引入，不过可以通过以下操作结合 [Ant Design Of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 官方文档来进行按需引入。
+
+- 增加项目按需引入依赖
+- 修改引入组件方式
+
+
+
+1. 增加按需引入所需依赖  `babel-plugin-import` 
+并且修改文件 `babel.config.js` 
+   ```ecmascript 6
+   module.exports = {
+     presets: [
+       '@vue/app'
+     ],
+     plugins: [
+       [ "import", {
+         "libraryName": "ant-design-vue",
+         "libraryDirectory": "es",
+         "style": "css"
+       } ]
+     ]
+   }
+   ```
+
+
+2. 修改引入组件方式 (注意，这只是一个例子，请完整引入你所需要的组件)
+
+   文件 `@/core/lazy_lib/component_use.js`
+
+   ```javascript
+   import Vue from 'vue'
+   import {
+       Input, 
+       Button, 
+       Select, 
+       Card, 
+       Form, 
+       Row, 
+       Col, 
+       Modal, 
+       Table, 
+       notification
+   } from 'ant-design-vue'
+   
+   Vue.use(Input)
+   Vue.use(Button)
+   Vue.use(Select)
+   Vue.use(Card)
+   Vue.use(Form)
+   Vue.use(Row)
+   Vue.use(Col)
+   Vue.use(Modal)
+   Vue.use(Table)
+   Vue.use(notification)
+   
+   Vue.prototype.$notification = notification;
+   ```
+
+
+3. 最后在 `main.js` 中引入 `@/core/lazy_use.js` 文件即可，如下
+
+   ```javascript
+   
+   import Vue from 'vue'
+   import App from './App'
+   
+   // 引入 按需组件的统一引入文件
+   import './core/lazy_use'
+   
+   import './style/index.less'
+   
+   
+   Vue.config.productionTip = false
+   
+   new Vue({
+     render: h => h(App),
+   }).$mount('#app')
+
+   ```
+
+
+
+## 其他 减少打包大小
+
+
+
+1.   Ant Design Vue 1.2.x 版本起，采用的 ant-design 官方方案 svg Icon 组件，整个项目打包会变大很多，图标进行按需加载可参考 https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
+2. moment 按需加载 可参考 https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

docs/multi-tabs.md

+多(页签)标签 模式
+====
+
+
+## 让框架支持打开的页面增加多标签，可随时切换
+
+### 关于如何移除该功能 组件
+  1. 移除 `/src/layouts/BasicLayout.vue` L44, L69, L80
+      ```vue
+      // L44
+      <multi-tab v-if="multiTab"></multi-tab>
+      
+      // L69
+      import MultiTab from '@/components/MultiTab'
+      
+      // L80
+      MultiTab,
+      ```
+  2. 移除 `/src/config/defaultSettings.js` L25
+
+  3. 移除 `src/store/modules/app.js` L27, L76-L79, L118-L120
+  
+  4. 移除 `src/utils/mixin.js` L21
+  
+  5. 删除组件目录 `src/components/MultiTab` 
+
+> 以上 `L x` 均代表行N ，如 L3 = 行3 
+

docs/webpack-bundle-analyzer.md

+先增加依赖
+
+```bash
+// npm
+$ npm install --save-dev webpack-bundle-analyzer
+
+// or yarn
+$ yarn add webpack-bundle-analyzer -D
+```
+
+配置文件 `vue.config.js` 增加 `configureWebpack.plugins` 参数
+
+```
+const path = require('path')
+const webpack = require('webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // 依赖大小分析工具
+      new BundleAnalyzerPlugin(),
+    ]
+  },
+  
+  
+  ...
+}
+```
+
+
+
+启动 `cli` 的 `build` 命令进行项目编译，编译完成时，会自动运行一个 http://localhost:8888 的地址，完整显示了支持库依赖
\ No newline at end of file

jest.config.js

+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: [
+    'jest-serializer-vue'
+  ],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  testURL: 'http://localhost/'
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "target": "es6",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src/**/*"]
+}

package.json

+{
+  "name": "vue-antd-pro",
+  "version": "2.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
+    "lint:nofix": "vue-cli-service lint --no-fix",
+    "postinstall": "opencollective-postinstall"
+  },
+  "dependencies": {
+    "@antv/data-set": "^0.10.2",
+    "ant-design-vue": "1.4.2",
+    "axios": "^0.19.0",
+    "core-js": "^3.1.2",
+    "enquire.js": "^2.1.6",
+    "lodash.get": "^4.4.2",
+    "lodash.pick": "^4.4.0",
+    "md5": "^2.2.1",
+    "mockjs2": "1.0.8",
+    "moment": "^2.24.0",
+    "nprogress": "^0.2.0",
+    "viser-vue": "^2.4.6",
+    "vue": "^2.6.10",
+    "vue-clipboard2": "^0.2.1",
+    "vue-cropper": "0.4.9",
+    "vue-ls": "^3.2.1",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.1.2",
+    "vuex": "^3.1.1",
+    "wangeditor": "^3.1.1",
+    "vue-svg-component-runtime": "^1.0.1"
+  },
+  "devDependencies": {
+    "@ant-design/colors": "^3.2.1",
+    "@vue/cli-plugin-babel": "^4.0.4",
+    "@vue/cli-plugin-eslint": "^4.0.4",
+    "@vue/cli-plugin-router": "^4.0.4",
+    "@vue/cli-plugin-unit-jest": "^4.0.4",
+    "@vue/cli-plugin-vuex": "^4.0.4",
+    "@vue/cli-service": "^4.0.4",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.12.2",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "eslint": "^5.16.0",
+    "eslint-plugin-html": "^5.0.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "vue-template-compiler": "^2.6.10",
+    "vue-svg-icon-loader": "^2.1.1",
+    "webpack-theme-color-replacer": "^1.2.17",
+    "opencollective": "^1.0.3",
+    "opencollective-postinstall": "^2.0.2"
+  },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/ant-design-pro-vue"
+  }
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="zh-cmn-Hans">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>logo.png">
+    <title>Ant Design Pro</title>
+    <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
+    <!-- require cdn assets css -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+    <% } %>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app">
+      <div id="loading-mask">
+          <div class="loading-wrapper">
+            <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+        </div>
+    </div>
+    <!-- require cdn assets js -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

public/loading/loading.css

+#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
\ No newline at end of file

public/loading/loading.html

+<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
\ No newline at end of file

public/loading/option2/html_code_segment.html

+<div class="preloading-animate">
+  <div class="preloading-wrapper">
+    <svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
+  </div>
+</div>
\ No newline at end of file

public/loading/option2/loading.css

+.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;}
\ No newline at end of file

public/loading/option2/loading.svg

+<svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
\ No newline at end of file

src/App.vue

+<template>
+  <a-locale-provider :locale="locale">
+    <div id="app">
+      <router-view/>
+    </div>
+  </a-locale-provider>
+</template>
+
+<script>
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import { AppDeviceEnquire } from '@/utils/mixin'
+
+export default {
+  mixins: [AppDeviceEnquire],
+  data () {
+    return {
+      locale: zhCN
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>
+<style>
+  #app {
+    height: 100%;
+  }
+</style>

src/api/index.js

+const api = {
+  Login: '/auth/login',
+  Logout: '/auth/logout',
+  ForgePassword: '/auth/forge-password',
+  Register: '/auth/register',
+  twoStepCode: '/auth/2step-code',
+  SendSms: '/account/sms',
+  SendSmsErr: '/account/sms_err',
+  // get my info
+  UserInfo: '/user/info'
+}
+export default api

src/api/login.js

+import api from './index'
+import { axios } from '@/utils/request'
+
+/**
+ * login func
+ * parameter: {
+ *     username: '',
+ *     password: '',
+ *     remember_me: true,
+ *     captcha: '12345'
+ * }
+ * @param parameter
+ * @returns {*}
+ */
+export function login (parameter) {
+  return axios({
+    url: '/auth/login',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getSmsCaptcha (parameter) {
+  return axios({
+    url: api.SendSms,
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getInfo () {
+  return axios({
+    url: '/user/info',
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+export function getCurrentUserNav (token) {
+  return axios({
+    url: '/user/nav',
+    method: 'get'
+  })
+}
+
+export function logout () {
+  return axios({
+    url: '/auth/logout',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * get user 2step code open?
+ * @param parameter {*}
+ */
+export function get2step (parameter) {
+  return axios({
+    url: api.twoStepCode,
+    method: 'post',
+    data: parameter
+  })
+}

src/api/manage.js

+import { axios } from '@/utils/request'
+
+const api = {
+  user: '/user',
+  role: '/role',
+  service: '/service',
+  permission: '/permission',
+  permissionNoPager: '/permission/no-pager',
+  orgTree: '/org/tree'
+}
+
+export default api
+
+export function getUserList (parameter) {
+  return axios({
+    url: api.user,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getRoleList (parameter) {
+  return axios({
+    url: api.role,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getServiceList (parameter) {
+  return axios({
+    url: api.service,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getPermissions (parameter) {
+  return axios({
+    url: api.permissionNoPager,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getOrgTree (parameter) {
+  return axios({
+    url: api.orgTree,
+    method: 'get',
+    params: parameter
+  })
+}
+
+// id == 0 add     post
+// id != 0 update  put
+export function saveService (parameter) {
+  return axios({
+    url: api.service,
+    method: parameter.id === 0 ? 'post' : 'put',
+    data: parameter
+  })
+}

src/assets/background.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 21</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
+            <g id="Group-21" transform="translate(77.000000, 73.000000)">
+                <g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
+                    <ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
+                    <ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
+                    <path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
+                    <path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
+                        <ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
+                        <path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
+                    </g>
+                </g>
+                <g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
+                    <ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
+                    <ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
+                    <path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
+                    <g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
+                        <ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
+                        <path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
+                    </g>
+                    <ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
+                    <path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
+                </g>
+                <g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
+                    <ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
+                    <g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
+                        <ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
+                        <path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
+                    </g>
+                    <path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                    <ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
+                    <ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
+                    <path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                </g>
+                <g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
+                    <g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
+                        <circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
+                        <path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
+                    </g>
+                    <circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
+                    <path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
+                    <path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
+                    <path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
+                    <circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
+                    <circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
+                    <circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/icons/bx-analyse.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1551058675966" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.333333 512h85.333334a340.736 340.736 0 0 1 99.712-241.621333 337.493333 337.493333 0 0 1 108.458666-72.96 346.453333 346.453333 0 0 1 261.546667-1.749334A106.154667 106.154667 0 0 0 746.666667 298.666667C805.802667 298.666667 853.333333 251.136 853.333333 192S805.802667 85.333333 746.666667 85.333333c-29.397333 0-55.978667 11.776-75.221334 30.933334-103.722667-41.514667-222.848-40.874667-325.76 2.517333a423.594667 423.594667 0 0 0-135.68 91.264 423.253333 423.253333 0 0 0-91.306666 135.637333A426.88 426.88 0 0 0 85.333333 512z m741.248 133.205333c-17.109333 40.618667-41.685333 77.141333-72.96 108.416s-67.797333 55.850667-108.458666 72.96a346.453333 346.453333 0 0 1-261.546667 1.749334A106.154667 106.154667 0 0 0 277.333333 725.333333C218.197333 725.333333 170.666667 772.864 170.666667 832S218.197333 938.666667 277.333333 938.666667c29.397333 0 55.978667-11.776 75.221334-30.933334A425.173333 425.173333 0 0 0 512 938.666667a425.941333 425.941333 0 0 0 393.258667-260.352A426.325333 426.325333 0 0 0 938.666667 512h-85.333334a341.034667 341.034667 0 0 1-26.752 133.205333z" p-id="7873"></path><path d="M512 318.378667c-106.752 0-193.621333 86.869333-193.621333 193.621333S405.248 705.621333 512 705.621333s193.621333-86.869333 193.621333-193.621333S618.752 318.378667 512 318.378667z m0 301.909333c-59.690667 0-108.288-48.597333-108.288-108.288S452.309333 403.712 512 403.712s108.288 48.597333 108.288 108.288-48.597333 108.288-108.288 108.288z" p-id="7874"></path></svg>
\ No newline at end of file

src/assets/logo.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+  <title>Vue</title>
+  <desc>Created with Sketch.</desc>
+  <defs>
+    <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
+      <stop stop-color="#29CDFF" offset="0%"></stop>
+      <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+      <stop stop-color="#0A60FF" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
+      <stop stop-color="#29CDFF" offset="0%"></stop>
+      <stop stop-color="#0F78FF" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
+      <stop stop-color="#FA8E7D" offset="0%"></stop>
+      <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+      <stop stop-color="#F51D2C" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Group" transform="translate(19.000000, 9.000000)">
+      <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
+      <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+      <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

src/components/ArticleListContent/ArticleListContent.vue

+<template>
+  <div class="antd-pro-components-article-list-content-index-listContent">
+    <div class="description">
+      <slot>
+        {{ description }}
+      </slot>
+    </div>
+    <div class="extra">
+      <a-avatar :src="avatar" size="small" />
+      <a :href="href">{{ owner }}</a> 发布在 <a :href="href">{{ href }}</a>
+      <em>{{ updateAt | moment }}</em>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleListContent',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'antd-pro-components-article-list-content-index-listContent'
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    owner: {
+      type: String,
+      required: true
+    },
+    avatar: {
+      type: String,
+      required: true
+    },
+    href: {
+      type: String,
+      required: true
+    },
+    updateAt: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../index.less';
+
+.antd-pro-components-article-list-content-index-listContent {
+  .description {
+    max-width: 720px;
+    line-height: 22px;
+  }
+  .extra {
+    margin-top: 16px;
+    color: @text-color-secondary;
+    line-height: 22px;
+
+    & /deep/ .ant-avatar {
+      position: relative;
+      top: 1px;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: top;
+    }
+
+    & > em {
+      margin-left: 16px;
+      color: @disabled-color;
+      font-style: normal;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .antd-pro-components-article-list-content-index-listContent {
+    .extra {
+      & > em {
+        display: block;
+        margin-top: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+</style>

src/components/ArticleListContent/index.js

+import ArticleListContent from './ArticleListContent'
+
+export default ArticleListContent

src/components/AvatarList/Item.vue

+<template>
+  <tooltip v-if="tips !== ''">
+    <template slot="title">{{ tips }}</template>
+    <avatar :size="avatarSize" :src="src" />
+  </tooltip>
+  <avatar v-else :size="avatarSize" :src="src" />
+</template>
+
+<script>
+import Avatar from 'ant-design-vue/es/avatar'
+import Tooltip from 'ant-design-vue/es/tooltip'
+
+export default {
+  name: 'AvatarItem',
+  components: {
+    Avatar,
+    Tooltip
+  },
+  props: {
+    tips: {
+      type: String,
+      default: '',
+      required: false
+    },
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      size: this.$parent.size
+    }
+  },
+  computed: {
+    avatarSize () {
+      return this.size !== 'mini' && this.size || 20
+    }
+  },
+  watch: {
+    '$parent.size' (val) {
+      this.size = val
+    }
+  }
+}
+</script>

src/components/AvatarList/List.vue

+<!--
+<template>
+  <div :class="[prefixCls]">
+    <ul>
+      <slot></slot>
+      <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
+
+      <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
+        <avatar-item :size="size">
+          <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
+        </avatar-item>
+      </template>
+    </ul>
+  </div>
+</template>
+-->
+
+<script>
+import Avatar from 'ant-design-vue/es/avatar'
+import AvatarItem from './Item'
+import { filterEmpty } from '@/components/_util/util'
+
+export default {
+  AvatarItem,
+  name: 'AvatarList',
+  components: {
+    Avatar,
+    AvatarItem
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-avatar-list'
+    },
+    /**
+       * 头像大小 类型: large、small 、mini, default
+       * 默认值: default
+       */
+    size: {
+      type: [String, Number],
+      default: 'default'
+    },
+    /**
+       * 要显示的最大项目
+       */
+    maxLength: {
+      type: Number,
+      default: 0
+    },
+    /**
+       * 多余的项目风格
+       */
+    excessItemsStyle: {
+      type: Object,
+      default: () => {
+        return {
+          color: '#f56a00',
+          backgroundColor: '#fde3cf'
+        }
+      }
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    getItems (items) {
+      const classString = {
+        [`${this.prefixCls}-item`]: true,
+        [`${this.size}`]: true
+      }
+
+      if (this.maxLength > 0) {
+        items = items.slice(0, this.maxLength)
+        items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
+      }
+      const itemList = items.map((item) => (
+        <li class={ classString }>{ item }</li>
+      ))
+      return itemList
+    }
+  },
+  render () {
+    const { prefixCls, size } = this.$props
+    const classString = {
+      [`${prefixCls}`]: true,
+      [`${size}`]: true
+    }
+    const items = filterEmpty(this.$slots.default)
+    const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
+
+    return (
+      <div class={ classString }>
+        { itemsDom }
+      </div>
+    )
+  }
+}
+</script>

src/components/AvatarList/index.js

+import AvatarList from './List'
+import './index.less'
+
+export default AvatarList

src/components/AvatarList/index.less

+@import "../index";
+
+@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list";
+@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item";
+
+.@{avatar-list-prefix-cls} {
+  display: inline-block;
+
+  ul {
+    list-style: none;
+    display: inline-block;
+    padding: 0;
+    margin: 0 0 0 8px;
+    font-size: 0;
+  }
+}
+
+.@{avatar-list-item-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  margin-left: -8px;
+  width: @avatar-size-base;
+  height: @avatar-size-base;
+
+  :global {
+    .ant-avatar {
+      border: 1px solid #fff;
+      cursor: pointer;
+    }
+  }
+
+  &.large {
+    width: @avatar-size-lg;
+    height: @avatar-size-lg;
+  }
+
+  &.small {
+    width: @avatar-size-sm;
+    height: @avatar-size-sm;
+  }
+
+  &.mini {
+    width: 20px;
+    height: 20px;
+
+    :global {
+      .ant-avatar {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+
+        .ant-avatar-string {
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+}
+

src/components/AvatarList/index.md

+# AvatarList 用户头像列表
+
+
+一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
+
+
+
+引用方式：
+
+```javascript
+import AvatarList from '@/components/AvatarList'
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+    components: {
+        AvatarList,
+        AvatarListItem
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<avatar-list size="mini">
+    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+</avatar-list>
+```
+或
+```html
+<avatar-list :max-length="3">
+    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+</avatar-list>
+```
+
+
+
+## API
+
+### AvatarList
+
+| 参数               | 说明       | 类型                                 | 默认值       |
+| ---------------- | -------- | ---------------------------------- | --------- |
+| size             | 头像大小     | `large`、`small` 、`mini`, `default` | `default` |
+| maxLength        | 要显示的最大项目 | number                             | -         |
+| excessItemsStyle | 多余的项目风格  | CSSProperties                      | -         |
+
+### AvatarList.Item
+
+| 参数   | 说明     | 类型        | 默认值 |
+| ---- | ------ | --------- | --- |
+| tips | 头像展示文案 | string | -   |
+| src  | 头像图片连接 | string    | -   |
+

src/components/Charts/Bar.vue

+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="254"
+      :data="data"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <v-tooltip />
+      <v-axis />
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Bar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    scale: {
+      type: Array,
+      default: () => {
+        return [{
+          dataKey: 'x',
+          min: 2
+        }, {
+          dataKey: 'y',
+          title: '时间',
+          min: 1,
+          max: 22
+        }]
+      }
+    },
+    tooltip: {
+      type: Array,
+      default: () => {
+        return [
+          'x*y',
+          (x, y) => ({
+            name: x,
+            value: y
+          })
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>

src/components/Charts/ChartCard.vue

+<template>
+  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total">
+        <slot name="total">
+          <span>{{ typeof total === 'function' && total() || total }}</span>
+        </slot>
+      </div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <div class="field">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    total: {
+      type: [Function, Number, String],
+      required: false,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-card-header {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    .meta {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      color: rgba(0, 0, 0, .45);
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+
+  .chart-card-action {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .chart-card-footer {
+    border-top: 1px solid #e8e8e8;
+    padding-top: 9px;
+    margin-top: 8px;
+
+    > * {
+      position: relative;
+    }
+
+    .field {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+  }
+
+  .chart-card-content {
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
+
+    .content-fix {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    color: #000;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+</style>

src/components/Charts/Liquid.vue

+<template>
+  <div>
+    <v-chart
+      :forceFit="true"
+      :height="height"
+      :width="width"
+      :data="data"
+      :scale="scale"
+      :padding="0">
+      <v-tooltip />
+      <v-interval
+        :shape="['liquid-fill-gauge']"
+        position="transfer*value"
+        color=""
+        :v-style="{
+          lineWidth: 10,
+          opacity: 0.75
+        }"
+        :tooltip="[
+          'transfer*value',
+          (transfer, value) => {
+            return {
+              name: transfer,
+              value,
+            };
+          },
+        ]"
+      ></v-interval>
+      <v-guide
+        v-for="(row, index) in data"
+        :key="index"
+        type="text"
+        :top="true"
+        :position="{
+          gender: row.transfer,
+          value: 45
+        }"
+        :content="row.value + '%'"
+        :v-style="{
+          fontSize: 100,
+          textAlign: 'center',
+          opacity: 0.75,
+        }"
+      />
+    </v-chart>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Liquid',
+  props: {
+    height: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Charts/MiniArea.vue

+<template>
+  <div class="antv-chart-mini">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
+        <v-tooltip />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+const data = []
+const beginDay = new Date().getTime()
+
+for (let i = 0; i < 10; i++) {
+  data.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: Math.round(Math.random() * 10)
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniArea',
+  data () {
+    return {
+      data,
+      tooltip,
+      scale,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
+</style>

src/components/Charts/MiniBar.vue

+<template>
+  <div class="antv-chart-mini">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-bar position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+const data = []
+const beginDay = new Date().getTime()
+
+for (let i = 0; i < 10; i++) {
+  data.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: Math.round(Math.random() * 10)
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 30
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      tooltip,
+      scale,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
+</style>

src/components/Charts/MiniProgress.vue

+<template>
+  <div class="chart-mini-progress">
+    <div class="target" :style="{ left: target + '%'}">
+      <span :style="{ backgroundColor: color }" />
+      <span :style="{ backgroundColor: color }"/>
+    </div>
+    <div class="progress-wrapper">
+      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  props: {
+    target: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: String,
+      default: '10px'
+    },
+    color: {
+      type: String,
+      default: '#13C2C2'
+    },
+    percentage: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+
+        &:last-child {
+          top: auto;
+          bottom: 0;
+        }
+      }
+    }
+    .progress-wrapper {
+      background-color: #f5f5f5;
+      position: relative;
+
+      .progress {
+        transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
+        border-radius: 1px 0 0 1px;
+        background-color: #1890ff;
+        width: 0;
+        height: 100%;
+      }
+    }
+  }
+</style>

src/components/Charts/MiniSmoothArea.vue

+<template>
+  <div :class="prefixCls">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="100" :data="dataSource" :scale="scale" :padding="[36, 0, 18, 0]">
+        <v-tooltip />
+        <v-smooth-line position="x*y" :size="2" />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniSmoothArea',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-smooth-area'
+    },
+    scale: {
+      type: [Object, Array],
+      required: true
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "smooth.area.less";
+</style>

src/components/Charts/Radar.vue

+<template>
+  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+    <v-tooltip></v-tooltip>
+    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
+    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
+    <v-legend dataKey="user" marker="circle" :offset="30" />
+    <v-coord type="polar" radius="0.8" />
+    <v-line position="item*score" color="user" :size="2" />
+    <v-point position="item*score" color="user" :size="4" shape="circle" />
+  </v-chart>
+</template>
+
+<script>
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+const scale = [
+  {
+    dataKey: 'score',
+    min: 0,
+    max: 80
+  }, {
+    dataKey: 'user',
+    alias: '类型'
+  }
+]
+
+export default {
+  name: 'Radar',
+  props: {
+    data: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      axis1Opts,
+      axis2Opts,
+      scale
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Charts/RankList.vue

+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <ul class="list">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+        <span>{{ item.name }}</span>
+        <span>{{ item.total }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankList',
+  // ['title', 'list']
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .rank {
+    padding: 0 32px 32px 72px;
+
+    .list {
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        margin-top: 16px;
+
+        span {
+          color: rgba(0, 0, 0, .65);
+          font-size: 14px;
+          line-height: 22px;
+
+          &:first-child {
+            background-color: #f5f5f5;
+            border-radius: 20px;
+            display: inline-block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-right: 24px;
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+            text-align: center;
+          }
+          &.active {
+            background-color: #314659;
+            color: #fff;
+          }
+          &:last-child {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+
+  .mobile .rank {
+    padding: 0 32px 32px 32px;
+  }
+
+</style>

src/components/Charts/TagCloud.vue

+<template>
+  <v-chart :width="width" :height="height" :padding="[0]" :data="data" :scale="scale">
+    <v-tooltip :show-title="false" />
+    <v-coord type="rect" direction="TL" />
+    <v-point position="x*y" color="category" shape="cloud" tooltip="value*category" />
+  </v-chart>
+</template>
+
+<script>
+import { registerShape } from 'viser-vue'
+const DataSet = require('@antv/data-set')
+
+const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'
+
+const scale = [
+  { dataKey: 'x', nice: false },
+  { dataKey: 'y', nice: false }
+]
+
+registerShape('point', 'cloud', {
+  draw (cfg, container) {
+    return container.addShape('text', {
+      attrs: {
+        fillOpacity: cfg.opacity,
+        fontSize: cfg.origin._origin.size,
+        rotate: cfg.origin._origin.rotate,
+        text: cfg.origin._origin.text,
+        textAlign: 'center',
+        fontFamily: cfg.origin._origin.font,
+        fill: cfg.color,
+        textBaseline: 'Alphabetic',
+        ...cfg.style,
+        x: cfg.x,
+        y: cfg.y
+      }
+    })
+  }
+})
+
+export default {
+  name: 'TagCloud',
+  props: {
+    tagList: {
+      type: Array,
+      required: true
+    },
+    height: {
+      type: Number,
+      default: 400
+    },
+    width: {
+      type: Number,
+      default: 640
+    }
+  },
+  data () {
+    return {
+      data: [],
+      scale
+    }
+  },
+  watch: {
+    tagList: function (val) {
+      if (val.length > 0) {
+        this.initTagCloud(val)
+      }
+    }
+  },
+  mounted () {
+    if (this.tagList.length > 0) {
+      this.initTagCloud(this.tagList)
+    }
+  },
+  methods: {
+    initTagCloud (dataSource) {
+      const { height, width } = this
+
+      const dv = new DataSet.View().source(dataSource)
+      const range = dv.range('value')
+      const min = range[0]
+      const max = range[1]
+      const imageMask = new Image()
+      imageMask.crossOrigin = ''
+      imageMask.src = imgUrl
+      imageMask.onload = () => {
+        dv.transform({
+          type: 'tag-cloud',
+          fields: ['name', 'value'],
+          size: [width, height],
+          imageMask,
+          font: 'Verdana',
+          padding: 0,
+          timeInterval: 5000, // max execute time
+          rotate () {
+            let random = ~~(Math.random() * 4) % 4
+            if (random === 2) {
+              random = 0
+            }
+            return random * 90 // 0, 90, 270
+          },
+          fontSize (d) {
+            if (d.value) {
+              return ((d.value - min) / (max - min)) * (32 - 8) + 8
+            }
+            return 0
+          }
+        })
+        this.data = dv.rows
+      }
+    }
+  }
+}
+</script>

src/components/Charts/TransferBar.vue

+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="254"
+      :data="data"
+      :scale="scale"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <v-tooltip />
+      <v-axis />
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+const scale = [{
+  dataKey: 'x',
+  title: '日期(天)',
+  alias: '日期(天)',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '流量(Gb)',
+  alias: '流量(Gb)',
+  min: 1
+}]
+
+export default {
+  name: 'Bar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      data: [],
+      scale,
+      tooltip
+    }
+  },
+  created () {
+    this.getMonthBar()
+  },
+  methods: {
+    getMonthBar () {
+      this.$http.get('/analysis/month-bar')
+        .then(res => {
+          this.data = res.result
+        })
+    }
+  }
+}
+</script>

src/components/Charts/Trend.vue

+<template>
+  <div class="chart-trend">
+    {{ term }}
+    <span>{{ rate }}%</span>
+    <span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    term: {
+      type: String,
+      default: '',
+      required: true
+    },
+    percentage: {
+      type: Number,
+      default: null
+    },
+    type: {
+      type: Boolean,
+      default: null
+    },
+    target: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    fixed: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: this.type && 'up' || 'down',
+      rate: this.percentage
+    }
+  },
+  created () {
+    const type = this.type === null ? this.value >= this.target : this.type
+    this.trend = type ? 'up' : 'down'
+    this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 22px;
+
+    .trend-icon {
+      font-size: 12px;
+
+      &.up, &.down {
+        margin-left: 4px;
+        position: relative;
+        top: 1px;
+
+        i {
+          font-size: 12px;
+          transform: scale(.83);
+        }
+      }
+
+      &.up {
+        color: #f5222d;
+      }
+      &.down {
+        color: #52c41a;
+        top: -1px;
+      }
+    }
+  }
+</style>

src/components/Charts/chart.less

+.antv-chart-mini {
+  position: relative;
+  width: 100%;
+
+  .chart-wrapper {
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+
+/*    margin: 0 -5px;
+    overflow: hidden;*/
+  }
+}
\ No newline at end of file

src/components/Charts/smooth.area.less

+@import "../index";
+
+@smoothArea-prefix-cls: ~"@{ant-pro-prefix}-smooth-area";
+
+.@{smoothArea-prefix-cls} {
+    position: relative;
+    width: 100%;
+
+    .chart-wrapper {
+        position: absolute;
+        bottom: -28px;
+        width: 100%;
+    }
+}
\ No newline at end of file

src/components/CountDown/CountDown.vue

+<template>
+  <span>
+    {{ lastTime | format }}
+  </span>
+</template>
+
+<script>
+
+function fixedZero (val) {
+  return val * 1 < 10 ? `0${val}` : val
+}
+
+export default {
+  name: 'CountDown',
+  props: {
+    format: {
+      type: Function,
+      default: undefined
+    },
+    target: {
+      type: [Date, Number],
+      required: true
+    },
+    onEnd: {
+      type: Function,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      dateTime: '0',
+      originTargetTime: 0,
+      lastTime: 0,
+      timer: 0,
+      interval: 1000
+    }
+  },
+  filters: {
+    format (time) {
+      const hours = 60 * 60 * 1000
+      const minutes = 60 * 1000
+
+      const h = Math.floor(time / hours)
+      const m = Math.floor((time - h * hours) / minutes)
+      const s = Math.floor((time - h * hours - m * minutes) / 1000)
+      return `${fixedZero(h)}:${fixedZero(m)}:${fixedZero(s)}`
+    }
+  },
+  created () {
+    this.initTime()
+    this.tick()
+  },
+  methods: {
+    initTime () {
+      let lastTime = 0
+      let targetTime = 0
+      this.originTargetTime = this.target
+      try {
+        if (Object.prototype.toString.call(this.target) === '[object Date]') {
+          targetTime = this.target
+        } else {
+          targetTime = new Date(this.target).getTime()
+        }
+      } catch (e) {
+        throw new Error('invalid target prop')
+      }
+
+      lastTime = targetTime - new Date().getTime()
+
+      this.lastTime = lastTime < 0 ? 0 : lastTime
+    },
+    tick () {
+      const { onEnd } = this
+
+      this.timer = setTimeout(() => {
+        if (this.lastTime < this.interval) {
+          clearTimeout(this.timer)
+          this.lastTime = 0
+          if (typeof onEnd === 'function') {
+            onEnd()
+          }
+        } else {
+          this.lastTime -= this.interval
+          this.tick()
+        }
+      }, this.interval)
+    }
+  },
+  beforeUpdate () {
+    if (this.originTargetTime !== this.target) {
+      this.initTime()
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/CountDown/index.js

+import CountDown from './CountDown'
+
+export default CountDown

src/components/CountDown/index.md

+# CountDown 倒计时
+
+倒计时组件。
+
+
+
+引用方式：
+
+```javascript
+import CountDown from '@/components/CountDown/CountDown'
+
+export default {
+    components: {
+        CountDown
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<count-down :target="new Date().getTime() + 3000000" :on-end="onEndHandle" />
+```
+
+
+
+## API
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| target | 目标时间 | Date | - |
+| onEnd |  倒计时结束回调 | funtion | -|

src/components/DescriptionList/DescriptionList.vue

+<template>
+  <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
+    <div v-if="title" class="title">{{ title }}</div>
+    <a-row>
+      <slot></slot>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { Col } from 'ant-design-vue/es/grid/'
+
+const Item = {
+  name: 'DetailListItem',
+  props: {
+    term: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  inject: {
+    col: {
+      type: Number
+    }
+  },
+  render () {
+    return (
+      <Col {...{ props: responsive[this.col] }}>
+        <div class="term">{this.$props.term}</div>
+        <div class="content">{this.$slots.default}</div>
+      </Col>
+    )
+  }
+}
+
+const responsive = {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 }
+}
+
+export default {
+  name: 'DetailList',
+  Item: Item,
+  components: {
+    Col
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: false
+    },
+    col: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'large'
+    },
+    layout: {
+      type: String,
+      required: false,
+      default: 'horizontal'
+    }
+  },
+  provide () {
+    return {
+      col: this.col > 4 ? 4 : this.col
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .description-list {
+
+    .title {
+      color: rgba(0,0,0,.85);
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+
+    /deep/ .term {
+      color: rgba(0,0,0,.85);
+      display: table-cell;
+      line-height: 20px;
+      margin-right: 8px;
+      padding-bottom: 16px;
+      white-space: nowrap;
+
+      &:not(:empty):after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -.5px;
+      }
+    }
+
+    /deep/ .content {
+      color: rgba(0,0,0,.65);
+      display: table-cell;
+      min-height: 22px;
+      line-height: 22px;
+      padding-bottom: 16px;
+      width: 100%;
+      &:empty {
+        content: ' ';
+        height: 38px;
+        padding-bottom: 16px;
+      }
+    }
+
+    &.small {
+
+      .title {
+        font-size: 14px;
+        color: rgba(0, 0, 0, .65);
+        font-weight: normal;
+        margin-bottom: 12px;
+      }
+      /deep/ .term, .content {
+        padding-bottom: 8px;
+      }
+    }
+
+    &.large {
+      /deep/ .term, .content {
+        padding-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+      }
+    }
+
+    &.vertical {
+      .term {
+        padding-bottom: 8px;
+      }
+      /deep/ .term, .content {
+        display: block;
+      }
+    }
+  }
+</style>

src/components/DescriptionList/index.js

+import DescriptionList from './DescriptionList'
+export default DescriptionList

src/components/Editor/QuillEditor.vue

+<template>
+  <div :class="prefixCls">
+    <quill-editor
+      v-model="content"
+      ref="myQuillEditor"
+      :options="editorOption"
+      @blur="onEditorBlur($event)"
+      @focus="onEditorFocus($event)"
+      @ready="onEditorReady($event)"
+      @change="onEditorChange($event)">
+    </quill-editor>
+
+  </div>
+</template>
+
+<script>
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+import { quillEditor } from 'vue-quill-editor'
+
+export default {
+  name: 'QuillEditor',
+  components: {
+    quillEditor
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-editor-quill'
+    },
+    // 表单校验用字段
+    // eslint-disable-next-line
+    value: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      content: null,
+      editorOption: {
+        // some quill options
+      }
+    }
+  },
+  methods: {
+    onEditorBlur (quill) {
+      console.log('editor blur!', quill)
+    },
+    onEditorFocus (quill) {
+      console.log('editor focus!', quill)
+    },
+    onEditorReady (quill) {
+      console.log('editor ready!', quill)
+    },
+    onEditorChange ({ quill, html, text }) {
+      console.log('editor change!', quill, html, text)
+      this.$emit('change', html)
+    }
+  },
+  watch: {
+    value (val) {
+      this.content = val
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import url('../index.less');
+
+/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
+.ant-editor-quill {
+  /deep/ .ql-toolbar.ql-snow {
+    border-radius: @border-radius-base @border-radius-base 0 0;
+  }
+  /deep/ .ql-container.ql-snow {
+    border-radius: 0 0 @border-radius-base @border-radius-base;
+  }
+}
+</style>

src/components/Editor/WangEditor.vue

+<template>
+  <div :class="prefixCls">
+    <div ref="editor" class="editor-wrapper"></div>
+  </div>
+</template>
+
+<script>
+import WEditor from 'wangeditor'
+
+export default {
+  name: 'WangEditor',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-editor-wang'
+    },
+    // eslint-disable-next-line
+    value: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      editor: null,
+      editorContent: null
+    }
+  },
+  watch: {
+    value (val) {
+      this.editorContent = val
+      this.editor.txt.html(val)
+    }
+  },
+  mounted () {
+    this.initEditor()
+  },
+  methods: {
+    initEditor () {
+      this.editor = new WEditor(this.$refs.editor)
+      // this.editor.onchangeTimeout = 200
+      this.editor.customConfig.onchange = (html) => {
+        this.editorContent = html
+        this.$emit('change', this.editorContent)
+      }
+      this.editor.create()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-editor-wang {
+  .editor-wrapper {
+    text-align: left;
+  }
+}
+</style>

src/components/Ellipsis/Ellipsis.vue

+<script>
+import Tooltip from 'ant-design-vue/es/tooltip'
+import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
+/*
+    const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+    const TooltipOverlayStyle = {
+      overflowWrap: 'break-word',
+      wordWrap: 'break-word',
+    };
+  */
+
+export default {
+  name: 'Ellipsis',
+  components: {
+    Tooltip
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-ellipsis'
+    },
+    tooltip: {
+      type: Boolean
+    },
+    length: {
+      type: Number,
+      required: true
+    },
+    lines: {
+      type: Number,
+      default: 1
+    },
+    fullWidthRecognition: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    getStrDom (str, fullLength) {
+      return (
+        <span>{ cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '') }</span>
+      )
+    },
+    getTooltip (fullStr, fullLength) {
+      return (
+        <Tooltip>
+          <template slot="title">{ fullStr }</template>
+          { this.getStrDom(fullStr, fullLength) }
+        </Tooltip>
+      )
+    }
+  },
+  render () {
+    const { tooltip, length } = this.$props
+    const str = this.$slots.default.map(vNode => vNode.text).join('')
+    const fullLength = getStrFullLength(str)
+    const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
+    return (
+      strDom
+    )
+  }
+}
+</script>

src/components/Ellipsis/index.js

+import Ellipsis from './Ellipsis'
+
+export default Ellipsis

src/components/Ellipsis/index.md

+# Ellipsis 文本自动省略号
+
+文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
+
+
+
+引用方式：
+
+```javascript
+import Ellipsis from '@/components/Ellipsis'
+
+export default {
+    components: {
+        Ellipsis
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<ellipsis :length="100" tooltip>
+        There were injuries alleged in three cases in 2015, and a
+        fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
+</ellipsis>
+```
+
+
+
+## API
+
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+tooltip | 移动到文本展示完整内容的提示 | boolean | -
+length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
\ No newline at end of file

src/components/Exception/ExceptionPage.vue

+<template>
+  <div class="exception">
+    <div class="imgBlock">
+      <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
+      </div>
+    </div>
+    <div class="content">
+      <h1>{{ config[type].title }}</h1>
+      <div class="desc">{{ config[type].desc }}</div>
+      <div class="actions">
+        <a-button type="primary" @click="handleToHome">返回首页</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import types from './type'
+
+export default {
+  name: 'Exception',
+  props: {
+    type: {
+      type: String,
+      default: '404'
+    }
+  },
+  data () {
+    return {
+      config: types
+    }
+  },
+  methods: {
+    handleToHome () {
+      this.$router.push({ name: 'dashboard' })
+    }
+  }
+}
+</script>
+<style lang="less">
+@import "~ant-design-vue/lib/style/index";
+
+.exception {
+  display: flex;
+  align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  .imgBlock {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 152px;
+    zoom: 1;
+    &::before,
+    &::after {
+      content: ' ';
+      display: table;
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+  }
+
+  .imgEle {
+    float: right;
+    width: 100%;
+    max-width: 430px;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
+
+  .content {
+    flex: auto;
+
+    h1 {
+      margin-bottom: 24px;
+      color: #434e59;
+      font-weight: 600;
+      font-size: 72px;
+      line-height: 72px;
+    }
+
+    .desc {
+      margin-bottom: 16px;
+      color: @text-color-secondary;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .actions {
+      button:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .exception {
+    .imgBlock {
+      padding-right: 88px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .exception {
+    display: block;
+    text-align: center;
+    .imgBlock {
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .exception {
+    .imgBlock {
+      margin-bottom: -24px;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/components/Exception/index.js

+import ExceptionPage from './ExceptionPage.vue'
+export default ExceptionPage

src/components/Exception/type.js

+const types = {
+  403: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    title: '403',
+    desc: '抱歉，你无权访问该页面'
+  },
+  404: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    title: '404',
+    desc: '抱歉，你访问的页面不存在或仍在开发中'
+  },
+  500: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    title: '500',
+    desc: '抱歉，服务器出错了'
+  }
+}
+
+export default types

src/components/FooterToolbar/FooterToolBar.vue

+<template>
+  <div :class="prefixCls">
+    <div style="float: left">
+      <slot name="extra">{{ extra }}</slot>
+    </div>
+    <div style="float: right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FooterToolBar',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-footer-toolbar'
+    },
+    extra: {
+      type: [String, Object],
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/FooterToolbar/index.js

+import FooterToolBar from './FooterToolBar'
+import './index.less'
+
+export default FooterToolBar

src/components/FooterToolbar/index.less

+@import "../index";
+
+@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
+
+.@{footer-toolbar-prefix-cls} {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  height: 56px;
+  line-height: 56px;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+  background: #fff;
+  border-top: 1px solid #e8e8e8;
+  padding: 0 24px;
+  z-index: 9;
+
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
\ No newline at end of file

src/components/FooterToolbar/index.md

+# FooterToolbar 底部工具栏
+
+固定在底部的工具栏。
+
+
+
+## 何时使用
+
+固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
+
+
+
+引用方式：
+
+```javascript
+import FooterToolBar from '@/components/FooterToolbar'
+
+export default {
+    components: {
+        FooterToolBar
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<footer-tool-bar>
+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+</footer-tool-bar>
+```
+或
+```html
+<footer-tool-bar extra="扩展信息提示">
+    <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+</footer-tool-bar>
+```
+
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+children (slot) | 工具栏内容，向右对齐 | - | -
+extra | 额外信息，向左对齐 | String, Object | -
+

src/components/GlobalFooter/GlobalFooter.vue

+<template>
+  <div class="footer">
+    <div class="links">
+      <a
+        href="https://pro.loacg.com/"
+        target="_blank"
+      >Pro 首页</a>
+      <a
+        href="https://github.com/sendya/ant-design-pro-vue"
+        target="_blank"
+      >
+        <a-icon type="github" />
+      </a>
+      <a href="https://ant.design/">Ant Design</a>
+      <a href="https://vue.ant.design/">Vue Antd</a>
+    </div>
+    <div class="copyright">
+      Copyright
+      <a-icon type="copyright" /> 2018 <span>白鹭学园技术组出品</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GlobalFooter',
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.footer {
+  padding: 0 16px;
+  margin: 48px 0 24px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: rgba(0, 0, 0, 0.45);
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+    }
+  }
+  .copyright {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+  }
+}
+</style>

src/components/GlobalFooter/index.js

+import GlobalFooter from './GlobalFooter'
+export default GlobalFooter

src/components/GlobalHeader/GlobalHeader.vue

+<template>
+  <transition name="showHeader">
+    <div v-if="visible" class="header-animat">
+      <a-layout-header
+        v-if="visible"
+        :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
+        :style="{ padding: '0' }">
+        <div v-if="mode === 'sidemenu'" class="header">
+          <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
+          <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
+          <user-menu></user-menu>
+        </div>
+        <div v-else :class="['top-nav-header-index', theme]">
+          <div class="header-index-wide">
+            <div class="header-index-left">
+              <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
+              <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
+              <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
+            </div>
+            <user-menu class="header-index-right"></user-menu>
+          </div>
+        </div>
+      </a-layout-header>
+    </div>
+  </transition>
+</template>
+
+<script>
+import UserMenu from '../tools/UserMenu'
+import SMenu from '../Menu/'
+import Logo from '../tools/Logo'
+import { mixin } from '@/utils/mixin'
+
+export default {
+  name: 'GlobalHeader',
+  components: {
+    UserMenu,
+    SMenu,
+    Logo
+  },
+  mixins: [mixin],
+  props: {
+    mode: {
+      type: String,
+      // sidemenu, topmenu
+      default: 'sidemenu'
+    },
+    menus: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    device: {
+      type: String,
+      required: false,
+      default: 'desktop'
+    }
+  },
+  data () {
+    return {
+      visible: true,
+      oldScrollTop: 0
+    }
+  },
+  mounted () {
+    document.addEventListener('scroll', this.handleScroll, { passive: true })
+  },
+  methods: {
+    handleScroll () {
+      if (!this.autoHideHeader) {
+        return
+      }
+
+      const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
+      if (!this.ticking) {
+        this.ticking = true
+        requestAnimationFrame(() => {
+          if (this.oldScrollTop > scrollTop) {
+            this.visible = true
+          } else if (scrollTop > 300 && this.visible) {
+            this.visible = false
+          } else if (scrollTop < 300 && !this.visible) {
+            this.visible = true
+          }
+          this.oldScrollTop = scrollTop
+          this.ticking = false
+        })
+      }
+    },
+    toggle () {
+      this.$emit('toggle')
+    }
+  },
+  beforeDestroy () {
+    document.body.removeEventListener('scroll', this.handleScroll, true)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../index.less';
+
+.header-animat{
+  position: relative;
+  z-index: @ant-global-header-zindex;
+}
+.showHeader-enter-active {
+  transition: all 0.25s ease;
+}
+.showHeader-leave-active {
+  transition: all 0.5s ease;
+}
+.showHeader-enter, .showHeader-leave-to {
+  opacity: 0;
+}
+</style>

src/components/GlobalHeader/index.js

+import GlobalHeader from './GlobalHeader'
+export default GlobalHeader

src/components/IconSelector/IconSelector.vue

+<template>
+  <div :class="prefixCls">
+    <a-tabs v-model="currentTab" @change="handleTabChange">
+      <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
+        <ul>
+          <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
+            <a-icon :type="icon" :style="{ fontSize: '36px' }" />
+          </li>
+        </ul>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+import icons from './icons'
+
+export default {
+  name: 'IconSelect',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-icon-selector'
+    },
+    // eslint-disable-next-line
+    value: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      selectedIcon: this.value || '',
+      currentTab: 'directional',
+      icons
+    }
+  },
+  watch: {
+    value (val) {
+      this.selectedIcon = val
+      this.autoSwitchTab()
+    }
+  },
+  created () {
+    if (this.value) {
+      this.autoSwitchTab()
+    }
+  },
+  methods: {
+    handleSelectedIcon (icon) {
+      this.selectedIcon = icon
+      this.$emit('change', icon)
+    },
+    handleTabChange (activeKey) {
+      this.currentTab = activeKey
+    },
+    autoSwitchTab () {
+      icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "../index.less";
+
+  ul{
+    list-style: none;
+    padding: 0;
+    overflow-y: scroll;
+    height: 250px;
+
+    li{
+      display: inline-block;
+      padding: @padding-sm;
+      margin: 3px 0;
+      border-radius: @border-radius-base;
+
+      &:hover, &.active{
+        // box-shadow: 0px 0px 5px 2px @primary-color;
+        cursor: pointer;
+        color: @white;
+        background-color: @primary-color;
+      }
+    }
+  }
+</style>

src/components/IconSelector/README.md

+IconSelector
+====
+
+> 图标选择组件，常用于为某一个数据设定一个图标时使用
+> eg: 设定菜单列表时，为每个菜单设定一个图标
+
+该组件由 [@Saraka](https://github.com/saraka-tsukai) 封装
+
+
+
+### 使用方式
+
+```vue
+<template>
+	<div>
+       <icon-selector @change="handleIconChange"/>
+    </div>
+</template>
+
+<script>
+import IconSelector from '@/components/IconSelector'
+
+export default {
+  name: 'YourView',
+  components: {
+    IconSelector
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    handleIconChange (icon) {
+      console.log('change Icon', icon)
+    }
+  }
+}
+</script>
+```
+
+
+
+### 事件
+
+
+| 名称   | 说明                       | 类型   | 默认值 |
+| ------ | -------------------------- | ------ | ------ |
+| change | 当改变了 `icon` 选中项触发 | String | -      |

src/components/IconSelector/icons.js

+/**
+ * 增加新的图标时，请遵循以下数据结构
+ * Adding new icon please follow the data structure below
+ */
+export default [
+  {
+    key: 'directional',
+    title: '方向性图标',
+    icons: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'double-right', 'double-left', 'vertical-left', 'vertical-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'up-square', 'down-square', 'left-square', 'right-square', 'login', 'logout', 'menu-fold', 'menu-unfold', 'border-bottom', 'border-horizontal', 'border-inner', 'border-left', 'border-right', 'border-top', 'border-verticle', 'pic-center', 'pic-left', 'pic-right', 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'fullscreen', 'fullscreen-exit']
+  },
+  {
+    key: 'suggested',
+    title: '提示建议性图标',
+    icons: ['question', 'question-circle', 'plus', 'plus-circle', 'pause', 'pause-circle', 'minus', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle', 'exclamation', 'exclamation-circle', 'close', 'close-circle', 'close-square', 'check', 'check-circle', 'check-square', 'clock-circle', 'warning', 'issues-close', 'stop']
+  },
+  {
+    key: 'editor',
+    title: '编辑类图标',
+    icons: ['edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight', 'align-center', 'align-left', 'align-right', 'bg-colors', 'bold', 'italic', 'underline', 'strikethrough', 'redo', 'undo', 'zoom-in', 'zoom-out', 'font-colors', 'font-size', 'line-height', 'colum-height', 'dash', 'small-dash', 'sort-ascending', 'sort-descending', 'drag', 'ordered-list', 'radius-setting']
+  },
+  {
+    key: 'data',
+    title: '数据类图标',
+    icons: ['area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', 'sliders']
+  },
+  {
+    key: 'brand_logo',
+    title: '网站通用图标',
+    icons: ['lock', 'unlock', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-markdown', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'meh', 'smile', 'inbox', 'laptop', 'appstore', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload', 'star', 'heart', 'environment', 'eye', 'camera', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'calculator', 'pushpin', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'table', 'profile', 'alert', 'audit', 'branches', 'build', 'border', 'crown', 'experiment', 'fire', 'money-collect', 'property-safety', 'read', 'reconciliation', 'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate', 'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit', 'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect', 'file-search', 'file-sync', 'gateway', 'gold', 'robot', 'shopping']
+  },
+  {
+    key: 'application',
+    title: '品牌和标识',
+    icons: ['android', 'apple', 'windows', 'ie', 'chrome', 'github', 'aliwangwang', 'dingding', 'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'code-sandbox', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque', 'alibaba', 'yahoo']
+  }
+]

src/components/IconSelector/index.js

+import IconSelector from './IconSelector'
+export default IconSelector

src/components/Menu/SideMenu.vue

+<template>
+  <a-layout-sider
+    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
+    width="256px"
+    :collapsible="collapsible"
+    v-model="collapsed"
+    :trigger="null">
+    <logo />
+    <s-menu
+      :collapsed="collapsed"
+      :menu="menus"
+      :theme="theme"
+      :mode="mode"
+      @select="onSelect"
+      style="padding: 16px 0px;"></s-menu>
+  </a-layout-sider>
+
+</template>
+
+<script>
+import Logo from '@/components/tools/Logo'
+import SMenu from './index'
+import { mixin, mixinDevice } from '@/utils/mixin'
+
+export default {
+  name: 'SideMenu',
+  components: { Logo, SMenu },
+  mixins: [mixin, mixinDevice],
+  props: {
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menus: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    }
+  }
+}
+</script>

src/components/Menu/index.js

+import SMenu from './menu'
+export default SMenu

src/components/Menu/menu.js

+import Menu from 'ant-design-vue/es/menu'
+import Icon from 'ant-design-vue/es/icon'
+
+const { Item, SubMenu } = Menu
+
+export default {
+  name: 'SMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      openKeys: [],
+      selectedKeys: [],
+      cachedOpenKeys: []
+    }
+  },
+  computed: {
+    rootSubmenuKeys: vm => {
+      const keys = []
+      vm.menu.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
+  mounted () {
+    this.updateMenu()
+  },
+  watch: {
+    collapsed (val) {
+      if (val) {
+        this.cachedOpenKeys = this.openKeys.concat()
+        this.openKeys = []
+      } else {
+        this.openKeys = this.cachedOpenKeys
+      }
+    },
+    $route: function () {
+      this.updateMenu()
+    }
+  },
+  methods: {
+    // select menu item
+    onOpenChange (openKeys) {
+      // 在水平模式下时执行，并且不再执行后续
+      if (this.mode === 'horizontal') {
+        this.openKeys = openKeys
+        return
+      }
+      // 非水平模式时
+      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
+      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
+    },
+    updateMenu () {
+      const routes = this.$route.matched.concat()
+      const { hidden } = this.$route.meta
+      if (routes.length >= 3 && hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[routes.length - 1].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+      const openKeys = []
+      if (this.mode === 'inline') {
+        routes.forEach(item => {
+          openKeys.push(item.path)
+        })
+      }
+
+      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+    },
+
+    // render
+    renderItem (menu) {
+      if (!menu.hidden) {
+        return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
+      }
+      return null
+    },
+    renderMenuItem (menu) {
+      const target = menu.meta.target || null
+      const tag = target && 'a' || 'router-link'
+      const props = { to: { name: menu.name } }
+      const attrs = { href: menu.path, target: menu.meta.target }
+
+      if (menu.children && menu.hideChildrenInMenu) {
+        // 把有子菜单的 并且 父菜单是要隐藏子菜单的
+        // 都给子菜单增加一个 hidden 属性
+        // 用来给刷新页面时， selectedKeys 做控制用
+        menu.children.forEach(item => {
+          item.meta = Object.assign(item.meta, { hidden: true })
+        })
+      }
+
+      return (
+        <Item {...{ key: menu.path }}>
+          <tag {...{ props, attrs }}>
+            {this.renderIcon(menu.meta.icon)}
+            <span>{menu.meta.title}</span>
+          </tag>
+        </Item>
+      )
+    },
+    renderSubMenu (menu) {
+      const itemArr = []
+      if (!menu.hideChildrenInMenu) {
+        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
+      }
+      return (
+        <SubMenu {...{ key: menu.path }}>
+          <span slot="title">
+            {this.renderIcon(menu.meta.icon)}
+            <span>{menu.meta.title}</span>
+          </span>
+          {itemArr}
+        </SubMenu>
+      )
+    },
+    renderIcon (icon) {
+      if (icon === 'none' || icon === undefined) {
+        return null
+      }
+      const props = {}
+      typeof (icon) === 'object' ? props.component = icon : props.type = icon
+      return (
+        <Icon {... { props } }/>
+      )
+    }
+  },
+
+  render () {
+    const { mode, theme, menu } = this
+    const props = {
+      mode: mode,
+      theme: theme,
+      openKeys: this.openKeys
+    }
+    const on = {
+      select: obj => {
+        this.selectedKeys = obj.selectedKeys
+        this.$emit('select', obj)
+      },
+      openChange: this.onOpenChange
+    }
+
+    const menuTree = menu.map(item => {
+      if (item.hidden) {
+        return null
+      }
+      return this.renderItem(item)
+    })
+    // {...{ props, on: on }}
+    return (
+      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
+        {menuTree}
+      </Menu>
+    )
+  }
+}

src/components/Menu/menu.render.js

+import Menu from 'ant-design-vue/es/menu'
+import Icon from 'ant-design-vue/es/icon'
+
+const { Item, SubMenu } = Menu
+
+export default {
+  name: 'SMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      openKeys: [],
+      selectedKeys: [],
+      cachedOpenKeys: []
+    }
+  },
+  computed: {
+    rootSubmenuKeys: vm => {
+      const keys = []
+      vm.menu.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
+  created () {
+    this.updateMenu()
+  },
+  watch: {
+    collapsed (val) {
+      if (val) {
+        this.cachedOpenKeys = this.openKeys.concat()
+        this.openKeys = []
+      } else {
+        this.openKeys = this.cachedOpenKeys
+      }
+    },
+    $route: function () {
+      this.updateMenu()
+    }
+  },
+  methods: {
+    renderIcon: function (h, icon) {
+      if (icon === 'none' || icon === undefined) {
+        return null
+      }
+      const props = {}
+      typeof (icon) === 'object' ? props.component = icon : props.type = icon
+      return h(Icon, { props: { ...props } })
+    },
+    renderMenuItem: function (h, menu, pIndex, index) {
+      const target = menu.meta.target || null
+      return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
+        h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [
+          this.renderIcon(h, menu.meta.icon),
+          h('span', [menu.meta.title])
+        ])
+      ])
+    },
+    renderSubMenu: function (h, menu, pIndex, index) {
+      const this2_ = this
+      const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
+      const itemArr = []
+      const pIndex_ = pIndex + '_' + index
+      console.log('menu', menu)
+      if (!menu.hideChildrenInMenu) {
+        menu.children.forEach(function (item, i) {
+          itemArr.push(this2_.renderItem(h, item, pIndex_, i))
+        })
+      }
+      return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
+    },
+    renderItem: function (h, menu, pIndex, index) {
+      if (!menu.hidden) {
+        return menu.children && !menu.hideChildrenInMenu
+          ? this.renderSubMenu(h, menu, pIndex, index)
+          : this.renderMenuItem(h, menu, pIndex, index)
+      }
+    },
+    renderMenu: function (h, menuTree) {
+      const this2_ = this
+      const menuArr = []
+      menuTree.forEach(function (menu, i) {
+        if (!menu.hidden) {
+          menuArr.push(this2_.renderItem(h, menu, '0', i))
+        }
+      })
+      return menuArr
+    },
+    onOpenChange (openKeys) {
+      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
+      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
+    },
+    updateMenu () {
+      const routes = this.$route.matched.concat()
+
+      if (routes.length >= 4 && this.$route.meta.hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[2].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+
+      const openKeys = []
+      if (this.mode === 'inline') {
+        routes.forEach(item => {
+          openKeys.push(item.path)
+        })
+      }
+
+      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+    }
+  },
+  render (h) {
+    return h(
+      Menu,
+      {
+        props: {
+          theme: this.$props.theme,
+          mode: this.$props.mode,
+          openKeys: this.openKeys,
+          selectedKeys: this.selectedKeys
+        },
+        on: {
+          openChange: this.onOpenChange,
+          select: obj => {
+            this.selectedKeys = obj.selectedKeys
+            this.$emit('select', obj)
+          }
+        }
+      },
+      this.renderMenu(h, this.menu)
+    )
+  }
+}

src/components/MultiTab/MultiTab.vue

+<script>
+import events from './events'
+
+export default {
+  name: 'MultiTab',
+  data () {
+    return {
+      fullPathList: [],
+      pages: [],
+      activeKey: '',
+      newTabIndex: 0
+    }
+  },
+  created () {
+    // bind event
+    events.$on('open', val => {
+      if (!val) {
+        throw new Error(`multi-tab: open tab ${val} err`)
+      }
+      this.activeKey = val
+    }).$on('close', val => {
+      if (!val) {
+        this.closeThat(this.activeKey)
+        return
+      }
+      this.closeThat(val)
+    }).$on('rename', ({ key, name }) => {
+      console.log('rename', key, name)
+      try {
+        const item = this.pages.find(item => item.path === key)
+        item.meta.customTitle = name
+        this.$forceUpdate()
+      } catch (e) {
+      }
+    })
+
+    this.pages.push(this.$route)
+    this.fullPathList.push(this.$route.fullPath)
+    this.selectedLastPath()
+  },
+  methods: {
+    onEdit (targetKey, action) {
+      this[action](targetKey)
+    },
+    remove (targetKey) {
+      this.pages = this.pages.filter(page => page.fullPath !== targetKey)
+      this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
+      // 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
+      if (!this.fullPathList.includes(this.activeKey)) {
+        this.selectedLastPath()
+      }
+    },
+    selectedLastPath () {
+      this.activeKey = this.fullPathList[this.fullPathList.length - 1]
+    },
+
+    // content menu
+    closeThat (e) {
+      // 判断是否为最后一个标签页，如果是最后一个，则无法被关闭
+      if (this.fullPathList.length > 1) {
+        this.remove(e)
+      } else {
+        this.$message.info('这是最后一个标签了, 无法被关闭')
+      }
+    },
+    closeLeft (e) {
+      const currentIndex = this.fullPathList.indexOf(e)
+      if (currentIndex > 0) {
+        this.fullPathList.forEach((item, index) => {
+          if (index < currentIndex) {
+            this.remove(item)
+          }
+        })
+      } else {
+        this.$message.info('左侧没有标签')
+      }
+    },
+    closeRight (e) {
+      const currentIndex = this.fullPathList.indexOf(e)
+      if (currentIndex < (this.fullPathList.length - 1)) {
+        this.fullPathList.forEach((item, index) => {
+          if (index > currentIndex) {
+            this.remove(item)
+          }
+        })
+      } else {
+        this.$message.info('右侧没有标签')
+      }
+    },
+    closeAll (e) {
+      const currentIndex = this.fullPathList.indexOf(e)
+      this.fullPathList.forEach((item, index) => {
+        if (index !== currentIndex) {
+          this.remove(item)
+        }
+      })
+    },
+    closeMenuClick (key, route) {
+      this[key](route)
+    },
+    renderTabPaneMenu (e) {
+      return (
+        <a-menu {...{ on: { click: ({ key, item, domEvent }) => { this.closeMenuClick(key, e) } } }}>
+          <a-menu-item key="closeThat">关闭当前标签</a-menu-item>
+          <a-menu-item key="closeRight">关闭右侧</a-menu-item>
+          <a-menu-item key="closeLeft">关闭左侧</a-menu-item>
+          <a-menu-item key="closeAll">关闭全部</a-menu-item>
+        </a-menu>
+      )
+    },
+    // render
+    renderTabPane (title, keyPath) {
+      const menu = this.renderTabPaneMenu(keyPath)
+
+      return (
+        <a-dropdown overlay={menu} trigger={['contextmenu']}>
+          <span style={{ userSelect: 'none' }}>{ title }</span>
+        </a-dropdown>
+      )
+    }
+  },
+  watch: {
+    '$route': function (newVal) {
+      this.activeKey = newVal.fullPath
+      if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
+        this.fullPathList.push(newVal.fullPath)
+        this.pages.push(newVal)
+      }
+    },
+    activeKey: function (newPathKey) {
+      this.$router.push({ path: newPathKey })
+    }
+  },
+  render () {
+    const { onEdit, $data: { pages } } = this
+    const panes = pages.map(page => {
+      return (
+        <a-tab-pane
+          style={{ height: 0 }}
+          tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
+          key={page.fullPath} closable={pages.length > 1}
+        >
+        </a-tab-pane>)
+    })
+
+    return (
+      <div class="ant-pro-multi-tab">
+        <div class="ant-pro-multi-tab-wrapper">
+          <a-tabs
+            hideAdd
+            type={'editable-card'}
+            v-model={this.activeKey}
+            tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
+            {...{ on: { edit: onEdit } }}>
+            {panes}
+          </a-tabs>
+        </div>
+      </div>
+    )
+  }
+}
+</script>

src/components/MultiTab/events.js

+import Vue from 'vue'
+export default new Vue()

src/components/MultiTab/index.js

+import events from './events'
+import MultiTab from './MultiTab'
+import './index.less'
+
+const api = {
+  /**
+   * open new tab on route fullPath
+   * @param config
+   */
+  open: function (config) {
+    events.$emit('open', config)
+  },
+  rename: function (key, name) {
+    events.$emit('rename', { key: key, name: name })
+  },
+  /**
+   * close current page
+   */
+  closeCurrentPage: function () {
+    this.close()
+  },
+  /**
+   * close route fullPath tab
+   * @param config
+   */
+  close: function (config) {
+    events.$emit('close', config)
+  }
+}
+
+MultiTab.install = function (Vue) {
+  if (Vue.prototype.$multiTab) {
+    return
+  }
+  api.instance = events
+  Vue.prototype.$multiTab = api
+  Vue.component('multi-tab', MultiTab)
+}
+
+export default MultiTab

src/components/MultiTab/index.less

+@import '../index';
+
+@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab";
+@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper";
+
+/*
+.topmenu .@{multi-tab-prefix-cls} {
+  max-width: 1200px;
+  margin: -23px auto 24px auto;
+}
+*/
+.@{multi-tab-prefix-cls} {
+  margin: -23px -24px 24px -24px;
+  background: #fff;
+}
+
+.topmenu .@{multi-tab-wrapper-prefix-cls} {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} {
+  max-width: 100%;
+  margin: 0 auto;
+}

src/components/NProgress/nprogress.less

+@import url('../index.less');
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .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%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

src/components/NoticeIcon/NoticeIcon.vue

+<template>
+  <a-popover
+    v-model="visible"
+    trigger="click"
+    placement="bottomRight"
+    overlayClassName="header-notice-wrapper"
+    :getPopupContainer="() => $refs.noticeRef.parentElement"
+    :autoAdjustOverflow="true"
+    :arrowPointAtCenter="true"
+    :overlayStyle="{ width: '300px', top: '50px' }"
+  >
+    <template slot="content">
+      <a-spin :spinning="loading">
+        <a-tabs>
+          <a-tab-pane tab="通知" key="1">
+            <a-list>
+              <a-list-item>
+                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="消息" key="2">
+            123
+          </a-tab-pane>
+          <a-tab-pane tab="待办" key="3">
+            123
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </template>
+    <span @click="fetchNotice" class="header-notice" ref="noticeRef">
+      <a-badge count="12">
+        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+      </a-badge>
+    </span>
+  </a-popover>
+</template>
+
+<script>
+export default {
+  name: 'HeaderNotice',
+  data () {
+    return {
+      loading: false,
+      visible: false
+    }
+  },
+  methods: {
+    fetchNotice () {
+      if (!this.visible) {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+        }, 2000)
+      } else {
+        this.loading = false
+      }
+      this.visible = !this.visible
+    }
+  }
+}
+</script>
+
+<style lang="css">
+  .header-notice-wrapper {
+    top: 50px !important;
+  }
+</style>
+<style lang="less" scoped>
+  .header-notice{
+    display: inline-block;
+    transition: all 0.3s;
+
+    span {
+      vertical-align: initial;
+    }
+  }
+</style>

src/components/NoticeIcon/index.js

+import NoticeIcon from './NoticeIcon'
+export default NoticeIcon

src/components/NumberInfo/NumberInfo.vue

+<template>
+  <div :class="[prefixCls]">
+    <slot name="subtitle">
+      <div :class="[`${prefixCls}-subtitle`]">{{ typeof subTitle === 'string' ? subTitle : subTitle() }}</div>
+    </slot>
+    <div class="number-info-value">
+      <span>{{ total }}</span>
+      <span class="sub-total">
+        {{ subTotal }}
+        <icon :type="`caret-${status}`" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from 'ant-design-vue/es/icon'
+
+export default {
+  name: 'NumberInfo',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-number-info'
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    subTotal: {
+      type: Number,
+      required: true
+    },
+    subTitle: {
+      type: [String, Function],
+      default: ''
+    },
+    status: {
+      type: String,
+      default: 'up'
+    }
+  },
+  components: {
+    Icon
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

src/components/NumberInfo/index.js

+import NumberInfo from './NumberInfo'
+
+export default NumberInfo

src/components/NumberInfo/index.less

+@import "../index";
+
+@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info";
+
+.@{numberInfo-prefix-cls} {
+
+  .ant-pro-number-info-subtitle {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    height: 22px;
+    line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  .number-info-value {
+    margin-top: 4px;
+    font-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+
+    & > span {
+      color: @heading-color;
+      display: inline-block;
+      line-height: 32px;
+      height: 32px;
+      font-size: 24px;
+      margin-right: 32px;
+    }
+
+    .sub-total {
+      color: @text-color-secondary;
+      font-size: @font-size-lg;
+      vertical-align: top;
+      margin-right: 0;
+      i {
+        font-size: 12px;
+        transform: scale(0.82);
+        margin-left: 4px;
+      }
+      :global {
+        .anticon-caret-up {
+          color: @red-6;
+        }
+        .anticon-caret-down {
+          color: @green-6;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/NumberInfo/index.md

+# NumberInfo 数据文本
+
+常用在数据卡片中，用于突出展示某个业务数据。
+
+
+
+引用方式：
+
+```javascript
+import NumberInfo from '@/components/NumberInfo'
+
+export default {
+    components: {
+        NumberInfo
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<number-info
+    :sub-title="() => { return 'Visits this week' }"
+    :total="12321"
+    status="up"
+    :sub-total="17.1"></number-info>
+```
+
+
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+title | 标题 | ReactNode\|string | -
+subTitle | 子标题 | ReactNode\|string | -
+total | 总量 | ReactNode\|string | -
+subTotal | 子总量 | ReactNode\|string | -
+status | 增加状态 | 'up \| down' | -
+theme | 状态样式 | string | 'light'
+gap | 设置数字和描述之间的间距（像素）| number | 8

src/components/PageHeader/PageHeader.vue

+<template>
+  <div class="page-header">
+    <div class="page-header-index-wide">
+      <s-breadcrumb />
+      <div class="detail">
+        <div class="main" v-if="!$route.meta.hiddenHeaderContent">
+          <div class="row">
+            <img v-if="logo" :src="logo" class="logo"/>
+            <h1 v-if="title" class="title">{{ title }}</h1>
+            <div class="action">
+              <slot name="action"></slot>
+            </div>
+          </div>
+          <div class="row">
+            <div v-if="avatar" class="avatar">
+              <a-avatar :src="avatar" />
+            </div>
+            <div v-if="this.$slots.content" class="headerContent">
+              <slot name="content"></slot>
+            </div>
+            <div v-if="this.$slots.extra" class="extra">
+              <slot name="extra"></slot>
+            </div>
+          </div>
+          <div>
+            <slot name="pageMenu"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@/components/tools/Breadcrumb'
+
+export default {
+  name: 'PageHeader',
+  components: {
+    's-breadcrumb': Breadcrumb
+  },
+  props: {
+    title: {
+      type: [String, Boolean],
+      default: true,
+      required: false
+    },
+    logo: {
+      type: String,
+      default: '',
+      required: false
+    },
+    avatar: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.page-header {
+  background: #fff;
+  padding: 16px 32px 0;
+  border-bottom: 1px solid #e8e8e8;
+
+  .breadcrumb {
+    margin-bottom: 16px;
+  }
+
+  .detail {
+    display: flex;
+    /*margin-bottom: 16px;*/
+
+    .avatar {
+      flex: 0 1 72px;
+      margin: 0 24px 8px 0;
+
+      & > span {
+        border-radius: 72px;
+        display: block;
+        width: 72px;
+        height: 72px;
+      }
+    }
+
+    .main {
+      width: 100%;
+      flex: 0 1 auto;
+
+      .row {
+        display: flex;
+        width: 100%;
+
+        .avatar {
+          margin-bottom: 16px;
+        }
+      }
+
+      .title {
+        font-size: 20px;
+        font-weight: 500;
+
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+        margin-bottom: 16px;
+        flex: auto;
+      }
+      .logo {
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        margin-right: 16px;
+      }
+      .content,
+      .headerContent {
+        flex: auto;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 22px;
+
+        .link {
+          margin-top: 16px;
+          line-height: 24px;
+
+          a {
+            font-size: 14px;
+            margin-right: 32px;
+          }
+        }
+      }
+      .extra {
+        flex: 0 1 auto;
+        margin-left: 88px;
+        min-width: 242px;
+        text-align: right;
+      }
+      .action {
+        margin-left: 56px;
+        min-width: 266px;
+        flex: 0 1 auto;
+        text-align: right;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.mobile .page-header {
+  .main {
+    .row {
+      flex-wrap: wrap;
+
+      .avatar {
+        flex: 0 1 25%;
+        margin: 0 2% 8px 0;
+      }
+
+      .content,
+      .headerContent {
+        flex: 0 1 70%;
+
+        .link {
+          margin-top: 16px;
+          line-height: 24px;
+
+          a {
+            font-size: 14px;
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .extra {
+        flex: 1 1 auto;
+        margin-left: 0;
+        min-width: 0;
+        text-align: right;
+      }
+
+      .action {
+        margin-left: unset;
+        min-width: 266px;
+        flex: 0 1 auto;
+        text-align: left;
+        margin-bottom: 12px;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/PageHeader/index.js

+import PageHeader from './PageHeader'
+export default PageHeader

src/components/PageLoading/index.jsx

+import { Spin } from 'ant-design-vue'
+
+export const PageLoading = {
+  name: 'PageLoading',
+  props: {
+    tip: {
+      type: String,
+      default: 'Loading..'
+    },
+    size: {
+      type: String,
+      default: 'large'
+    }
+  },
+  render () {
+    const style = {
+      textAlign: 'center',
+      background: 'rgba(0,0,0,0.6)',
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 1100
+    }
+    const spinStyle = {
+      position: 'absolute',
+      left: '50%',
+      top: '40%',
+      transform: 'translate(-50%, -50%)'
+    }
+    return (<div style={style}>
+      <Spin size={this.size} style={spinStyle} tip={this.tip} />
+    </div>)
+  }
+}
+
+const version = '0.0.1'
+const loading = {}
+
+loading.newInstance = (Vue, options) => {
+  let loadingElement = document.querySelector('body>div[type=loading]')
+  if (!loadingElement) {
+    loadingElement = document.createElement('div')
+    loadingElement.setAttribute('type', 'loading')
+    loadingElement.setAttribute('class', 'ant-loading-wrapper')
+    document.body.appendChild(loadingElement)
+  }
+
+  const cdProps = Object.assign({ visible: false, size: 'large', tip: 'Loading...' }, options)
+
+  const instance = new Vue({
+    data () {
+      return {
+        ...cdProps
+      }
+    },
+    render () {
+      const { tip } = this
+      const props = {}
+      this.tip && (props.tip = tip)
+      if (this.visible) {
+        return <PageLoading { ...{ props } } />
+      }
+      return null
+    }
+  }).$mount(loadingElement)
+
+  function update (config) {
+    const { visible, size, tip } = { ...cdProps, ...config }
+    instance.$set(instance, 'visible', visible)
+    if (tip) {
+      instance.$set(instance, 'tip', tip)
+    }
+    if (size) {
+      instance.$set(instance, 'size', size)
+    }
+  }
+
+  return {
+    instance,
+    update
+  }
+}
+
+const api = {
+  show: function (options) {
+    this.instance.update({ ...options, visible: true })
+  },
+  hide: function () {
+    this.instance.update({ visible: false })
+  }
+}
+
+const install = function (Vue, options) {
+  if (Vue.prototype.$loading) {
+    return
+  }
+  api.instance = loading.newInstance(Vue, options)
+  Vue.prototype.$loading = api
+}
+
+export default {
+  version,
+  install
+}

src/components/Result/Result.vue

+<template>
+  <div class="result">
+    <div>
+      <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
+    </div>
+    <div class="title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="description">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </div>
+    <div class="extra" v-if="$slots.default">
+      <slot></slot>
+    </div>
+    <div class="action" v-if="$slots.action">
+      <slot name="action"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const resultEnum = ['success', 'error']
+
+export default {
+  name: 'Result',
+  props: {
+    /** @Deprecated */
+    isSuccess: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: resultEnum[0],
+      validator (val) {
+        return (val) => resultEnum.includes(val)
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    localIsSuccess: function () {
+      return this.type === resultEnum[0]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .result {
+    text-align: center;
+    width: 72%;
+    margin: 0 auto;
+    padding: 24px 0 8px;
+
+    .icon {
+      font-size: 72px;
+      line-height: 72px;
+      margin-bottom: 24px;
+    }
+    .success {
+      color: #52c41a;
+    }
+    .error {
+      color: red;
+    }
+    .title {
+      font-size: 24px;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+    .description {
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.45);
+      margin-bottom: 24px;
+    }
+    .extra {
+      background: #fafafa;
+      padding: 24px 40px;
+      border-radius: 2px;
+      text-align: left;
+    }
+    .action {
+      margin-top: 32px;
+    }
+  }
+
+  .mobile {
+    .result {
+      width: 100%;
+      margin: 0 auto;
+      padding: unset;
+    }
+  }
+</style>

src/components/Result/index.js

+import Result from './Result.vue'
+export default Result

src/components/Search/GlobalSearch.jsx

+import { Select } from 'ant-design-vue'
+import './index.less'
+
+const GlobalSearch = {
+  name: 'GlobalSearch',
+  data () {
+    return {
+      visible: false
+    }
+  },
+  mounted () {
+    const keyboardHandle = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const { ctrlKey, shiftKey, altKey, keyCode } = e
+      console.log('keyCode:', e.keyCode, e)
+      // key is `K` and hold ctrl
+      if (keyCode === 75 && ctrlKey && !shiftKey && !altKey) {
+        this.visible = !this.visible
+      }
+    }
+    document.addEventListener('keydown', keyboardHandle)
+  },
+  render () {
+    const { visible } = this
+    const handleSearch = (e) => {
+      this.$emit('search', e)
+    }
+
+    const handleChange = (e) => {
+      this.$emit('change', e)
+    }
+    if (!visible) {
+      return null
+    }
+    return (
+      <div class={'global-search global-search-wrapper'}>
+        <div class={'global-search-box'}>
+          <Select
+            size={'large'}
+            showSearch
+            placeholder="Input search text.."
+            style={{ width: '100%' }}
+            defaultActiveFirstOption={false}
+            showArrow={false}
+            filterOption={false}
+            onSearch={handleSearch}
+            onChange={handleChange}
+            notFoundContent={null}
+          >
+          </Select>
+          <div class={'global-search-tips'}>Open with Ctrl/⌘ + K</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+GlobalSearch.install = function (Vue) {
+  Vue.component(GlobalSearch.name, GlobalSearch)
+}
+
+export default GlobalSearch

src/components/Search/index.less

+@import "~ant-design-vue/es/style/themes/default";
+
+.global-search-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: @zindex-modal-mask;
+  background: @modal-mask-bg;
+
+  .global-search-box {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    width: 450px;
+    transform: translate(-50%, -50%);
+
+    .global-search-tips {
+      color: @white;
+      font-size: @font-size-lg;
+      text-align: right;
+    }
+  }
+}
\ No newline at end of file

src/components/SettingDrawer/SettingDrawer.vue

+<template>
+  <div class="setting-drawer" ref="settingDrawer">
+    <a-drawer
+      width="300"
+      placement="right"
+      @close="onClose"
+      :closable="false"
+      :visible="visible"
+      :handle="handle"
+    >
+      <div class="setting-drawer-index-content">
+
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">整体风格设置</h3>
+
+          <div class="setting-drawer-index-blockChecbox">
+            <a-tooltip>
+              <template slot="title">
+                暗色菜单风格
+              </template>
+              <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
+                <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
+                  <a-icon type="check"/>
+                </div>
+              </div>
+            </a-tooltip>
+
+            <a-tooltip>
+              <template slot="title">
+                亮色菜单风格
+              </template>
+              <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
+                <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
+                  <a-icon type="check"/>
+                </div>
+              </div>
+            </a-tooltip>
+          </div>
+        </div>
+
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">主题色</h3>
+
+          <div style="height: 20px">
+            <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
+              <template slot="title">
+                {{ item.key }}
+              </template>
+              <a-tag :color="item.color" @click="changeColor(item.color)">
+                <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
+              </a-tag>
+            </a-tooltip>
+
+          </div>
+        </div>
+        <a-divider />
+
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">导航模式</h3>
+
+          <div class="setting-drawer-index-blockChecbox">
+            <a-tooltip>
+              <template slot="title">
+                侧边栏导航
+              </template>
+              <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
+                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
+                  <a-icon type="check"/>
+                </div>
+              </div>
+            </a-tooltip>
+
+            <a-tooltip>
+              <template slot="title">
+                顶部栏导航
+              </template>
+              <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
+                <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
+                  <a-icon type="check"/>
+                </div>
+              </div>
+            </a-tooltip>
+          </div>
+          <div :style="{ marginTop: '24px' }">
+            <a-list :split="false">
+              <a-list-item>
+                <a-tooltip slot="actions">
+                  <template slot="title">
+                    该设定仅 [顶部栏导航] 时有效
+                  </template>
+                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
+                    <a-select-option value="Fixed">固定</a-select-option>
+                    <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
+                  </a-select>
+                </a-tooltip>
+                <a-list-item-meta>
+                  <div slot="title">内容区域宽度</div>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
+                <a-list-item-meta>
+                  <div slot="title">固定 Header</div>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
+                <a-list-item-meta>
+                  <a-tooltip slot="title" placement="left">
+                    <template slot="title">固定 Header 时可配置</template>
+                    <div :style="{ opacity: !fixedHeader ? '0.5' : '1' }">下滑时隐藏 Header</div>
+                  </a-tooltip>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item >
+                <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
+                <a-list-item-meta>
+                  <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </div>
+        </div>
+        <a-divider />
+
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">其他设置</h3>
+          <div>
+            <a-list :split="false">
+              <a-list-item>
+                <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
+                <a-list-item-meta>
+                  <div slot="title">色弱模式</div>
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
+                <a-list-item-meta>
+                  <div slot="title">多页签模式</div>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </div>
+        </div>
+        <a-divider />
+        <div :style="{ marginBottom: '24px' }">
+          <a-button
+            @click="doCopy"
+            icon="copy"
+            block
+          >拷贝设置</a-button>
+          <a-alert type="warning" :style="{ marginTop: '24px' }">
+            <span slot="message">
+              配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
+              <a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js" target="_blank">src/config/defaultSettings.js</a>
+            </span>
+          </a-alert>
+        </div>
+      </div>
+      <div class="setting-drawer-index-handle" @click="toggle">
+        <a-icon type="setting" v-if="!visible"/>
+        <a-icon type="close" v-else/>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { DetailList } from '@/components'
+import SettingItem from './SettingItem'
+import config from '@/config/defaultSettings'
+import { updateTheme, updateColorWeak, colorList } from './settingConfig'
+import { mixin, mixinDevice } from '@/utils/mixin'
+
+export default {
+  components: {
+    DetailList,
+    SettingItem
+  },
+  mixins: [mixin, mixinDevice],
+  data () {
+    return {
+      visible: false,
+      colorList,
+      handle: <div/>
+    }
+  },
+  watch: {
+
+  },
+  mounted () {
+    updateTheme(this.primaryColor)
+    if (this.colorWeak !== config.colorWeak) {
+      updateColorWeak(this.colorWeak)
+    }
+  },
+  methods: {
+    showDrawer () {
+      this.visible = true
+    },
+    onClose () {
+      this.visible = false
+    },
+    toggle () {
+      this.visible = !this.visible
+    },
+    onColorWeak (checked) {
+      this.$store.dispatch('ToggleWeak', checked)
+      updateColorWeak(checked)
+    },
+    onMultiTab (checked) {
+      this.$store.dispatch('ToggleMultiTab', checked)
+    },
+    handleMenuTheme (theme) {
+      this.$store.dispatch('ToggleTheme', theme)
+    },
+    doCopy () {
+      // get current settings from mixin or this.$store.state.app, pay attention to the property name
+      const text = `export default {
+  primaryColor: '${this.primaryColor}', // primary color of ant design
+  navTheme: '${this.navTheme}', // theme for nav menu
+  layout: '${this.layoutMode}', // nav menu position: sidemenu or topmenu
+  contentWidth: '${this.contentWidth}', // layout of content: Fluid or Fixed, only works when layout is topmenu
+  fixedHeader: ${this.fixedHeader}, // sticky header
+  fixSiderbar: ${this.fixSiderbar}, // sticky siderbar
+  autoHideHeader: ${this.autoHideHeader}, //  auto hide header
+  colorWeak: ${this.colorWeak},
+  multiTab: ${this.multiTab},
+  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
+  // vue-ls options
+  storageOptions: {
+    namespace: 'pro__',
+    name: 'ls',
+    storage: 'local',
+  }
+}`
+      this.$copyText(text).then(message => {
+        console.log('copy', message)
+        this.$message.success('复制完毕')
+      }).catch(err => {
+        console.log('copy.err', err)
+        this.$message.error('复制失败')
+      })
+    },
+    handleLayout (mode) {
+      this.$store.dispatch('ToggleLayoutMode', mode)
+      // 因为顶部菜单不能固定左侧菜单栏，所以强制关闭
+      this.handleFixSiderbar(false)
+    },
+    handleContentWidthChange (type) {
+      this.$store.dispatch('ToggleContentWidth', type)
+    },
+    changeColor (color) {
+      if (this.primaryColor !== color) {
+        this.$store.dispatch('ToggleColor', color)
+        updateTheme(color)
+      }
+    },
+    handleFixedHeader (fixed) {
+      this.$store.dispatch('ToggleFixedHeader', fixed)
+    },
+    handleFixedHeaderHidden (autoHidden) {
+      this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
+    },
+    handleFixSiderbar (fixed) {
+      if (this.layoutMode === 'topmenu') {
+        this.$store.dispatch('ToggleFixSiderbar', false)
+        return
+      }
+      this.$store.dispatch('ToggleFixSiderbar', fixed)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .setting-drawer-index-content {
+
+    .setting-drawer-index-blockChecbox {
+      display: flex;
+
+      .setting-drawer-index-item {
+        margin-right: 16px;
+        position: relative;
+        border-radius: 4px;
+        cursor: pointer;
+
+        img {
+          width: 48px;
+        }
+
+        .setting-drawer-index-selectIcon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 100%;
+          padding-top: 15px;
+          padding-left: 24px;
+          height: 100%;
+          color: #1890ff;
+          font-size: 14px;
+          font-weight: 700;
+        }
+      }
+    }
+    .setting-drawer-theme-color-colorBlock {
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+      float: left;
+      cursor: pointer;
+      margin-right: 8px;
+      padding-left: 0px;
+      padding-right: 0px;
+      text-align: center;
+      color: #fff;
+      font-weight: 700;
+
+      i {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .setting-drawer-index-handle {
+    position: absolute;
+    top: 240px;
+    background: #1890ff;
+    width: 48px;
+    height: 48px;
+    right: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 1001;
+    text-align: center;
+    font-size: 16px;
+    border-radius: 4px 0 0 4px;
+
+    i {
+      color: rgb(255, 255, 255);
+      font-size: 20px;
+    }
+  }
+</style>

src/components/SettingDrawer/SettingItem.vue

+<template>
+  <div class="setting-drawer-index-item">
+    <h3 class="setting-drawer-index-title">{{ title }}</h3>
+    <slot></slot>
+    <a-divider v-if="divider"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingItem',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    divider: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .setting-drawer-index-item {
+    margin-bottom: 24px;
+
+    .setting-drawer-index-title {
+      font-size: 14px;
+      color: rgba(0, 0, 0, .85);
+      line-height: 22px;
+      margin-bottom: 12px;
+    }
+
+  }
+</style>

src/components/SettingDrawer/index.js

+import SettingDrawer from './SettingDrawer'
+export default SettingDrawer

src/components/SettingDrawer/settingConfig.js

+import { message } from 'ant-design-vue/es'
+// import defaultSettings from '../defaultSettings';
+import themeColor from './themeColor.js'
+
+// let lessNodesAppended
+
+const colorList = [
+  {
+    key: '薄暮', color: '#F5222D'
+  },
+  {
+    key: '火山', color: '#FA541C'
+  },
+  {
+    key: '日暮', color: '#FAAD14'
+  },
+  {
+    key: '明青', color: '#13C2C2'
+  },
+  {
+    key: '极光绿', color: '#52C41A'
+  },
+  {
+    key: '拂晓蓝（默认）', color: '#1890FF'
+  },
+  {
+    key: '极客蓝', color: '#2F54EB'
+  },
+  {
+    key: '酱紫', color: '#722ED1'
+  }
+]
+
+const updateTheme = newPrimaryColor => {
+  const hideMessage = message.loading('正在切换主题！', 0)
+  themeColor.changeColor(newPrimaryColor).finally(t => {
+    setTimeout(() => {
+      hideMessage()
+    })
+  })
+}
+
+/*
+const updateTheme = primaryColor => {
+  // Don't compile less in production!
+  /* if (process.env.NODE_ENV === 'production') {
+    return;
+  } * /
+  // Determine if the component is remounted
+  if (!primaryColor) {
+    return
+  }
+  const hideMessage = message.loading('正在编译主题！', 0)
+  function buildIt () {
+    if (!window.less) {
+      return
+    }
+    setTimeout(() => {
+      window.less
+        .modifyVars({
+          '@primary-color': primaryColor
+        })
+        .then(() => {
+          hideMessage()
+        })
+        .catch(() => {
+          message.error('Failed to update theme')
+          hideMessage()
+        })
+    }, 200)
+  }
+  if (!lessNodesAppended) {
+    // insert less.js and color.less
+    const lessStyleNode = document.createElement('link')
+    const lessConfigNode = document.createElement('script')
+    const lessScriptNode = document.createElement('script')
+    lessStyleNode.setAttribute('rel', 'stylesheet/less')
+    lessStyleNode.setAttribute('href', '/color.less')
+    lessConfigNode.innerHTML = `
+      window.less = {
+        async: true,
+        env: 'production',
+        javascriptEnabled: true
+      };
+    `
+    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'
+    lessScriptNode.async = true
+    lessScriptNode.onload = () => {
+      buildIt()
+      lessScriptNode.onload = null
+    }
+    document.body.appendChild(lessStyleNode)
+    document.body.appendChild(lessConfigNode)
+    document.body.appendChild(lessScriptNode)
+    lessNodesAppended = true
+  } else {
+    buildIt()
+  }
+}
+*/
+
+const updateColorWeak = colorWeak => {
+  // document.body.className = colorWeak ? 'colorWeak' : '';
+  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
+}
+
+export { updateTheme, colorList, updateColorWeak }

src/components/SettingDrawer/themeColor.js

+import client from 'webpack-theme-color-replacer/client'
+import generate from '@ant-design/colors/lib/generate'
+
+export default {
+  getAntdSerials (color) {
+    // 淡化（即less的tint）
+    const lightens = new Array(9).fill().map((t, i) => {
+      return client.varyColor.lighten(color, i / 10)
+    })
+    // colorPalette变换得到颜色值
+    const colorPalettes = generate(color)
+    const rgb = client.varyColor.toNum3(color.replace('#', '')).join(',')
+    return lightens.concat(colorPalettes).concat(rgb)
+  },
+  changeColor (newColor) {
+    var options = {
+      newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`
+      changeUrl (cssUrl) {
+        return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path
+      }
+    }
+    return client.changer.changeColor(options, Promise)
+  }
+}

src/components/StandardFormRow/StandardFormRow.vue

+<template>
+  <div :class="[prefixCls, lastCls, blockCls, gridCls]">
+    <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
+      <span>{{ title }}</span>
+    </div>
+    <div class="antd-pro-components-standard-form-row-index-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const classes = [
+  'antd-pro-components-standard-form-row-index-standardFormRowBlock',
+  'antd-pro-components-standard-form-row-index-standardFormRowGrid',
+  'antd-pro-components-standard-form-row-index-standardFormRowLast'
+]
+export default {
+  name: 'StandardFormRow',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'antd-pro-components-standard-form-row-index-standardFormRow'
+    },
+    title: {
+      type: String,
+      default: undefined
+    },
+    last: {
+      type: Boolean
+    },
+    block: {
+      type: Boolean
+    },
+    grid: {
+      type: Boolean
+    }
+  },
+  computed: {
+    lastCls () {
+      return this.last ? classes[2] : null
+    },
+    blockCls () {
+      return this.block ? classes[0] : null
+    },
+    gridCls () {
+      return this.grid ? classes[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../index.less';
+
+.antd-pro-components-standard-form-row-index-standardFormRow {
+  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed @border-color-split;
+
+  /deep/ .ant-form-item {
+    margin-right: 24px;
+  }
+  /deep/ .ant-form-item-label label {
+    margin-right: 0;
+    color: @text-color;
+  }
+  /deep/ .ant-form-item-label,
+  .ant-form-item-control {
+    padding: 0;
+    line-height: 32px;
+  }
+
+  .antd-pro-components-standard-form-row-index-label {
+    flex: 0 0 auto;
+    margin-right: 24px;
+    color: @heading-color;
+    font-size: @font-size-base;
+    text-align: right;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      &::after {
+        content: '：';
+      }
+    }
+  }
+
+  .antd-pro-components-standard-form-row-index-content {
+    flex: 1 1 0;
+    /deep/ .ant-form-item:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &.antd-pro-components-standard-form-row-index-standardFormRowLast {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border: none;
+  }
+
+  &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
+    /deep/ .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+  }
+
+  &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
+      /deep/ .ant-form-item,
+      div.ant-form-item-control-wrapper {
+        display: block;
+      }
+      /deep/ .ant-form-item-label {
+        float: left;
+      }
+  }
+}
+
+</style>

src/components/StandardFormRow/index.js

+import StandardFormRow from './StandardFormRow'
+
+export default StandardFormRow

src/components/Table/README.md

+Table 重封装组件说明
+====
+
+
+封装说明
+----
+
+>  基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。
+>
+> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
+
+该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装
+
+
+例子1
+----
+（基础使用）
+
+```vue
+
+<template>
+  <s-table
+    ref="table"
+    size="default"
+    :rowKey="(record) => record.data.id"
+    :columns="columns"
+    :data="loadData"
+    :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+  >
+  </s-table>
+</template>
+
+<script>
+  import STable from '@/components'
+
+  export default {
+    components: {
+      STable
+    },
+    data() {
+      return {
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no'
+          },
+          {
+            title: '描述',
+            dataIndex: 'description'
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+            sorter: true,
+            needTotal: true,
+            customRender: (text) => text + ' 次'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            needTotal: true
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+            sorter: true
+          }
+        ],
+        // 查询条件参数
+        queryParam: {},
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return this.$http.get('/service', {
+            params: Object.assign(parameter, this.queryParam)
+          }).then(res => {
+            return res.result
+          })
+        },
+        selectedRowKeys: [],
+        selectedRows: []
+      }
+    },
+    methods: {
+      onSelectChange (selectedRowKeys, selectedRows) {
+         this.selectedRowKeys = selectedRowKeys
+         this.selectedRows = selectedRows
+       }
+    }
+  }
+</script>
+
+```
+
+
+
+例子2
+----
+
+（简单的表格，最后一列是各种操作）
+
+```vue
+<template>
+  <s-table
+    ref="table"
+    size="default"
+    :columns="columns"
+    :data="loadData"
+  >
+    <span slot="action" slot-scope="text, record">
+      <a>编辑</a>
+      <a-divider type="vertical"/>
+      <a-dropdown>
+        <a class="ant-dropdown-link">
+          更多 <a-icon type="down"/>
+        </a>
+        <a-menu slot="overlay">
+          <a-menu-item>
+            <a href="javascript:;">1st menu item</a>
+          </a-menu-item>
+          <a-menu-item>
+            <a href="javascript:;">2nd menu item</a>
+          </a-menu-item>
+          <a-menu-item>
+            <a href="javascript:;">3rd menu item</a>
+          </a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </span>
+  </s-table>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+
+  export default {
+    components: {
+      STable
+    },
+    data() {
+      return {
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no'
+          },
+          {
+            title: '描述',
+            dataIndex: 'description'
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+          },
+          {
+            table: '操作',
+            dataIndex: 'action',
+            scopedSlots: {customRender: 'action'},
+          }
+        ],
+        // 查询条件参数
+        queryParam: {},
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return this.$http.get('/service', {
+            params: Object.assign(parameter, this.queryParam)
+          }).then(res => {
+            return res.result
+          })
+        },
+      }
+    },
+    methods: {
+      edit(row) {
+        // axios 发送数据到后端 修改数据成功后
+        // 调用 refresh() 重新加载列表数据
+        // 这里 setTimeout 模拟发起请求的网络延迟..
+        setTimeout(() => {
+          this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
+        }, 1500)
+
+      }
+    }
+  }
+</script>
+```
+
+
+
+内置方法
+----
+
+通过 `this.$refs.table` 调用
+
+`this.$refs.table.refresh(true)` 刷新列表 (用户新增/修改数据后，重载列表数据)
+
+> 注意：要调用 `refresh(bool)` 需要给表格组件设定 `ref` 值
+>
+> `refresh()` 方法可以传一个 `bool` 值，当有传值 或值为 `true` 时，则刷新时会强制刷新到第一页（常用户页面 搜索 按钮进行搜索时，结果从第一页开始分页）
+
+
+内置属性
+----
+> 除去 `a-table` 自带属性外，还而外提供了一些额外属性属性  
+
+
+| 属性           | 说明                                            | 类型              | 默认值 |
+| -------------- | ----------------------------------------------- | ----------------- | ------ |
+| alert          | 设置是否显示表格信息栏                          | [object, boolean] | null   |
+| showPagination | 显示分页选择器，可传 'auto' \| boolean          | [string, boolean] | 'auto' |
+| data           | 加载数据方法 必须为 `Promise` 对象 **必须绑定** | Promise           | -      |
+
+
+`alert` 属性对象：
+
+```javascript
+alert: {
+  show: Boolean, 
+  clear: [Function, Boolean]
+}
+```
+
+注意事项
+----
+
+> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
+> (需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
+>
+> 文档中的结构有可能由于组件 bug 进行修正而改动。实际修改请以当时最新版本为准
+
+修改 `@/components/table/index.js`  第 156 行起
+
+
+
+```javascript
+result.then(r => {
+          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
+            current: r.pageNo, // 返回结果中的当前分页数
+            total: r.totalCount, // 返回结果中的总记录数
+            showSizeChanger: this.showSizeChanger,
+            pageSize: (pagination && pagination.pageSize) ||
+              this.localPagination.pageSize
+          }) || false
+          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
+            this.localPagination.current--
+            this.loadData()
+            return
+          }
+
+          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
+          // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
+          try {
+            if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
+              this.localPagination.hideOnSinglePage = true
+            }
+          } catch (e) {
+            this.localPagination = false
+          }
+          console.log('loadData -> this.localPagination', this.localPagination)
+          this.localDataSource = r.data // 返回结果中的数组数据
+          this.localLoading = false
+        })
+```
+返回 JSON 例子：
+```json
+{
+  "message": "",
+  "result": {
+    "data": [{
+        id: 1,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+        title: 'Alipay',
+        description: '那是一种内在的东西， 他们到达不了，也无法触及的',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 2,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+        title: 'Angular',
+        description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 3,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+        title: 'Ant Design',
+        description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 4,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+        title: 'Ant Design Pro',
+        description: '那时候我只会想自己想要什么，从不想自己拥有什么',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 5,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
+        title: 'Bootstrap',
+        description: '凛冬将至',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      },
+      {
+        id: 6,
+        cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
+        title: 'Vue',
+        description: '生命就像一盒巧克力，结果往往出人意料',
+        status: 1,
+        updatedAt: '2018-07-26 00:00:00'
+      }
+    ],
+    "pageSize": 10,
+    "pageNo": 0,
+    "totalPage": 6,
+    "totalCount": 57
+  },
+  "status": 200,
+  "timestamp": 1534955098193
+}
+```
+
+
+
+更新时间
+----
+
+该文档最后更新于： 2019-06-23 PM 17:19
\ No newline at end of file

src/components/Table/index.js

+import T from 'ant-design-vue/es/table/Table'
+import get from 'lodash.get'
+
+export default {
+  data () {
+    return {
+      needTotalList: [],
+
+      selectedRows: [],
+      selectedRowKeys: [],
+
+      localLoading: false,
+      localDataSource: [],
+      localPagination: Object.assign({}, this.pagination)
+    }
+  },
+  props: Object.assign({}, T.props, {
+    rowKey: {
+      type: [String, Function],
+      default: 'key'
+    },
+    data: {
+      type: Function,
+      required: true
+    },
+    pageNum: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    showSizeChanger: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    /**
+     * alert: {
+     *   show: true,
+     *   clear: Function
+     * }
+     */
+    alert: {
+      type: [Object, Boolean],
+      default: null
+    },
+    rowSelection: {
+      type: Object,
+      default: null
+    },
+    /** @Deprecated */
+    showAlertInfo: {
+      type: Boolean,
+      default: false
+    },
+    showPagination: {
+      type: String | Boolean,
+      default: 'auto'
+    },
+    /**
+     * enable page URI mode
+     *
+     * e.g:
+     * /users/1
+     * /users/2
+     * /users/3?queryParam=test
+     * ...
+     */
+    pageURI: {
+      type: Boolean,
+      default: false
+    }
+  }),
+  watch: {
+    'localPagination.current' (val) {
+      this.pageURI && this.$router.push({
+        ...this.$route,
+        name: this.$route.name,
+        params: Object.assign({}, this.$route.params, {
+          pageNo: val
+        })
+      })
+    },
+    pageNum (val) {
+      Object.assign(this.localPagination, {
+        current: val
+      })
+    },
+    pageSize (val) {
+      Object.assign(this.localPagination, {
+        pageSize: val
+      })
+    },
+    showSizeChanger (val) {
+      Object.assign(this.localPagination, {
+        showSizeChanger: val
+      })
+    }
+  },
+  created () {
+    const { pageNo } = this.$route.params
+    const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum
+    this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
+      current: localPageNum,
+      pageSize: this.pageSize,
+      showSizeChanger: this.showSizeChanger
+    }) || false
+    console.log('this.localPagination', this.localPagination)
+    this.needTotalList = this.initTotalList(this.columns)
+    this.loadData()
+  },
+  methods: {
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     * @param Boolean bool
+     */
+    refresh (bool = false) {
+      bool && (this.localPagination = Object.assign({}, {
+        current: 1, pageSize: this.pageSize
+      }))
+      this.loadData()
+    },
+    /**
+     * 加载数据方法
+     * @param {Object} pagination 分页选项器
+     * @param {Object} filters 过滤条件
+     * @param {Object} sorter 排序条件
+     */
+    loadData (pagination, filters, sorter) {
+      this.localLoading = true
+      const parameter = Object.assign({
+        pageNo: (pagination && pagination.current) ||
+          this.showPagination && this.localPagination.current || this.pageNum,
+        pageSize: (pagination && pagination.pageSize) ||
+          this.showPagination && this.localPagination.pageSize || this.pageSize
+      },
+      (sorter && sorter.field && {
+        sortField: sorter.field
+      }) || {},
+      (sorter && sorter.order && {
+        sortOrder: sorter.order
+      }) || {}, {
+        ...filters
+      }
+      )
+      console.log('parameter', parameter)
+      const result = this.data(parameter)
+      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
+      // eslint-disable-next-line
+      if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
+        result.then(r => {
+          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
+            current: r.pageNo, // 返回结果中的当前分页数
+            total: r.totalCount, // 返回结果中的总记录数
+            showSizeChanger: this.showSizeChanger,
+            pageSize: (pagination && pagination.pageSize) ||
+              this.localPagination.pageSize
+          }) || false
+          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
+            this.localPagination.current--
+            this.loadData()
+            return
+          }
+
+          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
+          // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
+          try {
+            if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
+              this.localPagination.hideOnSinglePage = true
+            }
+          } catch (e) {
+            this.localPagination = false
+          }
+          console.log('loadData -> this.localPagination', this.localPagination)
+          this.localDataSource = r.data // 返回结果中的数组数据
+          this.localLoading = false
+        })
+      }
+    },
+    initTotalList (columns) {
+      const totalList = []
+      columns && columns instanceof Array && columns.forEach(column => {
+        if (column.needTotal) {
+          totalList.push({
+            ...column,
+            total: 0
+          })
+        }
+      })
+      return totalList
+    },
+    /**
+     * 用于更新已选中的列表数据 total 统计
+     * @param selectedRowKeys
+     * @param selectedRows
+     */
+    updateSelect (selectedRowKeys, selectedRows) {
+      this.selectedRows = selectedRows
+      this.selectedRowKeys = selectedRowKeys
+      const list = this.needTotalList
+      this.needTotalList = list.map(item => {
+        return {
+          ...item,
+          total: selectedRows.reduce((sum, val) => {
+            const total = sum + parseInt(get(val, item.dataIndex))
+            return isNaN(total) ? 0 : total
+          }, 0)
+        }
+      })
+    },
+    /**
+     * 清空 table 已选中项
+     */
+    clearSelected () {
+      if (this.rowSelection) {
+        this.rowSelection.onChange([], [])
+        this.updateSelect([], [])
+      }
+    },
+    /**
+     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
+     * @param callback
+     * @returns {*}
+     */
+    renderClear (callback) {
+      if (this.selectedRowKeys.length <= 0) return null
+      return (
+        <a style="margin-left: 24px" onClick={() => {
+          callback()
+          this.clearSelected()
+        }}>清空</a>
+      )
+    },
+    renderAlert () {
+      // 绘制统计列数据
+      const needTotalItems = this.needTotalList.map((item) => {
+        return (<span style="margin-right: 12px">
+          {item.title}总计 <a style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
+        </span>)
+      })
+
+      // 绘制 清空 按钮
+      const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
+        this.renderClear(this.clearSelected)
+      ) : (this.alert !== null && typeof this.alert.clear === 'function') ? (
+        this.renderClear(this.alert.clear)
+      ) : null
+
+      // 绘制 alert 组件
+      return (
+        <a-alert showIcon={true} style="margin-bottom: 16px">
+          <template slot="message">
+            <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
+            {needTotalItems}
+            {clearItem}
+          </template>
+        </a-alert>
+      )
+    }
+  },
+
+  render () {
+    const props = {}
+    const localKeys = Object.keys(this.$data)
+    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
+
+    Object.keys(T.props).forEach(k => {
+      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
+      if (localKeys.includes(localKey)) {
+        props[k] = this[localKey]
+        return props[k]
+      }
+      if (k === 'rowSelection') {
+        if (showAlert && this.rowSelection) {
+          // 如果需要使用alert，则重新绑定 rowSelection 事件
+          console.log('this.rowSelection', this.rowSelection)
+          props[k] = {
+            ...this.rowSelection,
+            selectedRows: this.selectedRows,
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+              this.updateSelect(selectedRowKeys, selectedRows)
+              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
+            }
+          }
+          return props[k]
+        } else if (!this.rowSelection) {
+          // 如果没打算开启 rowSelection 则清空默认的选择项
+          props[k] = null
+          return props[k]
+        }
+      }
+      this[k] && (props[k] = this[k])
+      return props[k]
+    })
+    const table = (
+      <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}>
+        { Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>)) }
+      </a-table>
+    )
+
+    return (
+      <div class="table-wrapper">
+        { showAlert ? this.renderAlert() : null }
+        { table }
+      </div>
+    )
+  }
+}

src/components/TagSelect/TagSelectOption.jsx

+import { Tag } from 'ant-design-vue'
+const { CheckableTag } = Tag
+
+export default {
+  name: 'TagSelectOption',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-tag-select-option'
+    },
+    value: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      localChecked: this.checked || false
+    }
+  },
+  watch: {
+    'checked' (val) {
+      this.localChecked = val
+    },
+    '$parent.items': {
+      handler: function (val) {
+        this.value && val.hasOwnProperty(this.value) && (this.localChecked = val[this.value])
+      },
+      deep: true
+    }
+  },
+  render () {
+    const { $slots, value } = this
+    const onChange = (checked) => {
+      this.$emit('change', { value, checked })
+    }
+    return (<CheckableTag key={value} vModel={this.localChecked} onChange={onChange}>
+      {$slots.default}
+    </CheckableTag>)
+  }
+}

src/components/TagSelect/index.jsx

+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import Option from './TagSelectOption.jsx'
+import { filterEmpty } from '@/components/_util/util'
+
+export default {
+  Option,
+  name: 'TagSelect',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-tag-select'
+    },
+    defaultValue: {
+      type: PropTypes.array,
+      default: null
+    },
+    value: {
+      type: PropTypes.array,
+      default: null
+    },
+    expandable: {
+      type: Boolean,
+      default: false
+    },
+    hideCheckAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      expand: false,
+      localCheckAll: false,
+      items: this.getItemsKey(filterEmpty(this.$slots.default)),
+      val: this.value || this.defaultValue || []
+    }
+  },
+  methods: {
+    onChange (checked) {
+      const key = Object.keys(this.items).filter(key => key === checked.value)
+      this.items[key] = checked.checked
+      const bool = Object.values(this.items).lastIndexOf(false)
+      if (bool === -1) {
+        this.localCheckAll = true
+      } else {
+        this.localCheckAll = false
+      }
+    },
+    onCheckAll (checked) {
+      Object.keys(this.items).forEach(v => {
+        this.items[v] = checked.checked
+      })
+      this.localCheckAll = checked.checked
+    },
+    getItemsKey (items) {
+      const totalItem = {}
+      items.forEach(item => {
+        totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
+      })
+      return totalItem
+    },
+    // CheckAll Button
+    renderCheckAll () {
+      return !this.hideCheckAll && (<Option key={'total'} checked={this.localCheckAll} onChange={this.onCheckAll}>All</Option>) || null
+    },
+    // expandable
+    renderExpandable () {
+
+    },
+    // render option
+    renderTags (items) {
+      const listeners = {
+        change: (checked) => {
+          this.onChange(checked)
+          this.$emit('change', checked)
+        }
+      }
+
+      return items.map(vnode => {
+        const options = vnode.componentOptions
+        options.listeners = listeners
+        return vnode
+      })
+    }
+  },
+  render () {
+    const { $props: { prefixCls } } = this
+    const classString = {
+      [`${prefixCls}`]: true
+    }
+    const tagItems = filterEmpty(this.$slots.default)
+    return (
+      <div class={classString}>
+        {this.renderCheckAll()}
+        {this.renderTags(tagItems)}
+      </div>
+    )
+  }
+}

src/components/TextArea/index.jsx

+import './style.less'
+import { getStrFullLength, cutStrByFullLength } from '../_util/util'
+import Input from 'ant-design-vue/es/input'
+const TextArea = Input.TextArea
+
+export default {
+  name: 'LimitTextArea',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: Object.assign({}, TextArea.props, {
+    prefixCls: {
+      type: String,
+      default: 'ant-textarea-limit'
+    },
+    // eslint-disable-next-line
+    value: {
+      type: String
+    },
+    limit: {
+      type: Number,
+      default: 200
+    }
+  }),
+  data () {
+    return {
+      currentLimit: 0
+    }
+  },
+  watch: {
+    value (val) {
+      this.calcLimitNum(val)
+    }
+  },
+  created () {
+    this.calcLimitNum(this.value)
+  },
+  methods: {
+    handleChange (e) {
+      const value = e.target.value
+      const len = getStrFullLength(value)
+      if (len <= this.limit) {
+        this.currentLimit = len
+        this.$emit('change', value)
+        return
+      } else {
+        const str = cutStrByFullLength(value, this.limit)
+        this.currentLimit = getStrFullLength(str)
+        this.$emit('change', str)
+      }
+      console.error('limit out! currentLimit:', this.currentLimit)
+    },
+    calcLimitNum (val) {
+      const len = getStrFullLength(val)
+      this.currentLimit = len
+    }
+  },
+  render () {
+    const { prefixCls, ...props } = this.$props
+    return (
+      <div class={this.prefixCls}>
+        <TextArea {...{ props }} value={this.value} onChange={this.handleChange}>
+        </TextArea>
+        <span class="limit">{this.currentLimit}/{this.limit}</span>
+      </div>
+    )
+  }
+}

src/components/TextArea/style.less

+.ant-textarea-limit {
+  position: relative;
+
+  .limit {
+    position: absolute;
+    color: #909399;
+    background: #fff;
+    font-size: 12px;
+    bottom: 5px;
+    right: 10px;
+  }
+}
\ No newline at end of file

src/components/Tree/Tree.jsx

+import { Menu, Icon, Input } from 'ant-design-vue'
+
+const { Item, ItemGroup, SubMenu } = Menu
+const { Search } = Input
+
+export default {
+  name: 'Tree',
+  props: {
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    openKeys: {
+      type: Array,
+      default: () => []
+    },
+    search: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created () {
+    this.localOpenKeys = this.openKeys.slice(0)
+  },
+  data () {
+    return {
+      localOpenKeys: []
+    }
+  },
+  methods: {
+    handlePlus (item) {
+      this.$emit('add', item)
+    },
+    handleTitleClick (...args) {
+      this.$emit('titleClick', { args })
+    },
+
+    renderSearch () {
+      return (
+        <Search
+          placeholder="input search text"
+          style="width: 100%; margin-bottom: 1rem"
+        />
+      )
+    },
+    renderIcon (icon) {
+      return icon && (<Icon type={icon} />) || null
+    },
+    renderMenuItem (item) {
+      return (
+        <Item key={item.key}>
+          { this.renderIcon(item.icon) }
+          { item.title }
+          <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
+        </Item>
+      )
+    },
+    renderItem (item) {
+      return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
+    },
+    renderItemGroup (item) {
+      const childrenItems = item.children.map(o => {
+        return this.renderItem(o, o.key)
+      })
+
+      return (
+        <ItemGroup key={item.key}>
+          <template slot="title">
+            <span>{ item.title }</span>
+            <a-dropdown>
+              <a class="btn"><a-icon type="ellipsis" /></a>
+              <a-menu slot="overlay">
+                <a-menu-item key="1">新增</a-menu-item>
+                <a-menu-item key="2">合并</a-menu-item>
+                <a-menu-item key="3">移除</a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+          { childrenItems }
+        </ItemGroup>
+      )
+    },
+    renderSubItem (item, key) {
+      const childrenItems = item.children && item.children.map(o => {
+        return this.renderItem(o, o.key)
+      })
+
+      const title = (
+        <span slot="title">
+          { this.renderIcon(item.icon) }
+          <span>{ item.title }</span>
+        </span>
+      )
+
+      if (item.group) {
+        return this.renderItemGroup(item)
+      }
+      // titleClick={this.handleTitleClick(item)}
+      return (
+        <SubMenu key={key}>
+          { title }
+          { childrenItems }
+        </SubMenu>
+      )
+    }
+  },
+  render () {
+    const { dataSource, search } = this.$props
+
+    // this.localOpenKeys = openKeys.slice(0)
+    const list = dataSource.map(item => {
+      return this.renderItem(item)
+    })
+
+    return (
+      <div class="tree-wrapper">
+        { search ? this.renderSearch() : null }
+        <Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
+          { list }
+        </Menu>
+      </div>
+    )
+  }
+}

src/components/Trend/Trend.vue

+<template>
+  <div :class="[prefixCls, reverseColor && 'reverse-color' ]">
+    <span>
+      <slot name="term"></slot>
+      <span class="item-text">
+        <slot></slot>
+      </span>
+    </span>
+    <span :class="[flag]"><a-icon :type="`caret-${flag}`"/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-trend'
+    },
+    /**
+       * 上升下降标识：up|down
+       */
+    flag: {
+      type: String,
+      required: true
+    },
+    /**
+       * 颜色反转
+       */
+    reverseColor: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

src/components/Trend/index.js

+import Trend from './Trend.vue'
+
+export default Trend

src/components/Trend/index.less

+@import "../index";
+
+@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
+
+.@{trend-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+
+  .item-text {
+    display: inline-block;
+    margin-left: 8px;
+    color: rgba(0,0,0,.85);
+  }
+
+  .up {
+    color: @red-6;
+  }
+  .down {
+    color: @green-6;
+    top: -1px;
+  }
+
+  &.reverse-color .up {
+    color: @green-6;
+  }
+  &.reverse-color .down {
+    color: @red-6;
+  }
+}
\ No newline at end of file

src/components/Trend/index.md

+# Trend 趋势标记
+
+趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
+
+
+
+引用方式：
+
+```javascript
+import Trend from '@/components/Trend'
+
+export default {
+    components: {
+        Trend
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<trend flag="up">5%</trend>
+```
+或
+```html
+<trend flag="up">
+    <span slot="term">工资</span>
+    5%
+</trend>
+```
+或
+```html
+<trend flag="up" term="工资">5%</trend>
+```
+
+
+## API
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| flag | 上升下降标识：`up|down` | string | - |
+| reverseColor | 颜色反转 | Boolean | false |
+

src/components/_util/util.js

+/**
+ * components util
+ */
+
+/**
+ * 清理空值，对象
+ * @param children
+ * @returns {*[]}
+ */
+export function filterEmpty (children = []) {
+  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+}
+
+/**
+ * 获取字符串长度，英文字符 长度1，中文字符长度2
+ * @param {*} str
+ */
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1
+    }
+    return pre + 2
+  }, 0)
+
+/**
+ * 截取字符串，根据 maxLength 截取后返回
+ * @param {*} str
+ * @param {*} maxLength
+ */
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1
+    } else {
+      showLength += 2
+    }
+    if (showLength <= maxLength) {
+      return pre + cur
+    }
+    return pre
+  }, '')
+}

src/components/global.less

+@import './index.less';
+
+body {
+
+  &.colorWeak {
+    filter: invert(80%);
+  }
+  &.userLayout {
+    overflow: auto;
+  }
+}
+
+.layout.ant-layout {
+  height: auto;
+  overflow-x: hidden;
+
+  &.mobile,
+  &.tablet {
+    .ant-layout-content {
+      .content {
+        margin: 24px 0 0;
+      }
+    }
+
+    /**
+     * ant-table-wrapper
+     * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
+     */
+    .ant-table-wrapper {
+      .ant-table-content {
+        overflow-y: auto;
+      }
+      .ant-table-body {
+        min-width: 800px;
+      }
+    }
+    .topmenu {
+      /* 必须为 topmenu  才能启用流式布局 */
+      &.content-width-Fluid {
+        .header-index-wide {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.mobile {
+    .sidemenu {
+      .ant-header-fixedHeader {
+        &.ant-header-side-opened,
+        &.ant-header-side-closed {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &.ant-layout-has-sider {
+    flex-direction: row;
+  }
+
+  .trigger {
+    font-size: 20px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .topmenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width 0.2s;
+
+      &.ant-header-side-opened {
+        width: 100%;
+      }
+
+      &.ant-header-side-closed {
+        width: 100%;
+      }
+    }
+    /* 必须为 topmenu  才能启用流式布局 */
+    &.content-width-Fluid {
+      .header-index-wide {
+        max-width: unset;
+        .header-index-left {
+          flex: 1 1 1000px;
+          .logo{
+            margin-left: 25px;
+          }
+          .ant-menu.ant-menu-horizontal{
+            max-width: calc(100vw - 190px - 238px - 25px);
+            flex: 1 1 calc(100vw - 190px - 238px - 25px);
+          }
+        }
+        .header-index-right{
+          margin-right:25px;
+        }
+      }
+
+      .page-header-index-wide {
+        max-width: unset;
+      }
+    }
+  }
+
+  .sidemenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width 0.2s;
+
+      &.ant-header-side-opened {
+        width: calc(100% - 256px);
+      }
+
+      &.ant-header-side-closed {
+        width: calc(100% - 80px);
+      }
+    }
+  }
+
+  .header {
+    height: 64px;
+    padding: 0 12px 0 0;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
+  }
+
+  .header,
+  .top-nav-header-index {
+    .user-wrapper {
+      float: right;
+      height: 100%;
+
+      .action {
+        cursor: pointer;
+        padding: 0 12px;
+        display: inline-block;
+        transition: all 0.3s;
+        height: 100%;
+        color: rgba(0, 0, 0, 0.65);
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+
+        .avatar {
+          margin: 20px 8px 20px 0;
+          color: #1890ff;
+          background: hsla(0, 0%, 100%, 0.85);
+          vertical-align: middle;
+        }
+
+        .icon {
+          font-size: 16px;
+          padding: 4px;
+        }
+      }
+    }
+
+    &.dark {
+      .user-wrapper {
+        .action {
+          color: rgba(255, 255, 255, 0.85);
+          a {
+            color: rgba(255, 255, 255, 0.85);
+          }
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.16);
+          }
+        }
+      }
+    }
+  }
+
+  &.mobile,
+  &.tablet {
+    .top-nav-header-index {
+      .header-index-wide {
+        .header-index-left {
+          .trigger {
+            color: rgba(255, 255, 255, 0.85);
+            padding: 0 12px;
+          }
+
+          .logo.top-nav-header {
+            flex: 0 0 56px;
+            text-align: center;
+            line-height: 58px;
+            h1 {
+              display: none;
+            }
+          }
+        }
+      }
+
+      &.light {
+        .header-index-wide {
+          .header-index-left {
+            .trigger {
+              color: rgba(0, 0, 0, 0.65);
+            }
+          }
+        }
+        //
+      }
+    }
+  }
+
+  &.tablet {
+    // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
+    .top-nav-header-index {
+      .header-index-wide {
+        .header-index-left {
+          .logo > a {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .ant-menu.ant-menu-horizontal {
+          flex: 1 1 auto;
+          white-space: normal;
+        }
+      }
+    }
+  }
+
+  .top-nav-header-index {
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
+    transition: background 0.3s, width 0.2s;
+
+    .header-index-wide {
+      max-width: 1200px;
+      margin: auto;
+      padding-left: 0;
+      display: flex;
+      height: 64px;
+
+      .ant-menu.ant-menu-horizontal {
+        max-width: 835px;
+        flex: 0 1 835px;
+        border: none;
+        height: 64px;
+        line-height: 64px;
+      }
+
+      .header-index-left {
+        flex: 0 1 1000px;
+        display: flex;
+
+        .logo.top-nav-header {
+          flex: 0 0 165px;
+          width: 165px;
+          height: 64px;
+          position: relative;
+          line-height: 64px;
+          transition: all 0.3s;
+          overflow: hidden;
+
+          img,
+          svg {
+            display: inline-block;
+            vertical-align: middle;
+            height: 32px;
+            width: 32px;
+          }
+
+          h1 {
+            color: #fff;
+            display: inline-block;
+            vertical-align: top;
+            font-size: 16px;
+            margin: 0 0 0 12px;
+            font-weight: 400;
+          }
+        }
+      }
+
+      .header-index-right {
+        flex: 0 0 238px;
+        align-self: flex-end;
+        height: 64px;
+        overflow: hidden;
+
+        .content-box {
+          float: right;
+          .action {
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        }
+      }
+    }
+
+    &.light {
+      background-color: #fff;
+
+      .header-index-wide {
+        .header-index-left {
+          .logo {
+            h1 {
+              color: #002140;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 内容区
+  .layout-content {
+    margin: 24px 24px 0px;
+    height: 100%;
+    height: 64px;
+    padding: 0 12px 0 0;
+  }
+
+  // footer
+  .ant-layout-footer {
+    padding: 0;
+  }
+}
+
+.topmenu {
+  .page-header-index-wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+// drawer-sider 自定义
+.ant-drawer.drawer-sider {
+  .sider {
+    box-shadow: none;
+  }
+
+  &.dark {
+    .ant-drawer-content {
+      background-color: rgb(0, 21, 41);
+    }
+  }
+  &.light {
+    box-shadow: none;
+    .ant-drawer-content {
+      background-color: #fff;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 0;
+  }
+}
+
+// 菜单样式
+.sider {
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  position: relative;
+  z-index: @ant-global-sider-zindex;
+  min-height: 100vh;
+
+  .ant-layout-sider-children {
+    overflow-y: hidden;
+
+    &:hover {
+      overflow-y: auto;
+    }
+  }
+
+  &.ant-fixed-sidemenu {
+    position: fixed;
+    height: 100%;
+  }
+
+  .logo {
+    position: relative;
+    height: 64px;
+    padding-left: 24px;
+    overflow: hidden;
+    line-height: 64px;
+    background: #002140;
+    transition: all .3s;
+
+    img,
+    svg,
+    h1 {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    img,
+    svg {
+      height: 32px;
+      width: 32px;
+    }
+
+    h1 {
+      color: #fff;
+      font-size: 20px;
+      margin: 0 0 0 12px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-weight: 600;
+      vertical-align: middle;
+    }
+  }
+
+  &.light {
+    background-color: #fff;
+    box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
+
+    .logo {
+      background: #fff;
+      box-shadow: 1px 1px 0px 0px #e8e8e8;
+
+      h1 {
+        color: unset;
+      }
+    }
+
+    .ant-menu-light {
+      border-right-color: transparent;
+    }
+  }
+}
+
+// 外置的样式控制
+.user-dropdown-menu {
+  span {
+    user-select: none;
+  }
+}
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
+  padding: 4px 0;
+
+  .ant-dropdown-menu-item {
+    width: 160px;
+  }
+
+  .ant-dropdown-menu-item > .anticon:first-child,
+  .ant-dropdown-menu-item > a > .anticon:first-child,
+  .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+    min-width: 12px;
+    margin-right: 8px;
+  }
+}
+
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
+
+.table-page-search-wrapper {
+  .ant-form-inline {
+    .ant-form-item {
+      display: flex;
+      margin-bottom: 24px;
+      margin-right: 0;
+
+      .ant-form-item-control-wrapper {
+        flex: 1 1;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      > .ant-form-item-label {
+        line-height: 32px;
+        padding-right: 8px;
+        width: auto;
+      }
+      .ant-form-item-control {
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
+
+.content {
+  .table-operator {
+    margin-bottom: 18px;
+
+    button {
+      margin-right: 8px;
+    }
+  }
+}

src/components/index.js

+// chart
+import Bar from '@/components/Charts/Bar'
+import ChartCard from '@/components/Charts/ChartCard'
+import Liquid from '@/components/Charts/Liquid'
+import MiniArea from '@/components/Charts/MiniArea'
+import MiniSmoothArea from '@/components/Charts/MiniSmoothArea'
+import MiniBar from '@/components/Charts/MiniBar'
+import MiniProgress from '@/components/Charts/MiniProgress'
+import Radar from '@/components/Charts/Radar'
+import RankList from '@/components/Charts/RankList'
+import TransferBar from '@/components/Charts/TransferBar'
+import TagCloud from '@/components/Charts/TagCloud'
+
+// pro components
+import AvatarList from '@/components/AvatarList'
+import CountDown from '@/components/CountDown'
+import Ellipsis from '@/components/Ellipsis'
+import FooterToolbar from '@/components/FooterToolbar'
+import NumberInfo from '@/components/NumberInfo'
+import DescriptionList from '@/components/DescriptionList'
+import Tree from '@/components/Tree/Tree'
+import Trend from '@/components/Trend'
+import STable from '@/components/Table'
+import MultiTab from '@/components/MultiTab'
+import Result from '@/components/Result'
+import IconSelector from '@/components/IconSelector'
+import TagSelect from '@/components/TagSelect'
+import ExceptionPage from '@/components/Exception'
+import StandardFormRow from '@/components/StandardFormRow'
+import ArticleListContent from '@/components/ArticleListContent'
+
+export {
+  AvatarList,
+  Bar,
+  ChartCard,
+  Liquid,
+  MiniArea,
+  MiniSmoothArea,
+  MiniBar,
+  MiniProgress,
+  Radar,
+  TagCloud,
+  RankList,
+  TransferBar,
+  Trend,
+  CountDown,
+  Ellipsis,
+  FooterToolbar,
+  NumberInfo,
+  DescriptionList,
+  // 兼容写法，请勿继续使用
+  DescriptionList as DetailList,
+  Tree,
+  STable,
+  MultiTab,
+  Result,
+  ExceptionPage,
+  IconSelector,
+  TagSelect,
+  StandardFormRow,
+  ArticleListContent
+}

src/components/index.less

+@import "~ant-design-vue/lib/style/index";
+
+// The prefix to use on all css classes from ant-pro.
+@ant-pro-prefix             : ant-pro;
+@ant-global-sider-zindex    : 106;
+@ant-global-header-zindex   : 105;
\ No newline at end of file

src/components/tools/Breadcrumb.vue

+<template>
+  <a-breadcrumb class="breadcrumb">
+    <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
+      <router-link
+        v-if="item.name != name && index != 1"
+        :to="{ path: item.path === '' ? '/' : item.path }"
+      >{{ item.meta.title }}</router-link>
+      <span v-else>{{ item.meta.title }}</span>
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: '',
+      breadList: []
+    }
+  },
+  created () {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb () {
+      this.breadList = []
+      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
+
+      this.name = this.$route.name
+      this.$route.matched.forEach(item => {
+        // item.name !== 'index' && this.breadList.push(item)
+        this.breadList.push(item)
+      })
+    }
+  },
+  watch: {
+    $route () {
+      this.getBreadcrumb()
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/tools/DetailList.vue

+<script>
+/* WARNING: 兼容老引入，请勿继续使用 */
+import DescriptionList from '@/components/DescriptionList'
+export default DescriptionList
+</script>

src/components/tools/HeadInfo.vue

+<template>
+  <div class="head-info" :class="center && 'center'">
+    <span>{{ title }}</span>
+    <p>{{ content }}</p>
+    <em v-if="bordered"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeadInfo',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .head-info {
+    position: relative;
+    text-align: left;
+    padding: 0 32px 0 0;
+    min-width: 125px;
+
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
+    span {
+      color: rgba(0, 0, 0, .45);
+      display: inline-block;
+      font-size: 14px;
+      line-height: 22px;
+      margin-bottom: 4px;
+    }
+    p {
+      color: rgba(0, 0, 0, .85);
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+    }
+    em {
+      background-color: #e8e8e8;
+      position: absolute;
+      height: 56px;
+      width: 1px;
+      top: 0;
+      right: 0;
+    }
+  }
+</style>

src/components/tools/LangSelect.vue

+<template>
+  <a-dropdown>
+    <span class="action global-lang">
+      <a-icon type="global" style="font-size: 16px"/>
+    </span>
+    <a-menu slot="overlay" style="width: 150px;" @click="SwitchLang">
+      <a-menu-item key="zh-CN">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="简体中文">🇨🇳</span> 简体中文
+        </a>
+      </a-menu-item>
+      <a-menu-item key="zh-TW">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="繁体中文">🇭🇰</span> 繁体中文
+        </a>
+      </a-menu-item>
+      <a-menu-item key="en-US">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="English">🇬🇧</span> English
+        </a>
+      </a-menu-item>
+      <a-menu-item key="pt-BR">
+        <a rel="noopener noreferrer">
+          <span role="img" aria-label="Português">🇧🇷</span> Português
+        </a>
+      </a-menu-item>
+    </a-menu>
+  </a-dropdown>
+</template>
+
+<script>
+// import { mixin as langMixin } from '@/store/i18n-mixin'
+
+export default {
+  name: 'LangSelect',
+  // mixins: [langMixin],
+  data () {
+    return {}
+  },
+  methods: {
+    // SwitchLang (row) {
+    //   this.setLang(row.key)
+    // }
+  }
+}
+</script>

src/components/tools/Logo.vue

+<template>
+  <div class="logo">
+    <router-link :to="{name:'dashboard'}">
+      <LogoSvg alt="logo" />
+      <h1 v-if="showTitle">{{ title }}</h1>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import LogoSvg from '@/assets/logo.svg?inline'
+
+export default {
+  name: 'Logo',
+  components: {
+    LogoSvg
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Ant Design Pro',
+      required: false
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+      required: false
+    }
+  }
+}
+</script>

src/components/tools/TwoStepCaptcha.vue

+<template>
+  <!-- 两步验证 -->
+  <a-modal
+    centered
+    v-model="visible"
+    @cancel="handleCancel"
+    :maskClosable="false"
+  >
+    <div slot="title" :style="{ textAlign: 'center' }">两步验证</div>
+    <template slot="footer">
+      <div :style="{ textAlign: 'center' }">
+        <a-button key="back" @click="handleCancel">返回</a-button>
+        <a-button key="submit" type="primary" :loading="stepLoading" @click="handleStepOk">
+          继续
+        </a-button>
+      </div>
+    </template>
+
+    <a-spin :spinning="stepLoading">
+      <a-form layout="vertical" :auto-form-create="(form)=>{this.form = form}">
+        <div class="step-form-wrapper">
+          <p style="text-align: center" v-if="!stepLoading">请在手机中打开 Google Authenticator 或两步验证 APP<br />输入 6 位动态码</p>
+          <p style="text-align: center" v-else>正在验证..<br/>请稍后</p>
+          <a-form-item
+            :style="{ textAlign: 'center' }"
+            hasFeedback
+            fieldDecoratorId="stepCode"
+            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入 6 位动态码!', pattern: /^\d{6}$/, len: 6 }]}"
+          >
+            <a-input :style="{ textAlign: 'center' }" @keyup.enter.native="handleStepOk" placeholder="000000" />
+          </a-form-item>
+          <p style="text-align: center">
+            <a @click="onForgeStepCode">遗失手机?</a>
+          </p>
+        </div>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      stepLoading: false,
+
+      form: null
+    }
+  },
+  methods: {
+    handleStepOk () {
+      const vm = this
+      this.stepLoading = true
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('values', values)
+          setTimeout(() => {
+            vm.stepLoading = false
+            vm.$emit('success', { values })
+          }, 2000)
+          return
+        }
+        this.stepLoading = false
+        this.$emit('error', { err })
+      })
+    },
+    handleCancel () {
+      this.visible = false
+      this.$emit('cancel')
+    },
+    onForgeStepCode () {
+
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .step-form-wrapper {
+    margin: 0 auto;
+    width: 80%;
+    max-width: 400px;
+  }
+</style>

src/components/tools/UserMenu.vue

+<template>
+  <div class="user-wrapper">
+    <div class="content-box">
+      <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
+        <span class="action">
+          <a-icon type="question-circle-o"></a-icon>
+        </span>
+      </a>
+      <notice-icon class="action"/>
+      <a-dropdown>
+        <span class="action ant-dropdown-link user-dropdown-menu">
+          <a-avatar class="avatar" size="small" :src="avatar"/>
+          <span>{{ nickname }}</span>
+        </span>
+        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+          <a-menu-item key="0">
+            <router-link :to="{ name: 'center' }">
+              <a-icon type="user"/>
+              <span>个人中心</span>
+            </router-link>
+          </a-menu-item>
+          <a-menu-item key="1">
+            <router-link :to="{ name: 'settings' }">
+              <a-icon type="setting"/>
+              <span>账户设置</span>
+            </router-link>
+          </a-menu-item>
+          <a-menu-item key="2" disabled>
+            <a-icon type="setting"/>
+            <span>测试</span>
+          </a-menu-item>
+          <a-menu-divider/>
+          <a-menu-item key="3">
+            <a href="javascript:;" @click="handleLogout">
+              <a-icon type="logout"/>
+              <span>退出登录</span>
+            </a>
+          </a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import NoticeIcon from '@/components/NoticeIcon'
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'UserMenu',
+  components: {
+    NoticeIcon
+  },
+  computed: {
+    ...mapGetters(['nickname', 'avatar'])
+
+  },
+  methods: {
+    ...mapActions(['Logout']),
+    handleLogout () {
+      this.$confirm({
+        title: '提示',
+        content: '真的要注销登录吗 ?',
+        onOk: () => {
+          return this.Logout({}).then(() => {
+            setTimeout(() => {
+              window.location.reload()
+            }, 16)
+          }).catch(err => {
+            this.$message.error({
+              title: '错误',
+              description: err.message
+            })
+          })
+        },
+        onCancel () {
+        }
+      })
+    }
+  }
+}
+</script>

src/config/defaultSettings.js

+/**
+ * 项目默认配置项
+ * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
+ * navTheme - sidebar theme ['dark', 'light'] 两种主题
+ * colorWeak - 色盲模式
+ * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
+ * fixedHeader - 固定 Header : boolean
+ * fixSiderbar - 固定左侧菜单栏 ： boolean
+ * autoHideHeader - 向下滚动时，隐藏 Header : boolean
+ * contentWidth - 内容区布局： 流式 |  固定
+ *
+ * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
+ *
+ */
+
+export default {
+  primaryColor: '#52C41A', // primary color of ant design
+  navTheme: 'dark', // theme for nav menu
+  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
+  fixedHeader: false, // sticky header
+  fixSiderbar: false, // sticky siderbar
+  autoHideHeader: false, //  auto hide header
+  colorWeak: false,
+  multiTab: false,
+  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
+  // vue-ls options
+  storageOptions: {
+    namespace: 'pro__', // key prefix
+    name: 'ls', // name variable Vue.[ls] or this.[$ls],
+    storage: 'local' // storage name session, local, memory
+  }
+}

src/config/router.config.js

+// eslint-disable-next-line
+import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
+import { bxAnaalyse } from '@/core/icons'
+
+export const asyncRouterMap = [
+
+  {
+    path: '/',
+    name: 'index',
+    component: BasicLayout,
+    meta: { title: '首页' },
+    redirect: '/dashboard/workplace',
+    children: [
+      // dashboard
+      {
+        path: '/dashboard',
+        name: 'dashboard',
+        redirect: '/dashboard/workplace',
+        component: RouteView,
+        meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
+        children: [
+          {
+            path: '/dashboard/analysis',
+            name: 'Analysis',
+            component: () => import('@/views/dashboard/Analysis'),
+            meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
+          },
+          // 外部链接
+          {
+            path: 'https://www.baidu.com/',
+            name: 'Monitor',
+            meta: { title: '监控页（外部）', target: '_blank' }
+          },
+          {
+            path: '/dashboard/workplace',
+            name: 'Workplace',
+            component: () => import('@/views/dashboard/Workplace'),
+            meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/dashboard/test-work',
+            name: 'TestWork',
+            component: () => import('@/views/dashboard/TestWork'),
+            meta: { title: '测试功能', keepAlive: true, permission: [ 'dashboard' ] }
+          }
+        ]
+      },
+
+      // forms
+      {
+        path: '/form',
+        redirect: '/form/base-form',
+        component: PageView,
+        meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
+        children: [
+          {
+            path: '/form/base-form',
+            name: 'BaseForm',
+            component: () => import('@/views/form/BasicForm'),
+            meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
+          },
+          {
+            path: '/form/step-form',
+            name: 'StepForm',
+            component: () => import('@/views/form/stepForm/StepForm'),
+            meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
+          },
+          {
+            path: '/form/advanced-form',
+            name: 'AdvanceForm',
+            component: () => import('@/views/form/advancedForm/AdvancedForm'),
+            meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
+          }
+        ]
+      },
+
+      // list
+      {
+        path: '/list',
+        name: 'list',
+        component: PageView,
+        redirect: '/list/table-list',
+        meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
+        children: [
+          {
+            path: '/list/table-list/:pageNo([1-9]\\d*)?',
+            name: 'TableListWrapper',
+            hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
+            component: () => import('@/views/list/TableList'),
+            meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
+          },
+          {
+            path: '/list/basic-list',
+            name: 'BasicList',
+            component: () => import('@/views/list/StandardList'),
+            meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
+          },
+          {
+            path: '/list/card',
+            name: 'CardList',
+            component: () => import('@/views/list/CardList'),
+            meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
+          },
+          {
+            path: '/list/search',
+            name: 'SearchList',
+            component: () => import('@/views/list/search/SearchLayout'),
+            redirect: '/list/search/article',
+            meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
+            children: [
+              {
+                path: '/list/search/article',
+                name: 'SearchArticles',
+                component: () => import('../views/list/search/Article'),
+                meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
+              },
+              {
+                path: '/list/search/project',
+                name: 'SearchProjects',
+                component: () => import('../views/list/search/Projects'),
+                meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
+              },
+              {
+                path: '/list/search/application',
+                name: 'SearchApplications',
+                component: () => import('../views/list/search/Applications'),
+                meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
+              }
+            ]
+          }
+        ]
+      },
+
+      // profile
+      {
+        path: '/profile',
+        name: 'profile',
+        component: RouteView,
+        redirect: '/profile/basic',
+        meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
+        children: [
+          {
+            path: '/profile/basic',
+            name: 'ProfileBasic',
+            component: () => import('@/views/profile/basic/Index'),
+            meta: { title: '基础详情页', permission: [ 'profile' ] }
+          },
+          {
+            path: '/profile/advanced',
+            name: 'ProfileAdvanced',
+            component: () => import('@/views/profile/advanced/Advanced'),
+            meta: { title: '高级详情页', permission: [ 'profile' ] }
+          }
+        ]
+      },
+
+      // result
+      {
+        path: '/result',
+        name: 'result',
+        component: PageView,
+        redirect: '/result/success',
+        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
+        children: [
+          {
+            path: '/result/success',
+            name: 'ResultSuccess',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
+            meta: { title: '成功', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+          },
+          {
+            path: '/result/fail',
+            name: 'ResultFail',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
+            meta: { title: '失败', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+          }
+        ]
+      },
+
+      // Exception
+      {
+        path: '/exception',
+        name: 'exception',
+        component: RouteView,
+        redirect: '/exception/403',
+        meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
+        children: [
+          {
+            path: '/exception/403',
+            name: 'Exception403',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
+            meta: { title: '403', permission: [ 'exception' ] }
+          },
+          {
+            path: '/exception/404',
+            name: 'Exception404',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
+            meta: { title: '404', permission: [ 'exception' ] }
+          },
+          {
+            path: '/exception/500',
+            name: 'Exception500',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
+            meta: { title: '500', permission: [ 'exception' ] }
+          }
+        ]
+      },
+
+      // account
+      {
+        path: '/account',
+        component: RouteView,
+        redirect: '/account/center',
+        name: 'account',
+        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
+        children: [
+          {
+            path: '/account/center',
+            name: 'center',
+            component: () => import('@/views/account/center/Index'),
+            meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
+          },
+          {
+            path: '/account/settings',
+            name: 'settings',
+            component: () => import('@/views/account/settings/Index'),
+            meta: { title: '个人设置', hideHeader: true, permission: [ 'user' ] },
+            redirect: '/account/settings/base',
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: '/account/settings/base',
+                name: 'BaseSettings',
+                component: () => import('@/views/account/settings/BaseSetting'),
+                meta: { title: '基本设置', permission: [ 'user' ] }
+              },
+              {
+                path: '/account/settings/security',
+                name: 'SecuritySettings',
+                component: () => import('@/views/account/settings/Security'),
+                meta: { title: '安全设置', keepAlive: true, permission: [ 'user' ] }
+              },
+              {
+                path: '/account/settings/custom',
+                name: 'CustomSettings',
+                component: () => import('@/views/account/settings/Custom'),
+                meta: { title: '个性化设置', keepAlive: true, permission: [ 'user' ] }
+              },
+              {
+                path: '/account/settings/binding',
+                name: 'BindingSettings',
+                component: () => import('@/views/account/settings/Binding'),
+                meta: { title: '账户绑定', keepAlive: true, permission: [ 'user' ] }
+              },
+              {
+                path: '/account/settings/notification',
+                name: 'NotificationSettings',
+                component: () => import('@/views/account/settings/Notification'),
+                meta: { title: '新消息通知', keepAlive: true, permission: [ 'user' ] }
+              }
+            ]
+          }
+        ]
+      },
+
+      // other
+      {
+        path: '/other',
+        name: 'otherPage',
+        component: PageView,
+        meta: { title: '其他组件', icon: 'slack', permission: [ 'dashboard' ] },
+        redirect: '/other/icon-selector',
+        children: [
+          {
+            path: '/other/icon-selector',
+            name: 'TestIconSelect',
+            component: () => import('@/views/other/IconSelectorView'),
+            meta: { title: 'IconSelector', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/other/list',
+            component: RouteView,
+            meta: { title: '业务布局', icon: 'layout', permission: [ 'support' ] },
+            redirect: '/other/list/tree-list',
+            children: [
+              {
+                path: '/other/list/tree-list',
+                name: 'TreeList',
+                component: () => import('@/views/other/TreeList'),
+                meta: { title: '树目录表格', keepAlive: true }
+              },
+              {
+                path: '/other/list/edit-table',
+                name: 'EditList',
+                component: () => import('@/views/other/TableInnerEditList'),
+                meta: { title: '内联编辑表格', keepAlive: true }
+              },
+              {
+                path: '/other/list/user-list',
+                name: 'UserList',
+                component: () => import('@/views/other/UserList'),
+                meta: { title: '用户列表', keepAlive: true }
+              },
+              {
+                path: '/other/list/role-list',
+                name: 'RoleList',
+                component: () => import('@/views/other/RoleList'),
+                meta: { title: '角色列表', keepAlive: true }
+              },
+              {
+                path: '/other/list/system-role',
+                name: 'SystemRole',
+                component: () => import('@/views/role/RoleList'),
+                meta: { title: '角色列表2', keepAlive: true }
+              },
+              {
+                path: '/other/list/permission-list',
+                name: 'PermissionList',
+                component: () => import('@/views/other/PermissionList'),
+                meta: { title: '权限列表', keepAlive: true }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '*', redirect: '/404', hidden: true
+  }
+]
+
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/user',
+    component: UserLayout,
+    redirect: '/user/login',
+    hidden: true,
+    children: [
+      {
+        path: 'login',
+        name: 'login',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
+      },
+      {
+        path: 'register',
+        name: 'register',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
+      },
+      {
+        path: 'register-result',
+        name: 'registerResult',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
+      },
+      {
+        path: 'recover',
+        name: 'recover',
+        component: undefined
+      }
+    ]
+  },
+
+  {
+    path: '/test',
+    component: BlankLayout,
+    redirect: '/test/home',
+    children: [
+      {
+        path: 'home',
+        name: 'TestHome',
+        component: () => import('@/views/Home')
+      }
+    ]
+  },
+
+  {
+    path: '/404',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
+  }
+
+]

src/core/bootstrap.js

+import Vue from 'vue'
+import store from '@/store/'
+import {
+  ACCESS_TOKEN,
+  DEFAULT_COLOR,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR_WEAK,
+  SIDEBAR_TYPE,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_CONTENT_WIDTH_TYPE,
+  DEFAULT_MULTI_TAB
+} from '@/store/mutation-types'
+import config from '@/config/defaultSettings'
+
+export default function Initializer () {
+  console.log(`API_URL: ${process.env.VUE_APP_API_BASE_URL}`)
+
+  store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
+  store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
+  store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
+  store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
+  store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
+  store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
+  store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
+  store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
+  store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
+  store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
+  store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
+
+  // last step
+}

src/core/directives/action.js

+import Vue from 'vue'
+import store from '@/store'
+
+/**
+ * Action 权限指令
+ * 指令用法：
+ *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
+ *    <i-button v-action:add >添加用户</a-button>
+ *    <a-button v-action:delete>删除用户</a-button>
+ *    <a v-action:edit @click="edit(record)">修改</a>
+ *
+ *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
+ *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
+ *
+ *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
+ */
+const action = Vue.directive('action', {
+  inserted: function (el, binding, vnode) {
+    const actionName = binding.arg
+    const roles = store.getters.roles
+    const elVal = vnode.context.$route.meta.permission
+    const permissionId = elVal instanceof String && [elVal] || elVal
+    roles.permissions.forEach(p => {
+      if (!permissionId.includes(p.permissionId)) {
+        return
+      }
+      if (p.actionList && !p.actionList.includes(actionName)) {
+        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
+      }
+    })
+  }
+})
+
+export default action

src/core/icons.js

+/**
+ * Custom icon list
+ * All icons are loaded here for easy management
+ * @see https://vue.ant.design/components/icon/#Custom-Font-Icon
+ *
+ * 自定义图标加载表
+ * 所有图标均从这里加载，方便管理
+ */
+import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline' // path to your '*.svg?inline' file.
+
+export { bxAnaalyse }

src/core/lazy_lib/components_use.js

+
+/* eslint-disable */
+/**
+ * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。
+ * 减少了编译支持库包大小
+ *
+ * 当需要更多组件依赖时，在该文件加入即可
+ */
+import Vue from 'vue'
+import {
+  LocaleProvider,
+  Layout,
+  Input,
+  InputNumber,
+  Button,
+  Switch,
+  Radio,
+  Checkbox,
+  Select,
+  Card,
+  Form,
+  Row,
+  Col,
+  Modal,
+  Table,
+  Tabs,
+  Icon,
+  Badge,
+  Popover,
+  Dropdown,
+  List,
+  Avatar,
+  Breadcrumb,
+  Steps,
+  Spin,
+  Menu,
+  Drawer,
+  Tooltip,
+  Alert,
+  Tag,
+  Divider,
+  DatePicker,
+  TimePicker,
+  Upload,
+  Progress,
+  Skeleton,
+  Popconfirm,
+  message,
+  notification
+} from 'ant-design-vue'
+// import VueCropper from 'vue-cropper'
+
+Vue.use(LocaleProvider)
+Vue.use(Layout)
+Vue.use(Input)
+Vue.use(InputNumber)
+Vue.use(Button)
+Vue.use(Switch)
+Vue.use(Radio)
+Vue.use(Checkbox)
+Vue.use(Select)
+Vue.use(Card)
+Vue.use(Form)
+Vue.use(Row)
+Vue.use(Col)
+Vue.use(Modal)
+Vue.use(Table)
+Vue.use(Tabs)
+Vue.use(Icon)
+Vue.use(Badge)
+Vue.use(Popover)
+Vue.use(Dropdown)
+Vue.use(List)
+Vue.use(Avatar)
+Vue.use(Breadcrumb)
+Vue.use(Steps)
+Vue.use(Spin)
+Vue.use(Menu)
+Vue.use(Drawer)
+Vue.use(Tooltip)
+Vue.use(Alert)
+Vue.use(Tag)
+Vue.use(Divider)
+Vue.use(DatePicker)
+Vue.use(TimePicker)
+Vue.use(Upload)
+Vue.use(Progress)
+Vue.use(Skeleton)
+Vue.use(Popconfirm)
+// Vue.use(VueCropper)
+Vue.use(notification)
+
+Vue.prototype.$confirm = Modal.confirm
+Vue.prototype.$message = message
+Vue.prototype.$notification = notification
+Vue.prototype.$info = Modal.info
+Vue.prototype.$success = Modal.success
+Vue.prototype.$error = Modal.error
+Vue.prototype.$warning = Modal.warning
\ No newline at end of file

src/core/lazy_use.js

+import Vue from 'vue'
+import VueStorage from 'vue-ls'
+import config from '@/config/defaultSettings'
+
+// base library
+import '@/core/lazy_lib/components_use'
+import Viser from 'viser-vue'
+
+// ext library
+import VueClipboard from 'vue-clipboard2'
+import MultiTab from '@/components/MultiTab'
+import PageLoading from '@/components/PageLoading'
+import PermissionHelper from '@/utils/helper/permission'
+import './directives/action'
+
+VueClipboard.config.autoSetContainer = true
+
+Vue.use(Viser)
+Vue.use(MultiTab)
+Vue.use(PageLoading)
+Vue.use(VueStorage, config.storageOptions)
+Vue.use(VueClipboard)
+Vue.use(PermissionHelper)

src/core/use.js

+import Vue from 'vue'
+import VueStorage from 'vue-ls'
+import config from '@/config/defaultSettings'
+
+// base library
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+import VueCropper from 'vue-cropper'
+import 'ant-design-vue/dist/antd.less'
+
+// ext library
+import VueClipboard from 'vue-clipboard2'
+import MultiTab from '@/components/MultiTab'
+import PageLoading from '@/components/PageLoading'
+import PermissionHelper from '@/utils/helper/permission'
+// import '@/components/use'
+import './directives/action'
+
+VueClipboard.config.autoSetContainer = true
+
+Vue.use(Antd)
+Vue.use(Viser)
+Vue.use(MultiTab)
+Vue.use(PageLoading)
+Vue.use(VueStorage, config.storageOptions)
+Vue.use(VueClipboard)
+Vue.use(PermissionHelper)
+Vue.use(VueCropper)

src/layouts/BasicLayout.vue

+<template>
+  <a-layout :class="['layout', device]">
+    <!-- SideMenu -->
+    <a-drawer
+      v-if="isMobile()"
+      placement="left"
+      :wrapClassName="`drawer-sider ${navTheme}`"
+      :closable="false"
+      :visible="collapsed"
+      @close="drawerClose"
+    >
+      <side-menu
+        mode="inline"
+        :menus="menus"
+        :theme="navTheme"
+        :collapsed="false"
+        :collapsible="true"
+        @menuSelect="menuSelect"
+      ></side-menu>
+    </a-drawer>
+
+    <side-menu
+      v-else-if="isSideMenu()"
+      mode="inline"
+      :menus="menus"
+      :theme="navTheme"
+      :collapsed="collapsed"
+      :collapsible="true"
+    ></side-menu>
+
+    <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
+      <!-- layout header -->
+      <global-header
+        :mode="layoutMode"
+        :menus="menus"
+        :theme="navTheme"
+        :collapsed="collapsed"
+        :device="device"
+        @toggle="toggle"
+      />
+
+      <!-- layout content -->
+      <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
+        <multi-tab v-if="multiTab"></multi-tab>
+        <transition name="page-transition">
+          <route-view />
+        </transition>
+      </a-layout-content>
+
+      <!-- layout footer -->
+      <a-layout-footer>
+        <global-footer />
+      </a-layout-footer>
+
+      <!-- Setting Drawer (show in development mode) -->
+      <setting-drawer v-if="!production"></setting-drawer>
+    </a-layout>
+  </a-layout>
+
+</template>
+
+<script>
+import { triggerWindowResizeEvent } from '@/utils/util'
+import { mapState, mapActions } from 'vuex'
+import { mixin, mixinDevice } from '@/utils/mixin'
+import config from '@/config/defaultSettings'
+
+import RouteView from './RouteView'
+import SideMenu from '@/components/Menu/SideMenu'
+import GlobalHeader from '@/components/GlobalHeader'
+import GlobalFooter from '@/components/GlobalFooter'
+import SettingDrawer from '@/components/SettingDrawer'
+
+export default {
+  name: 'BasicLayout',
+  mixins: [mixin, mixinDevice],
+  components: {
+    RouteView,
+    SideMenu,
+    GlobalHeader,
+    GlobalFooter,
+    SettingDrawer
+  },
+  data () {
+    return {
+      production: config.production,
+      collapsed: false,
+      menus: []
+    }
+  },
+  computed: {
+    ...mapState({
+      // 动态主路由
+      mainMenu: state => state.permission.addRouters
+    }),
+    contentPaddingLeft () {
+      if (!this.fixSidebar || this.isMobile()) {
+        return '0'
+      }
+      if (this.sidebarOpened) {
+        return '256px'
+      }
+      return '80px'
+    }
+  },
+  watch: {
+    sidebarOpened (val) {
+      this.collapsed = !val
+    }
+  },
+  created () {
+    this.menus = this.mainMenu.find(item => item.path === '/').children
+    this.collapsed = !this.sidebarOpened
+  },
+  mounted () {
+    const userAgent = navigator.userAgent
+    if (userAgent.indexOf('Edge') > -1) {
+      this.$nextTick(() => {
+        this.collapsed = !this.collapsed
+        setTimeout(() => {
+          this.collapsed = !this.collapsed
+        }, 16)
+      })
+    }
+  },
+  methods: {
+    ...mapActions(['setSidebar']),
+    toggle () {
+      this.collapsed = !this.collapsed
+      this.setSidebar(!this.collapsed)
+      triggerWindowResizeEvent()
+    },
+    paddingCalc () {
+      let left = ''
+      if (this.sidebarOpened) {
+        left = this.isDesktop() ? '256px' : '80px'
+      } else {
+        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
+      }
+      return left
+    },
+    menuSelect () {
+    },
+    drawerClose () {
+      this.collapsed = false
+    }
+  }
+}
+</script>
+
+<style lang="less">
+/*
+ * The following styles are auto-applied to elements with
+ * transition="page-transition" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the page transition by editing
+ * these styles.
+ */
+
+.page-transition-enter {
+  opacity: 0;
+}
+
+.page-transition-leave-active {
+  opacity: 0;
+}
+
+.page-transition-enter .page-transition-container,
+.page-transition-leave-active .page-transition-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

src/layouts/BlankLayout.vue

+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BlankLayout'
+}
+</script>
+
+<style scoped>
+
+</style>

src/layouts/PageView.vue

+<template>
+  <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
+    <!-- pageHeader , route meta :true on hide -->
+    <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
+      <slot slot="action" name="action"></slot>
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent && description">
+        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
+        <div class="link">
+          <template v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href">
+              <a-icon :type="link.icon" />
+              <span>{{ link.title }}</span>
+            </a>
+          </template>
+        </div>
+      </div>
+      <slot slot="extra" name="extra">
+        <div class="extra-img">
+          <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
+        </div>
+      </slot>
+      <div slot="pageMenu">
+        <div class="page-menu-search" v-if="search">
+          <a-input-search
+            style="width: 80%; max-width: 522px;"
+            placeholder="请输入..."
+            size="large"
+            enterButton="搜索"
+          />
+        </div>
+        <div class="page-menu-tabs" v-if="tabs && tabs.items">
+          <!-- @change="callback" :activeKey="activeKey" -->
+          <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
+            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
+    </page-header>
+    <div class="content">
+      <div class="page-header-index-wide">
+        <slot>
+          <!-- keep-alive  -->
+          <keep-alive v-if="multiTab">
+            <router-view ref="content" />
+          </keep-alive>
+          <router-view v-else ref="content" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import PageHeader from '@/components/PageHeader'
+
+export default {
+  name: 'PageView',
+  components: {
+    PageHeader
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: null
+    },
+    title: {
+      type: [String, Boolean],
+      default: true
+    },
+    logo: {
+      type: String,
+      default: null
+    },
+    directTabs: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      pageTitle: null,
+      description: null,
+      linkList: [],
+      extraImage: '',
+      search: false,
+      tabs: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      multiTab: state => state.app.multiTab
+    })
+  },
+  mounted () {
+    this.tabs = this.directTabs
+    this.getPageMeta()
+  },
+  updated () {
+    this.getPageMeta()
+  },
+  methods: {
+    getPageMeta () {
+      // eslint-disable-next-line
+      this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
+
+      const content = this.$refs.content
+      if (content) {
+        if (content.pageMeta) {
+          Object.assign(this, content.pageMeta)
+        } else {
+          this.description = content.description
+          this.linkList = content.linkList
+          this.extraImage = content.extraImage
+          this.search = content.search === true
+          this.tabs = content.tabs
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .content {
+    margin: 24px 24px 0;
+    .link {
+      margin-top: 16px;
+      &:not(:empty) {
+        margin-bottom: 16px;
+      }
+      a {
+        margin-right: 32px;
+        height: 24px;
+        line-height: 24px;
+        display: inline-block;
+        i {
+          font-size: 24px;
+          margin-right: 8px;
+          vertical-align: middle;
+        }
+        span {
+          height: 24px;
+          line-height: 24px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .page-menu-search {
+    text-align: center;
+    margin-bottom: 16px;
+  }
+  .page-menu-tabs {
+    margin-top: 48px;
+  }
+
+  .extra-img {
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .mobile {
+    .extra-img{
+      margin-top: 0;
+      text-align: center;
+      width: 96px;
+
+      img{
+        width: 100%;
+      }
+    }
+  }
+</style>

src/layouts/RouteView.vue

+<script>
+export default {
+  name: 'RouteView',
+  props: {
+    keepAlive: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {}
+  },
+  render () {
+    const { $route: { meta }, $store: { getters } } = this
+    const inKeep = (
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    )
+    const notKeep = (
+      <router-view />
+    )
+    // 这里增加了 multiTab 的判断，当开启了 multiTab 时
+    // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
+    // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
+    if (!getters.multiTab && !meta.keepAlive) {
+      return notKeep
+    }
+    return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
+  }
+}
+</script>

src/layouts/UserLayout.vue

+<template>
+  <div id="userLayout" :class="['user-layout-wrapper', device]">
+    <div class="container">
+      <div class="top">
+        <div class="header">
+          <a href="/">
+            <img src="~@/assets/logo.svg" class="logo" alt="logo">
+            <span class="title">Ant Design</span>
+          </a>
+        </div>
+        <div class="desc">
+          Ant Design 是西湖区最具影响力的 Web 设计规范
+        </div>
+      </div>
+
+      <route-view></route-view>
+
+      <div class="footer">
+        <div class="links">
+          <a href="_self">帮助</a>
+          <a href="_self">隐私</a>
+          <a href="_self">条款</a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2018 白鹭学园技术组出品
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RouteView from './RouteView'
+import { mixinDevice } from '@/utils/mixin'
+
+export default {
+  name: 'UserLayout',
+  components: { RouteView },
+  mixins: [mixinDevice],
+  data () {
+    return {}
+  },
+  mounted () {
+    document.body.classList.add('userLayout')
+  },
+  beforeDestroy () {
+    document.body.classList.remove('userLayout')
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  #userLayout.user-layout-wrapper {
+    height: 100%;
+
+    &.mobile {
+      .container {
+        .main {
+          max-width: 368px;
+          width: 98%;
+        }
+      }
+    }
+
+    .container {
+      width: 100%;
+      min-height: 100%;
+      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+      background-size: 100%;
+      padding: 110px 0 144px;
+      position: relative;
+
+      a {
+        text-decoration: none;
+      }
+
+      .top {
+        text-align: center;
+
+        .header {
+          height: 44px;
+          line-height: 44px;
+
+          .badge {
+            position: absolute;
+            display: inline-block;
+            line-height: 1;
+            vertical-align: middle;
+            margin-left: -12px;
+            margin-top: -10px;
+            opacity: 0.8;
+          }
+
+          .logo {
+            height: 44px;
+            vertical-align: top;
+            margin-right: 16px;
+            border-style: none;
+          }
+
+          .title {
+            font-size: 33px;
+            color: rgba(0, 0, 0, .85);
+            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+            font-weight: 600;
+            position: relative;
+            top: 2px;
+          }
+        }
+        .desc {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.45);
+          margin-top: 12px;
+          margin-bottom: 40px;
+        }
+      }
+
+      .main {
+        min-width: 260px;
+        width: 368px;
+        margin: 0 auto;
+      }
+
+      .footer {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        padding: 0 16px;
+        margin: 48px 0 24px;
+        text-align: center;
+
+        .links {
+          margin-bottom: 8px;
+          font-size: 14px;
+          a {
+            color: rgba(0, 0, 0, 0.45);
+            transition: all 0.3s;
+            &:not(:last-child) {
+              margin-right: 40px;
+            }
+          }
+        }
+        .copyright {
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 14px;
+        }
+      }
+    }
+  }
+</style>

src/layouts/index.js

+import UserLayout from './UserLayout'
+import BlankLayout from './BlankLayout'
+import BasicLayout from './BasicLayout'
+import RouteView from './RouteView'
+import PageView from './PageView'
+
+export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView }

src/main.js

+// with polyfills
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store/'
+import { VueAxios } from './utils/request'
+
+// mock
+// WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
+import './mock'
+
+import bootstrap from './core/bootstrap'
+import './core/lazy_use'
+import './permission' // permission control
+import './utils/filter' // global filter
+import './components/global.less'
+
+Vue.config.productionTip = false
+
+// mount axios Vue.$http and this.$http
+Vue.use(VueAxios)
+
+new Vue({
+  router,
+  store,
+  created: bootstrap,
+  render: h => h(App)
+}).$mount('#app')

src/mock/index.js

+import { isIE } from '@/utils/util'
+
+// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
+if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
+  if (isIE()) {
+    console.error('ERROR: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.')
+  }
+  // 使用同步加载依赖
+  // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
+  console.log('mock mounting')
+  const Mock = require('mockjs2')
+  require('./services/auth')
+  require('./services/user')
+  require('./services/manage')
+  require('./services/other')
+  require('./services/tagCloud')
+  require('./services/article')
+
+  Mock.setup({
+    timeout: 800 // setter delay time
+  })
+  console.log('mock mounted')
+}

src/mock/services/article.js

+import Mock from 'mockjs2'
+import { builder, getQueryParameters } from '../util'
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack'
+]
+
+const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
+]
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png'
+]
+
+const owner = [
+  '付小小',
+  '吴加好',
+  '周星星',
+  '林东东',
+  '曲丽丽'
+]
+
+const content = '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。'
+const description = '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
+const href = 'https://ant.design'
+
+const article = (options) => {
+  const queryParameters = getQueryParameters(options)
+  console.log('queryParameters', queryParameters)
+  if (queryParameters && !queryParameters.count) {
+    queryParameters.count = 5
+  }
+  const data = []
+  for (let i = 0; i < queryParameters.count; i++) {
+    const tmpKey = i + 1
+    const num = parseInt(Math.random() * (4 + 1), 10)
+    data.push({
+      id: tmpKey,
+      avatar: avatar[num],
+      owner: owner[num],
+      content: content,
+      star: Mock.mock('@integer(1, 999)'),
+      percent: Mock.mock('@integer(1, 999)'),
+      like: Mock.mock('@integer(1, 999)'),
+      message: Mock.mock('@integer(1, 999)'),
+      description: description,
+      href: href,
+      title: titles[ i % 8 ],
+      updatedAt: Mock.mock('@datetime'),
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1'
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2'
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3'
+        }
+      ],
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)]
+    })
+  }
+  return builder(data)
+}
+
+Mock.mock(/\/list\/article/, 'get', article)

src/mock/services/auth.js

+import Mock from 'mockjs2'
+import { builder, getBody } from '../util'
+
+const username = ['admin', 'super']
+// 强硬要求 ant.design 相同密码
+// '21232f297a57a5a743894a0e4a801fc3',
+const password = ['8914de686ab28dc22f30d3d8e107ff6c'] // admin, ant.design
+
+const login = (options) => {
+  const body = getBody(options)
+  console.log('mock: body', body)
+  if (!username.includes(body.username) || !password.includes(body.password)) {
+    return builder({ isLogin: true }, '账户或密码错误', 401)
+  }
+
+  return builder({
+    'id': Mock.mock('@guid'),
+    'name': Mock.mock('@name'),
+    'username': 'admin',
+    'password': '',
+    'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
+    'status': 1,
+    'telephone': '',
+    'lastLoginIp': '27.154.74.117',
+    'lastLoginTime': 1534837621348,
+    'creatorId': 'admin',
+    'createTime': 1497160610259,
+    'deleted': 0,
+    'roleId': 'admin',
+    'lang': 'zh-CN',
+    'token': '4291d7da9005377ec9aec4a71ea837f'
+  }, '', 200, { 'Custom-Header': Mock.mock('@guid') })
+}
+
+const logout = () => {
+  return builder({}, '[测试接口] 注销成功')
+}
+
+const smsCaptcha = () => {
+  return builder({ captcha: Mock.mock('@integer(10000, 99999)') })
+}
+
+const twofactor = () => {
+  return builder({ stepCode: Mock.mock('@integer(0, 1)') })
+}
+
+Mock.mock(/\/auth\/login/, 'post', login)
+Mock.mock(/\/auth\/logout/, 'post', logout)
+Mock.mock(/\/account\/sms/, 'post', smsCaptcha)
+Mock.mock(/\/auth\/2step-code/, 'post', twofactor)

src/mock/services/manage.js

+import Mock from 'mockjs2'
+import { builder, getQueryParameters } from '../util'
+
+const totalCount = 5701
+
+const serverList = (options) => {
+  const parameters = getQueryParameters(options)
+
+  const result = []
+  const pageNo = parseInt(parameters.pageNo)
+  const pageSize = parseInt(parameters.pageSize)
+  const totalPage = Math.ceil(totalCount / pageSize)
+  const key = (pageNo - 1) * pageSize
+  const next = (pageNo >= totalPage ? (totalCount % pageSize) : pageSize) + 1
+
+  for (let i = 1; i < next; i++) {
+    const tmpKey = key + i
+    result.push({
+      key: tmpKey,
+      id: tmpKey,
+      no: 'No ' + tmpKey,
+      description: '这是一段描述',
+      callNo: Mock.mock('@integer(1, 999)'),
+      status: Mock.mock('@integer(0, 3)'),
+      updatedAt: Mock.mock('@datetime'),
+      editable: false
+    })
+  }
+
+  return builder({
+    pageSize: pageSize,
+    pageNo: pageNo,
+    totalCount: totalCount,
+    totalPage: totalPage,
+    data: result
+  })
+}
+
+const projects = () => {
+  return builder({
+    'data': [{
+      id: 1,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+      title: 'Alipay',
+      description: '那是一种内在的东西， 他们到达不了，也无法触及的',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 2,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+      title: 'Angular',
+      description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 3,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+      title: 'Ant Design',
+      description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 4,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+      title: 'Ant Design Pro',
+      description: '那时候我只会想自己想要什么，从不想自己拥有什么',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 5,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
+      title: 'Bootstrap',
+      description: '凛冬将至',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    },
+    {
+      id: 6,
+      cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
+      title: 'Vue',
+      description: '生命就像一盒巧克力，结果往往出人意料',
+      status: 1,
+      updatedAt: '2018-07-26 00:00:00'
+    }
+    ],
+    'pageSize': 10,
+    'pageNo': 0,
+    'totalPage': 6,
+    'totalCount': 57
+  })
+}
+
+const activity = () => {
+  return builder([{
+    id: 1,
+    user: {
+      nickname: '@name',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+    },
+    project: {
+      name: '白鹭酱油开发组',
+      action: '更新',
+      event: '番组计划'
+    },
+    time: '2018-08-23 14:47:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '蓝莓酱',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
+    },
+    project: {
+      name: '白鹭酱油开发组',
+      action: '更新',
+      event: '番组计划'
+    },
+    time: '2018-08-23 09:35:37'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '@name',
+      avatar: '@image(64x64)'
+    },
+    project: {
+      name: '白鹭酱油开发组',
+      action: '创建',
+      event: '番组计划'
+    },
+    time: '2017-05-27 00:00:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '曲丽丽',
+      avatar: '@image(64x64)'
+    },
+    project: {
+      name: '高逼格设计天团',
+      action: '更新',
+      event: '六月迭代'
+    },
+    time: '2018-08-23 14:47:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '@name',
+      avatar: '@image(64x64)'
+    },
+    project: {
+      name: '高逼格设计天团',
+      action: 'created',
+      event: '六月迭代'
+    },
+    time: '2018-08-23 14:47:00'
+  },
+  {
+    id: 1,
+    user: {
+      nickname: '曲丽丽',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+    },
+    project: {
+      name: '高逼格设计天团',
+      action: 'created',
+      event: '六月迭代'
+    },
+    time: '2018-08-23 14:47:00'
+  }
+  ])
+}
+
+const teams = () => {
+  return builder([{
+    id: 1,
+    name: '科学搬砖组',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+  },
+  {
+    id: 2,
+    name: '程序员日常',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png'
+  },
+  {
+    id: 1,
+    name: '设计天团',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png'
+  },
+  {
+    id: 1,
+    name: '中二少女团',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png'
+  },
+  {
+    id: 1,
+    name: '骗你学计算机',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png'
+  }
+  ])
+}
+
+const radar = () => {
+  return builder([{
+    item: '引用',
+    '个人': 70,
+    '团队': 30,
+    '部门': 40
+  },
+  {
+    item: '口碑',
+    '个人': 60,
+    '团队': 70,
+    '部门': 40
+  },
+  {
+    item: '产量',
+    '个人': 50,
+    '团队': 60,
+    '部门': 40
+  },
+  {
+    item: '贡献',
+    '个人': 40,
+    '团队': 50,
+    '部门': 40
+  },
+  {
+    item: '热度',
+    '个人': 60,
+    '团队': 70,
+    '部门': 40
+  },
+  {
+    item: '引用',
+    '个人': 70,
+    '团队': 50,
+    '部门': 40
+  }
+  ])
+}
+
+Mock.mock(/\/service/, 'get', serverList)
+Mock.mock(/\/list\/search\/projects/, 'get', projects)
+Mock.mock(/\/workplace\/activity/, 'get', activity)
+Mock.mock(/\/workplace\/teams/, 'get', teams)
+Mock.mock(/\/workplace\/radar/, 'get', radar)

src/mock/services/other.js

+import Mock from 'mockjs2'
+import { builder } from '../util'
+
+const orgTree = () => {
+  return builder([{
+    'key': 'key-01',
+    'title': '研发中心',
+    'icon': 'mail',
+    'children': [{
+      'key': 'key-01-01',
+      'title': '后端组',
+      'icon': null,
+      'group': true,
+      children: [{
+        'key': 'key-01-01-01',
+        'title': 'JAVA',
+        'icon': null
+      },
+      {
+        'key': 'key-01-01-02',
+        'title': 'PHP',
+        'icon': null
+      },
+      {
+        'key': 'key-01-01-03',
+        'title': 'Golang',
+        'icon': null
+      }
+      ]
+    }, {
+      'key': 'key-01-02',
+      'title': '前端组',
+      'icon': null,
+      'group': true,
+      children: [{
+        'key': 'key-01-02-01',
+        'title': 'React',
+        'icon': null
+      },
+      {
+        'key': 'key-01-02-02',
+        'title': 'Vue',
+        'icon': null
+      },
+      {
+        'key': 'key-01-02-03',
+        'title': 'Angular',
+        'icon': null
+      }
+      ]
+    }]
+  }, {
+    'key': 'key-02',
+    'title': '财务部',
+    'icon': 'dollar',
+    'children': [{
+      'key': 'key-02-01',
+      'title': '会计核算',
+      'icon': null
+    }, {
+      'key': 'key-02-02',
+      'title': '成本控制',
+      'icon': null
+    }, {
+      'key': 'key-02-03',
+      'title': '内部控制',
+      'icon': null,
+      'children': [{
+        'key': 'key-02-03-01',
+        'title': '财务制度建设',
+        'icon': null
+      },
+      {
+        'key': 'key-02-03-02',
+        'title': '会计核算',
+        'icon': null
+      }
+      ]
+    }]
+  }])
+}
+
+const role = () => {
+  return builder({
+    'data': [{
+      'id': 'admin',
+      'name': '管理员',
+      'describe': '拥有所有权限',
+      'status': 1,
+      'creatorId': 'system',
+      'createTime': 1497160610259,
+      'deleted': 0,
+      'permissions': [{
+        'roleId': 'admin',
+        'permissionId': 'comment',
+        'permissionName': '评论管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'member',
+        'permissionName': '会员管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'menu',
+        'permissionName': '菜单管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'import',
+          'describe': '导入',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'order',
+        'permissionName': '订单管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'permission',
+        'permissionName': '权限管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'role',
+        'permissionName': '角色管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'test',
+        'permissionName': '测试权限',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'user',
+        'permissionName': '用户管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"},{"action":"export","defaultCheck":false,"describe":"导出"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'import',
+          'describe': '导入',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        },
+        {
+          'action': 'export',
+          'describe': '导出',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      }
+      ]
+    },
+    {
+      'id': 'svip',
+      'name': 'SVIP',
+      'describe': '超级会员',
+      'status': 1,
+      'creatorId': 'system',
+      'createTime': 1532417744846,
+      'deleted': 0,
+      'permissions': [{
+        'roleId': 'admin',
+        'permissionId': 'comment',
+        'permissionName': '评论管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'member',
+        'permissionName': '会员管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'menu',
+        'permissionName': '菜单管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'import',
+          'describe': '导入',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'order',
+        'permissionName': '订单管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'permission',
+        'permissionName': '权限管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'role',
+        'permissionName': '角色管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        },
+        {
+          'action': 'delete',
+          'describe': '删除',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'test',
+        'permissionName': '测试权限',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'admin',
+        'permissionId': 'user',
+        'permissionName': '用户管理',
+        'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"},{"action":"export","defaultCheck":false,"describe":"导出"}]',
+        'actionEntitySet': [{
+          'action': 'add',
+          'describe': '新增',
+          'defaultCheck': false
+        },
+        {
+          'action': 'import',
+          'describe': '导入',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        },
+        {
+          'action': 'update',
+          'describe': '修改',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      }
+      ]
+    },
+    {
+      'id': 'user',
+      'name': '普通会员',
+      'describe': '普通用户，只能查询',
+      'status': 1,
+      'creatorId': 'system',
+      'createTime': 1497160610259,
+      'deleted': 0,
+      'permissions': [{
+        'roleId': 'user',
+        'permissionId': 'comment',
+        'permissionName': '评论管理',
+        'actions': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"}]',
+        'actionEntitySet': [{
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+
+      {
+        'roleId': 'user',
+        'permissionId': 'marketing',
+        'permissionName': '营销管理',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'user',
+        'permissionId': 'member',
+        'permissionName': '会员管理',
+        'actions': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"}]',
+        'actionEntitySet': [{
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'user',
+        'permissionId': 'menu',
+        'permissionName': '菜单管理',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+
+      {
+        'roleId': 'user',
+        'permissionId': 'order',
+        'permissionName': '订单管理',
+        'actions': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"}]',
+        'actionEntitySet': [{
+          'action': 'query',
+          'describe': '查询',
+          'defaultCheck': false
+        },
+        {
+          'action': 'get',
+          'describe': '详情',
+          'defaultCheck': false
+        }
+        ],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'user',
+        'permissionId': 'permission',
+        'permissionName': '权限管理',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'user',
+        'permissionId': 'role',
+        'permissionName': '角色管理',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+
+      {
+        'roleId': 'user',
+        'permissionId': 'test',
+        'permissionName': '测试权限',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      },
+      {
+        'roleId': 'user',
+        'permissionId': 'user',
+        'permissionName': '用户管理',
+        'actions': '[]',
+        'actionEntitySet': [],
+        'actionList': null,
+        'dataAccess': null
+      }
+      ]
+    }
+    ],
+    'pageSize': 10,
+    'pageNo': 0,
+    'totalPage': 1,
+    'totalCount': 5
+  })
+}
+
+const permissionNoPager = () => {
+  return builder([{
+    'id': 'marketing',
+    'name': '营销管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+    'sptDaTypes': null,
+    'optionalFields': null,
+    'parents': null,
+    'type': null,
+    'deleted': 0,
+    'actions': [
+      'add',
+      'query',
+      'get',
+      'update',
+      'delete'
+    ]
+  },
+  {
+    'id': 'member',
+    'name': '会员管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'query',
+      'get',
+      'update',
+      'delete'
+    ]
+  },
+  {
+    'id': 'menu',
+    'name': '菜单管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'import',
+      'get',
+      'update'
+    ]
+  },
+  {
+    'id': 'order',
+    'name': '订单管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'query',
+      'get',
+      'update',
+      'delete'
+    ]
+  },
+  {
+    'id': 'permission',
+    'name': '权限管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'get',
+      'update',
+      'delete'
+    ]
+  },
+  {
+    'id': 'role',
+    'name': '角色管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'get',
+      'update',
+      'delete'
+    ]
+  },
+  {
+    'id': 'test',
+    'name': '测试权限',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'get'
+    ]
+  },
+  {
+    'id': 'user',
+    'name': '用户管理',
+    'describe': null,
+    'status': 1,
+    'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"export","defaultCheck":false,"describe":"导出"}]',
+    'sptDaTypes': null,
+    'optionalFields': '[]',
+    'parents': null,
+    'type': 'default',
+    'deleted': 0,
+    'actions': [
+      'add',
+      'get'
+    ]
+  }
+  ])
+}
+
+const permissions = () => {
+  return builder({
+    'data': [{
+      'id': 'marketing',
+      'name': '营销管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'sptDaTypes': null,
+      'optionalFields': null,
+      'parents': null,
+      'type': null,
+      'deleted': 0,
+      'actions': [
+        'add',
+        'query',
+        'get',
+        'update',
+        'delete'
+      ]
+    },
+    {
+      'id': 'member',
+      'name': '会员管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'query',
+        'get',
+        'update',
+        'delete'
+      ]
+    },
+    {
+      'id': 'menu',
+      'name': '菜单管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'import',
+        'get',
+        'update'
+      ]
+    },
+    {
+      'id': 'order',
+      'name': '订单管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'query',
+        'get',
+        'update',
+        'delete'
+      ]
+    },
+    {
+      'id': 'permission',
+      'name': '权限管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'get',
+        'update',
+        'delete'
+      ]
+    },
+    {
+      'id': 'role',
+      'name': '角色管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'get',
+        'update',
+        'delete'
+      ]
+    },
+    {
+      'id': 'test',
+      'name': '测试权限',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'get'
+      ]
+    },
+    {
+      'id': 'user',
+      'name': '用户管理',
+      'describe': null,
+      'status': 1,
+      'actionData': '[{"action":"add","describe":"新增","defaultCheck":false},{"action":"get","describe":"查询","defaultCheck":false}]',
+      'sptDaTypes': null,
+      'optionalFields': '[]',
+      'parents': null,
+      'type': 'default',
+      'deleted': 0,
+      'actions': [
+        'add',
+        'get'
+      ]
+    }
+    ],
+    'pageSize': 10,
+    'pageNo': 0,
+    'totalPage': 1,
+    'totalCount': 5
+  })
+}
+
+Mock.mock(/\/org\/tree/, 'get', orgTree)
+Mock.mock(/\/role/, 'get', role)
+Mock.mock(/\/permission\/no-pager/, 'get', permissionNoPager)
+Mock.mock(/\/permission/, 'get', permissions)

src/mock/services/tagCloud.js

+import Mock from 'mockjs2'
+import { builder } from '../util'
+
+//
+const tagCloudData = () => {
+  return builder([{ 'value': 9, 'name': 'AntV' }, { 'value': 8, 'name': 'F2' }, { 'value': 8, 'name': 'G2' }, { 'value': 8, 'name': 'G6' }, { 'value': 8, 'name': 'DataSet' }, { 'value': 8, 'name': '墨者学院' }, { 'value': 6, 'name': 'Analysis' }, { 'value': 6, 'name': 'Data Mining' }, { 'value': 6, 'name': 'Data Vis' }, { 'value': 6, 'name': 'Design' }, { 'value': 6, 'name': 'Grammar' }, { 'value': 6, 'name': 'Graphics' }, { 'value': 6, 'name': 'Graph' }, { 'value': 6, 'name': 'Hierarchy' }, { 'value': 6, 'name': 'Labeling' }, { 'value': 6, 'name': 'Layout' }, { 'value': 6, 'name': 'Quantitative' }, { 'value': 6, 'name': 'Relation' }, { 'value': 6, 'name': 'Statistics' }, { 'value': 6, 'name': '可视化' }, { 'value': 6, 'name': '数据' }, { 'value': 6, 'name': '数据可视化' }, { 'value': 4, 'name': 'Arc Diagram' }, { 'value': 4, 'name': 'Bar Chart' }, { 'value': 4, 'name': 'Canvas' }, { 'value': 4, 'name': 'Chart' }, { 'value': 4, 'name': 'DAG' }, { 'value': 4, 'name': 'DG' }, { 'value': 4, 'name': 'Facet' }, { 'value': 4, 'name': 'Geo' }, { 'value': 4, 'name': 'Line' }, { 'value': 4, 'name': 'MindMap' }, { 'value': 4, 'name': 'Pie' }, { 'value': 4, 'name': 'Pizza Chart' }, { 'value': 4, 'name': 'Punch Card' }, { 'value': 4, 'name': 'SVG' }, { 'value': 4, 'name': 'Sunburst' }, { 'value': 4, 'name': 'Tree' }, { 'value': 4, 'name': 'UML' }, { 'value': 3, 'name': 'Chart' }, { 'value': 3, 'name': 'View' }, { 'value': 3, 'name': 'Geom' }, { 'value': 3, 'name': 'Shape' }, { 'value': 3, 'name': 'Scale' }, { 'value': 3, 'name': 'Animate' }, { 'value': 3, 'name': 'Global' }, { 'value': 3, 'name': 'Slider' }, { 'value': 3, 'name': 'Connector' }, { 'value': 3, 'name': 'Transform' }, { 'value': 3, 'name': 'Util' }, { 'value': 3, 'name': 'DomUtil' }, { 'value': 3, 'name': 'MatrixUtil' }, { 'value': 3, 'name': 'PathUtil' }, { 'value': 3, 'name': 'G' }, { 'value': 3, 'name': '2D' }, { 'value': 3, 'name': '3D' }, { 'value': 3, 'name': 'Line' }, { 'value': 3, 'name': 'Area' }, { 'value': 3, 'name': 'Interval' }, { 'value': 3, 'name': 'Schema' }, { 'value': 3, 'name': 'Edge' }, { 'value': 3, 'name': 'Polygon' }, { 'value': 3, 'name': 'Heatmap' }, { 'value': 3, 'name': 'Render' }, { 'value': 3, 'name': 'Tooltip' }, { 'value': 3, 'name': 'Axis' }, { 'value': 3, 'name': 'Guide' }, { 'value': 3, 'name': 'Coord' }, { 'value': 3, 'name': 'Legend' }, { 'value': 3, 'name': 'Path' }, { 'value': 3, 'name': 'Helix' }, { 'value': 3, 'name': 'Theta' }, { 'value': 3, 'name': 'Rect' }, { 'value': 3, 'name': 'Polar' }, { 'value': 3, 'name': 'Dsv' }, { 'value': 3, 'name': 'Csv' }, { 'value': 3, 'name': 'Tsv' }, { 'value': 3, 'name': 'GeoJSON' }, { 'value': 3, 'name': 'TopoJSON' }, { 'value': 3, 'name': 'Filter' }, { 'value': 3, 'name': 'Map' }, { 'value': 3, 'name': 'Pick' }, { 'value': 3, 'name': 'Rename' }, { 'value': 3, 'name': 'Filter' }, { 'value': 3, 'name': 'Map' }, { 'value': 3, 'name': 'Pick' }, { 'value': 3, 'name': 'Rename' }, { 'value': 3, 'name': 'Reverse' }, { 'value': 3, 'name': 'sort' }, { 'value': 3, 'name': 'Subset' }, { 'value': 3, 'name': 'Partition' }, { 'value': 3, 'name': 'Imputation' }, { 'value': 3, 'name': 'Fold' }, { 'value': 3, 'name': 'Aggregate' }, { 'value': 3, 'name': 'Proportion' }, { 'value': 3, 'name': 'Histogram' }, { 'value': 3, 'name': 'Quantile' }, { 'value': 3, 'name': 'Treemap' }, { 'value': 3, 'name': 'Hexagon' }, { 'value': 3, 'name': 'Binning' }, { 'value': 3, 'name': 'kernel' }, { 'value': 3, 'name': 'Regression' }, { 'value': 3, 'name': 'Density' }, { 'value': 3, 'name': 'Sankey' }, { 'value': 3, 'name': 'Voronoi' }, { 'value': 3, 'name': 'Projection' }, { 'value': 3, 'name': 'Centroid' }, { 'value': 3, 'name': 'H5' }, { 'value': 3, 'name': 'Mobile' }, { 'value': 3, 'name': 'K线图' }, { 'value': 3, 'name': '关系图' }, { 'value': 3, 'name': '烛形图' }, { 'value': 3, 'name': '股票图' }, { 'value': 3, 'name': '直方图' }, { 'value': 3, 'name': '金字塔图' }, { 'value': 3, 'name': '分面' }, { 'value': 3, 'name': '南丁格尔玫瑰图' }, { 'value': 3, 'name': '饼图' }, { 'value': 3, 'name': '线图' }, { 'value': 3, 'name': '点图' }, { 'value': 3, 'name': '散点图' }, { 'value': 3, 'name': '子弹图' }, { 'value': 3, 'name': '柱状图' }, { 'value': 3, 'name': '仪表盘' }, { 'value': 3, 'name': '气泡图' }, { 'value': 3, 'name': '漏斗图' }, { 'value': 3, 'name': '热力图' }, { 'value': 3, 'name': '玉玦图' }, { 'value': 3, 'name': '直方图' }, { 'value': 3, 'name': '矩形树图' }, { 'value': 3, 'name': '箱形图' }, { 'value': 3, 'name': '色块图' }, { 'value': 3, 'name': '螺旋图' }, { 'value': 3, 'name': '词云' }, { 'value': 3, 'name': '词云图' }, { 'value': 3, 'name': '雷达图' }, { 'value': 3, 'name': '面积图' }, { 'value': 3, 'name': '马赛克图' }, { 'value': 3, 'name': '盒须图' }, { 'value': 3, 'name': '坐标轴' }, { 'value': 3, 'name': '' }, { 'value': 3, 'name': 'Jacques Bertin' }, { 'value': 3, 'name': 'Leland Wilkinson' }, { 'value': 3, 'name': 'William Playfair' }, { 'value': 3, 'name': '关联' }, { 'value': 3, 'name': '分布' }, { 'value': 3, 'name': '区间' }, { 'value': 3, 'name': '占比' }, { 'value': 3, 'name': '地图' }, { 'value': 3, 'name': '时间' }, { 'value': 3, 'name': '比较' }, { 'value': 3, 'name': '流程' }, { 'value': 3, 'name': '趋势' }, { 'value': 2, 'name': '亦叶' }, { 'value': 2, 'name': '再飞' }, { 'value': 2, 'name': '完白' }, { 'value': 2, 'name': '巴思' }, { 'value': 2, 'name': '张初尘' }, { 'value': 2, 'name': '御术' }, { 'value': 2, 'name': '有田' }, { 'value': 2, 'name': '沉鱼' }, { 'value': 2, 'name': '玉伯' }, { 'value': 2, 'name': '画康' }, { 'value': 2, 'name': '祯逸' }, { 'value': 2, 'name': '绝云' }, { 'value': 2, 'name': '罗宪' }, { 'value': 2, 'name': '萧庆' }, { 'value': 2, 'name': '董珊珊' }, { 'value': 2, 'name': '陆沉' }, { 'value': 2, 'name': '顾倾' }, { 'value': 2, 'name': 'Domo' }, { 'value': 2, 'name': 'GPL' }, { 'value': 2, 'name': 'PAI' }, { 'value': 2, 'name': 'SPSS' }, { 'value': 2, 'name': 'SYSTAT' }, { 'value': 2, 'name': 'Tableau' }, { 'value': 2, 'name': 'D3' }, { 'value': 2, 'name': 'Vega' }, { 'value': 2, 'name': '统计图表' }])
+}
+
+Mock.mock(/\/data\/antv\/tag-cloud/, 'get', tagCloudData)

src/mock/services/user.js

+import Mock from 'mockjs2'
+import { builder } from '../util'
+
+const info = (options) => {
+  console.log('options', options)
+  const userInfo = {
+    'id': '4291d7da9005377ec9aec4a71ea837f',
+    'name': '天野远子',
+    'username': 'admin',
+    'password': '',
+    'avatar': '/avatar2.jpg',
+    'status': 1,
+    'telephone': '',
+    'lastLoginIp': '27.154.74.117',
+    'lastLoginTime': 1534837621348,
+    'creatorId': 'admin',
+    'createTime': 1497160610259,
+    'merchantCode': 'TLif2btpzg079h15bk',
+    'deleted': 0,
+    'roleId': 'admin',
+    'role': {}
+  }
+  // role
+  const roleObj = {
+    'id': 'admin',
+    'name': '管理员',
+    'describe': '拥有所有权限',
+    'status': 1,
+    'creatorId': 'system',
+    'createTime': 1497160610259,
+    'deleted': 0,
+    'permissions': [{
+      'roleId': 'admin',
+      'permissionId': 'dashboard',
+      'permissionName': '仪表盘',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'exception',
+      'permissionName': '异常页面权限',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'result',
+      'permissionName': '结果权限',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'profile',
+      'permissionName': '详细页权限',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'table',
+      'permissionName': '表格权限',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'import',
+        'describe': '导入',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'form',
+      'permissionName': '表单权限',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'order',
+      'permissionName': '订单管理',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'permission',
+      'permissionName': '权限管理',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'role',
+      'permissionName': '角色管理',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'table',
+      'permissionName': '桌子管理',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"query","defaultCheck":false,"describe":"查询"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'query',
+        'describe': '查询',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }, {
+      'roleId': 'admin',
+      'permissionId': 'user',
+      'permissionName': '用户管理',
+      'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"},{"action":"export","defaultCheck":false,"describe":"导出"}]',
+      'actionEntitySet': [{
+        'action': 'add',
+        'describe': '新增',
+        'defaultCheck': false
+      }, {
+        'action': 'import',
+        'describe': '导入',
+        'defaultCheck': false
+      }, {
+        'action': 'get',
+        'describe': '详情',
+        'defaultCheck': false
+      }, {
+        'action': 'update',
+        'describe': '修改',
+        'defaultCheck': false
+      }, {
+        'action': 'delete',
+        'describe': '删除',
+        'defaultCheck': false
+      }, {
+        'action': 'export',
+        'describe': '导出',
+        'defaultCheck': false
+      }],
+      'actionList': null,
+      'dataAccess': null
+    }]
+  }
+
+  roleObj.permissions.push({
+    'roleId': 'admin',
+    'permissionId': 'support',
+    'permissionName': '超级模块',
+    'actions': '[{"action":"add","defaultCheck":false,"describe":"新增"},{"action":"import","defaultCheck":false,"describe":"导入"},{"action":"get","defaultCheck":false,"describe":"详情"},{"action":"update","defaultCheck":false,"describe":"修改"},{"action":"delete","defaultCheck":false,"describe":"删除"},{"action":"export","defaultCheck":false,"describe":"导出"}]',
+    'actionEntitySet': [{
+      'action': 'add',
+      'describe': '新增',
+      'defaultCheck': false
+    }, {
+      'action': 'import',
+      'describe': '导入',
+      'defaultCheck': false
+    }, {
+      'action': 'get',
+      'describe': '详情',
+      'defaultCheck': false
+    }, {
+      'action': 'update',
+      'describe': '修改',
+      'defaultCheck': false
+    }, {
+      'action': 'delete',
+      'describe': '删除',
+      'defaultCheck': false
+    }, {
+      'action': 'export',
+      'describe': '导出',
+      'defaultCheck': false
+    }],
+    'actionList': null,
+    'dataAccess': null
+  })
+
+  userInfo.role = roleObj
+  return builder(userInfo)
+}
+
+const userNav = (options) => {
+  const nav = [
+    // dashboard
+    {
+      'name': 'dashboard',
+      'parentId': 0,
+      'id': 1,
+      'meta': {
+        'icon': 'dashboard',
+        'title': '仪表盘',
+        'show': true
+      },
+      'component': 'RouteView',
+      'redirect': '/dashboard/workplace'
+    },
+    {
+      'name': 'workplace',
+      'parentId': 1,
+      'id': 7,
+      'meta': {
+        'title': '工作台',
+        'show': true
+      },
+      'component': 'Workplace'
+    },
+    {
+      'name': 'monitor',
+      'path': 'https://www.baidu.com/',
+      'parentId': 1,
+      'id': 3,
+      'meta': {
+        'title': '监控页（外部）',
+        'target': '_blank',
+        'show': true
+      }
+    },
+    {
+      'name': 'Analysis',
+      'parentId': 1,
+      'id': 2,
+      'meta': {
+        'title': '分析页',
+        'show': true
+      },
+      'component': 'Analysis',
+      'path': '/dashboard/analysis'
+    },
+    {
+      'name': 'tests',
+      'parentId': 1,
+      'id': 8,
+      'meta': {
+        'title': '测试功能',
+        'show': true
+      },
+      'component': 'TestWork'
+    },
+
+    // form
+    {
+      'name': 'form',
+      'parentId': 0,
+      'id': 10,
+      'meta': {
+        'icon': 'form',
+        'title': '表单页'
+      },
+      'redirect': '/form/base-form',
+      'component': 'PageView'
+    },
+    {
+      'name': 'basic-form',
+      'parentId': 10,
+      'id': 6,
+      'meta': {
+        'title': '基础表单'
+      },
+      'component': 'BasicForm'
+    },
+    {
+      'name': 'step-form',
+      'parentId': 10,
+      'id': 5,
+      'meta': {
+        'title': '分步表单'
+      },
+      'component': 'StepForm'
+    },
+    {
+      'name': 'advanced-form',
+      'parentId': 10,
+      'id': 4,
+      'meta': {
+        'title': '高级表单'
+      },
+      'component': 'AdvanceForm'
+    },
+
+    // list
+    {
+      'name': 'list',
+      'parentId': 0,
+      'id': 10010,
+      'meta': {
+        'icon': 'table',
+        'title': '列表页',
+        'show': true
+      },
+      'redirect': '/list/table-list',
+      'component': 'PageView'
+    },
+    {
+      'name': 'table-list',
+      'parentId': 10010,
+      'id': 10011,
+      'path': '/list/table-list/:pageNo([1-9]\\d*)?',
+      'meta': {
+        'title': '查询表格',
+        'show': true
+      },
+      'component': 'TableList'
+    },
+    {
+      'name': 'basic-list',
+      'parentId': 10010,
+      'id': 10012,
+      'meta': {
+        'title': '标准列表',
+        'show': true
+      },
+      'component': 'StandardList'
+    },
+    {
+      'name': 'card',
+      'parentId': 10010,
+      'id': 10013,
+      'meta': {
+        'title': '卡片列表',
+        'show': true
+      },
+      'component': 'CardList'
+    },
+    {
+      'name': 'search',
+      'parentId': 10010,
+      'id': 10014,
+      'meta': {
+        'title': '搜索列表',
+        'show': true
+      },
+      'redirect': '/list/search/article',
+      'component': 'SearchLayout'
+    },
+    {
+      'name': 'article',
+      'parentId': 10014,
+      'id': 10015,
+      'meta': {
+        'title': '搜索列表（文章）',
+        'show': true
+      },
+      'component': 'SearchArticles'
+    },
+    {
+      'name': 'project',
+      'parentId': 10014,
+      'id': 10016,
+      'meta': {
+        'title': '搜索列表（项目）',
+        'show': true
+      },
+      'component': 'SearchProjects'
+    },
+    {
+      'name': 'application',
+      'parentId': 10014,
+      'id': 10017,
+      'meta': {
+        'title': '搜索列表（应用）',
+        'show': true
+      },
+      'component': 'SearchApplications'
+    },
+
+    // profile
+    {
+      'name': 'profile',
+      'parentId': 0,
+      'id': 10018,
+      'meta': {
+        'title': '详情页',
+        'icon': 'profile',
+        'show': true
+      },
+      'redirect': '/profile/basic',
+      'component': 'RouteView'
+    },
+    {
+      'name': 'basic',
+      'parentId': 10018,
+      'id': 10019,
+      'meta': {
+        'title': '基础详情页',
+        'show': true
+      },
+      'component': 'ProfileBasic'
+    },
+    {
+      'name': 'advanced',
+      'parentId': 10018,
+      'id': 10020,
+      'meta': {
+        'title': '高级详情页',
+        'show': true
+      },
+      'component': 'ProfileAdvanced'
+    },
+
+    // result
+    {
+      'name': 'result',
+      'parentId': 0,
+      'id': 10021,
+      'meta': {
+        'title': '结果页',
+        'icon': 'check-circle-o',
+        'show': true
+      },
+      'redirect': '/result/success',
+      'component': 'PageView'
+    },
+    {
+      'name': 'success',
+      'parentId': 10021,
+      'id': 10022,
+      'meta': {
+        'title': '成功',
+        'hiddenHeaderContent': true,
+        'show': true
+      },
+      'component': 'ResultSuccess'
+    },
+    {
+      'name': 'fail',
+      'parentId': 10021,
+      'id': 10023,
+      'meta': {
+        'title': '失败',
+        'hiddenHeaderContent': true,
+        'show': true
+      },
+      'component': 'ResultFail'
+    },
+
+    // Exception
+    {
+      'name': 'exception',
+      'parentId': 0,
+      'id': 10024,
+      'meta': {
+        'title': '异常页',
+        'icon': 'warning',
+        'show': true
+      },
+      'redirect': '/exception/403',
+      'component': 'RouteView'
+    },
+    {
+      'name': '403',
+      'parentId': 10024,
+      'id': 10025,
+      'meta': {
+        'title': '403',
+        'show': true
+      },
+      'component': 'Exception403'
+    },
+    {
+      'name': '404',
+      'parentId': 10024,
+      'id': 10026,
+      'meta': {
+        'title': '404',
+        'show': true
+      },
+      'component': 'Exception404'
+    },
+    {
+      'name': '500',
+      'parentId': 10024,
+      'id': 10027,
+      'meta': {
+        'title': '500',
+        'show': true
+      },
+      'component': 'Exception500'
+    },
+
+    // account
+    {
+      'name': 'account',
+      'parentId': 0,
+      'id': 10028,
+      'meta': {
+        'title': '个人页',
+        'icon': 'user',
+        'show': true
+      },
+      'redirect': '/account/center',
+      'component': 'RouteView'
+    },
+    {
+      'name': 'center',
+      'parentId': 10028,
+      'id': 10029,
+      'meta': {
+        'title': '个人中心',
+        'show': true
+      },
+      'component': 'AccountCenter'
+    },
+    // 特殊三级菜单
+    {
+      'name': 'settings',
+      'parentId': 10028,
+      'id': 10030,
+      'meta': {
+        'title': '个人设置',
+        'hideHeader': true,
+        'hideChildren': true,
+        'show': true
+      },
+      'redirect': '/account/settings/base',
+      'component': 'AccountSettings'
+    },
+    {
+      'name': 'BaseSettings',
+      'path': '/account/settings/base',
+      'parentId': 10030,
+      'id': 10031,
+      'meta': {
+        'title': '基本设置',
+        'show': false
+      },
+      'component': 'BaseSettings'
+    },
+    {
+      'name': 'SecuritySettings',
+      'path': '/account/settings/security',
+      'parentId': 10030,
+      'id': 10032,
+      'meta': {
+        'title': '安全设置',
+        'show': false
+      },
+      'component': 'SecuritySettings'
+    },
+    {
+      'name': 'CustomSettings',
+      'path': '/account/settings/custom',
+      'parentId': 10030,
+      'id': 10033,
+      'meta': {
+        'title': '个性化设置',
+        'show': false
+      },
+      'component': 'CustomSettings'
+    },
+    {
+      'name': 'BindingSettings',
+      'path': '/account/settings/binding',
+      'parentId': 10030,
+      'id': 10034,
+      'meta': {
+        'title': '账户绑定',
+        'show': false
+      },
+      'component': 'BindingSettings'
+    },
+    {
+      'name': 'NotificationSettings',
+      'path': '/account/settings/notification',
+      'parentId': 10030,
+      'id': 10034,
+      'meta': {
+        'title': '新消息通知',
+        'show': false
+      },
+      'component': 'NotificationSettings'
+    }
+  ]
+  const json = builder(nav)
+  console.log('json', json)
+  return json
+}
+
+Mock.mock(/\/api\/user\/info/, 'get', info)
+Mock.mock(/\/api\/user\/nav/, 'get', userNav)

src/mock/util.js

+const responseBody = {
+  message: '',
+  timestamp: 0,
+  result: null,
+  code: 0
+}
+
+export const builder = (data, message, code = 0, headers = {}) => {
+  responseBody.result = data
+  if (message !== undefined && message !== null) {
+    responseBody.message = message
+  }
+  if (code !== undefined && code !== 0) {
+    responseBody.code = code
+    responseBody._status = code
+  }
+  if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
+    responseBody._headers = headers
+  }
+  responseBody.timestamp = new Date().getTime()
+  return responseBody
+}
+
+export const getQueryParameters = (options) => {
+  const url = options.url
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse('{"' + decodeURIComponent(search)
+    .replace(/"/g, '\\"')
+    .replace(/&/g, '","')
+    .replace(/=/g, '":"') + '"}')
+}
+
+export const getBody = (options) => {
+  return options.body && JSON.parse(options.body)
+}

src/permission.js

+import Vue from 'vue'
+import router from './router'
+import store from './store'
+
+import NProgress from 'nprogress' // progress bar
+import '@/components/NProgress/nprogress.less' // progress bar custom style
+import notification from 'ant-design-vue/es/notification'
+import { setDocumentTitle, domTitle } from '@/utils/domUtil'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist
+const defaultRoutePath = '/dashboard/workplace'
+
+router.beforeEach((to, from, next) => {
+  NProgress.start() // start progress bar
+  to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
+  if (Vue.ls.get(ACCESS_TOKEN)) {
+    /* has token */
+    if (to.path === '/user/login') {
+      next({ path: defaultRoutePath })
+      NProgress.done()
+    } else {
+      if (store.getters.roles.length === 0) {
+        store
+          .dispatch('GetInfo')
+          .then(res => {
+            const roles = res.result && res.result.role
+            store.dispatch('GenerateRoutes', { roles }).then(() => {
+              // 根据roles权限生成可访问的路由表
+              // 动态添加可访问路由表
+              router.addRoutes(store.getters.addRouters)
+              const redirect = decodeURIComponent(from.query.redirect || to.path)
+              if (to.path === redirect) {
+                // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+                next({ ...to, replace: true })
+              } else {
+                // 跳转到目的路由
+                next({ path: redirect })
+              }
+            })
+          })
+          .catch(() => {
+            notification.error({
+              message: '错误',
+              description: '请求用户信息失败，请重试'
+            })
+            store.dispatch('Logout').then(() => {
+              next({ path: '/user/login', query: { redirect: to.fullPath } })
+            })
+          })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.includes(to.name)) {
+      // 在免登录白名单，直接进入
+      next()
+    } else {
+      next({ path: '/user/login', query: { redirect: to.fullPath } })
+      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done() // finish progress bar
+})

src/router/README.md

+路由/菜单说明
+====
+
+
+格式和说明
+----
+
+```ecmascript 6
+const routerObject = {
+  redirect: noredirect,
+  name: 'router-name',
+  hidden: true,
+  meta: {
+    title: 'title',
+    icon: 'a-icon',
+    target: '_blank|_self|_top|_parent',
+    keepAlive: true,
+    hiddenHeaderContent: true,
+  }
+}
+```
+
+
+
+`{ Route }` 对象
+
+| 参数     | 说明                                      | 类型    | 默认值 |
+| -------- | ----------------------------------------- | ------- | ------ |
+| hidden   | 控制路由是否显示在 sidebar                | boolean | false |
+| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string  | -      |
+| name     | 路由名称, 必须设置,且不能重名           | string  | -      |
+| meta     | 路由元信息（路由附带扩展信息）            | object  | {}     |
+| hideChildrenInMenu | 强制菜单显示为Item而不是SubItem(配合 meta.hidden) | boolean  | -   |
+
+
+`{ Meta }` 路由元信息对象
+
+| 参数                | 说明                                                         | 类型    | 默认值 |
+| ------------------- | ------------------------------------------------------------ | ------- | ------ |
+| title               | 路由标题, 用于显示面包屑, 页面标题 *推荐设置                 | string  | -      |
+| icon                | 路由在 menu 上显示的图标                                     | [string,svg]  | -      |
+| keepAlive           | 缓存该路由                                                   | boolean | false  |
+| target              | 菜单链接跳转目标（参考 html a 标记）                          | string | -  |
+| hidden              | 配合`hideChildrenInMenu`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false  |
+| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/PageHeader/PageHeader.vue#L6) 组件中的页面带的 面包屑和页面标题栏 | boolean | false  |
+| permission          | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array   | []     |
+
+> 路由自定义 `Icon` 请引入自定义 `svg` Icon 文件，然后传递给路由的 `meta.icon` 参数即可
+
+路由构建例子方案1
+
+路由例子
+----
+
+```ecmascript 6
+const asyncRouterMap = [
+  {
+    path: '/',
+    name: 'index',
+    component: BasicLayout,
+    meta: { title: '首页' },
+    redirect: '/dashboard/analysis',
+    children: [
+      {
+        path: '/dashboard',
+        component: RouteView,
+        name: 'dashboard',
+        redirect: '/dashboard/workplace',
+        meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']},
+        children: [
+          {
+            path: '/dashboard/analysis',
+            name: 'Analysis',
+            component: () => import('@/views/dashboard/Analysis'),
+            meta: {title: '分析页', permission: ['dashboard']}
+          },
+          {
+            path: '/dashboard/monitor',
+            name: 'Monitor',
+            hidden: true,
+            component: () => import('@/views/dashboard/Monitor'),
+            meta: {title: '监控页', permission: ['dashboard']}
+          },
+          {
+            path: '/dashboard/workplace',
+            name: 'Workplace',
+            component: () => import('@/views/dashboard/Workplace'),
+            meta: {title: '工作台', permission: ['dashboard']}
+          }
+        ]
+      },
+
+      // result
+      {
+        path: '/result',
+        name: 'result',
+        component: PageView,
+        redirect: '/result/success',
+        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
+        children: [
+          {
+            path: '/result/success',
+            name: 'ResultSuccess',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
+            // 该页面隐藏面包屑和页面标题栏
+            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
+          },
+          {
+            path: '/result/fail',
+            name: 'ResultFail',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
+            // 该页面隐藏面包屑和页面标题栏
+            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
+          }
+        ]
+      },
+      ...
+    ]
+  },
+]
+```
+
+> 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
+> 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内
+> 3. 子路由的父级路由必须有 `router-view` 才能让子路由渲染出来，请仔细查阅 vue-router 文档
+> 4. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
+
+
+附权限路由结构：
+
+![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
+
+
+第二种前端路由由后端动态生成的设计，可以前往官网文档 https://pro.loacg.com/docs/authority-management 参考
\ No newline at end of file

src/router/generator-routers.js

+// eslint-disable-next-line
+import * as loginService from '@/api/login'
+// eslint-disable-next-line
+import { BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
+
+// 前端路由表
+const constantRouterComponents = {
+  // 基础页面 layout 必须引入
+  BasicLayout: BasicLayout,
+  BlankLayout: BlankLayout,
+  RouteView: RouteView,
+  PageView: PageView,
+  '403': () => import(/* webpackChunkName: "error" */ '@/views/exception/403'),
+  '404': () => import(/* webpackChunkName: "error" */ '@/views/exception/404'),
+  '500': () => import(/* webpackChunkName: "error" */ '@/views/exception/500'),
+
+  // 你需要动态引入的页面组件
+  'Workplace': () => import('@/views/dashboard/Workplace'),
+  'Analysis': () => import('@/views/dashboard/Analysis'),
+
+  // form
+  'BasicForm': () => import('@/views/form/BasicForm'),
+  'StepForm': () => import('@/views/form/stepForm/StepForm'),
+  'AdvanceForm': () => import('@/views/form/advancedForm/AdvancedForm'),
+
+  // list
+  'TableList': () => import('@/views/list/TableList'),
+  'StandardList': () => import('@/views/list/StandardList'),
+  'CardList': () => import('@/views/list/CardList'),
+  'SearchLayout': () => import('@/views/list/search/SearchLayout'),
+  'SearchArticles': () => import('@/views/list/search/Article'),
+  'SearchProjects': () => import('@/views/list/search/Projects'),
+  'SearchApplications': () => import('@/views/list/search/Applications'),
+  'ProfileBasic': () => import('@/views/profile/basic/Index'),
+  'ProfileAdvanced': () => import('@/views/profile/advanced/Advanced'),
+
+  // result
+  'ResultSuccess': () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
+  'ResultFail': () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
+
+  // exception
+  'Exception403': () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
+  'Exception404': () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
+  'Exception500': () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
+
+  // account
+  'AccountCenter': () => import('@/views/account/center/Index'),
+  'AccountSettings': () => import('@/views/account/settings/Index'),
+  'BaseSettings': () => import('@/views/account/settings/BaseSetting'),
+  'SecuritySettings': () => import('@/views/account/settings/Security'),
+  'CustomSettings': () => import('@/views/account/settings/Custom'),
+  'BindingSettings': () => import('@/views/account/settings/Binding'),
+  'NotificationSettings': () => import('@/views/account/settings/Notification'),
+
+  'TestWork': () => import(/* webpackChunkName: "TestWork" */ '@/views/dashboard/TestWork')
+}
+
+// 前端未找到页面路由（固定不用改）
+const notFoundRouter = {
+  path: '*', redirect: '/404', hidden: true
+}
+
+// 根级菜单
+const rootRouter = {
+  key: '',
+  name: 'index',
+  path: '',
+  component: 'BasicLayout',
+  redirect: '/dashboard',
+  meta: {
+    title: '首页'
+  },
+  children: []
+}
+
+/**
+ * 动态生成菜单
+ * @param token
+ * @returns {Promise<Router>}
+ */
+export const generatorDynamicRouter = (token) => {
+  return new Promise((resolve, reject) => {
+    loginService.getCurrentUserNav(token).then(res => {
+      console.log('res', res)
+      const { result } = res
+      const menuNav = []
+      const childrenNav = []
+      //      后端数据, 根级树数组,  根级 PID
+      listToTree(result, childrenNav, 0)
+      rootRouter.children = childrenNav
+      menuNav.push(rootRouter)
+      console.log('menuNav', menuNav)
+      const routers = generator(menuNav)
+      routers.push(notFoundRouter)
+      console.log('routers', routers)
+      resolve(routers)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+/**
+ * 格式化树形结构数据 生成 vue-router 层级路由表
+ *
+ * @param routerMap
+ * @param parent
+ * @returns {*}
+ */
+export const generator = (routerMap, parent) => {
+  return routerMap.map(item => {
+    const { title, show, hideChildren, hiddenHeaderContent, target, icon } = item.meta || {}
+    const currentRouter = {
+      // 如果路由设置了 path，则作为默认 path，否则 路由地址 动态拼接生成如 /dashboard/workplace
+      path: item.path || `${parent && parent.path || ''}/${item.key}`,
+      // 路由名称，建议唯一
+      name: item.name || item.key || '',
+      // 该路由对应页面的 组件 :方案1
+      component: constantRouterComponents[item.component || item.key],
+      // 该路由对应页面的 组件 :方案2 (动态加载)
+      // component: constantRouterComponents[item.component || item.key] || () => import(`@/views/${item.component}`),
+
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: { title: title, icon: icon || undefined, hiddenHeaderContent: hiddenHeaderContent, target: target, permission: item.name }
+    }
+    // 是否设置了隐藏菜单
+    if (show === false) {
+      currentRouter.hidden = true
+    }
+    // 是否设置了隐藏子菜单
+    if (hideChildren) {
+      currentRouter.hideChildrenInMenu = true
+    }
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    if (!currentRouter.path.startsWith('http')) {
+      currentRouter.path = currentRouter.path.replace('//', '/')
+    }
+    // 重定向
+    item.redirect && (currentRouter.redirect = item.redirect)
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      // Recursion
+      currentRouter.children = generator(item.children, currentRouter)
+    }
+    return currentRouter
+  })
+}
+
+/**
+ * 数组转树形结构
+ * @param list 源数组
+ * @param tree 树
+ * @param parentId 父ID
+ */
+const listToTree = (list, tree, parentId) => {
+  list.forEach(item => {
+    // 判断是否为父级菜单
+    if (item.parentId === parentId) {
+      const child = {
+        ...item,
+        key: item.key || item.name,
+        children: []
+      }
+      // 迭代 list， 找到当前菜单相符合的所有子菜单
+      listToTree(list, child.children, item.id)
+      // 删掉不存在 children 值的属性
+      if (child.children.length <= 0) {
+        delete child.children
+      }
+      // 加入到树中
+      tree.push(child)
+    }
+  })
+}

src/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+import { constantRouterMap } from '@/config/router.config'
+
+// hack router push callback
+const originalPush = Router.prototype.push
+Router.prototype.push = function push (location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
+})

src/store/getters.js

+const getters = {
+  device: state => state.app.device,
+  theme: state => state.app.theme,
+  color: state => state.app.color,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  nickname: state => state.user.name,
+  welcome: state => state.user.welcome,
+  roles: state => state.user.roles,
+  userInfo: state => state.user.info,
+  addRouters: state => state.permission.addRouters,
+  multiTab: state => state.app.multiTab,
+  lang: state => state.i18n.lang
+}
+
+export default getters

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import app from './modules/app'
+import user from './modules/user'
+
+// default router permission control
+import permission from './modules/permission'
+
+// dynamic router permission control (Experimental)
+// import permission from './modules/async-router'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    app,
+    user,
+    permission
+  },
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+  getters
+})

src/store/modules/app.js

+import Vue from 'vue'
+import {
+  SIDEBAR_TYPE,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR,
+  DEFAULT_COLOR_WEAK,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_CONTENT_WIDTH_TYPE,
+  DEFAULT_MULTI_TAB
+} from '@/store/mutation-types'
+
+const app = {
+  state: {
+    sidebar: true,
+    device: 'desktop',
+    theme: '',
+    layout: '',
+    contentWidth: '',
+    fixedHeader: false,
+    fixSiderbar: false,
+    autoHideHeader: false,
+    color: null,
+    weak: false,
+    multiTab: true
+  },
+  mutations: {
+    SET_SIDEBAR_TYPE: (state, type) => {
+      state.sidebar = type
+      Vue.ls.set(SIDEBAR_TYPE, type)
+    },
+    CLOSE_SIDEBAR: (state) => {
+      Vue.ls.set(SIDEBAR_TYPE, true)
+      state.sidebar = false
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
+    },
+    TOGGLE_THEME: (state, theme) => {
+      // setStore('_DEFAULT_THEME', theme)
+      Vue.ls.set(DEFAULT_THEME, theme)
+      state.theme = theme
+    },
+    TOGGLE_LAYOUT_MODE: (state, layout) => {
+      Vue.ls.set(DEFAULT_LAYOUT_MODE, layout)
+      state.layout = layout
+    },
+    TOGGLE_FIXED_HEADER: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
+      state.fixedHeader = fixed
+    },
+    TOGGLE_FIXED_SIDERBAR: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
+      state.fixSiderbar = fixed
+    },
+    TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
+      Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
+      state.autoHideHeader = show
+    },
+    TOGGLE_CONTENT_WIDTH: (state, type) => {
+      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
+      state.contentWidth = type
+    },
+    TOGGLE_COLOR: (state, color) => {
+      Vue.ls.set(DEFAULT_COLOR, color)
+      state.color = color
+    },
+    TOGGLE_WEAK: (state, flag) => {
+      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
+      state.weak = flag
+    },
+    TOGGLE_MULTI_TAB: (state, bool) => {
+      Vue.ls.set(DEFAULT_MULTI_TAB, bool)
+      state.multiTab = bool
+    }
+  },
+  actions: {
+    setSidebar ({ commit }, type) {
+      commit('SET_SIDEBAR_TYPE', type)
+    },
+    CloseSidebar ({ commit }) {
+      commit('CLOSE_SIDEBAR')
+    },
+    ToggleDevice ({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    },
+    ToggleTheme ({ commit }, theme) {
+      commit('TOGGLE_THEME', theme)
+    },
+    ToggleLayoutMode ({ commit }, mode) {
+      commit('TOGGLE_LAYOUT_MODE', mode)
+    },
+    ToggleFixedHeader ({ commit }, fixedHeader) {
+      if (!fixedHeader) {
+        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
+      }
+      commit('TOGGLE_FIXED_HEADER', fixedHeader)
+    },
+    ToggleFixSiderbar ({ commit }, fixSiderbar) {
+      commit('TOGGLE_FIXED_SIDERBAR', fixSiderbar)
+    },
+    ToggleFixedHeaderHidden ({ commit }, show) {
+      commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
+    },
+    ToggleContentWidth ({ commit }, type) {
+      commit('TOGGLE_CONTENT_WIDTH', type)
+    },
+    ToggleColor ({ commit }, color) {
+      commit('TOGGLE_COLOR', color)
+    },
+    ToggleWeak ({ commit }, weakFlag) {
+      commit('TOGGLE_WEAK', weakFlag)
+    },
+    ToggleMultiTab ({ commit }, bool) {
+      commit('TOGGLE_MULTI_TAB', bool)
+    }
+  }
+}
+
+export default app

src/store/modules/async-router.js

+/**
+ * 向后端请求用户的菜单，动态生成路由
+ */
+import { constantRouterMap } from '@/config/router.config'
+import { generatorDynamicRouter } from '@/router/generator-routers'
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    }
+  },
+  actions: {
+    GenerateRoutes ({ commit }, data) {
+      return new Promise(resolve => {
+        const { token } = data
+        generatorDynamicRouter(token).then(routers => {
+          commit('SET_ROUTERS', routers)
+          resolve()
+        })
+      })
+    }
+  }
+}
+
+export default permission

src/store/modules/permission.js

+import { asyncRouterMap, constantRouterMap } from '@/config/router.config'
+
+/**
+ * 过滤账户是否拥有某一个权限，并将菜单从加载列表移除
+ *
+ * @param permission
+ * @param route
+ * @returns {boolean}
+ */
+function hasPermission (permission, route) {
+  if (route.meta && route.meta.permission) {
+    let flag = false
+    for (let i = 0, len = permission.length; i < len; i++) {
+      flag = route.meta.permission.includes(permission[i])
+      if (flag) {
+        return true
+      }
+    }
+    return false
+  }
+  return true
+}
+
+/**
+ * 单账户多角色时，使用该方法可过滤角色不存在的菜单
+ *
+ * @param roles
+ * @param route
+ * @returns {*}
+ */
+// eslint-disable-next-line
+function hasRole(roles, route) {
+  if (route.meta && route.meta.roles) {
+    return route.meta.roles.includes(roles.id)
+  } else {
+    return true
+  }
+}
+
+function filterAsyncRouter (routerMap, roles) {
+  const accessedRouters = routerMap.filter(route => {
+    if (hasPermission(roles.permissionList, route)) {
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children, roles)
+      }
+      return true
+    }
+    return false
+  })
+  return accessedRouters
+}
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    }
+  },
+  actions: {
+    GenerateRoutes ({ commit }, data) {
+      return new Promise(resolve => {
+        const { roles } = data
+        const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+        commit('SET_ROUTERS', accessedRouters)
+        resolve()
+      })
+    }
+  }
+}
+
+export default permission

src/store/modules/user.js

+import Vue from 'vue'
+import { login, getInfo, logout } from '@/api/login'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { welcome } from '@/utils/util'
+
+const user = {
+  state: {
+    token: '',
+    name: '',
+    welcome: '',
+    avatar: '',
+    roles: [],
+    info: {}
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, { name, welcome }) => {
+      state.name = name
+      state.welcome = welcome
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    },
+    SET_INFO: (state, info) => {
+      state.info = info
+    }
+  },
+
+  actions: {
+    // 登录
+    Login ({ commit }, userInfo) {
+      return new Promise((resolve, reject) => {
+        login(userInfo).then(response => {
+          const result = response.result
+          Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
+          commit('SET_TOKEN', result.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 获取用户信息
+    GetInfo ({ commit }) {
+      return new Promise((resolve, reject) => {
+        getInfo().then(response => {
+          const result = response.result
+
+          if (result.role && result.role.permissions.length > 0) {
+            const role = result.role
+            role.permissions = result.role.permissions
+            role.permissions.map(per => {
+              if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
+                const action = per.actionEntitySet.map(action => { return action.action })
+                per.actionList = action
+              }
+            })
+            role.permissionList = role.permissions.map(permission => { return permission.permissionId })
+            commit('SET_ROLES', result.role)
+            commit('SET_INFO', result)
+          } else {
+            reject(new Error('getInfo: roles must be a non-null array !'))
+          }
+
+          commit('SET_NAME', { name: result.name, welcome: welcome() })
+          commit('SET_AVATAR', result.avatar)
+
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 登出
+    Logout ({ commit, state }) {
+      return new Promise((resolve) => {
+        logout(state.token).then(() => {
+          resolve()
+        }).catch(() => {
+          resolve()
+        }).finally(() => {
+          commit('SET_TOKEN', '')
+          commit('SET_ROLES', [])
+          Vue.ls.remove(ACCESS_TOKEN)
+        })
+      })
+    }
+
+  }
+}
+
+export default user

src/store/mutation-types.js

+export const ACCESS_TOKEN = 'Access-Token'
+export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
+export const DEFAULT_THEME = 'DEFAULT_THEME'
+export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
+export const DEFAULT_COLOR = 'DEFAULT_COLOR'
+export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
+export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
+export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
+export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
+export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
+export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB'
+
+export const CONTENT_WIDTH_TYPE = {
+  Fluid: 'Fluid',
+  Fixed: 'Fixed'
+}

src/utils/axios.js

+const VueAxios = {
+  vm: {},
+  // eslint-disable-next-line no-unused-vars
+  install (Vue, instance) {
+    if (this.installed) {
+      return
+    }
+    this.installed = true
+
+    if (!instance) {
+      // eslint-disable-next-line no-console
+      console.error('You have to install axios')
+      return
+    }
+
+    Vue.axios = instance
+
+    Object.defineProperties(Vue.prototype, {
+      axios: {
+        get: function get () {
+          return instance
+        }
+      },
+      $http: {
+        get: function get () {
+          return instance
+        }
+      }
+    })
+  }
+}
+
+export {
+  VueAxios
+}

src/utils/device.js

+import enquireJs from 'enquire.js'
+
+export const DEVICE_TYPE = {
+  DESKTOP: 'desktop',
+  TABLET: 'tablet',
+  MOBILE: 'mobile'
+}
+
+export const deviceEnquire = function (callback) {
+  const matchDesktop = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.DESKTOP)
+    }
+  }
+
+  const matchLablet = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.TABLET)
+    }
+  }
+
+  const matchMobile = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.MOBILE)
+    }
+  }
+
+  // screen and (max-width: 1087.99px)
+  enquireJs
+    .register('screen and (max-width: 576px)', matchMobile)
+    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
+    .register('screen and (min-width: 1200px)', matchDesktop)
+}

src/utils/domUtil.js

+export const setDocumentTitle = function (title) {
+  document.title = title
+  const ua = navigator.userAgent
+  // eslint-disable-next-line
+  const regex = /\bMicroMessenger\/([\d\.]+)/
+  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
+    const i = document.createElement('iframe')
+    i.src = '/favicon.ico'
+    i.style.display = 'none'
+    i.onload = function () {
+      setTimeout(function () {
+        i.remove()
+      }, 9)
+    }
+    document.body.appendChild(i)
+  }
+}
+
+export const domTitle = 'Ant Design Pro'

src/utils/filter.js

+import Vue from 'vue'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+moment.locale('zh-cn')
+
+Vue.filter('NumberFormat', function (value) {
+  if (!value) {
+    return '0'
+  }
+  const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
+  return intPartFormat
+})
+
+Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
+  return moment(dataStr).format(pattern)
+})
+
+Vue.filter('moment', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
+  return moment(dataStr).format(pattern)
+})

src/utils/helper/permission.js

+const PERMISSION_ENUM = {
+  'add': { key: 'add', label: '新增' },
+  'delete': { key: 'delete', label: '删除' },
+  'edit': { key: 'edit', label: '修改' },
+  'query': { key: 'query', label: '查询' },
+  'get': { key: 'get', label: '详情' },
+  'enable': { key: 'enable', label: '启用' },
+  'disable': { key: 'disable', label: '禁用' },
+  'import': { key: 'import', label: '导入' },
+  'export': { key: 'export', label: '导出' }
+}
+
+function plugin (Vue) {
+  if (plugin.installed) {
+    return
+  }
+
+  !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
+    $auth: {
+      get () {
+        const _this = this
+        return (permissions) => {
+          const [permission, action] = permissions.split('.')
+          const permissionList = _this.$store.getters.roles.permissions
+          return permissionList.find((val) => {
+            return val.permissionId === permission
+          }).actionList.findIndex((val) => {
+            return val === action
+          }) > -1
+        }
+      }
+    }
+  })
+
+  !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
+    $enum: {
+      get () {
+        // const _this = this;
+        return (val) => {
+          let result = PERMISSION_ENUM
+          val && val.split('.').forEach(v => {
+            result = result && result[v] || null
+          })
+          return result
+        }
+      }
+    }
+  })
+}
+
+export default plugin

src/utils/mixin.js

+// import Vue from 'vue'
+import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
+import { mapState } from 'vuex'
+
+// const mixinsComputed = Vue.config.optionMergeStrategies.computed
+// const mixinsMethods = Vue.config.optionMergeStrategies.methods
+
+const mixin = {
+  computed: {
+    ...mapState({
+      layoutMode: state => state.app.layout,
+      navTheme: state => state.app.theme,
+      primaryColor: state => state.app.color,
+      colorWeak: state => state.app.weak,
+      fixedHeader: state => state.app.fixedHeader,
+      fixSiderbar: state => state.app.fixSiderbar,
+      fixSidebar: state => state.app.fixSiderbar,
+      contentWidth: state => state.app.contentWidth,
+      autoHideHeader: state => state.app.autoHideHeader,
+      sidebarOpened: state => state.app.sidebar,
+      multiTab: state => state.app.multiTab
+    })
+  },
+  methods: {
+    isTopMenu () {
+      return this.layoutMode === 'topmenu'
+    },
+    isSideMenu () {
+      return !this.isTopMenu()
+    }
+  }
+}
+
+const mixinDevice = {
+  computed: {
+    ...mapState({
+      device: state => state.app.device
+    })
+  },
+  methods: {
+    isMobile () {
+      return this.device === DEVICE_TYPE.MOBILE
+    },
+    isDesktop () {
+      return this.device === DEVICE_TYPE.DESKTOP
+    },
+    isTablet () {
+      return this.device === DEVICE_TYPE.TABLET
+    }
+  }
+}
+
+const AppDeviceEnquire = {
+  mounted () {
+    const { $store } = this
+    deviceEnquire(deviceType => {
+      switch (deviceType) {
+        case DEVICE_TYPE.DESKTOP:
+          $store.commit('TOGGLE_DEVICE', 'desktop')
+          $store.dispatch('setSidebar', true)
+          break
+        case DEVICE_TYPE.TABLET:
+          $store.commit('TOGGLE_DEVICE', 'tablet')
+          $store.dispatch('setSidebar', false)
+          break
+        case DEVICE_TYPE.MOBILE:
+        default:
+          $store.commit('TOGGLE_DEVICE', 'mobile')
+          $store.dispatch('setSidebar', true)
+          break
+      }
+    })
+  }
+}
+
+export { mixin, AppDeviceEnquire, mixinDevice }

src/utils/permissions.js

+export function actionToObject (json) {
+  try {
+    return JSON.parse(json)
+  } catch (e) {
+    console.log('err', e.message)
+  }
+  return []
+}

src/utils/request.js

+import Vue from 'vue'
+import axios from 'axios'
+import store from '@/store'
+import notification from 'ant-design-vue/es/notification'
+import { VueAxios } from './axios'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
+  timeout: 6000 // 请求超时时间
+})
+
+const err = (error) => {
+  if (error.response) {
+    const data = error.response.data
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    if (error.response.status === 403) {
+      notification.error({
+        message: 'Forbidden',
+        description: data.message
+      })
+    }
+    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
+      notification.error({
+        message: 'Unauthorized',
+        description: 'Authorization verification failed'
+      })
+      if (token) {
+        store.dispatch('Logout').then(() => {
+          setTimeout(() => {
+            window.location.reload()
+          }, 1500)
+        })
+      }
+    }
+  }
+  return Promise.reject(error)
+}
+
+// request interceptor
+service.interceptors.request.use(config => {
+  const token = Vue.ls.get(ACCESS_TOKEN)
+  if (token) {
+    config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+  }
+  return config
+}, err)
+
+// response interceptor
+service.interceptors.response.use((response) => {
+  return response.data
+}, err)
+
+const installer = {
+  vm: {},
+  install (Vue) {
+    Vue.use(VueAxios, service)
+  }
+}
+
+export {
+  installer as VueAxios,
+  service as axios
+}

src/utils/util.js

+export function timeFix () {
+  const time = new Date()
+  const hour = time.getHours()
+  return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
+}
+
+export function welcome () {
+  const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
+  const index = Math.floor(Math.random() * arr.length)
+  return arr[index]
+}
+
+/**
+ * 触发 window.resize
+ */
+export function triggerWindowResizeEvent () {
+  const event = document.createEvent('HTMLEvents')
+  event.initEvent('resize', true, true)
+  event.eventType = 'message'
+  window.dispatchEvent(event)
+}
+
+export function handleScrollHeader (callback) {
+  let timer = 0
+
+  let beforeScrollTop = window.pageYOffset
+  callback = callback || function () {}
+  window.addEventListener(
+    'scroll',
+    event => {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        let direction = 'up'
+        const afterScrollTop = window.pageYOffset
+        const delta = afterScrollTop - beforeScrollTop
+        if (delta === 0) {
+          return false
+        }
+        direction = delta > 0 ? 'down' : 'up'
+        callback(direction)
+        beforeScrollTop = afterScrollTop
+      }, 50)
+    },
+    false
+  )
+}
+
+export function isIE () {
+  const bw = window.navigator.userAgent
+  const compare = (s) => bw.indexOf(s) >= 0
+  const ie11 = (() => 'ActiveXObject' in window)()
+  return compare('MSIE') || ie11
+}
+
+/**
+ * Remove loading animate
+ * @param id parent element id or class
+ * @param timeout
+ */
+export function removeLoadingAnimate (id = '', timeout = 1500) {
+  if (id === '') {
+    return
+  }
+  setTimeout(() => {
+    document.body.removeChild(document.getElementById(id))
+  }, timeout)
+}

src/utils/utils.less

+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
\ No newline at end of file

src/views/404.vue

+<template>
+  <div>
+    404 page
+  </div>
+</template>
+
+<script>
+export default {
+  name: '404'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Home.vue

+<template>
+  <div class="home">
+    <div class="banner">
+      <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
+      <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
+    </div>
+
+    <br/>
+
+    <h2># Trend 组件 </h2>
+
+    <a-divider> 正常 </a-divider>
+
+    <a-card>
+
+      <trend flag="up" style="margin-right: 16px;">
+        <span slot="term">工资</span>
+        5%
+      </trend>
+      <trend flag="up" style="margin-right: 16px;">
+        <span slot="term">工作量</span>
+        50%
+      </trend>
+      <trend flag="down">
+        <span slot="term">身体状态</span>
+        50%
+      </trend>
+
+    </a-card>
+
+    <a-divider> 颜色反转 </a-divider>
+
+    <a-card style="margin-bottom: 3rem">
+
+      <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
+        <span slot="term">工资</span>
+        5%
+      </trend>
+      <trend flag="down" :reverse-color="true" style="margin-right: 16px;">
+        <span slot="term">工作量</span>
+        50%
+      </trend>
+
+    </a-card>
+
+    <h2># AvatarList 组件 </h2>
+
+    <a-divider> AvatarList </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <avatar-list :max-length="3">
+        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+
+      </avatar-list>
+
+      <a-divider type="vertical" style="margin: 0 16px" />
+
+      <avatar-list size="mini">
+        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+      </avatar-list>
+    </a-card>
+
+    <h2># CountDown 组件 </h2>
+
+    <a-divider> CountDown </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <count-down
+        style="font-size: 2rem"
+        :target="new Date().getTime() + 3000000"
+        :on-end="onEndHandle">
+      </count-down>
+
+      <a-divider type="vertical" style="margin: 0 16px" />
+
+      <count-down
+        style="font-size: 2rem"
+        :target="new Date().getTime() + 10000"
+        :on-end="onEndHandle2">
+      </count-down>
+    </a-card>
+
+    <h2># Ellipsis 组件 </h2>
+
+    <a-divider> Ellipsis </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <ellipsis :length="100" tooltip>
+        There were injuries alleged in three cases in 2015, and a
+        fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
+      </ellipsis>
+    </a-card>
+
+    <h2># NumberInfo 组件 </h2>
+
+    <a-divider> NumberInfo </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <number-info
+        :sub-title="() => { return 'Visits this week' }"
+        :total="12321"
+        status="up"
+        :sub-total="17.1"></number-info>
+    </a-card>
+
+    <h2># TagSelect 组件 </h2>
+
+    <a-divider> TagSelect </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <tag-select>
+        <tag-select-option value="cat1">类目1</tag-select-option>
+        <tag-select-option value="cat2">类目2</tag-select-option>
+        <tag-select-option value="cat3">类目3</tag-select-option>
+        <tag-select-option value="cat4">类目4</tag-select-option>
+        <tag-select-option value="cat5">类目5</tag-select-option>
+        <tag-select-option value="cat6">类目6</tag-select-option>
+        <tag-select-option value="cat7">类目7</tag-select-option>
+      </tag-select>
+    </a-card>
+
+    <h2># DescriptionList 组件 </h2>
+
+    <a-divider> DescriptionList </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <description-list title="组名称" size="small">
+        <description-list-item term="负责人">林东东</description-list-item>
+        <description-list-item term="角色码">1234567</description-list-item>
+        <description-list-item term="所属部门">XX公司-YY部</description-list-item>
+        <description-list-item term="过期时间">2018-08-08</description-list-item>
+        <description-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</description-list-item>
+      </description-list>
+    </a-card>
+
+    <a-divider> TagCloud </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <tag-cloud :tag-list="tagCloudData"></tag-cloud>
+    </a-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+
+import Trend from '@/components/Trend'
+import AvatarList from '@/components/AvatarList'
+import CountDown from '@/components/CountDown/CountDown'
+import Ellipsis from '@/components/Ellipsis'
+import NumberInfo from '@/components/NumberInfo'
+import TagSelect from '@/components/TagSelect'
+import { DescriptionList, TagCloud } from '@/components/'
+
+const AvatarListItem = AvatarList.AvatarItem
+const TagSelectOption = TagSelect.Option
+
+const DescriptionListItem = DescriptionList.Item
+
+export default {
+  name: 'Home',
+  components: {
+    NumberInfo,
+    Ellipsis,
+    CountDown,
+    Trend,
+    AvatarList,
+    AvatarListItem,
+    TagSelect,
+    TagSelectOption,
+    TagCloud,
+    DescriptionList,
+    DescriptionListItem
+  },
+  data () {
+    return {
+      targetTime: new Date().getTime() + 3900000,
+      tagCloudData: []
+    }
+  },
+  created () {
+    this.getTagCloudData()
+  },
+  methods: {
+    onEndHandle () {
+      this.$message.success('CountDown callback!!!')
+    },
+    onEndHandle2 () {
+      this.$notification.open({
+        message: 'Notification Title',
+        description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
+      })
+    },
+    getTagCloudData () {
+      this.$http.get('/data/antv/tag-cloud').then(res => {
+        this.tagCloudData = res.result
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .home {
+    width: 900px;
+    margin: 0 auto;
+    padding: 25px 0;
+  }
+  .home > .banner {
+    text-align: center;
+    padding: 25px 0;
+    margin: 25px 0;
+  }
+</style>

src/views/account/center/Index.vue

+<template>
+  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
+    <a-row :gutter="24">
+      <a-col :md="24" :lg="7">
+        <a-card :bordered="false">
+          <div class="account-center-avatarHolder">
+            <div class="avatar">
+              <img :src="avatar()">
+            </div>
+            <div class="username">{{ nickname() }}</div>
+            <div class="bio">海纳百川，有容乃大</div>
+          </div>
+          <div class="account-center-detail">
+            <p>
+              <i class="title"></i>交互专家
+            </p>
+            <p>
+              <i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
+            </p>
+            <p>
+              <i class="address"></i>
+              <span>浙江省</span>
+              <span>杭州市</span>
+            </p>
+          </div>
+          <a-divider/>
+
+          <div class="account-center-tags">
+            <div class="tagsTitle">标签</div>
+            <div>
+              <template v-for="(tag, index) in tags">
+                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
+                  <a-tag
+                    :key="tag"
+                    :closable="index !== 0"
+                    :afterClose="() => handleTagClose(tag)"
+                  >{{ `${tag.slice(0, 20)}...` }}</a-tag>
+                </a-tooltip>
+                <a-tag
+                  v-else
+                  :key="tag"
+                  :closable="index !== 0"
+                  :afterClose="() => handleTagClose(tag)"
+                >{{ tag }}</a-tag>
+              </template>
+              <a-input
+                v-if="tagInputVisible"
+                ref="tagInput"
+                type="text"
+                size="small"
+                :style="{ width: '78px' }"
+                :value="tagInputValue"
+                @change="handleInputChange"
+                @blur="handleTagInputConfirm"
+                @keyup.enter="handleTagInputConfirm"
+              />
+              <a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
+                <a-icon type="plus"/>New Tag
+              </a-tag>
+            </div>
+          </div>
+          <a-divider :dashed="true"/>
+
+          <div class="account-center-team">
+            <div class="teamTitle">团队</div>
+            <a-spin :spinning="teamSpinning">
+              <div class="members">
+                <a-row>
+                  <a-col :span="12" v-for="(item, index) in teams" :key="index">
+                    <a>
+                      <a-avatar size="small" :src="item.avatar"/>
+                      <span class="member">{{ item.name }}</span>
+                    </a>
+                  </a-col>
+                </a-row>
+              </div>
+            </a-spin>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="24" :lg="17">
+        <a-card
+          style="width:100%"
+          :bordered="false"
+          :tabList="tabListNoTitle"
+          :activeTabKey="noTitleKey"
+          @tabChange="key => handleTabChange(key, 'noTitleKey')"
+        >
+          <article-page v-if="noTitleKey === 'article'"></article-page>
+          <app-page v-else-if="noTitleKey === 'app'"></app-page>
+          <project-page v-else-if="noTitleKey === 'project'"></project-page>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { PageView, RouteView } from '@/layouts'
+import { AppPage, ArticlePage, ProjectPage } from './page'
+
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    RouteView,
+    PageView,
+    AppPage,
+    ArticlePage,
+    ProjectPage
+  },
+  data () {
+    return {
+      tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
+
+      tagInputVisible: false,
+      tagInputValue: '',
+
+      teams: [],
+      teamSpinning: true,
+
+      tabListNoTitle: [
+        {
+          key: 'article',
+          tab: '文章(8)'
+        },
+        {
+          key: 'app',
+          tab: '应用(8)'
+        },
+        {
+          key: 'project',
+          tab: '项目(8)'
+        }
+      ],
+      noTitleKey: 'app'
+    }
+  },
+  mounted () {
+    this.getTeams()
+  },
+  methods: {
+    ...mapGetters(['nickname', 'avatar']),
+
+    getTeams () {
+      this.$http.get('/workplace/teams').then(res => {
+        this.teams = res.result
+        this.teamSpinning = false
+      })
+    },
+
+    handleTabChange (key, type) {
+      this[type] = key
+    },
+
+    handleTagClose (removeTag) {
+      const tags = this.tags.filter(tag => tag !== removeTag)
+      this.tags = tags
+    },
+
+    showTagInput () {
+      this.tagInputVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
+      })
+    },
+
+    handleInputChange (e) {
+      this.tagInputValue = e.target.value
+    },
+
+    handleTagInputConfirm () {
+      const inputValue = this.tagInputValue
+      let tags = this.tags
+      if (inputValue && !tags.includes(inputValue)) {
+        tags = [...tags, inputValue]
+      }
+
+      Object.assign(this, {
+        tags,
+        tagInputVisible: false,
+        tagInputValue: ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.page-header-wrapper-grid-content-main {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+
+  .account-center-avatarHolder {
+    text-align: center;
+    margin-bottom: 24px;
+
+    & > .avatar {
+      margin: 0 auto;
+      width: 104px;
+      height: 104px;
+      margin-bottom: 20px;
+      border-radius: 50%;
+      overflow: hidden;
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    .username {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+  }
+
+  .account-center-detail {
+    p {
+      margin-bottom: 8px;
+      padding-left: 26px;
+      position: relative;
+    }
+
+    i {
+      position: absolute;
+      height: 14px;
+      width: 14px;
+      left: 0;
+      top: 4px;
+      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
+    }
+
+    .title {
+      background-position: 0 0;
+    }
+    .group {
+      background-position: 0 -22px;
+    }
+    .address {
+      background-position: 0 -44px;
+    }
+  }
+
+  .account-center-tags {
+    .ant-tag {
+      margin-bottom: 8px;
+    }
+  }
+
+  .account-center-team {
+    .members {
+      a {
+        display: block;
+        margin: 12px 0;
+        line-height: 24px;
+        height: 24px;
+        .member {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.65);
+          line-height: 24px;
+          max-width: 100px;
+          vertical-align: top;
+          margin-left: 12px;
+          transition: all 0.3s;
+          display: inline-block;
+        }
+        &:hover {
+          span {
+            color: #1890ff;
+          }
+        }
+      }
+    }
+  }
+
+  .tagsTitle,
+  .teamTitle {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+  }
+}
+</style>

src/views/account/center/page/App.vue

+<template>
+  <div class="app-list">
+    <a-list
+      :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
+      :dataSource="dataSource">
+      <a-list-item slot="renderItem" slot-scope="item">
+        <a-card :hoverable="true">
+          <a-card-meta>
+            <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
+            <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="small"/>
+            <div class="meta-cardInfo" slot="description">
+              <div>
+                <p>活跃用户</p>
+                <p>
+                  <span>{{ item.activeUser }}<span>万</span></span>
+                </p>
+              </div>
+              <div>
+                <p>新增用户</p>
+                <p>{{ item.newUser | NumberFormat }}</p>
+              </div>
+            </div>
+          </a-card-meta>
+          <template class="ant-card-actions" slot="actions">
+            <a>
+              <a-icon type="download"/>
+            </a>
+            <a>
+              <a-icon type="edit"/>
+            </a>
+            <a>
+              <a-icon type="share-alt"/>
+            </a>
+            <a>
+              <a-dropdown>
+                <a class="ant-dropdown-link" href="javascript:;">
+                  <a-icon type="ellipsis"/>
+                </a>
+                <a-menu slot="overlay">
+                  <a-menu-item>
+                    <a href="javascript:;">1st menu item</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">2nd menu item</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">3rd menu item</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </a>
+          </template>
+        </a-card>
+      </a-list-item>
+    </a-list>
+
+  </div>
+</template>
+
+<script>
+const dataSource = []
+for (let i = 0; i < 11; i++) {
+  dataSource.push({
+    title: 'Alipay',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+    activeUser: 17,
+    newUser: 1700
+  })
+}
+
+export default {
+  name: 'Article',
+  components: {},
+  data () {
+    return {
+      dataSource
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .app-list {
+
+    .meta-cardInfo {
+      zoom: 1;
+      margin-top: 16px;
+
+      > div {
+        position: relative;
+        text-align: left;
+        float: left;
+        width: 50%;
+
+        p {
+          line-height: 32px;
+          font-size: 24px;
+          margin: 0;
+
+          &:first-child {
+            color: rgba(0, 0, 0, .45);
+            font-size: 12px;
+            line-height: 20px;
+            margin-bottom: 4px;
+          }
+        }
+
+      }
+    }
+  }
+
+</style>

src/views/account/center/page/Article.vue

+<template>
+  <a-list
+    size="large"
+    rowKey="id"
+    :loading="loading"
+    itemLayout="vertical"
+    :dataSource="data"
+  >
+    <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
+      <template slot="actions">
+        <icon-text type="star-o" :text="item.star" />
+        <icon-text type="like-o" :text="item.like" />
+        <icon-text type="message" :text="item.message" />
+      </template>
+      <a-list-item-meta>
+        <a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
+        <template slot="description">
+          <span>
+            <a-tag>Ant Design</a-tag>
+            <a-tag>设计语言</a-tag>
+            <a-tag>蚂蚁金服</a-tag>
+          </span>
+        </template>
+      </a-list-item-meta>
+      <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
+    </a-list-item>
+    <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
+      <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
+    </div>
+  </a-list>
+</template>
+
+<script>
+import { ArticleListContent } from '@/components'
+import IconText from '@/views/list/search/components/IconText'
+
+export default {
+  name: 'Article',
+  components: {
+    IconText,
+    ArticleListContent
+  },
+  data () {
+    return {
+      loading: true,
+      loadingMore: false,
+      data: []
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getList () {
+      this.$http.get('/list/article').then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    },
+    loadMore () {
+      this.loadingMore = true
+      this.$http.get('/list/article').then(res => {
+        this.data = this.data.concat(res.result)
+      }).finally(() => {
+        this.loadingMore = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/account/center/page/Project.vue

+<template>
+  <div class="ant-pro-pages-account-projects-cardList">
+    <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
+      <a-list-item slot="renderItem" slot-scope="item">
+        <a-card class="ant-pro-pages-account-projects-card" hoverable>
+          <img slot="cover" :src="item.cover" :alt="item.title" />
+          <a-card-meta :title="item.title">
+            <template slot="description">
+              <ellipsis :length="50">{{ item.description }}</ellipsis>
+            </template>
+          </a-card-meta>
+          <div class="cardItemContent">
+            <span>{{ item.updatedAt | fromNow }}</span>
+            <div class="avatarList">
+              <avatar-list size="mini">
+                <avatar-list-item
+                  v-for="(member, i) in item.members"
+                  :key="`${item.id}-avatar-${i}`"
+                  :src="member.avatar"
+                  :tips="member.name"
+                />
+              </avatar-list>
+            </div>
+          </div>
+        </a-card>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
+const TagSelectOption = TagSelect.Option
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+  name: 'Project',
+  components: {
+    AvatarList,
+    AvatarListItem,
+    Ellipsis,
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow
+  },
+  data () {
+    return {
+      data: [],
+      form: this.$form.createForm(this),
+      loading: true
+    }
+  },
+  filters: {
+    fromNow (date) {
+      return moment(date).fromNow()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getList () {
+      this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .ant-pro-pages-account-projects-cardList {
+    margin-top: 24px;
+
+    /deep/ .ant-card-meta-title {
+      margin-bottom: 4px;
+    }
+
+    /deep/ .ant-card-meta-description {
+      height: 44px;
+      overflow: hidden;
+      line-height: 22px;
+    }
+
+    .cardItemContent {
+      display: flex;
+      height: 20px;
+      margin-top: 16px;
+      margin-bottom: -4px;
+      line-height: 20px;
+
+      > span {
+        flex: 1 1;
+        color: rgba(0,0,0,.45);
+        font-size: 12px;
+      }
+
+      /deep/ .ant-pro-avatar-list {
+        flex: 0 1 auto;
+      }
+    }
+  }
+</style>

src/views/account/center/page/index.js

+import AppPage from './App'
+import ArticlePage from './Article'
+import ProjectPage from './Project'
+
+export { AppPage, ArticlePage, ProjectPage }

src/views/account/settings/AvatarModal.vue

+<template>
+
+  <a-modal
+    title="修改头像"
+    :visible="visible"
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    :width="800"
+    :footer="null"
+    @cancel="cancelHandel">
+    <a-row>
+      <a-col :xs="24" :md="12" :style="{height: '350px'}">
+        <vue-cropper
+          ref="cropper"
+          :img="options.img"
+          :info="true"
+          :autoCrop="options.autoCrop"
+          :autoCropWidth="options.autoCropWidth"
+          :autoCropHeight="options.autoCropHeight"
+          :fixedBox="options.fixedBox"
+          @realTime="realTime"
+        >
+        </vue-cropper>
+      </a-col>
+      <a-col :xs="24" :md="12" :style="{height: '350px'}">
+        <div class="avatar-upload-preview">
+          <img :src="previews.url" :style="previews.img"/>
+        </div>
+      </a-col>
+    </a-row>
+    <br>
+    <a-row>
+      <a-col :lg="2" :md="2">
+        <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
+          <a-button icon="upload">选择图片</a-button>
+        </a-upload>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 2}" :md="2">
+        <a-button icon="plus" @click="changeScale(1)"/>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 1}" :md="2">
+        <a-button icon="minus" @click="changeScale(-1)"/>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 1}" :md="2">
+        <a-button icon="undo" @click="rotateLeft"/>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 1}" :md="2">
+        <a-button icon="redo" @click="rotateRight"/>
+      </a-col>
+      <a-col :lg="{span: 2, offset: 6}" :md="2">
+        <a-button type="primary" @click="finish('blob')">保存</a-button>
+      </a-col>
+    </a-row>
+  </a-modal>
+
+</template>
+<script>
+import { VueCropper } from 'vue-cropper'
+
+export default {
+  components: {
+    VueCropper
+  },
+  data () {
+    return {
+      visible: false,
+      id: null,
+      confirmLoading: false,
+      fileList: [],
+      uploading: false,
+      options: {
+        // img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        img: '',
+        autoCrop: true,
+        autoCropWidth: 200,
+        autoCropHeight: 200,
+        fixedBox: true
+      },
+      previews: {}
+    }
+  },
+  methods: {
+    edit (id) {
+      this.visible = true
+      this.id = id
+      /* 获取原始头像 */
+    },
+    close () {
+      this.id = null
+      this.visible = false
+    },
+    cancelHandel () {
+      this.close()
+    },
+    changeScale (num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    rotateLeft () {
+      this.$refs.cropper.rotateLeft()
+    },
+    rotateRight () {
+      this.$refs.cropper.rotateRight()
+    },
+    beforeUpload (file) {
+      const reader = new FileReader()
+      // 把Array Buffer转化为blob 如果是base64不需要
+      // 转化为base64
+      reader.readAsDataURL(file)
+      reader.onload = () => {
+        this.options.img = reader.result
+      }
+      // 转化为blob
+      // reader.readAsArrayBuffer(file)
+
+      return false
+    },
+
+    // 上传图片（点击上传按钮）
+    finish (type) {
+      console.log('finish')
+      const _this = this
+      const formData = new FormData()
+      // 输出
+      if (type === 'blob') {
+        this.$refs.cropper.getCropBlob((data) => {
+          const img = window.URL.createObjectURL(data)
+          this.model = true
+          this.modelSrc = img
+          formData.append('file', data, this.fileName)
+          this.$http.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, { contentType: false, processData: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+            .then((response) => {
+              console.log('upload response:', response)
+              // var res = response.data
+              // if (response.status === 'done') {
+              //   _this.imgFile = ''
+              //   _this.headImg = res.realPathList[0] // 完整路径
+              //   _this.uploadImgRelaPath = res.relaPathList[0] // 非完整路径
+              //   _this.$message.success('上传成功')
+              //   this.visible = false
+              // }
+              _this.$message.success('上传成功')
+              _this.$emit('ok', response.url)
+              _this.visible = false
+            })
+        })
+      } else {
+        this.$refs.cropper.getCropData((data) => {
+          this.model = true
+          this.modelSrc = data
+        })
+      }
+    },
+    okHandel () {
+      const vm = this
+
+      vm.confirmLoading = true
+      setTimeout(() => {
+        vm.confirmLoading = false
+        vm.close()
+        vm.$message.success('上传头像成功')
+      }, 2000)
+    },
+
+    realTime (data) {
+      this.previews = data
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .avatar-upload-preview {
+    position: absolute;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/account/settings/BaseSetting.vue

+<template>
+  <div class="account-settings-info-view">
+    <a-row :gutter="16">
+      <a-col :md="24" :lg="16">
+
+        <a-form layout="vertical">
+          <a-form-item
+            label="昵称"
+          >
+            <a-input placeholder="给自己起个名字" />
+          </a-form-item>
+          <a-form-item
+            label="Bio"
+          >
+            <a-textarea rows="4" placeholder="You are not alone."/>
+          </a-form-item>
+
+          <a-form-item
+            label="电子邮件"
+            :required="false"
+          >
+            <a-input placeholder="exp@admin.com"/>
+          </a-form-item>
+          <a-form-item
+            label="加密方式"
+            :required="false"
+          >
+            <a-select defaultValue="aes-256-cfb">
+              <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
+              <a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
+              <a-select-option value="chacha20">chacha20</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item
+            label="连接密码"
+            :required="false"
+          >
+            <a-input placeholder="h3gSbecd"/>
+          </a-form-item>
+          <a-form-item
+            label="登录密码"
+            :required="false"
+          >
+            <a-input placeholder="密码"/>
+          </a-form-item>
+
+          <a-form-item>
+            <a-button type="primary">提交</a-button>
+            <a-button style="margin-left: 8px">保存</a-button>
+          </a-form-item>
+        </a-form>
+
+      </a-col>
+      <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
+        <div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
+          <a-icon type="cloud-upload-o" class="upload-icon"/>
+          <div class="mask">
+            <a-icon type="plus" />
+          </div>
+          <img :src="option.img"/>
+        </div>
+      </a-col>
+
+    </a-row>
+
+    <avatar-modal ref="modal" @ok="setavatar"/>
+
+  </div>
+</template>
+
+<script>
+import AvatarModal from './AvatarModal'
+
+export default {
+  components: {
+    AvatarModal
+  },
+  data () {
+    return {
+      // cropper
+      preview: {},
+      option: {
+        img: '/avatar2.jpg',
+        info: true,
+        size: 1,
+        outputType: 'jpeg',
+        canScale: false,
+        autoCrop: true,
+        // 只有自动截图开启 宽度高度才生效
+        autoCropWidth: 180,
+        autoCropHeight: 180,
+        fixedBox: true,
+        // 开启宽度和高度比例
+        fixed: true,
+        fixedNumber: [1, 1]
+      }
+    }
+  },
+  methods: {
+    setavatar (url) {
+      this.option.img = url
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .avatar-upload-wrapper {
+    height: 200px;
+    width: 100%;
+  }
+
+  .ant-upload-preview {
+    position: relative;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 180px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+
+    .upload-icon {
+      position: absolute;
+      top: 0;
+      right: 10px;
+      font-size: 1.4rem;
+      padding: 0.5rem;
+      background: rgba(222, 221, 221, 0.7);
+      border-radius: 50%;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+    .mask {
+      opacity: 0;
+      position: absolute;
+      background: rgba(0,0,0,0.4);
+      cursor: pointer;
+      transition: opacity 0.4s;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      i {
+        font-size: 2rem;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -1rem;
+        margin-top: -1rem;
+        color: #d6d6d6;
+      }
+    }
+
+    img, .mask {
+      width: 100%;
+      max-width: 180px;
+      height: 100%;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+</style>

src/views/account/settings/Binding.vue

+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+
+  </a-list>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: []
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/account/settings/Custom.vue

+<script>
+import { colorList } from '@/components/SettingDrawer/settingConfig'
+import ASwitch from 'ant-design-vue/es/switch'
+import AList from 'ant-design-vue/es/list'
+import AListItem from 'ant-design-vue/es/list/Item'
+import { mixin } from '@/utils/mixin'
+
+const Meta = AListItem.Meta
+
+export default {
+  components: {
+    AListItem,
+    AList,
+    ASwitch,
+    Meta
+  },
+  mixins: [mixin],
+  data () {
+    return {
+    }
+  },
+  filters: {
+    themeFilter (theme) {
+      const themeMap = {
+        'dark': '暗色',
+        'light': '白色'
+      }
+      return themeMap[theme]
+    }
+  },
+  methods: {
+    colorFilter (color) {
+      const c = colorList.find(o => o.color === color)
+      return c && c.key
+    },
+
+    onChange (checked) {
+      if (checked) {
+        this.$store.dispatch('ToggleTheme', 'dark')
+      } else {
+        this.$store.dispatch('ToggleTheme', 'light')
+      }
+    }
+  },
+  render () {
+    return (
+      <AList itemLayout="horizontal">
+        <AListItem>
+          <Meta>
+            <a slot="title">风格配色</a>
+            <span slot="description">
+                整体风格配色设置
+            </span>
+          </Meta>
+          <div slot="actions">
+            <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
+          </div>
+        </AListItem>
+        <AListItem>
+          <Meta>
+            <a slot="title">主题色</a>
+            <span slot="description">
+                页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
+            </span>
+          </Meta>
+        </AListItem>
+      </AList>
+    )
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/account/settings/Index.vue

+<template>
+  <div class="page-header-index-wide">
+    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
+      <div class="account-settings-info-main" :class="device">
+        <div class="account-settings-info-left">
+          <a-menu
+            :mode="device == 'mobile' ? 'horizontal' : 'inline'"
+            :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
+            :selectedKeys="selectedKeys"
+            type="inner"
+            @openChange="onOpenChange"
+          >
+            <a-menu-item key="/account/settings/base">
+              <router-link :to="{ name: 'BaseSettings' }">
+                基本设置
+              </router-link>
+            </a-menu-item>
+            <a-menu-item key="/account/settings/security">
+              <router-link :to="{ name: 'SecuritySettings' }">
+                安全设置
+              </router-link>
+            </a-menu-item>
+            <a-menu-item key="/account/settings/custom">
+              <router-link :to="{ name: 'CustomSettings' }">
+                个性化
+              </router-link>
+            </a-menu-item>
+            <a-menu-item key="/account/settings/binding">
+              <router-link :to="{ name: 'BindingSettings' }">
+                账户绑定
+              </router-link>
+            </a-menu-item>
+            <a-menu-item key="/account/settings/notification">
+              <router-link :to="{ name: 'NotificationSettings' }">
+                新消息通知
+              </router-link>
+            </a-menu-item>
+          </a-menu>
+        </div>
+        <div class="account-settings-info-right">
+          <div class="account-settings-info-title">
+            <span>{{ $route.meta.title }}</span>
+          </div>
+          <route-view></route-view>
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { PageView, RouteView } from '@/layouts'
+import { mixinDevice } from '@/utils/mixin.js'
+
+export default {
+  components: {
+    RouteView,
+    PageView
+  },
+  mixins: [mixinDevice],
+  data () {
+    return {
+      // horizontal  inline
+      mode: 'inline',
+
+      openKeys: [],
+      selectedKeys: [],
+
+      // cropper
+      preview: {},
+      option: {
+        img: '/avatar2.jpg',
+        info: true,
+        size: 1,
+        outputType: 'jpeg',
+        canScale: false,
+        autoCrop: true,
+        // 只有自动截图开启 宽度高度才生效
+        autoCropWidth: 180,
+        autoCropHeight: 180,
+        fixedBox: true,
+        // 开启宽度和高度比例
+        fixed: true,
+        fixedNumber: [1, 1]
+      },
+
+      pageTitle: ''
+    }
+  },
+  created () {
+    this.updateMenu()
+  },
+  methods: {
+    onOpenChange (openKeys) {
+      this.openKeys = openKeys
+    },
+    updateMenu () {
+      const routes = this.$route.matched.concat()
+      this.selectedKeys = [ routes.pop().path ]
+    }
+  },
+  watch: {
+    '$route' (val) {
+      this.updateMenu()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .account-settings-info-main {
+    width: 100%;
+    display: flex;
+    height: 100%;
+    overflow: auto;
+
+    &.mobile {
+      display: block;
+
+      .account-settings-info-left {
+        border-right: unset;
+        border-bottom: 1px solid #e8e8e8;
+        width: 100%;
+        height: 50px;
+        overflow-x: auto;
+        overflow-y: scroll;
+      }
+      .account-settings-info-right {
+        padding: 20px 40px;
+      }
+    }
+
+    .account-settings-info-left {
+      border-right: 1px solid #e8e8e8;
+      width: 224px;
+    }
+
+    .account-settings-info-right {
+      flex: 1 1;
+      padding: 8px 40px;
+
+      .account-settings-info-title {
+        color: rgba(0,0,0,.85);
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 28px;
+        margin-bottom: 12px;
+      }
+      .account-settings-info-view {
+        padding-top: 12px;
+      }
+    }
+  }
+
+</style>

src/views/account/settings/Notification.vue

+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+
+  </a-list>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: []
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/account/settings/Security.vue

+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+      <a-list-item-meta>
+        <a slot="title">{{ item.title }}</a>
+        <span slot="description">
+          <span class="security-list-description">{{ item.description }}</span>
+          <span v-if="item.value"> : </span>
+          <span class="security-list-value">{{ item.value }}</span>
+        </span>
+      </a-list-item-meta>
+      <template v-if="item.actions">
+        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
+      </template>
+
+    </a-list-item>
+  </a-list>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: [
+        { title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message') } } },
+        { title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } },
+        { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
+        { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
+        { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/Analysis.vue

+<template>
+  <div class="page-header-index-wide">
+    <a-row :gutter="24">
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="总销售额" total="￥126,560">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <trend flag="up" style="margin-right: 16px;">
+              <span slot="term">周同比</span>
+              12%
+            </trend>
+            <trend flag="down">
+              <span slot="term">日同比</span>
+              11%
+            </trend>
+          </div>
+          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-area />
+          </div>
+          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-bar />
+          </div>
+          <template slot="footer">转化率 <span>60%</span></template>
+        </chart-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+        <chart-card :loading="loading" title="运营活动效果" total="78%">
+          <a-tooltip title="指标说明" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
+          </div>
+          <template slot="footer">
+            <trend flag="down" style="margin-right: 16px;">
+              <span slot="term">同周比</span>
+              12%
+            </trend>
+            <trend flag="up">
+              <span slot="term">日环比</span>
+              80%
+            </trend>
+          </template>
+        </chart-card>
+      </a-col>
+    </a-row>
+
+    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <div class="extra-item">
+              <a>今日</a>
+              <a>本周</a>
+              <a>本月</a>
+              <a>本年</a>
+            </div>
+            <a-range-picker :style="{width: '256px'}" />
+          </div>
+          <a-tab-pane loading="true" tab="销售额" key="1">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar :data="barData" title="销售额排行" />
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="门店销售排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane tab="访问量" key="2">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar :data="barData2" title="销售额趋势" />
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="门店销售排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+
+    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
+      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
+        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+          <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
+            <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
+              <a class="ant-dropdown-link" href="#">
+                <a-icon type="ellipsis" />
+              </a>
+              <a-menu slot="overlay">
+                <a-menu-item>
+                  <a href="javascript:;">操作一</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a href="javascript:;">操作二</a>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+            <a-row :gutter="68">
+              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
+                <number-info :total="12321" :sub-total="17.1">
+                  <span slot="subtitle">
+                    <span>搜索用户数</span>
+                    <a-tooltip title="指标说明" slot="action">
+                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
+                    </a-tooltip>
+                  </span>
+                </number-info>
+                <!-- miniChart -->
+                <div>
+                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
+                </div>
+              </a-col>
+              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
+                <number-info :total="2.7" :sub-total="26.2" status="down">
+                  <span slot="subtitle">
+                    <span>人均搜索次数</span>
+                    <a-tooltip title="指标说明" slot="action">
+                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
+                    </a-tooltip>
+                  </span>
+                </number-info>
+                <!-- miniChart -->
+                <div>
+                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
+                </div>
+              </a-col>
+            </a-row>
+            <div class="ant-table-wrapper">
+              <a-table
+                row-key="index"
+                size="small"
+                :columns="searchTableColumns"
+                :dataSource="searchData"
+                :pagination="{ pageSize: 5 }"
+              >
+                <span slot="range" slot-scope="text, record">
+                  <trend :flag="record.status === 0 ? 'up' : 'down'">
+                    {{ text }}%
+                  </trend>
+                </span>
+              </a-table>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }">
+            <div slot="extra" style="height: inherit;">
+              <!-- style="bottom: 12px;display: inline-block;" -->
+              <span class="dashboard-analysis-iconGroup">
+                <a-dropdown :trigger="['click']" placement="bottomLeft">
+                  <a-icon type="ellipsis" class="ant-dropdown-link" />
+                  <a-menu slot="overlay">
+                    <a-menu-item>
+                      <a href="javascript:;">操作一</a>
+                    </a-menu-item>
+                    <a-menu-item>
+                      <a href="javascript:;">操作二</a>
+                    </a-menu-item>
+                  </a-menu>
+                </a-dropdown>
+              </span>
+              <div class="analysis-salesTypeRadio">
+                <a-radio-group defaultValue="a">
+                  <a-radio-button value="a">全部渠道</a-radio-button>
+                  <a-radio-button value="b">线上</a-radio-button>
+                  <a-radio-button value="c">门店</a-radio-button>
+                </a-radio-group>
+              </div>
+
+            </div>
+            <h4>销售额</h4>
+            <div>
+              <!-- style="width: calc(100% - 240px);" -->
+              <div>
+                <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
+                  <v-tooltip :showTitle="false" dataKey="item*percent" />
+                  <v-axis />
+                  <!-- position="right" :offsetX="-140" -->
+                  <v-legend dataKey="item"/>
+                  <v-pie position="percent" color="item" :vStyle="pieStyle" />
+                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
+                </v-chart>
+              </div>
+
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
+import { mixinDevice } from '@/utils/mixin'
+
+const barData = []
+const barData2 = []
+for (let i = 0; i < 12; i += 1) {
+  barData.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+  barData2.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
+
+const rankList = []
+for (let i = 0; i < 7; i++) {
+  rankList.push({
+    name: '白鹭岛 ' + (i + 1) + ' 号店',
+    total: 1234.56 - i * 100
+  })
+}
+
+const searchUserData = []
+for (let i = 0; i < 7; i++) {
+  searchUserData.push({
+    x: moment().add(i, 'days').format('YYYY-MM-DD'),
+    y: Math.ceil(Math.random() * 10)
+  })
+}
+const searchUserScale = [
+  {
+    dataKey: 'x',
+    alias: '时间'
+  },
+  {
+    dataKey: 'y',
+    alias: '用户数',
+    min: 0,
+    max: 10
+  }]
+
+const searchTableColumns = [
+  {
+    dataIndex: 'index',
+    title: '排名',
+    width: 90
+  },
+  {
+    dataIndex: 'keyword',
+    title: '搜索关键词'
+  },
+  {
+    dataIndex: 'count',
+    title: '用户数'
+  },
+  {
+    dataIndex: 'range',
+    title: '周涨幅',
+    align: 'right',
+    sorter: (a, b) => a.range - b.range,
+    scopedSlots: { customRender: 'range' }
+  }
+]
+const searchData = []
+for (let i = 0; i < 50; i += 1) {
+  searchData.push({
+    index: i + 1,
+    keyword: `搜索关键词-${i}`,
+    count: Math.floor(Math.random() * 1000),
+    range: Math.floor(Math.random() * 100),
+    status: Math.floor((Math.random() * 10) % 2)
+  })
+}
+
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '家用电器', count: 32.2 },
+  { item: '食用酒水', count: 21 },
+  { item: '个护健康', count: 17 },
+  { item: '服饰箱包', count: 13 },
+  { item: '母婴产品', count: 9 },
+  { item: '其他', count: 7.8 }
+]
+
+const pieScale = [{
+  dataKey: 'percent',
+  min: 0,
+  formatter: '.0%'
+}]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'percent',
+  field: 'count',
+  dimension: 'item',
+  as: 'percent'
+})
+const pieData = dv.rows
+
+export default {
+  name: 'Analysis',
+  mixins: [mixinDevice],
+  components: {
+    ChartCard,
+    MiniArea,
+    MiniBar,
+    MiniProgress,
+    RankList,
+    Bar,
+    Trend,
+    NumberInfo,
+    MiniSmoothArea
+  },
+  data () {
+    return {
+      loading: true,
+      rankList,
+
+      // 搜索用户数
+      searchUserData,
+      searchUserScale,
+      searchTableColumns,
+      searchData,
+
+      barData,
+      barData2,
+
+      //
+      pieScale,
+      pieData,
+      sourceData,
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      }
+    }
+  },
+  created () {
+    setTimeout(() => {
+      this.loading = !this.loading
+    }, 1000)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  .antd-pro-pages-dashboard-analysis-twoColLayout {
+    position: relative;
+    display: flex;
+    display: block;
+    flex-flow: row wrap;
+  }
+
+  .antd-pro-pages-dashboard-analysis-salesCard {
+    height: calc(100% - 24px);
+    /deep/ .ant-card-head {
+      position: relative;
+    }
+  }
+
+  .dashboard-analysis-iconGroup {
+    i {
+      margin-left: 16px;
+      color: rgba(0,0,0,.45);
+      cursor: pointer;
+      transition: color .32s;
+      color: black;
+    }
+  }
+  .analysis-salesTypeRadio {
+    position: absolute;
+    right: 54px;
+    bottom: 12px;
+  }
+</style>

src/views/dashboard/Monitor.vue

+<template>
+  <div>
+    Monitor
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Monitor'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/TestWork.vue

+<template>
+  <div>
+    <h2>本页面内容均为测试功能，暂不提供稳定性保证</h2>
+    <a-divider />
+    <div class="multi-tab-test">
+      <h4>多标签组件测试功能</h4>
+      <a-button @click="handleCloseCurrentTab" style="margin-right: 16px;">关闭当前页</a-button>
+      <a-button @click="handleOpenTab" style="margin-right: 16px;">打开 任务列表</a-button>
+      <a-popconfirm :visible="visible" @confirm="confirm" @cancel="cancel" okText="确定" cancelText="取消">
+        <template v-slot:title>
+          <div>
+            <a-form :form="form" layout="inline">
+              <a-form-item label="自定义名称">
+                <a-input v-decorator="['tabName', {rules: [{required: true, message: '请输入新的 Tab 名称'}]}]"/>
+              </a-form-item>
+            </a-form>
+          </div>
+        </template>
+        <a-button @click="() => visible = !visible" style="margin-right: 16px;">修改当前 Tab 名称</a-button>
+      </a-popconfirm>
+
+      <a-popconfirm :visible="visible2" @confirm="confirm2" @cancel="() => visible2 = false" okText="确定" cancelText="取消">
+        <template v-slot:title>
+          <div>
+            <p>页面 KEY 是由页面的路由 <code>path</code> 决定的</p>
+            <p>如果要修改某一个页面标题，该页面必须已经被打开在 Tab 栏</p>
+            <p>后期可以考虑优化到编程式 Tab 栏，就可以没有这种限制</p>
+            <a-form :form="form2" layout="inline">
+              <a-form-item label="页面KEY">
+                <a-input v-decorator="['tabKey', { initialValue: '/dashboard/workplace' }]" />
+              </a-form-item>
+              <a-form-item label="自定义名称">
+                <a-input v-decorator="['tabName', {rules: [{required: true, message: '请输入新的 Tab 名称'}]}]"/>
+              </a-form-item>
+            </a-form>
+          </div>
+        </template>
+        <a-button @click="() => visible2 = !visible2">修改某一个 Tab 名称</a-button>
+      </a-popconfirm>
+    </div>
+    <a-divider />
+    <div class="page-loading-test">
+      <h4>全局遮罩测试</h4>
+      <a-button @click="handleOpenLoading" style="margin-right: 16px;">打开遮罩(5s 自动关闭)</a-button>
+      <a-button @click="handleOpenLoadingCustomTip">打开遮罩(自定义提示语)</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestWork',
+  data () {
+    return {
+      visible: false,
+      visible2: false
+    }
+  },
+  created () {
+    this.form = this.$form.createForm(this)
+    this.form2 = this.$form.createForm(this)
+  },
+  methods: {
+    handleCloseCurrentTab () {
+      this.$multiTab.closeCurrentPage() // or this.$multiTab.close()
+    },
+    handleOpenTab () {
+      this.$multiTab.open('/features/task')
+    },
+
+    handleOpenLoading () {
+      this.$nextTick(function () {
+        console.log('this', this)
+        console.log('this.$refs.tInput', this.$refs.tInput)
+      })
+      this.$loading.show()
+      setTimeout(() => {
+        this.$loading.hide()
+      }, 5000)
+    },
+    handleOpenLoadingCustomTip () {
+      this.$loading.show({ tip: '自定义提示语' })
+      setTimeout(() => {
+        this.$loading.hide()
+      }, 5000)
+    },
+
+    // confirm
+    confirm (e) {
+      e.stopPropagation()
+      const { path } = this.$route
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$multiTab.rename(path, values.tabName)
+          this.visible = false
+        }
+      })
+    },
+    cancel () {
+      this.visible = false
+    },
+    confirm2 (e) {
+      e.stopPropagation()
+      this.form2.validateFields((err, values) => {
+        if (!err) {
+          this.$multiTab.rename(values.tabKey, values.tabName)
+          this.visible2 = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/Workplace.vue

+<template>
+  <page-view :avatar="avatar" :title="false">
+    <div slot="headerContent">
+      <div class="title">{{ timeFix }}，{{ user.name }}<span class="welcome-text">，{{ welcome }}</span></div>
+      <div>前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台</div>
+    </div>
+    <div slot="extra">
+      <a-row class="more-info">
+        <a-col :span="8">
+          <head-info title="项目" content="56" :center="false" :bordered="false"/>
+        </a-col>
+        <a-col :span="8">
+          <head-info title="团队排名" content="8/24" :center="false" :bordered="false"/>
+        </a-col>
+        <a-col :span="8">
+          <head-info title="项目数" content="2,223" :center="false" />
+        </a-col>
+      </a-row>
+    </div>
+
+    <div>
+      <a-row :gutter="24">
+        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
+          <a-card
+            class="project-list"
+            :loading="loading"
+            style="margin-bottom: 24px;"
+            :bordered="false"
+            title="进行中的项目"
+            :body-style="{ padding: 0 }">
+            <a slot="extra">全部项目</a>
+            <div>
+              <a-card-grid class="project-card-grid" :key="i" v-for="(item, i) in projects">
+                <a-card :bordered="false" :body-style="{ padding: 0 }">
+                  <a-card-meta>
+                    <div slot="title" class="card-title">
+                      <a-avatar size="small" :src="item.cover"/>
+                      <a>{{ item.title }}</a>
+                    </div>
+                    <div slot="description" class="card-description">
+                      {{ item.description }}
+                    </div>
+                  </a-card-meta>
+                  <div class="project-item">
+                    <a href="/#/">科学搬砖组</a>
+                    <span class="datetime">9小时前</span>
+                  </div>
+                </a-card>
+              </a-card-grid>
+            </div>
+          </a-card>
+
+          <a-card :loading="loading" title="动态" :bordered="false">
+            <a-list>
+              <a-list-item :key="index" v-for="(item, index) in activities">
+                <a-list-item-meta>
+                  <a-avatar slot="avatar" :src="item.user.avatar" />
+                  <div slot="title">
+                    <span>{{ item.user.nickname }}</span>&nbsp;
+                    在&nbsp;<a href="#">{{ item.project.name }}</a>&nbsp;
+                    <span>{{ item.project.action }}</span>&nbsp;
+                    <a href="#">{{ item.project.event }}</a>
+                  </div>
+                  <div slot="description">{{ item.time }}</div>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-card>
+        </a-col>
+        <a-col
+          style="padding: 0 12px"
+          :xl="8"
+          :lg="24"
+          :md="24"
+          :sm="24"
+          :xs="24">
+          <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+            <div class="item-group">
+              <a>操作一</a>
+              <a>操作二</a>
+              <a>操作三</a>
+              <a>操作四</a>
+              <a>操作五</a>
+              <a>操作六</a>
+              <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
+            </div>
+          </a-card>
+          <a-card title="XX 指数" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false" :body-style="{ padding: 0 }">
+            <div style="min-height: 400px;">
+              <!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts"  -->
+              <radar :data="radarData" />
+            </div>
+          </a-card>
+          <a-card :loading="loading" title="团队" :bordered="false">
+            <div class="members">
+              <a-row>
+                <a-col :span="12" v-for="(item, index) in teams" :key="index">
+                  <a>
+                    <a-avatar size="small" :src="item.avatar" />
+                    <span class="member">{{ item.name }}</span>
+                  </a>
+                </a-col>
+              </a-row>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </page-view>
+</template>
+
+<script>
+import { timeFix } from '@/utils/util'
+import { mapState } from 'vuex'
+
+import { PageView } from '@/layouts'
+import HeadInfo from '@/components/tools/HeadInfo'
+import { Radar } from '@/components'
+
+import { getRoleList, getServiceList } from '@/api/manage'
+
+const DataSet = require('@antv/data-set')
+
+export default {
+  name: 'Workplace',
+  components: {
+    PageView,
+    HeadInfo,
+    Radar
+  },
+  data () {
+    return {
+      timeFix: timeFix(),
+      avatar: '',
+      user: {},
+
+      projects: [],
+      loading: true,
+      radarLoading: true,
+      activities: [],
+      teams: [],
+
+      // data
+      axis1Opts: {
+        dataKey: 'item',
+        line: null,
+        tickLine: null,
+        grid: {
+          lineStyle: {
+            lineDash: null
+          },
+          hideFirstLine: false
+        }
+      },
+      axis2Opts: {
+        dataKey: 'score',
+        line: null,
+        tickLine: null,
+        grid: {
+          type: 'polygon',
+          lineStyle: {
+            lineDash: null
+          }
+        }
+      },
+      scale: [{
+        dataKey: 'score',
+        min: 0,
+        max: 80
+      }],
+      axisData: [
+        { item: '引用', a: 70, b: 30, c: 40 },
+        { item: '口碑', a: 60, b: 70, c: 40 },
+        { item: '产量', a: 50, b: 60, c: 40 },
+        { item: '贡献', a: 40, b: 50, c: 40 },
+        { item: '热度', a: 60, b: 70, c: 40 },
+        { item: '引用', a: 70, b: 50, c: 40 }
+      ],
+      radarData: []
+    }
+  },
+  computed: {
+    ...mapState({
+      nickname: (state) => state.user.nickname,
+      welcome: (state) => state.user.welcome
+    }),
+    userInfo () {
+      return this.$store.getters.userInfo
+    }
+  },
+  created () {
+    this.user = this.userInfo
+    this.avatar = this.userInfo.avatar
+
+    getRoleList().then(res => {
+      // console.log('workplace -> call getRoleList()', res)
+    })
+
+    getServiceList().then(res => {
+      // console.log('workplace -> call getServiceList()', res)
+    })
+  },
+  mounted () {
+    this.getProjects()
+    this.getActivity()
+    this.getTeams()
+    this.initRadar()
+  },
+  methods: {
+    getProjects () {
+      this.$http.get('/list/search/projects')
+        .then(res => {
+          this.projects = res.result && res.result.data
+          this.loading = false
+        })
+    },
+    getActivity () {
+      this.$http.get('/workplace/activity')
+        .then(res => {
+          this.activities = res.result
+        })
+    },
+    getTeams () {
+      this.$http.get('/workplace/teams')
+        .then(res => {
+          this.teams = res.result
+        })
+    },
+    initRadar () {
+      this.radarLoading = true
+
+      this.$http.get('/workplace/radar')
+        .then(res => {
+          const dv = new DataSet.View().source(res.result)
+          dv.transform({
+            type: 'fold',
+            fields: ['个人', '团队', '部门'],
+            key: 'user',
+            value: 'score'
+          })
+
+          this.radarData = dv.rows
+          this.radarLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .project-list {
+
+    .card-title {
+      font-size: 0;
+
+      a {
+        color: rgba(0, 0, 0, 0.85);
+        margin-left: 12px;
+        line-height: 24px;
+        height: 24px;
+        display: inline-block;
+        vertical-align: top;
+        font-size: 14px;
+
+        &:hover {
+          color: #1890ff;
+        }
+      }
+    }
+    .card-description {
+      color: rgba(0, 0, 0, 0.45);
+      height: 44px;
+      line-height: 22px;
+      overflow: hidden;
+    }
+    .project-item {
+      display: flex;
+      margin-top: 8px;
+      overflow: hidden;
+      font-size: 12px;
+      height: 20px;
+      line-height: 20px;
+      a {
+        color: rgba(0, 0, 0, 0.45);
+        display: inline-block;
+        flex: 1 1 0;
+
+        &:hover {
+          color: #1890ff;
+        }
+      }
+      .datetime {
+        color: rgba(0, 0, 0, 0.25);
+        flex: 0 0 auto;
+        float: right;
+      }
+    }
+    .ant-card-meta-description {
+      color: rgba(0, 0, 0, 0.45);
+      height: 44px;
+      line-height: 22px;
+      overflow: hidden;
+    }
+  }
+
+  .item-group {
+    padding: 20px 0 8px 24px;
+    font-size: 0;
+    a {
+      color: rgba(0, 0, 0, 0.65);
+      display: inline-block;
+      font-size: 14px;
+      margin-bottom: 13px;
+      width: 25%;
+    }
+  }
+
+  .members {
+    a {
+      display: block;
+      margin: 12px 0;
+      line-height: 24px;
+      height: 24px;
+      .member {
+        font-size: 14px;
+        color: rgba(0, 0, 0, .65);
+        line-height: 24px;
+        max-width: 100px;
+        vertical-align: top;
+        margin-left: 12px;
+        transition: all 0.3s;
+        display: inline-block;
+      }
+      &:hover {
+        span {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+
+  .mobile {
+
+    .project-list {
+
+      .project-card-grid {
+        width: 100%;
+      }
+    }
+
+    .more-info {
+      border: 0;
+      padding-top: 16px;
+      margin: 16px 0 16px;
+    }
+
+    .headerContent .title .welcome-text {
+      display: none;
+    }
+  }
+
+</style>

src/views/exception/403.vue

+<template>
+  <exception-page type="403" />
+</template>
+
+<script>
+import { ExceptionPage } from '@/components'
+
+export default {
+  components: {
+    ExceptionPage
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/exception/404.vue

+<template>
+  <exception-page type="404" />
+</template>
+
+<script>
+import { ExceptionPage } from '@/components'
+
+export default {
+  components: {
+    ExceptionPage
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/exception/500.vue

+<template>
+  <exception-page type="500" />
+</template>
+
+<script>
+import { ExceptionPage } from '@/components'
+
+export default {
+  components: {
+    ExceptionPage
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/form/BasicForm.vue

+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="标题"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-decorator="[
+            'name',
+            {rules: [{ required: true, message: '请输入标题' }]}
+          ]"
+          name="name"
+          placeholder="给目标起个名字" />
+      </a-form-item>
+      <a-form-item
+        label="起止日期"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-range-picker
+          name="buildTime"
+          style="width: 100%"
+          v-decorator="[
+            'buildTime',
+            {rules: [{ required: true, message: '请选择起止日期' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="目标描述"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-textarea
+          rows="4"
+          placeholder="请输入你阶段性工作目标"
+          v-decorator="[
+            'description',
+            {rules: [{ required: true, message: '请输入目标描述' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="衡量标准"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-textarea
+          rows="4"
+          placeholder="请输入衡量标准"
+          v-decorator="[
+            'type',
+            {rules: [{ required: true, message: '请输入衡量标准' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="客户"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
+          v-decorator="[
+            'customer',
+            {rules: [{ required: true, message: '请描述你服务的客户' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="邀评人"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        :required="false"
+      >
+        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
+      </a-form-item>
+      <a-form-item
+        label="权重"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        :required="false"
+      >
+        <a-input-number :min="0" :max="100" />
+        <span> %</span>
+      </a-form-item>
+      <a-form-item
+        label="目标公开"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        :required="false"
+        help="客户、邀评人默认被分享"
+      >
+        <a-radio-group v-model="value">
+          <a-radio :value="1">公开</a-radio>
+          <a-radio :value="2">部分公开</a-radio>
+          <a-radio :value="3">不公开</a-radio>
+        </a-radio-group>
+        <a-form-item>
+          <a-select mode="multiple" v-if="value === 2">
+            <a-select-option value="4">同事一</a-select-option>
+            <a-select-option value="5">同事二</a-select-option>
+            <a-select-option value="6">同事三</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form-item>
+      <a-form-item
+        :wrapperCol="{ span: 24 }"
+        style="text-align: center"
+      >
+        <a-button htmlType="submit" type="primary">提交</a-button>
+        <a-button style="margin-left: 8px">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'BaseForm',
+  data () {
+    return {
+      description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+      value: 1,
+
+      // form
+      form: this.$form.createForm(this)
+
+    }
+  },
+  methods: {
+
+    // handler
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          // eslint-disable-next-line no-console
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>

src/views/form/advancedForm/AdvancedForm.vue

+<template>
+  <div>
+    <a-card class="card" title="仓库管理" :bordered="false">
+      <repository-form ref="repository" :showSubmit="false" />
+    </a-card>
+    <a-card class="card" title="任务管理" :bordered="false">
+      <task-form ref="task" :showSubmit="false" />
+    </a-card>
+
+    <!-- table -->
+    <a-card>
+      <a-table
+        :columns="columns"
+        :dataSource="data"
+        :pagination="false"
+        :loading="memberLoading"
+      >
+        <template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
+          <a-input
+            :key="col"
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            :placeholder="columns[i].title"
+            @change="e => handleChange(e.target.value, record.key, col)"
+          />
+          <template v-else>{{ text }}</template>
+        </template>
+        <template slot="operation" slot-scope="text, record">
+          <template v-if="record.editable">
+            <span v-if="record.isNew">
+              <a @click="saveRow(record)">添加</a>
+              <a-divider type="vertical" />
+              <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+                <a>删除</a>
+              </a-popconfirm>
+            </span>
+            <span v-else>
+              <a @click="saveRow(record)">保存</a>
+              <a-divider type="vertical" />
+              <a @click="cancel(record.key)">取消</a>
+            </span>
+          </template>
+          <span v-else>
+            <a @click="toggle(record.key)">编辑</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+        </template>
+      </a-table>
+      <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
+    </a-card>
+
+    <!-- fixed footer toolbar -->
+    <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
+      <span class="popover-wrapper">
+        <a-popover title="表单校验信息" overlayClassName="antd-pro-pages-forms-style-errorPopover" trigger="click" :getPopupContainer="trigger => trigger.parentNode">
+          <template slot="content">
+            <li v-for="item in errors" :key="item.key" @click="scrollToField(item.key)" class="antd-pro-pages-forms-style-errorListItem">
+              <a-icon type="cross-circle-o" class="antd-pro-pages-forms-style-errorIcon" />
+              <div class="">{{ item.message }}</div>
+              <div class="antd-pro-pages-forms-style-errorField">{{ item.fieldLabel }}</div>
+            </li>
+          </template>
+          <span class="antd-pro-pages-forms-style-errorIcon" v-if="errors.length > 0">
+            <a-icon type="exclamation-circle" />{{ errors.length }}
+          </span>
+        </a-popover>
+      </span>
+      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+    </footer-tool-bar>
+  </div>
+</template>
+
+<script>
+import RepositoryForm from './RepositoryForm'
+import TaskForm from './TaskForm'
+import FooterToolBar from '@/components/FooterToolbar'
+import { mixin, mixinDevice } from '@/utils/mixin'
+
+const fieldLabels = {
+  name: '仓库名',
+  url: '仓库域名',
+  owner: '仓库管理员',
+  approver: '审批人',
+  dateRange: '生效日期',
+  type: '仓库类型',
+  name2: '任务名',
+  url2: '任务描述',
+  owner2: '执行人',
+  approver2: '责任人',
+  dateRange2: '生效日期',
+  type2: '任务类型'
+}
+
+export default {
+  name: 'AdvancedForm',
+  mixins: [mixin, mixinDevice],
+  components: {
+    FooterToolBar,
+    RepositoryForm,
+    TaskForm
+  },
+  data () {
+    return {
+      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
+      loading: false,
+      memberLoading: false,
+
+      // table
+      columns: [
+        {
+          title: '成员姓名',
+          dataIndex: 'name',
+          key: 'name',
+          width: '20%',
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: '工号',
+          dataIndex: 'workId',
+          key: 'workId',
+          width: '20%',
+          scopedSlots: { customRender: 'workId' }
+        },
+        {
+          title: '所属部门',
+          dataIndex: 'department',
+          key: 'department',
+          width: '40%',
+          scopedSlots: { customRender: 'department' }
+        },
+        {
+          title: '操作',
+          key: 'action',
+          scopedSlots: { customRender: 'operation' }
+        }
+      ],
+      data: [
+        {
+          key: '1',
+          name: '小明',
+          workId: '001',
+          editable: false,
+          department: '行政部'
+        },
+        {
+          key: '2',
+          name: '李莉',
+          workId: '002',
+          editable: false,
+          department: 'IT部'
+        },
+        {
+          key: '3',
+          name: '王小帅',
+          workId: '003',
+          editable: false,
+          department: '财务部'
+        }
+      ],
+
+      errors: []
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+    },
+    newMember () {
+      const length = this.data.length
+      this.data.push({
+        key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
+        name: '',
+        workId: '',
+        department: '',
+        editable: true,
+        isNew: true
+      })
+    },
+    remove (key) {
+      const newData = this.data.filter(item => item.key !== key)
+      this.data = newData
+    },
+    saveRow (record) {
+      this.memberLoading = true
+      const { key, name, workId, department } = record
+      if (!name || !workId || !department) {
+        this.memberLoading = false
+        this.$message.error('请填写完整成员信息。')
+        return
+      }
+      // 模拟网络请求、卡顿 800ms
+      new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ loop: false })
+        }, 800)
+      }).then(() => {
+        const target = this.data.find(item => item.key === key)
+        target.editable = false
+        target.isNew = false
+        this.memberLoading = false
+      })
+    },
+    toggle (key) {
+      const target = this.data.find(item => item.key === key)
+      target._originalData = { ...target }
+      target.editable = !target.editable
+    },
+    getRowByKey (key, newData) {
+      const data = this.data
+      return (newData || data).find(item => item.key === key)
+    },
+    cancel (key) {
+      const target = this.data.find(item => item.key === key)
+      Object.keys(target).forEach(key => { target[key] = target._originalData[key] })
+      target._originalData = undefined
+    },
+    handleChange (value, key, column) {
+      const newData = [...this.data]
+      const target = newData.find(item => key === item.key)
+      if (target) {
+        target[column] = value
+        this.data = newData
+      }
+    },
+
+    // 最终全页面提交
+    validate () {
+      const { $refs: { repository, task }, $notification } = this
+      const repositoryForm = new Promise((resolve, reject) => {
+        repository.form.validateFields((err, values) => {
+          if (err) {
+            reject(err)
+            return
+          }
+          resolve(values)
+        })
+      })
+      const taskForm = new Promise((resolve, reject) => {
+        task.form.validateFields((err, values) => {
+          if (err) {
+            reject(err)
+            return
+          }
+          resolve(values)
+        })
+      })
+
+      // clean this.errors
+      this.errors = []
+      Promise.all([repositoryForm, taskForm]).then(values => {
+        $notification['error']({
+          message: 'Received values of form:',
+          description: JSON.stringify(values)
+        })
+      }).catch(() => {
+        const errors = Object.assign({}, repository.form.getFieldsError(), task.form.getFieldsError())
+        const tmp = { ...errors }
+        this.errorList(tmp)
+      })
+    },
+    errorList (errors) {
+      if (!errors || errors.length === 0) {
+        return
+      }
+      this.errors = Object.keys(errors)
+        .filter(key => errors[key])
+        .map(key => ({
+          key: key,
+          message: errors[key][0],
+          fieldLabel: fieldLabels[key]
+        }))
+    },
+    scrollToField (fieldKey) {
+      const labelNode = document.querySelector(`label[for="${fieldKey}"]`)
+      if (labelNode) {
+        labelNode.scrollIntoView(true)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .card{
+    margin-bottom: 24px;
+  }
+  .popover-wrapper {
+    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
+      min-width: 256px;
+      max-height: 290px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+  .antd-pro-pages-forms-style-errorIcon {
+    user-select: none;
+    margin-right: 24px;
+    color: #f5222d;
+    cursor: pointer;
+    i {
+          margin-right: 4px;
+    }
+  }
+  .antd-pro-pages-forms-style-errorListItem {
+    padding: 8px 16px;
+    list-style: none;
+    border-bottom: 1px solid #e8e8e8;
+    cursor: pointer;
+    transition: all .3s;
+
+    &:hover {
+      background: #e6f7ff;
+    }
+    .antd-pro-pages-forms-style-errorIcon {
+      float: left;
+      margin-top: 4px;
+      margin-right: 12px;
+      padding-bottom: 22px;
+      color: #f5222d;
+    }
+    .antd-pro-pages-forms-style-errorField {
+      margin-top: 2px;
+      color: rgba(0,0,0,.45);
+      font-size: 12px;
+    }
+  }
+</style>

src/views/form/advancedForm/RepositoryForm.vue

+<template>
+  <a-form @submit="handleSubmit" :form="form" class="form">
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item label="仓库名">
+          <a-input
+            placeholder="请输入仓库名称"
+            v-decorator="[
+              'name',
+              {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="仓库域名">
+          <a-input
+            addonBefore="http://"
+            addonAfter=".com"
+            placeholder="请输入"
+            v-decorator="[
+              'url',
+              {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库管理员">
+          <a-select placeholder="请选择管理员" v-decorator="[ 'owner', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+            <a-select-option value="王同学">王同学</a-select-option>
+            <a-select-option value="李同学">李同学</a-select-option>
+            <a-select-option value="黄同学">黄同学</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="审批人">
+          <a-select placeholder="请选择审批员" v-decorator="[ 'approver', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+            <a-select-option value="王晓丽">王晓丽</a-select-option>
+            <a-select-option value="李军">李军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="生效日期">
+          <a-range-picker
+            style="width: 100%"
+            v-decorator="[
+              'dateRange',
+              {rules: [{ required: true, message: '请选择生效日期'}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库类型">
+          <a-select
+            placeholder="请选择仓库类型"
+            v-decorator="[
+              'type',
+              {rules: [{ required: true, message: '请选择仓库类型'}]}
+            ]" >
+            <a-select-option value="公开">公开</a-select-option>
+            <a-select-option value="私密">私密</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+export default {
+  name: 'RepositoryForm',
+  props: {
+    showSubmit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$notification['error']({
+            message: 'Received values of form:',
+            description: values
+          })
+        }
+      })
+    },
+    validate (rule, value, callback) {
+      const regex = /^user-(.*)$/
+      if (!regex.test(value)) {
+        callback(new Error('需要以 user- 开头'))
+      }
+      callback()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/form/advancedForm/TaskForm.vue

+<template>
+  <a-form @submit="handleSubmit" :form="form" class="form">
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="任务名">
+          <a-input placeholder="请输入任务名称" v-decorator="[ 'name2', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="任务描述">
+          <a-input placeholder="请输入任务描述" v-decorator="[ 'url2', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="执行人">
+          <a-select
+            placeholder="请选择执行人"
+            v-decorator="[
+              'owner2',
+              {rules: [{ required: true, message: '请选择执行人'}]}
+            ]" >
+            <a-select-option value="黄丽丽">黄丽丽</a-select-option>
+            <a-select-option value="李大刀">李大刀</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="责任人">
+          <a-select
+            placeholder="请选择责任人"
+            v-decorator="[
+              'approver2',
+              {rules: [{ required: true, message: '请选择责任人'}]}
+            ]" >
+            <a-select-option value="王伟">王伟</a-select-option>
+            <a-select-option value="李红军">李红军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="提醒时间">
+          <a-time-picker
+            style="width: 100%"
+            v-decorator="[
+              'dateRange2',
+              {rules: [{ required: true, message: '请选择提醒时间'}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="任务类型">
+          <a-select
+            placeholder="请选择任务类型"
+            v-decorator="[ 'type2', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
+            <a-select-option value="定时执行">定时执行</a-select-option>
+            <a-select-option value="周期执行">周期执行</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+export default {
+  name: 'TaskForm',
+  props: {
+    showSubmit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$notification['error']({
+            message: 'Received values of form:',
+            description: values
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/form/stepForm/Step1.vue

+<template>
+  <div>
+    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
+      <a-form-item
+        label="付款账户"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-select
+          placeholder="ant-design@alipay.com"
+          v-decorator="['paymentUser', { rules: [{required: true, message: '付款账户必须填写'}] }]">
+          <a-select-option value="1">ant-design@alipay.com</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        label="收款账户"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-input-group
+          style="display: inline-block; vertical-align: middle"
+          :compact="true"
+        >
+          <a-select defaultValue="alipay" style="width: 100px">
+            <a-select-option value="alipay">支付宝</a-select-option>
+            <a-select-option value="wexinpay">微信</a-select-option>
+          </a-select>
+          <a-input
+            :style="{width: 'calc(100% - 100px)'}"
+            v-decorator="['payType', { initialValue: 'test@example.com', rules: [{required: true, message: '收款账户必须填写'}]}]"
+          />
+        </a-input-group>
+      </a-form-item>
+      <a-form-item
+        label="收款人姓名"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-input v-decorator="['name', { initialValue: 'Alex', rules: [{required: true, message: '收款人名称必须核对'}] }]"/>
+      </a-form-item>
+      <a-form-item
+        label="转账金额"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-input prefix="￥" v-decorator="['momey', { initialValue: '5000', rules: [{required: true, message: '转账金额必须填写'}] }]"/>
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+        <a-button type="primary" @click="nextStep">下一步</a-button>
+      </a-form-item>
+    </a-form>
+    <a-divider />
+    <div class="step-form-style-desc">
+      <h3>说明</h3>
+      <h4>转账到支付宝账户</h4>
+      <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
+      <h4>转账到银行卡</h4>
+      <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Step1',
+  data () {
+    return {
+      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
+      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    nextStep () {
+      const { form: { validateFields } } = this
+      // 先校验，通过表单校验后，才进入下一步
+      validateFields((err, values) => {
+        if (!err) {
+          this.$emit('nextStep')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.step-form-style-desc {
+  padding: 0 56px;
+  color: rgba(0,0,0,.45);
+
+  h3 {
+    margin: 0 0 12px;
+    color: rgba(0,0,0,.45);
+    font-size: 16px;
+    line-height: 32px;
+  }
+
+  h4 {
+    margin: 0 0 4px;
+    color: rgba(0,0,0,.45);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+</style>

src/views/form/stepForm/Step2.vue

+<template>
+  <div>
+    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
+      <a-alert
+        :closable="true"
+        message="确认转账后，资金将直接打入对方账户，无法退回。"
+        style="margin-bottom: 24px;"
+      />
+      <a-form-item
+        label="付款账户"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        ant-design@alipay.com
+      </a-form-item>
+      <a-form-item
+        label="收款账户"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        test@example.com
+      </a-form-item>
+      <a-form-item
+        label="收款人姓名"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        Alex
+      </a-form-item>
+      <a-form-item
+        label="转账金额"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        ￥ 5,000.00
+      </a-form-item>
+      <a-divider />
+      <a-form-item
+        label="支付密码"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        class="stepFormText"
+      >
+        <a-input
+          type="password"
+          style="width: 80%;"
+          v-decorator="['paymentPassword', { initialValue: '123456', rules: [{required: true, message: '请输入支付密码'}] }]" />
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
+        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Step2',
+  data () {
+    return {
+      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
+      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
+      form: this.$form.createForm(this),
+      loading: false,
+      timer: 0
+    }
+  },
+  methods: {
+    nextStep () {
+      const that = this
+      const { form: { validateFields } } = this
+      that.loading = true
+      validateFields((err, values) => {
+        if (!err) {
+          console.log('表单 values', values)
+          that.timer = setTimeout(function () {
+            that.loading = false
+            that.$emit('nextStep')
+          }, 1500)
+        } else {
+          that.loading = false
+        }
+      })
+    },
+    prevStep () {
+      this.$emit('prevStep')
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .stepFormText {
+    margin-bottom: 24px;
+
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+
+</style>

src/views/form/stepForm/Step3.vue

+<template>
+  <div>
+    <a-form style="margin: 40px auto 0;">
+      <result title="操作成功" :is-success="true" description="预计两小时内到账" style="max-width: 560px;">
+        <div class="information">
+          <a-row>
+            <a-col :sm="8" :xs="24">付款账户：</a-col>
+            <a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
+          </a-row>
+          <a-row>
+            <a-col :sm="8" :xs="24">收款账户：</a-col>
+            <a-col :sm="16" :xs="24">test@example.com</a-col>
+          </a-row>
+          <a-row>
+            <a-col :sm="8" :xs="24">收款人姓名：</a-col>
+            <a-col :sm="16" :xs="24">辉夜</a-col>
+          </a-row>
+          <a-row>
+            <a-col :sm="8" :xs="24">转账金额：</a-col>
+            <a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
+          </a-row>
+        </div>
+        <div slot="action">
+          <a-button type="primary" @click="finish">再转一笔</a-button>
+          <a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
+        </div>
+      </result>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import { Result } from '@/components'
+
+export default {
+  name: 'Step3',
+  components: {
+    Result
+  },
+  data () {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    finish () {
+      this.$emit('finish')
+    },
+    toOrderList () {
+      this.$router.push('/list/table-list')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .information {
+    line-height: 22px;
+
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .money {
+    font-family: "Helvetica Neue",sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 14px;
+  }
+</style>

src/views/form/stepForm/StepForm.vue

+<template>
+  <a-card :bordered="false">
+    <a-steps class="steps" :current="currentTab">
+      <a-step title="填写转账信息" />
+      <a-step title="确认转账信息" />
+      <a-step title="完成" />
+    </a-steps>
+    <div class="content">
+      <step1 v-if="currentTab === 0" @nextStep="nextStep"/>
+      <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
+      <step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import Step1 from './Step1'
+import Step2 from './Step2'
+import Step3 from './Step3'
+
+export default {
+  name: 'StepForm',
+  components: {
+    Step1,
+    Step2,
+    Step3
+  },
+  data () {
+    return {
+      description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
+      currentTab: 0,
+
+      // form
+      form: null
+    }
+  },
+  methods: {
+
+    // handler
+    nextStep () {
+      if (this.currentTab < 2) {
+        this.currentTab += 1
+      }
+    },
+    prevStep () {
+      if (this.currentTab > 0) {
+        this.currentTab -= 1
+      }
+    },
+    finish () {
+      this.currentTab = 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .steps {
+    max-width: 750px;
+    margin: 16px auto;
+  }
+</style>

src/views/list/CardList.vue

+<template>
+  <div class="card-list" ref="content">
+    <a-list
+      rowKey="id"
+      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
+      :dataSource="dataSource"
+    >
+      <a-list-item slot="renderItem" slot-scope="item">
+        <template v-if="!item || item.id === undefined">
+          <a-button class="new-btn" type="dashed">
+            <a-icon type="plus"/>
+            新增产品
+          </a-button>
+        </template>
+        <template v-else>
+          <a-card :hoverable="true">
+            <a-card-meta>
+              <a slot="title">{{ item.title }}</a>
+              <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
+              <div class="meta-content" slot="description">{{ item.content }}</div>
+            </a-card-meta>
+            <template class="ant-card-actions" slot="actions">
+              <a>操作一</a>
+              <a>操作二</a>
+            </template>
+          </a-card>
+        </template>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+
+const dataSource = []
+dataSource.push({})
+for (let i = 0; i < 11; i++) {
+  dataSource.push({
+    id: i,
+    title: 'Alipay',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+    content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
+  })
+}
+
+export default {
+  name: 'CardList',
+  data () {
+    return {
+      description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
+      linkList: [
+        { icon: 'rocket', href: '#', title: '快速开始' },
+        { icon: 'info-circle-o', href: '#', title: '产品简介' },
+        { icon: 'file-text', href: '#', title: '产品文档' }
+      ],
+      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
+      dataSource
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "~@/components/index.less";
+
+  .card-list {
+    /deep/ .ant-card-body:hover {
+      .ant-card-meta-title>a {
+        color: @primary-color;
+      }
+    }
+
+    /deep/ .ant-card-meta-title {
+      margin-bottom: 12px;
+
+      &>a {
+        display: inline-block;
+        max-width: 100%;
+        color: rgba(0,0,0,.85);
+      }
+    }
+
+    /deep/ .meta-content {
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      height: 64px;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+
+      margin-bottom: 1em;
+    }
+  }
+
+  .card-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 48px;
+  }
+
+  .ant-card-actions {
+    background: #f7f9fa;
+
+    li {
+      float: left;
+      text-align: center;
+      margin: 12px 0;
+      color: rgba(0, 0, 0, 0.45);
+      width: 50%;
+
+      &:not(:last-child) {
+        border-right: 1px solid #e8e8e8;
+      }
+
+      a {
+        color: rgba(0, 0, 0, .45);
+        line-height: 22px;
+        display: inline-block;
+        width: 100%;
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+
+  .new-btn {
+    background-color: #fff;
+    border-radius: 2px;
+    width: 100%;
+    height: 188px;
+  }
+
+</style>

src/views/list/QueryList.vue

+<template>
+  <a-card :bordered="false">
+    <component @onEdit="handleEdit" @onGoBack="handleGoBack" :record="record" :is="currentComponet"></component>
+  </a-card>
+</template>
+
+<script>
+
+import ATextarea from 'ant-design-vue/es/input/TextArea'
+import AInput from 'ant-design-vue/es/input/Input'
+// 动态切换组件
+import List from '@/views/list/table/List'
+import Edit from '@/views/list/table/Edit'
+
+export default {
+  name: 'TableListWrapper',
+  components: {
+    AInput,
+    ATextarea,
+    List,
+    Edit
+  },
+  data () {
+    return {
+      currentComponet: 'List',
+      record: ''
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    handleEdit (record) {
+      this.record = record || ''
+      this.currentComponet = 'Edit'
+      console.log(record)
+    },
+    handleGoBack () {
+      this.record = ''
+      this.currentComponet = 'List'
+    }
+  },
+  watch: {
+    '$route.path' () {
+      this.record = ''
+      this.currentComponet = 'List'
+    }
+  }
+}
+</script>

src/views/list/StandardList.vue

+<template>
+  <div>
+    <a-card :bordered="false">
+      <a-row>
+        <a-col :sm="8" :xs="24">
+          <head-info title="我的待办" content="8个任务" :bordered="true"/>
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <head-info title="本周完成任务数" content="24个"/>
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <a-card
+      style="margin-top: 24px"
+      :bordered="false"
+      title="标准列表">
+
+      <div slot="extra">
+        <a-radio-group v-model="status">
+          <a-radio-button value="all">全部</a-radio-button>
+          <a-radio-button value="processing">进行中</a-radio-button>
+          <a-radio-button value="waiting">等待中</a-radio-button>
+        </a-radio-group>
+        <a-input-search style="margin-left: 16px; width: 272px;" />
+      </div>
+
+      <div class="operate">
+        <a-button type="dashed" style="width: 100%" icon="plus" @click="$refs.taskForm.add()">添加</a-button>
+      </div>
+
+      <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
+        <a-list-item :key="index" v-for="(item, index) in data">
+          <a-list-item-meta :description="item.description">
+            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
+            <a slot="title">{{ item.title }}</a>
+          </a-list-item-meta>
+          <div slot="actions">
+            <a>编辑</a>
+          </div>
+          <div slot="actions">
+            <a-dropdown>
+              <a-menu slot="overlay">
+                <a-menu-item><a>编辑</a></a-menu-item>
+                <a-menu-item><a>删除</a></a-menu-item>
+              </a-menu>
+              <a>更多<a-icon type="down"/></a>
+            </a-dropdown>
+          </div>
+          <div class="list-content">
+            <div class="list-content-item">
+              <span>Owner</span>
+              <p>{{ item.owner }}</p>
+            </div>
+            <div class="list-content-item">
+              <span>开始时间</span>
+              <p>{{ item.startAt }}</p>
+            </div>
+            <div class="list-content-item">
+              <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
+            </div>
+          </div>
+        </a-list-item>
+      </a-list>
+
+      <task-form ref="taskForm" />
+    </a-card>
+  </div>
+</template>
+
+<script>
+import HeadInfo from '@/components/tools/HeadInfo'
+import TaskForm from './modules/TaskForm'
+
+const data = []
+data.push({
+  title: 'Alipay',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+  description: '那是一种内在的东西， 他们到达不了，也无法触及的',
+  owner: '付晓晓',
+  startAt: '2018-07-26 22:44',
+  progress: {
+    value: 90
+  }
+})
+data.push({
+  title: 'Angular',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+  description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  owner: '曲丽丽',
+  startAt: '2018-07-26 22:44',
+  progress: {
+    value: 54
+  }
+})
+data.push({
+  title: 'Ant Design',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+  description: '生命就像一盒巧克力，结果往往出人意料',
+  owner: '林东东',
+  startAt: '2018-07-26 22:44',
+  progress: {
+    value: 66
+  }
+})
+data.push({
+  title: 'Ant Design Pro',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+  description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  owner: '周星星',
+  startAt: '2018-07-26 22:44',
+  progress: {
+    value: 30
+  }
+})
+data.push({
+  title: 'Bootstrap',
+  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
+  description: '那时候我只会想自己想要什么，从不想自己拥有什么',
+  owner: '吴加好',
+  startAt: '2018-07-26 22:44',
+  progress: {
+    status: 'exception',
+    value: 100
+  }
+})
+
+export default {
+  name: 'StandardList',
+  components: {
+    HeadInfo,
+    TaskForm
+  },
+  data () {
+    return {
+      data,
+      status: 'all'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+    .ant-avatar-lg {
+        width: 48px;
+        height: 48px;
+        line-height: 48px;
+    }
+
+    .list-content-item {
+        color: rgba(0, 0, 0, .45);
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 14px;
+        margin-left: 40px;
+        span {
+            line-height: 20px;
+        }
+        p {
+            margin-top: 4px;
+            margin-bottom: 0;
+            line-height: 22px;
+        }
+    }
+</style>

src/views/list/TableList.vue

+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="规则编号">
+              <a-input v-model="queryParam.id" placeholder=""/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="使用状态">
+              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="!advanced && 8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
+      <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <!-- lock | unlock -->
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="key"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+      showPagination="auto"
+    >
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
+      <span slot="status" slot-scope="text">
+        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
+      </span>
+      <span slot="description" slot-scope="text">
+        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">配置</a>
+          <a-divider type="vertical" />
+          <a @click="handleSub(record)">订阅报警</a>
+        </template>
+      </span>
+    </s-table>
+    <create-form ref="createModal" @ok="handleOk" />
+    <step-by-step-modal ref="modal" @ok="handleOk"/>
+  </a-card>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable, Ellipsis } from '@/components'
+import StepByStepModal from './modules/StepByStepModal'
+import CreateForm from './modules/CreateForm'
+import { getRoleList, getServiceList } from '@/api/manage'
+
+const statusMap = {
+  0: {
+    status: 'default',
+    text: '关闭'
+  },
+  1: {
+    status: 'processing',
+    text: '运行中'
+  },
+  2: {
+    status: 'success',
+    text: '已上线'
+  },
+  3: {
+    status: 'error',
+    text: '异常'
+  }
+}
+
+export default {
+  name: 'TableList',
+  components: {
+    STable,
+    Ellipsis,
+    CreateForm,
+    StepByStepModal
+  },
+  data () {
+    return {
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '#',
+          scopedSlots: { customRender: 'serial' }
+        },
+        {
+          title: '规则编号',
+          dataIndex: 'no'
+        },
+        {
+          title: '描述',
+          dataIndex: 'description',
+          scopedSlots: { customRender: 'description' }
+        },
+        {
+          title: '服务调用次数',
+          dataIndex: 'callNo',
+          sorter: true,
+          needTotal: true,
+          customRender: (text) => text + ' 次'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updatedAt',
+          sorter: true
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '150px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        console.log('loadData.parameter', parameter)
+        return getServiceList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res.result
+          })
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: false
+    }
+  },
+  filters: {
+    statusFilter (type) {
+      return statusMap[type].text
+    },
+    statusTypeFilter (type) {
+      return statusMap[type].status
+    }
+  },
+  created () {
+    this.tableOption()
+    getRoleList({ t: new Date() })
+  },
+  methods: {
+    tableOption () {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+            getCheckboxProps: record => ({
+              props: {
+                disabled: record.no === 'No 2', // Column configuration not to be checked
+                name: record.no
+              }
+            })
+          }
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null
+        }
+        this.optionAlertShow = false
+      }
+    },
+
+    handleEdit (record) {
+      console.log(record)
+      this.$refs.modal.edit(record)
+    },
+    handleSub (record) {
+      if (record.status !== 0) {
+        this.$message.info(`${record.no} 订阅成功`)
+      } else {
+        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
+      }
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    resetSearchForm () {
+      this.queryParam = {
+        date: moment(new Date())
+      }
+    }
+  }
+}
+</script>

src/views/list/modules/CreateForm.vue

+<template>
+  <a-modal
+    title="新建规则"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item
+          label="描述"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-input v-decorator="['desc', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      visible: false,
+      confirmLoading: false,
+
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    add () {
+      this.visible = true
+    },
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      this.confirmLoading = true
+      validateFields((errors, values) => {
+        if (!errors) {
+          console.log('values', values)
+          setTimeout(() => {
+            this.visible = false
+            this.confirmLoading = false
+            this.$emit('ok', values)
+          }, 1500)
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleCancel () {
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/list/modules/StepByStepModal.vue

+<template>
+  <a-modal
+    title="分步对话框"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
+        <a-step title="基本信息" />
+        <a-step title="配置规则属性" />
+        <a-step title="设定调度周期" />
+      </a-steps>
+      <a-form :form="form">
+        <!-- step1 -->
+        <div v-show="currentStep === 0">
+          <a-form-item
+            label="规则名称"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-input v-decorator="['name', {rules: [{required: true}]}]" />
+          </a-form-item>
+          <a-form-item
+            label="规则描述"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-textarea :rows="4" v-decorator="['desc', {rules: [{required: true}]}]"></a-textarea>
+          </a-form-item>
+        </div>
+        <div v-show="currentStep === 1">
+          <a-form-item
+            label="监控对象"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-select v-decorator="['target', {initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
+              <a-select-option :value="0">表一</a-select-option>
+              <a-select-option :value="1">表二</a-select-option>
+            </a-select>
+          </a-form-item>
+
+          <a-form-item
+            label="规则模板"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-select v-decorator="['template', { initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
+              <a-select-option :value="0">规则模板一</a-select-option>
+              <a-select-option :value="1">规则模板二</a-select-option>
+            </a-select>
+          </a-form-item>
+
+          <a-form-item
+            label="规则类型"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-radio-group v-decorator="['type', {initialValue: 0, rules: [{required: true}]}]" style="width: 100%">
+              <a-radio :value="0">强</a-radio>
+              <a-radio :value="1">弱</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </div>
+
+        <div v-show="currentStep === 2">
+          <a-form-item
+            label="开始时间"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-date-picker v-decorator="['time', {rules: [{ type: 'object', required: true, message: 'Please select time!' }]}]" style="width: 100%" />
+          </a-form-item>
+          <a-form-item
+            label="调度周期"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-select v-decorator="['frequency', { initialValue: 'month', rules: [{required: true}]}]" style="width: 100%">
+              <a-select-option value="month">月</a-select-option>
+              <a-select-option value="week">周</a-select-option>
+            </a-select>
+          </a-form-item>
+        </div>
+        <!-- step1 end -->
+      </a-form>
+    </a-spin>
+    <template slot="footer">
+      <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }" >上一步</a-button>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">{{ currentStep === 2 && '完成' || '下一步' }}</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+const stepForms = [
+  ['name', 'desc'],
+  ['target', 'template', 'type'],
+  ['time', 'frequency']
+]
+
+export default {
+  name: 'StepByStepModal',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      visible: false,
+      confirmLoading: false,
+      currentStep: 0,
+      mdl: {},
+
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    edit (record) {
+      this.visible = true
+      const { form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(pick(record, []))
+      })
+    },
+    handleNext (step) {
+      const { form: { validateFields } } = this
+      const currentStep = step + 1
+      if (currentStep <= 2) {
+        // stepForms
+        validateFields(stepForms[ this.currentStep ], (errors, values) => {
+          if (!errors) {
+            this.currentStep = currentStep
+          }
+        })
+        return
+      }
+      // last step
+      this.confirmLoading = true
+      validateFields((errors, values) => {
+        console.log('errors:', errors, 'val:', values)
+        if (!errors) {
+          console.log('values:', values)
+          setTimeout(() => {
+            this.confirmLoading = false
+            this.$emit('ok', values)
+          }, 1500)
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    backward () {
+      this.currentStep--
+    },
+    handleCancel () {
+      // clear form & currentStep
+      this.visible = false
+      this.currentStep = 0
+    }
+  }
+}
+</script>

src/views/list/modules/TaskForm.vue

+<template>
+  <a-modal :width="640" :visible="visible" title="任务添加" @ok="handleSubmit" @cancel="visible = false">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="任务名称"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-input v-decorator="['taskName', {rules:[{required: true, message: '请输入任务名称'}]}]" />
+      </a-form-item>
+      <a-form-item
+        label="开始时间"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-date-picker style="width: 100%" v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]" />
+      </a-form-item>
+      <a-form-item
+        label="任务负责人"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-select v-decorator="['owner', {rules:[{required: true, message: '请选择开始时间'}]}]">
+          <a-select-option :value="0">付晓晓</a-select-option>
+          <a-select-option :value="1">周毛毛</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        label="产品描述"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-textarea v-decorator="['desc']"></a-textarea>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'TaskForm',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+
+      visible: false,
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    add () {
+      this.visible = true
+    },
+    edit (record) {
+      const { form: { setFieldsValue } } = this
+      this.visible = true
+      this.$nextTick(() => {
+        setFieldsValue({ taskName: 'test' })
+      })
+    },
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      this.visible = true
+      validateFields((errors, values) => {
+        if (!errors) {
+          console.log('values', values)
+        }
+      })
+    }
+  }
+}
+</script>

src/views/list/search/Applications.vue

+<template>
+  <div>
+    <a-card :bordered="false" class="ant-pro-components-tag-select">
+      <a-form :form="form" layout="inline">
+        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
+          <a-form-item>
+            <tag-select>
+              <tag-select-option value="Category1">类目一</tag-select-option>
+              <tag-select-option value="Category2">类目二</tag-select-option>
+              <tag-select-option value="Category3">类目三</tag-select-option>
+              <tag-select-option value="Category4">类目四</tag-select-option>
+              <tag-select-option value="Category5">类目五</tag-select-option>
+              <tag-select-option value="Category6">类目六</tag-select-option>
+              <tag-select-option value="Category7">类目七</tag-select-option>
+              <tag-select-option value="Category8">类目八</tag-select-option>
+              <tag-select-option value="Category9">类目九</tag-select-option>
+              <tag-select-option value="Category10">类目十</tag-select-option>
+            </tag-select>
+          </a-form-item>
+        </standard-form-row>
+
+        <standard-form-row title="其它选项" grid last>
+          <a-row>
+            <a-col :lg="8" :md="10" :sm="10" :xs="24">
+              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="作者">
+                <a-select
+                  style="max-width: 200px; width: 100%;"
+                  mode="multiple"
+                  placeholder="不限"
+                  v-decorator="['author']"
+                  @change="handleChange"
+                >
+                  <a-select-option value="lisa">王昭君</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="8" :md="10" :sm="10" :xs="24">
+              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="好评度">
+                <a-select
+                  style="max-width: 200px; width: 100%;"
+                  placeholder="不限"
+                  v-decorator="['rate']"
+                >
+                  <a-select-option value="good">优秀</a-select-option>
+                  <a-select-option value="normal">普通</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </standard-form-row>
+      </a-form>
+    </a-card>
+
+    <div class="ant-pro-pages-list-applications-filterCardList">
+      <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }" style="margin-top: 24px;">
+        <a-list-item slot="renderItem" slot-scope="item">
+          <a-card :body-style="{ paddingBottom: 20 }" hoverable>
+            <a-card-meta :title="item.title">
+              <template slot="avatar">
+                <a-avatar size="small" :src="item.avatar"/>
+              </template>
+            </a-card-meta>
+            <template slot="actions">
+              <a-tooltip title="下载">
+                <a-icon type="download" />
+              </a-tooltip>
+              <a-tooltip title="编辑">
+                <a-icon type="edit" />
+              </a-tooltip>
+              <a-tooltip title="分享">
+                <a-icon type="share-alt" />
+              </a-tooltip>
+              <a-dropdown>
+                <a class="ant-dropdown-link">
+                  <a-icon type="ellipsis" />
+                </a>
+                <a-menu slot="overlay">
+                  <a-menu-item>
+                    <a href="javascript:;">1st menu item</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">2nd menu item</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a href="javascript:;">3rd menu item</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </template>
+            <div class="">
+              <card-info active-user="100" new-user="999"></card-info>
+            </div>
+          </a-card>
+        </a-list-item>
+      </a-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
+import CardInfo from './components/CardInfo'
+const TagSelectOption = TagSelect.Option
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+  components: {
+    AvatarList,
+    AvatarListItem,
+    Ellipsis,
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow,
+    CardInfo
+  },
+  data () {
+    return {
+      data: [],
+      form: this.$form.createForm(this),
+      loading: true
+    }
+  },
+  filters: {
+    fromNow (date) {
+      return moment(date).fromNow()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getList () {
+      this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-pro-components-tag-select {
+  /deep/ .ant-pro-tag-select .ant-tag {
+    margin-right: 24px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+}
+.ant-pro-pages-list-projects-cardList {
+  margin-top: 24px;
+
+  /deep/ .ant-card-meta-title {
+    margin-bottom: 4px;
+  }
+
+  /deep/ .ant-card-meta-description {
+    height: 44px;
+    overflow: hidden;
+    line-height: 22px;
+  }
+
+  .cardItemContent {
+    display: flex;
+    height: 20px;
+    margin-top: 16px;
+    margin-bottom: -4px;
+    line-height: 20px;
+
+    > span {
+      flex: 1 1;
+      color: rgba(0,0,0,.45);
+      font-size: 12px;
+    }
+
+    /deep/ .ant-pro-avatar-list {
+      flex: 0 1 auto;
+    }
+  }
+}
+</style>

src/views/list/search/Article.vue

+<template>
+  <div>
+    <a-card :bordered="false" class="ant-pro-components-tag-select">
+      <a-form :form="form" layout="inline">
+        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
+          <a-form-item>
+            <tag-select>
+              <tag-select-option value="Category1">类目一</tag-select-option>
+              <tag-select-option value="Category2">类目二</tag-select-option>
+              <tag-select-option value="Category3">类目三</tag-select-option>
+              <tag-select-option value="Category4">类目四</tag-select-option>
+              <tag-select-option value="Category5">类目五</tag-select-option>
+              <tag-select-option value="Category6">类目六</tag-select-option>
+              <tag-select-option value="Category7">类目七</tag-select-option>
+              <tag-select-option value="Category8">类目八</tag-select-option>
+              <tag-select-option value="Category9">类目九</tag-select-option>
+              <tag-select-option value="Category10">类目十</tag-select-option>
+            </tag-select>
+          </a-form-item>
+        </standard-form-row>
+
+        <standard-form-row title="owner" grid>
+          <a-row>
+            <a-col :md="24">
+              <a-form-item :wrapper-col="{ span: 24 }">
+                <a-select
+                  style="max-width: 268px; width: 100%;"
+                  mode="multiple"
+                  placeholder="选择 onwer"
+                  v-decorator="['owner']"
+                  @change="handleChange"
+                >
+                  <a-select-option v-for="item in owners" :key="item.id">{{ item.name }}</a-select-option>
+                </a-select>
+                <a class="list-articles-trigger" @click="setOwner">只看自己的</a>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </standard-form-row>
+
+        <standard-form-row title="其它选项" grid last>
+          <a-row :gutter="16">
+            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8">
+              <a-form-item label="活跃用户" :wrapper-col="{ xs: 24, sm: 24, md: 12 }">
+                <a-select placeholder="不限" style="max-width: 200px; width: 100%;">
+                  <a-select-option value="李三">李三</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8">
+              <a-form-item label="好评度" :wrapper-col="{ xs: 24, sm: 24, md: 12 }">
+                <a-select placeholder="不限" style="max-width: 200px; width: 100%;">
+                  <a-select-option value="优秀">优秀</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </standard-form-row>
+      </a-form>
+    </a-card>
+
+    <a-card style="margin-top: 24px;" :bordered="false">
+      <a-list
+        size="large"
+        rowKey="id"
+        :loading="loading"
+        itemLayout="vertical"
+        :dataSource="data"
+      >
+        <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
+          <template slot="actions">
+            <icon-text type="star-o" :text="item.star" />
+            <icon-text type="like-o" :text="item.like" />
+            <icon-text type="message" :text="item.message" />
+          </template>
+          <a-list-item-meta>
+            <a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
+            <template slot="description">
+              <span>
+                <a-tag>Ant Design</a-tag>
+                <a-tag>设计语言</a-tag>
+                <a-tag>蚂蚁金服</a-tag>
+              </span>
+            </template>
+          </a-list-item-meta>
+          <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
+        </a-list-item>
+        <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
+          <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
+        </div>
+      </a-list>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { TagSelect, StandardFormRow, ArticleListContent } from '@/components'
+import IconText from './components/IconText'
+const TagSelectOption = TagSelect.Option
+
+const owners = [
+  {
+    id: 'wzj',
+    name: '我自己'
+  },
+  {
+    id: 'wjh',
+    name: '吴家豪'
+  },
+  {
+    id: 'zxx',
+    name: '周星星'
+  },
+  {
+    id: 'zly',
+    name: '赵丽颖'
+  },
+  {
+    id: 'ym',
+    name: '姚明'
+  }
+]
+
+export default {
+  components: {
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow,
+    ArticleListContent,
+    IconText
+  },
+  data () {
+    return {
+      owners,
+      loading: true,
+      loadingMore: false,
+      data: [],
+      form: this.$form.createForm(this)
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getList () {
+      this.$http.get('/list/article').then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    },
+    loadMore () {
+      this.loadingMore = true
+      this.$http.get('/list/article').then(res => {
+        this.data = this.data.concat(res.result)
+      }).finally(() => {
+        this.loadingMore = false
+      })
+    },
+    setOwner () {
+      const { form: { setFieldsValue } } = this
+      setFieldsValue({
+        owner: ['wzj']
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-pro-components-tag-select {
+  /deep/ .ant-pro-tag-select .ant-tag {
+    margin-right: 24px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+}
+
+.list-articles-trigger {
+  margin-left: 12px;
+}
+</style>

src/views/list/search/Projects.vue

+<template>
+  <div>
+    <a-card :bordered="false" class="ant-pro-components-tag-select">
+      <a-form :form="form" layout="inline">
+        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
+          <a-form-item>
+            <tag-select>
+              <tag-select-option value="Category1">类目一</tag-select-option>
+              <tag-select-option value="Category2">类目二</tag-select-option>
+              <tag-select-option value="Category3">类目三</tag-select-option>
+              <tag-select-option value="Category4">类目四</tag-select-option>
+              <tag-select-option value="Category5">类目五</tag-select-option>
+              <tag-select-option value="Category6">类目六</tag-select-option>
+              <tag-select-option value="Category7">类目七</tag-select-option>
+              <tag-select-option value="Category8">类目八</tag-select-option>
+              <tag-select-option value="Category9">类目九</tag-select-option>
+              <tag-select-option value="Category10">类目十</tag-select-option>
+            </tag-select>
+          </a-form-item>
+        </standard-form-row>
+
+        <standard-form-row title="其它选项" grid last>
+          <a-row>
+            <a-col :lg="8" :md="10" :sm="10" :xs="24">
+              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="作者">
+                <a-select
+                  style="max-width: 200px; width: 100%;"
+                  mode="multiple"
+                  placeholder="不限"
+                  v-decorator="['author']"
+                  @change="handleChange"
+                >
+                  <a-select-option value="lisa">王昭君</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="8" :md="10" :sm="10" :xs="24">
+              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="好评度">
+                <a-select
+                  style="max-width: 200px; width: 100%;"
+                  placeholder="不限"
+                  v-decorator="['rate']"
+                >
+                  <a-select-option value="good">优秀</a-select-option>
+                  <a-select-option value="normal">普通</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </standard-form-row>
+      </a-form>
+    </a-card>
+
+    <div class="ant-pro-pages-list-projects-cardList">
+      <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
+        <a-list-item slot="renderItem" slot-scope="item">
+          <a-card class="ant-pro-pages-list-projects-card" hoverable>
+            <img slot="cover" :src="item.cover" :alt="item.title" />
+            <a-card-meta :title="item.title">
+              <template slot="description">
+                <ellipsis :length="50">{{ item.description }}</ellipsis>
+              </template>
+            </a-card-meta>
+            <div class="cardItemContent">
+              <span>{{ item.updatedAt | fromNow }}</span>
+              <div class="avatarList">
+                <avatar-list size="mini">
+                  <avatar-list-item
+                    v-for="(member, i) in item.members"
+                    :key="`${item.id}-avatar-${i}`"
+                    :src="member.avatar"
+                    :tips="member.name"
+                  />
+                </avatar-list>
+              </div>
+            </div>
+          </a-card>
+        </a-list-item>
+      </a-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
+const TagSelectOption = TagSelect.Option
+const AvatarListItem = AvatarList.AvatarItem
+
+export default {
+  components: {
+    AvatarList,
+    AvatarListItem,
+    Ellipsis,
+    TagSelect,
+    TagSelectOption,
+    StandardFormRow
+  },
+  data () {
+    return {
+      data: [],
+      form: this.$form.createForm(this),
+      loading: true
+    }
+  },
+  filters: {
+    fromNow (date) {
+      return moment(date).fromNow()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+      console.log(`selected ${value}`)
+    },
+    getList () {
+      this.$http.get('/list/article', { params: { count: 8 } }).then(res => {
+        console.log('res', res)
+        this.data = res.result
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-pro-components-tag-select {
+  /deep/ .ant-pro-tag-select .ant-tag {
+    margin-right: 24px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+}
+.ant-pro-pages-list-projects-cardList {
+  margin-top: 24px;
+
+  /deep/ .ant-card-meta-title {
+    margin-bottom: 4px;
+  }
+
+  /deep/ .ant-card-meta-description {
+    height: 44px;
+    overflow: hidden;
+    line-height: 22px;
+  }
+
+  .cardItemContent {
+    display: flex;
+    height: 20px;
+    margin-top: 16px;
+    margin-bottom: -4px;
+    line-height: 20px;
+
+    > span {
+      flex: 1 1;
+      color: rgba(0,0,0,.45);
+      font-size: 12px;
+    }
+
+    /deep/ .ant-pro-avatar-list {
+      flex: 0 1 auto;
+    }
+  }
+}
+</style>

src/views/list/search/SearchLayout.vue

+<template>
+  <div class="search-content">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchLayout',
+  data () {
+    return {
+      tabs: {
+        items: [
+          {
+            key: '1',
+            title: '文章'
+          },
+          {
+            key: '2',
+            title: '项目'
+          },
+          {
+            key: '3',
+            title: '应用'
+          }
+        ],
+        active: () => {
+          switch (this.$route.path) {
+            case '/list/search/article':
+              return '1'
+            case '/list/search/project':
+              return '2'
+            case '/list/search/application':
+              return '3'
+            default:
+              return '1'
+          }
+        },
+        callback: (key) => {
+          switch (key) {
+            case '1':
+              this.$router.push('/list/search/article')
+              break
+            case '2':
+              this.$router.push('/list/search/project')
+              break
+            case '3':
+              this.$router.push('/list/search/application')
+              break
+            default:
+              this.$router.push('/workplace')
+          }
+        }
+      },
+      search: true
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .search-head{
+    background-color: #fff;
+    margin: -25px -24px -24px;
+    .search-input{
+      text-align: center;
+      margin-bottom: 16px;
+    }
+  }
+  .search-content{
+    margin-top: 48px;
+  }
+</style>

src/views/list/search/components/CardInfo.vue

+<template>
+  <div class="cardInfo">
+    <div>
+      <p>活跃用户</p>
+      <p>{{ activeUser }}</p>
+    </div>
+    <div>
+      <p>新增用户</p>
+      <p>{{ newUser }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CardInfo',
+  props: {
+    activeUser: {
+      type: [String, Number],
+      default: 0
+    },
+    newUser: {
+      type: [String, Number],
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/components/index.less";
+@import "~@/utils/utils.less";
+
+.cardInfo {
+
+  .clearfix();
+
+  margin-top: 16px;
+  margin-left: 40px;
+  & > div {
+    position: relative;
+    float: left;
+    width: 50%;
+    text-align: left;
+    p {
+      margin: 0;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    p:first-child {
+      margin-bottom: 4px;
+      color: @text-color-secondary;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/views/list/search/components/IconText.vue

+<template>
+  <span>
+    <a-icon :type="type" style="margin-right: 8px" />
+    {{ text }}
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'IconText',
+  props: {
+    'type': {
+      type: String,
+      required: true
+    },
+    text: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>

src/views/list/table/Edit.vue

+<template>
+  <div>
+    <a-form :form="form" @submit="handleSubmit">
+
+      <a-form-item
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        label="规则编号"
+        hasFeedback
+        validateStatus="success"
+      >
+        <a-input
+          placeholder="规则编号"
+          v-decorator="[
+            'no',
+            {rules: [{ required: true, message: '请输入规则编号' }]}
+          ]"
+          :disabled="true"
+        ></a-input>
+      </a-form-item>
+
+      <a-form-item
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        label="服务调用次数"
+        hasFeedback
+        validateStatus="success"
+      >
+        <a-input-number :min="1" style="width: 100%" v-decorator="['callNo', {rules: [{ required: true }]}]" />
+      </a-form-item>
+
+      <a-form-item
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        label="状态"
+        hasFeedback
+        validateStatus="warning"
+      >
+        <a-select v-decorator="['status', {rules: [{ required: true, message: '请选择状态' }], initialValue: '1'}]">
+          <a-select-option :value="1">Option 1</a-select-option>
+          <a-select-option :value="2">Option 2</a-select-option>
+          <a-select-option :value="3">Option 3</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        label="描述"
+        hasFeedback
+        help="请填写一段描述"
+      >
+        <a-textarea :rows="5" placeholder="..." v-decorator="['description', {rules: [{ required: true }]}]" />
+      </a-form-item>
+
+      <a-form-item
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        label="更新时间"
+        hasFeedback
+        validateStatus="error"
+      >
+        <a-date-picker
+          style="width: 100%"
+          showTime
+          format="YYYY-MM-DD HH:mm:ss"
+          placeholder="Select Time"
+          v-decorator="['updatedAt']"
+        />
+      </a-form-item>
+
+      <a-form-item
+        v-bind="buttonCol"
+      >
+        <a-row>
+          <a-col span="6">
+            <a-button type="primary" html-type="submit">提交</a-button>
+          </a-col>
+          <a-col span="10">
+            <a-button @click="handleGoBack">返回</a-button>
+          </a-col>
+          <a-col span="8"></a-col>
+        </a-row>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import pick from 'lodash.pick'
+
+export default {
+  name: 'TableEdit',
+  props: {
+    record: {
+      type: [Object, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 }
+      },
+      buttonCol: {
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 12, offset: 5 }
+        }
+      },
+      form: this.$form.createForm(this),
+      id: 0
+    }
+  },
+  // beforeCreate () {
+  //   this.form = this.$form.createForm(this)
+  // },
+  mounted () {
+    this.$nextTick(() => {
+      this.loadEditInfo(this.record)
+    })
+  },
+  methods: {
+    handleGoBack () {
+      this.$emit('onGoBack')
+    },
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      validateFields((err, values) => {
+        if (!err) {
+          // eslint-disable-next-line no-console
+          console.log('Received values of form: ', values)
+        }
+      })
+    },
+    handleGetInfo () {
+
+    },
+    loadEditInfo (data) {
+      const { form } = this
+      // ajax
+      console.log(`将加载 ${this.id} 信息到表单`)
+      new Promise((resolve) => {
+        setTimeout(resolve, 1500)
+      }).then(() => {
+        const formData = pick(data, ['no', 'callNo', 'status', 'description', 'updatedAt'])
+        formData.updatedAt = moment(data.updatedAt)
+        console.log('formData', formData)
+        form.setFieldsValue(formData)
+      })
+    }
+  }
+}
+</script>

src/views/list/table/List.vue

+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="规则编号">
+              <a-input v-model="queryParam.id" placeholder=""/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="使用状态">
+              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="!advanced && 8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+      <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <!-- lock | unlock -->
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="key"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+        </template>
+        <a-dropdown>
+          <a class="ant-dropdown-link">
+            更多 <a-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.disable')">
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.delete')">
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable } from '@/components'
+import { getRoleList, getServiceList } from '@/api/manage'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '#',
+          scopedSlots: { customRender: 'serial' }
+        },
+        {
+          title: '规则编号',
+          dataIndex: 'no'
+        },
+        {
+          title: '描述',
+          dataIndex: 'description'
+        },
+        {
+          title: '服务调用次数',
+          dataIndex: 'callNo',
+          sorter: true,
+          needTotal: true,
+          customRender: (text) => text + ' 次'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          needTotal: true
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updatedAt',
+          sorter: true
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '150px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        console.log('loadData.parameter', parameter)
+        return getServiceList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res.result
+          })
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: false
+    }
+  },
+  created () {
+    this.tableOption()
+    getRoleList({ t: new Date() })
+  },
+  methods: {
+    tableOption () {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange
+          }
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null
+        }
+        this.optionAlertShow = false
+      }
+    },
+
+    handleEdit (record) {
+      this.$emit('onEdit', record)
+    },
+    handleOk () {
+
+    },
+
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+
+    resetSearchForm () {
+      this.queryParam = {
+        date: moment(new Date())
+      }
+    }
+  }
+}
+</script>

src/views/other/IconSelectorView.vue

+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <icon-selector v-model="currentSelectedIcon" @change="handleIconChange"/>
+
+    <a-divider />
+    <p>测试 IconSelector 组件 v-model 功能</p>
+    <a-button @click="changeIcon('down')">改变 Icon-down</a-button>
+    <a-divider type="vertical" />
+    <a-button @click="changeIcon('cloud-download')">改变 Icon-cloud-download</a-button>
+  </a-card>
+</template>
+
+<script>
+import IconSelector from '@/components/IconSelector'
+
+export default {
+  name: 'IconSelectorView',
+  components: {
+    IconSelector
+  },
+  data () {
+    return {
+      currentSelectedIcon: 'pause-circle'
+    }
+  },
+  methods: {
+    handleIconChange (icon) {
+      console.log('change Icon', icon)
+      this.$message.info(<span>选中图标 <code>{icon}</code></span>)
+    },
+    changeIcon (type) {
+      this.currentSelectedIcon = type
+    }
+  }
+}
+</script>

src/views/other/PermissionList.vue

+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="角色ID">
+              <a-input placeholder="请输入"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="状态">
+              <a-select placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <s-table :columns="columns" :data="loadData">
+
+      <span slot="actions" slot-scope="text, record">
+        <a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
+      </span>
+
+      <span slot="status" slot-scope="text">
+        {{ text | statusFilter }}
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <a @click="handleEdit(record)">编辑</a>
+        <a-divider type="vertical" />
+        <a-dropdown>
+          <a class="ant-dropdown-link">
+            更多 <a-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+
+    <a-modal
+      title="操作"
+      :width="800"
+      v-model="visible"
+      @ok="handleOk"
+    >
+      <a-form :autoFormCreate="(form)=>{this.form = form}">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="唯一识别码"
+          hasFeedback
+          validateStatus="success"
+        >
+          <a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="权限名称"
+          hasFeedback
+          validateStatus="success"
+        >
+          <a-input placeholder="起一个名字" v-model="mdl.name" id="permission_name" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="状态"
+          hasFeedback
+          validateStatus="warning"
+        >
+          <a-select v-model="mdl.status">
+            <a-select-option value="1">正常</a-select-option>
+            <a-select-option value="2">禁用</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="描述"
+          hasFeedback
+        >
+          <a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
+        </a-form-item>
+
+        <a-divider />
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="赋予权限"
+          hasFeedback
+        >
+          <a-select
+            style="width: 100%"
+            mode="multiple"
+            v-model="mdl.actions"
+            :allowClear="true"
+          >
+            <a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
+          </a-select>
+        </a-form-item>
+
+      </a-form>
+    </a-modal>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
+
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      form: null,
+      mdl: {},
+
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '唯一识别码',
+          dataIndex: 'id'
+        },
+        {
+          title: '权限名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '可操作权限',
+          dataIndex: 'actions',
+          scopedSlots: { customRender: 'actions' }
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 向后端拉取可以用的操作列表
+      permissionList: null,
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return this.$http.get('/permission', {
+          params: Object.assign(parameter, this.queryParam)
+        }).then(res => {
+          const result = res.result
+          result.data.map(permission => {
+            permission.actionList = JSON.parse(permission.actionData)
+            return permission
+          })
+          return result
+        })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  filters: {
+    statusFilter (status) {
+      const statusMap = {
+        1: '正常',
+        2: '禁用'
+      }
+      return statusMap[status]
+    }
+  },
+  created () {
+    this.loadPermissionList()
+  },
+  methods: {
+    loadPermissionList () {
+      // permissionList
+      new Promise(resolve => {
+        const data = [
+          { label: '新增', value: 'add', defaultChecked: false },
+          { label: '查询', value: 'get', defaultChecked: false },
+          { label: '修改', value: 'update', defaultChecked: false },
+          { label: '列表', value: 'query', defaultChecked: false },
+          { label: '删除', value: 'delete', defaultChecked: false },
+          { label: '导入', value: 'import', defaultChecked: false },
+          { label: '导出', value: 'export', defaultChecked: false }
+        ]
+        setTimeout(resolve(data), 1500)
+      }).then(res => {
+        this.permissionList = res
+      })
+    },
+    handleEdit (record) {
+      this.mdl = Object.assign({}, record)
+      console.log(this.mdl)
+      this.visible = true
+    },
+    handleOk () {
+
+    },
+    onChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    }
+  },
+  watch: {
+    /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+  }
+}
+</script>

src/views/other/RoleList.vue

+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="角色ID">
+              <a-input placeholder="请输入"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="状态">
+              <a-select placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">正常</a-select-option>
+                <a-select-option value="2">禁用</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :columns="columns"
+      :data="loadData"
+    >
+      <div
+        slot="expandedRowRender"
+        slot-scope="record"
+        style="margin: 0">
+        <a-row
+          :gutter="24"
+          :style="{ marginBottom: '12px' }">
+          <a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
+            <a-col :span="4">
+              <span>{{ role.permissionName }}：</span>
+            </a-col>
+            <a-col :span="20" v-if="role.actionEntitySet.length > 0">
+              <a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
+            </a-col>
+            <a-col :span="20" v-else>-</a-col>
+          </a-col>
+        </a-row>
+      </div>
+      <span slot="action" slot-scope="text, record">
+        <a @click="$refs.modal.edit(record)">编辑</a>
+        <a-divider type="vertical" />
+        <a-dropdown>
+          <a class="ant-dropdown-link">
+            更多 <a-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+
+    <role-modal ref="modal" @ok="handleOk"></role-modal>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import RoleModal from './modules/RoleModal'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable,
+    RoleModal
+  },
+  data () {
+    return {
+      description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
+
+      visible: false,
+
+      form: null,
+      mdl: {},
+
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '唯一识别码',
+          dataIndex: 'id'
+        },
+        {
+          title: '角色名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          sorter: true
+        }, {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return this.$http.get('/role', {
+          params: Object.assign(parameter, this.queryParam)
+        }).then(res => {
+          return res.result
+        })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  methods: {
+    handleEdit (record) {
+      this.mdl = Object.assign({}, record)
+
+      this.mdl.permissions.forEach(permission => {
+        permission.actionsOptions = permission.actionEntitySet.map(action => {
+          return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
+        })
+      })
+
+      console.log(this.mdl)
+      this.visible = true
+    },
+    handleOk () {
+      // 新增/修改 成功时，重载列表
+      this.$refs.table.refresh()
+    },
+    onChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    }
+  },
+  watch: {
+    /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+  }
+}
+</script>

src/views/other/TableInnerEditList.vue

+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="规则编号">
+              <a-input placeholder=""/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="使用状态">
+              <a-select placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="!advanced && 8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus">新建</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <!-- lock | unlock -->
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :columns="columns"
+      :data="loadData"
+      :alert="{ show: true, clear: true }"
+      :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
+    >
+      <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record">
+        <div :key="index">
+          <a-input
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            @change="e => handleChange(e.target.value, record.key, col, record)"
+          />
+          <template v-else>{{ text }}</template>
+        </div>
+      </template>
+      <template slot="action" slot-scope="text, record">
+        <div class="editable-row-operations">
+          <span v-if="record.editable">
+            <a @click="() => save(record)">保存</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
+              <a>取消</a>
+            </a-popconfirm>
+          </span>
+          <span v-else>
+            <a class="edit" @click="() => edit(record)">修改</a>
+            <a-divider type="vertical" />
+            <a class="delete" @click="() => del(record)">删除</a>
+          </span>
+        </div>
+      </template>
+    </s-table>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '规则编号',
+          dataIndex: 'no',
+          width: 90
+        },
+        {
+          title: '描述',
+          dataIndex: 'description',
+          scopedSlots: { customRender: 'description' }
+        },
+        {
+          title: '服务调用次数',
+          dataIndex: 'callNo',
+          width: '150px',
+          sorter: true,
+          needTotal: true,
+          scopedSlots: { customRender: 'callNo' }
+          // customRender: (text) => text + ' 次'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          width: '100px',
+          needTotal: true,
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updatedAt',
+          width: '200px',
+          sorter: true,
+          scopedSlots: { customRender: 'updatedAt' }
+        },
+        {
+          table: '操作',
+          dataIndex: 'action',
+          width: '120px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return this.$http.get('/service', {
+          params: Object.assign(parameter, this.queryParam)
+        }).then(res => {
+          return res.result
+        })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  methods: {
+
+    handleChange (value, key, column, record) {
+      console.log(value, key, column)
+      record[column.dataIndex] = value
+    },
+    edit (row) {
+      row.editable = true
+      // row = Object.assign({}, row)
+    },
+    // eslint-disable-next-line
+    del (row) {
+      this.$confirm({
+        title: '警告',
+        content: `真的要删除 ${row.no} 吗?`,
+        okText: '删除',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          console.log('OK')
+          // 在这里调用删除接口
+          return new Promise((resolve, reject) => {
+            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+          }).catch(() => console.log('Oops errors!'))
+        },
+        onCancel () {
+          console.log('Cancel')
+        }
+      })
+    },
+    save (row) {
+      row.editable = false
+    },
+    cancel (row) {
+      row.editable = false
+    },
+
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    }
+  },
+  watch: {
+    /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>

src/views/other/TreeList.vue

+<template>
+  <a-card :bordered="false">
+    <a-row :gutter="8">
+      <a-col :span="5">
+        <s-tree
+          :dataSource="orgTree"
+          :openKeys.sync="openKeys"
+          :search="true"
+          @click="handleClick"
+          @add="handleAdd"
+          @titleClick="handleTitleClick"></s-tree>
+      </a-col>
+      <a-col :span="19">
+        <s-table
+          ref="table"
+          size="default"
+          :columns="columns"
+          :data="loadData"
+          :alert="false"
+          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        >
+          <span slot="action" slot-scope="text, record">
+            <template v-if="$auth('table.update')">
+              <a @click="handleEdit(record)">编辑</a>
+              <a-divider type="vertical" />
+            </template>
+            <a-dropdown>
+              <a class="ant-dropdown-link">
+                更多 <a-icon type="down" />
+              </a>
+              <a-menu slot="overlay">
+                <a-menu-item>
+                  <a href="javascript:;">详情</a>
+                </a-menu-item>
+                <a-menu-item v-if="$auth('table.disable')">
+                  <a href="javascript:;">禁用</a>
+                </a-menu-item>
+                <a-menu-item v-if="$auth('table.delete')">
+                  <a href="javascript:;">删除</a>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </span>
+        </s-table>
+      </a-col>
+    </a-row>
+
+    <org-modal ref="modal" @ok="handleSaveOk" @close="handleSaveClose" />
+  </a-card>
+</template>
+
+<script>
+import STree from '@/components/Tree/Tree'
+import { STable } from '@/components'
+import OrgModal from './modules/OrgModal'
+import { getOrgTree, getServiceList } from '@/api/manage'
+
+export default {
+  name: 'TreeList',
+  components: {
+    STable,
+    STree,
+    OrgModal
+  },
+  data () {
+    return {
+      openKeys: ['key-01'],
+
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: 'no'
+        },
+        {
+          title: '成员名称',
+          dataIndex: 'description'
+        },
+        {
+          title: '登录次数',
+          dataIndex: 'callNo',
+          sorter: true,
+          needTotal: true,
+          customRender: (text) => text + ' 次'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          needTotal: true
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updatedAt',
+          sorter: true
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '150px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getServiceList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res.result
+          })
+      },
+      orgTree: [],
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  created () {
+    getOrgTree().then(res => {
+      this.orgTree = res.result
+    })
+  },
+  methods: {
+    handleClick (e) {
+      console.log('handleClick', e)
+      this.queryParam = {
+        key: e.key
+      }
+      this.$refs.table.refresh(true)
+    },
+    handleAdd (item) {
+      console.log('add button, item', item)
+      this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
+      this.$refs.modal.add(item.key)
+    },
+    handleTitleClick (item) {
+      console.log('handleTitleClick', item)
+    },
+    titleClick (e) {
+      console.log('titleClick', e)
+    },
+    handleSaveOk () {
+
+    },
+    handleSaveClose () {
+
+    },
+
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .custom-tree {
+
+    /deep/ .ant-menu-item-group-title {
+      position: relative;
+      &:hover {
+        .btn {
+          display: block;
+        }
+      }
+    }
+
+    /deep/ .ant-menu-item {
+      &:hover {
+        .btn {
+          display: block;
+        }
+      }
+    }
+
+    /deep/ .btn {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: 10px;
+      width: 20px;
+      height: 40px;
+      line-height: 40px;
+      z-index: 1050;
+
+      &:hover {
+        transform: scale(1.2);
+        transition: 0.5s all;
+      }
+    }
+  }
+</style>

src/views/other/UserList.vue

+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="角色ID">
+              <a-input placeholder="请输入"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="状态">
+              <a-select placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <s-table
+      size="default"
+      :columns="columns"
+      :data="loadData"
+    >
+      <div
+        slot="expandedRowRender"
+        slot-scope="record"
+        style="margin: 0">
+        <a-row
+          :gutter="24"
+          :style="{ marginBottom: '12px' }">
+          <a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
+            <a-col :lg="4" :md="24">
+              <span>{{ role.permissionName }}：</span>
+            </a-col>
+            <a-col :lg="20" :md="24" v-if="role.actionEntitySet.length > 0">
+              <a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
+            </a-col>
+            <a-col :span="20" v-else>-</a-col>
+          </a-col>
+        </a-row>
+      </div>
+      <span slot="action" slot-scope="text, record">
+        <a @click="handleEdit(record)">编辑</a>
+        <a-divider type="vertical" />
+        <a-dropdown>
+          <a class="ant-dropdown-link">
+            更多 <a-icon type="down" />
+          </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+
+    <a-modal
+      title="操作"
+      style="top: 20px;"
+      :width="800"
+      v-model="visible"
+      @ok="handleOk"
+    >
+      <a-form :autoFormCreate="(form)=>{this.form = form}">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="唯一识别码"
+          hasFeedback
+          validateStatus="success"
+        >
+          <a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="角色名称"
+          hasFeedback
+          validateStatus="success"
+        >
+          <a-input placeholder="起一个名字" v-model="mdl.name" id="role_name" />
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="状态"
+          hasFeedback
+          validateStatus="warning"
+        >
+          <a-select v-model="mdl.status">
+            <a-select-option value="1">正常</a-select-option>
+            <a-select-option value="2">禁用</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="描述"
+          hasFeedback
+        >
+          <a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
+        </a-form-item>
+
+        <a-divider />
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="拥有权限"
+          hasFeedback
+        >
+          <a-row :gutter="16" v-for="(permission, index) in mdl.permissions" :key="index">
+            <a-col :span="4">
+              {{ permission.permissionName }}：
+            </a-col>
+            <a-col :span="20">
+              <a-checkbox-group :options="permission.actionsOptions"/>
+            </a-col>
+          </a-row>
+
+        </a-form-item>
+
+      </a-form>
+    </a-modal>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { getRoleList, getServiceList } from '@/api/manage'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
+
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      form: null,
+      mdl: {},
+
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '唯一识别码',
+          dataIndex: 'id'
+        },
+        {
+          title: '角色名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          sorter: true
+        }, {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getRoleList(parameter)
+          .then(res => {
+            console.log('getRoleList', res)
+            return res.result
+          })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: []
+    }
+  },
+  created () {
+    getServiceList().then(res => {
+      console.log('getServiceList.call()', res)
+    })
+
+    getRoleList().then(res => {
+      console.log('getRoleList.call()', res)
+    })
+  },
+  methods: {
+    handleEdit (record) {
+      this.mdl = Object.assign({}, record)
+
+      this.mdl.permissions.forEach(permission => {
+        permission.actionsOptions = permission.actionEntitySet.map(action => {
+          return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
+        })
+      })
+
+      this.visible = true
+    },
+    handleOk () {
+
+    },
+    onChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    }
+  },
+  watch: {
+    /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+  }
+}
+</script>

src/views/other/modules/OrgModal.vue

+<template>
+  <a-modal
+    title="操作"
+    :width="600"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          label="父级ID"
+        >
+          <a-input v-decorator="['parentId', {}]" disabled />
+        </a-form-item>
+
+        <a-form-item
+          label="机构名称"
+        >
+          <a-input v-decorator="['orgName', {}]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'OrgModal',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      visible: false,
+      confirmLoading: false,
+      mdl: {}
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    console.log('form::', this.form)
+  },
+  created () {
+
+  },
+  methods: {
+    add (id) {
+      this.edit({ parentId: id })
+    },
+    edit (record) {
+      this.mdl = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue({ ...record })
+      })
+    },
+    close () {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk () {
+      const _this = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        // 验证表单没错误
+        if (!err) {
+          console.log('form values', values)
+
+          _this.confirmLoading = true
+          // 模拟后端请求 2000 毫秒延迟
+          new Promise((resolve) => {
+            setTimeout(() => resolve(), 2000)
+          }).then(() => {
+            // Do something
+            _this.$message.success('保存成功')
+            _this.$emit('ok')
+          }).catch(() => {
+            // Do something
+          }).finally(() => {
+            _this.confirmLoading = false
+            _this.close()
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    }
+
+  }
+}
+</script>

src/views/other/modules/RoleModal.vue

+<template>
+  <a-modal
+    title="操作"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-steps :current="1">
+      <a-step>
+        <!-- <span slot="title">Finished</span> -->
+        <template slot="title">
+          Finished
+        </template>
+        <span slot="description">This is a description.</span>
+      </a-step>
+      <a-step title="In Progress" description="This is a description." />
+      <a-step title="Waiting" description="This is a description." />
+    </a-steps>
+  </a-modal>
+</template>
+
+<script>
+import { getPermissions } from '@/api/manage'
+import { actionToObject } from '@/utils/permissions'
+import pick from 'lodash.pick'
+
+export default {
+  name: 'RoleModal',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      visible: false,
+      confirmLoading: false,
+      mdl: {},
+
+      form: this.$form.createForm(this),
+      permissions: []
+    }
+  },
+  created () {
+    this.loadPermissions()
+  },
+  methods: {
+    add () {
+      this.edit({ id: 0 })
+    },
+    edit (record) {
+      this.mdl = Object.assign({}, record)
+      this.visible = true
+
+      // 有权限表，处理勾选
+      if (this.mdl.permissions && this.permissions) {
+        // 先处理要勾选的权限结构
+        const permissionsAction = {}
+        this.mdl.permissions.forEach(permission => {
+          permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
+        })
+        // 把权限表遍历一遍，设定要勾选的权限 action
+        this.permissions.forEach(permission => {
+          permission.selected = permissionsAction[permission.id] || []
+        })
+      }
+
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
+      })
+      console.log('this.mdl', this.mdl)
+    },
+    close () {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk () {
+      const _this = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        // 验证表单没错误
+        if (!err) {
+          console.log('form values', values)
+
+          _this.confirmLoading = true
+          // 模拟后端请求 2000 毫秒延迟
+          new Promise((resolve) => {
+            setTimeout(() => resolve(), 2000)
+          }).then(() => {
+            // Do something
+            _this.$message.success('保存成功')
+            _this.$emit('ok')
+          }).catch(() => {
+            // Do something
+          }).finally(() => {
+            _this.confirmLoading = false
+            _this.close()
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    onChangeCheck (permission) {
+      permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
+      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
+    },
+    onChangeCheckAll (e, permission) {
+      Object.assign(permission, {
+        selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
+        indeterminate: false,
+        checkedAll: e.target.checked
+      })
+    },
+    loadPermissions () {
+      const that = this
+      getPermissions().then(res => {
+        const result = res.result
+        that.permissions = result.map(permission => {
+          const options = actionToObject(permission.actionData)
+          permission.checkedAll = false
+          permission.selected = []
+          permission.indeterminate = false
+          permission.actionsOptions = options.map(option => {
+            return {
+              label: option.describe,
+              value: option.action
+            }
+          })
+          return permission
+        })
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/profile/advanced/Advanced.vue

+
+<template>
+  <page-view title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
+
+    <detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
+      <detail-list-item term="创建人">曲丽丽</detail-list-item>
+      <detail-list-item term="订购产品">XX服务</detail-list-item>
+      <detail-list-item term="创建时间">2018-08-07</detail-list-item>
+      <detail-list-item term="关联单据"><a>12421</a></detail-list-item>
+      <detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
+      <detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
+    </detail-list>
+    <a-row slot="extra" class="status-list">
+      <a-col :xs="12" :sm="12">
+        <div class="text">状态</div>
+        <div class="heading">待审批</div>
+      </a-col>
+      <a-col :xs="12" :sm="12">
+        <div class="text">订单金额</div>
+        <div class="heading">¥ 568.08</div>
+      </a-col>
+    </a-row>
+    <!-- actions -->
+    <template slot="action">
+      <a-button-group style="margin-right: 4px;">
+        <a-button>操作</a-button>
+        <a-button>操作</a-button>
+        <a-button><a-icon type="ellipsis"/></a-button>
+      </a-button-group>
+      <a-button type="primary" >主操作</a-button>
+    </template>
+
+    <a-card :bordered="false" title="流程进度">
+      <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
+        <a-step title="创建项目">
+        </a-step>
+        <a-step title="部门初审">
+        </a-step>
+        <a-step title="财务复核">
+        </a-step>
+        <a-step title="完成">
+        </a-step>
+      </a-steps>
+    </a-card>
+
+    <a-card style="margin-top: 24px" :bordered="false" title="用户信息">
+      <detail-list>
+        <detail-list-item term="用户姓名">付晓晓</detail-list-item>
+        <detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
+        <detail-list-item term="身份证">3321944288191034921</detail-list-item>
+        <detail-list-item term="联系方式">18112345678</detail-list-item>
+        <detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
+      </detail-list>
+      <detail-list title="信息组">
+        <detail-list-item term="某某数据">725</detail-list-item>
+        <detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
+        <detail-list-item ></detail-list-item>
+        <detail-list-item term="某某数据">725</detail-list-item>
+        <detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
+        <detail-list-item ></detail-list-item>
+      </detail-list>
+      <a-card type="inner" title="多层信息组">
+        <detail-list title="组名称" size="small">
+          <detail-list-item term="负责人">林东东</detail-list-item>
+          <detail-list-item term="角色码">1234567</detail-list-item>
+          <detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
+          <detail-list-item term="过期时间">2018-08-08</detail-list-item>
+          <detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
+        </detail-list>
+        <a-divider style="margin: 16px 0" />
+        <detail-list title="组名称" size="small" :col="1">
+          <detail-list-item term="学名">	Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</detail-list-item>
+        </detail-list>
+        <a-divider style="margin: 16px 0" />
+        <detail-list title="组名称" size="small" :col="2">
+          <detail-list-item term="负责人">付小小</detail-list-item>
+          <detail-list-item term="角色码">1234567</detail-list-item>
+        </detail-list>
+      </a-card>
+
+    </a-card>
+
+    <a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
+      <div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
+    </a-card>
+
+    <!-- 操作 -->
+    <a-card
+      style="margin-top: 24px"
+      :bordered="false"
+      :tabList="tabList"
+      :activeTabKey="activeTabKey"
+      @tabChange="(key) => {this.activeTabKey = key}"
+    >
+      <a-table
+        v-if="activeTabKey === '1'"
+        :columns="operationColumns"
+        :dataSource="operation1"
+        :pagination="false"
+      >
+        <template
+          slot="status"
+          slot-scope="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
+        </template>
+      </a-table>
+      <a-table
+        v-if="activeTabKey === '2'"
+        :columns="operationColumns"
+        :dataSource="operation2"
+        :pagination="false"
+      >
+        <template
+          slot="status"
+          slot-scope="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
+        </template>
+      </a-table>
+      <a-table
+        v-if="activeTabKey === '3'"
+        :columns="operationColumns"
+        :dataSource="operation3"
+        :pagination="false"
+      >
+        <template
+          slot="status"
+          slot-scope="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
+        </template>
+      </a-table>
+    </a-card>
+
+  </page-view>
+</template>
+
+<script>
+import { mixinDevice } from '@/utils/mixin'
+import { PageView } from '@/layouts'
+import DetailList from '@/components/tools/DetailList'
+
+const DetailListItem = DetailList.Item
+
+export default {
+  name: 'Advanced',
+  components: {
+    PageView,
+    DetailList,
+    DetailListItem
+  },
+  mixins: [mixinDevice],
+  data () {
+    return {
+      tabList: [
+        {
+          key: '1',
+          tab: '操作日志一'
+        },
+        {
+          key: '2',
+          tab: '操作日志二'
+        },
+        {
+          key: '3',
+          tab: '操作日志三'
+        }
+      ],
+      activeTabKey: '1',
+
+      operationColumns: [
+        {
+          title: '操作类型',
+          dataIndex: 'type',
+          key: 'type'
+        },
+        {
+          title: '操作人',
+          dataIndex: 'name',
+          key: 'name'
+        },
+        {
+          title: '执行结果',
+          dataIndex: 'status',
+          key: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '操作时间',
+          dataIndex: 'updatedAt',
+          key: 'updatedAt'
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          key: 'remark'
+        }
+      ],
+      operation1: [
+        {
+          key: 'op1',
+          type: '订购关系生效',
+          name: '曲丽丽',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-'
+        },
+        {
+          key: 'op2',
+          type: '财务复审',
+          name: '付小小',
+          status: 'reject',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '不通过原因'
+        },
+        {
+          key: 'op3',
+          type: '部门初审',
+          name: '周毛毛',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-'
+        },
+        {
+          key: 'op4',
+          type: '提交订单',
+          name: '林东东',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '很棒'
+        },
+        {
+          key: 'op5',
+          type: '创建订单',
+          name: '汗牙牙',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-'
+        }
+      ],
+      operation2: [
+        {
+          key: 'op2',
+          type: '财务复审',
+          name: '付小小',
+          status: 'reject',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '不通过原因'
+        },
+        {
+          key: 'op3',
+          type: '部门初审',
+          name: '周毛毛',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-'
+        },
+        {
+          key: 'op4',
+          type: '提交订单',
+          name: '林东东',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '很棒'
+        }
+      ],
+      operation3: [
+        {
+          key: 'op2',
+          type: '财务复审',
+          name: '付小小',
+          status: 'reject',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '不通过原因'
+        },
+        {
+          key: 'op3',
+          type: '部门初审',
+          name: '周毛毛',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-'
+        }
+      ]
+    }
+  },
+  filters: {
+    statusFilter (status) {
+      const statusMap = {
+        'agree': '成功',
+        'reject': '驳回'
+      }
+      return statusMap[status]
+    },
+    statusTypeFilter (type) {
+      const statusTypeMap = {
+        'agree': 'success',
+        'reject': 'error'
+      }
+      return statusTypeMap[type]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .detail-layout {
+    margin-left: 44px;
+  }
+  .text {
+    color: rgba(0, 0, 0, .45);
+  }
+
+  .heading {
+    color: rgba(0, 0, 0, .85);
+    font-size: 20px;
+  }
+
+  .no-data {
+    color: rgba(0, 0, 0, .25);
+    text-align: center;
+    line-height: 64px;
+    font-size: 16px;
+
+    i {
+      font-size: 24px;
+      margin-right: 16px;
+      position: relative;
+      top: 3px;
+    }
+  }
+
+  .mobile {
+    .detail-layout {
+      margin-left: unset;
+    }
+    .text {
+
+    }
+    .status-list {
+      text-align: left;
+    }
+  }
+</style>

src/views/profile/basic/Index.vue

+<template>
+  <page-view :title="title">
+    <a-card :bordered="false">
+      <detail-list title="退款申请">
+        <detail-list-item term="取货单号">1000000000</detail-list-item>
+        <detail-list-item term="状态">已取货</detail-list-item>
+        <detail-list-item term="销售单号">1234123421</detail-list-item>
+        <detail-list-item term="子订单">3214321432</detail-list-item>
+      </detail-list>
+      <a-divider style="margin-bottom: 32px"/>
+      <detail-list title="用户信息">
+        <detail-list-item term="用户姓名">付小小</detail-list-item>
+        <detail-list-item term="联系电话">18100000000</detail-list-item>
+        <detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
+        <detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
+        <detail-list-item term="备注">	无</detail-list-item>
+      </detail-list>
+      <a-divider style="margin-bottom: 32px"/>
+
+      <div class="title">退货商品</div>
+      <s-table
+        style="margin-bottom: 24px"
+        row-key="id"
+        :columns="goodsColumns"
+        :data="loadGoodsData">
+
+      </s-table>
+
+      <div class="title">退货进度</div>
+      <s-table
+        style="margin-bottom: 24px"
+        row-key="key"
+        :columns="scheduleColumns"
+        :data="loadScheduleData">
+
+        <template
+          slot="status"
+          slot-scope="status">
+          <a-badge :status="status" :text="status | statusFilter"/>
+        </template>
+
+      </s-table>
+    </a-card>
+  </page-view>
+</template>
+
+<script>
+import { PageView } from '@/layouts'
+import { STable } from '@/components'
+import DetailList from '@/components/tools/DetailList'
+const DetailListItem = DetailList.Item
+
+export default {
+  components: {
+    PageView,
+    DetailList,
+    DetailListItem,
+    STable
+  },
+  data () {
+    return {
+      goodsColumns: [
+        {
+          title: '商品编号',
+          dataIndex: 'id',
+          key: 'id'
+        },
+        {
+          title: '商品名称',
+          dataIndex: 'name',
+          key: 'name'
+        },
+        {
+          title: '商品条码',
+          dataIndex: 'barcode',
+          key: 'barcode'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          key: 'price',
+          align: 'right'
+        },
+        {
+          title: '数量（件）',
+          dataIndex: 'num',
+          key: 'num',
+          align: 'right'
+        },
+        {
+          title: '金额',
+          dataIndex: 'amount',
+          key: 'amount',
+          align: 'right'
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadGoodsData: () => {
+        return new Promise(resolve => {
+          resolve({
+            data: [
+              {
+                id: '1234561',
+                name: '矿泉水 550ml',
+                barcode: '12421432143214321',
+                price: '2.00',
+                num: '1',
+                amount: '2.00'
+              },
+              {
+                id: '1234562',
+                name: '凉茶 300ml',
+                barcode: '12421432143214322',
+                price: '3.00',
+                num: '2',
+                amount: '6.00'
+              },
+              {
+                id: '1234563',
+                name: '好吃的薯片',
+                barcode: '12421432143214323',
+                price: '7.00',
+                num: '4',
+                amount: '28.00'
+              },
+              {
+                id: '1234564',
+                name: '特别好吃的蛋卷',
+                barcode: '12421432143214324',
+                price: '8.50',
+                num: '3',
+                amount: '25.50'
+              }
+            ],
+            pageSize: 10,
+            pageNo: 1,
+            totalPage: 1,
+            totalCount: 10
+          })
+        }).then(res => {
+          return res
+        })
+      },
+
+      scheduleColumns: [
+        {
+          title: '时间',
+          dataIndex: 'time',
+          key: 'time'
+        },
+        {
+          title: '当前进度',
+          dataIndex: 'rate',
+          key: 'rate'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          key: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '操作员ID',
+          dataIndex: 'operator',
+          key: 'operator'
+        },
+        {
+          title: '耗时',
+          dataIndex: 'cost',
+          key: 'cost'
+        }
+      ],
+      loadScheduleData: () => {
+        return new Promise(resolve => {
+          resolve({
+            data: [
+              {
+                key: '1',
+                time: '2017-10-01 14:10',
+                rate: '联系客户',
+                status: 'processing',
+                operator: '取货员 ID1234',
+                cost: '5mins'
+              },
+              {
+                key: '2',
+                time: '2017-10-01 14:05',
+                rate: '取货员出发',
+                status: 'success',
+                operator: '取货员 ID1234',
+                cost: '1h'
+              },
+              {
+                key: '3',
+                time: '2017-10-01 13:05',
+                rate: '取货员接单',
+                status: 'success',
+                operator: '取货员 ID1234',
+                cost: '5mins'
+              },
+              {
+                key: '4',
+                time: '2017-10-01 13:00',
+                rate: '申请审批通过',
+                status: 'success',
+                operator: '系统',
+                cost: '1h'
+              },
+              {
+                key: '5',
+                time: '2017-10-01 12:00',
+                rate: '发起退货申请',
+                status: 'success',
+                operator: '用户',
+                cost: '5mins'
+              }
+            ],
+            pageSize: 10,
+            pageNo: 1,
+            totalPage: 1,
+            totalCount: 10
+          })
+        }).then(res => {
+          return res
+        })
+      }
+    }
+  },
+  filters: {
+    statusFilter (status) {
+      const statusMap = {
+        'processing': '进行中',
+        'success': '完成',
+        'failed': '失败'
+      }
+      return statusMap[status]
+    }
+  },
+  computed: {
+    title () {
+      return this.$route.meta.title
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .title {
+    color: rgba(0,0,0,.85);
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+</style>

src/views/result/Error.vue

+<template>
+  <a-card :bordered="false" style="margin: -24px -24px 0px;">
+    <result type="error" :title="title" :description="description">
+      <template slot="action">
+        <a-button type="primary" >返回修改</a-button>
+      </template>
+      <div>
+        <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
+          您提交的内容有如下错误：
+        </div>
+        <div style="margin-bottom: 16px">
+          <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
+          您的账户已被冻结
+          <a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
+        </div>
+        <div>
+          <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
+          您的账户还不具备申请资格
+          <a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
+        </div>
+      </div>
+    </result>
+  </a-card>
+</template>
+
+<script>
+import { Result } from '@/components'
+
+export default {
+  name: 'Error',
+  components: {
+    Result
+  },
+  data () {
+    return {
+      title: '提交失败',
+      description: '请核对并修改以下信息后，再重新提交。'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/result/Success.vue

+<template>
+  <a-card :bordered="false" style="margin: -24px -24px 0px;">
+    <result type="success" :description="description" :title="title">
+      <template slot="action">
+        <a-button type="primary">返回列表</a-button>
+        <a-button style="margin-left: 8px">查看项目</a-button>
+        <a-button style="margin-left: 8px">打印</a-button>
+      </template>
+      <div>
+        <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
+        <a-row style="margin-bottom: 16px">
+          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+            <span style="color: rgba(0, 0, 0, 0.85)">项目 ID：</span>
+            20180724089
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+            <span style="color: rgba(0, 0, 0, 0.85)">负责人：</span>
+            曲丽丽是谁？
+          </a-col>
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+            <span style="color: rgba(0, 0, 0, 0.85)">生效时间：</span>
+            2016-12-12 ~ 2017-12-12
+          </a-col>
+        </a-row>
+        <a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
+          <a-step >
+            <span style="font-size: 14px" slot="title">创建项目</span>
+            <template slot="description">
+              <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;text-align: left;" slot="description" >
+                <div style="margin: 8px 0 4px">
+                  曲丽丽
+                  <a-icon style="margin-left: 8px" type="dingding-o" />
+                </div>
+                <div>2016-12-12 12:32</div>
+              </div>
+            </template>
+          </a-step>
+          <a-step title="部门初审">
+            <span style="font-size: 14px" slot="title">部门初审</span>
+            <template slot="description">
+              <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;text-align: left;" slot="description" >
+                <div style="margin: 8px 0 4px">
+                  周毛毛
+                  <a-icon style="margin-left: 8px; color: #00A0E9" type="dingding-o" />
+                </div>
+                <div><a href="">催一下</a></div>
+              </div>
+            </template>
+          </a-step>
+          <a-step title="财务复核">
+            <span style="font-size: 14px" slot="title">财务复核</span>
+          </a-step>
+          <a-step title="完成" >
+            <span style="font-size: 14px" slot="title">完成</span>
+          </a-step>
+        </a-steps>
+      </div>
+    </result>
+  </a-card>
+</template>
+
+<script>
+import { Result } from '@/components'
+import { mixinDevice } from '@/utils/mixin.js'
+
+const directionType = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+}
+
+export default {
+  name: 'Success',
+  components: {
+    Result
+  },
+  mixins: [mixinDevice],
+  data () {
+    return {
+      title: '提交成功',
+      description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
+          ' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
+          ' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
+          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
+      directionType
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/role/RoleList.vue

+<template>
+  <a-card :bordered="false" :style="{ height: '100%' }">
+    <a-row :gutter="24">
+      <a-col :md="4">
+        <a-list itemLayout="vertical" :dataSource="roles">
+          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+            <a-list-item-meta :style="{ marginBottom: '0' }">
+              <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
+              <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
+            </a-list-item-meta>
+          </a-list-item>
+        </a-list>
+      </a-col>
+      <a-col :md="20">
+        <div style="max-width: 800px">
+          <a-divider v-if="isMobile()" />
+          <div v-if="mdl.id">
+            <h3>角色：{{ mdl.name }}</h3>
+          </div>
+          <a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
+            <a-form-item label="唯一键">
+              <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
+            </a-form-item>
+
+            <a-form-item label="角色名称">
+              <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
+            </a-form-item>
+
+            <a-form-item label="状态">
+              <a-select v-decorator="[ 'status', {rules: []} ]">
+                <a-select-option :value="1">正常</a-select-option>
+                <a-select-option :value="2">禁用</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item label="备注说明">
+              <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
+            </a-form-item>
+
+            <a-form-item label="拥有权限">
+              <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
+                <a-col :xl="4" :lg="24">
+                  {{ permission.name }}：
+                </a-col>
+                <a-col :xl="20" :lg="24">
+                  <a-checkbox
+                    v-if="permission.actionsOptions.length > 0"
+                    :indeterminate="permission.indeterminate"
+                    :checked="permission.checkedAll"
+                    @change="onChangeCheckAll($event, permission)">
+                    全选
+                  </a-checkbox>
+                  <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
+                </a-col>
+              </a-row>
+            </a-form-item>
+
+          </a-form>
+        </div>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script>
+import { getRoleList, getPermissions } from '@/api/manage'
+import { mixinDevice } from '@/utils/mixin'
+import { actionToObject } from '@/utils/permissions'
+import pick from 'lodash.pick'
+
+export default {
+  name: 'RoleList',
+  mixins: [mixinDevice],
+  components: {},
+  data () {
+    return {
+      form: this.$form.createForm(this),
+      mdl: {},
+
+      roles: [],
+      permissions: []
+    }
+  },
+  created () {
+    getRoleList().then((res) => {
+      this.roles = res.result.data
+      this.roles.push({
+        id: '-1',
+        name: '新增角色',
+        describe: '新增一个角色'
+      })
+      console.log('this.roles', this.roles)
+    })
+    this.loadPermissions()
+  },
+  methods: {
+    callback (val) {
+      console.log(val)
+    },
+
+    add () {
+      this.edit({ id: 0 })
+    },
+
+    edit (record) {
+      this.mdl = Object.assign({}, record)
+      // 有权限表，处理勾选
+      if (this.mdl.permissions && this.permissions) {
+        // 先处理要勾选的权限结构
+        const permissionsAction = {}
+        this.mdl.permissions.forEach(permission => {
+          permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
+        })
+
+        console.log('permissionsAction', permissionsAction)
+        // 把权限表遍历一遍，设定要勾选的权限 action
+        this.permissions.forEach(permission => {
+          const selected = permissionsAction[permission.id]
+          permission.selected = selected || []
+          this.onChangeCheck(permission)
+        })
+
+        console.log('this.permissions', this.permissions)
+      }
+
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
+      })
+      console.log('this.mdl', this.mdl)
+    },
+
+    onChangeCheck (permission) {
+      permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
+      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
+    },
+    onChangeCheckAll (e, permission) {
+      console.log('permission:', permission)
+
+      Object.assign(permission, {
+        selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
+        indeterminate: false,
+        checkedAll: e.target.checked
+      })
+    },
+    loadPermissions () {
+      getPermissions().then(res => {
+        const result = res.result
+        this.permissions = result.map(permission => {
+          const options = actionToObject(permission.actionData)
+          permission.checkedAll = false
+          permission.selected = []
+          permission.indeterminate = false
+          permission.actionsOptions = options.map(option => {
+            return {
+              label: option.describe,
+              value: option.action
+            }
+          })
+          return permission
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/user/Login.vue

+<template>
+  <div class="main">
+    <a-form
+      id="formLogin"
+      class="user-layout-login"
+      ref="formLogin"
+      :form="form"
+      @submit="handleSubmit"
+    >
+      <a-tabs
+        :activeKey="customActiveKey"
+        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
+        @change="handleTabClick"
+      >
+        <a-tab-pane key="tab1" tab="账号密码登录">
+          <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误（admin/ant.design )" />
+          <a-form-item>
+            <a-input
+              size="large"
+              type="text"
+              placeholder="账户: admin"
+              v-decorator="[
+                'username',
+                {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
+              ]"
+            >
+              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item>
+            <a-input
+              size="large"
+              type="password"
+              autocomplete="false"
+              placeholder="密码: admin or ant.design"
+              v-decorator="[
+                'password',
+                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
+              ]"
+            >
+              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+        </a-tab-pane>
+        <a-tab-pane key="tab2" tab="手机号登录">
+          <a-form-item>
+            <a-input size="large" type="text" placeholder="手机号" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
+              <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+
+          <a-row :gutter="16">
+            <a-col class="gutter-row" :span="16">
+              <a-form-item>
+                <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
+                  <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col class="gutter-row" :span="8">
+              <a-button
+                class="getCaptcha"
+                tabindex="-1"
+                :disabled="state.smsSendBtn"
+                @click.stop.prevent="getCaptcha"
+                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
+              ></a-button>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+      </a-tabs>
+
+      <a-form-item>
+        <a-checkbox v-decorator="['rememberMe']">自动登录</a-checkbox>
+        <router-link
+          :to="{ name: 'recover', params: { user: 'aaa'} }"
+          class="forge-password"
+          style="float: right;"
+        >忘记密码</router-link>
+      </a-form-item>
+
+      <a-form-item style="margin-top:24px">
+        <a-button
+          size="large"
+          type="primary"
+          htmlType="submit"
+          class="login-button"
+          :loading="state.loginBtn"
+          :disabled="state.loginBtn"
+        >确定</a-button>
+      </a-form-item>
+
+      <div class="user-login-other">
+        <span>其他登录方式</span>
+        <a>
+          <a-icon class="item-icon" type="alipay-circle"></a-icon>
+        </a>
+        <a>
+          <a-icon class="item-icon" type="taobao-circle"></a-icon>
+        </a>
+        <a>
+          <a-icon class="item-icon" type="weibo-circle"></a-icon>
+        </a>
+        <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
+      </div>
+    </a-form>
+
+    <two-step-captcha
+      v-if="requiredTwoStepCaptcha"
+      :visible="stepCaptchaVisible"
+      @success="stepCaptchaSuccess"
+      @cancel="stepCaptchaCancel"
+    ></two-step-captcha>
+  </div>
+</template>
+
+<script>
+import md5 from 'md5'
+import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
+import { mapActions } from 'vuex'
+import { timeFix } from '@/utils/util'
+import { getSmsCaptcha, get2step } from '@/api/login'
+
+export default {
+  components: {
+    TwoStepCaptcha
+  },
+  data () {
+    return {
+      customActiveKey: 'tab1',
+      loginBtn: false,
+      // login type: 0 email, 1 username, 2 telephone
+      loginType: 0,
+      isLoginError: false,
+      requiredTwoStepCaptcha: false,
+      stepCaptchaVisible: false,
+      form: this.$form.createForm(this),
+      state: {
+        time: 60,
+        loginBtn: false,
+        // login type: 0 email, 1 username, 2 telephone
+        loginType: 0,
+        smsSendBtn: false
+      }
+    }
+  },
+  created () {
+    get2step({ })
+      .then(res => {
+        this.requiredTwoStepCaptcha = res.result.stepCode
+      })
+      .catch(() => {
+        this.requiredTwoStepCaptcha = false
+      })
+    // this.requiredTwoStepCaptcha = true
+  },
+  methods: {
+    ...mapActions(['Login', 'Logout']),
+    // handler
+    handleUsernameOrEmail (rule, value, callback) {
+      const { state } = this
+      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
+      if (regex.test(value)) {
+        state.loginType = 0
+      } else {
+        state.loginType = 1
+      }
+      callback()
+    },
+    handleTabClick (key) {
+      this.customActiveKey = key
+      // this.form.resetFields()
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      const {
+        form: { validateFields },
+        state,
+        customActiveKey,
+        Login
+      } = this
+
+      state.loginBtn = true
+
+      const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha']
+
+      validateFields(validateFieldsKey, { force: true }, (err, values) => {
+        if (!err) {
+          console.log('login form', values)
+          const loginParams = { ...values }
+          delete loginParams.username
+          loginParams[!state.loginType ? 'email' : 'username'] = values.username
+          loginParams.password = md5(values.password)
+          Login(loginParams)
+            .then((res) => this.loginSuccess(res))
+            .catch(err => this.requestFailed(err))
+            .finally(() => {
+              state.loginBtn = false
+            })
+        } else {
+          setTimeout(() => {
+            state.loginBtn = false
+          }, 600)
+        }
+      })
+    },
+    getCaptcha (e) {
+      e.preventDefault()
+      const { form: { validateFields }, state } = this
+
+      validateFields(['mobile'], { force: true }, (err, values) => {
+        if (!err) {
+          state.smsSendBtn = true
+
+          const interval = window.setInterval(() => {
+            if (state.time-- <= 0) {
+              state.time = 60
+              state.smsSendBtn = false
+              window.clearInterval(interval)
+            }
+          }, 1000)
+
+          const hide = this.$message.loading('验证码发送中..', 0)
+          getSmsCaptcha({ mobile: values.mobile }).then(res => {
+            setTimeout(hide, 2500)
+            this.$notification['success']({
+              message: '提示',
+              description: '验证码获取成功，您的验证码为：' + res.result.captcha,
+              duration: 8
+            })
+          }).catch(err => {
+            setTimeout(hide, 1)
+            clearInterval(interval)
+            state.time = 60
+            state.smsSendBtn = false
+            this.requestFailed(err)
+          })
+        }
+      })
+    },
+    stepCaptchaSuccess () {
+      this.loginSuccess()
+    },
+    stepCaptchaCancel () {
+      this.Logout().then(() => {
+        this.loginBtn = false
+        this.stepCaptchaVisible = false
+      })
+    },
+    loginSuccess (res) {
+      console.log(res)
+      // check res.homePage define, set $router.push name res.homePage
+      // Why not enter onComplete
+      /*
+      this.$router.push({ name: 'analysis' }, () => {
+        console.log('onComplete')
+        this.$notification.success({
+          message: '欢迎',
+          description: `${timeFix()}，欢迎回来`
+        })
+      })
+      */
+      this.$router.push({ path: '/' })
+      // 延迟 1 秒显示欢迎信息
+      setTimeout(() => {
+        this.$notification.success({
+          message: '欢迎',
+          description: `${timeFix()}，欢迎回来`
+        })
+      }, 1000)
+      this.isLoginError = false
+    },
+    requestFailed (err) {
+      this.isLoginError = true
+      this.$notification['error']({
+        message: '错误',
+        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
+        duration: 4
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.user-layout-login {
+  label {
+    font-size: 14px;
+  }
+
+  .getCaptcha {
+    display: block;
+    width: 100%;
+    height: 40px;
+  }
+
+  .forge-password {
+    font-size: 14px;
+  }
+
+  button.login-button {
+    padding: 0 15px;
+    font-size: 16px;
+    height: 40px;
+    width: 100%;
+  }
+
+  .user-login-other {
+    text-align: left;
+    margin-top: 24px;
+    line-height: 22px;
+
+    .item-icon {
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.2);
+      margin-left: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: color 0.3s;
+
+      &:hover {
+        color: #1890ff;
+      }
+    }
+
+    .register {
+      float: right;
+    }
+  }
+}
+</style>

src/views/user/Register.vue

+<template>
+  <div class="main user-layout-register">
+    <h3><span>注册</span></h3>
+    <a-form ref="formRegister" :form="form" id="formRegister">
+      <a-form-item>
+        <a-input
+          size="large"
+          type="text"
+          placeholder="邮箱"
+          v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}]"
+        ></a-input>
+      </a-form-item>
+
+      <a-popover
+        placement="rightTop"
+        :trigger="['focus']"
+        :getPopupContainer="(trigger) => trigger.parentElement"
+        v-model="state.passwordLevelChecked">
+        <template slot="content">
+          <div :style="{ width: '240px' }" >
+            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
+            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
+            <div style="margin-top: 10px;">
+              <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
+            </div>
+          </div>
+        </template>
+        <a-form-item>
+          <a-input
+            size="large"
+            type="password"
+            @click="handlePasswordInputClick"
+            autocomplete="false"
+            placeholder="至少6位密码，区分大小写"
+            v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
+          ></a-input>
+        </a-form-item>
+      </a-popover>
+
+      <a-form-item>
+        <a-input
+          size="large"
+          type="password"
+          autocomplete="false"
+          placeholder="确认密码"
+          v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
+        ></a-input>
+      </a-form-item>
+
+      <a-form-item>
+        <a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
+          <a-select slot="addonBefore" size="large" defaultValue="+86">
+            <a-select-option value="+86">+86</a-select-option>
+            <a-select-option value="+87">+87</a-select-option>
+          </a-select>
+        </a-input>
+      </a-form-item>
+      <!--<a-input-group size="large" compact>
+            <a-select style="width: 20%" size="large" defaultValue="+86">
+              <a-select-option value="+86">+86</a-select-option>
+              <a-select-option value="+87">+87</a-select-option>
+            </a-select>
+            <a-input style="width: 80%" size="large" placeholder="11 位手机号"></a-input>
+          </a-input-group>-->
+
+      <a-row :gutter="16">
+        <a-col class="gutter-row" :span="16">
+          <a-form-item>
+            <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
+              <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <a-button
+            class="getCaptcha"
+            size="large"
+            :disabled="state.smsSendBtn"
+            @click.stop.prevent="getCaptcha"
+            v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
+        </a-col>
+      </a-row>
+
+      <a-form-item>
+        <a-button
+          size="large"
+          type="primary"
+          htmlType="submit"
+          class="register-button"
+          :loading="registerBtn"
+          @click.stop.prevent="handleSubmit"
+          :disabled="registerBtn">注册
+        </a-button>
+        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
+      </a-form-item>
+
+    </a-form>
+  </div>
+</template>
+
+<script>
+import { mixinDevice } from '@/utils/mixin.js'
+import { getSmsCaptcha } from '@/api/login'
+
+const levelNames = {
+  0: '低',
+  1: '低',
+  2: '中',
+  3: '强'
+}
+const levelClass = {
+  0: 'error',
+  1: 'error',
+  2: 'warning',
+  3: 'success'
+}
+const levelColor = {
+  0: '#ff0000',
+  1: '#ff0000',
+  2: '#ff7e05',
+  3: '#52c41a'
+}
+export default {
+  name: 'Register',
+  components: {
+  },
+  mixins: [mixinDevice],
+  data () {
+    return {
+      form: this.$form.createForm(this),
+
+      state: {
+        time: 60,
+        smsSendBtn: false,
+        passwordLevel: 0,
+        passwordLevelChecked: false,
+        percent: 10,
+        progressColor: '#FF0000'
+      },
+      registerBtn: false
+    }
+  },
+  computed: {
+    passwordLevelClass () {
+      return levelClass[this.state.passwordLevel]
+    },
+    passwordLevelName () {
+      return levelNames[this.state.passwordLevel]
+    },
+    passwordLevelColor () {
+      return levelColor[this.state.passwordLevel]
+    }
+  },
+  methods: {
+    handlePasswordLevel (rule, value, callback) {
+      let level = 0
+
+      // 判断这个字符串中有没有数字
+      if (/[0-9]/.test(value)) {
+        level++
+      }
+      // 判断字符串中有没有字母
+      if (/[a-zA-Z]/.test(value)) {
+        level++
+      }
+      // 判断字符串中有没有特殊符号
+      if (/[^0-9a-zA-Z_]/.test(value)) {
+        level++
+      }
+      this.state.passwordLevel = level
+      this.state.percent = level * 30
+      if (level >= 2) {
+        if (level >= 3) {
+          this.state.percent = 100
+        }
+        callback()
+      } else {
+        if (level === 0) {
+          this.state.percent = 10
+        }
+        callback(new Error('密码强度不够'))
+      }
+    },
+
+    handlePasswordCheck (rule, value, callback) {
+      const password = this.form.getFieldValue('password')
+      console.log('value', value)
+      if (value === undefined) {
+        callback(new Error('请输入密码'))
+      }
+      if (value && password && value.trim() !== password.trim()) {
+        callback(new Error('两次密码不一致'))
+      }
+      callback()
+    },
+
+    handlePhoneCheck (rule, value, callback) {
+      console.log('handlePhoneCheck, rule:', rule)
+      console.log('handlePhoneCheck, value', value)
+      console.log('handlePhoneCheck, callback', callback)
+
+      callback()
+    },
+
+    handlePasswordInputClick () {
+      if (!this.isMobile()) {
+        this.state.passwordLevelChecked = true
+        return
+      }
+      this.state.passwordLevelChecked = false
+    },
+
+    handleSubmit () {
+      const { form: { validateFields }, state, $router } = this
+      validateFields({ force: true }, (err, values) => {
+        if (!err) {
+          state.passwordLevelChecked = false
+          $router.push({ name: 'registerResult', params: { ...values } })
+        }
+      })
+    },
+
+    getCaptcha (e) {
+      e.preventDefault()
+      const { form: { validateFields }, state, $message, $notification } = this
+
+      validateFields(['mobile'], { force: true },
+        (err, values) => {
+          if (!err) {
+            state.smsSendBtn = true
+
+            const interval = window.setInterval(() => {
+              if (state.time-- <= 0) {
+                state.time = 60
+                state.smsSendBtn = false
+                window.clearInterval(interval)
+              }
+            }, 1000)
+
+            const hide = $message.loading('验证码发送中..', 0)
+
+            getSmsCaptcha({ mobile: values.mobile }).then(res => {
+              setTimeout(hide, 2500)
+              $notification['success']({
+                message: '提示',
+                description: '验证码获取成功，您的验证码为：' + res.result.captcha,
+                duration: 8
+              })
+            }).catch(err => {
+              setTimeout(hide, 1)
+              clearInterval(interval)
+              state.time = 60
+              state.smsSendBtn = false
+              this.requestFailed(err)
+            })
+          }
+        }
+      )
+    },
+    requestFailed (err) {
+      this.$notification['error']({
+        message: '错误',
+        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
+        duration: 4
+      })
+      this.registerBtn = false
+    }
+  },
+  watch: {
+    'state.passwordLevel' (val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+<style lang="less">
+  .user-register {
+
+    &.error {
+      color: #ff0000;
+    }
+
+    &.warning {
+      color: #ff7e05;
+    }
+
+    &.success {
+      color: #52c41a;
+    }
+
+  }
+
+  .user-layout-register {
+    .ant-input-group-addon:first-child {
+      background-color: #fff;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .user-layout-register {
+
+    & > h3 {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+
+    .getCaptcha {
+      display: block;
+      width: 100%;
+      height: 40px;
+    }
+
+    .register-button {
+      width: 50%;
+    }
+
+    .login {
+      float: right;
+      line-height: 40px;
+    }
+  }
+</style>

src/views/user/RegisterResult.vue

+<template>
+  <result
+    :isSuccess="true"
+    :content="false"
+    :title="email"
+    :description="description">
+
+    <template slot="action">
+      <a-button size="large" type="primary">查看邮箱</a-button>
+      <a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
+    </template>
+
+  </result>
+</template>
+
+<script>
+import { Result } from '@/components'
+
+export default {
+  name: 'RegisterResult',
+  components: {
+    Result
+  },
+  data () {
+    return {
+      description: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+      form: {}
+    }
+  },
+  computed: {
+    email () {
+      const v = this.form && this.form.email || 'xxx'
+      const title = `你的账户：${v} 注册成功`
+      return title
+    }
+  },
+  created () {
+    this.form = this.$route.params
+  },
+  methods: {
+    goHomeHandle () {
+      this.$router.push({ name: 'login' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

tests/unit/.eslintrc.js

+module.exports = {
+  env: {
+    jest: true
+  }
+}

vue.config.js

+const path = require('path')
+const webpack = require('webpack')
+const createThemeColorReplacerPlugin = require('./config/plugin.config')
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+/**
+ * check production or preview(pro.loacg.com only)
+ * @returns {boolean}
+ */
+function isProd () {
+  return process.env.NODE_ENV === 'production'
+}
+
+const assetsCDN = {
+  css: [],
+  // https://unpkg.com/browse/vue@2.6.10/
+  js: [
+    '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
+    '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
+    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
+    '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
+  ]
+}
+
+// webpack build externals
+const prodExternals = {
+  vue: 'Vue',
+  'vue-router': 'VueRouter',
+  vuex: 'Vuex',
+  axios: 'axios'
+}
+
+// vue.config.js
+const vueConfig = {
+  configureWebpack: {
+    // webpack plugins
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+    ],
+    // if prod is on, add externals
+    externals: isProd() ? prodExternals : {}
+  },
+
+  chainWebpack: (config) => {
+    config.resolve.alias
+      .set('@$', resolve('src'))
+
+    const svgRule = config.module.rule('svg')
+    svgRule.uses.clear()
+    svgRule
+      .oneOf('inline')
+      .resourceQuery(/inline/)
+      .use('vue-svg-icon-loader')
+      .loader('vue-svg-icon-loader')
+      .end()
+      .end()
+      .oneOf('external')
+      .use('file-loader')
+      .loader('file-loader')
+      .options({
+        name: 'assets/[name].[hash:8].[ext]'
+      })
+
+    // if prod is on
+    // assets require on cdn
+    if (isProd()) {
+      config.plugin('html').tap(args => {
+        args[0].cdn = assetsCDN
+        return args
+      })
+    }
+  },
+
+  css: {
+    loaderOptions: {
+      less: {
+        modifyVars: {
+          // less vars，customize ant design theme
+
+          // 'primary-color': '#F5222D',
+          // 'link-color': '#F5222D',
+          // 'border-radius-base': '4px'
+        },
+        // do not remove this line
+        javascriptEnabled: true
+      }
+    }
+  },
+
+  devServer: {
+    // development server port 8000
+    port: 8000
+    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
+    // proxy: {
+    //   '/api': {
+    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+    //     ws: false,
+    //     changeOrigin: true
+    //   }
+    // }
+  },
+
+  // disable source map in production
+  productionSourceMap: false,
+  lintOnSave: undefined,
+  // babel-loader no-ignore node_modules/*
+  transpileDependencies: []
+}
+
+// preview.pro.loacg.com only do not use in your production;
+if (process.env.VUE_APP_PREVIEW === 'true') {
+  console.log('VUE_APP_PREVIEW', true)
+  // add `ThemeColorReplacer` plugin to webpack plugins
+  vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
+}
+
+module.exports = vueConfig

webstorm.config.js

+'use strict'
+const webpackConfig = require('@vue/cli-service/webpack.config.js')
+module.exports = webpackConfig