Browse Source

【增加】Image midjourney 增加 click 事件

cherishsince 1 year ago
parent
commit
29e1426a79
2 changed files with 16 additions and 2 deletions
  1. 8 0
      src/api/ai/image/index.ts
  2. 8 2
      src/views/ai/image/ImageTask.vue

+ 8 - 0
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 // 分页大小

+ 8 - 2
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) => {