1
import type { MusicPlayerConfig } from "../types/config";
2

3
// 音乐播放器配置
4
export const musicPlayerConfig: MusicPlayerConfig = {
5
  // 音乐播放器功能开关
6
  enable: true,
7

8
  // 是否在导航栏显示音乐播放器入口
9
  showInNavbar: true,
10

11
  // 使用方式："meting" 使用 Meting API，"local" 使用本地音乐列表
12
  mode: "meting",
13

14
  // 默认音量 (0-1)
15
  volume: 0.7,
16

17
  // 播放模式：'list'=列表循环, 'one'=单曲循环, 'random'=随机播放
18
  playMode: "list",
19

20
  // 是否显启用歌词
21
  showLyrics: true,
22

23
  // Meting API 配置
24
  meting: {
25
    // Meting API 地址 - 使用可用的 injahow API
26
    api: "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
27
    // 音乐平台：netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐
28
    server: "netease",
29
    // 类型：song=单曲, playlist=歌单, album=专辑, search=搜索, artist=艺术家
30
    type: "playlist",
31
    // 歌单/专辑/单曲 ID 或搜索关键词
32
    id: "14148542684",
33
    // 认证 token（可选）
34
    auth: "",
35
    // 备用 API 配置（当主 API 失败时使用）
36
    fallbackApis: [
37
      "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
38
    ],
39
    // MetingJS 脚本路径
40
    jsPath: "https://unpkg.com/meting@2/dist/Meting.min.js",
41
  },
42

43
  // 本地音乐配置（当 mode 为 'local' 时使用）
44
  local: {
45
    playlist: [],  // 清空本地音乐列表
46
  },
47

48
  // APlayer 配置选项（嵌套结构，组件需要这样读取）
49
  player: {
50
    // 是否固定播放器
51
    fixed: true,
52
    // 是否迷你模式
53
    mini: true,
54
    // 是否自动播放（浏览器可能会阻止，需用户交互一次网页后才自动播放）
55
    autoplay: false,
56
    // 主题色
57
    theme: "var(--btn-regular-bg)",
58
    // 循环模式：'all'=列表循环, 'one'=单曲循环, 'none'=不循环
59
    loop: "all",
60
    // 播放顺序：'list'=列表顺序, 'random'=随机播放
61
    order: "list",
62
    // 预加载：'none'=不预加载, 'metadata'=预加载元数据, 'auto'=自动
63
    preload: "auto",
64
    // 默认音量 (0-1)
65
    volume: 0.7,
66
    // 是否互斥播放（同时只能播放一个播放器）
67
    mutex: true,
68
    // local歌词类型：0=不显示, 1=显示（需要提供 lrc 字段）, 2=显示（从 HTML 内容读取）
69
    lrcType: 1,
70
    // 歌词是否默认隐藏
71
    lrcHidden: true,
72
    // 播放列表是否默认折叠
73
    listFolded: false,
74
    // 播放列表最大高度
75
    listMaxHeight: "340px",
76
    // localStorage 存储键名
77
    storageName: "aplayer-setting",
78
  },
79

80
  // 响应式配置
81
  responsive: {
82
    mobile: {
83
      // 在移动端是否隐藏
84
      hide: false,
85
      // 移动端断点（小于此宽度时应用移动端配置）
86
      breakpoint: 768,
87
    },
88
  },
89
};

1
---
2
import { musicPlayerConfig } from "@/config/musicConfig";
3
import { url } from "@/utils/url-utils";
4

5
const config = musicPlayerConfig;
6

7
// 预先生成本地资源路径，确保在非根目录部署时也能正确加载
8
const aplayerCssPath = url("/assets/css/APlayer.min.css");
9
const aplayerCustomCssPath = url("/assets/css/APlayer.custom.css");
10
const aplayerJsPath = url("/assets/js/APlayer.min.js");
11

12
// 预处理本地音乐列表的路径
13
const processedLocalPlaylist = config.mode === "local" && config.local?.playlist
14
  ? config.local.playlist.map((song) => ({
15
      ...song,
16
      url: url(song.url),
17
      cover: song.cover ? url(song.cover) : undefined,
18
      lrc: song.lrc ? url(song.lrc) : undefined,
19
    }))
