From 24f30ab19855e57bcbc6215abbc1b98c5aad4809 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 27 Dec 2024 19:08:51 +0800
Subject: [PATCH] perf: update detail

---
 src/components/Cards/DetailCard/index.vue     | 104 +++++++++---------
 src/components/Cards/RelationCard/index.vue   |   2 +-
 src/components/Drawer/index.vue               |   5 +
 src/components/QuickActions/index.vue         |  46 ++++----
 .../AccountBackupDetail/AccountBackupInfo.vue |   2 +-
 .../AccountBackupExecutionInfo.vue            |   2 +-
 .../AccountChangeSecretAsset/index.vue        |   2 +-
 .../AccountChangeSecretExecutionInfo.vue      |   2 +-
 .../AccountChangeSecretInfo.vue               |   2 +-
 .../AccountDiscover/AccountDetail/info.vue    |   2 +-
 .../AccountDiscover/AccountDetail/more.vue    |   2 +-
 .../AccountDiscover/ExecutionDetail/info.vue  |   2 +-
 .../AccountDiscover/TaskDetail/Detail.vue     |   2 +-
 .../AccountPushDetail/AccountPushInfo.vue     |   2 +-
 .../AccountPushExecutionInfo.vue              |   2 +-
 .../VirtualAccount/VirtualDetail/Detail.vue   |   2 +-
 .../AssetLoginAclDetail/Detail.vue            |   2 +-
 .../CommandFilterAclDetail/Detail.vue         |   2 +-
 .../CommandGroupDetail/Detail.vue             |   2 +-
 .../ConnectMethodAclDetail/Detail.vue         |   2 +-
 .../acl/UserLoginACL/UserDetail/Detail.vue    |   2 +-
 .../Account/AccountDetail/AccountDetail.vue   |   2 +-
 .../StrategyDetail/StrategyDetail.vue         |   2 +-
 .../assets/Platform/PlatformDetail/Detail.vue |   2 +-
 .../audits/LoginLog/LoginLogDetail/Detail.vue |   2 +-
 .../OperateLog/OperateLogDetail/Detail.vue    |   2 +-
 .../ExecutionDetail/JobExecutionDetail.vue    |   2 +-
 .../Adhoc/AdhocDetail/AdhocDetail.vue         |   2 +-
 .../PlaybookDetail/PlaybookDetail.vue         |   2 +-
 .../ApplicationDetail/ServiceInfo.vue         |   2 +-
 .../AccountCheckDetail/AccountPushInfo.vue    |   2 +-
 .../AccountPushExecutionInfo.vue              |   2 +-
 .../AssetPermissionAccount.vue                |   2 +-
 .../AssetPermissionAsset.vue                  |   2 +-
 .../AssetPermissionDetail.vue                 |   2 +-
 .../AssetPermissionUser.vue                   |   2 +-
 src/views/profile/index.vue                   |   2 +-
 .../SessionDetail/SessionDetailInfo.vue       |   2 +-
 .../AppletHost/AppletHostDetail/Applets.vue   |   2 +-
 .../AppletHost/AppletHostDetail/Detail.vue    |   2 +-
 .../AppletHostDetail/Devployments.vue         |   2 +-
 src/views/settings/License.vue                |   2 +-
 .../OrganizationDetail/OrganizationDetail.vue |   2 +-
 .../users/Group/UserGroupDetail/GroupUser.vue |   2 +-
 src/views/users/Role/RoleDetail/RoleInfo.vue  |   4 +-
 src/views/users/Role/RoleDetail/RoleUsers.vue |   2 +-
 .../users/Role/RoleList/BaseRoleList.vue      |   7 ++
 src/views/users/User/UserDetail/UserInfo.vue  |  21 +++-
 48 files changed, 150 insertions(+), 121 deletions(-)

diff --git a/src/components/Cards/DetailCard/index.vue b/src/components/Cards/DetailCard/index.vue
index 66644aac0..805f76cdf 100644
--- a/src/components/Cards/DetailCard/index.vue
+++ b/src/components/Cards/DetailCard/index.vue
@@ -13,7 +13,6 @@
         </el-form-item>
       </span>
     </el-form>
