feat: replace detail page code with t-descriptions (#707)

* feat: 使用描述组件对详情页代码升级

* feat: 使用描述组件对个人中心代码升级

* chore: update version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent/tdesign-vue-next-starter",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "dev:mock": "vite --open --mode mock",

src/pages/detail/advanced/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="detail-advanced">
-    <t-card :title="$t('pages.detailCard.baseInfo.title')" :bordered="false">
+    <t-card :bordered="false">
-      <div class="info-block">
+      <t-descriptions :title="$t('pages.detailCard.baseInfo.title')">
-        <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
+        <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
-          <h1>{{ item.name }}</h1>
           <span
             :class="{
               ['inProgress']: item.type && item.type.value === 'inProgress',
@@ -13,8 +12,8 @@
             <i v-if="item.type && item.type.key === 'contractStatus'" />
             {{ item.value }}
           </span>
-        </div>
+        </t-descriptions-item>
-      </div>
+      </t-descriptions>
     </t-card>
 
     <!-- 发票进度 -->
@@ -113,8 +112,8 @@
     <t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
       <template #body>
         <div class="dialog-info-block">
-          <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
+          <t-descriptions :column="1">
-            <h1>{{ item.name }}</h1>
+            <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
               <span
                 :class="{
                   ['inProgress']: item.type && item.type.value === 'inProgress',
@@ -124,7 +123,8 @@
                 <i v-if="item.type && item.type.key === 'contractStatus'" />
                 {{ item.value }}
               </span>
-          </div>
+            </t-descriptions-item>
+          </t-descriptions>
         </div>
       </template>
     </t-dialog>

src/pages/detail/base/index.less

@@ -1,51 +1,4 @@
-.detail-base {
+.t-descriptions {
-  :deep(.t-card) {
-    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
-  }
-
-  :deep(.t-card__header) {
-    padding: 0;
-    margin-bottom: var(--td-comp-margin-m);
-  }
-
-  :deep(.t-card__body) {
-    padding: 0;
-  }
-
-  :deep(.t-card__title) {
-    font: var(--td-font-title-large);
-    font-weight: 400;
-  }
-
-  &-info-steps {
-    padding-top: var(--td-comp-margin-xl);
-  }
-}
-
-.info-block {
-  column-count: 2;
-
-  .info-item {
-    padding-top: var(--td-comp-margin-xxl);
-    display: flex;
-    color: var(--td-text-color-primary);
-
-    h1 {
-      width: 160px;
-      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: 80px;
-      }
-
-      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-        width: 120px;
-      }
-    }
-
     span {
         overflow: hidden;
         white-space: nowrap;
@@ -73,40 +26,3 @@
         }
     }
 }
-}
-
-.dialog-info-block {
-  .info-item {
-    padding: 12px 0;
-    display: flex;
-
-    h1 {
-      width: 84px;
-      font-family: var(--td-font-family);
-      font-size: 14px;
-      color: var(--td-text-color-secondary);
-      text-align: left;
-      line-height: 22px;
-    }
-
-    span {
-      margin-left: var(--td-comp-margin-xxl);
-    }
-
-    i {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: var(--td-radius-circle);
-      background: var(--td-success-color);
-    }
-
-    .green {
-      color: var(--td-success-color);
-    }
-
-    .blue {
-      color: var(--td-brand-color);
-    }
-  }
-}

src/pages/detail/base/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="detail-base">
-    <t-card :title="$t('pages.detailBase.baseInfo.title')" :bordered="false">
+    <t-card :bordered="false">
-      <div class="info-block">
+      <t-descriptions :title="$t('pages.detailBase.baseInfo.title')">
-        <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
+        <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
-          <h1>{{ item.name }}</h1>
           <span
             :class="{
               ['inProgress']: item.type && item.type.value === 'inProgress',
@@ -13,8 +12,8 @@
             <i v-if="item.type && item.type.key === 'contractStatus'" />
             {{ item.value }}
           </span>
-        </div>
+        </t-descriptions-item>
-      </div>
+      </t-descriptions>
     </t-card>
 
     <t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">

src/pages/user/index.vue

@@ -15,16 +15,11 @@
             <t-icon name="ellipsis" />
           </t-button>
         </template>
-        <t-row class="content" justify="space-between">
+        <t-descriptions :column="4" item-layout="vertical">
-          <t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span ?? 3">
+          <t-descriptions-item v-for="(item, index) in USER_INFO_LIST" :key="index" :label="$t(item.title)">
-            <div class="contract-title">
-              {{ $t(item.title) }}
-            </div>
-            <div class="contract-detail">
             {{ item.content }}
-            </div>
+          </t-descriptions-item>
-          </t-col>
+        </t-descriptions>
-        </t-row>
       </t-card>
 
       <t-card class="content-container" :bordered="false">
@@ -185,4 +180,8 @@ watch(
 
 <style lang="less" scoped>
 @import './index.less';
+
+.t-descriptions {
+  margin-top: 24px;
+}
 </style>