feat: 添加快捷提示词标签,点击即可追加到描述

This commit is contained in:
zwbcc
2026-03-28 21:09:56 +08:00
parent 7cddeaa0d3
commit f8c087fb3f
3 changed files with 77 additions and 0 deletions

View File

@@ -40,6 +40,25 @@
<form id="generateForm"> <form id="generateForm">
<!-- Quick prompts -->
<div class="prompt-tags" id="promptTags">
<span class="tags-label">快捷描述</span>
<div class="tags-list">
<button type="button" class="tag-pill" data-tag="雪景,柔和光线,细腻质感">雪景</button>
<button type="button" class="tag-pill" data-tag="日落,金色时刻,暖色调">日落</button>
<button type="button" class="tag-pill" data-tag="森林薄雾空气感8K">森林</button>
<button type="button" class="tag-pill" data-tag="赛博朋克,霓虹灯,夜晚,雨中">赛博朋克</button>
<button type="button" class="tag-pill" data-tag="动漫风格,插画,精致细节">动漫风格</button>
<button type="button" class="tag-pill" data-tag="人像摄影,单反背景虚化,专业打光">人像</button>
<button type="button" class="tag-pill" data-tag="城市夜景,长曝光,车轨">城市夜景</button>
<button type="button" class="tag-pill" data-tag="水下摄影,蓝色调,光影">水下</button>
<button type="button" class="tag-pill" data-tag="治愈系插画,柔和配色,温暖">治愈系</button>
<button type="button" class="tag-pill" data-tag="科幻概念设计,高达,细节丰富">科幻</button>
<button type="button" class="tag-pill" data-tag="油画质感,古典,厚重笔触">油画</button>
<button type="button" class="tag-pill" data-tag="极简主义,留白,清新">极简</button>
</div>
</div>
<!-- Prompt --> <!-- Prompt -->
<div class="prompt-row"> <div class="prompt-row">
<textarea <textarea

View File

@@ -134,6 +134,48 @@ header {
.model-tab.active .tab-desc { color: var(--accent2); } .model-tab.active .tab-desc { color: var(--accent2); }
/* ── Prompt Tags ─────────────────────────────────────────────── */
.prompt-tags {
margin-bottom: 12px;
}
.tags-label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text3);
margin-bottom: 8px;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag-pill {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text2);
font-size: 12px;
padding: 4px 12px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.tag-pill:hover {
background: rgba(124,106,245,0.15);
border-color: rgba(124,106,245,0.4);
color: var(--accent2);
}
.tag-pill:active {
transform: scale(0.96);
}
/* ── Prompt ──────────────────────────────────────────────────── */ /* ── Prompt ──────────────────────────────────────────────────── */
.prompt-row { .prompt-row {

16
ui.js
View File

@@ -221,6 +221,22 @@ generateForm.addEventListener('submit', async (e) => {
} }
}); });
// ── Quick prompt tags ──────────────────────────────────────────
document.querySelectorAll('.tag-pill').forEach(btn => {
btn.addEventListener('click', () => {
const tag = btn.dataset.tag;
const current = promptInput.value.trim();
if (current) {
promptInput.value = current + '' + tag;
} else {
promptInput.value = tag;
}
promptInput.dispatchEvent(new Event('input'));
promptInput.focus();
});
});
// ── Prompt char count ────────────────────────────────────────── // ── Prompt char count ──────────────────────────────────────────
promptInput.addEventListener('input', () => { promptInput.addEventListener('input', () => {