fix(core): 修复事件监听器泄漏

- App.vue: offline 监听器添加 onUnmounted 清理，移除冗余 console.log - MusicHook.ts: document.onkeyup 直接赋值改为 addEventListener + 防重复 - MusicHook.ts: audio-ready 监听器提取为命名函数，先移除再注册防堆叠
fix(player): 修复迷你模式恢复后歌词页面空白偏移
2026-04-14 14:50:50 +08:00 · 2026-03-29 14:22:33 +08:00 · 2026-03-29 14:04:55 +08:00 · 2026-03-29 14:04:39 +08:00 · 2026-03-29 13:30:36 +08:00
31 changed files with 587 additions and 931 deletions
--- a/.github/workflows/pr-check.yml
+++ b/.github/workflows/pr-check.yml
@@ -1,71 +0,0 @@
-name: PR Check
-
-on:
-  pull_request:
-    branches: [main]
-    types: [opened, edited, synchronize, reopened]
-
-jobs:
-  # 检查 PR 标题是否符合 Conventional Commits 规范
-  pr-title:
-    name: PR Title
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Install commitlint
-        run: npm install --no-save @commitlint/cli @commitlint/config-conventional
-
-      - name: Validate PR title
-        env:
-          PR_TITLE: ${{ github.event.pull_request.title }}
-        run: echo "$PR_TITLE" | npx commitlint
-
-  # 检查所有提交信息是否符合 Conventional Commits 规范
-  commit-messages:
-    name: Commit Messages
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Install commitlint
-        run: npm install --no-save @commitlint/cli @commitlint/config-conventional
-
-      - name: Validate commit messages
-        run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
-
-  # 运行 lint 和类型检查
-  code-quality:
-    name: Code Quality
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Lint
-        run: npx eslint --max-warnings 0 "src/**/*.{ts,tsx,vue,js}"
-
-      - name: Type check
-        run: npm run typecheck
-
-      - name: I18n check
-        run: npm run lint:i18n
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1 +0,0 @@
-npx --no -- commitlint --edit "$1"
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,423 @@
+# CLAUDE.md
+
+本文件为 Claude Code (claude.ai/code) 提供项目指南。
+
+## 项目概述
+
+Alger Music Player 是基于 **Electron + Vue 3 + TypeScript** 构建的第三方网易云音乐播放器，支持桌面端（Windows/macOS/Linux）、Web 和移动端，具备本地 API 服务、桌面歌词、无损音乐下载、音源解锁、EQ 均衡器等功能。
+
+## 技术栈
+
+- **桌面端**: Electron 40 + electron-vite 5
+- **前端框架**: Vue 3.5 (Composition API + `<script setup>`)
+- **状态管理**: Pinia 3 + pinia-plugin-persistedstate
+- **UI 框架**: naive-ui（自动导入）
+- **样式**: Tailwind CSS 3（仅在模板中使用 class，禁止在 `<style>` 中使用 `@apply`）
+- **图标**: remixicon
+- **音频**: 原生 HTMLAudioElement + Web Audio API（EQ 均衡器）
+- **工具库**: VueUse, lodash
+- **国际化**: vue-i18n（5 种语言：zh-CN、en-US、ja-JP、ko-KR、zh-Hant）
+- **音乐 API**: netease-cloud-music-api-alger + @unblockneteasemusic/server
+- **自动更新**: electron-updater（GitHub Releases）
+- **构建**: Vite 6, electron-builder
+
+## 开发命令
+
+```bash
+# 安装依赖（推荐 Node 18+）
+npm install
+
+# 桌面端开发（推荐）
+npm run dev
+
+# Web 端开发（需自建 netease-cloud-music-api 服务）
+npm run dev:web
+
+# 类型检查
+npm run typecheck              # 全部检查
+npm run typecheck:node         # 主进程
+npm run typecheck:web          # 渲染进程
+
+# 代码规范
+npm run lint                   # ESLint + i18n 检查
+npm run format                 # Prettier 格式化
+
+# 构建
+npm run build                  # 构建渲染进程和主进程
+npm run build:win              # Windows 安装包
+npm run build:mac              # macOS DMG
+npm run build:linux            # AppImage, deb, rpm
+npm run build:unpack           # 仅构建不打包
+```
+
+## 项目架构
+
+### 目录结构
+
+```
+src/
+├── main/                      # Electron 主进程
+│   ├── index.ts               # 入口，窗口生命周期
+│   ├── modules/               # 功能模块（15 个文件）
+│   │   ├── window.ts          # 窗口管理（主窗口、迷你模式、歌词窗口）
+│   │   ├── tray.ts            # 系统托盘
+│   │   ├── shortcuts.ts       # 全局快捷键
+│   │   ├── fileManager.ts     # 下载管理
+│   │   ├── remoteControl.ts   # 远程控制 HTTP API
+│   │   └── update.ts          # 自动更新（electron-updater）
+│   ├── lyric.ts               # 歌词窗口
+│   ├── server.ts              # 本地 API 服务
+│   └── unblockMusic.ts        # 音源解锁服务
+│
+├── preload/index.ts           # IPC 桥接（暴露 window.api）
+│
+├── shared/                    # 主进程/渲染进程共享代码
+│   └── appUpdate.ts           # 更新状态类型定义
+│
+├── i18n/                      # 国际化
+│   ├── lang/                  # 语言文件（5 语言 × 15 分类 = 75 个文件）
+│   ├── main.ts                # 主进程 i18n
+│   ├── renderer.ts            # 渲染进程 i18n
+│   └── utils.ts               # i18n 工具
+│
+└── renderer/                  # Vue 应用
+    ├── store/modules/         # Pinia 状态（15 个模块）
+    │   ├── playerCore.ts      # 🔑 播放核心状态（纯状态：播放/暂停、音量、倍速）
+    │   ├── playlist.ts        # 🔑 播放列表管理（上/下一首、播放模式）
+    │   ├── settings.ts        # 应用设置
+    │   ├── user.ts            # 用户认证与同步
+    │   ├── lyric.ts           # 歌词状态
+    │   ├── music.ts           # 音乐元数据
+    │   └── favorite.ts        # 收藏管理
+    │
+    ├── services/              # 服务层
+    │   ├── audioService.ts    # 🔑 原生 HTMLAudioElement + Web Audio API（EQ、MediaSession）
+    │   ├── playbackController.ts # 🔑 播放控制流（playTrack 入口、generation 取消、初始化恢复）
+    │   ├── playbackRequestManager.ts # 请求 ID 追踪（供 usePlayerHooks 内部取消检查）
+    │   ├── preloadService.ts  # 下一首 URL 预验证
+    │   ├── SongSourceConfigManager.ts  # 单曲音源配置
+    │   └── translation-engines/       # 翻译引擎策略
+    │
+    ├── hooks/                 # 组合式函数（9 个文件）
+    │   ├── MusicHook.ts       # 🔑 音乐主逻辑（歌词、进度、快捷键）
+    │   ├── usePlayerHooks.ts  # 播放器 hooks
+    │   ├── useDownload.ts     # 下载功能
+    │   └── IndexDBHook.ts     # IndexedDB 封装
+    │
+    ├── api/                   # API 层（16 个文件）
+    │   ├── musicParser.ts     # 🔑 多音源 URL 解析（策略模式）
+    │   ├── music.ts           # 网易云音乐 API
+    │   ├── bilibili.ts        # B站音源
+    │   ├── gdmusic.ts         # GD Music 平台
+    │   ├── lxMusicStrategy.ts # LX Music 音源策略
+    │   ├── donation.ts        # 捐赠 API
+    │   └── parseFromCustomApi.ts  # 自定义 API 解析
+    │
+    ├── components/            # 组件（59+ 个文件）
+    │   ├── common/            # 通用组件（24 个）
+    │   ├── player/            # 播放器组件（10 个）
+    │   ├── settings/          # 设置弹窗组件（7 个）
+    │   └── ...
+    │
+    ├── views/                 # 页面（53 个文件）
+    │   ├── set/               # 设置页（已拆分为 Tab 组件）
+    │   │   ├── index.vue      # 设置页壳组件（导航 + provide/inject）
+    │   │   ├── keys.ts        # InjectionKey 定义
+    │   │   ├── SBtn.vue       # 自定义按钮组件
+    │   │   ├── SInput.vue     # 自定义输入组件
+    │   │   ├── SSelect.vue    # 自定义选择器组件
+    │   │   ├── SettingItem.vue
+    │   │   ├── SettingSection.vue
+    │   │   └── tabs/          # 7 个 Tab 组件
+    │   │       ├── BasicTab.vue
+    │   │       ├── PlaybackTab.vue
+    │   │       ├── ApplicationTab.vue
+    │   │       ├── NetworkTab.vue
+    │   │       ├── SystemTab.vue
+    │   │       ├── AboutTab.vue
+    │   │       └── DonationTab.vue
+    │   └── ...
+    │
+    ├── router/                # Vue Router（3 个文件）
+    ├── types/                 # TypeScript 类型（20 个文件）
+    ├── utils/                 # 工具函数（17 个文件）
+    ├── directive/             # 自定义指令
+    ├── const/                 # 常量定义
+    └── assets/                # 静态资源
+```
+
+### 核心模块职责
+
+| 模块 | 文件 | 职责 |
+|------|------|------|
+| 播放控制 | `services/playbackController.ts` | 🔑 播放入口（playTrack）、generation 取消、初始化恢复、URL 过期处理 |
+| 音频服务 | `services/audioService.ts` | 原生 HTMLAudioElement + Web Audio API、EQ 滤波、MediaSession |
+| 播放状态 | `store/playerCore.ts` | 纯状态：播放/暂停、音量、倍速、当前歌曲、音频设备 |
+| 播放列表 | `store/playlist.ts` | 列表管理、播放模式、上/下一首 |
+| 音源解析 | `api/musicParser.ts` | 多音源 URL 解析与缓存 |
+| 音乐钩子 | `hooks/MusicHook.ts` | 歌词解析、进度跟踪、键盘快捷键 |
+
+### 播放系统架构
+
+```
+用户操作 / 自动播放
+    ↓
+playbackController.playTrack(song)     ← 唯一入口，generation++ 取消旧操作
+    ├─ 加载歌词 + 背景色
+    ├─ 获取播放 URL（getSongDetail）
+    └─ audioService.play(url, track)
+         ├─ audio.src = url            ← 单一 HTMLAudioElement，换歌改 src
+         ├─ Web Audio API EQ 链        ← createMediaElementSource 只调一次
+         └─ 原生 DOM 事件 → emit
+              ↓
+         MusicHook 监听（进度、歌词同步、播放状态）
+```
+
+**关键设计**：
+- **Generation-based 取消**：每次 `playTrack()` 递增 generation，await 后检查是否过期，过期则静默退出
+- **单一 HTMLAudioElement**：启动时创建，永不销毁。换歌改 `audio.src`，EQ 链不重建
+- **Seek**：直接 `audio.currentTime = time`，无 Howler.js 的 pause→play 问题
+
+### 音源解析策略
+
+`musicParser.ts` 使用 **策略模式** 从多个来源解析音乐 URL：
+
+**优先级顺序**（可通过 `SongSourceConfigManager` 按曲配置）：
+1. `custom` - 自定义 API
+2. `bilibili` - B站音频
+3. `gdmusic` - GD Music 平台
+4. `lxmusic` - LX Music HTTP 源
+5. `unblock` - UnblockNeteaseMusic 服务
+
+**缓存策略**：
+- 成功的 URL 在 IndexedDB 缓存 30 分钟（`music_url_cache`）
+- 失败的尝试在内存中缓存 1 分钟（应用重启自动清除）
+- 音源配置变更时缓存失效
+
+### 设置页架构
+
+设置页（`views/set/`）采用 **provide/inject** 模式拆分为 7 个 Tab 组件：
+
+- `index.vue` 作为壳组件：管理 Tab 导航、`setData` 双向绑定与防抖保存
+- `keys.ts` 定义类型化的 InjectionKey：`SETTINGS_DATA_KEY`、`SETTINGS_MESSAGE_KEY`、`SETTINGS_DIALOG_KEY`
+- 自定义 UI 组件（`SBtn`、`SInput`、`SSelect`）替代部分 naive-ui 组件
+- 字体选择器保留 naive-ui `n-select`（需要 filterable + multiple + render-label）
+
+## 代码规范
+
+### 命名
+
+- **目录**: kebab-case（`components/music-player`）
+- **组件**: PascalCase（`MusicPlayer.vue`）
+- **组合式函数**: camelCase + `use` 前缀（`usePlayer.ts`）
+- **Store**: camelCase（`playerCore.ts`）
+- **常量**: UPPER_SNAKE_CASE（`MAX_RETRY_COUNT`）
+
+### TypeScript
+
+- **优先使用 `type` 而非 `interface`**
+- **禁止使用 `enum`，使用 `const` 对象 + `as const`**
+- 所有导出函数必须有类型标注
+
+```typescript
+// ✅ 正确
+type SongResult = { id: number; name: string };
+const PlayMode = { ORDER: 'order', LOOP: 'loop' } as const;
+
+// ❌ 避免
+interface ISongResult { ... }
+enum PlayMode { ... }
+```
+
+### Vue 组件结构
+
+```vue
+<script setup lang="ts">
+// 1. 导入（按类型分组）
+import { ref, computed, onMounted } from 'vue';
+import { usePlayerStore } from '@/store';
+import type { SongResult } from '@/types/music';
+
+// 2. Props & Emits
+const props = defineProps<{ id: number }>();
+const emit = defineEmits<{ play: [id: number] }>();
+
+// 3. Store
+const playerStore = usePlayerStore();
+
+// 4. 响应式状态（使用描述性命名：isLoading, hasError）
+const isLoading = ref(false);
+
+// 5. 计算属性
+const displayName = computed(() => /* ... */);
+
+// 6. 方法（动词开头命名）
+const handlePlay = () => { /* ... */ };
+
+// 7. 生命周期钩子
+onMounted(() => { /* ... */ });
+</script>
+
+<template>
+  <!-- naive-ui 组件 + Tailwind CSS -->
+</template>
+```
+
+### 样式规范
+
+- **禁止在 `<style>` 中使用 `@apply`**，所有 Tailwind 类直接写在模板中
+- 如发现代码中有 `@apply` 用法，应优化为内联 Tailwind class
+- `<style scoped>` 仅用于无法用 Tailwind 实现的 CSS（如 keyframes 动画、`:deep()` 穿透）
+
+### 导入约定
+
+- **naive-ui 组件**：自动导入，无需手动 import
+- **Vue 组合式 API**：`useDialog`、`useMessage`、`useNotification`、`useLoadingBar` 自动导入
+- **路径别名**：`@` → `src/renderer`，`@i18n` → `src/i18n`
+
+## 关键实现模式
+
+### 状态持久化
+
+Store 使用 `pinia-plugin-persistedstate` 自动持久化：
+
+```typescript
+export const useXxxStore = defineStore('xxx', () => {
+  // store 逻辑
+}, {
+  persist: {
+    key: 'xxx-store',
+    storage: localStorage,
+    pick: ['fieldsToPersist']  // 仅持久化指定字段
+  }
+});
+```
+
+### IPC 通信
+
+```typescript
+// 主进程 (src/main/modules/*)
+ipcMain.handle('channel-name', async (_, args) => {
+  return result;
+});
+
+// Preload (src/preload/index.ts)
+const api = {
+  methodName: (args) => ipcRenderer.invoke('channel-name', args)
+};
+contextBridge.exposeInMainWorld('api', api);
+
+// 渲染进程 (src/renderer/*)
+const result = await window.api.methodName(args);
+```
+
+### IndexedDB 使用
+
+使用 `IndexDBHook` 组合式函数：
+
+```typescript
+const db = await useIndexedDB('dbName', [
+  { name: 'storeName', keyPath: 'id' }
+], version);
+
+const { saveData, getData, deleteData } = db;
+await saveData('storeName', { id: 1, data: 'value' });
+const data = await getData('storeName', 1);
+```
+
+### 新增页面
+
+1. 创建 `src/renderer/views/xxx/index.vue`
+2. 在 `src/renderer/router/other.ts` 中添加路由
+3. 在 `src/i18n/lang/*/` 下所有 5 种语言中添加 i18n 键值
+
+### 新增 Store
+
+```typescript
+// src/renderer/store/modules/xxx.ts
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useXxxStore = defineStore('xxx', () => {
+  const state = ref(initialValue);
+  const action = () => { /* ... */ };
+  return { state, action };
+});
+
+// 在 src/renderer/store/index.ts 中导出
+export * from './modules/xxx';
+```
+
+### 新增音源策略
+
+编辑 `src/renderer/api/musicParser.ts`：
+
+```typescript
+class NewStrategy implements MusicSourceStrategy {
+  name = 'new';
+  priority = 5;
+  canHandle(sources: string[]) { return sources.includes('new'); }
+  async parse(id: number, data: any): Promise<ParsedMusicResult> {
+    // 实现解析逻辑
+  }
+}
+
+// 在 ParserManager 构造函数中注册
+this.strategies.push(new NewStrategy());
+```
+
+## 平台相关说明
+
+### Web 端开发
+
+运行 `npm run dev:web` 需要：
+1. 自建 `netease-cloud-music-api` 服务
+2. 在项目根目录创建 `.env.development.local`：
+   ```env
+   VITE_API=https://your-api-server.com
+   VITE_API_MUSIC=https://your-unblock-server.com
+   ```
+
+### Electron 功能
+
+- **窗口管理**: `src/main/modules/window.ts`（主窗口、迷你模式、歌词窗口）
+- **系统托盘**: `src/main/modules/tray.ts`
+- **全局快捷键**: `src/main/modules/shortcuts.ts`
+- **自动更新**: `src/main/modules/update.ts`（electron-updater + GitHub Releases）
+- **远程控制**: `src/main/modules/remoteControl.ts`（HTTP API 远程播放控制）
+- **磁盘缓存**: 音乐和歌词文件缓存，支持可配置目录、容量上限、LRU/FIFO 清理策略
+
+## API 请求注意事项
+
+- **axios 响应结构**：`request.get('/xxx')` 返回 axios response，实际数据在 `res.data` 中。若 API 本身也有 `data` 字段（如 `/personal_fm` 返回 `{data: [...], code: 200}`），则需要 `res.data.data` 才能拿到真正的数组，**不要** 直接用 `res.data` 当结果。
+- **避免并发请求风暴**：首页不要一次性并发请求大量接口（如 15 个歌单详情），会导致本地 API 服务与 `music.163.com` 的 TLS 连接被 reset（502）。应使用懒加载（hover 时加载）或严格限制并发数。
+- **timestamp 参数**：对 `/personal_fm` 等需要实时数据的接口，传 `timestamp: Date.now()` 避免服务端缓存和 stale 连接。`request.ts` 拦截器已自动添加 timestamp，API 层无需重复添加。
+
+### 本地 API 服务调试
+
+- **地址**：`http://127.0.0.1:{port}`，默认端口 `30488`，可在设置中修改
+- **API 文档**：基于 [NeteaseCloudMusicApi](https://www.npmjs.com/package/NeteaseCloudMusicApi)（v4.29），接口文档参见  node_modules/NeteaseCloudMusicApi/public/docs/home.md
+- **调试方式**：可直接用 `curl` 测试接口，例如：
+  ```bash
+  # 测试私人FM（需登录 cookie）
+  curl "http://127.0.0.1:30488/personal_fm?timestamp=$(date +%s000)"
+  # 测试歌单详情
+  curl "http://127.0.0.1:30488/playlist/detail?id=12449928929"
+  # 测试FM不喜欢
+  curl -X POST "http://127.0.0.1:30488/fm_trash?id=歌曲ID&timestamp=$(date +%s000)"
+  ```
+- **502 排查**：通常是并发请求过多导致 TLS 连接 reset，用 curl 单独调用可验证接口本身是否正常
+- **Cookie 传递**：渲染进程通过 `request.ts` 拦截器自动附加 `localStorage` 中的 token
+
+## 重要注意事项
+
+- **主分支**: `dev_electron`（PR 目标分支，非 `main`）
+- **自动导入**: naive-ui 组件、Vue 组合式 API（`ref`、`computed` 等）均已自动导入
+- **代码风格**: 使用 ESLint + Prettier，通过 husky + lint-staged 在 commit 时自动执行
+- **国际化**: 所有面向用户的文字必须翻译为 5 种语言
+- **提交规范**: commit message 中禁止包含 `Co-Authored-By` 信息
+- **IndexedDB 存储**:
+  - `music`: 歌曲元数据缓存
+  - `music_lyric`: 歌词缓存
+  - `api_cache`: 通用 API 响应缓存
+  - `music_url_cache`: 音乐 URL 缓存（30 分钟 TTL）
--- a/build/entitlements.mac.plist
+++ b/build/entitlements.mac.plist
@@ -16,5 +16,7 @@
    <true/>
    <key>com.apple.security.files.downloads.read-write</key>
    <true/>
+    <key>com.apple.security.device.microphone</key>
+    <true/>
  </dict>
 </plist>
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,12 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    'type-enum': [
-      2,
-      'always',
-      ['feat', 'fix', 'perf', 'refactor', 'docs', 'style', 'test', 'build', 'ci', 'chore', 'revert']
-    ],
-    'subject-empty': [2, 'never'],
-    'type-empty': [2, 'never']
-  }
-};
--- a/fix-sandbox.js
+++ b/fix-sandbox.js
@@ -1,21 +0,0 @@
-/**
- * 修复 Linux 下 Electron sandbox 权限问题
- * chrome-sandbox 需要 root 拥有且权限为 4755
- *
- * 注意：此脚本需要 sudo 权限，仅在 CI 环境或手动执行时使用
- * 用法：sudo node fix-sandbox.js
- */
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-if (process.platform === 'linux') {
-  const sandboxPath = path.resolve('./node_modules/electron/dist/chrome-sandbox');
-  if (fs.existsSync(sandboxPath)) {
-    execSync(`sudo chown root:root ${sandboxPath}`);
-    execSync(`sudo chmod 4755 ${sandboxPath}`);
-    console.log('[fix-sandbox] chrome-sandbox permissions fixed');
-  } else {
-    console.log('[fix-sandbox] chrome-sandbox not found, skipping');
-  }
-}
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
    "dev:web": "vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
