From f8c087fb3f29fe3422c5f21f5a0535e5faa60546 Mon Sep 17 00:00:00 2001
From: zwbcc <zwbcc@qq.com>
Date: Sat, 28 Mar 2026 21:09:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=BF=AB=E6=8D=B7?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=AF=8D=E6=A0=87=E7=AD=BE=EF=BC=8C=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=8D=B3=E5=8F=AF=E8=BF=BD=E5=8A=A0=E5=88=B0=E6=8F=8F?=
 =?UTF-8?q?=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 19 +++++++++++++++++++
 style.css  | 42 ++++++++++++++++++++++++++++++++++++++++++
 ui.js      | 16 ++++++++++++++++
 3 files changed, 77 insertions(+)

diff --git a/index.html b/index.html
index eecbecc..8ddc930 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,25 @@
 
     <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 -->
       <div class="prompt-row">
         <textarea
diff --git a/style.css b/style.css
index 288c9ad..6a76f9d 100644
--- a/style.css
+++ b/style.css
@@ -134,6 +134,48 @@ header {
 
 .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-row {
diff --git a/ui.js b/ui.js
index 276a975..c367bc1 100644
--- a/ui.js
+++ b/ui.js
@@ -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 ──────────────────────────────────────────
 
 promptInput.addEventListener('input', () => {