🚀new: v4.1.0 更新

### 🐛 Bug 修复 - 修复歌词窗口处理逻辑，解决 Windows 系统下桌面歌词窗口拖动问题 - 解决歌词初始化重复播放问题 ### ✨ 新功能 - 优化移动端和网页端效果和体验 - 增加系统控制的音频服务的上一曲和下一曲功能 - 优化用户数据加载逻辑和错误处理 - 增强语言切换功能 - 首页添加用户歌单推荐 - 优化音频监听器初始化和设置保存逻辑 ### 🔄 重构 - 将 Vuex 替换为 Pinia 状态管理 - 更新依赖版本
Merge pull request #83 from algerkong/fix/duplicate-playback
2026-04-04 15:00:49 +08:00 · 2025-03-23 12:33:13 +08:00 · 2025-03-23 00:49:08 +08:00 · 2025-03-23 00:47:01 +08:00 · 2025-03-23 00:33:49 +08:00 · 2025-03-23 00:28:42 +08:00
131 changed files with 13441 additions and 5639 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+out
+.gitignore
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,138 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'eslint-config-airbnb-base',
+    '@vue/typescript/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue-scoped-css/base',
+    '@electron-toolkit',
+    '@electron-toolkit/eslint-config-ts/eslint-recommended',
+    'plugin:prettier/recommended'
+  ],
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+    es6: true
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly'
+  },
+  plugins: ['vue', '@typescript-eslint', 'simple-import-sort'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    allowImportExportEverywhere: true,
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  settings: {
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx']
+  },
+  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',
+    'no-continue': 'off',
+    'no-restricted-syntax': 'off',
+    'no-return-assign': 'off',
+    'no-unused-expressions': 'off',
+    'no-return-await': 'off',
+    'no-plusplus': 'off',
+    'no-param-reassign': 'off',
+    'no-shadow': 'off',
+    'guard-for-in': 'off',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+    'import/first': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'vue/first-attribute-linebreak': 0,
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }
+    ],
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    'class-methods-use-this': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error'
+  },
+  overrides: [
+    {
+      files: ['*.vue'],
+      rules: {
+        'vue/component-name-in-template-casing': [2, 'kebab-case'],
+        'vue/require-default-prop': 0,
+        'vue/multi-word-component-names': 0,
+        'vue/no-reserved-props': 0,
+        'vue/no-v-html': 0,
+        'vue-scoped-css/enforce-style-type': [
+          'error',
+          {
+            allows: ['scoped']
+          }
+        ],
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        // 需要行尾分号
+        'prettier/prettier': ['error', { endOfLine: 'auto' }]
+      }
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        'max-classes-per-file': 'off',
+        'no-await-in-loop': 'off',
+        'dot-notation': 'off',
+        'constructor-super': 'off',
+        'getter-return': 'off',
+        'no-const-assign': 'off',
+        'no-dupe-args': 'off',
+        'no-dupe-class-members': 'off',
+        'no-dupe-keys': 'off',
+        'no-func-assign': 'off',
+        'no-import-assign': 'off',
+        'no-new-symbol': 'off',
+        'no-obj-calls': 'off',
+        'no-redeclare': 'off',
+        'no-setter-return': 'off',
+        'no-this-before-super': 'off',
+        'no-undef': 'off',
+        'no-unreachable': 'off',
+        'no-unsafe-negation': 'off',
+        'no-var': 'error',
+        'prefer-const': 'error',
+        'prefer-rest-params': 'error',
+        'prefer-spread': 'error',
+        'valid-typeof': 'off',
+        'consistent-return': 'off',
+        'no-promise-executor-return': 'off',
+        'prefer-promise-reject-errors': 'off',
+        '@typescript-eslint/explicit-function-return-type': 'off'
+      }
+    }
+  ]
+};
--- a/.github/workflows/deploy.yml
+++ b/.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)"
--- a/.gitignore
+++ b/.gitignore
@@ -16,7 +16,12 @@ dist.zip
 .vscode

 bun.lockb
+bun.lock

 .env.*.local

-out
+out
+
+.cursorrules
+
+.github/deploy_keys
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -0,0 +1,5 @@
+singleQuote: true
+semi: true
+printWidth: 100
+trailingComma: none
+endOfLine: auto
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,21 +1,19 @@
 # 更新日志

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

 ### ✨ 新功能
- 新增自动更新检测功能
- 新增 GitHub Actions 自动构建和发布
- 新增主题色切换功能，支持日间/夜间模式 (#19, #21)
- 新增随机播放功能 (#20)
- 优化主题效果和图片清晰度
+- 优化移动端和网页端效果和体验
+- 增加系统控制的音频服务的上一曲和下一曲功能
+- 优化用户数据加载逻辑和错误处理
+- 增强语言切换功能
+- 首页添加用户歌单推荐
+- 优化音频监听器初始化和设置保存逻辑

-### 🏗️ 架构重构
- 重构整个项目架构
- 优化打包配置
- 修改后台服务为本地运行
- 优化项目结构
-
-### 🐞 问题修复
- 修复 web 移动端页面空白问题 (#24)
- 修复无用导入问题
- 优化错误处理
+### 🔄 重构
+- 将 Vuex 替换为 Pinia 状态管理
+- 更新依赖版本
--- a/README.md
+++ b/README.md
@@ -1,15 +1,24 @@
 # Alger Music Player
 主要功能如下
-
- 音乐推荐
- 网易云登录
- 播放历史
- 桌面歌词
- 歌单 mv 搜索 专辑等功能
- 识别无法播放歌曲 并解析播放
- 主题切换 更新检测
- 本地服务 不依赖线上服务
- 可听周杰伦（搜索专辑）
+- 🎵 音乐推荐
+- 🔐 网易云账号登录与同步
+- 📝 功能
+  - 播放历史记录
+  - 歌曲收藏管理
+  - 自定义快捷键配置
+- 🎨 界面与交互
+  - 沉浸式歌词显示（点击左下角封面进入）
+  - 独立桌面歌词窗口
+  - 明暗主题切换
+- 🎼 音乐功能
+  - 支持歌单、MV、专辑等完整音乐服务
+  - 灰色音乐资源解析（基于 @unblockneteasemusic/server）
+  - 高品质音乐试听（需网易云VIP）
+  - 音乐文件下载（支持右键下载和批量下载）
+- 🚀 技术特性
+  - 本地化服务，无需依赖在线API (基于 netease-cloud-music-api)
+  - 自动更新检测
+  - 全平台适配（Desktop & Web & Mobile Web）

 ## 项目简介
 一个基于 electron typescript vue3 的桌面音乐播放器 适配 web端 桌面端 web移动端
@@ -24,6 +33,7 @@ QQ群:789288579
 ![首页黑](./docs/image3.png)
 ![歌词](./docs/image1.png)
 ![桌面歌词](./docs/image2.png)
+![设置页面](./docs/image4.png)

 ## 技术栈

@@ -35,58 +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> |
-
-## 项目运行
-```bash
-  # 安装依赖
-  npm install
-
-  # 运行项目 web
-  npm run dev
-
-  # 运行项目 electron
-  npm run start
-
-  # 打包项目 web
-  npm run build
-
-  # 打包项目 electron
-  npm run win ... 
-  # 具体看 package.json
-```
-#### 注意
- 本地运行需要配置 .env.development 文件
- 打包需要配置 .env.production 文件
-
-```bash
-  # .env.development
-  VITE_API_LOCAL = /api
-  VITE_API_MUSIC_PROXY = /music
-  VITE_API_PROXY_MUSIC = /music_proxy
-
-  # 你的接口地址 (必填)
-  VITE_API = ***
-  # 音乐po接口地址
-  VITE_API_MUSIC = ***
-  VITE_API_PROXY = ***
+| <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> |


-  # .env.production
-  # 你的接口地址 (必填)
-  VITE_API = ***
-  # 音乐po接口地址
-  VITE_API_MUSIC = ***
-  # 代理地址
-  VITE_API_PROXY = ***
-```
-
-## 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")



--- a/docs/image4.png
+++ b/docs/image4.png
--- a/electron.vite.config.ts
+++ b/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',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "AlgerMusicPlayer",
-  "version": "3.0.0",
+  "version": "4.1.0",
  "description": "Alger Music Player",
  "author": "Alger <algerkc@qq.com>",
  "main": "./out/main/index.js",
@@ -26,11 +26,11 @@
    "@unblockneteasemusic/server": "^0.27.8-patch.1",
    "electron-store": "^8.1.0",
    "electron-updater": "^6.1.7",
-  
-    "netease-cloud-music-api-alger": "^4.25.0"
+    "font-list": "^1.5.1",
+    "netease-cloud-music-api-alger": "^4.25.0",
+    "vue-i18n": "9"
  },
-  "devDependencies": { 
-    "marked": "^15.0.4",
+  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.2",
    "@electron-toolkit/eslint-config-ts": "^2.0.0",
    "@electron-toolkit/tsconfig": "^1.0.1",
@@ -38,6 +38,7 @@
    "@tailwindcss/postcss7-compat": "^2.2.4",
    "@types/howler": "^2.2.12",
    "@types/node": "^20.14.8",
+    "@types/tinycolor2": "^1.4.6",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "@vitejs/plugin-vue": "^5.0.5",
@@ -47,12 +48,13 @@
    "@vue/runtime-core": "^3.5.0",
    "@vueuse/core": "^11.0.3",
    "@vueuse/electron": "^11.0.3",
+    "animate.css": "^4.1.1",
    "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",
@@ -63,32 +65,36 @@
    "eslint-plugin-vue-scoped-css": "^2.7.2",
    "howler": "^2.2.4",
    "lodash": "^4.17.21",
-    "naive-ui": "^2.39.0",
-    "postcss": "^8.4.49",
+    "marked": "^15.0.4",
+    "naive-ui": "^2.41.0",
+    "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",
    "productName": "AlgerMusicPlayer",
-    "publish": [{
-      "provider": "github",
-      "owner": "algerkong",
-      "repo": "AlgerMusicPlayer"
-    }],
+    "publish": [
+      {
+        "provider": "github",
+        "owner": "algerkong",
+        "repo": "AlgerMusicPlayer"
+      }
+    ],
    "mac": {
      "icon": "resources/icon.icns",
      "target": [
@@ -117,7 +123,10 @@
      "target": [
        {
          "target": "nsis",
-          "arch": ["x64", "ia32"]
+          "arch": [
+            "x64",
+            "ia32"
+          ]
        }
      ],
      "artifactName": "${productName}-${version}-win-${arch}.${ext}",
@@ -128,11 +137,15 @@
      "target": [
        {
          "target": "AppImage",
-          "arch": ["x64"]
+          "arch": [
+            "x64"
+          ]
        },
        {
          "target": "deb",
-          "arch": ["x64"]
+          "arch": [
+            "x64"
+          ]
        }
      ],
      "artifactName": "${productName}-${version}-linux-${arch}.${ext}",
--- a/src/i18n/lang/en-US/artist.ts
+++ b/src/i18n/lang/en-US/artist.ts
@@ -0,0 +1,5 @@
+export default {
+  hotSongs: 'Hot Songs',
+  albums: 'Albums',
+  description: 'Artist Introduction'
+};
--- a/src/i18n/lang/en-US/common.ts
+++ b/src/i18n/lang/en-US/common.ts
@@ -0,0 +1,47 @@
+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'
+  },
+  language: 'Language'
+};
--- a/src/i18n/lang/en-US/comp.ts
+++ b/src/i18n/lang/en-US/comp.ts
@@ -0,0 +1,94 @@
+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'
+  },
+  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"
+  }
+};
--- a/src/i18n/lang/en-US/donation.ts
+++ b/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'
+};
--- a/src/i18n/lang/en-US/download.ts
+++ b/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}'
+  }
+};
--- a/src/i18n/lang/en-US/favorite.ts
+++ b/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'
+};
--- a/src/i18n/lang/en-US/history.ts
+++ b/src/i18n/lang/en-US/history.ts
@@ -0,0 +1,5 @@
+export default {
+  title: 'Play History',
+  playCount: '{count}',
+  getHistoryFailed: 'Failed to get play history'
+};
--- a/src/i18n/lang/en-US/index.ts
+++ b/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
+};
--- a/src/i18n/lang/en-US/login.ts
+++ b/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'
+  }
+};
--- a/src/i18n/lang/en-US/player.ts
+++ b/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'
+    }
+  }
+};
--- a/src/i18n/lang/en-US/search.ts
+++ b/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'
+  }
+};
--- a/src/i18n/lang/en-US/settings.ts
+++ b/src/i18n/lang/en-US/settings.ts
@@ -0,0 +1,208 @@
+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'
+    }
+  },
+  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'
+    }
+  }
+};
--- a/src/i18n/lang/en-US/songItem.ts
+++ b/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'
+  }
+};
--- a/src/i18n/lang/en-US/user.ts
+++ b/src/i18n/lang/en-US/user.ts
@@ -0,0 +1,21 @@
+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'
+  },
+  message: {
+    loadFailed: 'Failed to load user page',
+    deleteSuccess: 'Successfully deleted',
+    deleteFailed: 'Failed to delete'
+  }
+};
--- a/src/i18n/lang/zh-CN/artist.ts
+++ b/src/i18n/lang/zh-CN/artist.ts
@@ -0,0 +1,5 @@
+export default {
+  hotSongs: '热门歌曲',
+  albums: '专辑',
+  description: '艺人介绍'
+};
--- a/src/i18n/lang/zh-CN/common.ts
+++ b/src/i18n/lang/zh-CN/common.ts
@@ -0,0 +1,46 @@
+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: '退出'
+  }
+};
--- a/src/i18n/lang/zh-CN/comp.ts
+++ b/src/i18n/lang/zh-CN/comp.ts
@@ -0,0 +1,93 @@
+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: '未找到适合当前系统的安装包，请手动下载'
+  },
+  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}的常听'
+  }
+};
--- a/src/i18n/lang/zh-CN/donation.ts
+++ b/src/i18n/lang/zh-CN/donation.ts
@@ -0,0 +1,6 @@
+export default {
+  description: '您的捐赠将用于支持开发和维护工作，包括但不限于服务器维护、域名续费等。',
+  message: '留言时可留下您的邮箱或 github名称。',
+  refresh: '刷新列表',
+  toDonateList: '请我喝咖啡'
+};
--- a/src/i18n/lang/zh-CN/download.ts
+++ b/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}'
+  }
+};
--- a/src/i18n/lang/zh-CN/favorite.ts
+++ b/src/i18n/lang/zh-CN/favorite.ts
@@ -0,0 +1,11 @@
+export default {
+  title: '我的收藏',
+  count: '共 {count} 首',
+  batchDownload: '批量下载',
+  download: '下载 ({count})',
+  emptyTip: '还没有收藏歌曲',
+  downloadSuccess: '下载完成',
+  downloadFailed: '下载失败',
+  downloading: '正在下载中，请稍候...',
+  selectSongsFirst: '请先选择要下载的歌曲'
+};
--- a/src/i18n/lang/zh-CN/history.ts
+++ b/src/i18n/lang/zh-CN/history.ts
@@ -0,0 +1,5 @@
+export default {
+  title: '播放历史',
+  playCount: '{count}',
+  getHistoryFailed: '获取历史记录失败'
+};
--- a/src/i18n/lang/zh-CN/index.ts
+++ b/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
+};
--- a/src/i18n/lang/zh-CN/login.ts
+++ b/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: '检查二维码状态时出错'
+  }
+};
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -0,0 +1,77 @@
+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}'
+  },
+  eq: {
+    title: '均衡器',
+    reset: '重置',
+    on: '开启',
+    off: '关闭',
+    bass: '低音',
+    midrange: '中音',
+    treble: '高音',
+    presets: {
+      flat: '平坦',
+      pop: '流行',
+      rock: '摇滚',
+      classical: '古典',
+      jazz: '爵士',
+      electronic: '电子',
+      hiphop: '嘻哈',
+      rb: 'R&B',
+      metal: '金属',
+      vocal: '人声',
+      dance: '舞曲',
+      acoustic: '原声',
+      custom: '自定义'
+    }
+  }
+};
--- a/src/i18n/lang/zh-CN/search.ts
+++ b/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: '搜索失败'
+  }
+};
--- a/src/i18n/lang/zh-CN/settings.ts
+++ b/src/i18n/lang/zh-CN/settings.ts
@@ -0,0 +1,208 @@
+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: '暗色'
+    }
+  },
+  shortcutSettings: {
+    title: '快捷键设置',
+    shortcut: '快捷键',
+    shortcutDesc: '自定义快捷键',
+    shortcutConflict: '快捷键冲突',
+    inputPlaceholder: '点击输入快捷键',
+    resetShortcuts: '恢复默认',
+    togglePlay: '播放/暂停',
+    prevPlay: '上一首',
+    nextPlay: '下一首',
+    volumeUp: '音量增加',
+    volumeDown: '音量减少',
+    toggleFavorite: '收藏/取消收藏',
+    toggleWindow: '显示/隐藏窗口',
+    messages: {
+      resetSuccess: '已恢复默认快捷键，请记得保存',
+      conflict: '存在冲突的快捷键，请重新设置',
+      saveSuccess: '快捷键设置已保存',
+      saveError: '保存快捷键失败，请重试',
+      cancelEdit: '已取消修改'
+    }
+  }
+};
--- a/src/i18n/lang/zh-CN/songItem.ts
+++ b/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: '获取音乐下载地址失败'
+  }
+};
--- a/src/i18n/lang/zh-CN/user.ts
+++ b/src/i18n/lang/zh-CN/user.ts
@@ -0,0 +1,21 @@
+export default {
+  profile: {
+    followers: '粉丝',
+    following: '关注',
+    level: '等级'
+  },
+  playlist: {
+    created: '创建的歌单',
+    trackCount: '{count}首',
+    playCount: '播放{count}次'
+  },
+  ranking: {
+    title: '听歌排行',
+    playCount: '{count}次'
+  },
+  message: {
+    loadFailed: '加载用户页面失败',
+    deleteSuccess: '删除成功',
+    deleteFailed: '删除失败'
+  }
+};
--- a/src/i18n/main.ts
+++ b/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;
--- a/src/i18n/renderer.ts
+++ b/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;
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,209 +1,135 @@
-import { electronApp, is, optimizer } from '@electron-toolkit/utils';
-import { app, BrowserWindow, globalShortcut, ipcMain, Menu, nativeImage, shell, Tray } from 'electron';
-import Store from 'electron-store';
+import { electronApp, optimizer } from '@electron-toolkit/utils';
+import { app, ipcMain, nativeImage } from 'electron';
 import { join } from 'path';
-import set from './set.json';
+
+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, updateTrayMenu } from './modules/tray';
+import { setupUpdateHandlers } from './modules/update';
+import { createMainWindow, initializeWindowManager } from './modules/window';
+import { startMusicApi } from './server';
+
 // 导入所有图标
 const iconPath = join(__dirname, '../../resources');
 const icon = nativeImage.createFromPath(
  process.platform === 'darwin'
    ? join(iconPath, 'icon.icns')
    : process.platform === 'win32'
-    ? join(iconPath, 'favicon.ico')
-    : join(iconPath, 'icon.png')
+      ? join(iconPath, 'favicon.ico')
+      : join(iconPath, 'icon.png')
 );

-import { loadLyricWindow } from './lyric';
-import { startMusicApi } from './server';
+let mainWindow: Electron.BrowserWindow;

-let mainWindow: BrowserWindow;
-function createWindow(): void {
-  startMusicApi();
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 1200,
-    height: 780,
-    show: false,
-    frame: false,
-    autoHideMenuBar: true,
-    icon,
-    webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
-      sandbox: false,
-      contextIsolation: true
-    }
-  });
+// 初始化应用
+function initialize() {
+  // 初始化配置管理
+  const store = initializeConfig();

-  mainWindow.setMinimumSize(1200, 780);
-
-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show();
-  });
-
-  mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url);
-    return { action: 'deny' };
-  });
-
-  // HMR for renderer base on electron-vite cli.
-  // Load the remote URL for development or the local html file for production.
-  if (is.dev && process.env.ELECTRON_RENDERER_URL) {
-    mainWindow.webContents.openDevTools({ mode: 'detach' });
-    mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL);
-  } else {
-    mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
+  // 设置初始语言
+  const savedLanguage = store.get('set.language') as Language;
+  if (savedLanguage) {
+    i18n.global.locale = savedLanguage;
  }
-  
-  // 创建托盘图标
-  const trayIcon = nativeImage.createFromPath(join(iconPath, 'icon_16x16.png')).resize({ width: 16, height: 16 });
-  const tray = new Tray(trayIcon);

-  // 创建一个上下文菜单
-  const contextMenu = Menu.buildFromTemplate([
-    {
-      label: '显示',
-      click: () => {
-        mainWindow.show();
-      },
-    },
-    {
-      label: '退出',
-      click: () => {
-        mainWindow.destroy();
-        app.quit();
-      },
-    },
-  ]);
+  // 初始化文件管理
+  initializeFileManager();
+  // 初始化窗口管理
+  initializeWindowManager();
+  // 初始化字体管理
+  initializeFonts();

-  // 设置系统托盘图标的上下文菜单
-  tray.setContextMenu(contextMenu);
+  // 创建主窗口
+  mainWindow = createMainWindow(icon);

-  // 当系统托盘图标被点击时，切换窗口的显示/隐藏
-  tray.on('click', () => {
-    if (mainWindow.isVisible()) {
-      mainWindow.hide();
-    } else {
-      mainWindow.show();
-    }
-  });
+  // 初始化托盘
+  initializeTray(iconPath, mainWindow);

+  // 启动音乐API
+  startMusicApi();
+
+  // 加载歌词窗口
  loadLyricWindow(ipcMain, mainWindow);
+
+  // 初始化快捷键
+  initializeShortcuts(mainWindow);
+
+  // 初始化更新处理程序
+  setupUpdateHandlers(mainWindow);
 }

-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-  // Set app user model id for windows
-  electronApp.setAppUserModelId('com.alger.music');
+// 检查是否为第一个实例
+const isSingleInstance = app.requestSingleInstanceLock();

-  // Default open or close DevTools by F12 in development
-  // and ignore CommandOrControl + R in production.
-  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
-  app.on('browser-window-created', (_, window) => {
-    optimizer.watchWindowShortcuts(window);
-  });
-
-  // IPC test
-  ipcMain.on('ping', () => console.log('pong'));
-
-  createWindow();
-
-  app.on('activate', function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow();
-  });
-});
-
-app.on('ready', () => {
-  globalShortcut.register('CommandOrControl+Alt+Shift+M', () => {
-    if (mainWindow.isVisible()) {
-      mainWindow.hide();
-    } else {
+if (!isSingleInstance) {
+  app.quit();
+} else {
+  // 当第二个实例启动时，将焦点转移到第一个实例的窗口
+  app.on('second-instance', () => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) {
+        mainWindow.restore();
+      }
      mainWindow.show();
+      mainWindow.focus();
    }
  });
-});

-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
+  // 应用程序准备就绪时的处理
+  app.whenReady().then(() => {
+    // 设置应用ID
+    electronApp.setAppUserModelId('com.alger.music');

-ipcMain.on('minimize-window', (event) => {
-  const win = BrowserWindow.fromWebContents(event.sender);
-  if (win) {
-    win.minimize();
-  }
-});
-
-ipcMain.on('maximize-window', (event) => {
-  const win = BrowserWindow.fromWebContents(event.sender);
-  if (win) {
-    if (win.isMaximized()) {
-      win.unmaximize();
-    } else {
-      win.maximize();
-    }
-  }
-});
-
-ipcMain.on('close-window', (event) => {
-  const win = BrowserWindow.fromWebContents(event.sender);
-  if (win) {
-    win.destroy();
-    app.quit();
-  }
-});
-
-ipcMain.on('drag-start', (event) => {
-  const win = BrowserWindow.fromWebContents(event.sender);
-  if (win) {
-    win.webContents.beginFrameSubscription((frameBuffer) => {
-      event.reply('frame-buffer', frameBuffer);
+    // 监听窗口创建事件
+    app.on('browser-window-created', (_, window) => {
+      optimizer.watchWindowShortcuts(window);
    });
-  }
-});

-ipcMain.on('mini-tray', (event) => {
-  const win = BrowserWindow.fromWebContents(event.sender);
-  if (win) {
-    win.hide();
-  }
-});
+    // 初始化应用
+    initialize();

-// 重启
-ipcMain.on('restart', () => {
-  app.relaunch();
-  app.exit(0);
-});
+    // macOS 激活应用时的处理
+    app.on('activate', () => {
+      if (mainWindow === null) initialize();
+    });
+  });

-const store = new Store({
-  name: 'config', // 配置文件名
-  defaults: {
-    set: set
-  }
-});
+  // 监听快捷键更新
+  ipcMain.on('update-shortcuts', () => {
+    registerShortcuts(mainWindow);
+  });

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

-ipcMain.on('get-store-value', (_, key) => {
-  const value = store.get(key);
-  _.returnValue = value || '';
-});
+  // 所有窗口关闭时的处理
+  app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+      app.quit();
+    }
+  });

-// 添加 IPC 处理程序
-ipcMain.on('get-arch', (event) => {
-  event.returnValue = process.arch;
-});
+  // 重启应用
+  ipcMain.on('restart', () => {
+    app.relaunch();
+    app.exit(0);
+  });

-// In this file you can include the rest of your app"s specific main process
-// code. You can also put them in separate files and require them here.
+  // 获取系统架构信息
+  ipcMain.on('get-arch', (event) => {
+    event.returnValue = process.arch;
+  });
+}
--- a/src/main/lyric.ts
+++ b/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);
+    }
  });

  // 添加鼠标穿透事件处理
