增加新内容

src/api/example.js

@@ -32,33 +32,9 @@ export const userList = [
             {label: '中风', id:1},
         ],
         weightList:[
-            { day: '2026-09-08', weight: 192.3 },
+            ],
-            { day: '2026-09-09', weight: 190.1 },
+        comment: ''
-            { day: '2026-09-10', weight: 190.0 },
+        },
-            { day: '2026-09-11', weight: 190.0 },
-            { day: '2026-09-12', weight: 189.6 },
-            { day: '2026-09-13', weight: 188.5 },
-            { day: '2026-09-14', weight: 185.5 },
-            { day: '2026-09-15', weight: 184.3 },
-            { day: '2026-09-17', weight: 186.3 },
-            { day: '2026-09-18', weight: 185.1 },
-            { day: '2026-09-19', weight: 185.0 },
-            { day: '2026-09-20', weight: 182.8 },
-            { day: '2026-09-21', weight: 184.5 },
-            { day: '2026-09-22', weight: 181.2 },
-            { day: '2026-09-23', weight: 183.1 },
-            { day: '2026-09-24', weight: 185.3 },
-            { day: '2026-09-25', weight: 183.0 },
-            { day: '2026-09-26', weight: 182.8 },
-            { day: '2026-09-27', weight: 181.6 },
-            { day: '2026-09-28', weight: 180.2 },
-            { day: '2026-09-29', weight: 182.3 },
-            { day: '2026-09-30', weight: 180.3 },
-            { day: '2026-10-01', weight: 179.8 },
-            { day: '2026-10-03', weight: 181.5 },
-            { day: '2026-10-14', weight: 177.1 }
-            ]
-    },
     {
         username: '周三江',
         id: 2357,
@@ -121,6 +97,8 @@ export const userList = [
             { day: '2026-10-01', weight: 179.8 },
             { day: '2026-10-03', weight: 181.5 },
             { day: '2026-10-14', weight: 177.1 }
-            ]
+            ],
+        comment: '在这份为期23天的体重管理方案中，周先生从初始的192斤稳步调整至179斤，累计体重变化幅度近十斤，取得了扎实的减重成果。饮食环节他执行得格外到位，全程严格遵循方案的各项要求，没有出现明显的松懈和偏差。中途他不慎脚部受伤，原本计划的日常行走步数没能按目标完成，但他有坚持每周完成5公里游泳训练，保证了一定身体新陈代谢率。同时他需要兼顾上夜班的节奏，他也全程配合跟上了方案的推进节奏。整个过程中他没有出现强烈的饥饿感，自始至终都保持着相对轻松舒适的状态，顺利走完了全部23天的管理周期，这套兼顾灵活调整与落地性的方案为减重人群提供了可参考的实践样本。'
+    
     }
 ]

src/views/UserDetailView copy.vue