20
  : null;
21
---
22

23
{config.enable && (
24
  <>
25
    <!-- APlayer CSS -->
26
    <link rel="stylesheet" href={aplayerCssPath} />
27
    <link rel="stylesheet" href={aplayerCustomCssPath} />
28

29
    <!-- 音乐胶囊 -->
30
    <div id="music-capsule" class="music-capsule" title="点击展开音乐播放器">
31
      <img id="capsule-cover" src="https://p2.music.126.net/4HGEnXVexEfF2M4WdDdfrQ==/109951166354363385.jpg" alt="专辑封面" />
32
    </div>
33

34
    <!-- 独立歌词显示 -->
35
    <div id="floating-lyrics" class="floating-lyrics">
36
      <div class="current-line"></div>
37
      <div class="next-line"></div>
38
    </div>
39

40
    <!-- 播放器容器 -->
41
    <div id="player-wrap" aria-hidden="true">
42
      <div id="aplayer-container" class:mobile-hide={config.responsive?.mobile?.hide}></div>
43
    </div>
44

45
    <!-- 右键菜单 -->
46
    <div id="right-menu-wrapper">
47
      <div id="right-menu" role="menu" aria-hidden="true">
48
        <div class="menu-section">
49
          <div class="nav-icons">
50
            <button class="nav-icon" id="nav-back" aria-label="后退">
51
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
52
                <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
53
              </svg>
54
            </button>
55
            <button class="nav-icon" id="nav-forward" aria-label="前进">
56
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
57
                <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
58
              </svg>
59
            </button>
60
            <button class="nav-icon" id="nav-refresh" aria-label="刷新">
61
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
62
                <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.197 3 16.1829 3.745 17.75 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
63
                <path d="M21 3V8H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
64
              </svg>
65
            </button>
66
            <button class="nav-icon" id="nav-top" aria-label="回到顶部">
67
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
68
                <path d="M12 19V5M5 12L12 5L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
69
              </svg>
70
            </button>
71
          </div>
72
        </div>
73

74
        <div class="menu-section">
75
          <button class="menu-item" id="menu-play">
76
            <span class="menu-icon">▶</span>
77
            <span class="menu-text">播放 / 暂停</span>
78
          </button>
79
          <button class="menu-item" id="menu-prev">
80
            <span class="menu-icon">⏮</span>
81
            <span class="menu-text">上一首</span>
82
          </button>
83
          <button class="menu-item" id="menu-next">
84
            <span class="menu-icon">⏭</span>
85
            <span class="menu-text">下一首</span>
86
          </button>
87
        </div>
88

89
        <div class="menu-section">
90
          <button class="menu-item" id="menu-volup">
91
            <span class="menu-icon">🔊</span>
92
            <span class="menu-text">音量 +</span>
93
          </button>
94
          <button class="menu-item" id="menu-voldown">
95
            <span class="menu-icon">🔉</span>
96
            <span class="menu-text">音量 -</span>
97
          </button>
98
        </div>
99

100
        <div class="menu-section">
101
          <button class="menu-item" id="menu-lyrics">
102
            <span class="menu-icon">📜</span>
103
            <span class="menu-text">隐藏歌词</span>
104
          </button>
105
        </div>
106

107
        <div class="menu-section">
108
          <button class="menu-item" id="menu-random">
109
            <span class="menu-icon">🎲</span>
110
            <span class="menu-text">随机逛逛</span>
111
          </button>
112
          <button class="menu-item" id="menu-home">
113
            <span class="menu-icon">🏠</span>
114
            <span class="menu-text">回主页</span>
115
          </button>
116
        </div>
117

118
        <div class="menu-section">
119
          <button class="menu-item" id="menu-support">
120
            <span class="menu-icon">💡</span>
121
            <span class="menu-text">技术支持</span>
122
          </button>
123
          <button class="menu-item" id="menu-fullscreen">
124
            <span class="menu-icon">🖥️</span>
125
            <span class="menu-text">全屏模式</span>
126
          </button>
127
          <button class="menu-item" id="menu-close">
128
            <span class="menu-icon">❌</span>
129
            <span class="menu-text">关闭播放器</span>
130
          </button>
131
        </div>
132
      </div>
133
    </div>
134
  </>
135
)}
136

