✨ feat: 优化B站视频代理URL获取逻辑

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

.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 个最可能的来源，将其与历史错误日志、相关系统状态和预期行为进行交叉验证。如果发现不一致，调整你的假设。
+- 在添加日志时，确保它们被策略性地放置，以便同时确认或排除多个潜在原因。如果日志不支持你的假设，请先提出替代的调试策略，再继续深入分析。
+- 在实施修复之前，先总结问题现象、经过验证的假设，以及预期的日志输出，以确认问题是否真正得到解决。
+
+

.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 实现响应式设计

.eslintrc.cjs

@@ -38,6 +38,7 @@ module.exports = {
   rules: {
     'vue/require-default-prop': 'off',
     'vue/multi-word-component-names': 'off',
+    'no-underscore-dangle': 'off',
     'no-nested-ternary': 'off',
     'no-console': 'off',
     'no-await-in-loop': 'off',

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+name: Deploy Web
+
+on:
+  push:
+    branches:
+      - dev_electron # 或者您的主分支名称
+  workflow_dispatch: # 允许手动触发
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          
+      - name: 创建环境变量文件
+        run: |
+          echo "VITE_API=${{ secrets.VITE_API }}" > .env.production.local
+          echo "VITE_API_MUSIC=${{ secrets.VITE_API_MUSIC }}" >> .env.production.local
+          # 添加其他需要的环境变量
+          cat .env.production.local # 查看创建的文件内容，调试用
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Server
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          key: ${{ secrets.DEPLOY_KEY }}
+          source: "out/renderer/*"
+          target: ${{ secrets.DEPLOY_PATH }}
+          strip_components: 2
+
+      - name: Execute Remote Commands
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          key: ${{ secrets.DEPLOY_KEY }}
+          script: |
+            cd ${{ secrets.DEPLOY_PATH }}
+            echo "部署完成于 $(date)"

.gitignore

@@ -16,9 +16,12 @@ dist.zip
 .vscode
 
 bun.lockb
+bun.lock
 
 .env.*.local
 
 out
 
-.cursorrules
+.cursorrules
+
+.github/deploy_keys

CHANGELOG.md

@@ -1,18 +1,22 @@
 # 更新日志
 
-## v3.8.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))
 
-### ⚡ 优化
-- 优化播放体验，去除歌曲地址缓存
-- 优化播放下一首逻辑
-- 优化播放控制逻辑
-
-
-## 咖啡☕️
-|                                        微信                                 |       |                                       支付宝                                       |
-| :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: |
-| <img src="https://www.ghproxy.cn/https://raw.githubusercontent.com/algerkong/AlgerMusicPlayer/dev_electron/src/renderer/assets/wechat.png" alt="WeChat QRcode" width=200>|           | <img src="https://www.ghproxy.cn/https://raw.githubusercontent.com/algerkong/AlgerMusicPlayer/dev_electron/src/renderer/assets/alipay.png" alt="Wechat QRcode" width=200> |
+### 🐛 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))

README.md

@@ -45,15 +45,16 @@ QQ群:789288579
 - Naive UI - 基于 Vue 3 的组件库
 
 
-## 咖啡☕️
-|                                        微信                                        |                                       支付宝                                       |
+## 赞赏☕️
+[赞赏列表](http://donate.alger.fun/)
+|                                        微信赞赏                                        |                                       支付宝赞赏                                       |
 | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: |
-| <img src="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true" alt="WeChat QRcode" width=200> | <img src="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true" alt="Wechat QRcode" width=200> |
+| <img src="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true" alt="WeChat QRcode" width=200> <br><small>喝点咖啡继续干</small> | <img src="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true" alt="Wechat QRcode" width=200> <br><small>来包辣条吧~</small> |
 
 
-## Stargazers over time
+## 项目统计
 [![Stargazers over time](https://starchart.cc/algerkong/AlgerMusicPlayer.svg?variant=adaptive)](https://starchart.cc/algerkong/AlgerMusicPlayer)
-
+![Alt](https://repobeats.axiom.co/api/embed/c4d01b3632e241c90cdec9508dfde86a7f54c9f5.svg "Repobeats analytics image")
 
 
 

electron.vite.config.ts

@@ -5,6 +5,7 @@ import AutoImport from 'unplugin-auto-import/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import viteCompression from 'vite-plugin-compression';
+import VueDevTools from 'vite-plugin-vue-devtools';
 
 export default defineConfig({
   main: {
@@ -23,7 +24,7 @@ export default defineConfig({
     plugins: [
       vue(),
       viteCompression(),
-      // VueDevTools(),
+      VueDevTools(),
       AutoImport({
         imports: [
           'vue',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "AlgerMusicPlayer",
-  "version": "3.8.0",
+  "version": "4.2.0",
   "description": "Alger Music Player",
   "author": "Alger <algerkc@qq.com>",
   "main": "./out/main/index.js",
@@ -27,7 +27,8 @@
     "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",
+    "vue-i18n": "9"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.2",
@@ -51,9 +52,9 @@
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
     "cross-env": "^7.0.3",
-    "electron": "^31.0.2",
-    "electron-builder": "^24.13.3",
-    "electron-vite": "^2.3.0",
+    "electron": "^35.0.2",
+    "electron-builder": "^25.1.8",
+    "electron-vite": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
@@ -66,23 +67,23 @@
     "lodash": "^4.17.21",
     "marked": "^15.0.4",
     "naive-ui": "^2.41.0",
-    "postcss": "^8.4.49",
+    "pinia": "^3.0.1",
+    "postcss": "^8.5.3",
     "prettier": "^3.3.2",
-    "remixicon": "^4.2.0",
-    "sass": "^1.82.0",
-    "tailwindcss": "^3.4.15",
+    "remixicon": "^4.6.0",
+    "sass": "^1.86.0",
+    "tailwindcss": "^3.4.17",
     "tinycolor2": "^1.6.0",
+    "tunajs": "^1.0.15",
     "typescript": "^5.5.2",
-    "unplugin-auto-import": "^0.18.2",
-    "unplugin-vue-components": "^0.27.4",
-    "vfonts": "^0.1.0",
-    "vite": "^5.3.1",
+    "unplugin-auto-import": "^19.1.1",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^6.2.2",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "7.4.0",
-    "vue": "^3.4.30",
-    "vue-router": "^4.4.3",
-    "vue-tsc": "^2.0.22",
-    "vuex": "^4.1.0"
+    "vite-plugin-vue-devtools": "7.7.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.0.22"
   },
   "build": {
     "appId": "com.alger.music",

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

@@ -0,0 +1,5 @@
+export default {
+  hotSongs: 'Hot Songs',
+  albums: 'Albums',
+  description: 'Artist Introduction'
+};

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

@@ -0,0 +1,52 @@
+export default {
+  play: 'Play',
+  next: 'Next',
+  previous: 'Previous',
+  volume: 'Volume',
+  settings: 'Settings',
+  search: 'Search',
+  loading: 'Loading...',
+  loadingMore: 'Loading more...',
+  alipay: 'Alipay',
+  wechat: 'WeChat Pay',
+  on: 'On',
+  off: 'Off',
+  show: 'Show',
+  hide: 'Hide',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  configure: 'Configure',
+  open: 'Open',
+  modify: 'Modify',
+  success: 'Operation Successful',
+  error: 'Operation Failed',
+  warning: 'Warning',
+  info: 'Info',
+  save: 'Save',
+  delete: 'Delete',
+  refresh: 'Refresh',
+  retry: 'Retry',
+  validation: {
+    required: 'This field is required',
+    invalidInput: 'Invalid input',
+    selectRequired: 'Please select an option',
+    numberRange: 'Please enter a number between {min} and {max}',
+    ipAddress: 'Please enter a valid IP address',
+    portNumber: 'Please enter a valid port number (1-65535)'
+  },
+  viewMore: 'View More',
+  noMore: 'No more',
+  expand: 'Expand',
+  collapse: 'Collapse',
+  songCount: '{count} songs',
+  tray: {
+    show: 'Show',
+    quit: 'Quit',
+    playPause: 'Play/Pause',
+    prev: 'Previous',
+    next: 'Next',
+    pause: 'Pause',
+    play: 'Play'
+  },
+  language: 'Language'
+};

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

@@ -0,0 +1,105 @@
+export default {
+  installApp: {
+    description: 'Install the application on the desktop for a better experience',
+    noPrompt: 'Do not prompt again',
+    install: 'Install now',
+    cancel: 'Cancel',
+    download: 'Download',
+    downloadFailed: 'Download failed',
+    downloadComplete: 'Download complete',
+    downloadProblem: 'Download problem? Go to',
+    downloadProblemLinkText: 'Download the latest version'
+  },
+  playlistDrawer: {
+    title: 'Add to playlist',
+    createPlaylist: 'Create new playlist',
+    cancelCreate: 'Cancel create',
+    create: 'Create',
+    playlistName: 'Playlist name',
+    privatePlaylist: 'Private playlist',
+    publicPlaylist: 'Public playlist',
+    createSuccess: 'Playlist created successfully',
+    createFailed: 'Playlist creation failed',
+    addSuccess: 'Song added successfully',
+    addFailed: 'Song addition failed',
+    private: 'Private',
+    public: 'Public',
+    count: 'songs',
+    loginFirst: 'Please login first',
+    getPlaylistFailed: 'Get playlist failed',
+    inputPlaylistName: 'Please enter the playlist name'
+  },
+  update: {
+    title: 'New version found',
+    currentVersion: 'Current version',
+    cancel: 'Do not update',
+    prepareDownload: 'Preparing to download...',
+    downloading: 'Downloading...',
+    nowUpdate: 'Update now',
+    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',
+    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',
+    alipay: 'Alipay',
+    wechat: 'Wechat',
+    alipayQR: 'Alipay QR code',
+    wechatQR: 'Wechat QR code',
+    coffeeDesc: 'A cup of coffee, a support',
+    coffeeDescLinkText: 'View more',
+    qqGroup: 'QQ group: 789288579',
+    messages: {
+      copySuccess: 'Copied to clipboard'
+    },
+    donateList: 'Buy me a coffee'
+  },
+  playlistType: {
+    title: 'Playlist Category',
+    showAll: 'Show all',
+    hide: 'Hide some'
+  },
+  recommendAlbum: {
+    title: 'Latest Album'
+  },
+  recommendSinger: {
+    title: 'Daily Recommendation',
+    songlist: 'Daily Recommendation List'
+  },
+  recommendSonglist: {
+    title: 'Weekly Hot Music'
+  },
+  searchBar: {
+    login: 'Login',
+    toLogin: 'To Login',
+    logout: 'Logout',
+    set: 'Set',
+    theme: 'Theme',
+    restart: 'Restart',
+    refresh: 'Refresh',
+    currentVersion: 'Current Version',
+    searchPlaceholder: 'Search for something...'
+  },
+  titleBar: {
+    closeTitle: 'Choose how to close',
+    minimizeToTray: 'Minimize to Tray',
+    exitApp: 'Exit App',
+    rememberChoice: 'Remember my choice',
+    closeApp: 'Close App'
+  },
+  userPlayList: {
+    title: "{name}'s Playlist"
+  }
+};

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

@@ -0,0 +1,7 @@
+export default {
+  description:
+    'Your donation will be used to support development and maintenance work, including but not limited to server maintenance, domain name renewal, etc.',
+  message: 'You can leave your email or github name when leaving a message.',
+  refresh: 'Refresh List',
+  toDonateList: 'Buy me a coffee'
+};

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

@@ -0,0 +1,36 @@
+export default {
+  title: 'Download Manager',
+  localMusic: 'Local Music',
+  tabs: {
+    downloading: 'Downloading',
+    downloaded: 'Downloaded'
+  },
+  empty: {
+    noTasks: 'No download tasks',
+    noDownloaded: 'No downloaded songs'
+  },
+  progress: {
+    total: 'Total Progress: {progress}%'
+  },
+  status: {
+    downloading: 'Downloading',
+    completed: 'Completed',
+    failed: 'Failed',
+    unknown: 'Unknown'
+  },
+  artist: {
+    unknown: 'Unknown Artist'
+  },
+  delete: {
+    title: 'Delete Confirmation',
+    message: 'Are you sure you want to delete "{filename}"? This action cannot be undone.',
+    confirm: 'Delete',
+    cancel: 'Cancel',
+    success: 'Successfully deleted',
+    failed: 'Failed to delete'
+  },
+  message: {
+    downloadComplete: '{filename} download completed',
+    downloadFailed: '{filename} download failed: {error}'
+  }
+};

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

@@ -0,0 +1,15 @@
+export default {
+  title: 'Favorites',
+  count: 'Total {count}',
+  batchDownload: 'Batch Download',
+  selectAll: 'All',
+  download: 'Download ({count})',
+  cancel: 'Cancel',
+  emptyTip: 'No favorite songs yet',
+  viewMore: 'View More',
+  noMore: 'No more',
+  downloadSuccess: 'Download completed',
+  downloadFailed: 'Download failed',
+  downloading: 'Downloading, please wait...',
+  selectSongsFirst: 'Please select songs to download first'
+};

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

@@ -0,0 +1,5 @@
+export default {
+  title: 'Play History',
+  playCount: '{count}',
+  getHistoryFailed: 'Failed to get play history'
+};

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

@@ -0,0 +1,29 @@
+import artist from './artist';
+import common from './common';
+import comp from './comp';
+import donation from './donation';
+import download from './download';
+import favorite from './favorite';
+import history from './history';
+import login from './login';
+import player from './player';
+import search from './search';
+import settings from './settings';
+import songItem from './songItem';
+import user from './user';
+
+export default {
+  common,
+  donation,
+  favorite,
+  history,
+  login,
+  player,
+  search,
+  settings,
+  songItem,
+  user,
+  download,
+  comp,
+  artist
+};

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

@@ -0,0 +1,22 @@
+export default {
+  title: {
+    qr: 'QR Code Login',
+    phone: 'Phone Login'
+  },
+  qrTip: 'Scan with NetEase Cloud Music APP',
+  phoneTip: 'Login with NetEase Cloud account',
+  placeholder: {
+    phone: 'Phone Number',
+    password: 'Password'
+  },
+  button: {
+    login: 'Login',
+    switchToQr: 'QR Code Login',
+    switchToPhone: 'Phone Login'
+  },
+  message: {
+    loginSuccess: 'Login successful',
+    loadError: 'Error loading login information',
+    qrCheckError: 'Error checking QR code status'
+  }
+};

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

@@ -0,0 +1,77 @@
+export default {
+  nowPlaying: 'Now Playing',
+  playlist: 'Playlist',
+  lyrics: 'Lyrics',
+  previous: 'Previous',
+  play: 'Play',
+  pause: 'Pause',
+  next: 'Next',
+  volumeUp: 'Volume Up',
+  volumeDown: 'Volume Down',
+  mute: 'Mute',
+  unmute: 'Unmute',
+  songNum: 'Song Number: {num}',
+  playFailed: 'Play Failed, Play Next Song',
+  playMode: {
+    sequence: 'Sequence',
+    loop: 'Loop',
+    random: 'Random'
+  },
+  fullscreen: {
+    enter: 'Enter Fullscreen',
+    exit: 'Exit Fullscreen'
+  },
+  close: 'Close',
+  modeHint: {
+    single: 'Single',
+    list: 'Next'
+  },
+  lrc: {
+    noLrc: 'No lyrics, please enjoy'
+  },
+  playBar: {
+    expand: 'Expand Lyrics',
+    collapse: 'Collapse Lyrics',
+    like: 'Like',
+    lyric: 'Lyric',
+    noSongPlaying: 'No song playing',
+    eq: 'Equalizer',
+    playList: 'Play List',
+    playMode: {
+      sequence: 'Sequence',
+      loop: 'Loop',
+      random: 'Random'
+    },
+    play: 'Play',
+    pause: 'Pause',
+    prev: 'Previous',
+    next: 'Next',
+    volume: 'Volume',
+    favorite: 'Favorite {name}',
+    unFavorite: 'Unfavorite {name}'
+  },
+  eq: {
+    title: 'Equalizer',
+    reset: 'Reset',
+    on: 'On',
+    off: 'Off',
+    bass: 'Bass',
+    midrange: 'Midrange',
+    treble: 'Treble',
+    presets: {
+      flat: 'Flat',
+      pop: 'Pop',
+      rock: 'Rock',
+      classical: 'Classical',
+      jazz: 'Jazz',
+      electronic: 'Electronic',
+      hiphop: 'Hip-Hop',
+      rb: 'R&B',
+      metal: 'Metal',
+      vocal: 'Vocal',
+      dance: 'Dance',
+      acoustic: 'Acoustic',
+      custom: 'Custom'
+    }
+  }
+};

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

@@ -0,0 +1,19 @@
+export default {
+  title: {
+    hotSearch: 'Hot Search',
+    searchList: 'Search Results',
+    searchHistory: 'Search History'
+  },
+  button: {
+    clear: 'Clear',
+    back: 'Back'
+  },
+  loading: {
+    more: 'Loading...',
+    failed: 'Search failed'
+  },
+  noMore: 'No more results',
+  error: {
+    searchFailed: 'Search failed'
+  }
+};

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

@@ -0,0 +1,210 @@
+export default {
+  theme: 'Theme',
+  language: 'Language',
+  regard: 'About',
+  logout: 'Logout',
+  sections: {
+    basic: 'Basic Settings',
+    playback: 'Playback Settings',
+    application: 'Application Settings',
+    network: 'Network Settings',
+    system: 'System Management',
+    donation: 'Donation',
+    regard: 'About'
+  },
+  basic: {
+    themeMode: 'Theme Mode',
+    themeModeDesc: 'Switch between light/dark theme',
+    language: 'Language Settings',
+    languageDesc: 'Change display language',
+    font: 'Font Settings',
+    fontDesc: 'Select fonts, prioritize fonts in order',
+    fontScope: {
+      global: 'Global',
+      lyric: 'Lyrics Only'
+    },
+    animation: 'Animation Speed',
+    animationDesc: 'Enable/disable animations',
+    animationSpeed: {
+      slow: 'Very Slow',
+      normal: 'Normal',
+      fast: 'Very Fast'
+    },
+    fontPreview: {
+      title: 'Font Preview',
+      chinese: 'Chinese',
+      english: 'English',
+      japanese: 'Japanese',
+      korean: 'Korean',
+      chineseText: '静夜思 床前明月光 疑是地上霜',
+      englishText: 'The quick brown fox jumps over the lazy dog',
+      japaneseText: 'あいうえお かきくけこ さしすせそ',
+      koreanText: '가나다라마 바사아자차 카타파하'
+    }
+  },
+  playback: {
+    quality: 'Audio Quality',
+    qualityDesc: 'Select music playback quality (VIP)',
+    qualityOptions: {
+      standard: 'Standard',
+      higher: 'Higher',
+      exhigh: 'Extreme',
+      lossless: 'Lossless',
+      hires: 'Hi-Res',
+      jyeffect: 'HD Surround',
+      sky: 'Immersive',
+      dolby: 'Dolby Atmos',
+      jymaster: 'Master'
+    },
+    autoPlay: 'Auto Play',
+    autoPlayDesc: 'Auto resume playback when reopening the app'
+  },
+  application: {
+    closeAction: 'Close Action',
+    closeActionDesc: 'Choose action when closing window',
+    closeOptions: {
+      ask: 'Ask Every Time',
+      minimize: 'Minimize to Tray',
+      close: 'Exit Directly'
+    },
+    shortcut: 'Shortcut Settings',
+    shortcutDesc: 'Customize global shortcuts',
+    download: 'Download Management',
+    downloadDesc: 'Always show download list button',
+    downloadPath: 'Download Directory',
+    downloadPathDesc: 'Choose download location for music files'
+  },
+  network: {
+    apiPort: 'Music API Port',
+    apiPortDesc: 'Restart required after modification',
+    proxy: 'Proxy Settings',
+    proxyDesc: 'Enable proxy when unable to access music',
+    proxyHost: 'Proxy Host',
+    proxyHostPlaceholder: 'Enter proxy host',
+    proxyPort: 'Proxy Port',
+    proxyPortPlaceholder: 'Enter proxy port',
+    realIP: 'RealIP Settings',
+    realIPDesc: 'Use realIP parameter with mainland China IP to resolve access restrictions abroad',
+    messages: {
+      proxySuccess: 'Proxy settings saved, restart required to take effect',
+      proxyError: 'Please check your input',
+      realIPSuccess: 'RealIP settings saved',
+      realIPError: 'Please enter a valid IP address'
+    }
+  },
+  system: {
+    cache: 'Cache Management',
+    cacheDesc: 'Clear cache',
+    cacheClearTitle: 'Select cache types to clear:',
+    cacheTypes: {
+      history: {
+        label: 'Play History',
+        description: 'Clear played song records'
+      },
+      favorite: {
+        label: 'Favorites',
+        description: 'Clear local favorite songs (cloud favorites not affected)'
+      },
+      user: {
+        label: 'User Data',
+        description: 'Clear login info and user-related data'
+      },
+      settings: {
+        label: 'App Settings',
+        description: 'Clear all custom app settings'
+      },
+      downloads: {
+        label: 'Download History',
+        description: 'Clear download history (downloaded files not affected)'
+      },
+      resources: {
+        label: 'Music Resources',
+        description: 'Clear cached music files, lyrics and other resources'
+      },
+      lyrics: {
+        label: 'Lyrics Resources',
+        description: 'Clear cached lyrics resources'
+      }
+    },
+    restart: 'Restart',
+    restartDesc: 'Restart application',
+    messages: {
+      clearSuccess: 'Cache cleared successfully, some settings will take effect after restart'
+    }
+  },
+  about: {
+    version: 'Version',
+    checkUpdate: 'Check for Updates',
+    checking: 'Checking...',
+    latest: 'Already latest version',
+    hasUpdate: 'New version available',
+    gotoUpdate: 'Go to Update',
+    gotoGithub: 'Go to Github',
+    author: 'Author',
+    authorDesc: 'algerkong Give a star🌟',
+    messages: {
+      checkError: 'Failed to check for updates, please try again later'
+    }
+  },
+  validation: {
+    selectProxyProtocol: 'Please select proxy protocol',
+    proxyHost: 'Please enter proxy host',
+    portNumber: 'Please enter a valid port number (1-65535)'
+  },
+  lyricSettings: {
+    title: 'Lyric Settings',
+    pureMode: 'Pure Mode',
+    hideCover: 'Hide Cover',
+    centerDisplay: 'Center Display',
+    showTranslation: 'Show Translation',
+    hidePlayBar: 'Hide Play Bar',
+    fontSize: 'Font Size',
+    letterSpacing: 'Letter Spacing',
+    lineHeight: 'Line Height',
+    backgroundTheme: 'Background Theme',
+    fontSizeMarks: {
+      small: 'Small',
+      medium: 'Medium',
+      large: 'Large'
+    },
+    letterSpacingMarks: {
+      compact: 'Compact',
+      default: 'Default',
+      loose: 'Loose'
+    },
+    lineHeightMarks: {
+      compact: 'Compact',
+      default: 'Default',
+      loose: 'Loose'
+    },
+    themeOptions: {
+      default: 'Default',
+      light: 'Light',
+      dark: 'Dark'
+    },
+    hideMiniPlayBar: 'Hide Mini Play Bar',
+    hideLyrics: 'Hide Lyrics'
+  },
+  shortcutSettings: {
+    title: 'Shortcut Settings',
+    shortcut: 'Shortcut',
+    shortcutDesc: 'Customize global shortcuts',
+    shortcutConflict: 'Shortcut Conflict',
+    inputPlaceholder: 'Click to input shortcut',
+    resetShortcuts: 'Reset',
+    togglePlay: 'Play/Pause',
+    prevPlay: 'Previous',
+    nextPlay: 'Next',
+    volumeUp: 'Volume Up',
+    volumeDown: 'Volume Down',
+    toggleFavorite: 'Favorite/Unfavorite',
+    toggleWindow: 'Show/Hide Window',
+    messages: {
+      resetSuccess: 'Shortcuts reset successfully, please save',
+      conflict: 'Shortcut conflict, please reset',
+      saveSuccess: 'Shortcuts saved successfully',
+      saveError: 'Failed to save shortcuts',
+      cancelEdit: 'Edit cancelled'
+    }
+  }
+};

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

@@ -0,0 +1,18 @@
+export default {
+  menu: {
+    play: 'Play',
+    playNext: 'Play Next',
+    download: 'Download',
+    addToPlaylist: 'Add to Playlist',
+    favorite: 'Like',
+    unfavorite: 'Unlike',
+    removeFromPlaylist: 'Remove from Playlist'
+  },
+  message: {
+    downloading: 'Downloading, please wait...',
+    downloadFailed: 'Download failed',
+    downloadQueued: 'Added to download queue',
+    addedToNextPlay: 'Added to play next',
+    getUrlFailed: 'Failed to get music download URL'
+  }
+};

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

@@ -0,0 +1,42 @@
+export default {
+  profile: {
+    followers: 'Followers',
+    following: 'Following',
+    level: 'Level'
+  },
+  playlist: {
+    created: 'Created Playlists',
+    trackCount: '{count} tracks',
+    playCount: 'Played {count} times'
+  },
+  ranking: {
+    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',
+    deleteFailed: 'Failed to delete'
+  }
+};

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

@@ -0,0 +1,5 @@
+export default {
+  hotSongs: '热门歌曲',
+  albums: '专辑',
+  description: '艺人介绍'
+};

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

@@ -0,0 +1,51 @@
+export default {
+  play: '播放',
+  next: '下一首',
+  previous: '上一首',
+  volume: '音量',
+  settings: '设置',
+  search: '搜索',
+  loading: '加载中...',
+  loadingMore: '加载更多...',
+  alipay: '支付宝',
+  wechat: '微信支付',
+  on: '开启',
+  off: '关闭',
+  show: '显示',
+  hide: '隐藏',
+  confirm: '确认',
+  cancel: '取消',
+  configure: '配置',
+  open: '打开',
+  modify: '修改',
+  success: '操作成功',
+  error: '操作失败',
+  warning: '警告',
+  info: '提示',
+  save: '保存',
+  delete: '删除',
+  refresh: '刷新',
+  retry: '重试',
+  validation: {
+    required: '此项是必填的',
+    invalidInput: '输入无效',
+    selectRequired: '请选择一个选项',
+    numberRange: '请输入 {min} 到 {max} 之间的数字'
+  },
+  viewMore: '查看更多',
+  noMore: '没有更多了',
+  selectAll: '全选',
+  expand: '展开',
+  collapse: '收起',
+  songCount: '{count}首',
+  language: '语言',
+  tray: {
+    show: '显示',
+    quit: '退出',
+    playPause: '播放/暂停',
+    prev: '上一首',
+    next: '下一首',
+    pause: '暂停',
+    play: '播放'
+  }
+};

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

@@ -0,0 +1,103 @@
+export default {
+  installApp: {
+    description: '在桌面安装应用，获得更好的体验',
+    noPrompt: '不再提示',
+    install: '立即安装',
+    cancel: '暂不安装',
+    download: '下载',
+    downloadFailed: '下载失败',
+    downloadComplete: '下载完成',
+    downloadProblem: '下载遇到问题？去',
+    downloadProblemLinkText: '下载最新版本'
+  },
+  playlistDrawer: {
+    title: '添加到歌单',
+    createPlaylist: '创建新歌单',
+    cancelCreate: '取消创建',
+    create: '创建',
+    playlistName: '歌单名称',
+    privatePlaylist: '私密歌单',
+    publicPlaylist: '公开歌单',
+    createSuccess: '歌单创建成功',
+    createFailed: '歌单创建失败',
+    addSuccess: '歌曲添加成功',
+    addFailed: '歌曲添加失败',
+    private: '私密',
+    public: '公开',
+    count: '首歌曲',
+    loginFirst: '请先登录',
+    getPlaylistFailed: '获取歌单失败',
+    inputPlaylistName: '请输入歌单名称'
+  },
+  update: {
+    title: '发现新版本',
+    currentVersion: '当前版本',
+    cancel: '暂不更新',
+    prepareDownload: '准备下载...',
+    downloading: '下载中...',
+    nowUpdate: '立即更新',
+    downloadFailed: '下载失败，请重试或手动下载',
+    startFailed: '启动下载失败，请重试或手动下载',
+    noDownloadUrl: '未找到适合当前系统的安装包，请手动下载',
+    installConfirmTitle: '安装更新',
+    installConfirmContent: '是否关闭应用并安装更新？',
+    manualInstallTip: '如果关闭应用后没有正常弹出安装程序，请至下载文件夹查找文件并手动打开。',
+    yesInstall: '立即安装',
+    noThanks: '稍后安装',
+    fileLocation: '文件位置',
+    copy: '复制路径',
+    copySuccess: '路径已复制到剪贴板',
+    copyFailed: '复制失败',
+    backgroundDownload: '后台下载'
+  },
+  coffee: {
+    title: '请我喝咖啡',
+    alipay: '支付宝',
+    wechat: '微信支付',
+    alipayQR: '支付宝收款码',
+    wechatQR: '微信收款码',
+    coffeeDesc: '一杯咖啡，一份支持',
+    coffeeDescLinkText: '查看更多',
+    qqGroup: 'QQ群：789288579',
+    messages: {
+      copySuccess: '已复制到剪贴板'
+    },
+    donateList: '请我喝咖啡'
+  },
+  playlistType: {
+    title: '歌单分类',
+    showAll: '显示全部',
+    hide: '隐藏一些'
+  },
+  recommendAlbum: {
+    title: '最新专辑'
+  },
+  recommendSinger: {
+    title: '每日推荐',
+    songlist: '每日推荐列表'
+  },
+  recommendSonglist: {
+    title: '本周最热音乐'
+  },
+  searchBar: {
+    login: '登录',
+    toLogin: '去登录',
+    logout: '退出登录',
+    set: '设置',
+    theme: '主题',
+    restart: '重启',
+    refresh: '刷新',
+    currentVersion: '当前版本',
+    searchPlaceholder: '搜索点什么吧...'
+  },
+  titleBar: {
+    closeTitle: '请选择关闭方式',
+    minimizeToTray: '最小化到托盘',
+    exitApp: '退出应用',
+    rememberChoice: '记住我的选择',
+    closeApp: '关闭应用'
+  },
+  userPlayList: {
+    title: '{name}的常听'
+  }
+};

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

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

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

@@ -0,0 +1,36 @@
+export default {
+  title: '下载管理',
+  localMusic: '本地音乐',
+  tabs: {
+    downloading: '下载中',
+    downloaded: '已下载'
+  },
+  empty: {
+    noTasks: '暂无下载任务',
+    noDownloaded: '暂无已下载歌曲'
+  },
+  progress: {
+    total: '总进度: {progress}%'
+  },
+  status: {
+    downloading: '下载中',
+    completed: '已完成',
+    failed: '失败',
+    unknown: '未知'
+  },
+  artist: {
+    unknown: '未知歌手'
+  },
+  delete: {
+    title: '删除确认',
+    message: '确定要删除歌曲 "{filename}" 吗？此操作不可恢复。',
+    confirm: '确定删除',
+    cancel: '取消',
+    success: '删除成功',
+    failed: '删除失败'
+  },
+  message: {
+    downloadComplete: '{filename} 下载完成',
+    downloadFailed: '{filename} 下载失败: {error}'
+  }
+};

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

@@ -0,0 +1,11 @@
+export default {
+  title: '我的收藏',
+  count: '共 {count} 首',
+  batchDownload: '批量下载',
+  download: '下载 ({count})',
+  emptyTip: '还没有收藏歌曲',
+  downloadSuccess: '下载完成',
+  downloadFailed: '下载失败',
+  downloading: '正在下载中，请稍候...',
+  selectSongsFirst: '请先选择要下载的歌曲'
+};

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

@@ -0,0 +1,5 @@
+export default {
+  title: '播放历史',
+  playCount: '{count}',
+  getHistoryFailed: '获取历史记录失败'
+};

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

@@ -0,0 +1,29 @@
+import artist from './artist';
+import common from './common';
+import comp from './comp';
+import donation from './donation';
+import download from './download';
+import favorite from './favorite';
+import history from './history';
+import login from './login';
+import player from './player';
+import search from './search';
+import settings from './settings';
+import songItem from './songItem';
+import user from './user';
+
+export default {
+  common,
+  donation,
+  favorite,
+  history,
+  login,
+  player,
+  search,
+  settings,
+  songItem,
+  user,
+  download,
+  comp,
+  artist
+};

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

@@ -0,0 +1,22 @@
+export default {
+  title: {
+    qr: '扫码登录',
+    phone: '手机号登录'
+  },
+  qrTip: '使用网易云APP扫码登录',
+  phoneTip: '使用网易云账号登录',
+  placeholder: {
+    phone: '手机号',
+    password: '密码'
+  },
+  button: {
+    login: '登录',
+    switchToQr: '扫码登录',
+    switchToPhone: '手机号登录'
+  },
+  message: {
+    loginSuccess: '登录成功',
+    loadError: '加载登录信息时出错',
+    qrCheckError: '检查二维码状态时出错'
+  }
+};

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

@@ -0,0 +1,78 @@
+export default {
+  nowPlaying: '正在播放',
+  playlist: '播放列表',
+  lyrics: '歌词',
+  previous: '上一个',
+  play: '播放',
+  pause: '暂停',
+  next: '下一个',
+  volumeUp: '音量增加',
+  volumeDown: '音量减少',
+  mute: '静音',
+  unmute: '取消静音',
+  songNum: '歌曲总数：{num}',
+  playFailed: '当前歌曲播放失败，播放下一首',
+  playMode: {
+    sequence: '顺序播放',
+    loop: '循环播放',
+    random: '随机播放'
+  },
+  fullscreen: {
+    enter: '全屏',
+    exit: '退出全屏'
+  },
+  close: '关闭',
+  modeHint: {
+    single: '单曲循环',
+    list: '自动播放下一个'
+  },
+  lrc: {
+    noLrc: '暂无歌词, 请欣赏'
+  },
+  playBar: {
+    expand: '展开歌词',
+    collapse: '收起歌词',
+    like: '喜欢',
+    lyric: '歌词',
+    noSongPlaying: '没有正在播放的歌曲',
+    eq: '均衡器',
+    playList: '播放列表',
+    playMode: {
+      sequence: '顺序播放',
+      loop: '循环播放',
+      random: '随机播放'
+    },
+    play: '开始播放',
+    pause: '暂停播放',
+    prev: '上一首',
+    next: '下一首',
+    volume: '音量',
+    favorite: '已收藏{name}',
+    unFavorite: '已取消收藏{name}',
+    miniPlayBar: '迷你播放栏'
+  },
+  eq: {
+    title: '均衡器',
+    reset: '重置',
+    on: '开启',
+    off: '关闭',
+    bass: '低音',
+    midrange: '中音',
+    treble: '高音',
+    presets: {
+      flat: '平坦',
+      pop: '流行',
+      rock: '摇滚',
+      classical: '古典',
+      jazz: '爵士',
+      electronic: '电子',
+      hiphop: '嘻哈',
+      rb: 'R&B',
+      metal: '金属',
+      vocal: '人声',
+      dance: '舞曲',
+      acoustic: '原声',
+      custom: '自定义'
+    }
+  }
+};

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

@@ -0,0 +1,19 @@
+export default {
+  title: {
+    hotSearch: '热搜列表',
+    searchList: '搜索列表',
+    searchHistory: '搜索历史'
+  },
+  button: {
+    clear: '清空',
+    back: '返回'
+  },
+  loading: {
+    more: '加载中...',
+    failed: '搜索失败'
+  },
+  noMore: '没有更多了',
+  error: {
+    searchFailed: '搜索失败'
+  }
+};

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

@@ -0,0 +1,210 @@
+export default {
+  theme: '主题',
+  language: '语言',
+  regard: '关于',
+  logout: '退出登录',
+  sections: {
+    basic: '基础设置',
+    playback: '播放设置',
+    application: '应用设置',
+    network: '网络设置',
+    system: '系统管理',
+    donation: '捐赠支持',
+    regard: '关于'
+  },
+  basic: {
+    themeMode: '主题模式',
+    themeModeDesc: '切换日间/夜间主题',
+    language: '语言设置',
+    languageDesc: '切换显示语言',
+    font: '字体设置',
+    fontDesc: '选择字体，优先使用排在前面的字体',
+    fontScope: {
+      global: '全局',
+      lyric: '仅歌词'
+    },
+    animation: '动画速度',
+    animationDesc: '是否开启动画',
+    animationSpeed: {
+      slow: '极慢',
+      normal: '正常',
+      fast: '极快'
+    },
+    fontPreview: {
+      title: '字体预览',
+      chinese: '中文',
+      english: 'English',
+      japanese: '日本語',
+      korean: '한국어',
+      chineseText: '静夜思 床前明月光 疑是地上霜',
+      englishText: 'The quick brown fox jumps over the lazy dog',
+      japaneseText: 'あいうえお かきくけこ さしすせそ',
+      koreanText: '가나다라마 바사아자차 카타파하'
+    }
+  },
+  playback: {
+    quality: '音质设置',
+    qualityDesc: '选择音乐播放音质（VIP）',
+    qualityOptions: {
+      standard: '标准',
+      higher: '较高',
+      exhigh: '极高',
+      lossless: '无损',
+      hires: 'Hi-Res',
+      jyeffect: '高清环绕声',
+      sky: '沉浸环绕声',
+      dolby: '杜比全景声',
+      jymaster: '超清母带'
+    },
+    autoPlay: '自动播放',
+    autoPlayDesc: '重新打开应用时是否自动继续播放'
+  },
+  application: {
+    closeAction: '关闭行为',
+    closeActionDesc: '选择关闭窗口时的行为',
+    closeOptions: {
+      ask: '每次询问',
+      minimize: '最小化到托盘',
+      close: '直接退出'
+    },
+    shortcut: '快捷键设置',
+    shortcutDesc: '自定义全局快捷键',
+    download: '下载管理',
+    downloadDesc: '是否始终显示下载列表按钮',
+    downloadPath: '下载目录',
+    downloadPathDesc: '选择音乐文件的下载位置'
+  },
+  network: {
+    apiPort: '音乐API端口',
+    apiPortDesc: '修改后需要重启应用',
+    proxy: '代理设置',
+    proxyDesc: '无法访问音乐时可以开启代理',
+    proxyHost: '代理地址',
+    proxyHostPlaceholder: '请输入代理地址',
+    proxyPort: '代理端口',
+    proxyPortPlaceholder: '请输入代理端口',
+    realIP: 'realIP设置',
+    realIPDesc: '由于限制,此项目在国外使用会受到限制可使用realIP参数,传进国内IP解决',
+    messages: {
+      proxySuccess: '代理设置已保存，重启应用后生效',
+      proxyError: '请检查输入是否正确',
+      realIPSuccess: '真实IP设置已保存',
+      realIPError: '请输入有效的IP地址'
+    }
+  },
+  system: {
+    cache: '缓存管理',
+    cacheDesc: '清除缓存',
+    cacheClearTitle: '请选择要清除的缓存类型：',
+    cacheTypes: {
+      history: {
+        label: '播放历史',
+        description: '清除播放过的歌曲记录'
+      },
+      favorite: {
+        label: '收藏记录',
+        description: '清除本地收藏的歌曲记录(不会影响云端收藏)'
+      },
+      user: {
+        label: '用户数据',
+        description: '清除登录信息和用户相关数据'
+      },
+      settings: {
+        label: '应用设置',
+        description: '清除应用的所有自定义设置'
+      },
+      downloads: {
+        label: '下载记录',
+        description: '清除下载历史记录(不会删除已下载的文件)'
+      },
+      resources: {
+        label: '音乐资源',
+        description: '清除已加载的音乐文件、歌词等资源缓存'
+      },
+      lyrics: {
+        label: '歌词资源',
+        description: '清除已加载的歌词资源缓存'
+      }
+    },
+    restart: '重启',
+    restartDesc: '重启应用',
+    messages: {
+      clearSuccess: '清除成功，部分设置在重启后生效'
+    }
+  },
+  about: {
+    version: '版本',
+    checkUpdate: '检查更新',
+    checking: '检查中...',
+    latest: '当前已是最新版本',
+    hasUpdate: '发现新版本',
+    gotoUpdate: '前往更新',
+    gotoGithub: '前往 Github',
+    author: '作者',
+    authorDesc: 'algerkong 点个star🌟呗',
+    messages: {
+      checkError: '检查更新失败，请稍后重试'
+    }
+  },
+  validation: {
+    selectProxyProtocol: '请选择代理协议',
+    proxyHost: '请输入代理地址',
+    portNumber: '请输入有效的端口号(1-65535)'
+  },
+  lyricSettings: {
+    title: '页面设置',
+    pureMode: '纯净模式',
+    hideCover: '隐藏封面',
+    centerDisplay: '居中显示',
+    showTranslation: '显示翻译',
+    hidePlayBar: '隐藏播放栏',
+    fontSize: '字体大小',
+    fontSizeMarks: {
+      small: '小',
+      medium: '中',
+      large: '大'
+    },
+    letterSpacing: '文字间距',
+    letterSpacingMarks: {
+      compact: '紧凑',
+      default: '默认',
+      loose: '宽松'
+    },
+    lineHeight: '行高',
+    lineHeightMarks: {
+      compact: '紧凑',
+      default: '默认',
+      loose: '宽松'
+    },
+    backgroundTheme: '背景主题',
+    themeOptions: {
+      default: '默认',
+      light: '亮色',
+      dark: '暗色'
+    },
+    hideMiniPlayBar: '隐藏迷你播放栏',
+    hideLyrics: '隐藏歌词'
+  },
+  shortcutSettings: {
+    title: '快捷键设置',
+    shortcut: '快捷键',
+    shortcutDesc: '自定义快捷键',
+    shortcutConflict: '快捷键冲突',
+    inputPlaceholder: '点击输入快捷键',
+    resetShortcuts: '恢复默认',
+    togglePlay: '播放/暂停',
+    prevPlay: '上一首',
+    nextPlay: '下一首',
+    volumeUp: '音量增加',
+    volumeDown: '音量减少',
+    toggleFavorite: '收藏/取消收藏',
+    toggleWindow: '显示/隐藏窗口',
+    messages: {
+      resetSuccess: '已恢复默认快捷键，请记得保存',
+      conflict: '存在冲突的快捷键，请重新设置',
+      saveSuccess: '快捷键设置已保存',
+      saveError: '保存快捷键失败，请重试',
+      cancelEdit: '已取消修改'
+    }
+  }
+};

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

@@ -0,0 +1,18 @@
+export default {
+  menu: {
+    play: '播放',
+    playNext: '下一首播放',
+    download: '下载歌曲',
+    addToPlaylist: '添加到歌单',
+    favorite: '喜欢',
+    unfavorite: '取消喜欢',
+    removeFromPlaylist: '从歌单中删除'
+  },
+  message: {
+    downloading: '正在下载中，请稍候...',
+    downloadFailed: '下载失败',
+    downloadQueued: '已加入下载队列',
+    addedToNextPlay: '已添加到下一首播放',
+    getUrlFailed: '获取音乐下载地址失败'
+  }
+};

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

@@ -0,0 +1,42 @@
+export default {
+  profile: {
+    followers: '粉丝',
+    following: '关注',
+    level: '等级'
+  },
+  playlist: {
+    created: '创建的歌单',
+    trackCount: '{count}首',
+    playCount: '播放{count}次'
+  },
+  ranking: {
+    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: '删除成功',
+    deleteFailed: '删除失败'
+  }
+};

src/i18n/main.ts

@@ -0,0 +1,38 @@
+import enUS from './lang/en-US';
+import zhCN from './lang/zh-CN';
+
+const messages = {
+  'zh-CN': zhCN,
+  'en-US': enUS
+} as const;
+
+type Language = keyof typeof messages;
+
+// 为主进程提供一个简单的 i18n 实现
+const mainI18n = {
+  global: {
+    currentLocale: 'zh-CN' as Language,
+    get locale() {
+      return this.currentLocale;
+    },
+    set locale(value: Language) {
+      this.currentLocale = value;
+    },
+    t(key: string) {
+      const keys = key.split('.');
+      let current: any = messages[this.currentLocale];
+      for (const k of keys) {
+        if (current[k] === undefined) {
+          // 如果找不到翻译，返回键名
+          return key;
+        }
+        current = current[k];
+      }
+      return current;
+    },
+    messages
+  }
+};
+
+export type { Language };
+export default mainI18n;

src/i18n/renderer.ts

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n';
+
+import enUS from './lang/en-US';
+import zhCN from './lang/zh-CN';
+
+const messages = {
+  'zh-CN': zhCN,
+  'en-US': enUS
+};
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  fallbackLocale: 'en-US',
+  messages,
+  globalInjection: true,
+  silentTranslationWarn: true,
+  silentFallbackWarn: true
+});
+
+export default i18n;

src/main/index.ts

@@ -2,12 +2,15 @@ import { electronApp, optimizer } from '@electron-toolkit/utils';
 import { app, ipcMain, nativeImage } from 'electron';
 import { join } from 'path';
 
+import type { Language } from '../i18n/main';
+import i18n from '../i18n/main';
 import { loadLyricWindow } from './lyric';
 import { initializeConfig } from './modules/config';
 import { initializeFileManager } from './modules/fileManager';
 import { initializeFonts } from './modules/fonts';
 import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
-import { initializeTray } from './modules/tray';
+import { initializeTray, updateCurrentSong, updatePlayState, updateTrayMenu } from './modules/tray';
+import { setupUpdateHandlers } from './modules/update';
 import { createMainWindow, initializeWindowManager } from './modules/window';
 import { startMusicApi } from './server';
 
@@ -26,7 +29,14 @@ let mainWindow: Electron.BrowserWindow;
 // 初始化应用
 function initialize() {
   // 初始化配置管理
-  initializeConfig();
+  const store = initializeConfig();
+
+  // 设置初始语言
+  const savedLanguage = store.get('set.language') as Language;
+  if (savedLanguage) {
+    i18n.global.locale = savedLanguage;
+  }
+
   // 初始化文件管理
   initializeFileManager();
   // 初始化窗口管理
@@ -48,6 +58,9 @@ function initialize() {
 
   // 初始化快捷键
   initializeShortcuts(mainWindow);
+
+  // 初始化更新处理程序
+  setupUpdateHandlers(mainWindow);
 }
 
 // 检查是否为第一个实例
@@ -91,6 +104,26 @@ if (!isSingleInstance) {
     registerShortcuts(mainWindow);
   });
 
+  // 监听语言切换
+  ipcMain.on('change-language', (_, locale: Language) => {
+    // 更新主进程的语言设置
+    i18n.global.locale = locale;
+    // 更新托盘菜单
+    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') {

src/main/lyric.ts

@@ -5,6 +5,12 @@ import path, { join } from 'path';
 const store = new Store();
 let lyricWindow: BrowserWindow | null = null;
 
+// 跟踪拖动状态
+let isDragging = false;
+
+// 添加窗口大小变化防护
+let originalSize = { width: 0, height: 0 };
+
 const createWin = () => {
   console.log('Creating lyric window');
 
@@ -15,26 +21,73 @@ const createWin = () => {
       y?: number;
       width?: number;
       height?: number;
+      displayId?: number;
     }) || {};
-  const { x, y, width, height } = windowBounds;
 
-  // 获取屏幕尺寸
-  const { width: screenWidth, height: screenHeight } = screen.getPrimaryDisplay().workAreaSize;
+  const { x, y, width, height, displayId } = windowBounds;
 
-  // 验证保存的位置是否有效
-  const validPosition =
-    x !== undefined && y !== undefined && x >= 0 && y >= 0 && x < screenWidth && y < screenHeight;
+  // 获取所有屏幕的信息
+  const displays = screen.getAllDisplays();
+  let isValidPosition = false;
+  let targetDisplay = displays[0]; // 默认使用主显示器
+
+  // 如果有显示器ID，尝试按ID匹配
+  if (displayId) {
+    const matchedDisplay = displays.find((d) => d.id === displayId);
+    if (matchedDisplay) {
+      targetDisplay = matchedDisplay;
+      console.log('Found matching display by ID:', displayId);
+    }
+  }
+
+  // 验证位置是否在任何显示器的范围内
+  if (x !== undefined && y !== undefined) {
+    for (const display of displays) {
+      const { bounds } = display;
+      if (
+        x >= bounds.x - 50 && // 允许一点偏移，避免卡在边缘
+        x < bounds.x + bounds.width + 50 &&
+        y >= bounds.y - 50 &&
+        y < bounds.y + bounds.height + 50
+      ) {
+        isValidPosition = true;
+        targetDisplay = display;
+        break;
+      }
+    }
+  }
+
+  // 确保宽高合理
+  const defaultWidth = 800;
+  const defaultHeight = 200;
+  const maxWidth = 1600; // 设置最大宽度限制
+  const maxHeight = 800; // 设置最大高度限制
+
+  const validWidth = width && width > 0 && width <= maxWidth ? width : defaultWidth;
+  const validHeight = height && height > 0 && height <= maxHeight ? height : defaultHeight;
+
+  // 确定窗口位置
+  let windowX = isValidPosition ? x : undefined;
+  let windowY = isValidPosition ? y : undefined;
+
+  // 如果位置无效，默认在当前显示器中居中
+  if (windowX === undefined || windowY === undefined) {
+    windowX = targetDisplay.bounds.x + (targetDisplay.bounds.width - validWidth) / 2;
+    windowY = targetDisplay.bounds.y + (targetDisplay.bounds.height - validHeight) / 2;
+  }
 
   lyricWindow = new BrowserWindow({
-    width: width || 800,
-    height: height || 200,
-    x: validPosition ? x : undefined,
-    y: validPosition ? y : undefined,
+    width: validWidth,
+    height: validHeight,
+    x: windowX,
+    y: windowY,
     frame: false,
     show: false,
     transparent: true,
     hasShadow: false,
     alwaysOnTop: true,
+    resizable: true,
+    // 添加跨屏幕支持选项
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
@@ -50,6 +103,20 @@ const createWin = () => {
     }
   });
 
+  // 监听窗口大小变化事件，保存新的尺寸
+  lyricWindow.on('resize', () => {
+    // 如果正在拖动，忽略大小调整事件
+    if (isDragging) return;
+
+    if (lyricWindow && !lyricWindow.isDestroyed()) {
+      const [width, height] = lyricWindow.getSize();
+      const [x, y] = lyricWindow.getPosition();
+
+      // 保存窗口位置和大小
+      store.set('lyricWindowBounds', { x, y, width, height });
+    }
+  });
+
   return lyricWindow;
 };
 
@@ -118,6 +185,7 @@ export const loadLyricWindow = (ipcMain: IpcMain, mainWin: BrowserWindow): void
     if (lyricWindow && !lyricWindow.isDestroyed()) {
       lyricWindow.webContents.send('lyric-window-close');
       mainWin.webContents.send('lyric-control-back', 'close');
+      mainWin.webContents.send('lyric-window-closed');
       lyricWindow.destroy();
       lyricWindow = null;
     }
@@ -136,26 +204,75 @@ export const loadLyricWindow = (ipcMain: IpcMain, mainWin: BrowserWindow): void
     }
   });
 
+  // 开始拖动时设置标志
+  ipcMain.on('lyric-drag-start', () => {
+    isDragging = true;
+    if (lyricWindow && !lyricWindow.isDestroyed()) {
+      // 记录原始窗口大小
+      const [width, height] = lyricWindow.getSize();
+      originalSize = { width, height };
+
+      // 在拖动时暂时禁用大小调整
+      lyricWindow.setResizable(false);
+    }
+  });
+
+  // 结束拖动时清除标志
+  ipcMain.on('lyric-drag-end', () => {
+    isDragging = false;
+    if (lyricWindow && !lyricWindow.isDestroyed()) {
+      // 确保窗口大小恢复原样
+      lyricWindow.setSize(originalSize.width, originalSize.height);
+
+      // 拖动结束后恢复可调整大小
+      lyricWindow.setResizable(true);
+    }
+  });
+
   // 处理拖动移动
   ipcMain.on('lyric-drag-move', (_, { deltaX, deltaY }) => {
-    if (!lyricWindow || lyricWindow.isDestroyed()) return;
+    if (!lyricWindow || lyricWindow.isDestroyed() || !isDragging) return;
 
     const [currentX, currentY] = lyricWindow.getPosition();
-    const { width: screenWidth, height: screenHeight } = screen.getPrimaryDisplay().workAreaSize;
-    const [windowWidth, windowHeight] = lyricWindow.getSize();
 
-    // 计算新位置，确保窗口不会移出屏幕
-    const newX = Math.max(0, Math.min(currentX + deltaX, screenWidth - windowWidth));
-    const newY = Math.max(0, Math.min(currentY + deltaY, screenHeight - windowHeight));
+    // 使用记录的原始大小，而不是当前大小
+    const windowWidth = originalSize.width;
+    const windowHeight = originalSize.height;
 
-    lyricWindow.setPosition(newX, newY);
+    // 计算新位置
+    const newX = currentX + deltaX;
+    const newY = currentY + deltaY;
 
-    // 保存新位置
-    store.set('lyricWindowBounds', {
-      ...lyricWindow.getBounds(),
-      x: newX,
-      y: newY
-    });
+    try {
+      // 获取当前鼠标所在的显示器
+      const mousePoint = screen.getCursorScreenPoint();
+      const currentDisplay = screen.getDisplayNearestPoint(mousePoint);
+
+      // 拖动期间使用setBounds确保大小不变，使用false避免动画卡顿
+      lyricWindow.setBounds(
+        {
+          x: newX,
+          y: newY,
+          width: windowWidth,
+          height: windowHeight
+        },
+        false
+      );
+
+      // 更新存储的位置
+      const windowBounds = {
+        x: newX,
+        y: newY,
+        width: windowWidth,
+        height: windowHeight,
+        displayId: currentDisplay.id // 记录当前显示器ID，有助于多屏幕处理
+      };
+      store.set('lyricWindowBounds', windowBounds);
+    } catch (error) {
+      console.error('Error during window drag:', error);
+      // 出错时尝试使用更简单的方法
+      lyricWindow.setPosition(newX, newY);
+    }
   });
 
   // 添加鼠标穿透事件处理

src/main/modules/config.ts

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

src/main/modules/fileManager.ts

@@ -60,13 +60,22 @@ export function initializeFileManager() {
   // 通用的打开目录处理
   ipcMain.on('open-directory', (_, filePath) => {
     try {
-      if (fs.statSync(filePath).isDirectory()) {
-        shell.openPath(filePath);
+      // 验证文件路径
+      if (!filePath) {
+        console.error('无效的文件路径: 路径为空');
+        return;
+      }
+
+      // 统一处理路径分隔符
+      const normalizedPath = path.normalize(filePath);
+
+      if (fs.statSync(normalizedPath).isDirectory()) {
+        shell.openPath(normalizedPath);
       } else {
-        shell.showItemInFolder(filePath);
+        shell.showItemInFolder(normalizedPath);
       }
     } catch (error) {
-      console.error('Error opening path:', error);
+      console.error('打开路径失败:', error);
     }
   });
 
@@ -248,6 +257,17 @@ async function processDownloadQueue(event: Electron.IpcMainEvent) {
   }
 }
 
+/**
+ * 清理文件名中的非法字符
+ */
+function sanitizeFilename(filename: string): string {
+  // 替换 Windows 和 Unix 系统中的非法字符
+  return filename
+    .replace(/[<>:"/\\|?*]/g, '_') // 替换特殊字符为下划线
+    .replace(/\s+/g, ' ') // 将多个空格替换为单个空格
+    .trim(); // 移除首尾空格
+}
+
 /**
  * 下载音乐功能
  */
@@ -267,9 +287,12 @@ async function downloadMusic(
     const store = new Store();
     const downloadPath = (store.get('set.downloadPath') as string) || app.getPath('downloads');
 
+    // 清理文件名中的非法字符
+    const sanitizedFilename = sanitizeFilename(filename);
+
     // 从URL中获取文件扩展名，如果没有则使用传入的type或默认mp3
     const urlExt = type ? `.${type}` : '.mp3';
-    const filePath = path.join(downloadPath, `${filename}${urlExt}`);
+    const filePath = path.join(downloadPath, `${sanitizedFilename}${urlExt}`);
 
     // 检查文件是否已存在，如果存在则添加序号
     finalFilePath = filePath;

src/main/modules/tray.ts

@@ -1,45 +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(mainWindow: BrowserWindow) {
+  if (!tray) return;
+
+  // 如果是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(mainWindow);
+          mainWindow.webContents.send('language-changed', value);
+        }
+      }))
+    );
+
+    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);
 
-  // 创建一个上下文菜单
-  const contextMenu = Menu.buildFromTemplate([
-    {
-      label: '显示',
-      click: () => {
+  // 设置托盘图标的提示文字
+  tray.setToolTip('Alger Music Player');
+
+  // 初始化菜单
+  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();
       }
-    },
-    {
-      label: '退出',
-      click: () => {
-        mainWindow.destroy();
-        app.quit();
-      }
-    }
-  ]);
-
-  // 设置系统托盘图标的上下文菜单
-  tray.setContextMenu(contextMenu);
-
-  // 当系统托盘图标被点击时，切换窗口的显示/隐藏
-  tray.on('click', () => {
-    if (mainWindow.isVisible()) {
-      mainWindow.hide();
-    } else {
-      mainWindow.show();
-    }
-  });
+    });
+  }
 
   return tray;
 }

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

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);
+      }
+    }
+  });
 }
 
 /**
@@ -91,7 +199,8 @@ export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      contextIsolation: true
+      contextIsolation: true,
+      webSecurity: false
     }
   });
 
@@ -111,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'));
   }

src/main/set.json

@@ -16,5 +16,9 @@
   "closeAction": "ask",
   "musicQuality": "higher",
   "fontFamily": "system-ui",
-  "fontScope": "global"
+  "fontScope": "global",
+  "autoPlay": false,
+  "downloadPath": "",
+  "language": "zh-CN",
+  "alwaysShowDownloadButton": false
 }

src/preload/index.d.ts

@@ -11,9 +11,20 @@ declare global {
       close: () => void;
       dragStart: (data: string) => void;
       miniTray: () => void;
+      miniWindow: () => void;
+      restore: () => void;
       restart: () => void;
+      resizeWindow: (width: number, height: number) => void;
+      resizeMiniWindow: (showPlaylist: boolean) => 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>;
+      sendSong: (data: any) => void;
     };
     $message: any;
   }

src/preload/index.ts

@@ -8,10 +8,37 @@ 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) => {
+    ipcRenderer.on('lyric-window-closed', () => callback());
+  },
+  // 更新相关
+  startDownload: (url: string) => ipcRenderer.send('start-download', url),
+  onDownloadProgress: (callback: (progress: number, status: string) => void) => {
+    ipcRenderer.on('download-progress', (_event, progress, status) => callback(progress, status));
+  },
+  onDownloadComplete: (callback: (success: boolean, filePath: string) => void) => {
+    ipcRenderer.on('download-complete', (_event, success, filePath) => callback(success, filePath));
+  },
+  // 语言相关
+  onLanguageChanged: (callback: (locale: string) => void) => {
+    ipcRenderer.on('language-changed', (_event, locale) => {
+      callback(locale);
+    });
+  },
+  removeDownloadListeners: () => {
+    ipcRenderer.removeAllListeners('download-progress');
+    ipcRenderer.removeAllListeners('download-complete');
+  },
   // 歌词缓存相关
   invoke: (channel: string, ...args: any[]) => {
     const validChannels = [

src/renderer/App.vue

@@ -11,68 +11,115 @@
 </template>
 
 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 import { darkTheme, lightTheme } from 'naive-ui';
-import { computed, onMounted, 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 store from '@/store';
-import { isElectron } from '@/utils';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
+import { isElectron, isLyricWindow } from '@/utils';
 
+import { initAudioListeners } from './hooks/MusicHook';
 import { isMobile } from './utils';
+import { initShortcut } from './utils/shortcut';
 
-const theme = computed(() => {
-  return store.state.theme;
-});
+const { locale } = useI18n();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
+const playerStore = usePlayerStore();
+const router = useRouter();
 
-// 监听字体变化并应用
+// 监听语言变化
 watch(
-  () => [store.state.setData.fontFamily, store.state.setData.fontScope],
-  ([newFont, fontScope]) => {
-    const appElement = document.body;
-    if (!appElement) return;
-
-    const defaultFonts =
-      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-
-    // 只有在全局模式下才应用字体
-    if (fontScope !== 'global') {
-      appElement.style.fontFamily = defaultFonts;
-      return;
-    }
-
-    if (newFont === 'system-ui') {
-      appElement.style.fontFamily = defaultFonts;
-    } else {
-      // 处理多个字体，确保每个字体名都被正确引用
-      const fontList = newFont.split(',').map((font) => {
-        const trimmedFont = font.trim();
-        // 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
-        return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
-          ? `"${trimmedFont}"`
-          : trimmedFont;
-      });
-
-      // 将选择的字体和默认字体组合
-      appElement.style.fontFamily = `${fontList.join(', ')}, ${defaultFonts}`;
+  () => settingsStore.setData.language,
+  (newLanguage) => {
+    if (newLanguage && newLanguage !== locale.value) {
+      locale.value = newLanguage;
     }
   },
   { immediate: true }
 );
 
-onMounted(() => {
-  store.dispatch('initializeSettings');
-  store.dispatch('initializeTheme');
-  store.dispatch('initializeSystemFonts');
-  if (isMobile.value) {
-    store.commit(
-      'setMenus',
-      homeRouter.filter((item) => item.meta.isMobile)
-    );
+const theme = computed(() => {
+  return settingsStore.theme;
+});
+
+// 监听字体变化并应用
+watch(
+  () => [settingsStore.setData.fontFamily, settingsStore.setData.fontScope],
+  ([newFont, fontScope]) => {
+    const appElement = document.body;
+    if (newFont && fontScope === 'global') {
+      appElement.style.fontFamily = newFont;
+    } else {
+      appElement.style.fontFamily = '';
+    }
   }
+);
+
+const handleSetLanguage = (value: string) => {
+  console.log('应用语言变更:', value);
+  if (value) {
+    locale.value = value;
+  }
+};
+
+if (!isLyricWindow.value) {
+  settingsStore.initializeSettings();
+  settingsStore.initializeTheme();
+  settingsStore.initializeSystemFonts();
+  if (isMobile.value) {
+    menuStore.setMenus(homeRouter.filter((item) => item.meta.isMobile));
+  }
+}
+
+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('/');
+      }
+    }
+  });
+}
+
+onMounted(async () => {
+  if (isLyricWindow.value) {
+    return;
+  }
+  // 先初始化播放状态
+  await playerStore.initializePlayState();
+  // 如果有正在播放的音乐，则初始化音频监听器
+  if (playerStore.playMusic && playerStore.playMusic.id) {
+    // 使用 nextTick 确保 DOM 更新后再初始化
+    await nextTick();
+    initAudioListeners();
+    window.api.sendSong(cloneDeep(playerStore.playMusic));
+  }
+  // 初始化快捷键
+  initShortcut();
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .app-container {
   @apply h-full w-full;
   user-select: none;

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;
+  }
+};

src/renderer/api/donation.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+export interface Donor {
+  id: number;
+  name: string;
+  amount: number;
+  date: string;
+  message?: string;
+  avatar?: string;
+  badge: string;
+  badgeColor: string;
+}
+
+/**
+ * 获取捐赠列表
+ */
+export const getDonationList = async (): Promise<Donor[]> => {
+  const { data } = await axios.get('http://110.42.251.190:8766/api/donations');
+  return data;
+};