@@ -0,0 +1,445 @@
+<template>
+
+
+  <div class="user-base-line">
+    <div class="user-block">
+        <t-cell-group title="用户基本信息" >
+            <t-cell title="用户名" :note="`${user.username}`" class="line-start line-end" ></t-cell>
+            <t-cell title="性别" :note="`${user.sex == 1? '男':'女'}`" class="line-end" ></t-cell>
+            <t-cell title="出生年月日" :note="`${user.birthday}(${new Date().getFullYear() - +user.birthday?.slice(0, 4)}岁)`" class="line-end" ></t-cell>
+            <t-cell title="方案开始时间" :note="user.before?.day" class="line-end"></t-cell>
+            <t-cell title="方案结束时间" :note="user.after?.day" class="line-end"></t-cell>
+        </t-cell-group>
+    </div>
+
+        <t-cell-group title="用户标签" >
+    <div class="user-label-line ">
+        <span class="user-label user-label-active" v-for="label in user.labelList">{{ label.label }}</span>
+    </div>
+    </t-cell-group>
+    <div class="user-block" v-if="user.before?.picList.length > 0">
+        <t-cell-group title="方案前照片">
+            <t-row style="margin:16px;">
+                <t-col span="8" class="dark" v-for="pic in user.before?.picList">
+                    <t-image
+                        class="user-pic-item"
+                        fit="fill"
+                        :src="pic"
+                        @click="beforeVisible = true"
+                    ></t-image> 
+                </t-col>
+            </t-row>
+        </t-cell-group>
+
+<t-image-viewer v-model:images="beforePicList" :visible="beforeVisible" @close="beforeVisible = false">
+    <template #image="{ src, className, onLoad, onTransitionstart, onTransitionend, style }">
+      <div>
+        <img
+          :src="src"
+          :style="style"
+          :class="className"
+          @load="onLoad"
+          @transitionstart="onTransitionstart"
+          @transitionend="onTransitionend"
+        />
+      </div>
+    </template>
+</t-image-viewer>
+    </div> 
+
+    <div class="user-block" v-if="user?.before?.videoList.length > 0">
+        <t-cell-group title="方案前视频">
+            <t-row style="margin:16px;">
+                <t-col span="8" class="dark" v-for="(video,index) in user.before?.videoList">
+                    <div class="video-cover-wrapper">
+                        <!-- 视频封面：使用 TDesign Image 组件 -->
+                        <t-image
+                            :src="video.cover"
+                            fit="fill"
+                            class="user-pic-item"
+                            @click="openVideoPreview('before', index)"
+                        >
+                        </t-image>
+
+                         <div class="play-mask">
+                            <t-icon name="play-circle-filled" size="48px" />
+                        </div>
+                    </div>
+                </t-col>
+            </t-row>
+        </t-cell-group>
+        <!-- 预览弹窗 -->
+                        <t-dialog
+                        v-model:visible="visibleVideo"
+                        header="视频预览"
+                        :footer="false"
+                        width="100vw"
+                        close-btn
+                        destroy-on-close
+                        @close="handleVideoClose"
+                        >
+                        <video
+                            v-if="visibleVideo"
+                            ref="videoRef"
+                            :src="videoUrl"
+                            :poster="videoCover"
+                            controls
+                            autoplay
+                            playsinline
+                            style="width: 100%; height: auto; border-radius: 4px"
+                        />
+                        </t-dialog>
+    </div>
+    <div class="user-block" v-if="user.after?.picList.length > 0">
+        <t-cell-group title="方案后照片">
+            <t-row style="margin:16px;">
+                <t-col span="8" class="dark" v-for="pic in user.after?.picList">
+                    <t-image
+                        class="user-pic-item"
+                        fit="fill"
+                        :src="pic"
+                        @click="afterVisible = true"
+                    ></t-image> 
+                </t-col>
+            </t-row>
+        </t-cell-group>
+
+<t-image-viewer v-model:images="afterPicList" :visible="afterVisible" @close="afterVisible = false">
+    <template #image="{ src, className, onLoad, onTransitionstart, onTransitionend, style }">
+      <div>
+        <img
+          :src="src"
+          :style="style"
+          :class="className"
+          @load="onLoad"
+          @transitionstart="onTransitionstart"
+          @transitionend="onTransitionend"
+        />
+      </div>
+    </template>
+</t-image-viewer>
+    </div>
+
+    <div class="user-block" v-if="user.after?.videoList.length > 0">
+        <t-cell-group title="方案后视频">
+            <t-row style="margin:16px;">
+                <t-col span="8" class="dark" v-for="(video,index) in user.after?.videoList">
+                    <div class="video-cover-wrapper">
+                        <!-- 视频封面：使用 TDesign Image 组件 -->
+                        <t-image
+                            :src="video.cover"
+                            fit="fill"
+                            class="user-pic-item"
+                            @click="openVideoPreview('after', index)"
+                        >
+                        </t-image>
+
+                         <div class="play-mask">
+                            <t-icon name="play-circle-filled" size="48px" />
+                        </div>
+                    </div>
+                </t-col>
+            </t-row>
+        </t-cell-group>
+        <!-- 预览弹窗 -->
+    </div>
+
+<div>
+    <t-cell-group title="体重变化" v-if="weightData">
+        <t-cell title="方案开始体重" :note="weightData.weightStart + '斤（'+weightData.dayStart+'）'"></t-cell>
+        <t-cell title="方案开始体重" :note="weightData.weightEnd + '斤（'+weightData.dayEnd+'）'"></t-cell>  
+        <t-cell title="体重变化" :note="weightData.weightTotal + '斤（共'+weightData.dayTotal+'天）'"></t-cell>  
+        <Canvas :style="{ width: '100%', height: '300px' }" v-if="weightChartData.length > 1">
+            <Chart :data="weightChartData" :scale="scaleConfig">
+            <Axis field="day" />
+            <Axis field="weight" />
+            <Line x="day" y="weight" />
+            </Chart>
+        </Canvas>
+    </t-cell-group>
+    <t-cell-group title="教练小结" v-if="user.comment">
+        <div class="comment">{{ user.comment }}</div>
+    </t-cell-group>
+</div>
+    <div>
+    </div>
+    <div class="empty-bar"></div>
+    <div class="empty-bar"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+import { onMounted, ref } from 'vue';
+import {useRoute, useRouter} from 'vue-router'
+import Canvas from '@antv/f-vue';
+import { Chart, Interval, Axis, Line } from '@antv/f2';
+
+import {labelList, userList} from '../api/example.js'
+
+const router = useRouter()
+const route = useRoute()
+
+const userID = ref("")
+const beforeVisible = ref(false)
+const afterVisible = ref(false)
+const beforePicList = ref([])
+const afterPicList = ref([])
+const visibleVideo = ref(false)
+const videoUrl = ref('')
+const videoCover = ref('')
+const weightData = ref({})
+const weightChartData = ref([
+    {weight: 0, day: '2026-09-01'}
+])
+const openVideoPreview = (source, index) => {
+    visibleVideo.value = true
+    if (source == 'before'){
+        videoCover.value = user.value.before.videoList[index].cover
+        videoUrl.value = user.value.before.videoList[index].url
+    }else{
+        videoCover.value = user.value.after.videoList[index].cover
+        videoUrl.value = user.value.after.videoList[index].url
+    }
+}
+const handleVideoClose = () => {
+    visibleVideo.value = false
+}
+
+const user1 = ref({
+    username: '用户名 1',
+    id: 1,
+    sex: 1,
+    birthday: '1985-09-01',
+    before: {
+        day: '2026-09-01',
+        picList: [
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+        ],
+        videoList: [
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example4.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example6.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example4.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example6.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example4.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+        ]
+    },
+    after: {
+        day: '2026-09-01',
+        picList: [
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            'https://tdesign.gtimg.com/mobile/demos/example4.png',
+        ],
+        videoList: [
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example4.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example6.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example4.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example6.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+            {cover: 'https://tdesign.gtimg.com/mobile/demos/example4.png', url: 'https://lorem.video/bunny_720p_h264_30fps_20s_23crf_aac_192kbps.mp4'},
+        ]
+    },
+    labelList:[
+        '病症 1','病症病症 2','病症病症病症 3','病症病 4','病病症 5','病症 6','病症病症病症病症 7','病症 8','病症 9'
+    ],
+    weightList:[
+        {day: '2026-09-01', weight: 180.4},
+        {day: '2026-09-02', weight: 175.5},
+        {day: '2026-09-03', weight: 169.6},
+        {day: '2026-09-04', weight: 158.7},
+        {day: '2026-09-05', weight: 154.8},
+        {day: '2026-09-06', weight: 152.9},
+        {day: '2026-09-07', weight: 145.1},
+        {day: '2026-09-08', weight: 143.2},
+        {day: '2026-09-09', weight: 140.3},
+        {day: '2026-09-10', weight: 138.4},
+        {day: '2026-09-11', weight: 135.5},
+    ]
+})
+
+const user = ref({})
+const setWeightData = (weightList) => {
+    const total = weightList.length
+    const weightStart = weightList[0].weight
+    const weightEnd = weightList[total - 1].weight
+    const dayStart = weightList[0].day
+    const dayEnd = weightList[total - 1].day
+    const weightTotal = (weightEnd - weightStart).toFixed(2)
+    weightData.value = {
+        weightStart : weightStart.toFixed(2),
+        weightEnd : weightEnd.toFixed(2),
+        dayStart : dayStart,
+        dayEnd: dayEnd,
+        dayTotal: total,
+        weightTotal: weightTotal,
+    }
+}
+onMounted(() => {
+    console.log('route', route)
+    console.log('router', router)
+    const id = route.params.id
+    userID.value = id
+    userList.forEach(u => {
+        console.log('u', u)
+        if (u.id == id){
+            user.value = u
+            console.log('user', user)
+            weightChartData.value = u.weightList
+            beforePicList.value = u.before.picList
+            afterPicList.value = u.after.picList
+            setWeightData(u.weightList)
+        }
+    })
+})
+
+const scaleConfig = {
+  day: { range: [0, 1], tickCount: 5 },
+};
+
+</script>
+<style lang="less">
+.card {
+  position: relative;
+  margin: 16px;
+  border-radius: 6px;
+//   overflow: hidden;
+  box-sizing: border-box;
+  border: 1.5px solid var(--bg-color-demo, #fff);
+  border-color: var(--td-success-color-4);
+}
+
+.card--active {
+  border-color: var(--td-brand-color);
+}
+
+.card--active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  border: 14px solid var(--td-success-color-4);
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.card__icon {
+  color: var(--td-text-color-anti);
+  position: absolute;
+  left: 1.5px;
+  top: 1.5px;
+  z-index: 1;
+}
+
+/* 横向布局 */
+.horizontal-box {
+  width: calc(100% - 32px);
+  display: flex;
+  align-items: start;
+  margin: 16px;
+  white-space: nowrap
+}
+
+.horizontal-box .card {
+  flex: 1;
+  margin: 0;
+}
+
+.horizontal-box .card + .card {
+  margin-left: 12px;
+}
+
+.horizontal-box .card::after {
+  border-width: 12px;
+}
+
+.horizontal-box .card__icon {
+  font-size: 12px;
+}
+.user-line{
+    width: calc(100vw - 8px);
+    margin: 4px;
+}
+.user-pic-item{
+    padding: 4px;
+}
+.line-start{
+    border-top: 1px solid var(--td-success-color-4);
+}
+.line-end{
+    border-bottom: 1px solid var(--td-success-color-4);
+}
+.user-line-block{
+    width: 50%;
+}
+.user-pic-block{
+    width: 100%;
+}
+.user-pic{
+    padding: 16px;
+}
+.user-day{
+    padding-top: 8px;
+    display: flex;
+    justify-content: center;
+}
+.user-label-line{
+    margin:16px;
+}
+.user-label{
+    margin: 4px;
+    padding: 4px 12px 4px 12px;
+    line-height: 36px;
+    border-radius: 16px;
+    color: #000;
+    white-space: nowrap;
+    border: 1px solid var(--td-success-color-4);
+}
+.user-label-active{
+
+    color: #fff;
+    background-color: var(--td-success-color-4);
+}
+.user-name-line{
+    border-bottom: 1px solid var(--td-success-color-4);
+    // border-radius: 8px;
+}
+.user-name{
+    border-radius: 8px;
+}
+.t-checkbox--block {
+    padding: 4px;
+    padding-left: 16px;
+}
+.video-cover-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.play-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+//   background: rgba(0, 0, 0, 0.35);
+  pointer-events: none; /* 让点击穿透到外层 */
+//   padding: 4px;
+//   margin: 4px;
+}
+.comment{
+    text-indent: 2em;
+    padding: 16px;
+}
+</style>