137
<script define:vars={{ config, aplayerJsPath, processedLocalPlaylist }} is:inline>
138
  (function() {
139
    if (!config.enable) return;
140
    if (typeof window === 'undefined') return;
141

142
    // 歌单ID
143
    const PLAYLIST_ID = '14148542684';
144

145
    // 状态变量
146
    let lyricsVisible = localStorage.getItem('lyricsVisible') !== 'false';
147
    let aplayer = null;
148
    let lyricsInterval = null;
149
    let currentLyric = '';
150
    let initPromise = null;
151

152
    // DOM 引用
153
    const capsule = document.getElementById('music-capsule');
154
    const capsuleCover = document.getElementById('capsule-cover');
155
    const playerWrap = document.getElementById('player-wrap');
156
    const aplayerContainer = document.getElementById('aplayer-container');
157
    const rightMenu = document.getElementById('right-menu');
158
    const floatingLyrics = document.getElementById('floating-lyrics');
159
    const currentLineEl = floatingLyrics?.querySelector('.current-line');
160
    const nextLineEl = floatingLyrics?.querySelector('.next-line');
161

162
    console.log('音乐播放器初始化开始');
163

164
    // 初始化 APlayer（直接用API加载歌单）
165
    function initPlayer() {
166
      if (aplayer) return Promise.resolve(aplayer);
167
      if (initPromise) return initPromise;
168

169
      initPromise = new Promise(async (resolve, reject) => {
170
        try {
171
          if (aplayerContainer) aplayerContainer.innerHTML = '';
172

173
          // 使用API代理加载歌单
174
          const apiUrl = 'https://api.injahow.cn/meting/?server=netease&type=playlist&id=' + PLAYLIST_ID;
175
          const response = await fetch(apiUrl);
176
          const songs = await response.json();
177

178
          if (!songs || songs.length === 0) {
179
            throw new Error('歌单加载失败');
180
          }
181

182
          console.log('歌单加载成功，共', songs.length, '首歌曲');
183

184
          // 转换为APlayer格式，并获取歌词
185
          const audioList = [];
186
          for (const song of songs) {
187
            let lrc = song.lrc || '';
188
            if (!lrc || lrc === '') {
189
              try {
190
                const lrcUrl = 'https://api.uomg.com/api/163/lyric?id=' + song.id;
191
                const lrcRes = await fetch(lrcUrl);
192
                const lrcData = await lrcRes.json();
193
                lrc = lrcData.lyric || '';
194
                if (lrc) console.log('获取歌词成功:', song.name);
195
              } catch(e) {
196
                console.log('获取歌词失败:', song.name);
197
              }
198
            }
199

200
            audioList.push({
201
              name: song.name,
202
              artist: song.artist,
203
              url: song.url,
204
              cover: song.pic,
205
              lrc: lrc
206
            });
207
          }
208

209
          // 创建APlayer实例
210
          aplayer = new APlayer({
211
            container: aplayerContainer,
212
            audio: audioList,
213
            theme: '#49b1f5',
214
            loop: 'all',
215
            preload: 'auto',
216
            volume: 0.7,
217
            lrcType: 3
218
          });
219

220
          bindAPlayerEvents(aplayer);
221
          console.log('APlayer初始化完成');
222
          resolve(aplayer);
223
        } catch (error) {
224
          console.error('歌单加载失败:', error);
225
          reject(error);
226
        }
227
      });
228

229
      return initPromise;
230
    }
231

232
    // 绑定 APlayer 事件
233
    function bindAPlayerEvents(ap) {
234
      if (!ap) return;
235

236
      function updateCover() {
237
        try {
238
          const info = ap.list.audios[ap.list.index];
239
          if (info && info.cover && capsuleCover) {
240
            capsuleCover.src = info.cover;
241
          }
242
        } catch(e) {}
243
      }
244

245
      ap.on('loadeddata', updateCover);
246
      ap.on('listswitch', updateCover);
247
      ap.on('play', () => {
248
        if (capsule) capsule.classList.add('playing');
249
        startLyricsUpdate(ap);
250
      });
251
      ap.on('pause', () => {
252
        if (capsule) capsule.classList.remove('playing');
253
        if (floatingLyrics) floatingLyrics.classList.remove('show');
254
        currentLyric = '';
255
      });
256
      ap.on('ended', () => {
257
        if (floatingLyrics) floatingLyrics.classList.remove('show');
258
        currentLyric = '';
259
      });
260
    }
261

262
    // 歌词更新功能
263
    function startLyricsUpdate(ap) {
264
      if (lyricsInterval) clearInterval(lyricsInterval);
265

266
      lyricsInterval = setInterval(() => {
267
        updateLyricsFromDOM();
268
      }, 100);
269
    }
270

271
    function updateLyricsFromDOM() {
272
      try {
273
        if (!lyricsVisible) {
274
          if (floatingLyrics) floatingLyrics.classList.remove('show');
275
          return;
276
        }
277

278
        const lrcContainer = document.querySelector('.aplayer-lrc');
279
        if (!lrcContainer) {
280
          if (floatingLyrics) floatingLyrics.classList.remove('show');
281
          return;
282
        }
283

284
        const currentLrc = lrcContainer.querySelector('p.aplayer-lrc-current');
285
        const allLrcLines = lrcContainer.querySelectorAll('p');
286

287
        if (currentLrc && currentLrc.textContent.trim()) {
288
          const currentText = currentLrc.textContent.trim();
289
          let nextText = '';
290

291
          for (let i = 0; i < allLrcLines.length; i++) {
292
            if (allLrcLines[i] === currentLrc && i < allLrcLines.length - 1) {
293
              nextText = allLrcLines[i + 1].textContent.trim();
294
              break;
295
            }
296
          }
297

298
          showLyricsWithEffect(currentText, nextText);
299
        } else {
300
          if (floatingLyrics) floatingLyrics.classList.remove('show');
301
          currentLyric = '';
302
        }
303
      } catch (error) {
304
        if (floatingLyrics) floatingLyrics.classList.remove('show');
305
        currentLyric = '';
306
      }
307
    }
308

309
    function showLyricsWithEffect(currentText, nextText) {
310
      if (!lyricsVisible || !currentLineEl || !nextLineEl) return;
311
      if (currentText === currentLyric) return;
312

313
      currentLyric = currentText;
314
      currentLineEl.textContent = currentText;
315
      nextLineEl.textContent = nextText || '';
316

317
      if (currentText && currentText.trim() && floatingLyrics) {
318
        floatingLyrics.classList.add('show');
319
      } else if (floatingLyrics) {
320
        floatingLyrics.classList.remove('show');
321
      }
322
    }
323

324
    // 播放控制函数
325
    function togglePlay() { if (aplayer) aplayer.toggle(); }
326
    function prevSong() { if (aplayer) aplayer.skipBack(); }
327
    function nextSong() { if (aplayer) aplayer.skipForward(); }
328
    function volumeUp() { if (aplayer) aplayer.volume(Math.min((aplayer.audio.volume || 0.7) + 0.1, 1), true); }
329
    function volumeDown() { if (aplayer) aplayer.volume(Math.max((aplayer.audio.volume || 0.7) - 0.1, 0), true); }
330
    function closePlayer() { if (aplayer) aplayer.pause(); if (playerWrap) playerWrap.classList.remove('show'); if (capsule) capsule.style.display = 'flex'; }
331

332
    // 歌词显示/隐藏控制
333
    function toggleLyricsVisibility() {
334
      lyricsVisible = !lyricsVisible;
335

336
      if (lyricsVisible) {
337
        if (floatingLyrics) floatingLyrics.classList.add('show');
338
        if (aplayer && !aplayer.audio.paused) {
339
          if (lyricsInterval) clearInterval(lyricsInterval);
340
          startLyricsUpdate(aplayer);
341
        }
342
      } else {
343
        if (floatingLyrics) floatingLyrics.classList.remove('show');
344
        if (currentLineEl) currentLineEl.textContent = '';
345
        if (nextLineEl) nextLineEl.textContent = '';
346
        currentLyric = '';
347
      }
348

349
      const lyricsMenuItem = document.getElementById('menu-lyrics');
350
      if (lyricsMenuItem) {
351
        const textSpan = lyricsMenuItem.querySelector('.menu-text');
352
        if (textSpan) textSpan.textContent = lyricsVisible ? '隐藏歌词' : '显示歌词';
353
      }
354
      localStorage.setItem('lyricsVisible', lyricsVisible.toString());
355
    }
356

357
    // 随机跳转
358
    function randomNavigate() {
359
      const randomPages = [
360
        '/posts/月风先生视频2025',
361
        '/posts/piclist-github-vercel图床',
362
        '/posts/选股票的步骤',
363
        '/posts/2026月风先生视频持续更新',
364
        '/posts/交易之道'
365
      ];
366
      const randomIndex = Math.floor(Math.random() * randomPages.length);
367
      window.location.href = randomPages[randomIndex];
368
    }
369

370
    function goHome() { window.location.href = '/'; }
371

372
    // 导航功能
373
    function navBack() { window.history.back(); hideRightMenuImmediate(); }
374
    function navForward() { window.history.forward(); hideRightMenuImmediate(); }
375
    function navRefresh() { window.location.reload(); hideRightMenuImmediate(); }
376
    function navTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); hideRightMenuImmediate(); }
