use http pull message to page notify

2025-12-26 01:55:58 +08:00 · 2025-03-04 06:54:30 +08:00
parent 668ff70bc1 0ef51714c9
commit 3958e99e4d
23 changed files with 482 additions and 670 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
@@ -21,18 +21,18 @@
                <el-row :gutter="10">
                  <el-col :span="8" v-for="item in rates" :key="item.value">
                    <div
-                      class="flex-col items-center"
-                      :class="
+                        class="flex-col items-center"
+                        :class="
                        item.value === params.aspect_ratio
                          ? 'grid-content active'
                          : 'grid-content'
                      "
-                      @click="changeRate(item)"
+                        @click="changeRate(item)"
                    >
                      <el-image
-                        class="icon proportion"
-                        :src="item.img"
-                        fit="cover"
+                          class="icon proportion"
+                          :src="item.img"
+                          fit="cover"
                      ></el-image>
                      <div class="texts">{{ item.text }}</div>
                    </div>
@@ -74,10 +74,10 @@
            <div class="param-line">
              <el-form-item label="创意程度">
                <el-slider
-                  v-model="params.cfg_scale"
-                  :min="0"
-                  :max="1"
-                  :step="0.1"
+                    v-model="params.cfg_scale"
+                    :min="0"
+                    :max="1"
+                    :step="0.1"
                />
              </el-form-item>
            </div>
@@ -96,8 +96,8 @@
              <!-- 添加运镜类型选择 -->
              <el-form-item label="运镜类型">
                <el-select
-                  v-model="params.camera_control.type"
-                  placeholder="请选择运镜类型"
+                    v-model="params.camera_control.type"
+                    placeholder="请选择运镜类型"
                >
                  <el-option label="请选择" value="" />
                  <el-option label="简单运镜" value="simple" />
@@ -110,49 +110,49 @@

              <!-- 仅在simple模式下显示详细配置 -->
              <div
-                class="camera-control"
-                v-if="params.camera_control.type === 'simple'"
+                  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"
+                      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"
+                      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"
+                      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"
+                      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"
+                      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"
+                      v-model="params.camera_control.config.zoom"
+                      :min="-10"
+                      :max="10"
                  />
                </el-form-item>
              </div>
@@ -166,9 +166,9 @@
        <!-- 任务类型选择 -->
        <div class="param-line">
          <el-tabs
-            v-model="params.task_type"
-            @tab-change="tabChange"
-            class="title-tabs"
+              v-model="params.task_type"
+              @tab-change="tabChange"
+              class="title-tabs"
          >
            <el-tab-pane label="文生视频" name="text2video">
              <div class="text">使用文字描述想要生成视频的内容</div>
@@ -186,18 +186,19 @@
        <div class="generation-area">
          <div v-if="params.task_type === 'text2video'" class="text2video">
            <el-input
-              v-model="params.prompt"
-              type="textarea"
-              :autosize="{ minRows: 4, maxRows: 6 }"
-              placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
+                v-model="params.prompt"
+                type="textarea"
+                maxlength="500"
+                :autosize="{ minRows: 4, maxRows: 6 }"
+                placeholder="请在此输入视频提示词，您也可以点击下面的提示词助手生成视频提示词"
            />
            <el-row class="text-info">
              <el-button
-                class="generate-btn"
-                @click="generatePrompt"
-                :loading="isGenerating"
-                size="small"
-                color="#5865f2"
+                  class="generate-btn"
+                  @click="generatePrompt"
+                  :loading="isGenerating"
+                  size="small"
+                  color="#5865f2"
              >
                <i class="iconfont icon-chuangzuo"></i>
                生成专业视频提示词
@@ -210,16 +211,16 @@
              <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"
+                    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"
+                      v-if="params.image"
+                      :src="params.image"
+                      class="preview"
                  />
                  <el-icon v-else class="upload-icon"><Plus /></el-icon>
                </el-upload>
@@ -227,16 +228,16 @@
              <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"
+                    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"
+                      v-if="params.image_tail"
+                      :src="params.image_tail"
+                      class="preview"
                  />
                  <el-icon v-else class="upload-icon"><Plus /></el-icon>
                </el-upload>
@@ -247,8 +248,8 @@
                <div class="flex-row justify-start items-center">
                  <span>提示词：</span>
                  <el-tooltip
