10 changed files with 67 additions and 37 deletions
--- a/package.json
+++ b/package.json
@ -37,6 +37,7 @@
    "sortablejs": "^1.15.1",
    "vue": "^3.3.8",
    "vue-draggable-plus": "^0.3.5",
+    "vue-lazyload": "^3.0.0",
    "vue-mousetrap": "^1.0.5",
    "vue-router": "^4.1.6",
    "vue-types": "^4.2.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -71,6 +71,9 @@ dependencies:
  vue-draggable-plus:
    specifier: ^0.3.5
    version: 0.3.5(@types/sortablejs@1.15.7)
+  vue-lazyload:
+    specifier: ^3.0.0
+    version: 3.0.0
  vue-mousetrap:
    specifier: ^1.0.5
    version: 1.0.5
@ -7320,6 +7323,10 @@ packages:
      - supports-color
    dev: true

+  /vue-lazyload@3.0.0:
+    resolution: {integrity: sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==}
+    dev: false
+
  /vue-mousetrap@1.0.5:
    resolution: {integrity: sha512-mDyPBBTnOrpUNDZ4vjd7X8emYwKFG2/Rsi5coZKDmF+dM5XpENrnvdmef4xHq2gcZ1HVmHqeI5jQP17p9fFpzA==}
    dependencies:
--- a/src/assets/images/not-pass.png
+++ b/src/assets/images/not-pass.png
--- a/src/assets/images/pass.png
+++ b/src/assets/images/pass.png
--- a/src/layout/components/Header/RecycleModal.vue
+++ b/src/layout/components/Header/RecycleModal.vue
@ -732,7 +732,7 @@ watch(() => pagination.pageNo, (newVal, oldVal) => {
                >
                  <n-image
                    ref="imageRef"
-                    :src="item.imgUrl"
+                    :src="item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
                    :preview-src="item.imgUrl"
                    :fallback-src="bgLoadingImg"
                    class="img "
--- a/src/main.ts
+++ b/src/main.ts
@ -5,6 +5,9 @@ import router, { setupRouter } from './router'
 import { setupGlobalProperties, setupMousestrap, setupNaive, setupNaiveDiscreteApi, setupSvgIcon } from '@/plugins'
 import { setupStore } from '@/store'
 import 'virtual:svg-icons-register'
+import VueLazyload from 'vue-lazyload'
+import bgPng from '@/assets/images/bg-loading.png'
+import closePng from '@/assets/images/close.png'

 async function bootstrap() {
  const app = createApp(App)
@ -19,6 +22,12 @@ async function bootstrap() {
 const meta = document.createElement('meta')
  meta.name = 'naive-ui-style'
  document.head.appendChild(meta)
+  app.use(VueLazyload, {
+    preLoad: 1.3,
+    error: closePng,
+    loading: bgPng,
+    attempt: 1
+  })
  app.mount('#app', true)
 }

--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@ -115,20 +115,21 @@ const layout = debounce(() => {
    percentPosition: true,
    stagger: 10,
  })
+  loading.value = false
+  // 暂时注释，请忽略
+  // _imagesload = imagesloaded('.grid-item')
+
+  // _imagesload.on('done', (instance) => {
+  //   (_masonry as any).layout()
+  //   if (!el.value)
+  //     return
+  //   loading.value = false
+  // })

-  _imagesload = imagesloaded('.grid-item')
-
-  _imagesload.on('done', (instance) => {
-    (_masonry as any).layout()
-    if (!el.value)
-      return
-    loading.value = false
-  })
-
-  _imagesload.on('fail', (instance) => {
-    message.error('图片错误')
-    loading.value = false
-  })
+  // _imagesload.on('fail', (instance) => {
+  //   message.error('图片错误')
+  //   loading.value = false
+  // })
 }, 300)

 useInfiniteScroll(
@ -250,7 +251,7 @@ async function featchList(userSearchId?: string) {
    const list = data.map((item) => {
      return {
        imgUrl: item.imgurl,
-        thumburl: item.serverThumbnailUrl || item.imgurl || '',
+        thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg,
        upname: item.upname,
        ocrPictureclass: item.ocrPictureclass,
        uphead: item.uphead,
@ -295,6 +296,16 @@ const gridHeight = computed(() => {
  return height
 })

+const gridMinHeight = computed(() => {
+  let height = ''
+  if (viewMode.value === 'masonry' && loading.value)
+    height = '145px'
+  else 
+    height = ''
+
+  return height
+})
+
 async function oneCheck() {
  const asideVal = cloneDeep(configStore.getAsideValue)
  asideVal.upUserName = searchValue.value
@ -699,7 +710,7 @@ defineExpose({
            <div
              v-for="(item, index) in listData"
              :key="index"
-              :style="{ height: gridHeight }"
+              :style="{ height: gridHeight, minHeight: gridMinHeight }"
              class="grid-item"
            >
              <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
@ -724,17 +735,27 @@ defineExpose({
                :preview-src="item.imgUrl"
                :src="item.thumburl"
                :fallback-src="bgLoadingImg"
+                style="display: none"
              />
+              <img @click="
+                      ($event) => {
+                        previewHandler(index, $event);
+                        hideDownload($event);
+                      }
+                    " v-lazy="item.thumburl" class="img" :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }" alt="">
              <img
                v-if="item.states == 3"
                class="tag-status"
-                src="@/assets/images/task/tag-pass.png"
+                src="@/assets/images/pass.png"
                alt=""
              >
              <img
                v-if="item.states == 5"
                class="tag-status"
-                src="@/assets/images/task/tag-not-pass.png"
+                src="@/assets/images/not-pass.png"
                alt=""
              >
              <!-- @load="loadImgOver(item)" -->
@ -941,7 +962,7 @@ defineExpose({
      width: 182px;
      border-radius: 7px;
      margin-bottom: 10px;
-      overflow: hidden;
+      overflow-x: visible;
      position: relative;
      transition: 0.5s;
      margin: 0 6px 10px 6px;
@ -950,7 +971,7 @@ defineExpose({
        width: 46px;
        height: 22px;
        position: absolute;
-        left: -1px;
+        left: -3px;
        top: 10px;
      }

--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@ -813,18 +813,18 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
                flex: 1,
                // flex: 0.75,
                // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-                background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+                background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
              }
              : {
                height: '92vh',
                flex: 1,

                // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-                background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+                background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
              }
            : {
              // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-              background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+              background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
            }
        "
        @mouseover="overTaskHandle"
@ -1002,9 +1002,7 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
                  class="img-wrapper"
                  :style="{
                    // 'background-image': `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl})`,
-                    background: `url(${
-                      item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl
-                    }), url(${bgLoadingImg})`,
+                    background: `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl ? item.imgUrl : bgLoadingImg})`,
                  }"
                />
                <div class="small-mark" />
@ -1230,9 +1228,7 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
              class="img-wrapper"
              :style="{
                // 'background-image': `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl})`,
-                background: `url(${
-                  item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl
-                }), url(${bgLoadingImg})`,
+                background: `url(${item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl ? item.imgUrl : bgLoadingImg})`,
              }"
              @mouseover="overTaskHandelr(item)"
              @mouseleave="leaveTaskHandler"
--- a/src/views/worksheet/components/pictureCard.vue
+++ b/src/views/worksheet/components/pictureCard.vue
@ -70,17 +70,17 @@ function previewHandler(event: MouseEvent) {
            position: 'relative',
            flex: 2,
            // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-            background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+            background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
          }
          : {
            height: '92vh',
            flex: 2,
            // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-            background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+            background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
          }
        : {
          // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-          background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
+          background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
        }
    "
    @mouseover="overTaskHandle"
--- a/src/views/worksheet/content/Content.vue
+++ b/src/views/worksheet/content/Content.vue
@ -834,11 +834,7 @@ defineExpose({
          >
            <div
              class="img-wrapper"
-              :style="{
-                background: `url(${
-                  item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgurl
-                }), url(${bgLoadingImg})`,
-              }"
+              :style="{ background: `url(${item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgurl ? item.imgurl: bgLoadingImg})` }"
            />
            <div class="time-wrapper">
              <div class="time">