377

378
    // 右键菜单
379
    function showRightMenuAt(clientX, clientY) {
380
      if (!rightMenu) return;
381
      const wrapper = document.getElementById('right-menu-wrapper');
382
      if (!wrapper) return;
383

384
      rightMenu.style.display = 'block';
385
      rightMenu.classList.remove('show');
386

387
      requestAnimationFrame(() => {
388
        const mw = rightMenu.offsetWidth || 200;
389
        const mh = rightMenu.offsetHeight || 300;
390
        let left = Math.round(clientX - mw / 2);
391
        left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
392
        let top = clientY - mh - 8;
393
        if (top < 8) top = clientY + 8;
394
        if (top + mh > window.innerHeight - 8) top = Math.max(8, window.innerHeight - mh - 8);
395

396
        wrapper.style.left = left + 'px';
397
        wrapper.style.top = top + 'px';
398
        rightMenu.classList.add('show');
399
      });
400
    }
401

402
    function hideRightMenuImmediate() {
403
      if (!rightMenu) return;
404
      rightMenu.classList.remove('show');
405
      rightMenu.style.display = 'none';
406
    }
407

408
    // 辅助函数
409
    async function ensurePlayerAndRun(fn) {
410
      try {
411
        const ap = await initPlayer();
412
        if (typeof fn === 'function') fn(ap);
413
      } catch(err) {
414
        console.warn('播放器未就绪：', err);
415
      }
416
    }
