✨ feat: changelog

🔧 chore: 更新版本号至 4.6.0
2026-04-07 09:00:50 +08:00 · 2025-05-12 08:59:42 +08:00 · 2025-05-12 08:55:28 +08:00
45 changed files with 854 additions and 2437 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -3,7 +3,7 @@ name: Deploy Web
 on:
  push:
    branches:
-      - main # 或者您的主分支名称
+      - dev_electron # 或者您的主分支名称
  workflow_dispatch: # 允许手动触发

 jobs:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,25 +1,27 @@
 # 更新日志

-## v4.5.0
-## 更新时间 2025 年 4 月 29 日 23:50
+## v4.6.0
 > 如果更新遇到问题，请前往 <a href="http://donate.alger.fun/download" target="_blank">下载 AlgerMusicPlayer</a>

-> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
-
 > 请我喝咖啡(支持作者) ☕️ <a href="http://donate.alger.fun/donate" target="_blank" style="color: red; font-weight: bold;">赏你</a>

+> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
+
 > QQ群 976962720

 ### ✨ 新功能
- 添加远程控制功能，支持使用局域网链接地址远程控制音乐播放操作（默认关闭需要在设置中开启） ([c82ffd0](https://github.com/algerkong/AlgerMusicPlayer/commit/c82ffd0))（#169）
- 更新歌手数据加载逻辑，首页添加周杰伦歌手信息常驻 ([3069514](https://github.com/algerkong/AlgerMusicPlayer/commit/3069514))
+- 增加音源重新解析功能 ([82a69d0](https://github.com/algerkong/AlgerMusicPlayer/commit/82a69d0))
+- 搜索列表添加下一首播放功能，修改播放逻辑搜索的歌曲点击播放不重新覆盖播放列表，添加全部播放功能 ([31640bb](https://github.com/algerkong/AlgerMusicPlayer/commit/31640bb)) (#216)
+- 增加windows和linux对arm64架构的支持([9f125f8](https://github.com/algerkong/AlgerMusicPlayer/commit/9f125f8))
+- 添加"收藏"功能至托盘菜单 ([3c1a144](https://github.com/algerkong/AlgerMusicPlayer/commit/3c1a144))
+- 修改将歌单列表改为页面 ([e2527c3](https://github.com/algerkong/AlgerMusicPlayer/commit/e2527c3))

 ### 🐛 Bug 修复
- 修复音乐播放重复声音的问题，添加锁机制，添加防抖机制，优化音频服务和快捷键处理逻辑 ([159dd03](https://github.com/algerkong/AlgerMusicPlayer/commit/159dd03)) (#173)
- 修复歌手页面数据加载不全问题 ([57424f9](https://github.com/algerkong/AlgerMusicPlayer/commit/57424f9)) (#165)
+- 修复歌曲加入歌单失败问题 ([8045034](https://github.com/algerkong/AlgerMusicPlayer/commit/8045034))

 ### 🎨 优化
- 优化应用图标，更新应用图标资源 ([0128662](https://github.com/algerkong/AlgerMusicPlayer/commit/0128662))
- 优化设置页面，拆分组件 ([c98fa20](https://github.com/algerkong/AlgerMusicPlayer/commit/c98fa20))
- 优化设置模块，合并默认设置与存储设置，初始化时读取设置 ([0a22c7b](https://github.com/algerkong/AlgerMusicPlayer/commit/0a22c7b))
-
+- 优化播放器逻辑，改进播放失败处理，支持保持当前索引并增加重试机制，优化操作锁逻辑，添加超时检查机制，确保操作锁在超时后自动释放，增加超时处理([8ed13d4](https://github.com/algerkong/AlgerMusicPlayer/commit/8ed13d4))、([cb58abb](https://github.com/algerkong/AlgerMusicPlayer/commit/cb58abb)) ([9cc064c](https://github.com/algerkong/AlgerMusicPlayer/commit/9cc064c))
+- 更新 Electron 版本至 36.2.0，优化歌词视图的悬停效果 ([44f9709](https://github.com/algerkong/AlgerMusicPlayer/commit/44f9709))
+- 更新音乐源设置([618c345](https://github.com/algerkong/AlgerMusicPlayer/commit/618c345))
+- 修改 MiniPlayBar 组件，调整音量滑块的样式和交互方式，优化悬停效果 ([31ea3b7](https://github.com/algerkong/AlgerMusicPlayer/commit/31ea3b7))
+- 优化 MvPlayer 组件的关闭逻辑，简化音频暂停处理 ([b3de2ae](https://github.com/algerkong/AlgerMusicPlayer/commit/b3de2ae))、([15f4ea4](https://github.com/algerkong/AlgerMusicPlayer/commit/15f4ea4))
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "AlgerMusicPlayer",
-  "version": "4.5.0",
+  "version": "4.6.0",
  "description": "Alger Music Player",
  "author": "Alger <algerkc@qq.com>",
  "main": "./out/main/index.js",
@@ -56,7 +56,7 @@
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.7",
    "cross-env": "^7.0.3",
-    "electron": "^36.2.0",
+    "electron": "^36.1.0",
    "electron-builder": "^25.1.8",
    "electron-vite": "^3.1.0",
    "eslint": "^9.0.0",
@@ -130,14 +130,13 @@
      ]
    },
    "win": {
-      "icon": "resources/icon.ico",
+      "icon": "resources/favicon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
-            "ia32",
-            "arm64"
+            "ia32"
          ]
        }
      ],
@@ -150,15 +149,13 @@
        {
          "target": "AppImage",
          "arch": [
-            "x64",
-            "arm64"
+            "x64"
          ]
        },
        {
          "target": "deb",
          "arch": [
-            "x64",
-            "arm64"
+            "x64"
          ]
        }
      ],
@@ -169,8 +166,8 @@
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
-      "installerIcon": "resources/icon.ico",
-      "uninstallerIcon": "resources/icon.ico",
+      "installerIcon": "resources/favicon.ico",
+      "uninstallerIcon": "resources/favicon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "AlgerMusicPlayer",
--- a/resources/icon.ico
+++ b/resources/icon.ico
--- a/src/i18n/lang/en-US/common.ts
+++ b/src/i18n/lang/en-US/common.ts
@@ -47,8 +47,7 @@ export default {
    prev: 'Previous',
    next: 'Next',
    pause: 'Pause',
-    play: 'Play',
-    favorite: 'Favorite'
+    play: 'Play'
  },
  language: 'Language'
 };
--- a/src/i18n/lang/en-US/donation.ts
+++ b/src/i18n/lang/en-US/donation.ts
@@ -3,7 +3,5 @@ export default {
    'Your donation will be used to support development and maintenance work, including but not limited to server maintenance, domain name renewal, etc.',
  message: 'You can leave your email or github name when leaving a message.',
  refresh: 'Refresh List',
-  toDonateList: 'Buy me a coffee',
-  title: 'Donation List',
-  noMessage: 'No Message'
+  toDonateList: 'Buy me a coffee'
 };
--- a/src/i18n/lang/en-US/player.ts
+++ b/src/i18n/lang/en-US/player.ts
@@ -29,15 +29,6 @@ export default {
  lrc: {
    noLrc: 'No lyrics, please enjoy'
  },
-  reparse: {
-    title: 'Select Music Source',
-    desc: 'Click a source to directly reparse the current song. This source will be used next time this song plays.',
-    success: 'Reparse successful',
-    failed: 'Reparse failed',
-    warning: 'Please select a music source',
-    bilibiliNotSupported: 'Bilibili videos do not support reparsing',
-    processing: 'Processing...'
-  },
  playBar: {
    expand: 'Expand Lyrics',
    collapse: 'Collapse Lyrics',
@@ -46,7 +37,6 @@ export default {
    noSongPlaying: 'No song playing',
    eq: 'Equalizer',
    playList: 'Play List',
-    reparse: 'Reparse',
    playMode: {
      sequence: 'Sequence',
      loop: 'Loop',
--- a/src/i18n/lang/zh-CN/common.ts
+++ b/src/i18n/lang/zh-CN/common.ts
@@ -47,7 +47,6 @@ export default {
    prev: '上一首',
    next: '下一首',
    pause: '暂停',
-    play: '播放',
-    favorite: '收藏'
+    play: '播放'
  }
 };
--- a/src/i18n/lang/zh-CN/donation.ts
+++ b/src/i18n/lang/zh-CN/donation.ts
@@ -2,7 +2,5 @@ export default {
  description: '您的捐赠将用于支持开发和维护工作，包括但不限于服务器维护、域名续费等。',
  message: '留言时可留下您的邮箱或 github名称。',
  refresh: '刷新列表',
-  toDonateList: '请我喝咖啡',
-  noMessage: '暂无留言',
-  title: '捐赠列表'
+  toDonateList: '请我喝咖啡'
 };
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -29,15 +29,6 @@ export default {
  lrc: {
    noLrc: '暂无歌词, 请欣赏'
  },
-  reparse: {
-    title: '选择解析音源',
-    desc: '点击音源直接进行解析，下次播放此歌曲时将使用所选音源',
-    success: '重新解析成功',
-    failed: '重新解析失败',
-    warning: '请选择一个音源',
-    bilibiliNotSupported: 'B站视频不支持重新解析',
-    processing: '解析中...'
-  },
  playBar: {
    expand: '展开歌词',
    collapse: '收起歌词',
@@ -46,7 +37,6 @@ export default {
    noSongPlaying: '没有正在播放的歌曲',
    eq: '均衡器',
    playList: '播放列表',
-    reparse: '重新解析',
    playMode: {
      sequence: '顺序播放',
      loop: '循环播放',
--- a/src/main/lyric.ts
+++ b/src/main/lyric.ts
@@ -89,8 +89,6 @@ const createWin = () => {
    alwaysOnTop: true,
    resizable: true,
    roundedCorners: false,
-    titleBarStyle: 'hidden',
-    titleBarOverlay: false,
    // 添加跨屏幕支持选项
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
--- a/src/main/modules/tray.ts
+++ b/src/main/modules/tray.ts
@@ -174,18 +174,6 @@ export function updateTrayMenu(mainWindow: BrowserWindow) {
      })
    );

-    // 收藏
-    menu.append(
-      new MenuItem({
-        label: i18n.global.t('common.tray.favorite'),
-        type: 'normal',
-        click: () => {
-          console.log('[Tray] 发送收藏命令 - macOS菜单');
-          mainWindow.webContents.send('global-shortcut', 'toggleFavorite');
-        }
-      })
-    );
-
    menu.append(
      new MenuItem({
        label: i18n.global.t('common.tray.next'),
@@ -265,14 +253,6 @@ export function updateTrayMenu(mainWindow: BrowserWindow) {
          mainWindow.show();
        }
      },
-      {
-        label: i18n.global.t('common.tray.favorite'),
-        type: 'normal',
-        click: () => {
-          console.log('[Tray] 发送收藏命令 - Windows/Linux菜单');
-          mainWindow.webContents.send('global-shortcut', 'toggleFavorite');
-        }
-      },
      { type: 'separator' },
      {
        label: i18n.global.t('common.tray.prev'),
--- a/src/main/set.json
+++ b/src/main/set.json
@@ -23,5 +23,5 @@
  "alwaysShowDownloadButton": false,
  "unlimitedDownload": false,
  "enableMusicUnblock": true,
-  "enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "kuwo"]
+  "enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "youtube"]
 }
--- a/src/main/unblockMusic.ts
+++ b/src/main/unblockMusic.ts
@@ -1,6 +1,6 @@
 import match from '@unblockneteasemusic/server';

-type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili';
+type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube';

 interface SongData {
  name: string;
@@ -30,7 +30,7 @@ interface UnblockResult {
 }

 // 所有可用平台
-export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili'];
+export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili', 'youtube'];

 /**
 * 音乐解析函数
@@ -46,16 +46,12 @@ const unblockMusic = async (
  retryCount = 1,
  enabledPlatforms?: Platform[]
 ): Promise<UnblockResult> => {
-  // 过滤 enabledPlatforms，确保只包含 ALL_PLATFORMS 中存在的平台
-  const filteredPlatforms = enabledPlatforms 
-    ? enabledPlatforms.filter(platform => ALL_PLATFORMS.includes(platform))
-    : ALL_PLATFORMS;
-  
+  const platforms = enabledPlatforms || ALL_PLATFORMS;
  songData.album = songData.album || songData.al;
  songData.artists = songData.artists || songData.ar;
  const retry = async (attempt: number): Promise<UnblockResult> => {
    try {
-      const data = await match(parseInt(String(id), 10), filteredPlatforms, songData);
+      const data = await match(parseInt(String(id), 10), platforms,songData);
      const result: UnblockResult = {
        data: {
          data,
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -26,7 +26,6 @@ import { isElectron, isLyricWindow } from '@/utils';
 import { initAudioListeners } from './hooks/MusicHook';
 import { isMobile } from './utils';
 import { useAppShortcuts } from './utils/appShortcuts';
-import { audioService } from './services/audioService';

 const { locale } = useI18n();
 const settingsStore = useSettingsStore();
@@ -120,8 +119,6 @@ onMounted(async () => {
      window.api.sendSong(cloneDeep(playerStore.playMusic));
    }
  }
-
-  audioService.releaseOperationLock();
 });
 </script>

--- a/src/renderer/api/gdmusic.ts
+++ b/src/renderer/api/gdmusic.ts
@@ -28,100 +28,82 @@ export interface ParsedMusicResult {
 * @param id 音乐ID
 * @param data 音乐数据，包含名称和艺术家信息
 * @param quality 音质设置
- * @param timeout 超时时间(毫秒)，默认15000ms
 * @returns 解析后的音乐URL及相关信息
 */
 export const parseFromGDMusic = async (
  id: number, 
  data: any, 
-  quality: string = '999',
-  timeout: number = 15000
+  quality: string = '320'
 ): Promise<ParsedMusicResult | null> => {
-  // 创建一个超时Promise
-  const timeoutPromise = new Promise<null>((_, reject) => {
-    setTimeout(() => {
-      reject(new Error('GD音乐台解析超时'));
-    }, timeout);
-  });
-
  try {
-    // 使用Promise.race竞争主解析流程和超时
-    return await Promise.race([
-      (async () => {
-        // 处理不同数据结构
-        if (!data) {
-          console.error('GD音乐台解析：歌曲数据为空');
-          throw new Error('歌曲数据为空');
-        }
-        
-        const songName = data.name || '';
-        let artistNames = '';
-        
-        // 处理不同的艺术家字段结构
-        if (data.artists && Array.isArray(data.artists)) {
-          artistNames = data.artists.map(artist => artist.name).join(' ');
-        } else if (data.ar && Array.isArray(data.ar)) {
-          artistNames = data.ar.map(artist => artist.name).join(' ');
-        } else if (data.artist) {
-          artistNames = typeof data.artist === 'string' ? data.artist : '';
-        }
-        
-        const searchQuery = `${songName} ${artistNames}`.trim();
-        
-        if (!searchQuery || searchQuery.length < 2) {
-          console.error('GD音乐台解析：搜索查询过短', { name: songName, artists: artistNames });
-          throw new Error('搜索查询过短');
-        }
-        
-        // 所有可用的音乐源 netease、kuwo、joox、tidal
-        const allSources = [
-          'kuwo', 'joox', 'tidal', 'netease'
-        ] as MusicSourceType[];
-        
-        console.log('GD音乐台开始搜索:', searchQuery);
-        
-        // 依次尝试所有音源
-        for (const source of allSources) {
-          try {
-            const result = await searchAndGetUrl(source, searchQuery, quality);
-            if (result) {
-              console.log(`GD音乐台成功通过 ${result.source} 解析音乐!`);
-              // 返回符合原API格式的数据
-              return {
-                data: {
-                  data: {
-                    url: result.url.replace(/\\/g, ''),
-                    br: parseInt(result.br, 10) * 1000 || 320000,
-                    size: result.size || 0,
-                    md5: '',
-                    platform: 'gdmusic',
-                    gain: 0
-                  },
-                  params: {
-                    id: parseInt(String(id), 10),
-                    type: 'song'
-                  }
-                }
-              };
-            }
-          } catch (error) {
-            console.error(`GD音乐台 ${source} 音源解析失败:`, error);
-            // 该音源失败，继续尝试下一个音源
-            continue;
-          }
-        }
-        
-        console.log('GD音乐台所有音源均解析失败');
-        return null;
-      })(),
-      timeoutPromise
-    ]);
-  } catch (error: any) {
-    if (error.message === 'GD音乐台解析超时') {
-      console.error('GD音乐台解析超时(15秒):', error);
-    } else {
-      console.error('GD音乐台解析完全失败:', error);
+    // 处理不同数据结构
+    if (!data) {
+      console.error('GD音乐台解析：歌曲数据为空');
+      throw new Error('歌曲数据为空');
    }
+    
+    const songName = data.name || '';
+    let artistNames = '';
+    
+    // 处理不同的艺术家字段结构
+    if (data.artists && Array.isArray(data.artists)) {
+      artistNames = data.artists.map(artist => artist.name).join(' ');
+    } else if (data.ar && Array.isArray(data.ar)) {
+      artistNames = data.ar.map(artist => artist.name).join(' ');
+    } else if (data.artist) {
+      artistNames = typeof data.artist === 'string' ? data.artist : '';
+    }
+    
+    const searchQuery = `${songName} ${artistNames}`.trim();
+    
+    if (!searchQuery || searchQuery.length < 2) {
+      console.error('GD音乐台解析：搜索查询过短', { name: songName, artists: artistNames });
+      throw new Error('搜索查询过短');
+    }
+    
+    // 所有可用的音乐源
+    const allSources = [
+      'tencent', 'kugou', 'kuwo', 'migu', 'netease', 
+      'joox', 'ytmusic', 'spotify', 'qobuz', 'deezer'
+    ] as MusicSourceType[];
+    
+    console.log('GD音乐台开始搜索:', searchQuery);
+    
+    // 依次尝试所有音源
+    for (const source of allSources) {
+      try {
+        const result = await searchAndGetUrl(source, searchQuery, quality);
+        if (result) {
+          console.log(`GD音乐台成功通过 ${result.source} 解析音乐!`);
+          // 返回符合原API格式的数据
+          return {
+            data: {
+              data: {
+                url: result.url.replace(/\\/g, ''),
+                br: parseInt(result.br, 10) * 1000 || 320000,
+                size: result.size || 0,
+                md5: '',
+                platform: 'gdmusic',
+                gain: 0
+              },
+              params: {
+                id: parseInt(String(id), 10),
+                type: 'song'
+              }
+            }
+          };
+        }
+      } catch (error) {
+        console.error(`GD音乐台 ${source} 音源解析失败:`, error);
+        // 该音源失败，继续尝试下一个音源
+        continue;
+      }
+    }
+    
+    console.log('GD音乐台所有音源均解析失败');
+    return null;
+  } catch (error) {
+    console.error('GD音乐台解析完全失败:', error);
    return null;
  }
 };
--- a/src/renderer/api/music.ts
+++ b/src/renderer/api/music.ts
@@ -88,26 +88,8 @@ export const getParsingMusicUrl = async (id: number, data: any) => {
    return Promise.resolve({ data: { code: 404, message: '音乐解析功能已禁用' } });
  }
  
-  // 获取音源设置，优先使用歌曲自定义音源
-  const songId = String(id);
-  const savedSource = localStorage.getItem(`song_source_${songId}`);
-  let enabledSources: any[] = [];
-  
-  // 如果有歌曲自定义音源，使用自定义音源
-  if (savedSource) {
-    try {
-      enabledSources = JSON.parse(savedSource);
-      console.log(`使用歌曲 ${id} 自定义音源:`, enabledSources);
-    } catch (e) {
-      console.error('解析自定义音源失败, 使用全局设置', e);
-      enabledSources = settingStore.setData.enabledMusicSources || [];
-    }
-  } else {
-    // 没有自定义音源，使用全局音源设置
-    enabledSources = settingStore.setData.enabledMusicSources || [];
-  }
-  
  // 检查是否选择了GD音乐台解析
+  const enabledSources = settingStore.setData.enabledMusicSources || [];
  if (enabledSources.includes('gdmusic')) {
    // 获取音质设置并转换为GD音乐台格式
    try {
@@ -157,47 +139,5 @@ export const updatePlaylistTracks = (params: {
  pid: number;
  tracks: string;
 }) => {
-  return request.post('/playlist/tracks', params);
+  return request.get('/playlist/tracks', { params });
 };
-
-/**
- * 根据类型获取列表数据
- * @param type 列表类型 album/playlist
- * @param id 列表ID
- */
-export function getMusicListByType(type: string, id: string) {
-  if (type === 'album') {
-    return getAlbumDetail(id);
-  } else if (type === 'playlist') {
-    return getPlaylistDetail(id);
-  }
-  return Promise.reject(new Error('未知列表类型'));
-}
-
-/**
- * 获取专辑详情
- * @param id 专辑ID
- */
-export function getAlbumDetail(id: string) {
-  return request({
-    url: '/album',
-    method: 'get',
-    params: {
-      id
-    }
-  });
-}
-
-/**
- * 获取歌单详情
- * @param id 歌单ID
- */
-export function getPlaylistDetail(id: string) {
-  return request({
-    url: '/playlist/detail',
-    method: 'get',
-    params: {
-      id
-    }
-  });
-}
--- a/src/renderer/components/MvPlayer.vue
+++ b/src/renderer/components/MvPlayer.vue
@@ -359,6 +359,9 @@ const loadMvUrl = async (mv: IMvItem) => {

 const handleClose = () => {
  emit('update:show', false);
+  if (playerStore.playMusicUrl) {
+    playerStore.setIsPlay(true);
+  }
 };

 const handleEnded = () => {
--- a/src/renderer/components/common/DonationList.vue
+++ b/src/renderer/components/common/DonationList.vue
@@ -1,44 +1,6 @@
 <template>
  <div class="donation-container">
-    <div class="qrcode-container">
-      <div class="description">
-        <p>{{ t('donation.description') }}</p>
-        <p>{{ t('donation.message') }}</p>
-      </div>
-      <div class="qrcode-grid">
-        <div class="qrcode-item">
-          <n-image
-            :src="alipay"
-            :alt="t('common.alipay')"
-            class="qrcode-image"
-            preview-disabled
-          />
-          <span class="qrcode-label">{{ t('common.alipay') }}</span>
-        </div>
-        
-        <div class="donate-button">
-          <n-button type="primary" @click="toDonateList">
-            <template #icon>
-              <i class="ri-cup-line"></i>
-            </template>
-            {{ t('donation.toDonateList') }}
-          </n-button>
-        </div>
-        
-        <div class="qrcode-item">
-          <n-image
-            :src="wechat"
-            :alt="t('common.wechat')"
-            class="qrcode-image"
-            preview-disabled
-          />
-          <span class="qrcode-label">{{ t('common.wechat') }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="header-container">
-      <h3 class="section-title">{{ t('donation.title') }}</h3>
+    <div class="refresh-container">
      <n-button secondary round size="small" :loading="isLoading" @click="fetchDonors">
        <template #icon>
          <i class="ri-refresh-line"></i>
@@ -46,13 +8,15 @@
        {{ t('donation.refresh') }}
      </n-button>
    </div>
-    
    <div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
      <div
-        v-for="donor in displayDonors"
+        v-for="(donor, index) in displayDonors"
        :key="donor.id"
-        class="donation-card"
-        :class="{ 'no-message': !donor.message }"
+        class="donation-card animate__animated"
+        :class="getAnimationClass(index)"
+        :style="{ animationDelay: `${index * 0.1}s` }"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
      >
        <div class="card-content">
          <div class="donor-avatar">
@@ -60,45 +24,46 @@
              :src="donor.avatar"
              :fallback-src="defaultAvatar"
              round
-              class="avatar-img"
+              size="large"
+              class="animate__animated animate__pulse animate__infinite avatar-img"
            />
+            <div class="donor-badge" :class="getBadgeClass(donor.badge)">
+              {{ donor.badge }}
+            </div>
          </div>
          <div class="donor-info">
-            <div class="donor-meta">
-              <div class="donor-name">{{ donor.name }}</div>
-              <div class="price-tag">￥{{ donor.amount }}</div>
+            <div class="donor-name">{{ donor.name }}</div>
+            <div class="donation-meta">
+              <n-tag
+                :type="getAmountTagType(donor.amount)"
+                size="small"
+                class="donation-amount animate__animated"
+                round
+                bordered
+              >
+                ￥{{ donor.amount }}
+              </n-tag>
+              <span class="donation-date">{{ donor.date }}</span>
            </div>
-            <div class="donation-date">{{ donor.date }}</div>
          </div>
        </div>
-        
-        <!-- 有留言的情况 -->
-        <n-popover
-          v-if="donor.message"
-          trigger="hover"
-          placement="bottom"
-          :show-arrow="true"
-          :width="240"
-        >
-          <template #trigger>
-            <div class="donation-message">
+        <div v-if="donor.message" class="donation-message">
+          <n-popover trigger="hover" placement="bottom">
+            <template #trigger>
+              <div class="message-content">
+                <i class="ri-double-quotes-l quote-icon"></i>
+                <div class="message-text">{{ donor.message }}</div>
+                <i class="ri-double-quotes-r quote-icon"></i>
+              </div>
+            </template>
+            <div class="message-popup">
              <i class="ri-double-quotes-l quote-icon"></i>
-              <span class="message-text">{{ donor.message }}</span>
+              {{ donor.message }}
              <i class="ri-double-quotes-r quote-icon"></i>
            </div>
-          </template>
-          <div class="message-popover">
-            <i class="ri-double-quotes-l quote-icon"></i>
-            <span>{{ donor.message }}</span>
-            <i class="ri-double-quotes-r quote-icon"></i>
-          </div>
-        </n-popover>
-        
-        <!-- 没有留言的情况显示占位符 -->
-        <div v-else class="donation-message-placeholder">
-          <i class="ri-emotion-line"></i>
-          <span>{{ t('donation.noMessage') }}</span>
+          </n-popover>
        </div>
+        <div class="card-sparkles"></div>
      </div>
    </div>

@@ -110,6 +75,40 @@
        {{ isExpanded ? t('common.collapse') : t('common.expand') }}
      </n-button>
    </div>
+
+    <div class="p-6 rounded-lg shadow-lg">
+      <div class="description text-center text-sm text-gray-700 dark:text-gray-200">
+        <p>{{ t('donation.description') }}</p>
+        <p>{{ t('donation.message') }}</p>
+      </div>
+      <div class="flex justify-between mt-6">
+        <div class="flex flex-col items-center gap-2">
+          <n-image
+            :src="alipay"
+            :alt="t('common.alipay')"
+            class="w-60 h-60 rounded-lg cursor-none"
+            preview-disabled
+          />
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.alipay') }}</span>
+        </div>
+        <n-button type="primary" @click="toDonateList">
+          <template #icon>
+            <i class="ri-cup-line"></i>
+          </template>
+          {{ t('donation.toDonateList') }}
+          <i class="ri-arrow-right-s-line"></i>
+        </n-button>
+        <div class="flex flex-col items-center gap-2">
+          <n-image
+            :src="wechat"
+            :alt="t('common.wechat')"
+            class="w-60 h-60 rounded-lg cursor-none"
+            preview-disabled
+          />
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.wechat') }}</span>
+        </div>
+      </div>
+    </div>
  </div>
 </template>

@@ -153,9 +152,72 @@ onActivated(() => {
  fetchDonors();
 });

-// 只按金额排序的捐赠列表
+// 动画类名列表
+const animationClasses = [
+  'animate__fadeInUp',
+  'animate__fadeInLeft',
+  'animate__fadeInRight',
+  'animate__zoomIn'
+];
+
+// 获取随机动画类名
+const getAnimationClass = (index: number) => {
+  return animationClasses[index % animationClasses.length];
+};
+
+// 根据金额获取标签类型
+const getAmountTagType = (amount: number): 'success' | 'warning' | 'error' | 'info' => {
+  if (amount >= 5) return 'warning';
+  if (amount >= 2) return 'success';
+  return 'info';
+};
+
+// 获取徽章样式类名
+const getBadgeClass = (badge: string): string => {
+  if (badge.includes('金牌')) return 'badge-gold';
+  if (badge.includes('银牌')) return 'badge-silver';
+  return 'badge-bronze';
+};
+
+// 鼠标悬停效果
+const handleMouseEnter = (event: MouseEvent) => {
+  const card = event.currentTarget as HTMLElement;
+  card.style.transform = 'translateY(-2px)';
+  card.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.12)';
+
+  // 添加金额标签动画
+  const amountTag = card.querySelector('.donation-amount');
+  if (amountTag) {
+    amountTag.classList.add('animate__tada');
+  }
+};
+
+const handleMouseLeave = (event: MouseEvent) => {
+  const card = event.currentTarget as HTMLElement;
+  card.style.transform = 'translateY(0)';
+  card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.08)';
+
+  // 移除金额标签动画
+  const amountTag = card.querySelector('.donation-amount');
+  if (amountTag) {
+    amountTag.classList.remove('animate__tada');
+  }
+};
+
+// 按金额和留言排序的捐赠列表
 const sortedDonors = computed(() => {
-  return [...donors.value].sort((a, b) => b.amount - a.amount);
+  return [...donors.value].sort((a, b) => {
+    // 如果一个有留言一个没有，有留言的排在前面
+    if (a.message && !b.message) return -1;
+    if (!a.message && b.message) return 1;
+
+    // 都有留言或都没有留言时，按金额从大到小排序
+    const amountDiff = b.amount - a.amount;
+    if (amountDiff !== 0) return amountDiff;
+
+    // 金额相同时，按日期从新到旧排序
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
 });

 const isExpanded = ref(false);
@@ -178,21 +240,13 @@ const toDonateList = () => {

 <style lang="scss" scoped>
 .donation-container {
-  @apply w-full overflow-hidden flex flex-col gap-4;
-}
-
-.header-container {
-  @apply flex justify-between items-center px-4 py-2;
-  
-  .section-title {
-    @apply text-lg font-medium text-gray-700 dark:text-gray-200;
-  }
+  @apply w-full overflow-hidden;
 }

 .donation-grid {
-  @apply grid gap-3 transition-all duration-300 overflow-hidden;
+  @apply grid gap-3 px-2 py-3 transition-all duration-300 overflow-hidden;
  grid-template-columns: repeat(2, 1fr);
-  max-height: 320px;
+  max-height: 280px;

  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
@@ -208,142 +262,127 @@ const toDonateList = () => {
 }

 .donation-card {
-  @apply rounded-lg p-2.5 transition-all duration-200 hover:shadow-md;
-  @apply bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm;
-  @apply border border-gray-200 dark:border-gray-700/10;
-  @apply flex flex-col justify-between;
-  min-height: 100px;
-  
-  &.no-message {
-    @apply justify-between;
-  }
-  
+  @apply relative rounded-lg p-3 min-w-0 w-full transition-all duration-500 shadow-md backdrop-blur-md;
+  @apply bg-gradient-to-br from-white/[0.03] to-white/[0.08] border border-white/[0.08];
+  @apply hover:shadow-lg;
+
  .card-content {
-    @apply flex items-start gap-2 mb-2;
+    @apply relative z-10 flex items-start gap-3;
  }
-}

-.donor-avatar {
-  @apply relative flex-shrink-0;
+  .donor-avatar {
+    @apply relative flex-shrink-0 w-10 h-9 transition-transform duration-300;

-  .avatar-img {
-    @apply border border-gray-200 dark:border-gray-700/10 shadow-sm;
-    @apply w-9 h-9;
+    .avatar-img {
+      @apply border border-white/20 dark:border-gray-800/50 shadow-sm;
+      @apply w-10 h-9;
+    }
  }
-}

-.donor-info {
-  @apply flex-1 min-w-0 flex flex-col justify-center;
+  .donor-badge {
+    @apply absolute -bottom-2 -right-1 px-1.5 py-0.5 text-xs font-medium text-white/90 rounded-full whitespace-nowrap;
+    @apply bg-gradient-to-r from-pink-400 to-pink-500 shadow-sm opacity-90 scale-90;
+    @apply transition-all duration-300;
+  }
+
+  .donor-info {
+    @apply flex-1 min-w-0;

-  .donor-meta {
-    @apply flex justify-between items-center mb-0.5;
-    
    .donor-name {
-      @apply text-sm font-medium truncate flex-1 mr-1;
+      @apply text-sm font-medium mb-0.5 truncate;
    }
-    
-    .price-tag {
-      @apply text-xs text-gray-400/80 dark:text-gray-500/80 whitespace-nowrap;
+
+    .donation-meta {
+      @apply flex items-center gap-2 mb-1;
+
+      .donation-date {
+        @apply text-xs text-gray-400/80 dark:text-gray-500/80;
+      }
    }
  }

-  .donation-date {
-    @apply text-xs text-gray-400/60 dark:text-gray-500/60;
-  }
-}
+  .donation-message {
+    @apply text-sm text-gray-600 dark:text-gray-300 leading-relaxed mt-3 w-full;

-.donation-message {
-  @apply text-xs text-gray-500 dark:text-gray-400 italic mt-1 px-2 py-1.5;
-  @apply bg-gray-100/10 dark:bg-dark-300 rounded;
-  @apply flex items-start;
-  @apply cursor-pointer transition-all duration-200;
-  
-  .quote-icon {
-    @apply text-gray-300 dark:text-gray-600 flex-shrink-0 opacity-60;
-    
-    &:first-child {
-      @apply mr-1 self-start;
+    .message-content {
+      @apply relative p-2 rounded-lg transition-all duration-300 cursor-pointer;
+      @apply bg-white/[0.02] hover:bg-[var(--n-color)];
+
+      .message-text {
+        @apply px-6 italic line-clamp-2;
+      }
+
+      .quote-icon {
+        @apply absolute text-gray-400/60 dark:text-gray-500/60 text-sm;
+
+        &:first-child {
+          @apply left-0.5 top-2;
+        }
+
+        &:last-child {
+          @apply right-0.5 bottom-2;
+        }
+      }
    }
-    
-    &:last-child {
-      @apply ml-1 self-end;
-    }
-  }
-  
-  .message-text {
-    @apply flex-1 line-clamp-2;
  }

  &:hover {
-    @apply bg-gray-100/40 dark:bg-dark-200;
+    .donor-avatar {
+      @apply scale-105 rotate-3;
+    }
+
+    .donor-badge {
+      @apply scale-95 -translate-y-0.5;
+    }
+
+    .card-sparkles {
+      @apply opacity-60 scale-110;
+    }
  }
 }

-.donation-message-placeholder {
-  @apply text-xs text-gray-400 dark:text-gray-500 mt-1 px-2 py-1.5;
-  @apply bg-gray-100/5 dark:bg-dark-300 rounded;
-  @apply flex items-center justify-center gap-1 italic;
-  @apply border border-transparent;
-  
-  i {
-    @apply text-gray-300 dark:text-gray-600;
+.card-sparkles {
+  @apply absolute inset-0 pointer-events-none opacity-0 transition-all duration-500;
+  background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2.5px 2.5px at 50px 160px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2.5px 2.5px at 130px 80px, rgba(255, 255, 255, 0.95), transparent);
+  background-size: 200% 200%;
+  animation: sparkle 8s ease infinite;
+}
+
+@keyframes sparkle {
+  0%,
+  100% {
+    @apply bg-[0%_0%] opacity-40 scale-100;
+  }
+  50% {
+    @apply bg-[100%_100%] opacity-80 scale-110;
  }
 }

-.message-popover {
-  @apply text-sm text-gray-700 dark:text-gray-200 italic p-2;
-  @apply flex items-start;
-
-  .quote-icon {
-    @apply text-gray-400 dark:text-gray-500 flex-shrink-0;
-    
-    &:first-child {
-      @apply mr-1.5 self-start;
-    }
-    
-    &:last-child {
-      @apply ml-1.5 self-end;
-    }
-  }
+.refresh-container {
+  @apply flex justify-end px-2 py-2;
 }

 .expand-button {
  @apply flex justify-center items-center py-2;

  :deep(.n-button) {
-    @apply transition-all duration-200 hover:-translate-y-0.5;
+    @apply transition-all duration-300 hover:-translate-y-0.5;
  }
 }

-.qrcode-container {
-  @apply p-5 rounded-lg shadow-sm bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm border border-gray-200 dark:border-gray-700/10;
-  
-  .description {
-    @apply text-center text-sm text-gray-600 dark:text-gray-300 mb-4;
-    
-    p {
-      @apply mb-2;
-    }
-  }
-  
-  .qrcode-grid {
-    @apply flex justify-between items-center gap-4;
-    
-    .qrcode-item {
-      @apply flex flex-col items-center gap-2;
-      
-      .qrcode-image {
-        @apply w-36 h-36 rounded-lg border border-gray-200 dark:border-gray-700/10 shadow-sm transition-transform duration-200 hover:scale-105;
-      }
-      
-      .qrcode-label {
-        @apply text-sm text-gray-600 dark:text-gray-300;
-      }
-    }
-    
-    .donate-button {
-      @apply flex flex-col items-center justify-center;
-    }
+.message-popup {
+  @apply relative px-4 py-2 text-sm;
+  max-width: 300px;
+  line-height: 1.6;
+  font-style: italic;
+
+  .quote-icon {
+    @apply text-gray-400/60 dark:text-gray-500/60;
+    font-size: 0.9rem;
  }
 }
 </style>
--- a/src/renderer/components/common/MusicListNavigator.ts
+++ b/src/renderer/components/common/MusicListNavigator.ts
@@ -1,38 +0,0 @@
-import { Router } from 'vue-router';
-import { useMusicStore } from '@/store/modules/music';
-
-/**
- * 导航到音乐列表页面的通用方法
- * @param router Vue路由实例
- * @param options 导航选项
- */
-export function navigateToMusicList(
-  router: Router,
-  options: {
-    id?: string | number;
-    type?: 'album' | 'playlist' | 'dailyRecommend' | string;
-    name: string;
-    songList: any[];
-    listInfo?: any;
-    canRemove?: boolean;
-  }
-) {
-  const musicStore = useMusicStore();
-  const { id, type, name, songList, listInfo, canRemove = false } = options;
-
-  // 保存数据到状态管理
-  musicStore.setCurrentMusicList(songList, name, listInfo, canRemove);
-
-  // 路由跳转
-  if (id) {
-    router.push({
-      name: 'musicList',
-      params: { id },
-      query: { type }
-    });
-  } else {
-    router.push({
-      name: 'musicList'
-    });
-  }
-} 
--- a/src/renderer/components/common/PlayBottom.vue
+++ b/src/renderer/components/common/PlayBottom.vue
@@ -1,12 +1,11 @@
 <template>
-  <div v-if="isPlay && !isMobile" class="bottom" :style="{ height }"></div>
+  <div v-if="isPlay" class="bottom" :style="{ height }"></div>
 </template>

 <script setup lang="ts">
 import { computed } from 'vue';

 import { usePlayerStore } from '@/store/modules/player';
-import { isMobile } from '@/utils';

 const playerStore = usePlayerStore();
 const isPlay = computed(() => playerStore.playMusicUrl);
--- a/src/renderer/components/common/SearchItem.vue
+++ b/src/renderer/components/common/SearchItem.vue
@@ -21,6 +21,15 @@
      <span>{{ item.size }}</span>
    </div>

+    <music-list
+      v-if="['专辑', 'playlist'].includes(item.type)"
+      v-model:show="showPop"
+      :name="item.name"
+      :song-list="songList"
+      :list-info="listInfo"
+      :cover="false"
+      :z-index="zIndex"
+    />
    <mv-player
      v-if="item.type === 'mv'"
      v-model:show="showPop"
@@ -37,8 +46,8 @@ import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';
-import { useRouter } from 'vue-router';
-import { useMusicStore } from '@/store/modules/music';
+
+import MusicList from '../MusicList.vue';

 const props = withDefaults(
  defineProps<{
@@ -63,8 +72,6 @@ const showPop = ref(false);
 const listInfo = ref<any>(null);

 const playerStore = usePlayerStore();
-const router = useRouter();
-const musicStore = useMusicStore();

 const getCurrentMv = () => {
  return {
@@ -76,6 +83,7 @@ const getCurrentMv = () => {
 const handleClick = async () => {
  listInfo.value = null;
  if (props.item.type === '专辑') {
+    showPop.value = true;
    const res = await getAlbum(props.item.id);
    songList.value = res.data.songs.map((song: any) => {
      song.al.picUrl = song.al.picUrl || props.item.picUrl;
@@ -89,41 +97,16 @@ const handleClick = async () => {
      },
      description: res.data.album.description
    };
-    
-    // 保存数据到store
-    musicStore.setCurrentMusicList(
-      songList.value, 
-      props.item.name, 
-      listInfo.value, 
-      false
-    );
-    
-    // 使用路由跳转
-    router.push({
-      name: 'musicList',
-      params: { id: props.item.id },
-      query: { type: 'album' }
-    });
-  } else if (props.item.type === 'playlist') {
+  }
+
+  if (props.item.type === 'playlist') {
+    showPop.value = true;
    const res = await getListDetail(props.item.id);
    songList.value = res.data.playlist.tracks;
    listInfo.value = res.data.playlist;
-    
-    // 保存数据到store
-    musicStore.setCurrentMusicList(
-      songList.value, 
-      props.item.name, 
-      listInfo.value, 
-      false
-    );
-    
-    // 使用路由跳转
-    router.push({
-      name: 'musicList',
-      params: { id: props.item.id },
-      query: { type: 'playlist' }
-    });
-  } else if (props.item.type === 'mv') {
+  }
+
+  if (props.item.type === 'mv') {
    handleShowMv();
  }
 };
--- a/src/renderer/components/home/RecommendAlbum.vue
+++ b/src/renderer/components/home/RecommendAlbum.vue
@@ -22,19 +22,26 @@
        </div>
      </template>
    </div>
+    <music-list
+      v-model:show="showMusic"
+      :name="albumName"
+      :song-list="songList"
+      :cover="true"
+      :loading="loadingList"
+      :list-info="albumInfo"
+    />
  </div>
 </template>

 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';

 import { getNewAlbum } from '@/api/home';
 import { getAlbum } from '@/api/list';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import MusicList from '@/components/MusicList.vue';
 import type { IAlbumNew } from '@/type/album';
+import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';

 const { t } = useI18n();
 const albumData = ref<IAlbumNew>();
@@ -43,42 +50,33 @@ const loadAlbumList = async () => {
  albumData.value = data;
 };

-const router = useRouter();
-
+const showMusic = ref(false);
+const songList = ref([]);
+const albumName = ref('');
+const loadingList = ref(false);
+const albumInfo = ref<any>({});
 const handleClick = async (item: any) => {
-  openAlbum(item);
-};
-
-const openAlbum = async (album: any) => {
-  if (!album) return;
-  
-  try {
-    const res = await getAlbum(album.id);
-    const { songs, album: albumInfo } = res.data;
-    
-    const formattedSongs = songs.map((song: any) => {
-      song.al.picUrl = song.al.picUrl || albumInfo.picUrl;
-      song.picUrl = song.al.picUrl || albumInfo.picUrl || song.picUrl;
-      return song;
-    });
-    
-    navigateToMusicList(router, {
-      id: album.id,
-      type: 'album',
-      name: album.name,
-      songList: formattedSongs,
-      listInfo: {
-        ...albumInfo,
-        creator: {
-          avatarUrl: albumInfo.artist.img1v1Url,
-          nickname: `${albumInfo.artist.name} - ${albumInfo.company}`
-        },
-        description: albumInfo.description
-      }
-    });
-  } catch (error) {
-    console.error('获取专辑详情失败:', error);
-  }
+  songList.value = [];
+  albumInfo.value = {};
+  albumName.value = item.name;
+  loadingList.value = true;
+  showMusic.value = true;
+  const res = await getAlbum(item.id);
+  const { songs, album } = res.data;
+  songList.value = songs.map((song: any) => {
+    song.al.picUrl = song.al.picUrl || album.picUrl;
+    song.picUrl = song.al.picUrl || album.picUrl || song.picUrl;
+    return song;
+  });
+  albumInfo.value = {
+    ...album,
+    creator: {
+      avatarUrl: album.artist.img1v1Url,
+      nickname: `${album.artist.name} - ${album.company}`
+    },
+    description: album.description
+  };
+  loadingList.value = false;
 };

 onMounted(() => {
--- a/src/renderer/components/home/TopBanner.vue
+++ b/src/renderer/components/home/TopBanner.vue
@@ -23,7 +23,7 @@
            ></div>
            <div
              class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
-              @click="showDayRecommend"
+              @click="showMusic = true"
            >
              <div class="font-bold text-lg">
                {{ t('comp.recommendSinger.title') }}
@@ -57,7 +57,7 @@
                v-for="item in userPlaylist"
                :key="item.id"
                class="user-play-item"
-                @click="openPlaylist(item)"
+                @click="toPlaylist(item.id)"
              >
                <div class="user-play-item-img">
                  <img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="" />
@@ -124,18 +124,35 @@
        </n-carousel-item>
      </n-carousel>
    </div>
+
+    <music-list
+      v-if="dayRecommendData?.dailySongs.length"
+      v-model:show="showMusic"
+      :name="t('comp.recommendSinger.songlist')"
+      :song-list="dayRecommendData?.dailySongs"
+      :cover="false"
+    />
+
+    <!-- 添加用户歌单弹窗 -->
+    <music-list
+      v-model:show="showPlaylist"
+      v-model:loading="playlistLoading"
+      :name="playlistItem?.name || ''"
+      :song-list="playlistDetail?.playlist?.tracks || []"
+      :list-info="playlistDetail?.playlist"
+    />
  </div>
 </template>

 <script lang="ts" setup>
 import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';

 import { getDayRecommend, getHotSinger } from '@/api/home';
 import { getListDetail } from '@/api/list';
 import { getMusicDetail } from '@/api/music';
 import { getUserPlaylist } from '@/api/user';
+import MusicList from '@/components/MusicList.vue';
 import { useArtist } from '@/hooks/useArtist';
 import { usePlayerStore, useUserStore } from '@/store';
 import { IDayRecommend } from '@/type/day_recommend';
@@ -151,20 +168,20 @@ import {
  setBackgroundImg
 } from '@/utils';
 import { getArtistDetail } from '@/api/artist';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';

 const userStore = useUserStore();
 const playerStore = usePlayerStore();
-const router = useRouter();

 const { t } = useI18n();

 // 歌手信息
 const hotSingerData = ref<IHotSinger>();
 const dayRecommendData = ref<IDayRecommend>();
+const showMusic = ref(false);
 const userPlaylist = ref<Playlist[]>([]);

 // 为歌单弹窗添加的状态
+const showPlaylist = ref(false);
 const playlistLoading = ref(false);
 const playlistItem = ref<Playlist | null>(null);
 const playlistDetail = ref<IListDetail | null>(null);
@@ -289,34 +306,27 @@ const handleArtistClick = (id: number) => {
  navigateToArtist(id);
 };

-const showDayRecommend = () => {
-  if (!dayRecommendData.value?.dailySongs) return;
-  
-  navigateToMusicList(router, {
-    type: 'dailyRecommend',
-    name: t('comp.recommendSinger.songlist'),
-    songList: dayRecommendData.value.dailySongs,
-    canRemove: false
-  });
-};
-
-const openPlaylist = (item: any) => {
-  playlistItem.value = item;
+const toPlaylist = async (id: number) => {
  playlistLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
-    playlistDetail.value = res.data;
+  playlistItem.value = null;
+  playlistDetail.value = null;
+  showPlaylist.value = true;
+
+  // 设置当前点击的歌单信息
+  const selectedPlaylist = userPlaylist.value.find((item) => item.id === id);
+  if (selectedPlaylist) {
+    playlistItem.value = selectedPlaylist;
+  }
+
+  try {
+    // 获取歌单详情
+    const { data } = await getListDetail(id);
+    playlistDetail.value = data;
+  } catch (error) {
+    console.error('获取歌单详情失败:', error);
+  } finally {
    playlistLoading.value = false;
-    
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: false
-    });
-  });
+  }
 };

 // 添加直接播放歌单的方法
--- a/src/renderer/components/player/MiniPlayBar.vue
+++ b/src/renderer/components/player/MiniPlayBar.vue
@@ -31,34 +31,34 @@

      <!-- 控制按钮区域 -->
      <div class="control-buttons">
-        <div class="control-button previous" @click="handlePrev">
+        <button class="control-button previous" @click="handlePrev">
          <i class="iconfont icon-prev"></i>
-        </div>
-        <div class="control-button play" @click="playMusicEvent">
+        </button>
+        <button class="control-button play" @click="playMusicEvent">
          <i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
-        </div>
-        <div class="control-button next" @click="handleNext">
+        </button>
+        <button class="control-button next" @click="handleNext">
          <i class="iconfont icon-next"></i>
-        </div>
+        </button>
      </div>

      <!-- 右侧功能按钮 -->
      <div class="function-buttons">
-        <div class="function-button">
+        <button class="function-button">
          <i
            class="iconfont icon-likefill"
            :class="{ 'like-active': isFavorite }"
            @click="toggleFavorite"
          ></i>
-        </div>
+        </button>

-        <n-popover trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
+        <n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
          <template #trigger>
-            <div class="function-button" @click="mute">
+            <button class="function-button" @click="mute">
              <i class="iconfont" :class="getVolumeIcon"></i>
-            </div>
+            </button>
          </template>
-          <div class="volume-slider-wrapper transparent-popover">
+          <div class="volume-slider-wrapper">
            <n-slider
              v-model:value="volumeSlider"
              :step="0.01"
@@ -69,15 +69,15 @@
        </n-popover>

        <!-- 播放列表按钮 -->
-        <div v-if="!component" class="function-button" @click="togglePlaylist">
+        <button v-if="!component" class="function-button" @click="togglePlaylist">
          <i class="iconfont icon-list"></i>
-        </div>
+        </button>
      </div>

      <!-- 关闭按钮 -->
-      <div v-if="!component" class="close-button" @click="handleClose">
+      <button v-if="!component" class="close-button" @click="handleClose">
        <i class="iconfont ri-close-line"></i>
-      </div>
+      </button>
    </div>

    <!-- 进度条 -->
@@ -459,7 +459,7 @@ const setMusicFull = () => {
 }

 .control-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600;
  width: 32px;
  height: 32px;

@@ -484,9 +484,10 @@ const setMusicFull = () => {
 }

 .function-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
  width: 32px;
  height: 32px;
+  color: var(--text-color-2, #666);

  &:hover {
    @apply bg-gray-100 dark:bg-dark-300;
@@ -545,7 +546,8 @@ const setMusicFull = () => {
 }

 .volume-slider-wrapper {
-  @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
+  @apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
+  width: 40px;
  height: 160px;
 }

@@ -606,8 +608,4 @@ const setMusicFull = () => {
    }
  }
 }
-
-:deep(.n-popover){
-  background-color: transparent !important;
-}
 </style>
--- a/src/renderer/components/player/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -39,9 +39,6 @@
        lazy
        preview-disabled
      />
-      <div v-if="playMusic?.playLoading" class="loading-overlay">
-        <i class="ri-loader-4-line loading-icon"></i>
-      </div>
      <div class="hover-arrow">
        <div class="hover-content">
          <!-- <i class="ri-arrow-up-s-line text-3xl" :class="{ 'ri-arrow-down-s-line': musicFullVisible }"></i> -->
@@ -127,12 +124,6 @@
        </template>
        {{ playMusic.id ? t('player.playBar.lyric') : t('player.playBar.noSongPlaying') }}
      </n-tooltip>
-      <n-tooltip v-if="playMusic.id && isElectron" trigger="hover" :z-index="9999999">
-        <template #trigger>
-          <reparse-popover v-if="playMusic.id" />
-        </template>
-        {{ t('player.playBar.reparse') }}
-      </n-tooltip>
      <n-popover
        v-if="isElectron"
        trigger="click"
@@ -206,7 +197,6 @@ import { useI18n } from 'vue-i18n';
 import SongItem from '@/components/common/SongItem.vue';
 import EqControl from '@/components/EQControl.vue';
 import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
-import ReparsePopover from '@/components/player/ReparsePopover.vue';
 import {
  allTime,
  artistList,
@@ -583,10 +573,10 @@ const handleDeleteSong = (song: SongResult) => {
 }

 .audio-button {
-  @apply flex items-center;
+  @apply flex items-center mx-4;

  .iconfont {
-    @apply text-2xl transition cursor-pointer mx-3;
+    @apply text-2xl transition cursor-pointer m-4;
    @apply hover:text-green-500;
  }
 }
@@ -768,25 +758,4 @@ const handleDeleteSong = (song: SongResult) => {
    }
  }
 }
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-overlay {
-  @apply absolute inset-0 flex items-center justify-center rounded-2xl;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
-}
-
-.loading-icon {
-  font-size: 24px;
-  color: white;
-  animation: spin 1s linear infinite;
-}
 </style>
--- a/src/renderer/components/player/ReparsePopover.vue
+++ b/src/renderer/components/player/ReparsePopover.vue
@@ -1,233 +0,0 @@
-<template>
-  <n-popover
-    trigger="click"
-    :z-index="99999999"
-    placement="top"
-    content-class="music-source-popover"
-    raw
-    :show-arrow="false"
-    :delay="200"
-  >
-    <template #trigger>
-      <n-tooltip trigger="hover" :z-index="9999999">
-        <template #trigger>
-          <i 
-            class="iconfont ri-refresh-line"
-            :class="{ 'text-green-500': isReparse, 'animate-spin': isReparsing }" 
-          ></i>
-        </template>
-        {{ t('player.playBar.reparse') }}
-      </n-tooltip>
-    </template>
-    <div class="reparse-popover bg-light-100 dark:bg-dark-100 p-4 rounded-xl max-w-60">
-      <div class="text-base font-medium mb-2">{{ t('player.reparse.title') }}</div>
-      <div class="text-sm opacity-70 mb-3">{{ t('player.reparse.desc') }}</div>
-      <div class="mb-3">
-        <div class="flex flex-col space-y-2">
-          <div 
-            v-for="source in musicSourceOptions" 
-            :key="source.value"
-            class="source-button flex items-center p-2 rounded-lg cursor-pointer transition-all duration-200 bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300"
-            :class="{ 
-              'bg-green-50 dark:bg-green-900/20 text-green-500': isCurrentSource(source.value),
-              'opacity-50 cursor-not-allowed': isReparsing || playMusic.source === 'bilibili'
-            }"
-            @click="directReparseMusic(source.value)"
-          >
-            <div class="flex items-center justify-center w-6 h-6 mr-3 text-lg">
-              <i :class="getSourceIcon(source.value)"></i>
-            </div>
-            <div class="flex-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis">
-              {{ source.label }}
-            </div>
-            <div v-if="isReparsing && currentReparsingSource === source.value" class="w-5 h-5 flex items-center justify-center">
-              <i class="ri-loader-4-line animate-spin"></i>
-            </div>
-            <div v-else-if="isCurrentSource(source.value)" class="w-5 h-5 flex items-center justify-center">
-              <i class="ri-check-line"></i>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-if="playMusic.source === 'bilibili'" class="text-red-500 text-sm">
-        {{ t('player.reparse.bilibiliNotSupported') }}
-      </div>
-    </div>
-  </n-popover>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessage } from 'naive-ui';
-import { playMusic } from '@/hooks/MusicHook';
-import { usePlayerStore } from '@/store/modules/player';
-import type { Platform } from '@/types/music';
-import { audioService } from '@/services/audioService';
-
-const playerStore = usePlayerStore();
-const { t } = useI18n();
-const message = useMessage();
-
-// 音源重新解析状态
-const isReparsing = ref(false);
-const currentReparsingSource = ref<Platform | null>(null);
-
-// 实际存储选中音源的值
-const selectedSourcesValue = ref<Platform[]>([]);
-
-// 判断当前歌曲是否有自定义解析记录
-const isReparse = computed(() => {
-  const songId = String(playMusic.value.id);
-  return localStorage.getItem(`song_source_${songId}`) !== null;
-});
-
-// 可选音源列表
-const musicSourceOptions = ref([
-  { label: 'MiGu音乐', value: 'migu' as Platform },
-  { label: '酷狗音乐', value: 'kugou' as Platform },
-  { label: 'pyncmd', value: 'pyncmd' as Platform },
-  { label: '酷我音乐', value: 'kuwo' as Platform },
-  { label: 'Bilibili音乐', value: 'bilibili' as Platform },
-  { label: 'GD音乐台', value: 'gdmusic' as Platform }
-]);
-
-// 检查音源是否被选中
-const isCurrentSource = (source: Platform) => {
-  return selectedSourcesValue.value.includes(source);
-};
-
-// 获取音源图标
-const getSourceIcon = (source: Platform) => {
-  const iconMap: Record<Platform, string> = {
-    'migu': 'ri-music-2-fill',
-    'kugou': 'ri-music-fill',
-    'kuwo': 'ri-album-fill',
-    'qq': 'ri-qq-fill',
-    'joox': 'ri-disc-fill',
-    'pyncmd': 'ri-netease-cloud-music-fill',
-    'bilibili': 'ri-bilibili-fill',
-    'gdmusic': 'ri-google-fill'
-  };
-
-  return iconMap[source] || 'ri-music-2-fill';
-};
-
-// 初始化选中的音源
-const initSelectedSources = () => {
-  const songId = String(playMusic.value.id);
-  const savedSource = localStorage.getItem(`song_source_${songId}`);
-  
-  if (savedSource) {
-    try {
-      selectedSourcesValue.value = JSON.parse(savedSource);
-    } catch (e) {
-      selectedSourcesValue.value = [];
-    }
-  } else {
-    selectedSourcesValue.value = [];
-  }
-};
-
-// 直接重新解析当前歌曲
-const directReparseMusic = async (source: Platform) => {
-  if (isReparsing.value || playMusic.value.source === 'bilibili') {
-    return;
-  }
-  
-  try {
-    isReparsing.value = true;
-    currentReparsingSource.value = source;
-    
-    // 更新选中的音源值为当前点击的音源
-    const songId = String(playMusic.value.id);
-    selectedSourcesValue.value = [source];
-    
-    // 保存到localStorage
-    localStorage.setItem(`song_source_${songId}`, JSON.stringify(selectedSourcesValue.value));
-    
-    const success = await playerStore.reparseCurrentSong(source);
-    
-    if (success) {
-      message.success(t('player.reparse.success'));
-    } else {
-      message.error(t('player.reparse.failed'));
-    }
-  } catch (error) {
-    console.error('解析失败:', error);
-    message.error(t('player.reparse.failed'));
-  } finally {
-    isReparsing.value = false;
-    currentReparsingSource.value = null;
-  }
-};
-
-// 监听歌曲ID变化，初始化音源设置
-watch(() => playMusic.value.id, () => {
-  if (playMusic.value.id) {
-    initSelectedSources();
-  }
-}, { immediate: true });
-
-// 监听歌曲变化，检查是否有自定义音源
-watch(() => playMusic.value.id, async (newId) => {
-  if (newId) {
-    const songId = String(newId);
-    const savedSource = localStorage.getItem(`song_source_${songId}`);
-    
-    // 如果有保存的音源设置但当前不是使用自定义解析的播放，尝试应用
-    if (savedSource && playMusic.value.source !== 'bilibili') {
-      try {
-        const sources = JSON.parse(savedSource) as Platform[];
-        console.log(`检测到歌曲ID ${songId} 有自定义音源设置:`, sources);
-        
-        // 当URL加载失败或过期时，自动应用自定义音源重新加载
-        audioService.on('url_expired', async (trackInfo) => {
-          if (trackInfo && trackInfo.id === playMusic.value.id) {
-            console.log('URL已过期，自动应用自定义音源重新加载');
-            try {
-              isReparsing.value = true;
-              const success = await playerStore.reparseCurrentSong(sources[0]);
-              if (!success) {
-                message.error(t('player.reparse.failed'));
-              }
-            } catch (e) {
-              console.error('自动重新解析失败:', e);
-              message.error(t('player.reparse.failed'));
-            } finally {
-              isReparsing.value = false;
-            }
-          }
-        });
-      } catch (e) {
-        console.error('解析保存的音源设置失败:', e);
-      }
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.music-source-popover {
-  @apply w-64 rounded-xl overflow-hidden;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.source-button {
-  &:hover:not(.opacity-50) {
-    @apply transform -translate-y-0.5 shadow-sm;
-  }
-}
-
-.iconfont {
-  @apply text-2xl mx-3;
-}
-</style>
--- a/src/renderer/components/settings/MusicSourceSettings.vue
+++ b/src/renderer/components/settings/MusicSourceSettings.vue
@@ -56,7 +56,7 @@ const props = defineProps({
  },
  sources: {
    type: Array as () => Platform[],
-    default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo']
+    default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']
  }
 });

@@ -72,6 +72,7 @@ const musicSourceOptions = ref([
  { label: 'pyncmd', value: 'pyncmd' },
  { label: '酷我音乐', value: 'kuwo' },
  { label: 'Bilibili音乐', value: 'bilibili' },
+  { label: 'YouTube', value: 'youtube' },
  { label: 'GD音乐台', value: 'gdmusic' }
 ]);

@@ -102,7 +103,7 @@ watch(

 const handleConfirm = () => {
  // 确保至少选择一个音源
-  const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
+  const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
  const valuesToEmit = selectedSources.value.length > 0 
    ? [...new Set(selectedSources.value)] 
    : defaultPlatforms;
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -62,26 +62,20 @@ import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
 import homeRouter from '@/router/home';
-import otherRouter from '@/router/other';
 import { useMenuStore } from '@/store/modules/menu';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isMobile } from '@/utils';

-const keepAliveInclude = computed(() => {
-  const allRoutes = [...homeRouter, ...otherRouter];
-  
-  return allRoutes
+const keepAliveInclude = computed(() =>
+  homeRouter
    .filter((item) => {
-      return item.meta?.keepAlive;
+      return item.meta.keepAlive;
    })
    .map((item) => {
-      return typeof item.name === 'string' 
-        ? item.name.charAt(0).toUpperCase() + item.name.slice(1) 
-        : '';
+      return item.name.charAt(0).toUpperCase() + item.name.slice(1);
    })
-    .filter(Boolean);
-});
+);

 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.vue'));
@@ -148,7 +142,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);

 .mobile {
  .main-content {
-    height: calc(100vh - 130px);
+    height: calc(100vh - 154px);
    overflow: auto;
    display: block;
    flex: none;
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -34,18 +34,13 @@
        :class="{ 'only-cover': config.hideLyrics }"
        :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
      >
-        <div class="img-container relative">
-          <n-image
-            ref="PicImgRef"
-            :src="getImgUrl(playMusic?.picUrl, '500y500')"
-            class="img"
-            lazy
-            preview-disabled
-          />
-          <div v-if="playMusic?.playLoading" class="loading-overlay">
-            <i class="ri-loader-4-line loading-icon"></i>
-          </div>
-        </div>
+        <n-image
+          ref="PicImgRef"
+          :src="getImgUrl(playMusic?.picUrl, '500y500')"
+          class="img"
+          lazy
+          preview-disabled
+        />
        <div class="music-info">
          <div class="music-content-name">{{ playMusic.name }}</div>
          <div class="music-content-singer">
@@ -554,12 +549,8 @@ defineExpose({
      max-width: none;
      max-height: none;

-      .img-container {
-        @apply w-[50vh] h-[50vh] mb-8;
-      }
-
      .img {
-        @apply w-full h-full;
+        @apply w-[50vh] h-[50vh] mb-8;
      }

      .music-info {
@@ -577,10 +568,6 @@ defineExpose({
      }
    }

-    .img-container {
-      @apply relative w-full h-full;
-    }
-
    .img {
      @apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
    }
@@ -776,25 +763,4 @@ defineExpose({
    }
  }
 }
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-overlay {
-  @apply absolute inset-0 flex items-center justify-center rounded-xl;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
-}
-
-.loading-icon {
-  font-size: 48px;
-  color: white;
-  animation: spin 1s linear infinite;
-}
 </style>
--- a/src/renderer/router/other.ts
+++ b/src/renderer/router/other.ts
@@ -53,17 +53,6 @@ const otherRouter = [
      back: true
    },
    component: () => import('@/views/bilibili/BilibiliPlayer.vue')
-  },
-  {
-    path: '/music-list/:id?',
-    name: 'musicList',
-    meta: {
-      title: '音乐列表',
-      keepAlive: false,
-      showInMenu: false,
-      back: true
-    },
-    component: () => import('@/views/music/MusicListPage.vue')
  }
 ];
 export default otherRouter;
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -45,8 +45,6 @@ class AudioService {
  private operationLock = false;
  private operationLockTimer: NodeJS.Timeout | null = null;
  private operationLockTimeout = 5000; // 5秒超时
-  private operationLockStartTime: number = 0;
-  private operationLockId: string = '';

  constructor() {
    if ('mediaSession' in navigator) {
@@ -55,14 +53,6 @@ class AudioService {
    // 从本地存储加载 EQ 开关状态
    const bypassState = localStorage.getItem('eqBypass');
    this.bypass = bypassState ? JSON.parse(bypassState) : false;
-    
-    // 页面加载时立即强制重置操作锁
-    this.forceResetOperationLock();
-    
-    // 添加页面卸载事件，确保离开页面时清除锁
-    window.addEventListener('beforeunload', () => {
-      this.forceResetOperationLock();
-    });
  }

  private initMediaSession() {
@@ -373,37 +363,11 @@ class AudioService {

  // 设置操作锁，带超时自动释放
  private setOperationLock(): boolean {
-    // 生成唯一的锁ID
-    const lockId = Date.now().toString() + Math.random().toString(36).substring(2, 9);
-    
-    // 如果锁已经存在，检查是否超时
    if (this.operationLock) {
-      const currentTime = Date.now();
-      const lockDuration = currentTime - this.operationLockStartTime;
-      
-      // 如果锁持续时间超过2秒，直接强制重置
-      if (lockDuration > 2000) {
-        console.warn(`操作锁已激活 ${lockDuration}ms，超过安全阈值，强制重置`);
-        this.forceResetOperationLock();
-      } else {
-        console.log(`操作锁激活中，持续时间 ${lockDuration}ms`);
-        return false;
-      }
+      return false;
    }
    
    this.operationLock = true;
-    this.operationLockStartTime = Date.now();
-    this.operationLockId = lockId;
-    
-    // 将锁信息存储到 localStorage（仅用于调试，实际不依赖此值）
-    try {
-      localStorage.setItem('audioOperationLock', JSON.stringify({
-        id: this.operationLockId,
-        startTime: this.operationLockStartTime
-      }));
-    } catch (error) {
-      console.error('存储操作锁信息失败:', error);
-    }
    
    // 清除之前的定时器
    if (this.operationLockTimer) {
@@ -413,23 +377,16 @@ class AudioService {
    // 设置超时自动释放锁
    this.operationLockTimer = setTimeout(() => {
      console.warn('操作锁超时自动释放');
-      this.releaseOperationLock();
+      this.operationLock = false;
+      this.operationLockTimer = null;
    }, this.operationLockTimeout);
    
    return true;
  }
  
  // 释放操作锁
-  public releaseOperationLock(): void {
+  private releaseOperationLock(): void {
    this.operationLock = false;
-    this.operationLockStartTime = 0;
-    
-    // 从 localStorage 中移除锁信息
-    try {
-      localStorage.removeItem('audioOperationLock');
-    } catch (error) {
-      console.error('清除存储的操作锁信息失败:', error);
-    }
    
    if (this.operationLockTimer) {
      clearTimeout(this.operationLockTimer);
@@ -437,59 +394,12 @@ class AudioService {
    }
  }

-  // 强制重置操作锁，用于特殊情况
-  public forceResetOperationLock(): void {
-    console.log('强制重置操作锁');
-    this.operationLock = false;
-    this.operationLockStartTime = 0;
-    this.operationLockId = '';
-    
-    if (this.operationLockTimer) {
-      clearTimeout(this.operationLockTimer);
-      this.operationLockTimer = null;
-    }
-    
-    // 清除存储的锁
-    localStorage.removeItem('audioOperationLock');
-  }
-
  // 播放控制相关
  play(url?: string, track?: SongResult, isPlay: boolean = true): Promise<Howl> {
-    // 每次调用play方法时，尝试强制重置锁（注意：仅在页面刷新后的第一次播放时应用）
-    if (!this.currentSound) {
-      console.log('首次播放请求，强制重置操作锁');
-      this.forceResetOperationLock();
-    }
-    
-    // 如果操作锁已激活，但持续时间超过安全阈值，强制重置
-    if (this.operationLock) {
-      const currentTime = Date.now();
-      const lockDuration = currentTime - this.operationLockStartTime;
-      
-      if (lockDuration > 2000) {
-        console.warn(`操作锁已激活 ${lockDuration}ms，超过安全阈值，强制重置`);
-        this.forceResetOperationLock();
-      }
-    }
-    
-    // 获取锁
+    // 如果操作锁已激活，说明有操作正在进行中，直接返回
    if (!this.setOperationLock()) {
-      console.log('audioService: 操作锁激活，强制执行当前播放请求');
-      
-      // 如果只是要继续播放当前音频，直接执行
-      if (this.currentSound && !url && !track) {
-        if (this.seekLock && this.seekDebounceTimer) {
-          clearTimeout(this.seekDebounceTimer);
-          this.seekLock = false;
-        }
-        this.currentSound.play();
-        return Promise.resolve(this.currentSound);
-      }
-      
-      // 强制释放锁并继续执行
-      this.forceResetOperationLock();
-      
-      // 这里不再返回错误，而是继续执行播放逻辑
+      console.log('audioService: 操作锁激活，忽略当前播放请求');
+      return Promise.reject(new Error('操作锁激活，请等待当前操作完成'));
    }

    // 如果没有提供新的 URL 和 track，且当前有音频实例，则继续播放
@@ -507,7 +417,7 @@ class AudioService {
    // 如果没有提供必要的参数，返回错误
    if (!url || !track) {
      this.releaseOperationLock();
-      return Promise.reject(new Error('缺少必要参数: url和track'));
+      return Promise.reject(new Error('Missing required parameters: url and track'));
    }

    return new Promise<Howl>((resolve, reject) => {
@@ -575,7 +485,6 @@ class AudioService {
              } else {
                // 发送URL过期事件，通知外部需要重新获取URL
                this.emit('url_expired', this.currentTrack);
-                this.releaseOperationLock();
                reject(new Error('音频加载失败，请尝试切换其他歌曲'));
              }
            },
@@ -588,7 +497,6 @@ class AudioService {
              } else {
                // 发送URL过期事件，通知外部需要重新获取URL
                this.emit('url_expired', this.currentTrack);
-                this.releaseOperationLock();
                reject(new Error('音频播放失败，请尝试切换其他歌曲'));
              }
            },
@@ -666,33 +574,33 @@ class AudioService {
  }

  stop() {
-    // 强制重置操作锁并继续执行
-    this.forceResetOperationLock();
-    
-    try {
-      if (this.currentSound) {
-        try {
-          // 确保任何进行中的seek操作被取消
-          if (this.seekLock && this.seekDebounceTimer) {
-            clearTimeout(this.seekDebounceTimer);
-            this.seekLock = false;
-          }
-          this.currentSound.stop();
-          this.currentSound.unload();
-        } catch (error) {
-          console.error('停止音频失败:', error);
-        }
-        this.currentSound = null;
-      }
-      
-      this.currentTrack = null;
-      if ('mediaSession' in navigator) {
-        navigator.mediaSession.playbackState = 'none';
-      }
-      this.disposeEQ();
-    } catch (error) {
-      console.error('停止音频时发生错误:', error);
+    if (!this.setOperationLock()) {
+      console.log('audioService: 操作锁激活，忽略当前停止请求');
+      return;
    }
+    
+    if (this.currentSound) {
+      try {
+        // 确保任何进行中的seek操作被取消
+        if (this.seekLock && this.seekDebounceTimer) {
+          clearTimeout(this.seekDebounceTimer);
+          this.seekLock = false;
+        }
+        this.currentSound.stop();
+        this.currentSound.unload();
+      } catch (error) {
+        console.error('Error stopping audio:', error);
+      }
+      this.currentSound = null;
+    }
+    
+    this.currentTrack = null;
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.playbackState = 'none';
+    }
+    this.disposeEQ();
+    
+    this.releaseOperationLock();
  }

  setVolume(volume: number) {
@@ -703,12 +611,14 @@ class AudioService {
  }

  seek(time: number) {
-    // 直接强制重置操作锁
-    this.forceResetOperationLock();
+    if (!this.setOperationLock()) {
+      console.log('audioService: 操作锁激活，忽略当前seek请求');
+      return;
+    }
    
    if (this.currentSound) {
      try {
-        // 直接执行seek操作
+        // 直接执行seek操作，避免任何过滤或判断
        this.currentSound.seek(time);
        // 触发seek事件
        this.updateMediaSessionPositionState();
@@ -717,24 +627,30 @@ class AudioService {
        console.error('Seek操作失败:', error);
      }
    }
+    
+    this.releaseOperationLock();
  }

  pause() {
-    // 直接强制重置操作锁
-    this.forceResetOperationLock();
+    if (!this.setOperationLock()) {
+      console.log('audioService: 操作锁激活，忽略当前暂停请求');
+      return;
+    }
    
    if (this.currentSound) {
      try {
-        // 确保任何进行中的seek操作被取消
+        // 如果有进行中的seek操作，等待其完成
        if (this.seekLock && this.seekDebounceTimer) {
          clearTimeout(this.seekDebounceTimer);
          this.seekLock = false;
        }
        this.currentSound.pause();
      } catch (error) {
-        console.error('暂停音频失败:', error);
+        console.error('Error pausing audio:', error);
      }
    }
+    
+    this.releaseOperationLock();
  }

  clearAllListeners() {
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -16,6 +16,5 @@ export * from './modules/player';
 export * from './modules/search';
 export * from './modules/settings';
 export * from './modules/user';
-export * from './modules/music';

 export default pinia;
--- a/src/renderer/store/modules/music.ts
+++ b/src/renderer/store/modules/music.ts
@@ -1,45 +0,0 @@
-import { defineStore } from 'pinia';
-
-interface MusicState {
-  currentMusicList: any[] | null;
-  currentMusicListName: string;
-  currentListInfo: any | null;
-  canRemoveSong: boolean;
-}
-
-export const useMusicStore = defineStore('music', {
-  state: (): MusicState => ({
-    currentMusicList: null,
-    currentMusicListName: '',
-    currentListInfo: null,
-    canRemoveSong: false
-  }),
-
-  actions: {
-    // 设置当前音乐列表
-    setCurrentMusicList(list: any[], name: string, listInfo: any = null, canRemove = false) {
-      this.currentMusicList = list;
-      this.currentMusicListName = name;
-      this.currentListInfo = listInfo;
-      this.canRemoveSong = canRemove;
-    },
-
-    // 清除当前音乐列表
-    clearCurrentMusicList() {
-      this.currentMusicList = null;
-      this.currentMusicListName = '';
-      this.currentListInfo = null;
-      this.canRemoveSong = false;
-    },
-
-    // 从列表中移除一首歌曲
-    removeSongFromList(id: number) {
-      if (!this.currentMusicList) return;
-      
-      const index = this.currentMusicList.findIndex((song) => song.id === id);
-      if (index !== -1) {
-        this.currentMusicList.splice(index, 1);
-      }
-    }
-  }
-}); 
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -14,7 +14,6 @@ import { createDiscreteApi } from 'naive-ui';

 import { useSettingsStore } from './settings';
 import { useUserStore } from './user';
-import { type Platform } from '@/types/music';

 const musicHistory = useMusicHistory();
 const { message } = createDiscreteApi(['message']);
@@ -103,27 +102,6 @@ export const getSongUrl = async (
  }

  const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
-  
-  // 检查是否有自定义音源设置
-  const songId = String(id);
-  const savedSource = localStorage.getItem(`song_source_${songId}`);
-  
-  // 如果有自定义音源设置，直接使用getParsingMusicUrl获取URL
-  if (savedSource && songData.source !== 'bilibili') {
-    try {
-      console.log(`使用自定义音源解析歌曲 ID: ${songId}`);
-      const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
-      if (res && res.data && res.data.data && res.data.data.url) {
-        return res.data.data.url;
-      }
-      // 如果自定义音源解析失败，继续使用正常的获取流程
-      console.warn('自定义音源解析失败，使用默认音源');
-    } catch (error) {
-      console.error('自定义音源解析出错:', error);
-    }
-  }
-  
-  // 正常获取URL流程
  const { data } = await getMusicUrl(numericId, isDownloaded);
  let url = '';
  let songDetail = null;
@@ -211,26 +189,17 @@ export const loadLrc = async (id: string | number): Promise<ILyric> => {
 };

 const getSongDetail = async (playMusic: SongResult) => {
-  // playMusic.playLoading 在 handlePlayMusic 中已设置，这里不再设置
-  
+  playMusic.playLoading = true;
+
  if (playMusic.source === 'bilibili') {
    console.log('处理B站音频详情');
-    try {
-      // 如果需要获取URL
-      if (!playMusic.playMusicUrl && playMusic.bilibiliData) {
-        playMusic.playMusicUrl = await getBilibiliAudioUrl(
-          playMusic.bilibiliData.bvid,
-          playMusic.bilibiliData.cid
-        );
-      }
-      
-      playMusic.playLoading = false;
-      return { ...playMusic} as SongResult;
-    } catch (error) {
-      console.error('获取B站音频详情失败:', error);
-      playMusic.playLoading = false;
-      throw error;
-    }
+    const { backgroundColor, primaryColor } =
+      playMusic.backgroundColor && playMusic.primaryColor
+        ? playMusic
+        : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
+
+    playMusic.playLoading = false;
+    return { ...playMusic, backgroundColor, primaryColor } as SongResult;
  }

  if (playMusic.expiredAt && playMusic.expiredAt < Date.now()) {
@@ -238,23 +207,17 @@ const getSongDetail = async (playMusic: SongResult) => {
    playMusic.playMusicUrl = undefined;
  }

-  try {
-    const playMusicUrl = playMusic.playMusicUrl || (await getSongUrl(playMusic.id, playMusic));
-    playMusic.createdAt = Date.now();
-    // 半小时后过期
-    playMusic.expiredAt = playMusic.createdAt + 1800000;
-    const { backgroundColor, primaryColor } =
-      playMusic.backgroundColor && playMusic.primaryColor
-        ? playMusic
-        : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
+  const playMusicUrl = playMusic.playMusicUrl || (await getSongUrl(playMusic.id, playMusic));
+  playMusic.createdAt = Date.now();
+  // 半小时后过期
+  playMusic.expiredAt = playMusic.createdAt + 1800000;
+  const { backgroundColor, primaryColor } =
+    playMusic.backgroundColor && playMusic.primaryColor
+      ? playMusic
+      : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));

-    playMusic.playLoading = false;
-    return { ...playMusic, playMusicUrl, backgroundColor, primaryColor } as SongResult;
-  } catch (error) {
-    console.error('获取音频URL失败:', error);
-    playMusic.playLoading = false;
-    throw error;
-  }
+  playMusic.playLoading = false;
+  return { ...playMusic, playMusicUrl, backgroundColor, primaryColor } as SongResult;
 };

 const preloadNextSong = (nextSongUrl: string) => {
@@ -426,72 +389,71 @@ export const usePlayerStore = defineStore('player', () => {
  const currentPlayListIndex = computed(() => playListIndex.value);

  const handlePlayMusic = async (music: SongResult, isPlay: boolean = true) => {
-    const currentSound = audioService.getCurrentSound();
-    if (currentSound) {
-      console.log('主动停止并卸载当前音频实例');
-      currentSound.stop();
-      currentSound.unload();
+    // 处理B站视频，确保URL有效
+    if (music.source === 'bilibili' && music.bilibiliData) {
+      try {
+        console.log('处理B站视频，检查URL有效性');
+        // 清除之前的URL，强制重新获取
+        music.playMusicUrl = undefined;
+
+        // 重新获取B站视频URL
+        if (music.bilibiliData.bvid && music.bilibiliData.cid) {
+          music.playMusicUrl = await getBilibiliAudioUrl(
+            music.bilibiliData.bvid,
+            music.bilibiliData.cid
+          );
+          console.log('获取B站URL成功:', music.playMusicUrl);
+        }
+      } catch (error) {
+        console.error('获取B站音频URL失败:', error);
+        message.error(i18n.global.t('player.playFailed'));
+        return false; // 返回失败状态
+      }
    }
-    // 先切换歌曲数据，更新播放状态
-    // 加载歌词
-    await loadLrcAsync(music);
-    const originalMusic = { ...music };
-    // 获取背景色
-    const { backgroundColor, primaryColor } =
-    music.backgroundColor && music.primaryColor
-      ? music
-      : await getImageLinearBackground(getImgUrl(music?.picUrl, '30y30'));
-    music.backgroundColor = backgroundColor;
-    music.primaryColor = primaryColor;
-    music.playLoading = true; // 设置加载状态
-    playMusic.value = music;
-    
-    // 更新播放相关状态
-    play.value = isPlay;
-    
-    // 更新标题
-    let title = music.name;
-    if (music.source === 'netease' && music?.song?.artists) {
-      title += ` - ${music.song.artists.reduce(
-        (prev: string, curr: any) => `${prev}${curr.name}/`,
-        ''
-      )}`;
-    } else if (music.source === 'bilibili' && music?.song?.ar?.[0]) {
-      title += ` - ${music.song.ar[0].name}`;
-    }
-    document.title = 'AlgerMusic - ' + title;

    try {
-      
-      // 添加到历史记录
-      musicHistory.addMusic(music);
-      
-      // 查找歌曲在播放列表中的索引
+      const updatedPlayMusic = await getSongDetail(music);
+      playMusic.value = updatedPlayMusic;
+      playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
+
+      play.value = isPlay;
+
+      localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+      localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+      localStorage.setItem('isPlaying', play.value.toString());
+
+      let title = updatedPlayMusic.name;
+
+      if (updatedPlayMusic.source === 'netease' && updatedPlayMusic?.song?.artists) {
+        title += ` - ${updatedPlayMusic.song.artists.reduce(
+          (prev: string, curr: any) => `${prev}${curr.name}/`,
+          ''
+        )}`;
+      } else if (updatedPlayMusic.source === 'bilibili' && updatedPlayMusic?.song?.ar?.[0]) {
+        title += ` - ${updatedPlayMusic.song.ar[0].name}`;
+      }
+
+      document.title = title;
+
+      loadLrcAsync(playMusic.value);
+
+      musicHistory.addMusic(playMusic.value);
+
+      // 找到歌曲在播放列表中的索引，如果是通过 nextPlay/prevPlay 调用的，不会更新 playListIndex
      const songIndex = playList.value.findIndex(
        (item: SongResult) => item.id === music.id && item.source === music.source
      );
      
      // 只有在 songIndex 有效，并且与当前 playListIndex 不同时才更新
+      // 这样可以避免与 nextPlay/prevPlay 中的索引更新冲突
      if (songIndex !== -1 && songIndex !== playListIndex.value) {
        console.log('歌曲索引不匹配，更新为:', songIndex);
        playListIndex.value = songIndex;
      }
      
-      // 获取歌曲详情，包括URL
-      const updatedPlayMusic = await getSongDetail(originalMusic);
-      playMusic.value = updatedPlayMusic;
-      playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
-
-      // 保存到本地存储
-      localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
-      localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
-      localStorage.setItem('isPlaying', play.value.toString());
-      
      // 无论如何都预加载更多歌曲
      if (songIndex !== -1) {
-        setTimeout(() => {
-          fetchSongs(playList.value, songIndex + 1, songIndex + 2);
-        }, 3000);
+        fetchSongs(playList.value, songIndex + 1, songIndex + 3);
      } else {
        console.warn('当前歌曲未在播放列表中找到');
      }
@@ -499,7 +461,7 @@ export const usePlayerStore = defineStore('player', () => {
      // 使用标记防止循环调用
      let playInProgress = false;
      
-      // 直接调用 playAudio 方法播放音频
+      // 直接调用 playAudio 方法播放音频，不需要依赖外部监听
      try {
        if (playInProgress) {
          console.warn('播放操作正在进行中，避免重复调用');
@@ -507,6 +469,8 @@ export const usePlayerStore = defineStore('player', () => {
        }
        
        playInProgress = true;
+        
+        // 因为调用 playAudio 前我们已经设置了 play.value，所以不需要额外传递 shouldPlay 参数
        const result = await playAudio();
        
        playInProgress = false;
@@ -519,10 +483,6 @@ export const usePlayerStore = defineStore('player', () => {
    } catch (error) {
      console.error('处理播放音乐失败:', error);
      message.error(i18n.global.t('player.playFailed'));
-      // 出现错误时，更新加载状态
-      if (playMusic.value) {
-        playMusic.value.playLoading = false;
-      }
      return false;
    }
  };
@@ -567,11 +527,8 @@ export const usePlayerStore = defineStore('player', () => {
    musicFull.value = value;
  };

-  const setPlayList = (list: SongResult[], keepIndex: boolean = false) => {
-    // 如果指定保持当前索引，则不重新计算索引
-    if (!keepIndex) {
-      playListIndex.value = list.findIndex((item) => item.id === playMusic.value.id);
-    }
+  const setPlayList = (list: SongResult[]) => {
+    playListIndex.value = list.findIndex((item) => item.id === playMusic.value.id);
    playList.value = list;
    localStorage.setItem('playList', JSON.stringify(list));
    localStorage.setItem('playListIndex', playListIndex.value.toString());
@@ -757,13 +714,20 @@ export const usePlayerStore = defineStore('player', () => {
    }
  };

-  // 修改nextPlay方法，改进播放逻辑
+  // 修改nextPlay方法，加入定时关闭检查逻辑
  const nextPlay = async () => {
-
+    // 静态标志，防止多次调用造成递归
+    if ((nextPlay as any).isRunning) {
+      console.log('下一首播放正在执行中，忽略重复调用');
+      return;
+    }
+    
    try {
+      (nextPlay as any).isRunning = true;
      
      if (playList.value.length === 0) {
        play.value = true;
+        (nextPlay as any).isRunning = false;
        return;
      }

@@ -772,6 +736,7 @@ export const usePlayerStore = defineStore('player', () => {
          sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
        // 已是最后一首且为顺序播放模式，触发停止
        stopPlayback();
+        (nextPlay as any).isRunning = false;
        return;
      }

@@ -779,192 +744,117 @@ export const usePlayerStore = defineStore('player', () => {
      const shouldPlayNext = play.value;
      console.log('切换到下一首，当前播放状态:', shouldPlayNext ? '播放' : '暂停');

-      // 保存当前索引，用于错误恢复
-      const currentIndex = playListIndex.value;
      let nowPlayListIndex: number;

      if (playMode.value === 2) {
-        // 随机播放模式
        do {
          nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
        } while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
      } else {
-        // 顺序播放或循环播放模式
        nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
      }

-      // 获取下一首歌曲
-      let nextSong = { ...playList.value[nowPlayListIndex] };
-      
-      // 记录尝试播放过的索引，防止无限循环
-      const attemptedIndices = new Set<number>();
-      attemptedIndices.add(nowPlayListIndex);
-
-      // 先更新当前播放索引
+      // 重要：首先更新当前播放索引
      playListIndex.value = nowPlayListIndex;
      
-      // 尝试播放
-      let success = false;
-      let retryCount = 0;
-      const maxRetries = Math.min(3, playList.value.length);
+      // 获取下一首歌曲
+      const nextSong = playList.value[nowPlayListIndex];

-      // 尝试播放，最多尝试maxRetries次
-      while (!success && retryCount < maxRetries) {
-        success = await handlePlayMusic(nextSong, shouldPlayNext);
+      // 如果是B站视频，确保重新获取URL
+      if (nextSong.source === 'bilibili' && nextSong.bilibiliData) {
+        // 清除之前的URL，确保重新获取
+        nextSong.playMusicUrl = undefined;
+        console.log('下一首是B站视频，已清除URL强制重新获取');
+      }
+
+      // 尝试播放，并明确传递应该播放的状态
+      const success = await handlePlayMusic(nextSong, shouldPlayNext);
+      
+      if (!success) {
+        console.error('播放下一首失败，将从播放列表中移除此歌曲');
+        // 从播放列表中移除失败的歌曲
+        const newPlayList = [...playList.value];
+        newPlayList.splice(nowPlayListIndex, 1);
        
-        if (!success) {
-          retryCount++;
-          console.error(`播放失败，尝试 ${retryCount}/${maxRetries}`);
-          
-          if (retryCount >= maxRetries) {
-            console.error('多次尝试播放失败，将从播放列表中移除此歌曲');
-            // 从播放列表中移除失败的歌曲
-            const newPlayList = [...playList.value];
-            newPlayList.splice(nowPlayListIndex, 1);
-            
-            if (newPlayList.length > 0) {
-              // 更新播放列表，但保持当前索引不变
-              const keepCurrentIndexPosition = true;
-              setPlayList(newPlayList, keepCurrentIndexPosition);
-              
-              // 继续尝试下一首
-              if (playMode.value === 2) {
-                // 随机模式，随机选择一首未尝试过的
-                const availableIndices = Array.from(
-                  { length: newPlayList.length }, 
-                  (_, i) => i
-                ).filter(i => !attemptedIndices.has(i));
-                
-                if (availableIndices.length > 0) {
-                  // 随机选择一个未尝试过的索引
-                  nowPlayListIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
-                } else {
-                  // 如果所有歌曲都尝试过了，选择下一个索引
-                  nowPlayListIndex = (playListIndex.value + 1) % newPlayList.length;
-                }
-              } else {
-                // 顺序播放，选择下一首
-                // 如果当前索引已经是最后一首，循环到第一首
-                nowPlayListIndex = playListIndex.value >= newPlayList.length
-                  ? 0 
-                  : playListIndex.value;
-              }
-              
-              playListIndex.value = nowPlayListIndex;
-              attemptedIndices.add(nowPlayListIndex);
-              
-              if (newPlayList[nowPlayListIndex]) {
-                nextSong = { ...newPlayList[nowPlayListIndex] };
-                retryCount = 0; // 重置重试计数器，为新歌曲准备
-              } else {
-                // 处理索引无效的情况
-                console.error('无效的播放索引，停止尝试');
-                break;
-              }
-            } else {
-              // 播放列表为空，停止尝试
-              console.error('播放列表为空，停止尝试');
-              break;
-            }
-          }
+        if (newPlayList.length > 0) {
+          // 更新播放列表后，重新尝试播放下一首
+          setPlayList(newPlayList);
+          // 延迟一点时间再尝试下一首，避免立即触发可能导致的无限循环
+          setTimeout(() => {
+            (nextPlay as any).isRunning = false;
+            nextPlay();
+          }, 300);
+          return;
        }
      }
      
      // 歌曲切换成功，触发歌曲变更处理（用于定时关闭功能）
-      if (success) {
-        handleSongChange();
-      } else {
-        console.error('所有尝试都失败，无法播放下一首歌曲');
-        // 如果尝试了所有可能的歌曲仍然失败，恢复到原始索引
-        playListIndex.value = currentIndex;
-        setIsPlay(false); // 停止播放
-        message.error(i18n.global.t('player.playFailed'));
-      }
+      handleSongChange();
    } catch (error) {
      console.error('切换下一首出错:', error);
+    } finally {
+      (nextPlay as any).isRunning = false;
    }
  };

-  // 修改 prevPlay 方法，使用与 nextPlay 相似的逻辑改进
  const prevPlay = async () => {
-
+    // 静态标志，防止多次调用造成递归
+    if ((prevPlay as any).isRunning) {
+      console.log('上一首播放正在执行中，忽略重复调用');
+      return;
+    }
    
    try {
-
+      (prevPlay as any).isRunning = true;
+      
      if (playList.value.length === 0) {
        play.value = true;
+        (prevPlay as any).isRunning = false;
        return;
      }
      
-      // 保存当前索引，用于错误恢复
-      const currentIndex = playListIndex.value;
      const nowPlayListIndex =
        (playListIndex.value - 1 + playList.value.length) % playList.value.length;

-      // 获取上一首歌曲
-      const prevSong = { ...playList.value[nowPlayListIndex] };
-      
      // 重要：首先更新当前播放索引
      playListIndex.value = nowPlayListIndex;
-      
-      // 尝试播放
-      let success = false;
-      let retryCount = 0;
-      const maxRetries = 2;
-
-      // 尝试播放，最多尝试maxRetries次
-      while (!success && retryCount < maxRetries) {
-        success = await handlePlayMusic(prevSong);
        
-        if (!success) {
-          retryCount++;
-          console.error(`播放上一首失败，尝试 ${retryCount}/${maxRetries}`);
-          
-          // 最后一次尝试失败
-          if (retryCount >= maxRetries) {
-            console.error('多次尝试播放失败，将从播放列表中移除此歌曲');
-            // 从播放列表中移除失败的歌曲
-            const newPlayList = [...playList.value];
-            newPlayList.splice(nowPlayListIndex, 1);
-            
-            if (newPlayList.length > 0) {
-              // 更新播放列表，但保持当前索引不变
-              const keepCurrentIndexPosition = true;
-              setPlayList(newPlayList, keepCurrentIndexPosition);
-              
-              // 恢复到原始索引或继续尝试上一首
-              if (newPlayList.length === 1) {
-                // 只剩一首歌，直接播放它
-                playListIndex.value = 0;
-              } else {
-                // 尝试上上一首
-                const newPrevIndex = (playListIndex.value - 1 + newPlayList.length) % newPlayList.length;
-                playListIndex.value = newPrevIndex;
-              }
-              
-              // 延迟一点时间再尝试，避免可能的无限循环
-              setTimeout(() => {
-                prevPlay(); // 递归调用，尝试再上一首
-              }, 300);
-              return;
-            } else {
-              // 播放列表为空，停止尝试
-              console.error('播放列表为空，停止尝试');
-              break;
-            }
-          }
-        }
+      // 获取上一首歌曲
+      const prevSong = playList.value[nowPlayListIndex];
+
+      // 如果是B站视频，确保重新获取URL
+      if (prevSong.source === 'bilibili' && prevSong.bilibiliData) {
+        // 清除之前的URL，确保重新获取
+        prevSong.playMusicUrl = undefined;
+        console.log('上一首是B站视频，已清除URL强制重新获取');
      }
+
+      // 尝试播放，如果失败会返回false
+      const success = await handlePlayMusic(prevSong);
      
-      if (!success) {
-        console.error('所有尝试都失败，无法播放上一首歌曲');
-        // 如果尝试了所有可能的歌曲仍然失败，恢复到原始索引
-        playListIndex.value = currentIndex;
-        setIsPlay(false); // 停止播放
-        message.error(i18n.global.t('player.playFailed'));
+      if (success) {
+        await fetchSongs(playList.value, playListIndex.value - 3, nowPlayListIndex);
+      } else {
+        console.error('播放上一首失败，将从播放列表中移除此歌曲');
+        // 从播放列表中移除失败的歌曲
+        const newPlayList = [...playList.value];
+        newPlayList.splice(nowPlayListIndex, 1);
+        
+        if (newPlayList.length > 0) {
+          // 更新播放列表后，重新尝试播放上一首
+          setPlayList(newPlayList);
+          // 延迟一点时间再尝试上一首，避免立即触发可能导致的无限循环
+          setTimeout(() => {
+            (prevPlay as any).isRunning = false;
+            prevPlay();
+          }, 300);
+          return;
+        }
      }
    } catch (error) {
      console.error('切换上一首出错:', error);
+    } finally {
+      (prevPlay as any).isRunning = false;
    }
  };

@@ -1091,7 +981,7 @@ export const usePlayerStore = defineStore('player', () => {
    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
  };

-  // 修改 playAudio 函数中的错误处理逻辑，避免在操作锁问题时频繁尝试播放
+  // 修改：处理音频播放的方法，使用事件触发机制
  const playAudio = async () => {
    if (!playMusicUrl.value || !playMusic.value) return null;
    
@@ -1151,40 +1041,23 @@ export const usePlayerStore = defineStore('player', () => {
      console.error('播放音频失败:', error);
      setPlayMusic(false);
      
+      // 避免直接调用 nextPlay，改用延时避免无限循环
      // 检查错误是否是由于操作锁引起的
      const errorMsg = error instanceof Error ? error.message : String(error);
-      
-      // 操作锁错误处理
      if (errorMsg.includes('操作锁激活')) {
-        console.log('由于操作锁正在使用，将在1000ms后重试');
-        
-        // 强制重置操作锁并延迟再试
-        try {
-          // 尝试强制重置音频服务的操作锁
-          audioService.forceResetOperationLock();
-          console.log('已强制重置操作锁');
-        } catch (e) {
-          console.error('重置操作锁失败:', e);
-        }
-        
-        // 延迟较长时间，确保锁已完全释放
+        console.log('由于操作锁正在使用，将在500ms后重试');
+        // 操作锁错误，延迟后再尝试
        setTimeout(() => {
-          // 直接重试当前歌曲，而不是切换到下一首
-          playAudio().catch(e => {
-            console.error('重试播放失败，切换到下一首:', e);
-            
-            // 只有再次失败才切换到下一首
-            if (playList.value.length > 1) {
-              nextPlay();
-            }
-          });
-        }, 1000);
+          // 检查当前播放列表是否有下一首
+          if (playList.value.length > 1) {
+            nextPlay();
+          }
+        }, 500);
      } else {
-        // 其他错误，切换到下一首
-        console.log('播放失败，切换到下一首');
+        // 其他错误，延迟更短时间后切换
        setTimeout(() => {
          nextPlay();
-        }, 300);
+        }, 100);
      }
      
      message.error(i18n.global.t('player.playFailed'));
@@ -1192,62 +1065,6 @@ export const usePlayerStore = defineStore('player', () => {
    }
  };

-  // 使用指定的音源重新解析当前播放的歌曲
-  const reparseCurrentSong = async (sourcePlatform: Platform) => {
-    try {
-      const currentSong = playMusic.value;
-      if (!currentSong || !currentSong.id) {
-        console.warn('没有有效的播放对象');
-        return false;
-      }
-
-      // B站视频不支持重新解析
-      if (currentSong.source === 'bilibili') {
-        console.warn('B站视频不支持重新解析');
-        return false;
-      }
-
-      // 保存用户选择的音源
-      const songId = String(currentSong.id);
-      localStorage.setItem(`song_source_${songId}`, JSON.stringify([sourcePlatform]));
-      
-      // 停止当前播放
-      const currentSound = audioService.getCurrentSound();
-      if (currentSound) {
-        currentSound.pause();
-      }
-      
-      // 重新获取歌曲URL
-      const numericId = typeof currentSong.id === 'string' 
-        ? parseInt(currentSong.id, 10) 
-        : currentSong.id;
-      
-      const res = await getParsingMusicUrl(numericId, cloneDeep(currentSong));
-      if (res && res.data && res.data.data && res.data.data.url) {
-        // 更新URL
-        const newUrl = res.data.data.url;
-        
-        // 使用新URL更新播放
-        const updatedMusic = { 
-          ...currentSong, 
-          playMusicUrl: newUrl,
-          expiredAt: Date.now() + 1800000  // 半小时后过期
-        };
-        
-        // 更新播放器状态并开始播放
-        await setPlay(updatedMusic);
-        setPlayMusic(true);
-        
-        return true;
-      } else {
-        return false;
-      }
-    } catch (error) {
-      console.error('重新解析失败:', error);
-      return false;
-    }
-  };
-
  return {
    play,
    isPlay,
@@ -1290,7 +1107,6 @@ export const usePlayerStore = defineStore('player', () => {
    addToFavorite,
    removeFromFavorite,
    removeFromPlayList,
-    playAudio,
-    reparseCurrentSong
+    playAudio
  };
 });
--- a/src/renderer/types/music.ts
+++ b/src/renderer/types/music.ts
@@ -1,5 +1,5 @@
 // 音乐平台类型
-export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'gdmusic';
+export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';

 // 默认平台列表
-export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo']; 
+export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']; 
--- a/src/renderer/utils/appShortcuts.ts
+++ b/src/renderer/utils/appShortcuts.ts
@@ -11,12 +11,6 @@ import { showShortcutToast } from './shortcutToast';
 let actionTimeout: NodeJS.Timeout | null = null;
 const ACTION_DELAY = 300; // 毫秒

-// 添加一个操作锁，记录最后一次操作的时间和动作
-let lastActionInfo = {
-  action: '',
-  timestamp: 0
-};
-
 interface ShortcutConfig {
  key: string;
  enabled: boolean;
@@ -37,33 +31,17 @@ let appShortcuts: ShortcutsConfig = {};
 * @param action 快捷键动作
 */
 export async function handleShortcutAction(action: string) {
-  const now = Date.now();
-  
  // 如果存在未完成的动作，则忽略当前请求
  if (actionTimeout) {
-    console.log('[AppShortcuts] 忽略快速连续的动作请求:', action);
+    console.log('忽略快速连续的动作请求:', action);
    return;
  }
-  
-  // 检查是否是同一个动作的重复触发（300ms内）
-  if (lastActionInfo.action === action && now - lastActionInfo.timestamp < ACTION_DELAY) {
-    console.log(`[AppShortcuts] 忽略重复的 ${action} 动作，距上次仅 ${now - lastActionInfo.timestamp}ms`);
-    return;
-  }
-  
-  // 更新最后一次操作信息
-  lastActionInfo = {
-    action,
-    timestamp: now
-  };

  // 设置防抖锁
  actionTimeout = setTimeout(() => {
    actionTimeout = null;
  }, ACTION_DELAY);

-  console.log(`[AppShortcuts] 执行动作: ${action}, 时间戳: ${now}`);
-
  const playerStore = usePlayerStore();
  const settingsStore = useSettingsStore();

@@ -115,19 +93,16 @@ export async function handleShortcutAction(action: string) {
      case 'toggleFavorite': {
        const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
        const numericId = Number(playerStore.playMusic.id);
-        console.log(`[AppShortcuts] toggleFavorite 当前状态: ${isFavorite}, ID: ${numericId}`);
        if (isFavorite) {
          playerStore.removeFromFavorite(numericId);
-          console.log(`[AppShortcuts] 已从收藏中移除: ${numericId}`);
        } else {
          playerStore.addToFavorite(numericId);
-          console.log(`[AppShortcuts] 已添加到收藏: ${numericId}`);
        }
        showToast(
          isFavorite
-            ? t('player.playBar.unFavorite', { name: playerStore.playMusic.name })
-            : t('player.playBar.favorite', { name: playerStore.playMusic.name }),
-          isFavorite ? 'ri-heart-line' : 'ri-heart-fill'
+            ? t('player.playBar.favorite', { name: playerStore.playMusic.name })
+            : t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
+          isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
        );
        break;
      }
@@ -139,9 +114,10 @@ export async function handleShortcutAction(action: string) {
    console.error(`执行快捷键动作 ${action} 时出错:`, error);
  } finally {
    // 确保在出错时也能清除超时
-    clearTimeout(actionTimeout);
-    actionTimeout = null;
-    console.log(`[AppShortcuts] 动作完成: ${action}, 时间戳: ${Date.now()}, 耗时: ${Date.now() - now}ms`);
+    if (actionTimeout) {
+      clearTimeout(actionTimeout);
+      actionTimeout = null;
+    }
  }
 }

--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -73,7 +73,7 @@

 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
-import { computed, onMounted, onUnmounted, ref, watch, nextTick, onActivated, onDeactivated } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';

@@ -86,10 +86,6 @@ import { usePlayerStore } from '@/store';
 import { IArtist } from '@/type/artist';
 import { getImgUrl } from '@/utils';

-defineOptions({
-  name: 'ArtistDetail'
-});
-
 const { t } = useI18n();
 const route = useRoute();
 const playerStore = usePlayerStore();
@@ -126,33 +122,10 @@ const albumsLoadMoreRef = ref<HTMLElement | null>(null);
 let songsObserver: IntersectionObserver | null = null;
 let albumsObserver: IntersectionObserver | null = null;

-// 添加上一个ID的引用，用于比较
-const previousId = ref<string | null>(null);
-
-// 简化缓存机制
-const artistDataCache = new Map();
-
-// 单个缓存键函数
-const getCacheKey = (id: string | number) => `artist_${id}`;
-
 // 加载歌手信息
 const loadArtistInfo = async () => {
  if (!artistId.value) return;

-  // 简化缓存检查
-  const cacheKey = getCacheKey(artistId.value);
-  if (artistDataCache.has(cacheKey)) {
-    console.log('使用缓存数据');
-    const cachedData = artistDataCache.get(cacheKey);
-    artistInfo.value = cachedData.artistInfo;
-    songs.value = cachedData.songs;
-    albums.value = cachedData.albums;
-    songPage.value = cachedData.songPage;
-    albumPage.value = cachedData.albumPage;
-    return;
-  }
-
-  // 加载新数据
  loading.value = true;
  try {
    const info = await getArtistDetail(artistId.value);
@@ -162,15 +135,6 @@ const loadArtistInfo = async () => {
    // 重置分页并加载初始数据
    resetPagination();
    await Promise.all([loadSongs(), loadAlbums()]);
-    
-    // 保存到缓存
-    artistDataCache.set(cacheKey, {
-      artistInfo: artistInfo.value,
-      songs: [...songs.value],
-      albums: [...albums.value],
-      songPage: { ...songPage.value },
-      albumPage: { ...albumPage.value }
-    });
  } catch (error) {
    console.error('加载歌手信息失败:', error);
  } finally {
@@ -277,99 +241,79 @@ const handlePlay = () => {
  );
 };

-// 简化观察器设置
-const setupObservers = () => {
-  // 清理之前的观察器
+// 设置无限滚动观察器
+const setupIntersectionObservers = () => {
+  // 清除现有的观察器
  if (songsObserver) songsObserver.disconnect();
  if (albumsObserver) albumsObserver.disconnect();
-  
-  // 创建观察器(如果不存在)
-  if (!songsObserver) {
-    songsObserver = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && songPage.value.hasMore) {
-          loadSongs();
-        }
-      },
-      { threshold: 0.1 }
-    );
-  }
-  
-  if (!albumsObserver) {
-    albumsObserver = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && albumPage.value.hasMore) {
-          loadAlbums();
-        }
-      },
-      { threshold: 0.1 }
-    );
-  }
-  
-  // 观察当前标签页的元素
-  nextTick(() => {
-    if (activeTab.value === 'songs' && songsLoadMoreRef.value) {
-      songsObserver?.observe(songsLoadMoreRef.value);
-    } else if (activeTab.value === 'albums' && albumsLoadMoreRef.value) {
-      albumsObserver?.observe(albumsLoadMoreRef.value);
+
+  // 创建歌曲观察器
+  songsObserver = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && !songLoading.value && songPage.value.hasMore) {
+      loadSongs();
+    }
+  }, { threshold: 0.1 });
+
+  // 创建专辑观察器
+  albumsObserver = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && !albumLoading.value && albumPage.value.hasMore) {
+      loadAlbums();
+    }
+  }, { threshold: 0.1 });
+
+  // 监听标签页更改，重新设置观察器
+  watch(activeTab, (newTab) => {
+    nextTick(() => {
+      if (newTab === 'songs' && songsLoadMoreRef.value && songPage.value.hasMore) {
+        songsObserver?.observe(songsLoadMoreRef.value);
+      } else if (newTab === 'albums' && albumsLoadMoreRef.value && albumPage.value.hasMore) {
+        albumsObserver?.observe(albumsLoadMoreRef.value);
+      }
+    });
+  });
+
+  // 监听引用元素的变化
+  watch(songsLoadMoreRef, (el) => {
+    if (el && activeTab.value === 'songs' && songPage.value.hasMore) {
+      songsObserver?.observe(el);
+    }
+  });
+
+  watch(albumsLoadMoreRef, (el) => {
+    if (el && activeTab.value === 'albums' && albumPage.value.hasMore) {
+      albumsObserver?.observe(el);
    }
  });
 };

-// 监听标签切换
-watch(activeTab, () => {
-  setupObservers();
-});
-
-// 监听引用元素的变化
-watch([songsLoadMoreRef, albumsLoadMoreRef], () => {
-  setupObservers();
-});
-
-onActivated(() => {
-  // 确保当前路由是艺术家详情页
-  if (route.name === 'artistDetail') {
-    const currentId = route.params.id as string;
-    
-    // 首次加载或ID变化时加载数据
-    if (!previousId.value || previousId.value !== currentId) {
-      console.log('ID已变化，加载新数据');
-      previousId.value = currentId;
-      activeTab.value = 'songs';
-      loadArtistInfo();
-    }
-    
-    // 重新设置观察器
-    setupObservers();
-  }
-});
-
 onMounted(() => {
-  // 首次挂载时加载数据
-  if (route.params.id) {
-    previousId.value = route.params.id as string;
-    loadArtistInfo();
-    setupObservers();
-  }
+  loadArtistInfo();
+  
+  // 添加nextTick以确保DOM已更新
+  nextTick(() => {
+    setupIntersectionObservers();
+  });
 });

-onDeactivated(() => {
-  // 断开观察器但不清除引用
+onUnmounted(() => {
+  // 清理观察器
  if (songsObserver) songsObserver.disconnect();
  if (albumsObserver) albumsObserver.disconnect();
 });

-onUnmounted(() => {
-  // 完全清理观察器
-  if (songsObserver) {
-    songsObserver.disconnect();
-    songsObserver = null;
+// 监听路由参数变化
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (newId) {
+      loadArtistInfo();
+      // 添加nextTick以确保DOM已更新
+      nextTick(() => {
+        setupIntersectionObservers();
+      });
+    }
  }
-  if (albumsObserver) {
-    albumsObserver.disconnect();
-    albumsObserver = null;
-  }
-});
+);
 </script>

 <style lang="scss" scoped>
--- a/src/renderer/views/list/index.vue
+++ b/src/renderer/views/list/index.vue
@@ -31,7 +31,7 @@
          class="recommend-item"
          :class="setAnimationClass('animate__bounceIn')"
          :style="getItemAnimationDelay(index)"
-          @click.stop="openPlaylist(item)"
+          @click.stop="selectRecommendItem(item)"
        >
          <div class="recommend-item-img">
            <n-image
@@ -57,15 +57,22 @@
      </div>
      <div v-if="!hasMore && recommendList.length > 0" class="no-more">没有更多了</div>
    </n-scrollbar>
+    <music-list
+      v-model:show="showMusic"
+      v-model:loading="listLoading"
+      :name="recommendItem?.name || ''"
+      :song-list="listDetail?.playlist.tracks || []"
+      :list-info="listDetail?.playlist"
+    />
  </div>
 </template>

 <script lang="ts" setup>
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';

 import { getPlaylistCategory } from '@/api/home';
 import { getListByCat, getListDetail } from '@/api/list';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import MusicList from '@/components/MusicList.vue';
 import type { IRecommendItem } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
 import type { IPlayListSort } from '@/type/playlist';
@@ -78,6 +85,7 @@ defineOptions({
 const TOTAL_ITEMS = 42; // 每页数量

 const recommendList = ref<any[]>([]);
+const showMusic = ref(false);
 const page = ref(0);
 const hasMore = ref(true);
 const isLoadingMore = ref(false);
@@ -92,25 +100,15 @@ const recommendItem = ref<IRecommendItem | null>();
 const listDetail = ref<IListDetail | null>();
 const listLoading = ref(true);

-const router = useRouter();
-
-const openPlaylist = (item: any) => {
-  recommendItem.value = item;
+const selectRecommendItem = async (item: IRecommendItem) => {
  listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
-    listDetail.value = res.data;
-    listLoading.value = false;
-    
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: false
-    });
-  });
+  recommendItem.value = null;
+  listDetail.value = null;
+  showMusic.value = true;
+  recommendItem.value = item;
+  const { data } = await getListDetail(item.id);
+  listDetail.value = data;
+  listLoading.value = false;
 };

 const route = useRoute();
--- a/src/renderer/views/lyric/index.vue
+++ b/src/renderer/views/lyric/index.vue
@@ -682,7 +682,7 @@ body,
    --text-secondary: #ffffffea;
    --highlight-color: #1db954;
    --control-bg: rgba(124, 124, 124, 0.3);
-    &:hover:not(.lyric_lock) {
+    &:hover {
      background: rgba(44, 44, 44, 0.466) !important;
    }
  }
@@ -692,7 +692,7 @@ body,
    --text-secondary: #39393989;
    --highlight-color: #1db954;
    --control-bg: rgba(255, 255, 255, 0.3);
-    &:hover:not(.lyric_lock) {
+    &:hover {
      background: rgba(0, 0, 0, 0.434) !important;
    }
  }
--- a/src/renderer/views/music/MusicListPage.vue
+++ b/src/renderer/views/music/MusicListPage.vue
@@ -1,774 +0,0 @@
-<template>
-  <div class="music-page">
-    <div class="music-header h-12 flex items-center justify-between">
-      <n-ellipsis :line-clamp="1" class="flex-shrink-0 mr-3">
-        <div class="music-title">
-          {{ name }}
-        </div>
-      </n-ellipsis>
-
-      <!-- 搜索框 -->
-      <div class="flex-grow flex-1 flex items-center justify-end">
-        <div class="search-container">
-          <n-input
-            v-model:value="searchKeyword"
-            :placeholder="t('comp.musicList.searchSongs')"
-            clearable
-            round
-            size="small"
-          >
-            <template #prefix>
-              <i class="icon iconfont ri-search-line text-sm"></i>
-            </template>
-          </n-input>
-        </div>
-      </div>
-    </div>
-
-    <div class="music-content">
-      <!-- 左侧歌单信息 -->
-      <div class="music-info">
-        <div class="music-cover">
-          <n-image
-            :src="getImgUrl(getCoverImgUrl, '500y500')"
-            class="cover-img"
-            preview-disabled
-            :class="setAnimationClass('animate__fadeIn')"
-            object-fit="cover"
-          />
-        </div>
-        <div v-if="listInfo?.creator" class="creator-info">
-          <n-avatar round :size="24" :src="getImgUrl(listInfo.creator.avatarUrl, '50y50')" />
-          <span class="creator-name">{{ listInfo.creator.nickname }}</span>
-        </div>
-        <div v-if="total" class="music-total">{{ t('player.songNum', { num: total }) }}</div>
-
-        <n-scrollbar style="max-height: 200px">
-          <div v-if="listInfo?.description" class="music-desc">
-            {{ listInfo.description }}
-          </div>
-        </n-scrollbar>
-      </div>
-
-      <!-- 右侧歌曲列表 -->
-      <div class="music-list-container">
-        <div class="music-list">
-          <n-spin :show="loadingList || loading">
-            <div class="music-list-content">
-              <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
-                {{ t('comp.musicList.noSearchResults') }}
-              </div>
-
-              <!-- 虚拟列表，设置正确的固定高度 -->
-              <n-virtual-list
-                ref="songListRef"
-                class="song-virtual-list"
-                style="height: calc(80vh - 60px)"
-                :items="filteredSongs"
-                :item-size="70"
-                item-resizable
-                key-field="id"
-                @scroll="handleVirtualScroll"
-              >
-                <template #default="{ item }">
-                  <div class="double-item">
-                    <song-item
-                      :item="formatSong(item)"
-                      :can-remove="canRemove"
-                      @play="handlePlay"
-                      @remove-song="handleRemoveSong"
-                    />
-                  </div>
-                </template>
-              </n-virtual-list>
-            </div>
-          </n-spin>
-        </div>
-      </div>
-    </div>
-    <play-bottom />
-  </div>
-</template>
-
-<script setup lang="ts">
-// 添加组件名称定义
-defineOptions({
-  name: 'MusicList'
-});
-
-import PinyinMatch from 'pinyin-match';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { updatePlaylistTracks } from '@/api/music';
-import { useMessage } from 'naive-ui';
-
-import { getMusicDetail, getMusicListByType } from '@/api/music';
-import SongItem from '@/components/common/SongItem.vue';
-import PlayBottom from '@/components/common/PlayBottom.vue';
-import { useMusicStore, usePlayerStore } from '@/store';
-import { SongResult } from '@/type/music';
-import { getImgUrl, setAnimationClass } from '@/utils';
-
-const { t } = useI18n();
-const route = useRoute();
-const playerStore = usePlayerStore();
-const musicStore = useMusicStore();
-const message = useMessage();
-
-// 从路由参数或状态管理获取数据
-const name = ref('');
-const loading = ref(false);
-const songList = ref<any[]>([]);
-const listInfo = ref<any>(null);
-const canRemove = ref(false);
-
-const page = ref(0);
-const pageSize = 40;
-const isLoadingMore = ref(false);
-const displayedSongs = ref<SongResult[]>([]);
-const loadingList = ref(false);
-const loadedIds = ref(new Set<number>()); // 用于追踪已加载的歌曲ID
-const isPlaylistLoading = ref(false); // 标记是否正在加载播放列表
-const completePlaylist = ref<SongResult[]>([]); // 存储完整的播放列表
-const hasMore = ref(true); // 标记是否还有更多数据可加载
-const searchKeyword = ref(''); // 搜索关键词
-const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加载完成
-
-// 计算总数
-const total = computed(() => {
-  if (listInfo.value?.trackIds) {
-    return listInfo.value.trackIds.length;
-  }
-  return songList.value.length;
-});
-
-// 初始化数据
-onMounted(() => {
-  initData();
-});
-
-// 从 pinia 或路由参数获取数据
-const initData = () => {
-  // 优先从 pinia 获取数据
-  if (musicStore.currentMusicList) {
-    name.value = musicStore.currentMusicListName || '';
-    songList.value = musicStore.currentMusicList || [];
-    listInfo.value = musicStore.currentListInfo || null;
-    canRemove.value = musicStore.canRemoveSong || false;
-    
-    // 初始化歌曲列表
-    initSongList(songList.value);
-    return;
-  }
-  
-  // 从路由参数获取
-  const routeId = route.params.id as string;
-  const routeType = route.query.type as string;
-  
-  if (routeId) {
-    // 这里根据 type 和 id 加载数据
-    // 例如: 获取歌单、专辑等
-    loading.value = true;
-    loadDataByType(routeType, routeId).finally(() => {
-      loading.value = false;
-    });
-  }
-};
-
-// 根据类型加载数据
-const loadDataByType = async (type: string, id: string) => {
-  try {
-    const result = await getMusicListByType(type, id);
-    
-    if (type === 'album') {
-      const { songs, album } = result.data;
-      name.value = album.name;
-      songList.value = songs.map((song: any) => {
-        song.al.picUrl = song.al.picUrl || album.picUrl;
-        song.picUrl = song.al.picUrl || album.picUrl || song.picUrl;
-        return song;
-      });
-      listInfo.value = {
-        ...album,
-        creator: {
-          avatarUrl: album.artist.img1v1Url,
-          nickname: `${album.artist.name} - ${album.company}`
-        },
-        description: album.description
-      };
-    } else if (type === 'playlist') {
-      const { playlist } = result.data;
-      name.value = playlist.name;
-      listInfo.value = playlist;
-      
-      // 初始化歌曲列表
-      if (playlist.tracks) {
-        songList.value = playlist.tracks;
-      }
-    }
-    
-    // 初始化歌曲列表
-    initSongList(songList.value);
-  } catch (error) {
-    console.error('加载数据失败:', error);
-  }
-};
-
-const getCoverImgUrl = computed(() => {
-  const coverImgUrl = listInfo.value?.coverImgUrl;
-  if (coverImgUrl) {
-    return coverImgUrl;
-  }
-
-  const song = songList.value[0];
-  if (song?.picUrl) {
-    return song.picUrl;
-  }
-  if (song?.al?.picUrl) {
-    return song.al.picUrl;
-  }
-  if (song?.album?.picUrl) {
-    return song.album.picUrl;
-  }
-  return '';
-});
-
-// 过滤歌曲列表
-const filteredSongs = computed(() => {
-  if (!searchKeyword.value) {
-    return displayedSongs.value;
-  }
-
-  const keyword = searchKeyword.value.toLowerCase().trim();
-  return displayedSongs.value.filter((song) => {
-    const songName = song.name?.toLowerCase() || '';
-    const albumName = song.al?.name?.toLowerCase() || '';
-    const artists = song.ar || song.artists || [];
-
-    // 原始文本匹配
-    const nameMatch = songName.includes(keyword);
-    const albumMatch = albumName.includes(keyword);
-    const artistsMatch = artists.some((artist: any) => {
-      return artist.name?.toLowerCase().includes(keyword);
-    });
-
-    // 拼音匹配
-    const namePinyinMatch = song.name && PinyinMatch.match(song.name, keyword);
-    const albumPinyinMatch = song.al?.name && PinyinMatch.match(song.al.name, keyword);
-    const artistsPinyinMatch = artists.some((artist: any) => {
-      return artist.name && PinyinMatch.match(artist.name, keyword);
-    });
-
-    return (
-      nameMatch ||
-      albumMatch ||
-      artistsMatch ||
-      namePinyinMatch ||
-      albumPinyinMatch ||
-      artistsPinyinMatch
-    );
-  });
-});
-
-// 格式化歌曲数据
-const formatSong = (item: any) => {
-  if (!item) {
-    return null;
-  }
-  return {
-    ...item,
-    picUrl: item.al?.picUrl || item.picUrl,
-    song: {
-      artists: item.ar || item.artists,
-      name: item.al?.name || item.name,
-      id: item.al?.id || item.id
-    }
-  };
-};
-
-/**
- * 加载歌曲数据的核心函数
- * @param ids 要加载的歌曲ID数组
- * @param appendToList 是否将加载的歌曲追加到现有列表
- * @param updateComplete 是否更新完整播放列表
- */
-const loadSongs = async (ids: number[], appendToList = true, updateComplete = false) => {
-  if (ids.length === 0) return [];
-
-  try {
-    console.log(`请求歌曲详情，ID数量: ${ids.length}`);
-    const { data } = await getMusicDetail(ids);
-
-    if (data?.songs) {
-      console.log(`API返回歌曲数量: ${data.songs.length}`);
-
-      // 直接使用API返回的所有歌曲，不再过滤已加载的歌曲
-      // 因为当需要完整加载列表时，我们希望获取所有歌曲，即使ID可能重复
-      const { songs } = data;
-
-      // 只在非更新完整列表时执行过滤
-      let newSongs = songs;
-      if (!updateComplete) {
-        // 在普通加载模式下继续过滤已加载的歌曲，避免重复
-        newSongs = songs.filter((song: any) => !loadedIds.value.has(song.id));
-        console.log(`过滤已加载ID后剩余歌曲数量: ${newSongs.length}`);
-      }
-
-      // 更新已加载ID集合
-      songs.forEach((song: any) => {
-        loadedIds.value.add(song.id);
-      });
-
-      // 追加到显示列表 - 仅当appendToList=true时添加到displayedSongs
-      if (appendToList) {
-        displayedSongs.value.push(...newSongs);
-      }
-
-      // 更新完整播放列表 - 仅当updateComplete=true时添加到completePlaylist
-      if (updateComplete) {
-        completePlaylist.value.push(...songs);
-        console.log(`已添加到完整播放列表，当前完整列表长度: ${completePlaylist.value.length}`);
-      }
-
-      return updateComplete ? songs : newSongs;
-    }
-    console.log('API返回无歌曲数据');
-    return [];
-  } catch (error) {
-    console.error('加载歌曲失败:', error);
-  }
-
-  return [];
-};
-
-// 加载完整播放列表
-const loadFullPlaylist = async () => {
-  if (isPlaylistLoading.value || isFullPlaylistLoaded.value) return;
-
-  isPlaylistLoading.value = true;
-  // 记录开始时间
-  const startTime = Date.now();
-  console.log(`开始加载完整播放列表，当前显示列表长度: ${displayedSongs.value.length}`);
-
-  try {
-    // 如果没有trackIds，直接使用当前歌曲列表并标记为已完成
-    if (!listInfo.value?.trackIds) {
-      isFullPlaylistLoaded.value = true;
-      console.log('无trackIds信息，使用当前列表作为完整列表');
-      return;
-    }
-
-    // 获取所有trackIds
-    const allIds = listInfo.value.trackIds.map((item) => item.id);
-    console.log(`歌单共有歌曲ID: ${allIds.length}首`);
-
-    // 重置completePlaylist和当前显示歌曲ID集合，保证不会重复添加歌曲
-    completePlaylist.value = [];
-
-    // 使用Set记录所有已加载的歌曲ID
-    const loadedSongIds = new Set<number>();
-
-    // 将当前显示列表中的歌曲和ID添加到集合中
-    displayedSongs.value.forEach((song) => {
-      loadedSongIds.add(song.id as number);
-      // 将已有歌曲添加到completePlaylist
-      completePlaylist.value.push(song);
-    });
-
-    console.log(
-      `已有显示歌曲: ${displayedSongs.value.length}首，已有ID数量: ${loadedSongIds.size}`
-    );
-
-    // 过滤出尚未加载的歌曲ID
-    const unloadedIds = allIds.filter((id) => !loadedSongIds.has(id));
-    console.log(`还需要加载的歌曲ID数量: ${unloadedIds.length}`);
-
-    if (unloadedIds.length === 0) {
-      console.log('所有歌曲已加载，无需再次加载');
-      isFullPlaylistLoaded.value = true;
-      hasMore.value = false;
-      return;
-    }
-
-    // 分批加载所有未加载的歌曲
-    const batchSize = 500; // 每批加载的歌曲数量
-
-    for (let i = 0; i < unloadedIds.length; i += batchSize) {
-      const batchIds = unloadedIds.slice(i, i + batchSize);
-      if (batchIds.length === 0) continue;
-
-      console.log(`请求第${Math.floor(i / batchSize) + 1}批歌曲，数量: ${batchIds.length}`);
-      // 关键修改: 设置appendToList为false，避免loadSongs直接添加到displayedSongs
-      const loadedBatch = await loadSongs(batchIds, false, false);
-
-      // 添加新加载的歌曲到displayedSongs
-      if (loadedBatch.length > 0) {
-        // 过滤掉已有的歌曲，确保不会重复添加
-        const newSongs = loadedBatch.filter((song) => !loadedSongIds.has(song.id as number));
-
-        // 更新已加载ID集合
-        newSongs.forEach((song) => {
-          loadedSongIds.add(song.id as number);
-        });
-
-        console.log(`新增${newSongs.length}首歌曲到显示列表`);
-
-        // 更新显示列表和完整播放列表
-        if (newSongs.length > 0) {
-          // 添加到显示列表
-          displayedSongs.value = [...displayedSongs.value, ...newSongs];
-
-          // 添加到完整播放列表
-          completePlaylist.value.push(...newSongs);
-
-          // 如果当前正在播放的列表与这个列表匹配，实时更新播放列表
-          const currentPlaylist = playerStore.playList;
-          if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
-            console.log('实时更新当前播放列表');
-            playerStore.setPlayList(displayedSongs.value.map(formatSong));
-          }
-        }
-      }
-
-      // 添加小延迟避免请求过于密集
-      if (i + batchSize < unloadedIds.length) {
-        await new Promise<void>((resolve) => {
-          setTimeout(() => resolve(), 100);
-        });
-      }
-    }
-
-    // 加载完成，更新状态
-    isFullPlaylistLoaded.value = true;
-    hasMore.value = false;
-
-    // 计算加载耗时
-    const endTime = Date.now();
-    const timeUsed = Math.round(((endTime - startTime) / 1000) * 100) / 100;
-
-    console.log(
-      `完整播放列表加载完成，共加载${displayedSongs.value.length}首歌曲，耗时${timeUsed}秒`
-    );
-    console.log(`歌单应有${allIds.length}首歌，实际加载${displayedSongs.value.length}首`);
-
-    // 检查加载的歌曲数量是否与预期相符
-    if (displayedSongs.value.length !== allIds.length) {
-      console.warn(
-        `警告: 加载的歌曲数量(${displayedSongs.value.length})与歌单应有数量(${allIds.length})不符`
-      );
-
-      // 如果数量不符，可能是API未返回所有歌曲，打印缺失的歌曲ID
-      if (displayedSongs.value.length < allIds.length) {
-        const loadedIds = new Set(displayedSongs.value.map((song) => song.id));
-        const missingIds = allIds.filter((id) => !loadedIds.has(id));
-        console.warn(`缺失的歌曲ID: ${missingIds.join(', ')}`);
-      }
-    }
-  } catch (error) {
-    console.error('加载完整播放列表失败:', error);
-  } finally {
-    isPlaylistLoading.value = false;
-  }
-};
-
-// 处理播放
-const handlePlay = async () => {
-  // 当搜索状态下播放时，只播放过滤后的歌曲
-  if (searchKeyword.value) {
-    playerStore.setPlayList(filteredSongs.value.map(formatSong));
-    return;
-  }
-
-  // 如果完整播放列表已加载完成
-  if (isFullPlaylistLoaded.value && completePlaylist.value.length > 0) {
-    playerStore.setPlayList(completePlaylist.value.map(formatSong));
-    return;
-  }
-
-  // 如果完整播放列表未加载完成，先使用当前已加载的歌曲开始播放
-  playerStore.setPlayList(displayedSongs.value.map(formatSong));
-
-  // 如果完整播放列表正在加载中，不需要重新触发加载
-  if (isPlaylistLoading.value) {
-    return;
-  }
-
-  // 在后台继续加载完整播放列表（如果未加载完成）
-  if (!isFullPlaylistLoaded.value) {
-    console.log('播放时继续在后台加载完整列表');
-    loadFullPlaylist();
-  }
-};
-
-// 添加从歌单移除歌曲的方法
-const handleRemoveSong = async (songId: number) => {
-  if (!listInfo.value?.id || !canRemove.value) return;
-
-  try {
-    const res = await updatePlaylistTracks({
-      op: 'del',
-      pid: listInfo.value.id,
-      tracks: songId.toString()
-    });
-
-    if (res.status === 200) {
-      message.success(t('user.message.deleteSuccess'));
-      
-      // 从显示列表和完整播放列表中移除歌曲
-      displayedSongs.value = displayedSongs.value.filter(song => song.id !== songId);
-      completePlaylist.value = completePlaylist.value.filter(song => song.id !== songId);
-      
-      // 如果正在播放该列表，也需要更新播放列表
-      const currentPlaylist = playerStore.playList;
-      if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
-        playerStore.setPlayList(displayedSongs.value.map(formatSong));
-      }
-      
-      // 从Pinia状态中也移除
-      if (musicStore.currentMusicList) {
-        musicStore.removeSongFromList(songId);
-      }
-    } else {
-      throw new Error(res.data?.msg || t('user.message.deleteFailed'));
-    }
-  } catch (error: any) {
-    console.error('删除歌曲失败:', error);
-    message.error(error.message || t('user.message.deleteFailed'));
-  }
-};
-
-// 加载更多歌曲
-const loadMoreSongs = async () => {
-  if (isFullPlaylistLoaded.value) {
-    hasMore.value = false;
-    return;
-  }
-
-  if (searchKeyword.value) {
-    return;
-  }
-
-  if (isLoadingMore.value || displayedSongs.value.length >= total.value) {
-    hasMore.value = false;
-    return;
-  }
-
-  isLoadingMore.value = true;
-
-  try {
-    const start = displayedSongs.value.length;
-    const end = Math.min(start + pageSize, total.value);
-
-    if (listInfo.value?.trackIds) {
-      const trackIdsToLoad = listInfo.value.trackIds
-        .slice(start, end)
-        .map((item) => item.id)
-        .filter((id) => !loadedIds.value.has(id));
-
-      if (trackIdsToLoad.length > 0) {
-        await loadSongs(trackIdsToLoad, true, false);
-      }
-    } else if (start < songList.value.length) {
-      const newSongs = songList.value.slice(start, end);
-      newSongs.forEach((song) => {
-        if (!loadedIds.value.has(song.id)) {
-          loadedIds.value.add(song.id);
-          displayedSongs.value.push(song);
-        }
-      });
-    }
-
-    hasMore.value = displayedSongs.value.length < total.value;
-  } catch (error) {
-    console.error('加载更多歌曲失败:', error);
-  } finally {
-    isLoadingMore.value = false;
-    loadingList.value = false;
-  }
-};
-
-// 处理虚拟列表滚动事件
-const handleVirtualScroll = (e: any) => {
-  if (!e || !e.target) return;
-
-  const { scrollTop, scrollHeight, clientHeight } = e.target;
-  const threshold = 200;
-
-  if (
-    scrollHeight - scrollTop - clientHeight < threshold &&
-    !isLoadingMore.value &&
-    hasMore.value &&
-    !searchKeyword.value // 搜索状态下不触发加载更多
-  ) {
-    loadMoreSongs();
-  }
-};
-
-// 初始化歌曲列表
-const initSongList = (songs: any[]) => {
-  if (songs.length > 0) {
-    displayedSongs.value = [...songs];
-    songs.forEach((song) => loadedIds.value.add(song.id));
-    page.value = Math.ceil(songs.length / pageSize);
-  }
-
-  // 检查是否还有更多数据可加载
-  hasMore.value = displayedSongs.value.length < total.value;
-};
-
-watch(
-  () => listInfo.value,
-  (newListInfo) => {
-    if (newListInfo?.trackIds) {
-      loadFullPlaylist();
-    }
-  },
-  { deep: true }
-);
-
-// 监听搜索关键词变化
-watch(searchKeyword, () => {
-  // 当搜索关键词为空时，考虑加载更多歌曲
-  if (!searchKeyword.value && hasMore.value && displayedSongs.value.length < total.value) {
-    loadMoreSongs();
-  }
-});
-
-// 组件卸载时清理状态
-onUnmounted(() => {
-  isPlaylistLoading.value = false;
-});
-</script>
-
-<style scoped lang="scss">
-.music {
-  &-title {
-    @apply text-xl font-bold text-gray-900 dark:text-white;
-  }
-
-  &-total {
-    @apply text-sm font-normal text-gray-500 dark:text-gray-400;
-  }
-
-  &-page {
-    @apply h-full bg-light-100 dark:bg-dark-100 px-4 mr-2 rounded-2xl;
-  }
-
-  &-close {
-    @apply cursor-pointer text-gray-500 dark:text-white hover:text-gray-900 dark:hover:text-gray-300 flex gap-2 items-center transition;
-    .icon {
-      @apply text-3xl;
-    }
-  }
-
-  &-content {
-    @apply flex h-[calc(100%-60px)];
-  }
-
-  &-info {
-    @apply w-[25%] flex-shrink-0 pr-8 flex flex-col;
-
-    .music-cover {
-      @apply w-full aspect-square rounded-2xl overflow-hidden mb-4 min-h-[250px];
-      .cover-img {
-        @apply w-full h-full object-cover;
-      }
-    }
-
-    .creator-info {
-      @apply flex items-center mb-4;
-      .creator-name {
-        @apply ml-2 text-gray-700 dark:text-gray-300;
-      }
-    }
-
-    .music-desc {
-      @apply text-sm text-gray-600 dark:text-gray-400 leading-relaxed pr-4;
-    }
-  }
-
-  &-list {
-    @apply flex-grow min-h-0;
-    &-container {
-      @apply flex-grow min-h-0 flex flex-col relative;
-    }
-
-    &-content {
-      @apply min-h-[calc(80vh-60px)];
-    }
-  }
-}
-
-.search-container {
-  @apply max-w-md;
-
-  :deep(.n-input) {
-    @apply bg-light-200 dark:bg-dark-200;
-  }
-
-  .icon {
-    @apply text-gray-500 dark:text-gray-400;
-  }
-}
-
-.no-result {
-  @apply text-center py-8 text-gray-500 dark:text-gray-400;
-}
-
-/* 虚拟列表样式 */
-.song-virtual-list {
-  :deep(.n-virtual-list__scroll) {
-    scrollbar-width: thin;
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-      @apply bg-gray-400 dark:bg-gray-600 rounded;
-    }
-  }
-}
-
-.mobile {
-  .music-page {
-    @apply px-4 overflow-hidden mr-0;
-  }
-
-  .music-content {
-    @apply flex-col;
-  }
-
-  .music-info {
-    @apply w-full pr-0 mb-2 flex flex-row;
-
-    .music-cover {
-      @apply w-[100px] h-[100px] rounded-lg overflow-hidden mb-4;
-    }
-    .music-detail {
-      @apply flex-1 ml-4;
-    }
-  }
-
-  .music-title {
-    @apply text-base;
-  }
-
-  .search-container {
-    @apply max-w-[50%];
-  }
-}
-
-.loading-more {
-  @apply text-center py-4 text-gray-500 dark:text-gray-400;
-}
-
-.double-item {
-  @apply mb-2 bg-light-200 bg-opacity-30 dark:bg-dark-200 dark:bg-opacity-20 rounded-3xl;
-}
-
-.mobile {
-  .music-info {
-    @apply hidden;
-  }
-}
-</style> 
--- a/src/renderer/views/mv/index.vue
+++ b/src/renderer/views/mv/index.vue
@@ -116,7 +116,8 @@ onMounted(async () => {

 const handleShowMv = async (item: IMvItem, index: number) => {
  playerStore.setIsPlay(false);
-  audioService.pause();
+  playerStore.setPlayMusic(false);
+  audioService.getCurrentSound()?.pause();
  showMv.value = true;
  currentIndex.value = index;
  playMvItem.value = item;
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -486,7 +486,7 @@ import { type Platform } from '@/types/music';
 import config from '../../../../package.json';

 // 所有平台默认值
-const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
+const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];

 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
--- a/src/renderer/views/user/detail.vue
+++ b/src/renderer/views/user/detail.vue
@@ -63,7 +63,7 @@
                  class="playlist-item"
                  :class="setAnimationClass('animate__fadeInUp')"
                  :style="setAnimationDelay(index, 50)"
-                  @click="openPlaylist(item)"
+                  @click="showPlaylist(item.id, item.name)"
                >
                  <div class="playlist-cover">
                    <n-image
@@ -120,6 +120,14 @@
        <div class="pb-20"></div>
      </div>
    </n-scrollbar>
+
+    <music-list
+      v-model:show="isShowList"
+      :name="currentList?.name || ''"
+      :song-list="currentList?.tracks || []"
+      :list-info="currentList"
+      :loading="listLoading"
+    />
  </div>
 </template>

@@ -132,7 +140,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getListDetail } from '@/api/list';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import SongItem from '@/components/common/SongItem.vue';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import MusicList from '@/components/MusicList.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
@@ -158,6 +166,7 @@ const recordList = ref<any[]>([]);
 const loading = ref(true);

 // 歌单详情相关
+const isShowList = ref(false);
 const currentList = ref<Playlist>();
 const listLoading = ref(false);

@@ -199,23 +208,21 @@ const loadUserData = async () => {
  }
 };

-// 替换显示歌单的方法
-const openPlaylist = (item: any) => {
+// 展示歌单
+const showPlaylist = async (id: number, name: string) => {
+  isShowList.value = true;
  listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
-    currentList.value = res.data.playlist;
+
+  try {
+    currentList.value = { id, name } as Playlist;
+    const { data } = await getListDetail(id);
+    currentList.value = data.playlist;
+  } catch (error) {
+    console.error('加载歌单详情失败:', error);
+    message.error('加载歌单详情失败');
+  } finally {
    listLoading.value = false;
-    
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: false
-    });
-  });
+  }
 };

 // 播放歌曲
--- a/src/renderer/views/user/index.vue
+++ b/src/renderer/views/user/index.vue
@@ -34,7 +34,7 @@
              v-for="(item, index) in playList"
              :key="index"
              class="play-list-item"
-              @click="openPlaylist(item)"
+              @click="showPlaylist(item.id, item.name)"
            >
              <n-image
                :src="getImgUrl(item.coverImgUrl, '50y50')"
@@ -82,6 +82,15 @@
        </n-scrollbar>
      </div>
    </div>
+    <music-list
+      v-model:show="isShowList"
+      :name="list?.name || ''"
+      :song-list="list?.tracks || []"
+      :list-info="list"
+      :loading="listLoading"
+      :can-remove="true"
+      @remove-song="handleRemoveFromPlaylist"
+    />
  </div>
 </template>

@@ -92,10 +101,11 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';

 import { getListDetail } from '@/api/list';
+import { updatePlaylistTracks } from '@/api/music';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import MusicList from '@/components/MusicList.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
@@ -115,6 +125,7 @@ const playList = ref<any[]>([]);
 const recordList = ref();
 const infoLoading = ref(false);
 const mounted = ref(true);
+const isShowList = ref(false);
 const list = ref<Playlist>();
 const listLoading = ref(false);
 const message = useMessage();
@@ -223,23 +234,47 @@ onMounted(() => {
  checkLoginStatus() && loadData();
 });

-// 替换显示歌单的方法
-const openPlaylist = (item: any) => {
+// 展示歌单
+const showPlaylist = async (id: number, name: string) => {
+  isShowList.value = true;
  listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
-    list.value = res.data.playlist;
-    listLoading.value = false;
-    
-    navigateToMusicList(router, {
-      id: item.id,
-      type: 'playlist',
-      name: item.name,
-      songList: res.data.playlist.tracks || [],
-      listInfo: res.data.playlist,
-      canRemove: true // 保留可移除功能
+
+  list.value = {
+    name,
+    id
+  } as Playlist;
+  await loadPlaylistDetail(id);
+  listLoading.value = false;
+};
+
+// 加载歌单详情
+const loadPlaylistDetail = async (id: number) => {
+  const { data } = await getListDetail(id);
+  list.value = data.playlist;
+};
+
+// 从歌单中删除歌曲
+const handleRemoveFromPlaylist = async (songId: number) => {
+  if (!list.value?.id) return;
+
+  try {
+    const res = await updatePlaylistTracks({
+      op: 'del',
+      pid: list.value.id,
+      tracks: songId.toString()
    });
-  });
+
+    if (res.status === 200) {
+      message.success(t('user.message.deleteSuccess'));
+      // 重新加载歌单详情
+      await loadPlaylistDetail(list.value.id);
+    } else {
+      throw new Error(res.data?.msg || t('user.message.deleteFailed'));
+    }
+  } catch (error: any) {
+    console.error('删除歌曲失败:', error);
+    message.error(error.message || t('user.message.deleteFailed'));
+  }
 };

 const handlePlay = () => {
Author	SHA1	Message	Date
algerkong	f9c920008c	✨ feat: changelog	2025-05-12 08:59:42 +08:00
algerkong	ef778a172b	🔧 chore: 更新版本号至 4.6.0	2025-05-12 08:55:28 +08:00