src/views/UserDetailView.vue

@@ -4,15 +4,15 @@
   <div class="user-base-line">
     <div class="user-block">
         <t-cell-group title="用户基本信息" >
-            <t-cell title="用户名" :note="`${user.username}`" class="line-start line-end" ></t-cell>
+            <t-cell title="用户名" :note="`${user.name}`" class="line-start line-end" ></t-cell>
             <t-cell title="性别" :note="`${user.sex == 1? '男':'女'}`" class="line-end" ></t-cell>
             <t-cell title="出生年月日" :note="`${user.birthday}(${new Date().getFullYear() - +user.birthday?.slice(0, 4)}岁)`" class="line-end" ></t-cell>
-            <t-cell title="方案开始时间" :note="user.before?.day" class="line-end"></t-cell>
+            <!-- <t-cell title="方案开始时间" :note="user.before?.day" class="line-end"></t-cell>
-            <t-cell title="方案结束时间" :note="user.after?.day" class="line-end"></t-cell>
+            <t-cell title="方案结束时间" :note="user.after?.day" class="line-end"></t-cell> -->
         </t-cell-group>
     </div>
 
-        <t-cell-group title="用户标签" >
+        <t-cell-group title="用户标签" v-if="user.labelList">
     <div class="user-label-line ">
         <span class="user-label user-label-active" v-for="label in user.labelList">{{ label.label }}</span>
     </div>
