diff --git a/api/models/acl.py b/api/models/acl.py
index b6e43e0..ec374b2 100644
--- a/api/models/acl.py
+++ b/api/models/acl.py
@@ -74,7 +74,7 @@ class UserQuery(BaseQuery):
 
 class User(CRUDModel, SoftDeleteMixin):
     __tablename__ = 'users'
-    __bind_key__ = "user"
+    # __bind_key__ = "user"
     query_class = UserQuery
 
     uid = db.Column(db.Integer, primary_key=True, autoincrement=True)
diff --git a/api/views/acl/user.py b/api/views/acl/user.py
index e564535..82b6f17 100644
--- a/api/views/acl/user.py
+++ b/api/views/acl/user.py
@@ -33,7 +33,6 @@ class UserView(APIView):
         page_size = get_page_size(request.values.get('page_size'))
         q = request.values.get("q")
         numfound, users = UserCRUD.search(q, page, page_size)
-
         id2parents = RoleRelationCRUD.get_parents(uids=[i.uid for i in users])
 
         users = [i.to_dict() for i in users]
diff --git a/ui/package.json b/ui/package.json
index 43220ed..0f71589 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,10 +13,14 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.2",
+    "@handsontable-pro/vue": "^3.1.1",
+    "@handsontable/vue": "^4.1.1",
     "ant-design-vue": "^1.4.2",
     "axios": "^0.19.0",
     "core-js": "^3.1.2",
     "enquire.js": "^2.1.6",
+    "handsontable": "^7.2.2",
+    "handsontable-pro": "^6.2.3",
     "js-cookie": "^2.2.0",
     "json2csv": "^4.5.2",
     "lodash.get": "^4.4.2",
@@ -37,10 +41,7 @@
     "vuex": "^3.1.1",
     "wangeditor": "^3.1.1",
     "xlsx": "latest",
