fix: 修复通知列表结束标记显示条件及图片懒加载问题

修复系统通知列表在没有数据时仍显示结束标记的问题，添加对列表长度的判断
为收藏列表和图片浏览添加延迟布局刷新以解决渲染问题
修正图片路径中的多余斜杠并统一使用懒加载
为图片浏览组件添加ESC键关闭功能

src/components/ai/aiItem.vue

@@ -47,7 +47,7 @@
                     <div class="star-box flex1 flexacenter">
                         <span class="spot-title">推荐星级：</span>
                         <img v-for="item in Number(item.score)" :key="item" class="star-item" src="@/assets/img/publicImage/star-icon.svg" />
-                        <img v-if="item.scoreHalf" class="star-item" src="@/assets/img/publicImage//star-half.svg" />
+                        <img v-if="item.scoreHalf" class="star-item" src="@/assets/img/publicImage/star-half.svg" />
                     </div>
                 </div>
                 <div class="spot flexflex" wx:if="{{ item.recommendation_reason }}">
@@ -56,7 +56,7 @@
                 </div>
                 <div class="spot" v-if="item.images.length > 0">
                     <div class="scroll-view">
-                        <img class="img" @click="openImageShow(item.images, index)" v-for="(source, index) in item.images" :key="index" :src="source" alt="图片" />
+                        <img class="img" @click="openImageShow(item.images, index)" v-for="(source, index) in item.images" :key="index" v-lazy="source" alt="图片" />
                     </div>
                 </div>
             </div>

src/components/detail/imageWatch.vue

@@ -6,7 +6,7 @@
                 <el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="index" indicator-position="none" ref="carousel" @change="carouselChange">
                     <el-carousel-item v-for="(item, i) in list" :key="i">
                         <div class="dis-f jus-x al-item" v-if="item">
-                            <div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center;">
+                            <div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center">
                                 <video-box :src="item.url || item['videourl']" :val="i" :poster="item.thumbnail" :imageTab="imageTab"></video-box>
                                 <!-- <video ref="video" v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video> -->
                             </div>
@@ -23,14 +23,14 @@
         <div class="tab-text">{{ `${imageTab + 1}/${list.length}` }}</div>
         <div class="dis-f jus-x al-item">
             <div class="list-img-box dis-f al-item jus-x">
-                <div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r" style="margin-bottom: 10px;">
+                <div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r" style="margin-bottom: 10px">
-                    <div class="voide"  v-if="item['type'] != 'attachment'">
+                    <div class="voide" v-if="item['type'] != 'attachment'">
-                        <div class="icon-box dis-f jus-x al-item" :class="{ 'bor-r-8': imageTab === i, 'select-box': imageTab === i}">
+                        <div class="icon-box dis-f jus-x al-item" :class="{ 'bor-r-8': imageTab === i, 'select-box': imageTab === i }">
                             <img src="../../assets/img/detail/videoStop.svg" class="icon" alt="" />
                         </div>
                     </div>
                     <div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i && item.thumbnail }, { 'voide-img': !item.thumbnail }]">
-                        <img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;" />
+                        <img v-lazy="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover" />
                     </div>
                 </div>
             </div>
@@ -40,10 +40,10 @@
 </template>
 
 <script setup>
-import { set } from "nprogress"
+import { set } from "nprogress";
 
-import { reactive, onMounted, ref, defineProps, watchEffect, watch } from "vue"
+import { reactive, onMounted, ref, defineProps, watchEffect, watch, onBeforeUnmount } from "vue";
-import videoBox from "@/components/public/video-box.vue"
+import videoBox from "@/components/public/video-box.vue";
 
 // type 的类型代表  attachment 图片  videos  视频   lives 直播
 const props = defineProps({
@@ -52,13 +52,13 @@ const props = defineProps({
     list: {
         type: Array,
         default: function () {
-            return []
+            return [];
         },
     },
     index: {
         type: Number,
         default: function () {
-            return 0
+            return 0;
         },
     },
     close: {
@@ -68,47 +68,55 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-})
+});
 
-let show = props.show
+let show = props.show;
-let list = ref([])
+let list = ref([]);
-let close = props.close
+let close = props.close;
 
-let carousel = ref(null)
+let carousel = ref(null);
-let imageTab = ref(0)
+let imageTab = ref(0);
 
 //上一张
-let prev = () => carousel.value.prev()
+let prev = () => carousel.value.prev();
 
 // 轮播图滚动后事件
-const carouselChange = value => {
+const carouselChange = (value) => {
-    imageTab.value = value
+    imageTab.value = value;
-}
+};
 
 //下一张
-let next = () => carousel.value.next()
+let next = () => carousel.value.next();
 
 //点击预览图
-let watchSet = num => {
+let watchSet = (num) => {
-    carousel.value.setActiveItem(num)
+    carousel.value.setActiveItem(num);
-}
+};
+
+const handleEscKey = e => (e.key ==  "Escape" && close())
 
 onMounted(() => {
     watchEffect(() => {
-        show = props.show
+        show = props.show;
-        list.value = props.list
+        list.value = props.list;
-        imageTab.value = props.index
+        imageTab.value = props.index;
         // carousel.value.setActiveItem(props.index)
-    })
+    });
-})
+
+    window.addEventListener("keydown", handleEscKey);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("keydown", handleEscKey);
+});
 
 watch(
     () => props.index,
     (newValue, oldValue) => {
-        imageTab.value = newValue
+        imageTab.value = newValue;
-        watchSet(imageTab.value)
+        watchSet(imageTab.value);
     }
-)
+);
 </script>
 <style scoped lang="less">
 img {

src/components/user/systematic-notification-pop.vue

@@ -171,7 +171,7 @@
                     </div>
                 </template>
 
-                <div class="end" v-if="page == 0">- end -</div>
+                <div class="end" v-if="page == 0 && list.length > 0">- end -</div>
             </div>
         </div>
     </div>

src/views/user.vue

@@ -381,6 +381,11 @@ const getFavData = () => {
                 masonryInstance.reloadItems();
                 masonryInstance.layout();
                 loading.close();
+
+                setTimeout(() => {
+                    masonryInstance.reloadItems();
+                    masonryInstance.layout();
+                }, 1000);
             });
         })
         .finally(() => {
@@ -432,6 +437,10 @@ let cancelCollection = (data) => {
                 masonryInstance.reloadItems();
                 masonryInstance.layout();
                 loading.close();
+                setTimeout(() => {
+                    masonryInstance.reloadItems();
+                    masonryInstance.layout();
+                }, 1000);
             });
         });
 };
@@ -464,6 +473,10 @@ const refillData = (index) => {
             nextTick(() => {
                 masonryInstance.reloadItems();
                 masonryInstance.layout();
+                setTimeout(() => {
+                    masonryInstance.reloadItems();
+                    masonryInstance.layout();
+                }, 1000);
             });
         });
 };