diff --git a/src/components/Drawer/index.vue b/src/components/Drawer/index.vue
index 6a6a9ef0a..a33cfc748 100644
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -81,7 +81,6 @@ export default {
         return this.visible
       },
       set(val) {
-        this.$log.debug('>>> Drawer iVisible set: ', val)
         this.$emit('update:visible', val)
       }
     }
diff --git a/src/components/Table/DrawerListTable/index.vue b/src/components/Table/DrawerListTable/index.vue
index ca566e5d1..e7a2a55dc 100644
--- a/src/components/Table/DrawerListTable/index.vue
+++ b/src/components/Table/DrawerListTable/index.vue
@@ -75,12 +75,14 @@ export default {
       title: '',
       action: '',
       drawerVisible: false,
-      drawerComponent: '',
-      drawerTitle: ''
+      drawerComponent: ''
     }
   },
   computed: {
     ...mapGetters(['inDrawer']),
+    drawerTitle() {
+      return this.getDefaultTitle()
+    },
     iHeaderActions() {
       const actions = this.headerActions
       if (!actions.onCreate) {
@@ -93,7 +95,8 @@ export default {
       const actionMap = {
         'columnsMeta.actions.formatterArgs.onUpdate': this.onUpdate,
         'columnsMeta.actions.formatterArgs.onClone': this.onClone,
-        'columnsMeta.name.formatterArgs.onClick': this.onDetail
+        'columnsMeta.name.formatterArgs.drawer': true,
+        'columnsMeta.name.formatterArgs.drawerComponent': this.detailDrawer
       }
       for (const [key, value] of Object.entries(actionMap)) {
         if (_.get(config, key)) {
@@ -105,9 +108,9 @@ export default {
       for (const value of Object.values(columnsMeta)) {
         if (
           value.formatter && value.formatter.name === 'AmountFormatter' &&
-          value.formatterArgs && value.formatterArgs.drawer !== false
+          value.formatterArgs && !value.formatterArgs.drawer
         ) {
-          value.formatterArgs.onClick = this.onDetail
+          value.formatterArgs.drawer = this.detailDrawer
         }
       }
       return config
@@ -119,11 +122,11 @@ export default {
         return
       }
       if (!val) {
-        // this.drawerVisible = false
+        this.drawerVisible = false
+        this.reloadTable()
       }
     },
     drawerVisible: {
-      immediate: true,
       handler(val, oldVal) {
         this.$log.debug('>>> drawerVisible changed: ', oldVal, '->', val)
         if (!val && oldVal) {
@@ -162,18 +165,9 @@ export default {
       }
 
       this.drawerComponent = ''
+      console.log('>>> afterCloseDrawer 2', this.$route)
     },
-    getDetailDrawerTitle({ col, row, cellValue, route }) {
-      let title = cellValue || row.name
-      const resource = route?.meta?.title || route?.name
-
-      if (resource) {
-        title = `${resource}: ${title}`
-      }
-
-      return title
-    },
-    getDefaultTitle({ row, col, cellValue, detailRoute }) {
+    getDefaultTitle() {
       let title = this.title
       let dispatchAction = ''
       if (!title && this.resource) {
@@ -192,13 +186,8 @@ export default {
         dispatchAction = this.$t('Create')
       } else if (action === 'update') {
         dispatchAction = this.$t('Update')
-      } else if (action === 'detail') {
-        dispatchAction = this.$t('Detail')
       }
       title = dispatchAction + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
-      if (this.action === 'detail') {
-        title = this.getDetailDrawerTitle({ row, col, cellValue, route: detailRoute })
-      }
       return title
     },
     getDefaultDrawer(action) {
@@ -225,27 +214,7 @@ export default {
         return component
       }
     },
-    resolveRoute(route) {
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0]
-      }
-    },
-    getDetailComponent(r) {
-      const route = this.resolveRoute(r)
-      if (route) {
-        return route.components.default
-      }
-    },
-    async showDrawer(action, { row, col, cellValue, detailRoute }) {
-      this.drawerTitle = this.getDefaultTitle({ row, col, cellValue, detailRoute })
+    async showDrawer(action) {
       try {
         // 1. 先重置状态
         this.drawerVisible = false
@@ -260,7 +229,7 @@ export default {
         } else if (action === 'update') {
           this.drawerComponent = this.updateDrawer || this.createDrawer
         } else if (action === 'detail') {
-          this.drawerComponent = this.detailDrawer || this.getDetailComponent(detailRoute)
+          this.drawerComponent = this.detailDrawer
         } else if (action === 'clone') {
           this.drawerComponent = this.createDrawer || this.getDefaultDrawer('create')
         } else {
@@ -309,13 +278,6 @@ export default {
       }
       this.$refs.ListTable.reloadTable()
     },
-    async onDetail({ row, col, cellValue, detailRoute }) {
-      this.$route.params.id = row.id
-      await this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'detail', row: row, col: col, id: row.id
-      })
-      await this.showDrawer('detail', { row, col, cellValue, detailRoute })
-    },
     async onCreate(meta) {
       if (!meta) {
         meta = {}
@@ -329,7 +291,7 @@ export default {
       await this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'clone', row: row, col: col, id: row.id
       })
-      await this.showDrawer('clone', { row, col })
+      await this.showDrawer('clone')
     },
     async onUpdate({ row, col }) {
       this.$route.params.id = row.id
@@ -337,7 +299,7 @@ export default {
       await this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'update', row: row, col: col, id: row.id
       })
-      await this.showDrawer('update', { row, col })
+      await this.showDrawer('update')
     }
   }
 }
diff --git a/src/components/Table/TableFormatters/AmountFormatter.vue b/src/components/Table/TableFormatters/AmountFormatter.vue
index a5a3d2093..40fab74de 100644
--- a/src/components/Table/TableFormatters/AmountFormatter.vue
+++ b/src/components/Table/TableFormatters/AmountFormatter.vue
@@ -43,8 +43,7 @@ export default {
           async: false,
           ajax: {},
           title: '',
-          preventClick: false,
-          onClick: null
+          preventClick: false
         }
       }
     }
@@ -54,7 +53,6 @@ export default {
     return {
       formatterArgs: formatterArgs,
       listData: formatterArgs.async ? [] : (this.cellValue || []),
-      onClick: formatterArgs.onClick,
       amount: '',
       asyncGetDone: false
     }
diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 60e823fbe..a563625e5 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -12,14 +12,24 @@
         {{ iTitle }}
       </slot>
     </el-link>
+    <Drawer
+      v-if="formatterArgs.drawer && drawerComponent && drawerVisible"
+      :component="drawerComponent"
+      :has-footer="false"
+      :title="drawerTitle"
+      :visible.sync="drawerVisible"
+      class="detail-drawer"
+    />
   </div>
 </template>
 
 <script>
 import BaseFormatter from './base.vue'
+import Drawer from '@/components/Drawer/index.vue'
 
 export default {
   name: 'DetailFormatter',
+  components: { Drawer },
   extends: BaseFormatter,
   props: {
     formatterArgsDefault: {
@@ -39,6 +49,7 @@ export default {
           getTitle({ row, cellValue }) {
             return cellValue != null ? cellValue : row.name
           },
+          getDrawerTitle: null,
           getIcon({ col, row, cellValue }) {
             return null
           }
@@ -51,11 +62,15 @@ export default {
     }
   },
   data() {
-    const formatterArgs = _.cloneDeep(_.merge(this.formatterArgsDefault, this.col.formatterArgs))
+    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
     return {
+      drawerTitle: '',
       linkClicked: false,
+      drawerComponent: '',
+      showTableDetailDrawer: false,
       currentTemplate: null,
-      formatterArgs: formatterArgs
+      formatterArgs: formatterArgs,
+      drawerVisible: false
     }
   },
   computed: {
@@ -89,14 +104,95 @@ export default {
       }
     }
   },
+  watch: {
+    drawerVisible(val) {
+      this.$log.debug('>>> DetailFormatter drawerVisible: ', val)
+      if (!val) {
+        this.drawerComponent = ''
+      }
+    }
+  },
   methods: {
+    getResource() {
+      const route = this.resolveRoute()
+      if (!route) {
+        return
+      }
+      const resource = route.meta.title || route.name
+      return resource.replace(' details', '').replace('详情', '')
+    },
+    getDrawerTitle() {
+      let title = this.cellValue || this.row.name
+
+      if (this.formatterArgs?.getDrawerTitle && typeof this.formatterArgs.getDrawerTitle === 'function') {
+        title = this.formatterArgs.getDrawerTitle({
+          col: this.col,
+          row: this.row,
+          cellValue: this.cellValue
+        })
+      }
+
+      const resource = this.getResource()
+
+      if (resource) {
+        title = `${resource}: ${title}`
+      }
+
+      return title
+    },
+    resolveRoute() {
+      const route = this.getDetailRoute()
+      const routes = this.$router.resolve(route)
+      if (!routes) {
+        return
+      }
+      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
+      if (matched.length === 0) {
+        return
+      }
+      if (matched[0] && matched[0].components?.default) {
+        return matched[0]
+      }
+    },
+    getRouteComponent() {
+      const route = this.resolveRoute()
+      if (route) {
+        return route.components.default
+      }
+    },
+    showDrawer() {
+      if (this.formatterArgs.drawerComponent) {
+        this.drawerComponent = this.formatterArgs.drawerComponent
+      } else {
+        this.drawerComponent = this.getRouteComponent()
+      }
+      const route = this.getDetailRoute()
+      if (route?.query?.tab) {
+        this.$cookie.set(route.name, route.query.tab, 1)
+        this.$route.query.tab = route.query.tab
+      }
+      const payload = {
+        action: 'detail',
+        row: this.row,
+        col: this.col,
+        id: route.params.id || this.row.id
+      }
+      this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
+        this.drawerTitle = this.getDrawerTitle(payload)
+        this.drawerVisible = true
+      })
+    },
     handleClick() {
       if (this.formatterArgs.beforeClick) {
         this.formatterArgs.beforeClick(this.callbackArgs)
       }
 
       if (this.formatterArgs.onClick) {
-        return this.formatterArgs.onClick({ ...this.callbackArgs, detailRoute: this.getDetailRoute() })
+        return this.formatterArgs.onClick(this.callbackArgs)
+      }
+
+      if (this.formatterArgs.drawer) {
+        return this.showDrawer()
       }
 
       if (this.preventClick) {
diff --git a/src/components/Table/TableFormatters/DrawerDetailFormatter.vue b/src/components/Table/TableFormatters/DrawerDetailFormatter.vue
deleted file mode 100644
index e2427ca1b..000000000
--- a/src/components/Table/TableFormatters/DrawerDetailFormatter.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-  <div>
-    <img v-if="icon" :src="icon" alt="icon" class="icon">
-    <el-link
-      :class="{ 'clicked': linkClicked }"
-      :disabled="disabled"
-      :type="col.type || 'info'"
-      class="detail"
-      @click="handleClick"
-    >
-      <slot>
-        {{ iTitle }}
-      </slot>
-    </el-link>
-    <Drawer
-      v-if="ddrawerVisible"
-      :component="drawerComponent"
-      :has-footer="false"
-      :title="drawerTitle"
-      :visible.sync="ddrawerVisible"
-      class="detail-drawer"
-    />
-  </div>
-</template>
-
-<script>
-import BaseFormatter from './base.vue'
-import Drawer from '@/components/Drawer/index.vue'
-
-export default {
-  name: 'DetailFormatter',
-  components: { Drawer },
-  extends: BaseFormatter,
-  props: {
-    formatterArgsDefault: {
-      type: Object,
-      default() {
-        return {
-          route: this.$route.name.replace('List', 'Detail'),
-          can: true,
-          getRoute: null,
-          routeQuery: null,
-          drawer: false,
-          onClick: null,
-          openInNewPage: false,
-          removeColorOnClick: false,
-          beforeClick: () => {
-          },
-          getTitle({ row, cellValue }) {
-            return cellValue != null ? cellValue : row.name
-          },
-          getDrawerTitle: null,
-          getIcon({ col, row, cellValue }) {
-            return null
-          }
-        }
-      }
-    },
-    preventClick: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    const formatterArgs = _.cloneDeep(_.merge(this.formatterArgsDefault, this.col.formatterArgs))
-    return {
-      drawerTitle: '',
-      linkClicked: false,
-      drawerComponent: '',
-      showTableDetailDrawer: false,
-      currentTemplate: null,
-      formatterArgs: formatterArgs,
-      ddrawerVisible: false
-    }
-  },
-  computed: {
-    iTitle() {
-      return this.formatterArgs.getTitle({
-        col: this.col,
-        row: this.row,
-        cellValue: this.cellValue,
-        index: this.index
-      })
-    },
-    disabled() {
-      let can = this.formatterArgs.can
-      if (typeof can === 'function') {
-        can = can({ col: this.col, row: this.row })
-      }
-      return !can
-    },
-    icon() {
-      return this.formatterArgs.getIcon({
-        col: this.col,
-        row: this.row,
-        cellValue: this.cellValue
-      })
-    },
-    callbackArgs() {
-      return {
-        col: this.col,
-        row: this.row,
-        cellValue: this.cellValue
-      }
-    }
-  },
-  watch: {
-    ddrawerVisible: {
-      immediate: true,
-      handler(val, oldVal) {
-        this.$log.debug('>>> DetailFormatter ddrawerVisible: ', val, oldVal, this)
-        if (!val) {
-          setTimeout(() => {
-            this.drawerComponent = ''
-          }, 300)
-        }
-      }
-    }
-  },
-  mounted() {
-    this.$log.debug('>>> DetailFormatter isVisible mounted: ', this.iTitle, this)
-  },
-  destroyed() {
-    this.$log.debug('>>> DetailFormatter isVisible destroyed: ', this.iTitle, this)
-  },
-  methods: {
-    getResource() {
-      const route = this.resolveRoute()
-      if (!route) {
-        return
-      }
-      const resource = route.meta.title || route.name
-      return resource.replace(' details', '').replace('详情', '')
-    },
-    getDrawerTitle() {
-      let title = this.cellValue || this.row.name
-
-      if (this.formatterArgs?.getDrawerTitle && typeof this.formatterArgs.getDrawerTitle === 'function') {
-        title = this.formatterArgs.getDrawerTitle({
-          col: this.col,
-          row: this.row,
-          cellValue: this.cellValue
-        })
-      }
-
-      const resource = this.getResource()
-
-      if (resource) {
-        title = `${resource}: ${title}`
-      }
-
-      return title
-    },
-    resolveRoute() {
-      const route = this.getDetailRoute()
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0]
-      }
-    },
-    getRouteComponent() {
-      const route = this.resolveRoute()
-      if (route) {
-        return route.components.default
-      }
-    },
-    showDrawer() {
-      if (this.formatterArgs.drawerComponent) {
-        this.drawerComponent = this.formatterArgs.drawerComponent
-      } else {
-        this.drawerComponent = this.getRouteComponent()
-      }
-      const route = this.getDetailRoute()
-      if (route?.query?.tab) {
-        this.$cookie.set(route.name, route.query.tab, 1)
-        this.$route.query.tab = route.query.tab
-      }
-      const payload = {
-        action: 'detail',
-        row: this.row,
-        col: this.col,
-        id: route.params.id || this.row.id
-      }
-      this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
-        this.drawerTitle = this.getDrawerTitle(payload)
-        this.ddrawerVisible = true
-      })
-    },
-    handleClick() {
-      if (this.formatterArgs.beforeClick) {
-        this.formatterArgs.beforeClick(this.callbackArgs)
-      }
-
-      if (this.formatterArgs.onClick) {
-        return this.formatterArgs.onClick(this.callbackArgs)
-      }
-
-      if (this.formatterArgs.drawer) {
-        return this.showDrawer()
-      }
-
-      if (this.preventClick) {
-        return
-      }
-
-      this.goDetail()
-    },
-    getDetailRoute() {
-      // const defaultRoute = this.$route.name.replace('List', 'Detail')
-      let route = this.formatterArgs.route
-      if (this.formatterArgs.getRoute && typeof this.formatterArgs.getRoute === 'function') {
-        route = this.formatterArgs.getRoute(this.callbackArgs)
-      }
-      if (!route) {
-        console.error('No route found')
-        return
-      }
-
-      let detailRoute = { replace: true }
-      if (typeof route === 'string') {
-        detailRoute.name = route
-        detailRoute.params = { id: this.row.id }
-      } else {
-        detailRoute = route
-      }
-
-      const routeQuery = this.formatterArgs.routeQuery
-      if (routeQuery && typeof routeQuery === 'object') {
-        detailRoute.query = this.formatterArgs.routeQuery
-      }
-      return detailRoute
-    },
-    goDetail() {
-      const detailRoute = this.getDetailRoute()
-
-      if (this.formatterArgs.openInNewPage) {
-        const { href } = this.$router.resolve(detailRoute)
-        this.linkClicked = this.formatterArgs.removeColorOnClick
-        return window.open(href, '_blank')
-      }
-
-      this.$router.push(detailRoute)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.detail {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 400;
-}
-
-.detail {
-  line-height: 25px;
-  font-size: 13px;
-}
-
-.clicked,
-.el-link.el-link--info.clicked {
-  color: inherit !important;
-}
-
-.icon {
-  width: 28px;
-  height: 28px;
-}
-
-::v-deep .go-back {
-  display: none;
-}
-
-.detail-drawer {
-  ::v-deep {
-    .el-drawer__header {
-      border-bottom: none;
-      padding-bottom: 1px;
-    }
-  }
-}
-
-</style>
diff --git a/src/views/acls/UserLoginACL/UserLoginACLTable.vue b/src/views/acls/UserLoginACL/UserLoginACLTable.vue
index 234d11869..ad03cc780 100644
--- a/src/views/acls/UserLoginACL/UserLoginACLTable.vue
+++ b/src/views/acls/UserLoginACL/UserLoginACLTable.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 
 export default {
   components: {
@@ -68,8 +68,12 @@ export default {
         createRoute: 'UserLoginACLCreate'
       }
     }
+  },
+  activated() {
+    setTimeout(() => {
+      this.$refs.listTable.reloadTable()
+    }, 300)
   }
-
 }
 </script>
 
diff --git a/src/views/users/User/UserDetail/UserLoginACL.vue b/src/views/users/User/UserDetail/UserLoginACL.vue
index d034266e1..5e3232d66 100644
--- a/src/views/users/User/UserDetail/UserLoginACL.vue
+++ b/src/views/users/User/UserDetail/UserLoginACL.vue
@@ -1,6 +1,6 @@
 <template>
   <TwoCol>
-    <UserLoginACLTable />
+    <UserLoginACLTable :url="url" />
   </TwoCol>
 </template>
 
diff --git a/src/views/users/User/UserDetail/index.vue b/src/views/users/User/UserDetail/index.vue
index 0cfb43f3b..e06fa9206 100644
--- a/src/views/users/User/UserDetail/index.vue
+++ b/src/views/users/User/UserDetail/index.vue
@@ -5,7 +5,9 @@
     v-bind="config"
     v-on="$listeners"
   >
-    <component :is="config.activeMenu" :object="user" />
+    <keep-alive>
+      <component :is="config.activeMenu" :object="user" />
+    </keep-alive>
   </GenericDetailPage>
 </template>
 
@@ -83,12 +85,6 @@ export default {
       'currentUserIsSuperAdmin'
     ])
   },
-  mounted() {
-    this.$log.debug('>>> UserDetail mounted: visible ', this)
-  },
-  destroyed() {
-    this.$log.debug('>>> UserDetail destroyed: visible ', this)
-  },
   methods: {
     handleTabClick(tab) {
       this.$log.debug('Current nav is: ', this.config.activeMenu)