-                    content="输入你想要的内容，用逗号分割"
-                    placement="right"
+                      content="输入你想要的内容，用逗号分割"
+                      placement="right"
                  >
                    <el-icon>
                      <InfoFilled />
@@ -259,10 +260,10 @@
            </div>
            <div class="param-line pt">
              <el-input
-                v-model="params.prompt"
-                type="textarea"
-                :autosize="{ minRows: 4, maxRows: 6 }"
-                placeholder="描述视频画面细节"
+                  v-model="params.prompt"
+                  type="textarea"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  placeholder="描述视频画面细节"
              />
            </div>
          </div>
@@ -273,8 +274,8 @@
              <div class="flex-row justify-start items-center">
                <span>不希望出现的内容：（可选）</span>
                <el-tooltip
-                  content="不想出现在图片上的元素(例如：树，建筑)"
-                  placement="right"
+                    content="不想出现在图片上的元素(例如：树，建筑)"
+                    placement="right"
                >
                  <el-icon>
                    <InfoFilled />
@@ -285,21 +286,21 @@
          </div>
          <div class="param-line pt">
            <el-input
-              v-model="params.negative_prompt"
-              type="textarea"
-              :autosize="{ minRows: 4, maxRows: 6 }"
-              placeholder="请在此输入你不希望出现在视频上的内容"
+                v-model="params.negative_prompt"
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 6 }"
+                placeholder="请在此输入你不希望出现在视频上的内容"
            />
          </div>

          <!-- 算力显示 -->
          <el-row class="text-info">
            <el-text type="primary"
-              >每次生成视频消耗
+            >每次生成视频消耗
              <el-text type="warning">{{ powerCost }}算力;</el-text> </el-text
            >&nbsp;&nbsp;
            <el-text type="primary"
-              >当前可用算力：<el-text type="warning">{{
+            >当前可用算力：<el-text type="warning">{{
                availablePower
              }}</el-text></el-text
            >
@@ -308,7 +309,7 @@
          <!-- 生成按钮 -->
          <div class="submit-btn">
            <el-button type="primary" :dark="false" @click="generate" round
-              >立即生成</el-button
+            >立即生成</el-button
            >
          </div>
        </div>
@@ -332,153 +333,85 @@
            <h2 class="record-title pt">创作记录</h2>
            <!-- 已完成的任务 -->
            <v3-waterfall
-              :virtual-time="200"
-              :distance-to-scroll="150"
-              :key="waterfallKey"
-              :list="finishedTasks"
-              @scrollReachBottom="fetchTasks"
-              :gap="8"
-              :bottomGap="8"
-              :colWidth="300"
-              :distanceToScroll="100"
-              :isLoading="loading"
-              :isOver="isOver"
-              class="task-waterfall"
+                :key="waterfallKey"
+                :list="finishedTasks"
+                @scrollReachBottom="fetchTasks"
+                :gap="20"
+                :bottomGap="20"
+                :colWidth="300"
+                :distanceToScroll="100"
+                :isLoading="loading"
+                :isOver="isOver"
+                class="task-waterfall"
            >
              <template #default="slotProp">
-                <!-- 视频成功渲染部分 -->
                <div
-                  class="job-item-box"
-                  :class="{
+                    class="job-item-box"
+                    :class="{
                    processing: slotProp.item.progress < 100,
                    error: slotProp.item.progress === 101
                  }"
                >
                  <video
-                    v-if="
-                      slotProp.item.progress >= 100 && slotProp.item.video_url
-                    "
-                    class="preview"
-                    :src="slotProp.item.video_url"
-                    @click="previewVideo(slotProp.item)"
-                    controls
-                    :style="{
-                      width: '100%',
-                      height: `${slotProp.item.height || 400}px`
-                    }"
+                      v-if="slotProp.item.progress === 100"
+                      class="preview"
+                      :src="slotProp.item.video_url"
+                      @click="previewVideo(slotProp.item)"
+                      controls
                  ></video>

-                  <!-- 失败/无图状态 -->
-                  <div
-                    v-else
-                    class="error-container"
-                    :style="{
-                      width: '100%',
-                      height: `${slotProp.item.height || 300}px`,
-                      objectFit: 'cover'
-                    }"
-                  >
+                  <div v-else class="status-overlay">
                    <div
