重构异步任务更新方式，使用 Http 替代 websocket

2025-12-01 22:06:07 +08:00 · 2025-03-03 19:00:10 +08:00
parent 8369e18bf0
commit ed063a1d9d
22 changed files with 308 additions and 541 deletions
--- a/web/src/views/Dalle.vue
+++ b/web/src/views/Dalle.vue
@@ -231,7 +231,7 @@ import { Delete, InfoFilled, Picture } from "@element-plus/icons-vue";
 import { httpGet, httpPost } from "@/utils/http";
 import { ElMessage, ElMessageBox } from "element-plus";
 import Clipboard from "clipboard";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useSharedStore } from "@/store/sharedata";
 import TaskList from "@/components/TaskList.vue";
 import BackTop from "@/components/BackTop.vue";
@@ -267,7 +267,6 @@ const styles = [
  { name: "自然", value: "natural" },
 ];
 const params = ref({
-  client_id: getClientId(),
  quality: "standard",
  size: "1024x1024",
  style: "vivid",
@@ -276,6 +275,7 @@ const params = ref({

 const finishedJobs = ref([]);
 const runningJobs = ref([]);
+const allowPulling = ref(true); // 是否允许轮询
 const power = ref(0);
 const dallPower = ref(0); // 画一张 SD 图片消耗算力
 const clipboard = ref(null);
@@ -301,20 +301,6 @@ onMounted(() => {
      showMessageError("获取系统配置失败：" + e.message);
    });

-  store.addMessageHandler("dall", (data) => {
-    // 丢弃无关消息
-    if (data.channel !== "dall" || data.clientId !== getClientId()) {
-      return;
-    }
-
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 0;
-      isOver.value = false;
-      fetchFinishJobs();
-    }
-    nextTick(() => fetchRunningJobs());
-  });
-
  // 获取模型列表
  httpGet("/api/dall/models")
    .then((res) => {
@@ -339,10 +325,16 @@ const initData = () => {
      power.value = user["power"];
      userId.value = user.id;
      isLogin.value = true;
-
      page.value = 0;
      fetchRunningJobs();
      fetchFinishJobs();
+
+      // 轮询运行中任务
+      setInterval(() => {
+        if (allowPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
    })
    .catch(() => {});
 };
@@ -354,7 +346,17 @@ const fetchRunningJobs = () => {
  // 获取运行中的任务
  httpGet(`/api/dall/jobs?finish=false`)
    .then((res) => {
-      runningJobs.value = res.data.items;
+      // 如果任务有更新，则更新已完成任务列表
+      if (res.data.items && res.data.items.length !== runningJobs.value.length) {
+        page.value = 0;
+        fetchFinishJobs();
+      }
+      if (res.data.items.length > 0) {
+        runningJobs.value = res.data.items;
+      } else {
+        allowPulling.value = false;
+        runningJobs.value = [];
+      }
    })
    .catch((e) => {
      ElMessage.error("获取任务失败：" + e.message);
@@ -410,7 +412,12 @@ const generate = () => {
    .then(() => {
      ElMessage.success("任务执行成功！");
      power.value -= dallPower.value;
-      fetchRunningJobs();
+      // 追加任务列表
+      runningJobs.value.push({
+        prompt: params.value.prompt,
+        progress: 0,
+      });
+      allowPulling.value = true;
    })
    .catch((e) => {
      ElMessage.error("任务执行失败：" + e.message);
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -656,14 +656,14 @@ import Compressor from "compressorjs";
 import { httpGet, httpPost } from "@/utils/http";
 import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
 import Clipboard from "clipboard";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { getSessionId } from "@/store/session";
 import { copyObj, removeArrayItem } from "@/utils/libs";
 import { useSharedStore } from "@/store/sharedata";
 import TaskList from "@/components/TaskList.vue";
 import BackTop from "@/components/BackTop.vue";
-import {closeLoading, showLoading, showMessageError} from "@/utils/dialog";
+import { closeLoading, showLoading, showMessageError } from "@/utils/dialog";

 const listBoxHeight = ref(0);
 const paramBoxHeight = ref(0);
@@ -746,7 +746,6 @@ const options = [

 const router = useRouter();
 const initParams = {
-  client_id: getClientId(),
  task_type: "image",
  rate: rates[0].value,
  model: models[0].value,
@@ -772,6 +771,8 @@ const activeName = ref("txt2img");

 const runningJobs = ref([]);
 const finishedJobs = ref([]);
+const taskPulling = ref(true); // 任务轮询
+const downloadPulling = ref(false); // 图片下载轮询

 const power = ref(0);
 const userId = ref(0);
@@ -788,20 +789,6 @@ onMounted(() => {
  clipboard.value.on("error", () => {
    ElMessage.error("复制失败！");
  });
-
-  store.addMessageHandler("mj", (data) => {
-    // 丢弃无关消息
-    if (data.channel !== "mj" || data.clientId !== getClientId()) {
-      return;
-    }
-
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 0;
-      isOver.value = false;
-      fetchFinishJobs();
-    }
-    nextTick(() => fetchRunningJobs());
-  });
 });

 onUnmounted(() => {
@@ -817,8 +804,20 @@ const initData = () => {
      userId.value = user.id;
      isLogin.value = true;
      page.value = 0;
-      fetchRunningJobs();
      fetchFinishJobs();
+
+      setInterval(() => {
+        if (taskPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
+
+      setInterval(() => {
+        if (downloadPulling.value) {
+          page.value = 0;
+          fetchFinishJobs();
+        }
+      }, 5000);
    })
    .catch(() => {});
 };
@@ -861,6 +860,14 @@ const fetchRunningJobs = () => {
        }
        _jobs.push(jobs[i]);
      }
+      if (runningJobs.value.length !== _jobs.length) {
+        page.value = 0;
+        downloadPulling.value = true;
+        fetchFinishJobs();
+      }
+      if (_jobs.length === 0) {
+        taskPulling.value = false;
+      }
      runningJobs.value = _jobs;
    })
    .catch((e) => {
@@ -882,6 +889,7 @@ const fetchFinishJobs = () => {
  httpGet(`/api/mj/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`)
    .then((res) => {
      const jobs = res.data.items;
+      let hasDownload = false;
      for (let i = 0; i < jobs.length; i++) {
        if (jobs[i]["img_url"] !== "") {
          if (jobs[i].type === "upscale" || jobs[i].type === "swapFace") {
@@ -890,16 +898,29 @@ const fetchFinishJobs = () => {
            jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/480/q/75";
          }
        } else {
+          if (jobs[i].progress === 100) {
+            hasDownload = true;
+          }
          jobs[i]["thumb_url"] = "/images/img-placeholder.jpg";
        }
+        // 如果当前是第一页，则开启图片下载轮询
+        if (page.value === 1) {
+          downloadPulling.value = hasDownload;
+        }

        if (jobs[i].type !== "upscale" && jobs[i].progress === 100) {
          jobs[i]["can_opt"] = true;
        }
      }
+
      if (jobs.length < pageSize.value) {
        isOver.value = true;
      }
+      // 对比一下jobs和finishedJobs，如果相同，则不进行更新
+      if (JSON.stringify(jobs) === JSON.stringify(finishedJobs.value)) {
+        return;
+      }
+
      if (page.value === 1) {
        finishedJobs.value = jobs;
      } else {
@@ -988,7 +1009,10 @@ const generate = () => {
    .then(() => {
      ElMessage.success("绘画任务推送成功，请耐心等待任务执行...");
      power.value -= mjPower.value;
-      fetchRunningJobs();
+      taskPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      ElMessage.error("任务推送失败：" + e.message);
@@ -1008,7 +1032,6 @@ const variation = (index, item) => {
 const send = (url, index, item) => {
  httpPost(url, {
    index: index,
-    client_id: getClientId(),
    channel_id: item.channel_id,
    message_id: item.message_id,
    message_hash: item.hash,
@@ -1018,7 +1041,10 @@ const send = (url, index, item) => {
    .then(() => {
      ElMessage.success("任务推送成功，请耐心等待任务执行...");
      power.value -= mjActionPower.value;
-      fetchRunningJobs();
+      taskPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      ElMessage.error("任务推送失败：" + e.message);
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -325,7 +325,7 @@ import nodata from "@/assets/img/no-data.png";
 import { httpGet, httpPost } from "@/utils/http";
 import { ElMessage, ElMessageBox } from "element-plus";
 import Clipboard from "clipboard";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { getSessionId } from "@/store/session";
 import { useSharedStore } from "@/store/sharedata";
@@ -355,7 +355,6 @@ const samplers = ["Euler a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SD
 const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"];
 const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"];
 const params = ref({
-  client_id: getClientId(),
  width: 1024,
  height: 1024,
  sampler: samplers[0],
@@ -374,6 +373,7 @@ const params = ref({

 const runningJobs = ref([]);
 const finishedJobs = ref([]);
+const allowPulling = ref(true); // 是否允许轮询
 const router = useRouter();
 // 检查是否有画同款的参数
 const _params = router.currentRoute.value.params["copyParams"];
@@ -404,20 +404,6 @@ onMounted(() => {
    .catch((e) => {
      ElMessage.error("获取系统配置失败：" + e.message);
    });
-
-  store.addMessageHandler("sd", (data) => {
-    // 丢弃无关消息
-    if (data.channel !== "sd" || data.clientId !== getClientId()) {
-      return;
-    }
-
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 0;
-      isOver.value = false;
-      fetchFinishJobs();
-    }
-    nextTick(() => fetchRunningJobs());
-  });
 });

 onUnmounted(() => {
@@ -434,6 +420,12 @@ const initData = () => {
      page.value = 0;
      fetchRunningJobs();
      fetchFinishJobs();
+
+      setInterval(() => {
+        if (allowPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
    })
    .catch(() => {});
 };
@@ -446,6 +438,13 @@ const fetchRunningJobs = () => {
  // 获取运行中的任务
  httpGet(`/api/sd/jobs?finish=0`)
    .then((res) => {
+      if (runningJobs.value.length !== res.data.items.length) {
+        page.value = 0;
+        fetchFinishJobs();
+      }
+      if (runningJobs.value.length === 0) {
+        allowPulling.value = false;
+      }
      runningJobs.value = res.data.items;
    })
    .catch((e) => {
@@ -507,7 +506,10 @@ const generate = () => {
    .then(() => {
      ElMessage.success("绘画任务推送成功，请耐心等待任务执行...");
      power.value -= sdPower.value;
-      fetchRunningJobs();
+      allowPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      ElMessage.error("任务推送失败：" + e.message);
--- a/web/src/views/KeLing.vue
+++ b/web/src/views/KeLing.vue
@@ -22,18 +22,10 @@
                  <el-col :span="8" v-for="item in rates" :key="item.value">
                    <div
                      class="flex-col items-center"
-                      :class="
-                        item.value === params.aspect_ratio
-                          ? 'grid-content active'
-                          : 'grid-content'
-                      "
+                      :class="item.value === params.aspect_ratio ? 'grid-content active' : 'grid-content'"
                      @click="changeRate(item)"
                    >
-                      <el-image
-                        class="icon proportion"
-                        :src="item.img"
-                        fit="cover"
-                      ></el-image>
+                      <el-image class="icon proportion" :src="item.img" fit="cover"></el-image>
                      <div class="texts">{{ item.text }}</div>
                    </div>
                  </el-col>
@@ -73,12 +65,7 @@
            <!-- 创意程度 -->
            <div class="param-line">
              <el-form-item label="创意程度">
-                <el-slider
-                  v-model="params.cfg_scale"
-                  :min="0"
-                  :max="1"
-                  :step="0.1"
-                />
+                <el-slider v-model="params.cfg_scale" :min="0" :max="1" :step="0.1" />
              </el-form-item>
            </div>

@@ -95,10 +82,7 @@

              <!-- 添加运镜类型选择 -->
              <el-form-item label="运镜类型">
-                <el-select
-                  v-model="params.camera_control.type"
-                  placeholder="请选择运镜类型"
-                >
+                <el-select v-model="params.camera_control.type" placeholder="请选择运镜类型">
                  <el-option label="请选择" value="" />
                  <el-option label="简单运镜" value="simple" />
                  <el-option label="下移拉远" value="down_back" />
@@ -109,51 +93,24 @@
              </el-form-item>

              <!-- 仅在simple模式下显示详细配置 -->
-              <div
-                class="camera-control"
-                v-if="params.camera_control.type === 'simple'"
-              >
+              <div class="camera-control" v-if="params.camera_control.type === 'simple'">
                <el-form-item label="水平移动">
-                  <el-slider
-                    v-model="params.camera_control.config.horizontal"
-                    :min="-10"
-                    :max="10"
-                  />
+                  <el-slider v-model="params.camera_control.config.horizontal" :min="-10" :max="10" />
                </el-form-item>
                <el-form-item label="垂直移动">
-                  <el-slider
-                    v-model="params.camera_control.config.vertical"
-                    :min="-10"
-                    :max="10"
-                  />
+                  <el-slider v-model="params.camera_control.config.vertical" :min="-10" :max="10" />
                </el-form-item>
                <el-form-item label="左右旋转">
-                  <el-slider
-                    v-model="params.camera_control.config.pan"
-                    :min="-10"
-                    :max="10"
-                  />
+                  <el-slider v-model="params.camera_control.config.pan" :min="-10" :max="10" />
                </el-form-item>
                <el-form-item label="上下旋转">
-                  <el-slider
-                    v-model="params.camera_control.config.tilt"
-                    :min="-10"
-                    :max="10"
-                  />
+                  <el-slider v-model="params.camera_control.config.tilt" :min="-10" :max="10" />
                </el-form-item>
                <el-form-item label="横向翻转">
-                  <el-slider
-                    v-model="params.camera_control.config.roll"
-                    :min="-10"
-                    :max="10"
-                  />
+                  <el-slider v-model="params.camera_control.config.roll" :min="-10" :max="10" />
                </el-form-item>
                <el-form-item label="镜头缩放">
-                  <el-slider
-                    v-model="params.camera_control.config.zoom"
-                    :min="-10"
-                    :max="10"
-                  />
+                  <el-slider v-model="params.camera_control.config.zoom" :min="-10" :max="10" />
                </el-form-item>
              </div>
            </div>
@@ -165,19 +122,12 @@
      <div class="main-content task-list-inner">
        <!-- 任务类型选择 -->
        <div class="param-line">
-          <el-tabs
-            v-model="params.task_type"
-            @tab-change="tabChange"
-            class="title-tabs"
-          >
+          <el-tabs v-model="params.task_type" @tab-change="tabChange" class="title-tabs">
            <el-tab-pane label="文生视频" name="text2video">
              <div class="text">使用文字描述想要生成视频的内容</div>
            </el-tab-pane>
            <el-tab-pane label="图生视频" name="image2video">
-              <div class="text">
-                以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG
-                /JPG/JPEG 格式图片；
-              </div>
+              <div class="text">以某张图片为底稿参考来创作视频，生成类似风格或类型视频，支持 PNG /JPG/JPEG 格式图片；</div>
            </el-tab-pane>
          </el-tabs>
        </div>
@@ -192,13 +142,7 @@
              placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
            />
            <el-row class="text-info">
-              <el-button
-                class="generate-btn"
-                @click="generatePrompt"
-                :loading="isGenerating"
-                size="small"
-                color="#5865f2"
-              >
+              <el-button class="generate-btn" @click="generatePrompt" :loading="isGenerating" size="small" color="#5865f2">
                <i class="iconfont icon-chuangzuo"></i>
                生成专业视频提示词
              </el-button>
@@ -209,35 +153,15 @@
            <div class="image-upload img-inline">
              <div class="upload-box img-uploader">
                <h4>起始帧</h4>
-                <el-upload
-                  class="uploader img-uploader"
-                  :auto-upload="true"
-                  :show-file-list="false"
-                  :http-request="uploadStartImage"
-                  accept=".jpg,.png,.jpeg"
-                >
-                  <img
-                    v-if="params.image"
-                    :src="params.image"
-                    class="preview"
-                  />
+                <el-upload class="uploader img-uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadStartImage" accept=".jpg,.png,.jpeg">
+                  <img v-if="params.image" :src="params.image" class="preview" />
                  <el-icon v-else class="upload-icon"><Plus /></el-icon>
                </el-upload>
              </div>
              <div class="upload-box img-uploader">
                <h4>结束帧</h4>
-                <el-upload
-                  class="uploader"
-                  :auto-upload="true"
-                  :show-file-list="false"
-                  :http-request="uploadEndImage"
-                  accept=".jpg,.png,.jpeg"
-                >
-                  <img
-                    v-if="params.image_tail"
-                    :src="params.image_tail"
-                    class="preview"
-                  />
+                <el-upload class="uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadEndImage" accept=".jpg,.png,.jpeg">
+                  <img v-if="params.image_tail" :src="params.image_tail" class="preview" />
                  <el-icon v-else class="upload-icon"><Plus /></el-icon>
                </el-upload>
              </div>
@@ -246,10 +170,7 @@
              <div class="flex-row justify-between items-center">
                <div class="flex-row justify-start items-center">
                  <span>提示词：</span>
-                  <el-tooltip
-                    content="输入你想要的内容，用逗号分割"
-                    placement="right"
-                  >
+                  <el-tooltip content="输入你想要的内容，用逗号分割" placement="right">
                    <el-icon>
                      <InfoFilled />
                    </el-icon>
@@ -258,12 +179,7 @@
              </div>
            </div>
            <div class="param-line pt">
-              <el-input
-                v-model="params.prompt"
-                type="textarea"
-                :autosize="{ minRows: 4, maxRows: 6 }"
-                placeholder="描述视频画面细节"
-              />
+              <el-input v-model="params.prompt" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="描述视频画面细节" />
            </div>
          </div>

@@ -272,10 +188,7 @@
            <div class="flex-row justify-between items-center">
              <div class="flex-row justify-start items-center">
                <span>不希望出现的内容：（可选）</span>
-                <el-tooltip
-                  content="不想出现在图片上的元素(例如：树，建筑)"
-                  placement="right"
-                >
+                <el-tooltip content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
@@ -295,21 +208,16 @@
          <!-- 算力显示 -->
          <el-row class="text-info">
            <el-text type="primary"
-              >每次生成视频消耗
-              <el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
+              >每次生成视频消耗 <el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
            >&nbsp;&nbsp;
            <el-text type="primary"
-              >当前可用算力：<el-text type="warning">{{
-                availablePower
-              }}</el-text></el-text
+              >当前可用算力：<el-text type="warning">{{ availablePower }}</el-text></el-text
            >
          </el-row>

          <!-- 生成按钮 -->
          <div class="submit-btn">
-            <el-button type="primary" :dark="false" @click="generate" round
-              >立即生成</el-button
-            >
+            <el-button type="primary" :dark="false" @click="generate" round>立即生成</el-button>
          </div>
        </div>

@@ -348,7 +256,7 @@
                  class="job-item-box"
                  :class="{
                    processing: slotProp.item.progress < 100,
-                    error: slotProp.item.progress === 101
+                    error: slotProp.item.progress === 101,
                  }"
                >
                  <video
@@ -360,39 +268,24 @@
                  ></video>

                  <div v-else class="status-overlay">
-                    <div
-                      v-if="slotProp.item.progress === 101"
-                      class="error-status"
-                    >
+                    <div v-if="slotProp.item.progress === 101" class="error-status">
                      <el-icon><CloseBold /></el-icon>
                      任务失败
                    </div>
                    <div v-else class="processing-status">
-                      <el-progress
-                        :percentage="slotProp.item.progress"
-                        :stroke-width="12"
-                        status="success"
-                      />
+                      <el-progress :percentage="slotProp.item.progress" :stroke-width="12" status="success" />
                    </div>
                  </div>

                  <div class="tools">
-                    <el-button
-                      v-if="slotProp.item.progress >= 100"
-                      @click="downloadVideo(slotProp.item)"
-                    >
+                    <el-button v-if="slotProp.item.progress >= 100" @click="downloadVideo(slotProp.item)">
                      <el-icon><Download /></el-icon>
                    </el-button>
                    <el-button type="danger" @click="deleteTask(slotProp.item)">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                    <div class="show-prompt">
-                      <el-popover
-                        placement="left"
-                        title="提示词"
-                        :width="240"
-                        trigger="hover"
-                      >
+                      <el-popover placement="left" title="提示词" :width="240" trigger="hover">
                        <template #reference>
                          <el-icon class="chromefilled">
                            <ChromeFilled />
@@ -402,10 +295,7 @@
                        <template #default>
                          <div class="mj-list-item-prompt">
                            <span>{{ slotProp.item.prompt }}</span>
-                            <el-icon
-                              class="copy-prompt-mj"
-                              :data-clipboard-text="slotProp.item.prompt"
-                            >
+                            <el-icon class="copy-prompt-mj" :data-clipboard-text="slotProp.item.prompt">
                              <DocumentCopy />
                            </el-icon>
                          </div>
@@ -429,12 +319,7 @@

    <!-- 视频预览对话框 -->
    <el-dialog v-model="previewVisible" title="视频预览" width="80%">
-      <video
-        v-if="currentVideo"
-        :src="currentVideo"
-        controls
-        style="width: 100%"
-      ></video>
+      <video v-if="currentVideo" :src="currentVideo" controls style="width: 100%"></video>
    </el-dialog>
  </div>
 </template>
@@ -442,24 +327,12 @@
 <script setup>
 import TaskList from "@/components/TaskList.vue";
 import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
-import {
-  Plus,
-  Delete,
-  InfoFilled,
-  ChromeFilled,
-  DocumentCopy,
-  Download
-} from "@element-plus/icons-vue";
+import { Plus, Delete, InfoFilled, ChromeFilled, DocumentCopy, Download } from "@element-plus/icons-vue";
 import { httpGet, httpPost, httpDownload } from "@/utils/http";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { getClientId, checkSession } from "@/store/cache";

-import {
-  closeLoading,
-  showLoading,
-  showMessageError,
-  showMessageOK
-} from "@/utils/dialog";
+import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
 import { replaceImg } from "@/utils/libs";

 // 参数设置
@@ -481,11 +354,11 @@ const params = reactive({
      pan: 0,
      tilt: 0,
      roll: 0,
-      zoom: 0
-    }
+      zoom: 0,
+    },
  },
  image: "",
-  image_tail: ""
+  image_tail: "",
 });
 const rates = [
  { css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
@@ -494,14 +367,14 @@ const rates = [
    css: "size16-9",
    value: "16:9",
    text: "16:9",
-    img: "/images/mj/rate_16_9.png"
+    img: "/images/mj/rate_16_9.png",
  },
  {
    css: "size9-16",
    value: "9:16",
    text: "9:16",
-    img: "/images/mj/rate_9_16.png"
-  }
+    img: "/images/mj/rate_9_16.png",
+  },
 ];

 // 切换图片比例
@@ -609,14 +482,12 @@ const fetchTasks = async () => {
      page: currentPage.value,
      page_size: pageSize.value,
      type: "keling",
-      task_type: taskFilter.value === "all" ? "" : taskFilter.value
+      task_type: taskFilter.value === "all" ? "" : taskFilter.value,
    });

    // 精确任务过滤逻辑
    const data = res.data || {};
-    const newRunning = data.items.filter(
-      (task) => task.progress < 100 && task.progress !== 101
-    );
+    const newRunning = data.items.filter((task) => task.progress < 100 && task.progress !== 101);
    runningTasks.value = [...runningTasks.value, ...newRunning];

    const newfinished = data.items.filter((task) => task.progress >= 100);
@@ -626,10 +497,7 @@ const fetchTasks = async () => {
    waterfallKey.value = Date.now();
    total.value = data.total;

-    const shouldLoadNextPage =
-      runningTasks.value.length > 0 ||
-      (runningTasks.value.length === 0 &&
-        finishedTasks.value.length < total.value);
+    const shouldLoadNextPage = runningTasks.value.length > 0 || (runningTasks.value.length === 0 && finishedTasks.value.length < total.value);

    if (shouldLoadNextPage) {
      currentPage.value++;
@@ -642,7 +510,7 @@ const fetchTasks = async () => {
    console.log("[Pagination] isOver:", isOver.value, {
      running: runningTasks.value.length,
      finished: finishedTasks.value.length,
-      total: total.value
+      total: total.value,
    });

    waterfallKey.value = Date.now();
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -124,14 +124,13 @@ import nodata from "@/assets/img/no-data.png";
 import { onMounted, onUnmounted, reactive, ref } from "vue";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
 import { httpDownload, httpPost, httpGet } from "@/utils/http";
-import { checkSession, getClientId } from "@/store/cache";
+import { checkSession } from "@/store/cache";
 import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
 import { replaceImg } from "@/utils/libs";
 import { ElMessage, ElMessageBox } from "element-plus";
 import BlackSwitch from "@/components/ui/BlackSwitch.vue";
 import Generating from "@/components/ui/Generating.vue";
 import BlackDialog from "@/components/ui/BlackDialog.vue";
-import { useSharedStore } from "@/store/sharedata";

 const showDialog = ref(false);
 const currentVideoUrl = ref("");
@@ -139,7 +138,6 @@ const row = ref(1);
 const images = ref([]);

 const formData = reactive({
-  client_id: getClientId(),
  prompt: "",
  expand_prompt: false,
  loop: false,
@@ -147,32 +145,28 @@ const formData = reactive({
  end_frame_img: "",
 });

-const store = useSharedStore();
+const loading = ref(false);
+const list = ref([]);
+const noData = ref(true);
+const page = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const taskPulling = ref(true);
+
 onMounted(() => {
  checkSession().then(() => {
    fetchData(1);
+    setInterval(() => {
+      if (taskPulling.value) {
+        fetchData(1);
+      }
+    }, 5000);
  });
-
-  store.addMessageHandler("luma", (data) => {
-    // 丢弃无关消息
-    if (data.channel !== "luma" || data.clientId !== getClientId()) {
-      return;
-    }
-
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      fetchData(1);
-    }
-  });
-});
-
-onUnmounted(() => {
-  store.removeMessageHandler("luma");
 });

 const download = (item) => {
  const url = replaceImg(item.video_url);
  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
-  // parse filename
  const urlObj = new URL(url);
  const fileName = urlObj.pathname.split("/").pop();
  item.downloading = true;
@@ -231,17 +225,16 @@ const publishJob = (item) => {
 const upload = (file) => {
  const formData = new FormData();
  formData.append("file", file.file, file.name);
-  showLoading("正在上传文件...")
-  // 执行上传操作
+  showLoading("正在上传文件...");
  httpPost("/api/upload", formData)
    .then((res) => {
      images.value.push(res.data.url);
      ElMessage.success({ message: "上传成功", duration: 500 });
-      closeLoading()
+      closeLoading();
    })
    .catch((e) => {
      ElMessage.error("图片上传失败:" + e.message);
-      closeLoading()
+      closeLoading();
    });
 };

@@ -252,12 +245,7 @@ const remove = (img) => {
 const switchReverse = () => {
  images.value = images.value.reverse();
 };
-const loading = ref(false);
-const list = ref([]);
-const noData = ref(true);
-const page = ref(1);
-const pageSize = ref(10);
-const total = ref(0);
+
 const fetchData = (_page) => {
  if (_page) {
    page.value = _page;
@@ -269,8 +257,19 @@ const fetchData = (_page) => {
  })
    .then((res) => {
      total.value = res.data.total;
+      let needPull = false;
+      const items = [];
+      for (let v of res.data.items) {
+        if (v.progress === 0 || v.progress === 102) {
+          needPull = true;
+        }
+        items.push(v);
+      }
      loading.value = false;
-      list.value = res.data.items;
+      taskPulling.value = needPull;
+      if (JSON.stringify(list.value) !== JSON.stringify(items)) {
+        list.value = items;
+      }
      noData.value = list.value.length === 0;
    })
    .catch(() => {
@@ -279,7 +278,6 @@ const fetchData = (_page) => {
    });
 };

-// 创建视频
 const create = () => {
  const len = images.value.length;
  if (len) {
@@ -292,6 +290,7 @@ const create = () => {
  httpPost("/api/video/luma/create", formData)
    .then(() => {
      fetchData(1);
+      taskPulling.value = true;
      showMessageOK("创建任务成功");
    })
    .catch((e) => {
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -278,8 +278,8 @@ import BlackInput from "@/components/ui/BlackInput.vue";
 import MusicPlayer from "@/components/MusicPlayer.vue";
 import { compact } from "lodash";
 import { httpDownload, httpGet, httpPost } from "@/utils/http";
-import {closeLoading, showLoading, showMessageError, showMessageOK} from "@/utils/dialog";
-import { checkSession, getClientId } from "@/store/cache";
+import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
+import { checkSession } from "@/store/cache";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { formatTime, replaceImg } from "@/utils/libs";
 import Clipboard from "clipboard";
@@ -313,7 +313,6 @@ const tags = ref([
  { label: "嘻哈", value: "hip hop" },
 ]);
 const data = ref({
-  client_id: getClientId(),
  model: "chirp-v3-0",
  tags: "",
  lyrics: "",
@@ -330,6 +329,7 @@ const playList = ref([]);
 const playerRef = ref(null);
 const showPlayer = ref(false);
 const list = ref([]);
+const taskPulling = ref(true);
 const btnText = ref("开始创作");
 const refSong = ref(null);
 const showDialog = ref(false);
@@ -350,19 +350,13 @@ onMounted(() => {
  checkSession()
    .then(() => {
      fetchData(1);
+      setInterval(() => {
+        if (taskPulling.value) {
+          fetchData(1);
+        }
+      }, 5000);
    })
    .catch(() => {});
-
-  store.addMessageHandler("suno", (data) => {
-    // 丢弃无关消息
-    if (data.channel !== "suno" || data.clientId !== getClientId()) {
-      return;
-    }
-
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      fetchData(1);
-    }
-  });
 });

 onUnmounted(() => {
@@ -381,15 +375,23 @@ const fetchData = (_page) => {
  httpGet("/api/suno/list", { page: page.value, page_size: pageSize.value })
    .then((res) => {
      total.value = res.data.total;
+      let needPull = false;
      const items = [];
      for (let v of res.data.items) {
        if (v.progress === 100) {
          v.major_model_version = v["raw_data"]["major_model_version"];
        }
+        if (v.progress === 0 || v.progress === 102) {
+          needPull = true;
+        }
        items.push(v);
      }
      loading.value = false;
-      list.value = items;
+      taskPulling.value = needPull;
+      // 如果任务有变化，则刷新任务列表
+      if (JSON.stringify(list.value) !== JSON.stringify(items)) {
+        list.value = items;
+      }
      noData.value = list.value.length === 0;
    })
    .catch((e) => {
@@ -425,6 +427,7 @@ const create = () => {
  httpPost("/api/suno/create", data.value)
    .then(() => {
      fetchData(1);
+      taskPulling.value = true;
      showMessageOK("创建任务成功");
    })
    .catch((e) => {
@@ -437,6 +440,7 @@ const merge = (item) => {
  httpPost("/api/suno/create", { song_id: item.song_id, type: 3 })
    .then(() => {
      fetchData(1);
+      taskPulling.value = true;
      showMessageOK("创建任务成功");
    })
    .catch((e) => {
@@ -606,11 +610,11 @@ const uploadCover = (file) => {
        .then((res) => {
          editData.value.cover = res.data.url;
          ElMessage.success({ message: "上传成功", duration: 500 });
-          closeLoading()
+          closeLoading();
        })
        .catch((e) => {
          ElMessage.error("图片上传失败:" + e.message);
-          closeLoading()
+          closeLoading();
        });
    },
    error(err) {
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -133,7 +133,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, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { getSessionId } from "@/store/session";
 import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast } from "vant";
@@ -174,7 +174,6 @@ const styles = [
  { text: "自然", value: "natural" },
 ];
 const params = ref({
-  client_id: getClientId(),
  quality: qualities[0].value,
  size: sizes[0].value,
  style: styles[0].value,
@@ -191,6 +190,7 @@ const showModelPicker = ref(false);

 const runningJobs = ref([]);
 const finishedJobs = ref([]);
+const allowPulling = ref(true); // 是否允许轮询
 const router = useRouter();
 const power = ref(0);
 const dallPower = ref(0); // 画一张 DALL 图片消耗算力
@@ -220,17 +220,6 @@ onMounted(() => {
      showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
    });

-  store.addMessageHandler("dall", (data) => {
-    if (data.channel !== "dall" || data.clientId !== getClientId()) {
-      return;
-    }
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1;
-      fetchFinishJobs(1);
-    }
-    fetchRunningJobs();
-  });
-
  // 获取模型列表
  httpGet("/api/dall/models")
    .then((res) => {
@@ -257,6 +246,12 @@ const initData = () => {
      isLogin.value = true;
      fetchRunningJobs();
      fetchFinishJobs(1);
+
+      setInterval(() => {
+        if (allowPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
    })
    .catch(() => {
      loading.value = false;
@@ -267,6 +262,12 @@ const fetchRunningJobs = () => {
  // 获取运行中的任务
  httpGet(`/api/dall/jobs?finish=0`)
    .then((res) => {
+      if (runningJobs.value.length !== res.data.items.length) {
+        fetchFinishJobs(1);
+      }
+      if (res.data.items.length === 0) {
+        allowPulling.value = false;
+      }
      runningJobs.value = res.data.items;
    })
    .catch((e) => {
@@ -333,7 +334,10 @@ const generate = () => {
    .then(() => {
      showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
      power.value -= dallPower.value;
-      fetchRunningJobs();
+      allowPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -255,7 +255,7 @@ import { showConfirmDialog, showFailToast, showImagePreview, showNotify, showSuc
 import { httpGet, httpPost } from "@/utils/http";
 import Compressor from "compressorjs";
 import { getSessionId } from "@/store/session";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { Delete } from "@element-plus/icons-vue";
 import { showLoginDialog } from "@/utils/libs";
@@ -282,7 +282,6 @@ const models = [
 ];
 const imgList = ref([]);
 const params = ref({
-  client_id: getClientId(),
  task_type: "image",
  rate: rates[0].value,
  model: models[0].value,
@@ -310,6 +309,8 @@ const isLogin = ref(false);
 const prompt = ref("");
 const store = useSharedStore();
 const clipboard = ref(null);
+const taskPulling = ref(true);
+const downloadPulling = ref(false);

 onMounted(() => {
  clipboard.value = new Clipboard(".copy-prompt");
@@ -327,21 +328,23 @@ onMounted(() => {
      isLogin.value = true;
      fetchRunningJobs();
      fetchFinishJobs(1);
+
+      setInterval(() => {
+        if (taskPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
+
+      setInterval(() => {
+        if (downloadPulling.value) {
+          page.value = 1;
+          fetchFinishJobs(1);
+        }
+      }, 5000);
    })
    .catch(() => {
      // router.push('/login')
    });
-
-  store.addMessageHandler("mj", (data) => {
-    if (data.channel !== "mj" || data.clientId !== getClientId()) {
-      return;
-    }
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1;
-      fetchFinishJobs(1);
-    }
-    fetchRunningJobs();
-  });
 });

 onUnmounted(() => {
@@ -362,6 +365,10 @@ getSystemInfo()

 // 获取运行中的任务
 const fetchRunningJobs = (userId) => {
+  if (!isLogin.value) {
+    return;
+  }
+
  httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`)
    .then((res) => {
      const jobs = res.data.items;
@@ -381,6 +388,14 @@ const fetchRunningJobs = (userId) => {
        }
        _jobs.push(jobs[i]);
      }
+      if (runningJobs.value.length !== _jobs.length) {
+        page.value = 1;
+        downloadPulling.value = true;
+        fetchFinishJobs(1);
+      }
+      if (_jobs.length === 0) {
+        taskPulling.value = false;
+      }
      runningJobs.value = _jobs;
    })
    .catch((e) => {
@@ -394,11 +409,16 @@ const error = ref(false);
 const page = ref(0);
 const pageSize = ref(10);
 const fetchFinishJobs = (page) => {
+  if (!isLogin.value) {
+    return;
+  }
+
  loading.value = true;
  // 获取已完成的任务
  httpGet(`/api/mj/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
    .then((res) => {
      const jobs = res.data.items;
+      let hasDownload = false;
      for (let i = 0; i < jobs.length; i++) {
        if (jobs[i].type === "upscale" || jobs[i].type === "swapFace") {
          jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/600/q/75";
@@ -406,13 +426,23 @@ const fetchFinishJobs = (page) => {
          jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/480/q/75";
        }

+        if (jobs[i]["img_url"] === "" && jobs[i].progress === 100) {
+          hasDownload = true;
+        }
+
        if (jobs[i].type !== "upscale" && jobs[i].progress === 100) {
          jobs[i]["can_opt"] = true;
        }
      }
+
+      if (page === 1) {
+        downloadPulling.value = hasDownload;
+      }
+
      if (jobs.length < pageSize.value) {
        finished.value = true;
      }
+
      if (page === 1) {
        finishedJobs.value = jobs;
      } else {
@@ -480,7 +510,6 @@ const uploadImg = (file) => {

 const send = (url, index, item) => {
  httpPost(url, {
-    client_id: getClientId(),
    index: index,
    channel_id: item.channel_id,
    message_id: item.message_id,
@@ -491,7 +520,9 @@ const send = (url, index, item) => {
    .then(() => {
      showSuccessToast("任务推送成功，请耐心等待任务执行...");
      power.value -= mjActionPower.value;
-      fetchRunningJobs();
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);
@@ -525,7 +556,10 @@ const generate = () => {
    .then(() => {
      showToast("绘画任务推送成功，请耐心等待任务执行");
      power.value -= mjPower.value;
-      fetchRunningJobs();
+      taskPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -175,7 +175,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, getClientId, getSystemInfo } from "@/store/cache";
+import { checkSession, getSystemInfo } from "@/store/cache";
 import { useRouter } from "vue-router";
 import { getSessionId } from "@/store/session";
 import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast } from "vant";
@@ -211,7 +211,6 @@ const upscaleAlgArr = ref([
 const showUpscalePicker = ref(false);

 const params = ref({
-  client_id: getClientId(),
  width: 1024,
  height: 1024,
  sampler: samplers.value[0].value,
@@ -229,6 +228,7 @@ const params = ref({

 const runningJobs = ref([]);
 const finishedJobs = ref([]);
+const allowPulling = ref(true); // 是否允许轮询
 const router = useRouter();
 // 检查是否有画同款的参数
 const _params = router.currentRoute.value.params["copyParams"];
@@ -260,17 +260,6 @@ 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(() => {
@@ -286,6 +275,12 @@ const initData = () => {
      isLogin.value = true;
      fetchRunningJobs();
      fetchFinishJobs(1);
+
+      setInterval(() => {
+        if (allowPulling.value) {
+          fetchRunningJobs();
+        }
+      }, 5000);
    })
    .catch(() => {
      loading.value = false;
@@ -309,6 +304,14 @@ const fetchRunningJobs = () => {
        }
        _jobs.push(jobs[i]);
      }
+
+      if (runningJobs.value.length !== _jobs.length) {
+        fetchFinishJobs(1);
+      }
+
+      if (runningJobs.value.length === 0) {
+        allowPulling.value = false;
+      }
      runningJobs.value = _jobs;
    })
    .catch((e) => {
@@ -375,7 +378,10 @@ const generate = () => {
    .then(() => {
      showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
      power.value -= sdPower.value;
-      fetchRunningJobs();
+      allowPulling.value = true;
+      runningJobs.value.push({
+        progress: 0,
+      });
    })
    .catch((e) => {
      showFailToast("任务推送失败：" + e.message);