From 7847a9f6b2b728177bc9d8c30839dce382338bad Mon Sep 17 00:00:00 2001
From: Atdunbg <atdunbg@qq.com>
Date: Tue, 12 May 2026 09:58:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B7=A8=E5=B9=B3=E5=8F=B0=E6=8C=81?=
 =?UTF-8?q?=E4=B9=85=E5=8C=96=E4=B8=8E=E7=89=88=E6=9C=AC=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cookie 存储从 temp_dir 迁移至 Tauri app_data_dir，兼容 Linux
- 简单统一风格，UI优化
- recentLocal 播放历史持久化到 localStorage
- 添加设置界面可以修改简单的设置
---
 README.md                           |  82 +++++-
 src-tauri/capabilities/default.json |   1 +
 src-tauri/netease_cookies.json      |   1 -
 src-tauri/src/api.rs                | 165 +++++++++---
 src-tauri/src/lib.rs                |  32 ++-
 src-tauri/tauri.conf.json           |  10 +-
 src/App.vue                         | 376 +++++++++++++++++++++-------
 src/assets/app-icon.png             | Bin 0 -> 28066 bytes
 src/components/CustomSelect.vue     |  79 ++++++
 src/components/PlayerBar.vue        | 162 +++++-------
 src/components/ToastContainer.vue   |  60 +++++
 src/composables/UserLyric.ts        |   9 +-
 src/composables/useToast.ts         |  22 ++
 src/router/index.ts                 |   8 +-
 src/stores/player.ts                |  92 ++++++-
 src/stores/settings.ts              |  86 +++++++
 src/style.css                       | 133 +++++++++-
 src/utils/format.ts                 |  20 ++
 src/views/DailySongs.vue            |  60 +++--
 src/views/Discover.vue              |  20 +-
 src/views/FavoriteSongs.vue         |  84 ++++++-
 src/views/Home.vue                  | 143 +++++------
 src/views/Login.vue                 |  58 ++---
 src/views/PlaylistDetail.vue        | 137 +++++++---
 src/views/RecentPlays.vue           |  40 ++-
 src/views/Roam.vue                  |  53 +---
 src/views/Search.vue                |  30 +--
 src/views/Settings.vue              | 164 ++++++++++++
 28 files changed, 1592 insertions(+), 535 deletions(-)
 delete mode 100644 src-tauri/netease_cookies.json
 create mode 100644 src/assets/app-icon.png
 create mode 100644 src/components/CustomSelect.vue
 create mode 100644 src/components/ToastContainer.vue
 create mode 100644 src/composables/useToast.ts
 create mode 100644 src/stores/settings.ts
 create mode 100644 src/utils/format.ts
 create mode 100644 src/views/Settings.vue

diff --git a/README.md b/README.md
index 12920b6..316e3fc 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,81 @@
-# Tauri + Vue + TypeScript
+# Nekosonic
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+一款轻量的跨平台的音乐播放器，支持Windows/Linux系统，音源主要源自的网易云音乐。
 
