【增加】增加 action 操作

Author: cherishsince

src/api/ai/image/index.ts

@@ -27,6 +27,12 @@ export interface ImageMjButtonsVO {
   style: number // 样式: 2（Primary）、3（Green）
 }
 
+export interface ImageMjActionVO {
+  id: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
+  customId: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
+}
+
+
 export interface ImagePageReqVO {
   pageNo: number // 分页编号
   pageSize: number // 分页大小
@@ -74,12 +80,19 @@ export const ImageApi = {
   drawImage: async (data: ImageDrawReqVO)=> {
     return await request.post({ url: `/ai/image/draw`, data })
   },
+  // 删除
+  deleteImage: async (id: number)=> {
+    return await request.delete({ url: `/ai/image/delete-my?id=${id}`})
+  },
+
+  // ------------ midjourney
+
   // midjourney - imagine
   midjourneyImagine: async (data: ImageMidjourneyImagineReqVO)=> {
     return await request.post({ url: `/ai/image/midjourney/imagine`, data })
   },
-  // 删除
-  deleteImage: async (id: number)=> {
-    return await request.delete({ url: `/ai/image/delete-my?id=${id}`})
+  // midjourney - action
+  midjourneyAction: async (params: ImageMjActionVO)=> {
+    return await request.get({ url: `/ai/image/midjourney/action`, params })
   },
 }

src/views/ai/image/ImageTask.vue

@@ -16,7 +16,7 @@
   />
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDetailVO, ImageMjButtonsVO} from '@/api/ai/image';
+import {ImageApi, ImageDetailVO, ImageMjActionVO, ImageMjButtonsVO} from '@/api/ai/image';
 import ImageDetailDrawer from './ImageDetailDrawer.vue'
 import ImageTaskCard from './ImageTaskCard.vue'
 
@@ -64,7 +64,15 @@ const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
 
 /**  图片 - mj btn click  */
 const handlerImageMjBtnClick = async (button: ImageMjButtonsVO, imageDetail: ImageDetailVO) => {
-  console.log('mj click', button, imageDetail)
+  // 1、构建 params 参数
+  const params = {
+    id: imageDetail.id,
+    customId: button.customId,
+  } as ImageMjActionVO
+  // 2、发送 action
+  await ImageApi.midjourneyAction(params)
+  // 3、刷新列表
+  await getImageList()
 }
 
 /**  下载 - image  */

src/views/ai/image/ImageTaskCard.vue

@@ -21,7 +21,7 @@
     </div>
     <div class="image-mj-btns">
       <el-button size="small" v-for="button in imageDetail?.buttons" :key="button"
-                 style="width: 40px;margin-left: 0; margin-right: 10px; margin-top: 5px;"
+                 style="min-width: 40px;margin-left: 0; margin-right: 10px; margin-top: 5px;"
                  @click="handlerMjBtnClick(button)"
       >
         {{ button.label }}{{ button.emoji }}