refactor(about): 优化评论组件主题与语言监听逻辑
- 合并主题与语言变化的监听器,统一使用MutationObserver - 增加对data-lang属性变化的监听 - 移除单独的语言按钮点击事件监听 - 统一延迟重新加载评论组件的时机至300ms - 提高代码可维护性和响应一致性
This commit is contained in:
25
js/about.js
25
js/about.js
@@ -581,32 +581,21 @@ class UIManager {
|
|||||||
this.enhanceMobileArtalk(container, lang);
|
this.enhanceMobileArtalk(container, lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听主题变化
|
// 监听主题/语言变化
|
||||||
const themeObserver = new MutationObserver(() => {
|
const themeObserver = new MutationObserver(() => {
|
||||||
const newTheme = document.documentElement.getAttribute('data-theme');
|
const newTheme = document.documentElement.getAttribute('data-theme');
|
||||||
if (newTheme !== currentTheme) {
|
const newLang = document.documentElement.getAttribute('data-lang');
|
||||||
// 重新加载整个评论组件而不是仅仅设置主题
|
// 延迟执行
|
||||||
|
setTimeout(() => {
|
||||||
|
// 重新加载整个评论组件
|
||||||
this.reloadArtalk();
|
this.reloadArtalk();
|
||||||
}
|
}, 300);
|
||||||
});
|
});
|
||||||
|
|
||||||
themeObserver.observe(document.documentElement, {
|
themeObserver.observe(document.documentElement, {
|
||||||
attributes: true,
|
attributes: true,
|
||||||
attributeFilter: ['data-theme']
|
attributeFilter: ['data-theme', 'data-lang']
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听语言变化
|
|
||||||
const langBtn = document.getElementById('lang-btn');
|
|
||||||
if (langBtn) {
|
|
||||||
langBtn.addEventListener('click', () => {
|
|
||||||
// 延迟执行以确保语言已经切换
|
|
||||||
setTimeout(() => {
|
|
||||||
// 重新加载整个评论组件而不是仅仅更新语言
|
|
||||||
this.reloadArtalk();
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化自定义样式
|
// 初始化自定义样式
|
||||||
this.updateCustomStyles(container, currentTheme);
|
this.updateCustomStyles(container, currentTheme);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user