Fix env config tab clicks via document event delegation

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

lib/common/static/instance_embed.js

@@ -113,8 +113,13 @@
         if (tab === "settings" && typeof global.InstanceSettingsPrefs.loadDisplayPrefsForm === "function") {
           global.InstanceSettingsPrefs.loadDisplayPrefsForm();
         }
-        if (tab === "env_config" && typeof global.InstanceSettingsPrefs.loadEnvConfig === "function") {
+        if (tab === "env_config") {
-          global.InstanceSettingsPrefs.loadEnvConfig();
+          if (typeof global.InstanceSettingsPrefs.loadEnvConfig === "function") {
+            global.InstanceSettingsPrefs.loadEnvConfig();
+          }
+          if (typeof global.InstanceSettingsPrefs.bindEnvTabs === "function") {
+            global.InstanceSettingsPrefs.bindEnvTabs();
+          }
         }
       }
     }
@@ -123,8 +128,13 @@
         if (tab === "settings" && typeof global.InstanceSettingsPrefs.loadDisplayPrefsForm === "function") {
           global.InstanceSettingsPrefs.loadDisplayPrefsForm();
         }
-        if (tab === "env_config" && typeof global.InstanceSettingsPrefs.loadEnvConfig === "function") {
+        if (tab === "env_config") {
-          global.InstanceSettingsPrefs.loadEnvConfig();
+          if (typeof global.InstanceSettingsPrefs.loadEnvConfig === "function") {
+            global.InstanceSettingsPrefs.loadEnvConfig();
+          }
+          if (typeof global.InstanceSettingsPrefs.bindEnvTabs === "function") {
+            global.InstanceSettingsPrefs.bindEnvTabs();
+          }
         }
       }
     }

lib/common/static/instance_settings_prefs.js

@@ -66,34 +66,37 @@
   }
 
   function envConfigRoot() {
-    const pane = document.querySelector(".embed-tab-pane.is-active-pane");
+    const activePane = document.querySelector(".embed-tab-pane.is-active-pane");
-    if (pane) {
+    if (activePane) {
-      const inPane = pane.querySelector(".env-config-page");
+      return activePane.querySelector(".env-config-page");
-      if (inPane) return inPane;
     }
     return document.querySelector(".env-config-page");
   }
 
-  function bindEnvTabs(scope) {
+  let envTabsDelegateReady = false;
-    const root = scope || envConfigRoot();
+
-    if (!root || root.getAttribute("data-env-tabs-bound") === "1") return;
+  function bindEnvTabs() {
-    const tabs = root.querySelectorAll(".env-tab-btn");
+    if (envTabsDelegateReady) return;
-    const panels = root.querySelectorAll(".env-panel");
+    envTabsDelegateReady = true;
-    if (!tabs.length) return;
+    document.addEventListener("click", (e) => {
-    root.setAttribute("data-env-tabs-bound", "1");
+      const btn = e.target.closest(".env-tab-btn");
-    tabs.forEach((btn) => {
+      if (!btn) return;
-      btn.addEventListener("click", () => {
+      const root = btn.closest(".env-config-page");
-        const idx = btn.getAttribute("data-env-tab");
+      if (!root) return;
-        tabs.forEach((b) => {
+      const hostPane = root.closest(".embed-tab-pane");
-          const on = b.getAttribute("data-env-tab") === idx;
+      if (hostPane && !hostPane.classList.contains("is-active-pane")) return;
-          b.classList.toggle("is-active", on);
+      const idx = btn.getAttribute("data-env-tab");
-          b.setAttribute("aria-selected", on ? "true" : "false");
+      if (idx == null) return;
-        });
+      e.preventDefault();
-        panels.forEach((p) => {
+      root.querySelectorAll(".env-tab-btn").forEach((b) => {
-          const on = p.getAttribute("data-env-panel") === idx;
+        const on = b.getAttribute("data-env-tab") === idx;
-          p.classList.toggle("is-active", on);
+        b.classList.toggle("is-active", on);
-          p.hidden = !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;
       });
     });
   }
@@ -259,7 +262,7 @@
     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(root);
+      bindEnvTabs();
       return;
     }
     return loadEnvConfigIn(root);
@@ -268,7 +271,6 @@
   async function loadEnvConfigIn(root) {
     const page = root || envConfigRoot() || document.querySelector(".env-config-page");
     if (!page) return;
-    page.removeAttribute("data-env-tabs-bound");
     const loading = document.createElement("div");
     loading.className = "env-config-loading-wrap card";
     loading.id = "env-config-body";
@@ -281,7 +283,7 @@
       const data = await fetchJson("/api/settings/env");
       envSchemaGroups = data.groups || [];
       loading.replaceWith(renderEnvConfigBody(envSchemaGroups));
-      bindEnvTabs(page);
+      bindEnvTabs();
     } catch (e) {
       loading.innerHTML = '<span class="err">' + (e.message || "加载失败") + "</span>";
     }
@@ -386,6 +388,7 @@
     applyDisplayToNav,
     loadDisplayPrefsForm,
     loadEnvConfig,
+    bindEnvTabs,
     restartInstance,
   };
 

lib/instance/templates/embed_shell.html

@@ -103,8 +103,8 @@ const ORDER_ENTRY_MODEL_CODE_TO_CATEGORY = {{ entry_model_code_to_category | toj
 <script>
 window.__INSTANCE_DISPLAY__ = {{ display | tojson }};
 </script>
-<script src="/static/instance_settings_prefs.js?v=7"></script>
+<script src="/static/instance_settings_prefs.js?v=8"></script>
 <script src="/static/instance_live.js?v=4"></script>
-<script src="/static/instance_embed.js?v=19"></script>
+<script src="/static/instance_embed.js?v=20"></script>
 </body>
 </html>

lib/instance/templates/index.html

@@ -2038,6 +2038,6 @@ setInterval(refreshPriceSnapshotConditional, {{ price_refresh_seconds * 1000 }})
 <script>
 window.__INSTANCE_DISPLAY__ = {{ display | tojson }};
 </script>
-<script src="/static/instance_settings_prefs.js?v=7"></script>
+<script src="/static/instance_settings_prefs.js?v=8"></script>
 </body>
 </html>