-    "@handsontable-pro/vue": "^3.1.1",
-    "@handsontable/vue": "^4.1.1",
-    "handsontable": "^7.2.2",
-    "handsontable-pro": "^6.2.3"
+    "yarn": "^1.19.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",
diff --git a/ui/src/api/acl/app.js b/ui/src/api/acl/app.js
new file mode 100644
index 0000000..c134f36
--- /dev/null
+++ b/ui/src/api/acl/app.js
@@ -0,0 +1,34 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function searchRole (params) {
+  return axios({
+    url: urlPrefix + `/roles`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addRole (params) {
+  return axios({
+    url: urlPrefix + '/roles',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateRoleById (id, params) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteRoleById (id) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/api/acl/permission.js b/ui/src/api/acl/permission.js
new file mode 100644
index 0000000..3d78a82
--- /dev/null
+++ b/ui/src/api/acl/permission.js
@@ -0,0 +1,56 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function getResourcePerms (resourceID) {
+  return axios({
+    url: urlPrefix + `/resources/${resourceID}/permissions`,
+    method: 'GET'
+  })
+}
+
+export function getResourceTypePerms (typeID) {
+  return axios({
+    url: urlPrefix + `/resource_types/${typeID}/perms`,
+    method: 'GET'
+  })
+}
+
+export function getResourceGroupPerms (resourceGroupID) {
+  return axios({
+    url: urlPrefix + `/resource_groups/${resourceGroupID}/permissions`,
+    method: 'GET'
+  })
+}
+
+export function setRoleResourcePerm (rid, resourceID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resources/${resourceID}/grant`,
+    method: 'POST',
+    data: params
+  })
+}
+
+export function setRoleResourceGroupPerm (rid, resourceGroupID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resource_groups/${resourceGroupID}/grant`,
+    method: 'POST',
+    data: params
+  })
+}
+
+export function deleteRoleResourcePerm (rid, resourceID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resources/${resourceID}/revoke`,
+    method: 'POST',
+    data: params
+  })
+}
+
+export function deleteRoleResourceGroupPerm (rid, resourceGroupID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resource_groups/${resourceGroupID}/revoke`,
+    method: 'POST',
+    data: params
+  })
+}
diff --git a/ui/src/api/acl/resource.js b/ui/src/api/acl/resource.js
new file mode 100644
index 0000000..d96eae8
--- /dev/null
+++ b/ui/src/api/acl/resource.js
@@ -0,0 +1,65 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function searchResource (params) {
+  return axios({
+    url: urlPrefix + `/resources`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addResource (params) {
+  return axios({
+    url: urlPrefix + '/resources',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateResourceById (id, params) {
+  return axios({
+    url: urlPrefix + `/resources/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteResourceById (id) {
+  return axios({
+    url: urlPrefix + `/resources/${id}`,
+    method: 'DELETE'
+  })
+}
+
+export function searchResourceType (params) {
+  return axios({
+    url: urlPrefix + `/resource_types`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addResourceType (params) {
+  return axios({
+    url: urlPrefix + '/resource_types',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateResourceTypeById (id, params) {
+  return axios({
+    url: urlPrefix + `/resource_types/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteResourceTypeById (id) {
+  return axios({
+    url: urlPrefix + `/resource_types/${id}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/api/acl/role.js b/ui/src/api/acl/role.js
new file mode 100644
index 0000000..312527b
--- /dev/null
+++ b/ui/src/api/acl/role.js
@@ -0,0 +1,66 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function searchRole (params) {
+  return axios({
+    url: urlPrefix + `/roles`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addRole (params) {
+  return axios({
+    url: urlPrefix + '/roles',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateRoleById (id, params) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteRoleById (id) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'DELETE'
+  })
+}
+
+export function addParentRole (id, otherID) {
+  return axios({
+    url: urlPrefix + `/roles/${id}/parents`,
+    method: 'POST',
+    data: { parent_id: otherID }
+  })
+}
+
+export function addChildRole (id, otherID) {
+  return axios({
+    url: urlPrefix + `/roles/${otherID}/parents`,
+    method: 'POST',
+    data: { parent_id: id }
+  })
+}
+
+export function delParentRole (cid, pid) {
+  return axios({
+    url: urlPrefix + `/roles/${cid}/parents`,
+    method: 'DELETE',
+    data: { parent_id: pid }
+  })
+}
+
+export function delChildRole (pid, cid) {
+  return axios({
+    url: urlPrefix + `/roles/${cid}/parents`,
+    method: 'DELETE',
+    data: { parent_id: pid }
+  })
+}
diff --git a/ui/src/api/acl/user.js b/ui/src/api/acl/user.js
new file mode 100644
index 0000000..5de6201
--- /dev/null
+++ b/ui/src/api/acl/user.js
@@ -0,0 +1,41 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function currentUser () {
+  return axios({
+    url: urlPrefix + `/users/info`,
+    method: 'GET'
+  })
+}
+
+export function searchUser (params) {
+  return axios({
+    url: urlPrefix + `/users`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addUser (params) {
+  return axios({
+    url: urlPrefix + '/users',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateUserById (id, params) {
+  return axios({
+    url: urlPrefix + `/users/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteUserById (id) {
+  return axios({
+    url: urlPrefix + `/users/${id}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/config/router.config.js b/ui/src/config/router.config.js
index ec48c6f..b41bf9b 100644
--- a/ui/src/config/router.config.js
+++ b/ui/src/config/router.config.js
@@ -78,21 +78,28 @@ const cmdbRouter = [
         name: 'acl_users',
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/users'),
-        meta: { title: 'Users', keepAlive: true }
+        meta: { title: '用户管理', keepAlive: true }
       },
       {
         path: '/acl/roles',
         name: 'acl_roles',
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/roles'),
-        meta: { title: 'Roles', keepAlive: true }
+        meta: { title: '角色管理', keepAlive: true }
       },
       {
         path: '/acl/resources',
         name: 'acl_resources',
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/resources'),
-        meta: { title: 'Resources', keepAlive: true }
+        meta: { title: '资源管理', keepAlive: true }
+      },
+      {
+        path: '/acl/resource_types',
+        name: 'acl_resource_types',
+        hideChildrenInMenu: true,
+        component: () => import('@/views/cmdb/acl/resource_types'),
+        meta: { title: '资源类型', keepAlive: true }
       }
     ]
   }
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
index 33e1180..9cc8d4e 100644
--- a/ui/src/store/modules/app.js
+++ b/ui/src/store/modules/app.js
@@ -14,6 +14,7 @@ import {
 
 const app = {
   state: {
+    name: 'cmdb',
     sidebar: true,
     device: 'desktop',
     theme: '',
diff --git a/ui/src/views/cmdb/acl/module/addRoleRelationForm.vue b/ui/src/views/cmdb/acl/module/addRoleRelationForm.vue
new file mode 100644
index 0000000..5f92dd0
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/addRoleRelationForm.vue
@@ -0,0 +1,197 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleAddParent">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="角色列表"
+      >
+        <a-select name="otherID" v-decorator="['otherID', {rules: [{ required: true, message: '请选择另一个角色'}]} ]">
+          <a-select-option v-for="role in allRoles" v-if="role.id != current_record.id" :key="role.id">{{ role.name }}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleAddParent" type="primary" style="margin-right: 1rem">关联父角色</a-button>
+        <a-button @click="handleAddChild" type="primary" style="margin-right: 1rem">关联子角色</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { searchRole, addParentRole, addChildRole } from '@/api/acl/role'
+
+export default {
+  name: 'AddRoleRelationForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '角色关联',
+      drawerVisible: false,
+      formLayout: 'vertical',
+      allRoles: [],
+      current_record: null
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    handleAddRoleRelation (record) {
+      this.current_record = record
+      this.drawerVisible = true
+      this.$nextTick(() => {
+        this.getAllRoles()
+        this.form.setFieldsValue({
+          id: record.id
+        })
+      })
+    },
+    handleAddParent (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.addParent(values.id, values.otherID)
+        }
+      })
+    },
+    handleAddChild (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.addChild(values.id, values.otherID)
+        }
+      })
+    },
+    getAllRoles () {
+      searchRole({ page_size: 9999, app_id: this.$store.state.app.name }).then(res => {
+        this.allRoles = res.roles
+      })
+    },
+    addParent (id, otherID) {
+      addParentRole(id, otherID)
+        .then(res => {
+          this.$message.success(`关联父角色成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    addChild (id, otherID) {
+      addChildRole(id, otherID)
+        .then(res => {
+          this.$message.success(`关联子角色成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/permissionForm.vue b/ui/src/views/cmdb/acl/module/permissionForm.vue
new file mode 100644
index 0000000..c7be895
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/permissionForm.vue
@@ -0,0 +1,238 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="类型名"
+      >
+        <a-input
+          name="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入资源名'}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="描述"
+      >
+        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4" />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="权限"
+      >
+        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
+          <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
+            全选
+          </a-checkbox>
+        </div>
+        <br />
+        <a-checkbox-group :options="plainOptions" v-model="perms" @change="onPermChange" />
+
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addResourceType, updateResourceTypeById } from '@/api/acl/resource'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增资源类型',
+      drawerVisible: false,
+      formLayout: 'vertical',
+      perms: ['1'],
+      indeterminate: true,
+      checkAll: false,
+      plainOptions: ['1', '2']
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+    onPermChange (perms) {
+      this.indeterminate = !!perms.length && perms.length < this.plainOptions.length
+      this.checkAll = perms.length === this.plainOptions.length
+    },
+    onCheckAllChange (e) {
+      Object.assign(this, {
+        perms: e.target.checked ? this.plainOptions : [],
+        indeterminate: false,
+        checkAll: e.target.checked
+      })
+    },
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.id,
+          name: record.name,
+          description: record.description
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          values.app_id = this.$store.state.app.name
+          values.perms = this.perms
+          if (values.id) {
+            this.updateResourceType(values.id, values)
+          } else {
+            this.createResourceType(values)
+          }
+        }
+      })
+    },
+    updateResourceType (id, data) {
+      updateResourceTypeById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResourceType (data) {
+      addResourceType(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/resourceForm.vue b/ui/src/views/cmdb/acl/module/resourceForm.vue
new file mode 100644
index 0000000..0b33211
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/resourceForm.vue
@@ -0,0 +1,219 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="资源名"
+      >
+        <a-input
+          name="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入资源名'}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="资源类型"
+      >
+        <a-select name="type_id" v-decorator="['type_id', {rules: []} ]">
+          <a-select-option v-for="type in allTypes" :key="type.id">{{ type.name }}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addResource, updateResourceById, searchResourceType } from '@/api/acl/resource'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增资源',
+      drawerVisible: false,
+      formLayout: 'vertical',
+      allTypes: []
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  created () {
+    this.getAllResourceTypes()
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+    getAllResourceTypes () {
+      searchResourceType({ page_size: 9999, app_id: this.$store.state.app.name }).then(res => {
+        this.allTypes = res.groups
+      })
+    },
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.id,
+          name: record.name,
+          type_id: record.resource_type_id
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          values.app_id = this.$store.state.app.name
+          if (values.id) {
+            this.updateResource(values.id, values)
+          } else {
+            this.createResource(values)
+          }
+        }
+      })
+    },
+    updateResource (id, data) {
+      updateResourceById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResource (data) {
+      addResource(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/resourcePermForm.vue b/ui/src/views/cmdb/acl/module/resourcePermForm.vue
new file mode 100644
index 0000000..b5d7966
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/resourcePermForm.vue
@@ -0,0 +1,211 @@
+<template>
+
+  <a-modal
+    :title="drawerTitle"
+    v-model="drawerVisible"
+    width="50%"
+  >
+    <template slot="footer">
+      <a-button type="primary" @click="showChildrenDrawer">
+        添加权限
+      </a-button>
+      <a-button key="back" @click="handleCancel">关闭</a-button>
+    </template>
+
+    <template>
+
+      <a-list itemLayout="horizontal" :dataSource="resPerms">
+        <a-list-item slot="renderItem" slot-scope="item">
+          <span>{{ item[0] }}：  </span>
+          <div>
+            <a-tag color="cyan" v-for="perm in item[1]" :key="perm.rid" closable @close="deletePerm(perm.rid, perm.name)">{{ perm.name }}</a-tag>
+          </div>
+        </a-list-item>
+      </a-list>
+    </template>
+
+    <a-drawer
+      title="添加权限"
+      width="30%"
+      :closable="false"
+      @close="onChildrenDrawerClose"
+      :visible="childrenDrawer"
+    >
+      <a-form :form="form" @submit="handleSubmit">
+        <a-form-item
+          label="角色列表"
+        >
+          <a-select name="roleID" v-decorator="['roleID', {rules: []} ]">
+            <a-select-option v-for="role in allRoles" :key="role.id">{{ role.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          label="权限列表"
+        >
+          <a-select name="permName" v-decorator="['permName', {rules: []} ]">
+            <a-select-option v-for="perm in allPerms" :key="perm.name">{{ perm.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <div
+          :style="{
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '0.8rem 1rem',
+            background: '#fff',
+
+          }"
+        >
+          <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">添加</a-button>
+          <a-button @click="onChildrenDrawerClose">取消</a-button>
+
+        </div>
+
+      </a-form>
+    </a-drawer>
+
+  </a-modal>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { getResourceTypePerms, getResourcePerms, deleteRoleResourcePerm, setRoleResourcePerm } from '@/api/acl/permission'
+import { searchRole } from '@/api/acl/role'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '权限列表',
+      drawerVisible: false,
+      record: null,
+      allPerms: [],
+      resPerms: [],
+      roleID: null,
+      childrenDrawer: false,
+      allRoles: []
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+  },
+  mounted () {
+  },
+  methods: {
+    showChildrenDrawer () {
+      this.childrenDrawer = true
+    },
+    onChildrenDrawerClose () {
+      this.childrenDrawer = false
+    },
+    handlePerm (record) {
+      this.drawerVisible = true
+      this.record = record
+      this.getResPerms(record.id)
+
+      this.$nextTick(() => {
+        this.getAllRoles()
+        this.getAllPerms(record.resource_type_id)
+      })
+    },
+    getResPerms (resId) {
+      getResourcePerms(resId).then(res => {
+        var perms = []
+        for (var key in res) {
+          perms.push([key, res[key]])
+        }
+        this.resPerms = perms
+      })
+    },
+    getAllPerms (resTypeId) {
+      getResourceTypePerms(resTypeId).then(res => {
+        this.allPerms = res
+      })
+    },
+    deletePerm (roleID, permName) {
+      deleteRoleResourcePerm(roleID, this.record.id, [permName]).then(res => {
+        this.$message.success(`删除成功`)
+        this.handleOk()
+      })
+        .catch(err => this.requestFailed(err))
+    },
+    addPerm (roleID, permName) {
+      setRoleResourcePerm(roleID, this.record.id, [permName]).then(res => {
+        this.$message.success(`添加成功`)
+        this.handleOk()
+      })
+        .catch(err => this.requestFailed(err))
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          this.addPerm(values.roleID, values.permName)
+        }
+      })
+    },
+    getAllRoles () {
+      searchRole({ page_size: 9999, app_id: this.$store.state.app.name }).then(res => {
+        this.allRoles = res.roles
+      })
+    },
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    handleCancel (e) {
+      this.drawerVisible = false
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/resourceTypeForm.vue b/ui/src/views/cmdb/acl/module/resourceTypeForm.vue
new file mode 100644
index 0000000..9c325f5
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/resourceTypeForm.vue
@@ -0,0 +1,219 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="类型名"
+      >
+        <a-input
+          name="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入资源名'}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="描述"
+      >
+        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4"  v-decorator="['description', {rules: []} ]"/>
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="权限"
+      >
+        <a-select mode="tags" v-model="perms" style="width: 100%" placeholder="请输入权限名...">
+        </a-select>
+
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addResourceType, updateResourceTypeById } from '@/api/acl/resource'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增资源类型',
+      drawerVisible: false,
+      formLayout: 'vertical',
+      perms: []
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.perms = record.perms
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.id,
+          name: record.name,
+          description: record.description
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          values.app_id = this.$store.state.app.name
+          values.perms = this.perms
+          if (values.id) {
+            this.updateResourceType(values.id, values)
+          } else {
+            this.createResourceType(values)
+          }
+        }
+      })
+    },
+    updateResourceType (id, data) {
+      updateResourceTypeById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResourceType (data) {
+      addResourceType(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/roleForm.vue b/ui/src/views/cmdb/acl/module/roleForm.vue
new file mode 100644
index 0000000..d56955b
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/roleForm.vue
@@ -0,0 +1,210 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="角色名"
+      >
+        <a-input
+          name="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入角色名'}]} ]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label-col="horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        label="是否应用管理员"
+      >
+        <a-switch
+          @change="onChange"
+          name="is_app_admin"
+          v-decorator="['is_app_admin', {rules: [], valuePropName: 'checked',} ]"
+        />
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addRole, updateRoleById } from '@/api/acl/role'
+
+export default {
+  name: 'RoleForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增角色',
+      drawerVisible: false,
+      formLayout: 'vertical'
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.id,
+          name: record.name,
+          is_app_admin: record.is_app_admin
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          values.app_id = this.$store.state.app.name
+          if (values.id) {
+            this.updateRole(values.id, values)
+          } else {
+            this.createRole(values)
+          }
+        }
+      })
+    },
+    updateRole (id, data) {
+      updateRoleById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createRole (data) {
+      addRole(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/userForm.vue b/ui/src/views/cmdb/acl/module/userForm.vue
new file mode 100644
index 0000000..7950169
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/userForm.vue
@@ -0,0 +1,270 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="用户名(英文)"
+      >
+        <a-input
+          name="username"
+          placeholder="英文名"
+          v-decorator="['username', {rules: [{ required: true, message: '请输入用户名'}]} ]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="中文名"
+      >
+        <a-input
+          name="nickname"
+          v-decorator="['nickname', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="部门"
+      >
+        <a-input
+          name="department"
+          v-decorator="['department', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="小组"
+      >
+        <a-input
+          name="catalog"
+          v-decorator="['catalog', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="邮箱"
+      >
+        <a-input
+          name="email"
+          v-decorator="['email', {rules: [{ required: true, message: '请输入邮箱'},{message: '请输入正确的邮箱', pattern: /^\w+\@\w+(\.\w+)+$/}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="手机号码"
+      >
+        <a-input
+          name="mobile"
+          v-decorator="['mobile', {rules: [{message: '请输入正确的手机号码', pattern: /^1\d{10}$/ }]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        label="是否锁定"
+      >
+        <a-switch
+          @change="onChange"
+          name="block"
+          v-decorator="['block', {rules: [], valuePropName: 'checked',} ]"
+        />
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addUser, updateUserById } from '@/api/acl/user'
+
+export default {
+  name: 'AttributeForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增用户',
+      drawerVisible: false,
+      formLayout: 'vertical'
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.uid,
+          username: record.username,
+          nickname: record.nickname,
+          department: record.department,
+          catalog: record.catalog,
+          email: record.email,
+          mobile: record.mobile,
+          block: record.block
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (values.id) {
+            this.updateUser(values.id, values)
+          } else {
+            this.createUser(values)
+          }
+        }
+      })
+    },
+    updateUser (attrId, data) {
+      updateUserById(attrId, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createUser (data) {
+      addUser(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/permissions.vue b/ui/src/views/cmdb/acl/permissions.vue
new file mode 100644
index 0000000..592fe2b
--- /dev/null
+++ b/ui/src/views/cmdb/acl/permissions.vue
@@ -0,0 +1,311 @@
+<template>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="description" slot-scope="text">{{ text }}</template>
+
+      <span slot="id" slot-scope="key">
+        <a-tag color="cyan" v-for="perm in id2perms[key]" :key="perm.id">{{ perm.name }}</a-tag>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import resourceTypeForm from './module/resourceTypeForm'
+import { deleteResourceTypeById, searchResourceType } from '@/api/acl/resource'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    resourceTypeForm
+  },
+  data () {
+    return {
+      id2perms: {},
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增资源类型',
+
+      formLayout: 'vertical',
+
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '类型名',
+          dataIndex: 'name',
+          sorter: false,
+          width: 50,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '描述',
+          dataIndex: 'description',
+          width: 250,
+          sorter: false,
+          scopedSlots: { customRender: 'description' }
+        },
+        {
+          title: '权限',
+          dataIndex: 'id',
+          sorter: false,
+          scopedSlots: { customRender: 'id' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.app_id = this.$store.state.app.name
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchResourceType(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.groups
+            this.id2perms = res.id2perms
+            console.log('loadData.res', res)
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.resourceTypeForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteResourceType(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.resourceTypeForm.handleCreate()
+    },
+
+    deleteResourceType (id) {
+      deleteResourceTypeById(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel () {
+
+    }
+
+  },
+  watch: {}
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/resource_types.vue b/ui/src/views/cmdb/acl/resource_types.vue
new file mode 100644
index 0000000..26a240a
--- /dev/null
+++ b/ui/src/views/cmdb/acl/resource_types.vue
@@ -0,0 +1,320 @@
+<template>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="description" slot-scope="text">{{ text }}</template>
+
+      <span slot="id" slot-scope="key">
+        <a-tag color="cyan" v-for="perm in id2perms[key]" :key="perm.id">{{ perm.name }}</a-tag>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import resourceTypeForm from './module/resourceTypeForm'
+import { deleteResourceTypeById, searchResourceType } from '@/api/acl/resource'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    resourceTypeForm
+  },
+  data () {
+    return {
+      id2perms: {},
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增资源类型',
+
+      formLayout: 'vertical',
+
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '类型名',
+          dataIndex: 'name',
+          sorter: false,
+          width: 150,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '描述',
+          dataIndex: 'description',
+          width: 500,
+          sorter: false,
+          scopedSlots: { customRender: 'description' }
+        },
+        {
+          title: '权限',
+          dataIndex: 'id',
+          sorter: false,
+          scopedSlots: { customRender: 'id' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.app_id = this.$store.state.app.name
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchResourceType(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.groups
+            this.id2perms = res.id2perms
+            console.log('loadData.res', res)
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      var perms = []
+      var permList = this.id2perms[record.id]
+      if (permList) {
+        for (var i = 0; i < permList.length; i++) {
+          perms.push(permList[i].name)
+        }
+      }
+      record.perms = perms
+      console.log(record)
+      this.$refs.resourceTypeForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteResourceType(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.resourceTypeForm.handleCreate()
+    },
+
+    deleteResourceType (id) {
+      deleteResourceTypeById(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel () {
+
+    }
+
+  },
+  watch: {}
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/resources.vue b/ui/src/views/cmdb/acl/resources.vue
index 6d9c248..7e3599d 100644
--- a/ui/src/views/cmdb/acl/resources.vue
+++ b/ui/src/views/cmdb/acl/resources.vue
@@ -1,10 +1,310 @@
 <template>
-  <div></div>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="resource_type_id" slot-scope="text">{{ text }}</template>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+          <a @click="handlePerm(record)">权限</a>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <resourceForm ref="resourceForm" :handleOk="handleOk"> </resourceForm>
+    <resourcePermForm ref="resourcePermForm"> </resourcePermForm>
+
+  </a-card>
 </template>
 
 <script>
-export default {}
+import { STable } from '@/components'
+import resourceForm from './module/resourceForm'
+import resourcePermForm from './module/resourcePermForm'
+import { deleteResourceById, searchResource } from '@/api/acl/resource'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    resourceForm,
+    resourcePermForm
+  },
+  data () {
+    return {
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增资源',
+
+      formLayout: 'vertical',
+
+      allResources: [],
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '资源名',
+          dataIndex: 'name',
+          sorter: false,
+          width: 300,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '资源类型',
+          dataIndex: 'resource_type_id',
+          sorter: false,
+          scopedSlots: { customRender: 'resource_type_id' }
+
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.app_id = this.$store.state.app.name
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchResource(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.resources
+
+            console.log('loadData.res', res)
+            this.allResources = res.resources
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.resourceForm.handleEdit(record)
+    },
+
+    handlePerm (record) {
+      this.$refs.resourcePermForm.handlePerm(record)
+    },
+    handleDelete (record) {
+      this.deleteResource(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.resourceForm.handleCreate()
+    },
+
+    deleteResource (id) {
+      deleteResourceById(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel () {
+
+    }
+
+  },
+  watch: {}
+
+}
 </script>
 
-<style>
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
 </style>
diff --git a/ui/src/views/cmdb/acl/roles.vue b/ui/src/views/cmdb/acl/roles.vue
index 6d9c248..d947a75 100644
--- a/ui/src/views/cmdb/acl/roles.vue
+++ b/ui/src/views/cmdb/acl/roles.vue
@@ -1,10 +1,326 @@
 <template>
-  <div></div>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <span slot="is_app_admin" slot-scope="text">
+        <a-icon type="check" v-if="text"/>
+      </span>
+
+      <span slot="id" slot-scope="key">
+        <a-tag color="cyan" v-for="role in id2parents[key]" :key="role.id">{{ role.name }}</a-tag>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleAddRoleRelation(record)">关联角色</a>
+          <a-divider type="vertical"/>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <roleForm ref="roleForm" :handleOk="handleOk"> </roleForm>
+    <addRoleRelationForm ref="AddRoleRelationForm" :handleOk="handleOk"> </addRoleRelationForm>
+
+  </a-card>
 </template>
 
 <script>
-export default {}
+import { STable } from '@/components'
+import roleForm from './module/roleForm'
+import AddRoleRelationForm from './module/addRoleRelationForm'
+import { deleteRoleById, searchRole } from '@/api/acl/role'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    roleForm,
+    AddRoleRelationForm
+  },
+  data () {
+    return {
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增角色',
+
+      formLayout: 'vertical',
+
+      allRoles: [],
+      id2parents: {},
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '角色名',
+          dataIndex: 'name',
+          sorter: false,
+          width: 250,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '管理者',
+          dataIndex: 'is_app_admin',
+          width: 100,
+          sorter: false,
+          scopedSlots: { customRender: 'is_app_admin' }
+
+        },
+        {
+          title: '父角色',
+          dataIndex: 'id',
+          sorter: false,
+          scopedSlots: { customRender: 'id' }
+
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.app_id = this.$store.state.app.name
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchRole(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.roles
+
+            console.log('loadData.res', res)
+            this.allRoles = res.roles
+            this.id2parents = res.id2parents
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleAddRoleRelation (record) {
+      this.$refs.AddRoleRelationForm.handleAddRoleRelation(record)
+    },
+
+    handleEdit (record) {
+      this.$refs.roleForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteRole(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.roleForm.handleCreate()
+    },
+
+    deleteRole (id) {
+      deleteRoleById(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel (e) {
+      return false
+    }
+
+  },
+  watch: {}
+
+}
 </script>
 
-<style>
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
 </style>
diff --git a/ui/src/views/cmdb/acl/users.vue b/ui/src/views/cmdb/acl/users.vue
index 6d9c248..7099751 100644
--- a/ui/src/views/cmdb/acl/users.vue
+++ b/ui/src/views/cmdb/acl/users.vue
@@ -1,10 +1,374 @@
 <template>
-  <div></div>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.uid"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="usernameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.username})|(?=${columnSearchText.username})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="nicknameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.alias">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.nickname})|(?=${columnSearchText.nickname})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.alias.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <span slot="is_check" slot-scope="text">
+        <a-icon type="check" v-if="text"/>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <userForm ref="userForm" :handleOk="handleOk"> </userForm>
+
+  </a-card>
 </template>
 
 <script>
-export default {}
+import { STable } from '@/components'
+import userForm from './module/userForm'
+import { deleteUserById, searchUser } from '@/api/acl/user'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    userForm
+  },
+  data () {
+    return {
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增用户',
+
+      CITypeName: this.$route.params.CITypeName,
+      CITypeId: this.$route.params.CITypeId,
+
+      formLayout: 'vertical',
+
+      allUsers: [],
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '用户名',
+          dataIndex: 'username',
+          sorter: false,
+          width: 150,
+          scopedSlots: {
+            customRender: 'usernameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.username && record.username.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '中文名',
+          dataIndex: 'nickname',
+          sorter: false,
+          width: 150,
+          scopedSlots: {
+            customRender: 'nicknameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.nickname && record.nickname.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '部门',
+          dataIndex: 'department',
+          width: 200,
+          sorter: false,
+          scopedSlots: { customRender: 'department' }
+
+        },
+        {
+          title: '小组',
+          dataIndex: 'catalog',
+          sorter: false,
+          width: 200,
+          scopedSlots: { customRender: 'catalog' }
+
+        },
+        {
+          title: '邮箱',
+          dataIndex: 'email',
+          sorter: false,
+          width: 200,
+          scopedSlots: { customRender: 'email' }
+
+        },
+        {
+          title: '手机',
+          dataIndex: 'mobile',
+          sorter: false,
+          width: 200,
+          scopedSlots: { customRender: 'mobile' }
+
+        },
+        {
+          title: '锁定',
+          dataIndex: 'block',
+          sorter: false,
+          width: 100,
+          scopedSlots: { customRender: 'block' }
+
+        },
+        {
+          title: '加入时间',
+          dataIndex: 'date_joined',
+          sorter: false,
+          scopedSlots: { customRender: 'date_joined' }
+
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchUser(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.users
+
+            console.log('loadData.res', res)
+            this.allUsers = res.users
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    },
+    cancel () {
+      return false
+    }
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.userForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteUser(record.uid)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.userForm.handleCreate()
+    },
+
+    deleteUser (attrId) {
+      deleteUserById(attrId)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {}
+
+}
 </script>
 
-<style>
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
 </style>