Skip to content

Commit fef64d1

Browse files
YunaiVYunaiV
committed
feat：【AI 大模型】image/index 下的部分页面，使用 unocss
1 parent 9087ffb commit fef64d1

File tree

3 files changed

+126
-241
lines changed

3 files changed

+126
-241
lines changed

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

Lines changed: 100 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -5,139 +5,111 @@
55
@close="handleDrawerClose"
66
custom-class="drawer-class"
77
>
8-
<!-- 图片 -->
9-
<div class="item">
10-
<div class="body">
11-
<el-image
12-
class="image"
13-
:src="detail?.picUrl"
14-
:preview-src-list="[detail.picUrl]"
15-
preview-teleported
16-
/>
17-
</div>
18-
</div>
19-
<!-- 时间 -->
20-
<div class="item">
21-
<div class="tip">时间</div>
22-
<div class="body">
23-
<div>提交时间：{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
24-
<div>生成时间：{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
25-
</div>
26-
</div>
27-
<!-- 模型 -->
28-
<div class="item">
29-
<div class="tip">模型</div>
30-
<div class="body"> {{ detail.model }}({{ detail.height }}x{{ detail.width }}) </div>
31-
</div>
32-
<!-- 提示词 -->
33-
<div class="item">
34-
<div class="tip">提示词</div>
35-
<div class="body">
36-
{{ detail.prompt }}
37-
</div>
38-
</div>
39-
<!-- 地址 -->
40-
<div class="item">
41-
<div class="tip">图片地址</div>
42-
<div class="body">
43-
{{ detail.picUrl }}
44-
</div>
8+
<!-- 图片预览 -->
9+
<div class="mb-5">
10+
<el-image
11+
:src="detail?.picUrl"
12+
:preview-src-list="[detail.picUrl]"
13+
preview-teleported
14+
class="w-full rounded-2"
15+
fit="contain"
16+
/>
4517
</div>
18+
19+
<!-- 基础信息 -->
20+
<el-descriptions title="基础信息" :column="1" :label-width="100" border>
21+
<el-descriptions-item label="提交时间">
22+
{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
23+
</el-descriptions-item>
24+
<el-descriptions-item label="生成时间">
25+
{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}
26+
</el-descriptions-item>
27+
<el-descriptions-item label="模型">
28+
{{ detail.model }}({{ detail.height }}x{{ detail.width }})
29+
</el-descriptions-item>
30+
<el-descriptions-item label="提示词">
31+
<div class="break-words">{{ detail.prompt }}</div>
32+
</el-descriptions-item>
33+
<el-descriptions-item label="图片地址">
34+
<div class="break-all text-xs">{{ detail.picUrl }}</div>
35+
</el-descriptions-item>
36+
</el-descriptions>
37+
4638
<!-- StableDiffusion 专属区域 -->
47-
<div
48-
class="item"
49-
v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.sampler"
39+
<el-descriptions
40+
v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && hasStableDiffusionOptions"
41+
title="StableDiffusion 参数"
42+
:column="1"
43+
:label-width="100"
44+
border
45+
class="mt-5"
5046
>
51-
<div class="tip">采样方法</div>
52-
<div class="body">
47+
<el-descriptions-item v-if="detail?.options?.sampler" label="采样方法">
5348
{{
5449
StableDiffusionSamplers.find(
5550
(item: ImageModelVO) => item.key === detail?.options?.sampler
5651
)?.name
5752
}}
58-
</div>
59-
</div>
60-
<div
61-
class="item"
62-
v-if="
63-
detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.clipGuidancePreset
64-
"
65-
>
66-
<div class="tip">CLIP</div>
67-
<div class="body">
53+
</el-descriptions-item>
54+
<el-descriptions-item v-if="detail?.options?.clipGuidancePreset" label="CLIP">
6855
{{
6956
StableDiffusionClipGuidancePresets.find(
7057
(item: ImageModelVO) => item.key === detail?.options?.clipGuidancePreset
7158
)?.name
7259
}}
73-
</div>
74-
</div>
75-
<div
76-
class="item"
77-
v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.stylePreset"
78-
>
79-
<div class="tip">风格</div>
80-
<div class="body">
60+
</el-descriptions-item>
61+
<el-descriptions-item v-if="detail?.options?.stylePreset" label="风格">
8162
{{
8263
StableDiffusionStylePresets.find(
8364
(item: ImageModelVO) => item.key === detail?.options?.stylePreset
8465
)?.name
8566
}}
86-
</div>
87-
</div>
88-
<div
89-
class="item"
90-
v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.steps"
91-
>
92-
<div class="tip">迭代步数</div>
93-
<div class="body">
67+
</el-descriptions-item>
68+
<el-descriptions-item v-if="detail?.options?.steps" label="迭代步数">
9469
{{ detail?.options?.steps }}
95-
</div>
96-
</div>
97-
<div
98-
class="item"
99-
v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.scale"
100-
>
101-
<div class="tip">引导系数</div>
102-
<div class="body">
70+
</el-descriptions-item>
71+
<el-descriptions-item v-if="detail?.options?.scale" label="引导系数">
10372
{{ detail?.options?.scale }}
104-
</div>
105-
</div>
106-
<div
107-
class="item"
108-
v-if="detail.platform === AiPlatformEnum.STABLE_DIFFUSION && detail?.options?.seed"
109-
>
110-
<div class="tip">随机因子</div>
111-
<div class="body">
73+
</el-descriptions-item>
74+
<el-descriptions-item v-if="detail?.options?.seed" label="随机因子">
11275
{{ detail?.options?.seed }}
113-
</div>
114-
</div>
76+
</el-descriptions-item>
77+
</el-descriptions>
78+
11579
<!-- Dall3 专属区域 -->
116-
<div class="item" v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style">
117-
<div class="tip">风格选择</div>
118-
<div class="body">
80+
<el-descriptions
81+
v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
82+
title="DALL-E 3 参数"
83+
:column="1"
84+
:label-width="100"
85+
border
86+
class="mt-5"
87+
>
88+
<el-descriptions-item label="风格选择">
11989
{{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
120-
</div>
121-
</div>
90+
</el-descriptions-item>
91+
</el-descriptions>
92+
12293
<!-- Midjourney 专属区域 -->
123-
<div
124-
class="item"
125-
v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version"
94+
<el-descriptions
95+
v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && hasMidjourneyOptions"
96+
title="Midjourney 参数"
97+
:column="1"
98+
:label-width="100"
99+
border
100+
class="mt-5"
126101
>
127-
<div class="tip">模型版本</div>
128-
<div class="body">
102+
<el-descriptions-item v-if="detail?.options?.version" label="模型版本">
129103
{{ detail?.options?.version }}
130-
</div>
131-
</div>
132-
<div
133-
class="item"
134-
v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.referImageUrl"
135-
>
136-
<div class="tip">参考图</div>
137-
<div class="body">
138-
<el-image :src="detail.options.referImageUrl" />
139-
</div>
140-
</div>
104+
</el-descriptions-item>
105+
<el-descriptions-item v-if="detail?.options?.referImageUrl" label="参考图">
106+
<el-image
107+
:src="detail.options.referImageUrl"
108+
class="max-w-[200px] rounded-2"
109+
fit="contain"
110+
/>
111+
</el-descriptions-item>
112+
</el-descriptions>
141113
</el-drawer>
142114
</template>
143115

@@ -156,6 +128,25 @@ import { formatTime } from '@/utils'
156128
const showDrawer = ref<boolean>(false) // 是否显示
157129
const detail = ref<ImageVO>({} as ImageVO) // 图片详细信息
158130
131+
// 计算属性：判断是否有 StableDiffusion 选项
132+
const hasStableDiffusionOptions = computed(() => {
133+
const options = detail.value?.options
134+
return (
135+
options?.sampler ||
136+
options?.clipGuidancePreset ||
137+
options?.stylePreset ||
138+
options?.steps ||
139+
options?.scale ||
140+
options?.seed
141+
)
142+
})
143+
144+
// 计算属性：判断是否有 Midjourney 选项
145+
const hasMidjourneyOptions = computed(() => {
146+
const options = detail.value?.options
147+
return options?.version || options?.referImageUrl
148+
})
149+
159150
const props = defineProps({
160151
show: {
161152
type: Boolean,
@@ -175,7 +166,7 @@ const handleDrawerClose = async () => {
175166
176167
/** 监听 drawer 是否打开 */
177168
const { show } = toRefs(props)
178-
watch(show, async (newValue, oldValue) => {
169+
watch(show, async (newValue, _oldValue) => {
179170
showDrawer.value = newValue as boolean
180171
})
181172
@@ -186,39 +177,11 @@ const getImageDetail = async (id: number) => {
186177
187178
/** 监听 id 变化，加载最新图片详情 */
188179
const { id } = toRefs(props)
189-
watch(id, async (newVal, oldVal) => {
180+
watch(id, async (newVal, _oldVal) => {
190181
if (newVal) {
191182
await getImageDetail(newVal)
192183
}
193184
})
194185
195186
const emits = defineEmits(['handleDrawerClose'])
196187
</script>
197-
<style scoped lang="scss">
198-
.item {
199-
margin-bottom: 20px;
200-
width: 100%;
201-
overflow: hidden;
202-
word-wrap: break-word;
203-
204-
.header {
205-
display: flex;
206-
flex-direction: row;
207-
justify-content: space-between;
208-
}
209-
210-
.tip {
211-
font-weight: bold;
212-
font-size: 16px;
213-
}
214-
215-
.body {
216-
margin-top: 10px;
217-
color: #616161;
218-
219-
.taskImage {
220-
border-radius: 10px;
221-
}
222-
}
223-
}
224-
</style>

‎src/views/ai/image/index/components/ImageList.vue

Lines changed: 14 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
<template>
2-
<el-card class="dr-task" body-class="task-card" shadow="never">
2+
<el-card
3+
class="wh-full"
4+
:body-style="{ margin: 0, padding: 0, height: '100%', position: 'relative' }"
5+
shadow="never"
6+
>
37
<template #header>
48
绘画任务
59
<!-- TODO @fan：看看，怎么优化下这个样子哈。 -->
610
<el-button @click="handleViewPublic">绘画作品</el-button>
711
</template>
812
<!-- 图片列表 -->
9-
<div class="task-image-list" ref="imageListRef">
13+
<div
14+
class="relative flex flex-row flex-wrap content-start h-full overflow-auto p-5 pb-[140px] box-border [&>div]:mr-5 [&>div]:mb-5"
15+
ref="imageListRef"
16+
>
1017
<ImageCard
1118
v-for="image in imageList"
1219
:key="image.id"
@@ -15,7 +22,9 @@
1522
@on-mj-btn-click="handleImageMidjourneyButtonClick"
1623
/>
1724
</div>
18-
<div class="task-image-pagination">
25+
<div
26+
class="absolute bottom-[60px] h-[50px] leading-[90px] w-full z-[999] bg-white flex flex-row justify-center items-center"
27+
>
1928
<Pagination
2029
:total="pageTotal"
2130
v-model:page="queryParams.pageNo"
@@ -150,12 +159,12 @@ const handleImageButtonClick = async (type: string, imageDetail: ImageVO) => {
150159
}
151160
// 下载
152161
if (type === 'download') {
153-
await download.image({ url: imageDetail.picUrl })
162+
download.image({ url: imageDetail.picUrl })
154163
return
155164
}
156165
// 重新生成
157166
if (type === 'regeneration') {
158-
await emits('onRegeneration', imageDetail)
167+
emits('onRegeneration', imageDetail)
159168
return
160169
}
161170
}
@@ -197,49 +206,3 @@ onUnmounted(async () => {
197206
}
198207
})
199208
</script>
200-
<style lang="scss">
201-
.dr-task {
202-
width: 100%;
203-
height: 100%;
204-
}
205-
.task-card {
206-
margin: 0;
207-
padding: 0;
208-
height: 100%;
209-
position: relative;
210-
}
211-
212-
.task-image-list {
213-
position: relative;
214-
display: flex;
215-
flex-direction: row;
216-
flex-wrap: wrap;
217-
align-content: flex-start;
218-
height: 100%;
219-
overflow: auto;
220-
padding: 20px 20px 140px;
221-
box-sizing: border-box; /* 确保内边距不会增加高度 */
222-
223-
> div {
224-
margin-right: 20px;
225-
margin-bottom: 20px;
226-
}
227-
> div:last-of-type {
228-
//margin-bottom: 100px;
229-
}
230-
}
231-
232-
.task-image-pagination {
233-
position: absolute;
234-
bottom: 60px;
235-
height: 50px;
236-
line-height: 90px;
237-
width: 100%;
238-
z-index: 999;
239-
background-color: #ffffff;
240-
display: flex;
241-
flex-direction: row;
242-
justify-content: center;
243-
align-items: center;
244-
}
245-
</style>

0 commit comments

Comments
 (0)