From c1b60e6298b913edb6f7ab1dd5dc185cfc7a808f Mon Sep 17 00:00:00 2001
From: w940853815 <940853815@qq.com>
Date: Tue, 18 Feb 2025 18:57:20 +0800
Subject: [PATCH] perf: Session list with detail drawer

---
 src/views/sessions/SessionList/BaseList.vue | 44 ++++++++++++++-------
 src/views/users/User/UserDetail/index.vue   |  1 +
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/views/sessions/SessionList/BaseList.vue b/src/views/sessions/SessionList/BaseList.vue
index 2a7b790da..c56d9cb6a 100644
--- a/src/views/sessions/SessionList/BaseList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -1,9 +1,13 @@
 <template>
-  <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <ListTable
+    :detail-drawer="detailDrawer"
+    :header-actions="headerActions"
+    :table-config="tableConfig"
+  />
 </template>
 
 <script type="text/jsx">
-import ListTable from '@/components/Table/ListTable'
+import { DrawerListTable as ListTable } from '@/components'
 import { timeOffset } from '@/utils/time'
 import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
@@ -36,6 +40,7 @@ export default {
   },
   data() {
     return {
+      detailDrawer: () => import('../SessionDetail/index.vue'),
       tableConfig: {
         url: this.url,
         columnsExclude: ['terminal'],
@@ -45,20 +50,29 @@ export default {
             prop: 'id',
             label: this.$t('Number'),
             align: 'center',
-            formatter: function(row, column, cellValue, index) {
-              const label = index + 1
-              const route = { to: { name: 'SessionDetail', params: { id: row.id }}}
-              return <router-link {...{ attrs: route }} class='link'>{label}</router-link>
+            formatter: DetailFormatter,
+            formatterArgs: {
+              drawer: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => { return row.id },
+              getRoute: ({ row }) => {
+                return {
+                  name: 'SessionDetail',
+                  params: { id: row.id }
+                }
+              }
             }
           },
           user: {
             formatter: DetailFormatter,
             formatterArgs: {
+              drawer: true,
+              getTitle: ({ row }) => { return row.user },
               getRoute: ({ row }) => {
                 return {
                   name: 'UserDetail',
                   params: {
-                    id: row['user_id']
+                    id: row.user_id
                   }
                 }
               }
@@ -98,14 +112,14 @@ export default {
             label: this.$t('Target'),
             formatter: DetailFormatter,
             formatterArgs: {
-              getRoute: ({ row }) => {
-                return {
-                  name: 'AssetDetail',
-                  params: {
-                    id: row['asset_id']
-                  }
-                }
-              }
+              drawer: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => row.asset,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.asset_id },
+                query: { tab: 'Basic' }
+              })
             }
           },
           protocol: {
diff --git a/src/views/users/User/UserDetail/index.vue b/src/views/users/User/UserDetail/index.vue
index d67e9f838..cefeecacc 100644
--- a/src/views/users/User/UserDetail/index.vue
+++ b/src/views/users/User/UserDetail/index.vue
@@ -43,6 +43,7 @@ export default {
     return {
       user: { name: '', username: '', email: '', comment: '' },
       config: {
+        url: '/api/v1/users/users',
         activeMenu: 'UserInfo',
         actions: {
           canUpdate: () => {