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

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

@@ -112,14 +112,21 @@
         {{ detail?.options?.seed }}
       </div>
     </div>
+    <!-- Dall3 专属区域 -->
+    <div class="item" v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style">
+      <div class="tip">风格选择</div>
+      <div class="body">
+        {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
+      </div>
+    </div>
   </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { ImageApi, ImageVO } from '@/api/ai/image'
-import ImageCard from './ImageCard.vue'
 import {
   AiPlatformEnum,
+  Dall3StyleList,
   ImageModelVO,
   StableDiffusionClipGuidancePresets,
   StableDiffusionSamplers,

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

@@ -37,7 +37,7 @@
     </div>
     <el-space wrap class="model-list">
       <div
-        :class="model === model.key ? 'modal-item selectModel' : 'modal-item'"
+        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
         v-for="model in Dall3Models"
         :key="model.key"
       >
@@ -52,12 +52,8 @@
     </div>
     <el-space wrap class="image-style-list">
       <div
-        :class="
+        :class="style === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
-          selectImageStyle === imageStyle.key
+        v-for="imageStyle in Dall3StyleList"
-            ? 'image-style-item selectImageStyle'
-            : 'image-style-item'
-        "
-        v-for="imageStyle in imageStyleList"
         :key="imageStyle.key"
       >
         <el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
@@ -72,11 +68,13 @@
     <el-space wrap class="size-list">
       <div
         class="size-item"
-        v-for="imageSize in imageSizeList"
+        v-for="imageSize in Dall3SizeList"
         :key="imageSize.key"
         @click="handleSizeClick(imageSize)"
       >
-        <div :class="size === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+        <div
+          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+        >
           <div :style="imageSize.style"></div>
         </div>
         <div class="size-font">{{ imageSize.name }}</div>
@@ -91,103 +89,53 @@
 </template>
 <script setup lang="ts">
 import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
-import { Dall3Models, ImageHotWords } from '@/views/ai/utils/constants'
+import {
+  Dall3Models,
+  Dall3StyleList,
+  ImageHotWords,
+  Dall3SizeList,
+  ImageModelVO,
+  AiPlatformEnum
+} from '@/views/ai/utils/constants'
 
 const message = useMessage() // 消息弹窗
 
-// image 模型
-interface ImageModelVO {
-  key: string
-  name: string
-  image: string
-}
-
-// image 大小
-interface ImageSizeVO {
-  key: string
-  name: string
-  style: string
-  width: string
-  height: string
-}
-
 // 定义属性
 const prompt = ref<string>('') // 提示词
 const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
-const model = ref<string>('dall-e-3') // 模型
+const selectModel = ref<string>('dall-e-3') // 模型
-const size = ref<string>('1024x1024') // 选中 size
+const selectSize = ref<string>('1024x1024') // 选中 size
+const style = ref<string>('vivid') // style 样式
 
-const selectImageStyle = ref<string>('vivid') // style 样式
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
 
-const imageStyleList = ref<ImageModelVO[]>([
+/** 选择热词 */
-  {
-    key: 'vivid',
-    name: '清晰',
-    image: `/src/assets/ai/qingxi.jpg`
-  },
-  {
-    key: 'natural',
-    name: '自然',
-    image: `/src/assets/ai/ziran.jpg`
-  }
-]) // style
-
-const imageSizeList = ref<ImageSizeVO[]>([
-  {
-    key: '1024x1024',
-    name: '1:1',
-    width: '1024',
-    height: '1024',
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
-  },
-  {
-    key: '1024x1792',
-    name: '3:5',
-    width: '1024',
-    height: '1792',
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
-  },
-  {
-    key: '1792x1024',
-    name: '5:3',
-    width: '1792',
-    height: '1024',
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
-  }
-]) // size
-
-// 定义 Props
-const props = defineProps({})
-// 定义 emits
-const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
-
-/** 热词 - click  */
 const handleHotWordClick = async (hotWord: string) => {
-  // 取消选中
+  // 情况一：取消选中
   if (selectHotWord.value == hotWord) {
     selectHotWord.value = ''
     return
   }
-  // 选中
+
+  // 情况二：选中
   selectHotWord.value = hotWord
-  // 替换提示词
   prompt.value = hotWord
 }
 
-/**  模型 - click  */
+/** 选择 model 模型 */
 const handleModelClick = async (model: ImageModelVO) => {
-  model.value = model.key
+  selectModel.value = model.key
 }
 
-/**  样式 - click  */
+/** 选择 style 样式  */
 const handleStyleClick = async (imageStyle: ImageModelVO) => {
-  selectImageStyle.value = imageStyle.key
+  style.value = imageStyle.key
 }
 
-/**  size - click  */
+/** 选择 size 大小  */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  size.value = imageSize.key
+  selectSize.value = imageSize.key
 }
 
 /**  图片生产  */
@@ -198,37 +146,35 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', model.value)
+    emits('onDrawStart', AiPlatformEnum.OPENAI)
-    const imageSize = imageSizeList.value.find((item) => item.key === size.value) as ImageSizeVO
+    const imageSize = Dall3SizeList.find((item) => item.key === selectSize.value) as ImageSizeVO
     const form = {
-      platform: 'OpenAI',
+      platform: AiPlatformEnum.OPENAI,
       prompt: prompt.value, // 提示词
-      model: model.value, // 模型
+      model: selectModel.value, // 模型
       width: imageSize.width, // size 不能为空
       height: imageSize.height, // size 不能为空
       options: {
-        style: selectImageStyle.value // 图像生成的风格
+        style: style.value // 图像生成的风格
       }
     } as ImageDrawReqVO
     // 发送请求
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', model.value)
+    emits('onDrawComplete', AiPlatformEnum.OPENAI)
     // 加载结束
     drawIn.value = false
   }
 }
 
 /** 填充值 */
