From c87713f0409b0a897f5845b911dec513ecb85ec9 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 28 May 2024 10:27:57 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91Dall=20?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E4=B8=AD=20=E6=8C=89=E9=92=AE=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/dall3/index.vue | 42 +++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/views/ai/image/dall3/index.vue b/src/views/ai/image/dall3/index.vue
index 5d8ebbd7..fd68a30e 100644
--- a/src/views/ai/image/dall3/index.vue
+++ b/src/views/ai/image/dall3/index.vue
@@ -87,8 +87,13 @@
     </el-space>
   </div>
   <div class="btns">
-<!--    <el-button size="large" round>重置内容</el-button>-->
-    <el-button type="primary" size="large" round @click="handlerGenerateImage">生成内容</el-button>
+    <el-button type="primary"
+               size="large"
+               round
+               :loading="drawIn"
+               @click="handlerGenerateImage">
+      {{drawIn ? '生成中' : '生成内容'}}
+    </el-button>
   </div>
 </template>
 <script setup lang="ts">
@@ -109,6 +114,7 @@ interface ImageSizeVO {
 
 // 定义属性
 const prompt = ref<string>('')  // 提示词
+const drawIn = ref<boolean>(false)  // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
 const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城'])  // 热词
 const selectModel = ref<any>({}) // 模型
@@ -216,19 +222,25 @@ const handlerSizeClick = async (imageSize: ImageSizeVO) => {
  * 图片生产
  */
 const handlerGenerateImage = async () => {
-  // todo @范 图片生产逻辑
-  console.log('prompt.value', prompt)
-  console.log('prompt.value', prompt.value)
-  const form = {
-    prompt: prompt.value, // 提示词
-    model: selectModel.value.key, // 模型
-    style: selectImageStyle.value.key, // 图像生成的风格
-    size: selectImageSize.value.key, // size不能为空
-  } as ImageDallReqVO
-  // 发送请求
-  await ImageApi.dall(form)
-  // 回调
-  emits('onDrawComplete', selectModel.value.key)
+  try {
+    // 加载中
+    drawIn.value = true
+    // 回调
+    emits('onDrawStart', selectModel.value.key)
+    const form = {
+      prompt: prompt.value, // 提示词
+      model: selectModel.value.key, // 模型
+      style: selectImageStyle.value.key, // 图像生成的风格
+      size: selectImageSize.value.key, // size不能为空
+    } as ImageDallReqVO
+    // 发送请求
+    await ImageApi.dall(form)
+  } finally {
+    // 回调
+    emits('onDrawComplete', selectModel.value.key)
+    // 加载结束
+    drawIn.value = false
+  }
 }
 
 </script>