From 0d7deafeb0b204c4d2d8b1d843662474ba5e6a93 Mon Sep 17 00:00:00 2001
From: raoyongjun <785755591@qq.com>
Date: Fri, 26 Apr 2024 23:09:04 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=9D=A1=E4=BB=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home/main.ts               |   3 +-
 src/views/home/content/Content.vue | 475 +++++++++++++++--------------
 2 files changed, 252 insertions(+), 226 deletions(-)

diff --git a/src/api/home/main.ts b/src/api/home/main.ts
index 65a7b7b..618ab9b 100644
--- a/src/api/home/main.ts
+++ b/src/api/home/main.ts
@@ -261,11 +261,12 @@ export async function getPictureList(params: any): Promise<any> {
     headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
   })
 
-  const { data: { records, pages, total } } = res
+  const { data: { records, pages, total, current } } = res
   return {
     pageCount: pages,
     data: records,
     total,
+    current,
   }
 }
 
diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 6ae860a..d24574c 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -61,6 +61,7 @@ const deviceHeight = ref(600)
 // let _imagesload: any
 // const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
+const waterfallRef = ref(null)
 const viewMode = ref('masonry')
 const pagination = reactive({
   pageNo: 0,
@@ -145,16 +146,16 @@ useInfiniteScroll(
 )
 
 onBeforeMount(async () => {
-  const more = await featchList()
-  more.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  listData.value = more
-  const tmore = await featchList()
-  tmore.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
-  })
-  listData.value = listData.value.concat(tmore)
+  // const more = await featchList()
+  // more.forEach((item) => {
+  //   item.calHeight = 182 * item.high / item.wide
+  // })
+  // listData.value = more
+  // const tmore = await featchList()
+  // tmore.forEach((item) => {
+  //   item.calHeight = 182 * item.high / item.wide
+  // })
+  // listData.value = listData.value.concat(tmore)
   const screenWidth = window.screen.width
   if (screenWidth > 1920 && screenWidth <= 2560)
     cols.value = 11
@@ -218,6 +219,16 @@ watch(
   },
 )
 
+watch(
+  () => configStore.getAsideValue,
+  async (newVal, oldVal) => {
+    if (newVal) {
+      reset()
+      loadMore()
+    }
+  },
+)
+
 async function featchList(userSearchId?: string) {
   loading.value = true
   try {
@@ -235,6 +246,7 @@ async function featchList(userSearchId?: string) {
       pageCount: 0,
       data: [],
       total: 0,
+      current: 1,
     }
     const sortObj: any = {} // rao start
     if (sortBy.orderbyvalue == 'pictureResult')
@@ -266,12 +278,14 @@ async function featchList(userSearchId?: string) {
         upUserName: searchValue,
       })
     }
-    const { data, pageCount, total } = result
+    const { data, pageCount, total, current } = result
+    pagination.pageNo = current
     totalCount.value = total
     canloadMore = pageCount >= pagination.pageNo && pageCount > 0
 
     const list = data.map((item) => {
       return {
+        id: item.id,
         calHeight: 0,
         imgUrl: item.imgurl,
         thumburl: item.serverThumbnailUrl,
@@ -306,7 +320,18 @@ async function loadMore() {
     item.calHeight = 182 * item.high / item.wide
   })
   // listData.value.push(...more)
+  if (pagination.pageNo == 1) {
+    listData.value = []
+  }
+  else {
+    setTimeout(() => {
+      const height = document.getElementsByClassName('vue-waterfall-column')[0].style.height - 300
+      console.log('listData.value出来了height', document.getElementById('vueWaterfall').style.height)
+      el.value?.scrollTo({ top: height, behavior: 'smooth' })
+    }, 50)
+  }
   listData.value = listData.value.concat(more)
+  waterfallRef.value?.resize()
   console.log('listData.value出来了', listData.value)
 }
 
@@ -498,34 +523,34 @@ watch(
   { deep: true },
 )
 
-function reset() {
+function reset(val?) {
   pagination.pageNo = 0
   pagination.pageSize = 30
+  listData.value = []
   listData.value.length = 0
   loading.value = false
   canloadMore = true
   filterId = null
-
   // layout()
 }
 
 async function refreshHandler(filtersearchId?: any) {
-  reset()
+  reset(true)
 
   if (filtersearchId)
     filterId = filtersearchId
-
-  nextTick(() => {
-    setTimeout(() => {
-      useInfiniteScroll(
-        el as any,
-        () => {
-          loadMore()
-        },
-        { distance: 10, canLoadMore: () => canloadMore },
-      )
-    }, 300)
-  })
+  loadMore(true)
+  // nextTick(() => {
+  //   setTimeout(() => {
+  //     useInfiniteScroll(
+  //       el as any,
+  //       () => {
+  //         loadMore()
+  //       },
+  //       { distance: 10, canLoadMore: () => canloadMore },
+  //     )
+  //   }, 300)
+  // })
 }
 
 function getAvatar(url: string): string {
@@ -750,225 +775,225 @@ defineExpose({
           <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
       </div>
 
-      <n-spin :show="loading">
-        <div v-if="viewMode != 'masonry'" ref="el" class="scroll" :style="listStyle">
-          <div class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }">
-            <div
-              v-for="(item, index) in listData"
-              :key="item.calHeight"
-              :style="{ height: `${gridHeight}px` }"
-              class="grid-item"
+      <!-- <n-spin :show="loading"> -->
+      <div v-if="viewMode != 'masonry'" ref="el" class="scroll" :style="listStyle">
+        <div class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }">
+          <div
+            v-for="(item, index) in listData"
+            :key="item.id"
+            :style="{ height: `${gridHeight}px` }"
+            class="grid-item"
+          >
+            <img
+              :key="item.id"
+              v-lazy="item.thumburl"
+              :class="{
+                'img-fit': viewMode === 'horizontalVersion',
+                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+              }"
+              :style="{ height: `${viewMode === 'masonry' ? `${item.calHeight}px` : `${gridHeight - 25}px`}` }"
+              class="img"
+              alt="加载错误"
+            >
+
+            <n-image
+              ref="imageRef"
+              :key="item.imgUrl"
+              class="img"
+              :img-props="{
+                onClick: ($event) => {
+                  hideDownload($event);
+                  showClose = true;
+                },
+              }"
+              :class="{
+                'img-fit': viewMode === 'horizontalVersion',
+                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+              }"
+              :preview-src="item.imgUrl"
+              :src="item.thumburl"
+              :fallback-src="bgLoadingImg"
+              :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
+              style="display: none"
+            />
+
+            <img
+              v-if="item.states == 3"
+              class="tag-status"
+              src="@/assets/images/task/tag-pass.png"
+              alt=""
+            >
+            <img
+              v-if="item.states == 5"
+              class="tag-status"
+              src="@/assets/images/task/tag-not-pass.png"
+              alt=""
             >
-              <img
-                :key="item.thumburl"
-                v-lazy="item.thumburl"
-                :class="{
-                  'img-fit': viewMode === 'horizontalVersion',
-                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                }"
-                :style="{ height: `${viewMode === 'masonry' ? `${item.calHeight}px` : `${gridHeight - 25}px`}` }"
-                class="img"
-                alt="加载错误"
-              >
-
-              <n-image
-                ref="imageRef"
-                :key="item.imgUrl"
-                class="img"
-                :img-props="{
-                  onClick: ($event) => {
-                    hideDownload($event);
-                    showClose = true;
-                  },
-                }"
-                :class="{
-                  'img-fit': viewMode === 'horizontalVersion',
-                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                }"
-                :preview-src="item.imgUrl"
-                :src="item.thumburl"
-                :fallback-src="bgLoadingImg"
-                :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
-                style="display: none"
-              />
 
