From 1be7713f5657ee8f2a0180e189d82a798f94370c Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 4 Jun 2024 17:37:52 +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=E6=93=8D=E4=BD=9C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/ImageTaskCard.vue | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/views/ai/image/ImageTaskCard.vue b/src/views/ai/image/ImageTaskCard.vue
index 3da3ca8e..e2c4d7c7 100644
--- a/src/views/ai/image/ImageTaskCard.vue
+++ b/src/views/ai/image/ImageTaskCard.vue
@@ -19,11 +19,19 @@
       <img class="image" :src="imageDetail?.picUrl"/>
       <div v-if="imageDetail?.status === 30">{{imageDetail?.errorMessage}}</div>
     </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;"
+                 @click="handlerMjBtnClick(button)"
+      >
+        {{ button.label }}{{ button.emoji }}
+      </el-button>
+    </div>
   </el-card>
 </template>
 <script setup lang="ts">
 import {Delete, Download, More} from "@element-plus/icons-vue";
-import {ImageDetailVO} from "@/api/ai/image";
+import {ImageDetailVO, ImageMjButtonsVO} from "@/api/ai/image";
 import {PropType} from "vue";
 import {ElLoading} from "element-plus";
 
@@ -56,6 +64,12 @@ const handlerLoading = async (status: number) => {
     }
   }
 }
+
+/**  mj 按钮 click  */
+const handlerMjBtnClick = async (button: ImageMjButtonsVO) => {
+  emits('onMjBtnClick', button)
+}
+
 // watch
 const { imageDetail } = toRefs(props)
 watch(imageDetail, async (newVal, oldVal) => {
@@ -63,7 +77,7 @@ watch(imageDetail, async (newVal, oldVal) => {
 })
 
 // emits
-const emits = defineEmits(['onBtnClick'])
+const emits = defineEmits(['onBtnClick', 'onMjBtnClick'])
 
 //
 onMounted(async () => {
@@ -104,6 +118,15 @@ onMounted(async () => {
       border-radius: 10px;
     }
   }
+
+  .image-mj-btns {
+    margin-top: 5px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
 }
 
 </style>