--- a/src/main/modules/cache.ts
+++ b/src/main/modules/cache.ts
@@ -0,0 +1,89 @@
+import { ipcMain } from 'electron';
+import Store from 'electron-store';
+
+interface LyricData {
+  id: number;
+  data: any;
+  timestamp: number;
+}
+
+interface StoreSchema {
+  lyrics: Record<number, LyricData>;
+}
+
+class CacheManager {
+  private store: Store<StoreSchema>;
+
+  constructor() {
+    this.store = new Store<StoreSchema>({
+      name: 'lyrics',
+      defaults: {
+        lyrics: {}
+      }
+    });
+  }
+
+  async cacheLyric(id: number, data: any) {
+    try {
+      const lyrics = this.store.get('lyrics');
+      lyrics[id] = {
+        id,
+        data,
+        timestamp: Date.now()
+      };
+      this.store.set('lyrics', lyrics);
+      return true;
+    } catch (error) {
+      console.error('Error caching lyric:', error);
+      return false;
+    }
+  }
+
+  async getCachedLyric(id: number) {
+    try {
+      const lyrics = this.store.get('lyrics');
+      const result = lyrics[id];
+
+      if (!result) return undefined;
+
+      // 检查缓存是否过期（24小时）
+      if (Date.now() - result.timestamp > 24 * 60 * 60 * 1000) {
+        delete lyrics[id];
+        this.store.set('lyrics', lyrics);
+        return undefined;
+      }
+
+      return result.data;
+    } catch (error) {
+      console.error('Error getting cached lyric:', error);
+      return undefined;
+    }
+  }
+
+  async clearLyricCache() {
+    try {
+      this.store.set('lyrics', {});
+      return true;
+    } catch (error) {
+      console.error('Error clearing lyric cache:', error);
+      return false;
+    }
+  }
+}
+
+export const cacheManager = new CacheManager();
+
+export function initializeCacheManager() {
+  // 添加歌词缓存相关的 IPC 处理
+  ipcMain.handle('cache-lyric', async (_, id: number, lyricData: any) => {
+    return await cacheManager.cacheLyric(id, lyricData);
+  });
+
+  ipcMain.handle('get-cached-lyric', async (_, id: number) => {
+    return await cacheManager.getCachedLyric(id);
+  });
+
+  ipcMain.handle('clear-lyric-cache', async () => {
+    return await cacheManager.clearLyricCache();
+  });
+}
--- a/src/main/modules/config.ts
+++ b/src/main/modules/config.ts
@@ -0,0 +1,64 @@
+import { app, ipcMain } from 'electron';
+import Store from 'electron-store';
+
+import set from '../set.json';
+import { defaultShortcuts } from './shortcuts';
+
+type SetConfig = {
+  isProxy: boolean;
+  proxyConfig: {
+    enable: boolean;
+    protocol: string;
+    host: string;
+    port: number;
+  };
+  enableRealIP: boolean;
+  realIP: string;
+  noAnimate: boolean;
+  animationSpeed: number;
+  author: string;
+  authorUrl: string;
+  musicApiPort: number;
+  closeAction: 'ask' | 'minimize' | 'close';
+  musicQuality: string;
+  fontFamily: string;
+  fontScope: 'global' | 'lyric';
+  language: string;
+};
+interface StoreType {
+  set: SetConfig;
+  shortcuts: typeof defaultShortcuts;
+}
+
+let store: Store<StoreType>;
+
+/**
+ * 初始化配置管理
+ */
+export function initializeConfig() {
+  store = new Store<StoreType>({
+    name: 'config',
+    defaults: {
+      set: set as SetConfig,
+      shortcuts: defaultShortcuts
+    }
+  });
+
+  store.get('set.downloadPath') || store.set('set.downloadPath', app.getPath('downloads'));
+
+  // 定义ipcRenderer监听事件
+  ipcMain.on('set-store-value', (_, key, value) => {
+    store.set(key, value);
+  });
+
+  ipcMain.on('get-store-value', (_, key) => {
+    const value = store.get(key);
+    _.returnValue = value || '';
+  });
+
+  return store;
+}
+
+export function getStore() {
+  return store;
+}
--- a/src/main/modules/fileManager.ts
+++ b/src/main/modules/fileManager.ts
@@ -0,0 +1,418 @@
+import axios from 'axios';
+import { app, dialog, ipcMain, protocol, shell } from 'electron';
+import Store from 'electron-store';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const MAX_CONCURRENT_DOWNLOADS = 3;
+const downloadQueue: { url: string; filename: string; songInfo: any; type?: string }[] = [];
+let activeDownloads = 0;
+
+// 创建一个store实例用于存储下载历史
+const downloadStore = new Store({
+  name: 'downloads',
+  defaults: {
+    history: []
+  }
+});
+
+// 创建一个store实例用于存储音频缓存
+const audioCacheStore = new Store({
+  name: 'audioCache',
+  defaults: {
+    cache: {}
+  }
+});
+
+/**
+ * 初始化文件管理相关的IPC监听
+ */
+export function initializeFileManager() {
+  // 注册本地文件协议
+  protocol.registerFileProtocol('local', (request, callback) => {
+    try {
+      const decodedUrl = decodeURIComponent(request.url);
+      const filePath = decodedUrl.replace('local://', '');
+
+      // 检查文件是否存在
+      if (!fs.existsSync(filePath)) {
+        console.error('File not found:', filePath);
+        callback({ error: -6 }); // net::ERR_FILE_NOT_FOUND
+        return;
+      }
+
+      callback({ path: filePath });
+    } catch (error) {
+      console.error('Error handling local protocol:', error);
+      callback({ error: -2 }); // net::FAILED
+    }
+  });
+
+  // 通用的选择目录处理
+  ipcMain.handle('select-directory', async () => {
+    const result = await dialog.showOpenDialog({
+      properties: ['openDirectory'],
+      title: '选择目录'
+    });
+    return result;
+  });
+
+  // 通用的打开目录处理
+  ipcMain.on('open-directory', (_, filePath) => {
+    try {
+      // 验证文件路径
+      if (!filePath) {
+        console.error('无效的文件路径: 路径为空');
+        return;
+      }
+
+      // 统一处理路径分隔符
+      const normalizedPath = path.normalize(filePath);
+
+      if (fs.statSync(normalizedPath).isDirectory()) {
+        shell.openPath(normalizedPath);
+      } else {
+        shell.showItemInFolder(normalizedPath);
+      }
+    } catch (error) {
+      console.error('打开路径失败:', error);
+    }
+  });
+
+  // 下载音乐处理
+  ipcMain.on('download-music', handleDownloadRequest);
+
+  // 检查文件是否已下载
+  ipcMain.handle('check-music-downloaded', (_, filename: string) => {
+    const store = new Store();
+    const downloadPath = (store.get('set.downloadPath') as string) || app.getPath('downloads');
+    const filePath = path.join(downloadPath, `${filename}.mp3`);
+    return fs.existsSync(filePath);
+  });
+
+  // 删除已下载的音乐
+  ipcMain.handle('delete-downloaded-music', async (_, filePath: string) => {
+    try {
+      if (fs.existsSync(filePath)) {
+        // 先删除文件
+        try {
+          await fs.promises.unlink(filePath);
+        } catch (error) {
+          console.error('Error deleting file:', error);
+        }
+
+        // 删除对应的歌曲信息
+        const store = new Store();
+        const songInfos = store.get('downloadedSongs', {}) as Record<string, any>;
+        delete songInfos[filePath];
+        store.set('downloadedSongs', songInfos);
+
+        return true;
+      }
+      return false;
+    } catch (error) {
+      console.error('Error deleting file:', error);
+      return false;
+    }
+  });
+
+  // 获取已下载音乐列表
+  ipcMain.handle('get-downloaded-music', () => {
+    try {
+      const store = new Store();
+      const songInfos = store.get('downloadedSongs', {}) as Record<string, any>;
+
+      // 过滤出实际存在的文件
+      const validSongs = Object.entries(songInfos)
+        .filter(([path]) => fs.existsSync(path))
+        .map(([_, info]) => info)
+        .sort((a, b) => (b.downloadTime || 0) - (a.downloadTime || 0));
+
+      // 更新存储，移除不存在的文件记录
+      const newSongInfos = validSongs.reduce((acc, song) => {
+        acc[song.path] = song;
+        return acc;
+      }, {});
+      store.set('downloadedSongs', newSongInfos);
+
+      return validSongs;
+    } catch (error) {
+      console.error('Error getting downloaded music:', error);
+      return [];
+    }
+  });
+
+  // 检查歌曲是否已下载并返回本地路径
+  ipcMain.handle('check-song-downloaded', (_, songId: number) => {
+    const store = new Store();
+    const songInfos = store.get('downloadedSongs', {}) as Record<string, any>;
+
+    // 通过ID查找已下载的歌曲
+    for (const [path, info] of Object.entries(songInfos)) {
+      if (info.id === songId && fs.existsSync(path)) {
+        return {
+          isDownloaded: true,
+          localPath: `local://${path}`,
+          songInfo: info
+        };
+      }
+    }
+
+    return {
+      isDownloaded: false,
+      localPath: '',
+      songInfo: null
+    };
+  });
+
+  // 添加清除下载历史的处理函数
+  ipcMain.on('clear-downloads-history', () => {
+    downloadStore.set('history', []);
+  });
+
+  // 添加清除音频缓存的处理函数
+  ipcMain.on('clear-audio-cache', () => {
+    audioCacheStore.set('cache', {});
+    // 清除临时音频文件目录
+    const tempDir = path.join(app.getPath('userData'), 'AudioCache');
+    if (fs.existsSync(tempDir)) {
+      try {
+        fs.readdirSync(tempDir).forEach((file) => {
+          const filePath = path.join(tempDir, file);
+          if (file.endsWith('.mp3') || file.endsWith('.m4a')) {
+            fs.unlinkSync(filePath);
+          }
+        });
+      } catch (error) {
+        console.error('清除音频缓存文件失败:', error);
+      }
+    }
+  });
+}
+
+/**
+ * 处理下载请求
+ */
+function handleDownloadRequest(
+  event: Electron.IpcMainEvent,
+  {
+    url,
+    filename,
+    songInfo,
+    type
+  }: { url: string; filename: string; songInfo?: any; type?: string }
+) {
+  // 检查是否已经在队列中或正在下载
+  if (downloadQueue.some((item) => item.filename === filename)) {
+    event.reply('music-download-error', {
+      filename,
+      error: '该歌曲已在下载队列中'
+    });
+    return;
+  }
+
+  // 检查是否已下载
+  const store = new Store();
+  const songInfos = store.get('downloadedSongs', {}) as Record<string, any>;
+
+  // 检查是否已下载（通过ID）
+  const isDownloaded =
+    songInfo?.id && Object.values(songInfos).some((info: any) => info.id === songInfo.id);
+
+  if (isDownloaded) {
+    event.reply('music-download-error', {
+      filename,
+      error: '该歌曲已下载'
+    });
+    return;
+  }
+
+  // 添加到下载队列
+  downloadQueue.push({ url, filename, songInfo, type });
+  event.reply('music-download-queued', {
+    filename,
+    songInfo
+  });
+
+  // 尝试开始下载
+  processDownloadQueue(event);
+}
+
+/**
+ * 处理下载队列
+ */
+async function processDownloadQueue(event: Electron.IpcMainEvent) {
+  if (activeDownloads >= MAX_CONCURRENT_DOWNLOADS || downloadQueue.length === 0) {
+    return;
+  }
+
+  const { url, filename, songInfo, type } = downloadQueue.shift()!;
+  activeDownloads++;
+
+  try {
+    await downloadMusic(event, { url, filename, songInfo, type });
+  } finally {
+    activeDownloads--;
+    processDownloadQueue(event);
+  }
+}
+
+/**
+ * 清理文件名中的非法字符
+ */
+function sanitizeFilename(filename: string): string {
+  // 替换 Windows 和 Unix 系统中的非法字符
+  return filename
+    .replace(/[<>:"/\\|?*]/g, '_') // 替换特殊字符为下划线
+    .replace(/\s+/g, ' ') // 将多个空格替换为单个空格
+    .trim(); // 移除首尾空格
+}
+
+/**
+ * 下载音乐功能
+ */
+async function downloadMusic(
+  event: Electron.IpcMainEvent,
+  {
+    url,
+    filename,
+    songInfo,
+    type = 'mp3'
+  }: { url: string; filename: string; songInfo: any; type?: string }
+) {
+  let finalFilePath = '';
+  let writer: fs.WriteStream | null = null;
+
+  try {
+    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, `${sanitizedFilename}${urlExt}`);
+
+    // 检查文件是否已存在，如果存在则添加序号
+    finalFilePath = filePath;
+    let counter = 1;
+    while (fs.existsSync(finalFilePath)) {
+      const ext = path.extname(filePath);
+      const nameWithoutExt = filePath.slice(0, -ext.length);
+      finalFilePath = `${nameWithoutExt} (${counter})${ext}`;
+      counter++;
+    }
+
+    // 先获取文件大小
+    const headResponse = await axios.head(url);
+    const totalSize = parseInt(headResponse.headers['content-length'] || '0', 10);
+
+    // 开始下载
+    const response = await axios({
+      url,
+      method: 'GET',
+      responseType: 'stream',
+      timeout: 30000 // 30秒超时
+    });
+
+    writer = fs.createWriteStream(finalFilePath);
+    let downloadedSize = 0;
+
+    // 使用 data 事件来跟踪下载进度
+    response.data.on('data', (chunk: Buffer) => {
+      downloadedSize += chunk.length;
+      const progress = Math.round((downloadedSize / totalSize) * 100);
+      event.reply('music-download-progress', {
+        filename,
+        progress,
+        loaded: downloadedSize,
+        total: totalSize,
+        path: finalFilePath,
+        status: progress === 100 ? 'completed' : 'downloading',
+        songInfo: songInfo || {
+          name: filename,
+          ar: [{ name: '本地音乐' }],
+          picUrl: '/images/default_cover.png'
+        }
+      });
+    });
+
+    // 等待下载完成
+    await new Promise((resolve, reject) => {
+      writer!.on('finish', () => resolve(undefined));
+      writer!.on('error', (error) => reject(error));
+      response.data.pipe(writer!);
+    });
+
+    // 验证文件是否完整下载
+    const stats = fs.statSync(finalFilePath);
+    if (stats.size !== totalSize) {
+      throw new Error('文件下载不完整');
+    }
+
+    // 保存下载信息
+    try {
+      const songInfos = store.get('downloadedSongs', {}) as Record<string, any>;
+      const defaultInfo = {
+        name: filename,
+        ar: [{ name: '本地音乐' }],
+        picUrl: '/images/default_cover.png'
+      };
+
+      const newSongInfo = {
+        id: songInfo?.id || 0,
+        name: songInfo?.name || filename,
+        filename,
+        picUrl: songInfo?.picUrl || defaultInfo.picUrl,
+        ar: songInfo?.ar || defaultInfo.ar,
+        size: totalSize,
+        path: finalFilePath,
+        downloadTime: Date.now(),
+        al: songInfo?.al || { picUrl: songInfo?.picUrl || defaultInfo.picUrl },
+        type: type || 'mp3'
+      };
+
+      // 保存到下载记录
+      songInfos[finalFilePath] = newSongInfo;
+      store.set('downloadedSongs', songInfos);
+
+      // 添加到下载历史
+      const history = downloadStore.get('history', []) as any[];
+      history.unshift(newSongInfo);
+      downloadStore.set('history', history);
+
+      // 发送下载完成事件
+      event.reply('music-download-complete', {
+        success: true,
+        path: finalFilePath,
+        filename,
+        size: totalSize,
+        songInfo: newSongInfo
+      });
+    } catch (error) {
+      console.error('Error saving download info:', error);
+      throw new Error('保存下载信息失败');
+    }
+  } catch (error: any) {
+    console.error('Download error:', error);
+
+    // 清理未完成的下载
+    if (writer) {
+      writer.end();
+    }
+    if (finalFilePath && fs.existsSync(finalFilePath)) {
+      try {
+        fs.unlinkSync(finalFilePath);
+      } catch (e) {
+        console.error('Failed to delete incomplete download:', e);
+      }
+    }
+
+    event.reply('music-download-complete', {
+      success: false,
+      error: error.message || '下载失败',
+      filename
+    });
+  }
+}
--- a/src/main/modules/fonts.ts
+++ b/src/main/modules/fonts.ts
@@ -0,0 +1,42 @@
+import { ipcMain } from 'electron';
+import { getFonts } from 'font-list';
+
+/**
+ * 清理字体名称
+ * @param fontName 原始字体名称
+ * @returns 清理后的字体名称
+ */
+function cleanFontName(fontName: string): string {
+  return fontName
+    .trim()
+    .replace(/^["']|["']$/g, '') // 移除首尾的引号
+    .replace(/\s+/g, ' '); // 将多个空格替换为单个空格
+}
+
+/**
+ * 获取系统字体列表
+ */
+async function getSystemFonts(): Promise<string[]> {
+  try {
+    // 使用 font-list 获取系统字体
+    const fonts = await getFonts();
+    // 清理字体名称并去重
+    const cleanedFonts = [...new Set(fonts.map(cleanFontName))];
+    // 添加系统默认字体并排序
+    return ['system-ui', ...cleanedFonts].sort();
+  } catch (error) {
+    console.error('获取系统字体失败:', error);
+    // 如果获取失败，至少返回系统默认字体
+    return ['system-ui'];
+  }
+}
+
+/**
+ * 初始化字体管理模块
+ */
+export function initializeFonts() {
+  // 添加获取系统字体的 IPC 处理
+  ipcMain.handle('get-system-fonts', async () => {
+    return await getSystemFonts();
+  });
+}
--- a/src/main/modules/shortcuts.ts
+++ b/src/main/modules/shortcuts.ts
@@ -0,0 +1,88 @@
+import { globalShortcut, ipcMain } from 'electron';
+
+import { getStore } from './config';
+
+// 添加获取平台信息的 IPC 处理程序
+ipcMain.on('get-platform', (event) => {
+  event.returnValue = process.platform;
+});
+
+// 定义默认快捷键
+export const defaultShortcuts = {
+  togglePlay: 'CommandOrControl+Alt+P',
+  prevPlay: 'CommandOrControl+Alt+Left',
+  nextPlay: 'CommandOrControl+Alt+Right',
+  volumeUp: 'CommandOrControl+Alt+Up',
+  volumeDown: 'CommandOrControl+Alt+Down',
+  toggleFavorite: 'CommandOrControl+Alt+L',
+  toggleWindow: 'CommandOrControl+Alt+Shift+M'
+};
+
+let mainWindowRef: Electron.BrowserWindow | null = null;
+
+// 注册快捷键
+export function registerShortcuts(mainWindow: Electron.BrowserWindow) {
+  mainWindowRef = mainWindow;
+  const store = getStore();
+  const shortcuts = store.get('shortcuts');
+
+  // 注销所有已注册的快捷键
+  globalShortcut.unregisterAll();
+
+  // 显示/隐藏主窗口
+  globalShortcut.register(shortcuts.toggleWindow, () => {
+    if (mainWindow.isVisible()) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+    }
+  });
+
+  // 播放/暂停
+  globalShortcut.register(shortcuts.togglePlay, () => {
+    mainWindow.webContents.send('global-shortcut', 'togglePlay');
+  });
+
+  // 上一首
+  globalShortcut.register(shortcuts.prevPlay, () => {
+    mainWindow.webContents.send('global-shortcut', 'prevPlay');
+  });
+
+  // 下一首
+  globalShortcut.register(shortcuts.nextPlay, () => {
+    mainWindow.webContents.send('global-shortcut', 'nextPlay');
+  });
+
+  // 音量增加
+  globalShortcut.register(shortcuts.volumeUp, () => {
+    mainWindow.webContents.send('global-shortcut', 'volumeUp');
+  });
+
+  // 音量减少
+  globalShortcut.register(shortcuts.volumeDown, () => {
+    mainWindow.webContents.send('global-shortcut', 'volumeDown');
+  });
+
+  // 收藏当前歌曲
+  globalShortcut.register(shortcuts.toggleFavorite, () => {
+    mainWindow.webContents.send('global-shortcut', 'toggleFavorite');
+  });
+}
+
+// 初始化快捷键
+export function initializeShortcuts(mainWindow: Electron.BrowserWindow) {
+  mainWindowRef = mainWindow;
+  registerShortcuts(mainWindow);
+
+  // 监听禁用快捷键事件
+  ipcMain.on('disable-shortcuts', () => {
+    globalShortcut.unregisterAll();
+  });
+
+  // 监听启用快捷键事件
+  ipcMain.on('enable-shortcuts', () => {
+    if (mainWindowRef) {
+      registerShortcuts(mainWindowRef);
+    }
+  });
+}
--- a/src/main/modules/tray.ts
+++ b/src/main/modules/tray.ts
@@ -0,0 +1,82 @@
+import { app, BrowserWindow, Menu, nativeImage, Tray } from 'electron';
+import { join } from 'path';
+
+import type { Language } from '../../i18n/main';
+import i18n from '../../i18n/main';
+
+let tray: Tray | null = null;
+
+const LANGUAGES: { label: string; value: Language }[] = [
+  { label: '简体中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' }
+];
+
+// 导出更新菜单的函数
+export function updateTrayMenu() {
+  if (!tray) return;
+
+  // 创建一个上下文菜单
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: i18n.global.t('common.tray.show'),
+      click: () => {
+        BrowserWindow.getAllWindows()[0]?.show();
+      }
+    },
+    { type: 'separator' },
+    {
+      label: i18n.global.t('common.language'),
+      submenu: LANGUAGES.map(({ label, value }) => ({
+        label,
+        type: 'radio',
+        checked: i18n.global.locale === value,
+        click: () => {
+          // 更新主进程的语言设置
+          i18n.global.locale = value;
+          // 更新托盘菜单
+          updateTrayMenu();
+          // 直接通知主窗口
+          const windows = BrowserWindow.getAllWindows();
+          for (const win of windows) {
+            win.webContents.send('language-changed', value);
+            console.log('向窗口发送语言变更事件:', value);
+          }
+        }
+      }))
+    },
+    { type: 'separator' },
+    {
+      label: i18n.global.t('common.tray.quit'),
+      click: () => {
+        app.quit();
+      }
+    }
+  ]);
+
+  // 设置系统托盘图标的上下文菜单
+  tray.setContextMenu(contextMenu);
+}
+
+/**
+ * 初始化系统托盘
+ */
+export function initializeTray(iconPath: string, mainWindow: BrowserWindow) {
+  const trayIcon = nativeImage
+    .createFromPath(join(iconPath, 'icon_16x16.png'))
+    .resize({ width: 16, height: 16 });
+  tray = new Tray(trayIcon);
+
+  // 初始化菜单
+  updateTrayMenu();
+
+  // 当系统托盘图标被点击时，切换窗口的显示/隐藏
+  tray.on('click', () => {
+    if (mainWindow.isVisible()) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+    }
+  });
+
+  return tray;
+}
--- a/src/main/modules/update.ts
+++ b/src/main/modules/update.ts
@@ -0,0 +1,90 @@
+import axios from 'axios';
+import { exec } from 'child_process';
+import { app, BrowserWindow, ipcMain } from 'electron';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function setupUpdateHandlers(_mainWindow: BrowserWindow) {
+  ipcMain.on('start-download', async (event, url: string) => {
+    try {
+      const response = await axios({
+        url,
+        method: 'GET',
+        responseType: 'stream',
+        onDownloadProgress: (progressEvent: { loaded: number; total?: number }) => {
+          if (!progressEvent.total) return;
+          const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
+          const downloaded = (progressEvent.loaded / 1024 / 1024).toFixed(2);
+          const total = (progressEvent.total / 1024 / 1024).toFixed(2);
+          event.sender.send('download-progress', percent, `已下载 ${downloaded}MB / ${total}MB`);
+        }
+      });
+
+      const fileName = url.split('/').pop() || 'update.exe';
+      const downloadPath = path.join(app.getPath('downloads'), fileName);
+
+      // 创建写入流
+      const writer = fs.createWriteStream(downloadPath);
+
+      // 将响应流写入文件
+      response.data.pipe(writer);
+
+      // 处理写入完成
+      writer.on('finish', () => {
+        event.sender.send('download-complete', true, downloadPath);
+      });
+
+      // 处理写入错误
+      writer.on('error', (error) => {
+        console.error('Write file error:', error);
+        event.sender.send('download-complete', false, '');
+      });
+    } catch (error) {
+      console.error('Download failed:', error);
+      event.sender.send('download-complete', false, '');
+    }
+  });
+
+  ipcMain.on('install-update', (_event, filePath: string) => {
+    if (!fs.existsSync(filePath)) {
+      console.error('Installation file not found:', filePath);
+      return;
+    }
+
+    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);
+          }
+        });
+      } else if (ext === '.deb') {
+        exec(`pkexec dpkg -i "${filePath}"`, (error) => {
+          if (error) {
+            console.error('Error installing deb package:', error);
+          }
+        });
+      }
+    }
+  });
+}
--- a/src/main/modules/window.ts
+++ b/src/main/modules/window.ts
@@ -0,0 +1,120 @@
+import { is } from '@electron-toolkit/utils';
+import { app, BrowserWindow, ipcMain, session, shell } from 'electron';
+import Store from 'electron-store';
+import { join } from 'path';
+
+const store = new Store();
+
+/**
+ * 初始化代理设置
+ */
+function initializeProxy() {
+  const defaultConfig = {
+    enable: false,
+    protocol: 'http',
+    host: '127.0.0.1',
+    port: 7890
+  };
+
+  const proxyConfig = store.get('set.proxyConfig', defaultConfig) as {
+    enable: boolean;
+    protocol: string;
+    host: string;
+    port: number;
+  };
+
+  if (proxyConfig?.enable) {
+    const proxyRules = `${proxyConfig.protocol}://${proxyConfig.host}:${proxyConfig.port}`;
+    session.defaultSession.setProxy({ proxyRules });
+  } else {
+    session.defaultSession.setProxy({ proxyRules: '' });
+  }
+}
+
+/**
+ * 初始化窗口管理相关的IPC监听
+ */
+export function initializeWindowManager() {
+  // 初始化代理设置
+  initializeProxy();
+
+  ipcMain.on('minimize-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      win.minimize();
+    }
+  });
+
+  ipcMain.on('maximize-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      if (win.isMaximized()) {
+        win.unmaximize();
+      } else {
+        win.maximize();
+      }
+    }
+  });
+
+  ipcMain.on('close-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      win.destroy();
+      app.quit();
+    }
+  });
+
+  ipcMain.on('mini-tray', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      win.hide();
+    }
+  });
+
+  // 监听代理设置变化
+  store.onDidChange('set.proxyConfig', () => {
+    initializeProxy();
+  });
+}
+
+/**
+ * 创建主窗口
+ */
+export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 780,
+    show: false,
+    frame: false,
+    autoHideMenuBar: true,
+    icon,
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false,
+      contextIsolation: true,
+      webSecurity: false
+    }
+  });
+
+  mainWindow.setMinimumSize(1200, 780);
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show();
+  });
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url);
+    return { action: 'deny' };
+  });
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env.ELECTRON_RENDERER_URL) {
+    mainWindow.webContents.openDevTools({ mode: 'detach' });
+    mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL);
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
+  }
+
+  return mainWindow;
+}
--- a/src/main/server.ts
+++ b/src/main/server.ts
@@ -1,6 +1,7 @@
 import { ipcMain } from 'electron';
 import Store from 'electron-store';
 import fs from 'fs';
+import server from 'netease-cloud-music-api-alger/server';
 import os from 'os';
 import path from 'path';

@@ -12,13 +13,10 @@ if (!fs.existsSync(path.resolve(os.tmpdir(), 'anonymous_token'))) {
 }

 // 处理解锁音乐请求
-ipcMain.handle('unblock-music', async (_, id) => {
-  return unblockMusic(id);
+ipcMain.handle('unblock-music', async (_, id, data) => {
+  return unblockMusic(id, data);
 });

-import server from 'netease-cloud-music-api-alger/server';
-
-
 async function startMusicApi(): Promise<void> {
  console.log('MUSIC API STARTED');

--- a/src/main/set.json
+++ b/src/main/set.json
@@ -1,8 +1,24 @@
 {
  "isProxy": false,
+  "proxyConfig": {
+    "enable": false,
+    "protocol": "http",
+    "host": "127.0.0.1",
+    "port": 7890
+  },
+  "enableRealIP": false,
+  "realIP": "",
  "noAnimate": false,
  "animationSpeed": 1,
  "author": "Alger",
  "authorUrl": "https://github.com/algerkong",
-  "musicApiPort": 30488
+  "musicApiPort": 30488,
+  "closeAction": "ask",
+  "musicQuality": "higher",
+  "fontFamily": "system-ui",
+  "fontScope": "global",
+  "autoPlay": false,
+  "downloadPath": "",
+  "language": "zh-CN",
+  "alwaysShowDownloadButton": false
 }
--- a/src/main/unblockMusic.ts
+++ b/src/main/unblockMusic.ts
@@ -1,23 +1,75 @@
 import match from '@unblockneteasemusic/server';

-const unblockMusic = async (id: any): Promise<any> => {
-  return new Promise((resolve, reject) => {
-    match(parseInt(id, 10), ['qq', 'migu', 'kugou', 'joox'])
-      .then((data) => {
-        resolve({
-          data: {
-            data,
-            params: {
-              id,
-              type: 'song'
-            }
+type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube';
+
+interface SongData {
+  name: string;
+  artists: Array<{ name: string }>;
+  album?: { name: string };
+}
+
+interface ResponseData {
+  url: string;
+  br: number;
+  size: number;
+  md5?: string;
+  platform?: Platform;
+  gain?: number;
+}
+
+interface UnblockResult {
+  data: {
+    data: ResponseData;
+    params: {
+      id: number;
+      type: 'song';
+    };
+  };
+}
+
+/**
+ * 音乐解析函数
+ * @param id 歌曲ID
+ * @param songData 歌曲信息
+ * @param retryCount 重试次数
+ * @returns Promise<UnblockResult>
+ */
+const unblockMusic = async (
+  id: number | string,
+  songData: SongData,
+  retryCount = 3
+): Promise<UnblockResult> => {
+  // 所有可用平台
+  const platforms: Platform[] = ['migu', 'kugou', 'pyncmd', 'joox', 'kuwo', 'bilibili', 'youtube'];
+
+  const retry = async (attempt: number): Promise<UnblockResult> => {
+    try {
+      const data = await match(parseInt(String(id), 10), platforms, songData);
+      const result: UnblockResult = {
+        data: {
+          data,
+          params: {
+            id: parseInt(String(id), 10),
+            type: 'song'
          }
-        });
-      })
-      .catch((err) => {
-        reject(err);
-      });
-  });
+        }
+      };
+      return result;
+    } catch (err) {
+      if (attempt < retryCount) {
+        // 延迟重试，每次重试增加延迟时间
+        await new Promise((resolve) => setTimeout(resolve, 1000 * attempt));
+        return retry(attempt + 1);
+      }
+
+      // 所有重试都失败后，抛出详细错误
+      throw new Error(
+        `音乐解析失败 (ID: ${id}): ${err instanceof Error ? err.message : '未知错误'}`
+      );
+    }
+  };
+
+  return retry(1);
 };

-export { unblockMusic };
+export { type Platform, type ResponseData, type SongData, unblockMusic, type UnblockResult };
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -12,7 +12,15 @@ declare global {
      dragStart: (data: string) => void;
      miniTray: () => void;
      restart: () => void;
-      unblockMusic: (id: number) => Promise<any>;
+      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>;
    };
+    $message: any;
  }
 }
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -11,7 +11,46 @@ const api = {
  restart: () => ipcRenderer.send('restart'),
  openLyric: () => ipcRenderer.send('open-lyric'),
  sendLyric: (data) => ipcRenderer.send('send-lyric', data),
-  unblockMusic: (id) => ipcRenderer.invoke('unblock-music', id)
+  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) => {
+    console.log('注册语言变更监听器');
+    ipcRenderer.on('language-changed', (_event, locale) => {
+      console.log('收到语言变更事件:', locale);
+      callback(locale);
+    });
+  },
+  removeDownloadListeners: () => {
+    ipcRenderer.removeAllListeners('download-progress');
+    ipcRenderer.removeAllListeners('download-complete');
+  },
+  // 歌词缓存相关
+  invoke: (channel: string, ...args: any[]) => {
+    const validChannels = [
+      'get-lyrics',
+      'clear-lyrics-cache',
+      'get-system-fonts',
+      'get-cached-lyric',
+      'cache-lyric',
+      'clear-lyric-cache'
+    ];
+    if (validChannels.includes(channel)) {
+      return ipcRenderer.invoke(channel, ...args);
+    }
+    return Promise.reject(new Error(`未授权的 IPC 通道: ${channel}`));
+  }
 };

 // Use `contextBridge` APIs to expose Electron APIs to
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -12,30 +12,84 @@

 <script setup lang="ts">
 import { darkTheme, lightTheme } from 'naive-ui';
-import { onMounted } from 'vue';
-import { isElectron } from '@/utils';
+import { computed, nextTick, watch } from 'vue';
+import { useI18n } from 'vue-i18n';

 import homeRouter from '@/router/home';
-import store from '@/store';
+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';

+const { locale } = useI18n();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
+const playerStore = usePlayerStore();
+
+// 监听语言变化
+watch(
+  () => settingsStore.setData.language,
+  (newLanguage) => {
+    if (newLanguage && newLanguage !== locale.value) {
+      locale.value = newLanguage;
+    }
+  },
+  { immediate: true }
+);
+
 const theme = computed(() => {
-  return store.state.theme;
+  return settingsStore.theme;
 });

-onMounted(() => {
-  store.dispatch('initializeSettings');
-  store.dispatch('initializeTheme');
+// 监听字体变化并应用
+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) {
-    store.commit(
-      'setMenus',
-      homeRouter.filter((item) => item.meta.isMobile)
-    );
-    console.log(
-      'qqq ',
-      homeRouter.filter((item) => item.meta.isMobile)
-    );
+    menuStore.setMenus(homeRouter.filter((item) => item.meta.isMobile));
+  }
+}
+
+handleSetLanguage(settingsStore.setData.language);
+
+if (isElectron) {
+  window.api.onLanguageChanged(handleSetLanguage);
+}
+
+onMounted(async () => {
+  if (isLyricWindow.value) {
+    return;
+  }
+  // 先初始化播放状态
+  await playerStore.initializePlayState();
+  // 如果有正在播放的音乐，则初始化音频监听器
+  if (playerStore.playMusic && playerStore.playMusic.id) {
+    // 使用 nextTick 确保 DOM 更新后再初始化
+    await nextTick();
+    initAudioListeners();
  }
 });
 </script>
--- a/src/renderer/api/artist.ts
+++ b/src/renderer/api/artist.ts
@@ -0,0 +1,21 @@
+import request from '@/utils/request';
+
+// 获取歌手详情
+export const getArtistDetail = (id) => {
+  return request.get('/artist/detail', { params: { id } });
+};
+
+// 获取歌手热门歌曲
+export const getArtistTopSongs = (params) => {
+  return request.get('/artist/songs', {
+    params: {
+      ...params,
+      order: 'hot'
+    }
+  });
+};
+
+// 获取歌手专辑
+export const getArtistAlbums = (params) => {
+  return request.get('/artist/album', { params });
+};
--- a/src/renderer/api/donation.ts
+++ b/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;
+};
--- a/src/renderer/api/music.ts
+++ b/src/renderer/api/music.ts
@@ -1,11 +1,47 @@
-import { ILyric } from '@/type/lyric';
-import { IPlayMusicUrl } from '@/type/music';
+import { musicDB } from '@/hooks/MusicHook';
+import { useSettingsStore, useUserStore } from '@/store';
+import type { ILyric } from '@/type/lyric';
 import { isElectron } from '@/utils';
 import request from '@/utils/request';
 import requestMusic from '@/utils/request_music';
+
+const { addData, getData, deleteData } = musicDB;
+
+// 获取音乐音质详情
+export const getMusicQualityDetail = (id: number) => {
+  return request.get('/song/music/detail', { params: { id } });
+};
+
 // 根据音乐Id获取音乐播放URl
-export const getMusicUrl = (id: number) => {
-  return request.get<IPlayMusicUrl>('/song/url', { params: { id } });
+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 }] } };
+      }
+    }
+  } catch (error) {
+    console.error('error', error);
+  }
+
+  return await request.get('/song/url/v1', {
+    params: {
+      id,
+      level: settingStore.setData.musicQuality || 'higher'
+    }
+  });
 };

 // 获取歌曲详情
