Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(about): 调整玻璃态模糊值和光斑模糊效果

Browse Source 
- 减小玻璃态背景的模糊半径从28px到18px
- 减少光斑元素的模糊值从80px到40px
- 优化标签云计算逻辑，使用缓存宽高避免重复查询
- 改进主题语言监听器，防止重复加载和竞态条件
- 修复标签定位计算，提高渲染性能
- 清理冗余代码和注释
This commit is contained in:
hehh
2025-11-25 19:27:25 +08:00
parent 1531be198d
commit 5c9e2c4186
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
js/about.js
View File

@@ -699,18 +699,29 @@ class UIManager {
}
// 监听主题/语言变化
const themeObserver = new MutationObserver(() => {
if (this._themeLangObserver) {
try { this._themeLangObserver.disconnect(); } catch (_) {}
}
const prevTheme = document.documentElement.getAttribute('data-theme');
const prevLang = document.documentElement.getAttribute('data-lang');
this._lastTheme = prevTheme;
this._lastLang = prevLang;
this._reloading = false;
this._themeLangObserver = new MutationObserver(() => {
const newTheme = document.documentElement.getAttribute('data-theme');
const newLang = document.documentElement.getAttribute('data-lang');
console.log('Theme/Language changed:', newTheme, newLang);
// 延迟执行
if (this._reloading) return;
if (newTheme === this._lastTheme && newLang === this._lastLang) return;
this._lastTheme = newTheme;
this._lastLang = newLang;
setTimeout(() => {
// 重新加载整个评论组件
if (this._reloading) return;
this._reloading = true;
this.reloadArtalk();
this._reloading = false;
}, 300);
});
themeObserver.observe(document.documentElement, {
this._themeLangObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme', 'data-lang']
});
@@ -858,11 +869,13 @@ class UIManager {
el.innerText = item.name;
el.style.border = 'none';
container.appendChild(el);
tags.push({el, x: 0, y: 0, z: 0});
tags.push({el, x: 0, y: 0, z: 0, bw: el.offsetWidth, bh: el.offsetHeight});
});
// 动态半径，避免容器溢出，使用防抖优化
let radius = Math.max(160, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24);
const cw = container.clientWidth;
const ch = container.clientHeight;
let radius = Math.max(160, Math.min(cw, ch) / 2 - 24);
const dtr = Math.PI / 180;
let lasta = 1, lastb = 1;
let active = false, mouseX = 0, mouseY = 0;
@@ -918,8 +931,8 @@ class UIManager {
scale = Math.min(Math.max(scale, 0.7), 1.15);
const opacity = (tag.z + radius) / (2 * radius) + 0.2;
const zIndex = parseInt(scale * 100);
const left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2;
const top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2;
const left = tag.x + cw / 2 - tag.bw / 2;
const top = tag.y + ch / 2 - tag.bh / 2;
updates.push({
el: tag.el,
@@ -1107,4 +1120,4 @@ class UIManager {
});
}
}
}