-                      v-if="
-                        slotProp.item.progress >= 100 &&
-                        !slotProp.item.video_url
-                      "
-                      class="error-status"
+                        v-if="slotProp.item.progress === 101"
+                        class="error-status"
                    >
-                      <img :src="failed" />
-                      生成失败
+                      <el-icon><CloseBold /></el-icon>
+                      任务失败
                    </div>
                    <div v-else class="processing-status">
                      <el-progress
-                        :percentage="slotProp.item.progress"
-                        :stroke-width="12"
-                        status="success"
+                          :percentage="slotProp.item.progress"
+                          :stroke-width="12"
+                          status="success"
                      />
                    </div>
                  </div>
-                  <div class="tools-box">
-                    <div class="tools">
-                      <el-button
-                        type="primary"
-                        v-if="
-                          slotProp.item.progress >= 100 &&
-                          slotProp.item.video_url
-                        "
+
+                  <div class="tools">
+                    <el-button
+                        v-if="slotProp.item.progress === 100"
                        @click="downloadVideo(slotProp.item)"
-                      >
-                        <el-icon><Download /></el-icon>
-                      </el-button>
-
-                      <div
-                        class="show-prompt"
-                        v-if="
-                          slotProp.item.progress >= 100 &&
-                          !slotProp.item.video_url &&
-                          slotProp.item.err_msg
-                        "
-                      >
-                        <el-popover
+                    >
+                      <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"
-                        >
-                          <template #reference>
-                            <el-icon class="chromefilled error-txt"
-                              ><WarnTriangleFilled
-                            /></el-icon>
-                          </template>
+                      >
+                        <template #reference>
+                          <el-icon class="chromefilled">
+                            <ChromeFilled />
+                          </el-icon>
+                        </template>

-                          <template #default>
-                            <div class="top-tips">
-                              <span>错误详细信息</span
-                              ><el-icon
-                                class="copy-prompt-kl"
+                        <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"
-                              >
-                                <DocumentCopy />
-                              </el-icon>
-                            </div>
-                            <div class="mj-list-item-prompt">
-                              <span>{{ slotProp.item.prompt }}</span>
-                            </div>
-                          </template>
-                        </el-popover>
-                      </div>
-
-                      <el-button
-                        type="danger"
-                        @click="deleteTask(slotProp.item)"
-                      >
-                        <el-icon><Delete /></el-icon>
-                      </el-button>
-                      <div class="show-prompt">
-                        <el-popover
-                          placement="left"
-                          :width="240"
-                          trigger="hover"
-                        >
-                          <template #reference>
-                            <el-icon class="chromefilled">
-                              <ChromeFilled />
+                            >
+                              <DocumentCopy />
                            </el-icon>
-                          </template>
-
-                          <template #default>
-                            <div class="top-tips">
-                              <span>提示词</span
-                              ><el-icon
-                                class="copy-prompt-kl"
-                                :data-clipboard-text="slotProp.item.prompt"
-                              >
-                                <DocumentCopy />
-                              </el-icon>
-                            </div>
-                            <div class="mj-list-item-prompt">
-                              <span>{{ slotProp.item.prompt }}</span>
-                            </div>
-                          </template>
-                        </el-popover>
-                      </div>
+                          </div>
+                        </template>
+                      </el-popover>
                    </div>
                  </div>
                </div>
@@ -498,19 +431,18 @@
    <!-- 视频预览对话框 -->
    <el-dialog v-model="previewVisible" title="视频预览" width="80%">
      <video
-        v-if="currentVideo"
-        :src="currentVideo"
-        controls
-        style="width: 100%"
+          v-if="currentVideo"
+          :src="currentVideo"
+          controls
+          style="width: 100%"
      ></video>
    </el-dialog>
  </div>
 </template>

 <script setup>
-import failed from "@/assets/img/failed.png";
 import TaskList from "@/components/TaskList.vue";
