feat:【AI 大模型】image/index/components 下的部分页面,使用 unocss

This commit is contained in:
YunaiV
2025-07-27 11:10:03 +08:00
parent fef64d1f4e
commit fc44958cc5
5 changed files with 63 additions and 383 deletions

View File

@@ -14,14 +14,14 @@
type="textarea"
/>
</div>
<div class="hot-words">
<div class="flex flex-col mt-30px">
<div>
<el-text tag="b">随机热词</el-text>
</div>
<el-space wrap class="word-list">
<el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
<el-button
round
class="btn"
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotEnglishWords"
:key="hotWord"
@@ -31,11 +31,11 @@
</el-button>
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">采样方法</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-select v-model="sampler" placeholder="Select" size="large" class="!w-350px">
<el-option
v-for="item in StableDiffusionSamplers"
@@ -46,11 +46,11 @@
</el-select>
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">CLIP</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-select v-model="clipGuidancePreset" placeholder="Select" size="large" class="!w-350px">
<el-option
v-for="item in StableDiffusionClipGuidancePresets"
@@ -61,11 +61,11 @@
</el-select>
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">风格</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-select v-model="stylePreset" placeholder="Select" size="large" class="!w-350px">
<el-option
v-for="item in StableDiffusionStylePresets"
@@ -76,20 +76,20 @@
</el-select>
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">图片尺寸</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-input v-model="width" class="w-170px" placeholder="图片宽度" />
<el-input v-model="height" class="w-170px" placeholder="图片高度" />
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">迭代步数</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-input
v-model="steps"
type="number"
@@ -99,11 +99,11 @@
/>
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">引导系数</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-input
v-model="scale"
type="number"
@@ -113,11 +113,11 @@
/>
</el-space>
</div>
<div class="group-item">
<div class="mt-30px">
<div>
<el-text tag="b">随机因子</el-text>
</div>
<el-space wrap class="group-item-body">
<el-space wrap class="mt-15px w-full">
<el-input
v-model="seed"
type="number"
@@ -127,7 +127,7 @@
/>
</el-space>
</div>
<div class="btns">
<div class="flex justify-center mt-50px">
<el-button
type="primary"
size="large"
@@ -254,43 +254,4 @@ const settingValues = async (detail: ImageVO) => {
/** 暴露组件方法 */
defineExpose({ settingValues })
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}
// 热词
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
// 模型
.group-item {
margin-top: 30px;
.group-item-body {
margin-top: 15px;
width: 100%;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>