feat(about): 移除音乐模块并优化布局

- 删除音乐播放器相关HTML结构和CSS样式
- 移除APlayer库的引用和初始化代码
- 更新网格布局减少一行row定义
- 清理移动端FAB菜单中的音乐按钮
- 移除与音乐相关的国际化文本配置
- 优化导航激活状态下的背景色表现
- 隐藏操作按钮并调整其交互逻辑
- 修复文本渐变效果在不同浏览器下的兼容性问题
- 移除音乐模块后对浮动按钮功能进行相应调整
- 清理全局配置中不再使用的音乐播放列表设置

about.html

@@ -9,7 +9,6 @@
     <link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.min.css" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/about.css">
-    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css">
     <!-- Artalk 评论样式 -->
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.css">
     <link rel="icon" href="favicon.ico">
@@ -189,20 +188,6 @@
                 </div>
             </div>
 
-            <!-- [7] 音乐模块 (Music) -->
-            <div class="bento-card area-music">
-                <div class="card-header">
-                    <h3 class="glow-title"><i class="ri-music-2-line"></i> <span data-i18n="music.title">Music</span></h3>
-                </div>
-                <div class="vinyl-player">
-                    <div class="vinyl-disc" id="vinyl-disc"></div>
-                    <span id="music-status" class="vinyl-status" style="display:none;" data-i18n="music.unavailable">Player under maintenance</span>
-                    <div class="vinyl-lyrics" id="vinyl-lyrics">
-                        <div id="lyric-current">--</div>
-                    </div>
-                    <div id="aplayer" class="aplayer" style="flex:1;"></div>
-                </div>
-            </div>
 
             <!-- 移动端显示的社交栏 (6个链接) -->
             <div class="bento-card area-social-mobile mobile-social">
@@ -264,7 +249,6 @@
             <div class="fab-menu" id="fab-menu">
                 <button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
                 <button id="fab-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
-                <button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Music</span></button>
             </div>
         </div>
     </main>
@@ -287,11 +271,10 @@
     </footer>
 </div>
 
-<!-- 脚本：BootCDN jQuery / Artalk / APlayer -->
+<!-- 脚本：BootCDN jQuery / Artalk -->
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <script src="js/config.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.js"></script>
-<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
 <script src="js/about.js"></script>
 </body>
 </html>

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"
+        "tech tech interests";
-        "music music 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;
+        display: none;
-        padding: 8px;
-        background: rgba(128, 128, 128, 0.08);
-        border-radius: 12px;
-        transition: all 0.2s ease;
     }
 
     .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; }
+/* music module removed */

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) return;
-        if (!main || !menu || !fLang || !fTheme || !fMusic) 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();
     }
 

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: {