-import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
+import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
 import {
  Plus,
  Delete,
@@ -518,12 +450,11 @@ import {
  ChromeFilled,
  DocumentCopy,
  Download,
-  WarnTriangleFilled
+    CloseBold
 } 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 Clipboard from "clipboard";
+import { checkSession } from "@/store/cache";

 import {
  closeLoading,
@@ -535,7 +466,6 @@ import { replaceImg } from "@/utils/libs";

 // 参数设置
 const params = reactive({
-  client_id: getClientId(),
  task_type: "text2video",
  model: "default",
  prompt: "",
@@ -559,7 +489,7 @@ const params = reactive({
  image_tail: ""
 });
 const rates = [
-  { css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
+  {css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png"},

  {
    css: "size16-9",
@@ -594,6 +524,7 @@ const currentPage = ref(1);
 const previewVisible = ref(false);
 const currentVideo = ref("");
 const isOver = ref(false);
+const pullTask = ref(true);

 // 方法定义

@@ -634,7 +565,7 @@ const generatePrompt = async () => {
  }
  isGenerating.value = true;
  try {
-    const res = await httpPost("/api/prompt/video", { prompt: params.prompt });
+    const res = await httpPost("/api/prompt/video", {prompt: params.prompt});
    params.prompt = res.data;
  } catch (e) {
    showMessageError("生成失败: " + e.message);
@@ -647,6 +578,10 @@ const generate = async () => {
  if (!params.prompt?.trim()) {
    return ElMessage.error("请输入视频描述");
  }
+  // 提示词长度不能超过 500
+  if (params.prompt.length > 500) {
+    return ElMessage.error("视频描述不能超过 500 个字符");
+  }
  // if (params.task_type === "image2video" && !params.image) {
  //   return ElMessage.error("请上传起始帧图片");
  // }
@@ -659,7 +594,9 @@ const generate = async () => {
    await httpPost("/api/video/keling/create", params);
    showMessageOK("任务创建成功");
    // 立即获取最新数据
-    fetchTasks();
+    await fetchTasks();
+    // 开启任务轮询
+    pullTask.value = true;
  } catch (e) {
    showMessageError("创建失败: " + e.message);
  } finally {
@@ -686,26 +623,25 @@ const fetchTasks = async () => {
    // 精确任务过滤逻辑
    const data = res.data || {};
    const newRunning = data.items.filter(
-      (task) => task.progress < 100 && task.progress !== 101
+        (task) => task.progress < 100 && task.progress !== 101
    );
    runningTasks.value = [...runningTasks.value, ...newRunning];
+    // 如果运行中的任务为零，则停止轮询
+    if (newRunning.length === 0) {
+      pullTask.value = false;
+    }

-    const newfinished = data.items.filter((task) => task.progress >= 100);
-    const finishedList = [...finishedTasks.value, ...newfinished];
-    finishedTasks.value = finishedList.map((item) => ({
-      ...item,
-      height: 300 * (Math.random() * 0.4 + 0.6) // 生成300~420px随机高度
-    }));
-    console.log("finishedTasks: " + finishedList);
+    const newFinished = data.items.filter((task) => task.progress >= 100);
+    finishedTasks.value = [...finishedTasks.value, ...newFinished];

    // // 强制刷新瀑布流
    waterfallKey.value = Date.now();
    total.value = data.total;

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

    if (shouldLoadNextPage) {
      currentPage.value++;
@@ -758,9 +694,9 @@ const downloadVideo = async (task) => {
 const deleteTask = async (task) => {
  try {
    await ElMessageBox.confirm("确定要删除该任务吗？");
-    await httpGet("/api/video/remove", { id: task.id });
+    await httpGet("/api/video/remove", {id: task.id});
    showMessageOK("删除成功");
-    fetchTasks();
+    await fetchTasks();
  } catch (e) {
    if (e !== "cancel") {
      showMessageError("删除失败: " + e.message);
@@ -768,31 +704,24 @@ const deleteTask = async (task) => {
  }
 };

-fetchTasks();
-const clipboard = ref(null);
-
 // 生命周期钩子
 onMounted(async () => {
  checkSession()
-    .then(async () => {
-      isLogin.value = true;
-      console.log("mounted-isLogin-可以继续", isLogin.value);
-      await fetchTasks();
-    })
-    .catch(() => {});
+      .then(async () => {
+        isLogin.value = true;
+        console.log("mounted-isLogin-可以继续", isLogin.value);

-  // fetchTasks();
-  clipboard.value = new Clipboard(".copy-prompt-kl");
-  clipboard.value.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
-
-  clipboard.value.on("error", () => {
-    ElMessage.error("复制失败！");
-  });
+        await fetchTasks();
+        setInterval(() => {
+          if (pullTask.value) {
+            fetchTasks();
+          }
+        }, 5000)
+      })
+      .catch(() => {
+      });
 });
 onUnmounted(() => {
-  clipboard.value.destroy();
 });
 // 监听任务状态变化
 watch([runningTasks, finishedTasks], () => {
@@ -805,25 +734,12 @@ watch([runningTasks, finishedTasks], () => {
 <style lang="stylus" scoped>
@import "@/assets/css/image-keling.styl"
@import "@/assets/css/custom-scroll.styl"
-.copy-prompt-kl{
-  cursor pointer
-}
-.top-tips{
-  height: 30px
-  font-size: 18px
-  line-height: 30px
-  display: flex
-  align-items: center;
-  span{
-    margin-right: 10px
-    color:#000
-  }
-}
-.mj-list-item-prompt{
+.mj-list-item-prompt {
  max-height: 600px;
  overflow: auto;
 }
-:deep(.running-job-box .image-slot){
+
+:deep(.running-job-box .image-slot) {
  display: flex
  align-items: center
  flex-direction: column;
@@ -836,98 +752,88 @@ watch([runningTasks, finishedTasks], () => {
  text-align: center
  width: 200px;
  height: 200px;
-  .iconfont{
-    font-size: 45px;
+
+  .iconfont {
+    font-size: 45px

  }
-  span{
+
+  span {
    font-size: 15px
  }
 }


 .record-title
-  padding:1rem 0
+  padding: 1rem 0
+
 .type-btn-group
  margin-bottom: 20px
+
 .task-waterfall
  margin: 0 -10px
  transition: opacity 0.3s ease

 .job-item-box
  position: relative
-  background: #f5f5f5;
-  transition: height 0.3s ease;
+  transition: transform 0.3s ease
  overflow: hidden
-  // margin: 10px
-  // border: 1px solid #666;
-  // padding: 6px;
+  margin: 10px
+  border: 1px solid #666;
+  padding: 6px;
  border-radius: 6px;
  break-inside: avoid
+
  video
    min-height: 200px;
-    width: 100%;
-    object-fit: cover;

  .chromefilled
    font-size: 24px;
-    color: #fff;
-    &.error-txt{
-      color: #ffff54;
-      cursor:pointer;
-    }
+
  .show-prompt
    display: flex;
    align-items: center;
-  &:hover
-    // transform: translateY(-3px)
-    .tools-box{
-      display:block
-      background:rgba(0, 0, 0, 0.3)
-      width : 100%;
-    }

-  .error-container
-    position: relative
-    background: var(--bg-deep-color)
+  &:hover
+    transform: translateY(-3px)
+
+  .status-overlay
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: rgba(0, 0, 0, 0.7)
    display: flex
    align-items: center
    justify-content: center
-    img{
-      width: 66%;
-      height: 66%;
-      object-fit: cover;
-      margin: 0 auto;
-    }

    .error-status
-      color: #c2c6cc
+      color: #ff4d4f
      text-align: center
-      font-size: 24px

+      .el-icon
+        font-size: 24px
+        display: block
+        margin-bottom: 8px

    .processing-status
      width: 80%
+
      .el-progress
        margin: 0 auto
-  .tools-box{
-    display:none
-    position:absolute;
-    top: 0;
-    right: 0;
-  }
+
  .tools
    align-items: center;
    justify-content: flex-end;
    display: flex
-    gap: 5px
-    margin: 5px 5px 5px 0;
+    gap: 8px
+    margin: 5px 0 0

-
-    .el-button+.el-button
+    .el-button + .el-button
      margin-left: 0px;

    .el-button
-      padding: 3px
+      padding: 6px
      border-radius: 50%
 </style>
--- 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);
-  }).catch(() => {});
-
-  store.addMessageHandler("luma", (data) => {
-    // 丢弃无关消息
-    if (data.channel !== "luma" || data.clientId !== getClientId()) {
-      return;
-    }
-
-    if (data.body === "FINISH" || data.body === "FAIL") {
-      fetchData(1);
-    }
+    setInterval(() => {
+      if (taskPulling.value) {
+        fetchData(1);
+      }
+    }, 5000);
  });
 });

-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);