feat：v4.7.1

fix: 修复并优化下载功能，重构添加 hook

.env.development

@@ -1,12 +1,9 @@
 # 你的接口地址 (必填)
-VITE_API_LOCAL = ***
-# 音乐破解接口地址
+VITE_API = http://127.0.0.1:30488
+# 音乐破解接口地址 web端
 VITE_API_MUSIC = ***
-# 代理地址
-VITE_API_PROXY = ***
 
 
 # 本地运行代理地址
-VITE_API_PROXY = /api
+VITE_API_LOCAL = /api
 VITE_API_MUSIC_PROXY = /music
-VITE_API_PROXY_MUSIC = /music_proxy

.husky/pre-commit

@@ -0,0 +1,2 @@
+echo "运行类型检查..."
+npm run typecheck 

.husky/pre-push

@@ -0,0 +1,2 @@
+echo "运行类型检查..."
+npm run typecheck 

CHANGELOG.md

@@ -1,25 +1,61 @@
 # 更新日志
 
-## v4.5.0
-## 更新时间 2025 年 4 月 29 日 23:50
+## v4.7.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>
 
-> QQ群 976962720
+> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
+
+> QQ频道 <a href="https://pd.qq.com/s/cs056n33q?b=5" target="_blank">加入频道</a>
+
+### 4.7.1
+- 修复下载歌曲时歌曲URL获取BUG，导致下载失败的问题
 
 ### ✨ 新功能
