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/ImageDetail.vue | 187 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 187 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
new file mode 100644
index 0000000..d4f8dc6
--- /dev/null
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -0,0 +1,187 @@
+<template>
+ <el-drawer
+ v-model="showDrawer"
+ title="鍥剧墖璇︾粏"
+ @close="handleDrawerClose"
+ custom-class="drawer-class"
+ >
+ <!-- 鍥剧墖棰勮 -->
+ <div class="mb-5">
+ <el-image
+ :src="detail?.picUrl"
+ :preview-src-list="[detail.picUrl]"
+ preview-teleported
+ class="w-full rounded-2"
+ fit="contain"
+ />
+ </div>
+
+ <!-- 鍩虹淇℃伅 -->
+ <el-descriptions title="鍩虹淇℃伅" :column="1" :label-width="100" border>
+ <el-descriptions-item label="鎻愪氦鏃堕棿">
+ {{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鐢熸垚鏃堕棿">
+ {{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}
+ </el-descriptions-item>
+ <el-descriptions-item label="妯″瀷">
+ {{ detail.model }}({{ detail.height }}x{{ detail.width }})
+ </el-descriptions-item>
+ <el-descriptions-item label="鎻愮ず璇�">
+ <div class="break-words">{{ detail.prompt }}</div>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍥剧墖鍦板潃">
+ <div class="break-all text-xs">{{ detail.picUrl }}</div>
+ </el-descriptions-item>
+ </el-descriptions>
+
+ <!-- StableDiffusion 涓撳睘鍖哄煙 -->
+ <el-descriptions
+ v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && hasStableDiffusionOptions"
+ title="StableDiffusion 鍙傛暟"
+ :column="1"
+ :label-width="100"
+ border
+ class="mt-5"
+ >
+ <el-descriptions-item v-if="detail?.options?.sampler" label="閲囨牱鏂规硶">
+ {{
+ StableDiffusionSamplers.find(
+ (item: ImageModelVO) => item.key === detail?.options?.sampler
+ )?.name
+ }}
+ </el-descriptions-item>
+ <el-descriptions-item v-if="detail?.options?.clipGuidancePreset" label="CLIP">
+ {{
+ StableDiffusionClipGuidancePresets.find(
+ (item: ImageModelVO) => item.key === detail?.options?.clipGuidancePreset
+ )?.name
+ }}
+ </el-descriptions-item>
+ <el-descriptions-item v-if="detail?.options?.stylePreset" label="椋庢牸">
+ {{
+ StableDiffusionStylePresets.find(
+ (item: ImageModelVO) => item.key === detail?.options?.stylePreset
+ )?.name
+ }}
+ </el-descriptions-item>
+ <el-descriptions-item v-if="detail?.options?.steps" label="杩唬姝ユ暟">
+ {{ detail?.options?.steps }}
+ </el-descriptions-item>
+ <el-descriptions-item v-if="detail?.options?.scale" label="寮曞绯绘暟">
+ {{ detail?.options?.scale }}
+ </el-descriptions-item>
+ <el-descriptions-item v-if="detail?.options?.seed" label="闅忔満鍥犲瓙">
+ {{ detail?.options?.seed }}
+ </el-descriptions-item>
+ </el-descriptions>
+
+ <!-- Dall3 涓撳睘鍖哄煙 -->
+ <el-descriptions
+ v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
+ title="DALL-E 3 鍙傛暟"
+ :column="1"
+ :label-width="100"
+ border
+ class="mt-5"
+ >
+ <el-descriptions-item label="椋庢牸閫夋嫨">
+ {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
+ </el-descriptions-item>
+ </el-descriptions>
+
+ <!-- Midjourney 涓撳睘鍖哄煙 -->
+ <el-descriptions
+ v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && hasMidjourneyOptions"
+ title="Midjourney 鍙傛暟"
+ :column="1"
+ :label-width="100"
+ border
+ class="mt-5"
+ >
+ <el-descriptions-item v-if="detail?.options?.version" label="妯″瀷鐗堟湰">
+ {{ detail?.options?.version }}
+ </el-descriptions-item>
+ <el-descriptions-item v-if="detail?.options?.referImageUrl" label="鍙傝�冨浘">
+ <el-image
+ :src="detail.options.referImageUrl"
+ class="max-w-[200px] rounded-2"
+ fit="contain"
+ />
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ImageApi, ImageVO } from '@/api/ai/image'
+import {
+ AiPlatformEnum,
+ Dall3StyleList,
+ ImageModelVO,
+ StableDiffusionClipGuidancePresets,
+ StableDiffusionSamplers,
+ StableDiffusionStylePresets
+} from '@/views/ai/utils/constants'
+import { formatTime } from '@/utils'
+
+const showDrawer = ref<boolean>(false) // 鏄惁鏄剧ず
+const detail = ref<ImageVO>({} as ImageVO) // 鍥剧墖璇︾粏淇℃伅
+
+// 璁＄畻灞炴�э細鍒ゆ柇鏄惁鏈� StableDiffusion 閫夐」
+const hasStableDiffusionOptions = computed(() => {
+ const options = detail.value?.options
+ return (
+ options?.sampler ||
+ options?.clipGuidancePreset ||
+ options?.stylePreset ||
+ options?.steps ||
+ options?.scale ||
+ options?.seed
+ )
+})
+
+// 璁＄畻灞炴�э細鍒ゆ柇鏄惁鏈� Midjourney 閫夐」
+const hasMidjourneyOptions = computed(() => {
+ const options = detail.value?.options
+ return options?.version || options?.referImageUrl
+})
+
+const props = defineProps({
+ show: {
+ type: Boolean,
+ require: true,
+ default: false
+ },
+ id: {
+ type: Number,
+ required: true
+ }
+})
+
+/** 鍏抽棴鎶藉眽 */
+const handleDrawerClose = async () => {
+ emits('handleDrawerClose')
+}
+
+/** 鐩戝惉 drawer 鏄惁鎵撳紑 */
+const { show } = toRefs(props)
+watch(show, async (newValue, _oldValue) => {
+ showDrawer.value = newValue as boolean
+})
+
+/** 鑾峰彇鍥剧墖璇︽儏 */
+const getImageDetail = async (id: number) => {
+ detail.value = await ImageApi.getImageMy(id)
+}
+
+/** 鐩戝惉 id 鍙樺寲锛屽姞杞芥渶鏂板浘鐗囪鎯� */
+const { id } = toRefs(props)
+watch(id, async (newVal, _oldVal) => {
+ if (newVal) {
+ await getImageDetail(newVal)
+ }
+})
+
+const emits = defineEmits(['handleDrawerClose'])
+</script>
--
Gitblit v1.8.0