commit d7c45eaeeb8cb30a6a59c943fa895c8d86a55bc8
Author: enoch <yingzikeji@gmail.com>
Date:   Tue Apr 6 10:05:42 2021 +0800

    init

diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..8f96043
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 10
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..6f77dff
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,39 @@
+[*]
+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
+
diff --git a/.env b/.env
new file mode 100644
index 0000000..6cb9595
--- /dev/null
+++ b/.env
@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_PREVIEW=false
+VUE_APP_BASE_API=/api
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..4126bbe
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+NODE_ENV=development
+VUE_APP_PREVIEW=true
+VUE_APP_BASE_API=/api
\ No newline at end of file
diff --git a/.env.preview b/.env.preview
new file mode 100644
index 0000000..9684d40
--- /dev/null
+++ b/.env.preview
@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_PREVIEW=true
+VUE_APP_BASE_API=/api
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..7c2225a
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,76 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/strongly-recommended',
+    '@vue/standard'
+  ],
+  rules: {
+    "space-before-function-paren": 0,
+    '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
+      }
+    ],
+    'template-curly-spacing': 'off',
+    'indent': 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..ed223c7
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "space-before-function-paren": 0
+  }
+}
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..e507319
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+public/* linguist-vendored
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a3beccd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.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*
+package-lock.json
+yarn.lock
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b0e80f7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "prettier.spaceBeforeFunctionParen": true
+}
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..a08bfcb
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+  - 10.15.0
+cache: yarn
+script:
+  - yarn
+  - yarn run lint --no-fix && yarn run build
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..413013a
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 扶醉
+
+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.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e300805
--- /dev/null
+++ b/README.md
@@ -0,0 +1,128 @@
+<h1 align="center">RuoYi-Antdv</h1>
+
+> RuoYi-Antdv 是RuoYi-Vue和Ant Design Vue Pro的结合。
+
+<p align="center">
+ <a href="https://gitee.com/fuzui/RuoYi-Antdv" target="_blank"><img src="https://gitee.com/fuzui/RuoYi-Antdv/badge/star.svg?theme=dark" alt="Build Status"></a>&nbsp;
+ <a href="https://github.com/fuzui/RuoYi-Antdv" target="_blank"><img src="https://img.shields.io/github/stars/fuzui/RuoYi-Antdv.svg?style=social" alt="Build Status"></a>&nbsp;
+ <a href="https://gitee.com/y_project/RuoYi-Vue" target="_blank"><img src="https://img.shields.io/badge/RuoYi Vue-3.3.0-brightgreen" alt="Build Status"></a>&nbsp;
+ <a href="https://github.com/vueComponent/ant-design-vue" target="_blank"><img src="https://img.shields.io/badge/Ant Design Vue-1.7.2-brightgreen" alt="Build Status"></a>&nbsp;
+ <a href="https://github.com/vueComponent/ant-design-vue-pro" target="_blank"><img src="https://img.shields.io/badge/Ant Design Vue Pro-3.0.0-brightgreen" alt="Build Status"></a>
+</p>
+
+
+------------------------------
+
+## 简介
+
+**RuoYi-Antdv**，使用[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue)作为后端，改其原有Element Ui为Ant Design Vue。将会持续完全适配RuoYi-Vue。
+
+> RuoYi-Vue是基于SpringBoot，Spring Security，JWT，Vue 的前后端分离权限管理系统。
+>
+> 拥有用户管理、部门管理、岗位管理、菜单管理、角色管理、字典管理、参数管理、通知公告、操作日志、登录日志、在线用户、定时任务、代码生成、系统接口、服务监控、在线构建器、连接池监视等功能。
+
+*当前暂不支持RuoYi中的在线构建器功能。*
+
+* 预览：[https://ruoyi.setworld.net/](https://ruoyi.setworld.net/)
+
+* 文档：[https://docs.geekera.cn/RuoYi-Antdv/](https://docs.geekera.cn/RuoYi-Antdv/)
+
+* RuoYi-Vue文档：[https://doc.ruoyi.vip/ruoyi-vue/](https://doc.ruoyi.vip/ruoyi-vue/)
+
+* Ant Design Vue文档：[https://www.antdv.com/docs/vue/introduce-cn/](https://www.antdv.com/docs/vue/introduce-cn/)
+
+
+
+## 开始使用
+
+1. 环境准备
+   * 运行启动RuoYi-Vue，参考[RuoYi文档](https://doc.ruoyi.vip/ruoyi-vue/)
+   * 安装[node](http://nodejs.org/)和[git](https://git-scm.com/)
+
+1. 安装
+
+   ```shell
+   git clone git@gitee.com:fuzui/RuoYi-Antdv.git
+   ```
+
+   或
+
+   ```shell
+   git clone git@github.com:fuzui/RuoYi-Antdv.git
+   ```
+
+2. 本地开发
+
+   进入项目根目录
+
+   ```shell
+   npm install
+   ```
+
+   > 若耗时太长可使用`npm install --registry=https://registry.npm.taobao.org`
+
+   ```shell
+   npm run serve
+   ```
+
+   > 打开浏览器访问 [http://localhost:8000](http://localhost:8080/)
+
+
+
+## 注意事项
+
+* 若需使用代码生成，请按照文档描述修改：
+  [代码生成前端适配](./docs/gen/) 
+
+
+
+## 致谢
+
+* [RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 基于SpringBoot，Spring Security，JWT，Vue 的前后端分离权限管理系统
+* [Ant Design Vue](https://github.com/vueComponent/ant-design-vue/) An enterprise-class UI components based on Ant Design and Vue
+* [Ant Design Vue Pro](https://github.com/vueComponent/ant-design-vue-pro) Use Ant Design Vue like a Pro
+* [vditor](https://github.com/Vanessa219/vditor) 一款浏览器端的 Markdown 编辑
+
+
+
+## 推荐
+
+*  [RuoYi-Cloud-Ant-Design](https://gitee.com/xuezipeng/ruoyi-cloud-ant-design) RuoYi-Cloud的Ant Design(Antdv)版前端
+
+* [RuoYi-Cloud](https://gitee.com/y_project/RuoYi-Cloud) 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统
+
+## 联系
+
+如果您发现了什么bug，或者有什么界面建议或意见，
+
+欢迎 [issue](https://github.com/fuzui/RuoYi-Antdv/issues)
+
+`RuoYi-Antdv(SpringBoot/SpringCloud)`群：
+
+ [![加入QQ群](https://img.shields.io/badge/Q群-1038609759-blue.svg)](https://jq.qq.com/?_wv=1027&k=Cq8fZnrj)
+
+如果讨论后端，推荐添加若依前后端分离交流群（官方）：
+
+ [![加入QQ群](https://img.shields.io/badge/Q群-186866453-blue.svg)](https://jq.qq.com/?_wv=1027&k=VvjN2nvu)
+
+
+
+## 演示图
+
+<table>
+    <tr>
+        <td><img src="https://oss.fuzui.net/img/20210102022024.png"/></td>
+        <td><img src="https://oss.fuzui.net/img/20210102022136.png"/></td>
+    </tr>
+    <tr>
+        <td><img src="https://oss.fuzui.net/img/20210102022247.png"/></td>
+        <td><img src="https://oss.fuzui.net/img/20210102022534.png"/></td>
+    </tr>
+    <tr>
+        <td><img src="https://oss.fuzui.net/img/20210102022749.png"/></td>
+        <td><img src="https://oss.fuzui.net/img/20210102023153.png"/></td>
+    </tr>
+</table>
+
+
+
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..e80ad97
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,28 @@
+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
+}
diff --git a/config/plugin.config.js b/config/plugin.config.js
new file mode 100644
index 0000000..bb51b98
--- /dev/null
+++ b/config/plugin.config.js
@@ -0,0 +1,49 @@
+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':
+      case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
+        return ':not(.ant-steps-item-process)' + selector
+      // fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876
+      case '.ant-steps-item-process .ant-steps-item-icon':
+        return ':not(.ant-steps-item-custom)' + 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':
+      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':
+      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
diff --git a/config/themePluginConfig.js b/config/themePluginConfig.js
new file mode 100644
index 0000000..d35ef8b
--- /dev/null
+++ b/config/themePluginConfig.js
@@ -0,0 +1,115 @@
+export default {
+  theme: [
+    {
+      key: 'dark',
+      fileName: 'dark.css',
+      theme: 'dark'
+    },
+    {
+      key: '#F5222D',
+      fileName: '#F5222D.css',
+      modifyVars: {
+        '@primary-color': '#F5222D'
+      }
+    },
+    {
+      key: '#FA541C',
+      fileName: '#FA541C.css',
+      modifyVars: {
+        '@primary-color': '#FA541C'
+      }
+    },
+    {
+      key: '#FAAD14',
+      fileName: '#FAAD14.css',
+      modifyVars: {
+        '@primary-color': '#FAAD14'
+      }
+    },
+    {
+      key: '#13C2C2',
+      fileName: '#13C2C2.css',
+      modifyVars: {
+        '@primary-color': '#13C2C2'
+      }
+    },
+    {
+      key: '#52C41A',
+      fileName: '#52C41A.css',
+      modifyVars: {
+        '@primary-color': '#52C41A'
+      }
+    },
+    {
+      key: '#2F54EB',
+      fileName: '#2F54EB.css',
+      modifyVars: {
+        '@primary-color': '#2F54EB'
+      }
+    },
+    {
+      key: '#722ED1',
+      fileName: '#722ED1.css',
+      modifyVars: {
+        '@primary-color': '#722ED1'
+      }
+    },
+
+    {
+      key: '#F5222D',
+      theme: 'dark',
+      fileName: 'dark-#F5222D.css',
+      modifyVars: {
+        '@primary-color': '#F5222D'
+      }
+    },
+    {
+      key: '#FA541C',
+      theme: 'dark',
+      fileName: 'dark-#FA541C.css',
+      modifyVars: {
+        '@primary-color': '#FA541C'
+      }
+    },
+    {
+      key: '#FAAD14',
+      theme: 'dark',
+      fileName: 'dark-#FAAD14.css',
+      modifyVars: {
+        '@primary-color': '#FAAD14'
+      }
+    },
+    {
+      key: '#13C2C2',
+      theme: 'dark',
+      fileName: 'dark-#13C2C2.css',
+      modifyVars: {
+        '@primary-color': '#13C2C2'
+      }
+    },
+    {
+      key: '#52C41A',
+      theme: 'dark',
+      fileName: 'dark-#52C41A.css',
+      modifyVars: {
+        '@primary-color': '#52C41A'
+      }
+    },
+    {
+      key: '#2F54EB',
+      theme: 'dark',
+      fileName: 'dark-#2F54EB.css',
+      modifyVars: {
+        '@primary-color': '#2F54EB'
+      }
+    },
+    {
+      key: '#722ED1',
+      theme: 'dark',
+      fileName: 'dark-#722ED1.css',
+      modifyVars: {
+        '@primary-color': '#722ED1'
+      }
+    }
+  ]
+}
diff --git a/docs/add-page-loading-animate.md b/docs/add-page-loading-animate.md
new file mode 100644
index 0000000..dfe4919
--- /dev/null
+++ b/docs/add-page-loading-animate.md
@@ -0,0 +1,31 @@
+为首屏增加 加载动画
+====
+
+
+
+## 需求
+
+> 为了缓解用户第一次访问时，加载 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 的仓库
diff --git a/docs/gen/README.md b/docs/gen/README.md
new file mode 100644
index 0000000..9c67785
--- /dev/null
+++ b/docs/gen/README.md
@@ -0,0 +1,24 @@
+代码生成
+====
+
+
+
+## 需求
+
+> 因代码生成由后端实现，所以若需要使用代码生成功能来生成前端代码的话，需要以下修改。
+
+
+
+## 实现方案
+
+1. 将本目录下`antdv`文件夹放入`RuoYi-Vue`中代码生成模块(ruoyi-generator)中`resource`的`vm`文件夹下；
+
+2. 将本目录中`VelocityUtils.java`文件替换掉代码生成模块中`com.ruoyi.generator.util`的`VelocityUtils.java`文件；
+
+3. 重启后台项目，代码生成即由`element-ui`成功改为`ant design vue`。
+
+   
+
+![需替换及新增的位置](https://oss.fuzui.net/img/20210202004013.png)
+
+
diff --git a/docs/gen/VelocityUtils.java b/docs/gen/VelocityUtils.java
new file mode 100644
index 0000000..0405c61
--- /dev/null
+++ b/docs/gen/VelocityUtils.java
@@ -0,0 +1,374 @@
+package com.ruoyi.generator.util;
+
+import java.util.ArrayList;
+import java.util.HashSet;
+import java.util.List;
+import org.apache.velocity.VelocityContext;
+import com.alibaba.fastjson.JSONObject;
+import com.ruoyi.common.constant.GenConstants;
+import com.ruoyi.common.utils.DateUtils;
+import com.ruoyi.common.utils.StringUtils;
+import com.ruoyi.generator.domain.GenTable;
+import com.ruoyi.generator.domain.GenTableColumn;
+
+/**
+ * 模板处理工具类
+ * 
+ * @author ruoyi
+ */
+public class VelocityUtils
+{
+    /** 项目空间路径 */
+    private static final String PROJECT_PATH = "main/java";
+
+    /** mybatis空间路径 */
+    private static final String MYBATIS_PATH = "main/resources/mapper";
+
+    /** 默认上级菜单，系统工具 */
+    private static final String DEFAULT_PARENT_MENU_ID = "3";
+
+    /**
+     * 设置模板变量信息
+     *
+     * @return 模板列表
+     */
+    public static VelocityContext prepareContext(GenTable genTable)
+    {
+        String moduleName = genTable.getModuleName();
+        String businessName = genTable.getBusinessName();
+        String packageName = genTable.getPackageName();
+        String tplCategory = genTable.getTplCategory();
+        String functionName = genTable.getFunctionName();
+
+        VelocityContext velocityContext = new VelocityContext();
+        velocityContext.put("tplCategory", genTable.getTplCategory());
+        velocityContext.put("tableName", genTable.getTableName());
+        velocityContext.put("functionName", StringUtils.isNotEmpty(functionName) ? functionName : "【请填写功能名称】");
+        velocityContext.put("ClassName", genTable.getClassName());
+        velocityContext.put("className", StringUtils.uncapitalize(genTable.getClassName()));
+        velocityContext.put("moduleName", genTable.getModuleName());
+        velocityContext.put("BusinessName", StringUtils.capitalize(genTable.getBusinessName()));
+        velocityContext.put("businessName", genTable.getBusinessName());
+        velocityContext.put("basePackage", getPackagePrefix(packageName));
+        velocityContext.put("packageName", packageName);
+        velocityContext.put("author", genTable.getFunctionAuthor());
+        velocityContext.put("datetime", DateUtils.getDate());
+        velocityContext.put("pkColumn", genTable.getPkColumn());
+        velocityContext.put("importList", getImportList(genTable));
+        velocityContext.put("permissionPrefix", getPermissionPrefix(moduleName, businessName));
+        velocityContext.put("columns", genTable.getColumns());
+        velocityContext.put("table", genTable);
+        setMenuVelocityContext(velocityContext, genTable);
+        if (GenConstants.TPL_TREE.equals(tplCategory))
+        {
+            setTreeVelocityContext(velocityContext, genTable);
+        }
+        if (GenConstants.TPL_SUB.equals(tplCategory))
+        {
+            setSubVelocityContext(velocityContext, genTable);
+        }
+        return velocityContext;
+    }
+
+    public static void setMenuVelocityContext(VelocityContext context, GenTable genTable)
+    {
+        String options = genTable.getOptions();
+        JSONObject paramsObj = JSONObject.parseObject(options);
+        String parentMenuId = getParentMenuId(paramsObj);
+        context.put("parentMenuId", parentMenuId);
+    }
+
+    public static void setTreeVelocityContext(VelocityContext context, GenTable genTable)
+    {
+        String options = genTable.getOptions();
+        JSONObject paramsObj = JSONObject.parseObject(options);
+        String treeCode = getTreecode(paramsObj);
+        String treeParentCode = getTreeParentCode(paramsObj);
+        String treeName = getTreeName(paramsObj);
+
+        context.put("treeCode", treeCode);
+        context.put("treeParentCode", treeParentCode);
+        context.put("treeName", treeName);
+        context.put("expandColumn", getExpandColumn(genTable));
+        if (paramsObj.containsKey(GenConstants.TREE_PARENT_CODE))
+        {
+            context.put("tree_parent_code", paramsObj.getString(GenConstants.TREE_PARENT_CODE));
+        }
+        if (paramsObj.containsKey(GenConstants.TREE_NAME))
+        {
+            context.put("tree_name", paramsObj.getString(GenConstants.TREE_NAME));
+        }
+    }
+
+    public static void setSubVelocityContext(VelocityContext context, GenTable genTable)
+    {
+        GenTable subTable = genTable.getSubTable();
+        String subTableName = genTable.getSubTableName();
+        String subTableFkName = genTable.getSubTableFkName();
+        String subClassName = genTable.getSubTable().getClassName();
+        String subTableFkClassName = StringUtils.convertToCamelCase(subTableFkName);
+
+        context.put("subTable", subTable);
+        context.put("subTableName", subTableName);
+        context.put("subTableFkName", subTableFkName);
+        context.put("subTableFkClassName", subTableFkClassName);
+        context.put("subTableFkclassName", StringUtils.uncapitalize(subTableFkClassName));
+        context.put("subClassName", subClassName);
+        context.put("subclassName", StringUtils.uncapitalize(subClassName));
+        context.put("subImportList", getImportList(genTable.getSubTable()));
+    }
+
+    /**
+     * 获取模板信息
+     *
+     * @return 模板列表
+     */
+    public static List<String> getTemplateList(String tplCategory)
+    {
+        List<String> templates = new ArrayList<String>();
+        templates.add("vm/java/domain.java.vm");
+        templates.add("vm/java/mapper.java.vm");
+        templates.add("vm/java/service.java.vm");
+        templates.add("vm/java/serviceImpl.java.vm");
+        templates.add("vm/java/controller.java.vm");
+        templates.add("vm/xml/mapper.xml.vm");
+        templates.add("vm/sql/sql.vm");
+        templates.add("vm/antdv/js/api.js.vm");
+        if (GenConstants.TPL_CRUD.equals(tplCategory) || GenConstants.TPL_TREE.equals(tplCategory))
+        {
+            templates.add("vm/antdv/index.vue.vm");
+            templates.add("vm/antdv/modules/CreateForm.vue.vm");
+        }
+        else if (GenConstants.TPL_SUB.equals(tplCategory))
+        {
+        	templates.add("vm/antdv/index.vue.vm");
+            templates.add("vm/antdv/modules/CreateForm.vue.vm");
+            templates.add("vm/antdv/modules/SubTable.vue.vm");
+            templates.add("vm/antdv/modules/CreateSubForm.vue.vm");
+            templates.add("vm/java/sub-domain.java.vm");
+        }
+        return templates;
+    }
+
+    /**
+     * 获取文件名
+     */
+    public static String getFileName(String template, GenTable genTable)
+    {
+        // 文件名称
+        String fileName = "";
+        // 包路径
+        String packageName = genTable.getPackageName();
+        // 模块名
+        String moduleName = genTable.getModuleName();
+        // 大写类名
+        String className = genTable.getClassName();
+        // 业务名称
+        String businessName = genTable.getBusinessName();
+
+        String javaPath = PROJECT_PATH + "/" + StringUtils.replace(packageName, ".", "/");
+        String mybatisPath = MYBATIS_PATH + "/" + moduleName;
+        String vuePath = "vue";
+
+        if (template.contains("domain.java.vm"))
+        {
+            fileName = StringUtils.format("{}/domain/{}.java", javaPath, className);
+        }
+        if (template.contains("sub-domain.java.vm") && StringUtils.equals(GenConstants.TPL_SUB, genTable.getTplCategory()))
+        {
+            fileName = StringUtils.format("{}/domain/{}.java", javaPath, genTable.getSubTable().getClassName());
+        }
+        else if (template.contains("mapper.java.vm"))
+        {
+            fileName = StringUtils.format("{}/mapper/{}Mapper.java", javaPath, className);
+        }
+        else if (template.contains("service.java.vm"))
+        {
+            fileName = StringUtils.format("{}/service/I{}Service.java", javaPath, className);
+        }
+        else if (template.contains("serviceImpl.java.vm"))
+        {
+            fileName = StringUtils.format("{}/service/impl/{}ServiceImpl.java", javaPath, className);
+        }
+        else if (template.contains("controller.java.vm"))
+        {
+            fileName = StringUtils.format("{}/controller/{}Controller.java", javaPath, className);
+        }
+        else if (template.contains("mapper.xml.vm"))
+        {
+            fileName = StringUtils.format("{}/{}Mapper.xml", mybatisPath, className);
+        }
+        else if (template.contains("sql.vm"))
+        {
+            fileName = businessName + "Menu.sql";
+        }
+        else if (template.contains("api.js.vm"))
+        {
+            fileName = StringUtils.format("{}/api/{}/{}.js", vuePath, moduleName, businessName);
+        }
+        else if (template.contains("index.vue.vm"))
+        {
+            fileName = StringUtils.format("{}/views/{}/{}/index.vue", vuePath, moduleName, businessName);
+        }
+        else if (template.contains("CreateForm.vue.vm"))
+        {
+            fileName = StringUtils.format("{}/views/{}/{}/modules/CreateForm.vue", vuePath, moduleName, businessName);
+        }
+        else if (template.contains("index-tree.vue.vm"))
+        {
+            fileName = StringUtils.format("{}/views/{}/{}/index.vue", vuePath, moduleName, businessName);
+        }
+        else if (template.contains("SubTable.vue.vm"))
+        {
+            fileName = StringUtils.format("{}/views/{}/{}/modules/SubTable.vue", vuePath, moduleName, businessName);
+        }
+        else if (template.contains("CreateSubForm.vue.vm"))
+        {
+            fileName = StringUtils.format("{}/views/{}/{}/modules/CreateSubForm.vue", vuePath, moduleName, businessName);
+        }
+        System.out.println(fileName);
+        return fileName;
+    }
+
+    /**
+     * 获取包前缀
+     *
+     * @param packageName 包名称
+     * @return 包前缀名称
+     */
+    public static String getPackagePrefix(String packageName)
+    {
+        int lastIndex = packageName.lastIndexOf(".");
+        String basePackage = StringUtils.substring(packageName, 0, lastIndex);
+        return basePackage;
+    }
+
+    /**
+     * 根据列类型获取导入包
+     * 
+     * @param genTable 业务表对象
+     * @return 返回需要导入的包列表
+     */
+    public static HashSet<String> getImportList(GenTable genTable)
+    {
+        List<GenTableColumn> columns = genTable.getColumns();
+        GenTable subGenTable = genTable.getSubTable();
+        HashSet<String> importList = new HashSet<String>();
+        if (StringUtils.isNotNull(subGenTable))
+        {
+            importList.add("java.util.List");
+        }
+        for (GenTableColumn column : columns)
+        {
+            if (!column.isSuperColumn() && GenConstants.TYPE_DATE.equals(column.getJavaType()))
+            {
+                importList.add("java.util.Date");
+                importList.add("com.fasterxml.jackson.annotation.JsonFormat");
+            }
+            else if (!column.isSuperColumn() && GenConstants.TYPE_BIGDECIMAL.equals(column.getJavaType()))
+            {
+                importList.add("java.math.BigDecimal");
+            }
+        }
+        return importList;
+    }
+
+    /**
+     * 获取权限前缀
+     *
+     * @param moduleName 模块名称
+     * @param businessName 业务名称
+     * @return 返回权限前缀
+     */
+    public static String getPermissionPrefix(String moduleName, String businessName)
+    {
+        return StringUtils.format("{}:{}", moduleName, businessName);
+    }
+
+    /**
+     * 获取上级菜单ID字段
+     *
+     * @param paramsObj 生成其他选项
+     * @return 上级菜单ID字段
+     */
+    public static String getParentMenuId(JSONObject paramsObj)
+    {
+        if (StringUtils.isNotEmpty(paramsObj) && paramsObj.containsKey(GenConstants.PARENT_MENU_ID))
+        {
+            return paramsObj.getString(GenConstants.PARENT_MENU_ID);
+        }
+        return DEFAULT_PARENT_MENU_ID;
+    }
+
+    /**
+     * 获取树编码
+     *
+     * @param paramsObj 生成其他选项
+     * @return 树编码
+     */
+    public static String getTreecode(JSONObject paramsObj)
+    {
+        if (paramsObj.containsKey(GenConstants.TREE_CODE))
+        {
+            return StringUtils.toCamelCase(paramsObj.getString(GenConstants.TREE_CODE));
+        }
+        return StringUtils.EMPTY;
+    }
+
+    /**
+     * 获取树父编码
+     *
+     * @param paramsObj 生成其他选项
+     * @return 树父编码
+     */
+    public static String getTreeParentCode(JSONObject paramsObj)
+    {
+        if (paramsObj.containsKey(GenConstants.TREE_PARENT_CODE))
+        {
+            return StringUtils.toCamelCase(paramsObj.getString(GenConstants.TREE_PARENT_CODE));
+        }
+        return StringUtils.EMPTY;
+    }
+
+    /**
+     * 获取树名称
+     *
+     * @param paramsObj 生成其他选项
+     * @return 树名称
+     */
+    public static String getTreeName(JSONObject paramsObj)
+    {
+        if (paramsObj.containsKey(GenConstants.TREE_NAME))
+        {
+            return StringUtils.toCamelCase(paramsObj.getString(GenConstants.TREE_NAME));
+        }
+        return StringUtils.EMPTY;
+    }
+
+    /**
+     * 获取需要在哪一列上面显示展开按钮
+     *
+     * @param genTable 业务表对象
+     * @return 展开按钮列序号
+     */
+    public static int getExpandColumn(GenTable genTable)
+    {
+        String options = genTable.getOptions();
+        JSONObject paramsObj = JSONObject.parseObject(options);
+        String treeName = paramsObj.getString(GenConstants.TREE_NAME);
+        int num = 0;
+        for (GenTableColumn column : genTable.getColumns())
+        {
+            if (column.isList())
+            {
+                num++;
+                String columnName = column.getColumnName();
+                if (columnName.equals(treeName))
+                {
+                    break;
+                }
+            }
+        }
+        return num;
+    }
+}
diff --git a/docs/gen/antdv/index.vue.vm b/docs/gen/antdv/index.vue.vm
new file mode 100644
index 0000000..acafd19
--- /dev/null
+++ b/docs/gen/antdv/index.vue.vm
@@ -0,0 +1,461 @@
+<template>
+  <page-header-wrapper>
+    <a-card :bordered="false">
+      <!-- 条件搜索 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+#set($isInsert=0)
+#set($isEdit=0)
+#set($queryCount=0)
+#set($querySpace="")
+#foreach($column in $columns)
+#if($column.insert)
+#set($isInsert=1)
+#end
+#if($column.edit)
+#set($isEdit=1)
+#end
+#if($column.query)
+#set($queryCount=$queryCount+1)
+#set($dictType=$column.dictType)
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($queryCount == 3)
+            <template v-if="advanced">
+#set($querySpace="  ")
+#end
+#if($column.htmlType == "input")
+            ${querySpace}<a-col :md="8" :sm="24">
+              ${querySpace}<a-form-item label="${comment}" prop="${column.javaField}">
+                ${querySpace}<a-input v-model="queryParam.${column.javaField}" placeholder="请输入${comment}" allow-clear/>
+              ${querySpace}</a-form-item>
+            ${querySpace}</a-col>
+#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
+            ${querySpace}<a-col :md="8" :sm="24">
+              ${querySpace}<a-form-item label="${comment}" prop="${column.javaField}">
+                ${querySpace}<a-select placeholder="请选择${comment}" v-model="queryParam.${column.javaField}" style="width: 100%" allow-clear>
+                  ${querySpace}<a-select-option v-for="(d, index) in ${column.javaField}Options" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                ${querySpace}</a-select>
+              ${querySpace}</a-form-item>
+            ${querySpace}</a-col>
+#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
+            ${querySpace}<a-col :md="8" :sm="24">
+              ${querySpace}<a-form-item label="${comment}" prop="${column.javaField}">
+                ${querySpace}<a-select placeholder="请选择${comment}" v-model="queryParam.${column.javaField}" style="width: 100%" allow-clear>
+                  ${querySpace}<a-select-option>请选择字典生成</a-select-option>
+                ${querySpace}</a-select>
+              ${querySpace}</a-form-item>
+            ${querySpace}</a-col>
+#elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
+            ${querySpace}<a-col :md="8" :sm="24">
+              ${querySpace}<a-form-item label="${comment}" prop="${column.javaField}">
+                ${querySpace}<a-date-picker style="width: 100%" v-model="queryParam.${column.javaField}" format="YYYY-MM-DD HH:mm:ss" allow-clear/>
+              ${querySpace}</a-form-item>
+            ${querySpace}</a-col>
+#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+            ${querySpace}<a-col :md="8" :sm="24">
+              ${querySpace}<a-form-item label="${comment}">
+                ${querySpace}<a-range-picker style="width: 100%" v-model="daterange${AttrName}" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
+              ${querySpace}</a-form-item>
+            ${querySpace}</a-col>
+#end
+#end
+#end
+#if($queryCount > 2)
+            </template>
+#end
+            <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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
+#if($queryCount > 2)
+                <a @click="toggleAdvanced" style="margin-left: 8px">
+                  {{ advanced ? '收起' : '展开' }}
+                  <a-icon :type="advanced ? 'up' : 'down'"/>
+                </a>
+#end
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 操作 -->
+      <div class="table-operations">
+#if($isInsert == 1)
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['${moduleName}:${businessName}:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+#end
+#if($isEdit == 1)
+        <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['${moduleName}:${businessName}:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+#end
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['${moduleName}:${businessName}:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+#if($isInsert == 1 || $isEdit == 1)
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+#foreach ($column in $columns)
+#if(${column.dictType} != '')
+        :${column.javaField}Options="${column.javaField}Options"
+#end
+#end
+#if($tplCategory == 'tree')
+        :${businessName}Options="${businessName}Options"
+        @select-tree="getTreeselect"
+#end
+        @ok="getList"
+      />
+#end
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="${pkColumn.javaField}"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+#foreach($column in $columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.list && $column.htmlType == "datetime")
+        <span slot="${javaField}" slot-scope="text, record">
+          {{ parseTime(record.${javaField}) }}
+        </span>
+#elseif($column.list && "" != $column.dictType)
+        <span slot="${javaField}" slot-scope="text, record">
+          {{ ${javaField}Format(record) }}
+        </span>
+#end
+#end
+        <span slot="operation" slot-scope="text, record">
+#if($isEdit == 1)
+          <a-divider type="vertical" v-hasPermi="['${moduleName}:${businessName}:edit']" />
+          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['${moduleName}:${businessName}:edit']">
+            <a-icon type="edit" />修改
+          </a>
+#end
+#if($tplCategory == 'tree' && ($isInsert == 1 || $isEdit == 1))
+          <a-divider type="vertical" v-hasPermi="['${moduleName}:${businessName}:add']" />
+          <a @click="$refs.createForm.handleAdd(record)" v-hasPermi="['${moduleName}:${businessName}:add']">
+            <a-icon type="plus" />新增
+          </a>
+#end
+          <a-divider type="vertical" v-hasPermi="['${moduleName}:${businessName}:remove']" />
+          <a @click="handleDelete(record)" v-hasPermi="['${moduleName}:${businessName}:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+#if($tplCategory != 'tree')
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+#end
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { list${BusinessName}, del${BusinessName}, export${BusinessName} } from '@/api/${moduleName}/${businessName}'
+import CreateForm from './modules/CreateForm'
+
+export default {
+  name: '${BusinessName}',
+  components: {
+#if($isInsert == 1 || $isEdit == 1)
+    CreateForm
+#end
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+#if($tplCategory == 'tree' && ($isInsert == 1 || $isEdit == 1))
+      ${businessName}Options: [],
+#end
+#foreach ($column in $columns)
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if(${column.dictType} != '')
+      // $comment字典
+      ${column.javaField}Options: [],
+#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+      // $comment时间范围
+      daterange${AttrName}: [],
+#end
+#end
+      // 查询参数
+      queryParam: {
+#foreach ($column in $columns)
+#if($column.query)
+        $column.javaField: null,
+#end
+#end
+        pageNum: 1,
+        pageSize: 10
+      },
+      columns: [
+#foreach($column in $columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.pk)
+        {
+          title: '${comment}',
+          dataIndex: '${javaField}',
+          ellipsis: true,
+          align: 'center'
+        },
+#elseif($column.list && $column.htmlType == "datetime" || $column.list && "" != $column.dictType || $column.list && "" != $column.dictType)
+        {
+          title: '${comment}',
+          dataIndex: '${javaField}',
+          scopedSlots: { customRender: '${javaField}' },
+          ellipsis: true,
+          align: 'center'
+        },
+#elseif($column.list && "" != $javaField)
+        {
+          title: '${comment}',
+          dataIndex: '${javaField}',
+          ellipsis: true,
+          align: 'center'
+        },
+#end
+#end
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '18%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+#foreach ($column in $columns)
+#if(${column.dictType} != '')
+    this.getDicts('${column.dictType}').then(response => {
+      this.${column.javaField}Options = response.data
+    })
+#end
+#end
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询${functionName}列表 */
+    getList () {
+      this.loading = true
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+      this.queryParam.params = {}
+#break
+#end
+#end
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+      if (this.daterange${AttrName} !== null && this.daterange${AttrName} !== '' && this.daterange${AttrName}.length !== 0) {
+        this.queryParam.params['begin${AttrName}'] = this.daterange${AttrName}[0]
+        this.queryParam.params['end${AttrName}'] = this.daterange${AttrName}[1]
+      }
+#end
+#end
+      list${BusinessName}(this.queryParam).then(response => {
+#if($tplCategory == 'tree' && ($isInsert == 1 || $isEdit == 1))
+        this.list = this.handleTree(response.data, '${treeCode}', '${treeParentCode}')
+#else
+        this.list = response.rows
+#end
+        this.total = response.total
+        this.loading = false
+      })
+    },
+#foreach ($column in $columns)
+#if(${column.dictType} != '')
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+    // $comment字典翻译
+    ${column.javaField}Format (row, column) {
+#if($column.htmlType == "checkbox")
+      if (row.${column.javaField} === null || row.${column.javaField} === undefined) {
+        return null
+      }
+#end
+      return this.selectDictLabel#if($column.htmlType == "checkbox")s#end(this.${column.javaField}Options, row.${column.javaField})
+    },
+#end
+#end
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+#foreach ($column in $columns)
+#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+      this.daterange${AttrName} = []
+#end
+#end
+      this.queryParam = {
+#foreach($column in $columns)
+#if($column.query)
+#set($dictType=$column.dictType)
+#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if(!($column.htmlType == "datetime" && $column.queryType == "BETWEEN"))
+        ${column.javaField}: undefined,
+#end
+#end
+#end
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.${pkColumn.javaField})
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+#if($tplCategory == 'tree' && ($isInsert == 1 || $isEdit == 1))
+    /** 查询菜单下拉树结构 */
+    getTreeselect () {
+      list${BusinessName}().then(response => {
+        this.${businessName}Options = []
+        const data = { ${treeCode}: 0, ${treeName}: '主目录', children: [] }
+        data.children = this.handleTree(response.data, '${treeCode}', '${treeParentCode}')
+        this.${businessName}Options.push(data)
+      })
+    },
+#end
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const ${pkColumn.javaField}s = row.${pkColumn.javaField} || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + ${pkColumn.javaField}s + '的数据',
+        onOk () {
+          return del${BusinessName}(${pkColumn.javaField}s)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return export${BusinessName}(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/docs/gen/antdv/js/api.js.vm b/docs/gen/antdv/js/api.js.vm
new file mode 100644
index 0000000..0b28367
--- /dev/null
+++ b/docs/gen/antdv/js/api.js.vm
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询${functionName}列表
+export function list${BusinessName} (query) {
+  return request({
+    url: '/${moduleName}/${businessName}/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询${functionName}详细
+export function get${BusinessName} (${pkColumn.javaField}) {
+  return request({
+    url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField},
+    method: 'get'
+  })
+}
+
+// 新增${functionName}
+export function add${BusinessName} (data) {
+  return request({
+    url: '/${moduleName}/${businessName}',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改${functionName}
+export function update${BusinessName} (data) {
+  return request({
+    url: '/${moduleName}/${businessName}',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除${functionName}
+export function del${BusinessName} (${pkColumn.javaField}) {
+  return request({
+    url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField},
+    method: 'delete'
+  })
+}
+
+// 导出${functionName}
+export function export${BusinessName} (query) {
+  return request({
+    url: '/${moduleName}/${businessName}/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/docs/gen/antdv/modules/CreateForm.vue.vm b/docs/gen/antdv/modules/CreateForm.vue.vm
new file mode 100644
index 0000000..72ecbe1
--- /dev/null
+++ b/docs/gen/antdv/modules/CreateForm.vue.vm
@@ -0,0 +1,428 @@
+#set($isInsert=0)
+#set($isEdit=0)
+#set($hasRichText=0)
+#foreach($column in $columns)
+#if($column.insert)
+#set($isInsert=1)
+#end
+#if($column.edit)
+#set($isEdit=1)
+#end
+#if($isInsert == 1 && $isEdit == 1)
+#break
+#end
+#end
+#if($isInsert == 0 && $isEdit == 0)
+<template>
+  <a-result title="多余文件,请删除">
+    <template #icon>
+      <a-icon type="smile" theme="twoTone" />
+    </template>
+    <template #extra>
+      <a-button type="primary" @click="returnIndex">
+               返回首页
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+#stop
+#end
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+#set($requiredCount = 0)
+#set($ruleLastIndex = 0)
+#foreach($column in $columns)
+#if(${column.dictType} != '')
+#set($ruleLastIndex = $velocityCount)
+#end
+#set($field=$column.javaField)
+#if(($column.insert || $column.edit) && !$column.pk)
+#if(($column.usableColumn) || (!$column.superColumn))
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.required)
+#set($requiredCount = $requiredCount + 1)
+#end
+#set($dictType=$column.dictType)
+      <a-form-model-item label="${comment}" prop="${field}" #if($column.insert && !$column.edit)v-if="formType === 1"#end#if(!$column.insert && $column.edit)v-if="formType === 2"#end>
+#if("" != $treeParentCode && $column.javaField == $treeParentCode)
+        <a-tree-select
+          v-model="form.${field}"
+          style="width: 100%"
+          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+          :tree-data="${businessName}Options"
+          placeholder="请选择"
+          :replaceFields="{children:'children', title:'${treeName}', key:'${treeCode}', value: '${treeCode}' }"
+          tree-default-expand-all
+        >
+        </a-tree-select>
+#elseif($column.htmlType == "input")
+        <a-input v-model="form.${field}" placeholder="请输入${comment}" />
+#elseif($column.htmlType == "imageUpload")
+        <file-upload v-model="form.${field}" type="image"></file-upload>
+#elseif($column.htmlType == "fileUpload")
+        <file-upload v-model="form.${field}" type="file"></file-upload>
+#elseif($column.htmlType == "editor")
+#set($hasRichText=1)
+        <div id="${field}" name="${field}" ></div>
+#elseif($column.htmlType == "select" && "" != $dictType)
+        <a-select placeholder="请选择${comment}" v-model="form.${field}">
+          <a-select-option v-for="(d, index) in ${field}Options" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+        </a-select>
+#elseif($column.htmlType == "select" && $dictType)
+        <a-select placeholder="请选择${comment}" v-model="form.${field}">
+          <a-select-option value="" >请选择字典生成</a-select-option>
+        </a-select>
+#elseif($column.htmlType == "checkbox" && "" != $dictType)
+        <a-select
+          mode="multiple"
+          v-model="form.${field}"
+          placeholder="请选择${comment}"
+        >
+          <a-select-option v-for="(d, index) in ${field}Options" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+        </a-select>
+#elseif($column.htmlType == "checkbox" && $dictType)
+        <a-select placeholder="请选择${comment}" v-model="form.${field}">
+          <a-select-option value="" >请选择字典生成</a-select-option>
+        </a-select>
+#elseif($column.htmlType == "radio" && "" != $dictType)
+        <a-radio-group v-model="form.${field}" button-style="solid">
+          <a-radio-button v-for="(d, index) in ${field}Options" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+#elseif($column.htmlType == "radio" && $dictType)
+        <a-radio-group v-model="form.${field}" button-style="solid">
+          <a-radio-button value="">请选择字典生成</a-radio-button>
+        </a-radio-group>
+#elseif($column.htmlType == "datetime")
+        <a-date-picker style="width: 100%" v-model="form.${field}" format="YYYY-MM-DD HH:mm:ss" allow-clear/>
+#elseif($column.htmlType == "textarea")
+        <a-input v-model="form.${field}" placeholder="请输入内容" type="textarea" allow-clear />
+#end
+      </a-form-model-item>
+#end
+#end
+#end
+#if($table.sub)
+      <a-divider orientation="left">
+        <b>${subTable.functionName}</b>
+      </a-divider>
+      <sub-table ref="subTable" :list="subList" @add="handleAdd${subclassName}" @delete="handleDelete${subclassName}" />
+      <p>当前存在 {{ subList.length }} 条信息</p>
+      <a-button type="dashed" @click="$refs.subTable.show()">
+        详情
+      </a-button>
+      <br>
+#end
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+import { get${BusinessName}, add${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}'
+#if($table.sub)
+import SubTable from './SubTable'
+#end
+#if($hasRichText == 1)
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
+#end
+
+export default {
+  name: 'CreateForm',
+  props: {
+#set($propsCount = 0)
+#foreach ($column in $columns)
+#if(${column.dictType} != '')
+#set($propsCount = 1)
+    ${column.javaField}Options: {
+      type: Array,
+      required: true
+#if($velocityCount!=$ruleLastIndex || $tplCategory == 'tree')
+    },
+#else
+    }
+#end
+#end
+#end
+#if($tplCategory == 'tree')
+    ${businessName}Options: {
+      type: Array,
+      required: true
+    }
+#end
+  },
+  components: {
+#if($table.sub)
+    SubTable
+#end
+  },
+  data () {
+    return {
+      loading: false,
+#if($table.sub)
+      subList: [],
+#end
+      formTitle: '',
+#foreach ($column in $columns)
+#if($column.insert || $column.edit)
+#if($column.htmlType == "editor")
+      ${column.javaField}Editor: '',
+#end
+#end
+#end
+      // 表单参数
+      form: {
+#foreach ($column in $columns)
+#if($column.insert || $column.edit)
+#if($column.htmlType == "radio")
+        $column.javaField: #if($column.javaType == "Integer" || $column.javaType == "Long")0#else'0'#end#if($velocityCount != $columns.size()),#end
+#elseif($column.htmlType == "checkbox")
+        $column.javaField: []#if($velocityCount != $columns.size()),#end
+#else
+        $column.javaField: null#if($velocityCount != $columns.size()),#end
+#end
+
+#end
+#end
+      },
+      // 1增加,2修改
+      formType: 1,
+      open: false,
+      rules: {
+#set($currentRequiredCount = 1)
+#foreach ($column in $columns)
+#if(($column.insert || $column.edit) && !$column.pk)
+#if(($column.usableColumn) || (!$column.superColumn))
+#if($column.required)
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+        $column.javaField: [
+          { required: true, message: '$comment不能为空', trigger: #if($column.htmlType == "select")'change'#else'blur'#end }
+        ]#if($currentRequiredCount != $requiredCount),#end
+
+#set($currentRequiredCount = $currentRequiredCount + 1)
+#end
+#end
+#end
+#end
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  mounted () {
+  },
+  methods: {
+#if($hasRichText == 1)
+    openEditor () {
+#foreach ($column in $columns)
+#if($column.insert || $column.edit)
+#if($column.htmlType == "editor")
+      this.$nextTick(() => {
+        this.${column.javaField}Editor = new Vditor('${column.javaField}', {
+          height: 360,
+          toolbarConfig: {
+            pin: true
+          },
+          cache: {
+            enable: false
+          },
+          after: () => {
+            let content = this.form.${column.javaField}
+            if (content === undefined || content === null) {
+              content = ''
+            }
+            this.${column.javaField}Editor.setValue(content)
+          }
+        })
+      })
+#end
+#end
+#end
+    },
+    closeEditor () {
+      this.noticeContentEditor.destroy()
+    },
+#end
+    onClose () {
+      this.open = false
+#if($table.sub)
+      this.subList = []
+#end
+#if($hasRichText == 1)
+      this.closeEditor()
+#end
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+#if($table.sub)
+      this.subList = []
+#end
+#if($hasRichText == 1)
+      this.closeEditor()
+#end
+    },
+    // 表单重置
+    reset () {
+      this.formType = 1
+      this.form = {
+#foreach ($column in $columns)
+#if($column.insert || $column.edit)
+#if($column.htmlType == "radio")
+        $column.javaField: #if($column.javaType == "Integer" || $column.javaType == "Long")0#else'0'#end#if($velocityCount != $columns.size()),#end
+#elseif($column.htmlType == "checkbox")
+        $column.javaField: []#if($velocityCount != $columns.size()),#end
+#else
+        $column.javaField: null#if($velocityCount != $columns.size()),#end
+#end
+
+#end
+#end
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd (row) {
+      this.reset()
+#if($tplCategory == 'tree')
+      this.$emit('select-tree')
+      if (row != null && row.${treeCode}) {
+        this.form.${treeParentCode} = row.${treeCode}
+      } else {
+        this.form.${treeParentCode} = 0
+      }
+#end
+      this.formType = 1
+      this.open = true
+#if($hasRichText == 1)
+      this.openEditor()
+#end
+      this.formTitle = '添加'
+    },
+#if($table.sub)
+    /** 新增子项操作 */
+    handleAdd${subclassName} (row) {
+      this.subList.push(row)
+    },
+    /** 删除子项操作 */
+    handleDelete${subclassName} (index, indexs) {
+      if (index !== undefined) {
+        this.subList.splice(index, 1)
+        return
+      }
+      indexs.forEach(item => {
+        this.subList.splice(item, 1)
+      })
+    },
+#end    
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      this.reset()
+#if($tplCategory == 'tree')
+      this.$emit('select-tree')
+#end
+      this.formType = 2
+      const ${pkColumn.javaField} = row ? row.${pkColumn.javaField} : ids
+      get${BusinessName}(${pkColumn.javaField}).then(response => {
+        this.form = response.data
+#if($table.sub)
+        this.subList = response.data.${subclassName}List
+#end
+#foreach ($column in $columns)
+#if($column.htmlType == "checkbox")
+        if (this.form.$column.javaField !== null) {
+          this.form.$column.javaField = this.form.${column.javaField}.split(',')
+        } else {
+          this.form.$column.javaField = undefined
+        }
+#end
+#end
+        this.open = true
+        this.formTitle = '修改'
+#if($hasRichText == 1)
+        this.openEditor()
+#end
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+#foreach ($column in $columns)
+#if($column.insert || $column.edit)
+#if($column.htmlType == "editor")
+      this.form.${column.javaField} = this.${column.javaField}Editor.getValue()
+#end
+#end
+#end
+      this.#[[$]]#refs.form.validate(valid => {
+        if (valid) {
+#foreach ($column in $columns)
+#if($column.htmlType == "checkbox")
+          this.form.$column.javaField = this.form.${column.javaField}.join(',')
+#end
+#end
+#if($table.sub)
+          this.form.${subclassName}List = this.subList
+#end
+          if (this.form.${pkColumn.javaField} !== undefined && this.form.${pkColumn.javaField} !== null) {
+            update${BusinessName}(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+#if($hasRichText == 1)
+              this.closeEditor()
+#end
+              this.$emit('ok')
+            })
+          } else {
+            add${BusinessName}(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+#if($hasRichText == 1)
+              this.closeEditor()
+#end
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/docs/gen/antdv/modules/CreateSubForm.vue.vm b/docs/gen/antdv/modules/CreateSubForm.vue.vm
new file mode 100644
index 0000000..2af48a5
--- /dev/null
+++ b/docs/gen/antdv/modules/CreateSubForm.vue.vm
@@ -0,0 +1,106 @@
+<template>
+  <!-- 增加修改 -->
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>${subTable.functionName}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form">
+#set($columnLastIndex = 0)
+#foreach($column in $subTable.columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.pk || $javaField == ${subTableFkclassName})
+#elseif($column.list && "" != $javaField)
+#set($columnLastIndex = $velocityCount)
+      <a-form-model-item label="${comment}" prop="${javaField}">
+        <a-input v-model="form.${javaField}" placeholder="请输入" />
+      </a-form-model-item>
+#end
+#end
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'CreateSubForm',
+  props: {
+  },
+  components: {
+  },
+  data () {
+    return {
+      formTitle: '增加',
+      // 表单参数
+      form: {
+#foreach($column in $subTable.columns)
+#set($javaField=$column.javaField)
+#if($column.pk || $javaField == ${subTableFkclassName})
+#elseif($column.list && "" != $javaField)
+        ${$javaField}: undefined#if($columnLastIndex != $velocityCount),#end
+
+#end
+#end
+      },
+      open: false
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+#foreach($column in $subTable.columns)
+#set($javaField=$column.javaField)
+#if($column.pk || $javaField == ${subTableFkclassName})
+#elseif($column.list && "" != $javaField)
+        ${$javaField}: undefined#if($columnLastIndex != $velocityCount),#end
+
+#end
+#end
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.open = true
+      this.reset()
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$emit('add', this.form)
+      this.open = false
+    }
+  }
+}
+</script>
diff --git a/docs/gen/antdv/modules/SubTable.vue.vm b/docs/gen/antdv/modules/SubTable.vue.vm
new file mode 100644
index 0000000..1e34252
--- /dev/null
+++ b/docs/gen/antdv/modules/SubTable.vue.vm
@@ -0,0 +1,152 @@
+<template>
+  <a-modal
+    ref="subTableModel"
+    :title="'${subTable.functionName}'"
+    width="80%"
+    :visible="visible"
+    @cancel="close"
+  >
+    <template slot="footer">
+      <a-button type="dashed" @click="close">
+        关闭
+      </a-button>
+    </template>
+    <a-card :bordered="false">
+      <!-- 操作 -->
+      <div class="table-operations">
+        <a-button type="primary" @click="$refs.createSubForm.handleAdd()">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete">
+          <a-icon type="delete" />删除
+        </a-button>
+      </div>
+      <!-- 增加修改 -->
+      <create-sub-form
+        ref="createSubForm"
+        @add="handleAdd${subClassName}"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="${subTableFkclassName}"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="operation" slot-scope="text, record">
+          <a-divider type="vertical" />
+          <a @click="handleDelete(record)">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+    </a-card>
+  </a-modal>
+</template>
+
+<script>
+import CreateSubForm from './CreateSubForm'
+
+export default {
+  name: 'SubTable',
+  components: {
+    CreateSubForm
+  },
+  props: {
+    list: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      columns: [
+#foreach($column in $subTable.columns)
+#set($javaField=$column.javaField)
+#set($parentheseIndex=$column.columnComment.indexOf("（"))
+#if($parentheseIndex != -1)
+#set($comment=$column.columnComment.substring(0, $parentheseIndex))
+#else
+#set($comment=$column.columnComment)
+#end
+#if($column.pk || $javaField == ${subTableFkclassName})
+#elseif($column.list && "" != $javaField)
+        {
+          title: '${comment}',
+          dataIndex: '${javaField}',
+          ellipsis: true,
+          align: 'center'
+        },
+#end
+#end
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '18%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    // 关闭模态框
+    close () {
+      this.visible = false
+      this.selectedRowKeys = []
+      this.selectedRows = []
+    },
+    // 打开抽屉(由外面的组件调用)
+    show () {
+      this.visible = true
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = selectedRowKeys.map(item => item - 1)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      if (row) {
+        var index = (this.list || []).findIndex((item) => item === row)
+      }
+      const ids = index !== undefined ? index : this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中序号为' + ids + '的数据',
+        onOk () {
+          that.$emit('delete', index, ids)
+        },
+        onCancel () {}
+      })
+    },
+    handleAdd${subClassName} (row) {
+      this.$emit('add', row)
+    }
+  }
+}
+</script>
diff --git a/docs/webpack-bundle-analyzer.md b/docs/webpack-bundle-analyzer.md
new file mode 100644
index 0000000..c313767
--- /dev/null
+++ b/docs/webpack-bundle-analyzer.md
@@ -0,0 +1,40 @@
+先增加依赖
+
+```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
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..29fee32
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,23 @@
+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/'
+}
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..1bd0da4
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src/**/*"]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..822352d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "vue-antd-pro",
+  "version": "3.0.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"
+  },
+  "dependencies": {
+    "ant-design-vue": "^1.7.2",
+    "axios": "^0.19.0",
+    "core-js": "^3.1.2",
+    "echarts": "^5.0.0",
+    "enquire.js": "^2.1.6",
+    "highlight.js": "^10.5.0",
+    "lodash.clonedeep": "^4.5.0",
+    "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",
+    "screenfull": "^5.1.0",
+    "store": "^2.0.12",
+    "vditor": "^3.7.3",
+    "vue": "^2.6.12",
+    "vue-clipboard2": "^0.2.1",
+    "vue-container-query": "^0.1.0",
+    "vue-copy-to-clipboard": "^1.0.3",
+    "vue-cropper": "0.4.9",
+    "vue-i18n": "^8.17.4",
+    "vue-router": "^3.1.2",
+    "vue-svg-component-runtime": "^1.0.1",
+    "vuex": "^3.1.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",
+    "compression-webpack-plugin": "^5.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-html": "^5.0.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "git-revision-webpack-plugin": "^3.0.6",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "opencollective": "^1.0.3",
+    "opencollective-postinstall": "^2.0.2",
+    "vue-svg-icon-loader": "^2.1.1",
+    "vue-template-compiler": "^2.6.12",
+    "webpack-theme-color-replacer": "^1.3.12"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..961986e
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..834cf67
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,33 @@
+<!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>算力云后台管理系统</title>
+    <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;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}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.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>请启用JavaScript后再使用算力云后台管理系统</strong>
+    </noscript>
+    <div id="app">
+      <div class="first-loading-wrp">
+        <h3>算力云</h3>
+        <div class="loading-wrp">
+          <span class="dot 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>
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..d45249b
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..070f28a
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,28 @@
+<template>
+  <a-config-provider :locale="locale">
+    <div id="app">
+      <router-view/>
+    </div>
+  </a-config-provider>
+</template>
+
+<script>
+import { domTitle, setDocumentTitle } from '@/utils/domUtil'
+import { i18nRender } from '@/locales'
+
+export default {
+  data () {
+    return {
+    }
+  },
+  computed: {
+    locale () {
+      // 只是为了切换语言时，更新标题
+      const { title } = this.$route.meta
+      title && (setDocumentTitle(`${i18nRender(title)} - ${domTitle}`))
+
+      return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
+    }
+  }
+}
+</script>
diff --git a/src/api/ad.js b/src/api/ad.js
new file mode 100644
index 0000000..3842585
--- /dev/null
+++ b/src/api/ad.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+const api = {
+  create: '/swipe/create',
+  list: '/swipe/list',
+  delete: '/swipe/delete'
+}
+export default api
+
+export function createAd (parameter) {
+  console.log('createAd')
+  return request({
+    url: api.create,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getAdList (parameters) {
+  console.log('getAdList')
+  return request({
+    url: api.list,
+    method: 'get',
+    params: parameters
+  })
+}
+
+export function deleteAd (parameter) {
+  console.log('deleteAd')
+  return request({
+    url: api.delete,
+    method: 'post',
+    params: parameter
+
+  })
+}
diff --git a/src/api/coin.js b/src/api/coin.js
new file mode 100644
index 0000000..8f43b8a
--- /dev/null
+++ b/src/api/coin.js
@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+const api = {
+  coinList: '/coin/list',
+  coinAddressList: '/address/list',
+  coinAddressDelete: '/address/delete',
+  coinPackageUnit: '/coin/package/unit/list',
+  coinPackageCreate: '/coin/package/create',
+  coinPackageList: '/coin/package/list',
+  coinPackageDelete: '/coin/package/delete'
+
+}
+export default api
+
+export function getCoinList () {
+  console.log('getCoinList')
+  return request({
+    url: api.coinList,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    method: 'get'
+  })
+}
+
+export function getCoinAddressList () {
+  console.log('getCoinAddressList')
+  return request({
+    url: api.coinAddressList,
+    method: 'get'
+  })
+}
+
+export function getCoinPackageUnit () {
+  console.log('loadData.getCoinPackageUnit')
+  return request({
+    url: api.coinPackageUnit,
+    method: 'get'
+  })
+}
+
+export function onCoinPackageCreate (params) {
+  console.log('loadData.coinPackageCreate')
+  return request({
+    url: api.coinPackageCreate,
+    method: 'post',
+    data: params
+  })
+}
+
+export function deleteCoinPackage (params) {
+  console.log('loadData.coinPackageDelete')
+  return request({
+    url: api.coinPackageDelete,
+    method: 'post',
+    data: params
+  })
+}
+
+export function onCoinPackageList () {
+  console.log('loadData.onCoinPackageList')
+  return request({
+    url: api.coinPackageList,
+    method: 'get'
+  })
+}
diff --git a/src/api/common.js b/src/api/common.js
new file mode 100644
index 0000000..95e45a9
--- /dev/null
+++ b/src/api/common.js
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+const api = {
+  upload: '/app/uploadImg'
+}
+export default api
+
+export function Upload () {
+  console.log('loadData.getCoinList.parameter')
+  return request({
+    url: api.upload,
+    method: 'post'
+  })
+}
+
+export const uploadUrl = api.upload
diff --git a/src/api/dashboard.js b/src/api/dashboard.js
new file mode 100644
index 0000000..9a8ae86
--- /dev/null
+++ b/src/api/dashboard.js
@@ -0,0 +1,14 @@
+import request from '@/utils/request'
+
+const api = {
+  dashboard: '/console/dashboard'
+}
+export default api
+
+export function getDashboard() {
+  console.log('loadData.getDashboard')
+  return request({
+    url: api.dashboard,
+    method: 'get'
+  })
+}
diff --git a/src/api/finance/order.js b/src/api/finance/order.js
new file mode 100644
index 0000000..63831e2
--- /dev/null
+++ b/src/api/finance/order.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+const api = {
+  list: '/order/list',
+  updateOrderPayPrice: '/order/updatePayPrice',
+  confirmPayment: '/order/confirmPayment'
+}
+export default api
+
+export function getOrderList(parameters) {
+  console.log('getAdList')
+  return request({
+    url: api.list,
+    method: 'get',
+    params: parameters
+  })
+}
+
+export function onOrderConfirmPayment(parameters) {
+  console.log('confirmPayment')
+  return request({
+    url: api.confirmPayment,
+    method: 'post',
+    data: parameters
+  })
+}
+
+export function onUpdateOrderPayPrice(parameters) {
+  console.log('updateOrderPayPrice')
+  return request({
+    url: api.updateOrderPayPrice,
+    method: 'post',
+    data: parameters
+  })
+}
diff --git a/src/api/finance/payment.js b/src/api/finance/payment.js
new file mode 100644
index 0000000..5eca52c
--- /dev/null
+++ b/src/api/finance/payment.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+const api = {
+  list: '/wallet/payment/list'
+}
+export default api
+
+export function getPaymentRecordList(parameters) {
+  console.log('getPaymentRecordList')
+  return request({
+    url: api.list,
+    method: 'get',
+    params: parameters
+  })
+}
diff --git a/src/api/login.js b/src/api/login.js
new file mode 100644
index 0000000..75cb80a
--- /dev/null
+++ b/src/api/login.js
@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+const userApi = {
+  Login: '/login',
+  Logout: '/logout',
+  // get my info
+  UserInfo: '/getInfo'
+}
+
+/**
+ * login func
+ * @param parameter
+ * @returns {*}
+ */
+export function login (parameter) {
+  return request({
+    url: userApi.Login,
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getInfo () {
+  return request({
+    url: userApi.UserInfo,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+export function logout () {
+  return request({
+    url: userApi.Logout,
+    method: 'delete',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+// 获取验证码
+export function getCodeImg () {
+  return request({
+    url: '/captchaImage',
+    method: 'get'
+  })
+}
diff --git a/src/api/manage.js b/src/api/manage.js
new file mode 100644
index 0000000..46a4a41
--- /dev/null
+++ b/src/api/manage.js
@@ -0,0 +1,70 @@
+import request 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 request({
+    url: api.user,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getRoleList (parameter) {
+  return request({
+    url: api.role,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getServiceList (parameter) {
+  return request({
+    url: api.service,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getPermissions (parameter) {
+  return request({
+    url: api.permissionNoPager,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getOrgTree (parameter) {
+  return request({
+    url: api.orgTree,
+    method: 'get',
+    params: parameter
+  })
+}
+
+// id == 0 add     post
+// id != 0 update  put
+export function saveService (parameter) {
+  return request({
+    url: api.service,
+    method: parameter.id === 0 ? 'post' : 'put',
+    data: parameter
+  })
+}
+
+export function saveSub (sub) {
+  return request({
+    url: '/sub',
+    method: sub.id === 0 ? 'post' : 'put',
+    data: sub
+  })
+}
diff --git a/src/api/member.js b/src/api/member.js
new file mode 100644
index 0000000..cbfe3ea
--- /dev/null
+++ b/src/api/member.js
@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+const api = {
+  userList: '/member/list',
+  register: '/member/register',
+  updateStatus: '/member/updateStatus',
+  memberDelete: '/member/delete',
+  orgTree: '/org/tree'
+}
+export default api
+
+export function getUserList (parameters) {
+  console.log('loadData.getUserList.parameter', parameters)
+  return request({
+    url: api.userList,
+    method: 'get',
+    params: parameters
+  })
+}
+
+export function createUser (parameters) {
+  console.log('createUser', parameters)
+  return request({
+    url: api.register,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    method: 'post',
+    data: parameters,
+    params: parameters
+  })
+}
+
+export function updateUser (parameters) {
+  console.log('createUser', parameters)
+  return request({
+    url: api.updateStatus,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    method: 'post',
+    data: parameters,
+    params: parameters
+  })
+}
+
+export function onMemberDelete (parameters) {
+  console.log('createUser', parameters)
+  return request({
+    url: api.memberDelete,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    method: 'post',
+    data: parameters,
+    params: parameters
+  })
+}
diff --git a/src/api/menu.js b/src/api/menu.js
new file mode 100644
index 0000000..95aaa17
--- /dev/null
+++ b/src/api/menu.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取路由
+export const getRouters = () => {
+  return request({
+    url: '/getRouters',
+    method: 'get'
+  })
+}
diff --git a/src/api/monitor/cache.js b/src/api/monitor/cache.js
new file mode 100644
index 0000000..4609104
--- /dev/null
+++ b/src/api/monitor/cache.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 查询缓存详细
+export function getCache () {
+  return request({
+    url: '/monitor/cache',
+    method: 'get'
+  })
+}
diff --git a/src/api/monitor/logininfor.js b/src/api/monitor/logininfor.js
new file mode 100644
index 0000000..c5e3b4f
--- /dev/null
+++ b/src/api/monitor/logininfor.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 查询登录日志列表
+export function list (query) {
+  return request({
+    url: '/monitor/logininfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除登录日志
+export function delLogininfor (infoId) {
+  return request({
+    url: '/monitor/logininfor/' + infoId,
+    method: 'delete'
+  })
+}
+
+// 清空登录日志
+export function cleanLogininfor () {
+  return request({
+    url: '/monitor/logininfor/clean',
+    method: 'delete'
+  })
+}
+
+// 导出登录日志
+export function exportLogininfor (query) {
+  return request({
+    url: '/monitor/logininfor/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/monitor/online.js b/src/api/monitor/online.js
new file mode 100644
index 0000000..76da959
--- /dev/null
+++ b/src/api/monitor/online.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 查询在线用户列表
+export function list (query) {
+  return request({
+    url: '/monitor/online/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 强退用户
+export function forceLogout (tokenId) {
+  return request({
+    url: '/monitor/online/' + tokenId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/monitor/operlog.js b/src/api/monitor/operlog.js
new file mode 100644
index 0000000..a80d5cc
--- /dev/null
+++ b/src/api/monitor/operlog.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 查询操作日志列表
+export function list (query) {
+  return request({
+    url: '/monitor/operlog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除操作日志
+export function delOperlog (operId) {
+  return request({
+    url: '/monitor/operlog/' + operId,
+    method: 'delete'
+  })
+}
+
+// 清空操作日志
+export function cleanOperlog () {
+  return request({
+    url: '/monitor/operlog/clean',
+    method: 'delete'
+  })
+}
+
+// 导出操作日志
+export function exportOperlog (query) {
+  return request({
+    url: '/monitor/operlog/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/monitor/server.js b/src/api/monitor/server.js
new file mode 100644
index 0000000..f30882a
--- /dev/null
+++ b/src/api/monitor/server.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 查询服务器详细
+export function getServer () {
+  return request({
+    url: '/monitor/server',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/config.js b/src/api/system/config.js
new file mode 100644
index 0000000..9582ef5
--- /dev/null
+++ b/src/api/system/config.js
@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 查询参数列表
+export function listConfig (query) {
+  return request({
+    url: '/system/config/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询参数详细
+export function getConfig (configId) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'get'
+  })
+}
+
+// 根据参数键名查询参数值
+export function getConfigKey (configKey) {
+  return request({
+    url: '/system/config/configKey/' + configKey,
+    method: 'get'
+  })
+}
+
+// 新增参数配置
+export function addConfig (data) {
+  return request({
+    url: '/system/config',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改参数配置
+export function updateConfig (data) {
+  return request({
+    url: '/system/config',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除参数配置
+export function delConfig (configId) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'delete'
+  })
+}
+
+// 清理参数缓存
+export function clearCache () {
+  return request({
+    url: '/system/config/clearCache',
+    method: 'delete'
+  })
+}
+
+// 导出参数
+export function exportConfig (query) {
+  return request({
+    url: '/system/config/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/system/dept.js b/src/api/system/dept.js
new file mode 100644
index 0000000..0dac690
--- /dev/null
+++ b/src/api/system/dept.js
@@ -0,0 +1,68 @@
+import request from '@/utils/request'
+
+// 查询部门列表
+export function listDept (query) {
+  return request({
+    url: '/system/dept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（排除节点）
+export function listDeptExcludeChild (deptId) {
+  return request({
+    url: '/system/dept/list/exclude/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门详细
+export function getDept (deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门下拉树结构
+export function treeselect () {
+  return request({
+    url: '/system/dept/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询部门树结构
+export function roleDeptTreeselect (roleId) {
+  return request({
+    url: '/system/dept/roleDeptTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept (data) {
+  return request({
+    url: '/system/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept (data) {
+  return request({
+    url: '/system/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function delDept (deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/dict/data.js b/src/api/system/dict/data.js
new file mode 100644
index 0000000..5bc65fe
--- /dev/null
+++ b/src/api/system/dict/data.js
@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询字典数据列表
+export function listData (query) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询字典数据详细
+export function getData (dictCode) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'get'
+  })
+}
+
+// 根据字典类型查询字典数据信息
+export function getDicts (dictType) {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  })
+}
+
+// 新增字典数据
+export function addData (data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典数据
+export function updateData (data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除字典数据
+export function delData (dictCode) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'delete'
+  })
+}
+
+// 导出字典数据
+export function exportData (query) {
+  return request({
+    url: '/system/dict/data/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/system/dict/type.js b/src/api/system/dict/type.js
new file mode 100644
index 0000000..ec4d8a0
--- /dev/null
+++ b/src/api/system/dict/type.js
@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 查询字典类型列表
+export function listType (query) {
+  return request({
+    url: '/system/dict/type/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询字典类型详细
+export function getType (dictId) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'get'
+  })
+}
+
+// 新增字典类型
+export function addType (data) {
+  return request({
+    url: '/system/dict/type',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典类型
+export function updateType (data) {
+  return request({
+    url: '/system/dict/type',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除字典类型
+export function delType (dictId) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'delete'
+  })
+}
+
+// 清理参数缓存
+export function clearCache () {
+  return request({
+    url: '/system/dict/type/clearCache',
+    method: 'delete'
+  })
+}
+
+// 导出字典类型
+export function exportType (query) {
+  return request({
+    url: '/system/dict/type/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取字典选择框列表
+export function optionselect () {
+  return request({
+    url: '/system/dict/type/optionselect',
+    method: 'get'
+  })
+}
diff --git a/src/api/system/menu.js b/src/api/system/menu.js
new file mode 100644
index 0000000..6f82014
--- /dev/null
+++ b/src/api/system/menu.js
@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询菜单列表
+export function listMenu (query) {
+  return request({
+    url: '/system/menu/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询菜单详细
+export function getMenu (menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'get'
+  })
+}
+
+// 查询菜单下拉树结构
+export function treeselect () {
+  return request({
+    url: '/system/menu/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询菜单下拉树结构
+export function roleMenuTreeselect (roleId) {
+  return request({
+    url: '/system/menu/roleMenuTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增菜单
+export function addMenu (data) {
+  return request({
+    url: '/system/menu',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改菜单
+export function updateMenu (data) {
+  return request({
+    url: '/system/menu',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除菜单
+export function delMenu (menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/notice.js b/src/api/system/notice.js
new file mode 100644
index 0000000..99b3d7b
--- /dev/null
+++ b/src/api/system/notice.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询公告列表
+export function listNotice (query) {
+  return request({
+    url: '/system/notice/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询公告详细
+export function getNotice (noticeId) {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'get'
+  })
+}
+
+// 新增公告
+export function addNotice (data) {
+  return request({
+    url: '/system/notice',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改公告
+export function updateNotice (data) {
+  return request({
+    url: '/system/notice',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除公告
+export function delNotice (noticeId) {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/post.js b/src/api/system/post.js
new file mode 100644
index 0000000..6559e59
--- /dev/null
+++ b/src/api/system/post.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询岗位列表
+export function listPost (query) {
+  return request({
+    url: '/system/post/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询岗位详细
+export function getPost (postId) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'get'
+  })
+}
+
+// 新增岗位
+export function addPost (data) {
+  return request({
+    url: '/system/post',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改岗位
+export function updatePost (data) {
+  return request({
+    url: '/system/post',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除岗位
+export function delPost (postId) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'delete'
+  })
+}
+
+// 导出岗位
+export function exportPost (query) {
+  return request({
+    url: '/system/post/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..30da94d
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,75 @@
+import request from '@/utils/request'
+
+// 查询角色列表
+export function listRole (query) {
+  return request({
+    url: '/system/role/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询角色详细
+export function getRole (roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增角色
+export function addRole (data) {
+  return request({
+    url: '/system/role',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改角色
+export function updateRole (data) {
+  return request({
+    url: '/system/role',
+    method: 'put',
+    data: data
+  })
+}
+
+// 角色数据权限
+export function dataScope (data) {
+  return request({
+    url: '/system/role/dataScope',
+    method: 'put',
+    data: data
+  })
+}
+
+// 角色状态修改
+export function changeRoleStatus (roleId, status) {
+  const data = {
+    roleId,
+    status
+  }
+  return request({
+    url: '/system/role/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除角色
+export function delRole (roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'delete'
+  })
+}
+
+// 导出角色
+export function exportRole (query) {
+  return request({
+    url: '/system/role/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/system/user.js b/src/api/system/user.js
new file mode 100644
index 0000000..ab635f7
--- /dev/null
+++ b/src/api/system/user.js
@@ -0,0 +1,127 @@
+import request from '@/utils/request'
+import { praseStrEmpty } from '@/utils/ruoyi'
+
+// 查询用户列表
+export function listUser (query) {
+  return request({
+    url: '/system/user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户详细
+export function getUser (userId) {
+  return request({
+    url: '/system/user/' + praseStrEmpty(userId),
+    method: 'get'
+  })
+}
+
+// 新增用户
+export function addUser (data) {
+  return request({
+    url: '/system/user',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用户
+export function updateUser (data) {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除用户
+export function delUser (userId) {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'delete'
+  })
+}
+
+// 导出用户
+export function exportUser (query) {
+  return request({
+    url: '/system/user/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 用户密码重置
+export function resetUserPwd (userId, password) {
+  const data = {
+    userId,
+    password
+  }
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户状态修改
+export function changeUserStatus (userId, status) {
+  const data = {
+    userId,
+    status
+  }
+  return request({
+    url: '/system/user/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 查询用户个人信息
+export function getUserProfile () {
+  return request({
+    url: '/system/user/profile',
+    method: 'get'
+  })
+}
+
+// 修改用户个人信息
+export function updateUserProfile (data) {
+  return request({
+    url: '/system/user/profile',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户密码重置
+export function updateUserPwd (oldPassword, newPassword) {
+  const data = {
+    oldPassword,
+    newPassword
+  }
+  return request({
+    url: '/system/user/profile/updatePwd',
+    method: 'put',
+    params: data
+  })
+}
+
+// 用户头像上传
+export function uploadAvatar (data) {
+  return request({
+    url: '/system/user/profile/avatar',
+    method: 'post',
+    data: data
+  })
+}
+
+// 下载用户导入模板
+export function importTemplate () {
+  return request({
+    url: '/system/user/importTemplate',
+    method: 'get'
+  })
+}
diff --git a/src/api/tool/gen.js b/src/api/tool/gen.js
new file mode 100644
index 0000000..5024f0f
--- /dev/null
+++ b/src/api/tool/gen.js
@@ -0,0 +1,76 @@
+import request from '@/utils/request'
+
+// 查询生成表数据
+export function listTable (query) {
+  return request({
+    url: '/tool/gen/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询db数据库列表
+export function listDbTable (query) {
+  return request({
+    url: '/tool/gen/db/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询表详细信息
+export function getGenTable (tableId) {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'get'
+  })
+}
+
+// 修改代码生成信息
+export function updateGenTable (data) {
+  return request({
+    url: '/tool/gen',
+    method: 'put',
+    data: data
+  })
+}
+
+// 导入表
+export function importTable (data) {
+  return request({
+    url: '/tool/gen/importTable',
+    method: 'post',
+    params: data
+  })
+}
+
+// 预览生成代码
+export function previewTable (tableId) {
+  return request({
+    url: '/tool/gen/preview/' + tableId,
+    method: 'get'
+  })
+}
+
+// 删除表数据
+export function delTable (tableId) {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'delete'
+  })
+}
+
+// 生成代码（自定义路径）
+export function genCode (tableName) {
+  return request({
+    url: '/tool/gen/genCode/' + tableName,
+    method: 'get'
+  })
+}
+
+// 同步数据库
+export function synchDb (tableName) {
+  return request({
+    url: '/tool/gen/synchDb/' + tableName,
+    method: 'get'
+  })
+}
diff --git a/src/assets/background.svg b/src/assets/background.svg
new file mode 100644
index 0000000..89c2597
--- /dev/null
+++ b/src/assets/background.svg
@@ -0,0 +1,69 @@
+<?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
diff --git a/src/assets/icons/bug.svg b/src/assets/icons/bug.svg
new file mode 100644
index 0000000..b7fbf75
--- /dev/null
+++ b/src/assets/icons/bug.svg
@@ -0,0 +1 @@
+<?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="1608877719378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3862" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M844.8 533.333333c0-21.845333-1.834667-43.093333-4.522667-64h95.829334V384h-114.986667a423.850667 423.850667 0 0 0-71.765333-134.314667l91.52-91.52-60.330667-60.330666-92.330667 92.288C637.056 150.997333 576.768 128 512 128s-125.056 22.997333-176.213333 62.122667L243.498667 97.834667 183.168 158.165333l91.52 91.52A423.850667 423.850667 0 0 0 202.922667 384H85.333333v85.333333h98.432c-2.730667 20.906667-4.565333 42.154667-4.565333 64 0 21.973333 1.834667 43.434667 4.608 64.469334H85.333333v85.333333h117.717334c9.728 29.568 22.186667 57.429333 37.034666 83.114667l-99.584 99.584 60.330667 60.330666 90.368-90.368C350.037333 899.541333 427.264 938.666667 512 938.666667s161.962667-39.125333 220.8-102.869334l90.368 90.368 60.330667-60.330666-99.584-99.584c14.890667-25.685333 27.349333-53.546667 37.034666-83.114667H938.666667v-85.333333h-98.517334c2.816-21.034667 4.650667-42.496 4.650667-64.469334zM512 213.333333c94.762667 0 177.109333 69.290667 218.709333 170.666667H293.290667C334.890667 282.624 417.237333 213.333333 512 213.333333z m42.666667 634.88V554.666667h-85.333334v293.546666c-116.181333-26.24-204.8-157.312-204.8-314.88 0-21.930667 1.706667-43.306667 4.992-64h484.906667c3.285333 20.693333 4.992 42.069333 4.992 64 0.042667 157.610667-88.576 288.64-204.757333 314.88z" p-id="3863"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/build.svg b/src/assets/icons/build.svg
new file mode 100644
index 0000000..97c4688
--- /dev/null
+++ b/src/assets/icons/build.svg
@@ -0,0 +1 @@
+<?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="1568899741379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768S960 367.68 960 367.424V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32v-271.04c0-0.288 0.16-0.512 0.16-0.768S960 591.68 960 591.424z m-560-31.232v-160H608v160h-208z m208 64V832h-208v-207.808H608z m-480-224h208v160H128v-160z m544 0h224v160h-224v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128v-207.808zM672 832v-207.808h224V832h-224z" p-id="2055"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/button.svg b/src/assets/icons/button.svg
new file mode 100644
index 0000000..ef85344
--- /dev/null
+++ b/src/assets/icons/button.svg
@@ -0,0 +1 @@
+<?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="1608878284166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4753" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M213.333333 160c-4.821333 0-9.472 0.64-13.824 1.792a32 32 0 0 1-16.554666-61.824c9.728-2.56 19.925333-3.968 30.378666-3.968h33.194667a32 32 0 0 1 0 64H213.333333zM347.264 128a32 32 0 0 1 32-32h66.346667a32 32 0 1 1 0 64H379.306667a32 32 0 0 1-32-32z m199.125333 0a32 32 0 0 1 32-32h66.346667a32 32 0 0 1 0 64h-66.346667a32 32 0 0 1-32-32z m199.082667 0a32 32 0 0 1 32-32H810.666667c10.453333 0 20.650667 1.365333 30.378666 3.968a32 32 0 1 1-16.554666 61.866667A53.418667 53.418667 0 0 0 810.666667 160h-33.194667a32 32 0 0 1-32-32z m-606.293333 32.341333a32 32 0 0 1 22.613333 39.168A53.461333 53.461333 0 0 0 160 213.333333v33.194667a32 32 0 0 1-64 0V213.333333c0-10.453333 1.365333-20.650667 3.968-30.378666a32 32 0 0 1 39.168-22.613334z m745.685333 0a32 32 0 0 1 39.168 22.613334c2.56 9.728 3.968 19.925333 3.968 30.378666v33.194667a32 32 0 0 1-64 0V213.333333c0-4.821333-0.64-9.472-1.792-13.824a32 32 0 0 1 22.613333-39.168zM128 347.221333a32 32 0 0 1 32 32v66.389334a32 32 0 1 1-64 0V379.306667a32 32 0 0 1 32-32z m768 0a32 32 0 0 1 32 32v66.389334a32 32 0 1 1-64 0V379.306667a32 32 0 0 1 32-32zM128 546.432a32 32 0 0 1 32 32v66.346667a32 32 0 0 1-64 0v-66.346667a32 32 0 0 1 32-32z m768 0a32 32 0 0 1 32 32v66.346667a32 32 0 0 1-64 0v-66.346667a32 32 0 0 1 32-32z m0 199.082667a32 32 0 0 1 32 32V810.666667c0 10.453333-1.365333 20.650667-3.968 30.378666a32 32 0 1 1-61.866667-16.554666c1.194667-4.352 1.834667-8.96 1.834667-13.824v-33.194667a32 32 0 0 1 32-32z m-768 0a32 32 0 0 1 32 32V810.666667c0 4.821333 0.64 9.472 1.792 13.824a32 32 0 0 1-61.824 16.512A117.461333 117.461333 0 0 1 96 810.666667v-33.194667a32 32 0 0 1 32-32z m32.341333 139.392a32 32 0 0 1 39.168-22.656c4.352 1.152 8.96 1.792 13.824 1.792h33.194667a32 32 0 0 1 0 64H213.333333c-10.453333 0-20.650667-1.365333-30.378666-3.968a32 32 0 0 1-22.613334-39.168z m703.317334 0a32 32 0 0 1-22.613334 39.168c-9.728 2.56-19.925333 3.968-30.378666 3.968h-33.194667a32 32 0 0 1 0-64H810.666667c4.821333 0 9.472-0.64 13.824-1.792a32 32 0 0 1 39.168 22.613333zM347.306667 896a32 32 0 0 1 32-32h66.346666a32 32 0 1 1 0 64H379.306667a32 32 0 0 1-32-32z m199.125333 0a32 32 0 0 1 32-32h66.346667a32 32 0 0 1 0 64h-66.346667a32 32 0 0 1-32-32zM266.666667 512A117.333333 117.333333 0 0 1 384 394.666667h256a117.333333 117.333333 0 1 1 0 234.666666H384A117.333333 117.333333 0 0 1 266.666667 512zM384 458.666667a53.333333 53.333333 0 1 0 0 106.666666h256a53.333333 53.333333 0 1 0 0-106.666666H384z" p-id="4754"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bxAnalyse.svg b/src/assets/icons/bxAnalyse.svg
new file mode 100644
index 0000000..b02a8d6
--- /dev/null
+++ b/src/assets/icons/bxAnalyse.svg
@@ -0,0 +1 @@
+<?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
diff --git a/src/assets/icons/cascader.svg b/src/assets/icons/cascader.svg
new file mode 100644
index 0000000..e256024
--- /dev/null
+++ b/src/assets/icons/cascader.svg
@@ -0,0 +1 @@
+<?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="1576153230908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="971" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M772.87036133 734.06115723c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714843H475.90991211c-56.60705567 0-102.66723633-46.06018067-102.66723633-102.66723633V600.82446289h305.859375c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012S827.9942627 467.50537109 772.87036133 467.50537109c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714844H373.24267578V401.01062011h321.92687989c55.12390137 0 99.94812012-44.82421875 99.94812011-99.94812011V190.07312011C795.11767578 134.94921875 750.29345703 90.125 695.16955567 90.125H251.12963867C196.0057373 90.125 151.18151855 134.94921875 151.18151855 190.07312011V301.0625c0 55.12390137 44.82421875 99.94812012 99.94812012 99.94812012h55.53588867v296.96044921c0 93.35632325 75.97045898 169.32678223 169.32678224 169.32678223h203.19213866c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012s-44.90661622-99.86572266-100.03051758-99.86572265z m0-199.89624024c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857423s-14.91394043 33.28857422-33.28857422 33.28857421-33.28857422-14.91394043-33.28857422-33.28857421 14.91394043-33.28857422 33.28857422-33.28857422zM217.75866699 301.0625V190.07312011c0-18.37463379 14.91394043-33.28857422 33.28857423-33.28857421h444.03991698c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857422V301.0625c0 18.37463379-14.91394043 33.28857422-33.28857422 33.28857422H251.12963867c-18.37463379 0-33.37097168-14.91394043-33.37097168-33.28857422z m555.11169434 566.23535156c-18.37463379 0-33.28857422-14.91394043-33.28857422-33.28857422 0-18.37463379 14.91394043-33.28857422 33.28857422-33.28857422s33.28857422 14.91394043 33.28857422 33.28857422c0.08239747 18.29223633-14.91394043 33.28857422-33.28857422 33.28857422z" p-id="972"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/chart.svg b/src/assets/icons/chart.svg
new file mode 100644
index 0000000..750d377
--- /dev/null
+++ b/src/assets/icons/chart.svg
@@ -0,0 +1 @@
+<?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="1608878489551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5535" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" fill="#595959" p-id="5536"></path><path d="M272 728h536c4.4 0 8-3.6 8-8V284c0-7.2-8.7-10.7-13.7-5.7L592 488.6l-125.4-124c-3.1-3.1-8.2-3.1-11.3 0l-189 189.6c-1.5 1.5-2.3 3.5-2.3 5.6V720c0 4.4 3.6 8 8 8z" p-id="5537"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/checkbox.svg b/src/assets/icons/checkbox.svg
new file mode 100644
index 0000000..013fd3a
--- /dev/null
+++ b/src/assets/icons/checkbox.svg
@@ -0,0 +1 @@
+<?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="1575982282951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M828.40625 90.125H195.59375C137.375 90.125 90.125 137.375 90.125 195.59375v632.8125c0 58.21875 47.25 105.46875 105.46875 105.46875h632.8125c58.21875 0 105.46875-47.25 105.46875-105.46875V195.59375c0-58.21875-47.25-105.46875-105.46875-105.46875z m52.734375 738.28125c0 29.16-23.57015625 52.734375-52.734375 52.734375H195.59375c-29.109375 0-52.734375-23.574375-52.734375-52.734375V195.59375c0-29.109375 23.625-52.734375 52.734375-52.734375h632.8125c29.16 0 52.734375 23.625 52.734375 52.734375v632.8125z" p-id="903"></path><path d="M421.52890625 709.55984375a36.28125 36.28125 0 0 1-27.55265625-12.66890625L205.17453125 476.613125a36.28546875 36.28546875 0 0 1 55.10109375-47.22890625l164.986875 192.4846875 342.16171875-298.48078125a36.2896875 36.2896875 0 0 1 47.70984375 54.68765625L445.3859375 700.6203125a36.3234375 36.3234375 0 0 1-23.85703125 8.93953125z" p-id="904"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/clipboard.svg b/src/assets/icons/clipboard.svg
new file mode 100644
index 0000000..2f290c6
--- /dev/null
+++ b/src/assets/icons/clipboard.svg
@@ -0,0 +1 @@
+<?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="1608880266404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7147" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M438.857143 950.857143h512V585.142857h-237.714286a54.857143 54.857143 0 0 1-54.857143-54.857143V292.571429h-219.428571v658.285714z m146.285714-822.857143v-36.571429c0-9.728-8.557714-18.285714-18.285714-18.285714h-402.285714c-9.728 0-18.285714 8.557714-18.285715 18.285714v36.571429c0 9.728 8.557714 18.285714 18.285715 18.285714h402.285714c9.728 0 18.285714-8.557714 18.285714-18.285714zM731.428571 512h170.861715L731.428571 341.138286V512z m292.571429 73.142857v384a54.857143 54.857143 0 0 1-54.857143 54.857143h-548.571428a54.857143 54.857143 0 0 1-54.857143-54.857143V877.714286H54.857143A54.857143 54.857143 0 0 1 0 822.857143v-768A54.857143 54.857143 0 0 1 54.857143 0h621.714286A54.857143 54.857143 0 0 1 731.428571 54.857143v187.428571c7.424 4.571429 14.299429 9.728 20.553143 15.981715l233.142857 233.142857c21.723429 21.723429 38.838857 63.414857 38.838858 93.696z" p-id="7148"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/code.svg b/src/assets/icons/code.svg
new file mode 100644
index 0000000..5f9c5ab
--- /dev/null
+++ b/src/assets/icons/code.svg
@@ -0,0 +1 @@
+<?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="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" p-id="2423"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/color.svg b/src/assets/icons/color.svg
new file mode 100644
index 0000000..44a81aa
--- /dev/null
+++ b/src/assets/icons/color.svg
@@ -0,0 +1 @@
+<?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="1577252187056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M747.59340925 691.12859384c11.51396329 0.25305413 22.43746719-0.21087818 40.74171707-1.51832482 29.35428085-2.10878421 35.84933734-2.36183835 46.47761114-0.8856895 24.71495444 3.37405491 41.12129828 21.76265671 32.47528161 47.95376084-85.57447632 258.19957947-442.00123984 249.76444099-628.67084683 50.73735554-153.47733892-159.33976008-153.09775772-414.41833795 0.92786545-573.42069196 159.71934128-162.67163983 424.03439521-166.59397897 565.78689185 0.63263534 80.38686649 94.81095318 108.34934958 169.16669549 89.11723508 230.57450162-15.01454608 47.99593598-50.61082928 77.68762207-119.77896259 114.63352789-4.89237973 2.65706845-29.35428085 15.52065436-35.84933652 19.02123633-46.94154346 25.30541465-63.51659033 41.20565021-62.20914449 58.45550757 2.95229856 39.13904114 24.16667102 52.7196135 70.98168823 53.81618115z m44.41100207 50.10472101c-19.82257471 1.43397372-32.05352527 1.940082-45.63409763 1.6448519-70.34905207-1.60267593-115.98314969-30.91478165-121.38163769-101.64341492-3.45840683-46.05585397 24.7571304-73.13264758 89.24376132-107.96976837 6.7902866-3.66928501 31.37871396-16.57504688 36.06021551-19.06341229 57.69634516-30.83042972 85.15271997-53.73183005 94.76877722-84.47790866 12.77923398-40.78389304-9.10994898-98.94417051-79.24812286-181.6507002-121.17075953-142.97559219-350.14258521-139.60153647-489.2380134 2.06660824-134.49827774 138.84237405-134.79350784 362.12048163-0.42175717 501.637667 158.53842169 168.99799328 451.9968783 181.18676788 534.57688175-11.80919339-4.68150156 0.2952301-10.71262573 0.67481131-18.72600705 1.26527069z" p-id="2509"></path><path d="M346.03865637 637.18588562a78.82636652 78.82636652 0 0 0 78.32025825-79.29029883c0-43.69401562-35.005823-79.29029883-78.32025825-79.29029882a78.82636652 78.82636652 0 0 0-78.36243338 79.29029882c0 43.69401562 35.005823 79.29029883 78.36243338 79.29029883z m0-51.7495729a27.07679361 27.07679361 0 0 1-26.5706845-27.54072593c0-15.30977536 11.97789643-27.54072593 26.5706845-27.54072592 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072592a27.07679361 27.07679361 0 0 1-26.57068533 27.54072593zM475.7289063 807.11174353a78.82636652 78.82636652 0 0 0 78.3624334-79.29029882c0-43.69401562-34.96364785-79.29029883-78.32025825-79.29029883a78.82636652 78.82636652 0 0 0-78.32025742 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029882z m0-51.74957208a27.07679361 27.07679361 0 0 1-26.57068532-27.54072674c0-15.30977536 12.06224753-27.54072593 26.57068532-27.54072593 14.59278892 0 26.57068533 12.23095057 26.57068453 27.54072593a27.07679361 27.07679361 0 0 1-26.57068453 27.54072674zM601.24376214 377.21492718a78.82636652 78.82636652 0 0 0 78.32025742-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025742-79.29029882a78.82636652 78.82636652 0 0 0-78.32025823 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025824 79.29029883z m1e-8-51.74957208a27.07679361 27.07679361 0 0 1-26.57068534-27.54072675c0-15.30977536 11.97789643-27.54072593 26.57068534-27.54072591 14.55061295 0 26.57068533 12.23095057 26.57068451 27.54072592a27.07679361 27.07679361 0 0 1-26.57068451 27.54072674zM378.80916809 433.85687983a78.82636652 78.82636652 0 0 0 78.32025824-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025824-79.29029802a78.82636652 78.82636652 0 0 0-78.32025742 79.29029802c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029883z m0-51.74957209a27.07679361 27.07679361 0 0 1-26.57068451-27.54072674c0-15.30977536 11.97789643-27.54072593 26.57068451-27.54072593 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072593a27.07679361 27.07679361 0 0 1-26.57068533 27.54072674z" p-id="2510"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/component.svg b/src/assets/icons/component.svg
new file mode 100644
index 0000000..29c3458
--- /dev/null
+++ b/src/assets/icons/component.svg
@@ -0,0 +1 @@
+<?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="1575804206892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M826.56 470.016c-32.896 0-64.384 12.288-89.984 35.52l0-104.96c0-62.208-50.496-112.832-112.64-113.088L623.936 287.04 519.552 287.104C541.824 262.72 554.56 230.72 554.56 197.12c0-73.536-59.904-133.44-133.504-133.44-73.472 0-133.376 59.904-133.376 133.44 0 32.896 12.224 64.256 35.52 89.984L175.232 287.104l0 0.576C113.728 288.704 64 338.88 64 400.576l0.32 0 0.32 116.48C60.864 544.896 70.592 577.728 100.8 588.48c12.736 4.608 37.632 7.488 60.864-25.28 12.992-18.368 34.24-29.248 56.64-29.248 38.336 0 69.504 31.104 69.504 69.312 0 38.4-31.168 69.504-69.504 69.504-22.656 0-44.032-11.264-57.344-30.4C138.688 610.112 112.576 615.36 102.464 619.136c-29.824 10.752-39.104 43.776-38.144 67.392l0 160.384L64 846.912C64 909.248 114.752 960 177.216 960l446.272 0c62.4 0 113.152-50.752 113.152-113.152l0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.536 0 133.44-59.904 133.44-133.504C960 529.92 900.096 470.016 826.56 470.016zM826.56 672.896c-22.72 0-44.032-11.264-57.344-30.4-22.272-32.384-48.448-27.136-58.56-23.36-29.824 10.752-39.04 43.776-38.08 67.392l0 160.384c0 27.136-22.016 49.152-49.152 49.152L177.216 896.064C150.08 896 128 873.984 128 846.848l0.32 0 0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.6 0 133.504-59.904 133.504-133.504 0-73.472-59.904-133.376-133.504-133.376-32.896 0-64.32 12.288-89.984 35.52l0-104.96L128 400.512c0-27.072 22.08-49.152 49.216-49.152L177.216 351.04 334.656 350.72c3.776 0.512 7.616 0.832 11.52 0.832 24.896 0 50.752-10.816 60.032-37.056 4.544-12.736 7.424-37.568-25.344-60.736C362.624 240.768 351.68 219.52 351.68 197.12c0-38.272 31.104-69.44 69.376-69.44 38.336 0 69.504 31.168 69.504 69.44 0 22.72-11.264 44.032-30.528 57.472C427.968 276.736 433.088 302.784 436.8 313.024c10.752 29.888 43.072 39.232 67.392 38.08l119.232 0 0 0.384c27.136 0 49.152 22.08 49.152 49.152l0.256 116.48c-3.776 27.84 6.016 60.736 36.224 71.488 12.736 4.608 37.632 7.488 60.8-25.28 13.056-18.368 34.24-29.248 56.704-29.248C864.832 534.016 896 565.12 896 603.392 896 641.728 864.832 672.896 826.56 672.896z" p-id="3146"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dashboard.svg b/src/assets/icons/dashboard.svg
new file mode 100644
index 0000000..79065e6
--- /dev/null
+++ b/src/assets/icons/dashboard.svg
@@ -0,0 +1 @@
+<?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="1607776664012" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14772" xmlns:xlink="http://www.w3.org/1999/xlink" width="64.4375" height="64"><defs><style type="text/css"></style></defs><path d="M514.60052 137C229.50052 137.5-0.39948 368.2 0.00052 653.3 0.10052 729.2 16.60052 801.2 46.20052 866c8.5 18.7 18.2 36.9 28.8 54.3 2.9 4.8 8.1 7.7 13.7 7.7h853.7c5.6 0 10.8-2.9 13.7-7.7 10.6-17.5 20.3-35.6 28.8-54.3 29.6-65 46.2-137.4 46.2-213.5-0.1-285-231.4-516-516.5-515.5z m416.9 691.2c-5.5 12.9-11.5 25.5-18.1 37.8H117.50052c-6.6-12.3-12.6-24.9-18.1-37.8C75.90052 772.6 64.00052 713.5 64.00052 652.5c0-61 11.9-120.1 35.5-175.7 22.7-53.8 55.3-102 96.8-143.5s89.8-74 143.5-96.8C395.40052 213 454.50052 201 515.50052 201s120.1 11.9 175.7 35.5c53.8 22.7 102.1 55.3 143.5 96.8 41.5 41.5 74 89.8 96.8 143.5C955.00052 532.4 967.00052 591.5 967.00052 652.5c0 61-11.9 120.1-35.5 175.7z" p-id="14773" ></path><path d="M623.90052 507.6c-76.2 163.5-100.7 191.2-103.3 193.8-12.1 12.1-28.2 18.7-45.3 18.7s-33.2-6.7-45.3-18.7c-25-25-25-65.6 0-90.5 2.7-2.5 30.4-27.1 193.9-103.3z m0.3-64.2c-8.9 0-18.2 1.9-27.4 6.2-88 41-186 90-212 116-50 50-50 131 0 181 25 25 57.8 37.5 90.5 37.5s65.5-12.5 90.5-37.5c26-26 75-124 116-212 21-44.9-14.1-91.2-57.6-91.2z" p-id="14774"></path><path d="M514.90052 257c-219.1 0.3-398.5 182.2-395.9 401.3 0.3 29.2 3.9 57.7 10.2 85.1 3.3 14.4 16.3 24.6 31.1 24.6 20.6 0 35.8-19.1 31.2-39.2-5.7-24.5-8.5-49.7-8.5-75.3 0-44.9 8.8-88.5 26.1-129.4 16.8-39.6 40.7-75.2 71.3-105.7 30.5-30.6 66.1-54.5 105.7-71.3 41-17.3 84.5-26.1 129.4-26.1s88.5 8.8 129.4 26.1c39.6 16.8 75.2 40.7 105.7 71.3 30.6 30.5 54.5 66.1 71.3 105.7 17.3 41 26.1 84.5 26.1 129.4 0 25.6-2.9 50.8-8.5 75.3-4.6 20 10.6 39.2 31.2 39.2 14.9 0 27.8-10.3 31.2-24.8 6.7-28.8 10.2-58.8 10.2-89.7C912.00052 434.3 734.20052 256.7 514.90052 257z" p-id="14775"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/date.svg b/src/assets/icons/date.svg
new file mode 100644
index 0000000..52dc73e
--- /dev/null
+++ b/src/assets/icons/date.svg
@@ -0,0 +1 @@
+<?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="1577186573535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1068" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M479.85714249 608.42857168h64.28571502c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285751s-12.85714249-32.14285751-32.14285664-32.14285664h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285662s12.85714249 32.14285751 32.14285664 32.14285753z m-2e-8 122.14285665h64.28571504c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285665s-12.85714249-32.14285751-32.14285664-32.14285751h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285751s12.85714249 32.14285751 32.14285664 32.14285664z m353.57142921-559.28571416h-128.57142921v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285664-32.14285753s-32.14285751 12.85714249-32.14285751 32.14285753v32.14285664h-257.14285665v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285752-32.14285753s-32.14285751 12.85714249-32.14285664 32.14285753v32.14285664h-128.57142919c-70.71428585 0-128.57142832 57.85714249-128.57142832 122.14285751v501.42857081c0 70.71428585 57.85714249 128.57142832 128.57142832 122.14285751h642.85714335c70.71428585 0 128.57142832-57.85714249 128.57142833-122.14285751v-501.42857081c0-70.71428585-57.85714249-122.14285753-128.57142833-122.14285751z m64.28571415 623.57142832c0 32.14285751-32.14285751 64.28571415-64.28571416 64.28571504h-642.85714335c-32.14285751 0-64.28571415-25.71428583-64.28571417-64.28571504v-372.85714249h771.42857168v372.85714249z m0-437.14285664h-771.42857168v-64.28571417c0-32.14285751 32.14285751-64.28571415 64.28571417-64.28571415h128.57142919v32.14285664c0 19.28571417 12.85714249 32.14285751 32.14285664 32.14285751s32.14285751-12.85714249 32.14285753-32.14285751v-32.14285664h257.14285665v32.14285664c0 19.28571417 12.85714249 32.14285751 32.1428575 32.14285751s32.14285751-12.85714249 32.14285664-32.14285751v-32.14285664h128.57142921c32.14285751 0 64.28571415 25.71428583 64.28571415 64.28571415v64.28571417z m-610.71428583 372.85714247h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285664s-12.85714249-32.14285751-32.14285753-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285751s12.85714249 32.14285751 32.14285751 32.14285665z m385.71428583-122.14285664h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285751s-12.85714249-32.14285751-32.14285751-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285664s12.85714249 32.14285751 32.14285753 32.14285751z m-385.71428583 0h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285751s-12.85714249-32.14285751-32.14285753-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285664s12.85714249 32.14285751 32.14285751 32.14285751z m385.71428583 122.14285665h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285665s-12.85714249-32.14285751-32.14285751-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285751s12.85714249 32.14285751 32.14285753 32.14285665z" p-id="1069"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dateRange.svg b/src/assets/icons/dateRange.svg
new file mode 100644
index 0000000..fda571e
--- /dev/null
+++ b/src/assets/icons/dateRange.svg
@@ -0,0 +1 @@
+<?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="1579774833889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1376" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M887.466667 192.853333h-100.693334V119.466667c0-10.24-6.826667-17.066667-17.066666-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H303.786667V119.466667c0-10.24-6.826667-17.066667-17.066667-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H168.96c-46.08 0-85.333333 37.546667-85.333333 85.333334V836.266667c0 46.08 37.546667 85.333333 85.333333 85.333333H887.466667c46.08 0 85.333333-37.546667 85.333333-85.333333V278.186667c0-47.786667-37.546667-85.333333-85.333333-85.333334z m-718.506667 34.133334h100.693333v66.56c0 10.24 6.826667 17.066667 17.066667 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56h450.56v66.56c0 10.24 6.826667 17.066667 17.066666 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56H887.466667c27.306667 0 51.2 22.186667 51.2 51.2v88.746666H117.76v-88.746666c0-29.013333 22.186667-51.2 51.2-51.2zM887.466667 887.466667H168.96c-27.306667 0-51.2-22.186667-51.2-51.2V401.066667H938.666667V836.266667c0 27.306667-22.186667 51.2-51.2 51.2z" p-id="1377"></path><path d="M858.453333 493.226667H327.68c-10.24 0-17.066667 6.826667-17.066667 17.066666v114.346667h-116.053333c-10.24 0-17.066667 6.826667-17.066667 17.066667v133.12c0 10.24 6.826667 17.066667 17.066667 17.066666H460.8c10.24 0 17.066667-6.826667 17.066667-17.066666v-114.346667h380.586666c10.24 0 17.066667-6.826667 17.066667-17.066667v-133.12c0-10.24-6.826667-17.066667-17.066667-17.066666z m-413.013333 34.133333v97.28h-98.986667v-97.28h98.986667z m-230.4 131.413333h98.986667v98.986667h-98.986667v-98.986667z m131.413333 97.28v-97.28h98.986667v97.28h-98.986667z m133.12-228.693333h97.28v98.986667h-97.28v-98.986667z m131.413334 0h98.986666v98.986667h-98.986666v-98.986667z m230.4 97.28h-98.986667v-98.986667h98.986667v98.986667z" p-id="1378"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dict.svg b/src/assets/icons/dict.svg
new file mode 100644
index 0000000..4849377
--- /dev/null
+++ b/src/assets/icons/dict.svg
@@ -0,0 +1 @@
+<?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="1566035680909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3601" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1002.0848 744.672l-33.568 10.368c0.96 7.264 2.144 14.304 2.144 21.76 0 7.328-1.184 14.432-2.368 21.568l33.792 10.56c7.936 2.24 14.496 7.616 18.336 14.752 3.84 7.328 4.672 15.808 1.952 23.552-5.376 16-23.168 24.672-39.936 19.68l-34.176-10.624c-7.136 12.8-15.776 24.672-26.208 35.2l20.8 27.488a28.96 28.96 0 0 1 5.824 22.816 29.696 29.696 0 0 1-12.704 19.616 32.544 32.544 0 0 1-44.416-6.752l-20.8-27.552c-13.696 6.56-28.192 11.2-43.008 13.888v33.632c0 16.736-14.112 30.432-31.648 30.432-17.6 0-31.872-13.696-31.872-30.432v-33.632a167.616 167.616 0 0 1-42.88-13.888l-20.928 27.552c-10.72 13.76-30.08 16.64-44.288 6.752a29.632 29.632 0 0 1-12.704-19.616 29.28 29.28 0 0 1 5.696-22.816l20.896-27.808a166.72 166.72 0 0 1-27.008-34.688l-33.376 10.432c-16.8 5.184-34.56-3.552-39.936-19.616a29.824 29.824 0 0 1 20.224-38.24l33.472-10.432c-0.8-7.264-2.016-14.304-2.016-21.824 0-7.36 1.184-14.496 2.304-21.632l-33.792-10.368c-16.672-5.376-25.632-22.496-20.224-38.432 5.376-16 23.136-24.672 39.936-19.68l34.016 10.752c7.328-12.672 15.84-24.8 26.336-35.328l-20.8-27.552a29.44 29.44 0 0 1 6.944-42.432 32.704 32.704 0 0 1 44.384 6.752l20.832 27.616c13.696-6.432 28.224-11.2 43.104-13.952v-33.568c0-16.736 14.048-30.432 31.648-30.432 17.536 0 31.808 13.568 31.808 30.432v33.504c15.072 2.688 29.344 7.808 42.848 14.016l20.992-27.616a32.48 32.48 0 0 1 44.224-6.752 29.568 29.568 0 0 1 7.136 42.432l-21.024 27.808c10.432 10.432 19.872 21.888 27.04 34.752l33.376-10.432c16.768-5.12 34.56 3.68 39.936 19.68 5.536 15.936-3.712 33.056-20.32 38.304z m-206.016-74.432c-61.344 0-111.136 47.808-111.136 106.56 0 58.88 49.792 106.496 111.136 106.496 61.312 0 111.104-47.616 111.104-106.496 0-58.752-49.792-106.56-111.104-106.56z" p-id="3602"></path><path d="M802.7888 57.152h-76.448c0-22.08-21.024-38.24-42.848-38.24H39.3968a39.68 39.68 0 0 0-39.36 40.032v795.616s41.888 120.192 110.752 120.192H673.2848a227.488 227.488 0 0 1-107.04-97.44H117.6368s-40.608-13.696-40.608-41.248l470.304-0.256 1.664 3.36a227.68 227.68 0 0 1-12.64-73.632c0-60.576 24-118.624 66.88-161.44a228.352 228.352 0 0 1 123.552-63.392l-3.2 0.288 2.144-424.672h38.208l0.576 421.024c27.04 0 52.672 4.8 76.64 13.344V101.536c0.032 0-6.304-44.384-38.368-44.384zM149.7648 514.336H72.3888v-77.408H149.7648v77.408z m0-144.32H72.3888v-77.44H149.7648v77.44z m0-137.248H72.3888v-77.44H149.7648v77.44z m501.856 281.568H206.0848v-77.408h445.536v77.408z m0-144.32H206.0848v-77.44h445.536v77.44z m0-137.248H206.0848v-77.44h445.536v77.44z" p-id="3603"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/documentation.svg b/src/assets/icons/documentation.svg
new file mode 100644
index 0000000..ecf1bfe
--- /dev/null
+++ b/src/assets/icons/documentation.svg
@@ -0,0 +1 @@
+<?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="1608880429330" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7479" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M575.071927 358.559828H925.850762L575.071927 77.615662v280.944166zM128.650825 0.999609h510.20125l382.648941 306.480188v612.960375c0 27.093583-13.434967 53.076905-37.357515 72.238906-23.922548 19.162001-56.359766 29.921157-90.194794 29.921156H128.650825c-33.835029 0-66.272247-10.759156-90.194795-29.921156-23.922548-19.162001-37.357515-45.145322-37.357515-72.238906V103.159672C1.098515 46.464431 57.849668 0.999609 128.650825 0.999609z m573.981399 817.2805V716.120047h-573.981399v102.160062h573.981399z m191.316483-204.320125V511.799922H128.650825v102.160062h765.297882z" p-id="7480"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
new file mode 100644
index 0000000..c896951
--- /dev/null
+++ b/src/assets/icons/download.svg
@@ -0,0 +1 @@
+<?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="1569915748289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z" fill="#333333" p-id="3063"></path><path d="M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z" fill="#333333" p-id="3064"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/drag.svg b/src/assets/icons/drag.svg
new file mode 100644
index 0000000..0a5460b
--- /dev/null
+++ b/src/assets/icons/drag.svg
@@ -0,0 +1 @@
+<?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="1608880604126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8263" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M608.492308 675.446154c0 35.446154-43.323077 49.230769-63.015385 19.692308l-39.384615-84.676924c-21.661538-37.415385-68.923077-45.292308-104.369231-21.661538l-25.6 19.692308 131.938461 313.107692c5.907692 13.784615 19.692308 21.661538 35.446154 21.661538h346.584616c17.723077 0 31.507692-11.815385 35.446154-27.56923l61.046153-218.584616c15.753846-61.046154-19.692308-120.123077-74.830769-141.784615l-157.538461-53.169231c-222.523077-80.738462-149.661538 165.415385-145.723077 173.292308zM35.446154 561.230769h114.215384v114.215385H35.446154zM283.569231 78.769231h114.215384v114.215384h-114.215384z m0 748.307692h114.215384v114.215385h-114.215384zM35.446154 311.138462h114.215384v114.215384H35.446154z m0-230.4h114.215384v114.215384H35.446154zM533.661538 78.769231h114.215385v114.215384h-114.215385z m250.092308 0h114.215385v114.215384h-114.215385z m-748.307692 750.276923h114.215384v114.215384H35.446154z m748.307692-498.215385h114.215385v114.215385h-114.215385z" p-id="8264"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/druid.svg b/src/assets/icons/druid.svg
new file mode 100644
index 0000000..a2b4b4e
--- /dev/null
+++ b/src/assets/icons/druid.svg
@@ -0,0 +1 @@
+<?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="1566036347051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 128H192a64.19 64.19 0 0 0-64 64v640a64.19 64.19 0 0 0 64 64h640a64.19 64.19 0 0 0 64-64V192a64.19 64.19 0 0 0-64-64z m0 703.89l-0.11 0.11H192.11l-0.11-0.11V768h640zM832 544H720L605.6 696.54 442.18 435.07 333.25 544H192v-64h114.75l147.07-147.07L610.4 583.46 688 480h144z m0-288H192v-63.89l0.11-0.11h639.78l0.11 0.11z" p-id="5854"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000..e3cc776
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1 @@
+<?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="1607776224397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7871" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M749.381818 923.927273H204.8c-74.472727 0-137.309091-62.836364-137.309091-134.981818V249.018182c0-74.472727 60.509091-134.981818 137.309091-134.981818h337.454545c18.618182 0 34.909091 16.290909 34.909091 34.909091s-16.290909 34.909091-34.909091 34.90909H204.8c-37.236364 0-69.818182 30.254545-69.818182 67.49091V791.272727c0 34.909091 32.581818 67.490909 69.818182 67.490909h542.254545c37.236364 0 69.818182-30.254545 69.818182-67.490909V381.672727c0-18.618182 16.290909-34.909091 34.909091-34.909091s34.909091 16.290909 34.909091 34.909091v407.272728c-2.327273 74.472727-62.836364 134.981818-137.309091 134.981818z" p-id="7872"></path><path d="M716.8 781.963636H242.036364c-18.618182 0-34.909091-16.290909-34.909091-34.909091s16.290909-34.909091 34.909091-34.90909h474.763636c18.618182 0 34.909091 16.290909 34.909091 34.90909s-16.290909 34.909091-34.909091 34.909091zM781.963636 325.818182l-162.909091-160.581818 90.763637-90.763637c44.218182-44.218182 118.690909-44.218182 162.909091 0 23.272727 20.945455 34.909091 48.872727 34.909091 79.127273 0 30.254545-11.636364 58.181818-34.909091 81.454545L781.963636 325.818182z m-65.163636-162.909091l65.163636 65.163636L826.181818 186.181818c6.981818-9.309091 11.636364-18.618182 11.636364-32.581818s-4.654545-23.272727-13.963637-32.581818c-18.618182-18.618182-48.872727-18.618182-67.490909 0L716.8 162.909091z" p-id="7873"></path><path d="M342.109091 665.6c-18.618182 0-34.909091-6.981818-46.545455-20.945455-16.290909-16.290909-23.272727-41.890909-16.290909-62.836363l23.272728-90.763637c2.327273-6.981818 6.981818-18.618182 16.290909-27.927272L667.927273 116.363636l162.909091 160.581819-351.418182 349.090909c-9.309091 9.309091-18.618182 13.963636-27.927273 16.290909h-2.327273l-90.763636 20.945454c-6.981818 2.327273-11.636364 2.327273-16.290909 2.327273z m23.272727-153.6l-20.945454 86.109091 88.436363-20.945455 302.545455-297.890909-65.163637-65.163636L365.381818 512z" p-id="7874"></path><path d="M393.309091 458.472727l93.090909 90.763637-41.890909 39.563636-93.090909-90.763636z" p-id="7875"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/eyeOpen.svg b/src/assets/icons/eyeOpen.svg
new file mode 100644
index 0000000..88dcc98
--- /dev/null
+++ b/src/assets/icons/eyeOpen.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg
new file mode 100644
index 0000000..db0a0d4
--- /dev/null
+++ b/src/assets/icons/github.svg
@@ -0,0 +1 @@
+<?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="1581238998885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4187" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.542857 14.057143C228.914286 13.942857 0 242.742857 0 525.142857 0 748.457143 143.2 938.285714 342.628571 1008c26.857143 6.742857 22.742857-12.342857 22.742858-25.371429v-88.571428c-155.085714 18.171429-161.371429-84.457143-171.771429-101.6C172.571429 756.571429 122.857143 747.428571 137.714286 730.285714c35.314286-18.171429 71.314286 4.571429 113.028571 66.171429 30.171429 44.685714 89.028571 37.142857 118.857143 29.714286 6.514286-26.857143 20.457143-50.857143 39.657143-69.485715-160.685714-28.8-227.657143-126.857143-227.657143-243.428571 0-56.571429 18.628571-108.571429 55.2-150.514286-23.314286-69.142857 2.171429-128.342857 5.6-137.142857 66.4-5.942857 135.428571 47.542857 140.8 51.771429 37.714286-10.171429 80.8-15.542857 129.028571-15.542858 48.457143 0 91.657143 5.6 129.714286 15.885715 12.914286-9.828571 76.914286-55.771429 138.628572-50.171429 3.314286 8.8 28.228571 66.628571 6.285714 134.857143 37.028571 42.057143 55.885714 94.514286 55.885714 151.2 0 116.8-67.428571 214.971429-228.571428 243.314286a145.714286 145.714286 0 0 1 43.542857 104v128.571428c0.914286 10.285714 0 20.457143 17.142857 20.457143 202.4-68.228571 348.114286-259.428571 348.114286-484.685714 0-282.514286-229.028571-511.2-511.428572-511.2z" p-id="4188"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/guide.svg b/src/assets/icons/guide.svg
new file mode 100644
index 0000000..60195f7
--- /dev/null
+++ b/src/assets/icons/guide.svg
@@ -0,0 +1 @@
+<?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="1608832444108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6424" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M11.890619 560.841915l289.525612 129.392453 559.250499-523.687567-490.85963 564.544554 371.343547 149.824946c8.948712 3.398751 19.168956-1.3595 22.367781-10.899995v-0.67975L1023.646842 0.375862 10.61109 526.798424c-8.956709 4.774246-12.147536 15.666243-8.316944 25.198741 2.55906 4.086498 5.757884 7.493247 9.596473 8.852747z m357.276716 462.398088L513.610259 857.764808l-144.442924-62.648979v228.132171z" p-id="6425"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/input.svg b/src/assets/icons/input.svg
new file mode 100644
index 0000000..ab91381
--- /dev/null
+++ b/src/assets/icons/input.svg
@@ -0,0 +1 @@
+<?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="1575802859706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3102" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 224H128c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z m0 480c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32v384z" p-id="3103"></path><path d="M224 352c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V384c0-16-12.8-32-32-32z" p-id="3104"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/job.svg b/src/assets/icons/job.svg
new file mode 100644
index 0000000..2a93a25
--- /dev/null
+++ b/src/assets/icons/job.svg
@@ -0,0 +1 @@
+<?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="1566036191400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5472" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M934.912 1016.832H192c-14.336 0-25.6-11.264-25.6-25.6v-189.44c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v163.84h691.712V64H217.6v148.48c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6v-174.08c0-14.336 11.264-25.6 25.6-25.6h742.912c14.336 0 25.6 11.264 25.6 25.6v952.832c0 14.336-11.264 25.6-25.6 25.6z" p-id="5473"></path><path d="M232.96 371.2h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 540.16h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 698.88h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM574.464 762.88c-134.144 0-243.2-109.056-243.2-243.2S440.32 276.48 574.464 276.48s243.2 109.056 243.2 243.2-109.056 243.2-243.2 243.2z m0-435.2c-105.984 0-192 86.016-192 192S468.48 711.68 574.464 711.68s192-86.016 192-192S680.448 327.68 574.464 327.68z" p-id="5474"></path><path d="M663.04 545.28h-87.04c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h87.04c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z" p-id="5475"></path><path d="M576 545.28c-14.336 0-25.6-11.264-25.6-25.6v-87.04c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v87.04c0 14.336-11.264 25.6-25.6 25.6z" p-id="5476"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/log.svg b/src/assets/icons/log.svg
new file mode 100644
index 0000000..d879d33
--- /dev/null
+++ b/src/assets/icons/log.svg
@@ -0,0 +1 @@
+<?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="1566035943711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4805" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M208.736 566.336H64.384v59.328h144.352v-59.328z m0-336.096H165.44V74.592c0-7.968 4.896-14.848 10.464-14.848h502.016V0.448H175.936c-38.72 1.248-69.248 34.368-68.192 74.144v155.648H64.384V289.6h144.352V230.24z m0 168.096H64.384v59.328h144.352v-59.328z m714.656 76.576h-57.76v474.496c0 7.936-4.896 14.848-10.464 14.848H175.936c-5.568 0-10.464-6.912-10.464-14.848v-155.68h43.296v-59.296H64.384v59.296h43.328v155.68c-1.024 39.776 29.472 72.896 68.192 74.144h679.232c38.72-1.184 69.248-34.368 68.256-74.144V474.912z m14.944-290.336l-83.072-85.312a71.264 71.264 0 0 0-52.544-21.728 71.52 71.52 0 0 0-51.616 23.872L386.528 507.264a30.496 30.496 0 0 0-6.176 10.72L308.16 740.512a30.016 30.016 0 0 0 6.976 30.24c7.712 7.968 19.2 10.752 29.568 7.2l216.544-74.112a28.736 28.736 0 0 0 12.128-7.936L940.448 287.456a75.552 75.552 0 0 0-2.112-102.88z m-557.12 518.272l39.104-120.64 78.336 80.416-117.44 40.224z m170.048-70.016l-103.552-106.016 200.16-222.4 103.52 106.304-200.128 222.112zM897.952 247.072l-0.256 0.224-107.136 119.168-103.52-106.528 106.432-118.624a14.144 14.144 0 0 1 10.304-4.736 13.44 13.44 0 0 1 10.464 4.288l83.264 85.696c5.472 5.6 5.664 14.72 0.448 20.512z" p-id="4806"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/logininfor.svg b/src/assets/icons/logininfor.svg
new file mode 100644
index 0000000..267f844
--- /dev/null
+++ b/src/assets/icons/logininfor.svg
@@ -0,0 +1 @@
+<?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="1566036016814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5261" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 128h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h42.666666v640H170.666667V213.333333h42.666666a42.666667 42.666667 0 0 0 0-85.333333H128a42.666667 42.666667 0 0 0-42.666667 42.666667v725.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" p-id="5262"></path><path d="M341.333333 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666666 42.666667zM512 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM682.666667 298.666667a42.666667 42.666667 0 0 0 42.666666-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM341.333333 768a42.666667 42.666667 0 0 0 42.666667-42.666667 128 128 0 0 1 256 0 42.666667 42.666667 0 0 0 85.333333 0 213.333333 213.333333 0 0 0-107.52-184.32A128 128 0 0 0 640 469.333333a128 128 0 0 0-256 0 128 128 0 0 0 22.186667 71.68A213.333333 213.333333 0 0 0 298.666667 725.333333a42.666667 42.666667 0 0 0 42.666666 42.666667z m128-298.666667a42.666667 42.666667 0 1 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667z" p-id="5263"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/message.svg b/src/assets/icons/message.svg
new file mode 100644
index 0000000..74986f3
--- /dev/null
+++ b/src/assets/icons/message.svg
@@ -0,0 +1 @@
+<?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="1607776577675" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13725" xmlns:xlink="http://www.w3.org/1999/xlink" width="64.0625" height="64"><defs><style type="text/css"></style></defs><path d="M602.368301 1023.999994c-7.288471 0-14.456471-2.650353-20.118588-7.770353L289.686891 752.941172 120.485951 752.941172c-48.429176 0-120.470588-32.105412-120.470588-120.470588l0-180.705881c0-48.429176 32.105412-120.470588 120.470588-120.470588l169.140705 0 292.562822-263.348704c8.854588-8.011294 21.564235-9.938823 32.406588-5.12C625.558889 67.70447 632.485948 78.486588 632.485948 90.352941l0 903.529406c0 11.866353-6.927059 22.708706-17.829647 27.527529C610.741006 1023.1567 606.524536 1023.999994 602.368301 1023.999994zM120.485951 391.529409c-57.344 0-60.235294 50.176-60.235294 60.235294l0 180.705881c0 57.283764 50.176 60.235294 60.235294 60.235294l180.705881 0c7.469176 0 14.637176 2.770824 20.118588 7.770353L572.250654 926.238112 572.250654 157.997176 321.370655 383.759057C315.829008 388.758586 308.661008 391.529409 301.191832 391.529409L120.485951 391.529409zM752.956535 361.411763c-7.649882 0-15.420235-2.951529-21.323294-8.794353-11.745882-11.745882-11.745882-30.84047 0-42.586353l120.470588-120.470588c11.745882-11.745882 30.84047-11.745882 42.586353 0s11.745882 30.84047 0 42.586353l-120.470588 120.470588C768.37677 358.460233 760.726888 361.411763 752.956535 361.411763zM933.662416 572.235291l-180.705881 0C736.391829 572.235291 722.838888 558.742585 722.838888 542.117644s13.552941-30.117647 30.117647-30.117647l180.705881 0C950.347593 511.999997 963.780063 525.492703 963.780063 542.117644S950.347593 572.235291 933.662416 572.235291zM873.427123 903.529406c-7.649882 0-15.420235-2.951529-21.323294-8.794353l-120.470588-120.470588c-11.745882-11.745882-11.745882-30.84047 0-42.586353s30.84047-11.745882 42.586353 0l120.470588 120.470588c11.745882 11.745882 11.745882 30.84047 0 42.586353C888.847358 900.577877 881.197475 903.529406 873.427123 903.529406z" p-id="13726"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/monitor.svg b/src/assets/icons/monitor.svg
new file mode 100644
index 0000000..bc308cb
--- /dev/null
+++ b/src/assets/icons/monitor.svg
@@ -0,0 +1,2 @@
+<?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="1543827393750" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
+</style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="4696"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="4697"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="4698"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/number.svg b/src/assets/icons/number.svg
new file mode 100644
index 0000000..ad5ce9a
--- /dev/null
+++ b/src/assets/icons/number.svg
@@ -0,0 +1 @@
+<?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="1575802851180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2867" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M279.272727 791.272727h512a46.545455 46.545455 0 0 1 0 93.090909H279.272727a46.545455 46.545455 0 0 1 0-93.090909z m33.838546-617.984V651.636364H193.722182V395.170909c0-37.003636-0.884364-59.298909-2.653091-66.746182a24.948364 24.948364 0 0 0-14.615273-16.989091c-8.005818-3.863273-25.786182-5.771636-53.341091-5.771636h-11.822545v-55.854545c57.716364-12.381091 101.562182-37.888 131.490909-76.520728h70.283636z m303.709091 396.8V651.636364H354.164364v-68.235637c77.777455-127.255273 124.043636-206.010182 138.705454-236.218182 14.661818-30.254545 22.016-53.853091 22.016-70.74909 0-13.032727-2.234182-22.714182-6.656-29.137455-4.421818-6.376727-11.170909-9.588364-20.247273-9.588364a22.248727 22.248727 0 0 0-20.200727 10.612364c-4.468364 7.121455-6.656 21.178182-6.656 42.263273v45.521454H354.164364v-17.454545c0-26.763636 1.396364-47.941818 4.142545-63.348364 2.746182-15.499636 9.541818-30.72 20.386909-45.661091 10.798545-14.987636 24.901818-26.298182 42.216727-33.978182 17.361455-7.68 38.167273-11.543273 62.37091-11.543272 47.476364 0 83.316364 11.776 107.706181 35.328 24.296727 23.552 36.445091 53.341091 36.445091 89.367272 0 27.368727-6.842182 56.32-20.48 86.853819-13.730909 30.533818-54.039273 95.325091-121.018182 194.420363h130.885819z m270.615272-189.393454c18.152727 6.097455 31.650909 16.104727 40.494546 29.975272 8.843636 13.917091 13.312 46.452364 13.312 97.652364 0 38.027636-4.328727 67.490909-13.032727 88.529455-8.657455 20.945455-23.598545 36.910545-44.869819 47.848727-21.271273 10.938182-48.593455 16.384-81.873454 16.384-37.794909 0-67.490909-6.330182-89.088-19.083636-21.550545-12.660364-35.746909-28.253091-42.542546-46.638546-6.795636-18.432-10.193455-50.362182-10.193454-95.883636v-37.841455h119.389091v77.730909c0 20.666182 1.210182 33.838545 3.723636 39.424 2.420364 5.585455 7.912727 8.424727 16.337455 8.424728 9.309091 0 15.36-3.537455 18.338909-10.612364 2.932364-7.121455 4.421818-25.6 4.421818-55.575273v-33.047273c0-18.338909-2.048-31.744-6.190546-40.215272a30.72 30.72 0 0 0-18.338909-16.709818c-8.052364-2.653091-23.738182-4.189091-46.964363-4.561455V357.050182c28.392727 0 45.893818-1.070545 52.596363-3.258182a22.946909 22.946909 0 0 0 14.475637-14.149818c2.932364-7.307636 4.421818-18.711273 4.421818-34.257455v-26.624c0-16.756364-1.722182-27.741091-5.12-33.047272-3.490909-5.352727-8.843636-8.005818-16.151273-8.005819-8.285091 0-13.963636 2.792727-16.989091 8.378182-3.025455 5.632-4.561455 17.640727-4.561454 35.933091v39.284364h-119.389091v-40.773818c0-45.661091 10.472727-76.567273 31.325091-92.625455 20.898909-16.058182 54.085818-24.064 99.607272-24.064 56.878545 0 95.511273 11.170909 115.805091 33.373091 20.293818 22.248727 30.394182 53.201455 30.394182 92.765091 0 26.810182-3.630545 46.173091-10.891636 58.088727-7.307636 11.915636-20.107636 22.807273-38.446546 32.628364z" p-id="2868"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/online.svg b/src/assets/icons/online.svg
new file mode 100644
index 0000000..330a202
--- /dev/null
+++ b/src/assets/icons/online.svg
@@ -0,0 +1 @@
+<?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="1568899557259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="535" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286zM263.943926 754.580874c-92.603071-61.111846-145.713686-149.623739-145.713686-242.840794 0-93.195565 53.094242-181.682899 145.667637-242.774279 11.805884-7.79043 15.061021-23.677259 7.269567-35.483142-7.79043-11.805884-23.677259-15.062044-35.483142-7.269567C128.487861 296.954249 67.006602 401.024489 67.006602 511.74008c0 110.73708 61.496609 214.830857 168.721703 285.593504 4.343935 2.867304 9.240455 4.238534 14.08274 4.238534 8.317433 0 16.476253-4.046153 21.400403-11.507078C279.003923 778.258133 275.748786 762.372328 263.943926 754.580874zM788.660552 226.213092c-11.80486-7.791453-27.692712-4.536316-35.483142 7.269567-7.79043 11.805884-4.536316 27.692712 7.269567 35.483142 92.575442 61.092403 145.670707 149.579737 145.670707 242.774279 0 93.216032-53.111638 181.727924-145.715733 242.840794-11.805884 7.79043-15.059997 23.678282-7.269567 35.484166 4.925173 7.461949 13.081946 11.507078 21.400403 11.507078 4.841262 0 9.739828-1.37123 14.083763-4.238534 107.22714-70.761624 168.724773-174.857447 168.724773-285.593504C957.341323 401.025513 895.860063 296.955272 788.660552 226.213092zM790.090111 633.67213c23.865547-37.459147 36.480866-79.617315 36.480866-121.914654 0-42.298362-12.615319-84.45653-36.480866-121.917724-22.598694-35.470863-55.496965-67.115584-95.139847-91.515297-12.047384-7.413853-27.821649-3.659343-35.236526 8.387018-7.414877 12.045337-3.659343 27.821649 8.385994 35.236526 68.156286 41.949414 107.247606 103.842043 107.247606 169.809477 0 65.964364-39.090297 127.85597-107.247606 169.804361-12.045337 7.414877-15.800871 23.190165-8.385994 35.237549 4.838192 7.861038 13.236466 12.190647 21.835308 12.190647 4.579295 0 9.215896-1.227967 13.400195-3.804652C734.591099 700.786691 767.490394 669.142993 790.090111 633.67213zM567.129086 518.274914c24.12342-17.150612 39.887452-45.305859 39.887452-77.07133 0-52.128241-42.452881-94.538143-94.634334-94.538143-52.18043 0-94.633311 42.408879-94.633311 94.538143 0 31.695886 15.696494 59.797921 39.730886 76.958766-49.875944 21.128203-84.917018 70.234621-84.917018 127.301338 0 2.366907 0.061398 4.762467 0.182149 7.119141l1.249457 24.296359 276.373515 0 1.238201-24.308639c0.119727-2.358721 0.181125-4.750187 0.181125-7.106862C651.786185 588.497255 616.865861 539.465538 567.129086 518.274914zM512.381182 397.889079c23.937179 0 43.411719 19.430538 43.411719 43.314505 0 23.882943-19.47454 43.313481-43.411719 43.313481-23.936155 0-43.409672-19.430538-43.409672-43.313481C468.971509 417.320641 488.445026 397.889079 512.381182 397.889079zM426.08884 625.656573c9.119705-38.542828 44.254923-67.337641 86.085634-67.337641s76.966952 28.794813 86.085634 67.337641L426.08884 625.656573z" p-id="536"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/password.svg b/src/assets/icons/password.svg
new file mode 100644
index 0000000..6c64def
--- /dev/null
+++ b/src/assets/icons/password.svg
@@ -0,0 +1 @@
+<?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="1575802846045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2750" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg
new file mode 100644
index 0000000..957aa0c
--- /dev/null
+++ b/src/assets/icons/pdf.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M869.073 277.307H657.111V65.344l211.962 211.963zm-238.232 26.27V65.344l-476.498-.054v416.957h714.73v-178.67H630.841zm-335.836 360.57c-5.07-3.064-10.944-5.133-17.61-6.201-6.67-1.064-13.603-1.6-20.81-1.6h-48.821v85.641h48.822c7.206 0 14.14-.532 20.81-1.6 6.665-1.065 12.54-3.133 17.609-6.202 5.064-3.063 9.134-7.406 12.208-13.007 3.065-5.602 4.6-12.937 4.6-22.011 0-9.07-1.535-16.408-4.6-22.01-3.074-5.603-7.144-9.94-12.208-13.01zM35.82 541.805v416.904h952.358V541.805H35.821zm331.421 191.179c-3.6 11.071-9.343 20.879-17.209 29.413-7.874 8.542-18.078 15.408-30.617 20.61-12.544 5.206-27.747 7.807-45.621 7.807h-66.036v102.45h-62.831V607.517h128.867c17.874 0 33.077 2.6 45.62 7.802 12.541 5.207 22.745 12.076 30.618 20.615 7.866 8.538 13.604 18.277 17.21 29.212 3.6 10.943 5.401 22.278 5.401 34.018 0 11.477-1.8 22.752-5.402 33.819zM644.9 806.417c-5.343 17.61-13.408 32.818-24.212 45.627-10.807 12.803-24.283 22.879-40.423 30.213-16.146 7.343-35.155 11.007-57.03 11.007h-123.26V607.518h123.26c18.41 0 35.552 2.941 51.428 8.808 15.873 5.869 29.618 14.671 41.22 26.412 11.608 11.744 20.674 26.411 27.217 44.02 6.535 17.61 9.803 38.288 9.803 62.035 0 20.81-2.67 40.02-8.003 57.624zm245.362-146.07h-138.07v66.03h119.66v48.829h-119.66v118.058h-62.83V607.518h200.9v52.829h-.001zm-318.2 25.611c-6.402-8.266-14.877-14.604-25.412-19.01-10.544-4.402-23.551-6.602-39.019-6.602h-44.825v180.088h56.029c9.07 0 17.872-1.463 26.415-4.401 8.535-2.932 16.14-7.802 22.812-14.609 6.665-6.8 12.007-15.667 16.007-26.61 4.003-10.94 6.003-24.275 6.003-40.021 0-14.408-1.4-27.416-4.202-39.019-2.8-11.607-7.406-21.542-13.808-29.816zm0 0"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/peoples.svg b/src/assets/icons/peoples.svg
new file mode 100644
index 0000000..07bb38b
--- /dev/null
+++ b/src/assets/icons/peoples.svg
@@ -0,0 +1 @@
+<?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="1608832850679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7887" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M508.928 546.304c-120.32 0-218.112-97.792-218.112-218.112S388.608 110.08 508.928 110.08 727.04 207.872 727.04 328.192s-97.792 218.112-218.112 218.112z m0-385.024c-92.16 0-166.912 74.752-166.912 166.912s74.752 166.912 166.912 166.912S675.84 420.352 675.84 328.192 601.088 161.28 508.928 161.28z" p-id="7888"></path><path d="M851.456 884.736c-14.336 0-25.6-11.264-25.6-25.6 0-167.936-136.704-304.64-304.64-304.64s-304.64 136.704-304.64 304.64c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6c0-196.096 159.744-355.84 355.84-355.84s355.84 159.744 355.84 355.84c0 14.336-11.264 25.6-25.6 25.6zM293.888 451.072c-99.84 0-181.248-80.896-181.248-180.736 0-99.84 80.896-180.736 180.736-180.736 42.496 0 83.456 14.848 115.2 41.472l-32.768 38.912c-22.016-18.432-52.224-29.184-82.432-29.184-71.68 0-129.536 57.856-129.536 129.536s58.368 129.536 130.048 129.536v51.2z" p-id="7889"></path><path d="M35.84 726.016c-14.336 0-25.6-11.264-25.6-25.6 0-161.792 131.584-293.376 293.376-293.376 14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6c-133.632 0-242.176 108.544-242.176 242.176 0 14.336-11.264 25.6-25.6 25.6zM736.768 458.24v-51.2c71.68 0 129.536-57.856 129.536-129.536s-57.856-129.536-129.536-129.536c-30.72 0-59.392 10.24-82.432 29.184l-32.768-39.424c32.256-27.136 72.192-41.472 115.2-41.472 99.84 0 180.736 80.896 180.736 180.736 0 100.352-80.896 181.248-180.736 181.248z" p-id="7890"></path><path d="M994.304 726.016c-14.336 0-25.6-11.264-25.6-25.6 0-133.632-108.544-242.176-242.176-242.176-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6c161.792 0 293.376 131.584 293.376 293.376 0 14.336-11.264 25.6-25.6 25.6z" p-id="7891"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/phone.svg b/src/assets/icons/phone.svg
new file mode 100644
index 0000000..ab8e8c4
--- /dev/null
+++ b/src/assets/icons/phone.svg
@@ -0,0 +1 @@
+<?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="1567417214476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M761.503029 2.90619 242.121921 2.90619c-32.405037 0-58.932204 26.060539-58.932204 58.527998l0 902.302287c0 32.156374 26.217105 58.216913 58.932204 58.216913l519.381108 0c32.344662 0 58.591443-26.060539 58.591443-58.216913L820.094472 61.123103C820.094472 28.966729 793.847691 2.90619 761.503029 2.90619M452.878996 61.123103l98.147344 0c6.780427 0 12.31549 5.536087 12.31549 12.253068 0 6.748704-5.535063 12.253068-12.31549 12.253068l-98.147344 0c-6.779404 0-12.345166-5.504364-12.345166-12.253068C440.532807 66.659189 446.099592 61.123103 452.878996 61.123103M501.641583 980.593398c-29.636994 0-53.987588-23.946388-53.987588-53.677527 0-29.356608 24.039509-53.614082 53.987588-53.614082 29.91738 0 53.987588 23.883967 53.987588 53.614082C555.629171 956.647009 531.559986 980.593398 501.641583 980.593398M766.35657 803.142893c0 16.23373-13.186324 29.107945-29.233811 29.107945l-470.618521 0c-16.35755 0-29.325909-13.186324-29.325909-29.107945L237.178329 163.500794c0-16.232706 13.279445-29.138644 29.325909-29.138644l470.246037 0c16.420995 0 29.357632 13.1853 29.357632 29.138644l0 639.642099L766.35657 803.142893zM766.35657 803.142893" p-id="2267"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/post.svg b/src/assets/icons/post.svg
new file mode 100644
index 0000000..2922c61
--- /dev/null
+++ b/src/assets/icons/post.svg
@@ -0,0 +1 @@
+<?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="1566035724641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3998" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M136.4 434.3h77.7c21.5 0 38.9-17.4 38.9-38.9s-17.4-38.9-38.9-38.9h-77.7c-21.5 0-38.9 17.4-38.9 38.9s17.4 38.9 38.9 38.9zM252.9 628.6c0-21.5-17.4-38.9-38.9-38.9h-77.7c-21.5 0-38.9 17.4-38.9 38.9s17.4 38.9 38.9 38.9H214c21.5-0.1 38.9-17.5 38.9-38.9z" p-id="3999"></path><path d="M874.7 97.5H227c-28.6 0-51.8 23.2-51.8 51.8v194.3h38.9c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8h-38.9v129.5h38.9c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8h-38.9v194.3c0 28.6 23.2 51.8 51.8 51.8h647.7c28.6 0 51.8-23.2 51.8-51.8V149.3c0-28.6-23.2-51.8-51.8-51.8z m-311.3 723c-15.6 0-146.7-71.6-146.7-91 0-19.4 102-368.6 102-368.6l-83.6-104s-12.3-23.1 24.6-23.1h208.9c36.9 0 18.4 23.1 18.4 23.1l-79 104s102 351.3 102 368.6c0.1 17.3-131 91-146.6 91z m169.2-253.6l-27.9 40.2-74.5-240 103.4 171.7c4.6 7.9 4.2 20.6-1 28.1z" p-id="4000"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/question.svg b/src/assets/icons/question.svg
new file mode 100644
index 0000000..cf75bd4
--- /dev/null
+++ b/src/assets/icons/question.svg
@@ -0,0 +1 @@
+<?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="1581238842264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1409" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0C229.233778 0 0 229.233778 0 512s229.233778 512 512 512 512-229.233778 512-512A512 512 0 0 0 512 0z m0 938.666667C276.366222 938.666667 85.333333 747.633778 85.333333 512 85.333333 276.366222 276.366222 85.333333 512 85.333333c235.633778 0 426.666667 191.032889 426.666667 426.666667a426.666667 426.666667 0 0 1-426.666667 426.666667z m0-717.653334a170.666667 170.666667 0 0 0-170.666667 170.666667 42.666667 42.666667 0 0 0 85.333334 0 85.333333 85.333333 0 1 1 85.333333 85.333333 42.666667 42.666667 0 0 0-42.666667 42.666667v111.36a42.666667 42.666667 0 0 0 85.333334 0v-74.24A170.666667 170.666667 0 0 0 512 221.013333z m-42.666667 542.293334a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 0 0-85.333334 0z" p-id="1410"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/radio.svg b/src/assets/icons/radio.svg
new file mode 100644
index 0000000..0cde345
--- /dev/null
+++ b/src/assets/icons/radio.svg
@@ -0,0 +1 @@
+<?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="1575966775973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="879" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M507.39346659 71.84873358c241.53533667 0 437.39770766 195.85422109 437.39770767 437.37442191 0 241.53766571-195.86237099 437.38955776-437.39770767 437.38955776-241.50040803 0-437.34997219-195.85189205-437.34997219-437.38955776C70.0434944 267.70295467 265.89189347 71.84873358 507.39346659 71.84873358L507.39346659 71.84873358zM507.39346659 282.81899805c-125.00686734 0-226.37039389 101.38914133-226.37039388 226.41813048 0 125.01268821 101.36352768 226.39717262 226.37039388 226.39717262 125.04295993 0 226.42395136-101.38448441 226.42395136-226.39717262C733.81625401 384.20813938 632.43642653 282.81899805 507.39346659 282.81899805L507.39346659 282.81899805zM507.39346659 120.78172615c-214.46664192 0-388.42047261 173.95150279-388.4204726 388.44026539 0 214.51204949 173.95499463 388.46122325 388.4204726 388.46122325 214.52369237 0 388.46005817-173.94800981 388.46005818-388.46122325C895.85236082 294.73322894 721.91715897 120.78172615 507.39346659 120.78172615z" p-id="880"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/rate.svg b/src/assets/icons/rate.svg
new file mode 100644
index 0000000..aa3b14d
--- /dev/null
+++ b/src/assets/icons/rate.svg
@@ -0,0 +1 @@
+<?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="1577246781606" class="icon" viewBox="0 0 1069 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1098" xmlns:xlink="http://www.w3.org/1999/xlink" width="84.5595703125" height="81"><defs><style type="text/css"></style></defs><path d="M633.72929961 378.02038203l9.49872568 18.68789795 20.78025469 2.79745225 206.61592412 27.33248408a11.46496817 11.46496817 0 0 1 6.6095543 19.47324902l-147.2675168 147.35350284-14.89299345 14.89299345 3.8006376 20.68280244 37.84585956 204.89044571a11.46496817 11.46496817 0 0 1-16.4808914 12.2961788L554.68980898 751.84713388l-18.68789794-9.49299345-18.48726123 9.99171915-183.23885392 99.34968163a11.46496817 11.46496817 0 0 1-16.78471347-11.8662416l32.5433127-205.79617881 3.29617793-20.78598692-15.19108243-14.49172002-151.03375839-143.48407587a11.46496817 11.46496817 0 0 1 6.09936328-19.63949062l205.79617881-32.63503185 20.78598691-3.2961788L428.87898125 380.72038203 518.59235674 192.64331182a11.46496817 11.46496817 0 0 1 20.56815264-0.26369385l94.56879023 185.63503183zM496.64840732 85.52038203l-121.75796162 254.98089229L95.76433145 384.76178369A34.3949045 34.3949045 0 0 0 77.46050938 443.66879023l204.87324901 194.66369385-44.16879023 279.1146498a34.3949045 34.3949045 0 0 0 50.36560489 35.61592325l248.4-134.67898038 251.84522285 128.27579591a34.3949045 34.3949045 0 0 0 49.43694287-36.89426777l-51.30573223-277.85350284 199.73120977-199.90891758a34.3949045 34.3949045 0 0 0-19.82866201-58.40827998l-280.11783428-37.03184736L558.32993633 84.71210205a34.3949045 34.3949045 0 0 0-61.68152901 0.80254775z" p-id="1099"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/redis.svg b/src/assets/icons/redis.svg
new file mode 100644
index 0000000..2f1d62d
--- /dev/null
+++ b/src/assets/icons/redis.svg
@@ -0,0 +1 @@
+<?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="1605865043777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="856" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1023.786667 611.84c-0.426667 9.770667-13.354667 20.693333-39.893334 34.56-54.613333 28.458667-337.749333 144.896-397.994666 176.298667-60.288 31.402667-93.738667 31.104-141.354667 8.32-47.616-22.741333-348.842667-144.469333-403.114667-170.368-27.093333-12.970667-40.917333-23.893333-41.386666-34.218667v103.509333c0 10.325333 14.250667 21.290667 41.386666 34.261334 54.272 25.941333 355.541333 147.626667 403.114667 170.368 47.616 22.784 81.066667 23.082667 141.354667-8.362667 60.245333-31.402667 343.338667-147.797333 397.994666-176.298667 27.776-14.464 40.106667-25.728 40.106667-35.925333v-102.058667l-0.213333-0.085333z m0-168.746667c-0.512 9.770667-13.397333 20.650667-39.893334 34.517334-54.613333 28.458667-337.749333 144.896-397.994666 176.298666-60.288 31.402667-93.738667 31.104-141.354667 8.362667-47.616-22.741333-348.842667-144.469333-403.114667-170.410667-27.093333-12.928-40.917333-23.893333-41.386666-34.176v103.509334c0 10.325333 14.250667 21.248 41.386666 34.218666 54.272 25.941333 355.498667 147.626667 403.114667 170.368 47.616 22.784 81.066667 23.082667 141.354667-8.32 60.245333-31.402667 343.338667-147.84 397.994666-176.298666 27.776-14.506667 40.106667-25.770667 40.106667-35.968v-102.058667l-0.256-0.042667z m0-175.018666c0.469333-10.410667-13.141333-19.541333-40.533334-29.610667-53.248-19.498667-334.634667-131.498667-388.522666-151.253333-53.888-19.712-75.818667-18.901333-139.093334 3.84C392.234667 113.706667 92.629333 231.253333 39.338667 252.074667c-26.666667 10.496-39.68 20.181333-39.253334 30.506666V386.133333c0 10.325333 14.250667 21.248 41.386667 34.218667 54.272 25.941333 355.498667 147.669333 403.114667 170.410667 47.616 22.741333 81.066667 23.04 141.354666-8.362667 60.245333-31.402667 343.338667-147.84 397.994667-176.298667 27.776-14.506667 40.106667-25.770667 40.106667-35.968V268.074667h-0.341334zM366.677333 366.08l237.269334-36.437333-71.68 105.088-165.546667-68.650667z m524.8-94.634667l-140.330666 55.466667-15.232 5.973333-140.245334-55.466666 155.392-61.44 140.373334 55.466666z m-411.989333-101.674666l-22.954667-42.325334 71.594667 27.989334 67.498667-22.101334-18.261334 43.733334 68.778667 25.770666-88.704 9.216-19.882667 47.786667-32.085333-53.290667-102.4-9.216 76.416-27.562666z m-176.768 59.733333c70.058667 0 126.805333 21.973333 126.805333 49.109333s-56.746667 49.152-126.805333 49.152-126.848-22.058667-126.848-49.152c0-27.136 56.789333-49.152 126.848-49.152z" p-id="857"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/row.svg b/src/assets/icons/row.svg
new file mode 100644
index 0000000..0780992
--- /dev/null
+++ b/src/assets/icons/row.svg
@@ -0,0 +1 @@
+<?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="1579339929870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M152 854.856875h325.7146875V237.715625H134.856875v600q0 6.99375 5.0746875 12.0684375T152 854.856875z m737.143125-17.1421875v-600H546.284375v617.1421875H872q6.99375 0 12.0684375-5.07375t5.0746875-12.0684375z m68.5715625-651.429375V837.715625q0 35.3821875-25.16625 60.5484375T872 923.4284375H152q-35.383125 0-60.5484375-25.1653125T66.284375 837.7146875V186.284375q0-35.3821875 25.16625-60.5484375T152 100.5715625h720q35.383125 0 60.5484375 25.1653125t25.16625 60.5484375z" p-id="1183"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/select.svg b/src/assets/icons/select.svg
new file mode 100644
index 0000000..d628382
--- /dev/null
+++ b/src/assets/icons/select.svg
@@ -0,0 +1 @@
+<?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="1575803481213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="804" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62 511.97954521C62 263.86590869 263.90681826 62 511.97954521 62s449.97954521 201.825 449.97954521 449.97954521c0 248.19545479-201.90681826 449.97954521-449.97954521 449.97954521C263.90681826 962 62 760.175 62 511.97954521M901.98636348 511.97954521c0-215.24318174-175.00909131-390.41590869-390.00681827-390.41590869-215.03863652 0-389.96590869 175.17272695-389.96590868 390.41590869 0 215.28409131 175.00909131 390.45681826 389.96590868 390.45681826C727.01818174 902.47727305 901.98636348 727.30454521 901.98636348 511.97954521M264.17272695 430.28409131c0-5.76818174 2.12727305-11.51590869 6.64772696-15.87272696 8.71363652-8.75454521 22.88863652-8.75454521 31.725 0l209.4340913 208.22727305L721.45454521 414.53409131c8.75454521-8.71363652 22.97045479-8.71363652 31.90909132 0 8.71363652 8.75454521 8.71363652 22.88863652 0 31.60227304L511.97954521 685.74090869 270.71818174 446.01363653C266.27954521 441.77954521 264.17272695 436.05227305 264.17272695 430.28409131" p-id="805"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/server.svg b/src/assets/icons/server.svg
new file mode 100644
index 0000000..eb287e3
--- /dev/null
+++ b/src/assets/icons/server.svg
@@ -0,0 +1 @@
+<?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="1547360688278" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M890 120H134a70 70 0 0 0-70 70v500a70 70 0 0 0 70 70h756a70 70 0 0 0 70-70V190a70 70 0 0 0-70-70z m-10 520a40 40 0 0 1-40 40H712V448a40 40 0 0 0-80 0v232h-80V368a40 40 0 0 0-80 0v312h-80V512a40 40 0 0 0-80 0v168H184a40 40 0 0 1-40-40V240a40 40 0 0 1 40-40h656a40 40 0 0 1 40 40zM696 824H328a40 40 0 0 0 0 80h368a40 40 0 0 0 0-80z" p-id="6718"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/swagger.svg b/src/assets/icons/swagger.svg
new file mode 100644
index 0000000..05d4e7b
--- /dev/null
+++ b/src/assets/icons/swagger.svg
@@ -0,0 +1 @@
+<?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="1566036776944" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6463" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 223.995345h168.001164v47.997673c0 26.428509 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.569164 41.984-47.997673v-47.997673h504.003491a32.004655 32.004655 0 0 0 0-64.009309H455.996509V111.988364c0-26.428509-18.878836-47.997673-41.984-47.997673H273.985164c-23.095855 0-41.984 21.569164-41.984 47.997673v47.997672H64a32.004655 32.004655 0 0 0 0 64.009309zM288.004655 128h111.997672V256H288.004655V128zM960 479.995345H791.998836v-47.997672c0-26.372655-18.878836-47.997673-41.984-47.997673H609.978182c-23.095855 0-41.984 21.634327-41.984 47.997673v47.997672H64a32.004655 32.004655 0 0 0 0 64.00931h504.003491v47.997672c0 26.363345 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.634327 41.984-47.997673v-47.997672h168.001164a32.004655 32.004655 0 1 0-0.009309-64.00931zM735.995345 576H623.997673v-128h111.997672v128zM960 800.293236v-0.288581H455.996509v-47.997673c0-26.363345-18.878836-47.997673-41.984-47.997673H274.050327c-23.105164 0-41.984 21.634327-41.984 47.997673v47.997673H64v0.288581a32.004655 32.004655 0 0 0 0 64.009309c0.986764 0 1.917673-0.195491 2.885818-0.288581h165.115346v47.997672c0 26.363345 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.634327 41.984-47.997673v-47.997672h501.108364c0.968145 0.093091 1.899055 0.288582 2.895127 0.288581a32.004655 32.004655 0 1 0-0.009309-64.009309zM400.002327 896H288.004655V768h111.997672v128z" fill="" p-id="6464"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/switch.svg b/src/assets/icons/switch.svg
new file mode 100644
index 0000000..0ba61e3
--- /dev/null
+++ b/src/assets/icons/switch.svg
@@ -0,0 +1 @@
+<?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="1576042673958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1110" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M692 792H332c-150 0-270-120-270-270s120-270 270-270h360c150 0 270 120 270 270 0 147-120 270-270 270zM332 312c-117 0-210 93-210 210s93 210 210 210h360c117 0 210-93 210-210s-93-210-210-210H332z" p-id="1111"></path><path d="M341 522m-150 0a150 150 0 1 0 300 0 150 150 0 1 0-300 0Z" p-id="1112"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/system.svg b/src/assets/icons/system.svg
new file mode 100644
index 0000000..5992593
--- /dev/null
+++ b/src/assets/icons/system.svg
@@ -0,0 +1,2 @@
+<?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="1543827724451" class="icon" style="" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10233" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
+</style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/textarea.svg b/src/assets/icons/textarea.svg
new file mode 100644
index 0000000..2709f29
--- /dev/null
+++ b/src/assets/icons/textarea.svg
@@ -0,0 +1 @@
+<?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="1575802855098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 160H128c-35.2 0-64 28.8-64 64v576c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64z m0 608c0 16-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V256c0-16 12.8-32 32-32h704c19.2 0 32 12.8 32 32v512z" p-id="2985"></path><path d="M224 288c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V320c0-16-12.8-32-32-32z m608 480c19.2 0 32-12.8 32-32V608L704 768h128z" p-id="2986"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/time.svg b/src/assets/icons/time.svg
new file mode 100644
index 0000000..b376e32
--- /dev/null
+++ b/src/assets/icons/time.svg
@@ -0,0 +1 @@
+<?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="1577099827399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M520 559h204c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H488c-17.673 0-32-14.327-32-32 0-0.167 0.001-0.334 0.004-0.5a32.65 32.65 0 0 1-0.004-0.5V277c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v282z m-8 401C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-64c212.077 0 384-171.923 384-384S724.077 128 512 128 128 299.923 128 512s171.923 384 384 384z" p-id="1009"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/timeRange.svg b/src/assets/icons/timeRange.svg
new file mode 100644
index 0000000..13c1202
--- /dev/null
+++ b/src/assets/icons/timeRange.svg
@@ -0,0 +1 @@
+<?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="1579774825624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1248" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M498.595712 482.290351 345.420077 482.290351l0 57.307194 210.477712 0L555.897789 274.196942l-57.301054 0L498.596735 482.290351zM498.595712 482.290351" p-id="1249"></path><path d="M577.685002 644.98478l379.879913 0 0 57.302077L577.685002 702.286858 577.685002 644.98478 577.685002 644.98478zM577.685002 644.98478" p-id="1250"></path><path d="M577.685002 773.764795l379.879913 0 0 57.307194L577.685002 831.071989 577.685002 773.764795 577.685002 773.764795zM577.685002 773.764795" p-id="1251"></path><path d="M577.685002 902.549927l379.879913 0 0 57.307194L577.685002 959.857121 577.685002 902.549927 577.685002 902.549927zM577.685002 902.549927" p-id="1252"></path><path d="M102.523001 382.290823c4.450359 2.615571 9.470699 3.954055 14.530948 3.954055 2.969635 0 5.952572-0.461511 8.836249-1.394766l190.809767-61.886489c15.052834-4.882194 23.297612-21.040199 18.415418-36.08894-4.882194-15.052834-21.040199-23.297612-36.093033-18.415418L175.676092 308.458257c15.994276-26.115797 35.170011-50.537 57.370639-72.743768 73.767074-73.767074 171.845857-114.388237 276.16783-114.388237 104.32095 0 202.39564 40.622186 276.16169 114.388237s114.393353 171.845857 114.393353 276.16783c0 26.427906-2.615571 52.449559-7.709589 77.780481l58.302871 0c4.464685-25.499767 6.708795-51.470255 6.708795-77.780481 0-60.449767-11.845793-119.102608-35.204803-174.336584-22.559808-53.334719-54.850236-101.226472-95.968725-142.349055-41.122583-41.122583-89.017406-73.408917-142.348032-95.968725C628.317169 75.866898 569.659211 64.021106 509.215584 64.021106c-60.448744 0-119.106702 11.845793-174.336584 35.207873-53.334719 22.559808-101.230566 54.846142-142.349055 95.968725-23.980157 23.980157-44.934398 50.278103-62.727647 78.601172l-20.738323-105.655342c-3.043313-15.527648-18.105357-25.642007-33.631982-22.599717-15.527648 3.048429-25.64303 18.105357-22.599717 33.637098l36.102243 183.932126C90.51348 371.153158 95.460142 378.13313 102.523001 382.290823L102.523001 382.290823zM102.523001 382.290823" p-id="1253"></path><path d="M126.020158 587.9416 67.768453 587.9416c5.759167 33.679054 15.368012 66.544579 28.789697 98.278327 22.559808 53.333696 54.850236 101.225449 95.971795 142.348032 41.122583 41.122583 89.014336 73.408917 142.349055 95.968725 54.112432 22.88829 111.517863 34.71157 170.668031 35.18229L505.547031 902.395408c-102.94972-0.941442-199.594851-41.445948-272.499277-114.349351C177.545672 732.543975 140.810003 663.275355 126.020158 587.9416L126.020158 587.9416zM126.020158 587.9416" p-id="1254"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/tool.svg b/src/assets/icons/tool.svg
new file mode 100644
index 0000000..48e0e35
--- /dev/null
+++ b/src/assets/icons/tool.svg
@@ -0,0 +1 @@
+<?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="1553828490559" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1684" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M898.831744 900.517641 103.816972 900.517641c-36.002982 0-65.363683-29.286-65.363683-65.313541l0-554.949184c0-36.041868 29.361725-65.326844 65.363683-65.326844l795.015795 0c36.002982 0 65.198931 29.284977 65.198931 65.326844l0 554.949184C964.030675 871.231641 934.834726 900.517641 898.831744 900.517641L898.831744 900.517641zM103.816972 255.593236c-13.576203 0-24.711821 11.085476-24.711821 24.662703l0 554.949184c0 13.576203 11.136641 24.662703 24.711821 24.662703l795.015795 0c13.577227 0 24.547069-11.086499 24.547069-24.662703l0-554.949184c0-13.577227-10.970866-24.662703-24.547069-24.662703L103.816972 255.593236 103.816972 255.593236zM664.346245 251.774257c-11.161201 0-20.332071-9.080819-20.332071-20.332071l0-101.278661c0-13.576203-11.047614-24.623817-24.699542-24.623817L383.181611 105.539708c-13.576203 0-24.712845 11.04659-24.712845 24.623817l0 101.278661c0 11.252275-9.041934 20.332071-20.332071 20.332071-11.20111 0-20.319791-9.080819-20.319791-20.332071l0-101.278661c0-35.989679 29.323862-65.275679 65.364707-65.275679l236.133022 0c36.06745 0 65.402569 29.284977 65.402569 65.275679l0 101.278661C684.717202 242.694461 675.636383 251.774257 664.346245 251.774257L664.346245 251.774257zM413.233044 521.725502 75.694471 521.725502c-11.163247 0-20.333094-9.117658-20.333094-20.35663 0-11.252275 9.169847-20.332071 20.333094-20.332071l337.538573 0c11.277858 0 20.319791 9.080819 20.319791 20.332071C433.552835 512.607844 424.510902 521.725502 413.233044 521.725502L413.233044 521.725502zM912.894018 521.725502 575.367725 521.725502c-11.213389 0-20.332071-9.117658-20.332071-20.35663 0-11.252275 9.118682-20.332071 20.332071-20.332071l337.526293 0c11.290137 0 20.332071 9.080819 20.332071 20.332071C933.226089 512.607844 924.184155 521.725502 912.894018 521.725502L912.894018 521.725502zM557.56322 634.217552 445.085496 634.217552c-11.213389 0-20.332071-9.079796-20.332071-20.331048l0-168.763658c0-11.251252 9.118682-20.332071 20.332071-20.332071l112.478747 0c11.290137 0 20.370956 9.080819 20.370956 20.332071l0 168.763658C577.934177 625.137757 568.853357 634.217552 557.56322 634.217552L557.56322 634.217552zM465.417567 593.514525l71.827909 0L537.245476 465.454918l-71.827909 0L465.417567 593.514525 465.417567 593.514525z" p-id="1685"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/tree.svg b/src/assets/icons/tree.svg
new file mode 100644
index 0000000..5ec9429
--- /dev/null
+++ b/src/assets/icons/tree.svg
@@ -0,0 +1 @@
+<?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="1608832259074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5290" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M329.285097 317.714062l-8.422833 4.428869c-8.78099 4.584412-13.528108 14.84715-11.923564 24.415063 1.644453 4.909823 3.491521 9.864672 5.492084 14.747889 2.030239 4.854565 4.230348 9.652847 6.53688 14.293541 5.621021 7.891737 16.246009 11.824303 25.699312 8.858762l9.041934-2.868327c14.741749-3.860934 31.115672-0.056282 42.62582 11.512195 11.549034 11.526521 15.374152 27.863604 11.549034 42.570561l-2.882654 9.126868c-2.958378 9.438976 0.938372 20.042475 8.830109 25.706475 4.634554 2.328022 9.403161 4.52813 14.323217 6.529717 4.876054 2.043542 9.80839 3.846608 14.739702 5.478781 9.538237 1.603521 19.87363-3.123131 24.414039-11.910261l4.402263-8.388041c7.67889-13.144368 21.915126-22.002107 38.267559-22.002107 16.338107 0 30.547737 8.829086 38.255279 21.931498l4.41352 8.459672c4.584412 8.78713 14.84715 13.513782 24.414039 11.910261 4.91187-1.632173 9.851369-3.462868 14.734586-5.478781 4.882194-2.030239 9.66615-4.201695 14.322194-6.529717 7.891737-5.622044 11.809977-16.253172 8.843412-25.706475l-2.852978-9.041934c-3.859911-14.733563-0.069585-31.085996 11.484565-42.655496 11.55415-11.525498 27.878954-15.372106 42.599214-11.512195l9.097192 2.88163c9.426697 2.952238 20.044522-0.937348 25.693172-8.829086 2.313695-4.656043 4.527107-9.411347 6.54302-14.322194 2.029216-4.883217 3.847631-9.80839 5.495154-14.748912 1.616824-9.581216-3.108804-19.843954-11.911284-24.429389l-8.402367-4.400217c-13.132088-7.665587-21.98778-21.901823-21.98778-38.255279 0-16.32378 8.830109-30.589692 21.974477-38.268582l8.416693-4.443196c8.80248-4.571109 13.528108-14.832823 11.924587-24.400736-1.6465-4.910846-3.479241-9.850345-5.493108-14.733563-2.031263-4.868891-4.202719-9.680477-6.529717-14.308891-5.622044-7.890714-16.253172-11.82328-25.708522-8.842389l-9.05626 2.852978c-14.747889 3.861958-31.071669 0.057305-42.654472-11.512195-11.55415-11.55415-15.344476-27.877931-11.484565-42.612517l2.852978-9.05626c2.966565-9.44-0.951675-20.043499-8.856715-25.692149-4.641717-2.328022-9.397021-4.542456-14.307867-6.544043-4.883217-2.029216-9.82374-3.846608-14.734586-5.465478-9.567913-1.632173-19.872606 3.123131-24.414039 11.895935l-4.400217 8.389064c-7.67889 13.174044-21.931498 22.002107-38.268582 22.002107-16.309454 0-30.576389-8.828063-38.267559-22.002107l-4.387937-8.389064c-4.554736-8.771781-14.8318-13.528108-24.405853-11.895935-4.954849 1.604544-9.873882 3.435239-14.763239 5.4225-4.883217 2.044566-9.688663 4.217045-14.323217 6.545066-7.891737 5.649674-11.808954 16.266475-8.830109 25.735128l2.826372 9.05626c3.882424 14.762215 0.057305 31.085996-11.491729 42.612517-11.510148 11.5695-27.849278 15.373129-42.611493 11.526521l-9.070586-2.867304c-9.44-2.980891-20.063965 0.951675-25.686009 8.842389-2.342348 4.628414-4.52813 9.44-6.53688 14.308891-2.036379 4.882194-3.847631 9.822716-5.492084 14.733563-1.603521 9.581216 3.142573 19.85828 11.923564 24.443715l8.402367 4.400217c13.156648 7.67889 21.986757 21.944801 21.986757 38.268582C351.251388 295.79689 342.421278 310.019823 329.285097 317.714062zM511.977999 171.706687c59.532885 0 107.795075 48.275493 107.795075 107.779725 0 59.490929-48.26219 107.752096-107.795075 107.752096-59.533908 0-107.752096-48.26219-107.752096-107.752096C404.226926 219.98218 452.445114 171.706687 511.977999 171.706687z" p-id="5291"></path><path d="M924.647713 689.174212 798.570249 689.174212 798.570249 581.650313c0-26.387997-21.476127-47.850821-47.864124-47.850821L276.2543 533.799492c-26.386974 0-47.851844 21.462824-47.851844 47.850821l0 107.523899L99.345124 689.174212c-20.419052 0-36.95568 16.550954-36.95568 36.948517l0 184.771237c0 20.399609 16.536628 36.962843 36.95568 36.962843l273.965675 0c20.397562 0 36.947494-16.564257 36.947494-36.962843L410.258293 726.122729c0-20.398586-16.550954-36.948517-36.947494-36.948517l-123.103736 0L250.207064 581.650313c0-14.366196 11.68104-26.047236 26.047236-26.047236l474.451826 0c14.364149 0 26.062586 11.68104 26.062586 26.047236l0 107.523899L650.689201 689.174212c-20.412912 0-36.962843 16.550954-36.962843 36.948517l0 184.771237c0 20.399609 16.549931 36.962843 36.962843 36.962843l273.958512 0c20.397562 0 36.96182-16.564257 36.96182-36.962843L961.609533 726.122729C961.609533 705.725166 945.044252 689.174212 924.647713 689.174212z" p-id="5292"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/treeTable.svg b/src/assets/icons/treeTable.svg
new file mode 100644
index 0000000..189533c
--- /dev/null
+++ b/src/assets/icons/treeTable.svg
@@ -0,0 +1 @@
+<?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="1607776376762" class="icon" viewBox="0 0 1160 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12593" xmlns:xlink="http://www.w3.org/1999/xlink" width="72.5" height="64"><defs><style type="text/css"></style></defs><path d="M200.026637 428.750277h227.302997v-227.302996a200.310766 200.310766 0 0 0-198.890122-198.890122 227.302997 227.302997 0 0 0-227.302997 227.302996 200.310766 200.310766 0 0 0 198.890122 198.890122z m26.139845-369.367369a142.064373 142.064373 0 0 1 142.064373 142.064373v170.477247h-170.477248a142.064373 142.064373 0 0 1-142.064373-142.064373 170.477248 170.477248 0 0 1 170.477248-170.477247zM1.420644 677.36293a227.302997 227.302997 0 0 0 227.302996 227.302997 200.310766 200.310766 0 0 0 198.890122-198.890122v-227.302997h-227.302996a200.310766 200.310766 0 0 0-198.890122 198.890122z m369.367369 26.139845a142.064373 142.064373 0 0 1-142.064373 142.064373 170.477248 170.477248 0 0 1-170.477247-170.477248 142.064373 142.064373 0 0 1 142.064373-142.064373h170.477247zM702.36626 475.915649h-227.302997v227.302997a200.310766 200.310766 0 0 0 198.890122 198.890122 227.302997 227.302997 0 0 0 227.302997-227.302997 200.310766 200.310766 0 0 0-198.890122-198.890122z m-26.139845 369.36737a142.064373 142.064373 0 0 1-142.064373-142.064373v-170.477248h170.477248a142.064373 142.064373 0 0 1 142.064373 142.064373 170.477248 170.477248 0 0 1-170.477248 170.477248zM900.972253 227.302997a227.302997 227.302997 0 0 0-227.302997-227.302997 200.310766 200.310766 0 0 0-198.890122 198.890122v227.302997h227.302997a200.310766 200.310766 0 0 0 198.890122-198.890122z m-369.36737-26.139845a142.064373 142.064373 0 0 1 142.064373-142.064373 170.477248 170.477248 0 0 1 170.477248 170.477248 142.064373 142.064373 0 0 1-142.064373 142.064373h-170.477248z" p-id="12594"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 0000000..bae49c0
--- /dev/null
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1 @@
+<?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="1577540289643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M530.944 458.24l4.8 3.456 122.176 106.816a32 32 0 0 1-37.44 51.584l-4.672-3.392L546.56 556.16v280.704a32 32 0 0 1-26.24 31.488l-5.76 0.512a32 32 0 0 1-31.424-26.24l-0.512-5.76-0.064-280.704-69.12 60.48a32 32 0 0 1-40.96 0.896l-4.16-3.968a32 32 0 0 1-0.96-40.96l4.032-4.16 122.176-106.816a32 32 0 0 1 37.312-3.456zM497.92 128c128.128 0 239.168 82.304 275.52 199.04 123.968 11.264 221.312 113.088 221.312 237.44 0 128.128-103.68 232.96-234.88 238.272h-5.888l-35.52 0.192a32 32 0 0 1-0.192-64l35.264-0.128 4.672-0.064c96.384-3.84 172.544-80.896 172.544-174.272 0-96.128-80.512-174.464-179.584-174.464h-1.984a32 32 0 0 1-32-25.28C695.872 264.96 604.736 192 497.92 192 381.824 192 285.44 277.76 274.816 388.48a32 32 0 0 1-28.352 28.8c-83.968 9.152-147.84 78.208-147.84 159.552l0.192 7.936c3.84 85.76 77.056 154.112 166.592 154.112h45.632a32 32 0 0 1 0 64h-45.632C142.016 802.944 40.32 708.032 34.88 586.88l-0.192-9.28c0-106.88 76.352-197.184 179.968-219.904C239.488 226.112 357.76 128 497.856 128z" p-id="7923"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
new file mode 100644
index 0000000..573056c
--- /dev/null
+++ b/src/assets/icons/user.svg
@@ -0,0 +1 @@
+<?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="1607774740802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4632" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M511.913993 941.605241c-255.612968 0-385.311608-57.452713-385.311608-170.810012 0-80.846632 133.654964-133.998992 266.621871-151.88846L393.224257 602.049387c-79.986561-55.904586-118.86175-153.436587-118.86175-297.240383 0-139.33143 87.211154-222.586259 233.423148-222.586259l7.912649 0c146.211994 0 233.423148 83.254829 233.423148 222.586259 0 54.184445 0 214.67361-117.829666 297.412397l-0.344028 16.685369c132.966907 18.061482 266.105829 71.041828 266.105829 151.716445C897.225601 884.152528 767.526961 941.605241 511.913993 941.605241zM507.957668 141.567613c-79.470519 0-174.250294 28.382328-174.250294 163.241391 0 129.698639 34.230808 213.469511 104.584579 255.784982 8.944734 5.332437 14.277171 14.965228 14.277171 25.286074l0 59.344868c0 15.309256-11.524945 28.0383-26.662187 29.414413-144.319839 14.449185-239.959684 67.429531-239.959684 95.983874 0 92.199563 177.346548 111.637158 325.966739 111.637158 148.792206 0 325.966739-19.26558 325.966739-111.637158 0-28.726356-95.639845-81.534688-239.959684-95.983874-15.48127-1.548127-27.006215-14.621199-26.662187-30.102469l1.376113-59.344868c0.172014-10.148833 5.676466-19.437594 14.277171-24.770032 70.525785-42.487485 103.208466-123.678145 103.208466-255.784982 0-135.031077-94.779775-163.241391-174.250294-163.241391L507.957668 141.567613 507.957668 141.567613z" p-id="4633"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/validCode.svg b/src/assets/icons/validCode.svg
new file mode 100644
index 0000000..cfb1021
--- /dev/null
+++ b/src/assets/icons/validCode.svg
@@ -0,0 +1 @@
+<?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="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/dark.svg b/src/assets/images/dark.svg
new file mode 100644
index 0000000..f646bd7
--- /dev/null
+++ b/src/assets/images/dark.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/light.svg b/src/assets/images/light.svg
new file mode 100644
index 0000000..ab7cc08
--- /dev/null
+++ b/src/assets/images/light.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/login-background.jpg b/src/assets/images/login-background.jpg
new file mode 100644
index 0000000..8a89eb8
Binary files /dev/null and b/src/assets/images/login-background.jpg differ
diff --git a/src/assets/images/profile.jpg b/src/assets/images/profile.jpg
new file mode 100644
index 0000000..b3a940b
Binary files /dev/null and b/src/assets/images/profile.jpg differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..d45249b
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/projects/antdv.png b/src/assets/projects/antdv.png
new file mode 100644
index 0000000..4ca0b60
Binary files /dev/null and b/src/assets/projects/antdv.png differ
diff --git a/src/assets/projects/ruoyi.png b/src/assets/projects/ruoyi.png
new file mode 100644
index 0000000..755c0d8
Binary files /dev/null and b/src/assets/projects/ruoyi.png differ
diff --git a/src/components/ArticleListContent/ArticleListContent.vue b/src/components/ArticleListContent/ArticleListContent.vue
new file mode 100644
index 0000000..8f39978
--- /dev/null
+++ b/src/components/ArticleListContent/ArticleListContent.vue
@@ -0,0 +1,89 @@
+<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>
diff --git a/src/components/ArticleListContent/index.js b/src/components/ArticleListContent/index.js
new file mode 100644
index 0000000..37d35c7
--- /dev/null
+++ b/src/components/ArticleListContent/index.js
@@ -0,0 +1,3 @@
+import ArticleListContent from './ArticleListContent'
+
+export default ArticleListContent
diff --git a/src/components/AvatarList/Item.jsx b/src/components/AvatarList/Item.jsx
new file mode 100644
index 0000000..c5a69b2
--- /dev/null
+++ b/src/components/AvatarList/Item.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { Tooltip, Avatar } from 'ant-design-vue'
+import { getSlotOptions } from 'ant-design-vue/lib/_util/props-util'
+import { warning } from 'ant-design-vue/lib/vc-util/warning'
+
+export const AvatarListItemProps = {
+  tips: PropTypes.string.def(null),
+  src: PropTypes.string.def('')
+}
+
+const Item = {
+  __ANT_AVATAR_CHILDREN: true,
+  name: 'AvatarListItem',
+  props: AvatarListItemProps,
+  created () {
+    warning(getSlotOptions(this.$parent).__ANT_AVATAR_LIST, 'AvatarListItem must be a subcomponent of AvatarList')
+  },
+  render () {
+    const AvatarDom = <Avatar size={this.$parent.size} src={this.src} />
+    return this.tips && <Tooltip title={this.tips}>{AvatarDom}</Tooltip> || <AvatarDom />
+  }
+}
+
+export default Item
diff --git a/src/components/AvatarList/List.jsx b/src/components/AvatarList/List.jsx
new file mode 100644
index 0000000..74ad5ff
--- /dev/null
+++ b/src/components/AvatarList/List.jsx
@@ -0,0 +1,72 @@
+import './index.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import Avatar from 'ant-design-vue/es/avatar'
+import Item from './Item.jsx'
+import { filterEmpty } from '@/components/_util/util'
+
+/**
+ * size: `number`、 `large`、`small`、`default` 默认值: default
+ * maxLength: number
+ * excessItemsStyle: CSSProperties
+ */
+const AvatarListProps = {
+  prefixCls: PropTypes.string.def('ant-pro-avatar-list'),
+  size: {
+    validator: val => {
+      return typeof val === 'number' || ['small', 'large', 'default'].includes(val)
+    },
+    default: 'default'
+  },
+  maxLength: PropTypes.number.def(0),
+  excessItemsStyle: PropTypes.object.def({
+    color: '#f56a00',
+    backgroundColor: '#fde3cf'
+  })
+}
+
+const AvatarList = {
+  __ANT_AVATAR_LIST: true,
+  Item,
+  name: 'AvatarList',
+  props: AvatarListProps,
+  render (h) {
+    const { prefixCls, size } = this.$props
+    const className = {
+      [`${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={className}>
+        {itemsDom}
+      </div>
+    )
+  },
+  methods: {
+    getItems (items) {
+      const className = {
+        [`${this.prefixCls}-item`]: true,
+        [`${this.size}`]: true
+      }
+      const totalSize = items.length
+
+      if (this.maxLength > 0) {
+        items = items.slice(0, this.maxLength)
+        items.push((<Avatar size={this.size} style={this.excessItemsStyle}>{`+${totalSize - this.maxLength}`}</Avatar>))
+      }
+      return items.map((item) => (
+        <li class={className}>{item}</li>
+      ))
+    }
+  }
+}
+
+AvatarList.install = function (Vue) {
+  Vue.component(AvatarList.name, AvatarList)
+  Vue.component(AvatarList.Item.name, AvatarList.Item)
+}
+
+export default AvatarList
diff --git a/src/components/AvatarList/index.js b/src/components/AvatarList/index.js
new file mode 100644
index 0000000..b047432
--- /dev/null
+++ b/src/components/AvatarList/index.js
@@ -0,0 +1,9 @@
+import AvatarList from './List'
+import Item from './Item'
+
+export {
+  AvatarList,
+  Item as AvatarListItem
+}
+
+export default AvatarList
diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less
new file mode 100644
index 0000000..9ce073f
--- /dev/null
+++ b/src/components/AvatarList/index.less
@@ -0,0 +1,60 @@
+@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;
+        }
+      }
+    }
+  }
+}
+
diff --git a/src/components/AvatarList/index.md b/src/components/AvatarList/index.md
new file mode 100644
index 0000000..75e022c
--- /dev/null
+++ b/src/components/AvatarList/index.md
@@ -0,0 +1,64 @@
+# AvatarList 用户头像列表
+
+
+一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
+
+
+
+引用方式：
+
+```javascript
+import AvatarList from '@/components/AvatarList'
+const AvatarListItem = AvatarList.Item
+
+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    | -   |
+
diff --git a/src/components/Dialog.js b/src/components/Dialog.js
new file mode 100644
index 0000000..78e95b2
--- /dev/null
+++ b/src/components/Dialog.js
@@ -0,0 +1,113 @@
+import Modal from 'ant-design-vue/es/modal'
+export default (Vue) => {
+  function dialog (component, componentProps, modalProps) {
+    const _vm = this
+    modalProps = modalProps || {}
+    if (!_vm || !_vm._isVue) {
+      return
+    }
+    let dialogDiv = document.querySelector('body>div[type=dialog]')
+    if (!dialogDiv) {
+      dialogDiv = document.createElement('div')
+      dialogDiv.setAttribute('type', 'dialog')
+      document.body.appendChild(dialogDiv)
+    }
+
+    const handle = function (checkFunction, afterHandel) {
+      if (checkFunction instanceof Function) {
+        const res = checkFunction()
+        if (res instanceof Promise) {
+          res.then(c => {
+            c && afterHandel()
+          })
+        } else {
+          res && afterHandel()
+        }
+      } else {
+        // checkFunction && afterHandel()
+        checkFunction || afterHandel()
+      }
+    }
+
+    const dialogInstance = new Vue({
+      data () {
+        return {
+          visible: true
+        }
+      },
+      router: _vm.$router,
+      store: _vm.$store,
+      mounted () {
+        this.$on('close', (v) => {
+          this.handleClose()
+        })
+      },
+      methods: {
+        handleClose () {
+          handle(this.$refs._component.onCancel, () => {
+            this.visible = false
+            this.$refs._component.$emit('close')
+            this.$refs._component.$emit('cancel')
+            dialogInstance.$destroy()
+          })
+        },
+        handleOk () {
+          handle(this.$refs._component.onOK || this.$refs._component.onOk, () => {
+            this.visible = false
+            this.$refs._component.$emit('close')
+            this.$refs._component.$emit('ok')
+            dialogInstance.$destroy()
+          })
+        }
+      },
+      render: function (h) {
+        const that = this
+        const modalModel = modalProps && modalProps.model
+        if (modalModel) {
+          delete modalProps.model
+        }
+        const ModalProps = Object.assign({}, modalModel && { model: modalModel } || {}, {
+          attrs: Object.assign({}, {
+            ...(modalProps.attrs || modalProps)
+          }, {
+            visible: this.visible
+          }),
+          on: Object.assign({}, {
+            ...(modalProps.on || modalProps)
+          }, {
+            ok: () => {
+              that.handleOk()
+            },
+            cancel: () => {
+              that.handleClose()
+            }
+          })
+        })
+
+        const componentModel = componentProps && componentProps.model
+        if (componentModel) {
+          delete componentProps.model
+        }
+        const ComponentProps = Object.assign({}, componentModel && { model: componentModel } || {}, {
+          ref: '_component',
+          attrs: Object.assign({}, {
+            ...((componentProps && componentProps.attrs) || componentProps)
+          }),
+          on: Object.assign({}, {
+            ...((componentProps && componentProps.on) || componentProps)
+          })
+        })
+
+        return h(Modal, ModalProps, [h(component, ComponentProps)])
+      }
+    }).$mount(dialogDiv)
+  }
+
+  Object.defineProperty(Vue.prototype, '$dialog', {
+    get: () => {
+      return function () {
+        dialog.apply(this, arguments)
+      }
+    }
+  })
+}
diff --git a/src/components/Ellipsis/Ellipsis.vue b/src/components/Ellipsis/Ellipsis.vue
new file mode 100644
index 0000000..5d59200
--- /dev/null
+++ b/src/components/Ellipsis/Ellipsis.vue
@@ -0,0 +1,64 @@
+<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>
diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js
new file mode 100644
index 0000000..91e3ff4
--- /dev/null
+++ b/src/components/Ellipsis/index.js
@@ -0,0 +1,3 @@
+import Ellipsis from './Ellipsis'
+
+export default Ellipsis
diff --git a/src/components/Ellipsis/index.md b/src/components/Ellipsis/index.md
new file mode 100644
index 0000000..f528ac7
--- /dev/null
+++ b/src/components/Ellipsis/index.md
@@ -0,0 +1,38 @@
+# 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
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
new file mode 100644
index 0000000..4229a64
--- /dev/null
+++ b/src/components/FileUpload/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :action="uploadImgUrl"
+      :list-type="type == 'image' ? 'picture-card' : 'picture'"
+      :show-upload-list="false"
+      :headers="headers"
+      :before-upload="beforeUpload"
+      @change="handleChange"
+    >
+      <img v-if="value && type == 'image'" :src="value" alt="avatar" />
+      <div v-if="type == 'file'">
+        <a-button> <a-icon type="upload" /> 上传 </a-button>
+      </div>
+      <div v-if="value == '' || value == null">
+        <span v-if="type == 'image'">
+          <a-icon :type="loading ? 'loading' : 'plus'" />
+          <div class="ant-upload-text">
+            上传
+          </div>
+        </span>
+      </div>
+    </a-upload>
+    <span v-if="value && type == 'file'">
+      <br>
+      <a :href="value" target="_blank" >{{ value }}</a>
+    </span>
+  </div>
+</template>
+
+<script>
+import storage from 'store'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+export default {
+  name: 'ImageUpload',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'image'
+    },
+    count: {
+      type: Number,
+      default: 1
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      open: false,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload',
+      headers: {
+        Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
+      }
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleCancel () {
+      this.previewVisible = false
+    },
+    async handleChange (info) {
+      if (info.file.status === 'uploading') {
+        this.loading = true
+        return
+      }
+      if (info.file.status === 'done') {
+        if (info.file.response.code !== 200) {
+          this.$message.error('上传失败' + info.file.response.msg)
+          this.loading = false
+          return
+        }
+        this.loading = false
+        this.$emit('input', info.file.response.url)
+      }
+    },
+    beforeUpload (file) {
+      // 文件类型(file.type)、大小限制(file.size)
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error('图片大小限制 2MB!')
+      }
+      return isLt2M
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+img {
+  width: 128px;
+  height: 128px;
+}
+
+</style>
diff --git a/src/components/FooterToolbar/FooterToolBar.vue b/src/components/FooterToolbar/FooterToolBar.vue
new file mode 100644
index 0000000..ea07123
--- /dev/null
+++ b/src/components/FooterToolbar/FooterToolBar.vue
@@ -0,0 +1,47 @@
+<template>
+  <div :class="prefixCls" :style="{ width: barWidth, transition: '0.3s all' }">
+    <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'
+    },
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    },
+    siderWidth: {
+      type: Number,
+      default: undefined
+    },
+    extra: {
+      type: [String, Object],
+      default: ''
+    }
+  },
+  computed: {
+    barWidth () {
+      return this.isMobile ? undefined : `calc(100% - ${this.collapsed ? 80 : this.siderWidth || 256}px)`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/components/FooterToolbar/index.js b/src/components/FooterToolbar/index.js
new file mode 100644
index 0000000..a0bf145
--- /dev/null
+++ b/src/components/FooterToolbar/index.js
@@ -0,0 +1,4 @@
+import FooterToolBar from './FooterToolBar'
+import './index.less'
+
+export default FooterToolBar
diff --git a/src/components/FooterToolbar/index.less b/src/components/FooterToolbar/index.less
new file mode 100644
index 0000000..f56273f
--- /dev/null
+++ b/src/components/FooterToolbar/index.less
@@ -0,0 +1,23 @@
+@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
diff --git a/src/components/FooterToolbar/index.md b/src/components/FooterToolbar/index.md
new file mode 100644
index 0000000..c1aec2c
--- /dev/null
+++ b/src/components/FooterToolbar/index.md
@@ -0,0 +1,48 @@
+# 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 | -
+
diff --git a/src/components/GlobalFooter/index.vue b/src/components/GlobalFooter/index.vue
new file mode 100644
index 0000000..701fa8f
--- /dev/null
+++ b/src/components/GlobalFooter/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <global-footer class="footer custom-render">
+    <template v-slot:links>
+    </template>
+    <template v-slot:copyright>
+      <div class="footer">
+        <div class="copyright">
+          Copyright &copy; {{year}} <a href="" target="_blank">算力云后台管理系统</a>
+        </div>
+      </div>
+    </template>
+  </global-footer>
+</template>
+
+<script>
+import { GlobalFooter } from '@/components/ProLayout'
+
+export default {
+  name: 'ProGlobalFooter',
+  components: {
+    GlobalFooter
+  },
+  data () {
+    const date = new Date()
+    return {
+      year: date.getFullYear()
+    }
+  }
+}
+</script>
diff --git a/src/components/GlobalHeader/AvatarDropdown.vue b/src/components/GlobalHeader/AvatarDropdown.vue
new file mode 100644
index 0000000..b17f6fa
--- /dev/null
+++ b/src/components/GlobalHeader/AvatarDropdown.vue
@@ -0,0 +1,81 @@
+<template>
+  <a-dropdown v-if="nickname" placement="bottomRight">
+    <span class="ant-pro-account-avatar">
+      <a-avatar size="small" :src="avatar" class="antd-pro-global-header-index-avatar" />
+      <span>{{ nickname }}</span>
+    </span>
+    <template v-slot:overlay>
+      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
+        <a-menu-item v-if="menu" key="center" @click="handleToCenter">
+          <a-icon type="user" />
+          个人中心
+        </a-menu-item>
+        <a-menu-item v-if="menu" key="settings" @click="handleToSettings">
+          <a-icon type="setting" />
+          个人设置
+        </a-menu-item>
+        <a-menu-divider v-if="menu" />
+        <a-menu-item key="logout" @click="handleLogout">
+          <a-icon type="logout" />
+          退出登录
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+  <span v-else>
+    <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
+  </span>
+</template>
+
+<script>
+import { Modal } from 'ant-design-vue'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'AvatarDropdown',
+  props: {
+    menu: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'avatar',
+      'nickname'
+    ])
+  },
+  methods: {
+    handleToCenter () {
+      this.$message.warning('敬请期待')
+      // this.$router.push({ path: '/account/center' })
+    },
+    handleToSettings () {
+      this.$router.push({ path: '/account/settings' })
+    },
+    handleLogout (e) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定注销并退出系统吗？',
+        onOk: () => {
+          return this.$store.dispatch('Logout').then(() => {
+            location.href = '/index'
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-pro-drop-down {
+  /deep/ .action {
+    margin-right: 8px;
+  }
+  /deep/ .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+</style>
diff --git a/src/components/GlobalHeader/RightContent.vue b/src/components/GlobalHeader/RightContent.vue
new file mode 100644
index 0000000..4ed26f2
--- /dev/null
+++ b/src/components/GlobalHeader/RightContent.vue
@@ -0,0 +1,78 @@
+<template>
+  <div :class="wrpCls">
+    <a-space size="middle">
+      <a-tooltip placement="bottom">
+        <template slot="title">
+          文档
+        </template>
+        <a-icon type="question-circle-o" @click="toDoc" :style="{ fontSize: '20px' }"/>
+      </a-tooltip>
+      <screenfull />
+      <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
+      <!-- 暂只支持中文，国际化可自行扩展 -->
+      <select-lang :class="prefixCls" />
+    </a-space>
+  </div>
+</template>
+
+<script>
+import AvatarDropdown from './AvatarDropdown'
+import Screenfull from '@/components/Screenfull'
+import SelectLang from '@/components/SelectLang'
+
+export default {
+  name: 'RightContent',
+  components: {
+    AvatarDropdown,
+    Screenfull,
+    SelectLang
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-global-header-index-action'
+    },
+    isMobile: {
+      type: Boolean,
+      default: () => false
+    },
+    topMenu: {
+      type: Boolean,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      showMenu: true,
+      currentUser: {},
+      docUrl: 'https://docs.geekera.cn/RuoYi-Antdv/',
+      githubUrl: 'https://github.com/fuzui/RuoYi-Antdv'
+    }
+  },
+  computed: {
+    wrpCls () {
+      return {
+        'ant-pro-global-header-index-right': true,
+        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
+      }
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.currentUser = {
+        name: 'RuoYi'
+      }
+    }, 1500)
+  },
+  methods: {
+    toDoc () {
+      this.$message.warning('敬请期待')
+      // window.open(this.docUrl)
+    }
+  }
+}
+</script>
diff --git a/src/components/GridContent/index.js b/src/components/GridContent/index.js
new file mode 100644
index 0000000..a468126
--- /dev/null
+++ b/src/components/GridContent/index.js
@@ -0,0 +1,44 @@
+'use strict'
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+exports['default'] = void 0
+
+require('./index.less')
+
+var _vueTypes = _interopRequireDefault(require('ant-design-vue/es/_util/vue-types'))
+
+var _util = require('../../utils/util')
+
+function _interopRequireDefault (obj) { return obj && obj.__esModule ? obj : { 'default': obj } }
+
+function _defineProperty (obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true })
+  } else {
+    obj[key] = value
+  } return obj
+}
+
+var GridContent = {
+  name: 'GridContent',
+  functional: true,
+  props: {
+    children: _vueTypes['default'].any,
+    contentWidth: _vueTypes['default'].oneOf(['Fluid', 'Fixed']).def('Fluid')
+  },
+  render: function render (h, content) {
+    var _classNames
+
+    var contentWidth = content.props.contentWidth
+    var children = content.children
+    var propsContentWidth = (0, _util.layoutContentWidth)(contentWidth)
+    var classNames = (_classNames = {}, _defineProperty(_classNames, 'ant-pro-grid-content', true), _defineProperty(_classNames, 'wide', propsContentWidth), _classNames)
+    return h('div', {
+      'class': classNames
+    }, [children])
+  }
+}
+var _default = GridContent
+exports['default'] = _default
diff --git a/src/components/GridContent/index.less b/src/components/GridContent/index.less
new file mode 100644
index 0000000..9f15f75
--- /dev/null
+++ b/src/components/GridContent/index.less
@@ -0,0 +1,13 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@grid-content-prefix-cls: ~'@{ant-prefix}-pro-grid-content';
+
+.@{grid-content-prefix-cls} {
+  width: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+  &.wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
diff --git a/src/components/IconSelector/IconSelector.vue b/src/components/IconSelector/IconSelector.vue
new file mode 100644
index 0000000..dcf96b5
--- /dev/null
+++ b/src/components/IconSelector/IconSelector.vue
@@ -0,0 +1,109 @@
+<template>
+  <div :class="prefixCls">
+    <a-tabs v-model="currentTab" @change="handleTabChange">
+      <a-tab-pane v-for="v in icons" :key="v.key">
+        <span slot="tab" :style="{ fontSize: '10px' }">
+          {{ v.title }}
+        </span>
+        <ul v-if="v.key != 'custom'">
+          <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: '24px' }" />
+          </li>
+        </ul>
+        <ul v-if="v.key == 'custom'">
+          <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
+            <a-icon :component="allIcon[icon + 'Icon']" :style="{ fontSize: '24px' }"/>
+          </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
+    },
+    svgIcons: {
+      type: Array,
+      required: true
+    },
+    allIcon: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      selectedIcon: this.value || '',
+      currentTab: 'custom',
+      icons: icons
+    }
+  },
+  watch: {
+    value (val) {
+      this.selectedIcon = val
+      this.autoSwitchTab()
+    }
+  },
+  created () {
+    if (this.value) {
+      this.autoSwitchTab()
+    }
+    const custom = [{
+      key: 'custom',
+      title: '自定义图标',
+      icons: this.svgIcons
+    }]
+    this.icons = custom.concat(this.icons)
+  },
+  methods: {
+    handleSelectedIcon (icon) {
+      this.selectedIcon = icon
+      this.$emit('change', icon)
+    },
+    handleTabChange (activeKey) {
+      this.currentTab = activeKey
+    },
+    autoSwitchTab () {
+      const icons = this.icons
+      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>
diff --git a/src/components/IconSelector/README.md b/src/components/IconSelector/README.md
new file mode 100644
index 0000000..503095d
--- /dev/null
+++ b/src/components/IconSelector/README.md
@@ -0,0 +1,48 @@
+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 | -      |
diff --git a/src/components/IconSelector/icons.js b/src/components/IconSelector/icons.js
new file mode 100644
index 0000000..920f464
--- /dev/null
+++ b/src/components/IconSelector/icons.js
@@ -0,0 +1,36 @@
+/**
+ * 增加新的图标时，请遵循以下数据结构
+ * 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']
+  }
+]
diff --git a/src/components/IconSelector/index.js b/src/components/IconSelector/index.js
new file mode 100644
index 0000000..2d27d70
--- /dev/null
+++ b/src/components/IconSelector/index.js
@@ -0,0 +1,2 @@
+import IconSelector from './IconSelector'
+export default IconSelector
diff --git a/src/components/MultiTab/MultiTab.vue b/src/components/MultiTab/MultiTab.vue
new file mode 100644
index 0000000..3d62bc4
--- /dev/null
+++ b/src/components/MultiTab/MultiTab.vue
@@ -0,0 +1,163 @@
+<script>
+import events from './events'
+import { i18nRender } from '@/locales'
+
+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' }}>{ i18nRender(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>
diff --git a/src/components/MultiTab/events.js b/src/components/MultiTab/events.js
new file mode 100644
index 0000000..b0230b5
--- /dev/null
+++ b/src/components/MultiTab/events.js
@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()
diff --git a/src/components/MultiTab/index.js b/src/components/MultiTab/index.js
new file mode 100644
index 0000000..02a1c77
--- /dev/null
+++ b/src/components/MultiTab/index.js
@@ -0,0 +1,40 @@
+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
diff --git a/src/components/MultiTab/index.less b/src/components/MultiTab/index.less
new file mode 100644
index 0000000..99eadbe
--- /dev/null
+++ b/src/components/MultiTab/index.less
@@ -0,0 +1,21 @@
+@import '../index';
+
+@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab";
+@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper";
+
+.@{multi-tab-prefix-cls} {
+  margin: -23px -24px 24px -24px;
+  background: #fff;
+}
+
+.topmenu .@{multi-tab-wrapper-prefix-cls} {
+  max-width: 98%;
+  margin: 0 auto;
+}
+
+.@{multi-tab-wrapper-prefix-cls} > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  border-color: #fff;
+  border-top-right-radius: 30px;
+  background: #fff;
+  box-shadow: 2px 0 4px rgb(0 21 41 / 5%);
+}
\ No newline at end of file
diff --git a/src/components/NProgress/nprogress.less b/src/components/NProgress/nprogress.less
new file mode 100644
index 0000000..7826c0e
--- /dev/null
+++ b/src/components/NProgress/nprogress.less
@@ -0,0 +1,76 @@
+@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); }
+}
+
diff --git a/src/components/NoticeIcon/NoticeIcon.vue b/src/components/NoticeIcon/NoticeIcon.vue
new file mode 100644
index 0000000..8ae1c80
--- /dev/null
+++ b/src/components/NoticeIcon/NoticeIcon.vue
@@ -0,0 +1,90 @@
+<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" style="padding: 0 18px">
+      <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>
diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js
new file mode 100644
index 0000000..659b9ec
--- /dev/null
+++ b/src/components/NoticeIcon/index.js
@@ -0,0 +1,2 @@
+import NoticeIcon from './NoticeIcon'
+export default NoticeIcon
diff --git a/src/components/NumberInfo/NumberInfo.vue b/src/components/NumberInfo/NumberInfo.vue
new file mode 100644
index 0000000..bdde3e0
--- /dev/null
+++ b/src/components/NumberInfo/NumberInfo.vue
@@ -0,0 +1,54 @@
+<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>
diff --git a/src/components/NumberInfo/index.js b/src/components/NumberInfo/index.js
new file mode 100644
index 0000000..659a2f3
--- /dev/null
+++ b/src/components/NumberInfo/index.js
@@ -0,0 +1,3 @@
+import NumberInfo from './NumberInfo'
+
+export default NumberInfo
diff --git a/src/components/NumberInfo/index.less b/src/components/NumberInfo/index.less
new file mode 100644
index 0000000..719113d
--- /dev/null
+++ b/src/components/NumberInfo/index.less
@@ -0,0 +1,55 @@
+@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
diff --git a/src/components/NumberInfo/index.md b/src/components/NumberInfo/index.md
new file mode 100644
index 0000000..147adc4
--- /dev/null
+++ b/src/components/NumberInfo/index.md
@@ -0,0 +1,43 @@
+# 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
diff --git a/src/components/Other/CarbonAds.vue b/src/components/Other/CarbonAds.vue
new file mode 100644
index 0000000..1e53ba6
--- /dev/null
+++ b/src/components/Other/CarbonAds.vue
@@ -0,0 +1,114 @@
+<script>
+const carbonUrl = '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=antdvcom'
+export default {
+  props: {
+    isMobile: Boolean
+  },
+  watch: {
+    $route (e, t) {
+      const adId = '#carbonads'
+      // if(isGitee) {
+      //   adId = '#cf';
+      // }
+      if (e.path !== t.path && this.$el.querySelector(adId)) {
+        this.$el.innerHTML = ''
+        this.load()
+      }
+      this.adInterval && clearInterval(this.adInterval)
+      this.adInterval = setInterval(() => {
+        if (!this.$el.querySelector(adId)) {
+          this.$el.innerHTML = ''
+          this.load()
+        }
+      }, 20000)
+    }
+  },
+  mounted () {
+    this.load()
+  },
+  methods: {
+    load () {
+      // if(isGitee) {
+      //   axios.get('https://api.codefund.app/properties/162/funder.html?template=horizontal')
+      //   .then(function (response) {
+      //     document.getElementById("codefund-ads").innerHTML = response.data;
+      //   });
+      // } else
+      if (carbonUrl) {
+        const e = document.createElement('script')
+        e.id = '_carbonads_js'
+        e.src = carbonUrl
+        this.$el.appendChild(e)
+      }
+    }
+  },
+  render () {
+    return <div id="carbon-ads" class={this.isMobile ? 'carbon-mobile' : ''} />
+  }
+}
+</script>
+<style lang="less">
+#carbon-ads {
+  width: 256px;
+  /* float: right; */
+  margin-top: 75px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 0;
+  overflow: hidden;
+  z-index: 100;
+  background-color: #fff;
+  /* border-radius: 3px; */
+  font-size: 13px;
+  background: #f5f5f5;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+}
+#carbonads {
+  overflow: hidden;
+}
+#carbon-ads a {
+  display: inline-block;
+  color: #7f8c8d;
+  font-weight: normal;
+}
+#carbon-ads span {
+  color: #7f8c8d;
+}
+#carbon-ads img {
+  float: left;
+  padding-right: 10px;
+}
+#carbon-ads .carbon-img,
+#carbon-ads .carbon-text {
+  display: block;
+  font-weight: normal;
+  color: #34495e;
+}
+#carbon-ads .carbon-text {
+  padding-top: 6px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+#carbon-ads .carbon-poweredby {
+  color: #aaa;
+  font-weight: normal;
+  line-height: 1.2;
+  margin-top: 6px;
+}
+#carbon-ads.carbon-mobile {
+  width: 100%;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  margin-bottom: 15px;
+  margin-top: 5px;
+  .carbon-img {
+    float: left;
+    margin-right: 10px;
+  }
+}
+</style>
diff --git a/src/components/PageLoading/index.jsx b/src/components/PageLoading/index.jsx
new file mode 100644
index 0000000..af6d6d6
--- /dev/null
+++ b/src/components/PageLoading/index.jsx
@@ -0,0 +1,106 @@
+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
+}
diff --git a/src/components/ProLayout/BasicLayout.jsx b/src/components/ProLayout/BasicLayout.jsx
new file mode 100644
index 0000000..c1992e9
--- /dev/null
+++ b/src/components/ProLayout/BasicLayout.jsx
@@ -0,0 +1,165 @@
+import './BasicLayout.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+import 'ant-design-vue/es/layout/style'
+import Layout from 'ant-design-vue/es/layout'
+
+import { ContainerQuery } from 'vue-container-query'
+import { SiderMenuWrapper } from './components'
+import { getComponentFromProp, isFun } from './utils/util'
+import { SiderMenuProps } from './components/SiderMenu'
+import HeaderView, { HeaderViewProps } from './Header'
+import WrapContent from './WrapContent'
+import ConfigProvider from './components/ConfigProvider'
+import PageHeaderWrapper from './components/PageHeaderWrapper'
+
+export const BasicLayoutProps = {
+  ...SiderMenuProps,
+  ...HeaderViewProps,
+  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  // contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
+  locale: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('en-US'),
+  breadcrumbRender: PropTypes.func,
+  disableMobile: PropTypes.bool.def(false),
+  mediaQuery: PropTypes.object.def({}),
+  handleMediaQuery: PropTypes.func,
+  footerRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(undefined)
+}
+
+const MediaQueryEnum = {
+  'screen-xs': {
+    maxWidth: 575
+  },
+  'screen-sm': {
+    minWidth: 576,
+    maxWidth: 767
+  },
+  'screen-md': {
+    minWidth: 768,
+    maxWidth: 991
+  },
+  'screen-lg': {
+    minWidth: 992,
+    maxWidth: 1199
+  },
+  'screen-xl': {
+    minWidth: 1200,
+    maxWidth: 1599
+  },
+  'screen-xxl': {
+    minWidth: 1600
+  }
+}
+
+const getPaddingLeft = (
+  hasLeftPadding,
+  collapsed = undefined,
+  siderWidth
+) => {
+  if (hasLeftPadding) {
+    return collapsed ? 80 : siderWidth
+  }
+  return 0
+}
+
+const headerRender = (h, props) => {
+  if (props.headerRender === false) {
+    return null
+  }
+  return <HeaderView { ...{ props } } />
+}
+
+const defaultI18nRender = (key) => key
+
+const BasicLayout = {
+  name: 'BasicLayout',
+  functional: true,
+  props: BasicLayoutProps,
+  render (h, content) {
+    const { props, children } = content
+    const {
+      layout,
+      // theme,
+      isMobile,
+      collapsed,
+      mediaQuery,
+      handleMediaQuery,
+      handleCollapse,
+      siderWidth,
+      fixSiderbar,
+      i18nRender = defaultI18nRender
+    } = props
+
+    const footerRender = getComponentFromProp(content, 'footerRender')
+    const rightContentRender = getComponentFromProp(content, 'rightContentRender')
+    const collapsedButtonRender = getComponentFromProp(content, 'collapsedButtonRender')
+    const menuHeaderRender = getComponentFromProp(content, 'menuHeaderRender')
+    const breadcrumbRender = getComponentFromProp(content, 'breadcrumbRender')
+    const headerContentRender = getComponentFromProp(content, 'headerContentRender')
+    const menuRender = getComponentFromProp(content, 'menuRender')
+
+    const isTopMenu = layout === 'topmenu'
+    const hasSiderMenu = !isTopMenu
+    // If it is a fix menu, calculate padding
+    // don't need padding in phone mode
+    const hasLeftPadding = fixSiderbar && !isTopMenu && !isMobile
+    const cdProps = {
+      ...props,
+      hasSiderMenu,
+      footerRender,
+      menuHeaderRender,
+      rightContentRender,
+      collapsedButtonRender,
+      breadcrumbRender,
+      headerContentRender,
+      menuRender
+    }
+
+    return (
+      <ConfigProvider i18nRender={i18nRender} contentWidth={props.contentWidth} breadcrumbRender={breadcrumbRender}>
+        <ContainerQuery query={MediaQueryEnum} onChange={handleMediaQuery}>
+          <Layout class={{
+            'ant-pro-basicLayout': true,
+            'ant-pro-topmenu': isTopMenu,
+            ...mediaQuery
+          }}>
+            <SiderMenuWrapper
+              { ...{ props: cdProps } }
+              collapsed={collapsed}
+              onCollapse={handleCollapse}
+            />
+            <Layout class={[layout]} style={{
+              paddingLeft: hasSiderMenu
+                ? `${getPaddingLeft(!!hasLeftPadding, collapsed, siderWidth)}px`
+                : undefined,
+              minHeight: '100vh'
+            }}>
+              {headerRender(h, {
+                ...cdProps,
+                mode: 'horizontal'
+              })}
+              <WrapContent class="ant-pro-basicLayout-content" contentWidth={props.contentWidth}>
+                {children}
+              </WrapContent>
+              { footerRender !== false && (
+                <Layout.Footer>
+                  { isFun(footerRender) && footerRender(h) || footerRender }
+                </Layout.Footer>
+                ) || null
+              }
+            </Layout>
+          </Layout>
+        </ContainerQuery>
+      </ConfigProvider>
+    )
+  }
+}
+
+BasicLayout.install = function (Vue) {
+  Vue.component(PageHeaderWrapper.name, PageHeaderWrapper)
+  Vue.component('PageContainer', PageHeaderWrapper)
+  Vue.component('ProLayout', BasicLayout)
+}
+
+export default BasicLayout
diff --git a/src/components/ProLayout/BasicLayout.less b/src/components/ProLayout/BasicLayout.less
new file mode 100644
index 0000000..548446d
--- /dev/null
+++ b/src/components/ProLayout/BasicLayout.less
@@ -0,0 +1,101 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
+@sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider-menu';
+@nav-header-height: @layout-header-height;
+
+.@{basicLayout-prefix-cls} {
+
+  &:not('.ant-pro-basicLayout-mobile') {
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
+    }
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.12);
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  // BFC
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+
+  .ant-layout-header {
+    &:not(.ant-pro-top-menu) {
+      background: @component-background;
+    }
+
+    &.ant-pro-fixed-header {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+    transition: all 0.2s;
+    .@{ant-prefix}-pro-page-header-wrap {
+      margin: -24px -24px 0;
+    }
+    &-disable-margin {
+      margin: 0;
+      > div > .@{ant-prefix}-pro-page-header-wrap {
+        margin: 0;
+      }
+    }
+    > .ant-layout {
+      max-height: 100%;
+    }
+  }
+
+  // append hook styles
+
+  .ant-layout-sider-children {
+    height: 100%;
+  }
+
+  .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+    transition: all 0.2s;
+    .@{ant-prefix}-pro-page-header-wrap {
+      margin: -24px -24px 0;
+    }
+    &-disable-margin {
+      margin: 0;
+      > div > .@{ant-prefix}-pro-page-header-wrap {
+        margin: 0;
+      }
+    }
+    > .ant-layout {
+      max-height: 100%;
+    }
+  }
+
+  .color-picker {
+    margin: 10px 0;
+  }
+}
diff --git a/src/components/ProLayout/BlockLayout.jsx b/src/components/ProLayout/BlockLayout.jsx
new file mode 100644
index 0000000..48b6157
--- /dev/null
+++ b/src/components/ProLayout/BlockLayout.jsx
@@ -0,0 +1,9 @@
+const BlockLayout = {
+  name: 'BlockLayout',
+  functional: true,
+  render (createElement, content) {
+    return content.children
+  }
+}
+
+export default BlockLayout
diff --git a/src/components/ProLayout/Header.jsx b/src/components/ProLayout/Header.jsx
new file mode 100644
index 0000000..28b9890
--- /dev/null
+++ b/src/components/ProLayout/Header.jsx
@@ -0,0 +1,109 @@
+import './Header.less'
+
+import 'ant-design-vue/es/layout/style'
+import Layout from 'ant-design-vue/es/layout'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import BaseMenu from './components/RouteMenu/BaseMenu'
+import { defaultRenderLogoAntTitle, SiderMenuProps } from './components/SiderMenu/SiderMenu'
+import GlobalHeader, { GlobalHeaderProps } from './components/GlobalHeader'
+import { VueFragment } from './components'
+import { isFun } from './utils/util'
+
+const { Header } = Layout
+
+export const HeaderViewProps = {
+  ...GlobalHeaderProps,
+  ...SiderMenuProps,
+  isMobile: PropTypes.bool.def(false),
+  collapsed: PropTypes.bool,
+  logo: PropTypes.any,
+  hasSiderMenu: PropTypes.bool,
+  autoHideHeader: PropTypes.bool,
+  menuRender: PropTypes.any,
+  headerRender: PropTypes.any,
+  rightContentRender: PropTypes.any,
+  visible: PropTypes.bool.def(true)
+}
+
+const renderContent = (h, props) => {
+  const isTop = props.layout === 'topmenu'
+  const maxWidth = 1200 - 280 - 120
+  const contentWidth = props.contentWidth === 'Fixed'
+  const baseCls = 'ant-pro-top-nav-header'
+  const { logo, title, theme, isMobile, headerRender, rightContentRender, menuHeaderRender } = props
+  const rightContentProps = { theme, isTop, isMobile }
+  let defaultDom = <GlobalHeader {...{ props: props }} />
+  if (isTop && !isMobile) {
+    defaultDom = (
+      <div class={[baseCls, theme]}>
+        <div class={[`${baseCls}-main`, contentWidth ? 'wide' : '']}>
+          {menuHeaderRender && (
+            <div class={`${baseCls}-left`}>
+              <div class={`${baseCls}-logo`} key="logo" id="logo">
+                {defaultRenderLogoAntTitle(h, { logo, title, menuHeaderRender })}
+              </div>
+            </div>
+          )}
+          <div class={`${baseCls}-menu`} style={{ maxWidth: `${maxWidth}px`, flex: 1 }}>
+            <BaseMenu {...{ props: props }} />
+          </div>
+          {isFun(rightContentRender) && rightContentRender(h, rightContentProps) || rightContentRender}
+        </div>
+      </div>
+    )
+  }
+  if (headerRender) {
+    return headerRender(h, props)
+  }
+  return defaultDom
+}
+
+const HeaderView = {
+  name: 'HeaderView',
+  props: HeaderViewProps,
+  render (h) {
+    const {
+      visible,
+      isMobile,
+      layout,
+      collapsed,
+      siderWidth,
+      fixedHeader,
+      hasSiderMenu
+    } = this.$props
+    const props = this.$props
+    const isTop = layout === 'topmenu'
+
+    const needSettingWidth = fixedHeader && hasSiderMenu && !isTop && !isMobile
+
+    const className = {
+      'ant-pro-fixed-header': fixedHeader,
+      'ant-pro-top-menu': isTop
+    }
+
+    // 没有 <></> 暂时代替写法
+    return (
+      visible ? (
+        <VueFragment>
+          { fixedHeader && <Header />}
+          <Header
+            style={{
+              padding: 0,
+              width: needSettingWidth
+                ? `calc(100% - ${collapsed ? 80 : siderWidth}px)`
+                : '100%',
+              zIndex: 9,
+              right: fixedHeader ? 0 : undefined
+            }}
+            class={className}
+          >
+            {renderContent(h, props)}
+          </Header>
+        </VueFragment>
+      ) : null
+    )
+  }
+}
+
+export default HeaderView
diff --git a/src/components/ProLayout/Header.less b/src/components/ProLayout/Header.less
new file mode 100644
index 0000000..7bd9f57
--- /dev/null
+++ b/src/components/ProLayout/Header.less
@@ -0,0 +1,91 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@top-nav-header-prefix-cls: ~'@{ant-prefix}-pro-top-nav-header';
+@pro-layout-fixed-header-prefix-cls: ~'@{ant-prefix}-pro-fixed-header';
+
+.@{top-nav-header-prefix-cls} {
+  position: relative;
+  width: 100%;
+  height: @layout-header-height;
+  box-shadow: @box-shadow-base;
+  transition: background 0.3s, width 0.2s;
+  .ant-menu-submenu.ant-menu-submenu-horizontal {
+    height: 100%;
+    line-height: @layout-header-height;
+    .ant-menu-submenu-title {
+      height: 100%;
+    }
+  }
+
+  &.light {
+    background-color: @component-background;
+    h1 {
+      color: #002140;
+    }
+  }
+
+  &-main {
+    display: flex;
+    height: @layout-header-height;
+    padding-left: 24px;
+    &.wide {
+      max-width: 1200px;
+      margin: auto;
+      padding-left: 0;
+    }
+    .left {
+      display: flex;
+      flex: 1;
+    }
+    .right {
+      width: 324px;
+    }
+  }
+
+  &-logo {
+    position: relative;
+    width: 165px;
+    height: @layout-header-height;
+    overflow: hidden;
+    line-height: @layout-header-height;
+    transition: all 0.3s;
+    img, svg {
+      display: inline-block;
+      height: 32px;
+      width: 32px;
+      vertical-align: middle;
+    }
+    h1 {
+      display: inline-block;
+      margin: 0 0 0 12px;
+      color: @btn-primary-color;
+      font-weight: 400;
+      font-size: 16px;
+      vertical-align: top;
+    }
+  }
+  &-menu {
+    .ant-menu.ant-menu-horizontal {
+      height: @layout-header-height;
+      line-height: @layout-header-height;
+      border: none;
+    }
+  }
+}
+
+.@{pro-layout-fixed-header-prefix-cls} {
+  z-index: 9;
+  width: 100%;
+  transition: width 0.2s;
+}
+
+.drop-down {
+  &.menu {
+    .anticon {
+      margin-right: 8px;
+    }
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+}
diff --git a/src/components/ProLayout/PageView.jsx b/src/components/ProLayout/PageView.jsx
new file mode 100644
index 0000000..66ad750
--- /dev/null
+++ b/src/components/ProLayout/PageView.jsx
@@ -0,0 +1,14 @@
+import { PageHeaderWrapper } from './components'
+
+const PageView = {
+  name: 'PageView',
+  render () {
+    return (
+      <PageHeaderWrapper>
+        <router-view />
+      </PageHeaderWrapper>
+    )
+  }
+}
+
+export default PageView
diff --git a/src/components/ProLayout/WrapContent.jsx b/src/components/ProLayout/WrapContent.jsx
new file mode 100644
index 0000000..983af65
--- /dev/null
+++ b/src/components/ProLayout/WrapContent.jsx
@@ -0,0 +1,44 @@
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+import 'ant-design-vue/es/layout/style'
+import Layout from 'ant-design-vue/es/layout'
+import ConfigProvider from 'ant-design-vue/es/config-provider'
+import GridContent from './components/GridContent'
+
+const { Content } = Layout
+
+const WrapContentProps = {
+  isChildrenLayout: PropTypes.bool,
+  location: PropTypes.any,
+  contentHeight: PropTypes.number,
+  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
+}
+
+const WrapContent = {
+  name: 'WrapContent',
+  props: WrapContentProps,
+  render (h) {
+    const {
+      isChildrenLayout,
+      contentWidth
+    } = this.$props
+    return (
+      <Content>
+        <ConfigProvider
+          getPopupContainer={(el, dialogContext) => {
+            if (isChildrenLayout) {
+              return el.parentNode()
+            }
+            return document.body
+          }}
+        >
+          <div class="ant-pro-basicLayout-children-content-wrap">
+            <GridContent contentWidth={contentWidth}>{this.$slots.default}</GridContent>
+          </div>
+        </ConfigProvider>
+      </Content>
+    )
+  }
+}
+
+export default WrapContent
diff --git a/src/components/ProLayout/components/ConfigProvider/index.js b/src/components/ProLayout/components/ConfigProvider/index.js
new file mode 100644
index 0000000..a246071
--- /dev/null
+++ b/src/components/ProLayout/components/ConfigProvider/index.js
@@ -0,0 +1,27 @@
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+const ProConfigProviderProps = {
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
+  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  breadcrumbRender: PropTypes.func
+}
+
+const ConfigProvider = {
+  name: 'ProConfigProvider',
+  props: ProConfigProviderProps,
+  provide () {
+    const _self = this
+    return {
+      locale: _self.$props.i18nRender,
+      contentWidth: _self.$props.contentWidth,
+      breadcrumbRender: _self.$props.breadcrumbRender
+    }
+  },
+  render () {
+    const { $scopedSlots } = this
+    const children = this.children || $scopedSlots.default
+    return children()
+  }
+}
+
+export default ConfigProvider
diff --git a/src/components/ProLayout/components/DocumentTitle/SideEffect/index.js b/src/components/ProLayout/components/DocumentTitle/SideEffect/index.js
new file mode 100644
index 0000000..1645a08
--- /dev/null
+++ b/src/components/ProLayout/components/DocumentTitle/SideEffect/index.js
@@ -0,0 +1,17 @@
+/* eslint-disable */
+class SideEffect {
+  constructor ({ propsToState, handleStateChange }) {
+    if (typeof propsToState !== 'function') {
+      throw new Error('Expected propsToState to be a function.')
+    }
+    if (typeof handleStateChange !== 'function') {
+      throw new Error('Expected handleStateChange to be a function.')
+    }
+    this.options = {
+      propsToState,
+      handleStateChange
+    }
+  }
+}
+
+export default SideEffect
diff --git a/src/components/ProLayout/components/DocumentTitle/index.js b/src/components/ProLayout/components/DocumentTitle/index.js
new file mode 100644
index 0000000..533f958
--- /dev/null
+++ b/src/components/ProLayout/components/DocumentTitle/index.js
@@ -0,0 +1,89 @@
+// import SideEffect from './SideEffect'
+import { setDocumentTitle } from './util'
+
+// const sideEffect = new SideEffect({
+//   propsToState (propsList) {
+//     var innermostProps = propsList[propsList.length - 1]
+//     if (innermostProps) {
+//       return innermostProps.title
+//     }
+//   },
+//   handleStateChange (title, prefix) {
+//     console.log('title', title, prefix)
+//     const nextTitle = `${(title || '')} - ${prefix}`
+//     if (nextTitle !== document.title) {
+//       setDocumentTitle(nextTitle)
+//     }
+//   }
+// })
+
+const handleStateChange = (title, prefix) => {
+  const nextTitle = `${(title || '')} - ${prefix}`
+  if (nextTitle !== document.title) {
+    setDocumentTitle(nextTitle)
+  }
+}
+
+const DocumentTitle = {
+  name: 'DocumentTitle',
+  functional: true,
+  props: {
+    prefix: {
+      type: String,
+      required: false,
+      default: 'Ant Design Pro'
+    },
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  // { props, data, children }
+  // eslint-disable-next-line
+  render (createElement, { props, data, children }) {
+    handleStateChange(props.title, props.prefix)
+    return children
+  }
+}
+
+DocumentTitle.install = function (Vue) {
+  // const mountedInstances = []
+  // let state
+
+  // function __emit (sideEffect) {
+  //   const options = sideEffect.options
+  //   state = options.propsToState(mountedInstances.map(function (instance) {
+  //     return instance
+  //   }))
+
+  //   options.handleStateChange(state)
+  // }
+
+  // Vue.mixin({
+  //   beforeMount () {
+  //     const sideEffect = this.$options.sideEffect
+  //     if (sideEffect) {
+  //       mountedInstances.push(this)
+  //       __emit(sideEffect)
+  //     }
+  //   },
+  //   updated () {
+  //     const sideEffect = this.$options.sideEffect
+  //     if (sideEffect) {
+  //       __emit(sideEffect)
+  //     }
+  //   },
+  //   beforeDestroy () {
+  //     const sideEffect = this.$options.sideEffect
+  //     if (sideEffect) {
+  //       const index = mountedInstances.indexOf(this)
+  //       mountedInstances.splice(index, 1)
+  //       __emit(sideEffect)
+  //     }
+  //   }
+  // })
+
+  Vue.component(DocumentTitle.name, DocumentTitle)
+}
+
+export default DocumentTitle
diff --git a/src/components/ProLayout/components/DocumentTitle/util.js b/src/components/ProLayout/components/DocumentTitle/util.js
new file mode 100644
index 0000000..f820754
--- /dev/null
+++ b/src/components/ProLayout/components/DocumentTitle/util.js
@@ -0,0 +1,17 @@
+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)
+  }
+}
diff --git a/src/components/ProLayout/components/Fragment.jsx b/src/components/ProLayout/components/Fragment.jsx
new file mode 100644
index 0000000..1ed3e54
--- /dev/null
+++ b/src/components/ProLayout/components/Fragment.jsx
@@ -0,0 +1,7 @@
+export default {
+  name: 'VueFragment',
+  functional: true,
+  render (h, ctx) {
+    return ctx.children.length > 1 ? h('div', {}, ctx.children) : ctx.children
+  }
+}
diff --git a/src/components/ProLayout/components/GlobalFooter/index.jsx b/src/components/ProLayout/components/GlobalFooter/index.jsx
new file mode 100644
index 0000000..2d57c04
--- /dev/null
+++ b/src/components/ProLayout/components/GlobalFooter/index.jsx
@@ -0,0 +1,43 @@
+import './index.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { getComponentFromProp, hasProp } from 'ant-design-vue/lib/_util/props-util'
+
+const GlobalFooterProps = {
+  links: PropTypes.array,
+  copyright: PropTypes.any
+}
+
+const GlobalFooter = {
+  name: 'GlobalFooter',
+  props: GlobalFooterProps,
+  render () {
+    const copyright = getComponentFromProp(this, 'copyright')
+    const links = getComponentFromProp(this, 'links')
+    const linksType = hasProp(links)
+
+    return (
+      <footer class="ant-pro-global-footer">
+        <div class="ant-pro-global-footer-links">
+          {linksType && (
+            links.map(link => (
+              <a
+                key={link.key}
+                title={link.key}
+                target={link.blankTarget ? '_blank' : '_self'}
+                href={link.href}
+              >
+                {link.title}
+              </a>
+            ))
+          ) || links}
+        </div>
+        {copyright && (
+          <div class="ant-pro-global-footer-copyright">{copyright}</div>
+        )}
+      </footer>
+    )
+  }
+}
+
+export default GlobalFooter
diff --git a/src/components/ProLayout/components/GlobalFooter/index.less b/src/components/ProLayout/components/GlobalFooter/index.less
new file mode 100644
index 0000000..67f4b17
--- /dev/null
+++ b/src/components/ProLayout/components/GlobalFooter/index.less
@@ -0,0 +1,31 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@global-footer-prefix-cls: ~'@{ant-prefix}-pro-global-footer';
+
+.@{global-footer-prefix-cls} {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  &-links {
+    margin-bottom: 8px;
+
+    a {
+      color: @text-color-secondary;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+
+      &:hover {
+        color: @text-color;
+      }
+    }
+  }
+
+  &-copyright {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}
diff --git a/src/components/ProLayout/components/GlobalHeader/index.jsx b/src/components/ProLayout/components/GlobalHeader/index.jsx
new file mode 100644
index 0000000..a455820
--- /dev/null
+++ b/src/components/ProLayout/components/GlobalHeader/index.jsx
@@ -0,0 +1,81 @@
+import './index.less'
+
+import debounce from 'lodash/debounce'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { triggerEvent, inBrowser, isFun } from '../../utils/util'
+import 'ant-design-vue/es/icon/style'
+import Icon from 'ant-design-vue/es/icon'
+import { defaultRenderLogo } from '../SiderMenu/SiderMenu'
+
+export const GlobalHeaderProps = {
+  collapsed: PropTypes.bool,
+  handleCollapse: PropTypes.func,
+  isMobile: PropTypes.bool.def(false),
+  fixedHeader: PropTypes.bool.def(false),
+  logo: PropTypes.any,
+  menuRender: PropTypes.any,
+  collapsedButtonRender: PropTypes.any,
+  headerContentRender: PropTypes.any,
+  rightContentRender: PropTypes.any
+}
+
+const defaultRenderCollapsedButton = (h, collapsed) => (
+  <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'}/>
+)
+
+const GlobalHeader = {
+  name: 'GlobalHeader',
+  props: GlobalHeaderProps,
+  render (h) {
+    const { isMobile, logo, rightContentRender, headerContentRender } = this.$props
+    const toggle = () => {
+      const { collapsed, handleCollapse } = this.$props
+      if (handleCollapse) handleCollapse(!collapsed)
+      this.triggerResizeEvent()
+    }
+    const renderCollapsedButton = () => {
+      const {
+        collapsed,
+        collapsedButtonRender = defaultRenderCollapsedButton,
+        menuRender
+      } = this.$props
+      if (collapsedButtonRender !== false && menuRender !== false) {
+        return (
+          <span class="ant-pro-global-header-trigger" onClick={toggle}>
+            {isFun(collapsedButtonRender) && collapsedButtonRender(h, collapsed) || collapsedButtonRender}
+          </span>
+        )
+      }
+      return null
+    }
+
+    const headerCls = 'ant-pro-global-header'
+
+    return (
+      <div class={headerCls}>
+        {isMobile && (
+          <a class={`${headerCls}-logo`} key="logo" href={'/'}>
+            {defaultRenderLogo(h, logo)}
+          </a>
+        )}
+        {renderCollapsedButton()}
+        {headerContentRender && (
+          <div class={`${headerCls}-content`}>
+            {isFun(headerContentRender) && headerContentRender(h, this.$props) || headerContentRender}
+          </div>
+        )}
+        {isFun(rightContentRender) && rightContentRender(h, this.$props) || rightContentRender}
+      </div>
+    )
+  },
+  methods: {
+    triggerResizeEvent: debounce(() => {
+      inBrowser && triggerEvent(window, 'resize')
+    })
+  },
+  beforeDestroy () {
+    this.triggerResizeEvent.cancel && this.triggerResizeEvent.cancel()
+  }
+}
+
+export default GlobalHeader
diff --git a/src/components/ProLayout/components/GlobalHeader/index.less b/src/components/ProLayout/components/GlobalHeader/index.less
new file mode 100644
index 0000000..a7fb1eb
--- /dev/null
+++ b/src/components/ProLayout/components/GlobalHeader/index.less
@@ -0,0 +1,109 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
+
+@pro-header-bg: @component-background;
+@pro-header-hover-bg: @component-background;
+@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+@pro-header-hover-trigger-action-bg: rgba(0,0,0,.025);
+
+.@{global-header-prefix-cls} {
+    position: relative;
+    height: @layout-header-height;
+    padding: 0;
+    background: @pro-header-bg;
+    box-shadow: @pro-header-box-shadow;
+
+    &-index-right {
+        float: right;
+        height: 100%;
+        margin-left: auto;
+        overflow: hidden;
+
+        .@{global-header-prefix-cls}-index-action {
+            display: inline-block;
+            height: 100%;
+            padding: 0 12px;
+            cursor: pointer;
+            transition: all .3s;
+
+            &:hover {
+                background: @pro-header-hover-trigger-action-bg;
+            }
+        }
+    }
+
+    &-logo {
+        display: inline-block;
+        height: @layout-header-height;
+        padding: 0 0 0 24px;
+        font-size: 20px;
+        line-height: @layout-header-height;
+        vertical-align: top;
+        cursor: pointer;
+        img, svg {
+            display: inline-block;
+            width: 32px;
+            height: 32px;
+            vertical-align: middle;
+        }
+    }
+
+    &-menu {
+        .anticon {
+            margin-right: 8px;
+        }
+        .ant-dropdown-menu-item {
+            min-width: 160px;
+        }
+    }
+
+    &-trigger {
+        height: @layout-header-height;
+        line-height: @layout-header-height;
+        vertical-align: top;
+        padding: 0 22px;
+        display: inline-block;
+        cursor: pointer;
+        transition: all 0.3s, padding 0s;
+        .anticon {
+            font-size: 20px;
+            vertical-align: -0.225em;
+        }
+        &:hover {
+            background: @pro-header-hover-trigger-action-bg;
+        }
+    }
+
+    &-content {
+        height: @layout-header-height;
+        line-height: @layout-header-height;
+        vertical-align: top;
+        display: inline-block;
+    }
+
+    .dark {
+        height: @layout-header-height;
+        .action {
+            color: rgba(255, 255, 255, 0.85);
+            > i {
+                color: rgba(255, 255, 255, 0.85);
+            }
+            &:hover,
+            &.opened {
+                background: @primary-color;
+            }
+            .ant-badge {
+                color: rgba(255, 255, 255, 0.85);
+            }
+        }
+    }
+
+    .ant-pro-global-header-index-action {
+        i {
+            color: rgba(0,0,0,.65);
+            vertical-align: middle;
+        }
+    }
+
+}
diff --git a/src/components/ProLayout/components/GridContent/index.jsx b/src/components/ProLayout/components/GridContent/index.jsx
new file mode 100644
index 0000000..4038f12
--- /dev/null
+++ b/src/components/ProLayout/components/GridContent/index.jsx
@@ -0,0 +1,27 @@
+import './index.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { layoutContentWidth } from '../../utils/util'
+
+const GridContent = {
+  name: 'GridContent',
+  functional: true,
+  props: {
+    children: PropTypes.any,
+    contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
+  },
+  render (h, content) {
+    const { contentWidth } = content.props
+    const children = content.children
+
+    const propsContentWidth = layoutContentWidth(contentWidth)
+    const classNames = {
+      'ant-pro-grid-content': true,
+      'wide': propsContentWidth
+    }
+
+    return <div class={classNames}>{children}</div>
+  }
+}
+
+export default GridContent
diff --git a/src/components/ProLayout/components/GridContent/index.less b/src/components/ProLayout/components/GridContent/index.less
new file mode 100644
index 0000000..9f15f75
--- /dev/null
+++ b/src/components/ProLayout/components/GridContent/index.less
@@ -0,0 +1,13 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@grid-content-prefix-cls: ~'@{ant-prefix}-pro-grid-content';
+
+.@{grid-content-prefix-cls} {
+  width: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+  &.wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
diff --git a/src/components/ProLayout/components/PageHeaderWrapper/index.jsx b/src/components/ProLayout/components/PageHeaderWrapper/index.jsx
new file mode 100644
index 0000000..8e8289a
--- /dev/null
+++ b/src/components/ProLayout/components/PageHeaderWrapper/index.jsx
@@ -0,0 +1,234 @@
+import './index.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { isArray } from 'ant-design-vue/lib/_util/vue-types/utils'
+import GridContent from '../GridContent'
+import 'ant-design-vue/es/page-header/style'
+import PageHeader, { PageHeaderProps } from 'ant-design-vue/es/page-header'
+import 'ant-design-vue/es/tabs/style'
+import Tabs from 'ant-design-vue/es/tabs'
+import { getComponentFromProp } from 'ant-design-vue/lib/_util/props-util'
+
+const prefixedClassName = 'ant-pro-page-header-wrap'
+
+const PageHeaderTabConfig = {
+  tabList: PropTypes.array,
+  tabActiveKey: PropTypes.string,
+  tabProps: PropTypes.object,
+  tabChange: PropTypes.func
+}
+
+const PageHeaderWrapperProps = {
+  ...PageHeaderTabConfig,
+  ...PageHeaderProps,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  content: PropTypes.any,
+  extraContent: PropTypes.any,
+  pageHeaderRender: PropTypes.func,
+  breadcrumb: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).def(true),
+  back: PropTypes.func,
+
+  // only use `pro-layout` in children
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
+}
+
+const defaultI18nRender = (t) => t
+
+const useContext = (route) => {
+  return route && {
+    ...route.meta
+  } || null
+}
+
+const noop = () => {
+}
+
+// TODO :: tabList tab 支持图标 优化
+const renderFooter = (h, tabConfigProps, i18nRender) => {
+  const {
+    tabList,
+    tabActiveKey,
+    tabChange: onTabChange,
+    tabBarExtraContent,
+    tabProps
+  } = tabConfigProps
+  return tabList && tabList.length > 0 && (
+    <Tabs
+      class={`${prefixedClassName}-tabs`}
+      activeKey={tabActiveKey}
+      onChange={key => {
+        if (onTabChange) {
+          onTabChange(key)
+        }
+      }}
+      tabBarExtraContent={tabBarExtraContent}
+      {...tabProps}
+    >
+      {tabList.map(item => (
+        <Tabs.TabPane {...item} tab={i18nRender(item.tab)} key={item.key}/>
+      ))}
+    </Tabs>
+  )
+}
+
+const renderPageHeader = (h, content, extraContent) => {
+  if (!content && !extraContent) {
+    return null
+  }
+  return (
+    <div class={`${prefixedClassName}-detail`}>
+      <div class={`${prefixedClassName}-main`}>
+        <div class={`${prefixedClassName}-row`}>
+          {content && (
+            <div class={`${prefixedClassName}-content`}>{content}</div>
+          )}
+          {extraContent && (
+            <div class={`${prefixedClassName}-extraContent`}>
+              {extraContent}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const defaultPageHeaderRender = (h, props, pageMeta, i18nRender) => {
+  const {
+    title: propTitle,
+    tags,
+    content,
+    pageHeaderRender,
+    extra,
+    extraContent,
+    breadcrumb,
+    back: handleBack,
+    ...restProps
+  } = props
+  if (pageHeaderRender) {
+    return pageHeaderRender({ ...props })
+  }
+  let pageHeaderTitle = propTitle
+  if (!propTitle && propTitle !== false) {
+    // pageHeaderTitle = pageMeta.title
+    // 2021.02.03 去除title显示
+    pageHeaderTitle = undefined
+  }
+  // title props 不是 false 且不是 array 则直接渲染 title
+  // 反之认为是 VNode, 作为 render 参数直接传入到 PageHeader
+  const title = isArray(pageHeaderTitle)
+    ? pageHeaderTitle
+    : pageHeaderTitle && i18nRender(pageHeaderTitle)
+  const tabProps = {
+    breadcrumb,
+    extra,
+    tags,
+    title,
+    footer: renderFooter(h, restProps, i18nRender)
+  }
+  if (!handleBack) {
+    tabProps.backIcon = false
+  }
+
+  return (
+    <PageHeader {...{ props: tabProps }} onBack={handleBack || noop}>
+      {renderPageHeader(h, content, extraContent)}
+    </PageHeader>
+  )
+  // return
+}
+
+const PageHeaderWrapper = {
+  name: 'PageHeaderWrapper',
+  props: PageHeaderWrapperProps,
+  inject: ['locale', 'contentWidth', 'breadcrumbRender'],
+  render (h) {
+    const { $route, $listeners } = this
+    const children = this.$slots.default
+    const title = getComponentFromProp(this, 'title')
+    const tags = getComponentFromProp(this, 'tags')
+    const content = getComponentFromProp(this, 'content')
+    const extra = getComponentFromProp(this, 'extra')
+    const extraContent = getComponentFromProp(this, 'extraContent')
+
+    const pageMeta = useContext(this.$props.route || $route)
+    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+    const contentWidth = this.$props.contentWidth || this.contentWidth || false
+    // 当未设置 back props 或未监听 @back，不显示 back
+    // props 的 back 事件优先级高于 @back，需要注意
+    const onBack = this.$props.back || $listeners.back
+    const back = onBack && (() => {
+      // this.$emit('back')
+      // call props back func
+      onBack && onBack()
+    }) || undefined
+
+    const onTabChange = this.$props.tabChange
+    const tabChange = (key) => {
+      this.$emit('tabChange', key)
+      onTabChange && onTabChange(key)
+    }
+
+    let breadcrumb = {}
+    const propsBreadcrumb = this.$props.breadcrumb
+    if (propsBreadcrumb === true) {
+      const routes = $route.matched.concat().map(route => {
+        return {
+          path: route.path,
+          breadcrumbName: i18n(route.meta.title),
+          redirect: route.redirect
+        }
+      })
+
+      const defaultItemRender = ({ route, params, routes, paths, h }) => {
+        return (route.redirect === 'noRedirect' || routes.indexOf(route) === routes.length - 1) && (
+          <span>{route.breadcrumbName}</span>
+        ) || (
+          <router-link to={{ path: route.path || '/', params }}>{route.breadcrumbName}</router-link>
+        )
+      }
+
+      // If custom breadcrumb render undefined
+      // use default breadcrumb..
+      const itemRender = this.breadcrumbRender || defaultItemRender
+
+      breadcrumb = { props: { routes, itemRender } }
+    } else {
+      breadcrumb = propsBreadcrumb || null
+    }
+
+    const props = {
+      ...this.$props,
+      title,
+      tags,
+      content,
+      extra,
+      extraContent,
+      breadcrumb,
+      tabChange,
+      back
+    }
+
+    return (
+      <div class="ant-pro-page-header-wrap">
+        <div class={`${prefixedClassName}-page-header-warp`}>
+          <GridContent>{defaultPageHeaderRender(h, props, pageMeta, i18n)}</GridContent>
+        </div>
+        {children ? (
+          <GridContent contentWidth={contentWidth}>
+            <div class={`${prefixedClassName}-children-content`}>
+              {children}
+            </div>
+          </GridContent>
+        ) : null}
+      </div>
+    )
+  }
+}
+
+PageHeaderWrapper.install = function (Vue) {
+  Vue.component(PageHeaderWrapper.name, PageHeaderWrapper)
+  Vue.component('page-container', PageHeaderWrapper)
+}
+
+export default PageHeaderWrapper
diff --git a/src/components/ProLayout/components/PageHeaderWrapper/index.less b/src/components/ProLayout/components/PageHeaderWrapper/index.less
new file mode 100644
index 0000000..10c14fa
--- /dev/null
+++ b/src/components/ProLayout/components/PageHeaderWrapper/index.less
@@ -0,0 +1,93 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@ant-pro-page-header-wrap: ~'@{ant-prefix}-pro-page-header-wrap';
+
+.@{ant-pro-page-header-wrap}-children-content {
+  margin: 24px 24px 0;
+}
+
+.@{ant-pro-page-header-wrap}-page-header-warp {
+  background-color: @component-background;
+}
+
+.@{ant-pro-page-header-wrap}-main {
+  .@{ant-pro-page-header-wrap}-detail {
+    display: flex;
+  }
+
+  .@{ant-pro-page-header-wrap}-row {
+    display: flex;
+    width: 100%;
+  }
+
+  .@{ant-pro-page-header-wrap}-title-content {
+    margin-bottom: 16px;
+  }
+
+  .@{ant-pro-page-header-wrap}-title,
+  .@{ant-pro-page-header-wrap}-content {
+    flex: auto;
+  }
+
+  .@{ant-pro-page-header-wrap}-extraContent,
+  .@{ant-pro-page-header-wrap}-main {
+    flex: 0 1 auto;
+  }
+
+  .@{ant-pro-page-header-wrap}-main {
+    width: 100%;
+  }
+
+  .@{ant-pro-page-header-wrap}-title {
+    margin-bottom: 16px;
+  }
+
+  .@{ant-pro-page-header-wrap}-logo {
+    margin-bottom: 16px;
+  }
+
+  .@{ant-pro-page-header-wrap}-extraContent {
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .@{ant-pro-page-header-wrap}-main {
+    .@{ant-pro-page-header-wrap}-extraContent {
+      margin-left: 44px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .@{ant-pro-page-header-wrap}-main {
+    .@{ant-pro-page-header-wrap}-extraContent {
+      margin-left: 20px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .@{ant-pro-page-header-wrap}-main {
+    .@{ant-pro-page-header-wrap}-row {
+      display: block;
+    }
+
+    .@{ant-pro-page-header-wrap}-action,
+    .@{ant-pro-page-header-wrap}-extraContent {
+      margin-left: 0;
+      text-align: left;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .@{ant-pro-page-header-wrap}-detail {
+    display: block;
+  }
+  .@{ant-pro-page-header-wrap}-extraContent {
+    margin-left: 0;
+  }
+}
diff --git a/src/components/ProLayout/components/RouteMenu/BaseMenu.jsx b/src/components/ProLayout/components/RouteMenu/BaseMenu.jsx
new file mode 100644
index 0000000..0162a7d
--- /dev/null
+++ b/src/components/ProLayout/components/RouteMenu/BaseMenu.jsx
@@ -0,0 +1,180 @@
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+import 'ant-design-vue/es/menu/style'
+import Menu from 'ant-design-vue/es/menu'
+import 'ant-design-vue/es/icon/style'
+import Icon from 'ant-design-vue/es/icon'
+
+const {
+  Item: MenuItem,
+  SubMenu
+} = Menu
+
+export const RouteMenuProps = {
+  menus: PropTypes.array,
+  theme: PropTypes.string.def('dark'),
+  mode: PropTypes.string.def('inline'),
+  collapsed: PropTypes.bool.def(false),
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
+}
+
+const httpReg = /(http|https|ftp):\/\/([\w.]+\/?)\S*/
+
+const renderMenu = (h, item, i18nRender) => {
+  if (item && !item.hidden) {
+    const bool = item.children && !item.hideChildrenInMenu
+    return bool ? renderSubMenu(h, item, i18nRender) : renderMenuItem(h, item, i18nRender)
+  }
+  return null
+}
+
+const renderSubMenu = (h, item, i18nRender) => {
+  return (
+    <SubMenu key={item.path} title={(
+      <span>
+        {renderIcon(h, item.meta.icon)}
+        <span>{renderTitle(h, item.meta.title, i18nRender)}</span>
+      </span>
+    )}>
+      {!item.hideChildrenInMenu && item.children.map(cd => renderMenu(h, cd, i18nRender))}
+    </SubMenu>
+  )
+}
+
+const renderMenuItem = (h, item, i18nRender) => {
+  const meta = Object.assign({}, item.meta)
+  const target = meta.target || null
+  const hasRemoteUrl = httpReg.test(item.path)
+  const CustomTag = target && 'a' || 'router-link'
+  const props = { to: { name: item.name } }
+  const attrs = (hasRemoteUrl || target) ? { href: item.path, target: target } : {}
+  if (item.children && item.hideChildrenInMenu) {
+    // 把有子菜单的 并且 父菜单是要隐藏子菜单的
+    // 都给子菜单增加一个 hidden 属性
+    // 用来给刷新页面时， selectedKeys 做控制用
+    item.children.forEach(cd => {
+      cd.meta = Object.assign(cd.meta || {}, { hidden: true })
+    })
+  }
+  return (
+    <MenuItem key={item.path}>
+      <CustomTag {...{ props, attrs }}>
+        {renderIcon(h, meta.icon)}
+        {renderTitle(h, meta.title, i18nRender)}
+      </CustomTag>
+    </MenuItem>
+  )
+}
+
+const renderIcon = (h, icon) => {
+  if (icon === undefined || icon === 'none' || icon === null) {
+    return null
+  }
+  const props = {}
+  typeof (icon) === 'object' ? (props.component = icon) : (props.type = icon)
+  return <Icon {...{ props }} />
+}
+
+const renderTitle = (h, title, i18nRender) => {
+  return <span>{ i18nRender && i18nRender(title) || title }</span>
+}
+
+const RouteMenu = {
+  name: 'RouteMenu',
+  props: RouteMenuProps,
+  data () {
+    return {
+      openKeys: [],
+      selectedKeys: [],
+      cachedOpenKeys: [],
+      cachedSelectedKeys: []
+    }
+  },
+  render (h) {
+    const { mode, theme, menus, i18nRender } = this
+    const handleOpenChange = (openKeys) => {
+      // 在水平模式下时，不再执行后续
+      if (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] : []
+      }
+    }
+
+    const dynamicProps = {
+      props: {
+        mode,
+        theme,
+        openKeys: this.openKeys,
+        selectedKeys: this.selectedKeys
+      },
+      on: {
+        select: menu => {
+          this.$emit('select', menu)
+          if (!httpReg.test(menu.key)) {
+            this.selectedKeys = menu.selectedKeys
+          }
+        },
+        openChange: handleOpenChange
+      }
+    }
+
+    const menuItems = menus.map(item => {
+      if (item.hidden) {
+        return null
+      }
+      return renderMenu(h, item, i18nRender)
+    })
+    return <Menu {...dynamicProps}>{menuItems}</Menu>
+  },
+  methods: {
+    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 => {
+          item.path && openKeys.push(item.path)
+        })
+      }
+
+      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+    }
+  },
+  computed: {
+    rootSubmenuKeys: vm => {
+      const keys = []
+      vm.menus.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
+  created () {
+    this.$watch('$route', () => {
+      this.updateMenu()
+    })
+    this.$watch('collapsed', val => {
+      if (val) {
+        this.cachedOpenKeys = this.openKeys.concat()
+        this.openKeys = []
+      } else {
+        this.openKeys = this.cachedOpenKeys
+      }
+    })
+  },
+  mounted () {
+    this.updateMenu()
+  }
+}
+
+export default RouteMenu
diff --git a/src/components/ProLayout/components/RouteMenu/index.js b/src/components/ProLayout/components/RouteMenu/index.js
new file mode 100644
index 0000000..b6dbfee
--- /dev/null
+++ b/src/components/ProLayout/components/RouteMenu/index.js
@@ -0,0 +1,2 @@
+import BaseMenu from './BaseMenu'
+export default BaseMenu
diff --git a/src/components/ProLayout/components/SettingDrawer/BlockCheckbox.jsx b/src/components/ProLayout/components/SettingDrawer/BlockCheckbox.jsx
new file mode 100644
index 0000000..51cc2eb
--- /dev/null
+++ b/src/components/ProLayout/components/SettingDrawer/BlockCheckbox.jsx
@@ -0,0 +1,69 @@
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+import 'ant-design-vue/es/tooltip/style'
+import Tooltip from 'ant-design-vue/es/tooltip'
+import 'ant-design-vue/es/icon/style'
+import Icon from 'ant-design-vue/es/icon'
+
+const BlockCheckboxProps = {
+  value: PropTypes.string,
+  // Item: { key, url, title }
+  list: PropTypes.array,
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
+}
+
+const baseClassName = 'ant-pro-setting-drawer-block-checbox'
+const BlockCheckbox = {
+  props: BlockCheckboxProps,
+  inject: ['locale'],
+  render (h) {
+    const { value, list } = this
+    const i18n = this.$props.i18nRender || this.locale
+
+    const items = list || [
+      {
+        key: 'sidemenu',
+        url:
+          'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
+        title: i18n('app.setting.sidemenu')
+      },
+      {
+        key: 'topmenu',
+        url:
+          'https://gw.alipayobjects.com/zos/antfincdn/URETY8%24STp/KDNDBbriJhLwuqMoxcAr.svg',
+        title: i18n('app.setting.topmenu')
+      }
+    ]
+
+    const handleChange = (key) => {
+      this.$emit('change', key)
+    }
+
+    const disableStyle = {
+      cursor: 'not-allowed'
+    }
+
+    return (
+      <div class={baseClassName} key={value}>
+        {items.map(item => (
+          <Tooltip title={item.title} key={item.key}>
+            <div class={`${baseClassName}-item`} style={ item.disable && disableStyle } onClick={() => !item.disable && handleChange(item.key)}>
+              <img src={item.url} alt={item.key} />
+              <div
+                class={`${baseClassName}-selectIcon`}
+                style={{
+                  display: value === item.key ? 'block' : 'none'
+                }}
+              >
+                <Icon type="check" />
+              </div>
+            </div>
+          </Tooltip>
+        ))}
+      </div>
+    )
+  }
+}
+
+export default BlockCheckbox
diff --git a/src/components/ProLayout/components/SettingDrawer/LayoutChange.jsx b/src/components/ProLayout/components/SettingDrawer/LayoutChange.jsx
new file mode 100644
index 0000000..cfc6735
--- /dev/null
+++ b/src/components/ProLayout/components/SettingDrawer/LayoutChange.jsx
@@ -0,0 +1,107 @@
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+import 'ant-design-vue/es/tooltip/style'
+import Tooltip from 'ant-design-vue/es/tooltip'
+import 'ant-design-vue/es/list/style'
+import List from 'ant-design-vue/es/list'
+import 'ant-design-vue/es/select/style'
+import Select from 'ant-design-vue/es/select'
+import 'ant-design-vue/es/switch/style'
+import Switch from 'ant-design-vue/es/switch'
+
+export const renderLayoutSettingItem = (h, item) => {
+  const action = { ...item.action }
+  return (
+    <Tooltip title={item.disabled ? item.disabledReason : ''} placement="left">
+      <List.Item actions={[action]}>
+        <span style={{ opacity: item.disabled ? 0.5 : 1 }}>{item.title}</span>
+      </List.Item>
+    </Tooltip>
+  )
+}
+
+export const LayoutSettingProps = {
+  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  fixedHeader: PropTypes.bool,
+  fixSiderbar: PropTypes.bool,
+  multiTab: PropTypes.bool,
+  layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
+}
+
+export default {
+  props: LayoutSettingProps,
+  inject: ['locale'],
+  render (h) {
+    const i18n = this.$props.i18nRender || this.locale
+    const { contentWidth, fixedHeader, layout, fixSiderbar, multiTab } = this
+
+    const handleChange = (type, value) => {
+      this.$emit('change', { type, value })
+    }
+
+    return (
+      <List
+        split={false}
+        dataSource={[
+          {
+            title: i18n('app.setting.content-width'),
+            action: (
+              <Select
+                value={contentWidth}
+                size="small"
+                onSelect={(value) => handleChange('contentWidth', value)}
+                style={{ width: '80px' }}
+                >
+                {layout === 'sidemenu' ? null : (
+                  <Select.Option value="Fixed">
+                    {i18n('app.setting.content-width.fixed')}
+                  </Select.Option>
+                )}
+                <Select.Option value="Fluid">
+                  {i18n('app.setting.content-width.fluid')}
+                </Select.Option>
+          </Select>
+          )
+        },
+        {
+          title: i18n('app.setting.fixedheader'),
+          action: (
+          <Switch
+          size="small"
+          checked={!!fixedHeader}
+          onChange={(checked) => handleChange('fixedHeader', checked)}
+          />
+          )
+        },
+        {
+          title: i18n('app.setting.fixedsidebar'),
+          disabled: layout === 'topmenu',
+          disabledReason: i18n('app.setting.fixedsidebar.hint'),
+          action: (
+          <Switch
+            size="small"
+            disabled={layout === 'topmenu'}
+            checked={!!fixSiderbar}
+            onChange={(checked) => handleChange('fixSiderbar', checked)}
+          />
+          )
+        },
+        {
+          title: i18n('app.setting.multitab'),
+          disabledReason: i18n('app.setting.fixedsidebar.hint'),
+          action: (
+          <Switch
+            size="small"
+            checked={!!multiTab}
+            onChange={(checked) => handleChange('multiTab', checked)}
+          />
+          )
+        }
+          ]}
+        renderItem={(item, index) => renderLayoutSettingItem(h, item)}
+      />
+    )
+  }
+}
diff --git a/src/components/ProLayout/components/SettingDrawer/ThemeColor.jsx b/src/components/ProLayout/components/SettingDrawer/ThemeColor.jsx
new file mode 100644
index 0000000..5eddbea
--- /dev/null
+++ b/src/components/ProLayout/components/SettingDrawer/ThemeColor.jsx
@@ -0,0 +1,75 @@
+import './ThemeColor.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { genThemeToString } from '../../utils/util'
+import 'ant-design-vue/es/tooltip/style'
+import Tooltip from 'ant-design-vue/es/tooltip'
+import 'ant-design-vue/es/icon/style'
+import Icon from 'ant-design-vue/es/icon'
+
+const baseClassName = 'theme-color'
+
+export const TagProps = {
+  color: PropTypes.string,
+  check: PropTypes.bool
+}
+
+const Tag = {
+  props: TagProps,
+  functional: true,
+  render (h, content) {
+    const { props: { color, check }, data } = content
+    return (
+      <div {...data} style={{ backgroundColor: color }}>
+        { check ? <Icon type="check" /> : null }
+      </div>
+    )
+  }
+}
+
+export const ThemeColorProps = {
+  colors: PropTypes.array,
+  title: PropTypes.string,
+  value: PropTypes.string,
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
+}
+
+const ThemeColor = {
+  props: ThemeColorProps,
+  inject: ['locale'],
+  render (h) {
+    const { title, value, colors = [] } = this
+    const i18n = this.$props.i18nRender || this.locale
+    const handleChange = (key) => {
+      this.$emit('change', key)
+    }
+
+    return (
+      <div class={baseClassName} ref={'ref'}>
+        <h3 class={`${baseClassName}-title`}>{title}</h3>
+        <div class={`${baseClassName}-content`}>
+          {colors.map(item => {
+            const themeKey = genThemeToString(item.key)
+            const check = value === item.key || genThemeToString(value) === item.key
+            return (
+              <Tooltip
+                key={item.color}
+                title={themeKey ? i18n(`app.setting.themecolor.${themeKey}`) : item.key}
+              >
+                <Tag
+                  class={`${baseClassName}-block`}
+                  color={item.color}
+                  check={check}
+                  onClick={() => handleChange(item.key)}
+                />
+              </Tooltip>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ThemeColor
diff --git a/src/components/ProLayout/components/SettingDrawer/ThemeColor.less b/src/components/ProLayout/components/SettingDrawer/ThemeColor.less
new file mode 100644
index 0000000..0d18b79
--- /dev/null
+++ b/src/components/ProLayout/components/SettingDrawer/ThemeColor.less
@@ -0,0 +1,26 @@
+@import './index.less';
+
+.@{ant-pro-setting-drawer}-content {
+  .theme-color {
+    margin-top: 24px;
+    overflow: hidden;
+
+    .theme-color-title {
+      margin-bottom: 12px;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .theme-color-block {
+      float: left;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      color: #fff;
+      font-weight: bold;
+      text-align: center;
+      border-radius: 2px;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/components/ProLayout/components/SettingDrawer/index.jsx b/src/components/ProLayout/components/SettingDrawer/index.jsx
new file mode 100644
index 0000000..90b2021
--- /dev/null
+++ b/src/components/ProLayout/components/SettingDrawer/index.jsx
@@ -0,0 +1,344 @@
+import './index.less'
+
+import omit from 'omit.js'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+import 'ant-design-vue/es/divider/style'
+import Divider from 'ant-design-vue/es/divider'
+
+import 'ant-design-vue/es/drawer/style'
+import Drawer from 'ant-design-vue/es/drawer'
+
+import 'ant-design-vue/es/list/style'
+import List from 'ant-design-vue/es/list'
+
+import 'ant-design-vue/es/switch/style'
+import Switch from 'ant-design-vue/es/switch'
+
+import 'ant-design-vue/es/button/style'
+import Button from 'ant-design-vue/es/button'
+
+import 'ant-design-vue/es/icon/style'
+import Icon from 'ant-design-vue/es/icon'
+
+import 'ant-design-vue/es/alert/style'
+import Alert from 'ant-design-vue/es/alert'
+
+import antPortal from 'ant-design-vue/es/_util/portalDirective'
+
+import 'ant-design-vue/es/message/style'
+import message from 'ant-design-vue/es/message'
+
+import BlockCheckbox from './BlockCheckbox'
+import ThemeColor from './ThemeColor'
+import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange'
+import { updateTheme, updateColorWeak } from '../../utils/dynamicTheme'
+import { genStringToTheme } from '../../utils/util'
+import CopyToClipboard from 'vue-copy-to-clipboard'
+
+const baseClassName = 'ant-pro-setting-drawer'
+
+const BodyProps = {
+  title: PropTypes.string.def('')
+}
+
+const Body = {
+  props: BodyProps,
+  render (h) {
+    const { title } = this
+
+    return (
+      <div style={{ marginBottom: 24 }}>
+        <h3 class={`${baseClassName}-title`}>{title}</h3>
+        {this.$slots.default}
+      </div>
+    )
+  }
+}
+
+const defaultI18nRender = (t) => t
+
+const getThemeList = (i18nRender) => {
+  const list = window.umi_plugin_ant_themeVar || []
+
+  const themeList = [
+    {
+      key: 'light',
+      url: 'https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg',
+      title: i18nRender('app.setting.pagestyle.light')
+    },
+    {
+      key: 'dark',
+      url: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
+      title: i18nRender('app.setting.pagestyle.dark')
+    }
+  ]
+
+  const darkColorList = [
+    {
+      key: '#1890ff',
+      color: '#1890ff',
+      theme: 'dark'
+    }
+  ]
+
+  const lightColorList = [
+    {
+      key: '#1890ff',
+      color: '#1890ff',
+      theme: 'dark'
+    }
+  ]
+
+  if (list.find((item) => item.theme === 'dark')) {
+    // themeList.push({
+    //   // disable click
+    //   // disable: true,
+    //   key: 'realDark',
+    //   url: 'https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg',
+    //   title: i18nRender('app.setting.pagestyle.realdark')
+    // })
+  }
+  // insert  theme color List
+  list.forEach(item => {
+    const color = (item.modifyVars || {})['@primary-color']
+    if (item.theme === 'dark' && color) {
+      darkColorList.push({
+        color,
+        ...item
+      })
+    }
+    if (!item.theme || item.theme === 'light') {
+      lightColorList.push({
+        color,
+        ...item
+      })
+    }
+  })
+
+  return {
+    colorList: {
+      dark: darkColorList,
+      light: lightColorList
+    },
+    themeList
+  }
+}
+
+const handleChangeSetting = (key, value, hideMessageLoading) => {
+  if (key === 'primaryColor') {
+    // 更新主色调
+    updateTheme(value)
+  }
+  if (key === 'colorWeak') {
+    updateColorWeak(value)
+  }
+}
+
+const genCopySettingJson = (settings) =>
+  JSON.stringify(
+    omit(
+      {
+        ...settings,
+        primaryColor: genStringToTheme(settings.primaryColor)
+      },
+      ['colorWeak']
+    ),
+    null,
+    2
+  )
+
+export const settings = {
+  theme: PropTypes.oneOf(['dark', 'light']),
+  primaryColor: PropTypes.string,
+  layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
+  colorWeak: PropTypes.bool,
+  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  // 替换兼容 PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
+  // contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
+  fixedHeader: PropTypes.bool,
+  fixSiderbar: PropTypes.bool,
+  multiTab: PropTypes.bool,
+  hideHintAlert: PropTypes.bool.def(false),
+  hideCopyButton: PropTypes.bool.def(false)
+}
+
+export const SettingDrawerProps = {
+  getContainer: PropTypes.func,
+  settings: PropTypes.objectOf(settings),
+
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
+}
+
+const SettingDrawer = {
+  name: 'SettingDrawer',
+  props: SettingDrawerProps,
+  inject: ['locale'],
+  data () {
+    return {
+      show: false
+    }
+  },
+  render (h) {
+    const {
+      setShow,
+      getContainer,
+      settings
+    } = this
+
+    const {
+      theme = 'dark',
+      primaryColor = 'daybreak',
+      layout = 'sidemenu',
+      fixedHeader = false,
+      fixSiderbar = false,
+      multiTab = true,
+      contentWidth,
+      hideHintAlert,
+      hideCopyButton,
+      colorWeak
+    } = settings
+
+    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+    const themeList = getThemeList(i18n)
+    const isTopMenu = layout === 'topmenu'
+
+    const iconStyle = {
+      color: '#fff',
+      fontSize: 20
+    }
+
+    const changeSetting = (type, value) => {
+      this.$emit('change', { type, value })
+      handleChangeSetting(type, value, false)
+    }
+
+    return (
+      <Drawer
+        visible={this.show}
+        width={300}
+        onClose={() => setShow(false)}
+        placement="right"
+        getContainer={getContainer}
+        /* handle={
+          <div class="ant-pro-setting-drawer-handle" onClick={() => setShow(!this.show)}>
+            {this.show
+              ? (<Icon type="close" style={iconStyle} />)
+              : (<Icon type="setting" style={iconStyle} />)
+            }
+          </div>
+        } */
+        style={{
+          zIndex: 999
+        }}
+      >
+        <template slot="handle">
+          <div class={`${baseClassName}-handle`} onClick={() => setShow(!this.show)}>
+            {this.show
+              ? (<Icon type="close" style={iconStyle}/>)
+              : (<Icon type="setting" style={iconStyle}/>)
+            }
+          </div>
+        </template>
+        <div class={`${baseClassName}-content`}>
+          <Body title={i18n('app.setting.pagestyle')}>
+            <BlockCheckbox i18nRender={i18n} list={themeList.themeList} value={theme} onChange={(val) => {
+              changeSetting('theme', val)
+            }} />
+          </Body>
+
+          <ThemeColor
+            i18nRender={i18n}
+            title={i18n('app.setting.themecolor')}
+            value={primaryColor}
+            colors={themeList.colorList[theme === 'realDark' ? 'dark' : 'light']}
+            onChange={(color) => {
+              changeSetting('primaryColor', color, null)
+            }}
+          />
+
+          <Divider />
+
+          <Body title={i18n('app.setting.navigationmode')}>
+            <BlockCheckbox i18nRender={i18n} value={layout} onChange={(value) => {
+              changeSetting('layout', value, null)
+            }} />
+          </Body>
+
+          <LayoutSetting
+            i18nRender={i18n}
+            contentWidth={contentWidth}
+            fixedHeader={fixedHeader}
+            fixSiderbar={isTopMenu ? false : fixSiderbar}
+            multiTab={multiTab}
+            layout={layout}
+            onChange={({ type, value }) => {
+              changeSetting(type, value)
+            }}
+          />
+          <Divider />
+
+          <Body title={i18n('app.setting.othersettings')}>
+            <List
+              split={false}
+              renderItem={(item) => renderLayoutSettingItem(h, item)}
+              dataSource={[
+                {
+                  title: i18n('app.setting.weakmode'),
+                  action: (
+                    <Switch
+                      size="small"
+                      checked={!!colorWeak}
+                      onChange={(checked) => changeSetting('colorWeak', checked)}
+                    />
+                  )
+                }
+              ]}
+            />
+          </Body>
+
+          {hideHintAlert && hideCopyButton ? null : <Divider />}
+
+          {hideHintAlert ? null : (
+            <Alert
+              type="warning"
+              message={i18n('app.setting.production.hint')}
+              icon={(<Icon type={'notification'} />)}
+              showIcon
+              style={{ marginBottom: '16px' }}
+            />
+          )}
+
+          {hideCopyButton ? null : (
+            <CopyToClipboard
+              text={genCopySettingJson(settings)}
+              onCopy={() =>
+                message.success(i18n('app.setting.copyinfo'))
+              }
+            >
+              <Button block>
+                <Icon type={'copy'} />{i18n('app.setting.copy')}
+              </Button>
+            </CopyToClipboard>
+          )}
+
+          <div class={`${baseClassName}-content-footer`}>
+            {this.$slots.default}
+          </div>
+        </div>
+      </Drawer>
+    )
+  },
+  methods: {
+    setShow (flag) {
+      this.show = flag
+    }
+  }
+}
+
+SettingDrawer.install = function (Vue) {
+  Vue.use(antPortal)
+  Vue.component(SettingDrawer.name, SettingDrawer)
+}
+
+export default SettingDrawer
diff --git a/src/components/ProLayout/components/SettingDrawer/index.less b/src/components/ProLayout/components/SettingDrawer/index.less
new file mode 100644
index 0000000..cc1d38e
--- /dev/null
+++ b/src/components/ProLayout/components/SettingDrawer/index.less
@@ -0,0 +1,90 @@
+@import '~ant-design-vue/es/style/themes/default.less';
+
+@ant-pro-setting-drawer: ~'@{ant-prefix}-pro-setting-drawer';
+
+.@{ant-pro-setting-drawer} {
+  &-content {
+    position: relative;
+    min-height: 100%;
+
+    .ant-list-item {
+      span {
+        flex: 1;
+      }
+    }
+  }
+
+  &-block-checbox {
+    display: flex;
+
+    &-item {
+      position: relative;
+      margin-right: 16px;
+      // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+      border-radius: @border-radius-base;
+      cursor: pointer;
+
+      img {
+        width: 48px;
+      }
+    }
+
+    &-selectIcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      color: @primary-color;
+      font-weight: bold;
+      font-size: 14px;
+
+      .action {
+        color: @primary-color;
+      }
+    }
+  }
+
+  &-color_block {
+    display: inline-block;
+    width: 38px;
+    height: 22px;
+    margin: 4px;
+    margin-right: 12px;
+    vertical-align: middle;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  &-title {
+    margin-bottom: 12px;
+    color: @heading-color;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  &-handle {
+    position: absolute;
+    top: 240px;
+    right: 300px;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    font-size: 16px;
+    text-align: center;
+    background: @primary-color;
+    border-radius: 4px 0 0 4px;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  &-production-hint {
+    margin-top: 16px;
+    font-size: 12px;
+  }
+}
diff --git a/src/components/ProLayout/components/SiderMenu/SiderMenu.jsx b/src/components/ProLayout/components/SiderMenu/SiderMenu.jsx
new file mode 100644
index 0000000..2274a67
--- /dev/null
+++ b/src/components/ProLayout/components/SiderMenu/SiderMenu.jsx
@@ -0,0 +1,133 @@
+import './index.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import 'ant-design-vue/es/layout/style'
+import Layout from 'ant-design-vue/es/layout'
+import { isFun } from '../../utils/util'
+import BaseMenu from '../RouteMenu'
+
+const { Sider } = Layout
+
+export const SiderMenuProps = {
+  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
+  mode: PropTypes.string.def('inline'),
+  theme: PropTypes.string.def('dark'),
+  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  collapsible: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  handleCollapse: PropTypes.func,
+  menus: PropTypes.array,
+  siderWidth: PropTypes.number.def(256),
+  isMobile: PropTypes.bool,
+  layout: PropTypes.string.def('inline'),
+  fixSiderbar: PropTypes.bool,
+  logo: PropTypes.any,
+  title: PropTypes.string.def(''),
+  // render function or vnode
+  menuHeaderRender: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.object, PropTypes.bool]),
+  menuRender: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.object, PropTypes.bool])
+}
+
+export const defaultRenderLogo = (h, logo) => {
+  if (typeof logo === 'string') {
+    return <img src={logo} alt="logo" />
+  }
+  if (typeof logo === 'function') {
+    return logo()
+  }
+  return h(logo)
+}
+
+export const defaultRenderLogoAntTitle = (h, props) => {
+  const {
+    logo = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg',
+    title,
+    menuHeaderRender
+  } = props
+
+  if (menuHeaderRender === false) {
+    return null
+  }
+  const logoDom = defaultRenderLogo(h, logo)
+  const titleDom = <h1>{title}</h1>
+
+  if (menuHeaderRender) {
+    return isFun(menuHeaderRender) &&
+      menuHeaderRender(h, logoDom, props.collapsed ? null : titleDom, props) ||
+      menuHeaderRender
+  }
+  return (
+    <span>
+      {logoDom}
+      {titleDom}
+    </span>
+  )
+}
+
+const SiderMenu = {
+  name: 'SiderMenu',
+  model: {
+    prop: 'collapsed',
+    event: 'collapse'
+  },
+  props: SiderMenuProps,
+  render (h) {
+    const {
+      collapsible,
+      collapsed,
+      siderWidth,
+      fixSiderbar,
+      mode,
+      theme,
+      menus,
+      logo,
+      title,
+      onMenuHeaderClick = () => null,
+      i18nRender,
+      menuHeaderRender,
+      menuRender
+    } = this
+    const siderCls = ['ant-pro-sider-menu-sider']
+    if (fixSiderbar) siderCls.push('fix-sider-bar')
+    if (theme === 'light') siderCls.push('light')
+    //
+    // const handleCollapse = (collapsed, type) => {
+    //   this.$emit('collapse', collapsed)
+    // }
+
+    const headerDom = defaultRenderLogoAntTitle(h, {
+      logo, title, menuHeaderRender, collapsed
+    })
+
+    return (<Sider
+      class={siderCls}
+      breakpoint={'lg'}
+      trigger={null}
+      width={siderWidth}
+      theme={theme}
+      collapsible={collapsible}
+      collapsed={collapsed}
+    >
+      {headerDom && (
+        <div
+          class="ant-pro-sider-menu-logo"
+          onClick={onMenuHeaderClick}
+          id="logo"
+        >
+          <router-link to={{ path: '/' }}>
+            {headerDom}
+          </router-link>
+        </div>
+      )}
+      {menuRender && (
+        isFun(menuRender) &&
+          menuRender(h, this.$props) ||
+          menuRender
+      ) || (
+        <BaseMenu collapsed={collapsed} menus={menus} mode={mode} theme={theme} i18nRender={i18nRender} />
+      )}
+    </Sider>)
+  }
+}
+
+export default SiderMenu
diff --git a/src/components/ProLayout/components/SiderMenu/index.jsx b/src/components/ProLayout/components/SiderMenu/index.jsx
new file mode 100644
index 0000000..ccf2c9d
--- /dev/null
+++ b/src/components/ProLayout/components/SiderMenu/index.jsx
@@ -0,0 +1,54 @@
+import './index.less'
+
+import 'ant-design-vue/es/drawer/style'
+import Drawer from 'ant-design-vue/es/drawer'
+import SiderMenu, { SiderMenuProps } from './SiderMenu'
+
+const SiderMenuWrapper = {
+  name: 'SiderMenuWrapper',
+  model: {
+    prop: 'collapsed',
+    event: 'collapse'
+  },
+  props: SiderMenuProps,
+  render (h) {
+    const {
+      layout,
+      isMobile,
+      collapsed
+    } = this
+    const isTopMenu = layout === 'topmenu'
+    const handleCollapse = (e) => {
+      this.$emit('collapse', true)
+    }
+    return isMobile ? (
+      <Drawer
+        class="ant-pro-sider-menu"
+        visible={!collapsed}
+        placement="left"
+        maskClosable
+        getContainer={null}
+        onClose={handleCollapse}
+        bodyStyle={{
+          padding: 0,
+          height: '100vh'
+        }}
+      >
+        <SiderMenu {...{ props: { ...this.$props, collapsed: isMobile ? false : collapsed } }} />
+      </Drawer>
+    ) : !isTopMenu && (
+      <SiderMenu class="ant-pro-sider-menu" {...{ props: this.$props }} />
+    )
+  }
+}
+
+SiderMenuWrapper.install = function (Vue) {
+  Vue.component(SiderMenuWrapper.name, SiderMenuWrapper)
+}
+
+export {
+  SiderMenu,
+  SiderMenuProps
+}
+
+export default SiderMenuWrapper
diff --git a/src/components/ProLayout/components/SiderMenu/index.less b/src/components/ProLayout/components/SiderMenu/index.less
new file mode 100644
index 0000000..2276d28
--- /dev/null
+++ b/src/components/ProLayout/components/SiderMenu/index.less
@@ -0,0 +1,125 @@
+@import "~ant-design-vue/es/style/themes/default.less";
+
+@sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider-menu';
+
+@nav-header-height: @layout-header-height;
+.@{sider-menu-prefix-cls} {
+
+  &-logo {
+    position: relative;
+    height: 64px;
+    padding-left: 24px;
+    overflow: hidden;
+    transition: all .3s;
+    line-height: @nav-header-height;
+    background: @layout-sider-background;
+
+    svg, img, h1 {
+      display: inline-block;
+    }
+
+    svg, img {
+      height: 32px;
+      width: 32px;
+      vertical-align: middle;
+    }
+
+    h1 {
+      color: @white;
+      font-size: 20px;
+      margin: 0 0 0 12px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-weight: 600;
+      vertical-align: middle;
+    }
+  }
+
+  &-sider {
+    position: relative;
+    z-index: 10;
+    min-height: 100vh;
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+
+    &.fix-sider-bar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+      .ant-menu-root {
+        height: ~'calc(100vh - @{nav-header-height})';
+        overflow-y: auto;
+      }
+
+      .ant-menu-inline {
+        border-right: 0;
+
+        .ant-menu-item,
+        .ant-menu-submenu-title {
+          width: 100%;
+        }
+      }
+    }
+
+    &.light {
+      background-color: white;
+      box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+      .@{sider-menu-prefix-cls}-logo {
+        background: white;
+        box-shadow: 1px 1px 0 0 @border-color-split;
+
+        h1 {
+          color: @primary-color;
+        }
+      }
+
+      .ant-menu-light {
+        border-right-color: transparent;
+      }
+    }
+  }
+
+  &-icon {
+    width: 14px;
+    vertical-align: baseline;
+  }
+
+  .top-nav-menu li.ant-menu-item {
+    height: @nav-header-height;
+    line-height: @nav-header-height;
+  }
+
+  .drawer .drawer-content {
+    background: @layout-sider-background;
+  }
+
+  .ant-menu-inline-collapsed {
+    & > .ant-menu-item .sider-menu-item-img + span,
+    &
+    > .ant-menu-item-group
+    > .ant-menu-item-group-list
+    > .ant-menu-item
+    .sider-menu-item-img
+    + span,
+    &
+    > .ant-menu-submenu
+    > .ant-menu-submenu-title
+    .sider-menu-item-img
+    + span {
+      display: inline-block;
+      max-width: 0;
+      opacity: 0;
+    }
+  }
+
+  .ant-menu-item .sider-menu-item-img + span,
+  .ant-menu-submenu-title .sider-menu-item-img + span {
+    opacity: 1;
+    transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
+  }
+
+  .ant-drawer-body {
+    padding: 0;
+  }
+}
diff --git a/src/components/ProLayout/components/index.js b/src/components/ProLayout/components/index.js
new file mode 100644
index 0000000..bf8f679
--- /dev/null
+++ b/src/components/ProLayout/components/index.js
@@ -0,0 +1,15 @@
+import RouteMenu from './RouteMenu'
+import SiderMenuWrapper, { SiderMenu, SiderMenuProps } from './SiderMenu'
+import PageHeaderWrapper from './PageHeaderWrapper'
+import GlobalFooter from './GlobalFooter'
+import VueFragment from './Fragment'
+
+export {
+  RouteMenu,
+  SiderMenu,
+  SiderMenuProps,
+  SiderMenuWrapper,
+  PageHeaderWrapper,
+  GlobalFooter,
+  VueFragment
+}
diff --git a/src/components/ProLayout/index.js b/src/components/ProLayout/index.js
new file mode 100644
index 0000000..1588228
--- /dev/null
+++ b/src/components/ProLayout/index.js
@@ -0,0 +1,10 @@
+export { default, BasicLayoutProps } from './BasicLayout'
+export { default as BlockLayout } from './BlockLayout'
+export { default as PageHeaderWrapper } from './components/PageHeaderWrapper'
+export { default as SiderMenuWrapper } from './components/SiderMenu'
+export { default as GlobalFooter } from './components/GlobalFooter'
+export { default as SettingDrawer } from './components/SettingDrawer'
+export { default as DocumentTitle } from './components/DocumentTitle'
+export { default as BaseMenu } from './components/RouteMenu'
+// func
+export { updateTheme, updateColorWeak } from './utils/dynamicTheme'
diff --git a/src/components/ProLayout/utils/dynamicTheme.js b/src/components/ProLayout/utils/dynamicTheme.js
new file mode 100644
index 0000000..e30f1b0
--- /dev/null
+++ b/src/components/ProLayout/utils/dynamicTheme.js
@@ -0,0 +1,38 @@
+import client from 'webpack-theme-color-replacer/client'
+import generate from '@ant-design/colors/lib/generate'
+import { message } from 'ant-design-vue'
+
+export const themeColor = {
+  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) {
+    const 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)
+  }
+}
+
+export const updateTheme = newPrimaryColor => {
+  const hideMessage = message.loading('正在切换主题', 0)
+  themeColor.changeColor(newPrimaryColor).then(r => {
+    hideMessage()
+  })
+}
+
+export const updateColorWeak = colorWeak => {
+  // document.body.className = colorWeak ? 'colorWeak' : '';
+  const app = document.body.querySelector('#app')
+  colorWeak ? app.classList.add('colorWeak') : app.classList.remove('colorWeak')
+}
diff --git a/src/components/ProLayout/utils/request.js b/src/components/ProLayout/utils/request.js
new file mode 100644
index 0000000..ff4e3c8
--- /dev/null
+++ b/src/components/ProLayout/utils/request.js
@@ -0,0 +1,62 @@
+import request, { extend } from 'umi-request'
+import { notification } from 'ant-design-vue'
+
+const codeMessage = {
+  200: '服务器成功返回请求的数据。',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）。',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  401: '用户没有权限（令牌、用户名、密码错误）。',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。'
+}
+
+const errorHandler = (error) => {
+  const { response = {} } = error
+  const errortext = codeMessage[response.status] || response.statusText
+  const { status, url } = response
+
+  notification.error({
+    message: `请求错误 ${status}: ${url}`,
+    description: errortext
+  })
+}
+
+export const BASE_URL = process.env.VUE_APP_API_URL || '/api/v1'
+
+const customRequest = extend({
+  prefix: BASE_URL,
+  timeout: 1000,
+  errorHandler
+})
+
+// request 拦截器
+customRequest.interceptors.request.use((url, options) => {
+  return (
+    {
+      url: `${url}&interceptors=yes`,
+      options: { ...options, interceptors: true }
+    }
+  )
+})
+
+// response 拦截器
+customRequest.interceptors.response.use((response, options) => {
+  response.headers.append('interceptors', 'yes yo')
+  return response
+})
+
+export {
+  request,
+  extend
+}
+
+export default customRequest
diff --git a/src/components/ProLayout/utils/util.js b/src/components/ProLayout/utils/util.js
new file mode 100644
index 0000000..88d3b38
--- /dev/null
+++ b/src/components/ProLayout/utils/util.js
@@ -0,0 +1,64 @@
+import triggerEvent from 'ant-design-vue/es/_util/triggerEvent'
+import { inBrowser } from 'ant-design-vue/es/_util/env'
+
+const getComponentFromProp = (instance, prop) => {
+  const slots = instance.slots && instance.slots()
+  return slots[prop] || instance.props[prop]
+}
+
+const isFun = (func) => {
+  return typeof func === 'function'
+}
+
+// 兼容 0.3.4~0.3.8
+export const contentWidthCheck = (contentWidth) => {
+  return Object.prototype.toString.call(contentWidth) === '[object Boolean]'
+    ? contentWidth === true && 'Fixed' || 'Fluid'
+    : contentWidth
+}
+
+export const layoutContentWidth = (contentType) => {
+  return contentType !== 'Fluid'
+}
+
+const themeConfig = {
+  daybreak: 'daybreak',
+  '#1890ff': 'daybreak',
+  '#F5222D': 'dust',
+  '#FA541C': 'volcano',
+  '#FAAD14': 'sunset',
+  '#13C2C2': 'cyan',
+  '#52C41A': 'green',
+  '#2F54EB': 'geekblue',
+  '#722ED1': 'purple'
+}
+
+const invertKeyValues = (obj) =>
+  Object.keys(obj).reduce((acc, key) => {
+    acc[obj[key]] = key
+    return acc
+  }, {})
+
+/**
+ * #1890ff -> daybreak
+ * @param val
+ */
+export function genThemeToString (val) {
+  return val && themeConfig[val] ? themeConfig[val] : val
+}
+
+/**
+ * daybreak-> #1890ff
+ * @param val
+ */
+export function genStringToTheme (val) {
+  const stringConfig = invertKeyValues(themeConfig)
+  return val && stringConfig[val] ? stringConfig[val] : val
+}
+
+export {
+  triggerEvent,
+  inBrowser,
+  getComponentFromProp,
+  isFun
+}
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
new file mode 100644
index 0000000..1ca13be
--- /dev/null
+++ b/src/components/Screenfull/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <a-tooltip placement="bottom">
+      <template slot="title">
+        {{ isFullscreen ? '退出全屏' : '切为全屏' }}
+      </template>
+      <a-icon :type="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" @click="click" :style="{ fontSize: '20px' }"/>
+    </a-tooltip>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+
+export default {
+  name: 'Screenfull',
+  data () {
+    return {
+      isFullscreen: false
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  beforeDestroy () {
+    this.destroy()
+  },
+  methods: {
+    click () {
+      if (!screenfull.isEnabled) {
+        this.$message.warning('你的浏览器不支持全屏')
+        return false
+      }
+      screenfull.toggle()
+    },
+    change () {
+      this.isFullscreen = screenfull.isFullscreen
+    },
+    init () {
+      if (screenfull.isEnabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy () {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', this.change)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/Search/GlobalSearch.jsx b/src/components/Search/GlobalSearch.jsx
new file mode 100644
index 0000000..bd9e604
--- /dev/null
+++ b/src/components/Search/GlobalSearch.jsx
@@ -0,0 +1,63 @@
+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
diff --git a/src/components/Search/index.less b/src/components/Search/index.less
new file mode 100644
index 0000000..d397852
--- /dev/null
+++ b/src/components/Search/index.less
@@ -0,0 +1,25 @@
+@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
diff --git a/src/components/SelectLang/index.jsx b/src/components/SelectLang/index.jsx
new file mode 100644
index 0000000..85a342a
--- /dev/null
+++ b/src/components/SelectLang/index.jsx
@@ -0,0 +1,54 @@
+import './index.less'
+
+import { Icon, Menu, Dropdown } from 'ant-design-vue'
+import { i18nRender } from '@/locales'
+import i18nMixin from '@/store/i18n-mixin'
+
+const locales = ['zh-CN', 'en-US']
+const languageLabels = {
+  'zh-CN': '简体中文',
+  'en-US': 'English(暂不支持)'
+}
+// eslint-disable-next-line
+const languageIcons = {
+  'zh-CN': '🇨🇳',
+  'en-US': '🇺🇸'
+}
+
+const SelectLang = {
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-drop-down'
+    }
+  },
+  name: 'SelectLang',
+  mixins: [i18nMixin],
+  render () {
+    const { prefixCls } = this
+    const changeLang = ({ key }) => {
+      this.setLang(key)
+    }
+    const langMenu = (
+      <Menu class={['menu', 'ant-pro-header-menu']} selectedKeys={[this.currentLang]} onClick={changeLang}>
+        {locales.map(locale => (
+          <Menu.Item key={locale}>
+            <span role="img" aria-label={languageLabels[locale]}>
+              {languageIcons[locale]}
+            </span>{' '}
+            {languageLabels[locale]}
+          </Menu.Item>
+        ))}
+      </Menu>
+    )
+    return (
+      <Dropdown overlay={langMenu} placement="bottomRight">
+        <span class={prefixCls}>
+          <Icon type="global" title={i18nRender('navBar.lang')} />
+        </span>
+      </Dropdown>
+    )
+  }
+}
+
+export default SelectLang
diff --git a/src/components/SelectLang/index.less b/src/components/SelectLang/index.less
new file mode 100644
index 0000000..750c9c7
--- /dev/null
+++ b/src/components/SelectLang/index.less
@@ -0,0 +1,31 @@
+@import "~ant-design-vue/es/style/themes/default";
+
+@header-menu-prefix-cls: ~'@{ant-prefix}-pro-header-menu';
+@header-drop-down-prefix-cls: ~'@{ant-prefix}-pro-drop-down';
+
+.@{header-menu-prefix-cls} {
+
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.@{header-drop-down-prefix-cls} {
+
+  line-height: @layout-header-height;
+  vertical-align: top;
+  cursor: pointer;
+
+  > i {
+    font-size: 16px !important;
+    transform: none !important;
+
+    svg {
+      position: relative;
+      top: -1px;
+    }
+  }
+}
diff --git a/src/components/SettingDrawer/SettingDrawer.vue b/src/components/SettingDrawer/SettingDrawer.vue
new file mode 100644
index 0000000..f041ae4
--- /dev/null
+++ b/src/components/SettingDrawer/SettingDrawer.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="setting-drawer">
+    <a-drawer
+      width="300"
+      placement="right"
+      @close="onClose"
+      :closable="false"
+      :visible="visible"
+      :drawer-style="{ position: 'absolute' }"
+      style="position: absolute"
+    >
+      <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">
+                暗色菜单风格1
+              </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">
+              配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件。修改配置文件后，需要清空本地缓存和LocalStorage
+              <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" slot="handle">
+        <a-icon type="setting" v-if="!visible"/>
+        <a-icon type="close" v-else/>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import SettingItem from './SettingItem'
+import config from '@/config/defaultSettings'
+import { updateTheme, updateColorWeak, colorList } from './settingConfig'
+
+export default {
+  components: {
+    SettingItem
+  },
+  mixins: [],
+  data () {
+    return {
+      visible: false,
+      colorList
+    }
+  },
+  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'
+}`
+      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>
diff --git a/src/components/SettingDrawer/SettingItem.vue b/src/components/SettingDrawer/SettingItem.vue
new file mode 100644
index 0000000..2b3b553
--- /dev/null
+++ b/src/components/SettingDrawer/SettingItem.vue
@@ -0,0 +1,38 @@
+<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>
diff --git a/src/components/SettingDrawer/index.js b/src/components/SettingDrawer/index.js
new file mode 100644
index 0000000..8260f2d
--- /dev/null
+++ b/src/components/SettingDrawer/index.js
@@ -0,0 +1,2 @@
+import SettingDrawer from './SettingDrawer'
+export default SettingDrawer
diff --git a/src/components/SettingDrawer/settingConfig.js b/src/components/SettingDrawer/settingConfig.js
new file mode 100644
index 0000000..2cfab79
--- /dev/null
+++ b/src/components/SettingDrawer/settingConfig.js
@@ -0,0 +1,48 @@
+import message from 'ant-design-vue/es/message'
+// 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(() => {
+    setTimeout(() => {
+      hideMessage()
+    }, 10)
+  })
+}
+
+const updateColorWeak = colorWeak => {
+  // document.body.className = colorWeak ? 'colorWeak' : '';
+  const app = document.body.querySelector('#app')
+  colorWeak ? app.classList.add('colorWeak') : app.classList.remove('colorWeak')
+}
+
+export { updateTheme, colorList, updateColorWeak }
diff --git a/src/components/SettingDrawer/themeColor.js b/src/components/SettingDrawer/themeColor.js
new file mode 100644
index 0000000..10dfbd4
--- /dev/null
+++ b/src/components/SettingDrawer/themeColor.js
@@ -0,0 +1,24 @@
+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)
+  }
+}
diff --git a/src/components/StandardFormRow/StandardFormRow.vue b/src/components/StandardFormRow/StandardFormRow.vue
new file mode 100644
index 0000000..a4e261b
--- /dev/null
+++ b/src/components/StandardFormRow/StandardFormRow.vue
@@ -0,0 +1,122 @@
+<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>
diff --git a/src/components/StandardFormRow/index.js b/src/components/StandardFormRow/index.js
new file mode 100644
index 0000000..8155cc7
--- /dev/null
+++ b/src/components/StandardFormRow/index.js
@@ -0,0 +1,3 @@
+import StandardFormRow from './StandardFormRow'
+
+export default StandardFormRow
diff --git a/src/components/TagSelect/TagSelectOption.jsx b/src/components/TagSelect/TagSelectOption.jsx
new file mode 100644
index 0000000..b5ae799
--- /dev/null
+++ b/src/components/TagSelect/TagSelectOption.jsx
@@ -0,0 +1,45 @@
+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>)
+  }
+}
diff --git a/src/components/TagSelect/index.jsx b/src/components/TagSelect/index.jsx
new file mode 100644
index 0000000..af98ad7
--- /dev/null
+++ b/src/components/TagSelect/index.jsx
@@ -0,0 +1,113 @@
+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 () {
+      const props = {
+        on: {
+          change: (checked) => {
+            this.onCheckAll(checked)
+            checked.value = 'total'
+            this.$emit('change', checked)
+          }
+        }
+      }
+      const checkAllElement = <Option key={'total'} checked={this.localCheckAll} {...props}>All</Option>
+      return !this.hideCheckAll && checkAllElement || 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>
+    )
+  }
+}
diff --git a/src/components/TextArea/index.jsx b/src/components/TextArea/index.jsx
new file mode 100644
index 0000000..00aeb2f
--- /dev/null
+++ b/src/components/TextArea/index.jsx
@@ -0,0 +1,69 @@
+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>
+    )
+  }
+}
diff --git a/src/components/TextArea/style.less b/src/components/TextArea/style.less
new file mode 100644
index 0000000..6dee494
--- /dev/null
+++ b/src/components/TextArea/style.less
@@ -0,0 +1,12 @@
+.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
diff --git a/src/components/Tree/Tree.jsx b/src/components/Tree/Tree.jsx
new file mode 100644
index 0000000..e5a2a11
--- /dev/null
+++ b/src/components/Tree/Tree.jsx
@@ -0,0 +1,124 @@
+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>
+    )
+  }
+}
diff --git a/src/components/Trend/Trend.vue b/src/components/Trend/Trend.vue
new file mode 100644
index 0000000..526e1cc
--- /dev/null
+++ b/src/components/Trend/Trend.vue
@@ -0,0 +1,41 @@
+<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>
diff --git a/src/components/Trend/index.js b/src/components/Trend/index.js
new file mode 100644
index 0000000..9f14228
--- /dev/null
+++ b/src/components/Trend/index.js
@@ -0,0 +1,3 @@
+import Trend from './Trend.vue'
+
+export default Trend
diff --git a/src/components/Trend/index.less b/src/components/Trend/index.less
new file mode 100644
index 0000000..8a3d24c
--- /dev/null
+++ b/src/components/Trend/index.less
@@ -0,0 +1,42 @@
+@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
diff --git a/src/components/Trend/index.md b/src/components/Trend/index.md
new file mode 100644
index 0000000..8881f0e
--- /dev/null
+++ b/src/components/Trend/index.md
@@ -0,0 +1,45 @@
+# 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 |
+
diff --git a/src/components/_util/util.js b/src/components/_util/util.js
new file mode 100644
index 0000000..dd33231
--- /dev/null
+++ b/src/components/_util/util.js
@@ -0,0 +1,46 @@
+/**
+ * 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
+  }, '')
+}
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..62226ea
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,37 @@
+// pro components
+import AvatarList from '@/components/AvatarList'
+import Ellipsis from '@/components/Ellipsis'
+import FooterToolbar from '@/components/FooterToolbar'
+import NumberInfo from '@/components/NumberInfo'
+import Tree from '@/components/Tree/Tree'
+import Trend from '@/components/Trend'
+import MultiTab from '@/components/MultiTab'
+import IconSelector from '@/components/IconSelector'
+import TagSelect from '@/components/TagSelect'
+import StandardFormRow from '@/components/StandardFormRow'
+import ArticleListContent from '@/components/ArticleListContent'
+
+import Dialog from '@/components/Dialog'
+
+import SettingDrawer from '@/components/SettingDrawer'
+
+import ProLayout from '@/components/ProLayout'
+
+export {
+  AvatarList,
+  Trend,
+  Ellipsis,
+  FooterToolbar,
+  NumberInfo,
+  Tree,
+  MultiTab,
+  IconSelector,
+  TagSelect,
+  StandardFormRow,
+  ArticleListContent,
+
+  Dialog,
+  SettingDrawer,
+
+  ProLayout
+}
diff --git a/src/components/index.less b/src/components/index.less
new file mode 100644
index 0000000..e831c41
--- /dev/null
+++ b/src/components/index.less
@@ -0,0 +1,6 @@
+@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
diff --git a/src/config/defaultSettings.js b/src/config/defaultSettings.js
new file mode 100644
index 0000000..02e61b0
--- /dev/null
+++ b/src/config/defaultSettings.js
@@ -0,0 +1,32 @@
+/**
+ * 项目默认配置项
+ * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
+ * navTheme - sidebar theme ['dark', 'light'] 两种主题
+ * colorWeak - 色盲模式
+ * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
+ * fixedHeader - 固定 Header : boolean
+ * fixSiderbar - 固定左侧菜单栏 ： boolean
+ * contentWidth - 内容区布局： 流式 |  固定
+ *
+ * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
+ *
+ */
+
+export default {
+  navTheme: 'dark', // theme for nav menu
+  primaryColor: '#1890ff', // primary color of ant design
+  layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
+  contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+  fixedHeader: true, // sticky header
+  fixSiderbar: true, // sticky siderbar
+  colorWeak: false,
+  multiTab: true,
+  menu: {
+    locale: true
+  },
+  title: '算力云后台管理系统',
+  pwa: false,
+  iconfontUrl: '',
+  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
+  tableSize: 'middle'
+}
diff --git a/src/config/router.config.js b/src/config/router.config.js
new file mode 100644
index 0000000..34390e6
--- /dev/null
+++ b/src/config/router.config.js
@@ -0,0 +1,81 @@
+import { UserLayout } from '@/layouts'
+
+/**
+ * 首页
+ */
+export const indexRouterMap = [
+  {
+    path: '/index',
+    name: 'index',
+    component: 'Index',
+    meta: { title: '控制台', keepAlive: true, icon: 'dashboard' }
+  },
+  {
+    path: '/account/center',
+    name: 'center',
+    component: 'AccountCenter',
+    meta: { title: '个人中心', keepAlive: true },
+    hidden: true
+  },
+  {
+    path: '/account/settings',
+    name: 'settings',
+    component: 'AccountSettings',
+    meta: { title: '个人设置', hideHeader: true },
+    redirect: '/account/settings/base',
+    hidden: true,
+    children: [
+      {
+        path: '/account/settings/base',
+        name: 'BaseSettings',
+        component: 'BaseSettings',
+        hidden: true,
+        meta: { title: '基本设置', hidden: true }
+      },
+      {
+        path: '/account/settings/security',
+        name: 'SecuritySettings',
+        component: 'SecuritySettings',
+        meta: { title: '安全设置', hidden: true, keepAlive: true }
+      }
+    ]
+  },
+  {
+    path: '/system/notice/form',
+    name: 'NoticeForm',
+    component: 'NoticeForm',
+    meta: { title: '公告编辑', keepAlive: true },
+    hidden: true
+  },
+  {
+    path: '/gen/edit',
+    name: 'GenEdit',
+    component: 'GenEdit',
+    meta: { title: '修改生成配置', keepAlive: true },
+    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: '/404',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
+  }
+
+]
diff --git a/src/core/bootstrap.js b/src/core/bootstrap.js
new file mode 100644
index 0000000..ff35244
--- /dev/null
+++ b/src/core/bootstrap.js
@@ -0,0 +1,31 @@
+import store from '@/store'
+import storage from 'store'
+import {
+  ACCESS_TOKEN,
+  APP_LANGUAGE,
+  TOGGLE_CONTENT_WIDTH,
+  TOGGLE_FIXED_HEADER,
+  TOGGLE_FIXED_SIDEBAR, TOGGLE_HIDE_HEADER,
+  TOGGLE_LAYOUT, TOGGLE_NAV_THEME, TOGGLE_WEAK,
+  TOGGLE_COLOR, TOGGLE_MULTI_TAB
+} from '@/store/mutation-types'
+import { printANSI } from '@/utils/screenLog'
+import defaultSettings from '@/config/defaultSettings'
+
+export default function Initializer () {
+  printANSI() // 请自行移除该行.  please remove this line
+
+  store.commit(TOGGLE_LAYOUT, storage.get(TOGGLE_LAYOUT, defaultSettings.layout))
+  store.commit(TOGGLE_FIXED_HEADER, storage.get(TOGGLE_FIXED_HEADER, defaultSettings.fixedHeader))
+  store.commit(TOGGLE_FIXED_SIDEBAR, storage.get(TOGGLE_FIXED_SIDEBAR, defaultSettings.fixSiderbar))
+  store.commit(TOGGLE_CONTENT_WIDTH, storage.get(TOGGLE_CONTENT_WIDTH, defaultSettings.contentWidth))
+  store.commit(TOGGLE_HIDE_HEADER, storage.get(TOGGLE_HIDE_HEADER, defaultSettings.autoHideHeader))
+  store.commit(TOGGLE_NAV_THEME, storage.get(TOGGLE_NAV_THEME, defaultSettings.navTheme))
+  store.commit(TOGGLE_WEAK, storage.get(TOGGLE_WEAK, defaultSettings.colorWeak))
+  store.commit(TOGGLE_COLOR, storage.get(TOGGLE_COLOR, defaultSettings.primaryColor))
+  store.commit(TOGGLE_MULTI_TAB, storage.get(TOGGLE_MULTI_TAB, defaultSettings.multiTab))
+  store.commit('SET_TOKEN', storage.get(ACCESS_TOKEN))
+
+  store.dispatch('setLang', storage.get(APP_LANGUAGE, 'zh-CN'))
+  // last step
+}
diff --git a/src/core/directives/action.js b/src/core/directives/action.js
new file mode 100644
index 0000000..18b7584
--- /dev/null
+++ b/src/core/directives/action.js
@@ -0,0 +1,34 @@
+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/vueComponent/ant-design-vue-pro/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
diff --git a/src/core/icons.js b/src/core/icons.js
new file mode 100644
index 0000000..99cda5b
--- /dev/null
+++ b/src/core/icons.js
@@ -0,0 +1,124 @@
+/**
+ * Custom icon list
+ * All icons are loaded here for easy management
+ * @see https://vue.ant.design/components/icon/#Custom-Font-Icon
+ *
+ * 自定义图标加载表
+ * 所有图标均从这里加载，方便管理
+ */
+
+import bugIcon from '@/assets/icons/bug.svg?inline'
+import buildIcon from '@/assets/icons/build.svg?inline'
+import buttonIcon from '@/assets/icons/button.svg?inline'
+import bxAnalyseIcon from '@/assets/icons/bxAnalyse.svg?inline'
+import cascaderIcon from '@/assets/icons/cascader.svg?inline'
+import chartIcon from '@/assets/icons/chart.svg?inline'
+import checkboxIcon from '@/assets/icons/checkbox.svg?inline'
+import clipboardIcon from '@/assets/icons/clipboard.svg?inline'
+import codeIcon from '@/assets/icons/code.svg?inline'
+import colorIcon from '@/assets/icons/color.svg?inline'
+import componentIcon from '@/assets/icons/component.svg?inline'
+import dashboardIcon from '@/assets/icons/dashboard.svg?inline'
+import dateRangeIcon from '@/assets/icons/dateRange.svg?inline'
+import dateIcon from '@/assets/icons/date.svg?inline'
+import dictIcon from '@/assets/icons/dict.svg?inline'
+import documentationIcon from '@/assets/icons/documentation.svg?inline'
+import downloadIcon from '@/assets/icons/download.svg?inline'
+import dragIcon from '@/assets/icons/drag.svg?inline'
+import druidIcon from '@/assets/icons/druid.svg?inline'
+import editIcon from '@/assets/icons/edit.svg?inline'
+import eyeOpenIcon from '@/assets/icons/eyeOpen.svg?inline'
+import githubIcon from '@/assets/icons/github.svg?inline'
+import guideIcon from '@/assets/icons/guide.svg?inline'
+import inputIcon from '@/assets/icons/input.svg?inline'
+import jobIcon from '@/assets/icons/job.svg?inline'
+import logIcon from '@/assets/icons/log.svg?inline'
+import logininforIcon from '@/assets/icons/logininfor.svg?inline'
+import messageIcon from '@/assets/icons/message.svg?inline'
+import monitorIcon from '@/assets/icons/monitor.svg?inline'
+import numberIcon from '@/assets/icons/number.svg?inline'
+import onlineIcon from '@/assets/icons/online.svg?inline'
+import passwordIcon from '@/assets/icons/password.svg?inline'
+import pdfIcon from '@/assets/icons/pdf.svg?inline'
+import peoplesIcon from '@/assets/icons/peoples.svg?inline'
+import phoneIcon from '@/assets/icons/phone.svg?inline'
+import postIcon from '@/assets/icons/post.svg?inline'
+import questionIcon from '@/assets/icons/question.svg?inline'
+import radioIcon from '@/assets/icons/radio.svg?inline'
+import rateIcon from '@/assets/icons/rate.svg?inline'
+import redisIcon from '@/assets/icons/redis.svg?inline'
+import rowIcon from '@/assets/icons/row.svg?inline'
+import selectIcon from '@/assets/icons/select.svg?inline'
+import serverIcon from '@/assets/icons/server.svg?inline'
+import swaggerIcon from '@/assets/icons/swagger.svg?inline'
+import switchIcon from '@/assets/icons/switch.svg?inline'
+import systemIcon from '@/assets/icons/system.svg?inline'
+import textareaIcon from '@/assets/icons/textarea.svg?inline'
+import timeRangeIcon from '@/assets/icons/timeRange.svg?inline'
+import timeIcon from '@/assets/icons/time.svg?inline'
+import toolIcon from '@/assets/icons/tool.svg?inline'
+import treeTableIcon from '@/assets/icons/treeTable.svg?inline'
+import treeIcon from '@/assets/icons/tree.svg?inline'
+import uploadIcon from '@/assets/icons/upload.svg?inline'
+import userIcon from '@/assets/icons/user.svg?inline'
+import validCodeIcon from '@/assets/icons/validCode.svg?inline'
+
+const allIcon = {
+    bugIcon,
+    buildIcon,
+    buttonIcon,
+    bxAnalyseIcon,
+    cascaderIcon,
+    chartIcon,
+    checkboxIcon,
+    clipboardIcon,
+    codeIcon,
+    colorIcon,
+    componentIcon,
+    dashboardIcon,
+    dateRangeIcon,
+    dateIcon,
+    dictIcon,
+    documentationIcon,
+    downloadIcon,
+    dragIcon,
+    druidIcon,
+    editIcon,
+    eyeOpenIcon,
+    githubIcon,
+    guideIcon,
+    inputIcon,
+    jobIcon,
+    logIcon,
+    logininforIcon,
+    messageIcon,
+    monitorIcon,
+    numberIcon,
+    onlineIcon,
+    passwordIcon,
+    pdfIcon,
+    peoplesIcon,
+    phoneIcon,
+    postIcon,
+    questionIcon,
+    radioIcon,
+    rateIcon,
+    redisIcon,
+    rowIcon,
+    selectIcon,
+    serverIcon,
+    swaggerIcon,
+    switchIcon,
+    systemIcon,
+    textareaIcon,
+    timeRangeIcon,
+    timeIcon,
+    toolIcon,
+    treeTableIcon,
+    treeIcon,
+    uploadIcon,
+    userIcon,
+    validCodeIcon
+}
+
+export default allIcon
diff --git a/src/core/lazy_use.js b/src/core/lazy_use.js
new file mode 100644
index 0000000..2269f10
--- /dev/null
+++ b/src/core/lazy_use.js
@@ -0,0 +1,123 @@
+import Vue from 'vue'
+
+// base library
+import {
+  ConfigProvider,
+  Layout,
+  Input,
+  InputNumber,
+  Button,
+  Switch,
+  Radio,
+  Checkbox,
+  Select,
+  TreeSelect,
+  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,
+  Pagination,
+  FormModel,
+  PageHeader,
+  Result,
+  Statistic,
+  Descriptions,
+  message,
+  notification,
+  Space,
+  Tree
+} from 'ant-design-vue'
+
+// ext library
+import VueCropper from 'vue-cropper'
+import Dialog from '@/components/Dialog'
+import MultiTab from '@/components/MultiTab'
+import PageLoading from '@/components/PageLoading'
+import PermissionHelper from '@/core/permission/permission'
+import './directives/action'
+
+Vue.use(ConfigProvider)
+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(TreeSelect)
+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(Pagination)
+Vue.use(FormModel)
+Vue.use(PageHeader)
+Vue.use(Result)
+Vue.use(Statistic)
+Vue.use(Descriptions)
+Vue.use(Space)
+Vue.use(Tree)
+
+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
+
+Vue.use(Dialog) // this.$dialog func
+Vue.use(MultiTab)
+Vue.use(PageLoading)
+Vue.use(PermissionHelper)
+Vue.use(VueCropper)
+process.env.NODE_ENV !== 'production' && console.warn('[antd-pro] NOTICE: Antd use lazy-load.')
diff --git a/src/core/permission/permission.js b/src/core/permission/permission.js
new file mode 100644
index 0000000..fb69844
--- /dev/null
+++ b/src/core/permission/permission.js
@@ -0,0 +1,55 @@
+export 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: '导出' }
+}
+
+/**
+ * <a-button v-if="$auth('form.edit')">Button</a-button>
+ * @param Vue
+ */
+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
diff --git a/src/core/use.js b/src/core/use.js
new file mode 100644
index 0000000..db92c05
--- /dev/null
+++ b/src/core/use.js
@@ -0,0 +1,25 @@
+import Vue from 'vue'
+
+// base library
+import Antd from 'ant-design-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 '@/core/permission/permission'
+// import '@/components/use'
+import './directives/action'
+
+VueClipboard.config.autoSetContainer = true
+
+Vue.use(Antd)
+Vue.use(MultiTab)
+Vue.use(PageLoading)
+Vue.use(VueClipboard)
+Vue.use(PermissionHelper)
+Vue.use(VueCropper)
+
+process.env.NODE_ENV !== 'production' && console.warn('[antd-pro] WARNING: Antd now use fulled imported.')
diff --git a/src/directive/permission/hasPermi.js b/src/directive/permission/hasPermi.js
new file mode 100644
index 0000000..4a3f929
--- /dev/null
+++ b/src/directive/permission/hasPermi.js
@@ -0,0 +1,27 @@
+ /**
+ * 操作权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+import store from '@/store'
+
+export default {
+  inserted (el, binding, vnode) {
+    const { value } = binding
+    const allPermission = '*:*:*'
+    const permissions = store.getters && store.getters.permissions
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value
+
+      const hasPermissions = permissions.some(permission => {
+        return allPermission === permission || permissionFlag.includes(permission)
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    }
+  }
+}
diff --git a/src/directive/permission/hasRole.js b/src/directive/permission/hasRole.js
new file mode 100644
index 0000000..e1a0bab
--- /dev/null
+++ b/src/directive/permission/hasRole.js
@@ -0,0 +1,27 @@
+ /**
+ * 角色权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+import store from '@/store'
+
+export default {
+  inserted (el, binding, vnode) {
+    const { value } = binding
+    const superAdmin = 'admin'
+    const roles = store.getters && store.getters.roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value
+
+      const hasRole = roles.some(role => {
+        return superAdmin === role || roleFlag.includes(role)
+      })
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置角色权限标签值"`)
+    }
+  }
+}
diff --git a/src/directive/permission/index.js b/src/directive/permission/index.js
new file mode 100644
index 0000000..6bda3f8
--- /dev/null
+++ b/src/directive/permission/index.js
@@ -0,0 +1,15 @@
+import hasRole from './hasRole'
+import hasPermi from './hasPermi'
+
+const install = function (Vue) {
+  Vue.directive('hasRole', hasRole)
+  Vue.directive('hasPermi', hasPermi)
+}
+
+if (window.Vue) {
+  window['hasRole'] = hasRole
+  window['hasPermi'] = hasPermi
+  Vue.use(install); // eslint-disable-line
+}
+
+export default install
diff --git a/src/directive/style/highlight.js b/src/directive/style/highlight.js
new file mode 100644
index 0000000..c9e193b
--- /dev/null
+++ b/src/directive/style/highlight.js
@@ -0,0 +1,18 @@
+import Hljs from 'highlight.js'
+import 'highlight.js/styles/vs.css' // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
+
+export default {
+    inserted: function (el) {
+        const blocks = el.querySelectorAll('pre code')
+        for (let i = 0; i < blocks.length; i++) {
+            Hljs.highlightBlock(blocks[i])
+        }
+    },
+    // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
+    componentUpdated: function (el) {
+        const blocks = el.querySelectorAll('pre code')
+        for (let i = 0; i < blocks.length; i++) {
+            Hljs.highlightBlock(blocks[i])
+        }
+    }
+}
diff --git a/src/directive/style/index.js b/src/directive/style/index.js
new file mode 100644
index 0000000..36697c3
--- /dev/null
+++ b/src/directive/style/index.js
@@ -0,0 +1,12 @@
+import highlight from './highlight'
+
+const install = function (Vue) {
+  Vue.directive('highlight', highlight)
+}
+
+if (window.Vue) {
+  window['highlight'] = highlight
+  Vue.use(install); // eslint-disable-line
+}
+
+export default install
diff --git a/src/global.less b/src/global.less
new file mode 100644
index 0000000..723d76d
--- /dev/null
+++ b/src/global.less
@@ -0,0 +1,119 @@
+@import '~ant-design-vue/es/style/themes/default.less';
+
+html,
+body,
+#app, #root {
+  height: 100%;
+}
+
+.colorWeak {
+  filter: invert(80%);
+}
+
+.ant-layout.layout-basic {
+  height: 100vh;
+  min-height: 100vh;
+}
+
+canvas {
+  display: block;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
+// 数据列表 操作
+.table-operator {
+  margin-bottom: 18px;
+
+  button {
+    margin-right: 8px;
+  }
+}
+// 数据列表 搜索条件
+.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;
+  }
+}
+
+@media (max-width: @screen-xs) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+    &-thead > tr,
+    &-tbody > tr {
+      > th,
+      > td {
+        white-space: pre;
+        > span {
+          display: block;
+        }
+      }
+    }
+  }
+}
+//表格上方操作条
+.table-operations {
+  margin-bottom: 16px;
+}
+
+.table-operations > button {
+  margin-right: 8px;
+}
+// 详情页底部按钮
+.bottom-control {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 4px 4px;
+}
+.ant-drawer-body {
+  padding: 24px 24px 50px 24px;
+  font-size: 14px;
+  line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less
new file mode 100644
index 0000000..0a1fcec
--- /dev/null
+++ b/src/layouts/BasicLayout.less
@@ -0,0 +1,61 @@
+@import "~ant-design-vue/es/style/themes/default.less";
+
+.ant-pro-global-header-index-right {
+  margin-right: 8px;
+
+  &.ant-pro-global-header-index-dark {
+    .ant-pro-global-header-index-action {
+      color: hsla(0, 0%, 100%, .85);
+
+      &:hover {
+        background: #1890ff;
+      }
+    }
+  }
+
+  .ant-pro-account-avatar {
+    .antd-pro-global-header-index-avatar {
+      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
+      margin-right: 8px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .menu {
+    .anticon {
+      margin-right: 8px;
+    }
+
+    .ant-dropdown-menu-item {
+      min-width: 100px;
+    }
+  }
+}
+.ant-layout-sider-children {
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background-color: transparent;
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: skyblue;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+  }
+}
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
new file mode 100644
index 0000000..9ecdc3e
--- /dev/null
+++ b/src/layouts/BasicLayout.vue
@@ -0,0 +1,171 @@
+<template>
+  <pro-layout
+    :menus="menus"
+    :collapsed="collapsed"
+    :mediaQuery="query"
+    :isMobile="isMobile"
+    :handleMediaQuery="handleMediaQuery"
+    :handleCollapse="handleCollapse"
+    :i18nRender="i18nRender"
+    v-bind="settings"
+  >
+
+    <!-- layout content -->
+    <!-- 2021.01.15 默认固定页头，去掉样式paddingTop: fixedHeader ? '64' : '0'  -->
+    <a-layout-content :style="{ height: '100%', margin: '0 0 0px 0'}">
+      <multi-tab v-if="multiTab"></multi-tab>
+      <transition name="page-transition">
+      </transition>
+    </a-layout-content>
+    <!-- 1.0.0+ 版本 pro-layout 提供 API，
+          我们推荐使用这种方式进行 LOGO 和 title 自定义
+    -->
+    <template v-slot:menuHeaderRender>
+      <div>
+        <img src="~@/assets/logo.png" class="logo" alt="logo">
+        <h1>{{ title }}</h1>
+      </div>
+    </template>
+
+    <setting-drawer :settings="settings" @change="handleSettingChange" />
+    <template v-slot:rightContentRender>
+      <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
+    </template>
+    <template v-slot:footerRender>
+      <global-footer />
+    </template>
+    <router-view />
+  </pro-layout>
+</template>
+
+<script>
+import MultiTab from '@/components/MultiTab'
+import { SettingDrawer, updateTheme } from '@/components/ProLayout'
+import { i18nRender } from '@/locales'
+import { mapState } from 'vuex'
+import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
+
+import defaultSettings from '@/config/defaultSettings'
+import RightContent from '@/components/GlobalHeader/RightContent'
+import GlobalFooter from '@/components/GlobalFooter'
+
+export default {
+  name: 'BasicLayout',
+  components: {
+    SettingDrawer,
+    RightContent,
+    GlobalFooter,
+    MultiTab
+  },
+  data () {
+    return {
+      // preview.pro.antdv.com only use.
+      isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
+      // end
+      // multiTab: defaultSettings.multiTab,
+      fixedHeader: defaultSettings.fixedHeader,
+      // base
+      menus: [],
+      // 侧栏展开状态
+      collapsed: false,
+      title: defaultSettings.title,
+      multiTab: defaultSettings.multiTab,
+
+      settings: {
+        // 布局类型
+        layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
+        // CONTENT_WIDTH_TYPE
+        contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
+        // 主题 'dark' | 'light'
+        theme: defaultSettings.navTheme,
+        // 主色调
+        primaryColor: defaultSettings.primaryColor,
+        fixedHeader: defaultSettings.fixedHeader,
+        fixSiderbar: defaultSettings.fixSiderbar,
+        colorWeak: defaultSettings.colorWeak,
+
+        hideHintAlert: false,
+        hideCopyButton: false
+      },
+      // 媒体查询
+      query: {},
+
+      // 是否手机模式
+      isMobile: false
+    }
+  },
+  computed: {
+    ...mapState({
+      // 动态主路由
+      mainMenu: state => state.permission.addRouters
+    })
+  },
+  created () {
+    const routes = this.mainMenu.find(item => item.path === '/')
+    this.menus = (routes && routes.children) || []
+    // 处理侧栏展开状态
+    this.$watch('collapsed', () => {
+      this.$store.commit(SIDEBAR_TYPE, this.collapsed)
+    })
+    this.$watch('isMobile', () => {
+      this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
+    })
+  },
+  mounted () {
+    const userAgent = navigator.userAgent
+    if (userAgent.indexOf('Edge') > -1) {
+      this.$nextTick(() => {
+        this.collapsed = !this.collapsed
+        setTimeout(() => {
+          this.collapsed = !this.collapsed
+        }, 16)
+      })
+    }
+
+    // first update color
+    // TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
+    if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
+      updateTheme(this.settings.primaryColor)
+    }
+  },
+  methods: {
+    i18nRender,
+    handleMediaQuery (val) {
+      this.query = val
+      if (this.isMobile && !val['screen-xs']) {
+        this.isMobile = false
+        return
+      }
+      if (!this.isMobile && val['screen-xs']) {
+        this.isMobile = true
+        this.collapsed = false
+        this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
+        // this.settings.fixSiderbar = false
+      }
+    },
+    handleCollapse (val) {
+      this.collapsed = val
+    },
+    handleSettingChange ({ type, value }) {
+      type && (this.settings[type] = value)
+      switch (type) {
+        case 'contentWidth':
+          this.settings[type] = value
+          break
+        case 'layout':
+          if (value === 'sidemenu') {
+            this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
+          } else {
+            this.settings.fixSiderbar = false
+            this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fixed
+          }
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import "./BasicLayout.less";
+</style>
diff --git a/src/layouts/BlankLayout.vue b/src/layouts/BlankLayout.vue
new file mode 100644
index 0000000..1bfbfbf
--- /dev/null
+++ b/src/layouts/BlankLayout.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BlankLayout'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
new file mode 100644
index 0000000..86df485
--- /dev/null
+++ b/src/layouts/PageView.vue
@@ -0,0 +1,12 @@
+<template>
+  <page-header-wrapper>
+    <router-view />
+  </page-header-wrapper>
+</template>
+
+<script>
+
+export default {
+  name: 'PageView'
+}
+</script>
diff --git a/src/layouts/RouteView.vue b/src/layouts/RouteView.vue
new file mode 100644
index 0000000..edae19e
--- /dev/null
+++ b/src/layouts/RouteView.vue
@@ -0,0 +1,32 @@
+<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>
diff --git a/src/layouts/UserLayout.vue b/src/layouts/UserLayout.vue
new file mode 100644
index 0000000..f9800fd
--- /dev/null
+++ b/src/layouts/UserLayout.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
+    <div class="container">
+      <div class="user-layout-content">
+        <router-view/>
+      </div>
+      <div class="footer">
+        <!--        <div class="links">-->
+        <!--          <a href="https://github.com/fuzui/RuoYi-Antdv" target="_blank">帮助</a>-->
+        <!--          <a href="https://github.com/fuzui/RuoYi-Antdv" target="_blank">隐私</a>-->
+        <!--          <a href="https://github.com/fuzui/RuoYi-Antdv" target="_blank">条款</a>-->
+        <!--        </div>-->
+        <div class="copyright">
+          Copyright &copy; {{year}} <a href="" target="_blank">算力云</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { deviceMixin } from '@/store/device-mixin'
+
+  export default {
+    name: 'UserLayout',
+    data () {
+      const date = new Date()
+      return {
+        year: date.getFullYear()
+      }
+    },
+    mixins: [deviceMixin],
+    mounted () {
+      document.body.classList.add('userLayout')
+    },
+    beforeDestroy () {
+      document.body.classList.remove('userLayout')
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  #userLayout.user-layout-wrapper {
+    height: calc(100vh);
+
+    &.mobile {
+      .container {
+        .main {
+          max-width: 368px;
+          width: 98%;
+        }
+      }
+    }
+
+    .container {
+      width: 100%;
+      height: calc(100vh);
+      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+      background-size: 100%;
+      //padding: 50px 0 84px;
+      position: relative;
+    }
+
+    .user-layout-content {
+      padding: 32px 0 24px;
+      /*background: white;*/
+      /*border: 1px #fff solid;*/
+      height: calc(100vh - 40px);
+      /*flex 布局*/
+      display: flex;
+      /*实现垂直居中*/
+      align-items: center;
+      /*实现水平居中*/
+      justify-content: center;
+
+    }
+
+    .footer {
+      float: bottom;
+      bottom: 0;
+      height:20px;
+      width: calc(100vw);
+      margin: 0;
+      text-align: center;
+      justify-content: center;
+      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;
+        text-align: center;
+
+      }
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+  }
+</style>
diff --git a/src/layouts/index.js b/src/layouts/index.js
new file mode 100644
index 0000000..1d62d6c
--- /dev/null
+++ b/src/layouts/index.js
@@ -0,0 +1,7 @@
+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 }
diff --git a/src/locales/index.js b/src/locales/index.js
new file mode 100644
index 0000000..99a11a7
--- /dev/null
+++ b/src/locales/index.js
@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import storage from 'store'
+import moment from 'moment'
+
+// default lang
+import zhCn from './lang/zh-CN'
+
+Vue.use(VueI18n)
+
+export const defaultLang = 'zh-CN'
+
+const messages = {
+  'zh-CN': {
+    ...zhCn
+  }
+}
+
+const i18n = new VueI18n({
+  silentTranslationWarn: true,
+  locale: defaultLang,
+  fallbackLocale: defaultLang,
+  messages
+})
+
+const loadedLanguages = [defaultLang]
+
+function setI18nLanguage (lang) {
+  i18n.locale = lang
+  // request.headers['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync (lang = defaultLang) {
+  return new Promise(resolve => {
+    // 缓存语言设置
+    storage.set('lang', lang)
+    if (i18n.locale !== lang) {
+      if (!loadedLanguages.includes(lang)) {
+        return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msg => {
+          const locale = msg.default
+          i18n.setLocaleMessage(lang, locale)
+          loadedLanguages.push(lang)
+          moment.updateLocale(locale.momentName, locale.momentLocale)
+          return setI18nLanguage(lang)
+        })
+      }
+      return resolve(setI18nLanguage(lang))
+    }
+    return resolve(lang)
+  })
+}
+
+export function i18nRender (key) {
+  return i18n.t(`${key}`)
+}
+
+  export default i18n
diff --git a/src/locales/lang/en-US.js b/src/locales/lang/en-US.js
new file mode 100644
index 0000000..137fc5b
--- /dev/null
+++ b/src/locales/lang/en-US.js
@@ -0,0 +1,16 @@
+import antdEnUS from 'ant-design-vue/es/locale-provider/en_US'
+import momentEU from 'moment/locale/eu'
+import setting from './en-US/setting'
+
+const components = {
+  antLocale: antdEnUS,
+  momentName: 'eu',
+  momentLocale: momentEU
+}
+
+export default {
+  'message': '-',
+
+  ...components,
+  ...setting
+}
diff --git a/src/locales/lang/en-US/setting.js b/src/locales/lang/en-US/setting.js
new file mode 100644
index 0000000..baa1e97
--- /dev/null
+++ b/src/locales/lang/en-US/setting.js
@@ -0,0 +1,30 @@
+export default {
+    // 'app.setting.pagestyle': 'Page style setting',
+    // 'app.setting.pagestyle.light': 'Light style',
+    // 'app.setting.pagestyle.dark': 'Dark style',
+    // 'app.setting.pagestyle.realdark': 'RealDark style',
+    // 'app.setting.themecolor': 'Theme Color',
+    // 'app.setting.navigationmode': 'Navigation Mode',
+    // 'app.setting.content-width': 'Content Width',
+    // 'app.setting.fixedheader': 'Fixed Header',
+    // 'app.setting.fixedsidebar': 'Fixed Sidebar',
+    // 'app.setting.multitab': 'View multitab',
+    // 'app.setting.sidemenu': 'Side Menu Layout',
+    // 'app.setting.topmenu': 'Top Menu Layout',
+    // 'app.setting.content-width.fixed': 'Fixed',
+    // 'app.setting.content-width.fluid': 'Fluid',
+    // 'app.setting.othersettings': 'Other Settings',
+    // 'app.setting.weakmode': 'Weak Mode',
+    // 'app.setting.copy': 'Copy Setting',
+    // 'app.setting.loading': 'Loading theme',
+    // 'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/config/defaultSettings.js',
+    // 'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify',
+    // 'app.setting.themecolor.daybreak': 'Daybreak Blue',
+    // 'app.setting.themecolor.dust': 'Dust Red',
+    // 'app.setting.themecolor.volcano': 'Volcano',
+    // 'app.setting.themecolor.sunset': 'Sunset Orange',
+    // 'app.setting.themecolor.cyan': 'Cyan',
+    // 'app.setting.themecolor.green': 'Polar Green',
+    // 'app.setting.themecolor.geekblue': 'Geek Blue',
+    // 'app.setting.themecolor.purple': 'Golden Purple'
+}
diff --git a/src/locales/lang/zh-CN.js b/src/locales/lang/zh-CN.js
new file mode 100644
index 0000000..bb1b13e
--- /dev/null
+++ b/src/locales/lang/zh-CN.js
@@ -0,0 +1,16 @@
+import antd from 'ant-design-vue/es/locale-provider/zh_CN'
+import momentCN from 'moment/locale/zh-cn'
+import setting from './zh-CN/setting'
+
+const components = {
+  antLocale: antd,
+  momentName: 'zh-cn',
+  momentLocale: momentCN
+}
+
+export default {
+  'message': '-',
+
+  ...components,
+  ...setting
+}
diff --git a/src/locales/lang/zh-CN/setting.js b/src/locales/lang/zh-CN/setting.js
new file mode 100644
index 0000000..5f91a1a
--- /dev/null
+++ b/src/locales/lang/zh-CN/setting.js
@@ -0,0 +1,30 @@
+export default {
+    'app.setting.pagestyle': '整体风格设置',
+    'app.setting.pagestyle.light': '亮色菜单风格',
+    'app.setting.pagestyle.dark': '暗色菜单风格',
+    'app.setting.pagestyle.realdark': '暗黑模式',
+    'app.setting.themecolor': '主题色',
+    'app.setting.navigationmode': '导航模式',
+    'app.setting.content-width': '内容区域宽度',
+    'app.setting.fixedheader': '固定 Header',
+    'app.setting.fixedsidebar': '固定侧边栏',
+    'app.setting.multitab': '显示页签',
+    'app.setting.sidemenu': '侧边菜单布局',
+    'app.setting.topmenu': '顶部菜单布局',
+    'app.setting.content-width.fixed': 'Fixed',
+    'app.setting.content-width.fluid': 'Fluid',
+    'app.setting.othersettings': '其他设置',
+    'app.setting.weakmode': '色弱模式',
+    'app.setting.copy': '拷贝设置',
+    'app.setting.loading': '加载主题中',
+    'app.setting.copyinfo': '拷贝设置成功 src/config/defaultSettings.js',
+    'app.setting.production.hint': '配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',
+    'app.setting.themecolor.daybreak': '拂晓蓝',
+    'app.setting.themecolor.dust': '薄暮',
+    'app.setting.themecolor.volcano': '火山',
+    'app.setting.themecolor.sunset': '日暮',
+    'app.setting.themecolor.cyan': '明青',
+    'app.setting.themecolor.green': '极光绿',
+    'app.setting.themecolor.geekblue': '极客蓝',
+    'app.setting.themecolor.purple': '酱紫'
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..f56d81c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,65 @@
+// with polyfills
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import permission from './directive/permission'
+import style from './directive/style'
+import store from './store/'
+import i18n from './locales'
+import { VueAxios } from './utils/request'
+import ProLayout, { PageHeaderWrapper } from '@/components/ProLayout'
+import FooterToolBar from '@/components/FooterToolbar'
+import FileUpload from '@/components/FileUpload'
+import themePluginConfig from '../config/themePluginConfig'
+
+// mock
+// WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
+// import './mock'
+
+import bootstrap from './core/bootstrap'
+import './core/lazy_use' // use lazy load components
+import './permission' // permission control
+import './utils/filter' // global filter
+import './global.less' // global style
+import config from '@/config/defaultSettings'
+import { getDicts } from '@/api/system/dict/data'
+import { getConfigKey } from '@/api/system/config'
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from '@/utils/ruoyi'
+
+// 全局方法挂载
+Vue.prototype.getDicts = getDicts
+Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.parseTime = parseTime
+Vue.prototype.resetForm = resetForm
+Vue.prototype.addDateRange = addDateRange
+Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.download = download
+Vue.prototype.handleTree = handleTree
+Vue.prototype.tableSize = config.tableSize
+Vue.config.productionTip = false
+
+// mount axios to `Vue.$http` and `this.$http`
+Vue.use(VueAxios)
+// use pro-layout components
+Vue.component('pro-layout', ProLayout)
+Vue.component('page-container', PageHeaderWrapper)
+Vue.component('page-header-wrapper', PageHeaderWrapper)
+Vue.component('footer-tool-bar', FooterToolBar)
+Vue.component('file-upload', FileUpload)
+
+Vue.use(permission)
+Vue.use(style)
+
+window.umi_plugin_ant_themeVar = themePluginConfig.theme
+new Vue({
+  router,
+  store,
+  i18n,
+  // init localstorage, vuex
+  created: bootstrap,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/mock/index.js b/src/mock/index.js
new file mode 100644
index 0000000..ebc2013
--- /dev/null
+++ b/src/mock/index.js
@@ -0,0 +1,18 @@
+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('[antd-pro] ERROR: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.')
+  }
+  // 使用同步加载依赖
+  // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
+  console.log('[antd-pro] mock mounting')
+  const Mock = require('mockjs2')
+  require('./services/user')
+
+  Mock.setup({
+    timeout: 800 // setter delay time
+  })
+  console.log('[antd-pro] mock mounted')
+}
diff --git a/src/mock/services/user.js b/src/mock/services/user.js
new file mode 100644
index 0000000..47fe15c
--- /dev/null
+++ b/src/mock/services/user.js
@@ -0,0 +1,26 @@
+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': {}
+  }
+  return builder(userInfo)
+}
+
+Mock.mock(/\/api\/user\/info/, 'get', info)
diff --git a/src/mock/util.js b/src/mock/util.js
new file mode 100644
index 0000000..a4be036
--- /dev/null
+++ b/src/mock/util.js
@@ -0,0 +1,38 @@
+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)
+}
diff --git a/src/permission.js b/src/permission.js
new file mode 100644
index 0000000..6bd44fb
--- /dev/null
+++ b/src/permission.js
@@ -0,0 +1,79 @@
+import router from './router'
+import store from './store'
+import storage 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'
+import { i18nRender } from '@/locales'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const allowList = ['login'] // no redirect allowList
+const loginRoutePath = '/user/login'
+const defaultRoutePath = '/index'
+
+router.beforeEach((to, from, next) => {
+  NProgress.start() // start progress bar
+  to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`))
+  /* has token */
+  if (storage.get(ACCESS_TOKEN)) {
+    if (to.path === loginRoutePath || to.path === '/') {
+      next({ path: defaultRoutePath })
+      NProgress.done()
+    } else {
+      // check login user.roles is null
+      if (store.getters.roles.length === 0) {
+        // request login userInfo
+        store
+          .dispatch('GetInfo')
+          .then(res => {
+            // const roles = res.result && res.result.role
+            const roles = res.roles
+            // generate dynamic router
+            store.dispatch('GenerateRoutes', { roles }).then(() => {
+              // 根据roles权限生成可访问的路由表
+              // 动态添加可访问路由表
+              router.addRoutes(store.getters.addRouters)
+              // router.addRoutes(accessRoutes)
+              // 请求带有 redirect 重定向时，登录自动重定向到该地址
+              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+              // const redirect = decodeURIComponent(from.query.redirect || to.path)
+              // if (to.path === redirect) {
+              //   // 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: '/' })
+            })
+          })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (allowList.includes(to.name)) {
+      // 在免登录名单，直接进入
+      next()
+    } else {
+      next({ path: loginRoutePath, 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
+})
diff --git a/src/router/README.md b/src/router/README.md
new file mode 100644
index 0000000..48b7520
--- /dev/null
+++ b/src/router/README.md
@@ -0,0 +1,134 @@
+路由/菜单说明
+====
+
+
+格式和说明
+----
+
+```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/vueComponent/ant-design-vue-pro/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/vueComponent/ant-design-vue-pro/blob/master/src/store/modules/permission.js#L10)
+
+
+附权限路由结构：
+
+![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
+
+
+第二种前端路由由后端动态生成的设计，可以前往官网文档 https://pro.antdv.com/docs/authority-management 参考
diff --git a/src/router/generator-routers.js b/src/router/generator-routers.js
new file mode 100644
index 0000000..d0c4a50
--- /dev/null
+++ b/src/router/generator-routers.js
@@ -0,0 +1,134 @@
+// eslint-disable-next-line
+import { getRouters } from '@/api/menu'
+import { UserLayout, BasicLayout, BlankLayout, PageView, RouteView } from '@/layouts'
+import { indexRouterMap } from '@/config/router.config'
+import allIcon from '@/core/icons'
+import { validURL } from '@/utils/validate'
+// 前端路由表
+const constantRouterComponents = {
+  // 基础页面 layout 必须引入
+  BasicLayout: BasicLayout,
+  BlankLayout: BlankLayout,
+  RouteView: RouteView,
+  PageView: PageView,
+  UserLayout: UserLayout, // 登陆注册页面的通用布局
+  // 你需要动态引入的页面组件
+  'Index': () => import('@/views/index'),
+  // account
+  'AccountCenter': () => import('@/views/account/center'),
+  'AccountSettings': () => import('@/views/account/settings/index'),
+  'BaseSettings': () => import('@/views/account/settings/BaseSetting'),
+  'SecuritySettings': () => import('@/views/account/settings/Security'),
+  // 公告新增修改
+  'NoticeForm': () => import('@/views/system/notice/CreateForm'),
+  // 修改生成配置
+  'GenEdit': () => import('@/views/tool/gen/modules/GenEdit')
+}
+
+// 前端未找到页面路由（固定不用改）
+const notFoundRouter = {
+  path: '*', redirect: '/404', hidden: true
+}
+
+// 根级菜单
+const rootRouter = {
+  key: '',
+  name: 'index',
+  path: '',
+  component: 'BasicLayout',
+  redirect: '/index',
+  meta: {
+    title: '首页'
+  },
+  children: []
+}
+
+/**
+ * 动态生成菜单
+ * @param token
+ * @returns {Promise<Router>}
+ */
+export const generatorDynamicRouter = (token) => {
+  return new Promise((resolve, reject) => {
+    // 向后端请求路由数据
+    getRouters().then(res => {
+      const menuNav = []
+      rootRouter.children = indexRouterMap.concat(res.data)
+      menuNav.push(rootRouter)
+      const routers = generator(menuNav)
+      routers.push(notFoundRouter)
+      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, hidden, icon, noCache } = item.meta || {}
+    if (item.component) {
+      // Layout ParentView 组件特殊处理
+      if (item.component === 'Layout') {
+        item.component = 'RouteView'
+      } else if (item.component === 'ParentView') {
+        // 三级菜单处理
+        item.component = 'RouteView'
+        item.path = '/' + item.path
+      }
+    }
+    window.console.log('path:' + item.name + '/' + item.path + '|' + item.isFrame)
+    if (item.path) {
+      // item.path = '/' + item.path
+    }
+    if (item.isFrame === 0) {
+      item.target = '_blank'
+    }
+    const currentRouter = {
+      // 如果路由设置了 path，则作为默认 path，否则 路由地址 动态拼接生成如 /dashboard/workplace
+      path: item.path || `${parent && parent.path || ''}/${item.path}`,
+      // 路由名称，建议唯一
+      name: item.name || item.key || '',
+      // 该路由对应页面的 组件(动态加载)
+      component: (constantRouterComponents[item.component || item.key]) || (() => import(`@/views/${item.component}`)),
+      hidden: item.hidden,
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        title: title,
+        icon: allIcon[icon + 'Icon'] || icon,
+        hiddenHeaderContent: hiddenHeaderContent,
+        // 目前只能通过判断path的http链接来判断是否外链，适配若依
+        target: validURL(item.path) ? '_blank' : '',
+        permission: item.name,
+        keepAlive: noCache,
+        hidden: hidden
+      },
+      redirect: item.redirect
+    }
+    // 是否设置了隐藏菜单
+    if (show === false) {
+      currentRouter.hidden = true
+    }
+    // 适配若依，若依为缩写路径，而antdv-pro的pro-layout要求每个路径需为全路径
+    if (!constantRouterComponents[item.component || item.key]) {
+      currentRouter.path = `${parent && parent.path || ''}/${item.path}`
+    }
+    // 是否设置了隐藏子菜单
+    if (hideChildren) {
+      currentRouter.hideChildrenInMenu = true
+    }
+    // 是否有子菜单，并递归处理，并将父path传入
+    if (item.children && item.children.length > 0) {
+      // Recursion
+      currentRouter.children = generator(item.children, currentRouter)
+    }
+    return currentRouter
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..afda622
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,17 @@
+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',
+  routes: constantRouterMap
+})
diff --git a/src/store/app-mixin.js b/src/store/app-mixin.js
new file mode 100644
index 0000000..c910ae9
--- /dev/null
+++ b/src/store/app-mixin.js
@@ -0,0 +1,32 @@
+import { mapState } from 'vuex'
+
+const baseMixin = {
+  computed: {
+    ...mapState({
+      layout: state => state.app.layout,
+      navTheme: state => state.app.theme,
+      primaryColor: state => state.app.color,
+      colorWeak: state => state.app.weak,
+      fixedHeader: state => state.app.fixedHeader,
+      fixedSidebar: state => state.app.fixedSidebar,
+      contentWidth: state => state.app.contentWidth,
+      autoHideHeader: state => state.app.autoHideHeader,
+
+      isMobile: state => state.app.isMobile,
+      sideCollapsed: state => state.app.sideCollapsed,
+      multiTab: state => state.app.multiTab
+    }),
+    isTopMenu () {
+      return this.layout === 'topmenu'
+    }
+  },
+  methods: {
+    isSideMenu () {
+      return !this.isTopMenu
+    }
+  }
+}
+
+export {
+  baseMixin
+}
diff --git a/src/store/device-mixin.js b/src/store/device-mixin.js
new file mode 100644
index 0000000..2510707
--- /dev/null
+++ b/src/store/device-mixin.js
@@ -0,0 +1,11 @@
+import { mapState } from 'vuex'
+
+const deviceMixin = {
+  computed: {
+    ...mapState({
+      isMobile: state => state.app.isMobile
+    })
+  }
+}
+
+export { deviceMixin }
diff --git a/src/store/getters.js b/src/store/getters.js
new file mode 100644
index 0000000..1a518c0
--- /dev/null
+++ b/src/store/getters.js
@@ -0,0 +1,17 @@
+const getters = {
+  isMobile: state => state.app.isMobile,
+  lang: state => state.app.lang,
+  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,
+  permissions: state => state.user.permissions,
+  userInfo: state => state.user.info,
+  addRouters: state => state.permission.addRouters,
+  multiTab: state => state.app.multiTab
+}
+
+export default getters
diff --git a/src/store/i18n-mixin.js b/src/store/i18n-mixin.js
new file mode 100644
index 0000000..715b0c8
--- /dev/null
+++ b/src/store/i18n-mixin.js
@@ -0,0 +1,16 @@
+import { mapState } from 'vuex'
+
+const i18nMixin = {
+  computed: {
+    ...mapState({
+      currentLang: state => state.app.lang
+    })
+  },
+  methods: {
+    setLang (lang) {
+      this.$store.dispatch('setLang', lang)
+    }
+  }
+}
+
+export default i18nMixin
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..28f5c34
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,33 @@
+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'
+import permission from './modules/async-router'
+
+// 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
+})
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
new file mode 100644
index 0000000..a3ec761
--- /dev/null
+++ b/src/store/modules/app.js
@@ -0,0 +1,99 @@
+import storage from 'store'
+import {
+  SIDEBAR_TYPE,
+  TOGGLE_MOBILE_TYPE,
+  TOGGLE_NAV_THEME,
+  TOGGLE_LAYOUT,
+  TOGGLE_FIXED_HEADER,
+  TOGGLE_FIXED_SIDEBAR,
+  TOGGLE_CONTENT_WIDTH,
+  TOGGLE_HIDE_HEADER,
+  TOGGLE_COLOR,
+  TOGGLE_WEAK,
+  TOGGLE_MULTI_TAB,
+  // i18n
+  APP_LANGUAGE
+} from '@/store/mutation-types'
+import { loadLanguageAsync } from '@/locales'
+
+const app = {
+  state: {
+    sideCollapsed: false,
+    isMobile: false,
+    theme: 'dark',
+    layout: '',
+    contentWidth: '',
+    fixedHeader: false,
+    fixedSidebar: false,
+    autoHideHeader: false,
+    color: '',
+    weak: false,
+    multiTab: true,
+    lang: 'zh-CN',
+    _antLocale: {}
+  },
+  mutations: {
+    [SIDEBAR_TYPE]: (state, type) => {
+      state.sideCollapsed = type
+      storage.set(SIDEBAR_TYPE, type)
+    },
+    [TOGGLE_MOBILE_TYPE]: (state, isMobile) => {
+      state.isMobile = isMobile
+    },
+    [TOGGLE_NAV_THEME]: (state, theme) => {
+      state.theme = theme
+      storage.set(TOGGLE_NAV_THEME, theme)
+    },
+    [TOGGLE_LAYOUT]: (state, mode) => {
+      state.layout = mode
+      storage.set(TOGGLE_LAYOUT, mode)
+    },
+    [TOGGLE_FIXED_HEADER]: (state, mode) => {
+      state.fixedHeader = mode
+      storage.set(TOGGLE_FIXED_HEADER, mode)
+    },
+    [TOGGLE_FIXED_SIDEBAR]: (state, mode) => {
+      state.fixedSidebar = mode
+      storage.set(TOGGLE_FIXED_SIDEBAR, mode)
+    },
+    [TOGGLE_CONTENT_WIDTH]: (state, type) => {
+      state.contentWidth = type
+      storage.set(TOGGLE_CONTENT_WIDTH, type)
+    },
+    [TOGGLE_HIDE_HEADER]: (state, type) => {
+      state.autoHideHeader = type
+      storage.set(TOGGLE_HIDE_HEADER, type)
+    },
+    [TOGGLE_COLOR]: (state, color) => {
+      state.color = color
+      storage.set(TOGGLE_COLOR, color)
+    },
+    [TOGGLE_WEAK]: (state, mode) => {
+      state.weak = mode
+      storage.set(TOGGLE_WEAK, mode)
+    },
+    [APP_LANGUAGE]: (state, lang, antd = {}) => {
+      state.lang = lang
+      state._antLocale = antd
+      storage.set(APP_LANGUAGE, lang)
+    },
+    [TOGGLE_MULTI_TAB]: (state, bool) => {
+      storage.set(TOGGLE_MULTI_TAB, bool)
+      state.multiTab = bool
+    }
+  },
+  actions: {
+    setLang ({ commit }, lang) {
+      return new Promise((resolve, reject) => {
+        commit(APP_LANGUAGE, lang)
+        loadLanguageAsync(lang).then(() => {
+          resolve()
+        }).catch((e) => {
+          reject(e)
+        })
+      })
+    }
+  }
+}
+
+export default app
diff --git a/src/store/modules/async-router.js b/src/store/modules/async-router.js
new file mode 100644
index 0000000..37f6af9
--- /dev/null
+++ b/src/store/modules/async-router.js
@@ -0,0 +1,31 @@
+/**
+ * 向后端请求用户的菜单，动态生成路由
+ */
+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 = constantRouterMap.concat(routers)
+      state.routers = constantRouterMap.concat(routers)
+      // state.routers = constantRouterMap
+    }
+  },
+  actions: {
+    GenerateRoutes ({ commit }, data) {
+      return new Promise(resolve => {
+        generatorDynamicRouter(data).then(routers => {
+          commit('SET_ROUTERS', routers)
+          resolve()
+        })
+      })
+    }
+  }
+}
+
+export default permission
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
new file mode 100644
index 0000000..676905e
--- /dev/null
+++ b/src/store/modules/permission.js
@@ -0,0 +1,104 @@
+import { constantRouterMap } from '@/config/router.config'
+import { getRouters } from '@/api/menu'
+import { BasicLayout } from '@/layouts'
+
+const RouteView = {
+  name: 'RouteView',
+  render: (h) => h('router-view')
+}
+// /**
+//  * 过滤账户是否拥有某一个权限，并将菜单从加载列表移除
+//  *
+//  * @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 (asyncRouterMap) {
+  const accessedRouters = asyncRouterMap.filter(route => {
+    // if (hasPermission(roles.permissionList, route)) {
+    //   if (route.children && route.children.length) {
+    //     route.children = filterAsyncRouter(route.children)
+    //   }
+    //   return true
+    // }
+      // if (route.children && route.children.length) {
+      //   route.children = filterAsyncRouter(route.children)
+      // }
+    if (route.component) {
+      // Layout ParentView 组件特殊处理
+      if (route.component === 'Layout') {
+        route.component = BasicLayout
+      } else {
+        route.component = RouteView
+      }
+    }
+    if (route.children != null && route.children && route.children.length) {
+      route.children = filterAsyncRouter(route.children)
+    }
+    return true
+  })
+  return accessedRouters
+}
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    }
+  },
+  actions: {
+    GenerateRoutes ({ commit }) {
+      return new Promise(resolve => {
+        getRouters().then(res => {
+          const accessedRoutes = filterAsyncRouter(res.data)
+          // const accessedRoutes = filterAsyncRouter(constantRouterMap)
+          // const accessedRoutes = constantRouterMap
+          // accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
+          commit('SET_ROUTERS', accessedRoutes)
+          resolve(accessedRoutes)
+        })
+        // const { roles } = data
+        // const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+        // commit('SET_ROUTERS', accessedRouters)
+        // resolve()
+      })
+    }
+  }
+}
+
+export default permission
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..6f52d9d
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,91 @@
+import storage from 'store'
+import { login, getInfo, logout } from '@/api/login'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+const user = {
+  state: {
+    token: '',
+    name: '',
+    welcome: '',
+    avatar: '',
+    roles: [],
+    info: {}
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    },
+    SET_INFO: (state, info) => {
+      state.info = info
+    },
+    SET_PERMISSIONS: (state, permissions) => {
+      state.permissions = permissions
+    }
+  },
+
+  actions: {
+    // 登录
+    Login ({ commit }, userInfo) {
+      return new Promise((resolve, reject) => {
+        login(userInfo).then(res => {
+          storage.set(ACCESS_TOKEN, res.token, 7 * 24 * 60 * 60 * 1000)
+          commit('SET_TOKEN', res.token)
+          resolve()
+        })
+        .catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 获取用户信息
+    GetInfo ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getInfo(state.token).then(res => {
+          const user = res.user
+          const avatar = user.avatar === '' ? require('@/assets/images/profile.jpg') : process.env.VUE_APP_BASE_API + user.avatar
+          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+            commit('SET_ROLES', res.roles)
+            commit('SET_PERMISSIONS', res.permissions)
+          } else {
+            commit('SET_ROLES', ['ROLE_DEFAULT'])
+          }
+          commit('SET_NAME', user.nickName)
+          commit('SET_AVATAR', avatar)
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 登出
+    Logout ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        logout(state.token).then(() => {
+          commit('SET_TOKEN', '')
+          commit('SET_ROLES', [])
+          commit('SET_PERMISSIONS', [])
+          storage.remove(ACCESS_TOKEN)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        }).finally(() => {
+        })
+      })
+    }
+
+  }
+}
+
+export default user
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
new file mode 100644
index 0000000..591b69e
--- /dev/null
+++ b/src/store/mutation-types.js
@@ -0,0 +1,24 @@
+export const ACCESS_TOKEN = 'access_token'
+
+export const SIDEBAR_TYPE = 'sidebar_type'
+export const TOGGLE_MOBILE_TYPE = 'is_mobile'
+export const TOGGLE_NAV_THEME = 'nav_theme'
+export const TOGGLE_LAYOUT = 'layout'
+export const TOGGLE_FIXED_HEADER = 'fixed_header'
+export const TOGGLE_FIXED_SIDEBAR = 'fixed_sidebar'
+export const TOGGLE_CONTENT_WIDTH = 'content_width'
+export const TOGGLE_HIDE_HEADER = 'auto_hide_header'
+export const TOGGLE_COLOR = 'color'
+export const TOGGLE_WEAK = 'weak'
+export const TOGGLE_MULTI_TAB = 'multi_tab'
+export const APP_LANGUAGE = 'app_language'
+
+export const CONTENT_WIDTH_TYPE = {
+  Fluid: 'Fluid',
+  Fixed: 'Fixed'
+}
+
+export const NAV_THEME = {
+  LIGHT: 'light',
+  DARK: 'dark'
+}
diff --git a/src/utils/axios.js b/src/utils/axios.js
new file mode 100644
index 0000000..3b91f6b
--- /dev/null
+++ b/src/utils/axios.js
@@ -0,0 +1,35 @@
+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
+}
diff --git a/src/utils/domUtil.js b/src/utils/domUtil.js
new file mode 100644
index 0000000..be93027
--- /dev/null
+++ b/src/utils/domUtil.js
@@ -0,0 +1,21 @@
+import config from '@/config/defaultSettings'
+
+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 = config.title
diff --git a/src/utils/errorCode.js b/src/utils/errorCode.js
new file mode 100644
index 0000000..d2111ee
--- /dev/null
+++ b/src/utils/errorCode.js
@@ -0,0 +1,6 @@
+export default {
+  '401': '认证失败，无法访问系统资源',
+  '403': '当前操作没有权限',
+  '404': '访问资源不存在',
+  'default': '系统未知错误，请反馈给管理员'
+}
diff --git a/src/utils/filter.js b/src/utils/filter.js
new file mode 100644
index 0000000..45702c6
--- /dev/null
+++ b/src/utils/filter.js
@@ -0,0 +1,20 @@
+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)
+})
diff --git a/src/utils/highlight.js b/src/utils/highlight.js
new file mode 100644
index 0000000..c1046c8
--- /dev/null
+++ b/src/utils/highlight.js
@@ -0,0 +1,29 @@
+// src/utils/highlight.js 文件路径，纯属自定义
+
+// highlight.js  代码高亮指令
+import Hljs from 'highlight.js'
+import 'highlight.js/styles/vs.css' // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
+
+const Highlight = {}
+// 自定义插件
+Highlight.install = function (Vue) {
+    // 自定义指令 v-highlight
+    Vue.directive('highlight', {
+        // 被绑定元素插入父节点时调用
+        inserted: function (el) {
+            const blocks = el.querySelectorAll('pre code')
+            for (let i = 0; i < blocks.length; i++) {
+                Hljs.highlightBlock(blocks[i])
+            }
+        },
+        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
+        componentUpdated: function (el) {
+            const blocks = el.querySelectorAll('pre code')
+            for (let i = 0; i < blocks.length; i++) {
+                Hljs.highlightBlock(blocks[i])
+            }
+        }
+    })
+}
+
+export default Highlight
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..5b8a1e9
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,145 @@
+import axios from 'axios'
+import store from '@/store'
+import storage from 'store'
+import notification from 'ant-design-vue/es/notification'
+import { VueAxios } from './axios'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import errorCode from '@/utils/errorCode'
+
+// 创建 axios 实例
+const request = axios.create({
+  // API 请求的默认前缀
+  // baseURL: process.env.VUE_APP_BASE_API,
+  // baseURL: 'http://sapi.sliyun.cn',
+  // baseURL: 'http://192.168.16.118:8891',
+  baseURL: 'http://192.168.1.102:8891',
+  timeout: 6000 // 请求超时时间
+})
+
+// 异常拦截处理器
+const errorHandler = (error) => {
+  console.log('err' + error)
+  const data = error.response.data
+  const status = error.response.status
+  console.log('error status :' + status)
+  console.log('error:' + data)
+  let { message } = error
+  if (error.response) {
+    if (status === 403) {
+    } else if (status === 400) {
+    } else if (error.response.status === 401) {
+    } else {
+    }
+    message = data.msg
+  } else {
+    if (message === 'Network Error') {
+      message = '后端接口连接异常'
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时'
+    } else if (message.includes('Request failed with status code')) {
+      message = '系统接口' + message.substr(message.length - 3) + '异常'
+    }
+  }
+
+  notification.error({
+    message: message,
+    duration: 5 * 1000
+  })
+  return Promise.reject(error)
+}
+
+// request interceptor
+request.interceptors.request.use(config => {
+  const token = storage.get(ACCESS_TOKEN)
+  // 如果 token 存在
+  // 让每个请求携带自定义 token 请根据实际情况自行修改
+  if (token) {
+    config.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带自定义token 请根据实际情况自行修改
+    // config.headers['accessAccess-Token'] = token
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?'
+    for (const propName of Object.keys(config.params)) {
+      const value = config.params[propName]
+      var part = encodeURIComponent(propName) + '='
+      if (value && typeof (value) !== 'undefined') {
+        if (typeof value === 'object') {
+          for (const key of Object.keys(value)) {
+            const params = propName + '[' + key + ']'
+            var subPart = encodeURIComponent(params) + '='
+            url += subPart + encodeURIComponent(value[key]) + '&'
+          }
+        } else {
+          url += part + encodeURIComponent(value) + '&'
+        }
+      }
+    }
+    url = url.slice(0, -1)
+    config.params = {}
+    config.url = url
+  }
+  return config
+}, errorHandler)
+
+// response interceptor
+request.interceptors.response.use((res) => {
+  // 请求rul
+  const requestUrl = res.config.url
+  // 未设置状态码则默认成功状态
+  const code = res.data.code || 200
+  // 获取错误信息
+  const msg = errorCode[code] || res.data.msg || errorCode['default']
+  console.log('code:' + code)
+  console.log('msg:' + msg)
+  console.log('msg:' + requestUrl)
+
+  if (code === 401) {
+    notification.open({
+      message: '系统提示',
+      description: '登录状态已过期，请重新登录',
+      btn: h => {
+        return h(
+          'a-button',
+          {
+            props: {
+              type: 'primary',
+              size: 'small'
+            },
+            on: {
+              click: () => {
+                store.dispatch('Logout').then(() => {
+                  location.href = '/index'
+                })
+              }
+            }
+          },
+          '确认'
+        )
+      },
+      duration: 0,
+      onClose: close
+    })
+  } else if (code !== 200) {
+    notification.error({
+      message: msg
+    })
+  } else {
+    return res.data
+  }
+  return Promise.reject(msg)
+}, errorHandler)
+
+const installer = {
+  vm: {},
+  install (Vue) {
+    Vue.use(VueAxios, request)
+  }
+}
+
+export default request
+
+export {
+  installer as VueAxios,
+  request as axios
+}
diff --git a/src/utils/requireIcons.js b/src/utils/requireIcons.js
new file mode 100644
index 0000000..2705e95
--- /dev/null
+++ b/src/utils/requireIcons.js
@@ -0,0 +1,9 @@
+const req = require.context('../assets/icons', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+const re = /\.\/(.*)\.svg/
+
+const icons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default icons
diff --git a/src/utils/routeConvert.js b/src/utils/routeConvert.js
new file mode 100644
index 0000000..e88b0d6
--- /dev/null
+++ b/src/utils/routeConvert.js
@@ -0,0 +1,30 @@
+import cloneDeep from 'lodash.clonedeep'
+
+export function convertRoutes (nodes) {
+  if (!nodes) return null
+
+  nodes = cloneDeep(nodes)
+
+  let queue = Array.isArray(nodes) ? nodes.concat() : [nodes]
+
+  while (queue.length) {
+    const levelSize = queue.length
+
+    for (let i = 0; i < levelSize; i++) {
+      const node = queue.shift()
+
+      if (!node.children || !node.children.length) continue
+
+      node.children.forEach(child => {
+        // 转化相对路径
+        if (child.path[0] !== '/' && !child.path.startsWith('http')) {
+          child.path = node.path.replace(/(\w*)[/]*$/, `$1/${child.path}`)
+        }
+      })
+
+      queue = queue.concat(node.children)
+    }
+  }
+
+  return nodes
+}
diff --git a/src/utils/ruoyi.js b/src/utils/ruoyi.js
new file mode 100644
index 0000000..4d1cc17
--- /dev/null
+++ b/src/utils/ruoyi.js
@@ -0,0 +1,158 @@
+/**
+ * 通用js方法封装处理
+ * Copyright (c) 2019 ruoyi
+ */
+
+const baseURL = process.env.VUE_APP_BASE_API
+
+// 日期格式化
+export function parseTime (time, pattern) {
+	if (arguments.length === 0 || !time) {
+		return null
+	}
+	const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+	let date
+	if (typeof time === 'object') {
+		date = time
+	} else {
+		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+			time = parseInt(time)
+		} else if (typeof time === 'string') {
+			time = time.replace(new RegExp(/-/gm), '/')
+		}
+		if ((typeof time === 'number') && (time.toString().length === 10)) {
+			time = time * 1000
+		}
+		date = new Date(time)
+	}
+	const formatObj = {
+		y: date.getFullYear(),
+		m: date.getMonth() + 1,
+		d: date.getDate(),
+		h: date.getHours(),
+		i: date.getMinutes(),
+		s: date.getSeconds(),
+		a: date.getDay()
+	}
+	const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+		let value = formatObj[key]
+		// Note: getDay() returns 0 on Sunday
+		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+		if (result.length > 0 && value < 10) {
+			value = '0' + value
+		}
+		return value || 0
+	})
+	return timeStr
+}
+
+// 表单重置
+export function resetForm (refName) {
+	if (this[refName]) {
+		this[refName].resetFields()
+	}
+}
+
+// 添加日期范围
+export function addDateRange (params, dateRange, propName) {
+	var search = params
+	search.params = {}
+	if (dateRange !== null && dateRange !== '' && dateRange.length === 2) {
+		if (typeof (propName) === 'undefined') {
+			search.params['beginTime'] = dateRange[0]
+			search.params['endTime'] = dateRange[1]
+		} else {
+			search.params[propName + 'BeginTime'] = dateRange[0]
+			search.params[propName + 'EndTime'] = dateRange[1]
+		}
+	}
+	return search
+}
+
+// 回显数据字典
+export function selectDictLabel (datas, value) {
+	var actions = []
+	Object.keys(datas).some((key) => {
+		if (datas[key].dictValue === ('' + value)) {
+			actions.push(datas[key].dictLabel)
+			return true
+		}
+	})
+	return actions.join('')
+}
+
+// 回显数据字典（字符串数组）
+export function selectDictLabels (datas, value, separator) {
+	var actions = []
+	var currentSeparator = undefined === separator ? ',' : separator
+	var temp = value.split(currentSeparator)
+	Object.keys(value.split(currentSeparator)).some((val) => {
+		Object.keys(datas).some((key) => {
+			if (datas[key].dictValue === ('' + temp[val])) {
+				actions.push(datas[key].dictLabel + currentSeparator)
+			}
+		})
+	})
+	return actions.join('').substring(0, actions.join('').length - 1)
+}
+
+// 通用下载方法
+export function download (fileName) {
+	window.location.href = baseURL + '/common/download?fileName=' + encodeURI(fileName) + '&delete=' + true
+}
+
+// 字符串格式化(%s )
+export function sprintf (str) {
+	var args = arguments
+	var flag = true
+	var i = 1
+	str = str.replace(/%s/g, function () {
+		var arg = args[i++]
+		if (typeof arg === 'undefined') {
+			flag = false
+			return ''
+		}
+		return arg
+	})
+	return flag ? str : ''
+}
+
+// 转换字符串，undefined,null等转化为''
+export function praseStrEmpty (str) {
+	if (!str || str === 'undefined' || str === 'null') {
+		return ''
+	}
+	return str
+}
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+export function handleTree (data, id, parentId, children, rootId) {
+	id = id || 'id'
+	parentId = parentId || 'parentId'
+	children = children || 'children'
+	rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+	// 对源数据深度克隆
+	const cloneData = JSON.parse(JSON.stringify(data))
+	// 循环所有项
+	const treeData = cloneData.filter(father => {
+		var branchArr = cloneData.filter(child => {
+			// 返回每一项的子级数组
+			return father[id] === child[parentId]
+		})
+		if (branchArr.length > 0) {
+			father.children = branchArr
+		} else {
+			father.children = ''
+		}
+		// 返回第一层
+		return father[parentId] === rootId
+	})
+	return treeData !== '' ? treeData : data
+}
diff --git a/src/utils/screenLog.js b/src/utils/screenLog.js
new file mode 100644
index 0000000..04746e7
--- /dev/null
+++ b/src/utils/screenLog.js
@@ -0,0 +1,20 @@
+/* eslint-disable */
+export const printANSI = () => {
+  // console.clear()
+  console.log('[RuoYi-Antdv] created()')
+  console.log('POWERED BY RuoYi-Vue. Antd-Vue. Antd-Vue-Pro')
+  // ASCII - ANSI Shadow
+  let text = `
+  8888888b.                Y88b   d88P d8b             d8888          888        888          
+  888   Y88b                Y88b d88P  Y8P            d88888          888        888          
+  888    888                 Y88o88P                 d88P888          888        888          
+  888   d88P 888  888  .d88b. Y888P    888          d88P 888 88888b.  888888 .d88888 888  888 
+  8888888P"  888  888 d88""88b 888     888         d88P  888 888 "88b 888   d88" 888 888  888 
+  888 T88b   888  888 888  888 888     888 888888 d88P   888 888  888 888   888  888 Y88  88P 
+  888  T88b  Y88b 888 Y88..88P 888     888       d8888888888 888  888 Y88b. Y88b 888  Y8bd8P  
+  888   T88b  "Y88888  "Y88P"  888     888      d88P     888 888  888  "Y888 "Y88888   Y88P   
+`
+  console.log(`%c${text}`, 'color: #fc4d50')
+  console.log('%cGithub: https://github.com/fuzui/RuoYi-Antdv', 'color: #fff; font-size: 14px; font-weight: 300; text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;')
+  console.log('%cGithub: https://gitee.com/fuzui/RuoYi-Antdv', 'color: #fff; font-size: 14px; font-weight: 300; text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;')
+}
diff --git a/src/utils/util.js b/src/utils/util.js
new file mode 100644
index 0000000..274ff18
--- /dev/null
+++ b/src/utils/util.js
@@ -0,0 +1,67 @@
+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)
+}
diff --git a/src/utils/utils.less b/src/utils/utils.less
new file mode 100644
index 0000000..ba75a67
--- /dev/null
+++ b/src/utils/utils.less
@@ -0,0 +1,50 @@
+.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
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 0000000..70460b9
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,83 @@
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal (path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername (str) {
+  const validMap = ['admin', 'editor']
+  return validMap.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL (url) {
+  const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~/])+$/
+  return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase (str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase (str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets (str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail (email) {
+  const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString (str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray (arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}
diff --git a/src/utils/zipdownload.js b/src/utils/zipdownload.js
new file mode 100644
index 0000000..0aaf3a2
--- /dev/null
+++ b/src/utils/zipdownload.js
@@ -0,0 +1,41 @@
+import axios from 'axios'
+import storage from 'store'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+const mimeMap = {
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  zip: 'application/zip'
+}
+
+const baseUrl = process.env.VUE_APP_BASE_API
+export function downLoadZip (str, filename) {
+  var url = baseUrl + str
+  axios({
+    method: 'get',
+    url: url,
+    responseType: 'blob',
+    headers: { 'Authorization': 'Bearer ' + storage.get(ACCESS_TOKEN) }
+  }).then(res => {
+    resolveBlob(res, mimeMap.zip)
+  })
+}
+/**
+ * 解析blob响应内容并下载
+ * @param {*} res blob响应内容
+ * @param {String} mimeType MIME类型
+ */
+export function resolveBlob (res, mimeType) {
+  const aLink = document.createElement('a')
+  var blob = new Blob([res.data], { type: mimeType })
+  // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
+  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
+  var contentDisposition = decodeURI(res.headers['content-disposition'])
+  var result = patt.exec(contentDisposition)
+  var fileName = result[1]
+  fileName = fileName.replace(/"/g, '')
+  aLink.href = URL.createObjectURL(blob)
+  aLink.setAttribute('download', fileName) // 设置下载文件名称
+  document.body.appendChild(aLink)
+  aLink.click()
+  document.body.appendChild(aLink)
+}
diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 0000000..8c1d8a1
--- /dev/null
+++ b/src/views/404.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    404 page
+  </div>
+</template>
+
+<script>
+export default {
+  name: '404'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/account/center/index.vue b/src/views/account/center/index.vue
new file mode 100644
index 0000000..053aded
--- /dev/null
+++ b/src/views/account/center/index.vue
@@ -0,0 +1,275 @@
+<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">{{ user.userName }}</div>
+            <div class="bio">{{ roleGroup }}</div>
+          </div>
+          <div class="account-center-detail">
+            <p>
+              <a-icon class="info" type="phone" />{{ user.phonenumber }}
+            </p>
+            <p>
+              <a-icon class="info" type="mail" />{{ user.email }}
+            </p>
+            <p v-if="user.dept">
+              <a-icon class="info" type="apartment" />{{ user.dept.deptName }} / {{ postGroup }}
+            </p>
+            <p>
+              <a-icon class="info" type="calendar" />{{ user.createTime }}
+            </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"
+                    :close="() => handleTagClose(tag)"
+                  >{{ `${tag.slice(0, 20)}...` }}</a-tag>
+                </a-tooltip>
+                <a-tag
+                  v-else
+                  :key="tag"
+                  :closable="index !== 0"
+                  :close="() => 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"/>
+        </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 { getUserProfile } from '@/api/system/user'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    RouteView,
+    PageView,
+    AppPage,
+    ArticlePage,
+    ProjectPage
+  },
+  data () {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
+
+      tagInputVisible: false,
+      tagInputValue: '',
+
+      teams: [],
+      teamSpinning: true,
+
+      tabListNoTitle: [
+        {
+          key: 'article',
+          tab: '文章(8)'
+        },
+        {
+          key: 'app',
+          tab: '应用(8)'
+        },
+        {
+          key: 'project',
+          tab: '项目(8)'
+        }
+      ],
+      noTitleKey: 'app'
+    }
+  },
+  computed: {
+    ...mapGetters(['nickname', 'avatar'])
+  },
+  mounted () {
+    this.getUser()
+  },
+  methods: {
+    getUser () {
+      getUserProfile().then(response => {
+        this.user = response.data
+        this.roleGroup = response.roleGroup
+        this.postGroup = response.postGroup
+      })
+    },
+
+    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;
+    }
+    .info {
+      position: absolute;
+      height: 14px;
+      width: 14px;
+      left: 0;
+      top: 4px;
+    }
+    .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>
diff --git a/src/views/account/center/page/App.vue b/src/views/account/center/page/App.vue
new file mode 100644
index 0000000..853aeab
--- /dev/null
+++ b/src/views/account/center/page/App.vue
@@ -0,0 +1,113 @@
+<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>
diff --git a/src/views/account/center/page/Article.vue b/src/views/account/center/page/Article.vue
new file mode 100644
index 0000000..e5266b6
--- /dev/null
+++ b/src/views/account/center/page/Article.vue
@@ -0,0 +1,75 @@
+<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">
+      </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'
+
+export default {
+  name: 'Article',
+  components: {
+    ArticleListContent
+  },
+  data () {
+    return {
+      loading: true,
+      loadingMore: false,
+      data: []
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getList () {
+      for (let i = 0; i < 11; i++) {
+        this.data.push({
+          id: i,
+          title: 'Alipay',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+          description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+          star: 20,
+          like: 20,
+          message: 20,
+          owner: '付小小',
+          href: 'https://ant.design',
+          updatedAt: '2020-07-22 23:11:33'
+        })
+      }
+      this.loading = false
+    },
+    loadMore () {
+      this.loadingMore = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/account/center/page/Project.vue b/src/views/account/center/page/Project.vue
new file mode 100644
index 0000000..f741539
--- /dev/null
+++ b/src/views/account/center/page/Project.vue
@@ -0,0 +1,120 @@
+<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 :href="item.url" target="_blank">
+          <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>
+          </a-card>
+        </a>
+      </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: [
+        {
+          title: 'RuoYi-Vue',
+          cover: 'https://oss.fuzui.net/img/20210116014248.png',
+          url: 'https://gitee.com/y_project/RuoYi-Vue',
+          description: 'RuoYi-Vue是基于SpringBoot，Spring Security，JWT，Vue 的前后端分离权限管理系统。'
+        },
+        {
+          title: 'Ant Design Vue',
+          cover: 'https://oss.fuzui.net/img/20210116014908.png',
+          url: 'ttps://github.com/vueComponent/ant-design-vue',
+          description: 'An enterprise-class UI components based on Ant Design and Vue. '
+        },
+        {
+          title: 'Antd Pro Vue',
+          cover: 'https://oss.fuzui.net/img/20210116014556.png',
+          url: 'https://github.com/vueComponent/ant-design-vue-pro',
+          description: 'An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue.'
+        },
+        {
+          title: 'vditor',
+          cover: 'https://oss.fuzui.net/img/20210116014834.png',
+          url: 'https://github.com/Vanessa219/vditor',
+          description: '一款浏览器端的 Markdown 编辑'
+        }
+      ],
+      form: this.$form.createForm(this),
+      loading: false
+    }
+  },
+  filters: {
+    fromNow (date) {
+      return moment(date).fromNow()
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    handleChange (value) {
+    },
+    getList () {
+    }
+  }
+}
+</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>
diff --git a/src/views/account/center/page/index.js b/src/views/account/center/page/index.js
new file mode 100644
index 0000000..b579b6a
--- /dev/null
+++ b/src/views/account/center/page/index.js
@@ -0,0 +1,5 @@
+import AppPage from './App'
+import ArticlePage from './Article'
+import ProjectPage from './Project'
+
+export { AppPage, ArticlePage, ProjectPage }
diff --git a/src/views/account/settings/AvatarModal.vue b/src/views/account/settings/AvatarModal.vue
new file mode 100644
index 0000000..be1747e
--- /dev/null
+++ b/src/views/account/settings/AvatarModal.vue
@@ -0,0 +1,183 @@
+<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 store from '@/store'
+import { uploadAvatar } from '@/api/system/user'
+import { mapGetters } from 'vuex'
+
+export default {
+  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: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['avatar'])
+  },
+  methods: {
+    edit (id) {
+      this.visible = true
+      this.id = id
+      this.options.img = this.avatar
+      /* 获取原始头像 */
+    },
+    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) {
+      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('avatarfile', data, this.fileName)
+          uploadAvatar(formData).then(response => {
+            this.open = false
+            store.commit('SET_AVATAR', process.env.VUE_APP_BASE_API + response.imgUrl)
+            _this.$message.success('上传成功')
+            _this.$emit('ok', process.env.VUE_APP_BASE_API + response.imgUrl)
+            _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>
diff --git a/src/views/account/settings/BaseSetting.vue b/src/views/account/settings/BaseSetting.vue
new file mode 100644
index 0000000..909cf56
--- /dev/null
+++ b/src/views/account/settings/BaseSetting.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="account-settings-info-view">
+    <a-row :gutter="16">
+      <a-col :md="24" :lg="16">
+
+        <a-form
+          layout="vertical"
+          :rules="rules"
+          :model="user"
+          ref="form"
+        >
+          <a-form-item
+            label="昵称"
+            ref="nickName"
+            prop="nickName"
+            :required="true"
+          >
+            <a-input v-model="user.nickName" placeholder="给自己起个名字" />
+          </a-form-item>
+          <a-form-item
+            label="手机"
+            :required="true"
+          >
+            <a-input v-model="user.phonenumber" placeholder="15555555555"/>
+          </a-form-item>
+          <a-form-item
+            label="电子邮件"
+            :required="true"
+          >
+            <a-input v-model="user.email" placeholder="exp@admin.com"/>
+          </a-form-item>
+          <a-form-item
+            label="性别"
+            :required="false"
+          >
+            <a-radio-group v-model="user.sex">
+              <a-radio :value="sexValue.men">男</a-radio>
+              <a-radio :value="sexValue.women">女</a-radio>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="submit">保存</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="avatar"/>
+        </div>
+      </a-col>
+
+    </a-row>
+
+    <avatar-modal ref="modal" @ok="setavatar"/>
+
+  </div>
+</template>
+
+<script>
+import AvatarModal from './AvatarModal'
+import { getUserProfile, updateUserProfile } from '@/api/system/user'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    AvatarModal
+  },
+  data () {
+    return {
+      // cropper
+      sexValue: {
+        men: '0',
+        women: '1'
+      },
+      user: {},
+      preview: {},
+      option: {
+        img: this.avatar,
+        info: true,
+        size: 1,
+        outputType: 'jpeg',
+        canScale: false,
+        autoCrop: true,
+        // 只有自动截图开启 宽度高度才生效
+        autoCropWidth: 180,
+        autoCropHeight: 180,
+        fixedBox: true,
+        // 开启宽度和高度比例
+        fixed: true,
+        fixedNumber: [1, 1]
+      },
+      rules: {
+        nickName: [
+          { required: true, message: '请输入昵称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度应为1-5', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['nickname', 'avatar'])
+  },
+  mounted () {
+    this.getUser()
+  },
+  methods: {
+    getUser () {
+      getUserProfile().then(response => {
+        this.user = response.data
+        this.roleGroup = response.roleGroup
+        this.postGroup = response.postGroup
+      })
+    },
+    setavatar (url) {
+      this.option.img = url
+    },
+    submit () {
+      updateUserProfile(this.user).then(response => {
+        this.$notification.open({
+          message: '提示',
+          description:
+            '修改成功',
+          icon: <a-icon type="check" style="color: #1890FF" />,
+          duration: 3
+        })
+      })
+    }
+  }
+}
+</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>
diff --git a/src/views/account/settings/Security.vue b/src/views/account/settings/Security.vue
new file mode 100644
index 0000000..da0587e
--- /dev/null
+++ b/src/views/account/settings/Security.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <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>
+    <!-- 修改密码抽屉 -->
+    <update-password
+      ref="updatePassword"
+    />
+  </div>
+</template>
+
+<script>
+import UpdatePassword from './UpdatePassword'
+
+export default {
+  components: {
+    UpdatePassword
+  },
+  data () {
+    return {
+      data: [
+        { title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$refs.updatePassword.handleUpdatePwd() } } }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/account/settings/UpdatePassword.vue b/src/views/account/settings/UpdatePassword.vue
new file mode 100644
index 0000000..2249729
--- /dev/null
+++ b/src/views/account/settings/UpdatePassword.vue
@@ -0,0 +1,121 @@
+<template>
+  <a-modal
+    :title="title"
+    :visible="open"
+    @ok="submitForm"
+    @cancel="cancel"
+  >
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item has-feedback label="旧密码" prop="oldPassword">
+        <a-input-password v-model="form.oldPassword" placeholder="请输入旧密码" />
+      </a-form-model-item>
+      <a-form-model-item has-feedback label="新密码" prop="newPassword">
+        <a-input-password v-model="form.newPassword" placeholder="请输入新密码" />
+      </a-form-model-item>
+      <a-form-model-item has-feedback label="确认密码" prop="confirmPassword">
+        <a-input-password v-model="form.confirmPassword" placeholder="请确认密码" />
+      </a-form-model-item>
+    <!-- <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
+      <a-form-model-item has-feedback label="Password" prop="pass">
+        <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
+      </a-form-model-item>
+      <a-form-model-item has-feedback label="Confirm" prop="checkPass">
+        <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
+      </a-form-model-item>
+      <a-form-model-item has-feedback label="Age" prop="age">
+        <a-input v-model.number="ruleForm.age" />
+      </a-form-model-item> -->
+    </a-form-model>
+  </a-modal>
+</template>
+<script>
+import { updateUserPwd } from '@/api/system/user'
+
+export default {
+  props: {
+  },
+  data () {
+    const validateNewPass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入新密码'))
+      } else if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
+        callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
+      } else {
+        if (this.form.confirmPassword !== '') {
+          this.$refs.form.validateField('confirmPassword')
+        }
+        callback()
+      }
+    }
+    const validateConfirmPass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入新密码确认'))
+      } else if (value !== this.form.newPassword) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      title: '重置密码',
+      open: false,
+      childrenDrawer: false,
+      formLayout: 'horizontal',
+      form: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      rules: {
+        oldPassword: [
+          { required: true, message: '密码不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, validator: validateNewPass, trigger: 'change' }
+        ],
+        confirmPassword: [
+          { required: true, validator: validateConfirmPass, trigger: 'change' }
+        ]
+      },
+      layout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      }
+    }
+  },
+  methods: {
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      }
+    },
+    handleUpdatePwd () {
+      this.open = true
+    },
+    /** 重置密码按钮操作 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          updateUserPwd(this.form.oldPassword, this.form.newPassword).then(response => {
+            this.$message.success(
+              '修改成功',
+              3
+            )
+            this.open = false
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/account/settings/index.vue b/src/views/account/settings/index.vue
new file mode 100644
index 0000000..17b47fb
--- /dev/null
+++ b/src/views/account/settings/index.vue
@@ -0,0 +1,124 @@
+<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="{ 'mobile': isMobile }">
+        <div class="account-settings-info-left">
+          <a-menu
+            :mode="isMobile ? 'horizontal' : 'inline'"
+            :style="{ border: '0', width: isMobile ? '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>
+        </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 { RouteView } from '@/layouts'
+import { baseMixin } from '@/store/app-mixin'
+
+export default {
+  components: {
+    RouteView
+  },
+  mixins: [baseMixin],
+  data () {
+    return {
+      // horizontal  inline
+      mode: 'inline',
+
+      openKeys: [],
+      selectedKeys: [],
+
+      // cropper
+      preview: {},
+
+      pageTitle: ''
+    }
+  },
+  mounted () {
+    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>
diff --git a/src/views/ad/AdList.vue b/src/views/ad/AdList.vue
new file mode 100644
index 0000000..caea2cc
--- /dev/null
+++ b/src/views/ad/AdList.vue
@@ -0,0 +1,267 @@
+<template>
+  <a-card :bordered="true">
+    <page-header-wrapper
+      :tab-active-key="tabActiveKey"
+      :tab-change="(key) => {
+        this.tabActiveKey = key
+      }"
+      content="">
+    </page-header-wrapper>
+    <a-alert message="广告列表" type="info" show-icon style="margin-top: 20px;"/>
+    <a-button icon="plus" @click="onAddAd()" style="margin-top: 20px;  ">新建</a-button>
+    <a-table
+      ref="table"
+      rowKey="id"
+      :grid="{ gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
+      :columns="columns"
+      :dataSource="data"
+      style="margin-top: 20px"
+    >
+      <a slot="preview" slot-scope="text">
+        <img alt="example" style="width: 100%;height: 80px" :src="text"/>
+      </a>
+      <a slot="event" slot-scope="text"><a :href="text" target="_blank">点击预览</a></a>
+      <span slot="actions" slot-scope="text, record">
+        <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => onDeleteAd(record)">
+          <a>删除</a>
+        </a-popconfirm>
+      </span>
+    </a-table>
+
+    <ad-create-form
+      ref="createModal"
+      :visible="visible"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk"
+    />
+  </a-card>
+</template>
+
+<script>
+
+  import { createAd, getAdList, deleteAd } from '@/api/ad'
+
+  import AdCreateForm from './modules/AdCreateForm'
+
+  const columns = [
+    { title: '#', width: 60, dataIndex: 'id', key: 'id', fixed: 'left' },
+    {
+      title: '预览图',
+      width: 150,
+      dataIndex: 'imgUrl',
+      key: 'imgUrl',
+      fixed: 'left',
+      scopedSlots: { customRender: 'preview' }
+    },
+    { title: '广告位', width: 150, dataIndex: 'adPosition', key: 'adPosition', fixed: 'left' },
+    { title: '事件类型', width: 150, dataIndex: 'eventName', key: 'eventName', fixed: 'left' },
+    {
+      title: '事件',
+      width: 150,
+      dataIndex: 'actionEvent',
+      key: 'actionEvent',
+      fixed: 'left',
+      scopedSlots: { customRender: 'event' }
+    },
+    { title: '创建时间', dataIndex: 'time', key: 'time', fixed: 'left' },
+    { title: '管理', key: 'operation', fixed: 'right', scopedSlots: { customRender: 'actions' } }
+  ]
+
+  const data = []
+
+  export default {
+    name: 'AdList',
+    components: {
+      AdCreateForm
+    },
+    data () {
+      return {
+        // create model
+        visible: false,
+        confirmLoading: false,
+        mdl: null,
+        showAddAd: false,
+        tabActiveKey: 'tab1',
+        extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
+        data,
+        columns
+      }
+    },
+    method () {
+      this.onLoad()
+    },
+    methods: {
+      onLoad () {
+        getAdList().then(res => {
+          console.log(res.data)
+          this.data = res.data
+          console.log('data' + data)
+        })
+      },
+      onAddAd () {
+        this.mdl = null
+        this.visible = true
+      },
+      confirm (item) {
+        console.log('confirm:', item)
+        this.$confirm({
+          title: '确认删除',
+          content: '删除后无法找回',
+          okText: '确认',
+          cancelText: '取消',
+          onOk () {
+          },
+          onCancel () {
+          }
+        })
+      },
+      handleOk () {
+        const form = this.$refs.createModal.form
+        this.confirmLoading = true
+        form.validateFields((errors, values) => {
+          if (!errors) {
+            console.log('values', values)
+
+            const params = {
+              'title': values['title'],
+              'adId': 1,
+              'eventType': '1',
+              'event': values['url'],
+              'img': values['imgPath'].file.response.data
+            }
+            console.log('params', params)
+            createAd(params).then(response => {
+                console.log('createAd' + JSON.stringify(response))
+                this.visible = false
+                this.confirmLoading = false
+                form.resetFields()
+              // 刷新表格
+              this.onLoad()
+              this.$message.info('新增成功')
+              }
+            ).catch(error => {
+              console.log('error:' + error)
+              this.visible = false
+              this.confirmLoading = false
+              this.$message.warn('新增失败')
+            })
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.visible = false
+
+        const form = this.$refs.createModal.form
+        form.resetFields() // 清理表单数据（可不做）
+      },
+      onDeleteAd (item) {
+        this.loading = true
+        const params = {
+          'id': item.id
+        }
+        deleteAd(params).then(res => {
+          console.log('onDeleteAd:' + res)
+          this.$message.success(
+            '删除成功',
+            10
+          )
+          // 刷新表格
+          this.onLoad()
+        })
+      }
+    },
+    created () {
+      getAdList().then(res => {
+        this.loading = false
+        console.log('123123' + res.data)
+        this.data = res.data
+        // for (let i = 0; i < res.data.list.length; i++) {
+        // dataSource.push({
+        //   id: i,
+        //   title: res.data.list[i].name,
+        //   avatar: res.data.list[i].iconUrl,
+        //   content: res.data.list[i].description
+        // })
+        // }
+      })
+    }
+  }
+</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: auto;
+  }
+</style>
diff --git a/src/views/ad/modules/AdCreateForm.vue b/src/views/ad/modules/AdCreateForm.vue
new file mode 100644
index 0000000..2b69dcd
--- /dev/null
+++ b/src/views/ad/modules/AdCreateForm.vue
@@ -0,0 +1,130 @@
+<template>
+  <a-modal
+    title="新建广告"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-form :form="form" v-bind="formLayout">
+        <a-form-item
+          label="广告名称"
+        >
+          <a-input v-decorator="['title', {rules:[{required: true, message: '请输入名称'}]}]"/>
+        </a-form-item>
+
+        <a-form-item
+          label="广告位置"
+        >
+          <a-select default-value="0" disabled>
+            <a-select-option value="0">
+              APP 首页Banner
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          label="广告事件"
+        >
+          <a-select default-value="0" disabled>
+            <a-select-option value="0">
+              页面跳转
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          label="跳转链接"
+        >
+          <a-input v-decorator="['url', {rules:[{required: true, message: '请输入跳转链接'}]}]"/>
+        </a-form-item>
+        <a-form-item
+          label="广告封面"
+        >
+          <a-upload
+            name="file"
+            :showUploadList="false"
+            :multiple="false"
+            :action="uploadImg"
+            @change="onUploadChange"
+            v-decorator="['imgPath', {rules:[{required: true, message: '请上传广告封面'}]}]"
+          >
+            <a-button>
+              <a-icon type="upload"/>
+              点击上传广告封面
+            </a-button>
+          </a-upload>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import pick from 'lodash.pick'
+  import { uploadUrl } from '@/api/common'
+
+  // 表单字段
+  const fields = ['title', 'adPosition', 'eventType', 'event', 'imgPath']
+
+  export default {
+    props: {
+      visible: {
+        type: Boolean,
+        required: true
+      },
+      loading: {
+        type: Boolean,
+        default: () => false
+      },
+      model: {
+        type: Object,
+        default: () => null
+      }
+    },
+    data () {
+      this.formLayout = {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        }
+      }
+      return {
+        defaultFileList: [],
+        event: '1',
+        adPosition: '1',
+        uploadImg: uploadUrl,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+    created () {
+      console.log('custom modal created')
+
+      // 防止表单未注册
+      fields.forEach(v => this.form.getFieldDecorator(v))
+
+      // 当 model 发生改变时，为表单设置值
+      this.$watch('model', () => {
+        this.model && this.form.setFieldsValue(pick(this.model, fields))
+      })
+    },
+    methods: {
+      onUploadChange (values) {
+        console.log('onUploadChange', values)
+        console.log('onUploadChange', values.file.response)
+      }
+    }
+  }
+</script>
diff --git a/src/views/coin/CoinAddressList.vue b/src/views/coin/CoinAddressList.vue
new file mode 100644
index 0000000..2188e1d
--- /dev/null
+++ b/src/views/coin/CoinAddressList.vue
@@ -0,0 +1,183 @@
+<template>
+  <a-card :bordered="true">
+    <page-header-wrapper
+      :tab-active-key="tabActiveKey"
+      :tab-change="(key) => {
+        this.tabActiveKey = key
+      }"
+      content="">
+    </page-header-wrapper>
+    <a-alert message="地址列表" type="info" show-icon style="margin-top: 20px;"/>
+    <a-table
+      ref="table"
+      rowKey="id"
+      :grid="{ gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
+      :columns="columns"
+      :dataSource="data"
+      style="margin-top: 20px"
+    >
+      <a slot="preview" slot-scope="text">
+        <a-avatar :src="text"/>
+      </a>
+      <a slot="event" slot-scope="text"><a :href="text" target="_blank">点击预览</a></a>
+      <span slot="actions" slot-scope="text, record">
+        <a @click="doCopy(record)">复制</a>
+        <a-divider type="vertical"/>
+        <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => onDeleteAd(record)">
+          <a>删除</a>
+        </a-popconfirm>
+      </span>
+    </a-table>
+
+  </a-card>
+</template>
+<script>
+
+  import { getCoinAddressList } from '@/api/coin'
+  import Vue from 'vue'
+  // ext library
+  import VueClipboard from 'vue-clipboard2'
+
+  VueClipboard.config.autoSetContainer = true
+
+  Vue.use(VueClipboard)
+
+  const columns = [
+    { title: '#', width: 60, dataIndex: 'id', key: 'id', fixed: 'left' },
+    {
+      title: 'icon',
+      width: 100,
+      dataIndex: 'icon',
+      key: 'icon',
+      fixed: 'left',
+      scopedSlots: { customRender: 'preview' }
+    },
+    { title: '币名称', width: 130, dataIndex: 'enName', key: 'enName', fixed: 'left' },
+    { title: '用户ID', dataIndex: 'memberId', key: 'memberId', fixed: 'left' },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', fixed: 'left' },
+    {
+      title: '地址',
+      width: 150,
+      dataIndex: 'address',
+      key: 'address',
+      fixed: 'left',
+      scopedSlots: { customRender: 'address' }
+    },
+    { title: '管理', key: 'operation', fixed: 'right', scopedSlots: { customRender: 'actions' } }
+  ]
+
+  const data = []
+
+  export default {
+    name: 'CoinAddressList',
+    components: {},
+    data () {
+      return {
+        // create model
+        visible: false,
+        confirmLoading: false,
+        mdl: null,
+        showAddAd: false,
+        tabActiveKey: 'tab1',
+        extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
+        data,
+        columns
+      }
+    },
+    method () {
+      this.onLoad()
+    },
+    methods: {
+      doCopy (item) {
+        this.$copyText(item.address).then(message => {
+          console.log('copy', message)
+          this.$message.success('复制完毕')
+        }).catch(err => {
+          console.log('copy.err', err)
+          this.$message.error('复制失败')
+        })
+      }
+    },
+    created () {
+      getCoinAddressList().then(res => {
+        this.loading = false
+        console.log('123123' + res.data)
+        this.data = res.data
+      })
+    }
+  }
+</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: auto;
+  }
+</style>
diff --git a/src/views/coin/CoinHashPackageList.vue b/src/views/coin/CoinHashPackageList.vue
new file mode 100644
index 0000000..5849f59
--- /dev/null
+++ b/src/views/coin/CoinHashPackageList.vue
@@ -0,0 +1,138 @@
+<template>
+  <a-card :bordered="true">
+    <a-button icon="plus" @click="onAdd()" style="margin-top: 20px;  ">新建</a-button>
+    <a-alert message="目前支持货币类型为以下三种" type="info" show-icon style="margin-top: 20px;"/>
+
+    <a-list
+      rowKey="id"
+      :grid="{ gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
+      :dataSource="dataSource"
+      style="margin-top: 20px"
+    >
+      <a-list-item slot="renderItem" slot-scope="item">
+        <a-card :hoverable="true">
+          <a-card-meta>
+            <a slot="title">{{ item.name }}</a>
+            <div class="meta-content" slot="description">价格：{{ item.price }}</div>
+            <div class="meta-content" slot="description">数量：{{ item.number }}</div>
+            <div class="meta-content" slot="description">单位名称：{{ item.packageUnitName }}</div>
+            <div class="meta-content" slot="description">创建时间：{{ item.createTime }}</div>
+          </a-card-meta>
+          <div class="meta-content" slot="description">时间：{{ item.createTime }}</div>
+          <template class="ant-card-actions" slot="actions">
+            <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => onDel(item)" arrow-point-at-center>
+              <a>删除</a>
+            </a-popconfirm>
+          </template>
+        </a-card>
+      </a-list-item>
+    </a-list>
+    <coin-package-create-form
+      ref="createCoinPackageModal"
+      :visible="visible"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk"
+    />
+  </a-card>
+</template>
+
+<script>
+  import CoinPackageCreateForm from './modules/CoinPackageCreateForm'
+  import { onCoinPackageCreate, onCoinPackageList, deleteCoinPackage } from '@/api/coin'
+
+  export default {
+    name: 'HashPackageList',
+    components: { CoinPackageCreateForm },
+    data () {
+      return {
+        dataSource: [],
+        visible: false,
+        confirmLoading: false,
+        mdl: null
+      }
+    },
+    created () {
+      this.onLoad()
+    },
+    methods: {
+      onAdd () {
+        this.mdl = null
+        this.visible = true
+      },
+      handleOk () {
+        const form = this.$refs.createCoinPackageModal.form
+        this.confirmLoading = true
+        form.validateFields((errors, values) => {
+          if (!errors) {
+            console.log('values', values)
+
+            const params = {
+              // 'coinId': values['coinId'],
+              'duration': values['duration'],
+              'title': values['title'],
+              'price': values['price'],
+              'number': values['number'],
+              'packageUnitId': values['packageUnit'].id,
+              'packageUnitName': values['packageUnit'].title
+            }
+            console.log('params', params)
+            onCoinPackageCreate(params).then(response => {
+                console.log('onCoinPackageCrate' + JSON.stringify(response))
+                this.visible = false
+                this.confirmLoading = false
+                form.resetFields()
+                // 刷新表格
+                this.onLoad()
+                this.$message.info('新增成功')
+              }
+            ).catch(error => {
+              console.log('error:' + error)
+              this.visible = false
+              this.confirmLoading = false
+              this.$message.warn('新增失败')
+            })
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.visible = false
+        this.confirmLoading = false
+        const form = this.$refs.createModal.form
+        form.resetFields() // 清理表单数据（可不做）
+      },
+      onLoad () {
+        onCoinPackageList().then(response => {
+            console.log('onCoinPackageList' + JSON.stringify(response))
+            this.dataSource = response.data
+          }
+        ).catch(error => {
+          console.log('error:' + error)
+          this.$message.warn('获取算力包失败')
+        })
+      },
+      onDel (item) {
+        console.log('onDel' + JSON.stringify(item))
+        const params = {
+          'id': item.id
+        }
+        deleteCoinPackage(params).then(response => {
+            console.log('onCoinPackageList' + JSON.stringify(response))
+            this.$message.info('删除成功')
+            this.onLoad()
+          }
+        ).catch(error => {
+          console.log('error:' + error)
+          this.$message.warn('删除失败')
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/coin/CoinList.vue b/src/views/coin/CoinList.vue
new file mode 100644
index 0000000..7267e3e
--- /dev/null
+++ b/src/views/coin/CoinList.vue
@@ -0,0 +1,178 @@
+<template>
+  <a-card :bordered="true">
+    <page-header-wrapper
+      :tab-list="tabList"
+      :tab-active-key="tabActiveKey"
+      :tab-change="(key) => {
+        this.tabActiveKey = key
+      }"
+      content="">
+    </page-header-wrapper>
+    <a-button icon="plus" @click="handleEdit()" style="margin-top: 20px;  ">新建</a-button>
+    <a-alert message="目前支持货币类型为以下三种" type="info" show-icon style="margin-top: 20px;"/>
+
+    <a-list
+      rowKey="id"
+      :grid="{ gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
+      :dataSource="dataSource"
+      style="margin-top: 20px"
+    >
+      <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.cnName }}({{ item.enName }})</a>
+              <a-avatar class="card-avatar" slot="avatar" :src="item.icon" size="large"/>
+              <div class="meta-content" slot="description">时间：{{ item.createTime }}</div>
+            </a-card-meta>
+
+            <div class="meta-content" slot="description">时间：{{ item.createTime }}</div>
+
+            <template class="ant-card-actions" slot="actions">
+              <a-tooltip title="删除" @click="() => confirm(record)">
+                <a-icon type="delete"/>
+              </a-tooltip>
+              <a-tooltip title="编辑" @click="() => confirm(record)">
+                <a-icon type="edit"/>
+              </a-tooltip>
+            </template>
+          </a-card>
+        </template>
+      </a-list-item>
+    </a-list>
+  </a-card>
+</template>
+
+<script>
+
+  import { getCoinList } from '@/api/coin'
+
+  const dataSource = []
+  export default {
+    name: 'CoinList',
+    data () {
+      return {
+        tabActiveKey: 'tab1',
+        extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
+        dataSource
+      }
+    },
+    method () {
+      this.loading = true
+    },
+    methods: {
+      handleEdit () {
+        this.$message.warning('敬请期待')
+      },
+      confirm (item) {
+        this.$message.warning('暂不支持编辑删除操作')
+        console.log('confirm:', item)
+        // this.$confirm({
+        //   title: '确认删除',
+        //   content: '删除后无法找回',
+        //   okText: '确认',
+        //   cancelText: '取消',
+        //   onOk() {
+        //   },
+        //   onCancel() {
+        //   }
+        // })
+      }
+    },
+    created () {
+      getCoinList().then(res => {
+        this.loading = false
+        console.log(res.data)
+        this.dataSource = res.data.list
+        // for (let i = 0; i < res.data.list.length; i++) {
+        //   dataSource.push({
+        //     id: i,
+        //     title: res.data.list[i].name,
+        //     avatar: res.data.list[i].iconUrl,
+        //     content: res.data.list[i].description
+        //   })
+        // }
+      })
+    }
+  }
+</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: auto;
+  }
+</style>
diff --git a/src/views/coin/modules/CoinPackageCreateForm.vue b/src/views/coin/modules/CoinPackageCreateForm.vue
new file mode 100644
index 0000000..3393486
--- /dev/null
+++ b/src/views/coin/modules/CoinPackageCreateForm.vue
@@ -0,0 +1,138 @@
+<template>
+  <a-modal
+    title="新建算力包"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-form :form="form" v-bind="formLayout">
+        <a-form-item
+          label="算力包名称"
+        >
+          <a-input v-decorator="['title', {rules:[{required: true, message: '请输入名称'}]}]"/>
+        </a-form-item>
+
+        <!--        <a-form-item-->
+        <!--          label="算力包货币"-->
+        <!--        >-->
+        <!--          <a-select default-value="96" v-decorator="['coinId', {rules:[{required: true, message: '请选择货币'}]}]">-->
+        <!--            <a-select-option value="96">-->
+        <!--              比特币-->
+        <!--            </a-select-option>-->
+        <!--            <a-select-option value="97">-->
+        <!--              比特现金-->
+        <!--            </a-select-option>-->
+        <!--            <a-select-option value="98">-->
+        <!--              莱特币-->
+        <!--            </a-select-option>-->
+        <!--          </a-select>-->
+        <!--        </a-form-item>-->
+        <a-form-item
+          label="算力包时间间隔"
+        >
+          <a-input style="width: 100%" suffix="分钟" min="1" v-decorator="['duration', {rules:[{required: true, message: '请输入算力包时长'}]}]"/>
+        </a-form-item>
+        <a-form-item
+          label="算力包价格"
+        >
+          <a-input v-decorator="['price', {rules:[{required: true, message: '请输入价格'}]}]"/>
+        </a-form-item>
+        <a-form-item
+          label="算力包单位"
+        >
+          <a-select v-decorator="['packageUnit', {rules:[{required: true, message: '请选择算力单位'}]}]">
+            <a-select-option
+              v-for="item in unitList"
+              :key="item.id"
+              :name="item.id"
+              :value="item">
+              {{ item.title }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          label="单位数量"
+        >
+          <a-input v-decorator="['number', {rules:[{required: true, message: '请输入数量'}]}]"/>
+        </a-form-item>
+
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import pick from 'lodash.pick'
+  import { getCoinPackageUnit } from '../../../api/coin'
+
+  // 表单字段
+  const fields = ['title', 'duration', 'coin_id', 'number', 'packageUnitId', 'price']
+
+  export default {
+    props: {
+      visible: {
+        type: Boolean,
+        required: true
+      },
+      loading: {
+        type: Boolean,
+        default: () => false
+      },
+      model: {
+        type: Object,
+        default: () => null
+      }
+    },
+    data () {
+      this.formLayout = {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        }
+      }
+      return {
+        defaultFileList: [],
+        unitList: [],
+        event: '1',
+        adPosition: '1',
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+    created () {
+      console.log('custom modal created')
+      // 防止表单未注册
+      fields.forEach(v => this.form.getFieldDecorator(v))
+      // 当 model 发生改变时，为表单设置值
+      this.$watch('model', () => {
+        this.model && this.form.setFieldsValue(pick(this.model, fields))
+      })
+    },
+    methods: {
+      onUploadChange (values) {
+        console.log('onUploadChange', values)
+        console.log('onUploadChange', values.file.response)
+      }
+    },
+    mounted () {
+      getCoinPackageUnit().then(res => {
+        console.log('getCoinPackageUnit', res)
+        this.unitList = res.data
+      })
+    }
+  }
+</script>
diff --git a/src/views/exception/403.vue b/src/views/exception/403.vue
new file mode 100644
index 0000000..fb1bf36
--- /dev/null
+++ b/src/views/exception/403.vue
@@ -0,0 +1,20 @@
+<template>
+  <a-result status="403" title="403" sub-title="Sorry, you don't have access to this page.">
+    <template #extra>
+      <a-button type="primary" @click="toHome">
+        Back Home
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+<script>
+export default {
+  name: 'Exception403',
+  methods: {
+    toHome () {
+      this.$router.push({ path: '/' })
+    }
+  }
+}
+</script>
diff --git a/src/views/exception/404.vue b/src/views/exception/404.vue
new file mode 100644
index 0000000..3142e7b
--- /dev/null
+++ b/src/views/exception/404.vue
@@ -0,0 +1,20 @@
+<template>
+  <a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
+    <template #extra>
+      <a-button type="primary" @click="toHome">
+        Back Home
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+<script>
+export default {
+  name: 'Exception404',
+  methods: {
+    toHome () {
+      this.$router.push({ path: '/' })
+    }
+  }
+}
+</script>
diff --git a/src/views/exception/500.vue b/src/views/exception/500.vue
new file mode 100644
index 0000000..2770b77
--- /dev/null
+++ b/src/views/exception/500.vue
@@ -0,0 +1,20 @@
+<template>
+  <a-result status="500" title="500" sub-title="Sorry, the server is reporting an error.">
+    <template #extra>
+      <a-button type="primary" @click="toHome">
+        Back Home
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+<script>
+  export default {
+    name: 'Exception500',
+    methods: {
+      toHome () {
+        this.$router.push({ path: '/' })
+      }
+    }
+  }
+</script>
diff --git a/src/views/finance/OrderList.vue b/src/views/finance/OrderList.vue
new file mode 100644
index 0000000..de66576
--- /dev/null
+++ b/src/views/finance/OrderList.vue
@@ -0,0 +1,245 @@
+<template>
+  <page-header-wrapper
+    content="">
+    <a-card :bordered="false">
+      <div class="header-content">
+        <a-radio-group class="header-status" v-model="form.layout">
+        </a-radio-group>
+        <a-input-search
+          class="header-search"
+          placeholder="订单号/手机号/会员ID/用户昵称"
+          autosize="true"
+          enter-button
+          @search="onSearch"/>
+      </div>
+      <!-- list-->
+      <div class="list-content">
+        <a-table
+          ref="table"
+          :loading="loading"
+          :columns="columns"
+          :dataSource="data"
+          :scroll="{ y: 500 }"
+          :pagination="{
+            total: totalCount,
+            current: pageNo,
+            showSizeChanger: true, // 显示可改变每页数量
+            pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
+            showTotal: (total,range) => `共${total}条`,
+            onShowSizeChange: (current, pageSize) => onShowSizeChange(current, pageSize),
+            onChange: (current, pageSize) => onShowSizeChange(current, pageSize)
+          }">
+          <span slot="index" slot-scope="text, record, index">
+            {{ index + 1 }}
+          </span>
+          <a slot="avatar" slot-scope="text">
+            <a-avatar :src="text"/>
+          </a>
+          <span slot="sex" slot-scope="text">
+            {{ text==1?'男':'女' }}
+          </span>
+          <span slot="actions" slot-scope="text, record">
+            <a href="javascript:;" @click="onSearch">详情</a>
+            <a-divider type="vertical"/>
+            <a-popconfirm placement="topRight" title="确认付款？" @confirm="onConfirmPayment(record)">
+              <a>付款</a>
+            </a-popconfirm>
+            <a-divider type="vertical"/>
+            <a @click="onUpdateOrderPayPrice(record)">改价</a>
+          </span>
+        </a-table>
+      </div>
+      <update-order-pay-price
+        ref="createModal"
+        :visible="visible"
+        :loading="confirmLoading"
+        :model="mdl"
+        @cancel="handleCancel"
+        @ok="handleOk"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+  import { getOrderList, onOrderConfirmPayment, onUpdateOrderPayPrice } from '@/api/finance/order'
+  import UpdateOrderPayPrice from './modules/UpdateOrderPayPrice'
+
+  const columns = [
+    { title: '#', width: 30, dataIndex: 'index', key: 'index', fixed: 'left', scopedSlots: { customRender: 'index' } },
+    { title: '订单编号', width: 180, dataIndex: 'orderSn', key: 'orderSn', fixed: 'left' },
+    { title: '用户账号', width: 100, dataIndex: 'memberId', key: 'memberId', fixed: 'left' },
+    { title: '订单金额', width: 100, dataIndex: 'totalAmount', key: 'totalAmount', fixed: 'left' },
+    { title: '支付方式', width: 90, dataIndex: 'payTypeName', key: 'payTypeName', fixed: 'left' },
+    { title: '订单来源', width: 90, dataIndex: 'sourceTypeName', key: 'sourceTypeName', fixed: 'left' },
+    { title: '订单状态', width: 90, dataIndex: 'statusName', key: 'statusName', fixed: 'left' },
+    { title: '提交时间', width: 120, dataIndex: 'createTime', key: 'createTime', fixed: 'left' },
+    { title: '备注', width: 150, dataIndex: 'remarks', key: 'remarks', fixed: 'left' },
+    { title: '管理', key: 'operation', fixed: 'right', scopedSlots: { customRender: 'actions' } }
+  ]
+
+  const data = []
+
+  let _this
+
+  export default {
+    name: 'OrderList',
+    components: { UpdateOrderPayPrice },
+    data() {
+      _this = this
+
+      return {
+        loading: false,
+        // create model
+        visible: false,
+        confirmLoading: false,
+        mdl: null,
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 },
+        form: {
+          name: 'q',
+          region: undefined,
+          date1: undefined,
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        data,
+        columns,
+        totalCount: 0,
+        pageNo: 1,
+        loadData: 1,
+        currentOrder: null
+      }
+    },
+    method() {
+      this.onSearch()
+      this.onLoad()
+    },
+    methods: {
+      onLoad() {
+        this.loading = true
+        const params = {
+          'pageNo': _this.pageNo
+        }
+        getOrderList(params).then(response => {
+          window.console.log(response)
+          this.loading = false
+          console.log('count', response.data.totalCount)
+          console.log('size', response.data.data.length)
+          this.pageSize = response.data.length
+          this.pageNo = response.data.pageNo
+          this.totalCount = response.data.totalCount
+          for (let i = 0; i < response.data.data.length; i++) {
+            data.push(response.data.data[i])
+          }
+        })
+      },
+      onShowSizeChange(current, pageSize, keyword) {
+      },
+      onSearch(value) {
+        console.log(value)
+        this.$message.warning('敬请期待' + value)
+      },
+      onConfirmPayment(item) {
+        const params = {
+          'orderSn': item.orderSn
+        }
+        onOrderConfirmPayment(params).then(res => {
+            console.log(res)
+            this.onLoad()
+          }
+        )
+      },
+      onUpdateOrderPayPrice(item) {
+        this.mdl = item
+        this.visible = true
+      },
+      handleOk() {
+        const form = this.$refs.createModal.form
+        this.confirmLoading = true
+        form.validateFields((errors, values) => {
+          if (!errors) {
+            console.log('values', values)
+            const params = {
+              'orderSn': values['orderSn'],
+              'price': values['payAmount'],
+              'remarks': values['remarks']
+            }
+            console.log('params', params)
+            onUpdateOrderPayPrice(params).then(response => {
+                console.log('createAd' + JSON.stringify(response))
+                this.visible = false
+                this.confirmLoading = false
+                form.resetFields()
+                this.onLoad()
+                this.$message.info('修改成功')
+              }
+            ).catch(error => {
+              console.log('error:' + error)
+              this.visible = false
+              this.confirmLoading = false
+              this.$message.warn('修改失败')
+            })
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel() {
+        this.visible = false
+        const form = this.$refs.createModal.form
+        form.resetFields() // 清理表单数据（可不做）
+      }
+    },
+    filters: {},
+    created() {
+      this.onLoad()
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .header-content {
+    position: relative;
+  }
+
+  .header-status {
+    height: 24px;
+    margin-left: 2%;
+    margin-right: 35%;
+    color: #1890ff;
+    right: 30%;
+  }
+
+  .header-search {
+    height: 24px;
+    margin-left: 2%;
+    width: 30%;
+    float: right;
+    color: #1890ff;
+  }
+
+  .list-content {
+    margin-top: 2%;
+  }
+
+  .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>
diff --git a/src/views/finance/PaymentRecord.vue b/src/views/finance/PaymentRecord.vue
new file mode 100644
index 0000000..76038cf
--- /dev/null
+++ b/src/views/finance/PaymentRecord.vue
@@ -0,0 +1,179 @@
+<template>
+  <page-header-wrapper
+    :tab-list="tabList"
+    :tab-active-key="tabActiveKey"
+    :tab-change="(key) => {
+      this.tabActiveKey = key
+    }"
+    content="">
+    <a-card :bordered="false">
+      <div class="header-content">
+        <a-radio-group class="header-status" v-model="form.layout">
+        </a-radio-group>
+        <a-input-search
+          class="header-search"
+          placeholder="订单号/手机号/会员ID/用户昵称"
+          autosize="true"
+          enter-button
+          @search="onSearch"/>
+      </div>
+      <!-- list-->
+      <div class="list-content">
+        <a-table
+          ref="table"
+          :loading="loading"
+          :columns="columns"
+          :dataSource="data"
+          :scroll="{ y: 500 }"
+          :pagination="{
+            total: totalCount,
+            current: pageNo,
+            showSizeChanger: true, // 显示可改变每页数量
+            pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
+            showTotal: (total,range) => `共${total}条`,
+            onShowSizeChange: (current, pageSize) => onShowSizeChange(current, pageSize),
+            onChange: (current, pageSize) => onShowSizeChange(current, pageSize)
+          }">
+          <span slot="index" slot-scope="text, record, index">
+            {{ index + 1 }}
+          </span>
+          <a slot="avatar" slot-scope="text">
+            <a-avatar :src="text"/>
+          </a>
+          <span slot="sex" slot-scope="text">
+            {{ text==1?'男':'女' }}
+          </span>
+        </a-table>
+      </div>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+  import { getPaymentRecordList } from '@/api/finance/payment'
+
+  const columns = [
+    { title: '#', width: 30, dataIndex: 'index', key: 'index', fixed: 'left', scopedSlots: { customRender: 'index' } },
+    { title: '订单编号', width: 180, dataIndex: 'orderSn', key: 'orderSn', fixed: 'left' },
+    { title: '支付单号', width: 100, dataIndex: 'prepayid', key: 'prepayid', fixed: 'left' },
+    { title: '支付金额', width: 100, dataIndex: 'paymentAmount', key: 'paymentAmount', fixed: 'left' },
+    { title: '支付方式', width: 90, dataIndex: 'paymentChannelName', key: 'paymentChannelName', fixed: 'left' },
+    { title: '支付状态', width: 90, dataIndex: 'statusName', key: 'statusName', fixed: 'left' },
+    { title: '支付时间', width: 120, dataIndex: 'paymentTime', key: 'paymentTime', fixed: 'left' },
+    { title: '备注', width: 150, dataIndex: 'remarks', key: 'remarks', fixed: 'left' }
+  ]
+
+  const data = []
+
+  let _this
+
+  export default {
+    name: 'PaymentRecord',
+    components: {},
+    data() {
+      _this = this
+
+      return {
+        loading: false,
+        // create model
+        visible: false,
+        confirmLoading: false,
+        mdl: null,
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 },
+        form: {
+          name: 'q',
+          region: undefined,
+          date1: undefined,
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        data,
+        columns,
+        totalCount: 0,
+        pageNo: 1,
+        loadData: 1
+      }
+    },
+    method() {
+      this.onSearch()
+      this.onLoad()
+    },
+    methods: {
+      onLoad() {
+        this.loading = true
+        const params = {
+          'pageNo': _this.pageNo
+        }
+        getPaymentRecordList(params).then(response => {
+          window.console.log(response)
+          this.loading = false
+          console.log('count', response.data.totalCount)
+          console.log('size', response.data.data.length)
+          this.pageSize = response.data.length
+          this.pageNo = response.data.pageNo
+          this.totalCount = response.data.totalCount
+          for (let i = 0; i < response.data.data.length; i++) {
+            data.push(response.data.data[i])
+          }
+        })
+      },
+      onShowSizeChange(current, pageSize, keyword) {
+      },
+      onSearch(value) {
+        console.log(value)
+        this.$message.warning('敬请期待' + value)
+      }
+    },
+    filters: {},
+    created() {
+      this.onLoad()
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .header-content {
+    position: relative;
+  }
+
+  .header-status {
+    height: 24px;
+    margin-left: 2%;
+    margin-right: 35%;
+    color: #1890ff;
+    right: 30%;
+  }
+
+  .header-search {
+    height: 24px;
+    margin-left: 2%;
+    width: 30%;
+    float: right;
+    color: #1890ff;
+  }
+
+  .list-content {
+    margin-top: 2%;
+  }
+
+  .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>
diff --git a/src/views/finance/modules/UpdateOrderPayPrice.vue b/src/views/finance/modules/UpdateOrderPayPrice.vue
new file mode 100644
index 0000000..6b09021
--- /dev/null
+++ b/src/views/finance/modules/UpdateOrderPayPrice.vue
@@ -0,0 +1,97 @@
+<template>
+  <a-modal
+    title="修改支付价格"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-form :form="form" v-bind="formLayout">
+        <a-form-item label="订单号">
+          <a-input disabled v-decorator="['orderSn', {rules:[{required: true, message: '请输入订单号'}]}]"/>
+        </a-form-item>
+        <a-form-item label="支付价格" >
+          <a-input-number  style="width: 100%" v-decorator="['payAmount', {rules:[{required: true, message: '请输入支付价格'}]}]" :min="0" :max="10" :step="0.2" />
+        </a-form-item>
+        <a-form-item
+          label="备注">
+          <a-input  v-decorator="['remarks', {rules:[{required: true, message: '请输入价格修改原因'}]}]"  type="textarea"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import pick from 'lodash.pick'
+  import { uploadUrl } from '@/api/common'
+
+  // 表单字段
+  const fields = ['orderSn', 'payAmount', 'remarks']
+
+  export default {
+    props: {
+      visible: {
+        type: Boolean,
+        required: true
+      },
+      loading: {
+        type: Boolean,
+        default: () => false
+      },
+      model: {
+        type: Object,
+        default: () => null
+      }
+    },
+    data () {
+      this.formLayout = {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        }
+      }
+      return {
+        defaultFileList: [],
+        event: '1',
+        adPosition: '1',
+        uploadImg: uploadUrl,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+    mounted () {
+      this.record && this.form.setFieldsValue(pick(this.record, fields))
+    },
+    created () {
+      console.log('custom modal created')
+
+      // 防止表单未注册
+      fields.forEach(v => this.form.getFieldDecorator(v))
+
+      // 当 model 发生改变时，为表单设置值
+      this.$watch('model', () => {
+        this.model && this.form.setFieldsValue(pick(this.model, fields))
+      })
+    },
+    methods: {
+      onUploadChange (values) {
+        console.log('onUploadChange', values)
+        console.log('onUploadChange', values.file.response)
+      }
+    }
+  }
+</script>
diff --git a/src/views/index.less b/src/views/index.less
new file mode 100644
index 0000000..005b73a
--- /dev/null
+++ b/src/views/index.less
@@ -0,0 +1,107 @@
+@import '~ant-design-vue/es/style/themes/default.less';
+
+.text-overflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
+
+
+.page-header-content {
+  display: flex;
+
+  .avatar {
+    flex: 0 1 72px;
+
+    & > span {
+      display: block;
+      width: 72px;
+      height: 72px;
+      border-radius: 72px;
+    }
+  }
+
+  .content {
+    position: relative;
+    top: 4px;
+    flex: 1 1 auto;
+    margin-left: 24px;
+    color: @text-color-secondary;
+    line-height: 22px;
+
+    .content-title {
+      margin-bottom: 12px;
+      color: @heading-color;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}
+
+.extra-content {
+  .clearfix();
+  float: right;
+  white-space: nowrap;
+
+  .stat-item {
+    position: relative;
+    display: inline-block;
+    padding: 0 32px;
+
+    > p:first-child {
+      margin-bottom: 4px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      line-height: 22px;
+    }
+
+    > p {
+      margin: 0;
+      color: @heading-color;
+      font-size: 30px;
+      line-height: 38px;
+
+      > span {
+        color: @text-color-secondary;
+        font-size: 20px;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      top: 8px;
+      right: 0;
+      width: 1px;
+      height: 40px;
+      background-color: @border-color-split;
+      content: '';
+    }
+
+    &:last-child {
+      padding-right: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
new file mode 100644
index 0000000..5824770
--- /dev/null
+++ b/src/views/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <page-header-wrapper
+    content="">
+    <div style="padding: 20px;">
+      <a-row :gutter="[24,16]">
+        <a-col class="gutter-row" :span="6">
+          <div class="gutter-box">
+            <a-icon class="item-icon" type="team" :style="{ fontSize: '50px', color: '#95de64' }"/>
+            <div class="item-content">
+              <p>
+                会员
+                <a-tooltip title="注册会员" slot="action">
+                  <a-icon type="info-circle-o"/>
+                </a-tooltip>
+              </p>
+              <span>
+                {{ dashboardEntity.member.total }}
+              </span>
+            </div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="6">
+          <div class="gutter-box">
+            <a-icon class="item-icon" type="pay-circle" :style="{ fontSize: '50px', color: '#e0c18a' }"/>
+            <div class="item-content">
+              <p>
+                交易额
+                <a-tooltip title="交易金额" slot="action">
+                  <a-icon type="info-circle-o"/>
+                </a-tooltip>
+              </p>
+              <span>
+                {{ dashboardEntity.sales.total }}
+              </span>
+            </div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="6">
+          <div class="gutter-box">
+            <a-icon class="item-icon" type="shopping-cart" :style="{ fontSize: '50px' , color: '#ff9c6e' }"/>
+            <div class="item-content">
+              <p>
+                订单
+                <a-tooltip title="成交订单数量" slot="action">
+                  <a-icon type="info-circle-o"/>
+                </a-tooltip>
+              </p>
+              <span>
+                {{ dashboardEntity.order.total }}
+              </span>
+            </div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="6">
+          <div class="gutter-box">
+            <a-icon class="item-icon" type="cloud-server" :style="{ fontSize: '50px' , color: '#fabc67' }"/>
+            <div class="item-content">
+              <p>挖矿收益
+                <a-tooltip title="挖矿收益" slot="action">
+                  <a-icon type="info-circle-o"/>
+                </a-tooltip>
+              </p>
+              <span>
+                {{ dashboardEntity.profit }}
+              </span>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </page-header-wrapper>
+</template>
+
+<script>
+  import { baseMixin } from '@/store/app-mixin'
+  import { getDashboard } from '@/api/dashboard'
+
+  export default {
+    name: 'Index',
+    mixins: [baseMixin],
+    components: {},
+    data() {
+      return {
+        loading: true,
+        dashboardEntity: {
+          member: {},
+          sales: {},
+          order: {}
+        },
+        pieStyle: {
+          stroke: '#fff',
+          lineWidth: 1
+        }
+      }
+    },
+    computed: {},
+    created() {
+      getDashboard().then(res => {
+        console.log(res.data)
+        this.dashboardEntity = res.data
+        this.loading = !this.loading
+      })
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+  .gutter-box {
+    background: white;
+    border-radius: 5px;
+    height: 100px;
+    margin-left: 24px;
+    padding-right: 20px;
+  }
+
+  .item-icon {
+    float: left;
+    padding-left: 20px;
+    align-items: center;
+    line-height: 100px;
+  }
+
+  .item-content {
+    float: right;
+    line-height: normal;
+  }
+
+  .item-content span {
+    float: right;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .item-content p {
+    text-align: right;
+    clear: both;
+    margin-top: 20px;
+  }
+</style>
diff --git a/src/views/member/MemberList.vue b/src/views/member/MemberList.vue
new file mode 100644
index 0000000..b405c80
--- /dev/null
+++ b/src/views/member/MemberList.vue
@@ -0,0 +1,421 @@
+<template>
+  <a-card :bordered="false">
+    <div class="header-content">
+      <a-button type="primary" icon="plus" @click="onAddMember">新建</a-button>
+      <a-radio-group class="header-status" v-model="form.layout">
+        <a-radio-button value="horizontal">
+          正常
+        </a-radio-button>
+        <a-radio-button value="vertical">
+          冻结
+        </a-radio-button>
+        <a-radio-button value="inline">
+          已删除
+        </a-radio-button>
+      </a-radio-group>
+      <a-input-search class="header-search" placeholder="手机号/邮箱/会员名" autosize="true" enter-button @search="onSearch"/>
+    </div>
+    <!-- list-->
+    <div class="list-content">
+      <a-table
+        ref="table"
+        :loading="loading"
+        :columns="columns"
+        :dataSource="data"
+        :scroll="{ y: 500 }"
+        :pagination="{
+          total: totalCount,
+          current: pageNo,
+          showSizeChanger: true, // 显示可改变每页数量
+          pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
+          showTotal: (total,range) => `共${total}条`,
+          onShowSizeChange: (current, pageSize) => onShowSizeChange(current, pageSize),
+          onChange: (current, pageSize) => onShowSizeChange(current, pageSize)
+        }">
+        <span slot="index" slot-scope="text, record, index">
+          {{ index + 1 }}
+        </span>
+        <a slot="avatar" slot-scope="text">
+          <a-avatar :src="text"/>
+        </a>
+        <span slot="gender" slot-scope="text">{{ getGender(text) }}
+        </span>
+        <span slot="status" slot-scope="text">
+          <a-badge :status="statusTypeFilter(text)" :text="statusFilter(text)"/>
+        </span>
+        <span slot="actions" slot-scope="text, record">
+          <a href="javascript:;" @click="onMemberDetail(record)">详情</a>
+          <a-divider type="vertical"/>
+          <a-popconfirm placement="topRight" title="确认冻结？" @confirm="onUpdate(record)">
+            <a>冻结</a>
+          </a-popconfirm>
+          <a-divider type="vertical"/>
+          <a @click="onDeleteMember(record)">删除</a>
+        </span>
+      </a-table>
+    </div>
+
+    <add-member-from
+      ref="createModal"
+      :visible="visible"
+      :loading="confirmLoading"
+      :model="mdl"
+      @cancel="handleCancel"
+      @ok="handleOk"
+    />
+  </a-card>
+</template>
+
+<script>
+  import { STable } from '@/components'
+  import { getUserList, createUser, updateUser, onMemberDelete } from '@/api/member'
+  import AddMemberFrom from './modules/AddMemberFrom'
+
+  const columns = [
+    { title: '#', width: 50, dataIndex: 'index', key: 'index', fixed: 'left', scopedSlots: { customRender: 'index' } },
+    {
+      title: '头像',
+      width: 100,
+      dataIndex: 'avatar',
+      key: 'avatar',
+      fixed: 'left',
+      scopedSlots: { customRender: 'avatar' }
+    },
+    { title: '用户名', width: 100, dataIndex: 'username', key: 'username', fixed: 'left' },
+    // { title: '昵称', width: 100, dataIndex: 'nickname', key: 'nickname', fixed: 'left' },
+    { title: '账号', width: 100, dataIndex: 'memberSn', key: 'memberSn', fixed: 'left' },
+    { title: '手机号', width: 120, dataIndex: 'phone', key: 'phone', fixed: 'left' },
+    { title: '邮箱', width: 110, dataIndex: 'mail', key: 'mail', fixed: 'left' },
+    {
+      title: '性别',
+      width: 80,
+      dataIndex: 'gender',
+      key: 'gender',
+      fixed: 'left',
+      scopedSlots: { customRender: 'gender' }
+    },
+    {
+      title: '状态',
+      width: 100,
+      dataIndex: 'status',
+      key: 'status',
+      fixed: 'left',
+      scopedSlots: { customRender: 'status' }
+    },
+    { title: '注册日期', dataIndex: 'createTime', key: 'createTime', fixed: 'left' },
+    { title: '管理', key: 'operation', fixed: 'right', scopedSlots: { customRender: 'actions' } }
+  ]
+
+  const data = []
+
+  const statusMap = {
+    0: {
+      status: 'processing',
+      text: '正常'
+    },
+    1: {
+      status: 'default',
+      text: '冻结'
+    },
+    2: {
+      status: 'warning',
+      text: '删除中'
+    }
+  }
+
+  export default {
+    name: 'MemberList',
+    components: {
+      AddMemberFrom,
+      STable
+    },
+    data () {
+      return {
+        loading: false,
+        // create model
+        visible: false,
+        confirmLoading: false,
+        mdl: null,
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 },
+        form: {
+          name: 'q',
+          region: undefined,
+          date1: undefined,
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        data,
+        columns,
+        totalCount: 0,
+        pageNo: 1,
+        loadData: 1
+      }
+    },
+    method () {
+      this.onSearch()
+      this.onLoad()
+    },
+    methods: {
+      onLoad () {
+        this.current = 1
+        getUserList().then(response => {
+          this.loading = true
+          console.log(response.data)
+          console.log('count', response.data.totalCount)
+          console.log('size', response.data.data.length)
+          this.pageNo = response.data.pageNo
+          this.totalCount = response.data.totalCount
+          console.log('size1', this.$refs.table.total)
+          // for (let i = 0; i < response.data.data.length; i++) {
+          this.data = response.data.data
+
+          console.log('size2', this.totalCount)
+          //   let status = '正常'
+          //   if (response.data.data[i].status === 2) {
+          //     status = '冻结'
+          //   } else if (response.data.data[i].status === 3) {
+          //     status = '删除'
+          //   }
+          // data.push({
+          //   key: response.data.data[i].id,
+          //   index: response.data.data[i].id,
+          //   name: response.data.data[i].name,
+          //   account: response.data.data[i].account,
+          //   phone: response.data.data[i].phone,
+          //   mail: response.data.data[i].mail,
+          //   sex: response.data.data[i].sex | 1 ? '男' : '女',
+          //   status: status,
+          //   register_time: response.data.data[i].registerTime
+          // })
+          // }
+          this.loading = false
+          return response.data.data
+        })
+      },
+      onShowSizeChange (current, pageSize, keyword) {
+        this.loading = true
+        this.pageSize = pageSize
+        this.pageNo = current
+        console.log('count', pageSize + '/' + current + '/' + keyword)
+        const p = {
+          'pageNo': current,
+          'pageSize': pageSize,
+          'keyword': keyword
+        }
+        getUserList(p).then(response => {
+          console.log(response.data)
+          console.log('count', response.data.totalCount)
+          console.log('page', response.data.pageNo)
+          console.log('size', response.data.data.length)
+          this.pageSize = response.data.length
+          this.pageNo = response.data.pageNo
+          this.totalCount = response.data.totalCount
+          for (let i = 0; i < response.data.data.length; i++) {
+            let status = '正常'
+            if (response.data.data[i].status === 2) {
+              status = '冻结'
+            } else if (response.data.data[i].status === 3) {
+              status = '删除'
+            }
+            data.push({
+              key: response.data.data[i].id,
+              index: response.data.data[i].id,
+              name: response.data.data[i].name,
+              account: response.data.data[i].account,
+              phone: response.data.data[i].phone,
+              mail: response.data.data[i].mail,
+              sex: response.data.data[i].sex | 1 ? '男' : '女',
+              status: status,
+              register_time: response.data.data[i].registerTime
+            })
+            this.loading = false
+          }
+        })
+      },
+      onSearch (value) {
+        console.log(value)
+        this.$message.warning('敬请期待' + value)
+      },
+      onAddMember () {
+        this.mdl = null
+        this.visible = true
+      },
+      onDeleteMember (item) {
+        console.log('confirm:', item)
+        const _this = this
+        this.$confirm({
+          title: '确认删除',
+          content: '删除后无法找回',
+          okText: '确认',
+          cancelText: '取消',
+          onOk () {
+            const params = {
+              'id': item.id
+            }
+            console.log('values', params)
+            onMemberDelete(params).then(res => {
+                console.log('error:' + res)
+                _this.$message.info('删除成功')
+                // 刷新表格
+                _this.onLoad()
+              }
+            ).catch(error => {
+              console.log('error:' + error)
+              if (error.response) {
+                const data = error.response.data
+                this.$message.error(data.message)
+              } else {
+                this.$message.error('删除失败')
+              }
+            })
+          },
+          onCancel () {
+          }
+        })
+      },
+      onMemberDetail (item) {
+        console.log(item)
+        this.$message.warning('敬请期待')
+      },
+      handleOk () {
+        const form = this.$refs.createModal.form
+        this.confirmLoading = true
+        form.validateFields((errors, values) => {
+          if (!errors) {
+            console.log('values', values)
+            if (values['password'] !== values['password1']) {
+              this.$message.warn('密码不一致')
+              return
+            }
+
+            const params = {
+              'phone': values['phone'],
+              'password': values['password'],
+              'name': values['name']
+            }
+            console.log('params', params)
+            createUser(params).then(response => {
+                this.$message.info('新增成功')
+                console.log('createUser' + JSON.stringify(response))
+                this.visible = false
+                this.confirmLoading = false
+                form.resetFields()
+                // 刷新表格
+                this.onLoad()
+              }
+            ).catch(error => {
+              this.visible = false
+              this.confirmLoading = false
+              if (error.response) {
+                const data = error.response.data
+                console.log('error:' + data)
+                this.$message.error(data.message)
+              } else {
+                this.$message.error('添加失败')
+              }
+            })
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.visible = false
+        const form = this.$refs.createModal.form
+        form.resetFields() // 清理表单数据（可不做）
+      },
+      onUpdate (item) {
+        console.log('item:' + item.id)
+        console.log('status:' + item.status)
+        const params = {
+          'id': item.id,
+          'status': item.status === 0 ? 1 : 0
+        }
+        console.log('params:' + params)
+        updateUser(params).then(res => {
+            console.log('onDeleteAd:' + res)
+            this.$message.success('操作成功')
+            // 刷新表格
+            this.onLoad()
+          }
+        ).catch(error => {
+          this.visible = false
+          this.confirmLoading = false
+          if (error.response) {
+            const data = error.response.data
+            console.log('error:' + data)
+            this.$message.error(data.message)
+          } else {
+            this.$message.error('操作失败')
+          }
+        })
+      },
+      getGender (gender) {
+        if (gender === 0) {
+          return '未知'
+        } else if (gender === 1) {
+          return '男'
+        } else {
+          return '女'
+        }
+      },
+      statusFilter (type) {
+        return statusMap[type].text
+      },
+      statusTypeFilter (type) {
+        return statusMap[type].status
+      }
+    },
+    filters: {},
+    created () {
+      this.onLoad()
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .header-content {
+    position: relative;
+  }
+
+  .header-status {
+    height: 24px;
+    margin-left: 2%;
+    margin-right: 35%;
+    color: #1890ff;
+    right: 30%;
+  }
+
+  .header-search {
+    height: 24px;
+    margin-left: 2%;
+    width: 30%;
+    float: right;
+    color: #1890ff;
+  }
+
+  .list-content {
+    margin-top: 2%;
+  }
+
+  .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>
diff --git a/src/views/member/modules/AddMemberFrom.vue b/src/views/member/modules/AddMemberFrom.vue
new file mode 100644
index 0000000..523dbea
--- /dev/null
+++ b/src/views/member/modules/AddMemberFrom.vue
@@ -0,0 +1,151 @@
+<template>
+  <a-modal
+    title="新增用户"
+    :width="640"
+    :visible="visible"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
+  >
+    <a-spin :spinning="loading">
+      <a-form :form="form" v-bind="formLayout">
+        <a-form-item label="头像">
+          <a-upload
+            name="file"
+            class="avatar-uploader"
+            list-type="picture-card"
+            :showUploadList="false"
+            :multiple="false"
+            :action="uploadImg"
+            @preview="onPreview"
+            @change="onUploadChange"
+
+          >
+            <img v-if="imageUrl" :src="imageUrl" width="100%" alt="avatar"/>
+            <div v-else>
+              <a-icon :type="uploadLoading ? 'loading' : 'plus'"/>
+              <div class="ant-upload-text">
+                Upload
+              </div>
+            </div>
+          </a-upload>
+        </a-form-item>
+        <a-form-item
+          label="用户名"
+        >
+          <a-input v-decorator="['name', {rules:[{required: false, message: '请输入用户名'}]}]"/>
+        </a-form-item>
+        <a-form-item
+          label="手机号"
+        >
+          <a-input v-decorator="['phone', {rules:[{required: true, message: '请输入手机号'}]}]"/>
+        </a-form-item>
+        <a-form-item
+          label="登录密码"
+        >
+          <a-input v-decorator="['password', {rules:[{required: true, message: '请输入密码'}]}]"/>
+        </a-form-item>
+        <a-form-item
+          label="确认密码"
+        >
+          <a-input v-decorator="['password1', {rules:[{required: true, message: '请输入密码'}]}]"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import pick from 'lodash.pick'
+  import { uploadUrl } from '../../../api/common'
+
+  // 表单字段
+  const fields = ['name', 'phone', 'password', 'password1', 'imgPath']
+
+  function getBase64 (img, callback) {
+    const reader = new FileReader()
+    reader.addEventListener('load', () => callback(reader.result))
+    reader.readAsDataURL(img)
+  }
+
+  export default {
+    props: {
+      visible: {
+        type: Boolean,
+        required: true
+      },
+      loading: {
+        type: Boolean,
+        default: () => false
+      },
+      model: {
+        type: Object,
+        default: () => null
+      }
+    },
+    data () {
+      this.formLayout = {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        }
+      }
+      return {
+        imageUrl: '',
+        uploadLoading: false,
+        defaultFileList: [],
+        event: '1',
+        adPosition: '1',
+        uploadImg: uploadUrl,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 7 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 13 }
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+    created () {
+      console.log('custom modal created')
+
+      // 防止表单未注册
+      fields.forEach(v => this.form.getFieldDecorator(v))
+
+      // 当 model 发生改变时，为表单设置值
+      this.$watch('model', () => {
+        this.model && this.form.setFieldsValue(pick(this.model, fields))
+      })
+    },
+    methods: {
+      async onPreview (file) {
+        if (!file.url && !file.preview) {
+          file.preview = await getBase64(file.originFileObj)
+        }
+        this.previewImage = file.url || file.preview
+        this.previewVisible = true
+      },
+      onUploadChange (info) {
+        if (info.file.status === 'uploading') {
+          this.uploadLoading = true
+          return
+        }
+        if (info.file.status === 'done') {
+          // Get this url from response in real world.
+          getBase64(info.file.originFileObj, imageUrl => {
+            this.imageUrl = imageUrl
+            this.uploadLoading = false
+          })
+          console.log('onUploadChange', info)
+          console.log('onUploadChange', info.file.response)
+        }
+      }
+    }
+  }
+</script>
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
new file mode 100644
index 0000000..d49cb1a
--- /dev/null
+++ b/src/views/monitor/cache/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <page-header-wrapper>
+    <a-space direction="vertical">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-card :loading="loading" title="基本信息" :bordered="false">
+            <a-descriptions :column="4">
+              <a-descriptions-item label="Redis版本">
+                <span v-if="cache.info">{{ cache.info.redis_version }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="运行模式">
+                <span v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="端口">
+                <span v-if="cache.info">{{ cache.info.tcp_port }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="客户端数">
+                <span v-if="cache.info">{{ cache.info.connected_clients }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="运行时间(天)">
+                <span v-if="cache.info">{{ cache.info.uptime_in_days }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="使用内存">
+                <span v-if="cache.info">{{ cache.info.used_memory_human }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="使用CPU">
+                <span v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="内存配置">
+                <span v-if="cache.info">{{ cache.info.maxmemory_human }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="AOF是否开启">
+                <span v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="RDB是否成功">
+                <span v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="Key数量">
+                <span v-if="cache.dbSize">{{ cache.dbSize }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="系统架构">
+                <span v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps</span>
+              </a-descriptions-item>
+            </a-descriptions>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-card :loading="loading" title="命令统计" :bordered="false">
+            <div ref="commandstats" style="height: 420px" />
+          </a-card>
+        </a-col>
+        <a-col :span="12">
+          <a-card :loading="loading" title="内存信息" :bordered="false">
+            <div ref="usedmemory" style="height: 420px" />
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-space>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { getCache } from '@/api/monitor/cache'
+import * as echarts from 'echarts'
+
+export default {
+  name: 'Cache',
+  data () {
+    return {
+      loading: true,
+      // 统计命令信息
+      commandstats: null,
+      // 使用内存
+      usedmemory: null,
+      // cache信息
+      cache: []
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询服务信息 */
+    getList () {
+      this.loading = true
+      getCache().then(response => {
+          const cache = response.data
+          this.cache = cache
+          this.loading = false
+          this.$nextTick(() => {
+            this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
+            this.commandstats.setOption({
+              tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b} : {c} ({d}%)'
+              },
+              series: [
+                {
+                  name: '命令',
+                  type: 'pie',
+                  roseType: 'radius',
+                  radius: [15, 95],
+                  center: ['50%', '38%'],
+                  data: response.data.commandStats,
+                  animationEasing: 'cubicInOut',
+                  animationDuration: 1000
+                }
+              ]
+            })
+            this.usedmemory = echarts.init(this.$refs.usedmemory, 'macarons')
+            this.usedmemory.setOption({
+              tooltip: {
+                formatter: '{b} <br/>{a} : ' + this.cache.info.used_memory_human
+              },
+              series: [
+                {
+                  name: '峰值',
+                  type: 'gauge',
+                  min: 0,
+                  max: 1000,
+                  detail: {
+                    formatter: this.cache.info.used_memory_human
+                  },
+                  data: [
+                    {
+                      value: parseFloat(this.cache.info.used_memory_human),
+                      name: '内存消耗'
+                    }
+                  ]
+                }
+              ]
+            })
+          })
+        }
+      )
+    }
+  }
+}
+</script>
diff --git a/src/views/monitor/druid/index.vue b/src/views/monitor/druid/index.vue
new file mode 100644
index 0000000..51d74f2
--- /dev/null
+++ b/src/views/monitor/druid/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <a-spin :spinning="loading" tip="加载中...">
+    <div :style="'height:'+ height">
+      <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
+    </div>
+  </a-spin>
+</template>
+
+<script>
+
+export default {
+  name: 'Druid',
+  components: {
+  },
+  data () {
+    return {
+      src: process.env.VUE_APP_BASE_API + '/druid/index.html',
+      height: document.documentElement.clientHeight - 94.5 + 'px;',
+      loading: true
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  mounted: function () {
+    setTimeout(() => {
+      this.loading = false
+    }, 230)
+    const that = this
+    window.onresize = function temp () {
+      that.height = document.documentElement.clientHeight - 94.5 + 'px;'
+    }
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/src/views/monitor/logininfor/index.vue b/src/views/monitor/logininfor/index.vue
new file mode 100644
index 0000000..3e59cb8
--- /dev/null
+++ b/src/views/monitor/logininfor/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <page-header-wrapper>
+    <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.ipaddr" placeholder="请输入登录地址" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择状态" v-model="queryParam.status" style="width: 100%" allow-clear>
+                  <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</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 v-model="queryParam.loginName" style="width: 100%" allow-clear/>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="登陆时间">
+                  <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
+                </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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="danger" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">
+          <a-icon type="delete" />清空
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['system:logininfor:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="infoId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { list, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'
+
+export default {
+  name: 'Logininfor',
+  components: {
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      loading: false,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      // 日期范围
+      dateRange: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        ipaddr: null,
+        userName: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '访问编号',
+          dataIndex: 'infoId',
+          align: 'center'
+        },
+        {
+          title: '用户名称',
+          dataIndex: 'userName',
+          align: 'center'
+        },
+        {
+          title: '登录地址',
+          dataIndex: 'ipaddr',
+          align: 'center'
+        },
+        {
+          title: '登录地点',
+          dataIndex: 'loginLocation',
+          align: 'center'
+        },
+        {
+          title: '浏览器',
+          dataIndex: 'browser',
+          align: 'center'
+        },
+        {
+          title: '操作系统',
+          dataIndex: 'os',
+          align: 'center'
+        },
+        {
+          title: '登录状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '操作信息',
+          dataIndex: 'msg',
+          align: 'center'
+        },
+        {
+          title: '登录时间',
+          dataIndex: 'loginTime',
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_common_status').then(response => {
+      this.statusOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList () {
+      this.loading = true
+      list(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 执行状态字典翻译
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        ipaddr: null,
+        userName: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.infoId)
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const infoIds = row.infoId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中访问编号为' + infoIds + '的数据',
+        onOk () {
+          return delLogininfor(infoIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 清空按钮操作 */
+    handleClean () {
+      var that = this
+      this.$confirm({
+        title: '是否确认清空?',
+        content: '此操作将会清空所有登录日志数据项',
+        onOk () {
+          return cleanLogininfor()
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '清空成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportLogininfor(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
new file mode 100644
index 0000000..1308e71
--- /dev/null
+++ b/src/views/monitor/online/index.vue
@@ -0,0 +1,216 @@
+<template>
+  <page-header-wrapper>
+    <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.ipaddr" placeholder="请输入登录地址" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="用户名称">
+                <a-input v-model="queryParam.userName" placeholder="请输入用户名称" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <span class="table-page-search-submitButtons">
+                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 操作 -->
+      <div class="table-operations">
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="tokenId"
+        :columns="columns"
+        :data-source="list"
+        :pagination="false">
+        <span slot="loginTime" slot-scope="text, record">
+          {{ parseTime(record.loginTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a-popconfirm
+            ok-text="是"
+            cancel-text="否"
+            @confirm="confirmHandleForceLogout(record)"
+            @cancel="cancelHandleForceLogout(record)"
+          >
+            <span slot="title">确认强退<b>{{ record.userName }}</b>的用户吗?</span>
+            <a v-hasPermi="['monitor:online:forceLogout']"> 强退 </a>
+          </a-popconfirm>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { list, forceLogout } from '@/api/monitor/online'
+
+export default {
+  name: 'Online',
+  components: {
+  },
+  data () {
+    return {
+      list: [],
+      loading: false,
+      total: 0,
+      // 非多个禁用
+      multiple: true,
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        ipaddr: undefined,
+        userName: undefined
+      },
+      columns: [
+        {
+          title: '会话编号',
+          dataIndex: 'tokenId',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '登录名称',
+          dataIndex: 'userName',
+          align: 'center'
+        },
+        {
+          title: '部门名称',
+          dataIndex: 'deptName',
+          align: 'center'
+        },
+        {
+          title: '主机',
+          dataIndex: 'ipaddr',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '登录地点',
+          dataIndex: 'loginLocation',
+          align: 'center'
+        },
+        {
+          title: '浏览器',
+          dataIndex: 'browser',
+          align: 'center'
+        },
+        {
+          title: '操作系统',
+          dataIndex: 'os',
+          align: 'center'
+        },
+        {
+          title: '登录时间',
+          dataIndex: 'loginTime',
+          width: 180,
+          scopedSlots: { customRender: 'loginTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList () {
+      this.loading = true
+      list(this.queryParam).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        ipaddr: undefined,
+        userName: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    /** 强退按钮操作 */
+    confirmHandleForceLogout (row) {
+      forceLogout(row.tokenId)
+      .then(() => {
+        this.getList()
+        this.$message.success(
+          '已强退',
+          3
+        )
+      }).catch(function () {
+        this.$message.error(
+          '发生异常',
+          3
+        )
+      })
+    },
+    cancelHandleForceLogout (row) {
+    }
+  }
+}
+</script>
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
new file mode 100644
index 0000000..8399333
--- /dev/null
+++ b/src/views/monitor/operlog/index.vue
@@ -0,0 +1,333 @@
+<template>
+  <page-header-wrapper>
+    <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.title" placeholder="请输入系统模块" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="操作人员">
+                <a-input v-model="queryParam.operName" placeholder="请输入操作人员" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="类型">
+                  <a-select placeholder="操作类型" v-model="queryParam.businessType" style="width: 100%" allow-clear>
+                    <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="状态">
+                  <a-select placeholder="操作状态" v-model="queryParam.status" style="width: 100%" allow-clear>
+                    <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="操作时间">
+                  <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
+                </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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="danger" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">
+          <a-icon type="delete" />清空
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['system:config:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 详细信息 -->
+      <view-form ref="viewForm" />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="operId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="businessType" slot-scope="text, record">
+          {{ typeFormat(record) }}
+        </span>
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.viewForm.handleView(record)" v-hasPermi="['monitor:operlog:query']">
+            <a-icon type="eye" />详细
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { list, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
+import ViewForm from './modules/ViewForm'
+
+export default {
+  name: 'Operlog',
+  components: {
+    ViewForm
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      loading: false,
+      // 非多个禁用
+      multiple: true,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      typeOptions: [],
+      // 日期范围
+      dateRange: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        title: undefined,
+        operName: undefined,
+        businessType: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '日志编号',
+          dataIndex: 'operId',
+          align: 'center'
+        },
+        {
+          title: '系统模块',
+          dataIndex: 'title',
+          align: 'center'
+        },
+        {
+          title: '操作类型',
+          dataIndex: 'businessType',
+          scopedSlots: { customRender: 'businessType' },
+          align: 'center'
+        },
+        {
+          title: '请求方式',
+          dataIndex: 'requestMethod',
+          align: 'center'
+        },
+        {
+          title: '操作人员',
+          dataIndex: 'operName',
+          align: 'center'
+        },
+        {
+          title: '主机',
+          dataIndex: 'operIp',
+          align: 'center'
+        },
+        {
+          title: '操作地点',
+          dataIndex: 'operLocation',
+          align: 'center'
+        },
+        {
+          title: '登录状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '操作日期',
+          dataIndex: 'operTime',
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_common_status').then(response => {
+      this.statusOptions = response.data
+    })
+    this.getDicts('sys_oper_type').then(response => {
+      this.typeOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList () {
+      this.loading = true
+      list(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 操作日志状态字典翻译
+    statusFormat (row, column) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    // 操作日志类型字典翻译
+    typeFormat (row, column) {
+      return this.selectDictLabel(this.typeOptions, row.businessType)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        title: undefined,
+        operName: undefined,
+        businessType: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.operId)
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const operIds = row.operId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中日志编号为' + operIds + '的数据',
+        onOk () {
+          return delOperlog(operIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 清空按钮操作 */
+    handleClean () {
+      var that = this
+      this.$confirm({
+        title: '是否确认清空?',
+        content: '此操作将会清空所有操作日志数据项',
+        onOk () {
+          return cleanOperlog()
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '清空成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportOperlog(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/monitor/operlog/modules/ViewForm.vue b/src/views/monitor/operlog/modules/ViewForm.vue
new file mode 100644
index 0000000..0237d1a
--- /dev/null
+++ b/src/views/monitor/operlog/modules/ViewForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-drawer width="35%" placement="right" :closable="false" :visible="openView" @close="onCloseView">
+    <a-descriptions title="操作信息" layout="vertical">
+      <a-descriptions-item label="操作模块">
+        {{ form.title }}
+      </a-descriptions-item>
+      <a-descriptions-item label="登录信息">
+        {{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}
+      </a-descriptions-item>
+      <a-descriptions-item label="请求地址">
+        {{ form.operUrl }}
+      </a-descriptions-item>
+      <a-descriptions-item label="操作方法" span="2">
+        <div style="word-break: break-all;">{{ form.method }}</div>
+      </a-descriptions-item>
+      <a-descriptions-item label="请求方式">
+        {{ form.requestMethod }}
+      </a-descriptions-item>
+    </a-descriptions>
+    <a-descriptions title="接口信息" layout="vertical">
+      <a-descriptions-item label="请求参数" span="3">
+        {{ form.operParam }}
+      </a-descriptions-item>
+      <a-descriptions-item label="返回参数" span="3">
+        {{ form.jsonResult }}
+      </a-descriptions-item>
+      <a-descriptions-item label="操作状态" span="2">
+        <a-badge v-if="form.status === 0" status="processing" text="正常" />
+        <a-badge v-if="form.status === 1" status="error" text="失败" />
+      </a-descriptions-item>
+      <a-descriptions-item label="操作时间" span="2">
+        {{ parseTime(form.operTime) }}
+      </a-descriptions-item>
+      <a-descriptions-item label="异常信息" span="3" v-if="form.status === 1">
+        {{ form.errorMsg }}
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'ViewForm',
+  props: {
+  },
+  data () {
+    return {
+      // 表单参数
+      form: {},
+      openView: false
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    handleView (row) {
+      this.openView = true
+      this.form = row
+    },
+    onCloseView () {
+      this.openView = false
+    }
+  }
+}
+</script>
diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue
new file mode 100644
index 0000000..e972b78
--- /dev/null
+++ b/src/views/monitor/server/index.vue
@@ -0,0 +1,286 @@
+<template>
+  <page-header-wrapper>
+    <a-space direction="vertical">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-card :loading="loading" title="CPU" :bordered="false">
+            <a-row :gutter="24" v-if="server.cpu">
+              <a-col :span="12">
+                <a-space direction="vertical" size="large">
+                  <a-statistic
+                    title="核心数"
+                    :value="server.cpu.cpuNum"
+                    :value-style="{ color: '#3f8600' }"
+                    style="margin-right: 50px"
+                  >
+                    <template #prefix>
+                      <a-icon type="setting" />
+                    </template>
+                  </a-statistic>
+                  <a-statistic
+                    title="用户使用率"
+                    :value="server.cpu.used"
+                    :precision="2"
+                    suffix="%"
+                    :value-style="{ color: '#3f8600' }"
+                    style="margin-right: 50px"
+                  >
+                    <template #prefix>
+                      <a-icon type="team" />
+                    </template>
+                  </a-statistic>
+                </a-space>
+              </a-col>
+              <a-col :span="12">
+                <a-space direction="vertical" size="large">
+                  <a-statistic
+                    title="系统使用率"
+                    :value="server.cpu.sys"
+                    :precision="2"
+                    suffix="%"
+                    :value-style="{ color: '#3f8600' }"
+                    style="margin-right: 50px"
+                  >
+                    <template #prefix>
+                      <a-icon type="cloud-server" />
+                    </template>
+                  </a-statistic>
+                  <a-statistic
+                    title="当前空闲率"
+                    :value="server.cpu.free"
+                    :precision="2"
+                    suffix="%"
+                    :value-style="{ color: '#3f8600' }"
+                    style="margin-right: 50px"
+                  >
+                    <template #prefix>
+                      <a-icon type="inbox" />
+                    </template>
+                  </a-statistic>
+                </a-space>
+              </a-col>
+            </a-row>
+          </a-card>
+        </a-col>
+        <a-col :span="12">
+          <a-card :loading="loading" title="内存" :bordered="false">
+            <a-table
+              :loading="loading"
+              size="small"
+              rowKey="name"
+              :columns="memColumns"
+              :data-source="memData"
+              :pagination="false">
+              <span slot="mem" slot-scope="text, record">
+                <div :style="{color: record.name == '使用率' && text > 80 ? 'red' : ''}">
+                  <a-icon type="warning" style="color:#FFCC00" v-if="record.name == '使用率' && text > 80" />
+                  {{ text }} &nbsp;
+                  <code v-if="record.name == '使用率'">%</code>
+                  <code v-if="record.name != '使用率'">G</code>
+                </div>
+              </span>
+              <span slot="jvm" slot-scope="text, record">
+                <div :style="{color: record.name == '使用率' && text > 80 ? 'red' : ''}">
+                  <a-icon type="warning" style="color:#FFCC00" v-if="record.name == '使用率' && text > 80" />
+                  {{ text }} &nbsp;
+                  <code v-if="record.name == '使用率'">%</code>
+                  <code v-if="record.name != '使用率'">M</code>
+                </div>
+              </span>
+            </a-table>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-card :loading="loading" title="服务器信息" :bordered="false">
+            <a-descriptions :column="2" v-if="server.sys">
+              <a-descriptions-item label="服务器名称">
+                {{ server.sys.computerName }}
+              </a-descriptions-item>
+              <a-descriptions-item label="操作系统">
+                {{ server.sys.osName }}
+              </a-descriptions-item>
+              <a-descriptions-item label="服务器IP">
+                {{ server.sys.computerIp }}
+              </a-descriptions-item>
+              <a-descriptions-item label="系统架构">
+                {{ server.sys.osArch }}
+              </a-descriptions-item>
+            </a-descriptions>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-card :loading="loading" title="Java虚拟机信息" :bordered="false">
+            <a-descriptions :column="2" v-if="server.jvm">
+              <a-descriptions-item label="Java名称">
+                {{ server.jvm.name }}
+              </a-descriptions-item>
+              <a-descriptions-item label="Java版本">
+                {{ server.jvm.version }}
+              </a-descriptions-item>
+              <a-descriptions-item label="启动时间">
+                {{ server.jvm.startTime }}
+              </a-descriptions-item>
+              <a-descriptions-item label="运行时长">
+                {{ server.jvm.runTime }}
+              </a-descriptions-item>
+              <a-descriptions-item label="安装路径">
+                {{ server.jvm.home }}
+              </a-descriptions-item>
+              <a-descriptions-item label="项目路径">
+                {{ server.sys.userDir }}
+              </a-descriptions-item>
+            </a-descriptions>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-card :loading="loading" title="磁盘状态" :bordered="false">
+            <a-table
+              :loading="loading"
+              :size="tableSize"
+              rowKey="dirName"
+              :columns="sysColumns"
+              :data-source="sysData"
+              :pagination="false">
+              <span slot="total" slot-scope="text">
+                {{ text }}
+              </span>
+              <span slot="free" slot-scope="text">
+                {{ text }}
+              </span>
+              <span slot="used" slot-scope="text">
+                {{ text }}
+              </span>
+              <span slot="usage" slot-scope="text">
+                <div :style="{color: text > 80 ? 'red' : ''}">
+                  <a-icon type="warning" style="color:#FFCC00" v-if="text > 80" />
+                  {{ text }}<code>%</code>
+                </div>
+              </span>
+            </a-table>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-space>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { getServer } from '@/api/monitor/server'
+
+export default {
+  name: 'Server',
+  data () {
+    return {
+      server: [],
+      loading: true,
+      memColumns: [
+        {
+          title: '属性',
+          dataIndex: 'name'
+        },
+        {
+          title: '内存',
+          dataIndex: 'mem',
+          scopedSlots: { customRender: 'mem' }
+        },
+        {
+          title: 'JVM',
+          dataIndex: 'jvm',
+          scopedSlots: { customRender: 'jvm' }
+        }
+      ],
+      memData: [],
+      sysColumns: [
+        {
+          title: '盘符路径',
+          dataIndex: 'dirName',
+          ellipsis: true
+        },
+        {
+          title: '文件系统',
+          dataIndex: 'sysTypeName'
+        },
+        {
+          title: '盘符类型',
+          dataIndex: 'typeName',
+          ellipsis: true
+        },
+        {
+          title: '总大小',
+          dataIndex: 'total',
+          scopedSlots: { customRender: 'total' }
+        },
+        {
+          title: '可用大小',
+          dataIndex: 'free',
+          scopedSlots: { customRender: 'free' }
+        },
+        {
+          title: '已用大小',
+          dataIndex: 'used',
+          scopedSlots: { customRender: 'used' }
+        },
+        {
+          title: '已用百分比',
+          dataIndex: 'usage',
+          scopedSlots: { customRender: 'usage' }
+        }
+      ],
+      sysData: []
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询服务信息 */
+    getList () {
+      // this.loading = true
+      getServer().then(response => {
+          const serverData = response.data
+          this.server = serverData
+          this.memData = [
+            {
+              name: '总内存',
+              mem: serverData.mem.total,
+              jvm: serverData.jvm.total
+            },
+            {
+              name: '已用内存',
+              mem: serverData.mem.used,
+              jvm: serverData.jvm.used
+            },
+            {
+              name: '剩余内存',
+              mem: serverData.mem.free,
+              jvm: serverData.jvm.free
+            },
+            {
+              name: '使用率',
+              mem: serverData.mem.usage,
+              jvm: serverData.jvm.usage
+            }
+          ]
+          this.sysData = serverData.sysFiles
+          setTimeout(() => {
+            this.loading = false
+          }, 500)
+        }
+      )
+    }
+  }
+}
+</script>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
new file mode 100644
index 0000000..aaf5d4d
--- /dev/null
+++ b/src/views/system/config/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <page-header-wrapper>
+    <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.configName" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="参数键名">
+                <a-input v-model="queryParam.configKey" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="参数类型">
+                  <a-select placeholder="请选择" v-model="queryParam.configType" style="width: 100%" allow-clear>
+                    <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="创建时间">
+                  <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
+                </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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:config:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['system:config:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['system:config:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button type="dashed" @click="handleClearCache" v-hasPermi="['system:config:remove']">
+          <a-icon type="redo" />清除缓存
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+        :typeOptions="typeOptions"
+        @ok="getList"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="configId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="configType" slot-scope="text, record">
+          {{ typeFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['system:config:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:config:remove']" />
+          <a @click="handleDelete(record)" v-hasPermi="['system:config:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listConfig, delConfig, exportConfig, clearCache } from '@/api/system/config'
+import CreateForm from './modules/CreateForm'
+
+export default {
+  name: 'Config',
+  components: {
+    CreateForm
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      typeOptions: [],
+      // 日期范围
+      dateRange: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        configName: undefined,
+        configKey: undefined,
+        configType: undefined
+      },
+      columns: [
+        {
+          title: '参数主键',
+          dataIndex: 'configId',
+          align: 'center'
+        },
+        {
+          title: '参数名称',
+          dataIndex: 'configName',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '参数键名',
+          dataIndex: 'configKey',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '参数键值',
+          dataIndex: 'configValue',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '系统内置',
+          dataIndex: 'configType',
+          scopedSlots: { customRender: 'configType' },
+          align: 'center'
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'createTime' },
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '15%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_yes_no').then(response => {
+      this.typeOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询参数列表 */
+    getList () {
+      this.loading = true
+      listConfig(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 参数系统内置字典翻译
+    typeFormat (row) {
+      return this.selectDictLabel(this.typeOptions, row.configType)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        configName: undefined,
+        configKey: undefined,
+        configType: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.configId)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const configIds = row.configId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + configIds + '的数据',
+        onOk () {
+          return delConfig(configIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportConfig(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 清理缓存按钮操作 */
+    handleClearCache () {
+      clearCache().then(response => {
+        this.$message.success(
+          '清理成功',
+          3
+        )
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/config/modules/CreateForm.vue b/src/views/system/config/modules/CreateForm.vue
new file mode 100644
index 0000000..302e665
--- /dev/null
+++ b/src/views/system/config/modules/CreateForm.vue
@@ -0,0 +1,147 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="参数名称" prop="configName">
+        <a-input v-model="form.configName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="参数键名" prop="configKey">
+        <a-input v-model="form.configKey" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="参数键值" prop="configValue">
+        <a-input v-model="form.configValue" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="系统内置" prop="configType">
+        <a-select placeholder="是否内置" v-model="form.configType">
+          <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input v-model="form.remark" placeholder="请输入备注" type="textarea" allow-clear />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getConfig, addConfig, updateConfig } from '@/api/system/config'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    typeOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        configId: undefined,
+        configName: undefined,
+        configKey: undefined,
+        configValue: undefined,
+        configType: 'Y',
+        remark: undefined
+      },
+      open: false,
+      rules: {
+        configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+        configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+        configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        configId: undefined,
+        configName: undefined,
+        configKey: undefined,
+        configValue: undefined,
+        configType: 'Y',
+        remark: undefined
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.open = true
+      this.formTitle = '添加参数'
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      this.reset()
+      const configId = row ? row.configId : ids
+      getConfig(configId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.formTitle = '修改参数'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.configId !== undefined) {
+            updateConfig(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            addConfig(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
new file mode 100644
index 0000000..bc57b83
--- /dev/null
+++ b/src/views/system/dept/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <page-header-wrapper>
+    <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.deptName" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="状态">
+                <a-select placeholder="请选择" v-model="queryParam.status" style="width: 100%" allow-clear>
+                  <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</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" @click="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 操作 -->
+      <div class="table-operations">
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:dept:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+        :deptOptions="deptOptions"
+        :statusOptions="statusOptions"
+        @ok="getList"
+        @select-tree="getTreeselect"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="deptId"
+        :columns="columns"
+        :data-source="list"
+        :pagination="false">
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createForm.handleUpdate(record)" v-hasPermi="['system:dept:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:dept:add']" />
+          <a @click="$refs.createForm.handleAdd(record)" v-hasPermi="['system:dept:add']">
+            <a-icon type="plus" />新增
+          </a>
+          <a-divider type="vertical" v-if="record.parentId != 0" v-hasPermi="['system:dept:remove']" />
+          <a @click="handleDelete(record)" v-if="record.parentId != 0" v-hasPermi="['system:dept:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listDept, delDept, listDeptExcludeChild } from '@/api/system/dept'
+import CreateForm from './modules/CreateForm'
+
+export default {
+  name: 'Dept',
+  components: {
+    CreateForm
+  },
+  data () {
+    return {
+      list: [],
+      // 部门树选项
+      deptOptions: [],
+      loading: false,
+      // 状态数据字典
+      statusOptions: [],
+      queryParam: {
+        deptName: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '部门名称',
+          dataIndex: 'deptName'
+        },
+        {
+          title: '排序',
+          dataIndex: 'orderNum',
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          ellipsis: true,
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '30%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList () {
+      this.loading = true
+      listDept(this.queryParam).then(response => {
+          this.list = this.handleTree(response.data, 'deptId')
+          this.loading = false
+        }
+      )
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect (row) {
+      if (!row) {
+        listDept().then(response => {
+          this.deptOptions = this.handleTree(response.data, 'deptId')
+        })
+      } else {
+        listDeptExcludeChild(row.deptId).then(response => {
+          this.deptOptions = this.handleTree(response.data, 'deptId')
+        })
+      }
+    },
+    // 字典状态字典翻译
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.queryParam = {
+        deptName: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const deptId = row.deptId
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + deptId + '的数据',
+        onOk () {
+          return delDept(deptId)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/dept/modules/CreateForm.vue b/src/views/system/dept/modules/CreateForm.vue
new file mode 100644
index 0000000..c22817c
--- /dev/null
+++ b/src/views/system/dept/modules/CreateForm.vue
@@ -0,0 +1,187 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="上级部门" prop="parentId">
+        <a-tree-select
+          v-model="form.parentId"
+          style="width: 100%"
+          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+          :tree-data="deptOptions"
+          placeholder="请选择"
+          :replaceFields="{children:'children', title:'deptName', key:'deptId', value: 'deptId' }"
+          tree-default-expand-all
+        >
+        </a-tree-select>
+      </a-form-model-item>
+      <a-form-model-item label="部门名称" prop="deptName">
+        <a-input v-model="form.deptName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="排序" prop="orderNum">
+        <a-input-number v-model="form.orderNum" :min="0" style="width: 100%"/>
+      </a-form-model-item>
+      <a-form-model-item label="负责人" prop="leader">
+        <a-input v-model="form.leader" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="联系电话" prop="phone">
+        <a-input v-model="form.phone" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="邮箱" prop="email">
+        <a-input v-model="form.email" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status">
+        <a-radio-group v-model="form.status" button-style="solid">
+          <a-radio-button v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getDept, addDept, updateDept } from '@/api/system/dept'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    statusOptions: {
+      type: Array,
+      required: true
+    },
+    deptOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        deptId: undefined,
+        parentId: undefined,
+        deptName: undefined,
+        orderNum: 0,
+        leader: undefined,
+        phone: undefined,
+        email: undefined,
+        status: '0'
+      },
+      open: false,
+      rules: {
+        parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+        deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+        orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+        email: [
+          {
+            type: 'email',
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change']
+          }
+        ],
+        phone: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        deptId: undefined,
+        parentId: undefined,
+        deptName: undefined,
+        orderNum: 0,
+        leader: undefined,
+        phone: undefined,
+        email: undefined,
+        status: '0'
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd (row) {
+      this.reset()
+      if (row !== undefined) {
+        this.form.parentId = row.deptId
+      }
+      this.open = true
+      this.formTitle = '添加部门'
+      this.$emit('select-tree')
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row) {
+      this.reset()
+      const deptId = row.deptId
+      getDept(deptId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.formTitle = '修改部门'
+      })
+      this.$emit('select-tree', row)
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.deptId !== undefined) {
+            updateDept(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            addDept(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
new file mode 100644
index 0000000..f657b8a
--- /dev/null
+++ b/src/views/system/dict/index.vue
@@ -0,0 +1,334 @@
+<template>
+  <page-header-wrapper>
+    <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.dictName" placeholder="请输入字典名称" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="字典类型">
+                <a-input v-model="queryParam.dictType" placeholder="请选择字典类型" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="状态">
+                  <a-select placeholder="字典状态" v-model="queryParam.status" style="width: 100%">
+                    <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="创建时间">
+                  <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
+                </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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:dict:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['system:dict:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['system:dict:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button type="dashed" @click="handleClearCache" v-hasPermi="['system:dict:remove']">
+          <a-icon type="redo" />清除缓存
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+        :statusOptions="statusOptions"
+        @ok="getList"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="dictId"
+        :columns="columns"
+        :expandedRowKeys="expandedKeys"
+        @expand="onExpandCurrent"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span
+          slot="expandedRowRender"
+          slot-scope="text"
+        >
+          <dict-data
+            ref="dictData"
+            :dictId="text.dictId"
+            :dictType="text.dictType"
+          />
+        </span>
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['system:dict:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" />
+          <a @click="handleDelete(record)" v-hasPermi="['system:dict:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listType, delType, exportType, clearCache } from '@/api/system/dict/type'
+import CreateForm from './modules/CreateForm'
+import DictData from './modules/DictData'
+import CreateDataForm from './modules/CreateDataForm'
+
+export default {
+  name: 'Dict',
+  components: {
+    CreateForm,
+    DictData,
+    CreateDataForm
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      // 日期范围
+      dateRange: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      expandedKeys: [],
+      columns: [
+        {
+          title: '字典编号',
+          dataIndex: 'dictId',
+          align: 'center'
+        },
+        {
+          title: '字典名称',
+          dataIndex: 'dictName',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '字典类型',
+          dataIndex: 'dictType',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          ellipsis: true,
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '15%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询字典列表 */
+    getList () {
+      this.loading = true
+      listType(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 参数系统内置字典翻译
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.dictId)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const dictIds = row.dictId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中字典编号为' + dictIds + '的数据',
+        onOk () {
+          return delType(dictIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportType(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 清理缓存按钮操作 */
+    handleClearCache () {
+      clearCache().then(response => {
+        this.msgSuccess('清理成功')
+      })
+    },
+    onExpandCurrent (expandedKeys, row) {
+      if (expandedKeys) {
+        this.expandedKeys = [row.dictId]
+      } else {
+        this.expandedKeys = []
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/system/dict/modules/CreateDataForm.vue b/src/views/system/dict/modules/CreateDataForm.vue
new file mode 100644
index 0000000..320b237
--- /dev/null
+++ b/src/views/system/dict/modules/CreateDataForm.vue
@@ -0,0 +1,155 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="字典类型" prop="dictType">
+        <a-input v-model="form.dictType" :disabled="true" />
+      </a-form-model-item>
+      <a-form-model-item label="数据标签" prop="dictLabel">
+        <a-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+      </a-form-model-item>
+      <a-form-model-item label="数据键值" prop="dictValue">
+        <a-input v-model="form.dictValue" placeholder="请输入数据键值" />
+      </a-form-model-item>
+      <a-form-model-item label="显示排序" prop="dictSort">
+        <a-input-number v-model="form.dictSort" :min="0" style="width: 100%"/>
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status">
+        <a-select placeholder="请选择" v-model="form.status">
+          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input v-model="form.remark" placeholder="请输入内容" type="textarea" allow-clear />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getData, addData, updateData } from '@/api/system/dict/data'
+
+export default {
+  name: 'CreateDataForm',
+  props: {
+    dictType: {
+      type: String,
+      required: true
+    },
+    statusOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        dictCode: undefined,
+        dictLabel: undefined,
+        dictValue: undefined,
+        dictSort: 0,
+        status: '0',
+        remark: undefined
+      },
+      open: false,
+      rules: {
+        dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+        dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+        dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        dictCode: undefined,
+        dictLabel: undefined,
+        dictValue: undefined,
+        dictSort: 0,
+        status: '0',
+        remark: undefined
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.open = true
+      this.formTitle = '添加字典数据'
+      this.form.dictType = this.dictType
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row) {
+      this.reset()
+      const dictCode = row.dictCode
+      getData(dictCode).then(response => {
+        this.form = response.data
+        this.open = true
+        this.formTitle = '修改字典数据'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.dictCode !== undefined) {
+            updateData(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            addData(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/dict/modules/CreateForm.vue b/src/views/system/dict/modules/CreateForm.vue
new file mode 100644
index 0000000..f529e47
--- /dev/null
+++ b/src/views/system/dict/modules/CreateForm.vue
@@ -0,0 +1,141 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="字典名称" prop="dictName">
+        <a-input v-model="form.dictName" placeholder="请输入字典名称" />
+      </a-form-model-item>
+      <a-form-model-item label="字典类型" prop="dictType">
+        <a-input v-model="form.dictType" placeholder="请输入字典类型" />
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status">
+        <a-select placeholder="请选择" v-model="form.status">
+          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input v-model="form.remark" placeholder="请输入内容" type="textarea" allow-clear />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getType, addType, updateType } from '@/api/system/dict/type'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    statusOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        dictId: undefined,
+        dictName: undefined,
+        dictType: undefined,
+        status: '0',
+        remark: undefined
+      },
+      open: false,
+      rules: {
+        dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+        dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        dictId: undefined,
+        dictName: undefined,
+        dictType: undefined,
+        status: '0',
+        remark: undefined
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.open = true
+      this.formTitle = '添加字典类型'
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      this.reset()
+      const dictId = row ? row.dictId : ids
+      getType(dictId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.formTitle = '修改字典类型'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.dictId !== undefined) {
+            updateType(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            addType(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/dict/modules/DictData.vue b/src/views/system/dict/modules/DictData.vue
new file mode 100644
index 0000000..9cc9e6d
--- /dev/null
+++ b/src/views/system/dict/modules/DictData.vue
@@ -0,0 +1,258 @@
+<template>
+  <div>
+    <create-data-form
+      ref="createDataForm"
+      :statusOptions="statusOptions"
+      :dictType="dictType"
+      @ok="getList"
+    />
+    <a-card :bordered="false" :style="{ background: 'rgb(190, 200, 200)'}">
+      <div class="table-operations">
+        <a-button type="primary" size="small" @click="$refs.createDataForm.handleAdd()" v-hasPermi="['system:dict:add']" ghost>
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button
+          type="danger"
+          :disabled="multiple"
+          @click="handleDelete"
+          size="small"
+          v-hasPermi="['system:dict:remove']"
+          ghost>
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          size="small"
+          @click="getList" />
+      </div>
+      <a-table
+        :loading="loading"
+        rowKey="dictCode"
+        size="small"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createDataForm.handleUpdate(record)" v-hasPermi="['system:dict:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" />
+          <a @click="handleDelete(record)" v-hasPermi="['system:dict:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+import { listData, delData, exportData } from '@/api/system/dict/data'
+import CreateDataForm from './CreateDataForm'
+
+export default {
+  name: 'DictData',
+  props: {
+    dictType: {
+      type: String,
+      required: true
+    },
+    dictId: {
+      type: Number,
+      required: true
+    }
+  },
+  components: {
+    CreateDataForm
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '字典编码',
+          dataIndex: 'dictCode',
+          align: 'center'
+        },
+        {
+          title: '字典标签',
+          dataIndex: 'dictLabel',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '字典键值',
+          dataIndex: 'dictValue',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '字典排序',
+          dataIndex: 'dictSort',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          ellipsis: true,
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '15%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.queryParam.dictType = this.dictType
+    this.getList()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    getList () {
+      this.loading = true
+      listData(this.queryParam).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 状态字典翻译
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.dictCode)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const dictCodes = row.dictCode || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中字典编码为' + dictCodes + '的数据',
+        onOk () {
+          return delData(dictCodes)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportData(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
new file mode 100644
index 0000000..6062f06
--- /dev/null
+++ b/src/views/system/menu/index.vue
@@ -0,0 +1,247 @@
+<template>
+  <page-header-wrapper>
+    <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.menuName" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="状态">
+                <a-select placeholder="请选择" v-model="queryParam.status" style="width: 100%" allow-clear>
+                  <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</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" @click="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 操作 -->
+      <div class="table-operations">
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:menu:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+        :menuOptions="menuOptions"
+        :statusOptions="statusOptions"
+        :visibleOptions="visibleOptions"
+        @ok="getList"
+        @select-tree="getTreeselect"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="menuId"
+        :columns="columns"
+        :data-source="list"
+        :pagination="false">
+        <span slot="icon" slot-scope="text">
+          <a-icon :component="allIcon[text + 'Icon']" v-if="allIcon[text + 'Icon']"/>
+          <a-icon :type="text" v-if="!allIcon[text + 'Icon']"/>
+        </span>
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createForm.handleUpdate(record)" v-hasPermi="['system:menu:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:menu:add']" />
+          <a @click="$refs.createForm.handleAdd(record)" v-hasPermi="['system:menu:add']">
+            <a-icon type="plus" />新增
+          </a>
+          <a-divider type="vertical" v-if="record.menuId != 0" v-hasPermi="['system:menu:remove']" />
+          <a @click="handleDelete(record)" v-if="record.menuId != 0" v-hasPermi="['system:menu:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listMenu, delMenu } from '@/api/system/menu'
+import CreateForm from './modules/CreateForm'
+import allIcon from '@/core/icons'
+
+export default {
+  name: 'Menu',
+  components: {
+    CreateForm
+  },
+  data () {
+    return {
+      allIcon,
+      iconVisible: false,
+      list: [],
+      // 部门树选项
+      menuOptions: [],
+      loading: false,
+      // 状态数据字典
+      statusOptions: [],
+      visibleOptions: [],
+      queryParam: {
+        menuName: undefined,
+        visible: undefined
+      },
+      columns: [
+        {
+          title: '菜单名称',
+          dataIndex: 'menuName',
+          ellipsis: true,
+          width: '15%'
+        },
+        {
+          title: '图标',
+          dataIndex: 'icon',
+          scopedSlots: { customRender: 'icon' },
+          width: '5%',
+          align: 'center'
+        },
+        {
+          title: '排序',
+          dataIndex: 'orderNum',
+          width: '5%',
+          align: 'center'
+        },
+        {
+          title: '权限标识',
+          dataIndex: 'perms',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '组件路径',
+          dataIndex: 'component',
+          scopedSlots: { customRender: 'component' },
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          ellipsis: true,
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '20%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+    this.getDicts('sys_show_hide').then(response => {
+      this.visibleOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询菜单列表 */
+    getList () {
+      this.loading = true
+      listMenu(this.queryParam).then(response => {
+          this.list = this.handleTree(response.data, 'menuId')
+          this.loading = false
+        }
+      )
+    },
+    // 字典状态字典翻译
+    visibleFormat (row) {
+      if (row.menuType === 'F') {
+        return ''
+      }
+      return this.selectDictLabel(this.visibleOptions, row.visible)
+    },
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.queryParam = {
+        memuName: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect () {
+      listMenu().then(response => {
+        this.menuOptions = []
+        const menu = { menuId: 0, menuName: '主目录', children: [] }
+        menu.children = this.handleTree(response.data, 'menuId')
+        this.menuOptions.push(menu)
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const menuId = row.menuId
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + menuId + '的数据',
+        onOk () {
+          return delMenu(menuId)
+            .then(() => {
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/menu/modules/CreateForm.vue b/src/views/system/menu/modules/CreateForm.vue
new file mode 100644
index 0000000..3c6cf55
--- /dev/null
+++ b/src/views/system/menu/modules/CreateForm.vue
@@ -0,0 +1,258 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="上级菜单" prop="parentId">
+        <a-tree-select
+          v-model="form.parentId"
+          style="width: 100%"
+          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+          :tree-data="menuOptions"
+          placeholder="请选择"
+          :replaceFields="{children:'children', title:'menuName', key:'menuId', value: 'menuId' }"
+          tree-default-expand-all
+        >
+        </a-tree-select>
+      </a-form-model-item>
+      <a-form-model-item label="菜单类型" prop="menuType">
+        <a-radio-group v-model="form.menuType" button-style="solid">
+          <a-radio-button value="M">目录</a-radio-button>
+          <a-radio-button value="C">菜单</a-radio-button>
+          <a-radio-button value="F">按钮</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="图标" prop="icon" v-if="form.menuType != 'F'">
+        <a-space size="large">
+          <a-icon :component="allIcon[form.icon + 'Icon']" v-if="allIcon[form.icon + 'Icon']"/>
+          <a-icon :type="form.icon" v-if="!allIcon[form.icon + 'Icon']"/>
+          <a-button type="dashed" @click="selectIcon">
+            选择图标
+          </a-button>
+          <a @click="cancelSelectIcon" v-if="iconVisible" style="margin-left: 8px">
+            收起
+            <a-icon type="up"/>
+          </a>
+        </a-space>
+      </a-form-model-item>
+      <a-card :body-style="{padding: '10px 20px'}" :bordered="false" v-if="iconVisible">
+        <icon-selector v-model="form.icon" @change="handleIconChange" :svgIcons="iconList" :allIcon="allIcon"/>
+      </a-card>
+      <a-form-model-item label="菜单名称" prop="menuName">
+        <a-input v-model="form.menuName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="排序" prop="orderNum">
+        <a-input-number v-model="form.orderNum" :min="0" style="width: 100%"/>
+      </a-form-model-item>
+      <a-form-model-item label="是否外链" prop="isFrame" v-if="form.menuType != 'F'">
+        <a-radio-group v-model="form.isFrame" button-style="solid">
+          <a-radio-button value="0">是</a-radio-button>
+          <a-radio-button value="1">否</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="路由地址" prop="path" v-if="form.menuType != 'F'">
+        <a-input v-model="form.path" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="组件路径" prop="component" v-if="form.menuType == 'C'">
+        <a-input v-model="form.component" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="权限标识" prop="perms" v-if="form.menuType != 'M'">
+        <a-input v-model="form.perms" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="是否显示" prop="visible" v-if="form.menuType != 'F'">
+        <a-radio-group v-model="form.visible" button-style="solid">
+          <a-radio-button v-for="(d, index) in visibleOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status" v-if="form.menuType != 'F'">
+        <a-radio-group v-model="form.status" button-style="solid">
+          <a-radio-button v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="是否缓存" prop="isCache" v-if="form.menuType == 'C'">
+        <a-radio-group v-model="form.isCache" button-style="solid">
+          <a-radio-button value="0">缓存</a-radio-button>
+          <a-radio-button value="1">不缓存</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getMenu, addMenu, updateMenu } from '@/api/system/menu'
+import allIcon from '@/core/icons'
+import icons from '@/utils/requireIcons'
+import IconSelector from '@/components/IconSelector'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    statusOptions: {
+      type: Array,
+      required: true
+    },
+    visibleOptions: {
+      type: Array,
+      required: true
+    },
+    menuOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+    IconSelector
+  },
+  data () {
+    return {
+      allIcon,
+      iconVisible: false,
+      iconList: icons,
+      loading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        menuId: undefined,
+        parentId: 0,
+        menuName: undefined,
+        icon: undefined,
+        menuType: 'M',
+        orderNum: undefined,
+        isFrame: '1',
+        isCache: '0',
+        visible: '0',
+        status: '0'
+      },
+      open: false,
+      rules: {
+        menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+        orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
+        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    filterIcons () {
+      this.iconList = icons
+      if (this.name) {
+        this.iconList = this.iconList.filter(item => item.includes(this.name))
+      }
+    },
+    onClose () {
+      this.open = false
+      this.iconVisible = false
+    },
+    hideIconSelect () {
+      this.iconList = icons
+      this.iconVisible = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.iconVisible = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        menuId: undefined,
+        parentId: 0,
+        menuName: undefined,
+        icon: undefined,
+        menuType: 'M',
+        orderNum: undefined,
+        isFrame: '1',
+        isCache: '0',
+        visible: '0',
+        status: '0'
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd (row) {
+      this.reset()
+      this.$emit('select-tree')
+      if (row != null && row.menuId) {
+        this.form.parentId = row.menuId
+      } else {
+        this.form.parentId = 0
+      }
+      this.open = true
+      this.formTitle = '添加菜单'
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row) {
+      this.reset()
+      this.$emit('select-tree')
+      getMenu(row.menuId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.formTitle = '修改菜单'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.menuId !== undefined) {
+            updateMenu(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.iconVisible = false
+              this.$emit('ok')
+            })
+          } else {
+            addMenu(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.iconVisible = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    handleIconChange (icon) {
+      this.iconVisible = false
+      this.form.icon = icon
+    },
+    changeIcon (type) {
+      this.currentSelectedIcon = type
+    },
+    selectIcon () {
+      this.iconVisible = !this.iconVisible
+    },
+    cancelSelectIcon () {
+      this.iconVisible = false
+    }
+  }
+}
+</script>
diff --git a/src/views/system/notice/CreateForm.vue b/src/views/system/notice/CreateForm.vue
new file mode 100644
index 0000000..05f7b32
--- /dev/null
+++ b/src/views/system/notice/CreateForm.vue
@@ -0,0 +1,180 @@
+<template>
+  <page-header-wrapper @back="back">
+    <template v-slot:breadcrumb>
+      {{ formTitle }}
+    </template>
+    <template v-slot:title>
+      {{ formTitle }}
+    </template>
+    <template v-slot:content>
+    </template>
+    <template v-slot:extraContent>
+    </template>
+    <a-card :bordered="false">
+      <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-model-item label="公告标题" prop="noticeTitle">
+          <a-input v-model="form.noticeTitle" placeholder="请输入" />
+        </a-form-model-item>
+        <a-form-model-item label="公告类型" prop="noticeType">
+          <a-select placeholder="请选择" v-model="form.noticeType">
+            <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="状态" prop="status">
+          <a-radio-group v-model="form.status" button-style="solid">
+            <a-radio-button v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item label="内容" prop="noticeContent">
+        </a-form-model-item>
+        <div id="vditor" name="description" ></div>
+        <footer-tool-bar>
+          <a-space>
+            <a-button type="primary" @click="submitForm">
+              发布
+            </a-button>
+            <a-button type="dashed" @click="back">
+              取消
+            </a-button>
+          </a-space>
+        </footer-tool-bar>
+      </a-form-model>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { getNotice, addNotice, updateNotice } from '@/api/system/notice'
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
+
+export default {
+  name: 'CreateForm',
+  components: {
+  },
+  data () {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      loading: false,
+      total: 0,
+      id: undefined,
+      formTitle: '',
+      contentEditor: '',
+      // 状态数据字典
+      statusOptions: [],
+      typeOptions: [],
+      // 表单参数
+      form: {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: '',
+        status: '0'
+      },
+      rules: {
+        noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
+        noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getDicts('sys_notice_status').then(response => {
+      this.statusOptions = response.data
+    })
+    this.getDicts('sys_notice_type').then(response => {
+      this.typeOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  mounted () {
+    this.id = this.$route.params.id
+    this.formTitle = this.$route.params.formTitle
+    this.contentEditor = new Vditor('vditor', {
+      height: 360,
+      toolbarConfig: {
+        pin: true
+      },
+      cache: {
+        enable: false
+      },
+      after: () => {
+        this.contentEditor.setValue(this.form.noticeContent)
+      }
+    })
+    if (this.id) {
+      this.handleUpdate(this.id)
+    } else {
+      this.handleAdd()
+    }
+  },
+  methods: {
+    // 表单重置
+    reset () {
+      this.form = {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: '',
+        status: '0'
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.formTitle = '添加公告'
+    },
+    /** 修改按钮操作 */
+    handleUpdate (id) {
+      this.reset()
+      const noticeId = id
+      getNotice(noticeId).then(response => {
+        this.form = response.data
+        this.formTitle = '修改公告'
+        this.contentEditor.setValue(response.data.noticeContent)
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.form.noticeContent = this.contentEditor.getValue()
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.noticeId !== undefined) {
+            updateNotice(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.back()
+            })
+          } else {
+            addNotice(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.back()
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    back () {
+      this.$router.push('/system/notice')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+#vditor {
+  margin: 0 5% 5% 5%;
+}
+</style>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
new file mode 100644
index 0000000..a969129
--- /dev/null
+++ b/src/views/system/notice/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <page-header-wrapper>
+    <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.noticeTitle" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="操作人员">
+                <a-input v-model="queryParam.createBy" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="公告类型">
+                  <a-select placeholder="请选择" v-model="queryParam.noticeType" style="width: 100%" allow-clear>
+                    <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="primary" @click="handleAdd()" v-hasPermi="['system:notice:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button type="primary" :disabled="single" @click="handleUpdate(undefined, ids)" v-hasPermi="['system:notice:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:notice:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="noticeId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="noticeType" slot-scope="text, record">
+          {{ typeFormat(record) }}
+        </span>
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="handleUpdate(record, undefined)" v-hasPermi="['system:notice:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:notice:remove']" />
+          <a @click="handleDelete(record)" v-hasPermi="['system:notice:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listNotice, delNotice } from '@/api/system/notice'
+
+export default {
+  name: 'Notice',
+  components: {
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      typeOptions: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '公告编号',
+          dataIndex: 'noticeId',
+          align: 'center'
+        },
+        {
+          title: '公告标题',
+          dataIndex: 'noticeTitle',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '公告类型',
+          dataIndex: 'noticeType',
+          scopedSlots: { customRender: 'noticeType' },
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '操作人员',
+          dataIndex: 'createBy',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '15%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_notice_status').then(response => {
+      this.statusOptions = response.data
+    })
+    this.getDicts('sys_notice_type').then(response => {
+      this.typeOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询公告列表 */
+    getList () {
+      this.loading = true
+      listNotice(this.queryParam).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 公告状态字典翻译
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    // 公告类型字典翻译
+    typeFormat (row) {
+      return this.selectDictLabel(this.typeOptions, row.noticeType)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.noticeId)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const noticeIds = row.noticeId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + noticeIds + '的数据',
+        onOk () {
+          return delNotice(noticeIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.$router.push({
+        name: 'NoticeForm',
+        params:
+        {
+          id: undefined,
+          formTitle: '添加公告'
+        }
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      const noticeId = row ? row.noticeId : ids
+      this.$router.push({
+        name: 'NoticeForm',
+        params:
+        {
+          id: noticeId,
+          formTitle: '修改公告'
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
new file mode 100644
index 0000000..d0d8a5f
--- /dev/null
+++ b/src/views/system/post/index.vue
@@ -0,0 +1,292 @@
+<template>
+  <page-header-wrapper>
+    <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.postCode" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="岗位名称">
+                <a-input v-model="queryParam.postName" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="状态">
+                  <a-select placeholder="请选择" v-model="queryParam.status" style="width: 100%" allow-clear>
+                    <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:post:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['system:post:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:post:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['system:post:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+        :statusOptions="statusOptions"
+        @ok="getList"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="postId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="status" slot-scope="text, record">
+          {{ statusFormat(record) }}
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['system:post:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:post:remove']" />
+          <a @click="handleDelete(record)" v-hasPermi="['system:post:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listPost, delPost, exportPost } from '@/api/system/post'
+import CreateForm from './modules/CreateForm'
+
+export default {
+  name: 'Post',
+  components: {
+    CreateForm
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        postCode: undefined,
+        postName: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '岗位编号',
+          dataIndex: 'postId',
+          align: 'center'
+        },
+        {
+          title: '岗位编码',
+          dataIndex: 'postCode',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '岗位名称',
+          dataIndex: 'postName',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '显示顺序',
+          dataIndex: 'postSort',
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          ellipsis: true,
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '15%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList () {
+      this.loading = true
+      listPost(this.queryParam).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 岗位状态字典翻译
+    statusFormat (row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        postCode: undefined,
+        postName: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.postId)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const postIds = row.postId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + postIds + '的数据',
+        onOk () {
+          return delPost(postIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportPost(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/post/modules/CreateForm.vue b/src/views/system/post/modules/CreateForm.vue
new file mode 100644
index 0000000..8f19a9a
--- /dev/null
+++ b/src/views/system/post/modules/CreateForm.vue
@@ -0,0 +1,147 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="岗位名称" prop="postName">
+        <a-input v-model="form.postName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="岗位编码" prop="postCode">
+        <a-input v-model="form.postCode" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="显示顺序" prop="postSort">
+        <a-input-number v-model="form.postSort" :min="0" style="width: 100%"/>
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status">
+        <a-select placeholder="请选择" v-model="form.status">
+          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input v-model="form.remark" placeholder="请输入" type="textarea" allow-clear />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getPost, addPost, updatePost } from '@/api/system/post'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    statusOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        postId: undefined,
+        postCode: undefined,
+        postName: undefined,
+        postSort: 0,
+        status: '0',
+        remark: undefined
+      },
+      open: false,
+      rules: {
+        postName: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
+        postCode: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
+        postSort: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        postId: undefined,
+        postCode: undefined,
+        postName: undefined,
+        postSort: 0,
+        status: '0',
+        remark: undefined
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.open = true
+      this.formTitle = '添加岗位'
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      this.reset()
+      const postId = row ? row.postId : ids
+      getPost(postId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.formTitle = '修改岗位'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.postId !== undefined) {
+            updatePost(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            addPost(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 0000000..d60d187
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,334 @@
+<template>
+  <page-header-wrapper>
+    <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.roleName" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="权限字符">
+                <a-input v-model="queryParam.roleKey" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="状态">
+                  <a-select placeholder="请选择" v-model="queryParam.status" style="width: 100%" allow-clear>
+                    <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="创建时间">
+                  <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
+                </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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:role:add']">
+          <a-icon type="plus" />新增
+        </a-button>
+        <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined,ids)" v-hasPermi="['system:role:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button type="primary" @click="handleExport" v-hasPermi="['system:role:export']">
+          <a-icon type="download" />导出
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 增加修改 -->
+      <create-form
+        ref="createForm"
+        :statusOptions="statusOptions"
+        @ok="getList"
+      />
+
+      <!-- 分配角色数据权限对话框 -->
+      <create-data-scope-form
+        ref="createDataScopeForm"
+        @ok="getList"
+      />
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="roleId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="status" slot-scope="text, record">
+          <a-popconfirm
+            ok-text="是"
+            cancel-text="否"
+            @confirm="confirmHandleStatus(record)"
+            @cancel="cancelHandleStatus(record)"
+          >
+            <span slot="title">确认<b>{{ record.status === '1' ? '启用' : '停用' }}</b>{{ record.roleName }}的角色吗?</span>
+            <a-switch checked-children="开" un-checked-children="关" :checked="record.status == 0" />
+          </a-popconfirm>
+        </span>
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['system:role:edit']">
+            <a-icon type="edit" />修改
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:role:edit']" />
+          <a @click="$refs.createDataScopeForm.handleDataScope(record)" v-hasPermi="['system:role:edit']">
+            <a-icon type="lock" />数据权限
+          </a>
+          <a-divider type="vertical" v-hasPermi="['system:role:remove']" />
+          <a @click="handleDelete(record)" v-hasPermi="['system:role:remove']">
+            <a-icon type="delete" />删除
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listRole, delRole, exportRole, changeRoleStatus } from '@/api/system/role'
+import CreateForm from './modules/CreateForm'
+import CreateDataScopeForm from './modules/CreateDataScopeForm'
+
+export default {
+  name: 'Role',
+  components: {
+    CreateForm,
+    CreateDataScopeForm
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      // 日期范围
+      dateRange: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      columns: [
+        {
+          title: '角色编号',
+          dataIndex: 'roleId',
+          align: 'center'
+        },
+        {
+          title: '角色名',
+          dataIndex: 'roleName',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '权限标识',
+          dataIndex: 'roleKey',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '排序',
+          dataIndex: 'roleSort',
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '20%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList () {
+      this.loading = true
+      listRole(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.roleId)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /* 角色状态修改 */
+    confirmHandleStatus (row) {
+      const text = row.status === '1' ? '启用' : '停用'
+      row.status = row.status === '0' ? '1' : '0'
+      changeRoleStatus(row.roleId, row.status)
+      .then(() => {
+        this.$message.success(
+          text + '成功',
+          3
+        )
+      }).catch(function () {
+        this.$message.error(
+          text + '异常',
+          3
+        )
+      })
+    },
+    cancelHandleStatus (row) {
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const roleIds = row.roleId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + roleIds + '的数据',
+        onOk () {
+          return delRole(roleIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportRole(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/role/modules/CreateDataScopeForm.vue b/src/views/system/role/modules/CreateDataScopeForm.vue
new file mode 100644
index 0000000..224da10
--- /dev/null
+++ b/src/views/system/role/modules/CreateDataScopeForm.vue
@@ -0,0 +1,288 @@
+<template>
+  <a-drawer
+    width="35%"
+    :label-col="4"
+    :wrapper-col="14"
+    :visible="openDataScope"
+    @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form">
+      <a-form-model-item label="角色名称" prop="roleName">
+        <a-input v-model="form.roleName" :disabled="true" />
+      </a-form-model-item>
+      <a-form-model-item label="角色标识" prop="roleKey">
+        <a-input v-model="form.roleKey" :disabled="true" />
+      </a-form-model-item>
+      <a-form-model-item label="权限范围" prop="dataScope">
+        <a-select placeholder="请选择" v-model="form.dataScope" style="width: 100%">
+          <a-select-option v-for="(d, index) in dataScopeOptions" :key="index" :value="d.value">{{ d.label }}</a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="数据权限" v-show="form.dataScope == 2">
+        <a-checkbox @change="handleCheckedTreeExpand($event)">
+          展开/折叠
+        </a-checkbox>
+        <a-checkbox @change="handleCheckedTreeNodeAll($event)">
+          全选/全不选
+        </a-checkbox>
+        <a-checkbox @change="handleCheckedTreeConnect($event)" :checked="form.deptCheckStrictly">
+          父子联动
+        </a-checkbox>
+        <a-tree
+          v-model="deptCheckedKeys"
+          checkable
+          :checkStrictly="!form.deptCheckStrictly"
+          :expanded-keys="deptExpandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :tree-data="deptOptions"
+          @expand="onExpandDept"
+          :replaceFields="defaultProps"
+        />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitDataScope">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getRole, dataScope } from '@/api/system/role'
+import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
+
+export default {
+  name: 'CreateDataScopeForm',
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: '1',
+          label: '全部数据权限'
+        },
+        {
+          value: '2',
+          label: '自定义数据权限'
+        },
+        {
+          value: '3',
+          label: '本部门数据权限'
+        },
+        {
+          value: '4',
+          label: '本部门及以下数据权限'
+        },
+        {
+          value: '5',
+          label: '仅本人数据权限'
+        }
+      ],
+      deptExpandedKeys: [],
+      autoExpandParent: false,
+      deptCheckedKeys: [],
+      halfCheckedKeys: [],
+      // 部门列表
+      deptOptions: [],
+      formTitle: '',
+      // 表单参数
+      form: {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: '0',
+        deptIds: [],
+        deptCheckStrictly: true,
+        remark: undefined
+      },
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      defaultProps: {
+        children: 'children',
+        title: 'label',
+        key: 'id'
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onExpandDept (expandedKeys) {
+      this.deptExpandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    /** 查询部门树结构 */
+    getDeptTreeselect () {
+      deptTreeselect().then(response => {
+        this.deptOptions = response.data
+      })
+    },
+    // 所有部门节点数据
+    getDeptAllCheckedKeys () {
+      // 全选与半选
+      return this.deptCheckedKeys.concat(this.halfCheckedKeys)
+    },
+    getAllDeptNode (nodes) {
+      if (!nodes || nodes.length === 0) {
+        return []
+      }
+      nodes.forEach(node => {
+        this.deptCheckedKeys.push(node.id)
+        return this.getAllDeptNode(node.children)
+      })
+    },
+    // 回显过滤
+    selectNodefilter (nodes, parentIds) {
+      if (!nodes || nodes.length === 0) {
+        return []
+      }
+      nodes.forEach(node => {
+        // 父子关联模式且当前元素有父级
+        const currentIndex = this.deptCheckedKeys.indexOf(node.id)
+        // 当前节点存在,且父节点不存在，则说明父节点应是半选中状态
+        if (currentIndex !== -1) {
+          parentIds.forEach(parentId => {
+            if (this.halfCheckedKeys.indexOf(parentId) === -1) {
+              this.halfCheckedKeys.push(parentId)
+            }
+          })
+          parentIds = []
+        }
+        // 防重
+        const isExist = this.halfCheckedKeys.indexOf(node.id)
+        const isExistParentIds = parentIds.indexOf(node.id)
+        if (isExist === -1 && isExistParentIds === -1 && currentIndex === -1) {
+          parentIds.push(node.id)
+        }
+        return this.selectNodefilter(node.children, parentIds)
+      })
+    },
+    handleCheckedTreeNodeAll (value) {
+      if (value.target.checked) {
+        this.getAllDeptNode(this.deptOptions)
+      } else {
+        this.deptCheckedKeys = []
+        this.halfCheckedKeys = []
+      }
+    },
+    handleCheckedTreeExpand (value) {
+      if (value.target.checked) {
+        const treeList = this.deptOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.deptExpandedKeys.push(treeList[i].id)
+        }
+      } else {
+        this.deptExpandedKeys = []
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect (value) {
+      this.form.deptCheckStrictly = !this.form.deptCheckStrictly
+    },
+    /** 根据角色ID查询部门树结构 */
+    getRoleDeptTreeselect (roleId) {
+      return roleDeptTreeselect(roleId).then(response => {
+        this.deptOptions = response.depts
+        return response
+      })
+    },
+    onCheck (checkedKeys, info) {
+      if (!this.form.deptCheckStrictly) {
+        let currentCheckedKeys = []
+        if (this.deptCheckedKeys.checked) {
+          currentCheckedKeys = currentCheckedKeys.concat(this.deptCheckedKeys.checked)
+        }
+        if (this.deptCheckedKeys.halfChecked) {
+          currentCheckedKeys = currentCheckedKeys.concat(this.deptCheckedKeys.halfChecked)
+        }
+        this.deptCheckedKeys = currentCheckedKeys
+      } else {
+        // 半选节点
+        this.halfCheckedKeys = info.halfCheckedKeys
+        this.deptCheckedKeys = checkedKeys
+      }
+    },
+    onClose () {
+      this.openDataScope = false
+    },
+    // 取消按钮
+    cancel () {
+      this.openDataScope = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.deptExpand = true
+      this.deptNodeAll = false
+      this.deptExpandedKeys = []
+      this.autoExpandParent = false
+      this.deptCheckedKeys = []
+      this.halfCheckedKeys = []
+      this.form = {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: '0',
+        deptIds: [],
+        deptCheckStrictly: true,
+        remark: undefined
+      }
+    },
+    /** 分配数据权限操作 */
+    handleDataScope (row) {
+      this.reset()
+      const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
+      getRole(row.roleId).then(response => {
+        this.form = response.data
+        this.openDataScope = true
+        this.$nextTick(() => {
+          roleDeptTreeselect.then(res => {
+            this.deptCheckedKeys = res.checkedKeys
+            // 过滤回显时的半选中node(父)
+            if (this.form.deptCheckStrictly) {
+              this.selectNodefilter(this.deptOptions, [])
+            }
+          })
+        })
+        this.formTitle = '分配数据权限'
+      })
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function () {
+      if (this.form.roleId !== undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys()
+        dataScope(this.form).then(response => {
+          this.$message.success(
+            '修改成功',
+            3
+          )
+          this.openDataScope = false
+          this.$emit('ok')
+        })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/system/role/modules/CreateForm.vue b/src/views/system/role/modules/CreateForm.vue
new file mode 100644
index 0000000..3725828
--- /dev/null
+++ b/src/views/system/role/modules/CreateForm.vue
@@ -0,0 +1,304 @@
+<template>
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="角色名称" prop="roleName">
+        <a-input v-model="form.roleName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="权限字符" prop="roleKey">
+        <a-input v-model="form.roleKey" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="排序" prop="roleSort">
+        <a-input-number placeholder="请输入" v-model="form.roleSort" :min="0" style="width: 100%"/>
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status">
+        <a-radio-group v-model="form.status" button-style="solid">
+          <a-radio-button v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue" >{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="菜单权限">
+        <a-checkbox @change="handleCheckedTreeExpand($event)">
+          展开/折叠
+        </a-checkbox>
+        <a-checkbox @change="handleCheckedTreeNodeAll($event)">
+          全选/全不选
+        </a-checkbox>
+        <a-checkbox @change="handleCheckedTreeConnect($event)" :checked="form.menuCheckStrictly">
+          父子联动
+        </a-checkbox>
+        <a-tree
+          v-model="menuCheckedKeys"
+          checkable
+          :checkStrictly="!form.menuCheckStrictly"
+          :expanded-keys="menuExpandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :tree-data="menuOptions"
+          @check="onCheck"
+          @expand="onExpandMenu"
+          :replaceFields="defaultProps"
+        />
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input v-model="form.remark" placeholder="请输入" type="textarea" allow-clear />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getRole, addRole, updateRole } from '@/api/system/role'
+import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    statusOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      loading: false,
+      menuExpandedKeys: [],
+      autoExpandParent: false,
+      menuCheckedKeys: [],
+      halfCheckedKeys: [],
+      menuOptions: [],
+      formTitle: '',
+      // 表单参数
+      form: {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: '0',
+        menuIds: [],
+        menuCheckStrictly: true,
+        remark: undefined
+      },
+      open: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      rules: {
+        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+        roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
+        roleSort: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }]
+      },
+      defaultProps: {
+        children: 'children',
+        title: 'label',
+        key: 'id'
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onExpandMenu (expandedKeys) {
+      this.menuExpandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    /** 查询菜单树结构 */
+    getMenuTreeselect () {
+      menuTreeselect().then(response => {
+        this.menuOptions = response.data
+      })
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys () {
+      // 全选与半选
+      return this.menuCheckedKeys.concat(this.halfCheckedKeys)
+    },
+    getAllMenuNode (nodes) {
+      if (!nodes || nodes.length === 0) {
+        return []
+      }
+      nodes.forEach(node => {
+        this.menuCheckedKeys.push(node.id)
+        return this.getAllMenuNode(node.children)
+      })
+    },
+    // 回显过滤
+    selectNodefilter (nodes, parentIds) {
+      if (!nodes || nodes.length === 0) {
+        return []
+      }
+      nodes.forEach(node => {
+        // 父子关联模式且当前元素有父级
+        const currentIndex = this.menuCheckedKeys.indexOf(node.id)
+        // 当前节点存在,且父节点不存在，则说明父节点应是半选中状态
+        if (currentIndex !== -1) {
+          parentIds.forEach(parentId => {
+            if (this.halfCheckedKeys.indexOf(parentId) === -1) {
+              this.halfCheckedKeys.push(parentId)
+            }
+          })
+          parentIds = []
+        }
+        // 防重
+        const isExist = this.halfCheckedKeys.indexOf(node.id)
+        const isExistParentIds = parentIds.indexOf(node.id)
+        if (isExist === -1 && isExistParentIds === -1 && currentIndex === -1) {
+          parentIds.push(node.id)
+        }
+        return this.selectNodefilter(node.children, parentIds)
+      })
+    },
+    handleCheckedTreeNodeAll (value) {
+      if (value.target.checked) {
+        this.getAllMenuNode(this.menuOptions)
+      } else {
+        this.menuCheckedKeys = []
+        this.halfCheckedKeys = []
+      }
+    },
+    handleCheckedTreeExpand (value) {
+      if (value.target.checked) {
+        const treeList = this.menuOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.menuExpandedKeys.push(treeList[i].id)
+        }
+      } else {
+        this.menuExpandedKeys = []
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect (value) {
+      this.form.menuCheckStrictly = !this.form.menuCheckStrictly
+    },
+    /** 根据角色ID查询菜单树结构 */
+    getRoleMenuTreeselect (roleId) {
+      return roleMenuTreeselect(roleId).then(response => {
+        this.menuOptions = response.menus
+        return response
+      })
+    },
+    onCheck (checkedKeys, info) {
+      if (!this.form.menuCheckStrictly) {
+        let currentCheckedKeys = []
+        if (this.menuCheckedKeys.checked) {
+          currentCheckedKeys = currentCheckedKeys.concat(this.menuCheckedKeys.checked)
+        }
+        if (this.menuCheckedKeys.halfChecked) {
+          currentCheckedKeys = currentCheckedKeys.concat(this.menuCheckedKeys.halfChecked)
+        }
+        this.menuCheckedKeys = currentCheckedKeys
+      } else {
+        // 半选节点
+        this.halfCheckedKeys = info.halfCheckedKeys
+        this.menuCheckedKeys = checkedKeys
+      }
+    },
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      if (this.$refs.menu !== undefined) {
+        this.menuCheckedKeys = []
+        this.halfCheckedKeys = []
+      }
+      this.menuExpand = false
+      this.menuNodeAll = false
+      this.menuExpandedKeys = []
+      this.autoExpandParent = false
+      this.menuCheckedKeys = []
+      this.halfCheckedKeys = []
+      this.form = {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: '0',
+        menuIds: [],
+        menuCheckStrictly: true,
+        remark: undefined
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.getMenuTreeselect()
+      this.open = true
+      this.formTitle = '添加角色'
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      this.reset()
+      const roleId = row ? row.roleId : ids
+      const roleMenu = this.getRoleMenuTreeselect(roleId)
+      getRole(roleId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.$nextTick(() => {
+          roleMenu.then(res => {
+            this.menuCheckedKeys = res.checkedKeys
+            // 过滤回显时的半选中node(父)
+            if (this.form.menuCheckStrictly) {
+              this.selectNodefilter(this.menuOptions, [])
+            }
+          })
+        })
+        this.formTitle = '修改角色'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.roleId !== undefined) {
+            this.form.menuIds = this.getMenuAllCheckedKeys()
+            updateRole(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys()
+            addRole(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
new file mode 100644
index 0000000..ee9b986
--- /dev/null
+++ b/src/views/system/user/index.vue
@@ -0,0 +1,384 @@
+<template>
+  <page-header-wrapper>
+    <a-card :bordered="false">
+      <a-row :gutter="24">
+        <a-col :span="4">
+          <!-- 部门树 -->
+          <dept-tree
+            ref="deptTree"
+            :deptOptions="deptOptions"
+            @select="clickDeptNode"
+          />
+        </a-col>
+        <a-col :span="20">
+          <!-- 条件搜索 -->
+          <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.userName" placeholder="请输入" allow-clear />
+                  </a-form-item>
+                </a-col>
+                <a-col :md="8" :sm="24">
+                  <a-form-item label="手机号" >
+                    <a-input v-model="queryParam.phonenumber" placeholder="请输入" allow-clear />
+                  </a-form-item>
+                </a-col>
+                <template v-if="advanced">
+                  <a-col :md="8" :sm="24">
+                    <a-form-item label="状态" prop="status">
+                      <a-select placeholder="请选择状态" style="width: 100%" allow-clear>
+                        <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :md="8" :sm="24">
+                    <a-form-item label="创建时间">
+                      <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear />
+                    </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="handleQuery"><a-icon type="search" />查询</a-button>
+                    <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+            <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['system:user:add']">
+              <a-icon type="plus" />新增
+            </a-button>
+            <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined,ids)" v-hasPermi="['system:user:edit']">
+              <a-icon type="edit" />修改
+            </a-button>
+            <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">
+              <a-icon type="delete" />删除
+            </a-button>
+            <a-button type="dashed" @click="$refs.importExcel.importExcelHandleOpen()" v-hasPermi="['system:user:import']">
+              <a-icon type="import" />导入
+            </a-button>
+            <a-button type="primary" @click="handleExport" v-hasPermi="['system:user:export']">
+              <a-icon type="download" />导出
+            </a-button>
+            <a-button
+              type="dashed"
+              shape="circle"
+              :loading="loading"
+              :style="{float: 'right'}"
+              icon="reload"
+              @click="getList" />
+          </div>
+          <!-- 增加修改 -->
+          <!-- 创建/编辑用户,单独封装了组件 -->
+          <create-form
+            ref="createForm"
+            :deptOptions="deptOptions"
+            :statusOptions="statusOptions"
+            :sexOptions="sexOptions"
+            @ok="getList"
+            @select-tree="getTreeselect"
+          />
+          <!-- 修改密码抽屉 -->
+          <reset-password
+            ref="resetPassword"
+          />
+          <!-- 上传文件 -->
+          <import-excel
+            ref="importExcel"
+            @ok="getList"
+          />
+          <!-- 数据展示 -->
+          <a-table
+            :loading="loading"
+            :size="tableSize"
+            rowKey="userId"
+            :columns="columns"
+            :data-source="list"
+            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            :pagination="false">
+            <span slot="status" slot-scope="text, record">
+              <a-popconfirm
+                ok-text="是"
+                cancel-text="否"
+                @confirm="confirmHandleStatus(record)"
+                @cancel="cancelHandleStatus(record)"
+              >
+                <span slot="title">确认<b>{{ record.status === '1' ? '启用' : '停用' }}</b>{{ record.nickName }}的用户吗?</span>
+                <a-switch checked-children="开" un-checked-children="关" :checked="record.status == 0" />
+              </a-popconfirm>
+            </span>
+            <span slot="createTime" slot-scope="text, record">
+              {{ parseTime(record.createTime) }}
+            </span>
+            <span slot="operation" slot-scope="text, record">
+              <a @click="$refs.createForm.handleUpdate(record,undefined)" v-hasPermi="['system:user:edit']">
+                <a-icon type="edit" />
+                修改
+              </a>
+              <a-divider type="vertical" v-if="record.userId !== 1" v-hasPermi="['system:user:remove']" />
+              <a @click="handleDelete(record)" v-if="record.userId !== 1" v-hasPermi="['system:user:remove']">
+                <a-icon type="delete" />
+                删除
+              </a>
+              <a-divider type="vertical" v-hasPermi="['system:user:resetPwd']" />
+              <a @click="$refs.resetPassword.handleResetPwd(record)" v-hasPermi="['system:user:resetPwd']">
+                <a-icon type="key" />
+                重置
+              </a>
+            </span>
+          </a-table>
+          <!-- 分页 -->
+          <a-pagination
+            class="ant-table-pagination"
+            show-size-changer
+            show-quick-jumper
+            :current="queryParam.pageNum"
+            :total="total"
+            :page-size="queryParam.pageSize"
+            :showTotal="total => `共 ${total} 条`"
+            @showSizeChange="onShowSizeChange"
+            @change="changeSize"
+          />
+        </a-col>
+      </a-row>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+
+import { listUser, delUser, exportUser, changeUserStatus } from '@/api/system/user'
+import { treeselect } from '@/api/system/dept'
+import ResetPassword from './modules/ResetPassword'
+import CreateForm from './modules/CreateForm'
+import ImportExcel from './modules/ImportExcel'
+import DeptTree from './modules/DeptTree'
+
+export default {
+  name: 'User',
+  components: {
+    ResetPassword,
+    CreateForm,
+    ImportExcel,
+    DeptTree
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      loading: false,
+      total: 0,
+      // 状态数据字典
+      statusOptions: [],
+      sexOptions: [],
+      // 部门树选项
+      deptOptions: [{
+        id: 0,
+        label: '',
+        children: []
+      }],
+      // 日期范围
+      dateRange: [],
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      columns: [
+        {
+          title: '用户编号',
+          dataIndex: 'userId',
+          align: 'center'
+        },
+        {
+          title: '用户名',
+          dataIndex: 'userName',
+          align: 'center'
+        },
+        {
+          title: '用户昵称',
+          dataIndex: 'nickName',
+          align: 'center'
+        },
+        {
+          title: '部门',
+          dataIndex: 'dept.deptName',
+          scopedSlots: { customRender: 'dept.deptName' },
+          align: 'center'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getList()
+    this.getTreeselect()
+    this.getDicts('sys_normal_disable').then(response => {
+      this.statusOptions = response.data
+    })
+    this.getDicts('sys_user_sex').then(response => {
+      this.sexOptions = response.data
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList () {
+      this.loading = true
+      listUser(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect () {
+      treeselect().then(response => {
+        this.deptOptions = response.data
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.userId)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    clickDeptNode (deptId) {
+      this.queryParam.deptId = deptId
+      this.getList()
+    },
+    /* 用户状态修改 */
+    confirmHandleStatus (row) {
+      const text = row.status === '1' ? '启用' : '关闭'
+      row.status = row.status === '0' ? '1' : '0'
+      changeUserStatus(row.userId, row.status)
+      .then(() => {
+        this.$message.success(
+          text + '成功',
+          3
+        )
+      }).catch(function () {
+        this.$message.error(
+          text + '异常',
+          3
+        )
+      })
+    },
+    cancelHandleStatus (row) {
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const userIds = row.userId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + userIds + '的数据',
+        onOk () {
+          return delUser(userIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport () {
+      var that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          return exportUser(that.queryParam)
+            .then(response => {
+              that.download(response.msg)
+              that.$message.success(
+                '导出成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/user/modules/CreateForm.vue b/src/views/system/user/modules/CreateForm.vue
new file mode 100644
index 0000000..ec6cc05
--- /dev/null
+++ b/src/views/system/user/modules/CreateForm.vue
@@ -0,0 +1,259 @@
+<template>
+  <!-- 增加修改 -->
+  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
+    <a-divider orientation="left">
+      <b>{{ formTitle }}</b>
+    </a-divider>
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="用户昵称" prop="nickName">
+        <a-input v-model="form.nickName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="部门" prop="deptId">
+        <a-tree-select
+          v-model="form.deptId"
+          style="width: 100%"
+          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+          :tree-data="deptOptions"
+          placeholder="请选择"
+          :replaceFields="replaceFields"
+          tree-default-expand-all
+        >
+        </a-tree-select>
+      </a-form-model-item>
+      <a-form-model-item label="手机号" prop="phonenumber">
+        <a-input v-model="form.phonenumber" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="邮箱" prop="email">
+        <a-input v-model="form.email" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="用户名" prop="userName" v-if="form.userId == undefined">
+        <a-input v-model="form.userName" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="密码)" prop="password" v-if="form.userId == undefined">
+        <a-input-password v-model="form.password" placeholder="请输入" />
+      </a-form-model-item>
+      <a-form-model-item label="性别" prop="sex">
+        <a-radio-group v-model="form.sex" button-style="solid">
+          <a-radio-button v-for="(d, index) in sexOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="状态" prop="status">
+        <a-radio-group v-model="form.status" button-style="solid">
+          <a-radio-button v-for="(d, index) in statusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="岗位" prop="postIds">
+        <a-select
+          mode="multiple"
+          v-model="form.postIds"
+          placeholder="请选择"
+        >
+          <a-select-option v-for="(d, index) in postOptions" :key="index" :value="d.postId">
+            {{ d.postName }}
+          </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="角色" prop="roleIds">
+        <a-select
+          mode="multiple"
+          v-model="form.roleIds"
+          placeholder="请选择"
+        >
+          <a-select-option v-for="(d, index) in roleOptions" :key="index" :value="d.roleId">
+            {{ d.roleName }}
+          </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input v-model="form.remark" placeholder="请输入" type="textarea" allow-clear />
+      </a-form-model-item>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="primary" @click="submitForm">
+            保存
+          </a-button>
+          <a-button type="dashed" @click="cancel">
+            取消
+          </a-button>
+        </a-space>
+      </div>
+    </a-form-model>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getUser, addUser, updateUser } from '@/api/system/user'
+
+export default {
+  name: 'CreateForm',
+  props: {
+    deptOptions: {
+      type: Array,
+      required: true
+    },
+    statusOptions: {
+      type: Array,
+      required: true
+    },
+    sexOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      replaceFields: { children: 'children', title: 'label', key: 'id', value: 'id' },
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 默认密码
+      initPassword: undefined,
+      formTitle: '',
+      // 表单参数
+      form: {
+        userId: undefined,
+        deptId: 0,
+        userName: undefined,
+        nickName: undefined,
+        password: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: '3',
+        status: '0',
+        remark: undefined,
+        postIds: [],
+        roleIds: []
+      },
+      open: false,
+      rules: {
+        userName: [
+          { required: true, message: '用户名不能为空', trigger: 'blur' }
+        ],
+        nickName: [
+          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '部门不能为空', trigger: 'change' }
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '邮箱不能为空', trigger: 'blur' },
+          {
+            type: 'email',
+            message: '请正确填写邮箱地址',
+            trigger: ['blur', 'change']
+          }
+        ],
+        phonenumber: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请正确填写手机号',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+    this.getConfigKey('sys.user.initPassword').then(response => {
+      this.initPassword = response.msg
+    })
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    onClose () {
+      this.open = false
+    },
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        userId: undefined,
+        deptId: undefined,
+        userName: undefined,
+        nickName: undefined,
+        password: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: '3',
+        status: '0',
+        remark: undefined,
+        postIds: [],
+        roleIds: []
+      }
+    },
+     /** 新增按钮操作 */
+    handleAdd () {
+      this.reset()
+      this.$emit('select-tree')
+      getUser().then(response => {
+        this.postOptions = response.posts
+        this.roleOptions = response.roles
+        this.open = true
+        this.formTitle = '新增用户'
+        this.form.password = this.initPassword
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate (row, ids) {
+      this.reset()
+      this.$emit('select-tree')
+      const userId = row ? row.userId : ids
+      getUser(userId).then(response => {
+        this.form = response.data
+        this.postOptions = response.posts
+        this.roleOptions = response.roles
+        this.form.postIds = response.postIds
+        this.form.roleIds = response.roleIds
+        this.open = true
+        this.formTitle = '修改用户'
+        this.form.password = ''
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          if (this.form.userId !== undefined) {
+            updateUser(this.form).then(response => {
+              this.$message.success(
+                '修改成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          } else {
+            addUser(this.form).then(response => {
+              this.$message.success(
+                '新增成功',
+                3
+              )
+              this.open = false
+              this.$emit('ok')
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/user/modules/DeptTree.vue b/src/views/system/user/modules/DeptTree.vue
new file mode 100644
index 0000000..3f3430c
--- /dev/null
+++ b/src/views/system/user/modules/DeptTree.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="filterNode" />
+    <a-tree
+      :expanded-keys="expandedKeys"
+      :auto-expand-parent="autoExpandParent"
+      :tree-data="deptOptions"
+      :replaceFields="replaceFields"
+      @select="handleNodeClick"
+      @expand="onExpand"
+    >
+    </a-tree>
+  </div>
+</template>
+<script>
+
+const getParentKey = (id, tree) => {
+  let parentKey
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i]
+    if (node.children) {
+      if (node.children.some(item => item.id === id)) {
+        parentKey = node.id
+      } else if (getParentKey(id, node.children)) {
+        parentKey = getParentKey(id, node.children)
+      }
+    }
+  }
+  return parentKey
+}
+export default {
+  name: 'DeptTree',
+  props: {
+    deptOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+  },
+  data () {
+    return {
+      replaceFields: { children: 'children', title: 'label', key: 'id', value: 'id' },
+      deptNodes: [],
+      expandedKeys: [],
+      searchValue: '',
+      autoExpandParent: true
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    getAllDeptNode (nodes) {
+      if (!nodes || nodes.length === 0) {
+        return []
+      }
+      nodes.forEach(node => {
+        this.deptNodes.push({ id: node.id, label: node.label })
+        return this.getAllDeptNode(node.children)
+      })
+    },
+    // 筛选节点
+    filterNode (e) {
+      this.getAllDeptNode(this.deptOptions)
+      const value = e.target.value
+      const gData = this.deptOptions
+      const expandedKeys = this.deptNodes
+        .map(item => {
+          if (item.label.indexOf(value) > -1) {
+            return getParentKey(item.id, gData)
+          }
+          return null
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i)
+      Object.assign(this, {
+        expandedKeys: expandedKeys,
+        searchValue: value,
+        autoExpandParent: true
+      })
+      this.deptNodes = []
+    },
+    // 节点单击事件
+    handleNodeClick (keys, event) {
+      this.$emit('select', keys[0])
+    },
+    onExpand (expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    }
+  }
+}
+</script>
diff --git a/src/views/system/user/modules/ImportExcel.vue b/src/views/system/user/modules/ImportExcel.vue
new file mode 100644
index 0000000..28c594f
--- /dev/null
+++ b/src/views/system/user/modules/ImportExcel.vue
@@ -0,0 +1,113 @@
+<template>
+  <a-modal
+    :title="upload.title"
+    :visible="upload.open"
+    @cancel="importExcelHandleCancel"
+  >
+    <a-spin tip="上传中..." :spinning="upload.uploadStatus == 'uploading'">
+      <a-upload-dragger
+        name="file"
+        accept=".xlsx, .xls"
+        :file-list="upload.fileList"
+        :multiple="false"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        @change="importExcelHandleChange"
+      >
+        <p class="ant-upload-drag-icon">
+          <a-icon type="inbox" />
+        </p>
+        <p class="ant-upload-text">
+          请将文件拖拽到此处上传❥(^_-)
+        </p>
+        <p class="ant-upload-hint">
+          支持单个上传，也可以点击后选择文件上传
+        </p>
+      </a-upload-dragger>
+      <a-checkbox @change="handleCheckedUpdateSupport" :checked="upload.updateSupport != 0">
+        是否更新已经存在的用户数据
+      </a-checkbox>
+      <a @click="importTemplate">下载模板</a>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+
+import { importTemplate } from '@/api/system/user'
+import storage from 'store'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+export default {
+  name: 'ImportExcel',
+  props: {
+  },
+  components: {
+  },
+  data () {
+    return {
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: '',
+        uploadStatus: '',
+        fileList: [],
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN) },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/system/user/importData'
+      }
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    /** 导入excel窗体关闭 */
+    importExcelHandleCancel (e) {
+      this.upload.open = false
+      this.upload.fileList = []
+      // 关闭后刷新列表
+      this.$emit('ok')
+    },
+    /** 下载模板操作 */
+    importTemplate () {
+      importTemplate().then(response => {
+        this.download(response.msg)
+      })
+    },
+    /** 导入excel窗体开启 */
+    importExcelHandleOpen (e) {
+      this.upload.open = true
+    },
+    /** 导入excel */
+    importExcelHandleChange (info) {
+      const status = info.file.status
+      this.upload.uploadStatus = status
+      if (status !== 'uploading') {
+      }
+      if (status === 'done') {
+        this.$message.success(`${info.file.name}: ${info.file.response.msg}`)
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name}: ${info.file.response.msg}`)
+      }
+      this.upload.open = false
+      this.upload.fileList = []
+      this.$emit('ok')
+    },
+    handleCheckedUpdateSupport () {
+      this.upload.updateSupport = this.upload.updateSupport === 0 ? 1 : 0
+    }
+  }
+}
+</script>
diff --git a/src/views/system/user/modules/ResetPassword.vue b/src/views/system/user/modules/ResetPassword.vue
new file mode 100644
index 0000000..f8e66bf
--- /dev/null
+++ b/src/views/system/user/modules/ResetPassword.vue
@@ -0,0 +1,110 @@
+<template>
+  <a-modal
+    :title="title"
+    :visible="open"
+    @ok="submitForm"
+    @cancel="cancel"
+  >
+    <a-form-model ref="form" :model="form" :rules="rules">
+      <a-form-model-item label="用户名" prop="userName">
+        <a-input v-model="form.userName" :disabled="true"/>
+      </a-form-model-item>
+      <a-form-model-item has-feedback label="新密码" prop="newPassword">
+        <a-input-password v-model="form.newPassword" placeholder="请输入新密码" />
+      </a-form-model-item>
+      <a-form-model-item has-feedback label="确认密码" prop="confirmPassword">
+        <a-input-password v-model="form.confirmPassword" placeholder="请确认密码" />
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+<script>
+import { resetUserPwd } from '@/api/system/user'
+
+export default {
+  name: 'ResetPassword',
+  props: {
+  },
+  data () {
+    const validateNewPass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入新密码'))
+      } else if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
+        callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
+      } else {
+        if (this.form.confirmPassword !== '') {
+          this.$refs.form.validateField('confirmPassword')
+        }
+        callback()
+      }
+    }
+    const validateConfirmPass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入新密码确认'))
+      } else if (value !== this.form.newPassword) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      title: '重置密码',
+      open: false,
+      childrenDrawer: false,
+      formLayout: 'horizontal',
+      form: {
+        userName: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      rules: {
+        newPassword: [
+          { required: true, validator: validateNewPass, trigger: 'change' }
+        ],
+        confirmPassword: [
+          { required: true, validator: validateConfirmPass, trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 取消按钮
+    cancel () {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset () {
+      this.form = {
+        userId: undefined,
+        userName: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      }
+    },
+    handleResetPwd (row) {
+      this.form = {
+        userId: row.userId,
+        userName: row.userName
+      }
+      this.open = true
+    },
+    /** 重置密码按钮操作 */
+    submitForm: function () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          resetUserPwd(this.form.userId, this.form.newPassword).then(response => {
+            this.$message.success(
+              '重置成功',
+              3
+            )
+            this.open = false
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/build/index.vue b/src/views/tool/build/index.vue
new file mode 100644
index 0000000..3447d0e
--- /dev/null
+++ b/src/views/tool/build/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <a-result title="该功能尚未开发!">
+    <template #icon>
+      <a-icon type="smile" theme="twoTone" />
+    </template>
+    <template #extra>
+      <a-button type="primary" @click="returnIndex">
+        返回首页
+      </a-button>
+    </template>
+  </a-result>
+</template>
+
+<script>
+
+export default {
+  name: 'Build',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  mounted: function () {
+  },
+  methods: {
+    returnIndex () {
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
new file mode 100644
index 0000000..54229e9
--- /dev/null
+++ b/src/views/tool/gen/index.vue
@@ -0,0 +1,327 @@
+<template>
+  <page-header-wrapper>
+    <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.tableName" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="表描述">
+                <a-input v-model="queryParam.tableComment" placeholder="请输入" allow-clear/>
+              </a-form-item>
+            </a-col>
+            <template v-if="advanced">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="创建时间">
+                  <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
+                </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="handleQuery"><a-icon type="search" />查询</a-button>
+                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</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-operations">
+        <a-button type="primary" @click="$refs.importTable.show()" v-hasPermi="['tool:gen:import']">
+          <a-icon type="cloud-upload" />导入
+        </a-button>
+        <a-button type="primary" @click="handleGenTable" v-hasPermi="['tool:gen:code']">
+          <a-icon type="cloud-download" />生成
+        </a-button>
+        <a-button type="primary" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">
+          <a-icon type="edit" />修改
+        </a-button>
+        <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">
+          <a-icon type="delete" />删除
+        </a-button>
+        <a-button
+          type="dashed"
+          shape="circle"
+          :loading="loading"
+          :style="{float: 'right'}"
+          icon="reload"
+          @click="getList" />
+      </div>
+      <!-- 数据展示 -->
+      <a-table
+        :loading="loading"
+        :size="tableSize"
+        rowKey="tableId"
+        :columns="columns"
+        :data-source="list"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false">
+        <span slot="createTime" slot-scope="text, record">
+          {{ parseTime(record.createTime) }}
+        </span>
+        <span slot="updateTime" slot-scope="text, record">
+          {{ parseTime(record.updateTime) }}
+        </span>
+        <span slot="operation" slot-scope="text, record">
+          <a @click="$refs.previewCode.handlePreview(record)" v-hasPermi="['tool:gen:preview']">
+            <a-icon type="eye" />预览
+          </a>
+          <a-divider type="vertical" v-hasPermi="['tool:gen:edit']" />
+          <a @click="handleEditTable(record)" v-hasPermi="['tool:gen:edit']">
+            <a-icon type="edit" />编辑
+          </a>
+          <a-divider type="vertical" v-hasPermi="['tool:gen:remove']" />
+          <a @click="handleDelete(record)" v-hasPermi="['tool:gen:remove']">
+            <a-icon type="delete" />删除
+          </a>
+          <a-divider type="vertical" v-hasPermi="['tool:gen:edit']" />
+          <a @click="handleSynchDb(record)" v-hasPermi="['tool:gen:edit']">
+            <a-icon type="cloud-sync" />同步
+          </a>
+          <a-divider type="vertical" v-hasPermi="['tool:gen:code']" />
+          <a @click="handleGenTable(record)" v-hasPermi="['tool:gen:code']">
+            <a-icon type="cloud-download" />生成代码
+          </a>
+        </span>
+      </a-table>
+      <!-- 分页 -->
+      <a-pagination
+        class="ant-table-pagination"
+        show-size-changer
+        show-quick-jumper
+        :current="queryParam.pageNum"
+        :total="total"
+        :page-size="queryParam.pageSize"
+        :showTotal="total => `共 ${total} 条`"
+        @showSizeChange="onShowSizeChange"
+        @change="changeSize"
+      />
+      <!-- 预览 -->
+      <preview-code ref="previewCode" />
+      <!-- 导入 -->
+      <import-table ref="importTable" @ok="handleOk" />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { delTable, listTable, synchDb, genCode } from '@/api/tool/gen'
+import PreviewCode from './modules/PreviewCode'
+import ImportTable from './modules/ImportTable'
+import { downLoadZip } from '@/utils/zipdownload'
+export default {
+  name: 'Gen',
+  components: {
+    PreviewCode,
+    ImportTable
+  },
+  data () {
+    return {
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      ids: [],
+      // 选中表数组
+      tableNames: [],
+      loading: false,
+      total: 0,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      },
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'tableId',
+          align: 'center'
+        },
+        {
+          title: '表名称',
+          dataIndex: 'tableName',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '表描述',
+          dataIndex: 'tableComment',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '实体',
+          dataIndex: 'className',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          ellipsis: true,
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updateTime',
+          scopedSlots: { customRender: 'updateTime' },
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '33%',
+          scopedSlots: { customRender: 'operation' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    /** 查询表集合 */
+    getList () {
+      this.loading = true
+      listTable(this.addDateRange(this.queryParam, this.dateRange)).then(response => {
+          this.list = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.dateRange = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.ids = this.selectedRows.map(item => item.tableId)
+      this.tableNames = this.selectedRows.map(item => item.tableName)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      var that = this
+      const tableIds = row.tableId || this.ids
+      this.$confirm({
+        title: '确认删除所选中数据?',
+        content: '当前选中编号为' + tableIds + '的数据',
+        onOk () {
+          return delTable(tableIds)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '删除成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 同步数据库操作 */
+    handleSynchDb (row) {
+      var that = this
+      const tableName = row.tableName
+      this.$confirm({
+        title: '确认强制同步数据?',
+        content: '当前同步表名为' + tableName + '的数据',
+        onOk () {
+          return synchDb(tableName)
+            .then(() => {
+              that.onSelectChange([], [])
+              that.getList()
+              that.$message.success(
+                '同步成功',
+                3
+              )
+          })
+        },
+        onCancel () {}
+      })
+    },
+    /** 修改按钮操作 */
+    handleEditTable (row) {
+      const tableId = row.tableId || this.ids[0]
+      this.$router.push({
+        name: 'GenEdit',
+        params:
+        {
+          tableId: tableId
+        }
+      })
+    },
+    /** 生成代码操作 */
+    handleGenTable (row) {
+      const tableNames = row.tableName || this.tableNames
+      if (tableNames === '') {
+        this.$message.error(
+          '请选择要生成的数据',
+          3
+        )
+        return
+      }
+      if (row.genType === '1') {
+        genCode(row.tableName).then(response => {
+          this.msgSuccess('成功生成到自定义路径：' + row.genPath)
+        })
+      } else {
+        downLoadZip('/tool/gen/batchGenCode?tables=' + tableNames, 'ruoyi')
+      }
+    },
+    handleOk () {
+      this.resetQuery()
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/gen/modules/BasicInfoForm.vue b/src/views/tool/gen/modules/BasicInfoForm.vue
new file mode 100644
index 0000000..7d6b637
--- /dev/null
+++ b/src/views/tool/gen/modules/BasicInfoForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <a-form-model
+      ref="basicInfoForm"
+      :model="info"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-row>
+        <a-col :span="12">
+          <a-form-model-item label="表名称" prop="tableName">
+            <a-input placeholder="请输入仓库名称" v-model="info.tableName" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item label="表描述" prop="tableComment">
+            <a-input placeholder="请输入仓库名称" v-model="info.tableComment" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item label="实体类名称" prop="className">
+            <a-input placeholder="请输入仓库名称" v-model="info.className" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item label="作者" prop="functionAuthor">
+            <a-input placeholder="请输入仓库名称" v-model="info.functionAuthor" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="24" :pull="3">
+          <a-form-model-item label="备注">
+            <a-textarea placeholder="textarea with clear icon" allow-clear v-model="info.remark" />
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BasticInfoForm',
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      loading: false,
+      // 模态框数据
+      data: {},
+      rules: {
+        tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
+        tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
+        className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
+        functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }]
+      },
+      labelCol: {
+        xs: { span: 12 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      // 类型数据字典
+      typeOptions: [],
+      // 类型数据字典
+      statusOptions: []
+    }
+  },
+  methods: {
+    // 关闭模态框
+    close () {
+      this.visible = false
+    },
+    // 打开抽屉(由外面的组件调用)
+    show (data) {
+      if (data) {
+        this.data = data
+      }
+      this.visible = true
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/gen/modules/GenEdit.vue b/src/views/tool/gen/modules/GenEdit.vue
new file mode 100644
index 0000000..f903da8
--- /dev/null
+++ b/src/views/tool/gen/modules/GenEdit.vue
@@ -0,0 +1,343 @@
+<template>
+  <page-header-wrapper @back="back">
+    <template v-slot:breadcrumb>
+      {{ formTitle }}
+    </template>
+    <template v-slot:title>
+      {{ formTitle }}
+    </template>
+    <template v-slot:content>
+    </template>
+    <template v-slot:extraContent>
+    </template>
+    <a-result title="请至少选择一个表修改" v-if="tableId == 0">
+      <template #icon>
+        <a-icon type="smile" theme="twoTone" />
+      </template>
+      <template #extra>
+        <a-button type="primary" @click="back">
+          返回生成页
+        </a-button>
+      </template>
+    </a-result>
+    <a-card :bordered="false" v-if="tableId != 0">
+      <a-tabs default-active-key="2">
+        <a-tab-pane key="1" tab="基本信息" force-render>
+          <basic-info-form ref="basicInfo" :info="info" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="字段信息" force-render>
+          <!-- 表格 -->
+          <a-table
+            ref="table"
+            size="small"
+            :columns="columns"
+            :loading="tableLoading"
+            :data-source="tableList"
+            row-key="columnId"
+            :pagination="false"
+          >
+            <!-- 字段描述 -->
+            <template slot="columnComment" slot-scope="text, record">
+              <a-input v-model="record.columnComment"></a-input>
+            </template>
+            <!-- Java类型 -->
+            <template slot="javaType" slot-scope="text, record" style="width:100%">
+              <a-select v-model="record.javaType">
+                <a-select-option value="Long">Long</a-select-option>
+                <a-select-option value="String">String</a-select-option>
+                <a-select-option value="Integer">Integer</a-select-option>
+                <a-select-option value="Double">Double</a-select-option>
+                <a-select-option value="BigDecimal">BigDecimal</a-select-option>
+                <a-select-option value="Date">Date</a-select-option>
+              </a-select>
+            </template>
+            <!-- Java属性 -->
+            <template slot="javaField" slot-scope="text, record">
+              <a-input v-model="record.javaField"></a-input>
+            </template>
+            <!-- 插入 -->
+            <template slot="isInsert" slot-scope="text, record">
+              <a-checkbox v-model="record.isInsert" ></a-checkbox>
+            </template>
+            <!-- 编辑 -->
+            <template slot="isEdit" slot-scope="text, record">
+              <a-checkbox v-model="record.isEdit"></a-checkbox>
+            </template>
+            <!-- 列表 -->
+            <template slot="isList" slot-scope="text, record">
+              <a-checkbox v-model="record.isList"></a-checkbox>
+            </template>
+            <!-- 查询 -->
+            <template slot="isQuery" slot-scope="text, record">
+              <a-checkbox v-model="record.isQuery"></a-checkbox>
+            </template>
+            <!-- 查询方式 -->
+            <template slot="queryType" slot-scope="text, record">
+              <a-select v-model="record.queryType" style="width:100%">
+                <a-select-option value="EQ">=</a-select-option>
+                <a-select-option value="NE">!=</a-select-option>
+                <a-select-option value="GT">></a-select-option>
+                <a-select-option value="GTE">>=</a-select-option>
+                <a-select-option value="LT">&lt;</a-select-option>
+                <a-select-option value="LTE">&lt;=</a-select-option>
+                <a-select-option value="LIKE">LIKE</a-select-option>
+                <a-select-option value="BETWEEN">BETWEEN</a-select-option>
+              </a-select>
+            </template>
+            <!-- 必填 -->
+            <template slot="isRequired" slot-scope="text, record">
+              <a-checkbox v-model="record.isRequired"></a-checkbox>
+            </template>
+            <!-- 显示类型 -->
+            <template slot="htmlType" slot-scope="text, record">
+              <a-select v-model="record.htmlType" style="width:100%">
+                <a-select-option value="input">文本框</a-select-option>
+                <a-select-option value="textarea">文本域</a-select-option>
+                <a-select-option value="select">下拉框</a-select-option>
+                <a-select-option value="radio">单选框</a-select-option>
+                <a-select-option value="checkbox">复选框</a-select-option>
+                <a-select-option value="datetime">日期控件</a-select-option>
+                <a-select-option value="imageUpload">图片上传</a-select-option>
+                <a-select-option value="fileUpload">文件上传</a-select-option>
+                <a-select-option value="editor">富文本控件</a-select-option>
+              </a-select>
+            </template>
+            <!-- 字典类型 -->
+            <template slot="dictType" slot-scope="text, record">
+              <a-select v-model="record.dictType" placeholder="请选择" style="width:100%">
+                <a-select-option
+                  v-for="item in dictOptions"
+                  :key="item.dictType"
+                  :value="item.dictType">
+                  {{ item.dictName }}
+                </a-select-option>
+              </a-select>
+            </template>
+          </a-table>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="生成信息" force-render>
+          <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>
+        </a-tab-pane>
+      </a-tabs>
+      <a-form label-width="100px">
+        <footer-tool-bar>
+          <a-space>
+            <a-button type="primary" @click="submitForm">
+              保存
+            </a-button>
+            <a-button type="dashed" @click="back">
+              取消
+            </a-button>
+          </a-space>
+        </footer-tool-bar>
+      </a-form>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { getGenTable, updateGenTable } from '@/api/tool/gen'
+import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
+import { listMenu as getMenuTreeselect } from '@/api/system/menu'
+import BasicInfoForm from './BasicInfoForm'
+import GenInfoForm from './GenInfoForm'
+export default {
+  name: 'GenEdit',
+  components: {
+    BasicInfoForm,
+    GenInfoForm
+  },
+  data () {
+    return {
+      tableId: 0,
+      formTitle: '修改生成配置',
+      // 表格加载
+      tableLoading: false,
+      // 字典信息
+      dictOptions: [],
+      // 菜单信息
+      menus: [],
+      // 表信息
+      tables: [],
+      // 表详细信息
+      info: {},
+      // 表数据
+      tableList: [],
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'columnId',
+          scopedSlots: { customRender: 'columnId' },
+          align: 'center',
+          width: '5%'
+        },
+        {
+          title: '字段列名',
+          dataIndex: 'columnName',
+          align: 'center',
+          ellipsis: true,
+          width: '10%'
+        },
+        {
+          title: '字段描述',
+          dataIndex: 'columnComment',
+          scopedSlots: { customRender: 'columnComment' },
+          align: 'center',
+          width: '8%'
+        },
+        {
+          title: '物理类型',
+          dataIndex: 'columnType',
+          scopedSlots: { customRender: 'columnType' },
+          align: 'center',
+          ellipsis: true,
+          width: '10%'
+        },
+        {
+          title: 'Java类型',
+          dataIndex: 'javaType',
+          scopedSlots: { customRender: 'javaType' },
+          align: 'center',
+          width: '8%'
+        },
+        {
+          title: 'java属性',
+          dataIndex: 'javaField',
+          scopedSlots: { customRender: 'javaField' },
+          align: 'center',
+          width: '10%'
+        },
+        {
+          title: '插入',
+          dataIndex: 'isInsert',
+          scopedSlots: { customRender: 'isInsert' },
+          align: 'center',
+          width: '3%'
+        },
+        {
+          title: '编辑',
+          dataIndex: 'isEdit',
+          scopedSlots: { customRender: 'isEdit' },
+          align: 'center',
+          width: '3%'
+        },
+        {
+          title: '列表',
+          dataIndex: 'isList',
+          scopedSlots: { customRender: 'isList' },
+          align: 'center',
+          width: '3%'
+        },
+        {
+          title: '查询',
+          dataIndex: 'isQuery',
+          scopedSlots: { customRender: 'isQuery' },
+          align: 'center',
+          width: '3%'
+        },
+        {
+          title: '查询方式',
+          dataIndex: 'queryType',
+          scopedSlots: { customRender: 'queryType' },
+          align: 'center',
+          width: '10%'
+        },
+        {
+          title: '必填',
+          dataIndex: 'isRequired',
+          scopedSlots: { customRender: 'isRequired' },
+          align: 'center',
+          width: '3%'
+        },
+        {
+          title: '显示类型',
+          dataIndex: 'htmlType',
+          scopedSlots: { customRender: 'htmlType' },
+          align: 'center',
+          width: '10%'
+        },
+        {
+          title: '字典类型',
+          dataIndex: 'dictType',
+          scopedSlots: { customRender: 'dictType' },
+          align: 'center',
+          width: '10%'
+        }
+      ]
+    }
+  },
+  created () {
+    const tableId = this.$route.params && this.$route.params.tableId
+    if (tableId) {
+      this.tableId = tableId
+    }
+    this.tableLoading = true
+    if (this.tableId) {
+      // 获取表详细信息
+      getGenTable(this.tableId).then(res => {
+        const tableList = res.data.rows
+        tableList.forEach(e => {
+          e.isInsert = e.isInsert === '1'
+          e.isEdit = e.isEdit === '1'
+          e.isList = e.isList === '1'
+          e.isQuery = e.isQuery === '1'
+          e.isRequired = e.isRequired === '1'
+        })
+        this.tableList = tableList
+        this.info = res.data.info
+        this.tables = res.data.tables
+        this.tableLoading = false
+      })
+      /** 查询字典下拉列表 */
+      getDictOptionselect().then(response => {
+        this.dictOptions = response.data
+      })
+      /** 查询菜单下拉列表 */
+      getMenuTreeselect().then(response => {
+        this.menus = this.handleTree(response.data, 'menuId')
+      })
+    }
+  },
+  methods: {
+      /** 提交按钮 */
+    submitForm () {
+      const basicForm = this.$refs.basicInfo.info
+      const genForm = this.$refs.genInfo.info
+
+      if (basicForm && genForm) {
+        const genTable = Object.assign({}, basicForm, genForm)
+        const tableList = this.tableList
+        tableList.forEach(e => {
+          e.isInsert = e.isInsert ? '1' : '0'
+          e.isEdit = e.isEdit ? '1' : '0'
+          e.isList = e.isList ? '1' : '0'
+          e.isQuery = e.isQuery ? '1' : '0'
+          e.isRequired = e.isRequired ? '1' : '0'
+        })
+        genTable.columns = tableList
+        genTable.params = {
+          treeCode: genTable.treeCode,
+          treeName: genTable.treeName,
+          treeParentCode: genTable.treeParentCode,
+          parentMenuId: genTable.parentMenuId
+        }
+        updateGenTable(genTable).then(res => {
+          if (res.code === 200) {
+            this.$message.success(res.msg)
+            this.back()
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      } else {
+        this.msgError('表单校验未通过，请重新检查提交内容')
+      }
+    },
+    /** 关闭按钮 */
+    back () {
+      this.$router.push('/tool/gen')
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/gen/modules/GenInfoForm.vue b/src/views/tool/gen/modules/GenInfoForm.vue
new file mode 100644
index 0000000..3eff7d5
--- /dev/null
+++ b/src/views/tool/gen/modules/GenInfoForm.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <a-form-model
+      ref="genInfoForm"
+      :model="info"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-row>
+        <a-col :span="12">
+          <a-form-model-item prop="tplCategory">
+            <span slot="label">
+              生成模板
+            </span>
+            <a-select v-model="info.tplCategory" placeholder="请选择" @change="tplSelectChange">
+              <a-select-option value="crud">单表（增删改查）</a-select-option>
+              <a-select-option value="tree">树表（增删改查）</a-select-option>
+              <a-select-option value="sub">主子表（增删改查）</a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item prop="packageName">
+            <span slot="label">
+              生成包路径
+              <a-tooltip>
+                <template slot="title">
+                  生成在哪个java包下，例如 com.ruoyi.system
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-input placeholder="请输入生成包路径" v-model="info.packageName" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item prop="moduleName">
+            <span slot="label">
+              生成模块名
+              <a-tooltip>
+                <template slot="title">
+                  可理解为子系统名，例如 system
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-input placeholder="请输入生成模块名" v-model="info.moduleName" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item prop="businessName">
+            <span slot="label">
+              生成业务名
+              <a-tooltip>
+                <template slot="title">
+                  可理解为功能英文名，例如 user
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-input placeholder="请输入生成业务名" v-model="info.businessName" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item prop="functionName">
+            <span slot="label">
+              生成功能名
+              <a-tooltip>
+                <template slot="title">
+                  用作类描述，例如 用户
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-input placeholder="请输入生成功能名" v-model="info.functionName" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              上级菜单
+              <a-tooltip>
+                <template slot="title">
+                  分配到指定菜单下，例如 系统管理
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-tree-select
+              v-model="info.parentMenuId"
+              :tree-data="menus"
+              style="width: 100%"
+              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+              placeholder="请选择系统菜单"
+              :replaceFields="treeReplaceFields"
+            />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              生成代码方式
+              <a-tooltip>
+                <template slot="title">
+                  默认为zip压缩包下载，也可以自定义生成路径
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-radio-group v-model="info.genType">
+              <a-radio :value="'0'">zip压缩包</a-radio>
+              <a-radio :value="'1'">自定义路径</a-radio>
+            </a-radio-group>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+        </a-col>
+        <a-col :span="24" v-if="info.genType == '1'">
+          <a-form-model-item :labelCol="{ xs: { span: 6 },sm: { span: 3 } }" :wrapperCol="{ xs: { span: 42 },sm: { span: 21 } }">
+            <span slot="label">
+              自定义路径
+              <a-tooltip>
+                <template slot="title">
+                  填写磁盘绝对路径，若不填写，则生成到当前Web项目下
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-input v-model="info.genPath">
+              <a-dropdown slot="suffix">
+                <a-button style="width:100%;"> 最近路径快速选择 <a-icon type="down" /> </a-button>
+                <a-menu slot="overlay">
+                  <a-menu-item key="1" @click.native="info.genPath = '/'"> <a-icon type="user" />1st menu item </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </a-input>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row v-show="info.tplCategory == 'tree'">
+        <a-divider orientation="left">
+          其他信息
+        </a-divider>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              树编码字段
+              <a-tooltip>
+                <template slot="title">
+                  树显示的编码字段名， 如：dept_id
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-select v-model="info.treeCode" placeholder="请选择">
+              <a-select-option v-for="(item, index) in info.columns" :key="index" :value="item.columnName" >
+                {{ item.columnName + '：' + item.columnComment }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              树父编码字段
+              <a-tooltip>
+                <template slot="title">
+                  树显示的父编码字段名， 如：parent_Id
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-select v-model="info.treeParentCode" placeholder="请选择">
+              <a-select-option v-for="(item, index) in info.columns" :key="index" :value="item.columnName" >
+                {{ item.columnName + '：' + item.columnComment }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              树名称字段
+              <a-tooltip>
+                <template slot="title">
+                  树节点的显示名称字段名， 如：dept_name
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-select v-model="info.treeName" placeholder="请选择">
+              <a-select-option v-for="(item, index) in info.columns" :key="index" :value="item.columnName" >
+                {{ item.columnName + '：' + item.columnComment }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <!-- 主子表 -->
+      <a-row v-show="info.tplCategory == 'sub'">
+        <a-divider orientation="left">
+          关联信息
+        </a-divider>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              关联子表的表名
+              <a-tooltip>
+                <template slot="title">
+                  关联子表的表名， 如：sys_user
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+              <a-select-option v-for="(item, index) in tables" :key="index" :value="item.tableName" >
+                {{ item.tableName + '：' + item.tableComment }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item>
+            <span slot="label">
+              子表关联的外键名
+              <a-tooltip>
+                <template slot="title">
+                  子表关联的外键名， 如：user_id
+                </template>
+                <a-icon type="question-circle-o" />
+              </a-tooltip>
+            </span>
+            <a-select v-model="info.subTableFkName" placeholder="请选择">
+              <a-select-option v-for="(item, index) in subColumns" :key="index" :value="item.columnName" >
+                {{ item.columnName + '：' + item.columnComment }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+<script>
+export default {
+  name: 'GenInfoForm',
+  props: {
+    info: {
+      type: Object,
+      default: null
+    },
+    tables: {
+      type: Array,
+      default: null
+    },
+    menus: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      loading: false,
+      // 模态框数据
+      data: {},
+      subColumns: [],
+      rules: {
+        tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
+        packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
+        moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
+        businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
+        functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }]
+      },
+      labelCol: {
+        xs: { span: 12 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      // 类型数据字典
+      typeOptions: [],
+      // 类型数据字典
+      statusOptions: [],
+      treeReplaceFields: {
+        children: 'children',
+        title: 'menuName',
+        key: 'menuId',
+        value: 'menuId'
+      }
+    }
+  },
+  watch: {
+    'info.subTableName': function (val) {
+      this.setSubTableColumns(val)
+    }
+  },
+  methods: {
+    // 关闭模态框
+    close () {
+      this.visible = false
+    },
+    // 打开抽屉(由外面的组件调用)
+    show (data) {
+      if (data) {
+        this.data = data
+      }
+      this.visible = true
+    },
+    /** 选择子表名触发 */
+    subSelectChange () {
+      this.info.subTableFkName = ''
+    },
+    /** 选择生成模板触发 */
+    tplSelectChange (value) {
+      if (value !== 'sub') {
+        this.info.subTableName = ''
+        this.info.subTableFkName = ''
+      }
+    },
+    /** 设置关联外键 */
+    setSubTableColumns (value) {
+      for (var item in this.tables) {
+        const name = this.tables[item].tableName
+        if (value === name) {
+          this.subColumns = this.tables[item].columns
+          break
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/gen/modules/ImportTable.vue b/src/views/tool/gen/modules/ImportTable.vue
new file mode 100644
index 0000000..84d0131
--- /dev/null
+++ b/src/views/tool/gen/modules/ImportTable.vue
@@ -0,0 +1,197 @@
+<template>
+  <a-modal
+    ref="createModal"
+    :title="'导入代码'"
+    :width="900"
+    :visible="visible"
+    @cancel="close"
+    @ok="confirm"
+    :confirmLoading="confirmLoading"
+  >
+    <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.tableName" placeholder="请输入" allow-clear/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="表描述">
+              <a-input v-model="queryParam.tableComment" placeholder="请输入" allow-clear/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button @click="handleQuery" type="primary">查询</a-button>
+              <a-button @click="resetQuery" style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="page-header-content">
+      <a-card :bordered="false" class="content">
+        <a-table
+          :loading="loading"
+          :size="tableSize"
+          rowKey="tableName"
+          :columns="columns"
+          :data-source="list"
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :scroll="{ y: tableHeight }"
+          :pagination="false">
+          <span slot="createTime" slot-scope="text, record">
+            {{ parseTime(record.createTime) }}
+          </span>
+          <span slot="updateTime" slot-scope="text, record">
+            {{ parseTime(record.updateTime) }}
+          </span>
+        </a-table>
+        <!-- 分页 -->
+        <a-pagination
+          class="ant-table-pagination"
+          show-size-changer
+          show-quick-jumper
+          :current="queryParam.pageNum"
+          :total="total"
+          :page-size="queryParam.pageSize"
+          :showTotal="total => `共 ${total} 条`"
+          @showSizeChange="onShowSizeChange"
+          @change="changeSize"
+        />
+      </a-card>
+    </div>
+  </a-modal>
+</template>
+<script>
+import { listDbTable, importTable } from '@/api/tool/gen'
+export default {
+  name: 'ImportTable',
+  props: {
+  },
+  data () {
+    return {
+      // 表格数据
+      list: [],
+      selectedRowKeys: [],
+      selectedRows: [],
+        // 表格的高度
+      tableHeight: document.documentElement.scrollHeight - 500 + 'px',
+      // 选中表数组
+      tableNames: [],
+      loading: false,
+      total: 0,
+      // 当前控件配置:
+      confirmLoading: false,
+      visible: false,
+      // 查询参数
+      queryParam: {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      },
+      // 表格属性
+      columns: [
+        {
+          title: '表名称',
+          dataIndex: 'tableName',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '表描述',
+          dataIndex: 'tableComment',
+          ellipsis: true,
+          align: 'center'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'createTime' },
+          align: 'center'
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updateTime',
+          scopedSlots: { customRender: 'updateTime' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    // 查询表数据
+    getList () {
+      this.loading = true
+      listDbTable(this.queryParam).then(res => {
+        if (res.code === 200) {
+          this.list = res.rows
+          this.total = res.total
+          this.loading = false
+        }
+      })
+    },
+    // 关闭模态框
+    close () {
+      this.visible = false
+      this.selectedRowKeys = []
+      this.selectedRows = []
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      }
+    },
+    // 打开抽屉(由外面的组件调用)
+    show () {
+      this.visible = true
+      this.getList()
+    },
+    // 确认导入
+    confirm () {
+      importTable({ tables: this.tableNames.join(',') }).then(res => {
+        this.$message.success(res.msg)
+        this.visible = false
+        this.$emit('ok')
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParam.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.queryParam = {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      }
+      this.handleQuery()
+    },
+    onShowSizeChange (current, pageSize) {
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    changeSize (current, pageSize) {
+      this.queryParam.pageNum = current
+      this.queryParam.pageSize = pageSize
+      this.getList()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.tableNames = this.selectedRows.map(item => item.tableName)
+      this.single = selectedRowKeys.length !== 1
+      this.multiple = !selectedRowKeys.length
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/gen/modules/PreviewCode.vue b/src/views/tool/gen/modules/PreviewCode.vue
new file mode 100644
index 0000000..3cfb4b3
--- /dev/null
+++ b/src/views/tool/gen/modules/PreviewCode.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <a-drawer
+      title="代码预览"
+      :width="800"
+      :visible="visible"
+      :confirmLoading="loading"
+      @close="close"
+    >
+      <a-tabs v-if="isShowCodeTabs">
+        <a-tab-pane
+          v-for="(value, key) in previewData"
+          :tab="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :key="key"
+        >
+          <div id="codeView" v-highlight>
+            <pre><code v-text="value"></code></pre>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+      <div class="bottom-control">
+        <a-space>
+          <a-button type="dashed" @click="close">
+            关闭
+          </a-button>
+        </a-space>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+<script>
+import { previewTable } from '@/api/tool/gen'
+export default {
+  data () {
+    return {
+      isShowCodeTabs: false,
+      previewData: {},
+      visible: false,
+      loading: false,
+      // 模态框数据
+      data: {},
+      labelCol: {
+        xs: { span: 12, push: 1 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24, push: 1 },
+        sm: { span: 18 }
+      }
+    }
+  },
+  created () {},
+  methods: {
+    // 关闭模态框
+    close () {
+      this.visible = false
+    },
+    // 打开抽屉(由外面的组件调用)
+    handlePreview (data) {
+      if (data) {
+        const tableId = data.tableId
+        previewTable(tableId).then(response => {
+            this.previewData = response.data
+            this.isShowCodeTabs = true
+        })
+      }
+      this.visible = true
+    }
+  }
+}
+</script>
diff --git a/src/views/tool/swagger/index.vue b/src/views/tool/swagger/index.vue
new file mode 100644
index 0000000..0e302f6
--- /dev/null
+++ b/src/views/tool/swagger/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <a-spin :spinning="loading" tip="加载中...">
+    <div :style="'height:'+ height">
+      <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
+    </div>
+  </a-spin>
+</template>
+
+<script>
+
+export default {
+  name: 'Swagger',
+  components: {
+  },
+  data () {
+    return {
+      src: process.env.VUE_APP_BASE_API + '/swagger-ui.html',
+      height: document.documentElement.clientHeight - 94.5 + 'px;',
+      loading: true
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  mounted: function () {
+    setTimeout(() => {
+      this.loading = false
+    }, 230)
+    const that = this
+    window.onresize = function temp () {
+      that.height = document.documentElement.clientHeight - 94.5 + 'px;'
+    }
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
new file mode 100644
index 0000000..e8e9231
--- /dev/null
+++ b/src/views/user/Login.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="main">
+    <a-form-model id="formLogin" ref="form" class="user-layout-login" :model="form" :rules="rules">
+      <a-alert
+        v-if="isLoginError"
+        type="error"
+        showIcon
+        style="margin-bottom: 24px;"
+        :message="loginErrorInfo"
+        closable
+        :after-close="handleCloseLoginError"
+      />
+      <div class="login-title">
+        算力云后台管理系统
+      </div>
+      <a-form-model-item prop="username">
+        <a-input v-model="form.username" size="large" placeholder="账户: admin" >
+          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+        </a-input>
+      </a-form-model-item>
+      <a-form-model-item prop="password">
+        <a-input-password v-model="form.password" size="large" placeholder="密码: admin123">
+          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+        </a-input-password>
+      </a-form-model-item>
+      <a-row :gutter="16">
+        <a-col class="gutter-row" :span="16">
+          <a-form-model-item prop="code">
+            <a-input v-model="form.code" size="large" type="text" autocomplete="off" placeholder="验证码">
+              <a-icon slot="prefix" type="security-scan" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <img class="getCaptcha" :src="codeUrl" @click="getCode">
+        </a-col>
+      </a-row>
+      <a-form-item>
+        <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">记住密码</a-checkbox>
+      </a-form-item>
+      <a-form-item style="margin-top:24px">
+        <a-button
+          size="large"
+          type="primary"
+          htmlType="submit"
+          class="login-button"
+          :loading="logining"
+          :disabled="logining"
+          @click="handleSubmit"
+        >确定</a-button>
+      </a-form-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+// import md5 from 'md5'
+import { mapActions } from 'vuex'
+import { timeFix } from '@/utils/util'
+import { getCodeImg } from '@/api/login'
+
+export default {
+  components: {
+  },
+  data () {
+    return {
+      codeUrl: '',
+      isLoginError: false,
+      loginErrorInfo: '',
+      form: {
+        username: 'admin',
+        password: 'admin123',
+        code: undefined,
+        uuid: ''
+      },
+      rules: {
+        username: [{ required: true, message: '请输入帐户名', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+      },
+      logining: false
+    }
+  },
+  created () {
+    this.getCode()
+  },
+  methods: {
+    getCode () {
+      getCodeImg().then(res => {
+        this.codeUrl = 'data:image/gif;base64,' + res.img
+        this.form.uuid = res.uuid
+      })
+    },
+    ...mapActions(['Login', 'Logout']),
+    handleSubmit () {
+      this.logining = true
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.Login(this.form)
+            .then((res) => this.loginSuccess(res))
+            .catch(err => this.requestFailed(err))
+            .finally(() => {
+              this.logining = false
+            })
+        } else {
+          setTimeout(() => {
+            this.logining = false
+          }, 600)
+        }
+      })
+    },
+    loginSuccess (res) {
+      this.$router.push({ path: '/' })
+      // 延迟 1 秒显示欢迎信息
+      setTimeout(() => {
+        this.$notification.success({
+          message: '欢迎',
+          description: `${timeFix()}，欢迎回来`
+        })
+      }, 1000)
+      this.handleCloseLoginError()
+    },
+    requestFailed (error) {
+      console.log(error.response.data)
+      this.isLoginError = true
+      this.loginErrorInfo = error.response.data.msg
+      this.form.code = undefined
+      this.getCode()
+    },
+    handleCloseLoginError () {
+      this.isLoginError = false
+      this.loginErrorInfo = ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.main{
+  background-color: #ffffff;
+  padding: 20px;
+  border: 1px solid #ffffff;
+  border-radius: 10px;
+  width: 25%;
+}
+.login-title{
+  height: 40px;
+  text-align: center;
+  font-weight: bold;
+  color: black;
+  font-size: 15px;
+}
+.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>
diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js
new file mode 100644
index 0000000..958d51b
--- /dev/null
+++ b/tests/unit/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..75342e1
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,143 @@
+const path = require('path')
+const webpack = require('webpack')
+const GitRevisionPlugin = require('git-revision-webpack-plugin')
+const GitRevision = new GitRevisionPlugin()
+const buildDate = JSON.stringify(new Date().toLocaleString())
+const createThemeColorReplacerPlugin = require('./config/plugin.config')
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const productionGzipExtensions = ['js', 'css']
+
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+
+// check Git
+function getGitHash () {
+  try {
+    return GitRevision.version()
+  } catch (e) {}
+  return 'unknown'
+}
+
+const isProd = process.env.NODE_ENV === 'production'
+
+const assetsCDN = {
+  // webpack build externals
+  externals: {
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    vuex: 'Vuex',
+    axios: 'axios'
+  },
+  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'
+  ]
+}
+
+// vue.config.js
+const vueConfig = {
+  configureWebpack: {
+    // webpack plugins
+    plugins: [
+      // Ignore all locale files of moment.js
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.DefinePlugin({
+        APP_VERSION: `"${require('./package.json').version}"`,
+        GIT_HASH: JSON.stringify(getGitHash()),
+        BUILD_DATE: buildDate
+      }),
+      // 配置compression-webpack-plugin压缩
+      new CompressionWebpackPlugin({
+        algorithm: 'gzip',
+        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+        threshold: 10240,
+        minRatio: 0.8
+      })
+    ],
+    // if prod, add externals
+    externals: isProd ? assetsCDN.externals : {}
+  },
+
+  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': '2px'
+        },
+        // 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: {
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        // target: `https://ruoyi.setworld.net`,
+        target: `http://127.0.0.1:8080`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    }
+  },
+
+  // 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
diff --git a/webstorm.config.js b/webstorm.config.js
new file mode 100644
index 0000000..9117455
--- /dev/null
+++ b/webstorm.config.js
@@ -0,0 +1,3 @@
+'use strict'
+const webpackConfig = require('@vue/cli-service/webpack.config.js')
+module.exports = webpackConfig