diff --git a/package.json b/package.json
index 64a1dd8..6868d9f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "clipboard": "^2.0.6",
     "element-ui": "^2.14.0",
     "file-saver": "^2.0.5",
+    "fuse.js": "^6.4.3",
     "js-cookie": "^2.2.1",
     "jszip": "^3.5.0",
     "lodash": "^4.17.20",
@@ -22,6 +23,7 @@
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
     "register-service-worker": "^1.7.1",
+    "screenfull": "^5.0.2",
     "tinymce": "^5.5.1",
     "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
@@ -30,8 +32,6 @@
     "vue-router": "^3.4.8",
     "vue-svgicon": "^3.2.9",
     "vuex": "^3.5.1",
-    "screenfull": "^5.0.2",
-    "fuse.js": "^6.4.3",
     "vuex-module-decorators": "^1.0.1",
     "xlsx": "^0.16.8"
   },
@@ -43,6 +43,7 @@
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.6",
     "@types/nprogress": "^0.2.0",
+    "@types/tinymce": "^4.6.0",
     "@types/webpack-env": "^1.15.3",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
@@ -71,7 +72,6 @@
     "sass": "^1.28.0",
     "sass-loader": "^10.0.4",
     "style-resources-loader": "^1.3.3",
-    "@types/tinymce": "^4.6.0",
     "ts-jest": "^26.4.3",
     "typescript": "^4.0.5",
     "vue-cli-plugin-element": "^1.0.1",
