【代码优化】AI：绘图 index.vue 代码梳理 80%（Dall3.vue）

src/views/ai/image/index/components/ImageDetail.vue

@@ -119,6 +119,25 @@
         {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
       </div>
     </div>
+    <!-- Midjourney 专属区域 -->
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version"
+    >
+      <div class="tip">模型版本</div>
+      <div class="body">
+        {{ detail?.options?.version }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.referImageUrl"
+    >
+      <div class="tip">参考图</div>
+      <div class="body">
+        <el-image :src="detail.options.referImageUrl" />
+      </div>
+    </div>
   </el-drawer>
 </template>
 

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

@@ -7,7 +7,7 @@
       v-model="prompt"
       maxlength="1024"
       rows="5"
-      style="width: 100%; margin-top: 15px;"
+      class="w-100% mt-15px"
       input-style="border-radius: 7px;"
       placeholder="例如：童话里的小屋应该是什么样子？"
       show-word-limit
@@ -19,12 +19,13 @@
       <el-text tag="b">随机热词</el-text>
     </div>
     <el-space wrap class="word-list">
-      <el-button round
-                 class="btn"
-                 :type="(selectHotWord === hotWord ? 'primary' : 'default')"
-                 v-for="hotWord in hotWords"
-                 :key="hotWord"
-                 @click="handleHotWordClick(hotWord)"
+      <el-button
+        round
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
       >
         {{ hotWord }}
       </el-button>
@@ -35,17 +36,36 @@
       <el-text tag="b">尺寸</el-text>
     </div>
     <el-space wrap class="size-list">
-      <div class="size-item"
-           v-for="imageSize in imageSizeList"
-           :key="imageSize.key"
-           @click="handleSizeClick(imageSize)">
-        <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+      <div
+        class="size-item"
+        v-for="imageSize in MidjourneySizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+        >
           <div :style="imageSize.style"></div>
         </div>
         <div class="size-font">{{ imageSize.key }}</div>
       </div>
     </el-space>
   </div>
+  <div class="model">
+    <div>
+      <el-text tag="b">模型</el-text>
+    </div>
+    <el-space wrap class="model-list">
+      <div
+        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
+        v-for="model in MidjourneyModels"
+        :key="model.key"
+      >
+        <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
+        <div class="model-font">{{ model.name }}</div>
+      </div>
+    </el-space>
+  </div>
   <div class="version">
     <div>
       <el-text tag="b">版本</el-text>
@@ -53,11 +73,9 @@
     <el-space wrap class="version-list">
       <el-select
         v-model="selectVersion"
-        class="version-select"
+        class="version-select !w-350px"
         clearable
         placeholder="请选择版本"
-        style="width: 350px"
-        @change="handleChangeVersion"
       >
         <el-option
           v-for="item in versionList"
@@ -68,228 +86,130 @@
       </el-select>
     </el-space>
   </div>
-  <div class="model">
-    <div>
-      <el-text tag="b">模型</el-text>
-    </div>
-    <el-space wrap class="model-list">
-      <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
-        v-for="model in models"
-        :key="model.key"
-
-      >
-        <el-image
-          :src="model.image"
-          fit="contain"
-          @click="handleModelClick(model)"
-        />
-        <div class="model-font">{{model.name}}</div>
-      </div>
-    </el-space>
-  </div>
   <div class="model">
     <div>
       <el-text tag="b">参考图</el-text>
     </div>
     <el-space wrap class="model-list">
-      <UploadImg v-model="referImage" height="80px" width="80px" />
+      <UploadImg v-model="referImageUrl" height="120px" width="120px" />
     </el-space>
   </div>
   <div class="btns">
-    <!--    <el-button size="large" round>重置内容</el-button>-->
-    <el-button type="primary" size="large" round @click="handleGenerateImage">生成内容</el-button>
+    <el-button type="primary" size="large" round @click="handleGenerateImage">
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </el-button>
   </div>
 </template>
 <script setup lang="ts">
-
-// image 模型
-import {ImageApi, ImageMidjourneyImagineReqVO, ImageVO} from "@/api/ai/image";
-// message
-const message = useMessage()
-// 定义 emits
-const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
-
-interface ImageModelVO {
-  key: string
-  name: string
-  image: string
-}
-
-// image 大小
-interface ImageSizeVO {
-  key: string
-  style: string,
-  width: string,
-  height: string,
-}
+import { ImageApi, ImageMidjourneyImagineReqVO, ImageVO } from '@/api/ai/image'
+import {
+  AiPlatformEnum,
+  ImageHotWords,
+  ImageSizeVO,
+  ImageModelVO,
+  MidjourneyModels,
+  MidjourneySizeList,
+  MidjourneyVersions,
+  NijiVersionList
+} from '@/views/ai/utils/constants'
+
+const message = useMessage() // 消息弹窗
 
 // 定义属性
-const prompt = ref<string>('')  // 提示词
-const referImage = ref<any>()  // 参考图
+const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
-const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城'])  // 热词
-const selectModel = ref<string>('midjourney') // 选中的热词
-const models = ref<ImageModelVO[]>([
-  {
-    key: 'midjourney',
-    name: 'MJ',
-    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png',
-  },
-  {
-    key: 'niji',
-    name: 'NIJI',
-    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
-  },
-])  // 模型
-
-const selectImageSize = ref<string>('1:1') // 选中 size
-const imageSizeList = ref<ImageSizeVO[]>([
-  {
-    key: '1:1',
-    width: "1",
-    height: "1",
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
-  },
-  {
-    key: '3:4',
-    width: "3",
-    height: "4",
-    style: 'width: 30px; height: 40px;background-color: #dcdcdc;',
-  },
-  {
-    key: '4:3',
-    width: "4",
-    height: "3",
-    style: 'width: 40px; height: 30px;background-color: #dcdcdc;',
-  },
-  {
-    key: '9:16',
-    width: "9",
-    height: "16",
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
-  },
-  {
-    key: '16:9',
-    width: "16",
-    height: "9",
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
-  },
-]) // size
-
-// version
-const midjourneyVersionList = ref<any>([
-  {
-    value: '6.0',
-    label: 'v6.0',
-  },
-  {
-    value: '5.2',
-    label: 'v5.2',
-  },
-  {
-    value: '5.1',
-    label: 'v5.1',
-  },
-  {
-    value: '5.0',
-    label: 'v5.0',
-  },
-  {
-    value: '4.0',
-    label: 'v4.0',
-  },
-])
-const nijiVersionList = ref<any>([
-  {
-    value: '5',
-    label: 'v5',
-  },
-])
+// 表单
+const prompt = ref<string>('') // 提示词
+const referImageUrl = ref<any>() // 参考图
+const selectModel = ref<string>('midjourney') // 选中的模型
+const selectSize = ref<string>('1:1') // 选中 size
 const selectVersion = ref<any>('6.0') // 选中的 version
-let versionList = ref<any>([]) // version 列表
-versionList.value = midjourneyVersionList.value // 默认选择 midjourney
+const versionList = ref<any>(MidjourneyVersions) // version 列表
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
 
-/**  热词 - click  */
+/** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
-  // 取消
+  // 情况一：取消选中
   if (selectHotWord.value == hotWord) {
     selectHotWord.value = ''
     return
   }
-  // 选中
-  selectHotWord.value = hotWord
-  // 设置提示次
-  prompt.value = hotWord
+
+  // 情况二：选中
+  selectHotWord.value = hotWord // 选中
+  prompt.value = hotWord // 设置提示次
 }
 
-/**  size - click  */
+/** 点击 size 尺寸 */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  selectImageSize.value = imageSize.key
+  selectSize.value = imageSize.key
 }
 
-/**  模型 - click  */
+/** 点击 model 模型 */
 const handleModelClick = async (model: ImageModelVO) => {
   selectModel.value = model.key
   if (model.key === 'niji') {
-    versionList.value = nijiVersionList.value // 默认选择 niji
+    versionList.value = NijiVersionList // 默认选择 niji
   } else {
-    versionList.value = midjourneyVersionList.value // 默认选择 midjourney
+    versionList.value = MidjourneyVersions // 默认选择 midjourney
   }
   selectVersion.value = versionList.value[0].value
 }
 
-/**  version - click  */
-const handleChangeVersion = async (version) => {
-  console.log('version', version)
-}
-
-/** 图片生产  */
+/** 图片生成 */
 const handleGenerateImage = async () => {
   // 二次确认
   await message.confirm(`确认生成内容?`)
-  // todo @芋艿 图片生产逻辑
   try {
+    // 加载中
+    drawIn.value = true
     // 回调
-    emits('onDrawStart', selectModel.value)
+    emits('onDrawStart', AiPlatformEnum.MIDJOURNEY)
     // 发送请求
-    const imageSize = imageSizeList.value.find(item => selectImageSize.value === item.key) as ImageSizeVO
+    const imageSize = MidjourneySizeList.find(
+      (item) => selectSize.value === item.key
+    ) as ImageSizeVO
     const req = {
       prompt: prompt.value,
       model: selectModel.value,
       width: imageSize.width,
       height: imageSize.height,
       version: selectVersion.value,
-      referImageUrl: referImage.value,
+      referImageUrl: referImageUrl.value
     } as ImageMidjourneyImagineReqVO
     await ImageApi.midjourneyImagine(req)
   } finally {
     // 回调
-    emits('onDrawComplete', selectModel.value)
+    emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY)
+    // 加载结束
+    drawIn.value = false
   }
 }
 
 /** 填充值 */
