diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 36ba5d382..fbdd9d2fb 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -4,6 +4,36 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+      "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
+    "@riophae/vue-treeselect": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
+      "integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "easings-css": "^1.0.0",
+        "fuzzysearch": "^1.0.3",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.0.0",
+        "material-colors": "^1.2.6",
+        "watch-size": "^2.0.0"
+      }
+    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -3576,6 +3606,11 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "easings-css": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
+      "integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -5005,6 +5040,11 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "fuzzysearch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
+      "integrity": "sha1-3/yA9tawQiPyImqnndGUIxCW0Ag="
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -5942,6 +5982,11 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
     "is-regex": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@@ -6371,6 +6416,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -12354,6 +12404,11 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
       "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
     },
+    "watch-size": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",
+      "integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 353500894..568bb61e1 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.19.0",
     "cytoscape": "^3.15.2",
     "echarts": "^4.7.0",
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 2e0a7fcda..68b39ad04 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1053,7 +1053,7 @@ li{
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
+.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
 .right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart {
   width: 850px;
 }
@@ -2303,3 +2303,15 @@ li{
     margin-right: 4px;
   }
 }
+.el-radio-group .el-radio__inner:hover{
+  border-color: #ee9d3f !important;
+}
+.el-radio-group .is-checked {
+  .el-radio__inner{
+    background-color: #ee9d3f !important;
+    border-color: #ee9d3f !important;
+  }
+  .el-radio__label{
+    color: #ee9d3f !important;;
+  }
+}
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index f9af922d3..13c420e60 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -124,6 +124,9 @@
         <el-menu-item index="5-0">
           <div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
         </el-menu-item>
+        <el-menu-item index="5-9">
+          <div @click="jumpTo('/roles')" :class="{'menu-item-active' :(route == '/roles' )}">{{$t('config.roles.roles')}}</div>
+        </el-menu-item>
         <el-menu-item index="5-1">
           <div @click="jumpTo('/promServer')" :class="{'menu-item-active' :(route == '/promServer' )}">{{$t('config.promServer.promServerList')}}</div>
         </el-menu-item>
diff --git a/nezha-fronted/src/components/common/home.vue b/nezha-fronted/src/components/common/home.vue
index 71463e2a9..b2bfd3b15 100644
--- a/nezha-fronted/src/components/common/home.vue
+++ b/nezha-fronted/src/components/common/home.vue
@@ -4,7 +4,8 @@
     <!--<div class="content-box" >
       <router-view/>
     </div>-->
-    <left-menu></left-menu>
+    <left-menu ></left-menu>
+    <menus v-if="isMenuPage"></menus>
     <web-ssh ref="webSsh" ></web-ssh>
   </div>
 
@@ -14,12 +15,20 @@
 import Header from "./header";
 import webSSH from "../cli/webSSH";
 import leftMenu from "./leftMenu";
