From cc80b87fee920a711dcf51241775766f04050a27 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Sat, 11 May 2024 18:27:35 +0800
Subject: [PATCH] fixed sd page waterfall component

---
 web/src/views/ImageSd.vue | 139 +++++++++++++++++++++++++-------------
 1 file changed, 91 insertions(+), 48 deletions(-)

diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index 991fbe2c..b1c5b407 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -292,7 +292,7 @@
             <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
           </div>
         </div>
-        <div class="task-list-box" @scrollend="handleScrollEnd">
+        <div class="task-list-box">
           <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
             <div class="job-list-box">
               <h2>任务列表</h2>
@@ -339,47 +339,79 @@
               <h2>创作记录</h2>
               <div class="finish-job-list">
                 <div v-if="finishedJobs.length > 0">
-                  <ItemList :items="finishedJobs" :width="240" :gap="16">
-                    <template #default="scope">
-                      <div class="job-item animate" @click="showTask(scope.item)">
+                  <v3-waterfall
+                      id="waterfall"
+                      :list="finishedJobs"
+                      srcKey="img_thumb"
+                      :gap="20"
+                      :bottomGap="10"
+                      :colWidth="colWidth"
+                      :distanceToScroll="100"
+                      :isLoading="loading"
+                      :isOver="isOver"
+                      @scrollReachBottom="fetchFinishJobs()">
+                    <template #default="slotProp">
+                      <div class="job-item animate" @click="showTask(slotProp.item)">
                         <el-image
-                            :src="scope.item['img_url']+'?imageView2/1/w/240/h/240/q/75'"
+                            :src="slotProp.item['img_thumb']"
                             fit="cover"
-                            loading="lazy">
-                          <template #placeholder>
-                            <div class="image-slot">
-                              正在加载图片
-                            </div>
-                          </template>
-
-                          <template #error>
-                            <div class="image-slot">
-                              <el-icon>
-                                <Picture/>
-                              </el-icon>
-                            </div>
-                          </template>
-                        </el-image>
-
+                            loading="lazy"/>
                         <div class="remove">
-                          <el-button type="danger" :icon="Delete" @click="removeImage($event,scope.item)" circle/>
-                          <el-button type="warning" v-if="scope.item.publish"
-                                     @click="publishImage($event,scope.item, false)"
+                          <el-button type="danger" :icon="Delete" @click="removeImage($event,slotProp.item)" circle/>
+                          <el-button type="warning" v-if="slotProp.item.publish"
+                                     @click="publishImage($event,slotProp.item, false)"
                                      circle>
                             <i class="iconfont icon-cancel-share"></i>
                           </el-button>
-                          <el-button type="success" v-else @click="publishImage($event,scope.item, true)" circle>
+                          <el-button type="success" v-else @click="publishImage($event,slotProp.item, true)" circle>
                             <i class="iconfont icon-share-bold"></i>
                           </el-button>
                         </div>
                       </div>
                     </template>
-                  </ItemList>
+                  </v3-waterfall>
 
