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

Co-authored-by: Cursor <cursoragent@cursor.com>

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 = '<span class="err">' + (e.message || "加载失败") + "</span>";
     }
@@ -379,7 +358,6 @@
     bindEvents();
     loadDisplayPrefsForm(false);
     loadEnvConfig(false);
-    bindEnvTabs();
     if (global.__INSTANCE_DISPLAY__) applyDisplayToNav(global.__INSTANCE_DISPLAY__);
   }
 

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;
 }