optimize the vue component communication, replace event listening with share data

web/src/views/mobile/pages/ImageSd.vue

@@ -133,11 +133,9 @@
                  description="暂无记录"
       />
       <van-grid :gutter="10" :column-num="3" v-else>
-        <van-grid-item v-for="item in runningJobs">
+        <van-grid-item v-for="item in runningJobs" :key="item.id">
           <div v-if="item.progress > 0">
-            <van-image :src="item['img_url']">
-              <template v-slot:error>加载失败</template>
-            </van-image>
+            <van-image src="/images/img-holder.png"></van-image>
             <div class="progress">
               <van-circle
                   v-model:current-rate="item.progress"
@@ -176,8 +174,15 @@
                 @load="onLoad"
       >
         <van-grid :gutter="10" :column-num="2">
-          <van-grid-item v-for="item in finishedJobs">
-            <div class="job-item">
+          <van-grid-item v-for="item in finishedJobs" :key="item.id">
+            <div class="failed" v-if="item.progress === 101">
+              <div class="title">任务失败</div>
+              <div class="opt">
+                <van-button size="small" @click="showErrMsg(item)">详情</van-button>
+                <van-button type="danger" @click="removeImage($event,item)" size="small">删除</van-button>
+              </div>
+            </div>
+            <div class="job-item" v-else>
               <van-image
                   :src="item['img_url']"
                   :class="item['can_opt'] ? '' : 'upscale'"
@@ -217,7 +222,7 @@ import {onMounted, onUnmounted, ref} from "vue"
 import {Delete} from "@element-plus/icons-vue";
 import {httpGet, httpPost} from "@/utils/http";
 import Clipboard from "clipboard";
-import {checkSession, getSystemInfo} from "@/store/cache";
+import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
 import {useRouter} from "vue-router";
 import {getSessionId} from "@/store/session";
 import {
@@ -230,10 +235,10 @@ import {
   showToast
 } from "vant";
 import {showLoginDialog} from "@/utils/libs";
+import {useSharedStore} from "@/store/sharedata";
 
 const listBoxHeight = ref(window.innerHeight - 40)
 const mjBoxHeight = ref(window.innerHeight - 150)
-const item = ref({})
 const isLogin = ref(false)
 const activeColspan = ref([""])
 
@@ -261,6 +266,7 @@ const upscaleAlgArr = ref([
 const showUpscalePicker = ref(false)
 
 const params = ref({
+  client_id: getClientId(),
   width: 1024,
   height: 1024,
   sampler: samplers.value[0].value,
@@ -287,56 +293,8 @@ if (_params) {
 const power = ref(0)
 const sdPower = ref(0) // 画一张 SD 图片消耗算力
 
-const socket = ref(null)
 const userId = ref(0)
-const heartbeatHandle = ref(null)
-const connect = () => {
-  let host = process.env.VUE_APP_WS_HOST
-  if (host === '') {
-    if (location.protocol === 'https:') {
-      host = 'wss://' + location.host;
-    } else {
-      host = 'ws://' + location.host;
-    }
-  }
-
-  // 心跳函数
-  const sendHeartbeat = () => {
-    clearTimeout(heartbeatHandle.value)
-    new Promise((resolve, reject) => {
-      if (socket.value !== null) {
-        socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
-      }
-      resolve("success")
-    }).then(() => {
-      heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
-    });
-  }
-
-  const _socket = new WebSocket(host + `/api/sd/client?user_id=${userId.value}`);
-  _socket.addEventListener('open', () => {
-    socket.value = _socket;
-
-    // 发送心跳消息
-    sendHeartbeat()
-  });
-
-  _socket.addEventListener('message', event => {
-    if (event.data instanceof Blob) {
-      fetchRunningJobs()
-      finished.value = false
-      page.value = 1
-      fetchFinishJobs(page.value)
-    }
-  });
-
-  _socket.addEventListener('close', () => {
-    if (socket.value !== null) {
-      connect()
-    }
-  });
-}
-
+const store = useSharedStore()
 const clipboard = ref(null)
 const prompt = ref('')
 onMounted(() => {
@@ -355,14 +313,23 @@ onMounted(() => {
   }).catch(e => {
     showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
   })
+
+  store.addMessageHandler("sd", (data) => {
+    if (data.channel !== "sd" || data.clientId !== getClientId()) {
+      return
+    }
+    if (data.body === "FINISH" || data.body === "FAIL") {
+      page.value = 1
+      fetchFinishJobs(1)
+    }
+    fetchRunningJobs()
+  })
+
 })
 
 onUnmounted(() => {
   clipboard.value.destroy()
-  if (socket.value !== null) {
-    socket.value.close()
-    socket.value = null
-  }
+  store.removeMessageHandler("sd")
 })
 
 
@@ -373,7 +340,6 @@ const initData = () => {
     isLogin.value = true
     fetchRunningJobs()
     fetchFinishJobs(1)
-    connect()
   }).catch(() => {
     loading.value = false
   });
@@ -414,10 +380,17 @@ const fetchFinishJobs = (page) => {
     if (jobs.length < pageSize.value) {
       finished.value = true
     }
+    const _jobs = []
+    for (let i = 0; i < jobs.length; i++) {
+      if (jobs[i].progress === -1) {
+        jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
+      }
+      _jobs.push(jobs[i])
+    }
     if (page === 1) {
-      finishedJobs.value = jobs
+      finishedJobs.value = _jobs
     } else {
-      finishedJobs.value = finishedJobs.value.concat(jobs)
+      finishedJobs.value = finishedJobs.value.concat(_jobs)
     }
     loading.value = false
   }).catch(e => {
@@ -450,6 +423,7 @@ const generate = () => {
   httpPost("/api/sd/image", params.value).then(() => {
     showSuccessToast("绘画任务推送成功，请耐心等待任务执行...")
     power.value -= sdPower.value
+    fetchRunningJobs()
   }).catch(e => {
     showFailToast("任务推送失败：" + e.message)
   })
@@ -468,6 +442,15 @@ const showPrompt = (item) => {
   });
 }
 
+const showErrMsg = (item) => {
+  showDialog({
+    title: '错误详情',
+    message: item['err_msg'],
+  }).then(() => {
+    // on close
+  });
+}
+
 const removeImage = (event, item) => {
   event.stopPropagation()
   showConfirmDialog({
@@ -477,6 +460,7 @@ const removeImage = (event, item) => {
   }).then(() => {
     httpGet("/api/sd/remove", {id: item.id, user_id: item.user}).then(() => {
       showSuccessToast("任务删除成功")
+      fetchFinishJobs(1)
     }).catch(e => {
       showFailToast("任务删除失败：" + e.message)
     })