+import menus from "../page/config/menus";
 export default {
   name: "home",
   components: {
     Header,
     'web-ssh': webSSH,
-    'left-menu': leftMenu
+    'left-menu': leftMenu,
+    menus
+  },
+  computed:{
+    isMenuPage:function(){
+      console.log(this.$route.path )
+      return this.$route.path == '/menu'
+    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index ee20328cc..2ea70afc3 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -5,6 +5,7 @@ export const staticMenus = {
     title: i18n.t('overall.config'),
     menu: [
       {route: '/account', name: i18n.t('config.account.account')},
+      {route: '/roles', name: i18n.t('config.roles.roles')},
       {route: '/promServer', name: i18n.t('config.promServer.promServerList')},
       {route: '/dc', name: i18n.t('config.dc.dc')},
       {route: '/model', name: i18n.t('config.model.model')},
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 7a6e3752d..d4166eed2 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -352,7 +352,7 @@ const cn = {
         total: "总计",
         up: "up",
         down: "down",
-        prometheus: "prometheus"
+        prometheus: "prometheus",
       }
     }
   },
@@ -556,6 +556,7 @@ const cn = {
     account: {
       accountList: "用户列表",
       account: "用户",
+      roles:"角色",
       language: "语言",
       receiver: "接收人",
       createTime: "创建时间",
@@ -577,6 +578,35 @@ const cn = {
       reinputPwd: "请再次输入密码",
       notification: "通知"
     },
+    roles:{
+      roles:"角色",
+      name:"名称",
+      remark:"备注",
+      option: '操作',//"操作"
+      permission:"权限",
+      menu:"菜单",
+      createRole:"新增角色",
+      editRole:"编辑角色",
+
+    },
+    menus:{
+      menus:'菜单',
+      name:"名称",
+      remark:"备注",
+      option: '操作',//"操作"
+      code:'Code',
+      i18n:'I18n',
+      type:'类型',
+      route:'路由',
+      perms:'权限',
+      button:"按钮",
+      menu:"菜单",
+      parent:"上级菜单",
+      mainMenu:"主菜单",
+      createMenu:"新增菜单",
+      editMenu:"编辑菜单",
+      orderNum:"排序",
+    },
     promServer: {
       promServerList: "Prometheus服务",
       promId: "Prometheus服务ID",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 92cdac40a..052690431 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -559,6 +559,7 @@ const en = {
       accountList: 'Account list',//"用户列表"
       //列表表头
       account: 'Account',//"用户"
+      roles:"Roles",
       language: 'Language',//"语言"
       receiver: 'Receiver',//"用户组"
       createTime: 'Create time',//"创建时间"
@@ -581,6 +582,34 @@ const en = {
       reinputPwd:'Enter password again',
       notification: 'Notification'
     },
+    roles:{
+      roles:"Roles",
+      name:"Name",
+      remark:"Remark",
+      option: 'Operation',//"操作"
+      permission:"Permission",
+      menu:"Menu",
+      createRole:"Create role",
+      editRole:"Edit role"
+    },
+    menus:{
+      menus:'Menus',
+      name:"Name",
+      remark:"Remark",
+      option: 'Operation',//"操作",
+      code:'Code',
+      i18n:'I18n',
+      type:'Type',
+      route:'Route',
+      perms:'Permission',
+      button:"Button",
+      menu:"Menu",
+      parent:"Previous menu",
+      mainMenu:'Primary menu',
+      createMenu:"Create menu",
+      editMenu:"Edit menu",
+      orderNum:"Order",
+    },
     promServer: {
       promServerList: 'Prometheus server',//"Prometheus Server"
       //侧滑框
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 37ce93d0c..710e740e3 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -38,6 +38,14 @@
                      inactive-value="0">
           </el-switch>
         </el-form-item>
+        <!--roles-->
+        <el-form-item :label="$t('config.account.roles')">
+          <el-select v-model="editUser.roleIds" multiple size="small" clearable collapse-tags placeholder="" popper-class="config-dropdown" @change="()=>{this.$forceUpdate()}">
+            <template v-for="role in roles">
+              <el-option :value="role.id" :label="role.i18n?$t(role.i18n):role.name"></el-option>
+            </template>
+          </el-select>
+        </el-form-item>
         <el-form-item :label="$t('config.account.createTime')" v-if="editUser.userId">
           <div class="right-box-form-content-txt">{{editUser.createTime}}</div>
         </el-form-item>
@@ -109,7 +117,8 @@
         },
         editUser: {},
         scripts: [],
-        selectableScripts: []
+        selectableScripts: [],
+        roles:[],
       }
     },
     methods: {
@@ -171,6 +180,7 @@
           this.scripts = response.data.list;
           this.getSelectableScripts();
         });
+        this.getRoles();
         /*this.scripts = [
           {id: 1, name: "DOLBY"},
           {id: 2, name: "IMAX"},
@@ -202,7 +212,16 @@
           });
         }
       },
-
+      getRoles:function(){
+        this.roles = [];
+        this.$get("sys/role").then(response=>{
+          if (response.code  == 200){
+            this.roles = response.data.list;
+          }else{
+            this.$message.error("load roles faild")
+          }
+        })
+      },
       addNotification() {
         let scripts = this.selectableScripts.find(item => {
           return item.disabled === false;
@@ -229,6 +248,8 @@
         deep: true,
         handler(n) {
           this.editUser = JSON.parse(JSON.stringify(n));
+          this.editUser.roleIds=n.roles&&n.roles.map(t=>t.id)
+          console.log(this.editUser)
         }
       },
       "editUser.notifications": {
@@ -237,6 +258,13 @@
         handler(n) {
           this.getSelectableScripts();
         }
+      },
+      editUser:{
+        deep:true,
+        immediate:true,
+        handler(n,o){
+          console.log('editUser',n)
+        }
       }
     },
   }
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
new file mode 100644
index 000000000..b81ea59f1
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="right-box right-box-menu" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button type="button" v-if="editMenu.id" @click="del"
+              class="nz-btn nz-btn-size-normal nz-btn-size-alien"
+              id="menus-edit-del">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editMenu.id ? ($t("config.menus.editMenu") + "  ID：" + editMenu.id) : $t("config.menus.createMenu")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form class="right-box-form right-box-form-left" :model="editMenu" :rules="rules" size="small" ref="menuForm" label-position="right" label-width="130px">
+        <el-form-item :label="$t('config.menus.parent')" prop="parentId">
+          <tree-select v-model="editMenu.parentId" :multiple="false" :options="menus" label="id" noChildrenText="" noOptionsText="" placeholder=""></tree-select>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.type')" prop="type">
+          <el-radio-group v-model="editMenu.type">
+            <el-radio :label="1">{{$t('config.menus.menu')}}</el-radio>
+            <el-radio :label="2">{{$t('config.menus.button')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <!--name-->
+        <el-form-item :label="$t('config.menus.name')" prop="name">
+          <el-input  type="text" placeholder="" v-model="editMenu.name" ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.code')" prop="code">
+          <el-input  type="text" placeholder="" v-model="editMenu.code" ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.i18n')" prop="i18n">
+          <el-input  type="text" placeholder="" v-model="editMenu.i18n" ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.menus.route')" prop="route">
+          <el-input  type="text" placeholder="" v-model="editMenu.route" ></el-input>
+        </el-form-item>
+        <!--<el-form-item :label="$t('config.menus.perms')" prop="perms">
+          <el-input  type="text" placeholder="" v-model="editMenu.perms" ></el-input>
+        </el-form-item>-->
+        <el-form-item :label="$t('config.menus.orderNum')" prop="orderNum">
+          <el-input-number v-model="editMenu.orderNum" controls-position="right" :min="1" :max="1000" :precision="0" style="width: 100%;" ></el-input-number>
+        </el-form-item>
+
+        <div class="right-box-sub-title">{{$t('config.menus.perms')}}
+          <button @click="addPermission" id="add-permission" type="button" class="float-right" >
+            <span><i class="nz-icon nz-icon-create-square"></i></span>
+          </button>
+        </div>
+
+        <div class="right-box-line"></div>
+
+        <el-form-item v-for="(permission,index) in editMenu.permissions" :key="index" :label="index+1+''" >
+          <el-input v-model="editMenu.permissions[index].value" type="text" placeholder="" style="width: calc(100% - 37px);"></el-input>
+          <span @click="removePermission(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="menus-esc"
+              class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="menus-save"
+              class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  import Treeselect from '@riophae/vue-treeselect'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  export default {
+    name: "menuBox",
+    components:{
+      'tree-select':Treeselect,
+    },
+    props: {
+      menu: Object
+    },
+    computed: {
+      isCurrentUser() {
+        return function(username) {
+          return localStorage.getItem('nz-username') == username;
+        }
+      },
+      addDisabled() {
+        let enabled = this.selectableScripts.filter(item => {
+          return !item.disabled
+        });
+        return enabled.length === 0;
+      }
+    },
+    data() {
+      return {
+        rules: { //表单校验规则
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          type: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          code: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          i18n: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          perms: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          orderNum: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        editMenu: {},
+        menus:[],
+      }
+    },
+    methods: {
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      /*保存*/
+      save() {
+        this.$refs.menuForm.validate(valid => {
+          if (valid) {
+            this.editMenu.perms = this.editMenu.permissions&&this.editMenu.permissions.length>0?this.editMenu.permissions.map(t=>t.value).join(','):'';
+            delete this.editMenu.permissions;
+            if (this.editMenu.id) {
+              this.$put('sys/menu', this.editMenu).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('sys/menu', this.editMenu).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        })
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/menu/?ids=" + this.editMenu.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.esc(true);
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      addPermission:function(){
+        if(this.editMenu.permissions){
+          this.editMenu.permissions.push({value:''})
+        } else{
+          this.$set(this.editMenu,'permissions',[{value:''}])
+        }
+      },
+      removePermission:function(index){
+        this.editMenu.permissions.splice(index,1)
+      },
+      getMenus:function(){
+        this.menus = [];
+        this.$get("sys/menu").then(response=>{
+          if (response.code  == 200){
+            this.menus = response.data.list;
+            function replaceFunc(data){
+              data.forEach(t=>{
+                t.label = t.name;
+                if(t.children&&t.children instanceof Array&&t.children.length>0){
+                  replaceFunc(t.children)
+                }else{
+                  delete t.children
+                }
+              })
+            }
+            replaceFunc(this.menus)
+            this.menus = [{
+              id:0,
+              label:this.$t('config.menus.mainMenu'),
+              children:JSON.parse(JSON.stringify(this.menus))
+            }]
+          }else{
+            this.$message.error("load menu faild")
+          }
+        })
+      },
+    },
+    mounted() {
+      this.getMenus();
+    },
+    watch: {
+      //将prop里的user转为组件内部对象
+      menu: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          this.editMenu = JSON.parse(JSON.stringify(n));
+          if(this.editMenu.perms&&this.editMenu.perms != ''){
+            this.$set(this.editMenu,'permissions',this.editMenu.perms.split(',').map(t=>{return {value:t};}))
+          }
+
+          console.log('editMenu',this.editMenu)
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .right-box-menu .el-input-number .el-input__inner{
+
+    text-align: left !important;
+  }
+  .right-box-menu {
+    .right-box-sub-title {
+      #add-permission {
+        border: none;
+        outline: none;
+        cursor: pointer;
+
+        i {
+          font-size: 17px;
+          background-color: #f6f6f6;
+        }
+      }
+    }
+  }
+</style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
new file mode 100644
index 000000000..146a42af3
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="right-box right-box-role" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button type="button" v-if="editRole.id" @click="del"
+              class="nz-btn nz-btn-size-normal nz-btn-size-alien"
+              id="roles-edit-del">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editRole.id ? ($t("config.roles.editRole") + "  ID：" + editRole.id) : $t("config.roles.createRole")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form class="right-box-form right-box-form-left" :model="editRole" :rules="rules" ref="roleForm" label-position="right" label-width="120px">
+        <!--name-->
+        <el-form-item :label="$t('config.roles.name')" prop="name">
+          <el-input  type="text" placeholder=""
+                    v-model="editRole.name" maxlength="64" show-word-limit size="small"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.roles.remark')">
+          <el-input size='mini' v-model="editRole.remark" type="textarea" :rows="2"/>
+        </el-form-item>
+
+        <el-form-item :label="$t('config.roles.permission')">
+          <!--<div class="tree-option">
+            <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
+            <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
+          </div>-->
+          <el-tree :data="menus" node-key="id" show-checkbox  :default-expand-all="expandAllFlag" :props="{label:labelFormatter}" ref="menuTree" @check-change="selectChange" class="tree-border"></el-tree>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="roles-esc"
+              class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="roles-save"
+              class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "roleBox",
+    props: {
+      role: Object
+    },
+    computed: {
+    },
+    data() {
+      return {
+        rules: { //表单校验规则
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        editRole: {},
+        menus:[],
+        selectAllFlag:false,
+        expandAllFlag:true,
+      }
+    },
+    methods: {
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      /*保存*/
+      save() {
+        this.$refs.roleForm.validate(valid => {
+          if (valid) {
+            if (this.editRole.id) {
+              this.$put('sys/role', this.editRole).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('sys/role', this.editRole).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        })
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/role/?ids=" + this.editRole.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.esc(true);
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      getMenus:function(){
+        this.menus = [];
+        if(this.editRole.id){
+          this.$get("sys/role/menu/"+this.editRole.id).then(response=>{
+            if(response.code == 200){
+              this.menus = response.data.menus;
+              this.editRole.menuIds = response.data.selectedIds;
+              if(this.$refs.menuTree){
+                this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds,true);
+              }
+            }else{
+              this.$message.error("load menu faild")
+            }
+          })
+        }else{
+          this.$get("sys/menu").then(response=>{
+            if (response.code  == 200){
+              this.menus = response.data.list;
+            }else{
+              this.$message.error("load menu faild")
+            }
+          })
+        }
+      },
+      labelFormatter:function(data,node){
+        return data&&data.i18n?this.$t(data.i18n):data.name;
+      },
+      selectChange:function(data,isCheck,childIsCheck){
+        if(this.$refs.menuTree){
+          this.editRole.menuIds=this.$refs.menuTree.getCheckedKeys(false);
+        }
+      },
+      selectAllOrNone:function(){
+        if(this.$refs.menuTree){
+          if(!this.selectAllFlag){
+            this.$refs.menuTree.setCheckedNodes(this.menus);
+          }else{
+            this.$refs.menuTree.setCheckedNodes([]);
+          }
+          this.selectAllFlag = !this.selectAllFlag;
+        }
+      },
+      expandAllOrNone:function(){
+        this.expandAllFlag = !this.expandAllFlag;
+        let $self=this;
+        if(this.$refs.menuTree){
+          this.menus.forEach(t=>{
+            $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag;
+          })
+        }
+      }
+    },
+    mounted() {
+      this.getMenus();
+    },
+    watch: {
+      //将prop里的user转为组件内部对象
+      role: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          this.editRole = JSON.parse(JSON.stringify(n));
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .right-box-role .tree-border{
+    margin-top: 5px;
+    border: 1px solid #e5e6e7;
+    background: #fff none;
+    border-radius: 4px;
+    /*margin-top: 40px;*/
+  }
+  .right-box-role .tree-option{
+    float: right;
+  }
+  .right-box-role .option-btn{
+    margin: 6px 0 0 7px;
+  }
+  .right-box-role .btn-active{
+    color: #ee9d3f;
+    font-weight: bold;
+    border-color: #ee9d3f !important;
+  }
+</style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index ada6f4bbf..4d8a1d7b0 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -2,6 +2,19 @@
   .account {
     height: 100%;
   }
+  .account .account-role-item{
+    background-color: #409eff;
+    border: 1px solid #409eff;
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    border-radius: 4px;
+    display: inline-block;
+    box-sizing: content-box;
+    padding:3px;
+    margin-right: 3px;
+    color: white;
+  }
 </style>
 <template>
   <div class="account">
@@ -74,6 +87,16 @@
               &nbsp;
               <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
+            <template v-if="item.prop == 'roles'">
+              <template v-if="scope.row[item.prop]">
+                <template  v-for="role in scope.row[item.prop]">
+                  <div class="account-role-item" v-if="role"><span>{{role.i18n?$t(role.i18n):role.name}}</span></div>
+                </template>
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
             <span v-else-if="item.prop == 'lang'">
                 {{scope.row[item.prop] == 'en' ? 'English' : ''}}
                 {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
@@ -171,6 +194,7 @@
           status: '1',
           createTime: '',
           receiver: [],
+          roles:[],
           lang: '',
           notifications: []
         },
@@ -189,6 +213,10 @@
             label: this.$t("config.account.account"),
             prop: 'username',
             show: true,
+          }, {
+            label: this.$t("config.account.roles"),
+            prop: 'roles',
+            show: true,
           }, {
             label: 'E-mail',
             prop: 'email',
diff --git a/nezha-fronted/src/components/page/config/menus.vue b/nezha-fronted/src/components/page/config/menus.vue
new file mode 100644
index 000000000..1bac539ae
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -0,0 +1,344 @@
+<style scoped>
+  .menus {
+    position: relative;
+    height: calc(100% - 50px) !important;
+  }
+</style>
+<template>
+  <div class="menus">
+    <!-- 主页面 -->
+    <div class="main-list" >
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="top-tools" >
+        <div class="top-tool-main-right" >
+          <div class="top-tool-search">
+            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input>
+          </div>
+          <button type="button" @click="add" :title="$t('overall.createMenus')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="menus-add">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="sys/menu" @after="getTableData" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}"></delete-button>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          v-if="tools.showCustomTableTitle"
+          @close="tools.showCustomTableTitle = false"
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          ref="customTableTitle"
+        ></element-set>
+      </transition>
+      <el-table
+        class="nz-table"
+        :data="tableData"
+        row-key="id"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        border
+        ref="menusTable"
+        :height="mainTableHeight"
+        v-loading="tools.loading"
+        v-scrollBar:el-table="'large'"
+        style="width: 100%;"
+        @sort-change="tableDataSort"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+      >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          :resizable="true"
+          v-for="(item, index) in tools.customTableTitle"
+          v-if="item.show"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :prop="item.prop"
+          :sort-orders="['ascending', 'descending']"
+        >
+          <template slot-scope="scope" slot="header">
+          <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
+          <span v-else><span>{{item.label}}</span></span>
+        </template>
+          <template slot-scope="scope" :column="item">
+            <div v-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'menus-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
+              &nbsp;
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'menus-del-'+scope.row.id"><i class="nz-icon nz-icon-delete" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
+            </div>
+            <template v-if="item.prop == 'name'">
+              <template v-if="scope.row.i18n">
+                <span>{{$t(scope.row.i18n)}}</span>
+              </template>
+              <template v-else-if="scope.row.name">
+                <span>{{scope.row.name}}</span>
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
+            <template v-else-if="item.prop == 'type'">
+              <span>{{scope.row[item.prop] == 2?$t('config.menus.button'):$t('config.menus.menu')}}</span>
+            </template>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="28" fixed="right">
+          <template slot="header" slot-scope="scope" :resizable="false">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn " @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+    </div>
+    <transition name="right-box">
+      <menu-box v-if="rightBox.show" :menu="menu" @close="closeRightBox"></menu-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import deleteButton from "../../common/deleteButton";
+  import menuBox from '../../common/rightBox/menuBox';
+
+  export default {
+    name: "menus",
+    components: {
+      'menu-box': menuBox,
+      'delete-button':deleteButton,
+    },
+    data() {
+      return {
+        //侧滑
+        rightBox: {
+          show: false,
+        },
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showTopBtn: false, //显示To top按钮
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        batchDeleteObjs:[],
+        menu: {},
+
+        tableId: 'menusTable', //需要分页的table的id，用于记录每页数量
+        blankMenu: { //空白对象
+          "name": "",
+          "code": "",
+          "i18n": "",
+          "parentId": 0,
+          "type": 1,
+          "route": "",
+          "orderNum": 1,
+          "perms": "",
+        },
+        pageObj: { //分页对象
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        tableTitle: [ //原table列
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("config.menus.name"),
+            prop: 'name',
+            show: true,
+          }, {
+            label: this.$t("config.menus.code"),
+            prop: 'code',
+            show: true,
+          }, {
+            label: this.$t("config.menus.i18n"),
+            prop: 'i18n',
+            show: true,
+          },{
+            label: this.$t("config.menus.type"),
+            prop: 'type',
+            show: true,
+          },{
+            label: this.$t("config.menus.route"),
+            prop: 'route',
+            show: true,
+          },{
+            label: this.$t("config.menus.perms"),
+            prop: 'perms',
+            show: true,
+          },{
+            label: this.$t("config.menus.orderNum"),
+            prop: 'orderNum',
+            show: true,
+          },{
+            label: this.$t('config.menus.option'),
+            prop: 'option',
+            show: true,
+            width: 120,
+            fixed: "right"
+          }
+        ],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 10,
+            name: "ID",
+            type: 'input',
+            label: "id",
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+      }
+    },
+    methods: {
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.getTableData();
+        }
+      },
+      edit(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.menu = JSON.parse(JSON.stringify(u));
+        this.rightBox.show = true;
+      },
+      del(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/menu?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      getTableData() {
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.tools.loading = true;
+        this.$get('sys/menu', this.searchLabel).then(response => {
+          this.tools.loading = false;
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+            this.tools.loading = false;
+          }
+        })
+      },
+      add() {
+        this.menu = this.newMenu();
+        this.rightBox.show = true;
+      },
+      esc() {
+        this.rightBox.show = false;
+      },
+      newMenu() {
+        return JSON.parse(JSON.stringify(this.blankMenu));
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search(searchObj) {
+        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(this.$refs.menusTable){
+          this.$refs.menusTable.bodyWrapper.scrollTop = 0;
+        }
+        this.getTableData();
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy = '';
+        if(item.order === 'ascending') {
+          orderBy = item.prop;
+        }
+        if(item.order === 'descending') {
+          orderBy = '-' + item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+      plpsscrolly(el,self){
+        if (el._ps_.scrollbarYTop > 50) {
+          self.tools.showTopBtn = true;
+          self.tools.tableHover = true;
+        } else {
+          self.tools.showTopBtn = false;
+          self.tools.tableHover = true;
+        }
+      },
+
+    },
+    computed: {
+    },
+    watch: {
+    },
+    created(){
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+    },
+    mounted() {
+      //初始化表头
+      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
+      this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        }
+      });
+    },
+    beforeDestroy(){
+      let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
+      if (el._ps_) {
+        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        el._ps_.destroy();
+      }
+    }
+  }
+</script>
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
new file mode 100644
index 000000000..1fa618596
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -0,0 +1,311 @@
+<style scoped>
+  .roles {
+    height: 100%;
+  }
+</style>
+<template>
+  <div class="roles">
+    <!-- 主页面 -->
+    <div class="main-list" >
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="top-tools" >
+        <div class="top-tool-main-right" >
+          <div class="top-tool-search">
+            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input>
+          </div>
+          <button type="button" @click="add" :title="$t('overall.createRoles')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="roles-add">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="sys/role" @after="getTableData" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}"></delete-button>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          v-if="tools.showCustomTableTitle"
+          @close="tools.showCustomTableTitle = false"
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          ref="customTableTitle"
+        ></element-set>
+      </transition>
+      <el-table
+        class="nz-table"
+        :data="tableData"
+        border
+        ref="rolesTable"
+        :height="mainTableHeight"
+        v-loading="tools.loading"
+        v-scrollBar:el-table="'large'"
+        style="width: 100%;"
+        @sort-change="tableDataSort"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+      >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          :resizable="true"
+          v-for="(item, index) in tools.customTableTitle"
+          v-if="item.show"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :prop="item.prop"
+          :sort-orders="['ascending', 'descending']"
+        >
+          <template slot-scope="scope" slot="header">
+          <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
+          <span v-else><span>{{item.label}}</span></span>
+        </template>
+          <template slot-scope="scope" :column="item">
+            <div v-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'roles-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
+              &nbsp;
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'roles-del-'+scope.row.id"><i class="nz-icon nz-icon-delete" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
+            </div>
+            <template v-if="item.prop == 'name'">
+              <template v-if="scope.row.i18n">
+                <span>{{$t(scope.row.i18n)}}</span>
+              </template>
+              <template v-else-if="scope.row.name">
+                <span>{{scope.row.name}}</span>
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="28" fixed="right">
+          <template slot="header" slot-scope="scope" :resizable="false">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn " @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+    </div>
+    <transition name="right-box">
+      <role-box v-if="rightBox.show" :role="role" @close="closeRightBox"></role-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import deleteButton from "../../common/deleteButton";
+  import roleBox from '../../common/rightBox/roleBox';
+
+  export default {
+    name: "roles",
+    components: {
+      'role-box': roleBox,
+      'delete-button':deleteButton,
+    },
+    data() {
+      return {
+        //侧滑
+        rightBox: {
+          show: false,
+        },
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showTopBtn: false, //显示To top按钮
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        batchDeleteObjs:[],
+        role: {},
+
+        tableId: 'rolesTable', //需要分页的table的id，用于记录每页数量
+        blankRole: { //空白对象
+
+        },
+        pageObj: { //分页对象
+          pageNo: 1,
+          pageSize: 50,
+          total: 0
+        },
+        tableTitle: [ //原table列
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("config.roles.name"),
+            prop: 'name',
+            show: true,
+          }, {
+            label: this.$t("config.roles.remark"),
+            prop: 'remark',
+            show: true,
+          }, {
+            label: this.$t('config.roles.option'),
+            prop: 'option',
+            show: true,
+            width: 120,
+            fixed: "right"
+          }
+        ],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 10,
+            name: this.$t('config.roles.name'),
+            type: 'input',
+            label: this.$t('config.roles.name'),
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+      }
+    },
+    methods: {
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.getTableData();
+        }
+      },
+      edit(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.role = JSON.parse(JSON.stringify(u));
+        this.rightBox.show = true;
+      },
+      del(u) {
+        if(u.buildIn == 1){
+          return ;
+        }
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("sys/role?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      getTableData() {
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.tools.loading = true;
+        this.$get('sys/role', this.searchLabel).then(response => {
+          this.tools.loading = false;
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+            this.tools.loading = false;
+          }
+        })
+      },
+      add() {
+        this.role = this.newRole();
+        this.rightBox.show = true;
+      },
+      esc() {
+        this.rightBox.show = false;
+      },
+      newRole() {
+        return JSON.parse(JSON.stringify(this.blankRole));
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search(searchObj) {
+        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(this.$refs.rolesTable){
+          this.$refs.rolesTable.bodyWrapper.scrollTop = 0;
+        }
+        this.getTableData();
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy = '';
+        if(item.order === 'ascending') {
+          orderBy = item.prop;
+        }
+        if(item.order === 'descending') {
+          orderBy = '-' + item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+      plpsscrolly(el,self){
+        if (el._ps_.scrollbarYTop > 50) {
+          self.tools.showTopBtn = true;
+          self.tools.tableHover = true;
+        } else {
+          self.tools.showTopBtn = false;
+          self.tools.tableHover = true;
+        }
+      },
+
+    },
+    computed: {
+    },
+    watch: {
+    },
+    created(){
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+    },
+    mounted() {
+      //初始化表头
+      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
+      this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        }
+      });
+    },
+    beforeDestroy(){
+      let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
+      if (el._ps_) {
+        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+        el._ps_.destroy();
+      }
+    }
+  }
+</script>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 25fc414f2..c5329e208 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -60,6 +60,14 @@ export default new Router({
           path: '/account',
           component: resolve => require(['../components/page/config/account.vue'], resolve),
         },
+        {
+          path: '/menu',
+          component: resolve => require(['../components/page/config/menus.vue'], resolve),
+        },
+        {
+          path: '/roles',
+          component: resolve => require(['../components/page/config/roles.vue'], resolve),
+        },
         {
           path: '/promServer',
           component: resolve => require(['../components/page/config/promServer.vue'], resolve),