417

418
    // 事件监听
419
    document.addEventListener('DOMContentLoaded', function() {
420
      // 初始化歌词显示状态
421
      const savedLyricsVisible = localStorage.getItem('lyricsVisible');
422
      if (savedLyricsVisible !== null) {
423
        lyricsVisible = savedLyricsVisible === 'true';
424
      }
425

426
      const lyricsMenuItem = document.getElementById('menu-lyrics');
427
      if (lyricsMenuItem) {
428
        const textSpan = lyricsMenuItem.querySelector('.menu-text');
429
        if (textSpan) textSpan.textContent = lyricsVisible ? '隐藏歌词' : '显示歌词';
430
      }
431

432
      if (!lyricsVisible && floatingLyrics) {
433
        floatingLyrics.classList.remove('show');
434
      }
435

436
      // 胶囊点击事件
437
      if (capsule) {
438
        capsule.addEventListener('click', () => {
439
          if (playerWrap) {
440
            playerWrap.classList.add('show');
441
            initPlayer().catch(err => console.log('播放器初始化失败:', err));
442
          }
443
        });
444
      }
445

446
      // 右键菜单
447
      document.addEventListener('contextmenu', (e) => {
448
        if (e.ctrlKey) return;
449
        e.preventDefault();
450
        showRightMenuAt(e.clientX, e.clientY);
451
      });
452

453
      document.addEventListener('click', (e) => {
454
        const wrapper = document.getElementById('right-menu-wrapper');
455
        if (wrapper && !wrapper.contains(e.target)) {
456
          hideRightMenuImmediate();
457
        }
458
      });
459

460
      // 菜单功能绑定
461
      const menuPlay = document.getElementById('menu-play');
462
      const menuPrev = document.getElementById('menu-prev');
463
      const menuNext = document.getElementById('menu-next');
464
      const menuVolup = document.getElementById('menu-volup');
465
      const menuVoldown = document.getElementById('menu-voldown');
466
      const menuLyrics = document.getElementById('menu-lyrics');
467
      const menuRandom = document.getElementById('menu-random');
468
      const menuHome = document.getElementById('menu-home');
469
      const menuSupport = document.getElementById('menu-support');
470
      const menuFullscreen = document.getElementById('menu-fullscreen');
471
      const menuClose = document.getElementById('menu-close');
472

473
      const navBackBtn = document.getElementById('nav-back');
474
      const navForwardBtn = document.getElementById('nav-forward');
475
      const navRefreshBtn = document.getElementById('nav-refresh');
476
      const navTopBtn = document.getElementById('nav-top');
477

478
      if (menuPlay) menuPlay.addEventListener('click', () => { ensurePlayerAndRun(() => togglePlay()); hideRightMenuImmediate(); });
479
      if (menuPrev) menuPrev.addEventListener('click', () => { ensurePlayerAndRun(() => prevSong()); hideRightMenuImmediate(); });
480
      if (menuNext) menuNext.addEventListener('click', () => { ensurePlayerAndRun(() => nextSong()); hideRightMenuImmediate(); });
481
      if (menuVolup) menuVolup.addEventListener('click', () => { volumeUp(); hideRightMenuImmediate(); });
482
      if (menuVoldown) menuVoldown.addEventListener('click', () => { volumeDown(); hideRightMenuImmediate(); });
483
      if (menuLyrics) menuLyrics.addEventListener('click', () => { toggleLyricsVisibility(); hideRightMenuImmediate(); });
484
      if (menuRandom) menuRandom.addEventListener('click', () => { randomNavigate(); hideRightMenuImmediate(); });
485
      if (menuHome) menuHome.addEventListener('click', () => { goHome(); hideRightMenuImmediate(); });
486
      if (menuSupport) menuSupport.addEventListener('click', () => { window.open('https://1356666.xyz', '_blank'); hideRightMenuImmediate(); });
487
      if (menuFullscreen) menuFullscreen.addEventListener('click', () => {
488
        if (!document.fullscreenElement) {
489
          document.documentElement.requestFullscreen().catch(() => {});
490
        } else {
491
          document.exitFullscreen().catch(() => {});
492
        }
493
        hideRightMenuImmediate();
494
      });
495
      if (menuClose) menuClose.addEventListener('click', () => { closePlayer(); hideRightMenuImmediate(); });
496

497
      if (navBackBtn) navBackBtn.addEventListener('click', navBack);
498
      if (navForwardBtn) navForwardBtn.addEventListener('click', navForward);
499
      if (navRefreshBtn) navRefreshBtn.addEventListener('click', navRefresh);
500
      if (navTopBtn) navTopBtn.addEventListener('click', navTop);
501

502
      // 预初始化
503
      setTimeout(() => {
504
        initPlayer().catch(err => console.log('预初始化失败:', err));
505
      }, 1000);
506
    });
