diff --git a/lib/common/static/instance_settings_prefs.js b/lib/common/static/instance_settings_prefs.js index dc8f21a..71bda56 100644 --- a/lib/common/static/instance_settings_prefs.js +++ b/lib/common/static/instance_settings_prefs.js @@ -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 = '' + (e.message || "加载失败") + ""; } @@ -379,7 +358,6 @@ bindEvents(); loadDisplayPrefsForm(false); loadEnvConfig(false); - bindEnvTabs(); if (global.__INSTANCE_DISPLAY__) applyDisplayToNav(global.__INSTANCE_DISPLAY__); } diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index 10c6a84..37944a9 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -2225,6 +2225,19 @@ html[data-theme="light"] .journal-detail-img-thumb { .env-config-body { padding: 0; overflow: hidden; + position: relative; +} + +.env-tab-radio { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } .env-config-tabs { @@ -2239,6 +2252,7 @@ html[data-theme="light"] .journal-detail-img-thumb { .env-tab-btn { flex: 0 0 auto; + display: inline-block; border: none; background: transparent; color: var(--muted, #8892b0); @@ -2249,18 +2263,49 @@ html[data-theme="light"] .journal-detail-img-thumb { margin-bottom: -1px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; + user-select: none; } .env-tab-btn:hover { color: #c5cae0; } -.env-tab-btn.is-active { +.env-config-panels .env-panel { + display: none; +} + +#env-sec-0:checked ~ .env-config-tabs label[for="env-sec-0"], +#env-sec-1:checked ~ .env-config-tabs label[for="env-sec-1"], +#env-sec-2:checked ~ .env-config-tabs label[for="env-sec-2"], +#env-sec-3:checked ~ .env-config-tabs label[for="env-sec-3"], +#env-sec-4:checked ~ .env-config-tabs label[for="env-sec-4"], +#env-sec-5:checked ~ .env-config-tabs label[for="env-sec-5"], +#env-sec-6:checked ~ .env-config-tabs label[for="env-sec-6"], +#env-sec-7:checked ~ .env-config-tabs label[for="env-sec-7"], +#env-sec-8:checked ~ .env-config-tabs label[for="env-sec-8"], +#env-sec-9:checked ~ .env-config-tabs label[for="env-sec-9"], +#env-sec-10:checked ~ .env-config-tabs label[for="env-sec-10"], +#env-sec-11:checked ~ .env-config-tabs label[for="env-sec-11"] { color: #e8ecff; border-bottom-color: var(--accent, #7c6cf0); font-weight: 600; } +#env-sec-0:checked ~ .env-config-panels .env-panel--0, +#env-sec-1:checked ~ .env-config-panels .env-panel--1, +#env-sec-2:checked ~ .env-config-panels .env-panel--2, +#env-sec-3:checked ~ .env-config-panels .env-panel--3, +#env-sec-4:checked ~ .env-config-panels .env-panel--4, +#env-sec-5:checked ~ .env-config-panels .env-panel--5, +#env-sec-6:checked ~ .env-config-panels .env-panel--6, +#env-sec-7:checked ~ .env-config-panels .env-panel--7, +#env-sec-8:checked ~ .env-config-panels .env-panel--8, +#env-sec-9:checked ~ .env-config-panels .env-panel--9, +#env-sec-10:checked ~ .env-config-panels .env-panel--10, +#env-sec-11:checked ~ .env-config-panels .env-panel--11 { + display: block; +} + .env-config-panels { padding: 14px 16px 16px; } diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index 26d70ba..9b4b5ba 100644 --- a/lib/instance/templates/embed_shell.html +++ b/lib/instance/templates/embed_shell.html @@ -7,7 +7,7 @@ - +