-              <img
-                v-if="item.states == 3"
-                class="tag-status"
-                src="@/assets/images/task/tag-pass.png"
-                alt=""
-              >
-              <img
-                v-if="item.states == 5"
-                class="tag-status"
-                src="@/assets/images/task/tag-not-pass.png"
-                alt=""
-              >
-
-              <div v-if="item.similar != -1" class="percent">
-                <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
-                <div class="val">
-                  {{ `${item.similar}%` }}
-                </div>
-              </div>
-              <div v-if="isAllowDownload" class="glass">
-                <SvgIcon
-                  size="16"
-                  name="download"
-                  style="margin-top: -6px; cursor: pointer"
-                  @click="downloadImage(item)"
-                />
+            <div v-if="item.similar != -1" class="percent">
+              <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
+              <div class="val">
+                {{ `${item.similar}%` }}
               </div>
+            </div>
+            <div v-if="isAllowDownload" class="glass">
+              <SvgIcon
+                size="16"
+                name="download"
+                style="margin-top: -6px; cursor: pointer"
+                @click="downloadImage(item)"
+              />
+            </div>
 
-              <div class="info">
-                <div class="footer">
-                  <div class="img-name">
-                    <n-tooltip trigger="hover">
-                      <template #trigger>
-                        <span>{{ item.imgName }}</span>
-                      </template>
-                      <span
-                        style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
-                      >{{ item.imgName }}</span>
-                    </n-tooltip>
-                  </div>
-                  <div
-                    class="icon-wrap"
-                    @click="
-                      ($event) => {
-                        previewHandler(index, $event);
-                        hideDownload($event);
-                      }
-                    "
-                  >
-                    <SvgIcon
-                      size="13"
-                      name="magnifying-2"
-                      style="cursor: pointer; color: #898481"
-                    />
-                  </div>
+            <div class="info">
+              <div class="footer">
+                <div class="img-name">
+                  <n-tooltip trigger="hover">
+                    <template #trigger>
+                      <span>{{ item.imgName }}</span>
+                    </template>
+                    <span
+                      style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
+                    >{{ item.imgName }}</span>
+                  </n-tooltip>
                 </div>