507

508
    // 加载 APlayer
509
    function loadScripts() {
510
      return new Promise((resolve) => {
511
        if (window.APlayer) {
512
          resolve();
513
          return;
514
        }
515
        const script = document.createElement("script");
516
        script.src = aplayerJsPath;
517
        script.async = true;
518
        script.onload = () => resolve();
519
        script.onerror = () => resolve();
520
        document.head.appendChild(script);
521
      });
522
    }
523

524
    loadScripts().then(() => {
525
      console.log('APlayer脚本加载完成');
526
    });
527
  })();
528
</script>
529

530
<style is:global>
531
  /* ===== 播放器面板 ===== */
532
  #player-wrap {
533
    position: fixed;
534
    right: 18px;
535
    bottom: 70px;
536
    width: 360px;
537
    max-width: calc(100% - 36px);
538
    z-index: 15000;
539
    display: none;
540
    transform-origin: right bottom;
541
  }
542
  #player-wrap.show {
543
    display: block;
544
    animation: popIn .18s ease;
545
  }
546
  @keyframes popIn {
547
    from { opacity: 0; transform: scale(.96) }
548
    to { opacity: 1; transform: scale(1) }
549
  }
550

551
  /* APlayer 微调样式 */
552
  .aplayer {
553
    border-radius: 12px !important;
554
    overflow: hidden !important;
555
  }
