diff --git a/package.json b/package.json
index ceb4be080059effe5038cdeabe137dcd18bf48bb..8c470e890ca99076e7377e2a42e6a05db0a6e655 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "new": "plop"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "element-ui": "2.13.0",
     "js-cookie": "2.2.0",
diff --git a/src/api/admin/resource/module.js b/src/api/admin/resource/resource.js
similarity index 60%
rename from src/api/admin/resource/module.js
rename to src/api/admin/resource/resource.js
index daafa114f161ffe24412403240e30152ba9533c5..26284680a8b421e3d2dbb05986d8c0cbf15349d2 100644
--- a/src/api/admin/resource/module.js
+++ b/src/api/admin/resource/resource.js
@@ -7,7 +7,7 @@ import axios from '_l/api.request'
  */
 export const addResource = (module) => {
   return axios.request({
-    url: '/system-center/system/resources/save',
+    url: '/system-center/system/resource/save',
     method: 'post',
     data: module
   })
@@ -20,7 +20,7 @@ export const addResource = (module) => {
  */
 export const updateResource = (module) => {
   return axios.request({
-    url: '/system-center/system/resources/update',
+    url: '/system-center/system/resource/update',
     method: 'post',
     data: module
   })
@@ -33,7 +33,7 @@ export const updateResource = (module) => {
  */
 export const deleteResourceById = (moduleId) => {
   return axios.request({
-    url: '/system-center/system/resources/delete',
+    url: '/system-center/system/resource/delete',
     method: 'post',
     params: {
       id: moduleId
@@ -41,38 +41,47 @@ export const deleteResourceById = (moduleId) => {
   })
 }
 
+
 /**
- * 批量删除模块
- * @param moduleIds
- * @returns {ClientHttp2Stream | * | AxiosPromise<any> | ClientRequest | void}
+ * 获取模块tree-table数据
+ * @returns {*|AxiosPromise<any>|ClientRequest|void|ClientHttp2Stream}
  */
-export const deleteBatchResourceById = (moduleIds) => {
+export const getResourceTreeList = () => {
   return axios.request({
-    url: '/system-center/system/resources/deleteBatch',
-    method: 'post',
-    data: moduleIds
+    url: '/system-center/system/resource/getResourceTreeList'
   })
 }
 
 /**
- * 获取模块tree-table数据
- * @returns {*|AxiosPromise<any>|ClientRequest|void|ClientHttp2Stream}
+ * 获取菜单列表
+ * @returns {AxiosPromise}
  */
-export const getResourceTreeTableList = () => {
+export const getMenuList = () => {
   return axios.request({
-    url: '/system-center/system/resources/getResourceTreeTableList'
+    url: '/system-center/system/resource/getMenuList'
   })
 }
 
+
 /**
  * 获取tree列表数据
  * @returns {*|AxiosPromise<any>|ClientRequest|void|ClientHttp2Stream}
  */
-export const getResourceTreeList = (roleId) => {
+export const getResourceIdListByRoleId = (roleId) => {
   return axios.request({
-    url: '/system-center/system/resources/getResourceTreeListByRoleId',
+    url: '/system-center/system/resource/getResourceIdListByRoleId',
     params: {
       roleId: roleId
     }
   })
 }
+
+/**
+ * 根据登录人获取目录和菜单路由
+ * @returns {AxiosPromise}
+ */
+export const getRouterList = () => {
+  return axios.request({
+    url: '/system-center/system/resource/getRouterList'
+  })
+}
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0ec9fa1a425324ae0bc974bbb0ddb343ff40632
--- /dev/null
+++ b/src/components/IconSelect/index.vue
@@ -0,0 +1,68 @@
+<!-- @author zhengjie -->
+<template>
+  <div class="icon-body">
+    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
+      <i slot="suffix" class="el-icon-search el-input__icon" />
+    </el-input>
+    <div class="icon-list">
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
+        <span>{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import icons from './requireIcons'
+export default {
+  name: 'IconSelect',
+  data() {
+    return {
+      name: '',
+      iconList: icons
+    }
+  },
+  methods: {
+    filterIcons() {
+      this.iconList = icons
+      if (this.name) {
+        this.iconList = this.iconList.filter(item => item.includes(this.name))
+      }
+    },
+    selectedIcon(name) {
+      this.$emit('selected', name)
+      document.body.click()
+    },
+    reset() {
+      this.name = ''
+      this.iconList = icons
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .icon-body {
+    width: 100%;
+    padding: 10px;
+    .icon-list {
+      height: 200px;
+      overflow-y: scroll;
+      div {
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: -5px;
+        cursor: pointer;
+        width: 33%;
+        float: left;
+      }
+      span {
+        display: inline-block;
+        vertical-align: -0.15em;
+        fill: currentColor;
+        overflow: hidden;
+      }
+    }
+  }
+</style>
diff --git a/src/components/IconSelect/requireIcons.js b/src/components/IconSelect/requireIcons.js
new file mode 100644
index 0000000000000000000000000000000000000000..83a339550e2dd74fb33942e00f520079cf274088
--- /dev/null
+++ b/src/components/IconSelect/requireIcons.js
@@ -0,0 +1,11 @@
+
+const req = require.context('../../icons/svg', 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/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
deleted file mode 100644
index ef21f195e9199d5d7abc873fc9bd03d9ce273c1d..0000000000000000000000000000000000000000
--- a/src/components/TreeSelect/index.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">
-    <el-input
-      class="selectInput"
-      :placeholder="placeholder"
-      v-model="filterText">
-    </el-input>
-
-    <el-option :value="valueTitle" :label="valueTitle" class="options">
-      <el-tree  id="tree-option"
-                ref="selectTree"
-                :accordion="accordion"
-                :data="options"
-                :props="props"
-                :node-key="props.value"
-                :default-expanded-keys="defaultExpandedKey"
-                :filter-node-method="filterNode"
-                @node-click="handleNodeClick">
-      </el-tree>
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  name: "tree-select",
-  props:{
-    /* 配置项 */
-    props:{
-      type: Object,
-      default:()=>{
-        return {
-          value:'id',             // ID字段名
-          label: 'title',         // 显示名称
-          children: 'children'    // 子级字段名
-        }
-      }
-    },
-    /* 选项列表数据(树形结构的对象数组) */
-    options:{
-      type: Array,
-      default: ()=>{ return [] }
-    },
-    /* 初始值 */
-    value:{
-      type: String,
-      default: ()=>{ return null }
-    },
-    /* 可清空选项 */
-    clearable:{
-      type:Boolean,
-      default:()=>{ return true }
-    },
-    /* 自动收起 */
-    accordion:{
-      type:Boolean,
-      default:()=>{ return false }
-    },
-    placeholder:{
-      type:String,
-      default:()=>{return "检索关键字"}
-    }
-  },
-  data() {
-    return {
-      filterText: '',
-      valueId: this.value,    // 初始值
-      valueTitle:'',
-      defaultExpandedKey:[]
-    }
-  },
-  mounted(){
-    this.initHandle()
-  },
-  methods: {
-    // 初始化值
-    initHandle(){
-      if(this.valueId){
-        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
-        this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
-        this.defaultExpandedKey = [this.valueId]      // 设置默认展开
-      }
-      this.initScroll()
-    },
-    // 初始化滚动条
-    initScroll(){
-      this.$nextTick(()=>{
-        let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
-        let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
-        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
-        scrollBar.forEach(ele => ele.style.width = 0)
-      })
-    },
-    // 切换选项
-    handleNodeClick(node){
-      this.valueTitle = node[this.props.label]
-      this.valueId = node[this.props.value]
-      this.defaultExpandedKey = []
-      this.$emit('getValue',this.valueId)
-    },
-    // 清除选中
-    clearHandle(){
-      this.valueTitle = ''
-      this.valueId = null
-      this.defaultExpandedKey = []
-      this.clearSelected()
-      this.$emit('getValue',null)
-    },
-    /* 清空选中样式 */
-    clearSelected(){
-      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
-      allNode.forEach((element)=>element.classList.remove('is-current'))
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    }
-  },
-  watch: {
-    value(){
-      this.valueId = this.value
-      this.initHandle()
-    },
-    filterText(val) {
-      this.$refs.selectTree.filter(val);
-    }
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-.el-select-dropdown__item.selected{
-  font-weight: normal;
-}
-ul li >>>.el-tree .el-tree-node__content{
-  height:auto;
-  padding: 0 20px;
-}
-.el-tree-node__label{
-  font-weight: normal;
-}
-.el-tree >>>.is-current .el-tree-node__label{
-  color: #409EFF;
-  font-weight: 700;
-}
-.el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
-  color:#606266;
-  font-weight: normal;
-}
-.selectInput{
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-</style>
diff --git a/src/icons/svg/Steve-Jobs.svg b/src/icons/svg/Steve-Jobs.svg
new file mode 100644
index 0000000000000000000000000000000000000000..53843e2461e59a862d5a570df5f7a8faed859a3f
--- /dev/null
+++ b/src/icons/svg/Steve-Jobs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.586" height="200" class="icon" p-id="2886" t="1553488917000" version="1.1" viewBox="0 0 1027 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M512 750.933333c-112.64 0-211.626667-119.466667-245.76-242.346666-34.133333 0-61.44-44.373333-61.44-102.4 0-17.066667 3.413333-34.133333 6.826667-47.786667-3.413333-20.48-6.826667-47.786667-6.826667-68.266667C204.8 129.706667 341.333333 0 508.586667 0S819.2 133.12 819.2 290.133333c0 20.48-3.413333 47.786667-6.826667 68.266667 3.413333 13.653333 6.826667 30.72 6.826667 47.786667 0 58.026667-27.306667 102.4-61.44 102.4-34.133333 122.88-133.12 242.346667-245.76 242.346666z m-235.52-279.893333h6.826667c3.413333 3.413333 10.24 6.826667 10.24 10.24 30.72 129.706667 129.706667 235.52 218.453333 235.52s187.733333-105.813333 218.453333-235.52c0-6.826667 6.826667-10.24 10.24-10.24 3.413333-3.413333 10.24 0 17.066667 0h3.413333c10.24 0 27.306667-27.306667 27.306667-68.266667 0-13.653333-3.413333-30.72-6.826667-40.96v-10.24c0-13.653333 3.413333-40.96 3.413334-61.44C785.066667 150.186667 658.773333 34.133333 508.586667 34.133333 358.4 34.133333 238.933333 150.186667 238.933333 290.133333c0 20.48 3.413333 47.786667 6.826667 64.853334v10.24c-3.413333 10.24-6.826667 23.893333-6.826667 40.96 0 40.96 17.066667 68.266667 27.306667 68.266666h3.413333c0-3.413333 3.413333-3.413333 6.826667-3.413333z" p-id="2887"/><path fill="#bfbfbf" d="M1006.933333 1024H17.066667c-10.24 0-17.066667-6.826667-17.066667-17.066667v-40.96c0-116.053333 75.093333-218.453333 184.32-259.413333l112.64-30.72c6.826667 0 13.653333 0 17.066667 3.413333 51.2 58.026667 122.88 136.533333 197.973333 136.533334s143.36-78.506667 197.973333-136.533334c3.413333-3.413333 10.24-6.826667 17.066667-3.413333l109.226667 30.72c112.64 37.546667 191.146667 150.186667 191.146666 266.24v30.72c-3.413333 13.653333-10.24 20.48-20.48 20.48zM34.133333 989.866667h955.733334v-13.653334c0-98.986667-71.68-201.386667-167.253334-235.52l-98.986666-27.306666c-54.613333 61.44-129.706667 139.946667-215.04 139.946666s-160.426667-78.506667-215.04-139.946666l-98.986667 27.306666c-95.573333 34.133333-160.426667 122.88-160.426667 225.28v23.893334zM785.066667 375.466667h-51.2c-6.826667 0-13.653333-6.826667-17.066667-13.653334 0-3.413333-23.893333-109.226667-30.72-184.32-3.413333-30.72-30.72-58.026667-61.44-58.026666-23.893333 0-40.96 13.653333-58.026667 30.72-17.066667 13.653333-34.133333 20.48-54.613333 20.48-27.306667 0-47.786667 0-64.853333-20.48s-34.133333-30.72-47.786667-30.72c-40.96 0-71.68 30.72-75.093333 68.266666l-17.066667 170.666667c0 3.413333-3.413333 10.24-6.826667 10.24s-6.826667 6.826667-13.653333 6.826667c0 0-23.893333-3.413333-51.2-3.413334-10.24 0-17.066667-6.826667-17.066667-17.066666s10.24-17.066667 20.48-17.066667c13.653333 0 27.306667 0 37.546667 3.413333l17.066667-153.6c3.413333-58.026667 54.613333-102.4 109.226666-102.4 27.306667 0 54.613333 23.893333 71.68 44.373334 6.826667 6.826667 17.066667 6.826667 37.546667 6.826666 10.24 0 20.48-3.413333 30.72-13.653333 20.48-17.066667 47.786667-37.546667 81.92-37.546667 51.2 0 92.16 37.546667 95.573333 88.746667 3.413333 58.026667 20.48 136.533333 27.306667 167.253333H785.066667c10.24 0 17.066667 6.826667 17.066666 17.066667s-6.826667 17.066667-17.066666 17.066667z" p-id="2888"/><path fill="#bfbfbf" d="M324.266667 426.666667c-3.413333 0-10.24 0-13.653334-3.413334l-51.2-51.2c-6.826667-6.826667-6.826667-17.066667 0-23.893333s17.066667-6.826667 23.893334 0l51.2 51.2c6.826667 6.826667 6.826667 17.066667 0 23.893333 0 3.413333-6.826667 3.413333-10.24 3.413334zM699.733333 426.666667c-3.413333 0-6.826667 0-10.24-3.413334-6.826667-6.826667-10.24-17.066667-3.413333-23.893333l34.133333-51.2c6.826667-6.826667 17.066667-10.24 23.893334-3.413333s10.24 17.066667 3.413333 23.893333l-34.133333 51.2c-3.413333 3.413333-6.826667 6.826667-13.653334 6.826667zM563.2 426.666667c-3.413333 0-6.826667 0-10.24-3.413334 0 0-20.48-13.653333-40.96-13.653333s-40.96 13.653333-40.96 13.653333c-6.826667 6.826667-17.066667 3.413333-23.893333-3.413333-6.826667-6.826667-3.413333-17.066667 3.413333-23.893333 0 0 27.306667-20.48 61.44-20.48s61.44 20.48 61.44 20.48c6.826667 6.826667 10.24 17.066667 3.413333 23.893333-3.413333 3.413333-6.826667 6.826667-13.653333 6.826667zM631.466667 614.4c-27.306667 0-51.2-20.48-71.68-37.546667-17.066667-17.066667-34.133333-30.72-54.613334-30.72-17.066667 0-30.72 13.653333-47.786666 30.72-17.066667 17.066667-37.546667 37.546667-68.266667 37.546667-44.373333 0-58.026667-13.653333-81.92-37.546667l-17.066667-17.066666c-6.826667-6.826667-6.826667-17.066667 0-23.893334s17.066667-6.826667 23.893334 0l17.066666 17.066667c23.893333 23.893333 27.306667 27.306667 54.613334 27.306667 13.653333 0 27.306667-13.653333 44.373333-27.306667 20.48-20.48 40.96-40.96 71.68-40.96 30.72 0 54.613333 20.48 75.093333 40.96 17.066667 13.653333 34.133333 27.306667 47.786667 27.306667 30.72 0 34.133333-3.413333 54.613333-27.306667 3.413333-6.826667 10.24-10.24 17.066667-17.066667s17.066667-6.826667 23.893333 0 6.826667 17.066667 0 23.893334c-6.826667 6.826667-10.24 13.653333-17.066666 17.066666-13.653333 23.893333-27.306667 37.546667-71.68 37.546667zM529.066667 648.533333h-34.133334c-10.24 0-17.066667-6.826667-17.066666-17.066666s6.826667-17.066667 17.066666-17.066667h34.133334c10.24 0 17.066667 6.826667 17.066666 17.066667s-6.826667 17.066667-17.066666 17.066666z" p-id="2889"/><path fill="#bfbfbf" d="M631.466667 512c-47.786667 0-85.333333-37.546667-85.333334-85.333333s37.546667-85.333333 85.333334-85.333334 85.333333 37.546667 85.333333 85.333334-37.546667 85.333333-85.333333 85.333333z m0-136.533333c-27.306667 0-51.2 23.893333-51.2 51.2s23.893333 51.2 51.2 51.2 51.2-23.893333 51.2-51.2-23.893333-51.2-51.2-51.2zM392.533333 512C344.746667 512 307.2 474.453333 307.2 426.666667s37.546667-85.333333 85.333333-85.333334 85.333333 37.546667 85.333334 85.333334-37.546667 85.333333-85.333334 85.333333z m0-136.533333c-27.306667 0-51.2 23.893333-51.2 51.2s23.893333 51.2 51.2 51.2 51.2-23.893333 51.2-51.2-23.893333-51.2-51.2-51.2z" p-id="2890"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/alipay.svg b/src/icons/svg/alipay.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9138981301f78765570b1d95bc4f3dfd2c16f24c
--- /dev/null
+++ b/src/icons/svg/alipay.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1468" t="1546239206365" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M907 378.05l-12.4-14.33c-61-70.41-166.93-177.81-236.2-239.4l-14.12-12.58C609.07 80.37 562.07 63.09 512 63.09s-97.08 17.28-132.32 48.65l-14.12 12.57c-69.28 61.61-175.24 169-236.2 239.41l-12.41 14.33c-63.92 73.87-63.92 194 0 267.87l12.41 14.33C190.24 730.6 296.2 838 365.54 899.69l14.14 12.57c35.24 31.37 82.23 48.65 132.32 48.65s97.06-17.28 132.32-48.65l14.13-12.57 8.15-7.25c21.93-19.46 31.93-28.35 62.69-58.93l7.27-7.36-1.16-1.22a28.35 28.35 0 0 0-45.87-32.14c-2.92 2.78-43.63 41.53-68.73 63.91l-14.1 12.56c-24.89 22.1-58.53 34.28-94.7 34.28s-69.82-12.19-94.69-34.31l-14.14-12.58c-67.85-60.34-171.47-165.38-231-234.14l-12.4-14.32c-21.73-25.12-33.7-59.29-33.7-96.2s12-71.07 33.7-96.17l12.41-14.33c59.5-68.75 163.12-173.79 231-234.15l14.1-12.57c24.86-22.12 58.49-34.31 94.68-34.31s69.83 12.19 94.7 34.3l14.12 12.58c67.86 60.37 171.49 165.41 231 234.14l12.39 14.34c45.22 52.21 45.34 143.76 0.26 192.07l-7.15 7.69c-20.35 21.94-32.64 35.19-45.62 39.1-12.3 3.71-27.89-0.23-57.53-14.54-49.55-23.94-119.64-64-144-78 9.87-19.61 32.46-67.6 43.11-115.62l2.86-12.87H534.5v-15.06h154.78v-57.37H534.5v-72.41h-56.89v72.41H322.83v57.37h154.78v15.05H358.54V491H573c-4.63 14.52-13.16 32.57-19.19 44.37-22.13-8.73-80.75-29.33-141-29.33-37.94 0-69.92 10.28-92.49 29.71-22.37 19.27-34.19 46-34.19 77.42s11.32 58.29 32.75 77.74c21.9 19.89 53 30.41 90 30.41 42.76 0 87.09-19 128.18-54.78a326.76 326.76 0 0 0 43.61-46.35c22.9 12.75 90 50 152.61 83.47 40.83 21.85 69.5 26.18 95.87 14.47 25.09-11.14 47.07-36.53 77.49-71.68l0.47-0.54C971 572.07 971 451.9 907 378.05zM407.83 662c-60.15 0-64.83-37.38-64.83-48.82a48.21 48.21 0 0 1 12.15-31.36c11.06-12.2 28.45-18.39 51.69-18.39 50 0 95 17.21 115.39 26.35C503.71 611.69 456 662 407.83 662z" p-id="1469"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/anq.svg b/src/icons/svg/anq.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a466608db5f490179f45d48b703995056e9fd8a4
--- /dev/null
+++ b/src/icons/svg/anq.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="6244" t="1553935360914" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#8a8a8a" d="M957.217391 86.372174C957.217391 86.372174 957.217391 608.211478 957.217391 608.211478 957.217391 639.510261 949.782261 670.630957 934.956522 701.573565 920.086261 732.605217 900.674783 762.568348 876.633043 791.685565 852.591304 820.758261 825.121391 848.317217 794.267826 874.273391 763.369739 900.274087 732.070957 923.425391 700.326957 943.727304 668.538435 964.073739 637.68487 980.992 607.721739 994.437565 577.758609 1007.88313 551.490783 1017.09913 528.918261 1022.130087 528.918261 1022.130087 518.233043 1024 518.233043 1024 518.233043 1024 508.438261 1022.130087 508.438261 1022.130087 485.286957 1017.09913 458.440348 1007.88313 427.853913 994.437565 397.267478 980.992 365.523478 964.073739 332.577391 943.727304 299.631304 923.425391 267.308522 900.274087 235.52 874.273391 203.776 848.317217 175.415652 820.758261 150.483478 791.685565 125.551304 762.568348 105.382957 732.605217 89.978435 701.573565 74.48487 670.630957 66.782609 639.510261 66.782609 608.211478 66.782609 608.211478 66.782609 86.372174 66.782609 86.372174 66.782609 86.372174 103.290435 80.717913 103.290435 80.717913 103.290435 80.717913 512.890435 0 512.890435 0 512.890435 0 930.504348 80.717913 930.504348 80.717913 930.504348 80.717913 957.217391 86.372174 957.217391 86.372174 957.217391 86.372174 957.217391 86.372174 957.217391 86.372174ZM513.024 75.553391C513.024 75.553391 508.082087 74.529391 508.082087 74.529391 508.082087 74.529391 156.538435 137.527652 156.538435 137.527652 156.538435 137.527652 156.538435 466.765913 156.538435 466.765913 156.538435 466.765913 513.024 466.765913 513.024 466.765913 513.024 466.765913 513.024 75.553391 513.024 75.553391 513.024 75.553391 513.024 75.553391 513.024 75.553391ZM867.461565 466.765913C867.461565 466.765913 513.024 466.765913 513.024 466.765913 513.024 466.765913 513.024 935.401739 513.024 935.401739 535.81913 929.881043 560.617739 921.466435 587.419826 910.113391 614.177391 898.760348 640.623304 885.359304 666.713043 869.865739 692.847304 854.372174 717.957565 837.186783 742.13287 818.265043 766.308174 799.343304 787.634087 778.99687 806.288696 757.314783 824.898783 735.677217 839.724522 713.149217 850.810435 689.730783 861.94087 666.35687 867.461565 642.582261 867.461565 618.496 867.461565 618.496 867.461565 466.765913 867.461565 466.765913 867.461565 466.765913 867.461565 466.765913 867.461565 466.765913Z" p-id="6245"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/app.svg b/src/icons/svg/app.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0796da351039ad54819ba3daf22a0318443f916a
--- /dev/null
+++ b/src/icons/svg/app.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="1574649142168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1910" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M468.693333 16.725333a85.333333 85.333333 0 0 1 82.56 0l381.952 211.072a85.333333 85.333333 0 0 1 44.074667 74.666667v419.029333a85.333333 85.333333 0 0 1-44.074667 74.666667l-381.952 211.114667a85.333333 85.333333 0 0 1-82.56 0l-381.952-211.072A85.333333 85.333333 0 0 1 42.666667 721.493333V302.506667a85.333333 85.333333 0 0 1 44.074666-74.666667L468.693333 16.682667z m423.253334 285.781334l-381.994667-211.072L128 302.506667v418.986666l381.952 211.072 381.994667-211.072V302.506667z m-684.714667 42.197333a42.666667 42.666667 0 0 1 57.984-16.725333l244.736 135.253333 244.778667-135.253333a42.666667 42.666667 0 0 1 41.258666 74.666666l-243.370666 134.528v268.16a42.666667 42.666667 0 0 1-85.333334 0V537.173333L223.914667 402.688a42.666667 42.666667 0 0 1-16.682667-58.026667z" fill="#bfbfbf" p-id="1911"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/backup.svg b/src/icons/svg/backup.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a3272a4697575606c10edc73f455bf1aa6b6d425
--- /dev/null
+++ b/src/icons/svg/backup.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="1574649191790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2774" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M646 1024H100A100 100 0 0 1 0 924V258a100 100 0 0 1 100-100h546a100 100 0 0 1 100 100v31a40 40 0 1 1-80 0v-31a20 20 0 0 0-20-20H100a20 20 0 0 0-20 20v666a20 20 0 0 0 20 20h546a20 20 0 0 0 20-20V713a40 40 0 0 1 80 0v211a100 100 0 0 1-100 100z" fill="#cdcdcd" p-id="2775"></path><path d="M924 866H806a40 40 0 0 1 0-80h118a20 20 0 0 0 20-20V100a20 20 0 0 0-20-20H378a20 20 0 0 0-20 20v8a40 40 0 0 1-80 0v-8A100 100 0 0 1 378 0h546a100 100 0 0 1 100 100v666a100 100 0 0 1-100 100z" fill="#cdcdcd" p-id="2776"></path><path d="M469 887a40 40 0 0 1-27-10L152 618a40 40 0 0 1 1-60l290-248a40 40 0 0 1 66 30v128a367 367 0 0 0 241-128l94-111a40 40 0 0 1 70 35l-26 109a430 430 0 0 1-379 332v142a40 40 0 0 1-40 40zM240 589l189 169v-91a40 40 0 0 1 40-40c144 0 269-85 323-214a447 447 0 0 1-323 137 40 40 0 0 1-40-40v-83z" fill="#cdcdcd" p-id="2777"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/chain.svg b/src/icons/svg/chain.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ed3317f4f283a2639f42ff3909c3c23e270636c7
--- /dev/null
+++ b/src/icons/svg/chain.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="654" t="1545959978831" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M877.297288 553.796942L553.79643 877.298823c-54.370305 54.369282-126.656655 84.311221-203.547883 84.312245-76.890204-0.001023-149.177578-29.942963-203.546859-84.312245S62.389444 750.641145 62.389444 673.750941c0-76.890204 29.942963-149.177578 84.312244-203.547883l135.442762-135.441738c75.829036-75.829036 199.213157-75.829036 275.043217 0s75.830059 199.214181 0 275.043217L399.320173 767.674077c-17.620309 17.620309-46.188972 17.620309-63.809281 0-17.620309-17.621333-17.620309-46.188972 0-63.809281l157.867493-157.867494c40.645722-40.645722 40.645722-106.779955 0-147.424654-40.644699-40.645722-106.778932-40.645722-147.424654 0L210.51097 534.01234c-77.051887 77.05291-77.051887 202.423269 0 279.476179 77.051887 77.051887 202.423269 77.051887 279.475155 0l323.501882-323.501882c77.051887-77.050864 77.051887-202.423269 0-279.475156-77.05291-77.051887-202.424292-77.050864-279.476179 0-17.619286 17.620309-46.188972 17.620309-63.809281 0s-17.619286-46.189995 0-63.809281c54.369282-54.369282 126.657678-84.313268 203.546859-84.312244 76.892251 0 149.178601 29.942963 203.548906 84.312244 54.369282 54.369282 84.311221 126.656655 84.311221 203.547882 0 76.889181-29.942963 149.176554-84.312245 203.54686z" p-id="655"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/codeConsole.svg b/src/icons/svg/codeConsole.svg
new file mode 100644
index 0000000000000000000000000000000000000000..672ec6e4e34647f0b130775b7849c2f0c0061d25
--- /dev/null
+++ b/src/icons/svg/codeConsole.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="6717" t="1547360688278" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" 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"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/database.svg b/src/icons/svg/database.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7fbad9b802129a52d43da1bb3211014d1b669fdb
--- /dev/null
+++ b/src/icons/svg/database.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="1574649229600" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3752" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M942 191.9C939.8 128.9 748.1 78 512 78S84.2 128.9 82 191.9V831c0 63.5 192.5 115 430 115s430-51.5 430-115V191.9z m-56.7 393.8c-4.6 3.3-11.6 7.4-21.9 12.2-21.3 9.8-50.5 19.1-84.4 26.8-74 16.8-168.8 26-267 26s-193-9.2-267-26c-33.9-7.7-63.1-16.9-84.4-26.8-10.3-4.8-17.3-8.9-21.9-12.2 0.1-0.1 0.2-0.1 0.3-0.2h-7v-123c72.2 36.4 215.3 61.1 380 61.1s307.8-24.8 380-61.1v122.9h-7l0.3 0.3z m0-177c-4.6 3.3-11.6 7.4-21.9 12.2-21.3 9.8-50.5 19.1-84.4 26.8-74 16.8-168.8 26-267 26s-193-9.2-267-26c-33.9-7.7-63.1-16.9-84.4-26.8-10.3-4.8-17.3-8.9-21.9-12.2 0.1-0.1 0.2-0.1 0.3-0.2h-7V246.9c72.2 36.4 215.3 61.1 380 61.1s307.8-24.8 380-61.1v161.6h-7c0.1 0 0.2 0.1 0.3 0.2zM160.7 180.8C182 171 211.2 161.7 245 154c74-16.8 168.8-26 267-26s193 9.2 267 26c33.9 7.7 63.1 16.9 84.4 26.8 10.3 4.8 17.3 8.9 21.9 12.2-4.6 3.3-11.6 7.4-21.9 12.2C842 215 812.8 224.3 779 232c-74 16.8-168.8 26-267 26s-193-9.2-267-26c-33.9-7.7-63.1-16.9-84.4-26.8-10.3-4.8-17.3-8.9-21.9-12.2 4.7-3.3 11.7-7.4 22-12.2zM885.3 831c-4.6 3.3-11.6 7.4-21.9 12.2C842 853 812.8 862.3 779 870c-74 16.8-168.8 26-267 26s-193-9.2-267-26c-33.9-7.7-63.1-16.9-84.4-26.8-10.3-4.8-17.3-8.9-21.9-12.2 0.1-0.1 0.2-0.1 0.3-0.2h-7V639.5c72.2 36.4 215.3 61.1 380 61.1s307.8-24.8 380-61.1v191.3h-7c0.1 0.1 0.2 0.1 0.3 0.2z" fill="#cdcdcd" p-id="3753"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/date.svg b/src/icons/svg/date.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0540e99355605fc600b2444c00bcfb83ab133279
--- /dev/null
+++ b/src/icons/svg/date.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="5330" t="1553935012815" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#8a8a8a" d="M453.22752 781.67168 170.31936 781.67168 170.31936 409.18016l650.45632 0c11.6864 0 21.15968-9.47328 21.15968-21.15968L841.93536 218.68032l0-12.3904c0-11.6864-9.47328-21.15968-21.15968-21.15968l-11.8784 0L660.94464 185.13024l0-35.97184c0-11.6864-9.47328-21.15968-21.15968-21.15968-11.68768 0-21.15968 9.47328-21.15968 21.15968l0 35.97184L356.24704 185.13024l0-35.97184c0-11.6864-9.47328-21.15968-21.15968-21.15968s-21.15968 9.47328-21.15968 21.15968l0 35.97184L161.04064 185.13024l-11.88096 0c-11.6864 0-21.15968 9.47328-21.15968 21.15968l0 12.3904 0 169.34144 0 402.4192c0 18.49984 14.8224 33.55008 33.04064 33.55008l292.18816 0c11.6864 0 21.15968-9.472 21.15968-21.15968C474.38848 791.14496 464.91392 781.67168 453.22752 781.67168zM170.31936 227.4496l143.60832 0 0 35.97184c0 11.6864 9.47328 21.15968 21.15968 21.15968s21.15968-9.472 21.15968-21.15968l0-35.97184 262.37696 0 0 35.97184c0 11.6864 9.472 21.15968 21.15968 21.15968 11.6864 0 21.15968-9.472 21.15968-21.15968l0-35.97184L799.616 227.4496l0 139.41248L170.31936 366.86208 170.31936 227.4496zM690.49984 483.10016c-113.83808 0-206.44992 92.61312-206.44992 206.45248 0 113.83552 92.61184 206.44736 206.44992 206.44736s206.44992-92.61312 206.44992-206.44736C896.94976 575.71328 804.33792 483.10016 690.49984 483.10016zM690.49984 853.68064c-90.50112 0-164.13056-73.62816-164.13056-164.13184s73.62816-164.13184 164.13056-164.13184c90.5024 0 164.13184 73.62816 164.13184 164.13184S781.00224 853.68064 690.49984 853.68064zM390.10304 640.81536l-143.8848 0c-11.68768 0-21.15968 9.472-21.15968 21.15968 0 11.68512 9.472 21.1584 21.15968 21.1584l143.8848 0c11.6864 0 21.15968-9.47328 21.15968-21.1584C411.26144 650.28736 401.78816 640.81536 390.10304 640.81536zM390.10304 521.32608l-143.8848 0c-11.68768 0-21.15968 9.47328-21.15968 21.1584 0 11.68768 9.472 21.15968 21.15968 21.15968l143.8848 0c11.6864 0 21.15968-9.472 21.15968-21.15968C411.26144 530.80064 401.78816 521.32608 390.10304 521.32608zM803.1744 668.39296l-91.51488 0 0-50.78272c0-11.68768-9.472-21.15968-21.1584-21.15968s-21.15968 9.472-21.15968 21.15968l0 71.9424c0 11.68512 9.47328 21.1584 21.15968 21.1584l112.67328 0c11.6864 0 21.15968-9.47328 21.15968-21.1584C824.33536 677.86496 814.8608 668.39296 803.1744 668.39296z" p-id="5331"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/deploy.svg b/src/icons/svg/deploy.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f4a1c56e6314367454db0ac23ff62d876abbc81a
--- /dev/null
+++ b/src/icons/svg/deploy.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="1574649300337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4312" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M877.952 447.616v-0.256a272 272 0 0 0-479.68-175.68 166.144 166.144 0 0 0-226.016 155.296c0 4.768 0.32 9.6 0.704 14.144A196.896 196.896 0 0 0 206.592 832H448v-256H304l208-208 208 208H576v256h241.408a196.96 196.96 0 0 0 60.544-384.384z" fill="#cdcdcd" p-id="4313"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/dept.svg b/src/icons/svg/dept.svg
new file mode 100644
index 0000000000000000000000000000000000000000..894e4bff6cf1d240931ce7acb96a73cbedcc7c95
--- /dev/null
+++ b/src/icons/svg/dept.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1799" t="1553478255619" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" 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="1800"/><path fill="#bfbfbf" 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="1801"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/dev.svg b/src/icons/svg/dev.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ed4d23cf4021f72022fa8f99ff89154c3741b3d6
--- /dev/null
+++ b/src/icons/svg/dev.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" fill="#bfbfbf" p-id="2423"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/develop.svg b/src/icons/svg/develop.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e189223dd5bf38ad33c9ba247777f0e4a6abda97
--- /dev/null
+++ b/src/icons/svg/develop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="2807" t="1547195013953" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#cdcdcd" d="M529.0496 527.616l-30.7712-30.7456 85.0688-85.0944 30.7712 30.7712z" p-id="2808"/><path fill="#cdcdcd" d="M0 340.48l427.52 256 248.32 427.52L1024 0l-1024 340.48zM665.6 921.6l-207.36-355.84-355.84-212.48L911.36 81.92l-243.2 243.2 30.72 30.72 243.2-243.2L665.6 921.6z" p-id="2809"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/dictionary.svg b/src/icons/svg/dictionary.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6e83c4354041b10fe58a6462e37bcc332b783d3b
--- /dev/null
+++ b/src/icons/svg/dictionary.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1497" t="1554868028575" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M558.409143 658.285714h-92.818286l-28.379428 62.427429a18.285714 18.285714 0 1 1-33.28-15.140572l91.428571-201.142857a18.285714 18.285714 0 0 1 33.28 0l91.428571 201.142857a18.285714 18.285714 0 1 1-33.28 15.140572L558.409143 658.285714z m-16.64-36.571428L512 556.178286 482.230857 621.714286h59.538286zM329.142857 128h475.428572a18.285714 18.285714 0 1 1 0 36.571429H329.142857a91.428571 91.428571 0 0 0 0 182.857142h475.428572a18.285714 18.285714 0 0 1 18.285714 18.285715v512a18.285714 18.285714 0 0 1-18.285714 18.285714H329.142857A128 128 0 0 1 201.142857 768V256A128 128 0 0 1 329.142857 128zM237.714286 345.6V768A91.428571 91.428571 0 0 0 329.142857 859.428571h457.142857v-475.428571H329.142857a127.634286 127.634286 0 0 1-91.428571-38.4zM329.142857 274.285714a18.285714 18.285714 0 0 1 0-36.571428h438.857143a18.285714 18.285714 0 1 1 0 36.571428H329.142857z" p-id="1498"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/doc.svg b/src/icons/svg/doc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9160de8c90e741555c03c49caf0f19aa467bf15b
--- /dev/null
+++ b/src/icons/svg/doc.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="1583752001956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9290" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M891.8 320H608V39.2L891.8 320zM704 384v260c0 133.6-73 200.2-226.6 200.2H288V169.6h189.4c24 0 46.2 1.6 66.2 5v-168C521.8 2.2 498.8 0 474.4 0H96v1024h378.4C755.4 1024 896 894.8 896 636.2V384h-192z" fill="#707070" p-id="9291"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/download.svg b/src/icons/svg/download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0243c6a7018bbe021059eea57a902b3a4951b531
--- /dev/null
+++ b/src/icons/svg/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="1583752303941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16654" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1024 896v128H0v-320h128v192h768v-192h128v192zM576 554.688L810.688 320 896 405.312l-384 384-384-384L213.312 320 448 554.688V0h128v554.688z" fill="#707070" p-id="16655"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/error.svg b/src/icons/svg/error.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fd935da9b74c5409f8ab7ebc25ade45019f43cfd
--- /dev/null
+++ b/src/icons/svg/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="5914" t="1547360570987" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M234.27218 32h58.36780969v179.99999344h-58.36874719V32zM583.99997844 32h58.27218562v179.99999344H583.99997844V32zM175.99999437 331.99998875h524.59216688v59.99999719H175.99999437v-59.99999719z m0 179.9999925h291.40780125v59.99999812H175.99999437v-59.99999812z m352.55998594 383.999985H32V79.99999812h767.99997v381.6477975C911.16871531 492.99216969 991.9999625 597.1043525 991.9999625 721.99997281c0 149.99999437-116.59218281 269.99998969-262.27217719 269.99998969a258.38436469 258.38436469 0 0 1-201.1199925-95.99999625z m212.35217906-443.75998312V138.31999625H91.08781062v699.35997188H492.36873219A277.72780125 277.72780125 0 0 1 467.40779562 721.99997281c0-149.99999437 116.59218281-269.99998969 262.31998969-269.99998875 3.744375 0 7.4878125 0.095625 11.18437407 0.23999906zM175.99999437 691.99997469h233.13561563v59.99999719H175.99999437v-59.99999719z m553.72779094-179.99999344c-110.73562031 0-203.9999925 95.99999625-203.9999925 209.99999156s93.26437125 209.99999156 203.9999925 209.9999925 203.9999925-95.99999625 203.99999156-209.9999925-93.26343375-209.99999156-203.99999156-209.99999156zM703.99997375 559.99997938h59.75999812v203.99999249H703.99997375V559.99997938z m59.75999812 239.99999062v59.75999812H703.99997375V799.99997h59.75999812z" p-id="5915"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/fwb.svg b/src/icons/svg/fwb.svg
new file mode 100644
index 0000000000000000000000000000000000000000..59933fc75d3bd95d7df99f4f00c37f578cc28b85
--- /dev/null
+++ b/src/icons/svg/fwb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="2201" t="1545883026424" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M925.597853 836.903811c0.367367-2.783393 0.847298-5.528923 0.847298-8.40953L926.44515 180.091658c19.034519-11.079336 31.976272-31.470759 31.976272-55.082526 0-35.32146-28.633131-63.956637-63.953567-63.956637-23.611767 0-44.007283 12.941753-55.082526 31.980365L182.108594 93.03286c-11.076266-19.038612-31.470759-31.980365-55.082526-31.980365-35.31839 0-63.953567 28.635177-63.953567 63.956637 0 23.611767 12.9438 44.00319 31.976272 55.082526l0 648.402623c0 2.880607 0.479931 5.627161 0.851391 8.40953-19.4991 10.954493-32.827663 31.586392-32.827663 55.543014 0 35.317367 28.635177 63.953567 63.953567 63.953567 35.32146 0 63.953567-28.635177 63.953567-63.953567l639.536698 0c0 35.317367 28.631084 63.953567 63.953567 63.953567 35.319413 0 63.953567-28.635177 63.953567-63.953567C958.421422 868.490204 945.093882 847.859327 925.597853 836.903811zM862.491583 828.494281 159.00234 828.494281 159.00234 180.091658c9.596566-5.586229 17.524119-13.513782 23.110347-23.110347l657.273664 0c5.582135 9.596566 13.509688 17.524119 23.106254 23.110347L862.492606 828.494281z" p-id="2202"/><path d="M670.62781 252.915243 350.86202 252.915243 318.885747 252.915243 286.908452 252.915243 286.908452 380.818285 350.86202 380.818285 350.86202 316.864718 478.768131 316.864718 478.768131 668.610874 414.815587 668.610874 414.815587 732.564441 606.675266 732.564441 606.675266 668.610874 542.721699 668.610874 542.721699 316.864718 670.62781 316.864718 670.62781 380.818285 734.585471 380.818285 734.585471 252.915243 702.609199 252.915243Z" p-id="2203"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/github.svg b/src/icons/svg/github.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8145e9579fffed0968b5d65485d1d62d2e209b9b
--- /dev/null
+++ b/src/icons/svg/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="1583751668311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2803" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M263.456 759.36c0 27.04 22.88 40.576 68.672 40.576 40.064 0 60.096-14.048 60.096-42.144 0-26.528-21.856-39.808-65.536-39.808C284.544 718.016 263.456 731.808 263.456 759.36zM853.344 0 170.688 0C76.8 0 0 76.8 0 170.688l0 682.624C0 947.264 76.8 1024 170.688 1024l682.656 0C947.232 1024 1024 947.264 1024 853.312L1024 170.688C1024 76.8 947.232 0 853.344 0zM475.744 408.992c-7.296 2.592-17.696 5.472-31.2 8.576 4.16 11.968 6.24 23.168 6.24 33.568 0 33.28-10.016 62.304-30.048 87.008-20.032 24.704-45.92 39.392-77.632 44.096-20.8 3.136-31.2 14.304-31.2 33.568 0 6.752 3.392 13.536 10.144 20.288 8.832 9.888 21.856 16.128 39.008 18.72 74.4 11.456 111.584 42.4 111.584 92.864 0 80.64-48.128 120.96-144.352 120.96-39.552 0-72.064-7.04-97.536-21.056-32.256-17.696-48.384-45.536-48.384-83.488 0-43.712 24.192-73.6 72.576-89.728l0-1.568c-17.696-10.912-26.528-27.584-26.528-49.952 0-29.12 8.32-47.36 24.96-54.624l0-1.568c-16.64-5.728-31.488-18.72-44.48-39.04-14.56-21.856-21.856-45.248-21.856-70.24 0-37.472 13.28-68.672 39.808-93.632 25.504-23.424 55.936-35.104 91.296-35.104 25.504 0 49.152 6.24 71.008 18.72 24.96 0 53.856-6.24 86.624-18.72L475.744 408.992 475.744 408.992zM602.176 679.008l-88.192 0c1.056-10.4 1.568-28.096 1.568-53.056L515.552 383.232c0-24.448-0.512-41.376-1.568-50.72l88.192 0c-1.056 9.888-1.568 26.272-1.568 49.152l0 239.552C600.608 647.776 601.152 667.04 602.176 679.008zM596.32 254.496c-10.656 11.456-23.296 17.152-37.856 17.152-15.072 0-27.968-5.728-38.624-17.152-10.656-11.456-16-24.96-16-40.576 0-16.128 5.344-29.92 16-41.376 10.656-11.456 23.552-17.152 38.624-17.152 14.56 0 27.2 5.728 37.856 17.152 10.656 11.456 16 25.216 16 41.376C612.32 229.504 606.976 243.04 596.32 254.496zM841.696 668.832c-19.264 10.4-42.4 15.616-69.472 15.616-37.984 0-64.256-13.504-78.816-40.576-10.944-20.288-16.384-52.288-16.384-95.968l0-139.68 0.768 0 0-1.568-11.712-0.768c-6.752 0-15.616 0.768-26.528 2.336L639.584 332.512l38.24 0 0-30.432c0-14.56-0.768-26.272-2.336-35.104l90.528 0c-1.536 9.888-2.336 21.056-2.336 33.536l0 32 67.872 0 0 75.68c-2.592 0-7.424-0.256-14.432-0.768-7.04-0.512-13.664-0.8-19.904-0.8l-33.568 0 0 145.152c0 34.848 11.456 52.288 34.336 52.288 16.128 0 30.688-4.416 43.712-13.248L841.696 668.832 841.696 668.832zM321.216 400.416c-32.768 0-49.152 19.264-49.152 57.76 0 35.904 16.384 53.856 49.152 53.856 31.744 0 47.616-18.208 47.616-54.624 0-15.104-3.648-28.096-10.912-39.008C349.056 406.4 336.832 400.416 321.216 400.416z" p-id="2804"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/gonggao.svg b/src/icons/svg/gonggao.svg
new file mode 100644
index 0000000000000000000000000000000000000000..22aed08fdb0109e3cf651e3322137d5b97588c71
--- /dev/null
+++ b/src/icons/svg/gonggao.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1258" t="1554279845314" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M921.9 468.6H749.6c-9.4 0-18.4 3.8-25 10.5-6.6 6.7-10.3 15.7-10.3 25.1v11.1c0 19.6 15.9 35.5 35.4 35.5h172.2c19.5 0 35.3-15.9 35.3-35.5v-11.1c0-9.4-3.7-18.4-10.3-25.1-6.6-6.7-15.6-10.5-25-10.5zM522.4 163.9c-53.6 42.6-165.7 102.3-246.3 159.8h-0.1c-0.9 0.6-1.8 3.8-2.8 4.3-9.5 5.4-13.8 20.1-65.6 20.1h-101c-26 0-42 12.2-42 39.6V631c0 27.4 14.7 40.9 42 40.9H208c51.5 0.1 55.7 14.8 65.2 20.1 0.9 0.5 1.8 3.7 2.7 4.3h0.1c78.2 57.5 191 121.8 246.4 162.7 16.7 12.3 72.1 33.9 72.1-42.1v-614c0-76.1-55.9-51.8-72.1-39z m159 167.8c9.2 16.1 27.3 20.2 40.5 9l141.5-119.3c13.3-11.1 16.5-33.2 7.4-49.4l-5.2-9.1c-9.1-16.1-27.3-20.1-40.5-9L683.6 273.2c-13.2 11.2-16.5 33.2-7.4 49.4l5.2 9.1z m40.4 347.4c-13.2-11.1-31.3-7-40.4 9l-5.2 9.1c-9.1 16.1-5.8 38.2 7.4 49.4L825.1 866c13.2 11.1 31.3 7.1 40.4-9l5.2-9.1c9.1-16.1 5.8-38.2-7.4-49.4L721.8 679.1z m0 0" p-id="1259"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/image.svg b/src/icons/svg/image.svg
new file mode 100644
index 0000000000000000000000000000000000000000..16d572fd142f092267cc7e199c328627a7088d35
--- /dev/null
+++ b/src/icons/svg/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1303" t="1545960873089" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#4A576A" d="M784 112H240C152 112 80 184 80 272v480c0 88 72 160 160 160h544c88 0 160-72 160-160V272c0-88-72-160-160-160z m96 640c0 52.8-43.2 96-96 96H240c-52.8 0-96-43.2-96-96V272c0-52.8 43.2-96 96-96h544c52.8 0 96 43.2 96 96v480z" p-id="1304"/><path fill="#4A576A" d="M352 480c52.8 0 96-43.2 96-96s-43.2-96-96-96-96 43.2-96 96 43.2 96 96 96z m0-128c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32zM814.4 731.2l-3.2-3.2-177.6-177.6c-25.6-25.6-65.6-25.6-91.2 0l-80 80-36.8-36.8c-25.6-25.6-65.6-25.6-91.2 0l-134.4 134.4c-4.8 6.4-8 14.4-8 24 0 17.6 14.4 32 32 32 9.6 0 16-3.2 22.4-9.6l134.4-134.4 134.4 134.4c6.4 6.4 14.4 9.6 24 9.6 17.6 0 32-14.4 32-32 0-9.6-4.8-17.6-9.6-24l-52.8-52.8 80-80 180.8 180.8c6.4 4.8 12.8 8 20.8 8 17.6 0 32-14.4 32-32 0-8-3.2-16-8-20.8z" p-id="1305"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/index.svg b/src/icons/svg/index.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fdb38269c733c53643a0e95e6f6dd9a5774977fd
--- /dev/null
+++ b/src/icons/svg/index.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="1572170050760" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5149" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M219.428571 658.285714q0-30.285714-21.428571-51.714285T146.285714 585.142857t-51.714285 21.428572T73.142857 658.285714t21.428572 51.714286T146.285714 731.428571t51.714286-21.428571T219.428571 658.285714z m109.714286-256q0-30.285714-21.428571-51.714285T256 329.142857t-51.714286 21.428572T182.857143 402.285714t21.428571 51.714286T256 475.428571t51.714286-21.428571T329.142857 402.285714z m244.571429 274.857143l57.714285-218.285714q3.428571-14.857143-4.285714-27.714286T605.142857 414.285714t-27.428571 3.714286-17.142857 22.571429l-57.714286 218.285714q-34.285714 2.857143-61.142857 24.857143t-36 56.285714q-11.428571 44 11.428571 83.428571t66.857143 50.857143 83.428571-11.428571 50.857143-66.857143q9.142857-34.285714-3.428571-66.857143t-41.142857-52z m377.142857-18.857143q0-30.285714-21.428572-51.714285T877.714286 585.142857t-51.714286 21.428572-21.428571 51.714285 21.428571 51.714286 51.714286 21.428571 51.714285-21.428571 21.428572-51.714286z m-365.714286-365.714285q0-30.285714-21.428571-51.714286T512 219.428571t-51.714286 21.428572T438.857143 292.571429t21.428571 51.714285T512 365.714286t51.714286-21.428572T585.142857 292.571429z m256 109.714285q0-30.285714-21.428571-51.714285T768 329.142857t-51.714286 21.428572T694.857143 402.285714t21.428571 51.714286T768 475.428571t51.714286-21.428571T841.142857 402.285714z m182.857143 256q0 149.142857-80.571429 276-10.857143 16.571429-30.857142 16.571429H111.428571q-20 0-30.857142-16.571429Q0 808 0 658.285714q0-104 40.571429-198.857143t109.142857-163.428571 163.428571-109.142857 198.857143-40.571429 198.857143 40.571429 163.428571 109.142857 109.142857 163.428571 40.571429 198.857143z" p-id="5150" fill="#bfbfbf"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/ipvisits.svg b/src/icons/svg/ipvisits.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4ca473d702d9b89069006fb3c9ab4ab01b629e89
--- /dev/null
+++ b/src/icons/svg/ipvisits.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="5670" t="1544682877339" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M449.98144 243.90144c-57.7536-10.624-121.00096-7.98208-167.65952 6.8352C195.92192 278.19008 146.95936 329.984 119.76192 406.528c-32.22528 90.69568-2.93376 190.62784 15.81056 248.63744 18.74432 58.0096 76.0576 144.97792 135.94112 155.8528 63.7696 11.58144 121.30816-9.89696 155.37664-50.7392 16.05632-19.24608 30.27456-46.75072 31.70816-74.46016 0.93184-18.0224-1.22368-31.64672-6.1696-45.14816-5.64224-15.40096-15.06816-29.6448-32.95232-46.57664-19.18976-18.17088-62.53056-34.09408-104.28416-28.29312-30.90432 4.29056-56.55552 15.67744-78.4384 32.47616-33.5872 25.78944-65.41312 82.65728-65.41312 82.65728s-1.152-33.25952 13.27104-66.69824c7.22944-16.75264 24.3968-44.8512 41.26208-58.99776 17.12128-14.36672 37.85728-31.5392 72.1664-40.32 38.8864-9.95328 78.27456-6.97856 93.62944-3.5584 46.39744 10.32192 82.24256 34.64704 111.616 65.32096 59.52512 62.16704 82.46784 161.536 51.75296 246.03648-10.28096 28.28288-38.85056 61.06112-69.30944 85.10976-18.32448 14.464-57.00096 35.4048-103.18848 45.14304-30.592 6.4512-64.48128 6.2976-97.93536 2.2272-83.95776-10.22464-159.50336-86.53312-195.11296-147.77856-35.61472-61.24544-89.0368-186.05568-75.80672-320.60928 6.30272-64.12288 28.08832-132.46976 62.88384-182.4768C114.77504 249.3952 167.1168 215.15264 194.80576 199.13216c52.89984-30.60736 132.29056-43.6224 185.19552-40.832 33.62816 1.77664 86.85568 12.66688 137.27232 38.08768 39.66464 20.00384 75.78112 55.2448 92.17536 95.37536 9.81504 24.02304 6.71232 47.49312 6.67136 47.49312-0.04608 0.11776 1.13664-2.54464-31.44192-34.05312C557.16352 278.59456 507.72992 254.53056 449.98144 243.90144L449.98144 243.90144z" p-id="5671"/><path d="M559.07328 155.18208c0 0 37.8624-68.5056 72.36096-88.50944 34.49856-20.00384 61.65504-7.67488 79.4624 5.92896 17.81248 13.60384 26.82368 30.91456 22.912 55.552-3.91168 24.63744-43.14624 71.76192-66.3296 106.22976C631.34208 207.98464 595.21024 181.58592 559.07328 155.18208L559.07328 155.18208z" p-id="5672"/><path d="M408.26368 117.03296c0 0 6.8096-62.65344 26.31168-88.04864 19.50208-25.3952 43.65824-24.41216 61.23008-19.64544 17.57184 4.76672 29.73184 14.97088 34.53952 34.56 4.80256 19.59424-9.73312 66.688-16.24576 99.46112C478.81728 134.58944 443.54048 125.80864 408.26368 117.03296L408.26368 117.03296z" p-id="5673"/><path d="M294.76352 125.06112c0 0-11.65824-45.60896-4.6592-68.34176 7.00416-22.72768 24.17664-28.16 37.7344-29.27104 13.55776-1.11104 24.7552 2.94912 33.2544 15.45728 8.4992 12.50304 10.66496 49.17248 14.69952 73.78432C348.78464 119.48032 321.77152 122.27072 294.76352 125.06112L294.76352 125.06112z" p-id="5674"/><path d="M185.1648 163.1232c0 0-20.89984-34.67264-20.79232-55.01952 0.10752-20.352 12.86656-28.93312 23.7312-33.1008 10.85952-4.16768 21.06368-3.51744 31.1552 4.72064 10.09152 8.23296 20.97152 37.8368 30.39744 57.08288C228.15744 145.57696 206.66368 154.35264 185.1648 163.1232L185.1648 163.1232z" p-id="5675"/><path d="M97.408 227.1488c0 0-26.7776-25.18528-31.72352-42.9312-4.9408-17.74592 4.0448-28.26752 12.47232-34.49344 8.4224-6.22592 17.46944-8.09472 28.29312-3.34336 10.81856 4.75648 27.6224 27.9296 40.59136 42.42944C130.49856 201.58976 113.95584 214.36928 97.408 227.1488L97.408 227.1488z" p-id="5676"/><path d="M762.08128 537.68704c38.15424 4.096 77.2864 17.52064 103.7568 35.49696 49.01376 33.28 70.04672 74.84416 72.832 127.85664 3.3024 62.81216-33.65376 119.96672-56.192 152.81664-22.53824 32.84992-74.63424 76.66176-114.17088 72.33024-42.10176-4.61824-74.15296-28.78464-87.88992-60.71296-6.4768-15.04768-10.2656-34.92864-6.00576-52.55168 2.76992-11.46368 6.656-19.59936 12.27264-27.136 6.40512-8.59648 14.96064-15.76448 29.312-23.04512 15.40608-7.81312 45.52192-9.71776 70.59456 1.6896 18.56 8.44288 32.512 20.352 43.08992 34.94912 16.24064 22.41024 25.59488 63.95904 25.59488 63.95904s6.91712-20.61824 4.10112-44.25216c-1.408-11.83744-6.93248-32.64-14.86336-44.64128-8.05376-12.1856-17.8432-26.80832-37.70368-38.69696-22.50752-13.47072-47.73376-18.944-57.98912-19.6608-30.98624-2.17088-57.97376 6.39488-82.07872 20.14208-48.86016 27.86304-81.73056 85.84192-78.22336 144.49664 1.17248 19.63008 12.96896 45.48608 27.57632 66.21696 8.78592 12.47232 29.11744 32.78848 56.23808 47.49312 17.96608 9.73824 39.22432 15.9488 60.93824 19.62496 54.49728 9.22624 116.02944-24.51456 149.74464-56.25344 33.71008-31.73888 90.41408-99.98336 107.17696-186.73664 7.9872-41.33888 7.06048-88.2176-5.42208-126.02368-13.71136-41.5232-40.12544-72.71424-54.49216-87.90528-27.4432-29.02016-74.752-51.95776-108.416-60.0576-21.39136-5.1456-56.77056-8.23296-93.08672-1.69472-28.57472 5.14048-57.75872 20.50048-75.49952 42.58816-10.61888 13.22496-13.04576 28.50304-13.04576 28.50304s-0.21504-1.79712 26.06592-15.47264C688.47616 539.46368 723.92192 533.59104 762.08128 537.68704L762.08128 537.68704z" p-id="5677"/><path d="M710.25664 461.7984c0 0-10.96704-49.96608-28.85632-68.92032-17.88416-18.94912-37.19168-16.2816-50.88256-11.07968-13.69088 5.20704-22.55872 14.37184-24.69376 30.53568-2.13504 16.16384 13.66528 52.98688 21.77536 78.8992C655.15008 481.42336 682.70592 471.60832 710.25664 461.7984L710.25664 461.7984z" p-id="5678"/><path d="M811.83232 465.97632c0 0 7.3984-40.51456-0.09216-60.0576-7.49056-19.54304-22.80448-23.424-34.70336-23.71072-11.89888-0.28672-21.41696 3.84512-28.07296 15.22176-6.656 11.37664-6.31808 43.58656-8.34048 65.3312C764.3648 463.83616 788.10112 464.90624 811.83232 465.97632L811.83232 465.97632z" p-id="5679"/><path d="M881.43872 492.1344c0 0 15.7952-26.40384 15.6416-41.94304-0.1536-15.54432-9.9072-22.144-18.19136-25.36448-8.28928-3.22048-16.05632-2.75968-23.71072 3.49184-7.64928 6.25152-15.83616 28.82048-22.94272 43.48416C848.64 478.58176 865.03936 485.35552 881.43872 492.1344L881.43872 492.1344z" p-id="5680"/><path d="M943.01184 536.38144c0 0 19.54816-17.82784 23.2704-30.59712 3.72224-12.76928-2.67264-20.52096-8.704-25.15456-6.03136-4.6336-12.53888-6.12352-20.39296-2.8416-7.85408 3.2768-20.18304 19.79904-29.6704 30.10048C919.3472 517.38624 931.17952 526.88384 943.01184 536.38144L943.01184 536.38144z" p-id="5681"/><path d="M986.07104 592.82432c0 0 21.46304-10.79296 27.86304-20.992 6.4-10.19392 2.72896-18.46272-1.39264-23.93088-4.11648-5.46816-9.43616-8.32512-17.1008-7.36256-7.66464 0.96256-22.50752 12.35456-33.3312 19.0208C970.09664 570.65472 978.08384 581.73952 986.07104 592.82432L986.07104 592.82432z" p-id="5682"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/java.svg b/src/icons/svg/java.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e2effbbf0a9a46e85cb7b8593b9b52a81e9a5934
--- /dev/null
+++ b/src/icons/svg/java.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="749" t="1547192680027" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M377.596784 791.989528s-39.199482 22.799699 27.799633 30.399598c81.198926 9.199878 122.598379 7.999894 211.997197-8.999881 0 0 23.599688 14.799804 56.399254 27.599635C473.395518 926.787745 220.198866 835.988946 377.596784 791.989528m-24.399677-112.198517s-43.799421 32.399572 23.199693 39.399479c86.598855 8.999881 155.197948 9.599873 273.596382-13.199825 0 0 16.399783 16.599781 42.199442 25.599661-242.596792 70.999061-512.593222 5.799923-338.995517-51.799315m206.397271-190.197485c49.399347 56.799249-12.999828 107.998572-12.999828 107.998572s125.398342-64.799143 67.799103-145.798072c-53.799289-75.599-94.998744-113.198503 128.198305-242.596792 0.199997 0-350.395367 87.598842-182.99758 280.396292m265.196493 385.194907s28.999617 23.799685-31.799579 42.399439c-115.798469 34.999537-481.593632 45.599397-583.192289 1.399982-36.599516-15.799791 31.999577-37.999498 53.599291-42.599437 22.399704-4.799937 35.399532-3.999947 35.399532-3.999947-40.599463-28.599622-262.596528 56.199257-112.798508 80.398937 408.3946 66.399122 744.790152-29.799606 638.791553-77.598974M396.396536 563.592548s-186.197538 44.199416-65.999128 60.199204c50.799328 6.79991 151.99799 5.199931 246.196745-2.599966 76.998982-6.399915 154.397958-20.39973 154.397958-20.39973s-27.19964 11.599847-46.799381 24.999669c-188.997501 49.799342-553.992675 26.599648-448.994063-24.19968 88.998823-42.799434 161.197869-37.999498 161.197869-37.999497m333.995583 186.597532c192.197459-99.79868 103.198635-195.797411 41.199456-182.797582-15.199799 3.199958-21.999709 5.999921-21.999709 5.99992s5.599926-8.799884 16.399783-12.599833c122.598379-43.199429 216.997131 127.198318-39.599477 194.597427 0-0.199997 2.99996-2.799963 3.999947-5.199932M614.393653 0s106.398593 106.398593-100.998664 269.99643c-166.197802 131.198265-37.999498 206.197274 0 291.596144-96.998717-87.598842-168.197776-164.597824-120.398408-236.396874C463.195652 220.197088 657.393085 168.997765 614.393653 0m-198.997369 1020.786502c184.397562 11.799844 467.593817-6.599913 474.19373-93.798759 0 0-12.799831 32.999564-152.397985 59.399214-157.397919 29.599609-351.595351 26.199654-466.59383 7.199905 0-0.199997 23.599688 19.399743 144.798085 27.19964" p-id="750"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/log.svg b/src/icons/svg/log.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4fefe747c6f4826edd731aacedb70d6f04e8e129
--- /dev/null
+++ b/src/icons/svg/log.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="4026" t="1547360510388" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M787.692308 275.692308V78.769231c0-43.323077-35.446154-78.769231-78.769231-78.769231H78.769231C35.446154 0 0 35.446154 0 78.769231v866.461538c0 43.323077 35.446154 78.769231 78.769231 78.769231h354.461538v-39.384615H78.769231c-19.692308 0-39.384615-15.753846-39.384616-39.384616V78.769231c0-23.630769 15.753846-39.384615 39.384616-39.384616h630.153846c19.692308 0 39.384615 15.753846 39.384615 39.384616v196.923077h39.384616z" p-id="4027"/><path fill="#bfbfbf" d="M137.846154 472.615385h196.923077c11.815385 0 19.692308 7.876923 19.692307 19.692307s-7.876923 19.692308-19.692307 19.692308h-196.923077c-11.815385 0-19.692308-7.876923-19.692308-19.692308s7.876923-19.692308 19.692308-19.692307zM137.846154 669.538462h118.153846c11.815385 0 19.692308 7.876923 19.692308 19.692307s-7.876923 19.692308-19.692308 19.692308h-118.153846c-11.815385 0-19.692308-7.876923-19.692308-19.692308s7.876923-19.692308 19.692308-19.692307zM137.846154 275.692308h354.461538c11.815385 0 19.692308 7.876923 19.692308 19.692307s-7.876923 19.692308-19.692308 19.692308h-354.461538c-11.815385 0-19.692308-7.876923-19.692308-19.692308s7.876923-19.692308 19.692308-19.692307zM716.8 433.230769c7.876923 0 19.692308 0 31.507692 3.938462 0 3.938462 3.938462 11.815385 3.938462 19.692307 3.938462 23.630769 11.815385 63.015385 55.138461 78.769231 7.876923 3.938462 15.753846 3.938462 19.692308 3.938462 31.507692 0 51.2-19.692308 66.953846-35.446154l11.815385-11.815385c43.323077 19.692308 66.953846 51.2 70.892308 98.461539-3.938462 3.938462-11.815385 7.876923-19.692308 7.876923-15.753846 7.876923-51.2 27.569231-51.2 70.892308s39.384615 63.015385 63.015384 74.830769c3.938462 3.938462 11.815385 7.876923 19.692308 7.876923-3.938462 47.261538-27.569231 74.830769-74.830769 98.461538l-11.815385-11.815384c-15.753846-15.753846-35.446154-31.507692-66.953846-31.507693-7.876923 0-15.753846 0-23.630769 3.938462-43.323077 11.815385-51.2 51.2-55.138462 74.830769 0 3.938462-3.938462 11.815385-3.938461 15.753846-11.815385 0-19.692308 3.938462-31.507692 3.938462-35.446154 0-63.015385-11.815385-86.646154-39.384616 0-3.938462 3.938462-11.815385 7.876923-15.753846 11.815385-23.630769 31.507692-59.076923 3.938461-94.523077-7.876923-11.815385-27.569231-27.569231-63.015384-27.56923-11.815385 0-19.692308 0-31.507693 3.938461-7.876923 0-15.753846 3.938462-19.692307 3.938462-23.630769-43.323077-23.630769-78.769231 0-122.092308 3.938462 0 11.815385 0 19.692307 3.938462 7.876923 0 19.692308 3.938462 31.507693 3.938461 31.507692 0 51.2-15.753846 63.015384-27.569231 27.569231-35.446154 7.876923-74.830769-3.938461-94.523077-3.938462-3.938462-7.876923-11.815385-7.876923-15.753846 23.630769-39.384615 51.2-51.2 82.707692-51.2m0-39.384615c-47.261538 0-82.707692 19.692308-118.153846 55.138461-27.569231 31.507692 35.446154 78.769231 11.815384 110.276923-7.876923 11.815385-19.692308 11.815385-31.507692 11.815385-15.753846 0-35.446154-3.938462-51.2-3.938461-11.815385 0-23.630769 3.938462-31.507692 15.753846-31.507692 55.138462-31.507692 110.276923 0 169.353846 7.876923 11.815385 19.692308 15.753846 31.507692 15.753846 15.753846 0 35.446154-3.938462 51.2-3.938462 11.815385 0 23.630769 3.938462 31.507692 11.815385 23.630769 35.446154-43.323077 78.769231-11.815384 110.276923 35.446154 39.384615 74.830769 55.138462 122.092308 55.138462 11.815385 0 27.569231 0 43.323076-3.938462 43.323077-7.876923 19.692308-78.769231 59.076924-94.523077h7.876923c31.507692 0 51.2 47.261538 78.76923 47.261539 3.938462 0 7.876923 0 11.815385-3.938462 63.015385-27.569231 94.523077-70.892308 102.4-133.907692 3.938462-43.323077-78.769231-43.323077-78.769231-82.707692 0-43.323077 82.707692-39.384615 78.769231-82.707693-7.876923-63.015385-39.384615-110.276923-102.4-133.907692-3.938462 0-7.876923-3.938462-11.815385-3.938462-31.507692 0-51.2 51.2-82.707692 51.2h-7.876923c-39.384615-11.815385-15.753846-86.646154-59.076923-98.461538-15.753846-7.876923-27.569231-7.876923-43.323077-7.876923z" p-id="4028"/><path fill="#bfbfbf" d="M748.307692 590.769231c43.323077 0 78.769231 35.446154 78.769231 78.769231s-35.446154 78.769231-78.769231 78.76923-78.769231-35.446154-78.76923-78.76923 35.446154-78.769231 78.76923-78.769231m0-39.384616c-66.953846 0-118.153846 51.2-118.153846 118.153847s51.2 118.153846 118.153846 118.153846 118.153846-51.2 118.153846-118.153846-51.2-118.153846-118.153846-118.153847z" p-id="4029"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/login.svg b/src/icons/svg/login.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cc5a854e096abd7011aaa420a2bde03b00811370
--- /dev/null
+++ b/src/icons/svg/login.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="1575115830633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2251" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z" fill="#cdcdcd" p-id="2252"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/markdown.svg b/src/icons/svg/markdown.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7cd67475b392ea7ae8dd3f161f452daaaf7f7aec
--- /dev/null
+++ b/src/icons/svg/markdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="983" t="1552025141027" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M895.318 192H128.682C93.008 192 64 220.968 64 256.616v510.698C64 802.986 93.008 832 128.682 832h766.636C930.992 832 960 802.986 960 767.312V256.616C960 220.968 930.992 192 895.318 192zM568.046 704h-112.096v-192l-84.08 107.756L287.826 512v192H175.738V320h112.088l84.044 135.96 84.08-135.96h112.096v384z m167.314 0l-139.27-192h84v-192h112.086v192h84.054l-140.906 192h0.036z" p-id="984"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/menu.svg b/src/icons/svg/menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e4360a021fa7379b19fe61f1abb08bac68bf15f4
--- /dev/null
+++ b/src/icons/svg/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="2559" t="1545037285158" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M96 128h832v192H96zM96 416h832v192H96zM96 704h832v192H96z" p-id="2560"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/mnt.svg b/src/icons/svg/mnt.svg
new file mode 100644
index 0000000000000000000000000000000000000000..502a7c055febecef0c732bcc7c17f2aecc2a249a
--- /dev/null
+++ b/src/icons/svg/mnt.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="1574572606408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1870" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M870.4 793.6H153.6C68.9024 793.6 0 724.6976 0 640V153.6C0 68.9024 68.9024 0 153.6 0h716.8c84.6976 0 153.6 68.9024 153.6 153.6v486.4c0 84.6976-68.9024 153.6-153.6 153.6zM153.6 51.2c-56.4608 0-102.4 45.9392-102.4 102.4v486.4c0 56.4608 45.9392 102.4 102.4 102.4h716.8c56.4608 0 102.4-45.9392 102.4-102.4V153.6c0-56.4608-45.9392-102.4-102.4-102.4H153.6zM793.6 1024H230.4a25.6 25.6 0 0 1 0-51.2h563.2a25.6 25.6 0 0 1 0 51.2zM633.6 908.8h-243.2a25.6 25.6 0 0 1 0-51.2h243.2a25.6 25.6 0 0 1 0 51.2z" fill="#bfbfbf" p-id="1871"></path><path d="M349.0688 404.3008A25.664 25.664 0 0 1 330.9568 396.8l-54.2976-54.3104a25.6 25.6 0 0 1 36.2112-36.2112l44.2624 44.2752 88.2688-20.3648 20.3648-88.256-44.2752-44.2752a25.6 25.6 0 1 1 36.1984-36.1984L512 215.7824c6.2464 6.2336 8.8192 15.2576 6.848 23.8592l-27.1616 117.6704a25.6 25.6 0 0 1-19.1872 19.1872l-117.6832 27.1488a25.7792 25.7792 0 0 1-5.7472 0.6528zM584.4096 639.6288a25.4976 25.4976 0 0 1-18.0992-7.5008L512 577.8304a25.5616 25.5616 0 0 1-6.848-23.8464l27.1488-117.6832a25.6256 25.6256 0 0 1 19.2-19.1872l117.6704-27.1488a25.536 25.536 0 0 1 23.8464 6.848l54.2976 54.3104a25.6 25.6 0 0 1-36.1984 36.2112l-44.2752-44.2752-88.256 20.3648-20.3648 88.256 44.2752 44.2752a25.6 25.6 0 0 1-18.0864 43.6736z" fill="#bfbfbf" p-id="1872"></path><path d="M557.248 467.648a25.4976 25.4976 0 0 1-18.0992-7.5008l-90.496-90.496a25.6 25.6 0 1 1 36.1984-36.1984l90.496 90.496a25.6 25.6 0 0 1-18.0992 43.6992z" fill="#bfbfbf" p-id="1873"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/monitor.svg b/src/icons/svg/monitor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fbf0a2f2a7b0493f6cf95dc49bc96d45b0348238
--- /dev/null
+++ b/src/icons/svg/monitor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="4695" t="1543827393750" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css">@font-face{font-family:rbicon;src:url(chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2) format(&quot;woff2&quot;);font-weight:400;font-style:normal}</style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="4696"/><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="4697"/><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"/></svg>
diff --git a/src/icons/svg/permission.svg b/src/icons/svg/permission.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4c7409102744dcfb21bad7e84f926cb4b6991b4
--- /dev/null
+++ b/src/icons/svg/permission.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="3778" t="1543477660371" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css">@font-face{font-family:rbicon;src:url(chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2) format(&quot;woff2&quot;);font-weight:400;font-style:normal}</style></defs><path d="M418.496 705.6 383.296 705.6l0-53.248 0 0C384 484.48 257.28 503.808 255.872 503.808L255.488 503.744c-133.504 0-125.632 146.112-125.632 148.608l0 53.248L91.84 705.6C76.032 705.6 64 716.864 64 731.52l0 201.152c0 14.72 12.032 25.856 27.84 25.856l326.656 0c15.808 0 28.096-11.136 28.096-25.856L446.592 731.52C446.592 716.864 434.24 705.6 418.496 705.6zM175.936 652.352c0-0.448-4.928-100.8 77.376-100.8 7.296 0.256 78.144-4.032 78.144 100.8l0 53.248-155.52 0L175.936 652.352zM960 889.024c0 61.12-77.824 69.504-77.824 69.504L635.776 958.528l-80.64 0c0 0-41.088 0.96-41.088-39.168l-1.344-196.928C514.304 533.376 464 464.768 348.8 427.264c-33.344-24.96-47.168-31.296-47.168-78.528 0-47.232 38.848-47.232 38.848-47.232s0 1.344 13.824-76.416c13.44-75.456 87.232-155.968 208.32-160.64L562.624 64c1.792 0 3.456 0.192 5.248 0.192C569.856 64.192 571.776 64 573.824 64l0 0.512c105.28 5.312 181.056 85.44 194.432 160.576 13.888 77.76 13.888 76.416 13.888 76.416s38.848 0 38.848 47.232c0 47.232-13.824 63.936-47.168 88.896C740.48 462.656 750.4 516.48 698.88 563.968c-27.52 25.344-47.232 44.48-47.232 80.64 0 36.032 19.456 44.352 38.848 55.488s150.016 47.232 211.136 88.96S960 852.928 960 889.024z" p-id="3779"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/phone.svg b/src/icons/svg/phone.svg
new file mode 100644
index 0000000000000000000000000000000000000000..da339f978cce8d69fad98b1d9459dedecbdb4d9f
--- /dev/null
+++ b/src/icons/svg/phone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1989" t="1554009861477" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#8a8a8a" d="M756.081 1012.218 291.154 1012.218c-68.473 0-123.982-55.975-123.982-125.054L167.172 136.836c0-69.078 55.512-125.054 123.982-125.054l464.928 0c68.474 0 123.984 55.975 123.984 125.054l0 750.328C880.066 956.242 824.555 1012.218 756.081 1012.218L756.081 1012.218zM818.062 136.836c0-34.516-27.751-62.526-61.98-62.526L291.154 74.31c-34.228 0-61.991 28.01-61.991 62.526l0 31.268 588.899 0L818.062 136.836 818.062 136.836zM818.062 230.63 229.163 230.63l0 499.242 588.899 0L818.062 230.63 818.062 230.63zM818.062 792.398 229.163 792.398l0 94.766c0 34.54 27.765 62.526 61.991 62.526l464.928 0c34.229 0 61.98-27.986 61.98-62.526L818.062 792.398 818.062 792.398zM523.623 918.429c-25.668 0-46.482-20.993-46.482-46.896 0-25.903 20.816-46.895 46.482-46.895 25.664 0 46.477 20.993 46.477 46.895S549.287 918.429 523.623 918.429L523.623 918.429z" p-id="1990"/><path fill="#8a8a8a" d="M756.081 1017.218 291.154 1017.218c-71.121 0-128.982-58.342-128.982-130.054L162.172 136.836c0-71.712 57.861-130.054 128.982-130.054l464.928 0c71.122 0 128.984 58.342 128.984 130.054l0 750.328C885.066 958.876 827.204 1017.218 756.081 1017.218zM291.154 16.783c-65.607 0-118.982 53.856-118.982 120.054l0 750.328c0 66.198 53.375 120.054 118.982 120.054l464.927 0c65.608 0 118.985-53.855 118.985-120.054L875.066 136.836c0-66.198-53.376-120.054-118.984-120.054L291.154 16.782zM756.082 954.69 291.154 954.69c-36.939 0-66.991-30.292-66.991-67.526l0-99.766 598.899 0 0.001 99.766C823.063 924.398 793.016 954.69 756.082 954.69zM234.163 797.398l0 89.766c0 31.72 25.566 57.526 56.991 57.526l464.928 0c31.419 0 56.98-25.807 56.98-57.526l0-89.766L234.163 797.398zM523.623 923.429c-28.387 0-51.482-23.28-51.482-51.896s23.096-51.895 51.482-51.895c28.385 0 51.477 23.279 51.477 51.895S552.008 923.429 523.623 923.429zM523.623 829.639c-22.873 0-41.482 18.794-41.482 41.895 0 23.102 18.609 41.896 41.482 41.896 22.871 0 41.477-18.794 41.477-41.896C565.1 848.433 546.494 829.639 523.623 829.639zM823.062 734.872 224.163 734.872 224.163 225.63l598.899 0L823.062 734.872zM234.163 724.872l578.899 0L813.062 235.63 234.163 235.63 234.163 724.872zM823.062 173.104 224.163 173.104l0-36.268c0-37.234 30.052-67.526 66.991-67.526l464.927 0c36.934 0 66.98 30.292 66.98 67.526L823.061 173.104zM234.163 163.104l578.899 0 0-26.268c0-31.72-25.562-57.526-56.98-57.526L291.154 79.31c-31.425 0-56.991 25.806-56.991 57.526L234.163 163.104z" p-id="1991"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/qiniu.svg b/src/icons/svg/qiniu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c2f9f8b2465c2e1e0bc44bd5291f72e83717f73d
--- /dev/null
+++ b/src/icons/svg/qiniu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1276" t="1546225865881" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M892.928 499.712c-45.056-45.056-116.736-45.056-161.792 0-36.864 36.864-43.008 92.16-20.48 135.168L602.112 743.424c-51.2 51.2-137.216 45.056-194.56-10.24s-61.44-143.36-10.24-194.56L522.24 413.696l-45.056-45.056-124.928 124.928c-75.776 75.776-71.68 204.8 10.24 286.72 43.008 43.008 98.304 65.536 153.6 65.536 49.152 0 96.256-18.432 133.12-53.248L757.76 684.032c16.384 8.192 34.816 14.336 55.296 14.336 28.672 0 59.392-10.24 79.872-32.768 45.056-49.152 45.056-122.88 0-165.888zM847.872 614.4c-18.432 18.432-51.2 18.432-69.632 0-18.432-18.432-18.432-51.2 0-69.632 10.24-10.24 22.528-14.336 34.816-14.336s24.576 4.096 34.816 14.336c18.432 18.432 18.432 51.2 0 69.632z" p-id="1277"/><path fill="#bfbfbf" d="M296.96 372.736l108.544-108.544c51.2-51.2 137.216-45.056 194.56 10.24 26.624 26.624 43.008 63.488 45.056 100.352 2.048 36.864-10.24 69.632-34.816 94.208L485.376 593.92l45.056 45.056L655.36 514.048c36.864-36.864 55.296-88.064 53.248-141.312-2.048-53.248-24.576-104.448-63.488-143.36-81.92-81.92-208.896-86.016-286.72-10.24L249.856 327.68c-43.008-22.528-98.304-16.384-135.168 20.48-45.056 45.056-45.056 116.736 0 161.792 22.528 22.528 51.2 32.768 79.872 32.768s59.392-10.24 79.872-32.768c38.912-38.912 45.056-94.208 22.528-137.216z m-65.536 90.112c-18.432 18.432-51.2 18.432-69.632 0-18.432-18.432-18.432-51.2 0-69.632 10.24-10.24 22.528-14.336 34.816-14.336 12.288 0 24.576 4.096 34.816 14.336 18.432 18.432 18.432 49.152 0 69.632z" p-id="1278"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/redis.svg b/src/icons/svg/redis.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bef111b63e238b4b1c22ab927c29823fc817a8e8
--- /dev/null
+++ b/src/icons/svg/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="1547360607827" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6287" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M900.512 388.751V287.87L512.708 63.967 124.904 287.87v240.093c-23.42 6.798-40.924 27.562-40.924 53.144s17.504 46.346 40.924 53.144v101.424l387.804 223.862 387.804-223.862V494.761c23.13-6.979 40.345-27.642 40.345-52.984 0-25.376-17.215-46.047-40.345-53.026zM114.87 581.107c0-13.999 11.356-25.355 25.355-25.355 13.958 0 25.314 11.356 25.314 25.355s-11.356 25.355-25.314 25.355c-13.999 0-25.355-11.356-25.355-25.355z m754.753 136.729L512.708 923.858 155.793 717.836v-83.638c23.265-6.883 40.635-27.603 40.635-53.09 0-25.487-17.37-46.207-40.635-53.09V305.709L512.708 99.646l356.915 206.063v82.856c-23.585 6.692-41.254 27.513-41.254 53.212 0 25.665 17.669 46.48 41.254 53.17v222.889z m14.99-250.745c-13.999 0-25.355-11.356-25.355-25.314 0-13.999 11.356-25.355 25.355-25.355s25.355 11.356 25.355 25.355c0 13.958-11.356 25.314-25.355 25.314z m-184.631-117.32c-5.947-2.271-12.678-0.661-17.014 4.047L511.841 542.29 338.029 357.576c-4.295-4.666-10.985-6.153-16.931-3.758a15.428 15.428 0 0 0-9.746 14.329v315.867h30.889V407.089l158.574 168.526a15.404 15.404 0 0 0 11.232 4.873c3.469-0.289 8.507-1.9 11.439-5.079l155.477-171.251v279.817h30.889v-319.79a15.492 15.492 0 0 0-9.87-14.414z" fill="#bfbfbf" p-id="6288"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/role.svg b/src/icons/svg/role.svg
new file mode 100644
index 0000000000000000000000000000000000000000..76cb18ff3a318a3aea2d83705f564a8a59a452ed
--- /dev/null
+++ b/src/icons/svg/role.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="2866" t="1543477186503" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css">@font-face{font-family:rbicon;src:url(chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2) format(&quot;woff2&quot;);font-weight:400;font-style:normal}</style></defs><path d="M609.093716 908.277839c0-106.125689 85.803749-191.929438 191.929438-191.929438 38.950386 0 75.07828 11.854465 105.561191 31.611907l0-3.38699c0-60.965821-71.69129-136.044101-128.705623-145.076075l76.771775-127.012128-178.945976 0c32.176406-46.288864 53.627343-107.254686 53.627343-174.994487 0-5.080485 0-10.725469 0-15.805954 69.433297-12.418964 114.593164-32.176406 114.593164-51.933848 0-21.450937-50.240353-41.208379-127.012128-53.627343C712.961411 158.059537 661.592062 11.289967 600.62624 11.289967c-27.095921 0-48.546858 14.112459-62.659316 35.563396 0 10.725469-10.725469 21.450937-24.837927 21.450937-12.418964 0-23.144432-9.031974-24.837927-19.757442C475.307607 27.660419 452.163175 11.289967 425.631753 11.289967 366.359427 11.289967 311.038589 145.640573 298.619625 179.510474 232.573319 191.929438 189.671444 209.993385 189.671444 231.444322c0 21.450937 44.595369 39.514884 114.593164 51.933848 0 5.080485 0 10.725469 0 15.805954 0 67.739802 19.757442 128.705623 53.627343 174.994487L178.945976 474.178611l76.771775 125.318633c-57.014333 0-132.092613 78.46527-132.092613 146.76957l1.693495 205.477398c0 33.869901 26.531422 60.965821 60.965821 60.965821l453.85667 0C620.383682 982.227122 609.093716 946.663727 609.093716 908.277839zM468.533627 962.46968l-28.789416 0-53.627343-395.148842 112.335171 98.222712L468.533627 962.46968zM498.45204 351.117971c-7.338479 62.659316-39.514884 76.771775-57.014333 76.771775-42.901874 0-55.320838-57.014333-57.014333-76.771775l-14.112459 0L370.310915 338.699008l0-12.418964 107.254686 0L477.565601 338.699008l71.69129 0 0-12.418964 107.254686 0L656.511577 338.699008l3.38699 0 0 12.418964-14.112459 0c0 0-9.031974 76.771775-57.014333 76.771775C539.660419 427.889746 530.628445 351.117971 530.628445 351.117971L498.45204 351.117971zM562.804851 962.46968l-30.482911-296.92613 112.335171-99.916207-53.627343 396.842337L562.804851 962.46968z" p-id="2867"/><path d="M918.438809 907.148842c0 1.693495-1.128997 2.822492-2.822492 2.822492l-97.658214 0 0 97.658214c0 1.693495-1.128997 2.822492-2.822492 2.822492l-43.466373 0c-1.693495 0-2.822492-1.128997-2.822492-2.822492l0-97.658214-97.658214 0c-1.693495 0-2.822492-1.128997-2.822492-2.822492L668.366042 863.68247c0-1.693495 1.128997-2.822492 2.822492-2.822492l97.658214 0 0-97.658214c0-1.693495 1.128997-2.822492 2.822492-2.822492l43.466373 0c1.693495 0 2.822492 1.128997 2.822492 2.822492l0 97.658214 97.658214 0c1.693495 0 2.822492 1.128997 2.822492 2.822492L918.438809 907.148842z" p-id="2868"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/server.svg b/src/icons/svg/server.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db6dcdf59f3b16860de37ff2abbfcc08cb74aa01
--- /dev/null
+++ b/src/icons/svg/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="1574576420335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9530" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M915.94 827.89h-91.42a12.5 12.5 0 0 1 0-25h78.92v-535h-78.92a12.5 12.5 0 1 1 0-25h91.42a12.5 12.5 0 0 1 12.5 12.5v560a12.5 12.5 0 0 1-12.5 12.5z" fill="#cdcdcd" p-id="9531"></path><path d="M915.94 547.91h-91.42a12.5 12.5 0 0 1 0-25h91.42a12.5 12.5 0 0 1 0 25z" fill="#cdcdcd" p-id="9532"></path><path d="M774.6 231.51a90.63 90.63 0 0 1-90.37 90.37H215.94a90.62 90.62 0 0 1-81.18-50.81 88.92 88.92 0 0 0 15.4 1.33h468.29a90.26 90.26 0 0 0 81.18-129.92c42.44 7.35 74.97 44.57 74.97 89.03z" fill="#cdcdcd" p-id="9533"></path><path d="M684.23 334.38H215.94a102.23 102.23 0 0 1-55.12-16.11 103.66 103.66 0 0 1-37.28-41.69 12.5 12.5 0 0 1 13.38-17.82 76.71 76.71 0 0 0 13.24 1.14h468.29a77.76 77.76 0 0 0 70-111.91 12.5 12.5 0 0 1 13.35-17.83 103.18 103.18 0 0 1 85.3 101.35 103.13 103.13 0 0 1-102.87 102.87zM159.46 284.9a78.31 78.31 0 0 0 56.48 24.48h468.29a77.75 77.75 0 0 0 59.28-128.2 78.73 78.73 0 0 0-24.14-19.08 103.06 103.06 0 0 1-100.92 122.8z" fill="#cdcdcd" p-id="9534"></path><path d="M618.45 284.91H150.16a102.86 102.86 0 1 1 0-205.73h468.29a102.86 102.86 0 0 1 0 205.73zM150.16 104.18a77.86 77.86 0 1 0 0 155.73h468.29a77.86 77.86 0 0 0 0-155.73z" fill="#cdcdcd" p-id="9535"></path><path d="M176.2 235.43A53.39 53.39 0 1 1 229.59 182a53.45 53.45 0 0 1-53.39 53.43z m0-81.78A28.39 28.39 0 1 0 204.59 182a28.43 28.43 0 0 0-28.39-28.35zM551.12 194.54H423a12.5 12.5 0 0 1 0-25h128.12a12.5 12.5 0 0 1 0 25z" fill="#cdcdcd" p-id="9536"></path><path d="M774.6 534.74a90.63 90.63 0 0 1-90.37 90.37H215.94a90.62 90.62 0 0 1-81.18-50.81 88.92 88.92 0 0 0 15.4 1.33h468.29a90.26 90.26 0 0 0 81.18-129.92c42.44 7.35 74.97 44.57 74.97 89.03z" fill="#cdcdcd" p-id="9537"></path><path d="M684.23 637.61H215.94a102.23 102.23 0 0 1-55.12-16.11 103.66 103.66 0 0 1-37.28-41.69A12.5 12.5 0 0 1 136.92 562a76.71 76.71 0 0 0 13.24 1.14h468.29a77.76 77.76 0 0 0 70-111.91 12.5 12.5 0 0 1 13.35-17.83 103.18 103.18 0 0 1 85.3 101.34 103.13 103.13 0 0 1-102.87 102.87z m-524.77-49.48a78.31 78.31 0 0 0 56.48 24.48h468.29a77.75 77.75 0 0 0 59.28-128.2 78.73 78.73 0 0 0-24.14-19.08 103.06 103.06 0 0 1-100.92 122.8z" fill="#cdcdcd" p-id="9538"></path><path d="M618.45 588.13H150.16a102.86 102.86 0 1 1 0-205.73h468.29a102.86 102.86 0 0 1 0 205.73zM150.16 407.4a77.86 77.86 0 1 0 0 155.73h468.29a77.86 77.86 0 0 0 0-155.73z" fill="#cdcdcd" p-id="9539"></path><path d="M176.2 538.66a53.39 53.39 0 1 1 53.39-53.39 53.45 53.45 0 0 1-53.39 53.39z m0-81.78a28.39 28.39 0 1 0 28.39 28.39 28.43 28.43 0 0 0-28.39-28.39zM551.12 497.77H423a12.5 12.5 0 0 1 0-25h128.12a12.5 12.5 0 0 1 0 25z" fill="#cdcdcd" p-id="9540"></path><path d="M774.6 869.33a90.63 90.63 0 0 1-90.37 90.37H215.94a90.62 90.62 0 0 1-81.18-50.81 88.92 88.92 0 0 0 15.4 1.33h468.29a90.26 90.26 0 0 0 81.18-129.92c42.44 7.35 74.97 44.57 74.97 89.03z" fill="#cdcdcd" p-id="9541"></path><path d="M684.23 972.2H215.94a102.23 102.23 0 0 1-55.12-16.11 103.66 103.66 0 0 1-37.28-41.69 12.5 12.5 0 0 1 13.38-17.82 76.71 76.71 0 0 0 13.24 1.14h468.29a77.76 77.76 0 0 0 70-111.91A12.5 12.5 0 0 1 701.76 768a102.73 102.73 0 0 1 55.14 174 102.16 102.16 0 0 1-72.67 30.2z m-524.77-49.48a78.31 78.31 0 0 0 56.48 24.48h468.29A77.75 77.75 0 0 0 743.51 819a78.71 78.71 0 0 0-24.14-19.08 103.06 103.06 0 0 1-100.92 122.8z" fill="#cdcdcd" p-id="9542"></path><path d="M618.45 922.72H150.16a102.86 102.86 0 1 1 0-205.73h468.29a102.86 102.86 0 0 1 0 205.73zM150.16 742a77.86 77.86 0 1 0 0 155.73h468.29a77.86 77.86 0 1 0 0-155.73z" fill="#cdcdcd" p-id="9543"></path><path d="M176.2 873.25a53.39 53.39 0 1 1 53.39-53.39 53.45 53.45 0 0 1-53.39 53.39z m0-81.78a28.39 28.39 0 1 0 28.39 28.39 28.42 28.42 0 0 0-28.39-28.4zM551.12 832.35H423a12.5 12.5 0 0 1 0-25h128.12a12.5 12.5 0 0 1 0 25z" fill="#cdcdcd" p-id="9544"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/source.svg b/src/icons/svg/source.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1c3a03805dea252929dc84a9bc55ea456709e465
--- /dev/null
+++ b/src/icons/svg/source.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="1574679314986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2155" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M546.26 538.81v257.63c0 18.38-14.9 33.29-33.29 33.29-18.01 0.37-32.91-13.93-33.29-31.94-0.01-0.45-0.01-0.9 0-1.35V538.81l-233-134.47c-15.73-9.25-21.07-29.45-11.98-45.27 8.82-15.71 28.7-21.3 44.41-12.48 0.29 0.16 0.57 0.33 0.86 0.5l233 133.14 231-133.14c15.43-9.29 35.48-4.31 44.77 11.13 0.17 0.28 0.34 0.57 0.5 0.86 9.09 15.82 3.74 36.01-11.98 45.27l-231 133.14v1.32z" fill="#515151" p-id="2156"></path><path d="M512 1006.74c-18.08 0-36.14-4.65-52.27-13.96L121.77 797.65c-32.24-18.61-52.27-53.3-52.27-90.53V316.87c0-37.23 20.03-71.92 52.27-90.53L459.73 31.22c32.24-18.61 72.29-18.61 104.53 0l337.97 195.13c32.24 18.61 52.27 53.3 52.27 90.53v390.25c0 37.23-20.03 71.92-52.27 90.53L564.27 992.78c-16.12 9.3-34.2 13.96-52.27 13.96z m0-940.77c-9.65 0-19.29 2.48-27.9 7.45L146.13 268.55c-17.21 9.94-27.9 28.45-27.9 48.32v390.25c0 19.87 10.69 38.39 27.9 48.32L484.1 950.57c17.21 9.94 38.59 9.93 55.8 0l337.97-195.13c17.21-9.94 27.9-28.45 27.9-48.32V316.87c0-19.87-10.69-38.39-27.9-48.32L539.9 73.43a55.757 55.757 0 0 0-27.9-7.46z" fill="#515151" p-id="2157"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/sqlMonitor.svg b/src/icons/svg/sqlMonitor.svg
new file mode 100644
index 0000000000000000000000000000000000000000..950a430d15685be17e5e7a26c93ee36921c1bf92
--- /dev/null
+++ b/src/icons/svg/sqlMonitor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="6696" t="1544607518503" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M896 716.8c-44.8 0-76.8 25.6-96 57.6L460.8 614.4l147.2-243.2c25.6 12.8 51.2 25.6 83.2 25.6 83.2 0 153.6-70.4 153.6-153.6s-70.4-153.6-153.6-153.6-153.6 64-153.6 147.2c0 19.2 6.4 38.4 12.8 57.6L300.8 403.2c-25.6-44.8-76.8-76.8-134.4-76.8C83.2 326.4 12.8 396.8 12.8 480c0 83.2 70.4 153.6 153.6 153.6 12.8 0 19.2 0 32-6.4l57.6 128c-12.8 12.8-19.2 25.6-19.2 44.8 0 38.4 32 64 64 64 38.4 0 64-32 64-64 0-12.8-6.4-19.2-6.4-32l70.4-121.6 352 166.4v6.4c0 64 51.2 115.2 115.2 115.2s115.2-51.2 115.2-115.2-51.2-102.4-115.2-102.4z m-204.8-582.4c57.6 0 108.8 44.8 108.8 108.8s-44.8 108.8-108.8 108.8-108.8-57.6-108.8-115.2 51.2-102.4 108.8-102.4zM569.6 332.8l-153.6 256-108.8-44.8c6.4-19.2 12.8-44.8 12.8-64V448l249.6-115.2zM64 480c0-57.6 44.8-108.8 108.8-108.8s108.8 44.8 108.8 108.8c0 57.6-44.8 108.8-108.8 108.8S64 537.6 64 480z m262.4 262.4c-6.4 0-12.8-6.4-19.2-6.4h-6.4l-57.6-128c12.8-6.4 25.6-12.8 38.4-25.6l108.8 51.2-64 108.8z m569.6 147.2c-38.4 0-64-32-64-64 0-38.4 32-64 64-64s64 32 64 64c0 38.4-25.6 64-64 64z" p-id="6697"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/swagger.svg b/src/icons/svg/swagger.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ded7de81ac7f9240972ab281b2cfbe2a3dd43caf
--- /dev/null
+++ b/src/icons/svg/swagger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="3388" t="1553861152984" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M306.689473 349.006765l408.370805-0.3776c22.463618 0 40.678468-18.213827 40.678468-40.678468 0-22.463618-18.21485-40.677445-40.678468-40.677445l-408.370805 0.3776c-22.465664 0-40.679491 18.203594-40.679491 40.678468C266.009981 330.792938 284.223808 349.006765 306.689473 349.006765z" p-id="3389"/><path fill="#bfbfbf" d="M306.689473 511.719614l408.370805-0.3776c22.463618 0 40.678468-18.213827 40.678468-40.677445 0-22.463618-18.21485-40.677445-40.678468-40.677445l-408.370805 0.3776c-22.465664 0-40.679491 18.202571-40.679491 40.677445C266.009981 493.505787 284.223808 511.719614 306.689473 511.719614z" p-id="3390"/><path fill="#bfbfbf" d="M877.157095 624.190175l-0.337691-482.536968c-1.905396-43.141566-37.141922-77.602426-80.721463-77.751828l-573.366649 0.327458c-43.220361 1.917676-77.763085 37.302581-77.763085 80.999802l0 43.220361-0.335644 0 0.277316 645.76761 0.058328 0 0 43.220361c0 44.928259 36.428677 81.354889 81.357959 81.354889l40.677445 0 0 0.229221 120.088052-0.217964c22.465664 0 40.679491-18.213827 40.679491-40.677445 0-22.465664-18.213827-40.679491-40.679491-40.679491l-104.773252 0.189312c-39.148625-3.783163-53.509704-17.011442-56.051597-58.137095l-0.278339-623.272269 0.23843 32.224935c-0.972141-69.328995 14.937201-81.882915 80.204693-82.804914l-9.414417-0.099261 419.393859-0.23843c60.562331 1.429559 78.277808 12.652158 79.114872 70.174246l0 3.744277c0 2.99931 0 5.998621-0.081864 9.245572l0.081864-4.080945 0.25685 367.961466-160.131047 0.217964 0 0.11768-43.220361 0c-44.928259 0-81.354889 36.418444-81.354889 81.357959l0 40.677445-0.278339 0 0.257873 195.506742c-2.62171 12.93152 1.033539 26.874067 11.062963 36.903491 4.031826 4.030803 8.721639 7.021927 13.68672 9.006118 4.90573 2.087545 10.287297 3.25002 15.927761 3.25002 14.20349 0 26.656103-7.290033 33.924647-18.304901l271.679609-272.363178c3.01773-1.826602 5.838985-3.932566 8.303106-6.463202 7.704472-7.398504 12.532431-17.749246 12.532431-29.278837C878.171192 629.950366 877.793592 627.031896 877.157095 624.190175zM592.290139 819.2395l-0.078795-67.76129c0.556679-61.910025 14.896268-77.462233 82.549088-77.462233l-82.071204 0.545422-0.497327 73.223698-0.099261-73.79982 145.274688-0.197498L592.290139 819.2395z" p-id="3391"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/sys-tools.svg b/src/icons/svg/sys-tools.svg
new file mode 100644
index 0000000000000000000000000000000000000000..324aa04f219a70fda00f39658dcf59f4c9e591f7
--- /dev/null
+++ b/src/icons/svg/sys-tools.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="1574576079728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6611" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M981.917808 277.742466H813.589041V122.038356c0-19.638356-15.430137-35.068493-35.068493-35.068493H252.493151c-19.638356 0-35.068493 15.430137-35.068493 35.068493v155.70411H42.082192c-19.638356 0-35.068493 15.430137-35.068493 35.068493V911.780822c0 19.638356 15.430137 35.068493 35.068493 35.068493h939.835616c19.638356 0 35.068493-15.430137 35.068493-35.068493V312.810959c0-19.638356-15.430137-35.068493-35.068493-35.068493z m-694.356164-120.635617H743.452055v120.635617H287.561644v-120.635617zM252.493151 347.879452h694.356164v133.260274h-74.345205v-50.49863c0-19.638356-15.430137-35.068493-35.068494-35.068493h-117.830137c-19.638356 0-35.068493 15.430137-35.068493 35.068493v50.49863h-336.657534v-50.49863c0-19.638356-15.430137-35.068493-35.068493-35.068493h-117.830137c-19.638356 0-35.068493 15.430137-35.068493 35.068493v50.49863H77.150685v-133.260274H252.493151z m549.873972 119.232877v140.273972h-47.69315v-140.273972h47.69315z m-526.027397 0v140.273972h-47.693151v-140.273972h47.693151zM77.150685 876.712329V551.276712h81.358904v89.775343c0 19.638356 15.430137 35.068493 35.068493 35.068493h117.830137c19.638356 0 35.068493-15.430137 35.068493-35.068493v-89.775343h336.657535v89.775343c0 19.638356 15.430137 35.068493 35.068493 35.068493h117.830137c19.638356 0 35.068493-15.430137 35.068493-35.068493v-89.775343h74.345205v324.032877H77.150685z" p-id="6612" fill="#bfbfbf"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/system.svg b/src/icons/svg/system.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9333c60ae8a2e84320923c23536de17634443ae2
--- /dev/null
+++ b/src/icons/svg/system.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.719" height="200" class="icon" p-id="10233" t="1543827724451" version="1.1" viewBox="0 0 1084 1024"><defs><style type="text/css">@font-face{font-family:rbicon;src:url(chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2) format(&quot;woff2&quot;);font-weight:400;font-style:normal}</style></defs><path fill="#bfbfbf" 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"/></svg>
diff --git a/src/icons/svg/system1.svg b/src/icons/svg/system1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..37b0a0a8d92162373ed9f1da02a1daf1d48d7a09
--- /dev/null
+++ b/src/icons/svg/system1.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="1588584086939" class="icon" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css"></style></defs><path d="M1080.096 434.5c-4.216-23.731-26.924-47.945-50.596-53.185l-17.648-4.096a175.94 175.94 0 0 1-101.613-80.832 177.807 177.807 0 0 1-18.732-129.802l5.541-16.685c7.108-23.13-2.108-54.992-20.6-70.833 0 0-16.624-14.095-63.244-41.2-46.8-26.984-66.858-34.513-66.858-34.513-22.768-8.373-54.632-0.362-71.256 17.407l-12.287 13.251a173.47 173.47 0 0 1-120.466 48.066 174.133 174.133 0 0 1-121.008-48.487l-11.745-12.83C393.14 2.992 361.096-4.899 338.268 3.354c0 0-20.359 7.529-67.1 34.513-46.8 27.346-63.244 41.44-63.244 41.44-18.431 15.661-27.647 47.223-20.54 70.593l5.06 16.866a178.048 178.048 0 0 1-18.672 129.62A174.916 174.916 0 0 1 71.496 377.46l-17.045 3.855c-23.31 5.421-46.26 29.334-50.596 53.186 0 0-3.855 21.382-3.855 75.712s3.855 75.713 3.855 75.713C8.07 609.9 30.779 633.872 54.45 639.112l16.624 3.855A174.254 174.254 0 0 1 173.47 724.28c23.31 40.838 28.911 87.338 18.732 129.802l-4.818 16.444c-7.108 23.129 2.108 54.992 20.6 70.833 0 0 16.623 14.095 63.244 41.2 46.8 27.105 66.918 34.513 66.918 34.513 22.708 8.373 54.632 0.362 71.256-17.407l11.625-12.589a175.097 175.097 0 0 1 242.257 0.12l11.624 12.65c16.384 17.708 48.428 25.599 71.256 17.347 0 0 20.359-7.53 67.16-34.514 46.74-27.105 63.124-41.2 63.124-41.2 18.491-15.6 27.707-47.463 20.6-70.833l-5.06-17.106A176.723 176.723 0 0 1 910.66 724.4a176.06 176.06 0 0 1 102.396-81.314l16.684-3.855c23.31-5.42 46.26-29.333 50.596-53.185 0 0 3.855-21.383 3.855-75.713-0.241-54.33-4.096-75.833-4.096-75.833z m-537.82 293.335c-119.26 0-216.175-97.336-216.175-217.622a216.658 216.658 0 0 1 216.236-217.32c119.2 0 216.115 97.276 216.115 217.561-0.24 120.045-96.974 217.32-216.175 217.32z" p-id="1157"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/timing.svg b/src/icons/svg/timing.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f8fdc6dd0c51937cbd13969fe7414d8fc6cd497e
--- /dev/null
+++ b/src/icons/svg/timing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="2986" t="1546864403462" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M814.502 270.913l30.18-30.18 30.58 30.58 37.825-37.825-86.377-86.378-37.825 37.825 30.58 30.58-30.18 30.18c-66.856-61.301-154.087-100.642-250.374-106.858V66.548h-53.499v72.289c-214.046 13.792-383.407 191.652-383.407 409.199 0 226.533 183.624 410.157 410.157 410.157s410.157-183.624 410.157-410.157c-0.001-106.858-40.892-204.139-107.817-277.123zM529.994 598.26v74.606h-35.666V598.26c-20.724-7.385-35.666-26.958-35.666-50.225 0-23.267 14.942-42.842 35.666-50.225v-235.1h35.666v235.102c20.724 7.383 35.666 26.958 35.666 50.225 0 23.265-14.942 42.839-35.666 50.223z" p-id="2987"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/tools.svg b/src/icons/svg/tools.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aba1a40194abdc09b4532a50b108cc5d0a86669e
--- /dev/null
+++ b/src/icons/svg/tools.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.781" height="200" class="icon" p-id="1270" t="1545876582522" version="1.1" viewBox="0 0 1028 1024"><defs><style type="text/css"/></defs><path d="M20.746854 180.67456c-27.09504 27.136-21.31968 65.35168 0.26624 86.87616 0.86016 0.83968 87.49056 83.57888 209.3056 205.4144 3.13344 3.13344 7.22944 4.66944 11.32544 4.66944s8.192-1.57696 11.32544-4.66944c6.2464-6.2464 6.2464-16.384 0-22.6304-18.37056-18.37056-35.84-35.7376-52.40832-52.18304l50.85184-50.85184c6.2464-6.2464 6.2464-16.384 0-22.6304s-16.384-6.2464-22.6304 0l-50.97472 50.97472c-28.50816-28.16-53.63712-52.736-74.07616-72.66304l115.67104-115.67104c6.2464-6.2464 6.2464-16.384 0-22.6304s-16.384-6.2464-22.6304 0l-116.03968 116.03968c-23.552-22.81472-37.13024-35.77856-37.33504-36.00384-6.7584-6.7584-15.62624-25.76384 0-41.3696l160.01024-160.01024c6.18496-6.26688 22.6304-18.71872 40.67328-0.77824 0.79872 0.90112 81.59232 92.672 204.92288 216.00256 6.2464 6.2464 16.384 6.2464 22.6304 0s6.2464-16.384 0-22.6304c-122.55232-122.53184-202.752-213.6064-204.22656-215.26528-29.81888-29.75744-65.80224-20.82816-86.6304 0l-160.03072 160.01024zM699.392614 772.66944c-6.2464-6.2464-16.384-6.2464-22.6304 0l-50.91328 50.87232c-15.52384-15.70816-31.80544-32.1536-48.96768-49.31584-6.2464-6.2464-16.384-6.2464-22.6304 0s-6.2464 16.384 0 22.6304c118.53824 118.49728 201.3184 207.01184 202.50624 208.2816 10.97728 11.01824 26.0096 17.05984 42.33216 17.05984l0 0c16.7936 0 33.792-6.5536 44.31872-17.12128l159.92832-161.83296c20.13184-20.13184 21.27872-54.272 2.49856-73.1136l-214.58944-214.56896c-6.2464-6.2464-16.384-6.2464-22.6304 0s-6.2464 16.384 0 22.6304l214.58944 214.56896c6.41024 6.41024 5.18144 20.23424-2.51904 27.93472l-159.96928 161.83296c-3.6864 3.70688-12.04224 7.68-21.62688 7.68 0 0 0 0 0 0-5.50912 0-13.37344-1.35168-19.33312-7.33184-0.32768-0.34816-13.7216-14.66368-36.98688-39.0144l116.61312-116.61312c6.2464-6.2464 6.2464-16.384 0-22.6304s-16.384-6.2464-22.6304 0l-116.1216 116.1216c-19.968-20.76672-44.4416-46.01856-72.31488-74.42432l51.07712-51.07712c6.2464-6.20544 6.2464-16.32256 0-22.58944zM4.608614 1018.53184c3.072 3.13344 7.20896 4.79232 11.44832 4.79232 1.536 0 3.072-0.22528 4.56704-0.67584l320-95.3344c2.60096-0.77824 4.89472-2.1504 6.77888-4.05504l546.87744-550.56384c0.77824-0.77824 1.14688-1.76128 1.72032-2.62144l116.98176-117.00224c9.40032-9.44128 14.62272-21.95456 14.62272-35.28704 0-13.312-5.2224-25.82528-14.62272-35.20512l-167.5264-167.48544c-18.82112-18.82112-51.67104-18.82112-70.49216 0l-119.64416 119.64416c-0.77824 0.75776-1.18784 1.76128-1.76128 2.6624l-547.71712 547.7376c-1.80224 1.78176-3.13344 3.97312-3.91168 6.36928l-101.13024 310.8864c-1.86368 5.67296-0.4096 11.83744 3.74784 16.13824zM667.587174 168.67328l33.23904 33.23904-496.7424 498.0736-55.25504-12.53376 518.7584-518.77888zM224.072294 725.31968l499.42528-500.736 77.94688 77.94688-503.93088 497.47968-73.44128 0 0-74.69056zM860.365414 361.472l-519.80288 523.32544-18.47296-64.06144 501.98528-495.57504 36.29056 36.31104zM127.836774 715.48928l64.22528 14.58176 0 85.9136c0 8.82688 7.168 15.99488 15.99488 15.99488l83.968 0 20.29568 70.41024-271.60576 80.93696 87.1424-267.83744zM797.676134 37.72416c6.7584-6.7584 18.49344-6.7584 25.25184 0l167.5264 167.5264c3.35872 3.35872 5.2224 7.84384 5.2224 12.61568 0 4.73088-1.86368 9.25696-5.24288 12.63616l-107.86816 107.90912-192.73728-192.73728 107.86816-107.9296z" p-id="1271"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/unlock.svg b/src/icons/svg/unlock.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1219e41d4bc4116cf1f976a9f740a9f436de99ef
--- /dev/null
+++ b/src/icons/svg/unlock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1381" t="1545700997954" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M880 512H320V288c0-106.032 85.968-192 192-192s192 85.968 192 192a48 48 0 1 0 96 0c0-159.056-128.944-288-288-288S224 128.944 224 288v224H144a48 48 0 0 0-48 48v416a48 48 0 0 0 48 48h736a48 48 0 0 0 48-48V560a48 48 0 0 0-48-48zM560 786.688V880a48 48 0 1 1-96 0v-93.312c-28.576-16.624-48-47.248-48-82.688a96 96 0 1 1 192 0c0 35.44-19.424 66.064-48 82.688z" p-id="1382"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/user1.svg b/src/icons/svg/user1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..14ca51e4e597bceebeab0ca6607f66061ac89e9c
--- /dev/null
+++ b/src/icons/svg/user1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="4263" t="1553934943780" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#8a8a8a" d="M512 256s-97.2-4.8-144-96c16.8 113.6 108 192 144 192s127.2-78.8 144-192c-46.8 91.2-144 96-144 96z" p-id="4264"/><path fill="#8a8a8a" d="M928 448C928 218.4 741.6 32 512 32S96 218.4 96 448c0 186.8 122.8 344.4 292.4 397.2-42 35.2-68.4 88-68.4 146.8h64c0-70.8 57.2-128 128-128s128 57.2 128 128h64c0-58.8-26.4-111.6-68.4-146.8 169.6-52.8 292.4-210.4 292.4-397.2z m-416 352c-194.4 0-352-157.6-352-352s157.6-352 352-352 352 157.6 352 352-157.6 352-352 352z" p-id="4265"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/validCode.svg b/src/icons/svg/validCode.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a1feb74aed70cd04a0c1b2dfe999120cd6001bfc
--- /dev/null
+++ b/src/icons/svg/validCode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1777" t="1561614261684" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#8a8a8a" d="M963.801169 218.170758a72.850542 72.850542 0 0 0-57.513586-63.903984 1357.959666 1357.959666 0 0 1-185.960594-42.815669A690.80207 690.80207 0 0 1 554.17663 14.317049a76.045741 76.045741 0 0 0-88.826539 0 435.825173 435.825173 0 0 1-167.428438 96.495016 624.341926 624.341926 0 0 1-180.848276 44.732789 67.738223 67.738223 0 0 0-56.874546 63.903984S58.281712 379.847839 58.281712 521.075644c0 255.615937 301.626806 502.924356 452.440208 502.924356s406.42934-174.457877 447.32789-499.090117c10.224637-191.711953 3.195199-306.100085 3.195199-306.100085zM799.567929 415.63407l-315.046642 297.153527a42.815669 42.815669 0 0 1-52.401267 5.112318l-8.307518-7.029438L249.993665 530.022202a42.815669 42.815669 0 0 1 63.903984-58.791666L457.042574 621.404899l283.73369-268.396734a42.815669 42.815669 0 1 1 58.791665 63.903984" p-id="1778"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/visits.svg b/src/icons/svg/visits.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8425662dacd43fc161a57b54a717270da4412faf
--- /dev/null
+++ b/src/icons/svg/visits.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="4347" t="1544682770180" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path d="M320 128c0-70.656-57.344-128-128-128S64 57.344 64 128s57.344 128 128 128S320 198.656 320 128zM544 192C596.992 192 640 148.992 640 96S596.992 0 544 0 448 43.008 448 96 491.008 192 544 192zM864 64C811.008 64 768 107.008 768 160S811.008 256 864 256 960 212.992 960 160 916.992 64 864 64zM537.088 257.216C460.032 256 372.352 267.904 302.144 330.112 231.872 392.32 240.64 547.712 339.968 589.504c99.392 41.728 121.28 113.92 94.656 203.776C408 883.136 453.44 960 567.04 960 762.88 960 832 776.512 832 570.944 832 347.392 744.128 260.352 537.088 257.216z" p-id="4348"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/web.svg b/src/icons/svg/web.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9c574156f545c26d7edaaf97558a405d11f51a26
--- /dev/null
+++ b/src/icons/svg/web.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="1572860137475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1681" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M698.026667 597.333333C701.44 569.173333 704 541.013333 704 512 704 482.986667 701.44 454.826667 698.026667 426.666667L842.24 426.666667C849.066667 453.973333 853.333333 482.56 853.333333 512 853.333333 541.44 849.066667 570.026667 842.24 597.333333M622.506667 834.56C648.106667 787.2 667.733333 736 681.386667 682.666667L807.253333 682.666667C766.293333 753.066667 701.013333 807.68 622.506667 834.56M611.84 597.333333 412.16 597.333333C407.893333 569.173333 405.333333 541.013333 405.333333 512 405.333333 482.986667 407.893333 454.4 412.16 426.666667L611.84 426.666667C615.68 454.4 618.666667 482.986667 618.666667 512 618.666667 541.013333 615.68 569.173333 611.84 597.333333M512 851.626667C476.586667 800.426667 448 743.68 430.506667 682.666667L593.493333 682.666667C576 743.68 547.413333 800.426667 512 851.626667M341.333333 341.333333 216.746667 341.333333C257.28 270.506667 322.986667 215.893333 401.066667 189.44 375.466667 236.8 356.266667 288 341.333333 341.333333M216.746667 682.666667 341.333333 682.666667C356.266667 736 375.466667 787.2 401.066667 834.56 322.986667 807.68 257.28 753.066667 216.746667 682.666667M181.76 597.333333C174.933333 570.026667 170.666667 541.44 170.666667 512 170.666667 482.56 174.933333 453.973333 181.76 426.666667L325.973333 426.666667C322.56 454.826667 320 482.986667 320 512 320 541.013333 322.56 569.173333 325.973333 597.333333M512 171.946667C547.413333 223.146667 576 280.32 593.493333 341.333333L430.506667 341.333333C448 280.32 476.586667 223.146667 512 171.946667M807.253333 341.333333 681.386667 341.333333C667.733333 288 648.106667 236.8 622.506667 189.44 701.013333 216.32 766.293333 270.506667 807.253333 341.333333M512 85.333333C276.053333 85.333333 85.333333 277.333333 85.333333 512 85.333333 747.52 276.48 938.666667 512 938.666667 747.52 938.666667 938.666667 747.52 938.666667 512 938.666667 276.48 747.52 85.333333 512 85.333333Z" p-id="1682" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/weixin.svg b/src/icons/svg/weixin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8dbcfa5c2abfeb284133f46ff718a70a635a87ae
--- /dev/null
+++ b/src/icons/svg/weixin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="2023" t="1564885435527" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#bfbfbf" d="M1024 659.2c0-147.2-147.2-262.4-307.2-262.4-172.8 0-307.2 115.2-307.2 262.4 0 147.2 134.4 262.4 307.2 262.4 38.4 0 70.4-6.4 108.8-19.2l102.4 51.2L896 870.4C972.8 812.8 1024 742.4 1024 659.2zM614.4 614.4c-19.2 0-38.4-19.2-38.4-38.4 0-19.2 19.2-38.4 38.4-38.4 25.6 0 44.8 19.2 44.8 38.4C659.2 595.2 646.4 614.4 614.4 614.4zM812.8 614.4c-19.2 0-38.4-19.2-38.4-38.4 0-19.2 19.2-38.4 38.4-38.4 25.6 0 44.8 19.2 44.8 38.4C864 595.2 844.8 614.4 812.8 614.4z" p-id="2024"/><path fill="#bfbfbf" d="M364.8 128C166.4 128 0 262.4 0 435.2c0 102.4 51.2 179.2 147.2 243.2l-38.4 108.8 128-64c44.8 6.4 83.2 19.2 128 19.2 12.8 0 25.6 0 32 0C390.4 716.8 384 691.2 384 665.6c0-160 134.4-288 307.2-288 12.8 0 25.6 0 32 0C697.6 236.8 537.6 128 364.8 128zM243.2 371.2C217.6 371.2 192 352 192 326.4c0-25.6 25.6-44.8 57.6-44.8s44.8 19.2 44.8 44.8C288 352 268.8 371.2 243.2 371.2zM499.2 371.2c-25.6 0-57.6-19.2-57.6-44.8 0-25.6 25.6-44.8 57.6-44.8 25.6 0 44.8 19.2 44.8 44.8C544 352 524.8 371.2 499.2 371.2z" p-id="2025"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/zujian.svg b/src/icons/svg/zujian.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2aba32fc7f971f3cb83948ea500de981d6115b18
--- /dev/null
+++ b/src/icons/svg/zujian.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="1574576020792" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5498" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 64h384v384H64V64z m0 512h384v384H64V576z m512 0h384v384H576V576z m192-128c106.039 0 192-85.961 192-192S874.039 64 768 64s-192 85.961-192 192 85.961 192 192 192z" p-id="5499" fill="#bfbfbf"></path></svg>
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index fb014a23fa97acd98634e7fe5baa5193e764c530..5b577973cd9c7390e638b18d3109643bd37c647f 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -7,7 +7,7 @@
         :collapse="isCollapse"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
-        :unique-opened="false"
+        :unique-opened="true"
         :active-text-color="variables.menuActiveText"
         :collapse-transition="false"
         mode="vertical"
diff --git a/src/main.js b/src/main.js
index fb05fe5599a09701437975682d88581c49cf8ada..5738fee7394d8d07b81809b079b7d11939591550 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,9 +16,12 @@ import router from './router'
 import './icons' // icon
 import './permission' // permission control
 
+// 权限指令
+import permission from "@/directive/permission/index";
 import '@/libs/validate.form'
 import * as filters from './filters' // global filters
 
+Vue.use(permission)
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
diff --git a/src/permission.js b/src/permission.js
index fef1315b05fea6c955f173ef265371ee448a7b30..1b53828517362c299a4fde998a0bfcc115877f6e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,16 +1,20 @@
 import router from './router'
 import store from './store'
-import { Message } from 'element-ui'
+import {Message} from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken, removeToken } from '@/libs/auth' // get token from cookie
+import {getToken, removeToken} from '@/libs/auth' // get token from cookie
 import getPageTitle from '@/libs/get-page-title'
+import Layout from '@/layout'
+import ParentView from '@/views/parent-view'
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
+
+NProgress.configure({showSpinner: false}) // NProgress Configuration
 
 const whiteList = ['/login', '/auth-redirect', '/404', '/401'] // no redirect whitelist
 
-router.beforeEach(async(to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   // start progress bar
   NProgress.start()
 
@@ -23,7 +27,7 @@ router.beforeEach(async(to, from, next) => {
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
-      next({ path: '/' })
+      next({path: '/'})
       NProgress.done()
     } else {
       // determine whether the user has obtained his permission roles through getInfo
@@ -35,22 +39,23 @@ router.beforeEach(async(to, from, next) => {
           // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
           const userInfo = await store.dispatch('user/getInfo')
-
+          await store.dispatch('permission/loadMenu')
           let roles = userInfo.resources;
-          if(!roles || roles.length === 0){
+          if (!roles || roles.length === 0) {
             removeToken()
             next('/401')
           } else {
-            console.log('roles=', roles);
-            // generate accessible routes map based on roles
-            const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
-
-            // dynamically add accessible routes
+            console.log(111)
+            // 过滤路由
+            const accessRoutes = filterAsyncRouter(store.getters.sidebarRouters);
+            // 添加动态路由
             router.addRoutes(accessRoutes)
+            // 保存路由
+            store.commit('permission/SET_ROUTES', accessRoutes)
 
             // hack method to ensure that addRoutes is complete
             // set the replace: true, so the navigation will not leave a history record
-            next({ ...to, replace: true })
+            next({...to, replace: true})
           }
         } catch (error) {
           // remove token and go to login page to re-login
@@ -79,3 +84,24 @@ router.afterEach(() => {
   // finish progress bar
   NProgress.done()
 })
+
+
+// 遍历后台传来的路由字符串，转换为组件对象
+function filterAsyncRouter(asyncRouterMap) {
+  const accessedRouters = asyncRouterMap.filter(route => {
+    if (route.component) {
+      if (route.component === 'Layout') {
+        route.component = Layout
+      } else if (route.component === 'ParentView') {
+        route.component = ParentView
+      } else {
+        route.component = _import(route.component) // 导入组件
+      }
+    }
+    if (route.children && route.children.length) {
+      route.children = filterAsyncRouter(route.children)
+    }
+    return true
+  })
+  return accessedRouters
+}
diff --git a/src/router/_import_development.js b/src/router/_import_development.js
new file mode 100644
index 0000000000000000000000000000000000000000..42de012da379a4c0677d5a5541f383c4b54696cc
--- /dev/null
+++ b/src/router/_import_development.js
@@ -0,0 +1,2 @@
+// 开发环境导入组件
+module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
diff --git a/src/router/_import_production.js b/src/router/_import_production.js
new file mode 100644
index 0000000000000000000000000000000000000000..796b0dac5127911bfc4814fe2e42af9299dfbb31
--- /dev/null
+++ b/src/router/_import_production.js
@@ -0,0 +1,2 @@
+// 生产环境导入组件
+module.exports = file => () => import('@/views/' + file + '.vue')
diff --git a/src/store/getters.js b/src/store/getters.js
index c7625932aed71c7389b99f2ad374f9c09ba7d229..050d54ce63ed194a0ffaa8931f2c8308c3c69c58 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -11,6 +11,7 @@ const getters = {
   userId: state => state.user.userId,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
-  permission_routes: state => state.permission.routes
+  permission_routes: state => state.permission.routes,
+  sidebarRouters: state => state.permission.sidebarRouters
 }
 export default getters
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index ef3ec905cd3d0b2295957a5dd34b84f90d3d0b62..9ff00cb5404a80da3239d7e815c0a696700e8ddb 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,4 +1,5 @@
 import { asyncRoutes, constantRoutes } from '@/router'
+import {getRouterList} from "@/api/admin/resource/resource";
 
 /**
  * Use meta.role to determine if the current user has permission
@@ -36,13 +37,17 @@ export function filterAsyncRoutes(routes, roles) {
 
 const state = {
   routes: [],
-  addRoutes: []
+  addRoutes: [],
+  sidebarRouters: []
 }
 
 const mutations = {
   SET_ROUTES: (state, routes) => {
     state.addRoutes = routes
     state.routes = constantRoutes.concat(routes)
+  },
+  SET_SIDEBAR_ROUTERS: (state, routers) => {
+    state.sidebarRouters = routers
   }
 }
 
@@ -58,6 +63,19 @@ const actions = {
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })
+  },
+  loadMenu({commit}) {
+    return new Promise((resolve, reject) => {
+      getRouterList().then(res => {
+        const {data} = res
+        data.push({ path: '*', redirect: '/404', hidden: true })
+        commit('SET_SIDEBAR_ROUTERS', data)
+        console.log(data);
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 
diff --git a/src/views/admin/config/config-manage.vue b/src/views/admin/config/config-manage.vue
index 628089e453b2ad4acd6fc81030832438140e6a12..102c0cba2a12200821cbde4809b6e7bb8ac41c58 100644
--- a/src/views/admin/config/config-manage.vue
+++ b/src/views/admin/config/config-manage.vue
@@ -8,8 +8,10 @@
       <el-form-item label-width="0px">
         <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
         <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
-        <el-button icon="el-icon-plus" v-permission="permission.add" type="primary" @click="addConfig()">添加</el-button>
-        <el-button icon="el-icon-delete" v-permission="permission.delBatch" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除</el-button>
+        <el-button icon="el-icon-plus" v-permission="['config:save']" type="primary" @click="addConfig()">添加</el-button>
+        <el-button icon="el-icon-delete" v-permission="['config:delete']" type="primary" @click="removeBatch()"
+                   :disabled="delBtnDisabled">删除
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -22,12 +24,12 @@
       @table-select-val="selectVal">
       <template slot-scope="{ row }" slot="configType">
         <el-tag v-for="item in configTypeOptionList" v-if="row.configType === item.dictValue" :type="item.listClass">
-          {{item.dictLabel}}
+          {{ item.dictLabel }}
         </el-tag>
       </template>
       <template slot-scope="{ row }" slot="action">
-        <el-button v-permission="permission.edit" @click="update(row)" type="text">修改</el-button>
-        <el-button v-permission="permission.del" @click="remove(row)" type="text">删除</el-button>
+        <el-button v-permission="['config:update']" @click="update(row)" type="text">修改</el-button>
+        <el-button v-permission="['config:delete']" @click="remove(row)" type="text">删除</el-button>
       </template>
     </table-page>
 
@@ -65,171 +67,163 @@
 </template>
 
 <script>
-  import { addConfig, deleteBatchConfigById, deleteConfigById, updateConfig } from '@/api/admin/config/config'
-  import { MessageError, MessageSuccess, ConfirmCustom } from '@/libs/message'
-  import TablePage from "_c/CommonForm/table-page";
-  import {mapActions} from "vuex";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
+import {addConfig, deleteBatchConfigById, deleteConfigById, updateConfig} from '@/api/admin/config/config'
+import {ConfirmCustom, MessageError, MessageSuccess} from '@/libs/message'
+import TablePage from "_c/CommonForm/table-page";
+import {mapActions} from "vuex";
 
-  export default {
-    name: 'config-manage',
-    components: {TablePage},
-    directives: { permission },
-    data() {
-      return {
-        columns: [
-          { label: '参数名称', prop: 'configName' },
-          { label: '参数键名', prop: 'configKey' },
-          { label: '参数键值', prop: 'configValue' },
-          { label: '系统内置', slot: 'configType' },
-          { label: '操作', slot: 'action' }
-        ],
-        permission: {
-          add: ['ROLE_ADMIN', 'config:save'],
-          edit: ['ROLE_ADMIN', 'config:update'],
-          del: ['ROLE_ADMIN', 'config:delete'],
-          delBatch: ['ROLE_ADMIN', 'config:batch:delete'],
-        },
-        queryParams: {},
-        dialogShow: false,
-        delBtnDisabled: true,
-        dialogTitle: '添加配置',
-        form: {},
-        rules: {
-          configName: [this.$ruler('参数名称')],
-          configKey: [this.$ruler('参数键名')],
-          configValue: [this.$ruler('参数键值')],
-          configType: [this.$ruler('系统内置')],
-          remark: [this.$ruler('备注')]
-        },
-        configTypeOptionList:[]
-      }
-    },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh()
+export default {
+  name: 'config-manage',
+  components: {TablePage},
+  data() {
+    return {
+      columns: [
+        {label: '参数名称', prop: 'configName'},
+        {label: '参数键名', prop: 'configKey'},
+        {label: '参数键值', prop: 'configValue'},
+        {label: '系统内置', slot: 'configType'},
+        {label: '操作', slot: 'action'}
+      ],
+      queryParams: {},
+      dialogShow: false,
+      delBtnDisabled: true,
+      dialogTitle: '添加配置',
+      form: {},
+      rules: {
+        configName: [this.$ruler('参数名称')],
+        configKey: [this.$ruler('参数键名')],
+        configValue: [this.$ruler('参数键值')],
+        configType: [this.$ruler('系统内置')],
+        remark: [this.$ruler('备注')]
       },
-      /**
-       * 重置搜索条件
-       */
-      reset() {
-        this.queryParams = {}
-        this.$nextTick(function () {
+      configTypeOptionList: []
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh()
+    },
+    /**
+     * 重置搜索条件
+     */
+    reset() {
+      this.queryParams = {}
+      this.$nextTick(function () {
+        this.refresh()
+      })
+    },
+    /**
+     * 添加弹出框
+     */
+    addConfig() {
+      this.dialogTitle = '添加配置'
+      this.dialogShow = true
+    },
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row}
+      this.dialogTitle = '修改配置'
+      this.dialogShow = true
+    },
+    /**
+     * 点击每一行的checkbox
+     */
+    selectVal(ids) {
+      this.ids = ids.map(val => val['id'])
+      this.delBtnDisabled = !this.ids.length
+    },
+    /**
+     * 批量删除
+     */
+    removeBatch() {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteBatchConfigById(this.ids).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
+          }
           this.refresh()
         })
-      },
-      /**
-       * 添加弹出框
-       */
-      addConfig() {
-        this.dialogTitle = '添加配置'
-        this.dialogShow = true
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = { ...row }
-        this.dialogTitle = '修改配置'
-        this.dialogShow = true
-      },
-      /**
-       * 点击每一行的checkbox
-       */
-      selectVal(ids) {
-        this.ids = ids.map(val => val['id'])
-        this.delBtnDisabled = !this.ids.length
-      },
-      /**
-       * 批量删除
-       */
-      removeBatch() {
-        ConfirmCustom({ type: 'warning' }).then(() => {
-          deleteBatchConfigById(this.ids).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({ type: 'warning' }).then(() => {
-          deleteConfigById(row.id).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加配置') {
-              addConfig(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updateConfig(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            }
+      })
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteConfigById(row.id).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
           }
+          // 刷新表格
+          this.refresh()
         })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form')
-        // 刷新表格
-        this.refresh()
-      }
+      })
     },
-    created() {
-      this.getDictListByType('config_type').then(res => {
-        this.configTypeOptionList = res
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false
+      this.$refs[name].resetFields()
+    },
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加配置') {
+            addConfig(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updateConfig(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
+        }
       })
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form')
+      // 刷新表格
+      this.refresh()
     }
+  },
+  created() {
+    this.getDictListByType('config_type').then(res => {
+      this.configTypeOptionList = res
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/admin/dept/dept-manage.vue b/src/views/admin/dept/dept-manage.vue
index d5363c6a45fa4ca845b7d66563df7c3e30b77f74..cb5010c08dad90359c53b4bc0262c6f418d6552b 100644
--- a/src/views/admin/dept/dept-manage.vue
+++ b/src/views/admin/dept/dept-manage.vue
@@ -15,6 +15,7 @@
       <el-form-item label-width="0px">
         <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
         <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
+        <el-button icon="el-icon-plus" type="primary" v-permission="['dept:save']" @click="addDept()">添加</el-button>
       </el-form-item>
     </el-form>
 
@@ -29,45 +30,65 @@
       :query-params="queryParams">
       <template slot-scope="{ row }" slot="deptStatus">
         <el-tag v-for="item in statusOptionList" v-if="row.deptStatus === item.dictValue" :type="item.listClass">
-          {{item.dictLabel}}
+          {{ item.dictLabel }}
         </el-tag>
       </template>
       <template slot-scope="{ row }" slot="action">
-        <el-button v-permission="permission.add" @click="addDept(row)" type="text">添加</el-button>
-        <el-button v-permission="permission.edit" @click="update(row)" type="text">修改</el-button>
-        <el-button v-permission="permission.del" @click="remove(row)" type="text">删除</el-button>
+        <el-button v-permission="['dept:update']" @click="update(row)" type="text">修改</el-button>
+        <el-button v-permission="['dept:delete']" @click="remove(row)" type="text">删除</el-button>
       </template>
     </table-page>
 
     <!-- 添加表单 -->
     <el-dialog
+      v-if="dialogShow"
       :title="dialogTitle"
       :visible.sync="dialogShow"
       :close-on-click-modal="false"
       @close="handleReset('form')">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父级名称" v-if="dialogTitle === '添加部门'">
-          <el-input disabled v-model="form.parentName" />
-        </el-form-item>
-        <el-form-item label="部门名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入部门名称" @input="change($event)"/>
-        </el-form-item>
-        <el-form-item label="显示顺序" prop="deptSort">
-          <el-input v-model="form.deptSort" placeholder="请输入显示顺序" @input="change($event)"/>
-        </el-form-item>
-        <el-form-item label="部门状态" prop="deptStatus">
-          <el-select v-model="form.deptStatus" placeholder="请选择状态" style="width: 100%">
-            <template v-for="item in statusOptionList">
-              <el-option :key="item.id" :value="item.dictValue" :label="item.dictLabel"/>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="联系电话" prop="phone">
-          <el-input v-model="form.phone" placeholder="请输入联系电话" @input="change($event)"/>
-        </el-form-item>
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="form.email" placeholder="请输入邮箱" @input="change($event)"/>
-        </el-form-item>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="上级部门" prop="deptId">
+              <vue-treeselect v-model="form.parentId" :options="deptTree" placeholder="请选择上级部门" :normalizer="normalizer"
+                              @select="treeSelect" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入部门名称" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="显示顺序" prop="deptSort">
+              <el-input-number v-model="form.deptSort" placeholder="请输入显示顺序" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门状态" prop="deptStatus">
+              <el-radio-group v-model="form.deptStatus">
+                <template v-for="item in statusOptionList">
+                  <el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
+                </template>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <!-- 自定义按钮组 -->
       <div slot="footer" class="dialog-footer">
@@ -79,154 +100,168 @@
 </template>
 
 <script>
-  import TablePage from "_c/CommonForm/table-page";
-  import {addDept, deleteBatchDeptById, deleteDeptById, updateDept} from "_a/admin/dept/dept";
-  import {MessageError, MessageSuccess, ConfirmCustom} from '_l/message'
-  import {mapActions} from "vuex";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
+import TablePage from "_c/CommonForm/table-page";
+import {addDept, deleteDeptById, updateDept} from "_a/admin/dept/dept";
+import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
+import {mapActions} from "vuex";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import VueTreeselect from "@riophae/vue-treeselect";
 
-  export default {
-    name: 'dept-manage',
-    components: {TablePage},
-    directives: { permission },
-    data() {
-      return {
-        columns: [
-          {label: '部门名称', prop: 'name', width: '300', align: 'left'},
-          {label: '排序', prop: 'deptSort'},
-          {label: '联系电话', prop: 'phone'},
-          {label: '邮箱', prop: 'email'},
-          {label: '部门状态', slot: 'deptStatus'},
-          {label: '操作', slot: 'action'}
-        ],
-        permission: {
-          add: ['ROLE_ADMIN', 'dept:save'],
-          edit: ['ROLE_ADMIN', 'dept:update'],
-          del: ['ROLE_ADMIN', 'dept:delete'],
-        },
-        queryParams: {},
-        dialogShow: false,
-        dialogTitle: '添加部门',
-        statusOptionList: [],
-        form: {},
-        rules: {
-          name: [this.$ruler('部门名称')],
-          deptSort: [this.$ruler('显示顺序')],
-          deptStatus: [this.$ruler('部门状态')],
+export default {
+  name: 'dept-manage',
+  components: {TablePage, VueTreeselect},
+  data() {
+    return {
+      columns: [
+        {label: '部门名称', prop: 'name', width: '300', align: 'left'},
+        {label: '排序', prop: 'deptSort'},
+        {label: '联系电话', prop: 'phone'},
+        {label: '邮箱', prop: 'email'},
+        {label: '部门状态', slot: 'deptStatus'},
+        {label: '操作', slot: 'action'}
+      ],
+      queryParams: {},
+      dialogShow: false,
+      dialogTitle: '添加部门',
+      statusOptionList: [],
+      form: {},
+      rules: {
+        name: [this.$ruler('部门名称')],
+        deptSort: [this.$ruler('显示顺序')],
+        deptStatus: [this.$ruler('部门状态')],
+      },
+      deptTree: [],
+      normalizer(node) {
+        return {
+          id: node.id,
+          label: node.name,
+          children: node.children
         }
       }
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    change(e) {
+      this.$forceUpdate()
     },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      change(e) {
-        this.$forceUpdate()
-      },
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh();
-      },
-      /**
-       * 重置搜索条件
-       */
-      reset() {
-        this.queryParams = {}
-        this.$nextTick(function () {
-          this.refresh()
-        })
-      },
-      /**
-       * 添加弹出框
-       */
-      addDept(row) {
-        this.form = {};
-        this.dialogTitle = '添加部门';
-        this.dialogShow = true;
-        this.form.parentId = row.id
-        this.form.parentName = row.name
-        this.form.ancestors = row.ancestors + ',' + row.id
-        this.dialogShow = true
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = {...row};
-        this.dialogTitle = '修改部门';
-        this.dialogShow = true;
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteDeptById(row.id).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false;
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加部门') {
-              addDept(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updateDept(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            }
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh();
+    },
+    /**
+     * 重置搜索条件
+     */
+    reset() {
+      this.queryParams = {}
+      this.$nextTick(function () {
+        this.refresh()
+      })
+    },
+    /**
+     * 添加弹出框
+     */
+    addDept() {
+      this.dialogTitle = '添加部门';
+      this.deptTree.length = 0;
+      this.deptTree.unshift({id: 0, name: '顶级公司', parentIds: 0, children: this.$refs.tablePage.data})
+      this.form = {
+        deptStatus:'0',
+        deptSort: 10
+      };
+      this.dialogShow = true;
+
+    },
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row};
+      this.deptTree.length = 0;
+      this.deptTree.unshift({id: 0, name: '顶级公司', parentIds: 0, children: this.$refs.tablePage.data})
+      this.dialogTitle = '修改部门';
+      this.dialogShow = true;
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteDeptById(row.id).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
           }
+          // 刷新表格
+          this.refresh()
         })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form');
-        // 刷新表格
-        this.refresh()
-      },
+      })
+    },
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false;
+      this.$refs[name].resetFields()
     },
-    mounted() {
-      this.getDictListByType('dept_status').then(res => {
-        this.statusOptionList = res
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加部门') {
+            addDept(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updateDept(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
+        }
       })
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form');
+      // 刷新表格
+      this.refresh()
+    },
+    treeSelect(node, instanceId) {
+      if (node.ancestors !== 0) {
+        this.form.ancestors = node.ancestors + ',' + node.id
+      } else {
+        this.form.ancestors = node.id
+      }
     }
+  },
+  mounted() {
+    this.getDictListByType('dept_status').then(res => {
+      this.statusOptionList = res
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/admin/dict/dict-type-manage.vue b/src/views/admin/dict/dict-type-manage.vue
index 49b2d1168a3028cde2e2eaf8a45be8add30f6eaa..a25522c4b829c7a8eafa53d2b248bcb3e0142c98 100644
--- a/src/views/admin/dict/dict-type-manage.vue
+++ b/src/views/admin/dict/dict-type-manage.vue
@@ -18,8 +18,11 @@
       <el-form-item label-width="0px">
         <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
         <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
-        <el-button icon="el-icon-plus" v-permission="permission.add" type="primary" @click="addDictType()">添加</el-button>
-        <el-button icon="el-icon-delete" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除</el-button>
+        <el-button icon="el-icon-plus" type="primary" v-permission="['dict:save']" @click="addDictType()">添加
+        </el-button>
+        <el-button icon="el-icon-delete" type="primary" v-permission="['dict:delete']" @click="removeBatch()"
+                   :disabled="delBtnDisabled">删除
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -32,13 +35,13 @@
       @table-select-val="selectVal">
       <template slot-scope="{ row }" slot="dictStatus">
         <el-tag v-for="item in statusOptionList" v-if="row.dictStatus === item.dictValue" :type="item.listClass">
-          {{item.dictLabel}}
+          {{ item.dictLabel }}
         </el-tag>
       </template>
       <template slot-scope="{ row }" slot="action">
-        <el-button v-permission="permission.edit" @click="update(row)" type="text">修改</el-button>
-        <el-button v-permission="permission.list" @click="dictDataList(row)" type="text">列表</el-button>
-        <el-button v-permission="permission.del" @click="remove(row)" type="text">删除</el-button>
+        <el-button v-permission="['dict:update']" @click="update(row)" type="text">修改</el-button>
+        <el-button @click="dictDataList(row)" type="text">列表</el-button>
+        <el-button v-permission="['dict:delete']" @click="remove(row)" type="text">删除</el-button>
       </template>
     </table-page>
 
@@ -82,182 +85,174 @@
 </template>
 
 <script>
-  import TablePage from "_c/CommonForm/table-page";
-  import {addDictType, deleteBatchDictTypeById, deleteDictTypeById, updateDictType} from "_a/admin/dict/dict-type";
-  import {MessageError, MessageSuccess, ConfirmCustom} from '_l/message'
-  import {mapActions} from "vuex";
-  import DictDataManage from "@/views/admin/dict/dict-data-manage";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
+import TablePage from "_c/CommonForm/table-page";
+import {addDictType, deleteBatchDictTypeById, deleteDictTypeById, updateDictType} from "_a/admin/dict/dict-type";
+import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
+import {mapActions} from "vuex";
+import DictDataManage from "@/views/admin/dict/dict-data-manage";
 
-  export default {
-    name: 'dict-type-manage',
-    components: {DictDataManage, TablePage},
-    directives: { permission },
-    data() {
-      return {
-        columns: [
-          {label: '字典名称', prop: 'dictName'},
-          {label: '字典类型', prop: 'dictType'},
-          {label: '状态', slot: 'dictStatus'},
-          {label: '操作', slot: 'action'}
-        ],
-        permission: {
-          list: ['ROLE_ADMIN', 'dict:list'],
-          add: ['ROLE_ADMIN', 'dict:save'],
-          edit: ['ROLE_ADMIN', 'dict:update'],
-          del: ['ROLE_ADMIN', 'dict:delete'],
-        },
-        queryParams: {},
-        dialogShow: false,
-        dialogDataShow: false,
-        delBtnDisabled: true,
-        dialogTitle: '添加字典类型',
-        form: {},
-        rules: {
-          dictName: [this.$ruler('字典名称')],
-          dictType: [this.$ruler('字典类型')],
-          dictStatus: [this.$ruler('状态')]
-        },
-        statusOptionList: [],
-        dictType:null
-      }
-    },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      change(e) {
-        this.$forceUpdate()
-      },
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh();
+export default {
+  name: 'dict-type-manage',
+  components: {DictDataManage, TablePage},
+  data() {
+    return {
+      columns: [
+        {label: '字典名称', prop: 'dictName'},
+        {label: '字典类型', prop: 'dictType'},
+        {label: '状态', slot: 'dictStatus'},
+        {label: '操作', slot: 'action'}
+      ],
+      queryParams: {},
+      dialogShow: false,
+      dialogDataShow: false,
+      delBtnDisabled: true,
+      dialogTitle: '添加字典类型',
+      form: {},
+      rules: {
+        dictName: [this.$ruler('字典名称')],
+        dictType: [this.$ruler('字典类型')],
+        dictStatus: [this.$ruler('状态')]
       },
-      /**
-       * 重置搜索条件
-       */
-      reset() {
-        this.queryParams = {}
-        this.$nextTick(function () {
+      statusOptionList: [],
+      dictType: null
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    change(e) {
+      this.$forceUpdate()
+    },
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh();
+    },
+    /**
+     * 重置搜索条件
+     */
+    reset() {
+      this.queryParams = {}
+      this.$nextTick(function () {
+        this.refresh()
+      })
+    },
+    /**
+     * 添加弹出框
+     */
+    addDictType() {
+      this.form = {};
+      this.dialogTitle = '添加字典类型';
+      this.dialogShow = true;
+    },
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row};
+      this.dialogTitle = '修改字典类型';
+      this.dialogShow = true;
+    },
+    /**
+     * 点击每一行的checkbox
+     */
+    selectVal(ids) {
+      this.ids = ids.map(val => val['id']);
+      this.delBtnDisabled = !this.ids.length
+    },
+    /**
+     * 批量删除
+     */
+    removeBatch() {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteBatchDictTypeById(this.ids).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
+          }
           this.refresh()
         })
-      },
-      /**
-       * 添加弹出框
-       */
-      addDictType() {
-        this.form = {};
-        this.dialogTitle = '添加字典类型';
-        this.dialogShow = true;
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = {...row};
-        this.dialogTitle = '修改字典类型';
-        this.dialogShow = true;
-      },
-      /**
-       * 点击每一行的checkbox
-       */
-      selectVal(ids) {
-        this.ids = ids.map(val => val['id']);
-        this.delBtnDisabled = !this.ids.length
-      },
-      /**
-       * 批量删除
-       */
-      removeBatch() {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteBatchDictTypeById(this.ids).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteDictTypeById(row.id).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false;
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加字典类型') {
-              addDictType(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updateDictType(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            }
+      })
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteDictTypeById(row.id).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
           }
+          // 刷新表格
+          this.refresh()
         })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form');
-        // 刷新表格
-        this.refresh()
-      },
-      dictDataList(row){
-        console.log(row);
-        this.dictType = row.dictType
-        this.$nextTick(function () {
-          this.dialogDataShow = true;
-        })
-      }
+      })
+    },
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false;
+      this.$refs[name].resetFields()
+    },
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加字典类型') {
+            addDictType(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updateDictType(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
+        }
+      })
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form');
+      // 刷新表格
+      this.refresh()
     },
-    mounted() {
-      this.getDictListByType('dict_status').then(res => {
-        this.statusOptionList = res
+    dictDataList(row) {
+      console.log(row);
+      this.dictType = row.dictType
+      this.$nextTick(function () {
+        this.dialogDataShow = true;
       })
     }
+  },
+  mounted() {
+    this.getDictListByType('dict_status').then(res => {
+      this.statusOptionList = res
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/admin/post/post-manage.vue b/src/views/admin/post/post-manage.vue
index 326b87c88ea2294c825b85992dace3d215ff14ce..7ce62c6061fedeed790922f09039a8afaae870fc 100644
--- a/src/views/admin/post/post-manage.vue
+++ b/src/views/admin/post/post-manage.vue
@@ -11,8 +11,10 @@
       <el-form-item label-width="0px">
         <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
         <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
-        <el-button icon="el-icon-plus" v-permission="permission.add" type="primary" @click="addPost()">添加</el-button>
-        <el-button icon="el-icon-delete" v-permission="permission.delBatch" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除</el-button>
+        <el-button icon="el-icon-plus" v-permission="['post:save']" type="primary" @click="addPost()">添加</el-button>
+        <el-button icon="el-icon-delete" v-permission="['post:delete']" type="primary" @click="removeBatch()"
+                   :disabled="delBtnDisabled">删除
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -25,12 +27,12 @@
       @table-select-val="selectVal">
       <template slot-scope="{ row }" slot="postStatus">
         <el-tag v-for="item in statusOptionList" v-if="row.postStatus === item.dictValue" :type="item.listClass">
-          {{item.dictLabel}}
+          {{ item.dictLabel }}
         </el-tag>
       </template>
       <template slot-scope="{ row }" slot="action">
-        <el-button v-permission="permission.edit" @click="update(row)" type="text">修改</el-button>
-        <el-button v-permission="permission.del" @click="remove(row)" type="text">删除</el-button>
+        <el-button v-permission="['post:update']" @click="update(row)" type="text">修改</el-button>
+        <el-button v-permission="['post:delete']" @click="remove(row)" type="text">删除</el-button>
       </template>
     </table-page>
 
@@ -68,176 +70,168 @@
 </template>
 
 <script>
-  import TablePage from "_c/CommonForm/table-page";
-  import {addPost, deleteBatchPostById, deletePostById, updatePost} from "_a/admin/post/post";
-  import {MessageError, MessageSuccess, ConfirmCustom} from '_l/message'
-  import {mapActions} from "vuex";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
+import TablePage from "_c/CommonForm/table-page";
+import {addPost, deleteBatchPostById, deletePostById, updatePost} from "_a/admin/post/post";
+import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
+import {mapActions} from "vuex";
 
-  export default {
-    name: 'post-manage',
-    components: {TablePage},
-    directives: { permission },
-    data() {
-      return {
-        columns: [
-          {label: '岗位编码', prop: 'postCode'},
-          {label: '岗位名称', prop: 'postName'},
-          {label: '显示顺序', prop: 'postSort'},
-          {label: '岗位状态', slot: 'postStatus'},
-          {label: '操作', slot: 'action'}
-        ],
-        permission: {
-          add: ['ROLE_ADMIN', 'post:save'],
-          edit: ['ROLE_ADMIN', 'post:update'],
-          del: ['ROLE_ADMIN', 'post:delete'],
-          delBatch: ['ROLE_ADMIN', 'post:batch:delete'],
-        },
-        queryParams: {},
-        dialogShow: false,
-        delBtnDisabled: true,
-        dialogTitle: '添加岗位',
-        form: {},
-        statusOptionList:[],
-        rules: {
-          postCode: [this.$ruler('岗位编码')],
-          postName: [this.$ruler('岗位名称')],
-          postSort: [this.$ruler('显示顺序')],
-          postStatus: [this.$ruler('岗位状态')],
-        }
+export default {
+  name: 'post-manage',
+  components: {TablePage},
+  data() {
+    return {
+      columns: [
+        {label: '岗位编码', prop: 'postCode'},
+        {label: '岗位名称', prop: 'postName'},
+        {label: '显示顺序', prop: 'postSort'},
+        {label: '岗位状态', slot: 'postStatus'},
+        {label: '操作', slot: 'action'}
+      ],
+      queryParams: {},
+      dialogShow: false,
+      delBtnDisabled: true,
+      dialogTitle: '添加岗位',
+      form: {},
+      statusOptionList: [],
+      rules: {
+        postCode: [this.$ruler('岗位编码')],
+        postName: [this.$ruler('岗位名称')],
+        postSort: [this.$ruler('显示顺序')],
+        postStatus: [this.$ruler('岗位状态')],
       }
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    change(e) {
+      this.$forceUpdate()
+    },
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh();
+    },
+    /**
+     * 重置搜索条件
+     */
+    reset() {
+      this.queryParams = {}
+      this.$nextTick(function () {
+        this.refresh()
+      })
     },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      change(e) {
-        this.$forceUpdate()
-      },
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh();
-      },
-      /**
-       * 重置搜索条件
-       */
-      reset() {
-        this.queryParams = {}
-        this.$nextTick(function () {
+    /**
+     * 添加弹出框
+     */
+    addPost() {
+      this.form = {
+        postSort: 0
+      };
+      this.dialogTitle = '添加岗位';
+      this.dialogShow = true;
+    },
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row};
+      this.dialogTitle = '修改岗位';
+      this.dialogShow = true;
+    },
+    /**
+     * 点击每一行的checkbox
+     */
+    selectVal(ids) {
+      this.ids = ids.map(val => val['id']);
+      this.delBtnDisabled = !this.ids.length
+    },
+    /**
+     * 批量删除
+     */
+    removeBatch() {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteBatchPostById(this.ids).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
+          }
           this.refresh()
         })
-      },
-      /**
-       * 添加弹出框
-       */
-      addPost() {
-        this.form = {
-          postSort:0
-        };
-        this.dialogTitle = '添加岗位';
-        this.dialogShow = true;
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = {...row};
-        this.dialogTitle = '修改岗位';
-        this.dialogShow = true;
-      },
-      /**
-       * 点击每一行的checkbox
-       */
-      selectVal(ids) {
-        this.ids = ids.map(val => val['id']);
-        this.delBtnDisabled = !this.ids.length
-      },
-      /**
-       * 批量删除
-       */
-      removeBatch() {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteBatchPostById(this.ids).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deletePostById(row.postId).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false;
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加岗位') {
-              addPost(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updatePost(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            }
+      })
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deletePostById(row.postId).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
           }
+          // 刷新表格
+          this.refresh()
         })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form');
-        // 刷新表格
-        this.refresh()
-      },
+      })
+    },
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false;
+      this.$refs[name].resetFields()
     },
-    mounted() {
-      this.getDictListByType('post_status').then(res => {
-        this.statusOptionList = res
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加岗位') {
+            addPost(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updatePost(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
+        }
       })
-    }
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form');
+      // 刷新表格
+      this.refresh()
+    },
+  },
+  mounted() {
+    this.getDictListByType('post_status').then(res => {
+      this.statusOptionList = res
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/admin/resource/resource-manage.vue b/src/views/admin/resource/resource-manage.vue
index a0bf40b1100b7c4a001e1714ffc04f3445d12fd4..36105ec65f011cab28a2d77d91a401d21a150167 100644
--- a/src/views/admin/resource/resource-manage.vue
+++ b/src/views/admin/resource/resource-manage.vue
@@ -3,9 +3,10 @@
 
     <el-row style="margin-bottom: 20px">
       <el-col :span="24">
-        <el-button type="primary" @click="toggleRowExpansion(!expansion)" icon="el-icon-arrow-down" >展开/折叠
+        <el-button type="primary" @click="toggleRowExpansion(!expansion)" icon="el-icon-arrow-down">展开/折叠
+        </el-button>
+        <el-button icon="el-icon-plus" type="primary" v-permission="['resource:add']" @click="addResource()">添加
         </el-button>
-        <el-button icon="el-icon-plus" v-permission="permission.add" type="primary" @click="addResourceParent()">添加</el-button>
       </el-col>
     </el-row>
 
@@ -17,72 +18,161 @@
       :page-ing-type="false"
       :check-box="false"
       :columns="columns">
-      <template slot="resType" slot-scope="{row}">
-        <el-tag type="primary" v-if="row.resType === '0'">模块</el-tag>
-        <el-tag type="warning" v-if="row.resType === '1'">操作</el-tag>
-      </template>
-      <template slot="httpMethod" slot-scope="{row}">
-        <el-tag type="primary" v-if="row.httpMethod === 'GET'">GET</el-tag>
-        <el-tag type="warning" v-if="row.httpMethod === 'POST'">POST</el-tag>
+      <template slot="type" slot-scope="{row}">
+        <el-tag type="primary" v-if="row.type === '1'">目录</el-tag>
+        <el-tag type="warning" v-if="row.type === '2'">菜单</el-tag>
+        <el-tag type="info" v-if="row.type === '3'">按钮</el-tag>
       </template>
       <template slot="resStatus" slot-scope="{row}">
         <el-tag type="success" v-if="row.resStatus === '0'">正常</el-tag>
         <el-tag type="error" v-if="row.resStatus === '1'">禁用</el-tag>
       </template>
       <template slot-scope="{ row }" slot="action">
-        <el-button v-permission="permission.add" @click="addResource(row)" type="text">添加</el-button>
-        <el-button v-permission="permission.edit" @click="update(row)" type="text">修改</el-button>
-        <el-button v-permission="permission.del" @click="remove(row)" v-if="row.children.length === 0" type="text">删除</el-button>
+        <el-button @click="update(row)" v-permission="['resource:update']" type="text">修改</el-button>
+        <el-button @click="remove(row)" v-permission="['resource:delete']"
+                   v-if="row.children === null || row.children.length === 0" type="text">删除
+        </el-button>
       </template>
     </table-page>
 
     <!-- 添加表单 -->
     <el-dialog
       :title="dialogTitle"
+      v-if="dialogShow"
       :visible.sync="dialogShow"
       :close-on-click-modal="false"
       @close="handleReset('form')">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父级名称" v-if="dialogTitle === '添加模块'">
-          <el-input disabled v-model="form.parentName" placeholder="请输入模块名称"/>
-        </el-form-item>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="菜单类型" prop="type" @input="change($event)">
+              <el-radio-group v-model="form.type">
+                <template v-for="item in resourceTypeOptionList">
+                  <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
+                </template>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="标题" prop="title">
+              <el-input v-model="form.title" placeholder="请输入标题" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <el-form-item label="名称" prop="resName">
-          <el-input v-model="form.resName" placeholder="请输入模块名称"/>
-        </el-form-item>
-        <el-form-item label="类型" prop="resType">
-          <el-select v-model="form.resType" placeholder="请输入类型" style="width: 100%">
-            <template v-for="item in moduleTypeOptionList">
-              <el-option :key="item.id" :value="item.dictValue" :label="item.dictLabel"/>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="地址" prop="resPath" v-if="form.resType === '1'">
-          <el-input v-model="form.resPath" placeholder="请输入地址"/>
-        </el-form-item>
-        <el-form-item label="权限标识" prop="resCode" v-if="form.resType === '1'">
-          <el-input v-model="form.resCode" placeholder="请输入权限标识"/>
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="上级类目" prop="parentId">
+              <vue-treeselect v-model="form.parentId" :options="menuList" placeholder="请选择上级类目" :normalizer="normalizer"
+                              @select="treeSelect"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="resSort">
+              <el-input-number v-model="form.resSort" placeholder="请输入排序" :precision="2" :step="0.1"
+                               @input="change($event)"></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <el-form-item label="请求方式" prop="httpMethod" v-if="form.resType === '1'">
-          <el-select v-model="form.httpMethod" placeholder="请输入请求方式" style="width: 100%">
-            <template v-for="item in httpMethodOptionList">
-              <el-option :key="item.id" :value="item.dictValue" :label="item.dictLabel"/>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态" prop="resStatus">
-          <el-select v-model="form.resStatus" placeholder="请输入状态" style="width: 100%">
-            <template v-for="item in statusOptionList">
-              <el-option :key="item.id" :value="item.dictValue" :label="item.dictLabel"/>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="排序" prop="resSort">
-          <el-input v-model="form.resSort" placeholder="请输入排序"/>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注"/>
+        <el-row v-if="form.menuExtFlag ==='2' || form.type === '3'">
+          <el-col :span="12">
+            <el-form-item label="权限标识" prop="permission">
+              <el-input v-model="form.permission" placeholder="请输入权限标识" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="后端url路径地址" prop="resPath">
+              <el-input v-model="form.resPath" placeholder="请输入后端url路径地址" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="请求方式" prop="httpMethod">
+              <el-select v-model="form.httpMethod" placeholder="请输入请求方式" clearable style="width: 100%"
+                         :disabled="form.menuExtFlag === '1' || form.type === '1'">
+                <template v-for="item in httpMethodOptionList">
+                  <el-option :value="item.dictValue" :label="item.dictLabel"/>
+                </template>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="resStatus">
+              <el-radio-group v-model="form.resStatus">
+                <template v-for="item in statusOptionList">
+                  <el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
+                </template>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+        <!--    菜单相关    -->
+        <el-row v-if="form.type === '2'">
+          <el-col :span="12">
+            <el-form-item label="外链菜单" prop="menuExtFlag">
+              <el-radio-group v-model="form.menuExtFlag" @input="change($event)" @change="changeExtFlag">
+                <el-radio-button label="1">是</el-radio-button>
+                <el-radio-button label="2">否</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单缓存" prop="menuCacheFlag">
+              <el-radio-group v-model="form.menuCacheFlag" @input="change($event)">
+                <el-radio-button label="1">是</el-radio-button>
+                <el-radio-button label="2">否</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.type === '2' && form.menuExtFlag ==='2'">
+          <el-col :span="12">
+            <el-form-item label="菜单组件名称" prop="componentName">
+              <el-input v-model="form.componentName" placeholder="请输入菜单组件名称" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单组件地址" prop="componentPath">
+              <el-input v-model="form.componentPath" placeholder="请输入菜单组件地址" @input="change($event)"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+        <!--    菜单和目录相关    -->
+        <el-row v-if="form.type === '1' || form.type === '2'">
+          <el-col :span="12">
+            <el-form-item label="菜单和目录可见" prop="menuHiddenFlag">
+              <el-radio-group v-model="form.menuHiddenFlag" @input="change($event)">
+                <el-radio-button label="1">是</el-radio-button>
+                <el-radio-button label="2">否</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单图标" prop="menuIcon">
+              <el-popover
+                placement="bottom-start"
+                width="350"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
+                <IconSelect ref="iconSelect" @selected="iconSelected"/>
+                <el-input slot="reference" v-model="form.menuIcon" placeholder="点击选择图标" readonly>
+                  <svg-icon v-if="form.menuIcon" slot="prefix" :icon-class="form.menuIcon" class="el-input__icon"/>
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="路由地址" prop="routePath" v-if="form.type === '1' || form.type === '2'">
+          <el-input v-model="form.routePath" placeholder="请输入路由地址" @input="change($event)"/>
         </el-form-item>
       </el-form>
       <!-- 自定义按钮组 -->
@@ -95,178 +185,218 @@
 </template>
 
 <script>
-  import {addResource, deleteResourceById, updateResource} from '_a/admin/resource/module'
-  import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
-  import {mapActions} from "vuex";
-  import TablePage from "_c/CommonForm/table-page";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
+import {addResource, deleteResourceById, getMenuList, updateResource} from '@/api/admin/resource/resource'
+import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
+import {mapActions} from "vuex";
+import TablePage from "_c/CommonForm/table-page";
+import VueTreeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import IconSelect from "@/components/IconSelect";
 
-  export default {
-    name: 'resource-manage',
-    components: {TablePage},
-    directives: { permission },
-    data() {
-      return {
-        tableUrl: '/system-center/system/resources/getResourceTreeTableList',
-        columns: [
-          {label: '名称', prop: 'resName', align: 'left', width: '400'},
-          {label: '类型', slot: 'resType'},
-          {label: '地址', prop: 'resPath', width: '300'},
-          {label: '权限标识', prop: 'resCode', width: '200'},
-          {label: '请求方式', slot: 'httpMethod'},
-          {label: '状态', slot: 'resStatus'},
-          {label: '排序', prop: 'resSort'},
-          {label: '操作', slot: 'action'}
-        ],
-        permission: {
-          add: ['ROLE_ADMIN', 'module:save'],
-          edit: ['ROLE_ADMIN', 'module:update'],
-          del: ['ROLE_ADMIN', 'module:delete'],
-        },
-        dialogShow: false,
-        dialogTitle: '添加模块',
-        form: {},
-        rules: {
-          resName: [this.$ruler('名称')],
-          resPath: [this.$ruler('地址')],
-          resCode: [this.$ruler('权限标识')],
-          httpMethod: [this.$ruler('方式', 'change')],
-          resStatus: [this.$ruler('状态', 'change')],
-          type: [this.$ruler('类型', 'change')]
-        },
-        statusOptionList: [],
-        httpMethodOptionList: [],
-        moduleTypeOptionList: [],
-        expansion: false
+export default {
+  name: 'resource-manage',
+  components: {IconSelect, TablePage, VueTreeselect},
+  data() {
+    return {
+      tableUrl: '/system-center/system/resource/getResourceTreeList',
+      columns: [
+        {label: '标题', prop: 'title', align: 'left', width: '400'},
+        {label: '类型', slot: 'type'},
+        {label: '权限标识', prop: 'permission'},
+        {label: '状态', slot: 'resStatus'},
+        {label: '排序', prop: 'resSort'},
+        {label: '创建时间', prop: 'createDate'},
+        {label: '操作', slot: 'action'}
+      ],
+      dialogShow: false,
+      dialogTitle: '添加模块',
+      form: {},
+      rules: {},
+      statusOptionList: [],
+      httpMethodOptionList: [],
+      resourceTypeOptionList: [],
+      expansion: false,
+      menuList: [],
+      normalizer(node) {
+        return {
+          id: node.id,
+          label: node.title,
+          children: node.children
+        }
+      }
+    }
+  },
+  watch: {
+    'form.type': function (newVal, oldVal) {
+      switch (newVal) {
+        case '1':
+          this.$set(this.form, 'httpMethod', null)
+          this.$set(this.form, 'menuExtFlag', null)
+          this.$set(this.form, 'menuCacheFlag', null)
+          this.$set(this.form, 'menuHiddenFlag', '1')
+          break;
+        case '2':
+          this.$set(this.form, 'menuExtFlag', '2')
+          this.$set(this.form, 'menuCacheFlag', '2')
+          this.$set(this.form, 'menuHiddenFlag', '1')
+          break;
+        case '3':
+          this.$set(this.form, 'menuExtFlag', null)
+          this.$set(this.form, 'menuCacheFlag', null)
+          this.$set(this.form, 'menuHiddenFlag', null)
+          this.$set(this.form, 'routePath', null)
+          this.$set(this.form, 'componentName', null)
+          this.$set(this.form, 'componentPath', null)
+          this.$set(this.form, 'menuIcon', null)
+          break;
       }
     },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh()
-      },
-      addResourceParent() {
-          this.dialogTitle = '添加模块'
-          this.form.parentId = 0
-          this.form.parentName = '顶级'
-          this.form.parentIds = ''
-          this.dialogShow = true
-      },
-      /**
-       * 添加弹出框
-       */
-      addResource(row) {
-        this.form = {};
-        if (row.resType === '1') {
-          this.$message.error('操作类型下面不可以在添加子节点！')
-        } else {
-          this.dialogTitle = '添加模块'
-          this.form.parentId = row.id
-          this.form.parentName = row.resName
-          this.form.parentIds = row.parentIds + ',' + row.id
-          this.dialogShow = true
-        }
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = {...row}
-        this.dialogTitle = '修改模块'
-        this.dialogShow = true
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteResourceById(row.id).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加模块') {
-              addResource(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updateResource(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            }
-          }
-        })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form')
-        // 刷新表格
-        this.refresh()
-      },
-      toggleRowExpansion(isExpansion) {
-        this.expansion = !this.expansion
-        this.toggleRowExpansion_forAll(this.$refs.tablePage.$refs.tableMain.data, isExpansion);
-      },
-      toggleRowExpansion_forAll(data, isExpansion) {
-        data.forEach(item => {
-          this.$refs.tablePage.$refs.tableMain.toggleRowExpansion(item, isExpansion);
-          if (item.children !== undefined && item.children !== null) {
-            this.toggleRowExpansion_forAll(item.children, isExpansion);
-          }
-        })
+    'form.menuExtFlag': function (newVal, oldVal) {
+      if (newVal === '1') {
+        this.$set(this.form, 'permission', null)
+        this.$set(this.form, 'resPath', null)
+        this.$set(this.form, 'httpMethod', null)
       }
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    change(e) {
+      this.$forceUpdate()
+    },
+    changeExtFlag(val) {
+      this.$set(this.form, 'menuExtFlag', val)
+    },
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh()
     },
-    mounted() {
-      this.getDictListByType('res_status').then(res => {
-        this.statusOptionList = res
+    addResource() {
+      this.dialogTitle = '添加模块'
+      this.form = {
+        parentId: 0,
+        parentIds: 0,
+        type: '1',
+        resStatus: '0',
+        resSort: '500',
+        menuHiddenFlag: '1',
+      }
+      this.dialogShow = true
+    },
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row}
+      this.dialogTitle = '修改模块'
+      this.dialogShow = true
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteResourceById(row.id).then(res => {
+          if (res.data) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
+          }
+          // 刷新表格
+          this.refresh()
+        })
       })
-      this.getDictListByType('module_type').then(res => {
-        this.moduleTypeOptionList = res
+    },
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false
+      this.$refs[name].resetFields()
+    },
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加模块') {
+            addResource(this.form).then(res => {
+              if (res.data) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updateResource(this.form).then(res => {
+              if (res.data) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
+        }
       })
-      this.getDictListByType('http_method').then(res => {
-        this.httpMethodOptionList = res
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form')
+      // 刷新表格
+      this.refresh()
+    },
+    toggleRowExpansion(isExpansion) {
+      this.expansion = !this.expansion
+      this.toggleRowExpansion_forAll(this.$refs.tablePage.$refs.tableMain.data, isExpansion);
+    },
+    toggleRowExpansion_forAll(data, isExpansion) {
+      data.forEach(item => {
+        this.$refs.tablePage.$refs.tableMain.toggleRowExpansion(item, isExpansion);
+        if (item.children !== undefined && item.children !== null) {
+          this.toggleRowExpansion_forAll(item.children, isExpansion);
+        }
       })
+    },
+    // 选中图标
+    iconSelected(name) {
+      this.form.menuIcon = name
+      this.$forceUpdate()
+    },
+    treeSelect(node, instanceId) {
+      if (node.parentIds !== 0) {
+        this.form.parentIds = node.parentIds + ',' + node.id
+      } else {
+        this.form.parentIds = node.id
+      }
     }
+  },
+  mounted() {
+    this.getDictListByType('res_status').then(res => {
+      this.statusOptionList = res
+    })
+    this.getDictListByType('resource_type').then(res => {
+      this.resourceTypeOptionList = res
+    })
+    this.getDictListByType('http_method').then(res => {
+      this.httpMethodOptionList = res
+    })
+    getMenuList().then(res => {
+      this.menuList.unshift({id: 0, title: '顶级类目', parentIds: 0, children: res.data})
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/admin/role/role-manage.vue b/src/views/admin/role/role-manage.vue
index 7895a49c3fad609174128b11ba25d4046c434c2c..9da11efa2153e4b01040393925b7fa228bf5ced6 100644
--- a/src/views/admin/role/role-manage.vue
+++ b/src/views/admin/role/role-manage.vue
@@ -8,8 +8,10 @@
       <el-form-item label-width="0px">
         <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
         <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
-        <el-button icon="el-icon-plus" v-permission="permission.add" type="primary" @click="addRole()">添加</el-button>
-        <el-button icon="el-icon-delete" v-permission="permission.delBatch" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除</el-button>
+        <el-button icon="el-icon-plus" v-permission="['role:save']" type="primary" @click="addRole()">添加</el-button>
+        <el-button icon="el-icon-delete" v-permission="['role:delete']" type="primary" @click="removeBatch()"
+                   :disabled="delBtnDisabled">删除
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -22,18 +24,18 @@
       @table-select-val="selectVal">
       <template slot-scope="{ row, index }" slot="roleStatus">
         <el-tag v-for="item in statusOptionList" v-if="row.roleStatus === item.dictValue" :type="item.listClass">
-          {{item.dictLabel}}
+          {{ item.dictLabel }}
         </el-tag>
       </template>
       <template slot-scope="{ row, index }" slot="dataScope">
         <el-tag v-for="item in dataScopeOptionList" v-if="row.dataScope === item.dictValue" :type="item.listClass">
-          {{item.dictLabel}}
+          {{ item.dictLabel }}
         </el-tag>
       </template>
       <template slot-scope="{ row }" slot="action">
-        <el-button v-permission="permission.edit" @click="update(row)" type="text">修改</el-button>
-        <el-button v-permission="permission.del" @click="remove(row)" type="text">删除</el-button>
-        <el-button v-permission="permission.authRole" @click="authModule(row)" type="text">授权</el-button>
+        <el-button v-permission="['role:update']" @click="update(row)" type="text">修改</el-button>
+        <el-button v-permission="['role:delete']" @click="remove(row)" type="text">删除</el-button>
+        <el-button v-permission="['role:auth:resource']" @click="authModule(row)" type="text">授权</el-button>
       </template>
     </table-page>
 
@@ -93,11 +95,9 @@
         :data="moduleData"
         node-key="id"
         ref="moduleTree"
-        default-expand-all
-        :default-checked-keys="defModuleIds"
         :props="{
           children: 'children',
-          label: 'resName'
+          label: 'title'
         }"
         show-checkbox/>
       <!-- 自定义按钮组 -->
@@ -110,264 +110,260 @@
 </template>
 
 <script>
-  import {
-    addRole,
-    deleteBatchRoleById,
-    deleteRoleById,
-    getDataScopeDeptIdsByRoleId,
-    saveAuthResource,
-    updateRole
-  } from '_a/admin/role/role'
-  import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
-  import {mapActions, mapGetters} from "vuex";
-  import {getResourceTreeList, getResourceTreeTableList} from "_a/admin/resource/module";
-  import TablePage from "_c/CommonForm/table-page";
-  import {getDeptTreeTableList} from "_a/admin/dept/dept";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
+import {
+  addRole,
+  deleteBatchRoleById,
+  deleteRoleById,
+  getDataScopeDeptIdsByRoleId,
+  saveAuthResource,
+  updateRole
+} from '_a/admin/role/role'
+import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
+import {mapActions, mapGetters} from "vuex";
+import TablePage from "_c/CommonForm/table-page";
+import {getDeptTreeTableList} from "_a/admin/dept/dept";
+import {getResourceIdListByRoleId, getResourceTreeList} from "@/api/admin/resource/resource"; // 权限判断指令
 
-  export default {
-    name: 'role-manage',
-    components: {TablePage},
-    directives: { permission },
-    data() {
-      return {
-        tableUrl: '/system-center/system/role/page',
-        columns: [
-          {label: '名称', prop: 'roleName'},
-          {label: '权限字符', prop: 'roleKey'},
-          {label: '状态', slot: 'roleStatus'},
-          {label: '数据范围', slot: 'dataScope'},
-          {label: '操作', slot: 'action'}
-        ],
-        permission: {
-          add: ['ROLE_ADMIN', 'role:save'],
-          edit: ['ROLE_ADMIN', 'role:update'],
-          del: ['ROLE_ADMIN', 'role:delete'],
-          delBatch: ['ROLE_ADMIN', 'role:batch:delete'],
-          authRole: ['ROLE_ADMIN', 'role:auth:resource'],
-        },
-        queryParams: {},
-        dialogShow: false,
-        delBtnDisabled: true,
-        dialogTitle: '添加角色',
-        form: {},
-        ids: [],
-        rules: {
-          roleName: [this.$ruler('角色名称')],
-          roleKey: [this.$ruler('角色权限字符串'), {pattern: /^[A-Z_]{3,20}$/, message: '请输入大写字母或者下划线并且3-20个字符'}],
-          roleStatus: [this.$ruler('角色状态')]
-        },
-        roleId: null,
-        statusOptionList: [],
-        dataScopeOptionList: [],
+export default {
+  name: 'role-manage',
+  components: {TablePage},
+  data() {
+    return {
+      tableUrl: '/system-center/system/role/page',
+      columns: [
+        {label: '名称', prop: 'roleName'},
+        {label: '权限字符', prop: 'roleKey'},
+        {label: '状态', slot: 'roleStatus'},
+        {label: '数据范围', slot: 'dataScope'},
+        {label: '操作', slot: 'action'}
+      ],
+      queryParams: {},
+      dialogShow: false,
+      delBtnDisabled: true,
+      dialogTitle: '添加角色',
+      form: {},
+      ids: [],
+      rules: {
+        roleName: [this.$ruler('角色名称')],
+        roleKey: [this.$ruler('角色权限字符串'), {pattern: /^[A-Z_]{3,20}$/, message: '请输入大写字母或者下划线并且3-20个字符'}],
+        roleStatus: [this.$ruler('角色状态')]
+      },
+      roleId: null,
+      statusOptionList: [],
+      dataScopeOptionList: [],
 
-        dialogModuleShow: false,
-        moduleData: [],
-        defModuleIds: [],
-        deptTree: [],
-        dataScopeDeptIds: []
+      dialogModuleShow: false,
+      moduleData: [],
+      deptTree: [],
+      dataScopeDeptIds: []
+    }
+  },
+  computed: {
+    ...mapGetters(["userId"]),
+  },
+  watch: {
+    'form.dataScope': function (val) {
+      if (val === '2') {
+        this.$nextTick(function () {
+          getDeptTreeTableList().then(res => {
+            if (res.data) {
+              this.deptTree = res.data
+            }
+          })
+        })
       }
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh()
+    },
+    /**
+     * 重置搜索条件
+     */
+    reset() {
+      this.queryParams = {}
+      this.$nextTick(function () {
+        this.refresh()
+      })
     },
-    computed: {
-      ...mapGetters(["userId"]),
+    /**
+     * 添加弹出框
+     */
+    addRole() {
+      this.form = {};
+      this.dialogTitle = '添加角色'
+      this.dialogShow = true
     },
-    watch: {
-      'form.dataScope': function (val) {
-        if (val === '2') {
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row};
+      this.dialogTitle = '修改角色'
+      getDataScopeDeptIdsByRoleId(row.id).then(res => {
+        if (res.data) {
+          this.dataScopeDeptIds = res.data
           this.$nextTick(function () {
-            getDeptTreeTableList().then(res => {
-              if (res.data) {
-                this.deptTree = res.data
-              }
-            })
+            this.dialogShow = true
           })
         }
-      }
+      })
+
     },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh()
-      },
-      /**
-       * 重置搜索条件
-       */
-      reset() {
-        this.queryParams = {}
-        this.$nextTick(function () {
+    /**
+     * 点击每一行的checkbox
+     */
+    selectVal(ids) {
+      this.ids = ids.map(val => val['id'])
+      this.delBtnDisabled = !this.ids.length
+    },
+    /**
+     * 批量删除
+     */
+    removeBatch() {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteBatchRoleById(this.ids).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
+          }
           this.refresh()
         })
-      },
-      /**
-       * 添加弹出框
-       */
-      addRole() {
-        this.form = {};
-        this.dialogTitle = '添加角色'
-        this.dialogShow = true
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = {...row};
-        this.dialogTitle = '修改角色'
-        getDataScopeDeptIdsByRoleId(row.id).then(res => {
-          if (res.data) {
-            this.dataScopeDeptIds = res.data
-            this.$nextTick(function () {
-              this.dialogShow = true
-            })
+      })
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteRoleById(row.id).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
           }
+          // 刷新表格
+          this.refresh()
         })
-
-      },
-      /**
-       * 点击每一行的checkbox
-       */
-      selectVal(ids) {
-        this.ids = ids.map(val => val['id'])
-        this.delBtnDisabled = !this.ids.length
-      },
-      /**
-       * 批量删除
-       */
-      removeBatch() {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteBatchRoleById(this.ids).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteRoleById(row.id).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
+      })
+    },
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false
+      this.$refs[name].resetFields()
+    },
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      if (this.form.dataScope === '2') {
+        let deptIds = []
+        this.$refs.deptTree.getCheckedNodes(false, false).forEach(e => {
+          deptIds.push(e.id)
         })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        if (this.form.dataScope === '2') {
-          let deptIds = []
-          this.$refs.deptTree.getCheckedNodes(false, false).forEach(e => {
-            deptIds.push(e.id)
-          })
-          this.form.deptIds = deptIds;
+        this.form.deptIds = deptIds;
+      }
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加角色') {
+            addRole(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updateRole(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
         }
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加角色') {
-              addRole(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updateRole(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
+      })
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form')
+      // 刷新表格
+      this.refresh()
+    },
+    /**
+     * 授权模块
+     * @param row
+     */
+    authModule(row) {
+      this.roleId = row.id
+      let that = this;
+      getResourceTreeList().then(res => {
+        this.moduleData = res.data;
+      }).then(() => {
+        getResourceIdListByRoleId(this.roleId).then(res => {
+          res.data.forEach((i, n) => {
+            let node = that.$refs.moduleTree.getNode(i);
+            if (node.isLeaf) {
+              that.$refs.moduleTree.setChecked(node, true);
             }
-          }
-        })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form')
-        // 刷新表格
-        this.refresh()
-      },
-      /**
-       * 授权模块
-       * @param row
-       */
-      authModule(row) {
-        this.roleId = row.id
-        getResourceTreeList(this.roleId).then(res => {
-          this.defModuleIds = res.data
-        }).then(() => {
-          getResourceTreeTableList().then(res => {
-            this.moduleData = res.data;
-          })
-        }).then(() => {
-          this.$nextTick(function () {
-            this.dialogModuleShow = true;
           })
         })
-      },
-      saveAuthModule() {
-        // 获取选中及半选节点
-        let resIds = []
-        this.$refs.moduleTree.getCheckedNodes(false, false).forEach(e => {
-          resIds.push(e.id)
-        })
-        let roleResourceDto = {
-          userId: this.userId,
-          roleId: this.roleId,
-          resIds: resIds
-        }
-        saveAuthResource(roleResourceDto).then(res => {
-          if (res.code) {
-            MessageSuccess('upd')
-          } else {
-            MessageError('upd')
-          }
-          this.dialogModuleShow = false;
-          // 刷新表格
-          this.refresh()
+      }).then(() => {
+        this.$nextTick(function () {
+          this.dialogModuleShow = true;
         })
-      },
+      })
     },
-    mounted() {
-      this.getDictListByType('role_status').then(res => {
-        this.statusOptionList = res
+    saveAuthModule() {
+      // 获取选中及半选节点
+      let resIds = []
+      this.$refs.moduleTree.getCheckedNodes(false, true).forEach(e => {
+        resIds.push(e.id)
       })
-      this.getDictListByType('data_scope').then(res => {
-        this.dataScopeOptionList = res
+      let roleResourceDto = {
+        userId: this.userId,
+        roleId: this.roleId,
+        resIds: resIds
+      }
+      saveAuthResource(roleResourceDto).then(res => {
+        if (res.code) {
+          MessageSuccess('upd')
+        } else {
+          MessageError('upd')
+        }
+        this.dialogModuleShow = false;
+        // 刷新表格
+        this.refresh()
       })
-    }
+    },
+  },
+  mounted() {
+    this.getDictListByType('role_status').then(res => {
+      this.statusOptionList = res
+    })
+    this.getDictListByType('data_scope').then(res => {
+      this.dataScopeOptionList = res
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/admin/user/user-manage.vue b/src/views/admin/user/user-manage.vue
index bb4fb7d6f5bf7b3754db741bf0580455047b2838..61813e39183e6526f312d9bbe9e9f478e17817da 100644
--- a/src/views/admin/user/user-manage.vue
+++ b/src/views/admin/user/user-manage.vue
@@ -27,11 +27,15 @@
           <el-form-item label="用户名">
             <el-input type="text" v-model="queryParams.username" clearable placeholder="请输入用户名"/>
           </el-form-item>
+          <el-form-item label="昵称">
+            <el-input type="text" v-model="queryParams.nickName" clearable placeholder="请输入昵称"/>
+          </el-form-item>
           <el-form-item label-width="0px">
             <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
             <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
-            <el-button icon="el-icon-plus" v-permission="permission.add" type="primary" @click="addUser()">添加</el-button>
-            <el-button icon="el-icon-delete" v-permission="permission.delBatch" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除
+            <el-button icon="el-icon-plus" v-permission="['user:save']" type="primary" @click="addUser()">添加</el-button>
+            <el-button icon="el-icon-delete" v-permission="['user:delete']" type="primary" @click="removeBatch()"
+                       :disabled="delBtnDisabled">删除
             </el-button>
           </el-form-item>
         </el-form>
@@ -44,32 +48,33 @@
           :query-params="queryParams"
           @table-select-val="selectVal"
         >
-          <template  slot-scope="{ row }" slot="deptId">
-            <div>{{formatDeptName(row.deptId)}}</div>
-          </template>
           <template slot-scope="{ row }" slot="sex">
-            <el-tag v-for="item in sexOptionList"  v-if="row.sex === item.dictValue"  :type="item.listClass">
-              {{item.dictLabel}}
+            <el-tag v-for="item in sexOptionList" v-if="row.sex === item.dictValue" :type="item.listClass">
+              {{ item.dictLabel }}
             </el-tag>
           </template>
           <template slot-scope="{ row }" slot="userStatus">
             <el-tag v-for="item in statusOptionList" v-if="row.userStatus === item.dictValue" :type="item.listClass">
-              {{item.dictLabel}}
+              {{ item.dictLabel }}
             </el-tag>
           </template>
           <template slot-scope="{ row }" slot="action">
-            <el-button v-permission="permission.edit"  @click="update(row)" type="text">修改</el-button>
-            <el-button v-permission="permission.del" @click="remove(row)" type="text">删除</el-button>
-            <el-button v-permission="permission.resetPass" @click="resetPassword(row)" type="text">重置密码</el-button>
-            <el-button v-permission="permission.authRole" @click="authRole(row)" type="text">授权角色</el-button>
+            <el-button v-permission="['user:update']" @click="update(row)" type="text">修改</el-button>
+            <el-button v-permission="['user:delete']" @click="remove(row)" type="text">删除</el-button>
+            <el-button v-permission="['user:reset:pass']" @click="resetPassword(row)" type="text">重置密码</el-button>
+            <el-button v-permission="['user:auth:role']" @click="authRole(row)" type="text">授权角色</el-button>
           </template>
         </table-page>
       </el-col>
     </el-row>
 
-    <el-dialog :title="dialogTitle" :visible.sync="dialogShow" :close-on-click-modal="false" v-if="dialogShow"
+    <el-dialog :title="dialogTitle" v-if="dialogShow" :visible.sync="dialogShow" :close-on-click-modal="false"
                @close="handleReset('form')">
-      <el-form ref="form" :model="form" :rules="rules" label-width="85px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="部门" prop="deptId">
+          <vue-treeselect v-model="form.deptId" :options="deptTree" placeholder="请选择部门" :normalizer="normalizer"
+                          @input="change($event)"/>
+        </el-form-item>
         <el-row>
           <el-col :span="12">
             <el-form-item label="用户名" prop="username">
@@ -99,20 +104,20 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="性别" prop="sex">
-              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
+              <el-radio-group v-model="form.sex">
                 <template v-for="item in sexOptionList">
-                  <el-option :key="item.id" :value="item.dictValue" :label="item.dictLabel"/>
+                  <el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                 </template>
-              </el-select>
+              </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="状态" prop="userStatus">
-              <el-select v-model="form.userStatus" placeholder="请选择状态" style="width: 100%">
+              <el-radio-group v-model="form.userStatus">
                 <template v-for="item in statusOptionList">
-                  <el-option :key="item.id" :value="item.dictValue" :label="item.dictLabel"/>
+                  <el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
                 </template>
-              </el-select>
+              </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
@@ -124,40 +129,21 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-
             <el-form-item label="手机号" prop="phoneNumber">
               <el-input v-model="form.phoneNumber" placeholder="请输入手机号"/>
             </el-form-item>
           </el-col>
         </el-row>
-
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="部门" prop="deptId">
-              <tree-select
-                style="width: 100%"
-                :props="treeProps"
-                :options="deptTree"
-                :value="form.deptId"
-                :clearable="true"
-                :accordion="true"
-                @getValue="getSelectDept"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="岗位" prop="postIds">
-              <el-select v-model="form.postIds" @input="change($event)" multiple placeholder="请输入岗位" style="width: 100%">
-                <el-option
-                  v-for="item in postList"
-                  :key="item.id"
-                  :label="item.postName"
-                  :value="item.id">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
+        <el-form-item label="岗位" prop="postIds">
+          <el-select v-model="form.postIds" @input="change($event)" multiple placeholder="请输入岗位" style="width: 100%">
+            <el-option
+              v-for="item in postList"
+              :key="item.id"
+              :label="item.postName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="handleReset('form')">取 消</el-button>
@@ -187,398 +173,396 @@
 </template>
 
 <script>
-  import {
-    addUserInfo,
-    deleteBatchUserInfoById,
-    deleteUserInfoById,
-    getAuthRoleListByUserId, getPostListByUserId,
-    getUserInfoByUsername,
-    resetPassword,
-    saveAuthRole,
-    updateUserInfo
-  } from '_a/admin/user/user'
-  import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
-  import {getRoleAllList} from '_a/admin/role/role'
-  import {mapActions} from "vuex";
-  import TablePage from "_c/CommonForm/table-page";
-  import {getDeptTreeTableList} from "_a/admin/dept/dept";
-  import {getPostListAll} from "_a/admin/post/post";
-  import permission from '@/directive/permission/index.js' // 权限判断指令
-  import treeSelect from '@/components/TreeSelect'
+import {
+  addUserInfo,
+  deleteBatchUserInfoById,
+  deleteUserInfoById,
+  getAuthRoleListByUserId,
+  getPostListByUserId,
+  getUserInfoByUsername,
+  resetPassword,
+  saveAuthRole,
+  updateUserInfo
+} from '_a/admin/user/user'
+import {ConfirmCustom, MessageError, MessageSuccess} from '_l/message'
+import {getRoleAllList} from '_a/admin/role/role'
+import {mapActions} from "vuex";
+import TablePage from "_c/CommonForm/table-page";
+import {getDeptTreeTableList} from "_a/admin/dept/dept";
+import {getPostListAll} from "_a/admin/post/post";
+import VueTreeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
-  export default {
-    name: 'user-manage',
-    components: {TablePage, treeSelect},
-    directives: { permission },
-    data() {
-      const validateUsernameCount = (rule, value, callback) => {
-        if (value !== '') {
-          getUserInfoByUsername(this.form.username).then(res => {
-            if (res.data !== null) {
-              if (this.form.userId === res.data.userId) {
-                callback()
-              } else {
-                callback(new Error('用户名重复，请重新输入'))
-              }
-            } else {
+export default {
+  name: 'user-manage',
+  components: {TablePage, VueTreeselect},
+  data() {
+    const validateUsernameCount = (rule, value, callback) => {
+      if (value !== '') {
+        getUserInfoByUsername(this.form.username).then(res => {
+          if (res.data !== null) {
+            if (this.form.userId === res.data.userId) {
               callback()
+            } else {
+              callback(new Error('用户名重复，请重新输入'))
             }
-          })
-        } else {
-          callback()
-        }
+          } else {
+            callback()
+          }
+        })
+      } else {
+        callback()
       }
-      const validatePassCheck = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请输入确认密码'))
-        } else if (value !== this.form.password) {
-          callback(new Error('两次密码不一致，请重新输入'))
-        } else {
-          callback()
-        }
+    }
+    const validatePassCheck = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入确认密码'))
+      } else if (value !== this.form.password) {
+        callback(new Error('两次密码不一致，请重新输入'))
+      } else {
+        callback()
       }
-      return {
-        tableUrl: '/system-center/system/user/page',
-        columns: [
-          {label: '用户名', prop: 'username', sortable: 'custom'},
-          {label: '部门', slot: 'deptId'},
-          {label: '昵称', prop: 'nickName'},
-          {label: '邮箱', prop: 'email'},
-          {label: '手机号码', prop: 'phoneNumber'},
-          {label: '性别', slot: 'sex'},
-          {label: '状态', slot: 'userStatus'},
-          {label: '操作', slot: 'action', width: 400}
+    }
+    return {
+      tableUrl: '/system-center/system/user/page',
+      columns: [
+        {label: '部门', prop: 'deptName'},
+        {label: '用户名', prop: 'username', sortable: 'custom'},
+        {label: '昵称', prop: 'nickName'},
+        {label: '邮箱', prop: 'email'},
+        {label: '手机号码', prop: 'phoneNumber'},
+        {label: '性别', slot: 'sex'},
+        {label: '状态', slot: 'userStatus'},
+        {label: '操作', slot: 'action', width: 400}
+      ],
+      queryParams: {},
+      dialogShow: false,
+      dialogAuthRoleShow: false,
+      delBtnDisabled: true,
+      dialogTitle: '添加用户',
+      form: {},
+      ids: [],
+      rules: {
+        deptId: [
+          this.$ruler('部门')
+        ],
+        username: [
+          this.$ruler('用户名'),
+          {type: 'string', max: 16, min: 4, message: '请输入4-16个字符', trigger: 'blur'},
+          {validator: validateUsernameCount, trigger: 'blur'}
         ],
-        permission: {
-          add: ['ROLE_ADMIN', 'user:save'],
-          edit: ['ROLE_ADMIN', 'user:update'],
-          del: ['ROLE_ADMIN', 'user:delete'],
-          delBatch: ['ROLE_ADMIN', 'user:batch:delete'],
-          resetPass: ['ROLE_ADMIN', 'user:reset:pass'],
-          authRole: ['ROLE_ADMIN', 'user:auth:role'],
-        },
-        queryParams: {},
-        dialogShow: false,
-        dialogAuthRoleShow: false,
-        delBtnDisabled: true,
-        dialogTitle: '添加用户',
-        form: {},
-        ids: [],
-        rules: {
-          username: [
-            this.$ruler('用户名'),
-            {type: 'string', max: 16, min: 4, message: '请输入4-16个字符', trigger: 'blur'},
-            {validator: validateUsernameCount, trigger: 'blur'}
-          ],
-          password: [
-            this.$ruler('密码'),
-            {type: 'string', max: 16, min: 6, message: '请输入6-16个字符', trigger: 'blur'}
-          ],
-          passwordCheck: [
-            this.$ruler('确认密码'),
-            {validator: validatePassCheck, trigger: 'blur'}
-          ],
-          nickName: [
-            this.$ruler('昵称')
-          ],
-          sex: [
-            this.$ruler('性别', 'change')
-          ],
-          userStatus: [
-            this.$ruler('状态', 'change')
-          ],
-          phoneNumber: [
-            this.$ruler('手机号')
-          ],
-          deptId: [
-            this.$ruler('选择部门')
-          ]
-        },
-        sexOptionList: [],
-        statusOptionList: [],
-        // 授权角色使用
-        userId: null,
-        roleList: [],
-        targetKeys: [],
-        // 组织机构数据
-        deptTree: [],
-        // 岗位数据
-        postList: [],
-        treeProps: {
-          // 配置项（必选）
-          value: "id",
-          label: "name",
-          children: "children"
+        password: [
+          this.$ruler('密码'),
+          {type: 'string', max: 16, min: 6, message: '请输入6-16个字符', trigger: 'blur'}
+        ],
+        passwordCheck: [
+          this.$ruler('确认密码'),
+          {validator: validatePassCheck, trigger: 'blur'}
+        ],
+        nickName: [
+          this.$ruler('昵称')
+        ],
+        userStatus: [
+          this.$ruler('状态', 'change')
+        ],
+        phoneNumber: [
+          this.$ruler('手机号')
+        ]
+      },
+      sexOptionList: [],
+      statusOptionList: [],
+      // 授权角色使用
+      userId: null,
+      roleList: [],
+      targetKeys: [],
+      // 组织机构数据
+      deptTree: [],
+      // 岗位数据
+      postList: [],
+      treeProps: {
+        // 配置项（必选）
+        value: "id",
+        label: "name",
+        children: "children"
+      },
+      normalizer(node) {
+        return {
+          id: node.id,
+          label: node.name,
+          children: node.children
         }
       }
+    }
+  },
+  methods: {
+    ...mapActions(['getDictListByType']),
+    change(e) {
+      this.$forceUpdate()
     },
-    methods: {
-      ...mapActions(['getDictListByType']),
-      change(e) {
-        this.$forceUpdate()
-      },
-      /**
-       * 刷新
-       */
-      refresh() {
-        this.$refs.tablePage.refresh()
-      },
-      /**
-       * 重置搜索条件
-       */
-      reset() {
-        this.queryParams = {}
+    /**
+     * 刷新
+     */
+    refresh() {
+      this.$refs.tablePage.refresh()
+    },
+    /**
+     * 重置搜索条件
+     */
+    reset() {
+      this.queryParams = {}
+      this.$nextTick(function () {
+        this.refresh()
+      })
+    },
+    /**
+     * 添加弹出框
+     */
+    addUser() {
+      this.form = {
+        password: null,
+        userType: 1,
+        userStatus: '0',
+      };
+      this.dialogTitle = '添加用户'
+      this.dialogShow = true
+    },
+    /**
+     * 修改弹出框
+     * @param row
+     */
+    update(row) {
+      this.form = {...row}
+      this.dialogTitle = '修改用户'
+      getPostListByUserId(row.id).then(res => {
+        if (res.data) {
+          this.form.postIds = res.data;
+        }
         this.$nextTick(function () {
-          this.refresh()
-        })
-      },
-      /**
-       * 添加弹出框
-       */
-      addUser() {
-        this.form = {};
-        this.form.password = null
-        this.form.userType = 1
-        this.dialogTitle = '添加用户'
-        this.dialogShow = true
-      },
-      /**
-       * 修改弹出框
-       * @param row
-       */
-      update(row) {
-        this.form = {...row}
-        this.dialogTitle = '修改用户'
-        getPostListByUserId(row.id).then(res => {
-          if (res.data) {
-            this.form.postIds = res.data;
-          }
-          this.$nextTick(function () {
-            this.dialogShow = true
-          })
+          this.dialogShow = true
         })
+      })
 
-      },
-      /**
-       * 点击每一行的checkbox
-       */
-      selectVal(ids) {
-        this.ids = ids.map(val => val['id'])
-        this.delBtnDisabled = !this.ids.length
-      },
-      /**
-       * 批量删除
-       */
-      removeBatch() {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteBatchUserInfoById(this.ids).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 行内删除
-       * @param row
-       */
-      remove(row) {
-        ConfirmCustom({type: 'warning'}).then(() => {
-          deleteUserInfoById(row.id).then(res => {
-            if (res.code) {
-              MessageSuccess('del')
-            } else {
-              MessageError('del')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置密码
-       * @param row
-       */
-      resetPassword(row) {
-        ConfirmCustom({type: 'warning'}, '确定重置密码123456吗?').then(() => {
-          row.password = '123456'
-          resetPassword(row).then(res => {
-            if (res.code) {
-              MessageSuccess('upd')
-            } else {
-              MessageError('upd')
-            }
-            // 刷新表格
-            this.refresh()
-          })
-        })
-      },
-      /**
-       * 重置表单
-       * @param name
-       */
-      handleReset(name) {
-        this.dialogShow = false
-        this.$refs[name].resetFields()
-      },
-      /**
-       * 提交表单
-       * @param name
-       */
-      handleSubmit(name) {
-        this.$refs[name].validate((valid) => {
-          if (valid) {
-            if (this.dialogTitle === '添加用户') {
-              addUserInfo(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('add')
-                } else {
-                  MessageError('add')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            } else {
-              updateUserInfo(this.form).then(res => {
-                if (res.code) {
-                  MessageSuccess('upd')
-                } else {
-                  MessageError('upd')
-                }
-                this.cancelDialogAndRefresh()
-              })
-            }
+    },
+    /**
+     * 点击每一行的checkbox
+     */
+    selectVal(ids) {
+      this.ids = ids.map(val => val['id'])
+      this.delBtnDisabled = !this.ids.length
+    },
+    /**
+     * 批量删除
+     */
+    removeBatch() {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteBatchUserInfoById(this.ids).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
           }
+          this.refresh()
         })
-      },
-      /**
-       * 关闭弹出框 和 刷新表格
-       */
-      cancelDialogAndRefresh() {
-        // 清空表单
-        this.handleReset('form')
-        // 刷新表格
-        this.refresh()
-      },
-      /**
-       * 关闭授权角色弹出框
-       */
-      cancelAuthRoleDialog() {
-        this.dialogAuthRoleShow = false
-      },
-      filterMethod(query, item) {
-        return item.label.indexOf(query) > -1
-      },
-      /**
-       * 授权角色
-       * @param row
-       */
-      authRole(row) {
-        this.userId = row.id
-        getAuthRoleListByUserId(this.userId).then(res => {
-          this.targetKeys = res.data.map(e => e.id)
-        }).then(() => {
-          getRoleAllList().then(res => {
-            if (res.data) {
-              let roleList = []
-              res.data.forEach(e => {
-                let role = {
-                  key: e.id,
-                  label: e.roleName,
-                  disabled: e.roleStatus === '1'
-                }
-                roleList.push(role)
-              })
-              this.roleList = roleList
-            }
-          })
-        }).then(() => {
-          this.$nextTick(function () {
-            this.dialogAuthRoleShow = true
-          })
+      })
+    },
+    /**
+     * 行内删除
+     * @param row
+     */
+    remove(row) {
+      ConfirmCustom({type: 'warning'}).then(() => {
+        deleteUserInfoById(row.id).then(res => {
+          if (res.code) {
+            MessageSuccess('del')
+          } else {
+            MessageError('del')
+          }
+          // 刷新表格
+          this.refresh()
         })
-      },
-      /**
-       * 保存授权角色
-       */
-      saveAuthRole() {
-        let userInfoRoleDTO = {
-          userId: this.userId,
-          roleIds: this.targetKeys
-        }
-        saveAuthRole(userInfoRoleDTO).then(res => {
+      })
+    },
+    /**
+     * 重置密码
+     * @param row
+     */
+    resetPassword(row) {
+      ConfirmCustom({type: 'warning'}, '确定重置密码123456吗?').then(() => {
+        row.password = '123456'
+        resetPassword(row).then(res => {
           if (res.code) {
-            MessageSuccess('save')
+            MessageSuccess('upd')
           } else {
-            MessageError('save')
+            MessageError('upd')
           }
-          this.cancelAuthRoleDialog()
           // 刷新表格
           this.refresh()
         })
-      },
-      getDeptTreeList() {
-        getDeptTreeTableList().then(res => {
+      })
+    },
+    /**
+     * 重置表单
+     * @param name
+     */
+    handleReset(name) {
+      this.dialogShow = false
+      this.$refs[name].resetFields()
+    },
+    /**
+     * 提交表单
+     * @param name
+     */
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          if (this.dialogTitle === '添加用户') {
+            addUserInfo(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('add')
+              } else {
+                MessageError('add')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          } else {
+            updateUserInfo(this.form).then(res => {
+              if (res.code) {
+                MessageSuccess('upd')
+              } else {
+                MessageError('upd')
+              }
+              this.cancelDialogAndRefresh()
+            })
+          }
+        }
+      })
+    },
+    /**
+     * 关闭弹出框 和 刷新表格
+     */
+    cancelDialogAndRefresh() {
+      // 清空表单
+      this.handleReset('form')
+      // 刷新表格
+      this.refresh()
+    },
+    /**
+     * 关闭授权角色弹出框
+     */
+    cancelAuthRoleDialog() {
+      this.dialogAuthRoleShow = false
+    },
+    filterMethod(query, item) {
+      return item.label.indexOf(query) > -1
+    },
+    /**
+     * 授权角色
+     * @param row
+     */
+    authRole(row) {
+      this.userId = row.id
+      getAuthRoleListByUserId(this.userId).then(res => {
+        this.targetKeys = res.data.map(e => e.id)
+      }).then(() => {
+        getRoleAllList().then(res => {
           if (res.data) {
-            this.deptTree = res.data
+            let roleList = []
+            res.data.forEach(e => {
+              let role = {
+                key: e.id,
+                label: e.roleName,
+                disabled: e.roleStatus === '1'
+              }
+              roleList.push(role)
+            })
+            this.roleList = roleList
           }
         })
-      },
-      handleNodeClick(data) {
-        this.queryParams.deptId = data.id;
+      }).then(() => {
         this.$nextTick(function () {
-          this.refresh();
+          this.dialogAuthRoleShow = true
         })
-      },
-      toDeptView() {
-        this.$router.push('/admin/dept-manage')
-      },
-      getPostList() {
-        getPostListAll().then(res => {
-          if (res.data) {
-            this.postList = res.data;
-          }
-        })
-      },
-      // 选择的部门
-      getSelectDept(value) {
-        console.log(value)
-        // this.form.deptId = value;
-        this.$set(this.form,'deptId',value)
-      },
-      // 查询当前用户部门
-      formatDeptName(deptId, list = []) {
-        let data = [];
-        if (list.length === 0) {
-          data = this.deptTree;
-        } else if(list){
-          data = list;
+      })
+    },
+    /**
+     * 保存授权角色
+     */
+    saveAuthRole() {
+      let userInfoRoleDTO = {
+        userId: this.userId,
+        roleIds: this.targetKeys
+      }
+      saveAuthRole(userInfoRoleDTO).then(res => {
+        if (res.code) {
+          MessageSuccess('save')
+        } else {
+          MessageError('save')
         }
-        let name = '-';
-        for (let item of data) {
-          if (Number(item.id) === Number((deptId))) {
-            return item.name
-          } else if(item.children && item.children.length > 0) {
-            name = this.formatDeptName(deptId, item.children)
-          }
+        this.cancelAuthRoleDialog()
+        // 刷新表格
+        this.refresh()
+      })
+    },
+    getDeptTreeList() {
+      getDeptTreeTableList().then(res => {
+        if (res.data) {
+          this.deptTree = res.data
         }
-        return name;
-      }
-
+      })
     },
-    mounted() {
-      this.getDeptTreeList()
-      this.getPostList();
-      this.getDictListByType('sex').then(res => {
-        this.sexOptionList = res
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.$nextTick(function () {
+        this.refresh();
       })
-      this.getDictListByType('user_status').then(res => {
-        this.statusOptionList = res
+    },
+    toDeptView() {
+      this.$router.push('/admin/dept-manage')
+    },
+    getPostList() {
+      getPostListAll().then(res => {
+        if (res.data) {
+          this.postList = res.data;
+        }
       })
+    },
+    // 选择的部门
+    getSelectDept(value) {
+      console.log(value)
+      // this.form.deptId = value;
+      this.$set(this.form, 'deptId', value)
+    },
+    // 查询当前用户部门
+    formatDeptName(deptId, list = []) {
+      let data = [];
+      if (list.length === 0) {
+        data = this.deptTree;
+      } else if (list) {
+        data = list;
+      }
+      let name = '-';
+      for (let item of data) {
+        if (Number(item.id) === Number((deptId))) {
+          return item.name
+        } else if (item.children && item.children.length > 0) {
+          name = this.formatDeptName(deptId, item.children)
+        }
+      }
+      return name;
     }
+
+  },
+  mounted() {
+    this.getDeptTreeList()
+    this.getPostList();
+    this.getDictListByType('sex').then(res => {
+      this.sexOptionList = res
+    })
+    this.getDictListByType('user_status').then(res => {
+      this.statusOptionList = res
+    })
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/parent-view.vue b/src/views/parent-view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a14d0c32cbe04a9e063c6fa1439440c2906ea45c
--- /dev/null
+++ b/src/views/parent-view.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>