-                <div class="left">
-                  <n-avatar
-                    :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
-                    class="avatar"
-                    round
+                <div
+                  class="icon-wrap"
+                  @click="
+                    ($event) => {
+                      previewHandler(index, $event);
+                      hideDownload($event);
+                    }
+                  "
+                >
+                  <SvgIcon
+                    size="13"
+                    name="magnifying-2"
+                    style="cursor: pointer; color: #898481"
                   />
-                  <span>{{ item.upname }}</span>
                 </div>
               </div>
+              <div class="left">
+                <n-avatar
+                  :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
+                  class="avatar"
+                  round
+                />
+                <span>{{ item.upname }}</span>
+              </div>
             </div>
           </div>
         </div>
-        <div v-if="viewMode === 'masonry'" ref="el" class="scroll" :style="listStyle">
-          <waterfall :col="cols" :data="listData" :gutter-width="10" @finish="finish">
-            <div
-              v-for="(item, index) in listData"
-              :key="item.calHeight"
-              class="grid-item"
+      </div>
+      <div v-if="viewMode === 'masonry'" ref="el" class="scroll" :style="listStyle">
+        <waterfall ref="waterfallRef" :col="cols" :data="listData" :gutter-width="10" @finish="finish">
+          <div
+            v-for="(item, index) in listData"
+            :key="item.id"
+            class="grid-item"
+          >
+            <img
+              :key="item.id"
+              v-lazy="item.thumburl"
+              :class="{
+                'img-fit': viewMode === 'horizontalVersion',
+                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+              }"
+              :style="{ height: `${item.calHeight}px` }"
+              class="img"
+              alt="加载错误"
             >
-              <img
-                :key="item.thumburl"
-                v-lazy="item.thumburl"
-                :class="{
-                  'img-fit': viewMode === 'horizontalVersion',
-                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                }"
-                :style="{ height: `${item.calHeight}px` }"
-                class="img"
-                alt="加载错误"
-              >
-
-              <n-image
-                ref="imageRef"
-                :key="item.imgUrl"
-                class="img"
-                :img-props="{
-                  onClick: ($event) => {
-                    hideDownload($event);
-                    showClose = true;
-                  },
-                }"
-                :class="{
-                  'img-fit': viewMode === 'horizontalVersion',
-                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                }"
-                :preview-src="item.imgUrl"
-                :src="item.thumburl"
-                :fallback-src="bgLoadingImg"
-                :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
-                style="display: none"
-              />
 
-              <img
-                v-if="item.states == 3"
-                class="tag-status"
-                src="@/assets/images/task/tag-pass.png"
-                alt=""
-              >
-              <img
-                v-if="item.states == 5"
-                class="tag-status"
-                src="@/assets/images/task/tag-not-pass.png"
-                alt=""
-              >
-
-              <div v-if="item.similar != -1" class="percent">
-                <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
-                <div class="val">
-                  {{ `${item.similar}%` }}
-                </div>
-              </div>
-              <div v-if="isAllowDownload" class="glass">
-                <SvgIcon
-                  size="16"
-                  name="download"
-                  style="margin-top: -6px; cursor: pointer"
-                  @click="downloadImage(item)"
-                />
+            <n-image
+              ref="imageRef"
+              :key="item.imgUrl"
+              class="img"
+              :img-props="{
+                onClick: ($event) => {
+                  hideDownload($event);
+                  showClose = true;
+                },
+              }"
+              :class="{
+                'img-fit': viewMode === 'horizontalVersion',
+                'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+              }"
+              :preview-src="item.imgUrl"
+              :src="item.thumburl"
+              :fallback-src="bgLoadingImg"
+              :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
+              style="display: none"
+            />
+
+            <img
+              v-if="item.states == 3"
+              class="tag-status"
+              src="@/assets/images/task/tag-pass.png"
+              alt=""
+            >
+            <img
+              v-if="item.states == 5"
+              class="tag-status"
+              src="@/assets/images/task/tag-not-pass.png"
+              alt=""
+            >
+
+            <div v-if="item.similar != -1" class="percent">
+              <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
+              <div class="val">
+                {{ `${item.similar}%` }}
               </div>