-    "fix-sandbox": "node fix-sandbox.js",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win --publish never",
    "build:mac": "npm run build && electron-builder --mac --x64 --publish never && cp dist/latest-mac.yml dist/latest-mac-x64.yml && electron-builder --mac --arm64 --publish never && cp dist/latest-mac.yml dist/latest-mac-arm64.yml && node scripts/merge_latest_mac_yml.mjs dist/latest-mac-x64.yml dist/latest-mac-arm64.yml dist/latest-mac.yml",
@@ -37,7 +36,6 @@
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.2",
    "@electron-toolkit/utils": "^4.0.0",
-    "@httptoolkit/dbus-native": "^0.1.5",
    "@unblockneteasemusic/server": "^0.27.10",
    "cors": "^2.8.5",
    "crypto-js": "^4.2.0",
@@ -51,7 +49,6 @@
    "form-data": "^4.0.5",
    "husky": "^9.1.7",
    "jsencrypt": "^3.5.4",
-    "mpris-service": "^2.1.2",
    "music-metadata": "^11.10.3",
    "netease-cloud-music-api-alger": "^4.30.0",
    "node-fetch": "^2.7.0",
@@ -61,8 +58,6 @@
    "vue-i18n": "^11.2.2"
  },
  "devDependencies": {
-    "@commitlint/cli": "^20.5.0",
-    "@commitlint/config-conventional": "^20.5.0",
    "@electron-toolkit/eslint-config": "^2.1.0",
    "@electron-toolkit/eslint-config-ts": "^3.1.0",
    "@electron-toolkit/tsconfig": "^1.0.1",
@@ -153,6 +148,7 @@
      "entitlements": "build/entitlements.mac.plist",
      "entitlementsInherit": "build/entitlements.mac.plist",
      "extendInfo": {
+        "NSMicrophoneUsageDescription": "AlgerMusicPlayer needs access to the microphone for audio visualization.",
        "NSCameraUsageDescription": "Application requests access to the device's camera.",
        "NSDocumentsFolderUsageDescription": "Application requests access to the user's Documents folder.",
        "NSDownloadsFolderUsageDescription": "Application requests access to the user's Downloads folder."
@@ -226,9 +222,5 @@
      "electron",
      "esbuild"
    ]
-  },
-  "optionalDependencies": {
-    "jsbi": "^4.3.2",
-    "x11": "^2.3.0"
  }
 }
