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,18 +112,19 @@
     <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
+              <span
-              :class="{
+                :class="{
-                ['inProgress']: item.type && item.type.value === 'inProgress',
+                  ['inProgress']: item.type && item.type.value === 'inProgress',
-                ['pdf']: item.type && item.type.value === 'pdf',
+                  ['pdf']: item.type && item.type.value === 'pdf',
-              }"
+                }"
-            >
+              >
-              <i v-if="item.type && item.type.key === 'contractStatus'" />
+                <i v-if="item.type && item.type.key === 'contractStatus'" />
-              {{ item.value }}
+                {{ item.value }}
-            </span>
+              </span>
-          </div>
+            </t-descriptions-item>
+          </t-descriptions>
         </div>
       </template>
     </t-dialog>

src/pages/detail/base/index.less

@@ -1,112 +1,28 @@
-.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;
+        overflow: hidden;
-      white-space: nowrap;
+        white-space: nowrap;
-      text-overflow: ellipsis;
+        text-overflow: ellipsis;
-      margin-left: var(--td-comp-margin-xxl);
+        margin-left: var(--td-comp-margin-xxl);
     }
 
     i {
-      display: inline-block;
+        display: inline-block;
-      width: 8px;
+        width: 8px;
-      height: 8px;
+        height: 8px;
-      border-radius: var(--td-radius-circle);
+        border-radius: var(--td-radius-circle);
-      background: var(--td-success-color);
+        background: var(--td-success-color);
     }
 
     .inProgress {
-      color: var(--td-success-color);
+        color: var(--td-success-color);
     }
 
     .pdf {
-      color: var(--td-brand-color);
+        color: var(--td-brand-color);
 
-      &:hover {
+        &:hover {
-        cursor: pointer;
+            cursor: pointer;
-      }
+        }
     }
-  }
-}
-
-.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">
+            {{ item.content }}
-              {{ $t(item.title) }}
+          </t-descriptions-item>
-            </div>
+        </t-descriptions>
-            <div class="contract-detail">
-              {{ item.content }}
-            </div>
-          </t-col>
-        </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>