🚀new: v4.1.0 更新

### 🐛 Bug 修复
- 修复歌词窗口处理逻辑，解决 Windows 系统下桌面歌词窗口拖动问题
- 解决歌词初始化重复播放问题

### ✨ 新功能
- 优化移动端和网页端效果和体验
- 增加系统控制的音频服务的上一曲和下一曲功能
- 优化用户数据加载逻辑和错误处理
- 增强语言切换功能
- 首页添加用户歌单推荐
- 优化音频监听器初始化和设置保存逻辑

### 🔄 重构
- 将 Vuex 替换为 Pinia 状态管理
- 更新依赖版本

.eslintrc.cjs

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

.github/workflows/deploy.yml

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

.gitignore

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

CHANGELOG.md

@@ -1,9 +1,19 @@
 # 更新日志
 
-## v3.9.3
+## v4.1.0
+
+### 🐛 Bug 修复
+- 修复歌词窗口处理逻辑, 修复windows系统下桌面歌词窗口拖动问题
+- 解决歌词初始化重复播放问题
 
 ### ✨ 新功能
-- 实现国际化（i18n）功能
-- 增加动态代理节点获取和缓存机制
-- 优化更新检查逻辑，增加多个代理源支持
-- 修改捐赠列表 API
+- 优化移动端和网页端效果和体验
+- 增加系统控制的音频服务的上一曲和下一曲功能
+- 优化用户数据加载逻辑和错误处理
+- 增强语言切换功能
+- 首页添加用户歌单推荐
+- 优化音频监听器初始化和设置保存逻辑
+
+### 🔄 重构
+- 将 Vuex 替换为 Pinia 状态管理
+- 更新依赖版本

README.md

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

electron.vite.config.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "AlgerMusicPlayer",
-  "version": "3.9.3",
+  "version": "4.1.0",
   "description": "Alger Music Player",
   "author": "Alger <algerkc@qq.com>",
   "main": "./out/main/index.js",
@@ -52,9 +52,9 @@
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
     "cross-env": "^7.0.3",
-    "electron": "^34.0.0",
+    "electron": "^35.0.2",
     "electron-builder": "^25.1.8",
-    "electron-vite": "^2.3.0",
+    "electron-vite": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
@@ -67,23 +67,23 @@
     "lodash": "^4.17.21",
     "marked": "^15.0.4",
     "naive-ui": "^2.41.0",
-    "postcss": "^8.4.49",
+    "pinia": "^3.0.1",
+    "postcss": "^8.5.3",
     "prettier": "^3.3.2",
-    "remixicon": "^4.2.0",
-    "sass": "^1.83.4",
+    "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",
+    "vite-plugin-vue-devtools": "7.7.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.0.22",
-    "vuex": "^4.1.0"
+    "vue-tsc": "^2.0.22"
   },
   "build": {
     "appId": "com.alger.music",

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

@@ -52,7 +52,8 @@ export default {
     qqGroup: 'QQ group: 789288579',
     messages: {
       copySuccess: 'Copied to clipboard'
-    }
+    },
+    donateList: 'Buy me a coffee'
   },
   playlistType: {
     title: 'Playlist Category',
@@ -84,6 +85,10 @@ export default {
     closeTitle: 'Choose how to close',
     minimizeToTray: 'Minimize to Tray',
     exitApp: 'Exit App',
-    rememberChoice: 'Remember my choice'
+    rememberChoice: 'Remember my choice',
+    closeApp: 'Close App'
+  },
+  userPlayList: {
+    title: "{name}'s Playlist"
   }
 };

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

@@ -2,5 +2,6 @@ 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'
+  refresh: 'Refresh List',
+  toDonateList: 'Buy me a coffee'
 };

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