@@ -144,8 +144,8 @@
         <!-- 预览弹窗 -->
     </div>
 
-<div>
+<div v-if="user.weightList">
-    <t-cell-group title="体重变化">
+    <t-cell-group title="体重变化" v-if="weightData">
         <t-cell title="方案开始体重" :note="weightData.weightStart + '斤（'+weightData.dayStart+'）'"></t-cell>
         <t-cell title="方案开始体重" :note="weightData.weightEnd + '斤（'+weightData.dayEnd+'）'"></t-cell>  
         <t-cell title="体重变化" :note="weightData.weightTotal + '斤（共'+weightData.dayTotal+'天）'"></t-cell>  
@@ -157,6 +157,11 @@
             </Chart>
         </Canvas>
     </t-cell-group>
+</div>
+<div v-if="user.comment">
+    <t-cell-group title="教练小结" v-if="user.comment">
+        <div class="comment">{{ user.comment }}</div>
+    </t-cell-group>
 </div>
     <div>
     </div>
@@ -171,7 +176,7 @@ import {useRoute, useRouter} from 'vue-router'
 import Canvas from '@antv/f-vue';
 import { Chart, Interval, Axis, Line } from '@antv/f2';
 
-import {labelList, userList} from '../api/example.js'
+import {labelList, userList} from '../api/user'
 
 const router = useRouter()
 const route = useRoute()
