feat: 皮肤系统重构、seek暂停修复、本地音乐优化、外观一体化

- 重构皮肤系统：提取 skins.ts 管理预设皮肤，CSS 变量由 JS 动态设置

- 提取公共 color.ts 工具函数（hexToRgba/toHex），消除重复定义

- 修复 seek 时暂停状态丢失的 bug（后端 audio_paused 状态保留）

- 本地音乐页面：循环排序切换、三点菜单、打开所在文件夹

- 本地音乐文件夹管理：支持启用/禁用切换，兼容旧数据迁移

- 新增 show_item_in_folder 命令（Windows/macOS/Linux 跨平台）

- 外观一体化：有壁纸时 TitleBar/Sidebar 透明，PlayerBar 统一透明度+backdrop-blur

- 进度条外层直角、内层填充圆角

- 滚动条默认透明，悬停时显示

- 移除 PageHeader 粘性栏

- 内存优化：keep-alive TTL 5min、pageCache TTL 30min/上限30条、colorCache 上限200

- recentLocal 防抖写入、播放器 tick interval 500ms

CHANGELOG.md

@@ -1,3 +1,37 @@
+## v0.7.0
+
+### ✨ 新功能
+- **音乐云盘**：新增云盘页面，可浏览、播放云盘中的歌曲，查看文件详情（文件名、大小、比特率、上传时间），删除云盘歌曲，查看存储空间使用情况
+- **云盘上传**：支持上传本地音频文件到云盘，上传过程显示实时进度，支持 mp3/flac/wav/ogg/aac/m4a 格式
+- **下载音乐**：本地音乐拆分为「本地音乐」和「下载音乐」两个独立页面，下载音乐只显示通过应用下载的歌曲
+- **本地音乐多文件夹**：本地音乐支持添加多个扫描文件夹，通过三点按钮+弹窗管理文件夹路径
+- **歌手关注**：歌手详情页新增关注/取关按钮，关注状态在离开页面后不会丢失
+- **粘性导航栏**：页面滚动较深时顶部自动显示返回按钮和功能按钮，渐变模糊效果，不影响阅读
+- **骨架屏加载**：首页、歌单、歌手、专辑、云盘等多个页面加载时显示骨架占位动画，不再只有"加载中"文字
+
+### 🐛 修复
+- 网络较差时播放启动超时，音乐实际已开始播放但界面仍显示暂停
+- 全屏漫游抽屉打开时点击评论按钮无法切换到评论页
+- 关闭漫游抽屉后再打开，始终显示评论而非歌词
+- 歌手详情页关注后离开再回来，关注状态丢失
+- 切歌时偶尔触发上一首歌的播放结束事件导致异常
+- 评论点赞无限叠加（改为服务端状态驱动）
+- 播放栏进度条上方多余分隔线
+
+### 🎨 变更
+- 歌手详情页头像改为圆形，简介从独立标签页移至头部内嵌显示，溢出时可展开查看完整介绍
+- 歌单详情页描述溢出时显示"查看完整介绍"按钮
+- 首页推荐和排行榜加载失败时显示重试按钮，支持分别重试
+- 多个页面的返回按钮统一为粘性导航栏组件
+- 消息提示增加去重和数量限制，避免重复弹出
+
+### ⚡ 优化
+- 页面切换更流畅，路由全部改为懒加载
+- 页面缓存管理优化，30 秒未访问自动释放，多级跳转时保留导航链上的页面，「我喜欢的音乐」常驻缓存
+- 本地音乐扫描不再阻塞界面导航
+- 应用启动不再等待网络请求完成
+
+
 ## v0.6.0
 
 ### ✨ 新功能

README.md

@@ -1,126 +1,102 @@
+<div align="center">
+
 # Nekosonic
 
-一款轻量的跨平台音乐播放器，支持 Windows / Linux / macOS，音源源自网易云音乐。
+轻量跨平台桌面音乐播放器 · 网易云音乐
 