@@ -14,13 +50,63 @@ export const getMusicDetail = (ids: Array<number>) => {
 };

 // 根据音乐Id获取音乐歌词
-export const getMusicLrc = (id: number) => {
-  return request.get<ILyric>('/lyric', { params: { id } });
+export const getMusicLrc = async (id: number) => {
+  const TEN_DAYS_MS = 10 * 24 * 60 * 60 * 1000; // 10天的毫秒数
+
+  try {
+    // 尝试获取缓存的歌词
+    const cachedLyric = await getData('music_lyric', id);
+    if (cachedLyric?.createTime && Date.now() - cachedLyric.createTime < TEN_DAYS_MS) {
+      return { ...cachedLyric };
+    }
+
+    // 获取新的歌词数据
+    const res = await request.get<ILyric>('/lyric', { params: { id } });
+
+    // 只有在成功获取新数据后才删除旧缓存并添加新缓存
+    if (res?.data) {
+      if (cachedLyric) {
+        await deleteData('music_lyric', id);
+      }
+      addData('music_lyric', { id, data: res.data, createTime: Date.now() });
+    }
+
+    return res;
+  } catch (error) {
+    console.error('获取歌词失败:', error);
+    throw error; // 向上抛出错误，让调用者处理
+  }
 };

-export const getParsingMusicUrl = (id: number) => {
+export const getParsingMusicUrl = (id: number, data: any) => {
  if (isElectron) {
-    return window.api.unblockMusic(id);
+    return window.api.unblockMusic(id, data);
  }
  return requestMusic.get<any>('/music', { params: { id } });
 };
+
+// 收藏歌曲
+export const likeSong = (id: number, like: boolean = true) => {
+  return request.get('/like', { params: { id, like } });
+};
+
+// 获取用户喜欢的音乐列表
+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 });
+};
--- a/src/renderer/api/search.ts
+++ b/src/renderer/api/search.ts
@@ -3,6 +3,8 @@ import request from '@/utils/request';
 interface IParams {
  keywords: string;
  type: number;
+  limit?: number;
+  offset?: number;
 }
 // 搜索内容
 export const getSearch = (params: IParams) => {
--- a/src/renderer/assets/css/animate.css
+++ b/src/renderer/assets/css/animate.css
--- a/src/renderer/assets/css/base.css
+++ b/src/renderer/assets/css/base.css
@@ -5,3 +5,15 @@ body {
 .n-popover:has(.music-play) {
  border-radius: 1.5rem !important;
 }
+.n-popover {
+  border-radius: 0.5rem !important;
+  overflow: hidden !important;
+}
+.n-popover:has(.transparent-popover ) {
+  background-color: transparent !important;
+  padding: 0 !important;
+}
+
+.settings-slider .n-slider-mark {
+  font-size: 10px !important;
+}
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -2,21 +2,30 @@
 // @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 {
    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']
    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
    NDropdown: typeof import('naive-ui')['NDropdown']
    NEllipsis: typeof import('naive-ui')['NEllipsis']
    NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NIcon: typeof import('naive-ui')['NIcon']
    NImage: typeof import('naive-ui')['NImage']
    NInput: typeof import('naive-ui')['NInput']
    NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -24,10 +33,17 @@ declare module 'vue' {
    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']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
    NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
    NSpin: typeof import('naive-ui')['NSpin']
    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
    NTag: typeof import('naive-ui')['NTag']
    NTooltip: typeof import('naive-ui')['NTooltip']
    NVirtualList: typeof import('naive-ui')['NVirtualList']
--- a/src/renderer/components/Coffee.vue
+++ b/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,7 +61,13 @@
 </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 = () => {
@@ -56,14 +75,18 @@ const copyQQ = () => {
  message.success('已复制到剪贴板');
 };

+const toDonateList = () => {
+  window.open('http://donate.alger.fun', '_blank');
+};
+
 defineProps({
  alipayQR: {
    type: String,
-    required: true
+    default: alipay
  },
  wechatQR: {
    type: String,
-    required: true
+    default: wechat
  }
 });
 </script>
--- a/src/renderer/components/EQControl.vue
+++ b/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>
--- a/src/renderer/components/LanguageSwitcher.vue
+++ b/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>
--- a/src/renderer/components/MusicList.vue
+++ b/src/renderer/components/MusicList.vue
@@ -7,6 +7,7 @@
    mask-closable
    :style="{ backgroundColor: 'transparent' }"
    :to="`#layout-main`"
+    :z-index="zIndex"
    @mask-click="close"
  >
    <div class="music-page">
@@ -17,7 +18,7 @@
          </div>
        </n-ellipsis>
        <div class="music-close">
-          <i class="icon iconfont icon-icon_error" @click="close"></i>
+          <i class="icon iconfont ri-close-line" @click="close"></i>
        </div>
      </div>
      <div class="music-content">
@@ -36,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>

@@ -58,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>
@@ -74,20 +85,24 @@
 </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<{
    show: boolean;
    name: string;
+    zIndex?: number;
    songList: any[];
    loading?: boolean;
    listInfo?: {
@@ -95,20 +110,27 @@ const props = withDefaults(
      [key: string]: any;
    };
    cover?: boolean;
+    canRemove?: boolean;
  }>(),
  {
    loading: false,
-    cover: true
+    cover: true,
+    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(() => {
@@ -118,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">
@@ -228,13 +371,17 @@ 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);
  }

  &-close {
-    @apply cursor-pointer text-gray-900 dark:text-white flex gap-2 items-center;
+    @apply cursor-pointer text-gray-500 dark:text-white hover:text-gray-900 dark:hover:text-gray-300 flex gap-2 items-center transition;
    .icon {
      @apply text-3xl;
    }
@@ -292,6 +439,7 @@ watch(

  .music-content {
    @apply flex-col;
+    width: 100vw !important;
  }

  .music-info {
@@ -313,4 +461,13 @@ watch(
 .double-item {
  @apply mb-2 bg-light-100 bg-opacity-20 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
 }
+
+.mobile {
+  .music-info {
+    @apply hidden;
+  }
+  .music-list-content {
+    @apply pb-[100px];
+  }
+}
 </style>
--- a/src/renderer/components/MvPlayer.vue
+++ b/src/renderer/components/MvPlayer.vue
@@ -38,11 +38,6 @@
              :step="0.1"
              @update:value="handleProgressChange"
            >
-              <template #rail>
-                <div class="progress-rail">
-                  <div class="progress-buffer" :style="{ width: `${bufferedProgress}%` }"></div>
-                </div>
-              </template>
            </n-slider>
          </div>

@@ -59,7 +54,7 @@
                    </template>
                  </n-button>
                </template>
-                上一个
+                {{ t('player.previous') }}
              </n-tooltip>

              <n-tooltip placement="top">
@@ -73,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">
@@ -87,7 +82,7 @@
                    </template>
                  </n-button>
                </template>
-                下一个
+                {{ t('player.next') }}
              </n-tooltip>

              <div class="time-display">
@@ -109,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"
@@ -134,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">
@@ -149,7 +146,7 @@
                    </template>
                  </n-button>
                </template>
-                {{ isFullscreen ? '退出全屏' : '全屏' }}
+                {{ isFullscreen ? t('player.fullscreen.exit') : t('player.fullscreen.enter') }}
              </n-tooltip>

              <n-tooltip placement="top">
@@ -162,7 +159,7 @@
                    </template>
                  </n-button>
                </template>
-                关闭
+                {{ t('player.close') }}
              </n-tooltip>
            </div>
          </div>
@@ -175,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>
@@ -193,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,
@@ -223,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);

@@ -320,7 +319,6 @@ onUnmounted(() => {
  if (cursorTimer) {
    clearTimeout(cursorTimer);
  }
-  unlockScreenOrientation();
 });

 // 监听 currentMv 的变化
@@ -361,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);
  }
 };

@@ -421,27 +419,6 @@ const checkFullscreenAPI = () => {
  };
 };

-// 添加横屏锁定功能
-const lockScreenOrientation = async () => {
-  try {
-    if ('orientation' in screen) {
-      await (screen as any).orientation.lock('landscape');
-    }
-  } catch (error) {
-    console.warn('无法锁定屏幕方向:', error);
-  }
-};
-
-const unlockScreenOrientation = () => {
-  try {
-    if ('orientation' in screen) {
-      (screen as any).orientation.unlock();
-    }
-  } catch (error) {
-    console.warn('无法解锁屏幕方向:', error);
-  }
-};
-
 // 修改切换全屏状态的方法
 const toggleFullscreen = async () => {
  const api = checkFullscreenAPI();
@@ -455,17 +432,9 @@ const toggleFullscreen = async () => {
    if (!api.fullscreenElement) {
      await videoContainerRef.value?.requestFullscreen();
      isFullscreen.value = true;
-      // 在移动端进入全屏时锁定横屏
-      if (window.innerWidth <= 768) {
-        await lockScreenOrientation();
-      }
    } else {
      await document.exitFullscreen();
      isFullscreen.value = false;
-      // 退出全屏时解锁屏幕方向
-      if (window.innerWidth <= 768) {
-        unlockScreenOrientation();
-      }
    }
  } catch (error) {
    console.error('切换全屏失败:', error);
@@ -574,7 +543,7 @@ watch(showControls, (newValue) => {
  }
 });

-const isMobile = computed(() => store.state.isMobile);
+const isMobile = computed(() => false); // TODO: 从 settings store 获取
 </script>

 <style scoped lang="scss">
@@ -643,10 +612,44 @@ const isMobile = computed(() => store.state.isMobile);
 .custom-slider {
  :deep(.n-slider) {
    --n-rail-height: 4px;
-    --n-rail-color: rgba(255, 255, 255, 0.2);
-    --n-fill-color: #10b981;
+    --n-rail-color: theme('colors.gray.200');
+    --n-rail-color-dark: theme('colors.gray.700');
+    --n-fill-color: theme('colors.green.500');
    --n-handle-size: 12px;
-    --n-handle-color: #10b981;
+    --n-handle-color: theme('colors.green.500');
+
+    &.n-slider--vertical {
+      height: 100%;
+
+      .n-slider-rail {
+        width: 4px;
+      }
+
+      &:hover {
+        .n-slider-rail {
+          width: 6px;
+        }
+
+        .n-slider-handle {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .n-slider-rail {
+      @apply overflow-hidden transition-all duration-200;
+      @apply bg-gray-500 dark:bg-dark-300 bg-opacity-10 !important;
+    }
+
+    .n-slider-handle {
+      @apply transition-all duration-200;
+      opacity: 0;
+    }
+
+    &:hover .n-slider-handle {
+      opacity: 1;
+    }
  }
 }

--- a/src/renderer/components/RecommendSinger.vue
+++ b/src/renderer/components/RecommendSinger.vue
@@ -1,176 +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 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 router from '@/router';
-import { IDayRecommend } from '@/type/day_recommend';
-import type { IHotSinger } from '@/type/singer';
-import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
-import MusicList from '@/components/MusicList.vue';
-
-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>
--- a/src/renderer/components/ShortcutToast.vue
+++ b/src/renderer/components/ShortcutToast.vue
@@ -0,0 +1,91 @@
+<template>
+  <transition name="shortcut-toast">
+    <div v-if="visible" class="shortcut-toast">
+      <div class="shortcut-toast-content">
+        <div class="shortcut-toast-icon">
+          <i :class="icon"></i>
+        </div>
+        <div class="shortcut-toast-text">{{ text }}</div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, ref } from 'vue';
+
+const visible = ref(false);
+const text = ref('');
+const icon = ref('');
+let timer: NodeJS.Timeout | null = null;
+
+const show = (message: string, iconName: string) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  text.value = message;
+  icon.value = iconName;
+  visible.value = true;
+
+  timer = setTimeout(() => {
+    visible.value = false;
+    // 在动画结束后触发销毁事件
+    setTimeout(() => {
+      emit('destroy');
+    }, 300);
+  }, 1500);
+};
+
+// 清理定时器
+onBeforeUnmount(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+});
+
+const emit = defineEmits(['destroy']);
+
+// 暴露方法给父组件
+defineExpose({
+  show
+});
+</script>
+
+<style lang="scss" scoped>
+.shortcut-toast {
+  @apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999];
+  @apply flex items-center justify-center;
+
+  &-content {
+    @apply flex flex-col items-center gap-2 p-4 rounded-lg;
+    @apply bg-light-200 bg-opacity-70 dark:bg-dark-200 dark:bg-opacity-90;
+    @apply text-dark-100 dark:text-light-100;
+    @apply shadow-lg backdrop-blur-sm;
+    min-width: 120px;
+  }
+
+  &-icon {
+    @apply text-3xl;
+  }
+
+  &-text {
+    @apply text-sm font-medium text-center;
+  }
+}
+
+.shortcut-toast-enter-active,
+.shortcut-toast-leave-active {
+  @apply transition-all duration-300;
+}
+
+.shortcut-toast-enter-from,
+.shortcut-toast-leave-to {
+  @apply opacity-0 scale-90;
+}
+
+.shortcut-toast-enter-to,
+.shortcut-toast-leave-from {
+  @apply opacity-100 scale-100;
+}
+</style>
--- a/src/renderer/components/common/ArtistDrawer.vue
+++ b/src/renderer/components/common/ArtistDrawer.vue
@@ -0,0 +1,328 @@
+<template>
+  <n-drawer
+    v-model:show="modelValue"
+    :width="800"
+    placement="right"
+    :mask-closable="true"
+    :z-index="9997"
+  >
+    <div v-loading="loading" class="artist-drawer">
+      <div class="close-btn">
+        <i class="ri-close-line" @click="modelValue = false"></i>
+      </div>
+
+      <!-- 歌手信息头部 -->
+      <div class="artist-header">
+        <div class="artist-cover">
+          <n-image
+            :src="getImgUrl(artistInfo?.avatar, '300y300')"
+            class="w-48 h-48 rounded-2xl object-cover"
+            preview-disabled
+          />
+        </div>
+        <div class="artist-info">
+          <h1 class="artist-name">{{ artistInfo?.name }}</h1>
+          <div v-if="artistInfo?.alias?.length" class="artist-alias">
+            {{ artistInfo.alias.join(' / ') }}
+          </div>
+          <div v-if="artistInfo?.briefDesc" class="artist-desc">
+            {{ artistInfo.briefDesc }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 标签页切换 -->
+      <n-tabs v-model:value="activeTab" class="flex-1" type="line" animated>
+        <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">
+                <song-item
+                  v-for="song in songs"
+                  :key="song.id"
+                  :item="song"
+                  :list="true"
+                  @play="handlePlay"
+                />
+                <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
+              </div>
+              <play-bottom />
+            </n-scrollbar>
+          </div>
+        </n-tab-pane>
+
+        <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">
+                <search-item
+                  v-for="album in albums"
+                  :key="album.id"
+                  shape="square"
+                  :z-index="9998"
+                  :item="{
+                    id: album.id,
+                    picUrl: album.picUrl,
+                    name: album.name,
+                    desc: formatPublishTime(album.publishTime),
+                    size: album.size,
+                    type: '专辑'
+                  }"
+                />
+                <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
+              </div>
+              <play-bottom />
+            </n-scrollbar>
+          </div>
+        </n-tab-pane>
+
+        <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>
+            </n-scrollbar>
+          </div>
+        </n-tab-pane>
+      </n-tabs>
+    </div>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { useDateFormat } from '@vueuse/core';
+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 activeTab = ref('songs');
+
+// 歌手信息
+const artistInfo = ref<IArtist>();
+const songs = ref<any[]>([]);
+const albums = ref<any[]>([]);
+
+// 加载状态
+const songLoading = ref(false);
+const albumLoading = ref(false);
+
+// 分页参数
+const songPage = ref({
+  page: 1,
+  pageSize: 30,
+  hasMore: true
+});
+
+const albumPage = ref({
+  page: 1,
+  pageSize: 30,
+  hasMore: true
+});
+
+watch(modelValue, (newVal) => {
+  settingsStore.setShowArtistDrawer(newVal);
+});
+const loading = ref(false);
+// 加载歌手信息
+
+const previousArtistId = ref<number>();
+const loadArtistInfo = async (id: number) => {
+  // if (currentArtistId.value === id) return;
+  if (previousArtistId.value === id) return;
+  activeTab.value = 'songs';
+  loading.value = true;
+  previousArtistId.value = id;
+  try {
+    const info = await getArtistDetail(id);
+    if (info.data?.data?.artist) {
+      artistInfo.value = info.data.data.artist;
+    }
+    // 重置分页并加载初始数据
+    resetPagination();
+    await Promise.all([loadSongs(), loadAlbums()]);
+  } catch (error) {
+    console.error('加载歌手信息失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置分页
+const resetPagination = () => {
+  songPage.value = {
+    page: 1,
+    pageSize: 30,
+    hasMore: true
+  };
+  albumPage.value = {
+    page: 1,
+    pageSize: 30,
+    hasMore: true
+  };
+  songs.value = [];
+  albums.value = [];
+};
+
+// 加载歌曲
+const loadSongs = async () => {
+  if (!currentArtistId.value || !songPage.value.hasMore || songLoading.value) return;
+
+  try {
+    songLoading.value = true;
+    const { page, pageSize } = songPage.value;
+    const res = await getArtistTopSongs({
+      id: currentArtistId.value,
+      limit: pageSize,
+      offset: (page - 1) * pageSize
+    });
+
+    const ids = res.data.songs.map((item) => item.id);
+    const songsDetail = await getMusicDetail(ids);
+
+    if (songsDetail.data?.songs) {
+      const newSongs = songsDetail.data.songs.map((item) => {
+        return {
+          ...item,
+          picUrl: item.al.picUrl,
+          song: {
+            artists: item.ar,
+            name: item.name,
+            id: item.id
+          }
+        };
+      });
+      songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
+      songPage.value.hasMore = newSongs.length === pageSize;
+      songPage.value.page++;
+    }
+  } catch (error) {
+    console.error('加载歌曲失败:', error);
+  } finally {
+    songLoading.value = false;
+  }
+};
+
+// 加载专辑
+const loadAlbums = async () => {
+  if (!currentArtistId.value || !albumPage.value.hasMore || albumLoading.value) return;
+
+  try {
+    albumLoading.value = true;
+    const { page, pageSize } = albumPage.value;
+    const res = await getArtistAlbums({
+      id: currentArtistId.value,
+      limit: pageSize,
+      offset: (page - 1) * pageSize
+    });
+
+    if (res.data?.hotAlbums) {
+      const newAlbums = res.data.hotAlbums;
+      albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
+      albumPage.value.hasMore = newAlbums.length === pageSize;
+      albumPage.value.page++;
+    }
+  } catch (error) {
+    console.error('加载专辑失败:', error);
+  } finally {
+    albumLoading.value = false;
+  }
+};
+
+// 处理滚动加载
+const handleSongScroll = (e: { target: any }) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollHeight - scrollTop - clientHeight < 50) {
+    loadSongs();
+  }
+};
+
+const handleAlbumScroll = (e: { target: any }) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollHeight - scrollTop - clientHeight < 50) {
+    loadAlbums();
+  }
+};
+
+// 格式化发布时间
+const formatPublishTime = (time: number) => {
+  return useDateFormat(time, 'YYYY-MM-DD').value;
+};
+
+const handlePlay = () => {
+  playerStore.setPlayList(
+    songs.value.map((item) => ({
+      ...item,
+      picUrl: item.al.picUrl
+    }))
+  );
+};
+
+// 暴露方法给父组件
+defineExpose({
+  loadArtistInfo
+});
+</script>
+
+<style lang="scss" scoped>
+.artist-drawer {
+  @apply h-full bg-light dark:bg-dark px-6 overflow-hidden flex flex-col;
+
+  .close-btn {
+    @apply absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-green-500 text-2xl cursor-pointer p-2;
+  }
+
+  .artist-header {
+    @apply flex gap-6 pt-6;
+
+    .artist-info {
+      @apply flex-1;
+
+      .artist-name {
+        @apply text-4xl font-bold mb-2;
+      }
+
+      .artist-alias {
+        @apply text-gray-500 dark:text-gray-400 mb-2;
+      }
+
+      .artist-desc {
+        @apply text-sm text-gray-600 dark:text-gray-300 line-clamp-3;
+      }
+    }
+  }
+
+  .albums-grid {
+    @apply grid gap-4 grid-cols-5;
+  }
+
+  .loading-more {
+    @apply text-center py-4 text-gray-500 dark:text-gray-400;
+  }
+
+  .artist-description {
+    .description-content {
+      @apply text-sm leading-relaxed whitespace-pre-wrap;
+    }
+  }
+}
+</style>
--- a/src/renderer/components/common/DonationList.vue
+++ b/src/renderer/components/common/DonationList.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="donation-container">
+    <div class="refresh-container">
+      <n-button secondary round size="small" :loading="isLoading" @click="fetchDonors">
+        <template #icon>
+          <i class="ri-refresh-line"></i>
+        </template>
+        {{ t('donation.refresh') }}
+      </n-button>
+    </div>
+    <div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
+      <div
+        v-for="(donor, index) in displayDonors"
+        :key="donor.id"
+        class="donation-card animate__animated"
+        :class="getAnimationClass(index)"
+        :style="{ animationDelay: `${index * 0.1}s` }"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+      >
+        <div class="card-content">
+          <div class="donor-avatar">
+            <n-avatar
+              :src="donor.avatar"
+              :fallback-src="defaultAvatar"
+              round
+              size="large"
+              class="animate__animated animate__pulse animate__infinite avatar-img"
+            />
+            <div class="donor-badge" :class="getBadgeClass(donor.badge)">
+              {{ donor.badge }}
+            </div>
+          </div>
+          <div class="donor-info">
+            <div class="donor-name">{{ donor.name }}</div>
+            <div class="donation-meta">
+              <n-tag
+                :type="getAmountTagType(donor.amount)"
+                size="small"
+                class="donation-amount animate__animated"
+                round
+                bordered
+              >
+                ￥{{ donor.amount }}
+              </n-tag>
+              <span class="donation-date">{{ donor.date }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="donor.message" class="donation-message">
+          <n-popover trigger="hover" placement="bottom">
+            <template #trigger>
+              <div class="message-content">
+                <i class="ri-double-quotes-l quote-icon"></i>
+                <div class="message-text">{{ donor.message }}</div>
+                <i class="ri-double-quotes-r quote-icon"></i>
+              </div>
+            </template>
+            <div class="message-popup">
+              <i class="ri-double-quotes-l quote-icon"></i>
+              {{ donor.message }}
+              <i class="ri-double-quotes-r quote-icon"></i>
+            </div>
+          </n-popover>
+        </div>
+        <div class="card-sparkles"></div>
+      </div>
+    </div>
+
+    <div v-if="sortedDonors.length > 8" class="expand-button">
+      <n-button text @click="toggleExpand">
+        <template #icon>
+          <i :class="isExpanded ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"></i>
+        </template>
+        {{ isExpanded ? t('common.collapse') : t('common.expand') }}
+      </n-button>
+    </div>
+
+    <div class="p-6 rounded-lg shadow-lg">
+      <div class="description text-center text-sm text-gray-700 dark:text-gray-200">
+        <p>{{ t('donation.description') }}</p>
+        <p>{{ t('donation.message') }}</p>
+      </div>
+      <div class="flex justify-between mt-6">
+        <div class="flex flex-col items-center gap-2">
+          <n-image
+            :src="alipay"
+            :alt="t('common.alipay')"
+            class="w-60 h-60 rounded-lg cursor-none"
+            preview-disabled
+          />
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.alipay') }}</span>
+        </div>
+        <n-button type="primary" @click="toDonateList">
+          <template #icon>
+            <i class="ri-cup-line"></i>
+          </template>
+          {{ t('donation.toDonateList') }}
+          <i class="ri-arrow-right-s-line"></i>
+        </n-button>
+        <div class="flex flex-col items-center gap-2">
+          <n-image
+            :src="wechat"
+            :alt="t('common.wechat')"
+            class="w-60 h-60 rounded-lg cursor-none"
+            preview-disabled
+          />
+          <span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.wechat') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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';
+
+const donors = ref<Donor[]>([]);
+const isLoading = ref(false);
+
+const fetchDonors = async () => {
+  isLoading.value = true;
+  try {
+    const data = await getDonationList();
+    donors.value = data.map((donor, index) => ({
+      ...donor,
+      avatar: `https://api.dicebear.com/7.x/micah/svg?seed=${index}`
+    }));
+  } catch (error) {
+    console.error('Failed to fetch donors:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchDonors();
+});
+
+onActivated(() => {
+  fetchDonors();
+});
+
+// 动画类名列表
+const animationClasses = [
+  'animate__fadeInUp',
+  'animate__fadeInLeft',
+  'animate__fadeInRight',
+  'animate__zoomIn'
+];
+
+// 获取随机动画类名
+const getAnimationClass = (index: number) => {
+  return animationClasses[index % animationClasses.length];
+};
+
+// 根据金额获取标签类型
+const getAmountTagType = (amount: number): 'success' | 'warning' | 'error' | 'info' => {
+  if (amount >= 5) return 'warning';
+  if (amount >= 2) return 'success';
+  return 'info';
+};
+
+// 获取徽章样式类名
+const getBadgeClass = (badge: string): string => {
+  if (badge.includes('金牌')) return 'badge-gold';
+  if (badge.includes('银牌')) return 'badge-silver';
+  return 'badge-bronze';
+};
+
+// 鼠标悬停效果
+const handleMouseEnter = (event: MouseEvent) => {
+  const card = event.currentTarget as HTMLElement;
+  card.style.transform = 'translateY(-2px)';
+  card.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.12)';
+
+  // 添加金额标签动画
+  const amountTag = card.querySelector('.donation-amount');
+  if (amountTag) {
+    amountTag.classList.add('animate__tada');
+  }
+};
+
+const handleMouseLeave = (event: MouseEvent) => {
+  const card = event.currentTarget as HTMLElement;
+  card.style.transform = 'translateY(0)';
+  card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.08)';
+
+  // 移除金额标签动画
+  const amountTag = card.querySelector('.donation-amount');
+  if (amountTag) {
+    amountTag.classList.remove('animate__tada');
+  }
+};
+
+// 按金额和留言排序的捐赠列表
+const sortedDonors = computed(() => {
+  return [...donors.value].sort((a, b) => {
+    // 如果一个有留言一个没有，有留言的排在前面
+    if (a.message && !b.message) return -1;
+    if (!a.message && b.message) return 1;
+
+    // 都有留言或都没有留言时，按金额从大到小排序
+    const amountDiff = b.amount - a.amount;
+    if (amountDiff !== 0) return amountDiff;
+
+    // 金额相同时，按日期从新到旧排序
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
+});
+
+const isExpanded = ref(false);
+
+const displayDonors = computed(() => {
+  if (isExpanded.value) {
+    return sortedDonors.value;
+  }
+  return sortedDonors.value.slice(0, 8);
+});
+
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+const toDonateList = () => {
+  window.open('http://donate.alger.fun', '_blank');
+};
+</script>
+
+<style lang="scss" scoped>
+.donation-container {
+  @apply w-full overflow-hidden;
+}
+
+.donation-grid {
+  @apply grid gap-3 px-2 py-3 transition-all duration-300 overflow-hidden;
+  grid-template-columns: repeat(2, 1fr);
+  max-height: 280px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &.grid-expanded {
+    @apply max-h-none;
+  }
+}
+
+.donation-card {
+  @apply relative rounded-lg p-3 min-w-0 w-full transition-all duration-500 shadow-md backdrop-blur-md;
+  @apply bg-gradient-to-br from-white/[0.03] to-white/[0.08] border border-white/[0.08];
+  @apply hover:shadow-lg;
+
+  .card-content {
+    @apply relative z-10 flex items-start gap-3;
+  }
+
+  .donor-avatar {
+    @apply relative flex-shrink-0 w-10 h-9 transition-transform duration-300;
+
+    .avatar-img {
+      @apply border border-white/20 dark:border-gray-800/50 shadow-sm;
+      @apply w-10 h-9;
+    }
+  }
+
+  .donor-badge {
+    @apply absolute -bottom-2 -right-1 px-1.5 py-0.5 text-xs font-medium text-white/90 rounded-full whitespace-nowrap;
+    @apply bg-gradient-to-r from-pink-400 to-pink-500 shadow-sm opacity-90 scale-90;
+    @apply transition-all duration-300;
+  }
+
+  .donor-info {
+    @apply flex-1 min-w-0;
+
+    .donor-name {
+      @apply text-sm font-medium mb-0.5 truncate;
+    }
+
+    .donation-meta {
+      @apply flex items-center gap-2 mb-1;
+
+      .donation-date {
+        @apply text-xs text-gray-400/80 dark:text-gray-500/80;
+      }
+    }
+  }
+
+  .donation-message {
+    @apply text-sm text-gray-600 dark:text-gray-300 leading-relaxed mt-3 w-full;
+
+    .message-content {
+      @apply relative p-2 rounded-lg transition-all duration-300 cursor-pointer;
+      @apply bg-white/[0.02] hover:bg-[var(--n-color)];
+
+      .message-text {
+        @apply px-6 italic line-clamp-2;
+      }
+
+      .quote-icon {
+        @apply absolute text-gray-400/60 dark:text-gray-500/60 text-sm;
+
+        &:first-child {
+          @apply left-0.5 top-2;
+        }
+
+        &:last-child {
+          @apply right-0.5 bottom-2;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    .donor-avatar {
+      @apply scale-105 rotate-3;
+    }
+
+    .donor-badge {
+      @apply scale-95 -translate-y-0.5;
+    }
+
+    .card-sparkles {
+      @apply opacity-60 scale-110;
+    }
+  }
+}
+
+.card-sparkles {
+  @apply absolute inset-0 pointer-events-none opacity-0 transition-all duration-500;
+  background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2.5px 2.5px at 50px 160px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.95), transparent),
+    radial-gradient(2.5px 2.5px at 130px 80px, rgba(255, 255, 255, 0.95), transparent);
+  background-size: 200% 200%;
+  animation: sparkle 8s ease infinite;
+}
+
+@keyframes sparkle {
+  0%,
+  100% {
+    @apply bg-[0%_0%] opacity-40 scale-100;
+  }
+  50% {
+    @apply bg-[100%_100%] opacity-80 scale-110;
+  }
+}
+
+.refresh-container {
+  @apply flex justify-end px-2 py-2;
+}
+
+.expand-button {
+  @apply flex justify-center items-center py-2;
+
+  :deep(.n-button) {
+    @apply transition-all duration-300 hover:-translate-y-0.5;
+  }
+}
+
+.message-popup {
+  @apply relative px-4 py-2 text-sm;
+  max-width: 300px;
+  line-height: 1.6;
+  font-style: italic;
+
+  .quote-icon {
+    @apply text-gray-400/60 dark:text-gray-500/60;
+    font-size: 0.9rem;
+  }
+}
+</style>
--- a/src/renderer/components/common/DownloadDrawer.vue
+++ b/src/renderer/components/common/DownloadDrawer.vue
@@ -0,0 +1,610 @@
+<template>
+  <div class="download-drawer-trigger">
+    <n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0">
+      <n-button circle @click="settingsStore.showDownloadDrawer = true">
+        <template #icon>
+          <i class="iconfont ri-download-cloud-2-line"></i>
+        </template>
+      </n-button>
+    </n-badge>
+  </div>
+
+  <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="t('download.tabs.downloading')" class="h-full">
+            <div class="download-list">
+              <div v-if="downloadList.length === 0" class="empty-tip">
+                <n-empty :description="t('download.empty.noTasks')" />
+              </div>
+              <template v-else>
+                <div class="total-progress">
+                  <div class="total-progress-text">
+                    {{ t('download.progress.total', { progress: totalProgress.toFixed(1) }) }}
+                  </div>
+                  <n-progress
+                    type="line"
+                    :percentage="Number(totalProgress.toFixed(1))"
+                    :height="12"
+                    :border-radius="6"
+                    :indicator-placement="'inside'"
+                  />
+                </div>
+                <div class="download-content">
+                  <div class="download-items">
+                    <div v-for="item in downloadList" :key="item.path" class="download-item">
+                      <div class="download-item-content">
+                        <div class="download-item-cover">
+                          <n-image
+                            :src="getImgUrl(item.songInfo?.picUrl, '200y200')"
+                            preview-disabled
+                            :object-fit="'cover'"
+                            class="cover-image"
+                          />
+                        </div>
+                        <div class="download-item-info">
+                          <div class="download-item-name" :title="item.filename">
+                            {{ item.filename }}
+                          </div>
+                          <div class="download-item-artist">
+                            {{
+                              item.songInfo?.ar?.map((a) => a.name).join(', ') ||
+                              t('download.artist.unknown')
+                            }}
+                          </div>
+                          <div class="download-item-progress">
+                            <n-progress
+                              type="line"
+                              :percentage="item.progress"
+                              :processing="item.status === 'downloading'"
+                              :status="getProgressStatus(item)"
+                              :height="8"
+                            />
+                          </div>
+                          <div class="download-item-size">
+                            <span
+                              >{{ formatSize(item.loaded) }} / {{ formatSize(item.total) }}</span
+                            >
+                          </div>
+                        </div>
+                        <div class="download-item-status">
+                          <n-tag :type="getStatusType(item)" size="small">
+                            {{ getStatusText(item) }}
+                          </n-tag>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </n-tab-pane>
+
+          <!-- 已下载列表 -->
+          <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="t('download.empty.noDownloaded')" />
+              </div>
+              <div v-else class="downloaded-content">
+                <div class="downloaded-items">
+                  <div v-for="item in downList" :key="item.path" class="downloaded-item">
+                    <div class="downloaded-item-content">
+                      <div class="downloaded-item-cover">
+                        <n-image
+                          :src="getImgUrl(item.picUrl, '200y200')"
+                          preview-disabled
+                          :object-fit="'cover'"
+                          class="cover-image"
+                        />
+                      </div>
+                      <div class="downloaded-item-info">
+                        <div class="downloaded-item-name" :title="item.filename">
+                          {{ item.filename }}
+                        </div>
+                        <div class="downloaded-item-artist">
+                          {{ item.ar?.map((a) => a.name).join(', ') }}
+                        </div>
+                        <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)">
+                          <template #icon>
+                            <i class="iconfont ri-play-circle-line text-xl"></i>
+                          </template>
+                        </n-button> -->
+                        <n-button
+                          text
+                          type="primary"
+                          size="large"
+                          @click="openDirectory(item.path)"
+                        >
+                          <template #icon>
+                            <i class="iconfont ri-folder-open-line text-xl"></i>
+                          </template>
+                        </n-button>
+                        <n-button text type="error" size="large" @click="handleDelete(item)">
+                          <template #icon>
+                            <i class="iconfont ri-delete-bin-line text-xl"></i>
+                          </template>
+                        </n-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </n-tab-pane>
+        </n-tabs>
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+
+  <!-- 删除确认对话框 -->
+  <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>{{ t('download.delete.title') }}</span>
+      </div>
+    </template>
+    <div class="delete-confirm-content">
+      {{ t('download.delete.message', { filename: itemToDelete?.filename }) }}
+    </div>
+    <template #action>
+      <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>
+
+<script setup lang="ts">
+import type { ProgressStatus } from 'naive-ui';
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getMusicDetail } from '@/api/music';
+// 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;
+  progress: number;
+  loaded: number;
+  total: number;
+  path: string;
+  status: 'downloading' | 'completed' | 'error';
+  error?: string;
+  songInfo?: any;
+}
+
+interface DownloadedItem {
+  filename: string;
+  path: string;
+  size: number;
+  id: number;
+  picUrl: string;
+  ar: { name: string }[];
+}
+
+const message = useMessage();
+// const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
+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(() => {
+  return downloadList.value.filter((item) => item.status === 'downloading').length;
+});
+
+// 计算总进度
+const totalProgress = computed(() => {
+  if (downloadList.value.length === 0) return 0;
+  const total = downloadList.value.reduce((sum, item) => sum + item.progress, 0);
+  return total / downloadList.value.length;
+});
+
+watch(totalProgress, (newVal) => {
+  if (newVal === 100) {
+    refreshDownloadedList();
+  }
+});
+
+// 获取状态类型
+const getStatusType = (item: DownloadItem) => {
+  switch (item.status) {
+    case 'downloading':
+      return 'info';
+    case 'completed':
+      return 'success';
+    case 'error':
+      return 'error';
+    default:
+      return 'default';
+  }
+};
+
+// 获取状态文本
+const getStatusText = (item: DownloadItem) => {
+  switch (item.status) {
+    case 'downloading':
+      return t('download.status.downloading');
+    case 'completed':
+      return t('download.status.completed');
+    case 'error':
+      return t('download.status.failed');
+    default:
+      return t('download.status.unknown');
+  }
+};
+
+// 获取进度条状态
+const getProgressStatus = (item: DownloadItem): ProgressStatus => {
+  switch (item.status) {
+    case 'completed':
+      return 'success';
+    case 'error':
+      return 'error';
+    default:
+      return 'info';
+  }
+};
+
+// 格式化文件大小
+const formatSize = (bytes: number) => {
+  if (!bytes) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+};
+
+// 打开目录
+const openDirectory = (path: string) => {
+  window.electron.ipcRenderer.send('open-directory', path);
+};
+
+// 删除相关
+const showDeleteConfirm = ref(false);
+const itemToDelete = ref<DownloadedItem | null>(null);
+
+// 处理删除点击
+const handleDelete = (item: DownloadedItem) => {
+  itemToDelete.value = item;
+  showDeleteConfirm.value = true;
+};
+
+// 确认删除
+const confirmDelete = async () => {
+  if (!itemToDelete.value) return;
+
+  try {
+    const success = await window.electron.ipcRenderer.invoke(
+      'delete-downloaded-music',
+      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(t('download.delete.success'));
+    } else {
+      message.error(t('download.delete.failed'));
+    }
+  } catch (error) {
+    console.error('Failed to delete music:', error);
+    message.error(t('download.delete.failed'));
+  } finally {
+    showDeleteConfirm.value = false;
+    itemToDelete.value = null;
+  }
+};
+
+// 播放音乐
+// 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) {
+      saveList = [];
+      return;
+    }
+
+    const songIds = list.filter((item) => item.id).map((item) => item.id);
+
+    // 如果有歌曲ID，获取详细信息
+    if (songIds.length > 0) {
+      try {
+        const detailRes = await getMusicDetail(songIds);
+        const songDetails = detailRes.data.songs.reduce((acc, song) => {
+          acc[song.id] = song;
+          return acc;
+        }, {});
+
+        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: t('download.localMusic') }]
+          };
+        });
+      } catch (detailError) {
+        console.error('Failed to get music details:', detailError);
+        saveList = list;
+      }
+    } else {
+      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,
+  (newVal) => {
+    if (newVal) {
+      refreshDownloadedList();
+    }
+  }
+);
+
+// 监听下载进度
+onMounted(() => {
+  refreshDownloadedList();
+
+  // 监听下载进度
+  window.electron.ipcRenderer.on('music-download-progress', (_, data) => {
+    const existingItem = downloadList.value.find((item) => item.filename === data.filename);
+    if (existingItem) {
+      Object.assign(existingItem, {
+        ...data,
+        songInfo: data.songInfo || existingItem.songInfo
+      });
+
+      // 如果下载完成，从列表中移除
+      if (data.status === 'completed') {
+        downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
+      }
+    } else {
+      downloadList.value.push({
+        ...data,
+        songInfo: data.songInfo
+      });
+    }
+  });
+
+  // 监听下载完成
+  window.electron.ipcRenderer.on('music-download-complete', (_, data) => {
+    if (data.success) {
+      // 从下载列表中移除
+      downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
+      // 刷新已下载列表
+      refreshDownloadedList();
+      message.success(t('download.message.downloadComplete', { filename: data.filename }));
+    } else {
+      const existingItem = downloadList.value.find((item) => item.filename === data.filename);
+      if (existingItem) {
+        Object.assign(existingItem, {
+          status: 'error',
+          error: data.error,
+          progress: 0
+        });
+        setTimeout(() => {
+          downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
+        }, 3000);
+      }
+      message.error(
+        t('download.message.downloadFailed', { filename: data.filename, error: data.error })
+      );
+    }
+  });
+
+  // 监听下载队列
+  window.electron.ipcRenderer.on('music-download-queued', (_, data) => {
+    const existingItem = downloadList.value.find((item) => item.filename === data.filename);
+    if (!existingItem) {
+      downloadList.value.push({
+        filename: data.filename,
+        progress: 0,
+        loaded: 0,
+        total: 0,
+        path: '',
+        status: 'downloading',
+        songInfo: data.songInfo
+      });
+    }
+  });
+});
+
+const handleDrawerClose = () => {
+  settingsStore.showDownloadDrawer = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.download-drawer-trigger {
+  @apply fixed left-6 bottom-24 z-[999];
+
+  .n-button {
+    @apply bg-white/80 dark:bg-gray-800/80 shadow-lg backdrop-blur-sm;
+    @apply hover:bg-light dark:hover:bg-dark-200;
+    @apply text-gray-600 dark:text-gray-300;
+    @apply transition-all duration-300;
+    @apply w-10 h-10;
+
+    .iconfont {
+      @apply text-xl;
+    }
+  }
+}
+
+.drawer-container {
+  @apply h-full;
+}
+
+.download-list,
+.downloaded-list {
+  @apply flex flex-col h-full;
+
+  .empty-tip {
+    @apply flex-1 flex items-center justify-center;
+    @apply text-gray-400 dark:text-gray-600;
+  }
+}
+
+.download-content,
+.downloaded-content {
+  @apply flex-1 overflow-hidden pb-40;
+}
+
+.download-items,
+.downloaded-items {
+  @apply space-y-3;
+}
+
+.total-progress {
+  @apply px-4 py-3 bg-light-100 dark:bg-dark-200 backdrop-blur-sm;
+  @apply border-b border-gray-100 dark:border-gray-800;
+  @apply sticky top-0 z-10;
+
+  &-text {
+    @apply mb-2 text-sm font-medium text-gray-600 dark:text-gray-400;
+  }
+}
+
+.download-item,
+.downloaded-item {
+  @apply p-3 rounded-lg;
+  @apply bg-light-100 dark:bg-dark-200 backdrop-blur-sm;
+  @apply border border-gray-100 dark:border-gray-700;
+  @apply transition-all duration-300;
+  @apply hover:bg-light-300 dark:hover:bg-dark-300;
+  @apply hover:shadow-md;
+
+  &-content {
+    @apply flex items-center gap-3;
+  }
+
+  &-cover {
+    @apply w-10 h-10 flex-shrink-0 rounded-lg overflow-hidden;
+    @apply shadow-md;
+
+    .cover-image {
+      @apply w-full h-full object-cover;
+    }
+  }
+
+  &-info {
+    @apply flex-1 min-w-0;
+  }
+
+  &-name {
+    @apply text-sm font-medium truncate;
+    @apply text-gray-900 dark:text-gray-100;
+  }
+
+  &-artist {
+    @apply text-xs text-gray-500 dark:text-gray-400 truncate;
+  }
+
+  &-progress {
+    @apply mt-1;
+  }
+
+  &-size {
+    @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
+  }
+
+  &-status {
+    @apply flex-shrink-0;
+  }
+}
+
+.downloaded-item {
+  &-actions {
+    @apply flex items-center gap-1;
+
+    .n-button {
+      @apply p-2;
+      @apply hover:bg-gray-200/80 dark:hover:bg-gray-600/80;
+      @apply rounded-lg;
+      @apply transition-colors duration-300;
+
+      .iconfont {
+        @apply text-xl;
+      }
+    }
+  }
+}
+
+.delete-confirm-content {
+  @apply py-6 px-4;
+  @apply text-base text-gray-600 dark:text-gray-400;
+}
+</style>
--- a/src/renderer/components/common/InstallAppModal.vue
+++ b/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,13 +43,18 @@

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

 import { isElectron, isMobile } from '@/utils';
+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);

 const closeModal = () => {
  showModal.value = false;
@@ -54,7 +63,9 @@ const closeModal = () => {
  }
 };

