From 6c47551b0368b89dc40ca1b2797354e183a38327 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Sun, 5 May 2024 10:52:29 +0800
Subject: [PATCH] fix bug for waterflow component

---
 CHANGELOG.md                 |  4 ++++
 web/src/views/Dalle.vue      | 13 +++++++------
 web/src/views/ImageMj.vue    | 16 ++++++++++------
 web/src/views/ImageSd.vue    | 14 ++++++++------
 web/src/views/ImagesWall.vue |  2 +-
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d3dd7b2..9b9b7840 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # 更新日志
 
+## v4.0.6
+
+* Bug修复：修复PC端画廊页面的瀑布流组件样式错乱问题
+
 ## v4.0.5
 
 * 功能优化：已授权系统在后台显示授权信息
diff --git a/web/src/views/Dalle.vue b/web/src/views/Dalle.vue
index 8e219175..1d56f412 100644
--- a/web/src/views/Dalle.vue
+++ b/web/src/views/Dalle.vue
@@ -105,7 +105,7 @@
               </div>
 
               <h2>创作记录</h2>
-              <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+              <div class="finish-job-list">
                 <div v-if="finishedJobs.length > 0">
                   <ItemList :items="finishedJobs" :width="240" :gap="16">
                     <template #default="scope">
@@ -272,7 +272,6 @@ const initData = () => {
     fetchFinishJobs(1)
     connect()
   }).catch(() => {
-    loading.value = false
   });
 }
 
@@ -341,6 +340,9 @@ const connect = () => {
 }
 
 const fetchRunningJobs = () => {
+  if (!isLogin.value) {
+    return
+  }
   // 获取运行中的任务
   httpGet(`/api/dall/jobs?status=0`).then(res => {
     const jobs = res.data
@@ -367,10 +369,11 @@ const fetchRunningJobs = () => {
 const page = ref(1)
 const pageSize = ref(15)
 const isOver = ref(false)
-const loading = ref(false)
 // 获取已完成的任务
 const fetchFinishJobs = (page) => {
-  loading.value = true
+  if (!isLogin.value) {
+    return
+  }
   httpGet(`/api/dall/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
     if (res.data.length < pageSize.value) {
       isOver.value = true
@@ -380,9 +383,7 @@ const fetchFinishJobs = (page) => {
     } else {
       finishedJobs.value = finishedJobs.value.concat(res.data)
     }
-    loading.value = false
   }).catch(e => {
-    loading.value = false
     ElMessage.error("获取任务失败：" + e.message)
   })
 }
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 7b480bdb..aa1a7b06 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -493,7 +493,7 @@
             </div>
 
             <h2>创作记录</h2>
-            <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+            <div class="finish-job-list">
               <div v-if="finishedJobs.length > 0">
                 <ItemList :items="finishedJobs" :width="240" :gap="16">
                   <template #default="scope">
@@ -593,7 +593,7 @@
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue"
+import {onMounted, onUnmounted, ref} from "vue"
 import {ChromeFilled, Delete, DocumentCopy, InfoFilled, Picture, Plus, UploadFilled} from "@element-plus/icons-vue";
 import Compressor from "compressorjs";
 import {httpGet, httpPost} from "@/utils/http";
@@ -793,6 +793,10 @@ httpGet("/api/config/get?key=system").then(res => {
 
 // 获取运行中的任务
 const fetchRunningJobs = () => {
+  if (!isLogin.value) {
+    return
+  }
+
   httpGet(`/api/mj/jobs?status=0`).then(res => {
     const jobs = res.data
     const _jobs = []
@@ -832,9 +836,11 @@ const handleScrollEnd = () => {
 const page = ref(1)
 const pageSize = ref(15)
 const isOver = ref(false)
-const loading = ref(false)
 const fetchFinishJobs = (page) => {
-  loading.value = true
+  if (!isLogin.value) {
+    return
+  }
+
   // 获取已完成的任务
   httpGet(`/api/mj/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
     const jobs = res.data
@@ -861,9 +867,7 @@ const fetchFinishJobs = (page) => {
     } else {
       finishedJobs.value = finishedJobs.value.concat(jobs)
     }
-    nextTick(() => loading.value = false)
   }).catch(e => {
-    loading.value = false
     ElMessage.error("获取任务失败：" + e.message)
   })
 }
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index 32697da1..4436ff0b 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -315,7 +315,7 @@
                 <el-empty :image-size="100" v-else/>
               </div>
               <h2>创作记录</h2>
-              <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+              <div class="finish-job-list">
                 <div v-if="finishedJobs.length > 0">
                   <ItemList :items="finishedJobs" :width="240" :gap="16">
                     <template #default="scope">
@@ -632,11 +632,14 @@ const initData = () => {
     fetchFinishJobs()
     connect()
   }).catch(() => {
-    loading.value = false
   });
 }
 
 const fetchRunningJobs = () => {
+  if (!isLogin.value) {
+    return
+  }
+  
   // 获取运行中的任务
   httpGet(`/api/sd/jobs?status=0`).then(res => {
     const jobs = res.data
@@ -671,10 +674,11 @@ const handleScrollEnd = () => {
 const page = ref(1)
 const pageSize = ref(15)
 const isOver = ref(false)
-const loading = ref(false)
 // 获取已完成的任务
 const fetchFinishJobs = (page) => {
-  loading.value = true
+  if (!isLogin.value) {
+    return
+  }
   httpGet(`/api/sd/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
     if (res.data.length < pageSize.value) {
       isOver.value = true
@@ -684,9 +688,7 @@ const fetchFinishJobs = (page) => {
     } else {
       finishedJobs.value = finishedJobs.value.concat(res.data)
     }
-    loading.value = false
   }).catch(e => {
-    loading.value = false
     ElMessage.error("获取任务失败：" + e.message)
   })
 }
diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue
index 1cf9cbfc..5e8b8f4a 100644
--- a/web/src/views/ImagesWall.vue
+++ b/web/src/views/ImagesWall.vue
@@ -72,7 +72,7 @@
           </template>
         </v3-waterfall>
 
-        <v3-waterfall v-if="imgType === 'dall'"
+        <v3-waterfall v-else-if="imgType === 'dall'"
                       id="waterfall"
                       :list="data['dall']"
                       srcKey="img_thumb"