-- 添加远程控制功能，支持使用局域网链接地址远程控制音乐播放操作（默认关闭需要在设置中开启） ([c82ffd0](https://github.com/algerkong/AlgerMusicPlayer/commit/c82ffd0))（#169）
-- 更新歌手数据加载逻辑，首页添加周杰伦歌手信息常驻 ([3069514](https://github.com/algerkong/AlgerMusicPlayer/commit/3069514))
+- 替换扁平风格图标 ([c8e6db1](https://github.com/algerkong/AlgerMusicPlayer/commit/c8e6db1))
+- 添加双击歌曲播放功能 ([258828f](https://github.com/algerkong/AlgerMusicPlayer/commit/258828f))
+- 添加排行榜页面 ([a8010c8](https://github.com/algerkong/AlgerMusicPlayer/commit/a8010c8))
+- 添加播放速度控制功能 ([6554736](https://github.com/algerkong/AlgerMusicPlayer/commit/6554736)) (#241) [感谢Java-wyx的 PR](https://github.com/Java-wyx)
+- 修改播放列表展示形式，添加清空播放列表功能 ([2e96161](https://github.com/algerkong/AlgerMusicPlayer/commit/2e96161))
+- 歌单列表添加布局切换、播放全部、收藏、添加到播放列表功能 ([b32408b](https://github.com/algerkong/AlgerMusicPlayer/commit/b32408b))
+- 优化播放栏，整合高级控制菜单([f5f0dbb](https://github.com/algerkong/AlgerMusicPlayer/commit/f5f0dbb))
+- 添加顶部定时显示，定时器过期检查功能， ([2dd4535](https://github.com/algerkong/AlgerMusicPlayer/commit/2dd4535))，([170ac45](https://github.com/algerkong/AlgerMusicPlayer/commit/170ac45))
+- 添加 mac 状态栏播放按键控制功能开关 ([2476fbd](https://github.com/algerkong/AlgerMusicPlayer/commit/2476fbd))
+- 收藏列表添加升序降序排列 ([2803d40](https://github.com/algerkong/AlgerMusicPlayer/commit/2803d40))
+- 为歌曲下拉菜单添加圆角样式，优化歌曲预览布局 ([5bef0e4](https://github.com/algerkong/AlgerMusicPlayer/commit/5bef0e4))
+- 在用户歌单中添加"我创建的"标签，优化获取用户歌单的逻辑 ([d56a25e](https://github.com/algerkong/AlgerMusicPlayer/commit/d56a25e))
+- 在歌手详情页添加歌曲操作工具栏，支持播放全部、添加到播放列表和搜索功能 ([6048e24](https://github.com/algerkong/AlgerMusicPlayer/commit/6048e24))
+- 添加所有用户的关注和粉丝列表点击，优化播放排行获取和无权限展示 ([0c74291](https://github.com/algerkong/AlgerMusicPlayer/commit/0c74291))
+- 添加 macOS 下点击 Dock 图标激活主窗口的功能 ([7fa0fa5](https://github.com/algerkong/AlgerMusicPlayer/commit/7fa0fa5))
+- 添加鼠标滚轮调整音量功能，并显示音量百分比 ([95af222](https://github.com/algerkong/AlgerMusicPlayer/commit/95af222))
+- 添加歌曲右键不喜欢功能以过滤每日推荐歌曲 ([a0935c7](https://github.com/algerkong/AlgerMusicPlayer/commit/a0935c7))
+- 添加音乐平台链接，优化移动端样式 ([01a3a7a](https://github.com/algerkong/AlgerMusicPlayer/commit/01a3a7a))
+- 在应用菜单中添加工具提示功能 ([5084da3](https://github.com/algerkong/AlgerMusicPlayer/commit/5084da3))
 
 ### 🐛 Bug 修复
-- 修复音乐播放重复声音的问题，添加锁机制，添加防抖机制，优化音频服务和快捷键处理逻辑 ([159dd03](https://github.com/algerkong/AlgerMusicPlayer/commit/159dd03)) (#173)
-- 修复歌手页面数据加载不全问题 ([57424f9](https://github.com/algerkong/AlgerMusicPlayer/commit/57424f9)) (#165)
+- 修复播放音乐时 URL 未正确更新的问题 ([91b1ff7](https://github.com/algerkong/AlgerMusicPlayer/commit/91b1ff7))
+- 修复播放状态判断逻辑 ([e9fe900](https://github.com/algerkong/AlgerMusicPlayer/commit/e9fe900))
+- 修复收藏歌曲功能未同步问题 ([69b1e54](https://github.com/algerkong/AlgerMusicPlayer/commit/69b1e54))
+- 优化下载列表显示 ([df5ecb6](https://github.com/algerkong/AlgerMusicPlayer/commit/df5ecb6))
 
 ### 🎨 优化
-- 优化应用图标，更新应用图标资源 ([0128662](https://github.com/algerkong/AlgerMusicPlayer/commit/0128662))
-- 优化设置页面，拆分组件 ([c98fa20](https://github.com/algerkong/AlgerMusicPlayer/commit/c98fa20))
-- 优化设置模块，合并默认设置与存储设置，初始化时读取设置 ([0a22c7b](https://github.com/algerkong/AlgerMusicPlayer/commit/0a22c7b))
+- 添加 husky 预提交和预推送钩子，运行类型检查以确保代码质量 ([a449b74](https://github.com/algerkong/AlgerMusicPlayer/commit/a449b74))
+- 重构歌曲组件，添加基础组件和多种样式，优化播放列表抽屉功能 ([ad7b504](https://github.com/algerkong/AlgerMusicPlayer/commit/ad7b504))
+- 将下载逻辑提取优化([ca51020](https://github.com/algerkong/AlgerMusicPlayer/commit/ca51020))
+- 优化B站音频解析功能 ([e47c84e](https://github.com/algerkong/AlgerMusicPlayer/commit/e47c84e))
+- 统一音源选项的标签格式 ([54cbb84](https://github.com/algerkong/AlgerMusicPlayer/commit/54cbb84))
+- 移动端去除定时关闭功能 ([f7951ec](https://github.com/algerkong/AlgerMusicPlayer/commit/f7951ec))
+- 优化网页端下载程序功能 ([56b3ecf](https://github.com/algerkong/AlgerMusicPlayer/commit/56b3ecf))
+- 退出登录时刷新页面 ([54f82d3](https://github.com/algerkong/AlgerMusicPlayer/commit/54f82d3))
 
+### 其他优化
+ ([ae1a7c9](https://github.com/algerkong/AlgerMusicPlayer/commit/ae1a7c9))
+ ([f68f499](https://github.com/algerkong/AlgerMusicPlayer/commit/f68f499))
+ ([6d4e6ef](https://github.com/algerkong/AlgerMusicPlayer/commit/6d4e6ef))
+ ([2379b2c](https://github.com/algerkong/AlgerMusicPlayer/commit/2379b2c))
+ ([33a1057](https://github.com/algerkong/AlgerMusicPlayer/commit/33a1057))
+ ([54d66d0](https://github.com/algerkong/AlgerMusicPlayer/commit/54d66d0))
+ ([3c792ce](https://github.com/algerkong/AlgerMusicPlayer/commit/3c792ce))
+ ([35b84f3](https://github.com/algerkong/AlgerMusicPlayer/commit/35b84f3))
+ ([278db37](https://github.com/algerkong/AlgerMusicPlayer/commit/278db37))

README.md

@@ -1,50 +1,88 @@
-# 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频道-algermusic-blue?style=for-the-badge&color=yellow" alt="加入频道">
+  </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>
+   <a href="https://donate.alger.fun/">
+    <img src="https://img.shields.io/badge/%E9%A1%B9%E7%9B%AE%E6%8D%90%E8%B5%A0-blue?style=for-the-badge&logo=telegram&logoColor=pink&color=pink&label=%E8%B5%9E%E5%8A%A9" alt="赞助">
+  </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 排行榜 每日推荐
+  - 自定义快捷键配置（全局或应用内）
 - 🎨 界面与交互
   - 沉浸式歌词显示（点击左下角封面进入）
   - 独立桌面歌词窗口
   - 明暗主题切换
+  - 迷你模式
+  - 状态栏控制
+  - 多语言支持
+  
 - 🎼 音乐功能
   - 支持歌单、MV、专辑等完整音乐服务
   - 灰色音乐资源解析（基于 @unblockneteasemusic/server）
-  - 高品质音乐试听（需网易云VIP）
+  - 音乐单独解析
+  - EQ均衡器
+  - 定时播放 远程控制播放 倍速播放
+  - 高品质音乐
   - 音乐文件下载（支持右键下载和批量下载, 附带歌词封面等信息）
+  - 搜索 MV 音乐 专辑 歌单 bilibili
+  - 音乐单独选择音源解析
 - 🚀 技术特性
   - 本地化服务，无需依赖在线API (基于 netease-cloud-music-api)
-  - 自动更新检测
-  - 全平台适配（Desktop & Web & Mobile Web & Android<后续> & ios<后续>）
+  - 全平台适配（Desktop & Web & Mobile Web & Android<测试> & ios<后续>）
 
 ## 项目简介
  一个第三方音乐播放器、本地服务、桌面歌词、音乐下载、最高音质
 
 ## 预览地址
-[http://mc.alger.fun/](http://mc.alger.fun/)
-
-QQ群:789288579
-
-tg群:[AlgerMusic tg](https://t.me/+9efsKRuvKBk2NWVl)
+[http://music.alger.fun/](http://music.alger.fun/)
 
 ## 软件截图
 ![首页白](./docs/image.png)
 ![首页黑](./docs/image3.png)
-![歌词](./docs/image1.png)
+![歌词](./docs/image6.png)
 ![桌面歌词](./docs/image2.png)
 ![设置页面](./docs/image4.png)
+![音乐远程控制](./docs/image5.png)
 
-## 技术栈
-
-### 主要框架
-- Vue 3 - 渐进式 JavaScript 框架
-- TypeScript - JavaScript 的超集，添加了类型系统
-- Electron - 跨平台桌面应用开发框架
-- Vite - 下一代前端构建工具
-- Naive UI - 基于 Vue 3 的组件库
+## 项目启动
+```bash
+npm install
+npm run dev
+```
+## 项目打包
+```bash
+# web
+npm run build 
+# win
+npm run build:win
+# mac
+npm run build:mac
+# linux
+npm run build:linux
+```
 
 
 ## 赞赏☕️

package.json

@@ -1,11 +1,12 @@
 {
   "name": "AlgerMusicPlayer",
-  "version": "4.5.0",
+  "version": "4.7.1",
   "description": "Alger Music Player",
   "author": "Alger <algerkc@qq.com>",
   "main": "./out/main/index.js",
   "homepage": "https://github.com/algerkong/AlgerMusicPlayer",
   "scripts": {
+    "prepare": "husky",
     "format": "prettier --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
@@ -26,9 +27,10 @@
     "@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",
+    "express": "^4.18.2",
     "font-list": "^1.5.1",
+    "husky": "^9.1.7",
     "netease-cloud-music-api-alger": "^4.26.1",
     "node-id3": "^0.2.9",
     "node-machine-id": "^1.1.12",
@@ -103,7 +105,9 @@
       {
         "from": "resources/html",
         "to": "html",
-        "filter": ["**/*"]
+        "filter": [
+          "**/*"
+        ]
       }
     ],
     "mac": {

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

@@ -27,6 +27,8 @@ export default {
   refresh: 'Refresh',
   retry: 'Retry',
   reset: 'Reset',
+  copySuccess: 'Copied to clipboard',
+  copyFailed: 'Copy failed',
   validation: {
     required: 'This field is required',
     invalidInput: 'Invalid input',

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/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

@@ -58,7 +58,9 @@ export default {
     next: 'Next',
     volume: 'Volume',
     favorite: 'Favorite {name}',
-    unFavorite: 'Unfavorite {name}'
+    unFavorite: 'Unfavorite {name}',
+    playbackSpeed: 'Playback Speed',
+    advancedControls: 'Advanced Controls',
   },
   eq: {
     title: 'Equalizer',
@@ -105,5 +107,13 @@ export default {
     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/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',

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

@@ -6,7 +6,9 @@ export default {
     addToPlaylist: 'Add to Playlist',
     favorite: 'Like',
     unfavorite: 'Unlike',
-    removeFromPlaylist: 'Remove from Playlist'
+    removeFromPlaylist: 'Remove from Playlist',
+    dislike: 'Dislike',
+    undislike: 'Undislike',
   },
   message: {
     downloading: 'Downloading, please wait...',
@@ -14,5 +16,13 @@ export default {
     downloadQueued: 'Added to download queue',
     addedToNextPlay: 'Added to play next',
     getUrlFailed: 'Failed to get music download URL, please check if logged in'
+  },
+  dialog: {
+    dislike:{
+      title: 'Dislike',
+      content: 'Are you sure you want to dislike this song?',
+      positiveText: 'Dislike',
+      negativeText: 'Cancel'
+    }
   }
 };

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

@@ -6,6 +6,7 @@ export default {
   },
   playlist: {
     created: 'Created Playlists',
+    mine: 'Mine',
     trackCount: '{count} tracks',
     playCount: 'Played {count} times'
   },
@@ -18,12 +19,16 @@ export default {
     viewPlaylist: 'View Playlist',
     noFollowings: 'No Followings',
     loadMore: 'Load More',
-    noSignature: 'This guy is lazy, nothing left'
+    noSignature: 'This guy is lazy, nothing left',
+    userFollowsTitle: '\'s Followings',
+    myFollowsTitle: 'My Followings'
   },
   follower: {
     title: 'Follower List',
     noFollowers: 'No Followers',
-    loadMore: 'Load More'
+    loadMore: 'Load More',
+    userFollowersTitle: '\'s Followers',
+    myFollowersTitle: 'My Followers'
   },
   detail: {
     playlists: 'Playlists',
@@ -32,7 +37,8 @@ export default {
     noRecords: 'No Listening History',
     artist: 'Artist',
     noSignature: 'This guy is lazy, nothing left',
-    invalidUserId: 'Invalid User ID'
+    invalidUserId: 'Invalid User ID',
+    noRecordPermission: '{name} doesn\'t let you see your listening history'
   },
   message: {
     loadFailed: 'Failed to load user page',

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

@@ -27,6 +27,8 @@ export default {
   refresh: '刷新',
   retry: '重试',
   reset: '重置',
+  copySuccess: '已复制到剪贴板',
+  copyFailed: '复制失败',
   validation: {
     required: '此项是必填的',
     invalidInput: '输入无效',

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/favorite.ts

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

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

@@ -59,7 +59,9 @@ export default {
     volume: '音量',
     favorite: '已收藏{name}',
     unFavorite: '已取消收藏{name}',
-    miniPlayBar: '迷你播放栏'
+    miniPlayBar: '迷你播放栏',
+    playbackSpeed: '播放速度',
+    advancedControls: '更多设置s',
   },
   eq: {
     title: '均衡器',
@@ -106,5 +108,13 @@ export default {
     playbackStopped: '音乐播放已停止',
     minutesRemaining: '剩余{minutes}分钟',
     songsRemaining: '剩余{count}首歌'
+  },
+  playList: {
+    clearAll: '清空播放列表',
+    alreadyEmpty: '播放列表已经为空',
+    cleared: '已清空播放列表',
+    empty: '播放列表为空',
+    clearConfirmTitle: '清空播放列表',
+    clearConfirmContent: '这将清空所有播放列表中的歌曲并停止当前播放。是否继续？'
   }
 };

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: '关闭行为',

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

@@ -6,7 +6,9 @@ export default {
     addToPlaylist: '添加到歌单',
     favorite: '喜欢',
     unfavorite: '取消喜欢',
-    removeFromPlaylist: '从歌单中删除'
+    removeFromPlaylist: '从歌单中删除',
+    dislike: '不喜欢',
+    undislike: '取消不喜欢',
   },
   message: {
     downloading: '正在下载中，请稍候...',
@@ -14,5 +16,13 @@ export default {
     downloadQueued: '已加入下载队列',
     addedToNextPlay: '已添加到下一首播放',
     getUrlFailed: '获取音乐下载地址失败，请检查是否登录'
+  },
+  dialog: {
+    dislike: {
+      title: '提示！',
+      content: '确认不喜欢这首歌吗？再次进入将从每日推荐中排除。',
+      positiveText: '不喜欢',
+      negativeText: '取消'
+    }
   }
 };

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

@@ -6,6 +6,7 @@ export default {
   },
   playlist: {
     created: '创建的歌单',
+    mine: '我创建的',
     trackCount: '{count}首',
     playCount: '播放{count}次'
   },
@@ -18,12 +19,16 @@ export default {
     viewPlaylist: '查看歌单',
     noFollowings: '暂无关注',
     loadMore: '加载更多',
-    noSignature: '这个家伙很懒，什么都没留下'
+    noSignature: '这个家伙很懒，什么都没留下',
+    userFollowsTitle: '的关注',
+    myFollowsTitle: '我的关注'
   },
   follower: {
     title: '粉丝列表',
     noFollowers: '暂无粉丝',
-    loadMore: '加载更多'
+    loadMore: '加载更多',
+    userFollowersTitle: '的粉丝',
+    myFollowersTitle: '我的粉丝'
   },
   detail: {
     playlists: '歌单',
@@ -32,7 +37,8 @@ export default {
     noRecords: '暂无听歌记录',
     artist: '歌手',
     noSignature: '这个人很懒，什么都没留下',
-    invalidUserId: '用户ID无效'
+    invalidUserId: '用户ID无效',
+    noRecordPermission: '{name}不让你看听歌排行'
   },
   message: {
     loadFailed: '加载用户页面失败',

src/main/lyric.ts

@@ -122,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/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 {
@@ -327,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/modules/window.ts

@@ -14,6 +14,9 @@ let mainWindowState = {
   isMaximized: false
 };
 
+// 保存主窗口引用，以便在 activate 事件中使用
+let mainWindowInstance: BrowserWindow | null = null;
+
 /**
  * 初始化代理设置
  */
@@ -183,6 +186,17 @@ export function initializeWindowManager() {
       }
     }
   });
+
+  // 监听 macOS 下点击 Dock 图标的事件
+  app.on('activate', () => {
+    // 当应用被激活时，检查主窗口是否存在
+    if (mainWindowInstance && !mainWindowInstance.isDestroyed()) {
+      // 如果窗口存在但被隐藏，则显示窗口
+      if (!mainWindowInstance.isVisible()) {
+        mainWindowInstance.show();
+      }
+    }
+  });
 }
 
 /**
@@ -205,6 +219,7 @@ export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
   });
 
   mainWindow.setMinimumSize(1200, 780);
+  mainWindow.removeMenu();
 
   mainWindow.on('ready-to-show', () => {
     mainWindow.show();
@@ -229,5 +244,10 @@ export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
   }
 
+  // 保存主窗口引用
+  mainWindowInstance = mainWindow;
+
+  mainWindow.on('blur', () => mainWindow && mainWindow.setMaximizable(false))
+
   return mainWindow;
 }

src/main/set.json

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

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

@@ -126,26 +126,6 @@ export const parseFromGDMusic = async (
   }
 };
 
-/**
- * 获取音质映射
- * @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/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();
   
   // 如果禁用了音乐解析功能，则直接返回空结果
@@ -98,7 +100,25 @@ export const getParsingMusicUrl = async (id: number, data: any) => {
     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 || [];
     }
@@ -108,13 +128,11 @@ export const getParsingMusicUrl = async (id: number, data: any) => {
   }
   
   // 检查是否选择了GD音乐台解析
+  
   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;
       }
@@ -201,3 +219,11 @@ export function getPlaylistDetail(id: string) {
     }
   });
 }
+
+export function subscribePlaylist(params: { t: number; id: number }) {
+  return request({
+    url: '/playlist/subscribe',
+    method: 'post',
+    params
+  });
+}

src/renderer/api/user.ts

@@ -14,7 +14,11 @@ export function getUserPlaylist(uid: number, limit: number = 30, offset: number
 // 播放历史
 // /user/record?uid=32953014&type=1
 export function getUserRecord(uid: number, type: number = 0) {
-  return request.get('/user/record', { params: { uid, type } });
+  
+  return request.get('/user/record', {
+    params: { uid, type },
+    noRetry: true
+  } as any);
 }
 
 // 获取用户关注列表

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/EQControl.vue

@@ -264,7 +264,6 @@ const formatFreq = (freq: number) => {
 .eq-control {
   @apply p-6 rounded-lg;
   @apply bg-light dark:bg-dark;
-  @apply shadow-lg dark:shadow-none;
   width: 100%;
   max-width: 700px;
 

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);
 

src/renderer/components/common/DonationList.vue

@@ -4,6 +4,12 @@
       <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">
@@ -16,15 +22,6 @@
           <span class="qrcode-label">{{ t('common.alipay') }}</span>
         </div>
         
-        <div class="donate-button">
-          <n-button type="primary" @click="toDonateList">
-            <template #icon>
-              <i class="ri-cup-line"></i>
-            </template>
-            {{ t('donation.toDonateList') }}
-          </n-button>
-        </div>
-        
         <div class="qrcode-item">
           <n-image
             :src="wechat"
@@ -66,7 +63,7 @@
           <div class="donor-info">
             <div class="donor-meta">
               <div class="donor-name">{{ donor.name }}</div>
-              <div class="price-tag">￥{{ donor.amount }}</div>
+              <!-- <div class="price-tag">￥{{ donor.amount }}</div> -->
             </div>
             <div class="donation-date">{{ donor.date }}</div>
           </div>
@@ -172,7 +169,7 @@ const toggleExpand = () => {
 };
 
 const toDonateList = () => {
-  window.open('http://donate.alger.fun', '_blank');
+  window.open('http://donate.alger.fun/download', '_blank');
 };
 </script>
 
@@ -211,13 +208,9 @@ const toDonateList = () => {
   @apply rounded-lg p-2.5 transition-all duration-200 hover:shadow-md;
   @apply bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm;
   @apply border border-gray-200 dark:border-gray-700/10;
-  @apply flex flex-col justify-between;
+  @apply flex flex-col;
   min-height: 100px;
   
-  &.no-message {
-    @apply justify-between;
-  }
-  
   .card-content {
     @apply flex items-start gap-2 mb-2;
   }
@@ -327,7 +320,7 @@ const toDonateList = () => {
   }
   
   .qrcode-grid {
-    @apply flex justify-between items-center gap-4;
+    @apply flex justify-between items-center gap-4 flex-wrap;
     
     .qrcode-item {
       @apply flex flex-col items-center gap-2;

src/renderer/components/common/DownloadDrawer.vue

@@ -17,7 +17,7 @@
   >
     <n-drawer-content :title="t('download.title')" closable :native-scrollbar="false">
       <div class="drawer-container">
-        <n-tabs type="line" animated class="h-full">
+        <n-tabs type="line" animated class="h-full" v-model:value="tabName">
           <!-- 下载列表 -->
           <n-tab-pane name="downloading" :tab="t('download.tabs.downloading')" class="h-full">
             <div class="download-list">
@@ -249,7 +249,7 @@ interface DownloadedItem {
   picUrl: string;
   ar: { name: string }[];
 }
-
+const tabName = ref('downloading');
 const message = useMessage();
 // const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -540,6 +540,16 @@ onMounted(() => {
 const handleDrawerClose = () => {
   settingsStore.showDownloadDrawer = false;
 };
+
+
+watch(
+  () => tabName.value,
+  (newVal) => {
+    if (newVal) {
+      refreshDownloadedList();
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>

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/PlaylistDrawer.vue

@@ -4,6 +4,7 @@
     :width="400"
     placement="right"
     @update:show="$emit('update:modelValue', $event)"
+    :unstable-show-mask="false"
   >
     <n-drawer-content :title="t('comp.playlistDrawer.title')" class="mac-style-drawer">
       <n-scrollbar class="h-full">
@@ -158,9 +159,9 @@ const fetchUserPlaylists = async () => {
       return;
     }
 
-    const res = await getUserPlaylist(user.userId);
+    const res = await getUserPlaylist(user.userId, 999);
     if (res.data?.playlist) {
-      playlists.value = res.data.playlist;
+      playlists.value = res.data.playlist.filter((item: any) => item.userId === user.userId);
     }
   } catch (error) {
     console.error('获取歌单失败:', error);
@@ -254,7 +255,7 @@ watch(
 }
 
 .playlist-drawer {
-  @apply flex flex-col gap-6;
+  @apply flex flex-col gap-6 py-6;
 }
 
 .create-playlist-section {
@@ -335,7 +336,7 @@ watch(
 }
 
 .playlist-list {
-  @apply flex flex-col gap-2;
+  @apply flex flex-col gap-2 pb-40;
 }
 
 .playlist-item {
@@ -367,4 +368,9 @@ watch(
     }
   }
 }
+
+:deep(.n-drawer-body-content-wrapper) {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
 </style>

src/renderer/components/common/SearchItem.vue

@@ -33,7 +33,6 @@
 <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';
@@ -129,9 +128,7 @@ const handleClick = async () => {
 };
 
 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,667 +1,61 @@
 <template>
-  <div
-    class="song-item"
-    :class="{ 'song-mini': mini, 'song-list': list }"
-    @contextmenu.prevent="handleContextMenu"
-  >
-    <div v-if="selectable" class="song-item-select" @click.stop="toggleSelect">
-      <n-checkbox :checked="selected" />
-    </div>
-    <n-image
-      v-if="item.picUrl"
-      ref="songImg"
-      :src="getImgUrl(item.picUrl, '100y100')"
-      class="song-item-img"
-      preview-disabled
-      :img-props="{
-        crossorigin: 'anonymous'
-      }"
-      @load="imageLoad"
-    />
-    <div class="song-item-content">
-      <div v-if="list" class="song-item-content-wrapper">
-        <n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1">{{
-          item.name
-        }}</n-ellipsis>
-        <div class="song-item-content-divider">-</div>
-        <n-ellipsis class="song-item-content-name text-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>
-      <template v-else>
-        <div class="song-item-content-title">
-          <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.name }}</n-ellipsis>
-        </div>
-        <div class="song-item-content-name">
-          <n-ellipsis class="text-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>
-      </template>
-    </div>
-    <div class="song-item-operating" :class="{ 'song-item-operating-list': list }">
-      <div v-if="favorite" class="song-item-operating-like">
-        <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 }"
-        @click="playMusicEvent(item)"
-      >
-        <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
-        <i v-else class="iconfont icon-playfill"></i>
-      </div>
-    </div>
-    <n-dropdown
-      v-if="isElectron"
-      :show="showDropdown"
-      :x="dropdownX"
-      :y="dropdownY"
-      :options="dropdownOptions"
-      :z-index="99999"
-      placement="bottom-start"
-      @clickoutside="showDropdown = false"
-      @select="handleSelect"
-    />
-  </div>
+  <component 
+    :is="renderComponent"
+    :item="item"
+    :favorite="favorite"
+    :selectable="selectable"
+    :selected="selected"
+    :can-remove="canRemove"
+    :is-next="isNext"
+    :index="index"
+    @play="(...args) => $emit('play', ...args)"
+    @select="(...args) => $emit('select', ...args)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
+  />
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import type { MenuOption } from 'naive-ui';
-import { NImage, NText, useMessage } from 'naive-ui';
-import { computed, h, inject, ref, useTemplateRef } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { getSongUrl } from '@/hooks/MusicListHook';
-import { useArtist } from '@/hooks/useArtist';
-import { audioService } from '@/services/audioService';
-import { usePlayerStore } from '@/store';
+import { computed } from 'vue';
 import type { SongResult } from '@/type/music';
-import { getImgUrl, isElectron } from '@/utils';
-import { getImageBackground } from '@/utils/linearColor';
 
-const { t } = useI18n();
+import StandardSongItem from './songItemCom/StandardSongItem.vue';
+import MiniSongItem from './songItemCom/MiniSongItem.vue';
+import ListSongItem from './songItemCom/ListSongItem.vue';
+import CompactSongItem from './songItemCom/CompactSongItem.vue';
 
 const props = withDefaults(
   defineProps<{
     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,
-    isNext: false
+    isNext: false,
+    index: undefined
   }
 );
 
-const playerStore = usePlayerStore();
+defineEmits(['play', 'select', 'remove-song']);
 
-const message = useMessage();
-
-const play = computed(() => playerStore.isPlay);
-const playMusic = computed(() => playerStore.playMusic);
-const playLoading = computed(
-  () => playMusic.value.id === props.item.id && playMusic.value.playLoading
-);
-const isPlaying = computed(() => {
-  return playMusic.value.id === props.item.id;
+// 根据属性决定渲染哪个组件
+const renderComponent = computed(() => {
+  if (props.mini) return MiniSongItem;
+  if (props.list) return ListSongItem;
+  if (props.compact) return CompactSongItem;
+  return StandardSongItem;
 });
-
-const showDropdown = ref(false);
-const dropdownX = ref(0);
-const dropdownY = ref(0);
-
-const isDownloading = ref(false);
-
-const openPlaylistDrawer = inject<(songId: number | string) => void>('openPlaylistDrawer');
-
-const { navigateToArtist } = useArtist();
-
-const renderSongPreview = () => {
-  return h(
-    'div',
-    {
-      class: 'flex items-center gap-3 px-2 py-1 dark:border-gray-800'
-    },
-    [
-      h(NImage, {
-        src: getImgUrl(props.item.picUrl || props.item.al?.picUrl, '100y100'),
-        class: 'w-10 h-10 rounded-lg flex-shrink-0',
-        previewDisabled: true,
-        imgProps: {
-          crossorigin: 'anonymous'
-        }
-      }),
-      h(
-        'div',
-        {
-          class: 'flex-1 min-w-0 py-1'
-        },
-        [
-          h(
-            'div',
-            {
-              class: 'mb-1'
-            },
-            [
-              h(
-                NText,
-                {
-                  depth: 1,
-                  class: 'text-sm font-medium'
-                },
-                {
-                  default: () => props.item.name
-                }
-              )
-            ]
-          )
-        ]
-      )
-    ]
-  );
-};
-
-const dropdownOptions = computed<MenuOption[]>(() => {
-  const options: MenuOption[] = [
-    {
-      key: 'header',
-      type: 'render',
-      render: renderSongPreview
-    },
-    {
-      key: 'divider1',
-      type: 'divider'
-    },
-    {
-      label: t('songItem.menu.play'),
-      key: 'play',
-      icon: () => h('i', { class: 'iconfont ri-play-circle-line' })
-    },
-    {
-      label: t('songItem.menu.playNext'),
-      key: 'playNext',
-      icon: () => h('i', { class: 'iconfont ri-play-list-2-line' })
-    },
-    {
-      type: 'divider',
-      key: 'd1'
-    },
-    {
-      label: t('songItem.menu.download'),
-      key: 'download',
-      icon: () => h('i', { class: 'iconfont ri-download-line' })
-    },
-    {
-      label: t('songItem.menu.addToPlaylist'),
-      key: 'addToPlaylist',
-      icon: () => h('i', { class: 'iconfont ri-folder-add-line' })
-    },
-    {
-      label: isFavorite.value ? t('songItem.menu.unfavorite') : t('songItem.menu.favorite'),
-      key: 'favorite',
-      icon: () =>
-        h('i', {
-          class: `iconfont ${isFavorite.value ? 'ri-heart-fill text-red-500' : 'ri-heart-line'}`
-        })
-    }
-  ];
-
-  if (props.canRemove) {
-    options.push(
-      {
-        type: 'divider',
-        key: 'd2'
-      },
-      {
-        label: t('songItem.menu.removeFromPlaylist'),
-        key: 'remove',
-        icon: () => h('i', { class: 'iconfont ri-delete-bin-line' })
-      }
-    );
-  }
-
-  return options;
-});
-
-const handleContextMenu = (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') {
-    downloadMusic();
-  } else if (key === 'playNext') {
-    handlePlayNext();
-  } else if (key === 'addToPlaylist') {
-    openPlaylistDrawer?.(props.item.id);
-  } else if (key === 'favorite') {
-    toggleFavorite(new Event('click'));
-  } else if (key === 'play') {
-    playMusicEvent(props.item);
-  } else if (key === 'remove') {
-    emits('remove-song', props.item.id);
-  }
-};
-
-// 下载音乐
-const downloadMusic = async () => {
-  if (isDownloading.value) {
-    message.warning(t('songItem.message.downloading'));
-    return;
-  }
-
-  try {
-    isDownloading.value = true;
-
-    const data = (await getSongUrl(props.item.id as number, cloneDeep(props.item), true)) as any;
-    if (!data || !data.url) {
-      throw new Error(t('songItem.message.getUrlFailed'));
-    }
-
-    // 构建文件名
-    const artistNames = (props.item.ar || props.item.song?.artists)?.map((a) => a.name).join(',');
-    const filename = `${props.item.name} - ${artistNames}`;
-    console.log('props.item', props.item);
-
-    const songData = cloneDeep(props.item);
-    songData.ar = songData.ar || songData.song?.artists;
-    // 发送下载请求
-    window.electron.ipcRenderer.send('download-music', {
-      url: data.url,
-      type: data.type,
-      filename,
-      songInfo: {
-        ...songData,
-        downloadTime: Date.now()
-      }
-    });
-
-    message.success(t('songItem.message.downloadQueued'));
-
-    // 监听下载完成事件
-    const handleDownloadComplete = (_, result) => {
-      if (result.filename === filename) {
-        isDownloading.value = false;
-        removeListeners();
-      }
-    };
-
-    // 监听下载错误事件
-    const handleDownloadError = (_, result) => {
-      if (result.filename === filename) {
-        isDownloading.value = false;
-        removeListeners();
-      }
-    };
-
-    // 移除监听器函数
-    const removeListeners = () => {
-      window.electron.ipcRenderer.removeListener('music-download-complete', handleDownloadComplete);
-      window.electron.ipcRenderer.removeListener('music-download-error', handleDownloadError);
-    };
-
-    // 添加事件监听器
-    window.electron.ipcRenderer.once('music-download-complete', handleDownloadComplete);
-    window.electron.ipcRenderer.once('music-download-error', handleDownloadError);
-
-    // 30秒后自动清理监听器（以防下载过程中出现未知错误）
-    setTimeout(removeListeners, 30000);
-  } catch (error: any) {
-    console.error('Download error:', error);
-    isDownloading.value = false;
-    message.error(error.message || t('songItem.message.downloadFailed'));
-  }
-};
-
-const emits = defineEmits(['play', 'select', 'remove-song']);
-const songImageRef = useTemplateRef('songImg');
-
-const imageLoad = async () => {
-  if (!songImageRef.value) {
-    return;
-  }
-  const { backgroundColor } = await getImageBackground(
-    (songImageRef.value as any).imageRef as unknown as HTMLImageElement
-  );
-  // eslint-disable-next-line vue/no-mutating-props
-  props.item.backgroundColor = backgroundColor;
-};
-
-// 播放音乐 设置音乐详情 打开音乐底栏
-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);
-    if (!result) {
-      throw new Error('播放失败');
-    }
-    playerStore.isPlay = true;
-    emits('play', item);
-  } catch (error) {
-    console.error('播放出错:', error);
-  }
-};
-
-// 判断是否已收藏
-const isFavorite = computed(() => {
-  // 将id转换为number，兼容B站视频ID
-  const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
-  return playerStore.favoriteList.includes(numericId);
-});
-
-// 切换收藏状态
-const toggleFavorite = async (e: Event) => {
-  e.stopPropagation();
-  // 将id转换为number，兼容B站视频ID
-  const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
-
-  if (isFavorite.value) {
-    playerStore.removeFromFavorite(numericId);
-  } else {
-    playerStore.addToFavorite(numericId);
-  }
-};
-
-// 切换选择状态
-const toggleSelect = () => {
-  emits('select', props.item.id, !props.selected);
-};
-
-const handleArtistClick = (id: number) => {
-  navigateToArtist(id);
-};
-
-// 获取歌手列表（最多显示5个）
-const artists = computed(() => {
-  return (props.item.ar || props.item.song?.artists)?.slice(0, 4) || [];
-});
-
-// 添加到下一首播放
-const handlePlayNext = () => {
-  playerStore.addToNextPlay(props.item);
-  message.success(t('songItem.message.addedToNextPlay'));
-};
 </script>
-
-<style lang="scss" scoped>
-// 配置文字不可选中
-.text-ellipsis {
-  width: 100%;
-}
-
-.song-item {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  @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;
-  }
-
-  &-img {
-    @apply w-12 h-12 rounded-2xl mr-4;
-  }
-
-  &-content {
-    @apply flex-1;
-
-    &-title {
-      @apply text-base text-gray-900 dark:text-white;
-    }
-
-    &-name {
-      @apply text-xs text-gray-500 dark:text-gray-400;
-    }
-  }
-
-  &-operating {
-    @apply flex items-center rounded-full ml-4 border dark:border-gray-700 border-gray-200 bg-light dark:bg-black;
-
-    .iconfont {
-      @apply text-xl;
-    }
-
-    .icon-likefill {
-      @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-red-500;
-    }
-
-    &-like {
-      @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;
-    }
-
-    &-play {
-      @apply cursor-pointer rounded-full w-10 h-10 flex justify-center items-center transition
-             border dark:border-gray-700 border-gray-200 text-gray-900 dark:text-white;
-
-      &:hover,
-      &.bg-green-600 {
-        @apply bg-green-500 border-green-500 text-white;
-      }
-    }
-
-    &-download {
-      @apply mr-2 cursor-pointer;
-
-      .iconfont {
-        @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
-      }
-    }
-  }
-
-  &-select {
-    @apply mr-3 cursor-pointer;
-  }
-}
-
-.song-mini {
-  @apply p-2 rounded-2xl;
-
-  .song-item {
-    @apply p-0;
-
-    &-img {
-      @apply w-10 h-10 mr-2;
-    }
-
-    &-content {
-      @apply flex-1;
-
-      &-title {
-        @apply text-sm;
-      }
-
-      &-name {
-        @apply text-xs;
-      }
-    }
-
-    &-operating {
-      @apply pl-2;
-
-      .iconfont {
-        @apply text-base;
-      }
-
-      &-like {
-        @apply mr-1 ml-1;
-      }
-
-      &-play {
-        @apply w-8 h-8;
-      }
-    }
-  }
-}
-
-.song-list {
-  @apply p-2 rounded-lg mb-2 border dark:border-gray-800 border-gray-200;
-
-  &:hover {
-    @apply bg-gray-50 dark:bg-gray-800;
-  }
-
-  .song-item-img {
-    @apply w-10 h-10 rounded-lg mr-3;
-  }
-
-  .song-item-content {
-    @apply flex items-center flex-1;
-
-    &-wrapper {
-      @apply flex items-center flex-1 text-sm;
-    }
-
-    &-title {
-      @apply flex-shrink-0 max-w-[45%] text-gray-900 dark:text-white;
-    }
-
-    &-divider {
-      @apply mx-2 text-gray-500 dark:text-gray-400;
-    }
-
-    &-name {
-      @apply flex-1 min-w-0 text-gray-500 dark:text-gray-400;
-    }
-  }
-
-  .song-item-operating {
-    @apply flex items-center gap-2;
-
-    &-like {
-      @apply cursor-pointer hover:scale-110 transition-transform;
-
-      .iconfont {
-        @apply text-base text-gray-500 dark:text-gray-400 hover:text-red-500;
-      }
-    }
-
-    &-play {
-      @apply w-7 h-7 cursor-pointer hover:scale-110 transition-transform;
-
-      .iconfont {
-        @apply text-base;
-      }
-    }
-  }
-}
-
-:deep(.n-dropdown-menu) {
-  @apply min-w-[240px] overflow-hidden rounded-lg border dark:border-gray-800;
-
-  .n-dropdown-option {
-    @apply h-9 text-sm;
-
-    &:hover {
-      @apply bg-gray-100 dark:bg-gray-800;
-    }
-
-    .n-dropdown-option-body {
-      @apply h-full;
-
-      .n-dropdown-option-body__prefix {
-        @apply w-8 flex justify-center items-center;
-
-        .iconfont {
-          @apply text-base;
-        }
-      }
-    }
-  }
-
-  .n-dropdown-divider {
-    @apply my-1;
-  }
-}
-
-:deep(.song-preview) {
-  @apply flex items-center gap-3 p-3 border-b dark:border-gray-800;
-
-  .n-image {
-    @apply w-12 h-12 rounded-lg flex-shrink-0;
-  }
-
-  .song-preview-info {
-    @apply flex-1 min-w-0 py-1;
-
-    .song-preview-name {
-      @apply text-sm font-medium truncate mb-1;
-    }
-
-    .song-preview-artist {
-      @apply text-xs text-gray-500 dark:text-gray-400 truncate;
-    }
-  }
-}
-
-:deep(.n-dropdown-option-body--render) {
-  @apply p-0;
-}
-</style>

src/renderer/components/common/songItemCom/BaseSongItem.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    class="song-item"
+    @contextmenu.prevent="handleContextMenu"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @dblclick.stop="playMusicEvent(item)"
+  >
+    <slot name="index"></slot>
+    <slot name="select" v-if="selectable"></slot>
+    <slot name="image"></slot>
+    <slot name="content"></slot>
+    <slot name="operating"></slot>
+    
+    <song-item-dropdown
+      v-if="isElectron"
+      :item="item"
+      :show="showDropdown"
+      :x="dropdownX"
+      :y="dropdownY"
+      :is-favorite="isFavorite"
+      :is-dislike="isDislike"
+      :can-remove="canRemove"
+      @update:show="showDropdown = $event"
+      @play="playMusicEvent(item)"
+      @play-next="handlePlayNext"
+      @download="downloadMusic(item)"
+      @toggle-favorite="toggleFavorite"
+      @toggle-dislike="toggleDislike"
+      @remove="$emit('remove-song', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import SongItemDropdown from './SongItemDropdown.vue';
+import { useSongItem } from '@/hooks/useSongItem';
+import { isElectron } from '@/utils';
+import type { SongResult } from '@/type/music';
+
+const props = defineProps<{
+  item: SongResult;
+  selectable?: boolean;
+  selected?: boolean;
+  canRemove?: boolean;
+  isNext?: boolean;
+  index?: number;
+}>();
+
+const emits = defineEmits(['play', 'select', 'remove-song']);
+
+// 使用公共逻辑
+const {
+  playLoading,
+  isPlaying,
+  isFavorite,
+  isDislike,
+  artists,
+  showDropdown,
+  dropdownX,
+  dropdownY,
+  isHovering,
+  handleImageLoad,
+  playMusicEvent,
+  toggleFavorite,
+  toggleDislike,
+  handlePlayNext,
+  handleContextMenu,
+  handleMenuClick,
+  handleArtistClick,
+  handleMouseEnter,
+  handleMouseLeave,
+  downloadMusic
+} = useSongItem(props);
+
+// 处理图片加载
+const imageLoad = async (event: Event) => {
+  const target = event.target as HTMLImageElement;
+  if (!target) return;
+  await handleImageLoad(target);
+};
+
+// 切换选择状态
+const toggleSelect = () => {
+  emits('select', props.item.id, !props.selected);
+};
+
+// 把图片处理、艺术家处理等公共方法暴露给子组件
+defineExpose({
+  imageLoad,
+  toggleSelect,
+  handleArtistClick,
+  handleMenuClick,
+  playMusicEvent,
+  toggleFavorite,
+  handlePlayNext,
+  playLoading,
+  isPlaying,
+  isFavorite,
+  isDislike,
+  artists,
+  isHovering
+});
+</script>
+
+<style lang="scss" scoped>
+.song-item {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  @apply rounded-3xl p-3 flex items-center transition bg-transparent dark:text-white text-gray-900;
+}
+
+.text-ellipsis {
+  width: 100%;
+}
+</style> 

src/renderer/components/common/songItemCom/CompactSongItem.vue

@@ -0,0 +1,253 @@
+<template>
+  <base-song-item
+    :item="item"
+    :selectable="selectable"
+    :selected="selected"
+    :can-remove="canRemove"
+    :is-next="isNext"
+    :index="index"
+    @play="(...args) => $emit('play', ...args)"
+    @select="(...args) => $emit('select', ...args)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
+    class="compact-song-item"
+    ref="baseItem"
+  >
+    <!-- 索引插槽 -->
+    <template #index>
+      <div v-if="index !== undefined" class="song-item-index" :class="{ 'text-green-500': isPlaying }">
+        {{ index + 1 }}
+      </div>
+    </template>
+
+    <!-- 选择框插槽 -->
+    <template #select>
+      <div v-if="baseItem && selectable" class="song-item-select" @click.stop="onToggleSelect">
+        <n-checkbox :checked="selected" />
+      </div>
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template #content>
+      <div class="song-item-content-compact">
+        <div class="song-item-content-compact-wrapper">
+          <div class="song-item-content-compact-title w-60 flex-shrink-0">
+            <n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
+              {{ item.name }}
+            </n-ellipsis>
+          </div>
+          <div class="song-item-content-compact-artist">
+            <n-ellipsis line-clamp="1">
+              <template v-for="(artist, index) in artists" :key="index">
+                <span
+                  class="cursor-pointer hover:text-green-500"
+                  @click.stop="onArtistClick(artist.id)"
+                  >{{ artist.name }}</span
+                >
+                <span v-if="index < artists.length - 1"> / </span>
+              </template>
+            </n-ellipsis>
+          </div>
+        </div>
+        <div class="song-item-content-compact-album">
+          <n-ellipsis line-clamp="1">{{ item.al?.name || '-' }}</n-ellipsis>
+        </div>
+        <div class="song-item-content-compact-duration">
+          {{ formatDuration(getDuration(item)) }}
+        </div>
+      </div>
+    </template>
+    
+    <!-- 操作插槽 -->
+    <template #operating>
+      <div class="song-item-operating-compact">
+        <div v-if="favorite" class="song-item-operating-like" :class="{ 'opacity-0': !isHovering && !isFavorite }">
+          <i
+            class="iconfont icon-likefill"
+            :class="{ 'like-active': isFavorite }"
+            @click.stop="onToggleFavorite"
+          ></i>
+        </div>
+        <div
+          class="song-item-operating-play animate__animated"
+          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading, 'opacity-0': !isHovering && !isPlaying }"
+          @click="onPlayMusic"
+        >
+          <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
+          <i v-else class="iconfont icon-playfill"></i>
+        </div>
+        <div class="song-item-operating-menu" @click.stop="onMenuClick" :class="{ 'opacity-0': !isHovering && !isPlaying }">
+          <i class="iconfont ri-more-fill"></i>
+        </div>
+      </div>
+    </template>
+  </base-song-item>
+</template>
+
+<script lang="ts" setup>
+import { NCheckbox, NEllipsis } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { usePlayerStore } from '@/store';
+import BaseSongItem from './BaseSongItem.vue';
+import type { SongResult } from '@/type/music';
+
+const playerStore = usePlayerStore();
+
+const props = withDefaults(
+  defineProps<{
+    item: SongResult;
+    favorite?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    canRemove?: boolean;
+    isNext?: boolean;
+    index?: number;
+  }>(),
+  {
+    favorite: true,
+    selectable: false,
+    selected: false,
+    canRemove: false,
+    isNext: false,
+    index: undefined
+  }
+);
+
+const emit = defineEmits(['play', 'select', 'remove-song']);
+const baseItem = ref<InstanceType<typeof BaseSongItem>>();
+
+// 从基础组件获取响应式状态
+const play = computed(() => playerStore.isPlay);
+const isPlaying = computed(() => baseItem.value?.isPlaying || false);
+const playLoading = computed(() => baseItem.value?.playLoading || false);
+const isFavorite = computed(() => baseItem.value?.isFavorite || false);
+const isHovering = computed(() => baseItem.value?.isHovering || false);
+const artists = computed(() => baseItem.value?.artists || []);
+
+// 包装方法，避免直接访问可能为undefined的ref
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
+const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
+const onToggleFavorite = (event: Event) => {
+  baseItem.value?.toggleFavorite(event);
+  // 可选：emit 收藏事件
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
+const onMenuClick = (event: MouseEvent) => baseItem.value?.handleMenuClick(event);
+
+// 从useSongItem.ts导入格式化时长和获取时长方法
+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')}`;
+};
+</script>
+
+<style lang="scss" scoped>
+.compact-song-item {
+  @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-index {
+    @apply w-8 text-center text-gray-500 dark:text-gray-400 text-sm;
+  }
+
+  .song-item-select {
+    @apply mr-3 cursor-pointer;
+  }
+
+  .song-item-content-compact {
+    @apply flex-1 flex items-center gap-4;
+
+    &-wrapper {
+      @apply flex-1 min-w-0 flex items-center;
+    }
+
+    &-title {
+      @apply text-sm cursor-pointer text-gray-900 dark:text-white flex items-center;
+    }
+
+    &-artist {
+      @apply w-40 text-sm text-gray-500 dark:text-gray-400 ml-2 flex items-center;
+    }
+
+    &-album {
+      @apply w-32 flex items-center text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    &-duration {
+      @apply w-16 flex items-center text-sm text-gray-500 dark:text-gray-400 text-right;
+    }
+  }
+
+  .song-item-operating-compact {
+    @apply border-none bg-transparent gap-2 flex items-center;
+
+    .song-item-operating-like,
+    .song-item-operating-play,
+    .song-item-operating-menu {
+      @apply transition-opacity duration-200;
+    }
+
+    .song-item-operating-play {
+      @apply w-7 h-7 flex items-center justify-center cursor-pointer rounded-full bg-gray-300 dark:bg-gray-800 border dark:border-gray-700 border-gray-200 text-gray-900 dark:text-white;
+
+      &:hover,
+      &.bg-green-600 {
+        @apply bg-green-500 border-green-500 text-white;
+      }
+
+      .iconfont {
+        @apply text-base;
+      }
+    }
+
+    .song-item-operating-like {
+      @apply mr-1 ml-0 cursor-pointer;
+
+      .iconfont {
+        @apply text-base transition text-gray-500 dark:text-gray-400 hover:text-red-500;
+      }
+      .like-active {
+        @apply text-red-500 dark:text-red-500;
+      }
+    }
+
+    .song-item-operating-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;
+      }
+    }
+
+    .opacity-0 {
+      opacity: 0;
+    }
+  }
+}
+
+// 全局应用
+:deep(.text-ellipsis) {
+  width: 100%;
+}
+</style> 

src/renderer/components/common/songItemCom/ListSongItem.vue

@@ -0,0 +1,190 @@
+<template>
+  <base-song-item
+    :item="item"
+    :selectable="selectable"
+    :selected="selected"
+    :can-remove="canRemove"
+    :is-next="isNext"
+    :index="index"
+    @play="(...args) => $emit('play', ...args)"
+    @select="(...args) => $emit('select', ...args)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
+    class="list-song-item"
+    ref="baseItem"
+  >
+    <!-- 选择框插槽 -->
+    <template #select>
+      <div v-if="baseItem && selectable" class="song-item-select" @click.stop="onToggleSelect">
+        <n-checkbox :checked="selected" />
+      </div>
+    </template>
+    
+    <!-- 图片插槽 -->
+    <template #image>
+      <n-image
+        v-if="item.picUrl"
+        :src="getImgUrl(item.picUrl, '100y100')"
+        class="song-item-img"
+        preview-disabled
+        :img-props="{
+          crossorigin: 'anonymous'
+        }"
+        @load="onImageLoad"
+      />
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template #content>
+      <div class="song-item-content">
+        <div class="song-item-content-wrapper">
+          <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>
+          <n-ellipsis class="song-item-content-name text-ellipsis" line-clamp="1">
+            <template v-for="(artist, index) in artists" :key="index">
+              <span
+                class="cursor-pointer hover:text-green-500"
+                @click.stop="onArtistClick(artist.id)"
+                >{{ artist.name }}</span
+              >
+              <span v-if="index < artists.length - 1"> / </span>
+            </template>
+          </n-ellipsis>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 操作插槽 -->
+    <template #operating>
+      <div class="song-item-operating song-item-operating-list">
+        <div v-if="favorite" class="song-item-operating-like">
+          <i
+            class="iconfont icon-likefill"
+            :class="{ 'like-active': isFavorite }"
+            @click.stop="onToggleFavorite"
+          ></i>
+        </div>
+        <div
+          class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
+          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
+          @click="onPlayMusic"
+        >
+          <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
+          <i v-else class="iconfont icon-playfill"></i>
+        </div>
+      </div>
+    </template>
+  </base-song-item>
+</template>
+
+<script lang="ts" setup>
+import { NCheckbox, NEllipsis, NImage } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { usePlayerStore } from '@/store';
+import BaseSongItem from './BaseSongItem.vue';
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+
+const playerStore = usePlayerStore();
+
+const props = withDefaults(
+  defineProps<{
+    item: SongResult;
+    favorite?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    canRemove?: boolean;
+    isNext?: boolean;
+    index?: number;
+  }>(),
+  {
+    favorite: true,
+    selectable: false,
+    selected: false,
+    canRemove: false,
+    isNext: false,
+    index: undefined
+  }
+);
+
+const emit = defineEmits(['play', 'select', 'remove-song']);
+const baseItem = ref<InstanceType<typeof BaseSongItem>>();
+
+// 从基础组件获取响应式状态
+const play = computed(() => playerStore.isPlay);
+const isPlaying = computed(() => baseItem.value?.isPlaying || false);
+const playLoading = computed(() => baseItem.value?.playLoading || false);
+const isFavorite = computed(() => baseItem.value?.isFavorite || false);
+const artists = computed(() => baseItem.value?.artists || []);
+
+// 包装方法，避免直接访问可能为undefined的ref
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
+const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
+const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
+const onToggleFavorite = (event: Event) => {
+  baseItem.value?.toggleFavorite(event);
+  // 可选：emit 收藏事件
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
+</script>
+
+<style lang="scss" scoped>
+.list-song-item {
+  @apply p-2 rounded-lg mb-2 border dark:border-gray-800 border-gray-200;
+
+  &:hover {
+    @apply bg-gray-50 dark:bg-gray-800;
+  }
+
+  .song-item-img {
+    @apply w-10 h-10 rounded-lg mr-3;
+  }
+
+  .song-item-content {
+    @apply flex items-center flex-1;
+
+    &-wrapper {
+      @apply flex items-center flex-1 text-sm;
+    }
+
+    &-title {
+      @apply flex-shrink-0 max-w-[45%] text-gray-900 dark:text-white;
+    }
+
+    &-divider {
+      @apply mx-2 text-gray-500 dark:text-gray-400;
+    }
+
+    &-name {
+      @apply flex-1 min-w-0 text-gray-500 dark:text-gray-400;
+    }
+  }
+
+  .song-item-operating-list {
+    @apply flex items-center gap-2;
+
+    &-like {
+      @apply cursor-pointer hover:scale-110 transition-transform;
+
+      .iconfont {
+        @apply text-base text-gray-500 dark:text-gray-400 hover:text-red-500;
+      }
+    }
+
+    &-play {
+      @apply w-7 h-7 cursor-pointer hover:scale-110 transition-transform;
+
+      .iconfont {
+        @apply text-base;
+      }
+    }
+  }
+}
+</style> 

src/renderer/components/common/songItemCom/MiniSongItem.vue

@@ -0,0 +1,193 @@
+<template>
+  <base-song-item
+    :item="item"
+    :selectable="selectable"
+    :selected="selected"
+    :can-remove="canRemove"
+    :is-next="isNext"
+    :index="index"
+    @play="(...args) => $emit('play', ...args)"
+    @select="(...args) => $emit('select', ...args)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
+    class="mini-song-item"
+    ref="baseItem"
+  >
+    <!-- 选择框插槽 -->
+    <template #select>
+      <div v-if="baseItem && selectable" class="song-item-select" @click.stop="onToggleSelect">
+        <n-checkbox :checked="selected" />
+      </div>
+    </template>
+    
+    <!-- 图片插槽 -->
+    <template #image>
+      <n-image
+        v-if="item.picUrl"
+        :src="getImgUrl(item.picUrl, '100y100')"
+        class="song-item-img"
+        preview-disabled
+        :img-props="{
+          crossorigin: 'anonymous'
+        }"
+        @load="onImageLoad"
+      />
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template #content>
+      <div class="song-item-content">
+        <div class="song-item-content-title">
+          <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">
+            <template v-for="(artist, index) in artists" :key="index">
+              <span
+                class="cursor-pointer hover:text-green-500"
+                @click.stop="onArtistClick(artist.id)"
+                >{{ artist.name }}</span
+              >
+              <span v-if="index < artists.length - 1"> / </span>
+            </template>
+          </n-ellipsis>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 操作插槽 -->
+    <template #operating>
+      <div class="song-item-operating">
+        <div v-if="favorite" class="song-item-operating-like">
+          <i
+            class="iconfont icon-likefill"
+            :class="{ 'like-active': isFavorite }"
+            @click.stop="onToggleFavorite"
+          ></i>
+        </div>
+        <div
+          class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
+          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
+          @click="onPlayMusic"
+        >
+          <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
+          <i v-else class="iconfont icon-playfill"></i>
+        </div>
+      </div>
+    </template>
+  </base-song-item>
+</template>
+
+<script lang="ts" setup>
+import { NCheckbox, NEllipsis, NImage } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { usePlayerStore } from '@/store';
+import BaseSongItem from './BaseSongItem.vue';
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+
+const playerStore = usePlayerStore();
+
+const props = withDefaults(
+  defineProps<{
+    item: SongResult;
+    favorite?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    canRemove?: boolean;
+    isNext?: boolean;
+    index?: number;
+  }>(),
+  {
+    favorite: true,
+    selectable: false,
+    selected: false,
+    canRemove: false,
+    isNext: false,
+    index: undefined
+  }
+);
+
+const emit = defineEmits(['play', 'select', 'remove-song']);
+const baseItem = ref<InstanceType<typeof BaseSongItem>>();
+
+// 从基础组件获取响应式状态
+const play = computed(() => playerStore.isPlay);
+const isPlaying = computed(() => baseItem.value?.isPlaying || false);
+const playLoading = computed(() => baseItem.value?.playLoading || false);
+const isFavorite = computed(() => baseItem.value?.isFavorite || false);
+const artists = computed(() => baseItem.value?.artists || []);
+
+// 包装方法，避免直接访问可能为undefined的ref
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
+const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
+const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
+const onToggleFavorite = (event: Event) => {
+  baseItem.value?.toggleFavorite(event);
+  // 可选：emit 收藏事件
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
+</script>
+
+<style lang="scss" scoped>
+.mini-song-item {
+  @apply p-2 rounded-2xl;
+
+  &:hover {
+    @apply bg-light-100 dark:bg-dark-100;
+  }
+
+  .song-item-img {
+    @apply w-10 h-10 mr-2 rounded-xl;
+  }
+
+  .song-item-content {
+    @apply flex-1;
+
+    &-title {
+      @apply text-sm text-gray-900 dark:text-white;
+    }
+
+    &-name {
+      @apply text-xs text-gray-500 dark:text-gray-400;
+    }
+  }
+
+  .song-item-operating {
+    @apply flex items-center rounded-full ml-4 pl-2 border dark:border-gray-700 border-gray-200 bg-light dark:bg-black;
+
+    .iconfont {
+      @apply text-base;
+    }
+
+    &-like {
+      @apply mr-1 ml-1 cursor-pointer;
+      
+      .icon-likefill {
+        @apply text-base transition text-gray-500 dark:text-gray-400 hover:text-red-500;
+      }
+      
+      .like-active {
+        @apply text-red-500 dark:text-red-500;
+      }
+    }
+
+    &-play {
+      @apply cursor-pointer rounded-full w-8 h-8 flex justify-center items-center transition
+             border dark:border-gray-700 border-gray-200 text-gray-900 dark:text-white;
+
+      &:hover,
+      &.bg-green-600 {
+        @apply bg-green-500 border-green-500 text-white;
+      }
+    }
+  }
+}
+</style> 

src/renderer/components/common/songItemCom/SongItemDropdown.vue

@@ -0,0 +1,252 @@
+<template>
+  <n-dropdown
+    v-if="isElectron"
+    :show="show"
+    :x="x"
+    :y="y"
+    :options="dropdownOptions"
+    :z-index="99999999"
+    placement="bottom-start"
+    @clickoutside="$emit('update:show', false)"
+    @select="handleSelect"
+    class="rounded-xl"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { MenuOption } from 'naive-ui';
+import { NEllipsis, NImage, NDropdown } from 'naive-ui';
+import { computed, h, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { SongResult } from '@/type/music';
+import { getImgUrl, isElectron } from '@/utils';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  item: SongResult;
+  show: boolean;
+  x: number;
+  y: number;
+  isFavorite: boolean;
+  isDislike: boolean;
+  canRemove?: boolean;
+}>();
+
+const emits = defineEmits([
+  'update:show', 
+  'select', 
+  'play', 
+  'play-next', 
+  'download', 
+  'add-to-playlist', 
+  'toggle-favorite',
+  'toggle-dislike',
+  'remove'
+]);
+
+const openPlaylistDrawer = inject<(songId: number | string) => void>('openPlaylistDrawer');
+
+// 渲染歌曲预览
+const renderSongPreview = () => {
+  return h(
+    'div',
+    {
+      class: 'flex items-center gap-3 px-2 dark:border-gray-800 dark:text-white'
+    },
+    [
+      h(NImage, {
+        src: getImgUrl(props.item.picUrl || props.item.al?.picUrl, '100y100'),
+        class: 'w-10 h-10 rounded-lg flex-shrink-0',
+        previewDisabled: true,
+        imgProps: {
+          crossorigin: 'anonymous'
+        }
+      }),
+      h(
+        'div',
+        {
+          class: 'flex-1 min-w-0 py-1 overflow-hidden'
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'mb-1 overflow-hidden'
+            },
+            [
+              h(
+                NEllipsis,
+                {
+                  lineClamp: 1,
+                  depth: 1,
+                  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 || '未知艺术家';
+                  }
+                }
+              )
+            ]
+          )
+        ]
+      )
+    ]
+  );
+};
+
+// 下拉菜单选项
+const dropdownOptions = computed<MenuOption[]>(() => {
+  const options: MenuOption[] = [
+    {
+      key: 'header',
+      type: 'render',
+      render: renderSongPreview
+    },
+    {
+      key: 'divider1',
+      type: 'divider'
+    },
+    {
+      label: t('songItem.menu.play'),
+      key: 'play',
+      icon: () => h('i', { class: 'iconfont ri-play-circle-line' })
+    },
+    {
+      label: t('songItem.menu.playNext'),
+      key: 'playNext',
+      icon: () => h('i', { class: 'iconfont ri-play-list-2-line' })
+    },
+    {
+      type: 'divider',
+      key: 'd1'
+    },
+    {
+      label: t('songItem.menu.download'),
+      key: 'download',
+      icon: () => h('i', { class: 'iconfont ri-download-line' })
+    },
+    {
+      label: t('songItem.menu.addToPlaylist'),
+      key: 'addToPlaylist',
+      icon: () => h('i', { class: 'iconfont ri-folder-add-line' })
+    },
+    {
+      label: props.isFavorite ? t('songItem.menu.unfavorite') : t('songItem.menu.favorite'),
+      key: 'favorite',
+      icon: () =>
+        h('i', {
+          class: `iconfont ${props.isFavorite ? 'ri-heart-fill text-red-500' : 'ri-heart-line'}`
+        })
+    },
+    {
+      label: props.isDislike ? t('songItem.menu.undislike') : t('songItem.menu.dislike'),
+      key: 'dislike',
+      icon: () => h('i', { class: `iconfont ${props.isDislike ? 'ri-dislike-fill text-green-500': 'ri-dislike-line'}` })
+    },
+  ];
+
+  if (props.canRemove) {
+    options.push(
+      {
+        type: 'divider',
+        key: 'd2'
+      },
+      {
+        label: t('songItem.menu.removeFromPlaylist'),
+        key: 'remove',
+        icon: () => h('i', { class: 'iconfont ri-delete-bin-line' })
+      }
+    );
+  }
+
+  return options;
+});
+
+// 处理选择
+const handleSelect = (key: string | number) => {
+  emits('update:show', false);
+  
+  switch (key) {
+    case 'download':
+      emits('download');
+      break;
+    case 'playNext':
+      emits('play-next');
+      break;
+    case 'addToPlaylist':
+      openPlaylistDrawer?.(props.item.id);
+      break;
+    case 'favorite':
+      emits('toggle-favorite');
+      break;
+    case 'play':
+      emits('play');
+      break;
+    case 'remove':
+      emits('remove', props.item.id);
+      break;
+    case 'dislike':
+      emits('toggle-dislike');
+      break;
+    default:
+      break;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.n-dropdown-menu) {
+  @apply min-w-[240px] overflow-hidden rounded-lg border dark:border-gray-800;
+
+  .n-dropdown-option {
+    @apply h-9 text-sm;
+
+    &:hover {
+      @apply bg-gray-100 dark:bg-gray-800;
+    }
+
+    .n-dropdown-option-body {
+      @apply h-full;
+
+      .n-dropdown-option-body__prefix {
+        @apply w-8 flex justify-center items-center;
+
+        .iconfont {
+          @apply text-base;
+        }
+      }
+    }
+  }
+
+  .n-dropdown-divider {
+    @apply my-1;
+  }
+}
+
+:deep(.n-dropdown-option-body--render) {
+  @apply p-0;
+}
+</style> 

src/renderer/components/common/songItemCom/StandardSongItem.vue

@@ -0,0 +1,214 @@
+<template>
+  <base-song-item
+    :item="item"
+    :selectable="selectable"
+    :selected="selected"
+    :can-remove="canRemove"
+    :is-next="isNext"
+    :index="index"
+    @play="(...args) => $emit('play', ...args)"
+    @select="(...args) => $emit('select', ...args)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
+    class="standard-song-item"
+    ref="baseItem"
+  >
+    <!-- 选择框插槽 -->
+    <template #select>
+      <div v-if="baseItem && selectable" class="song-item-select" @click.stop="onToggleSelect">
+        <n-checkbox :checked="selected" />
+      </div>
+    </template>
+    
+    <!-- 图片插槽 -->
+    <template #image>
+      <n-image
+        v-if="item.picUrl"
+        :src="getImgUrl(item.picUrl, '100y100')"
+        class="song-item-img"
+        preview-disabled
+        :img-props="{
+          crossorigin: 'anonymous'
+        }"
+        @load="onImageLoad"
+      />
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template #content>
+      <div class="song-item-content">
+        <div class="song-item-content-title">
+          <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">
+            <template v-for="(artist, index) in artists" :key="index">
+              <span
+                class="cursor-pointer hover:text-green-500"
+                @click.stop="onArtistClick(artist.id)"
+                >{{ artist.name }}</span
+              >
+              <span v-if="index < artists.length - 1"> / </span>
+            </template>
+          </n-ellipsis>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 操作插槽 -->
+    <template #operating>
+      <div class="song-item-operating">
+        <div v-if="favorite" class="song-item-operating-like">
+          <i
+            class="iconfont icon-likefill"
+            :class="{ 'like-active': isFavorite }"
+            @click.stop="onToggleFavorite"
+          ></i>
+        </div>
+        <n-tooltip v-if="isNext" trigger="hover" :z-index="9999999" :delay="400">
+          <template #trigger>
+            <div class="song-item-operating-next" @click.stop="onPlayNext">
+              <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 }"
+          @click="onPlayMusic"
+        >
+          <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
+          <i v-else class="iconfont icon-playfill"></i>
+        </div>
+      </div>
+    </template>
+  </base-song-item>
+</template>
+
+<script lang="ts" setup>
+import { NCheckbox, NEllipsis, NImage, NTooltip } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { usePlayerStore } from '@/store';
+import BaseSongItem from './BaseSongItem.vue';
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+const props = withDefaults(
+  defineProps<{
+    item: SongResult;
+    favorite?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    canRemove?: boolean;
+    isNext?: boolean;
+    index?: number;
+  }>(),
+  {
+    favorite: true,
+    selectable: false,
+    selected: false,
+    canRemove: false,
+    isNext: false,
+    index: undefined
+  }
+);
+
+const emit = defineEmits(['play', 'select', 'remove-song']);
+const baseItem = ref<InstanceType<typeof BaseSongItem>>();
+
+// 从playerStore和baseItem获取响应式状态
+const play = computed(() => playerStore.isPlay);
+const isPlaying = computed(() => baseItem.value?.isPlaying || false);
+const playLoading = computed(() => baseItem.value?.playLoading || false);
+const isFavorite = computed(() => baseItem.value?.isFavorite || false);
+const artists = computed(() => baseItem.value?.artists || []);
+
+// 包装方法，避免直接访问可能为undefined的ref
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
+const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
+const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
+const onToggleFavorite = (event: Event) => {
+  baseItem.value?.toggleFavorite(event);
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
+const onPlayNext = () => {
+  baseItem.value?.handlePlayNext();
+};
+</script>
+
+<style lang="scss" scoped>
+.standard-song-item {
+  &:hover {
+    @apply bg-light-100 dark:bg-dark-100;
+  }
+
+  .song-item-img {
+    @apply w-12 h-12 rounded-2xl mr-4;
+  }
+
+  .song-item-content {
+    @apply flex-1;
+
+    &-title {
+      @apply text-base text-gray-900 dark:text-white;
+    }
+
+    &-name {
+      @apply text-xs text-gray-500 dark:text-gray-400;
+    }
+  }
+
+  .song-item-operating {
+    @apply flex items-center rounded-full ml-4 border dark:border-gray-700 border-gray-200 bg-light dark:bg-black;
+
+    .iconfont {
+      @apply text-xl;
+    }
+
+    .icon-likefill {
+      @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-red-500;
+    }
+
+    &-like {
+      @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;
+    }
+
+    &-play {
+      @apply cursor-pointer rounded-full w-10 h-10 flex justify-center items-center transition
+             border dark:border-gray-700 border-gray-200 text-gray-900 dark:text-white;
+
+      &:hover,
+      &.bg-green-600 {
+        @apply bg-green-500 border-green-500 text-white;
+      }
+    }
+  }
+
+  .song-item-select {
+    @apply mr-3 cursor-pointer;
+  }
+}
+</style> 

src/renderer/components/home/TopBanner.vue

@@ -31,7 +31,7 @@
 
               <div class="mt-2">
                 <p
-                  v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
+                  v-for="item in getDisplayDaySongs.slice(0, 5)"
                   :key="item.id"
                   class="text-el"
                 >
@@ -250,13 +250,16 @@ const loadArtistData = async () => {
 // 加载不需要登录的数据
 const loadNonUserData = async () => {
   try {
-
-        // 获取每日推荐
-        try {
+    // 获取每日推荐
+    try {
       const {
         data: { data: dayRecommend }
       } = await getDayRecommend();
-      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
+      const dayRecommendSource = dayRecommend as unknown as IDayRecommend;
+      dayRecommendData.value = {
+        ...dayRecommendSource,
+        dailySongs: dayRecommendSource.dailySongs.filter((song: any) =>!playerStore.dislikeList.includes(song.id))
+      };
     } catch (error) {
       console.error('获取每日推荐失败:', error);
     }
@@ -288,6 +291,12 @@ const loadUserData = async () => {
 const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
+const getDisplayDaySongs = computed(() => {
+  if(!dayRecommendData.value){
+    return [];
+  }
+  return dayRecommendData.value.dailySongs.filter((song) => !playerStore.dislikeList.includes(song.id));
+})
 
 const showDayRecommend = () => {
   if (!dayRecommendData.value?.dailySongs) return;
@@ -295,7 +304,7 @@ const showDayRecommend = () => {
   navigateToMusicList(router, {
     type: 'dailyRecommend',
     name: t('comp.recommendSinger.songlist'),
-    songList: dayRecommendData.value.dailySongs,
+    songList: getDisplayDaySongs.value,
     canRemove: false
   });
 };

src/renderer/components/player/AdvancedControlsPopover.vue

@@ -0,0 +1,251 @@
+<template>
+  <n-dropdown 
+    :show="showDropdown" 
+    :options="dropdownOptions" 
+    trigger="hover" 
+    :z-index="9999999"
+    @select="handleSelect"
+    placement="top"
+    @update:show="(show) => showDropdown = show"
+  >
+    <n-tooltip trigger="hover" :z-index="9999999">
+      <template #trigger>
+        <div class="advanced-controls-btn">
+          <i class="iconfont ri-settings-3-line"></i>
+          
+          <!-- 激活状态的小标记 -->
+          <div v-if="hasActiveSettings" class="active-indicator">
+            <span v-if="hasActiveSleepTimer" class="timer-badge">
+              <i class="ri-time-line"></i>
+            </span>
+          </div>
+        </div>
+      </template>
+      {{ t('player.playBar.advancedControls') }}
+    </n-tooltip>
+  </n-dropdown>
+
+  <!-- EQ 均衡器弹窗 -->
+  <n-modal v-model:show="showEQModal" :mask-closable="true" :unstable-show-mask="false">
+    <div class="eq-modal-content">
+      <div class="modal-close" @click="showEQModal = false">
+        <i class="ri-close-line"></i>
+      </div>
+      <eq-control />
+    </div>
+  </n-modal>
+
+  <!-- 定时关闭弹窗 -->
+  <n-modal v-model:show="playerStore.showSleepTimer" :mask-closable="true" :unstable-show-mask="false">
+    <div class="timer-modal-content">
+      <div class="modal-close" @click="playerStore.showSleepTimer = false">
+        <i class="ri-close-line"></i>
+      </div>
+      <sleep-timer />
+    </div>
+  </n-modal>
+
+  <!-- 播放速度设置弹窗 -->
+  <n-modal v-model:show="showSpeedModal" :mask-closable="true" :unstable-show-mask="false">
+    <div class="speed-modal-content">
+      <div class="modal-close" @click="showSpeedModal = false">
+        <i class="ri-close-line"></i>
+      </div>
+      <h3>{{ t('player.playBar.playbackSpeed') }}</h3>
+      <div class="speed-options">
+        <div 
+          v-for="option in playbackRateOptions" 
+          :key="option.key"
+          class="speed-option"
+          :class="{ 'active': playbackRate === option.key }"
+          @click="selectSpeed(option.key)"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DropdownOption } from 'naive-ui';
+import { usePlayerStore } from '@/store/modules/player';
+import EqControl from '@/components/EQControl.vue';
+import SleepTimer from '@/components/player/SleepTimer.vue';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+// 下拉菜单状态
+const showDropdown = ref(false);
+const showEQModal = ref(false);
+const showSpeedModal = ref(false);
+const isEQVisible = ref(false);
+
+// 播放速度状态
+const playbackRate = computed(() => playerStore.playbackRate);
+
+
+// 播放速度选项
+const playbackRateOptions = [
+  { label: '0.5x', key: 0.5 },
+  { label: '0.75x', key: 0.75 },
+  { label: '1.0x', key: 1.0 },
+  { label: '1.25x', key: 1.25 },
+  { label: '1.5x', key: 1.5 },
+  { label: '2.0x', key: 2.0 }
+];
+
+// 是否有激活的睡眠定时器
+const hasActiveSleepTimer = computed(() => playerStore.hasSleepTimerActive);
+
+// 检查是否有任何高级设置是激活状态
+const hasActiveSettings = computed(() => {
+  return playbackRate.value !== 1.0 || hasActiveSleepTimer.value || isEQVisible.value;
+});
+
+// 下拉菜单选项
+const dropdownOptions = computed<DropdownOption[]>(() => [
+  {
+    label: t('player.playBar.eq'),
+    key: 'eq',
+    icon: () => h('i', { class: 'ri-equalizer-line' })
+  },
+  {
+    label: t('player.sleepTimer.title'),
+    key: 'timer',
+    icon: () => h('i', { class: 'ri-timer-line' }),
+    // 如果有激活的定时器，添加标记
+    suffix: () => hasActiveSleepTimer.value ? h('span', { class: 'active-option-mark' }) : null
+  },
+  {
+    label: t('player.playBar.playbackSpeed') + `(${playbackRate.value}x)`,
+    key: 'speed',
+    icon: () => h('i', { class: 'ri-speed-line' }),
+    // 如果播放速度不是1.0，添加标记
+    suffix: () => playbackRate.value !== 1.0 ? h('span', { class: 'active-option-mark' }, `${playbackRate.value}x`) : null
+  }
+]);
+
+// 处理菜单选择
+const handleSelect = (key: string) => {
+  switch (key) {
+    case 'eq':
+      showEQModal.value = true;
+      break;
+    case 'timer':
+      playerStore.showSleepTimer = true;
+      break;
+    case 'speed':
+      showSpeedModal.value = true;
+      break;
+  }
+};
+
+// 选择播放速度
+const selectSpeed = (speed: number) => {
+  playerStore.setPlaybackRate(speed);
+  showSpeedModal.value = false;
+};
+
+</script>
+
+<style lang="scss" scoped>
+.sleep-timer-countdown {
+  @apply fixed top-0 left-1/2 transform -translate-x-1/2 py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+  z-index: 9998;
+  min-width: 80px;
+  text-align: center;
+  animation: fadeInDown 0.3s ease-out;
+  
+  @keyframes fadeInDown {
+    from {
+      transform: translate(-50%, -100%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, 0);
+      opacity: 1;
+    }
+  }
+  
+  span {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+}
+
+.advanced-controls-btn {
+  @apply cursor-pointer mx-3 relative;
+  
+  .iconfont {
+    @apply text-2xl transition;
+    @apply hover:text-green-500;
+  }
+  
+  .active-indicator {
+    @apply absolute -top-1 -right-1 flex;
+    
+    .timer-badge, .speed-badge {
+      @apply flex items-center justify-center text-xs bg-green-500 text-white rounded-full;
+      height: 16px;
+      min-width: 16px;
+      padding: 0 3px;
+      font-weight: 600;
+      font-size: 10px;
+      
+      i {
+        font-size: 10px;
+      }
+    }
+    
+    .timer-badge + .speed-badge {
+      @apply -ml-2 z-10;
+    }
+  }
+}
+
+.eq-modal-content,
+.timer-modal-content,
+.speed-modal-content {
+  @apply p-6 rounded-3xl bg-white dark:bg-dark;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.speed-modal-content {
+  h3 {
+    @apply text-lg font-medium mb-4 text-center;
+  }
+
+  .speed-options {
+    @apply flex flex-wrap justify-center gap-4 my-8 mx-4;
+
+    .speed-option {
+      @apply py-2 px-4 rounded-full cursor-pointer transition-all;
+      @apply bg-gray-100 dark:bg-gray-800;
+      @apply hover:bg-green-100 dark:hover:bg-green-900;
+
+      &.active {
+        @apply bg-green-500 text-white;
+      }
+    }
+  }
+}
+
+.active-option-mark {
+  @apply ml-2 text-xs bg-green-500 text-white py-0.5 px-1.5 rounded-full;
+  font-weight: 500;
+}
+
+.modal-close {
+  @apply absolute top-4 right-4 cursor-pointer hover:text-green-500;
+  i {
+    @apply text-2xl;
+  }
+}
+</style> 

src/renderer/components/player/MiniPlayBar.vue

@@ -52,7 +52,7 @@
           ></i>
         </div>
 
-        <n-popover trigger="hover" :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>
             <div class="function-button" @click="mute">
               <i class="iconfont" :class="getVolumeIcon"></i>
@@ -312,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();

src/renderer/components/player/MobilePlayBar.vue

@@ -89,7 +89,7 @@
       </div>
 
       <!-- 定时关闭按钮 -->
-      <SleepTimerPopover mode="mobile" />
+      <!-- <SleepTimerPopover mode="mobile" /> -->
     </template>
 
     <!-- Mini模式 - 在musicFullVisible为false时显示 -->
@@ -155,10 +155,8 @@ import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 
 import SongItem from '@/components/common/SongItem.vue';
-import SleepTimerPopover from '@/components/player/SleepTimerPopover.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';
@@ -235,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

@@ -56,10 +56,13 @@
       </div>
     </div>
     <div class="music-content">
-      <div class="music-content-title">
+      <div class="music-content-title flex items-center">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
           {{ playMusic.name }}
         </n-ellipsis>
+        <span v-if="playbackRate !== 1.0" class="playback-rate-badge">
+            {{ playbackRate }}x
+        </span>
       </div>
       <div class="music-content-name">
         <n-ellipsis
@@ -93,11 +96,12 @@
       </div>
     </div>
     <div class="audio-button">
-      <div class="audio-volume custom-slider">
+      <div class="audio-volume custom-slider" @wheel.prevent="handleVolumeWheel">
         <div class="volume-icon" @click="mute">
           <i class="iconfont" :class="getVolumeIcon"></i>
         </div>
         <div class="volume-slider">
+          <div class="volume-percentage">{{ Math.round(volumeSlider) }}%</div>
           <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false" vertical></n-slider>
         </div>
       </div>
@@ -133,64 +137,16 @@
         </template>
         {{ t('player.playBar.reparse') }}
       </n-tooltip>
-      <n-popover
-        v-if="isElectron"
-        trigger="click"
-        :z-index="99999999"
-        content-class="music-eq"
-        raw
-        :show-arrow="false"
-        :delay="200"
-        placement="top"
-      >
+      
+      <!-- 高级控制菜单按钮（整合了 EQ、定时关闭、播放速度） -->
+      <advanced-controls-popover />
+      
+      <n-tooltip trigger="hover" :z-index="9999999">
         <template #trigger>
-          <n-tooltip trigger="hover" :z-index="9999999">
-            <template #trigger>
-              <i class="iconfont ri-equalizer-line" :class="{ 'text-green-500': isEQVisible }"></i>
-            </template>
-            {{ t('player.playBar.eq') }}
-          </n-tooltip>
+          <i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
         </template>
-        <eq-control />
-      </n-popover>
-      <!-- 定时关闭功能 -->
-      <sleep-timer-popover mode="desktop" />
-      <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"
-      >
-        <template #trigger>
-          <n-tooltip trigger="manual" :z-index="9999999">
-            <template #trigger>
-              <i class="iconfont icon-list"></i>
-            </template>
-            {{ t('player.playBar.playList') }}
-          </n-tooltip>
-        </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" />
@@ -200,12 +156,8 @@
 <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,
@@ -221,11 +173,12 @@ import MusicFull from '@/layout/components/MusicFull.vue';
 import { audioService } from '@/services/audioService';
 import { 
   isBilibiliIdMatch, 
-  usePlayerStore 
+  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';
+import AdvancedControlsPopover from '@/components/player/AdvancedControlsPopover.vue';
+import { storeToRefs } from 'pinia';
 
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -233,8 +186,6 @@ const { t } = useI18n();
 const message = useMessage();
 // 是否播放
 const play = computed(() => playerStore.isPlay);
-// 播放列表
-const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');
 
@@ -326,6 +277,14 @@ const mute = () => {
   }
 };
 
+// 鼠标滚轮调整音量
+const handleVolumeWheel = (e: WheelEvent) => {
+  // 向上滚动增加音量，向下滚动减少音量
+  const delta = e.deltaY < 0 ? 5 : -5;
+  const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
+  volumeSlider.value = newValue;
+};
+
 // 播放模式
 const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
@@ -353,6 +312,8 @@ const playModeText = computed(() => {
   }
 });
 
+// 播放速度控制
+const {playbackRate} = storeToRefs(playerStore);
 // 切换播放模式
 const togglePlayMode = () => {
   playerStore.togglePlayMode();
@@ -372,42 +333,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'));
   }
 };
@@ -423,15 +354,6 @@ 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(() => {
   // 对于B站视频，使用ID匹配函数
   if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
@@ -473,25 +395,9 @@ 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>
 
@@ -517,7 +423,7 @@ const handleDeleteSong = (song: SongResult) => {
   }
 
   .music-content {
-    width: 160px;
+    width: 200px;
     @apply ml-4;
 
     &-title {
@@ -579,6 +485,12 @@ const handleDeleteSong = (song: SongResult) => {
     @apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 rounded-xl;
     @apply bg-light dark:bg-gray-800;
     @apply border border-gray-200 dark:border-gray-700;
+    
+    .volume-percentage {
+      @apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-gray-800 px-2 py-1 rounded-md;
+      @apply border border-gray-200 dark:border-gray-700;
+      white-space: nowrap;
+    }
   }
 }
 
@@ -789,4 +701,31 @@ const handleDeleteSong = (song: SongResult) => {
   color: white;
   animation: spin 1s linear infinite;
 }
+
+.play-speed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 8px;
+}
+
+.speed-button {
+  font-size: 14px;
+  color: var(--text-color);
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--hover-color);
+}
+
+.speed-button:hover {
+  background: var(--hover-color-dark);
+}
+
+
+.playback-rate-badge {
+  @apply ml-2 px-1.5 h-4 flex items-center text-xs rounded bg-green-500 bg-opacity-15 text-green-600 dark:text-green-400;
+  font-weight: 500;
+  vertical-align: 1px;
+}
 </style>

src/renderer/components/player/PlayingListDrawer.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

@@ -84,12 +84,12 @@ const isReparse = computed(() => {
 
 // 可选音源列表
 const musicSourceOptions = ref([
-  { label: 'MiGu音乐', value: 'migu' as Platform },
-  { label: '酷狗音乐', value: 'kugou' as Platform },
+  { label: 'MiGu', value: 'migu' as Platform },
+  { label: 'KuGou', value: 'kugou' as Platform },
   { label: 'pyncmd', value: 'pyncmd' as Platform },
-  { label: '酷我音乐', value: 'kuwo' as Platform },
-  { label: 'Bilibili音乐', value: 'bilibili' as Platform },
-  { label: 'GD音乐台', value: 'gdmusic' as Platform }
+  { label: 'KuWo', value: 'kuwo' as Platform },
+  { label: 'Bilibili', value: 'bilibili' as Platform },
+  { label: 'GdMuisc', value: 'gdmusic' as Platform }
 ]);
 
 // 检查音源是否被选中

src/renderer/components/player/SleepTimer.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="sleep-timer-content">
+    <h3 class="timer-title">{{ t('player.sleepTimer.title') }}</h3>
+    
+    <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>
+        </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>
+</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';
+
+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 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>
+.sleep-timer-content {
+  @apply w-full p-4;
+
+  .timer-title {
+    @apply text-lg font-medium mb-4 text-center;
+  }
+
+  // 激活状态显示
+  .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;
+          }
+
+          // 设置按钮
+          .custom-time-btn, .custom-songs-btn {
+            @apply py-2 px-4 rounded-full transition-all duration-200;
+          }
+        }
+      }
+    }
+
+    // 播放列表结束选项
+    .playlist-end-section {
+      @apply mt-2;
+
+      .playlist-end-btn {
+        @apply py-3 text-base rounded-full transition-all duration-200;
+      }
+    }
+  }
+}
+</style> 

src/renderer/components/player/SleepTimerPopover.vue

@@ -1,478 +0,0 @@
-<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/player/SleepTimerTop.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <!-- 定时关闭倒计时显示区域 -->
+    <div v-if="hasActiveSleepTimer" class="sleep-timer-countdown" @click="handleShowTimer">
+      <i class="iconfont ri-time-line mr-1"></i>
+      <span>{{ formattedRemainingTime }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { usePlayerStore } from '@/store/modules/player';
+
+const { t } = useI18n();
+// 定时器状态
+const playerStore = usePlayerStore();
+const { sleepTimer } = storeToRefs(playerStore);
+const hasActiveSleepTimer = computed(() => playerStore.hasSleepTimerActive);
+const refreshTrigger = ref(0);
+
+// 检查定时器是否已结束
+const checkTimerExpired = () => {
+  if (sleepTimer.value.type === 'time' && sleepTimer.value.endTime) {
+    const now = Date.now();
+    if (now >= sleepTimer.value.endTime) {
+      playerStore.clearSleepTimer();
+    }
+  }
+}
+
+// 在组件挂载时检查定时器状态
+onMounted(() => {
+  checkTimerExpired();
+});
+
+
+// 倒计时显示
+const formattedRemainingTime = computed(() => {
+  // 依赖刷新触发器强制更新
+  void refreshTrigger.value;
+  
+  if (sleepTimer.value.type !== 'time' || !sleepTimer.value.endTime) {
+    if (sleepTimer.value.type === 'songs' && sleepTimer.value.remainingSongs) {
+      return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs });
+    }
+    if (sleepTimer.value.type === 'end') {
+      return t('player.sleepTimer.activeUntilEnd');
+    }
+    return '';
+  }
+  
+  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);
+  
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  } else {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+});
+
+// 监听剩余时间变化
+let timerUpdateInterval: number | null = null;
+
+watch(
+  () => hasActiveSleepTimer.value,
+  (newHasTimer) => {
+    if (newHasTimer && sleepTimer.value.type === 'time') {
+      startTimerUpdate();
+    } else if (!newHasTimer) {
+      stopTimerUpdate();
+    }
+  },
+  { immediate: true }
+);
+
+// 启动定时器更新UI
+function startTimerUpdate() {
+  stopTimerUpdate(); // 先停止之前的计时器
+  
+  // 每秒更新UI
+  timerUpdateInterval = window.setInterval(() => {
+    // 更新刷新触发器，强制重新计算
+    refreshTrigger.value = Date.now();
+  }, 1000) as unknown as number;
+}
+
+// 停止定时器更新UI
+function stopTimerUpdate() {
+  if (timerUpdateInterval) {
+    clearInterval(timerUpdateInterval);
+    timerUpdateInterval = null;
+  }
+}
+
+const handleShowTimer = () => {
+  playerStore.showSleepTimer = !playerStore.showSleepTimer;
+};
+
+// 播放器卸载时清除定时器
+onUnmounted(() => {
+  stopTimerUpdate();
+});
+</script>
+
+<style lang="scss" scoped>
+
+.sleep-timer-countdown {
+  @apply fixed top-[28px] left-1/2 transform -translate-x-1/2 -translate-y-full py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center hover:scale-110 transition-all cursor-pointer;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+  z-index: 9998;
+  min-width: 80px;
+  text-align: center;
+  animation: fadeInDown 0.3s ease-out;
+  -webkit-app-region: no-drag;
+  
+  @keyframes fadeInDown {
+    from {
+      transform: translate(-50%, -150%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -100%);
+      opacity: 1;
+    }
+  }
+  
+  span {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+}
+</style>

src/renderer/hooks/MusicHook.ts

@@ -9,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;
 
@@ -905,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) {

src/renderer/hooks/useDownload.ts

@@ -0,0 +1,173 @@
+import { cloneDeep } from 'lodash';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessage } from 'naive-ui';
+
+import { getSongUrl } from '@/store/modules/player';
+import type { SongResult } from '@/type/music';
+
+export const useDownload = () => {
+  const { t } = useI18n();
+  const message = useMessage();
+  const isDownloading = ref(false);
+
+  /**
+   * 下载单首音乐
+   * @param song 歌曲信息
+   * @returns Promise<void>
+   */
+  const downloadMusic = async (song: SongResult) => {
+    if (isDownloading.value) {
+      message.warning(t('songItem.message.downloading'));
+      return;
+    }
+
+    try {
+      isDownloading.value = true;
+
+      const musicUrl = (await getSongUrl(song.id as number, cloneDeep(song), true)) as any;
+      if (!musicUrl) {
+        throw new Error(t('songItem.message.getUrlFailed'));
+      }
+
+      // 构建文件名
+      const artistNames = (song.ar || song.song?.artists)?.map((a) => a.name).join(',');
+      const filename = `${song.name} - ${artistNames}`;
+
+      const songData = cloneDeep(song);
+      songData.ar = songData.ar || songData.song?.artists;
+      // 发送下载请求
+      window.electron.ipcRenderer.send('download-music', {
+        url: typeof musicUrl === 'string' ? musicUrl : musicUrl.url,
+        filename,
+        songInfo: {
+          ...songData,
+          downloadTime: Date.now()
+        }
+      });
+
+      message.success(t('songItem.message.downloadQueued'));
+
+      // 监听下载完成事件
+      const handleDownloadComplete = (_, result) => {
+        if (result.filename === filename) {
+          isDownloading.value = false;
+          removeListeners();
+        }
+      };
+
+      // 监听下载错误事件
+      const handleDownloadError = (_, result) => {
+        if (result.filename === filename) {
+          isDownloading.value = false;
+          removeListeners();
+        }
+      };
+
+      // 移除监听器函数
+      const removeListeners = () => {
+        window.electron.ipcRenderer.removeListener('music-download-complete', handleDownloadComplete);
+        window.electron.ipcRenderer.removeListener('music-download-error', handleDownloadError);
+      };
+
+      // 添加事件监听器
+      window.electron.ipcRenderer.once('music-download-complete', handleDownloadComplete);
+      window.electron.ipcRenderer.once('music-download-error', handleDownloadError);
+
+      // 30秒后自动清理监听器（以防下载过程中出现未知错误）
+      setTimeout(removeListeners, 30000);
+    } catch (error: any) {
+      console.error('Download error:', error);
+      isDownloading.value = false;
+      message.error(error.message || t('songItem.message.downloadFailed'));
+    }
+  };
+
+  /**
+   * 批量下载音乐
+   * @param songs 歌曲列表
+   * @returns Promise<void>
+   */
+  const batchDownloadMusic = async (songs: SongResult[]) => {
+    if (isDownloading.value) {
+      message.warning(t('favorite.downloading'));
+      return;
+    }
+
+    if (songs.length === 0) {
+      message.warning(t('favorite.selectSongsFirst'));
+      return;
+    }
+
+    try {
+      isDownloading.value = true;
+      message.success(t('favorite.downloading'));
+
+      // 移除旧的监听器
+      window.electron.ipcRenderer.removeAllListeners('music-download-complete');
+
+      let successCount = 0;
+      let failCount = 0;
+
+      // 添加新的监听器
+      window.electron.ipcRenderer.on('music-download-complete', (_, result) => {
+        if (result.success) {
+          successCount++;
+        } else {
+          failCount++;
+        }
+
+        // 当所有下载完成时
+        if (successCount + failCount === songs.length) {
+          isDownloading.value = false;
+          message.success(t('favorite.downloadSuccess'));
+          window.electron.ipcRenderer.removeAllListeners('music-download-complete');
+        }
+      });
+
+      // 并行获取所有歌曲的下载链接
+      const downloadUrls = await Promise.all(
+        songs.map(async (song) => {
+          try {
+            const data = (await getSongUrl(song.id, song, true)) as any;
+            return { song, ...data };
+          } catch (error) {
+            console.error(`获取歌曲 ${song.name} 下载链接失败:`, error);
+            return { song, url: null };
+          }
+        })
+      );
+
+      // 开始下载有效的链接
+      downloadUrls.forEach(({ song, url, type }) => {
+        if (!url) {
+          failCount++;
+          return;
+        }
+        const songData = cloneDeep(song);
+        const songInfo = {
+          ...songData,
+          ar: songData.ar || songData.song?.artists,
+          downloadTime: Date.now()
+        };
+        window.electron.ipcRenderer.send('download-music', {
+          url,
+          filename: `${song.name} - ${(song.ar || song.song?.artists)?.map((a) => a.name).join(',')}`,
+          songInfo,
+          type
+        });
+      });
+    } catch (error) {
+      console.error('下载失败:', error);
+      isDownloading.value = false;
+      message.destroyAll();
+      message.error(t('favorite.downloadFailed'));
+    }
+  };
+
+  return {
+    isDownloading,
+    downloadMusic,
+    batchDownloadMusic
+  };
+};

src/renderer/hooks/useSongItem.ts

@@ -0,0 +1,188 @@
+import { usePlayerStore } from '@/store';
+import type { SongResult } from '@/type/music';
+import { computed, ref } from 'vue';
+import { getImgUrl } from '@/utils';
+import { getImageBackground } from '@/utils/linearColor';
+import { useMessage, useDialog } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
+import { useDownload } from './useDownload';
+import { useArtist } from './useArtist';
+
+export function useSongItem(props: {
+  item: SongResult;
+  canRemove?: boolean;
+}) {
+  const { t } = useI18n();
+  const playerStore = usePlayerStore();
+  const message = useMessage();
+  const dialog = useDialog();
+  const { downloadMusic } = useDownload();
+  const { navigateToArtist } = useArtist();
+  
+  // 状态变量
+  const showDropdown = ref(false);
+  const dropdownX = ref(0);
+  const dropdownY = ref(0);
+  const isHovering = ref(false);
+  
+  // 计算属性
+  const play = computed(() => playerStore.isPlay);
+  const playMusic = computed(() => playerStore.playMusic);
+  const playLoading = computed(
+    () => playMusic.value.id === props.item.id && playMusic.value.playLoading
+  );
+  const isPlaying = computed(() => playMusic.value.id === props.item.id);
+  
+  // 收藏与不喜欢状态
+  const isFavorite = computed(() => {
+    const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+    return playerStore.favoriteList.includes(numericId);
+  });
+  
+  const isDislike = computed(() => {
+    const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+    return playerStore.dislikeList.includes(numericId);
+  });
+  
+  // 获取艺术家列表
+  const artists = computed(() => {
+    return (props.item.ar || props.item.song?.artists)?.slice(0, 4) || [];
+  });
+
+  // 处理图片加载
+  const handleImageLoad = async (imageElement: HTMLImageElement) => {
+    if (!imageElement) return;
+    
+    const { backgroundColor } = await getImageBackground(imageElement);
+    // eslint-disable-next-line vue/no-mutating-props
+    props.item.backgroundColor = backgroundColor;
+  };
+  
+  // 播放音乐
+  const playMusicEvent = async (item: SongResult) => {
+    try {
+      const result = await playerStore.setPlay(item);
+      if (!result) {
+        throw new Error('播放失败');
+      }
+      return true;
+    } catch (error) {
+      console.error('播放出错:', error);
+      return false;
+    }
+  };
+  
+  // 切换收藏状态
+  const toggleFavorite = async (e: Event) => {
+    e && e.stopPropagation();
+    const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+
+    if (isFavorite.value) {
+      playerStore.removeFromFavorite(numericId);
+    } else {
+      playerStore.addToFavorite(numericId);
+    }
+  };
+  
+  // 切换不喜欢状态
+  const toggleDislike = async (e: Event) => {
+    e && e.stopPropagation();
+    if (isDislike.value) {
+      playerStore.removeFromDislikeList(props.item.id);
+      return;
+    }
+    
+    dialog.warning({
+      title: t('songItem.dialog.dislike.title'),
+      content: t('songItem.dialog.dislike.content'),
+      positiveText: t('songItem.dialog.dislike.positiveText'),
+      negativeText: t('songItem.dialog.dislike.negativeText'),
+      onPositiveClick: () => {
+        playerStore.addToDislikeList(props.item.id);
+      }
+    });
+  };
+  
+  // 添加到下一首播放
+  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 handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    showDropdown.value = true;
+    dropdownX.value = e.clientX;
+    dropdownY.value = e.clientY;
+  };
+  
+  // 处理菜单点击
+  const handleMenuClick = (e: MouseEvent) => {
+    e.preventDefault();
+    showDropdown.value = true;
+    dropdownX.value = e.clientX;
+    dropdownY.value = e.clientY;
+  };
+  
+  // 处理艺术家点击
+  const handleArtistClick = (id: number) => {
+    navigateToArtist(id);
+  };
+  
+  // 鼠标悬停处理
+  const handleMouseEnter = () => {
+    isHovering.value = true;
+  };
+  
+  const handleMouseLeave = () => {
+    isHovering.value = false;
+  };
+
+  return {
+    t,
+    play,
+    playMusic,
+    playLoading,
+    isPlaying,
+    isFavorite,
+    isDislike,
+    artists,
+    showDropdown,
+    dropdownX, 
+    dropdownY,
+    isHovering,
+    playerStore,
+    message,
+    getImgUrl,
+    handleImageLoad,
+    playMusicEvent,
+    toggleFavorite,
+    toggleDislike,
+    handlePlayNext,
+    getDuration,
+    formatDuration,
+    handleContextMenu,
+    handleMenuClick,
+    handleArtistClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    downloadMusic
+  };
+} 

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>
@@ -37,19 +37,22 @@
           :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
         />
       </template>
-      <!-- 下载管理抽屉 -->
-      <download-drawer
-        v-if="
-          isElectron &&
-          (settingsStore.setData?.alwaysShowDownloadButton ||
-            settingsStore.showDownloadDrawer ||
-            settingsStore.setData?.hasDownloadingTasks)
-        "
-      />
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
     <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
+    <SleepTimerTop v-if="!isMobile"/>
+    <!-- 下载管理抽屉 -->
+    <download-drawer
+      v-if="
+        isElectron &&
+        (settingsStore.setData?.alwaysShowDownloadButton ||
+          settingsStore.showDownloadDrawer ||
+          settingsStore.setData?.hasDownloadingTasks)
+      "
+    />
+    <!-- 播放列表抽屉 -->
+    <playing-list-drawer />
   </div>
 </template>
 
@@ -67,6 +70,7 @@ import { useMenuStore } from '@/store/modules/menu';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isMobile } from '@/utils';
+import SleepTimerTop from '@/components/player/SleepTimerTop.vue';
 
 const keepAliveInclude = computed(() => {
   const allRoutes = [...homeRouter, ...otherRouter];
@@ -88,7 +92,7 @@ const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.v
 const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
-
+const PlayingListDrawer = defineAsyncComponent(() => import('@/components/player/PlayingListDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
 
 const playerStore = usePlayerStore();
@@ -108,9 +112,9 @@ const showPlaylistDrawer = ref(false);
 const currentSongId = ref<number | undefined>();
 
 // 提供一个方法来打开歌单抽屉
-const openPlaylistDrawer = (songId: number) => {
+const openPlaylistDrawer = (songId: number, isOpen: boolean = true) => {
   currentSongId.value = songId;
-  showPlaylistDrawer.value = true;
+  showPlaylistDrawer.value = isOpen;
 };
 
 // 将方法提供给全局

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/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

@@ -4,7 +4,7 @@ const otherRouter = [
     name: 'userFollows',
     meta: {
       title: '关注列表',
-      keepAlive: true,
+      keepAlive: false,
       showInMenu: false,
       back: true
     },
@@ -15,7 +15,7 @@ const otherRouter = [
     name: 'userFollowers',
     meta: {
       title: '粉丝列表',
-      keepAlive: true,
+      keepAlive: false,
       showInMenu: false,
       back: true
     },
@@ -26,7 +26,7 @@ const otherRouter = [
     name: 'userDetail',
     meta: {
       title: '用户详情',
-      keepAlive: true,
+      keepAlive: false,
       showInMenu: false,
       back: true
     },

src/renderer/services/audioService.ts

@@ -18,6 +18,8 @@ class AudioService {
 
   private bypass = false;
 
+  private playbackRate = 1.0; // 添加播放速度属性
+
   // 预设的 EQ 频段
   private readonly frequencies = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
 
@@ -143,7 +145,7 @@ class AudioService {
     if ('setPositionState' in navigator.mediaSession) {
       navigator.mediaSession.setPositionState({
         duration: this.currentSound.duration(),
-        playbackRate: 1.0,
+        playbackRate: this.playbackRate,
         position: this.currentSound.seek() as number
       });
     }
@@ -565,6 +567,7 @@ class AudioService {
             volume: localStorage.getItem('volume')
               ? parseFloat(localStorage.getItem('volume') as string)
               : 1,
+            rate: this.playbackRate, // 设置初始播放速度
             format: ['mp3', 'aac'],
             onloaderror: (_, error) => {
               console.error('Audio load error:', error);
@@ -720,7 +723,6 @@ class AudioService {
   }
 
   pause() {
-    // 直接强制重置操作锁
     this.forceResetOperationLock();
     
     if (this.currentSound) {
@@ -748,6 +750,35 @@ class AudioService {
   public setCurrentPreset(preset: string): void {
     localStorage.setItem('currentPreset', preset);
   }
+
+  public setPlaybackRate(rate: number) {
+    if (!this.currentSound) return;
+    this.playbackRate = rate;
+
+    // Howler 的 rate() 在 html5 模式下不生效
+    this.currentSound.rate(rate);
+
+    // 取出底层 HTMLAudioElement，改原生 playbackRate
+    const sounds = (this.currentSound as any)._sounds as any[];
+    sounds.forEach(({ _node }) => {
+      if (_node instanceof HTMLAudioElement) {
+        _node.playbackRate = rate;
+      }
+    });
+
+    // 同步给 Media Session UI
+    if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
+      navigator.mediaSession.setPositionState({
+        duration: this.currentSound.duration(),
+        playbackRate: rate,
+        position: this.currentSound.seek() as number
+      });
+    }
+  }
+
+  public getPlaybackRate(): number {
+    return this.playbackRate;
+  }
 }
 
 export const audioService = new AudioService();

src/renderer/store/modules/player.ts

@@ -4,7 +4,7 @@ import { computed, ref } from 'vue';
 
 import i18n from '@/../i18n/renderer';
 import { getBilibiliAudioUrl } from '@/api/bilibili';
-import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
+import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl, likeSong } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import { audioService } from '@/services/audioService';
 import type { ILyric, ILyricText, SongResult } from '@/type/music';
@@ -81,69 +81,76 @@ export const getSongUrl = async (
   songData: SongResult,
   isDownloaded: boolean = false
 ) => {
-  if (songData.playMusicUrl) {
-    return songData.playMusicUrl;
-  }
-
-  if (songData.source === 'bilibili' && songData.bilibiliData) {
-    console.log('加载B站音频URL');
-    if (!songData.playMusicUrl && songData.bilibiliData.bvid && songData.bilibiliData.cid) {
-      try {
-        songData.playMusicUrl = await getBilibiliAudioUrl(
-          songData.bilibiliData.bvid,
-          songData.bilibiliData.cid
-        );
-        return songData.playMusicUrl;
-      } catch (error) {
-        console.error('重启后获取B站音频URL失败:', error);
-        return '';
-      }
-    }
-    return songData.playMusicUrl || '';
-  }
-
-  const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
-  
-  // 检查是否有自定义音源设置
-  const songId = String(id);
-  const savedSource = localStorage.getItem(`song_source_${songId}`);
-  
-  // 如果有自定义音源设置，直接使用getParsingMusicUrl获取URL
-  if (savedSource && songData.source !== 'bilibili') {
-    try {
-      console.log(`使用自定义音源解析歌曲 ID: ${songId}`);
-      const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
-      if (res && res.data && res.data.data && res.data.data.url) {
-        return res.data.data.url;
-      }
-      // 如果自定义音源解析失败，继续使用正常的获取流程
-      console.warn('自定义音源解析失败，使用默认音源');
-    } catch (error) {
-      console.error('自定义音源解析出错:', error);
-    }
-  }
-  
-  // 正常获取URL流程
-  const { data } = await getMusicUrl(numericId, isDownloaded);
-  let url = '';
-  let songDetail = null;
   try {
-    if (data.data[0].freeTrialInfo || !data.data[0].url) {
-      const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
-      url = res.data.data.url;
-      songDetail = res.data.data;
-    } else {
-      songDetail = data.data[0] as any;
+    if (songData.playMusicUrl) {
+      return songData.playMusicUrl;
     }
+
+    if (songData.source === 'bilibili' && songData.bilibiliData) {
+      console.log('加载B站音频URL');
+      if (!songData.playMusicUrl && songData.bilibiliData.bvid && songData.bilibiliData.cid) {
+        try {
+          songData.playMusicUrl = await getBilibiliAudioUrl(
+            songData.bilibiliData.bvid,
+            songData.bilibiliData.cid
+          );
+          return songData.playMusicUrl;
+        } catch (error) {
+          console.error('重启后获取B站音频URL失败:', error);
+          return '';
+        }
+      }
+      return songData.playMusicUrl || '';
+    }
+
+    const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
+    
+    // 检查是否有自定义音源设置
+    const songId = String(id);
+    const savedSource = localStorage.getItem(`song_source_${songId}`);
+    
+    // 如果有自定义音源设置，直接使用getParsingMusicUrl获取URL
+    if (savedSource && songData.source !== 'bilibili') {
+      try {
+        console.log(`使用自定义音源解析歌曲 ID: ${songId}`);
+        const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
+        console.log('res',res)
+        if (res && res.data && res.data.data && res.data.data.url) {
+          return res.data.data.url;
+        }
+        // 如果自定义音源解析失败，继续使用正常的获取流程
+        console.warn('自定义音源解析失败，使用默认音源');
+      } catch (error) {
+        console.error('error',error)
+        console.error('自定义音源解析出错:', error);
+      }
+    }
+    
+    // 正常获取URL流程
+    const { data } = await getMusicUrl(numericId, isDownloaded);
+    let url = '';
+    let songDetail = null;
+    try {
+      if (data.data[0].freeTrialInfo || !data.data[0].url) {
+        const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
+        url = res.data.data.url;
+        songDetail = res.data.data;
+      } else {
+        songDetail = data.data[0] as any;
+      }
+    } catch (error) {
+      console.error('error', error);
+      url = data.data[0].url || '';
+    }
+    if (isDownloaded) {
+      return songDetail;
+    }
+    url = url || data.data[0].url;
+    return url;
   } catch (error) {
-    console.error('error', error);
-    url = data.data[0].url || '';
+    console.error('error',error)
+    return null;
   }
-  if (isDownloaded) {
-    return songDetail;
-  }
-  url = url || data.data[0].url;
-  return url;
 };
 
 const parseTime = (timeString: string): number => {
@@ -387,13 +394,35 @@ export const usePlayerStore = defineStore('player', () => {
   const playMode = ref(getLocalStorageItem('playMode', 0));
   const musicFull = ref(false);
   const favoriteList = ref<Array<number | string>>(getLocalStorageItem('favoriteList', []));
+  const dislikeList = ref<Array<number | string>>(getLocalStorageItem('dislikeList', []));
   const savedPlayProgress = ref<number | undefined>();
+  const showSleepTimer = ref(false); // 定时弹窗
+  // 添加播放列表抽屉状态
+  const playListDrawerVisible = ref(false);
   
   // 定时关闭相关状态
   const sleepTimer = ref<SleepTimerInfo>(getLocalStorageItem('sleepTimer', {
     type: SleepTimerType.NONE,
     value: 0
   }));
+
+  // 播放速度状态
+  const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
+
+  // 清空播放列表
+  const clearPlayAll = async () => {
+    audioService.pause()
+    setTimeout(() => {
+      playMusic.value = {} as SongResult;
+      playMusicUrl.value = '';
+      playList.value = [];
+      playListIndex.value = 0;
+      localStorage.removeItem('currentPlayMusic');
+      localStorage.removeItem('currentPlayMusicUrl');
+      localStorage.removeItem('playList');
+      localStorage.removeItem('playListIndex');
+    }, 500);
+  };
   
   const timerInterval = ref<number | null>(null);
   
@@ -481,6 +510,7 @@ export const usePlayerStore = defineStore('player', () => {
       const updatedPlayMusic = await getSongDetail(originalMusic);
       playMusic.value = updatedPlayMusic;
       playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
+      music.playMusicUrl = updatedPlayMusic.playMusicUrl as string;
 
       // 保存到本地存储
       localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
@@ -529,13 +559,26 @@ export const usePlayerStore = defineStore('player', () => {
 
   const setPlay = async (song: SongResult) => {
     try {
+    // 如果是当前正在播放的音乐，则切换播放/暂停状态
+    if (playMusic.value.id === song.id && playMusic.value.playMusicUrl === song.playMusicUrl) {
+      if (play.value) {
+          setPlayMusic(false);
+          audioService.getCurrentSound()?.pause();
+        } else {
+          setPlayMusic(true);
+          audioService.getCurrentSound()?.play();
+        }
+        return;
+      }
       // 直接调用 handlePlayMusic，它会处理索引更新和播放逻辑
       const success = await handlePlayMusic(song);
       
       // 记录到本地存储，保持一致性
       localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
       localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
-      
+      if (success) {
+        isPlay.value = true;
+      }
       return success;
     } catch (error) {
       console.error('设置播放失败:', error);
@@ -775,10 +818,6 @@ export const usePlayerStore = defineStore('player', () => {
         return;
       }
 
-      // 在切换前保存当前播放状态
-      const shouldPlayNext = play.value;
-      console.log('切换到下一首，当前播放状态:', shouldPlayNext ? '播放' : '暂停');
-
       // 保存当前索引，用于错误恢复
       const currentIndex = playListIndex.value;
       let nowPlayListIndex: number;
@@ -810,7 +849,7 @@ export const usePlayerStore = defineStore('player', () => {
 
       // 尝试播放，最多尝试maxRetries次
       while (!success && retryCount < maxRetries) {
-        success = await handlePlayMusic(nextSong, shouldPlayNext);
+        success = await handlePlayMusic(nextSong, true);
         
         if (!success) {
           retryCount++;
@@ -984,6 +1023,7 @@ export const usePlayerStore = defineStore('player', () => {
     if (!isAlreadyInList) {
       favoriteList.value.push(id);
       localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+      typeof id === 'number' && useUserStore().user && likeSong(id, true);
     }
   };
 
@@ -993,10 +1033,21 @@ export const usePlayerStore = defineStore('player', () => {
       favoriteList.value = favoriteList.value.filter(existingId => !isBilibiliIdMatch(existingId, id));
     } else {
       favoriteList.value = favoriteList.value.filter(existingId => existingId !== id);
+      useUserStore().user && likeSong(Number(id), false);
     }
     localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
   };
 
+  const addToDislikeList = (id: number | string) => {
+    dislikeList.value.push(id);
+    localStorage.setItem('dislikeList', JSON.stringify(dislikeList.value));
+  }
+
+  const removeFromDislikeList = (id: number | string) => {
+    dislikeList.value = dislikeList.value.filter(existingId => existingId!== id);
+    localStorage.setItem('dislikeList', JSON.stringify(dislikeList.value));
+  }
+
   const removeFromPlayList = (id: number | string) => {
     const index = playList.value.findIndex((item) => item.id === id);
     if (index === -1) return;
@@ -1012,6 +1063,14 @@ export const usePlayerStore = defineStore('player', () => {
     setPlayList(newPlayList);
   };
 
+  // 设置播放速度
+  const setPlaybackRate = (rate: number) => {
+    playbackRate.value = rate;
+    audioService.setPlaybackRate(rate);
+    // 保存到本地存储
+    localStorage.setItem('playbackRate', rate.toString());
+  };
+
   // 初始化播放状态
   const initializePlayState = async () => {
     const settingStore = useSettingsStore();
@@ -1063,6 +1122,11 @@ export const usePlayerStore = defineStore('player', () => {
         localStorage.removeItem('playProgress');
       }
     }
+
+    setTimeout(() => {
+      audioService.setPlaybackRate(playbackRate.value);
+    }, 2000);
+
   };
 
   const initializeFavoriteList = async () => {
@@ -1248,6 +1312,24 @@ export const usePlayerStore = defineStore('player', () => {
     }
   };
 
+  // 设置播放列表抽屉显示状态
+  const setPlayListDrawerVisible = (value: boolean) => {
+    playListDrawerVisible.value = value;
+  };
+
+  // 播放
+  const handlePause = async () => {
+    try {
+      const currentSound = audioService.getCurrentSound();
+      if (currentSound) {
+        currentSound.pause();
+      }
+      setPlayMusic(false);
+    } catch (error) {
+      console.error('暂停播放失败:', error);
+    }
+  }
+
   return {
     play,
     isPlay,
@@ -1259,9 +1341,12 @@ export const usePlayerStore = defineStore('player', () => {
     musicFull,
     savedPlayProgress,
     favoriteList,
+    dislikeList,
+    playListDrawerVisible,
     
     // 定时关闭相关
     sleepTimer,
+    showSleepTimer,
     currentSleepTimer,
     hasSleepTimerActive,
     sleepTimerRemainingTime,
@@ -1276,6 +1361,7 @@ export const usePlayerStore = defineStore('player', () => {
     currentPlayList,
     currentPlayListIndex,
 
+    clearPlayAll,
     setPlay,
     setIsPlay,
     nextPlay,
@@ -1290,7 +1376,13 @@ export const usePlayerStore = defineStore('player', () => {
     addToFavorite,
     removeFromFavorite,
     removeFromPlayList,
+    addToDislikeList,
+    removeFromDislikeList,
     playAudio,
-    reparseCurrentSong
+    reparseCurrentSong,
+    setPlayListDrawerVisible,
+    handlePause,
+    playbackRate,
+    setPlaybackRate
   };
 });

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/utils/request.ts

@@ -2,13 +2,14 @@ import axios, { InternalAxiosRequestConfig } from 'axios';
 
 import { useUserStore } from '@/store/modules/user';
 
-import { getSetData, isElectron } from '.';
+import { getSetData, isElectron, isMobile } from '.';
 
 let setData: any = null;
 
 // 扩展请求配置接口
 interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
   retryCount?: number;
+  noRetry?: boolean;
 }
 
 const baseURL = window.electron
@@ -17,12 +18,12 @@ const baseURL = window.electron
 
 const request = axios.create({
   baseURL,
-  timeout: 5000,
+  timeout: 15000,
   withCredentials: true
 });
 
 // 最大重试次数
-const MAX_RETRIES = 3;
+const MAX_RETRIES = 1;
 // 重试延迟（毫秒）
 const RETRY_DELAY = 500;
 
@@ -42,7 +43,8 @@ request.interceptors.request.use(
     // 在get请求params中添加timestamp
     config.params = {
       ...config.params,
-      timestamp: Date.now()
+      timestamp: Date.now(),
+      device: isElectron ? 'pc' : isMobile ? 'mobile' : 'web'
     };
     const token = localStorage.getItem('token');
     if (token && config.method !== 'post') {
@@ -100,7 +102,8 @@ request.interceptors.response.use(
     if (
       config.retryCount !== undefined &&
       config.retryCount < MAX_RETRIES &&
-      !NO_RETRY_URLS.includes(config.url as string)
+      !NO_RETRY_URLS.includes(config.url as string) &&
+      !config.noRetry
     ) {
       config.retryCount++;
       console.error(`请求重试第 ${config.retryCount} 次`);

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

@@ -23,15 +23,103 @@
     <!-- 标签页切换 -->
     <n-tabs v-model:value="activeTab" class="content-tabs" type="line" animated>
       <n-tab-pane name="songs" :tab="t('artist.hotSongs')">
+        <!-- 添加歌曲操作工具栏 -->
+        <div class="songs-toolbar">
+          <div class="toolbar-left">
+            <n-tooltip placement="bottom" trigger="hover">
+              <template #trigger>
+                <div class="action-button hover-green" @click="handlePlayAll">
+                  <i class="icon iconfont ri-play-fill"></i>
+                </div>
+              </template>
+              {{ t('comp.musicList.playAll') }}
+            </n-tooltip>
+            
+            <n-tooltip placement="bottom" trigger="hover">
+              <template #trigger>
+                <div class="action-button hover-green" @click="addToPlaylist">
+                  <i class="icon iconfont ri-add-line"></i>
+                </div>
+              </template>
+              {{ t('comp.musicList.addToPlaylist') }}
+            </n-tooltip>
+          </div>
+          
+          <div class="toolbar-right">
+            <!-- 布局切换按钮 -->
+            <div class="layout-toggle" v-if="!isMobile">
+              <n-tooltip placement="bottom" trigger="hover">
+                <template #trigger>
+                  <div class="toggle-button hover-green" @click="toggleLayout">
+                    <i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
+                  </div>
+                </template>
+                {{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
+              </n-tooltip>
+            </div>
+            
+            <!-- 搜索框 -->
+            <div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
+              <template v-if="isSearchVisible">
+                <n-input
+                  v-model:value="searchKeyword"
+                  :placeholder="t('comp.musicList.searchSongs')"
+                  clearable
+                  round
+                  size="small"
+                  @blur="handleSearchBlur"
+                >
+                  <template #prefix>
+                    <i class="icon iconfont ri-search-line text-sm"></i>
+                  </template>
+                  <template #suffix>
+                    <i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
+                  </template>
+                </n-input>
+              </template>
+              <template v-else>
+                <n-tooltip placement="bottom" trigger="hover">
+                  <template #trigger>
+                    <div class="search-button" @click="showSearch">
+                      <i class="icon iconfont ri-search-line"></i>
+                    </div>
+                  </template>
+                  {{ t('comp.musicList.searchSongs') }}
+                </n-tooltip>
+              </template>
+            </div>
+          </div>
+        </div>
+        
         <div class="songs-list">
           <div class="song-list-content">
-            <song-item
-              v-for="song in songs"
-              :key="song.id"
-              :item="song"
-              :list="true"
-              @play="handlePlay"
-            />
+            <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
+              {{ t('comp.musicList.noSearchResults') }}
+            </div>
+            
+            <!-- 替换原来的 v-for 循环为虚拟列表 -->
+            <n-virtual-list
+              ref="songListRef"
+              class="song-virtual-list"
+              style="height: calc(80vh - 60px)"
+              :items="filteredSongs"
+              :item-size="isCompactLayout ? 50 : 70"
+              item-resizable
+              key-field="id"
+              @scroll="handleVirtualScroll"
+            >
+              <template #default="{ item, index }">
+                <div class="double-item">
+                  <song-item
+                    :index="index"
+                    :compact="isCompactLayout"
+                    :item="formatSong(item)"
+                    @play="handlePlay"
+                  />
+                </div>
+              </template>
+            </n-virtual-list>
+            
             <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>
@@ -76,6 +164,8 @@ 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';
+import PinyinMatch from 'pinyin-match';
+import { useMessage } from 'naive-ui';
 
 import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
 import { getMusicDetail } from '@/api/music';
@@ -84,7 +174,7 @@ import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store';
 import { IArtist } from '@/type/artist';
-import { getImgUrl } from '@/utils';
+import { getImgUrl, isMobile } from '@/utils';
 
 defineOptions({
   name: 'ArtistDetail'
@@ -93,6 +183,7 @@ defineOptions({
 const { t } = useI18n();
 const route = useRoute();
 const playerStore = usePlayerStore();
+const message = useMessage();
 
 const artistId = computed(() => Number(route.params.id));
 const activeTab = ref('songs');
@@ -135,6 +226,11 @@ const artistDataCache = new Map();
 // 单个缓存键函数
 const getCacheKey = (id: string | number) => `artist_${id}`;
 
+// 搜索和布局相关
+const searchKeyword = ref('');
+const isSearchVisible = ref(false);
+const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact');
+
 // 加载歌手信息
 const loadArtistInfo = async () => {
   if (!artistId.value) return;
@@ -268,13 +364,151 @@ const formatPublishTime = (time: number) => {
   return useDateFormat(time, 'YYYY-MM-DD').value;
 };
 
-const handlePlay = () => {
-  playerStore.setPlayList(
-    songs.value.map((item) => ({
-      ...item,
-      picUrl: item.al.picUrl
-    }))
+// 搜索相关方法
+const showSearch = () => {
+  isSearchVisible.value = true;
+  // 添加一个小延迟后聚焦搜索框
+  nextTick(() => {
+    const inputEl = document.querySelector('.search-container input');
+    if (inputEl) {
+      (inputEl as HTMLInputElement).focus();
+    }
+  });
+};
+
+const closeSearch = () => {
+  isSearchVisible.value = false;
+  searchKeyword.value = '';
+};
+
+const handleSearchBlur = () => {
+  // 如果搜索框为空，则在失焦时关闭搜索框
+  if (!searchKeyword.value) {
+    setTimeout(() => {
+      isSearchVisible.value = false;
+    }, 200);
+  }
+};
+
+// 过滤歌曲列表
+const filteredSongs = computed(() => {
+  if (!searchKeyword.value) {
+    return songs.value;
+  }
+
+  const keyword = searchKeyword.value.toLowerCase().trim();
+  return songs.value.filter((song) => {
+    const songName = song.name?.toLowerCase() || '';
+    const albumName = song.al?.name?.toLowerCase() || '';
+    const artists = song.ar || song.artists || [];
+
+    // 原始文本匹配
+    const nameMatch = songName.includes(keyword);
+    const albumMatch = albumName.includes(keyword);
+    const artistsMatch = artists.some((artist: any) => {
+      return artist.name?.toLowerCase().includes(keyword);
+    });
+
+    // 拼音匹配
+    const namePinyinMatch = song.name && PinyinMatch.match(song.name, keyword);
+    const albumPinyinMatch = song.al?.name && PinyinMatch.match(song.al.name, keyword);
+    const artistsPinyinMatch = artists.some((artist: any) => {
+      return artist.name && PinyinMatch.match(artist.name, keyword);
+    });
+
+    return (
+      nameMatch ||
+      albumMatch ||
+      artistsMatch ||
+      namePinyinMatch ||
+      albumPinyinMatch ||
+      artistsPinyinMatch
+    );
+  });
+});
+
+// 布局切换
+const toggleLayout = () => {
+  isCompactLayout.value = !isCompactLayout.value;
+  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
+};
+
+// 播放全部
+const handlePlayAll = () => {
+  if (filteredSongs.value.length === 0) return;
+  
+  playerStore.setPlayList(filteredSongs.value.map(song => ({
+    ...song,
+    picUrl: song.al.picUrl
+  })));
+  
+  // 开始播放第一首
+  playerStore.setPlay(filteredSongs.value[0]);
+  
+  message.success(t('comp.musicList.playAll'));
+};
+
+// 添加到播放列表
+const addToPlaylist = () => {
+  if (filteredSongs.value.length === 0) return;
+  
+  // 获取当前播放列表
+  const currentList = playerStore.playList;
+  
+  // 添加歌曲到播放列表(避免重复添加)
+  const newSongs = filteredSongs.value.filter(song => 
+    !currentList.some(item => item.id === song.id)
   );
+  
+  if (newSongs.length === 0) {
+    message.info(t('comp.musicList.songsAlreadyInPlaylist'));
+    return;
+  }
+  
+  // 合并到当前播放列表末尾
+  const newList = [
+    ...currentList, 
+    ...newSongs.map(song => ({
+      ...song,
+      picUrl: song.al.picUrl
+    }))
+  ];
+  
+  playerStore.setPlayList(newList);
+  
+  message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
+};
+
+const handlePlay = (song?: any) => {
+  // 如果传入了特定歌曲（点击单曲播放），则将其作为播放列表的第一首
+  if (song) {
+    const songList = [...filteredSongs.value];
+    const index = songList.findIndex(item => item.id === song.id);
+    
+    if (index !== -1) {
+      // 将点击的歌曲移到第一位
+      const clickedSong = songList.splice(index, 1)[0];
+      songList.unshift(clickedSong);
+    }
+    
+    playerStore.setPlayList(
+      songList.map(item => ({
+        ...item,
+        picUrl: item.al?.picUrl || item.picUrl
+      }))
+    );
+    
+    // 设置当前播放歌曲
+    playerStore.setPlay(song);
+  } else {
+    // 默认行为：播放整个过滤后的列表
+    playerStore.setPlayList(
+      filteredSongs.value.map(item => ({
+        ...item,
+        picUrl: item.al?.picUrl || item.picUrl
+      }))
+    );
+  }
 };
 
 // 简化观察器设置
@@ -326,6 +560,13 @@ watch([songsLoadMoreRef, albumsLoadMoreRef], () => {
   setupObservers();
 });
 
+// 搜索词变化时重新设置观察器
+watch(searchKeyword, () => {
+  nextTick(() => {
+    setupObservers();
+  });
+});
+
 onActivated(() => {
   // 确保当前路由是艺术家详情页
   if (route.name === 'artistDetail') {
@@ -370,6 +611,37 @@ onUnmounted(() => {
     albumsObserver = null;
   }
 });
+
+// 定义在script setup部分
+const songListRef = ref(null);
+
+// 格式化歌曲（使用在虚拟列表中）
+const formatSong = (item: any) => {
+  if (!item) {
+    return null;
+  }
+  return {
+    ...item,
+    picUrl: item.al?.picUrl || item.picUrl
+  };
+};
+
+// 处理虚拟列表滚动
+const handleVirtualScroll = (e: any) => {
+  if (!e || !e.target) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  const threshold = 200;
+
+  if (
+    scrollHeight - scrollTop - clientHeight < threshold &&
+    !songLoading.value &&
+    songPage.value.hasMore &&
+    !searchKeyword.value // 搜索状态下不触发加载更多
+  ) {
+    loadSongs();
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -441,5 +713,73 @@ onUnmounted(() => {
       @apply text-sm leading-relaxed whitespace-pre-wrap;
     }
   }
+  
+  // 添加歌曲工具栏样式
+  .songs-toolbar {
+    @apply flex items-center justify-between mb-4;
+    
+    .toolbar-left, .toolbar-right {
+      @apply flex items-center gap-2;
+    }
+  }
+  
+  // 搜索框样式
+  .search-container {
+    @apply max-w-md transition-all duration-300 ease-in-out;
+
+    &.search-expanded {
+      @apply w-52;
+    }
+
+    .search-button {
+      @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
+      
+      .icon {
+        @apply text-lg;
+      }
+    }
+
+    :deep(.n-input) {
+      @apply bg-light-200 dark:bg-dark-200;
+    }
+  }
+  
+  // 操作按钮样式
+  .layout-toggle .toggle-button,
+  .action-button {
+    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
+    
+    .icon {
+      @apply text-lg;
+    }
+    
+    &.hover-green:hover {
+      .icon {
+        @apply text-green-500;
+      }
+    }
+  }
+  
+  // 搜索无结果样式
+  .no-result {
+    @apply text-center py-8 text-gray-500 dark:text-gray-400;
+  }
+  
+  // 虚拟列表样式
+  .song-virtual-list {
+    :deep(.n-virtual-list__scroll) {
+      scrollbar-width: thin;
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-thumb {
+        @apply bg-gray-400 dark:bg-gray-600 rounded;
+      }
+    }
+  }
+  
+  .double-item {
+    @apply mb-2 bg-light-100 bg-opacity-30 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
+  }
 }
 </style>

src/renderer/views/bilibili/BilibiliPlayer.vue

@@ -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/favorite/index.vue

@@ -6,6 +6,26 @@
         <div class="favorite-count">{{ t('favorite.count', { count: favoriteList.length }) }}</div>
       </div>
       <div v-if="!isComponent && isElectron" class="favorite-header-right">
+        <div class="sort-controls" v-if="!isSelecting">
+          <div class="sort-buttons">
+            <div 
+              class="sort-button" 
+              :class="{ active: isDescending }"
+              @click="toggleSort(true)"
+            >
+              <i class="iconfont ri-sort-desc"></i>
+              {{ t('favorite.descending') }}
+            </div>
+            <div 
+              class="sort-button" 
+              :class="{ active: !isDescending }"
+              @click="toggleSort(false)"
+            >
+              <i class="iconfont ri-sort-asc"></i>
+              {{ t('favorite.ascending') }}
+            </div>
+          </div>
+        </div>
         <n-button
           v-if="!isSelecting"
           secondary
@@ -83,8 +103,6 @@
 </template>
 
 <script setup lang="ts">
-import { cloneDeep } from 'lodash';
-import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -92,460 +110,434 @@ import { useRouter } from 'vue-router';
 import { getMusicDetail } from '@/api/music';
 import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
 import SongItem from '@/components/common/SongItem.vue';
-import { getSongUrl } from '@/hooks/MusicListHook';
+import { useDownload } from '@/hooks/useDownload';
 import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';
 
-const { t } = useI18n();
-const playerStore = usePlayerStore();
-const message = useMessage();
-const favoriteList = computed(() => playerStore.favoriteList);
-const favoriteSongs = ref<SongResult[]>([]);
-const loading = ref(false);
-const noMore = ref(false);
-const scrollbarRef = ref();
+  const { t } = useI18n();
+  const playerStore = usePlayerStore();
+  const favoriteList = computed(() => playerStore.favoriteList);
+  const favoriteSongs = ref<SongResult[]>([]);
+  const loading = ref(false);
+  const noMore = ref(false);
+  const scrollbarRef = ref();
 
-// 多选相关
+  // 多选相关
 const isSelecting = ref(false);
 const selectedSongs = ref<number[]>([]);
-const isDownloading = ref(false);
+const { isDownloading, batchDownloadMusic } = useDownload();
 
-// 开始多选
-const startSelect = () => {
-  isSelecting.value = true;
-  selectedSongs.value = [];
-};
+  // 开始多选
+  const startSelect = () => {
+    isSelecting.value = true;
+    selectedSongs.value = [];
+  };
 
-// 取消多选
-const cancelSelect = () => {
-  isSelecting.value = false;
-  selectedSongs.value = [];
-};
+  // 取消多选
+  const cancelSelect = () => {
+    isSelecting.value = false;
+    selectedSongs.value = [];
+  };
 
-// 处理选择
-const handleSelect = (songId: number, selected: boolean) => {
-  if (selected) {
-    selectedSongs.value.push(songId);
-  } else {
-    selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
-  }
-};
-
-// 批量下载
-const handleBatchDownload = async () => {
-  if (isDownloading.value) {
-    message.warning(t('favorite.downloading'));
-    return;
-  }
-
-  if (selectedSongs.value.length === 0) {
-    message.warning(t('favorite.selectSongsFirst'));
-    return;
-  }
-
-  try {
-    isDownloading.value = true;
-    message.success(t('favorite.downloading'));
-
-    // 移除旧的监听器
-    window.electron.ipcRenderer.removeAllListeners('music-download-complete');
-
-    let successCount = 0;
-    let failCount = 0;
-
-    // 添加新的监听器
-    window.electron.ipcRenderer.on('music-download-complete', (_, result) => {
-      if (result.success) {
-        successCount++;
-      } else {
-        failCount++;
-      }
-
-      // 当所有下载完成时
-      if (successCount + failCount === selectedSongs.value.length) {
-        isDownloading.value = false;
-        message.success(t('favorite.downloadSuccess'));
-        cancelSelect();
-      }
-    });
-
-    // 获取选中歌曲的信息
-    const selectedSongsList = selectedSongs.value
-      .map((songId) => favoriteSongs.value.find((s) => s.id === songId))
-      .filter((song) => song) as SongResult[];
-
-    // 并行获取所有歌曲的下载链接
-    const downloadUrls = await Promise.all(
-      selectedSongsList.map(async (song) => {
-        try {
-          const data = (await getSongUrl(song.id, song, true)) as any;
-          return { song, ...data };
-        } catch (error) {
-          console.error(`获取歌曲 ${song.name} 下载链接失败:`, error);
-          return { song, url: null };
-        }
-      })
-    );
-
-    // 开始下载有效的链接
-    downloadUrls.forEach(({ song, url, type }) => {
-      if (!url) {
-        failCount++;
-        return;
-      }
-      const songData = cloneDeep(song);
-      const songInfo = {
-        ...songData,
-        ar: songData.ar || songData.song?.artists,
-        downloadTime: Date.now()
-      };
-      console.log('songInfo', songInfo);
-      console.log('song', song);
-      window.electron.ipcRenderer.send('download-music', {
-        url,
-        filename: `${song.name} - ${(song.ar || song.song?.artists)?.map((a) => a.name).join(',')}`,
-        songInfo,
-        type
-      });
-    });
-  } catch (error) {
-    console.error('下载失败:', error);
-    isDownloading.value = false;
-    message.destroyAll();
-    message.error(t('favorite.downloadFailed'));
-  }
-};
-
-// 无限滚动相关
-const pageSize = 100;
-const currentPage = ref(1);
-
-const props = defineProps({
-  isComponent: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// 获取当前页的收藏歌曲ID
-const getCurrentPageIds = () => {
-  const startIndex = (currentPage.value - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  // 返回原始ID，不进行类型转换
-  return favoriteList.value.slice(startIndex, endIndex);
-};
-
-// 获取收藏歌曲详情
-const getFavoriteSongs = async () => {
-  if (favoriteList.value.length === 0) {
-    favoriteSongs.value = [];
-    return;
-  }
-
-  if (props.isComponent && favoriteSongs.value.length >= 16) {
-    return;
-  }
-
-  loading.value = true;
-  try {
-    const currentIds = getCurrentPageIds();
-    console.log('currentIds', currentIds);
-    
-    // 分离网易云音乐ID和B站视频ID
-    const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
-    // B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
-    const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
-    
-    console.log('处理数据:', {
-      musicIds,
-      bilibiliIds
-    });
-    
-    // 处理网易云音乐数据
-    let neteaseSongs: SongResult[] = [];
-    if (musicIds.length > 0) {
-      const res = await getMusicDetail(musicIds);
-      if (res.data.songs) {
-        neteaseSongs = res.data.songs.map((song: SongResult) => ({
-          ...song,
-          picUrl: song.al?.picUrl || '',
-          source: 'netease'
-        }));
-      }
-    }
-    
-    // 处理B站视频数据
-    const bilibiliSongs: SongResult[] = [];
-    for (const biliId of bilibiliIds) {
-      const strBiliId = String(biliId);
-      console.log(`处理B站ID: ${strBiliId}`);
-      
-      if (strBiliId.includes('--')) {
-        // 从ID中提取B站视频信息 (bvid--pid--cid格式)
-        try {
-          const [bvid, pid, cid] = strBiliId.split('--');
-          if (!bvid || !pid || !cid) {
-            console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
-            continue;
-          }
-          
-          const res = await getBilibiliVideoDetail(bvid);
-          const videoDetail = res.data;
-          
-          // 找到对应的分P
-          const page = videoDetail.pages.find(p => p.cid === Number(cid));
-          if (!page) {
-            console.warn(`未找到对应的分P: cid=${cid}`);
-            continue;
-          }
-          
-          const songData = {
-            id: strBiliId,
-            name: `${page.part || ''} - ${videoDetail.title}`,
-            picUrl: getBilibiliProxyUrl(videoDetail.pic),
-            ar: [
-              {
-                name: videoDetail.owner.name,
-                id: videoDetail.owner.mid
-              }
-            ],
-            al: {
-              name: videoDetail.title,
-              picUrl: getBilibiliProxyUrl(videoDetail.pic)
-            },
-            source: 'bilibili',
-            bilibiliData: {
-              bvid,
-              cid: Number(cid)
-            }
-          } as SongResult;
-          
-          bilibiliSongs.push(songData);
-        } catch (error) {
-          console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
-        }
-      }
-    }
-    
-    console.log('获取数据统计:', {
-      neteaseSongs: neteaseSongs.length,
-      bilibiliSongs: bilibiliSongs.length
-    });
-    
-    // 合并数据，保持原有顺序
-    const newSongs = currentIds
-      .map(id => {
-        const strId = String(id);
-        
-        // 查找B站视频
-        if (typeof id === 'string') {
-          const found = bilibiliSongs.find(song => String(song.id) === strId);
-          if (found) return found;
-        }
-        
-        // 查找网易云音乐
-        const found = neteaseSongs.find(song => String(song.id) === strId);
-        return found;
-      })
-      .filter((song): song is SongResult => !!song);
-    
-    console.log(`最终歌曲列表: ${newSongs.length}首`);
-
-    // 追加新数据而不是替换
-    if (currentPage.value === 1) {
-      favoriteSongs.value = newSongs;
+  // 处理选择
+  const handleSelect = (songId: number, selected: boolean) => {
+    if (selected) {
+      selectedSongs.value.push(songId);
     } else {
-      favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
+      selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
     }
+  };
 
-    // 判断是否还有更多数据
-    noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
-  } catch (error) {
-    console.error('获取收藏歌曲失败:', error);
-  } finally {
-    loading.value = false;
-  }
+  // 批量下载
+const handleBatchDownload = async () => {
+  // 获取选中歌曲的信息
+  const selectedSongsList = selectedSongs.value
+    .map((songId) => favoriteSongs.value.find((s) => s.id === songId))
+    .filter((song) => song) as SongResult[];
+  
+  // 使用hook中的批量下载功能
+  await batchDownloadMusic(selectedSongsList);
+  
+  // 下载完成后取消选择
+  cancelSelect();
 };
 
-// 处理滚动事件
-const handleScroll = (e: any) => {
-  const { scrollTop, scrollHeight, offsetHeight } = e.target;
-  const threshold = 100; // 距离底部多少像素时加载更多
+  // 排序相关
+  const isDescending = ref(true); // 默认倒序显示
 
-  if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
-    currentPage.value++;
-    getFavoriteSongs();
-  }
-};
-
-onMounted(async () => {
-  await playerStore.initializeFavoriteList();
-  await getFavoriteSongs();
-});
-
-// 监听收藏列表变化
-watch(
-  favoriteList,
-  () => {
+  // 切换排序方式
+  const toggleSort = (descending: boolean) => {
+    if (isDescending.value === descending) return;
+    isDescending.value = descending;
     currentPage.value = 1;
+    favoriteSongs.value = [];
     noMore.value = false;
     getFavoriteSongs();
-  },
-  { deep: true, immediate: true }
-);
+  };
 
-const handlePlay = () => {
-  playerStore.setPlayList(favoriteSongs.value);
-};
+  // 无限滚动相关
+  const pageSize = 100;
+  const currentPage = ref(1);
 
-const getItemAnimationDelay = (index: number) => {
-  return setAnimationDelay(index, 30);
-};
+  const props = defineProps({
+    isComponent: {
+      type: Boolean,
+      default: false
+    }
+  });
 
-const router = useRouter();
-const handleMore = () => {
-  router.push('/history');
-};
+  // 获取当前页的收藏歌曲ID
+  const getCurrentPageIds = () => {
+    let ids = [...favoriteList.value]; // 复制一份以免修改原数组
+    
+    // 根据排序方式调整顺序
+    if (isDescending.value) {
+      ids = ids.reverse(); // 倒序，最新收藏的在前面
+    }
+    
+    const startIndex = (currentPage.value - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    // 返回原始ID，不进行类型转换
+    return ids.slice(startIndex, endIndex);
+  };
 
-// 全选相关
-const isAllSelected = computed(() => {
-  return (
-    favoriteSongs.value.length > 0 && selectedSongs.value.length === favoriteSongs.value.length
-  );
-});
-
-const isIndeterminate = computed(() => {
-  return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
-});
-
-// 处理全选/取消全选
-const handleSelectAll = (checked: boolean) => {
-  if (checked) {
-    selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
-  } else {
-    selectedSongs.value = [];
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.favorite-page {
-  @apply h-full flex flex-col pt-2;
-  @apply bg-light dark:bg-black;
-
-  .favorite-header {
-    @apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
-
-    &-left {
-      @apply flex items-center gap-4;
-
-      h2 {
-        @apply text-xl font-bold;
-        @apply text-gray-900 dark:text-white;
-      }
-
-      .favorite-count {
-        @apply text-gray-500 dark:text-gray-400 text-sm;
-      }
+  // 获取收藏歌曲详情
+  const getFavoriteSongs = async () => {
+    if (favoriteList.value.length === 0) {
+      favoriteSongs.value = [];
+      return;
     }
 
-    &-right {
-      @apply flex items-center;
+    if (props.isComponent && favoriteSongs.value.length >= 16) {
+      return;
+    }
 
-      .select-btn {
-        @apply rounded-full px-4 h-8;
-        @apply transition-all duration-300 ease-in-out;
-        @apply hover:bg-primary hover:text-white;
-        @apply dark:border-gray-600;
-
-        .iconfont {
-          @apply mr-1 text-lg;
+    loading.value = true;
+    try {
+      const currentIds = getCurrentPageIds();
+      
+      // 分离网易云音乐ID和B站视频ID
+      const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
+      // B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
+      const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
+      
+      // 处理网易云音乐数据
+      let neteaseSongs: SongResult[] = [];
+      if (musicIds.length > 0) {
+        const res = await getMusicDetail(musicIds);
+        if (res.data.songs) {
+          neteaseSongs = res.data.songs.map((song: SongResult) => ({
+            ...song,
+            picUrl: song.al?.picUrl || '',
+            source: 'netease'
+          }));
         }
       }
-
-      .select-controls {
-        @apply flex items-center gap-3;
-        @apply bg-gray-50 dark:bg-gray-800;
-        @apply rounded-full px-3 py-1;
-        @apply border border-gray-200 dark:border-gray-700;
-        @apply transition-all duration-300;
-
-        .select-all-checkbox {
-          @apply text-sm text-gray-900 dark:text-gray-200;
-        }
-
-        .operation-btns {
-          @apply flex items-center gap-2 ml-2;
-
-          .download-btn {
-            @apply rounded-full px-4 h-7;
-            @apply bg-primary text-white;
-            @apply hover:bg-primary-dark;
-            @apply disabled:opacity-50 disabled:cursor-not-allowed;
-
-            .iconfont {
-              @apply mr-1 text-lg;
+      
+      // 处理B站视频数据
+      const bilibiliSongs: SongResult[] = [];
+      for (const biliId of bilibiliIds) {
+        const strBiliId = String(biliId);
+        console.log(`处理B站ID: ${strBiliId}`);
+        
+        if (strBiliId.includes('--')) {
+          // 从ID中提取B站视频信息 (bvid--pid--cid格式)
+          try {
+            const [bvid, pid, cid] = strBiliId.split('--');
+            if (!bvid || !pid || !cid) {
+              console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
+              continue;
             }
-          }
-
-          .cancel-btn {
-            @apply rounded-full px-4 h-7;
-            @apply text-gray-600 dark:text-gray-300;
-            @apply hover:bg-gray-100 dark:hover:bg-gray-700;
-            @apply border-gray-300 dark:border-gray-600;
+            
+            const res = await getBilibiliVideoDetail(bvid);
+            const videoDetail = res.data;
+            
+            // 找到对应的分P
+            const page = videoDetail.pages.find(p => p.cid === Number(cid));
+            if (!page) {
+              console.warn(`未找到对应的分P: cid=${cid}`);
+              continue;
+            }
+            
+            const songData = {
+              id: strBiliId,
+              name: `${page.part || ''} - ${videoDetail.title}`,
+              picUrl: getBilibiliProxyUrl(videoDetail.pic),
+              ar: [
+                {
+                  name: videoDetail.owner.name,
+                  id: videoDetail.owner.mid
+                }
+              ],
+              al: {
+                name: videoDetail.title,
+                picUrl: getBilibiliProxyUrl(videoDetail.pic)
+              },
+              source: 'bilibili',
+              bilibiliData: {
+                bvid,
+                cid: Number(cid)
+              }
+            } as SongResult;
+            
+            bilibiliSongs.push(songData);
+          } catch (error) {
+            console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
           }
         }
       }
-    }
-  }
-
-  .favorite-main {
-    @apply flex flex-col flex-grow min-h-0;
-
-    .favorite-content {
-      @apply flex-grow min-h-0;
-
-      .empty-tip {
-        @apply h-full flex items-center justify-center;
-        @apply text-gray-500 dark:text-gray-400;
-      }
-
-      .favorite-list {
-        @apply space-y-2 pb-4 px-4;
-
-        &-more {
-          @apply mt-4;
-
-          .n-button {
-            @apply text-green-500 hover:text-green-600;
+      
+      console.log('获取数据统计:', {
+        neteaseSongs: neteaseSongs.length,
+        bilibiliSongs: bilibiliSongs.length
+      });
+      
+      // 合并数据，保持原有顺序
+      const newSongs = currentIds
+        .map(id => {
+          const strId = String(id);
+          
+          // 查找B站视频
+          if (typeof id === 'string') {
+            const found = bilibiliSongs.find(song => String(song.id) === strId);
+            if (found) return found;
           }
-        }
+          
+          // 查找网易云音乐
+          const found = neteaseSongs.find(song => String(song.id) === strId);
+          return found;
+        })
+        .filter((song): song is SongResult => !!song);
+      
+      console.log(`最终歌曲列表: ${newSongs.length}首`);
+
+      // 追加新数据而不是替换
+      if (currentPage.value === 1) {
+        favoriteSongs.value = newSongs;
+      } else {
+        favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
       }
+
+      // 判断是否还有更多数据
+      noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
+    } catch (error) {
+      console.error('获取收藏歌曲失败:', error);
+    } finally {
+      loading.value = false;
     }
-  }
-}
+  };
 
-.loading-wrapper {
-  @apply flex justify-center items-center py-20;
-}
+  // 处理滚动事件
+  const handleScroll = (e: any) => {
+    const { scrollTop, scrollHeight, offsetHeight } = e.target;
+    const threshold = 100; // 距离底部多少像素时加载更多
 
-.no-more-tip {
-  @apply text-center py-4 text-sm;
-  @apply text-gray-500 dark:text-gray-400;
-}
+    if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
+      currentPage.value++;
+      getFavoriteSongs();
+    }
+  };
 
-.mobile {
+  onMounted(async () => {
+    await playerStore.initializeFavoriteList();
+    await getFavoriteSongs();
+  });
+
+  // 监听收藏列表变化
+  watch(
+    favoriteList,
+    () => {
+      currentPage.value = 1;
+      noMore.value = false;
+      getFavoriteSongs();
+    },
+    { deep: true, immediate: true }
+  );
+
+  const handlePlay = () => {
+    playerStore.setPlayList(favoriteSongs.value);
+  };
+
+  const getItemAnimationDelay = (index: number) => {
+    return setAnimationDelay(index, 30);
+  };
+
+  const router = useRouter();
+  const handleMore = () => {
+    router.push('/history');
+  };
+
+  // 全选相关
+  const isAllSelected = computed(() => {
+    return (
+      favoriteSongs.value.length > 0 && selectedSongs.value.length === favoriteSongs.value.length
+    );
+  });
+
+  const isIndeterminate = computed(() => {
+    return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
+  });
+
+  // 处理全选/取消全选
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
+    } else {
+      selectedSongs.value = [];
+    }
+  };
+  </script>
+
+  <style lang="scss" scoped>
   .favorite-page {
-    @apply p-4;
+    @apply h-full flex flex-col pt-2;
+    @apply bg-light dark:bg-black;
 
     .favorite-header {
-      @apply mb-4;
+      @apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
 
-      h2 {
-        @apply text-xl;
+      &-left {
+        @apply flex items-center gap-4;
+
+        h2 {
+          @apply text-xl font-bold;
+          @apply text-gray-900 dark:text-white;
+        }
+
+        .favorite-count {
+          @apply text-gray-500 dark:text-gray-400 text-sm;
+        }
+      }
+
+      &-right {
+        @apply flex items-center gap-3;
+
+        .sort-controls {
+          @apply flex items-center;
+          
+          .sort-buttons {
+            @apply flex items-center bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden;
+            @apply border border-gray-200 dark:border-gray-700;
+            
+            .sort-button {
+              @apply flex items-center py-1 px-3 text-sm cursor-pointer;
+              @apply text-gray-600 dark:text-gray-400;
+              @apply transition-all duration-300;
+              
+              &:first-child {
+                @apply border-r border-gray-200 dark:border-gray-700;
+              }
+              
+              .iconfont {
+                @apply mr-1 text-base;
+              }
+              
+              &.active {
+                @apply bg-green-500 text-white dark:text-gray-100;
+                @apply font-medium;
+              }
+              
+              &:hover:not(.active) {
+                @apply bg-gray-200 dark:bg-gray-700;
+              }
+            }
+          }
+        }
+
+        .select-btn {
+          @apply rounded-full px-4 h-8;
+          @apply transition-all duration-300 ease-in-out;
+          @apply hover:bg-primary hover:text-white;
+          @apply dark:border-gray-600;
+
+          .iconfont {
+            @apply mr-1 text-lg;
+          }
+        }
+
+        .select-controls {
+          @apply flex items-center gap-3;
+          @apply bg-gray-50 dark:bg-gray-800;
+          @apply rounded-full px-3 py-1;
+          @apply border border-gray-200 dark:border-gray-700;
+          @apply transition-all duration-300;
+
+          .select-all-checkbox {
+            @apply text-sm text-gray-900 dark:text-gray-200;
+          }
+
+          .operation-btns {
+            @apply flex items-center gap-2 ml-2;
+
+            .download-btn {
+              @apply rounded-full px-4 h-7;
+              @apply bg-primary text-white;
+              @apply hover:bg-primary-dark;
+              @apply disabled:opacity-50 disabled:cursor-not-allowed;
+
+              .iconfont {
+                @apply mr-1 text-lg;
+              }
+            }
+
+            .cancel-btn {
+              @apply rounded-full px-4 h-7;
+              @apply text-gray-600 dark:text-gray-300;
+              @apply hover:bg-gray-100 dark:hover:bg-gray-700;
+              @apply border-gray-300 dark:border-gray-600;
+            }
+          }
+        }
+      }
+    }
+
+    .favorite-main {
+      @apply flex flex-col flex-grow min-h-0;
+
+      .favorite-content {
+        @apply flex-grow min-h-0;
+
+        .empty-tip {
+          @apply h-full flex items-center justify-center;
+          @apply text-gray-500 dark:text-gray-400;
+        }
+
+        .favorite-list {
+          @apply space-y-2 pb-4 px-4;
+
+          &-more {
+            @apply mt-4;
+
+            .n-button {
+              @apply text-green-500 hover:text-green-600;
+            }
+          }
+        }
       }
     }
   }
-}
-</style>
+
+  .loading-wrapper {
+    @apply flex justify-center items-center py-20;
+  }
+
+  .no-more-tip {
+    @apply text-center py-4 text-sm;
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .mobile {
+    .favorite-page {
+      @apply p-4;
+
+      .favorite-header {
+        @apply mb-4;
+
+        h2 {
+          @apply text-xl;
+        }
+      }
+    }
+  }
+  </style>

src/renderer/views/music/MusicListPage.vue

@@ -7,20 +7,75 @@
         </div>
       </n-ellipsis>
 
-      <!-- 搜索框 -->
-      <div class="flex-grow flex-1 flex items-center justify-end">
-        <div class="search-container">
-          <n-input
-            v-model:value="searchKeyword"
-            :placeholder="t('comp.musicList.searchSongs')"
-            clearable
-            round
-            size="small"
-          >
-            <template #prefix>
-              <i class="icon iconfont ri-search-line text-sm"></i>
+      <!-- 搜索框和布局切换 -->
+      <div class="flex-grow flex-1 flex items-center justify-end gap-2">
+        <!-- 操作按钮组 -->
+        <n-tooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <div class="action-button hover-green" @click="handlePlayAll">
+              <i class="icon iconfont ri-play-fill"></i>
+            </div>
+          </template>
+          {{ t('comp.musicList.playAll') }}
+        </n-tooltip>
+
+        <n-tooltip v-if="canCollect" placement="bottom" trigger="hover">
+          <template #trigger>
+            <div class="action-button" :class="isCollected ? 'collected' : 'hover-green'" @click="toggleCollect">
+              <i class="icon iconfont" :class="isCollected ? 'ri-heart-fill' : 'ri-heart-line'"></i>
+            </div>
+          </template>
+          {{ isCollected ? t('comp.musicList.cancelCollect') : t('comp.musicList.collect') }}
+        </n-tooltip>
+
+        <n-tooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <div class="action-button hover-green" @click="addToPlaylist">
+              <i class="icon iconfont ri-add-line"></i>
+            </div>
+          </template>
+          {{ t('comp.musicList.addToPlaylist') }}
+        </n-tooltip>
+        <!-- 布局切换按钮 -->
+        <div class="layout-toggle" v-if="!isMobile">
+          <n-tooltip placement="bottom" trigger="hover">
+            <template #trigger>
+              <div class="toggle-button hover-green" @click="toggleLayout">
+                <i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
+              </div>
             </template>
-          </n-input>
+            {{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
+          </n-tooltip>
+        </div>
+
+        <div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
+          <template v-if="isSearchVisible">
+            <n-input
+              v-model:value="searchKeyword"
+              :placeholder="t('comp.musicList.searchSongs')"
+              clearable
+              round
+              size="small"
+              @blur="handleSearchBlur"
+            >
+              <template #prefix>
+                <i class="icon iconfont ri-search-line text-sm"></i>
+              </template>
+              <template #suffix>
+                <i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
+              </template>
+            </n-input>
+          </template>
+          <template v-else>
+            <n-tooltip placement="bottom" trigger="hover">
+              <template #trigger>
+                <div class="search-button" @click="showSearch">
+                  <i class="icon iconfont ri-search-line"></i>
+                </div>
+              </template>
+              {{ t('comp.musicList.searchSongs') }}
+            </n-tooltip>
+          </template>
         </div>
       </div>
     </div>
@@ -65,14 +120,16 @@
                 class="song-virtual-list"
                 style="height: calc(80vh - 60px)"
                 :items="filteredSongs"
-                :item-size="70"
+                :item-size="isCompactLayout ? 50 : 70"
                 item-resizable
                 key-field="id"
                 @scroll="handleVirtualScroll"
               >
-                <template #default="{ item }">
+                <template #default="{ item, index }">
                   <div class="double-item">
-                    <song-item
+                    <song-item  
+                      :index="index"
+                      :compact="isCompactLayout"
                       :item="formatSong(item)"
                       :can-remove="canRemove"
                       @play="handlePlay"
@@ -97,10 +154,10 @@ defineOptions({
 });
 
 import PinyinMatch from 'pinyin-match';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { updatePlaylistTracks } from '@/api/music';
+import { updatePlaylistTracks, subscribePlaylist } from '@/api/music';
 import { useMessage } from 'naive-ui';
 
 import { getMusicDetail, getMusicListByType } from '@/api/music';
@@ -108,7 +165,7 @@ import SongItem from '@/components/common/SongItem.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import { useMusicStore, usePlayerStore } from '@/store';
 import { SongResult } from '@/type/music';
-import { getImgUrl, setAnimationClass } from '@/utils';
+import { getImgUrl, isMobile, setAnimationClass } from '@/utils';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -122,6 +179,8 @@ const loading = ref(false);
 const songList = ref<any[]>([]);
 const listInfo = ref<any>(null);
 const canRemove = ref(false);
+const canCollect = ref(false);
+const isCollected = ref(false);
 
 const page = ref(0);
 const pageSize = 40;
@@ -135,6 +194,35 @@ const hasMore = ref(true); // 标记是否还有更多数据可加载
 const searchKeyword = ref(''); // 搜索关键词
 const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加载完成
 
+// 添加搜索相关的状态和方法
+const isSearchVisible = ref(false);
+const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'); // 默认使用紧凑布局
+
+const showSearch = () => {
+  isSearchVisible.value = true;
+  // 添加一个小延迟后聚焦搜索框
+  nextTick(() => {
+    const inputEl = document.querySelector('.search-container input');
+    if (inputEl) {
+      (inputEl as HTMLInputElement).focus();
+    }
+  });
+};
+
+const closeSearch = () => {
+  isSearchVisible.value = false;
+  searchKeyword.value = '';
+};
+
+const handleSearchBlur = () => {
+  // 如果搜索框为空，则在失焦时关闭搜索框
+  if (!searchKeyword.value) {
+    setTimeout(() => {
+      isSearchVisible.value = false;
+    }, 200);
+  }
+};
+
 // 计算总数
 const total = computed(() => {
   if (listInfo.value?.trackIds) {
@@ -146,9 +234,15 @@ const total = computed(() => {
 // 初始化数据
 onMounted(() => {
   initData();
+  checkCollectionStatus();
 });
 
 // 从 pinia 或路由参数获取数据
+
+  // 从路由参数获取
+const routeId = route.params.id as string;
+const routeType = route.query.type as string;
+
 const initData = () => {
   // 优先从 pinia 获取数据
   if (musicStore.currentMusicList) {
@@ -162,9 +256,7 @@ const initData = () => {
     return;
   }
   
-  // 从路由参数获取
-  const routeId = route.params.id as string;
-  const routeType = route.query.type as string;
+
   
   if (routeId) {
     // 这里根据 type 和 id 加载数据
@@ -234,14 +326,22 @@ const getCoverImgUrl = computed(() => {
   return '';
 });
 
+const getDisplaySongs = computed(() => {
+  if(routeType === 'dailyRecommend') {
+    return displayedSongs.value.filter((song) => !playerStore.dislikeList.includes(song.id));
+  }else {
+    return displayedSongs.value;
+  }
+})
+
 // 过滤歌曲列表
 const filteredSongs = computed(() => {
   if (!searchKeyword.value) {
-    return displayedSongs.value;
+    return getDisplaySongs.value;
   }
 
   const keyword = searchKeyword.value.toLowerCase().trim();
-  return displayedSongs.value.filter((song) => {
+  return getDisplaySongs.value.filter((song) => {
     const songName = song.name?.toLowerCase() || '';
     const albumName = song.al?.name?.toLowerCase() || '';
     const artists = song.ar || song.artists || [];
@@ -639,6 +739,105 @@ watch(searchKeyword, () => {
 onUnmounted(() => {
   isPlaylistLoading.value = false;
 });
+
+// 切换布局
+const toggleLayout = () => {
+  isCompactLayout.value = !isCompactLayout.value;
+  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
+};
+
+// 初始化歌单收藏状态
+const checkCollectionStatus = () => {
+  // 只有歌单类型才能收藏
+  if (route.query.type === 'playlist' && listInfo.value?.id) {
+    canCollect.value = true;
+    // 检查是否已收藏
+    isCollected.value = listInfo.value.subscribed || false;
+  } else {
+    canCollect.value = false;
+  }
+};
+
+// 切换收藏状态
+const toggleCollect = async () => {
+  if (!listInfo.value?.id) return;
+  
+  try {
+    loadingList.value = true;
+    const tVal = isCollected.value ? 2 : 1; // 1:收藏, 2:取消收藏
+    const response = await subscribePlaylist({
+      t: tVal,
+      id: listInfo.value.id
+    });
+    
+    // 假设API返回格式是 { data: { code: number, msg?: string } }
+    const res = response.data;
+    
+    if (res.code === 200) {
+      isCollected.value = !isCollected.value;
+      const msgKey = isCollected.value 
+        ? 'comp.musicList.collectSuccess'
+        : 'comp.musicList.cancelCollectSuccess';
+      message.success(t(msgKey));
+      // 更新歌单信息
+      listInfo.value.subscribed = isCollected.value;
+    } else {
+      throw new Error(res.msg || t('comp.musicList.operationFailed'));
+    }
+  } catch (error) {
+    console.error('收藏歌单失败:', error);
+    message.error(t('comp.musicList.operationFailed'));
+  } finally {
+    loadingList.value = false;
+  }
+};
+
+// 播放全部
+const handlePlayAll = () => {
+  if (displayedSongs.value.length === 0) return;
+  
+  // 如果有搜索关键词，只播放过滤后的歌曲
+  if (searchKeyword.value) {
+    playerStore.setPlayList(filteredSongs.value.map(formatSong));
+    playerStore.setPlay(formatSong(filteredSongs.value[0]));
+    return;
+  }
+  
+  // 否则播放全部歌曲
+  // 使用setPlayList设置播放列表
+  playerStore.setPlayList(displayedSongs.value.map(formatSong));
+  // 使用setPlay开始播放第一首
+  playerStore.setPlay(formatSong(displayedSongs.value[0]));
+};
+
+// 添加到播放列表末尾
+const addToPlaylist = () => {
+  if (displayedSongs.value.length === 0) return;
+  
+  // 获取当前播放列表
+  const currentList = playerStore.playList;
+  
+  // 如果有搜索关键词，只添加过滤后的歌曲
+  const songsToAdd = searchKeyword.value 
+    ? filteredSongs.value 
+    : displayedSongs.value;
+  
+  // 添加歌曲到播放列表(避免重复添加)
+  const newSongs = songsToAdd.filter(song => 
+    !currentList.some(item => item.id === song.id)
+  );
+  
+  if (newSongs.length === 0) {
+    message.info(t('comp.musicList.songsAlreadyInPlaylist'));
+    return;
+  }
+  
+  // 合并到当前播放列表末尾
+  const newList = [...currentList, ...newSongs.map(formatSong)];
+  playerStore.setPlayList(newList);
+  
+  message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
+};
 </script>
 
 <style scoped lang="scss">
@@ -701,15 +900,24 @@ onUnmounted(() => {
 }
 
 .search-container {
-  @apply max-w-md;
+  @apply max-w-md transition-all duration-300 ease-in-out;
+
+  &.search-expanded {
+    @apply w-52;
+  }
+
+  .search-button {
+    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
+    
+    .icon {
+      @apply text-lg;
+    }
+  }
 
   :deep(.n-input) {
     @apply bg-light-200 dark:bg-dark-200;
   }
 
-  .icon {
-    @apply text-gray-500 dark:text-gray-400;
-  }
 }
 
 .no-result {
@@ -771,4 +979,35 @@ onUnmounted(() => {
     @apply hidden;
   }
 }
+
+.layout-toggle {
+  .toggle-button {
+    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors;
+    
+    .icon {
+      @apply text-lg text-gray-500 dark:text-gray-400 transition-colors;
+    }
+  }
+}
+
+.layout-toggle .toggle-button,
+.action-button {
+  @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
+  
+  .icon {
+    @apply text-lg;
+  }
+
+  &.collected {
+    .icon {
+      @apply text-red-500;
+    }
+  }
+  
+  &.hover-green:hover {
+    .icon {
+      @apply text-green-500;
+    }
+  }
+}
 </style> 

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,28 +140,42 @@
         <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" v-if="isElectron">
               <div>
                 <div class="set-item-title">{{ t('settings.playback.musicSources') }}</div>
@@ -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>
@@ -407,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>
@@ -488,6 +525,8 @@ import config from '../../../../package.json';
 // 所有平台默认值
 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();
 

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

@@ -26,11 +26,11 @@
                     </n-tooltip>
                   </div>
                   <div class="user-info-stats">
-                    <div class="user-info-stat-item">
+                    <div class="user-info-stat-item" @click="showFollowerList">
                       <div class="label">{{ userDetail.profile.followeds }}</div>
                       <div>{{ t('user.profile.followers') }}</div>
                     </div>
-                    <div class="user-info-stat-item">
+                    <div class="user-info-stat-item" @click="showFollowList">
                       <div class="label">{{ userDetail.profile.follows }}</div>
                       <div>{{ t('user.profile.following') }}</div>
                     </div>
@@ -50,10 +50,7 @@
           <n-tabs type="line" animated>
             <!-- 歌单列表 -->
             <n-tab-pane name="playlists" :tab="t('user.detail.playlists')">
-              <div v-if="loading" class="loading-container">
-                <n-spin size="medium" />
-              </div>
-              <div v-else-if="playList.length === 0" class="empty-message">
+              <div v-if="playList.length === 0" class="empty-message">
                 {{ t('user.detail.noPlaylists') }}
               </div>
               <div v-else class="playlist-grid" :class="setAnimationClass('animate__fadeInUp')">
@@ -89,8 +86,11 @@
 
             <!-- 听歌排行 -->
             <n-tab-pane name="records" :tab="t('user.detail.records')">
-              <div v-if="loading" class="loading-container">
-                <n-spin size="medium" />
+              <div v-if="!hasRecordPermission" class="empty-message">
+                <div class="no-permission">
+                  <i class="ri-lock-line text-2xl mr-2"></i>
+                  {{ t('user.detail.noRecordPermission', { name: userDetail.profile.nickname }) }}
+                </div>
               </div>
               <div v-else-if="!recordList || recordList.length === 0" class="empty-message">
                 {{ t('user.detail.noRecords') }}
@@ -103,10 +103,7 @@
                   :class="setAnimationClass('animate__bounceInUp')"
                   :style="setAnimationDelay(index, 25)"
                 >
-                  <div class="play-score">
-                    {{ index + 1 }}
-                  </div>
-                  <song-item class="song-item" :item="item" mini @play="handlePlay" />
+                  <song-item class="song-item" :index="index" :item="item" compact @play="handlePlay" />
                 </div>
               </div>
             </n-tab-pane>
@@ -125,7 +122,7 @@
 
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -150,12 +147,12 @@ const playerStore = usePlayerStore();
 
 // 获取路由参数中的用户ID
 const userId = ref<number>(Number(route.params.uid));
-
 // 用户数据
 const userDetail = ref<IUserDetail>();
 const playList = ref<any[]>([]);
 const recordList = ref<any[]>([]);
 const loading = ref(true);
+const hasRecordPermission = ref(true); // 是否有权限查看听歌记录
 
 // 歌单详情相关
 const currentList = ref<Playlist>();
@@ -171,34 +168,68 @@ const loadUserData = async () => {
 
   try {
     loading.value = true;
+    recordList.value = []; // 清空之前的记录
+    hasRecordPermission.value = true; // 重置权限状态
 
-    // 使用 Promise.all 并行请求提高效率
-    const [userDetailRes, playlistRes, recordRes] = await Promise.all([
-      getUserDetail(userId.value),
-      getUserPlaylist(userId.value),
-      getUserRecord(userId.value)
-    ]);
+    // 分开处理请求，处理可能的错误
+    // 1. 获取用户详情和歌单列表
+    try {
+      const [userDetailRes, playlistRes] = await Promise.all([
+        getUserDetail(userId.value),
+        getUserPlaylist(userId.value)
+      ]);
 
-    userDetail.value = userDetailRes.data;
-    playList.value = playlistRes.data.playlist;
+      userDetail.value = userDetailRes.data;
+      playList.value = playlistRes.data.playlist;
+    } catch (error) {
+      console.error('加载用户基本信息失败:', error);
+      message.error(t('user.message.loadBasicInfoFailed'));
+      return; // 如果基本信息加载失败，直接返回
+    }
 
-    if (recordRes.data && recordRes.data.allData) {
-      recordList.value = recordRes.data.allData.map((item: any) => ({
-        ...item,
-        ...item.song,
-        picUrl: item.song.al.picUrl
-      }));
-    } else {
-      recordList.value = [];
+    // 2. 单独处理听歌记录请求，这个请求可能会无权限
+    try {
+      const recordRes = await getUserRecord(userId.value);
+      
+      if (recordRes.data && recordRes.data.allData) {
+        recordList.value = recordRes.data.allData.map((item: any) => ({
+          ...item,
+          ...item.song,
+          picUrl: item.song.al.picUrl
+        }));
+      }
+    } catch (error: any) {
+      console.error('加载听歌记录失败:', error);
+      // 判断是否是无权限错误
+      if (error.response?.data?.code === -2 || error.data?.code === -2) {
+        hasRecordPermission.value = false;
+      }
+      // 不显示错误消息，因为这是预期的情况
     }
   } catch (error) {
     console.error('加载用户数据失败:', error);
-    message.error('加载用户数据失败');
+    message.error(t('user.message.loadFailed'));
   } finally {
     loading.value = false;
   }
 };
 
+// 使用onMounted和watch结合的方式解决路由变化问题
+onMounted(() => {
+  loadUserData();
+});
+
+// 监听路由参数变化
+watch(
+  () => route.params.uid,
+  (newUid) => {
+    if (newUid && Number(newUid) !== userId.value) {
+      userId.value = Number(newUid);
+      loadUserData();
+    }
+  }
+);
+
 // 替换显示歌单的方法
 const openPlaylist = (item: any) => {
   listLoading.value = true;
@@ -226,15 +257,36 @@ const handlePlay = () => {
   playerStore.setPlayList(tracks);
 };
 
+// 显示关注列表
+const showFollowList = () => {
+  if (!userDetail.value) return;
+  
+  router.push({
+    path: `/user/follows`,
+    query: { 
+      uid: userId.value.toString(),
+      name: userDetail.value.profile.nickname 
+    }
+  });
+};
+
+// 显示粉丝列表
+const showFollowerList = () => {
+  if (!userDetail.value) return;
+  
+  router.push({
+    path: `/user/followers`,
+    query: { 
+      uid: userId.value.toString(),
+      name: userDetail.value.profile.nickname 
+    }
+  });
+};
+
 // 判断是否为歌手
 const isArtist = (profile: any) => {
   return profile.userType === 4 || profile.userType === 2 || profile.accountType === 2;
 };
-
-// 页面挂载时加载数据
-onMounted(() => {
-  loadUserData();
-});
 </script>
 
 <style lang="scss" scoped>
@@ -288,6 +340,11 @@ onMounted(() => {
         .label {
           @apply text-lg font-bold;
         }
+        
+        &:nth-child(1), &:nth-child(2) {
+          @apply cursor-pointer transition-all duration-200;
+          @apply hover:bg-black hover:bg-opacity-20 rounded-lg px-2;
+        }
       }
     }
 
@@ -365,5 +422,14 @@ onMounted(() => {
 
 .empty-message {
   @apply flex justify-center items-center p-8;
+
+  .no-permission {
+    @apply flex flex-col items-center justify-center text-gray-500 dark:text-gray-400;
+    @apply p-4 rounded-lg;
+    
+    i {
+      @apply text-3xl mb-2;
+    }
+  }
 }
 </style>

src/renderer/views/user/followers.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="followers-page">
     <div class="content-wrapper">
+      <div class="page-title" v-if="targetUserName">
+        {{ targetUserName + t('user.follower.userFollowersTitle') }}
+      </div>
+      <div class="page-title" v-else>
+        {{ t('user.follower.myFollowersTitle') }}
+      </div>
+      
       <n-spin v-if="followerListLoading && followerList.length === 0" size="large" />
       <n-scrollbar v-else class="scrollbar-container">
         <div v-if="followerList.length === 0" class="empty-follower">
@@ -60,9 +67,9 @@
 
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 import { getUserFollowers } from '@/api/user';
 import { useUserStore } from '@/store/modules/user';
@@ -77,6 +84,7 @@ const { t } = useI18n();
 const userStore = useUserStore();
 const router = useRouter();
 const message = useMessage();
+const route = useRoute();
 
 // 粉丝列表相关
 const followerList = ref<IUserFollow[]>([]);
@@ -84,9 +92,26 @@ const followerOffset = ref(0);
 const followerLimit = ref(30);
 const hasMoreFollowers = ref(false);
 const followerListLoading = ref(false);
+const targetUserId = ref<number | null>(null);
+const targetUserName = ref<string>('');
 
 const user = computed(() => userStore.user);
 
+// 检查是否有指定用户ID
+const checkTargetUser = () => {
+  const uid = route.query.uid;
+  const name = route.query.name;
+  
+  if (uid && typeof uid === 'string') {
+    targetUserId.value = parseInt(uid);
+    targetUserName.value = typeof name === 'string' ? name : '';
+    return true;
+  }
+  
+  // 如果没有指定用户ID，则显示当前登录用户的粉丝列表
+  return checkLoginStatus();
+};
+
 // 检查登录状态
 const checkLoginStatus = () => {
   const token = localStorage.getItem('token');
@@ -107,12 +132,15 @@ const checkLoginStatus = () => {
 
 // 加载粉丝列表
 const loadFollowerList = async () => {
-  if (!user.value) return;
+  // 确定要加载哪个用户的粉丝列表
+  const userId = targetUserId.value || (user.value?.userId);
+  
+  if (!userId) return;
 
   try {
     followerListLoading.value = true;
     const { data } = await getUserFollowers(
-      user.value.userId,
+      userId,
       followerLimit.value,
       followerOffset.value
     );
@@ -129,7 +157,7 @@ const loadFollowerList = async () => {
     hasMoreFollowers.value = newFollowers.length >= followerLimit.value;
   } catch (error) {
     console.error('加载粉丝列表失败:', error);
-    message.error('加载粉丝列表失败');
+    message.error(t('user.follower.loadFailed'));
   } finally {
     followerListLoading.value = false;
   }
@@ -157,7 +185,17 @@ const isArtist = (user: IUserFollow) => {
 
 // 页面挂载时加载数据
 onMounted(() => {
-  if (checkLoginStatus()) {
+  if (checkTargetUser()) {
+    loadFollowerList();
+  }
+});
+
+// 监听路由变化重新加载数据
+watch(() => route.query, (newQuery) => {
+  if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
+    followerList.value = []; // 清空列表
+    followerOffset.value = 0; // 重置偏移量
+    checkTargetUser();
     loadFollowerList();
   }
 });
@@ -238,4 +276,9 @@ onMounted(() => {
 .loading-more {
   @apply my-4;
 }
+
+.page-title {
+  @apply text-xl font-bold mb-4;
+  @apply text-gray-900 dark:text-white;
+}
 </style>

src/renderer/views/user/follows.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="follows-page">
     <div class="content-wrapper">
+      <div class="page-title" v-if="targetUserName">
+        {{ targetUserName + t('user.follow.userFollowsTitle') }}
+      </div>
+      <div class="page-title" v-else>
+        {{ t('user.follow.myFollowsTitle') }}
+      </div>
+      
       <n-spin v-if="followListLoading && followList.length === 0" size="large" />
       <n-scrollbar v-else class="scrollbar-container">
         <div v-if="followList.length === 0" class="empty-follow">
@@ -60,9 +67,9 @@
 
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 import { getUserFollows } from '@/api/user';
 import { useUserStore } from '@/store/modules/user';
@@ -77,6 +84,7 @@ const { t } = useI18n();
 const userStore = useUserStore();
 const router = useRouter();
 const message = useMessage();
+const route = useRoute();
 
 // 关注列表相关
 const followList = ref<IUserFollow[]>([]);
@@ -84,9 +92,26 @@ const followOffset = ref(0);
 const followLimit = ref(30);
 const hasMoreFollows = ref(false);
 const followListLoading = ref(false);
+const targetUserId = ref<number | null>(null);
+const targetUserName = ref<string>('');
 
 const user = computed(() => userStore.user);
 
+// 检查是否有指定用户ID
+const checkTargetUser = () => {
+  const uid = route.query.uid;
+  const name = route.query.name;
+  
+  if (uid && typeof uid === 'string') {
+    targetUserId.value = parseInt(uid);
+    targetUserName.value = typeof name === 'string' ? name : '';
+    return true;
+  }
+  
+  // 如果没有指定用户ID，则显示当前登录用户的关注列表
+  return checkLoginStatus();
+};
+
 // 检查登录状态
 const checkLoginStatus = () => {
   const token = localStorage.getItem('token');
@@ -107,11 +132,14 @@ const checkLoginStatus = () => {
 
 // 加载关注列表
 const loadFollowList = async () => {
-  if (!user.value) return;
+  // 确定要加载哪个用户的关注列表
+  const userId = targetUserId.value || (user.value?.userId);
+  
+  if (!userId) return;
 
   try {
     followListLoading.value = true;
-    const { data } = await getUserFollows(user.value.userId, followLimit.value, followOffset.value);
+    const { data } = await getUserFollows(userId, followLimit.value, followOffset.value);
 
     if (!data || !data.follow) {
       hasMoreFollows.value = false;
@@ -125,7 +153,7 @@ const loadFollowList = async () => {
     hasMoreFollows.value = newFollows.length >= followLimit.value;
   } catch (error) {
     console.error('加载关注列表失败:', error);
-    message.error('加载关注列表失败');
+    message.error(t('user.follow.loadFailed'));
   } finally {
     followListLoading.value = false;
   }
@@ -153,7 +181,17 @@ const isArtist = (user: IUserFollow) => {
 
 // 页面挂载时加载数据
 onMounted(() => {
-  if (checkLoginStatus()) {
+  if (checkTargetUser()) {
+    loadFollowList();
+  }
+});
+
+// 监听路由变化重新加载数据
+watch(() => route.query, (newQuery) => {
+  if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
+    followList.value = []; // 清空列表
+    followOffset.value = 0; // 重置偏移量
+    checkTargetUser();
     loadFollowList();
   }
 });
@@ -234,4 +272,9 @@ onMounted(() => {
 .loading-more {
   @apply my-4;
 }
+
+.page-title {
+  @apply text-xl font-bold mb-4;
+  @apply text-gray-900 dark:text-white;
+}
 </style>

src/renderer/views/user/index.vue

@@ -43,7 +43,12 @@
                 preview-disabled
               />
               <div class="play-list-item-info">
-                <div class="play-list-item-name">{{ item.name }}</div>
+                <div class="play-list-item-name">
+                  {{ item.name }}
+                  <div v-if="item.creator.userId === user.userId" class="playlist-creator-tag">
+                    {{ t('user.playlist.mine') }}
+                  </div>
+                </div>
                 <div class="play-list-item-count">
                   {{ t('user.playlist.trackCount', { count: item.trackCount }) }}，{{
                     t('user.playlist.playCount', { count: item.playCount })
@@ -353,11 +358,22 @@ const showFollowList = () => {
     }
 
     &-info {
-      @apply ml-2;
+      @apply ml-2 flex-1;
     }
 
     &-name {
-      @apply text-gray-900 dark:text-white text-base;
+      @apply text-gray-900 dark:text-white text-base flex items-center gap-2;
+      
+      .playlist-creator-tag {
+        @apply inline-flex items-center justify-center px-2 rounded-full text-xs;
+        @apply bg-light-300 text-primary dark:bg-dark-300 dark:text-white;
+        @apply border border-primary/20 dark:border-primary/30;
+        height: 18px;
+        font-size: 10px;
+        font-weight: 500;
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+      }
     }
 
     &-count {