src/renderer/api/music.ts

@@ -1,5 +1,5 @@
 import { musicDB } from '@/hooks/MusicHook';
-import store from '@/store';
+import { useSettingsStore, useUserStore } from '@/store';
 import type { ILyric } from '@/type/lyric';
 import { isElectron } from '@/utils';
 import request from '@/utils/request';
@@ -13,22 +13,33 @@ export const getMusicQualityDetail = (id: number) => {
 };
 
 // 根据音乐Id获取音乐播放URl
-export const getMusicUrl = async (id: number) => {
-  const res = await request.get('/song/download/url/v1', {
-    params: {
-      id,
-      level: store.state.setData.musicQuality || 'higher'
-    }
-  });
+export const getMusicUrl = async (id: number, isDownloaded: boolean = false) => {
+  const userStore = useUserStore();
+  const settingStore = useSettingsStore();
+  // 判断是否登录
+  try {
+    if (userStore.user && isDownloaded && userStore.user.vipType !== 0) {
+      const url = '/song/download/url/v1';
+      const res = await request.get(url, {
+        params: {
+          id,
+          level: settingStore.setData.musicQuality || 'higher',
+          cookie: `${localStorage.getItem('token')} os=pc;`
+        }
+      });
 
-  if (res.data.data.url) {
-    return { data: { data: [{ ...res.data.data }] } };
+      if (res.data.data.url) {
+        return { data: { data: [{ ...res.data.data }] } };
+      }
+    }
+  } catch (error) {
+    console.error('error', error);
   }
 
   return await request.get('/song/url/v1', {
     params: {
       id,
-      level: store.state.setData.musicQuality || 'higher'
+      level: settingStore.setData.musicQuality || 'higher'
     }
   });
 };
@@ -80,6 +91,22 @@ export const likeSong = (id: number, like: boolean = true) => {
 };
 
 // 获取用户喜欢的音乐列表
-export const getLikedList = () => {
-  return request.get('/likelist');
+export const getLikedList = (uid: number) => {
+  return request.get('/likelist', {
+    params: { uid, noLogin: true }
+  });
+};
+
+// 创建歌单
+export const createPlaylist = (params: { name: string; privacy: number }) => {
+  return request.post('/playlist/create', params);
+};
+
+// 添加或删除歌单歌曲
+export const updatePlaylistTracks = (params: {
+  op: 'add' | 'del';
+  pid: number;
+  tracks: string;
+}) => {
+  return request.get('/playlist/tracks', { params });
 };

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

src/renderer/assets/css/base.css

@@ -1,5 +1,6 @@
 body {
   /* background-color: #000; */
+  overflow: hidden;
 }
 
 .n-popover:has(.music-play) {
@@ -13,3 +14,7 @@ body {
   background-color: transparent !important;
   padding: 0 !important;
 }
+
+.settings-slider .n-slider-mark {
+  font-size: 10px !important;
+}

src/renderer/components.d.ts

@@ -2,15 +2,19 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 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']
     NButtonGroup: typeof import('naive-ui')['NButtonGroup']
+    NCarousel: typeof import('naive-ui')['NCarousel']
+    NCarouselItem: typeof import('naive-ui')['NCarouselItem']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
@@ -27,14 +31,11 @@ declare module 'vue' {
     NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NPopover: typeof import('naive-ui')['NPopover']
     NProgress: typeof import('naive-ui')['NProgress']
     NRadio: typeof import('naive-ui')['NRadio']
-    NRadioButton: typeof import('naive-ui')['NRadioButton']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
@@ -46,7 +47,6 @@ declare module 'vue' {
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NTransfer: typeof import('naive-ui')['NTransfer']
     NVirtualList: typeof import('naive-ui')['NVirtualList']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/renderer/components/Coffee.vue

@@ -7,7 +7,7 @@
             quaternary
             class="inline-flex items-center gap-2 px-4 py-2 transition-all duration-300 hover:-translate-y-0.5"
           >
-            请我喝咖啡
+            {{ t('comp.coffee.title') }}
           </n-button>
         </slot>
       </template>
@@ -17,20 +17,24 @@
           <div class="flex flex-col items-center gap-2">
             <n-image
               :src="alipayQR"
-              alt="支付宝收款码"
+              :alt="t('comp.coffee.alipayQR')"
               class="w-32 h-32 rounded-lg cursor-none"
               preview-disabled
             />
-            <span class="text-sm text-gray-700 dark:text-gray-200">支付宝</span>
+            <span class="text-sm text-gray-700 dark:text-gray-200">{{
+              t('comp.coffee.alipay')
+            }}</span>
           </div>
           <div class="flex flex-col items-center gap-2">
             <n-image
               :src="wechatQR"
-              alt="微信收款码"
+              :alt="t('comp.coffee.wechatQR')"
               class="w-32 h-32 rounded-lg cursor-none"
               preview-disabled
             />
-            <span class="text-sm text-gray-700 dark:text-gray-200">微信支付</span>
+            <span class="text-sm text-gray-700 dark:text-gray-200">{{
+              t('comp.coffee.wechat')
+            }}</span>
           </div>
         </div>
 
@@ -39,7 +43,16 @@
             class="text-sm text-gray-700 dark:text-gray-200 text-center cursor-pointer hover:text-green-500"
             @click="copyQQ"
           >
-            QQ群：789288579
+            {{ t('comp.coffee.qqGroup') }}
+          </p>
+        </div>
+        <div class="mt-4">
+          <!-- 赞赏列表地址 -->
+          <p
+            class="text-sm text-green-600 dark:text-gray-200 text-center cursor-pointer hover:text-green-500"
+            @click="toDonateList"
+          >
+            {{ t('comp.coffee.donateList') }}
           </p>
         </div>
       </div>
@@ -48,17 +61,24 @@
 </template>
 
 <script setup>
-import { NButton, NImage, NPopover } from 'naive-ui';
+import { NButton, NImage, NPopover, useMessage } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 
 import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 
+const { t } = useI18n();
+
 const message = useMessage();
 const copyQQ = () => {
   navigator.clipboard.writeText('789288579');
   message.success('已复制到剪贴板');
 };
 
+const toDonateList = () => {
+  window.open('http://donate.alger.fun', '_blank');
+};
+
 defineProps({
   alipayQR: {
     type: String,

src/renderer/components/EQControl.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="eq-control">
+    <div class="eq-header">
+      <h3>{{ t('player.eq.title') }}</h3>
+      <div class="eq-controls">
+        <n-switch v-model:value="isEnabled" @update:value="toggleEQ">
+          <template #checked>{{ t('player.eq.on') }}</template>
+          <template #unchecked>{{ t('player.eq.off') }}</template>
+        </n-switch>
+      </div>
+    </div>
+
+    <div class="eq-presets">
+      <n-scrollbar x-scrollable>
+        <n-space :size="6" :wrap="false">
+          <n-tag
+            v-for="preset in presetOptions"
+            :key="preset.value"
+            :type="currentPreset === preset.value ? 'success' : 'default'"
+            :bordered="false"
+            size="medium"
+            round
+            clickable
+            @click="applyPreset(preset.value)"
+          >
+            {{ preset.label }}
+          </n-tag>
+        </n-space>
+      </n-scrollbar>
+    </div>
+
+    <div class="eq-sliders">
+      <div v-for="freq in frequencies" :key="freq" class="eq-slider">
+        <div class="freq-label">{{ formatFreq(freq) }}</div>
+        <n-slider
+          v-model:value="eqValues[freq.toString()]"
+          :min="-12"
+          :max="12"
+          :step="0.1"
+          vertical
+          :disabled="!isEnabled"
+          @update:value="updateEQ(freq.toString(), $event)"
+        />
+        <div class="gain-value">{{ eqValues[freq.toString()] }}dB</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { audioService } from '@/services/audioService';
+
+const { t } = useI18n();
+
+const frequencies = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
+const eqValues = ref<{ [key: string]: number }>({});
+const isEnabled = ref(audioService.isEQEnabled());
+const currentPreset = ref(audioService.getCurrentPreset() || 'flat');
+
+// 预设配置
+const presets = {
+  flat: {
+    label: t('player.eq.presets.flat'),
+    values: Object.fromEntries(frequencies.map((f) => [f, 0]))
+  },
+  pop: {
+    label: t('player.eq.presets.pop'),
+    values: {
+      31: -1.5,
+      62: 3.5,
+      125: 5.5,
+      250: 3.5,
+      500: -0.5,
+      1000: -1.5,
+      2000: 1.5,
+      4000: 2.5,
+      8000: 2.5,
+      16000: 2.5
+    }
+  },
+  rock: {
+    label: t('player.eq.presets.rock'),
+    values: {
+      31: 4.5,
+      62: 3.5,
+      125: 2,
+      250: 0.5,
+      500: -0.5,
+      1000: -1,
+      2000: 0.5,
+      4000: 2,
+      8000: 2.5,
+      16000: 3.5
+    }
+  },
+  classical: {
+    label: t('player.eq.presets.classical'),
+    values: {
+      31: 3.5,
+      62: 3,
+      125: 2.5,
+      250: 1.5,
+      500: -0.5,
+      1000: -1.5,
+      2000: -1.5,
+      4000: 0.5,
+      8000: 2,
+      16000: 3
+    }
+  },
+  jazz: {
+    label: t('player.eq.presets.jazz'),
+    values: {
+      31: 3,
+      62: 2,
+      125: 1.5,
+      250: 2,
+      500: -1,
+      1000: -1.5,
+      2000: -0.5,
+      4000: 1,
+      8000: 2.5,
+      16000: 3
+    }
+  },
+  hiphop: {
+    label: t('player.eq.presets.hiphop'),
+    values: {
+      31: 5,
+      62: 4.5,
+      125: 3,
+      250: 1.5,
+      500: -0.5,
+      1000: -1,
+      2000: 0.5,
+      4000: 1.5,
+      8000: 2,
+      16000: 2.5
+    }
+  },
+  vocal: {
+    label: t('player.eq.presets.vocal'),
+    values: {
+      31: -2,
+      62: -1.5,
+      125: -1,
+      250: 0.5,
+      500: 2,
+      1000: 3.5,
+      2000: 3,
+      4000: 1.5,
+      8000: 0.5,
+      16000: 0
+    }
+  },
+  dance: {
+    label: t('player.eq.presets.dance'),
+    values: {
+      31: 4,
+      62: 3.5,
+      125: 2.5,
+      250: 1,
+      500: 0,
+      1000: -0.5,
+      2000: 1.5,
+      4000: 2.5,
+      8000: 3,
+      16000: 2.5
+    }
+  },
+  acoustic: {
+    label: t('player.eq.presets.acoustic'),
+    values: {
+      31: 2,
+      62: 1.5,
+      125: 1,
+      250: 1.5,
+      500: 2,
+      1000: 1.5,
+      2000: 2,
+      4000: 2.5,
+      8000: 2,
+      16000: 1.5
+    }
+  }
+};
+
+const presetOptions = Object.entries(presets).map(([value, preset]) => ({
+  label: preset.label,
+  value
+}));
+
+const toggleEQ = (enabled: boolean) => {
+  audioService.setEQEnabled(enabled);
+};
+
+const applyPreset = (presetName: string) => {
+  currentPreset.value = presetName;
+  audioService.setCurrentPreset(presetName);
+  const preset = presets[presetName as keyof typeof presets];
+  if (preset) {
+    Object.entries(preset.values).forEach(([freq, gain]) => {
+      updateEQ(freq, gain);
+    });
+  }
+};
+
+onMounted(() => {
+  // 恢复 EQ 设置
+  const settings = audioService.getAllEQSettings();
+  eqValues.value = settings;
+
+  // 如果有保存的预设，应用该预设
+  const savedPreset = audioService.getCurrentPreset();
+  if (savedPreset && presets[savedPreset as keyof typeof presets]) {
+    currentPreset.value = savedPreset;
+  }
+});
+
+const updateEQ = (frequency: string, gain: number) => {
+  audioService.setEQFrequencyGain(frequency, gain);
+  eqValues.value = {
+    ...eqValues.value,
+    [frequency]: gain
+  };
+
+  // 检查当前值是否与任何预设匹配
+  const currentValues = eqValues.value;
+  let matchedPreset: string | null = null;
+
+  // 检查是否与任何预设完全匹配
+  Object.entries(presets).forEach(([presetName, preset]) => {
+    const isMatch = Object.entries(preset.values).every(
+      ([freq, value]) => Math.abs(currentValues[freq] - value) < 0.1
+    );
+    if (isMatch) {
+      matchedPreset = presetName;
+    }
+  });
+
+  // 更新当前预设状态
+  if (matchedPreset !== null) {
+    currentPreset.value = matchedPreset;
+    audioService.setCurrentPreset(matchedPreset);
+  } else if (currentPreset.value !== 'custom') {
+    // 如果与任何预设都不匹配，将状态设置为自定义
+    currentPreset.value = 'custom';
+    audioService.setCurrentPreset('custom');
+  }
+};
+
+const formatFreq = (freq: number) => {
+  if (freq >= 1000) {
+    return `${freq / 1000}kHz`;
+  }
+  return `${freq}Hz`;
+};
+</script>
+
+<style lang="scss" scoped>
+.eq-control {
+  @apply p-6 rounded-lg;
+  @apply bg-light dark:bg-dark;
+  @apply shadow-lg dark:shadow-none;
+  width: 100%;
+  max-width: 700px;
+
+  .eq-header {
+    @apply flex justify-between items-center mb-4;
+
+    h3 {
+      @apply text-xl font-semibold;
+      @apply text-gray-800 dark:text-gray-200;
+    }
+  }
+
+  .eq-presets {
+    @apply mb-2 relative;
+    height: 40px;
+
+    :deep(.n-scrollbar) {
+      @apply -mx-2 px-2;
+    }
+
+    :deep(.n-tag) {
+      @apply cursor-pointer transition-all duration-200;
+      text-align: center;
+
+      &:hover {
+        transform: translateY(-2px);
+      }
+    }
+
+    :deep(.n-space) {
+      flex-wrap: nowrap;
+      padding: 4px 0;
+    }
+  }
+
+  .eq-sliders {
+    @apply flex justify-between items-end;
+    @apply bg-gray-50 dark:bg-gray-800 gap-1;
+    @apply rounded-lg p-2;
+    height: 300px;
+
+    .eq-slider {
+      @apply flex flex-col items-center;
+      width: 45px;
+      height: 100%;
+
+      .n-slider {
+        flex: 1;
+        margin: 12px 0;
+        min-height: 180px;
+      }
+
+      .freq-label {
+        @apply text-xs font-medium text-center;
+        @apply text-gray-600 dark:text-gray-400;
+        white-space: nowrap;
+        margin: 8px 0;
+        height: 20px;
+      }
+
+      .gain-value {
+        @apply text-xs font-medium text-center;
+        @apply text-gray-600 dark:text-gray-400;
+        white-space: nowrap;
+        margin: 4px 0;
+        height: 16px;
+      }
+    }
+  }
+}
+
+:deep(.n-slider) {
+  --n-rail-height: 4px;
+  --n-rail-color: theme('colors.gray.200');
+  --n-rail-color-hover: theme('colors.gray.300');
+  --n-fill-color: theme('colors.green.500');
+  --n-fill-color-hover: theme('colors.green.600');
+  --n-handle-color: theme('colors.green.500');
+  --n-handle-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .n-slider-handle {
+    @apply transition-all duration-200;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+</style>

src/renderer/components/LanguageSwitcher.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useSettingsStore } from '@/store/modules/settings';
+
+const settingsStore = useSettingsStore();
+const { locale } = useI18n();
+
+const languages = [
+  { label: '简体中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' }
+];
+
+console.log('locale', locale);
+// 使用计算属性来获取当前语言
+const currentLanguage = computed({
+  get: () => locale.value,
+  set: (value) => {
+    settingsStore.setLanguage(value);
+  }
+});
+</script>
+
+<template>
+  <n-select v-model:value="currentLanguage" :options="languages" size="small" />
+</template>

src/renderer/components/MusicList.vue

@@ -37,12 +37,12 @@
             <n-avatar round :size="24" :src="getImgUrl(listInfo.creator.avatarUrl, '50y50')" />
             <span class="creator-name">{{ listInfo.creator.nickname }}</span>
           </div>
+          <div v-if="total" class="music-total">{{ t('player.songNum', { num: total }) }}</div>
 
-          <n-scrollbar style="max-height: 200">
+          <n-scrollbar style="max-height: 200px">
             <div v-if="listInfo?.description" class="music-desc">
               {{ listInfo.description }}
             </div>
-            <play-bottom />
           </n-scrollbar>
         </div>
 
@@ -59,9 +59,19 @@
                     :class="setAnimationClass('animate__bounceInUp')"
                     :style="getItemAnimationDelay(index)"
                   >
-                    <song-item :item="formatDetail(item)" @play="handlePlay" />
+                    <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>
-                  <div v-if="isLoadingMore" class="loading-more">加载更多...</div>
                   <play-bottom />
                 </div>
               </n-spin>
@@ -75,15 +85,18 @@
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex';
+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 PlayBottom from './common/PlayBottom.vue';
 
-const store = useStore();
+const { t } = useI18n();
+const playerStore = usePlayerStore();
 
 const props = withDefaults(
   defineProps<{
@@ -97,21 +110,27 @@ const props = withDefaults(
       [key: string]: any;
     };
     cover?: boolean;
+    canRemove?: boolean;
   }>(),
   {
     loading: false,
     cover: true,
-    zIndex: 9996
+    zIndex: 9996,
+    canRemove: false
   }
 );
 
-const emit = defineEmits(['update:show', 'update:loading']);
+const emit = defineEmits(['update:show', 'update:loading', 'remove-song']);
 
 const page = ref(0);
-const pageSize = 20;
+const pageSize = 40;
 const isLoadingMore = ref(false);
 const displayedSongs = ref<any[]>([]);
 const loadingList = ref(false);
+const loadedIds = ref(new Set<number>()); // 用于追踪已加载的歌曲ID
+const isPlaylistLoading = ref(false); // 标记是否正在加载播放列表
+const completePlaylist = ref<any[]>([]); // 存储完整的播放列表
+const hasMore = ref(true); // 标记是否还有更多数据可加载
 
 // 计算总数
 const total = computed(() => {
@@ -121,108 +140,229 @@ const total = computed(() => {
   return props.songList.length;
 });
 
-const formatDetail = computed(() => (detail: any) => {
-  const song = {
-    artists: detail.ar,
-    name: detail.al.name,
-    id: detail.al.id
+// 格式化歌曲数据
+const formatSong = (item: any) => {
+  return {
+    ...item,
+    picUrl: item.al?.picUrl || item.picUrl,
+    song: {
+      artists: item.ar || item.artists,
+      name: item.al?.name || item.name,
+      id: item.al?.id || item.id
+    }
   };
+};
 
-  detail.song = song;
-  detail.picUrl = detail.al.picUrl;
-  return detail;
-});
+/**
+ * 加载歌曲数据的核心函数
+ * @param ids 要加载的歌曲ID数组
+ * @param appendToList 是否将加载的歌曲追加到现有列表
+ * @param updateComplete 是否更新完整播放列表
+ */
+const loadSongs = async (ids: number[], appendToList = true, updateComplete = false) => {
+  if (ids.length === 0) return [];
 
-const handlePlay = () => {
-  const tracks = props.songList || [];
-  store.commit(
-    'setPlayList',
-    tracks.map((item) => ({
-      ...item,
-      picUrl: item.al.picUrl,
-      song: {
-        artists: item.ar
+  try {
+    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) => {
+        loadedIds.value.add(song.id);
+      });
+
+      if (appendToList) {
+        displayedSongs.value.push(...newSongs);
       }
-    }))
-  );
+
+      if (updateComplete) {
+        completePlaylist.value.push(...newSongs);
+      }
+
+      return newSongs;
+    }
+  } catch (error) {
+    console.error('加载歌曲失败:', error);
+  }
+
+  return [];
+};
+
+// 加载完整播放列表
+const loadFullPlaylist = async () => {
+  if (isPlaylistLoading.value) return;
+  isPlaylistLoading.value = true;
+  completePlaylist.value = [...displayedSongs.value]; // 先用当前已加载的歌曲初始化
+
+  try {
+    // 如果没有trackIds，直接使用当前歌曲列表
+    if (!props.listInfo?.trackIds) {
+      return;
+    }
+
+    // 获取所有未加载的歌曲ID
+    const allIds = props.listInfo.trackIds.map((item) => item.id);
+    const unloadedIds = allIds.filter((id) => !loadedIds.value.has(id));
+
+    // 如果所有歌曲都已加载，直接返回
+    if (unloadedIds.length === 0) {
+      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);
+
+      // 添加小延迟避免请求过于密集
+      if (i + batchSize < unloadedIds.length) {
+        // 使用 setTimeout 直接延迟，避免 Promise 相关的 linter 错误
+        await new Promise<void>((resolve) => {
+          setTimeout(() => resolve(), 300);
+        });
+      }
+    }
+  } catch (error) {
+    console.error('加载完整播放列表失败:', error);
+  } finally {
+    isPlaylistLoading.value = false;
+  }
+};
+
+// 处理播放
+const handlePlay = async () => {
+  // 先使用当前已加载的歌曲开始播放
+  playerStore.setPlayList(displayedSongs.value.map(formatSong));
+
+  // 在后台加载完整播放列表
+  loadFullPlaylist().then(() => {
+    // 加载完成后，更新播放列表为完整列表
+    if (completePlaylist.value.length > 0) {
+      playerStore.setPlayList(completePlaylist.value.map(formatSong));
+    }
+  });
 };
 
 const close = () => {
   emit('update:show', false);
 };
 
-// 优化加载更多歌曲的函数
+// 加载更多歌曲
 const loadMoreSongs = async () => {
-  if (isLoadingMore.value || displayedSongs.value.length >= total.value) return;
+  // 检查是否正在加载或已经加载完成
+  if (isLoadingMore.value || displayedSongs.value.length >= total.value) {
+    hasMore.value = false;
+    return;
+  }
 
   isLoadingMore.value = true;
   try {
-    if (props.listInfo?.trackIds) {
-      // 如果有 trackIds，需要分批请求歌曲详情
-      const start = page.value * pageSize;
-      const end = Math.min((page.value + 1) * pageSize, total.value);
-      const trackIds = props.listInfo.trackIds.slice(start, end).map((item) => item.id);
+    const start = displayedSongs.value.length;
+    const end = Math.min(start + pageSize, total.value);
 
-      if (trackIds.length > 0) {
-        const { data } = await getMusicDetail(trackIds);
-        displayedSongs.value = [...displayedSongs.value, ...data.songs];
-        page.value++;
+    if (props.listInfo?.trackIds) {
+      // 获取这一批次需要加载的所有ID
+      const trackIdsToLoad = props.listInfo.trackIds
+        .slice(start, end)
+        .map((item) => item.id)
+        .filter((id) => !loadedIds.value.has(id));
+
+      if (trackIdsToLoad.length > 0) {
+        await loadSongs(trackIdsToLoad, true, false);
       }
-    } else {
-      // 如果没有 trackIds，直接使用 songList 分页
-      const start = page.value * pageSize;
-      const end = Math.min((page.value + 1) * pageSize, props.songList.length);
+    } else if (start < props.songList.length) {
+      // 直接使用 songList 分页
       const newSongs = props.songList.slice(start, end);
-      displayedSongs.value = [...displayedSongs.value, ...newSongs];
-      page.value++;
+      newSongs.forEach((song) => {
+        if (!loadedIds.value.has(song.id)) {
+          loadedIds.value.add(song.id);
+          displayedSongs.value.push(song);
+        }
+      });
     }
+
+    // 更新是否还有更多数据的状态
+    hasMore.value = displayedSongs.value.length < total.value;
   } catch (error) {
-    console.error('加载歌曲失败:', error);
+    console.error('加载更多歌曲失败:', error);
   } finally {
     isLoadingMore.value = false;
     loadingList.value = false;
   }
 };
 
-const getItemAnimationDelay = (index: number) => {
-  const currentPageIndex = index % pageSize;
-  return setAnimationDelay(currentPageIndex, 20);
-};
-
 // 修改滚动处理函数
 const handleScroll = (e: Event) => {
   const target = e.target as HTMLElement;
   if (!target) return;
 
   const { scrollTop, scrollHeight, clientHeight } = target;
-  if (scrollHeight - scrollTop - clientHeight < 100 && !isLoadingMore.value) {
+  const threshold = 200;
+
+  if (
+    scrollHeight - scrollTop - clientHeight < threshold &&
+    !isLoadingMore.value &&
+    hasMore.value
+  ) {
     loadMoreSongs();
   }
 };
 
-watch(
-  () => props.show,
-  (newVal) => {
-    loadingList.value = newVal;
-    if (!props.cover) {
-      loadingList.value = false;
-    }
-  }
-);
+const getItemAnimationDelay = (index: number) => {
+  const currentPageIndex = index % pageSize;
+  return setAnimationDelay(currentPageIndex, 20);
+};
 
-// 监听 songList 变化，重置分页状态
+// 重置列表状态
+const resetListState = () => {
+  page.value = 0;
+  loadedIds.value.clear();
+  displayedSongs.value = [];
+  completePlaylist.value = [];
+  hasMore.value = true;
+  loadingList.value = false;
+};
+
+// 初始化歌曲列表
+const initSongList = (songs: any[]) => {
+  if (songs.length > 0) {
+    displayedSongs.value = [...songs];
+    songs.forEach((song) => loadedIds.value.add(song.id));
+    page.value = Math.ceil(songs.length / pageSize);
+  }
+
+  // 检查是否还有更多数据可加载
+  hasMore.value = displayedSongs.value.length < total.value;
+};
+
+// 修改 songList 监听器
 watch(
   () => props.songList,
   (newSongs) => {
-    page.value = 0;
-    displayedSongs.value = newSongs.slice(0, pageSize);
-    if (newSongs.length > pageSize) {
-      page.value = 1;
+    // 重置所有状态
+    resetListState();
+
+    // 初始化歌曲列表
+    initSongList(newSongs);
+
+    // 如果还有更多歌曲需要加载，且差距较小，立即加载
+    if (hasMore.value && props.listInfo?.trackIds) {
+      setTimeout(() => {
+        loadMoreSongs();
+      }, 300);
     }
-    loadingList.value = false;
   },
   { immediate: true }
 );
+
+// 组件卸载时清理状态
+onUnmounted(() => {
+  isPlaylistLoading.value = false;
+});
 </script>
 
 <style scoped lang="scss">
@@ -231,6 +371,10 @@ watch(
     @apply text-xl font-bold text-gray-900 dark:text-white;
   }
 
+  &-total {
+    @apply text-sm font-normal text-gray-500 dark:text-gray-400;
+  }
+
   &-page {
     @apply px-8 w-full h-full bg-light dark:bg-black bg-opacity-75 dark:bg-opacity-75 rounded-t-2xl;
     backdrop-filter: blur(20px);
@@ -295,6 +439,7 @@ watch(
 
   .music-content {
     @apply flex-col;
+    width: 100vw !important;
   }
 
   .music-info {

src/renderer/components/MvPlayer.vue

@@ -54,7 +54,7 @@
                     </template>
                   </n-button>
                 </template>
-                上一个
+                {{ t('player.previous') }}
               </n-tooltip>
 
               <n-tooltip placement="top">
@@ -68,7 +68,7 @@
                     </template>
                   </n-button>
                 </template>
-                {{ isPlaying ? '暂停' : '播放' }}
+                {{ isPlaying ? t('player.pause') : t('player.play') }}
               </n-tooltip>
 
               <n-tooltip v-if="!props.noList" placement="top">
@@ -82,7 +82,7 @@
                     </template>
                   </n-button>
                 </template>
-                下一个
+                {{ t('player.next') }}
               </n-tooltip>
 
               <div class="time-display">
@@ -104,7 +104,7 @@
                       </template>
                     </n-button>
                   </template>
-                  {{ volume === 0 ? '取消静音' : '静音' }}
+                  {{ volume === 0 ? t('player.unmute') : t('player.mute') }}
                 </n-tooltip>
                 <n-slider
                   v-model:value="volume"
@@ -129,7 +129,9 @@
                     </template>
                   </n-button>
                 </template>
-                {{ playMode === 'single' ? '单曲循环' : '列表循环' }}
+                {{
+                  playMode === 'single' ? t('player.modeHint.single') : t('player.modeHint.list')
+                }}
               </n-tooltip>
 
               <n-tooltip placement="top">
@@ -144,7 +146,7 @@
                     </template>
                   </n-button>
                 </template>
-                {{ isFullscreen ? '退出全屏' : '全屏' }}
+                {{ isFullscreen ? t('player.fullscreen.exit') : t('player.fullscreen.enter') }}
               </n-tooltip>
 
               <n-tooltip placement="top">
@@ -157,7 +159,7 @@
                     </template>
                   </n-button>
                 </template>
-                关闭
+                {{ t('player.close') }}
               </n-tooltip>
             </div>
           </div>
@@ -170,7 +172,7 @@
               <i :class="playMode === 'single' ? 'ri-repeat-one-line' : 'ri-play-list-line'"></i>
             </n-icon>
             <div class="mode-text">
-              {{ playMode === 'single' ? '单曲循环' : '自动播放下一个' }}
+              {{ playMode === 'single' ? t('player.modeHint.single') : t('player.modeHint.list') }}
             </div>
           </div>
         </transition>
@@ -188,11 +190,13 @@
 <script setup lang="ts">
 import { NButton, NIcon, NSlider, NTooltip } from 'naive-ui';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 import { getMvUrl } from '@/api/mv';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 
+const { t } = useI18n();
 type PlayMode = 'single' | 'auto';
 const PLAY_MODE = {
   Single: 'single' as PlayMode,
@@ -218,7 +222,7 @@ const emit = defineEmits<{
   (e: 'prev', loading: (value: boolean) => void): void;
 }>();
 
-const store = useStore();
+const playerStore = usePlayerStore();
 const mvUrl = ref<string>();
 const playMode = ref<PlayMode>(PLAY_MODE.Auto);
 
@@ -355,8 +359,8 @@ const loadMvUrl = async (mv: IMvItem) => {
 
 const handleClose = () => {
   emit('update:show', false);
-  if (store.state.playMusicUrl) {
-    store.commit('setIsPlay', true);
+  if (playerStore.playMusicUrl) {
+    playerStore.setIsPlay(true);
   }
 };
 
@@ -539,7 +543,7 @@ watch(showControls, (newValue) => {
   }
 });
 
-const isMobile = computed(() => store.state.isMobile);
+const isMobile = computed(() => false); // TODO: 从 settings store 获取
 </script>
 
 <style scoped lang="scss">

src/renderer/components/RecommendSinger.vue

@@ -1,175 +0,0 @@
-<template>
-  <!-- 推荐歌手 -->
-  <n-scrollbar :size="100" :x-scrollable="true">
-    <div class="recommend-singer">
-      <div class="recommend-singer-list">
-        <div
-          v-if="dayRecommendData"
-          class="recommend-singer-item relative"
-          :class="setAnimationClass('animate__backInRight')"
-          :style="setAnimationDelay(0, 100)"
-        >
-          <div
-            :style="
-              setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '500y500'))
-            "
-            class="recommend-singer-item-bg"
-          ></div>
-          <div
-            class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
-            @click="showMusic = true"
-          >
-            <div class="font-bold text-xl">每日推荐</div>
-
-            <div class="mt-2">
-              <p
-                v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
-                :key="item.id"
-                class="text-el"
-              >
-                {{ item.name }}
-                <br />
-              </p>
-            </div>
-          </div>
-        </div>
-        <div
-          v-for="(item, index) in hotSingerData?.artists"
-          :key="item.id"
-          class="recommend-singer-item relative"
-          :class="setAnimationClass('animate__backInRight')"
-          :style="setAnimationDelay(index + 1, 100)"
-        >
-          <div
-            :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
-            class="recommend-singer-item-bg"
-          ></div>
-          <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
-            {{ item.musicSize }}首
-          </div>
-          <div class="recommend-singer-item-info z-10">
-            <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
-              <i class="iconfont icon-playfill text-xl"></i>
-            </div>
-            <div class="ml-4">
-              <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <music-list
-        v-if="dayRecommendData?.dailySongs.length"
-        v-model:show="showMusic"
-        name="每日推荐列表"
-        :song-list="dayRecommendData?.dailySongs"
-        :cover="false"
-      />
-    </div>
-  </n-scrollbar>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { useStore } from 'vuex';
-
-import { getDayRecommend, getHotSinger } from '@/api/home';
-import MusicList from '@/components/MusicList.vue';
-import router from '@/router';
-import { IDayRecommend } from '@/type/day_recommend';
-import type { IHotSinger } from '@/type/singer';
-import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
-
-const store = useStore();
-
-// 歌手信息
-const hotSingerData = ref<IHotSinger>();
-const dayRecommendData = ref<IDayRecommend>();
-const showMusic = ref(false);
-
-onMounted(async () => {
-  await loadData();
-});
-
-const loadData = async () => {
-  try {
-    // 第一个请求：获取热门歌手
-    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
-
-    // 第二个请求：获取每日推荐
-    try {
-      const {
-        data: { data: dayRecommend }
-      } = await getDayRecommend();
-      // 处理数据
-      if (dayRecommend) {
-        singerData.artists = singerData.artists.slice(0, 4);
-      }
-      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
-    } catch (error) {
-      console.error('error', error);
-    }
-
-    hotSingerData.value = singerData;
-  } catch (error) {
-    console.error('error', error);
-  }
-};
-
-const toSearchSinger = (keyword: string) => {
-  router.push({
-    path: '/search',
-    query: {
-      keyword
-    }
-  });
-};
-
-// 监听登录状态
-watchEffect(() => {
-  if (store.state.user) {
-    loadData();
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.recommend-singer {
-  &-list {
-    @apply flex;
-    height: 280px;
-  }
-  &-item {
-    @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between overflow-hidden;
-    &-bg {
-      @apply bg-gray-900 dark:bg-gray-800 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
-      filter: brightness(60%);
-    }
-    &-info {
-      @apply flex items-center p-2;
-      &-play {
-        @apply w-12 h-12 bg-green-500 rounded-full flex justify-center items-center hover:bg-green-600 cursor-pointer text-white;
-      }
-      &-name {
-        @apply text-gray-100 dark:text-gray-100;
-      }
-    }
-    &-count {
-      @apply text-gray-100 dark:text-gray-100;
-    }
-  }
-}
-
-.mobile .recommend-singer {
-  &-list {
-    height: 180px;
-    @apply ml-4;
-  }
-  &-item {
-    @apply p-4 rounded-xl;
-    &-bg {
-      @apply rounded-xl;
-    }
-  }
-}
-</style>

src/renderer/components/common/ArtistDrawer.vue

@@ -33,7 +33,7 @@
 
       <!-- 标签页切换 -->
       <n-tabs v-model:value="activeTab" class="flex-1" type="line" animated>
-        <n-tab-pane name="songs" tab="热门歌曲">
+        <n-tab-pane name="songs" :tab="t('artist.hotSongs')">
           <div ref="songListRef" class="songs-list">
             <n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleSongScroll">
               <div class="song-list-content">
@@ -44,14 +44,14 @@
                   :list="true"
                   @play="handlePlay"
                 />
-                <div v-if="songLoading" class="loading-more">加载中...</div>
+                <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
               </div>
               <play-bottom />
             </n-scrollbar>
           </div>
         </n-tab-pane>
 
-        <n-tab-pane name="albums" tab="专辑">
+        <n-tab-pane name="albums" :tab="t('artist.albums')">
           <div ref="albumListRef" class="albums-list">
             <n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleAlbumScroll">
               <div class="albums-grid">
@@ -69,14 +69,14 @@
                     type: '专辑'
                   }"
                 />
-                <div v-if="albumLoading" class="loading-more">加载中...</div>
+                <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
               </div>
               <play-bottom />
             </n-scrollbar>
           </div>
         </n-tab-pane>
 
-        <n-tab-pane name="about" tab="艺人介绍">
+        <n-tab-pane name="about" :tab="t('artist.description')">
           <div class="artist-description">
             <n-scrollbar style="max-height: 60vh">
               <div class="description-content" v-html="artistInfo?.briefDesc"></div>
@@ -90,23 +90,32 @@
 
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
-import { ref, watch } from 'vue';
-import { useStore } from 'vuex';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
 import { getMusicDetail } from '@/api/music';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore, useSettingsStore } from '@/store';
 import { IArtist } from '@/type/artist';
 import { getImgUrl } from '@/utils';
 
 import PlayBottom from './PlayBottom.vue';
 
+const { t } = useI18n();
+
+const settingsStore = useSettingsStore();
+const playerStore = usePlayerStore();
+
+const currentArtistId = computed({
+  get: () => settingsStore.currentArtistId,
+  set: (val) => settingsStore.setCurrentArtistId(val as number)
+});
+
 const modelValue = defineModel<boolean>('show', { required: true });
 
-const store = useStore();
 const activeTab = ref('songs');
-const currentArtistId = ref<number>();
 
 // 歌手信息
 const artistInfo = ref<IArtist>();
@@ -131,15 +140,18 @@ const albumPage = ref({
 });
 
 watch(modelValue, (newVal) => {
-  store.commit('setShowArtistDrawer', newVal);
+  settingsStore.setShowArtistDrawer(newVal);
 });
 const loading = ref(false);
 // 加载歌手信息
+
+const previousArtistId = ref<number>();
 const loadArtistInfo = async (id: number) => {
-  if (currentArtistId.value === id) return;
+  // if (currentArtistId.value === id) return;
+  if (previousArtistId.value === id) return;
   activeTab.value = 'songs';
   loading.value = true;
-  currentArtistId.value = id;
+  previousArtistId.value = id;
   try {
     const info = await getArtistDetail(id);
     if (info.data?.data?.artist) {
@@ -257,8 +269,7 @@ const formatPublishTime = (time: number) => {
 };
 
 const handlePlay = () => {
-  store.commit(
-    'setPlayList',
+  playerStore.setPlayList(
     songs.value.map((item) => ({
       ...item,
       picUrl: item.al.picUrl

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>

src/renderer/components/common/DonationList.vue

@@ -5,7 +5,7 @@
         <template #icon>
           <i class="ri-refresh-line"></i>
         </template>
-        刷新列表
+        {{ t('donation.refresh') }}
       </n-button>
     </div>
     <div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
@@ -72,33 +72,40 @@
         <template #icon>
           <i :class="isExpanded ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"></i>
         </template>
-        {{ isExpanded ? '收起' : '展开更多' }}
+        {{ isExpanded ? t('common.collapse') : t('common.expand') }}
       </n-button>
     </div>
 
-    <div class="p-6 rounded-lg shadow-lg bg-light dark:bg-gray-800">
+    <div class="p-6 rounded-lg shadow-lg">
       <div class="description text-center text-sm text-gray-700 dark:text-gray-200">
-        <p>您的捐赠将用于支持开发和维护工作，包括但不限于服务器维护、域名续费等。</p>
-        <p>留言时可留下您的邮箱或 github名称。</p>
+        <p>{{ t('donation.description') }}</p>
+        <p>{{ t('donation.message') }}</p>
       </div>
-      <div class="flex justify-between">
+      <div class="flex justify-between mt-6">
         <div class="flex flex-col items-center gap-2">
           <n-image
             :src="alipay"
-            alt="支付宝收款码"
+            :alt="t('common.alipay')"
             class="w-60 h-60 rounded-lg cursor-none"
             preview-disabled
           />
-          <span class="text-sm text-gray-700 dark:text-gray-200">支付宝</span>
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.alipay') }}</span>
         </div>
+        <n-button type="primary" @click="toDonateList">
+          <template #icon>
+            <i class="ri-cup-line"></i>
+          </template>
+          {{ t('donation.toDonateList') }}
+          <i class="ri-arrow-right-s-line"></i>
+        </n-button>
         <div class="flex flex-col items-center gap-2">
           <n-image
             :src="wechat"
-            alt="微信收款码"
+            :alt="t('common.wechat')"
             class="w-60 h-60 rounded-lg cursor-none"
             preview-disabled
           />
-          <span class="text-sm text-gray-700 dark:text-gray-200">微信支付</span>
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.wechat') }}</span>
         </div>
       </div>
     </div>
@@ -106,38 +113,27 @@
 </template>
 
 <script setup lang="ts">
-import axios from 'axios';
 import { computed, onActivated, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+import type { Donor } from '@/api/donation';
+import { getDonationList } from '@/api/donation';
 import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 
+const { t } = useI18n();
+
 // 默认头像
 const defaultAvatar = 'https://avatars.githubusercontent.com/u/0?v=4';
 
-// 捐赠者数据
-interface Donor {
-  id: number;
-  name: string;
-  amount: number;
-  date: string;
-  message?: string;
-  avatar?: string;
-  badge: string;
-  badgeColor: string;
-}
-
 const donors = ref<Donor[]>([]);
-
 const isLoading = ref(false);
 
 const fetchDonors = async () => {
   isLoading.value = true;
   try {
-    const response = await axios.get(
-      'https://www.ghproxy.cn/https://raw.githubusercontent.com/algerkong/data/main/donors.json'
-    );
-    donors.value = response.data.map((donor: Donor, index: number) => ({
+    const data = await getDonationList();
+    donors.value = data.map((donor, index) => ({
       ...donor,
       avatar: `https://api.dicebear.com/7.x/micah/svg?seed=${index}`
     }));
@@ -236,6 +232,10 @@ const displayDonors = computed(() => {
 const toggleExpand = () => {
   isExpanded.value = !isExpanded.value;
 };
+
+const toDonateList = () => {
+  window.open('http://donate.alger.fun', '_blank');
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/common/DownloadDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="download-drawer-trigger">
     <n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0">
-      <n-button circle @click="showDrawer = true">
+      <n-button circle @click="settingsStore.showDownloadDrawer = true">
         <template #icon>
           <i class="iconfont ri-download-cloud-2-line"></i>
         </template>
@@ -9,19 +9,26 @@
     </n-badge>
   </div>
 
-  <n-drawer v-model:show="showDrawer" :height="'80%'" placement="bottom">
-    <n-drawer-content title="下载管理" closable :native-scrollbar="false">
+  <n-drawer
+    v-model:show="showDrawer"
+    :height="'80%'"
+    placement="bottom"
+    @after-leave="handleDrawerClose"
+  >
+    <n-drawer-content :title="t('download.title')" closable :native-scrollbar="false">
       <div class="drawer-container">
         <n-tabs type="line" animated class="h-full">
           <!-- 下载列表 -->
-          <n-tab-pane name="downloading" tab="下载中" class="h-full">
+          <n-tab-pane name="downloading" :tab="t('download.tabs.downloading')" class="h-full">
             <div class="download-list">
               <div v-if="downloadList.length === 0" class="empty-tip">
-                <n-empty description="暂无下载任务" />
+                <n-empty :description="t('download.empty.noTasks')" />
               </div>
               <template v-else>
                 <div class="total-progress">
-                  <div class="total-progress-text">总进度: {{ totalProgress.toFixed(1) }}%</div>
+                  <div class="total-progress-text">
+                    {{ t('download.progress.total', { progress: totalProgress.toFixed(1) }) }}
+                  </div>
                   <n-progress
                     type="line"
                     :percentage="Number(totalProgress.toFixed(1))"
@@ -47,7 +54,10 @@
                             {{ item.filename }}
                           </div>
                           <div class="download-item-artist">
-                            {{ item.songInfo?.ar?.map((a) => a.name).join(', ') || '未知歌手' }}
+                            {{
+                              item.songInfo?.ar?.map((a) => a.name).join(', ') ||
+                              t('download.artist.unknown')
+                            }}
                           </div>
                           <div class="download-item-progress">
                             <n-progress
@@ -78,14 +88,14 @@
           </n-tab-pane>
 
           <!-- 已下载列表 -->
-          <n-tab-pane name="downloaded" tab="已下载" class="h-full">
+          <n-tab-pane name="downloaded" :tab="t('download.tabs.downloaded')" class="h-full">
             <div class="downloaded-list">
               <div v-if="downloadedList.length === 0" class="empty-tip">
-                <n-empty description="暂无已下载歌曲" />
+                <n-empty :description="t('download.empty.noDownloaded')" />
               </div>
               <div v-else class="downloaded-content">
                 <div class="downloaded-items">
-                  <div v-for="item in downloadedList" :key="item.path" class="downloaded-item">
+                  <div v-for="item in downList" :key="item.path" class="downloaded-item">
                     <div class="downloaded-item-content">
                       <div class="downloaded-item-cover">
                         <n-image
@@ -105,11 +115,11 @@
                         <div class="downloaded-item-size">{{ formatSize(item.size) }}</div>
                       </div>
                       <div class="downloaded-item-actions">
-                        <n-button text type="primary" size="large" @click="handlePlayMusic(item)">
+                        <!-- <n-button text type="primary" size="large" @click="handlePlayMusic(item)">
                           <template #icon>
                             <i class="iconfont ri-play-circle-line text-xl"></i>
                           </template>
-                        </n-button>
+                        </n-button> -->
                         <n-button
                           text
                           type="primary"
@@ -138,19 +148,28 @@
   </n-drawer>
 
   <!-- 删除确认对话框 -->
-  <n-modal v-model:show="showDeleteConfirm" preset="dialog" type="warning" title="删除确认">
+  <n-modal
+    v-model:show="showDeleteConfirm"
+    preset="dialog"
+    type="warning"
+    :title="t('download.delete.title')"
+  >
     <template #header>
       <div class="flex items-center">
         <i class="iconfont ri-error-warning-line mr-2 text-xl"></i>
-        <span>删除确认</span>
+        <span>{{ t('download.delete.title') }}</span>
       </div>
     </template>
     <div class="delete-confirm-content">
-      确定要删除歌曲 "{{ itemToDelete?.filename }}" 吗？此操作不可恢复。
+      {{ t('download.delete.message', { filename: itemToDelete?.filename }) }}
     </div>
     <template #action>
-      <n-button size="small" @click="showDeleteConfirm = false">取消</n-button>
-      <n-button size="small" type="warning" @click="confirmDelete">确定删除</n-button>
+      <n-button size="small" @click="showDeleteConfirm = false">{{
+        t('download.delete.cancel')
+      }}</n-button>
+      <n-button size="small" type="warning" @click="confirmDelete">{{
+        t('download.delete.confirm')
+      }}</n-button>
     </template>
   </n-modal>
 </template>
@@ -159,11 +178,16 @@
 import type { ProgressStatus } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref } from 'vue';
-import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 import { getMusicDetail } from '@/api/music';
-import { audioService } from '@/services/audioService';
+// import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
+// import { audioService } from '@/services/audioService';
 import { getImgUrl } from '@/utils';
+// import { SongResult } from '@/type/music';
+
+const { t } = useI18n();
 
 interface DownloadItem {
   filename: string;
@@ -185,15 +209,25 @@ interface DownloadedItem {
   ar: { name: string }[];
 }
 
-const store = useStore();
 const message = useMessage();
-const showDrawer = ref(false);
-const downloadList = ref<DownloadItem[]>([]);
-const downloadedList = ref<DownloadedItem[]>([]);
+// const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
 
-// 获取播放状态
-const play = computed(() => store.state.play as boolean);
-const currentMusic = computed(() => store.state.playMusic);
+const showDrawer = computed({
+  get: () => settingsStore.showDownloadDrawer,
+  set: (val) => {
+    settingsStore.showDownloadDrawer = val;
+  }
+});
+
+const downloadList = ref<DownloadItem[]>([]);
+const downloadedList = ref<DownloadedItem[]>(
+  JSON.parse(localStorage.getItem('downloadedList') || '[]')
+);
+
+const downList = computed(() => {
+  return (downloadedList.value as DownloadedItem[]).reverse();
+});
 
 // 计算下载中的任务数量
 const downloadingCount = computed(() => {
@@ -231,13 +265,13 @@ const getStatusType = (item: DownloadItem) => {
 const getStatusText = (item: DownloadItem) => {
   switch (item.status) {
     case 'downloading':
-      return '下载中';
+      return t('download.status.downloading');
     case 'completed':
-      return '已完成';
+      return t('download.status.completed');
     case 'error':
-      return '失败';
+      return t('download.status.failed');
     default:
-      return '未知';
+      return t('download.status.unknown');
   }
 };
 
@@ -264,8 +298,7 @@ const formatSize = (bytes: number) => {
 
 // 打开目录
 const openDirectory = (path: string) => {
-  const directory = path.substring(0, path.lastIndexOf('/'));
-  window.electron.ipcRenderer.send('open-directory', directory);
+  window.electron.ipcRenderer.send('open-directory', path);
 };
 
 // 删除相关
@@ -288,14 +321,22 @@ const confirmDelete = async () => {
       itemToDelete.value.path
     );
     if (success) {
+      localStorage.setItem(
+        'downloadedList',
+        JSON.stringify(
+          downloadedList.value.filter(
+            (item) => item.id !== (itemToDelete.value as DownloadedItem).id
+          )
+        )
+      );
       await refreshDownloadedList();
-      message.success('删除成功');
+      message.success(t('download.delete.success'));
     } else {
-      message.error('删除失败');
+      message.error(t('download.delete.failed'));
     }
   } catch (error) {
     console.error('Failed to delete music:', error);
-    message.error('删除失败');
+    message.error(t('download.delete.failed'));
   } finally {
     showDeleteConfirm.value = false;
     itemToDelete.value = null;
@@ -303,58 +344,19 @@ const confirmDelete = async () => {
 };
 
 // 播放音乐
-const handlePlayMusic = async (item: DownloadedItem) => {
-  // 确保路径正确编码
-  const encodedPath = encodeURIComponent(item.path);
-  const localUrl = `local://${encodedPath}`;
-
-  const musicInfo = {
-    name: item.filename,
-    id: item.id,
-    url: localUrl,
-    playMusicUrl: localUrl,
-    picUrl: item.picUrl,
-    ar: item.ar || [{ name: '本地音乐' }],
-    song: {
-      artists: item.ar || [{ name: '本地音乐' }]
-    },
-    al: {
-      picUrl: item.picUrl || '/images/default_cover.png'
-    }
-  };
-
-  // 如果是当前播放的音乐，则切换播放状态
-  if (currentMusic.value?.id === item.id) {
-    if (play.value) {
-      audioService.getCurrentSound()?.pause();
-      store.commit('setPlayMusic', false);
-    } else {
-      audioService.getCurrentSound()?.play();
-      store.commit('setPlayMusic', true);
-    }
-    return;
-  }
-
-  // 播放新的音乐
-  store.commit('setPlay', musicInfo);
-  store.commit('setPlayMusic', true);
-  store.commit('setIsPlay', true);
-
-  store.commit(
-    'setPlayList',
-    downloadedList.value.map((item) => ({
-      ...item,
-      playMusicUrl: `local://${encodeURIComponent(item.path)}`
-    }))
-  );
-};
+// const handlePlay = async (musicInfo: SongResult) => {
+//   await playerStore.setPlay(musicInfo);
+//   playerStore.setPlayMusic(true);
+//   playerStore.setIsPlay(true);
+// };
 
 // 获取已下载音乐列表
 const refreshDownloadedList = async () => {
   try {
+    let saveList: any = [];
     const list = await window.electron.ipcRenderer.invoke('get-downloaded-music');
     if (!Array.isArray(list) || list.length === 0) {
-      downloadedList.value = [];
+      saveList = [];
       return;
     }
 
@@ -369,27 +371,39 @@ const refreshDownloadedList = async () => {
           return acc;
         }, {});
 
-        downloadedList.value = list.map((item) => {
+        saveList = list.map((item) => {
           const songDetail = songDetails[item.id];
           return {
             ...item,
             picUrl: songDetail?.al?.picUrl || item.picUrl || '/images/default_cover.png',
-            ar: songDetail?.ar || item.ar || [{ name: '本地音乐' }]
+            ar: songDetail?.ar || item.ar || [{ name: t('download.localMusic') }]
           };
         });
       } catch (detailError) {
         console.error('Failed to get music details:', detailError);
-        downloadedList.value = list;
+        saveList = list;
       }
     } else {
-      downloadedList.value = list;
+      saveList = list;
     }
+    setLocalDownloadedList(saveList);
   } catch (error) {
     console.error('Failed to get downloaded music list:', error);
     downloadedList.value = [];
   }
 };
 
+const setLocalDownloadedList = (list: DownloadedItem[]) => {
+  const localList = localStorage.getItem('downloadedList');
+  // 合并 去重
+  const saveList = [...(localList ? JSON.parse(localList) : []), ...list];
+  const uniqueList = saveList.filter(
+    (item, index, self) => index === self.findIndex((t) => t.id === item.id)
+  );
+  localStorage.setItem('downloadedList', JSON.stringify(uniqueList));
+  downloadedList.value = uniqueList;
+};
+
 // 监听抽屉显示状态
 watch(
   () => showDrawer.value,
@@ -432,7 +446,7 @@ onMounted(() => {
       downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
       // 刷新已下载列表
       refreshDownloadedList();
-      message.success(`${data.filename} 下载完成`);
+      message.success(t('download.message.downloadComplete', { filename: data.filename }));
     } else {
       const existingItem = downloadList.value.find((item) => item.filename === data.filename);
       if (existingItem) {
@@ -445,7 +459,9 @@ onMounted(() => {
           downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
         }, 3000);
       }
-      message.error(`${data.filename} 下载失败: ${data.error}`);
+      message.error(
+        t('download.message.downloadFailed', { filename: data.filename, error: data.error })
+      );
     }
   });
 
@@ -465,6 +481,10 @@ onMounted(() => {
     }
   });
 });
+
+const handleDrawerClose = () => {
+  settingsStore.showDownloadDrawer = false;
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/common/InstallAppModal.vue

@@ -13,24 +13,28 @@
         </div>
         <div class="app-info">
           <h2 class="app-name">Alger Music Player {{ config.version }}</h2>
-          <p class="app-desc mb-2">在桌面安装应用，获得更好的体验</p>
-          <n-checkbox v-model:checked="noPrompt">不再提示</n-checkbox>
+          <p class="app-desc mb-2">{{ t('comp.installApp.description') }}</p>
+          <n-checkbox v-model:checked="noPrompt">{{ t('comp.installApp.noPrompt') }}</n-checkbox>
         </div>
       </div>
       <div class="modal-actions">
-        <n-button class="cancel-btn" @click="closeModal">暂不安装</n-button>
-        <n-button type="primary" class="install-btn" @click="handleInstall">立即安装</n-button>
+        <n-button class="cancel-btn" @click="closeModal">{{
+          t('comp.installApp.cancel')
+        }}</n-button>
+        <n-button type="primary" class="install-btn" @click="handleInstall">{{
+          t('comp.installApp.install')
+        }}</n-button>
       </div>
       <div class="modal-desc mt-4 text-center">
         <p class="text-xs text-gray-400">
-          下载遇到问题？去
+          {{ t('comp.installApp.downloadProblem') }}
           <a
             class="text-green-500"
             target="_blank"
             href="https://github.com/algerkong/AlgerMusicPlayer/releases"
             >GitHub</a
           >
-          下载最新版本
+          {{ t('comp.installApp.downloadProblemLinkText') }}
         </p>
       </div>
     </div>
@@ -39,12 +43,15 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { isElectron, isMobile } from '@/utils';
-import { getLatestReleaseInfo } from '@/utils/update';
+import { getLatestReleaseInfo, getProxyNodes } from '@/utils/update';
 
 import config from '../../../../package.json';
 
+const { t } = useI18n();
+
 const showModal = ref(false);
 const noPrompt = ref(false);
 const releaseInfo = ref<any>(null);
@@ -56,6 +63,8 @@ const closeModal = () => {
   }
 };
 
+const proxyHosts = ref<string[]>([]);
+
 onMounted(async () => {
   // 如果是 electron 环境，不显示安装提示
   if (isElectron || isMobile.value) {
@@ -71,6 +80,7 @@ onMounted(async () => {
   // 获取最新版本信息
   releaseInfo.value = await getLatestReleaseInfo();
   showModal.value = true;
+  proxyHosts.value = await getProxyNodes();
 });
 
 const handleInstall = async (): Promise<void> => {
@@ -111,7 +121,8 @@ const handleInstall = async (): Promise<void> => {
   }
 
   if (downloadUrl) {
-    window.open(`https://ghproxy.cn/${downloadUrl}`, '_blank');
+    const proxyDownloadUrl = `${proxyHosts.value[0]}/${downloadUrl}`;
+    window.open(proxyDownloadUrl, '_blank');
   } else {
     // 如果没有找到对应的安装包，跳转到 release 页面
     window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');

src/renderer/components/common/PlayBottom.vue

@@ -3,10 +3,13 @@
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+import { usePlayerStore } from '@/store/modules/player';
+
+const playerStore = usePlayerStore();
+const isPlay = computed(() => playerStore.playMusicUrl);
 
-const store = useStore();
-const isPlay = computed(() => store.state.isPlay as boolean);
 defineProps({
   height: {
     type: String,

src/renderer/components/common/PlaylistDrawer.vue

@@ -0,0 +1,370 @@
+<template>
+  <n-drawer
+    :show="modelValue"
+    :width="400"
+    placement="right"
+    @update:show="$emit('update:modelValue', $event)"
+  >
+    <n-drawer-content :title="t('comp.playlistDrawer.title')" class="mac-style-drawer">
+      <n-scrollbar class="h-full">
+        <div class="playlist-drawer">
+          <!-- 创建新歌单按钮和表单 -->
+          <div class="create-playlist-section">
+            <div
+              class="create-playlist-button"
+              :class="{ 'is-expanded': isCreating }"
+              @click="toggleCreateForm"
+            >
+              <div class="create-playlist-icon">
+                <i class="iconfont" :class="isCreating ? 'ri-close-line' : 'ri-add-line'"></i>
+              </div>
+              <div class="create-playlist-text">
+                {{
+                  isCreating
+                    ? t('comp.playlistDrawer.cancelCreate')
+                    : t('comp.playlistDrawer.createPlaylist')
+                }}
+              </div>
+            </div>
+
+            <!-- 创建歌单表单 -->
+            <div class="create-playlist-form" :class="{ 'is-visible': isCreating }">
+              <n-input
+                v-model:value="formValue.name"
+                :placeholder="t('comp.playlistDrawer.playlistName')"
+                maxlength="40"
+                class="mac-style-input"
+                :status="inputError ? 'error' : undefined"
+              >
+                <template #prefix>
+                  <i class="iconfont ri-music-2-line"></i>
+                </template>
+              </n-input>
+              <div class="privacy-switch">
+                <div class="privacy-label">
+                  <i
+                    class="iconfont"
+                    :class="formValue.privacy ? 'ri-lock-line' : 'ri-earth-line'"
+                  ></i>
+                  <span>{{
+                    formValue.privacy
+                      ? t('comp.playlistDrawer.privatePlaylist')
+                      : t('comp.playlistDrawer.publicPlaylist')
+                  }}</span>
+                </div>
+                <n-switch v-model:value="formValue.privacy" class="mac-style-switch">
+                  <template #checked>{{ t('comp.playlistDrawer.private') }}</template>
+                  <template #unchecked>{{ t('comp.playlistDrawer.public') }}</template>
+                </n-switch>
+              </div>
+              <div class="form-actions">
+                <n-button
+                  type="primary"
+                  quaternary
+                  class="mac-style-button"
+                  :loading="creating"
+                  :disabled="!formValue.name"
+                  @click="handleCreatePlaylist"
+                >
+                  {{ t('comp.playlistDrawer.create') }}
+                </n-button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 歌单列表 -->
+          <div class="playlist-list">
+            <div
+              v-for="playlist in playlists"
+              :key="playlist.id"
+              class="playlist-item"
+              @click="handleAddToPlaylist(playlist)"
+            >
+              <n-image
+                :src="getImgUrl(playlist.coverImgUrl || playlist.picUrl, '100y100')"
+                class="playlist-item-img"
+                preview-disabled
+                :img-props="{
+                  crossorigin: 'anonymous'
+                }"
+              />
+              <div class="playlist-item-info">
+                <div class="playlist-item-name">{{ playlist.name }}</div>
+                <div class="playlist-item-count">
+                  {{ playlist.trackCount }}
+                  {{ t('comp.playlistDrawer.count') }}
+                </div>
+              </div>
+              <div class="playlist-item-action">
+                <i class="iconfont ri-add-line"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </n-scrollbar>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { createPlaylist, updatePlaylistTracks } from '@/api/music';
+import { getUserPlaylist } from '@/api/user';
+import { useUserStore } from '@/store';
+import { getImgUrl } from '@/utils';
+
+const store = useUserStore();
+const { t } = useI18n();
+const props = defineProps<{
+  modelValue: boolean;
+  songId?: number;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const message = useMessage();
+const playlists = ref<any[]>([]);
+const creating = ref(false);
+const isCreating = ref(false);
+
+const formValue = ref({
+  name: '',
+  privacy: false
+});
+
+const inputError = computed(() => {
+  return isCreating.value && !formValue.value.name;
+});
+
+const toggleCreateForm = () => {
+  if (creating.value) return;
+  isCreating.value = !isCreating.value;
+  if (!isCreating.value) {
+    formValue.value.name = '';
+    formValue.value.privacy = false;
+  }
+};
+
+// 获取用户歌单
+const fetchUserPlaylists = async () => {
+  try {
+    const { user } = store;
+    if (!user?.userId) {
+      message.error(t('comp.playlistDrawer.loginFirst'));
+      emit('update:modelValue', false);
+      return;
+    }
+
+    const res = await getUserPlaylist(user.userId);
+    if (res.data?.playlist) {
+      playlists.value = res.data.playlist;
+    }
+  } catch (error) {
+    console.error('获取歌单失败:', error);
+    message.error(t('comp.playlistDrawer.getPlaylistFailed'));
+  }
+};
+
+// 添加到歌单
+const handleAddToPlaylist = async (playlist: any) => {
+  if (!props.songId) return;
+  try {
+    const res = await updatePlaylistTracks({
+      op: 'add',
+      pid: playlist.id,
+      tracks: props.songId.toString()
+    });
+    console.log('res.data', res.data);
+
+    if (res.status === 200) {
+      message.success(t('comp.playlistDrawer.addSuccess'));
+      emit('update:modelValue', false);
+    } else {
+      throw new Error(res.data?.msg || t('comp.playlistDrawer.addFailed'));
+    }
+  } catch (error: any) {
+    console.error('添加到歌单失败:', error);
+    message.error(error.message || t('comp.playlistDrawer.addFailed'));
+  }
+};
+
+// 创建歌单
+const handleCreatePlaylist = async () => {
+  if (!formValue.value.name) {
+    message.error(t('comp.playlistDrawer.inputPlaylistName'));
+    return;
+  }
+
+  try {
+    creating.value = true;
+
+    const res = await createPlaylist({
+      name: formValue.value.name,
+      privacy: formValue.value.privacy ? 10 : 0
+    });
+
+    if (res.data?.id) {
+      message.success(t('comp.playlistDrawer.createSuccess'));
+      isCreating.value = false;
+      formValue.value.name = '';
+      formValue.value.privacy = false;
+      await fetchUserPlaylists();
+    }
+  } catch (error) {
+    console.error('创建歌单失败:', error);
+    message.error(t('comp.playlistDrawer.createFailed'));
+  } finally {
+    creating.value = false;
+  }
+};
+
+// 监听显示状态变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      fetchUserPlaylists();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.mac-style-drawer {
+  @apply h-full;
+
+  :deep(.n-drawer-header__main) {
+    @apply text-base font-medium;
+  }
+
+  :deep(.n-drawer-content) {
+    @apply h-full;
+  }
+
+  :deep(.n-drawer-content-wrapper) {
+    @apply h-full;
+  }
+
+  :deep(.n-scrollbar-rail) {
+    @apply right-0.5;
+  }
+}
+
+.playlist-drawer {
+  @apply flex flex-col gap-6;
+}
+
+.create-playlist-section {
+  @apply flex flex-col;
+}
+
+.create-playlist-button {
+  @apply flex items-center gap-4 p-3 rounded-xl cursor-pointer transition-all duration-200
+         bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
+
+  &.is-expanded {
+    @apply bg-gray-100 dark:bg-gray-700;
+
+    .create-playlist-icon {
+      transform: rotate(45deg);
+    }
+  }
+
+  &-icon {
+    @apply w-10 h-10 rounded-xl bg-green-500 flex items-center justify-center text-white
+           transition-all duration-300;
+
+    .iconfont {
+      @apply text-xl transition-transform duration-300;
+    }
+  }
+
+  &-text {
+    @apply text-sm font-medium transition-colors duration-300;
+  }
+}
+
+.create-playlist-form {
+  @apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out opacity-0;
+
+  &.is-visible {
+    @apply max-h-[200px] mt-4 opacity-100;
+  }
+
+  .mac-style-input {
+    @apply rounded-lg;
+    :deep(.n-input-wrapper) {
+      @apply bg-gray-50 dark:bg-gray-800 border-0;
+    }
+    :deep(.n-input__input) {
+      @apply text-sm;
+    }
+    :deep(.n-input__prefix) {
+      @apply text-gray-400;
+    }
+  }
+
+  .form-actions {
+    @apply mt-4;
+    .mac-style-button {
+      @apply w-full rounded-lg text-sm py-2 bg-green-500 hover:bg-green-600 text-white;
+    }
+  }
+}
+
+.privacy-switch {
+  @apply flex items-center justify-between mt-4 px-2;
+
+  .privacy-label {
+    @apply flex items-center gap-2;
+
+    .iconfont {
+      @apply text-base text-gray-500 dark:text-gray-400;
+    }
+    span {
+      @apply text-sm;
+    }
+  }
+
+  :deep(.n-switch) {
+    @apply h-5 min-w-[40px];
+  }
+}
+
+.playlist-list {
+  @apply flex flex-col gap-2;
+}
+
+.playlist-item {
+  @apply flex items-center gap-3 p-2 rounded-xl cursor-pointer transition-all duration-200
+         hover:bg-gray-50 dark:hover:bg-gray-800;
+
+  &-img {
+    @apply w-10 h-10 rounded-xl;
+  }
+
+  &-info {
+    @apply flex-1 min-w-0;
+  }
+
+  &-name {
+    @apply text-sm font-medium truncate;
+  }
+
+  &-count {
+    @apply text-xs text-gray-500 dark:text-gray-400;
+  }
+
+  &-action {
+    @apply w-8 h-8 rounded-lg flex items-center justify-center
+           text-gray-400 hover:text-green-500 transition-colors duration-200;
+
+    .iconfont {
+      @apply text-xl;
+    }
+  }
+}
+</style>

src/renderer/components/common/SearchItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-item" :class="[item.type, shape]" @click="handleClick">
+  <div class="search-item" :class="[shape, item.type]" @click="handleClick">
     <div class="search-item-img">
       <n-image
         class="w-full h-full"
@@ -40,11 +40,10 @@
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex';
-
 import { getAlbum, getListDetail } from '@/api/list';
 import MvPlayer from '@/components/MvPlayer.vue';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';
 
@@ -72,6 +71,8 @@ const songList = ref<any[]>([]);
 const showPop = ref(false);
 const listInfo = ref<any>(null);
 
+const playerStore = usePlayerStore();
+
 const getCurrentMv = () => {
   return {
     id: props.item.id,
@@ -79,8 +80,6 @@ const getCurrentMv = () => {
   } as unknown as IMvItem;
 };
 
-const store = useStore();
-
 const handleClick = async () => {
   listInfo.value = null;
   if (props.item.type === '专辑') {
@@ -108,12 +107,16 @@ const handleClick = async () => {
   }
 
   if (props.item.type === 'mv') {
-    store.commit('setIsPlay', false);
-    store.commit('setPlayMusic', false);
-    audioService.getCurrentSound()?.pause();
-    showPop.value = true;
+    handleShowMv();
   }
 };
+
+const handleShowMv = async () => {
+  playerStore.setIsPlay(false);
+  playerStore.setPlayMusic(false);
+  audioService.getCurrentSound()?.pause();
+  showPop.value = true;
+};
 </script>
 
 <style scoped lang="scss">
@@ -168,15 +171,15 @@ const handleClick = async () => {
   }
 }
 
-.mv {
+.search-item.mv {
   &:hover {
     .play {
       @apply opacity-60;
     }
   }
   .search-item-img {
-    width: 160px;
-    height: 90px;
+    width: 160px !important;
+    height: 90px !important;
     @apply rounded-lg relative;
   }
   .play {

src/renderer/components/common/SongItem.vue

@@ -73,9 +73,10 @@
     <n-dropdown
       v-if="isElectron"
       :show="showDropdown"
-      :options="dropdownOptions"
       :x="dropdownX"
       :y="dropdownY"
+      :options="dropdownOptions"
+      :z-index="99999"
       placement="bottom-start"
       @clickoutside="showDropdown = false"
       @select="handleSelect"
@@ -86,16 +87,20 @@
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash';
 import type { MenuOption } from 'naive-ui';
-import { useMessage } from 'naive-ui';
-import { computed, h, ref, useTemplateRef } from 'vue';
-import { useStore } from 'vuex';
+import { NImage, NText, useMessage } from 'naive-ui';
+import { computed, h, inject, ref, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { getSongUrl } from '@/hooks/MusicListHook';
+import { useArtist } from '@/hooks/useArtist';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';
 
+const { t } = useI18n();
+
 const props = withDefaults(
   defineProps<{
     item: SongResult;
@@ -104,21 +109,24 @@ const props = withDefaults(
     favorite?: boolean;
     selectable?: boolean;
     selected?: boolean;
+    canRemove?: boolean;
   }>(),
   {
     mini: false,
     list: false,
     favorite: true,
     selectable: false,
-    selected: false
+    selected: false,
+    canRemove: false
   }
 );
 
-const store = useStore();
+const playerStore = usePlayerStore();
+
 const message = useMessage();
 
-const play = computed(() => store.state.play as boolean);
-const playMusic = computed(() => store.state.playMusic);
+const play = computed(() => playerStore.isPlay);
+const playMusic = computed(() => playerStore.playMusic);
 const playLoading = computed(
   () => playMusic.value.id === props.item.id && playMusic.value.playLoading
 );
@@ -132,14 +140,116 @@ const dropdownY = ref(0);
 
 const isDownloading = ref(false);
 
-const dropdownOptions = computed<MenuOption[]>(() => [
-  {
-    label: isDownloading.value ? '下载中...' : `下载 ${props.item.name}`,
-    key: 'download',
-    icon: () => h('i', { class: 'iconfont ri-download-line' }),
-    disabled: isDownloading.value
+const openPlaylistDrawer = inject<(songId: number | string) => void>('openPlaylistDrawer');
+
+const { navigateToArtist } = useArtist();
+
+const renderSongPreview = () => {
+  return h(
+    'div',
+    {
+      class: 'flex items-center gap-3 px-2 py-1 dark:border-gray-800'
+    },
+    [
+      h(NImage, {
+        src: getImgUrl(props.item.picUrl || props.item.al?.picUrl, '100y100'),
+        class: 'w-10 h-10 rounded-lg flex-shrink-0',
+        previewDisabled: true,
+        imgProps: {
+          crossorigin: 'anonymous'
+        }
+      }),
+      h(
+        'div',
+        {
+          class: 'flex-1 min-w-0 py-1'
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'mb-1'
+            },
+            [
+              h(
+                NText,
+                {
+                  depth: 1,
+                  class: 'text-sm font-medium'
+                },
+                {
+                  default: () => props.item.name
+                }
+              )
+            ]
+          )
+        ]
+      )
+    ]
+  );
+};
+
+const dropdownOptions = computed<MenuOption[]>(() => {
+  const options: MenuOption[] = [
+    {
+      key: 'header',
+      type: 'render',
+      render: renderSongPreview
+    },
+    {
+      key: 'divider1',
+      type: 'divider'
+    },
+    {
+      label: t('songItem.menu.play'),
+      key: 'play',
+      icon: () => h('i', { class: 'iconfont ri-play-circle-line' })
+    },
+    {
+      label: t('songItem.menu.playNext'),
+      key: 'playNext',
+      icon: () => h('i', { class: 'iconfont ri-play-list-2-line' })
+    },
+    {
+      type: 'divider',
+      key: 'd1'
+    },
+    {
+      label: t('songItem.menu.download'),
+      key: 'download',
+      icon: () => h('i', { class: 'iconfont ri-download-line' })
+    },
+    {
+      label: t('songItem.menu.addToPlaylist'),
+      key: 'addToPlaylist',
+      icon: () => h('i', { class: 'iconfont ri-folder-add-line' })
+    },
+    {
+      label: isFavorite.value ? t('songItem.menu.unfavorite') : t('songItem.menu.favorite'),
+      key: 'favorite',
+      icon: () =>
+        h('i', {
+          class: `iconfont ${isFavorite.value ? 'ri-heart-fill text-red-500' : 'ri-heart-line'}`
+        })
+    }
+  ];
+
+  if (props.canRemove) {
+    options.push(
+      {
+        type: 'divider',
+        key: 'd2'
+      },
+      {
+        label: t('songItem.menu.removeFromPlaylist'),
+        key: 'remove',
+        icon: () => h('i', { class: 'iconfont ri-delete-bin-line' })
+      }
+    );
   }
-]);
+
+  return options;
+});
 
 const handleContextMenu = (e: MouseEvent) => {
   e.preventDefault();
@@ -152,22 +262,32 @@ const handleSelect = (key: string | number) => {
   showDropdown.value = false;
   if (key === 'download') {
     downloadMusic();
+  } else if (key === 'playNext') {
+    handlePlayNext();
+  } else if (key === 'addToPlaylist') {
+    openPlaylistDrawer?.(props.item.id);
+  } else if (key === 'favorite') {
+    toggleFavorite(new Event('click'));
+  } else if (key === 'play') {
+    playMusicEvent(props.item);
+  } else if (key === 'remove') {
+    emits('remove-song', props.item.id);
   }
 };
 
 // 下载音乐
 const downloadMusic = async () => {
   if (isDownloading.value) {
-    message.warning('正在下载中，请稍候...');
+    message.warning(t('songItem.message.downloading'));
     return;
   }
 
   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('获取音乐下载地址失败');
+      throw new Error(t('songItem.message.getUrlFailed'));
     }
 
     // 构建文件名
@@ -185,7 +305,7 @@ const downloadMusic = async () => {
       }
     });
 
-    message.success('已加入下载队列');
+    message.success(t('songItem.message.downloadQueued'));
 
     // 监听下载完成事件
     const handleDownloadComplete = (_, result) => {
@@ -218,11 +338,11 @@ const downloadMusic = async () => {
   } catch (error: any) {
     console.error('Download error:', error);
     isDownloading.value = false;
-    message.error(error.message || '下载失败');
+    message.error(error.message || t('songItem.message.downloadFailed'));
   }
 };
 
-const emits = defineEmits(['play', 'select']);
+const emits = defineEmits(['play', 'select', 'remove-song']);
 const songImageRef = useTemplateRef('songImg');
 
 const imageLoad = async () => {
@@ -238,33 +358,48 @@ const imageLoad = async () => {
 
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = async (item: SongResult) => {
+  // 如果是当前正在播放的音乐，则切换播放/暂停状态
   if (playMusic.value.id === item.id) {
     if (play.value) {
-      store.commit('setPlayMusic', false);
+      playerStore.setPlayMusic(false);
       audioService.getCurrentSound()?.pause();
     } else {
-      store.commit('setPlayMusic', true);
+      playerStore.setPlayMusic(true);
       audioService.getCurrentSound()?.play();
     }
     return;
   }
-  await store.commit('setPlay', item);
-  store.commit('setIsPlay', 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 store.state.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) {
-    store.commit('removeFromFavorite', props.item.id);
+    playerStore.removeFromFavorite(numericId);
   } else {
-    store.commit('addToFavorite', props.item.id);
+    playerStore.addToFavorite(numericId);
   }
 };
 
@@ -274,13 +409,19 @@ const toggleSelect = () => {
 };
 
 const handleArtistClick = (id: number) => {
-  store.commit('setCurrentArtistId', id);
+  navigateToArtist(id);
 };
 
 // 获取歌手列表（最多显示5个）
 const artists = computed(() => {
   return (props.item.ar || props.item.song?.artists)?.slice(0, 4) || [];
 });
+
+// 添加到下一首播放
+const handlePlayNext = () => {
+  playerStore.addToNextPlay(props.item);
+  message.success(t('songItem.message.addedToNextPlay'));
+};
 </script>
 
 <style lang="scss" scoped>
@@ -450,4 +591,56 @@ const artists = computed(() => {
     }
   }
 }
+
+:deep(.n-dropdown-menu) {
+  @apply min-w-[240px] overflow-hidden rounded-lg border dark:border-gray-800;
+
+  .n-dropdown-option {
+    @apply h-9 text-sm;
+
+    &:hover {
+      @apply bg-gray-100 dark:bg-gray-800;
+    }
+
+    .n-dropdown-option-body {
+      @apply h-full;
+
+      .n-dropdown-option-body__prefix {
+        @apply w-8 flex justify-center items-center;
+
+        .iconfont {
+          @apply text-base;
+        }
+      }
+    }
+  }
+
+  .n-dropdown-divider {
+    @apply my-1;
+  }
+}
+
+:deep(.song-preview) {
+  @apply flex items-center gap-3 p-3 border-b dark:border-gray-800;
+
+  .n-image {
+    @apply w-12 h-12 rounded-lg flex-shrink-0;
+  }
+
+  .song-preview-info {
+    @apply flex-1 min-w-0 py-1;
+
+    .song-preview-name {
+      @apply text-sm font-medium truncate mb-1;
+    }
+
+    .song-preview-artist {
+      @apply text-xs text-gray-500 dark:text-gray-400 truncate;
+    }
+  }
+}
+
+:deep(.n-dropdown-option-body--render) {
+  @apply p-0;
+}
 </style>

src/renderer/components/common/UpdateModal.vue

@@ -14,8 +14,10 @@
           <img src="@/assets/logo.png" alt="App Icon" />
         </div>
         <div class="app-info">
-          <h2 class="app-name">发现新版本 {{ updateInfo.latestVersion }}</h2>
-          <p class="app-desc mb-2">当前版本 {{ updateInfo.currentVersion }}</p>
+          <h2 class="app-name">{{ t('comp.update.title') }} {{ updateInfo.latestVersion }}</h2>
+          <p class="app-desc mb-2">
+            {{ t('comp.update.currentVersion') }} {{ updateInfo.currentVersion }}
+          </p>
         </div>
       </div>
       <div class="update-info">
@@ -33,34 +35,33 @@
         </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">
-          下载遇到问题？去
+          {{ t('comp.installApp.downloadProblem') }}
           <a
             class="text-green-500"
             target="_blank"
             href="https://github.com/algerkong/AlgerMusicPlayer/releases"
             >GitHub</a
           >
-          下载最新版本
+          {{ t('comp.installApp.downloadProblemLinkText') }}
         </p>
       </div>
     </div>
@@ -69,20 +70,31 @@
 
 <script setup lang="ts">
 import { marked } from 'marked';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useStore } from 'vuex';
+import { computed, h, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { checkUpdate, UpdateResult } from '@/utils/update';
+import { useSettingsStore } from '@/store/modules/settings';
+import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
 
+const { t } = useI18n();
+const dialog = useDialog();
+const message = useMessage();
+
 // 配置 marked
 marked.setOptions({
   breaks: true, // 支持 GitHub 风格的换行
   gfm: true // 启用 GitHub 风格的 Markdown
 });
 
-const showModal = ref(false);
+const settingsStore = useSettingsStore();
+
+const showModal = computed({
+  get: () => settingsStore.showUpdateModal,
+  set: (val) => settingsStore.setShowUpdateModal(val)
+});
+
 const updateInfo = ref<UpdateResult>({
   hasUpdate: false,
   latestVersion: '',
@@ -90,28 +102,6 @@ const updateInfo = ref<UpdateResult>({
   releaseInfo: null
 });
 
-const store = useStore();
-
-// 添加计算属性
-const showUpdateModalState = computed({
-  get: () => store.state.showUpdateModal,
-  set: (val) => store.commit('setShowUpdateModal', val)
-});
-
-// 替换原来的 watch
-watch(showUpdateModalState, (newVal) => {
-  if (newVal) {
-    showModal.value = true;
-  }
-});
-
-watch(
-  () => showModal.value,
-  (newVal) => {
-    showUpdateModalState.value = newVal;
-  }
-);
-
 // 解析 Markdown
 const parsedReleaseNotes = computed(() => {
   if (!updateInfo.value.releaseInfo?.body) return '';
@@ -141,12 +131,17 @@ const checkForUpdates = async () => {
 
 const downloading = ref(false);
 const downloadProgress = ref(0);
-const downloadStatus = ref('准备下载...');
+const downloadStatus = ref(t('comp.update.prepareDownload'));
 const downloadBtnText = computed(() => {
-  if (downloading.value) return '下载中...';
-  return '立即更新';
+  if (downloading.value) return t('comp.update.downloading');
+  return t('comp.update.nowUpdate');
 });
 
+// 下载完成后的文件路径
+const downloadedFilePath = ref('');
+// 防止对话框重复弹出
+const isDialogShown = ref(false);
+
 // 处理下载状态更新
 const handleDownloadProgress = (_event: any, progress: number, status: string) => {
   downloadProgress.value = progress;
@@ -156,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('下载失败，请重试或手动下载');
+  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);
 });
@@ -174,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 () => {
@@ -225,15 +278,22 @@ const handleUpdate = async () => {
   if (downloadUrl) {
     try {
       downloading.value = true;
-      downloadStatus.value = '准备下载...';
-      window.electron.ipcRenderer.send('start-download', downloadUrl);
+      downloadStatus.value = t('comp.update.prepareDownload');
+      isDialogShown.value = false;
+
+      // 获取代理节点列表
+      const proxyHosts = await getProxyNodes();
+      const proxyDownloadUrl = `${proxyHosts[0]}/${downloadUrl}`;
+
+      // 发送所有可能的下载地址到主进程
+      window.electron.ipcRenderer.send('start-download', proxyDownloadUrl);
     } catch (error) {
       downloading.value = false;
-      window.$message.error('启动下载失败，请重试或手动下载');
+      message.error(t('comp.update.startFailed'));
       console.error('下载失败:', error);
     }
   } else {
-    window.$message.error('未找到适合当前系统的安装包，请手动下载');
+    message.error(t('comp.update.noDownloadUrl'));
     window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
   }
 };
@@ -360,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>

src/renderer/components/home/PlaylistType.vue

@@ -1,7 +1,9 @@
 <template>
   <!-- 歌单分类列表 -->
   <div class="play-list-type">
-    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
+      {{ t('comp.playlistType.title') }}
+    </div>
     <div>
       <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
         <span
@@ -34,7 +36,9 @@
         "
         @click="handleToggleShowAllPlaylistCategory"
       >
-        {{ !isShowAllPlaylistCategory ? '显示全部' : '隐藏一些' }}
+        {{
+          !isShowAllPlaylistCategory ? t('comp.playlistType.showAll') : t('comp.playlistType.hide')
+        }}
       </div>
     </div>
   </div>
@@ -42,11 +46,14 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import { getPlaylistCategory } from '@/api/home';
 import type { IPlayListSort } from '@/type/playlist';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
+
+const { t } = useI18n();
 // 歌单分类
 const playlistCategory = ref<IPlayListSort>();
 // 是否显示全部歌单分类

src/renderer/components/home/RecommendAlbum.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="recommend-album">
-    <div class="title" :class="setAnimationClass('animate__fadeInRight')">最新专辑</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInRight')">
+      {{ t('comp.recommendAlbum.title') }}
+    </div>
     <div class="recommend-album-list">
       <template v-for="(item, index) in albumData?.albums" :key="item.id">
         <div
@@ -33,6 +35,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { getNewAlbum } from '@/api/home';
 import { getAlbum } from '@/api/list';
@@ -40,6 +43,7 @@ import MusicList from '@/components/MusicList.vue';
 import type { IAlbumNew } from '@/type/album';
 import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
 
+const { t } = useI18n();
 const albumData = ref<IAlbumNew>();
 const loadAlbumList = async () => {
   const { data } = await getNewAlbum();

src/renderer/components/home/RecommendSonglist.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="recommend-music">
-    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
+      {{ t('comp.recommendSonglist.title') }}
+    </div>
     <div
       v-show="recommendMusic?.result"
       v-loading="loading"
@@ -21,15 +23,16 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 import { getRecommendMusic } from '@/api/home';
+import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store/modules/player';
 import type { IRecommendMusic } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
 
-import SongItem from './common/SongItem.vue';
-
-const store = useStore();
+const { t } = useI18n();
+const playerStore = usePlayerStore();
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();
 const loading = ref(false);
@@ -48,7 +51,9 @@ onMounted(() => {
 });
 
 const handlePlay = () => {
-  store.commit('setPlayList', recommendMusic.value?.result);
+  if (recommendMusic.value?.result) {
+    playerStore.setPlayList(recommendMusic.value.result);
+  }
 };
 </script>
 

src/renderer/components/home/TopBanner.vue

@@ -0,0 +1,468 @@
+<template>
+  <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"
+        draggable
+        show-arrow
+        :autoplay="false"
+      >
+        <n-carousel-item
+          :class="setAnimationClass('animate__backInRight')"
+          :style="getCarouselItemStyle(0, 100, 6)"
+        >
+          <div v-if="dayRecommendData" class="recommend-singer-item relative">
+            <div
+              :style="
+                setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '500y500'))
+              "
+              class="recommend-singer-item-bg"
+            ></div>
+            <div
+              class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
+              @click="showMusic = true"
+            >
+              <div class="font-bold text-lg">
+                {{ t('comp.recommendSinger.title') }}
+              </div>
+
+              <div class="mt-2">
+                <p
+                  v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
+                  :key="item.id"
+                  class="text-el"
+                >
+                  {{ item.name }}
+                  <br />
+                </p>
+              </div>
+            </div>
+          </div>
+        </n-carousel-item>
+
+        <n-carousel-item
+          v-if="userStore.user && userPlaylist.length"
+          :class="setAnimationClass('animate__backInRight')"
+          :style="getCarouselItemStyleForPlaylist(userPlaylist.length)"
+        >
+          <div class="user-play">
+            <div class="user-play-title mb-3">
+              {{ t('comp.userPlayList.title', { name: userStore.user?.nickname }) }}
+            </div>
+            <div class="user-play-list" :class="getPlaylistGridClass(userPlaylist.length)">
+              <div
+                v-for="item in userPlaylist"
+                :key="item.id"
+                class="user-play-item"
+                @click="toPlaylist(item.id)"
+              >
+                <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>
+                  <div class="user-play-item-count">
+                    <div class="user-play-item-count-tag">
+                      {{ t('common.songCount', { count: item.trackCount }) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </n-carousel-item>
+        <n-carousel-item
+          v-for="(item, index) in hotSingerData?.artists"
+          :key="item.id"
+          :class="setAnimationClass('animate__backInRight')"
+          :style="getCarouselItemStyle(index + 1, 100, 6)"
+        >
+          <div
+            class="recommend-singer-item relative"
+            :class="setAnimationClass('animate__backInRight')"
+            :style="setAnimationDelay(index + 2, 100)"
+            @click="handleArtistClick(item.id)"
+          >
+            <div
+              :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
+              class="recommend-singer-item-bg"
+            ></div>
+            <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
+              {{ t('common.songCount', { count: item.musicSize }) }}
+            </div>
+            <div class="recommend-singer-item-info z-10">
+              <div class="recommend-singer-item-info-name text-el text-right line-clamp-1">
+                {{ item.name }}
+              </div>
+            </div>
+            <!-- 播放按钮(hover时显示) -->
+            <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>
+            </div>
+          </div>
+        </n-carousel-item>
+      </n-carousel>
+    </div>
+
+    <music-list
+      v-if="dayRecommendData?.dailySongs.length"
+      v-model:show="showMusic"
+      :name="t('comp.recommendSinger.songlist')"
+      :song-list="dayRecommendData?.dailySongs"
+      :cover="false"
+    />
+
+    <!-- 添加用户歌单弹窗 -->
+    <music-list
+      v-model:show="showPlaylist"
+      v-model:loading="playlistLoading"
+      :name="playlistItem?.name || ''"
+      :song-list="playlistDetail?.playlist?.tracks || []"
+      :list-info="playlistDetail?.playlist"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getDayRecommend, getHotSinger } from '@/api/home';
+import { getListDetail } from '@/api/list';
+import { getUserPlaylist } from '@/api/user';
+import MusicList from '@/components/MusicList.vue';
+import { useArtist } from '@/hooks/useArtist';
+import { useUserStore } from '@/store';
+import { IDayRecommend } from '@/type/day_recommend';
+import { Playlist } from '@/type/list';
+import type { IListDetail } from '@/type/listDetail';
+import type { IHotSinger } from '@/type/singer';
+import {
+  getImgUrl,
+  isMobile,
+  setAnimationClass,
+  setAnimationDelay,
+  setBackgroundImg
+} from '@/utils';
+
+const userStore = useUserStore();
+
+const { t } = useI18n();
+
+// 歌手信息
+const hotSingerData = ref<IHotSinger>();
+const dayRecommendData = ref<IDayRecommend>();
+const showMusic = ref(false);
+const userPlaylist = ref<Playlist[]>([]);
+
+// 为歌单弹窗添加的状态
+const showPlaylist = ref(false);
+const playlistLoading = ref(false);
+const playlistItem = ref<Playlist | null>(null);
+const playlistDetail = ref<IListDetail | null>(null);
+
+const { navigateToArtist } = useArtist();
+
+/**
+ * 获取轮播项的样式
+ * @param index 项目索引（用于动画延迟）
+ * @param delayStep 动画延迟的步长（毫秒）
+ * @param totalItems 总共分成几等分（默认为5）
+ * @param maxWidth 最大宽度（可选，单位为px）
+ * @returns 样式字符串
+ */
+const getCarouselItemStyle = (
+  index: number,
+  delayStep: number,
+  totalItems: number,
+  maxWidth?: number
+) => {
+  if (isMobile.value) {
+    return 'width: 30%;';
+  }
+  const animationDelay = setAnimationDelay(index, delayStep);
+  const width = `calc((100% / ${totalItems}) - 16px)`;
+  const maxWidthStyle = maxWidth ? `max-width: ${maxWidth}px;` : '';
+
+  return `${animationDelay}; width: ${width}; ${maxWidthStyle}`;
+};
+
+/**
+ * 根据歌单数量获取轮播项的样式
+ * @param playlistCount 歌单数量
+ * @returns 样式字符串
+ */
+const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
+  if (isMobile.value) {
+    return 'width: 100%;';
+  }
+  const animationDelay = setAnimationDelay(1, 100);
+  let width = '';
+  let maxWidth = '';
+
+  switch (playlistCount) {
+    case 1:
+      width = 'calc(100% / 4 - 16px)';
+      maxWidth = 'max-width: 180px;';
+      break;
+    case 2:
+      width = 'calc(100% / 3 - 16px)';
+      maxWidth = 'max-width: 380px;';
+      break;
+    case 3:
+      width = 'calc(100% / 2 - 16px)';
+      maxWidth = 'max-width: 520px;';
+      break;
+    default:
+      width = 'calc(100% / 1 - 16px)';
+      maxWidth = 'max-width: 656px;';
+  }
+
+  return `${animationDelay}; width: ${width}; ${maxWidth}`;
+};
+
+onMounted(async () => {
+  await loadData();
+});
+
+const loadData = async () => {
+  try {
+    // 获取每日推荐
+    try {
+      const {
+        data: { data: dayRecommend }
+      } = await getDayRecommend();
+      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
+    } catch (error) {
+      console.error('error', error);
+    }
+
+    if (userStore.user) {
+      const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
+      // 确保最多只显示4个歌单，并按播放次数排序
+      userPlaylist.value = (playlistData.playlist as Playlist[])
+        .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 handleArtistClick = (id: number) => {
+  navigateToArtist(id);
+};
+
+const toPlaylist = async (id: number) => {
+  playlistLoading.value = true;
+  playlistItem.value = null;
+  playlistDetail.value = null;
+  showPlaylist.value = true;
+
+  // 设置当前点击的歌单信息
+  const selectedPlaylist = userPlaylist.value.find((item) => item.id === id);
+  if (selectedPlaylist) {
+    playlistItem.value = selectedPlaylist;
+  }
+
+  try {
+    // 获取歌单详情
+    const { data } = await getListDetail(id);
+    playlistDetail.value = data;
+  } catch (error) {
+    console.error('获取歌单详情失败:', error);
+  } finally {
+    playlistLoading.value = false;
+  }
+};
+
+// 监听登录状态
+watchEffect(() => {
+  if (userStore.user) {
+    loadData();
+  }
+});
+
+const getPlaylistGridClass = (length: number) => {
+  switch (length) {
+    case 1:
+      return 'one-column';
+    case 2:
+      return 'two-columns';
+    case 3:
+      return 'three-columns';
+    default:
+      return 'four-columns';
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.recommend-singer {
+  &-list {
+    @apply flex;
+    height: 220px;
+    margin-right: 20px;
+  }
+  &-item {
+    @apply flex-1 h-full rounded-3xl p-5 flex flex-col justify-between overflow-hidden relative;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: translateY(-5px);
+    }
+
+    &-bg {
+      @apply bg-gray-900 dark:bg-gray-800 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
+      filter: brightness(60%);
+    }
+
+    &-info {
+      @apply flex flex-col p-2;
+      &-name {
+        @apply text-gray-100 dark:text-gray-100;
+      }
+    }
+
+    &-count {
+      @apply text-gray-100 dark:text-gray-100;
+    }
+
+    &-play {
+      &-overlay {
+        @apply absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/20 z-20 opacity-0 transition-all duration-300 flex items-center justify-center;
+        backdrop-filter: blur(1px);
+
+        .recommend-singer-item:hover & {
+          opacity: 1;
+        }
+      }
+
+      &-btn {
+        @apply w-20 h-20 bg-transparent flex justify-center items-center text-white;
+        transform: translateY(50px) scale(0.8);
+        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+        .recommend-singer-item:hover & {
+          transform: translateY(0) scale(1);
+        }
+      }
+    }
+  }
+}
+
+.user-play {
+  @apply bg-light-300 dark:bg-dark-300 rounded-3xl px-4 py-3 h-full;
+  backdrop-filter: blur(20px);
+  &-title {
+    @apply text-gray-900 dark:text-gray-100 font-bold text-lg line-clamp-1;
+  }
+  &-list {
+    @apply grid gap-3 h-full;
+    &.one-column {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      .user-play-item {
+        max-width: 100%;
+      }
+    }
+    &.two-columns {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      .user-play-item {
+        max-width: 100%;
+      }
+    }
+    &.three-columns {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      .user-play-item {
+        max-width: 100%;
+      }
+    }
+    &.four-columns {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      .user-play-item {
+        max-width: 100%;
+      }
+    }
+  }
+  &-item {
+    @apply rounded-2xl overflow-hidden flex flex-col;
+    height: 176px;
+
+    &-img {
+      @apply relative cursor-pointer transition-all duration-300;
+      height: 0;
+      width: 100%;
+      padding-bottom: 100%; /* 确保宽高比为1:1，即正方形 */
+      border-radius: 12px;
+      overflow: hidden;
+      &: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 {
+        @apply text-white font-medium text-sm line-clamp-3;
+      }
+    }
+    &-count {
+      @apply absolute bottom-2 right-2 z-10;
+      &-tag {
+        @apply px-2 py-0.5 text-xs text-white bg-black/50 backdrop-blur-sm rounded-full;
+      }
+    }
+    &-play-btn {
+      @apply flex items-center justify-center;
+      transform: scale(0.8);
+      transition: transform 0.3s ease;
+
+      .user-play-item:hover & {
+        transform: scale(1);
+      }
+    }
+  }
+}
+.mobile {
+  .recommend-singer {
+    &-list {
+      height: 180px;
+      @apply ml-4;
+    }
+    &-item {
+      @apply p-2 rounded-xl;
+      &-bg {
+        @apply rounded-xl;
+      }
+    }
+  }
+}
+</style>

src/renderer/components/lyric/LyricSettings.vue

@@ -1,83 +1,93 @@
 <template>
   <div class="settings-panel transparent-popover">
-    <div class="settings-title">页面设置</div>
+    <div class="settings-title">{{ t('settings.lyricSettings.title') }}</div>
     <div class="settings-content">
       <div class="settings-item">
-        <span>纯净模式</span>
+        <span>{{ t('settings.lyricSettings.pureMode') }}</span>
         <n-switch v-model:value="config.pureModeEnabled" />
       </div>
 
       <div class="settings-item">
-        <span>隐藏封面</span>
+        <span>{{ t('settings.lyricSettings.hideCover') }}</span>
         <n-switch v-model:value="config.hideCover" />
       </div>
 
       <div class="settings-item">
-        <span>居中显示</span>
+        <span>{{ t('settings.lyricSettings.centerDisplay') }}</span>
         <n-switch v-model:value="config.centerLyrics" />
       </div>
 
       <div class="settings-item">
-        <span>显示翻译</span>
+        <span>{{ t('settings.lyricSettings.showTranslation') }}</span>
         <n-switch v-model:value="config.showTranslation" />
       </div>
 
       <div class="settings-item">
-        <span>隐藏播放栏</span>
+        <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 class="settings-item">
+        <span>{{ t('settings.lyricSettings.hideLyrics') }}</span>
+        <n-switch v-model:value="config.hideLyrics" />
+      </div>
+
       <div class="settings-slider">
-        <span>字体大小</span>
+        <span>{{ t('settings.lyricSettings.fontSize') }}</span>
         <n-slider
           v-model:value="config.fontSize"
           :step="1"
           :min="12"
           :max="32"
           :marks="{
-            12: '小',
-            22: '中',
-            32: '大'
+            12: t('settings.lyricSettings.fontSizeMarks.small'),
+            22: t('settings.lyricSettings.fontSizeMarks.medium'),
+            32: t('settings.lyricSettings.fontSizeMarks.large')
           }"
         />
       </div>
 
       <div class="settings-slider">
-        <span>文字间距</span>
+        <span>{{ t('settings.lyricSettings.letterSpacing') }}</span>
         <n-slider
           v-model:value="config.letterSpacing"
           :step="0.2"
           :min="-2"
           :max="10"
           :marks="{
-            '-2': '紧凑',
-            0: '默认',
-            10: '宽松'
+            '-2': t('settings.lyricSettings.letterSpacingMarks.compact'),
+            0: t('settings.lyricSettings.letterSpacingMarks.default'),
+            10: t('settings.lyricSettings.letterSpacingMarks.loose')
           }"
         />
       </div>
 
       <div class="settings-slider">
-        <span>行高</span>
+        <span>{{ t('settings.lyricSettings.lineHeight') }}</span>
         <n-slider
           v-model:value="config.lineHeight"
           :step="0.1"
           :min="1"
           :max="3"
           :marks="{
-            1: '紧凑',
-            1.5: '默认',
-            3: '宽松'
+            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>背景主题</span>
+        <span>{{ t('settings.lyricSettings.backgroundTheme') }}</span>
         <n-radio-group v-model:value="config.theme" name="theme">
-          <n-radio value="default">默认</n-radio>
-          <n-radio value="light">亮色</n-radio>
-          <n-radio value="dark">暗色</n-radio>
+          <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>
@@ -86,6 +96,9 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 interface LyricConfig {
   hideCover: boolean;
@@ -96,7 +109,9 @@ interface LyricConfig {
   showTranslation: boolean;
   theme: 'default' | 'light' | 'dark';
   hidePlayBar: boolean;
+  hideMiniPlayBar: boolean;
   pureModeEnabled: boolean;
+  hideLyrics: boolean;
 }
 
 const config = ref<LyricConfig>({
@@ -108,7 +123,9 @@ const config = ref<LyricConfig>({
   showTranslation: true,
   theme: 'default',
   hidePlayBar: false,
-  pureModeEnabled: false
+  hideMiniPlayBar: false,
+  pureModeEnabled: false,
+  hideLyrics: false
 });
 
 const emit = defineEmits(['themeChange']);

src/renderer/components/player/MiniPlayBar.vue

@@ -0,0 +1,588 @@
+<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 = 52; // 每个列表项的高度
+    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;
+}
+</style>

src/renderer/components/player/MobilePlayBar.vue

@@ -0,0 +1,504 @@
+<template>
+  <div
+    class="mobile-play-bar"
+    :class="[
+      setAnimationClass('animate__fadeInUp'),
+      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini'
+    ]"
+    :style="{
+      color: musicFullVisible
+        ? textColors.theme === 'dark'
+          ? '#ffffff'
+          : '#ffffff'
+        : settingsStore.theme === 'dark'
+          ? '#ffffff'
+          : '#000000'
+    }"
+  >
+    <!-- 完整模式 - 在musicFullVisible为true时显示 -->
+    <template v-if="musicFullVisible">
+      <!-- 顶部信息区域 -->
+      <div class="music-info-header">
+        <div class="music-info-main">
+          <h1 class="music-title">{{ playMusic.name }}</h1>
+          <div class="artist-info">
+            <span class="artist-name">
+              <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
+                {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 进度条 -->
+      <div class="music-progress-bar">
+        <span class="current-time">{{ secondToMinute(nowTime) }}</span>
+        <div class="progress-wrapper">
+          <n-slider
+            v-model:value="timeSlider"
+            :step="1"
+            :max="allTime"
+            :min="0"
+            :tooltip="false"
+            class="progress-slider"
+          ></n-slider>
+        </div>
+        <span class="total-time">{{ secondToMinute(allTime) }}</span>
+      </div>
+
+      <!-- 主控制区 -->
+      <div class="player-controls">
+        <div class="control-btn like" @click="toggleFavorite">
+          <i class="iconfont ri-heart-3-fill" :class="{ 'like-active': isFavorite }"></i>
+        </div>
+        <div class="control-btn prev" @click="handlePrev">
+          <i class="iconfont ri-skip-back-fill"></i>
+        </div>
+        <div class="control-btn play-pause" @click="playMusicEvent">
+          <i class="iconfont" :class="play ? 'ri-pause-fill' : 'ri-play-fill'"></i>
+        </div>
+        <div class="control-btn next" @click="handleNext">
+          <i class="iconfont ri-skip-forward-fill"></i>
+        </div>
+        <n-popover
+          trigger="click"
+          :z-index="99999999"
+          content-class="mobile-play-list"
+          raw
+          :show-arrow="false"
+          placement="top"
+          @update-show="scrollToPlayList"
+        >
+          <template #trigger>
+            <div class="control-btn list">
+              <i class="iconfont ri-menu-line"></i>
+            </div>
+          </template>
+          <div class="mobile-play-list-container">
+            <div class="mobile-play-list-back"></div>
+            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
+              <template #default="{ item }">
+                <div class="mobile-play-list-item">
+                  <song-item :key="item.id" :item="item" mini></song-item>
+                </div>
+              </template>
+            </n-virtual-list>
+          </div>
+        </n-popover>
+      </div>
+    </template>
+
+    <!-- Mini模式 - 在musicFullVisible为false时显示 -->
+    <div v-else class="mobile-mini-controls">
+      <!-- 歌曲信息 -->
+      <div class="mini-song-info" @click="setMusicFull">
+        <n-image
+          :src="getImgUrl(playMusic?.picUrl, '100y100')"
+          class="mini-song-cover"
+          lazy
+          preview-disabled
+        />
+        <div class="mini-song-text">
+          <n-ellipsis class="mini-song-title" line-clamp="1">
+            {{ playMusic.name }}
+          </n-ellipsis>
+          <n-ellipsis class="mini-song-artist" line-clamp="1">
+            <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
+              {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+            </span>
+          </n-ellipsis>
+        </div>
+      </div>
+
+      <!-- 播放按钮 -->
+      <div class="mini-playback-controls">
+        <div class="mini-control-btn play" @click="playMusicEvent">
+          <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
+        </div>
+        <n-popover
+          trigger="click"
+          :z-index="99999999"
+          content-class="mobile-play-list"
+          raw
+          :show-arrow="false"
+          placement="top"
+          @update-show="scrollToPlayList"
+        >
+          <template #trigger>
+            <i class="iconfont icon-list mini-list-icon"></i>
+          </template>
+          <div class="mobile-play-list-container">
+            <div class="mobile-play-list-back"></div>
+            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
+              <template #default="{ item }">
+                <div class="mobile-play-list-item">
+                  <song-item :key="item.id" :item="item" mini></song-item>
+                </div>
+              </template>
+            </n-virtual-list>
+          </div>
+        </n-popover>
+      </div>
+    </div>
+
+    <!-- 全屏播放器 -->
+    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useThrottleFn } from '@vueuse/core';
+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';
+
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
+// 是否播放
+const play = computed(() => playerStore.isPlay);
+// 播放列表
+const playList = computed(() => playerStore.playList as SongResult[]);
+// 背景颜色
+const background = ref('#000');
+
+// 播放进度条
+const throttledSeek = useThrottleFn((value: number) => {
+  if (!sound.value) return;
+  sound.value.seek(value);
+  nowTime.value = value;
+}, 50);
+
+const timeSlider = computed({
+  get: () => nowTime.value,
+  set: throttledSeek
+});
+
+// 播放控制
+function handleNext() {
+  playerStore.nextPlay();
+}
+
+function handlePrev() {
+  playerStore.prevPlay();
+}
+
+// 全屏播放器
+const MusicFullRef = ref<any>(null);
+const musicFullVisible = ref(false);
+
+// 设置musicFull
+const setMusicFull = () => {
+  musicFullVisible.value = !musicFullVisible.value;
+  playerStore.setMusicFull(musicFullVisible.value);
+  if (musicFullVisible.value) {
+    settingsStore.showArtistDrawer = false;
+  }
+};
+
+// 播放列表引用
+const playListRef = ref<any>(null);
+
+const scrollToPlayList = (val: boolean) => {
+  if (!val) return;
+  setTimeout(() => {
+    playListRef.value?.scrollTo({ top: playerStore.playListIndex * 56 });
+  }, 50);
+};
+
+// 收藏功能
+const isFavorite = computed(() => {
+  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 as number);
+  } else {
+    playerStore.addToFavorite(playMusic.value.id as number);
+  }
+};
+
+// 播放暂停按钮事件
+const playMusicEvent = async () => {
+  try {
+    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
+      console.warn('No valid music or URL available');
+      playerStore.setPlay(playMusic.value);
+      return;
+    }
+
+    if (play.value) {
+      if (audioService.getCurrentSound()) {
+        audioService.pause();
+        playerStore.setPlayMusic(false);
+      }
+    } else {
+      if (audioService.getCurrentSound()) {
+        audioService.play();
+      } else {
+        await audioService.play(playerStore.playMusicUrl, playMusic.value);
+      }
+      playerStore.setPlayMusic(true);
+    }
+  } catch (error) {
+    console.error('播放出错:', error);
+    playerStore.nextPlay();
+  }
+};
+
+watch(
+  () => playerStore.playMusic,
+  async () => {
+    background.value = playMusic.value.backgroundColor as string;
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.mobile-play-bar {
+  @apply fixed bottom-[56px] left-0 w-full flex flex-col shadow-lg;
+  z-index: 10000;
+  animation-duration: 0.3s !important;
+  transition: all 0.3s ease;
+
+  &.play-bar-expanded {
+    @apply bg-transparent;
+    height: auto; /* 自动适应内容高度 */
+    max-height: 230px; /* 限制最大高度 */
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.5) 20%,
+      rgba(0, 0, 0, 0.8) 80%,
+      rgba(0, 0, 0, 0.9) 100%
+    );
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50px; /* 延伸到上方 */
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: v-bind('`url(${getImgUrl(playMusic?.picUrl, "300y300")})`');
+      background-size: cover;
+      background-position: center;
+      filter: blur(20px);
+      opacity: 0.2;
+      z-index: -1;
+    }
+  }
+
+  &.play-bar-mini {
+    @apply h-14 py-0 bg-light dark:bg-dark;
+  }
+
+  // 顶部信息区域
+  .music-info-header {
+    @apply flex justify-between items-start px-6 pt-3 pb-2 relative z-10;
+
+    .music-info-main {
+      @apply flex flex-col;
+
+      .music-title {
+        @apply text-xl font-bold text-white mb-1;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+      }
+
+      .artist-info {
+        @apply flex items-center;
+
+        .artist-name {
+          @apply text-sm text-white opacity-90;
+        }
+      }
+    }
+
+    .action-stats {
+      @apply flex items-center gap-4;
+
+      .like-count,
+      .comment-count {
+        @apply flex items-center text-white;
+
+        i {
+          @apply text-base mr-1;
+        }
+
+        span {
+          @apply text-xs font-medium;
+        }
+      }
+    }
+  }
+
+  // 进度条
+  .music-progress-bar {
+    @apply flex items-center justify-between px-4 py-2 relative z-10;
+
+    .current-time,
+    .total-time {
+      @apply text-xs text-white opacity-80;
+    }
+
+    .progress-wrapper {
+      @apply flex-1 mx-3 flex flex-col items-center;
+
+      .progress-slider {
+        @apply w-full;
+
+        :deep(.n-slider) {
+          --n-rail-height: 3px;
+          --n-rail-color: rgba(255, 255, 255, 0.15);
+          --n-rail-color-dark: rgba(255, 255, 255, 0.15);
+          --n-fill-color: #1ed760; /* Spotify绿色，可调整为其他绿色 */
+          --n-handle-size: 0px; /* 隐藏滑块 */
+          --n-handle-color: #1ed760;
+
+          &:hover {
+            --n-handle-size: 10px; /* 鼠标悬停时显示滑块 */
+          }
+
+          .n-slider-rail {
+            @apply rounded-full !important; /* 圆角进度条 */
+          }
+
+          .n-slider-fill {
+            @apply rounded-full !important;
+            box-shadow: 0 0 4px rgba(30, 215, 96, 0.5); /* 发光效果 */
+          }
+
+          .n-slider-handle {
+            @apply transition-all duration-200;
+            opacity: 0;
+            box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
+          }
+
+          &:hover .n-slider-handle,
+          &:active .n-slider-handle {
+            opacity: 1;
+          }
+        }
+      }
+
+      .quality-label {
+        @apply text-xs text-white opacity-70 mt-1;
+      }
+    }
+  }
+
+  // 主控制区
+  .player-controls {
+    @apply flex items-center justify-between px-8 py-3 relative z-10 pb-8;
+
+    .control-btn {
+      @apply flex items-center justify-center cursor-pointer transition;
+
+      i {
+        @apply text-white transition-all;
+      }
+
+      &.like i {
+        @apply text-2xl;
+      }
+
+      &.prev i,
+      &.next i {
+        @apply text-3xl;
+      }
+
+      &.play-pause {
+        @apply w-12 h-12 rounded-full flex items-center justify-center;
+        background: rgba(255, 255, 255, 0.2);
+
+        i {
+          @apply text-4xl;
+        }
+      }
+
+      &.list i {
+        @apply text-2xl;
+      }
+
+      .like-active {
+        @apply text-red-500;
+      }
+    }
+  }
+
+  // Mini模式样式
+  .mobile-mini-controls {
+    @apply flex items-center justify-between px-4 h-14;
+
+    .mini-song-info {
+      @apply flex items-center flex-1 min-w-0 cursor-pointer;
+
+      .mini-song-cover {
+        @apply w-8 h-8 rounded-md;
+      }
+
+      .mini-song-text {
+        @apply ml-3 min-w-0 flex-1;
+
+        .mini-song-title {
+          @apply text-sm font-medium;
+        }
+
+        .mini-song-artist {
+          @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
+        }
+      }
+    }
+
+    .mini-playback-controls {
+      @apply flex items-center;
+
+      .mini-control-btn {
+        @apply flex items-center justify-center cursor-pointer transition;
+
+        &.play {
+          @apply w-9 h-9 rounded-full flex items-center justify-center mr-2;
+          @apply bg-gray-100 dark:bg-gray-800;
+
+          .iconfont {
+            @apply text-xl text-green-500 transition hover:text-green-600;
+          }
+        }
+      }
+
+      .mini-list-icon {
+        @apply text-xl p-1 transition cursor-pointer;
+        @apply hover:text-green-500;
+      }
+    }
+  }
+}
+
+.mobile-play-list-container {
+  height: 60vh;
+  width: 90vw;
+  max-width: 400px;
+  @apply relative rounded-t-2xl overflow-hidden;
+
+  .mobile-play-list-back {
+    backdrop-filter: blur(20px);
+    @apply absolute top-0 left-0 w-full h-full;
+    @apply bg-light dark:bg-black bg-opacity-90;
+  }
+
+  .mobile-play-list-item {
+    @apply px-3 py-1;
+  }
+}
+</style>

src/renderer/components/player/PlayBar.vue

@@ -13,7 +13,7 @@
         ? textColors.theme === 'dark'
           ? '#000000'
           : '#ffffff'
-        : store.state.theme === 'dark'
+        : settingsStore.theme === 'dark'
           ? '#ffffff'
           : '#000000'
     }"
@@ -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">
@@ -41,7 +46,9 @@
             class="text-3xl"
             :class="musicFullVisible ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'"
           ></i>
-          <span class="hover-text">{{ musicFullVisible ? '收起' : '展开' }}歌词</span>
+          <span class="hover-text">{{
+            musicFullVisible ? t('player.playBar.collapse') : t('player.playBar.expand')
+          }}</span>
         </div>
       </div>
     </div>
@@ -105,18 +112,38 @@
             @click="toggleFavorite"
           ></i>
         </template>
-        喜欢
+        {{ t('player.playBar.like') }}
       </n-tooltip>
       <n-tooltip v-if="isElectron" class="music-lyric" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i
             class="iconfont ri-netease-cloud-music-line"
-            :class="{ 'text-green-500': isLyricWindowOpen }"
-            @click="openLyricWindow"
+            :class="{ 'text-green-500': isLyricWindowOpen, 'disabled-icon': !playMusic.id }"
+            @click="playMusic.id && openLyricWindow()"
           ></i>
         </template>
-        歌词
+        {{ playMusic.id ? t('player.playBar.lyric') : t('player.playBar.noSongPlaying') }}
       </n-tooltip>
+      <n-popover
+        v-if="isElectron"
+        trigger="click"
+        :z-index="99999999"
+        content-class="music-eq"
+        raw
+        :show-arrow="false"
+        :delay="200"
+        placement="top"
+      >
+        <template #trigger>
+          <n-tooltip trigger="hover" :z-index="9999999">
+            <template #trigger>
+              <i class="iconfont ri-equalizer-line" :class="{ 'text-green-500': isEQVisible }"></i>
+            </template>
+            {{ t('player.playBar.eq') }}
+          </n-tooltip>
+        </template>
+        <eq-control />
+      </n-popover>
       <n-popover
         trigger="click"
         :z-index="99999999"
@@ -132,7 +159,7 @@
             <template #trigger>
               <i class="iconfont icon-list"></i>
             </template>
-            播放列表
+            {{ t('player.playBar.playList') }}
           </n-tooltip>
         </template>
         <div class="music-play-list">
@@ -140,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>
@@ -154,10 +188,12 @@
 
 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
+import { useMessage } from 'naive-ui';
 import { computed, ref, useTemplateRef, watch } from 'vue';
-import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 import SongItem from '@/components/common/SongItem.vue';
+import EqControl from '@/components/EQControl.vue';
 import {
   allTime,
   artistList,
@@ -165,27 +201,29 @@ 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 store = useStore();
 
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const { t } = useI18n();
+const message = useMessage();
 // 是否播放
-const play = computed(() => store.state.play as boolean);
+const play = computed(() => playerStore.isPlay);
 // 播放列表
-const playList = computed(() => store.state.playList as SongResult[]);
+const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');
 
 watch(
-  () => store.state.playMusic,
+  () => playerStore.playMusic,
   async () => {
     background.value = playMusic.value.backgroundColor as string;
   },
@@ -194,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)}`;
 };
@@ -227,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;
   }
 });
@@ -244,7 +311,7 @@ const mute = () => {
 };
 
 // 播放模式
-const playMode = computed(() => store.state.playMode);
+const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
   switch (playMode.value) {
     case 0:
@@ -260,46 +327,72 @@ const playModeIcon = computed(() => {
 const playModeText = computed(() => {
   switch (playMode.value) {
     case 0:
-      return '列表循环';
+      return t('player.playBar.playMode.sequence');
     case 1:
-      return '单曲循环';
+      return t('player.playBar.playMode.loop');
     case 2:
-      return '随机播放';
+      return t('player.playBar.playMode.random');
     default:
-      return '列表循环';
+      return t('player.playBar.playMode.sequence');
   }
 });
 
 // 切换播放模式
 const togglePlayMode = () => {
-  store.commit('togglePlayMode');
+  playerStore.togglePlayMode();
 };
 
 function handleNext() {
-  store.commit('nextPlay');
+  playerStore.nextPlay();
 }
 
 function handlePrev() {
-  store.commit('prevPlay');
+  playerStore.prevPlay();
 }
 
 const MusicFullRef = ref<any>(null);
+const showSliderTooltip = ref(false);
 
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
+    // 检查是否有有效的音乐对象
+    if (!playMusic.value?.id) {
+      console.warn('没有有效的播放对象');
+      return;
+    }
+
+    // 当前处于播放状态 -> 暂停
     if (play.value) {
-      audioService.pause();
-      store.commit('setPlayMusic', false);
-    } else {
+      if (audioService.getCurrentSound()) {
+        audioService.pause();
+        playerStore.setPlayMusic(false);
+      }
+      return;
+    }
+
+    // 当前处于暂停状态 -> 播放
+    // 有音频实例，直接播放
+    if (audioService.getCurrentSound()) {
       audioService.play();
-      store.commit('setPlayMusic', true);
+      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.log('error', error);
-    if (play.value) {
-      store.commit('nextPlay');
-    }
+    console.error('播放出错:', error);
+    message.error(t('player.playFailed'));
   }
 };
 
@@ -308,31 +401,38 @@ const musicFullVisible = ref(false);
 // 设置musicFull
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
-  store.commit('setMusicFull', musicFullVisible.value);
+  playerStore.setMusicFull(musicFullVisible.value);
   if (musicFullVisible.value) {
-    store.commit('setShowArtistDrawer', false);
+    settingsStore.showArtistDrawer = false;
   }
 };
 
-const palyListRef = useTemplateRef('palyListRef');
+const palyListRef = useTemplateRef('palyListRef') as any;
 
 const scrollToPlayList = (val: boolean) => {
   if (!val) return;
   setTimeout(() => {
-    palyListRef.value?.scrollTo({ top: store.state.playListIndex * 62 });
+    palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
   }, 50);
 };
 
 const isFavorite = computed(() => {
-  return store.state.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) {
-    store.commit('removeFromFavorite', playMusic.value.id);
+    playerStore.removeFromFavorite(numericId);
   } else {
-    store.commit('addToFavorite', playMusic.value.id);
+    playerStore.addToFavorite(numericId);
   }
 };
 
@@ -340,57 +440,13 @@ const openLyricWindow = () => {
   openLyric();
 };
 
+const { navigateToArtist } = useArtist();
+
 const handleArtistClick = (id: number) => {
   musicFullVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  navigateToArtist(id);
 };
 
-// 添加全局快捷键处理
-if (isElectron) {
-  window.electron.ipcRenderer.on('global-shortcut', (_, action: string) => {
-    console.log('action', action);
-    switch (action) {
-      case 'togglePlay':
-        playMusicEvent();
-        showShortcutToast(
-          store.state.play ? '开始播放' : '暂停播放',
-          store.state.play ? 'ri-pause-circle-line' : 'ri-play-circle-line'
-        );
-        break;
-      case 'prevPlay':
-        handlePrev();
-        showShortcutToast('上一首', 'ri-skip-back-line');
-        break;
-      case 'nextPlay':
-        handleNext();
-        showShortcutToast('下一首', 'ri-skip-forward-line');
-        break;
-      case 'volumeUp':
-        if (volumeSlider.value < 100) {
-          volumeSlider.value = Math.min(volumeSlider.value + 10, 100);
-          showShortcutToast(`音量${volumeSlider.value}%`, 'ri-volume-up-line');
-        }
-        break;
-      case 'volumeDown':
-        if (volumeSlider.value > 0) {
-          volumeSlider.value = Math.max(volumeSlider.value - 10, 0);
-          showShortcutToast(`音量${volumeSlider.value}%`, 'ri-volume-down-line');
-        }
-        break;
-      case 'toggleFavorite':
-        toggleFavorite(new Event('click'));
-        showShortcutToast(
-          isFavorite.value ? `已收藏${playMusic.value.name}` : `已取消收藏${playMusic.value.name}`,
-          isFavorite.value ? 'ri-heart-fill' : 'ri-heart-line'
-        );
-        break;
-      default:
-        console.log('未知的快捷键动作:', action);
-        break;
-    }
-  });
-}
-
 // 监听播放栏显示状态
 watch(
   () => MusicFullRef.value?.config?.hidePlayBar,
@@ -400,6 +456,17 @@ 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>
@@ -516,7 +583,7 @@ watch(
 
 .mobile {
   .music-play-bar {
-    @apply px-4 bottom-[70px] transition-all duration-300;
+    @apply px-4 bottom-[56px] transition-all duration-300;
   }
   .music-time {
     display: none;
@@ -584,8 +651,16 @@ watch(
       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;
     }
   }
 }
@@ -629,6 +704,13 @@ watch(
   @apply text-red-500 hover:text-red-600 !important;
 }
 
+.disabled-icon {
+  @apply opacity-50 cursor-not-allowed !important;
+  &:hover {
+    @apply text-inherit !important;
+  }
+}
+
 .icon-loop,
 .icon-single-loop {
   font-size: 1.5rem;
@@ -641,4 +723,23 @@ watch(
   padding: 0;
   border-radius: 0;
 }
+
+.music-eq {
+  @apply p-4 rounded-3xl;
+  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>

src/renderer/components/settings/ShortcutSettings.vue

@@ -2,7 +2,7 @@
   <n-modal
     v-model:show="visible"
     preset="dialog"
-    title="快捷键设置"
+    :title="t('settings.shortcutSettings.title')"
     :show-icon="false"
     style="width: 600px"
     @after-leave="handleAfterLeave"
@@ -20,7 +20,7 @@
                   <n-input
                     :value="formatShortcut(shortcut)"
                     :status="duplicateKeys[key] ? 'error' : undefined"
-                    placeholder="点击输入快捷键"
+                    :placeholder="t('settings.shortcutSettings.inputPlaceholder')"
                     readonly
                     @keydown="(e) => handleKeyDown(e, key)"
                     @focus="() => startRecording(key)"
@@ -32,7 +32,7 @@
                         <i class="ri-error-warning-line"></i>
                       </n-icon>
                     </template>
-                    快捷键冲突
+                    {{ t('settings.shortcutSettings.shortcutConflict') }}
                   </n-tooltip>
                 </div>
               </div>
@@ -42,10 +42,12 @@
 
         <div class="shortcut-footer">
           <n-space justify="end">
-            <n-button size="small" @click="handleCancel">取消</n-button>
-            <n-button size="small" @click="resetShortcuts">恢复默认</n-button>
+            <n-button size="small" @click="handleCancel">{{ t('common.cancel') }}</n-button>
+            <n-button size="small" @click="resetShortcuts">{{
+              t('settings.shortcutSettings.resetShortcuts')
+            }}</n-button>
             <n-button type="primary" size="small" :disabled="hasConflict" @click="handleSave">
-              保存
+              {{ t('common.save') }}
             </n-button>
           </n-space>
         </div>
@@ -58,9 +60,12 @@
 import { cloneDeep } from 'lodash';
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { isElectron } from '@/utils';
 
+const { t } = useI18n();
+
 interface Shortcuts {
   togglePlay: string;
   prevPlay: string;
@@ -121,13 +126,13 @@ onMounted(() => {
 });
 
 const shortcutLabels: Record<keyof Shortcuts, string> = {
-  togglePlay: '播放/暂停',
-  prevPlay: '上一首',
-  nextPlay: '下一首',
-  volumeUp: '音量增加',
-  volumeDown: '音量减少',
-  toggleFavorite: '收藏/取消收藏',
-  toggleWindow: '显示/隐藏窗口'
+  togglePlay: t('settings.shortcutSettings.togglePlay'),
+  prevPlay: t('settings.shortcutSettings.prevPlay'),
+  nextPlay: t('settings.shortcutSettings.nextPlay'),
+  volumeUp: t('settings.shortcutSettings.volumeUp'),
+  volumeDown: t('settings.shortcutSettings.volumeDown'),
+  toggleFavorite: t('settings.shortcutSettings.toggleFavorite'),
+  toggleWindow: t('settings.shortcutSettings.toggleWindow')
 };
 
 const getShortcutLabel = (key: keyof Shortcuts) => shortcutLabels[key];
@@ -221,12 +226,12 @@ const handleKeyDown = (e: KeyboardEvent, key: keyof Shortcuts) => {
 
 const resetShortcuts = () => {
   tempShortcuts.value = { ...defaultShortcuts };
-  message.success('已恢复默认快捷键，请记得保存');
+  message.success(t('settings.shortcutSettings.messages.resetSuccess'));
 };
 
 const saveShortcuts = () => {
   if (hasConflict.value) {
-    message.error('存在冲突的快捷键，请重新设置');
+    message.error(t('settings.shortcutSettings.messages.conflict'));
     return;
   }
 
@@ -241,17 +246,17 @@ const saveShortcuts = () => {
       window.electron.ipcRenderer.send('set-store-value', 'shortcuts', shortcutsToSave);
       // 然后更新快捷键
       window.electron.ipcRenderer.send('update-shortcuts');
-      message.success('快捷键设置已保存');
+      message.success(t('settings.shortcutSettings.messages.saveSuccess'));
     } catch (error) {
       console.error('保存快捷键失败:', error);
-      message.error('保存快捷键失败，请重试');
+      message.error(t('settings.shortcutSettings.messages.saveError'));
     }
   }
 };
 
 const cancelEdit = () => {
   tempShortcuts.value = { ...shortcuts.value };
-  message.info('已取消修改');
+  message.info(t('settings.shortcutSettings.messages.cancelEdit'));
   emit('update:show', false);
 };
 

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;

src/renderer/hooks/MusicListHook.ts

@@ -12,8 +12,8 @@ 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);
+export const getSongUrl = async (id: any, songData: any, isDownloaded: boolean = false) => {
+  const { data } = await getMusicUrl(id, isDownloaded);
   let url = '';
   let songDetail = null;
   try {
@@ -49,11 +49,19 @@ const getSongDetail = async (playMusic: SongResult) => {
 
 // 加载 当前歌曲 歌曲列表数据 下一首mp3预加载 歌词数据
 export const useMusicListHook = () => {
-  const handlePlayMusic = async (state: any, playMusic: SongResult) => {
+  const handlePlayMusic = async (state: any, playMusic: SongResult, isPlay: boolean = true) => {
     const updatedPlayMusic = await getSongDetail(playMusic);
     state.playMusic = updatedPlayMusic;
     state.playMusicUrl = updatedPlayMusic.playMusicUrl;
-    state.play = true;
+
+    // 记录当前设置的播放状态
+    state.play = isPlay;
+
+    // 每次设置新歌曲时，立即更新 localStorage
+    localStorage.setItem('currentPlayMusic', JSON.stringify(state.playMusic));
+    localStorage.setItem('currentPlayMusicUrl', state.playMusicUrl);
+    localStorage.setItem('isPlaying', state.play.toString());
+
     // 设置网页标题
     document.title = `${updatedPlayMusic.name} - ${updatedPlayMusic?.song?.artists?.reduce((prev, curr) => `${prev}${curr.name}/`, '')}`;
     loadLrcAsync(state, updatedPlayMusic.id);
@@ -156,7 +164,20 @@ export const useMusicListHook = () => {
       state.play = true;
       return;
     }
-    const playListIndex = (state.playListIndex + 1) % state.playList.length;
+
+    let playListIndex: number;
+
+    if (state.playMode === 2) {
+      // 随机播放模式
+      do {
+        playListIndex = Math.floor(Math.random() * state.playList.length);
+      } while (playListIndex === state.playListIndex && state.playList.length > 1);
+    } else {
+      // 列表循环模式
+      playListIndex = (state.playListIndex + 1) % state.playList.length;
+    }
+
+    state.playListIndex = playListIndex;
     await handlePlayMusic(state, state.playList[playListIndex]);
   };
 
@@ -226,7 +247,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;
     }

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
+  };
+};

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

src/renderer/index.html

@@ -33,7 +33,6 @@
     <!-- 样式表 -->
     <link rel="stylesheet" href="./assets/icon/iconfont.css" />
     <link rel="stylesheet" href="./assets/css/base.css" />
-    <script defer src="https://cn.vercount.one/js"></script>
 
     <!-- 动画配置 -->
     <style>
@@ -45,12 +44,6 @@
 
   <body>
     <div id="app"></div>
-
-    <div style="display: none">
-      Total Page View <span id="vercount_value_page_pv">Loading</span> Total Visits
-      <span id="vercount_value_site_pv">Loading</span> Site Total Visitors
-      <span id="vercount_value_site_uv">Loading</span>
-    </div>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>

src/renderer/layout/AppLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="layout-page">
     <div id="layout-main" class="layout-main">
-      <title-bar v-if="isElectron" />
-      <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
+      <title-bar />
+      <div class="layout-main-page">
         <!-- 侧边菜单栏 -->
         <app-menu v-if="!isMobile" class="menu" :menus="menus" />
         <div class="main">
@@ -21,30 +21,50 @@
             </router-view>
           </div>
           <play-bottom height="5rem" />
-          <app-menu v-if="isMobile && !store.state.musicFull" class="menu" :menus="menus" />
+          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
-      <play-bar v-show="isPlay" :style="isMobile && store.state.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="isElectron" />
+      <download-drawer
+        v-if="
+          isElectron &&
+          (settingsStore.setData?.alwaysShowDownloadButton ||
+            settingsStore.showDownloadDrawer ||
+            settingsStore.setData?.hasDownloadingTasks)
+        "
+      />
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
-    <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, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
 
 import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
 import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
 import homeRouter from '@/router/home';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isMobile } from '@/utils';
 
 const keepAliveInclude = computed(() =>
@@ -58,41 +78,37 @@ const keepAliveInclude = computed(() =>
 );
 
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
-const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.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 store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
 
-const isPlay = computed(() => store.state.isPlay as boolean);
-const { menus } = store.state;
+const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id);
+const { menus } = menuStore;
 const route = useRoute();
 
 onMounted(() => {
-  store.dispatch('initializeSettings');
-  store.dispatch('initializeTheme');
+  settingsStore.initializeSettings();
+  settingsStore.initializeTheme();
 });
 
-const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
-const artistDrawerShow = computed({
-  get: () => store.state.showArtistDrawer,
-  set: (val) => store.commit('setShowArtistDrawer', val)
-});
+const showPlaylistDrawer = ref(false);
+const currentSongId = ref<number | undefined>();
 
-// 监听歌手ID变化
-watch(
-  () => store.state.currentArtistId,
-  (newId) => {
-    if (newId) {
-      artistDrawerShow.value = true;
-      nextTick(() => {
-        artistDrawerRef.value?.loadArtistInfo(newId);
-      });
-    }
-  }
-);
+// 提供一个方法来打开歌单抽屉
+const openPlaylistDrawer = (songId: number) => {
+  currentSongId.value = songId;
+  showPlaylistDrawer.value = true;
+};
+
+// 将方法提供给全局
+provide('openPlaylistDrawer', openPlaylistDrawer);
 </script>
 
 <style lang="scss" scoped>
@@ -126,7 +142,7 @@ watch(
 
 .mobile {
   .main-content {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 154px);
     overflow: auto;
     display: block;
     flex: none;

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>

src/renderer/layout/components/AppMenu.vue

@@ -127,7 +127,7 @@ const isText = ref(false);
 
     &-item {
       &-link {
-        @apply my-4 w-auto;
+        @apply my-2 w-auto;
       }
     }
   }

src/renderer/layout/components/MusicFull.vue

@@ -11,7 +11,7 @@
       <div
         class="control-btn absolute top-8 left-8"
         :class="{ 'pure-mode': config.pureModeEnabled }"
-        @click="isVisible = false"
+        @click="closeMusicFull"
       >
         <i class="ri-arrow-down-s-line"></i>
       </div>
@@ -29,8 +29,8 @@
       </n-popover>
 
       <div
-        v-show="!config.hideCover"
         class="music-img"
+        :class="{ 'only-cover': config.hideLyrics }"
         :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
       >
         <n-image
@@ -40,7 +40,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,15 +62,28 @@
               </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 && config.hideCover,
+          hide: config.hideLyrics
+        }"
+      >
         <n-layout
           ref="lrcSider"
           class="music-lrc"
           :style="{
             height: config.hidePlayBar ? '85vh' : '65vh',
-            width: config.hideCover ? '50vw' : '500px'
+            width: isMobile ? '100vw' : config.hideCover ? '50vw' : '500px'
           }"
           :native-scrollbar="false"
           @mouseover="mouseOverLayout"
@@ -112,8 +125,8 @@
             </div>
 
             <!-- 无歌词 -->
-            <div v-if="!lrcArray.length" class="music-lrc-text mt-40">
-              <span>暂无歌词, 请欣赏</span>
+            <div v-if="!lrcArray.length" class="music-lrc-text">
+              <span>{{ t('player.lrc.noLrc') }}</span>
             </div>
           </div>
         </n-layout>
@@ -130,9 +143,10 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
 import LyricSettings from '@/components/lyric/LyricSettings.vue';
+import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
 import {
   artistList,
   lrcArray,
@@ -142,9 +156,13 @@ import {
   textColors,
   useLyricProgress
 } from '@/hooks/MusicHook';
+import { useArtist } from '@/hooks/useArtist';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
 
+const { t } = useI18n();
 // 定义 refs
 const lrcSider = ref<any>(null);
 const isMouse = ref(false);
@@ -165,6 +183,8 @@ interface LyricConfig {
   theme: 'default' | 'light' | 'dark';
   hidePlayBar: boolean;
   pureModeEnabled: boolean;
+  hideMiniPlayBar: boolean;
+  hideLyrics: boolean;
 }
 
 // 移除 computed 配置
@@ -177,7 +197,9 @@ const config = ref<LyricConfig>({
   showTranslation: true,
   theme: 'default',
   hidePlayBar: false,
-  pureModeEnabled: false
+  pureModeEnabled: false,
+  hideMiniPlayBar: false,
+  hideLyrics: false
 });
 
 // 监听设置组件的配置变化
@@ -227,9 +249,21 @@ const isVisible = computed({
 });
 
 // 歌词滚动方法
-const lrcScroll = (behavior: ScrollBehavior = 'smooth') => {
+const lrcScroll = (behavior: ScrollBehavior = 'smooth', forceTop: boolean = false) => {
+  if (!isVisible.value || !lrcSider.value) return;
+
+  if (forceTop) {
+    lrcSider.value.scrollTo({
+      top: 0,
+      behavior
+    });
+    return;
+  }
+
+  if (isMouse.value) return;
+
   const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`) as HTMLElement;
-  if (isVisible.value && !isMouse.value && nowEl && lrcSider.value) {
+  if (nowEl) {
     const containerHeight = lrcSider.value.$el.clientHeight;
     const elementTop = nowEl.offsetTop;
     const scrollTop = elementTop - containerHeight / 2 + nowEl.clientHeight / 2;
@@ -358,13 +392,16 @@ onBeforeUnmount(() => {
   }
 });
 
-const store = useStore();
+const settingsStore = useSettingsStore();
+
+const { navigateToArtist } = useArtist();
+
 const handleArtistClick = (id: number) => {
   isVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  navigateToArtist(id);
 };
 
-const setData = computed(() => store.state.setData);
+const setData = computed(() => settingsStore.setData);
 
 // 监听字体变化并更新 CSS 变量
 watch(
@@ -417,6 +454,13 @@ const handleScroll = () => {
   showStickyHeader.value = scrollTop > 100;
 };
 
+const playerStore = usePlayerStore();
+
+const closeMusicFull = () => {
+  isVisible.value = false;
+  playerStore.setMusicFull(false);
+};
+
 // 添加滚动监听
 onMounted(() => {
   if (lrcSider.value?.$el) {
@@ -479,6 +523,13 @@ onMounted(() => {
   }
 });
 
+// 添加对 playMusic 的监听
+watch(playMusic, () => {
+  nextTick(() => {
+    lrcScroll('instant', true);
+  });
+});
+
 defineExpose({
   lrcScroll,
   config
@@ -512,17 +563,58 @@ 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;
@@ -534,12 +626,8 @@ defineExpose({
       }
     }
 
-    &-name {
-      @apply font-bold text-2xl pb-1 pt-4;
-    }
-
-    &-singer {
-      @apply text-base;
+    &.hide {
+      @apply hidden;
     }
   }
 
@@ -626,12 +714,18 @@ defineExpose({
       span {
         padding-right: 0px !important;
       }
-    }
-    .music-lrc-text {
-      @apply text-xl text-center;
+      .hover-text {
+        &:hover {
+          background-color: transparent;
+        }
+      }
+      .music-lrc-text {
+        @apply text-xl text-center;
+      }
     }
     .music-content {
       @apply h-[calc(100vh-120px)];
+      width: 100vw !important;
     }
   }
 }
@@ -642,8 +736,9 @@ defineExpose({
 
 // 添加全局字体样式
 :root {
-  --current-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
+  --current-font-family:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
 }
 
 #drawer-target {
@@ -665,7 +760,7 @@ defineExpose({
 }
 
 .control-btn {
-  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300;
+  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
   background: rgba(142, 142, 142, 0.192);
   backdrop-filter: blur(12px);
 

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"
@@ -16,7 +19,7 @@
           <n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
             <div class="w-20 px-3 flex justify-between items-center">
               <div>
-                {{ searchTypeOptions.find((item) => item.key === store.state.searchType)?.label }}
+                {{ searchTypeOptions.find((item) => item.key === searchStore.searchType)?.label }}
               </div>
               <i class="iconfont icon-xiasanjiaoxing"></i>
             </div>
@@ -28,39 +31,41 @@
       <template #trigger>
         <div class="user-box">
           <n-avatar
-            v-if="store.state.user"
+            v-if="userStore.user"
             class="cursor-pointer"
             circle
             size="medium"
-            :src="getImgUrl(store.state.user.avatarUrl)"
+            :src="getImgUrl(userStore.user.avatarUrl)"
             @click="selectItem('user')"
           />
-          <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div>
+          <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">
+            {{ t('comp.searchBar.login') }}
+          </div>
         </div>
       </template>
       <div class="user-popover">
-        <div v-if="store.state.user" class="user-header" @click="selectItem('user')">
-          <n-avatar circle size="small" :src="getImgUrl(store.state.user?.avatarUrl)" />
-          <span class="username">{{ store.state.user?.nickname || 'Theodore' }}</span>
+        <div v-if="userStore.user" class="user-header" @click="selectItem('user')">
+          <n-avatar circle size="small" :src="getImgUrl(userStore.user?.avatarUrl)" />
+          <span class="username">{{ userStore.user?.nickname || 'Theodore' }}</span>
         </div>
         <div class="menu-items">
-          <div v-if="!store.state.user" class="menu-item" @click="toLogin">
+          <div v-if="!userStore.user" class="menu-item" @click="toLogin">
             <i class="iconfont ri-login-box-line"></i>
-            <span>去登录</span>
+            <span>{{ t('comp.searchBar.toLogin') }}</span>
           </div>
-          <div v-if="store.state.user" class="menu-item" @click="selectItem('logout')">
+          <div v-if="userStore.user" class="menu-item" @click="selectItem('logout')">
             <i class="iconfont ri-logout-box-r-line"></i>
-            <span>退出登录</span>
+            <span>{{ t('comp.searchBar.logout') }}</span>
           </div>
           <!-- 切换主题 -->
           <div class="menu-item" @click="selectItem('set')">
             <i class="iconfont ri-settings-3-line"></i>
-            <span>设置</span>
+            <span>{{ t('comp.searchBar.set') }}</span>
           </div>
           <div class="menu-item">
-            <i class="iconfont" :class="isDarkTheme ? 'ri-moon-line' : 'ri-sun-line'"></i>
-            <span>主题</span>
-            <n-switch v-model:value="isDarkTheme" class="ml-auto">
+            <i class="iconfont" :class="isDark ? 'ri-moon-line' : 'ri-sun-line'"></i>
+            <span>{{ t('comp.searchBar.theme') }}</span>
+            <n-switch v-model:value="isDark" class="ml-auto">
               <template #checked>
                 <i class="ri-moon-line"></i>
               </template>
@@ -71,15 +76,15 @@
           </div>
           <div class="menu-item" @click="restartApp">
             <i class="iconfont ri-restart-line"></i>
-            <span>重启</span>
+            <span>{{ t('comp.searchBar.restart') }}</span>
           </div>
           <div class="menu-item" @click="selectItem('refresh')">
             <i class="iconfont ri-refresh-line"></i>
-            <span>刷新</span>
+            <span>{{ t('comp.searchBar.refresh') }}</span>
           </div>
           <div class="menu-item" @click="toGithubRelease">
             <i class="iconfont ri-github-fill"></i>
-            <span>当前版本</span>
+            <span>{{ t('comp.searchBar.currentVersion') }}</span>
             <div class="version-info">
               <span class="version-number">{{ updateInfo.currentVersion }}</span>
               <n-tag v-if="updateInfo.hasUpdate" type="success" size="small" class="ml-1">
@@ -100,27 +105,43 @@
 </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';
-import { useStore } from 'vuex';
 
 import { getSearchKeyword } from '@/api/home';
-import { getUserDetail, logout } from '@/api/login';
+import { getUserDetail } from '@/api/login';
 import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 import Coffee from '@/components/Coffee.vue';
 import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
+import { useSearchStore } from '@/store/modules/search';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
 import { getImgUrl } from '@/utils';
 import { checkUpdate, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
 
 const router = useRouter();
-const store = useStore();
+const searchStore = useSearchStore();
+const settingsStore = useSettingsStore();
+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('搜索点什么吧...');
+const hotSearchKeyword = ref(t('comp.searchBar.searchPlaceholder'));
 const hotSearchValue = ref('');
 const loadHotSearchKeyword = async () => {
   const { data } = await getSearchKeyword();
@@ -132,14 +153,16 @@ const loadPage = async () => {
   const token = localStorage.getItem('token');
   if (!token) return;
   const { data } = await getUserDetail();
-  store.state.user = data.profile;
-  localStorage.setItem('user', JSON.stringify(data.profile));
+  console.log('data', data);
+  userStore.user =
+    data.profile || userStore.user || JSON.parse(localStorage.getItem('user') || '{}');
+  localStorage.setItem('user', JSON.stringify(userStore.user));
 };
 
 loadPage();
 
 watchEffect(() => {
-  if (store.state.user) {
+  if (userStore.user) {
     userSetOptions.value = USER_SET_OPTIONS;
   } else {
     userSetOptions.value = USER_SET_OPTIONS.filter((item) => item.key !== 'logout');
@@ -161,13 +184,25 @@ onMounted(() => {
   checkForUpdates();
 });
 
-const isDarkTheme = computed({
-  get: () => store.state.theme === 'dark',
-  set: () => store.commit('toggleTheme')
+const isDark = computed({
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
 });
 
 // 搜索词
 const searchValue = ref('');
+
+// 使用 watch 代替 watchEffect 监听搜索值变化，确保深度监听
+watch(
+  () => searchStore.searchValue,
+  (newValue) => {
+    if (newValue) {
+      searchValue.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+
 const search = () => {
   const { value } = searchValue;
   if (value === '') {
@@ -176,7 +211,7 @@ const search = () => {
   }
 
   if (router.currentRoute.value.path === '/search') {
-    store.state.searchValue = value;
+    searchStore.searchValue = value;
     return;
   }
 
@@ -184,15 +219,25 @@ const search = () => {
     path: '/search',
     query: {
       keyword: value,
-      type: store.state.searchType
+      type: searchStore.searchType
     }
   });
 };
 
 const selectSearchType = (key: number) => {
-  store.state.searchType = key;
+  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
+        }
+      });
+    }
   }
 };
 
@@ -202,10 +247,7 @@ const selectItem = async (key: string) => {
   // switch 判断
   switch (key) {
     case 'logout':
-      logout().then(() => {
-        store.commit('logout');
-        router.push('/login');
-      });
+      userStore.handleLogout();
       break;
     case 'login':
       router.push('/login');
@@ -224,7 +266,7 @@ const selectItem = async (key: string) => {
 };
 
 const toGithub = () => {
-  window.open('https://github.com/algerkong/AlgerMusicPlayer', '_blank');
+  window.open('http://donate.alger.fun', '_blank');
 };
 
 const updateInfo = ref<UpdateResult>({
@@ -247,7 +289,7 @@ const checkForUpdates = async () => {
 
 const toGithubRelease = () => {
   if (updateInfo.value.hasUpdate) {
-    store.commit('setShowUpdateModal', true);
+    settingsStore.showUpdateModal = true;
   } else {
     window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
   }
@@ -255,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;

src/renderer/layout/components/TitleBar.vue

@@ -2,32 +2,54 @@
   <div id="title-bar" @mousedown="drag">
     <div id="title">Alger Music</div>
     <div id="buttons">
-      <div class="button" @click="minimize">
-        <i class="iconfont icon-minisize"></i>
-      </div>
-      <div class="button" @click="close">
-        <i class="iconfont icon-close"></i>
-      </div>
+      <n-button
+        v-if="!isElectron"
+        type="primary"
+        size="small"
+        text
+        title="下载应用"
+        @click="openDownloadPage"
+      >
+        <i class="ri-download-line"></i>
+        下载桌面版
+      </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>
+        <div class="button" @click="handleClose">
+          <i class="iconfont icon-close"></i>
+        </div>
+      </template>
     </div>
   </div>
 
   <n-modal
     v-model:show="showCloseModal"
     preset="dialog"
-    title="关闭应用"
+    :title="t('comp.titleBar.closeApp')"
     :style="{ width: '400px' }"
     :mask-closable="true"
   >
     <div class="close-dialog-content">
-      <p>请选择关闭方式</p>
+      <p>{{ t('comp.titleBar.closeTitle') }}</p>
       <div class="remember-choice">
-        <n-checkbox v-model:checked="rememberChoice">记住我的选择</n-checkbox>
+        <n-checkbox v-model:checked="rememberChoice">
+          {{ t('comp.titleBar.rememberChoice') }}
+        </n-checkbox>
       </div>
     </div>
     <template #action>
       <div class="dialog-footer">
-        <n-button type="primary" @click="handleAction('minimize')">最小化到托盘</n-button>
-        <n-button @click="handleAction('close')">退出应用</n-button>
+        <n-button type="primary" @click="handleAction('minimize')">
+          {{ t('comp.titleBar.minimizeToTray') }}
+        </n-button>
+        <n-button @click="handleAction('close')">
+          {{ t('comp.titleBar.exitApp') }}
+        </n-button>
       </div>
     </template>
   </n-modal>
@@ -35,14 +57,23 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';
 
-const store = useStore();
+const { t } = useI18n();
+
+const settingsStore = useSettingsStore();
 const showCloseModal = ref(false);
 const rememberChoice = ref(false);
 
+const openDownloadPage = () => {
+  if (!isElectron) {
+    window.open('http://donate.alger.fun/download', '_blank');
+  }
+};
+
 const minimize = () => {
   if (!isElectron) {
     return;
@@ -50,10 +81,15 @@ const minimize = () => {
   window.api.minimize();
 };
 
+const miniWindow = () => {
+  if (!isElectron) return;
+  window.api.miniWindow();
+};
+
 const handleAction = (action: 'minimize' | 'close') => {
   if (rememberChoice.value) {
-    store.commit('setSetData', {
-      ...store.state.setData,
+    settingsStore.setSetData({
+      ...settingsStore.setData,
       closeAction: action
     });
   }
@@ -66,24 +102,16 @@ const handleAction = (action: 'minimize' | 'close') => {
   showCloseModal.value = false;
 };
 
-const close = () => {
-  if (!isElectron) {
-    return;
-  }
-
-  const { closeAction } = store.state.setData;
+const handleClose = () => {
+  const { closeAction } = settingsStore.setData;
 
   if (closeAction === 'minimize') {
     window.api.miniTray();
-    return;
-  }
-
-  if (closeAction === 'close') {
+  } else if (closeAction === 'close') {
     window.api.close();
-    return;
+  } else {
+    showCloseModal.value = true;
   }
-
-  showCloseModal.value = true;
 };
 
 const drag = (event: MouseEvent) => {

src/renderer/main.ts

@@ -1,14 +1,12 @@
-import 'vfonts/Lato.css';
-import 'vfonts/FiraCode.css';
-// tailwind css
 import './index.css';
 import 'animate.css';
 import 'remixicon/fonts/remixicon.css';
 
 import { createApp } from 'vue';
 
+import i18n from '@/../i18n/renderer';
 import router from '@/router';
-import store from '@/store';
+import pinia from '@/store';
 
 import App from './App.vue';
 import directives from './directive';
@@ -18,6 +16,8 @@ const app = createApp(App);
 Object.keys(directives).forEach((key: string) => {
   app.directive(key, directives[key as keyof typeof directives]);
 });
+
+app.use(pinia);
 app.use(router);
-app.use(store);
+app.use(i18n);
 app.mount('#app');

src/renderer/router/index.ts

@@ -1,7 +1,20 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 
 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 +42,42 @@ 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();
+  }
+});
+
+export default router;

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;