diff --git a/web/src/main.js b/web/src/main.js index 189baf41..10015992 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -64,8 +64,6 @@ import { Uploader, } from "vant"; import { router } from "@/router"; -import "v3-waterfall/dist/style.css"; -import V3waterfall from "v3-waterfall"; import "@/assets/css/theme-dark.styl"; import "@/assets/css/theme-light.styl"; import "@/assets/css/common.styl"; @@ -104,7 +102,6 @@ app.use(ShareSheet); app.use(Switch); app.use(Uploader); app.use(Tag); -app.use(V3waterfall); app.use(Overlay); app.use(Col); app.use(Row); diff --git a/web/src/views/Dalle.vue b/web/src/views/Dalle.vue index b48b4d73..f5e6ccf3 100644 --- a/web/src/views/Dalle.vue +++ b/web/src/views/Dalle.vue @@ -361,15 +361,7 @@ const qualities = [ { name: "高清", value: "hd" }, ]; const dalleSizes = ["1024x1024", "1792x1024", "1024x1792"]; -const fluxSizes = [ - "1024x1024", - "1024x768", - "768x1024", - "1280x960", - "960x1280", - "1366x768", - "768x1366", -]; +const fluxSizes = ["1024x1024", "1152x896", "896x1152", "1280x960", "1024x576"]; const sizes = ref(dalleSizes); const styles = [ { name: "生动", value: "vivid" }, @@ -385,7 +377,9 @@ const params = ref({ const finishedJobs = ref([]); const runningJobs = ref([]); const allowPulling = ref(true); // 是否允许轮询 +const downloadPulling = ref(false); // 下载轮询 const tastPullHandler = ref(null); +const downloadPullHandler = ref(null); const power = ref(0); const dallPower = ref(0); // 画一张 SD 图片消耗算力 const clipboard = ref(null); @@ -429,6 +423,9 @@ onUnmounted(() => { if (tastPullHandler.value) { clearInterval(tastPullHandler.value); } + if (downloadPullHandler.value) { + clearInterval(downloadPullHandler.value); + } }); const initData = () => { @@ -447,6 +444,14 @@ const initData = () => { fetchRunningJobs(); } }, 5000); + + // 图片下载轮询 + downloadPullHandler.value = setInterval(() => { + if (downloadPulling.value) { + page.value = 0; + fetchFinishJobs(); + } + }, 5000); }) .catch(() => {}); }; @@ -498,10 +503,21 @@ const fetchFinishJobs = () => { loading.value = false; } const imageList = res.data.items; + let needPulling = false; 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 (imageList[i]["img_url"]) { + imageList[i]["img_thumb"] = + imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"; + } else if (imageList[i].progress === 100) { + needPulling = true; + imageList[i]["img_thumb"] = waterfallOptions.loadProps.loading; + } } + // 如果当前是第一页,则开启图片下载轮询 + if (page.value === 1) { + downloadPulling.value = needPulling; + } + if (page.value === 1) { finishedJobs.value = imageList; } else { diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index fadd4d32..365058ee 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -1330,7 +1330,7 @@ const fetchFinishJobs = () => { if (jobs[i].progress === 100) { hasDownload = true; } - jobs[i]["img_thumb"] = "/images/img-placeholder.jpg"; + jobs[i]["img_thumb"] = waterfallOptions.loadProps.loading; } // 如果当前是第一页,则开启图片下载轮询 if (page.value === 1) {