perf: 长列表渐进式渲染优化与播放栏遮挡修复 (#589 )

- 新增 useProgressiveRender composable，提取手工虚拟化逻辑（renderLimit + placeholderHeight） - FavoritePage/DownloadPage 使用 composable 实现渐进式渲染，避免大量 DOM 一次性渲染 - MusicListPage 初始加载扩大至 200 首，工具栏按钮添加 n-tooltip，新增回到顶部按钮 - 播放栏动态底部间距替代 PlayBottom 组件，修复播放时列表底部被遮挡 - 下载页无下载任务时自动切换到已下载 tab - i18n: 添加 scrollToTop/compactLayout/normalLayout 翻译（5 种语言） Inspired-By: https://github.com/algerkong/AlgerMusicPlayer/pull/589
feat(download): 新增未保存下载设置时的确认对话框 (#507 )
2026-04-25 16:57:24 +08:00 · 2026-04-08 20:04:40 +08:00 · 2026-04-08 19:35:32 +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
26 changed files with 1050 additions and 424 deletions
@@ -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）
@@ -223,6 +223,9 @@ 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',
@@ -58,6 +58,14 @@ 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}'
@@ -223,6 +223,9 @@ export default {
    addToPlaylistSuccess: 'プレイリストに追加しました',
    songsAlreadyInPlaylist: '楽曲は既にプレイリストに存在します',
    locateCurrent: '再生中の曲を表示',
+    scrollToTop: 'トップに戻る',
+    compactLayout: 'コンパクト表示',
+    normalLayout: '通常表示',
    historyRecommend: '履歴の日次推薦',
    fetchDatesFailed: '日付リストの取得に失敗しました',
    fetchSongsFailed: '楽曲リストの取得に失敗しました',
@@ -58,6 +58,14 @@ export default {
    success: 'ダウンロード記録をクリアしました',
    failed: 'ダウンロード記録のクリアに失敗しました'
  },
+  save: {
+    title: '設定を保存',
+    message: '現在のダウンロード設定が保存されていません。変更を保存しますか？',
+    confirm: '保存',
+    cancel: 'キャンセル',
+    discard: '破棄',
+    saveSuccess: 'ダウンロード設定を保存しました'
+  },
  message: {
    downloadComplete: '{filename}のダウンロードが完了しました',
    downloadFailed: '{filename}のダウンロードに失敗しました: {error}'
@@ -222,6 +222,9 @@ export default {
    addToPlaylistSuccess: '재생 목록에 추가 성공',
    songsAlreadyInPlaylist: '곡이 이미 재생 목록에 있습니다',
    locateCurrent: '현재 재생 곡 찾기',
+    scrollToTop: '맨 위로',
+    compactLayout: '간결한 레이아웃',
+    normalLayout: '일반 레이아웃',
    historyRecommend: '일일 기록 권장',
    fetchDatesFailed: '날짜를 가져오지 못했습니다',
    fetchSongsFailed: '곡을 가져오지 못했습니다',
@@ -58,6 +58,14 @@ export default {
    success: '다운로드 기록이 지워졌습니다',
    failed: '다운로드 기록 삭제에 실패했습니다'
  },
+  save: {
+    title: '설정 저장',
+    message: '현재 다운로드 설정이 저장되지 않았습니다. 변경 사항을 저장하시겠습니까?',
+    confirm: '저장',
+    cancel: '취소',
+    discard: '포기',
+    saveSuccess: '다운로드 설정이 저장됨'
+  },
  message: {
    downloadComplete: '{filename} 다운로드 완료',
    downloadFailed: '{filename} 다운로드 실패: {error}'
@@ -216,6 +216,9 @@ export default {
    addToPlaylistSuccess: '添加到播放列表成功',
    songsAlreadyInPlaylist: '歌曲已存在于播放列表中',
    locateCurrent: '定位当前播放',
+    scrollToTop: '回到顶部',
+    compactLayout: '紧凑布局',
+    normalLayout: '常规布局',
    historyRecommend: '历史日推',
    fetchDatesFailed: '获取日期列表失败',
    fetchSongsFailed: '获取歌曲列表失败',
@@ -57,6 +57,14 @@ export default {
    success: '下载记录已清空',
    failed: '清空下载记录失败'
  },
+  save: {
+    title: '保存设置',
+    message: '当前下载设置未保存，是否保存更改？',
+    confirm: '保存',
+    cancel: '取消',
+    discard: '放弃',
+    saveSuccess: '下载设置已保存'
+  },
  message: {
    downloadComplete: '{filename} 下载完成',
    downloadFailed: '{filename} 下载失败: {error}'
@@ -216,6 +216,9 @@ export default {
    addToPlaylistSuccess: '新增至播放清單成功',
    songsAlreadyInPlaylist: '歌曲已存在於播放清單中',
    locateCurrent: '定位當前播放',
+    scrollToTop: '回到頂部',
+    compactLayout: '緊湊佈局',
+    normalLayout: '常規佈局',
    historyRecommend: '歷史日推',
    fetchDatesFailed: '獲取日期列表失敗',
    fetchSongsFailed: '獲取歌曲列表失敗',
@@ -57,6 +57,14 @@ export default {
    success: '下載記錄已清空',
    failed: '清空下載記錄失敗'
  },
+  save: {
+    title: '儲存設定',
+    message: '目前下載設定尚未儲存，是否儲存變更？',
+    confirm: '儲存',
+    cancel: '取消',
+    discard: '放棄',
+    saveSuccess: '下載設定已儲存'
+  },
  message: {
    downloadComplete: '{filename} 下載完成',
    downloadFailed: '{filename} 下載失敗: {error}'
@@ -105,6 +105,9 @@ if (isElectron) {
      localStorage.setItem('currentRoute', router.currentRoute.value.path);
      router.push('/mini');
    } else {
+      // 清理迷你模式下设置的 body 样式
+      document.body.style.height = '';
+      document.body.style.overflow = '';
      // 恢复当前路由
      const currentRoute = localStorage.getItem('currentRoute');
      if (currentRoute) {
@@ -128,14 +131,16 @@ onMounted(async () => {

  // 检查网络状态，离线时自动跳转到本地音乐页面
  if (!navigator.onLine) {
-    console.log('检测到无网络连接，跳转到本地音乐页面');
    router.push('/local-music');
  }

  // 监听网络状态变化，断网时跳转到本地音乐页面
-  window.addEventListener('offline', () => {
-    console.log('网络连接断开，跳转到本地音乐页面');
+  const handleOffline = () => {
    router.push('/local-music');
+  };
+  window.addEventListener('offline', handleOffline);
+  onUnmounted(() => {
+    window.removeEventListener('offline', handleOffline);
  });

  // 初始化 MusicHook，注入 playerStore
@@ -129,6 +129,9 @@ import { computed, provide, ref, useTemplateRef } from 'vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
+import { useFavorite } from '@/hooks/useFavorite';
+import { usePlaybackControl } from '@/hooks/usePlaybackControl';
+import { useVolumeControl } from '@/hooks/useVolumeControl';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore, useSettingsStore } from '@/store';
 import type { SongResult } from '@/types/music';
@@ -138,6 +141,15 @@ const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
 const { navigateToArtist } = useArtist();

+// 播放控制
+const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackControl();
+
+// 音量控制（统一通过 playerStore 管理）
+const { volumeSlider, volumeIcon: getVolumeIcon, mute, handleVolumeWheel } = useVolumeControl();
+
+// 收藏
+const { isFavorite, toggleFavorite } = useFavorite();
+
 withDefaults(
  defineProps<{
    pureModeEnabled?: boolean;
@@ -155,66 +167,9 @@ const handleClose = () => {
  }
 };

-// 是否播放
-const play = computed(() => playerStore.play as boolean);
 // 播放列表
 const playList = computed(() => playerStore.playList as SongResult[]);

-// 音量控制
-const audioVolume = ref(
-  localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
-);
-
-const volumeSlider = computed({
-  get: () => audioVolume.value * 100,
-  set: (value) => {
-    localStorage.setItem('volume', (value / 100).toString());
-    audioService.setVolume(value / 100);
-    audioVolume.value = value / 100;
-  }
-});
-
-// 音量图标
-const getVolumeIcon = computed(() => {
-  if (audioVolume.value === 0) return 'ri-volume-mute-line';
-  if (audioVolume.value <= 0.5) return 'ri-volume-down-line';
-  return 'ri-volume-up-line';
-});
-
-// 静音
-const mute = () => {
-  if (volumeSlider.value === 0) {
-    volumeSlider.value = 30;
-  } else {
-    volumeSlider.value = 0;
-  }
-};
-
-// 鼠标滚轮调整音量
-const handleVolumeWheel = (e: WheelEvent) => {
-  // 向上滚动增加音量，向下滚动减少音量
-  const delta = e.deltaY < 0 ? 5 : -5;
-  const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
-  volumeSlider.value = newValue;
-};
-
-// 收藏相关
-const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id);
-});
-
-const toggleFavorite = async (e: Event) => {
-  e.stopPropagation();
-
-  let favoriteId = playMusic.value.id;
-
-  if (isFavorite.value) {
-    playerStore.removeFromFavorite(favoriteId);
-  } else {
-    playerStore.addToFavorite(favoriteId);
-  }
-};
-
 // 播放列表相关
 const palyListRef = useTemplateRef('palyListRef') as any;
 const isPlaylistOpen = ref(false);
@@ -308,19 +263,6 @@ const handleProgressLeave = () => {
  isHovering.value = false;
 };

-// 播放控制
-const handlePrev = () => playerStore.prevPlay();
-const handleNext = () => playerStore.nextPlay();
-
-const playMusicEvent = async () => {
-  try {
-    playerStore.setPlay(playerStore.playMusic);
-  } catch (error) {
-    console.error('播放出错:', error);
-    playerStore.nextPlay();
-  }
-};
-
 // 切换到完整播放器
 const setMusicFull = () => {
  playerStore.setMusicFull(true);
@@ -62,10 +62,11 @@
 <script lang="ts" setup>
 import { useSwipe } from '@vueuse/core';
 import type { Ref } from 'vue';
-import { computed, inject, onMounted, ref, watch } from 'vue';
+import { inject, onMounted, ref, watch } from 'vue';

 import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
 import { artistList, playMusic, textColors } from '@/hooks/MusicHook';
+import { usePlaybackControl } from '@/hooks/usePlaybackControl';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, setAnimationClass } from '@/utils';
@@ -75,24 +76,15 @@ const shouldShowMobileMenu = inject('shouldShowMobileMenu') as Ref<boolean>;
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();

-// 是否播放
-const play = computed(() => playerStore.isPlay);
+// 播放控制
+const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackControl();
+
 // 背景颜色
 const background = ref('#000');

-// 播放控制
-function handleNext() {
-  playerStore.nextPlay();
-}
-
-function handlePrev() {
-  playerStore.prevPlay();
-}
-
 // 全屏播放器
 const MusicFullRef = ref<any>(null);

-// 设置musicFull
 const setMusicFull = () => {
  playerStore.setMusicFull(!playerStore.musicFull);
  if (playerStore.musicFull) {
@@ -107,21 +99,10 @@ watch(
  }
 );

-// 打开播放列表抽屉
 const openPlayListDrawer = () => {
  playerStore.setPlayListDrawerVisible(true);
 };

-// 播放暂停按钮事件
-const playMusicEvent = async () => {
-  try {
-    playerStore.setPlay(playMusic.value);
-  } catch (error) {
-    console.error('播放出错:', error);
-    playerStore.nextPlay();
-  }
-};
-
 // 滑动切歌
 const playBarRef = ref<HTMLElement | null>(null);
 onMounted(() => {
@@ -164,7 +164,6 @@

 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
-import { useMessage } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -182,7 +181,10 @@ import {
  textColors
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
+import { useFavorite } from '@/hooks/useFavorite';
+import { usePlaybackControl } from '@/hooks/usePlaybackControl';
 import { usePlayMode } from '@/hooks/usePlayMode';
+import { useVolumeControl } from '@/hooks/useVolumeControl';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
@@ -191,9 +193,22 @@ import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } fr
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
 const { t } = useI18n();
-const message = useMessage();
-// 是否播放
-const play = computed(() => playerStore.isPlay);
+
+// 播放控制
+const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackControl();
+
+// 音量控制
+const { volumeSlider, volumeIcon: getVolumeIcon, mute, handleVolumeWheel } = useVolumeControl();
+
+// 收藏
+const { isFavorite, toggleFavorite } = useFavorite();
+
+// 播放模式
+const { playMode, playModeIcon, playModeText, togglePlayMode } = usePlayMode();
+
+// 播放速度控制
+const { playbackRate } = storeToRefs(playerStore);
+
 // 背景颜色
 const background = ref('#000');

@@ -211,115 +226,41 @@ watch(
 const throttledSeek = useThrottleFn((value: number) => {
  audioService.seek(value);
  nowTime.value = value;
-}, 50); // 50ms 的节流延迟
+}, 50);

-// 拖动时的临时值，避免频繁更新 nowTime 触发重渲染
+// 拖动时的临时值
 const dragValue = ref(0);
-
-// 为滑块拖动添加状态跟踪
 const isDragging = ref(false);

-// 修改 timeSlider 计算属性
 const timeSlider = computed({
  get: () => (isDragging.value ? dragValue.value : nowTime.value),
  set: (value) => {
    if (isDragging.value) {
-      // 拖动中只更新临时值，不触发 nowTime 更新和 seek 操作
      dragValue.value = value;
      return;
    }
-
-    // 点击操作 (非拖动)，可以直接 seek
    throttledSeek(value);
  }
 });

-// 添加滑块拖动开始和结束事件处理
 const handleSliderDragStart = () => {
  isDragging.value = true;
-  // 初始化拖动值为当前时间
  dragValue.value = nowTime.value;
 };

 const handleSliderDragEnd = () => {
  isDragging.value = false;
-
-  // 直接应用最终的拖动值
  audioService.seek(dragValue.value);
  nowTime.value = dragValue.value;
 };

-// 格式化提示文本，根据拖动状态显示不同的时间
 const formatTooltip = (value: number) => {
  return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
 };

-// 音量条 - 使用 playerStore 的统一音量管理
-const getVolumeIcon = computed(() => {
-  // 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line
-  if (playerStore.volume === 0) {
-    return 'ri-volume-mute-line';
-  }
-  if (playerStore.volume <= 0.5) {
-    return 'ri-volume-down-line';
-  }
-  return 'ri-volume-up-line';
-});
-
-const volumeSlider = computed({
-  get: () => playerStore.volume * 100,
-  set: (value) => {
-    playerStore.setVolume(value / 100);
-  }
-});
-
-// 静音
-const mute = () => {
-  if (volumeSlider.value === 0) {
-    volumeSlider.value = 30;
-  } else {
-    volumeSlider.value = 0;
-  }
-};
-
-// 鼠标滚轮调整音量
-const handleVolumeWheel = (e: WheelEvent) => {
-  // 向上滚动增加音量，向下滚动减少音量
-  const delta = e.deltaY < 0 ? 5 : -5;
-  const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
-  volumeSlider.value = newValue;
-};
-
-// 播放模式
-const { playMode, playModeIcon, playModeText, togglePlayMode } = usePlayMode();
-
-// 播放速度控制
-const { playbackRate } = storeToRefs(playerStore);
-
-function handleNext() {
-  playerStore.nextPlay();
-}
-
-function handlePrev() {
-  playerStore.prevPlay();
-}
-
 const MusicFullRef = ref<any>(null);
 const showSliderTooltip = ref(false);

-// 播放暂停按钮事件
-const playMusicEvent = async () => {
-  try {
-    const result = await playerStore.setPlay({ ...playMusic.value });
-    if (result) {
-      playerStore.setPlayMusic(true);
-    }
-  } catch (error) {
-    console.error('重新获取播放链接失败:', error);
-    message.error(t('player.playFailed'));
-  }
-};
-
 const musicFullVisible = computed({
  get: () => playerStore.musicFull,
  set: (value) => {
@@ -327,7 +268,6 @@ const musicFullVisible = computed({
  }
 });

-// 设置musicFull
 const setMusicFull = () => {
  musicFullVisible.value = !musicFullVisible.value;
  playerStore.setMusicFull(musicFullVisible.value);
@@ -336,24 +276,6 @@ const setMusicFull = () => {
  }
 };

-const isFavorite = computed(() => {
-  if (!playMusic || !playMusic.value) return false;
-  return playerStore.favoriteList.includes(playMusic.value.id);
-});
-
-const toggleFavorite = async (e: Event) => {
-  console.log('playMusic.value', playMusic.value);
-  e.stopPropagation();
-
-  let favoriteId = playMusic.value.id;
-
-  if (isFavorite.value) {
-    playerStore.removeFromFavorite(favoriteId);
-  } else {
-    playerStore.addToFavorite(favoriteId);
-  }
-};
-
 const openLyricWindow = () => {
  openLyric();
 };
@@ -365,7 +287,6 @@ const handleArtistClick = (id: number) => {
  navigateToArtist(id);
 };

-// 打开播放列表抽屉
 const openPlayListDrawer = () => {
  playerStore.setPlayListDrawerVisible(true);
 };
@@ -80,8 +80,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';

-import { allTime, nowTime, playMusic } from '@/hooks/MusicHook';
+import { allTime, nowTime } from '@/hooks/MusicHook';
+import { usePlaybackControl } from '@/hooks/usePlaybackControl';
 import { usePlayMode } from '@/hooks/usePlayMode';
+import { useVolumeControl } from '@/hooks/useVolumeControl';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { secondToMinute } from '@/utils';
@@ -98,61 +100,14 @@ const props = withDefaults(
 const playerStore = usePlayerStore();
 const playBarRef = ref<HTMLElement | null>(null);

-// 播放状态
-const play = computed(() => playerStore.isPlay);
+// 播放控制
+const { isPlaying: play, playMusicEvent, handleNext, handlePrev } = usePlaybackControl();

 // 播放模式
 const { playMode, playModeIcon, togglePlayMode } = usePlayMode();

-// 音量控制
-const audioVolume = ref(
-  localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
-);
-
-const volumeSlider = computed({
-  get: () => audioVolume.value * 100,
-  set: (value) => {
-    localStorage.setItem('volume', (value / 100).toString());
-    audioService.setVolume(value / 100);
-    audioVolume.value = value / 100;
-  }
-});
-
-// 音量图标
-const getVolumeIcon = computed(() => {
-  if (audioVolume.value === 0) return 'ri-volume-mute-line';
-  if (audioVolume.value <= 0.5) return 'ri-volume-down-line';
-  return 'ri-volume-up-line';
-});
-
-// 静音切换
-const mute = () => {
-  if (volumeSlider.value === 0) {
-    volumeSlider.value = 30;
-  } else {
-    volumeSlider.value = 0;
-  }
-};
-
-// 鼠标滚轮调整音量
-const handleVolumeWheel = (e: WheelEvent) => {
-  const delta = e.deltaY < 0 ? 5 : -5;
-  const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
-  volumeSlider.value = newValue;
-};
-
-// 播放控制
-const handlePrev = () => playerStore.prevPlay();
-const handleNext = () => playerStore.nextPlay();
-
-const playMusicEvent = async () => {
-  try {
-    await playerStore.setPlay({ ...playMusic.value });
-  } catch (error) {
-    console.error('播放出错:', error);
-    playerStore.nextPlay();
-  }
-};
+// 音量控制（统一通过 playerStore 管理）
+const { volumeSlider, volumeIcon: getVolumeIcon, mute, handleVolumeWheel } = useVolumeControl();

 // 进度条控制
 const isDragging = ref(false);
@@ -64,25 +64,27 @@ export const musicDB = await useIndexedDB(
  3
 );

-// 键盘事件处理器，在初始化后设置
-const setupKeyboardListeners = () => {
-  document.onkeyup = (e) => {
-    // 检查事件目标是否是输入框元素
-    const target = e.target as HTMLElement;
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-      return;
-    }
+// 键盘事件处理器（提取为命名函数，防止重复注册）
+const handleKeyUp = (e: KeyboardEvent) => {
+  const target = e.target as HTMLElement;
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+    return;
+  }

-    const store = getPlayerStore();
-    switch (e.code) {
-      case 'Space':
-        if (store.playMusic?.id) {
-          void store.setPlay({ ...store.playMusic });
-        }
-        break;
-      default:
-    }
-  };
+  const store = getPlayerStore();
+  switch (e.code) {
+    case 'Space':
+      if (store.playMusic?.id) {
+        void store.setPlay({ ...store.playMusic });
+      }
+      break;
+    default:
+  }
+};
+
+const setupKeyboardListeners = () => {
+  document.removeEventListener('keyup', handleKeyUp);
+  document.addEventListener('keyup', handleKeyUp);
 };

 let audioListenersInitialized = false;
@@ -1025,18 +1027,14 @@ export const initAudioListeners = async () => {
  }
 };

-// 添加音频就绪事件监听器
-window.addEventListener('audio-ready', ((event: CustomEvent) => {
+// 音频就绪事件处理器（提取为命名函数，防止重复注册）
+const handleAudioReady = ((event: CustomEvent) => {
  try {
    const { sound: newSound } = event.detail;
    if (newSound) {
-      // 更新本地 sound 引用
      sound.value = audioService.getCurrentSound();
-
-      // 设置音频监听器
      setupAudioListeners();

-      // 获取当前播放位置并更新显示
      const currentSound = audioService.getCurrentSound();
      if (currentSound) {
        const currentPosition = currentSound.currentTime;
@@ -1044,10 +1042,12 @@ window.addEventListener('audio-ready', ((event: CustomEvent) => {
          nowTime.value = currentPosition;
        }
      }
-
-      console.log('音频就绪，已设置监听器并更新进度显示');
    }
  } catch (error) {
    console.error('处理音频就绪事件出错:', error);
  }
-}) as EventListener);
+}) as EventListener;
+
+// 先移除再注册，防止重复
+window.removeEventListener('audio-ready', handleAudioReady);
+window.addEventListener('audio-ready', handleAudioReady);
@@ -0,0 +1,35 @@
+import { computed } from 'vue';
+
+import { playMusic } from '@/hooks/MusicHook';
+import { usePlayerStore } from '@/store/modules/player';
+
+/**
+ * 当前歌曲的收藏状态管理 composable
+ */
+export function useFavorite() {
+  const playerStore = usePlayerStore();
+
+  /** 当前歌曲是否已收藏 */
+  const isFavorite = computed(() => {
+    if (!playMusic?.value?.id) return false;
+    return playerStore.favoriteList.includes(playMusic.value.id);
+  });
+
+  /** 切换收藏状态 */
+  const toggleFavorite = (e?: Event) => {
+    e?.stopPropagation();
+    if (!playMusic?.value?.id) return;
+
+    const favoriteId = playMusic.value.id;
+    if (isFavorite.value) {
+      playerStore.removeFromFavorite(favoriteId);
+    } else {
+      playerStore.addToFavorite(favoriteId);
+    }
+  };
+
+  return {
+    isFavorite,
+    toggleFavorite
+  };
+}
@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+
+import { playMusic } from '@/hooks/MusicHook';
+import { usePlayerStore } from '@/store/modules/player';
+
+/**
+ * 播放控制 composable（播放/暂停、上一首、下一首）
+ */
+export function usePlaybackControl() {
+  const playerStore = usePlayerStore();
+
+  /** 是否正在播放 */
+  const isPlaying = computed(() => playerStore.isPlay);
+
+  /** 播放/暂停切换 */
+  const playMusicEvent = async () => {
+    try {
+      await playerStore.setPlay({ ...playMusic.value });
+    } catch (error) {
+      console.error('播放出错:', error);
+      playerStore.nextPlay();
+    }
+  };
+
+  /** 下一首 */
+  const handleNext = () => {
+    playerStore.nextPlay();
+  };
+
+  /** 上一首 */
+  const handlePrev = () => {
+    playerStore.prevPlay();
+  };
+
+  return {
+    isPlaying,
+    playMusicEvent,
+    handleNext,
+    handlePrev
+  };
+}
@@ -0,0 +1,96 @@
+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
+  };
+};
@@ -0,0 +1,49 @@
+import { computed } from 'vue';
+
+import { usePlayerStore } from '@/store/modules/player';
+
+/**
+ * 统一的音量控制 composable
+ * 通过 playerStore 管理音量，确保所有播放栏组件的音量状态一致
+ */
+export function useVolumeControl() {
+  const playerStore = usePlayerStore();
+
+  /** 音量滑块值 (0-100) */
+  const volumeSlider = computed({
+    get: () => playerStore.volume * 100,
+    set: (value: number) => {
+      playerStore.setVolume(value / 100);
+    }
+  });
+
+  /** 音量图标 class */
+  const volumeIcon = computed(() => {
+    if (playerStore.volume === 0) return 'ri-volume-mute-line';
+    if (playerStore.volume <= 0.5) return 'ri-volume-down-line';
+    return 'ri-volume-up-line';
+  });
+
+  /** 静音切换 (0 ↔ 30%) */
+  const mute = () => {
+    if (volumeSlider.value === 0) {
+      volumeSlider.value = 30;
+    } else {
+      volumeSlider.value = 0;
+    }
+  };
+
+  /** 鼠标滚轮调整音量 ±5% */
+  const handleVolumeWheel = (e: WheelEvent) => {
+    const delta = e.deltaY < 0 ? 5 : -5;
+    const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
+    volumeSlider.value = newValue;
+  };
+
+  return {
+    volumeSlider,
+    volumeIcon,
+    mute,
+    handleVolumeWheel
+  };
+}
@@ -53,7 +53,8 @@ const otherRouter = [
      showInMenu: false,
      back: true
    },
-    component: () => import('@/views/artist/detail.vue')
+    component: () => import('@/views/artist/detail.vue'),
+    props: (route) => ({ key: route.params.id })
  },
  {
    path: '/music-list/:id?',
@@ -585,8 +585,7 @@ export const usePlaylistStore = defineStore(
        // Toggle play/pause for current song
        if (
          playerCore.playMusic.id === song.id &&
-          playerCore.playMusic.playMusicUrl === song.playMusicUrl &&
-          !song.isFirstPlay
+          playerCore.playMusic.playMusicUrl === song.playMusicUrl
        ) {
          if (playerCore.play) {
            playerCore.setPlayMusic(false);
@@ -1,7 +1,7 @@
 <template>
  <div class="download-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
-    <n-scrollbar class="h-full">
-      <div class="download-content pb-32">
+    <n-scrollbar ref="scrollbarRef" class="h-full" @scroll="handleDownloadScroll">
+      <div class="download-content" :style="{ paddingBottom: contentPaddingBottom }">
        <!-- Hero Section -->
        <section class="hero-section relative overflow-hidden rounded-tl-2xl">
          <!-- Background with Blur -->
@@ -210,86 +210,96 @@
                </p>
              </div>
              <div v-else class="space-y-2">
-                <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 class="downloaded-list-section">
                  <div
-                    class="relative w-12 h-12 rounded-xl overflow-hidden shadow-lg flex-shrink-0"
+                    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"
                  >
-                    <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)"
+                      class="relative w-12 h-12 rounded-xl overflow-hidden shadow-lg flex-shrink-0"
                    >
-                      <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>
+                      <img
+                        :src="getImgUrl(item.picUrl, '100y100')"
+                        class="w-full h-full object-cover"
+                        @error="handleCoverError"
+                      />
                      <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"
+                        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-folder-line" />
-                        <span class="truncate">{{ shortenPath(item.path || item.filePath) }}</span>
+                        <i class="ri-play-fill text-white text-xl" />
                      </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)"
+                    <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-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-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>
+                <!-- 未渲染项占位 -->
+                <div
+                  v-if="downloadedPlaceholderHeight > 0"
+                  :style="{ height: downloadedPlaceholderHeight + 'px' }"
+                />
              </div>
            </n-spin>
          </div>
@@ -325,8 +335,38 @@
      @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 v-model:show="showSettingsDrawer" :width="400" placement="right">
+    <n-drawer
+      :show="showSettingsDrawer"
+      :width="400"
+      placement="right"
+      :z-index="3100"
+      @update:show="handleDrawerUpdate"
+    >
      <n-drawer-content :title="t('download.settingsPanel.title')" closable>
        <div class="download-settings-content space-y-8 py-4">
          <!-- Path Section -->
@@ -510,6 +550,7 @@ 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';
@@ -521,8 +562,23 @@ const { t } = useI18n();
 const playerStore = usePlayerStore();
 const downloadStore = useDownloadStore();
 const message = useMessage();
+const scrollbarRef = ref();

-const tabName = ref('downloading');
+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');

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

@@ -705,12 +761,40 @@ 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' },
@@ -824,7 +908,9 @@ const saveDownloadSettings = () => {
    downloadStore.refreshCompleted();
  }

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

@@ -94,23 +94,33 @@
          <p>{{ t('favorite.emptyTip') }}</p>
        </div>

-        <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-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-if="isComponent" class="pt-4 text-center">
            <n-button text type="primary" @click="handleMore">
@@ -138,7 +148,6 @@
          </div>
        </div>
      </n-scrollbar>
-      <play-bottom />
    </div>
  </div>
 </template>
@@ -149,9 +158,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';
@@ -162,6 +171,31 @@ 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);
@@ -191,28 +225,24 @@ 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();
 };

@@ -229,16 +259,14 @@ 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);
 };

@@ -259,7 +287,6 @@ 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);
@@ -272,31 +299,20 @@ 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);
@@ -305,17 +321,6 @@ 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 () => {
@@ -326,13 +331,13 @@ onMounted(async () => {
  }
 });

-// 监听收藏列表变化，变化时重置并重新加载
 watch(
  favoriteList,
  async () => {
    hasLoaded.value = false;
    currentPage.value = 1;
    noMore.value = false;
+    resetRenderLimit();
    await getFavoriteSongs();
    hasLoaded.value = true;
  },
@@ -363,7 +368,6 @@ 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);
@@ -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 pb-32">
+      <div class="music-list-content" :style="{ paddingBottom: contentPaddingBottom }">
        <!-- Hero Section 和 Action Bar -->
        <n-spin :show="loading">
          <!-- Hero Section -->
@@ -217,23 +217,50 @@
              </div>

              <!-- Locate Current Song -->
-              <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>
+              <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>

              <!-- Layout Toggle -->
-              <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>
+              <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>
            </div>
          </div>
        </section>
@@ -296,7 +323,6 @@
        </section>
      </div>
    </n-scrollbar>
-    <play-bottom />
  </div>
 </template>

@@ -314,7 +340,6 @@ 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';
@@ -338,6 +363,10 @@ 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;
@@ -428,7 +457,7 @@ const canRemove = computed(() => {

 const canCollect = ref(false);
 const isCollected = ref(false);
-const pageSize = 40;
+const pageSize = 200;
 const initialAnimateCount = 20; // 仅前 20 项有入场动画
 const displayedSongs = ref<SongResult[]>([]);
 const renderLimit = ref(pageSize); // DOM 渲染上限，数据全部在内存
@@ -832,6 +861,10 @@ 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
4everWZ	7759d9b23a	perf: 长列表渐进式渲染优化与播放栏遮挡修复 (#589 ) - 新增 useProgressiveRender composable，提取手工虚拟化逻辑（renderLimit + placeholderHeight） - FavoritePage/DownloadPage 使用 composable 实现渐进式渲染，避免大量 DOM 一次性渲染 - MusicListPage 初始加载扩大至 200 首，工具栏按钮添加 n-tooltip，新增回到顶部按钮 - 播放栏动态底部间距替代 PlayBottom 组件，修复播放时列表底部被遮挡 - 下载页无下载任务时自动切换到已下载 tab - i18n: 添加 scrollToTop/compactLayout/normalLayout 翻译（5 种语言） Inspired-By: https://github.com/algerkong/AlgerMusicPlayer/pull/589	2026-04-08 20:04:40 +08:00
Vanilla-puree	c889ac301b	feat(download): 新增未保存下载设置时的确认对话框 (#507 ) - feat(download): 关闭下载设置抽屉时检测未保存更改，提供取消/放弃/保存选项 - fix: 自动播放首次暂停无法暂停，移除不必要的 isFirstPlay 检查 - fix: 歌手详情路由添加 props key，修复跳转歌手详情不生效问题 - i18n: 添加 download.save.* 翻译（5 种语言） Co-Authored-By: 心妄 <1661272893@qq.com>	2026-04-08 19:35:32 +08:00
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