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

- 减小玻璃态背景的模糊半径从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

View File

@@ -16,7 +16,7 @@
--glass-bg: rgba(255, 255, 255, 0.75); --glass-bg: rgba(255, 255, 255, 0.75);
--glass-border: 1px solid rgba(255, 255, 255, 0.9); --glass-border: 1px solid rgba(255, 255, 255, 0.9);
--glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
--glass-blur: 28px; --glass-blur: 18px;
--text-primary: #1f2937; --text-primary: #1f2937;
--text-secondary: #4b5563; --text-secondary: #4b5563;
@@ -88,7 +88,7 @@ body {
/* Ambient Background */ /* Ambient Background */
.aurora-canvas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora-canvas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow-spot { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 20s infinite alternate; } .glow-spot { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.5; animation: float 20s infinite alternate; }
.spot-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--bg-grad-1); } .spot-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--bg-grad-1); }
.spot-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--bg-grad-2); animation-delay: -5s; } .spot-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--bg-grad-2); animation-delay: -5s; }
.noise-layer { position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } .noise-layer { position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }

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 newTheme = document.documentElement.getAttribute('data-theme');
const newLang = document.documentElement.getAttribute('data-lang'); 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(() => { setTimeout(() => {
// 重新加载整个评论组件 if (this._reloading) return;
this._reloading = true;
this.reloadArtalk(); this.reloadArtalk();
this._reloading = false;
}, 300); }, 300);
}); });
this._themeLangObserver.observe(document.documentElement, {
themeObserver.observe(document.documentElement, {
attributes: true, attributes: true,
attributeFilter: ['data-theme', 'data-lang'] attributeFilter: ['data-theme', 'data-lang']
}); });
@@ -858,11 +869,13 @@ class UIManager {
el.innerText = item.name; el.innerText = item.name;
el.style.border = 'none'; el.style.border = 'none';
container.appendChild(el); 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; const dtr = Math.PI / 180;
let lasta = 1, lastb = 1; let lasta = 1, lastb = 1;
let active = false, mouseX = 0, mouseY = 0; let active = false, mouseX = 0, mouseY = 0;
@@ -918,8 +931,8 @@ class UIManager {
scale = Math.min(Math.max(scale, 0.7), 1.15); scale = Math.min(Math.max(scale, 0.7), 1.15);
const opacity = (tag.z + radius) / (2 * radius) + 0.2; const opacity = (tag.z + radius) / (2 * radius) + 0.2;
const zIndex = parseInt(scale * 100); const zIndex = parseInt(scale * 100);
const left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2; const left = tag.x + cw / 2 - tag.bw / 2;
const top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2; const top = tag.y + ch / 2 - tag.bh / 2;
updates.push({ updates.push({
el: tag.el, el: tag.el,