@@ -290,10 +295,34 @@ onMounted(() => {
         if (u.id == id){
             user.value = u
             console.log('user', user)
-            weightChartData.value = u.weightList
+            // 1. body_images 下所有值变成数组
-            beforePicList.value = u.before.picList
+            u.body_images = Object.fromEntries(
-            afterPicList.value = u.after.picList
+            Object.entries(u.body_images).map(([k, v]) => [k, [v]])
-            setWeightData(u.weightList)
+            );
+
+            // 2. after_body_images 下所有值变成数组
+            u.after_body_images = Object.fromEntries(
+            Object.entries(u.after_body_images).map(([k, v]) => [k, [v]])
+            );
+
+            // 3. 新增 user.before.picList —— 取 body_images 的数组值
+            u.before = {
+            picList: Object.values(u.body_images)
+            };
+
+            // 4. 新增 user.after.picList —— 取 after_body_images 的数组值
+            u.after = {
+            picList: Object.values(u.after_body_images)
+            };
+            if (u.weightList){
+                weightChartData.value = u.weightList
+                beforePicList.value = u.before.picList
+                afterPicList.value = u.after.picList
+                setWeightData(u.weightList)
+            }
+            u.before.videoList = []
+            u.after.videoList = []
+            user.value = u
         }
     })
 })