-                  <div class="no-more-data" v-if="isOver">
-                    <span>没有更多数据了</span>
-                    <i class="iconfont icon-face"></i>
-                  </div>
+                  <!--                                    <ItemList :items="finishedJobs" :width="240" :gap="16">-->
+                  <!--                                      <template #default="scope">-->
+                  <!--                                        <div class="job-item animate" @click="showTask(scope.item)">-->
+                  <!--                                          <el-image-->
+                  <!--                                              :src="scope.item['img_url']+'?imageView2/1/w/240/h/240/q/75'"-->
+                  <!--                                              fit="cover"-->
+                  <!--                                              loading="lazy">-->
+                  <!--                                            <template #placeholder>-->
+                  <!--                                              <div class="image-slot">-->
+                  <!--                                                正在加载图片-->
+                  <!--                                              </div>-->
+                  <!--                                            </template>-->
+
+                  <!--                                            <template #error>-->
+                  <!--                                              <div class="image-slot">-->
+                  <!--                                                <el-icon>-->
+                  <!--                                                  <Picture/>-->
+                  <!--                                                </el-icon>-->
+                  <!--                                              </div>-->
+                  <!--                                            </template>-->
+                  <!--                                          </el-image>-->
+
+                  <!--                                          <div class="remove">-->
+                  <!--                                            <el-button type="danger" :icon="Delete" @click="removeImage($event,scope.item)" circle/>-->
+                  <!--                                            <el-button type="warning" v-if="scope.item.publish"-->
+                  <!--                                                       @click="publishImage($event,scope.item, false)"-->
+                  <!--                                                       circle>-->
+                  <!--                                              <i class="iconfont icon-cancel-share"></i>-->
+                  <!--                                            </el-button>-->
+                  <!--                                            <el-button type="success" v-else @click="publishImage($event,scope.item, true)" circle>-->
+                  <!--                                              <i class="iconfont icon-share-bold"></i>-->
+                  <!--                                            </el-button>-->
+                  <!--                                          </div>-->
+                  <!--                                        </div>-->
+                  <!--                                      </template>-->
+                  <!--                                    </ItemList>-->
+
+                  <!--                  <div class="no-more-data" v-if="isOver">-->
+                  <!--                    <span>没有更多数据了</span>-->
+                  <!--                    <i class="iconfont icon-face"></i>-->
+                  <!--                  </div>-->
                 </div>
                 <el-empty :image-size="100" v-else/>
               </div> <!-- end finish job list-->
@@ -509,7 +541,7 @@
 
 <script setup>
 import {onMounted, onUnmounted, ref} from "vue"
-import {Delete, DocumentCopy, InfoFilled, Orange, Picture} from "@element-plus/icons-vue";
+import {DocumentCopy, InfoFilled, Orange, Picture} from "@element-plus/icons-vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
 import ItemList from "@/components/ItemList.vue";
@@ -526,8 +558,18 @@ const showTaskDialog = ref(false)
 const item = ref({})
 const showLoginDialog = ref(false)
 const isLogin = ref(false)
+const loading = ref(true)
+const colWidth = ref(240)
+// 计算瀑布流列宽度
+const calcColWidth = () => {
+  const listBoxWidth = window.innerWidth - 400
+  const rows = Math.floor(listBoxWidth / colWidth.value)
+  colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows)
+}
+calcColWidth()
 
 window.onresize = () => {
+  calcColWidth()
   listBoxHeight.value = window.innerHeight - 40
   paramBoxHeight.value = window.innerHeight - 150
 }
@@ -604,7 +646,7 @@ const connect = () => {
         const message = String(reader.result)
         if (message === "FINISH") {
           page.value = 1
-          fetchFinishJobs(page.value)
+          fetchFinishJobs()
           isOver.value = false
         }
         fetchRunningJobs()
@@ -688,31 +730,32 @@ const fetchRunningJobs = () => {
   })
 }
 
-const handleScrollEnd = () => {
-  if (isOver.value === true) {
-    return
-  }
-  page.value += 1
-  fetchFinishJobs(page.value)
-}
-
-const page = ref(1)
-const pageSize = ref(15)
+const page = ref(0)
+const pageSize = ref(20)
 const isOver = ref(false)
 // 获取已完成的任务
-const fetchFinishJobs = (page) => {
+const fetchFinishJobs = () => {
   if (!isLogin.value) {
     return
   }
-  httpGet(`/api/sd/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
+  loading.value = true
+  page.value = page.value + 1
+
+  httpGet(`/api/sd/jobs?status=1&page=${page.value}&page_size=${pageSize.value}`).then(res => {
     if (res.data.length < pageSize.value) {
       isOver.value = true
     }
-    if (page === 1) {
-      finishedJobs.value = res.data
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(res.data)
+    const imageList = res.data
+    for (let i = 0; i < imageList.length; i++) {
+      imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
     }
+    if (page === 1) {
+      finishedJobs.value = imageList
+    } else {
+      finishedJobs.value = finishedJobs.value.concat(imageList)
+    }
+
+    loading.value = false
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)
   })