From b2abee724daa2fbd889c8ea42524bb20502b3e52 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 13 Feb 2025 15:55:20 +0800
Subject: [PATCH] perf: update detail card

---
 src/components/Cards/DetailCard/index.vue     | 24 ++++++++++++-------
 src/components/Drawer/index.vue               |  4 ++++
 .../Table/TableFormatters/DetailFormatter.vue |  2 +-
 .../AssetList/components/PlatformDialog.vue   |  4 ++++
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/Cards/DetailCard/index.vue b/src/components/Cards/DetailCard/index.vue
index c64dc495b..178bdea3a 100644
--- a/src/components/Cards/DetailCard/index.vue
+++ b/src/components/Cards/DetailCard/index.vue
@@ -1,10 +1,10 @@
 <template>
   <IBox :fa="fa" :title="title">
-    <el-form :label-width="labelWidth" class="content" label-position="left">
+    <el-form :label-width="labelWidth" class="content detail-card" label-position="left">
       <template v-for="item in items">
-        <el-form-item v-if="item.has !== false" :key="item.key" :class="item.class" :label="item.key">
-          <span slot="label"> {{ formateLabel(item.key) }}</span>
-          <span class="item-value">
+        <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
+          <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
+          <span class="item-value el-form-item__content">
             <template
               :is="item.component"
               v-if="item.component"
@@ -12,7 +12,7 @@
             />
             <ItemValue v-else :value="item.value" v-bind="item" />
           </span>
-        </el-form-item>
+        </div>
       </template>
     </el-form>
   </IBox>
@@ -80,8 +80,11 @@ export default {
     border-bottom: 1px dashed #F4F4F4;
     padding: 1px 0;
     margin-bottom: 0;
+    display: flex;
+    align-items: center;
     //text-align: end;
-    line-height: 1.2;
+    line-height: 32px;
+    min-height: 32px;
 
     &:last-child {
       //border-bottom: none;
@@ -104,8 +107,10 @@ export default {
       overflow: hidden;
       color: var(--color-icon-primary);
       font-size: 12px;
-      line-height: 30px;
+      line-height: 1.5;
       font-weight: 400;
+      width: 120px;
+      padding: 5px 0;
 
       span {
         display: inline-block;
@@ -116,8 +121,9 @@ export default {
     .el-form-item__content {
       color: var(--color-text-primary);
       font-size: 13px;
-      //line-height: 1.3;
-      //padding-bottom: 10px;
+      line-height: 1.5;
+      width: calc(100% - 120px);
+      padding: 5px 0;
     }
 
     ::v-deep .el-tag--mini {
diff --git a/src/components/Drawer/index.vue b/src/components/Drawer/index.vue
index 1ca7c1d56..c448ec013 100644
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -131,6 +131,10 @@ export default {
       padding-right: 15px;
       height: 100%;
 
+      &.detail-card {
+        padding-right: 0;
+      }
+
       // Detail 中
       &.content {
         margin-right: 0;
diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 2887e14ca..ea8e29e00 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -106,7 +106,7 @@ export default {
         return
       }
       const resource = route.meta.title || route.name
-      return resource.replace('Detail', '').replace('详情', '')
+      return resource.replace(' details', '').replace('详情', '')
     },
     getDrawerTitle() {
       if (this.formatterArgs?.getDrawerTitle && typeof this.formatterArgs.getDrawerTitle === 'function') {
diff --git a/src/views/assets/Asset/AssetList/components/PlatformDialog.vue b/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
index 552f456ff..bad249702 100644
--- a/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
+++ b/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
@@ -196,6 +196,10 @@ export default {
 ::v-deep .el-collapse {
   border: none;
 
+  .el-collapse-item__content {
+    padding-bottom: 10px;
+  }
+
   .el-collapse-item:last-child {
     .el-collapse-item__header {
       border: none;