-onMounted(() => {
+const proxyHosts = ref<string[]>([]);
+
+onMounted(async () => {
  // 如果是 electron 环境，不显示安装提示
  if (isElectron || isMobile.value) {
    return;
@@ -65,33 +76,58 @@ onMounted(() => {
  if (isDismissed) {
    return;
  }
+
+  // 获取最新版本信息
+  releaseInfo.value = await getLatestReleaseInfo();
  showModal.value = true;
+  proxyHosts.value = await getProxyNodes();
 });

 const handleInstall = async (): Promise<void> => {
+  const assets = releaseInfo.value?.assets || [];
  const { userAgent } = navigator;
-  console.log('userAgent', userAgent);
-  const isMac: boolean = userAgent.includes('Mac');
-  const isWindows: boolean = userAgent.includes('Win');
-  const isARM: boolean =
-    userAgent.includes('ARM') || userAgent.includes('arm') || userAgent.includes('OS X');
-  const isX64: boolean =
+  const isMac = userAgent.toLowerCase().includes('mac');
+  const isWindows = userAgent.toLowerCase().includes('win');
+  const isLinux = userAgent.toLowerCase().includes('linux');
+  const isX64 =
    userAgent.includes('x86_64') || userAgent.includes('Win64') || userAgent.includes('WOW64');
-  const isX86: boolean =
-    !isX64 &&
-    (userAgent.includes('i686') || userAgent.includes('i386') || userAgent.includes('Win32'));

-  const getDownloadUrl = (os: string, arch: string): string => {
-    const version = config.version as string;
-    const setup = os !== 'mac' ? 'Setup_' : '';
-    return `https://gh.llkk.cc/https://github.com/algerkong/AlgerMusicPlayer/releases/download/${version}/AlgerMusic_${version}_${setup}${arch}.${os === 'mac' ? 'dmg' : 'exe'}`;
-  };
-  const osType: string | null = isMac ? 'mac' : isWindows ? 'windows' : null;
-  const archType: string | null = isARM ? 'arm64' : isX64 ? 'x64' : isX86 ? 'x86' : null;
+  let downloadUrl = '';

-  const downloadUrl: string | null = osType && archType ? getDownloadUrl(osType, archType) : null;
+  // 根据平台和架构选择对应的安装包
+  if (isMac) {
+    // macOS
+    const macAsset = assets.find((asset) => asset.name.includes('mac'));
+    downloadUrl = macAsset?.browser_download_url || '';
+  } else if (isWindows) {
+    // Windows
+    let winAsset = assets.find(
+      (asset) =>
+        asset.name.includes('win') &&
+        (isX64 ? asset.name.includes('x64') : asset.name.includes('ia32'))
+    );
+    if (!winAsset) {
+      winAsset = assets.find((asset) => asset.name.includes('win.exe'));
+    }
+    downloadUrl = winAsset?.browser_download_url || '';
+  } else if (isLinux) {
+    // Linux
+    const linuxAsset = assets.find(
+      (asset) =>
+        (asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
+        asset.name.includes('x64')
+    );
+    downloadUrl = linuxAsset?.browser_download_url || '';
+  }

-  window.open(downloadUrl || 'https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
+  if (downloadUrl) {
+    const proxyDownloadUrl = `${proxyHosts.value[0]}/${downloadUrl}`;
+    window.open(proxyDownloadUrl, '_blank');
+  } else {
+    // 如果没有找到对应的安装包，跳转到 release 页面
+    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
+  }
+  closeModal();
 };
 </script>

--- a/src/renderer/components/common/MPop.vue
+++ b/src/renderer/components/common/MPop.vue
@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { setAnimationClass } from '@/utils';
-
-const props = defineProps({
-  showPop: {
-    type: Boolean,
-    default: false
-  },
-  showClose: {
-    type: Boolean,
-    default: true
-  }
-});
-
-const musicFullClass = computed(() => {
-  if (props.showPop) {
-    return setAnimationClass('animate__fadeInUp');
-  }
-  return setAnimationClass('animate__fadeOutDown');
-});
-</script>
-
-<template>
-  <div v-show="props.showPop" class="pop-page" :class="musicFullClass">
-    <i v-if="props.showClose" class="iconfont icon-icon_error close"></i>
-    <img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.pop-page {
-  height: 800px;
-  @apply absolute top-4 left-0 w-full;
-  background-color: #000000f0;
-  .close {
-    @apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
-  }
-}
-</style>
--- a/src/renderer/components/common/PlayBottom.vue
+++ b/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,
--- a/src/renderer/components/common/PlaylistDrawer.vue
+++ b/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>
--- a/src/renderer/components/common/SearchItem.vue
+++ b/src/renderer/components/common/SearchItem.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="search-item" :class="item.type" @click="handleClick">
+  <div class="search-item" :class="[shape, item.type]" @click="handleClick">
    <div class="search-item-img">
      <n-image
-        :src="getImgUrl(item.picUrl, item.type === 'mv' ? '320y180' : '100y100')"
+        class="w-full h-full"
+        :src="getImgUrl(item.picUrl, item.type === 'mv' ? '320y180' : '200y200')"
        lazy
        preview-disabled
      />
@@ -15,13 +16,19 @@
      <p class="search-item-artist">{{ item.desc }}</p>
    </div>

-    <MusicList
+    <div v-if="item.type === '专辑'" class="search-item-size">
+      <i class="ri-music-2-line"></i>
+      <span>{{ item.size }}</span>
+    </div>
+
+    <music-list
      v-if="['专辑', 'playlist'].includes(item.type)"
      v-model:show="showPop"
      :name="item.name"
      :song-list="songList"
      :list-info="listInfo"
      :cover="false"
+      :z-index="zIndex"
    />
    <mv-player
      v-if="item.type === 'mv'"
@@ -33,30 +40,39 @@
 </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';
+
 import MusicList from '../MusicList.vue';

-const props = defineProps<{
-  item: {
-    picUrl: string;
-    name: string;
-    desc: string;
-    type: string;
-    [key: string]: any;
-  };
-}>();
+const props = withDefaults(
+  defineProps<{
+    shape?: 'square' | 'rectangle';
+    zIndex?: number;
+    item: {
+      picUrl: string;
+      name: string;
+      desc: string;
+      type: string;
+      [key: string]: any;
+    };
+  }>(),
+  {
+    shape: 'rectangle'
+  }
+);

 const songList = ref<any[]>([]);

 const showPop = ref(false);
 const listInfo = ref<any>(null);

+const playerStore = usePlayerStore();
+
 const getCurrentMv = () => {
  return {
    id: props.item.id,
@@ -64,8 +80,6 @@ const getCurrentMv = () => {
  } as unknown as IMvItem;
 };

-const store = useStore();
-
 const handleClick = async () => {
  listInfo.value = null;
  if (props.item.type === '专辑') {
@@ -93,21 +107,59 @@ 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">
 .search-item {
-  @apply rounded-3xl p-3 flex items-center hover:bg-light-200 dark:hover:bg-gray-800 transition cursor-pointer;
-  margin: 0 10px;
-  .search-item-img {
-    @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
+  @apply rounded-lg p-0 flex items-center hover:bg-transparent transition cursor-pointer border-none;
+
+  &.square {
+    @apply flex-col relative;
+
+    .search-item-img {
+      @apply w-full aspect-square mb-2 mr-0 rounded-lg overflow-hidden hover:shadow-xl transition-all duration-300 shadow-sm shadow-black/20 dark:shadow-white/20;
+      img {
+        @apply object-cover w-full h-full transition-transform duration-500;
+      }
+    }
+
+    .search-item-info {
+      @apply w-full text-left px-0;
+
+      .search-item-name {
+        @apply truncate mb-1 font-medium text-base text-gray-800 dark:text-gray-200;
+      }
+
+      .search-item-artist {
+        @apply truncate text-sm text-gray-500 dark:text-gray-400;
+      }
+    }
+
+    .search-item-size {
+      @apply absolute top-2 right-2 text-xs text-white px-2 py-1 rounded-full bg-black/30 backdrop-blur-sm;
+      i {
+        @apply text-xs;
+      }
+    }
  }
+
+  &.rectangle {
+    @apply hover:bg-light-200 dark:hover:bg-dark-200 p-3;
+    .search-item-img {
+      @apply w-12 h-12 mr-4 rounded-lg overflow-hidden;
+    }
+  }
+
  .search-item-info {
    @apply flex-1 overflow-hidden;
    &-name {
@@ -119,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 {
@@ -137,4 +189,8 @@ const handleClick = async () => {
    }
  }
 }
+
+.search-item-size {
+  @apply flex items-center gap-2 text-gray-400;
+}
 </style>
--- a/src/renderer/components/common/SongItem.vue
+++ b/src/renderer/components/common/SongItem.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="song-item" :class="{ 'song-mini': mini, 'song-list': list }">
+  <div
+    class="song-item"
+    :class="{ 'song-mini': mini, 'song-list': list }"
+    @contextmenu.prevent="handleContextMenu"
+  >
+    <div v-if="selectable" class="song-item-select" @click.stop="toggleSelect">
+      <n-checkbox :checked="selected" />
+    </div>
    <n-image
      v-if="item.picUrl"
      ref="songImg"
@@ -18,10 +25,14 @@
        }}</n-ellipsis>
        <div class="song-item-content-divider">-</div>
        <n-ellipsis class="song-item-content-name text-ellipsis" line-clamp="1">
-          <span v-for="(artists, artistsindex) in item.ar || item.song.artists" :key="artistsindex"
-            >{{ artists.name
-            }}{{ artistsindex < (item.ar || item.song.artists).length - 1 ? ' / ' : '' }}</span
-          >
+          <template v-for="(artist, index) in artists" :key="index">
+            <span
+              class="cursor-pointer hover:text-green-500"
+              @click.stop="handleArtistClick(artist.id)"
+              >{{ artist.name }}</span
+            >
+            <span v-if="index < artists.length - 1"> / </span>
+          </template>
        </n-ellipsis>
      </div>
      <template v-else>
@@ -30,12 +41,14 @@
        </div>
        <div class="song-item-content-name">
          <n-ellipsis class="text-ellipsis" line-clamp="1">
-            <span
-              v-for="(artists, artistsindex) in item.ar || item.song.artists"
-              :key="artistsindex"
-              >{{ artists.name
-              }}{{ artistsindex < (item.ar || item.song.artists).length - 1 ? ' / ' : '' }}</span
-            >
+            <template v-for="(artist, index) in artists" :key="index">
+              <span
+                class="cursor-pointer hover:text-green-500"
+                @click.stop="handleArtistClick(artist.id)"
+                >{{ artist.name }}</span
+              >
+              <span v-if="index < artists.length - 1"> / </span>
+            </template>
          </n-ellipsis>
        </div>
      </template>
@@ -57,49 +70,277 @@
        <i v-else class="iconfont icon-playfill"></i>
      </div>
    </div>
+    <n-dropdown
+      v-if="isElectron"
+      :show="showDropdown"
+      :x="dropdownX"
+      :y="dropdownY"
+      :options="dropdownOptions"
+      :z-index="99999"
+      placement="bottom-start"
+      @clickoutside="showDropdown = false"
+      @select="handleSelect"
+    />
  </div>
 </template>

 <script lang="ts" setup>
-import { computed, useTemplateRef } from 'vue';
-import { useStore } from 'vuex';
+import { cloneDeep } from 'lodash';
+import type { MenuOption } from 'naive-ui';
+import { NImage, NText, useMessage } from 'naive-ui';
+import { computed, h, inject, ref, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';

+import { getSongUrl } from '@/hooks/MusicListHook';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
 import type { SongResult } from '@/type/music';
-import { getImgUrl } from '@/utils';
+import { getImgUrl, isElectron } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';

+const { t } = useI18n();
+
 const props = withDefaults(
  defineProps<{
    item: SongResult;
    mini?: boolean;
    list?: boolean;
    favorite?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    canRemove?: boolean;
  }>(),
  {
    mini: false,
    list: false,
-    favorite: true
+    favorite: true,
+    selectable: false,
+    selected: false,
+    canRemove: false
  }
 );

-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();

-const play = computed(() => store.state.play as boolean);
-
-const playMusic = computed(() => store.state.playMusic);
+const message = useMessage();

+const play = computed(() => playerStore.isPlay);
+const playMusic = computed(() => playerStore.playMusic);
 const playLoading = computed(
  () => playMusic.value.id === props.item.id && playMusic.value.playLoading
 );
-
-// 判断是否为正在播放的音乐
 const isPlaying = computed(() => {
  return playMusic.value.id === props.item.id;
 });

-const emits = defineEmits(['play']);
+const showDropdown = ref(false);
+const dropdownX = ref(0);
+const dropdownY = ref(0);

+const isDownloading = ref(false);
+
+const openPlaylistDrawer = inject<(songId: number) => void>('openPlaylistDrawer');
+
+const renderSongPreview = () => {
+  return h(
+    'div',
+    {
+      class: 'flex items-center gap-3 px-2 py-1 dark:border-gray-800'
+    },
+    [
+      h(NImage, {
+        src: getImgUrl(props.item.picUrl || props.item.al?.picUrl, '100y100'),
+        class: 'w-10 h-10 rounded-lg flex-shrink-0',
+        previewDisabled: true,
+        imgProps: {
+          crossorigin: 'anonymous'
+        }
+      }),
+      h(
+        'div',
+        {
+          class: 'flex-1 min-w-0 py-1'
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'mb-1'
+            },
+            [
+              h(
+                NText,
+                {
+                  depth: 1,
+                  class: 'text-sm font-medium'
+                },
+                {
+                  default: () => props.item.name
+                }
+              )
+            ]
+          )
+        ]
+      )
+    ]
+  );
+};
+
+const dropdownOptions = computed<MenuOption[]>(() => {
+  const options: MenuOption[] = [
+    {
+      key: 'header',
+      type: 'render',
+      render: renderSongPreview
+    },
+    {
+      key: 'divider1',
+      type: 'divider'
+    },
+    {
+      label: t('songItem.menu.play'),
+      key: 'play',
+      icon: () => h('i', { class: 'iconfont ri-play-circle-line' })
+    },
+    {
+      label: t('songItem.menu.playNext'),
+      key: 'playNext',
+      icon: () => h('i', { class: 'iconfont ri-play-list-2-line' })
+    },
+    {
+      type: 'divider',
+      key: 'd1'
+    },
+    {
+      label: t('songItem.menu.download'),
+      key: 'download',
+      icon: () => h('i', { class: 'iconfont ri-download-line' })
+    },
+    {
+      label: t('songItem.menu.addToPlaylist'),
+      key: 'addToPlaylist',
+      icon: () => h('i', { class: 'iconfont ri-folder-add-line' })
+    },
+    {
+      label: isFavorite.value ? t('songItem.menu.unfavorite') : t('songItem.menu.favorite'),
+      key: 'favorite',
+      icon: () =>
+        h('i', {
+          class: `iconfont ${isFavorite.value ? 'ri-heart-fill text-red-500' : 'ri-heart-line'}`
+        })
+    }
+  ];
+
+  if (props.canRemove) {
+    options.push(
+      {
+        type: 'divider',
+        key: 'd2'
+      },
+      {
+        label: t('songItem.menu.removeFromPlaylist'),
+        key: 'remove',
+        icon: () => h('i', { class: 'iconfont ri-delete-bin-line' })
+      }
+    );
+  }
+
+  return options;
+});
+
+const handleContextMenu = (e: MouseEvent) => {
+  e.preventDefault();
+  showDropdown.value = true;
+  dropdownX.value = e.clientX;
+  dropdownY.value = e.clientY;
+};
+
+const handleSelect = (key: string | number) => {
+  showDropdown.value = false;
+  if (key === 'download') {
+    downloadMusic();
+  } else if (key === 'playNext') {
+    handlePlayNext();
+  } else if (key === 'addToPlaylist') {
+    openPlaylistDrawer?.(props.item.id);
+  } else if (key === 'favorite') {
+    toggleFavorite(new Event('click'));
+  } else if (key === 'play') {
+    playMusicEvent(props.item);
+  } else if (key === 'remove') {
+    emits('remove-song', props.item.id);
+  }
+};
+
+// 下载音乐
+const downloadMusic = async () => {
+  if (isDownloading.value) {
+    message.warning(t('songItem.message.downloading'));
+    return;
+  }
+
+  try {
+    isDownloading.value = true;
+
+    const data = (await getSongUrl(props.item.id, cloneDeep(props.item), true)) as any;
+    if (!data || !data.url) {
+      throw new Error(t('songItem.message.getUrlFailed'));
+    }
+
+    // 构建文件名
+    const artistNames = (props.item.ar || props.item.song?.artists)?.map((a) => a.name).join(',');
+    const filename = `${props.item.name} - ${artistNames}`;
+
+    // 发送下载请求
+    window.electron.ipcRenderer.send('download-music', {
+      url: data.url,
+      type: data.type,
+      filename,
+      songInfo: {
+        ...cloneDeep(props.item),
+        downloadTime: Date.now()
+      }
+    });
+
+    message.success(t('songItem.message.downloadQueued'));
+
+    // 监听下载完成事件
+    const handleDownloadComplete = (_, result) => {
+      if (result.filename === filename) {
+        isDownloading.value = false;
+        removeListeners();
+      }
+    };
+
+    // 监听下载错误事件
+    const handleDownloadError = (_, result) => {
+      if (result.filename === filename) {
+        isDownloading.value = false;
+        removeListeners();
+      }
+    };
+
+    // 移除监听器函数
+    const removeListeners = () => {
+      window.electron.ipcRenderer.removeListener('music-download-complete', handleDownloadComplete);
+      window.electron.ipcRenderer.removeListener('music-download-error', handleDownloadError);
+    };
+
+    // 添加事件监听器
+    window.electron.ipcRenderer.once('music-download-complete', handleDownloadComplete);
+    window.electron.ipcRenderer.once('music-download-error', handleDownloadError);
+
+    // 30秒后自动清理监听器（以防下载过程中出现未知错误）
+    setTimeout(removeListeners, 30000);
+  } catch (error: any) {
+    console.error('Download error:', error);
+    isDownloading.value = false;
+    message.error(error.message || t('songItem.message.downloadFailed'));
+  }
+};
+
+const emits = defineEmits(['play', 'select', 'remove-song']);
 const songImageRef = useTemplateRef('songImg');

 const imageLoad = async () => {
@@ -117,33 +358,54 @@ 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);
+  await playerStore.setPlay(item);
+  playerStore.isPlay = true;
  emits('play', item);
 };

 // 判断是否已收藏
 const isFavorite = computed(() => {
-  return store.state.favoriteList.includes(props.item.id);
+  return playerStore.favoriteList.includes(props.item.id);
 });

 // 切换收藏状态
 const toggleFavorite = async (e: Event) => {
  e.stopPropagation();
  if (isFavorite.value) {
-    store.commit('removeFromFavorite', props.item.id);
+    playerStore.removeFromFavorite(props.item.id);
  } else {
-    store.commit('addToFavorite', props.item.id);
+    playerStore.addToFavorite(props.item.id);
  }
 };
+
+// 切换选择状态
+const toggleSelect = () => {
+  emits('select', props.item.id, !props.selected);
+};
+
+const handleArtistClick = (id: number) => {
+  settingsStore.setCurrentArtistId(id);
+  settingsStore.setShowArtistDrawer(true);
+};
+
+// 获取歌手列表（最多显示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>
@@ -191,11 +453,11 @@ const toggleFavorite = async (e: Event) => {
    }

    &-like {
-      @apply mr-2 cursor-pointer ml-4;
+      @apply mr-2 cursor-pointer ml-4 transition-all;
    }

    .like-active {
-      @apply text-red-500;
+      @apply text-red-500 dark:text-red-500;
    }

    &-play {
@@ -207,6 +469,18 @@ const toggleFavorite = async (e: Event) => {
        @apply bg-green-500 border-green-500 text-white;
      }
    }
+
+    &-download {
+      @apply mr-2 cursor-pointer;
+
+      .iconfont {
+        @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
+      }
+    }
+  }
+
+  &-select {
+    @apply mr-3 cursor-pointer;
  }
 }

@@ -301,4 +575,56 @@ const toggleFavorite = async (e: Event) => {
    }
  }
 }
+
+: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>
--- a/src/renderer/components/common/UpdateModal.vue
+++ b/src/renderer/components/common/UpdateModal.vue
@@ -3,7 +3,8 @@
    v-model:show="showModal"
    preset="dialog"
    :show-icon="false"
-    :mask-closable="true"
+    :mask-closable="!downloading"
+    :closable="!downloading"
    class="update-app-modal"
    style="width: 800px; max-width: 90vw"
  >
@@ -13,9 +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>
-          <n-checkbox v-model:checked="noPrompt">不再提示</n-checkbox>
+          <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">
@@ -23,20 +25,44 @@
          <div class="update-body" v-html="parsedReleaseNotes"></div>
        </n-scrollbar>
      </div>
-      <div class="modal-actions">
-        <n-button class="cancel-btn" @click="closeModal">暂不更新</n-button>
-        <n-button type="primary" class="update-btn" @click="handleUpdate">立即更新</n-button>
+      <div v-if="downloading" class="download-status mt-6">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-sm text-gray-500">{{ downloadStatus }}</span>
+          <span class="text-sm font-medium">{{ downloadProgress }}%</span>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" :style="{ width: `${downloadProgress}%` }"></div>
+        </div>
      </div>
-      <div class="modal-desc mt-4 text-center">
+      <div class="modal-actions" :class="{ 'mt-6': !downloading }">
+        <n-button
+          class="cancel-btn"
+          :disabled="downloading"
+          :loading="downloading"
+          @click="closeModal"
+        >
+          {{ t('comp.update.cancel') }}
+        </n-button>
+        <n-button
+          type="primary"
+          class="update-btn"
+          :loading="downloading"
+          :disabled="downloading"
+          @click="handleUpdate"
+        >
+          {{ downloadBtnText }}
+        </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>
@@ -44,19 +70,30 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
 import { marked } from 'marked';
-import { checkUpdate, UpdateResult } from '@/utils/update';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useSettingsStore } from '@/store/modules/settings';
+import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
+
 import config from '../../../../package.json';

+const { t } = useI18n();
+
 // 配置 marked
 marked.setOptions({
  breaks: true, // 支持 GitHub 风格的换行
  gfm: true // 启用 GitHub 风格的 Markdown
 });

-const showModal = ref(false);
-const noPrompt = ref(false);
+const settingsStore = useSettingsStore();
+
+const showModal = computed({
+  get: () => settingsStore.showUpdateModal,
+  set: (val) => settingsStore.setShowUpdateModal(val)
+});
+
 const updateInfo = ref<UpdateResult>({
  hasUpdate: false,
  latestVersion: '',
@@ -77,9 +114,6 @@ const parsedReleaseNotes = computed(() => {

 const closeModal = () => {
  showModal.value = false;
-  if (noPrompt.value) {
-    localStorage.setItem('updatePromptDismissed', 'true');
-  }
 };

 const checkForUpdates = async () => {
@@ -87,59 +121,117 @@ const checkForUpdates = async () => {
    const result = await checkUpdate(config.version);
    if (result) {
      updateInfo.value = result;
-      if (localStorage.getItem('updatePromptDismissed') !== 'true') {
-        showModal.value = true;
-      }
+      showModal.value = true;
    }
  } catch (error) {
    console.error('检查更新失败:', error);
  }
 };

+const downloading = ref(false);
+const downloadProgress = ref(0);
+const downloadStatus = ref(t('comp.update.prepareDownload'));
+const downloadBtnText = computed(() => {
+  if (downloading.value) return t('comp.update.downloading');
+  return t('comp.update.nowUpdate');
+});
+
+// 处理下载状态更新
+const handleDownloadProgress = (_event: any, progress: number, status: string) => {
+  downloadProgress.value = progress;
+  downloadStatus.value = status;
+};
+
+// 处理下载完成
+const handleDownloadComplete = (_event: any, success: boolean, filePath: string) => {
+  downloading.value = false;
+  if (success) {
+    window.electron.ipcRenderer.send('install-update', filePath);
+  } else {
+    window.$message.error(t('comp.update.downloadFailed'));
+  }
+};
+
+// 监听下载事件
+onMounted(() => {
+  checkForUpdates();
+  window.electron.ipcRenderer.on('download-progress', handleDownloadProgress);
+  window.electron.ipcRenderer.on('download-complete', handleDownloadComplete);
+});
+
+// 清理事件监听
+onUnmounted(() => {
+  window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
+  window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
+});
+
 const handleUpdate = async () => {
  const assets = updateInfo.value.releaseInfo?.assets || [];
-  const platform = window.electron.process.platform;
+  const { platform } = window.electron.process;
  const arch = window.electron.ipcRenderer.sendSync('get-arch');
-  console.log(arch);
-  console.log(platform);
+  const version = updateInfo.value.latestVersion;
+  const downUrls = {
+    win32: {
+      all: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win.exe`,
+      x64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win-x64.exe`,
+      ia32: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win-ia32.exe`
+    },
+    darwin: {
+      all: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}AlgerMusicPlayer-${version}-mac-universal.dmg`
+    },
+    linux: {
+      AppImage: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-linux-x64.AppImage`,
+      deb: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-linux-x64.deb`
+    }
+  };

  let downloadUrl = '';

  // 根据平台和架构选择对应的安装包
  if (platform === 'darwin') {
    // macOS
-    const macAsset = assets.find(asset => 
-      asset.name.includes('mac')
-    );
-    downloadUrl = macAsset?.browser_download_url || '';
+    const macAsset = assets.find((asset) => asset.name.includes('mac'));
+    downloadUrl = macAsset?.browser_download_url || downUrls.darwin.all || '';
  } else if (platform === 'win32') {
    // Windows
-    const winAsset = assets.find(asset => 
-      asset.name.includes('win') && 
-      (arch === 'x64' ? asset.name.includes('x64') : asset.name.includes('ia32'))
+    const winAsset = assets.find(
+      (asset) =>
+        asset.name.includes('win') &&
+        (arch === 'x64' ? asset.name.includes('x64') : asset.name.includes('ia32'))
    );
-    downloadUrl = winAsset?.browser_download_url || '';
+    downloadUrl =
+      winAsset?.browser_download_url || downUrls.win32[arch] || downUrls.win32.all || '';
  } else if (platform === 'linux') {
    // Linux
-    const linuxAsset = assets.find(asset => 
-      (asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) && 
-      asset.name.includes('x64')
+    const linuxAsset = assets.find(
+      (asset) =>
+        (asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
+        asset.name.includes('x64')
    );
-    downloadUrl = linuxAsset?.browser_download_url || '';
+    downloadUrl = linuxAsset?.browser_download_url || downUrls.linux[arch] || '';
  }

  if (downloadUrl) {
-    window.open(downloadUrl, '_blank');
+    try {
+      downloading.value = true;
+      downloadStatus.value = t('comp.update.prepareDownload');
+
+      // 获取代理节点列表
+      const proxyHosts = await getProxyNodes();
+      const proxyDownloadUrl = `${proxyHosts[0]}/${downloadUrl}`;
+
+      // 发送所有可能的下载地址到主进程
+      window.electron.ipcRenderer.send('start-download', proxyDownloadUrl);
+    } catch (error) {
+      downloading.value = false;
+      window.$message.error(t('comp.update.startFailed'));
+      console.error('下载失败:', error);
+    }
  } else {
-    // 如果没有找到对应的安装包，跳转到 release 页面
+    window.$message.error(t('comp.update.noDownloadUrl'));
    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
  }
-  closeModal();
 };
-
-onMounted(() => {
-  checkForUpdates();
-});
 </script>

 <style lang="scss" scoped>
@@ -174,7 +266,7 @@ onMounted(() => {
      }
      .update-body {
        @apply p-4 pt-2 text-gray-600 dark:text-gray-300 rounded-lg overflow-hidden;
-        
+
        :deep(h1) {
          @apply text-xl font-bold mb-3;
        }
@@ -216,7 +308,8 @@ onMounted(() => {
        }
        :deep(table) {
          @apply w-full mb-3;
-          th, td {
+          th,
+          td {
            @apply px-3 py-2 border border-gray-200 dark:border-gray-600;
          }
          th {
@@ -225,8 +318,18 @@ onMounted(() => {
        }
      }
    }
+    .download-status {
+      @apply p-2;
+      .progress-bar-wrapper {
+        @apply w-full h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden;
+        .progress-bar {
+          @apply h-full bg-green-500 rounded-full transition-all duration-300 ease-out;
+          box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
+        }
+      }
+    }
    .modal-actions {
-      @apply flex gap-4 mt-6;
+      @apply flex gap-4;
      .n-button {
        @apply flex-1 text-base py-2;
      }
@@ -235,14 +338,20 @@ onMounted(() => {
        &:hover {
          @apply bg-gray-700;
        }
+        &:disabled {
+          @apply opacity-50 cursor-not-allowed;
+        }
      }
      .update-btn {
        @apply bg-green-600 border-none;
        &:hover {
          @apply bg-green-500;
        }
+        &:disabled {
+          @apply opacity-50 cursor-not-allowed;
+        }
      }
    }
  }
 }
-</style> 
+</style>
--- a/src/renderer/components/home/PlaylistType.vue
+++ b/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>();
 // 是否显示全部歌单分类
--- a/src/renderer/components/home/RecommendAlbum.vue
+++ b/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
@@ -20,7 +22,7 @@
        </div>
      </template>
    </div>
-    <MusicList
+    <music-list
      v-model:show="showMusic"
      :name="albumName"
      :song-list="songList"
@@ -33,13 +35,15 @@

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

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

+const { t } = useI18n();
 const albumData = ref<IAlbumNew>();
 const loadAlbumList = async () => {
  const { data } = await getNewAlbum();
--- a/src/renderer/components/home/RecommendSonglist.vue
+++ b/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>

--- a/src/renderer/components/home/TopBanner.vue
+++ b/src/renderer/components/home/TopBanner.vue
@@ -0,0 +1,464 @@
+<template>
+  <div class="recommend-singer">
+    <div class="recommend-singer-list">
+      <n-carousel
+        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="handleOpenSinger(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="handleOpenSinger(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 { useSettingsStore, 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);
+
+/**
+ * 获取轮播项的样式
+ * @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 {
+    // 第一个请求：获取热门歌手
+    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
+
+    // 第二个请求：获取每日推荐
+    try {
+      const {
+        data: { data: dayRecommend }
+      } = await getDayRecommend();
+      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
+    } catch (error) {
+      console.error('error', error);
+    }
+
+    hotSingerData.value = singerData;
+    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);
+    }
+  } catch (error) {
+    console.error('error', error);
+  }
+};
+
+const settingsStore = useSettingsStore();
+
+const handleOpenSinger = (id: number) => {
+  settingsStore.setCurrentArtistId(id);
+  settingsStore.setShowArtistDrawer(true);
+};
+
+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>
--- a/src/renderer/components/lyric/LyricSettings.vue
+++ b/src/renderer/components/lyric/LyricSettings.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="settings-panel transparent-popover">
+    <div class="settings-title">{{ t('settings.lyricSettings.title') }}</div>
+    <div class="settings-content">
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.pureMode') }}</span>
+        <n-switch v-model:value="config.pureModeEnabled" />
+      </div>
+
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.hideCover') }}</span>
+        <n-switch v-model:value="config.hideCover" />
+      </div>
+
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.centerDisplay') }}</span>
+        <n-switch v-model:value="config.centerLyrics" />
+      </div>
+
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.showTranslation') }}</span>
+        <n-switch v-model:value="config.showTranslation" />
+      </div>
+
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.hidePlayBar') }}</span>
+        <n-switch v-model:value="config.hidePlayBar" />
+      </div>
+
+      <div class="settings-slider">
+        <span>{{ t('settings.lyricSettings.fontSize') }}</span>
+        <n-slider
+          v-model:value="config.fontSize"
+          :step="1"
+          :min="12"
+          :max="32"
+          :marks="{
+            12: t('settings.lyricSettings.fontSizeMarks.small'),
+            22: t('settings.lyricSettings.fontSizeMarks.medium'),
+            32: t('settings.lyricSettings.fontSizeMarks.large')
+          }"
+        />
+      </div>
+
+      <div class="settings-slider">
+        <span>{{ t('settings.lyricSettings.letterSpacing') }}</span>
+        <n-slider
+          v-model:value="config.letterSpacing"
+          :step="0.2"
+          :min="-2"
+          :max="10"
+          :marks="{
+            '-2': t('settings.lyricSettings.letterSpacingMarks.compact'),
+            0: t('settings.lyricSettings.letterSpacingMarks.default'),
+            10: t('settings.lyricSettings.letterSpacingMarks.loose')
+          }"
+        />
+      </div>
+
+      <div class="settings-slider">
+        <span>{{ t('settings.lyricSettings.lineHeight') }}</span>
+        <n-slider
+          v-model:value="config.lineHeight"
+          :step="0.1"
+          :min="1"
+          :max="3"
+          :marks="{
+            1: t('settings.lyricSettings.lineHeightMarks.compact'),
+            1.5: t('settings.lyricSettings.lineHeightMarks.default'),
+            3: t('settings.lyricSettings.lineHeightMarks.loose')
+          }"
+        />
+      </div>
+
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.backgroundTheme') }}</span>
+        <n-radio-group v-model:value="config.theme" name="theme">
+          <n-radio value="default">{{ t('settings.lyricSettings.themeOptions.default') }}</n-radio>
+          <n-radio value="light">{{ t('settings.lyricSettings.themeOptions.light') }}</n-radio>
+          <n-radio value="dark">{{ t('settings.lyricSettings.themeOptions.dark') }}</n-radio>
+        </n-radio-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+interface LyricConfig {
+  hideCover: boolean;
+  centerLyrics: boolean;
+  fontSize: number;
+  letterSpacing: number;
+  lineHeight: number;
+  showTranslation: boolean;
+  theme: 'default' | 'light' | 'dark';
+  hidePlayBar: boolean;
+  pureModeEnabled: boolean;
+}
+
+const config = ref<LyricConfig>({
+  hideCover: false,
+  centerLyrics: false,
+  fontSize: 22,
+  letterSpacing: 0,
+  lineHeight: 2,
+  showTranslation: true,
+  theme: 'default',
+  hidePlayBar: false,
+  pureModeEnabled: false
+});
+
+const emit = defineEmits(['themeChange']);
+
+// 监听配置变化并保存到本地存储
+watch(
+  () => config.value,
+  (newConfig) => {
+    updateCSSVariables(newConfig);
+  },
+  { deep: true }
+);
+
+// 监听主题变化
+watch(
+  () => config.value.theme,
+  (newTheme) => {
+    emit('themeChange', newTheme);
+  }
+);
+
+// 更新 CSS 变量
+const updateCSSVariables = (config: LyricConfig) => {
+  document.documentElement.style.setProperty('--lyric-font-size', `${config.fontSize}px`);
+  document.documentElement.style.setProperty('--lyric-letter-spacing', `${config.letterSpacing}px`);
+  document.documentElement.style.setProperty('--lyric-line-height', config.lineHeight.toString());
+};
+
+// 加载保存的配置
+onMounted(() => {
+  const savedConfig = localStorage.getItem('music-full-config');
+  if (savedConfig) {
+    config.value = { ...config.value, ...JSON.parse(savedConfig) };
+    updateCSSVariables(config.value);
+  }
+});
+
+defineExpose({
+  config
+});
+</script>
+
+<style scoped lang="scss">
+.settings-panel {
+  @apply p-4 w-72 rounded-lg relative overflow-hidden backdrop-blur-lg bg-black/10;
+  .settings-title {
+    @apply text-base font-bold mb-4;
+    color: var(--text-color-active);
+  }
+
+  .settings-content {
+    @apply space-y-4;
+  }
+
+  .settings-item {
+    @apply flex items-center justify-between;
+    span {
+      @apply text-sm;
+      color: var(--text-color-primary);
+    }
+  }
+
+  .settings-slider {
+    @apply space-y-2;
+    @apply mb-10 !important;
+    span {
+      @apply text-sm;
+      color: var(--text-color-primary);
+    }
+  }
+}
+
+// 修改 slider 字体颜色
+:deep(.n-slider-mark) {
+  color: var(--text-color-primary) !important;
+}
+// 修改 radio 字体颜色
+:deep(.n-radio__label) {
+  color: var(--text-color-active) !important;
+}
+</style>
--- a/src/renderer/components/settings/ShortcutSettings.vue
+++ b/src/renderer/components/settings/ShortcutSettings.vue
@@ -0,0 +1,385 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.shortcutSettings.title')"
+    :show-icon="false"
+    style="width: 600px"
+    @after-leave="handleAfterLeave"
+  >
+    <div class="shortcut-settings">
+      <div class="shortcut-card">
+        <div class="shortcut-content">
+          <n-scrollbar>
+            <n-space vertical>
+              <div v-for="(shortcut, key) in tempShortcuts" :key="key" class="shortcut-item">
+                <div class="shortcut-info">
+                  <span class="shortcut-label">{{ getShortcutLabel(key) }}</span>
+                </div>
+                <div class="shortcut-input">
+                  <n-input
+                    :value="formatShortcut(shortcut)"
+                    :status="duplicateKeys[key] ? 'error' : undefined"
+                    :placeholder="t('settings.shortcutSettings.inputPlaceholder')"
+                    readonly
+                    @keydown="(e) => handleKeyDown(e, key)"
+                    @focus="() => startRecording(key)"
+                    @blur="stopRecording"
+                  />
+                  <n-tooltip v-if="duplicateKeys[key]" trigger="hover">
+                    <template #trigger>
+                      <n-icon class="error-icon" size="18">
+                        <i class="ri-error-warning-line"></i>
+                      </n-icon>
+                    </template>
+                    {{ t('settings.shortcutSettings.shortcutConflict') }}
+                  </n-tooltip>
+                </div>
+              </div>
+            </n-space>
+          </n-scrollbar>
+        </div>
+
+        <div class="shortcut-footer">
+          <n-space justify="end">
+            <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>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+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;
+  nextPlay: string;
+  volumeUp: string;
+  volumeDown: string;
+  toggleFavorite: string;
+  toggleWindow: string;
+}
+
+const defaultShortcuts: Shortcuts = {
+  togglePlay: 'CommandOrControl+Alt+P',
+  prevPlay: 'Alt+Left',
+  nextPlay: 'Alt+Right',
+  volumeUp: 'Alt+Up',
+  volumeDown: 'Alt+Down',
+  toggleFavorite: 'CommandOrControl+Alt+L',
+  toggleWindow: 'CommandOrControl+Alt+Shift+M'
+};
+
+const shortcuts = ref<Shortcuts>(
+  isElectron
+    ? window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts') || defaultShortcuts
+    : { ...defaultShortcuts }
+);
+
+// 临时存储编辑中的快捷键
+const tempShortcuts = ref<Shortcuts>({ ...shortcuts.value });
+
+// 监听快捷键更新
+if (isElectron) {
+  window.electron.ipcRenderer.on('shortcuts-updated', () => {
+    const newShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
+    if (newShortcuts) {
+      shortcuts.value = newShortcuts;
+      tempShortcuts.value = { ...newShortcuts };
+    }
+  });
+}
+
+// 组件挂载时禁用快捷键
+onMounted(() => {
+  if (isElectron) {
+    // 禁用全局快捷键
+    window.electron.ipcRenderer.send('disable-shortcuts');
+
+    const storedShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
+    console.log('storedShortcuts', storedShortcuts);
+    if (storedShortcuts) {
+      shortcuts.value = storedShortcuts;
+      tempShortcuts.value = { ...storedShortcuts };
+    } else {
+      shortcuts.value = { ...defaultShortcuts };
+      tempShortcuts.value = { ...defaultShortcuts };
+      window.electron.ipcRenderer.send('set-store-value', 'shortcuts', defaultShortcuts);
+    }
+  }
+});
+
+const shortcutLabels: Record<keyof Shortcuts, string> = {
+  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];
+
+const isRecording = ref(false);
+const currentKey = ref<keyof Shortcuts | ''>('');
+const message = useMessage();
+
+// 检查快捷键冲突
+const duplicateKeys = computed(() => {
+  const result: Record<string, boolean> = {};
+  const usedShortcuts = new Set<string>();
+
+  Object.entries(tempShortcuts.value).forEach(([key, shortcut]) => {
+    if (usedShortcuts.has(shortcut)) {
+      result[key] = true;
+    } else {
+      usedShortcuts.add(shortcut);
+    }
+  });
+
+  return result;
+});
+
+// 是否存在冲突
+const hasConflict = computed(() => Object.keys(duplicateKeys.value).length > 0);
+
+const startRecording = (key: keyof Shortcuts) => {
+  isRecording.value = true;
+  currentKey.value = key;
+  // 禁用全局快捷键
+  if (isElectron) {
+    window.electron.ipcRenderer.send('disable-shortcuts');
+  }
+};
+
+const stopRecording = () => {
+  isRecording.value = false;
+  currentKey.value = '';
+  // 重新启用全局快捷键
+  if (isElectron) {
+    window.electron.ipcRenderer.send('enable-shortcuts');
+  }
+};
+
+const handleKeyDown = (e: KeyboardEvent, key: keyof Shortcuts) => {
+  if (!isRecording.value || currentKey.value !== key) return;
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  const modifiers: string[] = [];
+
+  // 统一使用 CommandOrControl
+  if (e.ctrlKey || e.metaKey) {
+    modifiers.push('CommandOrControl');
+  }
+  if (e.altKey) modifiers.push('Alt');
+  if (e.shiftKey) modifiers.push('Shift');
+
+  let keyName = e.key;
+
+  // 特殊按键处理
+  switch (e.key) {
+    case 'ArrowLeft':
+      keyName = 'Left';
+      break;
+    case 'ArrowRight':
+      keyName = 'Right';
+      break;
+    case 'ArrowUp':
+      keyName = 'Up';
+      break;
+    case 'ArrowDown':
+      keyName = 'Down';
+      break;
+    case 'Control':
+    case 'Alt':
+    case 'Shift':
+    case 'Meta':
+    case 'Command':
+      return; // 忽略单独的修饰键
+    default:
+      keyName = e.key.length === 1 ? e.key.toUpperCase() : e.key;
+  }
+
+  if (!['Control', 'Alt', 'Shift', 'Meta', 'Command'].includes(keyName)) {
+    tempShortcuts.value[key] = [...modifiers, keyName].join('+');
+  }
+};
+
+const resetShortcuts = () => {
+  tempShortcuts.value = { ...defaultShortcuts };
+  message.success(t('settings.shortcutSettings.messages.resetSuccess'));
+};
+
+const saveShortcuts = () => {
+  if (hasConflict.value) {
+    message.error(t('settings.shortcutSettings.messages.conflict'));
+    return;
+  }
+
+  // 创建一个新的 Shortcuts 对象
+  const shortcutsToSave = cloneDeep(tempShortcuts.value);
+
+  shortcuts.value = shortcutsToSave;
+
+  if (isElectron) {
+    try {
+      // 先保存到 store
+      window.electron.ipcRenderer.send('set-store-value', 'shortcuts', shortcutsToSave);
+      // 然后更新快捷键
+      window.electron.ipcRenderer.send('update-shortcuts');
+      message.success(t('settings.shortcutSettings.messages.saveSuccess'));
+    } catch (error) {
+      console.error('保存快捷键失败:', error);
+      message.error(t('settings.shortcutSettings.messages.saveError'));
+    }
+  }
+};
+
+const cancelEdit = () => {
+  tempShortcuts.value = { ...shortcuts.value };
+  message.info(t('settings.shortcutSettings.messages.cancelEdit'));
+  emit('update:show', false);
+};
+
+// 组件卸载时确保快捷键被重新启用
+onUnmounted(() => {
+  if (isElectron) {
+    window.electron.ipcRenderer.send('enable-shortcuts');
+  }
+});
+
+// 格式化快捷键显示
+const formatShortcut = (shortcut: string) => {
+  const isMac = isElectron
+    ? window.electron.ipcRenderer.sendSync('get-platform') === 'darwin'
+    : false;
+  return shortcut
+    .replace(/CommandOrControl/g, isMac ? '⌘' : 'Ctrl')
+    .replace(/\+/g, ' + ')
+    .replace(/Meta/g, isMac ? '⌘' : 'Win')
+    .replace(/Control/g, isMac ? '⌃' : 'Ctrl')
+    .replace(/Alt/g, isMac ? '⌥' : 'Alt')
+    .replace(/Shift/g, isMac ? '⇧' : 'Shift')
+    .replace(/ArrowUp/g, '↑')
+    .replace(/ArrowDown/g, '↓')
+    .replace(/ArrowLeft/g, '←')
+    .replace(/ArrowRight/g, '→');
+};
+
+const visible = ref(false);
+const emit = defineEmits(['update:show', 'change']);
+
+// 接收外部的 show 属性
+const props = defineProps<{
+  show?: boolean;
+}>();
+
+// 监听 show 属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 监听内部 visible 变化
+watch(visible, (newVal) => {
+  emit('update:show', newVal);
+});
+
+// 处理弹窗关闭后的事件
+const handleAfterLeave = () => {
+  // 重置临时数据
+  tempShortcuts.value = { ...shortcuts.value };
+};
+
+// 处理取消按钮点击
+const handleCancel = () => {
+  visible.value = false;
+  cancelEdit();
+};
+
+// 处理保存按钮点击
+const handleSave = () => {
+  saveShortcuts();
+  visible.value = false;
+  emit('change', shortcuts.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.shortcut-settings {
+  height: 500px;
+
+  .shortcut-card {
+    @apply flex flex-col h-full;
+
+    .shortcut-footer {
+      @apply p-4 border-t border-gray-100 dark:border-gray-800;
+    }
+
+    .shortcut-content {
+      @apply flex-1 overflow-hidden;
+
+      :deep(.n-scrollbar) {
+        @apply h-full;
+
+        .n-scrollbar-content {
+          @apply p-4;
+        }
+      }
+    }
+  }
+
+  .shortcut-item {
+    @apply flex items-center justify-between p-3 rounded-lg transition-all mb-3;
+    @apply bg-gray-50 dark:bg-gray-800;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .shortcut-info {
+      @apply flex flex-col;
+
+      .shortcut-label {
+        @apply text-base font-medium;
+      }
+    }
+
+    .shortcut-input {
+      @apply flex items-center gap-2;
+      min-width: 200px;
+
+      :deep(.n-input) {
+        .n-input__input-el {
+          @apply text-center font-mono;
+        }
+      }
+
+      .error-icon {
+        @apply text-red-500;
+      }
+    }
+  }
+}
+</style>
--- a/src/renderer/hooks/IndexDBHook.ts
+++ b/src/renderer/hooks/IndexDBHook.ts
@@ -1,24 +1,29 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref } from 'vue';

+// 定义表配置的泛型接口
+export interface StoreConfig<T extends string> {
+  name: T;
+  keyPath?: string;
+}
+
 // 创建一个使用 IndexedDB 的组合函数
-const useIndexedDB = () => {
-  const db = ref<IDBDatabase | null>(null); // 数据库引用
+const useIndexedDB = async <T extends string, S extends Record<T, Record<string, any>>>(
+  dbName: string,
+  stores: StoreConfig<T>[],
+  version: number = 1
+) => {
+  const db = ref<IDBDatabase | null>(null);

  // 打开数据库并创建表
-  const initDB = (
-    dbName: string,
-    version: number,
-    stores: { name: string; keyPath?: string }[]
-  ) => {
+  const initDB = () => {
    return new Promise<void>((resolve, reject) => {
-      const request = indexedDB.open(dbName, version); // 打开数据库请求
+      const request = indexedDB.open(dbName, version);

      request.onupgradeneeded = (event: any) => {
-        const db = event.target.result; // 获取数据库实例
+        const db = event.target.result;
        stores.forEach((store) => {
          if (!db.objectStoreNames.contains(store.name)) {
-            // 确保对象存储（表）创建
            db.createObjectStore(store.name, {
              keyPath: store.keyPath || 'id',
              autoIncrement: true
@@ -28,39 +33,41 @@ const useIndexedDB = () => {
      };

      request.onsuccess = (event: any) => {
-        db.value = event.target.result; // 保存数据库实例
-        resolve(); // 成功时解析 Promise
+        db.value = event.target.result;
+        resolve();
      };

      request.onerror = (event: any) => {
-        reject(event.target.error); // 失败时拒绝 Promise
+        reject(event.target.error);
      };
    });
  };

-  // 通用新增数据
-  const addData = (storeName: string, value: any) => {
-    return new Promise<void>((resolve, reject) => {
-      if (!db.value) return reject('数据库未初始化'); // 检查数据库是否已初始化
-      const tx = db.value.transaction(storeName, 'readwrite'); // 创建事务
-      const store = tx.objectStore(storeName); // 获取对象存储
+  await initDB();

-      const request = store.add(value); // 添加数据请求
+  // 通用新增数据
+  const addData = <K extends T>(storeName: K, value: S[K]) => {
+    return new Promise<void>((resolve, reject) => {
+      if (!db.value) return reject('数据库未初始化');
+      const tx = db.value.transaction(storeName, 'readwrite');
+      const store = tx.objectStore(storeName);
+
+      const request = store.add(value);

      request.onsuccess = () => {
-        console.log('成功'); // 成功时输出
-        resolve(); // 解析 Promise
+        console.log('成功');
+        resolve();
      };

      request.onerror = (event) => {
-        console.error('新增失败:', (event.target as IDBRequest).error); // 输出错误
-        reject((event.target as IDBRequest).error); // 拒绝 Promise
+        console.error('新增失败:', (event.target as IDBRequest).error);
+        reject((event.target as IDBRequest).error);
      };
    });
  };

  // 通用保存数据（新增或更新）
-  const saveData = (storeName: string, value: any) => {
+  const saveData = <K extends T>(storeName: K, value: S[K]) => {
    return new Promise<void>((resolve, reject) => {
      if (!db.value) return reject('数据库未初始化');
      const tx = db.value.transaction(storeName, 'readwrite');
@@ -79,8 +86,8 @@ const useIndexedDB = () => {
  };

  // 通用获取数据
-  const getData = (storeName: string, key: string | number) => {
-    return new Promise<any>((resolve, reject) => {
+  const getData = <K extends T>(storeName: K, key: string | number) => {
+    return new Promise<S[K]>((resolve, reject) => {
      if (!db.value) return reject('数据库未初始化');
      const tx = db.value.transaction(storeName, 'readonly');
      const store = tx.objectStore(storeName);
@@ -101,7 +108,7 @@ const useIndexedDB = () => {
  };

  // 删除数据
-  const deleteData = (storeName: string, key: string | number) => {
+  const deleteData = <K extends T>(storeName: K, key: string | number) => {
    return new Promise<void>((resolve, reject) => {
      if (!db.value) return reject('数据库未初始化');
      const tx = db.value.transaction(storeName, 'readwrite');
@@ -120,8 +127,8 @@ const useIndexedDB = () => {
  };

  // 查询所有数据
-  const getAllData = (storeName: string) => {
-    return new Promise<any[]>((resolve, reject) => {
+  const getAllData = <K extends T>(storeName: K) => {
+    return new Promise<S[K][]>((resolve, reject) => {
      if (!db.value) return reject('数据库未初始化');
      const tx = db.value.transaction(storeName, 'readonly');
      const store = tx.objectStore(storeName);
@@ -142,29 +149,29 @@ const useIndexedDB = () => {
  };

  // 分页查询数据
-  const getDataWithPagination = (storeName: string, page: number, pageSize: number) => {
-    return new Promise<any[]>((resolve, reject) => {
+  const getDataWithPagination = <K extends T>(storeName: K, page: number, pageSize: number) => {
+    return new Promise<S[K][]>((resolve, reject) => {
      if (!db.value) return reject('数据库未初始化');
      const tx = db.value.transaction(storeName, 'readonly');
      const store = tx.objectStore(storeName);
-      const request = store.openCursor(); // 打开游标请求
-      const results: any[] = []; // 存储结果的数组
-      let index = 0; // 当前索引
-      const skip = (page - 1) * pageSize; // 计算跳过的数量
+      const request = store.openCursor();
+      const results: S[K][] = [];
+      let index = 0;
+      const skip = (page - 1) * pageSize;

      request.onsuccess = (event: any) => {
-        const cursor = event.target.result; // 获取游标
+        const cursor = event.target.result;
        if (!cursor) {
-          resolve(results); // 如果没有更多数据，解析结果
+          resolve(results);
          return;
        }

        if (index >= skip && results.length < pageSize) {
-          results.push(cursor.value); // 添加当前游标值到结果
+          results.push(cursor.value);
        }

-        index++; // 增加索引
-        cursor.continue(); // 继续游标
+        index++;
+        cursor.continue();
      };

      request.onerror = (event: any) => {
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -1,13 +1,17 @@
-import { computed, ref } from 'vue';
+import { createDiscreteApi } from 'naive-ui';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';

+import i18n from '@/../i18n/renderer';
+import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
-import store from '@/store';
-import type { ILyricText, SongResult } from '@/type/music';
-import { getTextColors } from '@/utils/linearColor';
+import pinia, { usePlayerStore } from '@/store';
+import type { Artist, ILyricText, SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
+import { getTextColors } from '@/utils/linearColor';

 const windowData = window as any;

+const playerStore = usePlayerStore(pinia);
 export const lrcArray = ref<ILyricText[]>([]); // 歌词数组
 export const lrcTimeArray = ref<number[]>([]); // 歌词时间数组
 export const nowTime = ref(0); // 当前播放时间
@@ -15,10 +19,19 @@ export const allTime = ref(0); // 总播放时间
 export const nowIndex = ref(0); // 当前播放歌词
 export const correctionTime = ref(0.4); // 歌词矫正时间Correction time
 export const currentLrcProgress = ref(0); // 来存储当前歌词的进度
-export const playMusic = computed(() => store.state.playMusic as SongResult); // 当前播放歌曲
+export const playMusic = computed(() => playerStore.playMusic as SongResult); // 当前播放歌曲
 export const sound = ref<Howl | null>(audioService.getCurrentSound());
 export const isLyricWindowOpen = ref(false); // 新增状态
-export const textColors = ref(getTextColors());
+export const textColors = ref<any>(getTextColors());
+export const artistList = computed(
+  () => (playerStore.playMusic.ar || playerStore.playMusic?.song?.artists) as Artist[]
+);
+
+export const musicDB = await useIndexedDB('musicDB', [
+  { name: 'music', keyPath: 'id' },
+  { name: 'music_lyric', keyPath: 'id' },
+  { name: 'api_cache', keyPath: 'id' }
+]);

 document.onkeyup = (e) => {
  // 检查事件目标是否是输入框元素
@@ -29,11 +42,11 @@ document.onkeyup = (e) => {

  switch (e.code) {
    case 'Space':
-      if (store.state.play) {
-        store.commit('setPlayMusic', false);
+      if (playerStore.play) {
+        playerStore.setPlayMusic(false);
        audioService.getCurrentSound()?.pause();
      } else {
-        store.commit('setPlayMusic', true);
+        playerStore.setPlayMusic(true);
        audioService.getCurrentSound()?.play();
      }
      break;
@@ -41,26 +54,232 @@ document.onkeyup = (e) => {
  }
 };

+const { message } = createDiscreteApi(['message']);
+
+// 全局变量
+let progressAnimationInitialized = false;
+let globalAnimationFrameId: number | null = null;
+
+// 全局停止函数
+const stopProgressAnimation = () => {
+  if (globalAnimationFrameId) {
+    cancelAnimationFrame(globalAnimationFrameId);
+    globalAnimationFrameId = null;
+  }
+};
+
+// 全局更新函数
+const updateProgress = () => {
+  if (!playerStore.play) {
+    stopProgressAnimation();
+    return;
+  }
+
+  const currentSound = sound.value;
+  if (!currentSound) {
+    console.log('进度更新：无效的 sound 对象');
+    // 不是立即返回，而是设置定时器稍后再次尝试
+    globalAnimationFrameId = setTimeout(() => {
+      requestAnimationFrame(updateProgress);
+    }, 100) as unknown as number;
+    return;
+  }
+
+  if (typeof currentSound.seek !== 'function') {
+    console.log('进度更新：无效的 seek 函数');
+    // 不是立即返回，而是设置定时器稍后再次尝试
+    globalAnimationFrameId = setTimeout(() => {
+      requestAnimationFrame(updateProgress);
+    }, 100) as unknown as number;
+    return;
+  }
+
+  try {
+    const { start, end } = currentLrcTiming.value;
+    if (typeof start !== 'number' || typeof end !== 'number' || start === end) {
+      globalAnimationFrameId = requestAnimationFrame(updateProgress);
+      return;
+    }
+
+    let currentTime;
+    try {
+      currentTime = currentSound.seek() as number;
+
+      // 保存当前播放进度到 localStorage (每秒保存一次，避免频繁写入)
+      if (Math.floor(currentTime) % 2 === 0) {
+        if (playerStore.playMusic && playerStore.playMusic.id) {
+          localStorage.setItem(
+            'playProgress',
+            JSON.stringify({
+              songId: playerStore.playMusic.id,
+              progress: currentTime
+            })
+          );
+        }
+      }
+    } catch (seekError) {
+      console.error('调用 seek() 方法出错:', seekError);
+      globalAnimationFrameId = requestAnimationFrame(updateProgress);
+      return;
+    }
+
+    if (typeof currentTime !== 'number' || Number.isNaN(currentTime)) {
+      console.error('无效的当前时间:', currentTime);
+      globalAnimationFrameId = requestAnimationFrame(updateProgress);
+      return;
+    }
+
+    const elapsed = currentTime - start;
+    const duration = end - start;
+    const progress = (elapsed / duration) * 100;
+
+    // 确保进度在 0-100 之间
+    currentLrcProgress.value = Math.min(Math.max(progress, 0), 100);
+  } catch (error) {
+    console.error('更新进度出错:', error);
+  }
+
+  // 继续下一帧更新
+  globalAnimationFrameId = requestAnimationFrame(updateProgress);
+};
+
+// 全局启动函数
+const startProgressAnimation = () => {
+  stopProgressAnimation(); // 先停止之前的动画
+  updateProgress();
+};
+
+// 全局初始化函数
+const initProgressAnimation = () => {
+  if (progressAnimationInitialized) return;
+
+  console.log('初始化进度动画');
+  progressAnimationInitialized = true;
+
+  // 监听播放状态变化，这里使用防抖，避免频繁触发
+  let debounceTimer: any = null;
+
+  watch(
+    () => playerStore.play,
+    (newIsPlaying) => {
+      console.log('播放状态变化:', newIsPlaying);
+
+      // 清除之前的定时器
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+
+      // 使用防抖，延迟 100ms 再执行
+      debounceTimer = setTimeout(() => {
+        if (newIsPlaying) {
+          // 确保 sound 对象有效时才启动进度更新
+          if (sound.value) {
+            console.log('sound 对象已存在，立即启动进度更新');
+            startProgressAnimation();
+          } else {
+            console.log('等待 sound 对象初始化...');
+            // 定时检查 sound 对象是否已初始化
+            const checkInterval = setInterval(() => {
+              if (sound.value) {
+                clearInterval(checkInterval);
+                console.log('sound 对象已初始化，开始进度更新');
+                startProgressAnimation();
+              }
+            }, 100);
+            // 设置超时，防止无限等待
+            setTimeout(() => {
+              clearInterval(checkInterval);
+              console.log('等待 sound 对象超时，已停止等待');
+            }, 5000);
+          }
+        } else {
+          stopProgressAnimation();
+        }
+      }, 100);
+    }
+  );
+
+  // 监听当前歌词索引变化
+  watch(nowIndex, () => {
+    currentLrcProgress.value = 0;
+    if (playerStore.play) {
+      startProgressAnimation();
+    }
+  });
+
+  // 监听音频对象变化
+  watch(sound, (newSound) => {
+    console.log('sound 对象变化:', !!newSound);
+    if (newSound && playerStore.play) {
+      startProgressAnimation();
+    }
+  });
+};
+
+// 初始化进度动画
+initProgressAnimation();
+
+// 简化后的 watch 函数，只保留核心逻辑
 watch(
-  () => store.state.playMusicUrl,
-  (newVal) => {
-    if (newVal) {
-      audioService.play(newVal);
-      sound.value = audioService.getCurrentSound();
-      audioServiceOn(audioService);
+  () => playerStore.playMusicUrl,
+  async (newVal) => {
+    if (newVal && playMusic.value) {
+      try {
+        // 保存当前播放状态
+        const shouldPlay = playerStore.play;
+
+        // 检查是否有保存的进度
+        let initialPosition = 0;
+        const savedProgress = JSON.parse(localStorage.getItem('playProgress') || '{}');
+        if (savedProgress.songId === playMusic.value.id) {
+          initialPosition = savedProgress.progress;
+        }
+
+        // 播放新音频，传递是否应该播放的状态
+        const newSound = await audioService.play(newVal, playMusic.value, shouldPlay);
+        sound.value = newSound as Howl;
+
+        // 如果有保存的进度，设置播放位置
+        if (initialPosition > 0) {
+          newSound.seek(initialPosition);
+          // 同时更新进度条显示
+          nowTime.value = initialPosition;
+        }
+
+        setupAudioListeners();
+
+        // 确保状态与 localStorage 同步
+        localStorage.setItem('currentPlayMusic', JSON.stringify(playerStore.playMusic));
+        localStorage.setItem('currentPlayMusicUrl', newVal);
+      } catch (error) {
+        console.error('播放音频失败:', error);
+        // store.commit('setPlayMusic', false);
+        playerStore.setPlayMusic(false);
+        message.error(i18n.global.t('player.playFailed'));
+      }
    }
  }
 );

 watch(
-  () => store.state.playMusic,
+  () => playerStore.playMusic,
  () => {
    nextTick(async () => {
+      console.log('歌曲切换，更新歌词数据');
+      // 更新歌词数据
      lrcArray.value = playMusic.value.lyric?.lrcArray || [];
      lrcTimeArray.value = playMusic.value.lyric?.lrcTimeArray || [];
+
      // 当歌词数据更新时，如果歌词窗口打开，则发送数据
-      if (isElectron && isLyricWindowOpen.value && lrcArray.value.length > 0) {
+      if (isElectron && isLyricWindowOpen.value) {
+        console.log('歌词窗口已打开，同步最新歌词数据');
+        // 不管歌词数组是否为空，都发送最新数据
        sendLyricToWin();
+
+        // 再次延迟发送，确保歌词窗口已完全加载
+        setTimeout(() => {
+          sendLyricToWin();
+        }, 500);
      }
    });
  },
@@ -70,67 +289,159 @@ watch(
  }
 );

-export const audioServiceOn = (audio: typeof audioService) => {
+const setupAudioListeners = () => {
  let interval: any = null;

+  const clearInterval = () => {
+    if (interval) {
+      window.clearInterval(interval);
+      interval = null;
+    }
+  };
+
+  // 清理所有事件监听器
+  audioService.clearAllListeners();
+
+  // 立即更新一次时间和进度（解决初始化时进度条不显示问题）
+  const updateCurrentTimeAndDuration = () => {
+    const currentSound = audioService.getCurrentSound();
+    if (currentSound) {
+      try {
+        // 更新当前时间和总时长
+        const currentTime = currentSound.seek() as number;
+        if (typeof currentTime === 'number' && !Number.isNaN(currentTime)) {
+          nowTime.value = currentTime;
+          allTime.value = currentSound.duration() as number;
+        }
+      } catch (error) {
+        console.error('初始化时间和进度失败:', error);
+      }
+    }
+  };
+
+  // 立即执行一次更新
+  updateCurrentTimeAndDuration();
+
  // 监听播放
-  audio.onPlay(() => {
-    store.commit('setPlayMusic', true);
-    interval = setInterval(() => {
-      nowTime.value = sound.value?.seek() as number;
-      allTime.value = sound.value?.duration() as number;
-      const newIndex = getLrcIndex(nowTime.value);
-      if (newIndex !== nowIndex.value) {
-        nowIndex.value = newIndex;
-        currentLrcProgress.value = 0;
-        // 当歌词索引更新时，发送歌词数据
+  audioService.on('play', () => {
+    playerStore.setPlayMusic(true);
+    clearInterval();
+    interval = window.setInterval(() => {
+      try {
+        const currentSound = sound.value;
+        if (!currentSound) {
+          console.error('Invalid sound object: sound is null or undefined');
+          clearInterval();
+          return;
+        }
+
+        // 确保 seek 方法存在且可调用
+        if (typeof currentSound.seek !== 'function') {
+          console.error('Invalid sound object: seek function not available');
+          clearInterval();
+          return;
+        }
+
+        const currentTime = currentSound.seek() as number;
+        if (typeof currentTime !== 'number' || Number.isNaN(currentTime)) {
+          console.error('Invalid current time:', currentTime);
+          clearInterval();
+          return;
+        }
+
+        nowTime.value = currentTime;
+        allTime.value = currentSound.duration() as number;
+        const newIndex = getLrcIndex(nowTime.value);
+        if (newIndex !== nowIndex.value) {
+          nowIndex.value = newIndex;
+          // 注意：我们不在这里设置 currentLrcProgress 为 0
+          // 因为这会与全局进度更新冲突
+          if (isElectron && isLyricWindowOpen.value) {
+            sendLyricToWin();
+          }
+        }
        if (isElectron && isLyricWindowOpen.value) {
          sendLyricToWin();
        }
-      }
-      // 定期发送歌词数据更新
-      if (isElectron && isLyricWindowOpen.value) {
-        sendLyricToWin();
+      } catch (error) {
+        console.error('Error in interval:', error);
+        clearInterval();
      }
    }, 50);
  });

  // 监听暂停
-  audio.onPause(() => {
-    store.commit('setPlayMusic', false);
-    clearInterval(interval);
-    // 暂停时也发送一次状态更新
+  audioService.on('pause', () => {
+    console.log('音频暂停事件触发');
+    playerStore.setPlayMusic(false);
+    clearInterval();
    if (isElectron && isLyricWindowOpen.value) {
      sendLyricToWin();
    }
  });

-  // 监听结束
-  audio.onEnd(() => {
-    if (store.state.playMode === 1) {
-      // 单曲循环模式
-      audio.getCurrentSound()?.play();
-    } else if (store.state.playMode === 2) {
-      // 随机播放模式
-      const { playList } = store.state;
-      if (playList.length <= 1) {
-        // 如果播放列表只有一首歌或为空,则重新播放当前歌曲
-        audio.getCurrentSound()?.play();
+  const replayMusic = async () => {
+    try {
+      // 如果当前有音频实例，先停止并销毁
+      if (sound.value) {
+        sound.value.stop();
+        sound.value.unload();
+        sound.value = null;
+      }
+
+      // 重新播放当前歌曲
+      if (playerStore.playMusicUrl && playMusic.value) {
+        const newSound = await audioService.play(playerStore.playMusicUrl, playMusic.value);
+        sound.value = newSound as Howl;
+        setupAudioListeners();
+      } else {
+        console.error('No music URL or playMusic data available');
+        playerStore.nextPlay();
+      }
+    } catch (error) {
+      console.error('Error replaying song:', error);
+      playerStore.nextPlay();
+    }
+  };
+
+  // 监听结束
+  audioService.on('end', () => {
+    console.log('音频播放结束事件触发');
+    clearInterval();
+
+    if (playerStore.playMode === 1) {
+      // 单曲循环模式
+      if (sound.value) {
+        replayMusic();
+      }
+    } else if (playerStore.playMode === 2) {
+      // 随机播放模式
+
+      if (playerStore.playList.length <= 1) {
+        replayMusic();
      } else {
-        // 随机选择一首不同的歌
        let randomIndex;
        do {
-          randomIndex = Math.floor(Math.random() * playList.length);
-        } while (randomIndex === store.state.playListIndex && playList.length > 1);
-
-        store.state.playListIndex = randomIndex;
-        store.commit('setPlay', playList[randomIndex]);
+          randomIndex = Math.floor(Math.random() * playerStore.playList.length);
+        } while (randomIndex === playerStore.playListIndex && playerStore.playList.length > 1);
+        playerStore.playListIndex = randomIndex;
+        playerStore.setPlay(playerStore.playList[randomIndex]);
      }
    } else {
      // 列表循环模式
-      store.commit('nextPlay');
+      playerStore.nextPlay();
    }
  });
+
+  audioService.on('previoustrack', () => {
+    playerStore.prevPlay();
+  });
+
+  audioService.on('nexttrack', () => {
+    playerStore.nextPlay();
+  });
+
+  return clearInterval;
 };

 export const play = () => {
@@ -138,10 +449,27 @@ export const play = () => {
 };

 export const pause = () => {
-  audioService.getCurrentSound()?.pause();
-};
+  const currentSound = audioService.getCurrentSound();
+  if (currentSound) {
+    try {
+      // 保存当前播放进度
+      const currentTime = currentSound.seek() as number;
+      if (playerStore.playMusic && playerStore.playMusic.id) {
+        localStorage.setItem(
+          'playProgress',
+          JSON.stringify({
+            songId: playerStore.playMusic.id,
+            progress: currentTime
+          })
+        );
+      }

-const isPlaying = computed(() => store.state.play as boolean);
+      currentSound.pause();
+    } catch (error) {
+      console.error('暂停播放出错:', error);
+    }
+  }
+};

 // 增加矫正时间
 export const addCorrectionTime = (time: number) => (correctionTime.value += time);
@@ -192,54 +520,8 @@ export const getLrcStyle = (index: number) => {

 // 播放进度
 export const useLyricProgress = () => {
-  let animationFrameId: number | null = null;
-
-  const updateProgress = () => {
-    if (!isPlaying.value) return;
-    const currentSound = sound.value;
-    if (!currentSound) return;
-
-    const { start, end } = currentLrcTiming.value;
-    const duration = end - start;
-    const elapsed = (currentSound.seek() as number) - start;
-    currentLrcProgress.value = Math.min(Math.max((elapsed / duration) * 100, 0), 100);
-
-    animationFrameId = requestAnimationFrame(updateProgress);
-  };
-
-  const startProgressAnimation = () => {
-    if (!animationFrameId && isPlaying.value) {
-      updateProgress();
-    }
-  };
-
-  const stopProgressAnimation = () => {
-    if (animationFrameId) {
-      cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-  };
-
-  watch(isPlaying, (newIsPlaying) => {
-    if (newIsPlaying) {
-      startProgressAnimation();
-    } else {
-      stopProgressAnimation();
-    }
-  });
-
-  onMounted(() => {
-    if (isPlaying.value) {
-      startProgressAnimation();
-    }
-  });
-
-  onUnmounted(() => {
-    stopProgressAnimation();
-  });
-
+  // 如果已经在全局更新进度，立即返回
  return {
-    currentLrcProgress,
    getLrcStyle
  };
 };
@@ -281,75 +563,205 @@ watch(
 // 发送歌词更新数据
 export const sendLyricToWin = () => {
  if (!isElectron || !isLyricWindowOpen.value) {
-    console.log('Cannot send lyric: electron or lyric window not available');
+    return;
+  }
+
+  // 检查是否有播放的歌曲
+  if (!playMusic.value || !playMusic.value.id) {
    return;
  }

  try {
-    if (lrcArray.value.length > 0) {
+    // 记录歌词发送状态
+    if (lrcArray.value && lrcArray.value.length > 0) {
      const nowIndex = getLrcIndex(nowTime.value);
+      // 构建完整的歌词更新数据
      const updateData = {
        type: 'full',
        nowIndex,
        nowTime: nowTime.value,
-        startCurrentTime: lrcTimeArray.value[nowIndex],
-        nextTime: lrcTimeArray.value[nowIndex + 1],
-        isPlay: isPlaying.value,
+        startCurrentTime: lrcTimeArray.value[nowIndex] || 0,
+        nextTime: lrcTimeArray.value[nowIndex + 1] || 0,
+        isPlay: playerStore.play,
        lrcArray: lrcArray.value,
        lrcTimeArray: lrcTimeArray.value,
        allTime: allTime.value,
        playMusic: playMusic.value
      };
+
+      // 发送数据到歌词窗口
      window.api.sendLyric(JSON.stringify(updateData));
+    } else {
+      console.log('No lyric data available, sending empty lyric message');
+
+      // 发送没有歌词的提示
+      const emptyLyricData = {
+        type: 'empty',
+        nowIndex: 0,
+        nowTime: nowTime.value,
+        startCurrentTime: 0,
+        nextTime: 0,
+        isPlay: playerStore.play,
+        lrcArray: [{ text: '当前歌曲暂无歌词', trText: '' }],
+        lrcTimeArray: [0],
+        allTime: allTime.value,
+        playMusic: playMusic.value
+      };
+      window.api.sendLyric(JSON.stringify(emptyLyricData));
    }
  } catch (error) {
    console.error('Error sending lyric update:', error);
  }
 };

+// 歌词同步定时器
+let lyricSyncInterval: any = null;
+
+// 开始歌词同步
+const startLyricSync = () => {
+  // 清除已有的定时器
+  if (lyricSyncInterval) {
+    clearInterval(lyricSyncInterval);
+  }
+
+  // 每秒同步一次歌词数据
+  lyricSyncInterval = setInterval(() => {
+    if (isElectron && isLyricWindowOpen.value && playerStore.play && playMusic.value?.id) {
+      // 发送当前播放进度的更新
+      try {
+        const updateData = {
+          type: 'update',
+          nowIndex: getLrcIndex(nowTime.value),
+          nowTime: nowTime.value,
+          isPlay: playerStore.play
+        };
+        window.api.sendLyric(JSON.stringify(updateData));
+      } catch (error) {
+        console.error('发送歌词进度更新失败:', error);
+      }
+    }
+  }, 1000);
+};
+
+// 停止歌词同步
+const stopLyricSync = () => {
+  if (lyricSyncInterval) {
+    clearInterval(lyricSyncInterval);
+    lyricSyncInterval = null;
+  }
+};
+
+// 修改openLyric函数，添加定时同步
 export const openLyric = () => {
  if (!isElectron) return;
+
+  // 检查是否有播放中的歌曲
+  if (!playMusic.value || !playMusic.value.id) {
+    console.log('没有正在播放的歌曲，无法打开歌词窗口');
+    return;
+  }
+
  console.log('Opening lyric window with current song:', playMusic.value?.name);

  isLyricWindowOpen.value = !isLyricWindowOpen.value;
  if (isLyricWindowOpen.value) {
+    // 立即打开窗口
+    window.api.openLyric();
+
+    // 确保有歌词数据，如果没有，则使用默认的"无歌词"提示
+    if (!lrcArray.value || lrcArray.value.length === 0) {
+      // 如果当前播放的歌曲有ID但没有歌词，则尝试加载歌词
+      console.log('尝试加载歌词数据...');
+      // 发送默认的"无歌词"数据
+      const emptyLyricData = {
+        type: 'empty',
+        nowIndex: 0,
+        nowTime: nowTime.value,
+        startCurrentTime: 0,
+        nextTime: 0,
+        isPlay: playerStore.play,
+        lrcArray: [{ text: '加载歌词中...', trText: '' }],
+        lrcTimeArray: [0],
+        allTime: allTime.value,
+        playMusic: playMusic.value
+      };
+      window.api.sendLyric(JSON.stringify(emptyLyricData));
+    } else {
+      // 发送完整歌词数据
+      sendLyricToWin();
+    }
+
+    // 设置定时器，确保500ms后再次发送数据，以防窗口加载延迟
    setTimeout(() => {
-      window.api.openLyric();
      sendLyricToWin();
    }, 500);
-    sendLyricToWin();
+
+    // 启动歌词同步
+    startLyricSync();
  } else {
    closeLyric();
+    // 停止歌词同步
+    stopLyricSync();
  }
 };

-// 添加关闭歌词窗口的方法
+// 修改closeLyric函数，确保停止定时同步
 export const closeLyric = () => {
  if (!isElectron) return;
+  isLyricWindowOpen.value = false; // 确保状态更新
  windowData.electron.ipcRenderer.send('close-lyric');
+
+  // 停止歌词同步
+  stopLyricSync();
 };

+// 在组件挂载时设置对播放状态的监听
+watch(
+  () => playerStore.play,
+  (isPlaying) => {
+    // 如果歌词窗口打开，根据播放状态控制同步
+    if (isElectron && isLyricWindowOpen.value) {
+      if (isPlaying) {
+        startLyricSync();
+      } else {
+        // 如果暂停播放，发送一次暂停状态的更新
+        const pauseData = {
+          type: 'update',
+          isPlay: false
+        };
+        window.api.sendLyric(JSON.stringify(pauseData));
+      }
+    }
+  }
+);
+
+// 在组件卸载时清理资源
+onUnmounted(() => {
+  stopLyricSync();
+});
+
 // 添加播放控制命令监听
 if (isElectron) {
  windowData.electron.ipcRenderer.on('lyric-control-back', (_, command: string) => {
    switch (command) {
      case 'playpause':
-        if (store.state.play) {
-          store.commit('setPlayMusic', false);
+        if (playerStore.play) {
+          playerStore.setPlayMusic(false);
          audioService.getCurrentSound()?.pause();
        } else {
-          store.commit('setPlayMusic', true);
+          playerStore.setPlayMusic(true);
+
          audioService.getCurrentSound()?.play();
        }
        break;
      case 'prev':
-        store.commit('prevPlay');
+        playerStore.prevPlay();
        break;
      case 'next':
-        store.commit('nextPlay');
+        playerStore.nextPlay();
        break;
      case 'close':
-        closeLyric();
+        isLyricWindowOpen.value = false; // 确保状态更新
        break;
      default:
        console.log('Unknown command:', command);
@@ -357,3 +769,76 @@ if (isElectron) {
    }
  });
 }
+
+// 在组件挂载时设置监听器
+export const initAudioListeners = async () => {
+  try {
+    // 确保有正在播放的音乐
+    if (!playerStore.playMusic || !playerStore.playMusic.id) {
+      console.log('没有正在播放的音乐，跳过音频监听器初始化');
+      return;
+    }
+
+    // 确保有音频实例
+    const initialSound = audioService.getCurrentSound();
+    if (!initialSound) {
+      console.log('没有音频实例，等待音频加载...');
+      // 等待音频加载完成
+      await new Promise<void>((resolve) => {
+        const checkInterval = setInterval(() => {
+          const sound = audioService.getCurrentSound();
+          if (sound) {
+            clearInterval(checkInterval);
+            resolve();
+          }
+        }, 100);
+
+        // 设置超时
+        setTimeout(() => {
+          clearInterval(checkInterval);
+          console.log('等待音频加载超时');
+          resolve();
+        }, 5000);
+      });
+    }
+
+    // 初始化音频监听器
+    setupAudioListeners();
+
+    // 监听歌词窗口关闭事件
+    if (isElectron) {
+      window.api.onLyricWindowClosed(() => {
+        isLyricWindowOpen.value = false;
+      });
+    }
+
+    // 获取最新的音频实例
+    const finalSound = audioService.getCurrentSound();
+    if (finalSound) {
+      // 更新全局 sound 引用
+      sound.value = finalSound;
+
+      // 如果当前处于播放状态，启动进度更新
+      if (playerStore.play) {
+        // 如果有保存的播放进度，应用它
+        if (playerStore.savedPlayProgress !== undefined) {
+          try {
+            // 设置音频位置
+            finalSound.seek(playerStore.savedPlayProgress);
+            // 同时更新时间显示
+            nowTime.value = playerStore.savedPlayProgress;
+            console.log('恢复播放进度:', playerStore.savedPlayProgress);
+          } catch (e) {
+            console.error('恢复播放进度失败:', e);
+          }
+        }
+
+        startProgressAnimation();
+      }
+    } else {
+      console.warn('无法获取音频实例，跳过进度更新初始化');
+    }
+  } catch (error) {
+    console.error('初始化音频监听器失败:', error);
+  }
+};
--- a/src/renderer/hooks/MusicListHook.ts
+++ b/src/renderer/hooks/MusicListHook.ts
@@ -1,34 +1,43 @@
 import { Howl } from 'howler';
+import { cloneDeep } from 'lodash';
+import { ref } from 'vue';

 import { getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import { audioService } from '@/services/audioService';
 import type { ILyric, ILyricText, SongResult } from '@/type/music';
-import { getImgUrl, getMusicProxyUrl } from '@/utils';
+import { getImgUrl } from '@/utils';
 import { getImageLinearBackground } from '@/utils/linearColor';

 const musicHistory = useMusicHistory();

 // 获取歌曲url
-const getSongUrl = async (id: number) => {
-  const { data } = await getMusicUrl(id);
+export const getSongUrl = async (id: number, songData: any, isDownloaded: boolean = false) => {
+  const { data } = await getMusicUrl(id, isDownloaded);
  let url = '';
+  let songDetail = null;
  try {
    if (data.data[0].freeTrialInfo || !data.data[0].url) {
-      const res = await getParsingMusicUrl(id);
-      console.log('res', res);
+      const res = await getParsingMusicUrl(id, songData);
      url = res.data.data.url;
+      songDetail = res.data.data;
+    } else {
+      songDetail = data.data[0] as any;
    }
  } catch (error) {
    console.error('error', error);
  }
+  if (isDownloaded) {
+    return songDetail;
+  }
  url = url || data.data[0].url;
-  return getMusicProxyUrl(url);
+  return url;
 };

 const getSongDetail = async (playMusic: SongResult) => {
  playMusic.playLoading = true;
-  const playMusicUrl = await getSongUrl(playMusic.id);
+  const playMusicUrl =
+    playMusic.playMusicUrl || (await getSongUrl(playMusic.id, cloneDeep(playMusic)));
  const { backgroundColor, primaryColor } =
    playMusic.backgroundColor && playMusic.primaryColor
      ? playMusic
@@ -40,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);
@@ -55,43 +72,91 @@ export const useMusicListHook = () => {
    fetchSongs(state, playListIndex + 1, playListIndex + 6);
  };

+  const preloadingSounds = ref<Howl[]>([]);
+
  // 用于预加载下一首歌曲的 MP3 数据
  const preloadNextSong = (nextSongUrl: string) => {
-    const sound = new Howl({
-      src: [nextSongUrl],
-      html5: true,
-      preload: true,
-      autoplay: false
-    });
-    return sound;
+    try {
+      // 限制同时预加载的数量
+      if (preloadingSounds.value.length >= 2) {
+        const oldestSound = preloadingSounds.value.shift();
+        if (oldestSound) {
+          oldestSound.unload();
+        }
+      }
+
+      const sound = new Howl({
+        src: [nextSongUrl],
+        html5: true,
+        preload: true,
+        autoplay: false
+      });
+
+      preloadingSounds.value.push(sound);
+
+      // 添加加载错误处理
+      sound.on('loaderror', () => {
+        console.error('预加载音频失败:', nextSongUrl);
+        const index = preloadingSounds.value.indexOf(sound);
+        if (index > -1) {
+          preloadingSounds.value.splice(index, 1);
+        }
+        sound.unload();
+      });
+
+      return sound;
+    } catch (error) {
+      console.error('预加载音频出错:', error);
+      return null;
+    }
  };

  const fetchSongs = async (state: any, startIndex: number, endIndex: number) => {
-    const songs = state.playList.slice(
-      Math.max(0, startIndex),
-      Math.min(endIndex, state.playList.length)
-    );
+    try {
+      const songs = state.playList.slice(
+        Math.max(0, startIndex),
+        Math.min(endIndex, state.playList.length)
+      );

-    const detailedSongs = await Promise.all(
-      songs.map(async (song: SongResult) => {
-        // 如果歌曲详情已经存在，就不重复请求
-        if (!song.playMusicUrl) {
-          return await getSongDetail(song);
+      const detailedSongs = await Promise.all(
+        songs.map(async (song: SongResult) => {
+          try {
+            // 如果歌曲详情已经存在，就不重复请求
+            if (!song.playMusicUrl) {
+              return await getSongDetail(song);
+            }
+            return song;
+          } catch (error) {
+            console.error('获取歌曲详情失败:', error);
+            return song;
+          }
+        })
+      );
+
+      // 加载下一首的歌词
+      const nextSong = detailedSongs[0];
+      if (nextSong && !(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
+        try {
+          nextSong.lyric = await loadLrc(nextSong.id);
+        } catch (error) {
+          console.error('加载歌词失败:', error);
        }
-        return song;
-      })
-    );
-    // 加载下一首的歌词
-    const nextSong = detailedSongs[0];
-    if (!(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
-      nextSong.lyric = await loadLrc(nextSong.id);
-    }
+      }

-    // 更新播放列表中的歌曲详情
-    detailedSongs.forEach((song, index) => {
-      state.playList[startIndex + index] = song;
-    });
-    preloadNextSong(nextSong.playMusicUrl);
+      // 更新播放列表中的歌曲详情
+      detailedSongs.forEach((song, index) => {
+        if (song && startIndex + index < state.playList.length) {
+          state.playList[startIndex + index] = song;
+        }
+      });
+
+      // 只预加载下一首歌曲
+      if (nextSong && nextSong.playMusicUrl) {
+        preloadNextSong(nextSong.playMusicUrl);
+      }
+    } catch (error) {
+      console.error('获取歌曲列表失败:', error);
+    }
  };

  const nextPlay = async (state: any) => {
@@ -99,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]);
  };

@@ -145,7 +223,7 @@ export const useMusicListHook = () => {
      const { lyrics, times } = parseLyrics(data.lrc.lyric);
      const tlyric: Record<string, string> = {};

-      if (data.tlyric.lyric) {
+      if (data.tlyric && data.tlyric.lyric) {
        const { lyrics: tLyrics, times: tTimes } = parseLyrics(data.tlyric.lyric);
        tLyrics.forEach((lyric, index) => {
          tlyric[tTimes[index].toString()] = lyric.text;
@@ -185,6 +263,12 @@ export const useMusicListHook = () => {
    audioService.getCurrentSound()?.pause();
  };

+  // 在组件卸载时清理预加载的音频
+  onUnmounted(() => {
+    preloadingSounds.value.forEach((sound) => sound.unload());
+    preloadingSounds.value = [];
+  });
+
  return {
    handlePlayMusic,
    nextPlay,
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -11,7 +11,12 @@
 }

 .n-slider-handle-indicator--top {
-  @apply bg-transparent dark:text-[#ffffffdd] text-[#000000dd] text-2xl px-2 py-1 shadow-none mb-0 !important;
+  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 dark:text-[#ffffffdd] text-[#000000dd]  !important;
+  mix-blend-mode: difference !important;
+}
+
+.v-binder-follower-container:has(.n-slider-handle-indicator--top) {
+  z-index: 999999999 !important;
 }

 .text-el {
@@ -56,3 +61,11 @@
  --text-color-300: #3d3d3d;
  --primary-color: #22c55e;
 }
+
+:root {
+  --text-color: #000000dd;
+}
+
+:root[class='dark'] {
+  --text-color: #ffffffdd;
+}
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -28,14 +28,11 @@
    <meta name="apple-mobile-web-app-title" content="网抑云音乐" />
    <!-- 资源预加载 -->
    <link rel="preload" href="./assets/icon/iconfont.css" as="style" />
-    <link rel="preload" href="./assets/css/animate.css" as="style" />
    <link rel="preload" href="./assets/css/base.css" as="style" />

    <!-- 样式表 -->
    <link rel="stylesheet" href="./assets/icon/iconfont.css" />
-    <link rel="stylesheet" href="./assets/css/animate.css" />
    <link rel="stylesheet" href="./assets/css/base.css" />
-    <script defer src="https://cn.vercount.one/js"></script>

    <!-- 动画配置 -->
    <style>
@@ -47,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>
--- a/src/renderer/layout/AppLayout.vue
+++ b/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,27 +21,50 @@
            </router-view>
          </div>
          <play-bottom height="5rem" />
-          <app-menu v-if="isMobile" class="menu" :menus="menus" />
+          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
        </div>
      </div>
      <!-- 底部音乐播放 -->
-      <play-bar v-if="isPlay" />
+      <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;' : ''"
+      />
+      <!-- 下载管理抽屉 -->
+      <download-drawer
+        v-if="
+          isElectron &&
+          (settingsStore.setData?.alwaysShowDownloadButton ||
+            settingsStore.showDownloadDrawer ||
+            settingsStore.setData?.hasDownloadingTasks)
+        "
+      />
    </div>
-    <install-app-modal></install-app-modal>
-    <update-modal />
+    <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, onMounted } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, provide, ref, watch } 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 homeRouter from '@/router/home';
-import { isElectron, isMobile } from '@/utils';
 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(() =>
  homeRouter
@@ -55,19 +78,57 @@ const keepAliveInclude = computed(() =>

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

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

-const isPlay = computed(() => store.state.isPlay as boolean);
-const { menus } = store.state;
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
+
+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: () => settingsStore.showArtistDrawer,
+  set: (val) => settingsStore.setShowArtistDrawer(val)
+});
+
+// 监听歌手ID变化
+watch(
+  () => settingsStore.currentArtistId,
+  (newId) => {
+    if (newId) {
+      console.log('newId', newId);
+      artistDrawerShow.value = true;
+      nextTick(() => {
+        artistDrawerRef.value?.loadArtistInfo(newId);
+      });
+    }
+  }
+);
+
+const showPlaylistDrawer = ref(false);
+const currentSongId = ref<number | undefined>();
+
+// 提供一个方法来打开歌单抽屉
+const openPlaylistDrawer = (songId: number) => {
+  currentSongId.value = songId;
+  showPlaylistDrawer.value = true;
+};
+
+// 将方法提供给全局
+provide('openPlaylistDrawer', openPlaylistDrawer);
 </script>

 <style lang="scss" scoped>
@@ -101,7 +162,7 @@ onMounted(() => {

 .mobile {
  .main-content {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 154px);
    overflow: auto;
    display: block;
    flex: none;
--- a/src/renderer/layout/components/AppMenu.vue
+++ b/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;
      }
    }
  }
--- a/src/renderer/layout/components/MobilePlayBar.vue
+++ b/src/renderer/layout/components/MobilePlayBar.vue
@@ -0,0 +1,505 @@
+<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 { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
+import type { SongResult } from '@/type/music';
+import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
+
+import MusicFull from './MusicFull.vue';
+
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
+// 是否播放
+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);
+});
+
+const toggleFavorite = () => {
+  console.log('isFavorite.value', isFavorite.value);
+  if (isFavorite.value) {
+    playerStore.removeFromFavorite(playMusic.value.id);
+  } else {
+    playerStore.addToFavorite(playMusic.value.id);
+  }
+};
+
+// 播放暂停按钮事件
+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>
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -1,14 +1,35 @@
 <template>
  <n-drawer
-    :show="musicFull"
+    v-model:show="isVisible"
    height="100%"
    placement="bottom"
    :style="{ background: currentBackground || background }"
    :to="`#layout-main`"
+    :z-index="9998"
  >
-    <div id="drawer-target">
-      <div class="drawer-back"></div>
+    <div id="drawer-target" :class="[config.theme]">
      <div
+        class="control-btn absolute top-8 left-8"
+        :class="{ 'pure-mode': config.pureModeEnabled }"
+        @click="closeMusicFull"
+      >
+        <i class="ri-arrow-down-s-line"></i>
+      </div>
+
+      <n-popover trigger="click" placement="bottom">
+        <template #trigger>
+          <div
+            class="control-btn absolute top-8 right-8"
+            :class="{ 'pure-mode': config.pureModeEnabled }"
+          >
+            <i class="ri-settings-3-line"></i>
+          </div>
+        </template>
+        <lyric-settings ref="lyricSettingsRef" />
+      </n-popover>
+
+      <div
+        v-show="!config.hideCover"
        class="music-img"
        :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
      >
@@ -22,23 +43,60 @@
        <div>
          <div class="music-content-name">{{ playMusic.name }}</div>
          <div class="music-content-singer">
-            <span v-for="(item, index) in playMusic.ar || playMusic.song.artists" :key="index">
-              {{ item.name
-              }}{{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
-            </span>
+            <n-ellipsis
+              class="text-ellipsis"
+              line-clamp="2"
+              :tooltip="{
+                contentStyle: { maxWidth: '600px' },
+                zIndex: 99999
+              }"
+            >
+              <span
+                v-for="(item, index) in artistList"
+                :key="index"
+                class="cursor-pointer hover:text-green-500"
+                @click="handleArtistClick(item.id)"
+              >
+                {{ item.name }}
+                {{ index < artistList.length - 1 ? ' / ' : '' }}
+              </span>
+            </n-ellipsis>
          </div>
        </div>
      </div>
-      <div class="music-content">
+      <div class="music-content" :class="{ center: config.centerLyrics && config.hideCover }">
        <n-layout
          ref="lrcSider"
          class="music-lrc"
-          style="height: 60vh"
+          :style="{
+            height: config.hidePlayBar ? '85vh' : '65vh',
+            width: isMobile ? '100vw' : config.hideCover ? '50vw' : '500px'
+          }"
          :native-scrollbar="false"
          @mouseover="mouseOverLayout"
          @mouseleave="mouseLeaveLayout"
        >
-          <div ref="lrcContainer">
+          <!-- 歌曲信息 -->
+
+          <div ref="lrcContainer" class="music-lrc-container">
+            <div
+              v-if="config.hideCover"
+              class="music-info-header"
+              :style="{ textAlign: config.centerLyrics ? 'center' : 'left' }"
+            >
+              <div class="music-info-name">{{ playMusic.name }}</div>
+              <div class="music-info-singer">
+                <span
+                  v-for="(item, index) in artistList"
+                  :key="index"
+                  class="cursor-pointer hover:text-green-500"
+                  @click="handleArtistClick(item.id)"
+                >
+                  {{ item.name }}
+                  {{ index < artistList.length - 1 ? ' / ' : '' }}
+                </span>
+              </div>
+            </div>
            <div
              v-for="(item, index) in lrcArray"
              :id="`music-lrc-text-${index}`"
@@ -48,12 +106,14 @@
              @click="setAudioTime(index)"
            >
              <span :style="getLrcStyle(index)">{{ item.text }}</span>
-              <div class="music-lrc-text-tr">{{ item.trText }}</div>
+              <div v-show="config.showTranslation" class="music-lrc-text-tr">
+                {{ item.trText }}
+              </div>
            </div>

            <!-- 无歌词 -->
            <div v-if="!lrcArray.length" class="music-lrc-text mt-40">
-              <span>暂无歌词, 请欣赏</span>
+              <span>{{ t('player.lrc.noLrc') }}</span>
            </div>
          </div>
        </n-layout>
@@ -69,9 +129,12 @@

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

+import LyricSettings from '@/components/lyric/LyricSettings.vue';
 import {
+  artistList,
  lrcArray,
  nowIndex,
  playMusic,
@@ -79,9 +142,12 @@ import {
  textColors,
  useLyricProgress
 } from '@/hooks/MusicHook';
-import { getImgUrl } from '@/utils';
+import { usePlayerStore } from '@/store';
+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);
@@ -89,9 +155,59 @@ const lrcContainer = ref<HTMLElement | null>(null);
 const currentBackground = ref('');
 const animationFrame = ref<number | null>(null);
 const isDark = ref(false);
+const showStickyHeader = ref(false);
+const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();
+
+interface LyricConfig {
+  hideCover: boolean;
+  centerLyrics: boolean;
+  fontSize: number;
+  letterSpacing: number;
+  lineHeight: number;
+  showTranslation: boolean;
+  theme: 'default' | 'light' | 'dark';
+  hidePlayBar: boolean;
+  pureModeEnabled: boolean;
+}
+
+// 移除 computed 配置
+const config = ref<LyricConfig>({
+  hideCover: false,
+  centerLyrics: false,
+  fontSize: 22,
+  letterSpacing: 0,
+  lineHeight: 1.5,
+  showTranslation: true,
+  theme: 'default',
+  hidePlayBar: false,
+  pureModeEnabled: false
+});
+
+// 监听设置组件的配置变化
+watch(
+  () => lyricSettingsRef.value?.config,
+  (newConfig) => {
+    if (newConfig) {
+      config.value = newConfig;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 监听本地配置变化，保存到 localStorage
+watch(
+  () => config.value,
+  (newConfig) => {
+    localStorage.setItem('music-full-config', JSON.stringify(newConfig));
+    if (lyricSettingsRef.value) {
+      lyricSettingsRef.value.config = newConfig;
+    }
+  },
+  { deep: true }
+);

 const props = defineProps({
-  musicFull: {
+  modelValue: {
    type: Boolean,
    default: false
  },
@@ -101,24 +217,58 @@ const props = defineProps({
  }
 });

+const themeMusic = {
+  light: 'linear-gradient(to bottom, #ffffff, #f5f5f5)',
+  dark: 'linear-gradient(to bottom, #1a1a1a, #000000)'
+};
+
+const emit = defineEmits(['update:modelValue']);
+
+const isVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
 // 歌词滚动方法
-const lrcScroll = (behavior = 'smooth') => {
-  const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`);
-  if (props.musicFull && !isMouse.value && nowEl && lrcContainer.value) {
-    const containerRect = lrcContainer.value.getBoundingClientRect();
-    const nowElRect = nowEl.getBoundingClientRect();
-    const relativeTop = nowElRect.top - containerRect.top;
-    const scrollTop = relativeTop - lrcSider.value.$el.getBoundingClientRect().height / 2;
-    lrcSider.value.scrollTo({ top: scrollTop, behavior });
+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 (nowEl) {
+    const containerHeight = lrcSider.value.$el.clientHeight;
+    const elementTop = nowEl.offsetTop;
+    const scrollTop = elementTop - containerHeight / 2 + nowEl.clientHeight / 2;
+
+    lrcSider.value.scrollTo({
+      top: scrollTop,
+      behavior
+    });
  }
 };

 const debouncedLrcScroll = useDebounceFn(lrcScroll, 200);

 const mouseOverLayout = () => {
+  if (isMobile.value) {
+    return;
+  }
  isMouse.value = true;
 };
+
 const mouseLeaveLayout = () => {
+  if (isMobile.value) {
+    return;
+  }
  setTimeout(() => {
    isMouse.value = false;
    lrcScroll();
@@ -130,9 +280,9 @@ watch(nowIndex, () => {
 });

 watch(
-  () => props.musicFull,
+  () => isVisible.value,
  () => {
-    if (props.musicFull) {
+    if (isVisible.value) {
      nextTick(() => {
        lrcScroll('instant');
      });
@@ -140,41 +290,51 @@ watch(
  }
 );

+const setTextColors = (background: string) => {
+  if (!background) {
+    textColors.value = getTextColors();
+    document.documentElement.style.setProperty('--hover-bg-color', getHoverBackgroundColor(false));
+    document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
+    document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
+    return;
+  }
+
+  // 更新文字颜色
+  textColors.value = getTextColors(background);
+  isDark.value = textColors.value.active === '#000000';
+
+  document.documentElement.style.setProperty(
+    '--hover-bg-color',
+    getHoverBackgroundColor(isDark.value)
+  );
+  document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
+  document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
+
+  // 处理背景颜色动画
+  if (currentBackground.value) {
+    if (animationFrame.value) {
+      cancelAnimationFrame(animationFrame.value);
+    }
+    const result = animateGradient(currentBackground.value, background, (gradient) => {
+      currentBackground.value = gradient;
+    });
+    if (typeof result === 'number') {
+      animationFrame.value = result;
+    }
+  } else {
+    currentBackground.value = background;
+  }
+};
+
 // 监听背景变化
 watch(
  () => props.background,
  (newBg) => {
-    if (!newBg) {
-      textColors.value = getTextColors();
-      document.documentElement.style.setProperty(
-        '--hover-bg-color',
-        getHoverBackgroundColor(false)
-      );
-      document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
-      document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
-      return;
-    }
-
-    if (currentBackground.value) {
-      if (animationFrame.value) {
-        cancelAnimationFrame(animationFrame.value);
-      }
-      animationFrame.value = animateGradient(currentBackground.value, newBg, (gradient) => {
-        currentBackground.value = gradient;
-      });
+    if (config.value.theme === 'default') {
+      setTextColors(newBg);
    } else {
-      currentBackground.value = newBg;
+      setTextColors(themeMusic[config.value.theme] || props.background);
    }
-
-    textColors.value = getTextColors(newBg);
-    isDark.value = textColors.value.active === '#000000';
-
-    document.documentElement.style.setProperty(
-      '--hover-bg-color',
-      getHoverBackgroundColor(isDark.value)
-    );
-    document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
-    document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
  },
  { immediate: true }
 );
@@ -213,8 +373,145 @@ onBeforeUnmount(() => {
  }
 });

+const settingsStore = useSettingsStore();
+
+const handleArtistClick = (id: number) => {
+  isVisible.value = false;
+  settingsStore.currentArtistId = id;
+};
+
+const setData = computed(() => settingsStore.setData);
+
+// 监听字体变化并更新 CSS 变量
+watch(
+  () => [setData.value.fontFamily, setData.value.fontScope],
+  ([newFont, fontScope]) => {
+    const defaultFonts =
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+    // 如果不是歌词模式或全局模式，使用默认字体
+    if (fontScope !== 'lyric' && fontScope !== 'global') {
+      document.documentElement.style.setProperty('--current-font-family', defaultFonts);
+      return;
+    }
+
+    if (newFont === 'system-ui') {
+      document.documentElement.style.setProperty('--current-font-family', defaultFonts);
+    } else {
+      // 处理多个字体，确保每个字体名都被正确引用
+      const fontList = newFont.split(',').map((font) => {
+        const trimmedFont = font.trim();
+        // 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
+        return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
+          ? `"${trimmedFont}"`
+          : trimmedFont;
+      });
+
+      // 将选择的字体和默认字体组合
+      document.documentElement.style.setProperty(
+        '--current-font-family',
+        `${fontList.join(', ')}, ${defaultFonts}`
+      );
+    }
+  },
+  { immediate: true }
+);
+
+// 监听配置变化并保存到本地存储
+watch(
+  () => config.value,
+  (newConfig) => {
+    localStorage.setItem('music-full-config', JSON.stringify(newConfig));
+  },
+  { deep: true }
+);
+
+// 监听滚动事件
+const handleScroll = () => {
+  if (!lrcSider.value || !config.value.hideCover) return;
+  const { scrollTop } = lrcSider.value.$el;
+  showStickyHeader.value = scrollTop > 100;
+};
+
+const playerStore = usePlayerStore();
+
+const closeMusicFull = () => {
+  isVisible.value = false;
+  playerStore.setMusicFull(false);
+};
+
+// 添加滚动监听
+onMounted(() => {
+  if (lrcSider.value?.$el) {
+    lrcSider.value.$el.addEventListener('scroll', handleScroll);
+  }
+});
+
+// 移除滚动监听
+onBeforeUnmount(() => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+  }
+  if (lrcSider.value?.$el) {
+    lrcSider.value.$el.removeEventListener('scroll', handleScroll);
+  }
+});
+
+// 监听字体大小变化
+watch(
+  () => config.value.fontSize,
+  (newSize) => {
+    document.documentElement.style.setProperty('--lyric-font-size', `${newSize}px`);
+  }
+);
+
+// 监听主题变化
+watch(
+  () => config.value.theme,
+  (newTheme) => {
+    const newBackground = themeMusic[newTheme] || props.background;
+    setTextColors(newBackground);
+  },
+  { immediate: true }
+);
+
+// 添加文字间距监听
+watch(
+  () => config.value.letterSpacing,
+  (newSpacing) => {
+    document.documentElement.style.setProperty('--lyric-letter-spacing', `${newSpacing}px`);
+  }
+);
+
+// 添加行高监听
+watch(
+  () => config.value.lineHeight,
+  (newLineHeight) => {
+    document.documentElement.style.setProperty('--lyric-line-height', newLineHeight.toString());
+  }
+);
+
+// 加载保存的配置
+onMounted(() => {
+  const savedConfig = localStorage.getItem('music-full-config');
+  if (savedConfig) {
+    config.value = { ...config.value, ...JSON.parse(savedConfig) };
+  }
+  if (lrcSider.value?.$el) {
+    lrcSider.value.$el.addEventListener('scroll', handleScroll);
+  }
+});
+
+// 添加对 playMusic 的监听
+watch(playMusic, () => {
+  nextTick(() => {
+    lrcScroll('instant', true);
+  });
+});
+
 defineExpose({
-  lrcScroll
+  lrcScroll,
+  config
 });
 </script>

@@ -241,7 +538,7 @@ defineExpose({
 }

 #drawer-target {
-  @apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full pb-8;
+  @apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full py-8;
  animation-duration: 300ms;

  .music-img {
@@ -249,15 +546,26 @@ defineExpose({
    max-width: 360px;
    max-height: 360px;
    .img {
-      @apply rounded-xl w-full h-full  shadow-2xl;
+      @apply rounded-xl w-full h-full shadow-2xl;
    }
  }

  .music-content {
    @apply flex flex-col justify-center items-center relative;
+    width: 500px;
+
+    &.center {
+      @apply w-full;
+      .music-lrc {
+        @apply w-full max-w-3xl mx-auto;
+      }
+      .music-lrc-text {
+        @apply text-center;
+      }
+    }

    &-name {
-      @apply font-bold text-xl pb-1 pt-4;
+      @apply font-bold text-2xl pb-1 pt-4;
    }

    &-singer {
@@ -269,15 +577,46 @@ defineExpose({
    display: none;
    @apply flex justify-center items-center;
  }
+
+  .music-lrc-container {
+    padding-top: 30vh;
+  }
+
  .music-lrc {
    background-color: inherit;
    width: 500px;
    height: 550px;
+    position: relative;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 10%,
+      black 90%,
+      transparent 100%
+    );
+
+    .music-info-header {
+      @apply mb-8;
+
+      .music-info-name {
+        @apply text-4xl font-bold mb-2;
+        color: var(--text-color-active);
+      }
+
+      .music-info-singer {
+        @apply text-base;
+        color: var(--text-color-primary);
+      }
+    }
+
    &-text {
      @apply text-2xl cursor-pointer font-bold px-2 py-4;
      transition: all 0.3s ease;
      background-color: transparent;
+      font-size: var(--lyric-font-size, 22px) !important;
+      letter-spacing: var(--lyric-letter-spacing, 0) !important;
+      line-height: var(--lyric-line-height, 2) !important;

      span {
        background-clip: text !important;
@@ -317,9 +656,18 @@ defineExpose({
      span {
        padding-right: 0px !important;
      }
+      .hover-text {
+        &:hover {
+          background-color: transparent;
+        }
+      }
+      .music-lrc-text {
+        @apply text-xl text-center;
+      }
    }
-    .music-lrc-text {
-      @apply text-xl text-center;
+    .music-content {
+      @apply h-[calc(100vh-120px)];
+      width: 100vw !important;
    }
  }
 }
@@ -327,4 +675,58 @@ defineExpose({
 .music-drawer {
  transition: none; // 移除之前的过渡效果，现在使用 JS 动画
 }
+
+// 添加全局字体样式
+:root {
+  --current-font-family:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+}
+
+#drawer-target {
+  @apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full py-8;
+  animation-duration: 300ms;
+
+  .music-lrc-text {
+    font-family: var(--current-font-family);
+  }
+}
+
+.close-btn {
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.control-btn {
+  @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);
+
+  i {
+    @apply text-xl;
+    color: var(--text-color-active);
+  }
+
+  &.pure-mode {
+    background: transparent;
+    backdrop-filter: none;
+
+    &:not(:hover) {
+      i {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:hover {
+    background: rgba(126, 121, 121, 0.2);
+    i {
+      opacity: 1;
+    }
+  }
+}
 </style>
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -1,19 +1,19 @@
 <template>
-  <!-- 展开全屏 -->
-  <music-full ref="MusicFullRef" v-model:music-full="musicFullVisible" :background="background" />
-  <!-- 底部播放栏 -->
-
  <div
    class="music-play-bar"
-    :class="
-      setAnimationClass('animate__bounceInUp') + ' ' + (musicFullVisible ? 'play-bar-opcity' : '')
-    "
+    :class="[
+      setAnimationClass('animate__bounceInUp'),
+      musicFullVisible ? 'play-bar-opcity' : '',
+      musicFullVisible && MusicFullRef?.config?.hidePlayBar
+        ? 'animate__animated animate__slideOutDown'
+        : ''
+    ]"
    :style="{
      color: musicFullVisible
        ? textColors.theme === 'dark'
          ? '#000000'
          : '#ffffff'
-        : store.state.theme === 'dark'
+        : settingsStore.theme === 'dark'
          ? '#ffffff'
          : '#000000'
    }"
@@ -29,7 +29,7 @@
    </div>
    <div class="play-bar-img-wrapper" @click="setMusicFull">
      <n-image
-        :src="getImgUrl(playMusic?.picUrl, '500y500')"
+        :src="getImgUrl(playMusic?.picUrl, '100y100')"
        class="play-bar-img"
        lazy
        preview-disabled
@@ -41,7 +41,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>
@@ -52,15 +54,22 @@
        </n-ellipsis>
      </div>
      <div class="music-content-name">
-        <n-ellipsis class="text-ellipsis" line-clamp="1">
+        <n-ellipsis
+          class="text-ellipsis"
+          line-clamp="1"
+          :tooltip="{
+            contentStyle: { maxWidth: '600px' },
+            zIndex: 99999
+          }"
+        >
          <span
-            v-for="(artists, artistsindex) in playMusic.ar || playMusic.song.artists"
+            v-for="(artists, artistsindex) in artistList"
            :key="artistsindex"
-            >{{ artists.name
-            }}{{
-              artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : ''
-            }}</span
+            class="cursor-pointer hover:text-green-500"
+            @click="handleArtistClick(artists.id)"
          >
+            {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+          </span>
        </n-ellipsis>
      </div>
    </div>
@@ -98,18 +107,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"
@@ -125,7 +154,7 @@
            <template #trigger>
              <i class="iconfont icon-list"></i>
            </template>
-            播放列表
+            {{ t('player.playBar.playList') }}
          </n-tooltip>
        </template>
        <div class="music-play-list">
@@ -141,47 +170,55 @@
      </n-popover>
    </div>
    <!-- 播放音乐 -->
+    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
  </div>
 </template>

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

 import SongItem from '@/components/common/SongItem.vue';
+import EqControl from '@/components/EQControl.vue';
 import {
  allTime,
+  artistList,
  isLyricWindowOpen,
  nowTime,
  openLyric,
+  playMusic,
  sound,
  textColors
 } from '@/hooks/MusicHook';
+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, isMobile, secondToMinute, setAnimationClass, isElectron } from '@/utils';
+import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
+import { showShortcutToast } from '@/utils/shortcutToast';

 import MusicFull from './MusicFull.vue';

-const store = useStore();
-
-// 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as SongResult);
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const { t } = useI18n();
 // 是否播放
-const play = computed(() => store.state.play as boolean);
-const playList = computed(() => store.state.playList as SongResult[]);
-
+const play = computed(() => playerStore.isPlay);
+// 播放列表
+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;
  },
  { immediate: true, deep: true }
 );

-// 使用 useThrottleFn 创建节流版本的 seek 函数
+// 节流版本的 seek 函数
 const throttledSeek = useThrottleFn((value: number) => {
  if (!sound.value) return;
  sound.value.seek(value);
@@ -233,7 +270,7 @@ const mute = () => {
 };

 // 播放模式
-const playMode = computed(() => store.state.playMode);
+const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
  switch (playMode.value) {
    case 0:
@@ -249,43 +286,61 @@ 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 playMusicEvent = async () => {
-  if (play.value) {
-    if (sound.value) {
-      sound.value.pause();
+  try {
+    // 检查是否有有效的音乐对象和 URL
+    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
+      console.warn('No valid music or URL available');
+      playerStore.setPlay(playMusic.value);
+      return;
    }
-    store.commit('setPlayMusic', false);
-  } else {
-    if (sound.value) {
-      sound.value.play();
+
+    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);
    }
-    store.commit('setPlayMusic', true);
+  } catch (error) {
+    console.error('播放出错:', error);
+    playerStore.nextPlay();
  }
 };

@@ -294,33 +349,108 @@ const musicFullVisible = ref(false);
 // 设置musicFull
 const setMusicFull = () => {
  musicFullVisible.value = !musicFullVisible.value;
+  playerStore.setMusicFull(musicFullVisible.value);
+  if (musicFullVisible.value) {
+    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);
+  return playerStore.favoriteList.includes(playMusic.value.id);
 });

 const toggleFavorite = async (e: Event) => {
  e.stopPropagation();
  if (isFavorite.value) {
-    store.commit('removeFromFavorite', playMusic.value.id);
+    playerStore.removeFromFavorite(playMusic.value.id);
  } else {
-    store.commit('addToFavorite', playMusic.value.id);
+    playerStore.addToFavorite(playMusic.value.id);
  }
 };

 const openLyricWindow = () => {
  openLyric();
 };
+
+const handleArtistClick = (id: number) => {
+  musicFullVisible.value = false;
+  settingsStore.currentArtistId = id;
+};
+
+// 添加全局快捷键处理
+if (isElectron) {
+  window.electron.ipcRenderer.on('global-shortcut', (_, action: string) => {
+    console.log('action', action);
+    switch (action) {
+      case 'togglePlay':
+        playMusicEvent();
+        showShortcutToast(
+          play.value ? t('player.playBar.play') : t('player.playBar.pause'),
+          play.value ? 'ri-pause-circle-line' : 'ri-play-circle-line'
+        );
+        break;
+      case 'prevPlay':
+        handlePrev();
+        showShortcutToast(t('player.playBar.prev'), 'ri-skip-back-line');
+        break;
+      case 'nextPlay':
+        handleNext();
+        showShortcutToast(t('player.playBar.next'), 'ri-skip-forward-line');
+        break;
+      case 'volumeUp':
+        if (volumeSlider.value < 100) {
+          volumeSlider.value = Math.min(volumeSlider.value + 10, 100);
+          showShortcutToast(
+            `${t('player.playBar.volume')}${volumeSlider.value}%`,
+            'ri-volume-up-line'
+          );
+        }
+        break;
+      case 'volumeDown':
+        if (volumeSlider.value > 0) {
+          volumeSlider.value = Math.max(volumeSlider.value - 10, 0);
+          showShortcutToast(
+            `${t('player.playBar.volume')}${volumeSlider.value}%`,
+            'ri-volume-down-line'
+          );
+        }
+        break;
+      case 'toggleFavorite':
+        toggleFavorite(new Event('click'));
+        showShortcutToast(
+          isFavorite.value
+            ? t('player.playBar.favorite', { name: playMusic.value.name })
+            : t('player.playBar.unFavorite', { name: playMusic.value.name }),
+          isFavorite.value ? 'ri-heart-fill' : 'ri-heart-line'
+        );
+        break;
+      default:
+        console.log('未知的快捷键动作:', action);
+        break;
+    }
+  });
+}
+
+// 监听播放栏显示状态
+watch(
+  () => MusicFullRef.value?.config?.hidePlayBar,
+  (newVal) => {
+    if (newVal && musicFullVisible.value) {
+      // 使用 animate.css 动画，不需要手动设置样式
+    }
+  }
+);
+
+const isEQVisible = ref(false);
 </script>

 <style lang="scss" scoped>
@@ -334,6 +464,16 @@ const openLyricWindow = () => {
  z-index: 9999;
  animation-duration: 0.5s !important;

+  &.play-bar-opcity {
+    @apply bg-transparent !important;
+    box-shadow: 0 0 20px 5px #0000001d;
+  }
+
+  &.animate__slideOutDown {
+    animation-duration: 0.3s !important;
+    pointer-events: none;
+  }
+
  .music-content {
    width: 160px;
    @apply ml-4;
@@ -348,11 +488,6 @@ const openLyricWindow = () => {
  }
 }

-.play-bar-opcity {
-  @apply bg-transparent !important;
-  box-shadow: 0 0 20px 5px #0000001d;
-}
-
 .play-bar-img {
  @apply w-14 h-14 rounded-2xl;
 }
@@ -378,7 +513,7 @@ const openLyricWindow = () => {

  &-play {
    @apply flex justify-center items-center w-20 h-12 rounded-full mx-4 transition text-gray-500;
-    @apply bg-gray-100 bg-opacity-60 hover:bg-gray-200;
+    @apply bg-gray-100 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 hover:bg-gray-200;
  }
 }

@@ -432,8 +567,7 @@ const openLyricWindow = () => {

 .mobile {
  .music-play-bar {
-    @apply px-4;
-    bottom: 70px;
+    @apply px-4 bottom-[56px] transition-all duration-300;
  }
  .music-time {
    display: none;
@@ -546,6 +680,13 @@ const openLyricWindow = () => {
  @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;
@@ -558,4 +699,10 @@ const openLyricWindow = () => {
  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;
+}
 </style>
--- a/src/renderer/layout/components/SearchBar.vue
+++ b/src/renderer/layout/components/SearchBar.vue
@@ -16,7 +16,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,35 +28,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="userStore.user" class="menu-item" @click="selectItem('logout')">
+            <i class="iconfont ri-logout-box-r-line"></i>
+            <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>
@@ -67,11 +73,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>{{ t('comp.searchBar.refresh') }}</span>
          </div>
          <div class="menu-item" @click="toGithubRelease">
-            <i class="iconfont ri-refresh-line"></i>
-            <span>当前版本</span>
+            <i class="iconfont ri-github-fill"></i>
+            <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">
@@ -92,27 +102,33 @@
 </template>

 <script lang="ts" setup>
-import { onMounted, ref, watchEffect, computed } from 'vue';
+import { computed, onMounted, ref, 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 hotSearchKeyword = ref('搜索点什么吧...');
+const hotSearchKeyword = ref(t('comp.searchBar.searchPlaceholder'));
 const hotSearchValue = ref('');
 const loadHotSearchKeyword = async () => {
  const { data } = await getSearchKeyword();
@@ -124,14 +140,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');
@@ -153,9 +171,9 @@ onMounted(() => {
  checkForUpdates();
 });

-const isDarkTheme = computed({
-  get: () => store.state.theme === 'dark',
-  set: () => store.commit('toggleTheme')
+const isDark = computed({
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
 });

 // 搜索词
@@ -168,20 +186,24 @@ const search = () => {
  }

  if (router.currentRoute.value.path === '/search') {
-    store.state.searchValue = value;
+    searchStore.searchValue = value;
    return;
  }

  router.push({
    path: '/search',
    query: {
-      keyword: value
+      keyword: value,
+      type: searchStore.searchType
    }
  });
 };

 const selectSearchType = (key: number) => {
-  store.state.searchType = key;
+  searchStore.searchType = key;
+  if (searchValue.value) {
+    search();
+  }
 };

 const searchTypeOptions = ref(SEARCH_TYPES);
@@ -190,11 +212,7 @@ const selectItem = async (key: string) => {
  // switch 判断
  switch (key) {
    case 'logout':
-      logout().then(() => {
-        store.state.user = null;
-        localStorage.clear();
-        router.push('/login');
-      });
+      userStore.handleLogout();
      break;
    case 'login':
      router.push('/login');
@@ -205,12 +223,15 @@ const selectItem = async (key: string) => {
    case 'user':
      router.push('/user');
      break;
+    case 'refresh':
+      window.location.reload();
+      break;
    default:
  }
 };

 const toGithub = () => {
-  window.open('https://github.com/algerkong/AlgerMusicPlayer', '_blank');
+  window.open('http://donate.alger.fun', '_blank');
 };

 const updateInfo = ref<UpdateResult>({
@@ -233,7 +254,7 @@ const checkForUpdates = async () => {

 const toGithubRelease = () => {
  if (updateInfo.value.hasUpdate) {
-    window.open(updateInfo.value.releaseInfo?.html_url || 'https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
+    settingsStore.showUpdateModal = true;
  } else {
    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
  }
@@ -279,7 +300,7 @@ const toGithubRelease = () => {
 }

 .user-popover {
-  @apply min-w-[280px] p-0 rounded-xl overflow-hidden;
+  @apply min-w-[220px] p-0 rounded-xl overflow-hidden;
  @apply bg-light dark:bg-black;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

@@ -296,7 +317,7 @@ const toGithubRelease = () => {
    @apply py-1;

    .menu-item {
-      @apply flex items-center px-3 py-2 text-sm cursor-pointer;
+      @apply flex items-center px-3 py-1 text-sm cursor-pointer;
      @apply text-gray-700 dark:text-gray-300;
      transition: background-color 0.2s;

@@ -310,7 +331,7 @@ const toGithubRelease = () => {

      .version-info {
        @apply ml-auto flex items-center;
-        
+
        .version-number {
          @apply text-xs px-2 py-0.5 rounded;
          @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -2,22 +2,74 @@
  <div id="title-bar" @mousedown="drag">
    <div id="title">Alger Music</div>
    <div id="buttons">
-      <button @click="minimize">
-        <i class="iconfont icon-minisize"></i>
-      </button>
-      <button @click="close">
-        <i class="iconfont icon-close"></i>
-      </button>
+      <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="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="t('comp.titleBar.closeApp')"
+    :style="{ width: '400px' }"
+    :mask-closable="true"
+  >
+    <div class="close-dialog-content">
+      <p>{{ t('comp.titleBar.closeTitle') }}</p>
+      <div class="remember-choice">
+        <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')">
+          {{ t('comp.titleBar.minimizeToTray') }}
+        </n-button>
+        <n-button @click="handleAction('close')">
+          {{ t('comp.titleBar.exitApp') }}
+        </n-button>
+      </div>
+    </template>
+  </n-modal>
 </template>

 <script setup lang="ts">
-import { useDialog } from 'naive-ui';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';

+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';

-const dialog = useDialog();
+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) {
@@ -26,22 +78,32 @@ const minimize = () => {
  window.api.minimize();
 };

-const close = () => {
-  if (!isElectron) {
-    return;
+const handleAction = (action: 'minimize' | 'close') => {
+  if (rememberChoice.value) {
+    settingsStore.setSetData({
+      ...settingsStore.setData,
+      closeAction: action
+    });
+  }
+
+  if (action === 'minimize') {
+    window.api.minimize();
+  } else {
+    window.api.close();
+  }
+  showCloseModal.value = false;
+};
+
+const handleClose = () => {
+  const { closeAction } = settingsStore.setData;
+
+  if (closeAction === 'minimize') {
+    window.api.minimize();
+  } else if (closeAction === 'close') {
+    window.api.close();
+  } else {
+    showCloseModal.value = true;
  }
-  dialog.warning({
-    title: '提示',
-    content: '确定要退出吗？',
-    positiveText: '最小化',
-    negativeText: '关闭',
-    onPositiveClick: () => {
-      window.api.minimize();
-    },
-    onNegativeClick: () => {
-      window.api.close();
-    }
-  });
 };

 const drag = (event: MouseEvent) => {
@@ -57,7 +119,7 @@ const drag = (event: MouseEvent) => {
  -webkit-app-region: drag;
  @apply flex justify-between px-6 py-2 select-none relative;
  @apply text-dark dark:text-white;
-  z-index: 9999999;
+  z-index: 3000;
 }

 #buttons {
@@ -65,7 +127,15 @@ const drag = (event: MouseEvent) => {
  -webkit-app-region: no-drag;
 }

-button {
+.button {
  @apply text-gray-600 dark:text-gray-400 hover:text-green-500;
 }
+
+.close-dialog-content {
+  @apply flex flex-col gap-4;
+}
+
+.dialog-footer {
+  @apply flex gap-4 justify-end;
+}
 </style>
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -1,13 +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';
@@ -17,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');
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
alger	9f5bac29a0	🚀new: v4.1.0 更新 ### 🐛 Bug 修复 - 修复歌词窗口处理逻辑，解决 Windows 系统下桌面歌词窗口拖动问题 - 解决歌词初始化重复播放问题 ### ✨ 新功能 - 优化移动端和网页端效果和体验 - 增加系统控制的音频服务的上一曲和下一曲功能 - 优化用户数据加载逻辑和错误处理 - 增强语言切换功能 - 首页添加用户歌单推荐 - 优化音频监听器初始化和设置保存逻辑 ### 🔄 重构 - 将 Vuex 替换为 Pinia 状态管理 - 更新依赖版本	2025-03-23 12:33:13 +08:00
Alger	2fe1f0c04c	Merge pull request #83 from algerkong/fix/duplicate-playback ✨ feat: 增强歌词窗口处理逻辑，修复可能引起的歌词初始化重复播放问题	2025-03-23 00:49:08 +08:00
alger	2a12f57cb2	✨ feat: 增强歌词窗口处理逻辑，修复可能引起的歌词初始化重复播放问题	2025-03-23 00:47:01 +08:00
alger	4c10533a3d	🛠️ lint: 修复格式问题	2025-03-23 00:33:49 +08:00
alger	cda440b01a	🛠️ feat: 移除不必要的字体设置	2025-03-23 00:28:42 +08:00
alger	7b9e23743b	lint: 修复格式问题	2025-03-22 15:01:38 +08:00
alger	e43270f35d	lint: 修复格式问题	2025-03-22 14:54:24 +08:00
alger	9431faf932	✨ feat: 优化移动端和网页端效果和体验 feat: #82	2025-03-22 13:45:23 +08:00
Alger	be03b5f8fc	Merge pull request #82 from algerkong/feat/next-play ✨ feat: 增加音频服务的上一曲和下一曲功能	2025-03-22 10:40:19 +08:00
alger	8a414d0c25	✨ feat: 增加音频服务的上一曲和下一曲功能	2025-03-22 10:37:57 +08:00
alger	f9fd9afcdd	✨ feat: 优化用户数据加载逻辑和错误处理	2025-03-22 10:31:05 +08:00
alger	b114cf4a33	✨ feat: 增强语言切换功能和用户播放列表显示	2025-03-22 10:30:57 +08:00
alger	fa39d4ca55	✨ feat: 优化音频监听器初始化和设置保存逻辑 - 在 App.vue 中引入 initAudioListeners 函数，确保在播放音乐时初始化音频监听器。 - 在 MusicHook.ts 中重构音频监听器的初始化逻辑，增加音频加载的超时处理。 - 在设置页面中实现防抖保存功能，避免频繁更新设置，提高性能和用户体验。这些更改旨在提升音频播放的稳定性和设置管理的效率。	2025-03-21 00:19:15 +08:00
alger	650e4ff786	🔧 feat: 更新依赖版本修复类型错误优化首页推荐样式	2025-03-20 01:07:39 +08:00
alger	e355341596	🦄 refactor: 重构代码将 Vuex替换为 Pinia 集成 Pinia 状态管理	2025-03-19 22:48:28 +08:00
algerkong	4fa5ed0ca6	✨ feat: 更新依赖和配置，增强开发体验 - 在 electron.vite.config.ts 中启用 Vue DevTools 插件 - 更新 package.json 中多个依赖版本，确保兼容性和性能 - 调整 tsconfig.node.json 的配置，优化模块解析 - 删除不再使用的组件 PlaylistType.vue、RecommendAlbum.vue、RecommendSinger.vue 和 RecommendSonglist.vue - 在请求处理逻辑中改进错误日志输出，使用 console.error 替代 console.log - 在首页视图中替换推荐歌手组件为顶部横幅组件这些更改旨在提升开发效率和用户体验，确保项目的稳定性和可维护性。	2025-03-19 21:25:32 +08:00
alger	df9a1370c3	🐞 fix: 添加文件名清理功能以处理非法字符 - 新增 sanitizeFilename 函数，清理文件名中的非法字符 - 在下载音乐功能中应用清理后的文件名，确保文件名有效性 fixed: #78	2025-03-14 21:19:23 +08:00
alger	6a8813531f	🐞 fix: 修复歌词窗口拖动变大问题和多屏幕支持，优化字体样式 fixed: #77	2025-03-11 23:28:04 +08:00
alger	e5e45148c3	✨ feat: 优化标题栏交互和下载按钮 - 为非 Electron 环境添加下载桌面版按钮 - 调整标题栏按钮显示逻辑，支持 Web 和桌面端不同交互 - 新增打开下载页面的方法，增强用户引导体验	2025-03-09 19:34:05 +08:00
alger	4a66796747	🚀 chore: 优化 GitHub Actions Web 部署工作	2025-03-09 12:13:19 +08:00
alger	7f8ab8be7c	🔒 chore: 添加 GitHub 部署密钥到 .gitignore	2025-03-08 23:52:32 +08:00
alger	ce276df55c	✨ feat: 优化赞赏支持	2025-03-08 23:22:56 +08:00
alger	ccc59ea893	🔧 fix: 优化音频服务和EQ设置的跨平台兼容性	2025-03-08 21:27:05 +08:00
alger	0b409f38d6	🚀 release: v4.0.0	2025-03-08 20:58:53 +08:00
alger	f9878ed88a	✨ feat: 优化歌词窗口交互和同步机制 - 增强歌词窗口数据同步逻辑，支持实时更新和状态管理 - 添加歌词窗口关闭事件监听和状态处理 - 优化无歌词时的默认提示和窗口行为 - 实现歌词窗口定时同步机制，提升用户体验 - 修复歌词窗口打开和关闭时的状态控制 - 国际化支持无歌曲播放时的提示文案	2025-03-08 19:00:50 +08:00
alger	e43e85480d	✨ feat: 增强音频播放状态管理和进度恢复功能 - 实现全局进度动画管理，优化歌词进度更新机制 - 新增音频播放进度本地存储和恢复功能 - 优化音频服务初始化和播放状态控制 - 改进音频上下文和 Howler 初始化逻辑 - 增加播放状态和进度的本地持久化支持	2025-03-08 18:31:46 +08:00
Alger	b97170d1b2	Update README.md	2025-03-08 17:07:32 +08:00
Alger	b9aa1d574a	Merge pull request #75 from algerkong/feat/music-eq ✨ feat: 添加EQ音效调节功能实时调节以及多个预设提供	2025-03-07 22:50:07 +08:00
alger	dd7b06d7e5	✨ feat: 添加EQ音效调节功能实时调节以及多个预设提供	2025-03-07 01:14:35 +08:00
alger	ddafcfba10	🔧 chore: 移除网站访问统计脚本和无用的统计显示元素	2025-03-05 23:03:05 +08:00
Alger	da5b8c408a	Merge pull request #72 from algerkong/fix/random-music fix: 修复随机播放模式手动下一首不是随机的问题	2025-03-04 19:32:29 +08:00
alger	fb35d42fc4	fix: 修复随机播放模式手动下一首不是随机的问题	2025-03-04 19:29:46 +08:00
Alger	dfd5d4c8b7	Merge pull request #71 from algerkong/fix/music-list-play Fix/music list play	2025-03-02 22:49:00 +08:00
alger	e5309cedee	✨ feat: 音乐列表加载优化 - 重构音乐列表加载逻辑，提升数据加载性能和用户体验 - 新增歌曲总数显示，优化滚动加载和状态管理 - 改进歌曲数据格式化和异步加载处理	2025-03-02 08:27:07 +08:00
alger	d335f57a1a	✨ feat: 优化音乐列表加载策略，提升异步加载稳定性和错误处理	2025-03-01 10:57:06 +08:00
alger	c703d9c197	✨ feat: 优化音乐列表加载和播放逻辑，增强性能和用户体验	2025-02-28 19:52:00 +08:00
alger	87a0ceb5b0	✨ feat: 优化WEB下载应用程序代理	2025-02-28 19:50:53 +08:00
alger	891d70f3ed	✨ feat: 优化语言设置和国际化处理	2025-02-19 01:31:19 +08:00
alger	37b5908ddc	🌈 style: v3.9.3	2025-02-19 01:02:12 +08:00
alger	ead017e4b1	✨ feat: 国际化 (i18n) 功能实现	2025-02-19 01:01:43 +08:00
alger	da2a32e420	Merge branch 'dev_electron' into dev_i18n	2025-02-13 10:39:25 +08:00
Alger	5fc6edba20	Update README.md	2025-02-12 11:56:35 +08:00
alger	1ef47b8f1d	✨ feat: 增加动态代理节点获取和缓存机制	2025-02-12 11:44:18 +08:00
alger	cdaab19afa	✨ feat: 修改捐赠列表 API	2025-02-12 10:12:20 +08:00
alger	6a0b03cfe1	✨ feat: 优化更新检查逻辑，增加多个代理源支持	2025-02-12 10:11:50 +08:00
alger	d449930a02	🌈 style: v3.9.2	2025-01-26 00:31:18 +08:00
Alger	820509dbea	Merge pull request #50 from algerkong/feat/download ✨ feat: 弱化下载功能默认隐藏下载列表按钮在设置中配置打开	2025-01-26 00:22:58 +08:00
alger	1493ab7317	✨ feat: 弱化下载功能默认隐藏下载列表按钮在设置中配置打开	2025-01-26 00:20:08 +08:00
alger	c6ca63ee11	🐞 fix: 修复一些下载和登录问题 fix: #49	2025-01-25 23:53:20 +08:00
alger	4fa1295b84	🐞 fix: 修复登录状态问题修复播放退出登录的问题	2025-01-25 21:49:22 +08:00
alger	174428b386	✨ feat: 国际化功能基础实现	2025-01-23 11:02:55 +08:00
alger	599b0251af	🌈 style: v3.9.0	2025-01-22 23:43:17 +08:00
alger	25c2180247	✨ feat: 添加右键添加到歌单可以创建歌单可以在我的歌单中右键取消收藏	2025-01-22 23:37:50 +08:00
alger	a6ff0e7f5c	✨ feat: 歌曲右键添加下一首播放功能	2025-01-22 22:22:32 +08:00
alger	2e06711600	✨ feat: 添加自动播放和自动保存正在播放列表功能	2025-01-22 22:16:52 +08:00
Alger	80770d6c75	Update README.md	2025-01-20 09:53:24 +08:00
Alger	1e068df2ad	Update README.md	2025-01-20 09:46:26 +08:00
alger	4172ff9fc6	🐞 fix: 修复我的搜藏查看更多跳转空白页的问题	2025-01-19 18:46:36 +08:00
alger	83a7df9fe8	Merge branch 'feat/new-update' into dev_electron	2025-01-19 15:06:16 +08:00
alger	ba95dc11fe	✨ feat: 优化歌词下一首的滚动	2025-01-19 13:35:10 +08:00
alger	93829acdab	✨ feat: 升级依赖包升级 electron 版本	2025-01-19 13:34:31 +08:00
alger	1f0f35dd51	🌈 style: v3.8.0	2025-01-18 03:26:14 +08:00
alger	be94d6ff8e	✨ feat: 添加歌词界面样式配置功能	2025-01-18 03:25:21 +08:00
alger	1bdb8fcb4a	✨ feat: 添加字体配置功能可配置歌词页面或全局字体	2025-01-17 22:45:59 +08:00
alger	914e043502	✨ feat: 去除歌曲缓存优化播放下一首	2025-01-17 22:35:42 +08:00
alger	dfa175b8b2	✨ feat: 应用单例模式	2025-01-17 22:35:33 +08:00
alger	a94e0efba5	✨ feat: 优化播放	2025-01-17 22:34:49 +08:00
alger	fb0831f2eb	✨ feat: 应用更新在内部更新自动打开安装包	2025-01-17 00:02:57 +08:00
alger	573023600a	🌈 style: v3.7.2	2025-01-16 23:27:51 +08:00
Alger	041aad31b4	Merge pull request #47 from algerkong/fix/player-freeze-recovery-46 ✨ feat: 优化播放体验优化代码优化歌词缓存	2025-01-16 23:20:57 +08:00
alger	f652932d71	✨ feat: 优化播放体验优化代码优化歌词缓存	2025-01-16 23:19:16 +08:00
alger	7efeb9492b	🐞 fix: 修复类型错误	2025-01-16 00:58:57 +08:00
alger	055536eb5c	🌈 style: v3.7.1	2025-01-16 00:46:33 +08:00
Alger	14852fc8d3	Merge pull request #44 from algerkong/fix/minimize-on-space-after-restore-42 🐞 fix: 最小化点击后恢复窗口按空格会继续最小化	2025-01-16 00:43:05 +08:00
Alger	9866e772df	Merge pull request #45 from algerkong/fix/repeat-sound-on-lyric-seek-43 🐞 fix: 修复单曲循环后点击歌词快进会有重复的声音播放	2025-01-16 00:42:50 +08:00
alger	87ca0836b1	🐞 fix: 修复单曲循环后点击歌词快进会有重复的声音播放	2025-01-16 00:40:44 +08:00
alger	fa07c5a40c	🐞 fix: 最小化点击后恢复窗口按空格会继续最小化 fixed #42	2025-01-16 00:38:47 +08:00
alger	5dbfea240b	🌈 style: v3.7.0	2025-01-15 00:52:09 +08:00
alger	c1344393c3	🐞 fix: 修复清除缓存问题	2025-01-15 00:51:32 +08:00
alger	426888f77c	✨ feat: 优化设置页面样式以及布局	2025-01-15 00:31:40 +08:00
alger	45cbc15c0f	✨ feat: 添加快捷键以及快捷键管理功能 ref #39	2025-01-15 00:30:00 +08:00
alger	072025a543	🐞 fix: 修复抽屉zindex 修复一些样式问题 closes #37 #38	2025-01-15 00:26:42 +08:00
alger	c6427aa3e1	✨ feat: v3.6.0	2025-01-13 23:08:47 +08:00
alger	632cdb1239	✨ feat: 优化页面样式	2025-01-13 22:55:46 +08:00
alger	8ffe472605	✨ feat: 添加歌手详情抽屉	2025-01-13 22:13:46 +08:00
alger	8e86d378d0	✨ feat: 优化音乐解析，添加搜索记录添加搜索滚动加载更多添加关闭动画功能	2025-01-13 22:13:21 +08:00
alger	744fd53fb1	✨ feat: 添加歌词缓存功能	2025-01-12 20:59:36 +08:00
alger	3c64473dbb	✨ feat: 优化音乐播放控制系统控制功能（#36,#16） fixed #36,#16	2025-01-12 19:14:25 +08:00
alger	e70fed37da	✨ feat: 添加下载列表显示功能可播放已经下载的歌曲添加清除缓存功能修复下载文件类型问题	2025-01-12 16:04:03 +08:00
alger	b749854c5e	✨ feat: 优化留言显示	2025-01-12 12:38:51 +08:00
alger	d9210cc50a	✨ feat: 修改捐赠支持添加留言显示可隐藏列表	2025-01-12 01:25:39 +08:00
alger	f186d34885	📃 docs: 更新README	2025-01-11 19:12:26 +08:00
alger	ba992b7c33	📃 docs: v3.4.0	2025-01-11 19:03:06 +08:00
alger	24d7c839c7	🌈 style: 添加 "animate.css"	2025-01-11 18:51:40 +08:00
alger	a4f3df80c9	📃 docs: v3.4.0	2025-01-11 18:45:42 +08:00
alger	866fec6ee3	✨ feat: 优化收藏逻辑本地和线上同步添加批量下载	2025-01-11 18:38:34 +08:00
alger	8f7d6fbb8d	✨ feat: 设置页添加捐赠支持列表	2025-01-11 18:22:14 +08:00
alger	62e26cae7d	🌈 style: 优化代码格式化	2025-01-10 22:49:55 +08:00
alger	ddb814da10	✨ feat: v3.3.0	2025-01-06 22:33:13 +08:00
alger	e266ea8ef8	🐞 fix: 修复类型校验问题	2025-01-06 22:24:37 +08:00
alger	a894954641	🐞 fix: 修复类型校验问题	2025-01-06 22:15:25 +08:00
alger	f640ab9969	✨ feat: v3.3.0	2025-01-06 22:10:20 +08:00
alger	9eb17fd978	✨ feat: 优化登录失效	2025-01-06 22:03:50 +08:00
alger	020aca7384	✨ feat: 添加音质选择优化灰色歌曲解析	2025-01-06 20:54:42 +08:00
alger	fcc47dc0ff	✨ feat: 添加退出登录	2025-01-05 15:58:48 +08:00
alger	17ce268da6	✨ feat: 修复未登录收藏问题	2025-01-05 15:01:55 +08:00
alger	43c64b1b43	✨ feat: 收藏功能改为接口对接	2025-01-04 16:58:08 +08:00
alger	11ced6b418	✨ feat: 优化更新检查下载功能	2025-01-04 16:13:37 +08:00
alger	3d3992154a	🐞 fix: 修复歌词滚动问题	2025-01-04 00:26:30 +08:00
alger	81e7b67c7f	📃 docs: 3.2.0	2025-01-03 23:59:07 +08:00
alger	d7e94a342b	✨ feat: 添加代理功能和 realIP配置功能	2025-01-03 23:53:07 +08:00
alger	46f8067577	✨ feat: 关闭应用的提示修改可存储配置最小化还是关闭	2025-01-03 22:24:13 +08:00
alger	1dc7d0ceca	🐞 fix: 修复歌词页面与底栏冲突问题（#26）修复搜索歌曲列表页面显示错误问题（#33） closed #26 #33	2025-01-03 22:03:26 +08:00
alger	ba64631a17	🐞 fix: 修复搜索类型切换没有重新加载搜索的问题（#25） closed #25	2025-01-03 21:28:48 +08:00
alger	cdb9524f04	✨ feat: 解决检查更新请求失败问题	2025-01-02 00:45:01 +08:00
alger	5213aa13c5	🌈 style: 修复格式问题	2025-01-02 00:27:31 +08:00
alger	d870d0198f	🌈 style: 修复格式问题	2025-01-02 00:25:54 +08:00
alger	976a9afd2f	📃 docs: v3.1.0	2025-01-02 00:18:41 +08:00
alger	018218a5bf	✨ feat: 优化主入口代码添加歌曲下载功能	2025-01-02 00:14:05 +08:00
alger	38a9d6ed31	✨ feat: 完善网页版安装应用功能	2025-01-01 22:42:25 +08:00