-## Recommended IDE Setup
+## ✨ 特性
 
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+- 🔴 网易云账号登录（扫码）
+- 🎵 多音质播放（标准 / 较高 / 极高 / 无损 / Hi-Res）
+- 📻 私人漫游，沉浸式全屏歌词体验
+- ❤️ 一键喜欢 / 取消喜欢
+- 📋 歌单管理，收藏 / 取消收藏歌单
+- 📅 每日推荐歌曲
+- 🕐 本地播放历史记录
+- 🔍 关键词搜索歌曲
+- 🎤 实时滚动歌词
+- 🌚 Light / Dark Mode 主题切换
+- 🛠 更多特性添加中
+
+## 📦️ 安装
+
+访问本项目的 [Releases](https://gitea.atdunbg.xyz/atdunbg/Nekosonic-Music/releases) 页面下载安装包。
+
+
+## 💻 配置开发环境
+
+```bash
+# 安装前端依赖
+npm install
+
+# 启动开发服务器
+npm run tauri dev
+
+# 构建发布
+npm run tauri build
+```
+
+### 环境要求
+
+- Node.js >= 18
+- Rust >= 1.70
+- Tauri CLI 2
+
+## 🛠 技术栈
+
+| 层级 | 技术 |
+|------|------|
+| 桌面框架 | Tauri 2 |
+| 前端 | Vue 3 + TypeScript |
+| 样式 | Tailwind CSS v4 + CSS 变量主题系统 |
+| 状态管理 | Pinia |
+| 路由 | Vue Router 4 |
+| 音频播放 | rodio (Rust) |
+| 网易云 API | ncm-api-rs |
+| 构建工具 | Vite 6 |
+
+## ☑️ Todo
+
+- [ ] MV 播放
+- [ ] 音乐云盘
+- [ ] 评论系统
+- [ ] 下载功能
+- [ ] 自定义全局快捷键
+- [ ] 歌词翻译
+- [ ] 更多主题
+
+欢迎提 Issue 和 Pull request。
+
+## 📜 开源许可
+
+本项目仅供个人学习研究使用，禁止用于商业及非法用途。
+
+基于 [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 框架
+- [rodio](https://crates.io/crates/rodio) — Rust 音频播放库
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 8716753..d053c4a 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -10,6 +10,7 @@
     "core:window:allow-maximize",
     "core:window:allow-unmaximize",
     "core:window:allow-close",
+    "core:window:allow-hide",
     "core:window:allow-start-dragging",
     "core:window:allow-toggle-maximize"
   ]
diff --git a/src-tauri/netease_cookies.json b/src-tauri/netease_cookies.json
deleted file mode 100644
index 785f69f..0000000
--- a/src-tauri/netease_cookies.json
+++ /dev/null
@@ -1 +0,0 @@
-NMTID=00OvETy78e8ay9VhUTKgcUSdB6-yKQAAAGeAJacOg
\ No newline at end of file
diff --git a/src-tauri/src/api.rs b/src-tauri/src/api.rs
index 5639b4d..c6cfc0a 100644
--- a/src-tauri/src/api.rs
+++ b/src-tauri/src/api.rs
@@ -1,8 +1,9 @@
 use ncm_api_rs::{create_client, ApiClient, Query};
 use serde::Deserialize;
-use tauri::State;
-use tokio::sync::Mutex;          // 异步 Mutex
-use std::sync::Mutex as StdMutex; // 同步 Mutex 用于 cookie
+use tauri::{Manager, State};
+use tokio::sync::Mutex;
+use std::sync::Mutex as StdMutex;
+use std::sync::atomic::Ordering;
 
 use std::fs;
 use std::path::PathBuf;
@@ -10,13 +11,13 @@ use std::path::PathBuf;
 pub struct ApiController {
     client: Mutex<ApiClient>,
     cookie: StdMutex<Option<String>>,
-    cookie_path: PathBuf, 
+    cookie_path: PathBuf,
 }
 
 fn cookies_to_key_values(cookies: &[String]) -> String {
     cookies
         .iter()
-        .filter_map(|c| c.split(';').next())   // 取第一个键值对
+        .filter_map(|c| c.split(';').next())
         .map(|s| s.trim().to_string())
         .collect::<Vec<_>>()
         .join("; ")
@@ -24,14 +25,14 @@ fn cookies_to_key_values(cookies: &[String]) -> String {
 
 impl ApiController {
 
-    pub fn new() -> Self {
-    let cookie_path = std::env::temp_dir().join("netease_cookies.json");
+    pub fn new(app_data_dir: PathBuf) -> Self {
+    let _ = fs::create_dir_all(&app_data_dir);
+    let cookie_path = app_data_dir.join("netease_cookies.json");
     let saved_cookie = fs::read_to_string(&cookie_path)
         .map(|s| s.trim().to_string())
-        .ok();  // 注意这里返回 Option<String>
-    // eprintln!("[api] 启动时加载 cookie: {:?}", saved_cookie);
+        .ok();
 
-    let client = create_client(None); // 不依赖客户端存储，我们自己管理
+    let client = create_client(None);
     ApiController {
         client: Mutex::new(client),
         cookie: StdMutex::new(saved_cookie),
@@ -43,13 +44,11 @@ fn build_query(&self) -> Query {
     let mut query = Query::new();
     if let Ok(cookie_guard) = self.cookie.lock() {
         if let Some(c) = cookie_guard.as_ref() {
-            // eprintln!("[api] 请求携带 cookie: {}", c);
             query = query.cookie(c);
         }
     }
     query
 }
-    /// 保存 cookie 到文件
     fn save_cookie(&self, cookie_str: &str) {
         let _ = fs::write(&self.cookie_path, cookie_str);
     }
@@ -58,14 +57,13 @@ fn build_query(&self) -> Query {
 #[derive(Deserialize)]
 pub struct SearchQuery { pub keyword: String }
 
-
 #[derive(Deserialize)]
 pub struct LoginQuery { pub phone: String, pub password: String }
 
 #[derive(Deserialize)]
 pub struct QrKeyQuery { pub key: String }
 
-// 搜索歌曲
+/// 搜索歌曲
 #[tauri::command]
 pub async fn search_songs(query: SearchQuery, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -78,7 +76,7 @@ pub async fn search_songs(query: SearchQuery, state: State<'_, ApiController>) -
         .map_err(|e| e.to_string())
 }
 
-// 获取热搜词
+/// 获取热搜词列表
 #[tauri::command]
 pub async fn get_hot_search(state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -88,14 +86,33 @@ pub async fn get_hot_search(state: State<'_, ApiController>) -> Result<String, S
         .map_err(|e| e.to_string())
 }
 
+#[derive(Deserialize)]
+pub struct PlaylistTrackAllQuery { pub id: u64, pub limit: Option<i64>, pub offset: Option<i64> }
 
-// 获取歌曲链接
+/// 获取歌单全部歌曲
 #[tauri::command]
-pub async fn get_song_url(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
+pub async fn playlist_track_all(query: PlaylistTrackAllQuery, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
     let q = state.build_query()
-        .param("id", &id.to_string())
-        .param("level", "standard");
+        .param("id", &query.id.to_string())
+        .param("limit", &query.limit.unwrap_or(1000).to_string())
+        .param("offset", &query.offset.unwrap_or(0).to_string());
+    client.playlist_track_all(&q).await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string())
+}
+
+#[derive(Deserialize)]
+pub struct SongUrlQuery { pub id: u64, pub level: Option<String> }
+
+/// 获取歌曲播放地址
+#[tauri::command]
+pub async fn get_song_url(query: SongUrlQuery, state: State<'_, ApiController>) -> Result<String, String> {
+    let client = state.client.lock().await;
+    let level = query.level.as_deref().unwrap_or("standard");
+    let q = state.build_query()
+        .param("id", &query.id.to_string())
+        .param("level", level);
     let resp = client.song_url_v1(&q).await.map_err(|e| e.to_string())?;
     resp.body["data"][0]["url"].as_str()
         .filter(|s| !s.is_empty())
@@ -103,8 +120,7 @@ pub async fn get_song_url(id: u64, state: State<'_, ApiController>) -> Result<St
         .ok_or_else(|| "暂无播放源".into())
 }
 
-
-// 获取歌词
+/// 获取歌词
 #[tauri::command]
 pub async fn get_lyric(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -114,8 +130,7 @@ pub async fn get_lyric(id: u64, state: State<'_, ApiController>) -> Result<Strin
         .map_err(|e| e.to_string())
 }
 
-
-// 获取歌单详情
+/// 获取歌单详情
 #[tauri::command]
 pub async fn get_playlist_detail(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -125,7 +140,7 @@ pub async fn get_playlist_detail(id: u64, state: State<'_, ApiController>) -> Re
         .map_err(|e| e.to_string())
 }
 
-// 登录
+/// 手机号密码登录
 #[tauri::command]
 pub async fn login(query: LoginQuery, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -143,17 +158,15 @@ pub async fn login(query: LoginQuery, state: State<'_, ApiController>) -> Result
     Ok(resp.body.to_string())
 }
 
-// 登出
+/// 退出登录
 #[tauri::command]
 pub async fn logout(state: State<'_, ApiController>) -> Result<(), String> {
-    // 清除内存中的 cookie
     *state.cookie.lock().map_err(|e| e.to_string())? = None;
-    // 删除持久化文件
     let _ = fs::remove_file(&state.cookie_path);
     Ok(())
 }
 
-// 获取二维码key
+/// 获取二维码登录密钥
 #[tauri::command]
 pub async fn get_qr_key(state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -165,7 +178,7 @@ pub async fn get_qr_key(state: State<'_, ApiController>) -> Result<String, Strin
         .ok_or_else(|| "缺少 unikey".into())
 }
 
-// 创建二维码, 功能暂时有问题
+/// 生成二维码图片
 #[tauri::command]
 pub async fn create_qr(
     query: QrKeyQuery,
@@ -177,7 +190,6 @@ pub async fn create_qr(
         .param("key", &query.key)
         .param("qrimg", "true");
     let resp = client.login_qr_create(&q).await.map_err(|e| e.to_string())?;
-    // 提取 qrurl 字段（网易云新的返回格式）
     let qrurl = resp.body["data"]["qrurl"]
         .as_str()
         .ok_or("未获取到二维码链接")?
@@ -185,7 +197,7 @@ pub async fn create_qr(
     Ok(qrurl)
 }
 
-// 检查二维码状态
+/// 检查二维码扫码状态
 #[tauri::command]
 pub async fn check_qr_status(query: QrKeyQuery, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -199,7 +211,7 @@ pub async fn check_qr_status(query: QrKeyQuery, state: State<'_, ApiController>)
     Ok(resp.body.to_string())
 }
 
-// 获取登录状态
+/// 获取当前登录状态
 #[tauri::command]
 pub async fn get_login_status(state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -209,7 +221,7 @@ pub async fn get_login_status(state: State<'_, ApiController>) -> Result<String,
         .map_err(|e| e.to_string())
 }
 
-// 用户歌单
+/// 获取用户歌单列表
 #[tauri::command]
 pub async fn user_playlist(uid: u64, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -218,7 +230,7 @@ pub async fn user_playlist(uid: u64, state: State<'_, ApiController>) -> Result<
     Ok(resp.body.to_string())
 }
 
-// 每日推荐歌曲
+/// 获取每日推荐歌曲
 #[tauri::command]
 pub async fn recommend_songs(state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -227,7 +239,7 @@ pub async fn recommend_songs(state: State<'_, ApiController>) -> Result<String,
     Ok(resp.body.to_string())
 }
 
-// 推荐歌单（需要登录）
+/// 获取推荐歌单
 #[tauri::command]
 pub async fn recommend_resource(state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -236,6 +248,7 @@ pub async fn recommend_resource(state: State<'_, ApiController>) -> Result<Strin
     Ok(resp.body.to_string())
 }
 
+/// 获取私人漫游歌曲
 #[tauri::command]
 pub async fn personal_fm(state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
@@ -244,10 +257,86 @@ pub async fn personal_fm(state: State<'_, ApiController>) -> Result<String, Stri
     Ok(resp.body.to_string())
 }
 
+/// 获取歌曲详情
 #[tauri::command]
-pub async fn get_song_detail(id: u64, state: State<'_, ApiController>) -> Result<String, String> {
+pub async fn get_song_detail(id: String, state: State<'_, ApiController>) -> Result<String, String> {
     let client = state.client.lock().await;
-    let q = state.build_query().param("ids", &id.to_string());
+    let q = state.build_query().param("ids", &id);
     let resp = client.song_detail(&q).await.map_err(|e| e.to_string())?;
     Ok(resp.body.to_string())
-}
\ No newline at end of file
+}
+
+#[derive(Deserialize)]
+pub struct UserRecordQuery { pub uid: u64, pub r#type: String }
+
+#[derive(Deserialize)]
+pub struct LikeSongQuery { pub id: u64, pub like: String }
+
+/// 获取喜欢的歌曲ID列表
+#[tauri::command]
+pub async fn likelist(uid: u64, state: State<'_, ApiController>) -> Result<String, String> {
+    let client = state.client.lock().await;
+    let q = state.build_query().param("uid", &uid.to_string());
+    client.likelist(&q).await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string())
+}
+
+/// 获取用户播放记录
+#[tauri::command]
+pub async fn user_record(query: UserRecordQuery, state: State<'_, ApiController>) -> Result<String, String> {
+    let client = state.client.lock().await;
+    let q = state.build_query()
+        .param("uid", &query.uid.to_string())
+        .param("type", &query.r#type);
+    client.user_record(&q).await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string())
+}
+
+/// 喜欢/取消喜欢歌曲
+#[tauri::command]
+pub async fn like_song(query: LikeSongQuery, state: State<'_, ApiController>) -> Result<String, String> {
+    let client = state.client.lock().await;
+    let q = state.build_query()
+        .param("id", &query.id.to_string())
+        .param("like", &query.like);
+    client.like(&q).await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string())
+}
+
+/// 上报最近播放歌曲
+#[tauri::command]
+pub async fn record_recent_song(limit: u64, state: State<'_, ApiController>) -> Result<String, String> {
+    let client = state.client.lock().await;
+    let q = state.build_query().param("limit", &limit.to_string());
+    client.record_recent_song(&q).await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string())
+}
+
+#[derive(Deserialize)]
+pub struct PlaylistSubscribeQuery { pub id: u64, pub subscribe: Option<bool> }
+
+/// 收藏/取消收藏歌单
+#[tauri::command]
+pub async fn playlist_subscribe(query: PlaylistSubscribeQuery, state: State<'_, ApiController>) -> Result<String, String> {
+    let client = state.client.lock().await;
+    let t = if query.subscribe.unwrap_or(true) { "1" } else { "0" };
+    let q = state.build_query()
+        .param("id", &query.id.to_string())
+        .param("t", t);
+    client.playlist_subscribe(&q).await
+        .map(|r| r.body.to_string())
+        .map_err(|e| e.to_string())
+}
+
+/// 退出应用
+#[tauri::command]
+pub async fn exit_app(app_handle: tauri::AppHandle) {
+    crate::ALLOW_EXIT.store(true, Ordering::SeqCst);
+    if let Some(window) = app_handle.get_webview_window("main") {
+        let _ = window.close();
+    }
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 9f4b096..4513876 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,24 +1,25 @@
 use tauri::{
     tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
     menu::{MenuBuilder, MenuItemBuilder},
-    Manager, LogicalSize, Emitter,
+    Manager, Emitter,
 };
+use std::sync::atomic::{AtomicBool, Ordering};
 
 mod api;
 mod audio;
 use api::ApiController;
 use audio::AppAudio;
 
+static ALLOW_EXIT: AtomicBool = AtomicBool::new(false);
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
         .setup(|app| {
-            let window = app.get_webview_window("main").unwrap();
-            // 窗口最小尺寸
-            window.set_min_size(Some(LogicalSize::new(1280.0, 700.0)))?;
 
             // 注入控制器
-            let api_controller = ApiController::new();
+            let app_data_dir = app.path().app_data_dir().expect("无法获取应用数据目录");
+            let api_controller = ApiController::new(app_data_dir);
             app.manage(api_controller);
 
             let audio_controller = audio::AudioController::new(app.handle().clone());
@@ -66,7 +67,10 @@ pub fn run() {
                             let _ = app.emit("tray-prev", ());
                         }
                         "quit" => {
-                            app.exit(0);
+                            ALLOW_EXIT.store(true, Ordering::SeqCst);
+                            if let Some(w) = app.get_webview_window("main") {
+                                let _ = w.close();
+                            }
                         }
                         _ => {}
                     }
@@ -87,11 +91,15 @@ pub fn run() {
                 .build(app)?;
 
             // 点击关闭按钮时隐藏到托盘
+            let window = app.get_webview_window("main").unwrap();
             let window_clone = window.clone();
             window.on_window_event(move |event| {
                 if let tauri::WindowEvent::CloseRequested { api: close_api, .. } = event {
-                    close_api.prevent_close();          // 阻止窗口关闭
-                    let _ = window_clone.hide();        // 隐藏到托盘
+                    if ALLOW_EXIT.load(Ordering::SeqCst) {
+                        return;
+                    }
+                    close_api.prevent_close();
+                    let _ = window_clone.hide();
                 }
             });
 
@@ -115,6 +123,13 @@ pub fn run() {
             api::create_qr,
             api::check_qr_status,
             api::get_login_status,
+            api::likelist,
+            api::user_record,
+            api::like_song,
+            api::record_recent_song,
+            api::playlist_subscribe,
+            api::playlist_track_all,
+            api::exit_app,
 
             audio::play_audio,
             audio::pause_audio,
@@ -125,6 +140,7 @@ pub fn run() {
             audio::seek_audio,
             audio::set_volume
         ])
+        .plugin(tauri_plugin_opener::init())
         .run(tauri::generate_context!())
         .expect("error while running Nekosonic");
 }
\ No newline at end of file
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f081523..7138b46 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Nekosonic",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "identifier": "com.atdunbg.Nekosonic",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -13,10 +13,10 @@
     "windows": [
       {
         "title": "Nekosonic",
-        "width": 1200,
-        "height": 700,
-        "minWidth": 1200,
-        "minHeight": 700,
+        "width": 1100,
+        "height": 680,
+        "minWidth": 900,
+        "minHeight": 600,
         "resizable": true,
         "decorations": false
       }
diff --git a/src/App.vue b/src/App.vue
index 8690c91..44ce203 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,112 +1,121 @@
 <template>
-  <div class="flex flex-col h-screen bg-gray-950 text-white overflow-hidden">
-    <!-- ========= 自定义标题栏（可拖拽、无边框） ========= -->
+  <div class="flex flex-col h-screen bg-base text-content overflow-hidden">
     <div
       data-tauri-drag-region
-      class="h-10 flex items-center justify-between px-4 bg-gray-900/90 backdrop-blur select-none flex-shrink-0"
+      class="h-10 flex items-center justify-between px-4 bg-surface/90 backdrop-blur select-none flex-shrink-0"
     >
-      <span class="text-xs text-gray-400 font-medium ml-2">Nekosonic Music</span>
+      <span class="text-xs text-content-3 font-medium ml-2">Nekosonic Music</span>
       <div class="flex items-center gap-1.5">
-        <!-- 最小化 -->
         <button @click="minimizeWindow" class="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-400 transition" title="最小化"></button>
-        <!-- 最大化 / 还原 -->
         <button @click="toggleMaximize" class="w-3 h-3 rounded-full bg-green-500 hover:bg-green-400 transition" title="最大化/还原"></button>
-        <!-- 关闭 -->
         <button @click="closeWindow" class="w-3 h-3 rounded-full bg-red-500 hover:bg-red-400 transition" title="关闭"></button>
       </div>
     </div>
 
-    <!-- 主体内容区 -->
     <div class="flex flex-1 overflow-hidden">
-      <!-- 左侧导航（无边框） -->
-      <nav class="w-56 flex-shrink-0 flex flex-col bg-gray-900/80 backdrop-blur">
-        <div class="flex-1 p-4 overflow-y-auto pb-24 flex flex-col">
-          <!-- 推荐 & 发现 -->
+      <nav class="w-56 flex-shrink-0 flex flex-col bg-surface/80 backdrop-blur">
+        <div class="flex-1 p-4 overflow-y-auto min-h-0">
+          <div class="flex flex-col min-h-full">
+          <div class="relative mb-4">
+            <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-content-3" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+            <input v-model="searchQuery" @keydown.enter="doSearch" type="text" placeholder="搜索音乐..."
+              class="w-full rounded-lg bg-subtle pl-9 pr-3 py-2 text-sm text-content placeholder-content-3 outline-none focus:bg-muted transition" />
+          </div>
           <div class="space-y-0.5">
             <router-link to="/"
-              class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-white/60 hover:text-white hover:bg-white/5"
-              active-class="!text-white !bg-white/10">
-              <span>🏠</span> 推荐
-            </router-link>
-            <router-link to="/discover"
-              class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-white/60 hover:text-white hover:bg-white/5"
-              active-class="!text-white !bg-white/10">
-              <span>🔍</span> 发现
+              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">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l9-9 9 9"/><path d="M5 10v10a1 1 0 001 1h3v-6h6v6h3a1 1 0 001-1V10"/></svg>
+              推荐
             </router-link>
             <button
               @click="openRoamFromSidebar"
-              class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 text-white/60 hover:text-white hover:bg-white/5 w-full text-left"
+              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 w-full text-left"
             >
-              <span>🌀</span> 漫游
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>
+              漫游
             </button>
           </div>
 
-          <!-- 我的 -->
           <div class="mt-4 mb-1 pt-2">
-            <p class="text-xs text-gray-500 px-3 mb-1">我的</p>
-            <router-link to="/favorites"
-              class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm text-white/60 hover:text-white hover:bg-white/5 transition">
-              <span>❤️</span> 我喜欢的音乐
-            </router-link>
-            <router-link to="/recent"
-              class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm text-white/60 hover:text-white hover:bg-white/5 transition">
-              <span>🕐</span> 最近播放
-            </router-link>
+            <p class="text-xs text-content-3 px-3 mb-1">我的</p>
+            <div class="space-y-0.5">
+              <router-link to="/favorites"
+                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">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+                我喜欢的音乐
+              </router-link>
+              <router-link to="/recent"
+                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">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+                最近播放
+              </router-link>
+            </div>
           </div>
 
-          <!-- 创建的歌单（可折叠） -->
           <div class="mt-4 mb-1 pt-2" v-if="userStore.isLoggedIn">
             <div class="flex items-center justify-between px-3 mb-1 cursor-pointer"
               @click="showCreatedPlaylists = !showCreatedPlaylists">
-              <p class="text-xs text-gray-500">我的歌单</p>
-              <span class="text-xs text-gray-500 transition-transform"
+              <p class="text-xs text-content-3">我的歌单</p>
+              <span class="text-xs text-content-3 transition-transform"
                 :class="{ 'rotate-90': showCreatedPlaylists }">▶</span>
             </div>
             <div v-show="showCreatedPlaylists" class="space-y-0.5">
               <div v-for="pl in createdPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
-                class="px-3 py-1.5 rounded-lg text-sm text-white/60 hover:text-white hover:bg-white/5 cursor-pointer truncate transition">
+                class="px-3 py-1.5 rounded-lg text-sm cursor-pointer truncate transition-all duration-200"
+                :class="isPlaylistActive(pl.id) ? 'text-content bg-muted' : 'text-content-2 hover:text-content hover:bg-subtle'">
                 {{ pl.name }}
               </div>
             </div>
           </div>
 
-          <!-- 收藏的歌单（可折叠） -->
           <div class="mt-4 mb-1 pt-2" v-if="userStore.isLoggedIn">
             <div class="flex items-center justify-between px-3 mb-1 cursor-pointer"
               @click="showSubPlaylists = !showSubPlaylists">
-              <p class="text-xs text-gray-500">收藏的歌单</p>
-              <span class="text-xs text-gray-500 transition-transform" :class="{ 'rotate-90': showSubPlaylists }">▶</span>
+              <p class="text-xs text-content-3">收藏的歌单</p>
+              <span class="text-xs text-content-3 transition-transform" :class="{ 'rotate-90': showSubPlaylists }">▶</span>
             </div>
             <div v-show="showSubPlaylists" class="space-y-0.5">
               <div v-for="pl in subPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
-                class="px-3 py-1.5 rounded-lg text-sm text-white/60 hover:text-white hover:bg-white/5 cursor-pointer truncate transition">
+                class="px-3 py-1.5 rounded-lg text-sm cursor-pointer truncate transition-all duration-200"
+                :class="isPlaylistActive(pl.id) ? 'text-content bg-muted' : 'text-content-2 hover:text-content hover:bg-subtle'">
                 {{ pl.name }}
               </div>
             </div>
           </div>
 
-          <!-- 用户区域 -->
-          <div class="mt-auto pt-4">
-            <div v-if="!userStore.isLoggedIn" class="px-2 space-y-2">
-              <p class="text-xs text-gray-500">登录后享受个人歌单</p>
-              <router-link to="/login"
-                class="flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 transition text-sm font-medium text-green-400">
-                <span>🔑</span> 立即登录
+          <div class="mt-auto pt-4" :class="player.currentSong ? 'pb-20' : 'pb-2'">
+            <div class="px-1">
+              <router-link to="/settings"
+                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">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+                设置
               </router-link>
             </div>
-            <div v-else class="flex items-center gap-3 px-2">
-              <img :src="userStore.user?.avatarUrl" class="w-8 h-8 rounded-full ring-2 ring-green-400/50" />
+            <div v-if="!userStore.isLoggedIn" class="mt-3 p-3 rounded-xl bg-subtle/60">
+              <p class="text-xs text-content-3 mb-2">强烈建议登录以提升体验</p>
+              <router-link to="/login"
+                class="flex items-center justify-center gap-2 w-full px-4 py-2 rounded-lg bg-accent hover:bg-accent-hover transition text-sm font-medium text-white">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+                立即登录
+              </router-link>
+            </div>
+            <div v-else class="flex items-center gap-3 px-2 mt-3">
+              <img :src="userStore.user?.avatarUrl" class="w-8 h-8 rounded-full ring-2 ring-accent/50" />
               <div class="min-w-0">
                 <p class="text-sm font-medium truncate">{{ userStore.user?.nickname }}</p>
                 <button @click="userStore.logout()"
-                  class="text-xs text-gray-500 hover:text-red-400 transition">退出登录</button>
+                  class="text-xs text-content-3 hover:text-danger transition">退出登录</button>
               </div>
             </div>
           </div>
+          </div>
         </div>
       </nav>
 
-      <!-- 主内容区 -->
       <main class="flex-1 overflow-y-auto pb-24">
         <router-view v-slot="{ Component }">
           <keep-alive :max="3" include="HomeView,DiscoverView">
@@ -116,86 +125,206 @@
       </main>
     </div>
 
-    <!-- 全屏漫游抽屉 -->
     <Transition name="drawer">
       <div
         v-if="player.showRoamDrawer"
         class="fixed inset-0 z-50 flex flex-col backdrop-blur-xl bg-black/80"
       >
-        <div class="h-16 flex items-center px-6 flex-shrink-0">
-          <button @click="player.closeRoamDrawer()" class="text-white/80 hover:text-white transition">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+        <div class="h-10 flex items-center justify-between px-4 flex-shrink-0" data-tauri-drag-region>
+          <button @click="player.closeRoamDrawer()" class="text-content-2 hover:text-content transition">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
           </button>
+          <div class="flex items-center gap-1.5">
+            <button @click="minimizeWindow" class="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-400 transition" title="最小化"></button>
+            <button @click="toggleMaximize" class="w-3 h-3 rounded-full bg-green-500 hover:bg-green-400 transition" title="最大化/还原"></button>
+            <button @click="closeWindow" class="w-3 h-3 rounded-full bg-red-500 hover:bg-red-400 transition" title="关闭"></button>
+          </div>
         </div>
-        <div class="flex-1 min-h-0 flex px-8 pb-8">
-          <div class="flex-shrink-0 mr-12 flex flex-col items-center self-center">
+        <div class="flex-1 min-h-0 flex px-8 pb-8 gap-0">
+          <div class="w-2/5 flex flex-col items-center justify-center flex-shrink-0">
             <img
               :src="roamSong?.al?.picUrl || roamSong?.album?.picUrl"
               class="w-72 h-72 rounded-3xl object-cover shadow-2xl mb-4"
             />
-            <h1 class="text-2xl font-bold text-white">{{ roamSong?.name }}</h1>
-            <p class="text-gray-400 mt-2">{{ roamArtists }}</p>
+            <h1 class="text-2xl font-bold text-white text-center">{{ roamSong?.name }}</h1>
+            <p class="text-content-2 mt-2 text-center">{{ roamArtists }}</p>
           </div>
-          <div 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 space-y-3 py-8">
-              <p
-                v-for="(line, idx) in lyrics"
-                :key="idx"
-                :class="idx === currentLyricIdx ? 'text-green-400 font-medium text-lg transition' : 'text-gray-400 text-base'"
-              >
-                {{ line.text }}
-              </p>
+          <div class="w-3/5 relative min-h-0 overflow-hidden flex flex-col">
+            <div ref="lyricScrollContainer" class="h-full 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 transition-all duration-300"
+                  @click="seekToRoamLyric(line.time)"
+                  @mouseenter="roamLyricHovering = true"
+                  @mouseleave="roamLyricHovering = false"
+                >
+                  {{ line.text }}
+                </p>
+              </div>
+              <div v-else class="text-content-3 text-center mt-8">暂无歌词</div>
             </div>
-            <div v-else class="text-gray-500 text-center mt-8">暂无歌词</div>
           </div>
         </div>
       </div>
     </Transition>
 
-    <!-- 底部播放栏 -->
-    <PlayerBar />
+    <PlayerBar v-if="player.currentSong" />
+    <ToastContainer />
+
+    <Transition name="fade">
+      <div v-if="showCloseModal" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showCloseModal = 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>
+          <div class="space-y-2.5 mb-4">
+            <button @click="handleCloseAction('minimize')"
+              class="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-subtle hover:bg-muted transition text-left">
+              <div class="w-9 h-9 rounded-lg bg-accent-dim flex items-center justify-center flex-shrink-0">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/></svg>
+              </div>
+              <div>
+                <p class="text-sm font-medium text-content">最小化到托盘</p>
+                <p class="text-xs text-content-3">程序继续在后台运行</p>
+              </div>
+            </button>
+            <button @click="handleCloseAction('exit')"
+              class="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-subtle hover:bg-muted transition text-left">
+              <div class="w-9 h-9 rounded-lg bg-danger-dim flex items-center justify-center flex-shrink-0">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-danger"><path d="M18 6L6 18M6 6l12 12"/></svg>
+              </div>
+              <div>
+                <p class="text-sm font-medium text-content">退出程序</p>
+                <p class="text-xs text-content-3">完全关闭应用程序</p>
+              </div>
+            </button>
+          </div>
+          <label class="flex items-center gap-2 cursor-pointer mb-4 select-none">
+            <input type="checkbox" v-model="closeDontAskAgain" />
+            <span class="text-xs text-content-2">不再询问，记住我的选择</span>
+          </label>
+          <button @click="showCloseModal = false"
+            class="w-full py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
+            取消
+          </button>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
 import { useUserStore } from './stores/user';
+import { useSettingsStore, type CloseAction } from './stores/settings';
 import PlayerBar from './components/PlayerBar.vue';
+import ToastContainer from './components/ToastContainer.vue';
 import { usePlayerStore } from './stores/player';
 import { useLyric } from './composables/UserLyric';
 import { getCurrentWindow } from '@tauri-apps/api/window';
+import { listen } from '@tauri-apps/api/event';
 
 const router = useRouter();
+const route = useRoute();
 const userStore = useUserStore();
 const player = usePlayerStore();
+const settings = useSettingsStore();
 
 const createdPlaylists = ref<any[]>([]);
 const subPlaylists = ref<any[]>([]);
 const showCreatedPlaylists = ref(true);
 const showSubPlaylists = ref(true);
+const searchQuery = ref('');
+const showCloseModal = ref(false);
+const closeDontAskAgain = ref(false);
+
+watch(() => settings.theme, (val) => {
+  document.documentElement.setAttribute('data-theme', val);
+}, { immediate: true });
+
+function doSearch() {
+  const q = searchQuery.value.trim();
+  if (q) router.push({ path: '/discover', query: { q } });
+}
 
-// 歌词
 const { lyrics, currentLyricIdx } = useLyric();
 const lyricScrollContainer = ref<HTMLElement | null>(null);
+const roamLyricHovering = ref(false);
+const roamLyricPadPx = ref(0);
 const roamSong = computed(() => player.currentSong);
+let roamResizeObserver: ResizeObserver | null = null;
+
+function updateRoamLyricPad() {
+  if (lyricScrollContainer.value) {
+    roamLyricPadPx.value = Math.floor(lyricScrollContainer.value.clientHeight / 2);
+  }
+}
+
+watch(() => player.showRoamDrawer, (val) => {
+  if (val) {
+    nextTick(() => {
+      updateRoamLyricPad();
+      if (roamResizeObserver) roamResizeObserver.disconnect();
+      if (lyricScrollContainer.value) {
+        roamResizeObserver = new ResizeObserver(() => updateRoamLyricPad());
+        roamResizeObserver.observe(lyricScrollContainer.value);
+      }
+      scrollToRoamActiveLyric();
+    });
+  } else {
+    if (roamResizeObserver) {
+      roamResizeObserver.disconnect();
+      roamResizeObserver = null;
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (roamResizeObserver) {
+    roamResizeObserver.disconnect();
+    roamResizeObserver = null;
+  }
+});
 const roamArtists = computed(() => {
   if (!roamSong.value) return '';
   return roamSong.value.ar?.map((a: any) => a.name).join(' / ') || '';
 });
 
 watch(currentLyricIdx, () => {
-  if (player.showRoamDrawer && lyricScrollContainer.value) {
-    nextTick(() => {
-      const active = lyricScrollContainer.value?.querySelector('.text-green-400');
-      active?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    });
+  if (player.showRoamDrawer && !roamLyricHovering.value) {
+    nextTick(() => scrollToRoamActiveLyric());
   }
 });
 
+function scrollToRoamActiveLyric() {
+  if (!lyricScrollContainer.value || roamLyricHovering.value) return;
+  const active = lyricScrollContainer.value.querySelector('.roam-lyric-active') as HTMLElement | null;
+  if (active) {
+    active.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+}
+
+function getRoamLyricClass(idx: number): string {
+  const diff = Math.abs(idx - currentLyricIdx.value);
+  if (idx === currentLyricIdx.value) {
+    return 'roam-lyric-active text-accent-text font-semibold text-xl';
+  }
+  if (diff === 1) return 'text-content/70 text-lg';
+  if (diff === 2) return 'text-content-2/50 text-base';
+  return 'text-content-3/35 text-base';
+}
+
+function seekToRoamLyric(time: number) {
+  if (time != null && player.duration > 0) {
+    player.seek(time);
+  }
+}
+
 async function openRoamFromSidebar() {
   if (player.isFmMode) {
     player.openRoamDrawer();
@@ -209,7 +338,7 @@ async function loadPlaylists() {
   try {
     const jsonStr: string = await invoke('user_playlist', { uid: userStore.user.userId });
     const data = JSON.parse(jsonStr);
-    createdPlaylists.value = (data.playlist || []).filter((p: any) => !p.subscribed);
+    createdPlaylists.value = (data.playlist || []).filter((p: any) => !p.subscribed).slice(1);
     subPlaylists.value = (data.playlist || []).filter((p: any) => p.subscribed);
   } catch (e) { /* 忽略 */ }
 }
@@ -218,12 +347,22 @@ function goPlaylist(id: number) {
   router.push({ name: 'playlist', params: { id } });
 }
 
+function isPlaylistActive(id: number): boolean {
+  return route.name === 'playlist' && Number(route.params.id) === id;
+}
+
 watch(() => userStore.isLoggedIn, (val) => {
-  if (val) loadPlaylists();
+  if (val) {
+    loadPlaylists();
+    player.loadLikedIds();
+  }
 });
 
 onMounted(async () => {
-  if (userStore.isLoggedIn) loadPlaylists();
+  if (userStore.isLoggedIn) {
+    loadPlaylists();
+    player.loadLikedIds();
+  }
   try { await invoke('stop_audio'); } catch {}
   try {
     const jsonStr: string = await invoke('get_login_status');
@@ -239,21 +378,37 @@ onMounted(async () => {
   } catch {}
 });
 
-// ---------- 窗口控制 ----------
 const currentWindow = getCurrentWindow();
 function minimizeWindow() { currentWindow.minimize(); }
 async function toggleMaximize() {
   const isMaximized = await currentWindow.isMaximized();
   if (isMaximized) { currentWindow.unmaximize(); } else { currentWindow.maximize(); }
 }
-function closeWindow() { currentWindow.close(); }
-
-
-import { listen } from '@tauri-apps/api/event';
+function closeWindow() {
+  if (settings.closeAction === 'ask') {
+    closeDontAskAgain.value = false;
+    showCloseModal.value = true;
+  } else if (settings.closeAction === 'minimize') {
+    currentWindow.hide();
+  } else {
+    invoke('exit_app');
+  }
+}
+function handleCloseAction(action: CloseAction) {
+  if (closeDontAskAgain.value) {
+    settings.setCloseAction(action);
+  }
+  showCloseModal.value = false;
+  if (action === 'minimize') {
+    currentWindow.hide();
+  } else {
+    invoke('exit_app');
+  }
+}
 
 onMounted(() => {
   const unlisten1 = listen('tray-play-pause', () => {
-    player.toggle(); // 假设 player 是 usePlayerStore 的实例
+    player.toggle();
   });
   const unlisten2 = listen('tray-next', () => {
     player.next();
@@ -262,14 +417,35 @@ onMounted(() => {
     player.prev();
   });
 
-  // 在组件卸载时取消监听
-onBeforeUnmount(() => {
+  onBeforeUnmount(() => {
     unlisten1.then(fn => fn());
     unlisten2.then(fn => fn());
     unlisten3.then(fn => fn());
   });
 });
 
+onMounted(() => {
+  function onKeydown(e: KeyboardEvent) {
+    const el = e.target as HTMLElement;
+    const isEditable = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable;
+    if (e.code === 'Space' && !isEditable) {
+      e.preventDefault();
+      player.toggle();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.code === 'ArrowRight') {
+      e.preventDefault();
+      player.next();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.code === 'ArrowLeft') {
+      e.preventDefault();
+      player.prev();
+    }
+  }
+  window.addEventListener('keydown', onKeydown);
+  onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onKeydown);
+  });
+});
 </script>
 
 <style>
@@ -277,9 +453,17 @@ onBeforeUnmount(() => {
 .drawer-leave-active { transition: transform 0.3s ease; }
 .drawer-enter-from,
 .drawer-leave-to { transform: translateY(100%); }
-.custom-scroll::-webkit-scrollbar { width: 4px; }
-.custom-scroll::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 2px;
+.fade-enter-active,
+.fade-leave-active { transition: opacity 0.2s ease; }
+.fade-enter-from,
+.fade-leave-to { opacity: 0; }
+.custom-scroll::-webkit-scrollbar { width: 0; display: none; }
+.roam-lyric-line:hover {
+  background: var(--c-subtle);
+  color: var(--c-content) !important;
 }
-</style>
\ No newline at end of file
+.roam-lyric-active:hover {
+  background: var(--c-subtle) !important;
+  color: var(--c-content) !important;
+}
+</style>
diff --git a/src/assets/app-icon.png b/src/assets/app-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a65c08eacb496df7a82d5dba5cfac4b9d02bb62
GIT binary patch
literal 28066
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
Bp>6;G

literal 0
HcmV?d00001

diff --git a/src/components/CustomSelect.vue b/src/components/CustomSelect.vue
new file mode 100644
index 0000000..5f19352
--- /dev/null
+++ b/src/components/CustomSelect.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="relative" ref="container">
+    <button
+      @click="toggle"
+      class="flex items-center justify-between bg-subtle border border-line rounded-lg px-3 py-1.5 text-sm text-content outline-none transition min-w-[140px] hover:border-content-3 focus:border-accent focus:shadow-[0_0_0_2px_var(--c-accent-dim)]"
+      :class="{ 'border-accent shadow-[0_0_0_2px_var(--c-accent-dim)]': isOpen }"
+    >
+      <span>{{ currentLabel }}</span>
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform flex-shrink-0 ml-2" :class="{ 'rotate-180': isOpen }"><polyline points="6 9 12 15 18 9"/></svg>
+    </button>
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="absolute right-0 top-full mt-1 bg-surface border border-line rounded-lg shadow-xl z-50 py-1 min-w-full overflow-hidden">
+        <button
+          v-for="(label, key) in options"
+          :key="key"
+          @click="select(key)"
+          class="w-full text-left px-3 py-2 text-sm transition flex items-center justify-between"
+          :class="modelValue === key ? 'bg-accent-dim text-accent-text' : 'text-content-2 hover:bg-subtle hover:text-content'"
+        >
+          <span>{{ label }}</span>
+          <svg v-if="modelValue === key" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps<{
+  modelValue: string;
+  options: Record<string, string>;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const isOpen = ref(false);
+const container = ref<HTMLElement | null>(null);
+
+const currentLabel = computed(() => props.options[props.modelValue] || '');
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+function select(key: string) {
+  emit('update:modelValue', key);
+  isOpen.value = false;
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (container.value && !container.value.contains(e.target as Node)) {
+    isOpen.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside);
+});
+</script>
+
+<style scoped>
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.15s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/src/components/PlayerBar.vue b/src/components/PlayerBar.vue
index 5e213ec..f4d9d63 100644
--- a/src/components/PlayerBar.vue
+++ b/src/components/PlayerBar.vue
@@ -1,52 +1,44 @@
 <template>
-  <div v-if="player.currentSong"
-    class="fixed bottom-0 left-0 right-0 bg-gray-900/95 backdrop-blur border-t border-white/10 z-50 select-none">
-    <!-- 歌词精简条（仅在非漫游全屏时显示） -->
-    <div v-if="currentLyricText && !player.showRoamDrawer" @click="showFullLyric = !showFullLyric"
-      class="px-6 py-1 text-center text-xs text-green-200/80 cursor-pointer hover:bg-white/5 transition truncate">
-      {{ currentLyricText }}
-    </div>
+  <div
+    class="fixed bottom-0 left-0 right-0 bg-surface/95 backdrop-blur border-t border-line z-50 select-none">
 
-    <!-- 进度条 -->
-    <div ref="progressBar" class="w-full h-1.5 bg-white/10 rounded-full relative group cursor-pointer overflow-visible"
+    <div ref="progressBar" class="w-full h-1.5 bg-muted rounded-full relative group cursor-pointer overflow-visible"
       @mousedown.prevent="startSeek">
-      <!-- 缓存进度（灰白） -->
-      <div class="absolute left-0 top-0 h-full bg-white/20 rounded-full" :style="{ width: cacheProgress + '%' }"></div>
-      <!-- 播放进度（绿色渐变） -->
-      <div class="absolute left-0 top-0 h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full"
+      <div class="absolute left-0 top-0 h-full bg-emphasis rounded-full" :style="{ width: cacheProgress + '%' }"></div>
+      <div class="absolute left-0 top-0 h-full bg-accent rounded-full"
         :style="{ width: displayProgress + '%' }"></div>
-      <!-- 拖动圆点（基于容器定位，left 百分比） -->
       <div
         class="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full bg-white shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
         :style="{ left: `calc(${displayProgress}% - 7px)` }"></div>
     </div>
 
-    <!-- 主控制区 -->
     <div class="flex items-center px-6 h-16">
-      <!-- 左侧：歌曲信息 -->
       <div class="flex items-center gap-3 w-56 min-w-0">
-        <img :src="player.currentSong.al?.picUrl"
+        <img :src="player.currentSong?.al?.picUrl"
           class="w-10 h-10 rounded-md object-cover flex-shrink-0 cursor-pointer hover:scale-105 transition-transform"
-          @click="player.openRoamDrawer()" title="全屏展示" />
-        <div class="min-w-0">
-          <p class="text-sm font-medium truncate">{{ player.currentSong.name }}</p>
-          <p class="text-xs text-gray-400 truncate">
-            {{player.currentSong.ar?.map((a: any) => a.name).join('/')}}
+          @click="player.toggleRoamDrawer()" title="全屏展示" />
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium truncate">{{ player.currentSong?.name }}</p>
+          <p class="text-xs text-content-2 truncate">
+            {{player.currentSong?.ar?.map((a: any) => a.name).join('/')}}
           </p>
         </div>
+        <button @click="player.currentSong && player.toggleLike(player.currentSong.id)" class="flex-shrink-0 transition" :class="player.currentSong && player.isLiked(player.currentSong.id) ? 'text-danger' : 'text-content-3 hover:text-danger'">
+          <svg v-if="player.currentSong && player.isLiked(player.currentSong.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        </button>
       </div>
 
-      <!-- 中间：控制按钮 + 时间 -->
       <div class="flex-1 flex flex-col items-center justify-center gap-1">
         <div class="flex items-center gap-5">
           <button @click="player.prev()" :disabled="player.isFmMode" :class="[
-            'text-xl transition',
-            player.isFmMode ? 'text-gray-600 cursor-not-allowed' : 'text-gray-400 hover:text-white',
+            'transition',
+            player.isFmMode ? 'text-content-4 cursor-not-allowed' : 'text-content-2 hover:text-content',
           ]">
-            ⏮
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
           </button>
           <button @click="player.toggle()"
-            class="w-9 h-9 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition border border-white/20">
+            class="w-9 h-9 flex items-center justify-center rounded-full bg-muted hover:bg-emphasis transition border border-emphasis">
             <svg v-if="player.playing" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"
               class="text-white">
               <rect x="3" y="2" width="3" height="12" rx="0.5" />
@@ -56,112 +48,93 @@
               <path d="M4 2.5v11l9-5.5z" />
             </svg>
           </button>
-          <button @click="player.next()" class="text-xl text-gray-400 hover:text-white transition">⏭</button>
+          <button @click="player.next()" class="text-content-2 hover:text-content transition">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
+          </button>
         </div>
-        <div class="flex items-center gap-2 text-xs text-gray-400">
+        <div class="flex items-center gap-2 text-xs text-content-2">
           <span>{{ formatTime(player.currentTime) }}</span>
           <span>/</span>
           <span>{{ formatTime(player.duration) }}</span>
         </div>
       </div>
 
-      <!-- 右侧：音量、模式、播放列表 -->
       <div class="w-56 flex justify-end items-center gap-2">
         <div class="flex items-center gap-1">
-          <span class="text-sm text-gray-400">🔊</span>
-          <div class="relative w-24 h-6 flex items-center">
+          <button @click="toggleMute" class="text-content-2 hover:text-content transition">
+            <svg v-if="volume === 0" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
+            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"/></svg>
+          </button>
+          <div class="relative w-20 h-6 flex items-center">
             <input ref="volumeSlider" type="range" min="0" max="100" :value="volume"
               :style="{ background: volumeBarBg }" @input="handleVolumeChange"
-              class="vol-slider w-full h-1.5 rounded-full appearance-none cursor-pointer bg-white/20 outline-none" />
+              class="vol-slider w-full h-1.5 rounded-full appearance-none cursor-pointer bg-emphasis outline-none" />
           </div>
         </div>
-        <button @click="togglePlayMode" class="text-gray-400 hover:text-white transition text-lg" :title="modeTitle">
-          {{ modeIcon }}
+        <button @click="togglePlayMode" class="text-content-2 hover:text-content transition" :title="modeTitle">
+          <svg v-if="player.playMode === 'loop'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
+          <svg v-else-if="player.playMode === 'shuffle'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+          <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/><text x="11" y="15" font-size="8" fill="currentColor" stroke="none" font-weight="bold">1</text></svg>
         </button>
         <button @click="showQueuePanel = !showQueuePanel"
-          class="text-gray-400 hover:text-white transition text-xl relative" title="播放列表">
-          📋
+          class="text-content-2 hover:text-content transition relative" title="播放列表">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
           <span v-if="player.queue.length > 0"
-            class="absolute -top-1 -right-1 bg-green-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
+            class="absolute -top-1 -right-1 bg-accent text-content text-xs rounded-full w-4 h-4 flex items-center justify-center">
             {{ player.queue.length }}
           </span>
         </button>
       </div>
     </div>
 
-    <!-- 队列面板 -->
     <Transition name="slide-up">
       <div v-if="showQueuePanel"
-        class="border-t border-white/10 bg-gray-900/95 backdrop-blur p-4 max-h-64 overflow-y-auto">
+        class="border-t border-line bg-surface/95 backdrop-blur p-4 max-h-64 overflow-y-auto">
         <div class="flex justify-between items-center mb-3">
           <h3 class="text-sm font-semibold">播放列表 ({{ player.queue.length }})</h3>
-          <button @click="player.clearQueue()" class="text-xs text-red-400 hover:text-red-300 transition">清空</button>
+          <button @click="player.clearQueue()" class="text-xs text-danger hover:text-danger transition">清空</button>
         </div>
         <div class="space-y-1">
           <div v-for="(song, idx) in player.queue" :key="song.id + '-' + idx" @click="playFromQueue(idx)" :class="[
             'flex items-center gap-3 p-2 rounded-lg cursor-pointer transition',
-            idx === player.currentIndex ? 'bg-green-500/20 text-white' : 'hover:bg-white/5 text-gray-300',
+            idx === player.currentIndex ? 'bg-accent-dim text-content' : 'hover:bg-subtle text-content-2',
           ]">
             <span class="text-xs w-6 text-center">{{ idx + 1 }}</span>
             <div class="flex-1 min-w-0">
               <p class="text-xs font-medium truncate">{{ song.name }}</p>
-              <p class="text-xs text-gray-500 truncate">
+              <p class="text-xs text-content-3 truncate">
                 {{song.ar?.map((a: any) => a.name).join('/')}}
               </p>
             </div>
             <button @click.stop="player.removeFromQueue(idx)"
-              class="text-gray-500 hover:text-red-400 transition text-sm">
-              ✕
+              class="text-content-3 hover:text-danger transition text-sm">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
         </div>
       </div>
     </Transition>
-
-    <!-- 全屏歌词浮层 -->
-    <Transition name="slide-up">
-      <div v-if="showFullLyric && lyrics.length > 0 && !player.showRoamDrawer"
-        class="border-t border-white/10 bg-gray-900/95 backdrop-blur p-4 max-h-72 overflow-hidden flex flex-col"
-        @click.self="showFullLyric = false">
-        <div class="flex justify-between mb-2">
-          <h3 class="text-xs font-semibold">歌词</h3>
-          <button @click="showFullLyric = false" class="text-gray-400 hover:text-white">收起</button>
-        </div>
-        <div ref="lyricContainer"
-          class="flex-1 overflow-y-auto overflow-x-hidden whitespace-normal break-words space-y-1 text-sm text-center">
-          <p v-for="(line, idx) in lyrics" :key="idx" :class="idx === currentLyricIdx
-              ? 'text-green-400 font-medium scale-105 transition'
-              : 'text-gray-400'
-            " class="px-4 py-0.5">
-            {{ line.text }}
-          </p>
-        </div>
-      </div>
-    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onBeforeUnmount, watch, onMounted } from 'vue';
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
 import { usePlayerStore, PlayMode } from '../stores/player';
+import { formatTime } from '../utils/format';
 import { invoke } from '@tauri-apps/api/core';
-import { useLyric } from '../composables/UserLyric';
 import { listen } from '@tauri-apps/api/event';
 
 const player = usePlayerStore();
 const showQueuePanel = ref(false);
-const { lyrics, currentLyricIdx, currentLyricText } = useLyric();
-const showFullLyric = ref(false);
-const lyricContainer = ref<HTMLElement | null>(null);
 const progressBar = ref<HTMLElement | null>(null);
 const isSeeking = ref(false);
 const previewTime = ref(0);
 const cacheProgress = ref(0);
 const volume = ref(100);
+const prevVolume = ref(100);
 
 let unlistenCache: (() => void) | null = null;
 
-// 缓存进度监听
 onMounted(async () => {
   const fn = await listen<number>('cache-progress', (event) => {
     cacheProgress.value = event.payload;
@@ -172,10 +145,7 @@ onBeforeUnmount(() => {
   if (unlistenCache) unlistenCache();
 });
 
-// 播放模式
 const modeTexts = { loop: '列表循环', shuffle: '随机播放', 'repeat-one': '单曲循环' };
-const modeIcons = { loop: '🔁', shuffle: '🔀', 'repeat-one': '🔂' };
-const modeIcon = computed(() => modeIcons[player.playMode] || '🔁');
 const modeTitle = computed(() => modeTexts[player.playMode] || '列表循环');
 function togglePlayMode() {
   const modes: PlayMode[] = ['loop', 'shuffle', 'repeat-one'];
@@ -183,7 +153,16 @@ function togglePlayMode() {
   player.setPlayMode(next);
 }
 
-// 进度条拖拽逻辑
+function toggleMute() {
+  if (volume.value > 0) {
+    prevVolume.value = volume.value;
+    volume.value = 0;
+  } else {
+    volume.value = prevVolume.value || 100;
+  }
+  invoke('set_volume', { vol: volume.value / 100 });
+}
+
 let onDocMove: ((e: MouseEvent) => void) | null = null;
 let onDocUp: (() => void) | null = null;
 
@@ -234,13 +213,6 @@ const displayProgress = computed(() => {
   return isSeeking.value ? previewPercent.value : progressPercent.value;
 });
 
-function formatTime(sec: number): string {
-  if (!sec || isNaN(sec)) return '0:00';
-  const m = Math.floor(sec / 60);
-  const s = Math.floor(sec % 60);
-  return `${m}:${s.toString().padStart(2, '0')}`;
-}
-
 function playFromQueue(index: number) {
   player.currentIndex = index;
   player.playCurrent();
@@ -255,25 +227,11 @@ async function handleVolumeChange(e: Event) {
 
 const volumeBarBg = computed(() => {
   const pct = volume.value;
-  return `linear-gradient(to right, #34d399 0%, #10b981 ${pct}%, rgba(255,255,255,0.15) ${pct}%)`;
+  return `linear-gradient(to right, var(--c-accent) 0%, var(--c-accent) ${pct}%, var(--c-muted) ${pct}%)`;
 });
-
-// 歌词浮层自动滚动
-watch(
-  () => currentLyricIdx.value,
-  () => {
-    if (showFullLyric.value && lyricContainer.value) {
-      nextTick(() => {
-        const active = lyricContainer.value?.querySelector('.text-green-400');
-        active?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      });
-    }
-  }
-);
 </script>
 
 <style scoped>
-/* 样式保持不变（原有歌词浮层过渡、滑块样式等） */
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: all 0.2s ease;
@@ -300,9 +258,9 @@ watch(
   height: 6px;
   border-radius: 3px;
   background: linear-gradient(to right,
-      #34d399 0%,
-      #10b981 var(--vol-fill),
-      rgba(255, 255, 255, 0.15) var(--vol-fill));
+      var(--c-accent) 0%,
+      var(--c-accent) var(--vol-fill),
+      var(--c-muted) var(--vol-fill));
 }
 
 .vol-slider::-webkit-slider-thumb {
@@ -321,4 +279,4 @@ watch(
 .vol-slider::-webkit-slider-thumb:hover {
   transform: scale(1.2);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ToastContainer.vue b/src/components/ToastContainer.vue
new file mode 100644
index 0000000..956021b
--- /dev/null
+++ b/src/components/ToastContainer.vue
@@ -0,0 +1,60 @@
+<template>
+  <TransitionGroup name="toast" tag="div" class="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
+    <div
+      v-for="toast in toasts"
+      :key="toast.id"
+      @click="dismiss(toast.id)"
+      class="pointer-events-auto min-w-[280px] max-w-[400px] px-4 py-3 rounded-lg shadow-lg bg-surface/95 backdrop-blur cursor-pointer border-l-4"
+      :class="borderClass(toast.type)"
+    >
+      <p class="text-sm font-medium" :class="textClass(toast.type)">{{ toast.message }}</p>
+    </div>
+  </TransitionGroup>
+</template>
+
+<script setup lang="ts">
+import { useToast, type Toast } from '../composables/useToast';
+
+const { toasts } = useToast();
+
+function borderClass(type: Toast['type']) {
+  return {
+    success: 'border-accent',
+    error: 'border-danger',
+    info: 'border-info',
+  }[type];
+}
+
+function textClass(type: Toast['type']) {
+  return {
+    success: 'text-accent-text',
+    error: 'text-danger',
+    info: 'text-info',
+  }[type];
+}
+
+function dismiss(id: number) {
+  const idx = toasts.value.findIndex(t => t.id === id);
+  if (idx !== -1) toasts.value.splice(idx, 1);
+}
+</script>
+
+<style scoped>
+.toast-enter-active {
+  transition: all 0.3s ease-out;
+}
+.toast-leave-active {
+  transition: all 0.2s ease-in;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-move {
+  transition: transform 0.3s ease;
+}
+</style>
diff --git a/src/composables/UserLyric.ts b/src/composables/UserLyric.ts
index bb4ff0e..ca15e15 100644
--- a/src/composables/UserLyric.ts
+++ b/src/composables/UserLyric.ts
@@ -1,4 +1,4 @@
-import { ref, computed, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
 import { parseLrc, getCurrentLyricIndex, LyricLine } from '../utils/lyric';
 import { usePlayerStore } from '../stores/player';
@@ -9,12 +9,6 @@ export function useLyric() {
   const lyrics = ref<LyricLine[]>([]);
   const currentLyricIdx = ref(-1);
 
-  const currentLyricText = computed(() => {
-    if (lyrics.value.length === 0) return '';
-    const idx = currentLyricIdx.value;
-    return idx >= 0 && idx < lyrics.value.length ? lyrics.value[idx].text : '';
-  });
-
   watch(() => player.currentSong, async (song) => {
     if (!song) {
       lyrics.value = [];
@@ -43,6 +37,5 @@ export function useLyric() {
   return {
     lyrics,
     currentLyricIdx,
-    currentLyricText,
   };
 }
\ No newline at end of file
diff --git a/src/composables/useToast.ts b/src/composables/useToast.ts
new file mode 100644
index 0000000..0dba215
--- /dev/null
+++ b/src/composables/useToast.ts
@@ -0,0 +1,22 @@
+import { ref } from 'vue';
+
+export interface Toast {
+  id: number;
+  message: string;
+  type: 'success' | 'error' | 'info';
+}
+
+const toasts = ref<Toast[]>([]);
+let nextId = 0;
+
+export function showToast(message: string, type: 'success' | 'error' | 'info' = 'info', duration = 3000) {
+  const id = nextId++;
+  toasts.value.push({ id, message, type });
+  setTimeout(() => {
+    toasts.value = toasts.value.filter(t => t.id !== id);
+  }, duration);
+}
+
+export function useToast() {
+  return { toasts, showToast };
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 32d647b..67134d6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,18 +6,20 @@ 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 Settings from '@/views/Settings.vue';
 
 
 const routes = [
   { path: '/', name: 'home', component: Home },
   { path: '/discover', name: 'discover', component: Discover },
-  { path: '/search', name: 'search', component: Discover }, // 同样指向Discover，保留兼容
-  { path: '/roam', name: 'roam', component: () => import('@/views/Roam.vue') }, // 漫游页面
+  { path: '/search', name: 'search', component: Discover },
+  { path: '/roam', name: 'roam', component: () => import('@/views/Roam.vue') },
   { path: '/favorites', name: 'favorites', component: FavoriteSongs },
   { path: '/recent', name: 'recent', component: RecentPlays },
-  { path: '/daily', name: 'daily', component: DailySongs }, // 每日推荐
+  { path: '/daily', name: 'daily', component: DailySongs },
   { path: '/login', name: 'login', component: Login },
   { path: '/playlist/:id', name: 'playlist', component: PlaylistDetail },
+  { path: '/settings', name: 'settings', component: Settings },
 ];
 
 export default createRouter({
diff --git a/src/stores/player.ts b/src/stores/player.ts
index 2d27359..2bcab6b 100644
--- a/src/stores/player.ts
+++ b/src/stores/player.ts
@@ -2,8 +2,9 @@ import { defineStore } from 'pinia';
 import { ref , watch } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
 import { normalizeSong } from '../utils/song';
+import { useSettingsStore } from './settings';
+import { useUserStore } from './user';
 
-// 设置播放模式，目前只有顺序循环，后续可扩展
 export type PlayMode = 'loop' | 'shuffle' | 'repeat-one';
 
 export interface Song {
@@ -33,6 +34,22 @@ export function setupCacheProgressListener() {
 // 在 store 定义外调用 setupCacheProgressListener()，或者在应用入口调用
 
 
+function loadRecentLocal(): Song[] {
+  try {
+    const raw = localStorage.getItem('recent_local');
+    if (raw) return JSON.parse(raw);
+  } catch {}
+  return [];
+}
+
+function loadLikedIdsFromStorage(): Set<number> {
+  try {
+    const raw = localStorage.getItem('liked_ids');
+    if (raw) return new Set(JSON.parse(raw));
+  } catch {}
+  return new Set();
+}
+
 export const usePlayerStore = defineStore('player', () => {
   const currentSong = ref<Song | null>(null);
   const playing = ref(false);
@@ -44,6 +61,56 @@ export const usePlayerStore = defineStore('player', () => {
 
   let tickInterval: ReturnType<typeof setInterval> | null = null;
 
+  const recentLocal = ref<Song[]>(loadRecentLocal());
+  const MAX_RECENT = 200;
+
+  const likedIds = ref<Set<number>>(loadLikedIdsFromStorage());
+
+  function isLiked(songId: number): boolean {
+    return likedIds.value.has(songId);
+  }
+
+  async function loadLikedIds() {
+    const userStore = useUserStore();
+    if (!userStore.isLoggedIn) return;
+    try {
+      const json: string = await invoke('likelist', { uid: userStore.user!.userId });
+      const data = JSON.parse(json);
+      const ids: number[] = data.ids || data.data?.ids || [];
+      likedIds.value = new Set(ids);
+    } catch { /* 忽略 */ }
+  }
+
+  async function toggleLike(songId: number) {
+    const wasLiked = likedIds.value.has(songId);
+    const newLike = !wasLiked;
+    try {
+      await invoke('like_song', { query: { id: songId, like: newLike ? 'true' : 'false' } });
+      if (newLike) {
+        likedIds.value.add(songId);
+      } else {
+        likedIds.value.delete(songId);
+      }
+      likedIds.value = new Set(likedIds.value);
+    } catch { /* 忽略 */ }
+  }
+
+  function addRecent(song: Song) {
+    recentLocal.value = recentLocal.value.filter(s => s.id !== song.id);
+    recentLocal.value.unshift(song);
+    if (recentLocal.value.length > MAX_RECENT) {
+      recentLocal.value = recentLocal.value.slice(0, MAX_RECENT);
+    }
+  }
+
+  watch(recentLocal, (val) => {
+    localStorage.setItem('recent_local', JSON.stringify(val));
+  }, { deep: true });
+
+  watch(likedIds, (val) => {
+    localStorage.setItem('liked_ids', JSON.stringify([...val]));
+  }, { deep: true });
+
   const isFmMode = ref(false);
   let fmNextCallback: (() => void) | null = null;
 
@@ -62,7 +129,7 @@ export const usePlayerStore = defineStore('player', () => {
     // 如果缺少时长，尝试从详情接口获取
     if (!song.dt || song.dt === 0) {
       try {
-        const jsonStr: string = await invoke('get_song_detail', { id: Number(song.id) });
+        const jsonStr: string = await invoke('get_song_detail', { id: String(song.id) });
         const data = JSON.parse(jsonStr);
         const full = data.songs?.[0];
         if (full) {
@@ -80,13 +147,15 @@ export const usePlayerStore = defineStore('player', () => {
 
     currentSong.value = song;
     try {
-      const url: string = await invoke('get_song_url', { id: Number(song.id) });
+      const settings = useSettingsStore();
+      const url: string = await invoke('get_song_url', { query: { id: Number(song.id), level: settings.audioQuality } });
       if (!url) throw new Error('无播放源');
       await invoke('play_audio', { url });
       playing.value = true;
       duration.value = (song.dt || 0) / 1000;
       currentTime.value = 0;
       startTick();
+      addRecent(song);
     } catch (e) {
       console.error('FM播放失败', e);
       playing.value = false;
@@ -122,8 +191,8 @@ export const usePlayerStore = defineStore('player', () => {
       currentTime.value = 0;
       duration.value = (song.dt || 0) / 1000;
 
-      // 获取 URL 并播放
-      const url: string = await invoke('get_song_url', { id: Number(song.id) });
+      const settings = useSettingsStore();
+      const url: string = await invoke('get_song_url', { query: { id: Number(song.id), level: settings.audioQuality } });
       if (!url) {
         console.error('未获取到有效播放地址', song);
         return;
@@ -132,6 +201,7 @@ export const usePlayerStore = defineStore('player', () => {
       await invoke('play_audio', { url });
       playing.value = true;
       startTick();
+      addRecent(song);
     } catch (e) {
       console.error('播放失败', e);
       playing.value = false;
@@ -279,6 +349,10 @@ export const usePlayerStore = defineStore('player', () => {
     showRoamDrawer.value = false;
   }
 
+  function toggleRoamDrawer() {
+    showRoamDrawer.value = !showRoamDrawer.value;
+  }
+
   async function loadFirstFmSong() {
   try {
     const jsonStr: string = await invoke('personal_fm');
@@ -388,9 +462,17 @@ watch(playing, (val) => {
     removeFromQueue,
     clearQueue,
 
+    recentLocal,
+
+    likedIds,
+    isLiked,
+    loadLikedIds,
+    toggleLike,
+
     showRoamDrawer,
     openRoamDrawer,
     closeRoamDrawer,
+    toggleRoamDrawer,
     loadFirstFmSong,
 
     fmSong,
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
new file mode 100644
index 0000000..12719ec
--- /dev/null
+++ b/src/stores/settings.ts
@@ -0,0 +1,86 @@
+import { defineStore } from 'pinia';
+import { ref, watch } from 'vue';
+
+export type AudioQuality = 'standard' | 'higher' | 'exhigh' | 'lossless' | 'hires';
+export type ThemeMode = 'dark' | 'light';
+export type CloseAction = 'ask' | 'minimize' | 'exit';
+
+export const qualityLabels: Record<AudioQuality, string> = {
+  standard: '标准',
+  higher: '较高',
+  exhigh: '极高 (HQ)',
+  lossless: '无损 (SQ)',
+  hires: 'Hi-Res',
+};
+
+export const closeActionLabels: Record<CloseAction, string> = {
+  ask: '每次询问',
+  minimize: '最小化到托盘',
+  exit: '直接退出',
+};
+
+interface SettingsData {
+  audioQuality: AudioQuality;
+  downloadPath: string;
+  theme: ThemeMode;
+  closeAction: CloseAction;
+}
+
+function loadSettings(): SettingsData {
+  try {
+    const raw = localStorage.getItem('app_settings');
+    if (raw) return JSON.parse(raw);
+  } catch {}
+  return {
+    audioQuality: 'standard',
+    downloadPath: '',
+    theme: 'dark',
+    closeAction: 'ask',
+  };
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  const saved = loadSettings();
+
+  const audioQuality = ref<AudioQuality>(saved.audioQuality);
+  const downloadPath = ref<string>(saved.downloadPath);
+  const theme = ref<ThemeMode>(saved.theme);
+  const closeAction = ref<CloseAction>(saved.closeAction || 'ask');
+
+  function setAudioQuality(q: AudioQuality) {
+    audioQuality.value = q;
+  }
+
+  function setDownloadPath(p: string) {
+    downloadPath.value = p;
+  }
+
+  function setTheme(t: ThemeMode) {
+    theme.value = t;
+  }
+
+  function setCloseAction(a: CloseAction) {
+    closeAction.value = a;
+  }
+
+  watch([audioQuality, downloadPath, theme, closeAction], () => {
+    const data: SettingsData = {
+      audioQuality: audioQuality.value,
+      downloadPath: downloadPath.value,
+      theme: theme.value,
+      closeAction: closeAction.value,
+    };
+    localStorage.setItem('app_settings', JSON.stringify(data));
+  }, { deep: true });
+
+  return {
+    audioQuality,
+    downloadPath,
+    theme,
+    closeAction,
+    setAudioQuality,
+    setDownloadPath,
+    setTheme,
+    setCloseAction,
+  };
+});
diff --git a/src/style.css b/src/style.css
index 77c08af..193f667 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,14 +1,74 @@
 @import "tailwindcss";
 
+@theme {
+  --color-base: var(--c-bg);
+  --color-surface: var(--c-surface);
+  --color-subtle: var(--c-subtle);
+  --color-muted: var(--c-muted);
+  --color-emphasis: var(--c-emphasis);
+  --color-content: var(--c-content);
+  --color-content-2: var(--c-content-2);
+  --color-content-3: var(--c-content-3);
+  --color-content-4: var(--c-content-4);
+  --color-line: var(--c-line);
+  --color-line-2: var(--c-line-2);
+  --color-accent: var(--c-accent);
+  --color-accent-hover: var(--c-accent-hover);
+  --color-accent-text: var(--c-accent-text);
+  --color-accent-dim: var(--c-accent-dim);
+  --color-danger: var(--c-danger);
+  --color-danger-dim: var(--c-danger-dim);
+  --color-warning: var(--c-warning);
+  --color-info: var(--c-info);
+}
+
 @layer base {
   :root {
-    --color-surface: 255 255 255;
-    --color-primary: 34 197 94;
+    --c-bg: #030712;
+    --c-surface: #111827;
+    --c-subtle: rgba(255, 255, 255, 0.05);
+    --c-muted: rgba(255, 255, 255, 0.10);
+    --c-emphasis: rgba(255, 255, 255, 0.18);
+    --c-content: #ffffff;
+    --c-content-2: #9ca3af;
+    --c-content-3: #6b7280;
+    --c-content-4: #4b5563;
+    --c-line: rgba(255, 255, 255, 0.10);
+    --c-line-2: rgba(255, 255, 255, 0.05);
+    --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="light"] {
+    --c-bg: #f3f4f6;
+    --c-surface: #ffffff;
+    --c-subtle: rgba(0, 0, 0, 0.04);
+    --c-muted: rgba(0, 0, 0, 0.08);
+    --c-emphasis: rgba(0, 0, 0, 0.12);
+    --c-content: #111827;
+    --c-content-2: #4b5563;
+    --c-content-3: #6b7280;
+    --c-content-4: #9ca3af;
+    --c-line: rgba(0, 0, 0, 0.10);
+    --c-line-2: rgba(0, 0, 0, 0.05);
+    --c-accent: #16a34a;
+    --c-accent-hover: #15803d;
+    --c-accent-text: #16a34a;
+    --c-accent-dim: rgba(22, 163, 74, 0.15);
+    --c-danger: #dc2626;
+    --c-danger-dim: rgba(220, 38, 38, 0.15);
+    --c-warning: #ca8a04;
+    --c-info: #2563eb;
   }
 
-  /* 确保 html 也应用暗色背景，防止空白区域 */
   html {
-    background: #0f172a;
+    background: var(--c-bg);
     overflow: hidden;
     height: 100%;
     overscroll-behavior: none;
@@ -17,17 +77,14 @@
   body {
     @apply antialiased;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
-    /* 关键：锁住 body，彻底消除整体拖动 */
+    background: var(--c-bg);
     position: fixed;
     inset: 0;
     overflow: hidden;
     overscroll-behavior: none;
-    /* 阻止触控板手势触发页面导航 */
     touch-action: none;
   }
 
-  /* 自定义滚动条保持不变 */
   ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
@@ -36,10 +93,64 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: var(--c-muted);
     border-radius: 3px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: var(--c-emphasis);
   }
-}
\ No newline at end of file
+
+  select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    padding-right: 30px;
+    cursor: pointer;
+  }
+
+  select:focus {
+    border-color: var(--c-accent);
+    box-shadow: 0 0 0 2px var(--c-accent-dim);
+  }
+
+  select option {
+    background: var(--c-surface);
+    color: var(--c-content);
+    padding: 8px;
+  }
+
+  input[type="checkbox"] {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--c-emphasis);
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+  }
+
+  input[type="checkbox"]:hover {
+    border-color: var(--c-accent);
+  }
+
+  input[type="checkbox"]:checked {
+    background: var(--c-accent);
+    border-color: var(--c-accent);
+  }
+
+  input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+}
diff --git a/src/utils/format.ts b/src/utils/format.ts
new file mode 100644
index 0000000..1a4725d
--- /dev/null
+++ b/src/utils/format.ts
@@ -0,0 +1,20 @@
+export function formatDuration(ms: number): string {
+  const sec = Math.floor(ms / 1000);
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export function formatTime(sec: number): string {
+  if (!sec || isNaN(sec)) return '0:00';
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export function formatPlayCount(count: number): string {
+  if (!count) return '0';
+  if (count >= 100000000) return (count / 100000000).toFixed(1) + '亿';
+  if (count >= 10000) return (count / 10000).toFixed(1) + '万';
+  return count.toString();
+}
diff --git a/src/views/DailySongs.vue b/src/views/DailySongs.vue
index 341a64c..4341a53 100644
--- a/src/views/DailySongs.vue
+++ b/src/views/DailySongs.vue
@@ -1,26 +1,52 @@
 <template>
-  <div class="p-8 text-white">
-    <button @click="$router.back()" class="mb-4 text-gray-400 hover:text-white transition">
+  <div class="p-8 text-content">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
       ← 返回
     </button>
-    <h1 class="text-2xl font-bold mb-6">每日推荐</h1>
-    <div v-if="loading" class="text-gray-400">加载中...</div>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold">每日推荐</h1>
+      <button
+        v-if="songs.length > 0"
+        @click="player.playAll(songs)"
+        class="px-4 py-2 bg-accent hover:bg-accent-hover rounded-full text-white font-medium transition text-sm"
+      >
+        播放全部
+      </button>
+    </div>
+    <div v-if="loading" class="text-content-2">加载中...</div>
     <div v-else class="space-y-2">
       <div
         v-for="(song, index) in songs"
         :key="song.id"
         @click="player.play(song)"
-        class="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition cursor-pointer"
+        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer group"
+        :class="{ 'bg-accent-dim': isCurrentSong(song.id) }"
       >
-        <span class="text-xs text-gray-500 w-6 text-right">{{ index + 1 }}</span>
-        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover" />
+        <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+          <div v-if="isCurrentSong(song.id)" class="flex items-center justify-end">
+            <div class="flex items-center gap-[3px] h-4">
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 50%; animation-delay: 0ms"></span>
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 100%; animation-delay: 150ms"></span>
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 35%; animation-delay: 300ms"></span>
+            </div>
+          </div>
+          <template v-else>
+            <span class="text-xs text-content-3 group-hover:hidden">{{ index + 1 }}</span>
+            <svg class="hidden group-hover:block text-content" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+          </template>
+        </div>
+        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover flex-shrink-0" />
         <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium truncate">{{ song.name }}</p>
-          <p class="text-xs text-gray-400 truncate">
+          <p class="text-sm font-medium truncate" :class="isCurrentSong(song.id) ? 'text-accent-text' : ''">{{ song.name }}</p>
+          <p class="text-xs text-content-2 truncate">
             {{ song.ar?.map((a: any) => a.name).join(' / ') }}
           </p>
         </div>
-        <span class="text-xs text-gray-500">{{ formatDuration(song.dt) }}</span>
+        <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
+          <svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        </button>
+        <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
       </div>
     </div>
   </div>
@@ -30,11 +56,16 @@
 import { ref, onMounted } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
 import { usePlayerStore } from '../stores/player';
+import { formatDuration } from '../utils/format';
 
 const player = usePlayerStore();
 const songs = ref<any[]>([]);
 const loading = ref(true);
 
+function isCurrentSong(songId: number): boolean {
+  return player.currentSong?.id === songId;
+}
+
 onMounted(async () => {
   try {
     const jsonStr: string = await invoke('recommend_songs');
@@ -46,11 +77,4 @@ onMounted(async () => {
     loading.value = false;
   }
 });
-
-function formatDuration(ms: number): string {
-  const sec = Math.floor(ms / 1000);
-  const m = Math.floor(sec / 60);
-  const s = sec % 60;
-  return `${m}:${s.toString().padStart(2, '0')}`;
-}
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/Discover.vue b/src/views/Discover.vue
index ede5160..be81034 100644
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-8 text-white">
+  <div class="p-8 text-content">
     <h1 class="text-2xl font-bold mb-4">发现音乐</h1>
 
     <!-- 搜索框 -->
@@ -7,7 +7,7 @@
       v-model="keyword"
       @keyup.enter="handleSearch"
       placeholder="搜索歌曲、歌手、专辑..."
-      class="mb-4 w-full rounded-xl bg-white/10 p-3 text-white placeholder-gray-400 outline-none backdrop-blur"
+      class="mb-4 w-full rounded-xl bg-muted p-3 text-content placeholder-content-2 outline-none backdrop-blur"
     />
 
     <!-- 热门搜索标签（仅在没有搜索且未显示结果时出现） -->
@@ -18,7 +18,7 @@
           v-for="tag in hotTags"
           :key="tag.searchWord"
           @click="searchTag(tag.searchWord)"
-          class="px-3 py-1 rounded-full bg-white/10 hover:bg-white/20 cursor-pointer transition text-sm"
+          class="px-3 py-1 rounded-full bg-muted hover:bg-emphasis cursor-pointer transition text-sm"
         >
           {{ tag.searchWord }}
         </span>
@@ -27,31 +27,31 @@
 
     <!-- 输出设备选择 -->
     <!-- <div class="mb-4">
-      <label class="mr-2 text-sm text-gray-400">输出设备：</label>
-      <select v-model="selectedDevice" @change="changeDevice" class="bg-white/10 text-white rounded p-1 text-sm">
+      <label class="mr-2 text-sm text-content-2">输出设备：</label>
+      <select v-model="selectedDevice" @change="changeDevice" class="bg-muted text-white rounded p-1 text-sm">
         <option :value="null">跟随系统默认</option>
         <option v-for="dev in devices" :key="dev" :value="dev">{{ dev }}</option>
       </select>
     </div> -->
 
     <!-- 搜索结果 -->
-    <div v-if="loading" class="text-gray-400">搜索中...</div>
+    <div v-if="loading" class="text-content-2">搜索中...</div>
     <div v-else class="space-y-3">
       <div
         v-for="song in results"
         :key="song.id"
         @click="playSong(song)"
-        class="flex items-center gap-4 p-3 rounded-xl backdrop-blur-md bg-white/5 hover:bg-white/10 border border-white/5 cursor-pointer transition"
+        class="flex items-center gap-4 p-3 rounded-xl backdrop-blur-md bg-subtle hover:bg-muted border border-line-2 cursor-pointer transition"
       >
         <img :src="song.al?.picUrl" class="w-12 h-12 rounded-lg object-cover" />
         <div>
           <p class="font-medium">{{ song.name }}</p>
-          <p class="text-sm text-gray-400">
+          <p class="text-sm text-content-2">
             {{ song.ar?.map((a: any) => a.name).join(' / ') }}
           </p>
         </div>
       </div>
-      <p v-if="!loading && hasSearched && results.length === 0" class="text-gray-400">无结果</p>
+      <p v-if="!loading && hasSearched && results.length === 0" class="text-content-2">无结果</p>
     </div>
   </div>
 </template>
@@ -120,4 +120,4 @@ async function playSong(song: any) {
   player.play(song);
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/FavoriteSongs.vue b/src/views/FavoriteSongs.vue
index 1d55478..5a9effa 100644
--- a/src/views/FavoriteSongs.vue
+++ b/src/views/FavoriteSongs.vue
@@ -1,6 +1,82 @@
 <template>
-  <div class="p-8 text-white">
-    <h1 class="text-2xl font-bold mb-4">❤️ 我喜欢的音乐</h1>
-    <p class="text-gray-400">正在施工...</p>
+  <div class="p-8 text-content">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+      ← 返回
+    </button>
+    <div class="flex items-center gap-4 mb-6">
+      <h1 class="text-2xl font-bold">我喜欢的音乐</h1>
+      <button
+        v-if="songs.length"
+        @click="player.playAll(songs)"
+        class="px-4 py-1.5 bg-muted hover:bg-emphasis rounded-full text-sm transition"
+      >
+        播放全部
+      </button>
+    </div>
+    <div v-if="!userStore.isLoggedIn" class="text-content-2">
+      请先登录后查看喜欢的音乐
+    </div>
+    <div v-else-if="loading" class="text-content-2">加载中...</div>
+    <div v-else-if="songs.length === 0" class="text-content-2">暂无喜欢的音乐</div>
+    <div v-else class="space-y-2">
+      <div
+        v-for="(song, index) in songs"
+        :key="song.id"
+        @click="player.play(song)"
+        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer"
+      >
+        <span class="text-xs text-content-3 w-6 text-right">{{ index + 1 }}</span>
+        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover" />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium truncate">{{ song.name }}</p>
+          <p class="text-xs text-content-2 truncate">
+            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+          </p>
+        </div>
+        <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
+          <svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        </button>
+        <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { invoke } from '@tauri-apps/api/core';
+import { usePlayerStore } from '../stores/player';
+import { useUserStore } from '../stores/user';
+import { normalizeSong } from '../utils/song';
+import { formatDuration } from '../utils/format';
+
+const player = usePlayerStore();
+const userStore = useUserStore();
+const songs = ref<any[]>([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  if (!userStore.isLoggedIn) {
+    loading.value = false;
+    return;
+  }
+  try {
+    const playlistJson: string = await invoke('user_playlist', { uid: userStore.user!.userId });
+    const playlistData = JSON.parse(playlistJson);
+    const created = (playlistData.playlist || []).filter((p: any) => !p.subscribed);
+    if (created.length === 0) {
+      loading.value = false;
+      return;
+    }
+    const likePlaylistId = created[0].id;
+    const trackJson: string = await invoke('playlist_track_all', { query: { id: likePlaylistId } });
+    const trackData = JSON.parse(trackJson);
+    songs.value = (trackData.songs || []).map(normalizeSong);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fc0aa99..b887a9e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="p-8 text-white">
+  <div class="p-8 text-content">
     <!-- 第一行：每日推荐 & 私人漫游 卡片 -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">
+    <div class="grid grid-cols-2 gap-6 mb-10">
       <!-- 每日推荐 -->
       <div
         class="h-48 bg-gradient-to-br from-pink-600 to-purple-700 rounded-3xl overflow-hidden relative cursor-pointer group"
@@ -19,76 +19,61 @@
       </div>
 
       <!-- 私人漫游 卡片 -->
-       <!-- 私人漫游 卡片 -->
-<div
-  class="h-48 bg-gradient-to-br from-blue-600 to-cyan-500 rounded-3xl overflow-hidden relative group select-none"
-  @click="!userStore.isLoggedIn ? goLogin() : null"
->
-  <!-- 模糊封面层（仅在有歌曲且有封面时显示，低透明度模糊） -->
-  <div
-    v-if="player.fmSong && fmCoverUrl"
-    class="absolute inset-0 bg-cover bg-center opacity-30 blur-md scale-110"
-    :style="{ backgroundImage: `url(${fmCoverUrl})` }"
-  ></div>
-  <!-- 遮罩 -->
-  <div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition"></div>
-
-  <!-- 内容 -->
-  <div class="relative z-10 h-full">
-    <!-- 未登录 -->
-    <div v-if="!userStore.isLoggedIn" class="flex flex-col items-center justify-center h-full">
-      <p class="text-xs text-white/60 mb-1">🌀 一键探索</p>
-      <h2 class="text-2xl font-bold">私人漫游</h2>
-      <p class="text-xs text-white/60 mt-2">登录后即可开启沉浸式音乐探索</p>
-    </div>
-
-    <!-- 登录后：无歌曲 → 垂直居中播放按钮 -->
-    <div
-      v-else-if="!player.fmSong"
-      class="flex flex-col items-center justify-center h-full gap-3 cursor-pointer"
-      @click.stop="startFmPlay"
-    >
-      <p class="text-xs text-white/60">🌀 一键探索</p>
-      <h2 class="text-2xl font-bold">私人漫游</h2>
-      <button
-        class="w-12 h-12 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 transition mt-2"
+      <div
+        class="h-48 rounded-3xl overflow-hidden relative group select-none cursor-pointer"
+        :class="player.fmSong && fmCoverUrl ? '' : 'bg-gradient-to-br from-indigo-600 via-blue-600 to-cyan-500'"
+        @click="onFmCardClick"
       >
-        <svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" class="text-white">
-          <path d="M4 2.5v11l9-5.5z" />
-        </svg>
-      </button>
-    </div>
+        <div
+          v-if="player.fmSong && fmCoverUrl"
+          class="absolute inset-0 bg-cover bg-center scale-110"
+          :style="{ backgroundImage: `url(${fmCoverUrl})` }"
+        ></div>
+        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/10 group-hover:from-black/60 transition"></div>
 
-    <!-- 有歌曲 → 横向布局：左侧信息，右侧按钮 -->
-    <div v-else class="flex items-center justify-between h-full px-6 cursor-pointer" @click.stop="player.toggleFm">
-      <!-- 左侧：封面 + 歌曲信息 -->
-      <div class="flex items-center gap-3 min-w-0">
-        <img :src="fmCoverUrl" class="w-14 h-14 rounded-xl object-cover flex-shrink-0" />
-        <div class="min-w-0">
-          <p class="text-sm font-semibold truncate">{{ fmDisplayName }}</p>
-          <p class="text-xs text-white/70 truncate">{{ fmDisplayArtists }}</p>
+        <div class="relative z-10 h-full flex flex-col justify-between p-6">
+          <div class="flex items-center gap-2">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/50"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>
+            <span class="text-xs text-white/50 font-medium">私人漫游</span>
+          </div>
+
+          <div class="flex items-end justify-between gap-4">
+            <div class="min-w-0 flex-1">
+              <h2 class="text-xl font-bold" v-if="!player.fmSong && userStore.isLoggedIn">发现新音乐</h2>
+              <h2 class="text-xl font-bold" v-else-if="!userStore.isLoggedIn">私人漫游</h2>
+              <h2 class="text-lg font-bold truncate" v-else>{{ fmDisplayName }}</h2>
+              <p v-if="!userStore.isLoggedIn" class="text-xs text-white/50 mt-1">登录后开启沉浸式音乐探索</p>
+              <p v-else-if="!player.fmSong" class="text-xs text-white/50 mt-1">根据你的喜好，为你推荐意想不到的好歌</p>
+              <p v-else class="text-xs text-white/60 truncate mt-1">{{ fmDisplayArtists }}</p>
+            </div>
+            <div class="flex items-center gap-2 flex-shrink-0">
+              <button v-if="userStore.isLoggedIn && !player.fmSong"
+                @click.stop="startFmPlay"
+                class="w-10 h-10 flex items-center justify-center rounded-full bg-white/15 hover:bg-white/25 backdrop-blur-sm transition">
+                <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" class="text-white">
+                  <path d="M4 2.5v11l9-5.5z" />
+                </svg>
+              </button>
+              <template v-if="player.fmSong">
+                <button @click.stop="player.toggleFm"
+                  class="w-10 h-10 flex items-center justify-center rounded-full bg-white/15 hover:bg-white/25 backdrop-blur-sm transition">
+                  <svg v-if="player.fmPlaying" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" class="text-white">
+                    <rect x="3" y="2" width="3" height="12" rx="0.5" />
+                    <rect x="10" y="2" width="3" height="12" rx="0.5" />
+                  </svg>
+                  <svg v-else width="18" height="18" viewBox="0 0 16 16" fill="currentColor" class="text-white">
+                    <path d="M4 2.5v11l9-5.5z" />
+                  </svg>
+                </button>
+                <button @click.stop="player.nextFm"
+                  class="w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm transition">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-white"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
+                </button>
+              </template>
+            </div>
+          </div>
         </div>
       </div>
-      <!-- 右侧：控制按钮 -->
-      <div class="flex items-center gap-3 ml-4">
-        <button @click.stop="player.toggleFm"
-          class="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 transition"
-        >
-          <svg v-if="player.fmPlaying" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" class="text-white">
-            <rect x="3" y="2" width="3" height="12" rx="0.5" />
-            <rect x="10" y="2" width="3" height="12" rx="0.5" />
-          </svg>
-          <svg v-else width="18" height="18" viewBox="0 0 16 16" fill="currentColor" class="text-white">
-            <path d="M4 2.5v11l9-5.5z" />
-          </svg>
-        </button>
-        <button @click.stop="player.nextFm" class="text-xl text-white/80 hover:text-white transition">⏭</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="absolute right-4 top-1/2 -translate-y-1/2 text-6xl opacity-20 pointer-events-none">🌊</div>
-</div>
 
     </div>
 
@@ -97,11 +82,11 @@
       <h2 class="text-xl font-semibold mb-4">🎯 为你推荐</h2>
       <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         <div v-for="pl in recPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
-          class="bg-white/5 rounded-xl overflow-hidden hover:bg-white/10 transition cursor-pointer">
+          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer">
           <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-gray-400 mt-1">{{ pl.copywriter || '' }}</p>
+            <p class="text-xs text-content-2 mt-1">{{ pl.copywriter || '' }}</p>
           </div>
         </div>
       </div>
@@ -112,7 +97,7 @@
       <h2 class="text-xl font-semibold mb-4">📈 热门歌单</h2>
       <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         <div v-for="pl in rankPlaylists" :key="pl.id" @click="goPlaylist(pl.id)"
-          class="bg-white/5 rounded-xl overflow-hidden hover:bg-white/10 transition cursor-pointer backdrop-blur-sm">
+          class="bg-subtle rounded-xl overflow-hidden hover:bg-muted transition cursor-pointer backdrop-blur-sm">
           <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>
@@ -155,15 +140,25 @@ const fmDisplayArtists = computed(() => {
 
 // 首次点击播放按钮：开始 FM 并播放
 async function startFmPlay() {
-  // 如果还没加载过 FM，或者之前加载了但被停止了，重新加载
   if (!player.fmSong) {
-    await player.loadFm(); // loadFm 内部会设置 fmSong 并播放
+    await player.loadFm();
   } else {
-    // 已有歌曲但未播放状态（比如之前暂停/停止了），直接播放
     await player.toggleFm();
   }
 }
 
+function onFmCardClick() {
+  if (!userStore.isLoggedIn) {
+    goLogin();
+    return;
+  }
+  if (!player.fmSong) {
+    startFmPlay();
+    return;
+  }
+  player.openRoamDrawer();
+}
+
 onMounted(async () => {
   const d = new Date();
   todayStr.value = `${d.getMonth() + 1}月${d.getDate()}日`;
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 18bee67..f187f27 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,21 +1,19 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-950 text-white">
-    <div class="bg-white/5 backdrop-blur-md border border-white/10 p-8 rounded-2xl w-full max-w-sm text-center">
+  <div class="min-h-screen flex items-center justify-center bg-base text-content">
+    <div class="bg-subtle backdrop-blur-md border border-line p-8 rounded-2xl w-full max-w-sm text-center">
       <h1 class="text-xl font-bold mb-4">扫码登录</h1>
-      <p class="text-sm text-gray-400 mb-6">请使用网易云音乐 App 扫描二维码</p>
-      
-      <!-- 二维码展示区 -->
+      <p class="text-sm text-content-2 mb-6">请使用网易云音乐 App 扫描二维码</p>
+
       <div v-if="qrimg" class="bg-white p-3 rounded-xl inline-block mb-4">
         <img :src="qrimg" alt="二维码" class="w-48 h-48" />
       </div>
-      <div v-else class="w-48 h-48 bg-white/5 rounded-xl flex items-center justify-center mx-auto mb-4">
-        <span v-if="qrLoading" class="text-gray-400">加载中...</span>
-        <span v-else-if="qrError" class="text-red-400 text-sm">{{ qrError }}</span>
+      <div v-else class="w-48 h-48 bg-subtle rounded-xl flex items-center justify-center mx-auto mb-4">
+        <span v-if="qrLoading" class="text-content-2">加载中...</span>
+        <span v-else-if="qrError" class="text-danger text-sm">{{ qrError }}</span>
       </div>
-      
-      <!-- 状态提示 -->
+
       <p class="text-sm" :class="statusColor">{{ statusText }}</p>
-      <button @click="refreshQr" class="mt-4 text-xs text-green-400 hover:underline">重新获取二维码</button>
+      <button @click="refreshQr" class="mt-4 text-xs text-accent-text hover:underline">重新获取二维码</button>
     </div>
   </div>
 </template>
@@ -33,7 +31,7 @@ const qrimg = ref('');
 const qrLoading = ref(true);
 const qrError = ref('');
 const statusText = ref('等待扫码...');
-const statusColor = ref('text-gray-400');
+const statusColor = ref('text-content-2');
 let qrKey = '';
 let pollTimer: ReturnType<typeof setInterval> | null = null;
 
@@ -54,7 +52,6 @@ async function refreshQr() {
     qrError.value = '';
     if (pollTimer) clearInterval(pollTimer);
     try {
-        // 1. 获取 unikey
         qrKey = await invoke('get_qr_key');
         if (!qrKey) {
             qrError.value = '未获取到登录密钥';
@@ -62,16 +59,13 @@ async function refreshQr() {
             return;
         }
 
-        // 2. 拼接网易云标准扫码链接（无需 create_qr）
         const qrUrl = `https://music.163.com/login?codekey=${qrKey}&type=1`;
 
-        // 3. 用 qrcode 生成二维码图片
         const canvas = document.createElement('canvas');
         await QRCode.toCanvas(canvas, qrUrl, { width: 200, margin: 1 });
         qrimg.value = canvas.toDataURL('image/png');
         qrLoading.value = false;
 
-        // 4. 开始轮询状态
         startPolling();
     } catch (e: any) {
         qrError.value = '获取二维码失败';
@@ -79,20 +73,6 @@ async function refreshQr() {
     }
 }
 
-// 新增函数：用 Canvas 生成二维码并赋值给 qrimg
-// async function drawQrCode(url: string) {
-//     try {
-//         // 等待 DOM 准备好 canvas 元素
-//         const canvas = document.createElement('canvas');
-//         await QRCode.toCanvas(canvas, url, { width: 201, margin: 1 });
-//         // 转为 data URL 赋值给响应式的图片地址
-//         qrimg.value = canvas.toDataURL('image/png');
-//     } catch (e) {
-//         console.error('生成二维码失败', e);
-//         qrError.value = '生成二维码失败';
-//     }
-// }
-
 function startPolling() {
     pollTimer = setInterval(async () => {
         try {
@@ -101,23 +81,18 @@ function startPolling() {
             const code = data.code;
             if (code === 800) {
                 statusText.value = '二维码已过期，请刷新';
-                statusColor.value = 'text-red-400';
+                statusColor.value = 'text-danger';
                 clearInterval(pollTimer!);
             } else if (code === 801) {
                 statusText.value = '等待扫码...';
-                statusColor.value = 'text-gray-400';
+                statusColor.value = 'text-content-2';
             } else if (code === 802) {
                 statusText.value = '请在手机上确认登录';
-                statusColor.value = 'text-yellow-400';
+                statusColor.value = 'text-warning';
             } else if (code === 803) {
-                // 登录成功
                 clearInterval(pollTimer!);
                 statusText.value = '登录成功！';
-                statusColor.value = 'text-green-400';
-                // 存储 cookie 到 NcmApi（后台线程中自动保留，后续请求都带登录态）
-                // 获取用户信息（简化，可从 /login/status 获取）
-                // 这里需要额外调用获取用户详情的 API，但因为 NcmApi 已有 cookie，可以直接在后台线程中添加
-                // 暂时用简易方式：调用 /user/account 获取用户简档
+                statusColor.value = 'text-accent-text';
                 await fetchUserProfile();
                 setTimeout(() => router.push('/'), 500);
             }
@@ -129,9 +104,6 @@ function startPolling() {
 
 async function fetchUserProfile() {
     try {
-        // 添加一个快速获取用户信息的命令（可复用之前的 login 命令中获取 profile 的逻辑）
-        // 这里简化，由于后台 NcmApi 已有 cookie，我们可以直接用 reqwest 调 /user/account
-        // 但最好添加一个新命令，这里直接调用现有的 login 逻辑不适用，因此我们在 Rust 侧添加一个 get_login_status 命令
         const profileJson: string = await invoke('get_login_status');
         const profile = JSON.parse(profileJson);
         if (profile.profile) {
@@ -145,4 +117,4 @@ async function fetchUserProfile() {
         console.error('获取用户信息失败', e);
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/PlaylistDetail.vue b/src/views/PlaylistDetail.vue
index ccda1ae..0f84cbb 100644
--- a/src/views/PlaylistDetail.vue
+++ b/src/views/PlaylistDetail.vue
@@ -1,83 +1,138 @@
 <template>
-  <div class="p-8 text-white">
-    <button @click="$router.back()" class="mb-4 text-gray-400 hover:text-white transition">
+  <div class="p-8 text-content">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
       ← 返回
     </button>
 
-    <!-- 歌单信息 -->
     <div v-if="playlist" class="flex gap-6 mb-8">
-      <img :src="playlist.coverImgUrl" class="w-40 h-40 rounded-xl object-cover shadow-lg" />
-      <div>
-        <h1 class="text-2xl font-bold">{{ playlist.name }}</h1>
-        <p class="text-sm text-gray-400 mt-2">{{ playlist.description }}</p>
-        <p class="text-xs text-gray-500 mt-2">
-          {{ playlist.trackCount }} 首歌曲 · 播放 {{ playlist.playCount }} 次
-        </p>
-        <button
-          @click="playAll"
-          class="mt-4 px-4 py-2 bg-green-500 hover:bg-green-600 rounded-full text-white font-medium transition"
-        >
-          播放全部
-        </button>
+      <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>
+          <h1 class="text-2xl font-bold leading-tight">{{ playlist.name }}</h1>
+          <div v-if="playlist.creator" class="flex items-center gap-2 mt-2">
+            <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>
+          <p class="text-xs text-content-3 mt-2">
+            {{ playlist.trackCount }} 首歌曲 · 播放 {{ formatPlayCount(playlist.playCount) }} 次
+          </p>
+        </div>
+        <div class="flex items-center gap-3 mt-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"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+            播放全部
+          </button>
+          <button
+            v-if="!isOwnPlaylist"
+            @click="toggleSubscribe"
+            class="px-4 py-2 bg-muted hover:bg-emphasis rounded-full text-sm transition flex items-center gap-2"
+            :class="subscribed ? 'text-accent-text' : 'text-content/70'"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path v-if="subscribed" d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
+              <path v-else d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
+            </svg>
+            {{ subscribed ? '已收藏' : '收藏歌单' }}
+          </button>
+        </div>
       </div>
     </div>
 
-    <!-- 加载中 -->
-    <div v-if="loading" class="text-gray-400">加载中...</div>
+    <div v-if="loading" class="text-content-2">加载中...</div>
 
-    <!-- 歌曲列表 -->
-    <div v-else class="space-y-2">
+    <div v-else class="space-y-1">
       <div
         v-for="(song, index) in songs"
         :key="song.id"
         @click="playSingle(song)"
-        class="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition cursor-pointer"
+        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer group"
+        :class="{ 'bg-accent-dim': isCurrentSong(song.id) }"
       >
-        <span class="text-xs text-gray-500 w-6 text-right">{{ index + 1 }}</span>
+        <div class="w-6 text-right flex-shrink-0 flex items-center justify-end h-5">
+          <div v-if="isCurrentSong(song.id)" class="flex items-center justify-end">
+            <div class="flex items-center gap-[3px] h-4">
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 50%; animation-delay: 0ms"></span>
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 100%; animation-delay: 150ms"></span>
+              <span class="w-[3px] bg-accent-text rounded-full animate-bounce" style="height: 35%; animation-delay: 300ms"></span>
+            </div>
+          </div>
+          <template v-else>
+            <span class="text-xs text-content-3 group-hover:hidden">{{ index + 1 }}</span>
+            <svg class="hidden group-hover:block text-content" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5v11l9-5.5z"/></svg>
+          </template>
+        </div>
+        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover flex-shrink-0" />
         <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium truncate">{{ song.name }}</p>
-          <p class="text-xs text-gray-400 truncate">
+          <p class="text-sm font-medium truncate" :class="isCurrentSong(song.id) ? 'text-accent-text' : ''">{{ song.name }}</p>
+          <p class="text-xs text-content-2 truncate">
             {{ song.ar?.map((a: any) => a.name).join(' / ') }}
           </p>
         </div>
-        <span class="text-xs text-gray-500">{{ formatDuration(song.dt) }}</span>
+        <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
+          <svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        </button>
+        <span class="text-xs text-content-3">{{ formatDuration(song.dt) }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { invoke } from '@tauri-apps/api/core';
 import { usePlayerStore } from '../stores/player';
+import { useUserStore } from '../stores/user';
+import { showToast } from '../composables/useToast';
+import { formatDuration, formatPlayCount } from '../utils/format';
 
 const route = useRoute();
 const player = usePlayerStore();
+const userStore = useUserStore();
 
 const playlist = ref<any>(null);
 const songs = ref<any[]>([]);
 const loading = ref(true);
+const subscribed = ref(false);
 
-onMounted(async () => {
-  const id = Number(route.params.id);
+const isOwnPlaylist = computed(() => {
+  if (!playlist.value || !userStore.user) return false;
+  return playlist.value.creator?.userId === userStore.user.userId;
+});
+
+async function fetchPlaylist(id: number) {
+  loading.value = true;
+  playlist.value = null;
+  songs.value = [];
   try {
     const jsonStr: string = await invoke('get_playlist_detail', { id });
     const data = JSON.parse(jsonStr);
     playlist.value = data.playlist;
     songs.value = data.playlist.tracks || [];
+    subscribed.value = data.playlist.subscribed || false;
   } catch (e) {
-    console.error('获取歌单详情失败', e);
+    console.error(e);
+    showToast('获取歌单详情失败', 'error');
   } finally {
     loading.value = false;
   }
+}
+
+onMounted(() => {
+  fetchPlaylist(Number(route.params.id));
 });
 
-function formatDuration(ms: number): string {
-  const sec = Math.floor(ms / 1000);
-  const m = Math.floor(sec / 60);
-  const s = sec % 60;
-  return `${m}:${s.toString().padStart(2, '0')}`;
+watch(() => route.params.id, (newId) => {
+  if (newId) fetchPlaylist(Number(newId));
+});
+
+function isCurrentSong(songId: number): boolean {
+  return player.currentSong?.id === songId;
 }
 
 async function playSingle(song: any) {
@@ -88,4 +143,16 @@ function playAll() {
   if (songs.value.length === 0) return;
   player.playAll(songs.value);
 }
-</script>
\ No newline at end of file
+
+async function toggleSubscribe() {
+  if (!playlist.value) return;
+  const newSubscribed = !subscribed.value;
+  try {
+    await invoke('playlist_subscribe', { query: { id: Number(playlist.value.id), subscribe: newSubscribed } });
+    subscribed.value = newSubscribed;
+    showToast(subscribed.value ? '已收藏歌单' : '已取消收藏', 'success');
+  } catch {
+    showToast('操作失败，请稍后重试', 'error');
+  }
+}
+</script>
diff --git a/src/views/RecentPlays.vue b/src/views/RecentPlays.vue
index 9a045e3..18955ad 100644
--- a/src/views/RecentPlays.vue
+++ b/src/views/RecentPlays.vue
@@ -1,6 +1,38 @@
 <template>
-  <div class="p-8 text-white">
-    <h1 class="text-2xl font-bold mb-4">🕐 最近播放</h1>
-    <p class="text-gray-400">正在施工...</p>
+  <div class="p-8 text-content">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+      ← 返回
+    </button>
+    <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">
+      <div
+        v-for="(song, index) in player.recentLocal"
+        :key="song.id"
+        @click="player.play(song)"
+        class="flex items-center gap-4 p-3 rounded-xl hover:bg-subtle transition cursor-pointer"
+      >
+        <span class="text-xs text-content-3 w-6 text-right">{{ index + 1 }}</span>
+        <img :src="song.al?.picUrl" class="w-10 h-10 rounded object-cover" />
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium truncate">{{ song.name }}</p>
+          <p class="text-xs text-content-2 truncate">
+            {{ song.ar?.map((a: any) => a.name).join(' / ') }}
+          </p>
+        </div>
+        <button @click.stop="player.toggleLike(song.id)" class="text-content-3 hover:text-danger transition flex-shrink-0">
+          <svg v-if="player.isLiked(song.id)" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-danger"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
+        </button>
+        <span class="text-xs text-content-3">{{ formatDuration(song.dt ?? 0) }}</span>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { usePlayerStore } from '../stores/player';
+import { formatDuration } from '../utils/format';
+
+const player = usePlayerStore();
+</script>
diff --git a/src/views/Roam.vue b/src/views/Roam.vue
index 8546c92..0371f7c 100644
--- a/src/views/Roam.vue
+++ b/src/views/Roam.vue
@@ -1,51 +1,44 @@
 <template>
-  <div class="p-8 text-white flex flex-col items-center justify-center min-h-full">
-    <!-- 无歌曲时提示 -->
+  <div class="p-8 text-content flex flex-col items-center justify-center min-h-full">
     <div v-if="!currentSong" class="text-center">
-      <p class="text-gray-400 mb-4">私人漫游未启动</p>
+      <p class="text-content-2 mb-4">私人漫游未启动</p>
       <button
         @click="startFm"
-        class="px-6 py-2 bg-white/10 hover:bg-white/20 rounded-full transition"
+        class="px-6 py-2 bg-muted hover:bg-emphasis rounded-full transition"
       >
         开始漫游
       </button>
     </div>
 
-    <!-- 歌曲信息展示 -->
     <template v-else>
-      <!-- 专辑封面 -->
       <img
         :src="currentSong.al?.picUrl || currentSong.album?.picUrl"
         class="w-80 h-80 rounded-3xl object-cover shadow-2xl mb-8"
       />
 
-      <!-- 歌曲名和艺术家 -->
       <h1 class="text-3xl font-bold mb-2">{{ currentSong.name }}</h1>
-      <p class="text-lg text-gray-400 mb-8">
+      <p class="text-lg text-content-2 mb-8">
         {{ artists }}
       </p>
 
-      <!-- 控制按钮 -->
       <div class="flex items-center gap-8">
         <button
-          @click="togglePlay"
-          class="w-16 h-16 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition border border-white/20"
+          @click="player.toggle()"
+          class="w-16 h-16 flex items-center justify-center rounded-full bg-muted hover:bg-emphasis transition border border-emphasis"
         >
-          <!-- 暂停图标 -->
           <svg v-if="player.playing" width="28" height="28" viewBox="0 0 16 16" fill="currentColor">
             <rect x="3" y="2" width="3" height="12" rx="0.5" />
             <rect x="10" y="2" width="3" height="12" rx="0.5" />
           </svg>
-          <!-- 播放图标 -->
           <svg v-else width="28" height="28" viewBox="0 0 16 16" fill="currentColor">
             <path d="M4 2.5v11l9-5.5z" />
           </svg>
         </button>
         <button
           @click="nextSong"
-          class="text-3xl text-gray-400 hover:text-white transition"
+          class="text-content-2 hover:text-content transition"
         >
-          ⏭
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
         </button>
       </div>
     </template>
@@ -56,12 +49,11 @@
 import { computed, onMounted } from 'vue';
 import { usePlayerStore } from '../stores/player';
 import { invoke } from '@tauri-apps/api/core';
+import { normalizeSong } from '../utils/song';
 
 const player = usePlayerStore();
 
-// 当前正在播放的歌曲（如果处于FM模式，则显示当前歌曲）
 const currentSong = computed(() => {
-  // FM 模式下直接显示正在播放的歌曲（可能是FM歌曲）
   if (player.isFmMode && player.currentSong) {
     return player.currentSong;
   }
@@ -74,7 +66,6 @@ const artists = computed(() => {
          currentSong.value.artists?.map((a: any) => a.name).join(' / ') || '';
 });
 
-// 进入页面时，如果FM未启动，自动开始
 onMounted(async () => {
   if (!player.isFmMode || !player.currentSong) {
     await startFm();
@@ -96,31 +87,7 @@ async function startFm() {
   }
 }
 
-function normalizeSong(song: any) {
-  const normalized = { ...song };
-  if (!normalized.al?.picUrl && normalized.album?.picUrl) {
-    normalized.al = { ...normalized.al, picUrl: normalized.album.picUrl };
-  }
-  if (!normalized.ar || normalized.ar.length === 0) {
-    normalized.ar = normalized.artists || [];
-  }
-  return normalized;
-}
-
-async function togglePlay() {
-  if (player.playing) {
-    await invoke('pause_audio');
-  } else {
-    if (player.currentSong) {
-      // 恢复播放
-      await invoke('resume_audio');
-    } else {
-      await startFm();
-    }
-  }
-}
-
 async function nextSong() {
   await startFm();
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 9374303..95834e8 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -1,40 +1,31 @@
 <template>
-  <div class="text-white">
+  <div class="text-content">
     <h1 class="text-2xl font-bold mb-4">搜索</h1>
 
-    <!-- 输出设备选择-->
-    <!-- <div class="mb-4">
-      <label class="mr-2">输出设备：</label>
-      <select v-model="selectedDevice" @change="changeDevice" class="bg-white/10 text-white rounded p-1">
-        <option :value="null">跟随系统默认</option>
-        <option v-for="dev in devices" :key="dev" :value="dev">{{ dev }}</option>
-      </select>
-    </div> -->
-
     <input
       v-model="keyword"
       @keyup.enter="handleSearch"
       placeholder="搜索歌曲..."
-      class="mb-6 w-full rounded-xl bg-white/10 p-3 text-white placeholder-gray-400 outline-none backdrop-blur"
+      class="mb-6 w-full rounded-xl bg-muted p-3 text-content placeholder-content-2 outline-none backdrop-blur"
     />
 
-    <div v-if="loading" class="text-gray-400">搜索中...</div>
+    <div v-if="loading" class="text-content-2">搜索中...</div>
     <div v-else class="space-y-3">
       <div
         v-for="song in results"
         :key="song.id"
         @click="playSong(song)"
-        class="flex items-center gap-4 p-3 rounded-xl backdrop-blur-md bg-white/5 hover:bg-white/10 border border-white/5 cursor-pointer transition-all duration-200 hover:scale-[1.01] active:scale-95"
+        class="flex items-center gap-4 p-3 rounded-xl backdrop-blur-md bg-subtle hover:bg-muted border border-line-2 cursor-pointer transition-all duration-200 hover:scale-[1.01] active:scale-95"
       >
         <img :src="song.al?.picUrl" class="w-12 h-12 rounded-lg object-cover" />
         <div>
           <p class="font-medium">{{ song.name }}</p>
-          <p class="text-sm text-gray-400">
+          <p class="text-sm text-content-2">
             {{ song.ar?.map((a: any) => a.name).join(' / ') }}
           </p>
         </div>
       </div>
-      <p v-if="!loading && hasSearched && results.length === 0" class="text-gray-400">无结果</p>
+      <p v-if="!loading && hasSearched && results.length === 0" class="text-content-2">无结果</p>
     </div>
 
   </div>
@@ -58,14 +49,12 @@ const hasSearched = ref(false);
 const player = usePlayerStore();
 
 const route = useRoute();
-// 监听从首页或其他地方传来的 query 参数，自动搜索
 watch(
   () => route.query.q,
   (newQ) => {
     if (newQ) {
       keyword.value = newQ as string;
       handleSearch();
-      // 清除 query，防止刷新后重复搜索
       router.replace({ query: {} });
     }
   },
@@ -96,13 +85,8 @@ async function playSong(song: any) {
 }
 
 const devices = ref<string[]>([]);
-// const selectedDevice = ref<string | null>(null);
 
 onMounted(async () => {
   devices.value = await invoke('get_output_devices');
 });
-
-// async function changeDevice() {
-//   await invoke('set_output_device', { device: selectedDevice.value });
-// }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..7c02bfe
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="p-8 text-content max-w-2xl">
+    <button @click="$router.back()" class="mb-4 text-content-2 hover:text-content transition">
+      ← 返回
+    </button>
+    <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>
+      <div class="space-y-5">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium">音质选择</p>
+            <p class="text-xs text-content-3 mt-0.5">更高音质需要 VIP 权限</p>
+          </div>
+          <CustomSelect v-model="settings.audioQuality" :options="qualityLabels" />
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-8">
+      <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">外观</h2>
+      <div class="space-y-5">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium">主题</p>
+            <p class="text-xs text-content-3 mt-0.5">切换应用主题</p>
+          </div>
+          <div class="flex bg-subtle rounded-lg p-0.5">
+            <button
+              v-for="t in themeOptions"
+              :key="t.value"
+              @click="settings.setTheme(t.value)"
+              class="px-3 py-1.5 rounded-md text-sm transition"
+              :class="settings.theme === t.value ? 'bg-muted text-content' : 'text-content-3 hover:text-content-2'"
+            >
+              {{ t.label }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-8">
+      <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">窗口</h2>
+      <div class="space-y-5">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium">关闭窗口时</p>
+            <p class="text-xs text-content-3 mt-0.5">点击关闭按钮的默认行为</p>
+          </div>
+          <CustomSelect v-model="closeActionValue" :options="closeActionLabels" />
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-8">
+      <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">下载</h2>
+      <div class="space-y-5">
+        <div>
+          <div class="flex items-center justify-between mb-2">
+            <div>
+              <p class="text-sm font-medium">下载路径</p>
+              <p class="text-xs text-content-3 mt-0.5">歌曲下载保存位置</p>
+            </div>
+          </div>
+          <div class="flex gap-2">
+            <input
+              v-model="downloadPathInput"
+              type="text"
+              placeholder="例如：~/Music/Nekosonic"
+              class="flex-1 bg-subtle border border-line rounded-lg px-3 py-2 text-sm text-content placeholder-content-4 outline-none focus:border-accent/50 transition"
+            />
+            <button
+              @click="saveDownloadPath"
+              class="px-4 py-2 bg-accent-dim hover:bg-accent-dim text-accent-text rounded-lg text-sm transition"
+            >
+              保存
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-8">
+      <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">关于</h2>
+      <div class="space-y-4">
+        <a @click.prevent="openUrl('https://gitea.atdunbg.xyz/atdunbg/Nekosonic-Music')"
+          class="flex items-center gap-4 p-4 bg-subtle rounded-xl hover:bg-muted transition cursor-pointer">
+          <img src="../assets/app-icon.png" class="w-12 h-12 rounded-xl flex-shrink-0" alt="Nekosonic" />
+          <div>
+            <p class="font-semibold">Nekosonic</p>
+            <p class="text-xs text-content-3 mt-0.5">版本 {{ appVersion }}</p>
+          </div>
+        </a>
+        <p class="text-xs text-content-3 leading-relaxed">
+          Nekosonic 是一款高颜值的跨平台第三方网易云音乐桌面客户端，基于 Tauri 2 + Vue 3 构建，提供轻量流畅的音乐播放体验。
+        </p>
+        <button
+          @click="checkUpdate"
+          :disabled="checkingUpdate"
+          class="flex items-center gap-2 px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition"
+        >
+          <svg v-if="!checkingUpdate" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9m-9 9a9 9 0 019-9"/></svg>
+          <svg v-else class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.22-8.56"/></svg>
+          {{ checkingUpdate ? '检查中...' : '检查更新(暂未实现)' }}
+        </button>
+        <p v-if="updateMessage" class="text-xs" :class="updateMessageClass">{{ updateMessage }}</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useSettingsStore, qualityLabels, closeActionLabels, type CloseAction } from '../stores/settings';
+import { useToast } from '../composables/useToast';
+import { getVersion } from '@tauri-apps/api/app';
+import { openUrl } from '@tauri-apps/plugin-opener';
+import CustomSelect from '../components/CustomSelect.vue';
+
+const settings = useSettingsStore();
+const { showToast } = useToast();
+
+const appVersion = ref('');
+onMounted(async () => {
+  appVersion.value = await getVersion();
+});
+
+const closeActionValue = computed({
+  get: () => settings.closeAction,
+  set: (val: CloseAction) => settings.setCloseAction(val),
+});
+
+const downloadPathInput = ref(settings.downloadPath);
+const checkingUpdate = ref(false);
+const updateMessage = ref('');
+const updateMessageClass = ref('text-content-2');
+
+const themeOptions = [
+  { label: '深色', value: 'dark' as const },
+  { label: '浅色', value: 'light' as const },
+];
+
+function saveDownloadPath() {
+  settings.setDownloadPath(downloadPathInput.value.trim());
+  showToast('下载路径已保存', 'success');
+}
+
+async function checkUpdate() {
+  checkingUpdate.value = true;
+  updateMessage.value = '';
+  try {
+    await new Promise(r => setTimeout(r, 1500));
+    updateMessage.value = '当前已是最新版本';
+    updateMessageClass.value = 'text-accent-text';
+  } catch {
+    updateMessage.value = '检查更新失败，请稍后重试';
+    updateMessageClass.value = 'text-danger';
+  } finally {
+    checkingUpdate.value = false;
+  }
+}
+</script>