From a3a305eeeb3cd44dc16b6b838530250949f260f4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com>
Date: Tue, 26 Aug 2025 18:53:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=BB=93=E6=9D=9F=E6=A0=87=E8=AE=B0=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=9D=A1=E4=BB=B6=E5=8F=8A=E5=9B=BE=E7=89=87=E6=87=92?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复系统通知列表在没有数据时仍显示结束标记的问题，添加对列表长度的判断
为收藏列表和图片浏览添加延迟布局刷新以解决渲染问题
修正图片路径中的多余斜杠并统一使用懒加载
为图片浏览组件添加ESC键关闭功能
---
 src/components/ai/aiItem.vue                  |  4 +-
 src/components/detail/imageWatch.vue          | 72 ++++++++++---------
 .../user/systematic-notification-pop.vue      |  2 +-
 src/views/user.vue                            | 13 ++++
 4 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/src/components/ai/aiItem.vue b/src/components/ai/aiItem.vue
index 18eaa50..66b2c36 100644
--- a/src/components/ai/aiItem.vue
+++ b/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>
diff --git a/src/components/detail/imageWatch.vue b/src/components/detail/imageWatch.vue
index bba3ea6..a450d46 100644
--- a/src/components/detail/imageWatch.vue
+++ b/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 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 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="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 videoBox from "@/components/public/video-box.vue"
+import { reactive, onMounted, ref, defineProps, watchEffect, watch, onBeforeUnmount } from "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 list = ref([])
-let close = props.close
+let show = props.show;
+let list = ref([]);
+let close = props.close;
 
-let carousel = ref(null)
-let imageTab = ref(0)
+let carousel = ref(null);
+let imageTab = ref(0);
 
 //上一张
-let prev = () => carousel.value.prev()
+let prev = () => carousel.value.prev();
 
 // 轮播图滚动后事件
-const carouselChange = value => {
-    imageTab.value = value
-}
+const carouselChange = (value) => {
+    imageTab.value = value;
+};
 
 //下一张
-let next = () => carousel.value.next()
+let next = () => carousel.value.next();
 
 //点击预览图
-let watchSet = num => {
-    carousel.value.setActiveItem(num)
-}
+let watchSet = (num) => {
+    carousel.value.setActiveItem(num);
+};
+
+const handleEscKey = e => (e.key ==  "Escape" && close())
 
 onMounted(() => {
     watchEffect(() => {
-        show = props.show
-        list.value = props.list
-        imageTab.value = props.index
+        show = props.show;
+        list.value = props.list;
+        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
-        watchSet(imageTab.value)
+        imageTab.value = newValue;
+        watchSet(imageTab.value);
     }
-)
+);
 </script>
 <style scoped lang="less">
 img {
diff --git a/src/components/user/systematic-notification-pop.vue b/src/components/user/systematic-notification-pop.vue
index 796fa7e..bf4fd75 100644
--- a/src/components/user/systematic-notification-pop.vue
+++ b/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>
diff --git a/src/views/user.vue b/src/views/user.vue
index 1df4d0c..8b5ba92 100644
--- a/src/views/user.vue
+++ b/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);
             });
         });
 };