diff --git a/src/components/Apps/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
index a53f504f0..9be18b8d2 100644
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -2,6 +2,7 @@
   <div>
     <ListTable
       ref="ListTable"
+      :detail-drawer="detailDrawer"
       :header-actions="headerActions"
       :quick-filters="quickFilters"
       :table-config="tableConfig"
@@ -53,7 +54,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import ListTable from '@/components/Table/DrawerListTable/index.vue'
 import { ActionsFormatter, PlatformFormatter, SecretViewerFormatter } from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
@@ -144,6 +145,7 @@ export default {
       showResultDialog: false,
       showAddDialog: false,
       showAddTemplateDialog: false,
+      detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
       createAccountResults: [],
       accountCreateUpdateTitle: this.$t('AddAccount'),
       accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
@@ -291,17 +293,20 @@ export default {
         columnsMeta: {
           name: {
             width: '120px',
-            formatter: (row) => {
-              const to = {
-                name: 'AssetAccountDetail',
-                params: { id: row.id }
-              }
-              if (vm.$hasPerm('accounts.view_account')) {
-                return <router-link to={to}>{row.name}</router-link>
-              } else {
-                return <span>{row.name}</span>
-              }
+            formatterArgs: {
+              can: () => vm.$hasPerm('accounts.view_account')
             }
+            // formatter: (row) => {
+            //   const to = {
+            //     name: 'AssetAccountDetail',
+            //     params: { id: row.id }
+            //   }
+            //   if (vm.$hasPerm('accounts.view_account')) {
+            //     return <routerlink to={to}>{row.name}</routerlink>
+            //   } else {
+            //     return <span>{row.name}</span>
+            //   }
+            // }
           },
           secret: {
             formatter: SecretViewerFormatter,
diff --git a/src/components/Drawer/index.vue b/src/components/Drawer/index.vue
index 721e4601e..4cf0c4e6b 100644
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -31,7 +31,7 @@ export default {
     },
     size: {
       type: String,
-      default: '800px'
+      default: '768px'
     },
     component: {
       type: [String, Function],
@@ -70,10 +70,6 @@ export default {
     handleClose(done) {
       this.$emit('close-drawer')
       done()
-    },
-    cancelForm() {
-      this.loading = false
-      this.dialog = false
     }
   }
 }
@@ -105,7 +101,7 @@ export default {
         //justify-content: flex-start;
         //margin-left: 20px;
         height: 100%;
-        margin-right: 10px;
+        //margin-right: 10px;
 
         .el-form-item {
           //margin: 5px 0 5px 0;
diff --git a/src/components/Table/DrawerListTable/PageDrawer.vue b/src/components/Table/DrawerListTable/PageDrawer.vue
index a10392389..66876162a 100644
--- a/src/components/Table/DrawerListTable/PageDrawer.vue
+++ b/src/components/Table/DrawerListTable/PageDrawer.vue
@@ -51,7 +51,7 @@ export default {
   computed: {
     drawerSize() {
       const width = window.innerWidth
-      if (width >= 768) return '800px'
+      if (width >= 800) return '767px'
       return '90%'
     },
     iVisible: {
@@ -77,8 +77,6 @@ export default {
 
   ::v-deep {
     .el-card.ibox {
-      border: none;
-
       .el-card__body {
         padding-top: 10px;
         padding-bottom: 20px;
diff --git a/src/components/Table/DrawerListTable/index.vue b/src/components/Table/DrawerListTable/index.vue
index 5f8227a7d..4efe45627 100644
--- a/src/components/Table/DrawerListTable/index.vue
+++ b/src/components/Table/DrawerListTable/index.vue
@@ -193,7 +193,7 @@ export default {
     },
     onDetail({ row, cellValue }) {
       this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'detail', row: row, cellValue: cellValue
+        action: 'detail', row: row, cellValue: cellValue, id: row.id
       }).then(() => {
         this.showDrawer('detail')
       })
diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 07abcc2d9..ac05f0d91 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -12,14 +12,21 @@
         {{ iTitle }}
       </slot>
     </el-link>
+    <Drawer
+      v-if="formatterArgs.drawer && drawerVisible"
+      :component="drawerComponent"
+      :visible.sync="drawerVisible"
+    />
   </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: {
@@ -33,6 +40,7 @@ export default {
           onClick: null,
           openInNewPage: false,
           removeColorOnClick: false,
+          drawer: false,
           getTitle({ col, row, cellValue }) {
             return cellValue
           },
@@ -50,7 +58,9 @@ export default {
       showTableDetailDrawer: false,
       drawerTitle: '',
       currentTemplate: null,
-      formatterArgs: formatterArgs
+      formatterArgs: formatterArgs,
+      drawerComponent: '',
+      drawerVisible: false
     }
   },
   computed: {
@@ -77,17 +87,53 @@ export default {
     }
   },
   methods: {
+    getRouteComponent() {
+      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].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.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'detail',
+        row: this.row,
+        col: this.col,
+        id: route.params.id
+      }).then(() => {
+        this.drawerVisible = true
+      })
+    },
     handleClick() {
-      console.log('Handle click: ', this.formatterArgs.onClick)
       if (this.formatterArgs.onClick) {
         this.formatterArgs.onClick({
           col: this.col,
           row: this.row,
           cellValue: this.cellValue
         })
-      } else {
-        this.goDetail()
+        return
       }
+      if (this.formatterArgs.drawer) {
+        this.showDrawer()
+        return
+      }
+      this.goDetail()
     },
     getDetailRoute() {
       // const defaultRoute = this.$route.name.replace('List', 'Detail')
diff --git a/src/layout/components/GenericDetailPage/index.vue b/src/layout/components/GenericDetailPage/index.vue
index 681ac86ee..5023abe6f 100644
--- a/src/layout/components/GenericDetailPage/index.vue
+++ b/src/layout/components/GenericDetailPage/index.vue
@@ -118,7 +118,7 @@ export default {
     return {
       defaultActions,
       loading: true,
-      drawer: '',
+      drawer: false,
       action: '',
       actionId: '',
       validActions: Object.assign(defaultActions, this.actions)
@@ -152,6 +152,9 @@ export default {
       ]
     },
     iTitle() {
+      if (this.drawer) {
+        return 'null'
+      }
       return this.title || this.getTitle(this.object)
     },
     iActiveMenu: {
@@ -186,10 +189,10 @@ export default {
   methods: {
     async checkDrawer() {
       const drawActionMeta = await this.$store.dispatch('common/getDrawerActionMeta')
-      if (drawActionMeta) {
+      if (drawActionMeta && drawActionMeta.action) {
         this.drawer = true
         this.row = drawActionMeta.row
-        this.actionId = this.row?.id
+        this.actionId = drawActionMeta.id
       }
     },
     getDetailUrl() {
diff --git a/src/layout/components/GenericListDrawerPage/PageDrawer.vue b/src/layout/components/GenericListDrawerPage/PageDrawer.vue
index 25afe94b7..ec55aae22 100644
--- a/src/layout/components/GenericListDrawerPage/PageDrawer.vue
+++ b/src/layout/components/GenericListDrawerPage/PageDrawer.vue
@@ -54,7 +54,7 @@ export default {
   computed: {
     drawerSize() {
       const width = window.innerWidth
-      if (width >= 768) return '800px'
+      if (width >= 900) return '767px'
       return '90%'
     },
     iVisible: {
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index bb6549c1b..3f5f03fd3 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -85,6 +85,9 @@ export default {
   computed: {
     ...mapGetters(['inDrawer']),
     iTitle() {
+      if (this.title === 'null') {
+        return
+      }
       let title = this.title || this.$route.meta.title
       if (!title) {
         title = this.$t('NoTitle')
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index b119c2a7f..96a386cf2 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -137,14 +137,14 @@ export default {
     handleTabClick(tab) {
       this.$emit('tab-click', tab)
       this.iActiveMenu = tab.name
-      this.$cookie.set(this.$route.path, tab.name, 1)
+      this.$cookie.set(this.$route.name, tab.name, 1)
     },
     getPropActiveTab() {
       let activeTab = ''
 
       const preActiveTabs = [
         this.$route.query['tab'],
-        this.$cookie.get(this.$route.path),
+        this.$cookie.get(this.$route.name),
         this.activeMenu
       ]
 
diff --git a/src/store/modules/assets.js b/src/store/modules/assets.js
index 167aad88e..8419712a4 100644
--- a/src/store/modules/assets.js
+++ b/src/store/modules/assets.js
@@ -62,7 +62,7 @@ const actions = {
     })
   },
   getRecentPlatforms({ commit, dispatch, state }) {
-    const recentPlatformIds = JSON.parse(localStorage.getItem('RecentPlatforms')) || []
+    const recentPlatformIds = JSON.parse(localStorage.getItem('recentPlatforms')) || []
     return new Promise(resolve => {
       dispatch('getPlatforms').then(platforms => {
         resolve(platforms.filter(p => recentPlatformIds.includes(p.id)))
diff --git a/src/views/accounts/Account/AccountDetail/Detail.vue b/src/views/accounts/Account/AccountDetail/Detail.vue
index adcebb54b..cbc8cace3 100644
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -23,10 +23,10 @@
     </el-row>
 
     <el-drawer
-      size="50%"
-      :with-header="false"
       :append-to-body="true"
       :visible.sync="pamDrawerShow"
+      :with-header="false"
+      size="50%"
     >
       <component :is="drawerRefName" />
     </el-drawer>
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
index 0aec1fa4d..b518e30a8 100644
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
@@ -104,8 +104,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
index 264d8b6dd..443665f31 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
@@ -86,8 +86,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/acl/UserLoginACL/UserDetail/Detail.vue b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
index 02339a1f9..072808f4d 100644
--- a/src/views/acl/UserLoginACL/UserDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -22,7 +22,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -90,8 +91,7 @@ export default {
       ]
     }
   },
-  computed: {
-  },
+  computed: {},
   created() {
     const arrs = this.object.rules.time_period
     for (let i = 0; i < arrs.length; i++) {
diff --git a/src/views/assets/Asset/AssetDetail/Detail.vue b/src/views/assets/Asset/AssetDetail/Detail.vue
index 8eafdb349..39dad6396 100644
--- a/src/views/assets/Asset/AssetDetail/Detail.vue
+++ b/src/views/assets/Asset/AssetDetail/Detail.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="15" :sm="24" class="auto-detail-card">
+    <el-col :md="24" :sm="24" class="auto-detail-card">
       <AutoDetailCard v-bind="basicInfoConfig" />
       <AutoDetailCard v-if="isShowSpecInfo" v-bind="specInfoConfig" />
       <AutoDetailCard v-bind="customInfoConfig" />
       <AutoDetailCard v-bind="gatheredInfoConfig" />
     </el-col>
-    <el-col :md="9" :sm="24" class="quick-actions">
+    <el-col :md="24" :sm="24" class="quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
       <RelationCard
         ref="NodeRelation"
diff --git a/src/views/assets/Asset/AssetDetail/PermUser.vue b/src/views/assets/Asset/AssetDetail/PermUser.vue
index bec295387..12e07fa83 100644
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -29,7 +29,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
diff --git a/src/views/assets/Asset/AssetList/components/PlatformDialog.vue b/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
index e44e78ad3..cce2a1d72 100644
--- a/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
+++ b/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
@@ -144,7 +144,7 @@ export default {
         recentPlatformIds.pop()
       }
       this.recentPlatformIds = recentPlatformIds
-      localStorage.setItem('RecentPlatforms', JSON.stringify(recentPlatformIds))
+      localStorage.setItem('recentPlatforms', JSON.stringify(recentPlatformIds))
     },
     handleSelect(platform) {
       this.addToRecentPlatforms(platform)
diff --git a/src/views/assets/Domain/DomainDetail/Detail.vue b/src/views/assets/Domain/DomainDetail/Detail.vue
index 2a267d9d1..3032a03f1 100644
--- a/src/views/assets/Domain/DomainDetail/Detail.vue
+++ b/src/views/assets/Domain/DomainDetail/Detail.vue
@@ -17,7 +17,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -33,8 +34,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
index 100768baa..a58cc0173 100644
--- a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
+++ b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
@@ -32,7 +32,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -62,8 +63,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
index ee92ff471..4a0e80f4b 100644
--- a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
+++ b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
@@ -3,9 +3,9 @@
     <el-col :md="15" :sm="24">
       <AutoDetailCard
         :excludes="excludes"
+        :fields="detailFields"
         :object="object"
         :url="url"
-        :fields="detailFields"
       />
     </el-col>
     <el-col v-if="hasSummary" :md="9" :sm="24">
diff --git a/src/views/pam/Account/AccountList.vue b/src/views/pam/Account/AccountList.vue
index 1768564c3..f8542453c 100644
--- a/src/views/pam/Account/AccountList.vue
+++ b/src/views/pam/Account/AccountList.vue
@@ -22,13 +22,13 @@ export default {
           asset: {
             formatter: DetailFormatter,
             formatterArgs: {
-              isPam: true,
+              drawer: true,
               can: this.$hasPerm('assets.view_asset'),
               getTitle: ({ row }) => row.asset.name,
               getRoute: ({ row }) => ({
                 name: 'AssetDetail',
                 params: { id: row.asset.id },
-                query: { type: 'pam', tab: 'Basic' }
+                query: { tab: 'Basic' }
               })
             }
           },
diff --git a/src/views/pam/Account/AssetList.vue b/src/views/pam/Account/AssetList.vue
index ade1c72d5..72f789080 100644
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -5,8 +5,6 @@
 <script>
 import BaseList from '@/views/assets/Asset/AssetList/components/BaseList'
 
-import { DetailFormatter } from '@/components/Table/TableFormatters'
-
 export default {
   components: {
     BaseList
@@ -21,32 +19,7 @@ export default {
         category: 'all'
       },
       tableConfig: {
-        columnsExclude: ['date_verified'],
-        columnsMeta: {
-          name: {
-            formatterArgs: {
-              can: true,
-              getRoute: ({ row }) => ({
-                name: 'AssetDetail',
-                params: { id: row.id },
-                query: { type: 'pam' }
-              })
-            },
-            formatter: DetailFormatter
-          },
-          accounts_amount: {
-            formatterArgs: {
-              can: true,
-              getTitle: ({ row }) => row.accounts_amount,
-              getRoute: ({ row }) => ({
-                name: 'AssetDetail',
-                params: { id: row.id },
-                query: { type: 'pam', tab: 'Account' }
-              })
-            },
-            formatter: DetailFormatter
-          }
-        }
+        columnsExclude: ['date_verified']
       }
     }
   }
diff --git a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
index 9d6763dcf..5c7a1b62e 100644
--- a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
+++ b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
@@ -61,7 +61,6 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
diff --git a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
index b8eb9ed32..81775516a 100644
--- a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
+++ b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
@@ -86,8 +86,7 @@ export default {
       ]
     }
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>
 
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
index 1a8358c13..ccc745046 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
@@ -34,7 +34,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -174,12 +175,10 @@ export default {
       }
     }
   },
-  computed: {
-  },
+  computed: {},
   mounted() {
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>