--- a/resources/manifest.json
+++ b/resources/manifest.json
@@ -1,11 +1,5 @@
 {
-  "name": "Alger Music Player",
-  "short_name": "AlgerMusic",
-  "description": "AlgerMusicPlayer 音乐播放器，支持在线播放、歌词显示、音乐下载等功能。",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000",
+  "name": "Alger Music PWA",
  "icons": [
    {
      "src": "./icon.png",
--- a/src/i18n/lang/en-US/comp.ts
+++ b/src/i18n/lang/en-US/comp.ts
@@ -223,9 +223,6 @@ export default {
    operationFailed: 'Operation Failed',
    songsAlreadyInPlaylist: 'Songs already in playlist',
    locateCurrent: 'Locate current song',
-    scrollToTop: 'Scroll to top',
-    compactLayout: 'Compact layout',
-    normalLayout: 'Normal layout',
    historyRecommend: 'Daily History',
    fetchDatesFailed: 'Failed to fetch dates',
    fetchSongsFailed: 'Failed to fetch songs',
--- a/src/i18n/lang/en-US/download.ts
+++ b/src/i18n/lang/en-US/download.ts
@@ -58,14 +58,6 @@ export default {
    success: 'Download records cleared',
    failed: 'Failed to clear download records'
  },
-  save: {
-    title: 'Save Settings',
-    message: 'Current download settings are not saved. Do you want to save the changes?',
-    confirm: 'Save',
-    cancel: 'Cancel',
-    discard: 'Discard',
-    saveSuccess: 'Download settings saved'
-  },
  message: {
    downloadComplete: '{filename} download completed',
    downloadFailed: '{filename} download failed: {error}'
--- a/src/i18n/lang/ja-JP/comp.ts
+++ b/src/i18n/lang/ja-JP/comp.ts
@@ -223,9 +223,6 @@ export default {
    addToPlaylistSuccess: 'プレイリストに追加しました',
    songsAlreadyInPlaylist: '楽曲は既にプレイリストに存在します',
    locateCurrent: '再生中の曲を表示',
-    scrollToTop: 'トップに戻る',
-    compactLayout: 'コンパクト表示',
-    normalLayout: '通常表示',
    historyRecommend: '履歴の日次推薦',
    fetchDatesFailed: '日付リストの取得に失敗しました',
    fetchSongsFailed: '楽曲リストの取得に失敗しました',
--- a/src/i18n/lang/ja-JP/download.ts
+++ b/src/i18n/lang/ja-JP/download.ts
@@ -58,14 +58,6 @@ export default {
    success: 'ダウンロード記録をクリアしました',
    failed: 'ダウンロード記録のクリアに失敗しました'
  },
-  save: {
-    title: '設定を保存',
-    message: '現在のダウンロード設定が保存されていません。変更を保存しますか？',
-    confirm: '保存',
-    cancel: 'キャンセル',
-    discard: '破棄',
-    saveSuccess: 'ダウンロード設定を保存しました'
-  },
  message: {
    downloadComplete: '{filename}のダウンロードが完了しました',
    downloadFailed: '{filename}のダウンロードに失敗しました: {error}'
--- a/src/i18n/lang/ko-KR/comp.ts
+++ b/src/i18n/lang/ko-KR/comp.ts
@@ -222,9 +222,6 @@ export default {
    addToPlaylistSuccess: '재생 목록에 추가 성공',
    songsAlreadyInPlaylist: '곡이 이미 재생 목록에 있습니다',
    locateCurrent: '현재 재생 곡 찾기',
-    scrollToTop: '맨 위로',
-    compactLayout: '간결한 레이아웃',
-    normalLayout: '일반 레이아웃',
    historyRecommend: '일일 기록 권장',
    fetchDatesFailed: '날짜를 가져오지 못했습니다',
    fetchSongsFailed: '곡을 가져오지 못했습니다',
--- a/src/i18n/lang/ko-KR/download.ts
+++ b/src/i18n/lang/ko-KR/download.ts
@@ -58,14 +58,6 @@ export default {
    success: '다운로드 기록이 지워졌습니다',
    failed: '다운로드 기록 삭제에 실패했습니다'
  },
-  save: {
-    title: '설정 저장',
-    message: '현재 다운로드 설정이 저장되지 않았습니다. 변경 사항을 저장하시겠습니까?',
-    confirm: '저장',
-    cancel: '취소',
-    discard: '포기',
-    saveSuccess: '다운로드 설정이 저장됨'
-  },
  message: {
    downloadComplete: '{filename} 다운로드 완료',
    downloadFailed: '{filename} 다운로드 실패: {error}'
--- a/src/i18n/lang/zh-CN/comp.ts
+++ b/src/i18n/lang/zh-CN/comp.ts
@@ -216,9 +216,6 @@ export default {
    addToPlaylistSuccess: '添加到播放列表成功',
    songsAlreadyInPlaylist: '歌曲已存在于播放列表中',
    locateCurrent: '定位当前播放',
-    scrollToTop: '回到顶部',
-    compactLayout: '紧凑布局',
-    normalLayout: '常规布局',
    historyRecommend: '历史日推',
    fetchDatesFailed: '获取日期列表失败',
    fetchSongsFailed: '获取歌曲列表失败',
--- a/src/i18n/lang/zh-CN/download.ts
+++ b/src/i18n/lang/zh-CN/download.ts
@@ -57,14 +57,6 @@ export default {
    success: '下载记录已清空',
    failed: '清空下载记录失败'
  },
-  save: {
-    title: '保存设置',
-    message: '当前下载设置未保存，是否保存更改？',
-    confirm: '保存',
-    cancel: '取消',
-    discard: '放弃',
-    saveSuccess: '下载设置已保存'
-  },
  message: {
    downloadComplete: '{filename} 下载完成',
    downloadFailed: '{filename} 下载失败: {error}'
--- a/src/i18n/lang/zh-Hant/comp.ts
+++ b/src/i18n/lang/zh-Hant/comp.ts
@@ -216,9 +216,6 @@ export default {
    addToPlaylistSuccess: '新增至播放清單成功',
    songsAlreadyInPlaylist: '歌曲已存在於播放清單中',
    locateCurrent: '定位當前播放',
-    scrollToTop: '回到頂部',
-    compactLayout: '緊湊佈局',
-    normalLayout: '常規佈局',
    historyRecommend: '歷史日推',
    fetchDatesFailed: '獲取日期列表失敗',
    fetchSongsFailed: '獲取歌曲列表失敗',
--- a/src/i18n/lang/zh-Hant/download.ts
+++ b/src/i18n/lang/zh-Hant/download.ts
@@ -57,14 +57,6 @@ export default {
    success: '下載記錄已清空',
    failed: '清空下載記錄失敗'
  },
-  save: {
-    title: '儲存設定',
-    message: '目前下載設定尚未儲存，是否儲存變更？',
-    confirm: '儲存',
-    cancel: '取消',
-    discard: '放棄',
-    saveSuccess: '下載設定已儲存'
-  },
  message: {
    downloadComplete: '{filename} 下載完成',
    downloadFailed: '{filename} 下載失敗: {error}'
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -13,7 +13,6 @@ import { initializeFonts } from './modules/fonts';
 import { initializeLocalMusicScanner } from './modules/localMusicScanner';
 import { initializeLoginWindow } from './modules/loginWindow';
 import { initLxMusicHttp } from './modules/lxMusicHttp';
-import { initializeMpris, updateMprisCurrentSong, updateMprisPlayState } from './modules/mpris';
 import { initializeOtherApi } from './modules/otherApi';
 import { initializeRemoteControl } from './modules/remoteControl';
 import { initializeShortcuts } from './modules/shortcuts';
@@ -83,9 +82,6 @@ function initialize(configStore: any) {
  // 初始化远程控制服务
  initializeRemoteControl(mainWindow);

-  // 初始化 MPRIS 服务 (Linux)
-  initializeMpris(mainWindow);
-
  // 初始化更新处理程序
  setupUpdateHandlers(mainWindow);
 }
@@ -96,11 +92,6 @@ const isSingleInstance = app.requestSingleInstanceLock();
 if (!isSingleInstance) {
  app.quit();
 } else {
-  // 禁用 Chromium 内置的 MediaSession MPRIS 服务，避免重复显示
-  if (process.platform === 'linux') {
-    app.commandLine.appendSwitch('disable-features', 'MediaSessionService');
-  }
-
  // 在应用准备就绪前初始化GPU加速设置
  // 必须在 app.ready 之前调用 disableHardwareAcceleration
  try {
@@ -180,13 +171,11 @@ if (!isSingleInstance) {
  // 监听播放状态变化
  ipcMain.on('update-play-state', (_, playing: boolean) => {
    updatePlayState(playing);
-    updateMprisPlayState(playing);
  });

  // 监听当前歌曲变化
  ipcMain.on('update-current-song', (_, song: any) => {
    updateCurrentSong(song);
-    updateMprisCurrentSong(song);
  });

  // 所有窗口关闭时的处理
--- a/src/main/modules/mpris.ts
+++ b/src/main/modules/mpris.ts
@@ -1,270 +0,0 @@
-import { app, BrowserWindow, ipcMain } from 'electron';
-import Player from 'mpris-service';
-
-let dbusModule: any;
-try {
-  dbusModule = require('@httptoolkit/dbus-native');
-} catch {
-  // dbus-native 不可用（非 Linux 环境）
-}
-
-interface SongInfo {
-  id?: number | string;
-  name: string;
-  picUrl?: string;
-  ar?: Array<{ name: string }>;
-  artists?: Array<{ name: string }>;
-  al?: { name: string };
-  album?: { name: string };
-  duration?: number;
-  dt?: number;
-  song?: {
-    artists?: Array<{ name: string }>;
-    album?: { name: string };
-    duration?: number;
-    picUrl?: string;
-  };
-  [key: string]: any;
-}
-
-let mprisPlayer: Player | null = null;
-let mainWindow: BrowserWindow | null = null;
-let currentPosition = 0;
-let trayLyricIface: any = null;
-let trayLyricBus: any = null;
-
-// 保存 IPC 处理函数引用，用于清理
-let onPositionUpdate: ((event: any, position: number) => void) | null = null;
-let onTrayLyricUpdate: ((event: any, lrcObj: string) => void) | null = null;
-
-export function initializeMpris(mainWindowRef: BrowserWindow) {
-  if (process.platform !== 'linux') return;
-
-  if (mprisPlayer) {
-    return;
-  }
-
-  mainWindow = mainWindowRef;
-
-  try {
-    mprisPlayer = Player({
-      name: 'AlgerMusicPlayer',
-      identity: 'Alger Music Player',
-      supportedUriSchemes: ['file', 'http', 'https'],
-      supportedMimeTypes: [
-        'audio/mpeg',
-        'audio/mp3',
-        'audio/flac',
-        'audio/wav',
-        'audio/ogg',
-        'audio/aac',
-        'audio/m4a'
-      ],
-      supportedInterfaces: ['player']
-    });
-
-    mprisPlayer.on('quit', () => {
-      app.quit();
-    });
-
-    mprisPlayer.on('raise', () => {
-      if (mainWindow) {
-        mainWindow.show();
-        mainWindow.focus();
-      }
-    });
-
-    mprisPlayer.on('next', () => {
-      if (mainWindow) {
-        mainWindow.webContents.send('global-shortcut', 'nextPlay');
-      }
-    });
-
-    mprisPlayer.on('previous', () => {
-      if (mainWindow) {
-        mainWindow.webContents.send('global-shortcut', 'prevPlay');
-      }
-    });
-
-    mprisPlayer.on('pause', () => {
-      if (mainWindow) {
-        mainWindow.webContents.send('mpris-pause');
-      }
-    });
-
-    mprisPlayer.on('play', () => {
-      if (mainWindow) {
-        mainWindow.webContents.send('mpris-play');
-      }
-    });
-
-    mprisPlayer.on('playpause', () => {
-      if (mainWindow) {
-        mainWindow.webContents.send('global-shortcut', 'togglePlay');
-      }
-    });
-
-    mprisPlayer.on('stop', () => {
-      if (mainWindow) {
-        mainWindow.webContents.send('mpris-pause');
-      }
-    });
-
-    mprisPlayer.getPosition = (): number => {
-      return currentPosition;
-    };
-
-    mprisPlayer.on('seek', (offset: number) => {
-      if (mainWindow) {
-        const newPosition = Math.max(0, currentPosition + offset / 1000000);
-        mainWindow.webContents.send('mpris-seek', newPosition);
-      }
-    });
-
-    mprisPlayer.on('position', (event: { trackId: string; position: number }) => {
-      if (mainWindow) {
-        mainWindow.webContents.send('mpris-set-position', event.position / 1000000);
-      }
-    });
-
-    onPositionUpdate = (_, position: number) => {
-      currentPosition = position * 1000 * 1000;
-      if (mprisPlayer) {
-        mprisPlayer.seeked(position * 1000 * 1000);
-        mprisPlayer.getPosition = () => position * 1000 * 1000;
-        mprisPlayer.position = position * 1000 * 1000;
-      }
-    };
-    ipcMain.on('mpris-position-update', onPositionUpdate);
-
-    onTrayLyricUpdate = (_, lrcObj: string) => {
-      sendTrayLyric(lrcObj);
-    };
-    ipcMain.on('tray-lyric-update', onTrayLyricUpdate);
-
-    initTrayLyric();
-
-    console.log('[MPRIS] Service initialized');
-  } catch (error) {
-    console.error('[MPRIS] Failed to initialize:', error);
-  }
-}
-
-export function updateMprisPlayState(playing: boolean) {
-  if (!mprisPlayer || process.platform !== 'linux') return;
-  mprisPlayer.playbackStatus = playing ? 'Playing' : 'Paused';
-}
-
-export function updateMprisCurrentSong(song: SongInfo | null) {
-  if (!mprisPlayer || process.platform !== 'linux') return;
-
-  if (!song) {
-    mprisPlayer.metadata = {};
-    mprisPlayer.playbackStatus = 'Stopped';
-    return;
-  }
-
-  const artists =
-    song.ar?.map((a) => a.name).join(', ') ||
-    song.artists?.map((a) => a.name).join(', ') ||
-    song.song?.artists?.map((a) => a.name).join(', ') ||
-    '';
-  const album = song.al?.name || song.album?.name || song.song?.album?.name || '';
-  const duration = song.duration || song.dt || song.song?.duration || 0;
-
-  mprisPlayer.metadata = {
-    'mpris:trackid': mprisPlayer.objectPath(`track/${song.id || 0}`),
-    'mpris:length': duration * 1000,
-    'mpris:artUrl': song.picUrl || '',
-    'xesam:title': song.name || '',
-    'xesam:album': album,
-    'xesam:artist': artists ? [artists] : []
-  };
-}
-
-export function updateMprisPosition(position: number) {
-  if (!mprisPlayer || process.platform !== 'linux') return;
-  mprisPlayer.seeked(position * 1000000);
-}
-
-export function destroyMpris() {
-  if (onPositionUpdate) {
-    ipcMain.removeListener('mpris-position-update', onPositionUpdate);
-    onPositionUpdate = null;
-  }
-  if (onTrayLyricUpdate) {
-    ipcMain.removeListener('tray-lyric-update', onTrayLyricUpdate);
-    onTrayLyricUpdate = null;
-  }
-  if (mprisPlayer) {
-    mprisPlayer.quit();
-    mprisPlayer = null;
-  }
-}
-
-function initTrayLyric() {
-  if (process.platform !== 'linux' || !dbusModule) return;
-
-  const serviceName = 'org.gnome.Shell.TrayLyric';
-
-  try {
-    const sessionBus = dbusModule.sessionBus({});
-    trayLyricBus = sessionBus;
-
-    const dbusPath = '/org/freedesktop/DBus';
-    const dbusInterface = 'org.freedesktop.DBus';
-
-    sessionBus.invoke(
-      {
-        path: dbusPath,
-        interface: dbusInterface,
-        member: 'GetNameOwner',
-        destination: 'org.freedesktop.DBus',
-        signature: 's',
-        body: [serviceName]
-      },
-      (err: any, result: any) => {
-        if (err || !result) {
-          console.log('[TrayLyric] Service not running');
-        } else {
-          onServiceAvailable();
-        }
-      }
-    );
-  } catch (err) {
-    console.error('[TrayLyric] Failed to init:', err);
-  }
-
-  function onServiceAvailable() {
-    if (!trayLyricBus) return;
-    const path = '/' + serviceName.replace(/\./g, '/');
-    trayLyricBus.getService(serviceName).getInterface(path, serviceName, (err: any, iface: any) => {
-      if (err) {
-        console.error('[TrayLyric] Failed to get service interface:', err);
-        return;
-      }
-      trayLyricIface = iface;
-      console.log('[TrayLyric] Service interface ready');
-    });
-  }
-}
-
-function sendTrayLyric(lrcObj: string) {
-  if (!trayLyricIface || !trayLyricBus) return;
-
-  trayLyricBus.invoke(
-    {
-      path: '/org/gnome/Shell/TrayLyric',
-      interface: 'org.gnome.Shell.TrayLyric',
-      member: 'UpdateLyric',
-      destination: 'org.gnome.Shell.TrayLyric',
-      signature: 's',
-      body: [lrcObj]
-    },
-    (err: any, _result: any) => {
-      if (err) {
-        console.error('[TrayLyric] Failed to invoke UpdateLyric:', err);
-      }
-    }
-  );
-}
--- a/src/main/types/mpris-service.d.ts
+++ b/src/main/types/mpris-service.d.ts
@@ -1,23 +0,0 @@
-declare module 'mpris-service' {
-  interface PlayerOptions {
-    name: string;
-    identity: string;
-    supportedUriSchemes?: string[];
-    supportedMimeTypes?: string[];
-    supportedInterfaces?: string[];
-  }
-
-  interface Player {
-    on(event: string, callback: (...args: any[]) => void): void;
-    playbackStatus: string;
-    metadata: Record<string, any>;
-    position: number;
-    getPosition: () => number;
-    seeked(position: number): void;
-    objectPath(path: string): string;
-    quit(): void;
-  }
-
-  function Player(options: PlayerOptions): Player;
-  export = Player;
-}
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -52,11 +52,6 @@ export const textColors = ref<any>(getTextColors());
 export let playMusic: ComputedRef<SongResult>;
 export let artistList: ComputedRef<Artist[]>;

-let lastIndex = -1;
-
-// 缓存平台信息，避免每次歌词变化时同步 IPC 调用
-const cachedPlatform = isElectron ? window.electron.ipcRenderer.sendSync('get-platform') : 'web';
-
 export const musicDB = await useIndexedDB(
  'musicDB',
  [
@@ -334,12 +329,6 @@ const setupAudioListeners = () => {
            sendLyricToWin();
          }
        }
-        if (isElectron && lrcArray.value[nowIndex.value]) {
-          if (lastIndex !== nowIndex.value) {
-            sendTrayLyric(nowIndex.value);
-            lastIndex = nowIndex.value;
-          }
-        }

        // === 逐字歌词行内进度 ===
        const { start, end } = currentLrcTiming.value;
@@ -383,15 +372,6 @@ const setupAudioListeners = () => {
            );
          }
        }
-
-        // === MPRIS 进度更新（每 ~1 秒）===
-        if (isElectron && lyricThrottleCounter % 20 === 0) {
-          try {
-            window.electron.ipcRenderer.send('mpris-position-update', currentTime);
-          } catch {
-            // 忽略发送失败
-          }
-        }
      } catch (error) {
        console.error('进度更新 interval 出错:', error);
        // 出错时不清除 interval，让下一次 tick 继续尝试
@@ -440,11 +420,6 @@ const setupAudioListeners = () => {
        if (typeof currentTime === 'number' && !Number.isNaN(currentTime)) {
          nowTime.value = currentTime;

-          // === MPRIS seek 时同步进度 ===
-          if (isElectron) {
-            window.electron.ipcRenderer.send('mpris-position-update', currentTime);
-          }
-
          // 检查是否需要更新歌词
          const newIndex = getLrcIndex(nowTime.value);
          if (newIndex !== nowIndex.value) {
@@ -832,30 +807,6 @@ export const sendLyricToWin = () => {
  }
 };

-// 发送歌词到系统托盘歌词（TrayLyric）
-const sendTrayLyric = (index: number) => {
-  if (!isElectron || cachedPlatform !== 'linux') return;
-
-  try {
-    const lyric = lrcArray.value[index];
-    if (!lyric) return;
-
-    const currentTime = lrcTimeArray.value[index] || 0;
-    const nextTime = lrcTimeArray.value[index + 1] || currentTime + 3;
-    const duration = nextTime - currentTime;
-
-    const lrcObj = JSON.stringify({
-      content: lyric.text || '',
-      time: duration.toFixed(1),
-      sender: 'AlgerMusicPlayer'
-    });
-
-    window.electron.ipcRenderer.send('tray-lyric-update', lrcObj);
-  } catch (error) {
-    console.error('[TrayLyric] Failed to send:', error);
-  }
-};
-
 // 歌词同步定时器
 let lyricSyncInterval: any = null;

--- a/src/renderer/hooks/useProgressiveRender.ts
+++ b/src/renderer/hooks/useProgressiveRender.ts
@@ -1,96 +0,0 @@
-import { computed, type ComputedRef, type Ref,ref } from 'vue';
-
-import { usePlayerStore } from '@/store';
-import { isMobile } from '@/utils';
-
-type ProgressiveRenderOptions = {
-  /** 全量数据列表 */
-  items: ComputedRef<any[]> | Ref<any[]>;
-  /** 每项估算高度（px） */
-  itemHeight: ComputedRef<number> | number;
-  /** 列表区域的 CSS 选择器，用于计算偏移 */
-  listSelector: string;
-  /** 初始渲染数量 */
-  initialCount?: number;
-  /** 滚动到底部时的回调（用于加载更多数据） */
-  onReachEnd?: () => void;
-};
-
-export const useProgressiveRender = (options: ProgressiveRenderOptions) => {
-  const { items, itemHeight, listSelector, initialCount = 40, onReachEnd } = options;
-
-  const playerStore = usePlayerStore();
-  const renderLimit = ref(initialCount);
-
-  const getItemHeight = () => (typeof itemHeight === 'number' ? itemHeight : itemHeight.value);
-
-  /** 截取到 renderLimit 的可渲染列表 */
-  const renderedItems = computed(() => {
-    const all = items.value;
-    return all.slice(0, renderLimit.value);
-  });
-
-  /** 未渲染项的占位高度，让滚动条反映真实总高度 */
-  const placeholderHeight = computed(() => {
-    const unrendered = items.value.length - renderedItems.value.length;
-    return Math.max(0, unrendered) * getItemHeight();
-  });
-
-  /** 是否正在播放（用于动态底部间距） */
-  const isPlaying = computed(() => !!playerStore.playMusicUrl);
-
-  /** 内容区底部 padding，播放时留出播放栏空间 */
-  const contentPaddingBottom = computed(() =>
-    isPlaying.value && !isMobile.value ? '220px' : '80px'
-  );
-
-  /** 重置渲染限制 */
-  const resetRenderLimit = () => {
-    renderLimit.value = initialCount;
-  };
-
-  /** 扩展渲染限制到指定索引 */
-  const expandTo = (index: number) => {
-    renderLimit.value = Math.max(renderLimit.value, index);
-  };
-
-  /**
-   * 滚动事件处理函数，挂载到外层 n-scrollbar 的 @scroll
-   * 根据可视区域动态扩展 renderLimit
-   */
-  const handleScroll = (e: Event) => {
-    const target = e.target as HTMLElement;
-    const { scrollTop, clientHeight } = target;
-
-    const listSection = document.querySelector(listSelector) as HTMLElement;
-    const listStart = listSection?.offsetTop || 0;
-
-    const visibleBottom = scrollTop + clientHeight - listStart;
-    if (visibleBottom <= 0) return;
-
-    // 多渲染一屏作为缓冲
-    const bufferHeight = clientHeight;
-    const neededIndex = Math.ceil((visibleBottom + bufferHeight) / getItemHeight());
-    const allCount = items.value.length;
-
-    if (neededIndex > renderLimit.value) {
-      renderLimit.value = Math.min(neededIndex, allCount);
-    }
-
-    // 所有项都已渲染，通知外部加载更多数据
-    if (renderLimit.value >= allCount && onReachEnd) {
-      onReachEnd();
-    }
-  };
-
-  return {
-    renderLimit,
-    renderedItems,
-    placeholderHeight,
-    isPlaying,
-    contentPaddingBottom,
-    resetRenderLimit,
-    expandTo,
-    handleScroll
-  };
-};
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -25,7 +25,6 @@

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <link rel="manifest" href="/manifest.json" />

    <!-- 资源预加载 -->
    <link rel="preload" href="./assets/icon/iconfont.css" as="style" />
--- a/src/renderer/router/other.ts
+++ b/src/renderer/router/other.ts
@@ -53,8 +53,7 @@ const otherRouter = [
      showInMenu: false,
      back: true
    },
-    component: () => import('@/views/artist/detail.vue'),
-    props: (route) => ({ key: route.params.id })
+    component: () => import('@/views/artist/detail.vue')
  },
  {
    path: '/music-list/:id?',
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -605,6 +605,13 @@ class AudioService {

  public async getAudioOutputDevices(): Promise<AudioOutputDevice[]> {
    try {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        stream.getTracks().forEach((track) => track.stop());
+      } catch {
+        // Continue even if permission denied
+      }
+
      const devices = await navigator.mediaDevices.enumerateDevices();
      const audioOutputs = devices.filter((d) => d.kind === 'audiooutput');

--- a/src/renderer/store/modules/playlist.ts
+++ b/src/renderer/store/modules/playlist.ts
@@ -585,7 +585,8 @@ export const usePlaylistStore = defineStore(
        // Toggle play/pause for current song
        if (
          playerCore.playMusic.id === song.id &&
-          playerCore.playMusic.playMusicUrl === song.playMusicUrl
+          playerCore.playMusic.playMusicUrl === song.playMusicUrl &&
+          !song.isFirstPlay
        ) {
          if (playerCore.play) {
            playerCore.setPlayMusic(false);
--- a/src/renderer/utils/appShortcuts.ts
+++ b/src/renderer/utils/appShortcuts.ts
@@ -1,7 +1,6 @@
 import { onMounted, onUnmounted } from 'vue';

 import i18n from '@/../i18n/renderer';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore, useSettingsStore } from '@/store';

 import {
@@ -38,26 +37,6 @@ const onUpdateAppShortcuts = (_event: unknown, shortcuts: unknown) => {
  updateAppShortcuts(shortcuts);
 };

-const onMprisSeekOrSetPosition = (_event: unknown, position: number) => {
-  if (audioService) {
-    audioService.seek(position);
-  }
-};
-
-const onMprisPlay = async () => {
-  const playerStore = usePlayerStore();
-  if (!playerStore.play && playerStore.playMusic?.id) {
-    await playerStore.setPlay({ ...playerStore.playMusic });
-  }
-};
-
-const onMprisPause = async () => {
-  const playerStore = usePlayerStore();
-  if (playerStore.play) {
-    await playerStore.handlePause();
-  }
-};
-
 function shouldSkipAction(action: ShortcutAction): boolean {
  const now = Date.now();
  const lastTimestamp = actionTimestamps.get(action) ?? 0;
@@ -213,10 +192,6 @@ export function initAppShortcuts() {

  window.electron.ipcRenderer.on('global-shortcut', onGlobalShortcut);
  window.electron.ipcRenderer.on('update-app-shortcuts', onUpdateAppShortcuts);
-  window.electron.ipcRenderer.on('mpris-seek', onMprisSeekOrSetPosition);
-  window.electron.ipcRenderer.on('mpris-set-position', onMprisSeekOrSetPosition);
-  window.electron.ipcRenderer.on('mpris-play', onMprisPlay);
-  window.electron.ipcRenderer.on('mpris-pause', onMprisPause);

  const storedShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
  updateAppShortcuts(storedShortcuts);
@@ -236,10 +211,6 @@ export function cleanupAppShortcuts() {

  window.electron.ipcRenderer.removeListener('global-shortcut', onGlobalShortcut);
  window.electron.ipcRenderer.removeListener('update-app-shortcuts', onUpdateAppShortcuts);
-  window.electron.ipcRenderer.removeListener('mpris-seek', onMprisSeekOrSetPosition);
-  window.electron.ipcRenderer.removeListener('mpris-set-position', onMprisSeekOrSetPosition);
-  window.electron.ipcRenderer.removeListener('mpris-play', onMprisPlay);
-  window.electron.ipcRenderer.removeListener('mpris-pause', onMprisPause);

  document.removeEventListener('keydown', handleKeyDown);
 }
--- a/src/renderer/views/download/DownloadPage.vue
+++ b/src/renderer/views/download/DownloadPage.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="download-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
-    <n-scrollbar ref="scrollbarRef" class="h-full" @scroll="handleDownloadScroll">
-      <div class="download-content" :style="{ paddingBottom: contentPaddingBottom }">
+    <n-scrollbar class="h-full">
+      <div class="download-content pb-32">
        <!-- Hero Section -->
        <section class="hero-section relative overflow-hidden rounded-tl-2xl">
          <!-- Background with Blur -->
@@ -210,96 +210,86 @@
                </p>
              </div>
              <div v-else class="space-y-2">
-                <div class="downloaded-list-section">
+                <div
+                  v-for="(item, index) in downloadStore.completedList"
+                  :key="item.path || item.filePath"
+                  class="downloaded-item group animate-item p-3 rounded-2xl flex items-center gap-4 hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-all"
+                  :style="{ animationDelay: `${index * 0.03}s` }"
+                >
                  <div
-                    v-for="(item, index) in renderedDownloaded"
-                    :key="item.path || item.filePath"
-                    class="downloaded-item group p-3 rounded-2xl flex items-center gap-4 hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-all"
-                    :class="{ 'animate-item': index < 20 }"
-                    :style="index < 20 ? { animationDelay: `${index * 0.03}s` } : undefined"
+                    class="relative w-12 h-12 rounded-xl overflow-hidden shadow-lg flex-shrink-0"
                  >
+                    <img
+                      :src="getImgUrl(item.picUrl, '100y100')"
+                      class="w-full h-full object-cover"
+                      @error="handleCoverError"
+                    />
                    <div
-                      class="relative w-12 h-12 rounded-xl overflow-hidden shadow-lg flex-shrink-0"
+                      class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+                      @click="handlePlayMusic(item)"
                    >
-                      <img
-                        :src="getImgUrl(item.picUrl, '100y100')"
-                        class="w-full h-full object-cover"
-                        @error="handleCoverError"
-                      />
-                      <div
-                        class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
-                        @click="handlePlayMusic(item)"
-                      >
-                        <i class="ri-play-fill text-white text-xl" />
-                      </div>
-                    </div>
-
-                    <div class="flex-1 min-w-0">
-                      <div class="flex items-center gap-2">
-                        <span class="text-sm font-bold text-neutral-900 dark:text-white truncate">{{
-                          item.displayName || item.filename
-                        }}</span>
-                        <span class="text-xs text-neutral-400 flex-shrink-0">{{
-                          formatSize(item.size)
-                        }}</span>
-                      </div>
-                      <div class="flex items-center gap-4 mt-1">
-                        <span class="text-xs text-neutral-500 truncate max-w-[150px]">{{
-                          item.ar?.map((a) => a.name).join(', ')
-                        }}</span>
-                        <div
-                          class="hidden md:flex items-center gap-1 text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full truncate"
-                        >
-                          <i class="ri-folder-line" />
-                          <span class="truncate">{{
-                            shortenPath(item.path || item.filePath)
-                          }}</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="flex items-center gap-1">
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <button
-                            class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
-                            @click="copyPath(item.path || item.filePath)"
-                          >
-                            <i class="ri-file-copy-line" />
-                          </button>
-                        </template>
-                        {{ t('download.path.copy') || '复制路径' }}
-                      </n-tooltip>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <button
-                            class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
-                            @click="openDirectory(item.path || item.filePath)"
-                          >
-                            <i class="ri-folder-open-line" />
-                          </button>
-                        </template>
-                        {{ t('download.settingsPanel.open') }}
-                      </n-tooltip>
-                      <n-tooltip trigger="hover">
-                        <template #trigger>
-                          <button
-                            class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-red-500 hover:bg-red-500/10 transition-all"
-                            @click="handleDelete(item)"
-                          >
-                            <i class="ri-delete-bin-line" />
-                          </button>
-                        </template>
-                        {{ t('common.delete') }}
-                      </n-tooltip>
+                      <i class="ri-play-fill text-white text-xl" />
                    </div>
                  </div>
+
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm font-bold text-neutral-900 dark:text-white truncate">{{
+                        item.displayName || item.filename
+                      }}</span>
+                      <span class="text-xs text-neutral-400 flex-shrink-0">{{
+                        formatSize(item.size)
+                      }}</span>
+                    </div>
+                    <div class="flex items-center gap-4 mt-1">
+                      <span class="text-xs text-neutral-500 truncate max-w-[150px]">{{
+                        item.ar?.map((a) => a.name).join(', ')
+                      }}</span>
+                      <div
+                        class="hidden md:flex items-center gap-1 text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full truncate"
+                      >
+                        <i class="ri-folder-line" />
+                        <span class="truncate">{{ shortenPath(item.path || item.filePath) }}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center gap-1">
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <button
+                          class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
+                          @click="copyPath(item.path || item.filePath)"
+                        >
+                          <i class="ri-file-copy-line" />
+                        </button>
+                      </template>
+                      {{ t('download.path.copy') || '复制路径' }}
+                    </n-tooltip>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <button
+                          class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
+                          @click="openDirectory(item.path || item.filePath)"
+                        >
+                          <i class="ri-folder-open-line" />
+                        </button>
+                      </template>
+                      {{ t('download.settingsPanel.open') }}
+                    </n-tooltip>
+                    <n-tooltip trigger="hover">
+                      <template #trigger>
+                        <button
+                          class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-red-500 hover:bg-red-500/10 transition-all"
+                          @click="handleDelete(item)"
+                        >
+                          <i class="ri-delete-bin-line" />
+                        </button>
+                      </template>
+                      {{ t('common.delete') }}
+                    </n-tooltip>
+                  </div>
                </div>
-                <!-- 未渲染项占位 -->
-                <div
-                  v-if="downloadedPlaceholderHeight > 0"
-                  :style="{ height: downloadedPlaceholderHeight + 'px' }"
-                />
              </div>
            </n-spin>
          </div>
@@ -335,38 +325,8 @@
      @positive-click="clearDownloadRecords"
    />

-    <!-- 未保存下载设置确认对话框 -->
-    <n-modal
-      v-model:show="showNotSaveConfirm"
-      preset="dialog"
-      type="warning"
-      :z-index="3200"
-      :title="t('download.save.title')"
-      :content="t('download.save.message')"
-      :positive-text="t('download.save.confirm')"
-      :negative-text="t('download.save.discard')"
-      @positive-click="saveDownloadSettings"
-      @negative-click="discardDownloadSettings"
-    >
-      <template #action>
-        <n-button @click="showNotSaveConfirm = false">{{ t('download.save.cancel') }}</n-button>
-        <n-button type="error" @click="discardDownloadSettings">{{
-          t('download.save.discard')
-        }}</n-button>
-        <n-button type="primary" @click="saveDownloadSettings">{{
-          t('download.save.confirm')
-        }}</n-button>
-      </template>
-    </n-modal>
-
    <!-- 下载设置抽屉 -->
-    <n-drawer
-      :show="showSettingsDrawer"
-      :width="400"
-      placement="right"
-      :z-index="3100"
-      @update:show="handleDrawerUpdate"
-    >
+    <n-drawer v-model:show="showSettingsDrawer" :width="400" placement="right">
      <n-drawer-content :title="t('download.settingsPanel.title')" closable>
        <div class="download-settings-content space-y-8 py-4">
          <!-- Path Section -->
@@ -550,7 +510,6 @@ import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

-import { useProgressiveRender } from '@/hooks/useProgressiveRender';
 import { useDownloadStore } from '@/store/modules/download';
 import { usePlayerStore } from '@/store/modules/player';
 import type { SongResult } from '@/types/music';
@@ -562,23 +521,8 @@ const { t } = useI18n();
 const playerStore = usePlayerStore();
 const downloadStore = useDownloadStore();
 const message = useMessage();
-const scrollbarRef = ref();

-const completedList = computed(() => downloadStore.completedList);
-
-const {
-  renderedItems: renderedDownloaded,
-  placeholderHeight: downloadedPlaceholderHeight,
-  contentPaddingBottom,
-  handleScroll: handleDownloadScroll
-} = useProgressiveRender({
-  items: completedList,
-  itemHeight: 72,
-  listSelector: '.downloaded-list-section',
-  initialCount: 40
-});
-
-const tabName = ref(downloadStore.downloadingList.length > 0 ? 'downloading' : 'downloaded');
+const tabName = ref('downloading');

 // ── Status helpers ──────────────────────────────────────────────────────────

@@ -761,40 +705,12 @@ const clearDownloadRecords = async () => {
 // ── Download settings ───────────────────────────────────────────────────────

 const showSettingsDrawer = ref(false);
-const showNotSaveConfirm = ref(false);
 const downloadSettings = ref({
  path: '',
  nameFormat: '{songName} - {artistName}',
  separator: ' - ',
  saveLyric: false
 });
-const originalDownloadSettings = ref({ ...downloadSettings.value });
-
-watch(showSettingsDrawer, (newVal) => {
-  if (newVal) {
-    originalDownloadSettings.value = { ...downloadSettings.value };
-  }
-});
-
-const handleDrawerUpdate = (show: boolean) => {
-  if (show) {
-    showSettingsDrawer.value = true;
-    return;
-  }
-  const isModified =
-    JSON.stringify(downloadSettings.value) !== JSON.stringify(originalDownloadSettings.value);
-  if (isModified) {
-    showNotSaveConfirm.value = true;
-  } else {
-    showSettingsDrawer.value = false;
-  }
-};
-
-const discardDownloadSettings = () => {
-  downloadSettings.value = { ...originalDownloadSettings.value };
-  showNotSaveConfirm.value = false;
-  showSettingsDrawer.value = false;
-};

 const formatComponents = ref([
  { id: 1, type: 'songName' },
@@ -908,9 +824,7 @@ const saveDownloadSettings = () => {
    downloadStore.refreshCompleted();
  }

-  originalDownloadSettings.value = { ...downloadSettings.value };
  message.success(t('download.settingsPanel.saveSuccess'));
-  showNotSaveConfirm.value = false;
  showSettingsDrawer.value = false;
 };

--- a/src/renderer/views/favorite/index.vue
+++ b/src/renderer/views/favorite/index.vue
@@ -94,33 +94,23 @@
          <p>{{ t('favorite.emptyTip') }}</p>
        </div>

-        <div
-          v-else
-          class="space-y-1"
-          :class="{ 'max-w-[400px]': isComponent }"
-          :style="{ paddingBottom: contentPaddingBottom }"
-        >
-          <div class="favorite-list-section">
-            <song-item
-              v-for="(song, index) in renderedItems"
-              :key="song.id"
-              :item="song"
-              :favorite="false"
-              class="rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
-              :class="[
-                index < 20 ? setAnimationClass('animate__bounceInLeft') : '',
-                { '!bg-primary/10': selectedSongs.includes(song.id as number) }
-              ]"
-              :style="index < 20 ? getItemAnimationDelay(index) : undefined"
-              :selectable="isSelecting"
-              :selected="selectedSongs.includes(song.id as number)"
-              @play="handlePlay"
-              @select="handleSelect"
-            />
-          </div>
-
-          <!-- 未渲染项占位 -->
-          <div v-if="placeholderHeight > 0" :style="{ height: placeholderHeight + 'px' }" />
+        <div v-else class="space-y-1 pb-24" :class="{ 'max-w-[400px]': isComponent }">
+          <song-item
+            v-for="(song, index) in favoriteSongs"
+            :key="song.id"
+            :item="song"
+            :favorite="false"
+            class="rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
+            :class="[
+              setAnimationClass('animate__bounceInLeft'),
+              { '!bg-primary/10': selectedSongs.includes(song.id as number) }
+            ]"
+            :style="getItemAnimationDelay(index)"
+            :selectable="isSelecting"
+            :selected="selectedSongs.includes(song.id as number)"
+            @play="handlePlay"
+            @select="handleSelect"
+          />

          <div v-if="isComponent" class="pt-4 text-center">
            <n-button text type="primary" @click="handleMore">
@@ -148,6 +138,7 @@
          </div>
        </div>
      </n-scrollbar>
+      <play-bottom />
    </div>
  </div>
 </template>
@@ -158,9 +149,9 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';

 import { getMusicDetail } from '@/api/music';
+import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { useDownload } from '@/hooks/useDownload';
-import { useProgressiveRender } from '@/hooks/useProgressiveRender';
 import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/types/music';
 import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';
@@ -171,31 +162,6 @@ const favoriteList = computed(() => playerStore.favoriteList);
 const favoriteSongs = ref<SongResult[]>([]);
 const loading = ref(false);
 const noMore = ref(false);
-const scrollbarRef = ref();
-
-// 手工虚拟化
-const {
-  renderedItems,
-  placeholderHeight,
-  contentPaddingBottom,
-  handleScroll: progressiveScroll,
-  resetRenderLimit
-} = useProgressiveRender({
-  items: favoriteSongs,
-  itemHeight: 64,
-  listSelector: '.favorite-list-section',
-  initialCount: 40,
-  onReachEnd: () => {
-    if (!loading.value && !noMore.value) {
-      currentPage.value++;
-      getFavoriteSongs();
-    }
-  }
-});
-
-const handleScroll = (e: Event) => {
-  progressiveScroll(e);
-};

 // 多选相关
 const isSelecting = ref(false);
@@ -225,24 +191,28 @@ const handleSelect = (songId: number, selected: boolean) => {

 // 批量下载
 const handleBatchDownload = async () => {
+  // 获取选中歌曲的信息
  const selectedSongsList = selectedSongs.value
    .map((songId) => favoriteSongs.value.find((s) => s.id === songId))
    .filter((song) => song) as SongResult[];

+  // 使用hook中的批量下载功能
  await batchDownloadMusic(selectedSongsList);
+
+  // 下载完成后取消选择
  cancelSelect();
 };

 // 排序相关
-const isDescending = ref(true);
+const isDescending = ref(true); // 默认倒序显示

+// 切换排序方式
 const toggleSort = (descending: boolean) => {
  if (isDescending.value === descending) return;
  isDescending.value = descending;
  currentPage.value = 1;
  favoriteSongs.value = [];
  noMore.value = false;
-  resetRenderLimit();
  getFavoriteSongs();
 };

@@ -259,14 +229,16 @@ const props = defineProps({

 // 获取当前页的收藏歌曲ID
 const getCurrentPageIds = () => {
-  let ids = [...favoriteList.value];
+  let ids = [...favoriteList.value]; // 复制一份以免修改原数组

+  // 根据排序方式调整顺序
  if (isDescending.value) {
-    ids = ids.reverse();
+    ids = ids.reverse(); // 倒序，最新收藏的在前面
  }

  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
+  // 返回原始ID，不进行类型转换
  return ids.slice(startIndex, endIndex);
 };

@@ -287,6 +259,7 @@ const getFavoriteSongs = async () => {

    const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];

+    // 处理音乐数据
    let neteaseSongs: SongResult[] = [];
    if (musicIds.length > 0) {
      const res = await getMusicDetail(musicIds);
@@ -299,20 +272,31 @@ const getFavoriteSongs = async () => {
      }
    }

+    console.log('获取数据统计:', {
+      neteaseSongs: neteaseSongs.length
+    });
+
+    // 合并数据，保持原有顺序
    const newSongs = currentIds
      .map((id) => {
        const strId = String(id);
+
+        // 查找音乐
        const found = neteaseSongs.find((song) => String(song.id) === strId);
        return found;
      })
      .filter((song): song is SongResult => !!song);

+    console.log(`最终歌曲列表: ${newSongs.length}首`);
+
+    // 追加新数据而不是替换
    if (currentPage.value === 1) {
      favoriteSongs.value = newSongs;
    } else {
      favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
    }

+    // 判断是否还有更多数据
    noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
  } catch (error) {
    console.error('获取收藏歌曲失败:', error);
@@ -321,6 +305,17 @@ const getFavoriteSongs = async () => {
  }
 };

+// 处理滚动事件
+const handleScroll = (e: any) => {
+  const { scrollTop, scrollHeight, offsetHeight } = e.target;
+  const threshold = 100; // 距离底部多少像素时加载更多
+
+  if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
+    currentPage.value++;
+    getFavoriteSongs();
+  }
+};
+
 const hasLoaded = ref(false);

 onMounted(async () => {
@@ -331,13 +326,13 @@ onMounted(async () => {
  }
 });

+// 监听收藏列表变化，变化时重置并重新加载
 watch(
  favoriteList,
  async () => {
    hasLoaded.value = false;
    currentPage.value = 1;
    noMore.value = false;
-    resetRenderLimit();
    await getFavoriteSongs();
    hasLoaded.value = true;
  },
@@ -368,6 +363,7 @@ const isIndeterminate = computed(() => {
  return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
 });

+// 处理全选/取消全选
 const handleSelectAll = (checked: boolean) => {
  if (checked) {
    selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
--- a/src/renderer/views/music/MusicListPage.vue
+++ b/src/renderer/views/music/MusicListPage.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="music-list-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
    <n-scrollbar ref="scrollbarRef" class="h-full" @scroll="handleScroll">
-      <div class="music-list-content" :style="{ paddingBottom: contentPaddingBottom }">
+      <div class="music-list-content pb-32">
        <!-- Hero Section 和 Action Bar -->
        <n-spin :show="loading">
          <!-- Hero Section -->
@@ -217,50 +217,23 @@
              </div>

              <!-- Locate Current Song -->
-              <n-tooltip v-if="currentPlayingIndex >= 0" trigger="hover">
-                <template #trigger>
-                  <button
-                    class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
-                    @click="scrollToCurrentSong"
-                  >
-                    <i class="ri-focus-3-line text-lg" />
-                  </button>
-                </template>
-                {{ t('comp.musicList.locateCurrent') }}
-              </n-tooltip>
+              <button
+                v-if="currentPlayingIndex >= 0"
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                :title="t('comp.musicList.locateCurrent', '定位当前播放')"
+                @click="scrollToCurrentSong"
+              >
+                <i class="ri-focus-3-line text-lg" />
+              </button>

              <!-- Layout Toggle -->
-              <n-tooltip v-if="!isMobile" trigger="hover">
-                <template #trigger>
-                  <button
-                    class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
-                    @click="toggleLayout"
-                  >
-                    <i
-                      :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
-                      class="text-lg"
-                    />
-                  </button>
-                </template>
-                {{
-                  isCompactLayout
-                    ? t('comp.musicList.normalLayout')
-                    : t('comp.musicList.compactLayout')
-                }}
-              </n-tooltip>
-
-              <!-- Scroll to Top -->
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <button
-                    class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
-                    @click="scrollToTop"
-                  >
-                    <i class="ri-arrow-up-line text-lg" />
-                  </button>
-                </template>
-                {{ t('comp.musicList.scrollToTop') }}
-              </n-tooltip>
+              <button
+                v-if="!isMobile"
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="toggleLayout"
+              >
+                <i :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'" class="text-lg" />
+              </button>
            </div>
          </div>
        </section>
@@ -323,6 +296,7 @@
        </section>
      </div>
    </n-scrollbar>
+    <play-bottom />
  </div>
 </template>

@@ -340,6 +314,7 @@ import {
  subscribePlaylist,
  updatePlaylistTracks
 } from '@/api/music';
+import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { useDownload } from '@/hooks/useDownload';
 import { useScrollTitle } from '@/hooks/useScrollTitle';
@@ -363,10 +338,6 @@ const message = useMessage();
 const playHistoryStore = usePlayHistoryStore();

 const loading = ref(false);
-const isPlaying = computed(() => !!playerStore.playMusicUrl);
-const contentPaddingBottom = computed(() =>
-  isPlaying.value && !isMobile.value ? '220px' : '80px'
-);

 const fetchData = async () => {
  const id = route.params.id;
@@ -457,7 +428,7 @@ const canRemove = computed(() => {

 const canCollect = ref(false);
 const isCollected = ref(false);
-const pageSize = 200;
+const pageSize = 40;
 const initialAnimateCount = 20; // 仅前 20 项有入场动画
 const displayedSongs = ref<SongResult[]>([]);
 const renderLimit = ref(pageSize); // DOM 渲染上限，数据全部在内存
@@ -861,10 +832,6 @@ const toggleLayout = () => {
  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
 };

-const scrollToTop = () => {
-  scrollbarRef.value?.scrollTo({ top: 0, behavior: 'smooth' });
-};
-
 const checkCollectionStatus = () => {
  const type = route.query.type as string;
  if (type === 'playlist' && listInfo.value?.id) {
Author	SHA1	Message	Date
alger	1e30a11881	fix(core): 修复事件监听器泄漏 - App.vue: offline 监听器添加 onUnmounted 清理，移除冗余 console.log - MusicHook.ts: document.onkeyup 直接赋值改为 addEventListener + 防重复 - MusicHook.ts: audio-ready 监听器提取为命名函数，先移除再注册防堆叠	2026-03-29 14:22:33 +08:00
alger	34713430e1	fix(player): 修复迷你模式恢复后歌词页面空白偏移迷你播放栏的 togglePlaylist 设置 document.body.style.height='64px' 和 overflow='hidden'，恢复主窗口时未清理，导致歌词 drawer 高度被限制。在 mini-mode 事件处理中添加 body 样式重置。	2026-03-29 14:04:55 +08:00
alger	eaf1636505	refactor(player): 提取播放栏共享逻辑为 composable - 新增 useVolumeControl：统一音量管理（volumeSlider、mute、滚轮调节） - 新增 useFavorite：收藏状态与切换 - 新增 usePlaybackControl：播放/暂停、上/下一首 - PlayBar、MiniPlayBar、SimplePlayBar、MobilePlayBar 使用新 composable - 修复音量存储不一致：MiniPlayBar/SimplePlayBar 原先绕过 playerStore 直接操作 localStorage	2026-03-29 14:04:39 +08:00
alger	e032afeae8	docs: 更新 CLAUDE.md，反映播放系统重构（Howler.js → 原生 HTMLAudioElement）	2026-03-29 13:30:36 +08:00