docs: 更新预览地址

修复在播放相同ID但不同URL的音乐时，播放状态判断逻辑错误的问题。现在只有当音乐ID和URL都相同时才会切换播放/暂停状态。

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deploy Web
 on:
   push:
     branches:
-      - dev_electron # 或者您的主分支名称
+      - main # 或者您的主分支名称
   workflow_dispatch: # 允许手动触发
 
 jobs:

CHANGELOG.md

@@ -1,23 +1,27 @@
 # 更新日志
 
-## v4.4.0
-## 更新时间 2025 年 4 月 23 日 00:16
+## 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>
 
-> 请我喝咖啡 ☕️ <a href="http://donate.alger.fun/donate" target="_blank">赏你</a>
+> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
 
 > QQ群 976962720
 
 ### ✨ 新功能
-- 优化音源解析功能，添加音源配置，添加GD音乐台解析支持 ([ed9cf9c](https://github.com/algerkong/AlgerMusicPlayer/commit/ed9cf9c))
+- 增加音源重新解析功能 ([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 修复
-- 修复下载管理切换 tab 程序卡死问题 ([27d5bd8](https://github.com/algerkong/AlgerMusicPlayer/commit/27d5bd8)) (#153)
-- 修复歌曲播放地址缓存导致播放失败问题，添加过期时间 ([76e55d4](https://github.com/algerkong/AlgerMusicPlayer/commit/76e55d4))
-- 修复 Electron 版本更新导致的桌面歌词窗口出现边框的问题 ([a676136](https://github.com/algerkong/AlgerMusicPlayer/commit/a676136))
-- 优化底部菜单位置和间距 修复移动端菜单不显示问题 ([25b90fa](https://github.com/algerkong/AlgerMusicPlayer/commit/25b90fa))
+- 修复歌曲加入歌单失败问题 ([8045034](https://github.com/algerkong/AlgerMusicPlayer/commit/8045034))
 
-### 🔧 其他变更
-- 更新项目依赖 ([35b9cbf](https://github.com/algerkong/AlgerMusicPlayer/commit/35b9cbf))([7624a1a](https://github.com/algerkong/AlgerMusicPlayer/commit/7624a1a))
+### 🎨 优化
+- 优化播放器逻辑，改进播放失败处理，支持保持当前索引并增加重试机制，优化操作锁逻辑，添加超时检查机制，确保操作锁在超时后自动释放，增加超时处理([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))

README.md

@@ -1,32 +1,55 @@
-# Alger Music Player
+
+<h2 align="center">🎵 Alger Music Player</h2>
+<div align="center">
+<div align="center">
+  <a href="https://github.com/algerkong/AlgerMusicPlayer/stargazers">
+    <img src="https://img.shields.io/github/stars/algerkong/AlgerMusicPlayer?style=for-the-badge&logo=github&label=Stars&logoColor=white&color=22c55e" alt="GitHub stars">
+  </a>
+  <a href="https://github.com/algerkong/AlgerMusicPlayer/releases">
+    <img src="https://img.shields.io/github/v/release/algerkong/AlgerMusicPlayer?style=for-the-badge&logo=github&label=Release&logoColor=white&color=1a67af" alt="GitHub release">
+  </a>
+  <a href="https://pd.qq.com/s/cs056n33q?b=5">
+    <img src="https://img.shields.io/badge/QQ%E9%A2%91%E9%81%93-algermusic-blue?style=for-the-badge" alt="QQ频道">
+  </a>
+  <a href="https://t.me/+9efsKRuvKBk2NWVl">
+    <img src="https://img.shields.io/badge/AlgerMusic-blue?style=for-the-badge&logo=telegram&logoColor=white&label=Telegram" alt="Telegram">
+  </a>
+</div>
+</div>
+<div align="center">
+  <a href="https://hellogithub.com/repository/607b849c598d48e08fe38789d156ebdc" target="_blank"><img src="https://api.hellogithub.com/v1/widgets/recommend.svg?rid=607b849c598d48e08fe38789d156ebdc&claim_uid=ObuMXUfeHBmk9TI&theme=neutral" alt="Featured｜HelloGitHub" width="160" height="32" /></a>
+</div>
+
 主要功能如下
 - 🎵 音乐推荐
 - 🔐 网易云账号登录与同步
 - 📝 功能
   - 播放历史记录
   - 歌曲收藏管理
-  - 自定义快捷键配置
+  - 自定义快捷键配置（全局或应用内）
 - 🎨 界面与交互
   - 沉浸式歌词显示（点击左下角封面进入）
   - 独立桌面歌词窗口
   - 明暗主题切换
+  - 可远程控制播放
 - 🎼 音乐功能
   - 支持歌单、MV、专辑等完整音乐服务
   - 灰色音乐资源解析（基于 @unblockneteasemusic/server）
+  - 音乐单独解析
+  - EQ均衡器
+  - 定时播放
   - 高品质音乐试听（需网易云VIP）
-  - 音乐文件下载（支持右键下载和批量下载）
+  - 音乐文件下载（支持右键下载和批量下载, 附带歌词封面等信息）
 - 🚀 技术特性
   - 本地化服务，无需依赖在线API (基于 netease-cloud-music-api)
   - 自动更新检测
-  - 全平台适配（Desktop & Web & Mobile Web）
+  - 全平台适配（Desktop & Web & Mobile Web & Android<测试> & ios<后续>）
 
 ## 项目简介
- 一个基于 electron typescript vue3 的桌面音乐播放器 适配 web端 桌面端 web移动端
+ 一个第三方音乐播放器、本地服务、桌面歌词、音乐下载、最高音质
 
 ## 预览地址
-[http://mc.alger.fun/](http://mc.alger.fun/)
-
-QQ群:789288579
+[http://music.alger.fun/](http://music.alger.fun/)
 
 ## 软件截图
 ![首页白](./docs/image.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "AlgerMusicPlayer",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "description": "Alger Music Player",
   "author": "Alger <algerkc@qq.com>",
   "main": "./out/main/index.js",
@@ -24,7 +24,9 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^4.0.0",
     "@unblockneteasemusic/server": "^0.27.8-patch.1",
+    "cors": "^2.8.5",
     "electron-store": "^8.1.0",
+    "express": "^4.18.2",
     "electron-updater": "^6.6.2",
     "font-list": "^1.5.1",
     "netease-cloud-music-api-alger": "^4.26.1",
@@ -54,7 +56,7 @@
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
     "cross-env": "^7.0.3",
-    "electron": "^35.2.0",
+    "electron": "^36.2.0",
     "electron-builder": "^25.1.8",
     "electron-vite": "^3.1.0",
     "eslint": "^9.0.0",
@@ -97,6 +99,13 @@
         "repo": "AlgerMusicPlayer"
       }
     ],
+    "extraResources": [
+      {
+        "from": "resources/html",
+        "to": "html",
+        "filter": ["**/*"]
+      }
+    ],
     "mac": {
       "icon": "resources/icon.icns",
       "target": [
@@ -121,13 +130,14 @@
       ]
     },
     "win": {
-      "icon": "resources/favicon.ico",
+      "icon": "resources/icon.ico",
       "target": [
         {
           "target": "nsis",
           "arch": [
             "x64",
-            "ia32"
+            "ia32",
+            "arm64"
           ]
         }
       ],
@@ -140,13 +150,15 @@
         {
           "target": "AppImage",
           "arch": [
-            "x64"
+            "x64",
+            "arm64"
           ]
         },
         {
           "target": "deb",
           "arch": [
-            "x64"
+            "x64",
+            "arm64"
           ]
         }
       ],
@@ -157,8 +169,8 @@
     "nsis": {
       "oneClick": false,
       "allowToChangeInstallationDirectory": true,
-      "installerIcon": "resources/favicon.ico",
-      "uninstallerIcon": "resources/favicon.ico",
+      "installerIcon": "resources/icon.ico",
+      "uninstallerIcon": "resources/icon.ico",
       "createDesktopShortcut": true,
       "createStartMenuShortcut": true,
       "shortcutName": "AlgerMusicPlayer",

resources/html/remote-control.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>AlgerMusicPlayer 远程控制</title>
+  <style>
+    :root {
+      --primary-color: #007AFF;
+      --secondary-color: #5AC8FA;
+      --success-color: #4CD964;
+      --danger-color: #FF3B30;
+      --warning-color: #FF9500;
+      --light-gray: #F2F2F7;
+      --medium-gray: #E5E5EA;
+      --dark-gray: #8E8E93;
+      --text-color: #000000;
+      --text-secondary: #6C6C6C;
+      --background-color: #FFFFFF;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --primary-color: #0A84FF;
+        --secondary-color: #64D2FF;
+        --success-color: #30D158;
+        --danger-color: #FF453A;
+        --warning-color: #FF9F0A;
+        --light-gray: #1C1C1E;
+        --medium-gray: #2C2C2E;
+        --dark-gray: #8E8E93;
+        --text-color: #FFFFFF;
+        --text-secondary: #AEAEB2;
+        --background-color: #000000;
+      }
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: var(--text-color);
+      background-color: var(--light-gray);
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      padding: 0;
+      margin: 0;
+    }
+
+    .header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      background-color: var(--background-color);
+      padding: 12px 16px;
+      text-align: center;
+      border-bottom: 1px solid var(--medium-gray);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+
+    .header h1 {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    .container {
+      max-width: 540px;
+      margin: 0 auto;
+      padding: 16px;
+      width: 100%;
+      flex: 1;
+    }
+
+    .card {
+      background-color: var(--background-color);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+
+    .song-info {
+      display: flex;
+      align-items: center;
+      padding-bottom: 16px;
+    }
+
+    .song-cover {
+      width: 72px;
+      height: 72px;
+      border-radius: 8px;
+      object-fit: cover;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+      background-color: var(--medium-gray);
+    }
+
+    .song-details {
+      margin-left: 16px;
+      flex: 1;
+    }
+
+    .song-details h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .song-details p {
+      margin: 4px 0 0;
+      font-size: 15px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .play-state {
+      font-size: 14px;
+      color: var(--primary-color);
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+    }
+
+    .play-state::before {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 6px;
+    }
+
+    .playing .play-state::before {
+      background-color: var(--success-color);
+    }
+
+    .paused .play-state::before {
+      background-color: var(--warning-color);
+    }
+
+    .controls {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .extra-controls {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    .btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--background-color);
+      color: var(--primary-color);
+      border: 1px solid var(--medium-gray);
+      padding: 16px 0;
+      border-radius: 12px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      user-select: none;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .btn:active {
+      transform: scale(0.97);
+      opacity: 0.7;
+    }
+
+    .btn::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--primary-color);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      z-index: -1;
+    }
+
+    .btn:active::before {
+      opacity: 0.1;
+    }
+
+    .btn svg {
+      margin-bottom: 8px;
+      width: 24px;
+      height: 24px;
+      fill: var(--primary-color);
+    }
+
+    .btn-play svg {
+      width: 28px;
+      height: 28px;
+      margin-bottom: 6px;
+    }
+
+    .status-bar {
+      text-align: center;
+      padding: 8px 16px;
+      font-size: 14px;
+      color: var(--text-secondary);
+      background-color: var(--background-color);
+      border-top: 1px solid var(--medium-gray);
+      position: sticky;
+      bottom: 0;
+    }
+
+    .status-message {
+      display: inline-block;
+      transition: opacity 0.3s ease;
+    }
+
+    .status-message.fade {
+      opacity: 0;
+    }
+
+    .refresh-button {
+      color: var(--primary-color);
+      background: none;
+      border: none;
+      font-size: 14px;
+      cursor: pointer;
+      padding: 0;
+      margin-left: 8px;
+    }
+
+    @media (max-width: 350px) {
+      .controls, .extra-controls {
+        gap: 8px;
+      }
+      
+      .btn {
+        padding: 12px 0;
+        font-size: 12px;
+      }
+      
+      .btn svg {
+        width: 20px;
+        height: 20px;
+        margin-bottom: 6px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>AlgerMusicPlayer 远程控制</h1>
+  </div>
+
+  <div class="container">
+    <div class="card" id="songInfoCard">
+      <div class="song-info">
+        <img id="songCover" class="song-cover" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'/%3E%3C/svg%3E" alt="封面">
+        <div class="song-details">
+          <h2 id="songTitle">未在播放</h2>
+          <p id="songArtist">--</p>
+          <div class="play-state" id="playState">未播放</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="controls">
+        <button id="prevBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+          </svg>
+          上一首
+        </button>
+        <button id="playBtn" class="btn btn-play">
+          <svg id="playIcon" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8 5v14l11-7z"/>
+          </svg>
+          播放/暂停
+        </button>
+        <button id="nextBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+          </svg>
+          下一首
+        </button>
+      </div>
+
+      <div class="extra-controls">
+        <button id="volumeDownBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
+          </svg>
+          音量-
+        </button>
+        <button id="volumeUpBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+          </svg>
+          音量+
+        </button>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="extra-controls">
+        <button id="favoriteBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+          收藏
+        </button>
+        <button id="refreshBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+          </svg>
+          刷新
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="status-bar">
+    <span id="status" class="status-message">准备就绪</span>
+  </div>
+
+  <script>
+    // 页面加载完成后执行
+    document.addEventListener('DOMContentLoaded', () => {
+      // 获取DOM元素
+      const songInfoCard = document.getElementById('songInfoCard');
+      const songTitle = document.getElementById('songTitle');
+      const songArtist = document.getElementById('songArtist');
+      const songCover = document.getElementById('songCover');
+      const playState = document.getElementById('playState');
+      const playBtn = document.getElementById('playBtn');
+      const playIcon = document.getElementById('playIcon');
+      const prevBtn = document.getElementById('prevBtn');
+      const nextBtn = document.getElementById('nextBtn');
+      const favoriteBtn = document.getElementById('favoriteBtn');
+      const volumeUpBtn = document.getElementById('volumeUpBtn');
+      const volumeDownBtn = document.getElementById('volumeDownBtn');
+      const refreshBtn = document.getElementById('refreshBtn');
+      const status = document.getElementById('status');
+      
+      let isPlaying = false;
+      
+      // 显示状态消息并淡出
+      function showStatus(message, autoClear = true) {
+        status.textContent = message;
+        status.classList.remove('fade');
+        
+        if (autoClear) {
+          setTimeout(() => {
+            status.classList.add('fade');
+          }, 2000);
+        }
+      }
+      
+      // 更新播放/暂停图标
+      function updatePlayIcon() {
+        if (isPlaying) {
+          playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
+        } else {
+          playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+        }
+      }
+      
+      // 更新状态的函数
+      async function updateStatus() {
+        try {
+          showStatus('获取播放状态...', false);
+          
+          const response = await fetch('/api/status');
+          const data = await response.json();
+          
+          // 更新播放状态
+          isPlaying = data.isPlaying;
+          updatePlayIcon();
+          
+          // 更新UI
+          if (data.currentSong) {
+            songTitle.textContent = data.currentSong.name || '未知歌曲';
+            
+            if (data.currentSong.ar && data.currentSong.ar.length) {
+              songArtist.textContent = data.currentSong.ar.map(a => a.name).join(', ');
+            } else if (data.currentSong.artists && data.currentSong.artists.length) {
+              songArtist.textContent = data.currentSong.artists.map(a => a.name).join(', ');
+            } else {
+              songArtist.textContent = '未知艺术家';
+            }
+            
+            if (data.currentSong.picUrl) {
+              songCover.src = data.currentSong.picUrl;
+            }
+          } else {
+            songTitle.textContent = '未在播放';
+            songArtist.textContent = '--';
+            songCover.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'/%3E%3C/svg%3E";
+          }
+          
+          // 更新播放状态
+          playState.textContent = isPlaying ? '正在播放' : '已暂停';
+          songInfoCard.className = isPlaying ? 'card playing' : 'card paused';
+          
+          showStatus('已更新', true);
+        } catch (error) {
+          console.error('获取状态失败:', error);
+          showStatus('获取状态失败');
+        }
+      }
+      
+      // 发送命令的函数
+      async function sendCommand(endpoint) {
+        try {
+          showStatus('发送命令中...', false);
+          const response = await fetch('/api/' + endpoint, { method: 'POST' });
+          const data = await response.json();
+          
+          showStatus(data.message || '命令已发送');
+          
+          // 稍等后更新状态
+          setTimeout(updateStatus, 500);
+        } catch (error) {
+          console.error('发送命令失败:', error);
+          showStatus('发送命令失败');
+        }
+      }
+      
+      // 绑定按钮事件
+      playBtn.addEventListener('click', () => sendCommand('toggle-play'));
+      prevBtn.addEventListener('click', () => sendCommand('prev'));
+      nextBtn.addEventListener('click', () => sendCommand('next'));
+      favoriteBtn.addEventListener('click', () => sendCommand('toggle-favorite'));
+      volumeUpBtn.addEventListener('click', () => sendCommand('volume-up'));
+      volumeDownBtn.addEventListener('click', () => sendCommand('volume-down'));
+      refreshBtn.addEventListener('click', updateStatus);
+      
+      // 初始加载状态
+      updateStatus();
+      
+      // 每1秒更新一次状态
+      setInterval(updateStatus, 1000);
+      
+      // 添加触摸反馈
+      const buttons = document.querySelectorAll('.btn');
+      buttons.forEach(btn => {
+        btn.addEventListener('touchstart', function() {
+          this.style.transform = 'scale(0.97)';
+          this.style.opacity = '0.7';
+        });
+        
+        btn.addEventListener('touchend', function() {
+          this.style.transform = 'scale(1)';
+          this.style.opacity = '1';
+        });
+      });
+
+      // 检测深色模式变化
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        updateStatus();
+      });
+    });
+  </script>
+</body>
+</html> 

src/i18n/lang/en-US/common.ts

@@ -26,6 +26,9 @@ export default {
   delete: 'Delete',
   refresh: 'Refresh',
   retry: 'Retry',
+  reset: 'Reset',
+  copySuccess: 'Copied to clipboard',
+  copyFailed: 'Copy failed',
   validation: {
     required: 'This field is required',
     invalidInput: 'Invalid input',
@@ -46,7 +49,8 @@ export default {
     prev: 'Previous',
     next: 'Next',
     pause: 'Pause',
-    play: 'Play'
+    play: 'Play',
+    favorite: 'Favorite'
   },
   language: 'Language'
 };

src/i18n/lang/en-US/comp.ts

@@ -1,6 +1,6 @@
 export default {
   installApp: {
-    description: 'Install the application on the desktop for a better experience',
+    description: 'Install the application for a better experience',
     noPrompt: 'Do not prompt again',
     install: 'Install now',
     cancel: 'Cancel',
@@ -60,7 +60,7 @@ export default {
     wechatQR: 'Wechat QR code',
     coffeeDesc: 'A cup of coffee, a support',
     coffeeDescLinkText: 'View more',
-    qqGroup: 'QQ group: 789288579',
+    qqGroup: 'QQ group: algermusic',
     messages: {
       copySuccess: 'Copied to clipboard'
     },
@@ -104,6 +104,17 @@ export default {
   },
   musicList: {
     searchSongs: 'Search Songs',
-    noSearchResults: 'No search results'
+    noSearchResults: 'No search results',
+    switchToNormal: 'Switch to normal layout',
+    switchToCompact: 'Switch to compact layout',
+    playAll: 'Play All',
+    collect: 'Collect',
+    collectSuccess: 'Collect Success',
+    cancelCollectSuccess: 'Cancel Collect Success',
+    cancelCollect: 'Cancel Collect',
+    addToPlaylist: 'Add to Playlist',
+    addToPlaylistSuccess: 'Add to Playlist Success',
+    operationFailed: 'Operation Failed',
+    songsAlreadyInPlaylist: 'Songs already in playlist'
   }
 };

src/i18n/lang/en-US/donation.ts

@@ -3,5 +3,7 @@ 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'
+  toDonateList: 'Buy me a coffee',
+  title: 'Donation List',
+  noMessage: 'No Message'
 };

src/i18n/lang/en-US/favorite.ts

@@ -11,5 +11,7 @@ export default {
   downloadSuccess: 'Download completed',
   downloadFailed: 'Download failed',
   downloading: 'Downloading, please wait...',
-  selectSongsFirst: 'Please select songs to download first'
+  selectSongsFirst: 'Please select songs to download first',
+  descending: 'Descending',
+  ascending: 'Ascending'
 };

src/i18n/lang/en-US/player.ts

@@ -29,6 +29,15 @@ 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',
@@ -37,6 +46,7 @@ export default {
     noSongPlaying: 'No song playing',
     eq: 'Equalizer',
     playList: 'Play List',
+    reparse: 'Reparse',
     playMode: {
       sequence: 'Sequence',
       loop: 'Loop',
@@ -73,5 +83,35 @@ export default {
       acoustic: 'Acoustic',
       custom: 'Custom'
     }
+  },
+  // Sleep timer related
+  sleepTimer: {
+    title: 'Sleep Timer',
+    cancel: 'Cancel Timer',
+    timeMode: 'By Time',
+    songsMode: 'By Songs',
+    playlistEnd: 'After Playlist',
+    afterPlaylist: 'After Playlist Ends',
+    activeUntilEnd: 'Active until end of playlist',
+    minutes: 'min',
+    hours: 'hr',
+    songs: 'songs',
+    set: 'Set',
+    timerSetSuccess: 'Timer set for {minutes} minutes',
+    songsSetSuccess: 'Timer set for {songs} songs',
+    playlistEndSetSuccess: 'Timer set to end after playlist',
+    timerCancelled: 'Sleep timer cancelled',
+    timerEnded: 'Sleep timer ended',
+    playbackStopped: 'Music playback stopped',
+    minutesRemaining: '{minutes} min remaining',
+    songsRemaining: '{count} songs remaining'
+  },
+  playList: {
+    clearAll: 'Clear Playlist',
+    alreadyEmpty: 'Playlist is already empty',
+    cleared: 'Playlist cleared',
+    empty: 'Playlist is empty',
+    clearConfirmTitle: 'Clear Playlist',
+    clearConfirmContent: 'This will clear all songs in the playlist and stop the current playback. Continue?'
   }
 };

src/i18n/lang/en-US/search.ts

@@ -6,7 +6,8 @@ export default {
   },
   button: {
     clear: 'Clear',
-    back: 'Back'
+    back: 'Back',
+    playAll: 'Play All'
   },
   loading: {
     more: 'Loading...',

src/i18n/lang/en-US/settings.ts

@@ -66,7 +66,9 @@ export default {
     noMusicSources: 'No sources selected',
     gdmusicInfo: 'GD Music Station intelligently resolves music from multiple platforms automatically',
     autoPlay: 'Auto Play',
-    autoPlayDesc: 'Auto resume playback when reopening the app'
+    autoPlayDesc: 'Auto resume playback when reopening the app',
+    showStatusBar: "Show Status Bar",
+    showStatusBarContent: "You can display the music control function in your mac status bar (effective after a restart)"
   },
   application: {
     closeAction: 'Close Action',
@@ -83,7 +85,9 @@ export default {
     unlimitedDownload: 'Unlimited Download',
     unlimitedDownloadDesc: 'Enable unlimited download mode for music , default limit 300 songs',
     downloadPath: 'Download Directory',
-    downloadPathDesc: 'Choose download location for music files'
+    downloadPathDesc: 'Choose download location for music files',
+    remoteControl: 'Remote Control',
+    remoteControlDesc: 'Set remote control function'
   },
   network: {
     apiPort: 'Music API Port',
@@ -230,5 +234,15 @@ export default {
       disableAll: 'All shortcuts disabled, please save to apply',
       enableAll: 'All shortcuts enabled, please save to apply'
     }
+  },
+  remoteControl: {
+    title: 'Remote Control',
+    enable: 'Enable Remote Control',
+    port: 'Port',
+    allowedIps: 'Allowed IPs',
+    addIp: 'Add IP',
+    emptyListHint: 'Empty list means allow all IPs',
+    saveSuccess: 'Remote control settings saved',
+    accessInfo: 'Remote control access address:',
   }
 };

src/i18n/lang/zh-CN/common.ts

@@ -26,6 +26,9 @@ export default {
   delete: '删除',
   refresh: '刷新',
   retry: '重试',
+  reset: '重置',
+  copySuccess: '已复制到剪贴板',
+  copyFailed: '复制失败',
   validation: {
     required: '此项是必填的',
     invalidInput: '输入无效',
@@ -46,6 +49,7 @@ export default {
     prev: '上一首',
     next: '下一首',
     pause: '暂停',
-    play: '播放'
+    play: '播放',
+    favorite: '收藏'
   }
 };

src/i18n/lang/zh-CN/comp.ts

@@ -1,6 +1,6 @@
 export default {
   installApp: {
-    description: '在桌面安装应用，获得更好的体验',
+    description: '安装应用程序，获得更好的体验',
     noPrompt: '不再提示',
     install: '立即安装',
     cancel: '暂不安装',
@@ -58,7 +58,7 @@ export default {
     wechatQR: '微信收款码',
     coffeeDesc: '一杯咖啡，一份支持',
     coffeeDescLinkText: '查看更多',
-    qqGroup: 'QQ群：789288579',
+    qqGroup: 'QQ频道：algermusic',
     messages: {
       copySuccess: '已复制到剪贴板'
     },
@@ -102,6 +102,17 @@ export default {
   },
   musicList: {
     searchSongs: '搜索歌曲',
-    noSearchResults: '没有找到相关歌曲'
+    noSearchResults: '没有找到相关歌曲',
+    switchToNormal: '切换到默认布局',
+    switchToCompact: '切换到紧凑布局',
+    playAll: '播放全部',
+    collect: '收藏',
+    collectSuccess: '收藏成功',
+    cancelCollectSuccess: '取消收藏成功',
+    operationFailed: '操作失败',
+    cancelCollect: '取消收藏',
+    addToPlaylist: '添加到播放列表',
+    addToPlaylistSuccess: '添加到播放列表成功',
+    songsAlreadyInPlaylist: '歌曲已存在于播放列表中'
   }
 };

src/i18n/lang/zh-CN/donation.ts

@@ -2,5 +2,7 @@ export default {
   description: '您的捐赠将用于支持开发和维护工作，包括但不限于服务器维护、域名续费等。',
   message: '留言时可留下您的邮箱或 github名称。',
   refresh: '刷新列表',
-  toDonateList: '请我喝咖啡'
+  toDonateList: '请我喝咖啡',
+  noMessage: '暂无留言',
+  title: '捐赠列表'
 };

src/i18n/lang/zh-CN/favorite.ts

@@ -7,5 +7,7 @@ export default {
   downloadSuccess: '下载完成',
   downloadFailed: '下载失败',
   downloading: '正在下载中，请稍候...',
-  selectSongsFirst: '请先选择要下载的歌曲'
+  selectSongsFirst: '请先选择要下载的歌曲',
+  descending: '降',
+  ascending: '升'
 };

src/i18n/lang/zh-CN/player.ts

@@ -29,6 +29,15 @@ export default {
   lrc: {
     noLrc: '暂无歌词, 请欣赏'
   },
+  reparse: {
+    title: '选择解析音源',
+    desc: '点击音源直接进行解析，下次播放此歌曲时将使用所选音源',
+    success: '重新解析成功',
+    failed: '重新解析失败',
+    warning: '请选择一个音源',
+    bilibiliNotSupported: 'B站视频不支持重新解析',
+    processing: '解析中...'
+  },
   playBar: {
     expand: '展开歌词',
     collapse: '收起歌词',
@@ -37,6 +46,7 @@ export default {
     noSongPlaying: '没有正在播放的歌曲',
     eq: '均衡器',
     playList: '播放列表',
+    reparse: '重新解析',
     playMode: {
       sequence: '顺序播放',
       loop: '循环播放',
@@ -74,5 +84,35 @@ export default {
       acoustic: '原声',
       custom: '自定义'
     }
+  },
+  // 定时关闭功能相关
+  sleepTimer: {
+    title: '定时关闭',
+    cancel: '取消定时',
+    timeMode: '按时间关闭',
+    songsMode: '按歌曲数关闭',
+    playlistEnd: '播放完列表后关闭',
+    afterPlaylist: '播放完列表后关闭',
+    activeUntilEnd: '播放至列表结束',
+    minutes: '分钟',
+    hours: '小时',
+    songs: '首歌',
+    set: '设置',
+    timerSetSuccess: '已设置{minutes}分钟后关闭',
+    songsSetSuccess: '已设置播放{songs}首歌后关闭',
+    playlistEndSetSuccess: '已设置播放完列表后关闭',
+    timerCancelled: '已取消定时关闭',
+    timerEnded: '定时关闭已触发',
+    playbackStopped: '音乐播放已停止',
+    minutesRemaining: '剩余{minutes}分钟',
+    songsRemaining: '剩余{count}首歌'
+  },
+  playList: {
+    clearAll: '清空播放列表',
+    alreadyEmpty: '播放列表已经为空',
+    cleared: '已清空播放列表',
+    empty: '播放列表为空',
+    clearConfirmTitle: '清空播放列表',
+    clearConfirmContent: '这将清空所有播放列表中的歌曲并停止当前播放。是否继续？'
   }
 };

src/i18n/lang/zh-CN/search.ts

@@ -6,7 +6,8 @@ export default {
   },
   button: {
     clear: '清空',
-    back: '返回'
+    back: '返回',
+    playAll: '播放列表'
   },
   loading: {
     more: '加载中...',

src/i18n/lang/zh-CN/settings.json

@@ -1,5 +0,0 @@
-"playback": {
-  "musicSources": "音源设置",
-  "musicSourcesDesc": "选择音乐解析使用的音源平台",
-  "musicSourcesWarning": "至少需要选择一个音源平台"
-} 

src/i18n/lang/zh-CN/settings.ts

@@ -44,7 +44,7 @@ export default {
   },
   playback: {
     quality: '音质设置',
-    qualityDesc: '选择音乐播放音质（VIP）',
+    qualityDesc: '选择音乐播放音质（网易云VIP）',
     qualityOptions: {
       standard: '标准',
       higher: '较高',
@@ -66,7 +66,9 @@ export default {
     noMusicSources: '未选择音源',
     gdmusicInfo: 'GD音乐台可自动解析多个平台音源，自动选择最佳结果',
     autoPlay: '自动播放',
-    autoPlayDesc: '重新打开应用时是否自动继续播放'
+    autoPlayDesc: '重新打开应用时是否自动继续播放',
+    showStatusBar: '是否显示状态栏控制功能',
+    showStatusBarContent: '可以在您的mac状态栏显示音乐控制功能(重启后生效)',
   },
   application: {
     closeAction: '关闭行为',
@@ -83,7 +85,9 @@ export default {
     unlimitedDownload: '无限制下载',
     unlimitedDownloadDesc: '开启后将无限制下载音乐（可能出现下载失败的情况）, 默认限制 300 首',
     downloadPath: '下载目录',
-    downloadPathDesc: '选择音乐文件的下载位置'
+    downloadPathDesc: '选择音乐文件的下载位置',
+    remoteControl: '远程控制',
+    remoteControlDesc: '设置远程控制功能'
   },
   network: {
     apiPort: '音乐API端口',
@@ -230,5 +234,15 @@ export default {
       disableAll: '已禁用所有快捷键，请记得保存',
       enableAll: '已启用所有快捷键，请记得保存'
     }
+  },
+  remoteControl: {
+    title: '远程控制',
+    enable: '启用远程控制',
+    port: '服务端口',
+    allowedIps: '允许的IP地址',
+    addIp: '添加IP',
+    emptyListHint: '空列表表示允许所有IP访问',
+    saveSuccess: '远程控制设置已保存',
+    accessInfo: '远程控制访问地址:',
   }
 };

src/main/index.ts

@@ -8,6 +8,7 @@ import { loadLyricWindow } from './lyric';
 import { initializeConfig } from './modules/config';
 import { initializeFileManager } from './modules/fileManager';
 import { initializeFonts } from './modules/fonts';
+import { initializeRemoteControl } from './modules/remoteControl';
 import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
 import { initializeStats, setupStatsHandlers } from './modules/statsService';
 import { initializeTray, updateCurrentSong, updatePlayState, updateTrayMenu } from './modules/tray';
@@ -20,9 +21,7 @@ const iconPath = join(__dirname, '../../resources');
 const icon = nativeImage.createFromPath(
   process.platform === 'darwin'
     ? join(iconPath, 'icon.icns')
-    : process.platform === 'win32'
-      ? join(iconPath, 'favicon.ico')
-      : join(iconPath, 'icon.png')
+    : join(iconPath, 'icon.png')
 );
 
 let mainWindow: Electron.BrowserWindow;
@@ -66,6 +65,9 @@ function initialize() {
   // 初始化快捷键
   initializeShortcuts(mainWindow);
 
+  // 初始化远程控制服务
+  initializeRemoteControl(mainWindow);
+
   // 初始化更新处理程序
   setupUpdateHandlers(mainWindow);
 }

src/main/lyric.ts

@@ -89,6 +89,8 @@ const createWin = () => {
     alwaysOnTop: true,
     resizable: true,
     roundedCorners: false,
+    titleBarStyle: 'hidden',
+    titleBarOverlay: false,
     // 添加跨屏幕支持选项
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
@@ -120,6 +122,8 @@ const createWin = () => {
     }
   });
 
+  lyricWindow.on('blur', () => lyricWindow && lyricWindow.setMaximizable(false))
+
   return lyricWindow;
 };
 

src/main/modules/config.ts

@@ -24,6 +24,7 @@ type SetConfig = {
   fontFamily: string;
   fontScope: 'global' | 'lyric';
   language: string;
+  showTopAction: boolean;
 };
 interface StoreType {
   set: SetConfig;

src/main/modules/remoteControl.ts

@@ -0,0 +1,231 @@
+import { ipcMain } from 'electron';
+import express from 'express';
+import cors from 'cors';
+import os from 'os';
+import { getStore } from './config';
+import path from 'path';
+import fs from 'fs';
+
+// 定义远程控制相关接口
+export interface RemoteControlConfig {
+  enabled: boolean;
+  port: number;
+  allowedIps: string[];
+}
+
+// 默认配置
+export const defaultRemoteControlConfig: RemoteControlConfig = {
+  enabled: false,
+  port: 31888,
+  allowedIps: []
+};
+
+let app: express.Application | null = null;
+let server: any = null;
+let mainWindowRef: Electron.BrowserWindow | null = null;
+let currentSong: any = null;
+let isPlaying: boolean = false;
+
+// 获取本地IP地址
+function getLocalIpAddresses(): string[] {
+  const interfaces = os.networkInterfaces();
+  const addresses: string[] = [];
+
+  for (const key in interfaces) {
+    const iface = interfaces[key];
+    if (iface) {
+      for (const alias of iface) {
+        if (alias.family === 'IPv4' && !alias.internal) {
+          addresses.push(alias.address);
+        }
+      }
+    }
+  }
+
+  return addresses;
+}
+
+// 初始化远程控制服务
+export function initializeRemoteControl(mainWindow: Electron.BrowserWindow) {
+  mainWindowRef = mainWindow;
+  const store = getStore() as any;
+  let config = store.get('remoteControl') as RemoteControlConfig;
+
+  // 如果配置不存在，使用默认配置
+  if (!config) {
+    config = defaultRemoteControlConfig;
+    store.set('remoteControl', config);
+  }
+
+  // 监听当前歌曲变化
+  ipcMain.on('update-current-song', (_, song: any) => {
+    currentSong = song;
+  });
+
+  // 监听播放状态变化
+  ipcMain.on('update-play-state', (_, playing: boolean) => {
+    isPlaying = playing;
+  });
+
+  // 监听远程控制配置变化
+  ipcMain.on('update-remote-control-config', (_, newConfig: RemoteControlConfig) => {
+    if (server) {
+      stopServer();
+    }
+    
+    store.set('remoteControl', newConfig);
+    
+    if (newConfig.enabled) {
+      startServer(newConfig);
+    }
+  });
+
+  // 获取远程控制配置
+  ipcMain.handle('get-remote-control-config', () => {
+    const config = store.get('remoteControl') as RemoteControlConfig;
+    return config || defaultRemoteControlConfig;
+  });
+
+  // 获取本地IP地址
+  ipcMain.handle('get-local-ip-addresses', () => {
+    return getLocalIpAddresses();
+  });
+
+  // 如果启用了远程控制，启动服务器
+  if (config.enabled) {
+    startServer(config);
+  }
+}
+
+// 启动远程控制服务器
+function startServer(config: RemoteControlConfig) {
+  if (!mainWindowRef) {
+    console.error('主窗口未初始化，无法启动远程控制服务');
+    return;
+  }
+
+  app = express();
+  
+  // 跨域配置
+  app.use(cors());
+  app.use(express.json());
+  
+  // IP 过滤中间件
+  app.use((req, res, next) => {
+    const clientIp = req.ip || req.socket.remoteAddress || '';
+    const cleanIp = clientIp.replace(/^::ffff:/, ''); // 移除IPv6前缀
+    console.log('config',config)
+    if (config.allowedIps.length === 0 || config.allowedIps.includes(cleanIp)) {
+      next();
+    } else {
+      res.status(403).json({ error: '未授权的IP地址' });
+    }
+  });
+
+  // 路由配置
+  setupRoutes(app);
+
+  // 启动服务器
+  try {
+    server = app.listen(config.port, () => {
+      console.log(`远程控制服务已启动，监听端口: ${config.port}`);
+    });
+  } catch (error) {
+    console.error('启动远程控制服务失败:', error);
+  }
+}
+
+// 停止远程控制服务器
+function stopServer() {
+  if (server) {
+    server.close();
+    server = null;
+    app = null;
+    console.log('远程控制服务已停止');
+  }
+}
+
+// 设置路由
+function setupRoutes(app: express.Application) {
+  // 获取当前播放状态
+  app.get('/api/status', (_, res) => {
+    res.json({
+      isPlaying,
+      currentSong
+    });
+  });
+
+  // 播放/暂停
+  app.post('/api/toggle-play', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'togglePlay');
+    res.json({ success: true, message: '已发送播放/暂停指令' });
+  });
+
+  // 上一首
+  app.post('/api/prev', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'prevPlay');
+    res.json({ success: true, message: '已发送上一首指令' });
+  });
+
+  // 下一首
+  app.post('/api/next', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'nextPlay');
+    res.json({ success: true, message: '已发送下一首指令' });
+  });
+
+  // 音量加
+  app.post('/api/volume-up', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'volumeUp');
+    res.json({ success: true, message: '已发送音量加指令' });
+  });
+
+  // 音量减
+  app.post('/api/volume-down', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'volumeDown');
+    res.json({ success: true, message: '已发送音量减指令' });
+  });
+
+  // 收藏/取消收藏
+  app.post('/api/toggle-favorite', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'toggleFavorite');
+    res.json({ success: true, message: '已发送收藏/取消收藏指令' });
+  });
+
+  // 提供远程控制界面HTML
+  app.get('/', (_, res) => {
+    try {
+      const resourcesPath = process.resourcesPath || '';
+      const isDev = process.env.NODE_ENV === 'development';
+      const htmlPath = path.join(process.cwd(), 'resources', 'html', 'remote-control.html');
+      const finalPath = isDev ? htmlPath : path.join(resourcesPath, 'html', 'remote-control.html');
+      
+      if (fs.existsSync(finalPath)) {
+        res.sendFile(finalPath);
+      } else {
+        res.status(404).send('远程控制界面文件未找到');
+        console.error('远程控制界面文件不存在:', finalPath);
+      }
+    } catch (error) {
+      console.error('加载远程控制界面失败:', error);
+      res.status(500).send('加载远程控制界面失败');
+    }
+  });
+} 

src/main/modules/tray.ts

@@ -11,6 +11,7 @@ import { join } from 'path';
 
 import type { Language } from '../../i18n/main';
 import i18n from '../../i18n/main';
+import { getStore } from './config';
 
 // 歌曲信息接口定义
 interface SongInfo {
@@ -174,6 +175,18 @@ 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'),
@@ -253,6 +266,14 @@ 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'),
@@ -307,7 +328,8 @@ export function updateTrayMenu(mainWindow: BrowserWindow) {
 
 // 初始化状态栏Tray
 function initializeStatusBarTray(mainWindow: BrowserWindow) {
-  if (process.platform !== 'darwin') return;
+  const store = getStore()
+  if (process.platform !== 'darwin' || !store.get('set.showTopAction')) return;
 
   const iconSize = getProperIconSize();
 

src/main/set.json

@@ -23,5 +23,6 @@
   "alwaysShowDownloadButton": false,
   "unlimitedDownload": false,
   "enableMusicUnblock": true,
-  "enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "youtube"]
+  "enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "kuwo"],
+  "showTopAction": false
 }

src/main/unblockMusic.ts

@@ -1,6 +1,6 @@
 import match from '@unblockneteasemusic/server';
 
-type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube';
+type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili';
 
 interface SongData {
   name: string;
@@ -30,7 +30,7 @@ interface UnblockResult {
 }
 
 // 所有可用平台
-export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili', 'youtube'];
+export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili'];
 
 /**
  * 音乐解析函数
@@ -46,12 +46,16 @@ const unblockMusic = async (
   retryCount = 1,
   enabledPlatforms?: Platform[]
 ): Promise<UnblockResult> => {
-  const platforms = enabledPlatforms || ALL_PLATFORMS;
+  // 过滤 enabledPlatforms，确保只包含 ALL_PLATFORMS 中存在的平台
+  const filteredPlatforms = enabledPlatforms 
+    ? enabledPlatforms.filter(platform => ALL_PLATFORMS.includes(platform))
+    : 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), platforms,songData);
+      const data = await match(parseInt(String(id), 10), filteredPlatforms, songData);
       const result: UnblockResult = {
         data: {
           data,

src/renderer/App.vue

@@ -26,6 +26,7 @@ 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();
@@ -119,6 +120,8 @@ onMounted(async () => {
       window.api.sendSong(cloneDeep(playerStore.playMusic));
     }
   }
+
+  audioService.releaseOperationLock();
 });
 </script>
 

src/renderer/api/bilibili.ts

@@ -152,3 +152,32 @@ export const getBilibiliAudioUrl = async (bvid: string, cid: number): Promise<st
     throw error;
   }
 };
+
+
+// 根据音乐名称搜索并直接返回音频URL
+export const searchAndGetBilibiliAudioUrl = async (
+  keyword: string
+): Promise<string> => {
+  try {
+    // 搜索B站视频，取第一页第一个结果
+    const res = await searchBilibili({ keyword, page: 1, pagesize: 1 });
+    const result = res.data?.data?.result;
+    if (!result || result.length === 0) {
+      throw new Error('未找到相关B站视频');
+    }
+    const first = result[0];
+    const bvid = first.bvid;
+    // 需要获取视频详情以获得cid
+    const detailRes = await getBilibiliVideoDetail(bvid);
+    const pages = detailRes.data.pages;
+    if (!pages || pages.length === 0) {
+      throw new Error('未找到视频分P信息');
+    }
+    const cid = pages[0].cid;
+    // 获取音频URL
+    return await getBilibiliAudioUrl(bvid, cid);
+  } catch (error) {
+    console.error('根据名称搜索B站音频URL失败:', error);
+    throw error;
+  }
+}

src/renderer/api/gdmusic.ts

@@ -28,106 +28,104 @@ 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 = '320'
+  quality: string = '999',
+  timeout: number = 15000
 ): Promise<ParsedMusicResult | null> => {
+  // 创建一个超时Promise
+  const timeoutPromise = new Promise<null>((_, reject) => {
+    setTimeout(() => {
+      reject(new Error('GD音乐台解析超时'));
+    }, timeout);
+  });
+
   try {
-    // 处理不同数据结构
-    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'
-              }
-            }
-          };
+    // 使用Promise.race竞争主解析流程和超时
+    return await Promise.race([
+      (async () => {
+        // 处理不同数据结构
+        if (!data) {
+          console.error('GD音乐台解析：歌曲数据为空');
+          throw new Error('歌曲数据为空');
         }
-      } catch (error) {
-        console.error(`GD音乐台 ${source} 音源解析失败:`, error);
-        // 该音源失败，继续尝试下一个音源
-        continue;
-      }
+        
+        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);
     }
-    
-    console.log('GD音乐台所有音源均解析失败');
-    return null;
-  } catch (error) {
-    console.error('GD音乐台解析完全失败:', error);
     return null;
   }
 };
 
-/**
- * 获取音质映射
- * @param qualitySetting 设置中的音质选项
- * @returns 映射到GD音乐台的音质参数
- */
-export const getQualityMapping = (qualitySetting: string): string => {
-  const qualityMap: Record<string, string> = {
-    standard: '128',
-    higher: '320',
-    exhigh: '320',
-    lossless: '740',
-    hires: '999',
-    jyeffect: '999',
-    sky: '999',
-    dolby: '999',
-    jymaster: '999'
-  };
-  return qualityMap[qualitySetting] || '320';
-};
-
 interface GDMusicUrlResult {
   url: string;
   br: string;

src/renderer/api/list.ts

@@ -40,3 +40,8 @@ export function getListDetail(id: number | string) {
 export function getAlbum(id: number | string) {
   return request.get('/album', { params: { id } });
 }
+
+// 获取排行榜列表
+export function getToplist() {
+  return request.get('/toplist');
+}

src/renderer/api/login.ts

@@ -15,7 +15,7 @@ export function createQr(key: any) {
 // 获取二维码状态
 //  /login/qr/check
 export function checkQr(key: any) {
-  return request.get('/login/qr/check', { params: { key } });
+  return request.get('/login/qr/check', { params: { key, noCookie: true } });
 }
 
 // 获取登录状态

src/renderer/api/music.ts

@@ -5,7 +5,9 @@ import { isElectron } from '@/utils';
 import request from '@/utils/request';
 import requestMusic from '@/utils/request_music';
 import { cloneDeep } from 'lodash';
-import { parseFromGDMusic, getQualityMapping } from './gdmusic';
+import { parseFromGDMusic } from './gdmusic';
+import type { SongResult } from '@/type/music';
+import { searchAndGetBilibiliAudioUrl } from './bilibili';
 
 const { addData, getData, deleteData } = musicDB;
 
@@ -80,7 +82,7 @@ export const getMusicLrc = async (id: number) => {
   }
 };
 
-export const getParsingMusicUrl = async (id: number, data: any) => {
+export const getParsingMusicUrl = async (id: number, data: SongResult) => {
   const settingStore = useSettingsStore();
   
   // 如果禁用了音乐解析功能，则直接返回空结果
@@ -88,15 +90,49 @@ 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);
+      if(enabledSources.includes('bilibili')){
+        // 构建搜索关键词，依次判断歌曲名称、歌手名称和专辑名称是否存在
+        const songName = data?.name || '';
+        const artistName = Array.isArray(data?.ar) && data.ar.length > 0 && data.ar[0]?.name ? data.ar[0].name : '';
+        const albumName = data?.al && typeof data.al === 'object' && data.al?.name ? data.al.name : '';
+        const name = [songName, artistName, albumName].filter(Boolean).join(' ').trim();
+        console.log('开始搜索bilibili音频', name);
+       return {
+        data: {
+          code: 200,
+          message: 'success',
+          data: {
+            url: await searchAndGetBilibiliAudioUrl(name)
+          }
+        }
+       }
+      }
+    } catch (e) {
+      console.error('e',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 {
-      const quality = getQualityMapping(settingStore.setData.musicQuality || 'higher');
-      
-      // 调用封装的GD音乐台解析服务
-      const gdResult = await parseFromGDMusic(id, data, quality);
+      const gdResult = await parseFromGDMusic(id, data, '999');
       if (gdResult) {
         return gdResult;
       }
@@ -139,5 +175,55 @@ export const updatePlaylistTracks = (params: {
   pid: number;
   tracks: string;
 }) => {
-  return request.get('/playlist/tracks', { params });
+  return request.post('/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
+    }
+  });
+}
+
+export function subscribePlaylist(params: { t: number; id: number }) {
+  return request({
+    url: '/playlist/subscribe',
+    method: 'post',
+    params
+  });
+}

src/renderer/components.d.ts

@@ -19,8 +19,10 @@ declare module 'vue' {
     NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
@@ -50,6 +52,7 @@ declare module 'vue' {
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NVirtualList: typeof import('naive-ui')['NVirtualList']
     RouterLink: typeof import('vue-router')['RouterLink']

src/renderer/components/Coffee.vue

@@ -71,12 +71,12 @@ const { t } = useI18n();
 
 const message = useMessage();
 const copyQQ = () => {
-  navigator.clipboard.writeText('789288579');
-  message.success('已复制到剪贴板');
+  navigator.clipboard.writeText('algermusic');
+  message.success(t('common.copySuccess'));
 };
 
 const toDonateList = () => {
-  window.open('http://donate.alger.fun', '_blank');
+  window.open('http://donate.alger.fun/download', '_blank');
 };
 
 defineProps({

src/renderer/components/MvPlayer.vue

@@ -193,7 +193,6 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getMvUrl } from '@/api/mv';
-import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 
 const { t } = useI18n();
@@ -222,7 +221,6 @@ const emit = defineEmits<{
   (e: 'prev', loading: (value: boolean) => void): void;
 }>();
 
-const playerStore = usePlayerStore();
 const mvUrl = ref<string>();
 const playMode = ref<PlayMode>(PLAY_MODE.Auto);
 
@@ -359,9 +357,6 @@ const loadMvUrl = async (mv: IMvItem) => {
 
 const handleClose = () => {
   emit('update:show', false);
-  if (playerStore.playMusicUrl) {
-    playerStore.setIsPlay(true);
-  }
 };
 
 const handleEnded = () => {

src/renderer/components/common/DonationList.vue

@@ -1,6 +1,41 @@
 <template>
   <div class="donation-container">
-    <div class="refresh-container">
+    <div class="qrcode-container">
+      <div class="description">
+        <p>{{ t('donation.description') }}</p>
+        <p>{{ t('donation.message') }}</p>
+          <n-button type="primary" @click="toDonateList">
+            <template #icon>
+              <i class="ri-cup-line"></i>
+            </template>
+            {{ t('donation.toDonateList') }}
+          </n-button> 
+      </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="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>
       <n-button secondary round size="small" :loading="isLoading" @click="fetchDonors">
         <template #icon>
           <i class="ri-refresh-line"></i>
@@ -8,15 +43,13 @@
         {{ t('donation.refresh') }}
       </n-button>
     </div>
+    
     <div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
       <div
-        v-for="(donor, index) in displayDonors"
+        v-for="donor in displayDonors"
         :key="donor.id"
-        class="donation-card animate__animated"
-        :class="getAnimationClass(index)"
-        :style="{ animationDelay: `${index * 0.1}s` }"
-        @mouseenter="handleMouseEnter"
-        @mouseleave="handleMouseLeave"
+        class="donation-card"
+        :class="{ 'no-message': !donor.message }"
       >
         <div class="card-content">
           <div class="donor-avatar">
@@ -24,46 +57,45 @@
               :src="donor.avatar"
               :fallback-src="defaultAvatar"
               round
-              size="large"
-              class="animate__animated animate__pulse animate__infinite avatar-img"
+              class="avatar-img"
             />
-            <div class="donor-badge" :class="getBadgeClass(donor.badge)">
-              {{ donor.badge }}
-            </div>
           </div>
           <div class="donor-info">
-            <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 class="donor-meta">
+              <div class="donor-name">{{ donor.name }}</div>
+              <!-- <div class="price-tag">￥{{ donor.amount }}</div> -->
             </div>
+            <div class="donation-date">{{ donor.date }}</div>
           </div>
         </div>
-        <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">
+        
+        <!-- 有留言的情况 -->
+        <n-popover
+          v-if="donor.message"
+          trigger="hover"
+          placement="bottom"
+          :show-arrow="true"
+          :width="240"
+        >
+          <template #trigger>
+            <div class="donation-message">
               <i class="ri-double-quotes-l quote-icon"></i>
-              {{ donor.message }}
+              <span class="message-text">{{ donor.message }}</span>
               <i class="ri-double-quotes-r quote-icon"></i>
             </div>
-          </n-popover>
+          </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>
         </div>
-        <div class="card-sparkles"></div>
       </div>
     </div>
 
@@ -75,40 +107,6 @@
         {{ 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>
 
@@ -152,72 +150,9 @@ 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) => {
-    // 如果一个有留言一个没有，有留言的排在前面
-    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();
-  });
+  return [...donors.value].sort((a, b) => b.amount - a.amount);
 });
 
 const isExpanded = ref(false);
@@ -234,19 +169,27 @@ const toggleExpand = () => {
 };
 
 const toDonateList = () => {
-  window.open('http://donate.alger.fun', '_blank');
+  window.open('http://donate.alger.fun/download', '_blank');
 };
 </script>
 
 <style lang="scss" scoped>
 .donation-container {
-  @apply w-full overflow-hidden;
+  @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;
+  }
 }
 
 .donation-grid {
-  @apply grid gap-3 px-2 py-3 transition-all duration-300 overflow-hidden;
+  @apply grid gap-3 transition-all duration-300 overflow-hidden;
   grid-template-columns: repeat(2, 1fr);
-  max-height: 280px;
+  max-height: 320px;
 
   @media (min-width: 768px) {
     grid-template-columns: repeat(3, 1fr);
@@ -262,127 +205,138 @@ const toDonateList = () => {
 }
 
 .donation-card {
-  @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;
-
+  @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;
+  min-height: 100px;
+  
   .card-content {
-    @apply relative z-10 flex items-start gap-3;
+    @apply flex items-start gap-2 mb-2;
   }
+}
 
-  .donor-avatar {
-    @apply relative flex-shrink-0 w-10 h-9 transition-transform duration-300;
+.donor-avatar {
+  @apply relative flex-shrink-0;
 
-    .avatar-img {
-      @apply border border-white/20 dark:border-gray-800/50 shadow-sm;
-      @apply w-10 h-9;
-    }
+  .avatar-img {
+    @apply border border-gray-200 dark:border-gray-700/10 shadow-sm;
+    @apply w-9 h-9;
   }
+}
 
-  .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-info {
+  @apply flex-1 min-w-0 flex flex-col justify-center;
 
+  .donor-meta {
+    @apply flex justify-between items-center mb-0.5;
+    
     .donor-name {
-      @apply text-sm font-medium mb-0.5 truncate;
+      @apply text-sm font-medium truncate flex-1 mr-1;
     }
-
-    .donation-meta {
-      @apply flex items-center gap-2 mb-1;
-
-      .donation-date {
-        @apply text-xs text-gray-400/80 dark:text-gray-500/80;
-      }
+    
+    .price-tag {
+      @apply text-xs text-gray-400/80 dark:text-gray-500/80 whitespace-nowrap;
     }
   }
 
-  .donation-message {
-    @apply text-sm text-gray-600 dark:text-gray-300 leading-relaxed mt-3 w-full;
+  .donation-date {
+    @apply text-xs text-gray-400/60 dark:text-gray-500/60;
+  }
+}
 
-    .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;
-        }
-      }
+.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;
     }
+    
+    &:last-child {
+      @apply ml-1 self-end;
+    }
+  }
+  
+  .message-text {
+    @apply flex-1 line-clamp-2;
   }
 
   &:hover {
-    .donor-avatar {
-      @apply scale-105 rotate-3;
-    }
-
-    .donor-badge {
-      @apply scale-95 -translate-y-0.5;
-    }
-
-    .card-sparkles {
-      @apply opacity-60 scale-110;
-    }
+    @apply bg-gray-100/40 dark:bg-dark-200;
   }
 }
 
-.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;
+.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;
   }
 }
 
-.refresh-container {
-  @apply flex justify-end px-2 py-2;
+.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;
+    }
+  }
 }
 
 .expand-button {
   @apply flex justify-center items-center py-2;
 
   :deep(.n-button) {
-    @apply transition-all duration-300 hover:-translate-y-0.5;
+    @apply transition-all duration-200 hover:-translate-y-0.5;
   }
 }
 
-.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;
+.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 flex-wrap;
+    
+    .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;
+    }
   }
 }
 </style>

src/renderer/components/common/InstallAppModal.vue

@@ -45,8 +45,7 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { isElectron, isMobile } from '@/utils';
-import { getLatestReleaseInfo, getProxyNodes } from '@/utils/update';
+import { isElectron } from '@/utils';
 
 import config from '../../../../package.json';
 
@@ -54,7 +53,6 @@ const { t } = useI18n();
 
 const showModal = ref(false);
 const noPrompt = ref(false);
-const releaseInfo = ref<any>(null);
 
 const closeModal = () => {
   showModal.value = false;
@@ -63,11 +61,9 @@ const closeModal = () => {
   }
 };
 
-const proxyHosts = ref<string[]>([]);
-
 onMounted(async () => {
   // 如果是 electron 环境，不显示安装提示
-  if (isElectron || isMobile.value) {
+  if (isElectron) {
     return;
   }
 
@@ -76,58 +72,11 @@ onMounted(async () => {
   if (isDismissed) {
     return;
   }
-
-  // 获取最新版本信息
-  releaseInfo.value = await getLatestReleaseInfo();
   showModal.value = true;
-  proxyHosts.value = await getProxyNodes();
 });
 
 const handleInstall = async (): Promise<void> => {
-  const assets = releaseInfo.value?.assets || [];
-  const { userAgent } = navigator;
-  const isMac = userAgent.toLowerCase().includes('mac');
-  const isWindows = userAgent.toLowerCase().includes('win');
-  const isLinux = userAgent.toLowerCase().includes('linux');
-  const isX64 =
-    userAgent.includes('x86_64') || userAgent.includes('Win64') || userAgent.includes('WOW64');
-
-  let downloadUrl = '';
-
-  // 根据平台和架构选择对应的安装包
-  if (isMac) {
-    // macOS
-    const macAsset = assets.find((asset) => asset.name.includes('mac'));
-    downloadUrl = macAsset?.browser_download_url || '';
-  } else if (isWindows) {
-    // Windows
-    let winAsset = assets.find(
-      (asset) =>
-        asset.name.includes('win') &&
-        (isX64 ? asset.name.includes('x64') : asset.name.includes('ia32'))
-    );
-    if (!winAsset) {
-      winAsset = assets.find((asset) => asset.name.includes('win.exe'));
-    }
-    downloadUrl = winAsset?.browser_download_url || '';
-  } else if (isLinux) {
-    // Linux
-    const linuxAsset = assets.find(
-      (asset) =>
-        (asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
-        asset.name.includes('x64')
-    );
-    downloadUrl = linuxAsset?.browser_download_url || '';
-  }
-
-  if (downloadUrl) {
-    const proxyDownloadUrl = `${proxyHosts.value[0]}/${downloadUrl}`;
-    window.open(proxyDownloadUrl, '_blank');
-  } else {
-    // 如果没有找到对应的安装包，跳转到 release 页面
-    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
-  }
-  closeModal();
+  window.open('http://donate.alger.fun/download', '_blank');
 };
 </script>
 

src/renderer/components/common/MusicListNavigator.ts

@@ -0,0 +1,38 @@
+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'
+    });
+  }
+} 

src/renderer/components/common/PlayBottom.vue

@@ -1,11 +1,12 @@
 <template>
-  <div v-if="isPlay" class="bottom" :style="{ height }"></div>
+  <div v-if="isPlay && !isMobile" 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);

src/renderer/components/common/PlaylistDrawer.vue

@@ -254,7 +254,7 @@ watch(
 }
 
 .playlist-drawer {
-  @apply flex flex-col gap-6;
+  @apply flex flex-col gap-6 py-6;
 }
 
 .create-playlist-section {
@@ -335,7 +335,7 @@ watch(
 }
 
 .playlist-list {
-  @apply flex flex-col gap-2;
+  @apply flex flex-col gap-2 pb-40;
 }
 
 .playlist-item {
@@ -367,4 +367,9 @@ watch(
     }
   }
 }
+
+:deep(.n-drawer-body-content-wrapper) {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
 </style>

src/renderer/components/common/SearchItem.vue

@@ -21,15 +21,6 @@
       <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"
@@ -42,12 +33,11 @@
 <script setup lang="ts">
 import { getAlbum, getListDetail } from '@/api/list';
 import MvPlayer from '@/components/MvPlayer.vue';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';
-
-import MusicList from '../MusicList.vue';
+import { useRouter } from 'vue-router';
+import { useMusicStore } from '@/store/modules/music';
 
 const props = withDefaults(
   defineProps<{
@@ -72,6 +62,8 @@ const showPop = ref(false);
 const listInfo = ref<any>(null);
 
 const playerStore = usePlayerStore();
+const router = useRouter();
+const musicStore = useMusicStore();
 
 const getCurrentMv = () => {
   return {
@@ -83,7 +75,6 @@ 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;
@@ -97,24 +88,47 @@ const handleClick = async () => {
       },
       description: res.data.album.description
     };
-  }
-
-  if (props.item.type === 'playlist') {
-    showPop.value = true;
+    
+    // 保存数据到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') {
     const res = await getListDetail(props.item.id);
     songList.value = res.data.playlist.tracks;
     listInfo.value = res.data.playlist;
-  }
-
-  if (props.item.type === 'mv') {
+    
+    // 保存数据到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') {
     handleShowMv();
   }
 };
 
 const handleShowMv = async () => {
-  playerStore.setIsPlay(false);
-  playerStore.setPlayMusic(false);
-  audioService.getCurrentSound()?.pause();
+  playerStore.handlePause();
   showPop.value = true;
 };
 </script>

src/renderer/components/common/SongItem.vue

@@ -1,14 +1,19 @@
 <template>
   <div
     class="song-item"
-    :class="{ 'song-mini': mini, 'song-list': list }"
+    :class="{ 'song-mini': mini, 'song-list': list, 'song-compact': compact }"
     @contextmenu.prevent="handleContextMenu"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
+    <div v-if="compact && index !== undefined" class="song-item-index" :class="{ 'text-green-500': isPlaying }">
+      {{ index + 1 }}
+    </div>
     <div v-if="selectable" class="song-item-select" @click.stop="toggleSelect">
       <n-checkbox :checked="selected" />
     </div>
     <n-image
-      v-if="item.picUrl"
+      v-if="item.picUrl && !compact"
       ref="songImg"
       :src="getImgUrl(item.picUrl, '100y100')"
       class="song-item-img"
@@ -18,9 +23,9 @@
       }"
       @load="imageLoad"
     />
-    <div class="song-item-content">
+    <div class="song-item-content" :class="{ 'song-item-content-compact': compact }">
       <div v-if="list" class="song-item-content-wrapper">
-        <n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1">{{
+        <n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">{{
           item.name
         }}</n-ellipsis>
         <div class="song-item-content-divider">-</div>
@@ -35,9 +40,36 @@
           </template>
         </n-ellipsis>
       </div>
+      <template v-else-if="compact">
+        <div class="song-item-content-compact-wrapper">
+          <div class="w-60 flex-shrink-0 flex items-center" @dblclick="playMusicEvent(item)">
+            <n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
+              {{ item.name }}
+            </n-ellipsis>
+          </div>
+          <div class="w-40 flex-shrink-0 song-item-content-compact-artist flex items-center">
+            <n-ellipsis line-clamp="1">
+              <template v-for="(artist, index) in artists" :key="index">
+                <span
+                  class="cursor-pointer hover:text-green-500"
+                  @click.stop="handleArtistClick(artist.id)"
+                  >{{ artist.name }}</span
+                >
+                <span v-if="index < artists.length - 1"> / </span>
+              </template>
+            </n-ellipsis>
+          </div>
+        </div>
+        <div class="song-item-content-album flex items-center">
+          <n-ellipsis line-clamp="1">{{ item.al?.name || '-' }}</n-ellipsis>
+        </div>
+        <div class="song-item-content-duration flex items-center">
+          {{ formatDuration(getDuration(item)) }}
+        </div>
+      </template>
       <template v-else>
-        <div class="song-item-content-title">
-          <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.name }}</n-ellipsis>
+        <div class="song-item-content-title" @dblclick="playMusicEvent(item)">
+          <n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">{{ item.name }}</n-ellipsis>
         </div>
         <div class="song-item-content-name">
           <n-ellipsis class="text-ellipsis" line-clamp="1">
@@ -53,22 +85,36 @@
         </div>
       </template>
     </div>
-    <div class="song-item-operating" :class="{ 'song-item-operating-list': list }">
-      <div v-if="favorite" class="song-item-operating-like">
+    <div class="song-item-operating" :class="{ 
+      'song-item-operating-list': list,
+      'song-item-operating-compact': compact 
+    }">
+      <div v-if="favorite" class="song-item-operating-like" :class="{ 'opacity-0': compact && !isHovering && !isFavorite }">
         <i
           class="iconfont icon-likefill"
           :class="{ 'like-active': isFavorite }"
           @click.stop="toggleFavorite"
         ></i>
       </div>
+      <n-tooltip v-if="isNext" trigger="hover" :z-index="9999999" :delay="400">
+        <template #trigger>
+          <div class="song-item-operating-next" @click.stop="handlePlayNext">
+            <i class="iconfont ri-skip-forward-fill"></i>
+          </div>
+        </template>
+        {{ t('songItem.menu.playNext') }}
+      </n-tooltip>
       <div
         class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
-        :class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
+        :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading, 'opacity-0': compact && !isHovering && !isPlaying }"
         @click="playMusicEvent(item)"
       >
         <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
         <i v-else class="iconfont icon-playfill"></i>
       </div>
+      <div v-if="compact" class="song-item-operating-menu" @click.stop="handleMenuClick" :class="{ 'opacity-0': compact && !isHovering && !isPlaying }">
+        <i class="iconfont ri-more-fill"></i>
+      </div>
     </div>
     <n-dropdown
       v-if="isElectron"
@@ -76,7 +122,7 @@
       :x="dropdownX"
       :y="dropdownY"
       :options="dropdownOptions"
-      :z-index="99999"
+      :z-index="99999999"
       placement="bottom-start"
       @clickoutside="showDropdown = false"
       @select="handleSelect"
@@ -87,13 +133,12 @@
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash';
 import type { MenuOption } from 'naive-ui';
-import { NImage, NText, useMessage } from 'naive-ui';
+import { NEllipsis, NImage, useMessage } from 'naive-ui';
 import { computed, h, inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { getSongUrl } from '@/hooks/MusicListHook';
+import { getSongUrl } from '@/store/modules/player';
 import { useArtist } from '@/hooks/useArtist';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
@@ -106,18 +151,24 @@ const props = withDefaults(
     item: SongResult;
     mini?: boolean;
     list?: boolean;
+    compact?: boolean;
     favorite?: boolean;
     selectable?: boolean;
     selected?: boolean;
     canRemove?: boolean;
+    isNext?: boolean;
+    index?: number;
   }>(),
   {
     mini: false,
     list: false,
+    compact: false,
     favorite: true,
     selectable: false,
     selected: false,
-    canRemove: false
+    canRemove: false,
+    isNext: false,
+    index: undefined
   }
 );
 
@@ -137,6 +188,7 @@ const isPlaying = computed(() => {
 const showDropdown = ref(false);
 const dropdownX = ref(0);
 const dropdownY = ref(0);
+const isHovering = ref(false);
 
 const isDownloading = ref(false);
 
@@ -162,26 +214,49 @@ const renderSongPreview = () => {
       h(
         'div',
         {
-          class: 'flex-1 min-w-0 py-1'
+          class: 'flex-1 min-w-0 py-1 overflow-hidden'
         },
         [
           h(
             'div',
             {
-              class: 'mb-1'
+              class: 'mb-1 overflow-hidden'
             },
             [
               h(
-                NText,
+                NEllipsis,
                 {
+                  lineClamp: 1,
                   depth: 1,
-                  class: 'text-sm font-medium'
+                  class: 'text-sm font-medium w-full',
+                  style: 'max-width: 150px; min-width: 120px;'
                 },
                 {
                   default: () => props.item.name
                 }
               )
             ]
+          ),
+          h(
+            'div',
+            {
+              class: 'text-xs text-gray-500 dark:text-gray-400 overflow-hidden'
+            },
+            [
+              h(
+                NEllipsis,
+                {
+                  lineClamp: 1,
+                  style: 'max-width: 150px;'
+                },
+                {
+                  default: () => {
+                    const artistNames = (props.item.ar || props.item.song?.artists)?.map((a) => a.name).join(' / ');
+                    return artistNames || '未知艺术家';
+                  }
+                }
+              )
+            ]
           )
         ]
       )
@@ -258,6 +333,13 @@ const handleContextMenu = (e: MouseEvent) => {
   dropdownY.value = e.clientY;
 };
 
+const handleMenuClick = (e: MouseEvent) => {
+  e.preventDefault();
+  showDropdown.value = true;
+  dropdownX.value = e.clientX;
+  dropdownY.value = e.clientY;
+};
+
 const handleSelect = (key: string | number) => {
   showDropdown.value = false;
   if (key === 'download') {
@@ -361,18 +443,6 @@ const imageLoad = async () => {
 
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = async (item: SongResult) => {
-  // 如果是当前正在播放的音乐，则切换播放/暂停状态
-  if (playMusic.value.id === item.id) {
-    if (play.value) {
-      playerStore.setPlayMusic(false);
-      audioService.getCurrentSound()?.pause();
-    } else {
-      playerStore.setPlayMusic(true);
-      audioService.getCurrentSound()?.play();
-    }
-    return;
-  }
-
   try {
     // 使用store的setPlay方法，该方法已经包含了B站视频URL处理逻辑
     const result = await playerStore.setPlay(item);
@@ -425,6 +495,33 @@ const handlePlayNext = () => {
   playerStore.addToNextPlay(props.item);
   message.success(t('songItem.message.addedToNextPlay'));
 };
+
+// 获取歌曲时长
+const getDuration = (item: SongResult): number => {
+  // 检查各种可能的时长属性路径
+  if (item.duration) return item.duration;
+  if (typeof item.dt === 'number') return item.dt;
+  // 遍历可能存在的其他时长属性路径
+  return 0;
+};
+
+// 格式化时长
+const formatDuration = (ms: number): string => {
+  if (!ms) return '--:--';
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+// 鼠标悬停事件
+const handleMouseEnter = () => {
+  isHovering.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovering.value = false;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -441,13 +538,24 @@ const handlePlayNext = () => {
   @apply rounded-3xl p-3 flex items-center transition bg-transparent dark:text-white text-gray-900;
 
   &:hover {
-    @apply bg-gray-100 dark:bg-gray-800;
+    @apply bg-light-100 dark:bg-dark-100;
+
+    .song-item-operating-compact {
+      .song-item-operating-like,
+      .song-item-operating-play {
+        @apply opacity-100;
+      }
+    }
   }
 
   &-img {
     @apply w-12 h-12 rounded-2xl mr-4;
   }
 
+  &-index {
+    @apply w-8 text-center text-gray-500 dark:text-gray-400 text-sm;
+  }
+
   &-content {
     @apply flex-1;
 
@@ -458,6 +566,26 @@ const handlePlayNext = () => {
     &-name {
       @apply text-xs text-gray-500 dark:text-gray-400;
     }
+
+    &-compact {
+      @apply flex items-center gap-4;
+
+      &-wrapper {
+        @apply flex-1 min-w-0;
+      }
+
+      &-artist {
+        @apply text-sm text-gray-500 dark:text-gray-400 ml-2;
+      }
+    }
+
+    &-album {
+      @apply w-32 text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    &-duration {
+      @apply w-16 text-sm text-gray-500 dark:text-gray-400 text-right;
+    }
   }
 
   &-operating {
@@ -475,6 +603,14 @@ const handlePlayNext = () => {
       @apply mr-2 cursor-pointer ml-4 transition-all;
     }
 
+    &-next {
+      @apply mr-2 cursor-pointer transition-all;
+      
+      .iconfont {
+        @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
+      }
+    }
+
     .like-active {
       @apply text-red-500 dark:text-red-500;
     }
@@ -496,6 +632,14 @@ const handlePlayNext = () => {
         @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
       }
     }
+
+    &-menu {
+      @apply cursor-pointer flex items-center justify-center px-2;
+
+      .iconfont {
+        @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
+      }
+    }
   }
 
   &-select {
@@ -503,6 +647,61 @@ const handlePlayNext = () => {
   }
 }
 
+.song-compact {
+  @apply rounded-lg p-2 h-12 mb-1 border-b dark:border-gray-800 border-gray-100;
+
+  &:hover {
+    @apply bg-gray-50 dark:bg-gray-700;
+
+    .opacity-0 {
+      opacity: 1;
+    }
+  }
+
+  .song-item-content {
+    &-title {
+      @apply text-sm cursor-pointer;
+    }
+  }
+  
+  .song-item-content-compact-wrapper {
+    @apply flex items-center;
+  }
+
+  .song-item-content-compact-artist {
+    @apply w-40;
+  }
+
+  .song-item-operating-compact {
+    @apply border-none bg-transparent gap-2 flex items-center;
+
+    .song-item-operating-like,
+    .song-item-operating-play {
+      @apply transition-opacity duration-200;
+    }
+
+    .song-item-operating-play {
+      @apply w-7 h-7;
+
+      .iconfont {
+        @apply text-base;
+      }
+    }
+
+    .song-item-operating-like {
+      @apply mr-1 ml-0;
+
+      .iconfont {
+        @apply text-base;
+      }
+    }
+
+    .opacity-0 {
+      opacity: 0;
+    }
+  }
+}
+
 .song-mini {
   @apply p-2 rounded-2xl;
 

src/renderer/components/home/RecommendAlbum.vue

@@ -22,26 +22,19 @@
         </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 MusicList from '@/components/MusicList.vue';
-import type { IAlbumNew } from '@/type/album';
 import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import type { IAlbumNew } from '@/type/album';
 
 const { t } = useI18n();
 const albumData = ref<IAlbumNew>();
@@ -50,33 +43,42 @@ const loadAlbumList = async () => {
   albumData.value = data;
 };
 
-const showMusic = ref(false);
-const songList = ref([]);
-const albumName = ref('');
-const loadingList = ref(false);
-const albumInfo = ref<any>({});
+const router = useRouter();
+
 const handleClick = async (item: any) => {
-  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;
+  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);
+  }
 };
 
 onMounted(() => {

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="showMusic = true"
+              @click="showDayRecommend"
             >
               <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="toPlaylist(item.id)"
+                @click="openPlaylist(item)"
               >
                 <div class="user-play-item-img">
                   <img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="" />
@@ -100,7 +100,7 @@
             @click="handleArtistClick(item.id)"
           >
             <div
-              :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
+              :style="setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))"
               class="recommend-singer-item-bg"
             ></div>
             <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
@@ -124,42 +124,25 @@
         </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';
 import { Playlist } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
 import { SongResult } from '@/type/music';
-import type { IHotSinger } from '@/type/singer';
+import type { Artist, IHotSinger } from '@/type/singer';
 import {
   getImgUrl,
   isMobile,
@@ -167,20 +150,21 @@ import {
   setAnimationDelay,
   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);
@@ -246,21 +230,49 @@ const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
 };
 
 onMounted(async () => {
-  await loadData();
+  loadNonUserData();
 });
 
-const loadData = async () => {
+const JayChouId = 6452;
+const loadArtistData = async () => {
   try {
-    // 获取每日推荐
-    try {
+    const { data: artistData }: { data: { data: { artist: Artist } } } = await getArtistDetail(JayChouId);
+    console.log('artistData', artistData);
+    if (hotSingerData.value) {
+      // 将周杰伦数据放在第一位
+      hotSingerData.value.artists = [artistData.data.artist, ...hotSingerData.value.artists];
+    }
+  } catch (error) {
+    console.error('获取周杰伦数据失败:', error);
+  }
+}
+
+// 加载不需要登录的数据
+const loadNonUserData = async () => {
+  try {
+
+        // 获取每日推荐
+        try {
       const {
         data: { data: dayRecommend }
       } = await getDayRecommend();
       dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
     } catch (error) {
-      console.error('error', error);
+      console.error('获取每日推荐失败:', error);
     }
+    // 获取热门歌手
+    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
+    hotSingerData.value = singerData;
 
+    await loadArtistData();
+  } catch (error) {
+    console.error('加载热门歌手数据失败:', error);
+  }
+};
+
+// 加载需要登录的数据
+const loadUserData = async () => {
+  try {
     if (userStore.user) {
       const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
       // 确保最多只显示4个歌单，并按播放次数排序
@@ -268,12 +280,8 @@ const loadData = async () => {
         .sort((a, b) => b.playCount - a.playCount)
         .slice(0, 4);
     }
-
-    // 获取热门歌手
-    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
-    hotSingerData.value = singerData;
   } catch (error) {
-    console.error('error', error);
+    console.error('加载用户数据失败:', error);
   }
 };
 
@@ -281,27 +289,34 @@ const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
 
-const toPlaylist = async (id: number) => {
+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;
   playlistLoading.value = true;
-  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 {
+  
+  getListDetail(item.id).then(res => {
+    playlistDetail.value = res.data;
     playlistLoading.value = false;
-  }
+    
+    navigateToMusicList(router, {
+      id: item.id,
+      type: 'playlist',
+      name: item.name,
+      songList: res.data.playlist.tracks || [],
+      listInfo: res.data.playlist,
+      canRemove: false
+    });
+  });
 };
 
 // 添加直接播放歌单的方法
@@ -394,7 +409,7 @@ const loadFullPlaylist = async (trackIds: { id: number }[], initialSongs: SongRe
 // 监听登录状态
 watchEffect(() => {
   if (userStore.user) {
-    loadData();
+    loadUserData();
   }
 });
 

src/renderer/components/player/MiniPlayBar.vue

@@ -31,34 +31,34 @@
 
       <!-- 控制按钮区域 -->
       <div class="control-buttons">
-        <button class="control-button previous" @click="handlePrev">
+        <div class="control-button previous" @click="handlePrev">
           <i class="iconfont icon-prev"></i>
-        </button>
-        <button class="control-button play" @click="playMusicEvent">
+        </div>
+        <div class="control-button play" @click="playMusicEvent">
           <i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
-        </button>
-        <button class="control-button next" @click="handleNext">
+        </div>
+        <div class="control-button next" @click="handleNext">
           <i class="iconfont icon-next"></i>
-        </button>
+        </div>
       </div>
 
       <!-- 右侧功能按钮 -->
       <div class="function-buttons">
-        <button class="function-button">
+        <div class="function-button">
           <i
             class="iconfont icon-likefill"
             :class="{ 'like-active': isFavorite }"
             @click="toggleFavorite"
           ></i>
-        </button>
+        </div>
 
-        <n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
+        <n-popover v-if="component" trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
           <template #trigger>
-            <button class="function-button" @click="mute">
+            <div class="function-button" @click="mute">
               <i class="iconfont" :class="getVolumeIcon"></i>
-            </button>
+            </div>
           </template>
-          <div class="volume-slider-wrapper">
+          <div class="volume-slider-wrapper transparent-popover">
             <n-slider
               v-model:value="volumeSlider"
               :step="0.01"
@@ -69,15 +69,15 @@
         </n-popover>
 
         <!-- 播放列表按钮 -->
-        <button v-if="!component" class="function-button" @click="togglePlaylist">
+        <div v-if="!component" class="function-button" @click="togglePlaylist">
           <i class="iconfont icon-list"></i>
-        </button>
+        </div>
       </div>
 
       <!-- 关闭按钮 -->
-      <button v-if="!component" class="close-button" @click="handleClose">
+      <div v-if="!component" class="close-button" @click="handleClose">
         <i class="iconfont ri-close-line"></i>
-      </button>
+      </div>
     </div>
 
     <!-- 进度条 -->
@@ -123,7 +123,7 @@ import SongItem from '@/components/common/SongItem.vue';
 import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
 import { audioService } from '@/services/audioService';
-import { usePlayerStore, useSettingsStore } from '@/store';
+import { isBilibiliIdMatch, usePlayerStore, useSettingsStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
@@ -185,20 +185,31 @@ const mute = () => {
 
 // 收藏相关
 const isFavorite = computed(() => {
-  const numericId =
-    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
-  return playerStore.favoriteList.includes(numericId);
+  // 对于B站视频，使用ID匹配函数
+  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
+    return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
+  }
+  
+  // 非B站视频直接比较ID
+  return playerStore.favoriteList.includes(playMusic.value.id);
 });
 
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
-  const numericId =
-    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+  
+  // 处理B站视频的收藏ID
+  let favoriteId = playMusic.value.id;
+  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
+    // 如果当前播放的是B站视频，且已有ID不包含--格式，则需要构造完整ID
+    if (!String(favoriteId).includes('--')) {
+      favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
+    }
+  }
 
   if (isFavorite.value) {
-    playerStore.removeFromFavorite(numericId);
+    playerStore.removeFromFavorite(favoriteId);
   } else {
-    playerStore.addToFavorite(numericId);
+    playerStore.addToFavorite(favoriteId);
   }
 };
 
@@ -301,25 +312,7 @@ const handleNext = () => playerStore.nextPlay();
 
 const playMusicEvent = async () => {
   try {
-    if (!playerStore.playMusic?.id || !playerStore.playMusicUrl) {
-      console.warn('No valid music or URL available');
-      playerStore.setPlay(playerStore.playMusic);
-      return;
-    }
-
-    if (play.value) {
-      if (audioService.getCurrentSound()) {
-        audioService.pause();
-        playerStore.setPlayMusic(false);
-      }
-    } else {
-      if (audioService.getCurrentSound()) {
-        audioService.play();
-      } else {
-        await audioService.play(playerStore.playMusicUrl, playerStore.playMusic);
-      }
-      playerStore.setPlayMusic(true);
-    }
+    playerStore.setPlay(playerStore.playMusic);
   } catch (error) {
     console.error('播放出错:', error);
     playerStore.nextPlay();
@@ -448,7 +441,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;
+  @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;
   width: 32px;
   height: 32px;
 
@@ -473,10 +466,9 @@ const setMusicFull = () => {
 }
 
 .function-button {
-  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
+  @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;
   width: 32px;
   height: 32px;
-  color: var(--text-color-2, #666);
 
   &:hover {
     @apply bg-gray-100 dark:bg-dark-300;
@@ -535,8 +527,7 @@ const setMusicFull = () => {
 }
 
 .volume-slider-wrapper {
-  @apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
-  width: 40px;
+  @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
   height: 160px;
 }
 
@@ -597,4 +588,8 @@ const setMusicFull = () => {
     }
   }
 }
+
+:deep(.n-popover){
+  background-color: transparent !important;
+}
 </style>

src/renderer/components/player/MobilePlayBar.vue

@@ -87,6 +87,9 @@
           </div>
         </n-popover>
       </div>
+
+      <!-- 定时关闭按钮 -->
+      <!-- <SleepTimerPopover mode="mobile" /> -->
     </template>
 
     <!-- Mini模式 - 在musicFullVisible为false时显示 -->
@@ -154,7 +157,6 @@ import { computed, ref, watch } from 'vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
 import MusicFull from '@/layout/components/MusicFull.vue';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import type { SongResult } from '@/type/music';
@@ -231,25 +233,7 @@ const toggleFavorite = () => {
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
-    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
-      console.warn('No valid music or URL available');
-      playerStore.setPlay(playMusic.value);
-      return;
-    }
-
-    if (play.value) {
-      if (audioService.getCurrentSound()) {
-        audioService.pause();
-        playerStore.setPlayMusic(false);
-      }
-    } else {
-      if (audioService.getCurrentSound()) {
-        audioService.play();
-      } else {
-        await audioService.play(playerStore.playMusicUrl, playMusic.value);
-      }
-      playerStore.setPlayMusic(true);
-    }
+    playerStore.setPlay(playMusic.value);
   } catch (error) {
     console.error('播放出错:', error);
     playerStore.nextPlay();

src/renderer/components/player/PlayBar.vue

@@ -39,6 +39,9 @@
         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> -->
@@ -124,6 +127,12 @@
         </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"
@@ -144,42 +153,14 @@
         </template>
         <eq-control />
       </n-popover>
-      <n-popover
-        trigger="click"
-        :z-index="99999999"
-        content-class="music-play"
-        raw
-        :show-arrow="false"
-        :delay="200"
-        arrow-wrapper-style=" border-radius:1.5rem"
-        @update-show="scrollToPlayList"
-      >
+      <!-- 定时关闭功能 -->
+      <sleep-timer-popover mode="desktop" />
+      <n-tooltip trigger="hover" :z-index="9999999">
         <template #trigger>
-          <n-tooltip trigger="manual" :z-index="9999999">
-            <template #trigger>
-              <i class="iconfont icon-list"></i>
-            </template>
-            {{ t('player.playBar.playList') }}
-          </n-tooltip>
+          <i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
         </template>
-        <div class="music-play-list">
-          <div class="music-play-list-back"></div>
-          <n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
-            <template #default="{ item }">
-              <div class="music-play-list-content">
-                <div class="flex items-center justify-between">
-                  <song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
-                  <div class="delete-btn" @click.stop="handleDeleteSong(item)">
-                    <i
-                      class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
-                    ></i>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </n-virtual-list>
-        </div>
-      </n-popover>
+        {{ t('player.playBar.playList') }}
+      </n-tooltip>
     </div>
     <!-- 播放音乐 -->
     <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
@@ -189,11 +170,12 @@
 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import { computed, ref, useTemplateRef, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 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,
@@ -206,9 +188,11 @@ import {
 import { useArtist } from '@/hooks/useArtist';
 import MusicFull from '@/layout/components/MusicFull.vue';
 import { audioService } from '@/services/audioService';
-import { usePlayerStore } from '@/store/modules/player';
+import { 
+  isBilibiliIdMatch, 
+  usePlayerStore 
+} from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
-import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 
 const playerStore = usePlayerStore();
@@ -217,8 +201,6 @@ const { t } = useI18n();
 const message = useMessage();
 // 是否播放
 const play = computed(() => playerStore.isPlay);
-// 播放列表
-const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');
 
@@ -356,42 +338,12 @@ const showSliderTooltip = ref(false);
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
-    // 检查是否有有效的音乐对象
-    if (!playMusic.value?.id) {
-      console.warn('没有有效的播放对象');
-      return;
-    }
-
-    // 当前处于播放状态 -> 暂停
-    if (play.value) {
-      if (audioService.getCurrentSound()) {
-        audioService.pause();
-        playerStore.setPlayMusic(false);
-      }
-      return;
-    }
-
-    // 当前处于暂停状态 -> 播放
-    // 有音频实例，直接播放
-    if (audioService.getCurrentSound()) {
-      audioService.play();
+    const result = await playerStore.setPlay({ ...playMusic.value});
+    if (result) {
       playerStore.setPlayMusic(true);
-      return;
-    }
-
-    // 没有音频实例，重新获取并播放（包括重新获取B站视频URL）
-    try {
-      // 复用当前播放对象，但强制重新获取URL
-      const result = await playerStore.setPlay({ ...playMusic.value, playMusicUrl: undefined });
-      if (result) {
-        playerStore.setPlayMusic(true);
-      }
-    } catch (error) {
-      console.error('重新获取播放链接失败:', error);
-      message.error(t('player.playFailed'));
     }
   } catch (error) {
-    console.error('播放出错:', error);
+    console.error('重新获取播放链接失败:', error);
     message.error(t('player.playFailed'));
   }
 };
@@ -407,32 +359,33 @@ const setMusicFull = () => {
   }
 };
 
-const palyListRef = useTemplateRef('palyListRef') as any;
-
-const scrollToPlayList = (val: boolean) => {
-  if (!val) return;
-  setTimeout(() => {
-    palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
-  }, 50);
-};
-
 const isFavorite = computed(() => {
-  // 将id转换为number，兼容B站视频ID
-  const numericId =
-    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
-  return playerStore.favoriteList.includes(numericId);
+  // 对于B站视频，使用ID匹配函数
+  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
+    return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
+  }
+  
+  // 非B站视频直接比较ID
+  return playerStore.favoriteList.includes(playMusic.value.id);
 });
 
 const toggleFavorite = async (e: Event) => {
+  console.log('playMusic.value', playMusic.value);
   e.stopPropagation();
-  // 将id转换为number，兼容B站视频ID
-  const numericId =
-    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
-
+  
+  // 处理B站视频的收藏ID
+  let favoriteId = playMusic.value.id;
+  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
+    // 如果当前播放的是B站视频，且已有ID不包含--格式，则需要构造完整ID
+    if (!String(favoriteId).includes('--')) {
+      favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
+    }
+  }
+  
   if (isFavorite.value) {
-    playerStore.removeFromFavorite(numericId);
+    playerStore.removeFromFavorite(favoriteId);
   } else {
-    playerStore.addToFavorite(numericId);
+    playerStore.addToFavorite(favoriteId);
   }
 };
 
@@ -447,25 +400,11 @@ const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
 
-// 监听播放栏显示状态
-watch(
-  () => MusicFullRef.value?.config?.hidePlayBar,
-  (newVal) => {
-    if (newVal && musicFullVisible.value) {
-      // 使用 animate.css 动画，不需要手动设置样式
-    }
-  }
-);
-
 const isEQVisible = ref(false);
 
-// 在 script setup 部分添加删除歌曲的处理函数
-const handleDeleteSong = (song: SongResult) => {
-  // 如果删除的是当前播放的歌曲，先切换到下一首
-  if (song.id === playMusic.value.id) {
-    playerStore.nextPlay();
-  }
-  playerStore.removeFromPlayList(song.id as number);
+// 打开播放列表抽屉
+const openPlayListDrawer = () => {
+  playerStore.setPlayListDrawerVisible(true);
 };
 </script>
 
@@ -557,10 +496,10 @@ const handleDeleteSong = (song: SongResult) => {
 }
 
 .audio-button {
-  @apply flex items-center mx-4;
+  @apply flex items-center;
 
   .iconfont {
-    @apply text-2xl transition cursor-pointer m-4;
+    @apply text-2xl transition cursor-pointer mx-3;
     @apply hover:text-green-500;
   }
 }
@@ -742,4 +681,25 @@ 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>

src/renderer/components/player/PlayListDrawer.vue

@@ -0,0 +1,287 @@
+<template>
+  <!-- 透明遮罩层，点击任意位置关闭 -->
+  <div v-if="internalVisible" class="fixed-overlay" @click="closePanel"></div>
+  
+  <!-- 使用animate.css进行动画效果 -->
+  <div 
+    v-if="internalVisible" 
+    class="playlist-panel"
+    :class="[
+      'animate__animated',
+      closing ? (isMobile ? 'animate__slideOutDown' : 'animate__slideOutRight') : 
+               (isMobile ? 'animate__slideInUp' : 'animate__slideInRight')
+    ]"
+  >
+    <div class="playlist-panel-header">
+      <div class="title">{{ t('player.playBar.playList') }}</div>
+      <div class="header-actions">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <div class="action-btn" @click="handleClearPlaylist">
+              <i class="iconfont ri-delete-bin-line"></i>
+            </div>
+          </template>
+          {{ t('player.playList.clearAll')}}
+        </n-tooltip>
+        <div class="close-btn" @click="closePanel">
+          <i class="iconfont ri-close-line"></i>
+        </div>
+      </div>
+    </div>
+    <div class="playlist-panel-content">
+      <div v-if="playList.length === 0" class="empty-playlist">
+        <i class="iconfont ri-music-2-line"></i>
+        <p>{{ t('player.playList.empty')}}</p>
+      </div>
+      <n-virtual-list v-else ref="playListRef" :item-size="62" item-resizable :items="playList">
+        <template #default="{ item }">
+          <div class="music-play-list-content">
+            <div class="flex items-center justify-between">
+              <song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
+              <div class="delete-btn" @click.stop="handleDeleteSong(item)">
+                <i
+                  class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
+                ></i>
+              </div>
+            </div>
+          </div>
+        </template>
+      </n-virtual-list>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessage, useDialog } from 'naive-ui';
+import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store/modules/player';
+import type { SongResult } from '@/type/music';
+import { isMobile } from '@/utils';
+
+const { t } = useI18n();
+const message = useMessage();
+const dialog = useDialog();
+const playerStore = usePlayerStore();
+
+// 内部状态控制组件的可见性
+const internalVisible = ref(false);
+const closing = ref(false);
+
+// 当前是否显示播放列表面板
+const show = computed({
+  get: () => playerStore.playListDrawerVisible,
+  set: (value) => {
+    playerStore.setPlayListDrawerVisible(value);
+  }
+});
+
+// 监听外部可见性变化
+watch(show, (newValue) => {
+  if (newValue) {
+    // 打开面板
+    internalVisible.value = true;
+    closing.value = false;
+    // 在下一个渲染周期后滚动到当前歌曲
+    nextTick(() => {
+      scrollToCurrentSong();
+    });
+  } else {
+    // 如果已经是关闭状态，不需要处理
+    if (!internalVisible.value) return;
+    
+    // 开始关闭动画
+    closing.value = true;
+    // 等待动画完成后再隐藏组件
+    setTimeout(() => {
+      internalVisible.value = false;
+    }, 400); // 动画持续时间
+  }
+}, { immediate: true });
+
+// 播放列表
+const playList = computed(() => playerStore.playList as SongResult[]);
+
+// 播放列表引用
+const playListRef = ref<any>(null);
+
+// 关闭面板
+const closePanel = () => {
+  show.value = false;
+};
+
+// 清空播放列表
+const handleClearPlaylist = () => {
+  if (playList.value.length === 0) {
+    message.info(t('player.playList.alreadyEmpty'));
+    return;
+  }
+  
+  dialog.warning({
+    title: t('player.playList.clearConfirmTitle'),
+    content: t('player.playList.clearConfirmContent'),
+    positiveText: t('common.confirm'),
+    negativeText: t('common.cancel'),
+    style: { zIndex: 999999999 }, // 确保对话框显示在遮罩之上
+    onPositiveClick: () => {
+      // 清空播放列表
+      playerStore.clearPlayAll();
+      message.success(t('player.playList.cleared'));
+    }
+  });
+};
+
+// 处理键盘事件
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && internalVisible.value) {
+    closePanel();
+  }
+};
+
+// 添加和移除键盘事件监听
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+
+// 滚动到当前播放歌曲
+const scrollToCurrentSong = () => {
+  // 延长等待时间，确保列表已渲染完成
+  setTimeout(() => {
+    if (playListRef.value && playList.value.length > 0) {
+      const index = playerStore.playListIndex;
+      console.log('滚动到歌曲索引:', index);
+      playListRef.value.scrollTo({ 
+        top: (index > 3 ? (index - 3) : 0) * 62,
+      });
+    }
+  }, 100);
+};  
+
+// 删除歌曲
+const handleDeleteSong = (song: SongResult) => {
+  playerStore.removeFromPlayList(song.id as number);
+};
+</script>
+
+<style lang="scss" scoped>
+.fixed-overlay {
+  @apply fixed inset-0 z-[999999];
+  pointer-events: auto; // 允许点击关闭
+  cursor: default;
+}
+
+.playlist-panel {
+  @apply fixed right-0 z-[9999999] rounded-l-xl overflow-hidden;
+  width: 350px;
+  height: 70vh;
+  top: 15vh; // 距离顶部15%
+  animation-duration: 0.4s !important; // 动画持续时间
+  
+  @apply bg-light dark:bg-dark shadow-2xl dark:border dark:border-gray-700;
+  
+  &-header {
+    @apply flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-900;
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.7);
+    
+    .dark & {
+      background-color: rgba(18, 18, 18, 0.7);
+    }
+    
+    .title {
+      @apply text-base font-medium;
+    }
+    
+    .header-actions {
+      @apply flex items-center;
+    }
+    
+    .action-btn,
+    .close-btn {
+      @apply w-8 h-8 flex items-center justify-center rounded-full cursor-pointer mx-1;
+      @apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
+      
+      .iconfont {
+        @apply text-xl;
+      }
+    }
+    
+    .action-btn {
+      @apply text-gray-500 dark:text-gray-400;
+      &:hover {
+        @apply text-red-500 dark:text-red-400;
+      }
+    }
+  }
+  
+  &-content {
+    @apply h-[calc(70vh-60px)] overflow-hidden;
+  }
+}
+
+.empty-playlist {
+  @apply flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500;
+  
+  .iconfont {
+    @apply text-5xl mb-4;
+  }
+  
+  p {
+    @apply text-sm;
+  }
+}
+
+.music-play-list-content {
+  @apply pr-2 hover:bg-light-100 dark:hover:bg-dark-100;
+  &:hover {
+    .delete-btn {
+      @apply visible;
+    }
+  }
+  .delete-btn {
+    @apply pr-2 cursor-pointer invisible;
+    .iconfont {
+      @apply text-lg;
+    }
+  }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .playlist-panel {
+    width: 100%;
+    height: 60vh;
+    top: auto;
+    bottom: 56px; // 移动端底部留出导航栏高度
+    border-radius: 16px 16px 0 0;
+    border-left: none;
+    border-top: 1px solid theme('colors.gray.200');
+    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
+    
+    &-header {
+      @apply text-center relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: -15px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 5px;
+        border-radius: 5px;
+        background-color: rgba(150, 150, 150, 0.3);
+      }
+    }
+    
+    &-content {
+      height: calc(60vh - 60px);
+    }
+  }
+}
+</style> 

src/renderer/components/player/ReparsePopover.vue

@@ -0,0 +1,233 @@
+<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: 'KuGou', value: 'kugou' as Platform },
+  { label: 'pyncmd', value: 'pyncmd' as Platform },
+  { label: 'KuWo', value: 'kuwo' as Platform },
+  { label: 'Bilibili', value: 'bilibili' as Platform },
+  { label: 'GdMuisc', 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>

src/renderer/components/player/SleepTimerPopover.vue

@@ -0,0 +1,478 @@
+<template>
+  <n-popover
+    trigger="click"
+    :z-index="99999999"
+    content-class="sleep-timer"
+    raw
+    :show-arrow="false"
+    placement="top"
+    display-directive="show"
+  >
+    <template #trigger>
+      <n-tooltip trigger="hover" :z-index="9999999">
+        <template #trigger>
+          <div class="control-btn timer" :class="{ 'mobile-timer': mode === 'mobile' }">
+          <i 
+            class="iconfont ri-time-line"
+            :class="{ 'text-green-500': hasTimerActive }"
+          ></i>
+        </div>
+        </template>
+        {{ t('player.sleepTimer.title') }}
+      </n-tooltip>
+    </template>
+    <div class="sleep-timer-container" :class="{ 'mobile-sleep-timer-container': mode === 'mobile' }">
+      <div class="sleep-timer-back"></div>
+      
+      <div class="sleep-timer-content">
+        <div class="sleep-timer-title">{{ t('player.sleepTimer.title') }}</div>
+        
+        <div v-if="hasTimerActive" class="sleep-timer-active">
+          <div class="timer-status">
+            <template v-if="timerType === 'time'">
+              <div class="timer-value countdown-timer">{{ formattedRemainingTime }}</div>
+              <div class="timer-label">{{ t('player.sleepTimer.minutesRemaining', { minutes: Math.ceil(remainingMinutes/60) }) }}</div>
+            </template>
+            <template v-else-if="timerType === 'songs'">
+              <div class="timer-value">{{ remainingSongs }}</div>
+              <div class="timer-label">{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}</div>
+            </template>
+            <template v-else-if="timerType === 'end'">
+              <div class="timer-value">{{ t('player.sleepTimer.activeUntilEnd') }}</div>
+              <div class="timer-label">{{ t('player.sleepTimer.afterPlaylist') }}</div>
+            </template>
+          </div>
+          
+          <n-button type="error" class="cancel-timer-btn" @click="handleCancelTimer" round>
+            {{ t('player.sleepTimer.cancel') }}
+          </n-button>
+        </div>
+        
+        <div v-else class="sleep-timer-options">
+          <!-- 按时间定时 -->
+          <div class="option-section">
+            <h4 class="option-title">{{ t('player.sleepTimer.timeMode') }}</h4>
+            <div class="time-options">
+              <n-button
+                v-for="minutes in [15, 30, 60, 90]"
+                :key="minutes"
+                size="small"
+                class="time-option-btn"
+                @click="handleSetTimeTimer(minutes)"
+                round
+              >
+                {{ minutes }}{{ t('player.sleepTimer.minutes') }}
+              </n-button>
+              <div class="custom-time">
+                <n-input-number
+                  v-model:value="customMinutes"
+                  :min="1"
+                  :max="300"
+                  size="small"
+                  class="custom-time-input"
+                  round
+                />
+                <n-button
+                  size="small"
+                  type="primary"
+                  class="custom-time-btn"
+                  :disabled="!customMinutes"
+                  @click="handleSetTimeTimer(customMinutes)"
+                  round
+                >
+                  {{ t('player.sleepTimer.set') }}
+                </n-button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 按歌曲数定时 -->
+          <div class="option-section">
+            <h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
+            <div class="songs-options">
+              <n-button
+                v-for="songs in [1, 3, 5, 10]"
+                :key="songs"
+                size="small"
+                class="songs-option-btn"
+                @click="handleSetSongsTimer(songs)"
+                round
+              >
+                {{ songs }}{{ t('player.sleepTimer.songs') }}
+              </n-button>
+              <div class="custom-songs">
+                <n-input-number
+                  v-model:value="customSongs"
+                  :min="1"
+                  :max="50"
+                  size="small"
+                  class="custom-songs-input"
+                  round
+                />
+                <n-button
+                  size="small"
+                  type="primary"
+                  class="custom-songs-btn"
+                  :disabled="!customSongs"
+                  @click="handleSetSongsTimer(customSongs)"
+                  round
+                >
+                  {{ t('player.sleepTimer.set') }}
+                </n-button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 播放完列表后关闭 -->
+          <div class="option-section playlist-end-section">
+            <n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
+              {{ t('player.sleepTimer.playlistEnd') }}
+            </n-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+
+import { usePlayerStore } from '@/store/modules/player';
+
+// 组件接收一个mode参数，用于标识是移动端还是桌面端
+defineProps({
+  mode: {
+    type: String,
+    default: 'desktop' // 'desktop' 或 'mobile'
+  }
+});
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+// 从store获取所有相关状态
+const { sleepTimer} = storeToRefs(playerStore);
+
+// 本地状态，用于UI展示
+const customMinutes = ref(30);
+const customSongs = ref(5);
+// 添加一个刷新触发变量，用于强制更新倒计时
+const refreshTrigger = ref(0);
+
+// 计算属性，判断定时器状态
+const hasTimerActive = computed(() => {
+  return playerStore.hasSleepTimerActive;
+});
+
+const timerType = computed(() => {
+  return sleepTimer.value.type;
+});
+
+// 剩余时间（分钟）
+const remainingMinutes = computed(() => {
+  return playerStore.sleepTimerRemainingTime;
+});
+
+// 剩余歌曲数
+const remainingSongs = computed(() => {
+  return playerStore.sleepTimerRemainingSongs;
+});
+
+// 处理设置时间定时器
+function handleSetTimeTimer(minutes: number) {
+  playerStore.setSleepTimerByTime(minutes);
+}
+
+// 处理设置歌曲数定时器
+function handleSetSongsTimer(songs: number) {
+  playerStore.setSleepTimerBySongs(songs);
+}
+
+// 处理设置播放列表结束定时器
+function handleSetPlaylistEndTimer() {
+  playerStore.setSleepTimerAtPlaylistEnd();
+}
+
+// 处理取消定时器
+function handleCancelTimer() {
+  playerStore.clearSleepTimer();
+}
+
+// 格式化剩余时间为 HH:MM:SS
+const formattedRemainingTime = computed(() => {
+  // 依赖刷新触发器强制更新
+  void refreshTrigger.value;
+  
+  if (timerType.value !== 'time' || !sleepTimer.value.endTime) {
+    return '00:00:00';
+  }
+  
+  const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
+  const totalSeconds = Math.floor(remaining / 1000);
+  
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = Math.floor(totalSeconds % 60);
+  
+  const formattedHours = hours.toString().padStart(2, '0');
+  const formattedMinutes = minutes.toString().padStart(2, '0');
+  const formattedSeconds = seconds.toString().padStart(2, '0');
+  
+  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+});
+
+// 监听剩余时间变化
+let timerInterval: number | null = null;
+
+onMounted(() => {
+  // 如果当前有定时器，开始更新UI
+  if (hasTimerActive.value && timerType.value === 'time') {
+    startTimerUpdate();
+  }
+  
+  // 监听定时器状态变化
+  watch(
+    () => [hasTimerActive.value, timerType.value], 
+    ([newHasTimer, newType]) => {
+      if (newHasTimer && newType === 'time') {
+        startTimerUpdate();
+      } else {
+        stopTimerUpdate();
+      }
+    }
+  );
+});
+
+// 启动定时器更新UI
+function startTimerUpdate() {
+  stopTimerUpdate(); // 先停止之前的计时器
+  
+  // 每秒更新UI
+  timerInterval = window.setInterval(() => {
+    // 更新刷新触发器，强制重新计算
+    refreshTrigger.value = Date.now();
+  }, 500) as unknown as number;
+}
+
+// 停止定时器更新UI
+function stopTimerUpdate() {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+}
+
+onUnmounted(() => {
+  stopTimerUpdate();
+});
+</script>
+
+<style lang="scss" scoped>
+.control-btn.timer {
+  @apply cursor-pointer;
+  
+  .iconfont {
+    @apply text-2xl m-4 transition-all duration-300 ease-in-out;
+    
+    &:hover {
+      @apply text-green-500 transform scale-110;
+    }
+  }
+
+  &.mobile-timer {
+    @apply flex items-center justify-center;
+    height: 56px;
+    width: 56px;
+  }
+}
+
+// 主容器样式
+.sleep-timer-container {
+  width: 380px;
+  height: auto;
+  @apply relative overflow-hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
+  transform-origin: top center;
+  animation: popoverEnter 0.2s cubic-bezier(0.3, 0, 0.2, 1);
+  
+  // 入场动画
+  @keyframes popoverEnter {
+    from {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  // 移动端样式
+  &.mobile-sleep-timer-container {
+    width: 92vw;
+    max-width: 400px;
+    @apply rounded-t-2xl;
+    max-height: 500px;
+  }
+
+  // 背景毛玻璃效果
+  .sleep-timer-back {
+    @apply absolute top-0 left-0 w-full h-full dark:bg-gray-900 dark:bg-opacity-75 dark:border-gray-700;
+    backdrop-filter: blur(25px);
+    -webkit-backdrop-filter: blur(25px);
+    background-color: rgba(255, 255, 255, 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  // 内容区域
+  .sleep-timer-content {
+    @apply p-6 relative z-10;
+
+    // 标题
+    .sleep-timer-title {
+      @apply text-xl font-bold text-center mb-6 text-gray-800 dark:text-gray-100;
+      letter-spacing: 0.5px;
+    }
+
+    // 激活状态显示
+    .sleep-timer-active {
+      @apply flex flex-col items-center;
+
+      // 定时状态卡片
+      .timer-status {
+        @apply flex flex-col items-center justify-center p-8 mb-5 w-full rounded-2xl dark:bg-gray-800 dark:bg-opacity-40 dark:shadow-gray-900/20;
+        background-color: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
+        transition: all 0.3s ease;
+
+        // 定时值显示
+        .timer-value {
+          @apply text-4xl font-semibold mb-2 text-green-500;
+          
+          &.countdown-timer {
+            font-variant-numeric: tabular-nums;
+            letter-spacing: 2px;
+          }
+        }
+
+        // 标签文本
+        .timer-label {
+          @apply text-base text-gray-600 dark:text-gray-300;
+        }
+      }
+
+      // 取消按钮
+      .cancel-timer-btn {
+        @apply w-full py-3 text-base rounded-full transition-all duration-200;
+        
+        &:hover {
+          @apply transform scale-105 shadow-md;
+        }
+        
+        &:active {
+          @apply transform scale-95;
+        }
+      }
+    }
+
+    // 定时器选项区域
+    .sleep-timer-options {
+      @apply flex flex-col;
+
+      // 选项部分
+      .option-section {
+        @apply mb-7;
+
+        // 选项标题
+        .option-title {
+          @apply text-base font-medium mb-4 text-gray-700 dark:text-gray-200;
+          letter-spacing: 0.3px;
+        }
+
+        // 时间/歌曲选项容器
+        .time-options, .songs-options {
+          @apply flex flex-wrap gap-2;
+
+          // 选项按钮共享样式
+          .time-option-btn, .songs-option-btn {
+            @apply px-4 py-2 rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
+            background-color: rgba(255, 255, 255, 0.5);
+            @apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
+            @apply dark:shadow-gray-900/20;
+            
+            &:hover {
+              @apply transform scale-105 shadow-md;
+            }
+            
+            &:active {
+              @apply transform scale-95;
+            }
+          }
+
+          // 自定义输入区域
+          .custom-time, .custom-songs {
+            @apply flex items-center space-x-2 mt-4 w-full;
+
+            // 输入框
+            .custom-time-input, .custom-songs-input {
+              @apply flex-1;
+              
+              :deep(.n-input) {
+                @apply rounded-full dark:bg-gray-800 dark:bg-opacity-40 dark:border-gray-700;
+                backdrop-filter: blur(10px);
+                -webkit-backdrop-filter: blur(10px);
+                background-color: rgba(255, 255, 255, 0.5);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                transition: all 0.3s ease;
+                
+                &:hover, &:focus {
+                  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+                }
+              }
+            }
+
+            // 设置按钮
+            .custom-time-btn, .custom-songs-btn {
+              @apply py-2 px-4 rounded-full transition-all duration-200;
+              
+              &:hover {
+                @apply transform scale-105 shadow-md;
+              }
+              
+              &:active {
+                @apply transform scale-95;
+              }
+            }
+          }
+        }
+      }
+
+      // 播放列表结束选项
+      .playlist-end-section {
+        @apply mt-2;
+
+        .playlist-end-btn {
+          @apply py-3 text-base rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
+          background-color: rgba(255, 255, 255, 0.5);
+          @apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
+          @apply dark:shadow-gray-900/20;
+          
+          &:hover {
+            @apply transform scale-105 shadow-md;
+          }
+          
+          &:active {
+            @apply transform scale-95;
+          }
+        }
+      }
+    }
+  }
+}
+</style> 

src/renderer/components/settings/ClearCacheSettings.vue

@@ -0,0 +1,116 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.system.cache')"
+    :positive-text="t('common.confirm')"
+    :negative-text="t('common.cancel')"
+    @positive-click="handleConfirm"
+    @negative-click="handleCancel"
+  >
+    <n-space vertical>
+      <p>{{ t('settings.system.cacheClearTitle') }}</p>
+      <n-checkbox-group v-model:value="selectedTypes">
+        <n-space vertical>
+          <n-checkbox
+            v-for="option in clearCacheOptions"
+            :key="option.key"
+            :value="option.key"
+            :label="option.label"
+          >
+            <template #default>
+              <div>
+                <div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
+                <div class="text-gray-400 text-sm">
+                  {{ t(`settings.system.cacheTypes.${option.key}.description`) }}
+                </div>
+              </div>
+            </template>
+          </n-checkbox>
+        </n-space>
+      </n-checkbox-group>
+    </n-space>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:show', 'confirm']);
+
+const { t } = useI18n();
+const visible = ref(props.show);
+const selectedTypes = ref<string[]>([]);
+
+const clearCacheOptions = ref([
+  {
+    label: t('settings.system.cacheTypes.history.label'),
+    key: 'history',
+    description: t('settings.system.cacheTypes.history.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.favorite.label'),
+    key: 'favorite',
+    description: t('settings.system.cacheTypes.favorite.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.user.label'),
+    key: 'user',
+    description: t('settings.system.cacheTypes.user.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.settings.label'),
+    key: 'settings',
+    description: t('settings.system.cacheTypes.settings.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.downloads.label'),
+    key: 'downloads',
+    description: t('settings.system.cacheTypes.downloads.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.resources.label'),
+    key: 'resources',
+    description: t('settings.system.cacheTypes.resources.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.lyrics.label'),
+    key: 'lyrics',
+    description: t('settings.system.cacheTypes.lyrics.description')
+  }
+]);
+
+// 同步外部show属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 同步内部visible变化
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:show', newVal);
+  }
+);
+
+const handleConfirm = () => {
+  emit('confirm', selectedTypes.value);
+  selectedTypes.value = [];
+};
+
+const handleCancel = () => {
+  selectedTypes.value = [];
+  visible.value = false;
+};
+</script> 

src/renderer/components/settings/MusicSourceSettings.vue

@@ -0,0 +1,119 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.playback.musicSources')"
+    :positive-text="t('common.confirm')"
+    :negative-text="t('common.cancel')"
+    @positive-click="handleConfirm"
+    @negative-click="handleCancel"
+  >
+    <n-space vertical>
+      <p>{{ t('settings.playback.musicSourcesDesc') }}</p>
+      <n-checkbox-group v-model:value="selectedSources">
+        <n-grid :cols="2" :x-gap="12" :y-gap="8">
+          <n-grid-item v-for="source in musicSourceOptions" :key="source.value">
+            <n-checkbox :value="source.value">
+              {{ source.label }}
+              <template v-if="source.value === 'gdmusic'">
+                <n-tooltip>
+                  <template #trigger>
+                    <n-icon size="16" class="ml-1 text-blue-500 cursor-help">
+                      <i class="ri-information-line"></i>
+                    </n-icon>
+                  </template>
+                  {{ t('settings.playback.gdmusicInfo') }}
+                </n-tooltip>
+              </template>
+            </n-checkbox>
+          </n-grid-item>
+        </n-grid>
+      </n-checkbox-group>
+      <div v-if="selectedSources.length === 0" class="text-red-500 text-sm">
+        {{ t('settings.playback.musicSourcesWarning') }}
+      </div>
+
+      <!-- GD音乐台设置 -->
+      <div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
+        <h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
+          GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
+        </p>
+      </div>
+    </n-space>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { type Platform } from '@/types/music';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  sources: {
+    type: Array as () => Platform[],
+    default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo']
+  }
+});
+
+const emit = defineEmits(['update:show', 'update:sources']);
+
+const { t } = useI18n();
+const visible = ref(props.show);
+const selectedSources = ref<Platform[]>(props.sources);
+
+const musicSourceOptions = ref([
+  { label: 'MiGu音乐', value: 'migu' },
+  { label: '酷狗音乐', value: 'kugou' },
+  { label: 'pyncmd', value: 'pyncmd' },
+  { label: '酷我音乐', value: 'kuwo' },
+  { label: 'Bilibili音乐', value: 'bilibili' },
+  { label: 'GD音乐台', value: 'gdmusic' }
+]);
+
+// 同步外部show属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 同步内部visible变化
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:show', newVal);
+  }
+);
+
+// 同步外部sources属性变化
+watch(
+  () => props.sources,
+  (newVal) => {
+    selectedSources.value = [...newVal];
+  },
+  { deep: true }
+);
+
+const handleConfirm = () => {
+  // 确保至少选择一个音源
+  const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
+  const valuesToEmit = selectedSources.value.length > 0 
+    ? [...new Set(selectedSources.value)] 
+    : defaultPlatforms;
+  
+  emit('update:sources', valuesToEmit);
+  visible.value = false;
+};
+
+const handleCancel = () => {
+  // 取消时还原为props传入的初始值
+  selectedSources.value = [...props.sources];
+  visible.value = false;
+};
+</script> 

src/renderer/components/settings/ProxySettings.vue

@@ -0,0 +1,152 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.network.proxy')"
+    :positive-text="t('common.confirm')"
+    :negative-text="t('common.cancel')"
+    :show-icon="false"
+    @positive-click="handleProxyConfirm"
+    @negative-click="handleCancel"
+  >
+    <n-form
+      ref="formRef"
+      :model="proxyForm"
+      :rules="proxyRules"
+      label-placement="left"
+      label-width="80"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item :label="t('settings.network.proxy')" path="protocol">
+        <n-select
+          v-model:value="proxyForm.protocol"
+          :options="[
+            { label: 'HTTP', value: 'http' },
+            { label: 'HTTPS', value: 'https' },
+            { label: 'SOCKS5', value: 'socks5' }
+          ]"
+        />
+      </n-form-item>
+      <n-form-item :label="t('settings.network.proxyHost')" path="host">
+        <n-input
+          v-model:value="proxyForm.host"
+          :placeholder="t('settings.network.proxyHostPlaceholder')"
+        />
+      </n-form-item>
+      <n-form-item :label="t('settings.network.proxyPort')" path="port">
+        <n-input-number
+          v-model:value="proxyForm.port"
+          :placeholder="t('settings.network.proxyPortPlaceholder')"
+          :min="1"
+          :max="65535"
+        />
+      </n-form-item>
+    </n-form>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessage } from 'naive-ui';
+import type { FormRules } from 'naive-ui';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  config: {
+    type: Object,
+    default: () => ({
+      protocol: 'http',
+      host: '127.0.0.1',
+      port: 7890
+    })
+  }
+});
+
+const emit = defineEmits(['update:show', 'confirm']);
+
+const { t } = useI18n();
+const message = useMessage();
+const formRef = ref();
+
+const visible = ref(props.show);
+const proxyForm = ref({
+  protocol: props.config.protocol || 'http',
+  host: props.config.host || '127.0.0.1',
+  port: props.config.port || 7890
+});
+
+const proxyRules: FormRules = {
+  protocol: {
+    required: true,
+    message: t('settings.validation.selectProxyProtocol'),
+    trigger: ['blur', 'change']
+  },
+  host: {
+    required: true,
+    message: t('settings.validation.proxyHost'),
+    trigger: ['blur', 'change'],
+    validator: (_rule, value) => {
+      if (!value) return false;
+      // 简单的IP或域名验证
+      const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+      return ipRegex.test(value);
+    }
+  },
+  port: {
+    required: true,
+    message: t('settings.validation.portNumber'),
+    trigger: ['blur', 'change'],
+    validator: (_rule, value) => {
+      return value >= 1 && value <= 65535;
+    }
+  }
+};
+
+// 同步外部show属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 同步内部visible变化
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:show', newVal);
+  }
+);
+
+// 同步外部config变化
+watch(
+  () => props.config,
+  (newVal) => {
+    proxyForm.value = {
+      protocol: newVal.protocol || 'http',
+      host: newVal.host || '127.0.0.1',
+      port: newVal.port || 7890
+    };
+  },
+  { deep: true }
+);
+
+const handleProxyConfirm = async () => {
+  try {
+    await formRef.value?.validate();
+    emit('confirm', { ...proxyForm.value });
+    visible.value = false;
+    message.success(t('settings.network.messages.proxySuccess'));
+  } catch (err) {
+    message.error(t('settings.network.messages.proxyError'));
+  }
+};
+
+const handleCancel = () => {
+  visible.value = false;
+};
+</script> 

src/renderer/components/settings/ServerSetting.vue

@@ -0,0 +1,226 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="card"
+    :title="t('settings.remoteControl.title')"
+    class="remote-control-modal"
+    style="max-width: 650px; width: 100%"
+  >
+    <n-scrollbar>
+      <div class="remote-control-setting">
+        <n-form label-placement="left" label-width="auto" :style="{ maxWidth: '640px' }">
+          <n-form-item :label="t('settings.remoteControl.enable')">
+            <n-switch v-model:value="remoteControlConfig.enabled" />
+          </n-form-item>
+
+          <n-form-item :label="t('settings.remoteControl.port')">
+            <n-input-number
+              v-model:value="remoteControlConfig.port"
+              :min="1024"
+              :max="65535"
+              :disabled="!remoteControlConfig.enabled"
+            />
+          </n-form-item>
+
+          <n-form-item :label="t('settings.remoteControl.allowedIps')">
+            <div class="allowed-ips-container">
+              <div v-for="(_, index) in remoteControlConfig.allowedIps" :key="index" class="ip-item">
+                <n-input v-model:value="remoteControlConfig.allowedIps[index]" :disabled="!remoteControlConfig.enabled" />
+                <n-button 
+                  quaternary 
+                  circle 
+                  type="error" 
+                  :disabled="!remoteControlConfig.enabled" 
+                  @click="removeIp(index)"
+                >
+                  <template #icon>
+                    <n-icon><i class="ri-delete-bin-line"></i></n-icon>
+                  </template>
+                </n-button>
+              </div>
+              <n-button 
+                secondary 
+                size="small" 
+                :disabled="!remoteControlConfig.enabled" 
+                @click="addIp"
+              >
+                <template #icon>
+                  <n-icon><i class="ri-add-line"></i></n-icon>
+                </template>
+                {{ t('settings.remoteControl.addIp') }}
+              </n-button>
+              <n-text depth="3" size="small" class="allow-all-hint">
+                {{ t('settings.remoteControl.emptyListHint') }}
+              </n-text>
+            </div>
+          </n-form-item>
+
+          <n-form-item>
+            <n-space>
+              <n-button 
+                type="primary" 
+                :disabled="!remoteControlConfig.enabled" 
+                @click="saveConfig"
+              >
+                {{ t('common.save') }}
+              </n-button>
+              <n-button @click="resetConfig">
+                {{ t('common.reset') }}
+              </n-button>
+            </n-space>
+          </n-form-item>
+
+          <n-collapse-transition :show="remoteControlConfig.enabled">
+            <div class="remote-info">
+              <n-alert type="info">
+                <template #icon>
+                  <n-icon><i class="ri-information-line"></i></n-icon>
+                </template>
+                <p>{{ t('settings.remoteControl.accessInfo') }}</p>
+                <div class="access-url">
+                  <n-tag type="success">
+                    http://localhost:{{ remoteControlConfig.port }}/
+                  </n-tag>
+                </div>
+                <div v-if="localIpAddresses.length" class="local-ips">
+                  <div v-for="ip in localIpAddresses" :key="ip" class="ip-address">
+                    <n-tag type="info">
+                      http://{{ ip }}:{{ remoteControlConfig.port }}/
+                    </n-tag>
+                  </div>
+                </div>
+              </n-alert>
+            </div>
+          </n-collapse-transition>
+        </n-form>
+      </div>
+    </n-scrollbar>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessage } from 'naive-ui';
+import { cloneDeep } from 'lodash';
+
+const { t } = useI18n();
+const message = useMessage();
+
+// 控制弹窗显示的属性
+const visible = defineModel('visible', { default: false });
+
+// 默认配置
+const defaultConfig:{
+  enabled: boolean,
+  port: number,
+  allowedIps: string[]
+} = {
+  enabled: false,
+  port: 31888,
+  allowedIps: []
+};
+
+// 远程控制配置
+const remoteControlConfig = ref({...defaultConfig});
+
+// 本地IP地址列表
+const localIpAddresses = ref<string[]>([]);
+
+// 获取本地IP地址
+const getLocalIpAddresses = () => {
+  if (window.electron) {
+    window.electron.ipcRenderer.invoke('get-local-ip-addresses').then((ips: string[]) => {
+      localIpAddresses.value = ips;
+    });
+  }
+};
+
+// 添加IP地址
+const addIp = () => {
+  remoteControlConfig.value.allowedIps.push('');
+};
+
+// 删除IP地址
+const removeIp = (index: number) => {
+  remoteControlConfig.value.allowedIps.splice(index, 1);
+};
+
+// 保存配置
+const saveConfig = () => {
+  // 过滤空IP
+  remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(ip => ip.trim() !== '');
+  
+  if (window.electron) {
+    window.electron.ipcRenderer.send('update-remote-control-config', cloneDeep(remoteControlConfig.value));
+    message.success(t('settings.remoteControl.saveSuccess'));
+  }
+};
+
+// 重置配置
+const resetConfig = () => {
+  if (window.electron) {
+    window.electron.ipcRenderer.invoke('get-remote-control-config').then((config) => {
+      if (config) {
+        remoteControlConfig.value = config;
+      } else {
+        remoteControlConfig.value = { ...defaultConfig };
+      }
+    });
+  }
+};
+
+// 组件挂载时，获取当前配置
+onMounted(async () => {
+  if (window.electron) {
+    try {
+      const config = await window.electron.ipcRenderer.invoke('get-remote-control-config');
+      if (config) {
+        remoteControlConfig.value = config;
+      }
+      // 获取本地IP地址
+      getLocalIpAddresses();
+    } catch (error) {
+      console.error('获取远程控制配置失败:', error);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.remote-control-setting {
+  padding: 0 20px;
+}
+
+.allowed-ips-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+
+  .ip-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .allow-all-hint {
+    margin-top: 5px;
+  }
+}
+
+.remote-info {
+  margin-top: 16px;
+  
+  .access-url {
+    margin-top: 10px;
+  }
+  
+  .local-ips {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+}
+</style> 

src/renderer/hooks/MusicHook.ts

@@ -2,7 +2,6 @@ import { cloneDeep } from 'lodash';
 import { createDiscreteApi } from 'naive-ui';
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
-import i18n from '@/../i18n/renderer';
 import { getBilibiliAudioUrl } from '@/api/bilibili';
 import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
@@ -10,6 +9,7 @@ import pinia, { usePlayerStore } from '@/store';
 import type { Artist, ILyricText, SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
 import { getTextColors } from '@/utils/linearColor';
+import { getSongUrl } from '@/store/modules/player';
 
 const windowData = window as any;
 
@@ -235,70 +235,8 @@ const initProgressAnimation = () => {
 // 初始化进度动画
 initProgressAnimation();
 
-// 简化后的 watch 函数，只保留核心逻辑
-watch(
-  () => playerStore.playMusicUrl,
-  async (newVal) => {
-    if (newVal && playMusic.value) {
-      try {
-        // 保存当前播放状态
-        const shouldPlay = playerStore.play;
-
-        // 检查是否有保存的进度
-        let initialPosition = 0;
-        const savedProgress = JSON.parse(localStorage.getItem('playProgress') || '{}');
-        if (savedProgress.songId === playMusic.value.id) {
-          initialPosition = savedProgress.progress;
-        }
-
-        // 对于B站视频，检查URL是否有效
-        if (playMusic.value.source === 'bilibili' && (!newVal || newVal === 'undefined')) {
-          console.log('B站视频URL无效，尝试重新获取');
-
-          // 需要重新获取B站视频URL
-          if (playMusic.value.bilibiliData) {
-            try {
-              const proxyUrl = await getBilibiliAudioUrl(
-                playMusic.value.bilibiliData.bvid,
-                playMusic.value.bilibiliData.cid
-              );
-
-              // 设置URL到播放器状态
-              (playMusic.value as any).playMusicUrl = proxyUrl;
-              playerStore.playMusicUrl = proxyUrl;
-              newVal = proxyUrl;
-            } catch (error) {
-              console.error('获取B站音频URL失败:', error);
-              return;
-            }
-          }
-        }
-
-        // 播放新音频，传递是否应该播放的状态
-        const newSound = await audioService.play(newVal, playMusic.value, shouldPlay);
-        sound.value = newSound as Howl;
-
-        // 如果有保存的进度，设置播放位置
-        if (initialPosition > 0) {
-          newSound.seek(initialPosition);
-          // 同时更新进度条显示
-          nowTime.value = initialPosition;
-        }
-
-        setupAudioListeners();
-
-        // 确保状态与 localStorage 同步
-        localStorage.setItem('currentPlayMusic', JSON.stringify(playerStore.playMusic));
-        localStorage.setItem('currentPlayMusicUrl', newVal);
-      } catch (error) {
-        console.error('播放音频失败:', error);
-        // store.commit('setPlayMusic', false);
-        playerStore.setPlayMusic(false);
-        message.error(i18n.global.t('player.playFailed'));
-      }
-    }
-  }
-);
+// 移除对 playerStore.playMusicUrl 的监听，因为播放逻辑已经在 player.ts 中处理
+// 保留 watch 对 playerStore.playMusic 的监听以更新歌词数据
 
 watch(
   () => playerStore.playMusic,
@@ -968,7 +906,7 @@ audioService.on('url_expired', async (expiredTrack) => {
       // 处理网易云音乐，重新获取URL
       console.log('重新获取网易云音乐URL');
       try {
-        const { getSongUrl } = await import('@/store/modules/player');
+        
         const newUrl = await getSongUrl(expiredTrack.id, expiredTrack as any);
 
         if (newUrl) {
@@ -1009,3 +947,27 @@ audioService.on('url_expired', async (expiredTrack) => {
     message.error('恢复播放失败，请手动点击播放');
   }
 });
+
+// 添加音频就绪事件监听器
+window.addEventListener('audio-ready', ((event: CustomEvent) => {
+  try {
+    const { sound: newSound } = event.detail;
+    if (newSound) {
+      // 更新本地 sound 引用
+      sound.value = newSound as Howl;
+      
+      // 设置音频监听器
+      setupAudioListeners();
+      
+      // 获取当前播放位置并更新显示
+      const currentPosition = newSound.seek() as number;
+      if (typeof currentPosition === 'number' && !Number.isNaN(currentPosition)) {
+        nowTime.value = currentPosition;
+      }
+      
+      console.log('音频就绪，已设置监听器并更新进度显示');
+    }
+  } catch (error) {
+    console.error('处理音频就绪事件出错:', error);
+  }
+}) as EventListener);

src/renderer/layout/AppLayout.vue

@@ -20,7 +20,7 @@
               </keep-alive>
             </router-view>
           </div>
-          <play-bottom height="5rem" />
+          <play-bottom />
           <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
         </div>
       </div>
@@ -46,6 +46,8 @@
             settingsStore.setData?.hasDownloadingTasks)
         "
       />
+      <!-- 播放列表抽屉 -->
+      <play-list-drawer />
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
@@ -62,27 +64,33 @@ 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(() =>
-  homeRouter
+const keepAliveInclude = computed(() => {
+  const allRoutes = [...homeRouter, ...otherRouter];
+  
+  return allRoutes
     .filter((item) => {
-      return item.meta.keepAlive;
+      return item.meta?.keepAlive;
     })
     .map((item) => {
-      return item.name.charAt(0).toUpperCase() + item.name.slice(1);
+      return typeof item.name === 'string' 
+        ? 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'));
 const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
-
+const PlayListDrawer = defineAsyncComponent(() => import('@/components/player/PlayListDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
 
 const playerStore = usePlayerStore();
@@ -142,7 +150,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
 
 .mobile {
   .main-content {
-    height: calc(100vh - 154px);
+    height: calc(100vh - 130px);
     overflow: auto;
     display: block;
     flex: none;

src/renderer/layout/components/AppMenu.vue

@@ -9,19 +9,16 @@
       </div>
       <div class="app-menu-list">
         <div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
-          <router-link class="app-menu-item-link" :to="item.path">
-            <i
-              class="iconfont app-menu-item-icon"
-              :style="iconStyle(index)"
-              :class="item.meta.icon"
-            ></i>
-            <span
-              v-if="isText"
-              class="app-menu-item-text ml-3"
-              :class="isChecked(index) ? 'text-green-500' : ''"
-              >{{ item.meta.title }}</span
-            >
-          </router-link>
+          <n-tooltip :delay="200" :disabled="isText" placement="bottom">
+            <template #trigger>
+              <router-link class="app-menu-item-link" :to="item.path">
+                <i class="iconfont app-menu-item-icon" :style="iconStyle(index)" :class="item.meta.icon"></i>
+                <span v-if="isText" class="app-menu-item-text ml-3" :class="isChecked(index) ? 'text-green-500' : ''">{{
+                  item.meta.title }}</span>
+              </router-link>
+            </template>
+            <div v-if="!isText">{{ item.meta.title }}</div>
+          </n-tooltip>
         </div>
       </div>
     </div>
@@ -83,6 +80,7 @@ const isText = ref(false);
 
 .app-menu-expanded {
   @apply w-[160px];
+
   .app-menu-item {
     @apply hover:bg-gray-100 dark:hover:bg-gray-800 rounded mr-4;
   }

src/renderer/layout/components/MusicFull.vue

@@ -34,13 +34,18 @@
         :class="{ 'only-cover': config.hideLyrics }"
         :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
       >
-        <n-image
-          ref="PicImgRef"
-          :src="getImgUrl(playMusic?.picUrl, '500y500')"
-          class="img"
-          lazy
-          preview-disabled
-        />
+        <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>
         <div class="music-info">
           <div class="music-content-name">{{ playMusic.name }}</div>
           <div class="music-content-singer">
@@ -549,10 +554,14 @@ defineExpose({
       max-width: none;
       max-height: none;
 
-      .img {
+      .img-container {
         @apply w-[50vh] h-[50vh] mb-8;
       }
 
+      .img {
+        @apply w-full h-full;
+      }
+
       .music-info {
         @apply text-center w-[600px];
 
@@ -568,6 +577,10 @@ defineExpose({
       }
     }
 
+    .img-container {
+      @apply relative w-full h-full;
+    }
+
     .img {
       @apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
     }
@@ -763,4 +776,25 @@ 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>

src/renderer/layout/components/SearchBar.vue

@@ -266,7 +266,7 @@ const selectItem = async (key: string) => {
 };
 
 const toGithub = () => {
-  window.open('http://donate.alger.fun', '_blank');
+  window.open('http://donate.alger.fun/download', '_blank');
 };
 
 const updateInfo = ref<UpdateResult>({

src/renderer/router/home.ts

@@ -33,6 +33,17 @@ const layoutRouter = [
     },
     component: () => import('@/views/list/index.vue')
   },
+  {
+    path: '/toplist',
+    name: 'toplist',
+    meta: {
+      title: '排行榜',
+      icon: 'ri-bar-chart-grouped-fill',
+      keepAlive: true,
+      isMobile: true
+    },
+    component: () => import('@/views/toplist/index.vue')
+  },
   {
     path: '/mv',
     name: 'mv',
@@ -40,20 +51,10 @@ const layoutRouter = [
       title: 'MV',
       icon: 'icon-recordfill',
       keepAlive: true,
-      isMobile: true
+      isMobile: false
     },
     component: () => import('@/views/mv/index.vue')
   },
-  // {
-  //   path: '/history',
-  //   name: 'history',
-  //   meta: {
-  //     title: '历史',
-  //     icon: 'icon-a-TicketStar',
-  //     keepAlive: true,
-  //   },
-  //   component: () => import('@/views/history/index.vue'),
-  // },
   {
     path: '/history',
     name: 'history',

src/renderer/router/other.ts

@@ -53,6 +53,17 @@ 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;

src/renderer/services/audioService.ts

@@ -41,6 +41,13 @@ class AudioService {
 
   private seekDebounceTimer: NodeJS.Timeout | null = null;
 
+  // 添加操作锁防止并发操作
+  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) {
       this.initMediaSession();
@@ -48,6 +55,14 @@ class AudioService {
     // 从本地存储加载 EQ 开关状态
     const bypassState = localStorage.getItem('eqBypass');
     this.bypass = bypassState ? JSON.parse(bypassState) : false;
+    
+    // 页面加载时立即强制重置操作锁
+    this.forceResetOperationLock();
+    
+    // 添加页面卸载事件，确保离开页面时清除锁
+    window.addEventListener('beforeunload', () => {
+      this.forceResetOperationLock();
+    });
   }
 
   private initMediaSession() {
@@ -356,8 +371,127 @@ 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;
+      }
+    }
+    
+    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) {
+      clearTimeout(this.operationLockTimer);
+    }
+    
+    // 设置超时自动释放锁
+    this.operationLockTimer = setTimeout(() => {
+      console.warn('操作锁超时自动释放');
+      this.releaseOperationLock();
+    }, this.operationLockTimeout);
+    
+    return true;
+  }
+  
+  // 释放操作锁
+  public releaseOperationLock(): void {
+    this.operationLock = false;
+    this.operationLockStartTime = 0;
+    
+    // 从 localStorage 中移除锁信息
+    try {
+      localStorage.removeItem('audioOperationLock');
+    } catch (error) {
+      console.error('清除存储的操作锁信息失败:', error);
+    }
+    
+    if (this.operationLockTimer) {
+      clearTimeout(this.operationLockTimer);
+      this.operationLockTimer = null;
+    }
+  }
+
+  // 强制重置操作锁，用于特殊情况
+  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();
+      
+      // 这里不再返回错误，而是继续执行播放逻辑
+    }
+
     // 如果没有提供新的 URL 和 track，且当前有音频实例，则继续播放
     if (this.currentSound && !url && !track) {
       // 如果有进行中的seek操作，等待其完成
@@ -366,15 +500,17 @@ class AudioService {
         this.seekLock = false;
       }
       this.currentSound.play();
+      this.releaseOperationLock();
       return Promise.resolve(this.currentSound);
     }
 
     // 如果没有提供必要的参数，返回错误
     if (!url || !track) {
-      return Promise.reject(new Error('Missing required parameters: url and track'));
+      this.releaseOperationLock();
+      return Promise.reject(new Error('缺少必要参数: url和track'));
     }
 
-    return new Promise((resolve, reject) => {
+    return new Promise<Howl>((resolve, reject) => {
       let retryCount = 0;
       const maxRetries = 1;
 
@@ -439,6 +575,7 @@ class AudioService {
               } else {
                 // 发送URL过期事件，通知外部需要重新获取URL
                 this.emit('url_expired', this.currentTrack);
+                this.releaseOperationLock();
                 reject(new Error('音频加载失败，请尝试切换其他歌曲'));
               }
             },
@@ -451,6 +588,7 @@ class AudioService {
               } else {
                 // 发送URL过期事件，通知外部需要重新获取URL
                 this.emit('url_expired', this.currentTrack);
+                this.releaseOperationLock();
                 reject(new Error('音频播放失败，请尝试切换其他歌曲'));
               }
             },
@@ -507,11 +645,15 @@ class AudioService {
           }
         } catch (error) {
           console.error('Error creating audio instance:', error);
+          this.releaseOperationLock();
           reject(error);
         }
       };
 
       tryPlay();
+    }).finally(() => {
+      // 无论成功或失败都解除操作锁
+      this.releaseOperationLock();
     });
   }
 
@@ -524,25 +666,33 @@ class AudioService {
   }
 
   stop() {
-    if (this.currentSound) {
-      try {
-        // 确保任何进行中的seek操作被取消
-        if (this.seekLock && this.seekDebounceTimer) {
-          clearTimeout(this.seekDebounceTimer);
-          this.seekLock = false;
+    // 强制重置操作锁并继续执行
+    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.stop();
-        this.currentSound.unload();
-      } catch (error) {
-        console.error('Error stopping audio:', error);
+        this.currentSound = null;
       }
-      this.currentSound = null;
+      
+      this.currentTrack = null;
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.playbackState = 'none';
+      }
+      this.disposeEQ();
+    } catch (error) {
+      console.error('停止音频时发生错误:', error);
     }
-    this.currentTrack = null;
-    if ('mediaSession' in navigator) {
-      navigator.mediaSession.playbackState = 'none';
-    }
-    this.disposeEQ();
   }
 
   setVolume(volume: number) {
@@ -553,9 +703,12 @@ class AudioService {
   }
 
   seek(time: number) {
+    // 直接强制重置操作锁
+    this.forceResetOperationLock();
+    
     if (this.currentSound) {
       try {
-        // 直接执行seek操作，避免任何过滤或判断
+        // 直接执行seek操作
         this.currentSound.seek(time);
         // 触发seek事件
         this.updateMediaSessionPositionState();
@@ -567,16 +720,18 @@ class AudioService {
   }
 
   pause() {
+    this.forceResetOperationLock();
+    
     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 pausing audio:', error);
+        console.error('暂停音频失败:', error);
       }
     }
   }

src/renderer/store/index.ts

@@ -16,5 +16,6 @@ export * from './modules/player';
 export * from './modules/search';
 export * from './modules/settings';
 export * from './modules/user';
+export * from './modules/music';
 
 export default pinia;

src/renderer/store/modules/music.ts

@@ -0,0 +1,45 @@
+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);
+      }
+    }
+  }
+}); 

src/renderer/store/modules/user.ts

@@ -36,6 +36,8 @@ export const useUserStore = defineStore('user', () => {
       user.value = null;
       localStorage.removeItem('user');
       localStorage.removeItem('token');
+      // 刷新
+      window.location.reload();
     } catch (error) {
       console.error('登出失败:', error);
     }

src/renderer/type/music.ts

@@ -42,6 +42,9 @@ export interface SongResult {
   expiredAt?: number;
   // 获取时间
   createdAt?: number;
+  // 时长
+  duration?: number;
+  dt?: number;
 }
 
 export interface Song {

src/renderer/type/singer.ts

@@ -4,7 +4,7 @@ export interface IHotSinger {
   artists: Artist[];
 }
 
-interface Artist {
+export interface Artist {
   name: string;
   id: number;
   picId: number;
@@ -29,4 +29,6 @@ interface Artist {
   identifyTag?: any;
   alg?: any;
   fansCount?: any;
+  cover?: string;
+  avatar?: string;
 }

src/renderer/types/music.ts

@@ -0,0 +1,5 @@
+// 音乐平台类型
+export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'gdmusic';
+
+// 默认平台列表
+export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo']; 

src/renderer/utils/appShortcuts.ts

@@ -7,6 +7,16 @@ import { usePlayerStore, useSettingsStore } from '@/store';
 import { isElectron } from '.';
 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;
@@ -27,6 +37,33 @@ let appShortcuts: ShortcutsConfig = {};
  * @param action 快捷键动作
  */
 export async function handleShortcutAction(action: string) {
+  const now = Date.now();
+  
+  // 如果存在未完成的动作，则忽略当前请求
+  if (actionTimeout) {
+    console.log('[AppShortcuts] 忽略快速连续的动作请求:', 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();
 
@@ -38,61 +75,73 @@ export async function handleShortcutAction(action: string) {
     showShortcutToast(message, iconName);
   };
 
-  switch (action) {
-    case 'togglePlay':
-      if (playerStore.play) {
-        await audioService.pause();
-        showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
-      } else {
-        await audioService.play();
-        showToast(t('player.playBar.play'), 'ri-play-circle-line');
-      }
-      break;
-    case 'prevPlay':
-      playerStore.prevPlay();
-      showToast(t('player.playBar.prev'), 'ri-skip-back-line');
-      break;
-    case 'nextPlay':
-      playerStore.nextPlay();
-      showToast(t('player.playBar.next'), 'ri-skip-forward-line');
-      break;
-    case 'volumeUp':
-      if (currentSound && currentSound?.volume() < 1) {
-        currentSound?.volume((currentSound?.volume() || 0) + 0.1);
+  try {
+    switch (action) {
+      case 'togglePlay':
+        if (playerStore.play) {
+          await audioService.pause();
+          showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
+        } else {
+          await audioService.play();
+          showToast(t('player.playBar.play'), 'ri-play-circle-line');
+        }
+        break;
+      case 'prevPlay':
+        await playerStore.prevPlay();
+        showToast(t('player.playBar.prev'), 'ri-skip-back-line');
+        break;
+      case 'nextPlay':
+        await playerStore.nextPlay();
+        showToast(t('player.playBar.next'), 'ri-skip-forward-line');
+        break;
+      case 'volumeUp':
+        if (currentSound && currentSound?.volume() < 1) {
+          currentSound?.volume((currentSound?.volume() || 0) + 0.1);
+          showToast(
+            `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+            'ri-volume-up-line'
+          );
+        }
+        break;
+      case 'volumeDown':
+        if (currentSound && currentSound?.volume() > 0) {
+          currentSound?.volume((currentSound?.volume() || 0) - 0.1);
+          showToast(
+            `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+            'ri-volume-down-line'
+          );
+        }
+        break;
+      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(
-          `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
-          'ri-volume-up-line'
+          isFavorite
+            ? t('player.playBar.unFavorite', { name: playerStore.playMusic.name })
+            : t('player.playBar.favorite', { name: playerStore.playMusic.name }),
+          isFavorite ? 'ri-heart-line' : 'ri-heart-fill'
         );
+        break;
       }
-      break;
-    case 'volumeDown':
-      if (currentSound && currentSound?.volume() > 0) {
-        currentSound?.volume((currentSound?.volume() || 0) - 0.1);
-        showToast(
-          `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
-          'ri-volume-down-line'
-        );
-      }
-      break;
-    case 'toggleFavorite': {
-      const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
-      const numericId = Number(playerStore.playMusic.id);
-      if (isFavorite) {
-        playerStore.removeFromFavorite(numericId);
-      } else {
-        playerStore.addToFavorite(numericId);
-      }
-      showToast(
-        isFavorite
-          ? t('player.playBar.favorite', { name: playerStore.playMusic.name })
-          : t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
-        isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
-      );
-      break;
+      default:
+        console.log('未知的快捷键动作:', action);
+        break;
     }
-    default:
-      console.log('未知的快捷键动作:', action);
-      break;
+  } catch (error) {
+    console.error(`执行快捷键动作 ${action} 时出错:`, error);
+  } finally {
+    // 确保在出错时也能清除超时
+    clearTimeout(actionTimeout);
+    actionTimeout = null;
+    console.log(`[AppShortcuts] 动作完成: ${action}, 时间戳: ${Date.now()}, 耗时: ${Date.now() - now}ms`);
   }
 }
 

src/renderer/utils/request.ts

@@ -17,7 +17,7 @@ const baseURL = window.electron
 
 const request = axios.create({
   baseURL,
-  timeout: 5000,
+  timeout: 15000,
   withCredentials: true
 });
 

src/renderer/utils/update.ts

@@ -129,20 +129,13 @@ export const getLatestReleaseInfo = async (): Promise<GithubReleaseInfo | null>
   try {
     const token = import.meta.env.VITE_GITHUB_TOKEN;
     const headers = {};
-
-    // 获取代理节点列表
-    const proxyHosts = await getProxyNodes();
-
     // 构建 API URL 列表
     const apiUrls = [
       // 原始地址
       'https://api.github.com/repos/algerkong/AlgerMusicPlayer/releases/latest',
 
       // 使用代理节点
-      ...proxyHosts.map(
-        (host) =>
-          `${host}/https://raw.githubusercontent.com/algerkong/AlgerMusicPlayer/dev_electron/package.json`
-      )
+      'https://music.alger.fun/package.json',
     ];
 
     if (token) {

src/renderer/views/artist/detail.vue

@@ -33,6 +33,7 @@
               @play="handlePlay"
             />
             <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
+            <div v-else-if="songPage.hasMore" ref="songsLoadMoreRef" class="load-more-trigger"></div>
           </div>
         </div>
       </n-tab-pane>
@@ -54,6 +55,7 @@
               }"
             />
             <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
+            <div v-else-if="albumPage.hasMore" ref="albumsLoadMoreRef" class="load-more-trigger"></div>
           </div>
         </div>
       </n-tab-pane>
@@ -70,8 +72,8 @@
 </template>
 
 <script setup lang="ts">
-import { useDateFormat, useThrottleFn } from '@vueuse/core';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useDateFormat } from '@vueuse/core';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick, onActivated, onDeactivated } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -84,6 +86,10 @@ 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();
@@ -114,10 +120,39 @@ const albumPage = ref({
   hasMore: true
 });
 
+// 无限滚动引用
+const songsLoadMoreRef = ref<HTMLElement | null>(null);
+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);
@@ -127,6 +162,15 @@ 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 {
@@ -138,12 +182,12 @@ const loadArtistInfo = async () => {
 const resetPagination = () => {
   songPage.value = {
     page: 1,
-    pageSize: 30,
+    pageSize: 50,
     hasMore: true
   };
   albumPage.value = {
     page: 1,
-    pageSize: 30,
+    pageSize: 50,
     hasMore: true
   };
   songs.value = [];
@@ -181,6 +225,8 @@ const loadSongs = async () => {
       songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
       songPage.value.hasMore = newSongs.length === pageSize;
       songPage.value.page++;
+    } else {
+      songPage.value.hasMore = false;
     }
   } catch (error) {
     console.error('加载歌曲失败:', error);
@@ -207,6 +253,8 @@ const loadAlbums = async () => {
       albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
       albumPage.value.hasMore = newAlbums.length === pageSize;
       albumPage.value.page++;
+    } else {
+      albumPage.value.hasMore = false;
     }
   } catch (error) {
     console.error('加载专辑失败:', error);
@@ -229,40 +277,99 @@ const handlePlay = () => {
   );
 };
 
-// 添加滚动处理函数
-const handleScroll = useThrottleFn(() => {
-  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-  const windowHeight = window.innerHeight;
-  const documentHeight = document.documentElement.scrollHeight;
-
-  if (documentHeight - (scrollTop + windowHeight) < 100) {
-    if (activeTab.value === 'songs') {
-      loadSongs();
-    } else if (activeTab.value === 'albums') {
-      loadAlbums();
-    }
+// 简化观察器设置
+const setupObservers = () => {
+  // 清理之前的观察器
+  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 }
+    );
   }
-}, 200);
+  
+  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);
+    }
+  });
+};
+
+// 监听标签切换
+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(() => {
-  loadArtistInfo();
-  window.addEventListener('scroll', handleScroll);
+  // 首次挂载时加载数据
+  if (route.params.id) {
+    previousId.value = route.params.id as string;
+    loadArtistInfo();
+    setupObservers();
+  }
+});
+
+onDeactivated(() => {
+  // 断开观察器但不清除引用
+  if (songsObserver) songsObserver.disconnect();
+  if (albumsObserver) albumsObserver.disconnect();
 });
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
-});
-
-// 监听路由参数变化
-watch(
-  () => route.params.id,
-  (newId) => {
-    if (newId) {
-      loadArtistInfo();
-    }
+  // 完全清理观察器
+  if (songsObserver) {
+    songsObserver.disconnect();
+    songsObserver = null;
   }
-);
+  if (albumsObserver) {
+    albumsObserver.disconnect();
+    albumsObserver = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -325,6 +432,10 @@ watch(
     @apply text-center py-4 text-gray-500 dark:text-gray-400;
   }
 
+  .load-more-trigger {
+    @apply h-4 w-full;
+  }
+
   .artist-description {
     .description-content {
       @apply text-sm leading-relaxed whitespace-pre-wrap;

src/renderer/views/bilibili/BilibiliPlayer.vue

@@ -233,7 +233,7 @@ const loadVideoSource = async () => {
 
         // 其他分P创建占位对象，稍后按需加载
         return {
-          id: `${videoDetail.value!.aid}--${page.cid}`, // 使用aid+cid作为唯一ID
+          id: `${bvid.value}--${page.page}--${page.cid}`, // 使用bvid--pid--cid作为唯一ID
           name: `${page.part || ''} - ${videoDetail.value!.title}`,
           picUrl: getBilibiliProxyUrl(videoDetail.value!.pic),
           type: 0,
@@ -242,7 +242,7 @@ const loadVideoSource = async () => {
           source: 'bilibili', // 设置来源为B站
           song: {
             name: `${page.part || ''} - ${videoDetail.value!.title}`,
-            id: `${videoDetail.value!.aid}--${page.cid}`,
+            id: `${bvid.value}--${page.page}--${page.cid}`,
             ar: [
               {
                 name: videoDetail.value!.owner.name,
@@ -286,7 +286,7 @@ const createSongFromBilibiliVideo = (): SongResult => {
   const title = `${pageName} - ${videoDetail.value.title}`;
 
   return {
-    id: `${videoDetail.value.aid}--${currentPage.value.cid}`, // 使用aid+cid作为唯一ID
+    id: `${bvid.value}--${currentPage.value.page}--${currentPage.value.cid}`, // 使用bvid--pid--cid作为唯一ID
     name: title,
     picUrl: getBilibiliProxyUrl(videoDetail.value.pic),
     type: 0,
@@ -297,7 +297,7 @@ const createSongFromBilibiliVideo = (): SongResult => {
     // playMusicUrl属性稍后通过loadSongUrl函数添加
     song: {
       name: title,
-      id: `${videoDetail.value.aid}--${currentPage.value.cid}`,
+      id: `${bvid.value}--${currentPage.value.page}--${currentPage.value.cid}`,
       ar: [
         {
           name: videoDetail.value.owner.name,
@@ -425,7 +425,7 @@ const playCurrentAudio = async () => {
 
     // 播放当前选中的分P
     console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
-    playerStore.setPlayMusic(currentAudio);
+    playerStore.setPlay(currentAudio);  
 
     // 播放后通知用户已开始播放
     message.success('已开始播放');

src/renderer/views/history/index.vue

@@ -109,7 +109,7 @@ const getHistorySongs = async () => {
         if (!page) continue;
 
         bilibiliSongs.push({
-          id: `${videoDetail.aid}--${page.cid}`,
+          id: `${bvid}--${page.page}--${page.cid}`,
           name: `${page.part || ''} - ${videoDetail.title}`,
           picUrl: getBilibiliProxyUrl(videoDetail.pic),
           ar: [

src/renderer/views/list/index.vue

@@ -31,7 +31,7 @@
           class="recommend-item"
           :class="setAnimationClass('animate__bounceIn')"
           :style="getItemAnimationDelay(index)"
-          @click.stop="selectRecommendItem(item)"
+          @click.stop="openPlaylist(item)"
         >
           <div class="recommend-item-img">
             <n-image
@@ -57,22 +57,15 @@
       </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 } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { getPlaylistCategory } from '@/api/home';
 import { getListByCat, getListDetail } from '@/api/list';
-import MusicList from '@/components/MusicList.vue';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import type { IRecommendItem } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
 import type { IPlayListSort } from '@/type/playlist';
@@ -85,7 +78,6 @@ 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);
@@ -100,15 +92,25 @@ const recommendItem = ref<IRecommendItem | null>();
 const listDetail = ref<IListDetail | null>();
 const listLoading = ref(true);
 
-const selectRecommendItem = async (item: IRecommendItem) => {
-  listLoading.value = true;
-  recommendItem.value = null;
-  listDetail.value = null;
-  showMusic.value = true;
+const router = useRouter();
+
+const openPlaylist = (item: any) => {
   recommendItem.value = item;
-  const { data } = await getListDetail(item.id);
-  listDetail.value = data;
-  listLoading.value = false;
+  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
+    });
+  });
 };
 
 const route = useRoute();

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 {
+    &:hover:not(.lyric_lock) {
       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 {
+    &:hover:not(.lyric_lock) {
       background: rgba(0, 0, 0, 0.434) !important;
     }
   }

src/renderer/views/mv/index.vue

@@ -116,8 +116,7 @@ onMounted(async () => {
 
 const handleShowMv = async (item: IMvItem, index: number) => {
   playerStore.setIsPlay(false);
-  playerStore.setPlayMusic(false);
-  audioService.getCurrentSound()?.pause();
+  audioService.pause();
   showMv.value = true;
   currentIndex.value = index;
   playMvItem.value = item;

src/renderer/views/search/index.vue

@@ -37,6 +37,12 @@
           @click="searchDetail = null"
         ></i>
         {{ hotKeyword }}
+        <div v-if="searchDetail?.songs?.length" class="title-play-all">
+          <div class="play-all-btn" @click="handlePlayAll">
+            <i class="ri-play-circle-fill"></i>
+            <span>{{ t('search.button.playAll') }}</span>
+          </div>
+        </div>
       </div>
       <div v-loading="searchDetailLoading" class="search-list-box">
         <template v-if="searchDetail">
@@ -46,7 +52,7 @@
               v-for="(item, index) in searchDetail?.bilibili"
               :key="item.bvid"
               :class="setAnimationClass('animate__bounceInRight')"
-              :style="setAnimationDelay(index, 50)"
+              :style="getSearchListAnimation(index)"
             >
               <bilibili-item :item="item" @play="handlePlayBilibili" />
             </div>
@@ -62,9 +68,9 @@
               v-for="(item, index) in searchDetail?.songs"
               :key="item.id"
               :class="setAnimationClass('animate__bounceInRight')"
-              :style="setAnimationDelay(index, 50)"
+              :style="getSearchListAnimation(index)"
             >
-              <song-item :item="item" @play="handlePlay" />
+              <song-item :item="item" @play="handlePlay" :is-next="true" />
             </div>
             <template v-for="(list, key) in searchDetail">
               <template v-if="key.toString() !== 'songs'">
@@ -73,7 +79,7 @@
                   :key="item.id"
                   class="mb-3"
                   :class="setAnimationClass('animate__bounceInRight')"
-                  :style="setAnimationDelay(index, 50)"
+                  :style="getSearchListAnimation(index)"
                 >
                   <search-item :item="item" />
                 </div>
@@ -104,7 +110,7 @@
                 v-for="(item, index) in searchHistory"
                 :key="index"
                 :class="setAnimationClass('animate__bounceIn')"
-                :style="setAnimationDelay(index, 50)"
+                :style="getSearchListAnimation(index)"
                 class="search-history-item"
                 round
                 closable
@@ -162,6 +168,10 @@ const hasMore = ref(true);
 const isLoadingMore = ref(false);
 const currentKeyword = ref('');
 
+const getSearchListAnimation = (index: number) => {
+  return setAnimationDelay(index % ITEMS_PER_PAGE, 50);
+};
+
 // 从 localStorage 加载搜索历史
 const loadSearchHistory = () => {
   const history = localStorage.getItem('searchHistory');
@@ -398,9 +408,9 @@ watch(
   { immediate: true }
 );
 
-const handlePlay = () => {
-  const tracks = searchDetail.value?.songs || [];
-  playerStore.setPlayList(tracks);
+const handlePlay = (item: any) => {
+  // 添加到下一首
+  playerStore.addToNextPlay(item);
 };
 
 // 点击搜索历史
@@ -418,6 +428,18 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
   // 使用路由导航到B站播放页面
   router.push(`/bilibili/${item.bvid}`);
 };
+
+const handlePlayAll = () => {
+  if (!searchDetail.value?.songs?.length) return;
+  
+  // 设置播放列表为搜索结果中的所有歌曲
+  playerStore.setPlayList(searchDetail.value.songs);
+  
+  // 开始播放第一首歌
+  if (searchDetail.value.songs[0]) {
+    playerStore.setPlay(searchDetail.value.songs[0]);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -469,8 +491,21 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
 }
 
 .title {
-  @apply text-xl font-bold my-2 mx-4;
+  @apply text-xl font-bold my-2 mx-4 flex items-center;
   @apply text-gray-900 dark:text-white;
+  
+  &-play-all {
+    @apply ml-auto;
+  }
+}
+
+.play-all-btn {
+  @apply flex items-center gap-1 px-3 py-1 rounded-full cursor-pointer transition-all;
+  @apply text-sm font-normal text-gray-900 dark:text-white hover:bg-light-300 dark:hover:bg-dark-300 hover:text-green-500;
+  
+  i {
+    @apply text-xl;
+  }
 }
 
 .search-history {

src/renderer/views/set/index.vue

@@ -40,7 +40,7 @@
               <language-switcher />
             </div>
 
-            <div class="set-item">
+            <div class="set-item" v-if="isElectron">
               <div>
                 <div class="set-item-title">{{ t('settings.basic.font') }}</div>
                 <div class="set-item-content">{{ t('settings.basic.fontDesc') }}</div>
@@ -103,9 +103,9 @@
                 </div>
               </div>
               <div class="flex items-center gap-2">
-                <span class="text-sm text-gray-400">{{ setData.animationSpeed }}x</span>
-                <div class="w-60">
-                  <n-slider
+                <span class="text-sm text-gray-400" v-if="!isMobile">{{ setData.animationSpeed }}x</span>
+                <div>
+                  <template v-if="!isMobile"><n-slider
                     v-model:value="setData.animationSpeed"
                     :min="0.1"
                     :max="3"
@@ -117,7 +117,19 @@
                     }"
                     :disabled="setData.noAnimate"
                     class="w-40"
-                  />
+                  /></template>
+                  <template v-else>
+                    <n-input-number
+                      v-model:value="setData.animationSpeed"
+                      :min="0.1"
+                      :max="3"
+                      :step="0.1"
+                      :placeholder="t('settings.basic.animationSpeedPlaceholder')"
+                      :disabled="setData.noAnimate"
+                      button-placement="both"
+                      style="width: 100px"
+                    />
+                  </template>
                 </div>
               </div>
             </div>
@@ -128,29 +140,43 @@
         <div id="playback" ref="playbackRef" class="settings-section">
           <div class="settings-section-title">{{ t('settings.sections.playback') }}</div>
           <div class="settings-section-content">
-            <div class="set-item">
-              <div>
-                <div class="set-item-title">{{ t('settings.playback.quality') }}</div>
-                <div class="set-item-content">{{ t('settings.playback.qualityDesc') }}</div>
+            <div>
+              <div class="set-item">
+                <div>
+                  <div class="set-item-title">{{ t('settings.playback.quality') }}</div>
+                  <div class="set-item-content">
+                    {{ t('settings.playback.qualityDesc') }}
+                  </div>
+                </div>
+                <n-select
+                  v-model:value="setData.musicQuality"
+                  :options="[
+                    { label: t('settings.playback.qualityOptions.standard'), value: 'standard' },
+                    { label: t('settings.playback.qualityOptions.higher'), value: 'higher' },
+                    { label: t('settings.playback.qualityOptions.exhigh'), value: 'exhigh' },
+                    { label: t('settings.playback.qualityOptions.lossless'), value: 'lossless' },
+                    { label: t('settings.playback.qualityOptions.hires'), value: 'hires' },
+                    { label: t('settings.playback.qualityOptions.jyeffect'), value: 'jyeffect' },
+                    { label: t('settings.playback.qualityOptions.sky'), value: 'sky' },
+                    { label: t('settings.playback.qualityOptions.dolby'), value: 'dolby' },
+                    { label: t('settings.playback.qualityOptions.jymaster'), value: 'jymaster' }
+                  ]"
+                  style="width: 160px"
+                />
+              </div>
+              <!-- 网易云 QQ 音乐 酷我 酷狗 会员购买链接 -->
+            <div class="p-2 bg-light-100 dark:bg-dark-100 rounded-lg mt-2">
+              <div>大家还是需要支持正版，本软件只做开源探讨</div>
+                <div class="mt-2">各大音乐会员购买链接</div>
+                <div class="flex gap-5 flex-wrap">
+                  <a class="text-green-400 hover:text-green-500" href="https://music.163.com/store/vip" target="_blank">网易云音乐会员</a>
+                  <a class="text-green-400 hover:text-green-500" href="https://y.qq.com/portal/vipportal/" target="_blank">QQ音乐会员</a>
+                  <a class="text-green-400 hover:text-green-500" href="https://vip.kugou.com/" target="_blank">酷狗音乐会员</a>
+                  <a class="text-green-400 hover:text-green-500" href="https://vip1.kuwo.cn/" target="_blank">酷我音乐会员</a>
+                </div>
               </div>
-              <n-select
-                v-model:value="setData.musicQuality"
-                :options="[
-                  { label: t('settings.playback.qualityOptions.standard'), value: 'standard' },
-                  { label: t('settings.playback.qualityOptions.higher'), value: 'higher' },
-                  { label: t('settings.playback.qualityOptions.exhigh'), value: 'exhigh' },
-                  { label: t('settings.playback.qualityOptions.lossless'), value: 'lossless' },
-                  { label: t('settings.playback.qualityOptions.hires'), value: 'hires' },
-                  { label: t('settings.playback.qualityOptions.jyeffect'), value: 'jyeffect' },
-                  { label: t('settings.playback.qualityOptions.sky'), value: 'sky' },
-                  { label: t('settings.playback.qualityOptions.dolby'), value: 'dolby' },
-                  { label: t('settings.playback.qualityOptions.jymaster'), value: 'jymaster' }
-                ]"
-                style="width: 160px"
-              />
             </div>
-
-            <div class="set-item">
+            <div class="set-item" v-if="isElectron">
               <div>
                 <div class="set-item-title">{{ t('settings.playback.musicSources') }}</div>
                 <div class="set-item-content">
@@ -165,7 +191,7 @@
                     <div class="text-sm">
                       <span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
                       <span v-if="musicSources.length > 0" class="text-gray-400">
-                        {{ musicSources.map((source) => getSourceLabel(source)).join(', ') }}
+                        {{ musicSources.join(', ') }}
                       </span>
                       <span v-else class="text-red-500 text-xs">
                         {{ t('settings.playback.noMusicSources') }}
@@ -183,6 +209,17 @@
               </n-button>
             </div>
 
+            <div class="set-item" v-if="platform === 'darwin'">
+              <div>
+                <div class="set-item-title">{{ t('settings.playback.showStatusBar') }}</div>
+                <div class="set-item-content">{{ t('settings.playback.showStatusBarContent') }}</div>
+              </div>
+              <n-switch v-model:value="setData.showTopAction">
+                <template #checked>{{ t('common.on') }}</template>
+                <template #unchecked>{{ t('common.off') }}</template>
+              </n-switch>
+            </div>
+
             <div class="set-item">
               <div>
                 <div class="set-item-title">{{ t('settings.playback.autoPlay') }}</div>
@@ -271,6 +308,16 @@
                 }}</n-button>
               </div>
             </div>
+
+            <div class="set-item">
+              <div>
+                <div class="set-item-title">{{ t('settings.application.remoteControl') }}</div>
+                <div class="set-item-content">{{ t('settings.application.remoteControlDesc') }}</div>
+              </div>
+              <n-button size="small" @click="showRemoteControlModal = true">{{
+                t('common.configure')
+              }}</n-button>
+            </div>
           </div>
         </div>
 
@@ -397,7 +444,7 @@
 
         <!-- 捐赠支持 -->
         <div id="donation" ref="donationRef" class="settings-section">
-          <div class="settings-section-title">{{ t('settings.sections.donation') }}</div>
+          <div class="settings-section-title">{{ t('settings.sectio ns.donation') }}</div>
           <div class="settings-section-content">
             <div class="set-item">
               <div>
@@ -418,142 +465,40 @@
       <play-bottom />
     </n-scrollbar>
 
-    <!-- 快捷键设置弹窗 -->
-    <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
+    <template v-if="isElectron">
+      <!-- 快捷键设置弹窗 -->
+      <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
+
+      <!-- 代理设置弹窗 -->
+      <proxy-settings 
+        v-model:show="showProxyModal" 
+        :config="proxyForm"
+        @confirm="handleProxyConfirm"
+      />
+
+      <!-- 音源设置弹窗 -->
+      <music-source-settings
+        v-model:show="showMusicSourcesModal"
+        v-model:sources="musicSources"
+      />
+
+      <!-- 远程控制设置弹窗 -->
+      <remote-control-setting v-model:visible="showRemoteControlModal" />
+
+    </template>
 
-    <!-- 代理设置弹窗 -->
-    <n-modal
-      v-model:show="showProxyModal"
-      preset="dialog"
-      :title="t('settings.network.proxy')"
-      :positive-text="t('common.confirm')"
-      :negative-text="t('common.cancel')"
-      :show-icon="false"
-      @positive-click="handleProxyConfirm"
-      @negative-click="showProxyModal = false"
-    >
-      <n-form
-        ref="formRef"
-        :model="proxyForm"
-        :rules="proxyRules"
-        label-placement="left"
-        label-width="80"
-        require-mark-placement="right-hanging"
-      >
-        <n-form-item :label="t('settings.network.proxy')" path="protocol">
-          <n-select
-            v-model:value="proxyForm.protocol"
-            :options="[
-              { label: 'HTTP', value: 'http' },
-              { label: 'HTTPS', value: 'https' },
-              { label: 'SOCKS5', value: 'socks5' }
-            ]"
-          />
-        </n-form-item>
-        <n-form-item :label="t('settings.network.proxyHost')" path="host">
-          <n-input
-            v-model:value="proxyForm.host"
-            :placeholder="t('settings.network.proxyHostPlaceholder')"
-          />
-        </n-form-item>
-        <n-form-item :label="t('settings.network.proxyPort')" path="port">
-          <n-input-number
-            v-model:value="proxyForm.port"
-            :placeholder="t('settings.network.proxyPortPlaceholder')"
-            :min="1"
-            :max="65535"
-          />
-        </n-form-item>
-      </n-form>
-    </n-modal>
     <!-- 清除缓存弹窗 -->
-    <n-modal
+    <clear-cache-settings
       v-model:show="showClearCacheModal"
-      preset="dialog"
-      :title="t('settings.system.cache')"
-      :positive-text="t('common.confirm')"
-      :negative-text="t('common.cancel')"
-      @positive-click="clearCache"
-      @negative-click="
-        () => {
-          selectedCacheTypes = [];
-        }
-      "
-    >
-      <n-space vertical>
-        <p>{{ t('settings.system.cacheClearTitle') }}</p>
-        <n-checkbox-group v-model:value="selectedCacheTypes">
-          <n-space vertical>
-            <n-checkbox
-              v-for="option in clearCacheOptions"
-              :key="option.key"
-              :value="option.key"
-              :label="option.label"
-            >
-              <template #default>
-                <div>
-                  <div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
-                  <div class="text-gray-400 text-sm">
-                    {{ t(`settings.system.cacheTypes.${option.key}.description`) }}
-                  </div>
-                </div>
-              </template>
-            </n-checkbox>
-          </n-space>
-        </n-checkbox-group>
-      </n-space>
-    </n-modal>
+      @confirm="clearCache"
+    />
 
-    <!-- 音源设置弹窗 -->
-    <n-modal
-      v-model:show="showMusicSourcesModal"
-      preset="dialog"
-      :title="t('settings.playback.musicSources')"
-      :positive-text="t('common.confirm')"
-      :negative-text="t('common.cancel')"
-      @positive-click="showMusicSourcesModal = false"
-      @negative-click="showMusicSourcesModal = false"
-    >
-      <n-space vertical>
-        <p>{{ t('settings.playback.musicSourcesDesc') }}</p>
-        <n-checkbox-group v-model:value="musicSources">
-          <n-grid :cols="2" :x-gap="12" :y-gap="8">
-            <n-grid-item v-for="source in musicSourceOptions" :key="source.value">
-              <n-checkbox :value="source.value">
-                {{ source.label }}
-                <template v-if="source.value === 'gdmusic'">
-                  <n-tooltip>
-                    <template #trigger>
-                      <n-icon size="16" class="ml-1 text-blue-500 cursor-help">
-                        <i class="ri-information-line"></i>
-                      </n-icon>
-                    </template>
-                    {{ t('settings.playback.gdmusicInfo') }}
-                  </n-tooltip>
-                </template>
-              </n-checkbox>
-            </n-grid-item>
-          </n-grid>
-        </n-checkbox-group>
-        <div v-if="musicSources.length === 0" class="text-red-500 text-sm">
-          {{ t('settings.playback.musicSourcesWarning') }}
-        </div>
 
-        <!-- GD音乐台设置 -->
-        <div v-if="musicSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
-          <h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
-          <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
-            GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
-          </p>
-        </div>
-      </n-space>
-    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
-import type { FormRules } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -564,18 +509,23 @@ import DonationList from '@/components/common/DonationList.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
+import ProxySettings from '@/components/settings/ProxySettings.vue';
+import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
+import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
+import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';
 import { isElectron, isMobile } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';
+import { type Platform } from '@/types/music';
 
 import config from '../../../../package.json';
 
-// 手动定义Platform类型，避免从主进程导入的问题
-type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
-// 所有平台
-const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
+// 所有平台默认值
+const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
+
+const platform = window.electron ? window.electron.ipcRenderer.sendSync('get-platform') : 'web';
 
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
@@ -691,41 +641,12 @@ const openDownloadPath = () => {
 };
 
 const showProxyModal = ref(false);
-const formRef = ref();
 const proxyForm = ref({
   protocol: 'http',
   host: '127.0.0.1',
   port: 7890
 });
 
-const proxyRules: FormRules = {
-  protocol: {
-    required: true,
-    message: t('settings.validation.selectProxyProtocol'),
-    trigger: ['blur', 'change']
-  },
-  host: {
-    required: true,
-    message: t('settings.validation.proxyHost'),
-    trigger: ['blur', 'change'],
-    validator: (_rule, value) => {
-      if (!value) return false;
-      // 简单的IP或域名验证
-      const ipRegex =
-        /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
-      return ipRegex.test(value);
-    }
-  },
-  port: {
-    required: true,
-    message: t('settings.validation.portNumber'),
-    trigger: ['blur', 'change'],
-    validator: (_rule, value) => {
-      return value >= 1 && value <= 65535;
-    }
-  }
-};
-
 // 使用 store 中的字体列表
 const systemFonts = computed(() => settingsStore.systemFonts);
 
@@ -803,24 +724,16 @@ watch(
   { immediate: true, deep: true }
 );
 
-const handleProxyConfirm = async () => {
-  try {
-    await formRef.value?.validate();
-    // 保存代理配置时保留enable状态
-    setData.value = {
-      ...setData.value,
-      proxyConfig: {
-        enable: setData.value.proxyConfig?.enable || false,
-        protocol: proxyForm.value.protocol,
-        host: proxyForm.value.host,
-        port: proxyForm.value.port
-      }
-    };
-    showProxyModal.value = false;
-    message.success(t('settings.network.messages.proxySuccess'));
-  } catch (err) {
-    message.error(t('settings.network.messages.proxyError'));
-  }
+const handleProxyConfirm = async (proxyConfig) => {
+  // 保存代理配置时保留enable状态
+  setData.value = {
+    ...setData.value,
+    proxyConfig: {
+      enable: setData.value.proxyConfig?.enable || false,
+      ...proxyConfig
+    }
+  };
+  message.success(t('settings.network.messages.proxySuccess'));
 };
 
 const validateAndSaveRealIP = () => {
@@ -866,48 +779,9 @@ const toggleDonationList = () => {
 
 // 清除缓存相关
 const showClearCacheModal = ref(false);
-const clearCacheOptions = ref([
-  {
-    label: t('settings.system.cacheTypes.history.label'),
-    key: 'history',
-    description: t('settings.system.cacheTypes.history.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.favorite.label'),
-    key: 'favorite',
-    description: t('settings.system.cacheTypes.favorite.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.user.label'),
-    key: 'user',
-    description: t('settings.system.cacheTypes.user.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.settings.label'),
-    key: 'settings',
-    description: t('settings.system.cacheTypes.settings.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.downloads.label'),
-    key: 'downloads',
-    description: t('settings.system.cacheTypes.downloads.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.resources.label'),
-    key: 'resources',
-    description: t('settings.system.cacheTypes.resources.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.lyrics.label'),
-    key: 'lyrics',
-    description: t('settings.system.cacheTypes.lyrics.description')
-  }
-]);
 
-const selectedCacheTypes = ref<string[]>([]);
-
-const clearCache = async () => {
-  const clearTasks = selectedCacheTypes.value.map(async (type) => {
+const clearCache = async (selectedCacheTypes) => {
+  const clearTasks = selectedCacheTypes.map(async (type) => {
     switch (type) {
       case 'history':
         localStorage.removeItem('musicHistory');
@@ -966,8 +840,6 @@ const clearCache = async () => {
 
   await Promise.all(clearTasks);
   message.success(t('settings.system.messages.clearSuccess'));
-  showClearCacheModal.value = false;
-  selectedCacheTypes.value = [];
 };
 
 const showShortcutModal = ref(false);
@@ -1062,17 +934,6 @@ onMounted(() => {
 });
 
 // 音源设置相关
-const musicSourceOptions = ref([
-  { label: 'MiGu音乐', value: 'migu' },
-  { label: '酷狗音乐', value: 'kugou' },
-  { label: 'pyncmd', value: 'pyncmd' },
-  { label: '酷我音乐', value: 'kuwo' },
-  { label: 'Bilibili音乐', value: 'bilibili' },
-  { label: 'YouTube', value: 'youtube' },
-  { label: 'GD音乐台', value: 'gdmusic' }
-]);
-
-// 已选择的音源列表
 const musicSources = computed({
   get: () => {
     if (!setData.value.enabledMusicSources) {
@@ -1092,10 +953,8 @@ const musicSources = computed({
 
 const showMusicSourcesModal = ref(false);
 
-const getSourceLabel = (source: Platform) => {
-  const sourceLabel = musicSourceOptions.value.find(s => s.value === source)?.label;
-  return sourceLabel || source;
-};
+// 远程控制设置弹窗
+const showRemoteControlModal = ref(false);
 </script>
 
 <style lang="scss" scoped>

src/renderer/views/toplist/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="toplist-page">
+    <n-scrollbar class="toplist-container" style="height: 100%" :size="100">
+      <div v-loading="loading" class="toplist-list">
+        <div
+          v-for="(item, index) in topList"
+          :key="item.id"
+          class="toplist-item"
+          :class="setAnimationClass('animate__bounceIn')"
+          :style="getItemAnimationDelay(index)"
+          @click.stop="openToplist(item)"
+        >
+          <div class="toplist-item-img">
+            <n-image
+              class="toplist-item-img-img"
+              :src="getImgUrl(item.coverImgUrl, '300y300')"
+              width="200"
+              height="200"
+              lazy
+              preview-disabled
+            />
+            <div class="top">
+              <div class="play-count">{{ formatNumber(item.playCount) }}</div>
+              <i class="iconfont icon-videofill"></i>
+            </div>
+          </div>
+          <div class="toplist-item-title">{{ item.name }}</div>
+          <div class="toplist-item-desc">{{ item.updateFrequency || '' }}</div>
+        </div>
+      </div>
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-more">
+        <n-spin size="small" />
+        <span class="ml-2">加载中...</span>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { getToplist, getListDetail } from '@/api/list';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import type { IListDetail } from '@/type/listDetail';
+import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'Toplist'
+});
+
+const topList = ref<any[]>([]);
+
+// 计算每个项目的动画延迟
+const getItemAnimationDelay = (index: number) => {
+  return setAnimationDelay(index, 30);
+};
+
+const listDetail = ref<IListDetail | null>();
+const listLoading = ref(true);
+
+const router = useRouter();
+
+const openToplist = (item: any) => {
+  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
+    });
+  });
+};
+
+const loading = ref(false);
+const loadToplist = async () => {
+  loading.value = true;
+  try {
+    const { data } = await getToplist();
+    topList.value = data.list || [];
+  } catch (error) {
+    console.error('加载排行榜列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadToplist();
+});
+</script>
+
+<style lang="scss" scoped>
+.toplist-page {
+  @apply relative h-full w-full;
+  @apply bg-light dark:bg-black;
+}
+
+.toplist-container {
+  @apply p-4;
+}
+
+.toplist-list {
+  @apply grid gap-x-8 gap-y-6 pb-28 pr-4;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.toplist-item {
+  @apply flex flex-col;
+
+  &-img {
+    @apply rounded-xl overflow-hidden relative w-full aspect-square;
+
+    &-img {
+      @apply block w-full h-full;
+    }
+
+    img {
+      @apply absolute top-0 left-0 w-full h-full object-cover rounded-xl;
+    }
+
+    &:hover img {
+      @apply hover:scale-110 transition-all duration-300 ease-in-out;
+    }
+
+    .top {
+      @apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;
+      @apply bg-black bg-opacity-50;
+      opacity: 0;
+
+      i {
+        @apply text-5xl text-white transition-all duration-500 ease-in-out opacity-0;
+      }
+
+      &:hover {
+        @apply opacity-100;
+      }
+
+      &:hover i {
+        @apply transform scale-150 opacity-100;
+      }
+
+      .play-count {
+        @apply absolute top-2 left-2 text-sm text-white;
+      }
+    }
+  }
+
+  &-title {
+    @apply mt-2 text-sm line-clamp-1 font-bold;
+    @apply text-gray-900 dark:text-white;
+  }
+
+  &-desc {
+    @apply mt-1 text-xs line-clamp-1;
+    @apply text-gray-500 dark:text-gray-400;
+  }
+}
+
+.loading-more {
+  @apply flex justify-center items-center py-4;
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.mobile {
+  .toplist-list {
+    @apply px-4 gap-4;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+}
+</style> 

src/renderer/views/user/detail.vue

@@ -63,7 +63,7 @@
                   class="playlist-item"
                   :class="setAnimationClass('animate__fadeInUp')"
                   :style="setAnimationDelay(index, 50)"
-                  @click="showPlaylist(item.id, item.name)"
+                  @click="openPlaylist(item)"
                 >
                   <div class="playlist-cover">
                     <n-image
@@ -120,14 +120,6 @@
         <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>
 
@@ -140,7 +132,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 MusicList from '@/components/MusicList.vue';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import { usePlayerStore } from '@/store/modules/player';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
@@ -166,7 +158,6 @@ const recordList = ref<any[]>([]);
 const loading = ref(true);
 
 // 歌单详情相关
-const isShowList = ref(false);
 const currentList = ref<Playlist>();
 const listLoading = ref(false);
 
@@ -208,21 +199,23 @@ const loadUserData = async () => {
   }
 };
 
-// 展示歌单
-const showPlaylist = async (id: number, name: string) => {
-  isShowList.value = true;
+// 替换显示歌单的方法
+const openPlaylist = (item: any) => {
   listLoading.value = true;
-
-  try {
-    currentList.value = { id, name } as Playlist;
-    const { data } = await getListDetail(id);
-    currentList.value = data.playlist;
-  } catch (error) {
-    console.error('加载歌单详情失败:', error);
-    message.error('加载歌单详情失败');
-  } finally {
+  
+  getListDetail(item.id).then(res => {
+    currentList.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: false
+    });
+  });
 };
 
 // 播放歌曲

src/renderer/views/user/index.vue

@@ -34,7 +34,7 @@
               v-for="(item, index) in playList"
               :key="index"
               class="play-list-item"
-              @click="showPlaylist(item.id, item.name)"
+              @click="openPlaylist(item)"
             >
               <n-image
                 :src="getImgUrl(item.coverImgUrl, '50y50')"
@@ -82,15 +82,6 @@
         </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>
 
@@ -101,11 +92,10 @@ 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 MusicList from '@/components/MusicList.vue';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
@@ -125,7 +115,6 @@ 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();
@@ -234,47 +223,23 @@ onMounted(() => {
   checkLoginStatus() && loadData();
 });
 
-// 展示歌单
-const showPlaylist = async (id: number, name: string) => {
-  isShowList.value = true;
+// 替换显示歌单的方法
+const openPlaylist = (item: any) => {
   listLoading.value = 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()
+  
+  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 // 保留可移除功能
     });
-
-    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 = () => {