From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目

---
 src/views/ai/image/index/components/dall3/index.vue |  232 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 232 insertions(+), 0 deletions(-)

diff --git a/src/views/ai/image/index/components/dall3/index.vue b/src/views/ai/image/index/components/dall3/index.vue
new file mode 100644
index 0000000..07a35e8
--- /dev/null
+++ b/src/views/ai/image/index/components/dall3/index.vue
@@ -0,0 +1,232 @@
+<!-- dall3 -->
+<template>
+  <div class="prompt">
+    <el-text tag="b">鐢婚潰鎻忚堪</el-text>
+    <el-text tag="p">寤鸿浣跨敤"褰㈠璇� + 鍔ㄨ瘝 + 椋庢牸"鐨勬牸寮忥紝浣跨敤"锛�"闅斿紑</el-text>
+    <el-input
+      v-model="prompt"
+      maxlength="1024"
+      :rows="5"
+      class="w-100% mt-15px"
+      input-style="border-radius: 7px;"
+      placeholder="渚嬪锛氱璇濋噷鐨勫皬灞嬪簲璇ユ槸浠�涔堟牱瀛愶紵"
+      show-word-limit
+      type="textarea"
+    />
+  </div>
+  <div class="flex flex-col mt-30px">
+    <div>
+      <el-text tag="b">闅忔満鐑瘝</el-text>
+    </div>
+    <el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
+      <el-button
+        round
+        class="m-0"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </el-button>
+    </el-space>
+  </div>
+  <div class="mt-30px">
+    <div>
+      <el-text tag="b">妯″瀷閫夋嫨</el-text>
+    </div>
+    <el-space wrap class="mt-15px">
+      <div
+        :class="selectModel === model.key ? 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-transparent cursor-pointer'"
+        v-for="model in Dall3Models"
+        :key="model.key"
+      >
+        <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
+        <div class="text-14px color-#3e3e3e font-bold">{{ model.name }}</div>
+      </div>
+    </el-space>
+  </div>
+  <div class="mt-30px">
+    <div>
+      <el-text tag="b">椋庢牸閫夋嫨</el-text>
+    </div>
+    <el-space wrap class="mt-15px">
+      <div
+        :class="style === imageStyle.key ? 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-transparent cursor-pointer'"
+        v-for="imageStyle in Dall3StyleList"
+        :key="imageStyle.key"
+      >
+        <el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
+        <div class="text-14px color-#3e3e3e font-bold">{{ imageStyle.name }}</div>
+      </div>
+    </el-space>
+  </div>
+  <div class="w-full mt-30px">
+    <div>
+      <el-text tag="b">鐢婚潰姣斾緥</el-text>
+    </div>
+    <el-space wrap class="flex flex-row justify-between w-full mt-20px">
+      <div
+        class="flex flex-col items-center cursor-pointer"
+        v-for="imageSize in Dall3SizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          :class="selectSize === imageSize.key ? 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-#1293ff' : 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-white'"
+        >
+          <div :style="imageSize.style"></div>
+        </div>
+        <div class="text-14px color-#3e3e3e font-bold">{{ imageSize.name }}</div>
+      </div>
+    </el-space>
+  </div>
+  <div class="flex justify-center mt-50px">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '鐢熸垚涓�' : '鐢熸垚鍐呭' }}
+    </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
+import {
+  Dall3Models,
+  Dall3StyleList,
+  ImageHotWords,
+  Dall3SizeList,
+  ImageModelVO,
+  AiPlatformEnum,
+  ImageSizeVO
+} from '@/views/ai/utils/constants'
+import { ModelVO } from '@/api/ai/model/model'
+
+const message = useMessage() // 娑堟伅寮圭獥
+
+// 鎺ユ敹鐖剁粍浠朵紶鍏ョ殑妯″瀷鍒楄〃
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 瀹氫箟 emits
+
+// 瀹氫箟灞炴��
+const prompt = ref<string>('') // 鎻愮ず璇�
+const drawIn = ref<boolean>(false) // 鐢熸垚涓�
+const selectHotWord = ref<string>('') // 閫変腑鐨勭儹璇�
+const selectModel = ref<string>('dall-e-3') // 妯″瀷
+const selectSize = ref<string>('1024x1024') // 閫変腑 size
+const style = ref<string>('vivid') // style 鏍峰紡
+
+/** 閫夋嫨鐑瘝 */
+const handleHotWordClick = async (hotWord: string) => {
+  // 鎯呭喌涓�锛氬彇娑堥�変腑
+  if (selectHotWord.value == hotWord) {
+    selectHotWord.value = ''
+    return
+  }
+
+  // 鎯呭喌浜岋細閫変腑
+  selectHotWord.value = hotWord
+  prompt.value = hotWord
+}
+
+/** 閫夋嫨 model 妯″瀷 */
+const handleModelClick = async (model: ImageModelVO) => {
+  selectModel.value = model.key
+  // 鍙互鍦ㄨ繖閲屾坊鍔犳ā鍨嬬壒瀹氱殑澶勭悊閫昏緫
+  // 渚嬪锛屽鏋滄湭鏉ラ渶瑕佹牴鎹笉鍚屾ā鍨嬭缃笉鍚屽弬鏁�
+  if (model.key === 'dall-e-3') {
+    // DALL-E-3 妯″瀷鐗瑰畾鐨勫鐞�
+    style.value = 'vivid' // 榛樿璁剧疆vivid椋庢牸
+  } else if (model.key === 'dall-e-2') {
+    // DALL-E-2 妯″瀷鐗瑰畾鐨勫鐞�
+    style.value = 'natural' // 濡傛灉鏈夊叾浠朌ALL-E-2閫傚悎鐨勯粯璁ら鏍�
+  }
+
+  // 鏇存柊鍏朵粬鐩稿叧鍙傛暟
+  // 渚嬪鍙互榛樿閫夋嫨鏈�閫傚悎褰撳墠妯″瀷鐨勫昂瀵�
+  const recommendedSize = Dall3SizeList.find(
+    (size) =>
+      (model.key === 'dall-e-3' && size.key === '1024x1024') ||
+      (model.key === 'dall-e-2' && size.key === '512x512')
+  )
+
+  if (recommendedSize) {
+    selectSize.value = recommendedSize.key
+  }
+}
+
+/** 閫夋嫨 style 鏍峰紡  */
+const handleStyleClick = async (imageStyle: ImageModelVO) => {
+  style.value = imageStyle.key
+}
+
+/** 閫夋嫨 size 澶у皬  */
+const handleSizeClick = async (imageSize: ImageSizeVO) => {
+  selectSize.value = imageSize.key
+}
+
+/**  鍥剧墖鐢熶骇  */
+const handleGenerateImage = async () => {
+  // 浠� models 涓煡鎵惧尮閰嶇殑妯″瀷
+  const matchedModel = props.models.find(
+    (item) => item.model === selectModel.value && item.platform === AiPlatformEnum.OPENAI
+  )
+  if (!matchedModel) {
+    message.error('璇ユā鍨嬩笉鍙敤锛岃閫夋嫨鍏跺畠妯″瀷')
+    return
+  }
+
+  // 浜屾纭
+  await message.confirm(`纭鐢熸垚鍐呭?`)
+  try {
+    // 鍔犺浇涓�
+    drawIn.value = true
+    // 鍥炶皟
+    emits('onDrawStart', AiPlatformEnum.OPENAI)
+    const imageSize = Dall3SizeList.find((item) => item.key === selectSize.value) as ImageSizeVO
+    const form = {
+      platform: AiPlatformEnum.OPENAI,
+      prompt: prompt.value, // 鎻愮ず璇�
+      modelId: matchedModel.id, // 浣跨敤鍖归厤鍒扮殑妯″瀷
+      style: style.value, // 鍥惧儚鐢熸垚鐨勯鏍�
+      width: imageSize.width, // size 涓嶈兘涓虹┖
+      height: imageSize.height, // size 涓嶈兘涓虹┖
+      options: {
+        style: style.value // 鍥惧儚鐢熸垚鐨勯鏍�
+      }
+    } as ImageDrawReqVO
+    // 鍙戦�佽姹�
+    await ImageApi.drawImage(form)
+  } finally {
+    // 鍥炶皟
+    emits('onDrawComplete', AiPlatformEnum.OPENAI)
+    // 鍔犺浇缁撴潫
+    drawIn.value = false
+  }
+}
+
+/** 濉厖鍊� */
+const settingValues = async (detail: ImageVO) => {
+  prompt.value = detail.prompt
+  selectModel.value = detail.model
+  style.value = detail.options?.style
+  const imageSize = Dall3SizeList.find(
+    (item) => item.key === `${detail.width}x${detail.height}`
+  ) as ImageSizeVO
+  await handleSizeClick(imageSize)
+}
+
+/** 鏆撮湶缁勪欢鏂规硶 */
+defineExpose({ settingValues })
+</script>
+

--
Gitblit v1.8.0