From 4a12aa9d4b08e1c5843b386bffe4a28db33ed209 Mon Sep 17 00:00:00 2001
From: bot_dev1 <bot_dev1@xayunmei.com>
Date: Thu, 6 Aug 2026 16:12:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(#189):=20=E9=A9=BE=E9=A9=B6=E8=88=B1?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=20token=20=E5=8D=B8=E8=BD=BD=E6=97=B6?=
 =?UTF-8?q?=E6=B8=85=E7=90=86=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=20CSS=20=E5=8F=98=E9=87=8F=E6=B1=A1=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：cockpit/index.vue 加载模板时把 theme token 通过
setProperty 注入 :root，但 onUnmounted 仅 clearInterval 未清理，
导致进过驾驶舱/切换模板后全局 CSS 变量被残留值污染，其他页面颜色异常。

修复：
1. 注入前记录被改动的变量名及旧值（injectedTokens）。
2. onUnmounted 时逐个恢复旧值（有旧值则 setProperty 恢复，
   原本无则 removeProperty 移除），杜绝全局污染。

验收：进驾驶舱再切到其他页面，全局 CSS 变量无残留值，颜色正常。
（本环境无 pnpm，构建验证转 bot_qa）
---
 .../src/views/iaop/cockpit/index.vue          | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue
index 5cf6f1d..3db20de 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/cockpit/index.vue
@@ -29,6 +29,9 @@ const loading = ref(true);
 const errorMsg = ref('');
 
 let timer = 0;
+// issue #189：记录注入 :root 的主题变量及其旧值，卸载时恢复，
+// 避免进过驾驶舱后全局 CSS 变量被残留值污染其他页面。
+const injectedTokens: Array<{ key: string; prev: string }> = [];
 
 onMounted(async () => {
   try {
@@ -37,9 +40,12 @@ onMounted(async () => {
     widgets.value = (plan.widgets as unknown as PlanWidget[]) || [];
     // 主题 token 注入 CSS 变量（切模板 = 换一套变量）
     const root = document.documentElement;
-    Object.entries((plan.themeTokens as Record<string, string>) || {}).forEach(([k, v]) =>
-      root.style.setProperty(k, v),
-    );
+    Object.entries((plan.themeTokens as Record<string, string>) || {}).forEach(([k, v]) => {
+      // 先记下旧值，卸载时恢复（getComputedStyle 取级联值；为空表示原本无）
+      const prev = root.style.getPropertyValue(k);
+      injectedTokens.push({ key: k, prev });
+      root.style.setProperty(k, v);
+    });
     timer = window.setInterval(refreshHealth, 2000);
     await refreshHealth();
   } catch {
@@ -49,7 +55,19 @@ onMounted(async () => {
   }
 });
 
-onUnmounted(() => window.clearInterval(timer));
+onUnmounted(() => {
+  window.clearInterval(timer);
+  // issue #189：清理本次注入到 :root 的主题变量，恢复旧值，杜绝全局污染
+  const root = document.documentElement;
+  for (const { key, prev } of injectedTokens) {
+    if (prev) {
+      root.style.setProperty(key, prev);
+    } else {
+      root.style.removeProperty(key);
+    }
+  }
+  injectedTokens.length = 0;
+});
 
 const inferOnline = ref(false);
 async function refreshHealth() {
-- 
2.54.0