556
  .aplayer .aplayer-lrc p {
557
    color: orange !important;
558
    font-weight: 700;
559
  }
560

561
  /* 顶部歌曲名改为黑色 */
562
  .aplayer .aplayer-info .aplayer-music .aplayer-title {
563
    color: #000 !important;
564
    font-weight: bold;
565
  }
566

567
  /* 播放列表歌名改为黑色 */
568
  .aplayer .aplayer-list ol li {
569
    color: #000 !important;
570
  }
571
  .aplayer .aplayer-list ol li .aplayer-list-title {
572
    color: #000 !important;
573
  }
574

575
  /* 歌词改为橙色 */
576
  .aplayer .aplayer-lrc p {
577
    color: #ff8c00 !important;
578
  }
579
  .aplayer .aplayer-lrc p.aplayer-lrc-current {
580
    color: #ff4500 !important;
581
    font-weight: bold;
582
    font-size: 16px;
583
  }
584

585
  /* 播放器整体样式调整 */
586
  .aplayer {
587
    background: rgba(255, 255, 255, 0.9) !important;
588
    border-radius: 12px;
589
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
590
  }
591

592
  /* 独立歌词显示样式 */
593
  .floating-lyrics {
594
    position: fixed;
595
    left: 100px;
596
    bottom: 50px;
597
    text-align: left;
598
    z-index: 99999;
599
    color: #ff8c00;
600
    font-size: 18px;
601
    font-weight: bold;
602
    background: rgba(0, 0, 0, 0.6);
603
    padding: 15px 20px;
604
    border-radius: 12px;
605
    backdrop-filter: blur(20px) saturate(180%);
606
    -webkit-backdrop-filter: blur(20px) saturate(180%);
607
    max-width: 400px;
608
    opacity: 0;
609
    transition: opacity 0.3s ease;
610
    border: 1px solid rgba(255, 255, 255, 0.1);
611
    pointer-events: none;
612
  }
613

614
  .floating-lyrics.show {
615
    opacity: 1;
616
  }
617

618
  .floating-lyrics .current-line {
619
    color: #ff4500;
620
    font-size: 30px;
621
    margin-bottom: 8px;
622
    font-weight: bold;
623
    min-height: 24px;
624
  }
625

626
  .floating-lyrics .next-line {
627
    color: #ff8c00;
628
    font-size: 18px;
629
    opacity: 0.8;
630
    min-height: 18px;
631
  }
632

633
  /* ===== 音乐胶囊 ===== */
634
  .music-capsule {
635
    position: fixed;
636
    right: 33px;
637
    bottom: 33px;
638
    width: 64px;
639
    height: 64px;
640
    border-radius: 50%;
641
    display: flex;
642
    align-items: center;
643
    justify-content: center;
644
    cursor: pointer;
645
    z-index: 30000;
646
    background: radial-gradient(circle at 30% 30%, #00c3ff, #0061ff);
647
    box-shadow: 0 8px 28px rgba(0, 180, 255, 0.12);
648
  }
649

650
  .music-capsule:hover {
651
    transform: scale(1.05);
652
  }
653

654
  .music-capsule img {
655
    width: 95%;
656
    height: 95%;
657
    border-radius: 50%;
658
    object-fit: cover;
659
    transition: transform 0.3s;
660
  }
661

662
  .music-capsule.playing {
663
    background: radial-gradient(circle at 30% 30%, #ff9500, #ff5e00);
664
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.28);
665
  }
666

667
  .music-capsule.playing img {
668
    animation: spin 6s linear infinite;
669
  }
670

671
  @keyframes spin {
672
    from { transform: rotate(0); }
673
    to { transform: rotate(360deg); }
674
  }
675

676
  /* ===== 右键菜单样式 ===== */
677
  #right-menu-wrapper {
678
    position: fixed;
679
    top: 0;
680
    left: 0;
681
    z-index: 40000;
682
    pointer-events: none;
683
  }
