From 16a135053fc827a12ed4c461e682eaa00f78cd9f Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 23 Nov 2025 21:28:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E7=A7=BB=E9=99=A4=E9=9F=B3?= =?UTF-8?q?=E4=B9=90=E6=A8=A1=E5=9D=97=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除音乐播放器相关HTML结构和CSS样式 - 移除APlayer库的引用和初始化代码 - 更新网格布局减少一行row定义 - 清理移动端FAB菜单中的音乐按钮 - 移除与音乐相关的国际化文本配置 - 优化导航激活状态下的背景色表现 - 隐藏操作按钮并调整其交互逻辑 - 修复文本渐变效果在不同浏览器下的兼容性问题 - 移除音乐模块后对浮动按钮功能进行相应调整 - 清理全局配置中不再使用的音乐播放列表设置 --- about.html | 19 +-------- css/about.css | 43 ++++++------------- js/about.js | 116 +------------------------------------------------- js/config.js | 4 -- 4 files changed, 15 insertions(+), 167 deletions(-) diff --git a/about.html b/about.html index 23d2a95..c440f1d 100644 --- a/about.html +++ b/about.html @@ -9,7 +9,6 @@ - @@ -189,20 +188,6 @@ - -
-
-

Music

-
-
-
- -
-
--
-
-
-
-
@@ -264,7 +249,6 @@
-
@@ -287,11 +271,10 @@ - + - \ No newline at end of file diff --git a/css/about.css b/css/about.css index 5396fcc..684ff54 100644 --- a/css/about.css +++ b/css/about.css @@ -321,12 +321,11 @@ body { gap: 24px; /* PC: 3 Col, 2 Row Main */ grid-template-columns: 320px 1fr 260px; - grid-template-rows: 240px 220px auto auto; + grid-template-rows: 240px 220px auto; grid-template-areas: "profile bio stats" "profile bio mbti" - "tech tech interests" - "music music interests"; + "tech tech interests"; } /* --- Areas --- */ @@ -353,7 +352,7 @@ body { .area-interests { grid-area: interests; } -.area-music { grid-area: music; } +/* music module removed */ .mobile-social { display: none; @@ -722,6 +721,8 @@ body { -webkit-background-clip: text; background-clip: text; color: transparent; + -webkit-text-fill-color: transparent; + text-decoration: none; pointer-events: none; /* 禁用鼠标事件避免干扰 */ z-index: 10; } @@ -1199,17 +1200,17 @@ body { .nav-item.active { color: var(--text-primary); } + .nav-item:active { + color: var(--text-primary); + background: rgba(108, 92, 231, 0.15); + } .action-btn .btn-text { display: none; } .action-btn { - font-size: 1.2rem; - padding: 8px; - background: rgba(128, 128, 128, 0.08); - border-radius: 12px; - transition: all 0.2s ease; + display: none; } .action-btn.is-active { @@ -1360,6 +1361,7 @@ body { background-clip: text; color: transparent; -webkit-text-fill-color: transparent; + text-decoration: none; pointer-events: none; z-index: 10; } @@ -1578,29 +1580,10 @@ body { } .social-dock .s-icon { color: var(--text-primary); } .social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; } -.area-music { padding: 20px; display: flex; flex-direction: column; } -.vinyl-player { position: relative; display: flex; align-items: center; gap: 16px; } -.vinyl-disc { width: clamp(110px, 26vw, 160px); height: clamp(110px, 26vw, 160px); border-radius: 50%; background: - radial-gradient(#222 0%, #111 30%, #000 60%, #111 100%), - repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 3px, transparent 6px), - repeating-conic-gradient(from 0deg, rgba(255,215,0,0.05) 0deg, rgba(255,215,0,0.0) 8deg); - box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.2); - position: relative; } -.vinyl-disc::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } -.vinyl-disc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(108,92,231,0.15); animation: pulseWave 2.4s ease-out infinite; } -.vinyl-arm { display: none !important; } -.vinyl-info { display: flex; flex-direction: column; gap: 6px; } -.vinyl-title { font-weight: 700; background: var(--gradient-4); -webkit-background-clip: text; background-clip: text; color: transparent; } -.vinyl-status { font-size: 0.85rem; color: var(--text-secondary); } -.spinning { animation: spinDisc 8s linear infinite; } -@keyframes spinDisc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } -.vinyl-lyrics { flex: 1; min-width: 160px; max-width: 240px; padding: 8px 12px; } -.vinyl-lyrics #lyric-current { font-size: 0.95rem; line-height: 1.6; background: var(--gradient-3); -webkit-background-clip: text; background-clip: text; color: transparent; } -@keyframes pulseWave { 0% { box-shadow: 0 0 0 2px rgba(108,92,231,0.0); } 50% { box-shadow: 0 0 0 10px rgba(108,92,231,0.25); } 100% { box-shadow: 0 0 0 2px rgba(108,92,231,0.0); } } -.aplayer { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; } .fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); } .fab-label { font-size: 12px; } .fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; } .fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); } -.fab-menu.open { display: flex; } \ No newline at end of file +.fab-menu.open { display: flex; } +/* music module removed */ \ No newline at end of file diff --git a/js/about.js b/js/about.js index a08a079..74ca2bd 100644 --- a/js/about.js +++ b/js/about.js @@ -57,11 +57,6 @@ class I18nManager { "comment.title": "留言板", "modal.wechat": "微信公众号", "modal.desc": "扫码关注获取干货", - "music.title": "音乐", - "music.playlist": "我的歌单", - "music.play": "播放", - "music.pause": "暂停", - "music.unavailable": "播放器维修中", "comment.closed": "当前评论区已关闭" }, en: { @@ -100,11 +95,6 @@ class I18nManager { "comment.title": "Message Board", "modal.wechat": "WeChat Account", "modal.desc": "Scan for tech insights", - "music.title": "Music", - "music.playlist": "My Playlist", - "music.play": "Play", - "music.pause": "Pause", - "music.unavailable": "Player under maintenance", "comment.closed": "Comments are closed" } }; @@ -400,7 +390,6 @@ class UIManager { this.initBioToggle(); this.initNavInteraction(); this.initProfileGradient(); - this.initMusic(); this.initFab(); let resizeTimer = null; window.addEventListener('resize', () => { @@ -615,117 +604,18 @@ class UIManager { } } - initMusic() { - const disc = document.getElementById('vinyl-disc'); - const statusEl = document.getElementById('music-status'); - const lyricEl = document.getElementById('lyric-current'); - if (!disc) return; - let playing = true; - let loaded = false; - let rafId = null; let lyricIdx = 0; this._lyricLines = []; - const stopLyricLoop = () => { if (rafId) cancelAnimationFrame(rafId); rafId = null; }; - const startLyricLoop = () => { - stopLyricLoop(); - const loop = () => { - if (!this.aplayer || !playing) return; - const ct = this.aplayer.audio.currentTime || 0; - while (lyricIdx + 1 < this._lyricLines.length && this._lyricLines[lyricIdx + 1].t <= ct) { lyricIdx++; } - const line = this._lyricLines[lyricIdx]; - if (line && lyricEl && lyricEl.dataset.last !== String(lyricIdx)) { - lyricEl.textContent = line.text || ''; - lyricEl.dataset.last = String(lyricIdx); - } - rafId = requestAnimationFrame(loop); - }; - rafId = requestAnimationFrame(loop); - }; - const fail = () => { - playing = false; - if (statusEl) statusEl.style.display = 'inline'; - stopLyricLoop(); - if (lyricEl) { lyricEl.textContent = '--'; lyricEl.dataset.last = ''; } - updateUI(); - }; - const updateUI = () => { - if (playing) { - disc.classList.add('spinning'); - btn.textContent = this._t('music.pause') || 'Pause'; - } else { - disc.classList.remove('spinning'); - btn.textContent = this._t('music.play') || 'Play'; - } - }; - disc.addEventListener('click', () => { - if (this.aplayer) { this.aplayer.toggle(); return; } - playing = !playing; - updateUI(); - }); - const api = `https://api.injahow.cn/meting/?type=playlist&id=${(window.SiteConfig?.music?.playlistId) || 5131713379}&server=netease`; - try { - fetch(api).then(r => r.json()).then(list => { - if (!Array.isArray(list) || !window.APlayer) throw new Error('load fail'); - const audio = list.map(i => ({name: i.title, artist: i.author, url: i.url, cover: i.pic, lrc: i.lrc})); - this.aplayer = new APlayer({ - container: document.getElementById('aplayer'), - theme: getComputedStyle(document.documentElement).getPropertyValue('--accent') || '#6c5ce7', - autoplay: true, - listFolded: true, - audio - }); - const parseLrc = (lrc) => { - if (!lrc) return []; - const lines = String(lrc).split(/\r?\n/).map(s => s.trim()).filter(Boolean); - const out = []; - for (const s of lines) { - const m = s.match(/\[(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?\](.*)/); - if (!m) continue; - const mm = parseInt(m[1], 10), ss = parseInt(m[2], 10), xx = parseInt(m[3] || '0', 10); - const t = mm * 60 + ss + (xx / 1000); - const text = m[4].trim(); - out.push({ t, text }); - } - out.sort((a, b) => a.t - b.t); - return out; - }; - const ensureLrc = async (track) => { - if (track && track.lrc && /^https?:/.test(track.lrc)) { - try { const r = await fetch(track.lrc); const s = await r.text(); return parseLrc(s); } catch { return []; } - } - return parseLrc(track?.lrc); - }; - this.aplayer.on('play', async () => { - playing = true; updateUI(); - const cur = this.aplayer.list.audios[this.aplayer.list.index]; - this._lyricLines = await ensureLrc(cur); - lyricIdx = 0; startLyricLoop(); - }); - this.aplayer.on('pause', () => { playing = false; updateUI(); stopLyricLoop(); }); - this.aplayer.on('ended', () => { stopLyricLoop(); }); - loaded = true; - }).catch(() => fail()); - setTimeout(() => { - if (!loaded) fail(); - }, 6000); - } catch (_) { - fail(); - } - updateUI(); - } initFab() { const main = document.getElementById('fab-main'); const menu = document.getElementById('fab-menu'); const fLang = document.getElementById('fab-lang'); const fTheme = document.getElementById('fab-theme'); - const fMusic = document.getElementById('fab-music'); - if (!main || !menu || !fLang || !fTheme || !fMusic) return; + if (!main || !menu || !fLang || !fTheme) return; const updateLabels = () => { const lang = localStorage.getItem('lang') || (navigator.language && navigator.language.startsWith('zh') ? 'zh' : 'en'); const theme = (localStorage.getItem('theme') === 'night') ? 'night' : 'day'; fLang.querySelector('.fab-text').textContent = lang === 'zh' ? '中文' : 'English'; fTheme.querySelector('.fab-text').textContent = theme === 'night' ? 'Night' : 'Day'; - const playing = (this.aplayer && !this.aplayer.audio.paused); - fMusic.querySelector('.fab-text').textContent = playing ? (this._t('music.pause') || 'Pause') : (this._t('music.play') || 'Play'); }; main.addEventListener('click', () => { menu.classList.toggle('open'); @@ -739,10 +629,6 @@ class UIManager { document.getElementById('theme-btn')?.click(); updateLabels(); }); - fMusic.addEventListener('click', () => { - document.getElementById('music-toggle')?.click(); - updateLabels(); - }); updateLabels(); } diff --git a/js/config.js b/js/config.js index be2f208..127164d 100644 --- a/js/config.js +++ b/js/config.js @@ -89,10 +89,6 @@ const SiteConfig = { { name: 'Postgresql', category: 'data', weight: 1 } ], - music: { - playlistId: 5131713379, - embedUrl: 'https://music.163.com/outchain/player?type=0&id=5131713379&auto=1&height=66' - }, // 默认数据（当API或RSS不可用时使用） defaults: {