-const settingValues = async (imageDetail: ImageVO) => {
+const settingValues = async (detail: ImageVO) => {
   // 提示词
-  prompt.value = imageDetail.prompt
+  prompt.value = detail.prompt
   // image size
-  const imageSize = imageSizeList.value.find(item => item.key === `${imageDetail.width}:${imageDetail.height}`) as ImageSizeVO
-  selectImageSize.value = imageSize.key
+  const imageSize = MidjourneySizeList.find(
+    (item) => item.key === `${detail.width}:${detail.height}`
+  ) as ImageSizeVO
+  selectSize.value = imageSize.key
   // 选中模型
-  const model = models.value.find(item => item.key === imageDetail.options?.model) as ImageModelVO
+  const model = MidjourneyModels.find((item) => item.key === detail.options?.model) as ImageModelVO
   await handleModelClick(model)
   // 版本
-  selectVersion.value = versionList.value.find(item => item.value === imageDetail.options?.version).value
+  selectVersion.value = versionList.value.find(
+    (item) => item.value === detail.options?.version
+  ).value
   // image
-  referImage.value = imageDetail.options.referImageUrl
+  referImageUrl.value = detail.options.referImageUrl
 }
 
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
-
 // 提示词
 .prompt {
 }
@@ -354,7 +274,6 @@ defineExpose({ settingValues })
   }
 }
 
