feat: add scene kind dropdown to Web UI

Add scene type selector to the generator form:
- CSS styles for select element matching existing input style
- Dropdown with "报表收集类" (report_collection) and "监测类" (monitoring) options
- Pass sceneKind to /generate API endpoint

🤖 Generated with [Qoder][https://qoder.com]
This commit is contained in:
木炎
2026-04-17 00:02:17 +08:00
parent 2e69fa7239
commit b5131c858a

View File

@@ -71,6 +71,19 @@
transition: border-color 140ms ease, box-shadow 140ms ease;
}
input:focus { border-color: rgba(15, 118, 110, 0.5); box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12); }
select {
width: 100%;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
color: var(--text);
padding: 14px 16px;
font: inherit;
outline: none;
cursor: pointer;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
select:focus { border-color: rgba(15, 118, 110, 0.5); box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12); }
button { border: 0; padding: 14px 16px; font-weight: 700; cursor: pointer; transition: transform 140ms ease, opacity 140ms ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: 0.45; }
@@ -132,6 +145,13 @@
<label for="sceneName">scene-name</label>
<input id="sceneName" placeholder="例如:台区线损报表" />
</div>
<div class="field">
<label for="sceneKind">场景类型</label>
<select id="sceneKind">
<option value="report_collection" selected>报表收集类</option>
<option value="monitoring">监测类</option>
</select>
</div>
<button id="settingsBtn" class="ghost-btn" style="margin-bottom: 12px;">⚙ 设置</button>
<div id="validationText" class="validation"></div>
<button id="generateBtn" class="primary-btn" disabled>🚀 生成 Skill</button>
@@ -184,6 +204,7 @@
sourceDir: document.getElementById("sourceDir"),
sceneId: document.getElementById("sceneId"),
sceneName: document.getElementById("sceneName"),
sceneKind: document.getElementById("sceneKind"),
analyzeBtn: document.getElementById("analyzeBtn"),
generateBtn: document.getElementById("generateBtn"),
settingsBtn: document.getElementById("settingsBtn"),
@@ -284,6 +305,7 @@
const sourceDir = els.sourceDir.value.trim().replace(/\\/g, "/");
const sceneId = els.sceneId.value.trim();
const sceneName = els.sceneName.value.trim();
const sceneKind = els.sceneKind.value;
const outputRoot = els.settingOutputRoot.value.trim().replace(/\\/g, "/");
const lessons = els.settingLessons.value.trim().replace(/\\/g, "/");
if (!sourceDir || !sceneId || !sceneName || !outputRoot || !lessons) { setValidation("所有字段均为必填"); return; }
@@ -297,7 +319,7 @@
const res = await fetch(`${SERVER_URL}/generate`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ sourceDir, sceneId, sceneName, outputRoot, lessons }),
body: JSON.stringify({ sourceDir, sceneId, sceneName, sceneKind, outputRoot, lessons }),
});
if (!res.ok) { const err = await res.json(); throw new Error(err.error || "Generation failed"); }