【解决todo】如果有生成中的图片，轮询改成 get 接口去轮询，不基于 page 轮询

src/api/ai/image/index.ts

@@ -64,6 +64,10 @@ export const ImageApi = {
   getImageMy: async (id: number) => {
     return await request.get({ url: `/ai/image/get-my?id=${id}` })
   },
+  // 获取我的图片
+  getImageMyIds: async (params) => {
+    return await request.get({ url: `/ai/image/get-my-ids`, params})
+  },
   // 生成图片
   drawImage: async (data: ImageDrawReqVO) => {
     return await request.post({ url: `/ai/image/draw`, data })

src/views/ai/image/ImageTask.vue

@@ -26,7 +26,7 @@
   />
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageRespVO, ImageMjActionVO, ImageMjButtonsVO} from '@/api/ai/image';
+import {ImageApi, ImageMjActionVO, ImageMjButtonsVO, ImageRespVO} from '@/api/ai/image';
 import ImageDetailDrawer from './ImageDetailDrawer.vue'
 import ImageTaskCard from './ImageTaskCard.vue'
 import {ElLoading, LoadingOptionsResolved} from "element-plus";
@@ -34,7 +34,7 @@ import {ElLoading, LoadingOptionsResolved} from "element-plus";
 const message = useMessage() // 消息弹窗
 
 const imageList = ref<ImageRespVO[]>([]) // image 列表
-const watchImageList = ref<ImageRespVO[]>([]) // 监听的 image list，一般是生成中，需要轮训
+const watchImages = ref<{}>({}) // 监听的 image list，一般是生成中，需要轮训
 const imageListInterval = ref<any>() // image 列表定时器，刷新列表
 const isShowImageDetail = ref<boolean>(false) // 是否显示 task 详情
 const showImageDetailId = ref<number>(0) // 是否显示 task 详情
@@ -72,6 +72,13 @@ const getImageList = async (apply:boolean = false) => {
       imageList.value = list
     }
     pageTotal.value = total
+    // 需要 watch 的数据
+    imageList.value.map(item => {
+      if (item.status === 10) {
+        watchImages.value[item.id] = item
+      }
+    })
+
   } finally {
     if (imageTaskLoadingInstance.value) {
       imageTaskLoadingInstance.value.close();
@@ -80,6 +87,26 @@ const getImageList = async (apply:boolean = false) => {
   }
 }
 
+/**
+ * 获取 - image 列表
+ */
+const refreshWatchImages = async () => {
+  const imageIds = Object.keys(watchImages.value)
+  if (imageIds.length < 1) {
+    return
+  }
+  const res  = await ImageApi.getImageMyIds({ids: imageIds.join(',')}) as ImageRespVO[]
+  res.forEach(image => {
+    const index = imageList.value.findIndex(oldImage => image.id === oldImage.id)
+    if (index !== -1) {
+      // 更新 imageList
+      imageList.value[index] = image
+      // 删除 watchImages
+      delete watchImages.value[image.id];
+    }
+  })
+}
+
 /**  图片 - btn click  */
 const handlerImageBtnClick = async (type, imageDetail: ImageRespVO) => {
   // 获取 image detail id
@@ -145,8 +172,8 @@ onMounted(async () => {
   await getImageList()
   // 自动刷新 image 列表
   imageListInterval.value = setInterval(async () => {
-    await getImageList(false)
-  }, 1000 * 20)
+    await refreshWatchImages()
+  }, 1000 * 3)
 })
 
 /** 组件取消挂在的时候 */