-## ✨ 特性
+[![Windows](https://img.shields.io/badge/Windows-0078D4?logo=windows11&logoColor=white)](https://github.com/atdunbg/Nekosonic-Music/releases)
+[![Linux](https://img.shields.io/badge/Linux-FCC624?logo=linux&logoColor=black)](https://github.com/atdunbg/Nekosonic-Music/releases)
+[![macOS](https://img.shields.io/badge/macOS-000000?logo=apple&logoColor=white)](https://github.com/atdunbg/Nekosonic-Music/releases)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-### 播放
+[下载安装](https://github.com/atdunbg/Nekosonic-Music/releases)
 
-- 🎵 在线音乐播放，流式缓冲边下边播
+---
-- 🎵 多音质选择（标准 / 较高 / 极高 HQ / 无损 SQ / Hi-Res）
-- 🔄 播放模式切换（列表循环 / 随机播放 / 单曲循环）
-- ⏯ 播放控制（播放 / 暂停 / 上一首 / 下一首 / 进度跳转 / 音量调节）
-- 📋 播放队列管理（查看队列 / 移除歌曲 / 清空队列）
-- 📻 私人漫游 FM（个性化推荐，VIP 试听自动跳过）
-- 🎵 本地音乐播放（支持 mp3 / flac / wav / ogg / aac / m4a / wma / opus）
-- 🔊 音频输出设备选择
-- 🎧 系统媒体控制（蓝牙耳机/键盘媒体键/系统面板，支持 Linux / Windows / macOS）
 
-### 发现与浏览
+</div>
 
-- 🔍 关键词搜索歌曲 + 热门搜索标签
+## 🎵 播放
-- 📋 歌单浏览（推荐歌单 / 排行榜 / 用户歌单 / 收藏歌单）
-- 📋 歌单详情（歌曲列表 + 收藏 / 取消收藏 + 歌单评论）
-- 🎤 歌手详情（热门歌曲 / 专辑 / 简介）
-- 💿 专辑详情（歌曲列表 + 播放全部）
-- 📅 每日推荐歌曲
 
-### 歌词与评论
+- 多音质选择（标准 / 较高 / HQ / SQ / Hi-Res）
+- 私人漫游 FM（个性化推荐）
+- 系统媒体控制集成（MPRIS / SMTC / Now Playing）
+- 音频输出设备选择
 
-- 🎤 实时滚动歌词（自动滚动 / 点击跳转 / 渐变透明度）
+## 🔍 发现
-- 🎤 歌词翻译显示
-- 🎤 全屏漫游模式（大封面 + 歌词 / 评论双标签页）
-- 💬 歌曲评论查看（热门评论 + 无限滚动加载 + 点赞）
 
-### 收藏与下载
+- 关键词搜索（歌曲 / 歌手 / 专辑）+ 搜索建议 + 热门搜索
+- 歌单浏览（推荐 / 排行榜 / 用户 / 收藏）
+- 歌手详情（热门歌曲 / 专辑 / 简介 + 关注）
+- 专辑详情
+- 每日推荐歌曲
 
-- ❤️ 一键喜欢 / 取消喜欢（同步到网易云账号）
+## 🎤 歌词与评论
-- ⬇️ 歌曲下载（带进度显示 / VIP 拦截 / 元数据保存）
-- 🎵 本地音乐管理（列出 / 播放 / 删除 / 音频元数据与封面读取）
-- 🕐 本地播放历史记录（最多 200 首）
 
-### 账号
+- 实时滚动歌词（ease-out 缓动 / 点击跳转 / 渐变透明度）
+- 歌词翻译
+- 全屏漫游模式（封面主色提取 + 歌词/评论双标签）
+- 歌曲评论（无限滚动 + 点赞）
 
-- 🔴 网易云账号登录（二维码扫码 / 手机号密码）
+## ❤️ 收藏与下载
-- 🔑 登录态持久化（重启后自动恢复）
 
-### 系统与设置
+- 一键喜欢 / 取消喜欢（同步到网易云账号）
+- 歌曲下载
+- 音乐云盘（上传 / 删除 / 详情 / 存储空间 / 上传进度）
+- 本地音乐（多文件夹扫描 / 封面补全）
+- 下载音乐（独立管理 / 删除）
 
-- 📡 系统托盘（播放控制 / 显示窗口 / 退出）
+## 🎨 个性化
-- 🛡 单实例运行（防止重复启动）
-- ⌨️ 自定义快捷键（应用内 + 系统全局）
-- 🎨 多主题切换（天蓝 / 翠绿 / 玫红 / 紫罗兰 / 橙色 / 青色 / 粉色）
-- ⚙️ 关闭窗口行为设置（每次询问 / 最小化到托盘 / 直接退出）
-- 🔄 自动更新（启动静默检测 + 自定义弹窗 + 忽略版本 + 下载进度）
-- 📝 更新日志查看
-- 📶 网络状态检测（断网/恢复 Toast 提示 + 自动重试加载）
 
-## 📦️ 安装
+- 多主题色（天蓝 / 翠绿 / 玫红 / 紫罗兰 / 橙色 / 青色 / 粉色）
+- 自定义快捷键（应用内 + 系统全局）
+- 关闭行为设置
+- 自动更新
 
-访问本项目的 [Releases](https://github.com/atdunbg/Nekosonic-Music/releases) 页面下载安装包。
+---
 
-## 💻 配置开发环境
+## 安装
+
+前往 [Releases](https://github.com/atdunbg/Nekosonic-Music/releases) 下载对应平台安装包。
+
+## 配置开发环境
 
 ```bash
-# 安装前端依赖
 npm install
-
+npm run tauri dev      # 开发
-# 启动开发服务器
+npm run tauri build    # 构建
-npm run tauri dev
-
-# 构建发布
-npm run tauri build
 ```
 
-### 环境要求
+> 环境要求：Node.js ≥ 18 · Rust ≥ 1.70 · Tauri CLI 2
 
-- Node.js >= 18
+## 技术栈
-- Rust >= 1.70
-- Tauri CLI 2
-
-## 🛠 技术栈
 
 | 层级 | 技术 |
-|------|------|
+|:------|:------|
 | 桌面框架 | Tauri 2 |
-| 前端 | Vue 3 + TypeScript |
+| 前端 | Vue 3 + TypeScript + Pinia |
-| 样式 | Tailwind CSS v4 + CSS 变量主题系统 |
+| 样式 | Tailwind CSS v4 + CSS 变量主题 |
-| 状态管理 | Pinia |
+| 音频解码 | symphonia + ringbuf |
-| 路由 | Vue Router 4 |
+| 媒体控制 | souvlaki |
-| 音频解码 | symphonia + ringbuf (Rust) |
-| 媒体控制 | souvlaki (Linux MPRIS / Windows SMTC / macOS Now Playing) |
 | 网易云 API | ncm-api-rs |
-| 构建工具 | Vite 6 |
+| 构建 | Vite 6 |
 
-## ☑️ Todo
+## Todo
 
-- [x] 评论系统
+- [x] 评论查看
 - [x] 歌曲下载
-- [x] 本地音乐管理
+- [x] 本地音乐
 - [x] 歌手详情页
 - [x] 专辑详情页
 - [x] 自定义全局快捷键
 - [x] 自动更新
 - [x] 歌词翻译
 - [x] 更多主题
-- [x] 系统媒体控制（蓝牙耳机/键盘媒体键）
+- [x] 音乐云盘
 - [ ] MV 播放
-- [ ] 音乐云盘
 - [ ] 桌面歌词
 
 欢迎提 Issue 和 Pull request。
 
-## 📜 开源许可
+## 开源许可
 
-本项目仅供个人学习研究使用，禁止用于商业及非法用途。
+本项目仅供个人学习研究使用，禁止用于商业及非法用途。基于 [MIT License](https://opensource.org/licenses/MIT) 开源。
-
-基于 [MIT license](https://opensource.org/licenses/MIT) 许可进行开源。
-
-## 致谢
-
-- [ncm-api-rs](https://crates.io/crates/ncm-api-rs) — 网易云音乐 API 的 Rust 封装
-- [Tauri](https://tauri.app/) — 跨平台桌面应用框架
-- [Vue.js](https://vuejs.org/) — 渐进式 JavaScript 框架
-- [Tailwind CSS](https://tailwindcss.com/) — 实用优先的 CSS 框架
-- [symphonia](https://crates.io/crates/symphonia) — Rust 纯音频解码库
-- [souvlaki](https://crates.io/crates/souvlaki) — 跨平台 OS 媒体控制库

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nekosonic",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "Nekosonic"
-version = "0.6.0"
+version = "0.7.0"
 description = "A Simple music app"
 authors = ["atdunbg"]
 edition = "2021"
@@ -33,6 +33,7 @@ futures-util = "0.3"
 dirs = "5"
 lofty = "0.22"
 base64 = "0.22"
+md5 = "0.7"
 
 ncm-api-rs = "0.1"
 tokio = { version = "1", features = ["rt", "sync"] }   

src-tauri/src/api.rs

@@ -2,6 +2,7 @@ use ncm_api_rs::{create_client, ApiClient, Query};
 use serde::Deserialize;
 use serde_json::json;
 use tauri::{Manager, State, Emitter};
+use tokio::sync::Mutex as AsyncMutex;
 use std::sync::Mutex as StdMutex;
 use std::sync::atomic::Ordering;
 
@@ -44,14 +45,14 @@ use base64::Engine;
 ///    ```
 macro_rules! api_call {
     ($state:expr, $method:ident) => {{
-        let client = $state.client.lock().unwrap().clone();
+        let client = $state.client.lock().await.clone();
         let q = $state.build_query();
         client.$method(&q).await
             .map(|r| r.body.to_string())
             .map_err(|e| e.to_string())
     }};
     ($state:expr, $method:ident, params: [$(($key:expr, $val:expr)),* $(,)?]) => {{
-        let client = $state.client.lock().unwrap().clone();
+        let client = $state.client.lock().await.clone();
         let mut q = $state.build_query();
         $(q = q.param($key, $val);)*
         client.$method(&q).await
@@ -59,7 +60,7 @@ macro_rules! api_call {
             .map_err(|e| e.to_string())
     }};
     ($state:expr, $method:ident, query: $q:expr) => {{
-        let client = $state.client.lock().unwrap().clone();
+        let client = $state.client.lock().await.clone();
         client.$method(&$q).await
             .map(|r| r.body.to_string())
             .map_err(|e| e.to_string())
@@ -67,7 +68,7 @@ macro_rules! api_call {
 }
 
 pub struct ApiController {
-    client: StdMutex<ApiClient>,
+    client: AsyncMutex<ApiClient>,
     cookie: StdMutex<Option<String>>,
     cookie_path: PathBuf,
 }
@@ -94,7 +95,7 @@ impl ApiController {
 
     let client = create_client(None);
     ApiController {
-        client: StdMutex::new(client),
+        client: AsyncMutex::new(client),
         cookie: StdMutex::new(saved_cookie),
         cookie_path,
     }
@@ -111,11 +112,10 @@ impl ApiController {
     query
 }
     /// 将 Cookie 字符串持久化到本地文件并同步到 API 客户端
-    fn save_cookie(&self, cookie_str: &str) {
+    async fn save_cookie(&self, cookie_str: &str) {
         let _ = fs::write(&self.cookie_path, cookie_str);
-        if let Ok(mut client) = self.client.lock() {
+        let mut client = self.client.lock().await;
-            client.set_cookie(cookie_str.to_string());
+        client.set_cookie(cookie_str.to_string());
-        }
     }
 }
 
@@ -191,7 +191,7 @@ pub struct SongUrlQuery { pub id: u64, pub level: Option<String>, pub fm_mode: O
 /// 获取歌曲播放地址（返回完整 data 对象，包含 url、freeTrialInfo 等）
 #[tauri::command]
 pub async fn get_song_url(query: SongUrlQuery, state: State<'_, ApiController>) -> Result<String, String> {
-    let client = state.client.lock().unwrap().clone();
+    let client = state.client.lock().await.clone();
     let level = query.level.as_deref().unwrap_or("standard");
 
     let resp = if query.fm_mode.unwrap_or(false) {
@@ -251,7 +251,7 @@ pub async fn get_playlist_detail(id: u64, state: State<'_, ApiController>) -> Re
 /// 手机号密码登录
 #[tauri::command]
 pub async fn login(query: LoginQuery, state: State<'_, ApiController>) -> Result<String, String> {
-    let client = state.client.lock().unwrap().clone();
+    let client = state.client.lock().await.clone();
     let q = Query::new()
         .param("phone", &query.phone)
         .param("password", &query.password);
@@ -260,7 +260,7 @@ pub async fn login(query: LoginQuery, state: State<'_, ApiController>) -> Result
     if !resp.cookie.is_empty() {
         let cookie_str = cookies_to_key_values(&resp.cookie);
         *state.cookie.lock().map_err(|e| e.to_string())? = Some(cookie_str.clone());
-        state.save_cookie(&cookie_str);
+        state.save_cookie(&cookie_str).await;
     }
 
     Ok(resp.body.to_string())
@@ -277,7 +277,7 @@ pub async fn logout(state: State<'_, ApiController>) -> Result<(), String> {
 /// 获取二维码登录密钥
 #[tauri::command]
 pub async fn get_qr_key(state: State<'_, ApiController>) -> Result<String, String> {
-    let client = state.client.lock().unwrap().clone();
+    let client = state.client.lock().await.clone();
     let q = state.build_query();
     let resp = client.login_qr_key(&q).await.map_err(|e| e.to_string())?;
     resp.body["unikey"]
@@ -292,7 +292,7 @@ pub async fn create_qr(
     query: QrKeyQuery,
     state: State<'_, ApiController>,
 ) -> Result<String, String> {
-    let client = state.client.lock().unwrap().clone();
+    let client = state.client.lock().await.clone();
     let q = state
         .build_query()
         .param("key", &query.key)
@@ -308,13 +308,13 @@ pub async fn create_qr(
 /// 检查二维码扫码状态
 #[tauri::command]
 pub async fn check_qr_status(query: QrKeyQuery, state: State<'_, ApiController>) -> Result<String, String> {
-    let client = state.client.lock().unwrap().clone();
+    let client = state.client.lock().await.clone();
     let q = state.build_query().param("key", &query.key);
     let resp = client.login_qr_check(&q).await.map_err(|e| e.to_string())?;
     if resp.body["code"].as_u64() == Some(803) && !resp.cookie.is_empty() {
         let cookie_str = cookies_to_key_values(&resp.cookie);
         *state.cookie.lock().map_err(|e| e.to_string())? = Some(cookie_str.clone());
-        state.save_cookie(&cookie_str);
+        state.save_cookie(&cookie_str).await;
     }
     Ok(resp.body.to_string())
 }
@@ -392,12 +392,51 @@ pub struct ScrobbleQuery {
     pub id: u64,
     pub sourceid: Option<String>,
     pub time: u64,
+    pub alg: Option<String>,
+    pub source: Option<String>,
+    pub bitrate: Option<u64>,
 }
 
 /// 听歌打卡
 #[tauri::command]
 pub async fn scrobble(query: ScrobbleQuery, state: State<'_, ApiController>) -> Result<String, String> {
-    api_call!(state, scrobble, params: [("id", &query.id.to_string()), ("sourceid", query.sourceid.as_deref().unwrap_or("")), ("time", &query.time.to_string())])
+    let client = state.client.lock().await.clone();
+    let cookie = state.cookie.lock().ok().and_then(|g| g.clone()).unwrap_or_default();
+    let option = ncm_api_rs::request::RequestOption {
+        crypto: ncm_api_rs::request::CryptoType::Weapi,
+        cookie: Some(cookie),
+        ua: None,
+        proxy: None,
+        real_ip: None,
+        random_cn_ip: false,
+        e_r: None,
+        domain: None,
+        check_token: false,
+    };
+    let data = json!({
+        "logs": serde_json::to_string(&json!([{
+            "action": "play",
+            "json": {
+                "download": 0,
+                "end": "playend",
+                "id": query.id.to_string(),
+                "sourceId": query.sourceid.as_deref().unwrap_or(""),
+                "time": query.time as i64,
+                "type": "song",
+                "wifi": 0,
+                "source": query.source.as_deref().unwrap_or("list"),
+                "alg": query.alg.as_deref().unwrap_or(""),
+                "bitrate": query.bitrate.unwrap_or(0),
+                "mainsite": 1,
+                "content": ""
+            }
+        }])).unwrap_or_default()
+    });
+    let result = client.request("/api/feedback/weblog", data.clone(), option)
+        .await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string());
+    result
 }
 
 /// 获取歌曲详情
@@ -500,7 +539,7 @@ pub async fn download_song(
     let q = state.build_query()
         .param("id", &query.id.to_string())
         .param("level", level);
-    let client = state.client.lock().unwrap().clone();
+    let client = state.client.lock().await.clone();
     let resp = client.song_url_v1(&q).await.map_err(|e| e.to_string())?;
     let data = &resp.body["data"][0];
     let url = data["url"].as_str().filter(|s| !s.is_empty());
@@ -582,18 +621,17 @@ pub async fn download_song(
     Ok(filename)
 }
 
-/// 列出本地已下载的歌曲，优先使用元数据文件补充信息
+/// 扫描指定目录下的音频文件，优先使用元数据文件补充信息
-#[tauri::command]
+/// `downloaded_only` 为 true 时，只返回有对应 .json 元数据的文件（即通过应用下载的）
-pub fn list_local_songs(app_handle: tauri::AppHandle, download_path: Option<String>) -> Result<Vec<LocalSongInfo>, String> {
+fn scan_dir_for_songs(dir: &PathBuf, downloaded_only: bool) -> Result<Vec<LocalSongInfo>, String> {
-    let download_dir = resolve_download_dir(&app_handle, download_path.as_deref());
+    if !dir.exists() {
-    if !download_dir.exists() {
         return Ok(Vec::new());
     }
 
     let audio_exts = ["mp3", "flac", "wav", "ogg", "aac", "m4a", "wma", "opus"];
 
     let mut meta_map: std::collections::HashMap<String, serde_json::Value> = std::collections::HashMap::new();
-    let entries = fs::read_dir(&download_dir).map_err(|e| format!("读取目录失败: {}", e))?;
+    let entries = fs::read_dir(dir).map_err(|e| format!("读取目录失败: {}", e))?;
 
     for entry in entries.flatten() {
         let path = entry.path();
@@ -609,7 +647,7 @@ pub fn list_local_songs(app_handle: tauri::AppHandle, download_path: Option<Stri
     }
 
     let mut songs: Vec<LocalSongInfo> = Vec::new();
-    let entries = fs::read_dir(&download_dir).map_err(|e| format!("读取目录失败: {}", e))?;
+    let entries = fs::read_dir(dir).map_err(|e| format!("读取目录失败: {}", e))?;
 
     for entry in entries.flatten() {
         let path = entry.path();
@@ -621,6 +659,11 @@ pub fn list_local_songs(app_handle: tauri::AppHandle, download_path: Option<Stri
         let filename = path.file_name().unwrap_or_default().to_string_lossy().to_string();
         let file_size = fs::metadata(&path).map(|m| m.len()).unwrap_or(0);
 
+        // 下载音乐模式：只显示有 .json 元数据的文件
+        if downloaded_only && !meta_map.contains_key(&filename) {
+            continue;
+        }
+
         let (title, artist, album, duration_ms, cover_b64) = read_audio_metadata(&path);
 
         if let Some(meta) = meta_map.get(&filename) {
@@ -678,6 +721,36 @@ pub fn list_local_songs(app_handle: tauri::AppHandle, download_path: Option<Stri
     Ok(songs)
 }
 
+/// 列出本地已下载的歌曲（下载目录）
+#[tauri::command]
+pub async fn list_local_songs(app_handle: tauri::AppHandle, download_path: Option<String>) -> Result<Vec<LocalSongInfo>, String> {
+    let download_dir = resolve_download_dir(&app_handle, download_path.as_deref());
+    tokio::task::spawn_blocking(move || {
+        scan_dir_for_songs(&download_dir, true) // 只显示下载的歌曲
+    }).await.map_err(|e| format!("扫描任务失败: {}", e))?
+}
+
+/// 扫描多个本地文件夹中的音频文件
+#[tauri::command]
+pub async fn scan_local_folders(paths: Vec<String>) -> Result<Vec<LocalSongInfo>, String> {
+    tokio::task::spawn_blocking(move || {
+        let mut all_songs: Vec<LocalSongInfo> = Vec::new();
+        let mut seen_paths: std::collections::HashSet<String> = std::collections::HashSet::new();
+
+        for p in &paths {
+            let dir = PathBuf::from(p);
+            let songs = scan_dir_for_songs(&dir, false)?; // 本地音乐：显示所有音频
+            for song in songs {
+                if seen_paths.insert(song.path.clone()) {
+                    all_songs.push(song);
+                }
+            }
+        }
+
+        Ok(all_songs)
+    }).await.map_err(|e| format!("扫描任务失败: {}", e))?
+}
+
 /// 读取音频文件的元数据（标题、艺术家、专辑、时长、封面）
 fn read_audio_metadata(path: &PathBuf) -> (String, String, String, u64, Option<String>) {
     match lofty::read_from_path(path) {
@@ -743,29 +816,33 @@ pub struct DeleteLocalSongQuery {
 
 /// 删除本地已下载的歌曲文件及其元数据
 #[tauri::command]
-pub fn delete_local_song(
+pub async fn delete_local_song(
     app_handle: tauri::AppHandle,
     query: DeleteLocalSongQuery,
 ) -> Result<(), String> {
     let download_dir = resolve_download_dir(&app_handle, query.download_path.as_deref());
-    let file_path = download_dir.join(&query.filename);
+    tokio::task::spawn_blocking(move || {
-    let meta_path = download_dir.join(format!("{}.json", query.id));
+        let file_path = download_dir.join(&query.filename);
+        let meta_path = download_dir.join(format!("{}.json", query.id));
 
-    if file_path.exists() {
+        if file_path.exists() {
-        fs::remove_file(&file_path).map_err(|e| format!("删除文件失败: {}", e))?;
+            fs::remove_file(&file_path).map_err(|e| format!("删除文件失败: {}", e))?;
-    }
+        }
-    if meta_path.exists() {
+        if meta_path.exists() {
-        fs::remove_file(&meta_path).map_err(|e| format!("删除元数据失败: {}", e))?;
+            fs::remove_file(&meta_path).map_err(|e| format!("删除元数据失败: {}", e))?;
-    }
+        }
-    Ok(())
+        Ok(())
+    }).await.map_err(|e| format!("删除任务失败: {}", e))?
 }
 
 /// 检查指定歌曲是否已下载到本地
 #[tauri::command]
-pub fn check_local_song(app_handle: tauri::AppHandle, id: u64, download_path: Option<String>) -> Result<bool, String> {
+pub async fn check_local_song(app_handle: tauri::AppHandle, id: u64, download_path: Option<String>) -> Result<bool, String> {
     let download_dir = resolve_download_dir(&app_handle, download_path.as_deref());
-    let meta_path = download_dir.join(format!("{}.json", id));
+    tokio::task::spawn_blocking(move || {
-    Ok(meta_path.exists())
+        let meta_path = download_dir.join(format!("{}.json", id));
+        Ok(meta_path.exists())
+    }).await.map_err(|e| format!("检查任务失败: {}", e))?
 }
 
 /// 解析下载目录，优先使用自定义路径，否则使用默认目录
@@ -795,7 +872,7 @@ fn get_default_download_dir(app_handle: &tauri::AppHandle) -> PathBuf {
 
 /// 获取默认下载路径字符串，供前端使用
 #[tauri::command]
-pub fn get_default_download_path(app_handle: tauri::AppHandle) -> String {
+pub async fn get_default_download_path(app_handle: tauri::AppHandle) -> String {
     get_default_download_dir(&app_handle).to_string_lossy().to_string()
 }
 
@@ -816,6 +893,79 @@ fn sanitize_filename(name: &str) -> String {
         .to_string()
 }
 
+/// 读取本地图片文件并转为 base64 data URL，供前端壁纸等场景使用
+#[tauri::command]
+pub async fn read_image_as_data_url(path: String) -> Result<String, String> {
+    tokio::task::spawn_blocking(move || {
+        let file_path = PathBuf::from(&path);
+        if !file_path.exists() {
+            return Err(format!("文件不存在: {}", path));
+        }
+        let bytes = fs::read(&file_path).map_err(|e| format!("读取文件失败: {}", e))?;
+        let mime = match file_path.extension().and_then(|e| e.to_str()).unwrap_or("").to_lowercase().as_str() {
+            "png" => "image/png",
+            "jpg" | "jpeg" => "image/jpeg",
+            "webp" => "image/webp",
+            "gif" => "image/gif",
+            "bmp" => "image/bmp",
+            "svg" => "image/svg+xml",
+            _ => "image/jpeg", // 默认 jpeg
+        };
+        let b64 = base64::engine::general_purpose::STANDARD.encode(&bytes);
+        Ok(format!("data:{};base64,{}", mime, b64))
+    }).await.map_err(|e| format!("任务失败: {}", e))?
+}
+
+/// 在系统文件管理器中显示指定文件（选中）
+#[tauri::command]
+pub fn show_item_in_folder(path: String) -> Result<(), String> {
+    let p = PathBuf::from(&path);
+    if !p.exists() {
+        return Err(format!("文件不存在: {}", path));
+    }
+    #[cfg(target_os = "windows")]
+    {
+        std::process::Command::new("explorer")
+            .args(["/select,", &p.to_string_lossy()])
+            .spawn()
+            .map_err(|e| format!("打开文件夹失败: {}", e))?;
+    }
+    #[cfg(target_os = "macos")]
+    {
+        std::process::Command::new("open")
+            .args(["-R", &p.to_string_lossy()])
+            .spawn()
+            .map_err(|e| format!("打开文件夹失败: {}", e))?;
+    }
+    #[cfg(target_os = "linux")]
+    {
+        let uri = format!("file://{}", p.to_string_lossy());
+        // 优先使用 freedesktop DBus FileManager1 接口（支持选中文件，Nautilus/Dolphin 等均实现）
+        let dbus_ok = std::process::Command::new("dbus-send")
+            .args([
+                "--session",
+                "--print-reply",
+                "--dest=org.freedesktop.FileManager1",
+                "/org/freedesktop/FileManager1",
+                "org.freedesktop.FileManager1.ShowItems",
+                &format!("array:string:{}", uri),
+                "string:",
+            ])
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false);
+        // fallback：仅打开父目录（无法选中文件）
+        if !dbus_ok {
+            let parent = p.parent().unwrap_or(&p).to_string_lossy().to_string();
+            std::process::Command::new("xdg-open")
+                .arg(&parent)
+                .spawn()
+                .map_err(|e| format!("打开文件夹失败: {}", e))?;
+        }
+    }
+    Ok(())
+}
+
 /// 获取歌手详情
 #[tauri::command]
 pub async fn artist_detail(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
@@ -867,6 +1017,28 @@ pub async fn artist_desc(id: u64, state: State<'_, ApiController>) -> Result<Str
     api_call!(state, artist_desc, params: [("id", &id.to_string())])
 }
 
+/// 关注/取消关注歌手
+#[derive(Deserialize)]
+pub struct ArtistSubQuery { pub id: u64, pub sub: Option<bool> }
+
+#[tauri::command]
+pub async fn artist_sub(query: ArtistSubQuery, state: State<'_, ApiController>) -> Result<String, String> {
+    let t = if query.sub.unwrap_or(true) { "1" } else { "0" };
+    api_call!(state, artist_sub, params: [("id", &query.id.to_string()), ("t", t)])
+}
+
+/// 获取已关注的歌手列表
+#[derive(Deserialize)]
+pub struct ArtistSublistQuery { pub limit: Option<u32>, pub offset: Option<u32> }
+
+#[tauri::command]
+pub async fn artist_sublist(query: ArtistSublistQuery, state: State<'_, ApiController>) -> Result<String, String> {
+    let q = state.build_query()
+        .param("limit", &query.limit.unwrap_or(100).to_string())
+        .param("offset", &query.offset.unwrap_or(0).to_string());
+    api_call!(state, artist_sublist, query: &q)
+}
+
 /// 获取专辑详情
 #[tauri::command]
 pub async fn album_detail(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
@@ -977,3 +1149,288 @@ pub struct CommentLikeQuery {
     pub id: u64,
     pub cid: u64,
 }
+
+// ==================== 云盘 ====================
+
+/// 获取云盘列表
+#[tauri::command]
+pub async fn user_cloud(limit: Option<u32>, offset: Option<u32>, state: State<'_, ApiController>) -> Result<String, String> {
+    api_call!(state, user_cloud, params: [("limit", &limit.unwrap_or(30).to_string()), ("offset", &offset.unwrap_or(0).to_string())])
+}
+
+/// 获取云盘歌曲详情
+#[tauri::command]
+pub async fn user_cloud_detail(id: String, state: State<'_, ApiController>) -> Result<String, String> {
+    api_call!(state, user_cloud_detail, params: [("id", &id)])
+}
+
+/// 删除云盘歌曲
+#[tauri::command]
+pub async fn user_cloud_del(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
+    api_call!(state, user_cloud_del, params: [("id", &id.to_string())])
+}
+
+/// 查询 NOS LBS 获取上传节点域名
+///
+/// 通过 `http://wannos.127.net/lbs` 查询指定 bucket 的上传节点，
+/// 从返回的 `nosup-<region><n>.127.net` 中提取区域标识，
+/// 构造 multipart upload 所需的 `<bucket>.nos-<region>.163yun.com` 域名。
+async fn query_nos_upload_host(bucket: &str) -> Result<String, String> {
+    let lbs_url = format!("http://wannos.127.net/lbs?version=1.0&bucketname={}", bucket);
+    let http = reqwest::Client::new();
+    let resp = http.get(&lbs_url).send().await
+        .map_err(|e| format!("LBS查询请求失败: {}", e))?;
+
+    let lbs_data: serde_json::Value = resp.json().await
+        .map_err(|e| format!("LBS响应解析失败: {}", e))?;
+
+    let nosup_url = lbs_data["upload"][0].as_str()
+        .ok_or_else(|| format!("LBS响应缺少upload字段: {}", lbs_data))?;
+
+    // 从 "nosup-jd1.127.net" 中提取区域 "jd"
+    let region = extract_nos_region(nosup_url)?;
+    Ok(format!("https://{}.nos-{}.163yun.com", bucket, region))
+}
+
+/// 从 nosup 上传节点 URL 中提取 NOS 区域标识
+///
+/// 例如: `http://nosup-jd1.127.net` → `jd`
+///       `http://nosup-hz1.127.net` → `hz`
+fn extract_nos_region(nosup_url: &str) -> Result<String, String> {
+    let start = nosup_url.find("nosup-")
+        .ok_or_else(|| format!("无法从LBS响应中解析区域: {}", nosup_url))?;
+    let after = &nosup_url[start + 6..];
+    let dot = after.find('.')
+        .ok_or_else(|| format!("无法从LBS响应中解析区域: {}", nosup_url))?;
+    let region_with_num = &after[..dot];
+    // 去掉末尾数字: "jd1" → "jd"
+    let region: String = region_with_num
+        .chars()
+        .take_while(|c| !c.is_ascii_digit())
+        .collect();
+    if region.is_empty() {
+        return Err(format!("区域标识为空: {}", nosup_url));
+    }
+    Ok(region)
+}
+
+/// 云盘上传：完整流程（检查 → [获取Token → LBS查询 → NOS上传] → 提交信息 → 发布）
+///
+/// 关键发现：upload check 返回的 songId 是十六进制字符串（如 MD5 摘要），不是数字 ID。
+/// needUpload=false 表示文件已在 NOS 上，无需重复上传，直接走 info+pub 即可。
+/// 参考 ydq/netease-cloud-disk-music-upload 实现。
+#[tauri::command]
+pub async fn cloud_upload(file_path: String, app_handle: tauri::AppHandle, state: State<'_, ApiController>) -> Result<String, String> {
+    let path = PathBuf::from(&file_path);
+    if !path.exists() {
+        return Err("文件不存在".to_string());
+    }
+
+    let file_bytes = fs::read(&path).map_err(|e| format!("读取文件失败: {}", e))?;
+    let file_size = file_bytes.len() as i64;
+    let filename = path.file_name().unwrap_or_default().to_string_lossy().to_string();
+
+    // 计算 MD5
+    let md5_hex = format!("{:x}", md5::compute(&file_bytes));
+
+    // 读取音频元数据
+    let (song_name, artist, album, _duration, _cover) = read_audio_metadata(&path);
+    let bitrate = {
+        match lofty::read_from_path(&path) {
+            Ok(tf) => {
+                let br = tf.properties().audio_bitrate().unwrap_or(0) * 1000;
+                if br > 0 { br.to_string() } else { "999000".to_string() }
+            }
+            Err(_) => "999000".to_string()
+        }
+    };
+
+    // 文件扩展名
+    let ext = if filename.contains('.') {
+        filename.rsplit('.').next().unwrap_or("mp3").to_string()
+    } else {
+        "mp3".to_string()
+    };
+
+    let client = state.client.lock().await.clone();
+
+    // Step 1: 上传检查
+    let check_q = state.build_query()
+        .param("bitrate", &bitrate)
+        .param("length", &file_size.to_string())
+        .param("md5", &md5_hex)
+        .param("ext", &ext)
+        .param("songId", "0");
+
+    let check_res = client.cloud_upload_check(&check_q).await
+        .map_err(|e| format!("上传检查失败: {}", e))?;
+    let check_data = &check_res.body;
+
+    // songId 是十六进制字符串（非数字），需要保持字符串传递
+    let song_id = check_data["songId"].as_str().unwrap_or("0").to_string();
+    let need_upload = check_data["needUpload"].as_bool().unwrap_or(true);
+
+    let mut resource_id = String::new();
+
+    // Step 2-4: 仅在 needUpload=true 时执行 NOS 上传
+    if need_upload {
+        // Step 2: 获取 NOS 上传 Token
+        let token_q = state.build_query()
+            .param("filename", &filename)
+            .param("md5", &md5_hex);
+
+        let token_res = client.cloud_upload_token_alloc(&token_q).await
+            .map_err(|e| format!("获取上传Token失败: {}", e))?;
+        let token_data = &token_res.body;
+
+        resource_id = token_data["result"]["resourceId"].as_str().unwrap_or("").to_string();
+        let object_key_raw = token_data["result"]["objectKey"].as_str().unwrap_or("").to_string();
+        let object_key = object_key_raw.replace('/', "%2F");
+        let token_str = token_data["result"]["token"].as_str().unwrap_or("").to_string();
+
+        if token_str.is_empty() {
+            return Err(format!("获取上传Token为空, 响应: {}", token_data));
+        }
+
+        // Step 3: 查询 LBS 获取正确的 NOS 上传节点
+        let bucket = "jd-musicrep-privatecloud-audio-public";
+        let nos_host = query_nos_upload_host(bucket).await
+            .unwrap_or_else(|_| format!("https://{}.nos-jd.163yun.com", bucket));
+
+        let content_type = match ext.as_str() {
+            "flac" => "audio/flac",
+            "wav" => "audio/wav",
+            "ogg" => "audio/ogg",
+            "aac" | "m4a" => "audio/aac",
+            _ => "audio/mpeg",
+        };
+
+        // Step 4: 上传文件到 NOS（multipart upload）
+        let http_client = reqwest::Client::new();
+
+        // 4a: 初始化 multipart upload
+        let init_url = format!("{}/{}?uploads", nos_host, object_key);
+        let init_res = http_client.post(&init_url)
+            .header("x-nos-token", &token_str)
+            .header("X-Nos-Meta-Content-Type", content_type)
+            .send()
+            .await
+            .map_err(|e| format!("初始化NOS上传失败: {}", e))?;
+
+        let init_status = init_res.status();
+        let init_xml = init_res.text().await.map_err(|e| format!("读取NOS响应失败: {}", e))?;
+
+        if !init_status.is_success() {
+            return Err(format!("初始化NOS上传失败: HTTP {} 响应: {}", init_status, init_xml));
+        }
+
+        // 解析 UploadId
+        let upload_id = init_xml
+            .split("<UploadId>")
+            .nth(1)
+            .and_then(|s| s.split("</UploadId>").next())
+            .unwrap_or_default()
+            .to_string();
+
+        if upload_id.is_empty() {
+            return Err(format!("获取UploadId失败, NOS响应: {}", init_xml));
+        }
+
+        // 4b: 分块上传（每块 10MB）
+        let block_size = 10 * 1024 * 1024;
+        let file_size_usize = file_bytes.len();
+        let mut offset = 0usize;
+        let mut block_index = 1u32;
+        let mut etags = Vec::new();
+        let total_blocks = ((file_size_usize + block_size - 1) / block_size).max(1);
+
+        while offset < file_size_usize {
+            let end = (offset + block_size).min(file_size_usize);
+            let chunk = file_bytes[offset..end].to_vec();
+
+            let part_url = format!(
+                "{}/{}?partNumber={}&uploadId={}",
+                nos_host, object_key, block_index, upload_id
+            );
+
+            let part_res = http_client.put(&part_url)
+                .header("x-nos-token", &token_str)
+                .header("Content-Type", content_type)
+                .body(chunk)
+                .send()
+                .await
+                .map_err(|e| format!("上传分块{}失败: {}", block_index, e))?;
+
+            if let Some(etag) = part_res.headers().get("etag") {
+                etags.push(etag.to_str().unwrap_or_default().to_string());
+            }
+
+            // 发送上传进度
+            let progress = (block_index as f64 / total_blocks as f64 * 100.0).min(100.0);
+            let _ = app_handle.emit("cloud-upload-progress", json!({
+                "filename": filename,
+                "progress": progress,
+                "uploaded": end,
+                "total": file_size_usize,
+            }));
+
+            offset = end;
+            block_index += 1;
+        }
+
+        // 4c: 完成 multipart upload
+        let mut complete_xml = String::from("<CompleteMultipartUpload>");
+        for (i, etag) in etags.iter().enumerate() {
+            complete_xml.push_str(&format!(
+                "<Part><PartNumber>{}</PartNumber><ETag>{}</ETag></Part>",
+                i + 1, etag
+            ));
+        }
+        complete_xml.push_str("</CompleteMultipartUpload>");
+
+        let complete_url = format!("{}/{}?uploadId={}", nos_host, object_key, upload_id);
+        let complete_res = http_client.post(&complete_url)
+            .header("Content-Type", "text/plain;charset=UTF-8")
+            .header("X-Nos-Meta-Content-Type", content_type)
+            .header("x-nos-token", &token_str)
+            .body(complete_xml)
+            .send()
+            .await
+            .map_err(|e| format!("完成NOS上传失败: {}", e))?;
+
+        if !complete_res.status().is_success() {
+            let status = complete_res.status();
+            let body = complete_res.text().await.unwrap_or_default();
+            return Err(format!("完成NOS上传失败: HTTP {} 响应: {}", status, body));
+        }
+    }
+
+    // Step 5: 提交歌曲信息（songId 使用 check 返回的字符串值）
+    let info_q = state.build_query()
+        .param("md5", &md5_hex)
+        .param("songId", &song_id)
+        .param("filename", &filename)
+        .param("song", &song_name)
+        .param("album", &album)
+        .param("artist", &artist)
+        .param("bitrate", &bitrate)
+        .param("resourceId", &resource_id);
+
+    let info_res = client.cloud_upload_info(&info_q).await
+        .map_err(|e| format!("提交歌曲信息失败: {}", e))?;
+    let info_data = &info_res.body;
+
+    // info 可能返回新的 songId，优先使用
+    let final_song_id = info_data["songId"].as_str()
+        .filter(|s| s != &"0" && !s.is_empty())
+        .unwrap_or(&song_id)
+        .to_string();
+
+    // Step 6: 发布
+    let pub_q = state.build_query().param("songId", &final_song_id);
+    let pub_res = client.cloud_publish(&pub_q).await
+        .map_err(|e| format!("发布失败: {}", e))?;
+
+    let _ = app_handle.emit("cloud-upload-complete", &filename);
+    Ok(pub_res.body.to_string())
+}

src-tauri/src/audio.rs

@@ -35,6 +35,7 @@ pub struct AudioController {
     tx: Sender<AudioCmd>,
     current_url: Arc<Mutex<Option<String>>>,
     position: Arc<Mutex<f64>>,
+    is_playing: Arc<AtomicBool>,
 }
 
 impl AudioController {
@@ -43,11 +44,13 @@ impl AudioController {
         let (tx, rx) = channel();
         let current_url = Arc::new(Mutex::new(None));
         let position = Arc::new(Mutex::new(0.0));
+        let is_playing = Arc::new(AtomicBool::new(false));
         let url_clone = current_url.clone();
         let pos_clone = position.clone();
+        let playing_clone = is_playing.clone();
         let ah_clone = app_handle.clone();
-        thread::spawn(move || audio_thread(rx, url_clone, pos_clone, ah_clone));
+        thread::spawn(move || audio_thread(rx, url_clone, pos_clone, playing_clone, ah_clone));
-        AudioController { tx, current_url, position }
+        AudioController { tx, current_url, position, is_playing }
     }
 
     /// 播放指定URL的网络音频
@@ -78,6 +81,9 @@ impl AudioController {
     pub fn get_position(&self) -> f64 {
         *self.position.lock().unwrap()
     }
+    pub fn get_is_playing(&self) -> bool {
+        self.is_playing.load(Ordering::Relaxed)
+    }
 }
 
 /// 缓冲区内部状态，存储已下载的字节数据及完成/取消标志
@@ -908,7 +914,7 @@ fn restart_playback_on_device_change(
 }
 
 /// 音频线程主循环，接收命令并管理播放生命周期，包括设备热切换和播放结束检测
-fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>, shared_position: Arc<Mutex<f64>>, app_handle: AppHandle) {
+fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>, shared_position: Arc<Mutex<f64>>, is_playing: Arc<AtomicBool>, app_handle: AppHandle) {
     let mut selected_device: Option<String> = None;
     let mut current_volume: f32 = 1.0;
     let mut output_ctx: Option<OutputContext> = None;
@@ -925,6 +931,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                 AudioCmd::Play(url) => {
                     audio_active = false;
                     audio_paused = false;
+                    is_playing.store(false, Ordering::Relaxed);
                     manual_stop = false;
                     current_local_path = None;
 
@@ -971,6 +978,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                         Ok(ctx) => {
                             output_ctx = Some(ctx);
                             audio_active = true;
+                            is_playing.store(true, Ordering::Relaxed);
                             let _ = app_handle.emit("audio-started", ());
                         }
                         Err(e) => {
@@ -982,6 +990,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                 AudioCmd::PlayLocal(path) => {
                     audio_active = false;
                     audio_paused = false;
+                    is_playing.store(false, Ordering::Relaxed);
                     manual_stop = false;
                     current_local_path = Some(path.clone());
 
@@ -1008,6 +1017,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                         Ok(ctx) => {
                             output_ctx = Some(ctx);
                             audio_active = true;
+                            is_playing.store(true, Ordering::Relaxed);
                             let _ = app_handle.emit("audio-started", ());
                         }
                         Err(e) => {
@@ -1018,6 +1028,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
 
                 AudioCmd::Pause => {
                     audio_paused = true;
+                    is_playing.store(false, Ordering::Relaxed);
                     if let Some(ref ctx) = output_ctx {
                         ctx.playback.playing.store(false, Ordering::Relaxed);
                     }
@@ -1025,6 +1036,9 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
 
                 AudioCmd::Resume => {
                     audio_paused = false;
+                    if audio_active {
+                        is_playing.store(true, Ordering::Relaxed);
+                    }
                     if let Some(ref ctx) = output_ctx {
                         ctx.playback.playing.store(true, Ordering::Relaxed);
                     }
@@ -1033,6 +1047,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                 AudioCmd::Stop => {
                     audio_active = false;
                     audio_paused = false;
+                    is_playing.store(false, Ordering::Relaxed);
                     manual_stop = true;
                     stop_playback(&mut output_ctx, &shared_position);
                     if let Some(ref buf) = current_audio_buffer {
@@ -1051,9 +1066,14 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                     let device = get_output_device(&selected_device);
                     match start_playback(mss, &device, current_volume, Some(time)) {
                         Ok(ctx) => {
+                            if audio_paused {
+                                is_playing.store(false, Ordering::Relaxed);
+                                ctx.playback.playing.store(false, Ordering::Relaxed);
+                            } else {
+                                is_playing.store(true, Ordering::Relaxed);
+                            }
                             output_ctx = Some(ctx);
                             audio_active = true;
-                            audio_paused = false;
                         }
                         Err(e) => {
                             eprintln!("[audio] seek 播放失败: {}", e);
@@ -1097,6 +1117,7 @@ fn audio_thread(rx: Receiver<AudioCmd>, _current_url: Arc<Mutex<Option<String>>>
                             && ctx.playback.buffer_exhausted.load(Ordering::Relaxed)
                             && !manual_stop && !audio_paused {
                             audio_active = false;
+                            is_playing.store(false, Ordering::Relaxed);
                             let _ = app_handle.emit("audio-ended", ());
                         }
                         let pos = ctx.playback.position();
@@ -1204,3 +1225,8 @@ pub fn get_audio_position(state: State<'_, AppAudio>) -> f64 {
 pub fn set_volume(state: State<'_, AppAudio>, vol: f32) {
     if let Ok(ctrl) = state.0.lock() { ctrl.set_volume(vol); }
 }
+
+#[tauri::command]
+pub fn is_audio_playing(state: State<'_, AppAudio>) -> bool {
+    if let Ok(ctrl) = state.0.lock() { ctrl.get_is_playing() } else { false }
+}

src-tauri/src/lib.rs

@@ -173,9 +173,11 @@ pub fn run() {
             audio::seek_audio,
             audio::get_audio_position,
             audio::set_volume,
+            audio::is_audio_playing,
 
             api::download_song,
             api::list_local_songs,
+            api::scan_local_folders,
             api::delete_local_song,
             api::check_local_song,
             api::get_default_download_path,
@@ -184,11 +186,19 @@ pub fn run() {
             api::artist_songs,
             api::artist_album,
             api::artist_desc,
+            api::artist_sub,
+            api::artist_sublist,
             api::album_detail,
             api::comment_new,
             api::comment_hot,
             api::comment_floor,
             api::comment_like,
+            api::user_cloud,
+            api::user_cloud_detail,
+            api::user_cloud_del,
+            api::cloud_upload,
+            api::read_image_as_data_url,
+            api::show_item_in_folder,
         ])
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_updater::Builder::new().build())

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Nekosonic",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "identifier": "com.atdunbg.Nekosonic",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.vue

@@ -1,5 +1,24 @@
 <template>
-  <div class="flex flex-col h-screen bg-base text-content overflow-hidden">
+  <!-- 壁纸层：fixed 全屏最底层 -->
+  <div
+    v-if="settings.currentWallpaper.path"
+    class="fixed inset-0 z-0 pointer-events-none overflow-hidden"
+  >
+    <div
+      class="absolute inset-[-20px] bg-cover bg-center bg-no-repeat"
+      :style="wallpaperStyle"
+    ></div>
+  </div>
+
+  <!-- 主题色遮罩层：半透明主题色覆盖壁纸，保证文字可读 -->
+  <div
+    v-if="settings.currentWallpaper.path"
+    class="fixed inset-0 z-[1] pointer-events-none"
+    :style="overlayStyle"
+  ></div>
+
+  <!-- 主容器 -->
+  <div class="flex flex-col h-screen text-content overflow-hidden relative z-[2]" :style="rootBgStyle">
     <TitleBar @close="closeWindow" />
 
     <div class="flex flex-1 overflow-hidden" v-if="windowVisible">
@@ -7,7 +26,7 @@
 
       <main class="flex-1 overflow-y-auto pb-24">
         <router-view v-slot="{ Component }">
-          <keep-alive :max="5" :include="keepAliveInclude">
+          <keep-alive :max="10" :include="keepAliveInclude">
             <component :is="Component" />
           </keep-alive>
         </router-view>
@@ -37,7 +56,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useUserStore } from './stores/user';
 import { useSettingsStore, type CloseAction } from './stores/settings';
 import { usePlayerStore } from './stores/player';
@@ -55,6 +75,7 @@ import { getCurrentWindow } from '@tauri-apps/api/window';
 import { listen } from '@tauri-apps/api/event';
 import { register, unregister } from '@tauri-apps/plugin-global-shortcut';
 import { MusicApi, AudioApi, DeviceApi, AppApi } from './api';
+import { hexToRgba } from './utils/color';
 
 const userStore = useUserStore();
 const player = usePlayerStore();
@@ -69,44 +90,144 @@ watch(isOnline, (val, old) => {
 
 const showCloseModal = ref(false);
 const windowVisible = ref(true);
-const keepAliveInclude = ref<string[]>(['HomeView', 'DiscoverView', 'FavoriteSongsView', 'DailySongsView', 'LocalMusicView']);
 
-watch(() => settings.dataTheme, (val) => {
+// --- Keep-alive 缓存管理 ---
-  document.documentElement.setAttribute('data-theme', val);
+// 规则：30秒未访问的页面自动清除缓存；多级跳转时保留导航链上的页面；FavoriteSongs 常驻
+const route = useRoute();
+
+const ROUTE_COMPONENT: Record<string, string> = {
+  home: 'HomeView', discover: 'DiscoverView', search: 'DiscoverView',
+  favorites: 'FavoriteSongsView', daily: 'DailySongsView',
+  'local-music': 'LocalMusicView', 'downloaded-music': 'DownloadedMusicView',
+  'cloud-music': 'CloudMusicView',
+  playlist: 'PlaylistDetailView', artist: 'ArtistDetailView', album: 'AlbumDetailView',
+};
+const ALL_CACHEABLE = [...new Set(Object.values(ROUTE_COMPONENT))];
+const PERMANENT = new Set(['FavoriteSongsView']);
+const CACHE_TTL = 300_000;
+
+const lastActivatedAt: Record<string, number> = {};
+const navStack = ref<string[]>([]);
+const currentComp = ref('');
+for (const name of ALL_CACHEABLE) lastActivatedAt[name] = Date.now();
+
+watch(() => route.name, (newName, oldName) => {
+  // 离开旧页面时刷新其计时（30s 从离开时算起）
+  const oldComp = ROUTE_COMPONENT[oldName as string];
+  if (oldComp) lastActivatedAt[oldComp] = Date.now();
+
+  const comp = ROUTE_COMPONENT[newName as string];
+  if (!comp) return;
+  currentComp.value = comp;
+  lastActivatedAt[comp] = Date.now();
+  const idx = navStack.value.indexOf(comp);
+  if (idx !== -1) {
+    // 返回：截断到该位置
+    navStack.value = navStack.value.slice(0, idx + 1);
+  } else {
+    navStack.value.push(comp);
+  }
 }, { immediate: true });
 
+function computeInclude(): string[] {
+  const now = Date.now();
+  const include = new Set<string>(PERMANENT);
+  if (currentComp.value) include.add(currentComp.value);
+  for (const name of navStack.value) include.add(name);
+  for (const name of ALL_CACHEABLE) {
+    if (lastActivatedAt[name] && now - lastActivatedAt[name] < CACHE_TTL) include.add(name);
+  }
+  return [...include];
+}
+
+const keepAliveInclude = ref<string[]>(computeInclude());
+let cleanupTimer: ReturnType<typeof setInterval>;
+function startCleanup() { cleanupTimer = setInterval(() => { keepAliveInclude.value = computeInclude(); }, 10_000); }
+function stopCleanup() { clearInterval(cleanupTimer); }
+
+watch(() => settings.skin, () => {
+  settings.applySkin();
+}, { immediate: true });
+
+// 壁纸样式：通过 Rust 命令读取本地图片转 base64 data URL
+const wallpaperDataUrl = ref('');
+const wallpaperStyle = computed(() => {
+  if (!wallpaperDataUrl.value) return {};
+  const wp = settings.currentWallpaper;
+  return {
+    backgroundImage: `url(${wallpaperDataUrl.value})`,
+    filter: `blur(${wp.blur}px)`,
+    opacity: wp.opacity,
+  };
+});
+
+// 监听壁纸路径变化，异步加载图片
+watch(() => settings.currentWallpaper.path, async (path) => {
+  if (!path) {
+    wallpaperDataUrl.value = '';
+    return;
+  }
+  try {
+    wallpaperDataUrl.value = await AppApi.readImageAsDataUrl(path);
+  } catch (e) {
+    console.error('加载壁纸失败:', e);
+    wallpaperDataUrl.value = '';
+  }
+}, { immediate: true });
+
+// 根容器背景：有壁纸时透明（遮罩层已保证文字可读），无壁纸时不透明
+const rootBgStyle = computed(() => {
+  const wp = settings.currentWallpaper;
+  if (wp.path) {
+    return {}; // 透明，遮罩层统一处理
+  }
+  return {
+    backgroundColor: 'var(--c-bg)',
+  };
+});
+
+// 主题色遮罩层：用 --c-bg 的半透明版本覆盖壁纸，保证文字对比度
+// 这是网易云式设计的核心：壁纸色调透出遮罩，文字始终清晰
+const overlayStyle = computed(() => {
+  const bgColor = settings.currentColors.bg;
+  const rgba = hexToRgba(bgColor, 0.82);
+  return {
+    backgroundColor: rgba,
+  };
+});
+
 watch(() => userStore.isLoggedIn, (val) => {
   if (val) {
     player.loadLikedIds();
   }
 });
 
-onMounted(async () => {
+onMounted(() => {
   document.addEventListener('contextmenu', (e) => e.preventDefault());
+  startCleanup();
+
+  AudioApi.stopAudio().catch(() => {});
 
   if (userStore.isLoggedIn) {
     player.loadLikedIds();
+    MusicApi.getLoginStatus().then(jsonStr => {
+      if (!jsonStr) return;
+      const data = JSON.parse(jsonStr);
+      if (data.account || data.profile) {
+        const profile = data.profile || data.account;
+        userStore.setUser({
+          userId: profile.userId,
+          nickname: profile.nickname,
+          avatarUrl: profile.avatarUrl,
+        });
+      }
+    }).catch(() => {});
   }
-  try { await AudioApi.stopAudio(); } catch { /* 忽略 */ }
-  try {
-    const jsonStr: string = await MusicApi.getLoginStatus();
-    const data = JSON.parse(jsonStr);
-    if (data.account || data.profile) {
-      const profile = data.profile || data.account;
-      userStore.setUser({
-        userId: profile.userId,
-        nickname: profile.nickname,
-        avatarUrl: profile.avatarUrl,
-      });
-    }
-  } catch { /* 忽略 */ }
 
   updater.checkForUpdate(true);
 
   if (settings.outputDevice) {
-    try {
+    DeviceApi.setOutputDevice(settings.outputDevice).catch(() => {});
-      await DeviceApi.setOutputDevice(settings.outputDevice);
-    } catch { /* 忽略 */ }
   }
 });
 
@@ -147,10 +268,12 @@ onMounted(() => {
   const unlisten4 = listen('window-hidden', () => {
     windowVisible.value = false;
     keepAliveInclude.value = [];
+    stopCleanup();
   });
   const unlisten5 = listen('window-shown', () => {
     windowVisible.value = true;
-    keepAliveInclude.value = ['HomeView', 'DiscoverView', 'FavoriteSongsView', 'DailySongsView', 'LocalMusicView'];
+    keepAliveInclude.value = computeInclude();
+    startCleanup();
   });
 
   onBeforeUnmount(() => {
@@ -159,6 +282,7 @@ onMounted(() => {
     unlisten3.then(fn => fn());
     unlisten4.then(fn => fn());
     unlisten5.then(fn => fn());
+    stopCleanup();
   });
 });
 

src/api.ts

@@ -93,6 +93,14 @@ export namespace MusicApi {
     return invoke('artist_desc', { id });
   }
 
+  export async function artistSub(id: number, sub: boolean): Promise<string> {
+    return invoke('artist_sub', { query: { id, sub } });
+  }
+
+  export async function artistSublist(limit = 100, offset = 0): Promise<string> {
+    return invoke('artist_sublist', { query: { limit, offset } });
+  }
+
   export async function commentHot(query: { type: number; id: number; limit: number; offset: number }): Promise<string> {
     return invoke('comment_hot', { query });
   }
@@ -113,9 +121,22 @@ export namespace MusicApi {
     return invoke('fm_trash', { query: { id, time } });
   }
 
-  export async function scrobble(query: { id: number; sourceid: string; time: number }): Promise<void> {
+  export async function scrobble(query: { id: number; sourceid: string; time: number; alg?: string; source?: string; bitrate?: number }): Promise<void> {
     return invoke('scrobble', { query });
   }
+
+  // 云盘
+  export async function userCloud(limit = 30, offset = 0): Promise<string> {
+    return invoke('user_cloud', { limit, offset });
+  }
+
+  export async function userCloudDel(id: number): Promise<string> {
+    return invoke('user_cloud_del', { id });
+  }
+
+  export async function cloudUpload(filePath: string): Promise<string> {
+    return invoke('cloud_upload', { filePath });
+  }
 }
 
 export namespace AudioApi {
@@ -150,6 +171,10 @@ export namespace AudioApi {
   export async function getAudioPosition(): Promise<number> {
     return invoke('get_audio_position');
   }
+
+  export async function isAudioPlaying(): Promise<boolean> {
+    return invoke('is_audio_playing');
+  }
 }
 
 export namespace DeviceApi {
@@ -180,6 +205,10 @@ export namespace DownloadApi {
     return invoke('list_local_songs', { downloadPath });
   }
 
+  export async function scanLocalFolders(paths: string[]): Promise<any[]> {
+    return invoke('scan_local_folders', { paths });
+  }
+
   export async function deleteLocalSong(query: { id: number; filename: string; downloadPath: string | null }): Promise<void> {
     return invoke('delete_local_song', { query });
   }
@@ -193,4 +222,12 @@ export namespace AppApi {
   export function exitApp(): Promise<void> {
     return invoke('exit_app');
   }
+
+  export async function readImageAsDataUrl(path: string): Promise<string> {
+    return invoke('read_image_as_data_url', { path });
+  }
+
+  export async function showItemInFolder(path: string): Promise<void> {
+    return invoke('show_item_in_folder', { path });
+  }
 }

src/components/PageHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- 普通头部：随内容滚动，返回独占一行，标题和按钮在第二行 -->
+  <div class="-mx-8 px-8 pt-3 pb-2">
+    <button @click="$router.back()" class="mb-1 text-content-2 hover:text-content transition text-sm">
+      ← 返回
+    </button>
+    <div class="flex items-center gap-4">
+      <slot />
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/components/PlayerBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="fixed bottom-0 left-0 right-0 bg-surface/95 backdrop-blur z-50 select-none"
+    class="fixed bottom-0 left-0 right-0 z-50 select-none backdrop-blur-xl"
+    :style="playerBarBgStyle"
   >
     <div v-if="player.dominantColor"
       class="absolute inset-0 pointer-events-none transition-opacity duration-300"
@@ -10,11 +11,11 @@
       <div class="absolute inset-0 bg-black/60"></div>
     </div>
 
-    <div ref="progressBar" class="w-full h-1.5 rounded-full relative group cursor-pointer overflow-visible"
+    <div ref="progressBar" class="w-full h-1.5 relative group cursor-pointer overflow-visible"
       :class="drawerActive ? 'bg-white/10' : 'bg-muted'"
       @mousedown.prevent="startSeek">
       <div class="absolute left-0 top-0 h-full rounded-full" :class="drawerActive ? 'bg-white/20' : 'bg-emphasis'" :style="{ width: cacheProgress + '%' }"></div>
-      <div class="absolute left-0 top-0 h-full bg-accent rounded-full"
+      <div class="absolute left-0 top-0 h-full rounded-full bg-accent"
         :style="{ width: displayProgress + '%' }"></div>
       <div
         class="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full bg-white shadow-lg border border-line opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
@@ -47,8 +48,8 @@
           <IconHeart v-if="player.currentSong && player.isLiked(player.currentSong.id)" class="w-4 h-4 text-danger [&>path]:fill-current [&>path]:stroke-0" />
           <IconHeart v-else class="w-4 h-4" />
         </button>
-        <button v-if="player.currentSong" @click="player.openRoamDrawer('comment')" class="flex-shrink-0 transition" :class="drawerActive ? 'text-white/50 hover:text-white' : 'text-content-3 hover:text-accent-text'" title="评论">
+        <button v-if="player.currentSong" @click="shareSong(player.currentSong.id)" class="flex-shrink-0 transition" :class="drawerActive ? 'text-white/50 hover:text-white' : 'text-content-3 hover:text-accent-text'" title="分享">
-          <IconMessageSquare class="w-4 h-4" />
+          <IconShare2 class="w-4 h-4" />
         </button>
         <button v-if="player.currentSong && !download.isDownloaded(player.currentSong!.id) && !download.isDownloading(player.currentSong!.id)" @click="download.downloadSong(player.currentSong)" class="flex-shrink-0 transition" :class="drawerActive ? 'text-white/50 hover:text-white' : 'text-content-3 hover:text-accent-text'" title="下载">
           <IconDownload class="w-4 h-4" />
@@ -128,7 +129,7 @@
                 class="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-muted hover:bg-emphasis transition text-left">
                 <IconUserRound class="w-[18px] h-[18px] text-content-2 flex-shrink-0" />
                 <div>
-                  <p class="text-sm font-medium">不推荐这个歌手</p>
+                  <p class="text-sm font-medium">减少含此歌手的推荐</p>
                   <p class="text-xs text-content-3 truncate max-w-[200px]">{{ dislikeArtistName }}</p>
                 </div>
               </button>
@@ -213,6 +214,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onBeforeUnmount, onMounted, nextTick } from 'vue';
 import { usePlayerStore, PlayMode } from '../stores/player';
+import { useSettingsStore } from '../stores/settings';
 import { useDownload } from '../composables/useDownload';
 import { formatTime } from '../utils/format';
 import { getCoverUrl } from '../utils/song';
@@ -232,7 +234,6 @@ import IconRepeat from '~icons/lucide/repeat';
 import IconShuffle from '~icons/lucide/shuffle';
 import IconRepeat1 from '~icons/lucide/repeat-1';
 import IconListMusic from '~icons/lucide/list-music';
-import IconMessageSquare from '~icons/lucide/message-square';
 import IconDownload from '~icons/lucide/download';
 import IconLoader2 from '~icons/lucide/loader-2';
 import IconHeart from '~icons/lucide/heart';
@@ -240,11 +241,26 @@ import IconX from '~icons/lucide/x';
 import IconMusic from '~icons/lucide/music';
 import IconCrosshair from '~icons/lucide/crosshair';
 import IconUserRound from '~icons/lucide/user-round';
+import IconShare2 from '~icons/lucide/share-2';
+import { hexToRgba } from '../utils/color';
 
 const router = useRouter();
 const player = usePlayerStore();
+const settings = useSettingsStore();
 const download = useDownload();
 const drawerActive = computed(() => player.showRoamDrawer && !!player.dominantColor);
+
+// PlayerBar 背景：有壁纸时用 --c-bg 高不透明度（与遮罩层同色系，视觉融合），
+// 无壁纸时用 surface 色
+const playerBarBgStyle = computed(() => {
+  if (settings.currentWallpaper.path) {
+    const bgColor = settings.currentColors.bg;
+    const rgba = hexToRgba(bgColor, 0.82);
+    return { backgroundColor: rgba };
+  }
+  return { backgroundColor: settings.currentColors.surface };
+});
+
 const showQueuePanel = ref(false);
 const showDislikeModal = ref(false);
 const queueListEl = ref<HTMLElement | null>(null);
@@ -367,7 +383,17 @@ async function dislikeArtist() {
   if (!player.currentSong) return;
   showDislikeModal.value = false;
   await player.fmTrash(player.currentSong.id);
-  showToast('已减少该歌手推荐', 'success');
+  showToast('已减少含该歌手的推荐', 'success');
+}
+
+async function shareSong(id: number) {
+  const url = `https://music.163.com/song?id=${id}`;
+  try {
+    await navigator.clipboard.writeText(url);
+    showToast('链接已复制', 'success');
+  } catch {
+    showToast('复制失败', 'error');
+  }
 }
 
 function scrollToCurrent() {

src/components/RoamDrawer.vue

@@ -1,91 +1,94 @@
 <template>
   <Transition name="drawer">
-    <div
+    <div v-if="visible" class="fixed inset-0 z-50 flex flex-col">
-      v-if="visible"
+      <!-- 背景层：fade in 覆盖全屏 -->
-      class="fixed inset-0 z-50 flex flex-col backdrop-blur-xl"
+      <div
-      :class="!player.dominantColor && 'bg-surface/95'"
+        class="absolute inset-0 backdrop-blur-xl"
-      :style="player.dominantColor ? { backgroundColor: player.dominantColor } : {}"
+        :class="!player.dominantColor && 'bg-surface/95'"
-    >
+        :style="player.dominantColor ? { backgroundColor: player.dominantColor } : {}"
+      ></div>
       <div v-if="player.dominantColor" class="absolute inset-0 bg-black/60 pointer-events-none"></div>
-      <TitleBar :dark-mode="!!player.dominantColor" @close="player.closeRoamDrawer()">
+
-        <template #left>
+      <!-- 内容层：slide up/down -->
-          <button @click="player.closeRoamDrawer()" :class="player.dominantColor ? 'text-white/60 hover:text-white' : 'text-content-2 hover:text-content'" class="transition">
+      <div class="relative z-10 flex flex-col flex-1 min-h-0 drawer-content">
-            <IconChevronDown class="w-5 h-5" />
+        <TitleBar :dark-mode="!!player.dominantColor" transparent @close="player.closeRoamDrawer()">
-          </button>
+          <template #left>
-        </template>
+            <button @click="player.closeRoamDrawer()" :class="dc ? 'text-white/60 hover:text-white' : 'text-content-2 hover:text-content'" class="transition">
-      </TitleBar>
+              <IconChevronDown class="w-5 h-5" />
-      <div class="flex-1 min-h-0 flex px-8 pb-8 gap-0 relative z-10">
-        <div class="w-2/5 flex flex-col items-center justify-center flex-shrink-0">
-          <img
-            v-if="roamCoverUrl && !roamCoverError"
-            :src="roamCoverUrl"
-            class="w-72 h-72 rounded-3xl object-cover shadow-2xl mb-4"
-            @error="roamCoverError = true"
-          />
-          <div
-            v-else
-            class="w-72 h-72 rounded-3xl flex items-center justify-center shadow-2xl mb-4"
-            :class="player.dominantColor ? 'bg-white/10' : 'bg-muted'"
-          >
-            <IconMusic class="w-16 h-16" :class="player.dominantColor ? 'text-white/30' : 'text-content-4'" />
-          </div>
-          <h1 class="text-2xl font-bold text-center" :class="player.dominantColor ? 'text-white' : 'text-content'">{{ roamSong?.name }}</h1>
-          <p class="mt-2 text-center" :class="player.dominantColor ? 'text-white/70' : 'text-content-2'">
-            <template v-for="(a, i) in roamSong?.ar || []" :key="a.id || i">
-              <span v-if="i > 0" :class="player.dominantColor ? 'text-white/40' : 'text-content-3'">/</span>
-              <span class="hover:text-accent-text cursor-pointer transition" @click="a.id && navigateFromDrawer({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
-            </template>
-            <template v-if="roamSong?.al?.name">
-              <span :class="player.dominantColor ? 'text-white/40' : 'text-content-3'" class="mx-1">·</span>
-              <span class="hover:text-accent-text cursor-pointer transition" @click="roamSong!.al.id && navigateFromDrawer({ name: 'album', params: { id: roamSong!.al.id } })">{{ roamSong.al.name }}</span>
-            </template>
-          </p>
-        </div>
-        <div class="w-3/5 relative min-h-0 overflow-hidden flex flex-col">
-          <div class="flex items-center gap-1 mb-3 px-4">
-            <button @click="roamTab = 'lyric'"
-              class="px-3 py-1 rounded-full text-sm transition"
-              :class="player.dominantColor
-                ? (roamTab === 'lyric' ? 'bg-white/15 text-white font-medium' : 'text-white/50 hover:text-white/80')
-                : (roamTab === 'lyric' ? 'bg-muted text-content font-medium' : 'text-content-3 hover:text-content')">
-              歌词
             </button>
-            <button @click="roamTab = 'comment'"
+          </template>
-              class="px-3 py-1 rounded-full text-sm transition"
+        </TitleBar>
-              :class="player.dominantColor
+
-                ? (roamTab === 'comment' ? 'bg-white/15 text-white font-medium' : 'text-white/50 hover:text-white/80')
+        <div class="flex-1 min-h-0 flex px-8 pb-8 gap-0">
-                : (roamTab === 'comment' ? 'bg-muted text-content font-medium' : 'text-content-3 hover:text-content')">
+          <!-- 左侧：封面 + 歌曲信息 -->
-              评论
+          <div class="w-2/5 flex flex-col items-center justify-center flex-shrink-0">
-            </button>
+            <img
-            <button v-if="hasTranslation" @click="toggleTranslation"
+              v-if="roamCoverUrl && !roamCoverError"
-              class="ml-auto px-2.5 py-1 rounded-full text-xs transition flex items-center gap-1"
+              :src="roamCoverUrl"
-              :class="player.dominantColor
+              class="w-72 h-72 rounded-3xl object-cover shadow-2xl mb-4"
-                ? (showTranslation ? 'bg-white/15 text-white font-medium' : 'text-white/40 hover:text-white/70')
+              @error="roamCoverError = true"
-                : (showTranslation ? 'bg-muted text-content font-medium' : 'text-content-4 hover:text-content-2')">
+            />
-              <IconLanguages class="w-3 h-3" />
+            <div
-              译
+              v-else
-            </button>
+              class="w-72 h-72 rounded-3xl flex items-center justify-center shadow-2xl mb-4"
-          </div>
+              :class="dc ? 'bg-white/10' : 'bg-muted'"
-          <div v-show="roamTab === 'lyric'" ref="lyricScrollContainer" class="flex-1 min-h-0 overflow-y-auto custom-scroll px-4">
+            >
-            <div v-if="lyrics.length > 0" class="w-full max-w-lg mx-auto text-center"
+              <IconMusic class="w-16 h-16" :class="dc ? 'text-white/30' : 'text-content-4'" />
-              :style="{ paddingTop: roamLyricPadPx + 'px', paddingBottom: roamLyricPadPx + 'px' }">
-              <p
-                v-for="(line, idx) in lyrics"
-                :key="idx"
-                :class="getRoamLyricClass(idx)"
-                class="roam-lyric-line px-4 py-3 rounded-lg cursor-pointer whitespace-nowrap transition-[font-size] duration-300 ease-out"
-                @click="seekToRoamLyric(line.time)"
-                @mouseenter="roamLyricHovering = true"
-                @mouseleave="roamLyricHovering = false"
-              >
-                {{ line.text }}
-                <span v-if="showTranslation && line.translation" class="block text-sm mt-1" :class="getTranslationClass(idx)">{{ line.translation }}</span>
-              </p>
             </div>
-            <div v-else :class="player.dominantColor ? 'text-white/40' : 'text-content-3'" class="text-center mt-8">暂无歌词</div>
+            <h1 class="text-2xl font-bold text-center" :class="dc ? 'text-white' : 'text-content'">{{ roamSong?.name }}</h1>
+            <p class="mt-2 text-center" :class="dc ? 'text-white/70' : 'text-content-2'">
+              <template v-for="(a, i) in roamSong?.ar || []" :key="a.id || i">
+                <span v-if="i > 0" :class="dc ? 'text-white/40' : 'text-content-3'">/</span>
+                <span class="hover:text-accent-text cursor-pointer transition" @click="a.id && navigateFromDrawer({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
+              </template>
+              <template v-if="roamSong?.al?.name">
+                <span :class="dc ? 'text-white/40' : 'text-content-3'" class="mx-1">·</span>
+                <span class="hover:text-accent-text cursor-pointer transition" @click="roamSong!.al.id && navigateFromDrawer({ name: 'album', params: { id: roamSong!.al.id } })">{{ roamSong.al.name }}</span>
+              </template>
+            </p>
           </div>
-          <div v-show="roamTab === 'comment'" class="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+
-            <CommentSection v-if="roamSong" :type="0" :id="player.commentSongId || roamSong.id" :key="player.commentSongId || roamSong.id" :dark-mode="!!player.dominantColor" />
+          <!-- 右侧：歌词/评论 -->
+          <div class="w-3/5 relative min-h-0 overflow-hidden flex flex-col">
+            <div class="flex items-center gap-1 mb-3 px-4">
+              <button @click="player.roamTab = 'lyric'"
+                class="px-3 py-1 rounded-full text-sm transition"
+                :class="tabClass(player.roamTab === 'lyric')">
+                歌词
+              </button>
+              <button @click="player.roamTab = 'comment'"
+                class="px-3 py-1 rounded-full text-sm transition"
+                :class="tabClass(player.roamTab === 'comment')">
+                评论
+              </button>
+              <button v-if="hasTranslation" @click="toggleTranslation"
+                class="ml-auto px-2.5 py-1 rounded-full text-xs transition flex items-center gap-1"
+                :class="tabClass(showTranslation)">
+                <IconLanguages class="w-3 h-3" />
+                译
+              </button>
+            </div>
+            <div v-show="player.roamTab === 'lyric'" ref="lyricScrollContainer" class="flex-1 min-h-0 overflow-y-auto custom-scroll px-4">
+              <div v-if="lyrics.length > 0" class="w-full max-w-lg mx-auto text-center"
+                :style="{ paddingTop: roamLyricPadPx + 'px', paddingBottom: roamLyricPadPx + 'px' }">
+                <p
+                  v-for="(line, idx) in lyrics"
+                  :key="idx"
+                  :class="getRoamLyricClass(idx)"
+                  class="roam-lyric-line px-4 py-3 rounded-lg cursor-pointer whitespace-nowrap transition-[font-size] duration-300 ease-out"
+                  @click="seekToRoamLyric(line.time)"
+                  @mouseenter="roamLyricHovering = true"
+                  @mouseleave="roamLyricHovering = false"
+                >
+                  {{ line.text }}
+                  <span v-if="showTranslation && line.translation" class="block text-sm mt-1" :class="getTranslationClass(idx)">{{ line.translation }}</span>
+                </p>
+              </div>
+              <div v-else :class="dc ? 'text-white/40' : 'text-content-3'" class="text-center mt-8">暂无歌词</div>
+            </div>
+            <div v-show="player.roamTab === 'comment'" class="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+              <CommentSection v-if="roamSong" :type="0" :id="player.commentSongId || roamSong.id" :key="player.commentSongId || roamSong.id" :dark-mode="!!player.dominantColor" />
+            </div>
           </div>
         </div>
       </div>
@@ -112,13 +115,15 @@ defineProps<{
 const router = useRouter();
 const player = usePlayerStore();
 
+// dominantColor 是否存在（模板中频繁使用）
+const dc = computed(() => !!player.dominantColor);
+
 const { lyrics, currentLyricIdx, hasTranslation, showTranslation, toggleTranslation } = useLyric();
 const lyricScrollContainer = ref<HTMLElement | null>(null);
 const roamLyricHovering = ref(false);
 const roamLyricPadPx = ref(0);
 const roamSong = computed(() => player.currentSong);
 const roamCoverError = ref(false);
-const roamTab = ref<'lyric' | 'comment'>('lyric');
 const roamCoverUrl = computed(() => {
   if (!roamSong.value) return '';
   return getCoverUrl(roamSong.value) || '';
@@ -144,7 +149,6 @@ function updateRoamLyricPad() {
 
 watch(() => player.showRoamDrawer, (val) => {
   if (val) {
-    roamTab.value = player.roamInitialTab;
     nextTick(() => {
       updateRoamLyricPad();
       if (roamResizeObserver) roamResizeObserver.disconnect();
@@ -202,26 +206,32 @@ function scrollToRoamActiveLyric() {
   requestAnimationFrame(animate);
 }
 
+// Tab 按钮统一样式
+function tabClass(active: boolean): string {
+  if (dc.value) {
+    return active ? 'bg-white/15 text-white font-medium' : 'text-white/50 hover:text-white/80';
+  }
+  return active ? 'bg-muted text-content font-medium' : 'text-content-3 hover:text-content';
+}
+
 function getTranslationClass(idx: number): string {
   const diff = Math.abs(idx - currentLyricIdx.value);
-  const hasColor = !!player.dominantColor;
+  if (idx === currentLyricIdx.value) return dc.value ? 'text-[var(--c-accent)]' : 'text-accent-text';
-  if (idx === currentLyricIdx.value) return hasColor ? 'text-[var(--c-accent)]' : 'text-accent-text';
+  if (diff === 1) return dc.value ? 'text-white/70' : 'text-content/70';
-  if (diff === 1) return hasColor ? 'text-white/70' : 'text-content/70';
+  if (diff === 2) return dc.value ? 'text-white/50' : 'text-content-2/50';
-  if (diff === 2) return hasColor ? 'text-white/50' : 'text-content-2/50';
+  return dc.value ? 'text-white/35' : 'text-content-3/35';
-  return hasColor ? 'text-white/35' : 'text-content-3/35';
 }
 
 function getRoamLyricClass(idx: number): string {
   const diff = Math.abs(idx - currentLyricIdx.value);
-  const hasColor = !!player.dominantColor;
   if (idx === currentLyricIdx.value) {
-    return hasColor
+    return dc.value
       ? 'roam-lyric-active font-bold text-xl text-[var(--c-accent)]'
       : 'roam-lyric-active text-accent-text font-semibold text-xl';
   }
-  if (diff === 1) return hasColor ? 'text-white/70 text-lg' : 'text-content/70 text-lg';
+  if (diff === 1) return dc.value ? 'text-white/70 text-lg' : 'text-content/70 text-lg';
-  if (diff === 2) return hasColor ? 'text-white/50 text-[1rem]' : 'text-content-2/50 text-[1rem]';
+  if (diff === 2) return dc.value ? 'text-white/50 text-[1rem]' : 'text-content-2/50 text-[1rem]';
-  return hasColor ? 'text-white/35 text-[1rem]' : 'text-content-3/35 text-[1rem]';
+  return dc.value ? 'text-white/35 text-[1rem]' : 'text-content-3/35 text-[1rem]';
 }
 
 function seekToRoamLyric(time: number) {
@@ -237,9 +247,17 @@ function navigateFromDrawer(routeLocation: { name: string; params: any }) {
 </script>
 
 <style scoped>
+/* 外层容器：fade in/out */
 .drawer-enter-active,
-.drawer-leave-active { transition: transform 0.3s ease; }
+.drawer-leave-active { transition: opacity 0.3s ease; }
 .drawer-enter-from,
-.drawer-leave-to { transform: translateY(100%); }
+.drawer-leave-to { opacity: 0; }
+
+/* 内容层：slide up/down */
+.drawer-enter-active .drawer-content,
+.drawer-leave-active .drawer-content { transition: transform 0.3s ease; }
+.drawer-enter-from .drawer-content,
+.drawer-leave-to .drawer-content { transform: translateY(100%); }
+
 .custom-scroll::-webkit-scrollbar { width: 0; display: none; }
 </style>

src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="w-56 flex-shrink-0 flex flex-col bg-surface/80 backdrop-blur">
+  <nav class="w-56 flex-shrink-0 flex flex-col" :style="sidebarBgStyle">
     <div class="flex-1 p-4 overflow-y-auto min-h-0">
       <div class="flex flex-col min-h-full">
         <div class="space-y-0.5">
@@ -45,6 +45,18 @@
               <IconMusic class="w-[18px] h-[18px]" />
               本地音乐
             </router-link>
+            <router-link to="/downloaded-music"
+              class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-content-2 hover:text-content hover:bg-subtle"
+              active-class="!text-content !bg-muted">
+              <IconDownload class="w-[18px] h-[18px]" />
+              下载音乐
+            </router-link>
+            <router-link v-if="userStore.isLoggedIn" to="/cloud-music"
+              class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-content-2 hover:text-content hover:bg-subtle"
+              active-class="!text-content !bg-muted">
+              <IconCloud class="w-[18px] h-[18px]" />
+              音乐云盘
+            </router-link>
           </div>
         </div>
 
@@ -114,10 +126,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useUserStore } from '../stores/user';
 import { usePlayerStore } from '../stores/player';
+import { useSettingsStore } from '../stores/settings';
 import { MusicApi } from '../api';
 import IconHome from '~icons/lucide/home';
 import IconSearch from '~icons/lucide/search';
@@ -128,11 +141,20 @@ import IconLogIn from '~icons/lucide/log-in';
 import IconChevronRight from '~icons/lucide/chevron-right';
 import IconClock from '~icons/lucide/clock';
 import IconMusic from '~icons/lucide/music';
+import IconCloud from '~icons/lucide/cloud';
+import IconDownload from '~icons/lucide/download';
 
 const router = useRouter();
 const route = useRoute();
 const userStore = useUserStore();
 const player = usePlayerStore();
+const settings = useSettingsStore();
+
+// 有壁纸时侧栏轻微半透明区分区域，无壁纸时保持原样
+const sidebarBgStyle = computed(() => {
+  if (settings.currentWallpaper.path) return {}; // 有壁纸时透明，由遮罩层统一提供背景
+  return { backgroundColor: settings.currentColors.surface };
+});
 
 const createdPlaylists = ref<any[]>([]);
 const subPlaylists = ref<any[]>([]);

src/components/SongItemMenu.vue

@@ -9,6 +9,10 @@
         <IconMessageSquare style="font-size: 14px" />
         评论
       </button>
+      <button @click.stop="handleShare" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-content-2 hover:bg-subtle hover:text-content transition">
+        <IconShare2 style="font-size: 14px" />
+        分享
+      </button>
     </div>
   </div>
 </template>
@@ -16,8 +20,10 @@
 <script setup lang="ts">
 import { ref, onBeforeUnmount, onMounted } from 'vue';
 import { usePlayerStore } from '../stores/player';
+import { showToast } from '../composables/useToast';
 import IconEllipsis from '~icons/lucide/ellipsis';
 import IconMessageSquare from '~icons/lucide/message-square';
+import IconShare2 from '~icons/lucide/share-2';
 
 const player = usePlayerStore();
 const props = defineProps<{ songId: number }>();
@@ -33,6 +39,17 @@ function handleComment() {
   player.openCommentForSong(props.songId);
 }
 
+async function handleShare() {
+  open.value = false;
+  const url = `https://music.163.com/song?id=${props.songId}`;
+  try {
+    await navigator.clipboard.writeText(url);
+    showToast('链接已复制', 'success');
+  } catch {
+    showToast('复制失败', 'error');
+  }
+}
+
 function onClickOutside(e: MouseEvent) {
   if (menuRef.value && !menuRef.value.contains(e.target as Node)) {
     open.value = false;

src/components/SongListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['flex items-center gap-4 p-3 rounded-xl cursor-pointer transition group', containerClass]">
+  <div :class="['flex items-center gap-4 p-3 rounded-xl cursor-pointer transition group', isCurrent ? 'bg-accent-dim hover:bg-accent-dim' : containerClass]">
     <slot name="index" :index="index" :is-current="isCurrent">
       <div v-if="showIndex" class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
         <div v-if="isCurrent && showPlayingOverlay" class="flex items-center justify-end">

src/components/TitleBar.vue

@@ -2,7 +2,7 @@
   <div
     data-tauri-drag-region
     class="h-10 flex items-center justify-between px-4 flex-shrink-0 select-none relative z-10"
-    :class="darkMode ? '' : 'bg-surface/90 backdrop-blur'"
+    :style="titleBarBgStyle"
   >
     <slot name="left">
       <span v-if="!darkMode" class="text-xs text-content-3 font-medium ml-2">Nekosonic Music</span>
@@ -16,16 +16,28 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { getCurrentWindow } from '@tauri-apps/api/window';
+import { useSettingsStore } from '../stores/settings';
 
-defineProps<{
+const props = defineProps<{
   darkMode?: boolean;
+  transparent?: boolean;
 }>();
 
 defineEmits<{
   close: [];
 }>();
 
+const settings = useSettingsStore();
+
+const titleBarBgStyle = computed(() => {
+  if (props.transparent) return {};
+  if (settings.currentWallpaper.path) return {}; // 有壁纸时透明，由遮罩层统一提供背景
+  if (props.darkMode) return {};
+  return { backgroundColor: settings.currentColors.surface };
+});
+
 const currentWindow = getCurrentWindow();
 
 function minimizeWindow() {

src/composables/useLocalMusic.ts

@@ -0,0 +1,52 @@
+import { MusicApi } from '../api';
+import type { Song } from '../utils/song';
+
+export interface LocalSong {
+  id: number;
+  name: string;
+  artist: string;
+  album: string;
+  duration: number;
+  cover: string | null;
+  filename: string;
+  fileSize: number;
+  path: string;
+  local: boolean;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
+}
+
+export function localSongToSong(local: LocalSong): Song {
+  return {
+    id: local.id,
+    name: local.name,
+    ar: local.artist ? [{ name: local.artist }] : [],
+    al: { picUrl: local.cover || '', name: local.album || undefined },
+    dt: local.duration || undefined,
+    localPath: local.path,
+  };
+}
+
+export async function fetchMissingCovers(songs: LocalSong[]): Promise<void> {
+  const missing = songs.filter(s => !s.cover && s.id > 0 && s.id < 1e12);
+  if (missing.length === 0) return;
+  const ids = [...new Set(missing.map(s => s.id))];
+  try {
+    const jsonStr: string = await MusicApi.getSongDetail(JSON.stringify(ids));
+    const data = JSON.parse(jsonStr);
+    const detailMap = new Map<number, string>();
+    for (const s of data.songs || []) {
+      const url = s.al?.picUrl;
+      if (url && s.id) detailMap.set(s.id, url + '?param=100y100');
+    }
+    for (const song of missing) {
+      const url = detailMap.get(song.id);
+      if (url) song.cover = url;
+    }
+  } catch { /* 忽略 */ }
+}

src/composables/usePageCache.ts

@@ -1,5 +1,6 @@
 const cache = new Map<string, { data: any; ts: number }>();
-const TTL = 5 * 60 * 1000;
+const TTL = 30 * 60 * 1000;
+const MAX_ENTRIES = 30;
 
 export function pageCacheGet(key: string): any | null {
   const entry = cache.get(key);
@@ -12,6 +13,11 @@ export function pageCacheGet(key: string): any | null {
 }
 
 export function pageCacheSet(key: string, data: any) {
+  if (cache.size >= MAX_ENTRIES && !cache.has(key)) {
+    // 淘汰最旧的条目
+    const firstKey = cache.keys().next().value;
+    if (firstKey !== undefined) cache.delete(firstKey);
+  }
   cache.set(key, { data, ts: Date.now() });
 }
 

src/composables/useToast.ts

@@ -9,7 +9,22 @@ export interface Toast {
 const toasts = ref<Toast[]>([]);
 let nextId = 0;
 
+const MAX_TOASTS = 3;
+const DEDUP_WINDOW = 3000;
+const recentMessages = new Map<string, number>();
+
 export function showToast(message: string, type: 'success' | 'error' | 'info' = 'info', duration = 3000) {
+  const key = `${type}:${message}`;
+  const now = Date.now();
+  const lastShown = recentMessages.get(key);
+  if (lastShown && now - lastShown < DEDUP_WINDOW) return;
+  recentMessages.set(key, now);
+  setTimeout(() => { recentMessages.delete(key); }, DEDUP_WINDOW);
+
+  if (toasts.value.length >= MAX_TOASTS) {
+    toasts.value.shift();
+  }
+
   const id = nextId++;
   toasts.value.push({ id, message, type });
   setTimeout(() => {

src/router/index.ts

@@ -1,27 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '@/views/Home.vue';
-import Discover from '@/views/Discover.vue';
-import PlaylistDetail from '@/views/PlaylistDetail.vue';
-import Login from '@/views/Login.vue';
-import FavoriteSongs from '@/views/FavoriteSongs.vue';
-import RecentPlays from '@/views/RecentPlays.vue';
-import DailySongs from '@/views/DailySongs.vue';
-import LocalMusic from '@/views/LocalMusic.vue';
-import Settings from '@/views/Settings.vue';
 
 const routes = [
-  { path: '/', name: 'home', component: Home },
+  { path: '/', name: 'home', component: () => import('@/views/Home.vue') },
-  { path: '/discover', name: 'discover', component: Discover },
+  { path: '/discover', name: 'discover', component: () => import('@/views/Discover.vue') },
-  { path: '/search', name: 'search', component: Discover },
+  { path: '/search', name: 'search', component: () => import('@/views/Discover.vue') },
-  { path: '/favorites', name: 'favorites', component: FavoriteSongs },
+  { path: '/favorites', name: 'favorites', component: () => import('@/views/FavoriteSongs.vue') },
-  { path: '/recent', name: 'recent', component: RecentPlays },
+  { path: '/recent', name: 'recent', component: () => import('@/views/RecentPlays.vue') },
-  { path: '/daily', name: 'daily', component: DailySongs },
+  { path: '/daily', name: 'daily', component: () => import('@/views/DailySongs.vue') },
-  { path: '/local-music', name: 'local-music', component: LocalMusic },
+  { path: '/local-music', name: 'local-music', component: () => import('@/views/LocalMusic.vue') },
-  { path: '/login', name: 'login', component: Login, meta: { guest: true } },
+  { path: '/downloaded-music', name: 'downloaded-music', component: () => import('@/views/DownloadedMusic.vue') },
-  { path: '/playlist/:id', name: 'playlist', component: PlaylistDetail },
+  { path: '/cloud-music', name: 'cloud-music', component: () => import('@/views/CloudMusic.vue') },
+  { path: '/login', name: 'login', component: () => import('@/views/Login.vue'), meta: { guest: true } },
+  { path: '/playlist/:id', name: 'playlist', component: () => import('@/views/PlaylistDetail.vue') },
   { path: '/artist/:id', name: 'artist', component: () => import('@/views/ArtistDetail.vue') },
   { path: '/album/:id', name: 'album', component: () => import('@/views/AlbumDetail.vue') },
-  { path: '/settings', name: 'settings', component: Settings },
+  { path: '/settings', name: 'settings', component: () => import('@/views/Settings.vue') },
 ];
 
 const router = createRouter({
@@ -31,7 +24,7 @@ const router = createRouter({
 
 router.beforeEach((to) => {
   if (to.meta.guest) {
-    const raw = localStorage.getItem('user');
+    const raw = localStorage.getItem('user_profile');
     if (raw) {
       try {
         const data = JSON.parse(raw);

src/skins.ts

@@ -0,0 +1,152 @@
+export interface SkinColors {
+  bg: string;
+  surface: string;
+  subtle: string;
+  muted: string;
+  emphasis: string;
+  content: string;
+  content2: string;
+  content3: string;
+  content4: string;
+  line: string;
+  line2: string;
+  accent: string;
+  accentHover: string;
+  accentText: string;
+  accentDim: string;
+  danger: string;
+  dangerDim: string;
+  warning: string;
+  info: string;
+}
+
+interface PresetSkin {
+  id: string;
+  name: string;
+  preview: string;
+  colors: SkinColors;
+}
+
+function darkSkin(accent: string, accentHover: string, accentText: string, name: string, id: string): PresetSkin {
+  return {
+    id,
+    name,
+    preview: accent,
+    colors: {
+      bg: '#02060c',
+      surface: '#0a101a',
+      subtle: `rgba(${hexToRgb(accent)}, 0.06)`,
+      muted: `rgba(${hexToRgb(accent)}, 0.10)`,
+      emphasis: `rgba(${hexToRgb(accent)}, 0.18)`,
+      content: '#ffffff',
+      content2: '#9ca3af',
+      content3: '#6b7280',
+      content4: '#4b5563',
+      line: 'rgba(255, 255, 255, 0.08)',
+      line2: 'rgba(255, 255, 255, 0.04)',
+      accent,
+      accentHover,
+      accentText,
+      accentDim: `rgba(${hexToRgb(accent)}, 0.20)`,
+      danger: '#ef4444',
+      dangerDim: 'rgba(239, 68, 68, 0.20)',
+      warning: '#eab308',
+      info: '#8b5cf6',
+    },
+  };
+}
+
+function lightSkin(accent: string, accentHover: string, accentText: string, name: string, id: string): PresetSkin {
+  return {
+    id,
+    name,
+    preview: accent,
+    colors: {
+      bg: '#f8fafc',
+      surface: '#ffffff',
+      subtle: `rgba(${hexToRgb(accent)}, 0.06)`,
+      muted: `rgba(${hexToRgb(accent)}, 0.10)`,
+      emphasis: `rgba(${hexToRgb(accent)}, 0.18)`,
+      content: '#0f172a',
+      content2: '#475569',
+      content3: '#94a3b8',
+      content4: '#cbd5e1',
+      line: 'rgba(0, 0, 0, 0.08)',
+      line2: 'rgba(0, 0, 0, 0.04)',
+      accent,
+      accentHover,
+      accentText,
+      accentDim: `rgba(${hexToRgb(accent)}, 0.15)`,
+      danger: '#ef4444',
+      dangerDim: 'rgba(239, 68, 68, 0.15)',
+      warning: '#eab308',
+      info: '#8b5cf6',
+    },
+  };
+}
+
+function hexToRgb(hex: string): string {
+  const h = hex.replace('#', '');
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `${r}, ${g}, ${b}`;
+}
+
+export const presetSkins: PresetSkin[] = [
+  // 深色
+  darkSkin('#3b82f6', '#2563eb', '#60a5fa', '深蓝', 'dark-blue'),
+  darkSkin('#22c55e', '#16a34a', '#4ade80', '深翠', 'dark-green'),
+  darkSkin('#f43f5e', '#e11d48', '#fb7185', '深红', 'dark-rose'),
+  darkSkin('#8b5cf6', '#7c3aed', '#a78bfa', '深紫', 'dark-violet'),
+  darkSkin('#f97316', '#ea580c', '#fb923c', '深橙', 'dark-orange'),
+  darkSkin('#06b6d4', '#0891b2', '#22d3ee', '深青', 'dark-cyan'),
+  darkSkin('#ec4899', '#db2777', '#f472b6', '深粉', 'dark-pink'),
+  // 浅色
+  lightSkin('#3b82f6', '#2563eb', '#2563eb', '浅蓝', 'light-blue'),
+  lightSkin('#22c55e', '#16a34a', '#16a34a', '浅翠', 'light-green'),
+  lightSkin('#f43f5e', '#e11d48', '#e11d48', '浅红', 'light-rose'),
+  lightSkin('#8b5cf6', '#7c3aed', '#7c3aed', '浅紫', 'light-violet'),
+  lightSkin('#f97316', '#ea580c', '#ea580c', '浅橙', 'light-orange'),
+  lightSkin('#06b6d4', '#0891b2', '#0891b2', '浅青', 'light-cyan'),
+  lightSkin('#ec4899', '#db2777', '#db2777', '浅粉', 'light-pink'),
+];
+
+const presetIdSet = new Set(presetSkins.map(s => s.id));
+
+export function isPresetSkinId(id: string): boolean {
+  return presetIdSet.has(id);
+}
+
+export function getPresetSkin(id: string): PresetSkin | undefined {
+  return presetSkins.find(s => s.id === id);
+}
+
+/** 将皮肤颜色应用到 DOM CSS 变量 */
+export function applySkinColors(colors: SkinColors) {
+  const root = document.documentElement;
+  const map: Record<keyof SkinColors, string> = {
+    bg: '--c-bg',
+    surface: '--c-surface',
+    subtle: '--c-subtle',
+    muted: '--c-muted',
+    emphasis: '--c-emphasis',
+    content: '--c-content',
+    content2: '--c-content-2',
+    content3: '--c-content-3',
+    content4: '--c-content-4',
+    line: '--c-line',
+    line2: '--c-line-2',
+    accent: '--c-accent',
+    accentHover: '--c-accent-hover',
+    accentText: '--c-accent-text',
+    accentDim: '--c-accent-dim',
+    danger: '--c-danger',
+    dangerDim: '--c-danger-dim',
+    warning: '--c-warning',
+    info: '--c-info',
+  };
+  for (const [key, cssVar] of Object.entries(map)) {
+    root.style.setProperty(cssVar, colors[key as keyof SkinColors]);
+  }
+}

src/stores/player.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { ref, watch, nextTick } from 'vue';
+import { ref, watch } from 'vue';
 import { normalizeSong, type Song } from '../utils/song';
 import { useSettingsStore } from './settings';
 import { useUserStore } from './user';
@@ -44,6 +44,7 @@ export const usePlayerStore = defineStore('player', () => {
 
   const recentLocal = ref<Song[]>(loadRecentLocal());
   const MAX_RECENT = 200;
+  let recentLocalTimer: ReturnType<typeof setTimeout> | undefined;
 
   const likedIds = ref<Set<number>>(new Set());
 
@@ -102,7 +103,10 @@ export const usePlayerStore = defineStore('player', () => {
   }
 
   watch(recentLocal, (val) => {
-    localStorage.setItem('recent_local', JSON.stringify(val));
+    clearTimeout(recentLocalTimer);
+    recentLocalTimer = setTimeout(() => {
+      localStorage.setItem('recent_local', JSON.stringify(val));
+    }, 2000);
   }, { deep: true });
 
   const isFmMode = ref(false);
@@ -114,25 +118,41 @@ export const usePlayerStore = defineStore('player', () => {
 
   let lastScrobbleId: number | null = null;
   let lastScrobbleStartTime: number = 0;
+  let lastScrobbleAlg: string | undefined;
+  let lastScrobbleSource: string | undefined;
+  let lastScrobbleBitrate: number | undefined;
 
+  /// 上报上一首歌的听歌记录（scrobble），然后记录当前歌的开始时间
   function reportScrobble() {
-    const song = currentSong.value;
+    // 先上报：如果有正在记录的歌曲且播放超过 5 秒，发送 scrobble
-    if (!song || song.localPath || song.id == null) {
+    if (lastScrobbleId != null && lastScrobbleStartTime > 0) {
-      lastScrobbleId = null;
-      return;
-    }
-    if (lastScrobbleId === song.id && lastScrobbleStartTime > 0) {
       const playedSec = Math.round((Date.now() - lastScrobbleStartTime) / 1000);
-      if (playedSec > 5) {
+      if (playedSec > 5 && navigator.onLine) {
         MusicApi.scrobble({
-          id: song.id,
+          id: lastScrobbleId,
-          sourceid: isFmMode.value ? String(song.id) : '',
+          sourceid: isFmMode.value ? String(lastScrobbleId) : '',
           time: playedSec,
+          alg: lastScrobbleAlg || '',
+          source: lastScrobbleSource || 'list',
+          bitrate: lastScrobbleBitrate || 0,
         }).catch(() => {});
       }
     }
-    lastScrobbleId = song.id;
+    // 再记录：当前歌曲作为新的 scrobble 起点
-    lastScrobbleStartTime = Date.now();
+    const song = currentSong.value;
+    if (!song || song.localPath || song.id == null) {
+      lastScrobbleId = null;
+      lastScrobbleStartTime = 0;
+      lastScrobbleAlg = undefined;
+      lastScrobbleSource = undefined;
+      lastScrobbleBitrate = undefined;
+    } else {
+      lastScrobbleId = song.id;
+      lastScrobbleStartTime = Date.now();
+      lastScrobbleAlg = song.alg;
+      lastScrobbleSource = isFmMode.value ? 'personal_fm' : 'list';
+      lastScrobbleBitrate = song.br;
+    }
   }
 
   function enableFmMode(onNext: () => void) {
@@ -183,6 +203,8 @@ export const usePlayerStore = defineStore('player', () => {
   const MAX_FM_VIP_SKIP = 10;
 
   async function playFmSong(song: Song) {
+    const seq = ++_playSeq;
+    _switchingSong = true;
     clearTick();
     reportScrobble();
     if (!song.dt || song.dt === 0) {
@@ -207,9 +229,32 @@ export const usePlayerStore = defineStore('player', () => {
     currentSong.value = song;
     try {
       const jsonStr = await MusicApi.getSongUrl({ id: Number(song.id), level: settings.audioQuality, fm_mode: true });
+      if (seq !== _playSeq) return;
       const data = JSON.parse(jsonStr);
       const url: string | undefined = data.url;
-      if (!url) throw new Error('无播放源');
+      if (!url) {
+        const fee = data.fee;
+        if (fee === 4) {
+          showToast(`${song.name} 为数字专辑，已跳过`, 'info');
+        } else if (fee === 1) {
+          showToast(`${song.name} 为 VIP 专属歌曲，已跳过`, 'info');
+        } else {
+          showToast(`${song.name} 暂无播放源`, 'info');
+        }
+        fmVipSkipCount++;
+        if (fmVipSkipCount >= MAX_FM_VIP_SKIP) {
+          fmVipSkipCount = 0;
+          disableFmMode();
+          return;
+        }
+        _switchingSong = false;
+        if (fmNextCallback) {
+          fmNextCallback();
+        } else {
+          disableFmMode();
+        }
+        return;
+      }
 
       if (data.freeTrialInfo) {
         console.warn('FM VIP 试听歌曲，自动跳过', song.name);
@@ -221,6 +266,7 @@ export const usePlayerStore = defineStore('player', () => {
           disableFmMode();
           return;
         }
+        _switchingSong = false;
         if (fmNextCallback) {
           fmNextCallback();
         } else {
@@ -231,14 +277,23 @@ export const usePlayerStore = defineStore('player', () => {
 
       fmVipSkipCount = 0;
       await AudioApi.playAudio(url);
-      await waitForAudioStart();
+      if (seq !== _playSeq) return;
-      playing.value = true;
+      const started = await waitForPlaybackStart();
-      duration.value = (song.dt || 0) / 1000;
+      if (seq !== _playSeq) return;
-      currentTime.value = 0;
+      if (started) {
-      startTick();
+        playing.value = true;
-      addRecent(song);
+        duration.value = (song.dt || 0) / 1000;
-      emitPlaybackState();
+        currentTime.value = 0;
+        startTick();
+        addRecent(song);
+        emitPlaybackState();
+      } else {
+        playing.value = false;
+        showToast('FM 播放启动超时，仍在尝试加载…', 'info');
+        watchForLatePlayback(seq, song);
+      }
     } catch (e) {
+      if (seq !== _playSeq) return;
       console.error('FM播放失败', e);
       playing.value = false;
       showToast('FM 播放失败', 'error');
@@ -247,6 +302,10 @@ export const usePlayerStore = defineStore('player', () => {
       } else {
         disableFmMode();
       }
+    } finally {
+      if (seq === _playSeq) {
+        _switchingSong = false;
+      }
     }
   }
 
@@ -298,18 +357,31 @@ export const usePlayerStore = defineStore('player', () => {
   let vipSkipCount = 0;
   const MAX_VIP_SKIP = 10;
 
-  function waitForAudioStart(): Promise<void> {
+  let _playSeq = 0;
-    return new Promise<void>((resolve) => {
+  let _switchingSong = false;
-      _audioStartedResolve = resolve;
+
-    });
+  async function waitForPlaybackStart(timeoutMs: number = 5000): Promise<boolean> {
+    const deadline = Date.now() + timeoutMs;
+    while (Date.now() < deadline) {
+      await new Promise(r => setTimeout(r, 100));
+      try {
+        if (await AudioApi.isAudioPlaying()) return true;
+      } catch { /* 忽略 */ }
+    }
+    try {
+      return await AudioApi.isAudioPlaying();
+    } catch { return false; }
   }
 
   async function playCurrent() {
+    const seq = ++_playSeq;
+    _switchingSong = true;
     clearTick();
     reportScrobble();
     const song = queue.value[currentIndex.value];
     if (!song?.id) {
       console.error('无效的歌曲数据', song);
+      _switchingSong = false;
       return;
     }
 
@@ -321,20 +393,43 @@ export const usePlayerStore = defineStore('player', () => {
 
       if (song.localPath) {
         await AudioApi.playLocalAudio(song.localPath);
-        await waitForAudioStart();
+        if (seq !== _playSeq) return;
-        playing.value = true;
+        const started = await waitForPlaybackStart();
-        startTick();
+        if (seq !== _playSeq) return;
-        addRecent(song);
+        if (started) {
-        emitPlaybackState();
+          playing.value = true;
+          startTick();
+          addRecent(song);
+          emitPlaybackState();
+        } else {
+          showToast('播放启动超时，仍在尝试加载…', 'info');
+          watchForLatePlayback(seq, song);
+        }
         return;
       }
 
       const jsonStr = await MusicApi.getSongUrl({ id: Number(song.id), level: settings.audioQuality });
+      if (seq !== _playSeq) return;
       const data = JSON.parse(jsonStr);
       const url: string | undefined = data.url;
 
       if (!url) {
-        console.error('未获取到有效播放地址', song);
+        // url 为空：可能是数字专辑/付费歌曲，根据 fee 字段判断
+        const fee = data.fee;
+        if (fee === 4) {
+          showToast(`${song.name} 为数字专辑，需购买后播放`, 'info');
+        } else if (fee === 1) {
+          showToast(`${song.name} 为 VIP 专属歌曲`, 'info');
+        } else {
+          showToast(`${song.name} 暂无播放源`, 'info');
+        }
+        vipSkipCount++;
+        if (vipSkipCount >= MAX_VIP_SKIP) {
+          vipSkipCount = 0;
+          return;
+        }
+        _switchingSong = false;
+        next();
         return;
       }
 
@@ -347,24 +442,66 @@ export const usePlayerStore = defineStore('player', () => {
           vipSkipCount = 0;
           return;
         }
+        _switchingSong = false;
         next();
         return;
       }
 
       await AudioApi.playAudio(url);
-      await waitForAudioStart();
+      if (seq !== _playSeq) return;
-      playing.value = true;
+      const started = await waitForPlaybackStart();
-      startTick();
+      if (seq !== _playSeq) return;
-      addRecent(song);
+      if (started) {
-      vipSkipCount = 0;
+        playing.value = true;
-      emitPlaybackState();
+        startTick();
+        addRecent(song);
+        vipSkipCount = 0;
+        emitPlaybackState();
+      } else {
+        playing.value = false;
+        showToast('播放启动超时，仍在尝试加载…', 'info');
+        watchForLatePlayback(seq, song);
+      }
     } catch (e) {
+      if (seq !== _playSeq) return;
       console.error('播放失败', e);
       playing.value = false;
       showToast('播放失败，请稍后重试', 'error');
+    } finally {
+      if (seq === _playSeq) {
+        _switchingSong = false;
+      }
     }
   }
 
+  /// 超时后继续监听后端播放状态，如果后端实际开始播放则恢复状态
+  function watchForLatePlayback(seq: number, song: Song) {
+    let attempts = 0;
+    const maxAttempts = 15;
+    const check = async () => {
+      if (seq !== _playSeq) return;
+      if (playing.value) return;
+      attempts++;
+      if (attempts > maxAttempts) return;
+      try {
+        const backendPlaying = await AudioApi.isAudioPlaying();
+        if (seq !== _playSeq) return;
+        if (backendPlaying) {
+          playing.value = true;
+          startTick();
+          addRecent(song);
+          vipSkipCount = 0;
+          emitPlaybackState();
+          return;
+        }
+      } catch { /* 忽略 */ }
+      if (seq === _playSeq && !playing.value) {
+        setTimeout(check, 1000);
+      }
+    };
+    setTimeout(check, 1000);
+  }
+
   let onSeekStart: (() => void) | null = null;
 
   function startTick() {
@@ -374,10 +511,12 @@ export const usePlayerStore = defineStore('player', () => {
     let syncCounter = 1;
     let lastSyncPos = -1;
     let backendFrozen = false;
+    let stateSyncCounter = 0;
     setTick(setInterval(async () => {
       if (playing.value && duration.value > 0) {
         if (seekGuard) return;
         syncCounter++;
+        stateSyncCounter++;
         if (syncCounter >= 2) {
           syncCounter = 0;
           try {
@@ -395,9 +534,19 @@ export const usePlayerStore = defineStore('player', () => {
               lastSyncPos = pos;
             }
           } catch { /* 忽略 */ }
+
+          if (stateSyncCounter >= 4) {
+            stateSyncCounter = 0;
+            try {
+              const backendPlaying = await AudioApi.isAudioPlaying();
+              if (backendPlaying !== playing.value) {
+                playing.value = backendPlaying;
+              }
+            } catch { /* 忽略 */ }
+          }
         } else {
           if (!backendFrozen) {
-            const next = currentTime.value + 0.25;
+            const next = currentTime.value + 0.5;
             if (next <= duration.value) {
               currentTime.value = next;
             }
@@ -407,10 +556,17 @@ export const usePlayerStore = defineStore('player', () => {
           currentTime.value = duration.value;
         }
       }
-    }, 250));
+    }, 500));
   }
 
   async function toggle() {
+    try {
+      const backendPlaying = await AudioApi.isAudioPlaying();
+      if (backendPlaying !== playing.value) {
+        playing.value = backendPlaying;
+      }
+    } catch { /* 忽略查询失败 */ }
+
     if (playing.value) {
       await AudioApi.pauseAudio();
       playing.value = false;
@@ -530,14 +686,13 @@ export const usePlayerStore = defineStore('player', () => {
   }
 
   const showRoamDrawer = ref(false);
-  const roamInitialTab = ref<'lyric' | 'comment'>('lyric');
+  const roamTab = ref<'lyric' | 'comment'>('lyric');
   const commentSongId = ref<number | null>(null);
   const dominantColor = ref('');
 
   function openRoamDrawer(tab: 'lyric' | 'comment' = 'lyric') {
-    roamInitialTab.value = tab;
+    roamTab.value = tab;
     showRoamDrawer.value = true;
-    nextTick(() => { roamInitialTab.value = 'lyric'; });
   }
 
   function openCommentForSong(songId: number) {
@@ -547,6 +702,7 @@ export const usePlayerStore = defineStore('player', () => {
 
   function closeRoamDrawer() {
     showRoamDrawer.value = false;
+    roamTab.value = 'lyric';
   }
 
   function toggleRoamDrawer() {
@@ -615,16 +771,8 @@ async function nextFm() {
   await loadFm();
 }
 
-let _audioStartedResolve: (() => void) | null = null;
-
-listen('audio-started', () => {
-  if (_audioStartedResolve) {
-    _audioStartedResolve();
-    _audioStartedResolve = null;
-  }
-});
-
 listen('audio-ended', () => {
+  if (_switchingSong) return;
   const player = usePlayerStore();
   player.clearTick();
   player.reportScrobble();
@@ -724,7 +872,7 @@ watch(playing, (val) => {
     toggleLike,
 
     showRoamDrawer,
-    roamInitialTab,
+    roamTab,
     commentSongId,
     dominantColor,
     openCommentForSong,

src/stores/settings.ts

@@ -1,36 +1,10 @@
 import { defineStore } from 'pinia';
 import { ref, watch, computed } from 'vue';
+import { getPresetSkin, isPresetSkinId, applySkinColors, type SkinColors } from '../skins';
 
 export type AudioQuality = 'standard' | 'higher' | 'exhigh' | 'lossless' | 'hires';
-export type ThemeColor = 'blue' | 'green' | 'rose' | 'violet' | 'orange' | 'cyan' | 'pink';
-export type Appearance = 'dark' | 'light';
 export type CloseAction = 'ask' | 'minimize' | 'exit';
 
-export const themeLabels: Record<ThemeColor, string> = {
-  blue: '天蓝',
-  green: '翠绿',
-  rose: '玫红',
-  violet: '紫罗兰',
-  orange: '橙色',
-  cyan: '青色',
-  pink: '粉色',
-};
-
-export const themeColors: Record<ThemeColor, string> = {
-  blue: '#3b82f6',
-  green: '#22c55e',
-  rose: '#f43f5e',
-  violet: '#8b5cf6',
-  orange: '#f97316',
-  cyan: '#06b6d4',
-  pink: '#ec4899',
-};
-
-export const appearanceLabels: Record<Appearance, string> = {
-  dark: '深色',
-  light: '浅色',
-};
-
 export const qualityLabels: Record<AudioQuality, string> = {
   standard: '标准',
   higher: '较高',
@@ -63,11 +37,31 @@ export const defaultShortcuts: Record<string, ShortcutBinding> = {
   globalVolDown: { key: 'Control+Alt+ArrowDown', label: '音量减小（全局）' },
 };
 
+export interface CustomSkin {
+  id: string;
+  name: string;
+  preview: string;
+  colors: SkinColors;
+  /** 壁纸图片路径，为空则使用纯色背景 */
+  wallpaper: string;
+  /** 壁纸模糊度 0-30 */
+  wallpaperBlur: number;
+  /** 壁纸透明度 0-1 */
+  wallpaperOpacity: number;
+}
+
+export interface MusicFolder {
+  path: string;
+  enabled: boolean;
+}
+
 interface SettingsData {
   audioQuality: AudioQuality;
   downloadPath: string;
-  theme: ThemeColor;
+  localMusicPaths: string[]; // 旧格式，迁移用
-  appearance: Appearance;
+  localMusicFolders: MusicFolder[];
+  skin: string; // 预设皮肤 id 或 custom-xxx
+  customSkins: CustomSkin[];
   closeAction: CloseAction;
   shortcuts: Record<string, ShortcutBinding>;
   outputDevice: string | null;
@@ -79,27 +73,43 @@ function loadSettings(): SettingsData {
     const raw = localStorage.getItem('app_settings');
     if (raw) {
       const parsed = JSON.parse(raw);
-      const theme = parsed.theme || parsed.accentColor || 'blue';
+
-      const validThemes: ThemeColor[] = ['blue', 'green', 'rose', 'violet', 'orange', 'cyan', 'pink'];
+      // 迁移旧版 theme + appearance → skin
-      const validAppearances: Appearance[] = ['dark', 'light'];
+      let skin = parsed.skin || 'dark-blue';
-      const appearance = validAppearances.includes(parsed.appearance) ? parsed.appearance : 'dark';
+      if (!parsed.skin && (parsed.theme || parsed.appearance)) {
-      if (parsed.theme && parsed.theme.startsWith('light-')) {
+        const appearance = parsed.appearance || 'dark';
-        return {
+        const theme = parsed.theme || 'blue';
-          audioQuality: parsed.audioQuality || 'standard',
+        const validThemes = ['blue', 'green', 'rose', 'violet', 'orange', 'cyan', 'pink'];
-          downloadPath: parsed.downloadPath || '',
+        const t = validThemes.includes(theme) ? theme : 'blue';
-          theme: validThemes.includes(parsed.theme.slice(6)) ? parsed.theme.slice(6) : 'blue',
+        skin = appearance === 'light' ? `light-${t}` : `dark-${t}`;
-          appearance: 'light',
-          closeAction: parsed.closeAction || 'ask',
-          shortcuts: { ...defaultShortcuts, ...(parsed.shortcuts || {}) },
-          outputDevice: parsed.outputDevice || null,
-          volume: typeof parsed.volume === 'number' ? parsed.volume : 100,
-        };
       }
+
+      // 迁移旧版全局壁纸 → 移入自定义皮肤（如果有自定义皮肤且没有壁纸）
+      let customSkins = parsed.customSkins || [];
+      if (parsed.wallpaper && customSkins.length > 0) {
+        customSkins = customSkins.map((s: any) => {
+          if (!s.wallpaper) {
+            return { ...s, wallpaper: parsed.wallpaper, wallpaperBlur: parsed.wallpaperBlur ?? 10, wallpaperOpacity: parsed.wallpaperOpacity ?? 0.3 };
+          }
+          return s;
+        });
+      }
+
+      // 迁移旧格式 localMusicPaths → localMusicFolders
+      let folders: MusicFolder[] = (parsed.localMusicFolders || []).map((f: any) =>
+        typeof f === 'string' ? { path: f, enabled: true } : f
+      );
+      if (!parsed.localMusicFolders && parsed.localMusicPaths?.length) {
+        folders = parsed.localMusicPaths.map((p: string) => ({ path: p, enabled: true }));
+      }
+
       return {
         audioQuality: parsed.audioQuality || 'standard',
         downloadPath: parsed.downloadPath || '',
-        theme: validThemes.includes(theme) ? theme : 'blue',
+        localMusicPaths: [],
-        appearance,
+        localMusicFolders: folders,
+        skin,
+        customSkins,
         closeAction: parsed.closeAction || 'ask',
         shortcuts: { ...defaultShortcuts, ...(parsed.shortcuts || {}) },
         outputDevice: parsed.outputDevice || null,
@@ -110,8 +120,10 @@ function loadSettings(): SettingsData {
   return {
     audioQuality: 'standard',
     downloadPath: '',
-    theme: 'blue',
+    localMusicPaths: [],
-    appearance: 'dark',
+    localMusicFolders: [],
+    skin: 'dark-blue',
+    customSkins: [],
     closeAction: 'ask',
     shortcuts: { ...defaultShortcuts },
     outputDevice: null,
@@ -124,16 +136,98 @@ export const useSettingsStore = defineStore('settings', () => {
 
   const audioQuality = ref<AudioQuality>(saved.audioQuality);
   const downloadPath = ref<string>(saved.downloadPath);
-  const theme = ref<ThemeColor>(saved.theme);
+  const localMusicFolders = ref<MusicFolder[]>(saved.localMusicFolders);
-  const appearance = ref<Appearance>(saved.appearance);
+  const skin = ref<string>(saved.skin);
+  const customSkins = ref<CustomSkin[]>(saved.customSkins);
   const closeAction = ref<CloseAction>(saved.closeAction || 'ask');
   const shortcuts = ref<Record<string, ShortcutBinding>>(saved.shortcuts);
   const outputDevice = ref<string | null>(saved.outputDevice);
   const volume = ref<number>(saved.volume);
 
-  const dataTheme = computed(() =>
+  /** 当前皮肤是否为预设皮肤 */
-    appearance.value === 'light' ? `light-${theme.value}` : theme.value
+  const isPreset = computed(() => isPresetSkinId(skin.value));
-  );
+
+  /** 获取当前自定义皮肤 */
+  const currentCustomSkin = computed(() => {
+    if (isPreset.value) return null;
+    return customSkins.value.find(s => s.id === skin.value) || null;
+  });
+
+  /** 获取当前皮肤的预览色 */
+  const skinPreview = computed(() => {
+    if (isPreset.value) {
+      return getPresetSkin(skin.value)?.preview || '#3b82f6';
+    }
+    return currentCustomSkin.value?.preview || '#3b82f6';
+  });
+
+  /** 获取当前皮肤的完整颜色集（响应式） */
+  const currentColors = computed<SkinColors>(() => {
+    if (isPreset.value) {
+      return getPresetSkin(skin.value)!.colors;
+    }
+    const custom = currentCustomSkin.value;
+    if (!custom) {
+      return getPresetSkin('dark-blue')!.colors;
+    }
+    return custom.colors;
+  });
+
+  /** 获取当前皮肤的壁纸信息 */
+  const currentWallpaper = computed(() => {
+    if (isPreset.value) return { path: '', blur: 10, opacity: 0.3 };
+    const custom = currentCustomSkin.value;
+    return {
+      path: custom?.wallpaper || '',
+      blur: custom?.wallpaperBlur ?? 10,
+      opacity: custom?.wallpaperOpacity ?? 0.3,
+    };
+  });
+
+  function setSkin(id: string) {
+    skin.value = id;
+  }
+
+  function addCustomSkin(s: CustomSkin) {
+    customSkins.value = [...customSkins.value, s];
+    skin.value = s.id;
+  }
+
+  function updateCustomSkin(id: string, updates: Partial<CustomSkin>) {
+    customSkins.value = customSkins.value.map(s =>
+      s.id === id ? { ...s, ...updates } : s
+    );
+    // 如果正在使用该皮肤，立即刷新 CSS 变量
+    if (skin.value === id) {
+      applySkin();
+    }
+  }
+
+  function removeCustomSkin(id: string) {
+    customSkins.value = customSkins.value.filter(s => s.id !== id);
+    if (skin.value === id) {
+      skin.value = 'dark-blue';
+    }
+  }
+
+  /** 应用当前皮肤到 DOM（统一通过 JS 设置 CSS 变量） */
+  function applySkin() {
+    let colors: SkinColors;
+    if (isPreset.value) {
+      const preset = getPresetSkin(skin.value);
+      colors = preset!.colors;
+    } else {
+      const custom = currentCustomSkin.value;
+      if (!custom) {
+        // 找不到自定义皮肤，回退到默认
+        skin.value = 'dark-blue';
+        colors = getPresetSkin('dark-blue')!.colors;
+      } else {
+        colors = custom.colors;
+      }
+    }
+    applySkinColors(colors);
+  }
 
   function setAudioQuality(q: AudioQuality) {
     audioQuality.value = q;
@@ -143,14 +237,27 @@ export const useSettingsStore = defineStore('settings', () => {
     downloadPath.value = p;
   }
 
-  function setTheme(t: ThemeColor) {
+  function addLocalMusicPath(p: string) {
-    theme.value = t;
+    if (!localMusicFolders.value.some(f => f.path === p)) {
+      localMusicFolders.value = [...localMusicFolders.value, { path: p, enabled: true }];
+    }
   }
 
-  function setAppearance(a: Appearance) {
+  function removeLocalMusicPath(p: string) {
-    appearance.value = a;
+    localMusicFolders.value = localMusicFolders.value.filter(f => f.path !== p);
   }
 
+  function toggleLocalMusicFolder(p: string) {
+    localMusicFolders.value = localMusicFolders.value.map(f =>
+      f.path === p ? { ...f, enabled: !f.enabled } : f
+    );
+  }
+
+  /** 已启用的扫描路径 */
+  const enabledMusicPaths = computed(() =>
+    localMusicFolders.value.filter(f => f.enabled).map(f => f.path)
+  );
+
   function setCloseAction(a: CloseAction) {
     closeAction.value = a;
   }
@@ -170,20 +277,23 @@ export const useSettingsStore = defineStore('settings', () => {
   function resetAll() {
     audioQuality.value = 'standard';
     downloadPath.value = '';
-    theme.value = 'blue';
+    localMusicFolders.value = [];
-    appearance.value = 'dark';
+    skin.value = 'dark-blue';
+    customSkins.value = [];
     closeAction.value = 'ask';
     shortcuts.value = { ...defaultShortcuts };
     outputDevice.value = null;
     volume.value = 100;
   }
 
-  watch([audioQuality, downloadPath, theme, appearance, closeAction, shortcuts, outputDevice, volume], () => {
+  watch([audioQuality, downloadPath, localMusicFolders, skin, customSkins, closeAction, shortcuts, outputDevice, volume], () => {
     const data: SettingsData = {
       audioQuality: audioQuality.value,
       downloadPath: downloadPath.value,
-      theme: theme.value,
+      localMusicPaths: [],
-      appearance: appearance.value,
+      localMusicFolders: localMusicFolders.value,
+      skin: skin.value,
+      customSkins: customSkins.value,
       closeAction: closeAction.value,
       shortcuts: shortcuts.value,
       outputDevice: outputDevice.value,
@@ -195,17 +305,29 @@ export const useSettingsStore = defineStore('settings', () => {
   return {
     audioQuality,
     downloadPath,
-    theme,
+    localMusicFolders,
-    appearance,
+    enabledMusicPaths,
-    dataTheme,
+    skin,
+    customSkins,
+    isPreset,
+    currentCustomSkin,
+    currentColors,
+    skinPreview,
+    currentWallpaper,
     closeAction,
     shortcuts,
     outputDevice,
     volume,
+    setSkin,
+    addCustomSkin,
+    updateCustomSkin,
+    removeCustomSkin,
+    applySkin,
     setAudioQuality,
     setDownloadPath,
-    setTheme,
+    addLocalMusicPath,
-    setAppearance,
+    removeLocalMusicPath,
+    toggleLocalMusicFolder,
     setCloseAction,
     setOutputDevice,
     setShortcut,

src/style.css

@@ -23,52 +23,8 @@
 }
 
 @layer base {
-  :root,
+  /* 默认值（首次加载 fallback，JS 会立即覆盖） */
-  [data-theme="green"] {
+  :root {
-    --c-bg: #020c06;
-    --c-surface: #0a1a10;
-    --c-subtle: rgba(34, 197, 94, 0.06);
-    --c-muted: rgba(34, 197, 94, 0.10);
-    --c-emphasis: rgba(34, 197, 94, 0.18);
-    --c-content: #ffffff;
-    --c-content-2: #9ca3af;
-    --c-content-3: #6b7280;
-    --c-content-4: #4b5563;
-    --c-line: rgba(255, 255, 255, 0.08);
-    --c-line-2: rgba(255, 255, 255, 0.04);
-    --c-accent: #22c55e;
-    --c-accent-hover: #16a34a;
-    --c-accent-text: #4ade80;
-    --c-accent-dim: rgba(34, 197, 94, 0.20);
-    --c-danger: #ef4444;
-    --c-danger-dim: rgba(239, 68, 68, 0.20);
-    --c-warning: #eab308;
-    --c-info: #3b82f6;
-  }
-
-  [data-theme="rose"] {
-    --c-bg: #0c0206;
-    --c-surface: #1a0a10;
-    --c-subtle: rgba(244, 63, 94, 0.06);
-    --c-muted: rgba(244, 63, 94, 0.10);
-    --c-emphasis: rgba(244, 63, 94, 0.18);
-    --c-content: #ffffff;
-    --c-content-2: #9ca3af;
-    --c-content-3: #6b7280;
-    --c-content-4: #4b5563;
-    --c-line: rgba(255, 255, 255, 0.08);
-    --c-line-2: rgba(255, 255, 255, 0.04);
-    --c-accent: #f43f5e;
-    --c-accent-hover: #e11d48;
-    --c-accent-text: #fb7185;
-    --c-accent-dim: rgba(244, 63, 94, 0.20);
-    --c-danger: #ef4444;
-    --c-danger-dim: rgba(239, 68, 68, 0.20);
-    --c-warning: #eab308;
-    --c-info: #3b82f6;
-  }
-
-  [data-theme="blue"] {
     --c-bg: #02060c;
     --c-surface: #0a101a;
     --c-subtle: rgba(59, 130, 246, 0.06);
@@ -90,250 +46,7 @@
     --c-info: #8b5cf6;
   }
 
-  [data-theme="violet"] {
-    --c-bg: #06020c;
-    --c-surface: #120a1a;
-    --c-subtle: rgba(139, 92, 246, 0.06);
-    --c-muted: rgba(139, 92, 246, 0.10);
-    --c-emphasis: rgba(139, 92, 246, 0.18);
-    --c-content: #ffffff;
-    --c-content-2: #9ca3af;
-    --c-content-3: #6b7280;
-    --c-content-4: #4b5563;
-    --c-line: rgba(255, 255, 255, 0.08);
-    --c-line-2: rgba(255, 255, 255, 0.04);
-    --c-accent: #8b5cf6;
-    --c-accent-hover: #7c3aed;
-    --c-accent-text: #a78bfa;
-    --c-accent-dim: rgba(139, 92, 246, 0.20);
-    --c-danger: #ef4444;
-    --c-danger-dim: rgba(239, 68, 68, 0.20);
-    --c-warning: #eab308;
-    --c-info: #3b82f6;
-  }
-
-  [data-theme="orange"] {
-    --c-bg: #0c0602;
-    --c-surface: #1a120a;
-    --c-subtle: rgba(249, 115, 22, 0.06);
-    --c-muted: rgba(249, 115, 22, 0.10);
-    --c-emphasis: rgba(249, 115, 22, 0.18);
-    --c-content: #ffffff;
-    --c-content-2: #9ca3af;
-    --c-content-3: #6b7280;
-    --c-content-4: #4b5563;
-    --c-line: rgba(255, 255, 255, 0.08);
-    --c-line-2: rgba(255, 255, 255, 0.04);
-    --c-accent: #f97316;
-    --c-accent-hover: #ea580c;
-    --c-accent-text: #fb923c;
-    --c-accent-dim: rgba(249, 115, 22, 0.20);
-    --c-danger: #ef4444;
-    --c-danger-dim: rgba(239, 68, 68, 0.20);
-    --c-warning: #eab308;
-    --c-info: #3b82f6;
-  }
-
-  [data-theme="cyan"] {
-    --c-bg: #020c0c;
-    --c-surface: #0a1a1a;
-    --c-subtle: rgba(6, 182, 212, 0.06);
-    --c-muted: rgba(6, 182, 212, 0.10);
-    --c-emphasis: rgba(6, 182, 212, 0.18);
-    --c-content: #ffffff;
-    --c-content-2: #9ca3af;
-    --c-content-3: #6b7280;
-    --c-content-4: #4b5563;
-    --c-line: rgba(255, 255, 255, 0.08);
-    --c-line-2: rgba(255, 255, 255, 0.04);
-    --c-accent: #06b6d4;
-    --c-accent-hover: #0891b2;
-    --c-accent-text: #22d3ee;
-    --c-accent-dim: rgba(6, 182, 212, 0.20);
-    --c-danger: #ef4444;
-    --c-danger-dim: rgba(239, 68, 68, 0.20);
-    --c-warning: #eab308;
-    --c-info: #3b82f6;
-  }
-
-  [data-theme="pink"] {
-    --c-bg: #0c020a;
-    --c-surface: #1a0a16;
-    --c-subtle: rgba(236, 72, 153, 0.06);
-    --c-muted: rgba(236, 72, 153, 0.10);
-    --c-emphasis: rgba(236, 72, 153, 0.18);
-    --c-content: #ffffff;
-    --c-content-2: #9ca3af;
-    --c-content-3: #6b7280;
-    --c-content-4: #4b5563;
-    --c-line: rgba(255, 255, 255, 0.08);
-    --c-line-2: rgba(255, 255, 255, 0.04);
-    --c-accent: #ec4899;
-    --c-accent-hover: #db2777;
-    --c-accent-text: #f472b6;
-    --c-accent-dim: rgba(236, 72, 153, 0.20);
-    --c-danger: #ef4444;
-    --c-danger-dim: rgba(239, 68, 68, 0.20);
-    --c-warning: #eab308;
-    --c-info: #3b82f6;
-  }
-
-  [data-theme="light-green"] {
-    --c-bg: #f8faf9;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(34, 197, 94, 0.06);
-    --c-muted: rgba(34, 197, 94, 0.10);
-    --c-emphasis: rgba(34, 197, 94, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #16a34a;
-    --c-accent-hover: #15803d;
-    --c-accent-text: #15803d;
-    --c-accent-dim: rgba(34, 197, 94, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #2563eb;
-  }
-
-  [data-theme="light-rose"] {
-    --c-bg: #faf8f9;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(244, 63, 94, 0.06);
-    --c-muted: rgba(244, 63, 94, 0.10);
-    --c-emphasis: rgba(244, 63, 94, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #e11d48;
-    --c-accent-hover: #be123c;
-    --c-accent-text: #be123c;
-    --c-accent-dim: rgba(244, 63, 94, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #2563eb;
-  }
-
-  [data-theme="light-blue"] {
-    --c-bg: #f8f9fb;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(59, 130, 246, 0.06);
-    --c-muted: rgba(59, 130, 246, 0.10);
-    --c-emphasis: rgba(59, 130, 246, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #2563eb;
-    --c-accent-hover: #1d4ed8;
-    --c-accent-text: #1d4ed8;
-    --c-accent-dim: rgba(59, 130, 246, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #7c3aed;
-  }
-
-  [data-theme="light-violet"] {
-    --c-bg: #f9f8fb;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(139, 92, 246, 0.06);
-    --c-muted: rgba(139, 92, 246, 0.10);
-    --c-emphasis: rgba(139, 92, 246, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #7c3aed;
-    --c-accent-hover: #6d28d9;
-    --c-accent-text: #6d28d9;
-    --c-accent-dim: rgba(139, 92, 246, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #2563eb;
-  }
-
-  [data-theme="light-orange"] {
-    --c-bg: #faf9f8;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(249, 115, 22, 0.06);
-    --c-muted: rgba(249, 115, 22, 0.10);
-    --c-emphasis: rgba(249, 115, 22, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #ea580c;
-    --c-accent-hover: #c2410c;
-    --c-accent-text: #c2410c;
-    --c-accent-dim: rgba(249, 115, 22, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #2563eb;
-  }
-
-  [data-theme="light-cyan"] {
-    --c-bg: #f8fbfb;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(6, 182, 212, 0.06);
-    --c-muted: rgba(6, 182, 212, 0.10);
-    --c-emphasis: rgba(6, 182, 212, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #0891b2;
-    --c-accent-hover: #0e7490;
-    --c-accent-text: #0e7490;
-    --c-accent-dim: rgba(6, 182, 212, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #2563eb;
-  }
-
-  [data-theme="light-pink"] {
-    --c-bg: #faf8f9;
-    --c-surface: #ffffff;
-    --c-subtle: rgba(236, 72, 153, 0.06);
-    --c-muted: rgba(236, 72, 153, 0.10);
-    --c-emphasis: rgba(236, 72, 153, 0.16);
-    --c-content: #111827;
-    --c-content-2: #4b5563;
-    --c-content-3: #6b7280;
-    --c-content-4: #9ca3af;
-    --c-line: rgba(0, 0, 0, 0.08);
-    --c-line-2: rgba(0, 0, 0, 0.04);
-    --c-accent: #db2777;
-    --c-accent-hover: #be185d;
-    --c-accent-text: #be185d;
-    --c-accent-dim: rgba(236, 72, 153, 0.15);
-    --c-danger: #dc2626;
-    --c-danger-dim: rgba(220, 38, 38, 0.12);
-    --c-warning: #ca8a04;
-    --c-info: #2563eb;
-  }
-
   html {
-    background: var(--c-bg);
     overflow: hidden;
     height: 100%;
     overscroll-behavior: none;
@@ -342,7 +55,6 @@
   body {
     @apply antialiased;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    background: var(--c-bg);
     color: var(--c-content);
     position: fixed;
     inset: 0;
@@ -366,9 +78,13 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: var(--c-muted);
+    background-color: transparent;
     border-radius: 3px;
   }
+  *:hover > ::-webkit-scrollbar-thumb,
+  *:hover::-webkit-scrollbar-thumb {
+    background-color: var(--c-muted);
+  }
   ::-webkit-scrollbar-thumb:hover {
     background-color: var(--c-emphasis);
   }

src/utils/color.ts

@@ -0,0 +1,32 @@
+/**
+ * 将 hex 颜色值转换为 rgba 字符串
+ */
+export function hexToRgba(hex: string, alpha: number): string {
+  const rgbMatch = hex.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgbMatch) {
+    return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
+  }
+  let h = hex.replace('#', '');
+  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * 将颜色值（hex 或 rgba）转换为 hex 格式（供 input[type=color] 使用）
+ */
+export function toHex(color: string): string {
+  if (color.startsWith('#')) {
+    return color.length === 4
+      ? '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
+      : color;
+  }
+  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (!m) return '#000000';
+  const r = parseInt(m[1]).toString(16).padStart(2, '0');
+  const g = parseInt(m[2]).toString(16).padStart(2, '0');
+  const b = parseInt(m[3]).toString(16).padStart(2, '0');
+  return `#${r}${g}${b}`;
+}

src/utils/song.ts

@@ -5,6 +5,8 @@ export interface Song {
   al: { id?: number; picUrl: string; name?: string };
   dt?: number;
   localPath?: string;
+  alg?: string;
+  br?: number;
 }
 
 export function normalizeSong(song: any): Song {
@@ -13,7 +15,9 @@ export function normalizeSong(song: any): Song {
     picUrl: song.al?.picUrl || song.album?.picUrl || '',
     name: song.al?.name || song.album?.name,
   };
-  const ar = (song.ar && song.ar.length > 0) ? song.ar : (song.artists || []);
+  const rawAr = (song.ar && song.ar.length > 0) ? song.ar : (song.artists || []);
+  // 过滤掉 id 和 name 同时不存在的歌手（下线艺人等）
+  const ar = rawAr.filter((a: any) => a.name);
   let dt = song.dt || song.duration || 0;
   if (dt < 100 || dt > 7200000) dt = 0;
   return {
@@ -23,6 +27,8 @@ export function normalizeSong(song: any): Song {
     al,
     dt,
     localPath: song.localPath,
+    alg: song.alg || undefined,
+    br: song.br || undefined,
   };
 }
 
@@ -34,7 +40,21 @@ export function getCoverUrl(song: Song | null, sizeParam = ''): string {
   return raw + sizeParam;
 }
 
+export function getArtistDisplay(song: Song): string {
+  if (!song.ar || song.ar.length === 0) return '未知歌手';
+  const names = song.ar
+    .filter(a => a.id != null && a.name)
+    .map(a => a.name);
+  return names.length > 0 ? names.join(' / ') : '未知歌手';
+}
+
+export function getAlbumDisplay(song: Song): string {
+  if (!song.al?.id || !song.al?.name) return '未知专辑';
+  return song.al.name;
+}
+
 const colorCache = new Map<string, string>();
+const MAX_COLOR_CACHE = 200;
 
 export function extractDominantColor(imageUrl: string): Promise<string> {
   if (colorCache.has(imageUrl)) {
@@ -67,6 +87,10 @@ export function extractDominantColor(imageUrl: string): Promise<string> {
         b = Math.round(b / count);
 
         const color = `rgb(${r}, ${g}, ${b})`;
+        if (colorCache.size >= MAX_COLOR_CACHE) {
+          const firstKey = colorCache.keys().next().value;
+          if (firstKey !== undefined) colorCache.delete(firstKey);
+        }
         colorCache.set(imageUrl, color);
         resolve(color);
       } catch {

src/views/AlbumDetail.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader />
-      ← 返回
-    </button>
 
-    <div v-if="album" class="flex gap-6 mb-8">
+    <!-- 头部骨架 -->
+    <div v-if="!album && albumLoading" class="flex gap-6 mb-8">
+      <div class="w-44 h-44 rounded-xl bg-muted animate-pulse flex-shrink-0"></div>
+      <div class="flex-1 space-y-3">
+        <div class="h-7 bg-muted rounded w-1/2 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/3 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/4 animate-pulse"></div>
+        <div class="h-10 w-28 bg-muted rounded-full animate-pulse mt-4"></div>
+      </div>
+    </div>
+
+    <!-- 头部信息 -->
+    <div v-else-if="album" class="flex gap-6 mb-8">
       <img :src="album.picUrl" class="w-44 h-44 rounded-xl object-cover shadow-lg flex-shrink-0" />
       <div class="flex flex-col justify-between min-w-0">
         <div>
@@ -34,59 +44,95 @@
       </div>
     </div>
 
-    <div v-if="loading" class="text-content-2">加载中...</div>
+    <!-- 加载失败 -->
-
+    <div v-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
-    <div v-else class="space-y-1">
+      <p class="text-content-2 text-sm">加载失败</p>
-      <SongListItem
+      <button @click="fetchAlbum(Number(route.params.id), true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
-        v-for="(song, index) in songs"
-        :key="song.id"
-        :song="song"
-        :index="index"
-        :is-current="player.currentSong?.id === song.id"
-        show-index
-        show-like
-        show-download
-        show-menu
-        show-duration
-        show-playing-overlay
-        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
-        @click="player.playFromList(songs, index)"
-      />
     </div>
+
+    <!-- 歌曲列表骨架 -->
+    <div v-else-if="songsLoading" class="space-y-1">
+      <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 歌曲列表 -->
+    <VirtualSongList
+      v-else-if="songs.length"
+      :songs="songs"
+      :current-song-id="player.currentSong?.id"
+      show-index
+      show-like
+      show-download
+      show-menu
+      show-duration
+      show-playing-overlay
+      @song-click="(_s, i) => player.playFromList(songs, i)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, onActivated } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { MusicApi } from '../api';
 import { usePlayerStore } from '../stores/player';
 import { normalizeSong, type Song } from '../utils/song';
 import { formatDate } from '../utils/format';
-import SongListItem from '../components/SongListItem.vue';
+import { pageCacheGet, pageCacheSet } from '../composables/usePageCache';
+import VirtualSongList from '../components/VirtualSongList.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconPlay from '~icons/lucide/play';
 
+defineOptions({ name: 'AlbumDetailView' });
+
 const route = useRoute();
 const router = useRouter();
 const player = usePlayerStore();
 
 const album = ref<any>(null);
 const songs = ref<Song[]>([]);
-const loading = ref(true);
+const albumLoading = ref(true);
+const songsLoading = ref(false);
+const loadError = ref(false);
 
-async function fetchAlbum(id: number) {
+async function fetchAlbum(id: number, force = false) {
-  loading.value = true;
+  const cacheKey = `album_${id}`;
+  if (!force) {
+    const cached = pageCacheGet(cacheKey);
+    if (cached) {
+      album.value = cached.album;
+      songs.value = cached.songs;
+      albumLoading.value = false;
+      songsLoading.value = false;
+      loadError.value = false;
+      return;
+    }
+  }
+
+  albumLoading.value = true;
+  songsLoading.value = true;
+  loadError.value = false;
   album.value = null;
   songs.value = [];
   try {
     const jsonStr: string = await MusicApi.albumDetail(id);
     const data = JSON.parse(jsonStr);
     album.value = data.album;
+    albumLoading.value = false;
     songs.value = (data.songs || []).map(normalizeSong);
+    songsLoading.value = false;
+    pageCacheSet(cacheKey, { album: album.value, songs: songs.value });
   } catch (e) {
     console.error(e);
-  } finally {
+    loadError.value = true;
-    loading.value = false;
+    albumLoading.value = false;
+    songsLoading.value = false;
   }
 }
 
@@ -95,7 +141,11 @@ onMounted(() => {
 });
 
 watch(() => route.params.id, (newId) => {
-  if (newId) fetchAlbum(Number(newId));
+  if (newId && route.name === 'album') fetchAlbum(Number(newId));
+});
+
+onActivated(() => {
+  if (loadError.value) fetchAlbum(Number(route.params.id), true);
 });
 
 function playAll() {

src/views/ArtistDetail.vue

@@ -1,94 +1,179 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader />
-      ← 返回
-    </button>
 
-    <div v-if="artist" class="flex gap-6 mb-8">
+    <!-- 头部骨架 -->
-      <img :src="artist.cover" class="w-44 h-44 rounded-xl object-cover shadow-lg flex-shrink-0" />
+    <div v-if="!artist && !songs.length && !albums.length" class="flex gap-6 mb-4">
-      <div class="flex flex-col justify-between min-w-0">
+      <div class="w-44 h-44 rounded-full bg-muted animate-pulse flex-shrink-0"></div>
-        <div>
+      <div class="flex-1 space-y-3">
-          <h1 class="text-2xl font-bold leading-tight">{{ artist.name }}</h1>
+        <div class="h-7 bg-muted rounded w-1/3 animate-pulse"></div>
-          <p class="text-xs text-content-3 mt-2">
+        <div class="h-4 bg-muted rounded w-1/4 animate-pulse"></div>
-            {{ formatPlayCount(artist.followeds || 0) }} 粉丝 · {{ artist.musicSize || 0 }} 首歌曲
+        <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
-          </p>
+        <div class="flex gap-3 mt-4">
-        </div>
+          <div class="h-10 w-28 bg-muted rounded-full animate-pulse"></div>
-        <div class="flex items-center gap-3 mt-4">
+          <div class="h-10 w-20 bg-muted rounded-full animate-pulse"></div>
-          <button
-            @click="playAll"
-            class="px-5 py-2 bg-accent hover:bg-accent-hover rounded-full text-white font-medium transition flex items-center gap-2"
-          >
-            <IconPlay class="w-4 h-4 fill-current" />
-            播放全部
-          </button>
         </div>
       </div>
     </div>
 
-    <div class="flex gap-2 mb-6">
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
-      <button
+      <p class="text-content-2 text-sm">加载失败</p>
-        v-for="tab in tabs"
+      <button @click="fetchArtist(Number(route.params.id), true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
-        :key="tab.key"
-        @click="activeTab = tab.key"
-        class="px-4 py-1.5 rounded-full text-sm transition"
-        :class="activeTab === tab.key ? 'bg-accent text-white' : 'bg-subtle text-content-2 hover:bg-muted'"
-      >
-        {{ tab.label }}
-      </button>
     </div>
 
-    <div v-if="loading" class="text-content-2">加载中...</div>
+    <template v-if="!loadError">
+      <!-- 头部：头像 + 简介 -->
+      <div v-if="artist || songs.length || albums.length" class="flex gap-6 mb-4">
+        <img v-if="artistCover" :src="artistCover" class="w-44 h-44 rounded-full object-cover shadow-lg flex-shrink-0" />
+        <div v-else class="w-44 h-44 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+          <IconMusic class="w-12 h-12 text-content-4" />
+        </div>
+        <div class="flex flex-col min-w-0 flex-1">
+          <div>
+            <h1 class="text-2xl font-bold leading-tight">{{ artistName }}</h1>
+            <p v-if="artistFollowers || artist?.musicSize" class="text-xs text-content-3 mt-1">
+              <span v-if="artistFollowers">{{ formatPlayCount(artistFollowers) }} 粉丝</span>
+              <span v-if="artistFollowers && artist?.musicSize"> · </span>
+              <span v-if="artist?.musicSize">{{ artist.musicSize }} 首歌曲</span>
+            </p>
+          </div>
+          <div v-if="briefDesc" class="mt-3">
+            <p
+              ref="descEl"
+              class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap overflow-hidden"
+              style="max-height: 4.5em"
+            >{{ briefDesc }}</p>
+            <button
+              v-if="descOverflow"
+              @click="showDescModal = true"
+              class="inline-flex items-center gap-1 text-xs text-accent-text hover:text-accent-text/80 mt-1.5 px-2 py-0.5 rounded-full bg-accent-text/10 transition"
+            >
+              <IconChevronDown class="w-3 h-3" />
+              查看完整介绍
+            </button>
+          </div>
+          <div class="flex items-center gap-3 mt-auto pt-4">
+            <button
+              @click="playAll"
+              class="px-5 py-2 bg-accent hover:bg-accent-hover rounded-full text-white font-medium transition flex items-center gap-2"
+            >
+              <IconPlay class="w-4 h-4 fill-current" />
+              播放全部
+            </button>
+            <button
+              @click="toggleFollow"
+              :disabled="followLoading"
+              class="px-5 py-2 rounded-full font-medium transition flex items-center gap-2"
+              :class="isFollowed
+                ? 'bg-subtle text-content-2 hover:bg-muted'
+                : 'bg-accent/15 text-accent-text hover:bg-accent/25'"
+            >
+              {{ isFollowed ? '已关注' : '关注' }}
+            </button>
+          </div>
+        </div>
+      </div>
 
-    <template v-else>
+      <!-- 简介弹窗 -->
-      <div v-if="activeTab === 'songs'" class="space-y-1">
+      <Teleport to="body">
-        <SongListItem
+        <div v-if="showDescModal" class="fixed inset-0 z-50 flex items-center justify-center" @click.self="showDescModal = false">
-          v-for="(song, index) in songs"
+          <div class="absolute inset-0 bg-black/50" @click="showDescModal = false"></div>
-          :key="song.id"
+          <div class="relative bg-surface rounded-2xl shadow-2xl max-w-lg w-full mx-4 max-h-[70vh] flex flex-col">
-          :song="song"
+            <div class="flex items-center justify-between p-5 border-b border-line-2">
-          :index="index"
+              <h2 class="text-lg font-semibold">{{ artistName }} 的介绍</h2>
-          :is-current="player.currentSong?.id === song.id"
+              <button @click="showDescModal = false" class="text-content-3 hover:text-content transition">
+                <IconX class="w-5 h-5" />
+              </button>
+            </div>
+            <div class="p-5 overflow-y-auto text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ briefDesc }}</div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- 内容区：热门歌曲 / 专辑 -->
+      <div class="flex gap-2 mb-6">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          @click="activeTab = tab.key"
+          class="px-4 py-1.5 rounded-full text-sm transition"
+          :class="activeTab === tab.key ? 'bg-accent text-white' : 'bg-subtle text-content-2 hover:bg-muted'"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <!-- 歌曲列表 -->
+      <div v-if="activeTab === 'songs'">
+        <div v-if="songsLoading" class="space-y-1">
+          <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+            <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+            <div class="flex-1 space-y-2">
+              <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+              <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+            </div>
+          </div>
+        </div>
+        <VirtualSongList
+          v-else-if="songs.length"
+          :songs="songs"
+          :current-song-id="player.currentSong?.id"
           show-index
           show-like
           show-download
           show-menu
           show-duration
           show-playing-overlay
-          :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
+          @song-click="(_s, i) => player.playFromList(songs, i)"
-          @click="player.playFromList(songs, index)"
         />
       </div>
 
-      <div v-if="activeTab === 'albums'" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <!-- 专辑列表 -->
-        <div
+      <div v-if="activeTab === 'albums'">
-          v-for="album in albums"
+        <div v-if="albumsLoading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          :key="album.id"
+          <div v-for="i in 8" :key="i" class="bg-muted rounded-xl animate-pulse">
-          @click="router.push({ name: 'album', params: { id: album.id } })"
+            <div class="w-full aspect-square"></div>
-          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer"
+            <div class="p-3 space-y-2">
-        >
+              <div class="h-4 bg-subtle rounded w-3/4"></div>
-          <img :src="album.picUrl" class="w-full aspect-square object-cover" />
+              <div class="h-3 bg-subtle rounded w-1/2"></div>
-          <div class="p-3">
+            </div>
-            <p class="text-sm font-medium truncate">{{ album.name }}</p>
+          </div>
-            <p class="text-xs text-content-2 mt-1">{{ formatDate(album.publishTime) }}</p>
+        </div>
+        <div v-else-if="albums.length" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <div
+            v-for="album in albums"
+            :key="album.id"
+            @click="router.push({ name: 'album', params: { id: album.id } })"
+            class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer"
+          >
+            <img :src="album.picUrl" class="w-full aspect-square object-cover" />
+            <div class="p-3">
+              <p class="text-sm font-medium truncate">{{ album.name }}</p>
+              <p class="text-xs text-content-2 mt-1">{{ formatDate(album.publishTime) }}</p>
+            </div>
           </div>
         </div>
-      </div>
-
-      <div v-if="activeTab === 'desc'" class="max-w-2xl">
-        <p class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ briefDesc }}</p>
       </div>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, onActivated, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { MusicApi } from '../api';
 import { usePlayerStore } from '../stores/player';
 import { formatPlayCount, formatDate } from '../utils/format';
 import { normalizeSong, type Song } from '../utils/song';
-import SongListItem from '../components/SongListItem.vue';
+import { pageCacheGet, pageCacheSet } from '../composables/usePageCache';
+import VirtualSongList from '../components/VirtualSongList.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconPlay from '~icons/lucide/play';
+import IconMusic from '~icons/lucide/music';
+import IconX from '~icons/lucide/x';
+import IconChevronDown from '~icons/lucide/chevron-down';
+
+defineOptions({ name: 'ArtistDetailView' });
 
 const route = useRoute();
 const router = useRouter();
@@ -98,41 +183,128 @@ const artist = ref<any>(null);
 const songs = ref<Song[]>([]);
 const albums = ref<any[]>([]);
 const briefDesc = ref('');
-const loading = ref(true);
+const loadError = ref(false);
+const songsLoading = ref(false);
+const albumsLoading = ref(false);
 const activeTab = ref('songs');
+const showDescModal = ref(false);
+const descOverflow = ref(false);
+const descEl = ref<HTMLElement | null>(null);
+const isFollowed = ref(false);
+const followLoading = ref(false);
 
 const tabs = [
   { key: 'songs', label: '热门歌曲' },
   { key: 'albums', label: '专辑' },
-  { key: 'desc', label: '简介' },
 ];
 
-async function fetchArtist(id: number) {
+const artistName = computed(() => {
-  loading.value = true;
+  if (artist.value?.name) return artist.value.name;
+  if (songs.value.length > 0 && songs.value[0].ar?.length > 0) return songs.value[0].ar[0].name;
+  if (albums.value.length > 0) return albums.value[0].artist?.name || albums.value[0].artists?.[0]?.name || '';
+  return '未知歌手';
+});
+
+const artistCover = computed(() => {
+  if (artist.value?.cover) return artist.value.cover;
+  if (artist.value?.picUrl) return artist.value.picUrl;
+  if (artist.value?.img1v1Url) return artist.value.img1v1Url;
+  return '';
+});
+
+const artistFollowers = computed(() => {
+  if (!artist.value) return 0;
+  return artist.value.followeds || artist.value.followCount || artist.value.fans || 0;
+});
+
+function checkDescOverflow() {
+  nextTick(() => {
+    if (descEl.value) {
+      descOverflow.value = descEl.value.scrollHeight > descEl.value.clientHeight + 2;
+    }
+  });
+}
+
+async function fetchArtist(id: number, force = false) {
+  const cacheKey = `artist_${id}`;
+  if (!force) {
+    const cached = pageCacheGet(cacheKey);
+    if (cached) {
+      artist.value = cached.artist;
+      songs.value = cached.songs;
+      albums.value = cached.albums;
+      briefDesc.value = cached.briefDesc;
+      loadError.value = false;
+      checkDescOverflow();
+      return;
+    }
+  }
+
+  loadError.value = false;
   artist.value = null;
   songs.value = [];
   albums.value = [];
   briefDesc.value = '';
-  try {
+
-    const [detailStr, songsStr, albumStr, descStr] = await Promise.all([
+  const loadDetail = async () => {
-      MusicApi.artistDetail(id),
+    try {
-      MusicApi.artistSongs({ id, order: 'hot', limit: 50, offset: 0 }),
+      const jsonStr = await MusicApi.artistDetail(id);
-      MusicApi.artistAlbum(id, 30, 0),
+      const data = JSON.parse(jsonStr);
-      MusicApi.artistDesc(id),
+      const a = data.artist || data.data?.artist || data;
-    ]);
+      artist.value = a;
-    const detailData = JSON.parse(detailStr);
+    } catch { /* 忽略 */ }
-    artist.value = detailData.artist;
+  };
-    const songsData = JSON.parse(songsStr);
+
-    songs.value = (songsData.songs || []).map(normalizeSong);
+  const loadFollowStatus = async () => {
-    const albumData = JSON.parse(albumStr);
+    try {
-    albums.value = albumData.hotAlbums || [];
+      const jsonStr = await MusicApi.artistSublist(100, 0);
-    const descData = JSON.parse(descStr);
+      const data = JSON.parse(jsonStr);
-    briefDesc.value = descData.briefDesc || '';
+      const list = data.data || [];
-  } catch (e) {
+      isFollowed.value = list.some((item: any) => item.id === id);
-    console.error(e);
+    } catch { /* 忽略 */ }
-  } finally {
+  };
-    loading.value = false;
+
+  const loadSongs = async () => {
+    songsLoading.value = true;
+    try {
+      const jsonStr = await MusicApi.artistSongs({ id, order: 'hot', limit: 50, offset: 0 });
+      const data = JSON.parse(jsonStr);
+      songs.value = (data.songs || []).map(normalizeSong);
+    } catch { /* 忽略 */ }
+    finally { songsLoading.value = false; }
+  };
+
+  const loadAlbums = async () => {
+    albumsLoading.value = true;
+    try {
+      const jsonStr = await MusicApi.artistAlbum(id, 30, 0);
+      const data = JSON.parse(jsonStr);
+      albums.value = data.hotAlbums || [];
+    } catch { /* 忽略 */ }
+    finally { albumsLoading.value = false; }
+  };
+
+  const loadDesc = async () => {
+    try {
+      const jsonStr = await MusicApi.artistDesc(id);
+      const data = JSON.parse(jsonStr);
+      if (data.briefDesc) {
+        briefDesc.value = data.briefDesc;
+      } else if (Array.isArray(data.introduction) && data.introduction.length > 0) {
+        briefDesc.value = data.introduction.map((item: any) => item.txt || '').filter(Boolean).join('\n');
+      }
+      checkDescOverflow();
+    } catch { /* 忽略 */ }
+  };
+
+  await Promise.allSettled([loadDetail(), loadSongs(), loadAlbums(), loadDesc(), loadFollowStatus()]);
+
+  if (!artist.value && !songs.value.length && !albums.value.length && !briefDesc.value) {
+    loadError.value = true;
+    return;
   }
+
+  pageCacheSet(cacheKey, { artist: artist.value, songs: songs.value, albums: albums.value, briefDesc: briefDesc.value });
 }
 
 onMounted(() => {
@@ -140,11 +312,29 @@ onMounted(() => {
 });
 
 watch(() => route.params.id, (newId) => {
-  if (newId) fetchArtist(Number(newId));
+  if (newId && route.name === 'artist') fetchArtist(Number(newId));
+});
+
+onActivated(() => {
+  if (loadError.value) fetchArtist(Number(route.params.id), true);
 });
 
 function playAll() {
   if (songs.value.length === 0) return;
   player.playAll(songs.value);
 }
+
+async function toggleFollow() {
+  const id = Number(route.params.id);
+  if (!id || followLoading.value) return;
+  followLoading.value = true;
+  try {
+    await MusicApi.artistSub(id, !isFollowed.value);
+    isFollowed.value = !isFollowed.value;
+  } catch (e) {
+    console.error('关注操作失败', e);
+  } finally {
+    followLoading.value = false;
+  }
+}
 </script>

src/views/CloudMusic.vue

@@ -0,0 +1,436 @@
+<template>
+  <div class="p-8 text-content">
+    <PageHeader>
+      <h1 class="text-2xl font-bold">音乐云盘</h1>
+      <span v-if="totalCount" class="text-xs text-content-3">{{ totalCount }} 首</span>
+      <template #actions>
+        <button
+          @click="refresh"
+          class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
+        >
+          刷新
+        </button>
+        <button
+          @click="pickAndUpload"
+          :disabled="uploading"
+          class="px-3 py-1 bg-accent/15 text-accent-text hover:bg-accent/25 rounded-full text-xs transition disabled:opacity-50"
+        >
+          {{ uploading ? '上传中...' : '上传歌曲' }}
+        </button>
+        <!-- 上传进度 -->
+        <div v-if="uploading && uploadProgress < 100" class="flex items-center gap-2 text-xs text-content-3">
+          <div class="w-24 h-1.5 bg-muted rounded-full overflow-hidden">
+            <div class="h-full bg-accent rounded-full transition-all duration-300" :style="{ width: uploadProgress + '%' }"></div>
+          </div>
+          <span>{{ uploadProgress.toFixed(0) }}%</span>
+        </div>
+      </template>
+    </PageHeader>
+
+    <!-- 存储空间 -->
+    <div v-if="cloudSize > 0" class="mb-6 p-4 bg-subtle rounded-xl">
+      <div class="flex items-center justify-between text-xs mb-2">
+        <span class="text-content-2">已使用 {{ formatFileSize(cloudSize) }} / {{ formatFileSize(cloudMaxSize) }}</span>
+        <span class="text-content-3">{{ cloudUsagePercent }}%</span>
+      </div>
+      <div class="h-1.5 bg-muted rounded-full overflow-hidden">
+        <div class="h-full bg-accent rounded-full transition-all duration-500" :style="{ width: cloudUsagePercent + '%' }"></div>
+      </div>
+    </div>
+
+    <div v-if="!userStore.isLoggedIn" class="text-content-3 py-8">
+      请先登录后查看云盘音乐
+    </div>
+
+    <div v-else-if="loading && !songs.length" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="refresh" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
+    </div>
+
+    <div v-else-if="!songs.length" class="text-content-3 py-8">云盘中暂无音乐</div>
+
+    <div v-else class="space-y-1">
+      <SongListItem
+        v-for="(song, index) in songs"
+        :key="song.id"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-like
+        show-download
+        show-duration
+        show-playing-overlay
+        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
+        @click="player.playFromList(songs, index)"
+      >
+        <template #actions>
+          <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(cloudData[index]?.fileSize || 0) }}</span>
+          <div class="relative flex-shrink-0">
+            <button
+              @click.stop="toggleMenu(song.id)"
+              class="text-content-3 hover:text-content transition p-1 rounded hover:bg-muted"
+              title="更多"
+            >
+              <IconEllipsis class="w-4 h-4 fill-current" />
+            </button>
+            <Transition name="fade">
+              <div v-if="openMenuId === song.id" class="absolute right-0 top-full mt-1 w-40 bg-surface border border-line rounded-xl shadow-2xl overflow-hidden z-50" @click.stop>
+                <button @click="showDetail(index)" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-content-2 hover:bg-subtle transition">
+                  <IconInfo style="font-size: 14px" />
+                  查看详情
+                </button>
+                <button @click="confirmDelete(song)" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-danger/80 hover:bg-danger/10 transition">
+                  <IconTrash2 style="font-size: 14px" />
+                  从云盘删除
+                </button>
+              </div>
+            </Transition>
+          </div>
+        </template>
+      </SongListItem>
+    </div>
+
+    <!-- 加载更多 -->
+    <div v-if="hasMore && songs.length" class="flex justify-center py-6">
+      <button
+        @click="loadMore"
+        :disabled="loadingMore"
+        class="px-6 py-2 bg-subtle hover:bg-muted rounded-full text-sm transition disabled:opacity-50"
+      >
+        {{ loadingMore ? '加载中...' : '加载更多' }}
+      </button>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <Transition name="fade">
+      <div v-if="showDetailModal && detailData" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDetailModal = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[380px] p-6 select-auto">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold truncate pr-4">{{ detailData.songName }}</h2>
+            <button @click="showDetailModal = false" class="text-content-3 hover:text-content transition flex-shrink-0">
+              <IconX class="w-5 h-5" />
+            </button>
+          </div>
+          <div class="space-y-3 text-sm">
+            <div class="flex justify-between">
+              <span class="text-content-3">文件名</span>
+              <span class="text-content-2 text-right max-w-[220px] truncate" :title="detailData.fileName">{{ detailData.fileName }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">歌手</span>
+              <span class="text-content-2">{{ detailData.artist }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">专辑</span>
+              <span class="text-content-2">{{ detailData.album }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">文件大小</span>
+              <span class="text-content-2">{{ formatFileSize(detailData.fileSize) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">比特率</span>
+              <span class="text-content-2">{{ detailData.bitrate ? (detailData.bitrate / 1000) + ' kbps' : '未知' }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-content-3">上传时间</span>
+              <span class="text-content-2">{{ detailData.addTime }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 删除确认 -->
+    <Transition name="fade">
+      <div v-if="showDeleteConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteConfirm = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
+          <h2 class="text-lg font-semibold text-content mb-1">确认删除</h2>
+          <p class="text-sm text-content-2 mb-5">确定要从云盘删除「{{ deleteTarget?.name }}」吗？</p>
+          <div class="flex gap-3">
+            <button @click="showDeleteConfirm = false"
+              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
+              取消
+            </button>
+            <button @click="doDelete"
+              class="flex-1 py-2 rounded-lg bg-danger/20 hover:bg-danger/30 text-danger text-sm font-medium transition">
+              删除
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onActivated, onBeforeUnmount } from 'vue';
+import { MusicApi } from '../api';
+import { usePlayerStore } from '../stores/player';
+import { useUserStore } from '../stores/user';
+import { showToast } from '../composables/useToast';
+import { normalizeSong, type Song } from '../utils/song';
+import { pageCacheGet, pageCacheSet, pageCacheInvalidate } from '../composables/usePageCache';
+import { formatFileSize } from '../composables/useLocalMusic';
+import { open } from '@tauri-apps/plugin-dialog';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
+import IconEllipsis from '~icons/lucide/ellipsis';
+import IconInfo from '~icons/lucide/info';
+import IconTrash2 from '~icons/lucide/trash-2';
+import IconX from '~icons/lucide/x';
+
+defineOptions({ name: 'CloudMusicView' });
+
+const player = usePlayerStore();
+const userStore = useUserStore();
+
+interface CloudItem {
+  songId: number;
+  fileSize: number;
+  fileName: string;
+  bitrate: number;
+  addTime: string;
+  artist: string;
+  album: string;
+  songName: string;
+}
+
+const songs = ref<Song[]>([]);
+const cloudData = ref<CloudItem[]>([]);
+const loading = ref(true);
+const loadingMore = ref(false);
+const loadError = ref(false);
+const hasMore = ref(false);
+const totalCount = ref(0);
+const openMenuId = ref<number | null>(null);
+const showDeleteConfirm = ref(false);
+const showDetailModal = ref(false);
+const detailData = ref<CloudItem | null>(null);
+const deleteTarget = ref<Song | null>(null);
+const cloudSize = ref(0);
+const cloudMaxSize = ref(0);
+const uploading = ref(false);
+const uploadProgress = ref(0);
+let unlistenProgress: UnlistenFn | null = null;
+
+const cloudUsagePercent = computed(() => {
+  if (cloudMaxSize.value === 0) return 0;
+  return Math.min(100, Math.round(cloudSize.value / cloudMaxSize.value * 100));
+});
+
+const LIMIT = 30;
+let currentOffset = 0;
+
+function formatTimestamp(ts: number): string {
+  if (!ts) return '未知';
+  return new Date(ts).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+}
+
+function toggleMenu(id: number) {
+  openMenuId.value = openMenuId.value === id ? null : id;
+}
+
+function closeMenu() {
+  openMenuId.value = null;
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeMenu);
+  // 监听上传进度事件
+  listen<{ filename: string; progress: number; uploaded: number; total: number }>('cloud-upload-progress', (e) => {
+    uploadProgress.value = e.payload.progress;
+  }).then(fn => { unlistenProgress = fn; });
+});
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeMenu);
+  unlistenProgress?.();
+});
+
+async function fetchCloud(offset = 0, append = false) {
+  if (!userStore.isLoggedIn) {
+    loading.value = false;
+    return;
+  }
+
+  if (!append) {
+    loading.value = true;
+    loadError.value = false;
+  } else {
+    loadingMore.value = true;
+  }
+
+  try {
+    const jsonStr = await MusicApi.userCloud(LIMIT, offset);
+    const data = JSON.parse(jsonStr);
+    const items = data.data || [];
+
+    const newSongs = items.map((item: any) => {
+      const s = item.simpleSong || {};
+      return normalizeSong({
+        ...s,
+        id: s.id || item.songId,
+        name: s.name || item.fileName,
+        ar: s.ar || (item.artist ? [{ name: item.artist }] : []),
+        al: s.al || { name: item.album || '未知专辑' },
+        dt: s.dt || item.duration,
+      });
+    });
+
+    const newCloudData: CloudItem[] = items.map((item: any) => ({
+      songId: item.songId,
+      fileSize: item.fileSize || 0,
+      fileName: item.fileName || '',
+      bitrate: item.bitrate || 0,
+      addTime: formatTimestamp(item.addTime),
+      artist: item.artist || (item.simpleSong?.ar || []).map((a: any) => a.name).join(' / ') || '未知歌手',
+      album: item.album || item.simpleSong?.al?.name || '未知专辑',
+      songName: item.simpleSong?.name || item.fileName?.replace(/\.\w+$/, '') || '未知歌曲',
+    }));
+
+    if (append) {
+      songs.value = [...songs.value, ...newSongs];
+      cloudData.value = [...cloudData.value, ...newCloudData];
+    } else {
+      songs.value = newSongs;
+      cloudData.value = newCloudData;
+    }
+
+    totalCount.value = data.count || songs.value.length;
+    currentOffset = offset + items.length;
+    hasMore.value = songs.value.length < totalCount.value;
+    cloudSize.value = data.size || 0;
+    cloudMaxSize.value = data.maxSize || 0;
+
+    if (!append) {
+      pageCacheSet('cloudMusic', {
+        songs: songs.value, cloudData: cloudData.value, totalCount: totalCount.value,
+        hasMore: hasMore.value, offset: currentOffset,
+        cloudSize: cloudSize.value, cloudMaxSize: cloudMaxSize.value,
+      });
+    }
+  } catch (e) {
+    console.error(e);
+    if (!append) loadError.value = true;
+    else showToast('加载更多失败', 'error');
+  } finally {
+    loading.value = false;
+    loadingMore.value = false;
+  }
+}
+
+function refresh() {
+  pageCacheInvalidate('cloudMusic');
+  currentOffset = 0;
+  fetchCloud(0, false);
+}
+
+function loadMore() {
+  fetchCloud(currentOffset, true);
+}
+
+async function pickAndUpload() {
+  const selected = await open({
+    multiple: true,
+    filters: [{ name: '音频文件', extensions: ['mp3', 'flac', 'wav', 'ogg', 'aac', 'm4a'] }],
+    title: '选择要上传的歌曲',
+  });
+  if (!selected) return;
+
+  const paths = Array.isArray(selected) ? selected : [selected];
+  uploading.value = true;
+  uploadProgress.value = 0;
+
+  for (const filePath of paths) {
+    uploadProgress.value = 0;
+    try {
+      await MusicApi.cloudUpload(filePath);
+      showToast('上传成功', 'success');
+    } catch (e: any) {
+      showToast(`上传失败: ${e || '未知错误'}`, 'error');
+    }
+  }
+
+  uploading.value = false;
+  uploadProgress.value = 0;
+  // 等待服务端完全提交后再刷新列表
+  setTimeout(() => refresh(), 1000);
+}
+
+function showDetail(index: number) {
+  openMenuId.value = null;
+  detailData.value = cloudData.value[index] || null;
+  showDetailModal.value = true;
+}
+
+function confirmDelete(song: Song) {
+  openMenuId.value = null;
+  deleteTarget.value = song;
+  showDeleteConfirm.value = true;
+}
+
+async function doDelete() {
+  if (!deleteTarget.value) return;
+  try {
+    await MusicApi.userCloudDel(deleteTarget.value.id);
+    const targetId = deleteTarget.value.id;
+    const idx = songs.value.findIndex(s => s.id === targetId);
+    songs.value = songs.value.filter(s => s.id !== targetId);
+    if (idx !== -1) cloudData.value.splice(idx, 1);
+    totalCount.value = Math.max(0, totalCount.value - 1);
+    pageCacheInvalidate('cloudMusic');
+    showToast('已从云盘删除', 'success');
+  } catch {
+    showToast('删除失败', 'error');
+  }
+  showDeleteConfirm.value = false;
+  deleteTarget.value = null;
+}
+
+onMounted(() => {
+  if (!userStore.isLoggedIn) {
+    loading.value = false;
+    return;
+  }
+  const cached = pageCacheGet('cloudMusic');
+  if (cached) {
+    songs.value = cached.songs;
+    cloudData.value = cached.cloudData;
+    totalCount.value = cached.totalCount;
+    hasMore.value = cached.hasMore;
+    currentOffset = cached.offset;
+    cloudSize.value = cached.cloudSize || 0;
+    cloudMaxSize.value = cached.cloudMaxSize || 0;
+    loading.value = false;
+    return;
+  }
+  fetchCloud();
+});
+
+onActivated(() => {
+  if (loadError.value) refresh();
+});
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/views/DailySongs.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader>
-      ← 返回
-    </button>
-    <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-bold">每日推荐</h1>
       <button
         v-if="songs.length > 0"
@@ -12,63 +9,71 @@
       >
         播放全部
       </button>
+    </PageHeader>
+    <div v-if="loading" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
     </div>
-    <div v-if="loading" class="text-content-2">加载中...</div>
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
-    <div v-else class="space-y-2">
+      <p class="text-content-2 text-sm">加载失败</p>
-      <SongListItem
+      <button @click="loadData(true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
-        v-for="(song, index) in songs"
-        :key="song.id"
-        :song="song"
-        :index="index"
-        :is-current="isCurrentSong(song.id)"
-        show-index
-        show-like
-        show-download
-        show-menu
-        show-duration
-        show-playing-overlay
-        :container-class="isCurrentSong(song.id) ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
-        @click="player.playFromList(songs, index)"
-      />
     </div>
+    <VirtualSongList
+      v-else
+      :songs="songs"
+      :current-song-id="player.currentSong?.id"
+      show-index
+      show-like
+      show-download
+      show-menu
+      show-duration
+      show-playing-overlay
+      @song-click="(_s, i) => player.playFromList(songs, i)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onActivated, watch } from 'vue';
 import { MusicApi } from '../api';
-import SongListItem from '../components/SongListItem.vue';
+import VirtualSongList from '../components/VirtualSongList.vue';
+import PageHeader from '../components/PageHeader.vue';
 import { usePlayerStore } from '../stores/player';
 import { pageCacheGet, pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
 import { normalizeSong, type Song } from '../utils/song';
-import { useOnlineStatus } from '../composables/useOnlineStatus';
 
 defineOptions({ name: 'DailySongsView' });
 
 const player = usePlayerStore();
-const { isOnline } = useOnlineStatus();
 const songs = ref<Song[]>([]);
 const loading = ref(true);
+const loadError = ref(false);
 
-function isCurrentSong(songId: number): boolean {
+async function loadData(force = false) {
-  return player.currentSong?.id === songId;
+  if (!force) {
-}
+    const cached = pageCacheGet('dailySongs');
-
+    if (cached) {
-async function loadData() {
+      songs.value = cached;
-  const cached = pageCacheGet('dailySongs');
+      loading.value = false;
-  if (cached) {
+      loadError.value = false;
-    songs.value = cached;
+      return;
-    loading.value = false;
+    }
-    return;
   }
   loading.value = true;
   try {
+    loadError.value = false;
     const jsonStr: string = await MusicApi.recommendSongs();
     const data = JSON.parse(jsonStr);
     songs.value = (data.data?.dailySongs || []).map(normalizeSong);
     pageCacheSet('dailySongs', songs.value);
   } catch (e) {
     console.error(e);
+    loadError.value = true;
   } finally {
     loading.value = false;
   }
@@ -77,10 +82,14 @@ async function loadData() {
 onMounted(loadData);
 
 onActivated(() => {
-  if (pageCacheIsStale('dailySongs')) loadData();
+  if (loadError.value) {
+    loadData(true);
+  } else if (pageCacheIsStale('dailySongs')) {
+    loadData();
+  }
 });
 
-watch(isOnline, (val, old) => {
+watch(() => navigator.onLine, (val, old) => {
   if (val && !old && songs.value.length === 0) {
     pageCacheInvalidate('dailySongs');
     loadData();

src/views/DownloadedMusic.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="p-8 text-content">
+    <PageHeader>
+      <h1 class="text-2xl font-bold">下载音乐</h1>
+      <span v-if="songs.length" class="text-xs text-content-3">{{ songs.length }} 首</span>
+      <template #actions>
+        <button
+          @click="refresh"
+          class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
+        >
+          刷新
+        </button>
+      </template>
+    </PageHeader>
+
+    <div v-if="loading" class="space-y-1">
+      <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="songs.length === 0" class="text-content-3">
+      暂无下载音乐
+    </div>
+    <div v-else class="space-y-2">
+      <SongListItem
+        v-for="(song, index) in normalizedSongs"
+        :key="song.id + '-' + index"
+        :song="song"
+        :index="index"
+        :is-current="player.currentSong?.id === song.id"
+        show-index
+        show-duration
+        show-playing-overlay
+        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
+        @click="player.playFromList(normalizedSongs, index)"
+      >
+        <template #actions>
+          <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(songs[index].fileSize) }}</span>
+          <div class="relative flex-shrink-0">
+            <button
+              @click.stop="toggleMenu(songs[index].id)"
+              class="text-content-3 hover:text-content transition p-1 rounded hover:bg-muted"
+              title="更多"
+            >
+              <IconEllipsis class="w-4 h-4 fill-current" />
+            </button>
+            <Transition name="fade">
+              <div v-if="openMenuId === songs[index].id" class="absolute right-0 top-full mt-1 w-44 bg-surface border border-line rounded-xl shadow-2xl overflow-hidden z-50" @click.stop>
+                <button @click="confirmDelete(songs[index])" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-danger/80 hover:bg-danger/10 transition">
+                  <IconTrash2 style="font-size: 14px" />
+                  从磁盘中删除
+                </button>
+              </div>
+            </Transition>
+          </div>
+        </template>
+      </SongListItem>
+    </div>
+
+    <Transition name="fade">
+      <div v-if="showDeleteConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteConfirm = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
+          <h2 class="text-lg font-semibold text-content mb-1">确认删除</h2>
+          <p class="text-sm text-content-2 mb-5">确定要删除「{{ deleteTarget?.name }}」吗？此操作不可撤销。</p>
+          <div class="flex gap-3">
+            <button @click="showDeleteConfirm = false"
+              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
+              取消
+            </button>
+            <button @click="doDelete"
+              class="flex-1 py-2 rounded-lg bg-danger/20 hover:bg-danger/30 text-danger text-sm font-medium transition">
+              删除
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onActivated, onBeforeUnmount, watch } from 'vue';
+import { DownloadApi } from '../api';
+import { usePlayerStore } from '../stores/player';
+import { useDownload } from '../composables/useDownload';
+import { useSettingsStore } from '../stores/settings';
+import { showToast } from '../composables/useToast';
+import { pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
+import { formatFileSize, localSongToSong, fetchMissingCovers, type LocalSong } from '../composables/useLocalMusic';
+import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
+import IconEllipsis from '~icons/lucide/ellipsis';
+import IconTrash2 from '~icons/lucide/trash-2';
+
+defineOptions({ name: 'DownloadedMusicView' });
+
+const player = usePlayerStore();
+const download = useDownload();
+const settings = useSettingsStore();
+
+const songs = ref<LocalSong[]>([]);
+const loading = ref(true);
+const showDeleteConfirm = ref(false);
+const deleteTarget = ref<LocalSong | null>(null);
+const openMenuId = ref<number | null>(null);
+
+const normalizedSongs = computed(() => songs.value.map(localSongToSong));
+
+function toggleMenu(id: number) {
+  openMenuId.value = openMenuId.value === id ? null : id;
+}
+
+function closeMenu() {
+  openMenuId.value = null;
+}
+
+onMounted(() => { document.addEventListener('click', closeMenu); });
+onBeforeUnmount(() => { document.removeEventListener('click', closeMenu); });
+
+async function refresh() {
+  loading.value = true;
+  try {
+    const list = await DownloadApi.listLocalSongs(settings.downloadPath || null);
+    songs.value = list;
+    pageCacheSet('downloadedMusic', list);
+    fetchMissingCovers(songs.value);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(refresh);
+
+onActivated(() => {
+  if (pageCacheIsStale('downloadedMusic')) refresh();
+});
+
+watch(() => settings.downloadPath, () => { refresh(); });
+
+function confirmDelete(song: LocalSong) {
+  openMenuId.value = null;
+  deleteTarget.value = song;
+  showDeleteConfirm.value = true;
+}
+
+async function doDelete() {
+  if (!deleteTarget.value) return;
+  try {
+    await DownloadApi.deleteLocalSong({ id: deleteTarget.value.id, filename: deleteTarget.value.filename, downloadPath: settings.downloadPath || null });
+    songs.value = songs.value.filter(s => s.id !== deleteTarget.value!.id);
+    download.localSongIds.delete(deleteTarget.value.id);
+    pageCacheInvalidate('downloadedMusic');
+    showToast('已删除', 'success');
+  } catch (e) {
+    showToast('删除失败', 'error');
+  }
+  showDeleteConfirm.value = false;
+  deleteTarget.value = null;
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/views/FavoriteSongs.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader>
-      ← 返回
-    </button>
-    <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-bold">我喜欢的音乐</h1>
       <button
         v-if="songs.length"
@@ -13,64 +10,75 @@
         <IconPlay class="w-4 h-4 fill-current" />
         播放全部
       </button>
-    </div>
+    </PageHeader>
     <div v-if="!userStore.isLoggedIn" class="text-content-2">
       请先登录后查看喜欢的音乐
     </div>
-    <div v-else-if="loading" class="text-content-2">加载中...</div>
+    <div v-else-if="loading" class="space-y-1">
-    <div v-else-if="songs.length === 0" class="text-content-2">暂无喜欢的音乐</div>
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
-    <div v-else class="space-y-1">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
-      <SongListItem
+        <div class="flex-1 space-y-2">
-        v-for="(song, index) in songs"
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
-        :key="song.id"
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
-        :song="song"
+        </div>
-        :index="index"
+      </div>
-        :is-current="player.currentSong?.id === song.id"
-        show-index
-        show-like
-        show-download
-        show-menu
-        show-duration
-        show-playing-overlay
-        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
-        @click="player.playFromList(songs, index)"
-      />
     </div>
+    <div v-else-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
+      <p class="text-content-2 text-sm">加载失败</p>
+      <button @click="loadData(true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
+    </div>
+    <div v-else-if="songs.length === 0" class="text-content-2">暂无喜欢的音乐</div>
+    <VirtualSongList
+      v-else
+      :songs="songs"
+      :current-song-id="player.currentSong?.id"
+      show-index
+      show-like
+      show-download
+      show-menu
+      show-duration
+      show-playing-overlay
+      @song-click="(_s, i) => player.playFromList(songs, i)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onActivated, watch } from 'vue';
 import { MusicApi } from '../api';
-import SongListItem from '../components/SongListItem.vue';
+import VirtualSongList from '../components/VirtualSongList.vue';
+import PageHeader from '../components/PageHeader.vue';
 import { usePlayerStore } from '../stores/player';
 import { useUserStore } from '../stores/user';
 import { normalizeSong, type Song } from '../utils/song';
 import { pageCacheGet, pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
-import { useOnlineStatus } from '../composables/useOnlineStatus';
 import IconPlay from '~icons/lucide/play';
 
 defineOptions({ name: 'FavoriteSongsView' });
 
 const player = usePlayerStore();
 const userStore = useUserStore();
-const { isOnline } = useOnlineStatus();
 const songs = ref<Song[]>([]);
 const loading = ref(true);
+const loadError = ref(false);
 
-async function loadData() {
+async function loadData(force = false) {
   if (!userStore.isLoggedIn) {
     loading.value = false;
     return;
   }
-  const cached = pageCacheGet('favoriteSongs');
+  if (!force) {
-  if (cached) {
+    const cached = pageCacheGet('favoriteSongs');
-    songs.value = cached;
+    if (cached) {
-    loading.value = false;
+      songs.value = cached;
-    return;
+      loading.value = false;
+      loadError.value = false;
+      return;
+    }
   }
   loading.value = true;
   try {
+    loadError.value = false;
     const playlistJson: string = await MusicApi.userPlaylist(userStore.user!.userId);
     const playlistData = JSON.parse(playlistJson);
     const created = (playlistData.playlist || []).filter((p: any) => !p.subscribed);
@@ -85,6 +93,7 @@ async function loadData() {
     pageCacheSet('favoriteSongs', songs.value);
   } catch (e) {
     console.error(e);
+    loadError.value = true;
   } finally {
     loading.value = false;
   }
@@ -93,10 +102,14 @@ async function loadData() {
 onMounted(loadData);
 
 onActivated(() => {
-  if (pageCacheIsStale('favoriteSongs')) loadData();
+  if (loadError.value) {
+    loadData(true);
+  } else if (pageCacheIsStale('favoriteSongs')) {
+    loadData();
+  }
 });
 
-watch(isOnline, (val, old) => {
+watch(() => navigator.onLine, (val, old) => {
   if (val && !old && userStore.isLoggedIn && songs.value.length === 0) {
     pageCacheInvalidate('favoriteSongs');
     loadData();

src/views/Home.vue

@@ -71,15 +71,37 @@
     </div>
 
     <!-- 第二行：为你推荐（需登录） -->
-    <div v-if="userStore.isLoggedIn && recPlaylists.length" class="mb-10">
+    <div v-if="userStore.isLoggedIn" class="mb-10">
       <h2 class="text-xl font-semibold mb-4">🎯 为你推荐</h2>
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+
+      <!-- 加载中：骨架屏 -->
+      <div v-if="recLoading && !recPlaylists.length" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+        <div v-for="i in 6" :key="'skel-'+i" class="bg-subtle rounded-xl overflow-hidden max-w-[220px] justify-self-center w-full animate-pulse">
+          <div class="w-full aspect-square bg-muted"></div>
+          <div class="p-3 space-y-2">
+            <div class="h-4 bg-muted rounded w-3/4"></div>
+            <div class="h-3 bg-muted rounded w-1/2"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载失败 -->
+      <div v-else-if="recError && !recPlaylists.length" class="flex flex-col items-center justify-center py-12 gap-3">
+        <p class="text-content-2 text-sm">推荐加载失败</p>
+        <button @click="fetchRecPlaylists"
+          class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">
+          重试
+        </button>
+      </div>
+
+      <!-- 正常内容 -->
+      <div v-else-if="recPlaylists.length" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
         <div v-for="pl in recPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
           class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer max-w-[220px] justify-self-center w-full">
           <img :src="pl.picUrl" class="w-full aspect-square object-cover" />
           <div class="p-3">
             <p class="text-sm font-medium truncate">{{ pl.name }}</p>
-            <p class="text-xs text-content-2 mt-1">{{ pl.copywriter || '' }}</p>
+            <p class="text-xs text-content-2 mt-1 truncate">{{ pl.copywriter || pl.description || '' }}</p>
           </div>
         </div>
       </div>
@@ -88,12 +110,34 @@
     <!-- 第三行：热门歌单（排行榜） -->
     <div>
       <h2 class="text-xl font-semibold mb-4">📈 热门歌单</h2>
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+
+      <!-- 加载中：骨架屏 -->
+      <div v-if="rankLoading && !rankPlaylists.length" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+        <div v-for="i in 4" :key="'rskel-'+i" class="bg-subtle rounded-xl overflow-hidden max-w-[220px] justify-self-center w-full animate-pulse">
+          <div class="w-full aspect-square bg-muted"></div>
+          <div class="p-3 space-y-2">
+            <div class="h-4 bg-muted rounded w-3/4"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载失败 -->
+      <div v-else-if="rankError && !rankPlaylists.length" class="flex flex-col items-center justify-center py-12 gap-3">
+        <p class="text-content-2 text-sm">热门歌单加载失败</p>
+        <button @click="fetchRankPlaylists"
+          class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">
+          重试
+        </button>
+      </div>
+
+      <!-- 正常内容 -->
+      <div v-else-if="rankPlaylists.length" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
         <div v-for="pl in rankPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
           class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer backdrop-blur-sm max-w-[220px] justify-self-center w-full">
           <img :src="pl.coverImgUrl" class="w-full aspect-square object-cover" />
           <div class="p-3">
             <p class="text-sm font-medium truncate">{{ pl.name }}</p>
+            <p v-if="pl.description || pl.copywriter" class="text-xs text-content-2 mt-1 truncate">{{ pl.description || pl.copywriter }}</p>
           </div>
         </div>
       </div>
@@ -119,7 +163,11 @@ const userStore = useUserStore();
 const { isOnline } = useOnlineStatus();
 
 const rankPlaylists = ref<any[]>([]);
+const rankLoading = ref(false);
+const rankError = ref(false);
 const recPlaylists = ref<any[]>([]);
+const recLoading = ref(false);
+const recError = ref(false);
 const todayStr = ref('');
 const RANK_IDS = [3778678, 3779629, 19723756, 2884035];
 
@@ -160,6 +208,56 @@ function onFmCardClick() {
   player.openRoamDrawer();
 }
 
+async function fetchRankPlaylists() {
+  const cacheKey = 'home_rank';
+  const cached = pageCacheGet(cacheKey);
+  if (cached) {
+    rankPlaylists.value = cached;
+    return;
+  }
+  rankLoading.value = true;
+  rankError.value = false;
+  try {
+    const results = await Promise.allSettled(
+      RANK_IDS.map(id => MusicApi.getPlaylistDetail(id))
+    );
+    rankPlaylists.value = results
+      .filter(r => r.status === 'fulfilled')
+      .map((r: any) => {
+        const data = JSON.parse(r.value);
+        return data.playlist;
+      })
+      .filter(Boolean);
+    pageCacheSet(cacheKey, rankPlaylists.value);
+  } catch {
+    rankError.value = true;
+  } finally {
+    rankLoading.value = false;
+  }
+}
+
+async function fetchRecPlaylists() {
+  if (!userStore.isLoggedIn) return;
+  const cacheKey = 'home_rec';
+  const cached = pageCacheGet(cacheKey);
+  if (cached) {
+    recPlaylists.value = cached;
+    return;
+  }
+  recLoading.value = true;
+  recError.value = false;
+  try {
+    const json = await MusicApi.recommendResource();
+    const data = JSON.parse(json as string);
+    recPlaylists.value = data.recommend || [];
+    pageCacheSet(cacheKey, recPlaylists.value);
+  } catch {
+    recError.value = true;
+  } finally {
+    recLoading.value = false;
+  }
+}
+
 async function loadData() {
   const cached = pageCacheGet('home');
   if (cached) {
@@ -168,26 +266,8 @@ async function loadData() {
     return;
   }
 
-  const results = await Promise.allSettled(
+  fetchRankPlaylists();
-    RANK_IDS.map(id => MusicApi.getPlaylistDetail(id))
+  fetchRecPlaylists();
-  );
-  rankPlaylists.value = results
-    .filter(r => r.status === 'fulfilled')
-    .map((r: any) => {
-      const data = JSON.parse(r.value);
-      return data.playlist;
-    })
-    .filter(Boolean);
-
-  if (userStore.isLoggedIn) {
-    try {
-      const json = await MusicApi.recommendResource();
-      const data = JSON.parse(json as string);
-      recPlaylists.value = data.recommend || [];
-    } catch { /* 忽略 */ }
-  }
-
-  pageCacheSet('home', { rankPlaylists: rankPlaylists.value, recPlaylists: recPlaylists.value });
 }
 
 onMounted(async () => {
@@ -201,9 +281,22 @@ onActivated(() => {
 });
 
 watch(isOnline, (val, old) => {
-  if (val && !old && rankPlaylists.value.length === 0 && recPlaylists.value.length === 0) {
+  if (val && !old) {
-    pageCacheInvalidate('home');
+    if (rankPlaylists.value.length === 0 && recPlaylists.value.length === 0) {
-    loadData();
+      pageCacheInvalidate('home');
+      pageCacheInvalidate('home_rank');
+      pageCacheInvalidate('home_rec');
+      loadData();
+    } else {
+      if (rankError.value) {
+        pageCacheInvalidate('home_rank');
+        fetchRankPlaylists();
+      }
+      if (recError.value) {
+        pageCacheInvalidate('home_rec');
+        fetchRecPlaylists();
+      }
+    }
   }
 });
 

src/views/LocalMusic.vue

@@ -1,73 +1,96 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader>
-      ← 返回
-    </button>
-    <div class="flex items-center gap-4 mb-6">
       <h1 class="text-2xl font-bold">本地音乐</h1>
       <span v-if="songs.length" class="text-xs text-content-3">{{ songs.length }} 首</span>
-      <button
+      <template #actions>
-        @click="refresh"
+        <button @click="cycleSort" class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition-all flex items-center justify-center gap-1 whitespace-nowrap">
-        class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition"
+          <IconArrowUpDown class="w-3 h-3" />
-      >
+          {{ sortLabel }}
-        刷新
+        </button>
-      </button>
+        <button @click="refresh" class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition">刷新</button>
+        <button @click="showFolderModal = true" class="px-3 py-1 bg-muted hover:bg-emphasis rounded-full text-xs transition">扫描目录</button>
+      </template>
+    </PageHeader>
+
+    <div v-if="loading" class="space-y-1">
+      <div v-for="i in 6" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="settings.localMusicFolders.length === 0" class="text-content-3 py-4">
+      请先添加要扫描的文件夹
+    </div>
+    <div v-else-if="settings.enabledMusicPaths.length === 0" class="text-content-3 py-4">
+      请至少启用一个扫描文件夹
     </div>
-    <div v-if="loading" class="text-content-2">加载中...</div>
     <div v-else-if="songs.length === 0" class="text-content-3">
       当前文件夹下没有音乐文件，支持 mp3、flac、wav、ogg、aac、m4a 格式
     </div>
     <div v-else class="space-y-2">
       <SongListItem
-        v-for="(song, index) in normalizedSongs"
+        v-for="(song, index) in sortedSongs"
         :key="song.id + '-' + index"
-        :song="song"
+        :song="sortedNormalized[index]"
         :index="index"
         :is-current="player.currentSong?.id === song.id"
         show-index
         show-duration
         show-playing-overlay
         :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
-        @click="player.playFromList(normalizedSongs, index)"
+        @click="player.playFromList(sortedNormalized, index)"
       >
         <template #actions>
-          <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(songs[index].fileSize) }}</span>
+          <span class="text-xs text-content-3 flex-shrink-0">{{ formatFileSize(song.fileSize) }}</span>
-          <div class="relative flex-shrink-0">
+          <div class="relative flex-shrink-0" :ref="(el: any) => menuRefs[song.id] = el">
-            <button
+            <button @click.stop="toggleMenu(song.id)" class="text-content-3 hover:text-content transition p-1 rounded-md hover:bg-subtle">
-              @click.stop="toggleMenu(songs[index].id)"
-              class="text-content-3 hover:text-content transition p-1 rounded hover:bg-muted"
-              title="更多"
-            >
               <IconEllipsis class="w-4 h-4 fill-current" />
             </button>
-            <Transition name="fade">
+            <div v-if="openMenuId === song.id"
-              <div v-if="openMenuId === songs[index].id" class="absolute right-0 top-full mt-1 w-44 bg-surface border border-line rounded-xl shadow-2xl overflow-hidden z-50" @click.stop>
+              class="absolute right-0 top-full mt-1 bg-surface border border-line rounded-xl shadow-xl z-50 py-1 min-w-[140px]">
-                <button @click="confirmDelete(songs[index])" class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-danger/80 hover:bg-danger/10 transition">
+              <button @click.stop="openFolder(song.path)" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-content-2 hover:bg-subtle hover:text-content transition whitespace-nowrap">
-                  <IconTrash2 style="font-size: 14px" />
+                <IconFolderOpen class="w-3.5 h-3.5" />
-                  从磁盘中删除
+                打开所在文件夹
-                </button>
+              </button>
-              </div>
+            </div>
-            </Transition>
           </div>
         </template>
       </SongListItem>
     </div>
 
+    <!-- 文件夹管理弹窗 -->
     <Transition name="fade">
-      <div v-if="showDeleteConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteConfirm = false">
+      <div v-if="showFolderModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showFolderModal = false">
-        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[420px] p-6 select-auto">
-          <h2 class="text-lg font-semibold text-content mb-1">确认删除</h2>
+          <div class="flex items-center justify-between mb-4">
-          <p class="text-sm text-content-2 mb-5">确定要删除「{{ deleteTarget?.name }}」吗？此操作不可撤销。</p>
+            <h2 class="text-lg font-semibold">扫描目录</h2>
-          <div class="flex gap-3">
+            <button @click="showFolderModal = false" class="text-content-3 hover:text-content transition">
-            <button @click="showDeleteConfirm = false"
+              <IconX class="w-5 h-5" />
-              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
-              取消
-            </button>
-            <button @click="doDelete"
-              class="flex-1 py-2 rounded-lg bg-danger/20 hover:bg-danger/30 text-danger text-sm font-medium transition">
-              删除
             </button>
           </div>
+          <div v-if="settings.localMusicFolders.length === 0" class="text-sm text-content-3 py-4 text-center">
+            未添加任何文件夹
+          </div>
+          <div v-else class="space-y-1.5 max-h-60 overflow-y-auto mb-4">
+            <div v-for="folder in settings.localMusicFolders" :key="folder.path" class="flex items-center gap-2 px-3 py-2 bg-subtle rounded-lg group">
+              <button @click="settings.toggleLocalMusicFolder(folder.path)" class="flex-shrink-0" :title="folder.enabled ? '点击禁用' : '点击启用'">
+                <IconCheckSquare v-if="folder.enabled" class="w-4 h-4 text-accent-text" />
+                <IconSquare v-else class="w-4 h-4 text-content-4" />
+              </button>
+              <IconFolder class="w-4 h-4 text-content-3 flex-shrink-0" />
+              <span class="text-sm truncate flex-1" :class="folder.enabled ? 'text-content-2' : 'text-content-4 line-through'" :title="folder.path">{{ folder.path }}</span>
+              <button @click="settings.removeLocalMusicPath(folder.path)" class="text-content-4 hover:text-danger transition opacity-0 group-hover:opacity-100" title="移除">
+                <IconX class="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+          <button @click="addFolder" class="w-full py-2.5 rounded-lg bg-accent/15 text-accent-text hover:bg-accent/25 text-sm font-medium transition">
+            添加文件夹
+          </button>
         </div>
       </div>
     </Transition>
@@ -75,64 +98,111 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onActivated, onBeforeUnmount, watch } from 'vue';
+import { ref, computed, onMounted, onActivated, watch, onBeforeUnmount } from 'vue';
-import { MusicApi, DownloadApi } from '../api';
+import { AppApi, DownloadApi } from '../api';
 import { usePlayerStore } from '../stores/player';
-import { useDownload } from '../composables/useDownload';
 import { useSettingsStore } from '../stores/settings';
+import { pageCacheSet, pageCacheIsStale } from '../composables/usePageCache';
+import { formatFileSize, localSongToSong, fetchMissingCovers, type LocalSong } from '../composables/useLocalMusic';
 import { showToast } from '../composables/useToast';
-import { pageCacheSet, pageCacheInvalidate, pageCacheIsStale } from '../composables/usePageCache';
+import { open } from '@tauri-apps/plugin-dialog';
 import SongListItem from '../components/SongListItem.vue';
+import PageHeader from '../components/PageHeader.vue';
+import IconFolder from '~icons/lucide/folder';
+import IconFolderOpen from '~icons/lucide/folder-open';
+import IconX from '~icons/lucide/x';
+import IconArrowUpDown from '~icons/lucide/arrow-up-down';
+import IconCheckSquare from '~icons/lucide/check-square';
+import IconSquare from '~icons/lucide/square';
 import IconEllipsis from '~icons/lucide/ellipsis';
-import IconTrash2 from '~icons/lucide/trash-2';
-import type { Song } from '../utils/song';
 
 defineOptions({ name: 'LocalMusicView' });
 
 const player = usePlayerStore();
-const download = useDownload();
 const settings = useSettingsStore();
 
-interface LocalSong {
-  id: number;
-  name: string;
-  artist: string;
-  album: string;
-  duration: number;
-  cover: string | null;
-  filename: string;
-  fileSize: number;
-  path: string;
-  local: boolean;
-}
-
 const songs = ref<LocalSong[]>([]);
 const loading = ref(true);
-const showDeleteConfirm = ref(false);
+const showFolderModal = ref(false);
-const deleteTarget = ref<LocalSong | null>(null);
-const openMenuId = ref<number | null>(null);
 
-const normalizedSongs = computed(() => songs.value.map(toSong));
+// 排序：点击循环切换
+type SortKey = 'default' | 'name' | 'size';
+const SORT_CYCLE: SortKey[] = ['default', 'name', 'size'];
+const SORT_LABELS: Record<SortKey, string> = { default: '默认', name: '名称', size: '大小' };
+const sortBy = ref<SortKey>('default');
+
+const sortLabel = computed(() => SORT_LABELS[sortBy.value]);
+
+function cycleSort() {
+  const idx = SORT_CYCLE.indexOf(sortBy.value);
+  sortBy.value = SORT_CYCLE[(idx + 1) % SORT_CYCLE.length];
+}
+
+const sortedSongs = computed(() => {
+  const list = [...songs.value];
+  if (sortBy.value === 'name') {
+    list.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));
+  } else if (sortBy.value === 'size') {
+    list.sort((a, b) => b.fileSize - a.fileSize);
+  }
+  return list;
+});
+
+const sortedNormalized = computed(() => sortedSongs.value.map(localSongToSong));
+
+// 三点菜单
+const openMenuId = ref<number | null>(null);
+const menuRefs: Record<number, HTMLElement | null> = {};
 
 function toggleMenu(id: number) {
   openMenuId.value = openMenuId.value === id ? null : id;
 }
 
-function closeMenu() {
+async function openFolder(path: string) {
   openMenuId.value = null;
+  try {
+    await AppApi.showItemInFolder(path);
+  } catch (e: any) {
+    showToast(e.toString(), 'error');
+  }
 }
 
-onMounted(() => { document.addEventListener('click', closeMenu); });
+function onClickOutside(e: MouseEvent) {
-onBeforeUnmount(() => { document.removeEventListener('click', closeMenu); });
+  if (openMenuId.value !== null) {
+    const el = menuRefs[openMenuId.value];
+    if (el && !el.contains(e.target as Node)) {
+      openMenuId.value = null;
+    }
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside));
+onBeforeUnmount(() => document.removeEventListener('click', onClickOutside));
+
+async function addFolder() {
+  const selected = await open({
+    directory: true,
+    multiple: false,
+    title: '选择音乐文件夹',
+  });
+  if (selected) {
+    settings.addLocalMusicPath(selected);
+  }
+}
 
 async function refresh() {
+  const paths = settings.enabledMusicPaths;
+  if (paths.length === 0) {
+    songs.value = [];
+    loading.value = false;
+    return;
+  }
   loading.value = true;
-  pageCacheInvalidate('localMusic');
   try {
-    const list = await DownloadApi.listLocalSongs(settings.downloadPath || null);
+    const list = await DownloadApi.scanLocalFolders(paths);
     songs.value = list;
     pageCacheSet('localMusic', list);
-    fetchMissingCovers();
+    fetchMissingCovers(songs.value);
   } catch (e) {
     console.error(e);
   } finally {
@@ -140,70 +210,13 @@ async function refresh() {
   }
 }
 
-async function fetchMissingCovers() {
-  const missing = songs.value.filter(s => !s.cover && s.id > 0 && s.id < 1e12);
-  if (missing.length === 0) return;
-  const ids = [...new Set(missing.map(s => s.id))];
-  try {
-    const jsonStr: string = await MusicApi.getSongDetail(JSON.stringify(ids));
-    const data = JSON.parse(jsonStr);
-    const detailMap = new Map<number, string>();
-    for (const s of data.songs || []) {
-      const url = s.al?.picUrl;
-      if (url && s.id) detailMap.set(s.id, url + '?param=100y100');
-    }
-    for (const song of missing) {
-      const url = detailMap.get(song.id);
-      if (url) song.cover = url;
-    }
-  } catch { /* 忽略 */ }
-}
-
 onMounted(refresh);
 
 onActivated(() => {
   if (pageCacheIsStale('localMusic')) refresh();
 });
 
-watch(() => settings.downloadPath, () => { refresh(); });
+watch(() => settings.enabledMusicPaths, () => { refresh(); }, { deep: true });
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
-}
-
-function toSong(local: LocalSong): Song {
-  return {
-    id: local.id,
-    name: local.name,
-    ar: local.artist ? [{ name: local.artist }] : [],
-    al: { picUrl: local.cover || '', name: local.album || undefined },
-    dt: local.duration || undefined,
-    localPath: local.path,
-  };
-}
-
-function confirmDelete(song: LocalSong) {
-  openMenuId.value = null;
-  deleteTarget.value = song;
-  showDeleteConfirm.value = true;
-}
-
-async function doDelete() {
-  if (!deleteTarget.value) return;
-  try {
-    await DownloadApi.deleteLocalSong({ id: deleteTarget.value.id, filename: deleteTarget.value.filename, downloadPath: settings.downloadPath || null });
-    songs.value = songs.value.filter(s => s.id !== deleteTarget.value!.id);
-    download.localSongIds.delete(deleteTarget.value.id);
-    showToast('已删除', 'success');
-  } catch (e) {
-    showToast('删除失败', 'error');
-  }
-  showDeleteConfirm.value = false;
-  deleteTarget.value = null;
-}
 </script>
 
 <style scoped>

src/views/PlaylistDetail.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader />
-      ← 返回
-    </button>
 
-    <div v-if="playlist" class="flex gap-6 mb-8">
+    <!-- 头部骨架 -->
+    <div v-if="!playlist && playlistLoading" class="flex gap-6 mb-8">
+      <div class="w-44 h-44 rounded-xl bg-muted animate-pulse flex-shrink-0"></div>
+      <div class="flex-1 space-y-3">
+        <div class="h-7 bg-muted rounded w-1/2 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-1/3 animate-pulse"></div>
+        <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+        <div class="flex gap-3 mt-4">
+          <div class="h-10 w-28 bg-muted rounded-full animate-pulse"></div>
+          <div class="h-10 w-20 bg-muted rounded-full animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 头部信息 -->
+    <div v-else-if="playlist" class="flex gap-6 mb-8">
       <img :src="playlist.coverImgUrl" class="w-44 h-44 rounded-xl object-cover shadow-lg flex-shrink-0" />
       <div class="flex flex-col justify-between min-w-0">
         <div>
@@ -13,7 +26,21 @@
             <img :src="playlist.creator.avatarUrl" class="w-5 h-5 rounded-full" />
             <span class="text-sm text-content-2">{{ playlist.creator.nickname }}</span>
           </div>
-          <p class="text-sm text-content-2 mt-2 line-clamp-2">{{ playlist.description }}</p>
+          <div v-if="playlist.description" class="mt-2">
+            <p
+              ref="descEl"
+              class="text-sm text-content-2 leading-relaxed overflow-hidden"
+              style="max-height: 3em"
+            >{{ playlist.description }}</p>
+            <button
+              v-if="descOverflow"
+              @click="showDescModal = true"
+              class="inline-flex items-center gap-1 text-xs text-accent-text hover:text-accent-text/80 mt-1 px-2 py-0.5 rounded-full bg-accent-text/10 transition"
+            >
+              <IconChevronDown class="w-3 h-3" />
+              查看完整介绍
+            </button>
+          </div>
           <p class="text-xs text-content-3 mt-2">
             {{ playlist.trackCount }} 首歌曲 · 播放 {{ formatPlayCount(playlist.playCount) }} 次
           </p>
@@ -39,26 +66,55 @@
       </div>
     </div>
 
-    <div v-if="loading" class="text-content-2">加载中...</div>
+    <!-- 简介弹窗 -->
+    <Teleport to="body">
+      <div v-if="showDescModal" class="fixed inset-0 z-50 flex items-center justify-center" @click.self="showDescModal = false">
+        <div class="absolute inset-0 bg-black/50" @click="showDescModal = false"></div>
+        <div class="relative bg-surface rounded-2xl shadow-2xl max-w-lg w-full mx-4 max-h-[70vh] flex flex-col">
+          <div class="flex items-center justify-between p-5 border-b border-line-2">
+            <h2 class="text-lg font-semibold">{{ playlist?.name }} 的介绍</h2>
+            <button @click="showDescModal = false" class="text-content-3 hover:text-content transition">
+              <IconX class="w-5 h-5" />
+            </button>
+          </div>
+          <div class="p-5 overflow-y-auto text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ playlist?.description }}</div>
+        </div>
+      </div>
+    </Teleport>
 
-    <div v-else class="space-y-1">
+    <!-- 加载失败 -->
-      <SongListItem
+    <div v-if="loadError" class="flex flex-col items-center justify-center py-16 gap-3">
-        v-for="(song, index) in songs"
+      <p class="text-content-2 text-sm">加载失败</p>
-        :key="song.id"
+      <button @click="fetchPlaylist(Number(route.params.id), true)" class="px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">重试</button>
-        :song="song"
-        :index="index"
-        :is-current="player.currentSong?.id === song.id"
-        show-index
-        show-like
-        show-download
-        show-menu
-        show-duration
-        show-playing-overlay
-        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
-        @click="player.playFromList(songs, index)"
-      />
     </div>
 
+    <!-- 歌曲列表骨架 -->
+    <div v-else-if="songsLoading" class="space-y-1">
+      <div v-for="i in 8" :key="i" class="flex items-center gap-3 px-3 py-2">
+        <div class="w-12 h-12 bg-muted rounded animate-pulse flex-shrink-0"></div>
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-muted rounded w-2/3 animate-pulse"></div>
+          <div class="h-3 bg-muted rounded w-1/3 animate-pulse"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 歌曲列表 -->
+    <VirtualSongList
+      v-else-if="songs.length"
+      :songs="songs"
+      :current-song-id="player.currentSong?.id"
+      show-index
+      show-like
+      show-download
+      show-menu
+      show-duration
+      show-playing-overlay
+      @song-click="(_s, i) => player.playFromList(songs, i)"
+    />
+
+    <div v-else-if="!songsLoading && !loadError" class="text-content-2">暂无歌曲</div>
+
     <div v-if="playlist" class="mt-8">
       <CommentSection :type="2" :id="Number(route.params.id)" />
     </div>
@@ -66,7 +122,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, onActivated, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { MusicApi } from '../api';
 import { usePlayerStore } from '../stores/player';
@@ -74,10 +130,16 @@ import { useUserStore } from '../stores/user';
 import { showToast } from '../composables/useToast';
 import { formatPlayCount } from '../utils/format';
 import { normalizeSong, type Song } from '../utils/song';
-import SongListItem from '../components/SongListItem.vue';
+import { pageCacheGet, pageCacheSet } from '../composables/usePageCache';
+import VirtualSongList from '../components/VirtualSongList.vue';
 import CommentSection from '../components/CommentSection.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconPlay from '~icons/lucide/play';
 import IconBookmark from '~icons/lucide/bookmark';
+import IconX from '~icons/lucide/x';
+import IconChevronDown from '~icons/lucide/chevron-down';
+
+defineOptions({ name: 'PlaylistDetailView' });
 
 const route = useRoute();
 const player = usePlayerStore();
@@ -85,29 +147,64 @@ const userStore = useUserStore();
 
 const playlist = ref<any>(null);
 const songs = ref<Song[]>([]);
-const loading = ref(true);
+const playlistLoading = ref(true);
+const songsLoading = ref(false);
+const loadError = ref(false);
 const subscribed = ref(false);
+const showDescModal = ref(false);
+const descOverflow = ref(false);
+const descEl = ref<HTMLElement | null>(null);
 
 const isOwnPlaylist = computed(() => {
   if (!playlist.value || !userStore.user) return false;
   return playlist.value.creator?.userId === userStore.user.userId;
 });
 
-async function fetchPlaylist(id: number) {
+function checkDescOverflow() {
-  loading.value = true;
+  nextTick(() => {
+    if (descEl.value) {
+      descOverflow.value = descEl.value.scrollHeight > descEl.value.clientHeight + 2;
+    }
+  });
+}
+
+async function fetchPlaylist(id: number, force = false) {
+  const cacheKey = `playlist_${id}`;
+  if (!force) {
+    const cached = pageCacheGet(cacheKey);
+    if (cached) {
+      playlist.value = cached.playlist;
+      songs.value = cached.songs;
+      subscribed.value = cached.subscribed;
+      playlistLoading.value = false;
+      songsLoading.value = false;
+      loadError.value = false;
+      checkDescOverflow();
+      return;
+    }
+  }
+
+  playlistLoading.value = true;
+  songsLoading.value = true;
+  loadError.value = false;
   playlist.value = null;
   songs.value = [];
   try {
     const jsonStr: string = await MusicApi.getPlaylistDetail(id);
     const data = JSON.parse(jsonStr);
     playlist.value = data.playlist;
+    playlistLoading.value = false;
     songs.value = (data.playlist.tracks || []).map(normalizeSong);
+    songsLoading.value = false;
     subscribed.value = data.playlist.subscribed || false;
+    pageCacheSet(cacheKey, { playlist: playlist.value, songs: songs.value, subscribed: subscribed.value });
+    checkDescOverflow();
   } catch (e) {
     console.error(e);
+    loadError.value = true;
+    playlistLoading.value = false;
+    songsLoading.value = false;
     showToast('获取歌单详情失败', 'error');
-  } finally {
-    loading.value = false;
   }
 }
 
@@ -116,7 +213,11 @@ onMounted(() => {
 });
 
 watch(() => route.params.id, (newId) => {
-  if (newId) fetchPlaylist(Number(newId));
+  if (newId && route.name === 'playlist') fetchPlaylist(Number(newId));
+});
+
+onActivated(() => {
+  if (loadError.value) fetchPlaylist(Number(route.params.id), true);
 });
 
 function playAll() {

src/views/RecentPlays.vue

@@ -1,33 +1,28 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader>
-      ← 返回
+      <h1 class="text-2xl font-bold">最近播放</h1>
-    </button>
+    </PageHeader>
-    <h1 class="text-2xl font-bold mb-6">最近播放</h1>
     <div v-if="player.recentLocal.length === 0" class="text-content-3">还没有播放记录，去听首歌吧</div>
-    <div v-else class="space-y-2">
+    <VirtualSongList
-      <SongListItem
+      v-else
-        v-for="(song, index) in player.recentLocal"
+      :songs="player.recentLocal"
-        :key="song.id"
+      :current-song-id="player.currentSong?.id"
-        :song="song"
+      show-index
-        :index="index"
+      show-like
-        :is-current="player.currentSong?.id === song.id"
+      show-download
-        show-index
+      show-menu
-        show-like
+      show-duration
-        show-download
+      show-playing-overlay
-        show-menu
+      @song-click="(_s, i) => player.playFromList(player.recentLocal, i)"
-        show-duration
+    />
-        show-playing-overlay
-        :container-class="player.currentSong?.id === song.id ? 'bg-accent-dim hover:bg-accent-dim' : 'hover:bg-subtle'"
-        @click="player.playFromList(player.recentLocal, index)"
-      />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { usePlayerStore } from '../stores/player';
-import SongListItem from '../components/SongListItem.vue';
+import VirtualSongList from '../components/VirtualSongList.vue';
+import PageHeader from '../components/PageHeader.vue';
 
 const player = usePlayerStore();
 </script>

src/views/Settings.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="p-8 text-content">
-    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+    <PageHeader>
-      ← 返回
+      <h1 class="text-2xl font-bold">设置</h1>
-    </button>
+    </PageHeader>
-    <h1 class="text-2xl font-bold mb-8">设置</h1>
 
     <section class="mb-8">
       <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">播放</h2>
@@ -27,37 +26,84 @@
     </section>
 
     <section class="mb-8">
-      <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">外观</h2>
+      <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">皮肤</h2>
-      <div class="space-y-5">
+      <div class="space-y-4">
-        <div>
+        <!-- 明暗切换 -->
-          <p class="text-sm font-medium mb-3">外观模式</p>
+        <div class="flex gap-2">
-          <div class="flex gap-3">
+          <button
-            <button
+            @click="settings.setSkin(toSkinId(currentThemeColor, 'dark'))"
-              v-for="(label, key) in appearanceLabels"
+            class="flex items-center gap-2 px-4 py-2 rounded-xl transition-all border-2"
-              :key="key"
+            :class="!settings.isPreset || currentAppearance !== 'dark' ? 'border-transparent bg-subtle hover:bg-muted' : 'border-accent/40 bg-accent/10'"
-              @click="settings.setAppearance(key)"
+          >
-              class="flex items-center gap-2 px-4 py-2.5 rounded-xl transition-all border-2"
+            <IconMoon class="w-4 h-4" :class="currentAppearance === 'dark' && settings.isPreset ? 'text-accent-text' : 'text-content-3'" />
-              :class="settings.appearance === key ? 'border-accent/40 bg-accent/10 scale-[1.02]' : 'border-transparent bg-subtle hover:bg-muted'"
+            <span class="text-sm" :class="currentAppearance === 'dark' && settings.isPreset ? 'text-content font-medium' : 'text-content-3'">深色</span>
-            >
+          </button>
-              <IconSun v-if="key === 'light'" class="w-4 h-4" :class="settings.appearance === key ? 'text-accent-text' : 'text-content-3'" />
+          <button
-              <IconMoon v-else class="w-4 h-4" :class="settings.appearance === key ? 'text-accent-text' : 'text-content-3'" />
+            @click="settings.setSkin(toSkinId(currentThemeColor, 'light'))"
-              <span class="text-sm" :class="settings.appearance === key ? 'text-content font-medium' : 'text-content-3'">{{ label }}</span>
+            class="flex items-center gap-2 px-4 py-2 rounded-xl transition-all border-2"
-            </button>
+            :class="!settings.isPreset || currentAppearance !== 'light' ? 'border-transparent bg-subtle hover:bg-muted' : 'border-accent/40 bg-accent/10'"
+          >
+            <IconSun class="w-4 h-4" :class="currentAppearance === 'light' && settings.isPreset ? 'text-accent-text' : 'text-content-3'" />
+            <span class="text-sm" :class="currentAppearance === 'light' && settings.isPreset ? 'text-content font-medium' : 'text-content-3'">浅色</span>
+          </button>
+        </div>
+
+        <!-- 主题色选择 -->
+        <div class="grid grid-cols-7 gap-2">
+          <div
+            v-for="tc in themeColorOptions"
+            :key="tc.id"
+            @click="settings.setSkin(toSkinId(tc.id, currentAppearance))"
+            class="flex flex-col items-center gap-1.5 p-2 rounded-xl transition-all border-2 cursor-pointer"
+            :class="currentThemeColor === tc.id && settings.isPreset ? 'border-accent/40 bg-accent/10 scale-[1.02]' : 'border-transparent bg-subtle hover:bg-muted'"
+          >
+            <div class="w-8 h-8 rounded-full shadow-md" :style="{ backgroundColor: tc.color }"></div>
+            <span class="text-[11px]" :class="currentThemeColor === tc.id && settings.isPreset ? 'text-content font-medium' : 'text-content-3'">{{ tc.name }}</span>
           </div>
         </div>
-        <div>
+
-          <p class="text-sm font-medium mb-3">主题色</p>
+        <!-- 自定义皮肤 -->
-          <div class="grid grid-cols-4 gap-3">
+        <div class="space-y-2">
-            <button
+          <p class="text-xs text-content-3">自定义</p>
-              v-for="(color, key) in themeColors"
+          <div class="grid grid-cols-5 gap-2">
-              :key="key"
+            <div
-              @click="settings.setTheme(key)"
+              v-for="s in settings.customSkins"
-              class="flex flex-col items-center gap-2 p-3 rounded-xl transition-all border-2"
+              :key="s.id"
-              :class="settings.theme === key ? 'border-accent/40 bg-accent/10 scale-[1.02]' : 'border-transparent bg-subtle hover:bg-muted'"
+              @click="settings.setSkin(s.id)"
+              class="flex flex-col items-center gap-1.5 p-2 rounded-xl transition-all border-2 cursor-pointer relative group"
+              :class="settings.skin === s.id ? 'border-accent/40 bg-accent/10 scale-[1.02]' : 'border-transparent bg-subtle hover:bg-muted'"
             >
-              <div class="w-8 h-8 rounded-full shadow-md" :style="{ backgroundColor: color }"></div>
+              <div class="w-8 h-8 rounded-full shadow-md relative overflow-hidden" :style="{ backgroundColor: s.preview }">
-              <span class="text-xs" :class="settings.theme === key ? 'text-content font-medium' : 'text-content-3'">{{ themeLabels[key] }}</span>
+                <div v-if="s.wallpaper && skinWallpaperDataUrls[s.wallpaper]" class="absolute inset-0 bg-cover bg-center opacity-40" :style="{ backgroundImage: `url(${skinWallpaperDataUrls[s.wallpaper]})` }"></div>
-            </button>
+              </div>
+              <span class="text-[11px] truncate w-full text-center" :class="settings.skin === s.id ? 'text-content font-medium' : 'text-content-3'">{{ s.name }}</span>
+              <!-- 编辑按钮 -->
+              <button
+                @click.stop="openSkinEditor(s.id)"
+                class="absolute -top-1 -right-1 w-4 h-4 flex items-center justify-center rounded-full bg-accent/60 text-white opacity-0 group-hover:opacity-100 transition"
+                title="编辑"
+              >
+                <svg class="w-2 h-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+              </button>
+              <!-- 删除按钮 -->
+              <button
+                @click.stop="handleDeleteCustomSkin(s.id)"
+                class="absolute -top-1 -left-1 w-4 h-4 flex items-center justify-center rounded-full bg-danger/80 text-white opacity-0 group-hover:opacity-100 transition"
+                title="删除"
+              >
+                <IconX style="font-size: 8px" />
+              </button>
+            </div>
+            <!-- 创建自定义皮肤（永远排最后） -->
+            <div
+              @click="openSkinEditor()"
+              class="flex flex-col items-center justify-center gap-1.5 p-2 rounded-xl transition-all border-2 border-dashed border-line cursor-pointer hover:border-accent/40 hover:bg-accent/5"
+            >
+              <div class="w-8 h-8 rounded-full flex items-center justify-center bg-subtle">
+                <IconPalette class="w-4 h-4 text-content-3" />
+              </div>
+              <span class="text-[11px] text-content-3">自定义</span>
+            </div>
           </div>
         </div>
       </div>
@@ -202,7 +248,7 @@
       </div>
     </section>
     <Transition name="fade">
-      <div v-if="showResetConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showResetConfirm = false">
+      <div v-if="showResetConfirm" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showResetConfirm = false">
         <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
           <h2 class="text-lg font-semibold text-content mb-1">确认重置</h2>
           <p class="text-sm text-content-2 mb-5">所有设置将恢复为默认值，此操作不可撤销。</p>
@@ -221,7 +267,7 @@
     </Transition>
 
     <Transition name="fade">
-      <div v-if="showChangelogModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showChangelogModal = false">
+      <div v-if="showChangelogModal" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showChangelogModal = false">
         <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[480px] max-h-[80vh] flex flex-col select-auto">
           <div class="p-6 pb-4">
             <div class="flex items-center justify-between mb-1">
@@ -250,29 +296,592 @@
       </div>
     </Transition>
 
+    <!-- 皮肤编辑器弹窗（Teleport 到 body 避免 z-index 问题） -->
+    <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="showSkinEditor" class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showSkinEditor = false">
+        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[960px] max-h-[90vh] flex flex-col select-auto">
+          <!-- 顶栏 -->
+          <div class="flex items-center justify-between p-5 border-b border-line-2">
+            <div class="flex items-center gap-3">
+              <h2 class="text-lg font-semibold">{{ editingSkinId ? '编辑皮肤' : '创建自定义皮肤' }}</h2>
+              <input v-model="editorName" class="px-3 py-1.5 bg-subtle border border-line rounded-lg text-sm text-content focus:border-accent focus:outline-none transition w-40" placeholder="皮肤名称" />
+            </div>
+            <button @click="showSkinEditor = false" class="text-content-3 hover:text-content transition">
+              <IconX class="w-5 h-5" />
+            </button>
+          </div>
+
+          <div class="flex flex-1 overflow-hidden">
+            <!-- 左侧：实时预览 -->
+            <div class="w-[420px] flex-shrink-0 p-5 border-r border-line-2 flex flex-col gap-4">
+              <p class="text-xs text-content-3 font-medium">实时预览</p>
+              <!-- 横向桌面比例预览 -->
+              <div class="rounded-xl overflow-hidden border border-line relative" style="aspect-ratio: 16/10;" :style="{ backgroundColor: getEditorColor('bg') }">
+                <!-- 壁纸层 -->
+                <div v-if="editorWallpaper && editorWallpaperDataUrl" class="absolute inset-0 bg-cover bg-center" :style="{ backgroundImage: `url(${editorWallpaperDataUrl})`, filter: `blur(${editorWallpaperBlur}px)`, opacity: editorWallpaperOpacity }"></div>
+                <!-- 无壁纸时的提示 -->
+                <div v-if="!editorWallpaper" class="absolute inset-0 flex items-center justify-center">
+                  <span class="text-[10px] opacity-20" :style="{ color: getEditorColor('content3') }">纯色背景</span>
+                </div>
+                <!-- 模拟内容 -->
+                <div class="relative z-[1] flex flex-col h-full">
+                  <!-- 模拟 TitleBar -->
+                  <div class="h-5 flex items-center justify-end px-2 flex-shrink-0" :style="{ backgroundColor: `${getEditorColor('surface')}cc` }">
+                    <div class="w-1.5 h-1.5 rounded-full bg-red-500"></div>
+                    <div class="w-1.5 h-1.5 rounded-full bg-yellow-500 ml-1"></div>
+                    <div class="w-1.5 h-1.5 rounded-full bg-green-500 ml-1"></div>
+                  </div>
+                  <div class="flex flex-1 min-h-0">
+                    <!-- 模拟 Sidebar (w-56 比例) -->
+                    <div class="w-[30%] flex-shrink-0 flex flex-col p-1.5 gap-0.5" :style="{ backgroundColor: `${getEditorColor('surface')}cc`, borderRight: `1px solid ${getEditorColor('line')}` }">
+                      <div class="flex items-center gap-1 px-1.5 py-1 rounded" :style="{ backgroundColor: getEditorColor('muted') }">
+                        <div class="w-1.5 h-1.5 rounded-sm" :style="{ backgroundColor: getEditorColor('accent') }"></div>
+                        <div class="h-1 rounded-full w-6" :style="{ backgroundColor: getEditorColor('content') }"></div>
+                      </div>
+                      <div class="flex items-center gap-1 px-1.5 py-1 rounded">
+                        <div class="w-1.5 h-1.5 rounded-sm" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                        <div class="h-1 rounded-full w-5" :style="{ backgroundColor: getEditorColor('content2') }"></div>
+                      </div>
+                      <div class="flex items-center gap-1 px-1.5 py-1 rounded">
+                        <div class="w-1.5 h-1.5 rounded-sm" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                        <div class="h-1 rounded-full w-4" :style="{ backgroundColor: getEditorColor('content2') }"></div>
+                      </div>
+                      <div class="mt-1 pt-1" :style="{ borderTop: `1px solid ${getEditorColor('line2')}` }">
+                        <div class="h-0.5 rounded-full w-4 mb-0.5" :style="{ backgroundColor: getEditorColor('content4') }"></div>
+                        <div class="flex items-center gap-1 px-1.5 py-1 rounded">
+                          <div class="w-1.5 h-1.5 rounded-sm" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                          <div class="h-1 rounded-full w-7" :style="{ backgroundColor: getEditorColor('content2') }"></div>
+                        </div>
+                        <div class="flex items-center gap-1 px-1.5 py-1 rounded">
+                          <div class="w-1.5 h-1.5 rounded-sm" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                          <div class="h-1 rounded-full w-6" :style="{ backgroundColor: getEditorColor('content2') }"></div>
+                        </div>
+                      </div>
+                      <!-- 底部设置+头像 -->
+                      <div class="mt-auto flex items-center gap-1 px-1.5 py-1">
+                        <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getEditorColor('subtle') }"></div>
+                        <div class="h-1 rounded-full w-5" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                      </div>
+                    </div>
+                    <!-- 模拟主内容 -->
+                    <div class="flex-1 p-2 flex flex-col gap-1.5 overflow-hidden" :style="editorWallpaper ? { backgroundColor: `${getEditorColor('bg')}cc` } : {}">
+                      <div class="h-2 rounded-full w-14" :style="{ backgroundColor: getEditorColor('content') }"></div>
+                      <div class="h-1 rounded-full w-20" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                      <!-- 模拟歌曲行 -->
+                      <div class="mt-1 flex items-center gap-1 px-1 py-0.5 rounded" :style="{ backgroundColor: `${getEditorColor('surface')}99` }">
+                        <div class="w-2 text-right flex-shrink-0"><div class="h-0.5 rounded-full w-1.5 ml-auto" :style="{ backgroundColor: getEditorColor('content4') }"></div></div>
+                        <div class="w-4 h-4 rounded flex-shrink-0" :style="{ backgroundColor: getEditorColor('subtle') }"></div>
+                        <div class="flex-1 flex flex-col gap-0.5 min-w-0">
+                          <div class="h-0.5 rounded-full w-12" :style="{ backgroundColor: getEditorColor('content') }"></div>
+                          <div class="h-0.5 rounded-full w-8" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-1 px-1 py-0.5 rounded">
+                        <div class="w-2 text-right flex-shrink-0"><div class="h-0.5 rounded-full w-1.5 ml-auto" :style="{ backgroundColor: getEditorColor('content4') }"></div></div>
+                        <div class="w-4 h-4 rounded flex-shrink-0" :style="{ backgroundColor: getEditorColor('subtle') }"></div>
+                        <div class="flex-1 flex flex-col gap-0.5 min-w-0">
+                          <div class="h-0.5 rounded-full w-10" :style="{ backgroundColor: getEditorColor('content2') }"></div>
+                          <div class="h-0.5 rounded-full w-14" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                        </div>
+                      </div>
+                      <!-- 选中行（均衡器动画） -->
+                      <div class="flex items-center gap-1 px-1 py-0.5 rounded" :style="{ backgroundColor: getEditorColor('accentDim') }">
+                        <div class="w-2 flex items-center justify-end flex-shrink-0 gap-[1px]">
+                          <div class="w-[1px] rounded-full" :style="{ backgroundColor: getEditorColor('accentText'), height: '3px' }"></div>
+                          <div class="w-[1px] rounded-full" :style="{ backgroundColor: getEditorColor('accentText'), height: '5px' }"></div>
+                          <div class="w-[1px] rounded-full" :style="{ backgroundColor: getEditorColor('accentText'), height: '2px' }"></div>
+                        </div>
+                        <div class="w-4 h-4 rounded flex-shrink-0" :style="{ backgroundColor: getEditorColor('subtle') }"></div>
+                        <div class="flex-1 flex flex-col gap-0.5 min-w-0">
+                          <div class="h-0.5 rounded-full w-11" :style="{ backgroundColor: getEditorColor('accentText') }"></div>
+                          <div class="h-0.5 rounded-full w-8" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                        </div>
+                      </div>
+                      <!-- 模拟按钮 -->
+                      <div class="flex gap-1 mt-0.5">
+                        <div class="px-2 py-0.5 rounded text-[6px] font-medium text-white" :style="{ backgroundColor: getEditorColor('accent') }">播放全部</div>
+                        <div class="px-2 py-0.5 rounded text-[6px]" :style="{ backgroundColor: getEditorColor('muted'), color: getEditorColor('content2') }">收藏</div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- 模拟 PlayerBar -->
+                  <div class="flex-shrink-0 flex flex-col" :style="{ backgroundColor: `${getEditorColor('surface')}f2` }">
+                    <!-- 进度条 -->
+                    <div class="h-0.5 w-full" :style="{ backgroundColor: getEditorColor('muted') }">
+                      <div class="h-full w-1/3" :style="{ backgroundColor: getEditorColor('accent') }"></div>
+                    </div>
+                    <div class="flex items-center px-2 h-6 gap-1.5">
+                      <!-- 封面+歌名 -->
+                      <div class="flex items-center gap-1 w-[30%] min-w-0">
+                        <div class="w-4 h-4 rounded flex-shrink-0" :style="{ backgroundColor: getEditorColor('subtle') }"></div>
+                        <div class="flex-1 flex flex-col gap-0.5 min-w-0">
+                          <div class="h-0.5 rounded-full w-10" :style="{ backgroundColor: getEditorColor('content') }"></div>
+                          <div class="h-0.5 rounded-full w-6" :style="{ backgroundColor: getEditorColor('content3') }"></div>
+                        </div>
+                        <svg class="w-1.5 h-1.5 flex-shrink-0" :style="{ color: getEditorColor('content3') }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                      </div>
+                      <!-- 播放控制 -->
+                      <div class="flex-1 flex items-center justify-center gap-2">
+                        <svg class="w-2 h-2" :style="{ color: getEditorColor('content2') }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="19 20 9 12 19 4" fill="currentColor"/><line x1="5" y1="4" x2="5" y2="20"/></svg>
+                        <div class="w-4 h-4 rounded-full flex items-center justify-center" :style="{ backgroundColor: getEditorColor('muted'), border: `1px solid ${getEditorColor('emphasis')}` }">
+                          <svg class="w-2 h-2" :style="{ color: getEditorColor('content') }" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>
+                        </div>
+                        <svg class="w-2 h-2" :style="{ color: getEditorColor('content2') }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 4 15 12 5 20" fill="currentColor"/><line x1="19" y1="4" x2="19" y2="20"/></svg>
+                      </div>
+                      <!-- 右侧 -->
+                      <div class="w-[30%] flex items-center justify-end gap-1">
+                        <svg class="w-1.5 h-1.5" :style="{ color: getEditorColor('content3') }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19" fill="currentColor"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
+                        <div class="w-4 h-0.5 rounded-full" :style="{ backgroundColor: getEditorColor('muted') }">
+                          <div class="h-full w-2/3 rounded-full" :style="{ backgroundColor: getEditorColor('accent') }"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- 基础风格快选 -->
+              <div>
+                <p class="text-xs text-content-3 mb-2">基于预设风格</p>
+                <div class="flex gap-1.5 flex-wrap">
+                  <div
+                    v-for="s in presetSkins"
+                    :key="s.id"
+                    @click="editorBaseSkin = s.id; onBaseSkinChange()"
+                    class="w-6 h-6 rounded-full cursor-pointer border-2 transition-all"
+                    :class="editorBaseSkin === s.id ? 'border-white scale-125' : 'border-transparent hover:scale-110'"
+                    :style="{ backgroundColor: s.preview }"
+                    :title="s.name"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 右侧：控制面板 -->
+            <div class="flex-1 overflow-y-auto p-5 space-y-5">
+              <!-- 背景与壁纸 -->
+              <div class="space-y-3">
+                <div class="flex items-center gap-2">
+                  <div class="w-1 h-4 rounded-full" :style="{ backgroundColor: getEditorColor('accent') }"></div>
+                  <p class="text-sm font-medium">背景与壁纸</p>
+                </div>
+                <div class="pl-3 space-y-3">
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch"><input type="color" :value="toHex(getEditorColor('bg'))" @input="setEditorColor('bg', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm">背景色</p>
+                      <p class="text-[11px] text-content-3">整个页面的底色，壁纸会覆盖在上面</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <button @click="pickEditorWallpaper" class="flex items-center gap-2 px-3 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition">
+                      <IconImage class="w-4 h-4" />
+                      {{ editorWallpaper ? '更换图片' : '选择壁纸图片' }}
+                    </button>
+                    <button v-if="editorWallpaper" @click="editorWallpaper = ''" class="px-3 py-2 bg-subtle hover:bg-danger/10 rounded-lg text-sm text-content-2 hover:text-danger transition">移除</button>
+                  </div>
+                  <template v-if="editorWallpaper">
+                    <div>
+                      <div class="flex justify-between mb-1">
+                        <span class="text-xs text-content-3">模糊</span>
+                        <span class="text-xs text-content-4">{{ editorWallpaperBlur }}px</span>
+                      </div>
+                      <input type="range" min="0" max="30" step="1" v-model.number="editorWallpaperBlur" class="w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-accent" />
+                    </div>
+                    <div>
+                      <div class="flex justify-between mb-1">
+                        <span class="text-xs text-content-3">透明度</span>
+                        <span class="text-xs text-content-4">{{ Math.round(editorWallpaperOpacity * 100) }}%</span>
+                      </div>
+                      <input type="range" min="0" max="100" step="5" :value="Math.round(editorWallpaperOpacity * 100)" @input="editorWallpaperOpacity = Number(($event.target as HTMLInputElement).value) / 100" class="w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-accent" />
+                    </div>
+                  </template>
+                </div>
+              </div>
+
+              <!-- 主题色 -->
+              <div class="space-y-3">
+                <div class="flex items-center gap-2">
+                  <div class="w-1 h-4 rounded-full" :style="{ backgroundColor: getEditorColor('accent') }"></div>
+                  <p class="text-sm font-medium">主题色</p>
+                </div>
+                <p class="text-[11px] text-content-3 pl-3">按钮、链接、高亮、播放图标等使用这个颜色</p>
+                <div class="pl-3 space-y-2">
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch"><input type="color" :value="toHex(getEditorColor('accent'))" @input="setEditorColor('accent', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm">主题色</p>
+                      <p class="text-[11px] text-content-3">按钮、进度条、选中状态</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch color-swatch-sm"><input type="color" :value="toHex(getEditorColor('accentDim'))" @input="setEditorColor('accentDim', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm text-content-2">主题色淡</p>
+                      <p class="text-[11px] text-content-3">选中项的背景、淡色高亮</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 文字颜色 -->
+              <div class="space-y-3">
+                <div class="flex items-center gap-2">
+                  <div class="w-1 h-4 rounded-full" :style="{ backgroundColor: getEditorColor('content') }"></div>
+                  <p class="text-sm font-medium">文字</p>
+                </div>
+                <div class="pl-3 space-y-2">
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch"><input type="color" :value="toHex(getEditorColor('content'))" @input="setEditorColor('content', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm">主要文字</p>
+                      <p class="text-[11px] text-content-3">标题、歌曲名等最重要的文字</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch color-swatch-sm"><input type="color" :value="toHex(getEditorColor('content2'))" @input="setEditorColor('content2', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm text-content-2">次要文字</p>
+                      <p class="text-[11px] text-content-3">歌手名、专辑名</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch color-swatch-sm"><input type="color" :value="toHex(getEditorColor('content3'))" @input="setEditorColor('content3', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm text-content-2">辅助文字</p>
+                      <p class="text-[11px] text-content-3">描述、时间、播放量等</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 表面与卡片 -->
+              <div class="space-y-3">
+                <div class="flex items-center gap-2">
+                  <div class="w-1 h-4 rounded-full" :style="{ backgroundColor: getEditorColor('surface') }"></div>
+                  <p class="text-sm font-medium">表面与卡片</p>
+                </div>
+                <p class="text-[11px] text-content-3 pl-3">侧栏、底栏、弹窗、歌曲卡片的背景色</p>
+                <div class="pl-3 space-y-2">
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch"><input type="color" :value="toHex(getEditorColor('surface'))" @input="setEditorColor('surface', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm">卡片背景</p>
+                      <p class="text-[11px] text-content-3">弹窗、侧栏、底栏的主色</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <label class="color-swatch color-swatch-sm"><input type="color" :value="toHex(getEditorColor('line'))" @input="setEditorColor('line', ($event.target as HTMLInputElement).value)" /></label>
+                    <div>
+                      <p class="text-sm text-content-2">分割线</p>
+                      <p class="text-[11px] text-content-3">卡片边框、区域之间的分隔</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 更多细节（折叠） -->
+              <div>
+                <button @click="showAdvancedEditor = !showAdvancedEditor" class="flex items-center gap-1.5 text-xs text-content-3 hover:text-content-2 transition">
+                  <svg class="w-3 h-3 transition-transform" :class="showAdvancedEditor ? 'rotate-90' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
+                  更多细节调整
+                </button>
+                <div v-if="showAdvancedEditor" class="mt-3 space-y-4 pl-1">
+                  <div>
+                    <p class="text-[11px] text-content-3 mb-1.5">悬停与交互</p>
+                    <div class="space-y-1.5">
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('subtle'))" @input="setEditorColor('subtle', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">微弱背景</span>
+                      </div>
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('muted'))" @input="setEditorColor('muted', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">悬停背景</span>
+                      </div>
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('emphasis'))" @input="setEditorColor('emphasis', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">强调背景</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <p class="text-[11px] text-content-3 mb-1.5">主题色变体</p>
+                    <div class="space-y-1.5">
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('accentHover'))" @input="setEditorColor('accentHover', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">按钮悬停</span>
+                      </div>
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('accentText'))" @input="setEditorColor('accentText', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">主题文字</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <p class="text-[11px] text-content-3 mb-1.5">功能色</p>
+                    <div class="space-y-1.5">
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('danger'))" @input="setEditorColor('danger', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">危险/错误</span>
+                      </div>
+                      <div class="flex items-center gap-3">
+                        <label class="color-swatch color-swatch-xs"><input type="color" :value="toHex(getEditorColor('warning'))" @input="setEditorColor('warning', ($event.target as HTMLInputElement).value)" /></label>
+                        <span class="text-xs text-content-2">警告</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底栏 -->
+          <div class="p-4 border-t border-line flex gap-3">
+            <button @click="showSkinEditor = false" class="flex-1 py-2.5 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">取消</button>
+            <button @click="handleSaveSkin" :disabled="!editorName.trim()" class="flex-1 py-2.5 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition disabled:opacity-50">{{ editingSkinId ? '保存修改' : '创建皮肤' }}</button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    </Teleport>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, reactive, watch } from 'vue';
-import { useSettingsStore, qualityLabels, closeActionLabels, defaultShortcuts, themeLabels, themeColors, appearanceLabels, type CloseAction } from '../stores/settings';
+import { useSettingsStore, qualityLabels, closeActionLabels, defaultShortcuts, type CloseAction } from '../stores/settings';
+import { presetSkins, getPresetSkin, type SkinColors } from '../skins';
+import { toHex } from '../utils/color';
 import { useToast } from '../composables/useToast';
 import { useUpdater } from '../composables/useUpdater';
-import { DeviceApi, DownloadApi } from '../api';
+import { DeviceApi, DownloadApi, AppApi } from '../api';
 import { getVersion } from '@tauri-apps/api/app';
 import { openUrl } from '@tauri-apps/plugin-opener';
 import { open } from '@tauri-apps/plugin-dialog';
 import CustomSelect from '../components/CustomSelect.vue';
+import PageHeader from '../components/PageHeader.vue';
 import IconX from '~icons/lucide/x';
 import IconFileText from '~icons/lucide/file-text';
 import IconLoader2 from '~icons/lucide/loader-2';
+import IconPalette from '~icons/lucide/palette';
 import IconSun from '~icons/lucide/sun';
 import IconMoon from '~icons/lucide/moon';
+import IconImage from '~icons/lucide/image';
 
 const settings = useSettingsStore();
 const { showToast } = useToast();
 const updater = useUpdater();
 
+// 主题色选项（7色，不分深浅）
+const themeColorOptions = [
+  { id: 'blue', name: '蓝', color: '#3b82f6' },
+  { id: 'green', name: '翠', color: '#22c55e' },
+  { id: 'rose', name: '红', color: '#f43f5e' },
+  { id: 'violet', name: '紫', color: '#8b5cf6' },
+  { id: 'orange', name: '橙', color: '#f97316' },
+  { id: 'cyan', name: '青', color: '#06b6d4' },
+  { id: 'pink', name: '粉', color: '#ec4899' },
+];
+
+// 从当前 skin id 解析出 appearance 和 themeColor
+const currentAppearance = computed(() => {
+  if (settings.skin.startsWith('light')) return 'light';
+  return 'dark';
+});
+
+const currentThemeColor = computed(() => {
+  const id = settings.skin;
+  if (id.startsWith('dark-')) return id.slice(5);
+  if (id.startsWith('light-')) return id.slice(6);
+  return 'blue'; // 自定义皮肤默认蓝
+});
+
+function toSkinId(color: string, appearance: 'dark' | 'light'): string {
+  return `${appearance}-${color}`;
+}
+
+// 壁纸路径转可访问 URL（通过 Rust 命令读取本地图片转 base64 data URL）
+const wallpaperCache = new Map<string, string>();
+const MAX_WALLPAPER_CACHE = 10;
+async function wallpaperSrc(path: string): Promise<string> {
+  if (!path) return '';
+  if (wallpaperCache.has(path)) return wallpaperCache.get(path)!;
+  try {
+    const dataUrl = await AppApi.readImageAsDataUrl(path);
+    if (wallpaperCache.size >= MAX_WALLPAPER_CACHE) {
+      const firstKey = wallpaperCache.keys().next().value;
+      if (firstKey !== undefined) wallpaperCache.delete(firstKey);
+    }
+    wallpaperCache.set(path, dataUrl);
+    return dataUrl;
+  } catch (e) {
+    console.error('加载壁纸预览失败:', e);
+    return '';
+  }
+}
+// 用于模板中同步绑定壁纸预览的响应式数据
+const editorWallpaperDataUrl = ref('');
+const skinWallpaperDataUrls = ref<Record<string, string>>({});
+
+async function loadEditorWallpaper() {
+  if (!editorWallpaper.value) {
+    editorWallpaperDataUrl.value = '';
+    return;
+  }
+  editorWallpaperDataUrl.value = await wallpaperSrc(editorWallpaper.value);
+}
+
+async function loadSkinWallpaperPreviews() {
+  for (const s of settings.customSkins) {
+    if (s.wallpaper && !skinWallpaperDataUrls.value[s.wallpaper]) {
+      const url = await wallpaperSrc(s.wallpaper);
+      if (url) skinWallpaperDataUrls.value[s.wallpaper] = url;
+    }
+  }
+}
+
+// 皮肤编辑器
+const showSkinEditor = ref(false);
+const showAdvancedEditor = ref(false);
+const editorName = ref('');
+const editorBaseSkin = ref('dark-blue');
+const editorColors = reactive<Partial<SkinColors>>({});
+const editorWallpaper = ref('');
+const editorWallpaperBlur = ref(10);
+const editorWallpaperOpacity = ref(0.3);
+/** 正在编辑的已有皮肤 id，为空则表示创建新皮肤 */
+const editingSkinId = ref<string | null>(null);
+
+function openSkinEditor(skinId?: string) {
+  if (skinId) {
+    // 编辑已有自定义皮肤
+    const existing = settings.customSkins.find(s => s.id === skinId);
+    if (!existing) return;
+    editingSkinId.value = skinId;
+    editorName.value = existing.name;
+    editorBaseSkin.value = 'dark-blue';
+    // 将已有颜色完整填入 editorColors
+    Object.keys(editorColors).forEach(k => delete editorColors[k as keyof SkinColors]);
+    for (const [key, value] of Object.entries(existing.colors)) {
+      (editorColors as any)[key] = value;
+    }
+    editorWallpaper.value = existing.wallpaper || '';
+    editorWallpaperBlur.value = existing.wallpaperBlur ?? 10;
+    editorWallpaperOpacity.value = existing.wallpaperOpacity ?? 0.3;
+  } else {
+    // 创建新皮肤：基于当前皮肤或默认
+    editingSkinId.value = null;
+    editorName.value = '';
+    const baseSkinId = settings.isPreset ? settings.skin : 'dark-blue';
+    editorBaseSkin.value = baseSkinId;
+    // 将基础皮肤颜色完整填入 editorColors
+    Object.keys(editorColors).forEach(k => delete editorColors[k as keyof SkinColors]);
+    const base = getPresetSkin(baseSkinId);
+    if (base) {
+      for (const [key, value] of Object.entries(base.colors)) {
+        (editorColors as any)[key] = value;
+      }
+    }
+    editorWallpaper.value = '';
+    editorWallpaperBlur.value = 10;
+    editorWallpaperOpacity.value = 0.3;
+  }
+  showSkinEditor.value = true;
+  loadEditorWallpaper();
+  loadSkinWallpaperPreviews();
+}
+
+function onBaseSkinChange() {
+  // 切换基础风格时，将该风格的完整颜色填入 editorColors
+  Object.keys(editorColors).forEach(k => delete editorColors[k as keyof SkinColors]);
+  const base = getPresetSkin(editorBaseSkin.value);
+  if (base) {
+    for (const [key, value] of Object.entries(base.colors)) {
+      (editorColors as any)[key] = value;
+    }
+  }
+}
+
+function getEditorColor(key: keyof SkinColors): string {
+  return editorColors[key] || '#000000';
+}
+
+function setEditorColor(key: keyof SkinColors, value: string) {
+  editorColors[key] = value;
+}
+
+function handleSaveSkin() {
+  if (!editorName.value.trim()) return;
+  // 确保颜色完整：缺失字段从基础皮肤补齐
+  const base = getPresetSkin(editorBaseSkin.value);
+  const baseColors = base ? base.colors : getPresetSkin('dark-blue')!.colors;
+  const colors = { ...baseColors } as SkinColors;
+  for (const key of Object.keys(editorColors) as (keyof SkinColors)[]) {
+    if (editorColors[key]) {
+      colors[key] = editorColors[key]!;
+    }
+  }
+
+  if (editingSkinId.value) {
+    settings.updateCustomSkin(editingSkinId.value, {
+      name: editorName.value.trim(),
+      preview: colors.accent,
+      colors,
+      wallpaper: editorWallpaper.value,
+      wallpaperBlur: editorWallpaperBlur.value,
+      wallpaperOpacity: editorWallpaperOpacity.value,
+    });
+    showSkinEditor.value = false;
+    showToast('皮肤已更新', 'success');
+  } else {
+    const id = `custom-${Date.now()}`;
+    settings.addCustomSkin({
+      id,
+      name: editorName.value.trim(),
+      preview: colors.accent,
+      colors,
+      wallpaper: editorWallpaper.value,
+      wallpaperBlur: editorWallpaperBlur.value,
+      wallpaperOpacity: editorWallpaperOpacity.value,
+    });
+    showSkinEditor.value = false;
+    showToast('自定义皮肤已创建', 'success');
+  }
+}
+
+function handleDeleteCustomSkin(id: string) {
+  settings.removeCustomSkin(id);
+  showToast('已删除自定义皮肤', 'success');
+}
+
+async function pickEditorWallpaper() {
+  const selected = await open({
+    multiple: false,
+    title: '选择壁纸图片',
+    filters: [{
+      name: '图片',
+      extensions: ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif'],
+    }],
+  });
+  if (selected) {
+    editorWallpaper.value = selected;
+    wallpaperCache.delete(selected);
+    loadEditorWallpaper();
+  }
+}
+
+
+// 监听编辑器壁纸变化
+watch(editorWallpaper, () => {
+  loadEditorWallpaper();
+});
+
+// 监听自定义皮肤列表变化，加载壁纸预览
+watch(() => settings.customSkins, () => {
+  loadSkinWallpaperPreviews();
+}, { deep: true });
+
 const devices = ref<string[]>([]);
 const deviceOptions = computed(() => {
   const options: Record<string, string> = { '': '跟随系统默认' };
@@ -450,3 +1059,50 @@ onBeforeUnmount(() => {
   window.removeEventListener('keydown', onRecordingKeydown, true);
 });
 </script>
+
+<style scoped>
+/* 颜色选择器：让 input[type=color] 填满外层 label，消除内部小方块 */
+.color-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  border: 1px solid var(--color-line);
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+}
+.color-swatch-sm {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+}
+.color-swatch-xs {
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+}
+.color-swatch input[type="color"] {
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  cursor: pointer;
+  background: transparent;
+}
+.color-swatch input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.color-swatch input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 0;
+}
+.color-swatch input[type="color"]::-moz-color-swatch {
+  border: none;
+}
+</style>