opt: optimize image compress alg, add cache control for image

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1702024026523') format('woff2'),
-       url('iconfont.woff?t=1702024026523') format('woff'),
-       url('iconfont.ttf?t=1702024026523') format('truetype');
+  src: url('iconfont.woff2?t=1703124384910') format('woff2'),
+       url('iconfont.woff?t=1703124384910') format('woff'),
+       url('iconfont.ttf?t=1703124384910') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-loading:before {
+  content: "\e627";
+}
+
 .icon-alipay:before {
   content: "\e634";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1278349",
+      "name": "loading",
+      "font_class": "loading",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
     {
       "icon_id": "1486848",
       "name": "支付宝支付",

web/src/views/ImageMj.vue

@@ -359,7 +359,7 @@
               <template #default="scope">
                 <div class="job-item">
                   <el-image
-                      :src="scope.item.type === 'upscale' ? scope.item['img_url'] + '?imageView2/1/w/240/h/300/q/75' : scope.item['img_url'] + '?imageView2/1/w/240/h/240/q/75'"
+                      :src="scope.item.type === 'upscale' ? scope.item['img_url'] + '?imageView2/1/w/480/h/600/q/75' : scope.item['img_url'] + '?imageView2/1/w/480/h/480/q/75'"
                       :class="scope.item.type === 'upscale' ? 'upscale' : ''" :zoom-rate="1.2"
                       :preview-src-list="[scope.item['img_url']]" fit="cover" :initial-index="scope.index"
                       loading="lazy" v-if="scope.item.progress > 0">
@@ -370,7 +370,11 @@
                     </template>
 
                     <template #error>
-                      <div class="image-slot">
+                      <div class="image-slot" v-if="scope.item['img_url'] === ''">
+                        <i class="iconfont icon-loading"></i>
+                        <span>正在下载图片</span>
+                      </div>
+                      <div class="image-slot" v-else>
                         <el-icon>
                           <Picture/>
                         </el-icon>
@@ -596,7 +600,23 @@ const fetchRunningJobs = (userId) => {
 const fetchFinishJobs = (userId) => {
   // 获取已完成的任务
   httpGet(`/api/mj/jobs?status=1&user_id=${userId}`).then(res => {
-    finishedJobs.value = res.data
+    if (finishedJobs.value.length === 0) {
+      finishedJobs.value = res.data
+      return
+    }
+
+    // check if the img url is changed
+    const list = res.data
+    let changed = false
+    for (let i = 0; i < list.length; i++) {
+      if (list[i]["img_url"] !== finishedJobs.value[i]["img_url"]) {
+        changed = true
+        break
+      }
+    }
+    if (changed) {
+      finishedJobs.value = list
+    }
     setTimeout(() => fetchFinishJobs(userId), 1000)
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)

web/src/views/ImageSd.vue

@@ -612,7 +612,23 @@ onMounted(() => {
   // 获取已完成的任务
   const fetchFinishJobs = (userId) => {
     httpGet(`/api/sd/jobs?status=1&user_id=${userId}`).then(res => {
-      finishedJobs.value = res.data
+      if (finishedJobs.value.length === 0) {
+        finishedJobs.value = res.data
+        return
+      }
+
+      // check if the img url is changed
+      const list = res.data
+      let changed = false
+      for (let i = 0; i < list.length; i++) {
+        if (list[i]["img_url"] !== finishedJobs.value[i]["img_url"]) {
+          changed = true
+          break
+        }
+      }
+      if (changed) {
+        finishedJobs.value = list
+      }
       setTimeout(() => fetchFinishJobs(userId), 1000)
     }).catch(e => {
       ElMessage.error("获取任务失败：" + e.message)

web/src/views/ImagesWall.vue

@@ -11,7 +11,10 @@
         </div>
       </div>
       <div class="waterfall" :style="{ height:listBoxHeight + 'px' }" id="waterfall-box">
-        <v3-waterfall id="waterfall" :list="list" srcKey="img_thumb"
+        <v3-waterfall v-if="imgType === 'mj'"
+                      id="waterfall"
+                      :list="list"
+                      srcKey="img_thumb"
                       :gap="12"
                       :bottomGap="-5"
                       :colWidth="colWidth"
@@ -21,7 +24,7 @@
                       @scrollReachBottom="getNext">
           <template #default="slotProp">
             <div class="list-item">
-              <div class="image" v-if="imgType === 'mj'">
+              <div class="image">
                 <el-image :src="slotProp.item['img_thumb']"
                           :zoom-rate="1.2"
                           :preview-src-list="[slotProp.item['img_url']]"
@@ -43,7 +46,30 @@
                   </template>
                 </el-image>
               </div>
-              <div class="image" v-else>
+              <div class="prompt">
+                <span>{{ slotProp.item.prompt }}</span>
+                <el-icon class="copy-prompt" :data-clipboard-text="slotProp.item.prompt">
+                  <DocumentCopy/>
+                </el-icon>
+              </div>
+            </div>
+          </template>
+        </v3-waterfall>
+
+        <v3-waterfall v-else
+                      id="waterfall"
+                      :list="list"
+                      srcKey="img_thumb"
+                      :gap="12"
+                      :bottomGap="-5"
+                      :colWidth="colWidth"
+                      :distanceToScroll="100"
+                      :isLoading="loading"
+                      :isOver="false"
+                      @scrollReachBottom="getNext">
+          <template #default="slotProp">
+            <div class="list-item">
+              <div class="image">
                 <el-image :src="slotProp.item['img_thumb']" loading="lazy"
                           @click="showTask(slotProp.item)">
                   <template #placeholder>