+            </div>
+            <div v-if="isAllowDownload" class="glass">
+              <SvgIcon
+                size="16"
+                name="download"
+                style="margin-top: -6px; cursor: pointer"
+                @click="downloadImage(item)"
+              />
+            </div>
 
-              <div class="info">
-                <div class="footer">
-                  <div class="img-name">
-                    <n-tooltip trigger="hover">
-                      <template #trigger>
-                        <span>{{ item.imgName }}</span>
-                      </template>
-                      <span
-                        style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
-                      >{{ item.imgName }}</span>
-                    </n-tooltip>
-                  </div>
-                  <div
-                    class="icon-wrap"
-                    @click="
-                      ($event) => {
-                        previewHandler(index, $event);
-                        hideDownload($event);
-                      }
-                    "
-                  >
-                    <SvgIcon
-                      size="13"
-                      name="magnifying-2"
-                      style="cursor: pointer; color: #898481"
-                    />
-                  </div>
+            <div class="info">
+              <div class="footer">
+                <div class="img-name">
+                  <n-tooltip trigger="hover">
+                    <template #trigger>
+                      <span>{{ item.imgName }}</span>
+                    </template>
+                    <span
+                      style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
+                    >{{ item.imgName }}</span>
+                  </n-tooltip>
                 </div>
-                <div class="left">
-                  <n-avatar
-                    :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
-                    class="avatar"
-                    round
+                <div
+                  class="icon-wrap"
+                  @click="
+                    ($event) => {
+                      previewHandler(index, $event);
+                      hideDownload($event);
+                    }
+                  "
+                >
+                  <SvgIcon
+                    size="13"
+                    name="magnifying-2"
+                    style="cursor: pointer; color: #898481"
                   />
-                  <span>{{ item.upname }}</span>
                 </div>
               </div>
+              <div class="left">
+                <n-avatar
+                  :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
+                  class="avatar"
+                  round
+                />
+                <span>{{ item.upname }}</span>
+              </div>
             </div>
-          </waterfall>
-        </div>
-      </n-spin>
+          </div>
+        </waterfall>
+      </div>
+      <!-- </n-spin> -->
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />
-- 
2.39.3


From 908fc9c799f1db31ee579849c157920b5378bf44 Mon Sep 17 00:00:00 2001
From: raoyongjun <785755591@qq.com>
Date: Sat, 27 Apr 2024 08:09:00 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/content/Content.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index d24574c..4ff7e28 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -322,17 +322,20 @@ async function loadMore() {
   // listData.value.push(...more)
   if (pagination.pageNo == 1) {
     listData.value = []
+    listData.value = listData.value.concat(more)
+    console.log('listData.value出来了', listData.value)
+    waterfallRef.value?.resize()
   }
   else {
-    setTimeout(() => {
-      const height = document.getElementsByClassName('vue-waterfall-column')[0].style.height - 300
-      console.log('listData.value出来了height', document.getElementById('vueWaterfall').style.height)
-      el.value?.scrollTo({ top: height, behavior: 'smooth' })
-    }, 50)
+    // setTimeout(() => {
+    //   const height = el.value?.scrollHeight - 1000
+    //   console.log('listData.value出来了height', height)
+    //   el.value?.scrollTo({ top: height, behavior: 'smooth' })
+    // }, 50)
+    listData.value = listData.value.concat(more)
+    console.log('listData.value出来了', listData.value)
+    waterfallRef.value?.mix()
   }
-  listData.value = listData.value.concat(more)
-  waterfallRef.value?.resize()
-  console.log('listData.value出来了', listData.value)
 }
 
 const gridHeight = computed(() => {
-- 
2.39.3