-const settingValues = async (imageDetail: ImageVO) => {
+const settingValues = async (detail: ImageVO) => {
-  prompt.value = imageDetail.prompt
+  prompt.value = detail.prompt
-  model.value = imageDetail.model
+  selectModel.value = detail.model
-  //
+  style.value = detail.options?.style
-  selectImageStyle.value = imageDetail.options?.style
+  const imageSize = Dall3SizeList.find(
-  //
+    (item) => item.key === `${detail.width}x${detail.height}`
-  const imageSize = imageSizeList.value.find(
-    (item) => item.key === `${imageDetail.width}x${imageDetail.height}`
   ) as ImageSizeVO
   await handleSizeClick(imageSize)
 }

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

@@ -137,6 +137,7 @@
 import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
 import { hasChinese } from '@/views/ai/utils/utils'
 import {
+  AiPlatformEnum,
   ImageHotEnglishWords,
   StableDiffusionClipGuidancePresets,
   StableDiffusionSamplers,
@@ -187,10 +188,10 @@ const handleGenerateImage = async () => {
     // 加载中
     drawIn.value = true
     // 回调
-    emits('onDrawStart', 'StableDiffusion')
+    emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION)
     // 发送请求
     const form = {
-      platform: 'StableDiffusion',
+      platform: AiPlatformEnum.STABLE_DIFFUSION,
       model: 'stable-diffusion-v1-6',
       prompt: prompt.value, // 提示词
       width: width.value, // 图片宽度
@@ -207,7 +208,7 @@ const handleGenerateImage = async () => {
     await ImageApi.drawImage(form)
   } finally {
     // 回调
-    emits('onDrawComplete', 'StableDiffusion')
+    emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION)
     // 加载结束
     drawIn.value = false
   }

src/views/ai/utils/constants.ts

@@ -66,7 +66,7 @@ export interface ImageModelVO {
   image?: string
 }
 
-export const StableDiffusionSamplers = ref<ImageModelVO[]>([
+export const StableDiffusionSamplers: ImageModelVO[] = [
   {
     key: 'DDIM',
     name: 'DDIM'
@@ -107,9 +107,9 @@ export const StableDiffusionSamplers = ref<ImageModelVO[]>([
     key: 'K_LMS',
     name: 'K_LMS'
   }
-])
+]
 
-export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
+export const StableDiffusionStylePresets: ImageModelVO[] = [
   {
     key: '3d-model',
     name: '3d-model'
@@ -179,9 +179,9 @@ export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
     key: 'tile-texture',
     name: 'tile-texture'
   }
-])
+]
 
-export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
+export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
   {
     key: 'NONE',
     name: 'NONE'
@@ -210,9 +210,9 @@ export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
     key: 'SLOWEST',
     name: 'SLOWEST'
   }
-])
+]
 
-export const Dall3Models = ref<ImageModelVO[]>([
+export const Dall3Models: ImageModelVO[] = [
   {
     key: 'dall-e-3',
     name: 'DALL·E 3',
@@ -223,4 +223,49 @@ export const Dall3Models = ref<ImageModelVO[]>([
     name: 'DALL·E 2',
     image: `/src/assets/ai/dall3.jpg`
   }
-])
+]
+
+export const Dall3StyleList: ImageModelVO[] = [
+  {
+    key: 'vivid',
+    name: '清晰',
+    image: `/src/assets/ai/qingxi.jpg`
+  },
+  {
+    key: 'natural',
+    name: '自然',
+    image: `/src/assets/ai/ziran.jpg`
+  }
+]
+
+interface ImageSizeVO {
+  key: string
+  name: string
+  style: string
+  width: string
+  height: string
+}
+
+export const Dall3SizeList: ImageSizeVO[] = [
+  {
+    key: '1024x1024',
+    name: '1:1',
+    width: '1024',
+    height: '1024',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '1024x1792',
+    name: '3:5',
+    width: '1024',
+    height: '1792',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
+  },
+  {
+    key: '1792x1024',
+    name: '5:3',
+    width: '1792',
+    height: '1024',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
+  }
+]