From 4b3373a68d898fabb277ab5329b1800c0598f6f9 Mon Sep 17 00:00:00 2001 From: dekun Date: Wed, 8 Jul 2026 21:14:42 +0800 Subject: [PATCH] Fix env config tab clicks via document event delegation Co-authored-by: Cursor --- lib/common/static/instance_embed.js | 18 +++++-- lib/common/static/instance_settings_prefs.js | 57 ++++++++++---------- lib/instance/templates/embed_shell.html | 4 +- lib/instance/templates/index.html | 2 +- 4 files changed, 47 insertions(+), 34 deletions(-) diff --git a/lib/common/static/instance_embed.js b/lib/common/static/instance_embed.js index 54d030b..e3e32e7 100644 --- a/lib/common/static/instance_embed.js +++ b/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") { - global.InstanceSettingsPrefs.loadEnvConfig(); + if (tab === "env_config") { + 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") { - global.InstanceSettingsPrefs.loadEnvConfig(); + if (tab === "env_config") { + if (typeof global.InstanceSettingsPrefs.loadEnvConfig === "function") { + global.InstanceSettingsPrefs.loadEnvConfig(); + } + if (typeof global.InstanceSettingsPrefs.bindEnvTabs === "function") { + global.InstanceSettingsPrefs.bindEnvTabs(); + } } } } diff --git a/lib/common/static/instance_settings_prefs.js b/lib/common/static/instance_settings_prefs.js index 44bc8c7..dc8f21a 100644 --- a/lib/common/static/instance_settings_prefs.js +++ b/lib/common/static/instance_settings_prefs.js @@ -66,34 +66,37 @@ } function envConfigRoot() { - const pane = document.querySelector(".embed-tab-pane.is-active-pane"); - if (pane) { - const inPane = pane.querySelector(".env-config-page"); - if (inPane) return inPane; + const activePane = document.querySelector(".embed-tab-pane.is-active-pane"); + if (activePane) { + return activePane.querySelector(".env-config-page"); } return document.querySelector(".env-config-page"); } - function bindEnvTabs(scope) { - const root = scope || envConfigRoot(); - if (!root || root.getAttribute("data-env-tabs-bound") === "1") return; - const tabs = root.querySelectorAll(".env-tab-btn"); - const panels = root.querySelectorAll(".env-panel"); - if (!tabs.length) return; - root.setAttribute("data-env-tabs-bound", "1"); - tabs.forEach((btn) => { - btn.addEventListener("click", () => { - const idx = btn.getAttribute("data-env-tab"); - tabs.forEach((b) => { - const on = b.getAttribute("data-env-tab") === idx; - b.classList.toggle("is-active", on); - b.setAttribute("aria-selected", on ? "true" : "false"); - }); - panels.forEach((p) => { - const on = p.getAttribute("data-env-panel") === idx; - p.classList.toggle("is-active", on); - p.hidden = !on; - }); + 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; }); }); } @@ -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 = '' + (e.message || "加载失败") + ""; } @@ -386,6 +388,7 @@ applyDisplayToNav, loadDisplayPrefsForm, loadEnvConfig, + bindEnvTabs, restartInstance, }; diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index cab9322..26d70ba 100644 --- a/lib/instance/templates/embed_shell.html +++ b/lib/instance/templates/embed_shell.html @@ -103,8 +103,8 @@ const ORDER_ENTRY_MODEL_CODE_TO_CATEGORY = {{ entry_model_code_to_category | toj - + - + diff --git a/lib/instance/templates/index.html b/lib/instance/templates/index.html index eea2992..80dd469 100644 --- a/lib/instance/templates/index.html +++ b/lib/instance/templates/index.html @@ -2038,6 +2038,6 @@ setInterval(refreshPriceSnapshotConditional, {{ price_refresh_seconds * 1000 }}) - + \ No newline at end of file