refactor(components): 优化多个组件的结构和功能

- 为 x-button 和 x-popup 组件添加注释说明
- 在 x-image 组件中添加 lazy 加载属性
- 优化 profile 页面的我的拍品列表展示
- 更新 tang

app/components/x-button/index.vue

@@ -1,4 +1,7 @@
 <script setup>
+/*
+* 此组件的目的是使用该组件包裹的内容具有按压状态效果
+* */
 import {ref, defineEmits} from "vue";
 
 const emit = defineEmits(["click"]);

app/components/x-image/index.vue

@@ -21,6 +21,7 @@ const showImage = () => {
 </script>
 <template>
   <img
+      loading="lazy"
       v-bind="{ ...props, ...$attrs }"
       @click="showImage"
   >

app/components/x-popup/index.vue

@@ -1,5 +1,7 @@
 <script setup>
-
+/*
+* 封装一个带标题栏的弹窗
+* */
 const props = defineProps({
   show: {
     type: Boolean,
@@ -24,9 +26,10 @@ const close=()=>{
     <div class="flex flex-col h-full">
       <!-- 标题栏 -->
       <div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0">
-        <slot name="title">
+
-          <div class="text-black text-16px">{{ title }}</div>
+        <slot v-if="$slots.title" name="title">
         </slot>
+        <div v-else class="text-black text-16px">{{ title }}</div>
         <van-icon
             class="ml-auto"
             size="20"

app/pages/home/components/Column/index.vue

@@ -1,5 +1,6 @@
 
 <script setup>
+
 const props = defineProps({
   items: Array,
   colIndex: {

app/pages/liveRoom/components/SideButton/tangPopup.vue

@@ -1,7 +1,7 @@
 <script setup>
 import xPopup from '@/components/x-popup/index.vue'
 import {goodStore} from "~/stores/goods/index.js";
-import { showImagePreview } from 'vant';
+import xImage from '@/components/x-image/index.vue'
 const {pageRef,itemList} = goodStore();
 const props = defineProps({
   show: Boolean,
@@ -13,9 +13,7 @@ const props = defineProps({
 const emit = defineEmits(['update:show'])
 
 const close = () => emit('update:show', false);
-const openImage = (url) => {
+
-  showImagePreview([url]);
-}
 </script>
 
 <template>
@@ -32,14 +30,13 @@ const openImage = (url) => {
       >
         <div
             class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
-            @click="openImage(item.artwork.hdPic)"
         >
-          <img
+          <xImage
               class="w-80px h-80px"
-              :src="item.artwork.hdPic"
+              :src="item.artwork?.hdPic"
-              :alt="item.artworkTitle"
+              :alt="item?.artworkTitle"
               loading="lazy"
-          >
+          />
         </div>
         <div>
           <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">

app/pages/profile/index.vue

@@ -1,18 +1,36 @@
 <script setup>
 import {userArtworks} from "~/api/goods/index.js";
 import {authStore} from "~/stores/auth/index.js";
-
+import xImage from '@/components/x-image/index.vue'
 definePageMeta({
   layout: 'default',
   title: '我的',
   i18n: 'menu.profile',
 })
 const myList=ref([])
+const showMyList=ref([])
 const {userInfo}= authStore()
+const groupAndSortByDate=(data)=> {
+  if (!Array.isArray(data)) {
+    return
+  }
+  return Object.values(data.reduce((acc, curr) => {
+    if (!acc[curr.userCreatedAt]) {
+      acc[curr.userCreatedAt] = {
+        userCreatedAt: curr.userCreatedAt,
+        list: []
+      };
+    }
+    acc[curr.userCreatedAt].list.push(curr);
+    return acc;
+  }, {}))
+      .sort((a, b) => new Date(b.userCreatedAt) - new Date(a.userCreatedAt));
+}
 const initData=async ()=>{
  const res=await userArtworks({})
   if (res.status===0){
     myList.value=res.data.data
+    showMyList.value=groupAndSortByDate(myList.value)
   }
 }
 initData()
@@ -29,55 +47,22 @@ initData()
       <div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
     </div>
   </div>
-    <div class="flex-grow-1">
+    <div class="flex-grow-1 ">
       <div class="border-b-1px border-b-#D3D3D3  px-16px flex">
         <div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">我的拍品</div>
       </div>
-      <van-pull-refresh>
+      <van-pull-refresh     @refresh="initData">
         <van-list
             finished-text="没有更多了"
         >
-          <div class="px-16px pt-14px">
+          <div class="px-16px pt-14px" v-for="(item,index) of showMyList">
-            <div class="text-#575757 text-14px mb-3px">2025.01.12</div>
+            <div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div>
-            <div class="flex mb-22px">
+            <div class="flex mb-22px" v-for="(item1,index1) of item.list">
-              <div class="flex-shrink-0 mr-10px">
+              <div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
+                <x-image class="w-80px h-80px" :src="item1?.auctionArtworkInfo?.artwork?.hdPic" alt=""/>
               </div>
               <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
+                <div class="text-#000 text-16px ellipsis line-height-21px">{{item1?.auctionArtworkInfo?.artworkTitle}}</div>
-                <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
-              </div>
-            </div>
-            <div class="flex">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
-              </div>
-              <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
-                <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-[#fdc181ff] line-height-none">成交价：RMB 10,000</div>
-              </div>
-            </div>
-          </div>
-          <div class="px-16px pt-14px">
-            <div class="text-#575757 text-14px mb-3px">2025.01.12</div>
-            <div class="flex mb-22px">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
-              </div>
-              <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
-                <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
-              </div>
-            </div>
-            <div class="flex">
-              <div class="flex-shrink-0 mr-10px">
-                <img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
-              </div>
-              <div class="flex flex-col justify-between">
-                <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
                 <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
                 <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
               </div>