From a358c1d7b5b9b9974c9a91f13dbe339dcc48d742 Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期五, 13 六月 2025 11:05:43 +0800
Subject: [PATCH] 数据分析 影响因素
---
src/views/ai/image/index/components/ImageDetail.vue | 224 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 224 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..ad15aa8
--- /dev/null
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -0,0 +1,224 @@
+<template>
+ <el-drawer
+ v-model="showDrawer"
+ title="图片详细"
+ @close="handleDrawerClose"
+ custom-class="drawer-class"
+ >
+ <!-- 图片 -->
+ <div class="item">
+ <div class="body">
+ <el-image
+ class="image"
+ :src="detail?.picUrl"
+ :preview-src-list="[detail.picUrl]"
+ preview-teleported
+ />
+ </div>
+ </div>
+ <!-- 时间 -->
+ <div class="item">
+ <div class="tip">时间</div>
+ <div class="body">
+ <div>提交时间：{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
+ <div>生成时间：{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
+ </div>
+ </div>
+ <!-- 模型 -->
+ <div class="item">
+ <div class="tip">模型</div>
+ <div class="body"> {{ detail.model }}({{ detail.height }}x{{ detail.width }}) </div>
+ </div>
+ <!-- 提示词 -->
+ <div class="item">
+ <div class="tip">提示词</div>
+ <div class="body">
+ {{ detail.prompt }}
+ </div>
+ </div>
+ <!-- 地址 -->
+ <div class="item">
+ <div class="tip">图片地址</div>
+ <div class="body">
+ {{ detail.picUrl }}
+ </div>
+ </div>
+ <!-- StableDiffusion 专属区域 -->
+ <div
+ class="item"
+ v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.sampler"
+ >
+ <div class="tip">采样方法</div>
+ <div class="body">
+ {{
+ StableDiffusionSamplers.find(
+ (item: ImageModelVO) => item.key === detail?.options?.sampler
+ )?.name
+ }}
+ </div>
+ </div>
+ <div
+ class="item"
+ v-if="
+ detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.clipGuidancePreset
+ "
+ >
+ <div class="tip">CLIP</div>
+ <div class="body">
+ {{
+ StableDiffusionClipGuidancePresets.find(
+ (item: ImageModelVO) => item.key === detail?.options?.clipGuidancePreset
+ )?.name
+ }}
+ </div>
+ </div>
+ <div
+ class="item"
+ v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.stylePreset"
+ >
+ <div class="tip">风格</div>
+ <div class="body">
+ {{
+ StableDiffusionStylePresets.find(
+ (item: ImageModelVO) => item.key === detail?.options?.stylePreset
+ )?.name
+ }}
+ </div>
+ </div>
+ <div
+ class="item"
+ v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.steps"
+ >
+ <div class="tip">迭代步数</div>
+ <div class="body">
+ {{ detail?.options?.steps }}
+ </div>
+ </div>
+ <div
+ class="item"
+ v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.scale"
+ >
+ <div class="tip">引导系数</div>
+ <div class="body">
+ {{ detail?.options?.scale }}
+ </div>
+ </div>
+ <div
+ class="item"
+ v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.seed"
+ >
+ <div class="tip">随机因子</div>
+ <div class="body">
+ {{ 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>
+ <!-- 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>
+
+<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) // 图片详细信息
+
+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>
+<style scoped lang="scss">
+.item {
+ margin-bottom: 20px;
+ width: 100%;
+ overflow: hidden;
+ word-wrap: break-word;
+
+ .header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ .tip {
+ font-weight: bold;
+ font-size: 16px;
+ }
+
+ .body {
+ margin-top: 10px;
+ color: #616161;
+
+ .taskImage {
+ border-radius: 10px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3