Merge pull request 'feat: 修改问题' (#297) from fix/updatesyspic into test

Reviewed-on: #297

src/layout/components/Header/RecycleModal.vue

@@ -213,17 +213,18 @@ async function loadMore() {
   const more = await featchList()
   more.forEach((item) => {
     item.calHeight = 182 * item.high / item.wide
+    item.thumburl = item.serverThumbnailUrl || item.imgUrl
   })
   if (pagination.pageNo <= 1) {
     listData.value = []
     listData.value = listData.value.concat(more)
-    console.log('listData.value出来了11111111111111', listData.value, pagination.pageNo)
+    console.log('listData.value可疑文件夹出来了11111111111111', listData.value, pagination.pageNo)
     if (pagination.pageNo <= 1)
       waterfallRef.value?.resize()
   }
   else {
     listData.value = listData.value.concat(more)
-    console.log('listData.value出来了2222222222', listData.value, pagination.pageNo)
+    console.log('listData.value可疑文件夹出来了2222222222', listData.value, pagination.pageNo)
     // waterfallRef.value?.mix()
     updateHtml()
   }
@@ -680,7 +681,7 @@ onBeforeMount(async () => {
   else if (screenWidth < 1792 && screenWidth > 1440)
     cols.value = 7
   else if (screenWidth <= 1440)
-    cols.value = 6
+    cols.value = 5
 })
 
 function previewHandler(index: number, event: MouseEvent, thumburl, imgUrl) {
@@ -784,7 +785,7 @@ watch(() => show.value, async (newVal) => {
                 >
                   <img
                     :key="item.pictureId"
-                    v-lazy="item.imgUrl"
+                    v-lazy="item.thumburl"
                     :class="{
                       'img-fit': viewMode === 'horizontalVersion',
                       'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
@@ -845,7 +846,7 @@ watch(() => show.value, async (newVal) => {
                 >
                   <img
                     :key="item.pictureId"
-                    v-lazy="item.imgUrl"
+                    v-lazy="item.thumburl"
                     :class="{
                       'img-fit': viewMode === 'horizontalVersion',
                       'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
@@ -1075,7 +1076,7 @@ watch(() => show.value, async (newVal) => {
       border-radius: 6px 0px 6px 0px;
       z-index: 5;
       right: 16px;
-      top: 6px;
+      top: 12px;
       color: #fff;
       font-size: 14px;
 

src/views/home/content/Content.vue

@@ -6,7 +6,7 @@ import { useInfiniteScroll } from '@vueuse/core'
 import dayjs from 'dayjs'
 
 // import imagesloaded from 'imagesloaded'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, debounce } from 'lodash-es'
 
 // import Masonry from 'masonry-layout'
 import { NIcon, useMessage } from 'naive-ui'
@@ -226,10 +226,15 @@ watch(() => collapse.value, (newVal, oldVal) => {
   }
 })
 
+const asideLoadMore = debounce(() => {
+  // console.log("加载了这里首页的数据--------------------");
+  loadMore()
+}, 200)
+
 watch(
   () => searchValue.value,
   async (newVal, oldVal) => {
-    // console.log('搜索框的值', newVal, oldVal)
+    // console.log('首页搜索框的值', newVal, oldVal)
     if (newVal) {
       isInitSeaerch.value = true
       // pagination.pageNo = 0
@@ -238,29 +243,30 @@ watch(
       // isInitSeaerch.value = false
       // // configStore.setSearchValue("");
       reset()
-      loadMore()
-      isInitSeaerch.value = false
-    }
-    else {
-      isInitSeaerch.value = true
-      // pagination.pageNo = 0
-      // const more = await featchList()
-      // listData.value = more
-      // isInitSeaerch.value = false
-      reset()
-      loadMore()
+      // loadMore()
+      asideLoadMore()
       isInitSeaerch.value = false
     }
+    // else {
+    //   isInitSeaerch.value = true
+    //   // pagination.pageNo = 0
+    //   // const more = await featchList()
+    //   // listData.value = more
+    //   // isInitSeaerch.value = false
+    //   reset()
+    //   loadMore()
+    //   isInitSeaerch.value = false
+    // }
   },
 )
 
 watch(
   () => configStore.getAsideValue,
   async (newVal, oldVal) => {
-    // console.log('configStore.getAsideValue变化了啊', configStore.getAsideValue, pagination.pageNo)
+    // console.log('configStore.getAsideValue首页变化了啊', newVal, oldVal, Object.entries(newVal).toString() === Object.entries(oldVal).toString(), pagination.pageNo)
     if (pagination.pageNo > 1 && newVal && !(Object.entries(newVal).toString() === Object.entries(oldVal).toString())) {
       reset()
-      loadMore()
+      asideLoadMore()
     }
   },
 )
@@ -579,7 +585,9 @@ async function refreshHandler(filtersearchId?: any) {
 
   if (filtersearchId)
     filterId = filtersearchId
-  loadMore()
+  // console.log("执行了这里首页的数据");
+  // loadMore()
+  asideLoadMore()
   // nextTick(() => {
   //   setTimeout(() => {
   //     useInfiniteScroll(
@@ -1082,6 +1090,10 @@ defineExpose({
    margin-right: 16px;
   width: 100%;
 
+  ::v-deep(.vue-waterfall) {
+    padding-top: 2px;
+  }
+
   &-header {
     display: flex;
     justify-content: space-between;