@@ -435,4 +464,8 @@ const scaleConfig = {
 //   padding: 4px;
 //   margin: 4px;
 }
+.comment{
+    text-indent: 2em;
+    padding: 16px;
+}
 </style>

src/views/UserListView copy.vue

@@ -0,0 +1,189 @@
+<template>
+
+  <div class="tdesign-mobile-demo-block__summary" style="margin-left: 16px; margin-top: 24px">请选择用户标签</div>
+    <div class="user-label-line">
+        <span :class="`user-label ${search.indexOf(symptom.id) > -1 ? 'user-label-active' :  ''}`" v-for="symptom in labelList" @click="selectOption(symptom.id)">{{ symptom.label }}</span>
+    </div>
+  <div v-for="user in userList" class="user-line">
+    <div class="user-name-line">
+        <t-cell :title="`用户名：${user.username}`" class="user-name" note="查看详情" arrow @click="toUserDetail(user.id)"></t-cell>
+    </div>
+
+    <div class="user-label-line">
+        <span class="user-label user-label-active" v-for="label in user.labelList">{{ label.label }}</span>
+    </div>
+    <div class="user-pic-line">
+        <div class="user-line-block user-before">
+            <div class="user-day">
+                开始日期：{{ user.before.day }}
+            </div>
+            <div class="user-pic-block">
+                <t-image
+                class="user-pic"
+                
+                fit="fill"
+                :src="user.before.picCover"
+                ></t-image> 
+            </div>
+        </div>
+        <div class="user-line-block user-after">
+            <div class="user-day">
+                结束日期：{{ user.after.day }}
+            </div>
+            <div class="user-pic-block">
+                <t-image
+                class="user-pic"
+                fit="fill"
+                :src="user.after.picCover"
+                ></t-image> 
+            </div>
+        </div>
+    </div>
+  </div>
+    <div class="empty-bar"></div>
+    <div class="empty-bar"></div>
+</template>
+<script lang="ts" setup>
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+import { ref, onMounted } from 'vue';
+import {useRouter} from 'vue-router'
+import {labelList, userList} from '../api/user'
+const router = useRouter()
+const search = ref([])
+
+const selectOption = (id) => {
+    let idList = search.value
+    if (idList.indexOf(id) > -1 ){
+        idList.splice(idList.indexOf(id), 1)
+    }else{
+        idList.push(id)
+    }
+    console.log()
+    search.value = idList
+}
+const toUserDetail = (id) => {
+    router.push({name: 'user_detail', params:{id}})
+}
+onMounted(() =>{
+    let idList = []
+    labelList.forEach(label => {
+        idList.push(label.id)
+    })
+    search.value = idList
+
+})
+</script>
+<style lang="less">
+.card {
+  position: relative;
+  margin: 16px;
+  border-radius: 6px;
+//   overflow: hidden;
+  box-sizing: border-box;
+  border: 1.5px solid var(--bg-color-demo, #fff);
+  border-color: var(--td-success-color-4);
+}
+
+.card--active {
+  border-color: var(--td-brand-color);
+}
+
+.card--active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  border: 14px solid var(--td-success-color-4);
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.card__icon {
+  color: var(--td-text-color-anti);
+  position: absolute;
+  left: 1.5px;
+  top: 1.5px;
+  z-index: 1;
+}
+
+/* 横向布局 */
+.horizontal-box {
+  width: calc(100% - 32px);
+  display: flex;
+  align-items: start;
+  margin: 16px;
+  white-space: nowrap
+}
+
+.horizontal-box .card {
+  flex: 1;
+  margin: 0;
+}
+
+.horizontal-box .card + .card {
+  margin-left: 12px;
+}
+
+.horizontal-box .card::after {
+  border-width: 12px;
+}
+
+.horizontal-box .card__icon {
+  font-size: 12px;
+}
+.user-line{
+    width: calc(100vw - 8px);
+    border: 1px solid var(--td-success-color-4);
+    margin: 4px;
+    border-radius: 8px;
+}
+.user-pic-line{
+    display:flex;
+    
+    border-top: 1px solid var(--td-success-color-4);
+}
+.user-line-block{
+    width: 50%;
+}
+.user-pic-block{
+    width: 100%;
+}
+.user-pic{
+    padding: 16px;
+}
+.user-day{
+    padding-top: 8px;
+    display: flex;
+    justify-content: center;
+}
+.user-label-line{
+    margin:16px;
+}
+.user-label{
+    margin: 4px;
+    padding: 4px 12px 4px 12px;
+    line-height: 36px;
+    border-radius: 16px;
+    color: #000;
+    white-space: nowrap;
+    border: 1px solid var(--td-success-color-4);
+}
+.user-label-active{
+
+    color: #fff;
+    background-color: var(--td-success-color-4);
+}
+.user-name-line{
+    border-bottom: 1px solid var(--td-success-color-4);
+    // border-radius: 8px;
+}
+.user-name{
+    border-radius: 8px;
+}
+.t-checkbox--block {
+    padding: 4px;
+    padding-left: 16px;
+}
+</style>

src/views/UserListView.vue

@@ -6,15 +6,17 @@
     </div>
   <div v-for="user in userList" class="user-line">
     <div class="user-name-line">
-        <t-cell :title="`用户名：${user.username}`" class="user-name" note="查看详情" arrow @click="toUserDetail(user.id)"></t-cell>
+        <t-cell :title="`用户名：${user.name}`" class="user-name" note="查看详情" arrow @click="toUserDetail(user.id)"></t-cell>
+    <!-- <t-cell :title="`用户名：${user.name[0] + '*'.repeat(user.name.length - 1)}`" class="user-name" note="查看详情" arrow @click="toUserDetail(user.id)"></t-cell> -->
+    
     </div>
 
-    <div class="user-label-line">
+    <div class="user-label-line" v-if="user.labelList">
         <span class="user-label user-label-active" v-for="label in user.labelList">{{ label.label }}</span>
     </div>
-    <div class="user-pic-line">
+    <div class="user-pic-line" >
         <div class="user-line-block user-before">
-            <div class="user-day">
+            <div class="user-day" v-if="user.before">
                 开始日期：{{ user.before.day }}
             </div>
             <div class="user-pic-block">
@@ -22,19 +24,19 @@
                 class="user-pic"
                 
                 fit="fill"
-                :src="user.before.picCover"
+                :src="user.body_images.bodyFront || user.body_images.bigHead"
                 ></t-image> 
             </div>
         </div>
         <div class="user-line-block user-after">
-            <div class="user-day">
+            <div class="user-day" v-if="user.after">
                 结束日期：{{ user.after.day }}
             </div>
             <div class="user-pic-block">
                 <t-image
                 class="user-pic"
                 fit="fill"
-                :src="user.after.picCover"
+                :src="user.after_body_images.bodyFront || user.after_body_images.bigHead || user.after_body_images.leftPalm"
                 ></t-image> 
             </div>
         </div>
@@ -47,7 +49,7 @@
 import { Icon as TIcon } from 'tdesign-icons-vue-next';
 import { ref, onMounted } from 'vue';
 import {useRouter} from 'vue-router'
-import {labelList, userList} from '../api/example'
+import {labelList, userList} from '../api/user'
 const router = useRouter()
 const search = ref([])
 

vite.config.ts

@@ -11,7 +11,7 @@ import { babel } from '@rollup/plugin-babel'
 export default defineConfig(({ command }) => {
   // 生产构建时指向 CDN 地址，开发时保持 '/'
   const base = command === 'build'
-    ? 'https://images.health.ufutx.com/uftx_case'
+    ? 'https://images.health.ufutx.com/dp_uftx_case'
     : '/'
   console.log('base', base)
   return {