fix(#189): 驾驶舱主题 token 卸载时清理,修复全局 CSS 变量污染
问题:cockpit/index.vue 加载模板时把 theme token 通过 setProperty 注入 :root,但 onUnmounted 仅 clearInterval 未清理, 导致进过驾驶舱/切换模板后全局 CSS 变量被残留值污染,其他页面颜色异常。 修复: 1. 注入前记录被改动的变量名及旧值(injectedTokens)。 2. onUnmounted 时逐个恢复旧值(有旧值则 setProperty 恢复, 原本无则 removeProperty 移除),杜绝全局污染。 验收:进驾驶舱再切到其他页面,全局 CSS 变量无残留值,颜色正常。 (本环境无 pnpm,构建验证转 bot_qa)
This commit is contained in:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user