From 49f66a234eeb7748324d239e72b1d4773045549d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 13 Apr 2021 10:00:48 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20menu=E3=80=81role=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/constants.js     |   3 +-
 .../src/components/common/language/cn.js      | 234 +------------
 .../src/components/common/language/en.js      | 248 +-------------
 .../src/components/common/mixin/dataList.js   |   9 +-
 .../src/components/common/mixin/table.js      |   4 +-
 .../components/common/rightBox/menuBox.vue    |   4 +-
 .../components/common/rightBox/userBox.vue    |  29 +-
 .../common/table/settings/menuTable.vue       | 121 +++++++
 .../common/table/settings/roleTable.vue       |  96 ++++++
 .../common/table/settings/userTable.vue       |   5 +-
 nezha-fronted/src/components/layout/home.vue  |   9 -
 .../src/components/layout/leftMenu.vue        |   2 +-
 .../src/components/page/config/menus.vue      | 315 +++---------------
 .../src/components/page/config/roles.vue      | 137 ++------
 .../src/components/page/config/user.vue       |  19 +-
 nezha-fronted/src/router/index.js             |   6 +-
 16 files changed, 348 insertions(+), 893 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/table/settings/menuTable.vue
 create mode 100644 nezha-fronted/src/components/common/table/settings/roleTable.vue

diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 51a95b4f1..cae215ffd 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -195,5 +195,6 @@ export const fromRoute = {
   project: 'project',
   endpointQuery: 'endpointQuery',
   terminalLog: 'terminalLog',
-  operationLog: 'operationLog'
+  operationLog: 'operationLog',
+  menus: 'menus'
 }
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index c4a2dbd78..e2894448a 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -6,6 +6,8 @@ const cn = {
     alert: '告警',
     asset: '资产',
     config: '设置',
+    administration: '行政管理',
+    configuration: '设置',
     create: '新增',
     edit: '编辑',
     delete: '删除',
@@ -835,7 +837,7 @@ const cn = {
       response: '响应'
     },
     mib: {
-      mib: 'SNMP MIB',
+      mib: 'MIB文件',
       fileName: '文件名称',
       remark: '备注',
       updateUser: '更新用户',
@@ -963,14 +965,14 @@ const cn = {
       createAssetState: '新增资产状态',
       editAssetState: '编辑资产状态'
     },
-    assetMeta: {
+    assetLabel: {
       example: '示例',
-      assetMeta: '资产元数据',
+      assetLabel: '资产标签',
       all: '全部',
       addGroup: '创建分组',
       editGroup: '编辑分组',
-      addMeta: '创建Meta',
-      editMeta: '编辑Meta',
+      addLabel: '创建标签',
+      editLabel: '编辑标签',
       groupName: '名称',
       key: '键名',
       name: '名称',
@@ -979,9 +981,9 @@ const cn = {
       display: '显示',
       type: '类型',
       params: '参数',
-      updateMeta: '编辑Meta',
-      deleteMeta: '删除 Meta',
-      infoMeta: 'Meta 信息',
+      updateLabel: '编辑标签',
+      deleteLabel: '删除标签',
+      infoLabel: '标签信息',
       text: '单行文本',
       multitext: '多行文本',
       textarea: '文本域',
@@ -1004,7 +1006,7 @@ const cn = {
       decimals: '精度',
       moreOptionsError: '选项最多20条',
       onlyOptionError: '至少需要一个选项',
-      metaOptionNull: '请填写选项信息'
+      labelOptionNull: '请填写选项信息'
     },
     exprTemp: {
       exprTemp: 'expression模板',
@@ -1399,216 +1401,10 @@ const cn = {
     }
   },
   buttons: {
-    panel: {
-      view: 'View panel',
-      toAdd: 'Add panel',
-      toEdit: 'Edit panel',
-      delete: 'Delete panel',
-      save: 'Save panel',
-      chart: {
-        toAdd: 'Add chart',
-        import: 'Import chart',
-        export: 'Export chart',
-        toEdit: 'Edit chart',
-        save: 'Save chart',
-        delete: 'Delete chart',
-        duplicate: 'Duplicate chart'
-      }
-    },
-    explore: {
-      view: 'View explore',
-      toAdd: 'Add chart',
-      save: 'Save chart'
-    },
-    asset: {
-      view: 'View asset',
-      toAdd: 'Add asset',
-      toEdit: 'Edit asset',
-      toBatchEdit: 'Batch edit asset',
-      delete: 'Delete asset',
-      save: 'Save asset',
-      import: 'Import asset',
-      export: 'Export asset',
-      connect: 'Connect to asset',
-      endpoint: {
-        view: 'View endpoint',
-        toAdd: 'Add endpoint',
-        toEdit: 'Edit endpoint',
-        delete: 'Delete endpoint',
-        save: 'Save endpoint',
-        import: 'Import endpoint',
-        export: 'Export endpoint'
-      },
-      alerts: {
-        view: 'View alerts',
-        delete: 'Delete alerts',
-        export: 'Export alerts'
-      },
-      chart: {
-        toAdd: 'Add chart',
-        toEdit: 'Edit chart',
-        delete: 'Delete chart',
-        save: 'Save chart',
-        import: 'Import chart',
-        export: 'Export chart',
-        duplicate: 'Duplicate chart',
-        sync: 'Sync chart'
-      },
-      vendor: {
-        toAdd: 'Add vendor',
-        save: 'Save chart'
-      }
-    },
-    project: {
-      view: 'View project',
-      toEdit: 'Edit project',
-      delete: 'Delete project',
-      save: 'Save project',
-      topo: {
-        edit: 'Edit topo',
-        save: 'Save topo'
-      },
-      module: {
-        toEdit: 'Edit module',
-        delete: 'Delete module',
-        save: 'Save module'
-      },
-      endpoint: {
-        toAdd: 'Add endpoint',
-        toEdit: 'Edit endpoint',
-        delete: 'Delete endpoint',
-        save: 'Save endpoint',
-        import: 'Import endpoint',
-        export: 'Export endpoint',
-        alerts: {
-          view: 'View alerts',
-          delete: 'Delete alerts',
-          export: 'Export alerts'
-        },
-        query: {
-          view: 'View query',
-          toAdd: 'Add chart',
-          save: 'Save chart'
-        }
-      }
-    },
-    message: {
-      view: 'View alerts',
-      delete: 'Delete alerts',
-      export: 'Export alerts'
-    },
-    rule: {
-      view: 'View rule',
-      toAdd: 'Add rule',
-      toEdit: 'Edit rule',
-      delete: 'Delete rule',
-      save: 'Save rule',
-      alerts: {
-        view: 'View alerts',
-        delete: 'Delete alerts',
-        export: 'Export alerts'
-      }
-    },
-    account: {
-      view: 'View account',
-      toAdd: 'Add account',
-      toEdit: 'Edit account',
-      delete: 'Delete account',
-      save: 'Save account'
-    },
-    role: {
-      view: 'View role',
-      toAdd: 'Add role',
-      toEdit: 'Edit role',
-      delete: 'Delete role',
-      save: 'Save role'
-    },
-    prom: {
-      view: 'View prom',
-      toAdd: 'Add prom',
-      toEdit: 'Edit prom',
-      delete: 'Delete prom',
-      save: 'Save prom'
-    },
-    dc: {
-      view: 'View data center',
-      toAdd: 'Add data center',
-      toEdit: 'Edit data center',
-      delete: 'Delete data center',
-      save: 'Save data center',
-      trafficSetting: 'Traffic setting',
-      trafficSettingSave: 'Save traffic setting',
-      cabinet: {
-        view: 'View cabinet',
-        toAdd: 'Add cabinet',
-        toEdit: 'Edit cabinet',
-        delete: 'Delete cabinet',
-        save: 'Save cabinet'
-      }
-    },
-    model: {
-      view: 'View model',
-      toAdd: 'Add model',
-      toEdit: 'Edit model',
-      delete: 'Delete model',
-      save: 'Save model',
-      panel: 'View panel',
-      chart: {
-        view: 'View chart',
-        toAdd: 'Add chart',
-        toEdit: 'Edit chart',
-        delete: 'Delete chart',
-        save: 'Save chart',
-        import: 'Import chart',
-        export: 'Export chart',
-        duplicate: 'Duplicate chart',
-        sync: 'Sync chart'
-      }
-    },
-    snmp: {
-      view: 'View mib file',
-      toAdd: 'Add mib file',
-      toEdit: 'Edit mib file',
-      delete: 'Delete mib file',
-      save: 'Save mib file',
-      download: 'Download mib file',
-      browserExport: 'Export mib browser',
-      browserView: 'View mib browser'
-    },
-    system: {
-      basic: 'Basic save',
-      email: 'Email save',
-      terminal: 'Terminal save',
-      ldap: 'LDAP save',
-      notification: {
-        add: 'Add notification',
-        toEdit: 'Edit notification',
-        delete: 'Delete notification',
-        save: 'Save notification'
-      },
-      link: {
-        add: 'Add link',
-        toEdit: 'Edit link',
-        delete: 'Delete link',
-        save: 'Save link'
-      },
-      reset: 'Reset system config'
-    },
-    header: {
-      header: 'Header',
-      link: 'Link',
-      terminal: 'Terminal',
-      terminalUpload: 'Upload in terminal',
-      terminalDownload: 'Download in terminal',
-      add: {
-        view: 'View add button',
-        project: 'Add project',
-        module: 'Add module',
-        endpoint: 'Add endpoint',
-        rule: 'Add rule',
-        asset: 'Add asset'
-      }
-    }
+    view: '查看',
+    add: '新增',
+    edit: '修改',
+    delete: '删除'
   },
   ...zhLocale
 }
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index dd6efb00f..2088f5543 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -12,6 +12,8 @@ const en = {
     alert: 'Alerts', // "告警"
     asset: 'Assets', // '资产'
     config: 'Settings', // '设置'
+    administration: 'Administration',
+    configuration: 'configuration',
     create: 'New', // '新增'
     edit: 'Edit', // '编辑'
     delete: 'Delete', // '删除'
@@ -838,7 +840,7 @@ const en = {
       }
     },
     mib: {
-      mib: 'SNMP MIB',
+      mib: 'MIB file',
       fileName: 'File name',
       remark: 'Remark',
       updateUser: 'Update user',
@@ -966,14 +968,14 @@ const en = {
       createAssetState: 'Create asset state',
       editAssetState: 'Edit asset state'
     },
-    assetMeta: {
+    assetLabel: {
       example: 'Example',
-      assetMeta: 'Asset meta',
+      assetLabel: 'Asset labels',
       all: 'All',
       addGroup: 'Create group',
       editGroup: 'Edit group',
-      addMeta: 'Create meta',
-      editMeta: 'Edit meta',
+      addLabel: 'Create label',
+      editLabel: 'Edit label',
       groupName: 'Name',
       key: 'Key',
       name: 'Name',
@@ -982,9 +984,9 @@ const en = {
       display: 'Display',
       type: 'Type',
       params: 'Params',
-      updateMeta: 'Update Meta',
-      deleteMeta: 'Delete Meta',
-      infoMeta: 'Meta Info',
+      updateLabel: 'Update label',
+      deleteLabel: 'Delete label',
+      infoLabel: 'Label Info',
       text: 'TEXT',
       multitext: 'MULTITEXT',
       textarea: 'TEXTAREA',
@@ -1007,7 +1009,7 @@ const en = {
       decimals: 'Decimals',
       moreOptionsError: 'There are up to 20 options',
       onlyOptionError: 'You need at least one option',
-      metaOptionNull: 'Please input option'
+      labelOptionNull: 'Please input option'
     },
     exprTemp: {
       exprTemp: 'Expression template',
@@ -1283,230 +1285,10 @@ const en = {
     }
   },
   buttons: {
-    panel: {
-      view: 'View panel',
-      toAdd: 'Add panel',
-      toEdit: 'Edit panel',
-      delete: 'Delete panel',
-      save: 'Save panel',
-      chart: {
-        toAdd: 'Add chart',
-        import: 'Import chart',
-        export: 'Export chart',
-        toEdit: 'Edit chart',
-        save: 'Save chart',
-        delete: 'Delete chart',
-        duplicate: 'Duplicate chart'
-      }
-    },
-    explore: {
-      view: 'View explore',
-      toAdd: 'Add chart',
-      save: 'Save chart'
-    },
-    asset: {
-      view: 'View asset',
-      toAdd: 'Add asset',
-      toEdit: 'Edit asset',
-      toBatchEdit: 'Batch edit asset',
-      delete: 'Delete asset',
-      save: 'Save asset',
-      import: 'Import asset',
-      export: 'Export asset',
-      connect: 'Connect to asset',
-      endpoint: {
-        view: 'View endpoint',
-        toAdd: 'Add endpoint',
-        toEdit: 'Edit endpoint',
-        delete: 'Delete endpoint',
-        save: 'Save endpoint',
-        import: 'Import endpoint',
-        export: 'Export endpoint'
-      },
-      alerts: {
-        view: 'View alerts',
-        delete: 'Delete alerts',
-        export: 'Export alerts'
-      },
-      chart: {
-        toAdd: 'Add chart',
-        toEdit: 'Edit chart',
-        delete: 'Delete chart',
-        save: 'Save chart',
-        import: 'Import chart',
-        export: 'Export chart',
-        duplicate: 'Duplicate chart',
-        sync: 'Sync chart'
-      },
-      vendor: {
-        toAdd: 'Add vendor',
-        save: 'Save chart'
-      }
-    },
-    project: {
-      view: 'View project',
-      toEdit: 'Edit project',
-      delete: 'Delete project',
-      save: 'Save project',
-      topo: {
-        edit: 'Edit topo',
-        save: 'Save topo'
-      },
-      module: {
-        toEdit: 'Edit module',
-        delete: 'Delete module',
-        save: 'Save module'
-      },
-      endpoint: {
-        toAdd: 'Add endpoint',
-        toEdit: 'Edit endpoint',
-        delete: 'Delete endpoint',
-        save: 'Save endpoint',
-        import: 'Import endpoint',
-        export: 'Export endpoint',
-        alerts: {
-          view: 'View alerts',
-          delete: 'Delete alerts',
-          export: 'Export alerts'
-        },
-        query: {
-          view: 'View query',
-          toAdd: 'Add chart',
-          save: 'Save chart'
-        }
-      }
-    },
-    message: {
-      view: 'View alerts',
-      delete: 'Delete alerts',
-      export: 'Export alerts'
-    },
-    rule: {
-      view: 'View rule',
-      toAdd: 'Add rule',
-      toEdit: 'Edit rule',
-      delete: 'Delete rule',
-      save: 'Save rule',
-      alerts: {
-        view: 'View alerts',
-        delete: 'Delete alerts',
-        export: 'Export alerts'
-      }
-    },
-    account: {
-      view: 'View account',
-      toAdd: 'Add account',
-      toEdit: 'Edit account',
-      delete: 'Delete account',
-      save: 'Save account'
-    },
-    role: {
-      view: 'View role',
-      toAdd: 'Add role',
-      toEdit: 'Edit role',
-      delete: 'Delete role',
-      save: 'Save role'
-    },
-    prom: {
-      view: 'View prom',
-      toAdd: 'Add prom',
-      toEdit: 'Edit prom',
-      delete: 'Delete prom',
-      save: 'Save prom'
-    },
-    dc: {
-      view: 'View data center',
-      toAdd: 'Add data center',
-      toEdit: 'Edit data center',
-      delete: 'Delete data center',
-      save: 'Save data center',
-      trafficSetting: 'Traffic setting',
-      trafficSettingSave: 'Save traffic setting',
-      cabinet: {
-        view: 'View cabinet',
-        toAdd: 'Add cabinet',
-        toEdit: 'Edit cabinet',
-        delete: 'Delete cabinet',
-        save: 'Save cabinet'
-      }
-    },
-    model: {
-      view: 'View model',
-      toAdd: 'Add model',
-      toEdit: 'Edit model',
-      delete: 'Delete model',
-      save: 'Save model',
-      panel: 'View panel',
-      chart: {
-        view: 'View chart',
-        toAdd: 'Add chart',
-        toEdit: 'Edit chart',
-        delete: 'Delete chart',
-        save: 'Save chart',
-        import: 'Import chart',
-        export: 'Export chart',
-        duplicate: 'Duplicate chart',
-        sync: 'Sync chart'
-      }
-    },
-    snmp: {
-      view: 'View mib file',
-      toAdd: 'Add mib file',
-      toEdit: 'Edit mib file',
-      delete: 'Delete mib file',
-      save: 'Save mib file',
-      download: 'Download mib file',
-      browserExport: 'Export mib browser',
-      browserView: 'View mib browser'
-    },
-    system: {
-      basic: 'Basic save',
-      email: 'Email save',
-      terminal: 'Terminal save',
-      ldap: 'LDAP save',
-      notification: {
-        add: 'Add notification',
-        toEdit: 'Edit notification',
-        delete: 'Delete notification',
-        save: 'Save notification'
-      },
-      link: {
-        add: 'Add link',
-        toEdit: 'Edit link',
-        delete: 'Delete link',
-        save: 'Save link'
-      },
-      reset: 'Reset system config'
-    },
-    header: {
-      header: 'Header',
-      link: 'Link',
-      terminal: 'Terminal',
-      terminalUpload: 'Upload in terminal',
-      terminalDownload: 'Download in terminal',
-      add: {
-        view: 'View add button',
-        project: 'Add project',
-        module: 'Add module',
-        endpoint: 'Add endpoint',
-        rule: 'Add rule',
-        asset: 'Add asset'
-      }
-    },
-    assetType: {
-      view: 'View',
-      toAdd: 'Add asset type',
-      toEdit: 'Edit asset type',
-      delete: 'Delete asset type',
-      save: 'Save asset type'
-    },
-    assetState: {
-      view: 'View',
-      toAdd: 'Add asset state',
-      toEdit: 'Edit asset state',
-      delete: 'Delete asset state',
-      save: 'Save asset state'
-    }
+    view: 'View',
+    add: 'Add',
+    edit: 'Edit',
+    delete: 'Delete'
   },
   ...enLocale
 }
diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js
index c054c6db3..84ee1122d 100644
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -37,14 +37,14 @@ export default {
     asce: tableSet.asce,
     desc: tableSet.desc,
     strTodate: tableSet.strTodate,
-    tableOperation ([command, row, url]) {
+    tableOperation ([command, row]) {
       switch (command) {
         case 'edit': {
           this.edit(row)
           break
         }
         case 'delete': {
-          this.del(row, url)
+          this.del(row)
           break
         }
         default:
@@ -54,6 +54,9 @@ export default {
     isBuildIn (row) {
       return (row.buildIn && row.buildIn == 1) || (row.builtIn && row.builtIn == 1)
     },
+    selectionChange (objs) {
+      this.batchDeleteObjs = objs
+    },
     getTableData (callBack) {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -84,7 +87,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete(this.url).then(response => {
+        this.$delete(this.url + '?ids=' + row.id).then(response => {
           if (response.code === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index 194133484..54bddd16d 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -16,7 +16,6 @@ export default {
   },
   data () {
     return {
-      batchDeleteObjs: [],
       operationWidth: '165' // 操作列宽
     }
   },
@@ -35,6 +34,9 @@ export default {
           break
       }
     },
+    selectionChange (objs) {
+      this.$emit('selectionChange', objs)
+    },
     isBuiltIn (row) {
       return (row.buildIn && row.buildIn == 1) || (row.builtIn && row.builtIn == 1)
     },
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
index 1125737eb..da7510dcf 100644
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -85,7 +85,9 @@ export default {
     'tree-select': Treeselect
   },
   props: {
-    menu: Object
+    menu: {
+      type: Object
+    }
   },
   computed: {
     isCurrentUser () {
diff --git a/nezha-fronted/src/components/common/rightBox/userBox.vue b/nezha-fronted/src/components/common/rightBox/userBox.vue
index 641cdf2fd..3dc609810 100644
--- a/nezha-fronted/src/components/common/rightBox/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/userBox.vue
@@ -1,6 +1,3 @@
-<style lang="scss">
-$--input-focus-border: red;
-</style>
 <template>
   <div v-clickoutside="{obj:editUser,func:clickOutside}" class="right-box right-box-account">
     <!-- begin--顶部按钮-->
@@ -96,8 +93,7 @@ $--input-focus-border: red;
 export default {
   name: 'accountBox',
   props: {
-    user: Object,
-    roles: Array
+    user: Object
   },
   computed: {
     isCurrentUser () {
@@ -159,7 +155,8 @@ export default {
       editUser: {},
       scripts: [],
       selectableScripts: [],
-      pinChange: ''
+      pinChange: '',
+      roles: []
     }
   },
   methods: {
@@ -241,14 +238,6 @@ export default {
         this.scripts = response.data.list
         this.getSelectableScripts()
       })
-      /* this.scripts = [
-          {id: 1, name: "DOLBY"},
-          {id: 2, name: "IMAX"},
-          {id: 3, name: "CGS"},
-          {id: 4, name: "LUXE"},
-          {id: 5, name: "DST:X"},
-        ];
-        this.getSelectableScripts(); */
     },
 
     getSelectableScripts () {
@@ -283,13 +272,23 @@ export default {
         this.editUser.notifications.push({ scriptId: scripts.id, account: '' })
       }
     },
-
+    getRoles () {
+      this.roles = []
+      this.$get('sys/role?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.roles = response.data.list
+        } else {
+          this.$message.error('load roles faild')
+        }
+      })
+    },
     removeNotification (index) {
       this.editUser.notifications.splice(index, 1)
     }
   },
   mounted () {
     this.getScripts()
+    this.getRoles()
   },
   watch: {
     // 将prop里的user转为组件内部对象
diff --git a/nezha-fronted/src/components/common/table/settings/menuTable.vue b/nezha-fronted/src/components/common/table/settings/menuTable.vue
new file mode 100644
index 000000000..3a5ab98ad
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/settings/menuTable.vue
@@ -0,0 +1,121 @@
+<template>
+  <el-table
+    id="menuTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    border
+    row-key="id"
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <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
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'menuTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 200
+        }, {
+          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
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/table/settings/roleTable.vue b/nezha-fronted/src/components/common/table/settings/roleTable.vue
new file mode 100644
index 000000000..775aa1cab
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/settings/roleTable.vue
@@ -0,0 +1,96 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <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
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'roleTable',
+  mixins: [table],
+  data () {
+    return {
+      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.description'),
+          prop: 'remark',
+          show: true
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/table/settings/userTable.vue b/nezha-fronted/src/components/common/table/settings/userTable.vue
index f8c01e4ef..7098b396f 100644
--- a/nezha-fronted/src/components/common/table/settings/userTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/userTable.vue
@@ -7,7 +7,7 @@
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
-    @selection-change="(selection) => { batchDeleteObjs = selection }"
+    @selection-change="selectionChange"
   >
     <el-table-column
       :resizable="false"
@@ -26,7 +26,6 @@
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
       :width="`${item.width}`"
-      class="data-column"
     >
       <template slot="header">
         <span>{{item.label}}</span>
@@ -70,7 +69,7 @@
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
diff --git a/nezha-fronted/src/components/layout/home.vue b/nezha-fronted/src/components/layout/home.vue
index 6f1d787bf..aa4574fbf 100644
--- a/nezha-fronted/src/components/layout/home.vue
+++ b/nezha-fronted/src/components/layout/home.vue
@@ -5,8 +5,6 @@
       <Header></Header>
       <container v-if="containerShow" ref="container"></container>
     </div>
-    <!--菜单列表-->
-    <menus v-if="isMenuPage"></menus>
     <!--web-ssh-->
     <web-ssh ref="webSsh"></web-ssh>
     <!--table悬浮提示容器-->
@@ -18,13 +16,11 @@
 import Header from './header'
 import webSSH from '../cli/webSSH'
 import leftMenu from './leftMenu'
-import menus from '../page/config/menus'
 import container from './container'
 export default {
   name: 'home',
   components: {
     Header,
-    menus,
     leftMenu,
     container,
     'web-ssh': webSSH
@@ -34,11 +30,6 @@ export default {
       containerShow: true
     }
   },
-  computed: {
-    isMenuPage: function () {
-      return this.$route.path === '/menu'
-    }
-  },
   methods: {
     refresh () {
       this.containerShow = false
diff --git a/nezha-fronted/src/components/layout/leftMenu.vue b/nezha-fronted/src/components/layout/leftMenu.vue
index 0a9f35de4..2ec0b5fe7 100644
--- a/nezha-fronted/src/components/layout/leftMenu.vue
+++ b/nezha-fronted/src/components/layout/leftMenu.vue
@@ -149,7 +149,7 @@ export default {
     .el-submenu.is-active .el-submenu__title, .el-submenu.is-active .el-submenu__title>i {
       color: white !important;
     }
-    .el-submenu.is-opened .el-menu-item:not(.is-active) {
+    .el-submenu.is-opened .el-menu-item:not(.is-active), .el-submenu.is-opened .el-submenu__title {
       background-color: #182534 !important;
     }
     .el-menu-item.is-active {
diff --git a/nezha-fronted/src/components/page/config/menus.vue b/nezha-fronted/src/components/page/config/menus.vue
index 6842b7fb0..ce220c513 100644
--- a/nezha-fronted/src/components/page/config/menus.vue
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -1,144 +1,61 @@
-<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 :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input>
-          </div>
-          <button :title="$t('overall.createMenus')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"
-                  id="menus-add" type="button">
-            <i class="nz-icon-create-square nz-icon"></i>
-          </button>
-          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @before="delFlag=true" @after="getTableData" api="sys/menu" id="menus-list-batch-delete"></delete-button>
-        </div>
-        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
-        <div class="pagination-top pagination-top-hide display-none"></div>
-      </div>
-      <!-- 自定义table列 -->
-      <transition name="el-zoom-in-top">
-        <element-set
-          id="menu-list"
-          :custom-table-title.sync="tools.customTableTitle"
-          :original-table-title="tableTitle"
-          @close="tools.showCustomTableTitle = false"
-          ref="customTableTitle"
-          v-if="tools.showCustomTableTitle"
-        ></element-set>
-      </transition>
-      <el-table
-        id="menu-list-table"
-        :data="tableData"
-        :height="mainTableHeight"
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-        @sort-change="tableDataSort"
-        border
-        class="nz-table"
-        ref="menusTable"
-        row-key="id"
-        style="width: 100%;"
-        v-loading="tools.loading"
-      >
-        <el-table-column
-          :resizable="false"
-          align="center"
-          type="selection"
-          width="40">
-        </el-table-column>
-        <el-table-column
-          :fixed="item.fixed"
-          :key="`col-${index}`"
-          :label="item.label"
-          :prop="item.prop"
-          :resizable="true"
-          :sort-orders="['ascending', 'descending']"
-          v-for="(item, index) in tools.customTableTitle"
-          v-if="item.show"
-        >
-          <template slot="header">
-          <span :title="item.label" class="tag-header" v-if="item.type == 'tag'"><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 :column="item" slot-scope="scope">
-            <div class="content-right-options" v-if="item.prop == 'option'">
-              <span :id="'menus-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
-              &nbsp;
-              <span :id="'menus-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></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 fixed="right" width="28">
-          <template slot="header" :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-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn " id="menu-list-totop"><i class="nz-icon nz-icon-top"></i></button>
-    </div>
+  <div>
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.menus">
+      <template v-slot:top-tool-right>
+        <button id="menus-add" class="top-tool-btn margin-l-20"
+                type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+        <delete-button id="menus-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot="slotProps">
+        <menu-table
+          ref="dataTable"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"></menu-table>
+      </template>
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
     <transition name="right-box">
-      <menu-box :menu="menu" @close="closeRightBox" v-if="rightBox.show"></menu-box>
+      <menu-box v-if="rightBox.show" :menu="object" @close="closeRightBox"></menu-box>
     </transition>
   </div>
 </template>
 <script>
-import deleteButton from '../../common/deleteButton'
-import menuBox from '../../common/rightBox/menuBox'
-import bus from '../../../libs/bus'
+import nzDataList from '@/components/common/table/nzDataList'
+import deleteButton from '@/components/common/deleteButton'
+import menuBox from '@/components/common/rightBox/menuBox'
+import menuTable from '@/components/common/table/settings/menuTable'
+import dataListMixin from '@/components/common/mixin/dataList'
 
 export default {
   name: 'menus',
   components: {
-    'menu-box': menuBox,
-    'delete-button': deleteButton
+    nzDataList,
+    menuBox,
+    menuTable,
+    deleteButton
   },
+  mixins: [dataListMixin],
   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: {},
-
+      url: 'sys/menu',
       tableId: 'menusTable', // 需要分页的table的id，用于记录每页数量
-      blankMenu: { // 空白对象
+      blankObject: { // 空白对象
         name: '',
         code: '',
         i18n: '',
@@ -148,11 +65,6 @@ export default {
         orderNum: 1,
         perms: ''
       },
-      pageObj: { // 分页对象
-        pageNo: 1,
-        pageSize: 50,
-        total: 0
-      },
       tableTitle: [ // 原table列
         {
           label: 'ID',
@@ -195,7 +107,6 @@ export default {
           fixed: 'right'
         }
       ],
-      tableData: [],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [{
@@ -205,146 +116,8 @@ export default {
           label: 'id',
           disabled: false
         }]
-      },
-      searchLabel: {}, // 搜索参数
-      scrollbarWrap: null,
-      delFlag: false
-    }
-  },
-  methods: {
-    closeRightBox (refresh) {
-      this.rightBox.show = false
-      if (refresh) {
-        this.delFlag = true
-        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.delFlag = true
-            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
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.menusTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    },
-    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 (const 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()
-    }
-  },
-  watch: {
-    tableData: {
-      deep: true,
-      handler (n) {
-        if (n.length === 0 && this.pageObj.pageNo > 1) {
-          this.pageNo(this.pageObj.pageNo - 1)
-        }
-
-        if (!this.delFlag) { // 不是删除时回到顶部
-          this.$refs.menusTable.bodyWrapper.scrollTop = 0
-        } else {
-          this.delFlag = false
-        }
       }
     }
-  },
-  created () {
-    // 是否存在分页缓存
-    const 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.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
-    this.getTableData()
-  },
-  beforeDestroy () {
-    if (this.scrollbarWrap) {
-      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
-    };
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
index 9db864629..c10bebe98 100644
--- a/nezha-fronted/src/components/page/config/roles.vue
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -1,13 +1,12 @@
 <template>
-  <div style="height: 100%">
+  <div>
     <nz-data-list
       ref="dataList"
-      :components="['searchInput', 'elementSet']"
+      :api="url"
+      :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.role"
-      :search-msg="searchMsg"
-      :table-id="tableId"
-      :table-title="tableTitle">
+      :search-msg="searchMsg">
       <template v-slot:top-tool-right>
         <button id="roles-add" v-has="'role_toAdd'" :title="$t('overall.createRole')" class="top-tool-btn margin-l-20"
                 type="button" @click="add">
@@ -16,77 +15,19 @@
         <delete-button id="role-list-batch-delete" v-has="'role_delete'" :delete-objs="batchDeleteObjs" api="sys/role" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default="slotProps">
-        <el-table
-          id="role-list-table"
+        <role-table
           ref="dataTable"
-          v-loading="tools.loading"
-          :data="tableData"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
-          border
-          @header-dragend="dragend"
-          @sort-change="tableDataSort"
-          @selection-change="(selection)=>{batchDeleteObjs=selection}"
-        >
-          <el-table-column
-            :resizable="false"
-            align="center"
-            type="selection"
-            width="55">
-          </el-table-column>
-          <el-table-column
-            v-for="(item, index) in tools.customTableTitle"
-            v-if="item.show"
-            :key="`col-${index}`"
-            :fixed="item.fixed"
-            :label="item.label"
-            :prop="item.prop"
-            :resizable="true"
-            :sort-orders="['ascending', 'descending']"
-            :width="`${item.width}`"
-            class="data-column"
-          >
-            <template slot="header">
-              <span>
-                <span>{{item.label}}</span>
-                <div class="col-resize-area"></div>
-              </span>
-            </template>
-            <template slot-scope="scope" :column="item">
-              <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
-            :resizable="false"
-            fixed="right"
-            :width="operationWidth">
-            <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
-            <div slot-scope="scope" class="table-operation-items">
-              <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-              <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-                <div class="table-operation-item table-operation-item--more">
-                  <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
-                </div>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item :command="['edit', scope.row]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-                  <el-dropdown-item :command="['delete', scope.row, `sys/role?ids=${scope.row.id}`]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-          </el-table-column>
-        </el-table>
-        <!-- 回到table顶部的按钮 -->
-        <button v-show="tools.showTopBtn && slotProps.mainResizeShow" id="role-list-totop" :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" class="to-top" @click="toTop(scrollbarWrap)"><i class="nz-icon nz-icon-top"></i></button>
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></role-table>
       </template>
       <!-- 分页组件 -->
       <template v-slot:pagination>
@@ -102,38 +43,25 @@
 import roleBox from '@/components/common/rightBox/roleBox'
 import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
-import tableMixin from '@/components/common/mixin/table'
+import dataListMixin from '@/components/common/mixin/dataList'
+import roleTable from '@/components/common/table/settings/roleTable'
 
 export default {
   name: 'roles',
   components: {
+    roleTable,
     roleBox,
     deleteButton,
     nzDataList
   },
-  mixins: [tableMixin],
+  mixins: [dataListMixin],
   data () {
     return {
+      url: 'sys/role',
       tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
       blankObject: { // 空白对象
         name: ''
       },
-      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.description'),
-          prop: 'remark',
-          show: true
-        }
-      ],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [{
@@ -145,31 +73,6 @@ export default {
         }]
       }
     }
-  },
-  methods: {
-    getTableData () {
-      if (!this.hasButton('role_view')) {
-        this.$message.error(this.$t('tip.noAccess'))
-        return
-      }
-      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
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.rolesTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    }
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/config/user.vue b/nezha-fronted/src/components/page/config/user.vue
index 89c165b41..bec16437c 100644
--- a/nezha-fronted/src/components/page/config/user.vue
+++ b/nezha-fronted/src/components/page/config/user.vue
@@ -26,6 +26,7 @@
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"
+          @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></user-table>
       </template>
       <template v-slot:pagination>
@@ -33,7 +34,7 @@
       </template>
     </nz-data-list>
     <transition name="right-box">
-      <user-box v-if="rightBox.show" :roles="roles" :user="object" @close="closeRightBox"></user-box>
+      <user-box v-if="rightBox.show" :user="object" @close="closeRightBox"></user-box>
     </transition>
   </div>
 </template>
@@ -80,8 +81,7 @@ export default {
           label: 'username',
           disabled: false
         }]
-      },
-      roles: []
+      }
     }
   },
   methods: {
@@ -98,16 +98,6 @@ export default {
         }
         this.getTableData()
       })
-    },
-    getRoles () {
-      this.roles = []
-      this.$get('sys/role?pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.roles = response.data.list
-        } else {
-          this.$message.error('load roles faild')
-        }
-      })
     }
   },
   computed: {
@@ -116,9 +106,6 @@ export default {
         return localStorage.getItem('nz-username') === username
       }
     }
-  },
-  mounted () {
-    this.getRoles()
   }
 }
 </script>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 3c7325f5e..7f755dfd2 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -42,7 +42,7 @@ export default new Router({
           component: resolve => require(['../components/page/asset/asset.vue'], resolve)
         },
         {
-          path: '/account',
+          path: '/user',
           component: resolve => require(['../components/page/config/user.vue'], resolve)
         },
         {
@@ -54,7 +54,7 @@ export default new Router({
           component: resolve => require(['../components/page/config/roles.vue'], resolve)
         },
         {
-          path: '/promServer',
+          path: '/agent',
           component: resolve => require(['../components/page/config/promServer.vue'], resolve)
         },
         {
@@ -66,7 +66,7 @@ export default new Router({
           component: resolve => require(['../components/page/config/assetState.vue'], resolve)
         },
         {
-          path: '/assetMeta',
+          path: '/assetLabel',
           component: resolve => require(['../components/page/config/assetMeta.vue'], resolve)
         },
         {