684

685
  #right-menu {
686
    position: absolute;
687
    display: none;
688
    min-width: 180px;
689
    background: rgba(255, 255, 255, 0.98);
690
    backdrop-filter: blur(20px) saturate(180%);
691
    border-radius: 12px;
692
    padding: 4px;
693
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
694
    opacity: 0;
695
    transform: translateY(-10px) scale(0.95);
696
    transform-origin: top left;
697
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
698
    pointer-events: auto;
699
    border: 1px solid rgba(0, 100, 0, 0.15);
700
  }
701

702
  #right-menu.show {
703
    display: block;
704
    opacity: 1;
705
    transform: translateY(0) scale(1);
706
  }
707

708
  .menu-section {
709
    padding: 2px 0;
710
    border-bottom: 1px solid rgba(0, 100, 0, 0.08);
711
  }
712

713
  .menu-section:last-child {
714
    border-bottom: none;
715
  }
716

717
  .nav-icons {
718
    display: flex;
719
    justify-content: space-between;
720
    padding: 6px 8px;
721
    gap: 4px;
722
    background: rgba(0, 100, 0, 0.03);
723
    border-radius: 8px;
724
    margin-bottom: 2px;
725
  }
726

727
  .nav-icon {
728
    width: 32px;
729
    height: 32px;
730
    border-radius: 8px;
731
    background: rgba(255, 255, 255, 0.9);
732
    border: 1px solid rgba(0, 100, 0, 0.15);
733
    color: #006400;
734
    cursor: pointer;
735
    display: flex;
736
    align-items: center;
737
    justify-content: center;
738
    transition: all 0.2s;
739
    padding: 0;
740
  }
741

742
  .nav-icon:hover {
743
    background: rgba(0, 100, 0, 0.1);
744
    border-color: rgba(0, 100, 0, 0.25);
745
    transform: translateY(-1px);
746
  }
747

748
  .menu-item {
749
    width: 100%;
750
    padding: 8px 12px;
751
    border-radius: 8px;
752
    background: transparent;
753
    border: none;
754
    color: #006400;
755
    cursor: pointer;
756
    display: flex;
757
    align-items: center;
758
    gap: 8px;
759
    text-align: left;
760
    transition: all 0.2s;
761
    font-size: 13px;
762
    font-weight: 500;
763
  }
764

765
  .menu-item:hover {
766
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.08), rgba(0, 150, 0, 0.06));
767
    transform: translateX(2px);
768
  }
769

770
  .menu-icon {
771
    width: 16px;
772
    height: 16px;
773
    display: flex;
774
    align-items: center;
775
    justify-content: center;
776
    font-size: 13px;
777
    flex-shrink: 0;
778
  }
779

780
  .menu-text {
781
    flex: 1;
782
    text-align: left;
783
    font-weight: 500;
784
  }
785

786
  /* 响应式 */
787
  @media (max-width: 768px) {
788
    .music-capsule {
789
      left: 18px;
790
      bottom: 22px;
791
      width: 60px;
792
      height: 60px;
793
    }
794

795
    .floating-lyrics {
796
      left: 90px;
797
      bottom: 30px;
798
      max-width: 250px;
799
      font-size: 16px;
800
      padding: 10px 14px;
801
    }
802

803
    .floating-lyrics .current-line {
804
      font-size: 18px;
805
    }
806

807
    .floating-lyrics .next-line {
808
      font-size: 12px;
809
    }
810

811
    #player-wrap {
812
      width: calc(100vw - 36px);
813
      max-width: 360px;
814
    }
815
  }
816
</style>