fix(#189): 驾驶舱主题 token 卸载时清理,修复全局 CSS 变量污染 (#193)

bot_qa 审核通过(issue #189 已关闭),补合并到 main——此前仅审核通过未合并,修复一度丢失。
This commit is contained in:
2026-08-06 16:45:15 +08:00
@@ -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() {