From 29e1426a794a0ffbd1418a33101245e429527ccd Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 4 Jun 2024 17:38:07 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91Image=20mid?=
 =?UTF-8?q?journey=20=E5=A2=9E=E5=8A=A0=20click=20=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ai/image/index.ts        |  8 ++++++++
 src/views/ai/image/ImageTask.vue | 10 ++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/api/ai/image/index.ts b/src/api/ai/image/index.ts
index e2c9b1c1..dfa60c8e 100644
--- a/src/api/ai/image/index.ts
+++ b/src/api/ai/image/index.ts
@@ -15,10 +15,18 @@ export interface ImageDetailVO {
   model: string // 模型
   style: string // 图像生成的风格
   size: string // 图片尺寸
+  buttons: ImageMjButtonsVO[] // mj 操作按钮
   createTime: string // 创建时间
   updateTime: string // 更新事件
 }
 
+export interface ImageMjButtonsVO {
+  customId: string // MJ::JOB::upsample::1::85a4b4c1-8835-46c5-a15c-aea34fad1862 动作标识
+  emoji: string // 图标 emoji
+  label: string // Make Variations 文本
+  style: number // 样式: 2（Primary）、3（Green）
+}
+
 export interface ImagePageReqVO {
   pageNo: number // 分页编号
   pageSize: number // 分页大小
diff --git a/src/views/ai/image/ImageTask.vue b/src/views/ai/image/ImageTask.vue
index f2d2a43b..ec18fb0e 100644
--- a/src/views/ai/image/ImageTask.vue
+++ b/src/views/ai/image/ImageTask.vue
@@ -5,7 +5,8 @@
       v-for="image in imageList"
       :key="image"
       :image-detail="image"
-      @on-btn-click="handlerImageBtnClick" />
+      @on-btn-click="handlerImageBtnClick"
+      @on-mj-btn-click="handlerImageMjBtnClick"/>
   </el-card>
   <!-- 图片 detail 抽屉 -->
   <ImageDetailDrawer
@@ -15,7 +16,7 @@
   />
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDetailVO} from '@/api/ai/image';
+import {ImageApi, ImageDetailVO, ImageMjButtonsVO} from '@/api/ai/image';
 import ImageDetailDrawer from './ImageDetailDrawer.vue'
 import ImageTaskCard from './ImageTaskCard.vue'
 
@@ -61,6 +62,11 @@ const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
   }
 }
 
+/**  图片 - mj btn click  */
+const handlerImageMjBtnClick = async (button: ImageMjButtonsVO) => {
+  console.log('mj click', button)
+}
+
 /**  下载 - image  */
 // TODO @fan：貌似可以考虑抽到 download 里面，作为一个方法
 const downloadImage = async (imageUrl) => {