【增加】image 增加重新生成操作(值已经完成切换，还不能完全填充值)

src/views/ai/image/ImageTask.vue

@@ -130,6 +130,10 @@ const handlerImageBtnClick = async (type: string, imageDetail: ImageVO) => {
     message.success('删除成功!')
   } else if (type === 'download') {
     await downloadImage(imageDetail.picUrl)
+  } else if (type === 'regeneration') {
+    // Midjourney 平台
+    console.log('regeneration', imageDetail.id)
+    await emits('onRegeneration', imageDetail)
   }
 }
 
@@ -175,6 +179,9 @@ const handlerPageChange = async (page) => {
 /** 暴露组件方法 */
 defineExpose({ getImageList })
 
+// emits
+const emits = defineEmits(['onRegeneration'])
+
 /** 组件挂在的时候 */
 onMounted(async () => {
   // 获取 image 列表

src/views/ai/image/ImageTaskCard.vue

@@ -25,6 +25,12 @@
           :icon="Download"
           @click="handlerBtnClick('download', imageDetail)"
         />
+        <el-button
+          class="btn"
+          text
+          :icon="RefreshRight"
+          @click="handlerBtnClick('regeneration', imageDetail)"
+        />
         <el-button
           class="btn"
           text
@@ -56,7 +62,7 @@
   </el-card>
 </template>
 <script setup lang="ts">
-import { Delete, Download, More } from '@element-plus/icons-vue'
+import {Delete, Download, More, RefreshRight} from '@element-plus/icons-vue'
 import { ImageVO, ImageMjButtonsVO } from '@/api/ai/image'
 import { PropType } from 'vue'
 import { ElLoading } from 'element-plus'

src/views/ai/image/dall3/index.vue

@@ -97,7 +97,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDrawReqVO} from '@/api/ai/image';
+import {ImageApi, ImageDrawReqVO, ImageVO} from '@/api/ai/image';
 
 // image 模型
 interface ImageModelVO {
@@ -257,6 +257,13 @@ const handlerGenerateImage = async () => {
   }
 }
 
+/** 填充值 */
+const settingValues = async (imageDetail: ImageVO) => {
+  prompt.value = imageDetail.prompt
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
 

src/views/ai/image/index.vue

@@ -8,18 +8,23 @@
       <div class="modal-switch-container">
         <Dall3
           v-if="selectPlatform === AiPlatformEnum.OPENAI"
+          ref="dall3Ref"
           @on-draw-start="handlerDrawStart"
           @on-draw-complete="handlerDrawComplete"
         />
-        <Midjourney v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY" />
+        <Midjourney
+          v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
+          ref="midjourneyRef"
+        />
         <StableDiffusion
           v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
+          ref="stableDiffusionRef"
           @on-draw-complete="handlerDrawComplete"
         />
       </div>
     </div>
     <div class="main">
-      <ImageTask ref="imageTaskRef" />
+      <ImageTask ref="imageTaskRef" @on-regeneration="handlerRegeneration" />
     </div>
   </div>
 </template>
@@ -31,8 +36,13 @@ import Midjourney from './midjourney/index.vue'
 import StableDiffusion from './stable-diffusion/index.vue'
 import ImageTask from './ImageTask.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
+import {ImageVO} from "@/api/ai/image";
+
 
 const imageTaskRef = ref<any>() // image task ref
+const dall3Ref = ref<any>() // image task ref
+const midjourneyRef = ref<any>() // image task ref
+const stableDiffusionRef = ref<any>() // image task ref
 
 // 定义属性
 const selectPlatform = ref('StableDiffusion')
@@ -64,6 +74,28 @@ const handlerDrawComplete = async (type) => {
   // todo
   await imageTaskRef.value.getImageList()
 }
+
+/**  绘画 - 重新生成  */
+const handlerRegeneration = async (imageDetail: ImageVO) => {
+  // 切换平台
+  selectPlatform.value = imageDetail.platform
+
+  // 根据不同平台填充 imageDetail
+  if (imageDetail.platform === AiPlatformEnum.MIDJOURNEY) {
+    await nextTick(async () => {
+      midjourneyRef.value.settingValues(imageDetail)
+    })
+  } else if (imageDetail.platform === AiPlatformEnum.OPENAI) {
+    await nextTick(async () => {
+      dall3Ref.value.settingValues(imageDetail)
+    })
+  } else if (imageDetail.platform === AiPlatformEnum.STABLE_DIFFUSION) {
+    await nextTick(async () => {
+      stableDiffusionRef.value.settingValues(imageDetail)
+    })
+  }
+
+}
 </script>
 
 <style scoped lang="scss">

src/views/ai/image/midjourney/index.vue

@@ -104,7 +104,7 @@
 <script setup lang="ts">
 
 // image 模型
-import {ImageApi, ImageMidjourneyImagineReqVO} from "@/api/ai/image";
+import {ImageApi, ImageMidjourneyImagineReqVO, ImageVO} from "@/api/ai/image";
 // message
 const message = useMessage()
 // 定义 emits
@@ -274,6 +274,14 @@ const handlerGenerateImage = async () => {
     emits('onDrawComplete', selectModel.value.key)
   }
 }
+
+/** 填充值 */
+const settingValues = async (imageDetail: ImageVO) => {
+  prompt.value = imageDetail.prompt
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
 

src/views/ai/image/stable-diffusion/index.vue

@@ -120,7 +120,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDrawReqVO} from '@/api/ai/image'
+import {ImageApi, ImageDrawReqVO, ImageVO} from '@/api/ai/image'
 
 // image 模型
 interface ImageModelVO {
@@ -371,6 +371,14 @@ const handleGenerateImage = async () => {
     drawIn.value = false
   }
 }
+
+/** 填充值 */
+const settingValues = async (imageDetail: ImageVO) => {
+  prompt.value = imageDetail.prompt
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
 // 提示词