@@ -10,6 +10,8 @@ export default {
   volumeDown: 'Volume Down',
   mute: 'Mute',
   unmute: 'Unmute',
+  songNum: 'Song Number: {num}',
+  playFailed: 'Play Failed, Play Next Song',
   playMode: {
     sequence: 'Sequence',
     loop: 'Loop',
@@ -32,6 +34,8 @@ export default {
     collapse: 'Collapse Lyrics',
     like: 'Like',
     lyric: 'Lyric',
+    noSongPlaying: 'No song playing',
+    eq: 'Equalizer',
     playList: 'Play List',
     playMode: {
       sequence: 'Sequence',
@@ -45,5 +49,29 @@ export default {
     volume: 'Volume',
     favorite: 'Favorite {name}',
     unFavorite: 'Unfavorite {name}'
+  },
+  eq: {
+    title: 'Equalizer',
+    reset: 'Reset',
+    on: 'On',
+    off: 'Off',
+    bass: 'Bass',
+    midrange: 'Midrange',
+    treble: 'Treble',
+    presets: {
+      flat: 'Flat',
+      pop: 'Pop',
+      rock: 'Rock',
+      classical: 'Classical',
+      jazz: 'Jazz',
+      electronic: 'Electronic',
+      hiphop: 'Hip-Hop',
+      rb: 'R&B',
+      metal: 'Metal',
+      vocal: 'Vocal',
+      dance: 'Dance',
+      acoustic: 'Acoustic',
+      custom: 'Custom'
+    }
   }
 };

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

@@ -51,7 +51,8 @@ export default {
     qqGroup: 'QQ群：789288579',
     messages: {
       copySuccess: '已复制到剪贴板'
-    }
+    },
+    donateList: '请我喝咖啡'
   },
   playlistType: {
     title: '歌单分类',
@@ -83,6 +84,10 @@ export default {
     closeTitle: '请选择关闭方式',
     minimizeToTray: '最小化到托盘',
     exitApp: '退出应用',
-    rememberChoice: '记住我的选择'
+    rememberChoice: '记住我的选择',
+    closeApp: '关闭应用'
+  },
+  userPlayList: {
+    title: '{name}的常听'
   }
 };

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

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

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

@@ -10,6 +10,8 @@ export default {
   volumeDown: '音量减少',
   mute: '静音',
   unmute: '取消静音',
+  songNum: '歌曲总数：{num}',
+  playFailed: '当前歌曲播放失败，播放下一首',
   playMode: {
     sequence: '顺序播放',
     loop: '循环播放',
@@ -32,6 +34,8 @@ export default {
     collapse: '收起歌词',
     like: '喜欢',
     lyric: '歌词',
+    noSongPlaying: '没有正在播放的歌曲',
+    eq: '均衡器',
     playList: '播放列表',
     playMode: {
       sequence: '顺序播放',
@@ -45,5 +49,29 @@ export default {
     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: '自定义'
+    }
   }
 };

src/main/index.ts

@@ -106,6 +106,7 @@ if (!isSingleInstance) {
 
   // 监听语言切换
   ipcMain.on('change-language', (_, locale: Language) => {
+    console.log('locale',locale)
     // 更新主进程的语言设置
     i18n.global.locale = locale;
     // 更新托盘菜单

src/main/lyric.ts

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

src/main/modules/fileManager.ts

@@ -257,6 +257,17 @@ async function processDownloadQueue(event: Electron.IpcMainEvent) {
   }
 }
 
+/**
+ * 清理文件名中的非法字符
+ */
+function sanitizeFilename(filename: string): string {
+  // 替换 Windows 和 Unix 系统中的非法字符
+  return filename
+    .replace(/[<>:"/\\|?*]/g, '_') // 替换特殊字符为下划线
+    .replace(/\s+/g, ' ') // 将多个空格替换为单个空格
+    .trim(); // 移除首尾空格
+}
+
 /**
  * 下载音乐功能
  */
@@ -276,9 +287,12 @@ async function downloadMusic(
     const store = new Store();
     const downloadPath = (store.get('set.downloadPath') as string) || app.getPath('downloads');
 
+    // 清理文件名中的非法字符
+    const sanitizedFilename = sanitizeFilename(filename);
+
     // 从URL中获取文件扩展名，如果没有则使用传入的type或默认mp3
     const urlExt = type ? `.${type}` : '.mp3';
-    const filePath = path.join(downloadPath, `${filename}${urlExt}`);
+    const filePath = path.join(downloadPath, `${sanitizedFilename}${urlExt}`);
 
     // 检查文件是否已存在，如果存在则添加序号
     finalFilePath = filePath;

src/main/modules/tray.ts

@@ -35,9 +35,12 @@ export function updateTrayMenu() {
           i18n.global.locale = value;
           // 更新托盘菜单
           updateTrayMenu();
-          // 通知渲染进程
-          const win = BrowserWindow.getAllWindows()[0];
-          win?.webContents.send('set-language', value);
+          // 直接通知主窗口
+          const windows = BrowserWindow.getAllWindows();
+          for (const win of windows) {
+            win.webContents.send('language-changed', value);
+            console.log('向窗口发送语言变更事件:', value);
+          }
         }
       }))
     },

src/main/modules/window.ts

@@ -91,7 +91,8 @@ export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      contextIsolation: true
+      contextIsolation: true,
+      webSecurity: false
     }
   });
 

src/preload/index.d.ts

@@ -13,10 +13,12 @@ declare global {
       miniTray: () => void;
       restart: () => void;
       unblockMusic: (id: number, data: any) => Promise<any>;
+      onLyricWindowClosed: (callback: () => void) => void;
       startDownload: (url: string) => void;
       onDownloadProgress: (callback: (progress: number, status: string) => void) => void;
       onDownloadComplete: (callback: (success: boolean, filePath: string) => void) => void;
       removeDownloadListeners: () => void;
+      onLanguageChanged: (callback: (locale: string) => void) => void;
       invoke: (channel: string, ...args: any[]) => Promise<any>;
     };
     $message: any;

src/preload/index.ts

@@ -12,6 +12,10 @@ const api = {
   openLyric: () => ipcRenderer.send('open-lyric'),
   sendLyric: (data) => ipcRenderer.send('send-lyric', data),
   unblockMusic: (id) => ipcRenderer.invoke('unblock-music', id),
+  // 歌词窗口关闭事件
+  onLyricWindowClosed: (callback: () => void) => {
+    ipcRenderer.on('lyric-window-closed', () => callback());
+  },
   // 更新相关
   startDownload: (url: string) => ipcRenderer.send('start-download', url),
   onDownloadProgress: (callback: (progress: number, status: string) => void) => {
@@ -20,6 +24,14 @@ const api = {
   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');

src/renderer/App.vue

@@ -12,87 +12,85 @@
 
 <script setup lang="ts">
 import { darkTheme, lightTheme } from 'naive-ui';
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, nextTick, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import homeRouter from '@/router/home';
-import globalStore from '@/store';
-import { isElectron } from '@/utils';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
+import { isElectron, isLyricWindow } from '@/utils';
 
+import { initAudioListeners } from './hooks/MusicHook';
 import { isMobile } from './utils';
 
 const { locale } = useI18n();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
+const playerStore = usePlayerStore();
 
-const savedLanguage = isElectron
-  ? window.electron.ipcRenderer.sendSync('get-store-value', 'set.language')
-  : JSON.parse(localStorage.getItem('appSettings') || '{}').language || 'zh-CN';
-if (savedLanguage) {
-  locale.value = savedLanguage;
-}
-
-const theme = computed(() => {
-  return globalStore.state.theme;
-});
-
-// 监听字体变化并应用
+// 监听语言变化
 watch(
-  () => [globalStore.state.setData.fontFamily, globalStore.state.setData.fontScope],
-  ([newFont, fontScope]) => {
-    const appElement = document.body;
-    if (!appElement) return;
-
-    const defaultFonts =
-      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-
-    // 只有在全局模式下才应用字体
-    if (fontScope !== 'global') {
-      appElement.style.fontFamily = defaultFonts;
-      return;
-    }
-
-    if (newFont === 'system-ui') {
-      appElement.style.fontFamily = defaultFonts;
-    } else {
-      // 处理多个字体，确保每个字体名都被正确引用
-      const fontList = newFont.split(',').map((font) => {
-        const trimmedFont = font.trim();
-        // 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
-        return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
-          ? `"${trimmedFont}"`
-          : trimmedFont;
-      });
-
-      // 将选择的字体和默认字体组合
-      appElement.style.fontFamily = `${fontList.join(', ')}, ${defaultFonts}`;
+  () => settingsStore.setData.language,
+  (newLanguage) => {
+    if (newLanguage && newLanguage !== locale.value) {
+      locale.value = newLanguage;
     }
   },
   { immediate: true }
 );
 
-// 监听来自主进程的语言切换事件
-const handleSetLanguage = (_: any, value: string) => {
-  // 更新 i18n locale
-  locale.value = value;
-  // 通过 mutation 更新 store
-  globalStore.commit('setLanguage', value);
-};
-
-onMounted(() => {
-  globalStore.dispatch('initializeSettings');
-  globalStore.dispatch('initializeTheme');
-  globalStore.dispatch('initializeSystemFonts');
-  globalStore.dispatch('initializePlayState');
-  if (isMobile.value) {
-    globalStore.commit(
-      'setMenus',
-      homeRouter.filter((item) => item.meta.isMobile)
-    );
-  }
-  window.electron.ipcRenderer.on('set-language', handleSetLanguage);
+const theme = computed(() => {
+  return settingsStore.theme;
 });
 
-onUnmounted(() => {
-  window.electron.ipcRenderer.removeListener('set-language', handleSetLanguage);
+// 监听字体变化并应用
+watch(
+  () => [settingsStore.setData.fontFamily, settingsStore.setData.fontScope],
+  ([newFont, fontScope]) => {
+    const appElement = document.body;
+    if (newFont && fontScope === 'global') {
+      appElement.style.fontFamily = newFont;
+    } else {
+      appElement.style.fontFamily = '';
+    }
+  }
+);
+
+const handleSetLanguage = (value: string) => {
+  console.log('应用语言变更:', value);
+  if (value) {
+    locale.value = value;
+  }
+};
+
+if (!isLyricWindow.value) {
+  settingsStore.initializeSettings();
+  settingsStore.initializeTheme();
+  settingsStore.initializeSystemFonts();
+  if (isMobile.value) {
+    menuStore.setMenus(homeRouter.filter((item) => item.meta.isMobile));
+  }
+}
+
+handleSetLanguage(settingsStore.setData.language);
+
+if (isElectron) {
+  window.api.onLanguageChanged(handleSetLanguage);
+}
+
+onMounted(async () => {
+  if (isLyricWindow.value) {
+    return;
+  }
+  // 先初始化播放状态
+  await playerStore.initializePlayState();
+  // 如果有正在播放的音乐，则初始化音频监听器
+  if (playerStore.playMusic && playerStore.playMusic.id) {
+    // 使用 nextTick 确保 DOM 更新后再初始化
+    await nextTick();
+    initAudioListeners();
+  }
 });
 </script>
 

src/renderer/api/music.ts

@@ -1,5 +1,5 @@
 import { musicDB } from '@/hooks/MusicHook';
-import store from '@/store';
+import { useSettingsStore, useUserStore } from '@/store';
 import type { ILyric } from '@/type/lyric';
 import { isElectron } from '@/utils';
 import request from '@/utils/request';
@@ -14,14 +14,16 @@ export const getMusicQualityDetail = (id: number) => {
 
 // 根据音乐Id获取音乐播放URl
 export const getMusicUrl = async (id: number, isDownloaded: boolean = false) => {
+  const userStore = useUserStore();
+  const settingStore = useSettingsStore();
   // 判断是否登录
   try {
-    if (store.state.user && isDownloaded && store.state.user.vipType !== 0) {
+    if (userStore.user && isDownloaded && userStore.user.vipType !== 0) {
       const url = '/song/download/url/v1';
       const res = await request.get(url, {
         params: {
           id,
-          level: store.state.setData.musicQuality || 'higher',
+          level: settingStore.setData.musicQuality || 'higher',
           cookie: `${localStorage.getItem('token')} os=pc;`
         }
       });
@@ -37,7 +39,7 @@ export const getMusicUrl = async (id: number, isDownloaded: boolean = false) =>
   return await request.get('/song/url/v1', {
     params: {
       id,
-      level: store.state.setData.musicQuality || 'higher'
+      level: settingStore.setData.musicQuality || 'higher'
     }
   });
 };
@@ -91,7 +93,7 @@ export const likeSong = (id: number, like: boolean = true) => {
 // 获取用户喜欢的音乐列表
 export const getLikedList = (uid: number) => {
   return request.get('/likelist', {
-    params: { uid }
+    params: { uid, noLogin: true }
   });
 };
 

src/renderer/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -11,6 +12,8 @@ declare module 'vue' {
     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']

src/renderer/components/Coffee.vue

@@ -46,6 +46,15 @@
             {{ 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>
     </n-popover>
   </div>
@@ -66,6 +75,10 @@ const copyQQ = () => {
   message.success('已复制到剪贴板');
 };
 
+const toDonateList = () => {
+  window.open('http://donate.alger.fun', '_blank');
+};
+
 defineProps({
   alipayQR: {
     type: String,

src/renderer/components/EQControl.vue

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

src/renderer/components/LanguageSwitcher.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
-import { isElectron } from '@/utils';
+import { useSettingsStore } from '@/store/modules/settings';
 
-const store = useStore();
+const settingsStore = useSettingsStore();
 const { locale } = useI18n();
 
 const languages = [
@@ -13,40 +12,12 @@ const languages = [
   { label: 'English', value: 'en-US' }
 ];
 
+console.log('locale', locale);
 // 使用计算属性来获取当前语言
 const currentLanguage = computed({
-  get: () => store.state.setData.language || 'zh-CN',
-  set: (value: string) => {
-    handleLanguageChange(value);
-  }
-});
-
-// 当语言改变时的处理函数
-const handleLanguageChange = (value: string) => {
-  // 更新 i18n locale
-  locale.value = value;
-  // 通过 mutation 更新 store
-  store.commit('setLanguage', value);
-  // 通知主进程语言已更改
-  if (isElectron) {
-    window.electron.ipcRenderer.send('change-language', value);
-  }
-};
-
-// 监听来自主进程的语言切换事件
-const handleSetLanguage = (_: any, value: string) => {
-  handleLanguageChange(value);
-};
-
-onMounted(() => {
-  if (isElectron) {
-    window.electron.ipcRenderer.on('set-language', handleSetLanguage);
-  }
-});
-
-onUnmounted(() => {
-  if (isElectron) {
-    window.electron.ipcRenderer.removeListener('set-language', handleSetLanguage);
+  get: () => locale.value,
+  set: (value) => {
+    settingsStore.setLanguage(value);
   }
 });
 </script>

src/renderer/components/MusicList.vue

@@ -37,12 +37,12 @@
             <n-avatar round :size="24" :src="getImgUrl(listInfo.creator.avatarUrl, '50y50')" />
             <span class="creator-name">{{ listInfo.creator.nickname }}</span>
           </div>
+          <div v-if="total" class="music-total">{{ t('player.songNum', { num: total }) }}</div>
 
-          <n-scrollbar style="max-height: 200">
+          <n-scrollbar style="max-height: 200px">
             <div v-if="listInfo?.description" class="music-desc">
               {{ listInfo.description }}
             </div>
-            <play-bottom />
           </n-scrollbar>
         </div>
 
@@ -60,7 +60,7 @@
                     :style="getItemAnimationDelay(index)"
                   >
                     <song-item
-                      :item="formatDetail(item)"
+                      :item="formatSong(item)"
                       :can-remove="canRemove"
                       @play="handlePlay"
                       @remove-song="(id) => emit('remove-song', id)"
@@ -69,6 +69,9 @@
                   <div v-if="isLoadingMore" class="loading-more">
                     {{ t('common.loadingMore') }}
                   </div>
+                  <div v-if="!hasMore" class="loading-more">
+                    {{ t('common.noMore') }}
+                  </div>
                   <play-bottom />
                 </div>
               </n-spin>
@@ -82,17 +85,18 @@
 </template>
 
 <script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 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 { t } = useI18n();
-const store = useStore();
+const playerStore = usePlayerStore();
 
 const props = withDefaults(
   defineProps<{
@@ -119,10 +123,14 @@ const props = withDefaults(
 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(() => {
@@ -132,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">
@@ -242,6 +371,10 @@ watch(
     @apply text-xl font-bold text-gray-900 dark:text-white;
   }
 
+  &-total {
+    @apply text-sm font-normal text-gray-500 dark:text-gray-400;
+  }
+
   &-page {
     @apply px-8 w-full h-full bg-light dark:bg-black bg-opacity-75 dark:bg-opacity-75 rounded-t-2xl;
     backdrop-filter: blur(20px);
@@ -306,6 +439,7 @@ watch(
 
   .music-content {
     @apply flex-col;
+    width: 100vw !important;
   }
 
   .music-info {

src/renderer/components/MvPlayer.vue

@@ -191,9 +191,9 @@
 import { NButton, NIcon, NSlider, NTooltip } from 'naive-ui';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import { getMvUrl } from '@/api/mv';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 
 const { t } = useI18n();
@@ -222,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);
 
@@ -359,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);
   }
 };
 
@@ -543,7 +543,7 @@ watch(showControls, (newValue) => {
   }
 });
 
-const isMobile = computed(() => store.state.isMobile);
+const isMobile = computed(() => false); // TODO: 从 settings store 获取
 </script>
 
 <style scoped lang="scss">

src/renderer/components/RecommendSinger.vue

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

src/renderer/components/common/ArtistDrawer.vue

@@ -90,14 +90,14 @@
 
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 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';
 
@@ -105,11 +105,17 @@ import PlayBottom from './PlayBottom.vue';
 
 const { t } = useI18n();
 
+const settingsStore = useSettingsStore();
+const playerStore = usePlayerStore();
+
+const currentArtistId = computed({
+  get: () => settingsStore.currentArtistId,
+  set: (val) => settingsStore.setCurrentArtistId(val as number)
+});
+
 const modelValue = defineModel<boolean>('show', { required: true });
 
-const store = useStore();
 const activeTab = ref('songs');
-const currentArtistId = ref<number>();
 
 // 歌手信息
 const artistInfo = ref<IArtist>();
@@ -134,15 +140,18 @@ const albumPage = ref({
 });
 
 watch(modelValue, (newVal) => {
-  store.commit('setShowArtistDrawer', newVal);
+  settingsStore.setShowArtistDrawer(newVal);
 });
 const loading = ref(false);
 // 加载歌手信息
+
+const previousArtistId = ref<number>();
 const loadArtistInfo = async (id: number) => {
-  if (currentArtistId.value === id) return;
+  // if (currentArtistId.value === id) return;
+  if (previousArtistId.value === id) return;
   activeTab.value = 'songs';
   loading.value = true;
-  currentArtistId.value = id;
+  previousArtistId.value = id;
   try {
     const info = await getArtistDetail(id);
     if (info.data?.data?.artist) {
@@ -260,8 +269,7 @@ const formatPublishTime = (time: number) => {
 };
 
 const handlePlay = () => {
-  store.commit(
-    'setPlayList',
+  playerStore.setPlayList(
     songs.value.map((item) => ({
       ...item,
       picUrl: item.al.picUrl

src/renderer/components/common/DonationList.vue

@@ -76,12 +76,12 @@
       </n-button>
     </div>
 
-    <div class="p-6 rounded-lg shadow-lg bg-light dark:bg-gray-800">
+    <div class="p-6 rounded-lg shadow-lg">
       <div class="description text-center text-sm text-gray-700 dark:text-gray-200">
         <p>{{ t('donation.description') }}</p>
         <p>{{ t('donation.message') }}</p>
       </div>
-      <div class="flex justify-between">
+      <div class="flex justify-between mt-6">
         <div class="flex flex-col items-center gap-2">
           <n-image
             :src="alipay"
@@ -91,6 +91,13 @@
           />
           <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"
@@ -225,6 +232,10 @@ const displayDonors = computed(() => {
 const toggleExpand = () => {
   isExpanded.value = !isExpanded.value;
 };
+
+const toDonateList = () => {
+  window.open('http://donate.alger.fun', '_blank');
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/common/DownloadDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="download-drawer-trigger">
     <n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0">
-      <n-button circle @click="store.commit('setShowDownloadDrawer', true)">
+      <n-button circle @click="settingsStore.showDownloadDrawer = true">
         <template #icon>
           <i class="iconfont ri-download-cloud-2-line"></i>
         </template>
@@ -179,11 +179,13 @@ import type { ProgressStatus } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 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();
 
@@ -208,11 +210,14 @@ interface DownloadedItem {
 }
 
 const message = useMessage();
-const store = useStore();
+// const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
 
 const showDrawer = computed({
-  get: () => store.state.showDownloadDrawer,
-  set: (val) => store.commit('setShowDownloadDrawer', val)
+  get: () => settingsStore.showDownloadDrawer,
+  set: (val) => {
+    settingsStore.showDownloadDrawer = val;
+  }
 });
 
 const downloadList = ref<DownloadItem[]>([]);
@@ -224,10 +229,6 @@ const downList = computed(() => {
   return (downloadedList.value as DownloadedItem[]).reverse();
 });
 
-// 获取播放状态
-// const play = computed(() => store.state.play as boolean);
-// const currentMusic = computed(() => store.state.playMusic);
-
 // 计算下载中的任务数量
 const downloadingCount = computed(() => {
   return downloadList.value.filter((item) => item.status === 'downloading').length;
@@ -343,50 +344,10 @@ const confirmDelete = async () => {
 };
 
 // 播放音乐
-// const handlePlayMusic = async (item: DownloadedItem) => {
-//   // 确保路径正确编码
-//   const encodedPath = encodeURIComponent(item.path);
-//   const localUrl = `local://${encodedPath}`;
-
-//   const musicInfo = {
-//     name: item.filename,
-//     id: item.id,
-//     url: localUrl,
-//     playMusicUrl: localUrl,
-//     picUrl: item.picUrl,
-//     ar: item.ar || [{ name: '本地音乐' }],
-//     song: {
-//       artists: item.ar || [{ name: '本地音乐' }]
-//     },
-//     al: {
-//       picUrl: item.picUrl || '/images/default_cover.png'
-//     }
-//   };
-
-//   // 如果是当前播放的音乐，则切换播放状态
-//   if (currentMusic.value?.id === item.id) {
-//     if (play.value) {
-//       audioService.getCurrentSound()?.pause();
-//       store.commit('setPlayMusic', false);
-//     } else {
-//       audioService.getCurrentSound()?.play();
-//       store.commit('setPlayMusic', true);
-//     }
-//     return;
-//   }
-
-//   // 播放新的音乐
-//   store.commit('setPlay', musicInfo);
-//   store.commit('setPlayMusic', true);
-//   store.commit('setIsPlay', true);
-
-//   store.commit(
-//     'setPlayList',
-//     downloadedList.value.map((item) => ({
-//       ...item,
-//       playMusicUrl: `local://${encodeURIComponent(item.path)}`
-//     }))
-//   );
+// const handlePlay = async (musicInfo: SongResult) => {
+//   await playerStore.setPlay(musicInfo);
+//   playerStore.setPlayMusic(true);
+//   playerStore.setIsPlay(true);
 // };
 
 // 获取已下载音乐列表
@@ -522,7 +483,7 @@ onMounted(() => {
 });
 
 const handleDrawerClose = () => {
-  store.commit('setShowDownloadDrawer', false);
+  settingsStore.showDownloadDrawer = false;
 };
 </script>
 

src/renderer/components/common/InstallAppModal.vue

@@ -46,7 +46,7 @@ import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { isElectron, isMobile } from '@/utils';
-import { getLatestReleaseInfo } from '@/utils/update';
+import { getLatestReleaseInfo, getProxyNodes } from '@/utils/update';
 
 import config from '../../../../package.json';
 
@@ -63,6 +63,8 @@ const closeModal = () => {
   }
 };
 
+const proxyHosts = ref<string[]>([]);
+
 onMounted(async () => {
   // 如果是 electron 环境，不显示安装提示
   if (isElectron || isMobile.value) {
@@ -78,6 +80,7 @@ onMounted(async () => {
   // 获取最新版本信息
   releaseInfo.value = await getLatestReleaseInfo();
   showModal.value = true;
+  proxyHosts.value = await getProxyNodes();
 });
 
 const handleInstall = async (): Promise<void> => {
@@ -118,7 +121,8 @@ const handleInstall = async (): Promise<void> => {
   }
 
   if (downloadUrl) {
-    window.open(`https://ghproxy.cn/${downloadUrl}`, '_blank');
+    const proxyDownloadUrl = `${proxyHosts.value[0]}/${downloadUrl}`;
+    window.open(proxyDownloadUrl, '_blank');
   } else {
     // 如果没有找到对应的安装包，跳转到 release 页面
     window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');

src/renderer/components/common/PlayBottom.vue

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

src/renderer/components/common/PlaylistDrawer.vue

@@ -110,12 +110,13 @@
 import { useMessage } from 'naive-ui';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 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;
@@ -127,7 +128,6 @@ const emit = defineEmits(['update:modelValue']);
 const message = useMessage();
 const playlists = ref<any[]>([]);
 const creating = ref(false);
-const store = useStore();
 const isCreating = ref(false);
 
 const formValue = ref({
@@ -151,7 +151,7 @@ const toggleCreateForm = () => {
 // 获取用户歌单
 const fetchUserPlaylists = async () => {
   try {
-    const { user } = store.state;
+    const { user } = store;
     if (!user?.userId) {
       message.error(t('comp.playlistDrawer.loginFirst'));
       emit('update:modelValue', false);

src/renderer/components/common/SearchItem.vue

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

src/renderer/components/common/SongItem.vue

@@ -90,10 +90,10 @@ 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 { useStore } from 'vuex';
 
 import { getSongUrl } from '@/hooks/MusicListHook';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';
@@ -120,11 +120,13 @@ const props = withDefaults(
   }
 );
 
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
 const message = useMessage();
 
-const play = computed(() => store.state.play as boolean);
-const playMusic = computed(() => store.state.playMusic);
+const play = computed(() => playerStore.isPlay);
+const playMusic = computed(() => playerStore.playMusic);
 const playLoading = computed(
   () => playMusic.value.id === props.item.id && playMusic.value.playLoading
 );
@@ -356,31 +358,31 @@ 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);
   }
 };
 
@@ -390,7 +392,8 @@ const toggleSelect = () => {
 };
 
 const handleArtistClick = (id: number) => {
-  store.commit('setCurrentArtistId', id);
+  settingsStore.setCurrentArtistId(id);
+  settingsStore.setShowArtistDrawer(true);
 };
 
 // 获取歌手列表（最多显示5个）
@@ -400,7 +403,7 @@ const artists = computed(() => {
 
 // 添加到下一首播放
 const handlePlayNext = () => {
-  store.commit('addToNextPlay', props.item);
+  playerStore.addToNextPlay(props.item);
   message.success(t('songItem.message.addedToNextPlay'));
 };
 </script>

src/renderer/components/common/UpdateModal.vue

@@ -71,10 +71,10 @@
 
 <script setup lang="ts">
 import { marked } from 'marked';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
+import { useSettingsStore } from '@/store/modules/settings';
 import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
@@ -87,7 +87,13 @@ marked.setOptions({
   gfm: true // 启用 GitHub 风格的 Markdown
 });
 
-const showModal = ref(false);
+const settingsStore = useSettingsStore();
+
+const showModal = computed({
+  get: () => settingsStore.showUpdateModal,
+  set: (val) => settingsStore.setShowUpdateModal(val)
+});
+
 const updateInfo = ref<UpdateResult>({
   hasUpdate: false,
   latestVersion: '',
@@ -95,28 +101,6 @@ const updateInfo = ref<UpdateResult>({
   releaseInfo: null
 });
 
-const store = useStore();
-
-// 添加计算属性
-const showUpdateModalState = computed({
-  get: () => store.state.showUpdateModal,
-  set: (val) => store.commit('setShowUpdateModal', val)
-});
-
-// 替换原来的 watch
-watch(showUpdateModalState, (newVal) => {
-  if (newVal) {
-    showModal.value = true;
-  }
-});
-
-watch(
-  () => showModal.value,
-  (newVal) => {
-    showUpdateModalState.value = newVal;
-  }
-);
-
 // 解析 Markdown
 const parsedReleaseNotes = computed(() => {
   if (!updateInfo.value.releaseInfo?.body) return '';

src/renderer/components/home/RecommendSonglist.vue

@@ -24,16 +24,15 @@
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 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 { t } = useI18n();
-const store = useStore();
+const playerStore = usePlayerStore();
 // 推荐歌曲
 const recommendMusic = ref<IRecommendMusic>();
 const loading = ref(false);
@@ -52,7 +51,9 @@ onMounted(() => {
 });
 
 const handlePlay = () => {
-  store.commit('setPlayList', recommendMusic.value?.result);
+  if (recommendMusic.value?.result) {
+    playerStore.setPlayList(recommendMusic.value.result);
+  }
 };
 </script>
 

src/renderer/components/home/TopBanner.vue

@@ -0,0 +1,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>

src/renderer/hooks/MusicHook.ts

@@ -1,15 +1,17 @@
 import { createDiscreteApi } from 'naive-ui';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+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 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); // 当前播放时间
@@ -17,12 +19,12 @@ 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<any>(getTextColors());
 export const artistList = computed(
-  () => (store.state.playMusic.ar || store.state.playMusic?.song?.artists) as Artist[]
+  () => (playerStore.playMusic.ar || playerStore.playMusic?.song?.artists) as Artist[]
 );
 
 export const musicDB = await useIndexedDB('musicDB', [
@@ -40,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;
@@ -54,34 +56,230 @@ 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,
+  () => playerStore.playMusicUrl,
   async (newVal) => {
     if (newVal && playMusic.value) {
       try {
-        const newSound = await audioService.play(newVal, playMusic.value);
+        // 保存当前播放状态
+        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);
-        message.error('当前歌曲播放失败，播放下一首');
-        // 下一首
-        store.commit('nextPlay');
+        // 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);
       }
     });
   },
@@ -104,15 +302,42 @@ const setupAudioListeners = () => {
   // 清理所有事件监听器
   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();
+
   // 监听播放
   audioService.on('play', () => {
-    store.commit('setPlayMusic', true);
+    playerStore.setPlayMusic(true);
     clearInterval();
     interval = window.setInterval(() => {
       try {
         const currentSound = sound.value;
-        if (!currentSound || typeof currentSound.seek !== 'function') {
-          console.error('Invalid sound object or seek function');
+        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;
         }
@@ -129,7 +354,8 @@ const setupAudioListeners = () => {
         const newIndex = getLrcIndex(nowTime.value);
         if (newIndex !== nowIndex.value) {
           nowIndex.value = newIndex;
-          currentLrcProgress.value = 0;
+          // 注意：我们不在这里设置 currentLrcProgress 为 0
+          // 因为这会与全局进度更新冲突
           if (isElectron && isLyricWindowOpen.value) {
             sendLyricToWin();
           }
@@ -146,7 +372,8 @@ const setupAudioListeners = () => {
 
   // 监听暂停
   audioService.on('pause', () => {
-    store.commit('setPlayMusic', false);
+    console.log('音频暂停事件触发');
+    playerStore.setPlayMusic(false);
     clearInterval();
     if (isElectron && isLyricWindowOpen.value) {
       sendLyricToWin();
@@ -163,48 +390,57 @@ const setupAudioListeners = () => {
       }
 
       // 重新播放当前歌曲
-      if (store.state.playMusicUrl && playMusic.value) {
-        const newSound = await audioService.play(store.state.playMusicUrl, playMusic.value);
+      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');
-        store.commit('nextPlay');
+        playerStore.nextPlay();
       }
     } catch (error) {
       console.error('Error replaying song:', error);
-      store.commit('nextPlay');
+      playerStore.nextPlay();
     }
   };
 
   // 监听结束
   audioService.on('end', () => {
+    console.log('音频播放结束事件触发');
     clearInterval();
 
-    if (store.state.playMode === 1) {
+    if (playerStore.playMode === 1) {
       // 单曲循环模式
       if (sound.value) {
         replayMusic();
       }
-    } else if (store.state.playMode === 2) {
+    } else if (playerStore.playMode === 2) {
       // 随机播放模式
-      const { playList } = store.state;
-      if (playList.length <= 1) {
+
+      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;
 };
 
@@ -213,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);
@@ -267,103 +520,8 @@ export const getLrcStyle = (index: number) => {
 
 // 播放进度
 export const useLyricProgress = () => {
-  let animationFrameId: number | null = null;
-
-  const updateProgress = () => {
-    if (!isPlaying.value) {
-      stopProgressAnimation();
-      return;
-    }
-
-    const currentSound = sound.value;
-    if (!currentSound || typeof currentSound.seek !== 'function') {
-      console.error('Invalid sound object or seek function');
-      stopProgressAnimation();
-      return;
-    }
-
-    try {
-      const { start, end } = currentLrcTiming.value;
-      if (typeof start !== 'number' || typeof end !== 'number' || start === end) {
-        return;
-      }
-
-      const currentTime = currentSound.seek() as number;
-      if (typeof currentTime !== 'number' || Number.isNaN(currentTime)) {
-        console.error('Invalid current time:', currentTime);
-        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 updating progress:', error);
-    }
-
-    // 继续下一帧更新
-    animationFrameId = requestAnimationFrame(updateProgress);
-  };
-
-  const startProgressAnimation = () => {
-    stopProgressAnimation(); // 先停止之前的动画
-    if (isPlaying.value) {
-      updateProgress();
-    }
-  };
-
-  const stopProgressAnimation = () => {
-    if (animationFrameId) {
-      cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-  };
-
-  // 监听播放状态变化
-  watch(
-    isPlaying,
-    (newIsPlaying) => {
-      if (newIsPlaying) {
-        startProgressAnimation();
-      } else {
-        stopProgressAnimation();
-      }
-    },
-    { immediate: true }
-  );
-
-  // 监听当前歌词索引变化
-  watch(nowIndex, () => {
-    currentLrcProgress.value = 0;
-    if (isPlaying.value) {
-      startProgressAnimation();
-    }
-  });
-
-  // 监听音频对象变化
-  watch(sound, (newSound) => {
-    if (newSound && isPlaying.value) {
-      startProgressAnimation();
-    } else {
-      stopProgressAnimation();
-    }
-  });
-
-  onMounted(() => {
-    if (isPlaying.value) {
-      startProgressAnimation();
-    }
-  });
-
-  onUnmounted(() => {
-    stopProgressAnimation();
-  });
-
+  // 如果已经在全局更新进度，立即返回
   return {
-    currentLrcProgress,
     getLrcStyle
   };
 };
@@ -405,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);
@@ -483,7 +771,74 @@ if (isElectron) {
 }
 
 // 在组件挂载时设置监听器
-onMounted(() => {
-  setupAudioListeners();
-  useLyricProgress(); // 直接调用，不需要解构返回值
-});
+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);
+  }
+};

src/renderer/hooks/MusicListHook.ts

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

src/renderer/index.html

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

src/renderer/layout/AppLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="layout-page">
     <div id="layout-main" class="layout-main">
-      <title-bar v-if="isElectron" />
-      <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
+      <title-bar />
+      <div class="layout-main-page">
         <!-- 侧边菜单栏 -->
         <app-menu v-if="!isMobile" class="menu" :menus="menus" />
         <div class="main">
@@ -21,18 +21,27 @@
             </router-view>
           </div>
           <play-bottom height="5rem" />
-          <app-menu v-if="isMobile && !store.state.musicFull" class="menu" :menus="menus" />
+          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
-      <play-bar v-show="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
+      <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 &&
-          (store.state.setData?.alwaysShowDownloadButton ||
-            store.state.showDownloadDrawer ||
-            store.state.hasDownloadingTasks)
+          (settingsStore.setData?.alwaysShowDownloadButton ||
+            settingsStore.showDownloadDrawer ||
+            settingsStore.setData?.hasDownloadingTasks)
         "
       />
     </div>
@@ -46,13 +55,15 @@
 <script lang="ts" setup>
 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 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(() =>
@@ -67,34 +78,38 @@ 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 ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
 
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
 
-const isPlay = computed(() => store.state.isPlay as boolean);
-const { menus } = store.state;
+const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id);
+const { menus } = menuStore;
 const route = useRoute();
 
 onMounted(() => {
-  store.dispatch('initializeSettings');
-  store.dispatch('initializeTheme');
+  settingsStore.initializeSettings();
+  settingsStore.initializeTheme();
 });
 
 const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
 const artistDrawerShow = computed({
-  get: () => store.state.showArtistDrawer,
-  set: (val) => store.commit('setShowArtistDrawer', val)
+  get: () => settingsStore.showArtistDrawer,
+  set: (val) => settingsStore.setShowArtistDrawer(val)
 });
 
 // 监听歌手ID变化
 watch(
-  () => store.state.currentArtistId,
+  () => settingsStore.currentArtistId,
   (newId) => {
     if (newId) {
+      console.log('newId', newId);
       artistDrawerShow.value = true;
       nextTick(() => {
         artistDrawerRef.value?.loadArtistInfo(newId);
@@ -147,7 +162,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
 
 .mobile {
   .main-content {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 154px);
     overflow: auto;
     display: block;
     flex: none;

src/renderer/layout/components/AppMenu.vue

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

src/renderer/layout/components/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>

src/renderer/layout/components/MusicFull.vue

@@ -11,7 +11,7 @@
       <div
         class="control-btn absolute top-8 left-8"
         :class="{ 'pure-mode': config.pureModeEnabled }"
-        @click="isVisible = false"
+        @click="closeMusicFull"
       >
         <i class="ri-arrow-down-s-line"></i>
       </div>
@@ -70,7 +70,7 @@
           class="music-lrc"
           :style="{
             height: config.hidePlayBar ? '85vh' : '65vh',
-            width: config.hideCover ? '50vw' : '500px'
+            width: isMobile ? '100vw' : config.hideCover ? '50vw' : '500px'
           }"
           :native-scrollbar="false"
           @mouseover="mouseOverLayout"
@@ -131,7 +131,6 @@
 import { useDebounceFn } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import LyricSettings from '@/components/lyric/LyricSettings.vue';
 import {
@@ -143,6 +142,8 @@ import {
   textColors,
   useLyricProgress
 } from '@/hooks/MusicHook';
+import { usePlayerStore } from '@/store';
+import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
 
@@ -372,13 +373,14 @@ onBeforeUnmount(() => {
   }
 });
 
-const store = useStore();
+const settingsStore = useSettingsStore();
+
 const handleArtistClick = (id: number) => {
   isVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };
 
-const setData = computed(() => store.state.setData);
+const setData = computed(() => settingsStore.setData);
 
 // 监听字体变化并更新 CSS 变量
 watch(
@@ -431,6 +433,13 @@ const handleScroll = () => {
   showStickyHeader.value = scrollTop > 100;
 };
 
+const playerStore = usePlayerStore();
+
+const closeMusicFull = () => {
+  isVisible.value = false;
+  playerStore.setMusicFull(false);
+};
+
 // 添加滚动监听
 onMounted(() => {
   if (lrcSider.value?.$el) {
@@ -647,12 +656,18 @@ defineExpose({
       span {
         padding-right: 0px !important;
       }
-    }
-    .music-lrc-text {
-      @apply text-xl text-center;
+      .hover-text {
+        &:hover {
+          background-color: transparent;
+        }
+      }
+      .music-lrc-text {
+        @apply text-xl text-center;
+      }
     }
     .music-content {
       @apply h-[calc(100vh-120px)];
+      width: 100vw !important;
     }
   }
 }
@@ -663,8 +678,9 @@ defineExpose({
 
 // 添加全局字体样式
 :root {
-  --current-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
+  --current-font-family:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
 }
 
 #drawer-target {
@@ -686,7 +702,7 @@ defineExpose({
 }
 
 .control-btn {
-  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300;
+  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
   background: rgba(142, 142, 142, 0.192);
   backdrop-filter: blur(12px);
 

src/renderer/layout/components/PlayBar.vue

@@ -13,7 +13,7 @@
         ? textColors.theme === 'dark'
           ? '#000000'
           : '#ffffff'
-        : store.state.theme === 'dark'
+        : settingsStore.theme === 'dark'
           ? '#ffffff'
           : '#000000'
     }"
@@ -113,12 +113,32 @@
         <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>
-        {{ t('player.playBar.lyric') }}
+        {{ 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"
@@ -158,9 +178,9 @@
 import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
+import EqControl from '@/components/EQControl.vue';
 import {
   allTime,
   artistList,
@@ -172,23 +192,26 @@ import {
   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, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 import { showShortcutToast } from '@/utils/shortcutToast';
 
 import MusicFull from './MusicFull.vue';
 
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
 const { t } = useI18n();
 // 是否播放
-const play = computed(() => store.state.play as boolean);
+const play = computed(() => playerStore.isPlay);
 // 播放列表
-const playList = computed(() => store.state.playList as SongResult[]);
+const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');
 
 watch(
-  () => store.state.playMusic,
+  () => playerStore.playMusic,
   async () => {
     background.value = playMusic.value.backgroundColor as string;
   },
@@ -247,7 +270,7 @@ const mute = () => {
 };
 
 // 播放模式
-const playMode = computed(() => store.state.playMode);
+const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
   switch (playMode.value) {
     case 0:
@@ -275,15 +298,15 @@ const playModeText = computed(() => {
 
 // 切换播放模式
 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);
@@ -292,9 +315,9 @@ const MusicFullRef = ref<any>(null);
 const playMusicEvent = async () => {
   try {
     // 检查是否有有效的音乐对象和 URL
-    if (!playMusic.value?.id || !store.state.playMusicUrl) {
+    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
       console.warn('No valid music or URL available');
-      store.commit('setPlay', playMusic.value);
+      playerStore.setPlay(playMusic.value);
       return;
     }
 
@@ -302,7 +325,7 @@ const playMusicEvent = async () => {
       // 暂停播放
       if (audioService.getCurrentSound()) {
         audioService.pause();
-        store.commit('setPlayMusic', false);
+        playerStore.setPlayMusic(false);
       }
     } else {
       // 开始播放
@@ -311,13 +334,13 @@ const playMusicEvent = async () => {
         audioService.play();
       } else {
         // 如果没有音频实例，重新创建并播放
-        await audioService.play(store.state.playMusicUrl, playMusic.value);
+        await audioService.play(playerStore.playMusicUrl, playMusic.value);
       }
-      store.commit('setPlayMusic', true);
+      playerStore.setPlayMusic(true);
     }
   } catch (error) {
     console.error('播放出错:', error);
-    store.commit('nextPlay');
+    playerStore.nextPlay();
   }
 };
 
@@ -326,31 +349,31 @@ const musicFullVisible = ref(false);
 // 设置musicFull
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
-  store.commit('setMusicFull', musicFullVisible.value);
+  playerStore.setMusicFull(musicFullVisible.value);
   if (musicFullVisible.value) {
-    store.commit('setShowArtistDrawer', false);
+    settingsStore.showArtistDrawer = false;
   }
 };
 
-const palyListRef = useTemplateRef('palyListRef');
+const palyListRef = useTemplateRef('palyListRef') as any;
 
 const scrollToPlayList = (val: boolean) => {
   if (!val) return;
   setTimeout(() => {
-    palyListRef.value?.scrollTo({ top: store.state.playListIndex * 62 });
+    palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
   }, 50);
 };
 
 const isFavorite = computed(() => {
-  return store.state.favoriteList.includes(playMusic.value.id);
+  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);
   }
 };
 
@@ -360,7 +383,7 @@ const openLyricWindow = () => {
 
 const handleArtistClick = (id: number) => {
   musicFullVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };
 
 // 添加全局快捷键处理
@@ -371,8 +394,8 @@ if (isElectron) {
       case 'togglePlay':
         playMusicEvent();
         showShortcutToast(
-          store.state.play ? t('player.playBar.play') : t('player.playBar.pause'),
-          store.state.play ? 'ri-pause-circle-line' : 'ri-play-circle-line'
+          play.value ? t('player.playBar.play') : t('player.playBar.pause'),
+          play.value ? 'ri-pause-circle-line' : 'ri-play-circle-line'
         );
         break;
       case 'prevPlay':
@@ -426,6 +449,8 @@ watch(
     }
   }
 );
+
+const isEQVisible = ref(false);
 </script>
 
 <style lang="scss" scoped>
@@ -542,7 +567,7 @@ watch(
 
 .mobile {
   .music-play-bar {
-    @apply px-4 bottom-[70px] transition-all duration-300;
+    @apply px-4 bottom-[56px] transition-all duration-300;
   }
   .music-time {
     display: none;
@@ -655,6 +680,13 @@ watch(
   @apply text-red-500 hover:text-red-600 !important;
 }
 
+.disabled-icon {
+  @apply opacity-50 cursor-not-allowed !important;
+  &:hover {
+    @apply text-inherit !important;
+  }
+}
+
 .icon-loop,
 .icon-single-loop {
   font-size: 1.5rem;
@@ -667,4 +699,10 @@ watch(
   padding: 0;
   border-radius: 0;
 }
+
+.music-eq {
+  @apply p-4 rounded-3xl;
+  backdrop-filter: blur(20px);
+  @apply bg-light dark:bg-black bg-opacity-75;
+}
 </style>

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,11 +28,11 @@
       <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">
@@ -41,16 +41,16 @@
         </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>{{ t('comp.searchBar.toLogin') }}</span>
           </div>
-          <div v-if="store.state.user" class="menu-item" @click="selectItem('logout')">
+          <div v-if="userStore.user" class="menu-item" @click="selectItem('logout')">
             <i class="iconfont ri-logout-box-r-line"></i>
             <span>{{ t('comp.searchBar.logout') }}</span>
           </div>
@@ -60,9 +60,9 @@
             <span>{{ t('comp.searchBar.set') }}</span>
           </div>
           <div class="menu-item">
-            <i class="iconfont" :class="isDarkTheme ? 'ri-moon-line' : 'ri-sun-line'"></i>
+            <i class="iconfont" :class="isDark ? 'ri-moon-line' : 'ri-sun-line'"></i>
             <span>{{ t('comp.searchBar.theme') }}</span>
-            <n-switch v-model:value="isDarkTheme" class="ml-auto">
+            <n-switch v-model:value="isDark" class="ml-auto">
               <template #checked>
                 <i class="ri-moon-line"></i>
               </template>
@@ -105,7 +105,6 @@
 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 } from '@/api/login';
@@ -113,13 +112,18 @@ 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();
 
@@ -137,15 +141,15 @@ const loadPage = async () => {
   if (!token) return;
   const { data } = await getUserDetail();
   console.log('data', data);
-  store.state.user =
-    data.profile || store.state.user || JSON.parse(localStorage.getItem('user') || '{}');
-  localStorage.setItem('user', JSON.stringify(store.state.user));
+  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');
@@ -167,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()
 });
 
 // 搜索词
@@ -182,7 +186,7 @@ const search = () => {
   }
 
   if (router.currentRoute.value.path === '/search') {
-    store.state.searchValue = value;
+    searchStore.searchValue = value;
     return;
   }
 
@@ -190,13 +194,13 @@ const search = () => {
     path: '/search',
     query: {
       keyword: value,
-      type: store.state.searchType
+      type: searchStore.searchType
     }
   });
 };
 
 const selectSearchType = (key: number) => {
-  store.state.searchType = key;
+  searchStore.searchType = key;
   if (searchValue.value) {
     search();
   }
@@ -208,7 +212,7 @@ const selectItem = async (key: string) => {
   // switch 判断
   switch (key) {
     case 'logout':
-      store.commit('logout');
+      userStore.handleLogout();
       break;
     case 'login':
       router.push('/login');
@@ -227,7 +231,7 @@ const selectItem = async (key: string) => {
 };
 
 const toGithub = () => {
-  window.open('https://github.com/algerkong/AlgerMusicPlayer', '_blank');
+  window.open('http://donate.alger.fun', '_blank');
 };
 
 const updateInfo = ref<UpdateResult>({
@@ -250,7 +254,7 @@ const checkForUpdates = async () => {
 
 const toGithubRelease = () => {
   if (updateInfo.value.hasUpdate) {
-    store.commit('setShowUpdateModal', true);
+    settingsStore.showUpdateModal = true;
   } else {
     window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
   }

src/renderer/layout/components/TitleBar.vue

@@ -2,19 +2,32 @@
   <div id="title-bar" @mousedown="drag">
     <div id="title">Alger Music</div>
     <div id="buttons">
-      <div class="button" @click="minimize">
-        <i class="iconfont icon-minisize"></i>
-      </div>
-      <div class="button" @click="close">
-        <i class="iconfont icon-close"></i>
-      </div>
+      <n-button
+        v-if="!isElectron"
+        type="primary"
+        size="small"
+        text
+        title="下载应用"
+        @click="openDownloadPage"
+      >
+        <i class="ri-download-line"></i>
+        下载桌面版
+      </n-button>
+      <template v-if="isElectron">
+        <div class="button" @click="minimize">
+          <i class="iconfont icon-minisize"></i>
+        </div>
+        <div class="button" @click="handleClose">
+          <i class="iconfont icon-close"></i>
+        </div>
+      </template>
     </div>
   </div>
 
   <n-modal
     v-model:show="showCloseModal"
     preset="dialog"
-    title="关闭应用"
+    :title="t('comp.titleBar.closeApp')"
     :style="{ width: '400px' }"
     :mask-closable="true"
   >
@@ -42,16 +55,22 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';
 
 const { t } = useI18n();
 
-const store = useStore();
+const settingsStore = useSettingsStore();
 const showCloseModal = ref(false);
 const rememberChoice = ref(false);
 
+const openDownloadPage = () => {
+  if (!isElectron) {
+    window.open('http://donate.alger.fun/download', '_blank');
+  }
+};
+
 const minimize = () => {
   if (!isElectron) {
     return;
@@ -61,38 +80,30 @@ const minimize = () => {
 
 const handleAction = (action: 'minimize' | 'close') => {
   if (rememberChoice.value) {
-    store.commit('setSetData', {
-      ...store.state.setData,
+    settingsStore.setSetData({
+      ...settingsStore.setData,
       closeAction: action
     });
   }
 
   if (action === 'minimize') {
-    window.api.miniTray();
+    window.api.minimize();
   } else {
     window.api.close();
   }
   showCloseModal.value = false;
 };
 
-const close = () => {
-  if (!isElectron) {
-    return;
-  }
-
-  const { closeAction } = store.state.setData;
+const handleClose = () => {
+  const { closeAction } = settingsStore.setData;
 
   if (closeAction === 'minimize') {
-    window.api.miniTray();
-    return;
-  }
-
-  if (closeAction === 'close') {
+    window.api.minimize();
+  } else if (closeAction === 'close') {
     window.api.close();
-    return;
+  } else {
+    showCloseModal.value = true;
   }
-
-  showCloseModal.value = true;
 };
 
 const drag = (event: MouseEvent) => {

src/renderer/main.ts

@@ -1,6 +1,3 @@
-import 'vfonts/Lato.css';
-import 'vfonts/FiraCode.css';
-// tailwind css
 import './index.css';
 import 'animate.css';
 import 'remixicon/fonts/remixicon.css';
@@ -9,7 +6,7 @@ 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';
@@ -20,7 +17,7 @@ Object.keys(directives).forEach((key: string) => {
   app.directive(key, directives[key as keyof typeof directives]);
 });
 
+app.use(pinia);
 app.use(router);
-app.use(store);
 app.use(i18n);
 app.mount('#app');

src/renderer/services/audioService.ts

@@ -1,16 +1,49 @@
-import { Howl } from 'howler';
+import { Howl, Howler } from 'howler';
 
 import type { SongResult } from '@/type/music';
+import { isElectron } from '@/utils'; // 导入isElectron常量
 
 class AudioService {
   private currentSound: Howl | null = null;
 
   private currentTrack: SongResult | null = null;
 
+  private context: AudioContext | null = null;
+
+  private filters: BiquadFilterNode[] = [];
+
+  private source: MediaElementAudioSourceNode | null = null;
+
+  private gainNode: GainNode | null = null;
+
+  private bypass = false;
+
+  // 预设的 EQ 频段
+  private readonly frequencies = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
+
+  // 默认的 EQ 设置
+  private defaultEQSettings: { [key: string]: number } = {
+    '31': 0,
+    '62': 0,
+    '125': 0,
+    '250': 0,
+    '500': 0,
+    '1000': 0,
+    '2000': 0,
+    '4000': 0,
+    '8000': 0,
+    '16000': 0
+  };
+
+  private retryCount = 0;
+
   constructor() {
     if ('mediaSession' in navigator) {
       this.initMediaSession();
     }
+    // 从本地存储加载 EQ 开关状态
+    const bypassState = localStorage.getItem('eqBypass');
+    this.bypass = bypassState ? JSON.parse(bypassState) : false;
   }
 
   private initMediaSession() {
@@ -120,8 +153,206 @@ class AudioService {
     }
   }
 
+  // EQ 相关方法
+  public isEQEnabled(): boolean {
+    return !this.bypass;
+  }
+
+  public setEQEnabled(enabled: boolean) {
+    this.bypass = !enabled;
+    localStorage.setItem('eqBypass', JSON.stringify(this.bypass));
+
+    if (this.source && this.gainNode && this.context) {
+      this.applyBypassState();
+    }
+  }
+
+  public setEQFrequencyGain(frequency: string, gain: number) {
+    const filterIndex = this.frequencies.findIndex((f) => f.toString() === frequency);
+    if (filterIndex !== -1 && this.filters[filterIndex]) {
+      this.filters[filterIndex].gain.setValueAtTime(gain, this.context?.currentTime || 0);
+      this.saveEQSettings(frequency, gain);
+    }
+  }
+
+  public resetEQ() {
+    this.filters.forEach((filter) => {
+      filter.gain.setValueAtTime(0, this.context?.currentTime || 0);
+    });
+    localStorage.removeItem('eqSettings');
+  }
+
+  public getAllEQSettings(): { [key: string]: number } {
+    return this.loadEQSettings();
+  }
+
+  private saveEQSettings(frequency: string, gain: number) {
+    const settings = this.loadEQSettings();
+    settings[frequency] = gain;
+    localStorage.setItem('eqSettings', JSON.stringify(settings));
+  }
+
+  private loadEQSettings(): { [key: string]: number } {
+    const savedSettings = localStorage.getItem('eqSettings');
+    return savedSettings ? JSON.parse(savedSettings) : { ...this.defaultEQSettings };
+  }
+
+  private async disposeEQ(keepContext = false) {
+    try {
+      // 清理音频节点连接
+      if (this.source) {
+        this.source.disconnect();
+        this.source = null;
+      }
+
+      // 清理滤波器
+      this.filters.forEach((filter) => {
+        try {
+          filter.disconnect();
+        } catch (e) {
+          console.warn('清理滤波器时出错:', e);
+        }
+      });
+      this.filters = [];
+
+      // 清理增益节点
+      if (this.gainNode) {
+        this.gainNode.disconnect();
+        this.gainNode = null;
+      }
+
+      // 如果不需要保持上下文，则关闭它
+      if (!keepContext && this.context) {
+        try {
+          await this.context.close();
+          this.context = null;
+        } catch (e) {
+          console.warn('关闭音频上下文时出错:', e);
+        }
+      }
+    } catch (error) {
+      console.error('清理EQ资源时出错:', error);
+    }
+  }
+
+  private async setupEQ(sound: Howl) {
+    try {
+      if (!isElectron) {
+        console.log('Web环境中跳过EQ设置，避免CORS问题');
+        this.bypass = true;
+        return;
+      }
+      const howl = sound as any;
+      // eslint-disable-next-line no-underscore-dangle
+      const audioNode = howl._sounds?.[0]?._node;
+
+      if (!audioNode || !(audioNode instanceof HTMLMediaElement)) {
+        if (this.retryCount < 3) {
+          console.warn('等待音频节点初始化，重试次数:', this.retryCount + 1);
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          this.retryCount++;
+          return await this.setupEQ(sound);
+        }
+        throw new Error('无法获取音频节点，请重试');
+      }
+
+      this.retryCount = 0;
+
+      // 确保使用 Howler 的音频上下文
+      this.context = Howler.ctx as AudioContext;
+
+      if (!this.context || this.context.state === 'closed') {
+        Howler.ctx = new AudioContext();
+        this.context = Howler.ctx;
+        Howler.masterGain = this.context.createGain();
+        Howler.masterGain.connect(this.context.destination);
+      }
+
+      if (this.context.state === 'suspended') {
+        await this.context.resume();
+      }
+
+      // 清理现有连接
+      await this.disposeEQ(true);
+
+      try {
+        // 检查节点是否已经有源
+        const existingSource = (audioNode as any).source as MediaElementAudioSourceNode;
+        if (existingSource?.context === this.context) {
+          console.log('复用现有音频源节点');
+          this.source = existingSource;
+        } else {
+          // 创建新的源节点
+          console.log('创建新的音频源节点');
+          this.source = this.context.createMediaElementSource(audioNode);
+          (audioNode as any).source = this.source;
+        }
+      } catch (e) {
+        console.error('创建音频源节点失败:', e);
+        throw e;
+      }
+
+      // 创建增益节点
+      this.gainNode = this.context.createGain();
+
+      // 创建滤波器
+      this.filters = this.frequencies.map((freq) => {
+        const filter = this.context!.createBiquadFilter();
+        filter.type = 'peaking';
+        filter.frequency.value = freq;
+        filter.Q.value = 1;
+        filter.gain.value = this.loadEQSettings()[freq.toString()] || 0;
+        return filter;
+      });
+
+      // 应用EQ状态
+      this.applyBypassState();
+
+      // 设置音量
+      const volume = localStorage.getItem('volume');
+      if (this.gainNode) {
+        this.gainNode.gain.value = volume ? parseFloat(volume) : 1;
+      }
+
+      console.log('EQ初始化成功');
+    } catch (error) {
+      console.error('EQ初始化失败:', error);
+      await this.disposeEQ();
+      throw error;
+    }
+  }
+
+  private applyBypassState() {
+    if (!this.source || !this.gainNode || !this.context) return;
+
+    try {
+      // 断开所有现有连接
+      this.source.disconnect();
+      this.filters.forEach((filter) => filter.disconnect());
+      this.gainNode.disconnect();
+
+      if (this.bypass) {
+        // EQ被禁用时，直接连接到输出
+        this.source.connect(this.gainNode);
+        this.gainNode.connect(this.context.destination);
+      } else {
+        // EQ启用时，通过滤波器链连接
+        this.source.connect(this.filters[0]);
+        this.filters.forEach((filter, index) => {
+          if (index < this.filters.length - 1) {
+            filter.connect(this.filters[index + 1]);
+          }
+        });
+        this.filters[this.filters.length - 1].connect(this.gainNode);
+        this.gainNode.connect(this.context.destination);
+      }
+    } catch (error) {
+      console.error('应用EQ状态时出错:', error);
+    }
+  }
+
   // 播放控制相关
-  play(url?: string, track?: SongResult): Promise<Howl> {
+  play(url?: string, track?: SongResult, isPlay: boolean = true): Promise<Howl> {
     // 如果没有提供新的 URL 和 track，且当前有音频实例，则继续播放
     if (this.currentSound && !url && !track) {
       this.currentSound.play();
@@ -137,19 +368,49 @@ class AudioService {
       let retryCount = 0;
       const maxRetries = 1;
 
-      const tryPlay = () => {
-        // 清理现有的音频实例
-        if (this.currentSound) {
-          this.currentSound.unload();
-          this.currentSound = null;
-        }
-
+      const tryPlay = async () => {
         try {
+          console.log('audioService: 开始创建音频对象');
+
+          // 确保 Howler 上下文已初始化
+          if (!Howler.ctx) {
+            console.log('audioService: 初始化 Howler 上下文');
+            Howler.ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
+          }
+
+          // 确保使用同一个音频上下文
+          if (Howler.ctx.state === 'closed') {
+            console.log('audioService: 重新创建音频上下文');
+            Howler.ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
+            this.context = Howler.ctx;
+            Howler.masterGain = this.context.createGain();
+            Howler.masterGain.connect(this.context.destination);
+          }
+
+          // 恢复上下文状态
+          if (Howler.ctx.state === 'suspended') {
+            console.log('audioService: 恢复暂停的音频上下文');
+            await Howler.ctx.resume();
+          }
+
+          // 先停止并清理现有的音频实例
+          if (this.currentSound) {
+            console.log('audioService: 停止并清理现有的音频实例');
+            this.currentSound.stop();
+            this.currentSound.unload();
+            this.currentSound = null;
+          }
+
+          // 清理 EQ 但保持上下文
+          console.log('audioService: 清理 EQ');
+          await this.disposeEQ(true);
+
           this.currentTrack = track;
+          console.log('audioService: 创建新的 Howl 对象');
           this.currentSound = new Howl({
             src: [url],
             html5: true,
-            autoplay: true,
+            autoplay: false, // 修改为 false，不自动播放，等待完全初始化后手动播放
             volume: localStorage.getItem('volume')
               ? parseFloat(localStorage.getItem('volume') as string)
               : 1,
@@ -174,13 +435,32 @@ class AudioService {
                 reject(new Error('音频播放失败，请尝试切换其他歌曲'));
               }
             },
-            onload: () => {
-              // 音频加载成功后更新媒体会话
-              if (track && this.currentSound) {
-                this.updateMediaSessionMetadata(track);
-                this.updateMediaSessionPositionState();
-                this.emit('load');
-                resolve(this.currentSound);
+            onload: async () => {
+              // 音频加载成功后设置 EQ 和更新媒体会话
+              if (this.currentSound) {
+                try {
+                  console.log('audioService: 音频加载成功，设置 EQ');
+                  await this.setupEQ(this.currentSound);
+                  this.updateMediaSessionMetadata(track);
+                  this.updateMediaSessionPositionState();
+                  this.emit('load');
+
+                  // 此时音频已完全初始化，根据 isPlay 参数决定是否播放
+                  console.log('audioService: 音频完全初始化，isPlay =', isPlay);
+                  if (isPlay) {
+                    console.log('audioService: 开始播放');
+                    this.currentSound.play();
+                  }
+
+                  resolve(this.currentSound);
+                } catch (error) {
+                  console.error('设置 EQ 失败:', error);
+                  // 即使 EQ 设置失败，也继续播放（如果需要）
+                  if (isPlay) {
+                    this.currentSound.play();
+                  }
+                  resolve(this.currentSound);
+                }
               }
             }
           });
@@ -238,6 +518,7 @@ class AudioService {
     if ('mediaSession' in navigator) {
       navigator.mediaSession.playbackState = 'none';
     }
+    this.disposeEQ();
   }
 
   setVolume(volume: number) {
@@ -267,6 +548,14 @@ class AudioService {
   clearAllListeners() {
     this.callbacks = {};
   }
+
+  public getCurrentPreset(): string | null {
+    return localStorage.getItem('currentPreset');
+  }
+
+  public setCurrentPreset(preset: string): void {
+    localStorage.setItem('currentPreset', preset);
+  }
 }
 
 export const audioService = new AudioService();

src/renderer/services/eqService.ts

@@ -0,0 +1,186 @@
+import { Howl, Howler } from 'howler';
+import Tuna from 'tunajs';
+
+// 类型定义扩展
+interface HowlSound {
+  _sounds: Array<{
+    _node: HTMLMediaElement & {
+      destination?: MediaElementAudioSourceNode;
+    };
+  }>;
+}
+
+export interface EQSettings {
+  [key: string]: number;
+}
+
+export class EQService {
+  private context: AudioContext | null = null;
+
+  private tuna: any = null;
+
+  private equalizer: any = null;
+
+  private source: MediaElementAudioSourceNode | null = null;
+
+  private gainNode: GainNode | null = null;
+
+  private bypass = false;
+
+  // 预设频率
+  private readonly frequencies = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
+
+  // 默认EQ设置
+  private defaultEQSettings: EQSettings = Object.fromEntries(
+    this.frequencies.map((f) => [f.toString(), 0])
+  );
+
+  constructor() {
+    this.loadSavedSettings();
+    this.bypass = localStorage.getItem('eqBypass') === 'true';
+    this.initializeUserGestureHandler();
+  }
+
+  // 初始化用户手势处理
+  private initializeUserGestureHandler() {
+    const handler = async () => {
+      if (this.context?.state === 'suspended') {
+        await this.context.resume();
+      }
+      document.removeEventListener('click', handler);
+    };
+    document.addEventListener('click', handler);
+  }
+
+  // 初始化音频上下文
+  public async setupAudioContext(howl: Howl) {
+    try {
+      // 使用Howler的现有上下文
+      this.context = (Howler.ctx as AudioContext) || new AudioContext();
+
+      // 初始化Howler的音频系统（如果需要）
+      if (!Howler.ctx) {
+        Howler.ctx = this.context;
+        Howler.masterGain = this.context.createGain();
+        Howler.masterGain.connect(this.context.destination);
+      }
+
+      // 确保上下文处于运行状态
+      if (this.context.state === 'suspended') {
+        await this.context.resume();
+      }
+
+      const sound = (howl as unknown as HowlSound)._sounds[0];
+      if (!sound?._node) throw new Error('无法获取音频节点');
+
+      // 清理现有资源
+      await this.dispose();
+
+      // 创建新的处理链
+      this.tuna = new Tuna(this.context);
+
+      // 创建/复用源节点
+      if (!sound._node.destination) {
+        this.source = this.context.createMediaElementSource(sound._node);
+        sound._node.destination = this.source;
+      } else {
+        this.source = sound._node.destination;
+      }
+
+      // 创建效果节点
+      this.gainNode = this.context.createGain();
+      this.equalizer = new this.tuna.Equalizer({
+        frequencies: this.frequencies,
+        gains: this.frequencies.map((f) => this.getSavedGain(f.toString())),
+        bypass: this.bypass
+      });
+
+      // 连接节点链
+      this.source!.connect(this.equalizer.input).connect(this.gainNode).connect(Howler.masterGain);
+
+      // 恢复音量设置
+      const volume = localStorage.getItem('volume');
+      this.gainNode.gain.value = volume ? parseFloat(volume) : 1;
+    } catch (error) {
+      console.error('音频上下文初始化失败:', error);
+      await this.dispose();
+      throw error;
+    }
+  }
+
+  // EQ功能开关
+  public setEnabled(enabled: boolean) {
+    this.bypass = !enabled;
+    localStorage.setItem('eqBypass', JSON.stringify(this.bypass));
+    if (this.equalizer) this.equalizer.bypass = this.bypass;
+  }
+
+  public isEnabled(): boolean {
+    return !this.bypass;
+  }
+
+  // 调整频率增益
+  public setFrequencyGain(frequency: string, gain: number) {
+    const index = this.frequencies.findIndex((f) => f.toString() === frequency);
+    if (index !== -1 && this.equalizer) {
+      this.equalizer.setGain(index, gain);
+      this.saveSettings(frequency, gain);
+    }
+  }
+
+  // 重置EQ设置
+  public resetEQ() {
+    this.frequencies.forEach((f) => {
+      this.setFrequencyGain(f.toString(), 0);
+    });
+    localStorage.removeItem('eqSettings');
+  }
+
+  // 获取当前设置
+  public getAllSettings(): EQSettings {
+    return this.loadSavedSettings();
+  }
+
+  // 保存/加载设置
+  private saveSettings(frequency: string, gain: number) {
+    const settings = this.loadSavedSettings();
+    settings[frequency] = gain;
+    localStorage.setItem('eqSettings', JSON.stringify(settings));
+  }
+
+  private loadSavedSettings(): EQSettings {
+    const saved = localStorage.getItem('eqSettings');
+    return saved ? JSON.parse(saved) : { ...this.defaultEQSettings };
+  }
+
+  private getSavedGain(frequency: string): number {
+    return this.loadSavedSettings()[frequency] || 0;
+  }
+
+  // 清理资源
+  public async dispose() {
+    try {
+      [this.source, this.equalizer, this.gainNode].forEach((node) => {
+        if (node) {
+          node.disconnect();
+          // 特殊清理Tuna节点
+          if (node instanceof Tuna.Equalizer) node.destroy();
+        }
+      });
+
+      if (this.context && this.context !== Howler.ctx) {
+        await this.context.close();
+      }
+
+      this.context = null;
+      this.tuna = null;
+      this.source = null;
+      this.equalizer = null;
+      this.gainNode = null;
+    } catch (error) {
+      console.error('资源清理失败:', error);
+    }
+  }
+}
+
+export const eqService = new EQService();

src/renderer/store/index.ts

@@ -1,391 +1,20 @@
-import { createStore } from 'vuex';
+import { createPinia } from 'pinia';
+import router from '@/router';
 
-import setData from '@/../main/set.json';
-import { logout } from '@/api/login';
-import { getLikedList, likeSong } from '@/api/music';
-import { useMusicListHook } from '@/hooks/MusicListHook';
-import homeRouter from '@/router/home';
-import type { SongResult } from '@/type/music';
-import { isElectron } from '@/utils';
-import { applyTheme, getCurrentTheme, ThemeType } from '@/utils/theme';
+// 创建 pinia 实例
+const pinia = createPinia();
 
-// 默认设置
-const defaultSettings = setData;
-
-function isValidUrl(urlString: string): boolean {
-  try {
-    return Boolean(new URL(urlString));
-  } catch (e) {
-    return false;
-  }
-}
-
-function getLocalStorageItem<T>(key: string, defaultValue: T): T {
-  try {
-    const item = localStorage.getItem(key);
-    if (!item) return defaultValue;
-
-    // 尝试解析 JSON
-    const parsedItem = JSON.parse(item);
-
-    // 对于音乐 URL，检查是否是有效的 URL 格式或本地文件路径
-    if (key === 'currentPlayMusicUrl' && typeof parsedItem === 'string') {
-      if (!parsedItem.startsWith('local://') && !isValidUrl(parsedItem)) {
-        console.warn(`Invalid URL in localStorage for key ${key}, using default value`);
-        localStorage.removeItem(key);
-        return defaultValue;
-      }
-    }
-
-    // 对于播放列表，检查是否是数组且每个项都有必要的字段
-    if (key === 'playList') {
-      if (!Array.isArray(parsedItem)) {
-        console.warn(`Invalid playList format in localStorage, using default value`);
-        localStorage.removeItem(key);
-        return defaultValue;
-      }
-      // 检查每个歌曲对象是否有必要的字段
-      const isValid = parsedItem.every((item) => item && typeof item === 'object' && 'id' in item);
-      if (!isValid) {
-        console.warn(`Invalid song objects in playList, using default value`);
-        localStorage.removeItem(key);
-        return defaultValue;
-      }
-    }
-
-    // 对于当前播放音乐，检查是否是对象且包含必要的字段
-    if (key === 'currentPlayMusic') {
-      if (!parsedItem || typeof parsedItem !== 'object' || !('id' in parsedItem)) {
-        console.warn(`Invalid currentPlayMusic format in localStorage, using default value`);
-        localStorage.removeItem(key);
-        return defaultValue;
-      }
-    }
-
-    return parsedItem;
-  } catch (error) {
-    console.warn(`Error parsing localStorage item for key ${key}:`, error);
-    // 如果解析失败，删除可能损坏的数据
-    localStorage.removeItem(key);
-    return defaultValue;
-  }
-}
-
-export interface State {
-  menus: any[];
-  play: boolean;
-  isPlay: boolean;
-  playMusic: SongResult;
-  playMusicUrl: string;
-  user: any;
-  playList: SongResult[];
-  playListIndex: number;
-  setData: typeof defaultSettings;
-  lyric: any;
-  isMobile: boolean;
-  searchValue: string;
-  searchType: number;
-  favoriteList: number[];
-  playMode: number;
-  theme: ThemeType;
-  musicFull: boolean;
-  showUpdateModal: boolean;
-  showArtistDrawer: boolean;
-  currentArtistId: number | null;
-  systemFonts: { label: string; value: string }[];
-  showDownloadDrawer: boolean;
-}
-
-const state: State = {
-  menus: homeRouter,
-  play: false,
-  isPlay: false,
-  playMusic: getLocalStorageItem('currentPlayMusic', {} as SongResult),
-  playMusicUrl: getLocalStorageItem('currentPlayMusicUrl', ''),
-  user: getLocalStorageItem('user', null),
-  playList: getLocalStorageItem('playList', []),
-  playListIndex: getLocalStorageItem('playListIndex', 0),
-  setData: defaultSettings,
-  lyric: {},
-  isMobile: false,
-  searchValue: '',
-  searchType: 1,
-  favoriteList: getLocalStorageItem('favoriteList', []),
-  playMode: getLocalStorageItem('playMode', 0),
-  theme: getCurrentTheme(),
-  musicFull: false,
-  showUpdateModal: false,
-  showArtistDrawer: false,
-  currentArtistId: null,
-  systemFonts: [{ label: '系统默认', value: 'system-ui' }],
-  showDownloadDrawer: false
-};
-
-const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
-
-const mutations = {
-  setMenus(state: State, menus: any[]) {
-    state.menus = menus;
-  },
-  async setPlay(state: State, playMusic: SongResult) {
-    await handlePlayMusic(state, playMusic);
-    localStorage.setItem('currentPlayMusic', JSON.stringify(state.playMusic));
-    localStorage.setItem('currentPlayMusicUrl', state.playMusicUrl);
-  },
-  setIsPlay(state: State, isPlay: boolean) {
-    state.isPlay = isPlay;
-    localStorage.setItem('isPlaying', isPlay.toString());
-  },
-  async setPlayMusic(state: State, play: boolean) {
-    state.play = play;
-    localStorage.setItem('isPlaying', play.toString());
-  },
-  setMusicFull(state: State, musicFull: boolean) {
-    state.musicFull = musicFull;
-  },
-  setPlayList(state: State, playList: SongResult[]) {
-    state.playListIndex = playList.findIndex((item) => item.id === state.playMusic.id);
-    state.playList = playList;
-    localStorage.setItem('playList', JSON.stringify(playList));
-    localStorage.setItem('playListIndex', state.playListIndex.toString());
-  },
-  async nextPlay(state: State) {
-    await nextPlay(state);
-  },
-  async prevPlay(state: State) {
-    await prevPlay(state);
-  },
-  // 添加到下一首播放
-  addToNextPlay(state: State, song: SongResult) {
-    const playList = [...state.playList];
-    const currentIndex = state.playListIndex;
-
-    // 检查歌曲是否已经在播放列表中
-    const existingIndex = playList.findIndex((item) => item.id === song.id);
-    if (existingIndex !== -1) {
-      // 如果歌曲已经在列表中，将其移动到当前播放歌曲的下一个位置
-      playList.splice(existingIndex, 1);
-    }
-
-    // 在当前播放歌曲后插入新歌曲
-    playList.splice(currentIndex + 1, 0, song);
-
-    // 更新播放列表
-    state.playList = playList;
-    state.playListIndex = playList.findIndex((item) => item.id === state.playMusic.id);
-    localStorage.setItem('playList', JSON.stringify(playList));
-    localStorage.setItem('playListIndex', state.playListIndex.toString());
-  },
-  setSetData(state: State, setData: any) {
-    state.setData = setData;
-    if (isElectron) {
-      // (window as any).electron.ipcRenderer.setStoreValue(
-      //   'set',
-      //   JSON.parse(JSON.stringify(setData))
-      // );
-      window.electron.ipcRenderer.send(
-        'set-store-value',
-        'set',
-        JSON.parse(JSON.stringify(setData))
-      );
-    } else {
-      localStorage.setItem('appSettings', JSON.stringify(setData));
-    }
-  },
-  async addToFavorite(state: State, songId: number) {
-    // 先添加到本地
-    if (!state.favoriteList.includes(songId)) {
-      state.favoriteList = [songId, ...state.favoriteList];
-      localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
-    }
-
-    // 如果用户已登录，尝试同步到服务器
-    if (state.user && localStorage.getItem('token')) {
-      try {
-        await likeSong(songId, true);
-      } catch (error) {
-        console.error('同步收藏到服务器失败，但已保存在本地:', error);
-      }
-    }
-  },
-  async removeFromFavorite(state: State, songId: number) {
-    // 先从本地移除
-    state.favoriteList = state.favoriteList.filter((id) => id !== songId);
-    localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
-
-    // 如果用户已登录，尝试同步到服务器
-    if (state.user && localStorage.getItem('token')) {
-      try {
-        await likeSong(songId, false);
-      } catch (error) {
-        console.error('同步取消收藏到服务器失败，但已在本地移除:', error);
-      }
-    }
-  },
-  togglePlayMode(state: State) {
-    state.playMode = (state.playMode + 1) % 3;
-    localStorage.setItem('playMode', JSON.stringify(state.playMode));
-  },
-  toggleTheme(state: State) {
-    state.theme = state.theme === 'dark' ? 'light' : 'dark';
-    applyTheme(state.theme);
-  },
-  setShowUpdateModal(state, value) {
-    state.showUpdateModal = value;
-  },
-  logout(state: State) {
-    logout().then(() => {
-      state.user = null;
-      localStorage.removeItem('user');
-      localStorage.removeItem('token');
-    });
-  },
-  setShowArtistDrawer(state, show: boolean) {
-    state.showArtistDrawer = show;
-    if (!show) {
-      state.currentArtistId = null;
-    }
-  },
-  setCurrentArtistId(state, id: number) {
-    state.currentArtistId = id;
-  },
-  setSystemFonts(state, fonts: string[]) {
-    state.systemFonts = [
-      { label: '系统默认', value: 'system-ui' },
-      ...fonts.map((font) => ({
-        label: font,
-        value: font
-      }))
-    ];
-  },
-  setShowDownloadDrawer(state: State, show: boolean) {
-    state.showDownloadDrawer = show;
-  },
-  setLanguage(state: State, language: string) {
-    state.setData.language = language;
-    if (isElectron) {
-      window.electron.ipcRenderer.send('set-store-value', 'set.language', language);
-    } else {
-      localStorage.setItem('appSettings', JSON.stringify(state.setData));
-    }
-  },
-  getLanguage(state: State) {
-    return state.setData.language;
-  }
-};
-
-const actions = {
-  initializeSettings({ commit }: { commit: any }) {
-    if (isElectron) {
-      const setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
-      commit('setSetData', {
-        ...defaultSettings,
-        ...setData
-      });
-    } else {
-      const savedSettings = localStorage.getItem('appSettings');
-      if (savedSettings) {
-        commit('setSetData', {
-          ...defaultSettings,
-          ...JSON.parse(savedSettings)
-        });
-      } else {
-        commit('setSetData', defaultSettings);
-      }
-    }
-  },
-  initializeTheme({ state }: { state: State }) {
-    applyTheme(state.theme);
-  },
-  async initializeFavoriteList({ state }: { state: State }) {
-    // 先获取本地收藏列表
-    const localFavoriteList = localStorage.getItem('favoriteList');
-    const localList: number[] = localFavoriteList ? JSON.parse(localFavoriteList) : [];
-
-    // 如果用户已登录，尝试获取服务器收藏列表并合并
-    if (state.user && state.user.userId) {
-      try {
-        const res = await getLikedList(state.user.userId);
-        if (res.data?.ids) {
-          // 合并本地和服务器的收藏列表，去重
-          const serverList = res.data.ids.reverse();
-          const mergedList = Array.from(new Set([...localList, ...serverList]));
-          state.favoriteList = mergedList;
-        } else {
-          state.favoriteList = localList;
-        }
-      } catch (error) {
-        console.error('获取服务器收藏列表失败，使用本地数据:', error);
-        state.favoriteList = localList;
-      }
-    } else {
-      state.favoriteList = localList;
-    }
-
-    // 更新本地存储
-    localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
-  },
-  showArtist({ commit }, id: number) {
-    commit('setCurrentArtistId', id);
-  },
-  async initializeSystemFonts({ commit, state }) {
-    // 如果已经有字体列表（不只是默认字体），则不重复获取
-    if (state.systemFonts.length > 1) return;
-
-    try {
-      const fonts = await window.api.invoke('get-system-fonts');
-      commit('setSystemFonts', fonts);
-    } catch (error) {
-      console.error('获取系统字体失败:', error);
-    }
-  },
-  async initializePlayState({ state, commit }: { state: State; commit: any }) {
-    const savedPlayList = getLocalStorageItem('playList', []);
-    const savedPlayMusic = getLocalStorageItem('currentPlayMusic', null);
-
-    if (savedPlayList.length > 0) {
-      commit('setPlayList', savedPlayList);
-    }
-
-    if (savedPlayMusic && Object.keys(savedPlayMusic).length > 0) {
-      // 不直接使用保存的 URL，而是重新获取
-      try {
-        // 使用 handlePlayMusic 来重新获取音乐 URL
-
-        // 根据自动播放设置决定是否恢复播放状态
-        const shouldAutoPlay = state.setData.autoPlay;
-        if (shouldAutoPlay) {
-          await handlePlayMusic(state, savedPlayMusic);
-        }
-        state.play = shouldAutoPlay;
-        state.isPlay = true;
-      } catch (error) {
-        console.error('重新获取音乐链接失败:', error);
-        // 清除无效的播放状态
-        state.play = false;
-        state.isPlay = false;
-        state.playMusic = {} as SongResult;
-        state.playMusicUrl = '';
-        localStorage.removeItem('currentPlayMusic');
-        localStorage.removeItem('currentPlayMusicUrl');
-        localStorage.removeItem('isPlaying');
-      }
-    }
-  },
-  initializeLanguage({ state }: { state: State }) {
-    state.setData.language = getLocalStorageItem('appSettings', { language: 'zh-CN' }).language;
-    if (isElectron) {
-      window.electron.ipcRenderer.send('set-store-value', 'set.language', state.setData.language);
-    } else {
-      localStorage.setItem('appSettings', JSON.stringify(state.setData));
-    }
-  }
-};
-
-const store = createStore({
-  state,
-  mutations,
-  actions
+// 添加路由到 Pinia
+pinia.use(({ store }) => {
+  store.router = markRaw(router);
 });
 
-export default store;
+// 导出所有 store
+export * from './modules/lyric';
+export * from './modules/menu';
+export * from './modules/player';
+export * from './modules/search';
+export * from './modules/settings';
+export * from './modules/user';
+
+export default pinia;

src/renderer/store/modules/lyric.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLyricStore = defineStore('lyric', () => {
+  const lyric = ref({});
+
+  const setLyric = (newLyric: any) => {
+    lyric.value = newLyric;
+  };
+
+  return {
+    lyric,
+    setLyric
+  };
+});

src/renderer/store/modules/menu.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import homeRouter from '@/router/home';
+
+export const useMenuStore = defineStore('menu', () => {
+  const menus = ref(homeRouter);
+
+  const setMenus = (newMenus: any[]) => {
+    menus.value = newMenus;
+  };
+
+  return {
+    menus,
+    setMenus
+  };
+});

src/renderer/store/modules/player.ts

@@ -0,0 +1,455 @@
+import { cloneDeep } from 'lodash';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
+import { useMusicHistory } from '@/hooks/MusicHistoryHook';
+import type { ILyric, ILyricText, SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+import { getImageLinearBackground } from '@/utils/linearColor';
+
+import { useSettingsStore } from './settings';
+import { useUserStore } from './user';
+
+const musicHistory = useMusicHistory();
+
+const preloadingSounds = ref<Howl[]>([]);
+
+function getLocalStorageItem<T>(key: string, defaultValue: T): T {
+  try {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+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, 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 url;
+};
+const parseTime = (timeString: string): number => {
+  const [minutes, seconds] = timeString.split(':');
+  return Number(minutes) * 60 + Number(seconds);
+};
+
+const parseLyricLine = (lyricLine: string): { time: number; text: string } => {
+  const TIME_REGEX = /(\d{2}:\d{2}(\.\d*)?)/g;
+  const LRC_REGEX = /(\[(\d{2}):(\d{2})(\.(\d*))?\])/g;
+  const timeText = lyricLine.match(TIME_REGEX)?.[0] || '';
+  const time = parseTime(timeText);
+  const text = lyricLine.replace(LRC_REGEX, '').trim();
+  return { time, text };
+};
+
+const parseLyrics = (lyricsString: string): { lyrics: ILyricText[]; times: number[] } => {
+  const lines = lyricsString.split('\n');
+  const lyrics: ILyricText[] = [];
+  const times: number[] = [];
+  lines.forEach((line) => {
+    const { time, text } = parseLyricLine(line);
+    times.push(time);
+    lyrics.push({ text, trText: '' });
+  });
+  return { lyrics, times };
+};
+
+export const loadLrc = async (playMusicId: number): Promise<ILyric> => {
+  try {
+    const { data } = await getMusicLrc(playMusicId);
+    const { lyrics, times } = parseLyrics(data.lrc.lyric);
+    const tlyric: Record<string, string> = {};
+
+    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;
+      });
+    }
+
+    lyrics.forEach((item, index) => {
+      item.trText = item.text ? tlyric[times[index].toString()] || '' : '';
+    });
+    return {
+      lrcTimeArray: times,
+      lrcArray: lyrics
+    };
+  } catch (err) {
+    console.error('Error loading lyrics:', err);
+    return {
+      lrcTimeArray: [],
+      lrcArray: []
+    };
+  }
+};
+
+const getSongDetail = async (playMusic: SongResult) => {
+  playMusic.playLoading = true;
+  const playMusicUrl =
+    playMusic.playMusicUrl || (await getSongUrl(playMusic.id, cloneDeep(playMusic)));
+  const { backgroundColor, primaryColor } =
+    playMusic.backgroundColor && playMusic.primaryColor
+      ? playMusic
+      : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
+
+  playMusic.playLoading = false;
+  return { ...playMusic, playMusicUrl, backgroundColor, primaryColor } as SongResult;
+};
+
+const preloadNextSong = (nextSongUrl: string) => {
+  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 (playList: SongResult[], startIndex: number, endIndex: number) => {
+  try {
+    const songs = playList.slice(Math.max(0, startIndex), Math.min(endIndex, playList.length));
+
+    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);
+      }
+    }
+
+    // 更新播放列表中的歌曲详情
+    detailedSongs.forEach((song, index) => {
+      if (song && startIndex + index < playList.length) {
+        playList[startIndex + index] = song;
+      }
+    });
+
+    // 只预加载下一首歌曲
+    if (nextSong && nextSong.playMusicUrl) {
+      preloadNextSong(nextSong.playMusicUrl);
+    }
+  } catch (error) {
+    console.error('获取歌曲列表失败:', error);
+  }
+};
+
+// 异步加载歌词的方法
+const loadLrcAsync = async (playMusic: SongResult) => {
+  if (playMusic.lyric && playMusic.lyric.lrcTimeArray.length > 0) {
+    return;
+  }
+  const lyrics = await loadLrc(playMusic.id);
+  playMusic.lyric = lyrics;
+};
+
+export const usePlayerStore = defineStore('player', () => {
+  // 状态
+  const play = ref(false);
+  const isPlay = ref(false);
+  const playMusic = ref<SongResult>(getLocalStorageItem('currentPlayMusic', {} as SongResult));
+  const playMusicUrl = ref(getLocalStorageItem('currentPlayMusicUrl', ''));
+  const playList = ref<SongResult[]>(getLocalStorageItem('playList', []));
+  const playListIndex = ref(getLocalStorageItem('playListIndex', 0));
+  const playMode = ref(getLocalStorageItem('playMode', 0));
+  const musicFull = ref(false);
+  const favoriteList = ref<number[]>(getLocalStorageItem('favoriteList', []));
+  const savedPlayProgress = ref<number | undefined>();
+
+  // 计算属性
+  const currentSong = computed(() => playMusic.value);
+  const isPlaying = computed(() => isPlay.value);
+  const currentPlayList = computed(() => playList.value);
+  const currentPlayListIndex = computed(() => playListIndex.value);
+
+  const handlePlayMusic = async (music: SongResult, isPlay: boolean = true) => {
+    const updatedPlayMusic = await getSongDetail(music);
+    playMusic.value = updatedPlayMusic;
+    playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
+
+    // 记录当前设置的播放状态
+    play.value = isPlay;
+
+    // 每次设置新歌曲时，立即更新 localStorage
+    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+    localStorage.setItem('isPlaying', play.value.toString());
+
+    // 设置网页标题
+    document.title = `${updatedPlayMusic.name} - ${updatedPlayMusic?.song?.artists?.reduce((prev, curr) => `${prev}${curr.name}/`, '')}`;
+    loadLrcAsync(playMusic.value);
+    musicHistory.addMusic(playMusic.value);
+    playListIndex.value = playList.value.findIndex((item: SongResult) => item.id === music.id);
+    // 请求后续五首歌曲的详情
+    fetchSongs(playList.value, playListIndex.value + 1, playListIndex.value + 6);
+  };
+
+  // 方法
+  const setPlay = async (song: SongResult) => {
+    await handlePlayMusic(song);
+    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+  };
+
+  const setIsPlay = (value: boolean) => {
+    isPlay.value = value;
+    localStorage.setItem('isPlaying', value.toString());
+  };
+
+  const setPlayMusic = async (value: boolean | SongResult) => {
+    if (typeof value === 'boolean') {
+      play.value = value;
+      isPlay.value = value;
+      localStorage.setItem('isPlaying', value.toString());
+    } else {
+      await handlePlayMusic(value);
+      play.value = true;
+      isPlay.value = true;
+      localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+      localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+    }
+  };
+
+  const setMusicFull = (value: boolean) => {
+    musicFull.value = value;
+  };
+
+  const setPlayList = (list: SongResult[]) => {
+    playListIndex.value = list.findIndex((item) => item.id === playMusic.value.id);
+    playList.value = list;
+    localStorage.setItem('playList', JSON.stringify(list));
+    localStorage.setItem('playListIndex', playListIndex.value.toString());
+  };
+
+  const addToNextPlay = (song: SongResult) => {
+    const list = [...playList.value];
+    const currentIndex = playListIndex.value;
+
+    const existingIndex = list.findIndex((item) => item.id === song.id);
+    if (existingIndex !== -1) {
+      list.splice(existingIndex, 1);
+    }
+
+    list.splice(currentIndex + 1, 0, song);
+    setPlayList(list);
+  };
+
+  const nextPlay = async () => {
+    if (playList.value.length === 0) {
+      play.value = true;
+      return;
+    }
+
+    let nowPlayListIndex: number;
+
+    if (playMode.value === 2) {
+      // 随机播放模式
+      do {
+        nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
+      } while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
+    } else {
+      // 列表循环模式
+      nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
+    }
+
+    playListIndex.value = nowPlayListIndex;
+    await handlePlayMusic(playList.value[playListIndex.value]);
+  };
+
+  const prevPlay = async () => {
+    if (playList.value.length === 0) {
+      play.value = true;
+      return;
+    }
+    const nowPlayListIndex =
+      (playListIndex.value - 1 + playList.value.length) % playList.value.length;
+    await handlePlayMusic(playList.value[nowPlayListIndex]);
+    await fetchSongs(playList.value, playListIndex.value - 5, nowPlayListIndex);
+  };
+
+  const togglePlayMode = () => {
+    playMode.value = (playMode.value + 1) % 3;
+    localStorage.setItem('playMode', JSON.stringify(playMode.value));
+  };
+
+  const addToFavorite = async (id: number) => {
+    if (!favoriteList.value.includes(id)) {
+      favoriteList.value.push(id);
+      localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+    }
+  };
+
+  const removeFromFavorite = async (id: number) => {
+    favoriteList.value = favoriteList.value.filter((item) => item !== id);
+    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+  };
+
+  // 初始化播放状态
+  const initializePlayState = async () => {
+    const settingStore = useSettingsStore();
+    const savedPlayList = getLocalStorageItem('playList', []);
+    const savedPlayMusic = getLocalStorageItem<SongResult | null>('currentPlayMusic', null);
+    const savedProgress = localStorage.getItem('playProgress');
+
+    if (savedPlayList.length > 0) {
+      setPlayList(savedPlayList);
+    }
+
+    if (savedPlayMusic && Object.keys(savedPlayMusic).length > 0) {
+      try {
+        console.log('settingStore.setData', settingStore.setData);
+        const isPlaying = settingStore.setData.autoPlay;
+        await handlePlayMusic({ ...savedPlayMusic, playMusicUrl: undefined }, isPlaying);
+
+        if (savedProgress) {
+          try {
+            const progress = JSON.parse(savedProgress);
+            if (progress && progress.songId === savedPlayMusic.id) {
+              savedPlayProgress.value = progress.progress;
+            } else {
+              localStorage.removeItem('playProgress');
+            }
+          } catch (e) {
+            console.error('解析保存的播放进度失败', e);
+            localStorage.removeItem('playProgress');
+          }
+        }
+      } catch (error) {
+        console.error('重新获取音乐链接失败:', error);
+        play.value = false;
+        isPlay.value = false;
+        playMusic.value = {} as SongResult;
+        playMusicUrl.value = '';
+        localStorage.removeItem('currentPlayMusic');
+        localStorage.removeItem('currentPlayMusicUrl');
+        localStorage.removeItem('isPlaying');
+        localStorage.removeItem('playProgress');
+      }
+    }
+  };
+
+  const initializeFavoriteList = async () => {
+    const userStore = useUserStore();
+    // 先获取本地收藏列表
+    const localFavoriteList = localStorage.getItem('favoriteList');
+    const localList: number[] = localFavoriteList ? JSON.parse(localFavoriteList) : [];
+
+    // 如果用户已登录，尝试获取服务器收藏列表并合并
+    if (userStore.user && userStore.user.userId) {
+      try {
+        const res = await getLikedList(userStore.user.userId);
+        if (res.data?.ids) {
+          // 合并本地和服务器的收藏列表，去重
+          const serverList = res.data.ids.reverse();
+          const mergedList = Array.from(new Set([...localList, ...serverList]));
+          favoriteList.value = mergedList;
+        } else {
+          favoriteList.value = localList;
+        }
+      } catch (error) {
+        console.error('获取服务器收藏列表失败，使用本地数据:', error);
+        favoriteList.value = localList;
+      }
+    } else {
+      favoriteList.value = localList;
+    }
+
+    // 更新本地存储
+    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
+  };
+
+  return {
+    // 状态
+    play,
+    isPlay,
+    playMusic,
+    playMusicUrl,
+    playList,
+    playListIndex,
+    playMode,
+    musicFull,
+    savedPlayProgress,
+    favoriteList,
+
+    // 计算属性
+    currentSong,
+    isPlaying,
+    currentPlayList,
+    currentPlayListIndex,
+
+    // 方法
+    setPlay,
+    setIsPlay,
+    nextPlay,
+    prevPlay,
+    setPlayMusic,
+    setMusicFull,
+    setPlayList,
+    addToNextPlay,
+    togglePlayMode,
+    initializePlayState,
+    initializeFavoriteList,
+    addToFavorite,
+    removeFromFavorite
+  };
+});

src/renderer/store/modules/search.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useSearchStore = defineStore('search', () => {
+  const searchValue = ref('');
+  const searchType = ref(1);
+
+  const setSearchValue = (value: string) => {
+    searchValue.value = value;
+  };
+
+  const setSearchType = (type: number) => {
+    searchType.value = type;
+  };
+
+  return {
+    searchValue,
+    searchType,
+    setSearchValue,
+    setSearchType
+  };
+});

src/renderer/store/modules/settings.ts

@@ -0,0 +1,129 @@
+import { cloneDeep } from 'lodash';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import setDataDefault from '@/../main/set.json';
+import { isElectron } from '@/utils';
+import { applyTheme, getCurrentTheme, ThemeType } from '@/utils/theme';
+
+export const useSettingsStore = defineStore('settings', () => {
+  // 初始化时先从存储中读取设置
+  const getInitialSettings = () => {
+    if (isElectron) {
+      const savedSettings = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
+      return savedSettings || setDataDefault;
+    }
+    const savedSettings = localStorage.getItem('appSettings');
+    return savedSettings ? JSON.parse(savedSettings) : setDataDefault;
+  };
+
+  const setData = ref(getInitialSettings());
+  const theme = ref<ThemeType>(getCurrentTheme());
+  const isMobile = ref(false);
+  const showUpdateModal = ref(false);
+  const showArtistDrawer = ref(false);
+  const currentArtistId = ref<number | null>(null);
+  const systemFonts = ref<{ label: string; value: string }[]>([
+    { label: '系统默认', value: 'system-ui' }
+  ]);
+  const showDownloadDrawer = ref(false);
+
+  const setSetData = (data: any) => {
+    // 合并现有设置和新设置
+    const mergedData = {
+      ...setData.value,
+      ...data
+    };
+
+    if (isElectron) {
+      window.electron.ipcRenderer.send('set-store-value', 'set', cloneDeep(mergedData));
+    } else {
+      localStorage.setItem('appSettings', JSON.stringify(cloneDeep(mergedData)));
+    }
+    setData.value = cloneDeep(mergedData);
+  };
+
+  const toggleTheme = () => {
+    theme.value = theme.value === 'dark' ? 'light' : 'dark';
+    applyTheme(theme.value);
+  };
+
+  const setShowUpdateModal = (value: boolean) => {
+    showUpdateModal.value = value;
+  };
+
+  const setShowArtistDrawer = (show: boolean) => {
+    showArtistDrawer.value = show;
+    if (!show) {
+      currentArtistId.value = null;
+    }
+  };
+
+  const setCurrentArtistId = (id: number) => {
+    currentArtistId.value = id;
+  };
+
+  const setSystemFonts = (fonts: string[]) => {
+    systemFonts.value = [
+      { label: '系统默认', value: 'system-ui' },
+      ...fonts.map((font) => ({
+        label: font,
+        value: font
+      }))
+    ];
+  };
+
+  const setShowDownloadDrawer = (show: boolean) => {
+    showDownloadDrawer.value = show;
+  };
+
+  const setLanguage = (language: string) => {
+    setSetData({ language });
+    if (isElectron) {
+      window.electron.ipcRenderer.send('change-language', language);
+    }
+  };
+
+  const initializeSettings = () => {
+    // const savedSettings = getInitialSettings();
+    // setData.value = savedSettings;
+  };
+
+  const initializeTheme = () => {
+    applyTheme(theme.value);
+  };
+
+  const initializeSystemFonts = async () => {
+    if (!isElectron) return;
+    if (systemFonts.value.length > 1) return;
+
+    try {
+      const fonts = await window.api.invoke('get-system-fonts');
+      setSystemFonts(fonts);
+    } catch (error) {
+      console.error('获取系统字体失败:', error);
+    }
+  };
+
+  return {
+    setData,
+    theme,
+    isMobile,
+    showUpdateModal,
+    showArtistDrawer,
+    currentArtistId,
+    systemFonts,
+    showDownloadDrawer,
+    setSetData,
+    toggleTheme,
+    setShowUpdateModal,
+    setShowArtistDrawer,
+    setCurrentArtistId,
+    setSystemFonts,
+    setShowDownloadDrawer,
+    setLanguage,
+    initializeSettings,
+    initializeTheme,
+    initializeSystemFonts
+  };
+});

src/renderer/store/modules/user.ts

@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import { logout } from '@/api/login';
+import { getLikedList } from '@/api/music';
+
+interface UserData {
+  userId: number;
+  [key: string]: any;
+}
+
+function getLocalStorageItem<T>(key: string, defaultValue: T): T {
+  try {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+export const useUserStore = defineStore('user', () => {
+  // 状态
+  const user = ref<UserData | null>(getLocalStorageItem('user', null));
+  const searchValue = ref('');
+  const searchType = ref(1);
+
+  // 方法
+  const setUser = (userData: UserData) => {
+    user.value = userData;
+    localStorage.setItem('user', JSON.stringify(userData));
+  };
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      user.value = null;
+      localStorage.removeItem('user');
+      localStorage.removeItem('token');
+    } catch (error) {
+      console.error('登出失败:', error);
+    }
+  };
+
+  const setSearchValue = (value: string) => {
+    searchValue.value = value;
+  };
+
+  const setSearchType = (type: number) => {
+    searchType.value = type;
+  };
+
+  // 初始化
+  const initializeUser = async () => {
+    const savedUser = getLocalStorageItem<UserData | null>('user', null);
+    if (savedUser) {
+      user.value = savedUser;
+      // 如果用户已登录，获取收藏列表
+      if (localStorage.getItem('token')) {
+        try {
+          const { data } = await getLikedList(savedUser.userId);
+          return data?.ids || [];
+        } catch (error) {
+          console.error('获取收藏列表失败:', error);
+          return [];
+        }
+      }
+    }
+    return [];
+  };
+
+  return {
+    // 状态
+    user,
+    searchValue,
+    searchType,
+
+    // 方法
+    setUser,
+    handleLogout,
+    setSearchValue,
+    setSearchType,
+    initializeUser
+  };
+});

src/renderer/types/electron.d.ts

@@ -8,6 +8,7 @@ export interface IElectronAPI {
   openLyric: () => void;
   sendLyric: (data: string) => void;
   unblockMusic: (id: number) => Promise<string>;
+  onLanguageChanged: (callback: (locale: string) => void) => void;
   store: {
     get: (key: string) => Promise<any>;
     set: (key: string, value: any) => Promise<boolean>;

src/renderer/utils/index.ts

@@ -1,6 +1,7 @@
+import { useWindowSize } from '@vueuse/core';
 import { computed } from 'vue';
 
-import store from '@/store';
+import { useSettingsStore } from '@/store/modules/settings';
 
 // 设置歌手背景图片
 export const setBackgroundImg = (url: String) => {
@@ -8,10 +9,11 @@ export const setBackgroundImg = (url: String) => {
 };
 // 设置动画类型
 export const setAnimationClass = (type: String) => {
-  if (store.state.setData && store.state.setData.noAnimate) {
+  const settingsStore = useSettingsStore();
+  if (settingsStore.setData && settingsStore.setData.noAnimate) {
     return '';
   }
-  const speed = store.state.setData?.animationSpeed || 1;
+  const speed = settingsStore.setData?.animationSpeed || 1;
 
   let speedClass = '';
   if (speed <= 0.3) speedClass = 'animate__slower';
@@ -23,10 +25,11 @@ export const setAnimationClass = (type: String) => {
 };
 // 设置动画延时
 export const setAnimationDelay = (index: number = 6, time: number = 50) => {
-  if (store.state.setData?.noAnimate) {
+  const settingsStore = useSettingsStore();
+  if (settingsStore.setData?.noAnimate) {
     return '';
   }
-  const speed = store.state.setData?.animationSpeed || 1;
+  const speed = settingsStore.setData?.animationSpeed || 1;
   return `animation-delay:${(index * time) / (speed * 2)}ms`;
 };
 
@@ -59,20 +62,42 @@ export const formatNumber = (num: string | number) => {
 };
 
 export const getImgUrl = (url: string | undefined, size: string = '') => {
+  if (!url) return '';
+
+  if (url.includes('thumbnail')) {
+    // 只替换最后一个 thumbnail 参数的尺寸
+    return url.replace(/thumbnail=\d+y\d+(?!.*thumbnail)/, `thumbnail=${size}`);
+  }
+
   const imgUrl = `${url}?param=${size}`;
   return imgUrl;
 };
 
 export const isMobile = computed(() => {
-  const flag = navigator.userAgent.match(
+  const { width } = useWindowSize();
+  const userAgentFlag = navigator.userAgent.match(
     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
   );
 
-  store.state.isMobile = !!flag;
+  const isMobileWidth = width.value < 500;
+  const isMobileDevice = !!userAgentFlag || isMobileWidth;
 
-  // 给html标签 添加mobile
-  if (flag) document.documentElement.classList.add('mobile');
-  return !!flag;
+  const settingsStore = useSettingsStore();
+  settingsStore.isMobile = isMobileDevice;
+
+  // 给html标签 添加或移除mobile类
+  if (isMobileDevice) {
+    document.documentElement.classList.add('mobile');
+  } else {
+    document.documentElement.classList.add('pc');
+    document.documentElement.classList.remove('mobile');
+  }
+
+  return isMobileDevice;
 });
 
 export const isElectron = (window as any).electron !== undefined;
+
+export const isLyricWindow = computed(() => {
+  return window.location.hash.includes('lyric');
+});

src/renderer/utils/request.ts

@@ -1,6 +1,7 @@
 import axios, { InternalAxiosRequestConfig } from 'axios';
 
-import store from '@/store';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
 
 import { isElectron } from '.';
 
@@ -8,9 +9,13 @@ let setData: any = null;
 const getSetData = () => {
   if (window.electron) {
     setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
+  } else {
+    const settingsStore = useSettingsStore();
+    setData = settingsStore.setData;
   }
+  return setData;
 };
-getSetData();
+
 // 扩展请求配置接口
 interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
   retryCount?: number;
@@ -34,6 +39,9 @@ const RETRY_DELAY = 500;
 request.interceptors.request.use(
   (config: CustomAxiosRequestConfig) => {
     getSetData();
+    config.baseURL = window.electron
+      ? `http://127.0.0.1:${setData?.musicApiPort}`
+      : import.meta.env.VITE_API;
     // 只在retryCount未定义时初始化为0
     if (config.retryCount === undefined) {
       config.retryCount = 0;
@@ -75,7 +83,7 @@ request.interceptors.response.use(
     return response;
   },
   async (error) => {
-    console.log('error', error);
+    console.error('error', error);
     const config = error.config as CustomAxiosRequestConfig;
 
     // 如果没有配置，直接返回错误
@@ -84,9 +92,10 @@ request.interceptors.response.use(
     }
 
     // 处理 301 状态码
-    if (error.response?.status === 301) {
+    if (error.response?.status === 301 && config.params.noLogin !== true) {
       // 使用 store mutation 清除用户信息
-      store.commit('logout');
+      const userStore = useUserStore();
+      userStore.handleLogout();
       console.log(`301 状态码，清除登录信息后重试第 ${config.retryCount} 次`);
       config.retryCount = 3;
     }
@@ -98,7 +107,7 @@ request.interceptors.response.use(
       !NO_RETRY_URLS.includes(config.url as string)
     ) {
       config.retryCount++;
-      console.log(`请求重试第 ${config.retryCount} 次`);
+      console.error(`请求重试第 ${config.retryCount} 次`);
 
       // 延迟重试
       await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
@@ -107,7 +116,7 @@ request.interceptors.response.use(
       return request(config);
     }
 
-    console.log(`重试${MAX_RETRIES}次后仍然失败`);
+    console.error(`重试${MAX_RETRIES}次后仍然失败`);
     return Promise.reject(error);
   }
 );

src/renderer/views/favorite/index.vue

@@ -88,18 +88,18 @@ import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';
 
 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { getSongUrl } from '@/hooks/MusicListHook';
+import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';
 
 const { t } = useI18n();
-const store = useStore();
+const playerStore = usePlayerStore();
 const message = useMessage();
-const favoriteList = computed(() => store.state.favoriteList);
+const favoriteList = computed(() => playerStore.favoriteList);
 const favoriteSongs = ref<SongResult[]>([]);
 const loading = ref(false);
 const noMore = ref(false);
@@ -277,7 +277,7 @@ const handleScroll = (e: any) => {
 };
 
 onMounted(async () => {
-  await store.dispatch('initializeFavoriteList');
+  await playerStore.initializeFavoriteList();
   await getFavoriteSongs();
 });
 
@@ -293,7 +293,7 @@ watch(
 );
 
 const handlePlay = () => {
-  store.commit('setPlayList', favoriteSongs.value);
+  playerStore.setPlayList(favoriteSongs.value);
 };
 
 const getItemAnimationDelay = (index: number) => {

src/renderer/views/history/index.vue

@@ -34,11 +34,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
+import { usePlayerStore } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
 
@@ -47,12 +47,12 @@ defineOptions({
 });
 
 const { t } = useI18n();
-const store = useStore();
 const { delMusic, musicList } = useMusicHistory();
 const scrollbarRef = ref();
 const loading = ref(false);
 const noMore = ref(false);
 const displayList = ref<SongResult[]>([]);
+const playerStore = usePlayerStore();
 
 // 无限滚动相关配置
 const pageSize = 20;
@@ -112,7 +112,7 @@ const handleScroll = (e: any) => {
 
 // 播放全部
 const handlePlay = () => {
-  store.commit('setPlayList', displayList.value);
+  playerStore.setPlayList(displayList.value);
 };
 
 onMounted(() => {

src/renderer/views/home/index.vue

@@ -2,7 +2,7 @@
   <n-scrollbar :size="100" :x-scrollable="false">
     <div class="main-page">
       <!-- 推荐歌手 -->
-      <recommend-singer />
+      <top-banner />
       <div class="main-content">
         <!-- 歌单分类列表 -->
         <playlist-type v-if="!isMobile" />
@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts" setup>
-import PlaylistType from '@/components/PlaylistType.vue';
-import RecommendAlbum from '@/components/RecommendAlbum.vue';
-import RecommendSinger from '@/components/RecommendSinger.vue';
-import RecommendSonglist from '@/components/RecommendSonglist.vue';
+import PlaylistType from '@/components/home/PlaylistType.vue';
+import RecommendAlbum from '@/components/home/RecommendAlbum.vue';
+import RecommendSonglist from '@/components/home/RecommendSonglist.vue';
+import TopBanner from '@/components/home/TopBanner.vue';
 import { isMobile } from '@/utils';
 import FavoriteList from '@/views/favorite/index.vue';
 

src/renderer/views/list/index.vue

@@ -36,7 +36,7 @@
           <div class="recommend-item-img">
             <n-image
               class="recommend-item-img-img"
-              :src="getImgUrl(item.picUrl || item.coverImgUrl, '200y200')"
+              :src="getImgUrl(item.picUrl || item.coverImgUrl, '300y300')"
               width="200"
               height="200"
               lazy

src/renderer/views/login/index.vue

@@ -3,9 +3,9 @@ import { useMessage } from 'naive-ui';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';
 
 import { checkQr, createQr, getQrKey, getUserDetail, loginByCellphone } from '@/api/login';
+import { useUserStore } from '@/store/modules/user';
 import { setAnimationClass } from '@/utils';
 
 defineOptions({
@@ -14,11 +14,12 @@ defineOptions({
 
 const { t } = useI18n();
 const message = useMessage();
-const store = useStore();
 const router = useRouter();
 const isQr = ref(true);
 
 const qrUrl = ref<string>();
+const userStore = useUserStore();
+
 onMounted(() => {
   loadLogin();
 });
@@ -56,7 +57,7 @@ const timerIsQr = (key: string) => {
       if (data.code === 803) {
         localStorage.setItem('token', data.cookie);
         const user = await getUserDetail();
-        store.state.user = user.data.profile;
+        userStore.user = user.data.profile;
         localStorage.setItem('user', JSON.stringify(user.data.profile));
         message.success(t('login.message.loginSuccess'));
 
@@ -83,10 +84,10 @@ onBeforeUnmount(() => {
 });
 
 // 是否扫码登陆
-const chooseQr = () => {
-  isQr.value = !isQr.value;
-  loadLogin();
-};
+// const chooseQr = () => {
+//   isQr.value = !isQr.value;
+//   loadLogin();
+// };
 
 // 手机号登录
 const phone = ref('');
@@ -95,7 +96,7 @@ const loginPhone = async () => {
   const { data } = await loginByCellphone(phone.value, password.value);
   if (data.code === 200) {
     message.success(t('login.message.loginSuccess'));
-    store.state.user = data.profile;
+    userStore.user = data.profile;
     localStorage.setItem('token', data.cookie);
     setTimeout(() => {
       router.push('/user');
@@ -135,9 +136,9 @@ const loginPhone = async () => {
         </div>
       </div>
       <div class="bottom">
-        <div class="title" @click="chooseQr()">
+        <!-- <div class="title" @click="chooseQr()">
           {{ isQr ? t('login.button.switchToPhone') : t('login.button.switchToQr') }}
-        </div>
+        </div> -->
       </div>
     </div>
   </div>

src/renderer/views/lyric/index.vue

@@ -378,27 +378,46 @@ watch(
 
 // 修改数据更新处
 const handleDataUpdate = (parsedData: {
+  type?: string;
   nowTime: number;
   startCurrentTime: number;
   nextTime: number;
   isPlay: boolean;
   nowIndex: number;
-  lrcArray: Array<{ text: string; trText: string }>;
-  lrcTimeArray: number[];
-  allTime: number;
-  playMusic: SongResult;
+  lrcArray?: Array<{ text: string; trText: string }>;
+  lrcTimeArray?: number[];
+  allTime?: number;
+  playMusic?: SongResult;
 }) => {
   // 确保数据存在且格式正确
   if (!parsedData) {
     console.error('Invalid update data received:', parsedData);
     return;
   }
+
+  // 根据数据类型处理
+  if (parsedData.type === 'update') {
+    // 增量更新，只更新动态数据
+    dynamicData.value = {
+      ...dynamicData.value,
+      nowTime: parsedData.nowTime || dynamicData.value.nowTime,
+      isPlay: typeof parsedData.isPlay === 'boolean' ? parsedData.isPlay : dynamicData.value.isPlay
+    };
+
+    // 更新索引（如果提供）
+    if (typeof parsedData.nowIndex === 'number') {
+      currentIndex.value = parsedData.nowIndex;
+    }
+    return;
+  }
+
+  // 完整更新或空歌词提示
   // 更新静态数据
   staticData.value = {
     lrcArray: parsedData.lrcArray || [],
     lrcTimeArray: parsedData.lrcTimeArray || [],
     allTime: parsedData.allTime || 0,
-    playMusic: parsedData.playMusic || {}
+    playMusic: parsedData.playMusic || ({} as SongResult)
   };
 
   // 更新动态数据
@@ -472,9 +491,11 @@ watch(
   { deep: true }
 );
 
-// 添<EFBFBD><EFBFBD>拖动相关变量
+// 添加拖动相关变量
 const isDragging = ref(false);
 const startPosition = ref({ x: 0, y: 0 });
+const lastMoveTime = ref(0);
+const moveThrottleMs = 10; // 限制拖动事件发送频率，提高性能
 
 // 处理鼠标按下事件
 const handleMouseDown = (e: MouseEvent) => {
@@ -482,7 +503,8 @@ const handleMouseDown = (e: MouseEvent) => {
   if (
     lyricSetting.value.isLock ||
     (e.target as HTMLElement).closest('.control-buttons') ||
-    (e.target as HTMLElement).closest('.font-size-controls')
+    (e.target as HTMLElement).closest('.font-size-controls') ||
+    (e.target as HTMLElement).closest('.play-controls')
   ) {
     return;
   }
@@ -492,23 +514,38 @@ const handleMouseDown = (e: MouseEvent) => {
 
   isDragging.value = true;
   startPosition.value = { x: e.screenX, y: e.screenY };
+  lastMoveTime.value = performance.now();
+
+  // 发送拖动开始信号到主进程
+  windowData.electron.ipcRenderer.send('lyric-drag-start');
 
   // 添加全局鼠标事件监听
   const handleMouseMove = (e: MouseEvent) => {
     if (!isDragging.value) return;
 
+    // 时间节流，避免过于频繁的更新
+    const now = performance.now();
+    if (now - lastMoveTime.value < moveThrottleMs) return;
+    lastMoveTime.value = now;
+
     const deltaX = e.screenX - startPosition.value.x;
     const deltaY = e.screenY - startPosition.value.y;
 
-    // 发送移动事件到主进程
-    windowData.electron.ipcRenderer.send('lyric-drag-move', { deltaX, deltaY });
-    startPosition.value = { x: e.screenX, y: e.screenY };
+    // 只有在实际移动时才发送事件
+    if (Math.abs(deltaX) > 0 || Math.abs(deltaY) > 0) {
+      // 发送移动事件到主进程
+      windowData.electron.ipcRenderer.send('lyric-drag-move', { deltaX, deltaY });
+      startPosition.value = { x: e.screenX, y: e.screenY };
+    }
   };
 
   const handleMouseUp = () => {
     if (!isDragging.value) return;
     isDragging.value = false;
 
+    // 发送拖动结束信号到主进程
+    windowData.electron.ipcRenderer.send('lyric-drag-end');
+
     // 移除事件监听
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
@@ -554,7 +591,7 @@ const handleNext = () => {
 };
 </script>
 
-<style>
+<style scoped>
 body {
   background-color: transparent !important;
 }
@@ -570,9 +607,10 @@ body {
   user-select: none;
   transition: background-color 0.2s ease;
   cursor: default;
+  border-radius: 14px;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(44, 44, 44, 0.466);
     .control-bar {
       &-show {
         opacity: 1;
@@ -731,16 +769,15 @@ body {
   color: var(--text-color);
   white-space: pre-wrap;
   word-break: break-all;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   transition: all 0.2s ease;
   line-height: 1.4;
+  -webkit-text-stroke: 0.5px #0000008a;
 }
 
 .lyric-translation {
   color: var(--text-secondary);
   white-space: pre-wrap;
   word-break: break-all;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   transition: font-size 0.2s ease;
   line-height: 1.4; // 添加行高比例
 }
@@ -755,8 +792,6 @@ body {
 body {
   background-color: transparent !important;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .lyric-content {

src/renderer/views/mv/index.vue

@@ -64,11 +64,11 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { useStore } from 'vuex';
 
 import { getAllMv, getTopMv } from '@/api/mv';
 import MvPlayer from '@/components/MvPlayer.vue';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
 
@@ -79,7 +79,6 @@ defineOptions({
 const showMv = ref(false);
 const mvList = ref<Array<IMvItem>>([]);
 const playMvItem = ref<IMvItem>();
-const store = useStore();
 const initLoading = ref(false);
 const loadingMore = ref(false);
 const currentIndex = ref(0);
@@ -97,6 +96,8 @@ const categories = [
 ];
 const selectedCategory = ref('全部');
 
+const playerStore = usePlayerStore();
+
 watch(selectedCategory, async () => {
   offset.value = 0;
   mvList.value = [];
@@ -114,8 +115,8 @@ onMounted(async () => {
 });
 
 const handleShowMv = async (item: IMvItem, index: number) => {
-  store.commit('setIsPlay', false);
-  store.commit('setPlayMusic', false);
+  playerStore.setIsPlay(false);
+  playerStore.setPlayMusic(false);
   audioService.getCurrentSound()?.pause();
   showMv.value = true;
   currentIndex.value = index;

src/renderer/views/search/index.vue

@@ -107,12 +107,13 @@ import { useDateFormat } from '@vueuse/core';
 import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
 
 import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSearchStore } from '@/store/modules/search';
 import type { IHotSearch } from '@/type/search';
 import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
@@ -122,10 +123,11 @@ defineOptions({
 
 const { t } = useI18n();
 const route = useRoute();
-const store = useStore();
+const playerStore = usePlayerStore();
+const searchStore = useSearchStore();
 
 const searchDetail = ref<any>();
-const searchType = computed(() => store.state.searchType as number);
+const searchType = computed(() => searchStore.searchType as number);
 const searchDetailLoading = ref(false);
 const searchHistory = ref<string[]>([]);
 
@@ -188,23 +190,6 @@ onMounted(() => {
 
 const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
 
-watch(
-  () => store.state.searchValue,
-  (value) => {
-    loadSearch(value);
-  }
-);
-
-watch(
-  () => searchType.value,
-  () => {
-    if (store.state.searchValue) {
-      loadSearch(store.state.searchValue);
-    }
-  }
-);
-
-const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
 const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
   if (!keywords) return;
 
@@ -295,6 +280,31 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
   }
 };
 
+watch(
+  () => searchStore.searchValue,
+  (value) => {
+    loadSearch(value);
+  }
+);
+
+watch(
+  () => searchType.value,
+  () => {
+    if (searchStore.searchValue) {
+      loadSearch(searchStore.searchValue);
+    }
+  }
+);
+// 修改 store.state 的访问
+if (searchStore.searchValue) {
+  loadSearch(searchStore.searchValue);
+}
+
+// 修改 store.state 的设置
+searchStore.searchValue = route.query.keyword as string;
+
+const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
+
 // 添加滚动处理函数
 const handleScroll = (e: any) => {
   const { scrollTop, scrollHeight, clientHeight } = e.target;
@@ -308,14 +318,14 @@ watch(
   () => route.path,
   async (path) => {
     if (path === '/search') {
-      store.state.searchValue = route.query.keyword;
+      searchStore.searchValue = route.query.keyword as string;
     }
   }
 );
 
 const handlePlay = () => {
   const tracks = searchDetail.value?.songs || [];
-  store.commit('setPlayList', tracks);
+  playerStore.setPlayList(tracks);
 };
 
 // 点击搜索历史

src/renderer/views/set/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="settings-container">
     <!-- 左侧导航栏 -->
-    <div class="settings-nav">
+    <div v-if="!isMobile" class="settings-nav">
       <div
         v-for="section in settingSections"
         :key="section.id"
@@ -205,7 +205,7 @@
                 </div>
               </div>
               <div class="flex items-center gap-2">
-                <n-button size="small" @click="store.commit('setShowDownloadDrawer', true)">
+                <n-button size="small" @click="settingsStore.showDownloadDrawer = true">
                   {{ t('settings.application.download') }}
                 </n-button>
               </div>
@@ -461,11 +461,11 @@
 </template>
 
 <script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core';
 import type { FormRules } from 'naive-ui';
 import { useMessage } from 'naive-ui';
-import { computed, h, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import localData from '@/../main/set.json';
 import Coffee from '@/components/Coffee.vue';
@@ -473,13 +473,26 @@ import DonationList from '@/components/common/DonationList.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
-import { isElectron } from '@/utils';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
+import { isElectron, isMobile } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
 
-const store = useStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+
+// 创建一个本地缓存的setData，避免频繁更新
+const localSetData = ref({ ...settingsStore.setData });
+
+// 在组件卸载时保存设置
+onUnmounted(() => {
+  // 确保最终设置被保存
+  settingsStore.setSetData(localSetData.value);
+});
+
 const checking = ref(false);
 const updateInfo = ref<UpdateResult>({
   hasUpdate: false,
@@ -490,35 +503,47 @@ const updateInfo = ref<UpdateResult>({
 
 const { t } = useI18n();
 
-const setData = computed(() => {
-  const data = store.state.setData;
-  // 确保代理配置存在
-  if (!data.proxyConfig) {
-    data.proxyConfig = {
-      enable: false,
-      protocol: 'http',
-      host: '127.0.0.1',
-      port: 7890
-    };
+// 创建一个防抖的保存函数
+// const debouncedSaveSettings = debounce((newData) => {
+//   settingsStore.setSetData(newData);
+// }, 500);
+
+const saveSettings = useDebounceFn((data) => {
+  settingsStore.setSetData(data);
+}, 500);
+
+// 使用计算属性来管理设置数据
+const setData = computed({
+  get: () => localSetData.value,
+  set: (newData) => {
+    localSetData.value = newData;
   }
-  // 确保音质设置存在
-  if (!data.musicQuality) {
-    data.musicQuality = 'higher';
-  }
-  return data;
 });
 
+// 监听localSetData变化，保存设置
 watch(
-  () => setData.value,
-  (newVal) => {
-    store.commit('setSetData', newVal);
+  () => localSetData.value,
+  (newValue) => {
+    saveSettings(newValue);
   },
   { deep: true }
 );
 
+// 监听store中setData的变化，同步到本地
+watch(
+  () => settingsStore.setData,
+  (newValue) => {
+    // 只在初始加载时更新本地数据，避免循环更新
+    if (JSON.stringify(localSetData.value) !== JSON.stringify(newValue)) {
+      localSetData.value = { ...newValue };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 const isDarkTheme = computed({
-  get: () => store.state.theme === 'dark',
-  set: () => store.commit('toggleTheme')
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
 });
 
 const openAuthor = () => {
@@ -552,16 +577,16 @@ const checkForUpdates = async (isClick = false) => {
 };
 
 const openReleasePage = () => {
-  store.commit('setShowUpdateModal', true);
+  settingsStore.showUpdateModal = true;
 };
 
 const selectDownloadPath = async () => {
   const path = await selectDirectory(message);
   if (path) {
-    store.commit('setSetData', {
+    setData.value = {
       ...setData.value,
       downloadPath: path
-    });
+    };
   }
 };
 
@@ -606,7 +631,7 @@ const proxyRules: FormRules = {
 };
 
 // 使用 store 中的字体列表
-const systemFonts = computed(() => store.state.systemFonts);
+const systemFonts = computed(() => settingsStore.systemFonts);
 
 // 已选择的字体列表
 const selectedFonts = ref<string[]>([]);
@@ -622,17 +647,17 @@ watch(
   (newFonts) => {
     // 如果没有选择任何字体，使用系统默认字体
     if (newFonts.length === 0) {
-      store.commit('setSetData', {
+      setData.value = {
         ...setData.value,
         fontFamily: 'system-ui'
-      });
+      };
       return;
     }
     // 将选择的字体组合成字体列表
-    store.commit('setSetData', {
+    setData.value = {
       ...setData.value,
       fontFamily: newFonts.join(',')
-    });
+    };
   },
   { deep: true }
 );
@@ -660,10 +685,10 @@ onMounted(async () => {
   }
   // 确保enableRealIP有默认值
   if (setData.value.enableRealIP === undefined) {
-    store.commit('setSetData', {
+    setData.value = {
       ...setData.value,
       enableRealIP: false
-    });
+    };
   }
 });
 
@@ -686,7 +711,7 @@ const handleProxyConfirm = async () => {
   try {
     await formRef.value?.validate();
     // 保存代理配置时保留enable状态
-    store.commit('setSetData', {
+    setData.value = {
       ...setData.value,
       proxyConfig: {
         enable: setData.value.proxyConfig?.enable || false,
@@ -694,7 +719,7 @@ const handleProxyConfirm = async () => {
         host: proxyForm.value.host,
         port: proxyForm.value.port
       }
-    });
+    };
     showProxyModal.value = false;
     message.success(t('settings.network.messages.proxySuccess'));
   } catch (err) {
@@ -705,20 +730,20 @@ const handleProxyConfirm = async () => {
 const validateAndSaveRealIP = () => {
   const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
   if (!setData.value.realIP || ipRegex.test(setData.value.realIP)) {
-    store.commit('setSetData', {
+    setData.value = {
       ...setData.value,
       realIP: setData.value.realIP,
       enableRealIP: true
-    });
+    };
     if (setData.value.realIP) {
       message.success(t('settings.network.messages.realIPSuccess'));
     }
   } else {
     message.error(t('settings.network.messages.realIPError'));
-    store.commit('setSetData', {
+    setData.value = {
       ...setData.value,
       realIP: ''
-    });
+    };
   }
 };
 
@@ -727,11 +752,11 @@ watch(
   () => setData.value.enableRealIP,
   (newVal) => {
     if (!newVal) {
-      store.commit('setSetData', {
+      setData.value = {
         ...setData.value,
         realIP: '',
         enableRealIP: false
-      });
+      };
     }
   }
 );
@@ -795,7 +820,7 @@ const clearCache = async () => {
         localStorage.removeItem('favoriteList');
         break;
       case 'user':
-        store.commit('logout');
+        userStore.handleLogout();
         break;
       case 'settings':
         if (window.electron) {

src/renderer/views/user/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-page">
     <div
-      v-if="userDetail"
+      v-if="userDetail && user"
       class="left"
       :class="setAnimationClass('animate__fadeInLeft')"
       :style="{ backgroundImage: `url(${getImgUrl(user.backgroundUrl)})` }"
@@ -99,7 +99,6 @@ import { useMessage } from 'naive-ui';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';
 
 import { getListDetail } from '@/api/list';
 import { updatePlaylistTracks } from '@/api/music';
@@ -107,6 +106,8 @@ import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import MusicList from '@/components/MusicList.vue';
+import { usePlayerStore } from '@/store/modules/player';
+import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
 import { getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
@@ -116,7 +117,8 @@ defineOptions({
 });
 
 const { t } = useI18n();
-const store = useStore();
+const userStore = useUserStore();
+const playerStore = usePlayerStore();
 const router = useRouter();
 const userDetail = ref<IUserDetail>();
 const playList = ref<any[]>([]);
@@ -128,7 +130,7 @@ const list = ref<Playlist>();
 const listLoading = ref(false);
 const message = useMessage();
 
-const user = computed(() => store.state.user);
+const user = computed(() => userStore.user);
 
 onBeforeUnmount(() => {
   mounted.value = false;
@@ -145,8 +147,8 @@ const checkLoginStatus = () => {
   }
 
   // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
-  if (!store.state.user && userData) {
-    store.state.user = JSON.parse(userData);
+  if (!userStore.user && userData) {
+    userStore.setUser(JSON.parse(userData));
   }
 
   return true;
@@ -165,27 +167,36 @@ const loadData = async () => {
   try {
     infoLoading.value = true;
 
-    const { data: userData } = await getUserDetail(user.value.userId);
-    if (!mounted.value) return;
-    userDetail.value = userData;
+    if (!user.value) {
+      console.warn('用户数据不存在，尝试重新获取');
+      // 可以尝试重新获取用户数据
+      return;
+    }
 
-    const { data: playlistData } = await getUserPlaylist(user.value.userId);
-    if (!mounted.value) return;
-    playList.value = playlistData.playlist;
+    // 使用 Promise.all 并行请求提高效率
+    const [userDetailRes, playlistRes, recordRes] = await Promise.all([
+      getUserDetail(user.value.userId),
+      getUserPlaylist(user.value.userId),
+      getUserRecord(user.value.userId)
+    ]);
 
-    const { data: recordData } = await getUserRecord(user.value.userId);
     if (!mounted.value) return;
-    recordList.value = recordData.allData.map((item: any) => ({
+
+    userDetail.value = userDetailRes.data;
+    playList.value = playlistRes.data.playlist;
+    recordList.value = recordRes.data.allData.map((item: any) => ({
       ...item,
       ...item.song,
       picUrl: item.song.al.picUrl
     }));
   } catch (error: any) {
     console.error('加载用户页面失败:', error);
-    // 如果获取用户数据失败，可能是token过期
     if (error.response?.status === 401) {
-      store.commit('logout');
+      userStore.handleLogout();
       router.push('/login');
+    } else {
+      // 添加更多错误处理和重试逻辑
+      message.error(t('user.message.loadFailed'));
     }
   } finally {
     if (mounted.value) {
@@ -208,22 +219,18 @@ watch(
 
 // 监听用户状态变化
 watch(
-  () => store.state.user,
+  () => userStore.user,
   (newUser) => {
     if (!mounted.value) return;
-
-    if (!newUser) {
-      router.push('/login');
-    } else {
+    if (newUser) {
       loadPage();
     }
-  },
-  { immediate: true }
+  }
 );
 
 // 页面挂载时检查登录状态
 onMounted(() => {
-  checkLoginStatus();
+  checkLoginStatus() && loadData();
 });
 
 // 展示歌单
@@ -271,7 +278,7 @@ const handleRemoveFromPlaylist = async (songId: number) => {
 
 const handlePlay = () => {
   const tracks = recordList.value || [];
-  store.commit('setPlayList', tracks);
+  playerStore.setPlayList(tracks);
 };
 </script>
 

tsconfig.node.json

@@ -1,8 +1,16 @@
 {
   "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
-  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*", "src/i18n/**/*"],
+  "include": [
+    "electron.vite.config.*",
+    "src/main/**/*",
+    "src/preload/**/*",
+    "src/i18n/**/*"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["electron-vite/node"]
+    "types": [
+      "electron-vite/node"
+    ],
+    "moduleResolution": "bundler",
   }
-}
+}