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

4
css/about.css
View File

@@ -16,7 +16,7 @@
--glass-bg: rgba(255, 255, 255, 0.75);
--glass-border: 1px solid rgba(255, 255, 255, 0.9);
--glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
--glass-blur: 28px;
--glass-blur: 18px;
--text-primary: #1f2937;
--text-secondary: #4b5563;
@@ -88,7 +88,7 @@ body {
/* Ambient Background */
.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-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"); }

33
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,