🐞 fix: 修复歌曲播放地址缓存导致播放失败问题添加过期时间

🌈 style: v4.3.0
✨ feat: 优化歌单加载逻辑
2026-04-07 00:50:50 +08:00 · 2025-04-16 00:03:56 +08:00 · 2025-04-13 00:04:48 +08:00 · 2025-04-12 23:51:37 +08:00 · 2025-04-12 23:16:12 +08:00 · 2025-04-12 13:05:08 +08:00
88 changed files with 7143 additions and 904 deletions
--- a/.cursor/rules/music-vue-rule.mdc
+++ b/.cursor/rules/music-vue-rule.mdc
@@ -0,0 +1,92 @@
+---
+description: 这个规则是项目描述
+globs: 
+alwaysApply: false
+---
+您是 TypeScript、Node.j、Vue3、Electron、naive-ui、VueUse 和 Tailwind 方面的专家。
+
+项目结构
+- 这是 Electron 项目，使用 Vue3 和 Pinia 进行开发的第三方网易云音乐播放器。
+- 使用 Vue3 和 Pinia 进行开发。
+- 使用 Pinia 进行状态管理。
+- 使用 VueUse 进行状态管理。
+- 使用 naive-ui 进行 UI 设计。
+- 使用 Tailwind 进行样式设计。
+- 使用 remixicon 进行图标设计。
+- 使用 vite 进行项目构建。
+- 使用 electron-builder 进行项目打包。
+- 使用 electron-vite 进行项目开发。
+- 使用 netease-cloud-music-api 进行网易云音乐接口调用。
+- 使用 electron-store 进行本地数据存储。
+- 使用 axios 进行网络请求。
+- 使用 @unblockneteasemusic/server 进行网易云音乐解锁。
+- 使用 vue-i18n 进行国际化。目录为 src/i18n
+
+代码风格和结构
+- 编写简洁、技术性的 TypeScript 代码，并提供准确示例。
+- 使用组合 API 和声明性编程模式；避免使用选项 API。
+- 优先使用迭代和模块化，而不是代码重复。
+- 使用带有助动词的描述性变量名称（例如 isLoading、hasError）。
+- 结构文件：导出的组件、可组合项、帮助程序、静态内容、类型。
+
+命名约定
+- 使用带破折号的小写字母表示目录（例如 components/auth-wizard）。
+- 使用 PascalCase 表示组件名称（例如 AuthWizard.vue）。
+- 使用 camelCase 表示可组合项（例如 useAuthState.ts）。
+
+TypeScript 用法
+- 对所有代码使用 TypeScript；优先使用类型而不是接口。
+- 避免使用枚举；改用 const 对象。
+- 将 Vue 3 与 TypeScript 结合使用，利用 defineComponent 和 PropType。
+
+语法和格式
+- 对方法和计算属性使用箭头函数。
+- 避免在条件中使用不必要的花括号；对简单语句使用简洁的语法。
+- 使用模板语法进行声明式渲染。
+
+UI 和样式
+- 使用 naive-ui 和 Tailwind 进行组件和样式设计。
+- 使用 Tailwind CSS 实现响应式设计；采用移动优先方法。
+
+图标
+- 使用 remixicon 作为图标库。
+
+性能优化
+- 对异步组件使用 Suspense。
+- 为路由和组件实现延迟加载。
+
+关键约定
+- 对常见可组合项和实用函数使用 VueUse。
+- 使用 Pinia 进行状态管理。
+- 优化 Web Vitals（LCP、CLS、FID）。
+
+
+Vue 3 和 Composition API 最佳实践
+- 使用 <script setup lang="ts"> 语法进行简洁的组件定义。
+- 利用 ref、reactive 和 computed 进行反应状态管理。
+- 在适当的情况下使用 provide/inject 进行依赖注入。
+- 实现自定义可组合项以实现可重用逻辑。
+
+
+Electron 最佳实践
+- 使用 Electron 和 Vue.js 进行跨平台桌面应用程序开发。
+- 使用 Electron 的 API 和 Vue.js 的组合 API 进行开发。
+- 实现自定义可组合项以实现可重用逻辑。
+
+
+
+组件导入
+- 使用 auto-import 进行组件导入。
+- naive-ui 组件自动导入 不需要手动导入。
+
+关注官方 Electron 和 Vue.js 文档，了解有关数据获取、渲染和路由的最新最佳实践。
+
+
+
+问题修复
+- 思考 5-7 种可能导致问题的来源，并根据可能性、对功能的影响以及在类似问题中的出现频率进行优先排序。仅考虑与错误日志、最近代码变更和系统约束相匹配的来源。忽略外部依赖，除非日志明确指向它们。
+- 一旦缩小到 1-2 个最可能的来源，将其与历史错误日志、相关系统状态和预期行为进行交叉验证。如果发现不一致，调整你的假设。
+- 在添加日志时，确保它们被策略性地放置，以便同时确认或排除多个潜在原因。如果日志不支持你的假设，请先提出替代的调试策略，再继续深入分析。
+- 在实施修复之前，先总结问题现象、经过验证的假设，以及预期的日志输出，以确认问题是否真正得到解决。
+
+
--- a/.cursor/rules/project.mdc
+++ b/.cursor/rules/project.mdc
@@ -0,0 +1,148 @@
+---
+description: 这个规则是项目结构
+globs: 
+alwaysApply: false
+---
+# AlgerMusicPlayer 项目结构
+
+AlgerMusicPlayer 是一个基于 Electron、Vue 3、TypeScript 开发的网易云音乐第三方播放器。
+
+## 技术栈
+
+- **前端框架**：Vue 3 + TypeScript
+- **UI 组件库**：naive-ui
+- **样式框架**：Tailwind CSS
+- **图标库**：remixicon
+- **状态管理**：Pinia
+- **工具库**：VueUse
+- **构建工具**：Vite, electron-vite
+- **打包工具**：electron-builder
+- **国际化**：vue-i18n
+- **HTTP 客户端**：axios
+- **本地存储**：electron-store localstorage
+- **网易云音乐 API**：netease-cloud-music-api
+- **音乐解锁**：@unblockneteasemusic/server
+
+## 项目结构
+
+```
+AlgerMusicPlayer/
+├── build/                  # 构建相关文件
+├── docs/                   # 项目文档
+├── node_modules/           # 依赖包
+├── out/                    # 构建输出目录
+├── resources/              # 资源文件
+├── src/                    # 源代码
+│   ├── i18n/               # 国际化配置
+│   │   ├── lang/           # 语言包
+│   │   ├── main.ts         # 主进程国际化入口
+│   │   └── renderer.ts     # 渲染进程国际化入口
+│   ├── main/               # Electron 主进程
+│   │   ├── modules/        # 主进程模块
+│   │   ├── index.ts        # 主进程入口
+│   │   ├── lyric.ts        # 歌词处理
+│   │   ├── server.ts       # 服务器
+│   │   ├── set.json        # 设置
+│   │   └── unblockMusic.ts # 音乐解锁
+│   ├── preload/            # 预加载脚本
+│   │   ├── index.ts        # 预加载脚本入口
+│   │   └── index.d.ts      # 预加载脚本类型声明
+│   └── renderer/           # Vue 渲染进程
+│       ├── api/            # API 请求
+│       ├── assets/         # 静态资源
+│       ├── components/     # 组件
+│       │   ├── common/     # 通用组件
+│       │   ├── home/       # 首页组件
+│       │   ├── lyric/      # 歌词组件
+│       │   ├── settings/   # 设置组件
+│       │   └── ...         # 其他组件
+│       ├── const/          # 常量定义
+│       ├── directive/      # 自定义指令
+│       ├── hooks/          # 自定义 Hooks
+│       ├── layout/         # 布局组件
+│       ├── router/         # 路由配置
+│       ├── services/       # 服务
+│       ├── store/          # Pinia 状态管理
+│       │   ├── modules/    # Pinia 模块
+│       │   └── index.ts    # Pinia 入口
+│       ├── type/           # 类型定义
+│       ├── types/          # 更多类型定义
+│       ├── utils/          # 工具函数
+│       ├── views/          # 页面视图
+│       ├── App.vue         # 根组件
+│       ├── index.css       # 全局样式
+│       ├── index.html      # HTML 模板
+│       ├── main.ts         # 渲染进程入口
+│       └── ...             # 其他文件
+├── .env.development        # 开发环境变量
+├── .env.development.local  # 本地开发环境变量
+├── .env.production.local   # 本地生产环境变量
+├── .eslintrc.cjs           # ESLint 配置
+├── .gitignore              # Git 忽略文件
+├── .prettierrc.yaml        # Prettier 配置
+├── electron-builder.yml    # electron-builder 配置
+├── electron.vite.config.ts # electron-vite 配置
+├── package.json            # 项目配置
+├── postcss.config.js       # PostCSS 配置
+├── tailwind.config.js      # Tailwind 配置
+├── tsconfig.json           # TypeScript 配置
+├── tsconfig.node.json      # 节点 TypeScript 配置
+└── tsconfig.web.json       # Web TypeScript 配置
+```
+
+## 主要组件说明
+
+### 主进程 (src/main)
+
+主进程负责创建窗口、处理系统层面的交互以及与渲染进程的通信。
+
+- **index.ts**: 应用主入口，负责创建窗口和应用生命周期管理
+- **lyric.ts**: 歌词解析和处理
+- **unblockMusic.ts**: 网易云音乐解锁功能
+- **server.ts**: 本地服务器
+
+### 预加载脚本 (src/preload)
+
+预加载脚本在渲染进程加载前执行，提供了渲染进程和主进程之间的桥接功能。
+
+### 渲染进程 (src/renderer)
+
+渲染进程是基于 Vue 3 的前端应用，负责 UI 渲染和用户交互。
+
+- **components/**: 包含各种 UI 组件
+  - **common/**: 通用组件
+  - **home/**: 首页相关组件
+  - **lyric/**: 歌词显示组件
+  - **settings/**: 设置界面组件
+  - **MusicList.vue**: 音乐列表组件
+  - **MvPlayer.vue**: MV 播放器
+  - **EQControl.vue**: 均衡器控制
+  - **...**: 其他组件
+
+- **store/**: Pinia 状态管理
+  - **modules/**: 各功能模块的状态管理
+  - **index.ts**: 状态管理入口
+
+- **views/**: 页面视图组件
+
+- **router/**: 路由配置
+
+- **api/**: API 请求封装
+
+- **utils/**: 工具函数
+
+## 开发指南
+
+### 命名约定
+
+- 目录使用 kebab-case (如: components/auth-wizard)
+- 组件文件名使用 PascalCase (如: AuthWizard.vue)
+- 可组合式函数使用 camelCase (如: useAuthState.ts)
+
+### 代码风格
+
+- 使用 Composition API 和 `<script setup>` 语法
+- 使用 TypeScript 类型系统
+- 优先使用类型而非接口
+- 避免使用枚举，使用 const 对象代替
+- 使用 tailwind 实现响应式设计
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,19 +1,17 @@
 # 更新日志

-## v4.1.0
-
-### 🐛 Bug 修复
- 修复歌词窗口处理逻辑, 修复windows系统下桌面歌词窗口拖动问题
- 解决歌词初始化重复播放问题
+## v4.3.0

 ### ✨ 新功能
- 优化移动端和网页端效果和体验
- 增加系统控制的音频服务的上一曲和下一曲功能
- 优化用户数据加载逻辑和错误处理
- 增强语言切换功能
- 首页添加用户歌单推荐
- 优化音频监听器初始化和设置保存逻辑
+- 歌曲下载内置封面歌词歌曲信息，添加无限制下载功能，优化下载页面添加下载记录清除功能 ([3b1488f](https://github.com/algerkong/AlgerMusicPlayer/commit/3b1488f)) (#123) ([988418e](https://github.com/algerkong/AlgerMusicPlayer/commit/988418e))
+- 添加搜索功能至歌曲列表，支持名称、歌手、专辑搜索，支持拼音匹配 ([b593ca3](https://github.com/algerkong/AlgerMusicPlayer/commit/b593ca3)) (#126)
+- 添加快捷键管理功能，支持全局和应用内快捷键的启用/禁用 ([c2983ba](https://github.com/algerkong/AlgerMusicPlayer/commit/c2983ba)) (#119)
+- 优化歌单加载、播放逻辑，提升大型歌单加载性能 ([7bc8405](https://github.com/algerkong/AlgerMusicPlayer/commit/7bc8405))、([d7fea7f](https://github.com/algerkong/AlgerMusicPlayer/commit/d7fea7f))
+- 添加直接播放首页歌单功能 ([5f4b53c](https://github.com/algerkong/AlgerMusicPlayer/commit/5f4b53c))
+- 添加统计服务([a7f2045](https://github.com/algerkong/AlgerMusicPlayer/commit/a7f2045))
+- 优化历史和收藏视图的加载体验 ([09f8837](https://github.com/algerkong/AlgerMusicPlayer/commit/09f8837))
+- 优化歌词界面配置，提供更好的用户体验 ([55b50d7](https://github.com/algerkong/AlgerMusicPlayer/commit/55b50d7))

-### 🔄 重构
- 将 Vuex 替换为 Pinia 状态管理
- 更新依赖版本
+### 🐛 Bug 修复
+- 优化音乐封面显示逻辑，确保在缺失封面时使用默认图片 ([bb7d1e3](https://github.com/algerkong/AlgerMusicPlayer/commit/bb7d1e3))
+- 优化桌面歌词行动态样式计算，提升歌词显示效果 ([541ff2b](https://github.com/algerkong/AlgerMusicPlayer/commit/541ff2b))
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "AlgerMusicPlayer",
-  "version": "4.1.0",
+  "version": "4.3.0",
  "description": "Alger Music Player",
  "author": "Alger <algerkc@qq.com>",
  "main": "./out/main/index.js",
@@ -27,7 +27,9 @@
    "electron-store": "^8.1.0",
    "electron-updater": "^6.1.7",
    "font-list": "^1.5.1",
-    "netease-cloud-music-api-alger": "^4.25.0",
+    "netease-cloud-music-api-alger": "^4.26.1",
+    "node-id3": "^0.2.9",
+    "node-machine-id": "^1.1.12",
    "vue-i18n": "9"
  },
  "devDependencies": {
@@ -68,6 +70,7 @@
    "marked": "^15.0.4",
    "naive-ui": "^2.41.0",
    "pinia": "^3.0.1",
+    "pinyin-match": "^1.2.6",
    "postcss": "^8.5.3",
    "prettier": "^3.3.2",
    "remixicon": "^4.6.0",
--- a/resources/icons/next.png
+++ b/resources/icons/next.png
--- a/resources/icons/pause.png
+++ b/resources/icons/pause.png
--- a/resources/icons/play.png
+++ b/resources/icons/play.png
--- a/resources/icons/prev.png
+++ b/resources/icons/prev.png
--- a/src/i18n/lang/en-US/common.ts
+++ b/src/i18n/lang/en-US/common.ts
@@ -41,7 +41,12 @@ export default {
  songCount: '{count} songs',
  tray: {
    show: 'Show',
-    quit: 'Quit'
+    quit: 'Quit',
+    playPause: 'Play/Pause',
+    prev: 'Previous',
+    next: 'Next',
+    pause: 'Pause',
+    play: 'Play'
  },
  language: 'Language'
 };
--- a/src/i18n/lang/en-US/comp.ts
+++ b/src/i18n/lang/en-US/comp.ts
@@ -39,7 +39,18 @@ export default {
    downloadFailed: 'Download failed, please try again or download manually',
    startFailed: 'Start download failed, please try again or download manually',
    noDownloadUrl:
-      'No suitable installation package found for the current system, please download manually'
+      'No suitable installation package found for the current system, please download manually',
+    installConfirmTitle: 'Install Update',
+    installConfirmContent: 'Do you want to close the application and install the update?',
+    manualInstallTip:
+      'If the installer does not open automatically after closing the application, please find the file in your download folder and open it manually.',
+    yesInstall: 'Install Now',
+    noThanks: 'Later',
+    fileLocation: 'File Location',
+    copy: 'Copy Path',
+    copySuccess: 'Path copied to clipboard',
+    copyFailed: 'Copy failed',
+    backgroundDownload: 'Background Download'
  },
  coffee: {
    title: 'Buy me a coffee',
@@ -90,5 +101,9 @@ export default {
  },
  userPlayList: {
    title: "{name}'s Playlist"
+  },
+  musicList: {
+    searchSongs: 'Search Songs',
+    noSearchResults: 'No search results'
  }
 };
--- a/src/i18n/lang/en-US/download.ts
+++ b/src/i18n/lang/en-US/download.ts
@@ -1,6 +1,8 @@
 export default {
  title: 'Download Manager',
  localMusic: 'Local Music',
+  count: '{count} songs in total',
+  clearAll: 'Clear All',
  tabs: {
    downloading: 'Downloading',
    downloaded: 'Downloaded'
@@ -27,7 +29,17 @@ export default {
    confirm: 'Delete',
    cancel: 'Cancel',
    success: 'Successfully deleted',
-    failed: 'Failed to delete'
+    failed: 'Failed to delete',
+    fileNotFound: 'File not found or moved, removed from records',
+    recordRemoved: 'Failed to delete file, but removed from records'
+  },
+  clear: {
+    title: 'Clear Download Records',
+    message:
+      'Are you sure you want to clear all download records? This will not delete the actual music files, but will clear all records.',
+    confirm: 'Clear',
+    cancel: 'Cancel',
+    success: 'Download records cleared'
  },
  message: {
    downloadComplete: '{filename} download completed',
--- a/src/i18n/lang/en-US/settings.ts
+++ b/src/i18n/lang/en-US/settings.ts
@@ -71,6 +71,8 @@ export default {
    shortcutDesc: 'Customize global shortcuts',
    download: 'Download Management',
    downloadDesc: 'Always show download list button',
+    unlimitedDownload: 'Unlimited Download',
+    unlimitedDownloadDesc: 'Enable unlimited download mode for music , default limit 300 songs',
    downloadPath: 'Download Directory',
    downloadPathDesc: 'Choose download location for music files'
  },
@@ -181,6 +183,13 @@ export default {
      default: 'Default',
      light: 'Light',
      dark: 'Dark'
+    },
+    hideMiniPlayBar: 'Hide Mini Play Bar',
+    hideLyrics: 'Hide Lyrics',
+    tabs: {
+      interface: 'Interface',
+      display: 'Display',
+      typography: 'Typography'
    }
  },
  shortcutSettings: {
@@ -190,6 +199,8 @@ export default {
    shortcutConflict: 'Shortcut Conflict',
    inputPlaceholder: 'Click to input shortcut',
    resetShortcuts: 'Reset',
+    disableAll: 'Disable All',
+    enableAll: 'Enable All',
    togglePlay: 'Play/Pause',
    prevPlay: 'Previous',
    nextPlay: 'Next',
@@ -197,12 +208,18 @@ export default {
    volumeDown: 'Volume Down',
    toggleFavorite: 'Favorite/Unfavorite',
    toggleWindow: 'Show/Hide Window',
+    scopeGlobal: 'Global',
+    scopeApp: 'App Only',
+    enabled: 'Enabled',
+    disabled: 'Disabled',
    messages: {
      resetSuccess: 'Shortcuts reset successfully, please save',
      conflict: 'Shortcut conflict, please reset',
      saveSuccess: 'Shortcuts saved successfully',
      saveError: 'Failed to save shortcuts',
-      cancelEdit: 'Edit cancelled'
+      cancelEdit: 'Edit cancelled',
+      disableAll: 'All shortcuts disabled, please save to apply',
+      enableAll: 'All shortcuts enabled, please save to apply'
    }
  }
 };
--- a/src/i18n/lang/en-US/songItem.ts
+++ b/src/i18n/lang/en-US/songItem.ts
@@ -13,6 +13,6 @@ export default {
    downloadFailed: 'Download failed',
    downloadQueued: 'Added to download queue',
    addedToNextPlay: 'Added to play next',
-    getUrlFailed: 'Failed to get music download URL'
+    getUrlFailed: 'Failed to get music download URL, please check if logged in'
  }
 };
--- a/src/i18n/lang/en-US/user.ts
+++ b/src/i18n/lang/en-US/user.ts
@@ -13,6 +13,27 @@ export default {
    title: 'Listening History',
    playCount: '{count} times'
  },
+  follow: {
+    title: 'Follow List',
+    viewPlaylist: 'View Playlist',
+    noFollowings: 'No Followings',
+    loadMore: 'Load More',
+    noSignature: 'This guy is lazy, nothing left'
+  },
+  follower: {
+    title: 'Follower List',
+    noFollowers: 'No Followers',
+    loadMore: 'Load More'
+  },
+  detail: {
+    playlists: 'Playlists',
+    records: 'Listening History',
+    noPlaylists: 'No Playlists',
+    noRecords: 'No Listening History',
+    artist: 'Artist',
+    noSignature: 'This guy is lazy, nothing left',
+    invalidUserId: 'Invalid User ID'
+  },
  message: {
    loadFailed: 'Failed to load user page',
    deleteSuccess: 'Successfully deleted',
--- a/src/i18n/lang/zh-CN/common.ts
+++ b/src/i18n/lang/zh-CN/common.ts
@@ -41,6 +41,11 @@ export default {
  language: '语言',
  tray: {
    show: '显示',
-    quit: '退出'
+    quit: '退出',
+    playPause: '播放/暂停',
+    prev: '上一首',
+    next: '下一首',
+    pause: '暂停',
+    play: '播放'
  }
 };
--- a/src/i18n/lang/zh-CN/comp.ts
+++ b/src/i18n/lang/zh-CN/comp.ts
@@ -38,7 +38,17 @@ export default {
    nowUpdate: '立即更新',
    downloadFailed: '下载失败，请重试或手动下载',
    startFailed: '启动下载失败，请重试或手动下载',
-    noDownloadUrl: '未找到适合当前系统的安装包，请手动下载'
+    noDownloadUrl: '未找到适合当前系统的安装包，请手动下载',
+    installConfirmTitle: '安装更新',
+    installConfirmContent: '是否关闭应用并安装更新？',
+    manualInstallTip: '如果关闭应用后没有正常弹出安装程序，请至下载文件夹查找文件并手动打开。',
+    yesInstall: '立即安装',
+    noThanks: '稍后安装',
+    fileLocation: '文件位置',
+    copy: '复制路径',
+    copySuccess: '路径已复制到剪贴板',
+    copyFailed: '复制失败',
+    backgroundDownload: '后台下载'
  },
  coffee: {
    title: '请我喝咖啡',
@@ -89,5 +99,9 @@ export default {
  },
  userPlayList: {
    title: '{name}的常听'
+  },
+  musicList: {
+    searchSongs: '搜索歌曲',
+    noSearchResults: '没有找到相关歌曲'
  }
 };
--- a/src/i18n/lang/zh-CN/download.ts
+++ b/src/i18n/lang/zh-CN/download.ts
@@ -1,6 +1,8 @@
 export default {
  title: '下载管理',
  localMusic: '本地音乐',
+  count: '共 {count} 首歌曲',
+  clearAll: '清空记录',
  tabs: {
    downloading: '下载中',
    downloaded: '已下载'
@@ -27,7 +29,16 @@ export default {
    confirm: '确定删除',
    cancel: '取消',
    success: '删除成功',
-    failed: '删除失败'
+    failed: '删除失败',
+    fileNotFound: '文件不存在或已被移动，已从记录中移除',
+    recordRemoved: '文件删除失败，但已从记录中移除'
+  },
+  clear: {
+    title: '清空下载记录',
+    message: '确定要清空所有下载记录吗？此操作不会删除已下载的音乐文件，但将清空所有记录。',
+    confirm: '确定清空',
+    cancel: '取消',
+    success: '下载记录已清空'
  },
  message: {
    downloadComplete: '{filename} 下载完成',
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -48,7 +48,8 @@ export default {
    next: '下一首',
    volume: '音量',
    favorite: '已收藏{name}',
-    unFavorite: '已取消收藏{name}'
+    unFavorite: '已取消收藏{name}',
+    miniPlayBar: '迷你播放栏'
  },
  eq: {
    title: '均衡器',
--- a/src/i18n/lang/zh-CN/settings.ts
+++ b/src/i18n/lang/zh-CN/settings.ts
@@ -71,6 +71,8 @@ export default {
    shortcutDesc: '自定义全局快捷键',
    download: '下载管理',
    downloadDesc: '是否始终显示下载列表按钮',
+    unlimitedDownload: '无限制下载',
+    unlimitedDownloadDesc: '开启后将无限制下载音乐（可能出现下载失败的情况）, 默认限制 300 首',
    downloadPath: '下载目录',
    downloadPathDesc: '选择音乐文件的下载位置'
  },
@@ -181,6 +183,13 @@ export default {
      default: '默认',
      light: '亮色',
      dark: '暗色'
+    },
+    hideMiniPlayBar: '隐藏迷你播放栏',
+    hideLyrics: '隐藏歌词',
+    tabs: {
+      interface: '界面',
+      typography: '文字',
+      display: '显示'
    }
  },
  shortcutSettings: {
@@ -190,6 +199,8 @@ export default {
    shortcutConflict: '快捷键冲突',
    inputPlaceholder: '点击输入快捷键',
    resetShortcuts: '恢复默认',
+    disableAll: '全部禁用',
+    enableAll: '全部启用',
    togglePlay: '播放/暂停',
    prevPlay: '上一首',
    nextPlay: '下一首',
@@ -197,12 +208,18 @@ export default {
    volumeDown: '音量减少',
    toggleFavorite: '收藏/取消收藏',
    toggleWindow: '显示/隐藏窗口',
+    scopeGlobal: '全局',
+    scopeApp: '应用内',
+    enabled: '启用',
+    disabled: '禁用',
    messages: {
      resetSuccess: '已恢复默认快捷键，请记得保存',
      conflict: '存在冲突的快捷键，请重新设置',
      saveSuccess: '快捷键设置已保存',
      saveError: '保存快捷键失败，请重试',
-      cancelEdit: '已取消修改'
+      cancelEdit: '已取消修改',
+      disableAll: '已禁用所有快捷键，请记得保存',
+      enableAll: '已启用所有快捷键，请记得保存'
    }
  }
 };
--- a/src/i18n/lang/zh-CN/songItem.ts
+++ b/src/i18n/lang/zh-CN/songItem.ts
@@ -13,6 +13,6 @@ export default {
    downloadFailed: '下载失败',
    downloadQueued: '已加入下载队列',
    addedToNextPlay: '已添加到下一首播放',
-    getUrlFailed: '获取音乐下载地址失败'
+    getUrlFailed: '获取音乐下载地址失败，请检查是否登录'
  }
 };
--- a/src/i18n/lang/zh-CN/user.ts
+++ b/src/i18n/lang/zh-CN/user.ts
@@ -13,6 +13,27 @@ export default {
    title: '听歌排行',
    playCount: '{count}次'
  },
+  follow: {
+    title: '关注列表',
+    viewPlaylist: '查看歌单',
+    noFollowings: '暂无关注',
+    loadMore: '加载更多',
+    noSignature: '这个家伙很懒，什么都没留下'
+  },
+  follower: {
+    title: '粉丝列表',
+    noFollowers: '暂无粉丝',
+    loadMore: '加载更多'
+  },
+  detail: {
+    playlists: '歌单',
+    records: '听歌排行',
+    noPlaylists: '暂无歌单',
+    noRecords: '暂无听歌记录',
+    artist: '歌手',
+    noSignature: '这个人很懒，什么都没留下',
+    invalidUserId: '用户ID无效'
+  },
  message: {
    loadFailed: '加载用户页面失败',
    deleteSuccess: '删除成功',
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -9,7 +9,8 @@ import { initializeConfig } from './modules/config';
 import { initializeFileManager } from './modules/fileManager';
 import { initializeFonts } from './modules/fonts';
 import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
-import { initializeTray, updateTrayMenu } from './modules/tray';
+import { initializeStats, setupStatsHandlers } from './modules/statsService';
+import { initializeTray, updateCurrentSong, updatePlayState, updateTrayMenu } from './modules/tray';
 import { setupUpdateHandlers } from './modules/update';
 import { createMainWindow, initializeWindowManager } from './modules/window';
 import { startMusicApi } from './server';
@@ -50,6 +51,12 @@ function initialize() {
  // 初始化托盘
  initializeTray(iconPath, mainWindow);

+  // 初始化统计服务
+  initializeStats();
+
+  // 设置统计相关的IPC处理程序
+  setupStatsHandlers(ipcMain);
+
  // 启动音乐API
  startMusicApi();

@@ -106,15 +113,24 @@ if (!isSingleInstance) {

  // 监听语言切换
  ipcMain.on('change-language', (_, locale: Language) => {
-    console.log('locale',locale)
    // 更新主进程的语言设置
    i18n.global.locale = locale;
    // 更新托盘菜单
-    updateTrayMenu();
+    updateTrayMenu(mainWindow);
    // 通知所有窗口语言已更改
    mainWindow?.webContents.send('language-changed', locale);
  });

+  // 监听播放状态变化
+  ipcMain.on('update-play-state', (_, playing: boolean) => {
+    updatePlayState(playing);
+  });
+
+  // 监听当前歌曲变化
+  ipcMain.on('update-current-song', (_, song: any) => {
+    updateCurrentSong(song);
+  });
+
  // 所有窗口关闭时的处理
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
--- a/src/main/modules/deviceInfo.ts
+++ b/src/main/modules/deviceInfo.ts
@@ -0,0 +1,63 @@
+import { app } from 'electron';
+import Store from 'electron-store';
+import { machineIdSync } from 'node-machine-id';
+import os from 'os';
+
+const store = new Store();
+
+/**
+ * 获取设备唯一标识符
+ * 优先使用存储的ID，如果没有则获取机器ID并存储
+ */
+export function getDeviceId(): string {
+  let deviceId = store.get('deviceId') as string | undefined;
+
+  if (!deviceId) {
+    try {
+      // 使用node-machine-id获取设备唯一标识
+      deviceId = machineIdSync(true);
+    } catch (error) {
+      console.error('获取机器ID失败:', error);
+      // 如果获取失败，使用主机名和MAC地址组合作为备选方案
+      const networkInterfaces = os.networkInterfaces();
+      let macAddress = '';
+
+      // 尝试获取第一个非内部网络接口的MAC地址
+      Object.values(networkInterfaces).forEach((interfaces) => {
+        if (interfaces) {
+          interfaces.forEach((iface) => {
+            if (!iface.internal && !macAddress && iface.mac !== '00:00:00:00:00:00') {
+              macAddress = iface.mac;
+            }
+          });
+        }
+      });
+
+      deviceId = `${os.hostname()}-${macAddress}`.replace(/:/g, '');
+    }
+
+    // 存储设备ID
+    if (deviceId) {
+      store.set('deviceId', deviceId);
+    } else {
+      // 如果所有方法都失败，使用随机ID
+      deviceId = Math.random().toString(36).substring(2, 15);
+      store.set('deviceId', deviceId);
+    }
+  }
+
+  return deviceId;
+}
+
+/**
+ * 获取系统信息
+ */
+export function getSystemInfo() {
+  return {
+    osType: os.type(),
+    osVersion: os.release(),
+    osArch: os.arch(),
+    platform: process.platform,
+    appVersion: app.getVersion()
+  };
+}
--- a/src/main/modules/fileManager.ts
+++ b/src/main/modules/fileManager.ts
@@ -1,9 +1,14 @@
 import axios from 'axios';
-import { app, dialog, ipcMain, protocol, shell } from 'electron';
+import { app, dialog, ipcMain, Notification, protocol, shell } from 'electron';
 import Store from 'electron-store';
 import * as fs from 'fs';
+import * as http from 'http';
+import * as https from 'https';
+import * as NodeID3 from 'node-id3';
 import * as path from 'path';

+import { getStore } from './config';
+
 const MAX_CONCURRENT_DOWNLOADS = 3;
 const downloadQueue: { url: string; filename: string; songInfo: any; type?: string }[] = [];
 let activeDownloads = 0;
@@ -269,7 +274,7 @@ function sanitizeFilename(filename: string): string {
 }

 /**
- * 下载音乐功能
+ * 下载音乐和歌词
 */
 async function downloadMusic(
  event: Electron.IpcMainEvent,
@@ -284,8 +289,11 @@ async function downloadMusic(
  let writer: fs.WriteStream | null = null;

  try {
-    const store = new Store();
-    const downloadPath = (store.get('set.downloadPath') as string) || app.getPath('downloads');
+    // 使用配置Store来获取设置
+    const configStore = getStore();
+    const downloadPath =
+      (configStore.get('set.downloadPath') as string) || app.getPath('downloads');
+    const apiPort = configStore.get('set.musicApiPort') || 30488;

    // 清理文件名中的非法字符
    const sanitizedFilename = sanitizeFilename(filename);
@@ -313,7 +321,9 @@ async function downloadMusic(
      url,
      method: 'GET',
      responseType: 'stream',
-      timeout: 30000 // 30秒超时
+      timeout: 30000, // 30秒超时
+      httpAgent: new http.Agent({ keepAlive: true }),
+      httpsAgent: new https.Agent({ keepAlive: true })
    });

    writer = fs.createWriteStream(finalFilePath);
@@ -351,9 +361,121 @@ async function downloadMusic(
      throw new Error('文件下载不完整');
    }

+    // 下载歌词
+    let lyricData = null;
+    let lyricsContent = '';
+    try {
+      if (songInfo?.id) {
+        // 下载歌词，使用配置的端口
+        const lyricsResponse = await axios.get(
+          `http://localhost:${apiPort}/lyric?id=${songInfo.id}`
+        );
+        if (lyricsResponse.data && (lyricsResponse.data.lrc || lyricsResponse.data.tlyric)) {
+          lyricData = lyricsResponse.data;
+
+          // 处理歌词内容
+          if (lyricsResponse.data.lrc && lyricsResponse.data.lrc.lyric) {
+            lyricsContent = lyricsResponse.data.lrc.lyric;
+
+            // 如果有翻译歌词，合并到主歌词中
+            if (lyricsResponse.data.tlyric && lyricsResponse.data.tlyric.lyric) {
+              // 解析原歌词和翻译
+              const originalLyrics = parseLyrics(lyricsResponse.data.lrc.lyric);
+              const translatedLyrics = parseLyrics(lyricsResponse.data.tlyric.lyric);
+
+              // 合并歌词
+              const mergedLyrics = mergeLyrics(originalLyrics, translatedLyrics);
+              lyricsContent = mergedLyrics;
+            }
+          }
+
+          // 不再单独写入歌词文件，只保存在ID3标签中
+          console.log('歌词已准备好，将写入ID3标签');
+        }
+      }
+    } catch (lyricError) {
+      console.error('下载歌词失败:', lyricError);
+      // 继续处理，不影响音乐下载
+    }
+
+    // 下载封面
+    let coverImageBuffer: Buffer | null = null;
+    try {
+      if (songInfo?.picUrl || songInfo?.al?.picUrl) {
+        const picUrl = songInfo.picUrl || songInfo.al?.picUrl;
+        if (picUrl && picUrl !== '/images/default_cover.png') {
+          const coverResponse = await axios({
+            url: picUrl.replace('http://', 'https://'),
+            method: 'GET',
+            responseType: 'arraybuffer',
+            timeout: 10000
+          });
+
+          // 获取封面图片的buffer
+          coverImageBuffer = Buffer.from(coverResponse.data);
+
+          // 不再单独保存封面文件，只保存在ID3标签中
+          console.log('封面已准备好，将写入ID3标签');
+        }
+      }
+    } catch (coverError) {
+      console.error('下载封面失败:', coverError);
+      // 继续处理，不影响音乐下载
+    }
+
+    // 在写入ID3标签前，先移除可能存在的旧标签
+    try {
+      NodeID3.removeTags(finalFilePath);
+    } catch (err) {
+      console.error('Error removing existing ID3 tags:', err);
+    }
+
+    // 强化ID3标签的写入格式
+
+    const artistNames =
+      (songInfo?.ar || songInfo?.song?.artists)?.map((a: any) => a.name).join('/ ') || '未知艺术家';
+    const tags = {
+      title: filename,
+      artist: artistNames,
+      TPE1: artistNames,
+      TPE2: artistNames,
+      album: songInfo?.al?.name || songInfo?.song?.album?.name || songInfo?.name || filename,
+      APIC: {
+        // 专辑封面
+        imageBuffer: coverImageBuffer,
+        type: {
+          id: 3,
+          name: 'front cover'
+        },
+        description: 'Album cover',
+        mime: 'image/jpeg'
+      },
+      USLT: {
+        // 歌词
+        language: 'chi',
+        description: 'Lyrics',
+        text: lyricsContent || ''
+      },
+      trackNumber: songInfo?.no || undefined,
+      year: songInfo?.publishTime
+        ? new Date(songInfo.publishTime).getFullYear().toString()
+        : undefined
+    };
+
+    try {
+      const success = NodeID3.write(tags, finalFilePath);
+      if (!success) {
+        console.error('Failed to write ID3 tags');
+      } else {
+        console.log('ID3 tags written successfully');
+      }
+    } catch (err) {
+      console.error('Error writing ID3 tags:', err);
+    }
+
    // 保存下载信息
    try {
-      const songInfos = store.get('downloadedSongs', {}) as Record<string, any>;
+      const songInfos = configStore.get('downloadedSongs', {}) as Record<string, any>;
      const defaultInfo = {
        name: filename,
        ar: [{ name: '本地音乐' }],
@@ -364,24 +486,48 @@ async function downloadMusic(
        id: songInfo?.id || 0,
        name: songInfo?.name || filename,
        filename,
-        picUrl: songInfo?.picUrl || defaultInfo.picUrl,
+        picUrl: songInfo?.picUrl || songInfo?.al?.picUrl || defaultInfo.picUrl,
        ar: songInfo?.ar || defaultInfo.ar,
+        al: songInfo?.al || {
+          picUrl: songInfo?.picUrl || defaultInfo.picUrl,
+          name: songInfo?.name || filename
+        },
        size: totalSize,
        path: finalFilePath,
        downloadTime: Date.now(),
-        al: songInfo?.al || { picUrl: songInfo?.picUrl || defaultInfo.picUrl },
-        type: type || 'mp3'
+        type: type || 'mp3',
+        lyric: lyricData
      };

      // 保存到下载记录
      songInfos[finalFilePath] = newSongInfo;
-      store.set('downloadedSongs', songInfos);
+      configStore.set('downloadedSongs', songInfos);

      // 添加到下载历史
      const history = downloadStore.get('history', []) as any[];
      history.unshift(newSongInfo);
      downloadStore.set('history', history);

+      // 发送桌面通知
+      try {
+        const artistNames =
+          (songInfo?.ar || songInfo?.song?.artists)?.map((a: any) => a.name).join('/') ||
+          '未知艺术家';
+        const notification = new Notification({
+          title: '下载完成',
+          body: `${songInfo?.name || filename} - ${artistNames}`,
+          silent: false
+        });
+
+        notification.on('click', () => {
+          shell.showItemInFolder(finalFilePath);
+        });
+
+        notification.show();
+      } catch (notifyError) {
+        console.error('发送通知失败:', notifyError);
+      }
+
      // 发送下载完成事件
      event.reply('music-download-complete', {
        success: true,
@@ -416,3 +562,56 @@ async function downloadMusic(
    });
  }
 }
+
+// 辅助函数 - 解析歌词文本成时间戳和内容的映射
+function parseLyrics(lyricsText: string): Map<string, string> {
+  const lyricMap = new Map<string, string>();
+  const lines = lyricsText.split('\n');
+
+  for (const line of lines) {
+    // 匹配时间标签，形如 [00:00.000]
+    const timeTagMatches = line.match(/\[\d{2}:\d{2}(\.\d{1,3})?\]/g);
+    if (!timeTagMatches) continue;
+
+    // 提取歌词内容（去除时间标签）
+    const content = line.replace(/\[\d{2}:\d{2}(\.\d{1,3})?\]/g, '').trim();
+    if (!content) continue;
+
+    // 将每个时间标签与歌词内容关联
+    for (const timeTag of timeTagMatches) {
+      lyricMap.set(timeTag, content);
+    }
+  }
+
+  return lyricMap;
+}
+
+// 辅助函数 - 合并原文歌词和翻译歌词
+function mergeLyrics(
+  originalLyrics: Map<string, string>,
+  translatedLyrics: Map<string, string>
+): string {
+  const mergedLines: string[] = [];
+
+  // 对每个时间戳，组合原始歌词和翻译
+  for (const [timeTag, originalContent] of originalLyrics.entries()) {
+    const translatedContent = translatedLyrics.get(timeTag);
+
+    // 添加原始歌词行
+    mergedLines.push(`${timeTag}${originalContent}`);
+
+    // 如果有翻译，添加翻译行（时间戳相同，这样可以和原歌词同步显示）
+    if (translatedContent) {
+      mergedLines.push(`${timeTag}${translatedContent}`);
+    }
+  }
+
+  // 按时间顺序排序
+  mergedLines.sort((a, b) => {
+    const timeA = a.match(/\[\d{2}:\d{2}(\.\d{1,3})?\]/)?.[0] || '';
+    const timeB = b.match(/\[\d{2}:\d{2}(\.\d{1,3})?\]/)?.[0] || '';
+    return timeA.localeCompare(timeB);
+  });
+
+  return mergedLines.join('\n');
+}
--- a/src/main/modules/shortcuts.ts
+++ b/src/main/modules/shortcuts.ts
@@ -7,66 +7,93 @@ ipcMain.on('get-platform', (event) => {
  event.returnValue = process.platform;
 });

+// 定义快捷键配置接口
+export interface ShortcutConfig {
+  key: string;
+  enabled: boolean;
+  scope: 'global' | 'app';
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig;
+}
+
 // 定义默认快捷键
-export const defaultShortcuts = {
-  togglePlay: 'CommandOrControl+Alt+P',
-  prevPlay: 'CommandOrControl+Alt+Left',
-  nextPlay: 'CommandOrControl+Alt+Right',
-  volumeUp: 'CommandOrControl+Alt+Up',
-  volumeDown: 'CommandOrControl+Alt+Down',
-  toggleFavorite: 'CommandOrControl+Alt+L',
-  toggleWindow: 'CommandOrControl+Alt+Shift+M'
+export const defaultShortcuts: ShortcutsConfig = {
+  togglePlay: { key: 'CommandOrControl+Alt+P', enabled: true, scope: 'global' },
+  prevPlay: { key: 'Alt+Left', enabled: true, scope: 'global' },
+  nextPlay: { key: 'Alt+Right', enabled: true, scope: 'global' },
+  volumeUp: { key: 'Alt+Up', enabled: true, scope: 'app' },
+  volumeDown: { key: 'Alt+Down', enabled: true, scope: 'app' },
+  toggleFavorite: { key: 'CommandOrControl+Alt+L', enabled: true, scope: 'app' },
+  toggleWindow: { key: 'CommandOrControl+Alt+Shift+M', enabled: true, scope: 'global' }
 };

 let mainWindowRef: Electron.BrowserWindow | null = null;

 // 注册快捷键
-export function registerShortcuts(mainWindow: Electron.BrowserWindow) {
+export function registerShortcuts(
+  mainWindow: Electron.BrowserWindow,
+  shortcutsConfig?: ShortcutsConfig
+) {
  mainWindowRef = mainWindow;
  const store = getStore();
-  const shortcuts = store.get('shortcuts');
+  const shortcuts =
+    shortcutsConfig || (store.get('shortcuts') as ShortcutsConfig) || defaultShortcuts;

  // 注销所有已注册的快捷键
  globalShortcut.unregisterAll();

-  // 显示/隐藏主窗口
-  globalShortcut.register(shortcuts.toggleWindow, () => {
-    if (mainWindow.isVisible()) {
-      mainWindow.hide();
-    } else {
-      mainWindow.show();
+  // 对旧格式数据进行兼容处理
+  if (shortcuts && typeof shortcuts.togglePlay === 'string') {
+    // 将 shortcuts 强制转换为 unknown，再转为 Record<string, string>
+    const oldShortcuts = { ...shortcuts } as unknown as Record<string, string>;
+    const newShortcuts: ShortcutsConfig = {};
+
+    Object.entries(oldShortcuts).forEach(([key, value]) => {
+      newShortcuts[key] = {
+        key: value,
+        enabled: true,
+        scope: ['volumeUp', 'volumeDown', 'toggleFavorite'].includes(key) ? 'app' : 'global'
+      };
+    });
+
+    store.set('shortcuts', newShortcuts);
+    registerShortcuts(mainWindow, newShortcuts);
+    return;
+  }
+
+  // 注册全局快捷键
+  Object.entries(shortcuts).forEach(([action, config]) => {
+    const { key, enabled, scope } = config as ShortcutConfig;
+
+    // 只注册启用且作用域为全局的快捷键
+    if (!enabled || scope !== 'global') return;
+
+    try {
+      switch (action) {
+        case 'toggleWindow':
+          globalShortcut.register(key, () => {
+            if (mainWindow.isVisible()) {
+              mainWindow.hide();
+            } else {
+              mainWindow.show();
+            }
+          });
+          break;
+        default:
+          globalShortcut.register(key, () => {
+            mainWindow.webContents.send('global-shortcut', action);
+          });
+          break;
+      }
+    } catch (error) {
+      console.error(`注册快捷键 ${key} 失败:`, error);
    }
  });

-  // 播放/暂停
-  globalShortcut.register(shortcuts.togglePlay, () => {
-    mainWindow.webContents.send('global-shortcut', 'togglePlay');
-  });
-
-  // 上一首
-  globalShortcut.register(shortcuts.prevPlay, () => {
-    mainWindow.webContents.send('global-shortcut', 'prevPlay');
-  });
-
-  // 下一首
-  globalShortcut.register(shortcuts.nextPlay, () => {
-    mainWindow.webContents.send('global-shortcut', 'nextPlay');
-  });
-
-  // 音量增加
-  globalShortcut.register(shortcuts.volumeUp, () => {
-    mainWindow.webContents.send('global-shortcut', 'volumeUp');
-  });
-
-  // 音量减少
-  globalShortcut.register(shortcuts.volumeDown, () => {
-    mainWindow.webContents.send('global-shortcut', 'volumeDown');
-  });
-
-  // 收藏当前歌曲
-  globalShortcut.register(shortcuts.toggleFavorite, () => {
-    mainWindow.webContents.send('global-shortcut', 'toggleFavorite');
-  });
+  // 通知渲染进程更新应用内快捷键
+  mainWindow.webContents.send('update-app-shortcuts', shortcuts);
 }

 // 初始化快捷键
@@ -85,4 +112,11 @@ export function initializeShortcuts(mainWindow: Electron.BrowserWindow) {
      registerShortcuts(mainWindowRef);
    }
  });
+
+  // 监听快捷键更新事件
+  ipcMain.on('update-shortcuts', (_, shortcutsConfig: ShortcutsConfig) => {
+    if (mainWindowRef) {
+      registerShortcuts(mainWindowRef, shortcutsConfig);
+    }
+  });
 }
--- a/src/main/modules/statsService.ts
+++ b/src/main/modules/statsService.ts
@@ -0,0 +1,122 @@
+import axios from 'axios';
+import { app } from 'electron';
+import Store from 'electron-store';
+
+import { getDeviceId, getSystemInfo } from './deviceInfo';
+
+const store = new Store();
+
+// 统计服务配置
+const STATS_API_URL = 'http://donate.alger.fun/state/api/stats';
+
+/**
+ * 记录应用安装/启动
+ */
+export async function recordInstallation(): Promise<void> {
+  try {
+    const deviceId = getDeviceId();
+    const systemInfo = getSystemInfo();
+
+    // 发送请求到统计服务器
+    await axios.post(`${STATS_API_URL}/installation`, {
+      deviceId,
+      osType: systemInfo.osType,
+      osVersion: systemInfo.osVersion,
+      appVersion: systemInfo.appVersion
+    });
+
+    console.log('应用启动统计已记录');
+
+    // 记录最后一次启动时间
+    store.set('lastStartTime', new Date().toISOString());
+  } catch (error) {
+    console.error('记录应用启动统计失败:', error);
+  }
+}
+
+/**
+ * 设置 IPC 处理程序以接收渲染进程的统计请求
+ * @param ipcMain Electron IPC主对象
+ */
+export function setupStatsHandlers(ipcMain: Electron.IpcMain): void {
+  // 处理页面访问统计
+  ipcMain.handle('record-visit', async (_, page: string, userId?: string) => {
+    try {
+      const deviceId = getDeviceId();
+
+      await axios.post(`${STATS_API_URL}/visit`, {
+        deviceId,
+        userId,
+        page
+      });
+
+      return { success: true };
+    } catch (error) {
+      console.error('记录页面访问统计失败:', error);
+      return { success: false, error: (error as Error).message };
+    }
+  });
+
+  // 处理播放统计
+  ipcMain.handle(
+    'record-play',
+    async (
+      _,
+      songData: {
+        userId: string | null;
+        songId: string | number;
+        songName: string;
+        artistName: string;
+        duration?: number;
+        completedPlay?: boolean;
+      }
+    ) => {
+      try {
+        const { songId, songName, artistName, duration = 0, completedPlay = false } = songData;
+        const deviceId = getDeviceId();
+
+        await axios.post(`${STATS_API_URL}/play`, {
+          deviceId,
+          userId: songData.userId,
+          songId: songId.toString(),
+          songName,
+          artistName,
+          duration,
+          completedPlay
+        });
+
+        return { success: true };
+      } catch (error) {
+        console.error('记录播放统计失败:', error);
+        return { success: false, error: (error as Error).message };
+      }
+    }
+  );
+
+  // 处理获取统计摘要
+  ipcMain.handle('get-stats-summary', async () => {
+    try {
+      const response = await axios.get(`${STATS_API_URL}/summary`);
+      return response.data;
+    } catch (error) {
+      console.error('获取统计摘要失败:', error);
+      throw error;
+    }
+  });
+}
+
+/**
+ * 应用启动时初始化统计服务
+ */
+export function initializeStats(): void {
+  // 记录应用启动统计
+  recordInstallation().catch((error) => {
+    console.error('初始化统计服务失败:', error);
+  });
+
+  // 注册应用退出时的回调
+  app.on('will-quit', () => {
+    // 可以在这里添加应用退出时的统计逻辑
+    console.log('应用退出');
+  });
+}
--- a/src/main/modules/tray.ts
+++ b/src/main/modules/tray.ts
@@ -1,82 +1,418 @@
-import { app, BrowserWindow, Menu, nativeImage, Tray } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  Menu,
+  MenuItem,
+  MenuItemConstructorOptions,
+  nativeImage,
+  Tray
+} from 'electron';
 import { join } from 'path';

 import type { Language } from '../../i18n/main';
 import i18n from '../../i18n/main';

+// 歌曲信息接口定义
+interface SongInfo {
+  name: string;
+  song: {
+    artists: Array<{ name: string; [key: string]: any }>;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
 let tray: Tray | null = null;
+// 为macOS状态栏添加控制图标
+let playPauseTray: Tray | null = null;
+let prevTray: Tray | null = null;
+let nextTray: Tray | null = null;
+let songTitleTray: Tray | null = null;
+
+let isPlaying = false;
+let currentSong: SongInfo | null = null;

 const LANGUAGES: { label: string; value: Language }[] = [
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' }
 ];

+// 更新播放状态
+export function updatePlayState(playing: boolean) {
+  isPlaying = playing;
+  if (tray) {
+    updateTrayMenu(BrowserWindow.getAllWindows()[0]);
+  }
+  // 更新播放/暂停图标
+  updateStatusBarTray();
+}
+
+// 获取艺术家名称字符串
+function getArtistString(song: SongInfo | null): string {
+  if (!song || !song.song || !song.song.artists) return '';
+  return song.song.artists.map((item) => item.name).join(' / ');
+}
+
+// 获取歌曲完整标题（歌曲名 - 艺术家）
+function getSongTitle(song: SongInfo | null): string {
+  if (!song) return '未播放';
+  const artistStr = getArtistString(song);
+  return artistStr ? `${song.name} - ${artistStr}` : song.name;
+}
+
+// 更新当前播放的音乐信息
+export function updateCurrentSong(song: SongInfo | null) {
+  currentSong = song;
+  if (tray) {
+    updateTrayMenu(BrowserWindow.getAllWindows()[0]);
+  }
+  // 更新状态栏歌曲信息
+  updateStatusBarTray();
+}
+
+// 确保 macOS 状态栏图标能正确显示
+function getProperIconSize() {
+  // macOS 状态栏通常高度为22像素
+  const height = 18;
+  const width = 18;
+  return { width, height };
+}
+
+// 更新macOS状态栏图标
+function updateStatusBarTray() {
+  if (process.platform !== 'darwin') return;
+
+  const iconSize = getProperIconSize();
+
+  // 更新歌曲标题显示
+  if (songTitleTray) {
+    if (currentSong) {
+      // 限制歌曲名显示长度，添加作者名
+      const songName = currentSong.name.slice(0, 10);
+      let title = songName;
+      const artistStr = getArtistString(currentSong);
+      // 如果有艺术家名称，添加到标题中
+      if (artistStr) {
+        title = `${songName} - ${artistStr.slice(0, 6)}${artistStr.length > 6 ? '..' : ''}`;
+      }
+
+      // 设置标题和提示
+      songTitleTray.setTitle(title, {
+        fontType: 'monospacedDigit' // 使用等宽字体以确保更好的可读性
+      });
+
+      // 完整信息放在tooltip中
+      const fullTitle = getSongTitle(currentSong);
+      songTitleTray.setToolTip(fullTitle);
+      console.log('更新状态栏歌曲显示:', title, '完整信息:', fullTitle);
+    } else {
+      songTitleTray.setTitle('未播放', {
+        fontType: 'monospacedDigit'
+      });
+      songTitleTray.setToolTip('未播放');
+      console.log('更新状态栏歌曲显示: 未播放');
+    }
+  }
+
+  // 更新播放/暂停图标
+  if (playPauseTray) {
+    // 使用PNG图标替代文本
+    const iconPath = join(
+      app.getAppPath(),
+      'resources/icons',
+      isPlaying ? 'pause.png' : 'play.png'
+    );
+    const icon = nativeImage.createFromPath(iconPath).resize(iconSize);
+    icon.setTemplateImage(true); // 设置为模板图片，适合macOS深色/浅色模式
+    playPauseTray.setImage(icon);
+    playPauseTray.setToolTip(
+      isPlaying ? i18n.global.t('common.tray.pause') : i18n.global.t('common.tray.play')
+    );
+  }
+}
+
 // 导出更新菜单的函数
-export function updateTrayMenu() {
+export function updateTrayMenu(mainWindow: BrowserWindow) {
  if (!tray) return;

-  // 创建一个上下文菜单
-  const contextMenu = Menu.buildFromTemplate([
-    {
-      label: i18n.global.t('common.tray.show'),
-      click: () => {
-        BrowserWindow.getAllWindows()[0]?.show();
-      }
-    },
-    { type: 'separator' },
-    {
-      label: i18n.global.t('common.language'),
-      submenu: LANGUAGES.map(({ label, value }) => ({
+  // 如果是macOS，设置TouchBar
+  if (process.platform === 'darwin') {
+    // macOS 上使用直接的控制按钮
+    const menu = new Menu();
+
+    // 当前播放的音乐信息
+    if (currentSong) {
+      menu.append(
+        new MenuItem({
+          label: getSongTitle(currentSong),
+          enabled: false,
+          type: 'normal'
+        })
+      );
+      menu.append(new MenuItem({ type: 'separator' }));
+    }
+
+    // 上一首、播放/暂停、下一首的菜单项
+    // 在macOS上临时使用文本菜单项替代图标，确保基本功能正常
+    menu.append(
+      new MenuItem({
+        label: i18n.global.t('common.tray.prev'),
+        type: 'normal',
+        click: () => {
+          mainWindow.webContents.send('global-shortcut', 'prevPlay');
+        }
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        label: i18n.global.t(isPlaying ? 'common.tray.pause' : 'common.tray.play'),
+        type: 'normal',
+        click: () => {
+          mainWindow.webContents.send('global-shortcut', 'togglePlay');
+        }
+      })
+    );
+
+    menu.append(
+      new MenuItem({
+        label: i18n.global.t('common.tray.next'),
+        type: 'normal',
+        click: () => {
+          mainWindow.webContents.send('global-shortcut', 'nextPlay');
+        }
+      })
+    );
+
+    // 分隔符
+    menu.append(new MenuItem({ type: 'separator' }));
+
+    // 显示主窗口
+    menu.append(
+      new MenuItem({
+        label: i18n.global.t('common.tray.show'),
+        type: 'normal',
+        click: () => {
+          mainWindow.show();
+        }
+      })
+    );
+
+    // 语言切换子菜单
+    const languageSubmenu = Menu.buildFromTemplate(
+      LANGUAGES.map(({ label, value }) => ({
        label,
        type: 'radio',
        checked: i18n.global.locale === value,
        click: () => {
-          // 更新主进程的语言设置
          i18n.global.locale = value;
-          // 更新托盘菜单
-          updateTrayMenu();
-          // 直接通知主窗口
-          const windows = BrowserWindow.getAllWindows();
-          for (const win of windows) {
-            win.webContents.send('language-changed', value);
-            console.log('向窗口发送语言变更事件:', value);
-          }
+          updateTrayMenu(mainWindow);
+          mainWindow.webContents.send('language-changed', value);
        }
      }))
-    },
-    { type: 'separator' },
-    {
-      label: i18n.global.t('common.tray.quit'),
-      click: () => {
-        app.quit();
-      }
-    }
-  ]);
+    );

-  // 设置系统托盘图标的上下文菜单
-  tray.setContextMenu(contextMenu);
+    menu.append(
+      new MenuItem({
+        label: i18n.global.t('common.language'),
+        type: 'submenu',
+        submenu: languageSubmenu
+      })
+    );
+
+    // 退出按钮
+    menu.append(
+      new MenuItem({
+        label: i18n.global.t('common.tray.quit'),
+        type: 'normal',
+        click: () => {
+          app.quit();
+        }
+      })
+    );
+
+    tray.setContextMenu(menu);
+  } else {
+    // Windows 和 Linux 使用原来的菜单样式
+    const menuTemplate: MenuItemConstructorOptions[] = [
+      // 当前播放的音乐信息
+      ...((currentSong
+        ? [
+            {
+              label: getSongTitle(currentSong),
+              enabled: false,
+              type: 'normal'
+            },
+            { type: 'separator' }
+          ]
+        : []) as MenuItemConstructorOptions[]),
+      {
+        label: i18n.global.t('common.tray.show'),
+        type: 'normal',
+        click: () => {
+          mainWindow.show();
+        }
+      },
+      { type: 'separator' },
+      {
+        label: i18n.global.t('common.tray.prev'),
+        type: 'normal',
+        click: () => {
+          mainWindow.webContents.send('global-shortcut', 'prevPlay');
+        }
+      },
+      {
+        label: i18n.global.t(isPlaying ? 'common.tray.pause' : 'common.tray.play'),
+        type: 'normal',
+        click: () => {
+          mainWindow.webContents.send('global-shortcut', 'togglePlay');
+        }
+      },
+      {
+        label: i18n.global.t('common.tray.next'),
+        type: 'normal',
+        click: () => {
+          mainWindow.webContents.send('global-shortcut', 'nextPlay');
+        }
+      },
+      { type: 'separator' },
+      {
+        label: i18n.global.t('common.language'),
+        type: 'submenu',
+        submenu: LANGUAGES.map(({ label, value }) => ({
+          label,
+          type: 'radio',
+          checked: i18n.global.locale === value,
+          click: () => {
+            i18n.global.locale = value;
+            updateTrayMenu(mainWindow);
+            mainWindow.webContents.send('language-changed', value);
+          }
+        }))
+      },
+      { type: 'separator' },
+      {
+        label: i18n.global.t('common.tray.quit'),
+        type: 'normal',
+        click: () => {
+          app.quit();
+        }
+      }
+    ];
+
+    const contextMenu = Menu.buildFromTemplate(menuTemplate);
+    tray.setContextMenu(contextMenu);
+  }
+}
+
+// 初始化状态栏Tray
+function initializeStatusBarTray(mainWindow: BrowserWindow) {
+  if (process.platform !== 'darwin') return;
+
+  const iconSize = getProperIconSize();
+
+  // 创建下一首按钮（调整顺序，先创建下一首按钮）
+  const nextIcon = nativeImage
+    .createFromPath(join(app.getAppPath(), 'resources/icons', 'next.png'))
+    .resize(iconSize);
+  nextIcon.setTemplateImage(true); // 设置为模板图片，适合macOS深色/浅色模式
+  nextTray = new Tray(nextIcon);
+  nextTray.setToolTip(i18n.global.t('common.tray.next'));
+  nextTray.on('click', () => {
+    mainWindow.webContents.send('global-shortcut', 'nextPlay');
+  });
+
+  // 创建播放/暂停按钮
+  const playPauseIcon = nativeImage
+    .createFromPath(join(app.getAppPath(), 'resources/icons', isPlaying ? 'pause.png' : 'play.png'))
+    .resize(iconSize);
+  playPauseIcon.setTemplateImage(true); // 设置为模板图片，适合macOS深色/浅色模式
+  playPauseTray = new Tray(playPauseIcon);
+  playPauseTray.setToolTip(
+    isPlaying ? i18n.global.t('common.tray.pause') : i18n.global.t('common.tray.play')
+  );
+  playPauseTray.on('click', () => {
+    mainWindow.webContents.send('global-shortcut', 'togglePlay');
+  });
+
+  // 创建上一首按钮（调整顺序，最后创建上一首按钮）
+  const prevIcon = nativeImage
+    .createFromPath(join(app.getAppPath(), 'resources/icons', 'prev.png'))
+    .resize(iconSize);
+  prevIcon.setTemplateImage(true); // 设置为模板图片，适合macOS深色/浅色模式
+  prevTray = new Tray(prevIcon);
+  prevTray.setToolTip(i18n.global.t('common.tray.prev'));
+  prevTray.on('click', () => {
+    mainWindow.webContents.send('global-shortcut', 'prevPlay');
+  });
+
+  // 创建歌曲信息显示 - 需要使用特殊处理
+  const titleIcon = nativeImage
+    .createFromPath(join(app.getAppPath(), 'resources/icons', 'note.png'))
+    .resize({ width: 16, height: 16 });
+  titleIcon.setTemplateImage(true);
+  songTitleTray = new Tray(titleIcon);
+
+  // 初始化显示文本
+  const initialText = getSongTitle(currentSong);
+
+  // 在macOS上，特别设置title来显示文本，确保它能正确显示
+  songTitleTray.setTitle(initialText, {
+    fontType: 'monospacedDigit' // 使用等宽字体以确保更好的可读性
+  });
+
+  songTitleTray.setToolTip(initialText);
+  songTitleTray.on('click', () => {
+    mainWindow.show();
+  });
+
+  // 强制更新一次所有图标
+  updateStatusBarTray();
+
+  // 打印调试信息
+  console.log('状态栏初始化完成，歌曲显示标题:', initialText);
 }

 /**
 * 初始化系统托盘
 */
 export function initializeTray(iconPath: string, mainWindow: BrowserWindow) {
+  // 根据平台选择合适的图标
+  const iconSize = process.platform === 'darwin' ? 18 : 16;
+  const iconFile = process.platform === 'darwin' ? 'icon_16x16.png' : 'icon_16x16.png';
+
  const trayIcon = nativeImage
-    .createFromPath(join(iconPath, 'icon_16x16.png'))
-    .resize({ width: 16, height: 16 });
+    .createFromPath(join(iconPath, iconFile))
+    .resize({ width: iconSize, height: iconSize });
+
  tray = new Tray(trayIcon);

-  // 初始化菜单
-  updateTrayMenu();
+  // 设置托盘图标的提示文字
+  tray.setToolTip('Alger Music Player');

-  // 当系统托盘图标被点击时，切换窗口的显示/隐藏
-  tray.on('click', () => {
-    if (mainWindow.isVisible()) {
-      mainWindow.hide();
-    } else {
-      mainWindow.show();
-    }
-  });
+  // 初始化菜单
+  updateTrayMenu(mainWindow);
+
+  // 初始化状态栏控制按钮 (macOS)
+  initializeStatusBarTray(mainWindow);
+
+  // 在 macOS 上，点击图标时显示菜单
+  if (process.platform === 'darwin') {
+    tray.on('click', () => {
+      if (tray) {
+        tray.popUpContextMenu();
+      }
+    });
+  } else {
+    // 在其他平台上，点击图标时切换窗口显示状态
+    tray.on('click', () => {
+      if (mainWindow.isVisible()) {
+        mainWindow.hide();
+      } else {
+        mainWindow.show();
+      }
+    });
+  }

  return tray;
 }
--- a/src/main/modules/update.ts
+++ b/src/main/modules/update.ts
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { exec } from 'child_process';
+import { spawn } from 'child_process';
 import { app, BrowserWindow, ipcMain } from 'electron';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -53,38 +53,49 @@ export function setupUpdateHandlers(_mainWindow: BrowserWindow) {

    const { platform } = process;

-    // 关闭当前应用
-    app.quit();
-
-    // 根据不同平台执行安装
-    if (platform === 'win32') {
-      exec(`"${filePath}"`, (error) => {
-        if (error) {
-          console.error('Error starting installer:', error);
-        }
-      });
-    } else if (platform === 'darwin') {
-      // 挂载 DMG 文件
-      exec(`open "${filePath}"`, (error) => {
-        if (error) {
-          console.error('Error opening DMG:', error);
-        }
-      });
-    } else if (platform === 'linux') {
-      const ext = path.extname(filePath);
-      if (ext === '.AppImage') {
-        exec(`chmod +x "${filePath}" && "${filePath}"`, (error) => {
-          if (error) {
-            console.error('Error running AppImage:', error);
-          }
+    // 先启动安装程序，再退出应用
+    try {
+      if (platform === 'win32') {
+        // 使用spawn替代exec，并使用detached选项确保子进程独立运行
+        const child = spawn(filePath, [], {
+          detached: true,
+          stdio: 'ignore'
        });
-      } else if (ext === '.deb') {
-        exec(`pkexec dpkg -i "${filePath}"`, (error) => {
-          if (error) {
-            console.error('Error installing deb package:', error);
-          }
+        child.unref();
+      } else if (platform === 'darwin') {
+        // 挂载 DMG 文件
+        const child = spawn('open', [filePath], {
+          detached: true,
+          stdio: 'ignore'
        });
+        child.unref();
+      } else if (platform === 'linux') {
+        const ext = path.extname(filePath);
+        if (ext === '.AppImage') {
+          // 先添加执行权限
+          fs.chmodSync(filePath, '755');
+          const child = spawn(filePath, [], {
+            detached: true,
+            stdio: 'ignore'
+          });
+          child.unref();
+        } else if (ext === '.deb') {
+          const child = spawn('pkexec', ['dpkg', '-i', filePath], {
+            detached: true,
+            stdio: 'ignore'
+          });
+          child.unref();
+        }
      }
+
+      // 给安装程序一点时间启动
+      setTimeout(() => {
+        app.quit();
+      }, 500);
+    } catch (error) {
+      console.error('启动安装程序失败:', error);
+      // 尽管出错，仍然尝试退出应用
+      app.quit();
    }
  });
 }
--- a/src/main/modules/window.ts
+++ b/src/main/modules/window.ts
@@ -1,10 +1,19 @@
 import { is } from '@electron-toolkit/utils';
-import { app, BrowserWindow, ipcMain, session, shell } from 'electron';
+import { app, BrowserWindow, globalShortcut, ipcMain, screen, session, shell } from 'electron';
 import Store from 'electron-store';
 import { join } from 'path';

 const store = new Store();

+// 保存主窗口的大小和位置
+let mainWindowState = {
+  width: 1200,
+  height: 780,
+  x: undefined as number | undefined,
+  y: undefined as number | undefined,
+  isMaximized: false
+};
+
 /**
 * 初始化代理设置
 */
@@ -71,10 +80,109 @@ export function initializeWindowManager() {
    }
  });

+  ipcMain.on('mini-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      // 保存当前窗口状态
+      const [width, height] = win.getSize();
+      const [x, y] = win.getPosition();
+      mainWindowState = {
+        width,
+        height,
+        x,
+        y,
+        isMaximized: win.isMaximized()
+      };
+
+      // 获取屏幕尺寸
+      const { width: screenWidth } = screen.getPrimaryDisplay().workAreaSize;
+
+      // 设置迷你窗口的大小和位置
+      win.unmaximize();
+      win.setMinimumSize(340, 64);
+      win.setMaximumSize(340, 64);
+      win.setSize(340, 64);
+      win.setPosition(screenWidth - 340, 20);
+      win.setAlwaysOnTop(true);
+      win.setSkipTaskbar(false);
+      win.setResizable(false);
+
+      // 导航到迷你模式路由
+      win.webContents.send('navigate', '/mini');
+
+      // 发送事件到渲染进程，通知切换到迷你模式
+      win.webContents.send('mini-mode', true);
+    }
+  });
+
+  // 恢复窗口
+  ipcMain.on('restore-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      // 恢复窗口的大小调整功能
+      win.setResizable(true);
+      win.setMaximumSize(0, 0);
+
+      // 恢复窗口的最小尺寸限制
+      win.setMinimumSize(1200, 780);
+
+      // 恢复窗口状态
+      if (mainWindowState.isMaximized) {
+        win.maximize();
+      } else {
+        win.setSize(mainWindowState.width, mainWindowState.height);
+        if (mainWindowState.x !== undefined && mainWindowState.y !== undefined) {
+          win.setPosition(mainWindowState.x, mainWindowState.y);
+        }
+      }
+
+      win.setAlwaysOnTop(false);
+      win.setSkipTaskbar(false);
+
+      // 导航回主页面
+      win.webContents.send('navigate', '/');
+
+      // 发送事件到渲染进程，通知退出迷你模式
+      win.webContents.send('mini-mode', false);
+    }
+  });
+
  // 监听代理设置变化
  store.onDidChange('set.proxyConfig', () => {
    initializeProxy();
  });
+
+  // 监听窗口大小调整事件
+  ipcMain.on('resize-window', (event, width, height) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      // 设置窗口的大小
+      console.log(`调整窗口大小: ${width} x ${height}`);
+      win.setSize(width, height);
+    }
+  });
+
+  // 专门用于迷你模式下调整窗口大小的事件
+  ipcMain.on('resize-mini-window', (event, showPlaylist) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      if (showPlaylist) {
+        console.log('主进程: 扩大迷你窗口至 340 x 400');
+        // 调整最大尺寸限制，允许窗口变大
+        win.setMinimumSize(340, 64);
+        win.setMaximumSize(340, 400);
+        // 调整窗口尺寸
+        win.setSize(340, 400);
+      } else {
+        console.log('主进程: 缩小迷你窗口至 340 x 64');
+        // 强制重置尺寸限制，确保窗口可以缩小
+        win.setMaximumSize(340, 64);
+        win.setMinimumSize(340, 64);
+        // 调整窗口尺寸
+        win.setSize(340, 64);
+      }
+    }
+  });
 }

 /**
@@ -112,6 +220,11 @@ export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
  if (is.dev && process.env.ELECTRON_RENDERER_URL) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
    mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL);
+
+    // 注册快捷键 打开开发者工具
+    globalShortcut.register('CommandOrControl+Shift+I', () => {
+      mainWindow.webContents.openDevTools({ mode: 'detach' });
+    });
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
  }
--- a/src/main/set.json
+++ b/src/main/set.json
@@ -20,5 +20,6 @@
  "autoPlay": false,
  "downloadPath": "",
  "language": "zh-CN",
-  "alwaysShowDownloadButton": false
+  "alwaysShowDownloadButton": false,
+  "unlimitedDownload": false
 }
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -1,26 +1,42 @@
 import { ElectronAPI } from '@electron-toolkit/preload';

+interface API {
+  minimize: () => void;
+  maximize: () => void;
+  close: () => void;
+  dragStart: (data: any) => void;
+  miniTray: () => void;
+  miniWindow: () => void;
+  restore: () => void;
+  restart: () => void;
+  resizeWindow: (width: number, height: number) => void;
+  resizeMiniWindow: (showPlaylist: boolean) => void;
+  openLyric: () => void;
+  sendLyric: (data: any) => void;
+  sendSong: (data: any) => void;
+  unblockMusic: (id: number, data: any) => Promise<any>;
+  onLyricWindowClosed: (callback: () => void) => void;
+  startDownload: (url: string) => void;
+  onDownloadProgress: (callback: (progress: number, status: string) => void) => void;
+  onDownloadComplete: (callback: (success: boolean, filePath: string) => void) => void;
+  onLanguageChanged: (callback: (locale: string) => void) => void;
+  removeDownloadListeners: () => void;
+  invoke: (channel: string, ...args: any[]) => Promise<any>;
+}
+
+// 自定义IPC渲染进程通信接口
+interface IpcRenderer {
+  send: (channel: string, ...args: any[]) => void;
+  invoke: (channel: string, ...args: any[]) => Promise<any>;
+  on: (channel: string, listener: (...args: any[]) => void) => () => void;
+  removeAllListeners: (channel: string) => void;
+}
+
 declare global {
  interface Window {
    electron: ElectronAPI;
-    api: {
-      sendLyric: (data: string) => void;
-      openLyric: () => void;
-      minimize: () => void;
-      maximize: () => void;
-      close: () => void;
-      dragStart: (data: string) => void;
-      miniTray: () => void;
-      restart: () => void;
-      unblockMusic: (id: number, data: any) => Promise<any>;
-      onLyricWindowClosed: (callback: () => void) => void;
-      startDownload: (url: string) => void;
-      onDownloadProgress: (callback: (progress: number, status: string) => void) => void;
-      onDownloadComplete: (callback: (success: boolean, filePath: string) => void) => void;
-      removeDownloadListeners: () => void;
-      onLanguageChanged: (callback: (locale: string) => void) => void;
-      invoke: (channel: string, ...args: any[]) => Promise<any>;
-    };
+    api: API;
+    ipcRenderer: IpcRenderer;
    $message: any;
  }
 }
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -8,9 +8,14 @@ const api = {
  close: () => ipcRenderer.send('close-window'),
  dragStart: (data) => ipcRenderer.send('drag-start', data),
  miniTray: () => ipcRenderer.send('mini-tray'),
+  miniWindow: () => ipcRenderer.send('mini-window'),
+  restore: () => ipcRenderer.send('restore-window'),
  restart: () => ipcRenderer.send('restart'),
+  resizeWindow: (width, height) => ipcRenderer.send('resize-window', width, height),
+  resizeMiniWindow: (showPlaylist) => ipcRenderer.send('resize-mini-window', showPlaylist),
  openLyric: () => ipcRenderer.send('open-lyric'),
  sendLyric: (data) => ipcRenderer.send('send-lyric', data),
+  sendSong: (data) => ipcRenderer.send('update-current-song', data),
  unblockMusic: (id) => ipcRenderer.invoke('unblock-music', id),
  // 歌词窗口关闭事件
  onLyricWindowClosed: (callback: () => void) => {
@@ -26,9 +31,7 @@ const api = {
  },
  // 语言相关
  onLanguageChanged: (callback: (locale: string) => void) => {
-    console.log('注册语言变更监听器');
    ipcRenderer.on('language-changed', (_event, locale) => {
-      console.log('收到语言变更事件:', locale);
      callback(locale);
    });
  },
@@ -44,7 +47,11 @@ const api = {
      'get-system-fonts',
      'get-cached-lyric',
      'cache-lyric',
-      'clear-lyric-cache'
+      'clear-lyric-cache',
+      // 统计相关
+      'record-visit',
+      'record-play',
+      'get-stats-summary'
    ];
    if (validChannels.includes(channel)) {
      return ipcRenderer.invoke(channel, ...args);
@@ -53,6 +60,29 @@ const api = {
  }
 };

+// 创建带类型的ipcRenderer对象，暴露给渲染进程
+const ipc = {
+  // 发送消息到主进程（无返回值）
+  send: (channel: string, ...args: any[]) => {
+    ipcRenderer.send(channel, ...args);
+  },
+  // 调用主进程方法（有返回值）
+  invoke: (channel: string, ...args: any[]) => {
+    return ipcRenderer.invoke(channel, ...args);
+  },
+  // 监听主进程消息
+  on: (channel: string, listener: (...args: any[]) => void) => {
+    ipcRenderer.on(channel, (_, ...args) => listener(...args));
+    return () => {
+      ipcRenderer.removeListener(channel, listener);
+    };
+  },
+  // 移除所有监听器
+  removeAllListeners: (channel: string) => {
+    ipcRenderer.removeAllListeners(channel);
+  }
+};
+
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
@@ -60,6 +90,7 @@ if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('electron', electronAPI);
    contextBridge.exposeInMainWorld('api', api);
+    contextBridge.exposeInMainWorld('ipcRenderer', ipc);
  } catch (error) {
    console.error(error);
  }
@@ -68,4 +99,6 @@ if (process.contextIsolated) {
  window.electron = electronAPI;
  // @ts-ignore (define in dts)
  window.api = api;
+  // @ts-ignore (define in dts)
+  window.ipcRenderer = ipc;
 }
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -11,9 +11,11 @@
 </template>

 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 import { darkTheme, lightTheme } from 'naive-ui';
-import { computed, nextTick, watch } from 'vue';
+import { computed, nextTick, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';

 import homeRouter from '@/router/home';
 import { useMenuStore } from '@/store/modules/menu';
@@ -23,11 +25,14 @@ import { isElectron, isLyricWindow } from '@/utils';

 import { initAudioListeners } from './hooks/MusicHook';
 import { isMobile } from './utils';
+import { useAppShortcuts } from './utils/appShortcuts';
+import { initShortcut } from './utils/shortcut';

 const { locale } = useI18n();
 const settingsStore = useSettingsStore();
 const menuStore = useMenuStore();
 const playerStore = usePlayerStore();
+const router = useRouter();

 // 监听语言变化
 watch(
@@ -75,10 +80,31 @@ if (!isLyricWindow.value) {

 handleSetLanguage(settingsStore.setData.language);

+// 监听迷你模式状态
 if (isElectron) {
  window.api.onLanguageChanged(handleSetLanguage);
+  window.electron.ipcRenderer.on('mini-mode', (_, value) => {
+    settingsStore.setMiniMode(value);
+    if (value) {
+      // 存储当前路由
+      localStorage.setItem('currentRoute', router.currentRoute.value.path);
+      router.push('/mini');
+    } else {
+      // 恢复当前路由
+      const currentRoute = localStorage.getItem('currentRoute');
+      if (currentRoute) {
+        router.push(currentRoute);
+        localStorage.removeItem('currentRoute');
+      } else {
+        router.push('/');
+      }
+    }
+  });
 }

+// 使用应用内快捷键
+useAppShortcuts();
+
 onMounted(async () => {
  if (isLyricWindow.value) {
    return;
@@ -90,7 +116,12 @@ onMounted(async () => {
    // 使用 nextTick 确保 DOM 更新后再初始化
    await nextTick();
    initAudioListeners();
+    if (isElectron) {
+      window.api.sendSong(cloneDeep(playerStore.playMusic));
+    }
  }
+  // 初始化快捷键
+  initShortcut();
 });
 </script>

--- a/src/renderer/api/bilibili.ts
+++ b/src/renderer/api/bilibili.ts
@@ -0,0 +1,154 @@
+import type { IBilibiliPlayUrl, IBilibiliVideoDetail } from '@/types/bilibili';
+import { getSetData, isElectron } from '@/utils';
+import request from '@/utils/request';
+
+interface ISearchParams {
+  keyword: string;
+  page?: number;
+  pagesize?: number;
+  search_type?: string;
+}
+
+/**
+ * 搜索B站视频
+ * @param params 搜索参数
+ */
+export const searchBilibili = (params: ISearchParams) => {
+  console.log('调用B站搜索API，参数:', params);
+  return request.get('/bilibili/search', {
+    params
+  });
+};
+
+interface IBilibiliResponse<T> {
+  code: number;
+  message: string;
+  ttl: number;
+  data: T;
+}
+
+/**
+ * 获取B站视频详情
+ * @param bvid B站视频BV号
+ * @returns 视频详情响应
+ */
+export const getBilibiliVideoDetail = (
+  bvid: string
+): Promise<IBilibiliResponse<IBilibiliVideoDetail>> => {
+  console.log('调用B站视频详情API，bvid:', bvid);
+  return new Promise((resolve, reject) => {
+    request
+      .get('/bilibili/video/detail', {
+        params: { bvid }
+      })
+      .then((response) => {
+        console.log('B站视频详情API响应:', response.status);
+
+        // 检查响应状态和数据格式
+        if (response.status === 200 && response.data && response.data.data) {
+          console.log('B站视频详情API成功，标题:', response.data.data.title);
+          resolve(response.data);
+        } else {
+          console.error('B站视频详情API响应格式不正确:', response.data);
+          reject(new Error('获取视频详情响应格式不正确'));
+        }
+      })
+      .catch((error) => {
+        console.error('B站视频详情API错误:', error);
+        reject(error);
+      });
+  });
+};
+
+/**
+ * 获取B站视频播放地址
+ * @param bvid B站视频BV号
+ * @param cid 视频分P的id
+ * @param qn 视频质量，默认为0
+ * @param fnval 视频格式标志，默认为80
+ * @param fnver 视频格式版本，默认为0
+ * @param fourk 是否允许4K视频，默认为1
+ * @returns 视频播放地址响应
+ */
+export const getBilibiliPlayUrl = (
+  bvid: string,
+  cid: number,
+  qn: number = 0,
+  fnval: number = 80,
+  fnver: number = 0,
+  fourk: number = 1
+): Promise<IBilibiliResponse<IBilibiliPlayUrl>> => {
+  console.log('调用B站视频播放地址API，bvid:', bvid, 'cid:', cid);
+  return new Promise((resolve, reject) => {
+    request
+      .get('/bilibili/playurl', {
+        params: {
+          bvid,
+          cid,
+          qn,
+          fnval,
+          fnver,
+          fourk
+        }
+      })
+      .then((response) => {
+        console.log('B站视频播放地址API响应:', response.status);
+
+        // 检查响应状态和数据格式
+        if (response.status === 200 && response.data && response.data.data) {
+          if (response.data.data.dash?.audio?.length > 0) {
+            console.log(
+              'B站视频播放地址API成功，获取到',
+              response.data.data.dash.audio.length,
+              '个音频地址'
+            );
+          } else if (response.data.data.durl?.length > 0) {
+            console.log(
+              'B站视频播放地址API成功，获取到',
+              response.data.data.durl.length,
+              '个播放地址'
+            );
+          }
+          resolve(response.data);
+        } else {
+          console.error('B站视频播放地址API响应格式不正确:', response.data);
+          reject(new Error('获取视频播放地址响应格式不正确'));
+        }
+      })
+      .catch((error) => {
+        console.error('B站视频播放地址API错误:', error);
+        reject(error);
+      });
+  });
+};
+
+export const getBilibiliProxyUrl = (url: string) => {
+  const setData = getSetData();
+  const baseURL = isElectron
+    ? `http://127.0.0.1:${setData?.musicApiPort}`
+    : import.meta.env.VITE_API;
+  const AUrl = url.startsWith('http') ? url : `https:${url}`;
+  return `${baseURL}/bilibili/stream-proxy?url=${encodeURIComponent(AUrl)}`;
+};
+
+export const getBilibiliAudioUrl = async (bvid: string, cid: number): Promise<string> => {
+  console.log('获取B站音频URL', { bvid, cid });
+  try {
+    const res = await getBilibiliPlayUrl(bvid, cid);
+    const playUrlData = res.data;
+    let url = '';
+
+    if (playUrlData.dash && playUrlData.dash.audio && playUrlData.dash.audio.length > 0) {
+      url = playUrlData.dash.audio[0].baseUrl;
+    } else if (playUrlData.durl && playUrlData.durl.length > 0) {
+      url = playUrlData.durl[0].url;
+    } else {
+      throw new Error('未找到可用的音频地址');
+    }
+
+    return getBilibiliProxyUrl(url);
+  } catch (error) {
+    console.error('获取B站音频URL失败:', error);
+    throw error;
+  }
+};
--- a/src/renderer/api/donation.ts
+++ b/src/renderer/api/donation.ts
@@ -15,6 +15,6 @@ export interface Donor {
 * 获取捐赠列表
 */
 export const getDonationList = async (): Promise<Donor[]> => {
-  const { data } = await axios.get('http://110.42.251.190:8766/api/donations');
+  const { data } = await axios.get('http://donate.alger.fun/api/donations');
  return data;
 };
--- a/src/renderer/api/stats.ts
+++ b/src/renderer/api/stats.ts
@@ -0,0 +1,75 @@
+import { isElectron } from '@/utils';
+
+import { useUserStore } from '../store/modules/user';
+
+/**
+ * 获取用户ID
+ * @returns 用户ID或null
+ */
+function getUserId(): string | null {
+  const userStore = useUserStore();
+  return userStore.user?.userId?.toString() || null;
+}
+
+/**
+ * 记录页面访问
+ * @param page 页面名称或路径
+ */
+export async function recordVisit(page: string): Promise<void> {
+  if (!isElectron) return;
+  try {
+    const userId = getUserId();
+    await window.api.invoke('record-visit', page, userId);
+    console.log(`页面访问已记录: ${page}`);
+  } catch (error) {
+    console.error('记录页面访问失败:', error);
+  }
+}
+
+/**
+ * 记录歌曲播放
+ * @param songId 歌曲ID
+ * @param songName 歌曲名称
+ * @param artistName 艺术家名称
+ * @param duration 时长（秒）
+ * @param completedPlay 是否完整播放
+ */
+export async function recordPlay(
+  songId: string | number,
+  songName: string,
+  artistName: string,
+  duration: number = 0,
+  completedPlay: boolean = false
+): Promise<void> {
+  if (!isElectron) return;
+  try {
+    const userId = getUserId();
+
+    await window.api.invoke('record-play', {
+      userId,
+      songId,
+      songName,
+      artistName,
+      duration,
+      completedPlay
+    });
+
+    console.log(`歌曲播放已记录: ${songName}`);
+  } catch (error) {
+    console.error('记录歌曲播放失败:', error);
+  }
+}
+
+/**
+ * 获取统计摘要
+ * @returns 统计数据摘要
+ */
+export async function getStatsSummary(): Promise<any> {
+  if (!isElectron) return null;
+  try {
+    return await window.api.invoke('get-stats-summary');
+  } catch (error) {
+    console.error('获取统计摘要失败:', error);
+    return null;
+  }
+}
--- a/src/renderer/api/user.ts
+++ b/src/renderer/api/user.ts
@@ -1,3 +1,4 @@
+import type { IUserDetail, IUserFollow } from '@/type/user';
 import request from '@/utils/request';

 // /user/detail
@@ -6,8 +7,8 @@ export function getUserDetail(uid: number) {
 }

 // /user/playlist
-export function getUserPlaylist(uid: number) {
-  return request.get('/user/playlist', { params: { uid } });
+export function getUserPlaylist(uid: number, limit: number = 30, offset: number = 0) {
+  return request.get('/user/playlist', { params: { uid, limit, offset } });
 }

 // 播放历史
@@ -15,3 +16,56 @@ export function getUserPlaylist(uid: number) {
 export function getUserRecord(uid: number, type: number = 0) {
  return request.get('/user/record', { params: { uid, type } });
 }
+
+// 获取用户关注列表
+// /user/follows?uid=32953014
+export function getUserFollows(uid: number, limit: number = 30, offset: number = 0) {
+  return request.get('/user/follows', { params: { uid, limit, offset } });
+}
+
+// 获取用户粉丝列表
+export function getUserFollowers(uid: number, limit: number = 30, offset: number = 0) {
+  return request.post('/user/followeds', { uid, limit, offset });
+}
+
+// 获取用户账号信息
+export const getUserAccount = () => {
+  return request<any>({
+    url: '/user/account',
+    method: 'get'
+  });
+};
+
+// 获取用户详情
+export const getUserDetailInfo = (params: { uid: string | number }) => {
+  return request<IUserDetail>({
+    url: '/user/detail',
+    method: 'get',
+    params
+  });
+};
+
+// 获取用户关注列表
+export const getUserFollowsInfo = (params: {
+  uid: string | number;
+  limit?: number;
+  offset?: number;
+}) => {
+  return request<{
+    follow: IUserFollow[];
+    more: boolean;
+  }>({
+    url: '/user/follows',
+    method: 'get',
+    params
+  });
+};
+
+// 获取用户歌单
+export const getUserPlaylists = (params: { uid: string | number }) => {
+  return request({
+    url: '/user/playlist',
+    method: 'get',
+    params
+  });
+};
--- a/src/renderer/assets/css/base.css
+++ b/src/renderer/assets/css/base.css
@@ -1,5 +1,6 @@
 body {
  /* background-color: #000; */
+  overflow: hidden;
 }

 .n-popover:has(.music-play) {
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
+    NAlert: typeof import('naive-ui')['NAlert']
    NAvatar: typeof import('naive-ui')['NAvatar']
    NBadge: typeof import('naive-ui')['NBadge']
    NButton: typeof import('naive-ui')['NButton']
@@ -16,6 +17,8 @@ declare module 'vue' {
    NCarouselItem: typeof import('naive-ui')['NCarouselItem']
    NCheckbox: typeof import('naive-ui')['NCheckbox']
    NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
+    NCollapse: typeof import('naive-ui')['NCollapse']
+    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
    NDrawer: typeof import('naive-ui')['NDrawer']
--- a/src/renderer/components/MusicList.vue
+++ b/src/renderer/components/MusicList.vue
@@ -12,21 +12,39 @@
  >
    <div class="music-page">
      <div class="music-header h-12 flex items-center justify-between">
-        <n-ellipsis :line-clamp="1">
+        <n-ellipsis :line-clamp="1" class="flex-shrink-0 mr-3">
          <div class="music-title">
            {{ name }}
          </div>
        </n-ellipsis>
-        <div class="music-close">
+
+        <!-- 搜索框 -->
+        <div class="flex-grow flex-1 flex items-center justify-end">
+          <div class="search-container">
+            <n-input
+              v-model:value="searchKeyword"
+              :placeholder="t('comp.musicList.searchSongs')"
+              clearable
+              round
+              size="small"
+            >
+              <template #prefix>
+                <i class="icon iconfont ri-search-line text-sm"></i>
+              </template>
+            </n-input>
+          </div>
+        </div>
+        <div class="music-close flex-shrink-0 ml-3">
          <i class="icon iconfont ri-close-line" @click="close"></i>
        </div>
      </div>
+
      <div class="music-content">
        <!-- 左侧歌单信息 -->
        <div class="music-info">
          <div class="music-cover">
            <n-image
-              :src="getImgUrl(cover ? listInfo?.coverImgUrl : displayedSongs[0]?.picUrl, '500y500')"
+              :src="getCoverImgUrl"
              class="cover-img"
              preview-disabled
              :class="setAnimationClass('animate__fadeIn')"
@@ -49,33 +67,36 @@
        <!-- 右侧歌曲列表 -->
        <div class="music-list-container">
          <div class="music-list">
-            <n-scrollbar @scroll="handleScroll">
-              <n-spin :show="loadingList || loading">
-                <div class="music-list-content">
-                  <div
-                    v-for="(item, index) in displayedSongs"
-                    :key="item.id"
-                    class="double-item"
-                    :class="setAnimationClass('animate__bounceInUp')"
-                    :style="getItemAnimationDelay(index)"
-                  >
-                    <song-item
-                      :item="formatSong(item)"
-                      :can-remove="canRemove"
-                      @play="handlePlay"
-                      @remove-song="(id) => emit('remove-song', id)"
-                    />
-                  </div>
-                  <div v-if="isLoadingMore" class="loading-more">
-                    {{ t('common.loadingMore') }}
-                  </div>
-                  <div v-if="!hasMore" class="loading-more">
-                    {{ t('common.noMore') }}
-                  </div>
-                  <play-bottom />
+            <n-spin :show="loadingList || loading">
+              <div class="music-list-content">
+                <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
+                  {{ t('comp.musicList.noSearchResults') }}
                </div>
-              </n-spin>
-            </n-scrollbar>
+
+                <!-- 虚拟列表，设置正确的固定高度 -->
+                <n-virtual-list
+                  ref="songListRef"
+                  class="song-virtual-list"
+                  style="height: calc(70vh - 60px)"
+                  :items="filteredSongs"
+                  :item-size="70"
+                  item-resizable
+                  key-field="id"
+                  @scroll="handleVirtualScroll"
+                >
+                  <template #default="{ item }">
+                    <div class="double-item">
+                      <song-item
+                        :item="formatSong(item)"
+                        :can-remove="canRemove"
+                        @play="handlePlay"
+                        @remove-song="(id) => emit('remove-song', id)"
+                      />
+                    </div>
+                  </template>
+                </n-virtual-list>
+              </div>
+            </n-spin>
          </div>
          <play-bottom />
        </div>
@@ -85,19 +106,20 @@
 </template>

 <script setup lang="ts">
+import PinyinMatch from 'pinyin-match';
 import { computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store/modules/player';
-import { getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
+import { SongResult } from '@/type/music';
+import { getImgUrl, isMobile, setAnimationClass } from '@/utils';

 import PlayBottom from './common/PlayBottom.vue';

 const { t } = useI18n();
 const playerStore = usePlayerStore();
-
 const props = withDefaults(
  defineProps<{
    show: boolean;
@@ -125,12 +147,14 @@ const emit = defineEmits(['update:show', 'update:loading', 'remove-song']);
 const page = ref(0);
 const pageSize = 40;
 const isLoadingMore = ref(false);
-const displayedSongs = ref<any[]>([]);
+const displayedSongs = ref<SongResult[]>([]);
 const loadingList = ref(false);
 const loadedIds = ref(new Set<number>()); // 用于追踪已加载的歌曲ID
 const isPlaylistLoading = ref(false); // 标记是否正在加载播放列表
-const completePlaylist = ref<any[]>([]); // 存储完整的播放列表
+const completePlaylist = ref<SongResult[]>([]); // 存储完整的播放列表
 const hasMore = ref(true); // 标记是否还有更多数据可加载
+const searchKeyword = ref(''); // 搜索关键词
+const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加载完成

 // 计算总数
 const total = computed(() => {
@@ -140,8 +164,66 @@ const total = computed(() => {
  return props.songList.length;
 });

+const getCoverImgUrl = computed(() => {
+  if (props.listInfo?.coverImgUrl) {
+    return props.listInfo.coverImgUrl;
+  }
+
+  const song = props.songList[0];
+  if (song?.picUrl) {
+    return song.picUrl;
+  }
+  if (song?.al?.picUrl) {
+    return song.al.picUrl;
+  }
+  if (song?.album?.picUrl) {
+    return song.album.picUrl;
+  }
+  return '';
+});
+
+// 过滤歌曲列表
+const filteredSongs = computed(() => {
+  if (!searchKeyword.value) {
+    return displayedSongs.value;
+  }
+
+  const keyword = searchKeyword.value.toLowerCase().trim();
+  return displayedSongs.value.filter((song) => {
+    const songName = song.name?.toLowerCase() || '';
+    const albumName = song.al?.name?.toLowerCase() || '';
+    const artists = song.ar || song.artists || [];
+
+    // 原始文本匹配
+    const nameMatch = songName.includes(keyword);
+    const albumMatch = albumName.includes(keyword);
+    const artistsMatch = artists.some((artist: any) => {
+      return artist.name?.toLowerCase().includes(keyword);
+    });
+
+    // 拼音匹配
+    const namePinyinMatch = song.name && PinyinMatch.match(song.name, keyword);
+    const albumPinyinMatch = song.al?.name && PinyinMatch.match(song.al.name, keyword);
+    const artistsPinyinMatch = artists.some((artist: any) => {
+      return artist.name && PinyinMatch.match(artist.name, keyword);
+    });
+
+    return (
+      nameMatch ||
+      albumMatch ||
+      artistsMatch ||
+      namePinyinMatch ||
+      albumPinyinMatch ||
+      artistsPinyinMatch
+    );
+  });
+});
+
 // 格式化歌曲数据
 const formatSong = (item: any) => {
+  if (!item) {
+    return null;
+  }
  return {
    ...item,
    picUrl: item.al?.picUrl || item.picUrl,
@@ -163,25 +245,44 @@ const loadSongs = async (ids: number[], appendToList = true, updateComplete = fa
  if (ids.length === 0) return [];

  try {
+    console.log(`请求歌曲详情，ID数量: ${ids.length}`);
    const { data } = await getMusicDetail(ids);
-    if (data?.songs) {
-      // 更新已加载ID集合
-      const newSongs = data.songs.filter((song: any) => !loadedIds.value.has(song.id));

-      newSongs.forEach((song: any) => {
+    if (data?.songs) {
+      console.log(`API返回歌曲数量: ${data.songs.length}`);
+
+      // 直接使用API返回的所有歌曲，不再过滤已加载的歌曲
+      // 因为当需要完整加载列表时，我们希望获取所有歌曲，即使ID可能重复
+      const { songs } = data;
+
+      // 只在非更新完整列表时执行过滤
+      let newSongs = songs;
+      if (!updateComplete) {
+        // 在普通加载模式下继续过滤已加载的歌曲，避免重复
+        newSongs = songs.filter((song: any) => !loadedIds.value.has(song.id));
+        console.log(`过滤已加载ID后剩余歌曲数量: ${newSongs.length}`);
+      }
+
+      // 更新已加载ID集合
+      songs.forEach((song: any) => {
        loadedIds.value.add(song.id);
      });

+      // 追加到显示列表 - 仅当appendToList=true时添加到displayedSongs
      if (appendToList) {
        displayedSongs.value.push(...newSongs);
      }

+      // 更新完整播放列表 - 仅当updateComplete=true时添加到completePlaylist
      if (updateComplete) {
-        completePlaylist.value.push(...newSongs);
+        completePlaylist.value.push(...songs);
+        console.log(`已添加到完整播放列表，当前完整列表长度: ${completePlaylist.value.length}`);
      }

-      return newSongs;
+      return updateComplete ? songs : newSongs;
    }
+    console.log('API返回无歌曲数据');
+    return [];
  } catch (error) {
    console.error('加载歌曲失败:', error);
  }
@@ -191,41 +292,127 @@ const loadSongs = async (ids: number[], appendToList = true, updateComplete = fa

 // 加载完整播放列表
 const loadFullPlaylist = async () => {
-  if (isPlaylistLoading.value) return;
+  if (isPlaylistLoading.value || isFullPlaylistLoaded.value) return;
+
  isPlaylistLoading.value = true;
-  completePlaylist.value = [...displayedSongs.value]; // 先用当前已加载的歌曲初始化
+  // 记录开始时间
+  const startTime = Date.now();
+  console.log(`开始加载完整播放列表，当前显示列表长度: ${displayedSongs.value.length}`);

  try {
-    // 如果没有trackIds，直接使用当前歌曲列表
+    // 如果没有trackIds，直接使用当前歌曲列表并标记为已完成
    if (!props.listInfo?.trackIds) {
+      isFullPlaylistLoaded.value = true;
+      console.log('无trackIds信息，使用当前列表作为完整列表');
      return;
    }

-    // 获取所有未加载的歌曲ID
+    // 获取所有trackIds
    const allIds = props.listInfo.trackIds.map((item) => item.id);
-    const unloadedIds = allIds.filter((id) => !loadedIds.value.has(id));
+    console.log(`歌单共有歌曲ID: ${allIds.length}首`);
+
+    // 重置completePlaylist和当前显示歌曲ID集合，保证不会重复添加歌曲
+    completePlaylist.value = [];
+
+    // 使用Set记录所有已加载的歌曲ID
+    const loadedSongIds = new Set<number>();
+
+    // 将当前显示列表中的歌曲和ID添加到集合中
+    displayedSongs.value.forEach((song) => {
+      loadedSongIds.add(song.id as number);
+      // 将已有歌曲添加到completePlaylist
+      completePlaylist.value.push(song);
+    });
+
+    console.log(
+      `已有显示歌曲: ${displayedSongs.value.length}首，已有ID数量: ${loadedSongIds.size}`
+    );
+
+    // 过滤出尚未加载的歌曲ID
+    const unloadedIds = allIds.filter((id) => !loadedSongIds.has(id));
+    console.log(`还需要加载的歌曲ID数量: ${unloadedIds.length}`);

-    // 如果所有歌曲都已加载，直接返回
    if (unloadedIds.length === 0) {
+      console.log('所有歌曲已加载，无需再次加载');
+      isFullPlaylistLoaded.value = true;
+      hasMore.value = false;
      return;
    }

-    // 分批加载未加载的歌曲
+    // 分批加载所有未加载的歌曲
    const batchSize = 500; // 每批加载的歌曲数量
+
    for (let i = 0; i < unloadedIds.length; i += batchSize) {
      const batchIds = unloadedIds.slice(i, i + batchSize);
      if (batchIds.length === 0) continue;

-      await loadSongs(batchIds, false, true);
+      console.log(`请求第${Math.floor(i / batchSize) + 1}批歌曲，数量: ${batchIds.length}`);
+      // 关键修改: 设置appendToList为false，避免loadSongs直接添加到displayedSongs
+      const loadedBatch = await loadSongs(batchIds, false, false);
+
+      // 添加新加载的歌曲到displayedSongs
+      if (loadedBatch.length > 0) {
+        // 过滤掉已有的歌曲，确保不会重复添加
+        const newSongs = loadedBatch.filter((song) => !loadedSongIds.has(song.id as number));
+
+        // 更新已加载ID集合
+        newSongs.forEach((song) => {
+          loadedSongIds.add(song.id as number);
+        });
+
+        console.log(`新增${newSongs.length}首歌曲到显示列表`);
+
+        // 更新显示列表和完整播放列表
+        if (newSongs.length > 0) {
+          // 添加到显示列表
+          displayedSongs.value = [...displayedSongs.value, ...newSongs];
+
+          // 添加到完整播放列表
+          completePlaylist.value.push(...newSongs);
+
+          // 如果当前正在播放的列表与这个列表匹配，实时更新播放列表
+          const currentPlaylist = playerStore.playList;
+          if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
+            console.log('实时更新当前播放列表');
+            playerStore.setPlayList(displayedSongs.value.map(formatSong));
+          }
+        }
+      }

      // 添加小延迟避免请求过于密集
      if (i + batchSize < unloadedIds.length) {
-        // 使用 setTimeout 直接延迟，避免 Promise 相关的 linter 错误
        await new Promise<void>((resolve) => {
-          setTimeout(() => resolve(), 300);
+          setTimeout(() => resolve(), 100);
        });
      }
    }
+
+    // 加载完成，更新状态
+    isFullPlaylistLoaded.value = true;
+    hasMore.value = false;
+
+    // 计算加载耗时
+    const endTime = Date.now();
+    const timeUsed = Math.round(((endTime - startTime) / 1000) * 100) / 100;
+
+    console.log(
+      `完整播放列表加载完成，共加载${displayedSongs.value.length}首歌曲，耗时${timeUsed}秒`
+    );
+    console.log(`歌单应有${allIds.length}首歌，实际加载${displayedSongs.value.length}首`);
+
+    // 检查加载的歌曲数量是否与预期相符
+    if (displayedSongs.value.length !== allIds.length) {
+      console.warn(
+        `警告: 加载的歌曲数量(${displayedSongs.value.length})与歌单应有数量(${allIds.length})不符`
+      );
+
+      // 如果数量不符，可能是API未返回所有歌曲，打印缺失的歌曲ID
+      if (displayedSongs.value.length < allIds.length) {
+        const loadedIds = new Set(displayedSongs.value.map((song) => song.id));
+        const missingIds = allIds.filter((id) => !loadedIds.has(id));
+        console.warn(`缺失的歌曲ID: ${missingIds.join(', ')}`);
+      }
+    }
  } catch (error) {
    console.error('加载完整播放列表失败:', error);
  } finally {
@@ -235,16 +422,31 @@ const loadFullPlaylist = async () => {

 // 处理播放
 const handlePlay = async () => {
-  // 先使用当前已加载的歌曲开始播放
+  // 当搜索状态下播放时，只播放过滤后的歌曲
+  if (searchKeyword.value) {
+    playerStore.setPlayList(filteredSongs.value.map(formatSong));
+    return;
+  }
+
+  // 如果完整播放列表已加载完成
+  if (isFullPlaylistLoaded.value && completePlaylist.value.length > 0) {
+    playerStore.setPlayList(completePlaylist.value.map(formatSong));
+    return;
+  }
+
+  // 如果完整播放列表未加载完成，先使用当前已加载的歌曲开始播放
  playerStore.setPlayList(displayedSongs.value.map(formatSong));

-  // 在后台加载完整播放列表
-  loadFullPlaylist().then(() => {
-    // 加载完成后，更新播放列表为完整列表
-    if (completePlaylist.value.length > 0) {
-      playerStore.setPlayList(completePlaylist.value.map(formatSong));
-    }
-  });
+  // 如果完整播放列表正在加载中，不需要重新触发加载
+  if (isPlaylistLoading.value) {
+    return;
+  }
+
+  // 在后台继续加载完整播放列表（如果未加载完成）
+  if (!isFullPlaylistLoaded.value) {
+    console.log('播放时继续在后台加载完整列表');
+    loadFullPlaylist();
+  }
 };

 const close = () => {
@@ -253,19 +455,27 @@ const close = () => {

 // 加载更多歌曲
 const loadMoreSongs = async () => {
-  // 检查是否正在加载或已经加载完成
+  if (isFullPlaylistLoaded.value) {
+    hasMore.value = false;
+    return;
+  }
+
+  if (searchKeyword.value) {
+    return;
+  }
+
  if (isLoadingMore.value || displayedSongs.value.length >= total.value) {
    hasMore.value = false;
    return;
  }

  isLoadingMore.value = true;
+
  try {
    const start = displayedSongs.value.length;
    const end = Math.min(start + pageSize, total.value);

    if (props.listInfo?.trackIds) {
-      // 获取这一批次需要加载的所有ID
      const trackIdsToLoad = props.listInfo.trackIds
        .slice(start, end)
        .map((item) => item.id)
@@ -275,7 +485,6 @@ const loadMoreSongs = async () => {
        await loadSongs(trackIdsToLoad, true, false);
      }
    } else if (start < props.songList.length) {
-      // 直接使用 songList 分页
      const newSongs = props.songList.slice(start, end);
      newSongs.forEach((song) => {
        if (!loadedIds.value.has(song.id)) {
@@ -285,7 +494,6 @@ const loadMoreSongs = async () => {
      });
    }

-    // 更新是否还有更多数据的状态
    hasMore.value = displayedSongs.value.length < total.value;
  } catch (error) {
    console.error('加载更多歌曲失败:', error);
@@ -295,28 +503,23 @@ const loadMoreSongs = async () => {
  }
 };

-// 修改滚动处理函数
-const handleScroll = (e: Event) => {
-  const target = e.target as HTMLElement;
-  if (!target) return;
+// 处理虚拟列表滚动事件
+const handleVirtualScroll = (e: any) => {
+  if (!e || !e.target) return;

-  const { scrollTop, scrollHeight, clientHeight } = target;
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
  const threshold = 200;

  if (
    scrollHeight - scrollTop - clientHeight < threshold &&
    !isLoadingMore.value &&
-    hasMore.value
+    hasMore.value &&
+    !searchKeyword.value // 搜索状态下不触发加载更多
  ) {
    loadMoreSongs();
  }
 };

-const getItemAnimationDelay = (index: number) => {
-  const currentPageIndex = index % pageSize;
-  return setAnimationDelay(currentPageIndex, 20);
-};
-
 // 重置列表状态
 const resetListState = () => {
  page.value = 0;
@@ -325,6 +528,8 @@ const resetListState = () => {
  completePlaylist.value = [];
  hasMore.value = true;
  loadingList.value = false;
+  searchKeyword.value = ''; // 重置搜索关键词
+  isFullPlaylistLoaded.value = false; // 重置完整播放列表状态
 };

 // 初始化歌曲列表
@@ -339,6 +544,15 @@ const initSongList = (songs: any[]) => {
  hasMore.value = displayedSongs.value.length < total.value;
 };

+watch(
+  () => props.listInfo,
+  (newListInfo) => {
+    if (newListInfo?.trackIds) {
+      loadFullPlaylist();
+    }
+  },
+  { deep: true }
+);
 // 修改 songList 监听器
 watch(
  () => props.songList,
@@ -359,6 +573,14 @@ watch(
  { immediate: true }
 );

+// 监听搜索关键词变化
+watch(searchKeyword, () => {
+  // 当搜索关键词为空时，考虑加载更多歌曲
+  if (!searchKeyword.value && hasMore.value && displayedSongs.value.length < total.value) {
+    loadMoreSongs();
+  }
+});
+
 // 组件卸载时清理状态
 onUnmounted(() => {
  isPlaylistLoading.value = false;
@@ -422,12 +644,34 @@ onUnmounted(() => {
    &-content {
      @apply min-h-[calc(80vh-60px)];
    }
+  }
+}

-    :deep(.n-virtual-list__scroll) {
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
+.search-container {
+  @apply max-w-md;
+
+  :deep(.n-input) {
+    @apply bg-light-200 dark:bg-dark-200;
+  }
+
+  .icon {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+}
+
+.no-result {
+  @apply text-center py-8 text-gray-500 dark:text-gray-400;
+}
+
+/* 虚拟列表样式 */
+.song-virtual-list {
+  :deep(.n-virtual-list__scroll) {
+    scrollbar-width: thin;
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply bg-gray-400 dark:bg-gray-600 rounded;
    }
  }
 }
@@ -452,6 +696,18 @@ onUnmounted(() => {
      @apply flex-1 ml-4;
    }
  }
+
+  .music-title {
+    @apply text-base;
+  }
+
+  .search-container {
+    @apply max-w-[50%];
+  }
+
+  .song-virtual-list {
+    height: calc(80vh - 120px) !important;
+  }
 }

 .loading-more {
--- a/src/renderer/components/common/BilibiliItem.vue
+++ b/src/renderer/components/common/BilibiliItem.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="bilibili-item" @click="handleClick">
+    <div class="bilibili-item-img">
+      <n-image class="w-full h-full" :src="item.pic" lazy preview-disabled />
+      <div class="play">
+        <i class="ri-play-fill text-4xl"></i>
+      </div>
+      <div class="duration">{{ formatDuration(item.duration) }}</div>
+    </div>
+    <div class="bilibili-item-info">
+      <p class="bilibili-item-title" v-html="item.title"></p>
+      <p class="bilibili-item-author"><i class="ri-user-line mr-1"></i>{{ item.author }}</p>
+      <div class="bilibili-item-stats">
+        <span><i class="ri-play-line mr-1"></i>{{ formatNumber(item.view) }}</span>
+        <span><i class="ri-chat-1-line mr-1"></i>{{ formatNumber(item.danmaku) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBilibiliSearchResult } from '@/types/bilibili';
+
+const props = defineProps<{
+  item: IBilibiliSearchResult;
+}>();
+
+const emit = defineEmits<{
+  (e: 'play', item: IBilibiliSearchResult): void;
+}>();
+
+const handleClick = () => {
+  emit('play', props.item);
+};
+
+/**
+ * 格式化数字显示
+ */
+const formatNumber = (num?: number) => {
+  if (!num) return '0';
+  if (num >= 10000) {
+    return `${(num / 10000).toFixed(1)}万`;
+  }
+  return num.toString();
+};
+
+/**
+ * 格式化视频时长
+ */
+const formatDuration = (duration?: number | string) => {
+  if (!duration) return '00:00:00';
+
+  // 处理字符串格式 (例如 "4352:29")
+  if (typeof duration === 'string') {
+    // 检查是否是合法的格式
+    if (/^\d+:\d+$/.test(duration)) {
+      // 分解分钟和秒数
+      const [minutes, seconds] = duration.split(':').map(Number);
+
+      // 转换为时:分:秒格式
+      const hours = Math.floor(minutes / 60);
+      const remainingMinutes = minutes % 60;
+
+      return `${hours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+    return '00:00:00';
+  }
+
+  // 数字处理逻辑 (秒数转为"时:分:秒"格式)
+  const hours = Math.floor(duration / 3600);
+  const minutes = Math.floor((duration % 3600) / 60);
+  const seconds = duration % 60;
+
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+</script>
+
+<style scoped lang="scss">
+.bilibili-item {
+  @apply rounded-lg flex items-start hover:bg-light-200 dark:hover:bg-dark-200 p-3 transition cursor-pointer border-none;
+
+  &-img {
+    @apply w-40 rounded-lg overflow-hidden relative mr-4;
+    aspect-ratio: 16/9;
+
+    &:hover {
+      .play {
+        @apply opacity-80;
+      }
+    }
+
+    .play {
+      @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity text-white;
+    }
+
+    .duration {
+      @apply absolute bottom-1 right-1 text-xs text-white px-1 py-0.5 rounded-sm bg-black/60 backdrop-blur-sm;
+    }
+  }
+
+  &-info {
+    @apply flex-1 overflow-hidden;
+  }
+
+  &-title {
+    @apply text-gray-800 dark:text-gray-200 text-sm font-medium mb-1 line-clamp-2 leading-tight;
+  }
+
+  &-author {
+    @apply text-gray-500 dark:text-gray-400 text-xs flex items-center mb-1;
+  }
+
+  &-stats {
+    @apply flex items-center text-xs text-gray-500 dark:text-gray-400 gap-3;
+  }
+}
+</style>
--- a/src/renderer/components/common/DownloadDrawer.vue
+++ b/src/renderer/components/common/DownloadDrawer.vue
@@ -94,6 +94,17 @@
                <n-empty :description="t('download.empty.noDownloaded')" />
              </div>
              <div v-else class="downloaded-content">
+                <div class="downloaded-header">
+                  <div class="header-title">
+                    {{ t('download.count', { count: downloadedList.length }) }}
+                  </div>
+                  <n-button secondary size="small" @click="showClearConfirm = true">
+                    <template #icon>
+                      <i class="iconfont ri-delete-bin-line mr-1"></i>
+                    </template>
+                    {{ t('download.clearAll') }}
+                  </n-button>
+                </div>
                <div class="downloaded-items">
                  <div v-for="item in downList" :key="item.path" class="downloaded-item">
                    <div class="downloaded-item-content">
@@ -172,12 +183,38 @@
      }}</n-button>
    </template>
  </n-modal>
+
+  <!-- 清空确认对话框 -->
+  <n-modal
+    v-model:show="showClearConfirm"
+    preset="dialog"
+    type="warning"
+    :title="t('download.clear.title')"
+  >
+    <template #header>
+      <div class="flex items-center">
+        <i class="iconfont ri-delete-bin-line mr-2 text-xl"></i>
+        <span>{{ t('download.clear.title') }}</span>
+      </div>
+    </template>
+    <div class="delete-confirm-content">
+      {{ t('download.clear.message') }}
+    </div>
+    <template #action>
+      <n-button size="small" @click="showClearConfirm = false">{{
+        t('download.clear.cancel')
+      }}</n-button>
+      <n-button size="small" type="warning" @click="clearDownloadRecords">{{
+        t('download.clear.confirm')
+      }}</n-button>
+    </template>
+  </n-modal>
 </template>

 <script setup lang="ts">
 import type { ProgressStatus } from 'naive-ui';
 import { useMessage } from 'naive-ui';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

 import { getMusicDetail } from '@/api/music';
@@ -320,29 +357,49 @@ const confirmDelete = async () => {
      'delete-downloaded-music',
      itemToDelete.value.path
    );
+
+    // 无论删除文件是否成功，都从记录中移除
+    localStorage.setItem(
+      'downloadedList',
+      JSON.stringify(
+        downloadedList.value.filter((item) => item.id !== (itemToDelete.value as DownloadedItem).id)
+      )
+    );
+    await refreshDownloadedList();
+
    if (success) {
-      localStorage.setItem(
-        'downloadedList',
-        JSON.stringify(
-          downloadedList.value.filter(
-            (item) => item.id !== (itemToDelete.value as DownloadedItem).id
-          )
-        )
-      );
-      await refreshDownloadedList();
      message.success(t('download.delete.success'));
    } else {
-      message.error(t('download.delete.failed'));
+      message.warning(t('download.delete.fileNotFound'));
    }
  } catch (error) {
    console.error('Failed to delete music:', error);
-    message.error(t('download.delete.failed'));
+    // 即使删除文件出错，也从记录中移除
+    localStorage.setItem(
+      'downloadedList',
+      JSON.stringify(
+        downloadedList.value.filter((item) => item.id !== (itemToDelete.value as DownloadedItem).id)
+      )
+    );
+    await refreshDownloadedList();
+    message.warning(t('download.delete.recordRemoved'));
  } finally {
    showDeleteConfirm.value = false;
    itemToDelete.value = null;
  }
 };

+// 清空下载记录相关
+const showClearConfirm = ref(false);
+
+// 清空下载记录
+const clearDownloadRecords = () => {
+  localStorage.setItem('downloadedList', '[]');
+  downloadedList.value = [];
+  message.success(t('download.clear.success'));
+  showClearConfirm.value = false;
+};
+
 // 播放音乐
 // const handlePlay = async (musicInfo: SongResult) => {
 //   await playerStore.setPlay(musicInfo);
@@ -421,6 +478,12 @@ onMounted(() => {
  // 监听下载进度
  window.electron.ipcRenderer.on('music-download-progress', (_, data) => {
    const existingItem = downloadList.value.find((item) => item.filename === data.filename);
+
+    // 如果进度为100%，将状态设置为已完成
+    if (data.progress === 100) {
+      data.status = 'completed';
+    }
+
    if (existingItem) {
      Object.assign(existingItem, {
        ...data,
@@ -523,9 +586,18 @@ const handleDrawerClose = () => {
  @apply flex-1 overflow-hidden pb-40;
 }

+.downloaded-header {
+  @apply flex items-center justify-between p-4 bg-light-100 dark:bg-dark-200 sticky top-0 z-10;
+  @apply border-b border-gray-100 dark:border-gray-800;
+
+  .header-title {
+    @apply text-sm font-medium text-gray-600 dark:text-gray-400;
+  }
+}
+
 .download-items,
 .downloaded-items {
-  @apply space-y-3;
+  @apply space-y-3 p-4;
 }

 .total-progress {
--- a/src/renderer/components/common/SongItem.vue
+++ b/src/renderer/components/common/SongItem.vue
@@ -92,8 +92,9 @@ 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, useSettingsStore } from '@/store';
+import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';
@@ -121,7 +122,6 @@ const props = withDefaults(
 );

 const playerStore = usePlayerStore();
-const settingsStore = useSettingsStore();

 const message = useMessage();

@@ -140,7 +140,9 @@ const dropdownY = ref(0);

 const isDownloading = ref(false);

-const openPlaylistDrawer = inject<(songId: number) => void>('openPlaylistDrawer');
+const openPlaylistDrawer = inject<(songId: number | string) => void>('openPlaylistDrawer');
+
+const { navigateToArtist } = useArtist();

 const renderSongPreview = () => {
  return h(
@@ -283,7 +285,7 @@ const downloadMusic = async () => {
  try {
    isDownloading.value = true;

-    const data = (await getSongUrl(props.item.id, cloneDeep(props.item), true)) as any;
+    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'));
    }
@@ -291,14 +293,17 @@ const downloadMusic = async () => {
    // 构建文件名
    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: {
-        ...cloneDeep(props.item),
+        ...songData,
        downloadTime: Date.now()
      }
    });
@@ -356,6 +361,7 @@ const imageLoad = async () => {

 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = async (item: SongResult) => {
+  // 如果是当前正在播放的音乐，则切换播放/暂停状态
  if (playMusic.value.id === item.id) {
    if (play.value) {
      playerStore.setPlayMusic(false);
@@ -366,23 +372,37 @@ const playMusicEvent = async (item: SongResult) => {
    }
    return;
  }
-  await playerStore.setPlay(item);
-  playerStore.isPlay = true;
-  emits('play', item);
+
+  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(() => {
-  return playerStore.favoriteList.includes(props.item.id);
+  // 将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(props.item.id);
+    playerStore.removeFromFavorite(numericId);
  } else {
-    playerStore.addToFavorite(props.item.id);
+    playerStore.addToFavorite(numericId);
  }
 };

@@ -392,8 +412,7 @@ const toggleSelect = () => {
 };

 const handleArtistClick = (id: number) => {
-  settingsStore.setCurrentArtistId(id);
-  settingsStore.setShowArtistDrawer(true);
+  navigateToArtist(id);
 };

 // 获取歌手列表（最多显示5个）
--- a/src/renderer/components/common/UpdateModal.vue
+++ b/src/renderer/components/common/UpdateModal.vue
@@ -35,23 +35,22 @@
        </div>
      </div>
      <div class="modal-actions" :class="{ 'mt-6': !downloading }">
-        <n-button
-          class="cancel-btn"
-          :disabled="downloading"
-          :loading="downloading"
-          @click="closeModal"
-        >
+        <n-button class="cancel-btn" :disabled="downloading" @click="closeModal">
          {{ t('comp.update.cancel') }}
        </n-button>
        <n-button
+          v-if="!downloading"
          type="primary"
          class="update-btn"
-          :loading="downloading"
          :disabled="downloading"
          @click="handleUpdate"
        >
          {{ downloadBtnText }}
        </n-button>
+        <!-- 后台下载 -->
+        <n-button v-else class="update-btn" type="primary" @click="closeModal">
+          {{ t('comp.update.backgroundDownload') }}
+        </n-button>
      </div>
      <div v-if="!downloading" class="modal-desc mt-4 text-center">
        <p class="text-xs text-gray-400">
@@ -71,7 +70,7 @@

 <script setup lang="ts">
 import { marked } from 'marked';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, h, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

 import { useSettingsStore } from '@/store/modules/settings';
@@ -80,6 +79,8 @@ import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
 import config from '../../../../package.json';

 const { t } = useI18n();
+const dialog = useDialog();
+const message = useMessage();

 // 配置 marked
 marked.setOptions({
@@ -136,6 +137,11 @@ const downloadBtnText = computed(() => {
  return t('comp.update.nowUpdate');
 });

+// 下载完成后的文件路径
+const downloadedFilePath = ref('');
+// 防止对话框重复弹出
+const isDialogShown = ref(false);
+
 // 处理下载状态更新
 const handleDownloadProgress = (_event: any, progress: number, status: string) => {
  downloadProgress.value = progress;
@@ -145,16 +151,73 @@ const handleDownloadProgress = (_event: any, progress: number, status: string) =
 // 处理下载完成
 const handleDownloadComplete = (_event: any, success: boolean, filePath: string) => {
  downloading.value = false;
-  if (success) {
-    window.electron.ipcRenderer.send('install-update', filePath);
-  } else {
-    window.$message.error(t('comp.update.downloadFailed'));
+  closeModal();
+
+  if (success && !isDialogShown.value) {
+    downloadedFilePath.value = filePath;
+    isDialogShown.value = true;
+
+    // 复制文件路径到剪贴板
+    const copyFilePath = () => {
+      navigator.clipboard
+        .writeText(filePath)
+        .then(() => {
+          message.success(t('comp.update.copySuccess'));
+        })
+        .catch(() => {
+          message.error(t('comp.update.copyFailed'));
+        });
+    };
+
+    // 使用naive-ui的对话框询问用户是否安装
+    const dialogRef = dialog.create({
+      title: t('comp.update.installConfirmTitle'),
+      content: () =>
+        h('div', { class: 'update-dialog-content' }, [
+          h('p', { class: 'content-text' }, t('comp.update.installConfirmContent')),
+          h('div', { class: 'divider' }),
+          h('p', { class: 'manual-tip' }, t('comp.update.manualInstallTip')),
+          h('div', { class: 'file-path-container' }, [
+            h('div', { class: 'file-path-box' }, [
+              h('p', { class: 'file-path-label' }, t('comp.update.fileLocation')),
+              h('div', { class: 'file-path-value' }, filePath)
+            ]),
+            h(
+              'div',
+              {
+                class: 'copy-btn',
+                onClick: copyFilePath
+              },
+              [h('i', { class: 'ri-file-copy-line' }), h('span', t('comp.update.copy'))]
+            )
+          ])
+        ]),
+      positiveText: t('comp.update.yesInstall'),
+      negativeText: t('comp.update.noThanks'),
+      onPositiveClick: () => {
+        window.electron.ipcRenderer.send('install-update', filePath);
+      },
+      onNegativeClick: () => {
+        closeModal();
+        // 关闭当前窗口
+        dialogRef.destroy();
+      },
+      onClose: () => {
+        isDialogShown.value = false;
+      }
+    });
+  } else if (!success) {
+    message.error(t('comp.update.downloadFailed'));
  }
 };

 // 监听下载事件
 onMounted(() => {
  checkForUpdates();
+  // 确保事件监听器只注册一次
+  window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
+  window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
+
  window.electron.ipcRenderer.on('download-progress', handleDownloadProgress);
  window.electron.ipcRenderer.on('download-complete', handleDownloadComplete);
 });
@@ -163,6 +226,7 @@ onMounted(() => {
 onUnmounted(() => {
  window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
  window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
+  isDialogShown.value = false;
 });

 const handleUpdate = async () => {
@@ -215,6 +279,7 @@ const handleUpdate = async () => {
    try {
      downloading.value = true;
      downloadStatus.value = t('comp.update.prepareDownload');
+      isDialogShown.value = false;

      // 获取代理节点列表
      const proxyHosts = await getProxyNodes();
@@ -224,11 +289,11 @@ const handleUpdate = async () => {
      window.electron.ipcRenderer.send('start-download', proxyDownloadUrl);
    } catch (error) {
      downloading.value = false;
-      window.$message.error(t('comp.update.startFailed'));
+      message.error(t('comp.update.startFailed'));
      console.error('下载失败:', error);
    }
  } else {
-    window.$message.error(t('comp.update.noDownloadUrl'));
+    message.error(t('comp.update.noDownloadUrl'));
    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
  }
 };
@@ -355,3 +420,110 @@ const handleUpdate = async () => {
  }
 }
 </style>
+
+<style lang="scss">
+/* 对话框内容样式 */
+.update-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .content-text {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: #e5e7eb;
+    margin: 4px 0;
+  }
+
+  .manual-tip {
+    font-size: 14px;
+    color: #6b7280;
+  }
+
+  .file-path-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+
+    .file-path-box {
+      flex: 1;
+
+      .file-path-label {
+        font-size: 12px;
+        color: #6b7280;
+        margin-bottom: 4px;
+      }
+
+      .file-path-value {
+        padding: 8px;
+        border-radius: 4px;
+        background-color: #f3f4f6;
+        font-size: 12px;
+        font-family: monospace;
+        color: #1f2937;
+        word-break: break-all;
+      }
+    }
+
+    .copy-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background-color: #e5e7eb;
+      color: #4b5563;
+      font-size: 12px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: #d1d5db;
+      }
+
+      i {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+/* 深色模式样式 */
+.dark .update-dialog-content {
+  .divider {
+    background-color: #374151;
+  }
+
+  .manual-tip {
+    color: #9ca3af;
+  }
+
+  .file-path-container {
+    .file-path-box {
+      .file-path-label {
+        color: #9ca3af;
+      }
+
+      .file-path-value {
+        background-color: #1f2937;
+        color: #d1d5db;
+      }
+    }
+
+    .copy-btn {
+      background-color: #374151;
+      color: #d1d5db;
+
+      &:hover {
+        background-color: #4b5563;
+      }
+    }
+  }
+}
+</style>
--- a/src/renderer/components/home/RecommendAlbum.vue
+++ b/src/renderer/components/home/RecommendAlbum.vue
@@ -26,7 +26,7 @@
      v-model:show="showMusic"
      :name="albumName"
      :song-list="songList"
-      :cover="false"
+      :cover="true"
      :loading="loadingList"
      :list-info="albumInfo"
    />
@@ -62,17 +62,19 @@ const handleClick = async (item: any) => {
  loadingList.value = true;
  showMusic.value = true;
  const res = await getAlbum(item.id);
-  songList.value = res.data.songs.map((song: any) => {
-    song.al.picUrl = song.al.picUrl || item.picUrl;
+  const { songs, album } = res.data;
+  songList.value = songs.map((song: any) => {
+    song.al.picUrl = song.al.picUrl || album.picUrl;
+    song.picUrl = song.al.picUrl || album.picUrl || song.picUrl;
    return song;
  });
  albumInfo.value = {
-    ...res.data.album,
+    ...album,
    creator: {
-      avatarUrl: res.data.album.artist.img1v1Url,
-      nickname: `${res.data.album.artist.name} - ${res.data.album.company}`
+      avatarUrl: album.artist.img1v1Url,
+      nickname: `${album.artist.name} - ${album.company}`
    },
-    description: res.data.album.description
+    description: album.description
  };
  loadingList.value = false;
 };
--- a/src/renderer/components/home/TopBanner.vue
+++ b/src/renderer/components/home/TopBanner.vue
@@ -2,6 +2,7 @@
  <div class="recommend-singer">
    <div class="recommend-singer-list">
      <n-carousel
+        v-if="hotSingerData?.artists.length"
        slides-per-view="auto"
        :show-dots="false"
        :space-between="20"
@@ -60,19 +61,27 @@
              >
                <div class="user-play-item-img">
                  <img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="" />
-                  <div class="user-play-item-overlay">
-                    <div class="user-play-item-play-btn">
-                      <i class="iconfont icon-playfill text-3xl text-white"></i>
-                    </div>
-                  </div>
                  <div class="user-play-item-title">
                    <div class="user-play-item-title-name">{{ item.name }}</div>
+
+                    <div class="user-play-item-list">
+                      <div
+                        v-for="song in item.tracks"
+                        :key="song.id"
+                        class="user-play-item-list-name"
+                      >
+                        {{ song.name }}
+                      </div>
+                    </div>
                  </div>
                  <div class="user-play-item-count">
                    <div class="user-play-item-count-tag">
                      {{ t('common.songCount', { count: item.trackCount }) }}
                    </div>
                  </div>
+                  <div class="user-play-item-direct-play" @click.stop="handlePlayPlaylist(item.id)">
+                    <i class="iconfont icon-playfill text-xl text-white"></i>
+                  </div>
                </div>
              </div>
            </div>
@@ -88,7 +97,7 @@
            class="recommend-singer-item relative"
            :class="setAnimationClass('animate__backInRight')"
            :style="setAnimationDelay(index + 2, 100)"
-            @click="handleOpenSinger(item.id)"
+            @click="handleArtistClick(item.id)"
          >
            <div
              :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
@@ -103,7 +112,10 @@
              </div>
            </div>
            <!-- 播放按钮(hover时显示) -->
-            <div class="recommend-singer-item-play-overlay" @click.stop="handleOpenSinger(item.id)">
+            <div
+              class="recommend-singer-item-play-overlay"
+              @click.stop="handleArtistClick(item.id)"
+            >
              <div class="recommend-singer-item-play-btn">
                <i class="iconfont icon-playfill text-4xl"></i>
              </div>
@@ -138,12 +150,15 @@ import { useI18n } from 'vue-i18n';

 import { getDayRecommend, getHotSinger } from '@/api/home';
 import { getListDetail } from '@/api/list';
+import { getMusicDetail } from '@/api/music';
 import { getUserPlaylist } from '@/api/user';
 import MusicList from '@/components/MusicList.vue';
-import { useSettingsStore, useUserStore } from '@/store';
+import { useArtist } from '@/hooks/useArtist';
+import { usePlayerStore, useUserStore } from '@/store';
 import { IDayRecommend } from '@/type/day_recommend';
 import { Playlist } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
+import { SongResult } from '@/type/music';
 import type { IHotSinger } from '@/type/singer';
 import {
  getImgUrl,
@@ -154,6 +169,7 @@ import {
 } from '@/utils';

 const userStore = useUserStore();
+const playerStore = usePlayerStore();

 const { t } = useI18n();

@@ -169,6 +185,8 @@ const playlistLoading = ref(false);
 const playlistItem = ref<Playlist | null>(null);
 const playlistDetail = ref<IListDetail | null>(null);

+const { navigateToArtist } = useArtist();
+
 /**
 * 获取轮播项的样式
 * @param index 项目索引（用于动画延迟）
@@ -233,10 +251,7 @@ onMounted(async () => {

 const loadData = async () => {
  try {
-    // 第一个请求：获取热门歌手
-    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
-
-    // 第二个请求：获取每日推荐
+    // 获取每日推荐
    try {
      const {
        data: { data: dayRecommend }
@@ -246,7 +261,6 @@ const loadData = async () => {
      console.error('error', error);
    }

-    hotSingerData.value = singerData;
    if (userStore.user) {
      const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
      // 确保最多只显示4个歌单，并按播放次数排序
@@ -254,16 +268,17 @@ const loadData = async () => {
        .sort((a, b) => b.playCount - a.playCount)
        .slice(0, 4);
    }
+
+    // 获取热门歌手
+    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
+    hotSingerData.value = singerData;
  } catch (error) {
    console.error('error', error);
  }
 };

-const settingsStore = useSettingsStore();
-
-const handleOpenSinger = (id: number) => {
-  settingsStore.setCurrentArtistId(id);
-  settingsStore.setShowArtistDrawer(true);
+const handleArtistClick = (id: number) => {
+  navigateToArtist(id);
 };

 const toPlaylist = async (id: number) => {
@@ -289,6 +304,93 @@ const toPlaylist = async (id: number) => {
  }
 };

+// 添加直接播放歌单的方法
+const handlePlayPlaylist = async (id: number) => {
+  try {
+    // 先显示加载状态
+    playlistLoading.value = true;
+
+    // 获取歌单详情
+    const { data } = await getListDetail(id);
+
+    if (data?.playlist) {
+      // 先使用已有的tracks开始播放（这些是已经在歌单详情中返回的前几首歌曲）
+      if (data.playlist.tracks?.length > 0) {
+        // 格式化歌曲列表
+        const initialSongs = data.playlist.tracks.map((track) => ({
+          ...track,
+          source: 'netease',
+          picUrl: track.al.picUrl
+        })) as unknown as SongResult[];
+
+        // 设置播放列表
+        playerStore.setPlayList(initialSongs);
+
+        // 开始播放第一首
+        await playerStore.setPlay(initialSongs[0]);
+
+        // 如果有trackIds，异步加载完整歌单
+        if (data.playlist.trackIds?.length > initialSongs.length) {
+          loadFullPlaylist(data.playlist.trackIds, initialSongs);
+        }
+      }
+    }
+
+    // 关闭加载状态
+    playlistLoading.value = false;
+  } catch (error) {
+    console.error('播放歌单失败:', error);
+    playlistLoading.value = false;
+  }
+};
+
+// 异步加载完整歌单
+const loadFullPlaylist = async (trackIds: { id: number }[], initialSongs: SongResult[]) => {
+  try {
+    // 获取已加载歌曲的ID集合，避免重复加载
+    const loadedIds = new Set(initialSongs.map((song) => song.id));
+
+    // 筛选出未加载的ID
+    const unloadedTrackIds = trackIds
+      .filter((item) => !loadedIds.has(item.id as number))
+      .map((item) => item.id);
+
+    if (unloadedTrackIds.length === 0) return;
+
+    // 分批获取歌曲详情，每批最多获取500首
+    const batchSize = 500;
+    const allSongs = [...initialSongs];
+
+    for (let i = 0; i < unloadedTrackIds.length; i += batchSize) {
+      const batchIds = unloadedTrackIds.slice(i, i + batchSize);
+      if (batchIds.length > 0) {
+        try {
+          const { data: songsData } = await getMusicDetail(batchIds);
+          if (songsData?.songs?.length) {
+            const formattedSongs = songsData.songs.map((item) => ({
+              ...item,
+              source: 'netease',
+              picUrl: item.al.picUrl
+            })) as unknown as SongResult[];
+
+            allSongs.push(...formattedSongs);
+          }
+        } catch (error) {
+          console.error('获取批次歌曲详情失败:', error);
+        }
+      }
+    }
+
+    // 更新完整的播放列表但保持当前播放的歌曲不变
+    if (allSongs.length > initialSongs.length) {
+      console.log('更新播放列表，总歌曲数:', allSongs.length);
+      playerStore.setPlayList(allSongs);
+    }
+  } catch (error) {
+    console.error('加载完整歌单失败:', error);
+  }
+};
+
 // 监听登录状态
 watchEffect(() => {
  if (userStore.user) {
@@ -412,18 +514,12 @@ const getPlaylistGridClass = (length: number) => {
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-        .user-play-item-overlay {
-          opacity: 1;
-        }
      }

      img {
        @apply absolute inset-0 w-full h-full object-cover;
      }
    }
-    &-overlay {
-      @apply absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300;
-    }
    &-title {
      @apply absolute top-0 left-0 right-0 p-2 bg-gradient-to-b from-black/70 to-transparent z-10;
      &-name {
@@ -431,11 +527,17 @@ const getPlaylistGridClass = (length: number) => {
      }
    }
    &-count {
-      @apply absolute bottom-2 right-2 z-10;
+      @apply absolute bottom-2 left-2 z-10;
      &-tag {
        @apply px-2 py-0.5 text-xs text-white bg-black/50 backdrop-blur-sm rounded-full;
      }
    }
+    &-direct-play {
+      @apply absolute bottom-2 right-2 z-20 w-10 h-10 rounded-full bg-green-600 hover:bg-green-700 flex items-center justify-center cursor-pointer transform scale-90 hover:scale-100 transition-all;
+      &:hover {
+        @apply shadow-lg;
+      }
+    }
    &-play-btn {
      @apply flex items-center justify-center;
      transform: scale(0.8);
--- a/src/renderer/components/lyric/LyricSettings.vue
+++ b/src/renderer/components/lyric/LyricSettings.vue
@@ -2,84 +2,119 @@
  <div class="settings-panel transparent-popover">
    <div class="settings-title">{{ t('settings.lyricSettings.title') }}</div>
    <div class="settings-content">
-      <div class="settings-item">
-        <span>{{ t('settings.lyricSettings.pureMode') }}</span>
-        <n-switch v-model:value="config.pureModeEnabled" />
-      </div>
+      <n-tabs type="line" animated size="small">
+        <!-- 显示设置 -->
+        <n-tab-pane :name="'display'" :tab="t('settings.lyricSettings.tabs.display')">
+          <div class="tab-content">
+            <div class="settings-grid">
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.pureMode') }}</span>
+                <n-switch v-model:value="config.pureModeEnabled" />
+              </div>
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.hideCover') }}</span>
+                <n-switch v-model:value="config.hideCover" />
+              </div>
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.centerDisplay') }}</span>
+                <n-switch v-model:value="config.centerLyrics" />
+              </div>
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.showTranslation') }}</span>
+                <n-switch v-model:value="config.showTranslation" />
+              </div>
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.hideLyrics') }}</span>
+                <n-switch v-model:value="config.hideLyrics" />
+              </div>
+            </div>
+          </div>
+        </n-tab-pane>

-      <div class="settings-item">
-        <span>{{ t('settings.lyricSettings.hideCover') }}</span>
-        <n-switch v-model:value="config.hideCover" />
-      </div>
+        <!-- 界面设置 -->
+        <n-tab-pane :name="'interface'" :tab="t('settings.lyricSettings.tabs.interface')">
+          <div class="tab-content">
+            <div class="settings-grid">
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.hidePlayBar') }}</span>
+                <n-switch v-model:value="config.hidePlayBar" />
+              </div>
+              <div class="settings-item">
+                <span>{{ t('settings.lyricSettings.hideMiniPlayBar') }}</span>
+                <n-switch v-model:value="config.hideMiniPlayBar" />
+              </div>
+            </div>
+            <div class="theme-section">
+              <div class="section-title">{{ t('settings.lyricSettings.backgroundTheme') }}</div>
+              <n-radio-group v-model:value="config.theme" name="theme" class="theme-radio-group">
+                <n-space>
+                  <n-radio value="default">{{
+                    t('settings.lyricSettings.themeOptions.default')
+                  }}</n-radio>
+                  <n-radio value="light">{{
+                    t('settings.lyricSettings.themeOptions.light')
+                  }}</n-radio>
+                  <n-radio value="dark">{{
+                    t('settings.lyricSettings.themeOptions.dark')
+                  }}</n-radio>
+                </n-space>
+              </n-radio-group>
+            </div>
+          </div>
+        </n-tab-pane>

-      <div class="settings-item">
-        <span>{{ t('settings.lyricSettings.centerDisplay') }}</span>
-        <n-switch v-model:value="config.centerLyrics" />
-      </div>
+        <!-- 文字设置 -->
+        <n-tab-pane :name="'typography'" :tab="t('settings.lyricSettings.tabs.typography')">
+          <div class="tab-content">
+            <div class="slider-section">
+              <div class="slider-item">
+                <span>{{ t('settings.lyricSettings.fontSize') }}</span>
+                <n-slider
+                  v-model:value="config.fontSize"
+                  :step="1"
+                  :min="12"
+                  :max="32"
+                  :marks="{
+                    12: t('settings.lyricSettings.fontSizeMarks.small'),
+                    22: t('settings.lyricSettings.fontSizeMarks.medium'),
+                    32: t('settings.lyricSettings.fontSizeMarks.large')
+                  }"
+                />
+              </div>

-      <div class="settings-item">
-        <span>{{ t('settings.lyricSettings.showTranslation') }}</span>
-        <n-switch v-model:value="config.showTranslation" />
-      </div>
+              <div class="slider-item">
+                <span>{{ t('settings.lyricSettings.letterSpacing') }}</span>
+                <n-slider
+                  v-model:value="config.letterSpacing"
+                  :step="0.2"
+                  :min="-2"
+                  :max="10"
+                  :marks="{
+                    '-2': t('settings.lyricSettings.letterSpacingMarks.compact'),
+                    0: t('settings.lyricSettings.letterSpacingMarks.default'),
+                    10: t('settings.lyricSettings.letterSpacingMarks.loose')
+                  }"
+                />
+              </div>

-      <div class="settings-item">
-        <span>{{ t('settings.lyricSettings.hidePlayBar') }}</span>
-        <n-switch v-model:value="config.hidePlayBar" />
-      </div>
-
-      <div class="settings-slider">
-        <span>{{ t('settings.lyricSettings.fontSize') }}</span>
-        <n-slider
-          v-model:value="config.fontSize"
-          :step="1"
-          :min="12"
-          :max="32"
-          :marks="{
-            12: t('settings.lyricSettings.fontSizeMarks.small'),
-            22: t('settings.lyricSettings.fontSizeMarks.medium'),
-            32: t('settings.lyricSettings.fontSizeMarks.large')
-          }"
-        />
-      </div>
-
-      <div class="settings-slider">
-        <span>{{ t('settings.lyricSettings.letterSpacing') }}</span>
-        <n-slider
-          v-model:value="config.letterSpacing"
-          :step="0.2"
-          :min="-2"
-          :max="10"
-          :marks="{
-            '-2': t('settings.lyricSettings.letterSpacingMarks.compact'),
-            0: t('settings.lyricSettings.letterSpacingMarks.default'),
-            10: t('settings.lyricSettings.letterSpacingMarks.loose')
-          }"
-        />
-      </div>
-
-      <div class="settings-slider">
-        <span>{{ t('settings.lyricSettings.lineHeight') }}</span>
-        <n-slider
-          v-model:value="config.lineHeight"
-          :step="0.1"
-          :min="1"
-          :max="3"
-          :marks="{
-            1: t('settings.lyricSettings.lineHeightMarks.compact'),
-            1.5: t('settings.lyricSettings.lineHeightMarks.default'),
-            3: t('settings.lyricSettings.lineHeightMarks.loose')
-          }"
-        />
-      </div>
-
-      <div class="settings-item">
-        <span>{{ t('settings.lyricSettings.backgroundTheme') }}</span>
-        <n-radio-group v-model:value="config.theme" name="theme">
-          <n-radio value="default">{{ t('settings.lyricSettings.themeOptions.default') }}</n-radio>
-          <n-radio value="light">{{ t('settings.lyricSettings.themeOptions.light') }}</n-radio>
-          <n-radio value="dark">{{ t('settings.lyricSettings.themeOptions.dark') }}</n-radio>
-        </n-radio-group>
-      </div>
+              <div class="slider-item">
+                <span>{{ t('settings.lyricSettings.lineHeight') }}</span>
+                <n-slider
+                  v-model:value="config.lineHeight"
+                  :step="0.1"
+                  :min="1"
+                  :max="3"
+                  :marks="{
+                    1: t('settings.lyricSettings.lineHeightMarks.compact'),
+                    1.5: t('settings.lyricSettings.lineHeightMarks.default'),
+                    3: t('settings.lyricSettings.lineHeightMarks.loose')
+                  }"
+                />
+              </div>
+            </div>
+          </div>
+        </n-tab-pane>
+      </n-tabs>
    </div>
  </div>
 </template>
@@ -88,35 +123,12 @@
 import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

+import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
+
 const { t } = useI18n();
-
-interface LyricConfig {
-  hideCover: boolean;
-  centerLyrics: boolean;
-  fontSize: number;
-  letterSpacing: number;
-  lineHeight: number;
-  showTranslation: boolean;
-  theme: 'default' | 'light' | 'dark';
-  hidePlayBar: boolean;
-  pureModeEnabled: boolean;
-}
-
-const config = ref<LyricConfig>({
-  hideCover: false,
-  centerLyrics: false,
-  fontSize: 22,
-  letterSpacing: 0,
-  lineHeight: 2,
-  showTranslation: true,
-  theme: 'default',
-  hidePlayBar: false,
-  pureModeEnabled: false
-});
-
+const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
 const emit = defineEmits(['themeChange']);

-// 监听配置变化并保存到本地存储
 watch(
  () => config.value,
  (newConfig) => {
@@ -125,7 +137,6 @@ watch(
  { deep: true }
 );

-// 监听主题变化
 watch(
  () => config.value.theme,
  (newTheme) => {
@@ -133,14 +144,12 @@ watch(
  }
 );

-// 更新 CSS 变量
 const updateCSSVariables = (config: LyricConfig) => {
  document.documentElement.style.setProperty('--lyric-font-size', `${config.fontSize}px`);
  document.documentElement.style.setProperty('--lyric-letter-spacing', `${config.letterSpacing}px`);
  document.documentElement.style.setProperty('--lyric-line-height', config.lineHeight.toString());
 };

-// 加载保存的配置
 onMounted(() => {
  const savedConfig = localStorage.getItem('music-full-config');
  if (savedConfig) {
@@ -156,14 +165,50 @@ defineExpose({

 <style scoped lang="scss">
 .settings-panel {
-  @apply p-4 w-72 rounded-lg relative overflow-hidden backdrop-blur-lg bg-black/10;
+  @apply p-4 w-80 rounded-lg relative overflow-hidden backdrop-blur-lg bg-black/10;
+
  .settings-title {
    @apply text-base font-bold mb-4;
    color: var(--text-color-active);
  }

  .settings-content {
-    @apply space-y-4;
+    :deep(.n-tabs-nav) {
+      @apply mb-3;
+    }
+
+    :deep(.n-tab-pane) {
+      @apply p-0;
+    }
+
+    :deep(.n-tabs-tab) {
+      @apply text-xs;
+      color: var(--text-color-primary);
+
+      &.n-tabs-tab--active {
+        color: var(--text-color-active);
+      }
+    }
+
+    :deep(.n-tabs-tab-wrapper) {
+      @apply pb-0;
+    }
+
+    :deep(.n-tabs-pane-wrapper) {
+      @apply px-2;
+    }
+
+    :deep(.n-tabs-bar) {
+      background-color: var(--text-color-active);
+    }
+  }
+
+  .tab-content {
+    @apply py-2;
+  }
+
+  .settings-grid {
+    @apply grid grid-cols-1 gap-3;
  }

  .settings-item {
@@ -174,22 +219,38 @@ defineExpose({
    }
  }

-  .settings-slider {
-    @apply space-y-2;
-    @apply mb-10 !important;
+  .section-title {
+    @apply text-sm font-medium mb-2;
+    color: var(--text-color-primary);
+  }
+
+  .theme-section {
+    @apply mt-4;
+  }
+
+  .slider-section {
+    @apply space-y-6;
+  }
+
+  .slider-item {
+    @apply space-y-2 mb-10 !important;
    span {
      @apply text-sm;
      color: var(--text-color-primary);
    }
  }
+
+  .theme-radio-group {
+    @apply flex;
+  }
 }

-// 修改 slider 字体颜色
 :deep(.n-slider-mark) {
  color: var(--text-color-primary) !important;
 }
-// 修改 radio 字体颜色
+
 :deep(.n-radio__label) {
  color: var(--text-color-active) !important;
+  @apply text-xs;
 }
 </style>
--- a/src/renderer/components/player/MiniPlayBar.vue
+++ b/src/renderer/components/player/MiniPlayBar.vue
@@ -0,0 +1,600 @@
+<template>
+  <div
+    class="mini-play-bar"
+    :class="{ 'pure-mode': pureModeEnabled, 'mini-mode': settingsStore.isMiniMode }"
+  >
+    <div class="mini-bar-container">
+      <!-- 专辑封面 -->
+      <div class="album-cover" @click="setMusicFull">
+        <n-image
+          :src="getImgUrl(playMusic?.picUrl, '100y100')"
+          fallback-src="/placeholder.png"
+          class="cover-img"
+          preview-disabled
+        />
+      </div>
+
+      <!-- 歌曲信息 -->
+      <div class="song-info" @click="setMusicFull">
+        <div class="song-title">{{ playMusic?.name || '未播放' }}</div>
+        <div class="song-artist">
+          <span
+            v-for="(artists, artistsindex) in artistList"
+            :key="artistsindex"
+            class="cursor-pointer hover:text-green-500"
+            @click.stop="handleArtistClick(artists.id)"
+          >
+            {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+          </span>
+        </div>
+      </div>
+
+      <!-- 控制按钮区域 -->
+      <div class="control-buttons">
+        <button class="control-button previous" @click="handlePrev">
+          <i class="iconfont icon-prev"></i>
+        </button>
+        <button class="control-button play" @click="playMusicEvent">
+          <i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
+        </button>
+        <button class="control-button next" @click="handleNext">
+          <i class="iconfont icon-next"></i>
+        </button>
+      </div>
+
+      <!-- 右侧功能按钮 -->
+      <div class="function-buttons">
+        <button class="function-button">
+          <i
+            class="iconfont icon-likefill"
+            :class="{ 'like-active': isFavorite }"
+            @click="toggleFavorite"
+          ></i>
+        </button>
+
+        <n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
+          <template #trigger>
+            <button class="function-button" @click="mute">
+              <i class="iconfont" :class="getVolumeIcon"></i>
+            </button>
+          </template>
+          <div class="volume-slider-wrapper">
+            <n-slider
+              v-model:value="volumeSlider"
+              :step="0.01"
+              :tooltip="false"
+              vertical
+            ></n-slider>
+          </div>
+        </n-popover>
+
+        <!-- 播放列表按钮 -->
+        <button v-if="!component" class="function-button" @click="togglePlaylist">
+          <i class="iconfont icon-list"></i>
+        </button>
+      </div>
+
+      <!-- 关闭按钮 -->
+      <button v-if="!component" class="close-button" @click="handleClose">
+        <i class="iconfont ri-close-line"></i>
+      </button>
+    </div>
+
+    <!-- 进度条 -->
+    <div
+      class="progress-bar"
+      @click="handleProgressClick"
+      @mousemove="handleProgressHover"
+      @mouseleave="handleProgressLeave"
+    >
+      <div class="progress-track"></div>
+      <div class="progress-fill" :style="{ width: `${(nowTime / allTime) * 100}%` }"></div>
+    </div>
+
+    <!-- 播放列表 - 单独放在外层，不再使用 popover -->
+    <div
+      v-if="!component"
+      v-show="isPlaylistOpen"
+      class="playlist-container"
+      :class="{ 'mini-mode-list': settingsStore.isMiniMode }"
+    >
+      <n-scrollbar ref="palyListRef" class="playlist-scrollbar">
+        <div class="playlist-items">
+          <div v-for="item in playList" :key="item.id" 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>
+        </div>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref, useTemplateRef } from 'vue';
+
+import SongItem from '@/components/common/SongItem.vue';
+import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
+import { useArtist } from '@/hooks/useArtist';
+import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const { navigateToArtist } = useArtist();
+
+withDefaults(
+  defineProps<{
+    pureModeEnabled?: boolean;
+    component?: boolean;
+  }>(),
+  {
+    component: false
+  }
+);
+
+// 处理关闭按钮点击
+const handleClose = () => {
+  if (settingsStore.isMiniMode) {
+    window.api.restore();
+  }
+};
+
+// 是否播放
+const play = computed(() => playerStore.play as boolean);
+// 播放列表
+const playList = computed(() => playerStore.playList as SongResult[]);
+
+// 音量控制
+const audioVolume = ref(
+  localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
+);
+
+const volumeSlider = computed({
+  get: () => audioVolume.value * 100,
+  set: (value) => {
+    localStorage.setItem('volume', (value / 100).toString());
+    audioService.setVolume(value / 100);
+    audioVolume.value = value / 100;
+  }
+});
+
+// 音量图标
+const getVolumeIcon = computed(() => {
+  if (audioVolume.value === 0) return 'ri-volume-mute-line';
+  if (audioVolume.value <= 0.5) return 'ri-volume-down-line';
+  return 'ri-volume-up-line';
+});
+
+// 静音
+const mute = () => {
+  if (volumeSlider.value === 0) {
+    volumeSlider.value = 30;
+  } else {
+    volumeSlider.value = 0;
+  }
+};
+
+// 收藏相关
+const isFavorite = computed(() => {
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+  return playerStore.favoriteList.includes(numericId);
+});
+
+const toggleFavorite = async (e: Event) => {
+  e.stopPropagation();
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+
+  if (isFavorite.value) {
+    playerStore.removeFromFavorite(numericId);
+  } else {
+    playerStore.addToFavorite(numericId);
+  }
+};
+
+// 播放列表相关
+const palyListRef = useTemplateRef('palyListRef') as any;
+const isPlaylistOpen = ref(false);
+
+// 提供 openPlaylistDrawer 给子组件
+provide('openPlaylistDrawer', (songId: number) => {
+  console.log('打开歌单抽屉', songId);
+  // 由于在迷你模式不处理这个功能，所以只记录日志
+});
+
+// 切换播放列表显示/隐藏
+const togglePlaylist = () => {
+  isPlaylistOpen.value = !isPlaylistOpen.value;
+  console.log('切换播放列表状态', isPlaylistOpen.value);
+
+  // 调整窗口大小
+  if (settingsStore.isMiniMode) {
+    try {
+      if (isPlaylistOpen.value) {
+        // 打开播放列表时调整DOM
+        document.body.style.height = 'auto';
+        document.body.style.overflow = 'visible';
+
+        // 使用新的专用 API 调整窗口大小
+        if (window.api && typeof window.api.resizeMiniWindow === 'function') {
+          window.api.resizeMiniWindow(true);
+        }
+      } else {
+        // 关闭播放列表时强制调整DOM
+        document.body.style.height = '64px';
+        document.body.style.overflow = 'hidden';
+
+        // 使用新的专用 API 调整窗口大小
+        if (window.api && typeof window.api.resizeMiniWindow === 'function') {
+          window.api.resizeMiniWindow(false);
+        }
+      }
+    } catch (error) {
+      console.error('调整窗口大小失败:', error);
+    }
+  }
+
+  // 如果打开列表，滚动到当前播放歌曲
+  if (isPlaylistOpen.value) {
+    scrollToPlayList();
+  }
+};
+
+const scrollToPlayList = () => {
+  setTimeout(() => {
+    const currentIndex = playerStore.playListIndex;
+    const itemHeight = 69; // 每个列表项的高度
+    palyListRef.value?.scrollTo({
+      top: currentIndex * itemHeight,
+      behavior: 'smooth'
+    });
+  }, 50);
+};
+
+const handleDeleteSong = (song: SongResult) => {
+  if (song.id === playMusic.value.id) {
+    playerStore.nextPlay();
+  }
+  playerStore.removeFromPlayList(song.id as number);
+};
+
+// 艺术家点击
+const handleArtistClick = (id: number) => {
+  navigateToArtist(id);
+};
+
+// 进度条相关
+const handleProgressClick = (e: MouseEvent) => {
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const percent = (e.clientX - rect.left) / rect.width;
+  audioService.seek(allTime.value * percent);
+  nowTime.value = allTime.value * percent;
+};
+
+const hoverTime = ref(0);
+const isHovering = ref(false);
+
+const handleProgressHover = (e: MouseEvent) => {
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const percent = (e.clientX - rect.left) / rect.width;
+  hoverTime.value = allTime.value * percent;
+  isHovering.value = true;
+};
+
+const handleProgressLeave = () => {
+  isHovering.value = false;
+};
+
+// 播放控制
+const handlePrev = () => playerStore.prevPlay();
+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);
+    }
+  } catch (error) {
+    console.error('播放出错:', error);
+    playerStore.nextPlay();
+  }
+};
+
+// 切换到完整播放器
+const setMusicFull = () => {
+  playerStore.setMusicFull(true);
+};
+</script>
+
+<style lang="scss" scoped>
+.mini-play-bar {
+  @apply w-full flex flex-col bg-light-200 dark:bg-dark-200 shadow-md bg-opacity-60 backdrop-blur dark:bg-opacity-60;
+  height: 64px;
+  border-radius: 8px;
+  position: relative;
+
+  &.mini-mode {
+    @apply shadow-lg;
+    -webkit-app-region: drag;
+
+    .mini-bar-container {
+      @apply px-2;
+    }
+
+    .song-info {
+      width: 120px;
+
+      .song-title {
+        @apply text-xs font-medium;
+      }
+
+      .song-artist {
+        @apply text-xs opacity-50;
+      }
+    }
+
+    .function-buttons {
+      -webkit-app-region: no-drag;
+      @apply space-x-1 ml-1;
+
+      .function-button {
+        width: 28px;
+        height: 28px;
+
+        .iconfont {
+          @apply text-base;
+        }
+      }
+    }
+
+    .control-buttons {
+      @apply mx-1 space-x-0.5;
+      -webkit-app-region: no-drag;
+      .control-button {
+        width: 28px;
+        height: 28px;
+
+        .iconfont {
+          @apply text-base;
+        }
+      }
+    }
+
+    .close-button {
+      -webkit-app-region: no-drag;
+      width: 28px;
+      height: 28px;
+    }
+
+    .album-cover {
+      @apply flex-shrink-0 mr-2;
+      width: 36px;
+      height: 36px;
+      -webkit-app-region: no-drag;
+    }
+
+    .progress-bar {
+      height: 2px !important;
+
+      &:hover {
+        height: 3px !important;
+
+        .progress-track,
+        .progress-fill {
+          height: 3px !important;
+        }
+      }
+    }
+  }
+}
+
+.mini-bar-container {
+  @apply flex items-center px-3 h-full relative;
+}
+
+.album-cover {
+  @apply flex-shrink-0 mr-3 cursor-pointer;
+  width: 40px;
+  height: 40px;
+
+  .cover-img {
+    @apply w-full h-full rounded-md object-cover pointer-events-none;
+  }
+}
+
+.song-info {
+  @apply flex flex-col justify-center min-w-0 flex-shrink mr-4 cursor-pointer;
+  width: 200px;
+
+  .song-title {
+    @apply text-sm font-medium truncate;
+    color: var(--text-color-1, #000);
+  }
+
+  .song-artist {
+    @apply text-xs truncate mt-0.5 opacity-60;
+    color: var(--text-color-2, #666);
+  }
+}
+
+.control-buttons {
+  @apply flex items-center space-x-1 mx-4;
+}
+
+.control-button {
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600;
+  width: 32px;
+  height: 32px;
+
+  &:hover {
+    @apply bg-gray-100 dark:bg-dark-300;
+  }
+
+  &.play {
+    @apply bg-primary text-white;
+    &:hover {
+      @apply bg-green-800;
+    }
+  }
+
+  .iconfont {
+    @apply text-lg;
+  }
+}
+
+.function-buttons {
+  @apply flex items-center ml-auto space-x-2;
+}
+
+.function-button {
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
+  width: 32px;
+  height: 32px;
+  color: var(--text-color-2, #666);
+
+  &:hover {
+    @apply bg-gray-100 dark:bg-dark-300;
+    color: var(--text-color-1, #000);
+  }
+
+  .iconfont {
+    @apply text-lg;
+  }
+}
+
+.close-button {
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer ml-2;
+  width: 32px;
+  height: 32px;
+  color: var(--text-color-2, #666);
+
+  &:hover {
+    @apply bg-gray-100 dark:bg-dark-300;
+    color: var(--text-color-1, #000);
+  }
+}
+
+.progress-bar {
+  @apply relative w-full cursor-pointer;
+  height: 2px;
+
+  &:hover {
+    height: 4px;
+
+    .progress-track,
+    .progress-fill {
+      height: 4px;
+    }
+  }
+}
+
+.progress-track {
+  @apply absolute inset-x-0 bottom-0 transition-all duration-200;
+  height: 2px;
+  background: rgba(0, 0, 0, 0.1);
+
+  .dark & {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.progress-fill {
+  @apply absolute bottom-0 left-0 transition-all duration-200;
+  height: 2px;
+  background: var(--primary-color, #18a058);
+}
+
+.like-active {
+  @apply text-red-500 hover:text-red-600 !important;
+}
+
+.volume-slider-wrapper {
+  @apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
+  width: 40px;
+  height: 160px;
+}
+
+// 播放列表样式
+.playlist-container {
+  @apply fixed left-0 right-0 bg-white dark:bg-dark-100 overflow-hidden;
+  top: 64px;
+  height: 330px;
+  max-height: 330px;
+
+  &.mini-mode-list {
+    width: 340px;
+    @apply bg-opacity-90 dark:bg-opacity-90;
+  }
+}
+
+// 播放列表内容样式
+.music-play-list-content {
+  @apply px-2 py-1;
+
+  .delete-btn {
+    @apply p-2 rounded-full transition-colors duration-200 cursor-pointer;
+    @apply hover:bg-red-50 dark:hover:bg-red-900/20;
+
+    .iconfont {
+      @apply text-lg;
+    }
+  }
+}
+
+// 过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.playlist-scrollbar {
+  height: 100%;
+}
+
+.playlist-items {
+  padding: 4px 0;
+}
+
+.dark {
+  .song-info {
+    .song-title {
+      color: var(--text-color-1, #fff);
+    }
+
+    .song-artist {
+      color: var(--text-color-2, #fff);
+    }
+  }
+}
+</style>
--- a/src/renderer/components/player/MobilePlayBar.vue
+++ b/src/renderer/components/player/MobilePlayBar.vue
@@ -153,14 +153,13 @@ import { computed, ref, watch } from 'vue';

 import SongItem from '@/components/common/SongItem.vue';
 import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
+import MusicFull from '@/layout/components/MusicFull.vue';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';

-import MusicFull from './MusicFull.vue';
-
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();

@@ -217,15 +216,15 @@ const scrollToPlayList = (val: boolean) => {

 // 收藏功能
 const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id);
+  return playerStore.favoriteList.includes(playMusic.value.id as number);
 });

 const toggleFavorite = () => {
  console.log('isFavorite.value', isFavorite.value);
  if (isFavorite.value) {
-    playerStore.removeFromFavorite(playMusic.value.id);
+    playerStore.removeFromFavorite(playMusic.value.id as number);
  } else {
-    playerStore.addToFavorite(playMusic.value.id);
+    playerStore.addToFavorite(playMusic.value.id as number);
  }
 };

--- a/src/renderer/components/player/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -25,6 +25,11 @@
        :max="allTime"
        :min="0"
        :format-tooltip="formatTooltip"
+        :show-tooltip="showSliderTooltip"
+        @mouseenter="showSliderTooltip = true"
+        @mouseleave="showSliderTooltip = false"
+        @dragstart="handleSliderDragStart"
+        @dragend="handleSliderDragEnd"
      ></n-slider>
    </div>
    <div class="play-bar-img-wrapper" @click="setMusicFull">
@@ -162,7 +167,14 @@
          <n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
            <template #default="{ item }">
              <div class="music-play-list-content">
-                <song-item :key="item.id" :item="item" mini></song-item>
+                <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>
@@ -176,6 +188,7 @@

 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
+import { useMessage } from 'naive-ui';
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

@@ -188,21 +201,20 @@ import {
  nowTime,
  openLyric,
  playMusic,
-  sound,
  textColors
 } from '@/hooks/MusicHook';
+import { useArtist } from '@/hooks/useArtist';
+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';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
-import { showShortcutToast } from '@/utils/shortcutToast';
-
-import MusicFull from './MusicFull.vue';

 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
 const { t } = useI18n();
+const message = useMessage();
 // 是否播放
 const play = computed(() => playerStore.isPlay);
 // 播放列表
@@ -220,17 +232,47 @@ watch(

 // 节流版本的 seek 函数
 const throttledSeek = useThrottleFn((value: number) => {
-  if (!sound.value) return;
-  sound.value.seek(value);
+  audioService.seek(value);
  nowTime.value = value;
 }, 50); // 50ms 的节流延迟

+// 拖动时的临时值，避免频繁更新 nowTime 触发重渲染
+const dragValue = ref(0);
+
+// 为滑块拖动添加状态跟踪
+const isDragging = ref(false);
+
 // 修改 timeSlider 计算属性
 const timeSlider = computed({
-  get: () => nowTime.value,
-  set: throttledSeek
+  get: () => (isDragging.value ? dragValue.value : nowTime.value),
+  set: (value) => {
+    if (isDragging.value) {
+      // 拖动中只更新临时值，不触发 nowTime 更新和 seek 操作
+      dragValue.value = value;
+      return;
+    }
+
+    // 点击操作 (非拖动)，可以直接 seek
+    throttledSeek(value);
+  }
 });

+// 添加滑块拖动开始和结束事件处理
+const handleSliderDragStart = () => {
+  isDragging.value = true;
+  // 初始化拖动值为当前时间
+  dragValue.value = nowTime.value;
+};
+
+const handleSliderDragEnd = () => {
+  isDragging.value = false;
+
+  // 直接应用最终的拖动值
+  audioService.seek(dragValue.value);
+  nowTime.value = dragValue.value;
+};
+
+// 格式化提示文本，根据拖动状态显示不同的时间
 const formatTooltip = (value: number) => {
  return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
 };
@@ -253,9 +295,8 @@ const getVolumeIcon = computed(() => {
 const volumeSlider = computed({
  get: () => audioVolume.value * 100,
  set: (value) => {
-    if (!sound.value) return;
    localStorage.setItem('volume', (value / 100).toString());
-    sound.value.volume(value / 100);
+    audioService.setVolume(value / 100);
    audioVolume.value = value / 100;
  }
 });
@@ -310,37 +351,48 @@ function handlePrev() {
 }

 const MusicFullRef = ref<any>(null);
+const showSliderTooltip = ref(false);

 // 播放暂停按钮事件
 const playMusicEvent = async () => {
  try {
-    // 检查是否有有效的音乐对象和 URL
-    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
-      console.warn('No valid music or URL available');
-      playerStore.setPlay(playMusic.value);
+    // 检查是否有有效的音乐对象
+    if (!playMusic.value?.id) {
+      console.warn('没有有效的播放对象');
      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);
-      }
+      return;
+    }
+
+    // 当前处于暂停状态 -> 播放
+    // 有音频实例，直接播放
+    if (audioService.getCurrentSound()) {
+      audioService.play();
      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);
-    playerStore.nextPlay();
+    message.error(t('player.playFailed'));
  }
 };

@@ -365,15 +417,22 @@ const scrollToPlayList = (val: boolean) => {
 };

 const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id);
+  // 将id转换为number，兼容B站视频ID
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+  return playerStore.favoriteList.includes(numericId);
 });

 const toggleFavorite = async (e: Event) => {
  e.stopPropagation();
+  // 将id转换为number，兼容B站视频ID
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+
  if (isFavorite.value) {
-    playerStore.removeFromFavorite(playMusic.value.id);
+    playerStore.removeFromFavorite(numericId);
  } else {
-    playerStore.addToFavorite(playMusic.value.id);
+    playerStore.addToFavorite(numericId);
  }
 };

@@ -381,65 +440,13 @@ const openLyricWindow = () => {
  openLyric();
 };

+const { navigateToArtist } = useArtist();
+
 const handleArtistClick = (id: number) => {
  musicFullVisible.value = false;
-  settingsStore.currentArtistId = id;
+  navigateToArtist(id);
 };

-// 添加全局快捷键处理
-if (isElectron) {
-  window.electron.ipcRenderer.on('global-shortcut', (_, action: string) => {
-    console.log('action', action);
-    switch (action) {
-      case 'togglePlay':
-        playMusicEvent();
-        showShortcutToast(
-          play.value ? t('player.playBar.play') : t('player.playBar.pause'),
-          play.value ? 'ri-pause-circle-line' : 'ri-play-circle-line'
-        );
-        break;
-      case 'prevPlay':
-        handlePrev();
-        showShortcutToast(t('player.playBar.prev'), 'ri-skip-back-line');
-        break;
-      case 'nextPlay':
-        handleNext();
-        showShortcutToast(t('player.playBar.next'), 'ri-skip-forward-line');
-        break;
-      case 'volumeUp':
-        if (volumeSlider.value < 100) {
-          volumeSlider.value = Math.min(volumeSlider.value + 10, 100);
-          showShortcutToast(
-            `${t('player.playBar.volume')}${volumeSlider.value}%`,
-            'ri-volume-up-line'
-          );
-        }
-        break;
-      case 'volumeDown':
-        if (volumeSlider.value > 0) {
-          volumeSlider.value = Math.max(volumeSlider.value - 10, 0);
-          showShortcutToast(
-            `${t('player.playBar.volume')}${volumeSlider.value}%`,
-            'ri-volume-down-line'
-          );
-        }
-        break;
-      case 'toggleFavorite':
-        toggleFavorite(new Event('click'));
-        showShortcutToast(
-          isFavorite.value
-            ? t('player.playBar.favorite', { name: playMusic.value.name })
-            : t('player.playBar.unFavorite', { name: playMusic.value.name }),
-          isFavorite.value ? 'ri-heart-fill' : 'ri-heart-line'
-        );
-        break;
-      default:
-        console.log('未知的快捷键动作:', action);
-        break;
-    }
-  });
-}
-
 // 监听播放栏显示状态
 watch(
  () => MusicFullRef.value?.config?.hidePlayBar,
@@ -451,6 +458,15 @@ watch(
 );

 const isEQVisible = ref(false);
+
+// 在 script setup 部分添加删除歌曲的处理函数
+const handleDeleteSong = (song: SongResult) => {
+  // 如果删除的是当前播放的歌曲，先切换到下一首
+  if (song.id === playMusic.value.id) {
+    playerStore.nextPlay();
+  }
+  playerStore.removeFromPlayList(song.id as number);
+};
 </script>

 <style lang="scss" scoped>
@@ -635,8 +651,16 @@ const isEQVisible = ref(false);
      opacity: 0;
    }

-    &:hover .n-slider-handle {
-      opacity: 1;
+    &:hover {
+      .n-slider-handle {
+        opacity: 1;
+      }
+    }
+
+    // 确保悬停时提示样式正确
+    .n-slider-tooltip {
+      @apply bg-gray-800 text-white text-xs py-1 px-2 rounded;
+      z-index: 999999;
    }
  }
 }
@@ -705,4 +729,17 @@ const isEQVisible = ref(false);
  backdrop-filter: blur(20px);
  @apply bg-light dark:bg-black bg-opacity-75;
 }
+
+.music-play-list-content {
+  @apply mx-2;
+
+  .delete-btn {
+    @apply p-2 rounded-full transition-colors duration-200 cursor-pointer;
+    @apply hover:bg-red-50 dark:hover:bg-red-900/20;
+
+    .iconfont {
+      @apply text-lg;
+    }
+  }
+}
 </style>
--- a/src/renderer/components/settings/ShortcutSettings.vue
+++ b/src/renderer/components/settings/ShortcutSettings.vue
@@ -16,24 +16,54 @@
                <div class="shortcut-info">
                  <span class="shortcut-label">{{ getShortcutLabel(key) }}</span>
                </div>
-                <div class="shortcut-input">
-                  <n-input
-                    :value="formatShortcut(shortcut)"
-                    :status="duplicateKeys[key] ? 'error' : undefined"
-                    :placeholder="t('settings.shortcutSettings.inputPlaceholder')"
-                    readonly
-                    @keydown="(e) => handleKeyDown(e, key)"
-                    @focus="() => startRecording(key)"
-                    @blur="stopRecording"
-                  />
-                  <n-tooltip v-if="duplicateKeys[key]" trigger="hover">
-                    <template #trigger>
-                      <n-icon class="error-icon" size="18">
-                        <i class="ri-error-warning-line"></i>
-                      </n-icon>
-                    </template>
-                    {{ t('settings.shortcutSettings.shortcutConflict') }}
-                  </n-tooltip>
+                <div class="shortcut-controls">
+                  <div class="shortcut-input">
+                    <n-input
+                      :value="formatShortcut(shortcut.key)"
+                      :status="duplicateKeys[key] ? 'error' : undefined"
+                      :placeholder="t('settings.shortcutSettings.inputPlaceholder')"
+                      :disabled="!shortcut.enabled"
+                      readonly
+                      @keydown="(e) => handleKeyDown(e, key)"
+                      @focus="() => startRecording(key)"
+                      @blur="stopRecording"
+                    />
+                    <n-tooltip v-if="duplicateKeys[key]" trigger="hover">
+                      <template #trigger>
+                        <n-icon class="error-icon" size="18">
+                          <i class="ri-error-warning-line"></i>
+                        </n-icon>
+                      </template>
+                      {{ t('settings.shortcutSettings.shortcutConflict') }}
+                    </n-tooltip>
+                  </div>
+                  <div class="shortcut-options">
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <n-switch v-model:value="shortcut.enabled" size="small" />
+                      </template>
+                      {{
+                        shortcut.enabled
+                          ? t('settings.shortcutSettings.enabled')
+                          : t('settings.shortcutSettings.disabled')
+                      }}
+                    </n-tooltip>
+                    <n-tooltip v-if="shortcut.enabled" trigger="hover">
+                      <template #trigger>
+                        <n-select
+                          v-model:value="shortcut.scope"
+                          :options="scopeOptions"
+                          size="small"
+                          style="width: 100px"
+                        />
+                      </template>
+                      {{
+                        shortcut.scope === 'global'
+                          ? t('settings.shortcutSettings.scopeGlobal')
+                          : t('settings.shortcutSettings.scopeApp')
+                      }}
+                    </n-tooltip>
+                  </div>
                </div>
              </div>
            </n-space>
@@ -46,6 +76,12 @@
            <n-button size="small" @click="resetShortcuts">{{
              t('settings.shortcutSettings.resetShortcuts')
            }}</n-button>
+            <n-button size="small" type="warning" @click="disableAllShortcuts">{{
+              t('settings.shortcutSettings.disableAll')
+            }}</n-button>
+            <n-button size="small" type="success" @click="enableAllShortcuts">{{
+              t('settings.shortcutSettings.enableAll')
+            }}</n-button>
            <n-button type="primary" size="small" :disabled="hasConflict" @click="handleSave">
              {{ t('common.save') }}
            </n-button>
@@ -66,26 +102,37 @@ import { isElectron } from '@/utils';

 const { t } = useI18n();

+interface ShortcutConfig {
+  key: string;
+  enabled: boolean;
+  scope: 'global' | 'app';
+}
+
 interface Shortcuts {
-  togglePlay: string;
-  prevPlay: string;
-  nextPlay: string;
-  volumeUp: string;
-  volumeDown: string;
-  toggleFavorite: string;
-  toggleWindow: string;
+  togglePlay: ShortcutConfig;
+  prevPlay: ShortcutConfig;
+  nextPlay: ShortcutConfig;
+  volumeUp: ShortcutConfig;
+  volumeDown: ShortcutConfig;
+  toggleFavorite: ShortcutConfig;
+  toggleWindow: ShortcutConfig;
 }

 const defaultShortcuts: Shortcuts = {
-  togglePlay: 'CommandOrControl+Alt+P',
-  prevPlay: 'Alt+Left',
-  nextPlay: 'Alt+Right',
-  volumeUp: 'Alt+Up',
-  volumeDown: 'Alt+Down',
-  toggleFavorite: 'CommandOrControl+Alt+L',
-  toggleWindow: 'CommandOrControl+Alt+Shift+M'
+  togglePlay: { key: 'CommandOrControl+Alt+P', enabled: true, scope: 'global' },
+  prevPlay: { key: 'Alt+Left', enabled: true, scope: 'global' },
+  nextPlay: { key: 'Alt+Right', enabled: true, scope: 'global' },
+  volumeUp: { key: 'Alt+Up', enabled: true, scope: 'app' },
+  volumeDown: { key: 'Alt+Down', enabled: true, scope: 'app' },
+  toggleFavorite: { key: 'CommandOrControl+Alt+L', enabled: true, scope: 'app' },
+  toggleWindow: { key: 'CommandOrControl+Alt+Shift+M', enabled: true, scope: 'global' }
 };

+const scopeOptions = [
+  { label: t('settings.shortcutSettings.scopeGlobal'), value: 'global' },
+  { label: t('settings.shortcutSettings.scopeApp'), value: 'app' }
+];
+
 const shortcuts = ref<Shortcuts>(
  isElectron
    ? window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts') || defaultShortcuts
@@ -93,7 +140,7 @@ const shortcuts = ref<Shortcuts>(
 );

 // 临时存储编辑中的快捷键
-const tempShortcuts = ref<Shortcuts>({ ...shortcuts.value });
+const tempShortcuts = ref<Shortcuts>(cloneDeep(shortcuts.value));

 // 监听快捷键更新
 if (isElectron) {
@@ -101,7 +148,7 @@ if (isElectron) {
    const newShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
    if (newShortcuts) {
      shortcuts.value = newShortcuts;
-      tempShortcuts.value = { ...newShortcuts };
+      tempShortcuts.value = cloneDeep(newShortcuts);
    }
  });
 }
@@ -116,12 +163,27 @@ onMounted(() => {
    console.log('storedShortcuts', storedShortcuts);
    if (storedShortcuts) {
      shortcuts.value = storedShortcuts;
-      tempShortcuts.value = { ...storedShortcuts };
+      tempShortcuts.value = cloneDeep(storedShortcuts);
    } else {
      shortcuts.value = { ...defaultShortcuts };
-      tempShortcuts.value = { ...defaultShortcuts };
+      tempShortcuts.value = cloneDeep(defaultShortcuts);
      window.electron.ipcRenderer.send('set-store-value', 'shortcuts', defaultShortcuts);
    }
+
+    // 转换旧格式的快捷键数据到新格式
+    if (storedShortcuts && typeof storedShortcuts.togglePlay === 'string') {
+      const convertedShortcuts = {} as Shortcuts;
+      Object.entries(storedShortcuts).forEach(([key, value]) => {
+        convertedShortcuts[key as keyof Shortcuts] = {
+          key: value as string,
+          enabled: true,
+          scope: ['volumeUp', 'volumeDown', 'toggleFavorite'].includes(key) ? 'app' : 'global'
+        };
+      });
+      shortcuts.value = convertedShortcuts;
+      tempShortcuts.value = cloneDeep(convertedShortcuts);
+      window.electron.ipcRenderer.send('set-store-value', 'shortcuts', convertedShortcuts);
+    }
  }
 });

@@ -144,13 +206,21 @@ const message = useMessage();
 // 检查快捷键冲突
 const duplicateKeys = computed(() => {
  const result: Record<string, boolean> = {};
-  const usedShortcuts = new Set<string>();
+  const usedShortcuts = new Map<string, string>();

  Object.entries(tempShortcuts.value).forEach(([key, shortcut]) => {
-    if (usedShortcuts.has(shortcut)) {
-      result[key] = true;
+    // 只检查启用的快捷键
+    if (!shortcut.enabled) return;
+
+    const conflictKey = usedShortcuts.get(shortcut.key);
+    if (conflictKey) {
+      // 只有相同作用域的快捷键才会被认为冲突
+      const conflictScope = tempShortcuts.value[conflictKey as keyof Shortcuts].scope;
+      if (shortcut.scope === conflictScope) {
+        result[key] = true;
+      }
    } else {
-      usedShortcuts.add(shortcut);
+      usedShortcuts.set(shortcut.key, key);
    }
  });

@@ -161,6 +231,8 @@ const duplicateKeys = computed(() => {
 const hasConflict = computed(() => Object.keys(duplicateKeys.value).length > 0);

 const startRecording = (key: keyof Shortcuts) => {
+  if (!tempShortcuts.value[key].enabled) return;
+
  isRecording.value = true;
  currentKey.value = key;
  // 禁用全局快捷键
@@ -220,12 +292,12 @@ const handleKeyDown = (e: KeyboardEvent, key: keyof Shortcuts) => {
  }

  if (!['Control', 'Alt', 'Shift', 'Meta', 'Command'].includes(keyName)) {
-    tempShortcuts.value[key] = [...modifiers, keyName].join('+');
+    tempShortcuts.value[key].key = [...modifiers, keyName].join('+');
  }
 };

 const resetShortcuts = () => {
-  tempShortcuts.value = { ...defaultShortcuts };
+  tempShortcuts.value = cloneDeep(defaultShortcuts);
  message.success(t('settings.shortcutSettings.messages.resetSuccess'));
 };

@@ -245,7 +317,7 @@ const saveShortcuts = () => {
      // 先保存到 store
      window.electron.ipcRenderer.send('set-store-value', 'shortcuts', shortcutsToSave);
      // 然后更新快捷键
-      window.electron.ipcRenderer.send('update-shortcuts');
+      window.electron.ipcRenderer.send('update-shortcuts', shortcutsToSave);
      message.success(t('settings.shortcutSettings.messages.saveSuccess'));
    } catch (error) {
      console.error('保存快捷键失败:', error);
@@ -255,7 +327,7 @@ const saveShortcuts = () => {
 };

 const cancelEdit = () => {
-  tempShortcuts.value = { ...shortcuts.value };
+  tempShortcuts.value = cloneDeep(shortcuts.value);
  message.info(t('settings.shortcutSettings.messages.cancelEdit'));
  emit('update:show', false);
 };
@@ -309,7 +381,7 @@ watch(visible, (newVal) => {
 // 处理弹窗关闭后的事件
 const handleAfterLeave = () => {
  // 重置临时数据
-  tempShortcuts.value = { ...shortcuts.value };
+  tempShortcuts.value = cloneDeep(shortcuts.value);
 };

 // 处理取消按钮点击
@@ -324,6 +396,22 @@ const handleSave = () => {
  visible.value = false;
  emit('change', shortcuts.value);
 };
+
+// 全部禁用快捷键
+const disableAllShortcuts = () => {
+  Object.keys(tempShortcuts.value).forEach((key) => {
+    tempShortcuts.value[key as keyof Shortcuts].enabled = false;
+  });
+  message.info(t('settings.shortcutSettings.messages.disableAll'));
+};
+
+// 全部启用快捷键
+const enableAllShortcuts = () => {
+  Object.keys(tempShortcuts.value).forEach((key) => {
+    tempShortcuts.value[key as keyof Shortcuts].enabled = true;
+  });
+  message.info(t('settings.shortcutSettings.messages.enableAll'));
+};
 </script>

 <style lang="scss" scoped>
@@ -359,25 +447,32 @@ const handleSave = () => {
    }

    .shortcut-info {
-      @apply flex flex-col;
+      @apply flex flex-col min-w-[150px];

      .shortcut-label {
        @apply text-base font-medium;
      }
    }

-    .shortcut-input {
-      @apply flex items-center gap-2;
-      min-width: 200px;
+    .shortcut-controls {
+      @apply flex items-center gap-3 flex-1;

-      :deep(.n-input) {
-        .n-input__input-el {
-          @apply text-center font-mono;
+      .shortcut-input {
+        @apply flex items-center gap-2 flex-1;
+
+        :deep(.n-input) {
+          .n-input__input-el {
+            @apply text-center font-mono;
+          }
+        }
+
+        .error-icon {
+          @apply text-red-500;
        }
      }

-      .error-icon {
-        @apply text-red-500;
+      .shortcut-options {
+        @apply flex items-center gap-2;
      }
    }
  }
--- a/src/renderer/const/bar-const.ts
+++ b/src/renderer/const/bar-const.ts
@@ -45,6 +45,10 @@ export const SEARCH_TYPES = [
  {
    label: 'MV',
    key: 1004
+  },
+  {
+    label: 'B站',
+    key: 2000
  }
  // {
  //   label: '歌词',
@@ -63,3 +67,12 @@ export const SEARCH_TYPES = [
  //   key: 1018,
  // },
 ];
+
+export const SEARCH_TYPE = {
+  MUSIC: 1, // 单曲
+  ALBUM: 10, // 专辑
+  ARTIST: 100, // 歌手
+  PLAYLIST: 1000, // 歌单
+  MV: 1004, // MV
+  BILIBILI: 2000 // B站视频
+} as const;
--- a/src/renderer/hooks/MusicHistoryHook.ts
+++ b/src/renderer/hooks/MusicHistoryHook.ts
@@ -1,6 +1,7 @@
 // musicHistoryHooks
 import { useLocalStorage } from '@vueuse/core';

+import { recordPlay } from '@/api/stats';
 import type { SongResult } from '@/type/music';

 export const useMusicHistory = () => {
@@ -14,6 +15,25 @@ export const useMusicHistory = () => {
    } else {
      musicHistory.value.unshift({ ...music, count: 1 });
    }
+
+    // 记录播放统计
+    if (music?.id && music?.name) {
+      // 获取艺术家名称
+      let artistName = '未知艺术家';
+
+      if (music.ar) {
+        artistName = music.ar.map((artist) => artist.name).join('/');
+      } else if (music.song?.artists && music.song.artists.length > 0) {
+        artistName = music.song.artists.map((artist) => artist.name).join('/');
+      } else if (music.artists) {
+        artistName = music.artists.map((artist) => artist.name).join('/');
+      }
+
+      // 发送播放统计
+      recordPlay(music.id, music.name, artistName).catch((error) =>
+        console.error('记录播放统计失败:', error)
+      );
+    }
  };

  const delMusic = (music: SongResult) => {
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -1,7 +1,9 @@
+import { cloneDeep } from 'lodash';
 import { createDiscreteApi } from 'naive-ui';
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue';

 import i18n from '@/../i18n/renderer';
+import { getBilibiliAudioUrl } from '@/api/bilibili';
 import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
 import pinia, { usePlayerStore } from '@/store';
@@ -59,6 +61,7 @@ const { message } = createDiscreteApi(['message']);
 // 全局变量
 let progressAnimationInitialized = false;
 let globalAnimationFrameId: number | null = null;
+const lastSavedTime = ref(0);

 // 全局停止函数
 const stopProgressAnimation = () => {
@@ -103,10 +106,21 @@ const updateProgress = () => {

    let currentTime;
    try {
+      // 获取当前播放位置
      currentTime = currentSound.seek() as number;

+      // 减少更新频率，避免频繁更新UI
+      const timeDiff = Math.abs(currentTime - nowTime.value);
+      if (timeDiff > 0.2 || Math.floor(currentTime) !== Math.floor(nowTime.value)) {
+        nowTime.value = currentTime;
+      }
+
      // 保存当前播放进度到 localStorage (每秒保存一次，避免频繁写入)
-      if (Math.floor(currentTime) % 2 === 0) {
+      if (
+        Math.floor(currentTime) % 2 === 0 &&
+        Math.floor(currentTime) !== Math.floor(lastSavedTime.value)
+      ) {
+        lastSavedTime.value = currentTime;
        if (playerStore.playMusic && playerStore.playMusic.id) {
          localStorage.setItem(
            'playProgress',
@@ -139,8 +153,10 @@ const updateProgress = () => {
    console.error('更新进度出错:', error);
  }

-  // 继续下一帧更新
-  globalAnimationFrameId = requestAnimationFrame(updateProgress);
+  // 继续下一帧更新，但降低更新频率为60帧中更新10帧
+  globalAnimationFrameId = setTimeout(() => {
+    requestAnimationFrame(updateProgress);
+  }, 100) as unknown as number;
 };

 // 全局启动函数
@@ -235,6 +251,29 @@ watch(
          initialPosition = savedProgress.progress;
        }

+        // 对于B站视频，检查URL是否有效
+        if (playMusic.value.source === 'bilibili' && (!newVal || newVal === 'undefined')) {
+          console.log('B站视频URL无效，尝试重新获取');
+
+          // 需要重新获取B站视频URL
+          if (playMusic.value.bilibiliData) {
+            try {
+              const proxyUrl = await getBilibiliAudioUrl(
+                playMusic.value.bilibiliData.bvid,
+                playMusic.value.bilibiliData.cid
+              );
+
+              // 设置URL到播放器状态
+              (playMusic.value as any).playMusicUrl = proxyUrl;
+              playerStore.playMusicUrl = proxyUrl;
+              newVal = proxyUrl;
+            } catch (error) {
+              console.error('获取B站音频URL失败:', error);
+              return;
+            }
+          }
+        }
+
        // 播放新音频，传递是否应该播放的状态
        const newSound = await audioService.play(newVal, playMusic.value, shouldPlay);
        sound.value = newSound as Howl;
@@ -302,6 +341,37 @@ const setupAudioListeners = () => {
  // 清理所有事件监听器
  audioService.clearAllListeners();

+  // 监听seek开始事件，立即更新UI
+  audioService.on('seek_start', (time) => {
+    // 直接更新显示位置，不检查拖动状态
+    nowTime.value = time;
+  });
+
+  // 监听seek完成事件
+  audioService.on('seek', () => {
+    try {
+      const currentSound = sound.value;
+      if (currentSound) {
+        // 立即更新显示时间，不进行任何检查
+        const currentTime = currentSound.seek() as number;
+        if (typeof currentTime === 'number' && !Number.isNaN(currentTime)) {
+          nowTime.value = currentTime;
+
+          // 检查是否需要更新歌词
+          const newIndex = getLrcIndex(nowTime.value);
+          if (newIndex !== nowIndex.value) {
+            nowIndex.value = newIndex;
+            if (isElectron && isLyricWindowOpen.value) {
+              sendLyricToWin();
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('处理seek事件出错:', error);
+    }
+  });
+
  // 立即更新一次时间和进度（解决初始化时进度条不显示问题）
  const updateCurrentTimeAndDuration = () => {
    const currentSound = audioService.getCurrentSound();
@@ -325,6 +395,9 @@ const setupAudioListeners = () => {
  // 监听播放
  audioService.on('play', () => {
    playerStore.setPlayMusic(true);
+    if (isElectron) {
+      window.api.sendSong(cloneDeep(playerStore.playMusic));
+    }
    clearInterval();
    interval = window.setInterval(() => {
      try {
@@ -464,7 +537,7 @@ export const pause = () => {
        );
      }

-      currentSound.pause();
+      audioService.pause();
    } catch (error) {
      console.error('暂停播放出错:', error);
    }
@@ -842,3 +915,97 @@ export const initAudioListeners = async () => {
    console.error('初始化音频监听器失败:', error);
  }
 };
+
+// 监听URL过期事件，自动重新获取URL并恢复播放
+audioService.on('url_expired', async (expiredTrack) => {
+  if (!expiredTrack) return;
+
+  console.log('检测到URL过期事件，准备重新获取URL', expiredTrack.name);
+
+  try {
+    const currentPosition = nowTime.value; // 保存当前播放进度
+    console.log('保存当前播放进度:', currentPosition);
+
+    // 处理B站视频
+    if (expiredTrack.source === 'bilibili' && expiredTrack.bilibiliData) {
+      console.log('重新获取B站视频URL');
+      try {
+        // 使用API中的函数获取B站音频URL
+        const newUrl = await getBilibiliAudioUrl(
+          expiredTrack.bilibiliData.bvid,
+          expiredTrack.bilibiliData.cid
+        );
+
+        console.log('成功获取新的B站URL:', newUrl);
+
+        // 更新存储
+        (expiredTrack as any).playMusicUrl = newUrl;
+        playerStore.playMusicUrl = newUrl;
+
+        // 重新播放并设置进度
+        const newSound = await audioService.play(newUrl, expiredTrack);
+        sound.value = newSound as Howl;
+
+        // 恢复播放进度
+        if (currentPosition > 0) {
+          newSound.seek(currentPosition);
+          nowTime.value = currentPosition;
+          console.log('恢复播放进度:', currentPosition);
+        }
+
+        // 如果之前是播放状态，继续播放
+        if (playerStore.play) {
+          newSound.play();
+          playerStore.setIsPlay(true);
+        }
+
+        message.success('已自动恢复播放');
+      } catch (error) {
+        console.error('重新获取B站URL失败:', error);
+        message.error('重新获取音频地址失败，请手动点击播放');
+      }
+    } else if (expiredTrack.source === 'netease') {
+      // 处理网易云音乐，重新获取URL
+      console.log('重新获取网易云音乐URL');
+      try {
+        const { getSongUrl } = await import('@/store/modules/player');
+        const newUrl = await getSongUrl(expiredTrack.id, expiredTrack as any);
+
+        if (newUrl) {
+          console.log('成功获取新的网易云URL:', newUrl);
+
+          // 更新存储
+          (expiredTrack as any).playMusicUrl = newUrl;
+          playerStore.playMusicUrl = newUrl;
+
+          // 重新播放并设置进度
+          const newSound = await audioService.play(newUrl, expiredTrack);
+          sound.value = newSound as Howl;
+
+          // 恢复播放进度
+          if (currentPosition > 0) {
+            newSound.seek(currentPosition);
+            nowTime.value = currentPosition;
+            console.log('恢复播放进度:', currentPosition);
+          }
+
+          // 如果之前是播放状态，继续播放
+          if (playerStore.play) {
+            newSound.play();
+            playerStore.setIsPlay(true);
+          }
+
+          message.success('已自动恢复播放');
+        } else {
+          throw new Error('获取URL失败');
+        }
+      } catch (error) {
+        console.error('重新获取网易云URL失败:', error);
+        message.error('重新获取音频地址失败，请手动点击播放');
+      }
+    }
+  } catch (error) {
+    console.error('处理URL过期事件失败:', error);
+    message.error('恢复播放失败，请手动点击播放');
+  }
+});
--- a/src/renderer/hooks/MusicListHook.ts
+++ b/src/renderer/hooks/MusicListHook.ts
@@ -5,6 +5,7 @@ import { ref } from 'vue';
 import { getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import { audioService } from '@/services/audioService';
+import { useSettingsStore } from '@/store';
 import type { ILyric, ILyricText, SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 import { getImageLinearBackground } from '@/utils/linearColor';
@@ -12,13 +13,17 @@ import { getImageLinearBackground } from '@/utils/linearColor';
 const musicHistory = useMusicHistory();

 // 获取歌曲url
-export const getSongUrl = async (id: number, songData: any, isDownloaded: boolean = false) => {
-  const { data } = await getMusicUrl(id, isDownloaded);
+export const getSongUrl = async (id: any, songData: any, isDownloaded: boolean = false) => {
+  const settingsStore = useSettingsStore();
+  const { unlimitedDownload } = settingsStore.setData;
+
+  const { data } = await getMusicUrl(id, !unlimitedDownload);
  let url = '';
  let songDetail = null;
+
  try {
    if (data.data[0].freeTrialInfo || !data.data[0].url) {
-      const res = await getParsingMusicUrl(id, songData);
+      const res = await getParsingMusicUrl(id, cloneDeep(songData));
      url = res.data.data.url;
      songDetail = res.data.data;
    } else {
@@ -247,7 +252,7 @@ export const useMusicListHook = () => {
  };

  // 异步加载歌词的方法
-  const loadLrcAsync = async (state: any, playMusicId: number) => {
+  const loadLrcAsync = async (state: any, playMusicId: any) => {
    if (state.playMusic.lyric && state.playMusic.lyric.lrcTimeArray.length > 0) {
      return;
    }
--- a/src/renderer/hooks/useArtist.ts
+++ b/src/renderer/hooks/useArtist.ts
@@ -0,0 +1,17 @@
+import { useRouter } from 'vue-router';
+
+export const useArtist = () => {
+  const router = useRouter();
+
+  /**
+   * 跳转到歌手详情页
+   * @param id 歌手ID
+   */
+  const navigateToArtist = (id: number) => {
+    router.push(`/artist/detail/${id}`);
+  };
+
+  return {
+    navigateToArtist
+  };
+};
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -11,7 +11,7 @@
 }

 .n-slider-handle-indicator--top {
-  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 dark:text-[#ffffffdd] text-[#000000dd]  !important;
+  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 text-white bg-dark-300 dark:bg-gray-800 bg-opacity-80 rounded-lg  !important;
  mix-blend-mode: difference !important;
 }

--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -25,16 +25,18 @@
        </div>
      </div>
      <!-- 底部音乐播放 -->
-      <play-bar
-        v-if="!isMobile"
-        v-show="isPlay"
-        :style="playerStore.musicFull ? 'bottom: 0;' : ''"
-      />
-      <mobile-play-bar
-        v-else
-        v-show="isPlay"
-        :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
-      />
+      <template v-if="!settingsStore.isMiniMode">
+        <play-bar
+          v-if="!isMobile"
+          v-show="isPlay"
+          :style="playerStore.musicFull ? 'bottom: 0;' : ''"
+        />
+        <mobile-play-bar
+          v-else
+          v-show="isPlay"
+          :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
+        />
+      </template>
      <!-- 下载管理抽屉 -->
      <download-drawer
        v-if="
@@ -47,13 +49,12 @@
    </div>
    <install-app-modal v-if="!isElectron"></install-app-modal>
    <update-modal v-if="isElectron" />
-    <artist-drawer ref="artistDrawerRef" :show="artistDrawerShow" />
    <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
  </div>
 </template>

 <script lang="ts" setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, provide, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';

 import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
@@ -77,12 +78,11 @@ const keepAliveInclude = computed(() =>
 );

 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
-const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
-const MobilePlayBar = defineAsyncComponent(() => import('./components/MobilePlayBar.vue'));
+const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.vue'));
+const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));

-const ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));

 const playerStore = usePlayerStore();
@@ -98,26 +98,6 @@ onMounted(() => {
  settingsStore.initializeTheme();
 });

-const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
-const artistDrawerShow = computed({
-  get: () => settingsStore.showArtistDrawer,
-  set: (val) => settingsStore.setShowArtistDrawer(val)
-});
-
-// 监听歌手ID变化
-watch(
-  () => settingsStore.currentArtistId,
-  (newId) => {
-    if (newId) {
-      console.log('newId', newId);
-      artistDrawerShow.value = true;
-      nextTick(() => {
-        artistDrawerRef.value?.loadArtistInfo(newId);
-      });
-    }
-  }
-);
-
 const showPlaylistDrawer = ref(false);
 const currentSongId = ref<number | undefined>();

--- a/src/renderer/layout/MiniLayout.vue
+++ b/src/renderer/layout/MiniLayout.vue
@@ -0,0 +1,16 @@
+<!-- 迷你模式布局 -->
+<template>
+  <div class="mini-layout">
+    <mini-play-bar />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
+</script>
+
+<style lang="scss" scoped>
+.mini-layout {
+  @apply w-full h-full bg-transparent;
+}
+</style>
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -29,8 +29,9 @@
      </n-popover>

      <div
-        v-show="!config.hideCover"
+        v-if="!config.hideCover"
        class="music-img"
+        :class="{ 'only-cover': config.hideLyrics }"
        :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
      >
        <n-image
@@ -40,7 +41,7 @@
          lazy
          preview-disabled
        />
-        <div>
+        <div class="music-info">
          <div class="music-content-name">{{ playMusic.name }}</div>
          <div class="music-content-singer">
            <n-ellipsis
@@ -62,9 +63,22 @@
              </span>
            </n-ellipsis>
          </div>
+          <mini-play-bar
+            v-if="!config.hideMiniPlayBar"
+            class="mt-4"
+            :pure-mode-enabled="config.pureModeEnabled"
+            component
+          />
        </div>
      </div>
-      <div class="music-content" :class="{ center: config.centerLyrics && config.hideCover }">
+
+      <div
+        class="music-content"
+        :class="{
+          center: config.centerLyrics,
+          hide: config.hideLyrics
+        }"
+      >
        <n-layout
          ref="lrcSider"
          class="music-lrc"
@@ -112,7 +126,7 @@
            </div>

            <!-- 无歌词 -->
-            <div v-if="!lrcArray.length" class="music-lrc-text mt-40">
+            <div v-if="!lrcArray.length" class="music-lrc-text">
              <span>{{ t('player.lrc.noLrc') }}</span>
            </div>
          </div>
@@ -133,6 +147,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

 import LyricSettings from '@/components/lyric/LyricSettings.vue';
+import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
 import {
  artistList,
  lrcArray,
@@ -142,8 +157,10 @@ import {
  textColors,
  useLyricProgress
 } from '@/hooks/MusicHook';
-import { usePlayerStore } from '@/store';
+import { useArtist } from '@/hooks/useArtist';
+import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
+import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';

@@ -158,30 +175,8 @@ const isDark = ref(false);
 const showStickyHeader = ref(false);
 const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();

-interface LyricConfig {
-  hideCover: boolean;
-  centerLyrics: boolean;
-  fontSize: number;
-  letterSpacing: number;
-  lineHeight: number;
-  showTranslation: boolean;
-  theme: 'default' | 'light' | 'dark';
-  hidePlayBar: boolean;
-  pureModeEnabled: boolean;
-}
-
 // 移除 computed 配置
-const config = ref<LyricConfig>({
-  hideCover: false,
-  centerLyrics: false,
-  fontSize: 22,
-  letterSpacing: 0,
-  lineHeight: 1.5,
-  showTranslation: true,
-  theme: 'default',
-  hidePlayBar: false,
-  pureModeEnabled: false
-});
+const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });

 // 监听设置组件的配置变化
 watch(
@@ -375,9 +370,11 @@ onBeforeUnmount(() => {

 const settingsStore = useSettingsStore();

+const { navigateToArtist } = useArtist();
+
 const handleArtistClick = (id: number) => {
  isVisible.value = false;
-  settingsStore.currentArtistId = id;
+  navigateToArtist(id);
 };

 const setData = computed(() => settingsStore.setData);
@@ -542,20 +539,61 @@ defineExpose({
  animation-duration: 300ms;

  .music-img {
-    @apply flex-1 flex justify-center mr-16 flex-col;
+    @apply flex-1 flex justify-center mr-16 flex-col items-center;
    max-width: 360px;
    max-height: 360px;
+    transition: all 0.3s ease;
+
+    &.only-cover {
+      @apply mr-0 flex-initial;
+      max-width: none;
+      max-height: none;
+
+      .img {
+        @apply w-[50vh] h-[50vh] mb-8;
+      }
+
+      .music-info {
+        @apply text-center w-[600px];
+
+        .music-content-name {
+          @apply text-4xl mb-4;
+          color: var(--text-color-active);
+        }
+
+        .music-content-singer {
+          @apply text-xl mb-8 opacity-80;
+          color: var(--text-color-primary);
+        }
+      }
+    }
+
    .img {
-      @apply rounded-xl w-full h-full shadow-2xl;
+      @apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
+    }
+
+    .music-info {
+      @apply w-full mt-4;
+
+      .music-content-name {
+        @apply text-2xl font-bold;
+        color: var(--text-color-active);
+      }
+
+      .music-content-singer {
+        @apply text-base mt-2 opacity-80;
+        color: var(--text-color-primary);
+      }
    }
  }

  .music-content {
    @apply flex flex-col justify-center items-center relative;
    width: 500px;
+    transition: all 0.3s ease;

    &.center {
-      @apply w-full;
+      @apply w-auto;
      .music-lrc {
        @apply w-full max-w-3xl mx-auto;
      }
@@ -564,12 +602,8 @@ defineExpose({
      }
    }

-    &-name {
-      @apply font-bold text-2xl pb-1 pt-4;
-    }
-
-    &-singer {
-      @apply text-base;
+    &.hide {
+      @apply hidden;
    }
  }

--- a/src/renderer/layout/components/SearchBar.vue
+++ b/src/renderer/layout/components/SearchBar.vue
@@ -1,5 +1,8 @@
 <template>
  <div class="search-box flex">
+    <div v-if="showBackButton" class="back-button" @click="goBack">
+      <i class="ri-arrow-left-line"></i>
+    </div>
    <div class="search-box-input flex-1">
      <n-input
        v-model:value="searchValue"
@@ -102,7 +105,7 @@
 </template>

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

@@ -127,6 +130,16 @@ const userStore = useUserStore();
 const userSetOptions = ref(USER_SET_OPTIONS);
 const { t } = useI18n();

+// 显示返回按钮
+const showBackButton = computed(() => {
+  return router.currentRoute.value.meta.back === true;
+});
+
+// 返回上一页
+const goBack = () => {
+  router.back();
+};
+
 // 推荐热搜词
 const hotSearchKeyword = ref(t('comp.searchBar.searchPlaceholder'));
 const hotSearchValue = ref('');
@@ -178,6 +191,18 @@ const isDark = computed({

 // 搜索词
 const searchValue = ref('');
+
+// 使用 watch 代替 watchEffect 监听搜索值变化，确保深度监听
+watch(
+  () => searchStore.searchValue,
+  (newValue) => {
+    if (newValue) {
+      searchValue.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+
 const search = () => {
  const { value } = searchValue;
  if (value === '') {
@@ -202,7 +227,17 @@ const search = () => {
 const selectSearchType = (key: number) => {
  searchStore.searchType = key;
  if (searchValue.value) {
-    search();
+    if (router.currentRoute.value.path === '/search') {
+      search();
+    } else {
+      router.push({
+        path: '/search',
+        query: {
+          keyword: searchValue.value,
+          type: key
+        }
+      });
+    }
  }
 };

@@ -262,6 +297,15 @@ const toGithubRelease = () => {
 </script>

 <style lang="scss" scoped>
+.back-button {
+  @apply mr-2 flex items-center justify-center text-xl cursor-pointer;
+  @apply w-9 h-9 rounded-full;
+  @apply bg-light-100 dark:bg-dark-100 text-gray-900 dark:text-white;
+  @apply border dark:border-gray-600 border-gray-200;
+  @apply hover:bg-light-200 dark:hover:bg-dark-200;
+  @apply transition-all duration-200;
+}
+
 .user-box {
  @apply ml-4 flex text-lg justify-center items-center rounded-full transition-colors duration-200;
  @apply border dark:border-gray-600 border-gray-200 hover:border-gray-400 dark:hover:border-gray-400;
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -14,6 +14,9 @@
        下载桌面版
      </n-button>
      <template v-if="isElectron">
+        <div class="button" @click="miniWindow">
+          <i class="iconfont ri-picture-in-picture-line"></i>
+        </div>
        <div class="button" @click="minimize">
          <i class="iconfont icon-minisize"></i>
        </div>
@@ -78,6 +81,11 @@ const minimize = () => {
  window.api.minimize();
 };

+const miniWindow = () => {
+  if (!isElectron) return;
+  window.api.miniWindow();
+};
+
 const handleAction = (action: 'minimize' | 'close') => {
  if (rememberChoice.value) {
    settingsStore.setSetData({
@@ -87,7 +95,7 @@ const handleAction = (action: 'minimize' | 'close') => {
  }

  if (action === 'minimize') {
-    window.api.minimize();
+    window.api.miniTray();
  } else {
    window.api.close();
  }
@@ -98,7 +106,7 @@ const handleClose = () => {
  const { closeAction } = settingsStore.setData;

  if (closeAction === 'minimize') {
-    window.api.minimize();
+    window.api.miniTray();
  } else if (closeAction === 'close') {
    window.api.close();
  } else {
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -10,6 +10,7 @@ import pinia from '@/store';

 import App from './App.vue';
 import directives from './directive';
+import { initAppShortcuts } from './utils/appShortcuts';

 const app = createApp(App);

@@ -21,3 +22,6 @@ app.use(pinia);
 app.use(router);
 app.use(i18n);
 app.mount('#app');
+
+// 初始化应用内快捷键
+initAppShortcuts();
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -1,7 +1,21 @@
 import { createRouter, createWebHashHistory } from 'vue-router';

+import { recordVisit } from '@/api/stats';
 import AppLayout from '@/layout/AppLayout.vue';
+import MiniLayout from '@/layout/MiniLayout.vue';
 import homeRouter from '@/router/home';
+import otherRouter from '@/router/other';
+import { useSettingsStore } from '@/store/modules/settings';
+
+// 由于 Vue Router 守卫在创建前不能直接使用组合式 API
+// 我们创建一个辅助函数来获取 store 实例
+let _settingsStore: ReturnType<typeof useSettingsStore> | null = null;
+const getSettingsStore = () => {
+  if (!_settingsStore) {
+    _settingsStore = useSettingsStore();
+  }
+  return _settingsStore;
+};

 const loginRouter = {
  path: '/login',
@@ -29,15 +43,51 @@ const routes = [
  {
    path: '/',
    component: AppLayout,
-    children: [...homeRouter, loginRouter, setRouter]
+    children: [...homeRouter, loginRouter, setRouter, ...otherRouter]
  },
  {
    path: '/lyric',
    component: () => import('@/views/lyric/index.vue')
+  },
+  {
+    path: '/mini',
+    component: MiniLayout
  }
 ];

-export default createRouter({
+const router = createRouter({
  routes,
  history: createWebHashHistory()
 });
+
+// 添加全局前置守卫
+router.beforeEach((to, _, next) => {
+  const settingsStore = getSettingsStore();
+
+  // 如果是迷你模式
+  if (settingsStore.isMiniMode) {
+    // 只允许访问 /mini 路由
+    if (to.path === '/mini') {
+      next();
+    } else {
+      next(false); // 阻止导航
+    }
+  } else if (to.path === '/mini') {
+    // 如果不是迷你模式但想访问 /mini 路由，重定向到首页
+    next('/');
+  } else {
+    // 其他情况正常导航
+    next();
+  }
+});
+
+// 添加全局后置钩子，记录页面访问
+router.afterEach((to) => {
+  const pageName = to.name?.toString() || to.path;
+  // 使用setTimeout避免阻塞路由导航
+  setTimeout(() => {
+    recordVisit(pageName).catch((error) => console.error('记录页面访问失败:', error));
+  }, 100);
+});
+
+export default router;
--- a/src/renderer/router/other.ts
+++ b/src/renderer/router/other.ts
@@ -0,0 +1,58 @@
+const otherRouter = [
+  {
+    path: '/user/follows',
+    name: 'userFollows',
+    meta: {
+      title: '关注列表',
+      keepAlive: true,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/user/follows.vue')
+  },
+  {
+    path: '/user/followers',
+    name: 'userFollowers',
+    meta: {
+      title: '粉丝列表',
+      keepAlive: true,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/user/followers.vue')
+  },
+  {
+    path: '/user/detail/:uid',
+    name: 'userDetail',
+    meta: {
+      title: '用户详情',
+      keepAlive: true,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/user/detail.vue')
+  },
+  {
+    path: '/artist/detail/:id',
+    name: 'artistDetail',
+    meta: {
+      title: '歌手详情',
+      keepAlive: true,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/artist/detail.vue')
+  },
+  {
+    path: '/bilibili/:bvid',
+    name: 'bilibiliPlayer',
+    meta: {
+      title: 'B站听书',
+      keepAlive: true,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/bilibili/BilibiliPlayer.vue')
+  }
+];
+export default otherRouter;
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -37,6 +37,10 @@ class AudioService {

  private retryCount = 0;

+  private seekLock = false;
+
+  private seekDebounceTimer: NodeJS.Timeout | null = null;
+
  constructor() {
    if ('mediaSession' in navigator) {
      this.initMediaSession();
@@ -61,21 +65,22 @@ class AudioService {

    navigator.mediaSession.setActionHandler('seekto', (event) => {
      if (event.seekTime && this.currentSound) {
-        this.currentSound.seek(event.seekTime);
+        // this.currentSound.seek(event.seekTime);
+        this.seek(event.seekTime);
      }
    });

    navigator.mediaSession.setActionHandler('seekbackward', (event) => {
      if (this.currentSound) {
        const currentTime = this.currentSound.seek() as number;
-        this.currentSound.seek(currentTime - (event.seekOffset || 10));
+        this.seek(currentTime - (event.seekOffset || 10));
      }
    });

    navigator.mediaSession.setActionHandler('seekforward', (event) => {
      if (this.currentSound) {
        const currentTime = this.currentSound.seek() as number;
-        this.currentSound.seek(currentTime + (event.seekOffset || 10));
+        this.seek(currentTime + (event.seekOffset || 10));
      }
    });

@@ -355,6 +360,11 @@ class AudioService {
  play(url?: string, track?: SongResult, isPlay: boolean = true): Promise<Howl> {
    // 如果没有提供新的 URL 和 track，且当前有音频实例，则继续播放
    if (this.currentSound && !url && !track) {
+      // 如果有进行中的seek操作，等待其完成
+      if (this.seekLock && this.seekDebounceTimer) {
+        clearTimeout(this.seekDebounceTimer);
+        this.seekLock = false;
+      }
      this.currentSound.play();
      return Promise.resolve(this.currentSound);
    }
@@ -396,6 +406,11 @@ class AudioService {
          // 先停止并清理现有的音频实例
          if (this.currentSound) {
            console.log('audioService: 停止并清理现有的音频实例');
+            // 确保任何进行中的seek操作被取消
+            if (this.seekLock && this.seekDebounceTimer) {
+              clearTimeout(this.seekDebounceTimer);
+              this.seekLock = false;
+            }
            this.currentSound.stop();
            this.currentSound.unload();
            this.currentSound = null;
@@ -422,6 +437,8 @@ class AudioService {
                console.log(`Retrying playback (${retryCount}/${maxRetries})...`);
                setTimeout(tryPlay, 1000 * retryCount);
              } else {
+                // 发送URL过期事件，通知外部需要重新获取URL
+                this.emit('url_expired', this.currentTrack);
                reject(new Error('音频加载失败，请尝试切换其他歌曲'));
              }
            },
@@ -432,6 +449,8 @@ class AudioService {
                console.log(`Retrying playback (${retryCount}/${maxRetries})...`);
                setTimeout(tryPlay, 1000 * retryCount);
              } else {
+                // 发送URL过期事件，通知外部需要重新获取URL
+                this.emit('url_expired', this.currentTrack);
                reject(new Error('音频播放失败，请尝试切换其他歌曲'));
              }
            },
@@ -507,6 +526,11 @@ class AudioService {
  stop() {
    if (this.currentSound) {
      try {
+        // 确保任何进行中的seek操作被取消
+        if (this.seekLock && this.seekDebounceTimer) {
+          clearTimeout(this.seekDebounceTimer);
+          this.seekLock = false;
+        }
        this.currentSound.stop();
        this.currentSound.unload();
      } catch (error) {
@@ -530,14 +554,26 @@ class AudioService {

  seek(time: number) {
    if (this.currentSound) {
-      this.currentSound.seek(time);
-      this.updateMediaSessionPositionState();
+      try {
+        // 直接执行seek操作，避免任何过滤或判断
+        this.currentSound.seek(time);
+        // 触发seek事件
+        this.updateMediaSessionPositionState();
+        this.emit('seek', time);
+      } catch (error) {
+        console.error('Seek操作失败:', error);
+      }
    }
  }

  pause() {
    if (this.currentSound) {
      try {
+        // 如果有进行中的seek操作，等待其完成
+        if (this.seekLock && this.seekDebounceTimer) {
+          clearTimeout(this.seekDebounceTimer);
+          this.seekLock = false;
+        }
        this.currentSound.pause();
      } catch (error) {
        console.error('Error pausing audio:', error);
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -2,6 +2,7 @@ import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';

+import { getBilibiliAudioUrl } from '@/api/bilibili';
 import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import type { ILyric, ILyricText, SongResult } from '@/type/music';
@@ -24,13 +25,41 @@ function getLocalStorageItem<T>(key: string, defaultValue: T): T {
  }
 }

-export const getSongUrl = async (id: number, songData: any, isDownloaded: boolean = false) => {
-  const { data } = await getMusicUrl(id, isDownloaded);
+// 提取公共函数：获取B站视频URL
+
+export const getSongUrl = async (
+  id: string | number,
+  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 { data } = await getMusicUrl(numericId, isDownloaded);
  let url = '';
  let songDetail = null;
  try {
    if (data.data[0].freeTrialInfo || !data.data[0].url) {
-      const res = await getParsingMusicUrl(id, songData);
+      const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
      url = res.data.data.url;
      songDetail = res.data.data;
    } else {
@@ -45,6 +74,7 @@ export const getSongUrl = async (id: number, songData: any, isDownloaded: boolea
  url = url || data.data[0].url;
  return url;
 };
+
 const parseTime = (timeString: string): number => {
  const [minutes, seconds] = timeString.split(':');
  return Number(minutes) * 60 + Number(seconds);
@@ -71,9 +101,18 @@ const parseLyrics = (lyricsString: string): { lyrics: ILyricText[]; times: numbe
  return { lyrics, times };
 };

-export const loadLrc = async (playMusicId: number): Promise<ILyric> => {
+export const loadLrc = async (id: string | number): Promise<ILyric> => {
+  if (typeof id === 'string' && id.includes('--')) {
+    console.log('B站音频，无需加载歌词');
+    return {
+      lrcTimeArray: [],
+      lrcArray: []
+    };
+  }
+
  try {
-    const { data } = await getMusicLrc(playMusicId);
+    const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
+    const { data } = await getMusicLrc(numericId);
    const { lyrics, times } = parseLyrics(data.lrc.lyric);
    const tlyric: Record<string, string> = {};

@@ -102,8 +141,27 @@ export const loadLrc = async (playMusicId: number): Promise<ILyric> => {

 const getSongDetail = async (playMusic: SongResult) => {
  playMusic.playLoading = true;
-  const playMusicUrl =
-    playMusic.playMusicUrl || (await getSongUrl(playMusic.id, cloneDeep(playMusic)));
+
+  if (playMusic.source === 'bilibili') {
+    console.log('处理B站音频详情');
+    const { backgroundColor, primaryColor } =
+      playMusic.backgroundColor && playMusic.primaryColor
+        ? playMusic
+        : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
+
+    playMusic.playLoading = false;
+    return { ...playMusic, backgroundColor, primaryColor } as SongResult;
+  }
+
+  if (playMusic.expiredAt && playMusic.expiredAt < Date.now()) {
+    console.info(`歌曲已过期，重新获取: ${playMusic.name}`);
+    playMusic.playMusicUrl = undefined;
+  }
+
+  const playMusicUrl = playMusic.playMusicUrl || (await getSongUrl(playMusic.id, playMusic));
+  playMusic.createdAt = Date.now();
+  // 半小时后过期
+  playMusic.expiredAt = playMusic.createdAt + 1800000;
  const { backgroundColor, primaryColor } =
    playMusic.backgroundColor && playMusic.primaryColor
      ? playMusic
@@ -115,14 +173,28 @@ const getSongDetail = async (playMusic: SongResult) => {

 const preloadNextSong = (nextSongUrl: string) => {
  try {
-    // 限制同时预加载的数量
-    if (preloadingSounds.value.length >= 2) {
+    // 清理多余的预加载实例，确保最多只有2个预加载音频
+    while (preloadingSounds.value.length >= 2) {
      const oldestSound = preloadingSounds.value.shift();
      if (oldestSound) {
-        oldestSound.unload();
+        try {
+          oldestSound.stop();
+          oldestSound.unload();
+        } catch (e) {
+          console.error('清理预加载音频实例失败:', e);
+        }
      }
    }

+    // 检查这个URL是否已经在预加载列表中
+    const existingPreload = preloadingSounds.value.find(
+      (sound) => (sound as any)._src === nextSongUrl
+    );
+    if (existingPreload) {
+      console.log('该音频已在预加载列表中，跳过:', nextSongUrl);
+      return existingPreload;
+    }
+
    const sound = new Howl({
      src: [nextSongUrl],
      html5: true,
@@ -132,14 +204,18 @@ const preloadNextSong = (nextSongUrl: string) => {

    preloadingSounds.value.push(sound);

-    // 添加加载错误处理
    sound.on('loaderror', () => {
      console.error('预加载音频失败:', nextSongUrl);
      const index = preloadingSounds.value.indexOf(sound);
      if (index > -1) {
        preloadingSounds.value.splice(index, 1);
      }
-      sound.unload();
+      try {
+        sound.stop();
+        sound.unload();
+      } catch (e) {
+        console.error('卸载预加载音频失败:', e);
+      }
    });

    return sound;
@@ -156,8 +232,7 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
    const detailedSongs = await Promise.all(
      songs.map(async (song: SongResult) => {
        try {
-          // 如果歌曲详情已经存在，就不重复请求
-          if (!song.playMusicUrl) {
+          if (!song.playMusicUrl || (song.source === 'netease' && !song.backgroundColor)) {
            return await getSongDetail(song);
          }
          return song;
@@ -168,7 +243,6 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
      })
    );

-    // 加载下一首的歌词
    const nextSong = detailedSongs[0];
    if (nextSong && !(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
      try {
@@ -178,14 +252,12 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
      }
    }

-    // 更新播放列表中的歌曲详情
    detailedSongs.forEach((song, index) => {
      if (song && startIndex + index < playList.length) {
        playList[startIndex + index] = song;
      }
    });

-    // 只预加载下一首歌曲
    if (nextSong && nextSong.playMusicUrl) {
      preloadNextSong(nextSong.playMusicUrl);
    }
@@ -194,7 +266,6 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
  }
 };

-// 异步加载歌词的方法
 const loadLrcAsync = async (playMusic: SongResult) => {
  if (playMusic.lyric && playMusic.lyric.lrcTimeArray.length > 0) {
    return;
@@ -204,7 +275,6 @@ const loadLrcAsync = async (playMusic: SongResult) => {
 };

 export const usePlayerStore = defineStore('player', () => {
-  // 状态
  const play = ref(false);
  const isPlay = ref(false);
  const playMusic = ref<SongResult>(getLocalStorageItem('currentPlayMusic', {} as SongResult));
@@ -216,51 +286,90 @@ export const usePlayerStore = defineStore('player', () => {
  const favoriteList = ref<number[]>(getLocalStorageItem('favoriteList', []));
  const savedPlayProgress = ref<number | undefined>();

-  // 计算属性
  const currentSong = computed(() => playMusic.value);
  const isPlaying = computed(() => isPlay.value);
  const currentPlayList = computed(() => playList.value);
  const currentPlayListIndex = computed(() => playListIndex.value);

  const handlePlayMusic = async (music: SongResult, isPlay: boolean = true) => {
+    // 处理B站视频，确保URL有效
+    if (music.source === 'bilibili' && music.bilibiliData) {
+      try {
+        console.log('处理B站视频，检查URL有效性');
+        // 清除之前的URL，强制重新获取
+        music.playMusicUrl = undefined;
+
+        // 重新获取B站视频URL
+        if (music.bilibiliData.bvid && music.bilibiliData.cid) {
+          music.playMusicUrl = await getBilibiliAudioUrl(
+            music.bilibiliData.bvid,
+            music.bilibiliData.cid
+          );
+          console.log('获取B站URL成功:', music.playMusicUrl);
+        }
+      } catch (error) {
+        console.error('获取B站音频URL失败:', error);
+        throw error; // 向上抛出错误，让调用者处理
+      }
+    }
+
    const updatedPlayMusic = await getSongDetail(music);
    playMusic.value = updatedPlayMusic;
    playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;

-    // 记录当前设置的播放状态
    play.value = isPlay;

-    // 每次设置新歌曲时，立即更新 localStorage
    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
    localStorage.setItem('isPlaying', play.value.toString());

-    // 设置网页标题
-    document.title = `${updatedPlayMusic.name} - ${updatedPlayMusic?.song?.artists?.reduce((prev, curr) => `${prev}${curr.name}/`, '')}`;
+    let title = updatedPlayMusic.name;
+
+    if (updatedPlayMusic.source === 'netease' && updatedPlayMusic?.song?.artists) {
+      title += ` - ${updatedPlayMusic.song.artists.reduce(
+        (prev: string, curr: any) => `${prev}${curr.name}/`,
+        ''
+      )}`;
+    } else if (updatedPlayMusic.source === 'bilibili' && updatedPlayMusic?.song?.ar?.[0]) {
+      title += ` - ${updatedPlayMusic.song.ar[0].name}`;
+    }
+
+    document.title = title;
+
    loadLrcAsync(playMusic.value);
+
    musicHistory.addMusic(playMusic.value);
-    playListIndex.value = playList.value.findIndex((item: SongResult) => item.id === music.id);
-    // 请求后续五首歌曲的详情
+
+    playListIndex.value = playList.value.findIndex(
+      (item: SongResult) => item.id === music.id && item.source === music.source
+    );
+
    fetchSongs(playList.value, playListIndex.value + 1, playListIndex.value + 6);
  };

-  // 方法
  const setPlay = async (song: SongResult) => {
-    await handlePlayMusic(song);
-    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
-    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+    try {
+      await handlePlayMusic(song);
+      localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+      localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+      return true;
+    } catch (error) {
+      console.error('设置播放失败:', error);
+      return false;
+    }
  };

  const setIsPlay = (value: boolean) => {
    isPlay.value = value;
+    play.value = value;
    localStorage.setItem('isPlaying', value.toString());
+    // 通知主进程播放状态变化
+    window.electron?.ipcRenderer.send('update-play-state', value);
  };

  const setPlayMusic = async (value: boolean | SongResult) => {
    if (typeof value === 'boolean') {
-      play.value = value;
-      isPlay.value = value;
-      localStorage.setItem('isPlaying', value.toString());
+      setIsPlay(value);
    } else {
      await handlePlayMusic(value);
      play.value = true;
@@ -303,17 +412,26 @@ export const usePlayerStore = defineStore('player', () => {
    let nowPlayListIndex: number;

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

    playListIndex.value = nowPlayListIndex;
-    await handlePlayMusic(playList.value[playListIndex.value]);
+
+    // 获取下一首歌曲
+    const nextSong = playList.value[playListIndex.value];
+
+    // 如果是B站视频，确保重新获取URL
+    if (nextSong.source === 'bilibili' && nextSong.bilibiliData) {
+      // 清除之前的URL，确保重新获取
+      nextSong.playMusicUrl = undefined;
+      console.log('下一首是B站视频，已清除URL强制重新获取');
+    }
+
+    await handlePlayMusic(nextSong);
  };

  const prevPlay = async () => {
@@ -323,7 +441,18 @@ export const usePlayerStore = defineStore('player', () => {
    }
    const nowPlayListIndex =
      (playListIndex.value - 1 + playList.value.length) % playList.value.length;
-    await handlePlayMusic(playList.value[nowPlayListIndex]);
+
+    // 获取上一首歌曲
+    const prevSong = playList.value[nowPlayListIndex];
+
+    // 如果是B站视频，确保重新获取URL
+    if (prevSong.source === 'bilibili' && prevSong.bilibiliData) {
+      // 清除之前的URL，确保重新获取
+      prevSong.playMusicUrl = undefined;
+      console.log('上一首是B站视频，已清除URL强制重新获取');
+    }
+
+    await handlePlayMusic(prevSong);
    await fetchSongs(playList.value, playListIndex.value - 5, nowPlayListIndex);
  };

@@ -344,6 +473,21 @@ export const usePlayerStore = defineStore('player', () => {
    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
  };

+  const removeFromPlayList = (id: number) => {
+    const index = playList.value.findIndex((item) => item.id === id);
+    if (index === -1) return;
+
+    // 如果删除的是当前播放的歌曲，先切换到下一首
+    if (id === playMusic.value.id) {
+      nextPlay();
+    }
+
+    // 从播放列表中移除，使用不可变的方式
+    const newPlayList = [...playList.value];
+    newPlayList.splice(index, 1);
+    setPlayList(newPlayList);
+  };
+
  // 初始化播放状态
  const initializePlayState = async () => {
    const settingStore = useSettingsStore();
@@ -357,8 +501,17 @@ export const usePlayerStore = defineStore('player', () => {

    if (savedPlayMusic && Object.keys(savedPlayMusic).length > 0) {
      try {
+        console.log('恢复上次播放的音乐:', savedPlayMusic.name);
        console.log('settingStore.setData', settingStore.setData);
        const isPlaying = settingStore.setData.autoPlay;
+
+        // 如果是B站视频，确保播放URL能够在重启后正确恢复
+        if (savedPlayMusic.source === 'bilibili' && savedPlayMusic.bilibiliData) {
+          console.log('恢复B站视频播放', savedPlayMusic.bilibiliData);
+          // 清除之前可能存在的播放URL，确保重新获取
+          savedPlayMusic.playMusicUrl = undefined;
+        }
+
        await handlePlayMusic({ ...savedPlayMusic, playMusicUrl: undefined }, isPlaying);

        if (savedProgress) {
@@ -390,16 +543,13 @@ export const usePlayerStore = defineStore('player', () => {

  const initializeFavoriteList = async () => {
    const userStore = useUserStore();
-    // 先获取本地收藏列表
    const localFavoriteList = localStorage.getItem('favoriteList');
    const localList: number[] = localFavoriteList ? JSON.parse(localFavoriteList) : [];

-    // 如果用户已登录，尝试获取服务器收藏列表并合并
    if (userStore.user && userStore.user.userId) {
      try {
        const res = await getLikedList(userStore.user.userId);
        if (res.data?.ids) {
-          // 合并本地和服务器的收藏列表，去重
          const serverList = res.data.ids.reverse();
          const mergedList = Array.from(new Set([...localList, ...serverList]));
          favoriteList.value = mergedList;
@@ -414,12 +564,10 @@ export const usePlayerStore = defineStore('player', () => {
      favoriteList.value = localList;
    }

-    // 更新本地存储
    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
  };

  return {
-    // 状态
    play,
    isPlay,
    playMusic,
@@ -431,13 +579,11 @@ export const usePlayerStore = defineStore('player', () => {
    savedPlayProgress,
    favoriteList,

-    // 计算属性
    currentSong,
    isPlaying,
    currentPlayList,
    currentPlayListIndex,

-    // 方法
    setPlay,
    setIsPlay,
    nextPlay,
@@ -450,6 +596,7 @@ export const usePlayerStore = defineStore('player', () => {
    initializePlayState,
    initializeFavoriteList,
    addToFavorite,
-    removeFromFavorite
+    removeFromFavorite,
+    removeFromPlayList
  };
 });
--- a/src/renderer/store/modules/settings.ts
+++ b/src/renderer/store/modules/settings.ts
@@ -20,6 +20,7 @@ export const useSettingsStore = defineStore('settings', () => {
  const setData = ref(getInitialSettings());
  const theme = ref<ThemeType>(getCurrentTheme());
  const isMobile = ref(false);
+  const isMiniMode = ref(false);
  const showUpdateModal = ref(false);
  const showArtistDrawer = ref(false);
  const currentArtistId = ref<number | null>(null);
@@ -48,6 +49,10 @@ export const useSettingsStore = defineStore('settings', () => {
    applyTheme(theme.value);
  };

+  const setMiniMode = (value: boolean) => {
+    isMiniMode.value = value;
+  };
+
  const setShowUpdateModal = (value: boolean) => {
    showUpdateModal.value = value;
  };
@@ -109,6 +114,7 @@ export const useSettingsStore = defineStore('settings', () => {
    setData,
    theme,
    isMobile,
+    isMiniMode,
    showUpdateModal,
    showArtistDrawer,
    currentArtistId,
@@ -116,6 +122,7 @@ export const useSettingsStore = defineStore('settings', () => {
    showDownloadDrawer,
    setSetData,
    toggleTheme,
+    setMiniMode,
    setShowUpdateModal,
    setShowArtistDrawer,
    setCurrentArtistId,
--- a/src/renderer/type/music.ts
+++ b/src/renderer/type/music.ts
@@ -13,23 +13,35 @@ export interface ILyric {
 }

 export interface SongResult {
-  id: number;
-  type: number;
+  id: string | number;
  name: string;
-  copywriter?: any;
  picUrl: string;
-  canDislike: boolean;
-  trackNumberUpdateTime?: any;
-  song: Song;
-  alg: string;
-  count?: number;
+  playCount?: number;
+  song?: any;
+  copywriter?: string;
+  type?: number;
+  canDislike?: boolean;
+  program?: any;
+  alg?: string;
+  ar: Artist[];
+  artists?: Artist[];
+  al: Album;
+  album?: Album;
+  count: number;
+  playMusicUrl?: string;
  playLoading?: boolean;
-  ar?: Artist[];
-  al?: Album;
+  lyric?: ILyric;
  backgroundColor?: string;
  primaryColor?: string;
-  playMusicUrl?: string;
-  lyric?: ILyric;
+  bilibiliData?: {
+    bvid: string;
+    cid: number;
+  };
+  source?: 'netease' | 'bilibili';
+  // 过期时间
+  expiredAt?: number;
+  // 获取时间
+  createdAt?: number;
 }

 export interface Song {
@@ -214,3 +226,16 @@ interface FreeTrialPrivilege {
  resConsumable: boolean;
  userConsumable: boolean;
 }
+
+export interface IArtists {
+  id: number;
+  name: string;
+  picUrl: string | null;
+  alias: string[];
+  albumSize: number;
+  picId: number;
+  fansGroup: null;
+  img1v1Url: string;
+  img1v1: number;
+  trans: null;
+}
--- a/src/renderer/type/user.ts
+++ b/src/renderer/type/user.ts
@@ -14,6 +14,20 @@ export interface IUserDetail {
  profileVillageInfo: ProfileVillageInfo;
 }

+export interface IUserFollow {
+  followed: boolean;
+  follows: boolean;
+  nickname: string;
+  avatarUrl: string;
+  userId: number;
+  gender: number;
+  signature: string;
+  backgroundUrl: string;
+  vipType: number;
+  userType: number;
+  accountType: number;
+}
+
 interface ProfileVillageInfo {
  title: string;
  imageUrl?: any;
--- a/src/renderer/types/bilibili.ts
+++ b/src/renderer/types/bilibili.ts
@@ -0,0 +1,114 @@
+export interface IBilibiliSearchResult {
+  id: number;
+  bvid: string;
+  title: string;
+  pic: string;
+  duration: number | string;
+  pubdate: number;
+  ctime: number;
+  author: string;
+  view: number;
+  danmaku: number;
+  owner: {
+    mid: number;
+    name: string;
+    face: string;
+  };
+  stat: {
+    view: number;
+    danmaku: number;
+    reply: number;
+    favorite: number;
+    coin: number;
+    share: number;
+    like: number;
+  };
+}
+
+export interface IBilibiliVideoDetail {
+  aid: number;
+  bvid: string;
+  title: string;
+  pic: string;
+  desc: string;
+  duration: number;
+  pubdate: number;
+  ctime: number;
+  owner: {
+    mid: number;
+    name: string;
+    face: string;
+  };
+  stat: {
+    view: number;
+    danmaku: number;
+    reply: number;
+    favorite: number;
+    coin: number;
+    share: number;
+    like: number;
+  };
+  pages: IBilibiliPage[];
+}
+
+export interface IBilibiliPage {
+  cid: number;
+  page: number;
+  part: string;
+  duration: number;
+  dimension: {
+    width: number;
+    height: number;
+    rotate: number;
+  };
+}
+
+export interface IBilibiliPlayUrl {
+  durl?: {
+    order: number;
+    length: number;
+    size: number;
+    ahead: string;
+    vhead: string;
+    url: string;
+    backup_url: string[];
+  }[];
+  dash?: {
+    duration: number;
+    minBufferTime: number;
+    min_buffer_time: number;
+    video: IBilibiliDashItem[];
+    audio: IBilibiliDashItem[];
+  };
+  support_formats: {
+    quality: number;
+    format: string;
+    new_description: string;
+    display_desc: string;
+  }[];
+  accept_quality: number[];
+  accept_description: string[];
+  quality: number;
+  format: string;
+  timelength: number;
+  high_format: string;
+}
+
+export interface IBilibiliDashItem {
+  id: number;
+  baseUrl: string;
+  base_url: string;
+  backupUrl: string[];
+  backup_url: string[];
+  bandwidth: number;
+  mimeType: string;
+  mime_type: string;
+  codecs: string;
+  width?: number;
+  height?: number;
+  frameRate?: string;
+  frame_rate?: string;
+  startWithSap?: number;
+  start_with_sap?: number;
+  codecid: number;
+}
--- a/src/renderer/types/lyric.ts
+++ b/src/renderer/types/lyric.ts
@@ -0,0 +1,27 @@
+export interface LyricConfig {
+  hideCover: boolean;
+  centerLyrics: boolean;
+  fontSize: number;
+  letterSpacing: number;
+  lineHeight: number;
+  showTranslation: boolean;
+  theme: 'default' | 'light' | 'dark';
+  hidePlayBar: boolean;
+  pureModeEnabled: boolean;
+  hideMiniPlayBar: boolean;
+  hideLyrics: boolean;
+}
+
+export const DEFAULT_LYRIC_CONFIG: LyricConfig = {
+  hideCover: false,
+  centerLyrics: false,
+  fontSize: 22,
+  letterSpacing: 0,
+  lineHeight: 2,
+  showTranslation: true,
+  theme: 'default',
+  hidePlayBar: false,
+  hideMiniPlayBar: true,
+  pureModeEnabled: false,
+  hideLyrics: false
+};
--- a/src/renderer/utils/appShortcuts.ts
+++ b/src/renderer/utils/appShortcuts.ts
@@ -0,0 +1,210 @@
+import { onMounted, onUnmounted } from 'vue';
+
+import i18n from '@/../i18n/renderer';
+import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
+
+import { isElectron } from '.';
+import { showShortcutToast } from './shortcutToast';
+
+interface ShortcutConfig {
+  key: string;
+  enabled: boolean;
+  scope: 'global' | 'app';
+}
+
+interface ShortcutsConfig {
+  [key: string]: ShortcutConfig;
+}
+
+const { t } = i18n.global;
+
+// 全局存储快捷键配置
+let appShortcuts: ShortcutsConfig = {};
+
+/**
+ * 处理快捷键动作
+ * @param action 快捷键动作
+ */
+export async function handleShortcutAction(action: string) {
+  const playerStore = usePlayerStore();
+  const settingsStore = useSettingsStore();
+
+  const currentSound = audioService.getCurrentSound();
+  const showToast = (message: string, iconName: string) => {
+    if (settingsStore.isMiniMode) {
+      return;
+    }
+    showShortcutToast(message, iconName);
+  };
+
+  switch (action) {
+    case 'togglePlay':
+      if (playerStore.play) {
+        await audioService.pause();
+        showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
+      } else {
+        await audioService.play();
+        showToast(t('player.playBar.play'), 'ri-play-circle-line');
+      }
+      break;
+    case 'prevPlay':
+      playerStore.prevPlay();
+      showToast(t('player.playBar.prev'), 'ri-skip-back-line');
+      break;
+    case 'nextPlay':
+      playerStore.nextPlay();
+      showToast(t('player.playBar.next'), 'ri-skip-forward-line');
+      break;
+    case 'volumeUp':
+      if (currentSound && currentSound?.volume() < 1) {
+        currentSound?.volume((currentSound?.volume() || 0) + 0.1);
+        showToast(
+          `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+          'ri-volume-up-line'
+        );
+      }
+      break;
+    case 'volumeDown':
+      if (currentSound && currentSound?.volume() > 0) {
+        currentSound?.volume((currentSound?.volume() || 0) - 0.1);
+        showToast(
+          `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+          'ri-volume-down-line'
+        );
+      }
+      break;
+    case 'toggleFavorite': {
+      const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
+      const numericId = Number(playerStore.playMusic.id);
+      if (isFavorite) {
+        playerStore.removeFromFavorite(numericId);
+      } else {
+        playerStore.addToFavorite(numericId);
+      }
+      showToast(
+        isFavorite
+          ? t('player.playBar.favorite', { name: playerStore.playMusic.name })
+          : t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
+        isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
+      );
+      break;
+    }
+    default:
+      console.log('未知的快捷键动作:', action);
+      break;
+  }
+}
+
+/**
+ * 检查按键是否匹配快捷键
+ * @param e KeyboardEvent
+ * @param shortcutKey 快捷键字符串
+ * @returns 是否匹配
+ */
+function matchShortcut(e: KeyboardEvent, shortcutKey: string): boolean {
+  const keys = shortcutKey.split('+');
+  const pressedKey = e.key.length === 1 ? e.key.toUpperCase() : e.key;
+
+  // 检查修饰键
+  const hasCommandOrControl = keys.includes('CommandOrControl');
+  const hasAlt = keys.includes('Alt');
+  const hasShift = keys.includes('Shift');
+
+  // 检查主键
+  let mainKey = keys.find((k) => !['CommandOrControl', 'Alt', 'Shift'].includes(k));
+  if (!mainKey) return false;
+
+  // 处理特殊键
+  if (mainKey === 'Left' && pressedKey === 'ArrowLeft') mainKey = 'ArrowLeft';
+  if (mainKey === 'Right' && pressedKey === 'ArrowRight') mainKey = 'ArrowRight';
+  if (mainKey === 'Up' && pressedKey === 'ArrowUp') mainKey = 'ArrowUp';
+  if (mainKey === 'Down' && pressedKey === 'ArrowDown') mainKey = 'ArrowDown';
+
+  // 检查是否所有条件都匹配
+  return (
+    hasCommandOrControl === (e.ctrlKey || e.metaKey) &&
+    hasAlt === e.altKey &&
+    hasShift === e.shiftKey &&
+    mainKey === pressedKey
+  );
+}
+
+/**
+ * 全局键盘事件处理函数
+ * @param e KeyboardEvent
+ */
+function handleKeyDown(e: KeyboardEvent) {
+  // 如果在输入框中则不处理快捷键
+  if (['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
+    return;
+  }
+
+  Object.entries(appShortcuts).forEach(([action, config]) => {
+    if (config.enabled && config.scope === 'app' && matchShortcut(e, config.key)) {
+      e.preventDefault();
+      handleShortcutAction(action);
+    }
+  });
+}
+
+/**
+ * 更新应用内快捷键
+ * @param shortcuts 快捷键配置
+ */
+export function updateAppShortcuts(shortcuts: ShortcutsConfig) {
+  appShortcuts = shortcuts;
+}
+
+/**
+ * 初始化应用内快捷键
+ */
+export function initAppShortcuts() {
+  if (isElectron) {
+    // 监听全局快捷键事件
+    window.electron.ipcRenderer.on('global-shortcut', async (_, action: string) => {
+      handleShortcutAction(action);
+    });
+
+    // 监听应用内快捷键更新
+    window.electron.ipcRenderer.on('update-app-shortcuts', (_, shortcuts: ShortcutsConfig) => {
+      updateAppShortcuts(shortcuts);
+    });
+
+    // 获取初始快捷键配置
+    const storedShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
+    if (storedShortcuts) {
+      updateAppShortcuts(storedShortcuts);
+    }
+
+    // 添加键盘事件监听
+    document.addEventListener('keydown', handleKeyDown);
+  }
+}
+
+/**
+ * 清理应用内快捷键
+ */
+export function cleanupAppShortcuts() {
+  if (isElectron) {
+    // 移除全局事件监听
+    window.electron.ipcRenderer.removeAllListeners('global-shortcut');
+    window.electron.ipcRenderer.removeAllListeners('update-app-shortcuts');
+
+    // 移除键盘事件监听
+    document.removeEventListener('keydown', handleKeyDown);
+  }
+}
+
+/**
+ * 使用应用内快捷键的组合函数
+ */
+export function useAppShortcuts() {
+  onMounted(() => {
+    initAppShortcuts();
+  });
+
+  onUnmounted(() => {
+    cleanupAppShortcuts();
+  });
+}
--- a/src/renderer/utils/index.ts
+++ b/src/renderer/utils/index.ts
@@ -101,3 +101,14 @@ export const isElectron = (window as any).electron !== undefined;
 export const isLyricWindow = computed(() => {
  return window.location.hash.includes('lyric');
 });
+
+export const getSetData = (): any => {
+  let setData = null;
+  if (window.electron) {
+    setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
+  } else {
+    const settingsStore = useSettingsStore();
+    setData = settingsStore.setData;
+  }
+  return setData;
+};
--- a/src/renderer/utils/request.ts
+++ b/src/renderer/utils/request.ts
@@ -1,20 +1,10 @@
 import axios, { InternalAxiosRequestConfig } from 'axios';

-import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';

-import { isElectron } from '.';
+import { getSetData, isElectron } from '.';

 let setData: any = null;
-const getSetData = () => {
-  if (window.electron) {
-    setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
-  } else {
-    const settingsStore = useSettingsStore();
-    setData = settingsStore.setData;
-  }
-  return setData;
-};

 // 扩展请求配置接口
 interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
@@ -27,7 +17,8 @@ const baseURL = window.electron

 const request = axios.create({
  baseURL,
-  timeout: 5000
+  timeout: 5000,
+  withCredentials: true
 });

 // 最大重试次数
@@ -38,7 +29,7 @@ const RETRY_DELAY = 500;
 // 请求拦截器
 request.interceptors.request.use(
  (config: CustomAxiosRequestConfig) => {
-    getSetData();
+    setData = getSetData();
    config.baseURL = window.electron
      ? `http://127.0.0.1:${setData?.musicApiPort}`
      : import.meta.env.VITE_API;
@@ -54,8 +45,13 @@ request.interceptors.request.use(
      timestamp: Date.now()
    };
    const token = localStorage.getItem('token');
-    if (token) {
+    if (token && config.method !== 'post') {
      config.params.cookie = config.params.cookie !== undefined ? config.params.cookie : token;
+    } else if (token && config.method === 'post') {
+      config.data = {
+        ...config.data,
+        cookie: token
+      };
    }
    if (isElectron) {
      const proxyConfig = setData?.proxyConfig;
--- a/src/renderer/utils/shortcut.ts
+++ b/src/renderer/utils/shortcut.ts
@@ -0,0 +1,10 @@
+import { isElectron } from '.';
+import { handleShortcutAction } from './appShortcuts';
+
+export function initShortcut() {
+  if (isElectron) {
+    window.electron.ipcRenderer.on('global-shortcut', async (_, action: string) => {
+      handleShortcutAction(action);
+    });
+  }
+}
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -0,0 +1,334 @@
+<template>
+  <n-scrollbar v-loading="loading" class="artist-page">
+    <!-- 歌手信息头部 -->
+    <div class="artist-header">
+      <div class="artist-cover">
+        <n-image
+          :src="getImgUrl(artistInfo?.avatar, '300y300')"
+          class="artist-avatar"
+          preview-disabled
+        />
+      </div>
+      <div class="artist-info">
+        <h1 class="artist-name">{{ artistInfo?.name }}</h1>
+        <div v-if="artistInfo?.alias?.length" class="artist-alias">
+          {{ artistInfo.alias.join(' / ') }}
+        </div>
+        <div v-if="artistInfo?.briefDesc" class="artist-desc">
+          {{ artistInfo.briefDesc }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 标签页切换 -->
+    <n-tabs v-model:value="activeTab" class="content-tabs" type="line" animated>
+      <n-tab-pane name="songs" :tab="t('artist.hotSongs')">
+        <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="songLoading" class="loading-more">{{ t('common.loading') }}</div>
+          </div>
+        </div>
+      </n-tab-pane>
+
+      <n-tab-pane name="albums" :tab="t('artist.albums')">
+        <div class="albums-list">
+          <div class="albums-grid">
+            <search-item
+              v-for="album in albums"
+              :key="album.id"
+              shape="square"
+              :item="{
+                id: album.id,
+                picUrl: album.picUrl,
+                name: album.name,
+                desc: formatPublishTime(album.publishTime),
+                size: album.size,
+                type: '专辑'
+              }"
+            />
+            <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
+          </div>
+        </div>
+      </n-tab-pane>
+
+      <n-tab-pane name="about" :tab="t('artist.description')">
+        <div class="artist-description">
+          <div class="description-content" v-html="artistInfo?.briefDesc"></div>
+        </div>
+      </n-tab-pane>
+    </n-tabs>
+
+    <play-bottom />
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { useDateFormat, useThrottleFn } from '@vueuse/core';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
+import { getMusicDetail } from '@/api/music';
+import PlayBottom from '@/components/common/PlayBottom.vue';
+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';
+
+const { t } = useI18n();
+const route = useRoute();
+const playerStore = usePlayerStore();
+
+const artistId = computed(() => Number(route.params.id));
+const activeTab = ref('songs');
+
+// 歌手信息
+const artistInfo = ref<IArtist>();
+const songs = ref<any[]>([]);
+const albums = ref<any[]>([]);
+
+// 加载状态
+const loading = ref(false);
+const songLoading = ref(false);
+const albumLoading = ref(false);
+
+// 分页参数
+const songPage = ref({
+  page: 1,
+  pageSize: 30,
+  hasMore: true
+});
+
+const albumPage = ref({
+  page: 1,
+  pageSize: 30,
+  hasMore: true
+});
+
+// 加载歌手信息
+const loadArtistInfo = async () => {
+  if (!artistId.value) return;
+
+  loading.value = true;
+  try {
+    const info = await getArtistDetail(artistId.value);
+    if (info.data?.data?.artist) {
+      artistInfo.value = info.data.data.artist;
+    }
+    // 重置分页并加载初始数据
+    resetPagination();
+    await Promise.all([loadSongs(), loadAlbums()]);
+  } catch (error) {
+    console.error('加载歌手信息失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置分页
+const resetPagination = () => {
+  songPage.value = {
+    page: 1,
+    pageSize: 30,
+    hasMore: true
+  };
+  albumPage.value = {
+    page: 1,
+    pageSize: 30,
+    hasMore: true
+  };
+  songs.value = [];
+  albums.value = [];
+};
+
+// 加载歌曲
+const loadSongs = async () => {
+  if (!artistId.value || !songPage.value.hasMore || songLoading.value) return;
+
+  try {
+    songLoading.value = true;
+    const { page, pageSize } = songPage.value;
+    const res = await getArtistTopSongs({
+      id: artistId.value,
+      limit: pageSize,
+      offset: (page - 1) * pageSize
+    });
+
+    const ids = res.data.songs.map((item) => item.id);
+    const songsDetail = await getMusicDetail(ids);
+
+    if (songsDetail.data?.songs) {
+      const newSongs = songsDetail.data.songs.map((item) => {
+        return {
+          ...item,
+          picUrl: item.al.picUrl,
+          song: {
+            artists: item.ar,
+            name: item.name,
+            id: item.id
+          }
+        };
+      });
+      songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
+      songPage.value.hasMore = newSongs.length === pageSize;
+      songPage.value.page++;
+    }
+  } catch (error) {
+    console.error('加载歌曲失败:', error);
+  } finally {
+    songLoading.value = false;
+  }
+};
+
+// 加载专辑
+const loadAlbums = async () => {
+  if (!artistId.value || !albumPage.value.hasMore || albumLoading.value) return;
+
+  try {
+    albumLoading.value = true;
+    const { page, pageSize } = albumPage.value;
+    const res = await getArtistAlbums({
+      id: artistId.value,
+      limit: pageSize,
+      offset: (page - 1) * pageSize
+    });
+
+    if (res.data?.hotAlbums) {
+      const newAlbums = res.data.hotAlbums;
+      albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
+      albumPage.value.hasMore = newAlbums.length === pageSize;
+      albumPage.value.page++;
+    }
+  } catch (error) {
+    console.error('加载专辑失败:', error);
+  } finally {
+    albumLoading.value = false;
+  }
+};
+
+// 格式化发布时间
+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 handleScroll = useThrottleFn(() => {
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+
+  if (documentHeight - (scrollTop + windowHeight) < 100) {
+    if (activeTab.value === 'songs') {
+      loadSongs();
+    } else if (activeTab.value === 'albums') {
+      loadAlbums();
+    }
+  }
+}, 200);
+
+// 监听页面滚动
+onMounted(() => {
+  loadArtistInfo();
+  window.addEventListener('scroll', handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
+
+// 监听路由参数变化
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (newId) {
+      loadArtistInfo();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.artist-page {
+  @apply min-h-screen w-full bg-light dark:bg-dark pb-24;
+
+  .nav-header {
+    @apply flex items-center px-4 py-3 sticky top-0 bg-light dark:bg-dark z-10;
+
+    i {
+      @apply text-xl mr-4 cursor-pointer;
+    }
+
+    .page-title {
+      @apply text-base font-medium truncate;
+    }
+  }
+
+  .artist-header {
+    @apply flex flex-col md:flex-row gap-4 md:gap-6 px-4 pb-4;
+
+    .artist-cover {
+      @apply flex justify-center md:justify-start;
+
+      .artist-avatar {
+        @apply w-40 h-40 md:w-48 md:h-48 rounded-2xl object-cover;
+      }
+    }
+
+    .artist-info {
+      @apply flex-1;
+
+      .artist-name {
+        @apply text-2xl md:text-4xl font-bold mb-2 text-center md:text-left;
+      }
+
+      .artist-alias {
+        @apply text-gray-500 dark:text-gray-400 mb-2 text-center md:text-left;
+      }
+
+      .artist-desc {
+        @apply text-sm text-gray-600 dark:text-gray-300 line-clamp-3 text-center md:text-left;
+      }
+    }
+  }
+
+  .content-tabs {
+    @apply px-4;
+
+    :deep(.n-tabs-nav) {
+      @apply sticky top-0 bg-light dark:bg-dark z-10;
+    }
+  }
+
+  .albums-grid {
+    @apply grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6;
+  }
+
+  .loading-more {
+    @apply text-center py-4 text-gray-500 dark:text-gray-400;
+  }
+
+  .artist-description {
+    .description-content {
+      @apply text-sm leading-relaxed whitespace-pre-wrap;
+    }
+  }
+}
+</style>
--- a/src/renderer/views/bilibili/BilibiliPlayer.vue
+++ b/src/renderer/views/bilibili/BilibiliPlayer.vue
@@ -0,0 +1,614 @@
+<template>
+  <div class="bilibili-player-page">
+    <n-scrollbar class="content-scrollbar">
+      <div class="content-wrapper">
+        <div v-if="isLoading" class="loading-wrapper">
+          <n-spin size="large" />
+          <p>听书加载中...</p>
+        </div>
+
+        <div v-else-if="errorMessage" class="error-wrapper">
+          <i class="ri-error-warning-line text-4xl text-red-500"></i>
+          <p>{{ errorMessage }}</p>
+          <n-button type="primary" @click="loadVideoSource">重试</n-button>
+        </div>
+
+        <div v-else-if="videoDetail" class="bilibili-info-wrapper" :class="mainContentAnimation">
+          <div class="bilibili-cover">
+            <n-image
+              :src="getBilibiliProxyUrl(videoDetail.pic)"
+              class="cover-image"
+              preview-disabled
+            />
+            <!-- 悬浮的播放按钮 -->
+            <div class="play-overlay">
+              <div class="play-icon-bg" @click="playCurrentAudio">
+                <i class="ri-play-fill"></i>
+              </div>
+              <!-- 固定在右下角的大型播放按钮 -->
+              <n-button
+                type="primary"
+                size="large"
+                class="corner-play-button"
+                :loading="partLoading"
+                @click="playCurrentAudio"
+              >
+                <template #icon>
+                  <i class="ri-play-fill"></i>
+                </template>
+                立即播放
+              </n-button>
+            </div>
+          </div>
+
+          <div class="video-info">
+            <div class="title">{{ videoDetail?.title || '加载中...' }}</div>
+
+            <div class="author">
+              <i class="ri-user-line mr-1"></i>
+              <span>{{ videoDetail.owner?.name }}</span>
+            </div>
+            <div class="stats">
+              <span
+                ><i class="ri-play-line mr-1"></i>{{ formatNumber(videoDetail.stat?.view) }}</span
+              >
+              <span
+                ><i class="ri-chat-1-line mr-1"></i
+                >{{ formatNumber(videoDetail.stat?.danmaku) }}</span
+              >
+              <span
+                ><i class="ri-thumb-up-line mr-1"></i
+                >{{ formatNumber(videoDetail.stat?.like) }}</span
+              >
+            </div>
+            <div class="description">
+              <p>{{ videoDetail.desc }}</p>
+            </div>
+            <div class="duration">
+              <p>总时长: {{ formatTotalDuration(videoDetail.duration) }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="videoDetail?.pages && videoDetail.pages.length > 1"
+          class="video-parts"
+          :class="partsListAnimation"
+        >
+          <div class="parts-title">
+            分P列表 (共{{ videoDetail.pages.length }}集)
+            <n-spin v-if="partLoading" size="small" class="ml-2" />
+          </div>
+          <div class="parts-list">
+            <n-button
+              v-for="page in videoDetail.pages"
+              :key="page.cid"
+              :type="isCurrentPlayingPage(page) ? 'primary' : 'default'"
+              :disabled="partLoading"
+              size="small"
+              class="part-item"
+              @click="switchPage(page)"
+            >
+              {{ page.part }}
+            </n-button>
+          </div>
+        </div>
+
+        <!-- 底部留白 -->
+        <div class="pb-20"></div>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { getBilibiliPlayUrl, getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
+import { usePlayerStore } from '@/store/modules/player';
+import type { SongResult } from '@/type/music';
+import type { IBilibiliPage, IBilibiliVideoDetail } from '@/types/bilibili';
+import { setAnimationClass } from '@/utils';
+
+defineOptions({
+  name: 'BilibiliPlayer'
+});
+
+// 使用路由获取参数
+const route = useRoute();
+const router = useRouter();
+const message = useMessage();
+const playerStore = usePlayerStore();
+
+// 从路由参数获取bvid
+const bvid = computed(() => route.params.bvid as string);
+
+const isLoading = ref(true); // 初始加载状态
+const partLoading = ref(false); // 分P加载状态，仅影响分P选择
+const errorMessage = ref('');
+const videoDetail = ref<IBilibiliVideoDetail | null>(null);
+const currentPage = ref<IBilibiliPage | null>(null);
+const audioList = ref<SongResult[]>([]);
+
+// 只在初始加载时应用动画
+const initialLoadDone = ref(false);
+const mainContentAnimation = computed(() => {
+  if (!initialLoadDone.value) {
+    return setAnimationClass('animate__fadeInDown');
+  }
+  return '';
+});
+
+const partsListAnimation = computed(() => {
+  if (!initialLoadDone.value) {
+    return setAnimationClass('animate__fadeInUp');
+  }
+  return '';
+});
+
+// 监听bvid变化
+watch(
+  () => bvid.value,
+  async (newBvid) => {
+    if (newBvid) {
+      // 新的视频ID，重置初始加载状态
+      initialLoadDone.value = false;
+      await loadVideoDetail(newBvid);
+    }
+  }
+);
+
+// 组件挂载时加载数据
+onMounted(async () => {
+  if (bvid.value) {
+    await loadVideoDetail(bvid.value);
+  } else {
+    message.error('视频ID无效');
+    router.back();
+  }
+});
+
+const loadVideoDetail = async (bvid: string) => {
+  if (!bvid) return;
+
+  isLoading.value = true;
+  errorMessage.value = '';
+  audioList.value = [];
+
+  try {
+    console.log('加载B站视频详情:', bvid);
+    const res = await getBilibiliVideoDetail(bvid);
+    console.log('B站视频详情数据:', res.data);
+
+    // 确保响应式数据更新
+    videoDetail.value = JSON.parse(JSON.stringify(res.data));
+
+    // 默认加载第一个分P
+    if (videoDetail.value?.pages && videoDetail.value.pages.length > 0) {
+      console.log('视频有多个分P，共', videoDetail.value.pages.length, '个');
+      const [firstPage] = videoDetail.value.pages;
+      currentPage.value = firstPage;
+      await loadVideoSource();
+    } else {
+      console.log('视频无分P或分P数据为空');
+      errorMessage.value = '无法加载视频分P信息';
+    }
+  } catch (error) {
+    console.error('获取视频详情失败', error);
+    errorMessage.value = '获取视频详情失败';
+  } finally {
+    isLoading.value = false;
+    // 标记初始加载完成
+    initialLoadDone.value = true;
+  }
+};
+
+const loadVideoSource = async () => {
+  if (!bvid.value || !currentPage.value?.cid) {
+    console.error('缺少必要参数:', { bvid: bvid.value, cid: currentPage.value?.cid });
+    return;
+  }
+
+  isLoading.value = true;
+  errorMessage.value = '';
+
+  try {
+    console.log('加载音频源:', bvid.value, currentPage.value.cid);
+
+    // 将当前视频转换为音频格式加入播放列表
+    const tempAudio = createSongFromBilibiliVideo(); // 创建一个临时对象，还没有URL
+
+    // 加载当前分P的音频URL
+    const currentAudio = await loadSongUrl(currentPage.value, tempAudio);
+
+    // 将所有分P添加到播放列表
+    if (videoDetail.value?.pages) {
+      audioList.value = videoDetail.value.pages.map((page, index) => {
+        // 第一个分P直接使用已获取的音频URL
+        if (index === 0 && currentPage.value?.cid === page.cid) {
+          return currentAudio;
+        }
+
+        // 其他分P创建占位对象，稍后按需加载
+        return {
+          id: `${videoDetail.value!.aid}--${page.cid}`, // 使用aid+cid作为唯一ID
+          name: `${page.part || ''} - ${videoDetail.value!.title}`,
+          picUrl: getBilibiliProxyUrl(videoDetail.value!.pic),
+          type: 0,
+          canDislike: false,
+          alg: '',
+          source: 'bilibili', // 设置来源为B站
+          song: {
+            name: `${page.part || ''} - ${videoDetail.value!.title}`,
+            id: `${videoDetail.value!.aid}--${page.cid}`,
+            ar: [
+              {
+                name: videoDetail.value!.owner.name,
+                id: videoDetail.value!.owner.mid
+              }
+            ],
+            al: {
+              picUrl: getBilibiliProxyUrl(videoDetail.value!.pic)
+            }
+          } as any,
+          bilibiliData: {
+            bvid: bvid.value,
+            cid: page.cid
+          }
+        } as SongResult;
+      });
+      console.log('已生成音频列表，共', audioList.value.length, '首');
+
+      // 预加载下一集
+      if (audioList.value.length > 1) {
+        const nextIndex = 1; // 默认加载第二个分P
+        const nextPage = videoDetail.value.pages[nextIndex];
+        const nextAudio = audioList.value[nextIndex];
+        loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
+      }
+    }
+  } catch (error) {
+    console.error('获取音频播放地址失败', error);
+    errorMessage.value = '获取音频播放地址失败';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const createSongFromBilibiliVideo = (): SongResult => {
+  if (!videoDetail.value || !currentPage.value) {
+    throw new Error('视频详情未加载');
+  }
+
+  const pageName = currentPage.value.part || '';
+  const title = `${pageName} - ${videoDetail.value.title}`;
+
+  return {
+    id: `${videoDetail.value.aid}--${currentPage.value.cid}`, // 使用aid+cid作为唯一ID
+    name: title,
+    picUrl: getBilibiliProxyUrl(videoDetail.value.pic),
+    type: 0,
+    canDislike: false,
+    alg: '',
+    // 设置来源为B站
+    source: 'bilibili',
+    // playMusicUrl属性稍后通过loadSongUrl函数添加
+    song: {
+      name: title,
+      id: `${videoDetail.value.aid}--${currentPage.value.cid}`,
+      ar: [
+        {
+          name: videoDetail.value.owner.name,
+          id: videoDetail.value.owner.mid
+        }
+      ],
+      al: {
+        picUrl: getBilibiliProxyUrl(videoDetail.value.pic)
+      }
+    } as any,
+    bilibiliData: {
+      bvid: bvid.value,
+      cid: currentPage.value.cid
+    }
+  } as SongResult;
+};
+
+const loadSongUrl = async (
+  page: IBilibiliPage,
+  songItem: SongResult,
+  forceRefresh: boolean = false
+) => {
+  if (songItem.playMusicUrl && !forceRefresh) return songItem; // 如果已有URL且不强制刷新则直接返回
+
+  try {
+    console.log(`加载分P音频URL: ${page.part}, cid: ${page.cid}`);
+    const res = await getBilibiliPlayUrl(bvid.value, page.cid);
+    const playUrlData = res.data;
+    let url = '';
+
+    // 尝试获取音频URL
+    if (playUrlData.dash && playUrlData.dash.audio && playUrlData.dash.audio.length > 0) {
+      url = playUrlData.dash.audio[0].baseUrl;
+      console.log('获取到dash音频URL:', url);
+    } else if (playUrlData.durl && playUrlData.durl.length > 0) {
+      url = playUrlData.durl[0].url;
+      console.log('获取到durl音频URL:', url);
+    } else {
+      throw new Error('未找到可用的音频地址');
+    }
+
+    // 设置代理URL
+    songItem.playMusicUrl = getBilibiliProxyUrl(url);
+    return songItem;
+  } catch (error) {
+    console.error(`加载分P音频URL失败: ${page.part}`, error);
+    return songItem;
+  }
+};
+
+const switchPage = async (page: IBilibiliPage) => {
+  if (partLoading.value || currentPage.value?.cid === page.cid) return;
+
+  console.log('切换到分P:', page.part);
+  // 立即更新UI选中状态
+  currentPage.value = page;
+
+  // 查找对应的音频项
+  const audioItem = audioList.value.find((item) => item.bilibiliData?.cid === page.cid);
+
+  if (audioItem) {
+    // 设置局部加载状态
+    try {
+      partLoading.value = true;
+      // 每次切换分P都强制重新加载音频URL，以解决之前的URL可能失效的问题
+      await loadSongUrl(page, audioItem, true);
+      // 切换后自动播放
+      playCurrentAudio();
+    } catch (error) {
+      console.error('切换分P时加载音频URL失败:', error);
+      message.error('获取音频地址失败，请重试');
+    } finally {
+      partLoading.value = false;
+    }
+  } else {
+    console.error('未找到对应的音频项');
+    message.error('未找到对应的音频，请重试');
+  }
+};
+
+const playCurrentAudio = async () => {
+  if (audioList.value.length === 0) {
+    console.error('音频列表为空');
+    errorMessage.value = '音频列表为空，请重试';
+    return;
+  }
+
+  // 获取当前分P的音频
+  const currentIndex = audioList.value.findIndex(
+    (item) => item.bilibiliData?.cid === currentPage.value?.cid
+  );
+
+  if (currentIndex === -1) {
+    console.error('未找到当前分P的音频');
+    errorMessage.value = '未找到当前分P的音频';
+    return;
+  }
+
+  const currentAudio = audioList.value[currentIndex];
+  console.log('准备播放当前选中的分P:', currentAudio.name);
+
+  try {
+    // 每次播放前都强制重新加载当前分P的音频URL（解决可能的URL失效问题）
+    partLoading.value = true;
+    await loadSongUrl(currentPage.value!, currentAudio, true);
+
+    if (!currentAudio.playMusicUrl) {
+      throw new Error('获取音频URL失败');
+    }
+
+    // 预加载下一个分P的音频URL（如果有）
+    const nextIndex = (currentIndex + 1) % audioList.value.length;
+    if (nextIndex !== currentIndex) {
+      const nextAudio = audioList.value[nextIndex];
+      const nextPage = videoDetail.value!.pages.find((p) => p.cid === nextAudio.bilibiliData?.cid);
+
+      if (nextPage) {
+        console.log('预加载下一个分P:', nextPage.part);
+        loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
+      }
+    }
+
+    // 将B站音频列表设置为播放列表
+    playerStore.setPlayList(audioList.value);
+
+    // 播放当前选中的分P
+    console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
+    playerStore.setPlayMusic(currentAudio);
+
+    // 播放后通知用户已开始播放
+    message.success('已开始播放');
+  } catch (error) {
+    console.error('播放音频失败:', error);
+    errorMessage.value = error instanceof Error ? error.message : '播放失败，请重试';
+  } finally {
+    partLoading.value = false;
+  }
+};
+
+/**
+ * 格式化总时长
+ */
+const formatTotalDuration = (seconds?: number) => {
+  if (!seconds) return '00:00:00';
+
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
+
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+
+/**
+ * 格式化数字显示
+ */
+const formatNumber = (num?: number) => {
+  if (!num) return '0';
+  if (num >= 10000) {
+    return `${(num / 10000).toFixed(1)}万`;
+  }
+  return num.toString();
+};
+
+// 判断是否是当前正在播放的分P
+const isCurrentPlayingPage = (page: IBilibiliPage) => {
+  // 只根据播放器状态判断，不再使用UI选中状态
+  const currentPlayingMusic = playerStore.playMusic as any;
+  if (
+    currentPlayingMusic &&
+    typeof currentPlayingMusic === 'object' &&
+    currentPlayingMusic.bilibiliData
+  ) {
+    // 比较当前播放的音频的cid与此分P的cid
+    return (
+      currentPlayingMusic.bilibiliData.cid === page.cid &&
+      currentPlayingMusic.bilibiliData.bvid === bvid.value
+    );
+  }
+
+  // 如果没有正在播放的音乐，则使用UI选择状态
+  return currentPage.value?.cid === page.cid;
+};
+
+// 监听播放器状态变化，保持分P列表选中状态同步
+watch(
+  () => playerStore.playMusic,
+  (newMusic: any) => {
+    if (
+      newMusic &&
+      typeof newMusic === 'object' &&
+      newMusic.bilibiliData &&
+      newMusic.bilibiliData.bvid === bvid.value
+    ) {
+      // 查找对应的分P
+      const playingPage = videoDetail.value?.pages?.find(
+        (p) => p.cid === newMusic.bilibiliData.cid
+      );
+
+      // 无条件更新UI状态以确保UI状态与播放状态一致
+      if (playingPage) {
+        currentPage.value = playingPage;
+      }
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.bilibili-player-page {
+  @apply h-full flex flex-col;
+
+  .content-scrollbar {
+    @apply flex-1 overflow-hidden;
+  }
+
+  .content-wrapper {
+    @apply flex flex-col p-4;
+  }
+}
+
+.bilibili-info-wrapper {
+  @apply flex flex-col md:flex-row gap-4 w-full;
+
+  .bilibili-cover {
+    @apply relative w-full md:w-1/3 aspect-video rounded-lg overflow-hidden;
+
+    .cover-image {
+      @apply w-full h-full object-cover;
+    }
+
+    .play-overlay {
+      @apply absolute inset-0;
+
+      .play-icon-bg {
+        @apply absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 hover:opacity-100 transition-opacity cursor-pointer;
+
+        i {
+          @apply text-4xl;
+        }
+      }
+
+      .corner-play-button {
+        @apply absolute right-3 bottom-3 shadow-lg flex items-center gap-1 px-4 py-1 text-sm transition-all duration-200;
+
+        &:hover {
+          @apply transform scale-110;
+        }
+
+        i {
+          @apply text-xl;
+        }
+      }
+    }
+  }
+}
+
+.loading-wrapper,
+.error-wrapper {
+  @apply w-full flex flex-col items-center justify-center py-16 rounded-lg bg-gray-100 dark:bg-gray-800;
+  aspect-ratio: 16/9;
+
+  p {
+    @apply mt-4 text-gray-600 dark:text-gray-400;
+  }
+}
+
+.error-wrapper {
+  button {
+    @apply mt-4;
+  }
+}
+
+.video-info {
+  @apply flex-1 p-4 rounded-lg bg-gray-100 dark:bg-gray-800;
+
+  .title {
+    @apply text-lg font-medium mb-4 text-gray-900 dark:text-white;
+  }
+
+  .author {
+    @apply flex items-center text-sm mb-2;
+  }
+
+  .stats {
+    @apply flex gap-4 text-xs text-gray-500 dark:text-gray-400 mb-3;
+  }
+
+  .description {
+    @apply text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap mb-3;
+    max-height: 100px;
+    overflow-y: auto;
+  }
+
+  .duration {
+    @apply text-sm text-gray-600 dark:text-gray-400;
+  }
+}
+
+.video-parts {
+  @apply mt-4;
+
+  .parts-title {
+    @apply text-sm font-medium mb-2 flex items-center;
+  }
+
+  .parts-list {
+    @apply flex flex-wrap gap-2 max-h-60 overflow-y-auto pb-4;
+
+    .part-item {
+      @apply text-xs mb-2;
+    }
+  }
+}
+</style>
--- a/src/renderer/views/favorite/index.vue
+++ b/src/renderer/views/favorite/index.vue
@@ -63,7 +63,7 @@
            :class="setAnimationClass('animate__bounceInLeft')"
            :style="getItemAnimationDelay(index)"
            :selectable="isSelecting"
-            :selected="selectedSongs.includes(song.id)"
+            :selected="selectedSongs.includes(song.id as number)"
            @play="handlePlay"
            @select="handleSelect"
          />
@@ -193,11 +193,18 @@ const handleBatchDownload = async () => {
        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: cloneDeep(song),
+        songInfo,
        type
      });
    });
@@ -210,7 +217,7 @@ const handleBatchDownload = async () => {
 };

 // 无限滚动相关
-const pageSize = 16;
+const pageSize = 100;
 const currentPage = ref(1);

 const props = defineProps({
@@ -319,7 +326,7 @@ const isIndeterminate = computed(() => {
 // 处理全选/取消全选
 const handleSelectAll = (checked: boolean) => {
  if (checked) {
-    selectedSongs.value = favoriteSongs.value.map((song) => song.id);
+    selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
  } else {
    selectedSongs.value = [];
  }
--- a/src/renderer/views/history/index.vue
+++ b/src/renderer/views/history/index.vue
@@ -35,6 +35,7 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

+import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
@@ -55,7 +56,7 @@ const displayList = ref<SongResult[]>([]);
 const playerStore = usePlayerStore();

 // 无限滚动相关配置
-const pageSize = 20;
+const pageSize = 100;
 const currentPage = ref(1);

 // 获取当前页的音乐详情
@@ -71,27 +72,89 @@ const getHistorySongs = async () => {
    const endIndex = startIndex + pageSize;
    const currentPageItems = musicList.value.slice(startIndex, endIndex);

-    const currentIds = currentPageItems.map((item) => item.id);
-    const res = await getMusicDetail(currentIds);
+    // 分离网易云音乐和B站视频
+    const neteaseItems = currentPageItems.filter((item) => item.source !== 'bilibili');
+    const bilibiliItems = currentPageItems.filter((item) => item.source === 'bilibili');

-    if (res.data.songs) {
-      const newSongs = res.data.songs.map((song: SongResult) => {
-        const historyItem = currentPageItems.find((item) => item.id === song.id);
-        return {
-          ...song,
-          picUrl: song.al?.picUrl || '',
-          count: historyItem?.count || 0
-        };
-      });
-
-      if (currentPage.value === 1) {
-        displayList.value = newSongs;
-      } else {
-        displayList.value = [...displayList.value, ...newSongs];
+    // 处理网易云音乐
+    let neteaseSongs: SongResult[] = [];
+    if (neteaseItems.length > 0) {
+      const currentIds = neteaseItems.map((item) => item.id as number);
+      const res = await getMusicDetail(currentIds);
+      if (res.data.songs) {
+        neteaseSongs = res.data.songs.map((song: SongResult) => {
+          const historyItem = neteaseItems.find((item) => item.id === song.id);
+          return {
+            ...song,
+            picUrl: song.al?.picUrl || '',
+            count: historyItem?.count || 0,
+            source: 'netease'
+          };
+        });
      }
-
-      noMore.value = displayList.value.length >= musicList.value.length;
    }
+
+    // 处理B站视频
+    const bilibiliSongs: SongResult[] = [];
+    for (const item of bilibiliItems) {
+      try {
+        const bvid = item.bilibiliData?.bvid;
+        if (!bvid) continue;
+
+        const res = await getBilibiliVideoDetail(bvid);
+        const videoDetail = res.data;
+
+        // 找到对应的分P
+        const page = videoDetail.pages.find((p) => p.cid === item.bilibiliData?.cid);
+        if (!page) continue;
+
+        bilibiliSongs.push({
+          id: `${videoDetail.aid}--${page.cid}`,
+          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',
+          count: item.count || 0,
+          bilibiliData: {
+            bvid,
+            cid: page.cid
+          }
+        } as SongResult);
+      } catch (error) {
+        console.error('获取B站视频详情失败:', error);
+      }
+    }
+
+    // 合并两种来源的数据，并保持原有顺序
+    const newSongs = currentPageItems
+      .map((item) => {
+        if (item.source === 'bilibili') {
+          return bilibiliSongs.find(
+            (song) =>
+              song.bilibiliData?.bvid === item.bilibiliData?.bvid &&
+              song.bilibiliData?.cid === item.bilibiliData?.cid
+          );
+        }
+        return neteaseSongs.find((song) => song.id === item.id);
+      })
+      .filter((song): song is SongResult => !!song);
+
+    if (currentPage.value === 1) {
+      displayList.value = newSongs;
+    } else {
+      displayList.value = [...displayList.value, ...newSongs];
+    }
+
+    noMore.value = displayList.value.length >= musicList.value.length;
  } catch (error) {
    console.error(t('history.getHistoryFailed'), error);
  } finally {
--- a/src/renderer/views/lyric/index.vue
+++ b/src/renderer/views/lyric/index.vue
@@ -11,12 +11,12 @@
    <div class="control-bar" :class="{ 'control-bar-show': showControls }">
      <div class="font-size-controls">
        <n-button-group>
-          <n-button quaternary size="small" :disabled="fontSize <= 12" @click="decreaseFontSize">
+          <div class="control-button" @click="decreaseFontSize">
            <i class="ri-subtract-line"></i>
-          </n-button>
-          <n-button quaternary size="small" :disabled="fontSize >= 48" @click="increaseFontSize">
+          </div>
+          <div class="control-button" @click="increaseFontSize">
            <i class="ri-add-line"></i>
-          </n-button>
+          </div>
        </n-button-group>
        <div>{{ staticData.playMusic.name }}</div>
      </div>
@@ -59,7 +59,7 @@
              v-for="(line, index) in staticData.lrcArray"
              :key="index"
              class="lyric-line"
-              :style="lyricLineStyle"
+              :style="getDynamicLineStyle(line)"
              :class="{
                'lyric-line-current': index === currentIndex,
                'lyric-line-passed': index < currentIndex,
@@ -207,16 +207,41 @@ const wrapperStyle = computed(() => {
  // 计算容器中心点
  const containerCenter = containerHeight.value / 2;

-  // 计算当前行到顶部的距离（包含padding）
-  const currentLineTop =
-    currentIndex.value * lineHeight.value + containerHeight.value * 0.2 + lineHeight.value; // 加上顶部padding
+  // 计算每行的实际高度
+  const getLineHeight = (line: { text: string; trText: string }) => {
+    const baseHeight = lineHeight.value;
+    if (line.trText) {
+      const extraHeight = Math.round(fontSize.value * 0.6 * 1.4);
+      return baseHeight + extraHeight;
+    }
+    return baseHeight;
+  };
+
+  // 计算当前行之前所有行的累积高度
+  let accumulatedHeight = containerHeight.value * 0.2; // 顶部padding
+  for (let i = 0; i < currentIndex.value; i++) {
+    if (i < staticData.value.lrcArray.length) {
+      accumulatedHeight += getLineHeight(staticData.value.lrcArray[i]);
+    } else {
+      accumulatedHeight += lineHeight.value;
+    }
+  }
+
+  // 加上当前行的一半高度，使其居中
+  const currentLineHeight =
+    currentIndex.value < staticData.value.lrcArray.length
+      ? getLineHeight(staticData.value.lrcArray[currentIndex.value])
+      : lineHeight.value;
+  accumulatedHeight += currentLineHeight;

  // 计算偏移量，使当前行居中
-  const targetOffset = containerCenter - currentLineTop;
+  const targetOffset = containerCenter - accumulatedHeight;

  // 计算内容总高度（包含padding）
-  const contentHeight =
-    staticData.value.lrcArray.length * lineHeight.value + containerHeight.value * 0.4; // 上下padding各20vh
+  let contentHeight = containerHeight.value * 0.4; // 上下padding总和
+  for (const line of staticData.value.lrcArray) {
+    contentHeight += getLineHeight(line);
+  }

  // 计算最小和最大偏移量
  const minOffset = -(contentHeight - containerHeight.value);
@@ -231,9 +256,25 @@ const wrapperStyle = computed(() => {
  };
 });

-const lyricLineStyle = computed(() => ({
-  height: `${lineHeight.value}px`
-}));
+// 新增：根据是否有翻译文本动态计算每行的样式
+const getDynamicLineStyle = (line: { text: string; trText: string }) => {
+  // 默认行高
+  const defaultHeight = lineHeight.value;
+
+  // 如果有翻译文本，增加额外高度
+  if (line.trText) {
+    // 计算翻译文本的额外高度 (字体大小的0.6倍 * 行高比例1.4)
+    const extraHeight = Math.round(fontSize.value * 0.6 * 1.4);
+    return {
+      height: `${defaultHeight + extraHeight}px`
+    };
+  }
+
+  return {
+    height: `${defaultHeight}px`
+  };
+};
+
 // 更新容器高度和行高
 const updateContainerHeight = () => {
  if (!containerRef.value) return;
@@ -625,16 +666,22 @@ body {

  &.dark {
    --text-color: #ffffff;
-    --text-secondary: rgba(255, 255, 255, 0.6);
+    --text-secondary: #ffffffea;
    --highlight-color: #1db954;
    --control-bg: rgba(124, 124, 124, 0.3);
+    &:hover {
+      background: rgba(44, 44, 44, 0.466);
+    }
  }

  &.light {
    --text-color: #333333;
-    --text-secondary: rgba(51, 51, 51, 0.6);
+    --text-secondary: #39393989;
    --highlight-color: #1db954;
    --control-bg: rgba(255, 255, 255, 0.3);
+    &:hover {
+      background: rgba(0, 0, 0, 0.434);
+    }
  }
 }

--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -40,33 +40,52 @@
      </div>
      <div v-loading="searchDetailLoading" class="search-list-box">
        <template v-if="searchDetail">
-          <div
-            v-for="(item, index) in searchDetail?.songs"
-            :key="item.id"
-            :class="setAnimationClass('animate__bounceInRight')"
-            :style="setAnimationDelay(index, 50)"
-          >
-            <song-item :item="item" @play="handlePlay" />
-          </div>
-          <template v-for="(list, key) in searchDetail">
-            <template v-if="key.toString() !== 'songs'">
-              <div
-                v-for="(item, index) in list"
-                :key="item.id"
-                class="mb-3"
-                :class="setAnimationClass('animate__bounceInRight')"
-                :style="setAnimationDelay(index, 50)"
-              >
-                <search-item :item="item" />
-              </div>
-            </template>
+          <!-- B站视频搜索结果 -->
+          <template v-if="searchType === SEARCH_TYPE.BILIBILI">
+            <div
+              v-for="(item, index) in searchDetail?.bilibili"
+              :key="item.bvid"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 50)"
+            >
+              <bilibili-item :item="item" @play="handlePlayBilibili" />
+            </div>
+            <div v-if="isLoadingMore" class="loading-more">
+              <n-spin size="small" />
+              <span class="ml-2">{{ t('search.loading.more') }}</span>
+            </div>
+            <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
+          </template>
+          <!-- 原有音乐搜索结果 -->
+          <template v-else>
+            <div
+              v-for="(item, index) in searchDetail?.songs"
+              :key="item.id"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 50)"
+            >
+              <song-item :item="item" @play="handlePlay" />
+            </div>
+            <template v-for="(list, key) in searchDetail">
+              <template v-if="key.toString() !== 'songs'">
+                <div
+                  v-for="(item, index) in list"
+                  :key="item.id"
+                  class="mb-3"
+                  :class="setAnimationClass('animate__bounceInRight')"
+                  :style="setAnimationDelay(index, 50)"
+                >
+                  <search-item :item="item" />
+                </div>
+              </template>
+            </template>
+            <!-- 加载状态 -->
+            <div v-if="isLoadingMore" class="loading-more">
+              <n-spin size="small" />
+              <span class="ml-2">{{ t('search.loading.more') }}</span>
+            </div>
+            <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
          </template>
-          <!-- 加载状态 -->
-          <div v-if="isLoadingMore" class="loading-more">
-            <n-spin size="small" />
-            <span class="ml-2">{{ t('search.loading.more') }}</span>
-          </div>
-          <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
        </template>
        <!-- 搜索历史 -->
        <template v-else>
@@ -92,7 +111,7 @@
                @click="handleSearchHistory(item)"
                @close="handleCloseSearchHistory(item)"
              >
-                {{ item }}
+                {{ item.keyword }}
              </n-tag>
            </div>
          </div>
@@ -104,17 +123,21 @@

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

+import { getBilibiliProxyUrl, searchBilibili } from '@/api/bilibili';
 import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
+import BilibiliItem from '@/components/common/BilibiliItem.vue';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import { SEARCH_TYPE } from '@/const/bar-const';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSearchStore } from '@/store/modules/search';
 import type { IHotSearch } from '@/type/search';
+import type { IBilibiliSearchResult } from '@/types/bilibili';
 import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';

 defineOptions({
@@ -123,13 +146,14 @@ defineOptions({

 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 const playerStore = usePlayerStore();
 const searchStore = useSearchStore();

 const searchDetail = ref<any>();
 const searchType = computed(() => searchStore.searchType as number);
 const searchDetailLoading = ref(false);
-const searchHistory = ref<string[]>([]);
+const searchHistory = ref<Array<{ keyword: string; type: number }>>([]);

 // 添加分页相关的状态
 const ITEMS_PER_PAGE = 30; // 每页数量
@@ -144,17 +168,17 @@ const loadSearchHistory = () => {
  searchHistory.value = history ? JSON.parse(history) : [];
 };

-// 保存搜索历史
-const saveSearchHistory = (keyword: string) => {
+// 保存搜索历史，改为保存关键词和类型
+const saveSearchHistory = (keyword: string, type: number) => {
  if (!keyword) return;
  const history = searchHistory.value;
  // 移除重复的关键词
-  const index = history.indexOf(keyword);
+  const index = history.findIndex((item) => item.keyword === keyword);
  if (index > -1) {
    history.splice(index, 1);
  }
  // 添加到开头
-  history.unshift(keyword);
+  history.unshift({ keyword, type });
  // 只保留最近的20条记录
  if (history.length > 20) {
    history.pop();
@@ -170,8 +194,8 @@ const clearSearchHistory = () => {
 };

 // 删除搜索历史
-const handleCloseSearchHistory = (keyword: string) => {
-  searchHistory.value = searchHistory.value.filter((item) => item !== keyword);
+const handleCloseSearchHistory = (item: { keyword: string; type: number }) => {
+  searchHistory.value = searchHistory.value.filter((h) => h.keyword !== item.keyword);
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
 };

@@ -185,7 +209,7 @@ const loadHotSearch = async () => {
 onMounted(() => {
  loadHotSearch();
  loadSearchHistory();
-  loadSearch(route.query.keyword);
+  // 注意：路由参数的处理已经在 watch route.query 中处理了
 });

 const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
@@ -193,21 +217,26 @@ const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
 const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
  if (!keywords) return;

+  // 使用传入的类型或当前类型
+  const searchTypeToUse = type !== null ? type : searchType.value;
+
  if (!isLoadMore) {
    hotKeyword.value = keywords;
    searchDetail.value = undefined;
    page.value = 0;
    hasMore.value = true;
    currentKeyword.value = keywords;
+
+    // 保存搜索历史
+    saveSearchHistory(keywords, searchTypeToUse);
+
+    // 始终更新搜索框内容和类型
+    searchStore.searchType = searchTypeToUse;
+    searchStore.searchValue = keywords;
  } else if (isLoadingMore.value || !hasMore.value) {
    return;
  }

-  // 保存搜索历史
-  if (!isLoadMore) {
-    saveSearchHistory(keywords);
-  }
-
  if (isLoadMore) {
    isLoadingMore.value = true;
  } else {
@@ -215,61 +244,98 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
  }

  try {
-    const { data } = await getSearch({
-      keywords: currentKeyword.value,
-      type: type || searchType.value,
-      limit: ITEMS_PER_PAGE,
-      offset: page.value * ITEMS_PER_PAGE
-    });
+    // B站搜索
+    if (searchTypeToUse === SEARCH_TYPE.BILIBILI) {
+      const response = await searchBilibili({
+        keyword: currentKeyword.value,
+        page: page.value + 1,
+        pagesize: ITEMS_PER_PAGE
+      });
+      console.log('response', response);

-    const songs = data.result.songs || [];
-    const albums = data.result.albums || [];
-    const mvs = (data.result.mvs || []).map((item: any) => ({
-      ...item,
-      picUrl: item.cover,
-      playCount: item.playCount,
-      desc: item.artists.map((artist: any) => artist.name).join('/'),
-      type: 'mv'
-    }));
+      const bilibiliVideos = response.data.data.result.map((item: any) => ({
+        id: item.aid,
+        bvid: item.bvid,
+        title: item.title,
+        author: item.author,
+        pic: getBilibiliProxyUrl(item.pic),
+        duration: item.duration,
+        pubdate: item.pubdate,
+        description: item.description,
+        view: item.play,
+        danmaku: item.video_review
+      }));

-    const playlists = (data.result.playlists || []).map((item: any) => ({
-      ...item,
-      picUrl: item.coverImgUrl,
-      playCount: item.playCount,
-      desc: item.creator.nickname,
-      type: 'playlist'
-    }));
+      if (isLoadMore && searchDetail.value) {
+        // 合并数据
+        searchDetail.value.bilibili = [...searchDetail.value.bilibili, ...bilibiliVideos];
+      } else {
+        searchDetail.value = {
+          bilibili: bilibiliVideos
+        };
+      }

-    // songs map 替换属性
-    songs.forEach((item: any) => {
-      item.picUrl = item.al.picUrl;
-      item.artists = item.ar;
-    });
-    albums.forEach((item: any) => {
-      item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
-    });
-
-    if (isLoadMore && searchDetail.value) {
-      // 合并数据
-      searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
-      searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
-      searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
-      searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
-    } else {
-      searchDetail.value = {
-        songs,
-        albums,
-        mvs,
-        playlists
-      };
+      // 判断是否还有更多数据
+      hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
    }
+    // 音乐搜索
+    else {
+      const { data } = await getSearch({
+        keywords: currentKeyword.value,
+        type: searchTypeToUse,
+        limit: ITEMS_PER_PAGE,
+        offset: page.value * ITEMS_PER_PAGE
+      });

-    // 判断是否还有更多数据
-    hasMore.value =
-      songs.length === ITEMS_PER_PAGE ||
-      albums.length === ITEMS_PER_PAGE ||
-      mvs.length === ITEMS_PER_PAGE ||
-      playlists.length === ITEMS_PER_PAGE;
+      const songs = data.result.songs || [];
+      const albums = data.result.albums || [];
+      const mvs = (data.result.mvs || []).map((item: any) => ({
+        ...item,
+        picUrl: item.cover,
+        playCount: item.playCount,
+        desc: item.artists.map((artist: any) => artist.name).join('/'),
+        type: 'mv'
+      }));
+
+      const playlists = (data.result.playlists || []).map((item: any) => ({
+        ...item,
+        picUrl: item.coverImgUrl,
+        playCount: item.playCount,
+        desc: item.creator.nickname,
+        type: 'playlist'
+      }));
+
+      // songs map 替换属性
+      songs.forEach((item: any) => {
+        item.picUrl = item.al.picUrl;
+        item.artists = item.ar;
+      });
+      albums.forEach((item: any) => {
+        item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
+      });
+
+      if (isLoadMore && searchDetail.value) {
+        // 合并数据
+        searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
+        searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
+        searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
+        searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
+      } else {
+        searchDetail.value = {
+          songs,
+          albums,
+          mvs,
+          playlists
+        };
+      }
+
+      // 判断是否还有更多数据
+      hasMore.value =
+        songs.length === ITEMS_PER_PAGE ||
+        albums.length === ITEMS_PER_PAGE ||
+        mvs.length === ITEMS_PER_PAGE ||
+        playlists.length === ITEMS_PER_PAGE;
+    }

    page.value++;
  } catch (error) {
@@ -315,12 +381,21 @@ const handleScroll = (e: any) => {
 };

 watch(
-  () => route.path,
-  async (path) => {
-    if (path === '/search') {
-      searchStore.searchValue = route.query.keyword as string;
+  () => route.query,
+  (query) => {
+    if (route.path === '/search' && query.keyword) {
+      const routeKeyword = query.keyword as string;
+      const routeType = query.type ? Number(query.type) : searchType.value;
+
+      // 更新搜索类型和值
+      searchStore.searchType = routeType;
+      searchStore.searchValue = routeKeyword;
+
+      // 加载搜索结果
+      loadSearch(routeKeyword, routeType);
    }
-  }
+  },
+  { immediate: true }
 );

 const handlePlay = () => {
@@ -329,8 +404,19 @@ const handlePlay = () => {
 };

 // 点击搜索历史
-const handleSearchHistory = (keyword: string) => {
-  loadSearch(keyword, 1);
+const handleSearchHistory = (item: { keyword: string; type: number }) => {
+  // 更新搜索类型
+  searchStore.searchType = item.type;
+  // 先更新搜索值到 store
+  searchStore.searchValue = item.keyword;
+  // 使用关键词和类型加载搜索
+  loadSearch(item.keyword, item.type);
+};
+
+// 处理B站视频播放
+const handlePlayBilibili = (item: IBilibiliSearchResult) => {
+  // 使用路由导航到B站播放页面
+  router.push(`/bilibili/${item.bvid}`);
 };
 </script>

--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -211,6 +211,19 @@
              </div>
            </div>

+            <div class="set-item">
+              <div>
+                <div class="set-item-title">{{ t('settings.application.unlimitedDownload') }}</div>
+                <div class="set-item-content">
+                  <n-switch v-model:value="setData.unlimitedDownload" class="mr-2">
+                    <template #checked>{{ t('common.on') }}</template>
+                    <template #unchecked>{{ t('common.off') }}</template>
+                  </n-switch>
+                  {{ t('settings.application.unlimitedDownloadDesc') }}
+                </div>
+              </div>
+            </div>
+
            <div class="set-item">
              <div>
                <div class="set-item-title">{{ t('settings.application.downloadPath') }}</div>
--- a/src/renderer/views/user/detail.vue
+++ b/src/renderer/views/user/detail.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="user-detail-page">
+    <n-scrollbar class="content-scrollbar">
+      <div v-loading="loading" class="content-wrapper">
+        <template v-if="userDetail">
+          <!-- 用户信息部分 -->
+          <div class="user-info-section" :class="setAnimationClass('animate__fadeInDown')">
+            <div
+              class="user-info-bg"
+              :style="{ backgroundImage: `url(${getImgUrl(userDetail.profile.backgroundUrl)})` }"
+            >
+              <div class="user-info-content">
+                <n-avatar
+                  round
+                  :size="80"
+                  :src="getImgUrl(userDetail.profile.avatarUrl, '80y80')"
+                />
+                <div class="user-info-detail">
+                  <div class="user-info-name">
+                    {{ userDetail.profile.nickname }}
+                    <n-tooltip v-if="isArtist(userDetail.profile)" trigger="hover">
+                      <template #trigger>
+                        <i class="ri-verified-badge-fill artist-icon"></i>
+                      </template>
+                      {{ t('user.detail.artist') }}
+                    </n-tooltip>
+                  </div>
+                  <div class="user-info-stats">
+                    <div class="user-info-stat-item">
+                      <div class="label">{{ userDetail.profile.followeds }}</div>
+                      <div>{{ t('user.profile.followers') }}</div>
+                    </div>
+                    <div class="user-info-stat-item">
+                      <div class="label">{{ userDetail.profile.follows }}</div>
+                      <div>{{ t('user.profile.following') }}</div>
+                    </div>
+                    <div class="user-info-stat-item">
+                      <div class="label">{{ userDetail.level }}</div>
+                      <div>{{ t('user.profile.level') }}</div>
+                    </div>
+                  </div>
+                  <div class="user-info-signature">
+                    {{ userDetail.profile.signature || t('user.detail.noSignature') }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <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">
+                {{ t('user.detail.noPlaylists') }}
+              </div>
+              <div v-else class="playlist-grid" :class="setAnimationClass('animate__fadeInUp')">
+                <div
+                  v-for="(item, index) in playList"
+                  :key="index"
+                  class="playlist-item"
+                  :class="setAnimationClass('animate__fadeInUp')"
+                  :style="setAnimationDelay(index, 50)"
+                  @click="showPlaylist(item.id, item.name)"
+                >
+                  <div class="playlist-cover">
+                    <n-image
+                      :src="getImgUrl(item.coverImgUrl, '200y200')"
+                      lazy
+                      preview-disabled
+                      class="cover-img"
+                    />
+                    <div class="play-count">
+                      <i class="ri-play-fill"></i>
+                      {{ formatNumber(item.playCount) }}
+                    </div>
+                  </div>
+                  <div class="playlist-info">
+                    <div class="playlist-name">{{ item.name }}</div>
+                    <div class="playlist-stats">
+                      {{ t('user.playlist.trackCount', { count: item.trackCount }) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </n-tab-pane>
+
+            <!-- 听歌排行 -->
+            <n-tab-pane name="records" :tab="t('user.detail.records')">
+              <div v-if="loading" class="loading-container">
+                <n-spin size="medium" />
+              </div>
+              <div v-else-if="!recordList || recordList.length === 0" class="empty-message">
+                {{ t('user.detail.noRecords') }}
+              </div>
+              <div v-else class="record-list">
+                <div
+                  v-for="(item, index) in recordList"
+                  :key="item.id"
+                  class="record-item"
+                  :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" />
+                </div>
+              </div>
+            </n-tab-pane>
+          </n-tabs>
+        </template>
+        <div v-else-if="!loading" class="empty-message">
+          {{ t('user.message.loadFailed') }}
+        </div>
+
+        <!-- 底部留白 -->
+        <div class="pb-20"></div>
+      </div>
+    </n-scrollbar>
+
+    <music-list
+      v-model:show="isShowList"
+      :name="currentList?.name || ''"
+      :song-list="currentList?.tracks || []"
+      :list-info="currentList"
+      :loading="listLoading"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { getListDetail } from '@/api/list';
+import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
+import SongItem from '@/components/common/SongItem.vue';
+import MusicList from '@/components/MusicList.vue';
+import { usePlayerStore } from '@/store/modules/player';
+import type { Playlist } from '@/type/listDetail';
+import type { IUserDetail } from '@/type/user';
+import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'UserDetail'
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const message = useMessage();
+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 isShowList = ref(false);
+const currentList = ref<Playlist>();
+const listLoading = ref(false);
+
+// 加载用户数据
+const loadUserData = async () => {
+  if (!userId.value) {
+    message.error(t('user.detail.invalidUserId'));
+    router.back();
+    return;
+  }
+
+  try {
+    loading.value = true;
+
+    // 使用 Promise.all 并行请求提高效率
+    const [userDetailRes, playlistRes, recordRes] = await Promise.all([
+      getUserDetail(userId.value),
+      getUserPlaylist(userId.value),
+      getUserRecord(userId.value)
+    ]);
+
+    userDetail.value = userDetailRes.data;
+    playList.value = playlistRes.data.playlist;
+
+    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 = [];
+    }
+  } catch (error) {
+    console.error('加载用户数据失败:', error);
+    message.error('加载用户数据失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 展示歌单
+const showPlaylist = async (id: number, name: string) => {
+  isShowList.value = true;
+  listLoading.value = true;
+
+  try {
+    currentList.value = { id, name } as Playlist;
+    const { data } = await getListDetail(id);
+    currentList.value = data.playlist;
+  } catch (error) {
+    console.error('加载歌单详情失败:', error);
+    message.error('加载歌单详情失败');
+  } finally {
+    listLoading.value = false;
+  }
+};
+
+// 播放歌曲
+const handlePlay = () => {
+  if (!recordList.value || recordList.value.length === 0) return;
+
+  const tracks = recordList.value;
+  playerStore.setPlayList(tracks);
+};
+
+// 判断是否为歌手
+const isArtist = (profile: any) => {
+  return profile.userType === 4 || profile.userType === 2 || profile.accountType === 2;
+};
+
+// 页面挂载时加载数据
+onMounted(() => {
+  loadUserData();
+});
+</script>
+
+<style lang="scss" scoped>
+.user-detail-page {
+  @apply h-full flex flex-col;
+
+  .content-scrollbar {
+    @apply flex-1 overflow-hidden;
+  }
+
+  .content-wrapper {
+    @apply flex flex-col;
+    @apply pr-4 pb-4;
+  }
+}
+
+.user-info-section {
+  @apply mb-4;
+
+  .user-info-bg {
+    @apply rounded-xl overflow-hidden bg-cover bg-center relative;
+    height: 200px;
+
+    &:before {
+      content: '';
+      @apply absolute inset-0 bg-black bg-opacity-40;
+    }
+  }
+
+  .user-info-content {
+    @apply absolute inset-0 flex items-center p-6;
+  }
+
+  .user-info-detail {
+    @apply ml-4 text-white;
+
+    .user-info-name {
+      @apply text-xl font-bold flex items-center;
+
+      .artist-icon {
+        @apply ml-2 text-blue-500;
+      }
+    }
+
+    .user-info-stats {
+      @apply flex mt-2;
+
+      .user-info-stat-item {
+        @apply mr-6 text-center;
+
+        .label {
+          @apply text-lg font-bold;
+        }
+      }
+    }
+
+    .user-info-signature {
+      @apply mt-2 text-sm text-gray-200;
+      @apply line-clamp-2;
+    }
+  }
+}
+
+.playlist-grid {
+  @apply grid gap-4 w-full py-4;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+}
+
+.playlist-item {
+  @apply flex flex-col rounded-xl overflow-hidden cursor-pointer;
+  @apply transition-all duration-200;
+  @apply hover:scale-105;
+
+  .playlist-cover {
+    @apply relative;
+    aspect-ratio: 1;
+
+    .cover-img {
+      @apply w-full h-full object-cover rounded-xl;
+    }
+
+    .play-count {
+      @apply absolute top-2 right-2 px-2 py-1 rounded-full text-xs;
+      @apply bg-black bg-opacity-50 text-white flex items-center;
+
+      i {
+        @apply mr-1;
+      }
+    }
+  }
+
+  .playlist-info {
+    @apply mt-2 px-1;
+
+    .playlist-name {
+      @apply text-gray-900 dark:text-white font-medium;
+      @apply line-clamp-2 text-sm;
+    }
+
+    .playlist-stats {
+      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
+    }
+  }
+}
+
+.record-list {
+  @apply p-4;
+
+  .record-item {
+    @apply flex items-center mb-2 rounded-2xl;
+    @apply bg-light-100 dark:bg-dark-100;
+    @apply transition-all duration-200;
+    @apply hover:bg-light-200 dark:hover:bg-dark-200;
+  }
+
+  .play-score {
+    @apply text-gray-500 dark:text-gray-400 mr-2 text-lg w-10 h-10 rounded-full flex items-center justify-center;
+  }
+
+  .song-item {
+    @apply flex-1;
+  }
+}
+
+.loading-container {
+  @apply flex justify-center items-center p-8;
+}
+
+.empty-message {
+  @apply flex justify-center items-center p-8;
+}
+</style>
--- a/src/renderer/views/user/followers.vue
+++ b/src/renderer/views/user/followers.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="followers-page">
+    <div class="content-wrapper">
+      <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">
+          {{ t('user.follower.noFollowers') }}
+        </div>
+        <div class="follower-grid" :class="setAnimationClass('animate__fadeInUp')">
+          <div
+            v-for="(item, index) in followerList"
+            :key="index"
+            class="follower-item"
+            :class="setAnimationClass('animate__fadeInUp')"
+            :style="setAnimationDelay(index, 30)"
+            @click="viewUserDetail(item.userId, item.nickname)"
+          >
+            <div class="follower-item-inner">
+              <div class="follower-avatar">
+                <n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
+                <div v-if="isArtist(item)" class="artist-badge">
+                  <i class="ri-verified-badge-fill"></i>
+                </div>
+              </div>
+              <div class="follower-info">
+                <div class="follower-name" :class="{ 'is-artist': isArtist(item) }">
+                  {{ item.nickname }}
+                  <n-tooltip v-if="isArtist(item)" trigger="hover">
+                    <template #trigger>
+                      <i class="ri-verified-badge-fill artist-icon"></i>
+                    </template>
+                    歌手
+                  </n-tooltip>
+                </div>
+                <div class="follower-signature">
+                  {{ item.signature || '这个人很懒，什么都没留下' }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <n-space v-if="followerListLoading" justify="center" class="loading-more">
+          <n-spin size="small" />
+        </n-space>
+
+        <n-button
+          v-else-if="hasMoreFollowers"
+          class="load-more-btn"
+          secondary
+          block
+          @click="loadMoreFollowers"
+        >
+          {{ t('user.follower.loadMore') }}
+        </n-button>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getUserFollowers } from '@/api/user';
+import { useUserStore } from '@/store/modules/user';
+import type { IUserFollow } from '@/type/user';
+import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'UserFollowers'
+});
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const router = useRouter();
+const message = useMessage();
+
+// 粉丝列表相关
+const followerList = ref<IUserFollow[]>([]);
+const followerOffset = ref(0);
+const followerLimit = ref(30);
+const hasMoreFollowers = ref(false);
+const followerListLoading = ref(false);
+
+const user = computed(() => userStore.user);
+
+// 检查登录状态
+const checkLoginStatus = () => {
+  const token = localStorage.getItem('token');
+  const userData = localStorage.getItem('user');
+
+  if (!token || !userData) {
+    router.push('/login');
+    return false;
+  }
+
+  // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
+  if (!userStore.user && userData) {
+    userStore.setUser(JSON.parse(userData));
+  }
+
+  return true;
+};
+
+// 加载粉丝列表
+const loadFollowerList = async () => {
+  if (!user.value) return;
+
+  try {
+    followerListLoading.value = true;
+    const { data } = await getUserFollowers(
+      user.value.userId,
+      followerLimit.value,
+      followerOffset.value
+    );
+
+    if (!data || !data.followeds) {
+      hasMoreFollowers.value = false;
+      return;
+    }
+
+    const newFollowers = data.followeds as IUserFollow[];
+    followerList.value = [...followerList.value, ...newFollowers];
+
+    // 判断是否还有更多粉丝
+    hasMoreFollowers.value = newFollowers.length >= followerLimit.value;
+  } catch (error) {
+    console.error('加载粉丝列表失败:', error);
+    message.error('加载粉丝列表失败');
+  } finally {
+    followerListLoading.value = false;
+  }
+};
+
+// 加载更多粉丝
+const loadMoreFollowers = async () => {
+  followerOffset.value += followerLimit.value;
+  await loadFollowerList();
+};
+
+// 查看用户详情
+const viewUserDetail = (userId: number, nickname: string) => {
+  router.push({
+    path: `/user/detail/${userId}`,
+    query: { name: nickname }
+  });
+};
+
+// 判断是否为歌手
+const isArtist = (user: IUserFollow) => {
+  // 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
+  return user.userType === 4 || user.userType === 2 || user.accountType === 2;
+};
+
+// 页面挂载时加载数据
+onMounted(() => {
+  if (checkLoginStatus()) {
+    loadFollowerList();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.followers-page {
+  @apply h-full flex flex-col;
+
+  .content-wrapper {
+    @apply flex-1 overflow-hidden p-4;
+    @apply flex flex-col;
+  }
+
+  .scrollbar-container {
+    @apply h-full;
+  }
+}
+
+.follower-grid {
+  @apply grid gap-4 w-full;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.follower-item {
+  @apply rounded-xl overflow-hidden cursor-pointer;
+  @apply transition-all duration-200;
+  @apply hover:scale-105;
+
+  &-inner {
+    @apply flex flex-col items-center p-4 h-full;
+    @apply bg-light-100 dark:bg-dark-100;
+    @apply transition-all duration-200;
+    @apply hover:bg-light-200 dark:hover:bg-dark-200;
+  }
+
+  .follower-avatar {
+    @apply relative;
+
+    .artist-badge {
+      @apply absolute bottom-0 right-0;
+      @apply text-blue-500 text-lg;
+    }
+  }
+
+  .follower-info {
+    @apply mt-3 text-center w-full;
+
+    .follower-name {
+      @apply text-gray-900 dark:text-white text-base font-medium;
+      @apply flex items-center justify-center;
+
+      &.is-artist {
+        @apply text-blue-500;
+      }
+
+      .artist-icon {
+        @apply ml-1 text-blue-500;
+      }
+    }
+
+    .follower-signature {
+      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
+      @apply line-clamp-2 text-center;
+      max-height: 2.4em;
+    }
+  }
+}
+
+.empty-follower {
+  @apply text-center py-8 text-gray-500 dark:text-gray-400;
+}
+
+.load-more-btn {
+  @apply mt-4 mb-8;
+}
+
+.loading-more {
+  @apply my-4;
+}
+</style>
--- a/src/renderer/views/user/follows.vue
+++ b/src/renderer/views/user/follows.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="follows-page">
+    <div class="content-wrapper">
+      <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">
+          {{ t('user.follow.noFollowings') }}
+        </div>
+        <div class="follow-grid" :class="setAnimationClass('animate__fadeInUp')">
+          <div
+            v-for="(item, index) in followList"
+            :key="index"
+            class="follow-item"
+            :class="setAnimationClass('animate__fadeInUp')"
+            :style="setAnimationDelay(index, 30)"
+            @click="viewUserDetail(item.userId, item.nickname)"
+          >
+            <div class="follow-item-inner">
+              <div class="follow-avatar">
+                <n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
+                <div v-if="isArtist(item)" class="artist-badge">
+                  <i class="ri-verified-badge-fill"></i>
+                </div>
+              </div>
+              <div class="follow-info">
+                <div class="follow-name" :class="{ 'is-artist': isArtist(item) }">
+                  {{ item.nickname }}
+                  <n-tooltip v-if="isArtist(item)" trigger="hover">
+                    <template #trigger>
+                      <i class="ri-verified-badge-fill artist-icon"></i>
+                    </template>
+                    歌手
+                  </n-tooltip>
+                </div>
+                <div class="follow-signature">
+                  {{ item.signature || t('user.follow.noSignature') }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <n-space v-if="followListLoading" justify="center" class="loading-more">
+          <n-spin size="small" />
+        </n-space>
+
+        <n-button
+          v-else-if="hasMoreFollows"
+          class="load-more-btn"
+          secondary
+          block
+          @click="loadMoreFollows"
+        >
+          {{ t('user.follow.loadMore') }}
+        </n-button>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getUserFollows } from '@/api/user';
+import { useUserStore } from '@/store/modules/user';
+import type { IUserFollow } from '@/type/user';
+import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'UserFollows'
+});
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const router = useRouter();
+const message = useMessage();
+
+// 关注列表相关
+const followList = ref<IUserFollow[]>([]);
+const followOffset = ref(0);
+const followLimit = ref(30);
+const hasMoreFollows = ref(false);
+const followListLoading = ref(false);
+
+const user = computed(() => userStore.user);
+
+// 检查登录状态
+const checkLoginStatus = () => {
+  const token = localStorage.getItem('token');
+  const userData = localStorage.getItem('user');
+
+  if (!token || !userData) {
+    router.push('/login');
+    return false;
+  }
+
+  // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
+  if (!userStore.user && userData) {
+    userStore.setUser(JSON.parse(userData));
+  }
+
+  return true;
+};
+
+// 加载关注列表
+const loadFollowList = async () => {
+  if (!user.value) return;
+
+  try {
+    followListLoading.value = true;
+    const { data } = await getUserFollows(user.value.userId, followLimit.value, followOffset.value);
+
+    if (!data || !data.follow) {
+      hasMoreFollows.value = false;
+      return;
+    }
+
+    const newFollows = data.follow as IUserFollow[];
+    followList.value = [...followList.value, ...newFollows];
+
+    // 判断是否还有更多关注
+    hasMoreFollows.value = newFollows.length >= followLimit.value;
+  } catch (error) {
+    console.error('加载关注列表失败:', error);
+    message.error('加载关注列表失败');
+  } finally {
+    followListLoading.value = false;
+  }
+};
+
+// 加载更多关注
+const loadMoreFollows = async () => {
+  followOffset.value += followLimit.value;
+  await loadFollowList();
+};
+
+// 查看用户详情
+const viewUserDetail = (userId: number, nickname: string) => {
+  router.push({
+    path: `/user/detail/${userId}`,
+    query: { name: nickname }
+  });
+};
+
+// 判断是否为歌手
+const isArtist = (user: IUserFollow) => {
+  // 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
+  return user.userType === 4 || user.userType === 2 || user.accountType === 2;
+};
+
+// 页面挂载时加载数据
+onMounted(() => {
+  if (checkLoginStatus()) {
+    loadFollowList();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.follows-page {
+  @apply h-full flex flex-col;
+
+  .content-wrapper {
+    @apply flex-1 overflow-hidden p-4;
+    @apply flex flex-col;
+  }
+
+  .scrollbar-container {
+    @apply h-full;
+  }
+}
+
+.follow-grid {
+  @apply grid gap-4 w-full;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.follow-item {
+  @apply rounded-xl overflow-hidden cursor-pointer;
+  @apply transition-all duration-200;
+  @apply hover:scale-105;
+
+  &-inner {
+    @apply flex flex-col items-center p-4 h-full;
+    @apply bg-light-100 dark:bg-dark-100;
+    @apply transition-all duration-200;
+    @apply hover:bg-light-200 dark:hover:bg-dark-200;
+  }
+
+  .follow-avatar {
+    @apply relative;
+
+    .artist-badge {
+      @apply absolute bottom-0 right-0;
+      @apply text-blue-500 text-lg;
+    }
+  }
+
+  .follow-info {
+    @apply mt-3 text-center w-full;
+
+    .follow-name {
+      @apply text-gray-900 dark:text-white text-base font-medium;
+      @apply flex items-center justify-center;
+
+      &.is-artist {
+        @apply text-blue-500;
+      }
+
+      .artist-icon {
+        @apply ml-1 text-blue-500;
+      }
+    }
+
+    .follow-signature {
+      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
+      @apply line-clamp-2 text-center;
+      max-height: 2.4em;
+    }
+  }
+}
+
+.empty-follow {
+  @apply text-center py-8 text-gray-500 dark:text-gray-400;
+}
+
+.load-more-btn {
+  @apply mt-4 mb-8;
+}
+
+.loading-more {
+  @apply my-4;
+}
+</style>
--- a/src/renderer/views/user/index.vue
+++ b/src/renderer/views/user/index.vue
@@ -15,7 +15,7 @@
              <div class="label">{{ userDetail.profile.followeds }}</div>
              <div>{{ t('user.profile.followers') }}</div>
            </div>
-            <div class="user-info-item">
+            <div class="user-info-item" @click="showFollowList">
              <div class="label">{{ userDetail.profile.follows }}</div>
              <div>{{ t('user.profile.following') }}</div>
            </div>
@@ -73,10 +73,10 @@
            :class="setAnimationClass('animate__bounceInUp')"
            :style="setAnimationDelay(index, 25)"
          >
-            <song-item class="song-item" :item="item" @play="handlePlay" />
-            <div class="play-count">
-              {{ t('user.ranking.playCount', { count: item.playCount }) }}
+            <div class="play-score">
+              {{ index + 1 }}
            </div>
+            <song-item class="song-item" :item="item" mini @play="handlePlay" />
          </div>
          <play-bottom />
        </n-scrollbar>
@@ -96,7 +96,7 @@

 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';

@@ -223,6 +223,7 @@ watch(
  (newUser) => {
    if (!mounted.value) return;
    if (newUser) {
+      checkLoginStatus();
      loadPage();
    }
  }
@@ -280,6 +281,18 @@ const handlePlay = () => {
  const tracks = recordList.value || [];
  playerStore.setPlayList(tracks);
 };
+
+// 显示关注列表
+const showFollowList = () => {
+  if (!user.value) return;
+  router.push('/user/follows');
+};
+
+// // 显示粉丝列表
+// const showFollowerList = () => {
+//   if (!user.value) return;
+//   router.push('/user/followers');
+// };
 </script>

 <style lang="scss" scoped>
@@ -319,6 +332,10 @@ const handlePlay = () => {
          @apply text-xl font-bold text-white;
        }
      }
+
+      &-item {
+        @apply cursor-pointer;
+      }
    }
  }

@@ -331,16 +348,15 @@ const handlePlay = () => {
      height: calc(100% - 100px);

      .record-item {
-        @apply flex items-center px-4;
+        @apply flex items-center px-2 mb-2 rounded-2xl bg-light-100 dark:bg-dark-100;
      }

      .song-item {
        @apply flex-1;
      }

-      .play-count {
-        @apply ml-4;
-        @apply text-gray-600 dark:text-gray-400;
+      .play-score {
+        @apply text-gray-500 dark:text-gray-400 mr-2 text-lg w-10 h-10 rounded-full flex items-center justify-center;
      }
    }

--- a/src/types/shortcuts.ts
+++ b/src/types/shortcuts.ts
@@ -0,0 +1,18 @@
+/**
+ * 快捷键配置
+ */
+export interface ShortcutConfig {
+  /** 快捷键字符串 */
+  key: string;
+  /** 是否启用 */
+  enabled: boolean;
+  /** 作用范围: global(全局) 或 app(仅应用内) */
+  scope: 'global' | 'app';
+}
+
+/**
+ * 快捷键配置集合
+ */
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig;
+}
Author	SHA1	Message	Date
alger	76e55d4e6b	🐞 fix: 修复歌曲播放地址缓存导致播放失败问题添加过期时间	2025-04-16 00:03:56 +08:00
alger	b7de5fc173	🌈 style: v4.3.0	2025-04-13 00:04:48 +08:00
alger	7bc8405df0	✨ feat: 优化歌单加载逻辑	2025-04-12 23:51:37 +08:00
alger	a7f2045c7b	✨ feat: 添加统计服务	2025-04-12 23:16:12 +08:00
alger	b9b52f4d9f	✨ feat:确保仅在 Electron 中调用 API 发送歌曲数据	2025-04-12 13:05:08 +08:00
alger	09f8837fe4	✨ feat: 增加无限滚动页面大小至100，以优化历史和收藏视图的加载体验	2025-04-12 12:37:08 +08:00
alger	d7fea7f888	✨ feat: 优化歌单歌曲播放处理	2025-04-12 12:32:19 +08:00
alger	bb7d1e332f	✨ feat: 优化音乐封面显示逻辑，确保在缺失封面时使用默认图片，并更新推荐专辑组件以显示封面	2025-04-11 20:07:51 +08:00
alger	2dc907a20f	🌈 style: 修改依赖	2025-04-11 19:37:45 +08:00
Alger	ad3e52f6e1	Merge pull request #126 from algerkong/feat/music-list-search ✨ feat: 添加搜索功能至歌曲列表（可搜索名称歌手专辑），支持拼音匹配，优化播放列表加载逻辑，更好适配超大歌单	2025-04-11 19:36:10 +08:00
alger	b593ca3011	✨ feat: 添加搜索功能至歌曲列表（可搜索名称歌手专辑），支持拼音匹配，优化播放列表加载逻辑，更好适配超大歌单	2025-04-11 19:35:21 +08:00
alger	988418e8d1	✨ feat: 优化歌曲下载逻辑	2025-04-10 22:15:58 +08:00
Alger	1922311238	Merge pull request #123 from algerkong/feat/down-new ✨ feat: 歌曲下载内置封面歌词歌曲信息等，添加无限制下载功能，优化下载管理，支持清空下载记录	2025-04-10 00:27:48 +08:00
alger	3b1488f147	✨ feat: 歌曲下载内置封面歌词歌曲信息等，添加无限制下载功能，优化下载管理，支持清空下载记录	2025-04-10 00:26:58 +08:00
alger	5f4b53c167	✨ feat: 添加直接播放歌单功能，优化播放列表加载逻辑，支持异步加载完整歌单	2025-04-09 22:27:52 +08:00
alger	e17941dfb0	✨ feat: 调整迷你播放栏列表项高度，从52px更改为69px，以优化滚动体验	2025-04-06 21:11:17 +08:00
Alger	9aff694116	Merge pull request #119 from algerkong/feat/shortcut ✨ feat: 添加快捷键管理功能，支持全局和应用内快捷键的启用/禁用，优化快捷键配置界面	2025-04-05 20:36:13 +08:00
algerkong	c2983ba079	✨ feat: 添加快捷键管理功能，支持全局和应用内快捷键的启用/禁用，优化快捷键配置界面 feat: #117	2025-04-05 20:33:34 +08:00
algerkong	541ff2b76c	✨ feat: 优化桌面歌词歌词行动态样式计算，提升歌词显示效果 feat: #115	2025-04-04 22:46:23 +08:00
algerkong	55b50d764b	✨ feat: 优化歌词界面配置	2025-04-04 22:19:35 +08:00
algerkong	30ff7b2930	✨ feat: 优化历史歌曲获取功能, 分离网易云音乐和B站视频处理逻辑	2025-04-04 21:16:27 +08:00
algerkong	a24f901d1d	✨ feat: 优化B站视频代理URL获取逻辑	2025-04-04 21:16:09 +08:00
alger	7f7d41f883	✨ feat: 更新迷你播放栏在页面显示逻辑	2025-04-02 00:07:37 +08:00
alger	7b27cf5bc6	fix: 修复类型问题	2025-04-01 23:34:17 +08:00
alger	ad8f7af3a9	✨ feat: 更新至 v4.2.0 ## v4.2.0 ### ✨ 新功能 - 添加迷你播放器模式（[`0f55795`](https://github.com/algerkong/AlgerMusicPlayer/commit/0f55795)) - 更新网易云音乐API版本，添加B站视频搜索功能和播放器组件 ([`280fec1`](https://github.com/algerkong/AlgerMusicPlayer/commit/280fec1)) - mac端添加状态栏显示当前播放歌曲和操作按钮 ([`374a7a8`](https://github.com/algerkong/AlgerMusicPlayer/commit/374a7a8)) - 添加音频URL过期事件监听，自动重新获取B站和网易云音乐音频URL并恢复播放 ([`ee6e9d4`](https://github.com/algerkong/AlgerMusicPlayer/commit/ee6e9d4)) - 优化搜索功能，改进搜索历史管理和路由处理逻辑 ([`477f8bb`](https://github.com/algerkong/AlgerMusicPlayer/commit/477f8bb)) - 在播放列表中添加歌曲删除功能，优化播放列表管理逻辑 ([`a5f694e`](https://github.com/algerkong/AlgerMusicPlayer/commit/a5f694e)) (#94) - 优化歌词窗口字体控制按钮样式 ([`c5e50c9`](https://github.com/algerkong/AlgerMusicPlayer/commit/c5e50c9)) - 优化首页banner加载逻辑 ([`01ccad4`](https://github.com/algerkong/AlgerMusicPlayer/commit/01ccad4)) - 优化歌手详情页面由抽屉改为页面 ([`dfb8f55`](https://github.com/algerkong/AlgerMusicPlayer/commit/dfb8f55)) - 增加用户关注列表和关注用户详情页可查看听歌排行和用户歌单 ([`2924ad6`](https://github.com/algerkong/AlgerMusicPlayer/commit/2924ad6)) - 优化进度条鼠标悬停直接显示进度信息 ([`9ce872e`](https://github.com/algerkong/AlgerMusicPlayer/commit/9ce872e)) - 优化应用更新下载功能可后台下载弹出下载完成提示不再自动关闭应用 ([`23b2340`](https://github.com/algerkong/AlgerMusicPlayer/commit/23b2340)) ### 🐛 Bug 修复 - 修复进度条多次拖动和多次暂停播放引发的歌曲重复播放bug ([`cfe197c`](https://github.com/algerkong/AlgerMusicPlayer/commit/cfe197c)) (#104) - 修复关闭按钮最小化还在任务栏显示的bug ([`e0d1305`](https://github.com/algerkong/AlgerMusicPlayer/commit/e0d1305)) - 修复播放列表中歌曲删除时类型不匹配的问题 ([`8d6d052`](https://github.com/algerkong/AlgerMusicPlayer/commit/8d6d052))	2025-04-01 23:25:52 +08:00
alger	2599766e3e	feat: cursor rule	2025-04-01 23:25:19 +08:00
alger	0f55795ca9	✨ feat: 添加迷你模式功能，支持迷你窗口的显示与隐藏，更新设置项以控制迷你播放栏和歌词显示，优化路由管理以适应迷你模式	2025-04-01 23:22:26 +08:00
alger	8d6d0527db	🐛fix: 修复播放列表中歌曲删除时类型不匹配的问题，确保正确移除歌曲	2025-03-31 23:07:31 +08:00
alger	374a7a837d	✨ feat: mac添加音乐控制图标 , 托盘菜单项，更新播放状态和当前歌曲信息的逻辑 feat #105	2025-03-31 23:05:19 +08:00
alger	e0d13057c3	🐛fix: 修改标题栏行为，将最小化功能更改为托盘显示，优化窗口管理逻辑 fix #98	2025-03-31 23:04:35 +08:00
alger	23b2340169	✨ feat: 优化更新提示对话框，支持文件路径复制和后台下载功能，优化安装流程 feat: #100	2025-03-31 23:01:03 +08:00
Alger	7e826311fe	Merge pull request #104 from algerkong/fix/play-error ✨ feat: 优化音频播放进度更新逻辑，添加拖动滑块时的状态管理和节流处理	2025-03-31 22:58:36 +08:00
alger	cfe197c805	✨ feat: 优化音频播放进度更新逻辑，添加拖动滑块时的状态管理和节流处理	2025-03-31 22:57:00 +08:00
Alger	230132904e	Merge pull request #102 from algerkong/feat/bilibili-play 添加 bilibili资源搜索播放	2025-03-31 22:53:35 +08:00
alger	fb44ae45cc	Merge branch 'dev_electron' into feat/bilibili-play	2025-03-31 22:48:59 +08:00
alger	9ce872eebe	✨ feat: 优化播放条滑块提示样式，添加滑块悬停提示功能	2025-03-30 12:56:42 +08:00
alger	ee6e9d43fd	✨ feat: 添加音频URL过期事件监听，自动重新获取B站和网易云音乐音频URL并恢复播放	2025-03-30 12:40:39 +08:00
alger	1a440fad09	✨ feat: 添加B站音频URL获取功能，优化播放器逻辑，删除不再使用的BilibiliPlayer和MusicBar组件	2025-03-30 01:20:28 +08:00
alger	477f8bb99b	✨ feat: 优化搜索功能，改进搜索历史管理和路由处理逻辑	2025-03-30 00:18:44 +08:00
Alger	56c3ca1cce	Merge pull request #94 from algerkong/feat/del-playlist ✨ feat: 在播放列表中添加歌曲删除功能，优化播放列表管理逻辑	2025-03-29 23:28:47 +08:00
alger	a5f694ea72	✨ feat: 在播放列表中添加歌曲删除功能，优化播放列表管理逻辑 feat: #92	2025-03-29 23:26:26 +08:00
alger	280fec1990	✨ feat: 更新网易云音乐 API 版本，添加 B站视频搜索功能和播放器组件	2025-03-29 23:19:51 +08:00
alger	c5e50c9fd5	✨ feat: 优化歌词窗口字体控制按钮样式	2025-03-29 20:53:47 +08:00
alger	01ccad4df7	✨ feat: 优化首页banner加载逻辑	2025-03-29 20:53:10 +08:00
alger	dfb8f55fba	✨ feat: 添加新的歌手详情页面	2025-03-29 20:52:50 +08:00
alger	2924ad6c18	✨ feat: 增加用户关注列表和用户详情页	2025-03-24 22:54:04 +08:00