diff --git a/src/lang/en.ts b/src/lang/en.ts
index ec5583f..94e1349 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1,6 +1,7 @@
 export default {
   route: {
     dashboard: 'Dashboard',
+    system: 'System',
     documentation: 'Documentation',
     guide: 'Guide',
     permission: 'Permission',
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index 178a051..99a67fb 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -2,6 +2,7 @@ export default {
   route: {
     dashboard: '首页',
     documentation: '文档',
+    system: '系统',
     guide: '引导页',
     permission: '权限测试页',
     rolePermission: '角色权限',
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 7be0eb4..ec6cbc7 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -16,6 +16,9 @@
             v-if="theOnlyOneChild.meta.icon"
             :name="theOnlyOneChild.meta.icon"
           />
+          <i
+            v-if="item.meta && item.meta.elicon"
+            :class="item.meta.elicon" />
           <span
             v-if="theOnlyOneChild.meta.title"
             slot="title"
@@ -33,6 +36,9 @@
           v-if="item.meta && item.meta.icon"
           :name="item.meta.icon"
         />
+        <i
+          v-if="item.meta && item.meta.elicon"
+          :class="item.meta.elicon" />
         <span
           v-if="item.meta && item.meta.title"
           slot="title"
diff --git a/src/router/index.ts b/src/router/index.ts
index aea3d9d..52ec450 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,6 +6,7 @@ import Layout from '@/layout/index.vue'
 
 /* Router modules */
 import tableRouter from './modules/table'
+import systemRoutes from '@/router/modules/system'
 
 Vue.use(VueRouter)
 
@@ -112,16 +113,7 @@ export const constantRoutes: RouteConfig[] = [
  * the routes that need to be dynamically loaded based on user roles
 */
 export const asyncRoutes: RouteConfig[] = [
-  {
-    path: '/system',
-    component: Layout,
-    redirect: '/system/list',
-    meta: {
-      title: '',
-      icon: 'lock',
-      alwaysShow: true
-    }
-  },
+  systemRoutes,
   {
     path: '/permission',
     component: Layout,
@@ -162,7 +154,6 @@ export const asyncRoutes: RouteConfig[] = [
     ]
   },
 
-  /** when your routing map is too long, you can split it into small modules **/
   tableRouter,
   {
     path: '/example',
@@ -191,7 +182,7 @@ export const asyncRoutes: RouteConfig[] = [
           noCache: true,
           activeMenu: '/example/list',
           hidden: true
-        }
+        },
       },
       {
         path: 'list',
@@ -201,6 +192,15 @@ export const asyncRoutes: RouteConfig[] = [
           title: 'articleList',
           icon: 'list'
         }
+      },
+      {
+        path: 'form',
+        component: () => import(/* webpackChunkName: "permission-role" */ '@/views/form/index.vue'),
+        name: 'Form',
+        meta: {
+          title: 'form',
+          roles: ['admin']
+        }
       }
     ]
   },
@@ -264,38 +264,6 @@ export const asyncRoutes: RouteConfig[] = [
       }
     ]
   },
-  {
-    path: '/theme',
-    component: Layout,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'index',
-        component: () => import(/* webpackChunkName: "theme" */ '@/views/theme/index.vue'),
-        name: 'Theme',
-        meta: {
-          title: 'theme',
-          icon: 'theme'
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/i18n',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import(/* webpackChunkName: "i18n-demo" */ '@/views/i18n-demo/index.vue'),
-        name: 'I18n',
-        meta: {
-          title: 'i18n',
-          icon: 'international'
-        }
-      }
-    ]
-  },
   {
     path: '*',
     redirect: '/404',
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
new file mode 100644
index 0000000..7be741d
--- /dev/null
+++ b/src/router/modules/system.ts
@@ -0,0 +1,45 @@
+import { RouteConfig } from 'vue-router'
+import Layout from '@/layout/index.vue'
+
+const systemRoutes: RouteConfig = {
+  path: '/system',
+  component: Layout,
+  redirect: '/system/list',
+  meta: {
+    title: 'system',
+    icon: 'component',
+    alwaysShow: true
+  },
+  children: [
+    {
+      path: 'role',
+      component: () => import('@/views/system/role.vue'),
+      name: 'RolePermission',
+      meta: {
+        title: 'rolePermission',
+        permissions: ['role:read'],
+        elicon: 'el-icon-arrow-right'
+      }
+    },
+    {
+      path: 'i18n',
+      component: () => import(/* webpackChunkName: "i18n-demo" */ '@/views/i18n-demo/index.vue'),
+      name: 'I18n',
+      meta: {
+        title: 'i18n',
+        elicon: 'el-icon-arrow-right'
+      }
+    },
+    {
+      path: 'theme',
+      component: () => import(/* webpackChunkName: "theme" */ '@/views/theme/index.vue'),
+      name: 'Theme',
+      meta: {
+        title: 'theme',
+        elicon: 'el-icon-arrow-right'
+      }
+    }
+  ]
+}
+
+export default systemRoutes
diff --git a/src/views/system/role.vue b/src/views/system/role.vue
new file mode 100644
index 0000000..9fb7060
--- /dev/null
+++ b/src/views/system/role.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <el-button
+      type="primary"
+      @click="handleCreateRole"
+    >
+      {{ $t('permission.createRole') }}
+    </el-button>
+
+    <el-table
+      :data="rolesList"
+      style="width: 100%;margin-top:30px;"
+      border
+    >
+      <el-table-column
+        align="center"
+        label="角色key"
+      >
+        <template slot-scope="{row}">
+          {{ row.key }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="角色名"
+      >
+        <template slot-scope="{row}">
+          {{ row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column
+          align="center"
+          label="权限"
+      >
+        <template slot-scope="{row}">
+          {{ row.permissions.join(',') }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="header-center"
+        label="备注"
+      >
+        <template slot-scope="{row}">
+          {{ row.comment }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="操作"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="small"
+            @click="handleEdit(scope)"
+          >
+            {{ $t('permission.editPermission') }}
+          </el-button>
+          <el-button
+            type="danger"
+            size="small"
+            @click="handleDelete(scope)"
+          >
+            {{ $t('permission.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType==='edit'?'Edit Role':'New Role'"
+    >
+      <el-form
+        :model="role"
+        label-width="80px"
+        label-position="left"
+      >
+        <el-form-item label="角色key1">
+          <el-input
+              :readonly="dialogType==='edit'"
+              v-model="role.key"
+              placeholder="角色key"
+          />
+        </el-form-item>
+        <el-form-item label="角色名">
+          <el-input
+            v-model="role.name"
+            placeholder="角色名"
+          />
+        </el-form-item>
+        <el-form-item label="权限">
+          <el-input
+              v-model="role.pstr"
+              placeholder="权限"
+          />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-model="role.comment"
+            :autosize="{minRows: 2, maxRows: 4}"
+            type="textarea"
+            placeholder="备注"
+          />
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button
+          type="danger"
+          @click="dialogVisible=false"
+        >
+          {{ $t('permission.cancel') }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="confirmRole"
+        >
+          {{ $t('permission.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import path from 'path'
+import { cloneDeep } from 'lodash'
+import { Component, Vue } from 'vue-property-decorator'
+import { RouteConfig } from 'vue-router'
+import { getRoles, saveRole, deleteRole  } from '@/api/roles'
+interface IRole {
+  key: string
+  name: string
+  comment: string
+  permissions: string[],
+  pstr: string
+}
+
+
+const defaultRole: IRole = {
+  key: '',
+  name: '',
+  comment: '',
+  permissions: [],
+  pstr: ''
+}
+
+@Component({
+  name: 'RoleSystem',
+
+})
+export default class extends Vue {
+  private role = Object.assign({}, defaultRole)
+  private rolesList: IRole[] = []
+  private dialogVisible = false
+  private dialogType = 'new'
+  private checkStrictly = false
+  private defaultProps = {
+    children: 'children',
+    label: 'title'
+  }
+
+
+
+  created() {
+    this.getRoles()
+  }
+
+
+
+  private async getRoles() {
+    const { data } = await getRoles({ /* Your params here */ })
+    this.rolesList = data
+  }
+
+
+  private handleCreateRole() {
+    this.role = Object.assign({}, defaultRole)
+
+    this.dialogType = 'new'
+    this.dialogVisible = true
+  }
+
+  private handleEdit(scope: any) {
+    this.dialogType = 'edit'
+    this.dialogVisible = true
+    this.checkStrictly = true
+    this.role = cloneDeep(scope.row)
+    this.role.pstr = this.role.permissions.join(',')
+  }
+
+  private handleDelete(scope: any) {
+    const { $index, row } = scope
+    this.$confirm('Confirm to remove the role?', 'Warning', {
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      type: 'warning'
+    })
+      .then(async() => {
+        await deleteRole(row.key)
+        this.rolesList.splice($index, 1)
+        this.$message({
+          type: 'success',
+          message: 'Deleted!'
+        })
+      })
+      .catch(err => { console.error(err) })
+  }
+
+  private async confirmRole() {
+    const isEdit = this.dialogType === 'edit'
+    this.role.permissions = this.role.pstr.split(',')
+    const { data } = await saveRole(this.role)
+
+
+    if (isEdit) {
+      for (let index = 0; index < this.rolesList.length; index++) {
+        if (this.rolesList[index].key === this.role.key) {
+          this.rolesList.splice(index, 1, Object.assign({}, this.role))
+          break
+        }
+      }
+    } else {
+      this.rolesList.push(this.role)
+    }
+
+    const { permissions, key, name } = this.role
+    this.dialogVisible = false
+    this.$notify({
+      title: 'Success',
+      dangerouslyUseHTMLString: true,
+      message: `
+          <div>Role Key: ${key}</div>
+          <div>Role Name: ${name}</div>
+          <div>Description: ${permissions}</div>
+        `,
+      type: 'success'
+    })
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+</style>