-
 // 尺寸
 .image-size {
   width: 100%;

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

@@ -31,7 +31,7 @@ import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
 import Dall3 from './components/dall3/index.vue'
-import Midjourney from './midjourney/index.vue'
+import Midjourney from './components/midjourney/index.vue'
 import StableDiffusion from './components/stableDiffusion/index.vue'
 
 const imageListRef = ref<any>() // image 列表 ref
@@ -40,7 +40,7 @@ const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 
 // 定义属性
-const selectPlatform = ref(AiPlatformEnum.OPENAI)
+const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY)
 const platformOptions = [
   {
     label: 'DALL3 绘画',
@@ -57,10 +57,10 @@ const platformOptions = [
 ]
 
 /** 绘画 start  */
-const handleDrawStart = async (type) => {}
+const handleDrawStart = async (platform: string) => {}
 
-/** 绘画 complete  */
-const handleDrawComplete = async (type) => {
+/** 绘画 complete */
+const handleDrawComplete = async (platform: string) => {
   await imageListRef.value.getImageList()
 }
 

src/views/ai/utils/constants.ts

@@ -238,7 +238,7 @@ export const Dall3StyleList: ImageModelVO[] = [
   }
 ]
 
-interface ImageSizeVO {
+export interface ImageSizeVO {
   key: string
   name: string
   style: string
@@ -269,3 +269,79 @@ export const Dall3SizeList: ImageSizeVO[] = [
     style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
   }
 ]
+
+export const MidjourneyModels: ImageModelVO[] = [
+  {
+    key: 'midjourney',
+    name: 'MJ',
+    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png'
+  },
+  {
+    key: 'niji',
+    name: 'NIJI',
+    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png'
+  }
+]
+
+export const MidjourneySizeList: ImageSizeVO[] = [
+  {
+    key: '1:1',
+    width: '1',
+    height: '1',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '3:4',
+    width: '3',
+    height: '4',
+    style: 'width: 30px; height: 40px;background-color: #dcdcdc;'
+  },
+  {
+    key: '4:3',
+    width: '4',
+    height: '3',
+    style: 'width: 40px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '9:16',
+    width: '9',
+    height: '16',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
+  },
+  {
+    key: '16:9',
+    width: '16',
+    height: '9',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
+  }
+]
+
+export const MidjourneyVersions = [
+  {
+    value: '6.0',
+    label: 'v6.0'
+  },
+  {
+    value: '5.2',
+    label: 'v5.2'
+  },
+  {
+    value: '5.1',
+    label: 'v5.1'
+  },
+  {
+    value: '5.0',
+    label: 'v5.0'
+  },
+  {
+    value: '4.0',
+    label: 'v4.0'
+  }
+]
+
+export const NijiVersionList = [
+  {
+    value: '5',
+    label: 'v5'
+  }
+]