【代码优化】AI：图片轮询实现

src/api/ai/image/index.ts

@@ -56,23 +56,23 @@ export interface ImageMjButtonsVO {
 
 // AI API 密钥 API
 export const ImageApi = {
-  // 获取我的图片列表
+  // 获取【我的】绘图分页
   getImagePageMy: async (params: ImagePageReqVO) => {
     return await request.get({ url: `/ai/image/my-page`, params })
   },
-  // 获取我的图片
+  // 获取【我的】绘图记录
   getImageMy: async (id: number) => {
     return await request.get({ url: `/ai/image/get-my?id=${id}` })
   },
-  // 获取我的图片
+  // 获取【我的】绘图记录列表
-  getImageMyIds: async (params) => {
+  getImageListMyByIds: async (ids: number[]) => {
-    return await request.get({ url: `/ai/image/get-my-ids`, params})
+    return await request.get({ url: `/ai/image/get-my-ids`, params: { ids: ids.join(',') } })
   },
   // 生成图片
   drawImage: async (data: ImageDrawReqVO) => {
     return await request.post({ url: `/ai/image/draw`, data })
   },
-  // 删除我的图片
+  // 删除【我的】绘画记录
   deleteImageMy: async (id: number) => {
     return await request.delete({ url: `/ai/image/delete-my?id=${id}` })
   },

src/views/ai/image/ImageTask.vue

@@ -36,7 +36,7 @@ import { ElLoading, LoadingOptionsResolved } from 'element-plus'
 const message = useMessage() // 消息弹窗
 
 const imageList = ref<ImageVO[]>([]) // image 列表
-const watchImages = ref<{}>({}) // 监听的 image list，一般是生成中，需要轮训
+const inProgressImageMap = ref<{}>({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
 const imageListInterval = ref<any>() // image 列表定时器，刷新列表
 const isShowImageDetail = ref<boolean>(false) // 是否显示 task 详情
 const showImageDetailId = ref<number>(0) // 是否显示 task 详情
@@ -79,12 +79,12 @@ const getImageList = async (apply: boolean = false) => {
     pageTotal.value = total
     // 需要 watch 的数据
     const newWatImages = {}
-    imageList.value.forEach(item => {
+    imageList.value.forEach((item) => {
       if (item.status === 10) {
         newWatImages[item.id] = item
       }
     })
-    watchImages.value = newWatImages
+    inProgressImageMap.value = newWatImages
   } finally {
     if (imageTaskLoadingInstance.value) {
       imageTaskLoadingInstance.value.close()
@@ -93,34 +93,30 @@ const getImageList = async (apply: boolean = false) => {
   }
 }
 
-/**
+/** 轮询生成中的 image 列表 */
- * 获取 - image 列表
- */
 const refreshWatchImages = async () => {
-  const imageIds = Object.keys(watchImages.value)
+  const imageIds = Object.keys(inProgressImageMap.value).map(Number)
-  if (imageIds.length < 1) {
+  if (imageIds.length == 0) {
-    console.log('refreshWatchImages 不刷新', imageIds)
     return
   }
-  const res  = await ImageApi.getImageMyIds({ids: imageIds.join(',')}) as ImageVO[]
+  const list = (await ImageApi.getImageListMyByIds(imageIds)) as ImageVO[]
   const newWatchImages = {}
-  res.forEach(image => {
+  list.forEach((image) => {
     if (image.status === 10) {
       newWatchImages[image.id] = image
     } else {
-      const index = imageList.value.findIndex(oldImage => image.id === oldImage.id)
+      const index = imageList.value.findIndex((oldImage) => image.id === oldImage.id)
-      if (index !== -1) {
+      if (index >= 0) {
         // 更新 imageList
         imageList.value[index] = image
       }
     }
   })
-  console.log('newWatchImages-done', newWatchImages)
+  inProgressImageMap.value = newWatchImages
-  watchImages.value = newWatchImages
 }
 
 /**  图片 - btn click  */
-const handlerImageBtnClick = async (type, imageDetail: ImageVO) => {
+const handlerImageBtnClick = async (type: string, imageDetail: ImageVO) => {
   // 获取 image detail id
   showImageDetailId.value = imageDetail.id
   // 处理不用 btn
@@ -130,7 +126,7 @@ const handlerImageBtnClick = async (type, imageDetail: ImageVO) => {
     await message.confirm(`是否删除照片?`)
     await ImageApi.deleteImageMy(imageDetail.id)
     await getImageList()
-    await message.success('删除成功!')
+    message.success('删除成功!')
   } else if (type === 'download') {
     await downloadImage(imageDetail.picUrl)
   }