From 5c9e2c4186d0647ec3e6a3071e08f61343bf23ee Mon Sep 17 00:00:00 2001 From: hehh Date: Tue, 25 Nov 2025 19:27:25 +0800 Subject: [PATCH] =?UTF-8?q?style(about):=20=E8=B0=83=E6=95=B4=E7=8E=BB?= =?UTF-8?q?=E7=92=83=E6=80=81=E6=A8=A1=E7=B3=8A=E5=80=BC=E5=92=8C=E5=85=89?= =?UTF-8?q?=E6=96=91=E6=A8=A1=E7=B3=8A=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 减小玻璃态背景的模糊半径从28px到18px - 减少光斑元素的模糊值从80px到40px - 优化标签云计算逻辑，使用缓存宽高避免重复查询 - 改进主题语言监听器，防止重复加载和竞态条件 - 修复标签定位计算，提高渲染性能 - 清理冗余代码和注释 --- css/about.css | 6 +++--- js/about.js | 35 ++++++++++++++++++++++++----------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/css/about.css b/css/about.css index 5685aca..fc0566a 100644 --- a/css/about.css +++ b/css/about.css @@ -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"); } @@ -3169,4 +3169,4 @@ body { /* Loading Transition */ .fade-in { animation: fadeIn 0.3s ease both; } -@keyframes fadeIn { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} } \ No newline at end of file +@keyframes fadeIn { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} } diff --git a/js/about.js b/js/about.js index 808def6..bec84aa 100644 --- a/js/about.js +++ b/js/about.js @@ -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 { }); } -} \ No newline at end of file +}