dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix env config tabs with CSS radio labels, no JS required

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-08 21:19:23 +08:00
parent 4b3373a68d
commit 12e44ab26d
5 changed files with 73 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_settings_prefs.js
+17 -39
View File
@@ -73,32 +73,8 @@
return document.querySelector(".env-config-page");
}
let envTabsDelegateReady = false;
function bindEnvTabs() {
if (envTabsDelegateReady) return;
envTabsDelegateReady = true;
document.addEventListener("click", (e) => {
const btn = e.target.closest(".env-tab-btn");
if (!btn) return;
const root = btn.closest(".env-config-page");
if (!root) return;
const hostPane = root.closest(".embed-tab-pane");
if (hostPane && !hostPane.classList.contains("is-active-pane")) return;
const idx = btn.getAttribute("data-env-tab");
if (idx == null) return;
e.preventDefault();
root.querySelectorAll(".env-tab-btn").forEach((b) => {
const on = b.getAttribute("data-env-tab") === idx;
b.classList.toggle("is-active", on);
b.setAttribute("aria-selected", on ? "true" : "false");
});
root.querySelectorAll(".env-panel").forEach((p) => {
const on = p.getAttribute("data-env-panel") === idx;
p.classList.toggle("is-active", on);
p.hidden = !on;
});
});
/* Tab 切换由 CSS radio+label 实现 */
}
async function loadDisplayPrefsForm(force) {
@@ -221,6 +197,15 @@
body.className = "env-config-body card";
body.id = "env-config-body";
body.setAttribute("data-env-ssr", "1");
groups.forEach((_group, idx) => {
const radio = document.createElement("input");
radio.type = "radio";
radio.name = "env-section";
radio.id = "env-sec-" + idx;
radio.className = "env-tab-radio";
if (idx === 0) radio.checked = true;
body.appendChild(radio);
});
const tabBar = document.createElement("div");
tabBar.className = "env-config-tabs";
tabBar.setAttribute("role", "tablist");
@@ -228,19 +213,15 @@
panelsWrap.className = "env-config-panels";
panelsWrap.id = "env-config-grid";
groups.forEach((group, idx) => {
const tab = document.createElement("button");
tab.type = "button";
tab.className = "env-tab-btn" + (idx === 0 ? " is-active" : "");
tab.setAttribute("role", "tab");
tab.dataset.envTab = String(idx);
tab.setAttribute("aria-selected", idx === 0 ? "true" : "false");
tab.textContent = group.title || "其他";
tabBar.appendChild(tab);
const label = document.createElement("label");
label.className = "env-tab-btn";
label.htmlFor = "env-sec-" + idx;
label.setAttribute("role", "tab");
label.textContent = group.title || "其他";
tabBar.appendChild(label);
const panel = document.createElement("section");
panel.className = "env-panel" + (idx === 0 ? " is-active" : "");
panel.className = "env-panel env-panel--" + idx;
panel.setAttribute("role", "tabpanel");
panel.dataset.envPanel = String(idx);
if (idx !== 0) panel.hidden = true;
if (group.has_restart) {
const hint = document.createElement("p");
hint.className = "env-panel-hint";
@@ -262,7 +243,6 @@
const root = envConfigRoot();
const body = root && root.querySelector("#env-config-body");
if (!force && body && body.getAttribute("data-env-ssr") === "1" && body.querySelector("[data-env-key]")) {
bindEnvTabs();
return;
}
return loadEnvConfigIn(root);
@@ -283,7 +263,6 @@
const data = await fetchJson("/api/settings/env");
envSchemaGroups = data.groups || [];
loading.replaceWith(renderEnvConfigBody(envSchemaGroups));
bindEnvTabs();
} catch (e) {
loading.innerHTML = '<span class="err">' + (e.message || "加载失败") + "</span>";
}
@@ -379,7 +358,6 @@
bindEvents();
loadDisplayPrefsForm(false);
loadEnvConfig(false);
bindEnvTabs();
if (global.__INSTANCE_DISPLAY__) applyDisplayToNav(global.__INSTANCE_DISPLAY__);
}