diff --git a/src/components/ListTable/formatters/DeleteActionFormatter.vue b/src/components/ListTable/formatters/DeleteActionFormatter.vue
new file mode 100644
index 000000000..8c6943997
--- /dev/null
+++ b/src/components/ListTable/formatters/DeleteActionFormatter.vue
@@ -0,0 +1,29 @@
+<template>
+  <el-button size="mini" type="danger" @click="handleDelete(col, row, cellValue, reload)">
+    <i class="fa fa-minus" />
+  </el-button>
+</template>
+
+<script>
+import BaseFormatter from './base'
+
+export default {
+  name: 'DeleteActionFormatter',
+  extends: BaseFormatter,
+  methods: {
+    handleDelete(col, row, cellValue, reload) {
+      const url = col.deleteUrl + cellValue
+      this.$axios.delete(url).then(res => {
+        this.$message.success(this.$tc('Delete success'))
+        reload()
+      }).catch(error => {
+        this.$message.error(this.$tc('Delete failed' + ' ' + error))
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ListTable/formatters/index.js b/src/components/ListTable/formatters/index.js
index a2235da5b..66ca66727 100644
--- a/src/components/ListTable/formatters/index.js
+++ b/src/components/ListTable/formatters/index.js
@@ -8,6 +8,7 @@ import RouterFormatter from './RouterFormatter'
 import OutputExpandFormatter from './OutputExpandFormatter'
 import ExpandAssetPermissionFormatter from './ExpandAssetPermissionFormatter'
 import CustomActionsFormatter from './CustomActionsFormatter'
+import DeleteActionFormatter from './DeleteActionFormatter'
 
 export default {
   DetailFormatter,
@@ -19,7 +20,8 @@ export default {
   RouterFormatter,
   OutputExpandFormatter,
   ExpandAssetPermissionFormatter,
-  CustomActionsFormatter
+  CustomActionsFormatter,
+  DeleteActionFormatter
 }
 
 export {
@@ -32,5 +34,6 @@ export {
   RouterFormatter,
   OutputExpandFormatter,
   ExpandAssetPermissionFormatter,
-  CustomActionsFormatter
+  CustomActionsFormatter,
+  DeleteActionFormatter
 }
diff --git a/src/components/index.js b/src/components/index.js
index 07976b9d0..21bb26775 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -16,3 +16,4 @@ export { default as ActiveCard } from './ActiveCard'
 export { default as Select2 } from './Select2'
 export { default as SvgIcon } from './SvgIcon'
 export { default as TreeTable } from './TreeTable'
+
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index fd19bed26..94063c84a 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -349,6 +349,9 @@ const cn = {
     'RefreshPermissionCache': '刷新授权缓存',
     'ReFreshSuccess': '刷新成功',
     'ReFreshFail': '刷新失败',
+    'IsValid': '有效',
+    'IP': 'IP',
+    'Hostname': '主机名',
     'All': '全部',
     'Connect': '连接',
     'UpDownload': '上传下载',
diff --git a/src/views/perms/AssetPermissionAsset.vue b/src/views/perms/AssetPermissionAsset.vue
index 9d2e1d01a..3e760df7a 100644
--- a/src/views/perms/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermissionAsset.vue
@@ -14,6 +14,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import { RelationCard } from '@/components'
+import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   name: 'AssetPermissionAsset',
@@ -26,12 +27,24 @@ export default {
       tableConfig: {
         url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/assets/all/`,
         columns: [
-          'asset_display'
+          'asset_display', 'delete_action'
         ],
         columnsMeta: {
           asset_display: {
-            label: this.$t('perms.Asset')
+            label: this.$t('perms.Asset'),
+            align: 'center'
+          },
+          delete_action: {
+            prop: 'asset',
+            label: this.$tc('Action'),
+            align: 'center',
+            width: 150,
+            formatter: DeleteActionFormatter,
+            deleteUrl: `/api/v1/perms/asset-permissions-assets-relations/?assetpermission=${this.$route.params.id}&asset=`
           }
+        },
+        tableAttrs: {
+          border: false
         }
       },
       headerActions: {
diff --git a/src/views/perms/AssetPermissionDetail.vue b/src/views/perms/AssetPermissionDetail.vue
index 2e69d6be8..5a565a4fd 100644
--- a/src/views/perms/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermissionDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="assetPermissionData" v-bind="config">
+  <GenericDetailPage :object.sync="assetPermissionData" v-bind="config" @tab-click="TabClick">
     <template #detail>
       <div>
         <el-row :gutter="20">
@@ -111,7 +111,6 @@ export default {
         },
         {
           key: this.$t('perms.DateExpired'),
-          // value: toSafeLocalDateStr(this.assetData.date_expired),
           value: toSafeLocalDateStr(this.assetPermissionData.date_expired)
         },
         {
@@ -141,6 +140,13 @@ export default {
         return data.length
       }
       return data
+    },
+    TabClick(tab) {
+      if (tab.name !== 'detail') {
+        this.$set(this.config, 'hasRightSide', false)
+      } else {
+        this.$set(this.config, 'hasRightSide', true)
+      }
     }
   }
 }
diff --git a/src/views/perms/AssetPermissionList.vue b/src/views/perms/AssetPermissionList.vue
index 1fb269318..ca1e397a2 100644
--- a/src/views/perms/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermissionList.vue
@@ -16,6 +16,17 @@ export default {
         url: '/api/v1/perms/asset-permissions/',
         hasSelection: false,
         hasTree: true,
+        tagSearch: [
+          { label: this.$tc('Name'), key: 'name' },
+          { label: this.$t('perms.IsValid'), key: 'is_valid' },
+          { label: this.$tc('username'), key: 'username' },
+          { label: this.$t('perms.UserGroups'), key: 'user_group' },
+          { label: this.$t('perms.IP'), key: 'ip' },
+          { label: this.$t('perms.Hostname'), key: 'hostname' },
+          { label: this.$t('perms.Node'), key: 'node' },
+          { label: this.$t('perms.SystemUser'), key: 'system_user' },
+          { label: '继承(先占位)', key: 'all=0' }
+        ],
         treeSetting: {
           showMenu: false,
           showRefresh: true,
@@ -56,8 +67,12 @@ export default {
         }
       },
       headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
         hasBulkDelete: false,
-        extraActions: [
+        hasBulkUpdate: false,
+        extraMoreActions: [
           {
             name: 'RefreshPermissionCache',
             title: this.$t('perms.RefreshPermissionCache'),
@@ -73,9 +88,9 @@ export default {
     HandleRefreshPermissionCache() {
       const url = '/api/v1/perms/asset-permissions/cache/refresh/'
       this.$axios.get(url).then(res => {
-        this.$message(this.$t('perms.ReFreshSuccess'))
+        this.$message.success(this.$t('perms.ReFreshSuccess'))
       }).catch(err => {
-        this.$message(this.$t('perms.ReFreshFail') + ':' + err)
+        this.$message.error(this.$t('perms.ReFreshFail') + ':' + err)
       })
     }
   }
diff --git a/src/views/perms/AssetPermissionUser.vue b/src/views/perms/AssetPermissionUser.vue
index d42eb611e..a80dcbbf5 100644
--- a/src/views/perms/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermissionUser.vue
@@ -13,6 +13,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import { RelationCard } from '@/components'
+import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   name: 'AssetPermissionUser',
@@ -25,12 +26,24 @@ export default {
       tableConfig: {
         url: `/api/v1/perms/asset-permissions/${this.$route.params.id}/users/all/`,
         columns: [
-          'user_display'
+          'user_display', 'delete_action'
         ],
         columnsMeta: {
           user_display: {
-            label: this.$t('perms.User')
+            label: this.$t('perms.User'),
+            align: 'center'
+          },
+          delete_action: {
+            prop: 'user',
+            label: this.$tc('Action'),
+            align: 'center',
+            width: 150,
+            formatter: DeleteActionFormatter,
+            deleteUrl: `/api/v1/perms/asset-permissions-users-relations/?assetpermission=${this.$route.params.id}&user=`
           }
+        },
+        tableAttrs: {
+          border: false
         }
       },
       headerActions: {
diff --git a/src/views/perms/DatabaseAppPermissionDatabaseApp.vue b/src/views/perms/DatabaseAppPermissionDatabaseApp.vue
index c5b92c8c3..adbe31580 100644
--- a/src/views/perms/DatabaseAppPermissionDatabaseApp.vue
+++ b/src/views/perms/DatabaseAppPermissionDatabaseApp.vue
@@ -13,6 +13,7 @@
 <script>
 import ListTable from '@/components/ListTable'
 import { RelationCard } from '@/components'
+import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   name: 'DatabaseAppPermissionDatabaseApp',
@@ -25,11 +26,20 @@ export default {
       tableConfig: {
         url: `/api/v1/perms/database-app-permissions/${this.$route.params.id}/database-apps/all/`,
         columns: [
-          'databaseapp_display'
+          'databaseapp_display', 'delete_action'
         ],
         columnsMeta: {
           databaseapp_display: {
-            label: this.$t('perms.DatabaseApp')
+            label: this.$t('perms.DatabaseApp'),
+            align: 'center'
+          },
+          delete_action: {
+            prop: 'databaseapp',
+            label: this.$tc('Action'),
+            align: 'center',
+            width: 150,
+            formatter: DeleteActionFormatter,
+            deleteUrl: `/api/v1/perms/database-app-permissions-database-apps-relations/?databaseapppermission=${this.$route.params.id}&databaseapp=`
           }
         }
       },
diff --git a/src/views/perms/DatabaseAppPermissionDetail.vue b/src/views/perms/DatabaseAppPermissionDetail.vue
index 968efa6b2..ba418f5b5 100644
--- a/src/views/perms/DatabaseAppPermissionDetail.vue
+++ b/src/views/perms/DatabaseAppPermissionDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="databaseAppData" v-bind="config">
+  <GenericDetailPage :object.sync="databaseAppData" v-bind="config" @tab-click="TabClick">
     <div slot="detail">
       <el-row :gutter="20">
         <el-col :md="14" :sm="24">
@@ -130,6 +130,13 @@ export default {
         return data.length
       }
       return data
+    },
+    TabClick(tab) {
+      if (tab.name !== 'detail') {
+        this.$set(this.config, 'hasRightSide', false)
+      } else {
+        this.$set(this.config, 'hasRightSide', true)
+      }
     }
   }
 }
diff --git a/src/views/perms/DatabaseAppPermissionUser.vue b/src/views/perms/DatabaseAppPermissionUser.vue
index b37477510..772411662 100644
--- a/src/views/perms/DatabaseAppPermissionUser.vue
+++ b/src/views/perms/DatabaseAppPermissionUser.vue
@@ -14,6 +14,8 @@
 <script>
 import ListTable from '@/components/ListTable'
 import { RelationCard } from '@/components'
+import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
+
 export default {
   name: 'DatabaseAppPermissionUser',
   components: {
@@ -25,11 +27,20 @@ export default {
       tableConfig: {
         url: `/api/v1/perms/database-app-permissions/${this.$route.params.id}/users/all/`,
         columns: [
-          'user_display'
+          'user_display', 'delete_action'
         ],
         columnsMeta: {
           user_display: {
-            label: this.$t('perms.User')
+            label: this.$t('perms.User'),
+            align: 'center'
+          },
+          delete_action: {
+            prop: 'user',
+            label: this.$tc('Action'),
+            align: 'center',
+            width: 150,
+            formatter: DeleteActionFormatter,
+            deleteUrl: `/api/v1/perms/database-app-permissions-users-relations/?databaseapppermission=${this.$route.params.id}&user=`
           }
         }
       },
diff --git a/src/views/perms/RemoteAppPermissionDetail.vue b/src/views/perms/RemoteAppPermissionDetail.vue
index 143ce17f1..56efe6246 100644
--- a/src/views/perms/RemoteAppPermissionDetail.vue
+++ b/src/views/perms/RemoteAppPermissionDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="remoteAppData" v-bind="config">
+  <GenericDetailPage :object.sync="remoteAppData" v-bind="config" @tab-click="TabClick">
     <div slot="detail">
       <el-row :gutter="20">
         <el-col :span="14">
@@ -130,6 +130,13 @@ export default {
         return data.length
       }
       return data
+    },
+    TabClick(tab) {
+      if (tab.name !== 'detail') {
+        this.$set(this.config, 'hasRightSide', false)
+      } else {
+        this.$set(this.config, 'hasRightSide', true)
+      }
     }
   }
 }
diff --git a/src/views/sessions/Storage.vue b/src/views/sessions/Storage.vue
index c3ed50b69..a4171504b 100644
--- a/src/views/sessions/Storage.vue
+++ b/src/views/sessions/Storage.vue
@@ -16,7 +16,6 @@
 import { TabPage } from '@/layout/components'
 import { ListTable } from '@/components'
 import { TestCommandStorage, TestReplayStorage } from '@/api/sessions'
-import { CustomActionsFormatter } from '@/components/ListTable/formatters'
 
 export default {
   name: 'Storage',
@@ -90,7 +89,7 @@ export default {
       },
       replayTableConfig: {
         url: '/api/v1/terminal/replay-storages/',
-        columns: ['name', 'type', 'comment', 'cusActions'],
+        columns: ['name', 'type', 'comment', 'actions'],
         columnsMeta: {
           name: {
             formatter: function(row) {
@@ -105,36 +104,16 @@ export default {
           comment: {
             sortable: 'custom'
           },
-          cusActions: {
+          actions: {
             prop: 'id',
-            formatter: CustomActionsFormatter,
             actions: {
-              actions: [
-                {
-                  name: 'update',
-                  title: this.$tc('Update'),
-                  type: 'primary',
-                  can: function(row, cellValue,) {
-                    return row.name !== 'null' && row.name !== 'default'
-                  },
-                  callback: function({ row, col, cellValue, reload }) {
-                  }
-                },
-                {
-                  name: 'delete',
-                  title: this.$tc('Delete'),
-                  type: 'danger',
-                  can: function(row, cellValue) {
-                    return row.name !== 'null' && row.name !== 'default'
-                  },
-                  callback: function({ row, col, cellValue, reload }) {
-                    const id = row.id
-                    const url = `${this.url}${id}/`
-                    this.$axios.delete(url).then(data => {
-                      reload()
-                    })
-                  }
-                },
+              canUpdate: function(row, cellValue) {
+                return (row.name !== 'default' && row.name !== 'null')
+              },
+              canDelete: function(row, cellValue) {
+                return (row.name !== 'default' && row.name !== 'null')
+              },
+              extraActions: [
                 {
                   name: 'test',
                   title: this.$t('sessions.test'),
@@ -179,7 +158,7 @@ export default {
       commandTableConfig: {
         title: 'command',
         url: '/api/v1/terminal/command-storages/',
-        columns: ['name', 'type', 'comment', 'cusActions'],
+        columns: ['name', 'type', 'comment', 'actions'],
         columnsMeta: {
           comment: {
             sortable: 'custom'
@@ -194,36 +173,15 @@ export default {
               return row.type
             }
           },
-          cusActions: {
-            prop: 'id',
-            formatter: CustomActionsFormatter,
+          actions: {
             actions: {
-              actions: [
-                {
-                  name: 'update',
-                  title: this.$tc('Update'),
-                  type: 'primary',
-                  can: function(row, cellValue,) {
-                    return row.name !== 'null' && row.name !== 'default'
-                  },
-                  callback: function({ row, col, cellValue, reload }) {
-                  }
-                },
-                {
-                  name: 'delete',
-                  title: this.$tc('Delete'),
-                  type: 'danger',
-                  can: function(row, cellValue) {
-                    return row.name !== 'null' && row.name !== 'default'
-                  },
-                  callback: function({ row, col, cellValue, reload }) {
-                    const id = row.id
-                    const url = `${this.url}${id}/`
-                    this.$axios.delete(url).then(data => {
-                      reload()
-                    })
-                  }
-                },
+              canUpdate: function(row, cellValue) {
+                return (row.name !== 'default' && row.name !== 'null')
+              },
+              canDelete: function(row, cellValue) {
+                return (row.name !== 'default' && row.name !== 'null')
+              },
+              extraActions: [
                 {
                   name: 'test',
                   title: this.$t('sessions.test'),