-    <slot />
   </IBox>
 </template>
 
@@ -45,7 +44,7 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: '25%'
+      default: ''
     }
   },
   data() {
@@ -71,55 +70,60 @@ export default {
   padding: 20px 40px;
 }
 
-.el-form-item {
-  border-bottom: 1px dashed #EBEEF5;
-  padding: 1px 0;
-  margin-bottom: 0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &.array-item {
-    border-bottom: none;
-
-    ::v-deep .el-form-item__content {
-      border-bottom: 1px dashed #EBEEF5
-    }
-
-    ::v-deep .el-form-item__label:last-child {
-      border: 1px dashed #EBEEF5;
-    }
-  }
-
-  ::v-deep .el-form-item__label {
-    padding-right: 8%;
-    overflow: hidden;
-    color: var(--color-icon-primary);
-
-    span {
-      display: inline-block;
-      line-height: 1.5;
-    }
-  }
-
-  ::v-deep .el-form-item__content {
-    color: var(--color-text-primary);
-    font-size: 13px;
-    line-height: 40px;
-  }
-
-  ::v-deep .el-tag--mini {
-    margin-right: 3px;
-  }
-}
-
-.item-value span {
-  word-break: break-word;
-}
-
 .content {
   font-size: 13px;
-  line-height: 2.5;
+  line-height: 2;
+
+  ::v-deep .el-form-item {
+    //border-bottom: 1px dashed #EBEEF5;
+    padding: 1px 0;
+    margin-bottom: 0;
+    text-align: end;
+
+    &:last-child {
+      //border-bottom: none;
+    }
+
+    &.array-item {
+      border-bottom: none;
+
+      ::v-deep .el-form-item__content {
+        border-bottom: 1px dashed #EBEEF5
+      }
+
+      ::v-deep .el-form-item__label:last-child {
+        border: 1px dashed #EBEEF5;
+      }
+    }
+
+    .el-form-item__label {
+      //padding-right: 8%;
+      overflow: hidden;
+      color: var(--color-icon-primary);
+      font-size: 12px;
+      line-height: 1.4;
+      font-weight: 400;
+
+      span {
+        display: inline-block;
+        //line-height: 1.1;
+      }
+    }
+
+    .el-form-item__content {
+      color: var(--color-text-primary);
+      font-size: 13px;
+      //line-height: 1.3;
+      //padding-bottom: 10px;
+    }
+
+    ::v-deep .el-tag--mini {
+      margin-right: 3px;
+    }
+  }
+
+  .item-value span {
+    word-break: break-word;
+  }
 }
 </style>
diff --git a/src/components/Cards/RelationCard/index.vue b/src/components/Cards/RelationCard/index.vue
index 386d6fb62..d66096d74 100644
--- a/src/components/Cards/RelationCard/index.vue
+++ b/src/components/Cards/RelationCard/index.vue
@@ -341,7 +341,7 @@ b, strong {
 
 tr td {
   line-height: 1.42857;
-  padding: 8px;
+  padding: 8px 0;
   vertical-align: top;
 }
 
diff --git a/src/components/Drawer/index.vue b/src/components/Drawer/index.vue
index 4b75a7674..a81a96b17 100644
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -89,6 +89,11 @@ export default {
     margin-right: 30px;
     height: 100%;
 
+    // Detail 中
+    &.content {
+      margin-right: 0;
+    }
+
     &.el-form--label-top {
       .el-radio-group {
         .el-radio {
diff --git a/src/components/QuickActions/index.vue b/src/components/QuickActions/index.vue
index a1b74b502..6e6f6c52e 100644
--- a/src/components/QuickActions/index.vue
+++ b/src/components/QuickActions/index.vue
@@ -39,32 +39,32 @@ export default {
 </script>
 
 <style scoped>
-  .quick-actions ::v-deep table {
-    width: 100%;
-  }
+.quick-actions ::v-deep table {
+  width: 100%;
+}
 
-  .quick-actions ::v-deep tr > td {
-    line-height: 1.43;
-    padding: 8px;
-    vertical-align: top;
-    font-size: 13px;
-    width: 50%;
-  }
+.quick-actions ::v-deep tr > td {
+  line-height: 1.43;
+  padding: 8px 0;
+  vertical-align: top;
+  font-size: 13px;
+  width: 50%;
+}
 
-  .quick-actions ::v-deep tr > td > span:last-child {
-    float: right;
-  }
+.quick-actions ::v-deep tr > td > span:last-child {
+  float: right;
+}
 
-  .quick-actions ::v-deep button {
-    padding: 4px 5px;
-    font-size: 13px;
-    width: 65px;
+.quick-actions ::v-deep button {
+  padding: 4px 5px;
+  font-size: 13px;
+  width: 65px;
 
-    span {
-      overflow: hidden;
-      white-space: nowrap; /* 控制文本不换行 */
-      text-overflow: ellipsis;
-      display: block;
-    }
+  span {
+    overflow: hidden;
+    white-space: nowrap; /* 控制文本不换行 */
+    text-overflow: ellipsis;
+    display: block;
   }
+}
 </style>
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
index b6fef77f2..d45f040fd 100644
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
index 0e4b6b8fd..146868afb 100644
--- a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
index be3834fb9..af0356e87 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
@@ -7,7 +7,7 @@
         :table-config="tableConfig"
       />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
     </el-col>
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
index 2d848af63..1a0b0d33d 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
index 03c9b4073..ab1507cef 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/AccountDetail/info.vue b/src/views/accounts/AccountDiscover/AccountDetail/info.vue
index 52dc51bc8..43af278b6 100644
--- a/src/views/accounts/AccountDiscover/AccountDetail/info.vue
+++ b/src/views/accounts/AccountDiscover/AccountDetail/info.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/AccountDetail/more.vue b/src/views/accounts/AccountDiscover/AccountDetail/more.vue
index 9e30ecb41..a80df8b69 100644
--- a/src/views/accounts/AccountDiscover/AccountDetail/more.vue
+++ b/src/views/accounts/AccountDiscover/AccountDetail/more.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :object="detail" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue b/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue
index 950d34e54..de5dd88c3 100644
--- a/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue
+++ b/src/views/accounts/AccountDiscover/ExecutionDetail/info.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue b/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue
index 393350021..74ec9f7a9 100644
--- a/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue
+++ b/src/views/accounts/AccountDiscover/TaskDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
index b93bd5d65..a166b40f4 100644
--- a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
index dc4b0849c..9043fe6c3 100644
--- a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue b/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue
index 087204c42..1ca932b52 100644
--- a/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue
+++ b/src/views/accounts/VirtualAccount/VirtualDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :object="object" v-bind="detail" />
     </el-col>
   </el-row>
diff --git a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
index c188235ea..4499969b8 100644
--- a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
+++ b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
index 2bc8f2c81..cd660a9f9 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
index 6ca95799b..91c4548b8 100644
--- a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
index 9f8cfc40f..7c4b3a8ab 100644
--- a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/acl/UserLoginACL/UserDetail/Detail.vue b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
index d229fa932..0a185d93a 100644
--- a/src/views/acl/UserLoginACL/UserDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
index b55139086..bc69bd35d 100644
--- a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
+++ b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
@@ -5,7 +5,7 @@
         <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
         <AutoDetailCard :fields="detailFields" :object="object" :title="$tc('TaskDetail')" :url="url" />
       </el-col>
-      <el-col :md="20" :sm="24">
+      <el-col :md="20" :sm="24" class="detail-right-quick-actions">
         <QuickActions :actions="quickEditActions" type="primary" />
         <QuickActions :actions="quickExecuteActions" type="primary" />
         <RelationCard
diff --git a/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue b/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue
index 1779ef3ae..087027b1e 100644
--- a/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue
+++ b/src/views/assets/Cloud/Strategy/StrategyDetail/StrategyDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/assets/Platform/PlatformDetail/Detail.vue b/src/views/assets/Platform/PlatformDetail/Detail.vue
index 51bf2e4b5..37f2a5663 100644
--- a/src/views/assets/Platform/PlatformDetail/Detail.vue
+++ b/src/views/assets/Platform/PlatformDetail/Detail.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
       <IBox :title="$tc('Protocols')">
         <ProtocolSelector
diff --git a/src/views/audits/LoginLog/LoginLogDetail/Detail.vue b/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
index 7b9b70cd7..40ab267e7 100644
--- a/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
+++ b/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="20" :sm="24">
+      <el-col :md="20" :sm="24" class="detail-right-quick-actions">
         <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
     </el-row>
diff --git a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
index dd064552e..049427683 100644
--- a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
+++ b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
@@ -4,7 +4,7 @@
       <el-col :md="24" :sm="24">
         <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
-      <el-col :md="20" :sm="24">
+      <el-col :md="20" :sm="24" class="detail-right-quick-actions">
         <QuickActions
           v-if="object.id"
           :actions="quickActions"
diff --git a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
index 025cc0d31..4a66a8008 100644
--- a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
+++ b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
@@ -8,7 +8,7 @@
         :url="url"
       />
     </el-col>
-    <el-col v-if="hasSummary" :md="20" :sm="24">
+    <el-col v-if="hasSummary" :md="20" :sm="24" class="detail-right-quick-actions">
       <IBox
         v-if="object.summary.ok"
         :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})` "
diff --git a/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue b/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
index d906515f6..9ce867fd8 100644
--- a/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
+++ b/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue b/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
index f23778a42..39436c072 100644
--- a/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
+++ b/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
index fed5c0360..0226b1d9e 100644
--- a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
+++ b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
@@ -4,7 +4,7 @@
       <el-col :md="24" :sm="24">
         <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
-      <el-col :md="20" :sm="24">
+      <el-col :md="20" :sm="24" class="detail-right-quick-actions">
         <QuickActions :actions="quickActions" type="primary" />
       </el-col>
     </el-row>
diff --git a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
index c1dbc3f56..0cbdbba56 100644
--- a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
+++ b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue b/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue
index 9c8bfea72..89fc850a0 100644
--- a/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue
+++ b/src/views/pam/RiskDetect/AccountCheckExecutionDetail/AccountPushExecutionInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
index c0b2fd959..ff5d58bbc 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
@@ -13,7 +13,7 @@
         :url="url"
       />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <IBox :title="$tc('Account')" type="primary">
         <AccountFormatter
           :assets="assetIds"
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
index db580f2b7..503f377a9 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" class- />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
     </el-col>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
index f73ab0e4b..beb345c89 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
index c9e9cb0ac..9ca6e6bc1 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <RelationCard type="primary" v-bind="userRelationConfig" />
       <RelationCard style="margin-top: 15px" type="info" v-bind="groupRelationConfig" />
     </el-col>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 03e2f148b..d7eca0c18 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -5,7 +5,7 @@
         <el-col :md="24" :sm="24">
           <DetailCard :items="detailCardItems" />
         </el-col>
-        <el-col :md="20" :sm="24">
+        <el-col :md="20" :sm="24" class="detail-right-quick-actions">
           <QuickActions
             :actions="authQuickActions"
             :title="$tc('AuthSettings')"
diff --git a/src/views/sessions/SessionDetail/SessionDetailInfo.vue b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
index b9fbd33c7..8fee43dbf 100644
--- a/src/views/sessions/SessionDetail/SessionDetailInfo.vue
+++ b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <DetailCard v-if="object" :items="detailItems" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions v-if="object" :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
index abac6a195..619fde979 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
index ef48bce61..936656d33 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
@@ -5,7 +5,7 @@
       <AutoDetailCard v-bind="detailSpecInfoConfig" />
       <AutoDetailCard v-bind="detailInfoConfig" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
       <RelationCard
         ref="LabelRelation"
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
index ce0aaf654..e55952c54 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
diff --git a/src/views/settings/License.vue b/src/views/settings/License.vue
index 458231ed8..0a4c21714 100644
--- a/src/views/settings/License.vue
+++ b/src/views/settings/License.vue
@@ -8,7 +8,7 @@
         <el-col :md="24" :sm="24">
           <DetailCard :items="detailItems" :title="cardTitle" />
         </el-col>
-        <el-col :md="20" :sm="24">
+        <el-col :md="20" :sm="24" class="detail-right-quick-actions">
           <QuickActions :actions="quickActions" type="primary" />
         </el-col>
       </el-row>
diff --git a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
index a0d241c82..589a1dd28 100644
--- a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
+++ b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
@@ -3,7 +3,7 @@
     <el-col :md="24" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24" />
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions" />
   </el-row>
 </template>
 
diff --git a/src/views/users/Group/UserGroupDetail/GroupUser.vue b/src/views/users/Group/UserGroupDetail/GroupUser.vue
index 51f35e5f9..d6c10d866 100644
--- a/src/views/users/Group/UserGroupDetail/GroupUser.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupUser.vue
@@ -4,7 +4,7 @@
       <el-col :md="24" :sm="24">
         <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
-      <el-col :md="20" :sm="24">
+      <el-col :md="20" :sm="24" class="detail-right-quick-actions">
         <RelationCard :key="relationKey" v-bind="relationConfig" @addSuccess="addSuccess" />
       </el-col>
     </el-row>
diff --git a/src/views/users/Role/RoleDetail/RoleInfo.vue b/src/views/users/Role/RoleDetail/RoleInfo.vue
index 0c3a99f12..331f1fd7b 100644
--- a/src/views/users/Role/RoleDetail/RoleInfo.vue
+++ b/src/views/users/Role/RoleDetail/RoleInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
+    <el-col :md="20" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
-    <el-col :md="10" :sm="24">
+    <el-col :md="20" :sm="24">
       <IBox :title="$tc('Permissions')">
         <div style="height: 10%">
           <el-button
diff --git a/src/views/users/Role/RoleDetail/RoleUsers.vue b/src/views/users/Role/RoleDetail/RoleUsers.vue
index c171e3b6e..8181c75b4 100644
--- a/src/views/users/Role/RoleDetail/RoleUsers.vue
+++ b/src/views/users/Role/RoleDetail/RoleUsers.vue
@@ -7,7 +7,7 @@
         :table-config="tableConfig"
       />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="20" :sm="24" class="detail-right-quick-actions">
       <RelationCard v-if="!loading" ref="userRelation" v-bind="relationConfig" />
     </el-col>
   </el-row>
diff --git a/src/views/users/Role/RoleList/BaseRoleList.vue b/src/views/users/Role/RoleList/BaseRoleList.vue
index d4b308ee4..9b85f355c 100644
--- a/src/views/users/Role/RoleList/BaseRoleList.vue
+++ b/src/views/users/Role/RoleList/BaseRoleList.vue
@@ -52,6 +52,13 @@ export default {
                   }
                 }
               },
+              beforeClick: ({ row }) => {
+                vm.$router.push({
+                  query: {
+                    _scope: row.scope.value
+                  }
+                })
+              },
               drawer: true
             }
           },
diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue
index 67971a841..70fa921bf 100644
--- a/src/views/users/User/UserDetail/UserInfo.vue
+++ b/src/views/users/User/UserDetail/UserInfo.vue
@@ -1,11 +1,11 @@
 <template>
   <el-row :gutter="20">
-    <el-col :md="24" :sm="24">
+    <el-col :md="14" :sm="24">
       <AutoDetailCard :fields="detailFields" :formatters="detailFormatters" :object="object" :url="url" />
     </el-col>
-    <el-col :md="20" :sm="24">
+    <el-col :md="10" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
-      <RelationCard style="margin-top: 15px" type="info" v-bind="relationConfig" />
+      <RelationCard type="info" v-bind="relationConfig" />
     </el-col>
   </el-row>
 </template>
@@ -262,10 +262,23 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .mfa-setting ::v-deep .el-slider__runway {
   margin-top: 0;
   margin-bottom: 0;
 }
 
+.detail-right-quick-actions {
+  display: flex;
+
+  & > div {
+    margin-right: 20px;
+    width: 350px;
+  }
+
+  & > div:last-child {
+    margin-right: 0; /* 清除最后一个元素的多余间距 */
+  }
+}
+
 </style>