perf: 修改 col 宽度

2026-01-15 14:24:39 +00:00 · 2024-12-26 19:09:05 +08:00
parent 4cfb1a6f37
commit a2db27163e
58 changed files with 139 additions and 139 deletions
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="16" :sm="24" class="resource-activity">
+      <el-col :md="20" :sm="24" class="resource-activity">
        <IBox :title="title" class="block" v-bind="$attrs">
          <el-timeline>
            <el-timeline-item
--- a/src/components/Col/index.vue
+++ b/src/components/Col/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-col />
+</template>
+
+<script>
+export default {
+  name: 'Col',
+  props: {
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object],
+    xl: [Number, Object]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <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 :object="object" v-bind="detail" />
      </el-col>
-      <el-col :md="9" :sm="24" class="quick-actions">
+      <el-col :md="20" :sm="24" class="quick-actions">
        <QuickActions :actions="quickActions" type="primary" />
        <ViewSecret
          v-if="showViewSecretDialog"
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
@@ -9,20 +9,18 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import AccountBackupInfo from './AccountBackupInfo.vue'
-import AccountBackupExecutionList
-from '@/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue'

 export default {
  name: 'AccountBackupDetail',
  components: {
    GenericDetailPage,
-    AccountBackupInfo,
-    AccountBackupExecutionList
+    AccountBackupInfo
  },
  data() {
    return {
      plan: { name: '', comment: '' },
      config: {
+        url: `/api/v1/accounts/account-backup-plans/`,
        activeMenu: 'AccountBackupInfo',
        submenu: [
          {
@@ -31,8 +29,7 @@ export default {
          }
        ],
        actions: {
-          detailApiUrl: `/api/v1/accounts/account-backup-plans/${this.$route.params.id}/`,
-          deleteApiUrl: `/api/v1/accounts/account-backup-plans/${this.$route.params.id}/`,
+          detailApiUrl: `/api/v1/accounts/account-backup-plans/`,
          deleteSuccessRoute: 'AccountBackupList'
        }
      }
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -66,8 +66,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- a/src/views/accounts/AccountBackup/AccountBackupList.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupList.vue
@@ -1,5 +1,10 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <GenericListTable
+    :create-drawer="createDrawer"
+    :detail-drawer="detailDrawer"
+    :header-actions="headerActions"
+    :table-config="tableConfig"
+  />
 </template>

 <script>
@@ -16,6 +21,8 @@ export default {
    const vm = this
    return {
      drawerTitle: '',
+      createDrawer: () => import('@/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue'),
+      detailDrawer: () => import('@/views/accounts/AccountBackup/AccountBackupDetail/index.vue'),
      showTableUpdateDrawer: false,
      currentTemplate: null,
      tableConfig: {
@@ -44,7 +51,8 @@ export default {
                name: 'AccountBackupDetail',
                params: { id: row.id },
                query: { type: 'pam' }
-              })
+              }),
+              drawer: true
            }
          },
          types: {
@@ -75,16 +83,6 @@ export default {
              onClone: ({ row }) => {
                vm.$router.push({ name: 'AccountBackupCreate', query: { clone_from: row.id }})
              },
-              onUpdate: ({ row }) => {
-                this.$route.params.id = row.id
-
-                // 解决表单详情中的跳转
-                this.$route.query.type = 'pam'
-
-                this.currentTemplate = 'AccountBackupUpdate'
-                this.drawerTitle = this.$t('AccountBackupUpdate')
-                this.showTableUpdateDrawer = true
-              },
              extraActions: [
                {
                  title: vm.$t('Execute'),
@@ -111,17 +109,7 @@ export default {
      headerActions: {
        hasRefresh: true,
        hasExport: false,
-        hasImport: false,
-        createRoute: () => {
-          return {
-            name: 'AccountBackupCreate'
-          }
-        },
-        onCreate: () => {
-          this.currentTemplate = 'AccountBackupCreate'
-          this.drawerTitle = this.$t('AccountBackupCreate')
-          this.showTableUpdateDrawer = true
-        }
+        hasImport: false
      }
    }
  }
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
@@ -1,13 +1,13 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <GenericListTable
        ref="listTable"
        :header-actions="headerActions"
        :table-config="tableConfig"
      />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
      <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
    </el-col>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -50,8 +50,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :object="detail" :url="url" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
@@ -8,10 +8,10 @@
      </el-col>
    </el-row>
    <el-row :gutter="20">
-      <el-col :md="15" :sm="24" class="generic-list-table">
+      <el-col :md="24" :sm="24" class="generic-list-table">
        <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
      </el-col>
-      <el-col :md="9" :sm="24" class="quick-actions">
+      <el-col :md="20" :sm="24" class="quick-actions">
        <QuickActions :actions="quickActions" type="primary" />
      </el-col>
      <ViewSecret
--- a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
@@ -1,9 +1,9 @@
 <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 :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24" class="quick-actions">
+    <el-col :md="20" :sm="24" class="quick-actions">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :object="object" v-bind="detail" />
    </el-col>
  </el-row>
@@ -17,7 +17,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -38,8 +38,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -17,7 +17,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
@@ -41,8 +42,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -17,7 +17,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
@@ -25,8 +26,7 @@ export default {
      url: `/api/v1/acls/command-groups/${this.object.id}/`
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -38,8 +38,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- a/src/views/acl/UserLoginACL/UserDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- a/src/views/assets/Asset/AssetDetail/Account.vue
+++ b/src/views/assets/Asset/AssetDetail/Account.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <el-row :gutter="24">
-      <el-col :md="15" :sm="24" class="generic-list-table">
+      <el-col :md="24" :sm="24" class="generic-list-table">
        <AccountListTable
          ref="ListTable"
          :asset="object"
@@ -21,7 +21,7 @@
          @onConfirm="onConfirm"
        />
      </el-col>
-      <el-col :md="9" :sm="24" class="quick-actions">
+      <el-col :md="20" :sm="24" class="quick-actions">
        <QuickActions :actions="quickActions" :title="title" type="primary" />
      </el-col>
    </el-row>
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="15" :sm="24" class="list-table">
+      <el-col :md="24" :sm="24" class="list-table">
        <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
      </el-col>
-      <el-col :md="9" :sm="24" class="perm-user-group-card">
+      <el-col :md="20" :sm="24" class="perm-user-group-card">
        <PermUserGroupCard v-bind="UserGroupCardConfig" />
      </el-col>
    </el-row>
--- a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
+++ b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
@@ -1,11 +1,11 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
        <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
        <AutoDetailCard :fields="detailFields" :object="object" :title="$tc('TaskDetail')" :url="url" />
      </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
        <QuickActions :actions="quickEditActions" type="primary" />
        <QuickActions :actions="quickExecuteActions" type="primary" />
        <RelationCard
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- a/src/views/assets/Domain/DomainDetail/Detail.vue
+++ b/src/views/assets/Domain/DomainDetail/Detail.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- a/src/views/assets/Platform/PlatformDetail/Detail.vue
+++ b/src/views/assets/Platform/PlatformDetail/Detail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
      <IBox :title="$tc('Protocols')">
        <ProtocolSelector
--- 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="16" :sm="24">
+      <el-col :md="20" :sm="24">
        <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
      </el-col>
    </el-row>
@@ -19,7 +19,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
@@ -30,8 +31,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
+++ b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
        <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
      </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
        <QuickActions
          v-if="object.id"
          :actions="quickActions"
--- a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
+++ b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard
        :excludes="excludes"
        :fields="detailFields"
@@ -8,7 +8,7 @@
        :url="url"
      />
    </el-col>
-    <el-col v-if="hasSummary" :md="9" :sm="24">
+    <el-col v-if="hasSummary" :md="20" :sm="24">
      <IBox
        v-if="object.summary.ok"
        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})` "
--- a/src/views/ops/Job/JobDetail/JobDetail.vue
+++ b/src/views/ops/Job/JobDetail/JobDetail.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
    </el-col>
  </el-row>
--- a/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
+++ b/src/views/pam/Integration/ApplicationDetail/ServiceInfo.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
        <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
      </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
        <QuickActions :actions="quickActions" type="primary" />
      </el-col>
    </el-row>
--- a/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
+++ b/src/views/pam/RiskDetect/AccountCheckDetail/AccountPushInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- 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="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -45,8 +45,7 @@ export default {
      ]
    }
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>

--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AccountListTable
        ref="ListTable"
        :asset="object"
@@ -13,7 +13,7 @@
        :url="url"
      />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <IBox :title="$tc('Account')" type="primary">
        <AccountFormatter
          :assets="assetIds"
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" class- />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
      <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
    </el-col>
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <RelationCard type="primary" v-bind="userRelationConfig" />
      <RelationCard style="margin-top: 15px" type="info" v-bind="groupRelationConfig" />
    </el-col>
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -2,10 +2,10 @@
  <Page v-bind="$attrs">
    <div>
      <el-row :gutter="20">
-        <el-col :md="15" :sm="24">
+        <el-col :md="24" :sm="24">
          <DetailCard :items="detailCardItems" />
        </el-col>
-        <el-col :md="9" :sm="24">
+        <el-col :md="20" :sm="24">
          <QuickActions
            :actions="authQuickActions"
            :title="$tc('AuthSettings')"
--- a/src/views/sessions/SessionDetail/SessionDetailInfo.vue
+++ b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <DetailCard v-if="object" :items="detailItems" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions v-if="object" :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- a/src/views/settings/Applet/AppProvider/AppProviderDetail/Apps.vue
+++ b/src/views/settings/Applet/AppProvider/AppProviderDetail/Apps.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <ListTable :header-actions="headerConfig" :table-config="config" />
    </el-col>
  </el-row>
--- a/src/views/settings/Applet/AppProvider/AppProviderDetail/Containers.vue
+++ b/src/views/settings/Applet/AppProvider/AppProviderDetail/Containers.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <ListTable :header-actions="headerConfig" :table-config="config" />
    </el-col>
  </el-row>
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <ListTable :header-actions="headerConfig" :table-config="config" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
@@ -1,11 +1,11 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard v-bind="detailBasicConfig" />
      <AutoDetailCard v-bind="detailSpecInfoConfig" />
      <AutoDetailCard v-bind="detailInfoConfig" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
      <RelationCard
        ref="LabelRelation"
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Devployments.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <ListTable :header-actions="headerConfig" :table-config="config" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
    </el-col>
  </el-row>
--- a/src/views/settings/License.vue
+++ b/src/views/settings/License.vue
@@ -5,10 +5,10 @@
        {{ this.$t('ImportLicenseTip') }}
      </el-alert>
      <el-row :gutter="20">
-        <el-col :md="15" :sm="24">
+        <el-col :md="24" :sm="24">
          <DetailCard :items="detailItems" :title="cardTitle" />
        </el-col>
-        <el-col :md="9" :sm="24">
+        <el-col :md="20" :sm="24">
          <QuickActions :actions="quickActions" type="primary" />
        </el-col>
      </el-row>
--- a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
+++ b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24" />
+    <el-col :md="20" :sm="24" />
  </el-row>
 </template>

--- a/src/views/settings/Task/TaskDetail/TaskDetail.vue
+++ b/src/views/settings/Task/TaskDetail/TaskDetail.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <DetailCard :items="detailCardItems" :title="cardTitle" />
    </el-col>
  </el-row>
--- a/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
+++ b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="16" :sm="24">
+      <el-col :md="20" :sm="24">
        <AutoDetailCard :object="object" :url="url" />
      </el-col>
    </el-row>
@@ -19,7 +19,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
--- a/src/views/users/Group/UserGroupDetail/GroupInfo.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
@@ -1,6 +1,6 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="16" :sm="24">
+    <el-col :md="20" :sm="24">
      <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
    </el-col>
  </el-row>
@@ -26,16 +26,14 @@ export default {
      excludes: ['users']
    }
  },
-  computed: {
-  },
+  computed: {},
  watch: {
    group(iNew, iOld) {
      this.$log.debug('Group has changed')
      this.relationConfig.hasObjectsId = iNew.users
    }
  },
-  methods: {
-  }
+  methods: {}
 }
 </script>

--- a/src/views/users/Group/UserGroupDetail/GroupUser.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupUser.vue
@@ -1,10 +1,10 @@
 <template>
  <div>
    <el-row :gutter="20">
-      <el-col :md="15" :sm="24">
+      <el-col :md="24" :sm="24">
        <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
      </el-col>
-      <el-col :md="9" :sm="24">
+      <el-col :md="20" :sm="24">
        <RelationCard :key="relationKey" v-bind="relationConfig" @addSuccess="addSuccess" />
      </el-col>
    </el-row>
--- a/src/views/users/Role/RoleDetail/RoleUsers.vue
+++ b/src/views/users/Role/RoleDetail/RoleUsers.vue
@@ -1,13 +1,13 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <ListTable
        ref="ListTable"
        :header-actions="headerActions"
        :table-config="tableConfig"
      />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <RelationCard v-if="!loading" ref="userRelation" v-bind="relationConfig" />
    </el-col>
  </el-row>
--- a/src/views/users/User/UserDetail/UserInfo.vue
+++ b/src/views/users/User/UserDetail/UserInfo.vue
@@ -1,9 +1,9 @@
 <template>
  <el-row :gutter="20">
-    <el-col :md="15" :sm="24">
+    <el-col :md="24" :sm="24">
      <AutoDetailCard :fields="detailFields" :formatters="detailFormatters" :object="object" :url="url" />
    </el-col>
-    <el-col :md="9" :sm="24">
+    <el-col :md="20" :sm="24">
      <QuickActions :actions="quickActions" type="primary" />
      <RelationCard style="margin-top: 15px" type="info" v-bind="relationConfig" />
    </el-col>