【代码优化】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 }}
         {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
       </div>
       </div>
     </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>
   </el-drawer>
 </template>
 </template>
 
 

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 { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
 import { ImageVO } from '@/api/ai/image'
 import Dall3 from './components/dall3/index.vue'
 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'
 import StableDiffusion from './components/stableDiffusion/index.vue'
 
 
 const imageListRef = ref<any>() // image 列表 ref
 const imageListRef = ref<any>() // image 列表 ref
@@ -40,7 +40,7 @@ const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 
 
 // 定义属性
 // 定义属性
-const selectPlatform = ref(AiPlatformEnum.OPENAI)
+const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY)
 const platformOptions = [
 const platformOptions = [
   {
   {
     label: 'DALL3 绘画',
     label: 'DALL3 绘画',
@@ -57,10 +57,10 @@ const platformOptions = [
 ]
 ]
 
 
 /** 绘画 start  */
 /** 绘画 start  */
-const handleDrawStart = async (type) => {}
+const handleDrawStart = async (platform: string) => {}
 
 
 /** 绘画 complete */
 /** 绘画 complete */
-const handleDrawComplete = async (type) => {
+const handleDrawComplete = async (platform: string) => {
   await imageListRef.value.getImageList()
   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
   key: string
   name: string
   name: string
   style: string
   style: string
@@ -269,3 +269,79 @@ export const Dall3SizeList: ImageSizeVO[] = [
     style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
     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'
+  }
+]