refactor(detail): 升级tdesign-vue版本，detail页基本信息替换为descriptions组件 (#304)

package.json

@@ -26,7 +26,7 @@
     "nprogress": "^0.2.0",
     "qrcode.vue": "^1.7.0",
     "tdesign-icons-vue": "^0.1.6",
-    "tdesign-vue": "^1.3.0",
+    "tdesign-vue": "^1.9.0",
     "tvision-color": "~1.6.0",
     "typescript": "^5.1.6",
     "vue": "~2.6.14",

src/pages/detail/advanced/index.less

@@ -8,14 +8,6 @@
     font-size: 20px;
     font-weight: 500;
   }
-
-  .advanced-card {
-    margin-top: 0 !important;
-
-    .card-title-default {
-      margin-bottom: 12px;
-    }
-  }
 }
 
 .product-block-container {

src/pages/detail/advanced/index.vue

@@ -1,20 +1,19 @@
 <template>
   <div class="detail-advanced">
-    <t-card title="基本信息" class="advanced-card" :bordered="false">
-      <div class="info-block">
-        <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
-          <h1>{{ item.name }}</h1>
-          <span
+    <t-card title="基本信息" class="info-block" :bordered="false">
+      <t-descriptions>
+        <t-descriptions-item v-for="(item, index) in baseInfoData" :key="index" :label="item.name">
+          <div
             :class="{
               ['inProgress']: item.type && item.type.value === 'inProgress',
               ['pdf']: item.type && item.type.value === 'pdf',
             }"
           >
-            <i v-if="item.type && item.type.key === 'contractStatus'"></i>
+            <i v-if="item.type && item.type.key === 'contractStatus'" />
             {{ item.value }}
-          </span>
-        </div>
-      </div>
+          </div>
+        </t-descriptions-item>
+      </t-descriptions>
     </t-card>
 
     <!-- 发票进度 -->

src/pages/detail/base/index.less

@@ -16,54 +16,30 @@
 }
 
 .info-block {
-  column-count: 2;
-
-  .info-item {
-    padding: 12px 0;
-    display: flex;
-    color: var(--td-text-color-primary);
-
-    h1 {
-      width: 200px;
-      font: var(--td-font-body-medium);
-      color: var(--td-text-color-secondary);
-      font-weight: normal;
-      text-align: left;
-
-      @media (max-width: @screen-sm-max) {
-        width: 100px;
-      }
-
-      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-        width: 120px;
-      }
-    }
-
-    span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      margin-left: 24px;
-    }
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: 24px;
+  }
 
-    i {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: var(--td-radius-circle);
-      background: var(--td-success-color-5);
-    }
+  i {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--td-radius-circle);
+    background: var(--td-success-color-5);
+  }
 
-    .inProgress {
-      color: var(--td-success-color-5);
-    }
+  .inProgress {
+    color: var(--td-success-color-5);
+  }
 
-    .pdf {
-      color: var(--td-brand-color);
+  .pdf {
+    color: var(--td-brand-color);
 
-      &:hover {
-        cursor: pointer;
-      }
+    &:hover {
+      cursor: pointer;
     }
   }
 }

src/pages/detail/base/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="detail-base">
-    <t-card title="基本信息" :bordered="false">
-      <div class="info-block">
-        <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
-          <h1>{{ item.name }}</h1>
+    <t-card title="基本信息" :bordered="false" class="info-block">
+      <t-descriptions>
+        <t-descriptions-item v-for="(item, index) in baseInfoData" :key="index" :label="item.name">
           <span
+            slot="content"
             :class="{
               ['inProgress']: item.type && item.type.value === 'inProgress',
               ['pdf']: item.type && item.type.value === 'pdf',
@@ -13,8 +13,8 @@
             <i v-if="item.type && item.type.key === 'contractStatus'" />
             {{ item.value }}
           </span>
-        </div>
-      </div>
+        </t-descriptions-item>
+      </t-descriptions>
     </t-card>
 
     <t-card title="变更记录" class="container-base-margin-top" :bordered="false">