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:
@@ -71,6 +71,19 @@
|
|||||||
transition: border-color 140ms ease, box-shadow 140ms ease;
|
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); }
|
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 { 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:hover:not(:disabled) { transform: translateY(-1px); }
|
||||||
button:disabled { cursor: not-allowed; opacity: 0.45; }
|
button:disabled { cursor: not-allowed; opacity: 0.45; }
|
||||||
@@ -132,6 +145,13 @@
|
|||||||
<label for="sceneName">scene-name</label>
|
<label for="sceneName">scene-name</label>
|
||||||
<input id="sceneName" placeholder="例如:台区线损报表" />
|
<input id="sceneName" placeholder="例如:台区线损报表" />
|
||||||
</div>
|
</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>
|
<button id="settingsBtn" class="ghost-btn" style="margin-bottom: 12px;">⚙ 设置</button>
|
||||||
<div id="validationText" class="validation"></div>
|
<div id="validationText" class="validation"></div>
|
||||||
<button id="generateBtn" class="primary-btn" disabled>🚀 生成 Skill</button>
|
<button id="generateBtn" class="primary-btn" disabled>🚀 生成 Skill</button>
|
||||||
@@ -184,6 +204,7 @@
|
|||||||
sourceDir: document.getElementById("sourceDir"),
|
sourceDir: document.getElementById("sourceDir"),
|
||||||
sceneId: document.getElementById("sceneId"),
|
sceneId: document.getElementById("sceneId"),
|
||||||
sceneName: document.getElementById("sceneName"),
|
sceneName: document.getElementById("sceneName"),
|
||||||
|
sceneKind: document.getElementById("sceneKind"),
|
||||||
analyzeBtn: document.getElementById("analyzeBtn"),
|
analyzeBtn: document.getElementById("analyzeBtn"),
|
||||||
generateBtn: document.getElementById("generateBtn"),
|
generateBtn: document.getElementById("generateBtn"),
|
||||||
settingsBtn: document.getElementById("settingsBtn"),
|
settingsBtn: document.getElementById("settingsBtn"),
|
||||||
@@ -284,6 +305,7 @@
|
|||||||
const sourceDir = els.sourceDir.value.trim().replace(/\\/g, "/");
|
const sourceDir = els.sourceDir.value.trim().replace(/\\/g, "/");
|
||||||
const sceneId = els.sceneId.value.trim();
|
const sceneId = els.sceneId.value.trim();
|
||||||
const sceneName = els.sceneName.value.trim();
|
const sceneName = els.sceneName.value.trim();
|
||||||
|
const sceneKind = els.sceneKind.value;
|
||||||
const outputRoot = els.settingOutputRoot.value.trim().replace(/\\/g, "/");
|
const outputRoot = els.settingOutputRoot.value.trim().replace(/\\/g, "/");
|
||||||
const lessons = els.settingLessons.value.trim().replace(/\\/g, "/");
|
const lessons = els.settingLessons.value.trim().replace(/\\/g, "/");
|
||||||
if (!sourceDir || !sceneId || !sceneName || !outputRoot || !lessons) { setValidation("所有字段均为必填"); return; }
|
if (!sourceDir || !sceneId || !sceneName || !outputRoot || !lessons) { setValidation("所有字段均为必填"); return; }
|
||||||
@@ -297,7 +319,7 @@
|
|||||||
const res = await fetch(`${SERVER_URL}/generate`, {
|
const res = await fetch(`${SERVER_URL}/generate`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
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"); }
|
if (!res.ok) { const err = await res.json(); throw new Error(err.error || "Generation failed"); }
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user