diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 5a5809dbeff9763e5efeafee09134dcd5f1ce8c3..0000000000000000000000000000000000000000
--- a/.editorconfig
+++ /dev/null
@@ -1,9 +0,0 @@
-[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
-charset = utf-8
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-end_of_line = lf
-max_line_length = 100
diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index 6313b56c57848efce05faa7aa7e901ccfc2886ea..0000000000000000000000000000000000000000
--- a/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* text=auto eol=lf
diff --git a/.gitignore b/.gitignore
index 8ee54e8d343e466a213c8c30aa04be77126b170d..2184ace34c28dd53a180a9e56cf6080725a1db62 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,30 +1,23 @@
-# Logs
-logs
-*.log
+.DS_Store
+node_modules
+#记得解除忽略dist目录
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
+.fleet
+.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-
-*.tsbuildinfo
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 29a2402ef050746efe041b9e3393bf33796407c3..0000000000000000000000000000000000000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 100
-}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index c92168f50e8ef2cadc802d087ce835d5961f8963..0000000000000000000000000000000000000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "esbenp.prettier-vscode"
-  ]
-}
diff --git a/README.md b/README.md
index 3ed2181385fc736fba933e2d97d45077ca200631..ec479a3e3cfac5aef149b90f0570afa3e05dc5e3 100644
--- a/README.md
+++ b/README.md
@@ -1,50 +1,184 @@
----
-title: Music
-emoji: 🐢
-colorFrom: purple
-colorTo: indigo
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: dist/index.html
----
-
-# vue
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
+# 🎵 Vue3 PWA 音乐应用
+
+一个基于 Vue3 的渐进式网络应用（PWA），模仿网易云音乐界面风格，支持13个音乐源，提供完整的音乐播放体验。
+
+## ✨ 功能特性
+
+### 🎯 核心功能
+- **多源音乐搜索** - 支持13个主流音乐平台
+- **全屏播放器** - 网易云风格界面，支持歌词显示
+- **收藏管理** - 收藏喜爱的歌曲
+- **播放历史** - 自动记录播放记录
+- **智能设置** - 音质、播放模式、主题等个性化设置
+
+### 🌟 技术特性
+- **PWA 支持** - 可安装到桌面，离线缓存
+- **响应式设计** - 适配手机、平板、桌面
+- **MediaSession API** - 支持媒体控制（锁屏控制）
+- **状态持久化** - 刷新不丢失播放状态
+- **网易云主题** - 完美复刻的视觉体验
+
+### 📱 支持的音乐源
+1. **网易云音乐** (默认)
+2. **QQ音乐**
+3. **酷狗音乐** 
+4. **酷我音乐**
+5. **咪咕音乐**
+6. **Spotify**
+7. **Apple Music**
+8. **YouTube Music**
+9. **JOOX**
+10. **TIDAL**
+11. **Deezer**
+12. **Qobuz**
+13. **喜马拉雅FM**
+
+## 🚀 快速开始
+
+### 环境要求
+- Node.js 16+ 
+- npm 或 yarn
+
+### 安装依赖
+```bash
 npm install
 ```
 
-### Compile and Hot-Reload for Development
-
-```sh
+### 启动开发服务器
+```bash
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### 或者直接运行启动脚本
+- Windows: 双击 `启动应用.bat`
+- macOS/Linux: 运行 `./启动应用.sh`
 
-```sh
+### 构建生产版本
+```bash
 npm run build
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+## 📁 项目结构
 
-```sh
-npm run lint
 ```
+vue-music/
+├── public/                 # 静态资源
+│   ├── icons/             # PWA 图标
+│   └── manifest.json      # PWA 配置
+├── src/
+│   ├── components/        # 组件
+│   │   ├── layout/       # 布局组件
+│   │   ├── search/       # 搜索相关
+│   │   ├── player/       # 播放器相关
+│   │   └── common/       # 通用组件
+│   ├── views/            # 页面组件
+│   ├── stores/           # Pinia 状态管理
+│   ├── services/         # API 服务
+│   ├── router/           # 路由配置
+│   └── styles/           # 全局样式
+├── 需求文档.md            # 完整需求说明
+└── 启动应用.bat/sh       # 快速启动脚本
+```
+
+## 🎮 使用说明
+
+### 基本操作
+1. **搜索音乐** - 在首页搜索框输入歌曲或歌手名
+2. **切换音源** - 点击搜索框旁的源选择按钮
+3. **播放控制** - 点击歌曲播放，使用底部播放条控制
+4. **全屏播放器** - 点击底部播放条进入全屏播放器
+5. **收藏歌曲** - 点击爱心图标收藏喜欢的歌曲
+
+### 高级功能
+- **播放模式** - 支持列表循环、随机播放、单曲循环
+- **歌词显示** - 全屏播放器支持歌词滚动显示
+- **设置调整** - 在设置页面个性化应用体验
+- **PWA 安装** - 在浏览器地址栏点击安装按钮
+
+## 🛠️ 技术栈
+
+- **框架**: Vue 3.4 + Composition API
+- **状态管理**: Pinia 2.1
+- **路由**: Vue Router 4.3  
+- **构建工具**: Vite 5.3
+- **PWA**: Vite PWA Plugin
+- **样式**: CSS3 + CSS Variables
+- **图标**: FontAwesome 6
+- **音乐API**: 自建聚合接口
+
+## ⚡ 性能优化
+
+- **代码分割** - 路由级别的代码分割
+- **图片懒加载** - 专辑封面按需加载
+- **请求缓存** - API 响应智能缓存
+- **Service Worker** - 静态资源离线缓存
+- **组件复用** - 高效的组件设计模式
+
+## 🔧 开发特性
+
+### 代码质量
+- **组件化架构** - 高内聚低耦合的组件设计
+- **TypeScript 支持** - 可选的类型检查
+- **ESLint 配置** - 代码风格统一
+- **响应式设计** - 移动优先的设计理念
+
+### 开发体验  
+- **热重载** - 代码修改实时预览
+- **自动导入** - 组件和工具函数自动导入
+- **开发工具** - Vue DevTools 完美支持
+- **错误处理** - 完善的错误边界处理
+
+## 📋 功能清单
+
+### ✅ 已完成功能
+- [x] 项目架构搭建
+- [x] PWA 配置
+- [x] 音乐API集成 (13个源)
+- [x] 状态管理 (Pinia)
+- [x] 首页搜索功能
+- [x] 搜索结果展示
+- [x] 全屏播放器
+- [x] 播放控制
+- [x] 进度条
+- [x] 歌词显示
+- [x] 收藏功能
+- [x] 播放历史
+- [x] 设置页面
+- [x] 响应式布局
+- [x] 通用组件库
+
+### 🔄 可扩展功能
+- [ ] 用户登录系统
+- [ ] 社交分享功能
+- [ ] 音乐下载功能
+- [ ] 播放列表导入导出
+- [ ] 桌面歌词显示
+- [ ] 均衡器设置
+- [ ] 定时关闭功能
+- [ ] 音乐推荐算法
+
+## 🤝 贡献指南
+
+欢迎提交 Issue 和 Pull Request！
+
+1. Fork 项目
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 打开 Pull Request
+
+## 📄 许可证
+
+本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情。
+
+## 🙏 致谢
+
+- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
+- [Vite](https://vitejs.dev/) - 下一代前端构建工具
+- [Pinia](https://pinia.vuejs.org/) - Vue 状态管理库
+- [FontAwesome](https://fontawesome.com/) - 图标库
+- [网易云音乐](https://music.163.com/) - UI 设计参考
+
+---
+
+**🎵 享受音乐，享受编程！**
\ No newline at end of file
diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..945fd4b8857c68b83309bc89e98fa817e63dbd01
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,1495 @@
+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>云音乐 - 在线音乐播放器</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background: #0c0c0c;
+            color: #fff;
+            overflow-x: hidden;
+        }
+
+        /* 背景动画 */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+            background-size: 400% 400%;
+            animation: gradientBG 15s ease infinite;
+            z-index: -2;
+        }
+
+        .bg-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(20px);
+            z-index: -1;
+        }
+
+        @keyframes gradientBG {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        /* 顶部导航 */
+        .navbar {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 15px 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .nav-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 30px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 24px;
+            font-weight: bold;
+            color: #fff;
+        }
+
+        .logo i {
+            color: #ff6b6b;
+            font-size: 28px;
+        }
+
+        .search-container {
+            flex: 1;
+            max-width: 600px;
+            margin: 0 40px;
+            position: relative;
+        }
+
+        .search-wrapper {
+            display: flex;
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 25px;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .search-wrapper:focus-within {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: #ff6b6b;
+            box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
+        }
+
+        .search-input {
+            flex: 1;
+            padding: 12px 20px;
+            background: transparent;
+            border: none;
+            color: #fff;
+            font-size: 16px;
+            outline: none;
+        }
+
+        .search-input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .source-select {
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            color: #fff;
+            padding: 12px 15px;
+            outline: none;
+            cursor: pointer;
+        }
+
+        .source-select option {
+            background: #2a2a2a;
+            color: #fff;
+            padding: 8px;
+        }
+
+        .search-btn {
+            background: #ff6b6b;
+            border: none;
+            color: #fff;
+            padding: 12px 20px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .search-btn:hover {
+            background: #ff5252;
+        }
+
+        /* 主要内容区域 */
+        .main-container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 30px;
+            display: grid;
+            grid-template-columns: 600px 450px 350px;
+            gap: 25px;
+            min-height: calc(100vh - 200px);
+            align-items: start;
+        }
+
+        /* 搜索结果区域 */
+        .content-section {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            padding: 25px;
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            min-width: 0;
+            overflow: hidden;
+        }
+
+        .section-title {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .search-results {
+            max-height: 600px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+        }
+
+        .search-results::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .search-results::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .search-results::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+        }
+
+        .song-item {
+            display: flex;
+            align-items: center;
+            padding: 15px 20px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 8px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .song-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .song-item:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: translateY(-2px);
+        }
+
+        .song-item:hover::before {
+            left: 100%;
+        }
+
+        .song-item.active {
+            background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(255, 107, 107, 0.1));
+            border: 1px solid rgba(255, 107, 107, 0.5);
+        }
+
+        .song-index {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            font-size: 14px;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .song-item.active .song-index {
+            background: linear-gradient(135deg, #ff6b6b, #ff5252);
+            color: #fff;
+        }
+
+        .song-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .song-name {
+            font-weight: 600;
+            margin-bottom: 5px;
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .song-artist {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .song-duration {
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 14px;
+            margin-left: 15px;
+        }
+
+        /* 播放器区域 */
+        .player-section {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            padding: 25px;
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            position: sticky;
+            top: 120px;
+            height: fit-content;
+            min-height: calc(100vh - 240px);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .current-song {
+            text-align: center;
+            margin-bottom: 25px;
+        }
+
+        .current-cover-container {
+            position: relative;
+            display: inline-block;
+            margin-bottom: 20px;
+        }
+
+        .current-cover {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            object-fit: cover;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+            transition: all 0.3s ease;
+            border: 6px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+        }
+
+        .current-cover::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 50%;
+            backdrop-filter: blur(10px);
+        }
+
+        .current-cover::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 12px;
+            height: 12px;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+        }
+
+        .current-cover.playing {
+            animation: rotate 20s linear infinite;
+        }
+
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .current-info h3 {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #fff;
+        }
+
+        .current-info p {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 16px;
+        }
+
+        /* 播放控制 */
+        .player-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 25px;
+        }
+
+        .control-btn {
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            border-radius: 50%;
+            color: #fff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .control-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(1.1);
+        }
+
+        .control-btn.small {
+            width: 45px;
+            height: 45px;
+            font-size: 18px;
+        }
+
+        .play-btn {
+            width: 65px;
+            height: 65px;
+            font-size: 28px;
+            background: linear-gradient(135deg, #ff6b6b, #ff5252);
+            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
+        }
+
+        .play-btn:hover {
+            background: linear-gradient(135deg, #ff5252, #ff4444);
+            box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
+        }
+
+        /* 进度条 */
+        .progress-container {
+            margin-bottom: 20px;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+            cursor: pointer;
+            margin-bottom: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #ff6b6b, #ff8a80);
+            border-radius: 3px;
+            width: 0%;
+            transition: width 0.1s ease;
+            position: relative;
+        }
+
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            right: -2px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 12px;
+            height: 12px;
+            background: #fff;
+            border-radius: 50%;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+
+        .time-info {
+            display: flex;
+            justify-content: space-between;
+            font-size: 13px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        /* 音量控制 */
+        .volume-container {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 25px;
+        }
+
+        .volume-icon {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 18px;
+        }
+
+        .volume-slider {
+            flex: 1;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+            outline: none;
+            cursor: pointer;
+            -webkit-appearance: none;
+        }
+
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            background: #ff6b6b;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        /* 音质选择 */
+        .quality-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            padding: 12px 15px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .quality-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 14px;
+        }
+
+        .quality-select {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            color: #fff;
+            padding: 8px 12px;
+            outline: none;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        .quality-select option {
+            background: #2a2a2a;
+            color: #fff;
+            padding: 8px;
+        }
+
+        /* 下载区域 */
+        .download-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .download-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 12px 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            color: #fff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 14px;
+        }
+
+        .download-btn:hover:not(:disabled) {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: #ff6b6b;
+            color: #ff6b6b;
+        }
+
+        .download-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        /* 歌曲操作按钮 */
+        .song-actions {
+            display: flex;
+            gap: 8px;
+            margin-right: 15px;
+        }
+
+        .action-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            color: rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+
+        .action-btn:hover {
+            background: rgba(255, 107, 107, 0.3);
+            color: #ff6b6b;
+            transform: scale(1.1);
+        }
+
+        /* 歌词区域 */
+        .lyrics-section {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            padding: 25px;
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            position: sticky;
+            top: 120px;
+            height: calc(100vh - 240px);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .lyrics-container {
+            flex: 1;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+            padding-right: 10px;
+        }
+
+        .lyrics-container::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .lyrics-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .lyrics-container::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+        }
+
+        .lyric-line {
+            padding: 8px 0;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border-radius: 6px;
+            padding-left: 10px;
+            margin-bottom: 4px;
+            color: rgba(255, 255, 255, 0.6);
+            line-height: 1.6;
+        }
+
+        .lyric-line:hover {
+            background: rgba(255, 255, 255, 0.05);
+            color: rgba(255, 255, 255, 0.8);
+        }
+
+        .lyric-line.active {
+            color: #ff6b6b;
+            font-weight: 600;
+            background: rgba(255, 107, 107, 0.1);
+            transform: scale(1.02);
+            border-left: 3px solid #ff6b6b;
+        }
+
+        /* 加载和错误状态 */
+        .loading, .error, .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .loading i, .error i, .empty-state i {
+            font-size: 48px;
+            margin-bottom: 15px;
+            display: block;
+        }
+
+        .loading i {
+            animation: spin 1s linear infinite;
+            color: #ff6b6b;
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .error i {
+            color: #ff5252;
+        }
+
+        .empty-state i {
+            color: rgba(255, 255, 255, 0.4);
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 1400px) {
+            .main-container {
+                grid-template-columns: 1fr 400px;
+                gap: 20px;
+                max-width: 1200px;
+            }
+            
+            .lyrics-section {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 1024px) {
+            .main-container {
+                grid-template-columns: 1fr;
+                gap: 20px;
+                padding: 20px;
+            }
+            
+            .nav-container {
+                padding: 0 20px;
+            }
+            
+            .search-container {
+                margin: 0 20px;
+            }
+            
+            .lyrics-section {
+                display: block;
+                position: static;
+                max-height: 300px;
+            }
+            
+            .player-section {
+                position: static;
+                min-height: auto;
+                height: auto;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .nav-container {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .search-container {
+                margin: 0;
+                max-width: none;
+            }
+            
+            .current-cover {
+                width: 180px;
+                height: 180px;
+            }
+            
+            .player-controls {
+                gap: 15px;
+            }
+        }
+
+        /* 自定义滚动条样式 */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-animation"></div>
+    <div class="bg-overlay"></div>
+
+    <!-- 顶部导航 -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">
+                <i class="fas fa-music"></i>
+                <span>云音乐</span>
+            </div>
+            
+            <div class="search-container">
+                <div class="search-wrapper">
+                    <input type="text" class="search-input" placeholder="搜索音乐、歌手、专辑..." id="searchInput">
+                    <select class="source-select" id="sourceSelect">
+                        <option value="netease">网易云音乐</option>
+                        <option value="tencent">QQ音乐</option>
+                        <option value="kuwo">酷我音乐</option>
+                        <option value="joox">JOOX</option>
+                        <option value="kugou">酷狗音乐</option>
+                        <option value="migu">咪咕音乐</option>
+                        <option value="deezer">Deezer</option>
+                        <option value="spotify">Spotify</option>
+                        <option value="apple">Apple Music</option>
+                        <option value="ytmusic">YouTube Music</option>
+                        <option value="tidal">TIDAL</option>
+                        <option value="qobuz">Qobuz</option>
+                        <option value="ximalaya">喜马拉雅</option>
+                    </select>
+                    <button class="search-btn" onclick="searchMusic()">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 主要内容 -->
+    <div class="main-container">
+        <!-- 搜索结果区域 -->
+        <div class="content-section">
+            <h2 class="section-title">
+                <i class="fas fa-list-music"></i>
+                搜索结果
+            </h2>
+            <div class="search-results" id="searchResults">
+                <div class="empty-state">
+                    <i class="fas fa-search"></i>
+                    <div>在上方搜索框输入关键词开始搜索音乐</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 播放器区域 -->
+        <div class="player-section">
+            <div class="current-song">
+                <div class="current-cover-container">
+                    <img class="current-cover" id="currentCover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSIyMCIvPgo8cGF0aCBkPSJNMTEwIDcwTDE0MCAx MTBIMTIwVjE1MEg5MFYxMTBINzBMMTEwIDcwWiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+Cjwvc3ZnPgo=" alt="专辑封面">
+                </div>
+                <div class="current-info">
+                    <h3 id="currentTitle">未选择歌曲</h3>
+                    <p id="currentArtist">请搜索并选择要播放的歌曲</p>
+                </div>
+            </div>
+
+            <div class="player-controls">
+                <button class="control-btn small" onclick="previousSong()">
+                    <i class="fas fa-step-backward"></i>
+                </button>
+                <button class="control-btn play-btn" id="playBtn" onclick="togglePlay()">
+                    <i class="fas fa-play"></i>
+                </button>
+                <button class="control-btn small" onclick="nextSong()">
+                    <i class="fas fa-step-forward"></i>
+                </button>
+            </div>
+
+            <div class="progress-container">
+                <div class="progress-bar" onclick="seekTo(event)">
+                    <div class="progress-fill" id="progressFill"></div>
+                </div>
+                <div class="time-info">
+                    <span id="currentTime">0:00</span>
+                    <span id="totalTime">0:00</span>
+                </div>
+            </div>
+
+            <!-- 音质选择 -->
+            <div class="quality-container">
+                <div class="quality-label">
+                    <i class="fas fa-music"></i>
+                    <span>音质</span>
+                </div>
+                <select class="quality-select" id="qualitySelect">
+                    <option value="128">标准 128K</option>
+                    <option value="192">较高 192K</option>
+                    <option value="320" selected>高品质 320K</option>
+                    <option value="740">无损 FLAC</option>
+                    <option value="999">Hi-Res</option>
+                </select>
+            </div>
+
+            <div class="volume-container">
+                <i class="fas fa-volume-up volume-icon"></i>
+                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80" onchange="setVolume(this.value)">
+            </div>
+
+            <!-- 下载区域 -->
+            <div class="download-container">
+                <button class="download-btn" onclick="downloadCurrentSong()" id="downloadSongBtn" disabled>
+                    <i class="fas fa-download"></i>
+                    <span>下载音乐</span>
+                </button>
+                <button class="download-btn" onclick="downloadCurrentLyric()" id="downloadLyricBtn" disabled>
+                    <i class="fas fa-file-text"></i>
+                    <span>下载歌词</span>
+                </button>
+            </div>
+
+            <audio id="audioPlayer" preload="metadata"></audio>
+        </div>
+
+        <!-- 歌词区域 -->
+        <div class="lyrics-section">
+            <h2 class="section-title">
+                <i class="fas fa-align-left"></i>
+                歌词
+            </h2>
+            <div class="lyrics-container" id="lyricsContainer">
+                <div class="lyric-line">暂无歌词</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
+        let currentPlaylist = [];
+        let currentIndex = -1;
+        let currentLyrics = [];
+        let isPlaying = false;
+
+        const audioPlayer = document.getElementById('audioPlayer');
+        const playBtn = document.getElementById('playBtn');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeSpan = document.getElementById('currentTime');
+        const totalTimeSpan = document.getElementById('totalTime');
+        const lyricsContainer = document.getElementById('lyricsContainer');
+        const currentCover = document.getElementById('currentCover');
+
+        // 搜索音乐
+        async function searchMusic() {
+            const keyword = document.getElementById('searchInput').value.trim();
+            const source = document.getElementById('sourceSelect').value;
+            
+            if (!keyword) {
+                showNotification('请输入搜索关键词', 'warning');
+                return;
+            }
+
+            const resultsContainer = document.getElementById('searchResults');
+            resultsContainer.innerHTML = `
+                <div class="loading">
+                    <i class="fas fa-spinner"></i>
+                    <div>正在搜索音乐...</div>
+                </div>
+            `;
+
+            try {
+                const response = await fetch(`${API_BASE}?types=search&source=${source}&name=${encodeURIComponent(keyword)}&count=30`);
+                const data = await response.json();
+
+                if (data && data.length > 0) {
+                    currentPlaylist = data;
+                    displaySearchResults(data);
+                } else {
+                    resultsContainer.innerHTML = `
+                        <div class="error">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            <div>未找到相关歌曲，请尝试其他关键词</div>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                console.error('搜索失败:', error);
+                resultsContainer.innerHTML = `
+                    <div class="error">
+                        <i class="fas fa-wifi"></i>
+                        <div>网络连接失败，请检查网络后重试</div>
+                    </div>
+                `;
+            }
+        }
+
+        // 获取专辑图片URL
+        async function getAlbumCoverUrl(song, size = 300) {
+            if (!song.pic_id) {
+                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0yNy41IDE4TDM1IDI3LjVIMzBWMzdIMjVWMjcuNUgyMEwyNy41IDE4WiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+Cjwvc3ZnPgo=';
+            }
+
+            try {
+                const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`);
+                const data = await response.json();
+                
+                if (data && data.url) {
+                    return data.url;
+                }
+            } catch (error) {
+                console.error('获取专辑图失败:', error);
+            }
+            
+            return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0yNy41IDE4TDM1IDI3LjVIMzBWMzdIMjVWMjcuNUgyMEwyNy41IDE4WiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+Cjwvc3ZnPgo=';
+        }
+
+        // 显示搜索结果
+        async function displaySearchResults(songs) {
+            const resultsContainer = document.getElementById('searchResults');
+            resultsContainer.innerHTML = '';
+
+            for (let index = 0; index < songs.length; index++) {
+                const song = songs[index];
+                const songItem = document.createElement('div');
+                songItem.className = 'song-item';
+                songItem.onclick = () => playSong(index);
+
+                songItem.innerHTML = `
+                    <div class="song-index">${(index + 1).toString().padStart(2, '0')}</div>
+                    <div class="song-info">
+                        <div class="song-name">${song.name}</div>
+                        <div class="song-artist">${Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist} · ${song.album}</div>
+                    </div>
+                    <div class="song-actions">
+                        <button class="action-btn" onclick="downloadSong(${index})" title="下载音乐">
+                            <i class="fas fa-download"></i>
+                        </button>
+                        <button class="action-btn" onclick="downloadLyric(${index})" title="下载歌词">
+                            <i class="fas fa-file-text"></i>
+                        </button>
+                    </div>
+                    <div class="song-duration">--:--</div>
+                `;
+
+                resultsContainer.appendChild(songItem);
+            }
+        }
+
+        // 播放歌曲
+        async function playSong(index) {
+            if (index < 0 || index >= currentPlaylist.length) return;
+
+            currentIndex = index;
+            const song = currentPlaylist[index];
+
+            // 更新UI
+            await updateCurrentSongInfo(song);
+            updateActiveItem();
+
+            try {
+                showNotification('正在加载音乐...', 'info');
+                
+                // 获取当前选择的音质
+                const quality = document.getElementById('qualitySelect').value;
+                
+                // 获取音乐URL
+                const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
+                const urlData = await urlResponse.json();
+
+                if (urlData && urlData.url) {
+                    audioPlayer.src = urlData.url;
+                    audioPlayer.load();
+                    
+                    // 获取歌词
+                    loadLyrics(song);
+                    
+                    // 启用下载按钮
+                    document.getElementById('downloadSongBtn').disabled = false;
+                    document.getElementById('downloadLyricBtn').disabled = false;
+                    
+                    // 自动播放
+                    const playPromise = audioPlayer.play();
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => {
+                            isPlaying = true;
+                            updatePlayButton();
+                            currentCover.classList.add('playing');
+                            showNotification(`开始播放 (${getQualityText(urlData.br || quality)})`, 'success');
+                        }).catch(error => {
+                            console.error('播放失败:', error);
+                            showNotification('播放失败，请尝试其他歌曲', 'error');
+                        });
+                    }
+                } else {
+                    showNotification('无法获取音乐链接，请尝试其他歌曲或更换音质', 'error');
+                }
+            } catch (error) {
+                console.error('播放失败:', error);
+                showNotification('播放失败，请检查网络连接', 'error');
+            }
+        }
+
+        // 获取音质文本
+        function getQualityText(br) {
+            const qualityMap = {
+                '128': '标准音质',
+                '192': '较高音质', 
+                '320': '高品质',
+                '740': '无损音质',
+                '999': 'Hi-Res音质'
+            };
+            return qualityMap[br] || `${br}K`;
+        }
+
+        // 下载当前播放的歌曲
+        async function downloadCurrentSong() {
+            if (currentIndex === -1) {
+                showNotification('请先选择要下载的歌曲', 'warning');
+                return;
+            }
+            
+            const song = currentPlaylist[currentIndex];
+            await downloadSong(currentIndex);
+        }
+
+        // 下载当前播放的歌词
+        async function downloadCurrentLyric() {
+            if (currentIndex === -1) {
+                showNotification('请先选择要下载歌词的歌曲', 'warning');
+                return;
+            }
+            
+            await downloadLyric(currentIndex);
+        }
+
+        // 下载歌曲
+        async function downloadSong(index) {
+            const song = currentPlaylist[index];
+            const quality = document.getElementById('qualitySelect').value;
+            
+            try {
+                showNotification('正在获取下载链接...', 'info');
+                
+                const response = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
+                const data = await response.json();
+                
+                if (data && data.url) {
+                    // 创建下载链接
+                    const link = document.createElement('a');
+                    link.href = data.url;
+                    link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.mp3`;
+                    link.target = '_blank';
+                    
+                    // 触发下载
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    
+                    showNotification('开始下载音乐文件', 'success');
+                } else {
+                    showNotification('无法获取下载链接', 'error');
+                }
+            } catch (error) {
+                console.error('下载失败:', error);
+                showNotification('下载失败，请稍后重试', 'error');
+            }
+        }
+
+        // 下载歌词
+        async function downloadLyric(index) {
+            const song = currentPlaylist[index];
+            
+            try {
+                showNotification('正在获取歌词...', 'info');
+                
+                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
+                const data = await response.json();
+                
+                if (data && data.lyric) {
+                    // 创建歌词文件内容
+                    let lyricContent = `歌曲：${song.name}
+`;
+                    lyricContent += `歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}
+`;
+                    lyricContent += `专辑：${song.album}
+`;
+                    lyricContent += `来源：${song.source}
+
+`;
+                    lyricContent += data.lyric;
+                    
+                    if (data.tlyric) {
+                        lyricContent += '=== 翻译歌词 ===';
+                        lyricContent += data.tlyric;
+                    }
+                    
+                    // 创建Blob并下载
+                    const blob = new Blob([lyricContent], { type: 'text/plain;charset=utf-8' });
+                    const url = URL.createObjectURL(blob);
+                    
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.lrc`;
+                    
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    
+                    URL.revokeObjectURL(url);
+                    showNotification('歌词下载完成', 'success');
+                } else {
+                    showNotification('该歌曲暂无歌词', 'warning');
+                }
+            } catch (error) {
+                console.error('下载歌词失败:', error);
+                showNotification('下载歌词失败，请稍后重试', 'error');
+            }
+        }
+
+        // 音质改变时重新加载当前歌曲
+        document.getElementById('qualitySelect').addEventListener('change', () => {
+            if (currentIndex !== -1 && audioPlayer.src) {
+                const currentTime = audioPlayer.currentTime;
+                const wasPlaying = isPlaying;
+                
+                playSong(currentIndex).then(() => {
+                    // 恢复播放位置
+                    audioPlayer.currentTime = currentTime;
+                    if (!wasPlaying) {
+                        audioPlayer.pause();
+                    }
+                });
+            }
+        });
+
+        // 更新当前歌曲信息
+        async function updateCurrentSongInfo(song) {
+            document.getElementById('currentTitle').textContent = song.name;
+            document.getElementById('currentArtist').textContent = 
+                `${Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist} · ${song.album}`;
+
+            // 获取专辑图片URL
+            const coverUrl = await getAlbumCoverUrl(song, 500);
+            currentCover.src = coverUrl;
+        }
+
+        // 更新活跃项目
+        function updateActiveItem() {
+            document.querySelectorAll('.song-item').forEach((item, index) => {
+                item.classList.toggle('active', index === currentIndex);
+            });
+        }
+
+        // 更新播放按钮
+        function updatePlayButton() {
+            const icon = playBtn.querySelector('i');
+            if (isPlaying) {
+                icon.className = 'fas fa-pause';
+            } else {
+                icon.className = 'fas fa-play';
+            }
+        }
+
+        // 加载歌词
+        async function loadLyrics(song) {
+            try {
+                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
+                const data = await response.json();
+
+                if (data && data.lyric) {
+                    parseLyrics(data.lyric);
+                } else {
+                    lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
+                    currentLyrics = [];
+                }
+            } catch (error) {
+                console.error('获取歌词失败:', error);
+                lyricsContainer.innerHTML = '<div class="lyric-line">歌词加载失败</div>';
+                currentLyrics = [];
+            }
+        }
+
+        // 解析LRC歌词
+        function parseLyrics(lrcText) {
+            const lines = lrcText.split('\n');
+            currentLyrics = [];
+
+            lines.forEach(line => {
+                const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
+                if (match) {
+                    const minutes = parseInt(match[1]);
+                    const seconds = parseInt(match[2]);
+                    const milliseconds = parseInt(match[3].padEnd(3, '0'));
+                    const text = match[4].trim();
+
+                    if (text) {
+                        const time = minutes * 60 + seconds + milliseconds / 1000;
+                        currentLyrics.push({ time, text });
+                    }
+                }
+            });
+
+            currentLyrics.sort((a, b) => a.time - b.time);
+            displayLyrics();
+        }
+
+        // 显示歌词
+        function displayLyrics() {
+            lyricsContainer.innerHTML = '';
+            if (currentLyrics.length === 0) {
+                lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
+                return;
+            }
+
+            currentLyrics.forEach((lyric, index) => {
+                const lyricLine = document.createElement('div');
+                lyricLine.className = 'lyric-line';
+                lyricLine.textContent = lyric.text;
+                lyricLine.onclick = () => {
+                    audioPlayer.currentTime = lyric.time;
+                };
+                lyricsContainer.appendChild(lyricLine);
+            });
+        }
+
+        // 更新歌词高亮
+        function updateLyricHighlight() {
+            const currentTime = audioPlayer.currentTime;
+            let activeIndex = -1;
+
+            for (let i = 0; i < currentLyrics.length; i++) {
+                if (currentLyrics[i].time <= currentTime) {
+                    activeIndex = i;
+                } else {
+                    break;
+                }
+            }
+
+            const lyricLines = document.querySelectorAll('.lyric-line');
+            lyricLines.forEach((line, index) => {
+                line.classList.toggle('active', index === activeIndex);
+            });
+
+            // 改进的自动滚动逻辑
+            if (activeIndex >= 0 && activeIndex < lyricLines.length) {
+                const activeLine = lyricLines[activeIndex];
+                const container = document.getElementById('lyricsContainer');
+                
+                if (activeLine && container) {
+                    const containerHeight = container.clientHeight;
+                    const lineHeight = activeLine.offsetHeight;
+                    const lineOffsetTop = activeLine.offsetTop;
+                    const currentScrollTop = container.scrollTop;
+                    
+                    // 计算理想的滚动位置（将当前歌词放在容器中间）
+                    const idealScrollTop = lineOffsetTop - (containerHeight / 2) + (lineHeight / 2);
+                    
+                    // 只有当需要滚动超过一定距离时才滚动
+                    const scrollThreshold = containerHeight * 0.3;
+                    if (Math.abs(idealScrollTop - currentScrollTop) > scrollThreshold) {
+                        container.scrollTo({
+                            top: Math.max(0, idealScrollTop),
+                            behavior: 'smooth'
+                        });
+                    }
+                }
+            }
+        }
+
+        // 播放控制
+        function togglePlay() {
+            if (audioPlayer.src) {
+                if (isPlaying) {
+                    audioPlayer.pause();
+                } else {
+                    audioPlayer.play();
+                }
+            } else {
+                showNotification('请先选择要播放的歌曲', 'warning');
+            }
+        }
+
+        function previousSong() {
+            if (currentIndex > 0) {
+                playSong(currentIndex - 1);
+            } else {
+                showNotification('已经是第一首歌曲', 'info');
+            }
+        }
+
+        function nextSong() {
+            if (currentIndex < currentPlaylist.length - 1) {
+                playSong(currentIndex + 1);
+            } else {
+                showNotification('已经是最后一首歌曲', 'info');
+            }
+        }
+
+        // 进度控制
+        function seekTo(event) {
+            if (audioPlayer.duration) {
+                const rect = event.target.getBoundingClientRect();
+                const percent = (event.clientX - rect.left) / rect.width;
+                audioPlayer.currentTime = percent * audioPlayer.duration;
+            }
+        }
+
+        function setVolume(value) {
+            audioPlayer.volume = value / 100;
+            
+            // 更新音量图标
+            const volumeIcon = document.querySelector('.volume-icon');
+            if (value == 0) {
+                volumeIcon.className = 'fas fa-volume-mute volume-icon';
+            } else if (value < 50) {
+                volumeIcon.className = 'fas fa-volume-down volume-icon';
+            } else {
+                volumeIcon.className = 'fas fa-volume-up volume-icon';
+            }
+        }
+
+        // 格式化时间
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 通知系统
+        function showNotification(message, type = 'info') {
+            // 创建通知元素
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                top: 100px;
+                right: 30px;
+                background: ${type === 'success' ? 'rgba(76, 175, 80, 0.9)' : 
+                           type === 'error' ? 'rgba(244, 67, 54, 0.9)' : 
+                           type === 'warning' ? 'rgba(255, 152, 0, 0.9)' : 
+                           'rgba(33, 150, 243, 0.9)'};
+                color: white;
+                padding: 15px 20px;
+                border-radius: 10px;
+                backdrop-filter: blur(10px);
+                box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+                z-index: 1000;
+                transform: translateX(400px);
+                transition: transform 0.3s ease;
+                max-width: 300px;
+                font-size: 14px;
+            `;
+            notification.textContent = message;
+            
+            document.body.appendChild(notification);
+            
+            // 显示动画
+            setTimeout(() => {
+                notification.style.transform = 'translateX(0)';
+            }, 100);
+            
+            // 自动隐藏
+            setTimeout(() => {
+                notification.style.transform = 'translateX(400px)';
+                setTimeout(() => {
+                    document.body.removeChild(notification);
+                }, 300);
+            }, 3000);
+        }
+
+        // 音频事件监听
+        audioPlayer.addEventListener('timeupdate', () => {
+            if (audioPlayer.duration) {
+                const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+                progressFill.style.width = percent + '%';
+                currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
+                updateLyricHighlight();
+            }
+        });
+
+        audioPlayer.addEventListener('loadedmetadata', () => {
+            totalTimeSpan.textContent = formatTime(audioPlayer.duration);
+        });
+
+        audioPlayer.addEventListener('ended', () => {
+            nextSong();
+        });
+
+        audioPlayer.addEventListener('play', () => {
+            isPlaying = true;
+            updatePlayButton();
+            currentCover.classList.add('playing');
+        });
+
+        audioPlayer.addEventListener('pause', () => {
+            isPlaying = false;
+            updatePlayButton();
+            currentCover.classList.remove('playing');
+        });
+
+        // 键盘快捷键
+        document.addEventListener('keydown', (e) => {
+            if (e.code === 'Space' && e.target.tagName !== 'INPUT') {
+                e.preventDefault();
+                togglePlay();
+            } else if (e.code === 'ArrowLeft' && e.target.tagName !== 'INPUT') {
+                e.preventDefault();
+                previousSong();
+            } else if (e.code === 'ArrowRight' && e.target.tagName !== 'INPUT') {
+                e.preventDefault();
+                nextSong();
+            }
+        });
+
+        // 搜索框回车事件
+        document.getElementById('searchInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                searchMusic();
+            }
+        });
+
+        // 初始化
+        setVolume(80);
+        
+        // 页面加载完成后的欢迎信息
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                showNotification('欢迎使用云音乐播放器！', 'success');
+            }, 1000);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/env.d.ts b/env.d.ts
deleted file mode 100644
index 11f02fe2a0061d6e6e1f271b21da95423b448b32..0000000000000000000000000000000000000000
--- a/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/eslint.config.ts b/eslint.config.ts
deleted file mode 100644
index 20475f81e2072a0ab1df6f4ba6b0a2cd2b8a1afd..0000000000000000000000000000000000000000
--- a/eslint.config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { globalIgnores } from 'eslint/config'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import pluginVue from 'eslint-plugin-vue'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
-
-// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
-// import { configureVueProject } from '@vue/eslint-config-typescript'
-// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
-// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
-
-export default defineConfigWithVueTs(
-  {
-    name: 'app/files-to-lint',
-    files: ['**/*.{ts,mts,tsx,vue}'],
-  },
-
-  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
-
-  pluginVue.configs['flat/essential'],
-  vueTsConfigs.recommended,
-  skipFormatting,
-)
diff --git a/index.html b/index.html
index 9e5fc8f06c69dd7697ad566f198ae6577fdc15b2..cd0154e43c90d41b2bea3bda7b0aaee2293e78bd 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,30 @@
 <!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=auto">
+  <title>云音乐PWA</title>
+
+  <!-- PWA相关 -->
+  <link rel="icon" href="/favicon.svg">
+  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.svg">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="云音乐">
+
+  <!-- iOS状态栏和安全区域适配 -->
+  <meta name="format-detection" content="telephone=no">
+  <meta name="apple-touch-fullscreen" content="yes">
+
+  <!-- 主题色 -->
+  <meta name="theme-color" content="#ff6b6b">
+  <meta name="msapplication-TileColor" content="#ff6b6b">
+
+  <!-- Font Awesome图标库 -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..e9516f691679c9beb3a605536cadbf1ab14fc75e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6227 @@
+{
+  "name": "vue-music-pwa",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "vue-music-pwa",
+      "version": "1.0.0",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "pinia": "^2.1.0",
+        "vue": "^3.4.0",
+        "vue-router": "^4.2.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^4.5.0",
+        "vite": "^5.0.0",
+        "vite-plugin-pwa": "^0.17.0",
+        "workbox-window": "^7.0.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@apideck/better-ajv-errors": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
+      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-schema": "^0.4.0",
+        "jsonpointer": "^5.0.0",
+        "leven": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "ajv": ">=8"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.28.0.tgz",
+      "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.28.3.tgz",
+      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.3",
+        "@babel/parser": "^7.28.3",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.3.tgz",
+      "integrity": "sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.27.1.tgz",
+      "integrity": "sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "regexpu-core": "^6.2.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.5.tgz",
+      "integrity": "sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "debug": "^4.4.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.22.10"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
+      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
+      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-wrap-function": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-wrap-function/-/helper-wrap-function-7.28.3.tgz",
+      "integrity": "sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.3",
+        "@babel/types": "^7.28.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.28.3.tgz",
+      "integrity": "sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.28.3.tgz",
+      "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.27.1.tgz",
+      "integrity": "sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
+      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
+      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
+      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-transform-optional-chaining": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.28.3.tgz",
+      "integrity": "sha512-b6YTX108evsvE4YgWyQ921ZAFFQm3Bn+CA3+ZXlNVnPhx+UfsVURoPjfGAPCjBgrqo30yX/C2nZGX96DxvR9Iw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.27.1.tgz",
+      "integrity": "sha512-UT/Jrhw57xg4ILHLFnzFpPDlMbcdEicaAtjPQpbj9wa8T4r5KVWCimHcL/460g8Ht0DMxDyjsLgiWSkVjnwPFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
+      "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
+      "integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.28.0.tgz",
+      "integrity": "sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-remap-async-to-generator": "^7.27.1",
+        "@babel/traverse": "^7.28.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.27.1.tgz",
+      "integrity": "sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-remap-async-to-generator": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
+      "integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.0.tgz",
+      "integrity": "sha512-gKKnwjpdx5sER/wl0WN0efUBFzF/56YZO0RJrSYP4CljXnP31ByY7fol89AzomdlLNzI36AvOTmYHsnZTCkq8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.27.1.tgz",
+      "integrity": "sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.28.3.tgz",
+      "integrity": "sha512-LtPXlBbRoc4Njl/oh1CeD/3jC+atytbnf/UqLoqTDcEYGUPj022+rvfkbDYieUrSj3CaV4yHDByPE+T2HwfsJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.3",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.3.tgz",
+      "integrity": "sha512-DoEWC5SuxuARF2KdKmGUq3ghfPMO6ZzR12Dnp5gubwbeWJo4dbNWXJPVlwvh4Zlq6Z7YVvL8VFxeSOJgjsx4Sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.27.1.tgz",
+      "integrity": "sha512-lj9PGWvMTVksbWiDT2tW68zGS/cyo4AkZ/QTp0sQT0mjPopCmrSkzxeXkznjqBxzDI6TclZhOJbBmbBLjuOZUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/template": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.0.tgz",
+      "integrity": "sha512-v1nrSMBiKcodhsyJ4Gf+Z0U/yawmJDBOTpEB3mcQY52r9RIyPneGyAS/yM6seP/8I+mWI3elOMtT5dB8GJVs+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.28.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.27.1.tgz",
+      "integrity": "sha512-gEbkDVGRvjj7+T1ivxrfgygpT7GUd4vmODtYpbs0gZATdkX8/iSnOtZSxiZnsgm1YjTgjI6VKBGSJJevkrclzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
+      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.27.1.tgz",
+      "integrity": "sha512-hkGcueTEzuhB30B3eJCbCYeCaaEQOmQR0AdvzpD4LoN0GXMWzzGSuRrxR2xTnCrvNbVwK9N6/jQ92GSLfiZWoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
+      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-explicit-resource-management": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.0.tgz",
+      "integrity": "sha512-K8nhUcn3f6iB+P3gwCv/no7OdzOZQcKchW6N389V6PD8NUWKZHzndOd9sPDVbMoBsbmjMqlB4L9fm+fEFNVlwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-transform-destructuring": "^7.28.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.27.1.tgz",
+      "integrity": "sha512-uspvXnhHvGKf2r4VVtBpeFnuDWsJLQ6MF6lGJLC89jBR1uoVeqM416AZtTuhTezOfgHicpJQmoD5YUakO/YmXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
+      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
+      "integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
+      "integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.27.1.tgz",
+      "integrity": "sha512-6WVLVJiTjqcQauBhn1LkICsR2H+zm62I3h9faTDKt1qP4jn2o72tSvqMwtGFKGTpojce0gJs+76eZ2uCHRZh0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
+      "integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.27.1.tgz",
+      "integrity": "sha512-SJvDs5dXxiae4FbSL1aBJlG4wvl594N6YEVVn9e3JGulwioy6z3oPjx/sQBO3Y4NwUu5HNix6KJ3wBZoewcdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
+      "integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
+      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.27.1.tgz",
+      "integrity": "sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.27.1.tgz",
+      "integrity": "sha512-w5N1XzsRbc0PQStASMksmUeqECuzKuTJer7kFagK8AXgpCMkeDMO5S+aaFb7A51ZYDF7XI34qsTX+fkHiIm5yA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
+      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.27.1.tgz",
+      "integrity": "sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
+      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.27.1.tgz",
+      "integrity": "sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.27.1.tgz",
+      "integrity": "sha512-fdPKAcujuvEChxDBJ5c+0BTaS6revLV7CJL08e4m3de8qJfNIuCc2nc7XJYOjBoTMJeqSmwXJ0ypE14RCjLwaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.0.tgz",
+      "integrity": "sha512-9VNGikXxzu5eCiQjdE4IZn8sb9q7Xsk5EXLDBKUYg1e/Tve8/05+KJEtcxGxAgCY5t/BpKQM+JEL/yT4tvgiUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-transform-destructuring": "^7.28.0",
+        "@babel/plugin-transform-parameters": "^7.27.7",
+        "@babel/traverse": "^7.28.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
+      "integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.27.1.tgz",
+      "integrity": "sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.27.1.tgz",
+      "integrity": "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.27.7",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
+      "integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.27.1.tgz",
+      "integrity": "sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.27.1.tgz",
+      "integrity": "sha512-5J+IhqTi1XPa0DXF83jYOaARrX+41gOewWbkPyjMNRDqgOCqdffGh8L3f/Ek5utaEBZExjSAzcyjmV9SSAWObQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
+      "integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.28.3.tgz",
+      "integrity": "sha512-K3/M/a4+ESb5LEldjQb+XSrpY0nF+ZBFlTCbSnKaYAMfD8v33O6PMs4uYnOk19HlcsI8WMu3McdFPTiQHF/1/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regexp-modifiers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.27.1.tgz",
+      "integrity": "sha512-TtEciroaiODtXvLZv4rmfMhkCv8jx3wgKpL68PuiPh2M4fvz5jhsA7697N1gMvkvr/JTF13DrFYyEbY9U7cVPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
+      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
+      "integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.27.1.tgz",
+      "integrity": "sha512-kpb3HUqaILBJcRFVhFUs6Trdd4mkrzcGXss+6/mxUd273PfbWqSDHRzMT2234gIg2QYfAjvXLSquP1xECSg09Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
+      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
+      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
+      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.27.1.tgz",
+      "integrity": "sha512-uW20S39PnaTImxp39O5qFlHLS9LJEmANjMG7SxIhap8rCHqu0Ik+tLEPX5DKmHn6CsWQ7j3lix2tFOa5YtL12Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
+      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.27.1.tgz",
+      "integrity": "sha512-EtkOujbc4cgvb0mlpQefi4NTPBzhSIevblFevACNLUspmrALgmEBdL/XfnyyITfd8fKBZrZys92zOWcik7j9Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/preset-env/-/preset-env-7.28.3.tgz",
+      "integrity": "sha512-ROiDcM+GbYVPYBOeCR6uBXKkQpBExLl8k9HO1ygXEyds39j+vCCsjmj7S8GOniZQlEs81QlkdJZe76IpLSiqpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.0",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.27.1",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.3",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-import-assertions": "^7.27.1",
+        "@babel/plugin-syntax-import-attributes": "^7.27.1",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.27.1",
+        "@babel/plugin-transform-async-generator-functions": "^7.28.0",
+        "@babel/plugin-transform-async-to-generator": "^7.27.1",
+        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
+        "@babel/plugin-transform-block-scoping": "^7.28.0",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-class-static-block": "^7.28.3",
+        "@babel/plugin-transform-classes": "^7.28.3",
+        "@babel/plugin-transform-computed-properties": "^7.27.1",
+        "@babel/plugin-transform-destructuring": "^7.28.0",
+        "@babel/plugin-transform-dotall-regex": "^7.27.1",
+        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.27.1",
+        "@babel/plugin-transform-dynamic-import": "^7.27.1",
+        "@babel/plugin-transform-explicit-resource-management": "^7.28.0",
+        "@babel/plugin-transform-exponentiation-operator": "^7.27.1",
+        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
+        "@babel/plugin-transform-for-of": "^7.27.1",
+        "@babel/plugin-transform-function-name": "^7.27.1",
+        "@babel/plugin-transform-json-strings": "^7.27.1",
+        "@babel/plugin-transform-literals": "^7.27.1",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.27.1",
+        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
+        "@babel/plugin-transform-modules-amd": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+        "@babel/plugin-transform-modules-systemjs": "^7.27.1",
+        "@babel/plugin-transform-modules-umd": "^7.27.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1",
+        "@babel/plugin-transform-new-target": "^7.27.1",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+        "@babel/plugin-transform-numeric-separator": "^7.27.1",
+        "@babel/plugin-transform-object-rest-spread": "^7.28.0",
+        "@babel/plugin-transform-object-super": "^7.27.1",
+        "@babel/plugin-transform-optional-catch-binding": "^7.27.1",
+        "@babel/plugin-transform-optional-chaining": "^7.27.1",
+        "@babel/plugin-transform-parameters": "^7.27.7",
+        "@babel/plugin-transform-private-methods": "^7.27.1",
+        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+        "@babel/plugin-transform-property-literals": "^7.27.1",
+        "@babel/plugin-transform-regenerator": "^7.28.3",
+        "@babel/plugin-transform-regexp-modifiers": "^7.27.1",
+        "@babel/plugin-transform-reserved-words": "^7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
+        "@babel/plugin-transform-spread": "^7.27.1",
+        "@babel/plugin-transform-sticky-regex": "^7.27.1",
+        "@babel/plugin-transform-template-literals": "^7.27.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
+        "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
+        "@babel/plugin-transform-unicode-regex": "^7.27.1",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.27.1",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.14",
+        "babel-plugin-polyfill-corejs3": "^0.13.0",
+        "babel-plugin-polyfill-regenerator": "^0.6.5",
+        "core-js-compat": "^3.43.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmmirror.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.28.3.tgz",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.28.3.tgz",
+      "integrity": "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.3",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.2",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.2",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.2.tgz",
+      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.30",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
+      "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
+      "integrity": "sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.0.tgz",
+      "integrity": "sha512-lVgpeQyy4fWN5QYebtW4buT/4kn4p4IJ+kDNB4uYNT5b8c8DLJDg6titg20NIg7E8RWwdWZORW6vUFfrLyG3KQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.50.0.tgz",
+      "integrity": "sha512-2O73dR4Dc9bp+wSYhviP6sDziurB5/HCym7xILKifWdE9UsOe2FtNcM+I4xZjKrfLJnq5UR8k9riB87gauiQtw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.50.0.tgz",
+      "integrity": "sha512-vwSXQN8T4sKf1RHr1F0s98Pf8UPz7pS6P3LG9NSmuw0TVh7EmaE+5Ny7hJOZ0M2yuTctEsHHRTMi2wuHkdS6Hg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.50.0.tgz",
+      "integrity": "sha512-cQp/WG8HE7BCGyFVuzUg0FNmupxC+EPZEwWu2FCGGw5WDT1o2/YlENbm5e9SMvfDFR6FRhVCBePLqj0o8MN7Vw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.50.0.tgz",
+      "integrity": "sha512-UR1uTJFU/p801DvvBbtDD7z9mQL8J80xB0bR7DqW7UGQHRm/OaKzp4is7sQSdbt2pjjSS72eAtRh43hNduTnnQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.50.0.tgz",
+      "integrity": "sha512-G/DKyS6PK0dD0+VEzH/6n/hWDNPDZSMBmqsElWnCRGrYOb2jC0VSupp7UAHHQ4+QILwkxSMaYIbQ72dktp8pKA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.50.0.tgz",
+      "integrity": "sha512-u72Mzc6jyJwKjJbZZcIYmd9bumJu7KNmHYdue43vT1rXPm2rITwmPWF0mmPzLm9/vJWxIRbao/jrQmxTO0Sm9w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.50.0.tgz",
+      "integrity": "sha512-S4UefYdV0tnynDJV1mdkNawp0E5Qm2MtSs330IyHgaccOFrwqsvgigUD29uT+B/70PDY1eQ3t40+xf6wIvXJyg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.50.0.tgz",
+      "integrity": "sha512-1EhkSvUQXJsIhk4msxP5nNAUWoB4MFDHhtc4gAYvnqoHlaL9V3F37pNHabndawsfy/Tp7BPiy/aSa6XBYbaD1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.50.0.tgz",
+      "integrity": "sha512-EtBDIZuDtVg75xIPIK1l5vCXNNCIRM0OBPUG+tbApDuJAy9mKago6QxX+tfMzbCI6tXEhMuZuN1+CU8iDW+0UQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.50.0.tgz",
+      "integrity": "sha512-BGYSwJdMP0hT5CCmljuSNx7+k+0upweM2M4YGfFBjnFSZMHOLYR0gEEj/dxyYJ6Zc6AiSeaBY8dWOa11GF/ppQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.50.0.tgz",
+      "integrity": "sha512-I1gSMzkVe1KzAxKAroCJL30hA4DqSi+wGc5gviD0y3IL/VkvcnAqwBf4RHXHyvH66YVHxpKO8ojrgc4SrWAnLg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.50.0.tgz",
+      "integrity": "sha512-bSbWlY3jZo7molh4tc5dKfeSxkqnf48UsLqYbUhnkdnfgZjgufLS/NTA8PcP/dnvct5CCdNkABJ56CbclMRYCA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.50.0.tgz",
+      "integrity": "sha512-LSXSGumSURzEQLT2e4sFqFOv3LWZsEF8FK7AAv9zHZNDdMnUPYH3t8ZlaeYYZyTXnsob3htwTKeWtBIkPV27iQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.50.0.tgz",
+      "integrity": "sha512-CxRKyakfDrsLXiCyucVfVWVoaPA4oFSpPpDwlMcDFQvrv3XY6KEzMtMZrA+e/goC8xxp2WSOxHQubP8fPmmjOQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.50.0.tgz",
+      "integrity": "sha512-8PrJJA7/VU8ToHVEPu14FzuSAqVKyo5gg/J8xUerMbyNkWkO9j2ExBho/68RnJsMGNJq4zH114iAttgm7BZVkA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.50.0.tgz",
+      "integrity": "sha512-SkE6YQp+CzpyOrbw7Oc4MgXFvTw2UIBElvAvLCo230pyxOLmYwRPwZ/L5lBe/VW/qT1ZgND9wJfOsdy0XptRvw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.50.0.tgz",
+      "integrity": "sha512-PZkNLPfvXeIOgJWA804zjSFH7fARBBCpCXxgkGDRjjAhRLOR8o0IGS01ykh5GYfod4c2yiiREuDM8iZ+pVsT+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.50.0.tgz",
+      "integrity": "sha512-q7cIIdFvWQoaCbLDUyUc8YfR3Jh2xx3unO8Dn6/TTogKjfwrax9SyfmGGK6cQhKtjePI7jRfd7iRYcxYs93esg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.50.0.tgz",
+      "integrity": "sha512-XzNOVg/YnDOmFdDKcxxK410PrcbcqZkBmz+0FicpW5jtjKQxcW1BZJEQOF0NJa6JO7CZhett8GEtRN/wYLYJuw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.50.0.tgz",
+      "integrity": "sha512-xMmiWRR8sp72Zqwjgtf3QbZfF1wdh8X2ABu3EaozvZcyHJeU0r+XAnXdKgs4cCAp6ORoYoCygipYP1mjmbjrsg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "node_modules/@surma/rollup-plugin-off-main-thread/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
+      "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.0.0 || ^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.21.tgz",
+      "integrity": "sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@vue/shared": "3.5.21",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.21.tgz",
+      "integrity": "sha512-jNtbu/u97wiyEBJlJ9kmdw7tAr5Vy0Aj5CgQmo+6pxWNQhXZDPsRr1UWPN4v3Zf82s2H3kF51IbzZ4jMWAgPlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.21",
+        "@vue/shared": "3.5.21"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.21.tgz",
+      "integrity": "sha512-SXlyk6I5eUGBd2v8Ie7tF6ADHE9kCR6mBEuPyH1nUZ0h6Xx6nZI29i12sJKQmzbDyr2tUHMhhTt51Z6blbkTTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@vue/compiler-core": "3.5.21",
+        "@vue/compiler-dom": "3.5.21",
+        "@vue/compiler-ssr": "3.5.21",
+        "@vue/shared": "3.5.21",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.18",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.21.tgz",
+      "integrity": "sha512-vKQ5olH5edFZdf5ZrlEgSO1j1DMA4u23TVK5XR1uMhvwnYvVdDF0nHXJUblL/GvzlShQbjhZZ2uvYmDlAbgo9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.21",
+        "@vue/shared": "3.5.21"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.21.tgz",
+      "integrity": "sha512-3ah7sa+Cwr9iiYEERt9JfZKPw4A2UlbY8RbbnH2mGCE8NwHkhmlZt2VsH0oDA3P08X3jJd29ohBDtX+TbD9AsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.21"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.21.tgz",
+      "integrity": "sha512-+DplQlRS4MXfIf9gfD1BOJpk5RSyGgGXD/R+cumhe8jdjUcq/qlxDawQlSI8hCKupBlvM+3eS1se5xW+SuNAwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.21",
+        "@vue/shared": "3.5.21"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.21.tgz",
+      "integrity": "sha512-3M2DZsOFwM5qI15wrMmNF5RJe1+ARijt2HM3TbzBbPSuBHOQpoidE+Pa+XEaVN+czbHf81ETRoG1ltztP2em8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.21",
+        "@vue/runtime-core": "3.5.21",
+        "@vue/shared": "3.5.21",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.21.tgz",
+      "integrity": "sha512-qr8AqgD3DJPJcGvLcJKQo2tAc8OnXRcfxhOJCPF+fcfn5bBGz7VCcO7t+qETOPxpWK1mgysXvVT/j+xWaHeMWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.21",
+        "@vue/shared": "3.5.21"
+      },
+      "peerDependencies": {
+        "vue": "3.5.21"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.21.tgz",
+      "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmmirror.com/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz",
+      "integrity": "sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.7",
+        "@babel/helper-define-polyfill-provider": "^0.6.5",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz",
+      "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.5",
+        "core-js-compat": "^3.43.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.5.tgz",
+      "integrity": "sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.5"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.25.4",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.25.4.tgz",
+      "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001737",
+        "electron-to-chromium": "^1.5.211",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001739",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001739.tgz",
+      "integrity": "sha512-y+j60d6ulelrNSwpPyrHdl+9mJnQzHBr08xm48Qno0nSk4h3Qojh+ziv2qE6rXf4k3tadF4o1J/1tAbVm1NtnA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.45.1",
+      "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.45.1.tgz",
+      "integrity": "sha512-tqTt5T4PzsMIZ430XGviK4vzYSoeNJ6CXODi6c/voxOT6IZqBht5/EKaSNnYiEjjRYxjVz7DQIsOsY0XNi8PIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmmirror.com/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.213",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.213.tgz",
+      "integrity": "sha512-xr9eRzSLNa4neDO0xVFrkXu3vyIzG4Ay08dApecw42Z1NbmCt+keEpXdvlYGVe0wtvY5dhW0Ay0lY0IOfsCg0Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmmirror.com/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true,
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.18",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.18.tgz",
+      "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
+      "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmmirror.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
+      "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/regexpu-core/-/regexpu-core-6.2.0.tgz",
+      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.2.0",
+        "regjsgen": "^0.8.0",
+        "regjsparser": "^0.12.0",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regjsparser": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmmirror.com/regjsparser/-/regjsparser-0.12.0.tgz",
+      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jsesc": "~3.0.2"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.50.0",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.50.0.tgz",
+      "integrity": "sha512-/Zl4D8zPifNmyGzJS+3kVoyXeDeT/GrsJM94sACNg9RtUE0hrHa1bNPtRSrfHTMH5HjRzce6K7rlTh3Khiw+pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.50.0",
+        "@rollup/rollup-android-arm64": "4.50.0",
+        "@rollup/rollup-darwin-arm64": "4.50.0",
+        "@rollup/rollup-darwin-x64": "4.50.0",
+        "@rollup/rollup-freebsd-arm64": "4.50.0",
+        "@rollup/rollup-freebsd-x64": "4.50.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.50.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.50.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.50.0",
+        "@rollup/rollup-linux-arm64-musl": "4.50.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.50.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.50.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.50.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.50.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.50.0",
+        "@rollup/rollup-linux-x64-gnu": "4.50.0",
+        "@rollup/rollup-linux-x64-musl": "4.50.0",
+        "@rollup/rollup-openharmony-arm64": "4.50.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.50.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.50.0",
+        "@rollup/rollup-win32-x64-msvc": "4.50.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/smob/-/smob-1.5.0.tgz",
+      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.8.0-beta.0",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.8.0-beta.0.tgz",
+      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+      "deprecated": "The work that was done in this beta branch won't be included in future versions",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "whatwg-url": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmmirror.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.44.0",
+      "resolved": "https://registry.npmmirror.com/terser/-/terser-5.44.0.tgz",
+      "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.16.0.tgz",
+      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
+      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
+      "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.19",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-pwa": {
+      "version": "0.17.5",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-pwa/-/vite-plugin-pwa-0.17.5.tgz",
+      "integrity": "sha512-UxRNPiJBzh4tqU/vc8G2TxmrUTzT6BqvSzhszLk62uKsf+npXdvLxGDz9C675f4BJi6MbD2tPnJhi5txlMzxbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "pretty-bytes": "^6.1.1",
+        "workbox-build": "^7.0.0",
+        "workbox-window": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0",
+        "workbox-build": "^7.0.0",
+        "workbox-window": "^7.0.0"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.21.tgz",
+      "integrity": "sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.21",
+        "@vue/compiler-sfc": "3.5.21",
+        "@vue/runtime-dom": "3.5.21",
+        "@vue/server-renderer": "3.5.21",
+        "@vue/shared": "3.5.21"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/workbox-background-sync": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-background-sync/-/workbox-background-sync-7.3.0.tgz",
+      "integrity": "sha512-PCSk3eK7Mxeuyatb22pcSx9dlgWNv3+M8PqPaYDokks8Y5/FX4soaOqj3yhAZr5k6Q5JWTOMYgaJBpbw11G9Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "idb": "^7.0.1",
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-broadcast-update": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-broadcast-update/-/workbox-broadcast-update-7.3.0.tgz",
+      "integrity": "sha512-T9/F5VEdJVhwmrIAE+E/kq5at2OY6+OXXgOWQevnubal6sO92Gjo24v6dCVwQiclAF5NS3hlmsifRrpQzZCdUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-build": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-build/-/workbox-build-7.3.0.tgz",
+      "integrity": "sha512-JGL6vZTPlxnlqZRhR/K/msqg3wKP+m0wfEUVosK7gsYzSgeIxvZLi1ViJJzVL7CEeI8r7rGFV973RiEqkP3lWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@apideck/better-ajv-errors": "^0.3.1",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
+        "ajv": "^8.6.0",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.43.1",
+        "source-map": "^0.8.0-beta.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "7.3.0",
+        "workbox-broadcast-update": "7.3.0",
+        "workbox-cacheable-response": "7.3.0",
+        "workbox-core": "7.3.0",
+        "workbox-expiration": "7.3.0",
+        "workbox-google-analytics": "7.3.0",
+        "workbox-navigation-preload": "7.3.0",
+        "workbox-precaching": "7.3.0",
+        "workbox-range-requests": "7.3.0",
+        "workbox-recipes": "7.3.0",
+        "workbox-routing": "7.3.0",
+        "workbox-strategies": "7.3.0",
+        "workbox-streams": "7.3.0",
+        "workbox-sw": "7.3.0",
+        "workbox-window": "7.3.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/workbox-build/node_modules/@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/workbox-build/node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/workbox-build/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/workbox-build/node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/workbox-build/node_modules/rollup": {
+      "version": "2.79.2",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/workbox-cacheable-response": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-cacheable-response/-/workbox-cacheable-response-7.3.0.tgz",
+      "integrity": "sha512-eAFERIg6J2LuyELhLlmeRcJFa5e16Mj8kL2yCDbhWE+HUun9skRQrGIFVUagqWj4DMaaPSMWfAolM7XZZxNmxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-core": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-core/-/workbox-core-7.3.0.tgz",
+      "integrity": "sha512-Z+mYrErfh4t3zi7NVTvOuACB0A/jA3bgxUN3PwtAVHvfEsZxV9Iju580VEETug3zYJRc0Dmii/aixI/Uxj8fmw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/workbox-expiration": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-expiration/-/workbox-expiration-7.3.0.tgz",
+      "integrity": "sha512-lpnSSLp2BM+K6bgFCWc5bS1LR5pAwDWbcKt1iL87/eTSJRdLdAwGQznZE+1czLgn/X05YChsrEegTNxjM067vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "idb": "^7.0.1",
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-google-analytics": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-google-analytics/-/workbox-google-analytics-7.3.0.tgz",
+      "integrity": "sha512-ii/tSfFdhjLHZ2BrYgFNTrb/yk04pw2hasgbM70jpZfLk0vdJAXgaiMAWsoE+wfJDNWoZmBYY0hMVI0v5wWDbg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-background-sync": "7.3.0",
+        "workbox-core": "7.3.0",
+        "workbox-routing": "7.3.0",
+        "workbox-strategies": "7.3.0"
+      }
+    },
+    "node_modules/workbox-navigation-preload": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-navigation-preload/-/workbox-navigation-preload-7.3.0.tgz",
+      "integrity": "sha512-fTJzogmFaTv4bShZ6aA7Bfj4Cewaq5rp30qcxl2iYM45YD79rKIhvzNHiFj1P+u5ZZldroqhASXwwoyusnr2cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-precaching": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-precaching/-/workbox-precaching-7.3.0.tgz",
+      "integrity": "sha512-ckp/3t0msgXclVAYaNndAGeAoWQUv7Rwc4fdhWL69CCAb2UHo3Cef0KIUctqfQj1p8h6aGyz3w8Cy3Ihq9OmIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0",
+        "workbox-routing": "7.3.0",
+        "workbox-strategies": "7.3.0"
+      }
+    },
+    "node_modules/workbox-range-requests": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-range-requests/-/workbox-range-requests-7.3.0.tgz",
+      "integrity": "sha512-EyFmM1KpDzzAouNF3+EWa15yDEenwxoeXu9bgxOEYnFfCxns7eAxA9WSSaVd8kujFFt3eIbShNqa4hLQNFvmVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-recipes": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-recipes/-/workbox-recipes-7.3.0.tgz",
+      "integrity": "sha512-BJro/MpuW35I/zjZQBcoxsctgeB+kyb2JAP5EB3EYzePg8wDGoQuUdyYQS+CheTb+GhqJeWmVs3QxLI8EBP1sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-cacheable-response": "7.3.0",
+        "workbox-core": "7.3.0",
+        "workbox-expiration": "7.3.0",
+        "workbox-precaching": "7.3.0",
+        "workbox-routing": "7.3.0",
+        "workbox-strategies": "7.3.0"
+      }
+    },
+    "node_modules/workbox-routing": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-routing/-/workbox-routing-7.3.0.tgz",
+      "integrity": "sha512-ZUlysUVn5ZUzMOmQN3bqu+gK98vNfgX/gSTZ127izJg/pMMy4LryAthnYtjuqcjkN4HEAx1mdgxNiKJMZQM76A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-strategies": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-strategies/-/workbox-strategies-7.3.0.tgz",
+      "integrity": "sha512-tmZydug+qzDFATwX7QiEL5Hdf7FrkhjaF9db1CbB39sDmEZJg3l9ayDvPxy8Y18C3Y66Nrr9kkN1f/RlkDgllg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/workbox-streams": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-streams/-/workbox-streams-7.3.0.tgz",
+      "integrity": "sha512-SZnXucyg8x2Y61VGtDjKPO5EgPUG5NDn/v86WYHX+9ZqvAsGOytP0Jxp1bl663YUuMoXSAtsGLL+byHzEuMRpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "workbox-core": "7.3.0",
+        "workbox-routing": "7.3.0"
+      }
+    },
+    "node_modules/workbox-sw": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-sw/-/workbox-sw-7.3.0.tgz",
+      "integrity": "sha512-aCUyoAZU9IZtH05mn0ACUpyHzPs0lMeJimAYkQkBsOWiqaJLgusfDCR+yllkPkFRxWpZKF8vSvgHYeG7LwhlmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/workbox-window": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/workbox-window/-/workbox-window-7.3.0.tgz",
+      "integrity": "sha512-qW8PDy16OV1UBaUNGlTVcepzrlzyzNW/ZJvFQQs2j2TzGsg6IKjcpZC1RSquqQnTOafl5pCj5bGfAHlCjOOjdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2",
+        "workbox-core": "7.3.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/package.json b/package.json
index 39f5bad5f39c68c335c9c8ec7e329e082d7f0563..fbb265c08db9889ce4e5ea193550bd7bb88819e2 100644
--- a/package.json
+++ b/package.json
@@ -1,37 +1,22 @@
 {
-  "name": "vue",
-  "version": "0.0.0",
-  "private": true,
+  "name": "vue-music-pwa",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build",
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "pinia": "^3.0.1",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0",
+    "pinia": "^2.1.0",
+    "@vueuse/core": "^10.5.0"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.1",
-    "@types/node": "^22.14.0",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
-    "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.22.0",
-    "eslint-plugin-vue": "~10.0.0",
-    "jiti": "^2.4.2",
-    "npm-run-all2": "^7.0.2",
-    "prettier": "3.5.3",
-    "typescript": "~5.8.0",
-    "vite": "^6.2.4",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-tsc": "^2.2.8"
+    "@vitejs/plugin-vue": "^4.5.0",
+    "vite": "^5.0.0",
+    "vite-plugin-pwa": "^0.17.0",
+    "workbox-window": "^7.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..87dbf7aa564a9c8a2e5e64bf4a5ede1c9e548172
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="4" fill="#1DB954"/>
+<circle cx="8" cy="8" r="4" stroke="white" stroke-width="1"/>
+<circle cx="8" cy="8" r="1" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/apple-touch-icon.svg b/public/icons/apple-touch-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..82a80d6c86a5a9834e11a23cfda6e1ef6f7af638
--- /dev/null
+++ b/public/icons/apple-touch-icon.svg
@@ -0,0 +1,5 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="180" height="180" rx="40" fill="#1DB954"/>
+<path d="M120 90C120 105.464 107.464 118 92 118C76.536 118 64 105.464 64 90C64 74.536 76.536 62 92 62C107.464 62 120 74.536 120 90Z" stroke="white" stroke-width="6"/>
+<circle cx="92" cy="90" r="6" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/icon-128x128.svg b/public/icons/icon-128x128.svg
new file mode 100644
index 0000000000000000000000000000000000000000..878aa7f36ecd84a4425eb99dbb7947b755e50916
--- /dev/null
+++ b/public/icons/icon-128x128.svg
@@ -0,0 +1,5 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" rx="28" fill="#1DB954"/>
+<path d="M85.33 64C85.33 75.7821 75.7821 85.33 64 85.33C52.2179 85.33 42.67 75.7821 42.67 64C42.67 52.2179 52.2179 42.67 64 42.67C75.7821 42.67 85.33 52.2179 85.33 64Z" stroke="white" stroke-width="5"/>
+<circle cx="64" cy="64" r="5" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/icon-192x192.svg b/public/icons/icon-192x192.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d619818d723b0dd7f195a4d5424f5af425c455e0
--- /dev/null
+++ b/public/icons/icon-192x192.svg
@@ -0,0 +1,5 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="192" height="192" rx="42" fill="#1DB954"/>
+<path d="M128 96C128 113.673 113.673 128 96 128C78.3269 128 64 113.673 64 96C64 78.3269 78.3269 64 96 64C113.673 64 128 78.3269 128 96Z" stroke="white" stroke-width="8"/>
+<circle cx="96" cy="96" r="8" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/icon-512x512.svg b/public/icons/icon-512x512.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4aaf0107b6be32a556b55465f6b8a9cab9da114
--- /dev/null
+++ b/public/icons/icon-512x512.svg
@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="112" fill="#1DB954"/>
+<path d="M341.33 256C341.33 303.128 303.128 341.33 256 341.33C208.872 341.33 170.67 303.128 170.67 256C170.67 208.872 208.872 170.67 256 170.67C303.128 170.67 341.33 208.872 341.33 256Z" stroke="white" stroke-width="21"/>
+<circle cx="256" cy="256" r="21" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/icon-72x72.svg b/public/icons/icon-72x72.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2f647d4ba1f5a340e6113b9d9b1a56c01d74741b
--- /dev/null
+++ b/public/icons/icon-72x72.svg
@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="72" height="72" rx="16" fill="#1DB954"/>
+<path d="M48 36C48 42.6274 42.6274 48 36 48C29.3726 48 24 42.6274 24 36C24 29.3726 29.3726 24 36 24C42.6274 24 48 29.3726 48 36Z" stroke="white" stroke-width="3"/>
+<circle cx="36" cy="36" r="3" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/public/icons/icon-96x96.svg b/public/icons/icon-96x96.svg
new file mode 100644
index 0000000000000000000000000000000000000000..03aa7cb5beabc3d7cc5f5299a78ed7fde0f96d36
--- /dev/null
+++ b/public/icons/icon-96x96.svg
@@ -0,0 +1,5 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="96" height="96" rx="20" fill="#1DB954"/>
+<path d="M64 48C64 56.8366 56.8366 64 48 64C39.1634 64 32 56.8366 32 48C32 39.1634 39.1634 32 48 32C56.8366 32 64 39.1634 64 48Z" stroke="white" stroke-width="4"/>
+<circle cx="48" cy="48" r="4" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 7905b05167cb53db655f3938ea2adb68ca72e9fb..26d8eae69f42b1c8b0b0c4bc55d63ee763c3322f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,85 +1,401 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+  <div id="app">
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <router-view v-slot="{ Component, route }">
+        <keep-alive>
+          <component
+            :is="Component"
+            v-if="route.meta?.keepAlive"
+            :key="route.name"
+          />
+        </keep-alive>
+        <component
+          :is="Component"
+          v-if="!route.meta?.keepAlive"
+          :key="route.name"
+        />
+      </router-view>
+    </main>
+
+    <!-- 迷你播放器 -->
+    <MiniPlayer
+      v-show="!shouldHideMiniPlayer"
+      @openFullPlayer="showFullPlayer = true"
+      @togglePlay="togglePlay"
+      @playNext="playNext"
+      @playPrevious="playPrevious"
+    />
+
+    <!-- 底部导航栏 -->
+    <AppTabBar />
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+    <!-- 全屏播放器 -->
+    <FullPlayerPage
+      v-if="showFullPlayer"
+      @close="showFullPlayer = false"
+      @seek="handleSeek"
+      @togglePlay="togglePlay"
+    />
 
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
+    <!-- 音频元素 -->
+    <audio
+      ref="audioRef"
+      preload="metadata"
+      @loadedmetadata="handleLoadedMetadata"
+      @timeupdate="handleTimeUpdate"
+      @ended="handleEnded"
+      @play="handlePlay"
+      @pause="handlePause"
+      @error="handleError"
+    />
 
-  <RouterView />
+    <!-- 通知组件 -->
+    <Toast />
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePlayerStore } from '@/stores/player'
+import { useSearchStore } from '@/stores/search'
+import { useFavoritesStore } from '@/stores/favorites'
+import { useSettingsStore } from '@/stores/settings'
+import { musicApi, utils } from '@/services/musicApi'
+import AppTabBar from '@/components/layout/AppTabBar.vue'
+import MiniPlayer from '@/components/layout/MiniPlayer.vue'
+import FullPlayerPage from '@/views/FullPlayerPage.vue'
+import Toast from '@/components/common/Toast.vue'
+
+// Router
+const route = useRoute()
+
+// Store
+const playerStore = usePlayerStore()
+const searchStore = useSearchStore()
+const favoritesStore = useFavoritesStore()
+const settingsStore = useSettingsStore()
+
+// 响应式数据
+const audioRef = ref(null)
+const showFullPlayer = ref(false)
+const isLoading = ref(false)
+
+// 计算属性
+const currentSong = computed(() => playerStore.currentSong)
+const isPlaying = computed(() => playerStore.isPlaying)
+
+// 判断是否应该隐藏迷你播放器（在全屏播放页面时隐藏）
+const shouldHideMiniPlayer = computed(() => {
+  return route.meta?.fullScreen || false
+})
+
+// 播放控制
+const togglePlay = async () => {
+  if (!currentSong.value) {
+    console.log('没有歌曲信息')
+    return
+  }
+
+  if (isPlaying.value) {
+    if (audioRef.value) {
+      audioRef.value.pause()
+    }
+    playerStore.setPlayingState(false)
+  } else {
+    // 如果没有音频源，需要先加载歌曲
+    if (!playerStore.audioSrc || !audioRef.value.src || audioRef.value.src === location.href) {
+      console.log('没有音频源，开始加载歌曲')
+      await loadAndPlaySong(currentSong.value)
+      return
+    }
+
+    // 有音频源，直接播放
+    try {
+      if (!audioRef.value) {
+        console.log('音频元素不可用')
+        return
+      }
+
+      // 确保音频元素有正确的src
+      if (audioRef.value.src !== playerStore.audioSrc) {
+        audioRef.value.src = playerStore.audioSrc
+        audioRef.value.load()
+      }
+
+      await audioRef.value.play()
+      playerStore.setPlayingState(true)
+      console.log('开始播放:', currentSong.value.name)
+    } catch (error) {
+      console.error('播放失败:', error)
+      showNotification('播放失败，请重试', 'error')
+    }
+  }
+}
+
+const playNext = () => {
+  const nextSong = playerStore.playNext()
+  if (nextSong) {
+    loadAndPlaySong(nextSong)
+  }
+}
+
+const playPrevious = () => {
+  const prevSong = playerStore.playPrevious()
+  if (prevSong) {
+    loadAndPlaySong(prevSong)
+  }
+}
+
+// 快进到指定时间
+const handleSeek = (time) => {
+  if (audioRef.value && isFinite(time) && time >= 0 && time <= (playerStore.duration || 0)) {
+    // 立即更新播放器时间
+    audioRef.value.currentTime = time
+    playerStore.setCurrentTime(time)
+
+    // 如果当前没有播放，且有音频源，尝试播放
+    if (!isPlaying.value && playerStore.audioSrc) {
+      audioRef.value.play().then(() => {
+        playerStore.setPlayingState(true)
+        console.log('拖动进度条后开始播放:', time)
+      }).catch(error => {
+        console.log('自动播放被阻止:', error)
+      })
+    }
+
+    console.log('跳转到时间:', time)
+  }
+}
+
+// 加载并播放歌曲
+const loadAndPlaySong = async (song) => {
+  if (!song || isLoading.value) return
+
+  isLoading.value = true
+
+  try {
+    // 获取音乐链接 - 修复参数顺序：source, id, quality
+    const quality = settingsStore.getSetting('defaultQuality') || '320'
+    const result = await musicApi.getMusicUrl(song.source, song.id, quality)
+
+    if (result) {
+      playerStore.setAudioSrc(result)
+
+      // 重置播放进度（仅当切换歌曲时）
+      // 比较歌曲的唯一标识，包括名称确保是不同歌曲
+      const isSameSong = currentSong.value?.id === song.id && 
+                        currentSong.value?.source === song.source &&
+                        currentSong.value?.name === song.name
+      
+      if (!isSameSong) {
+        playerStore.setCurrentTime(0)
+        playerStore.setDuration(0)
+        console.log('切换到新歌曲，重置播放进度:', song.name)
+      }
+
+      // 更新音频元素
+      if (audioRef.value) {
+        audioRef.value.src = result
+        audioRef.value.load()
+      }
+
+      // 添加到播放历史
+      favoritesStore.addToHistory(song)
+
+      console.log('歌曲加载成功:', song.name, result)
+
+      // 等待音频元数据加载后再尝试播放
+      if (audioRef.value) {
+        const tryPlay = async () => {
+          try {
+            if (audioRef.value.readyState >= 1) { // 有足够数据可以开始播放
+              await audioRef.value.play()
+              playerStore.setPlayingState(true)
+              console.log('开始播放:', song.name)
+            }
+          } catch (error) {
+            console.log('自动播放被阻止，用户需要手动播放')
+            playerStore.setPlayingState(false)
+          }
+        }
+
+        if (audioRef.value.readyState >= 1) {
+          tryPlay()
+        } else {
+          audioRef.value.addEventListener('loadeddata', tryPlay, { once: true })
+        }
+      }
+    } else {
+      showNotification('无法获取播放链接', 'error')
+    }
+  } catch (error) {
+    console.error('加载歌曲失败:', error)
+    showNotification('加载歌曲失败', 'error')
+  } finally {
+    isLoading.value = false
+  }
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+// 音频事件处理
+const handleLoadedMetadata = () => {
+  if (audioRef.value) {
+    const duration = audioRef.value.duration
+    if (isFinite(duration)) {
+      playerStore.setDuration(duration)
+
+      // 恢复播放进度
+      const savedTime = playerStore.currentTime
+      if (savedTime > 0 && savedTime < duration && settingsStore.getSetting('rememberProgress')) {
+        audioRef.value.currentTime = savedTime
+      }
+    }
+  }
 }
 
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
+const handleTimeUpdate = () => {
+  if (audioRef.value && isFinite(audioRef.value.currentTime)) {
+    playerStore.setCurrentTime(audioRef.value.currentTime)
+  }
 }
 
-nav a.router-link-exact-active {
-  color: var(--color-text);
+const handleEnded = () => {
+  if (settingsStore.getSetting('autoNext')) {
+    playNext()
+  } else {
+    playerStore.setPlayingState(false)
+  }
 }
 
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
+const handlePlay = () => {
+  playerStore.setPlayingState(true)
+
+  // 设置 MediaSession
+  if ('mediaSession' in navigator && currentSong.value) {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: currentSong.value.name,
+      artist: utils.formatArtist(currentSong.value.artist),
+      album: currentSong.value.album,
+      artwork: [
+        {
+          src: `${import.meta.env.BASE_URL}icons/icon-512x512.svg`,
+          sizes: '512x512',
+          type: 'image/svg+xml'
+        }
+      ]
+    })
+
+    // 设置播放控制
+    navigator.mediaSession.setActionHandler('play', togglePlay)
+    navigator.mediaSession.setActionHandler('pause', togglePlay)
+    navigator.mediaSession.setActionHandler('nexttrack', playNext)
+    navigator.mediaSession.setActionHandler('previoustrack', playPrevious)
+  }
+}
+
+const handlePause = () => {
+  playerStore.setPlayingState(false)
 }
 
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
+const handleError = (e) => {
+  console.error('音频播放错误:', e)
+  showNotification('播放出错，请重试', 'error')
+  playerStore.setPlayingState(false)
 }
 
-nav a:first-of-type {
-  border: 0;
+// 通知函数
+const showNotification = (message, type = 'info') => {
+  // 这里需要实现通知组件的显示逻辑
+  console.log(`${type}: ${message}`)
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+// 监听当前歌曲变化
+watch(currentSong, (newSong, oldSong) => {
+  if (newSong && newSong !== oldSong) {
+    // 如果是页面刷新后的恢复，且已有audioSrc，则不重新加载
+    if (oldSong === null && playerStore.audioSrc) {
+      console.log('恢复播放会话，跳过重新加载')
+      // 恢复音频元素的src
+      if (audioRef.value) {
+        audioRef.value.src = playerStore.audioSrc
+        audioRef.value.load()
+      }
+      return
+    }
+
+    loadAndPlaySong(newSong)
+  }
+}, { immediate: true })
+
+// 监听音量变化
+watch(() => playerStore.volume, (newVolume) => {
+  if (audioRef.value) {
+    audioRef.value.volume = newVolume / 100
   }
+}, { immediate: true })
 
-  .logo {
-    margin: 0 2rem 0 0;
+// 组件挂载
+onMounted(() => {
+  // 加载所有存储状态
+  playerStore.loadPlayerState()
+  searchStore.loadSearchSettings()
+  searchStore.loadSearchHistory()
+  favoritesStore.loadFavorites()
+  favoritesStore.loadPlayHistory()
+  settingsStore.loadSettings()
+
+  // 建立音频元素连接
+  if (audioRef.value) {
+    playerStore.setAudioElement(audioRef.value)
+    audioRef.value.volume = (playerStore.volume || 80) / 100
   }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+  // 应用主题
+  const theme = settingsStore.getSetting('theme') || 'light'
+  settingsStore.applyTheme(theme)
+
+  // 监听来自路由版FullPlayerPage的加载歌曲事件
+  const handleLoadAndPlaySong = (event) => {
+    if (event.detail?.song) {
+      loadAndPlaySong(event.detail.song)
+    }
   }
+  window.addEventListener('loadAndPlaySong', handleLoadAndPlaySong)
+
+  // 恢复逻辑交由watch处理，避免重复设置
+  console.log('App mounted, 恢复状态:', {
+    currentSong: currentSong.value?.name,
+    hasAudioSrc: !!playerStore.audioSrc,
+    currentTheme: theme
+  })
+})
+</script>
 
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
+<style>
+.main-content {
+  flex: 1;
+  padding-bottom: calc(var(--tabbar-height) + var(--mini-player-height));
+  overflow-y: auto;
+  background: var(--bg-primary);
+}
+
+/* 当没有当前歌曲时，减少底部边距 */
+.main-content:not(.has-mini-player) {
+  padding-bottom: var(--tabbar-height);
+  background: var(--bg-primary);
+}
 
-    padding: 1rem 0;
-    margin-top: 1rem;
+/* iOS PWA 模式适配 */
+@supports (-webkit-touch-callout: none) {
+  @media all and (display-mode: standalone) {
+    .main-content {
+      padding-bottom: calc(var(--tabbar-height) + var(--mini-player-height) + 20px);
+    }
+    
+    .main-content:not(.has-mini-player) {
+      padding-bottom: calc(var(--tabbar-height) + 20px);
+    }
   }
 }
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
deleted file mode 100644
index 8816868a41b651f318dee87c6784ebcd6e29eca1..0000000000000000000000000000000000000000
--- a/src/assets/base.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 7565660356e5b3723c9c33d508b830c9cfbea29f..0000000000000000000000000000000000000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/assets/main.css b/src/assets/main.css
deleted file mode 100644
index 36fb845b5232b8594b0d0f0e61a8cff0b73a4128..0000000000000000000000000000000000000000
--- a/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index d174cf8e1c12827184281d516d457c6d914c4340..0000000000000000000000000000000000000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index 6092dff14de3243051b68076ecdc3cc18c18130b..0000000000000000000000000000000000000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
-    and
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    /
-    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
-
-    <br />
-
-    More instructions are available in
-    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
-    >.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
-    (our official Discord server), or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also follow the official
-    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
-    Bluesky account or the
-    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    X account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
deleted file mode 100644
index 6d7086aea08fbb770b2f570dbeb4f8fcd86cb291..0000000000000000000000000000000000000000
--- a/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
diff --git a/src/components/common/BottomSheet.vue b/src/components/common/BottomSheet.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a04b32ea8cadc53f0a02b31856a6620c00c8c490
--- /dev/null
+++ b/src/components/common/BottomSheet.vue
@@ -0,0 +1,416 @@
+<template>
+  <Teleport to="body">
+    <Transition name="bottom-sheet" appear>
+      <div v-if="visible" class="bottom-sheet-overlay" @click="handleOverlayClick">
+        <div 
+          class="bottom-sheet"
+          :class="{ fullscreen: isFullscreen }"
+          @click.stop
+          ref="sheetRef"
+        >
+          <!-- 拖拽指示器 -->
+          <div class="drag-indicator" v-if="draggable" @touchstart="handleTouchStart" @mousedown="handleMouseDown">
+            <div class="drag-handle"></div>
+          </div>
+          
+          <!-- 头部 -->
+          <div class="bottom-sheet-header" v-if="title || closable">
+            <h3 class="sheet-title" v-if="title">{{ title }}</h3>
+            <button 
+              v-if="closable"
+              class="sheet-close-btn"
+              @click="handleClose"
+            >
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+          
+          <!-- 内容 -->
+          <div class="bottom-sheet-body" ref="bodyRef">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps({
+  // 标题
+  title: {
+    type: String,
+    default: ''
+  },
+  
+  // 是否可关闭
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 点击遮罩是否关闭
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 是否可拖拽
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 最大高度（百分比）
+  maxHeight: {
+    type: Number,
+    default: 90
+  }
+})
+
+const emit = defineEmits(['close', 'open'])
+
+const visible = ref(false)
+const isFullscreen = ref(false)
+const sheetRef = ref(null)
+const bodyRef = ref(null)
+
+// 拖拽相关
+const isDragging = ref(false)
+const startY = ref(0)
+const startHeight = ref(0)
+const currentTranslateY = ref(0)
+
+// 处理遮罩点击
+const handleOverlayClick = () => {
+  if (props.maskClosable) {
+    handleClose()
+  }
+}
+
+// 处理关闭
+const handleClose = () => {
+  close()
+}
+
+// 处理触摸开始
+const handleTouchStart = (event) => {
+  if (!props.draggable) return
+  
+  isDragging.value = true
+  startY.value = event.touches[0].clientY
+  startHeight.value = sheetRef.value.offsetHeight
+  currentTranslateY.value = 0
+  
+  document.addEventListener('touchmove', handleTouchMove, { passive: false })
+  document.addEventListener('touchend', handleTouchEnd)
+}
+
+// 处理鼠标按下
+const handleMouseDown = (event) => {
+  if (!props.draggable) return
+  
+  isDragging.value = true
+  startY.value = event.clientY
+  startHeight.value = sheetRef.value.offsetHeight
+  currentTranslateY.value = 0
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  event.preventDefault()
+}
+
+// 处理触摸移动
+const handleTouchMove = (event) => {
+  if (!isDragging.value) return
+  
+  const deltaY = event.touches[0].clientY - startY.value
+  
+  // 只允许向下拖拽
+  if (deltaY > 0) {
+    currentTranslateY.value = deltaY
+    sheetRef.value.style.transform = `translateY(${deltaY}px)`
+  }
+  
+  event.preventDefault()
+}
+
+// 处理鼠标移动
+const handleMouseMove = (event) => {
+  if (!isDragging.value) return
+  
+  const deltaY = event.clientY - startY.value
+  
+  if (deltaY > 0) {
+    currentTranslateY.value = deltaY
+    sheetRef.value.style.transform = `translateY(${deltaY}px)`
+  }
+}
+
+// 处理触摸结束
+const handleTouchEnd = () => {
+  if (!isDragging.value) return
+  
+  isDragging.value = false
+  
+  // 如果拖拽距离超过阈值，关闭弹窗
+  if (currentTranslateY.value > startHeight.value * 0.3) {
+    close()
+  } else {
+    // 回弹到原位置
+    sheetRef.value.style.transform = ''
+    sheetRef.value.style.transition = 'transform 0.3s ease-out'
+    
+    setTimeout(() => {
+      if (sheetRef.value) {
+        sheetRef.value.style.transition = ''
+      }
+    }, 300)
+  }
+  
+  currentTranslateY.value = 0
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+}
+
+// 处理鼠标释放
+const handleMouseUp = () => {
+  if (!isDragging.value) return
+  
+  isDragging.value = false
+  
+  if (currentTranslateY.value > startHeight.value * 0.3) {
+    close()
+  } else {
+    sheetRef.value.style.transform = ''
+    sheetRef.value.style.transition = 'transform 0.3s ease-out'
+    
+    setTimeout(() => {
+      if (sheetRef.value) {
+        sheetRef.value.style.transition = ''
+      }
+    }, 300)
+  }
+  
+  currentTranslateY.value = 0
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+}
+
+// 处理键盘事件
+const handleKeyDown = (event) => {
+  if (event.key === 'Escape' && props.closable) {
+    handleClose()
+  }
+}
+
+// 显示底部弹窗
+const open = () => {
+  visible.value = true
+  document.body.style.overflow = 'hidden'
+  document.addEventListener('keydown', handleKeyDown)
+  
+  nextTick(() => {
+    // 检查内容是否需要全屏显示
+    if (bodyRef.value) {
+      const contentHeight = bodyRef.value.scrollHeight
+      const maxAllowedHeight = window.innerHeight * (props.maxHeight / 100)
+      
+      if (contentHeight > maxAllowedHeight * 0.8) {
+        isFullscreen.value = true
+      }
+    }
+  })
+  
+  emit('open')
+}
+
+// 关闭底部弹窗
+const close = () => {
+  visible.value = false
+  document.body.style.overflow = ''
+  document.removeEventListener('keydown', handleKeyDown)
+  emit('close')
+}
+
+// 生命周期
+onMounted(() => {
+  open()
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  document.removeEventListener('keydown', handleKeyDown)
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+})
+
+// 暴露方法
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped>
+.bottom-sheet-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.bottom-sheet {
+  width: 100%;
+  max-width: 500px;
+  max-height: v-bind(maxHeight + '%');
+  background: var(--bg-secondary);
+  border-radius: 16px 16px 0 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  user-select: none;
+}
+
+.bottom-sheet.fullscreen {
+  height: 90%;
+  border-radius: 16px;
+  margin: 20px;
+}
+
+.drag-indicator {
+  padding: 8px 0 4px;
+  display: flex;
+  justify-content: center;
+  cursor: grab;
+}
+
+.drag-indicator:active {
+  cursor: grabbing;
+}
+
+.drag-handle {
+  width: 32px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+.bottom-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.sheet-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.sheet-close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.sheet-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.bottom-sheet-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* 动画 */
+.bottom-sheet-enter-active,
+.bottom-sheet-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.bottom-sheet-enter-from,
+.bottom-sheet-leave-to {
+  opacity: 0;
+}
+
+.bottom-sheet-enter-from .bottom-sheet,
+.bottom-sheet-leave-to .bottom-sheet {
+  transform: translateY(100%);
+}
+
+/* 响应式 */
+@media (max-width: 500px) {
+  .bottom-sheet {
+    max-width: none;
+    margin: 0;
+  }
+  
+  .bottom-sheet.fullscreen {
+    margin: 0;
+    height: 95%;
+    border-radius: 16px 16px 0 0;
+  }
+}
+
+@media (max-width: 375px) {
+  .bottom-sheet-header {
+    padding: 14px 16px;
+  }
+  
+  .sheet-title {
+    font-size: 16px;
+  }
+  
+  .sheet-close-btn {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+/* 滚动条样式 */
+.bottom-sheet-body::-webkit-scrollbar {
+  width: 4px;
+}
+
+.bottom-sheet-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.bottom-sheet-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.bottom-sheet-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/ConfirmDialog.vue b/src/components/common/ConfirmDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2a28482c5ad613f38ae645b690d37714d1f501e
--- /dev/null
+++ b/src/components/common/ConfirmDialog.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="confirm-overlay" v-if="visible" @click="handleCancel">
+    <div class="confirm-dialog" @click.stop>
+      <div class="dialog-header">
+        <h3 class="dialog-title">{{ title }}</h3>
+      </div>
+      
+      <div class="dialog-content">
+        <p class="dialog-message">{{ message }}</p>
+      </div>
+      
+      <div class="dialog-actions">
+        <button 
+          class="dialog-btn dialog-btn-cancel" 
+          @click="handleCancel"
+        >
+          {{ cancelText }}
+        </button>
+        <button 
+          class="dialog-btn dialog-btn-confirm" 
+          @click="handleConfirm"
+          :class="{ danger: type === 'danger' }"
+        >
+          {{ confirmText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '确认操作'
+  },
+  message: {
+    type: String,
+    required: true
+  },
+  confirmText: {
+    type: String,
+    default: '确认'
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  type: {
+    type: String,
+    default: 'normal', // 'normal' | 'danger'
+  }
+})
+
+const emit = defineEmits(['confirm', 'cancel'])
+
+const visible = ref(false)
+
+const show = () => {
+  visible.value = true
+}
+
+const hide = () => {
+  visible.value = false
+}
+
+const handleConfirm = () => {
+  emit('confirm')
+  hide()
+}
+
+const handleCancel = () => {
+  emit('cancel')
+  hide()
+}
+
+defineExpose({
+  show,
+  hide
+})
+</script>
+
+<style scoped>
+.confirm-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.confirm-dialog {
+  background: var(--bg-card);
+  border-radius: 16px;
+  padding: 0;
+  width: 90%;
+  max-width: 360px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  animation: slideUp 0.2s ease-out;
+  overflow: hidden;
+}
+
+.dialog-header {
+  padding: 24px 24px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  text-align: center;
+}
+
+.dialog-content {
+  padding: 16px 24px 24px;
+}
+
+.dialog-message {
+  font-size: 16px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin: 0;
+  text-align: center;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 12px;
+  padding: 0 24px 24px;
+}
+
+.dialog-btn {
+  flex: 1;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  min-height: 44px;
+}
+
+.dialog-btn-cancel {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-light);
+}
+
+.dialog-btn-cancel:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.dialog-btn-confirm {
+  background: var(--primary-color);
+  color: white;
+}
+
+.dialog-btn-confirm:hover {
+  background: var(--primary-color-hover);
+}
+
+.dialog-btn-confirm.danger {
+  background: #ff4444;
+}
+
+.dialog-btn-confirm.danger:hover {
+  background: #ff2222;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .confirm-dialog {
+    width: 95%;
+    max-width: none;
+  }
+  
+  .dialog-header {
+    padding: 20px 20px 12px;
+  }
+  
+  .dialog-title {
+    font-size: 16px;
+  }
+  
+  .dialog-content {
+    padding: 12px 20px 20px;
+  }
+  
+  .dialog-message {
+    font-size: 15px;
+  }
+  
+  .dialog-actions {
+    padding: 0 20px 20px;
+    gap: 8px;
+  }
+  
+  .dialog-btn {
+    padding: 10px 16px;
+    font-size: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/Empty.vue b/src/components/common/Empty.vue
new file mode 100644
index 0000000000000000000000000000000000000000..094ece5a2b6e9ebf94069e8de3cbd63fda58d9da
--- /dev/null
+++ b/src/components/common/Empty.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="empty-container">
+    <div class="empty-content">
+      <!-- 空状态图标 -->
+      <div class="empty-icon">
+        <i :class="iconClass"></i>
+      </div>
+      
+      <!-- 主要文本 -->
+      <h3 class="empty-title">{{ title }}</h3>
+      
+      <!-- 描述文本 -->
+      <p class="empty-description" v-if="description">{{ description }}</p>
+      
+      <!-- 操作按钮 -->
+      <div class="empty-actions" v-if="$slots.action">
+        <slot name="action"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 标题文本
+  title: {
+    type: String,
+    default: '暂无内容'
+  },
+  
+  // 描述文本
+  description: {
+    type: String,
+    default: ''
+  },
+  
+  // 图标类型：search, music, favorite, history, network
+  type: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'search', 'music', 'favorite', 'history', 'network'].includes(value)
+  }
+})
+
+// 图标映射
+const iconClass = computed(() => {
+  const iconMap = {
+    default: 'fas fa-inbox',
+    search: 'fas fa-search',
+    music: 'fas fa-music',
+    favorite: 'fas fa-heart-broken',
+    history: 'fas fa-history',
+    network: 'fas fa-wifi'
+  }
+  
+  return iconMap[props.type] || iconMap.default
+})
+</script>
+
+<style scoped>
+.empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 40px 20px;
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 300px;
+}
+
+.empty-icon {
+  margin-bottom: 20px;
+}
+
+.empty-icon i {
+  font-size: 64px;
+  color: var(--text-tertiary);
+  opacity: 0.6;
+}
+
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+  line-height: 1.4;
+}
+
+.empty-description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 24px 0;
+  line-height: 1.5;
+}
+
+.empty-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .empty-container {
+    min-height: 160px;
+    padding: 30px 16px;
+  }
+  
+  .empty-icon i {
+    font-size: 48px;
+  }
+  
+  .empty-title {
+    font-size: 16px;
+  }
+  
+  .empty-description {
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+}
+
+/* 动画效果 */
+.empty-content {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 特殊类型的样式 */
+.empty-icon .fa-search {
+  color: #3182ce;
+}
+
+.empty-icon .fa-music {
+  color: var(--accent-red);
+}
+
+.empty-icon .fa-heart-broken {
+  color: #e53e3e;
+}
+
+.empty-icon .fa-history {
+  color: #805ad5;
+}
+
+.empty-icon .fa-wifi {
+  color: #38a169;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/Icon.vue b/src/components/common/Icon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..471d6fdfd3dd45f5e2bd1fadab2555e989903987
--- /dev/null
+++ b/src/components/common/Icon.vue
@@ -0,0 +1,171 @@
+<template>
+  <i 
+    :class="iconClass" 
+    :style="iconStyle"
+    @click="handleClick"
+  ></i>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 图标名称（FontAwesome类名，不需要前缀）
+  name: {
+    type: String,
+    required: true
+  },
+  
+  // 图标大小
+  size: {
+    type: [String, Number],
+    default: 'inherit'
+  },
+  
+  // 图标颜色
+  color: {
+    type: String,
+    default: 'inherit'
+  },
+  
+  // 是否可点击
+  clickable: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 旋转角度
+  rotate: {
+    type: [String, Number],
+    default: 0
+  },
+  
+  // 是否加载中（旋转动画）
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+// 图标类名
+const iconClass = computed(() => {
+  const classes = []
+  
+  // 基础类名
+  if (props.name.startsWith('fa-')) {
+    classes.push('fas', props.name)
+  } else {
+    classes.push('fas', `fa-${props.name}`)
+  }
+  
+  // 可点击样式
+  if (props.clickable) {
+    classes.push('icon-clickable')
+  }
+  
+  // 加载动画
+  if (props.loading) {
+    classes.push('fa-spin')
+  }
+  
+  return classes.join(' ')
+})
+
+// 图标样式
+const iconStyle = computed(() => {
+  const styles = {}
+  
+  // 大小
+  if (props.size !== 'inherit') {
+    const sizeValue = typeof props.size === 'number' ? `${props.size}px` : props.size
+    styles.fontSize = sizeValue
+  }
+  
+  // 颜色
+  if (props.color !== 'inherit') {
+    styles.color = props.color
+  }
+  
+  // 旋转
+  if (props.rotate && !props.loading) {
+    styles.transform = `rotate(${props.rotate}deg)`
+  }
+  
+  return styles
+})
+
+// 处理点击事件
+const handleClick = (event) => {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style scoped>
+.icon-clickable {
+  cursor: pointer;
+  transition: var(--transition-fast);
+  user-select: none;
+}
+
+.icon-clickable:hover {
+  opacity: 0.8;
+  transform: scale(1.05);
+}
+
+.icon-clickable:active {
+  transform: scale(0.95);
+}
+
+/* 常用图标预设 */
+.fa-play {
+  margin-left: 2px; /* 播放图标视觉居中 */
+}
+
+.fa-heart {
+  color: #e53e3e;
+}
+
+.fa-heart.far {
+  color: var(--text-secondary);
+}
+
+.fa-star {
+  color: #ed8936;
+}
+
+.fa-star.far {
+  color: var(--text-secondary);
+}
+
+/* 加载动画优化 */
+.fa-spin {
+  animation: fa-spin 1s infinite linear;
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 无障碍支持 */
+.icon-clickable:focus-visible {
+  outline: 2px solid var(--accent-red);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* 禁用状态 */
+.icon-disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/Loading.vue b/src/components/common/Loading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0263a1ef90b1c629c27347a41b214dd2db274fd9
--- /dev/null
+++ b/src/components/common/Loading.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="loading-container" :class="{ overlay: overlay }">
+    <div class="loading-content">
+      <!-- 加载动画 -->
+      <div class="loading-spinner" :class="size">
+        <div v-for="i in 12" :key="i" class="spinner-bar" :style="{ '--delay': `${i * 0.1}s` }"></div>
+      </div>
+      
+      <!-- 加载文本 -->
+      <div v-if="text" class="loading-text">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  // 是否显示遮罩层
+  overlay: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 加载提示文字
+  text: {
+    type: String,
+    default: ''
+  },
+  
+  // 大小：small, medium, large
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  }
+})
+</script>
+
+<style scoped>
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.loading-container.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.loading-spinner {
+  position: relative;
+  display: inline-block;
+}
+
+.loading-spinner.small {
+  width: 20px;
+  height: 20px;
+}
+
+.loading-spinner.medium {
+  width: 32px;
+  height: 32px;
+}
+
+.loading-spinner.large {
+  width: 48px;
+  height: 48px;
+}
+
+.spinner-bar {
+  position: absolute;
+  width: 2px;
+  height: 25%;
+  background: var(--accent-red);
+  border-radius: 1px;
+  opacity: 0;
+  animation: spin 1.2s linear infinite;
+  animation-delay: var(--delay);
+  transform-origin: 50% 200%;
+}
+
+.spinner-bar:nth-child(1) { transform: rotate(0deg); }
+.spinner-bar:nth-child(2) { transform: rotate(30deg); }
+.spinner-bar:nth-child(3) { transform: rotate(60deg); }
+.spinner-bar:nth-child(4) { transform: rotate(90deg); }
+.spinner-bar:nth-child(5) { transform: rotate(120deg); }
+.spinner-bar:nth-child(6) { transform: rotate(150deg); }
+.spinner-bar:nth-child(7) { transform: rotate(180deg); }
+.spinner-bar:nth-child(8) { transform: rotate(210deg); }
+.spinner-bar:nth-child(9) { transform: rotate(240deg); }
+.spinner-bar:nth-child(10) { transform: rotate(270deg); }
+.spinner-bar:nth-child(11) { transform: rotate(300deg); }
+.spinner-bar:nth-child(12) { transform: rotate(330deg); }
+
+@keyframes spin {
+  0%, 40%, 100% {
+    opacity: 0.3;
+  }
+  20% {
+    opacity: 1;
+  }
+}
+
+.loading-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+  text-align: center;
+  font-weight: 500;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .loading-container {
+    padding: 16px;
+  }
+  
+  .loading-content {
+    gap: 12px;
+  }
+  
+  .loading-text {
+    font-size: 13px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/Modal.vue b/src/components/common/Modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00ee2b467e8f1c696576bf1c2acb1f896c7275d3
--- /dev/null
+++ b/src/components/common/Modal.vue
@@ -0,0 +1,301 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal" appear>
+      <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
+        <div 
+          class="modal"
+          :class="size"
+          @click.stop
+        >
+          <!-- 头部 -->
+          <div class="modal-header" v-if="title || closable">
+            <h3 class="modal-title" v-if="title">{{ title }}</h3>
+            <button 
+              v-if="closable"
+              class="modal-close-btn"
+              @click="handleClose"
+            >
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+          
+          <!-- 内容 -->
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+          
+          <!-- 底部 -->
+          <div class="modal-footer" v-if="$slots.footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  // 标题
+  title: {
+    type: String,
+    default: ''
+  },
+  
+  // 大小：small, medium, large
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  },
+  
+  // 是否可关闭
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 点击遮罩是否关闭
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 是否锁定滚动
+  lockScroll: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['close', 'open'])
+
+const visible = ref(false)
+
+// 处理遮罩点击
+const handleOverlayClick = () => {
+  if (props.maskClosable) {
+    handleClose()
+  }
+}
+
+// 处理关闭
+const handleClose = () => {
+  close()
+}
+
+// 处理键盘事件
+const handleKeyDown = (event) => {
+  if (event.key === 'Escape' && props.closable) {
+    handleClose()
+  }
+}
+
+// 锁定/解锁滚动
+const toggleScrollLock = (lock) => {
+  if (!props.lockScroll) return
+  
+  if (lock) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+}
+
+// 显示模态框
+const open = () => {
+  visible.value = true
+  toggleScrollLock(true)
+  document.addEventListener('keydown', handleKeyDown)
+  emit('open')
+}
+
+// 关闭模态框
+const close = () => {
+  visible.value = false
+  toggleScrollLock(false)
+  document.removeEventListener('keydown', handleKeyDown)
+  emit('close')
+}
+
+// 生命周期
+onMounted(() => {
+  open()
+})
+
+onUnmounted(() => {
+  toggleScrollLock(false)
+  document.removeEventListener('keydown', handleKeyDown)
+})
+
+// 暴露方法
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.modal {
+  background: var(--bg-secondary);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal.small {
+  max-width: 400px;
+  width: 90%;
+}
+
+.modal.medium {
+  max-width: 600px;
+  width: 90%;
+}
+
+.modal.large {
+  max-width: 800px;
+  width: 95%;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.modal-close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.modal-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  flex: 1;
+  padding: 20px 24px;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  padding: 16px 24px 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+/* 动画 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal,
+.modal-leave-to .modal {
+  transform: scale(0.9) translateY(-20px);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .modal-overlay {
+    padding: 16px;
+  }
+  
+  .modal {
+    border-radius: 12px;
+  }
+  
+  .modal.small,
+  .modal.medium,
+  .modal.large {
+    width: 100%;
+    max-width: none;
+  }
+  
+  .modal-header {
+    padding: 16px 20px 12px;
+  }
+  
+  .modal-title {
+    font-size: 16px;
+  }
+  
+  .modal-close-btn {
+    width: 28px;
+    height: 28px;
+  }
+  
+  .modal-body {
+    padding: 16px 20px;
+  }
+  
+  .modal-footer {
+    padding: 12px 20px 16px;
+  }
+}
+
+/* 滚动条样式 */
+.modal-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.modal-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.modal-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/Toast.vue b/src/components/common/Toast.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28e4ecb1ef62677e7144363be41a5d6eec576b55
--- /dev/null
+++ b/src/components/common/Toast.vue
@@ -0,0 +1,271 @@
+<template>
+  <Teleport to="body">
+    <Transition name="toast" appear>
+      <div 
+        v-if="visible && message" 
+        class="toast"
+        :class="[type, position]"
+        @click="handleClick"
+      >
+        <div class="toast-content">
+          <!-- 图标 -->
+          <div class="toast-icon" v-if="showIcon">
+            <i :class="iconClass"></i>
+          </div>
+          
+          <!-- 消息内容 -->
+          <div class="toast-message">{{ message }}</div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  // 消息内容
+  message: {
+    type: String,
+    default: ''
+  },
+  
+  // 类型：success, error, warning, info
+  type: {
+    type: String,
+    default: 'info',
+    validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
+  },
+  
+  // 显示时长（毫秒）
+  duration: {
+    type: Number,
+    default: 3000
+  },
+  
+  // 位置：top, center, bottom
+  position: {
+    type: String,
+    default: 'top',
+    validator: (value) => ['top', 'center', 'bottom'].includes(value)
+  },
+  
+  // 是否显示图标
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 是否可点击关闭
+  closable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const visible = ref(false)
+let timer = null
+
+// 图标映射
+const iconClass = computed(() => {
+  const iconMap = {
+    success: 'fas fa-check-circle',
+    error: 'fas fa-times-circle',
+    warning: 'fas fa-exclamation-triangle',
+    info: 'fas fa-info-circle'
+  }
+  
+  return iconMap[props.type] || iconMap.info
+})
+
+// 处理点击事件
+const handleClick = () => {
+  if (props.closable) {
+    close()
+  }
+}
+
+// 显示Toast
+const show = () => {
+  visible.value = true
+  
+  if (props.duration > 0) {
+    timer = setTimeout(() => {
+      close()
+    }, props.duration)
+  }
+}
+
+// 关闭Toast
+const close = () => {
+  visible.value = false
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+  emit('close')
+}
+
+// 生命周期
+onMounted(() => {
+  show()
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer)
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  close
+})
+</script>
+
+<style scoped>
+.toast {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  max-width: calc(100vw - 32px);
+  min-width: 200px;
+}
+
+.toast.top {
+  top: 20px;
+}
+
+.toast.center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.toast.bottom {
+  bottom: 20px;
+}
+
+.toast-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.toast-icon {
+  flex-shrink: 0;
+}
+
+.toast-icon i {
+  font-size: 16px;
+}
+
+.toast-message {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+/* 类型样式 */
+.toast.success .toast-icon i {
+  color: #48bb78;
+}
+
+.toast.success .toast-content {
+  border-color: rgba(72, 187, 120, 0.3);
+}
+
+.toast.error .toast-icon i {
+  color: #e53e3e;
+}
+
+.toast.error .toast-content {
+  border-color: rgba(229, 62, 62, 0.3);
+}
+
+.toast.warning .toast-icon i {
+  color: #ed8936;
+}
+
+.toast.warning .toast-content {
+  border-color: rgba(237, 137, 54, 0.3);
+}
+
+.toast.info .toast-icon i {
+  color: #3182ce;
+}
+
+.toast.info .toast-content {
+  border-color: rgba(49, 130, 206, 0.3);
+}
+
+/* 动画 */
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-20px);
+}
+
+.toast.center.toast-enter-from {
+  transform: translate(-50%, -50%) scale(0.9);
+}
+
+.toast.bottom.toast-enter-from {
+  transform: translateX(-50%) translateY(20px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-20px);
+}
+
+.toast.center.toast-leave-to {
+  transform: translate(-50%, -50%) scale(0.9);
+}
+
+.toast.bottom.toast-leave-to {
+  transform: translateX(-50%) translateY(20px);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .toast {
+    max-width: calc(100vw - 24px);
+    min-width: auto;
+  }
+  
+  .toast-content {
+    padding: 10px 14px;
+    gap: 10px;
+  }
+  
+  .toast-icon i {
+    font-size: 14px;
+  }
+  
+  .toast-message {
+    font-size: 13px;
+  }
+}
+
+/* 触摸反馈 */
+@media (hover: none) {
+  .toast-content:active {
+    transform: scale(0.98);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/favorites/FavoriteButton.vue b/src/components/favorites/FavoriteButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb6d9a912d23a83856f6475239639aadd3c25549
--- /dev/null
+++ b/src/components/favorites/FavoriteButton.vue
@@ -0,0 +1,283 @@
+<template>
+  <button 
+    class="favorite-button" 
+    :class="{ 
+      'favorited': isFavorited, 
+      'loading': loading,
+      [`size-${size}`]: size
+    }"
+    @click="handleToggle"
+    :disabled="loading"
+    :title="isFavorited ? '取消收藏' : '添加收藏'"
+  >
+    <i 
+      :class="iconClass" 
+      class="heart-icon"
+    ></i>
+    <span v-if="showText" class="favorite-text">
+      {{ isFavorited ? '已收藏' : '收藏' }}
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useFavoritesStore } from '@/stores/favorites'
+
+const props = defineProps({
+  // 歌曲信息
+  song: {
+    type: Object,
+    required: true
+  },
+  
+  // 按钮大小
+  size: {
+    type: String,
+    default: 'medium', // small, medium, large
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  },
+  
+  // 是否显示文字
+  showText: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 自定义样式类
+  variant: {
+    type: String,
+    default: 'default', // default, minimal, filled
+    validator: (value) => ['default', 'minimal', 'filled'].includes(value)
+  }
+})
+
+const emit = defineEmits(['toggle', 'favorited', 'unfavorited'])
+
+const favoritesStore = useFavoritesStore()
+const loading = ref(false)
+
+// 是否已收藏
+const isFavorited = computed(() => {
+  return favoritesStore.isFavorite(props.song.id)
+})
+
+// 图标类名
+const iconClass = computed(() => {
+  if (loading.value) {
+    return 'fas fa-spinner fa-spin'
+  }
+  return isFavorited.value ? 'fas fa-heart' : 'far fa-heart'
+})
+
+// 切换收藏状态
+const handleToggle = async () => {
+  if (loading.value) return
+  
+  loading.value = true
+  
+  try {
+    if (isFavorited.value) {
+      await favoritesStore.removeFavorite(props.song.id)
+      emit('unfavorited', props.song)
+    } else {
+      await favoritesStore.addFavorite(props.song)
+      emit('favorited', props.song)
+    }
+    
+    emit('toggle', {
+      song: props.song,
+      favorited: !isFavorited.value
+    })
+  } catch (error) {
+    console.error('收藏操作失败:', error)
+  } finally {
+    setTimeout(() => {
+      loading.value = false
+    }, 300) // 延迟一点显示动画效果
+  }
+}
+</script>
+
+<style scoped>
+.favorite-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-radius: 50%;
+  padding: 8px;
+  min-width: 44px;
+  min-height: 44px;
+  position: relative;
+}
+
+.favorite-button:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.favorite-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.heart-icon {
+  font-size: 16px;
+  transition: all var(--transition-fast);
+}
+
+.favorite-text {
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* 收藏状态 */
+.favorite-button.favorited {
+  color: var(--accent-red);
+}
+
+.favorite-button.favorited:hover {
+  color: var(--accent-red-hover);
+}
+
+.favorite-button.favorited .heart-icon {
+  animation: heart-beat 0.3s ease-in-out;
+}
+
+@keyframes heart-beat {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* 尺寸变化 */
+.favorite-button.size-small {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 6px;
+}
+
+.favorite-button.size-small .heart-icon {
+  font-size: 14px;
+}
+
+.favorite-button.size-small .favorite-text {
+  font-size: 11px;
+}
+
+.favorite-button.size-large {
+  min-width: 52px;
+  min-height: 52px;
+  padding: 10px;
+}
+
+.favorite-button.size-large .heart-icon {
+  font-size: 18px;
+}
+
+.favorite-button.size-large .favorite-text {
+  font-size: 13px;
+}
+
+/* 样式变体 */
+.favorite-button.variant-minimal {
+  background: none;
+  padding: 4px;
+  min-width: auto;
+  min-height: auto;
+  border-radius: 4px;
+}
+
+.favorite-button.variant-minimal:hover {
+  background: none;
+  color: var(--accent-red);
+}
+
+.favorite-button.variant-filled {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+
+.favorite-button.variant-filled:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.favorite-button.variant-filled.favorited {
+  background: var(--accent-red);
+  color: white;
+}
+
+.favorite-button.variant-filled.favorited:hover {
+  background: var(--accent-red-hover);
+}
+
+/* 加载状态 */
+.favorite-button.loading .heart-icon {
+  opacity: 0.6;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .favorite-button {
+    min-width: 40px;
+    min-height: 40px;
+    padding: 6px;
+  }
+  
+  .heart-icon {
+    font-size: 14px;
+  }
+  
+  .favorite-text {
+    font-size: 11px;
+  }
+}
+
+/* 按下效果 */
+.favorite-button:active {
+  transform: scale(0.95);
+}
+
+/* 收藏成功动画 */
+.favorite-button.favorited .heart-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: var(--accent-red);
+  opacity: 0;
+  animation: heart-ripple 0.6s ease-out;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+@keyframes heart-ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0.8;
+  }
+  100% {
+    width: 40px;
+    height: 40px;
+    opacity: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/favorites/FavoriteItem.vue b/src/components/favorites/FavoriteItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fe0f39e7b4f8e79e04d75d5b4eca05548ca4469
--- /dev/null
+++ b/src/components/favorites/FavoriteItem.vue
@@ -0,0 +1,458 @@
+<template>
+  <div 
+    class="favorite-item" 
+    :class="{ 
+      'playing': isCurrentSong, 
+      'selected': isSelected 
+    }"
+    @click="handlePlay"
+  >
+    <!-- 专辑封面 -->
+    <div class="album-cover">
+      <img 
+        :src="albumCoverUrl" 
+        :alt="song.album"
+        @error="handleImageError"
+        loading="lazy"
+      >
+      <div class="play-indicator" v-if="isCurrentSong">
+        <i :class="playIconClass"></i>
+      </div>
+    </div>
+    
+    <!-- 歌曲信息 -->
+    <div class="song-info">
+      <h3 class="song-name">{{ song.name }}</h3>
+      <p class="song-meta">
+        <span class="artist">{{ formatArtist(song.artist) }}</span>
+        <span class="separator">•</span>
+        <span class="album">{{ song.album }}</span>
+      </p>
+      <div class="song-extra">
+        <span class="source">{{ getSourceName(song.source) }}</span>
+        <span class="separator">•</span>
+        <span class="favorite-time">{{ formatFavoriteTime(favoriteTime) }}</span>
+      </div>
+    </div>
+    
+    <!-- 操作按钮 -->
+    <div class="item-actions">
+      <!-- 收藏时间或播放次数 -->
+      <div class="play-count" v-if="playCount > 0">
+        <i class="fas fa-play"></i>
+        <span>{{ formatPlayCount(playCount) }}</span>
+      </div>
+      
+      <!-- 更多操作按钮 -->
+      <button class="more-btn" @click.stop="showMoreActions" :title="'更多操作'">
+        <i class="fas fa-ellipsis-v"></i>
+      </button>
+      
+      <!-- 取消收藏按钮 -->
+      <FavoriteButton 
+        :song="song"
+        size="small"
+        variant="minimal"
+        @unfavorited="handleUnfavorited"
+      />
+    </div>
+    
+    <!-- 更多操作菜单 -->
+    <div class="more-menu" v-if="showMenu" @click.stop>
+      <button @click="handlePlayNext">下一首播放</button>
+      <button @click="handleAddToPlaylist">添加到播放列表</button>
+      <button @click="handleCopyLink">复制链接</button>
+      <button @click="handleViewDetails">查看详情</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+import { useHistoryStore } from '@/stores/history'
+import FavoriteButton from './FavoriteButton.vue'
+
+const props = defineProps({
+  // 歌曲信息
+  song: {
+    type: Object,
+    required: true
+  },
+  
+  // 收藏时间
+  favoriteTime: {
+    type: Number,
+    default: Date.now
+  },
+  
+  // 播放次数
+  playCount: {
+    type: Number,
+    default: 0
+  },
+  
+  // 是否被选中
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 显示模式
+  layout: {
+    type: String,
+    default: 'default', // default, compact, detailed
+    validator: (value) => ['default', 'compact', 'detailed'].includes(value)
+  }
+})
+
+const emit = defineEmits(['play', 'unfavorited', 'more-action'])
+
+const playerStore = usePlayerStore()
+const historyStore = useHistoryStore()
+const showMenu = ref(false)
+
+// 专辑封面URL
+const albumCoverUrl = computed(() => {
+  if (props.song.pic_id) {
+    return `https://music-api.gdstudio.xyz/api.php?types=pic&source=${props.song.source}&id=${props.song.pic_id}&size=300`
+  }
+  return '/default-album.png'
+})
+
+// 是否是当前播放歌曲
+const isCurrentSong = computed(() => {
+  return playerStore.currentSong?.id === props.song.id
+})
+
+// 播放图标类名
+const playIconClass = computed(() => {
+  if (playerStore.isPlaying && isCurrentSong.value) {
+    return 'fas fa-pause'
+  }
+  return 'fas fa-play'
+})
+
+// 格式化歌手名
+const formatArtist = (artist) => {
+  if (Array.isArray(artist)) {
+    return artist.join('/')
+  }
+  return artist || '未知歌手'
+}
+
+// 获取音乐源名称
+const getSourceName = (source) => {
+  const sourceMap = {
+    'netease': '网易云',
+    'tencent': 'QQ音乐',
+    'kugou': '酷狗',
+    'kuwo': '酷我',
+    'migu': '咪咕',
+    'spotify': 'Spotify',
+    'apple': 'Apple',
+    'ytmusic': 'YouTube',
+    'joox': 'JOOX',
+    'tidal': 'TIDAL',
+    'deezer': 'Deezer',
+    'qobuz': 'Qobuz',
+    'ximalaya': '喜马拉雅'
+  }
+  return sourceMap[source] || source
+}
+
+// 格式化收藏时间
+const formatFavoriteTime = (timestamp) => {
+  const now = Date.now()
+  const diff = now - timestamp
+  
+  if (diff < 60000) {
+    return '刚刚收藏'
+  } else if (diff < 3600000) {
+    return `${Math.floor(diff / 60000)}分钟前收藏`
+  } else if (diff < 86400000) {
+    return `${Math.floor(diff / 3600000)}小时前收藏`
+  } else if (diff < 2592000000) {
+    return `${Math.floor(diff / 86400000)}天前收藏`
+  } else {
+    return new Date(timestamp).toLocaleDateString()
+  }
+}
+
+// 格式化播放次数
+const formatPlayCount = (count) => {
+  if (count >= 10000) {
+    return `${(count / 10000).toFixed(1)}万`
+  } else if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}k`
+  }
+  return count.toString()
+}
+
+// 处理图片加载错误
+const handleImageError = (event) => {
+  event.target.src = '/default-album.png'
+}
+
+// 播放歌曲
+const handlePlay = () => {
+  if (isCurrentSong.value) {
+    playerStore.togglePlay()
+  } else {
+    playerStore.playSong(props.song)
+    historyStore.addToHistory(props.song)
+  }
+  emit('play', props.song)
+}
+
+// 取消收藏
+const handleUnfavorited = () => {
+  emit('unfavorited', props.song)
+}
+
+// 显示更多操作
+const showMoreActions = () => {
+  showMenu.value = !showMenu.value
+}
+
+// 下一首播放
+const handlePlayNext = () => {
+  playerStore.playNext(props.song)
+  showMenu.value = false
+  emit('more-action', { action: 'play-next', song: props.song })
+}
+
+// 添加到播放列表
+const handleAddToPlaylist = () => {
+  playerStore.addToPlaylist(props.song)
+  showMenu.value = false
+  emit('more-action', { action: 'add-to-playlist', song: props.song })
+}
+
+// 复制链接
+const handleCopyLink = () => {
+  const url = `${window.location.origin}/?play=${props.song.source}&id=${props.song.id}`
+  navigator.clipboard.writeText(url)
+  showMenu.value = false
+  emit('more-action', { action: 'copy-link', song: props.song })
+}
+
+// 查看详情
+const handleViewDetails = () => {
+  showMenu.value = false
+  emit('more-action', { action: 'view-details', song: props.song })
+}
+
+// 点击外部关闭菜单
+document.addEventListener('click', () => {
+  showMenu.value = false
+})
+</script>
+
+<style scoped>
+.favorite-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+  background: transparent;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.favorite-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.favorite-item.playing {
+  background: rgba(255, 107, 107, 0.1);
+  border-bottom: 1px solid var(--accent-red);
+}
+
+.favorite-item.selected {
+  background: rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.album-cover {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 12px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.album-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: var(--transition-fast);
+}
+
+.favorite-item:hover .album-cover img {
+  transform: scale(1.05);
+}
+
+.play-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-indicator i {
+  color: white;
+  font-size: 14px;
+}
+
+.song-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+}
+
+.song-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0 0 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.favorite-item.playing .song-name {
+  color: var(--accent-red);
+}
+
+.song-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0 0 2px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-extra {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.separator {
+  margin: 0 6px;
+  opacity: 0.5;
+}
+
+.item-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.play-count {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-tertiary);
+  font-size: 11px;
+}
+
+.play-count i {
+  font-size: 10px;
+}
+
+.more-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  opacity: 0;
+}
+
+.favorite-item:hover .more-btn {
+  opacity: 1;
+}
+
+.more-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.more-menu {
+  position: absolute;
+  top: 100%;
+  right: 16px;
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 8px 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  min-width: 120px;
+}
+
+.more-menu button {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+
+.more-menu button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .favorite-item {
+    padding: 10px 12px;
+  }
+  
+  .album-cover {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+  }
+  
+  .song-name {
+    font-size: 13px;
+  }
+  
+  .song-meta {
+    font-size: 11px;
+  }
+  
+  .song-extra {
+    font-size: 10px;
+  }
+  
+  .favorite-item:last-child {
+    border-bottom: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/favorites/FavoritesList.vue b/src/components/favorites/FavoritesList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b6b94f15f333eeaf119ad14470866b2b092fea06
--- /dev/null
+++ b/src/components/favorites/FavoritesList.vue
@@ -0,0 +1,853 @@
+<template>
+  <div class="favorites-list">
+    <!-- 顶部操作栏 -->
+    <div class="list-header" v-if="favoritesList.length > 0">
+      <div class="header-info">
+        <h2 class="list-title">
+          <i class="fas fa-heart"></i>
+          我喜欢的音乐
+          <span class="count">({{ favoritesList.length }})</span>
+        </h2>
+        <p class="list-subtitle">{{ totalDuration }} • {{ lastUpdateText }}</p>
+      </div>
+      
+      <div class="header-actions">
+        <button class="play-all-btn" @click="playAll" :disabled="favoritesList.length === 0">
+          <i class="fas fa-play"></i>
+          播放全部
+        </button>
+        
+        <button 
+          class="batch-btn" 
+          :class="{ 'active': batchMode }"
+          @click="toggleBatchMode"
+        >
+          <i :class="batchMode ? 'fas fa-times' : 'fas fa-check-square'"></i>
+          {{ batchMode ? '取消' : '批量管理' }}
+        </button>
+      </div>
+    </div>
+    
+    <!-- 搜索栏 -->
+    <div class="search-bar" v-if="showSearch && favoritesList.length > 0">
+      <div class="search-input-wrapper">
+        <i class="fas fa-search"></i>
+        <input 
+          type="text" 
+          v-model="searchQuery"
+          placeholder="搜索收藏的歌曲..."
+          class="search-input"
+          @input="handleSearch"
+        >
+        <button 
+          v-if="searchQuery" 
+          class="clear-search-btn"
+          @click="clearSearch"
+        >
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      
+      <!-- 搜索过滤器 -->
+      <div class="search-filters" v-if="searchQuery">
+        <button 
+          class="filter-btn"
+          :class="{ 'active': searchFilter === 'all' }"
+          @click="setSearchFilter('all')"
+        >
+          全部
+        </button>
+        <button 
+          class="filter-btn"
+          :class="{ 'active': searchFilter === 'name' }"
+          @click="setSearchFilter('name')"
+        >
+          歌名
+        </button>
+        <button 
+          class="filter-btn"
+          :class="{ 'active': searchFilter === 'artist' }"
+          @click="setSearchFilter('artist')"
+        >
+          歌手
+        </button>
+        <button 
+          class="filter-btn"
+          :class="{ 'active': searchFilter === 'album' }"
+          @click="setSearchFilter('album')"
+        >
+          专辑
+        </button>
+      </div>
+    </div>
+    
+    <!-- 批量操作栏 -->
+    <div class="batch-actions" v-if="batchMode && selectedItems.length > 0">
+      <div class="batch-info">
+        <span>已选择 {{ selectedItems.length }} 首</span>
+      </div>
+      <div class="batch-buttons">
+        <button @click="batchPlay">播放选中</button>
+        <button @click="batchAddToPlaylist">添加到播放列表</button>
+        <button @click="batchRemove" class="danger">删除选中</button>
+      </div>
+    </div>
+    
+    <!-- 排序选项 -->
+    <div class="sort-options" v-if="favoritesList.length > 0">
+      <label class="sort-label">排序方式:</label>
+      <select v-model="sortBy" @change="handleSort" class="sort-select">
+        <option value="favoriteTime">收藏时间</option>
+        <option value="name">歌名</option>
+        <option value="artist">歌手</option>
+        <option value="playCount">播放次数</option>
+      </select>
+      <button 
+        class="sort-order-btn"
+        @click="toggleSortOrder"
+        :title="sortOrder === 'desc' ? '降序' : '升序'"
+      >
+        <i :class="sortOrder === 'desc' ? 'fas fa-sort-amount-down' : 'fas fa-sort-amount-up'"></i>
+      </button>
+    </div>
+    
+    <!-- 歌曲列表 -->
+    <div class="favorites-content">
+      <div v-if="loading" class="loading-container">
+        <Loading text="加载收藏列表..." />
+      </div>
+      
+      <div v-else-if="filteredList.length === 0 && !loading" class="empty-container">
+        <Empty 
+          v-if="favoritesList.length === 0"
+          icon="fas fa-heart"
+          title="还没有收藏歌曲"
+          subtitle="在搜索结果中点击爱心收藏喜欢的歌曲"
+        />
+        <Empty 
+          v-else
+          icon="fas fa-search"
+          title="没有找到相关歌曲"
+          :subtitle="'没有找到包含「' + searchQuery + '」的歌曲'"
+        />
+      </div>
+      
+      <div v-else class="favorites-items">
+        <!-- 批量选择模式 -->
+        <div v-if="batchMode" class="batch-select-all">
+          <label class="checkbox-wrapper">
+            <input 
+              type="checkbox" 
+              :checked="isAllSelected"
+              :indeterminate="isIndeterminate"
+              @change="toggleSelectAll"
+            >
+            <span class="checkbox-text">全选 ({{ selectedItems.length }}/{{ filteredList.length }})</span>
+          </label>
+        </div>
+        
+        <!-- 歌曲项列表 -->
+        <div class="song-items">
+          <div 
+            v-for="(item, index) in paginatedList"
+            :key="item.song.id"
+            class="song-item-wrapper"
+          >
+            <!-- 批量选择复选框 -->
+            <label v-if="batchMode" class="item-checkbox">
+              <input 
+                type="checkbox"
+                :value="item.song.id"
+                v-model="selectedItems"
+                @change="handleItemSelect"
+              >
+            </label>
+            
+            <!-- 歌曲项 -->
+            <FavoriteItem 
+              :song="item.song"
+              :favorite-time="item.favoriteTime"
+              :play-count="getPlayCount(item.song.id)"
+              :is-selected="selectedItems.includes(item.song.id)"
+              @play="handlePlay"
+              @unfavorited="handleUnfavorited"
+              @more-action="handleMoreAction"
+            />
+          </div>
+        </div>
+        
+        <!-- 加载更多 -->
+        <div class="load-more" v-if="hasMore">
+          <button class="load-more-btn" @click="loadMore" :disabled="loadingMore">
+            <i v-if="loadingMore" class="fas fa-spinner fa-spin"></i>
+            <i v-else class="fas fa-plus"></i>
+            {{ loadingMore ? '加载中...' : `加载更多 (${filteredList.length - displayCount}首)` }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayerStore } from '@/stores/player'
+import { useHistoryStore } from '@/stores/history'
+import FavoriteItem from './FavoriteItem.vue'
+import Loading from '@/components/common/Loading.vue'
+import Empty from '@/components/common/Empty.vue'
+
+const props = defineProps({
+  // 是否显示搜索
+  showSearch: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 初始显示数量
+  initialCount: {
+    type: Number,
+    default: 20
+  },
+  
+  // 每次加载数量
+  loadCount: {
+    type: Number,
+    default: 20
+  }
+})
+
+const emit = defineEmits(['play', 'batch-action'])
+
+const favoritesStore = useFavoritesStore()
+const playerStore = usePlayerStore()
+const historyStore = useHistoryStore()
+
+// 响应式数据
+const loading = ref(true)
+const loadingMore = ref(false)
+const searchQuery = ref('')
+const searchFilter = ref('all')
+const sortBy = ref('favoriteTime')
+const sortOrder = ref('desc')
+const batchMode = ref(false)
+const selectedItems = ref([])
+const displayCount = ref(props.initialCount)
+
+// 计算属性
+const favoritesList = computed(() => {
+  return favoritesStore.favorites
+})
+
+const filteredList = computed(() => {
+  let result = [...favoritesList.value]
+  
+  // 搜索过滤
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(item => {
+      const song = item.song
+      const name = (song.name || '').toLowerCase()
+      const artist = formatArtist(song.artist).toLowerCase()
+      const album = (song.album || '').toLowerCase()
+      
+      switch (searchFilter.value) {
+        case 'name':
+          return name.includes(query)
+        case 'artist':
+          return artist.includes(query)
+        case 'album':
+          return album.includes(query)
+        default:
+          return name.includes(query) || artist.includes(query) || album.includes(query)
+      }
+    })
+  }
+  
+  // 排序
+  result.sort((a, b) => {
+    let valueA, valueB
+    
+    switch (sortBy.value) {
+      case 'name':
+        valueA = a.song.name || ''
+        valueB = b.song.name || ''
+        break
+      case 'artist':
+        valueA = formatArtist(a.song.artist)
+        valueB = formatArtist(b.song.artist)
+        break
+      case 'playCount':
+        valueA = getPlayCount(a.song.id)
+        valueB = getPlayCount(b.song.id)
+        break
+      default:
+        valueA = a.favoriteTime
+        valueB = b.favoriteTime
+    }
+    
+    if (sortOrder.value === 'desc') {
+      return valueB > valueA ? 1 : valueB < valueA ? -1 : 0
+    } else {
+      return valueA > valueB ? 1 : valueA < valueB ? -1 : 0
+    }
+  })
+  
+  return result
+})
+
+const paginatedList = computed(() => {
+  return filteredList.value.slice(0, displayCount.value)
+})
+
+const hasMore = computed(() => {
+  return filteredList.value.length > displayCount.value
+})
+
+const totalDuration = computed(() => {
+  // 这里应该计算总时长，暂时返回歌曲数量
+  return `${favoritesList.value.length} 首歌曲`
+})
+
+const lastUpdateText = computed(() => {
+  if (favoritesList.value.length === 0) return ''
+  
+  const latest = Math.max(...favoritesList.value.map(item => item.favoriteTime))
+  const now = Date.now()
+  const diff = now - latest
+  
+  if (diff < 3600000) {
+    return '最近更新'
+  } else if (diff < 86400000) {
+    return '今天更新'
+  } else if (diff < 2592000000) {
+    return `${Math.floor(diff / 86400000)}天前更新`
+  } else {
+    return new Date(latest).toLocaleDateString()
+  }
+})
+
+const isAllSelected = computed(() => {
+  return selectedItems.value.length === filteredList.value.length && filteredList.value.length > 0
+})
+
+const isIndeterminate = computed(() => {
+  return selectedItems.value.length > 0 && selectedItems.value.length < filteredList.value.length
+})
+
+// 方法
+const formatArtist = (artist) => {
+  if (Array.isArray(artist)) {
+    return artist.join('/')
+  }
+  return artist || '未知歌手'
+}
+
+const getPlayCount = (songId) => {
+  return historyStore.getPlayCount(songId)
+}
+
+const handleSearch = () => {
+  displayCount.value = props.initialCount
+}
+
+const clearSearch = () => {
+  searchQuery.value = ''
+  searchFilter.value = 'all'
+}
+
+const setSearchFilter = (filter) => {
+  searchFilter.value = filter
+}
+
+const handleSort = () => {
+  displayCount.value = props.initialCount
+}
+
+const toggleSortOrder = () => {
+  sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc'
+}
+
+const loadMore = async () => {
+  loadingMore.value = true
+  
+  setTimeout(() => {
+    displayCount.value += props.loadCount
+    loadingMore.value = false
+  }, 500)
+}
+
+const playAll = () => {
+  if (filteredList.value.length === 0) return
+  
+  const songs = filteredList.value.map(item => item.song)
+  playerStore.playPlaylist(songs)
+  emit('play', songs)
+}
+
+const toggleBatchMode = () => {
+  batchMode.value = !batchMode.value
+  selectedItems.value = []
+}
+
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedItems.value = []
+  } else {
+    selectedItems.value = filteredList.value.map(item => item.song.id)
+  }
+}
+
+const handleItemSelect = () => {
+  // 复选框变化处理
+}
+
+const batchPlay = () => {
+  const songs = filteredList.value
+    .filter(item => selectedItems.value.includes(item.song.id))
+    .map(item => item.song)
+  
+  if (songs.length > 0) {
+    playerStore.playPlaylist(songs)
+    emit('batch-action', { action: 'play', songs })
+  }
+}
+
+const batchAddToPlaylist = () => {
+  const songs = filteredList.value
+    .filter(item => selectedItems.value.includes(item.song.id))
+    .map(item => item.song)
+  
+  songs.forEach(song => {
+    playerStore.addToPlaylist(song)
+  })
+  
+  emit('batch-action', { action: 'add-to-playlist', songs })
+}
+
+const batchRemove = async () => {
+  if (confirm(`确定要删除选中的 ${selectedItems.value.length} 首歌曲吗？`)) {
+    for (const songId of selectedItems.value) {
+      await favoritesStore.removeFavorite(songId)
+    }
+    selectedItems.value = []
+    emit('batch-action', { action: 'remove', count: selectedItems.value.length })
+  }
+}
+
+const handlePlay = (song) => {
+  emit('play', song)
+}
+
+const handleUnfavorited = (song) => {
+  // 移除选中状态
+  const index = selectedItems.value.indexOf(song.id)
+  if (index > -1) {
+    selectedItems.value.splice(index, 1)
+  }
+}
+
+const handleMoreAction = (data) => {
+  emit('more-action', data)
+}
+
+// 生命周期
+onMounted(async () => {
+  try {
+    await favoritesStore.loadFavorites()
+  } catch (error) {
+    console.error('加载收藏列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+// 监听收藏列表变化
+watch(favoritesList, () => {
+  if (batchMode.value) {
+    // 过滤掉不存在的选中项
+    selectedItems.value = selectedItems.value.filter(id => 
+      favoritesList.value.some(item => item.song.id === id)
+    )
+  }
+})
+</script>
+
+<style scoped>
+.favorites-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--bg-card);
+  border-radius: var(--radius-small) var(--radius-small) 0 0;
+  margin: 0 16px;
+  border: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.header-info {
+  flex: 1;
+}
+
+.list-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px 0;
+}
+
+.list-title i {
+  color: var(--accent-red);
+}
+
+.count {
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+.list-subtitle {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.play-all-btn,
+.batch-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 20px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.play-all-btn:hover,
+.batch-btn:hover {
+  background: var(--accent-red-hover);
+}
+
+.play-all-btn:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+
+.batch-btn.active {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.search-bar {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  margin: 0 16px;
+  border-left: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-light);
+}
+
+.search-input-wrapper {
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.search-input-wrapper i {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-tertiary);
+  font-size: 14px;
+}
+
+.search-input {
+  width: 100%;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 20px;
+  padding: 0 40px;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+  transition: var(--transition-fast);
+}
+
+.search-input:focus {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.clear-search-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.clear-search-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.search-filters {
+  display: flex;
+  gap: 8px;
+}
+
+.filter-btn {
+  padding: 4px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.filter-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.filter-btn.active {
+  background: var(--accent-red);
+  border-color: var(--accent-red);
+  color: white;
+}
+
+.batch-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: rgba(255, 107, 107, 0.1);
+  border-bottom: 1px solid var(--border-light);
+  margin: 0 16px;
+  border-left: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-light);
+}
+
+.batch-info {
+  font-size: 12px;
+  color: var(--accent-red);
+  font-weight: 500;
+}
+
+.batch-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.batch-buttons button {
+  padding: 4px 12px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-radius: 12px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.batch-buttons button:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.batch-buttons button.danger {
+  background: rgba(255, 107, 107, 0.2);
+  color: var(--accent-red);
+}
+
+.batch-buttons button.danger:hover {
+  background: rgba(255, 107, 107, 0.3);
+}
+
+.sort-options {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid var(--border-lighter);
+  margin: 0 16px;
+  border-left: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-light);
+}
+
+.sort-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.sort-select {
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  outline: none;
+}
+
+.sort-order-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.sort-order-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.favorites-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.loading-container,
+.empty-container {
+  padding: 40px 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.batch-select-all {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+  margin: 0 16px;
+  border-left: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-light);
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.checkbox-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.song-item-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.item-checkbox {
+  padding: 0 16px;
+  cursor: pointer;
+}
+
+.load-more {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.load-more-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+  border-radius: 20px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.load-more-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.load-more-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .list-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px 12px;
+    margin: 0 12px;
+  }
+  
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  
+  .search-bar {
+    padding: 12px;
+    margin: 0 12px;
+  }
+  
+  .batch-actions {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    margin: 0 12px;
+  }
+  
+  .batch-buttons {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  
+  .sort-options {
+    margin: 0 12px;
+  }
+  
+  .batch-select-all {
+    margin: 0 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b055253af30fb797037e2fe260505f0cf711..0000000000000000000000000000000000000000
--- a/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed..0000000000000000000000000000000000000000
--- a/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f078c0bd340a33c61ea9ecd8a755d03571ed..0000000000000000000000000000000000000000
--- a/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834d3ef961ce24c3a072ddba2620b6158bae..0000000000000000000000000000000000000000
--- a/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d7c76644ffe126a1a1feb1606650bfb937..0000000000000000000000000000000000000000
--- a/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/src/components/layout/AppTabBar.vue b/src/components/layout/AppTabBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b237c59b99f89b899fbaad52ab442481a5f1fcf5
--- /dev/null
+++ b/src/components/layout/AppTabBar.vue
@@ -0,0 +1,152 @@
+<template>
+  <div 
+    class="app-tabbar" 
+    v-show="!shouldHideTabbar"
+  >
+    <div class="tabbar-content">
+      <router-link 
+        v-for="tab in tabs" 
+        :key="tab.name"
+        :to="tab.path"
+        class="tab-item"
+        :class="{ active: currentRoute === tab.name }"
+        @click="handleTabClick(tab)"
+      >
+        <i :class="tab.icon" class="tab-icon"></i>
+        <span class="tab-label">{{ tab.label }}</span>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const tabs = [
+  {
+    name: 'Home',
+    path: '/home',
+    label: '首页',
+    icon: 'fas fa-home'
+  },
+  {
+    name: 'MyMusic',
+    path: '/my-music',
+    label: '我的音乐',
+    icon: 'fas fa-heart'
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    label: '设置',
+    icon: 'fas fa-cog'
+  }
+]
+
+const currentRoute = computed(() => route.name)
+
+// 判断是否应该隐藏tabbar
+const shouldHideTabbar = computed(() => {
+  return route.meta?.fullScreen || false
+})
+
+const handleTabClick = (tab) => {
+  // 触觉反馈（如果支持）
+  if (navigator.vibrate) {
+    navigator.vibrate(10)
+  }
+}
+</script>
+
+<style scoped>
+.app-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid var(--border-strong);
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+/* iOS PWA 模式底部间距 */
+@supports (-webkit-touch-callout: none) {
+  @media all and (display-mode: standalone) {
+    .app-tabbar {
+      padding-bottom: 20px;
+    }
+  }
+}
+
+.tabbar-content {
+  display: flex;
+  height: var(--tabbar-height);
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--text-disabled);
+  transition: var(--transition-fast);
+  min-height: var(--touch-target);
+  position: relative;
+  padding: 4px;
+}
+
+.tab-item:hover,
+.tab-item.active {
+  color: var(--primary-color);
+}
+
+.tab-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 2px;
+  background: var(--primary-color);
+  border-radius: 1px;
+  /* 使用与进度条不同的视觉效果 */
+  box-shadow: 0 -1px 4px var(--glow-color);
+  opacity: 0.9;
+}
+
+.tab-icon {
+  font-size: 20px;
+  margin-bottom: 2px;
+}
+
+.tab-label {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+/* 响应式适配 */
+@media (max-width: 320px) {
+  .tab-label {
+    font-size: 9px;
+  }
+  
+  .tab-icon {
+    font-size: 18px;
+  }
+  
+  .app-tabbar {
+    border-top: 1px solid var(--border-strong);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/layout/MiniPlayer.vue b/src/components/layout/MiniPlayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46d3f05e9827673ff22ad49082cdc74aba291d6f
--- /dev/null
+++ b/src/components/layout/MiniPlayer.vue
@@ -0,0 +1,377 @@
+<template>
+  <Transition name="slide-up">
+    <div 
+      v-if="currentSong" 
+      class="mini-player"
+      :data-playing="isPlaying"
+      @click="openFullPlayer"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+    >
+      <div class="mini-player-content">
+        <!-- 专辑封面 -->
+        <div class="cover-container">
+          <img 
+            :src="coverUrl" 
+            :alt="currentSong.name"
+            class="cover-image"
+            @error="handleImageError"
+          />
+        </div>
+        
+        <!-- 歌曲信息 -->
+        <div class="song-info">
+          <div class="song-name">{{ currentSong.name }}</div>
+          <div class="song-artist">{{ formatArtist(currentSong.artist) }}</div>
+        </div>
+        
+        <!-- 播放控制 -->
+        <div class="play-controls">
+          <button 
+            class="control-btn"
+            @click.stop="togglePlay"
+            :disabled="!audioSrc"
+          >
+            <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
+          </button>
+        </div>
+        
+        <!-- 进度条 -->
+        <div class="progress-background">
+          <div 
+            class="progress-fill"
+            :style="{ width: `${progress}%` }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePlayerStore } from '@/stores/player'
+import { musicApi, utils } from '@/services/musicApi'
+
+const emit = defineEmits(['openFullPlayer', 'togglePlay', 'playNext', 'playPrevious'])
+
+const router = useRouter()
+
+const playerStore = usePlayerStore()
+const coverUrl = ref('')
+
+// 触摸处理
+const touchStartY = ref(0)
+const touchStartX = ref(0)
+const isSwiping = ref(false)
+
+// 计算属性
+const currentSong = computed(() => playerStore.currentSong)
+const isPlaying = computed(() => playerStore.isPlaying)
+const progress = computed(() => playerStore.progress)
+const audioSrc = computed(() => playerStore.audioSrc)
+
+// 格式化歌手名
+const formatArtist = (artist) => {
+  return utils.formatArtist(artist)
+}
+
+// 播放控制
+const togglePlay = () => {
+  // 通过事件通知父组件执行实际的播放控制逻辑
+  // 这样确保mini播放器和大播放器使用相同的播放控制逻辑
+  emit('togglePlay')
+}
+
+// 打开全屏播放器
+const openFullPlayer = () => {
+  // 直接使用路由跳转，不再依赖emit
+  if (currentSong.value) {
+    router.push('/player')
+  }
+}
+
+// 加载专辑封面
+const loadCover = async () => {
+  if (!currentSong.value) {
+    coverUrl.value = getDefaultCover()
+    return
+  }
+  
+  try {
+    const coverUrlResult = await playerStore.getAlbumCover(currentSong.value, 300)
+    if (coverUrlResult) {
+      coverUrl.value = coverUrlResult
+    } else {
+      coverUrl.value = getDefaultCover()
+    }
+  } catch (error) {
+    console.error('加载封面失败:', error)
+    coverUrl.value = getDefaultCover()
+  }
+}
+
+// 默认封面
+const getDefaultCover = () => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0zMiAyMEw0MCAzMkgzNlY0NEgyOFYzMkgyNEwzMiAyMFoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIvPgo8L3N2Zz4K'
+}
+
+// 图片加载错误处理
+const handleImageError = () => {
+  coverUrl.value = getDefaultCover()
+}
+
+// 触摸事件处理
+const handleTouchStart = (e) => {
+  touchStartY.value = e.touches[0].clientY
+  touchStartX.value = e.touches[0].clientX
+  isSwiping.value = false
+}
+
+const handleTouchMove = (e) => {
+  const deltaY = e.touches[0].clientY - touchStartY.value
+  const deltaX = e.touches[0].clientX - touchStartX.value
+  
+  // 判断是否为上滑手势
+  if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < -30) {
+    isSwiping.value = true
+    e.preventDefault()
+  }
+  
+  // 判断是否为左右滑动切歌
+  if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+    isSwiping.value = true
+    if (deltaX > 0) {
+      // 右滑：上一首
+      emit('playPrevious')
+    } else {
+      // 左滑：下一首
+      emit('playNext')
+    }
+  }
+}
+
+const handleTouchEnd = (e) => {
+  const deltaY = touchStartY.value - e.changedTouches[0].clientY
+  
+  if (deltaY > 50 && !isSwiping.value) {
+    // 上滑打开全屏播放器
+    openFullPlayer()
+  }
+  
+  touchStartY.value = 0
+  touchStartX.value = 0
+  isSwiping.value = false
+}
+
+// 监听当前歌曲变化
+watch(() => currentSong.value, (newSong) => {
+  if (newSong) {
+    loadCover()
+  } else {
+    coverUrl.value = getDefaultCover()
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  if (currentSong.value) {
+    loadCover()
+  }
+})
+</script>
+
+<style scoped>
+.mini-player {
+  position: fixed;
+  bottom: var(--tabbar-height);
+  left: 0;
+  right: 0;
+  height: var(--mini-player-height);
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid var(--border-strong);
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+  z-index: 999;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+/* iOS PWA 模式适配 */
+@supports (-webkit-touch-callout: none) {
+  @media all and (display-mode: standalone) {
+    .mini-player {
+      bottom: calc(var(--tabbar-height) + 20px);
+    }
+  }
+}
+
+.mini-player:hover {
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
+}
+
+.mini-player-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 16px;
+  position: relative;
+}
+
+.cover-container {
+  width: 48px;
+  height: 48px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  object-fit: cover;
+  transition: var(--transition-fast);
+}
+
+.song-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+}
+
+.song-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-artist {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.play-controls {
+  flex-shrink: 0;
+}
+
+.control-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-light);
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: var(--transition-fast);
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+
+/* 播放状态时的视觉反馈 - 立即显示 */
+.mini-player .control-btn {
+  transition: all var(--transition-fast);
+}
+
+.mini-player[data-playing="true"] .control-btn {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 20px var(--glow-color);
+  animation: playing-pulse 2s ease-in-out infinite;
+}
+
+/* 非播放状态也给予适当的视觉提示 */
+.mini-player[data-playing="false"] .control-btn {
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-light);
+  color: var(--primary-color);
+  box-shadow: 0 2px 8px var(--shadow-color);
+}
+
+.mini-player[data-playing="false"] .control-btn:hover {
+  background: var(--primary-color);
+  color: white;
+  transform: scale(1.05);
+  box-shadow: 0 0 15px var(--glow-color);
+}
+
+@keyframes playing-pulse {
+  0%, 100% {
+    box-shadow: 0 0 20px var(--glow-color);
+  }
+  50% {
+    box-shadow: 0 0 30px var(--glow-color), 0 0 40px var(--glow-color);
+  }
+}
+
+.mini-player[data-playing="true"] .control-btn:hover:not(:disabled) {
+  background: var(--primary-color-hover);
+  transform: scale(1.1);
+  box-shadow: 0 0 25px var(--glow-color), 0 0 35px var(--glow-color);
+}
+
+.control-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.progress-background {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 0 0 0 0;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary-color);
+  transition: width 0.1s ease;
+  border-radius: 0 0 0 0;
+}
+
+/* 动画 */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .mini-player-content {
+    padding: 0 12px;
+  }
+  
+  .cover-container {
+    width: 44px;
+    height: 44px;
+    margin-right: 10px;
+  }
+  
+  .control-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/layout/SearchHeader.vue b/src/components/layout/SearchHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7056ef205795e693ef0685ff14a9e9acfe6a0bb4
--- /dev/null
+++ b/src/components/layout/SearchHeader.vue
@@ -0,0 +1,624 @@
+<template>
+  <div class="search-header" :class="{ 'transparent': isTransparent, 'searching': isSearching }">
+    <div class="header-content">
+      <!-- 左侧返回按钮 -->
+      <button 
+        v-if="showBackButton" 
+        class="back-btn"
+        @click="handleBack"
+        :title="backButtonTitle"
+      >
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      
+      <!-- 搜索框 -->
+      <div class="search-container">
+        <div class="search-input-wrapper">
+          <i class="fas fa-search search-icon"></i>
+          <input 
+            ref="searchInput"
+            type="text" 
+            v-model="searchValue"
+            :placeholder="placeholder"
+            class="search-input"
+            @input="handleInput"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @keyup.enter="handleSearch"
+            @keyup.esc="handleEscape"
+          >
+          <button 
+            v-if="searchValue && clearable" 
+            class="clear-btn"
+            @click="handleClear"
+            title="清空"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        
+        <!-- 音乐源选择按钮 -->
+        <button 
+          v-if="showSourceSelector"
+          class="source-btn"
+          @click="handleSourceSelect"
+          :title="`当前音乐源: ${currentSourceName}`"
+        >
+          <i class="fas fa-music"></i>
+          <span class="source-text">{{ currentSourceName }}</span>
+          <i class="fas fa-chevron-down"></i>
+        </button>
+      </div>
+      
+      <!-- 右侧操作按钮 -->
+      <div class="header-actions" v-if="$slots.actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+    
+    <!-- 搜索建议下拉框 -->
+    <div 
+      v-if="showSuggestions && suggestions.length > 0"
+      class="search-suggestions"
+      @click.stop
+    >
+      <div 
+        v-for="(suggestion, index) in suggestions"
+        :key="index"
+        class="suggestion-item"
+        :class="{ 'active': selectedSuggestionIndex === index }"
+        @click="selectSuggestion(suggestion)"
+        @mouseover="selectedSuggestionIndex = index"
+      >
+        <i class="fas fa-search"></i>
+        <span class="suggestion-text">{{ suggestion }}</span>
+        <i class="fas fa-arrow-up-right suggestion-action"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { useSearchStore } from '@/stores/search'
+
+const props = defineProps({
+  // 搜索值
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  
+  // 占位符文本
+  placeholder: {
+    type: String,
+    default: '搜索歌曲、歌手或专辑'
+  },
+  
+  // 是否显示返回按钮
+  showBackButton: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 返回按钮标题
+  backButtonTitle: {
+    type: String,
+    default: '返回'
+  },
+  
+  // 是否显示音乐源选择器
+  showSourceSelector: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 是否可清空
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 是否透明背景
+  isTransparent: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 是否自动对焦
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 是否显示搜索建议
+  enableSuggestions: {
+    type: Boolean,
+    default: true
+  },
+  
+  // 搜索建议列表
+  suggestionsList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits([
+  'update:modelValue', 
+  'search', 
+  'focus', 
+  'blur', 
+  'back', 
+  'source-select',
+  'clear',
+  'suggestion-select'
+])
+
+const searchStore = useSearchStore()
+const searchInput = ref(null)
+const searchValue = ref(props.modelValue)
+const isSearching = ref(false)
+const isFocused = ref(false)
+const showSuggestions = ref(false)
+const selectedSuggestionIndex = ref(-1)
+
+// 计算属性
+const currentSourceName = computed(() => {
+  return searchStore.getSourceName(searchStore.currentSource)
+})
+
+const suggestions = computed(() => {
+  if (!props.enableSuggestions || !searchValue.value || searchValue.value.length < 2) {
+    return []
+  }
+  
+  // 结合传入的建议和历史搜索
+  const allSuggestions = [
+    ...props.suggestionsList,
+    ...searchStore.getSearchSuggestions(searchValue.value)
+  ]
+  
+  // 去重并限制数量
+  const uniqueSuggestions = [...new Set(allSuggestions)]
+  return uniqueSuggestions.slice(0, 5)
+})
+
+// 监听props变化
+watch(() => props.modelValue, (newValue) => {
+  searchValue.value = newValue
+})
+
+watch(searchValue, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+// 方法
+const handleInput = () => {
+  if (props.enableSuggestions && searchValue.value.length >= 2) {
+    showSuggestions.value = true
+    selectedSuggestionIndex.value = -1
+  } else {
+    showSuggestions.value = false
+  }
+}
+
+const handleFocus = () => {
+  isFocused.value = true
+  emit('focus')
+  
+  if (props.enableSuggestions && searchValue.value.length >= 2) {
+    showSuggestions.value = true
+  }
+}
+
+const handleBlur = () => {
+  isFocused.value = false
+  emit('blur')
+  
+  // 延迟隐藏建议，允许点击建议项
+  setTimeout(() => {
+    showSuggestions.value = false
+  }, 200)
+}
+
+const handleSearch = () => {
+  if (selectedSuggestionIndex.value >= 0 && suggestions.value[selectedSuggestionIndex.value]) {
+    selectSuggestion(suggestions.value[selectedSuggestionIndex.value])
+  } else if (searchValue.value.trim()) {
+    performSearch(searchValue.value.trim())
+  }
+}
+
+const handleEscape = () => {
+  if (showSuggestions.value) {
+    showSuggestions.value = false
+    selectedSuggestionIndex.value = -1
+  } else {
+    handleClear()
+  }
+}
+
+const handleClear = () => {
+  searchValue.value = ''
+  showSuggestions.value = false
+  selectedSuggestionIndex.value = -1
+  emit('clear')
+  
+  if (searchInput.value) {
+    searchInput.value.focus()
+  }
+}
+
+const handleBack = () => {
+  emit('back')
+}
+
+const handleSourceSelect = () => {
+  emit('source-select')
+}
+
+const selectSuggestion = (suggestion) => {
+  searchValue.value = suggestion
+  showSuggestions.value = false
+  selectedSuggestionIndex.value = -1
+  performSearch(suggestion)
+  emit('suggestion-select', suggestion)
+}
+
+const performSearch = (query) => {
+  isSearching.value = true
+  emit('search', query)
+  
+  // 添加到搜索历史
+  searchStore.addToHistory({
+    keyword: query,
+    source: searchStore.currentSource,
+    timestamp: Date.now()
+  })
+  
+  setTimeout(() => {
+    isSearching.value = false
+  }, 1000)
+}
+
+const focus = () => {
+  if (searchInput.value) {
+    searchInput.value.focus()
+  }
+}
+
+const blur = () => {
+  if (searchInput.value) {
+    searchInput.value.blur()
+  }
+}
+
+// 键盘导航
+const handleKeyNavigation = (event) => {
+  if (!showSuggestions.value || suggestions.value.length === 0) return
+  
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      selectedSuggestionIndex.value = Math.min(
+        selectedSuggestionIndex.value + 1,
+        suggestions.value.length - 1
+      )
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      selectedSuggestionIndex.value = Math.max(
+        selectedSuggestionIndex.value - 1,
+        -1
+      )
+      break
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  if (props.autofocus) {
+    nextTick(() => {
+      focus()
+    })
+  }
+  
+  document.addEventListener('keydown', handleKeyNavigation)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyNavigation)
+})
+
+// 暴露方法
+defineExpose({
+  focus,
+  blur
+})
+</script>
+
+<style scoped>
+.search-header {
+  background: var(--bg-card);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  transition: var(--transition-fast);
+  position: relative;
+  z-index: 10;
+}
+
+.search-header.transparent {
+  background: transparent;
+  border-bottom: none;
+}
+
+.search-header.searching {
+  opacity: 0.9;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 12px;
+}
+
+.back-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.search-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-input-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-tertiary);
+  font-size: 14px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.search-input {
+  width: 100%;
+  height: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  padding: 0 40px 0 40px;
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+  transition: var(--transition-fast);
+}
+
+.search-input:focus {
+  background: rgba(255, 255, 255, 0.12);
+  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3);
+}
+
+.search-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  z-index: 1;
+}
+
+.clear-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.source-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.source-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.source-text {
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.search-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 16px;
+  right: 16px;
+  background: var(--bg-card);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(20px);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.suggestion-item:hover,
+.suggestion-item.active {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.suggestion-item i:first-child {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  width: 12px;
+}
+
+.suggestion-text {
+  flex: 1;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.suggestion-action {
+  color: var(--text-tertiary);
+  font-size: 10px;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+
+.suggestion-item:hover .suggestion-action {
+  opacity: 1;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .header-content {
+    padding: 10px 12px;
+    gap: 8px;
+  }
+  
+  .back-btn {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .search-input {
+    height: 36px;
+    font-size: 13px;
+  }
+  
+  .source-btn {
+    padding: 6px 10px;
+    font-size: 11px;
+  }
+  
+  .source-text {
+    max-width: 50px;
+  }
+  
+  .search-suggestions {
+    left: 12px;
+    right: 12px;
+  }
+}
+
+/* 平板和桌面优化 */
+@media (min-width: 768px) {
+  .header-content {
+    padding: 16px 24px;
+  }
+  
+  .search-input {
+    height: 44px;
+    font-size: 15px;
+  }
+  
+  .source-text {
+    max-width: 80px;
+  }
+}
+
+/* 动画效果 */
+.search-suggestions {
+  animation: slide-down 0.2s ease-out;
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.search-icon {
+  animation: search-pulse 2s ease-in-out infinite;
+}
+
+@keyframes search-pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.search-header.searching .search-icon {
+  animation: search-spin 1s linear infinite;
+}
+
+@keyframes search-spin {
+  from {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/AlbumCover.vue b/src/components/player/AlbumCover.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4b88ab3529d6fa23cd4814b61dc71d69e585fab
--- /dev/null
+++ b/src/components/player/AlbumCover.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="album-cover-container" :style="coverStyle">
+    <div 
+      class="album-cover" 
+      :class="{ playing: isPlaying }"
+      @click="$emit('click')"
+    >
+      <img 
+        :src="displayUrl" 
+        :alt="alt"
+        class="cover-image"
+        @error="handleImageError"
+        @load="handleImageLoad"
+      />
+      
+      <!-- 唱片中心圆点 -->
+      <div class="center-dot">
+        <div class="inner-dot"></div>
+      </div>
+      
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-overlay">
+        <i class="fas fa-spinner fa-spin"></i>
+      </div>
+    </div>
+    
+    <!-- 装饰性光晕效果 -->
+    <div class="cover-glow" :class="{ active: isPlaying }"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  alt: {
+    type: String,
+    default: '专辑封面'
+  },
+  size: {
+    type: Number,
+    default: 300
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click', 'load', 'error'])
+
+// 默认封面函数
+const getDefaultCover = () => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiBmaWxsPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMykiIHJ4PSI0MCIvPgo8Y2lyY2xlIGN4PSIxNDAiIGN5PSIxNDAiIHI9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz4KPHN2ZyB4PSIxMTAiIHk9IjExMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9InJnYmEoMTYwLDE2MCwxNjAsMC42KSI+CjxwYXRoIGQ9Ik0xMiAzdjEwLjU1Yy0uNTktLjM0LTEuMjctLjU1LTItLjU1QzcuNzkgMTMgNiAxNC43OSA2IDE3czEuNzkgNCA0IDRjMS45NCAwIDMuNS0xLjI5IDMuOTEtM0gxNFYzeiIvPgo8L3N2Zz4KPC9zdmc+'
+}
+
+// 响应式数据
+const loading = ref(false)
+const error = ref(false)
+
+// 计算属性
+const coverStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  '--size': `${props.size}px`
+}))
+
+const displayUrl = computed(() => {
+  return props.src || getDefaultCover()
+})
+
+// 方法
+const handleImageLoad = () => {
+  loading.value = false
+  error.value = false
+  emit('load')
+}
+
+const handleImageError = () => {
+  loading.value = false
+  error.value = true
+  emit('error')
+}
+
+// 监听src变化
+watch(() => props.src, (newSrc) => {
+  if (newSrc) {
+    loading.value = true
+    error.value = false
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.album-cover-container {
+  position: relative;
+  display: inline-block;
+  border-radius: 50%;
+  --cover-size: var(--size, 300px);
+}
+
+.album-cover {
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  cursor: pointer;
+  transition: var(--transition-slow);
+  box-shadow: 
+    0 8px 25px rgba(0, 0, 0, 0.3);
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+.album-cover:hover {
+  transform: scale(1.02);
+  box-shadow: 
+    0 12px 35px rgba(0, 0, 0, 0.4);
+  border: none;
+}
+
+.album-cover.playing {
+  animation: rotate 20s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: var(--transition-fast);
+}
+
+.center-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(var(--cover-size) * 0.14);
+  height: calc(var(--cover-size) * 0.14);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border: 1px solid var(--border-light);
+}
+
+.inner-dot {
+  width: calc(var(--cover-size) * 0.04);
+  height: calc(var(--cover-size) * 0.04);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-red);
+  font-size: 24px;
+  z-index: 3;
+}
+
+.cover-glow {
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  right: -20px;
+  bottom: -20px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--accent-red) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity var(--transition-slow);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.cover-glow.active {
+  opacity: 0.2;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.2; transform: scale(1); }
+  50% { opacity: 0.3; transform: scale(1.05); }
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .center-dot {
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--border-light);
+  }
+  
+  .inner-dot {
+    width: 10px;
+    height: 10px;
+  }
+  
+  .loading-overlay {
+    font-size: 20px;
+  }
+  
+  .album-cover {
+    border: 1px solid var(--border-light);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/LyricsView.vue b/src/components/player/LyricsView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..728b4f2261fa49a11fc8a1872b20110bf6c9d941
--- /dev/null
+++ b/src/components/player/LyricsView.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="lyrics-view" ref="lyricsContainer">
+    <div class="lyrics-content" :style="{ transform: `translateY(${translateY}px)` }">
+      <!-- 无歌词状态 -->
+      <div v-if="!lyrics.length" class="no-lyrics">
+        <i class="fas fa-music"></i>
+        <p>暂无歌词</p>
+      </div>
+      
+      <!-- 歌词列表 -->
+      <div
+        v-for="(line, index) in lyrics"
+        :key="index"
+        :ref="el => setLineRef(el, index)"
+        class="lyric-line"
+        :class="{
+          active: index === currentLineIndex,
+          passed: index < currentLineIndex,
+          future: index > currentLineIndex
+        }"
+        @click="handleLineClick(line, index)"
+      >
+        {{ line.text }}
+      </div>
+      
+      <!-- 底部占位 -->
+      <div class="lyrics-spacer"></div>
+    </div>
+    
+    <!-- PC端歌词提示 -->
+    <div class="desktop-lyrics-hint" v-if="isDesktop">
+      <p>歌词已完整显示</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+
+
+const props = defineProps({
+  lyrics: {
+    type: Array,
+    default: () => []
+  },
+  currentTime: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['seekTo'])
+
+// 响应式数据
+const lyricsContainer = ref(null)
+const lineRefs = ref({})
+const translateY = ref(0)
+const autoScroll = ref(true)
+const fontSize = ref(18)
+const currentLineIndex = ref(-1)
+const lastScrollTime = ref(0)
+const isDesktop = ref(window.innerWidth >= 768)
+const startX = ref(0)
+const startY = ref(0)
+const isSwiping = ref(false)
+const swipeDirection = ref('') // 'left' or 'right'
+
+// 监听窗口大小变化
+onMounted(() => {
+  const handleResize = () => {
+    isDesktop.value = window.innerWidth >= 768
+  }
+  
+  window.addEventListener('resize', handleResize)
+  
+  // 清理事件监听器
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+})
+
+// 计算属性
+const parsedLyrics = computed(() => {
+  // 歌词已经从musicApi中解析过了，直接返回
+  return Array.isArray(props.lyrics) ? props.lyrics : []
+})
+
+// 方法
+const setLineRef = (el, index) => {
+  if (el) {
+    lineRefs.value[index] = el
+  }
+}
+
+const findCurrentLine = (time) => {
+  if (!parsedLyrics.value.length || time < 0) return -1
+  
+  let currentIndex = -1
+  
+  // 查找最后一行时间小于等于当前时间的歌词
+  for (let i = 0; i < parsedLyrics.value.length; i++) {
+    const lyricTime = parsedLyrics.value[i].time
+    if (lyricTime <= time) {
+      currentIndex = i
+    } else {
+      break
+    }
+  }
+  
+  return currentIndex
+}
+
+const scrollToLine = (index, smooth = true) => {
+  if (!lyricsContainer.value || index < 0 || !lineRefs.value[index]) return
+  
+  // 桌面端不滚动，显示完整歌词
+  if (isDesktop.value) return
+  
+  const container = lyricsContainer.value
+  const lineElement = lineRefs.value[index]
+  
+  if (!lineElement) return
+  
+  const containerHeight = container.clientHeight
+  const lineOffsetTop = lineElement.offsetTop
+  const lineHeight = lineElement.clientHeight
+  
+  // 计算目标位置（将当前行显示在容器中部稍上方的位置）
+  const targetOffset = containerHeight * 0.4 // 40% 的位置，而不是正中央
+  const targetY = targetOffset - lineOffsetTop - lineHeight / 2
+  
+  if (smooth) {
+    // 使用更快的滚动动画
+    animateScroll(translateY.value, targetY, 300)
+  } else {
+    translateY.value = targetY
+  }
+}
+
+const animateScroll = (from, to, duration) => {
+  const startTime = performance.now()
+  
+  const animate = (currentTime) => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / duration, 1)
+    
+    // 使用 easeOutCubic 缓动函数
+    const easeProgress = 1 - Math.pow(1 - progress, 3)
+    
+    translateY.value = from + (to - from) * easeProgress
+    
+    if (progress < 1) {
+      requestAnimationFrame(animate)
+    }
+  }
+  
+  requestAnimationFrame(animate)
+}
+
+const handleLineClick = (line, index) => {
+  if (line.time > 0) {
+    emit('seekTo', line.time)
+    currentLineIndex.value = index
+    scrollToLine(index)
+  }
+}
+
+const toggleAutoScroll = () => {
+  autoScroll.value = !autoScroll.value
+  if (autoScroll.value && currentLineIndex.value >= 0) {
+    scrollToLine(currentLineIndex.value)
+  }
+}
+
+const handleScroll = (event) => {
+  // 用户手动滚动时暂时禁用自动滚动
+  if (autoScroll.value) {
+    autoScroll.value = false
+    lastScrollTime.value = Date.now()
+    
+    // 3秒后重新启用自动滚动
+    setTimeout(() => {
+      if (Date.now() - lastScrollTime.value >= 3000) {
+        autoScroll.value = true
+      }
+    }, 3000)
+  }
+}
+
+// 手机端滑动切换处理
+const handleTouchStart = (event) => {
+  if (!isDesktop.value) {
+    startX.value = event.touches[0].clientX
+    startY.value = event.touches[0].clientY
+    isSwiping.value = true
+    swipeDirection.value = ''
+  }
+}
+
+const handleTouchMove = (event) => {
+  if (!isDesktop.value && isSwiping.value) {
+    const currentX = event.touches[0].clientX
+    const currentY = event.touches[0].clientY
+    const diffX = startX.value - currentX
+    const diffY = startY.value - currentY
+    
+    // 判断是否为水平滑动
+    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 30) {
+      swipeDirection.value = diffX > 0 ? 'left' : 'right'
+      event.preventDefault()
+    }
+  }
+}
+
+const handleTouchEnd = (event) => {
+  if (!isDesktop.value && isSwiping.value) {
+    // 触发左右滑动事件
+    if (swipeDirection.value === 'left') {
+      emit('swipeLeft')
+    } else if (swipeDirection.value === 'right') {
+      emit('swipeRight')
+    }
+    
+    isSwiping.value = false
+    swipeDirection.value = ''
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  // 恢复字体大小设置
+  const savedFontSize = localStorage.getItem('lyrics-font-size')
+  if (savedFontSize) {
+    fontSize.value = parseInt(savedFontSize)
+  }
+  
+  // 添加触摸事件监听
+  if (lyricsContainer.value) {
+    lyricsContainer.value.addEventListener('touchstart', handleTouchStart, { passive: false })
+    lyricsContainer.value.addEventListener('touchmove', handleTouchMove, { passive: false })
+    lyricsContainer.value.addEventListener('touchend', handleTouchEnd, { passive: false })
+  }
+})
+
+onUnmounted(() => {
+  if (lyricsContainer.value) {
+    lyricsContainer.value.removeEventListener('touchstart', handleTouchStart)
+    lyricsContainer.value.removeEventListener('touchmove', handleTouchMove)
+    lyricsContainer.value.removeEventListener('touchend', handleTouchEnd)
+  }
+})
+
+// 监听当前时间变化
+watch(() => props.currentTime, (newTime) => {
+  if (!parsedLyrics.value.length) return
+  
+  const newIndex = findCurrentLine(newTime)
+  if (newIndex !== currentLineIndex.value) {
+    currentLineIndex.value = newIndex
+    
+    // 只有在自动滚动开启且歌词行有效时才滚动
+    if (autoScroll.value && newIndex >= 0) {
+      nextTick(() => {
+        scrollToLine(newIndex)
+      })
+    }
+  }
+}, { immediate: false })
+
+// 监听歌词变化
+watch(() => props.lyrics, (newLyrics) => {
+  // 重置滚动状态
+  currentLineIndex.value = -1
+  translateY.value = 0
+  autoScroll.value = true
+  
+  nextTick(() => {
+    // 如果有播放时间，找到对应的歌词行
+    if (props.currentTime > 0 && newLyrics && newLyrics.length > 0) {
+      const index = findCurrentLine(props.currentTime)
+      currentLineIndex.value = index
+      if (index >= 0 && autoScroll.value) {
+        scrollToLine(index, false)
+      }
+    }
+  })
+}, { immediate: true })
+</script>
+
+<style scoped>
+.lyrics-view {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.lyrics-content {
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  padding: 60px 0;
+  font-size: v-bind(fontSize + 'px');
+  line-height: 1.8;
+}
+
+.no-lyrics {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.no-lyrics i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.no-lyrics p {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.lyric-line {
+  padding: 12px 0;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--text-tertiary);
+  font-weight: 400;
+  user-select: none;
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+.lyric-line:hover {
+  color: var(--text-secondary);
+}
+
+.lyric-line.active {
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 1.1em;
+  text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
+  transform: scale(1.02);
+}
+
+.lyric-line.passed {
+  color: var(--text-secondary);
+  opacity: 0.6;
+}
+
+.lyric-line.future {
+  color: var(--text-tertiary);
+  opacity: 0.4;
+}
+
+.lyrics-spacer {
+  height: 200px;
+}
+
+.desktop-lyrics-hint {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.6);
+  color: rgba(255, 255, 255, 0.8);
+  padding: 6px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  backdrop-filter: blur(4px);
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .desktop-lyrics-hint {
+    display: block;
+  }
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .lyrics-view {
+    padding: 0 16px;
+  }
+  
+  .lyrics-content {
+    padding: 40px 0;
+    font-size: v-bind((fontSize - 2) + 'px');
+  }
+  
+  .lyric-line {
+    padding: 10px 0;
+  }
+  
+  .no-lyrics i {
+    font-size: 36px;
+    margin-bottom: 12px;
+  }
+  
+  .no-lyrics p {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 768px) {
+  .lyrics-view {
+    padding: 0 40px;
+  }
+  
+  .lyrics-content {
+    padding: 80px 0;
+  }
+  
+  .lyric-line {
+    padding: 16px 0;
+    font-size: 1.1em;
+  }
+  
+  /* PC端显示所有歌词 */
+  .lyrics-content {
+    transform: translateY(0) !important;
+  }
+}
+
+/* 平滑滚动动画 */
+@media (prefers-reduced-motion: no-preference) {
+  .lyrics-content {
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+  
+  .lyric-line {
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+}
+
+/* 高对比度支持 */
+@media (prefers-contrast: high) {
+  .lyric-line.active {
+    color: var(--accent-red);
+    text-shadow: none;
+    border-left: 3px solid var(--accent-red);
+    padding-left: 16px;
+  }
+}
+
+/* 暗色主题适配 */
+</style>
\ No newline at end of file
diff --git a/src/components/player/MoreActionsPanel.vue b/src/components/player/MoreActionsPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bb6b223c9f94b3742257cdc915da0180993822c
--- /dev/null
+++ b/src/components/player/MoreActionsPanel.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="more-actions-overlay" @click="$emit('close')">
+    <div class="more-actions-panel" @click.stop>
+      <!-- 歌曲信息 -->
+      <div v-if="song" class="song-info">
+        <img 
+          :src="song.cover || defaultCover" 
+          :alt="song.name"
+          class="song-cover"
+        />
+        
+        <div class="song-details">
+          <div class="song-name">{{ song.name }}</div>
+          <div class="song-artist">{{ song.artist }}</div>
+          <div class="song-album" v-if="song.album">{{ song.album }}</div>
+        </div>
+      </div>
+      
+      <!-- 操作按钮列表 -->
+      <div class="actions-list">
+        <button 
+          class="action-item" 
+          @click="handleAction('favorite')"
+          :class="{ active: isFavorite }"
+        >
+          <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
+          <span>{{ isFavorite ? '取消收藏' : '添加到我的收藏' }}</span>
+        </button>
+        
+        <button class="action-item" @click="handleAction('addToPlaylist')">
+          <i class="fas fa-plus"></i>
+          <span>添加到播放列表</span>
+        </button>
+        
+        <button class="action-item" @click="handleAction('download')">
+          <i class="fas fa-download"></i>
+          <span>下载到本地</span>
+        </button>
+      </div>
+      
+      <!-- 取消按钮 -->
+      <button class="cancel-btn" @click="$emit('close')">
+        取消
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useFavoritesStore } from '@/stores/favorites'
+
+const props = defineProps({
+  song: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'action'])
+
+const favoritesStore = useFavoritesStore()
+
+// 计算属性
+const isFavorite = computed(() => {
+  return props.song ? favoritesStore.isFavorite(props.song) : false
+})
+
+const defaultCover = computed(() => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSIxMiIvPgo8cGF0aCBkPSJNNDAgMjhMNDYgNDBINDJWNTBIMzhWNDBIMzRMNDAgMjhaIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMykiLz4KPC9zdmc+Cg=='
+})
+
+// 方法
+const handleAction = async (action) => {
+  if (!props.song && action !== 'close') return
+  
+  switch (action) {
+    case 'favorite':
+      try {
+        if (isFavorite.value) {
+          await favoritesStore.removeFromFavorites(props.song)
+        } else {
+          await favoritesStore.addToFavorites(props.song)
+        }
+      } catch (error) {
+        console.error('收藏操作失败:', error)
+      }
+      break
+      
+    case 'addToPlaylist':
+      // 实现添加到播放列表
+      break
+      
+    case 'download':
+      // 实现下载功能
+      try {
+        // 这里可以调用下载逻辑
+        const link = document.createElement('a')
+        if (props.song.url) {
+          link.href = props.song.url
+          link.download = `${props.song.artist} - ${props.song.name}.mp3`
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+        }
+      } catch (error) {
+        console.error('下载失败:', error)
+      }
+      break
+  }
+  
+  emit('action', action)
+}
+</script>
+
+<style scoped>
+.more-actions-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.more-actions-panel {
+  width: 100%;
+  background: var(--bg-secondary);
+  border-radius: 16px 16px 0 0;
+  padding: 0 0 20px;
+  animation: slideUp 0.3s ease-out;
+  overflow: hidden;
+}
+
+.song-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px 20px 20px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.song-cover {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.song-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.song-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-artist {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-album {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.actions-list {
+  padding: 8px 0;
+}
+
+.action-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 16px;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.action-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.action-item:active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.action-item i {
+  width: 20px;
+  text-align: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.action-item.active {
+  color: var(--accent-red);
+}
+
+.action-item.active i {
+  color: var(--accent-red);
+}
+
+.action-item.danger {
+  color: #ff4444;
+}
+
+.action-item.danger i {
+  color: #ff4444;
+}
+
+.cancel-btn {
+  width: calc(100% - 40px);
+  margin: 16px 20px 0;
+  padding: 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.cancel-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.cancel-btn:active {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(0.98);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .song-info {
+    padding: 20px 16px 16px;
+  }
+  
+  .song-cover {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+  }
+  
+  .song-name {
+    font-size: 16px;
+  }
+  
+  .song-artist {
+    font-size: 13px;
+  }
+  
+  .song-album {
+    font-size: 11px;
+  }
+  
+  .action-item {
+    padding: 14px 16px;
+    font-size: 15px;
+  }
+  
+  .action-item i {
+    width: 18px;
+    font-size: 15px;
+  }
+  
+  .cancel-btn {
+    width: calc(100% - 32px);
+    margin: 16px 16px 0;
+    padding: 14px;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .more-actions-panel {
+    max-width: 480px;
+    margin: 0 auto 0;
+    border-radius: 16px;
+  }
+  
+  .more-actions-overlay {
+    align-items: center;
+    padding: 20px;
+  }
+  
+  .song-info {
+    padding: 28px 24px 24px;
+  }
+  
+  .song-cover {
+    width: 72px;
+    height: 72px;
+    border-radius: 14px;
+  }
+  
+  .action-item {
+    padding: 18px 24px;
+  }
+  
+  .cancel-btn {
+    width: calc(100% - 48px);
+    margin: 20px 24px 0;
+  }
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+/* 无障碍支持 */
+.action-item:focus-visible {
+  outline: 2px solid var(--accent-red);
+  outline-offset: 2px;
+}
+
+.cancel-btn:focus-visible {
+  outline: 2px solid var(--accent-red);
+  outline-offset: 2px;
+}
+
+/* 触摸反馈 */
+@media (hover: none) {
+  .action-item:active {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(0.98);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/PlayControls.vue b/src/components/player/PlayControls.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fdf044d4a51874dbf95359539da8d70d64031a24
--- /dev/null
+++ b/src/components/player/PlayControls.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="play-controls">
+    <button 
+      class="control-btn mode-btn"
+      @click="togglePlayMode"
+      :title="playModeText"
+    >
+      <i :class="playModeIcon"></i>
+    </button>
+    
+    <button 
+      class="control-btn prev-btn"
+      @click="$emit('previous')"
+      :disabled="!hasPrevious"
+      title="上一首"
+    >
+      <i class="fas fa-step-backward"></i>
+    </button>
+    
+    <button 
+      class="control-btn play-btn"
+      @click="$emit('togglePlay')"
+      :disabled="!hasAudio"
+      :title="isPlaying ? '暂停' : '播放'"
+    >
+      <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
+      <div v-if="loading" class="loading-spinner">
+        <i class="fas fa-spinner fa-spin"></i>
+      </div>
+    </button>
+    
+    <button 
+      class="control-btn next-btn"
+      @click="$emit('next')"
+      :disabled="!hasNext"
+      title="下一首"
+    >
+      <i class="fas fa-step-forward"></i>
+    </button>
+    
+    <button 
+      class="control-btn playlist-btn"
+      @click="$emit('showPlaylist')"
+      title="播放队列"
+    >
+      <i class="fas fa-list"></i>
+      <span v-if="playlistCount > 0" class="playlist-count">{{ playlistCount }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits([
+  'togglePlay', 
+  'previous', 
+  'next', 
+  'togglePlayMode', 
+  'showPlaylist'
+])
+
+const playerStore = usePlayerStore()
+
+// 计算属性
+const isPlaying = computed(() => playerStore.isPlaying)
+const playMode = computed(() => playerStore.playMode)
+const hasPrevious = computed(() => playerStore.hasPrevious)
+const hasNext = computed(() => playerStore.hasNext)
+const playlistCount = computed(() => playerStore.playlist.length)
+const hasAudio = computed(() => !!playerStore.audioSrc)
+
+const playModeIcon = computed(() => {
+  switch (playMode.value) {
+    case 'single':
+      return 'fas fa-redo'
+    case 'random':
+      return 'fas fa-random'
+    case 'list':
+    default:
+      return 'fas fa-retweet'
+  }
+})
+
+const playModeText = computed(() => {
+  switch (playMode.value) {
+    case 'single':
+      return '单曲循环'
+    case 'random':
+      return '随机播放'
+    case 'list':
+    default:
+      return '列表循环'
+  }
+})
+
+// 方法
+const togglePlayMode = () => {
+  const modes = ['list', 'random', 'single']
+  const currentIndex = modes.indexOf(playMode.value)
+  const nextIndex = (currentIndex + 1) % modes.length
+  const nextMode = modes[nextIndex]
+  
+  playerStore.setPlayMode(nextMode)
+  emit('togglePlayMode', nextMode)
+}
+</script>
+
+<style scoped>
+.play-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 20px 0;
+}
+
+.control-btn {
+  border: none;
+  background: var(--bg-overlay);
+  color: var(--text-primary);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--border-light);
+}
+
+.control-btn:hover:not(:disabled) {
+  background: var(--bg-card);
+  transform: scale(1.05);
+  border-color: var(--border-card);
+}
+
+.control-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.control-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* 按钮尺寸 */
+.mode-btn,
+.prev-btn,
+.next-btn,
+.playlist-btn {
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+}
+
+.play-btn {
+  width: 72px;
+  height: 72px;
+  font-size: 28px;
+  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-hover));
+  color: white;
+  box-shadow: var(--shadow-button);
+  position: relative;
+}
+
+.play-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--accent-red-hover), #ff4444);
+  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
+  transform: scale(1.08);
+}
+
+.play-btn:disabled {
+  background: var(--bg-overlay);
+  box-shadow: none;
+  border-color: var(--border-light);
+}
+
+/* 加载动画 */
+.loading-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* 播放列表计数 */
+.playlist-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  min-width: 20px;
+}
+
+/* 播放模式按钮状态 */
+.mode-btn[title*="单曲"] {
+  color: var(--accent-red);
+}
+
+.mode-btn[title*="随机"] {
+  color: #4CAF50;
+}
+
+.mode-btn[title*="列表"] {
+  color: var(--text-primary);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .play-controls {
+    gap: 12px;
+    padding: 16px 0;
+  }
+  
+  .mode-btn,
+  .prev-btn,
+  .next-btn,
+  .playlist-btn {
+    width: 44px;
+    height: 44px;
+    font-size: 16px;
+  }
+  
+  .play-btn {
+    width: 64px;
+    height: 64px;
+    font-size: 24px;
+  }
+  
+  .loading-spinner {
+    font-size: 20px;
+  }
+  
+  .playlist-count {
+    width: 18px;
+    height: 18px;
+    font-size: 9px;
+    top: -3px;
+    right: -3px;
+  }
+}
+
+/* 按钮动画效果 */
+.control-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.3s ease;
+}
+
+.control-btn:active:not(:disabled)::before {
+  width: 100%;
+  height: 100%;
+}
+
+/* 播放按钮特殊效果 */
+.play-btn::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-hover));
+  z-index: -1;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.play-btn:hover:not(:disabled)::after {
+  opacity: 0.3;
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/PlayModeToggle.vue b/src/components/player/PlayModeToggle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7d3af84c5b85f6ace201bf2dd9d0ab3ac1b669e4
--- /dev/null
+++ b/src/components/player/PlayModeToggle.vue
@@ -0,0 +1,198 @@
+<template>
+  <button 
+    class="play-mode-toggle" 
+    :class="{ 'active': isActive }"
+    @click="toggleMode"
+    :title="modeText"
+  >
+    <i :class="modeIcon" class="mode-icon"></i>
+    <span class="mode-text" v-if="showText">{{ modeText }}</span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+
+const props = defineProps({
+  // 是否显示文字
+  showText: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 是否激活状态
+  isActive: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 按钮大小
+  size: {
+    type: String,
+    default: 'medium', // small, medium, large
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const playerStore = usePlayerStore()
+
+// 播放模式图标映射
+const modeIcon = computed(() => {
+  const iconMap = {
+    'list': 'fas fa-list-ul',
+    'loop': 'fas fa-redo-alt', 
+    'random': 'fas fa-random'
+  }
+  return iconMap[playerStore.playMode] || iconMap.list
+})
+
+// 播放模式文本映射
+const modeText = computed(() => {
+  const textMap = {
+    'list': '列表循环',
+    'loop': '单曲循环',
+    'random': '随机播放'
+  }
+  return textMap[playerStore.playMode] || textMap.list
+})
+
+// 切换播放模式
+const toggleMode = () => {
+  const modes = ['list', 'loop', 'random']
+  const currentIndex = modes.indexOf(playerStore.playMode)
+  const nextIndex = (currentIndex + 1) % modes.length
+  const nextMode = modes[nextIndex]
+  
+  playerStore.setPlayMode(nextMode)
+  emit('change', nextMode)
+}
+</script>
+
+<style scoped>
+.play-mode-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-radius: 50%;
+  padding: 8px;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.play-mode-toggle:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.play-mode-toggle.active {
+  color: var(--accent-red);
+}
+
+.play-mode-toggle.active:hover {
+  color: var(--accent-red-hover);
+}
+
+.mode-icon {
+  font-size: 16px;
+  transition: var(--transition-fast);
+}
+
+.mode-text {
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* 尺寸变化 */
+.play-mode-toggle[data-size="small"] {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 6px;
+}
+
+.play-mode-toggle[data-size="small"] .mode-icon {
+  font-size: 14px;
+}
+
+.play-mode-toggle[data-size="small"] .mode-text {
+  font-size: 11px;
+}
+
+.play-mode-toggle[data-size="large"] {
+  min-width: 52px;
+  min-height: 52px;
+  padding: 10px;
+}
+
+.play-mode-toggle[data-size="large"] .mode-icon {
+  font-size: 18px;
+}
+
+.play-mode-toggle[data-size="large"] .mode-text {
+  font-size: 13px;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .play-mode-toggle {
+    min-width: 40px;
+    min-height: 40px;
+    padding: 6px;
+  }
+  
+  .mode-icon {
+    font-size: 14px;
+  }
+  
+  .mode-text {
+    font-size: 11px;
+  }
+}
+
+/* 动画效果 */
+.play-mode-toggle:active {
+  transform: scale(0.95);
+}
+
+/* 特殊模式动画 */
+.play-mode-toggle .fa-random {
+  animation: random-pulse 2s ease-in-out infinite;
+}
+
+@keyframes random-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.play-mode-toggle .fa-redo-alt {
+  animation: loop-spin 3s linear infinite;
+}
+
+@keyframes loop-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 当播放模式激活时停止动画 */
+.play-mode-toggle.active .fa-random,
+.play-mode-toggle.active .fa-redo-alt {
+  animation-play-state: paused;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/PlaylistPanel.vue b/src/components/player/PlaylistPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..651d2e3b98d0d1e493da0a7550cce2570097d462
--- /dev/null
+++ b/src/components/player/PlaylistPanel.vue
@@ -0,0 +1,584 @@
+<template>
+  <div class="playlist-panel-overlay" @click="$emit('close')">
+    <div class="playlist-panel" @click.stop>
+      <!-- 头部 -->
+      <div class="panel-header">
+        <div class="panel-title">
+          <h3>播放队列</h3>
+          <span class="song-count">{{ playlist.length }}首歌曲</span>
+        </div>
+        
+        <div class="header-actions">
+          <button class="action-btn" @click="togglePlayMode" :title="playModeText">
+            <i :class="playModeIcon"></i>
+          </button>
+          
+          <button class="action-btn" @click="clearPlaylist" :disabled="!playlist.length">
+            <i class="fas fa-trash"></i>
+          </button>
+          
+          <button class="close-btn" @click="$emit('close')">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+      
+      <!-- 当前播放 -->
+      <div v-if="currentSong" class="current-playing">
+        <div class="section-title">
+          <i class="fas fa-play"></i>
+          <span>正在播放</span>
+        </div>
+        
+        <div class="current-song">
+          <img 
+            :src="currentSong.cover || defaultCover" 
+            :alt="currentSong.name"
+            class="song-cover"
+          />
+          
+          <div class="song-details">
+            <div class="song-name">{{ currentSong.name }}</div>
+            <div class="song-artist">{{ formatArtist(currentSong.artist) }}</div>
+          </div>
+          
+          <div class="song-status">
+            <i v-if="isPlaying" class="fas fa-volume-up playing-icon"></i>
+            <i v-else class="fas fa-pause"></i>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 播放列表 -->
+      <div class="playlist-content">
+        <div v-if="!playlist.length" class="empty-playlist">
+          <i class="fas fa-music"></i>
+          <p>播放队列为空</p>
+          <button class="add-music-btn" @click="$emit('close')">
+            去添加音乐
+          </button>
+        </div>
+        
+        <div v-else class="song-list">
+          <div class="section-title" v-if="nextSongs.length">
+            <i class="fas fa-list"></i>
+            <span>下一首播放</span>
+          </div>
+          
+          <div 
+            v-for="(song, index) in playlist"
+            :key="`${song.id}-${index}`"
+            class="playlist-item"
+            :class="{ 
+              active: index === currentIndex,
+              playing: index === currentIndex && isPlaying
+            }"
+            @click="handleSongClick(song, index)"
+          >
+            <div class="item-index">
+              <span v-if="index !== currentIndex">{{ index + 1 }}</span>
+              <i v-else-if="isPlaying" class="fas fa-volume-up playing-icon"></i>
+              <i v-else class="fas fa-pause"></i>
+            </div>
+            
+            <img 
+              :src="song.cover || defaultCover" 
+              :alt="song.name"
+              class="item-cover"
+              @error="handleImageError"
+            />
+            
+            <div class="item-details">
+              <div class="item-name">{{ song.name }}</div>
+              <div class="item-artist">{{ formatArtist(song.artist) }}</div>
+            </div>
+            
+            <div class="item-actions">
+              <button 
+                class="item-action-btn" 
+                @click.stop="toggleFavorite(song)"
+                :class="{ active: isFavorite(song.id) }"
+              >
+                <i :class="isFavorite(song.id) ? 'fas fa-heart' : 'far fa-heart'"></i>
+              </button>
+              
+              <button 
+                class="item-action-btn" 
+                @click.stop="handleRemove(index)"
+                :disabled="playlist.length <= 1"
+              >
+                <i class="fas fa-times"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 确认对话框 -->
+    <ConfirmDialog
+      ref="confirmDialog"
+      title="清空播放队列"
+      message="确定要清空播放队列吗？"
+      confirm-text="清空"
+      cancel-text="取消"
+      type="danger"
+      @confirm="handleClearConfirm"
+      @cancel="handleClearCancel"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+import { useFavoritesStore } from '@/stores/favorites'
+import { utils } from '@/services/musicApi'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
+
+const emit = defineEmits(['close', 'play', 'remove'])
+
+const playerStore = usePlayerStore()
+const favoritesStore = useFavoritesStore()
+const confirmDialog = ref(null)
+
+// 计算属性
+const playlist = computed(() => playerStore.playlist)
+const currentSong = computed(() => playerStore.currentSong)
+const currentIndex = computed(() => playerStore.currentIndex)
+const isPlaying = computed(() => playerStore.isPlaying)
+const playMode = computed(() => playerStore.playMode)
+
+const nextSongs = computed(() => {
+  if (currentIndex.value < 0) return playlist.value
+  return playlist.value.slice(currentIndex.value + 1)
+})
+
+const playModeIcon = computed(() => {
+  switch (playMode.value) {
+    case 'single':
+      return 'fas fa-redo'
+    case 'random':
+      return 'fas fa-random'
+    case 'list':
+    default:
+      return 'fas fa-retweet'
+  }
+})
+
+const playModeText = computed(() => {
+  switch (playMode.value) {
+    case 'single':
+      return '单曲循环'
+    case 'random':
+      return '随机播放'
+    case 'list':
+    default:
+      return '列表循环'
+  }
+})
+
+const defaultCover = computed(() => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHJ4PSI4Ii8+CjxwYXRoIGQ9Ik0zMiAyMkwzNiAzMkgzNFYzOEgzMFYzMkgyOEwzMiAyMloiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIvPgo8L3N2Zz4K'
+})
+
+// 方法
+const handleSongClick = (song, index) => {
+  emit('play', song, index)
+}
+
+const handleRemove = (index) => {
+  emit('remove', index)
+}
+
+const togglePlayMode = () => {
+  playerStore.togglePlayMode()
+}
+
+const clearPlaylist = () => {
+  confirmDialog.value.show()
+}
+
+const handleClearConfirm = () => {
+  playerStore.setPlaylist([])
+  emit('close')
+}
+
+const handleClearCancel = () => {
+  // 用户取消，不做任何操作
+}
+
+const toggleFavorite = async (song) => {
+  try {
+    if (isFavorite(song.id)) {
+      await favoritesStore.removeFavorite(song.id)
+    } else {
+      await favoritesStore.addToFavorites(song)
+    }
+  } catch (error) {
+    console.error('收藏操作失败:', error)
+  }
+}
+
+const isFavorite = (songId) => {
+  return favoritesStore.isFavorite(songId)
+}
+
+const handleImageError = (event) => {
+  event.target.src = defaultCover.value
+}
+
+const formatArtist = (artist) => {
+  return utils.formatArtist(artist)
+}
+</script>
+
+<style scoped>
+.playlist-panel-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.playlist-panel {
+  width: 100%;
+  max-height: 90vh;
+  background: var(--bg-secondary);
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.panel-title h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px 0;
+}
+
+.song-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-btn,
+.close-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.action-btn:hover:not(:disabled),
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.action-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.current-playing {
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  flex-shrink: 0;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: 12px;
+}
+
+.section-title i {
+  font-size: 12px;
+}
+
+.current-song {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.song-cover,
+.item-cover {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.song-details,
+.item-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.song-name,
+.item-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-artist,
+.item-artist {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-status {
+  flex-shrink: 0;
+}
+
+.playing-icon {
+  color: var(--accent-red);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.playlist-content {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.empty-playlist {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+
+.empty-playlist i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-playlist p {
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.add-music-btn {
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.add-music-btn:hover {
+  background: var(--accent-red-hover);
+  transform: scale(1.05);
+}
+
+.song-list {
+  padding: 16px 0;
+}
+
+.song-list .section-title {
+  padding: 0 20px;
+  margin-bottom: 16px;
+}
+
+.playlist-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 20px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+}
+
+.playlist-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.playlist-item.active {
+  background: rgba(255, 107, 107, 0.1);
+}
+
+.playlist-item.active .item-name {
+  color: var(--accent-red);
+}
+
+.item-index {
+  width: 24px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.item-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: var(--transition-fast);
+}
+
+.playlist-item:hover .item-actions {
+  opacity: 1;
+}
+
+.item-action-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-tertiary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 12px;
+}
+
+.item-action-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.item-action-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.item-action-btn.active {
+  color: var(--accent-red);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .playlist-panel {
+    max-height: 75vh;
+  }
+  
+  .panel-header {
+    padding: 16px;
+  }
+  
+  .panel-title h3 {
+    font-size: 16px;
+  }
+  
+  .current-playing {
+    padding: 12px 16px;
+  }
+  
+  .song-cover,
+  .item-cover {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .song-name,
+  .item-name {
+    font-size: 14px;
+  }
+  
+  .playlist-item {
+    padding: 6px 16px;
+  }
+}
+
+@media (min-width: 768px) {
+  .playlist-panel {
+    max-width: 480px;
+    margin: 0 auto 0;
+  }
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+/* 滚动条样式 */
+.playlist-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.playlist-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.playlist-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.playlist-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/ProgressBar.vue b/src/components/player/ProgressBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5dc58032ee807da10f5e8cc1d7330cf547c97311
--- /dev/null
+++ b/src/components/player/ProgressBar.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="progress-bar-container">
+    <div class="progress-bar" ref="progressBarRef">
+      <div 
+        class="progress-track"
+        ref="progressTrackRef"
+        @click="handleClick"
+        @mousedown="handleMouseDown"
+        @touchstart="handleTouchStart"
+      >
+        <div 
+          class="progress-fill"
+          :style="{ width: `${progress}%` }"
+        >
+          <div 
+            class="progress-handle"
+            :class="{ active: isDragging }"
+          ></div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="time-info">
+      <span class="current-time">{{ formatTime(currentTime) }}</span>
+      <span class="total-time">{{ formatTime(duration) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+import { utils } from '@/services/musicApi'
+
+
+const emit = defineEmits(['seek'])
+
+const playerStore = usePlayerStore()
+
+// 响应式数据
+const progressBarRef = ref(null)
+const progressTrackRef = ref(null)
+const isDragging = ref(false)
+const dragProgress = ref(0)
+
+// 计算属性
+const currentTime = computed(() => playerStore.currentTime)
+const duration = computed(() => playerStore.duration)
+
+const progress = computed(() => {
+  if (isDragging.value) {
+    return dragProgress.value
+  }
+  return playerStore.progress
+})
+
+// 方法
+const formatTime = (seconds) => {
+  return utils.formatTime(seconds)
+}
+
+const getProgressFromEvent = (event) => {
+  const rect = progressTrackRef.value.getBoundingClientRect()
+  const clientX = event.touches ? event.touches[0].clientX : event.clientX
+  const x = clientX - rect.left
+  const width = rect.width
+  return Math.max(0, Math.min(100, (x / width) * 100))
+}
+
+const handleClick = (event) => {
+  if (isDragging.value) return
+  
+  const newProgress = getProgressFromEvent(event)
+  const newTime = (newProgress / 100) * duration.value
+  
+  if (isFinite(newTime)) {
+    emit('seek', newTime)
+  }
+}
+
+const handleMouseDown = (event) => {
+  if (event.button !== 0) return // 只处理左键
+  
+  isDragging.value = true
+  dragProgress.value = getProgressFromEvent(event)
+  
+  // 通知store开始手动拖动
+  playerStore.isManualSeeking = true
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  event.preventDefault()
+}
+
+const handleMouseMove = (event) => {
+  if (!isDragging.value) return
+  
+  dragProgress.value = getProgressFromEvent(event)
+  event.preventDefault()
+}
+
+const handleMouseUp = (event) => {
+  if (!isDragging.value) return
+  
+  const newTime = (dragProgress.value / 100) * duration.value
+  if (isFinite(newTime)) {
+    emit('seek', newTime)
+  }
+  
+  isDragging.value = false
+  dragProgress.value = 0
+  
+  // 延迟重置标志，让seek操作完成
+  setTimeout(() => {
+    playerStore.isManualSeeking = false
+  }, 300)
+  
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  event.preventDefault()
+}
+
+// 触摸事件处理
+const handleTouchStart = (event) => {
+  isDragging.value = true
+  dragProgress.value = getProgressFromEvent(event)
+  
+  // 通知store开始手动拖动
+  playerStore.isManualSeeking = true
+  
+  document.addEventListener('touchmove', handleTouchMove, { passive: false })
+  document.addEventListener('touchend', handleTouchEnd)
+  // 不阻止默认事件，避免与滚动冲突
+}
+
+const handleTouchMove = (event) => {
+  if (!isDragging.value) return
+  
+  dragProgress.value = getProgressFromEvent(event)
+  event.preventDefault()
+}
+
+const handleTouchEnd = (event) => {
+  if (!isDragging.value) return
+  
+  const newTime = (dragProgress.value / 100) * duration.value
+  if (isFinite(newTime)) {
+    emit('seek', newTime)
+  }
+  
+  isDragging.value = false
+  dragProgress.value = 0
+  
+  // 延迟重置标志，让seek操作完成
+  setTimeout(() => {
+    playerStore.isManualSeeking = false
+  }, 300)
+  
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+  event.preventDefault()
+}
+
+// 清理事件监听器
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+})
+</script>
+
+<style scoped>
+.progress-bar-container {
+  width: 100%;
+  padding: 0 4px;
+  margin-top: 45px;
+}
+
+.progress-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.progress-track {
+  width: 100%;
+  height: 0.5px;
+  background: var(--border-lighter);
+  border-radius: 0.25px;
+  position: relative;
+  overflow: visible;
+  cursor: pointer;
+  padding: 2px 0;
+  border: none;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: 0.25px;
+  position: relative;
+  transition: width 0.1s ease;
+  box-shadow: 0 0 8px var(--primary-color);
+  filter: brightness(1.5) saturate(1.8);
+  font-weight: bold;
+  height: 2px;
+}
+
+.progress-handle {
+  position: absolute;
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  background: var(--bg-primary);
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--primary-color);
+  opacity: 1;
+  transition: all var(--transition-fast);
+  pointer-events: none;
+  border: 2px solid var(--bg-primary);
+}
+
+.progress-track:hover .progress-handle,
+.progress-handle.active {
+  transform: translateY(-50%) scale(1.2);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--primary-color);
+}
+
+.progress-handle.active {
+  transform: translateY(-50%) scale(1.4);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 4px var(--primary-color);
+}
+
+.time-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+  user-select: none;
+}
+
+/* 进度条悬浮效果 */
+.progress-track:hover {
+  height: 1.5px;
+}
+
+.progress-track:hover .progress-fill {
+  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-hover));
+  box-shadow: 0 0 12px var(--primary-color);
+  filter: brightness(1.8) saturate(2);
+}
+
+/* 活动状态 */
+.progress-track.dragging {
+  height: 1.5px;
+}
+
+.progress-track.dragging .progress-fill {
+  background: linear-gradient(90deg, var(--primary-color), var(--primary-color-hover));
+  box-shadow: 0 0 12px var(--primary-color);
+  filter: brightness(1.8) saturate(2);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .progress-bar {
+    padding: 10px 0;
+  }
+  
+  .progress-track {
+    padding: 6px 0;
+  }
+  
+  .time-info {
+    font-size: 11px;
+    margin-top: 6px;
+  }
+  
+  .progress-handle {
+    width: 10px;
+    height: 10px;
+    right: -5px;
+  }
+}
+
+/* 无障碍支持 */
+.progress-track:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* 动画效果 */
+@keyframes progress-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--primary-color);
+  }
+  50% {
+    box-shadow: 0 0 15px var(--primary-color);
+  }
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  background: inherit;
+  border-radius: inherit;
+  opacity: 0;
+  animation: progress-glow 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.progress-track:hover .progress-fill::after {
+  opacity: 0.3;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/player/SongInfo.vue b/src/components/player/SongInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f4e1d8c1fa5cc506077f42d73264eb771036dd03
--- /dev/null
+++ b/src/components/player/SongInfo.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="song-info">
+    <h1 class="song-title" :class="{ 'scrolling': shouldScroll }">
+      <span ref="titleText">{{ songName || '未知歌曲' }}</span>
+    </h1>
+    
+    <div class="song-meta">
+      <h2 class="song-artist">{{ artistName || '未知歌手' }}</h2>
+      <h3 class="song-album" v-if="albumName">{{ albumName }}</h3>
+    </div>
+    
+    <!-- 音质标识 -->
+    <div class="quality-badge" v-if="quality">
+      <span class="quality-text">{{ formatQuality(quality) }}</span>
+    </div>
+    
+    <!-- 歌曲来源 -->
+    <div class="source-badge" v-if="source">
+      <i class="fas fa-music"></i>
+      <span>{{ getSourceName(source) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  // 歌曲名称
+  songName: {
+    type: String,
+    default: ''
+  },
+  
+  // 歌手名称
+  artistName: {
+    type: String,
+    default: ''
+  },
+  
+  // 专辑名称
+  albumName: {
+    type: String,
+    default: ''
+  },
+  
+  // 音质
+  quality: {
+    type: [String, Number],
+    default: null
+  },
+  
+  // 音乐源
+  source: {
+    type: String,
+    default: ''
+  },
+  
+  // 是否启用滚动效果
+  enableScroll: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const titleText = ref(null)
+const shouldScroll = ref(false)
+
+// 检查标题是否需要滚动
+const checkTitleScroll = () => {
+  if (!props.enableScroll || !titleText.value) return
+  
+  const element = titleText.value
+  const containerWidth = element.parentElement?.offsetWidth || 0
+  const textWidth = element.scrollWidth
+  
+  shouldScroll.value = textWidth > containerWidth
+}
+
+// 格式化音质显示
+const formatQuality = (quality) => {
+  const qualityMap = {
+    128: '标准',
+    192: '较高',
+    320: 'HQ',
+    740: '无损',
+    999: 'Hi-Res'
+  }
+  
+  const numQuality = parseInt(quality)
+  return qualityMap[numQuality] || `${quality}K`
+}
+
+// 获取音乐源名称
+const getSourceName = (source) => {
+  const sourceMap = {
+    'netease': '网易云音乐',
+    'tencent': 'QQ音乐',
+    'kugou': '酷狗音乐',
+    'kuwo': '酷我音乐',
+    'migu': '咪咕音乐',
+    'spotify': 'Spotify',
+    'apple': 'Apple Music',
+    'ytmusic': 'YouTube Music',
+    'joox': 'JOOX',
+    'tidal': 'TIDAL',
+    'deezer': 'Deezer',
+    'qobuz': 'Qobuz',
+    'ximalaya': '喜马拉雅FM'
+  }
+  return sourceMap[source] || source
+}
+
+// 监听歌曲信息变化
+watch([() => props.songName, () => props.artistName], () => {
+  setTimeout(checkTitleScroll, 100)
+})
+
+// 生命周期
+onMounted(() => {
+  setTimeout(checkTitleScroll, 100)
+  window.addEventListener('resize', checkTitleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkTitleScroll)
+})
+</script>
+
+<style scoped>
+.song-info {
+  text-align: center;
+  padding: 0 20px;
+  max-width: 100%;
+}
+
+.song-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+  line-height: 1.3;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+}
+
+.song-title.scrolling span {
+  display: inline-block;
+  animation: scroll-text 10s linear infinite;
+  animation-delay: 2s;
+}
+
+@keyframes scroll-text {
+  0%, 20% {
+    transform: translateX(0);
+  }
+  80%, 100% {
+    transform: translateX(-100%);
+  }
+}
+
+.song-meta {
+  margin-bottom: 16px;
+}
+
+.song-artist {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin: 0 0 4px 0;
+  line-height: 1.3;
+}
+
+.song-album {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+  margin: 0;
+  line-height: 1.3;
+  opacity: 0.8;
+}
+
+.quality-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  background: var(--accent-red);
+  border-radius: 4px;
+  margin: 0 8px 0 0;
+}
+
+.quality-text {
+  font-size: 10px;
+  font-weight: 600;
+  color: white;
+  line-height: 1;
+}
+
+.source-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+.source-badge i {
+  font-size: 8px;
+  color: var(--text-secondary);
+}
+
+.source-badge span {
+  font-size: 10px;
+  color: var(--text-secondary);
+  line-height: 1;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .song-info {
+    padding: 0 16px;
+  }
+  
+  .song-title {
+    font-size: 18px;
+  }
+  
+  .song-artist {
+    font-size: 13px;
+  }
+  
+  .song-album {
+    font-size: 11px;
+  }
+}
+
+/* 大屏幕优化 */
+@media (min-width: 768px) {
+  .song-title {
+    font-size: 24px;
+  }
+  
+  .song-artist {
+    font-size: 16px;
+  }
+  
+  .song-album {
+    font-size: 14px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search/InfiniteScroll.vue b/src/components/search/InfiniteScroll.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc1a57bc038e07b36286cab36289665f78c33e66
--- /dev/null
+++ b/src/components/search/InfiniteScroll.vue
@@ -0,0 +1,293 @@
+<template>
+  <div 
+    ref="scrollContainer"
+    class="infinite-scroll"
+    @scroll="handleScroll"
+  >
+    <slot></slot>
+    
+    <!-- 加载更多指示器 -->
+    <div v-if="loading" class="loading-indicator">
+      <Loading :text="loadingText" size="small" />
+    </div>
+    
+    <!-- 没有更多数据 -->
+    <div v-if="noMore && !loading" class="no-more">
+      <i class="fas fa-check-circle"></i>
+      <span>{{ noMoreText }}</span>
+    </div>
+    
+    <!-- 加载失败 -->
+    <div v-if="error" class="load-error">
+      <i class="fas fa-exclamation-circle"></i>
+      <span>{{ errorText }}</span>
+      <button class="retry-btn" @click="handleRetry">
+        <i class="fas fa-redo"></i>
+        重试
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import Loading from '@/components/common/Loading.vue'
+
+const props = defineProps({
+  // 是否正在加载
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 是否没有更多数据
+  noMore: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 是否加载错误
+  error: {
+    type: Boolean,
+    default: false
+  },
+  
+  // 距离底部多少像素开始加载
+  distance: {
+    type: Number,
+    default: 100
+  },
+  
+  // 加载文本
+  loadingText: {
+    type: String,
+    default: '加载中...'
+  },
+  
+  // 没有更多数据文本
+  noMoreText: {
+    type: String,
+    default: '没有更多了'
+  },
+  
+  // 错误文本
+  errorText: {
+    type: String,
+    default: '加载失败'
+  },
+  
+  // 是否立即检查
+  immediate: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['load-more', 'retry'])
+
+const scrollContainer = ref(null)
+const isLoadingMore = ref(false)
+
+// 处理滚动事件
+const handleScroll = () => {
+  if (!scrollContainer.value || props.loading || props.noMore || props.error) {
+    return
+  }
+  
+  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value
+  const distanceToBottom = scrollHeight - scrollTop - clientHeight
+  
+  if (distanceToBottom <= props.distance && !isLoadingMore.value) {
+    loadMore()
+  }
+}
+
+// 加载更多
+const loadMore = () => {
+  if (isLoadingMore.value || props.loading || props.noMore || props.error) {
+    return
+  }
+  
+  isLoadingMore.value = true
+  emit('load-more')
+  
+  // 防止重复触发
+  setTimeout(() => {
+    isLoadingMore.value = false
+  }, 1000)
+}
+
+// 重试
+const handleRetry = () => {
+  emit('retry')
+}
+
+// 检查是否需要立即加载
+const checkImmediate = () => {
+  if (props.immediate && scrollContainer.value) {
+    const { scrollHeight, clientHeight } = scrollContainer.value
+    
+    // 如果内容高度不够填满容器，立即触发加载
+    if (scrollHeight <= clientHeight && !props.loading && !props.noMore && !props.error) {
+      loadMore()
+    }
+  }
+}
+
+// 手动触发检查
+const check = () => {
+  handleScroll()
+}
+
+// 重置状态
+const reset = () => {
+  isLoadingMore.value = false
+}
+
+// 滚动到顶部
+const scrollToTop = (smooth = true) => {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTo({
+      top: 0,
+      behavior: smooth ? 'smooth' : 'auto'
+    })
+  }
+}
+
+// 滚动到底部
+const scrollToBottom = (smooth = true) => {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTo({
+      top: scrollContainer.value.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto'
+    })
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  if (scrollContainer.value) {
+    // 延迟检查，确保内容已渲染
+    setTimeout(checkImmediate, 100)
+  }
+})
+
+onUnmounted(() => {
+  // 清理工作
+})
+
+// 暴露方法给父组件
+defineExpose({
+  check,
+  reset,
+  scrollToTop,
+  scrollToBottom,
+  loadMore
+})
+</script>
+
+<style scoped>
+.infinite-scroll {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.loading-indicator {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.no-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 20px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.no-more i {
+  color: var(--accent-red);
+  font-size: 12px;
+}
+
+.load-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.load-error i {
+  color: #ff6b6b;
+  font-size: 16px;
+}
+
+.retry-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.retry-btn:hover {
+  background: var(--accent-red-hover);
+  transform: scale(1.05);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .loading-indicator {
+    padding: 16px;
+  }
+  
+  .no-more,
+  .load-error {
+    padding: 16px;
+    font-size: 13px;
+  }
+  
+  .retry-btn {
+    padding: 6px 12px;
+    font-size: 11px;
+  }
+}
+
+/* 滚动条样式 */
+.infinite-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.infinite-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.infinite-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.infinite-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* 滚动到顶部/底部的平滑动画 */
+.infinite-scroll {
+  scroll-behavior: smooth;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search/SearchBox.vue b/src/components/search/SearchBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef645f668ae0b7b19bd96be1b2f975328d173158
--- /dev/null
+++ b/src/components/search/SearchBox.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="search-box">
+    <div class="search-wrapper">
+      <div class="search-input-container">
+        <i class="fas fa-search search-icon"></i>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="搜索音乐、歌手、专辑..."
+          class="search-input"
+          @keypress.enter="handleSearch"
+          @focus="showHistory = true"
+          @blur="hideHistory"
+        >
+        <button 
+          v-if="searchKeyword"
+          class="clear-btn"
+          @click="clearSearch"
+        >
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      
+      <button 
+        class="source-btn"
+        @click="showSourceSelector = true"
+      >
+        {{ currentSourceName }}
+        <i class="fas fa-chevron-down"></i>
+      </button>
+    </div>
+    
+    <!-- 搜索历史 -->
+    <div v-if="showHistory && searchHistory.length" class="search-history">
+      <div class="history-header">
+        <span class="history-title">搜索历史</span>
+        <button class="clear-history-btn" @click="clearSearchHistory">
+          <i class="fas fa-trash"></i>
+        </button>
+      </div>
+      <div class="history-list">
+        <button
+          v-for="item in searchHistory"
+          :key="item"
+          class="history-item"
+          @click="selectHistoryItem(item)"
+        >
+          {{ item }}
+        </button>
+      </div>
+    </div>
+    
+    <!-- 音乐源选择弹窗 -->
+    <SourceSelector
+      v-if="showSourceSelector"
+      @close="showSourceSelector = false"
+      @select="handleSourceSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useSearchStore } from '@/stores/search'
+import { MUSIC_SOURCES } from '@/services/musicApi'
+import SourceSelector from './SourceSelector.vue'
+
+const emit = defineEmits(['search'])
+
+const searchStore = useSearchStore()
+
+// 响应式数据
+const searchKeyword = ref('')
+const showHistory = ref(false)
+const showSourceSelector = ref(false)
+
+// 计算属性
+const currentSourceName = computed(() => {
+  const source = MUSIC_SOURCES.find(s => s.code === searchStore.currentSource)
+  return source ? source.name : '网易云音乐'
+})
+
+const searchHistory = computed(() => searchStore.searchHistory)
+
+// 方法
+const handleSearch = () => {
+  const keyword = searchKeyword.value.trim()
+  if (keyword) {
+    emit('search', keyword)
+    showHistory.value = false
+  }
+}
+
+const clearSearch = () => {
+  searchKeyword.value = ''
+  showHistory.value = false
+}
+
+const selectHistoryItem = (item) => {
+  searchKeyword.value = item
+  handleSearch()
+}
+
+const clearSearchHistory = () => {
+  searchStore.clearHistory()
+  showHistory.value = false
+}
+
+const hideHistory = () => {
+  setTimeout(() => {
+    showHistory.value = false
+  }, 200)
+}
+
+const handleSourceSelect = (sourceCode) => {
+  searchStore.setSource(sourceCode)
+  showSourceSelector.value = false
+}
+
+// 监听搜索关键词变化
+watch(() => searchStore.keyword, (newKeyword) => {
+  if (newKeyword && newKeyword !== searchKeyword.value) {
+    searchKeyword.value = newKeyword
+  }
+})
+</script>
+
+<style scoped>
+.search-box {
+  position: relative;
+  background: transparent;
+}
+
+.search-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-input-container {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: 25px;
+  padding: 0 16px;
+  transition: var(--transition-fast);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  min-width: 0; /* 添加：允许容器收缩 */
+}
+
+.search-input-container:focus-within {
+  border-color: var(--accent-red);
+  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.search-icon {
+  color: var(--text-secondary);
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.search-input {
+  flex: 1;
+  height: 44px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 16px;
+  min-width: 0; /* 添加：允许输入框收缩 */
+}
+
+.search-input::placeholder {
+  color: var(--text-disabled);
+}
+
+.clear-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+
+.clear-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.source-btn {
+  height: 44px;
+  padding: 0 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: 22px;
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  transition: var(--transition-fast);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  flex-shrink: 0; /* 添加：防止按钮收缩 */
+  max-width: 120px; /* 添加：限制最大宽度 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.source-btn:hover {
+  border-color: var(--accent-red);
+  color: var(--accent-red);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.source-btn i {
+  font-size: 12px;
+}
+
+.search-history {
+  position: absolute;
+  top: 100%;
+  left: 16px;
+  right: 16px;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-small);
+  box-shadow: var(--shadow-card);
+  z-index: 100;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-strong);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.history-title {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.clear-history-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  background: transparent;
+  border: none;
+  color: var(--text-disabled);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+
+.clear-history-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.history-list {
+  padding: 8px;
+}
+
+.history-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-size: 14px;
+  text-align: left;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-bottom: 4px;
+  transition: var(--transition-fast);
+}
+
+.history-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--accent-red);
+}
+
+.history-item:last-child {
+  margin-bottom: 0;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .search-wrapper {
+    gap: 6px;
+  }
+  
+  .source-btn {
+    padding: 0 12px;
+    font-size: 13px;
+    max-width: 100px; /* 调整小屏幕下的最大宽度 */
+  }
+  
+  .search-input-container {
+    border: 1px solid var(--border-light);
+  }
+  
+  .source-btn {
+    border: 1px solid var(--border-light);
+  }
+  
+  .search-history {
+    border: 1px solid var(--border-strong);
+  }
+}
+
+@media (min-width: 768px) {
+  /* PC端优化 */
+  .search-input-container {
+    min-width: 200px; /* PC端设置最小宽度 */
+  }
+  
+  .source-btn {
+    max-width: 150px; /* PC端增加最大宽度 */
+  }
+}
+</style>
diff --git a/src/components/search/SearchHistory.vue b/src/components/search/SearchHistory.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3ac73aab94cf91cc3421cf468ff0112cf45fcee
--- /dev/null
+++ b/src/components/search/SearchHistory.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="search-history" v-if="historyItems.length || showEmpty">
+    <div class="history-header">
+      <h3 class="history-title">
+        <i class="fas fa-history"></i>
+        搜索历史
+      </h3>
+      <button 
+        class="clear-btn" 
+        @click="handleClear"
+        v-if="historyItems.length"
+      >
+        <i class="fas fa-trash"></i>
+        清空
+      </button>
+    </div>
+    
+    <div class="history-content">
+      <div v-if="!historyItems.length && showEmpty" class="empty-history">
+        <i class="fas fa-search"></i>
+        <p>暂无搜索历史</p>
+      </div>
+      
+      <div v-else class="history-list">
+        <div 
+          v-for="(item, index) in displayItems"
+          :key="index"
+          class="history-item"
+          @click="handleItemClick(item)"
+        >
+          <div class="history-icon">
+            <i class="fas fa-search"></i>
+          </div>
+          
+          <div class="history-text">
+            <span class="keyword">{{ item.keyword }}</span>
+            <span class="source">{{ item.sourceName }}</span>
+            <span class="time">{{ formatTime(item.timestamp) }}</span>
+          </div>
+          
+          <button 
+            class="remove-btn"
+            @click.stop="handleRemove(index)"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        
+        <!-- 展开/收起按钮 -->
+        <div 
+          v-if="historyItems.length > maxDisplay"
+          class="expand-btn"
+          @click="toggleExpanded"
+        >
+          <span>{{ expanded ? '收起' : `查看更多 (${historyItems.length - maxDisplay})` }}</span>
+          <i :class="expanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useSearchStore } from '@/stores/search'
+import { useSettingsStore } from '@/stores/settings'
+
+const emit = defineEmits(['search', 'clear'])
+
+const searchStore = useSearchStore()
+const settingsStore = useSettingsStore()
+
+// 响应式数据
+const expanded = ref(false)
+const maxDisplay = ref(5)
+
+const props = defineProps({
+  showEmpty: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 计算属性
+const historyItems = computed(() => {
+  return settingsStore.settings.saveSearchHistory ? searchStore.searchHistory : []
+})
+
+const displayItems = computed(() => {
+  if (expanded.value || historyItems.value.length <= maxDisplay.value) {
+    return historyItems.value
+  }
+  return historyItems.value.slice(0, maxDisplay.value)
+})
+
+// 方法
+const handleItemClick = (item) => {
+  emit('search', {
+    keyword: item.keyword,
+    source: item.source
+  })
+}
+
+const handleRemove = (index) => {
+  const actualIndex = expanded.value ? index : index
+  searchStore.removeFromHistory(actualIndex)
+}
+
+const handleClear = () => {
+  if (confirm('确定要清空所有搜索历史吗？')) {
+    searchStore.clearHistory()
+    emit('clear')
+  }
+}
+
+const toggleExpanded = () => {
+  expanded.value = !expanded.value
+}
+
+const formatTime = (timestamp) => {
+  const now = Date.now()
+  const diff = now - timestamp
+  
+  if (diff < 60000) { // 1分钟内
+    return '刚刚'
+  } else if (diff < 3600000) { // 1小时内
+    return `${Math.floor(diff / 60000)}分钟前`
+  } else if (diff < 86400000) { // 1天内
+    return `${Math.floor(diff / 3600000)}小时前`
+  } else if (diff < 2592000000) { // 30天内
+    return `${Math.floor(diff / 86400000)}天前`
+  } else {
+    return new Date(timestamp).toLocaleDateString()
+  }
+}
+
+// 获取音乐源名称
+const getSourceName = (source) => {
+  const sourceMap = {
+    'netease': '网易云音乐',
+    'tencent': 'QQ音乐',
+    'kugou': '酷狗音乐',
+    'kuwo': '酷我音乐',
+    'migu': '咪咕音乐',
+    'spotify': 'Spotify',
+    'apple': 'Apple Music',
+    'ytmusic': 'YouTube Music',
+    'joox': 'JOOX',
+    'tidal': 'TIDAL',
+    'deezer': 'Deezer',
+    'qobuz': 'Qobuz',
+    'ximalaya': '喜马拉雅FM'
+  }
+  return sourceMap[source] || source
+}
+</script>
+
+<style scoped>
+.search-history {
+  background: var(--bg-card);
+  border-radius: 12px;
+  margin: 16px;
+  overflow: hidden;
+}
+
+.history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.history-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.history-title i {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.clear-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.clear-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+}
+
+.history-content {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.empty-history {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: var(--text-tertiary);
+}
+
+.empty-history i {
+  font-size: 32px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.empty-history p {
+  font-size: 14px;
+  margin: 0;
+}
+
+.history-list {
+  padding: 8px 0;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.history-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.history-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.history-icon i {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.history-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.keyword {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.source {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.time {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.remove-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  opacity: 0;
+}
+
+.history-item:hover .remove-btn {
+  opacity: 1;
+}
+
+.remove-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 12px;
+  transition: var(--transition-fast);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.expand-btn:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .search-history {
+    margin: 12px;
+    border-radius: 8px;
+  }
+  
+  .history-header {
+    padding: 12px 16px;
+  }
+  
+  .history-title {
+    font-size: 14px;
+  }
+  
+  .clear-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+  
+  .history-item {
+    padding: 10px 16px;
+  }
+  
+  .keyword {
+    font-size: 13px;
+  }
+  
+  .source,
+  .time {
+    font-size: 10px;
+  }
+}
+
+/* 滚动条样式 */
+.history-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.history-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.history-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.history-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search/SearchResults.vue b/src/components/search/SearchResults.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a478178e60c0b2a120234d9be4b65548ea12f622
--- /dev/null
+++ b/src/components/search/SearchResults.vue
@@ -0,0 +1,423 @@
+<template>
+  <div class="search-results">
+    <!-- 加载状态 -->
+    <div v-if="loading && !results.length" class="loading-state">
+      <div class="loading-spinner">
+        <i class="fas fa-spinner fa-spin"></i>
+      </div>
+      <p>正在搜索音乐...</p>
+    </div>
+    
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-state">
+      <div class="error-icon">
+        <i class="fas fa-exclamation-triangle"></i>
+      </div>
+      <p class="error-message">{{ error }}</p>
+      <button class="retry-btn" @click="$emit('retry')">
+        <i class="fas fa-redo"></i>
+        重试
+      </button>
+    </div>
+    
+    <!-- 空状态 -->
+    <div v-else-if="!results.length && searched" class="empty-state">
+      <div class="empty-icon">
+        <i class="fas fa-search"></i>
+      </div>
+      <p class="empty-message">未找到相关歌曲</p>
+      <p class="empty-tip">尝试更换关键词或切换音乐源</p>
+    </div>
+    
+    <!-- 搜索结果列表 -->
+    <div v-else-if="results.length" class="results-list">
+      <div class="results-header">
+        <span class="results-count">找到 {{ results.length }} 首歌曲</span>
+      </div>
+      
+      <div class="songs-container" ref="songsContainer">
+        <SongItem
+          v-for="(song, index) in results"
+          :key="`${song.source}-${song.id}`"
+          :song="song"
+          :index="index"
+          @play="handlePlay"
+        />
+        
+        <!-- 加载更多 -->
+        <div v-if="hasMore" class="load-more" ref="loadMoreRef">
+          <div v-if="loadingMore" class="loading-more">
+            <i class="fas fa-spinner fa-spin"></i>
+            <span>加载更多...</span>
+          </div>
+        </div>
+        
+        <!-- 没有更多了 -->
+        <div v-else-if="results.length >= 20" class="no-more">
+          <span>没有更多歌曲了</span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 默认状态 -->
+    <div v-else class="default-state">
+      <div class="default-icon">
+        <i class="fas fa-music"></i>
+      </div>
+      <p class="default-message">在上方输入关键词开始搜索</p>
+      <div class="suggestions">
+        <p class="suggestions-title">试试搜索：</p>
+        <div class="suggestion-tags">
+          <button 
+            v-for="suggestion in suggestions"
+            :key="suggestion"
+            class="suggestion-tag"
+            @click="$emit('search', suggestion)"
+          >
+            {{ suggestion }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useSearchStore } from '@/stores/search'
+import { usePlayerStore } from '@/stores/player'
+import SongItem from './SongItem.vue'
+
+const props = defineProps({
+  error: {
+    type: String,
+    default: ''
+  },
+  searched: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['retry', 'search', 'play', 'loadMore'])
+
+const searchStore = useSearchStore()
+const playerStore = usePlayerStore()
+
+// 响应式数据
+const songsContainer = ref(null)
+const loadMoreRef = ref(null)
+const observer = ref(null)
+
+// 搜索建议
+const suggestions = [
+  '周杰伦', '邓紫棋', '林俊杰', '薛之谦', '毛不易',
+  '张学友', '王菲', '李荣浩', '陈奕迅', '蔡徐坤'
+]
+
+// 计算属性
+const results = computed(() => searchStore.searchResults || [])
+const loading = computed(() => searchStore.loading)
+const hasMore = computed(() => searchStore.hasMore)
+const loadingMore = computed(() => loading.value && results.value.length > 0)
+
+// 方法
+const handlePlay = async (song, index) => {
+  // 设置播放列表和播放歌曲
+  playerStore.setPlaylist(results.value, index)
+  await playerStore.playSong(song, index)
+  emit('play', song, index)
+}
+
+// 设置智能滚动加载 - 可视区域超过一半时加载下一页
+const setupInfiniteScroll = () => {
+  if (!songsContainer.value) return
+  
+  // 监听滚动事件
+  const handleScroll = () => {
+    const container = songsContainer.value
+    const containerHeight = container.clientHeight
+    const scrollTop = container.scrollTop
+    const scrollHeight = container.scrollHeight
+    
+    // 计算已显示的歌曲数量
+    const itemHeight = 80 // 估算每个歌曲项的高度
+    const visibleItems = Math.ceil(containerHeight / itemHeight)
+    const scrolledItems = Math.floor(scrollTop / itemHeight)
+    const totalVisibleItems = visibleItems + scrolledItems
+    
+    // 当显示的歌曲超过当前总数的一半时，加载更多
+    const halfwayPoint = Math.ceil(results.value.length / 2)
+    
+    if (totalVisibleItems >= halfwayPoint && hasMore.value && !loading.value) {
+      emit('loadMore')
+    }
+  }
+  
+  // 防抖处理
+  let scrollTimer = null
+  const debouncedScroll = () => {
+    if (scrollTimer) clearTimeout(scrollTimer)
+    scrollTimer = setTimeout(handleScroll, 50)
+  }
+  
+  songsContainer.value.addEventListener('scroll', debouncedScroll, { passive: true })
+  
+  // 清理函数
+  return () => {
+    if (songsContainer.value) {
+      songsContainer.value.removeEventListener('scroll', debouncedScroll)
+    }
+    if (scrollTimer) clearTimeout(scrollTimer)
+  }
+}
+
+let cleanupScrollListener = null
+
+// 监听歌曲容器元素
+watch(songsContainer, (newContainer) => {
+  // 清理之前的监听器
+  if (cleanupScrollListener) {
+    cleanupScrollListener()
+    cleanupScrollListener = null
+  }
+  
+  if (newContainer) {
+    cleanupScrollListener = setupInfiniteScroll()
+  }
+})
+
+// 监听搜索结果变化，重新设置滚动监听
+watch(results, () => {
+  if (songsContainer.value && results.value.length > 0) {
+    // 延迟设置，确保DOM已更新
+    setTimeout(() => {
+      if (cleanupScrollListener) {
+        cleanupScrollListener()
+      }
+      cleanupScrollListener = setupInfiniteScroll()
+    }, 100)
+  }
+})
+
+onMounted(() => {
+  if (songsContainer.value) {
+    cleanupScrollListener = setupInfiniteScroll()
+  }
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (cleanupScrollListener) {
+    cleanupScrollListener()
+  }
+})
+</script>
+
+<style scoped>
+.search-results {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 20px;
+  margin-top: 10px;
+}
+
+/* 状态样式 */
+.loading-state,
+.error-state,
+.empty-state,
+.default-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  min-height: 300px;
+  background: var(--bg-card);
+  border-radius: var(--radius-small);
+  margin: 0 16px 16px;
+  border: 1px solid var(--border-light);
+}
+
+.loading-spinner,
+.error-icon,
+.empty-icon,
+.default-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+}
+
+.loading-spinner {
+  color: var(--accent-red);
+}
+
+.error-icon {
+  color: #ff5252;
+}
+
+.empty-icon {
+  color: var(--text-disabled);
+}
+
+.default-icon {
+  color: var(--text-secondary);
+}
+
+.loading-state p,
+.error-message,
+.empty-message,
+.default-message {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-disabled);
+}
+
+.retry-btn {
+  margin-top: 16px;
+  padding: 10px 20px;
+  background: var(--accent-red);
+  color: white;
+  border: none;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: var(--transition-fast);
+}
+
+.retry-btn:hover {
+  background: var(--accent-red-hover);
+}
+
+/* 搜索建议 */
+.suggestions {
+  margin-top: 24px;
+}
+
+.suggestions-title {
+  font-size: 14px;
+  color: var(--text-disabled);
+  margin-bottom: 12px;
+}
+
+.suggestion-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.suggestion-tag {
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 16px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.suggestion-tag:hover {
+  background: var(--accent-red);
+  color: white;
+}
+
+/* 结果列表 */
+.results-list {
+  padding: 0 0 20px;
+}
+
+.results-header {
+  padding: 16px 20px 8px;
+  border-bottom: 1px solid var(--border-strong);
+  margin-bottom: 8px;
+  background: var(--bg-card);
+  border-radius: var(--radius-small) var(--radius-small) 0 0;
+}
+
+.results-count {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.songs-container {
+  padding: 0 4px;
+  background: var(--bg-card);
+  border-radius: 0 0 var(--radius-small) var(--radius-small);
+  margin: 0 16px 16px;
+  border: 1px solid var(--border-light);
+  border-top: none;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* 加载更多 */
+.load-more {
+  padding: 20px;
+  text-align: center;
+}
+
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.no-more {
+  padding: 20px;
+  text-align: center;
+}
+
+.no-more span {
+  font-size: 14px;
+  color: var(--text-disabled);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .loading-state,
+  .error-state,
+  .empty-state,
+  .default-state {
+    padding: 40px 16px;
+    margin: 0 12px 12px;
+  }
+  
+  .loading-spinner,
+  .error-icon,
+  .empty-icon,
+  .default-icon {
+    width: 56px;
+    height: 56px;
+    font-size: 20px;
+  }
+  
+  .results-header {
+    padding: 12px 16px 8px;
+  }
+  
+  .songs-container {
+    margin: 0 12px 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search/SongItem.vue b/src/components/search/SongItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5065cf53d2c5e87c062093e2ada198fb1add42bd
--- /dev/null
+++ b/src/components/search/SongItem.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="song-item" :class="{ active: isActive }" @click="handleClick">
+    <div class="song-index">{{ String(index + 1).padStart(2, '0') }}</div>
+    
+    <div class="song-info">
+      <div class="song-name">{{ song.name }}</div>
+      <div class="song-artist">
+        {{ formatArtist(song.artist) }} · {{ song.album }}
+      </div>
+    </div>
+    
+    <div class="song-actions">
+      <button 
+        class="action-btn favorite-btn"
+        :class="{ active: isFavorite }"
+        @click.stop="toggleFavorite"
+        :title="isFavorite ? '取消收藏' : '收藏'"
+      >
+        <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { usePlayerStore } from '@/stores/player'
+import { useFavoritesStore } from '@/stores/favorites'
+import { utils } from '@/services/musicApi'
+
+const props = defineProps({
+  song: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+})
+
+const emit = defineEmits(['play'])
+
+const playerStore = usePlayerStore()
+const favoritesStore = useFavoritesStore()
+
+// 计算属性
+const isActive = computed(() => {
+  const current = playerStore.currentSong
+  return current && current.id === props.song.id && current.source === props.song.source
+})
+
+const isFavorite = computed(() => {
+  return favoritesStore.isFavorite(props.song)
+})
+
+// 方法
+const formatArtist = (artist) => {
+  return utils.formatArtist(artist)
+}
+
+const handleClick = () => {
+  emit('play', props.song, props.index)
+}
+
+const toggleFavorite = () => {
+  favoritesStore.toggleFavorite(props.song)
+  
+  // 触觉反馈
+  if (navigator.vibrate) {
+    navigator.vibrate(50)
+  }
+}
+</script>
+
+<style scoped>
+.song-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: transparent;
+  border-radius: var(--radius-small);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+  min-height: var(--list-item-height);
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.song-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.song-item.active {
+  background: rgba(255, 107, 107, 0.1);
+  color: var(--accent-red);
+  border-bottom: 1px solid var(--accent-red);
+}
+
+.song-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background: var(--accent-red);
+  border-radius: 2px;
+}
+
+.song-index {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.song-item.active .song-index {
+  background: var(--accent-red);
+  color: white;
+}
+
+.song-info {
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
+}
+
+.song-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-item.active .song-name {
+  color: var(--accent-red);
+}
+
+.song-artist {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  color: var(--text-disabled);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: var(--transition-fast);
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.favorite-btn.active {
+  color: var(--accent-red);
+}
+
+.favorite-btn.active:hover {
+  color: var(--accent-red-hover);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .song-item {
+    padding: 10px 12px;
+  }
+  
+  .song-index {
+    width: 28px;
+    height: 28px;
+    font-size: 11px;
+    margin-right: 10px;
+  }
+  
+  .action-btn {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+  
+  .song-actions {
+    gap: 2px;
+  }
+  
+  .song-item:last-child {
+    border-bottom: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search/SourceSelector.vue b/src/components/search/SourceSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..285e739d4b2e41c6bcbd0e41b0711ac776f8e9c9
--- /dev/null
+++ b/src/components/search/SourceSelector.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="source-selector-overlay" @click="$emit('close')">
+    <div class="source-selector-content" @click.stop>
+      <div class="selector-header">
+        <h3>选择音乐源</h3>
+        <button class="close-btn" @click="$emit('close')">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      
+      <div class="sources-list">
+        <button
+          v-for="source in musicSources"
+          :key="source.code"
+          class="source-item"
+          :class="{ active: source.code === currentSource }"
+          @click="selectSource(source.code)"
+        >
+          <div class="source-info">
+            <span class="source-name">{{ source.name }}</span>
+            <span class="source-priority">优先级 {{ source.priority }}</span>
+          </div>
+          <i v-if="source.code === currentSource" class="fas fa-check check-icon"></i>
+        </button>
+      </div>
+      
+      <div class="selector-footer">
+        <p class="footer-tip">建议优先使用网易云音乐，资源更丰富</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useSearchStore } from '@/stores/search'
+import { MUSIC_SOURCES } from '@/services/musicApi'
+
+const emit = defineEmits(['close', 'select'])
+
+const searchStore = useSearchStore()
+
+// 计算属性
+const currentSource = computed(() => searchStore.currentSource)
+const musicSources = computed(() => 
+  MUSIC_SOURCES.sort((a, b) => a.priority - b.priority)
+)
+
+// 方法
+const selectSource = (sourceCode) => {
+  emit('select', sourceCode)
+  emit('close')
+}
+</script>
+
+<style scoped>
+.source-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.source-selector-content {
+  width: 100%;
+  max-height: 70vh;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border-radius: 20px 20px 0 0;
+  animation: slideUp 0.3s ease;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+.selector-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-strong);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.selector-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: var(--transition-fast);
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.sources-list {
+  max-height: calc(70vh - 160px);
+  overflow-y: auto;
+  padding: 8px 0;
+  background: var(--bg-card);
+}
+
+.source-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.source-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.source-item.active {
+  background: rgba(255, 107, 107, 0.1);
+  color: var(--accent-red);
+  border-bottom: 1px solid var(--accent-red);
+}
+
+.source-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.source-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.source-item.active .source-name {
+  color: var(--accent-red);
+}
+
+.source-priority {
+  font-size: 12px;
+  color: var(--text-disabled);
+}
+
+.check-icon {
+  color: var(--accent-red);
+  font-size: 16px;
+}
+
+.selector-footer {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-strong);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.footer-tip {
+  font-size: 12px;
+  color: var(--text-disabled);
+  text-align: center;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* 滚动条样式 */
+.sources-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sources-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sources-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.sources-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..de4f94b499c69207444729ec3a45a644628652ea
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,83 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router/index.js'
+import App from './App.vue'
+import './styles/global.css'
+
+// 创建应用实例
+const app = createApp(App)
+
+// 创建Pinia实例
+const pinia = createPinia()
+
+// 使用插件
+app.use(pinia)
+app.use(router)
+
+// 挂载应用
+app.mount('#app')
+
+// PWA 注册 (开发环境暂时禁用)
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js')
+      .then((registration) => {
+        console.log('SW registered: ', registration)
+      })
+      .catch((registrationError) => {
+        console.log('SW registration failed: ', registrationError)
+      })
+  })
+}
+
+// MediaSession API 兼容性检查
+if ('mediaSession' in navigator) {
+  console.log('MediaSession API 支持')
+} else {
+  console.log('MediaSession API 不支持')
+}
+
+// PWA 安装提示
+let deferredPrompt
+window.addEventListener('beforeinstallprompt', (e) => {
+  console.log('PWA 可以安装')
+  e.preventDefault()
+  deferredPrompt = e
+  
+  // 可以在这里显示安装提示
+  showInstallPrompt()
+})
+
+function showInstallPrompt() {
+  // 显示安装应用的提示
+  if (deferredPrompt) {
+    const shouldInstall = confirm('是否将云音乐添加到主屏幕？')
+    if (shouldInstall) {
+      deferredPrompt.prompt()
+      deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('用户接受了安装')
+        } else {
+          console.log('用户拒绝了安装')
+        }
+        deferredPrompt = null
+      })
+    }
+  }
+}
+
+// 全局错误处理
+app.config.errorHandler = (err, instance, info) => {
+  console.error('Global error:', err)
+  console.error('Component:', instance)
+  console.error('Error info:', info)
+}
+
+// 全局警告处理
+app.config.warnHandler = (msg, instance, trace) => {
+  console.warn('Global warning:', msg)
+  console.warn('Component:', instance)
+  console.warn('Trace:', trace)
+}
+
+console.log('🎵 云音乐PWA 启动完成')
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
deleted file mode 100644
index 5dcad83c30800a564e96bad81c93d6be2ffaceaa..0000000000000000000000000000000000000000
--- a/src/main.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import './assets/main.css'
-
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
-import App from './App.vue'
-import router from './router'
-
-const app = createApp(App)
-
-app.use(createPinia())
-app.use(router)
-
-app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..829dd947c783e0ef26a64e1d1208695dcf1feef7
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,65 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import HomePage from '@/views/HomePage.vue'
+import MyMusicPage from '@/views/MyMusicPage.vue'
+import SettingsPage from '@/views/SettingsPage.vue'
+import FullPlayerPage from '@/views/FullPlayerPage.vue'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/home'
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomePage,
+    meta: {
+      title: '首页',
+      keepAlive: true
+    }
+  },
+  {
+    path: '/my-music',
+    name: 'MyMusic', 
+    component: MyMusicPage,
+    meta: {
+      title: '我的音乐',
+      keepAlive: true
+    }
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: SettingsPage,
+    meta: {
+      title: '设置',
+      keepAlive: false
+    }
+  },
+  {
+    path: '/player',
+    name: 'FullPlayer',
+    component: FullPlayerPage,
+    meta: {
+      title: '正在播放',
+      keepAlive: false,
+      fullScreen: true
+    }
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  // 设置页面标题
+  if (to.meta?.title) {
+    document.title = `${to.meta.title} - 云音乐PWA`
+  }
+  next()
+})
+
+export default router
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
deleted file mode 100644
index 3e49915cae707b92441e745b76f9a7958cd8f2ac..0000000000000000000000000000000000000000
--- a/src/router/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView,
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
-    },
-  ],
-})
-
-export default router
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000000000000000000000000000000000000..28edbe75e6b977af2f93c9e31a6d9c767b291f52
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,110 @@
+// 基础API请求封装
+class ApiClient {
+  constructor(baseURL = '', options = {}) {
+    this.baseURL = baseURL
+    this.timeout = options.timeout || 30000 // 改为30秒
+    this.headers = {
+      // 不要默认设置Content-Type，避免触发预检请求
+      ...options.headers
+    }
+  }
+
+  // 基础请求方法
+  async request(url, options = {}) {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), this.timeout)
+
+    try {
+      const fullUrl = url.startsWith('http') ? url : `${this.baseURL}${url}`
+      
+      // 对于所有请求，都不要添加默认的Content-Type头部，避免触发预检请求
+      const fetchOptions = {
+        signal: controller.signal,
+        ...options
+      }
+
+      const response = await fetch(fullUrl, fetchOptions)
+
+      clearTimeout(timeoutId)
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const contentType = response.headers.get('content-type')
+      if (contentType && contentType.includes('application/json')) {
+        return await response.json()
+      }
+      
+      return await response.text()
+    } catch (error) {
+      clearTimeout(timeoutId)
+      
+      if (error.name === 'AbortError') {
+        throw new Error('请求超时')
+      }
+      
+      // 处理CORS错误，重新抛出错误让上层处理
+      if (error.toString().includes('CORS') || error.toString().includes('Failed to fetch')) {
+        console.error('CORS错误:', url, error)
+        throw new Error('网络请求失败，请检查网络连接')
+      }
+      
+      throw error
+    }
+  }
+
+  // GET请求
+  get(url, params = {}) {
+    let fullUrl = url.startsWith('http') ? url : `${this.baseURL}${url}`
+    
+    // 统一使用手动构建查询字符串的方式，避免URL对象可能带来的问题
+    const queryString = Object.entries(params)
+      .filter(([_, value]) => value !== undefined && value !== null)
+      .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+      .join('&')
+    
+    fullUrl = queryString ? `${fullUrl}?${queryString}` : fullUrl
+
+    return this.request(fullUrl, {
+      method: 'GET'
+    })
+  }
+
+  // POST请求
+  post(url, data = {}) {
+    return this.request(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...this.headers
+      },
+      body: JSON.stringify(data)
+    })
+  }
+
+  // PUT请求
+  put(url, data = {}) {
+    return this.request(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        ...this.headers
+      },
+      body: JSON.stringify(data)
+    })
+  }
+
+  // DELETE请求
+  delete(url) {
+    return this.request(url, {
+      method: 'DELETE'
+    })
+  }
+}
+
+// 创建默认实例
+export const apiClient = new ApiClient()
+
+// 导出类以便创建自定义实例
+export { ApiClient }
\ No newline at end of file
diff --git a/src/services/musicApi.js b/src/services/musicApi.js
new file mode 100644
index 0000000000000000000000000000000000000000..c07d6bc844b50df7b5ec0c377e2a43581f31dc9f
--- /dev/null
+++ b/src/services/musicApi.js
@@ -0,0 +1,346 @@
+// 音乐API接口配置 - 完全按照参考项目实现
+import { apiClient } from './api.js'
+
+// API基础地址 - 直接请求API
+const API_BASE = 'https://music-api.gdstudio.xyz/api.php'
+
+// 音乐平台映射
+export const MUSIC_SOURCES = [
+  { code: 'netease', name: '网易云音乐', priority: 1 },
+  { code: 'tencent', name: 'QQ音乐', priority: 2 },
+  { code: 'kuwo', name: '酷我音乐', priority: 3 },
+  { code: 'joox', name: 'JOOX', priority: 4 },
+  { code: 'kugou', name: '酷狗音乐', priority: 5 },
+  { code: 'migu', name: '咪咕音乐', priority: 6 },
+  { code: 'deezer', name: 'Deezer', priority: 7 },
+  { code: 'spotify', name: 'Spotify', priority: 8 },
+  { code: 'apple', name: 'Apple Music', priority: 9 },
+  { code: 'ytmusic', name: 'YouTube Music', priority: 10 },
+  { code: 'tidal', name: 'TIDAL', priority: 11 },
+  { code: 'qobuz', name: 'Qobuz', priority: 12 },
+  { code: 'ximalaya', name: '喜马拉雅', priority: 13 }
+]
+
+// 音质选项
+export const QUALITY_OPTIONS = [
+  { value: '128', label: '标准 128K' },
+  { value: '192', label: '较高 192K' },
+  { value: '320', label: '高音质 320K' },
+  { value: '740', label: '无损 FLAC' },
+  { value: '999', label: 'Hi-Res' }
+]
+
+class MusicApi {
+  constructor() {
+    this.baseUrl = API_BASE
+  }
+
+  // 构建请求URL - 严格按照demo.html中的参数顺序
+  buildUrl(params) {
+    // 确保参数顺序：types, source, id/name, 其他参数
+    const orderedKeys = ['types', 'source', 'id', 'name', 'br', 'size', 'count', 'pages']
+    const orderedParams = {}
+    
+    // 按照指定顺序添加参数
+    orderedKeys.forEach(key => {
+      if (params[key] !== undefined && params[key] !== null) {
+        orderedParams[key] = params[key]
+      }
+    })
+    
+    // 添加其他参数
+    Object.keys(params).forEach(key => {
+      if (!(key in orderedParams)) {
+        orderedParams[key] = params[key]
+      }
+    })
+    
+    const queryString = Object.entries(orderedParams)
+      .filter(([_, value]) => value !== undefined && value !== null)
+      .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+      .join('&')
+    
+    return `${this.baseUrl}?${queryString}`
+  }
+
+  // 搜索音乐 - 按照demo.html的格式处理响应
+  async searchMusic(keyword, source = 'netease', count = 30, page = 1) {
+    try {
+      const params = {
+        types: 'search',
+        source: source,
+        name: keyword,
+        count: count,
+        pages: page
+      }
+      
+      const url = this.buildUrl(params)
+      const response = await apiClient.get(url)
+      
+      // 搜索API直接返回数组
+      if (Array.isArray(response)) {
+        return response.map((song, index) => ({
+          id: song.id || song.songmid || song.hash || index,
+          name: song.name || song.songname || song.title || '未知歌曲',
+          artist: song.artist || song.singer || song.artists || '未知艺术家',
+          album: song.album || song.albumname || song.title || '未知专辑',
+          pic_id: song.pic_id || song.albumId || song.albumid || '',
+          lyric_id: song.lyric_id || song.id || '',
+          source: source,
+          duration: song.duration || song.time || 0
+        }))
+      }
+      
+      return []
+    } catch (error) {
+      console.error('搜索音乐失败:', error)
+      throw error
+    }
+  }
+
+  // 获取音乐播放URL
+  async getMusicUrl(source, id, quality = '320') {
+    try {
+      const params = {
+        types: 'url',
+        source: source,
+        id: id,
+        br: quality
+      }
+      
+      const url = this.buildUrl(params)
+      const response = await apiClient.get(url)
+      
+      if (response && response.url) {
+        return response.url
+      }
+      
+      console.warn('未获取到播放链接:', response)
+      return null
+    } catch (error) {
+      console.error('获取播放链接失败:', error)
+      return null
+    }
+  }
+
+  // 获取歌词
+  async getLyrics(source, id) {
+    try {
+      const params = {
+        types: 'lyric',
+        source: source,
+        id: id
+      }
+      
+      const url = this.buildUrl(params)
+      const response = await apiClient.get(url)
+      
+      // 歌词API返回包含lyric和tlyric字段的对象
+      if (response && (response.lyric !== undefined || response.tlyric !== undefined)) {
+        return {
+          lyric: response.lyric || '',
+          tlyric: response.tlyric || ''
+        }
+      }
+      
+      return { lyric: '', tlyric: '' }
+    } catch (error) {
+      console.error('获取歌词失败:', error)
+      return { lyric: '', tlyric: '' }
+    }
+  }
+
+  // 获取专辑封面
+  async getAlbumCover(source, picId, size = 300) {
+    if (!picId) {
+      return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIHJ4PSIxMiIgZmlsbD0iIzE4MTgxOCIvPjxwYXRoIGQ9Ik0xODcgMTUwQzE4NyAxNzEuNTM5IDE2OS41MzkgMTg5IDE0OCAxODlDMTI2LjQ2MSAxODkgMTA5IDE3MS41MzkgMTA5IDE1MEMxMDkgMTI4LjQ2MSAxMjYuNDYxIDExMSAxNDggMTExQzE2OS41MzkgMTExIDE4NyAxMjguNDYxIDE4NyAxNTBaIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iNiIvPjxjaXJjbGUgY3g9IjE0OCIgY3k9IjE1MCIgcj0iNiIgZmlsbD0iIzY2NjY2NiIvPjwvc3ZnPgo='
+    }
+
+    try {
+      const params = {
+        types: 'pic',
+        source: source,
+        id: picId,
+        size: size
+      }
+      
+      const url = this.buildUrl(params)
+      const response = await apiClient.get(url)
+      
+      if (response && response.url) {
+        return response.url
+      }
+    } catch (error) {
+      console.error('获取专辑图失败:', error)
+    }
+    
+    return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIHJ4PSIxMiIgZmlsbD0iIzE4MTgxOCIvPjxwYXRoIGQ9Ik0xODcgMTUwQzE4NyAxNzEuNTM5IDE2OS41MzkgMTg5IDE0OCAxODlDMTI2LjQ2MSAxODkgMTA5IDE3MS41MzkgMTA5IDE1MEMxMDkgMTI4LjQ2MSAxMjYuNDYxIDExMSAxNDggMTExQzE2OS41MzkgMTExIDE4NyAxMjguNDYxIDE4NyAxNTBaIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iNiIvPjxjaXJjbGUgY3g9IjE0OCIgY3k9IjE1MCIgcj0iNiIgZmlsbD0iIzY2NjY2NiIvPjwvc3ZnPgo='
+  }
+
+  // 批量搜索多个平台
+  async searchMultiPlatform(keyword, sources = ['netease', 'tencent', 'kuwo'], count = 10) {
+    try {
+      const promises = sources.map(source => 
+        this.searchMusic(keyword, source, count, 1).catch(err => {
+          console.warn(`${source} 搜索失败:`, err)
+          return []
+        })
+      )
+
+      const results = await Promise.all(promises)
+      
+      // 合并结果并去重
+      const allSongs = []
+      const songMap = new Map()
+
+      results.forEach(result => {
+        if (Array.isArray(result)) {
+          result.forEach(song => {
+            const key = `${song.name}-${song.artist}`.toLowerCase()
+            if (!songMap.has(key)) {
+              songMap.set(key, song)
+              allSongs.push(song)
+            }
+          })
+        }
+      })
+
+      return allSongs.slice(0, count)
+    } catch (error) {
+      console.error('多平台搜索失败:', error)
+      return []
+    }
+  }
+
+  // 检查API状态
+  async checkApiStatus() {
+    try {
+      // API没有专门的状态检查端点，直接返回true
+      return true
+    } catch (error) {
+      console.error('API状态检查失败:', error)
+      return false
+    }
+  }
+
+  // 解析歌词
+  parseLyrics(lrcData) {
+    if (!lrcData) {
+      return { lyrics: [], hasTranslation: false }
+    }
+
+    const lines = lrcData.split('\n')
+    const lyrics = []
+    let hasTranslation = false
+
+    lines.forEach(line => {
+      const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/)
+      if (match) {
+        const minutes = parseInt(match[1])
+        const seconds = parseInt(match[2])
+        const milliseconds = parseInt(match[3].padEnd(3, '0'))
+        const text = match[4].trim()
+        
+        if (text) {
+          const time = minutes * 60 + seconds + milliseconds / 1000
+          
+          // 检查是否有翻译
+          if (text.includes('：') || text.includes(':')) {
+            hasTranslation = true
+          }
+          
+          lyrics.push({
+            time,
+            text
+          })
+        }
+      }
+    })
+
+    return {
+      lyrics: lyrics.sort((a, b) => a.time - b.time),
+      hasTranslation
+    }
+  }
+}
+
+// 工具函数
+export const utils = {
+  // 格式化艺术家名称
+  formatArtist(artist) {
+    if (!artist) return '未知艺术家'
+    if (Array.isArray(artist)) {
+      return artist.join(', ')
+    }
+    if (typeof artist === 'string') {
+      return artist.replace(/;|；/g, ', ')
+    }
+    return String(artist)
+  },
+
+  // 格式化时间（秒转分:秒）
+  formatTime(seconds) {
+    if (!seconds || seconds < 0) return '0:00'
+    const minutes = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${minutes}:${secs.toString().padStart(2, '0')}`
+  },
+
+  // 格式化持续时间
+  formatDuration(seconds) {
+    return this.formatTime(seconds)
+  },
+
+  // 格式化日期
+  formatDate(date) {
+    if (!date) return ''
+    const d = new Date(date)
+    if (isNaN(d.getTime())) return ''
+    
+    const now = new Date()
+    const diff = now.getTime() - d.getTime()
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+    
+    if (days === 0) {
+      return '今天'
+    } else if (days === 1) {
+      return '昨天'
+    } else if (days < 7) {
+      return `${days}天前`
+    } else {
+      return d.toLocaleDateString('zh-CN')
+    }
+  },
+
+  // 防抖函数
+  debounce(func, wait) {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+}
+
+// 创建单例
+const musicApi = new MusicApi()
+
+// 导出常用方法
+export const {
+  searchMusic,
+  getMusicUrl, 
+  getLyrics,
+  getAlbumCover,
+  searchMultiPlatform,
+  checkApiStatus
+} = musicApi
+
+// 也直接导出debounce方法到musicApi对象上
+musicApi.debounce = utils.debounce
+
+export { musicApi }
+export default musicApi
\ No newline at end of file
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba5723c5b89b35d011b9558d025bbcde402..0000000000000000000000000000000000000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/stores/favorites.js b/src/stores/favorites.js
new file mode 100644
index 0000000000000000000000000000000000000000..32a4eb300c9b6a41718f2a681e2cf4294276f09b
--- /dev/null
+++ b/src/stores/favorites.js
@@ -0,0 +1,155 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useFavoritesStore = defineStore('favorites', () => {
+  // 状态
+  const favorites = ref([])
+  const playHistory = ref([])
+  
+  // 收藏管理
+  const isFavorite = (song) => {
+    return favorites.value.some(fav => fav.id === song.id && fav.source === song.source)
+  }
+  
+  const addToFavorites = (song) => {
+    if (!isFavorite(song)) {
+      const favoriteItem = {
+        ...song,
+        favoriteTime: Date.now()
+      }
+      favorites.value.unshift(favoriteItem)
+      saveFavorites()
+      return true
+    }
+    return false
+  }
+  
+  const removeFromFavorites = (song) => {
+    const index = favorites.value.findIndex(fav => fav.id === song.id && fav.source === song.source)
+    if (index >= 0) {
+      favorites.value.splice(index, 1)
+      saveFavorites()
+      return true
+    }
+    return false
+  }
+  
+  const toggleFavorite = (song) => {
+    if (isFavorite(song)) {
+      removeFromFavorites(song)
+      return false
+    } else {
+      addToFavorites(song)
+      return true
+    }
+  }
+  
+  const clearFavorites = () => {
+    favorites.value = []
+    localStorage.removeItem('vue-music-favorites')
+  }
+  
+  // 播放历史管理
+  const addToHistory = (song) => {
+    if (!song) return
+    
+    // 移除已存在的记录
+    playHistory.value = playHistory.value.filter(item => 
+      !(item.id === song.id && item.source === song.source)
+    )
+    
+    // 添加到开头
+    const historyItem = {
+      ...song,
+      playTime: Date.now(),
+      playCount: 1
+    }
+    
+    // 检查是否已存在，如果存在则增加播放次数
+    const existingIndex = playHistory.value.findIndex(item => 
+      item.id === song.id && item.source === song.source
+    )
+    
+    if (existingIndex >= 0) {
+      historyItem.playCount = playHistory.value[existingIndex].playCount + 1
+    }
+    
+    playHistory.value.unshift(historyItem)
+    
+    // 限制历史记录数量
+    playHistory.value = playHistory.value.slice(0, 100)
+    
+    savePlayHistory()
+  }
+  
+  const clearHistory = () => {
+    playHistory.value = []
+    localStorage.removeItem('vue-music-play-history')
+  }
+  
+  const getRecentlyPlayed = (limit = 20) => {
+    return playHistory.value.slice(0, limit)
+  }
+  
+  const getMostPlayed = (limit = 20) => {
+    return [...playHistory.value]
+      .sort((a, b) => b.playCount - a.playCount)
+      .slice(0, limit)
+  }
+  
+  // 本地存储
+  const saveFavorites = () => {
+    localStorage.setItem('vue-music-favorites', JSON.stringify(favorites.value))
+  }
+  
+  const loadFavorites = () => {
+    try {
+      const saved = localStorage.getItem('vue-music-favorites')
+      if (saved) {
+        favorites.value = JSON.parse(saved) || []
+      }
+    } catch (error) {
+      console.error('加载收藏列表失败:', error)
+    }
+  }
+  
+  const savePlayHistory = () => {
+    localStorage.setItem('vue-music-play-history', JSON.stringify(playHistory.value))
+  }
+  
+  const loadPlayHistory = () => {
+    try {
+      const saved = localStorage.getItem('vue-music-play-history')
+      if (saved) {
+        playHistory.value = JSON.parse(saved) || []
+      }
+    } catch (error) {
+      console.error('加载播放历史失败:', error)
+    }
+  }
+  
+  return {
+    // 状态
+    favorites,
+    playHistory,
+    
+    // 收藏管理
+    isFavorite,
+    addToFavorites,
+    removeFromFavorites,
+    toggleFavorite,
+    clearFavorites,
+    
+    // 历史管理
+    addToHistory,
+    clearHistory,
+    getRecentlyPlayed,
+    getMostPlayed,
+    
+    // 存储
+    saveFavorites,
+    loadFavorites,
+    savePlayHistory,
+    loadPlayHistory
+  }
+})
\ No newline at end of file
diff --git a/src/stores/history.js b/src/stores/history.js
new file mode 100644
index 0000000000000000000000000000000000000000..4e6b8614ce6b0d70504966968819bca40a07e572
--- /dev/null
+++ b/src/stores/history.js
@@ -0,0 +1,276 @@
+import { defineStore } from 'pinia'
+
+export const useHistoryStore = defineStore('history', {
+  state: () => ({
+    history: [], // 播放历史记录
+    playCount: {}, // 歌曲播放次数统计 { songId: count }
+    maxHistorySize: 1000 // 最大历史记录数量
+  }),
+
+  getters: {
+    // 总播放时长（秒）
+    totalPlayTime: (state) => {
+      return state.history.reduce((total, item) => {
+        return total + (item.playTime || 0)
+      }, 0)
+    },
+
+    // 最近播放的歌曲（去重）
+    recentSongs: (state) => {
+      const songMap = new Map()
+      const recent = []
+      
+      // 从最新的开始遍历，保持最新的记录
+      for (let i = state.history.length - 1; i >= 0; i--) {
+        const item = state.history[i]
+        if (!songMap.has(item.song.id)) {
+          songMap.set(item.song.id, true)
+          recent.push(item)
+          if (recent.length >= 50) break // 最多返回50首
+        }
+      }
+      
+      return recent
+    },
+
+    // 按日期分组的历史记录
+    groupedByDate: (state) => {
+      const groups = {}
+      state.history.forEach(item => {
+        const date = new Date(item.timestamp).toDateString()
+        if (!groups[date]) {
+          groups[date] = []
+        }
+        groups[date].push(item)
+      })
+      return groups
+    },
+
+    // 播放统计
+    playStats: (state) => {
+      const stats = {
+        totalPlays: state.history.length,
+        uniqueSongs: new Set(state.history.map(item => item.song.id)).size,
+        totalDuration: 0,
+        topArtists: {},
+        topSongs: {}
+      }
+
+      state.history.forEach(item => {
+        stats.totalDuration += item.playTime || 0
+        
+        // 统计艺术家
+        const artist = item.song.artist
+        stats.topArtists[artist] = (stats.topArtists[artist] || 0) + 1
+        
+        // 统计歌曲
+        const songKey = `${item.song.artist} - ${item.song.name}`
+        stats.topSongs[songKey] = (stats.topSongs[songKey] || 0) + 1
+      })
+
+      return stats
+    },
+
+    // 获取单首歌曲播放次数
+    getPlayCount: (state) => (songId) => {
+      return state.playCount[songId] || 0
+    },
+
+    // 获取热门歌曲（按播放次数排序）
+    topPlayedSongs: (state) => {
+      return Object.entries(state.playCount)
+        .sort(([, a], [, b]) => b - a)
+        .slice(0, 50)
+        .map(([songId, count]) => ({
+          songId,
+          count,
+          song: state.history.find(item => item.song.id === songId)?.song
+        }))
+        .filter(item => item.song) // 过滤掉找不到歌曲信息的项
+    }
+  },
+
+  actions: {
+    // 添加播放记录
+    addToHistory(song, playTime = 0) {
+      const historyItem = {
+        song: { ...song },
+        timestamp: Date.now(),
+        playTime, // 播放时长（秒）
+        source: song.source || 'unknown'
+      }
+
+      // 添加到历史记录开头
+      this.history.unshift(historyItem)
+
+      // 更新播放次数
+      const songId = song.id
+      this.playCount[songId] = (this.playCount[songId] || 0) + 1
+
+      // 限制历史记录数量
+      if (this.history.length > this.maxHistorySize) {
+        this.history = this.history.slice(0, this.maxHistorySize)
+      }
+
+      this.saveHistory()
+    },
+
+    // 移除历史记录
+    removeFromHistory(index) {
+      if (index >= 0 && index < this.history.length) {
+        const removedItem = this.history.splice(index, 1)[0]
+        
+        // 更新播放次数（如果这是该歌曲的最后一次播放记录，则不减少计数）
+        // 这里选择保持播放次数不变，因为这反映了历史播放情况
+        
+        this.saveHistory()
+      }
+    },
+
+    // 清空历史记录
+    clearHistory() {
+      this.history = []
+      this.playCount = {} // 同时清空播放次数
+      this.saveHistory()
+    },
+
+    // 按日期清理历史记录
+    clearHistoryBefore(date) {
+      const targetTime = new Date(date).getTime()
+      this.history = this.history.filter(item => item.timestamp >= targetTime)
+      this.saveHistory()
+    },
+
+    // 搜索历史记录
+    searchHistory(keyword) {
+      if (!keyword.trim()) return this.history
+
+      const lowerKeyword = keyword.toLowerCase()
+      return this.history.filter(item => 
+        item.song.name.toLowerCase().includes(lowerKeyword) ||
+        item.song.artist.toLowerCase().includes(lowerKeyword) ||
+        (item.song.album && item.song.album.toLowerCase().includes(lowerKeyword))
+      )
+    },
+
+    // 保存到本地存储
+    saveHistory() {
+      try {
+        localStorage.setItem('music-history', JSON.stringify({
+          history: this.history,
+          playCount: this.playCount,
+          lastUpdated: Date.now()
+        }))
+      } catch (error) {
+        console.error('保存播放历史失败:', error)
+      }
+    },
+
+    // 从本地存储加载
+    async loadHistory() {
+      try {
+        const saved = localStorage.getItem('music-history')
+        if (saved) {
+          const data = JSON.parse(saved)
+          this.history = data.history || []
+          this.playCount = data.playCount || {}
+          
+          // 清理过期的历史记录（超过30天）
+          const thirtyDaysAgo = Date.now() - (30 * 24 * 60 * 60 * 1000)
+          const originalLength = this.history.length
+          this.history = this.history.filter(item => item.timestamp > thirtyDaysAgo)
+          
+          // 如果清理了历史记录，重新计算播放次数
+          if (originalLength !== this.history.length) {
+            this.playCount = {}
+            this.history.forEach(item => {
+              const songId = item.song.id
+              this.playCount[songId] = (this.playCount[songId] || 0) + 1
+            })
+            this.saveHistory() // 保存清理后的记录
+          }
+        }
+      } catch (error) {
+        console.error('加载播放历史失败:', error)
+        this.history = []
+        this.playCount = {}
+      }
+    },
+
+    // 导出历史记录
+    exportHistory() {
+      try {
+        const data = {
+          history: this.history,
+          playCount: this.playCount,
+          stats: this.playStats,
+          exportTime: Date.now(),
+          version: '1.0'
+        }
+        
+        const blob = new Blob([JSON.stringify(data, null, 2)], {
+          type: 'application/json'
+        })
+        
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `music-history-${new Date().toISOString().split('T')[0]}.json`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+        
+        return true
+      } catch (error) {
+        console.error('导出播放历史失败:', error)
+        return false
+      }
+    },
+
+    // 导入历史记录
+    async importHistory(file) {
+      try {
+        const text = await file.text()
+        const data = JSON.parse(text)
+        
+        if (data.history && Array.isArray(data.history)) {
+          // 合并历史记录，去重
+          const existingIds = new Set(
+            this.history.map(item => `${item.song.id}-${item.timestamp}`)
+          )
+          
+          const newItems = data.history.filter(item => 
+            !existingIds.has(`${item.song.id}-${item.timestamp}`)
+          )
+          
+          this.history = [...this.history, ...newItems]
+            .sort((a, b) => b.timestamp - a.timestamp)
+            .slice(0, this.maxHistorySize)
+          
+          // 合并播放次数
+          if (data.playCount) {
+            Object.entries(data.playCount).forEach(([songId, count]) => {
+              this.playCount[songId] = (this.playCount[songId] || 0) + count
+            })
+          } else {
+            // 如果导入的数据没有播放次数，重新计算
+            this.playCount = {}
+            this.history.forEach(item => {
+              const songId = item.song.id
+              this.playCount[songId] = (this.playCount[songId] || 0) + 1
+            })
+          }
+          
+          this.saveHistory()
+          return true
+        }
+        
+        return false
+      } catch (error) {
+        console.error('导入播放历史失败:', error)
+        return false
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/stores/player.js b/src/stores/player.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad5498fa558e302ca4e9f0799b8eb02e8bbbf9a6
--- /dev/null
+++ b/src/stores/player.js
@@ -0,0 +1,609 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { musicApi } from '@/services/musicApi'
+
+export const usePlayerStore = defineStore('player', () => {
+  // 状态
+  const currentSong = ref(null)
+  const playlist = ref([])
+  const currentIndex = ref(-1)
+  const isPlaying = ref(false)
+  const currentTime = ref(0)
+  const duration = ref(0)
+  const volume = ref(80)
+  const playMode = ref('list') // 'list', 'random', 'single'
+  const audioSrc = ref('')
+  const muted = ref(false)
+  const lastVolume = ref(80) // 记住静音前的音量
+  const cachedCovers = ref(new Map()) // 封面缓存
+  const cachedLyrics = ref(new Map()) // 歌词缓存
+  const audioElement = ref(null) // 添加音频元素引用
+  const isManualSeeking = ref(false) // 标志是否正在手动拖动进度条
+  
+  // 计算属性
+  const hasPrevious = computed(() => currentIndex.value > 0)
+  const hasNext = computed(() => currentIndex.value < playlist.value.length - 1)
+  const progress = computed(() => {
+    return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
+  })
+  const effectiveVolume = computed(() => muted.value ? 0 : volume.value)
+  const canRestore = computed(() => currentSong.value && audioSrc.value)
+  
+  // 方法
+  const setCurrentSong = (song, index = -1, restoreProgress = false) => {
+    currentSong.value = song
+    if (index >= 0) {
+      currentIndex.value = index
+    } else {
+      // 在播放列表中查找歌曲
+      const foundIndex = playlist.value.findIndex(s => s.id === song.id && s.source === song.source)
+      currentIndex.value = foundIndex >= 0 ? foundIndex : -1
+    }
+    
+    // 默认重置播放时间为0，除非明确要求恢复进度
+    if (!restoreProgress) {
+      currentTime.value = 0
+    }
+    
+    savePlayerState()
+  }
+  
+  const setPlaylist = (songs, startIndex = 0) => {
+    playlist.value = songs
+    if (songs.length > 0 && startIndex >= 0 && startIndex < songs.length) {
+      setCurrentSong(songs[startIndex], startIndex)
+    }
+    savePlayerState()
+  }
+  
+  const addToPlaylist = (song) => {
+    const exists = playlist.value.some(s => s.id === song.id && s.source === song.source)
+    if (!exists) {
+      playlist.value.push(song)
+      savePlayerState()
+    }
+  }
+  
+  const removeFromPlaylist = (index) => {
+    if (index >= 0 && index < playlist.value.length) {
+      playlist.value.splice(index, 1)
+      if (currentIndex.value > index) {
+        currentIndex.value--
+      } else if (currentIndex.value === index) {
+        if (playlist.value.length === 0) {
+          currentSong.value = null
+          currentIndex.value = -1
+        } else {
+          const newIndex = Math.min(currentIndex.value, playlist.value.length - 1)
+          setCurrentSong(playlist.value[newIndex], newIndex)
+        }
+      }
+      savePlayerState()
+    }
+  }
+  
+  const setPlayMode = (mode) => {
+    playMode.value = mode
+    savePlayerState()
+  }
+  
+  const setVolume = (vol) => {
+    const newVolume = Math.max(0, Math.min(100, vol))
+    volume.value = newVolume
+    if (newVolume > 0) {
+      muted.value = false
+      lastVolume.value = newVolume
+    }
+    savePlayerState()
+  }
+
+  const toggleMute = () => {
+    if (muted.value) {
+      muted.value = false
+      volume.value = lastVolume.value
+    } else {
+      muted.value = true
+      lastVolume.value = volume.value
+      volume.value = 0
+    }
+    savePlayerState()
+  }
+
+  const increaseVolume = (step = 5) => {
+    const newVolume = Math.min(100, volume.value + step)
+    setVolume(newVolume)
+  }
+
+  const decreaseVolume = (step = 5) => {
+    const newVolume = Math.max(0, volume.value - step)
+    setVolume(newVolume)
+  }
+  
+  const setPlayingState = (playing) => {
+    isPlaying.value = playing
+  }
+  
+  const setCurrentTime = (time) => {
+    // 如果正在手动拖动，忽略来自音频元素的时间更新
+    if (isManualSeeking.value) {
+      return
+    }
+    currentTime.value = time
+  }
+  
+  const setDuration = (dur) => {
+    duration.value = dur
+  }
+  
+  const setAudioSrc = (src) => {
+    audioSrc.value = src
+  }
+  
+  const setAudioElement = (element) => {
+    audioElement.value = element
+  }
+  
+  const seekTo = (time) => {
+    if (time >= 0 && time <= duration.value && isFinite(time)) {
+      // 设置手动拖动标志
+      isManualSeeking.value = true
+      
+      // 直接更新store中的时间
+      currentTime.value = time
+      
+      // 如果有音频元素引用，直接设置currentTime
+      if (audioElement.value) {
+        audioElement.value.currentTime = time
+        
+        // 如果当前没有播放，且有音频源，尝试播放
+        if (!isPlaying.value && audioSrc.value) {
+          audioElement.value.play().then(() => {
+            setPlayingState(true)
+            console.log('拖动进度条后开始播放:', time)
+          }).catch(error => {
+            console.log('自动播放被阻止:', error)
+          })
+        }
+      }
+      
+      // 延迟重置标志，避免立即被timeupdate覆盖
+      setTimeout(() => {
+        isManualSeeking.value = false
+      }, 200)
+      
+      return true
+    }
+    return false
+  }
+  
+  // 播放控制方法
+  const togglePlay = () => {
+    setPlayingState(!isPlaying.value)
+    savePlayerState()
+  }
+  
+  const previous = () => {
+    const prevSong = playPrevious()
+    return prevSong
+  }
+  
+  const next = () => {
+    const nextSong = playNext()
+    return nextSong
+  }
+  
+  const togglePlayMode = () => {
+    const modes = ['list', 'random', 'single']
+    const currentIndex = modes.indexOf(playMode.value)
+    const nextIndex = (currentIndex + 1) % modes.length
+    setPlayMode(modes[nextIndex])
+  }
+  
+  const playSong = async (song, index = -1) => {
+    setCurrentSong(song, index, false) // 不恢复进度，从0开始播放
+    setPlayingState(false) // 先暂停，等获取到URL后再播放
+    
+    // 获取音频URL
+    try {
+      const audioUrl = await getAudioUrl(song)
+      if (audioUrl) {
+        setAudioSrc(audioUrl)
+        setPlayingState(true)
+      }
+    } catch (error) {
+      console.error('播放歌曲失败:', error)
+    }
+  }
+  
+  const getAudioUrl = async (song) => {
+    try {
+      const result = await musicApi.getMusicUrl(song.source, song.id, '320')
+      return result?.url || null
+    } catch (error) {
+      console.error('获取音频URL失败:', error)
+      return null
+    }
+  }
+  
+  const changeQuality = async (quality) => {
+    // 音质切换逻辑
+    if (currentSong.value) {
+      const newUrl = await getAudioUrl(currentSong.value)
+      if (newUrl) {
+        setAudioSrc(newUrl)
+      }
+    }
+  }
+  
+  // 播放控制
+  const playNext = () => {
+    if (!playlist.value.length) return null
+    
+    let nextIndex = currentIndex.value
+    
+    switch (playMode.value) {
+      case 'random':
+        nextIndex = Math.floor(Math.random() * playlist.value.length)
+        break
+      case 'single':
+        // 单曲循环，保持当前歌曲
+        break
+      case 'list':
+      default:
+        nextIndex = hasNext.value ? currentIndex.value + 1 : 0
+        break
+    }
+    
+    if (nextIndex < playlist.value.length) {
+      setCurrentSong(playlist.value[nextIndex], nextIndex, false) // 不恢复进度
+      return playlist.value[nextIndex]
+    }
+    return null
+  }
+  
+  const playPrevious = () => {
+    if (!playlist.value.length) return null
+    
+    let prevIndex = currentIndex.value
+    
+    switch (playMode.value) {
+      case 'random':
+        prevIndex = Math.floor(Math.random() * playlist.value.length)
+        break
+      case 'single':
+        // 单曲循环，保持当前歌曲
+        break
+      case 'list':
+      default:
+        prevIndex = hasPrevious.value ? currentIndex.value - 1 : playlist.value.length - 1
+        break
+    }
+    
+    if (prevIndex >= 0 && prevIndex < playlist.value.length) {
+      setCurrentSong(playlist.value[prevIndex], prevIndex, false) // 不恢复进度
+      return playlist.value[prevIndex]
+    }
+    return null
+  }
+  
+  // 资源缓存管理
+  // 使用 Map 来存储正在进行的请求，避免重复请求
+  const pendingRequests = new Map()
+  
+  const getCachedCover = (song, size = 300) => {
+    if (!song) return null
+    // 检查多种可能的图片ID字段（与MiniPlayer和FullPlayerPage保持一致）
+    const picId = song.pic_id || song.picId || song.albumId
+    if (!picId) return null
+    const key = `${song.source}-${picId}-${size}`
+    const cached = cachedCovers.value.get(key)
+    return cached || song.cover || null
+  }
+  
+  const setCachedCover = (song, coverUrl, size = 300) => {
+    if (!song || !coverUrl) return
+    // 检查多种可能的图片ID字段（与MiniPlayer和FullPlayerPage保持一致）
+    const picId = song.pic_id || song.picId || song.albumId
+    if (!picId) return
+    const key = `${song.source}-${picId}-${size}`
+    cachedCovers.value.set(key, coverUrl)
+    // 同时更新歌曲对象中的cover字段
+    if (song) {
+      song.cover = coverUrl
+    }
+  }
+  
+  // 新增：获取专辑封面（带请求去重）
+  const getAlbumCover = async (song, size = 300) => {
+    if (!song) return null
+    
+    // 检查多种可能的图片ID字段
+    const picId = song.pic_id || song.picId || song.albumId
+    if (!picId) return null
+    
+    const key = `${song.source}-${picId}-${size}`
+    
+    // 先检查缓存
+    const cached = getCachedCover(song, size)
+    if (cached) {
+      return cached
+    }
+    
+    // 检查是否有正在进行的相同请求
+    if (pendingRequests.has(key)) {
+      return pendingRequests.get(key)
+    }
+    
+    // 创建新的请求
+    const request = musicApi.getAlbumCover(song.source, picId, size)
+    pendingRequests.set(key, request)
+    
+    try {
+      const coverUrl = await request
+      if (coverUrl) {
+        // 缓存结果
+        setCachedCover(song, coverUrl, size)
+      }
+      return coverUrl
+    } catch (error) {
+      console.error('获取专辑封面失败:', error)
+      return null
+    } finally {
+      // 清除正在进行的请求
+      pendingRequests.delete(key)
+    }
+  }
+
+  // 新增：获取歌词（带请求去重）
+  const getLyricsWithDedup = async (song) => {
+    if (!song) return null
+    
+    const key = `lyrics-${song.source}-${song.lyric_id || song.id}`
+    
+    // 先检查缓存
+    const cached = getCachedLyrics(song)
+    if (cached) {
+      return cached
+    }
+    
+    // 检查是否有正在进行的相同请求
+    if (pendingRequests.has(key)) {
+      return pendingRequests.get(key)
+    }
+    
+    // 创建新的请求
+    const request = musicApi.getLyrics(song.source, song.lyric_id || song.id)
+    pendingRequests.set(key, request)
+    
+    try {
+      const lyricsData = await request
+      if (lyricsData) {
+        // 缓存结果
+        setCachedLyrics(song, lyricsData)
+      }
+      return lyricsData
+    } catch (error) {
+      console.error('获取歌词失败:', error)
+      return { lyric: '', tlyric: '' }
+    } finally {
+      // 清除正在进行的请求
+      pendingRequests.delete(key)
+    }
+  }
+  
+  const getCachedLyrics = (song) => {
+    if (!song) return null
+    const key = `${song.source}-${song.lyric_id || song.id}`
+    return cachedLyrics.value.get(key) || null
+  }
+  
+  const setCachedLyrics = (song, lyricsData) => {
+    if (!song || !lyricsData) return
+    const key = `${song.source}-${song.lyric_id || song.id}`
+    cachedLyrics.value.set(key, lyricsData)
+  }
+  
+  const clearResourceCache = () => {
+    cachedCovers.value.clear()
+    cachedLyrics.value.clear()
+  }
+  
+  // 本地存储
+  const savePlayerState = () => {
+    // 构建歌曲唯一标识
+    const songKey = currentSong.value ? `${currentSong.value.source}-${currentSong.value.id}` : null
+    
+    const state = {
+      currentSong: currentSong.value,
+      playlist: playlist.value,
+      currentIndex: currentIndex.value,
+      volume: volume.value,
+      playMode: playMode.value,
+      muted: muted.value,
+      lastVolume: lastVolume.value,
+      audioSrc: audioSrc.value,
+      duration: duration.value,
+      timestamp: Date.now(),
+      // 只保存当前正在播放的歌曲进度
+      savedProgress: songKey && currentTime.value > 0 ? {
+        songKey: songKey,
+        currentTime: currentTime.value
+      } : null
+    }
+    
+    try {
+      localStorage.setItem('vue-music-player-state', JSON.stringify(state))
+    } catch (error) {
+      console.error('保存播放器状态失败:', error)
+    }
+  }
+  
+  const loadPlayerState = () => {
+    try {
+      const saved = localStorage.getItem('vue-music-player-state')
+      if (saved) {
+        const state = JSON.parse(saved)
+        
+        // 检查状态是否过期（24小时）
+        const now = Date.now()
+        const maxAge = 24 * 60 * 60 * 1000 // 24小时
+        
+        if (state.timestamp && (now - state.timestamp) > maxAge) {
+          console.log('播放器状态已过期，使用默认设置')
+          clearPlayerState()
+          return false
+        }
+        
+        // 恢复播放器状态
+        volume.value = state.volume !== undefined ? state.volume : 80
+        playMode.value = state.playMode || 'list'
+        muted.value = state.muted || false
+        lastVolume.value = state.lastVolume || 80
+        audioSrc.value = state.audioSrc || ''
+        duration.value = state.duration || 0
+        playlist.value = state.playlist || []
+        currentIndex.value = state.currentIndex !== undefined ? state.currentIndex : -1
+        
+        // 智能恢复播放进度：只有歌曲匹配时才恢复进度
+        if (state.currentSong && state.savedProgress) {
+          const savedSongKey = `${state.currentSong.source}-${state.currentSong.id}`
+          if (state.savedProgress.songKey === savedSongKey && state.savedProgress.currentTime > 0) {
+            currentSong.value = state.currentSong
+            currentTime.value = state.savedProgress.currentTime
+            console.log('恢复播放进度:', state.savedProgress.currentTime)
+          } else {
+            currentSong.value = state.currentSong
+            currentTime.value = 0
+          }
+        } else if (state.currentSong) {
+          currentSong.value = state.currentSong
+          currentTime.value = 0
+        } else {
+          currentSong.value = null
+          currentTime.value = 0
+        }
+        
+        return true
+      }
+    } catch (error) {
+      console.error('加载播放器状态失败:', error)
+    }
+    return false
+  }
+  
+  const clearPlayerState = () => {
+    try {
+      localStorage.removeItem('vue-music-player-state')
+    } catch (error) {
+      console.error('清除播放器状态失败:', error)
+    }
+  }
+  
+  // 恢复播放会话
+  const restorePlaybackSession = async () => {
+    if (!canRestore.value) return false
+    
+    try {
+      // 重新获取音频URL（因为URL可能过期）
+      if (currentSong.value) {
+        const freshUrl = await musicApi.getAudioUrl(
+          currentSong.value.source,
+          currentSong.value.id
+        )
+        
+        if (freshUrl) {
+          audioSrc.value = freshUrl
+          return true
+        }
+      }
+    } catch (error) {
+      console.error('恢复播放会话失败:', error)
+    }
+    return false
+  }
+  
+  // 定期保存播放进度（用于意外关闭恢复）
+  let saveProgressTimer = null
+  
+  const startPeriodicSave = () => {
+    if (saveProgressTimer) {
+      clearInterval(saveProgressTimer)
+    }
+    
+    saveProgressTimer = setInterval(() => {
+      if (isPlaying.value && currentSong.value) {
+        savePlayerState()
+      }
+    }, 10000) // 每10秒保存一次
+  }
+  
+  const stopPeriodicSave = () => {
+    if (saveProgressTimer) {
+      clearInterval(saveProgressTimer)
+      saveProgressTimer = null
+    }
+  }
+  
+  return {
+    // 状态
+    currentSong,
+    playlist,
+    currentIndex,
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    playMode,
+    audioSrc,
+    muted,
+    lastVolume,
+    
+    // 计算属性
+    hasPrevious,
+    hasNext,
+    progress,
+    effectiveVolume,
+    canRestore,
+    
+    // 方法
+    setCurrentSong,
+    setPlaylist,
+    addToPlaylist,
+    removeFromPlaylist,
+    setPlayMode,
+    setVolume,
+    toggleMute,
+    increaseVolume,
+    decreaseVolume,
+    setPlayingState,
+    setCurrentTime,
+    setDuration,
+    setAudioSrc,
+    setAudioElement,
+    seekTo,
+    togglePlay,
+    previous,
+    next,
+    togglePlayMode,
+    playSong,
+    getAudioUrl,
+    changeQuality,
+    playNext,
+    playPrevious,
+    savePlayerState,
+    loadPlayerState,
+    clearPlayerState,
+    restorePlaybackSession,
+    startPeriodicSave,
+    stopPeriodicSave,
+    
+    // 资源缓存管理
+    getCachedCover,
+    setCachedCover,
+    getAlbumCover,  // 添加这一行
+    getLyricsWithDedup,  // 新增歌词去重方法
+    getCachedLyrics,
+    setCachedLyrics,
+    clearResourceCache
+  }
+})
\ No newline at end of file
diff --git a/src/stores/search.js b/src/stores/search.js
new file mode 100644
index 0000000000000000000000000000000000000000..34172b243ed31cde1a6dfbc31c71253ec053b75a
--- /dev/null
+++ b/src/stores/search.js
@@ -0,0 +1,342 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+import { musicApi } from '@/services/musicApi'
+import { useSettingsStore } from '@/stores/settings'
+
+export const useSearchStore = defineStore('search', () => {
+  // 获取设置存储
+  const settingsStore = useSettingsStore()
+  
+  // 状态
+  const keyword = ref('')
+  const currentSource = ref('netease')
+  const searchResults = ref([])
+  const loading = ref(false)
+  const hasMore = ref(true)
+  const currentPage = ref(1)
+  const searchHistory = ref([])
+  const searchSuggestions = ref([])
+  const suggestionLoading = ref(false)
+  
+  // 请求间隔控制
+  let lastRequestTime = 0
+  const REQUEST_INTERVAL = 100 // 100ms间隔
+  
+  // 搜索音乐
+  const searchMusic = async (query, source = null, page = 1, append = false) => {
+    if (!query.trim()) return
+    
+    // 防止重复请求间隔控制
+    const now = Date.now()
+    if (now - lastRequestTime < REQUEST_INTERVAL) {
+      await new Promise(resolve => setTimeout(resolve, REQUEST_INTERVAL - (now - lastRequestTime)))
+    }
+    
+    loading.value = true
+    
+    try {
+      const searchSource = source || currentSource.value
+      const results = await musicApi.searchMusic(query, searchSource, 20, page)
+      
+      // 更新最后请求时间
+      lastRequestTime = Date.now()
+      
+      if (append) {
+        searchResults.value.push(...results)
+      } else {
+        searchResults.value = results
+        keyword.value = query
+        currentPage.value = page
+        
+        // 添加到搜索历史
+        addToHistory(query)
+      }
+      
+      // 检查是否还有更多数据
+      hasMore.value = results.length === 20
+      
+    } catch (error) {
+      console.error('搜索失败:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+  
+  // 加载更多
+  const loadMore = async () => {
+    if (!hasMore.value || loading.value || !keyword.value) return
+    
+    const nextPage = currentPage.value + 1
+    await searchMusic(keyword.value, currentSource.value, nextPage, true)
+    currentPage.value = nextPage
+  }
+  
+  // 设置音乐源
+  const setSource = (source) => {
+    currentSource.value = source
+    // 同步到设置存储
+    settingsStore.updateSetting('defaultSource', source)
+    saveSearchSettings()
+  }
+  
+  // 清空搜索结果
+  const clearResults = () => {
+    searchResults.value = []
+    keyword.value = ''
+    currentPage.value = 1
+    hasMore.value = true
+  }
+  
+  // 搜索历史管理
+  const addToHistory = (query) => {
+    if (!query.trim()) return
+    
+    const trimmedQuery = query.trim()
+    // 移除重复项
+    searchHistory.value = searchHistory.value.filter(item => item !== trimmedQuery)
+    // 添加到开头
+    searchHistory.value.unshift(trimmedQuery)
+    // 限制历史记录数量
+    searchHistory.value = searchHistory.value.slice(0, 10)
+    
+    saveSearchHistory()
+  }
+  
+  const removeFromHistory = (query) => {
+    searchHistory.value = searchHistory.value.filter(item => item !== query)
+    saveSearchHistory()
+  }
+  
+  const clearHistory = () => {
+    searchHistory.value = []
+    localStorage.removeItem('vue-music-search-history')
+  }
+
+  // 搜索建议功能
+  let suggestionTimer = null
+  
+  const getSuggestions = async (query) => {
+    if (!query || query.length < 2) {
+      searchSuggestions.value = []
+      return
+    }
+
+    // 防抖处理
+    if (suggestionTimer) {
+      clearTimeout(suggestionTimer)
+    }
+
+    suggestionTimer = setTimeout(async () => {
+      suggestionLoading.value = true
+      
+      try {
+        // 组合多种建议来源
+        const suggestions = []
+        
+        // 1. 从搜索历史中匹配
+        const historySuggestions = searchHistory.value
+          .filter(item => item.toLowerCase().includes(query.toLowerCase()))
+          .slice(0, 3)
+        suggestions.push(...historySuggestions)
+        
+        // 2. 内置热门搜索词匹配
+        const hotKeywords = [
+          '周杰伦', '邓紫棋', '薛之谦', '陈奕迅', '林俊杰',
+          '王菲', '刘德华', '张学友', 'Beyond', 'Taylor Swift',
+          '稻香', '青花瓷', '演员', '告白气球', '晴天',
+          '夜曲', '七里香', '简单爱', '海阔天空', '真的爱你',
+          '光辞', '山海', '星辰大海', '万疆', '踏山河',
+          '热爱105°C的你', '起风了', '少年', '世界这么大还是遇见你'
+        ]
+        
+        const hotSuggestions = hotKeywords
+          .filter(item => item.toLowerCase().includes(query.toLowerCase()))
+          .slice(0, 2)
+        suggestions.push(...hotSuggestions)
+        
+        // 3. 智能联想词
+        const smartSuggestions = getSmartSuggestions(query)
+        suggestions.push(...smartSuggestions)
+        
+        // 去重并限制数量
+        const uniqueSuggestions = [...new Set(suggestions)].slice(0, 6)
+        searchSuggestions.value = uniqueSuggestions
+        
+      } catch (error) {
+        console.error('获取搜索建议失败:', error)
+        searchSuggestions.value = []
+      } finally {
+        suggestionLoading.value = false
+      }
+    }, 300) // 300ms防抖
+  }
+  
+  const getSmartSuggestions = (query) => {
+    const suggestions = []
+    const lowerQuery = query.toLowerCase()
+    
+    // 智能联想规则
+    const rules = [
+      // 歌手相关
+      { pattern: /周杰/, suggestions: ['周杰伦', '周杰伦 稻香', '周杰伦 青花瓷', '周杰伦 告白气球'] },
+      { pattern: /邓紫/, suggestions: ['邓紫棋', '邓紫棋 泡沫', '邓紫棋 我的秘密', '邓紫棋 光年之外'] },
+      { pattern: /薛之/, suggestions: ['薛之谦', '薛之谦 演员', '薛之谦 认真的雪', '薛之谦 刚好遇见你'] },
+      { pattern: /陈奕/, suggestions: ['陈奕迅', '陈奕迅 十年', '陈奕迅 富士山下', '陈奕迅 K歌之王'] },
+      { pattern: /林俊/, suggestions: ['林俊杰', '林俊杰 江南', '林俊杰 曹操', '林俊杰 修炼爱情'] },
+      
+      // 热门歌曲相关
+      { pattern: /稻香/, suggestions: ['稻香 周杰伦', '稻香 原版'] },
+      { pattern: /青花瓷/, suggestions: ['青花瓷 周杰伦', '青花瓷 纯音乐'] },
+      { pattern: /演员/, suggestions: ['演员 薛之谦', '演员 原唱'] },
+      { pattern: /告白气球/, suggestions: ['告白气球 周杰伦', '告白气球 现场版'] },
+      { pattern: /晴天/, suggestions: ['晴天 周杰伦', '晴天 吉他版'] },
+      
+      // 风格相关
+      { pattern: /古风/, suggestions: ['古风歌曲', '古风音乐', '中国风'] },
+      { pattern: /民谣/, suggestions: ['民谣歌曲', '民谣吉他', '中文民谣'] },
+      { pattern: /摇滚/, suggestions: ['摇滚乐', '中文摇滚', '经典摇滚'] },
+      { pattern: /流行/, suggestions: ['流行歌曲', '流行音乐', '华语流行'] },
+      { pattern: /说唱/, suggestions: ['说唱歌曲', '中文说唱', 'Rap音乐'] }
+    ]
+    
+    for (const rule of rules) {
+      if (rule.pattern.test(lowerQuery)) {
+        suggestions.push(...rule.suggestions.slice(0, 2))
+        break
+      }
+    }
+    
+    // 如果没有匹配的规则，提供一些通用建议
+    if (suggestions.length === 0) {
+      const genericSuggestions = [
+        `${query} 歌曲`,
+        `${query} 现场版`,
+        `${query} 原版`
+      ]
+      suggestions.push(...genericSuggestions.slice(0, 1))
+    }
+    
+    return suggestions
+  }
+  
+  const clearSuggestions = () => {
+    searchSuggestions.value = []
+    if (suggestionTimer) {
+      clearTimeout(suggestionTimer)
+      suggestionTimer = null
+    }
+  }
+  
+  const getSearchSuggestions = (query) => {
+    if (!query || query.length < 2) return []
+    
+    const lowerQuery = query.toLowerCase()
+    return searchHistory.value
+      .filter(item => item.toLowerCase().includes(lowerQuery))
+      .slice(0, 5)
+  }
+  
+  // 获取音乐源名称
+  const getSourceName = (source) => {
+    const sourceMap = {
+      'netease': '网易云音乐',
+      'tencent': 'QQ音乐', 
+      'kugou': '酷狗音乐',
+      'kuwo': '酷我音乐',
+      'migu': '咪咕音乐',
+      'spotify': 'Spotify',
+      'apple': 'Apple Music',
+      'ytmusic': 'YouTube Music',
+      'joox': 'JOOX',
+      'tidal': 'TIDAL',
+      'deezer': 'Deezer',
+      'qobuz': 'Qobuz',
+      'ximalaya': '喜马拉雅FM'
+    }
+    return sourceMap[source] || source
+  }
+  
+  // 本地存储
+  const saveSearchSettings = () => {
+    const settings = {
+      currentSource: currentSource.value
+    }
+    localStorage.setItem('vue-music-search-settings', JSON.stringify(settings))
+  }
+  
+  const loadSearchSettings = () => {
+    try {
+      const saved = localStorage.getItem('vue-music-search-settings')
+      if (saved) {
+        const settings = JSON.parse(saved)
+        currentSource.value = settings.currentSource || 'netease'
+      }
+    } catch (error) {
+      console.error('加载搜索设置失败:', error)
+    }
+  }
+  
+  const saveSearchHistory = () => {
+    localStorage.setItem('vue-music-search-history', JSON.stringify(searchHistory.value))
+  }
+  
+  const loadSearchHistory = () => {
+    try {
+      const saved = localStorage.getItem('vue-music-search-history')
+      if (saved) {
+        searchHistory.value = JSON.parse(saved) || []
+      }
+    } catch (error) {
+      console.error('加载搜索历史失败:', error)
+    }
+  }
+  
+  // 同步设置存储的默认音乐源
+  const syncWithSettings = () => {
+    // 初始化时从设置获取默认音乐源
+    currentSource.value = settingsStore.getSetting('defaultSource') || 'netease'
+    
+    // 监听设置变化，自动同步
+    watch(() => settingsStore.getSetting('defaultSource'), (newSource) => {
+      if (newSource && newSource !== currentSource.value) {
+        currentSource.value = newSource
+        // 清空当前搜索结果，因为音乐源已改变
+        clearResults()
+      }
+    })
+  }
+  
+  // 初始化同步
+  syncWithSettings()
+  
+  return {
+    // 状态
+    keyword,
+    currentSource,
+    searchResults,
+    loading,
+    hasMore,
+    currentPage,
+    searchHistory,
+    searchSuggestions,
+    suggestionLoading,
+    
+    // 方法
+    searchMusic,
+    loadMore,
+    setSource,
+    clearResults,
+    addToHistory,
+    removeFromHistory,
+    clearHistory,
+    getSuggestions,
+    clearSuggestions,
+    getSearchSuggestions,
+    getSourceName,
+    saveSearchSettings,
+    loadSearchSettings,
+    saveSearchHistory,
+    loadSearchHistory
+  }
+})
\ No newline at end of file
diff --git a/src/stores/settings.js b/src/stores/settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..256a62a25ca705e195c8d7758db2533de6323367
--- /dev/null
+++ b/src/stores/settings.js
@@ -0,0 +1,108 @@
+import { defineStore } from 'pinia'
+import { themeManager, THEME_IDS } from '@/styles/themes'
+
+export const useSettingsStore = defineStore('settings', {
+  state: () => ({
+    settings: {
+      // 播放设置 - 根据需求文档
+      defaultQuality: '320', // 默认音质：128/192/320/740/999 (默认：320K)
+      defaultPlayMode: 'list', // 默认播放模式：list/random/single (默认：列表循环)
+      rememberProgress: true, // 记住播放进度：true/false (默认：开启)
+      autoNext: true, // 自动播放下一首
+      fadeEffect: true, // 淡入淡出效果
+      
+      // 搜索设置 - 根据需求文档
+      defaultSource: 'netease', // 默认音乐源：netease (默认：网易云音乐)
+      searchLimit: 20, // 搜索结果数量
+      saveSearchHistory: true, // 搜索历史：true/false (默认：保存)
+      
+      // 外观设置 - 新的多主题系统
+      theme: 'light', // 主题模式：light/dark/orange/pink/purple/blue/green/gold/gray/wechat
+      showLyrics: true, // 显示歌词
+      lyricsFontSize: 18, // 歌词字体大小
+      
+      // 通知设置
+      desktopNotification: true, // 桌面通知
+      mediaSession: true // 媒体控制
+    }
+  }),
+
+  actions: {
+    // 获取设置项
+    getSetting(key) {
+      return this.settings[key]
+    },
+
+    // 更新设置项
+    updateSetting(key, value) {
+      if (key in this.settings) {
+        this.settings[key] = value
+        
+        // 特殊处理主题切换
+        if (key === 'theme') {
+          this.applyTheme(value)
+        }
+        
+        this.saveSettings()
+      }
+    },
+    
+    // 应用主题
+    applyTheme(themeId = null) {
+      const targetTheme = themeId || this.settings.theme || 'light'
+      try {
+        themeManager.applyTheme(targetTheme)
+        
+        // 更新设置状态
+        if (themeId && themeId !== this.settings.theme) {
+          this.settings.theme = targetTheme
+          this.saveSettings()
+        }
+        
+        console.log(`主题已切换到: ${targetTheme}`)
+      } catch (error) {
+        console.error('应用主题失败:', error)
+        // 回退到默认主题
+        if (targetTheme !== 'light') {
+          this.applyTheme('light')
+        }
+      }
+    },
+    
+    // 获取所有可用主题
+    getAvailableThemes() {
+      return themeManager.getAllThemes()
+    },
+
+    // 保存设置到本地存储
+    saveSettings() {
+      try {
+        localStorage.setItem('music-settings', JSON.stringify({
+          settings: this.settings,
+          version: '1.0',
+          lastUpdated: Date.now()
+        }))
+      } catch (error) {
+        console.error('保存设置失败:', error)
+      }
+    },
+
+    // 从本地存储加载设置
+    loadSettings() {
+      try {
+        const saved = localStorage.getItem('music-settings')
+        if (saved) {
+          const data = JSON.parse(saved)
+          if (data.settings) {
+            this.settings = {
+              ...this.settings,
+              ...data.settings
+            }
+          }
+        }
+      } catch (error) {
+        console.error('加载设置失败:', error)
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/stores/toast.js b/src/stores/toast.js
new file mode 100644
index 0000000000000000000000000000000000000000..c49003623b09c7b5850ca135b335cf857dfca1f0
--- /dev/null
+++ b/src/stores/toast.js
@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useToastStore = defineStore('toast', () => {
+  // 状态
+  const toasts = ref([])
+  const nextId = ref(1)
+  
+  // 方法
+  const addToast = (message, type = 'info', duration = 3000) => {
+    const id = nextId.value++
+    const toast = {
+      id,
+      message,
+      type,
+      duration,
+      timestamp: Date.now()
+    }
+    
+    toasts.value.push(toast)
+    
+    // 自动移除
+    if (duration > 0) {
+      setTimeout(() => {
+        removeToast(id)
+      }, duration)
+    }
+    
+    return id
+  }
+  
+  const removeToast = (id) => {
+    const index = toasts.value.findIndex(toast => toast.id === id)
+    if (index > -1) {
+      toasts.value.splice(index, 1)
+    }
+  }
+  
+  const clearAll = () => {
+    toasts.value = []
+  }
+  
+  // 便捷方法
+  const success = (message, duration) => {
+    return addToast(message, 'success', duration)
+  }
+  
+  const error = (message, duration) => {
+    return addToast(message, 'error', duration)
+  }
+  
+  const warning = (message, duration) => {
+    return addToast(message, 'warning', duration)
+  }
+  
+  const info = (message, duration) => {
+    return addToast(message, 'info', duration)
+  }
+  
+  return {
+    // 状态
+    toasts,
+    
+    // 方法
+    addToast,
+    removeToast,
+    clearAll,
+    success,
+    error,
+    warning,
+    info
+  }
+})
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..549c0669802797be42458b5e0555effc5589f82a
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,268 @@
+/* 多主题音乐应用 - 默认变量 */
+:root {
+  /* 组件尺寸 */
+  --tabbar-height: 49px;
+  --mini-player-height: 64px;
+  --list-item-height: 64px;
+  --touch-target: 44px;
+  
+  /* 圆角 */
+  --radius-small: 12px;
+  --radius-card: 20px;
+  
+  /* 动画 */
+  --transition-fast: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  
+  /* 默认主题色彩（白色炫彩） */
+  --bg-primary: #f8f9fa;
+  --bg-card: rgba(255, 255, 255, 0.9);
+  --bg-secondary: rgba(255, 255, 255, 0.85);
+  --bg-overlay: rgba(255, 255, 255, 0.95);
+  --bg-gradient-1: #e3f2fd;
+  --bg-gradient-2: #f3e5f5;
+  --bg-gradient-3: #fff3e0;
+  --bg-gradient-4: #e8f5e8;
+  
+  /* 新主题色变量 */
+  --primary-color: #ff6b6b;
+  --primary-color-hover: #ff5252;
+  --primary-color-active: #ff4444;
+  --primary-color-pressed: #ff3333;
+  
+  /* 兼容性变量 */
+  --accent-red: var(--primary-color);
+  --accent-red-hover: var(--primary-color-hover);
+  
+  /* 文字颜色 */
+  --text-primary: #2c3e50;
+  --text-secondary: rgba(44, 62, 80, 0.8);
+  --text-tertiary: rgba(44, 62, 80, 0.6);
+  --text-disabled: rgba(44, 62, 80, 0.5);
+  
+  /* 边框颜色 */
+  --border-light: rgba(44, 62, 80, 0.2);
+  --border-lighter: rgba(44, 62, 80, 0.1);
+  --border-card: rgba(44, 62, 80, 0.15);
+  --border-strong: rgba(44, 62, 80, 0.3);
+  
+  /* 状态颜色 */
+  --success-color: #4CAF50;
+  --warning-color: #ed8936;
+  --error-color: #ff4444;
+  --info-color: #3182ce;
+  
+  /* 特殊效果 */
+  --shadow-color: rgba(0, 0, 0, 0.12);
+  --glow-color: rgba(255, 107, 107, 0.35);
+  --overlay-dark: rgba(0, 0, 0, 0.6);
+  --overlay-light: rgba(255, 255, 255, 0.1);
+  
+  /* 兼容性阴影 */
+  --shadow-card: 0 8px 25px var(--shadow-color);
+  --shadow-button: 0 4px 12px var(--glow-color);
+}
+
+/* 黑色朦胧主题 */
+[data-theme="dark"] {
+  /* 背景色 */
+  --bg-primary: #0c0c0c;
+  --bg-card: rgba(30, 30, 30, 0.85);
+  --bg-secondary: rgba(25, 25, 25, 0.9);
+  --bg-overlay: rgba(0, 0, 0, 0.9);
+  --bg-gradient-1: #1a1a2e;
+  --bg-gradient-2: #16213e;
+  --bg-gradient-3: #0f3460;
+  --bg-gradient-4: #1a1a2e;
+  
+  /* 文字颜色 */
+  --text-primary: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.85);
+  --text-disabled: rgba(255, 255, 255, 0.5);
+  --text-tertiary: rgba(255, 255, 255, 0.65);
+  
+  /* 边界和分隔线 - 黑色朦胧主题 */
+  --border-light: rgba(255, 255, 255, 0.2);
+  --border-lighter: rgba(255, 255, 255, 0.1);
+  --border-card: rgba(255, 255, 255, 0.15);
+  --border-strong: rgba(255, 255, 255, 0.3);
+  
+  /* 阴影 - 黑色朦胧主题 */
+  --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.4);
+  --shadow-button: 0 4px 12px rgba(255, 107, 107, 0.5);
+}
+
+/* 全局重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  /* 禁用双击缩放和选择 */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 全局禁用缩放和双击 */
+html, body {
+  touch-action: manipulation;
+  -ms-touch-action: manipulation;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+/* 允许输入框和文本区域选择文本 */
+input, textarea, [contenteditable="true"] {
+  -webkit-user-select: text;
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+html, body {
+  height: 100%;
+  overflow-x: hidden;
+  /* 纯Meta方案：确保没有默认间距影响viewport-fit=cover */
+  margin: 0;
+  padding: 0;
+}
+
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+}
+
+/* 白色炫彩主题背景 */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(-45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), var(--bg-gradient-4));
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+  opacity: 0.4;
+  z-index: -2;
+  pointer-events: none;
+}
+
+/* 黑色朦胧主题背景 */
+[data-theme="dark"] body::before {
+  background: linear-gradient(-45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), var(--bg-gradient-4));
+  opacity: 0.2;
+}
+
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+#app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 滚动条样式 - 白色主题 */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(44, 62, 80, 0.3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(44, 62, 80, 0.5);
+}
+
+/* 滚动条样式 - 黑色主题 */
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+/* 通用类 */
+.container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/* 响应式隐藏 */
+@media (max-width: 768px) {
+  .hidden-mobile {
+    display: none !important;
+  }
+}
+
+@media (min-width: 769px) {
+  .hidden-desktop {
+    display: none !important;
+  }
+}
+
+/* 动画效果 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity var(--transition-fast);
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition: transform var(--transition-fast);
+}
+
+.slide-up-enter-from, .slide-up-leave-to {
+  transform: translateY(100%);
+}
\ No newline at end of file
diff --git a/src/styles/themes/base.js b/src/styles/themes/base.js
new file mode 100644
index 0000000000000000000000000000000000000000..f28b80d5348fcc130bbf18ccfaeb33d5de333607
--- /dev/null
+++ b/src/styles/themes/base.js
@@ -0,0 +1,85 @@
+/**
+ * 主题基础配置
+ * 定义所有主题共用的颜色变量结构
+ */
+
+export const themeConfig = {
+  // 基础背景色
+  backgrounds: {
+    primary: '--bg-primary',
+    card: '--bg-card',
+    secondary: '--bg-secondary', 
+    overlay: '--bg-overlay'
+  },
+  
+  // 渐变背景色
+  gradients: {
+    1: '--bg-gradient-1',
+    2: '--bg-gradient-2', 
+    3: '--bg-gradient-3',
+    4: '--bg-gradient-4'
+  },
+  
+  // 主题色系
+  primary: {
+    main: '--primary-color',
+    hover: '--primary-color-hover',
+    active: '--primary-color-active',
+    pressed: '--primary-color-pressed'
+  },
+  
+  // 文字颜色
+  text: {
+    primary: '--text-primary',
+    secondary: '--text-secondary',
+    tertiary: '--text-tertiary',
+    disabled: '--text-disabled'
+  },
+  
+  // 边框颜色
+  borders: {
+    light: '--border-light',
+    lighter: '--border-lighter',
+    card: '--border-card',
+    strong: '--border-strong'
+  },
+  
+  // 状态颜色
+  status: {
+    success: '--success-color',
+    warning: '--warning-color', 
+    error: '--error-color',
+    info: '--info-color'
+  },
+  
+  // 特殊效果
+  effects: {
+    shadow: '--shadow-color',
+    glow: '--glow-color',
+    overlayDark: '--overlay-dark',
+    overlayLight: '--overlay-light'
+  }
+}
+
+// 默认样式配置
+export const defaultStyles = {
+  // 组件尺寸
+  sizes: {
+    'tabbar-height': '49px',
+    'mini-player-height': '64px',
+    'list-item-height': '64px',
+    'touch-target': '44px'
+  },
+  
+  // 圆角
+  radius: {
+    'radius-small': '12px',
+    'radius-card': '20px'
+  },
+  
+  // 动画
+  transitions: {
+    'transition-fast': '0.3s ease',
+    'transition-slow': '0.5s ease'
+  }
+}
\ No newline at end of file
diff --git a/src/styles/themes/blue.js b/src/styles/themes/blue.js
new file mode 100644
index 0000000000000000000000000000000000000000..decc959732ed50d380a937e4dab0930df60b934e
--- /dev/null
+++ b/src/styles/themes/blue.js
@@ -0,0 +1,59 @@
+/**
+ * 科技蓝色主题 - Ant Design 蓝色系
+ */
+
+export const blueTheme = {
+  id: 'blue',
+  name: '科技蓝色',
+  colors: {
+    // 背景色
+    '--bg-primary': '#f0f5ff',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(240, 245, 255, 0.85)',
+    '--bg-overlay': 'rgba(240, 245, 255, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#e6f7ff',
+    '--bg-gradient-2': '#bae7ff',
+    '--bg-gradient-3': '#91d5ff',
+    '--bg-gradient-4': '#69c0ff',
+    
+    // 主题色 - Ant Design 蓝色
+    '--primary-color': '#1890ff',
+    '--primary-color-hover': '#40a9ff',
+    '--primary-color-active': '#096dd9',
+    '--primary-color-pressed': '#0050b3',
+    
+    // 文字颜色
+    '--text-primary': '#000000d9',
+    '--text-secondary': '#00000073',
+    '--text-tertiary': '#00000040',
+    '--text-disabled': '#00000025',
+    
+    // 边框
+    '--border-light': '#d9d9d9',
+    '--border-lighter': '#f0f0f0',
+    '--border-card': '#e8e8e8',
+    '--border-strong': '#bfbfbf',
+    
+    // 状态颜色
+    '--success-color': '#52c41a',
+    '--warning-color': '#faad14',
+    '--error-color': '#ff4d4f',
+    '--info-color': '#1890ff',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(0, 0, 0, 0.15)',
+    '--glow-color': 'rgba(24, 144, 255, 0.4)',
+    '--overlay-dark': 'rgba(0, 0, 0, 0.65)',
+    '--overlay-light': 'rgba(255, 255, 255, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const blueThemeCompat = {
+  '--accent-red': '#1890ff',
+  '--accent-red-hover': '#40a9ff',
+  '--shadow-card': '0 8px 25px rgba(0, 0, 0, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(24, 144, 255, 0.4)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/dark.js b/src/styles/themes/dark.js
new file mode 100644
index 0000000000000000000000000000000000000000..5a2d401b7a0b1f326a4d80e7f3c870f02f68cca8
--- /dev/null
+++ b/src/styles/themes/dark.js
@@ -0,0 +1,59 @@
+/**
+ * 黑色朦胧主题
+ */
+
+export const darkTheme = {
+  id: 'dark',
+  name: '黑色朦胧',
+  colors: {
+    // 背景色
+    '--bg-primary': '#0c0c0c',
+    '--bg-card': 'rgba(30, 30, 30, 0.85)',
+    '--bg-secondary': 'rgba(25, 25, 25, 0.9)',
+    '--bg-overlay': 'rgba(0, 0, 0, 0.9)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#1a1a2e',
+    '--bg-gradient-2': '#16213e',
+    '--bg-gradient-3': '#0f3460',
+    '--bg-gradient-4': '#1a1a2e',
+    
+    // 主题色
+    '--primary-color': '#ff6b6b',
+    '--primary-color-hover': '#ff5252',
+    '--primary-color-active': '#ff4444',
+    '--primary-color-pressed': '#ff3333',
+    
+    // 文字颜色
+    '--text-primary': '#ffffff',
+    '--text-secondary': 'rgba(255, 255, 255, 0.85)',
+    '--text-tertiary': 'rgba(255, 255, 255, 0.65)',
+    '--text-disabled': 'rgba(255, 255, 255, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(255, 255, 255, 0.2)',
+    '--border-lighter': 'rgba(255, 255, 255, 0.1)',
+    '--border-card': 'rgba(255, 255, 255, 0.15)',
+    '--border-strong': 'rgba(255, 255, 255, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#ed8936',
+    '--error-color': '#ff4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(0, 0, 0, 0.4)',
+    '--glow-color': 'rgba(255, 107, 107, 0.5)',
+    '--overlay-dark': 'rgba(0, 0, 0, 0.8)',
+    '--overlay-light': 'rgba(255, 255, 255, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const darkThemeCompat = {
+  '--accent-red': '#ff6b6b',
+  '--accent-red-hover': '#ff5252',
+  '--shadow-card': '0 8px 25px rgba(0, 0, 0, 0.4)',
+  '--shadow-button': '0 4px 12px rgba(255, 107, 107, 0.5)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/gold.js b/src/styles/themes/gold.js
new file mode 100644
index 0000000000000000000000000000000000000000..da8fee5d43ad17bd66736fcdb7d498aeb13cda4a
--- /dev/null
+++ b/src/styles/themes/gold.js
@@ -0,0 +1,59 @@
+/**
+ * 金色年华主题
+ */
+
+export const goldTheme = {
+  id: 'gold',
+  name: '金色年华',
+  colors: {
+    // 背景色
+    '--bg-primary': '#fffbf1',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(255, 251, 241, 0.85)',
+    '--bg-overlay': 'rgba(255, 251, 241, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#fefce8',
+    '--bg-gradient-2': '#fef3c7',
+    '--bg-gradient-3': '#fde68a',
+    '--bg-gradient-4': '#fcd34d',
+    
+    // 主题色
+    '--primary-color': '#d97706',
+    '--primary-color-hover': '#b45309',
+    '--primary-color-active': '#92400e',
+    '--primary-color-pressed': '#78350f',
+    
+    // 文字颜色
+    '--text-primary': '#451a03',
+    '--text-secondary': 'rgba(69, 26, 3, 0.8)',
+    '--text-tertiary': 'rgba(69, 26, 3, 0.6)',
+    '--text-disabled': 'rgba(69, 26, 3, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(69, 26, 3, 0.2)',
+    '--border-lighter': 'rgba(69, 26, 3, 0.1)',
+    '--border-card': 'rgba(69, 26, 3, 0.15)',
+    '--border-strong': 'rgba(69, 26, 3, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#f59e0b',
+    '--error-color': '#ef4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(217, 119, 6, 0.15)',
+    '--glow-color': 'rgba(217, 119, 6, 0.4)',
+    '--overlay-dark': 'rgba(69, 26, 3, 0.6)',
+    '--overlay-light': 'rgba(255, 251, 241, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const goldThemeCompat = {
+  '--accent-red': '#d97706',
+  '--accent-red-hover': '#b45309',
+  '--shadow-card': '0 8px 25px rgba(217, 119, 6, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(217, 119, 6, 0.4)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/gray.js b/src/styles/themes/gray.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f2b90f23f83edb64f5bbe2ba6a71decf06b9043
--- /dev/null
+++ b/src/styles/themes/gray.js
@@ -0,0 +1,59 @@
+/**
+ * 灰色空间主题
+ */
+
+export const grayTheme = {
+  id: 'gray',
+  name: '灰色空间',
+  colors: {
+    // 背景色
+    '--bg-primary': '#f8fafc',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(248, 250, 252, 0.85)',
+    '--bg-overlay': 'rgba(248, 250, 252, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#f1f5f9',
+    '--bg-gradient-2': '#e2e8f0',
+    '--bg-gradient-3': '#cbd5e1',
+    '--bg-gradient-4': '#94a3b8',
+    
+    // 主题色
+    '--primary-color': '#475569',
+    '--primary-color-hover': '#334155',
+    '--primary-color-active': '#1e293b',
+    '--primary-color-pressed': '#0f172a',
+    
+    // 文字颜色
+    '--text-primary': '#0f172a',
+    '--text-secondary': 'rgba(15, 23, 42, 0.8)',
+    '--text-tertiary': 'rgba(15, 23, 42, 0.6)',
+    '--text-disabled': 'rgba(15, 23, 42, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(15, 23, 42, 0.2)',
+    '--border-lighter': 'rgba(15, 23, 42, 0.1)',
+    '--border-card': 'rgba(15, 23, 42, 0.15)',
+    '--border-strong': 'rgba(15, 23, 42, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#ed8936',
+    '--error-color': '#ef4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(71, 85, 105, 0.15)',
+    '--glow-color': 'rgba(71, 85, 105, 0.4)',
+    '--overlay-dark': 'rgba(15, 23, 42, 0.6)',
+    '--overlay-light': 'rgba(248, 250, 252, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const grayThemeCompat = {
+  '--accent-red': '#475569',
+  '--accent-red-hover': '#334155',
+  '--shadow-card': '0 8px 25px rgba(71, 85, 105, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(71, 85, 105, 0.4)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/green.js b/src/styles/themes/green.js
new file mode 100644
index 0000000000000000000000000000000000000000..d69b00262581fc7096a5629a65cdd0f0442ed79b
--- /dev/null
+++ b/src/styles/themes/green.js
@@ -0,0 +1,59 @@
+/**
+ * 绿色心情主题 - 微信绿色系
+ */
+
+export const greenTheme = {
+  id: 'green',
+  name: '绿色心情',
+  colors: {
+    // 背景色
+    '--bg-primary': '#f7f7f7',
+    '--bg-card': 'rgba(255, 255, 255, 0.95)',
+    '--bg-secondary': 'rgba(255, 255, 255, 0.9)',
+    '--bg-overlay': 'rgba(255, 255, 255, 0.98)',
+    
+    // 渐变背景 - 微信绿色系
+    '--bg-gradient-1': '#e8f4f1',
+    '--bg-gradient-2': '#d4f1e2',
+    '--bg-gradient-3': '#a3e3c4',
+    '--bg-gradient-4': '#7dd3a0',
+    
+    // 主题色 - 微信绿色
+    '--primary-color': '#07c160',
+    '--primary-color-hover': '#06ad56',
+    '--primary-color-active': '#059a4c',
+    '--primary-color-pressed': '#048642',
+    
+    // 文字颜色
+    '--text-primary': '#1f2328',
+    '--text-secondary': 'rgba(31, 35, 40, 0.75)',
+    '--text-tertiary': 'rgba(31, 35, 40, 0.6)',
+    '--text-disabled': 'rgba(31, 35, 40, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(31, 35, 40, 0.15)',
+    '--border-lighter': 'rgba(31, 35, 40, 0.08)',
+    '--border-card': 'rgba(31, 35, 40, 0.12)',
+    '--border-strong': 'rgba(31, 35, 40, 0.25)',
+    
+    // 状态颜色
+    '--success-color': '#07c160',
+    '--warning-color': '#faad14',
+    '--error-color': '#ff4d4f',
+    '--info-color': '#1890ff',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(7, 193, 96, 0.15)',
+    '--glow-color': 'rgba(7, 193, 96, 0.4)',
+    '--overlay-dark': 'rgba(31, 35, 40, 0.6)',
+    '--overlay-light': 'rgba(255, 255, 255, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const greenThemeCompat = {
+  '--accent-red': '#07c160',
+  '--accent-red-hover': '#06ad56',
+  '--shadow-card': '0 8px 25px rgba(7, 193, 96, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(7, 193, 96, 0.4)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/index.js b/src/styles/themes/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d682d9b936f5136dad7fe1999b685aeb9ab250f1
--- /dev/null
+++ b/src/styles/themes/index.js
@@ -0,0 +1,166 @@
+/**
+ * 主题管理器
+ * 统一管理所有主题的加载、切换和应用
+ */
+
+import { lightTheme, lightThemeCompat } from './light.js'
+import { darkTheme, darkThemeCompat } from './dark.js'
+import { orangeTheme, orangeThemeCompat } from './orange.js'
+import { pinkTheme, pinkThemeCompat } from './pink.js'
+import { purpleTheme, purpleThemeCompat } from './purple.js'
+import { blueTheme, blueThemeCompat } from './blue.js'
+import { greenTheme, greenThemeCompat } from './green.js'
+import { goldTheme, goldThemeCompat } from './gold.js'
+import { grayTheme, grayThemeCompat } from './gray.js'
+import { defaultStyles } from './base.js'
+
+// 所有可用主题
+export const availableThemes = [
+  lightTheme,
+  darkTheme,
+  orangeTheme,
+  pinkTheme,
+  purpleTheme,
+  blueTheme,
+  greenTheme,
+  goldTheme,
+  grayTheme
+]
+
+// 兼容性映射
+const themeCompatMap = {
+  light: lightThemeCompat,
+  dark: darkThemeCompat,
+  orange: orangeThemeCompat,
+  pink: pinkThemeCompat,
+  purple: purpleThemeCompat,
+  blue: blueThemeCompat,
+  green: greenThemeCompat,
+  gold: goldThemeCompat,
+  gray: grayThemeCompat
+}
+
+export class ThemeManager {
+  constructor() {
+    this.currentTheme = 'light'
+    this.rootElement = document.documentElement
+  }
+
+  /**
+   * 获取所有主题列表
+   */
+  getAllThemes() {
+    return availableThemes.map(theme => ({
+      id: theme.id,
+      name: theme.name
+    }))
+  }
+
+  /**
+   * 根据ID获取主题
+   */
+  getTheme(themeId) {
+    return availableThemes.find(theme => theme.id === themeId)
+  }
+
+  /**
+   * 应用主题
+   */
+  applyTheme(themeId) {
+    const theme = this.getTheme(themeId)
+    if (!theme) {
+      console.warn(`主题 ${themeId} 不存在，使用默认主题`)
+      return this.applyTheme('light')
+    }
+
+    // 设置 data-theme 属性
+    this.rootElement.setAttribute('data-theme', themeId)
+
+    // 应用新的CSS变量
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      this.rootElement.style.setProperty(key, value)
+    })
+
+    // 应用兼容性CSS变量
+    const compatVars = themeCompatMap[themeId]
+    if (compatVars) {
+      Object.entries(compatVars).forEach(([key, value]) => {
+        this.rootElement.style.setProperty(key, value)
+      })
+    }
+
+    // 应用默认样式（如果还没应用过）
+    this.applyDefaultStyles()
+
+    this.currentTheme = themeId
+    console.log(`已切换到主题: ${theme.name}`)
+  }
+
+  /**
+   * 应用默认样式（尺寸、圆角等）
+   */
+  applyDefaultStyles() {
+    // 应用组件尺寸
+    Object.entries(defaultStyles.sizes).forEach(([key, value]) => {
+      this.rootElement.style.setProperty(`--${key}`, value)
+    })
+
+    // 应用圆角
+    Object.entries(defaultStyles.radius).forEach(([key, value]) => {
+      this.rootElement.style.setProperty(`--${key}`, value)
+    })
+
+    // 应用动画
+    Object.entries(defaultStyles.transitions).forEach(([key, value]) => {
+      this.rootElement.style.setProperty(`--${key}`, value)
+    })
+  }
+
+  /**
+   * 获取当前主题ID
+   */
+  getCurrentTheme() {
+    return this.currentTheme
+  }
+
+  /**
+   * 获取当前主题信息
+   */
+  getCurrentThemeInfo() {
+    return this.getTheme(this.currentTheme)
+  }
+
+  /**
+   * 初始化主题系统
+   */
+  init(initialThemeId = 'light') {
+    this.applyDefaultStyles()
+    this.applyTheme(initialThemeId)
+  }
+
+  /**
+   * 预加载所有主题的CSS变量（用于主题预览）
+   */
+  preloadThemes() {
+    availableThemes.forEach(theme => {
+      // 可以在这里实现主题预加载逻辑
+      console.log(`预加载主题: ${theme.name}`)
+    })
+  }
+}
+
+// 创建全局主题管理器实例
+export const themeManager = new ThemeManager()
+
+// 导出主题常量
+export const THEME_IDS = {
+  LIGHT: 'light',
+  DARK: 'dark',
+  ORANGE: 'orange',
+  PINK: 'pink',
+  PURPLE: 'purple',
+  BLUE: 'blue',
+  GREEN: 'green',
+  GOLD: 'gold',
+  GRAY: 'gray'
+}
\ No newline at end of file
diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js
new file mode 100644
index 0000000000000000000000000000000000000000..74ecf2fe7a78ca1d8ad7b186e5eb9e76d607e57f
--- /dev/null
+++ b/src/styles/themes/light.js
@@ -0,0 +1,59 @@
+/**
+ * 白色炫彩主题
+ */
+
+export const lightTheme = {
+  id: 'light',
+  name: '白色炫彩',
+  colors: {
+    // 背景色
+    '--bg-primary': '#f8f9fa',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(255, 255, 255, 0.85)',
+    '--bg-overlay': 'rgba(255, 255, 255, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#e3f2fd',
+    '--bg-gradient-2': '#f3e5f5',
+    '--bg-gradient-3': '#fff3e0',
+    '--bg-gradient-4': '#e8f5e8',
+    
+    // 主题色
+    '--primary-color': '#ff6b6b',
+    '--primary-color-hover': '#ff5252',
+    '--primary-color-active': '#ff4444',
+    '--primary-color-pressed': '#ff3333',
+    
+    // 文字颜色
+    '--text-primary': '#2c3e50',
+    '--text-secondary': 'rgba(44, 62, 80, 0.8)',
+    '--text-tertiary': 'rgba(44, 62, 80, 0.6)',
+    '--text-disabled': 'rgba(44, 62, 80, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(44, 62, 80, 0.2)',
+    '--border-lighter': 'rgba(44, 62, 80, 0.1)',
+    '--border-card': 'rgba(44, 62, 80, 0.15)',
+    '--border-strong': 'rgba(44, 62, 80, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#ed8936',
+    '--error-color': '#ff4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(0, 0, 0, 0.12)',
+    '--glow-color': 'rgba(255, 107, 107, 0.35)',
+    '--overlay-dark': 'rgba(0, 0, 0, 0.6)',
+    '--overlay-light': 'rgba(255, 255, 255, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const lightThemeCompat = {
+  '--accent-red': '#ff6b6b',
+  '--accent-red-hover': '#ff5252',
+  '--shadow-card': '0 8px 25px rgba(0, 0, 0, 0.12)',
+  '--shadow-button': '0 4px 12px rgba(255, 107, 107, 0.35)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/orange.js b/src/styles/themes/orange.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc024293742790fe66b1be0b57869f29e477c721
--- /dev/null
+++ b/src/styles/themes/orange.js
@@ -0,0 +1,59 @@
+/**
+ * 橘子人生主题
+ */
+
+export const orangeTheme = {
+  id: 'orange',
+  name: '橘子人生',
+  colors: {
+    // 背景色
+    '--bg-primary': '#fef7f0',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(255, 248, 240, 0.85)',
+    '--bg-overlay': 'rgba(255, 248, 240, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#fff7ed',
+    '--bg-gradient-2': '#fed7aa',
+    '--bg-gradient-3': '#fdba74',
+    '--bg-gradient-4': '#fb923c',
+    
+    // 主题色
+    '--primary-color': '#ff9500',
+    '--primary-color-hover': '#ff8a00',
+    '--primary-color-active': '#e6850e',
+    '--primary-color-pressed': '#cc7a00',
+    
+    // 文字颜色
+    '--text-primary': '#431407',
+    '--text-secondary': 'rgba(67, 20, 7, 0.8)',
+    '--text-tertiary': 'rgba(67, 20, 7, 0.6)',
+    '--text-disabled': 'rgba(67, 20, 7, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(67, 20, 7, 0.2)',
+    '--border-lighter': 'rgba(67, 20, 7, 0.1)',
+    '--border-card': 'rgba(67, 20, 7, 0.15)',
+    '--border-strong': 'rgba(67, 20, 7, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#fbbf24',
+    '--error-color': '#ef4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(255, 149, 0, 0.15)',
+    '--glow-color': 'rgba(255, 149, 0, 0.4)',
+    '--overlay-dark': 'rgba(67, 20, 7, 0.6)',
+    '--overlay-light': 'rgba(255, 248, 240, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const orangeThemeCompat = {
+  '--accent-red': '#ff9500',
+  '--accent-red-hover': '#ff8a00',
+  '--shadow-card': '0 8px 25px rgba(255, 149, 0, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(255, 149, 0, 0.4)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/pink.js b/src/styles/themes/pink.js
new file mode 100644
index 0000000000000000000000000000000000000000..6531dfc88951c7c39afee6ad34ea6e94fbfb7975
--- /dev/null
+++ b/src/styles/themes/pink.js
@@ -0,0 +1,59 @@
+/**
+ * 粉红女郎主题
+ */
+
+export const pinkTheme = {
+  id: 'pink',
+  name: '粉红女郎',
+  colors: {
+    // 背景色
+    '--bg-primary': '#fdf2f8',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(253, 242, 248, 0.85)',
+    '--bg-overlay': 'rgba(253, 242, 248, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#fce7f3',
+    '--bg-gradient-2': '#fbcfe8',
+    '--bg-gradient-3': '#f9a8d4',
+    '--bg-gradient-4': '#f472b6',
+    
+    // 主题色
+    '--primary-color': '#ec4899',
+    '--primary-color-hover': '#db2777',
+    '--primary-color-active': '#be185d',
+    '--primary-color-pressed': '#9d174d',
+    
+    // 文字颜色
+    '--text-primary': '#500724',
+    '--text-secondary': 'rgba(80, 7, 36, 0.8)',
+    '--text-tertiary': 'rgba(80, 7, 36, 0.6)',
+    '--text-disabled': 'rgba(80, 7, 36, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(80, 7, 36, 0.2)',
+    '--border-lighter': 'rgba(80, 7, 36, 0.1)',
+    '--border-card': 'rgba(80, 7, 36, 0.15)',
+    '--border-strong': 'rgba(80, 7, 36, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#ed8936',
+    '--error-color': '#ef4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(236, 72, 153, 0.15)',
+    '--glow-color': 'rgba(236, 72, 153, 0.4)',
+    '--overlay-dark': 'rgba(80, 7, 36, 0.6)',
+    '--overlay-light': 'rgba(253, 242, 248, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const pinkThemeCompat = {
+  '--accent-red': '#ec4899',
+  '--accent-red-hover': '#db2777',
+  '--shadow-card': '0 8px 25px rgba(236, 72, 153, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(236, 72, 153, 0.4)'
+}
\ No newline at end of file
diff --git a/src/styles/themes/purple.js b/src/styles/themes/purple.js
new file mode 100644
index 0000000000000000000000000000000000000000..6deaa8c7cf9d2742d7ba02ae5eacd580123a4050
--- /dev/null
+++ b/src/styles/themes/purple.js
@@ -0,0 +1,59 @@
+/**
+ * 紫色韵味主题
+ */
+
+export const purpleTheme = {
+  id: 'purple',
+  name: '紫色韵味',
+  colors: {
+    // 背景色
+    '--bg-primary': '#f8fafc',
+    '--bg-card': 'rgba(255, 255, 255, 0.9)',
+    '--bg-secondary': 'rgba(248, 250, 252, 0.85)',
+    '--bg-overlay': 'rgba(248, 250, 252, 0.95)',
+    
+    // 渐变背景
+    '--bg-gradient-1': '#f3e8ff',
+    '--bg-gradient-2': '#e9d5ff',
+    '--bg-gradient-3': '#d8b4fe',
+    '--bg-gradient-4': '#c084fc',
+    
+    // 主题色
+    '--primary-color': '#9333ea',
+    '--primary-color-hover': '#7c3aed',
+    '--primary-color-active': '#6d28d9',
+    '--primary-color-pressed': '#5b21b6',
+    
+    // 文字颜色
+    '--text-primary': '#3c1361',
+    '--text-secondary': 'rgba(60, 19, 97, 0.8)',
+    '--text-tertiary': 'rgba(60, 19, 97, 0.6)',
+    '--text-disabled': 'rgba(60, 19, 97, 0.5)',
+    
+    // 边框
+    '--border-light': 'rgba(60, 19, 97, 0.2)',
+    '--border-lighter': 'rgba(60, 19, 97, 0.1)',
+    '--border-card': 'rgba(60, 19, 97, 0.15)',
+    '--border-strong': 'rgba(60, 19, 97, 0.3)',
+    
+    // 状态颜色
+    '--success-color': '#4CAF50',
+    '--warning-color': '#ed8936',
+    '--error-color': '#ef4444',
+    '--info-color': '#3182ce',
+    
+    // 特殊效果
+    '--shadow-color': 'rgba(147, 51, 234, 0.15)',
+    '--glow-color': 'rgba(147, 51, 234, 0.4)',
+    '--overlay-dark': 'rgba(60, 19, 97, 0.6)',
+    '--overlay-light': 'rgba(248, 250, 252, 0.1)'
+  }
+}
+
+// 为兼容性保留原有变量名
+export const purpleThemeCompat = {
+  '--accent-red': '#9333ea',
+  '--accent-red-hover': '#7c3aed',
+  '--shadow-card': '0 8px 25px rgba(147, 51, 234, 0.15)',
+  '--shadow-button': '0 4px 12px rgba(147, 51, 234, 0.4)'
+}
\ No newline at end of file
diff --git a/src/utils/imageCache.js b/src/utils/imageCache.js
new file mode 100644
index 0000000000000000000000000000000000000000..a48d99014b7ab0be50b387b1f6c7a658bf3ee4e1
--- /dev/null
+++ b/src/utils/imageCache.js
@@ -0,0 +1,269 @@
+// 图像缓存管理器 - 解决跨域问题并实现本地缓存
+class ImageCacheManager {
+  constructor() {
+    this.cache = new Map()
+    this.cacheName = 'music-images-v1'
+    this.maxCacheSize = 100 // 最多缓存100张图片
+    this.cacheExpiry = 7 * 24 * 60 * 60 * 1000 // 7天过期
+    this.init()
+  }
+
+  async init() {
+    // 清理过期的缓存
+    await this.cleanupExpiredCache()
+  }
+
+  // 获取图片的缓存键
+  getCacheKey(url) {
+    return `img_${this.hashUrl(url)}`
+  }
+
+  // 简单的URL哈希函数
+  hashUrl(url) {
+    let hash = 0
+    for (let i = 0; i < url.length; i++) {
+      const char = url.charCodeAt(i)
+      hash = ((hash << 5) - hash) + char
+      hash = hash & hash // 转换为32位整数
+    }
+    return Math.abs(hash).toString(36)
+  }
+
+  // 将图片转换为base64并缓存 - 改进跨域处理
+  async cacheImage(url, metadata = {}) {
+    try {
+      // 检查URL是否为空或无效
+      if (!url || typeof url !== 'string') {
+        return this.getDefaultImage()
+      }
+
+      const cacheKey = this.getCacheKey(url)
+      
+      // 检查内存缓存
+      if (this.cache.has(cacheKey)) {
+        return this.cache.get(cacheKey).dataUrl
+      }
+
+      // 检查localStorage缓存
+      const cached = localStorage.getItem(cacheKey)
+      if (cached) {
+        try {
+          const cachedData = JSON.parse(cached)
+          if (Date.now() - cachedData.timestamp < this.cacheExpiry) {
+            this.cache.set(cacheKey, cachedData)
+            return cachedData.dataUrl
+          }
+        } catch (e) {
+          // 缓存数据损坏，删除
+          localStorage.removeItem(cacheKey)
+        }
+      }
+
+      // 直接使用原始URL，不使用代理
+      let finalUrl = url
+
+      // 使用Canvas方式转换图片
+      const dataUrl = await this.convertToDataUrl(finalUrl)
+      
+      // 保存到缓存
+      const cacheData = {
+        dataUrl,
+        timestamp: Date.now(),
+        originalUrl: url,
+        metadata
+      }
+      
+      this.cache.set(cacheKey, cacheData)
+      
+      // 保存到localStorage
+      try {
+        if (this.cache.size <= this.maxCacheSize) {
+          localStorage.setItem(cacheKey, JSON.stringify(cacheData))
+        }
+      } catch (e) {
+        // localStorage空间不足，清理一些旧缓存
+        await this.cleanupOldCache()
+        try {
+          localStorage.setItem(cacheKey, JSON.stringify(cacheData))
+        } catch (e) {
+          console.warn('无法保存图片到localStorage:', e)
+        }
+      }
+
+      return dataUrl
+    } catch (error) {
+      console.error('缓存图片失败:', error)
+      return this.getDefaultImage()
+    }
+  }
+
+  // 检查是否为跨域URL
+  isCrossOrigin(url) {
+    try {
+      const urlObj = new URL(url, window.location.href)
+      return urlObj.origin !== window.location.origin
+    } catch (e) {
+      // 如果URL解析失败，假设为跨域
+      return true
+    }
+  }
+
+
+  // 将图片转换为DataUrl
+  async convertToDataUrl(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d')
+          
+          canvas.width = img.naturalWidth
+          canvas.height = img.naturalHeight
+          
+          ctx.drawImage(img, 0, 0)
+          const result = canvas.toDataURL('image/jpeg', 0.8)
+          resolve(result)
+        } catch (error) {
+          console.warn('Canvas转换失败，使用原始URL:', error)
+          resolve(url)
+        }
+      }
+      
+      img.onerror = () => {
+        console.warn('图片加载失败，使用默认图片')
+        resolve(this.getDefaultImage())
+      }
+      
+      // 设置超时
+      setTimeout(() => {
+        console.warn('图片加载超时，使用默认图片')
+        resolve(this.getDefaultImage())
+      }, 10000)
+      
+      img.src = url
+    })
+  }
+
+  // 获取默认图片
+  getDefaultImage() {
+    return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIHJ4PSIxMiIgZmlsbD0iIzE4MTgxOCIvPjxwYXRoIGQ9Ik0xODcgMTUwQzE4NyAxNzEuNTM5IDE2OS41MzkgMTg5IDE0OCAxODlDMTI2LjQ2MSAxODkgMTA5IDE3MS41MzkgMTA5IDE1MEMxMDkgMTI4LjQ2MSAxMjYuNDYxIDExMSAxNDggMTExQzE2OS41MzkgMTExIDE4NyAxMjguNDYxIDE4NyAxNTBaIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iNiIvPjxjaXJjbGUgY3g9IjE0OCIgY3k9IjE1MCIgcj0iNiIgZmlsbD0iIzY2NjY2NiIvPjwvc3ZnPgo='
+  }
+
+  // 获取缓存的图片
+  async getCachedImage(url) {
+    const cacheKey = this.getCacheKey(url)
+    
+    // 检查内存缓存
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey).dataUrl
+    }
+
+    // 检查localStorage缓存
+    const cached = localStorage.getItem(cacheKey)
+    if (cached) {
+      try {
+        const cachedData = JSON.parse(cached)
+        if (Date.now() - cachedData.timestamp < this.cacheExpiry) {
+          this.cache.set(cacheKey, cachedData)
+          return cachedData.dataUrl
+        } else {
+          // 缓存过期，删除
+          localStorage.removeItem(cacheKey)
+        }
+      } catch (e) {
+        localStorage.removeItem(cacheKey)
+      }
+    }
+
+    return null
+  }
+
+  // 预加载图片
+  async preloadImage(url, metadata = {}) {
+    return this.cacheImage(url, metadata)
+  }
+
+  // 清理过期缓存
+  async cleanupExpiredCache() {
+    const keys = Object.keys(localStorage)
+    const now = Date.now()
+    
+    keys.forEach(key => {
+      if (key.startsWith('img_')) {
+        try {
+          const cached = JSON.parse(localStorage.getItem(key))
+          if (now - cached.timestamp > this.cacheExpiry) {
+            localStorage.removeItem(key)
+          }
+        } catch (e) {
+          localStorage.removeItem(key)
+        }
+      }
+    })
+  }
+
+  // 清理旧缓存（释放空间）
+  async cleanupOldCache() {
+    const keys = Object.keys(localStorage)
+    const imageKeys = keys.filter(key => key.startsWith('img_'))
+    
+    // 按时间戳排序，删除最旧的一半
+    const cached = imageKeys.map(key => {
+      try {
+        const data = JSON.parse(localStorage.getItem(key))
+        return { key, timestamp: data.timestamp }
+      } catch (e) {
+        return { key, timestamp: 0 }
+      }
+    }).sort((a, b) => a.timestamp - b.timestamp)
+
+    const toDelete = cached.slice(0, Math.floor(cached.length / 2))
+    toDelete.forEach(item => {
+      localStorage.removeItem(item.key)
+      this.cache.delete(item.key)
+    })
+  }
+
+  // 清空所有缓存
+  async clearCache() {
+    const keys = Object.keys(localStorage)
+    keys.forEach(key => {
+      if (key.startsWith('img_')) {
+        localStorage.removeItem(key)
+      }
+    })
+    this.cache.clear()
+  }
+
+  // 获取缓存统计信息
+  getCacheStats() {
+    const keys = Object.keys(localStorage)
+    const imageKeys = keys.filter(key => key.startsWith('img_'))
+    let totalSize = 0
+    
+    imageKeys.forEach(key => {
+      totalSize += localStorage.getItem(key).length
+    })
+
+    return {
+      totalImages: imageKeys.length,
+      memoryCache: this.cache.size,
+      totalSize: (totalSize / 1024 / 1024).toFixed(2) + 'MB'
+    }
+  }
+}
+
+// 创建全局实例
+export const imageCacheManager = new ImageCacheManager()
+
+// 导出便捷方法
+export const cacheImage = (url, metadata) => imageCacheManager.cacheImage(url, metadata)
+export const getCachedImage = (url) => imageCacheManager.getCachedImage(url)
+export const preloadImage = (url, metadata) => imageCacheManager.preloadImage(url, metadata)
+export const clearImageCache = () => imageCacheManager.clearCache()
+export const getImageCacheStats = () => imageCacheManager.getCacheStats()
+
+export default imageCacheManager
\ No newline at end of file
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 756ad2a17909837834858538422308120cf09dab..0000000000000000000000000000000000000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
diff --git a/src/views/FullPlayerPage.vue b/src/views/FullPlayerPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1be3e3590d0b27277dffdd701050d63546a5b9a6
--- /dev/null
+++ b/src/views/FullPlayerPage.vue
@@ -0,0 +1,1315 @@
+<template>
+  <div class="full-player" :class="{ 'lyrics-mode': showLyrics }">
+    <!-- 背景 -->
+    <div class="background-overlay">
+      <img
+        :src="currentCoverUrl || defaultCover"
+        class="bg-image"
+        :key="currentSong?.id"
+        @error="handleImageError"
+      />
+      <div class="bg-mask"></div>
+      <div class="bg-vignette"></div>
+    </div>
+
+    <!-- 顶部导航 -->
+    <div class="player-header">
+      <button class="back-btn" @click="handleBack">
+        <i class="fas fa-chevron-down"></i>
+      </button>
+
+      <div class="song-info-header">
+        <div class="song-title" :title="currentSong?.name || '暂无播放'">{{ currentSong?.name || '暂无播放' }}</div>
+        <div class="artist-name" :title="formattedArtist">{{ formattedArtist }}</div>
+      </div>
+
+      <button class="more-btn" @click="showMoreActions = true">
+        <i class="fas fa-ellipsis-v"></i>
+      </button>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="player-content">
+      <!-- 专辑封面区域 -->
+      <div
+        class="cover-section"
+        v-show="!showLyrics || isDesktop"
+        @dblclick="handleDoubleClick"
+        @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd"
+      >
+        <AlbumCover
+          :src="currentCoverUrl"
+          :alt="currentSong?.name"
+          :size="coverSize"
+          :isPlaying="isPlaying"
+          @error="handleAlbumCoverError"
+        />
+      </div>
+
+      <!-- 歌词区域 -->
+      <div
+        class="lyrics-section"
+        v-show="showLyrics"
+        @dblclick="handleDoubleClick"
+        @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd"
+      >
+        <LyricsView
+          :lyrics="currentLyrics"
+          :currentTime="currentTime"
+          @seekTo="handleSeekTo"
+          @swipeLeft="handleSwipeLeft"
+          @swipeRight="handleSwipeRight"
+        />
+      </div>
+
+      <!-- 歌曲信息/歌词显示区域 -->
+      <div class="song-info" v-show="!showLyrics">
+        <!-- 移除重复的歌曲标题，显示实时歌词 -->
+        <div class="current-lyric">
+          <p class="lyric-text">{{ getCurrentLyric() || '暂无歌词' }}</p>
+        </div>
+
+        <div class="artist-album-row">
+          <p class="artist-album">
+            <span class="artist">{{ formattedArtist }}</span>
+            <span v-if="currentSong?.album" class="separator"> - </span>
+            <span class="album" :title="currentSong?.album || ''">{{ currentSong?.album || '' }}</span>
+          </p>
+          <!-- 红心按钮移动到专辑信息后面 -->
+          <button class="favorite-btn-inline" @click="toggleFavorite" :class="{ active: isFavorite }" v-if="currentSong">
+            <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 播放控制区域 -->
+    <div class="player-controls">
+      <!-- 进度条 -->
+      <ProgressBar @seek="handleSeek" />
+
+      <!-- 播放按钮 -->
+      <PlayControls
+        :loading="loading"
+        @togglePlay="handleTogglePlay"
+        @previous="handlePrevious"
+        @next="handleNext"
+        @togglePlayMode="handleTogglePlayMode"
+        @showPlaylist="handleShowPlaylist"
+      />
+    </div>
+
+    <!-- 音质选择面板 -->
+    <div class="quality-selector" v-if="showQualitySelector" @click.self="showQualitySelector = false">
+      <div class="quality-panel" @click.stop>
+        <div class="panel-header">
+          <h3>音质选择</h3>
+          <button class="close-btn" @click.stop="showQualitySelector = false">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+
+        <div class="quality-list">
+          <div
+            v-for="quality in availableQualities"
+            :key="quality.value"
+            class="quality-item"
+            :class="{
+              'active': quality.value === currentQuality,
+              'loading': qualityLoading && selectedQuality === quality.value
+            }"
+            @click.stop="selectQuality(quality.value)"
+          >
+            <div class="quality-main">
+              <div class="quality-name">{{ quality.name }}</div>
+              <div class="quality-desc">{{ quality.description }}</div>
+            </div>
+
+            <div class="quality-actions">
+              <div class="quality-size" v-if="quality.size">{{ quality.size }}</div>
+              <i v-if="quality.value === currentQuality" class="fas fa-check quality-check"></i>
+              <i v-else-if="qualityLoading && selectedQuality === quality.value" class="fas fa-spinner fa-spin"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="quality-note">
+          <i class="fas fa-info-circle"></i>
+          <span>更高音质需要更多流量，请在WiFi环境下使用</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 播放队列面板 -->
+    <PlaylistPanel
+      v-if="showPlaylist"
+      @close="showPlaylist = false"
+      @play="handlePlayFromList"
+      @remove="handleRemoveFromList"
+    />
+
+    <!-- 更多操作面板 -->
+    <MoreActionsPanel
+      v-if="showMoreActions"
+      :song="currentSong"
+      @close="showMoreActions = false"
+      @action="handleMoreAction"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePlayerStore } from '@/stores/player'
+import { useFavoritesStore } from '@/stores/favorites'
+import { useSettingsStore } from '@/stores/settings'
+import { musicApi, utils } from '@/services/musicApi'
+import AlbumCover from '@/components/player/AlbumCover.vue'
+import PlayControls from '@/components/player/PlayControls.vue'
+import ProgressBar from '@/components/player/ProgressBar.vue'
+import LyricsView from '@/components/player/LyricsView.vue'
+import PlaylistPanel from '@/components/player/PlaylistPanel.vue'
+import MoreActionsPanel from '@/components/player/MoreActionsPanel.vue'
+
+// 定义事件发送器
+const emit = defineEmits(['close', 'seek', 'togglePlay'])
+
+const router = useRouter()
+const playerStore = usePlayerStore()
+const favoritesStore = useFavoritesStore()
+const settingsStore = useSettingsStore()
+
+// 响应式数据
+const loading = ref(false)
+const showLyrics = ref(false)
+const showPlaylist = ref(false)
+const showMoreActions = ref(false)
+const showQualitySelector = ref(false)
+const currentLyrics = ref([])
+const coverSize = ref(300)
+const qualityLoading = ref(false)
+const selectedQuality = ref(null)
+const currentCoverUrl = ref('') // 新增：用于存储当前封面URL
+
+// 音质配置
+const availableQualities = ref([
+  {
+    value: 128,
+    name: '标准',
+    description: '128K 省流模式',
+    size: '约3MB/首'
+  },
+  {
+    value: 192,
+    name: '较高',
+    description: '192K 均衡模式',
+    size: '约4MB/首'
+  },
+  {
+    value: 320,
+    name: 'HQ',
+    description: '320K 高品质',
+    size: '约7MB/首'
+  },
+  {
+    value: 740,
+    name: '无损',
+    description: 'FLAC 原音质',
+    size: '约30MB/首'
+  },
+  {
+    value: 999,
+    name: 'Hi-Res',
+    description: '高解析度音频',
+    size: '约60MB/首'
+  }
+])
+
+// 计算属性
+const currentSong = computed(() => playerStore.currentSong)
+const isPlaying = computed(() => playerStore.isPlaying)
+const currentTime = computed(() => playerStore.currentTime)
+const currentQuality = computed(() => settingsStore.settings.defaultQuality || 320)
+
+const isFavorite = computed(() => {
+  return currentSong.value ? favoritesStore.isFavorite(currentSong.value) : false
+})
+
+const formattedArtist = computed(() => {
+  if (!currentSong.value?.artist) return ''
+  return utils.formatArtist(currentSong.value.artist)
+})
+
+const isDesktop = computed(() => {
+  return window.innerWidth >= 768
+})
+
+const defaultCover = computed(() => {
+  return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiBmaWxsPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMykiIHJ4PSI0MCIvPgo8Y2lyY2xlIGN4PSIxNDAiIGN5PSIxNDAiIHI9IjgwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz4KPHN2ZyB4PSIxMTAiIHk9IjExMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9InJnYmEoMTYwLDE2MCwxNjAsMC42KSI+CjxwYXRoIGQ9Ik0xMiAzdjEwLjU1Yy0uNTktLjM0LTEuMjctLjU1LTItLjU1QzcuNzkgMTMgNiAxNC43OSA2IDEdzEuNzkgNCA0IDRjMS45NCAwIDMuNS0xLjI5IDMuOTEtM0gxNFYzeiIvPgo8L3N2Zz4KPC9zdmc+'
+})
+
+const currentCover = computed(() => {
+  // 如果有设置的封面URL，优先使用
+  if (currentCoverUrl.value) {
+    return currentCoverUrl.value
+  }
+
+  if (!currentSong.value) return defaultCover.value
+
+  // 优先使用缓存的封面
+  const cachedCover = playerStore.getCachedCover(currentSong.value, coverSize.value)
+  if (cachedCover) {
+    return cachedCover
+  }
+
+  return defaultCover.value
+})
+
+// 异步加载专辑封面
+const loadAlbumCover = async () => {
+  if (!currentSong.value) {
+    currentCoverUrl.value = defaultCover.value
+    return
+  }
+
+  try {
+    const coverUrlResult = await playerStore.getAlbumCover(currentSong.value, 300)
+    if (coverUrlResult) {
+      currentCoverUrl.value = coverUrlResult
+    } else {
+      currentCoverUrl.value = defaultCover.value
+    }
+  } catch (error) {
+    console.error('加载专辑封面失败:', error, '歌曲:', currentSong.value.name)
+    currentCoverUrl.value = defaultCover.value
+  }
+}
+
+// 图片加载错误处理（采用MiniPlayer的简单方式）
+const handleImageError = () => {
+  currentCoverUrl.value = defaultCover.value
+}
+
+// AlbumCover组件图片加载错误处理
+const handleAlbumCoverError = () => {
+  currentCoverUrl.value = defaultCover.value
+}
+
+// 方法
+const handleBack = () => {
+  router.back()
+}
+
+const toggleLyrics = () => {
+  showLyrics.value = !showLyrics.value
+}
+
+// 双击事件处理
+const handleDoubleClick = (event) => {
+  toggleLyrics()
+  // 阻止冒泡和默认行为，防止误触其他事件
+  event.preventDefault()
+  event.stopPropagation()
+  event.stopImmediatePropagation()
+  console.log('双击切换歌词模式')
+}
+
+// 触摸事件处理 - 用于检测双击
+let touchTime = 0
+let isDoubleTapHandled = false // 添加标志防止重复处理
+let singleTapTimer = null // 单击延迟计时器
+
+const handleTouchStart = (event) => {
+  const currentTime = new Date().getTime()
+  const tapLength = currentTime - touchTime
+
+  if (tapLength < 500 && tapLength > 0 && !isDoubleTapHandled) {
+    // 双击检测成功
+    isDoubleTapHandled = true
+    
+    // 清除单击计时器，防止单击事件触发
+    if (singleTapTimer) {
+      clearTimeout(singleTapTimer)
+      singleTapTimer = null
+    }
+    
+    toggleLyrics()
+    
+    // 阻止事件冒泡和默认行为，防止误触进度条
+    event.preventDefault()
+    event.stopPropagation()
+    event.stopImmediatePropagation()
+    
+    console.log('双击切换歌词模式')
+    
+    // 重置标志
+    setTimeout(() => {
+      isDoubleTapHandled = false
+    }, 100)
+  } else {
+    // 单击处理 - 延迟执行，给双击机会
+    if (singleTapTimer) {
+      clearTimeout(singleTapTimer)
+    }
+    
+    singleTapTimer = setTimeout(() => {
+      if (!isDoubleTapHandled) {
+        // 这里可以添加单击逻辑，目前不需要
+        console.log('单击事件')
+      }
+      singleTapTimer = null
+    }, 250) // 250ms延迟，小于双击间隔500ms
+    
+    // 单击时重置双击标志
+    isDoubleTapHandled = false
+  }
+  
+  touchTime = currentTime
+}
+
+const handleTouchEnd = (event) => {
+  // 如果刚处理过双击，也要阻止touchend事件
+  if (isDoubleTapHandled) {
+    event.preventDefault()
+    event.stopPropagation()
+    event.stopImmediatePropagation()
+  }
+}
+
+const handleSeek = (time) => {
+  playerStore.seekTo(time)
+}
+
+const handleSeekTo = (time) => {
+  playerStore.seekTo(time)
+}
+
+// 添加处理左右滑动的方法
+const handleSwipeLeft = () => {
+  // 左滑切换到下一首
+  handleNext()
+}
+
+const handleSwipeRight = () => {
+  // 右滑切换到上一首
+  handlePrevious()
+}
+
+const handleTogglePlay = async () => {
+  // 直接获取App.vue中的音频元素并控制
+  // 这是解决路由版本FullPlayerPage无法控制音频的关键
+  const audioElement = playerStore.audioElement || document.querySelector('audio')
+  
+  if (!audioElement || !currentSong.value) {
+    console.log('没有音频元素或歌曲信息')
+    return
+  }
+
+  try {
+    if (isPlaying.value) {
+      audioElement.pause()
+      playerStore.setPlayingState(false)
+    } else {
+      // 如果没有音频源，需要先获取
+      if (!playerStore.audioSrc || !audioElement.src || audioElement.src === location.href) {
+        console.log('没有音频源，开始加载歌曲')
+        // 通过全局事件触发App.vue中的加载逻辑
+        window.dispatchEvent(new CustomEvent('loadAndPlaySong', { 
+          detail: { song: currentSong.value } 
+        }))
+        return
+      }
+      
+      // 确保音频元素有正确的src
+      if (audioElement.src !== playerStore.audioSrc) {
+        audioElement.src = playerStore.audioSrc
+        audioElement.load()
+      }
+      
+      await audioElement.play()
+      playerStore.setPlayingState(true)
+      console.log('全屏播放器开始播放:', currentSong.value.name)
+    }
+  } catch (error) {
+    console.error('全屏播放器播放失败:', error)
+  }
+}
+
+const handlePrevious = () => {
+  playerStore.previous()
+}
+
+const handleNext = () => {
+  playerStore.next()
+}
+
+const handleTogglePlayMode = () => {
+  playerStore.togglePlayMode()
+}
+
+const handleShowPlaylist = () => {
+  showPlaylist.value = true
+}
+
+const handlePlayFromList = (song, index) => {
+  playerStore.playSong(song, index)
+  showPlaylist.value = false
+}
+
+const handleRemoveFromList = (index) => {
+  playerStore.removeFromPlaylist(index)
+}
+
+const toggleFavorite = async () => {
+  if (!currentSong.value) return
+
+  try {
+    if (isFavorite.value) {
+      await favoritesStore.removeFromFavorites(currentSong.value)
+    } else {
+      await favoritesStore.addToFavorites(currentSong.value)
+    }
+  } catch (error) {
+    console.error('收藏操作失败:', error)
+  }
+}
+
+const handleMoreAction = (action) => {
+  switch (action) {
+    case 'addToPlaylist':
+      // 实现添加到播放列表
+      break
+    case 'viewAlbum':
+      // 实现查看专辑
+      break
+    case 'viewArtist':
+      // 实现查看歌手
+      break
+    case 'selectQuality':
+      showQualitySelector.value = true
+      break
+    case 'report':
+      // 实现举报
+      break
+  }
+  showMoreActions.value = false
+}
+
+// 音质相关方法
+const formatQuality = (quality) => {
+  const qualityMap = {
+    128: '标准',
+    192: '较高',
+    320: 'HQ',
+    740: '无损',
+    999: 'Hi-Res'
+  }
+  return qualityMap[quality] || `${quality}K`
+}
+
+const getSourceName = (source) => {
+  const sourceMap = {
+    'netease': '网易',
+    'tencent': 'QQ',
+    'kugou': '酷狗',
+    'kuwo': '酷我',
+    'migu': '咪咕',
+    'spotify': 'Spot',
+    'apple': 'Apple',
+    'ytmusic': 'YTM',
+    'joox': 'JOOX',
+    'tidal': 'TIDAL',
+    'deezer': 'Deezer',
+    'qobuz': 'Qobuz',
+    'ximalaya': '喜马拉雅'
+  }
+  return sourceMap[source] || source.substring(0, 4)
+}
+
+const selectQuality = async (quality) => {
+  if (quality === currentQuality.value || qualityLoading.value) return
+
+  selectedQuality.value = quality
+  qualityLoading.value = true
+
+  try {
+    // 更新设置中的默认音质
+    await settingsStore.updateSetting('defaultQuality', quality)
+
+    // 如果当前有歌曲在播放，切换音质
+    if (currentSong.value && isPlaying.value) {
+      const currentTime = playerStore.currentTime
+      await playerStore.changeQuality(quality)
+
+      // 恢复播放位置
+      if (currentTime > 0) {
+        setTimeout(() => {
+          playerStore.seekTo(currentTime)
+        }, 500)
+      }
+    }
+
+    // 关闭面板
+    showQualitySelector.value = false
+
+  } catch (error) {
+    console.error('切换音质失败:', error)
+  } finally {
+    qualityLoading.value = false
+    selectedQuality.value = null
+  }
+}
+
+// 获取当前时间对应的歌词
+const getCurrentLyric = () => {
+  if (!currentLyrics.value || currentLyrics.value.length === 0) {
+    return ''
+  }
+
+  const currentTimeSeconds = currentTime.value
+  let currentLyric = ''
+
+  for (let i = 0; i < currentLyrics.value.length; i++) {
+    const lyric = currentLyrics.value[i]
+    if (lyric.time <= currentTimeSeconds) {
+      currentLyric = lyric.text
+    } else {
+      break
+    }
+  }
+
+  return currentLyric
+}
+
+// 加载歌词
+const loadLyrics = async (song) => {
+  if (!song) {
+    currentLyrics.value = []
+    return
+  }
+
+  // 先尝试从缓存获取歌词
+  const cachedLyrics = playerStore.getCachedLyrics(song)
+  if (cachedLyrics) {
+    const parsedLyrics = musicApi.parseLyrics(cachedLyrics.lyric)
+    currentLyrics.value = parsedLyrics.lyrics
+    return
+  }
+
+  try {
+    loading.value = true
+    // 使用带去重的歌词获取方法
+    const lyricsData = await playerStore.getLyricsWithDedup(song)
+
+    // 解析歌词数据
+    const parsedLyrics = musicApi.parseLyrics(lyricsData.lyric)
+    currentLyrics.value = parsedLyrics.lyrics
+  } catch (error) {
+    console.error('加载歌词失败:', error)
+    currentLyrics.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 响应式尺寸计算
+const updateCoverSize = () => {
+  const vh = window.innerHeight
+  const vw = window.innerWidth
+
+  // PC端使用更大的封面
+  if (vw >= 768) {
+    coverSize.value = 350
+  } else {
+    const minSize = Math.min(vw - 80, vh * 0.4)
+    coverSize.value = Math.max(200, Math.min(320, minSize))
+  }
+}
+
+// 键盘事件处理
+const handleKeyDown = (event) => {
+  switch (event.code) {
+    case 'Space':
+      event.preventDefault()
+      handleTogglePlay()
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      handlePrevious()
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      handleNext()
+      break
+    case 'Escape':
+      event.preventDefault()
+      handleBack()
+      break
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  updateCoverSize()
+  window.addEventListener('resize', updateCoverSize)
+  window.addEventListener('keydown', handleKeyDown)
+
+  // 如果有当前歌曲，加载歌词
+  // 注意：由于watch设置了immediate=true，这里不需要再手动调用loadLyrics
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateCoverSize)
+  window.removeEventListener('keydown', handleKeyDown)
+  
+  // 清理单击计时器
+  if (singleTapTimer) {
+    clearTimeout(singleTapTimer)
+    singleTapTimer = null
+  }
+  
+  // 清理歌词加载定时器
+  if (lyricsTimer) {
+    clearTimeout(lyricsTimer)
+    lyricsTimer = null
+  }
+})
+
+// 延时加载歌词的定时器
+let lyricsTimer = null
+
+// 监听歌曲变化
+watch(currentSong, (newSong, oldSong) => {
+  if (newSong && newSong !== oldSong) {
+    // 清理之前的歌词加载定时器
+    if (lyricsTimer) {
+      clearTimeout(lyricsTimer)
+      lyricsTimer = null
+    }
+    
+    // 先加载封面
+    loadAlbumCover()
+    
+    // 延时200ms后再加载歌词，避免同时请求导致503错误
+    lyricsTimer = setTimeout(() => {
+      loadLyrics(newSong)
+      lyricsTimer = null
+    }, 200)
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.full-player {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.background-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: blur(50px) brightness(0.5);
+  transform: scale(1.2);
+  transition: opacity 0.5s ease;
+  opacity: 0.7;
+}
+
+.bg-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0.85) 50%,
+    rgba(255, 255, 255, 0.95) 100%
+  );
+}
+
+.bg-vignette {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(ellipse at center, transparent 80%, rgba(0, 0, 0, 0.1) 100%);
+  pointer-events: none;
+}
+
+/* 黑色主题的背景遮罩 */
+[data-theme="dark"] .bg-image {
+  filter: blur(50px) brightness(0.4);
+  opacity: 0.8;
+}
+
+[data-theme="dark"] .bg-mask {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.5) 50%,
+    rgba(0, 0, 0, 0.9) 100%
+  );
+}
+
+[data-theme="dark"] .bg-vignette {
+  background: radial-gradient(ellipse at center, transparent 80%, rgba(0, 0, 0, 0.4) 100%);
+}
+
+.player-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  position: relative;
+  z-index: 10;
+}
+
+.back-btn,
+.more-btn {
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  transition: var(--transition-fast);
+}
+
+.back-btn:hover,
+.more-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.song-info-header {
+  flex: 1;
+  text-align: center;
+  margin: 0 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  position: relative;
+}
+
+.song-info-header .song-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  margin-top:-15px ;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.song-info-header .artist-name {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: fixed;
+  top: 46px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100vw - 120px);
+  text-align: center;
+  z-index: 11;
+}
+
+.player-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  min-height: 0;
+}
+
+.cover-section,
+.lyrics-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 100%;
+  max-width: 400px;
+  position: relative;
+  margin-top: 45px;
+}
+
+.lyrics-section {
+  padding: 20px 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cover-hint {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  display: none; /* 隐藏双击提示 */
+}
+
+.cover-section:hover .cover-hint {
+  opacity: 1;
+  display: none; /* 隐藏双击提示 */
+}
+
+.song-info {
+  margin-top: 32px;
+  text-align: center;
+  width: 100%;
+  max-width: 400px;
+}
+
+.current-lyric {
+  margin-bottom: 16px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lyric-text {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.4;
+  margin: 0;
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  opacity: 0.9;
+}
+
+.song-info .song-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  line-height: 1.3;
+  flex: 1;
+}
+
+.song-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.favorite-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.favorite-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+.favorite-btn.active {
+  color: var(--accent-red);
+  background: rgba(255, 107, 107, 0.2);
+}
+
+.artist-album-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.artist-album {
+  font-size: 16px;
+  color: var(--text-secondary);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0;
+}
+
+.artist-album .artist,
+.artist-album .album {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+
+.separator {
+  color: var(--text-tertiary);
+}
+
+.favorite-btn-inline {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.favorite-btn-inline:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+.favorite-btn-inline.active {
+  color: var(--accent-red);
+  background: rgba(255, 107, 107, 0.2);
+}
+
+/* 音质选择面板 */
+.quality-selector {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(20px);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.quality-panel {
+  background: var(--bg-card);
+  border-radius: 20px 20px 0 0;
+  padding: 0;
+  width: 100%;
+  max-width: 480px;
+  max-height: 70vh;
+  overflow-y: auto;
+  animation: slideUpPanel 0.3s ease-out;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.panel-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.quality-list {
+  padding: 12px 0;
+}
+
+.quality-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+}
+
+.quality-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.quality-item.active {
+  background: rgba(255, 107, 107, 0.1);
+}
+
+.quality-item.loading {
+  pointer-events: none;
+}
+
+.quality-main {
+  flex: 1;
+}
+
+.quality-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+}
+
+.quality-item.active .quality-name {
+  color: var(--accent-red);
+}
+
+.quality-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.quality-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.quality-size {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  min-width: 60px;
+  text-align: right;
+}
+
+.quality-check {
+  color: var(--accent-red);
+  font-size: 14px;
+}
+
+.quality-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: rgba(255, 255, 255, 0.02);
+  border-top: 1px solid var(--border-lighter);
+}
+
+.quality-note i {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.quality-note span {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+}
+
+.player-controls {
+  flex-shrink: 0;
+  padding: 10px 20px;
+}
+
+/* 歌词模式 */
+.full-player.lyrics-mode .cover-section {
+  display: none;
+}
+
+.full-player.lyrics-mode .lyrics-section {
+  display: flex;
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .player-header {
+    padding: 12px 16px;
+  }
+
+  .back-btn,
+  .more-btn {
+    width: 40px;
+    height: 40px;
+  }
+
+  .song-info-header {
+    margin: 0 12px;
+  }
+
+  .song-info-header .song-title {
+    font-size: 14px;
+  }
+
+  .song-info-header .artist-name {
+    font-size: 11px;
+    top: 56px;
+    width: calc(100vw - 104px);
+  }
+
+  .player-content {
+    padding: 16px;
+  }
+
+  .song-info .song-title {
+    font-size: 20px;
+  }
+
+  .artist-album {
+    font-size: 14px;
+  }
+
+  .artist-album-row {
+    gap: 8px;
+  }
+
+  .player-controls {
+    padding: 10px 16px 24px;
+  }
+}
+
+@media (min-width: 768px) {
+  .full-player {
+    max-width: 600px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 16px 16px 0 0;
+    overflow: hidden;
+  }
+
+  .player-content {
+    padding: 40px;
+  }
+
+  .song-info {
+    margin-top: 40px;
+  }
+
+  .player-controls {
+    padding: 0 40px 40px;
+  }
+
+  /* PC端显示完整歌词 */
+  .lyrics-section {
+    flex: 1;
+    height: auto;
+  }
+
+  .cover-section {
+    display: flex;
+  }
+
+  .full-player.lyrics-mode .cover-section {
+    display: flex;
+  }
+}
+
+/* 动画效果 */
+.full-player {
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+</style>
+@keyframes slideUpPanel {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf16b1a122bbe061dc4390376fe6a75e90dccdf0
--- /dev/null
+++ b/src/views/HomePage.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="home-page">
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <SearchBox @search="handleSearch" />
+    </div>
+
+    <!-- 主内容区域 -->
+    <div class="content-section">
+      <SearchResults
+        :error="searchError"
+        :searched="hasSearched"
+        @retry="retrySearch"
+        @search="handleSearch"
+        @play="handlePlay"
+        @loadMore="handleLoadMore"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useSearchStore } from '@/stores/search'
+import { usePlayerStore } from '@/stores/player'
+import { musicApi, utils } from '@/services/musicApi'
+import SearchBox from '@/components/search/SearchBox.vue'
+import SearchResults from '@/components/search/SearchResults.vue'
+
+const searchStore = useSearchStore()
+const playerStore = usePlayerStore()
+
+// 响应式数据
+const searchError = ref('')
+const hasSearched = ref(false)
+const lastSearchKeyword = ref('')
+
+// 计算属性
+const searchResults = computed(() => searchStore.searchResults)
+const isLoading = computed(() => searchStore.loading)
+
+// 方法
+const handleSearch = async (keyword) => {
+  if (!keyword.trim()) return
+
+  searchError.value = ''
+  hasSearched.value = true
+  lastSearchKeyword.value = keyword.trim()
+
+  try {
+    await searchStore.searchMusic(keyword.trim())
+  } catch (error) {
+    console.error('搜索失败:', error)
+    searchError.value = getErrorMessage(error)
+  }
+}
+
+const handleLoadMore = async () => {
+  if (!lastSearchKeyword.value || isLoading.value) return
+
+  try {
+    await searchStore.loadMore()
+  } catch (error) {
+    console.error('加载更多失败:', error)
+    searchError.value = getErrorMessage(error)
+  }
+}
+
+const retrySearch = () => {
+  if (lastSearchKeyword.value) {
+    handleSearch(lastSearchKeyword.value)
+  }
+}
+
+const handlePlay = async (song, index) => {
+  try {
+    // 设置播放列表为当前搜索结果
+    const currentResults = searchStore.searchResults
+    if (currentResults.length > 0) {
+      playerStore.setPlaylist(currentResults, index)
+    } else {
+      // 如果没有搜索结果，至少添加当前歌曲
+      playerStore.setPlaylist([song], 0)
+    }
+
+  } catch (error) {
+    console.error('播放失败:', error)
+  }
+}
+
+const emitPlayEvent = (song) => {
+  // 这里可以通过事件总线或者其他方式通知App.vue播放歌曲
+  const event = new CustomEvent('playSong', {
+    detail: { song }
+  })
+  window.dispatchEvent(event)
+}
+
+const getErrorMessage = (error) => {
+  if (error.message?.includes('Failed to fetch')) {
+    return '网络连接失败，请检查网络后重试'
+  } else if (error.message?.includes('404')) {
+    return '音乐服务暂时不可用，请稍后重试'
+  } else {
+    return '搜索失败，请重试'
+  }
+}
+
+// 防抖搜索
+const debouncedSearch = musicApi.debounce(handleSearch, 300)
+
+// 组件挂载
+onMounted(() => {
+  // 恢复上次搜索状态
+  if (searchStore.keyword) {
+    hasSearched.value = true
+    lastSearchKeyword.value = searchStore.keyword
+  }
+})
+</script>
+
+<style scoped>
+.home-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+}
+
+.search-section {
+  flex-shrink: 0;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-strong);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 12px 16px;
+  min-height: 60px;
+}
+
+.content-section {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--border-light);
+}
+
+/* 背景动画效果 */
+.home-page::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(-45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), var(--bg-gradient-4));
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+  opacity: 0.15;
+  z-index: -2;
+  pointer-events: none;
+}
+
+.home-page::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--bg-primary);
+  opacity: 0.9;
+  z-index: -1;
+  pointer-events: none;
+}
+
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .search-section {
+    padding: 8px 12px;
+    min-height: 56px;
+  }
+}
+
+/* 平板和桌面端适配 */
+@media (min-width: 768px) {
+  .home-page {
+    max-width: 1200px;
+    margin: 0 auto;
+    border-left: 1px solid var(--border-light);
+    border-right: 1px solid var(--border-light);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .search-section {
+    padding: 20px 24px;
+    min-height: 80px;
+    border-bottom: 1px solid var(--border-strong);
+  }
+
+  .content-section {
+    border-top: 1px solid var(--border-light);
+  }
+}
+
+@media (min-width: 1024px) {
+  .home-page {
+    flex-direction: row;
+    gap: 24px;
+    padding: 24px;
+    max-width: 1400px;
+  }
+
+  .search-section {
+    width: 350px;
+    flex-shrink: 0;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: none;
+    padding: 24px;
+    min-height: 100px;
+  }
+
+  .content-section {
+    flex: 1;
+    border-top: none;
+  }
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index d5c0217e45ce8f933917195f236f1d118b317e86..0000000000000000000000000000000000000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>
diff --git a/src/views/MyMusicPage.vue b/src/views/MyMusicPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a399c0d67d054474bbacd09e5ecfdfeb70200bd4
--- /dev/null
+++ b/src/views/MyMusicPage.vue
@@ -0,0 +1,628 @@
+<template>
+  <div class="my-music-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <i class="fas fa-heart"></i>
+        我的音乐
+      </h1>
+    </div>
+    
+    <!-- 统计卡片 -->
+    <div class="stats-cards">
+      <div class="stat-card">
+        <div class="stat-number">{{ favoriteCount }}</div>
+        <div class="stat-label">收藏歌曲</div>
+      </div>
+      
+      <div class="stat-card">
+        <div class="stat-number">{{ historyCount }}</div>
+        <div class="stat-label">播放历史</div>
+      </div>
+      
+      <div class="stat-card">
+        <div class="stat-number">{{ totalPlayTime }}</div>
+        <div class="stat-label">累计时长</div>
+      </div>
+    </div>
+    
+    <!-- 选项卡 -->
+    <div class="tabs-container">
+      <div class="tabs">
+        <button 
+          class="tab-btn" 
+          :class="{ active: activeTab === 'favorites' }"
+          @click="activeTab = 'favorites'"
+        >
+          <i class="fas fa-heart"></i>
+          <span>我的收藏</span>
+          <span class="tab-count">{{ favoriteCount }}</span>
+        </button>
+        
+        <button 
+          class="tab-btn" 
+          :class="{ active: activeTab === 'history' }"
+          @click="activeTab = 'history'"
+        >
+          <i class="fas fa-history"></i>
+          <span>播放历史</span>
+          <span class="tab-count">{{ historyCount }}</span>
+        </button>
+      </div>
+    </div>
+    
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <!-- 收藏列表 -->
+      <div v-if="activeTab === 'favorites'" class="favorites-content">
+        <FavoritesList 
+          @play="handlePlayFromFavorites"
+          @batch-action="handleBatchAction"
+          @more-action="handleMoreAction"
+        />
+      </div>
+      
+      <!-- 历史记录 -->
+      <div v-if="activeTab === 'history'" class="history-content">
+        <div class="content-actions" v-if="hasHistory">
+          <div class="action-buttons">
+            <button class="action-btn clear-history" @click="clearHistory">
+              <i class="fas fa-trash"></i>
+              <span>清空历史</span>
+            </button>
+          </div>
+        </div>
+        
+        <!-- 按日期分组的历史记录 -->
+        <div class="history-list">
+          <div v-if="!hasHistory" class="empty-state">
+            <i class="fas fa-history"></i>
+            <p>还没有播放记录</p>
+            <p class="empty-tip">播放过的歌曲会在这里显示</p>
+          </div>
+          
+          <div v-for="(group, date) in groupedHistory" :key="date" class="history-group">
+            <div class="group-header">
+              <h3 class="group-date">{{ formatDate(date) }}</h3>
+              <span class="group-count">{{ group.length }}首</span>
+            </div>
+            
+            <SongItem
+              v-for="(item, index) in group"
+              :key="`${item.song.id}-${item.timestamp}`"
+              :song="item.song"
+              :index="index + 1"
+              :showTime="true"
+              :playTime="item.timestamp"
+              @play="handlePlay"
+              @favorite="handleFavorite"
+              @more="handleMore"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useFavoritesStore } from '@/stores/favorites'
+import { usePlayerStore } from '@/stores/player'
+import { useHistoryStore } from '@/stores/history'
+import { utils } from '@/services/musicApi'
+import SongItem from '@/components/search/SongItem.vue'
+import FavoritesList from '@/components/favorites/FavoritesList.vue'
+
+const router = useRouter()
+const favoritesStore = useFavoritesStore()
+const playerStore = usePlayerStore()
+const historyStore = useHistoryStore()
+
+// 响应式数据
+const activeTab = ref('favorites')
+
+// 计算属性
+const favorites = computed(() => favoritesStore.favorites)
+const favoriteCount = computed(() => favorites.value.length)
+const hasFavorites = computed(() => favoriteCount.value > 0)
+
+const history = computed(() => historyStore.history)
+const historyCount = computed(() => history.value.length)
+const hasHistory = computed(() => historyCount.value > 0)
+
+const totalPlayTime = computed(() => {
+  const totalSeconds = historyStore.totalPlayTime
+  return utils.formatDuration(totalSeconds)
+})
+
+// 按日期分组的历史记录
+const groupedHistory = computed(() => {
+  const groups = {}
+  history.value.forEach(item => {
+    const date = new Date(item.timestamp).toDateString()
+    if (!groups[date]) {
+      groups[date] = []
+    }
+    groups[date].push(item)
+  })
+  
+  // 按日期排序（最新的在前）
+  const sortedGroups = {}
+  Object.keys(groups)
+    .sort((a, b) => new Date(b) - new Date(a))
+    .forEach(date => {
+      sortedGroups[date] = groups[date].sort((a, b) => b.timestamp - a.timestamp)
+    })
+  
+  return sortedGroups
+})
+
+// 方法
+const handlePlayFromFavorites = (song) => {
+  // 从收藏列表播放
+  if (Array.isArray(song)) {
+    // 播放多首歌曲
+    playerStore.setPlaylist(song)
+    playerStore.playSong(song[0], 0)
+  } else {
+    // 播放单首歌曲
+    playerStore.setPlaylist(favorites.value.map(item => item.song))
+    const playlist = favorites.value.map(item => item.song)
+    const index = playlist.findIndex(s => s.id === song.id)
+    playerStore.playSong(song, index)
+  }
+  
+  // 添加到播放历史
+  if (Array.isArray(song)) {
+    song.forEach(s => historyStore.addToHistory(s))
+  } else {
+    historyStore.addToHistory(song)
+  }
+}
+
+const handleBatchAction = (data) => {
+  const { action, songs, count } = data
+  
+  switch (action) {
+    case 'play':
+      console.log('批量播放:', songs)
+      break
+    case 'add-to-playlist':
+      console.log('批量添加到播放列表:', songs)
+      break
+    case 'remove':
+      console.log('批量删除完成，删除了', count, '首歌曲')
+      break
+  }
+}
+
+const handleMoreAction = (data) => {
+  const { action, song } = data
+  
+  switch (action) {
+    case 'play-next':
+      console.log('下一首播放:', song)
+      break
+    case 'add-to-playlist':
+      console.log('添加到播放列表:', song)
+      break
+    case 'copy-link':
+      console.log('已复制链接:', song)
+      break
+    case 'view-details':
+      console.log('查看详情:', song)
+      break
+  }
+}
+
+const clearHistory = async () => {
+  if (confirm('确定要清空所有播放历史吗？此操作不可撤销。')) {
+    try {
+      await historyStore.clearHistory()
+    } catch (error) {
+      console.error('清空历史失败:', error)
+    }
+  }
+}
+
+const handlePlay = (song, index) => {
+  let playlist = []
+  
+  switch (activeTab.value) {
+    case 'history':
+      // 获取当前日期组的歌曲
+      const currentGroup = Object.values(groupedHistory.value).flat()
+      playlist = currentGroup.map(item => item.song)
+      break
+  }
+  
+  playerStore.setPlaylist(playlist)
+  playerStore.playSong(song, playlist.findIndex(s => s.id === song.id))
+  
+  // 添加到播放历史
+  historyStore.addToHistory(song)
+}
+
+const handleFavorite = async (song) => {
+  try {
+    if (favoritesStore.isFavorite(song.id)) {
+      await favoritesStore.removeFavorite(song.id)
+    } else {
+      await favoritesStore.addFavorite(song)
+    }
+  } catch (error) {
+    console.error('收藏操作失败:', error)
+  }
+}
+
+const handleMore = (song) => {
+  // 显示更多操作菜单
+  console.log('更多操作:', song)
+}
+
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+  
+  if (date.toDateString() === today.toDateString()) {
+    return '今天'
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    return '昨天'
+  } else {
+    return utils.formatDate(date)
+  }
+}
+
+// 生命周期
+onMounted(async () => {
+  // 加载数据
+  try {
+    await Promise.all([
+      favoritesStore.loadFavorites(),
+      historyStore.loadHistory()
+    ])
+  } catch (error) {
+    console.error('加载数据失败:', error)
+  }
+})
+</script>
+
+<style scoped>
+.my-music-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.page-title i {
+  color: var(--accent-red);
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.action-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  padding: 20px 16px;
+  background: var(--bg-card);
+  border-radius: var(--radius-small);
+  margin: 0 16px 16px;
+  border: 1px solid var(--border-light);
+}
+
+.stat-card {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-number {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--accent-red);
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.tabs-container {
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--bg-card);
+  border-radius: var(--radius-small) var(--radius-small) 0 0;
+  margin: 0 16px;
+  border: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.tabs {
+  display: flex;
+  padding: 0 16px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 15px;
+  cursor: pointer;
+  white-space: nowrap;
+  border-bottom: 3px solid transparent;
+  transition: var(--transition-fast);
+}
+
+.tab-btn.active {
+  color: var(--accent-red);
+  border-bottom-color: var(--accent-red);
+}
+
+.tab-btn:hover:not(.active) {
+  color: var(--text-primary);
+}
+
+.tab-count {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-tertiary);
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  min-width: 16px;
+  text-align: center;
+}
+
+.tab-btn.active .tab-count {
+  background: rgba(255, 107, 107, 0.2);
+  color: var(--accent-red);
+}
+
+.content-area {
+  flex: 1;
+  min-height: 0;
+}
+
+.content-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+}
+
+.selection-info {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.play-all {
+  background: var(--accent-red);
+  color: white;
+}
+
+.play-all:hover:not(:disabled) {
+  background: var(--accent-red-hover);
+}
+
+.delete-selected {
+  background: #ff4444;
+  color: white;
+}
+
+.delete-selected:hover:not(:disabled) {
+  background: #ff6666;
+}
+
+.clear-history,
+.scan-local {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.song-list,
+.history-list,
+.downloads-list {
+  padding-bottom: calc(var(--mini-player-height) + var(--tabbar-height) + 20px);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+
+.empty-state i {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+
+.empty-state p {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.empty-tip {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+
+.go-discover-btn {
+  padding: 12px 24px;
+  border: none;
+  background: var(--accent-red);
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.go-discover-btn:hover {
+  background: var(--accent-red-hover);
+  transform: scale(1.05);
+}
+
+.history-group {
+  margin-bottom: 24px;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 8px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+}
+
+.group-date {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.group-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* 响应式 */
+@media (max-width: 375px) {
+  .page-header {
+    padding: 12px;
+  }
+  
+  .page-title {
+    font-size: 20px;
+  }
+  
+  .stats-cards {
+    padding: 16px 12px;
+    gap: 8px;
+    margin: 0 12px 12px;
+  }
+  
+  .stat-card {
+    padding: 12px;
+  }
+  
+  .stat-number {
+    font-size: 20px;
+  }
+  
+  .tabs {
+    padding: 0 12px;
+  }
+  
+  .content-actions {
+    padding: 12px;
+  }
+  
+  .empty-state {
+    padding: 40px 20px;
+  }
+  
+  .empty-state i {
+    font-size: 48px;
+  }
+  
+  .tabs-container {
+    margin: 0 12px;
+  }
+}
+
+@media (min-width: 768px) {
+  .my-music-page {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
+  .stats-cards {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 24px 16px;
+  }
+  
+  .song-list,
+  .history-list,
+  .downloads-list {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f347bf5d6625641462537c3bdc97f76fdde1ae2b
--- /dev/null
+++ b/src/views/SettingsPage.vue
@@ -0,0 +1,1260 @@
+<template>
+  <div class="settings-page">
+    <!-- 头部 -->
+    <div class="page-header">
+      <h1 class="page-title">
+        <i class="fas fa-cog"></i>
+        设置
+      </h1>
+    </div>
+    
+    <!-- 设置内容 -->
+    <div class="settings-content">
+      <!-- 播放设置 -->
+      <div class="settings-section">
+        <h2 class="section-title">
+          <i class="fas fa-play"></i>
+          播放设置
+        </h2>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>默认音质</span>
+            <p class="setting-desc">选择播放和下载时的默认音质</p>
+          </div>
+          <!-- 大屏幕显示原生下拉框，小屏幕显示自定义选择器 -->
+          <select 
+            v-if="!isMobile" 
+            v-model="settings.defaultQuality" 
+            @change="updateSetting('defaultQuality')"
+            class="pc-select"
+          >
+            <option 
+              v-for="quality in qualityOptions"
+              :key="quality.value"
+              :value="quality.value"
+            >
+              {{ quality.label }}
+            </option>
+          </select>
+          <button 
+            v-else 
+            class="mobile-select-btn" 
+            @click="openSelector('defaultQuality', qualityOptions)"
+          >
+            <span>{{ getQualityText(settings.defaultQuality) }}</span>
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>默认播放模式</span>
+            <p class="setting-desc">应用启动时的默认播放模式</p>
+          </div>
+          <select 
+            v-if="!isMobile" 
+            v-model="settings.defaultPlayMode" 
+            @change="updateSetting('defaultPlayMode')"
+            class="pc-select"
+          >
+            <option value="list">列表循环</option>
+            <option value="single">单曲循环</option>
+            <option value="random">随机播放</option>
+          </select>
+          <button 
+            v-else 
+            class="mobile-select-btn" 
+            @click="openSelector('defaultPlayMode', playModeOptions)"
+          >
+            <span>{{ getPlayModeText(settings.defaultPlayMode) }}</span>
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+        
+        <div class="setting-item switch-item">
+          <div class="setting-label">
+            <span>自动播放下一首</span>
+            <p class="setting-desc">当前歌曲结束后自动播放下一首</p>
+          </div>
+          <label class="switch">
+            <input 
+              type="checkbox" 
+              v-model="settings.autoNext"
+              @change="updateSetting('autoNext')"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+        
+        <div class="setting-item switch-item">
+          <div class="setting-label">
+            <span>淡入淡出效果</span>
+            <p class="setting-desc">歌曲切换时的淡入淡出效果</p>
+          </div>
+          <label class="switch">
+            <input 
+              type="checkbox" 
+              v-model="settings.fadeEffect"
+              @change="updateSetting('fadeEffect')"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+      
+      <!-- 搜索设置 -->
+      <div class="settings-section">
+        <h2 class="section-title">
+          <i class="fas fa-search"></i>
+          搜索设置
+        </h2>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>默认音乐源</span>
+            <p class="setting-desc">搜索时优先使用的音乐平台</p>
+          </div>
+          <select 
+            v-if="!isMobile" 
+            v-model="settings.defaultSource" 
+            @change="updateSetting('defaultSource')"
+            class="pc-select"
+          >
+            <option 
+              v-for="source in sourceOptions"
+              :key="source.value"
+              :value="source.value"
+            >
+              {{ source.label }}
+            </option>
+          </select>
+          <button 
+            v-else 
+            class="mobile-select-btn" 
+            @click="openSelector('defaultSource', sourceOptions)"
+          >
+            <span>{{ getSourceText(settings.defaultSource) }}</span>
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>搜索结果数量</span>
+            <p class="setting-desc">每页显示的搜索结果数量</p>
+          </div>
+          <select 
+            v-if="!isMobile" 
+            v-model="settings.searchLimit" 
+            @change="updateSetting('searchLimit')"
+            class="pc-select"
+          >
+            <option value="20">20首</option>
+            <option value="30">30首</option>
+            <option value="50">50首</option>
+          </select>
+          <button 
+            v-else 
+            class="mobile-select-btn" 
+            @click="openSelector('searchLimit', searchLimitOptions)"
+          >
+            <span>{{ settings.searchLimit }}首</span>
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+        
+        <div class="setting-item switch-item">
+          <div class="setting-label">
+            <span>搜索历史</span>
+            <p class="setting-desc">保存搜索关键词历史</p>
+          </div>
+          <label class="switch">
+            <input 
+              type="checkbox" 
+              v-model="settings.saveSearchHistory"
+              @change="updateSetting('saveSearchHistory')"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+      
+      
+      <!-- 外观设置 -->
+      <div class="settings-section">
+        <h2 class="section-title">
+          <i class="fas fa-palette"></i>
+          外观设置
+        </h2>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>主题模式</span>
+            <p class="setting-desc">选择应用的主题风格</p>
+          </div>
+          <select 
+            v-if="!isMobile" 
+            v-model="settings.theme" 
+            @change="updateTheme"
+            class="pc-select"
+          >
+            <option 
+              v-for="theme in themeOptions"
+              :key="theme.value"
+              :value="theme.value"
+            >
+              {{ theme.label }}
+            </option>
+          </select>
+          <button 
+            v-else 
+            class="mobile-select-btn" 
+            @click="openSelector('theme', themeOptions)"
+          >
+            <span>{{ getThemeText(settings.theme) }}</span>
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+        
+        <div class="setting-item" v-show="false">
+          <div class="setting-label">
+            <span>主题色</span>
+            <p class="setting-desc">自定义应用的主色调（现在由主题自动管理）</p>
+          </div>
+          <div class="color-picker">
+            <div 
+              v-for="color in themeColors" 
+              :key="color.value"
+              class="color-option"
+              :class="{ active: settings.accentColor === color.value }"
+              :style="{ backgroundColor: color.value }"
+              @click="updateAccentColor(color.value)"
+              :title="color.name"
+            ></div>
+          </div>
+        </div>
+        
+        <div class="setting-item switch-item">
+          <div class="setting-label">
+            <span>显示歌词</span>
+            <p class="setting-desc">播放时自动显示歌词</p>
+          </div>
+          <label class="switch">
+            <input 
+              type="checkbox" 
+              v-model="settings.showLyrics"
+              @change="updateSetting('showLyrics')"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>歌词字体大小</span>
+            <p class="setting-desc">调整歌词显示的字体大小</p>
+          </div>
+          <div class="slider-container">
+            <input 
+              type="range" 
+              min="14" 
+              max="24" 
+              step="2"
+              v-model="settings.lyricsFontSize"
+              @change="updateSetting('lyricsFontSize')"
+              class="range-slider"
+            />
+            <span class="slider-value">{{ settings.lyricsFontSize }}px</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 通知设置 -->
+      <div class="settings-section">
+        <h2 class="section-title">
+          <i class="fas fa-bell"></i>
+          通知设置
+        </h2>
+        
+        <div class="setting-item switch-item">
+          <div class="setting-label">
+            <span>桌面通知</span>
+            <p class="setting-desc">歌曲切换时显示桌面通知</p>
+          </div>
+          <label class="switch">
+            <input 
+              type="checkbox" 
+              v-model="settings.desktopNotification"
+              @change="updateSetting('desktopNotification')"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+        
+        <div class="setting-item switch-item">
+          <div class="setting-label">
+            <span>媒体控制</span>
+            <p class="setting-desc">系统媒体控制集成 (锁屏控制)</p>
+          </div>
+          <label class="switch">
+            <input 
+              type="checkbox" 
+              v-model="settings.mediaSession"
+              @change="updateSetting('mediaSession')"
+            />
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+      
+      <!-- 存储管理 -->
+      <div class="settings-section">
+        <h2 class="section-title">
+          <i class="fas fa-database"></i>
+          存储管理
+        </h2>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>清除搜索历史</span>
+            <p class="setting-desc">删除所有搜索记录</p>
+          </div>
+          <button class="action-button" @click="clearSearchHistory">
+            <i class="fas fa-trash"></i>
+            清除搜索历史
+          </button>
+        </div>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>清除播放历史</span>
+            <p class="setting-desc">删除所有播放记录</p>
+          </div>
+          <button class="action-button" @click="clearPlayHistory">
+            <i class="fas fa-trash"></i>
+            清除播放历史
+          </button>
+        </div>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>清除收藏数据</span>
+            <p class="setting-desc">删除所有收藏歌曲</p>
+          </div>
+          <button class="action-button danger" @click="clearFavorites">
+            <i class="fas fa-heart-broken"></i>
+            清除收藏数据
+          </button>
+        </div>
+      </div>
+      
+      <!-- 关于信息 -->
+      <div class="settings-section">
+        <h2 class="section-title">
+          <i class="fas fa-info-circle"></i>
+          关于
+        </h2>
+        
+        <div class="about-info">
+          <div class="app-logo">
+            <i class="fas fa-music"></i>
+          </div>
+          <div class="app-details">
+            <h3>云音乐 PWA</h3>
+            <p>版本 {{ appVersion }}</p>
+            <p>基于 Vue 3 构建的渐进式音乐应用</p>
+          </div>
+        </div>
+        
+        <div class="setting-item">
+          <div class="setting-label">
+            <span>检查更新</span>
+            <p class="setting-desc">检查是否有新版本可用</p>
+          </div>
+          <button class="action-button" @click="checkUpdate" :disabled="checkingUpdate">
+            <i :class="checkingUpdate ? 'fas fa-spinner fa-spin' : 'fas fa-sync'"></i>
+            {{ checkingUpdate ? '检查中...' : '检查更新' }}
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 移动端选择器弹窗 -->
+    <div v-if="showSelector" class="mobile-selector-overlay" @click="closeSelector">
+      <div class="mobile-selector-content" @click.stop>
+        <div class="selector-header">
+          <h3>{{ selectorTitle }}</h3>
+          <button class="close-btn" @click="closeSelector">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        
+        <div class="options-list">
+          <button
+            v-for="option in selectorOptions"
+            :key="option.value"
+            class="option-item"
+            :class="{ active: option.value === selectorCurrentValue }"
+            @click="selectOption(option.value)"
+          >
+            <span class="option-name">{{ option.label }}</span>
+            <i v-if="option.value === selectorCurrentValue" class="fas fa-check check-icon"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useSettingsStore } from '@/stores/settings'
+import { useFavoritesStore } from '@/stores/favorites'
+import { useHistoryStore } from '@/stores/history'
+import { useSearchStore } from '@/stores/search'
+import { useToastStore } from '@/stores/toast'
+import { MUSIC_SOURCES, QUALITY_OPTIONS } from '@/services/musicApi'
+
+const settingsStore = useSettingsStore()
+const favoritesStore = useFavoritesStore()
+const historyStore = useHistoryStore()
+const searchStore = useSearchStore()
+const toastStore = useToastStore()
+
+// 响应式数据
+const checkingUpdate = ref(false)
+const isMobile = ref(window.innerWidth <= 768)
+const showSelector = ref(false)
+const selectorKey = ref('')
+const selectorOptions = ref([])
+const selectorTitle = ref('')
+const selectorCurrentValue = ref('')
+
+// 计算属性
+const settings = computed(() => settingsStore.settings)
+const appVersion = computed(() => '1.0.0')
+
+// 选项数据
+const qualityOptions = QUALITY_OPTIONS
+
+const playModeOptions = [
+  { value: 'list', label: '列表循环' },
+  { value: 'single', label: '单曲循环' },
+  { value: 'random', label: '随机播放' }
+]
+
+const sourceOptions = MUSIC_SOURCES.map(source => ({
+  value: source.code,
+  label: source.name
+}))
+
+const searchLimitOptions = [
+  { value: '20', label: '20首' },
+  { value: '30', label: '30首' },
+  { value: '50', label: '50首' }
+]
+
+const themeOptions = computed(() => {
+  return settingsStore.getAvailableThemes().map(theme => ({
+    value: theme.id,
+    label: theme.name
+  }))
+})
+
+// 主题色选项
+const themeColors = [
+  { name: '网易红', value: '#ff6b6b' },
+  { name: '粉色', value: '#ff8cc8' },
+  { name: '紫色', value: '#9c88ff' },
+  { name: '蓝色', value: '#3182ce' },
+  { name: '青色', value: '#00d4aa' },
+  { name: '绿色', value: '#48bb78' },
+  { name: '黄色', value: '#ed8936' },
+  { name: '橙色', value: '#ff9500' }
+]
+
+// 方法
+const updateSetting = (key) => {
+  settingsStore.updateSetting(key, settings.value[key])
+}
+
+const updateTheme = () => {
+  const theme = settings.value.theme
+  settingsStore.updateSetting('theme', theme)
+  console.log(`主题已更新为: ${theme}`)
+}
+
+const updateAccentColor = (color) => {
+  settingsStore.updateSetting('accentColor', color)
+  // 立即更新CSS变量
+  document.documentElement.style.setProperty('--accent-red', color)
+}
+
+const clearSearchHistory = async () => {
+  if (confirm('确定要清除所有搜索历史吗？')) {
+    try {
+      searchStore.clearHistory()
+      toastStore.success('搜索历史已清除')
+    } catch (error) {
+      console.error('清除搜索历史失败:', error)
+      toastStore.error('清除失败')
+    }
+  }
+}
+
+const clearPlayHistory = async () => {
+  if (confirm('确定要清除所有播放历史吗？')) {
+    try {
+      await historyStore.clearHistory()
+      toastStore.success('播放历史已清除')
+    } catch (error) {
+      console.error('清除播放历史失败:', error)
+      toastStore.error('清除失败')
+    }
+  }
+}
+
+const clearFavorites = async () => {
+  if (confirm('确定要清除所有收藏歌曲吗？此操作不可撤销！')) {
+    if (confirm('最后确认：真的要删除所有收藏吗？')) {
+      try {
+        await favoritesStore.clearAll()
+        toastStore.success('收藏数据已清除')
+      } catch (error) {
+        console.error('清除收藏失败:', error)
+        toastStore.error('清除失败')
+      }
+    }
+  }
+}
+
+const checkUpdate = async () => {
+  checkingUpdate.value = true
+  
+  try {
+    // 在实际应用中，这里应该检查服务器是否有新版本
+    await new Promise(resolve => setTimeout(resolve, 2000)) // 模拟网络请求
+    
+    toastStore.success('当前已是最新版本')
+  } catch (error) {
+    console.error('检查更新失败:', error)
+    toastStore.error('检查更新失败')
+  } finally {
+    checkingUpdate.value = false
+  }
+}
+
+// 响应式处理
+const handleResize = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+// 移动端选择器相关方法
+const openSelector = (key, options) => {
+  selectorKey.value = key
+  selectorOptions.value = options
+  selectorCurrentValue.value = settings.value[key]
+  
+  // 设置标题
+  const titleMap = {
+    'defaultQuality': '选择音质',
+    'defaultPlayMode': '选择播放模式', 
+    'defaultSource': '选择音乐源',
+    'searchLimit': '选择结果数量',
+    'theme': '选择主题'
+  }
+  selectorTitle.value = titleMap[key] || '选择项目'
+  
+  showSelector.value = true
+  document.body.style.overflow = 'hidden'
+}
+
+const closeSelector = () => {
+  showSelector.value = false
+  document.body.style.overflow = 'auto'
+}
+
+const selectOption = (value) => {
+  settingsStore.updateSetting(selectorKey.value, value)
+  
+  // 特殊处理主题更新
+  if (selectorKey.value === 'theme') {
+    updateTheme()
+  }
+  
+  closeSelector()
+}
+
+// 获取显示文本的辅助方法
+const getQualityText = (value) => {
+  const option = qualityOptions.find(o => o.value === value)
+  return option ? option.label : '标准音质 (128kbps)'
+}
+
+const getPlayModeText = (value) => {
+  const option = playModeOptions.find(o => o.value === value)
+  return option ? option.label : '列表循环'
+}
+
+const getSourceText = (value) => {
+  const option = sourceOptions.find(o => o.value === value)
+  return option ? option.label : '网易云音乐'
+}
+
+const getThemeText = (value) => {
+  const option = themeOptions.value.find(o => o.value === value)
+  return option ? option.label : '白色炫彩'
+}
+
+// 生命周期
+onMounted(() => {
+  settingsStore.loadSettings()
+  window.addEventListener('resize', handleResize)
+  handleResize()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  document.body.style.overflow = 'auto'
+})
+</script>
+
+<style scoped>
+.settings-page {
+  height: 100%;
+  background: var(--bg-primary);
+  overflow-y: auto;
+  padding-bottom: calc(var(--tabbar-height) + 20px);
+}
+
+.page-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-strong);
+  background: var(--bg-card);
+  margin: 0 16px;
+  border-radius: var(--radius-small) var(--radius-small) 0 0;
+  border: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 16px 0;
+}
+
+.page-title i {
+  color: var(--accent-red);
+}
+
+.settings-content {
+  padding: 0;
+}
+
+.settings-section {
+  margin-bottom: 32px;
+  background: var(--bg-card);
+  border-radius: var(--radius-small);
+  margin: 0 16px 16px;
+  border: 1px solid var(--border-light);
+  overflow: hidden;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 16px 0;
+  padding: 16px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.section-title i {
+  color: var(--accent-red);
+  font-size: 16px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  min-height: 60px;
+  background: var(--bg-card);
+}
+
+.setting-label {
+  flex: 1;
+  margin-right: 16px;
+}
+
+.setting-label span {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: 4px;
+}
+
+.setting-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.danger-text {
+  color: #ff4444;
+}
+
+/* 开关样式 */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 28px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 28px;
+  transition: var(--transition-fast);
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 22px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+}
+
+input:checked + .slider {
+  background-color: var(--accent-red);
+}
+
+input:checked + .slider:before {
+  transform: translateX(22px);
+}
+
+/* PC端选择框样式 */
+.pc-select {
+  padding: 10px 12px;
+  border: 2px solid var(--border-card);
+  border-radius: 8px;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  font-size: 14px;
+  min-width: 120px;
+  max-width: 200px;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+
+.pc-select:focus {
+  outline: none;
+  border-color: var(--accent-red);
+  background: rgba(255, 255, 255, 1);
+}
+
+.pc-select option {
+  background: var(--bg-card);
+  color: var(--text-primary);
+  padding: 8px;
+}
+
+/* 黑色主题下的PC选择框样式 */
+[data-theme="dark"] .pc-select:focus {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* 移动端选择按钮样式 */
+.mobile-select-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border: 2px solid var(--border-card);
+  border-radius: 8px;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+  width: 100%;
+  transition: var(--transition-fast);
+}
+
+.mobile-select-btn:hover {
+  border-color: var(--border-light);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.mobile-select-btn i {
+  color: var(--text-secondary);
+  font-size: 12px;
+  transition: var(--transition-fast);
+}
+
+/* 移动端选择器弹窗样式 */
+.mobile-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  z-index: 2000;
+  animation: fadeIn 0.3s ease;
+}
+
+.mobile-selector-content {
+  width: 100%;
+  max-height: 70vh;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border-radius: 20px 20px 0 0;
+  animation: slideUp 0.3s ease;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.selector-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-strong);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.selector-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: var(--transition-fast);
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+}
+
+.options-list {
+  max-height: calc(70vh - 160px);
+  overflow-y: auto;
+  padding: 8px 0;
+  background: var(--bg-card);
+}
+
+.option-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  border-bottom: 1px solid var(--border-lighter);
+}
+
+.option-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.option-item.active {
+  background: rgba(255, 107, 107, 0.1);
+  color: var(--accent-red);
+  border-bottom: 1px solid var(--accent-red);
+}
+
+.option-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.option-item.active .option-name {
+  color: var(--accent-red);
+}
+
+.check-icon {
+  color: var(--accent-red);
+  font-size: 16px;
+}
+
+/* 滚动条样式 */
+.options-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.options-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.options-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.options-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* 颜色选择器 */
+.color-picker {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 4px 0;
+}
+
+.color-option {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transition: var(--transition-fast);
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.color-option:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.color-option.active {
+  border: 3px solid var(--text-primary);
+  transform: scale(1.1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.color-option.active::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* 滑块样式 */
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.range-slider {
+  flex: 1;
+  min-width: 120px;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.2);
+  outline: none;
+  cursor: pointer;
+}
+
+.range-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--accent-red);
+  cursor: pointer;
+}
+
+.range-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--accent-red);
+  border: none;
+  cursor: pointer;
+}
+
+.slider-value {
+  font-size: 14px;
+  color: var(--text-secondary);
+  min-width: 40px;
+  text-align: right;
+}
+
+/* 按钮样式 */
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.action-button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-button.danger {
+  background: rgba(255, 68, 68, 0.2);
+  color: #ff4444;
+}
+
+.action-button.danger:hover:not(:disabled) {
+  background: rgba(255, 68, 68, 0.3);
+}
+
+/* 关于信息 */
+.about-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--border-lighter);
+  background: var(--bg-card);
+}
+
+.app-logo {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-hover));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+}
+
+.app-details h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px 0;
+}
+
+.app-details p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 2px 0;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .settings-page {
+    padding-bottom: calc(var(--tabbar-height) + 30px);
+  }
+  
+  .page-header {
+    padding: 16px;
+    margin: 0 16px;
+  }
+  
+  .page-title {
+    font-size: 22px;
+    margin-bottom: 12px;
+  }
+  
+  .section-title {
+    font-size: 17px;
+    padding: 16px;
+  }
+  
+  .setting-item {
+    padding: 18px 16px;
+    min-height: auto;
+    gap: 14px;
+  }
+  
+  /* 默认：分成两行布局 */
+  .setting-item {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+  
+  /* 有开关的项目：保持一行 */
+  .setting-item.switch-item {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+  }
+  
+  .setting-label {
+    margin: 0;
+    width: 100%;
+    order: 1;
+  }
+  
+  /* 开关项目的标签样式 */
+  .setting-item.switch-item .setting-label {
+    flex: 1;
+    margin-right: 16px;
+    order: 0;
+  }
+  
+  .setting-label span {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--text-primary);
+    display: block;
+    margin-bottom: 6px;
+    line-height: 1.3;
+    text-align: left;
+  }
+  
+  /* 开关项目的标签文字 */
+  .setting-item.switch-item .setting-label span {
+    margin-bottom: 4px;
+  }
+  
+  .setting-desc {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.4;
+    display: block;
+    text-align: left;
+  }
+  
+  /* 控制元素在第二行（除了开关） */
+  .mobile-select-btn,
+  .color-picker,
+  .slider-container,
+  .action-button {
+    order: 2;
+    width: 100%;
+    align-self: stretch;
+  }
+  
+  /* 开关保持在同一行 */
+  .setting-item.switch-item .switch {
+    order: 1;
+    align-self: center;
+    width: 50px !important;  /* 强制设置开关宽度 */
+    height: 28px !important; /* 强制设置开关高度 */
+    flex-shrink: 0;
+    min-width: 50px;         /* 确保最小宽度 */
+    max-width: 50px;         /* 确保最大宽度 */
+  }
+  
+  .mobile-select-btn {
+    min-height: 44px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .color-picker {
+    justify-content: flex-start;
+    gap: 12px;
+  }
+  
+  .color-option {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .slider-container {
+    margin-top: 4px;
+  }
+  
+  .about-info {
+    padding: 20px 16px;
+    gap: 16px;
+  }
+  
+  .app-logo {
+    width: 60px;
+    height: 60px;
+    font-size: 22px;
+  }
+  
+  .settings-section {
+    margin: 0 16px 20px;
+    border-radius: 12px;
+  }
+}
+
+@media (min-width: 768px) {
+  .settings-page {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  /* PC端选择框样式优化 */
+  .pc-select {
+    width: auto; /* PC端使用自动宽度 */
+    min-width: 140px;
+    max-width: 200px; /* 限制最大宽度 */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
deleted file mode 100644
index 913b8f279fca6f23c1b6532660583d2ec4ccebab..0000000000000000000000000000000000000000
--- a/tsconfig.app.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 66b5e5703e83c352671ce094731e9e861ada6924..0000000000000000000000000000000000000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
-}
diff --git a/tsconfig.node.json b/tsconfig.node.json
deleted file mode 100644
index a83dfc9d48fbd0875fb6c33ac2c7bccd5a311be2..0000000000000000000000000000000000000000
--- a/tsconfig.node.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "extends": "@tsconfig/node22/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*",
-    "eslint.config.*"
-  ],
-  "compilerOptions": {
-    "noEmit": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
-}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..869582c92054fe229e7ffb11902f6e8d7e53c833
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,97 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
+import { resolve } from 'path'
+
+export default defineConfig({
+  base: '/music/',
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'icons/apple-touch-icon.svg'],
+      manifest: {
+        name: '云音乐PWA',
+        short_name: '云音乐',
+        description: '基于Vue3的PWA音乐播放器，网易云音乐风格',
+        theme_color: '#ff6b6b',
+        background_color: '#0c0c0c',
+        display: 'standalone',
+        orientation: 'portrait-primary',
+        start_url: './',
+        scope: './',
+        icons: [
+          {
+            src: 'icons/icon-72x72.svg',
+            sizes: '72x72',
+            type: 'image/svg+xml'
+          },
+          {
+            src: 'icons/icon-96x96.svg',
+            sizes: '96x96',
+            type: 'image/svg+xml'
+          },
+          {
+            src: 'icons/icon-128x128.svg',
+            sizes: '128x128',
+            type: 'image/svg+xml'
+          },
+          {
+            src: 'icons/icon-192x192.svg',
+            sizes: '192x192',
+            type: 'image/svg+xml',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'icons/icon-512x512.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/music-api\.gdstudio\.xyz\/.*$/,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'music-api-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 // 24小时
+              }
+            }
+          }
+        ]
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 3000,
+    open: true,
+    cors: true,
+    // 禁用对模块请求的history fallback
+    middlewareMode: false,
+    fs: {
+      strict: true,
+      allow: ['..']
+    }
+  },
+  build: {
+    target: 'es2015',
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vue-vendor': ['vue', 'vue-router', 'pinia'],
+          'vueuse': ['@vueuse/core']
+        }
+      }
+    }
+  }
+})
diff --git a/vite.config.ts b/vite.config.ts
deleted file mode 100644
index 4217010a3178372181948ce34c4d5045dfa18325..0000000000000000000000000000000000000000
--- a/vite.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    },
-  },
-})
diff --git "a/\351\234\200\346\261\202\346\226\207\346\241\243.md" "b/\351\234\200\346\261\202\346\226\207\346\241\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4ed152d5d2973f36446f09e11eff19f9c1ae650e
--- /dev/null
+++ "b/\351\234\200\346\261\202\346\226\207\346\241\243.md"
@@ -0,0 +1,393 @@
+# Vue3 PWA手机音乐软件需求文档
+
+## 📱 页面结构需求（参考网易云音乐iOS端）
+
+### 主要页面结构
+**底部导航栏（TabBar）：**
+- 首页（搜索和推荐）
+- 我的音乐（收藏歌曲）
+- 设置
+
+**页面层级：**
+- 底部导航栏（固定）
+- 底部播放条（固定，在导航栏上方）
+- 主内容区域（可滚动）
+- 全屏播放器（覆盖整个屏幕）
+
+**响应式布局：**
+- 手机端：底部导航+单栏内容
+- 平板端：侧边导航+两栏布局
+- 桌面端：侧边导航+三栏布局
+
+## 🏠 首页需求
+
+**顶部区域：**
+- 云音乐Logo
+- 搜索框（点击进入搜索页面）
+
+**主要内容：**
+- 搜索结果展示区域
+- 搜索历史
+- 热门推荐（可选）
+
+**搜索功能：**
+- 点击搜索框展开搜索界面
+- 音乐源选择（底部弹窗）
+- 瀑布流搜索结果
+- 实时搜索建议
+
+## 🎵 我的音乐页面需求
+
+**页面内容：**
+- 我喜欢的音乐（收藏歌曲列表）
+- 最近播放历史
+- 播放统计信息
+
+**收藏歌曲功能：**
+- 显示收藏的所有歌曲
+- 支持搜索收藏内容
+- 支持批量操作
+- 显示收藏时间
+
+**播放历史：**
+- 最近播放的歌曲列表
+- 播放次数统计
+- 清除历史记录功能
+
+## ⚙️ 设置页面需求
+
+**设置分组：**
+
+**播放设置：**
+- 默认音质：标准128K/较高192K/高音质320K/无损FLAC/Hi-Res（默认：320K）
+- 默认播放模式：列表循环/随机播放/单曲循环（默认：列表循环）
+- 记住播放进度：开启/关闭（默认：开启）
+
+**搜索设置：**
+- 默认音乐源：网易云音乐（默认）
+- 搜索历史：保存/不保存（默认：保存）
+
+**存储管理：**
+- 清除搜索历史
+- 清除播放历史
+- 清除收藏数据
+
+**应用信息：**
+- 版本号
+- 关于应用
+
+## 🔍 搜索功能详细需求
+
+**搜索界面：**
+- 返回按钮
+- 搜索输入框
+- 音乐源选择按钮（显示当前选择的源）
+- 搜索历史列表（可清除）
+- 热门搜索词（可选）
+
+**音乐源选择弹窗：**
+- 底部弹窗形式
+- 显示所有13个音乐源
+- 当前选择源高亮显示
+- 选择后自动关闭弹窗
+
+**搜索结果：**
+- 瀑布流加载（首次20条，滚动到15条时加载下页）
+- 歌曲信息：序号、歌名、歌手专辑、时长
+- 右侧爱心收藏按钮
+- 当前播放歌曲高亮显示
+
+## 🎤 底部播放条需求
+
+**显示位置：**
+- 位于底部导航栏正上方
+- 固定显示，不随页面滚动
+
+**显示条件：**
+- 有歌曲播放或暂停时显示
+- 页面刷新后根据本地存储恢复
+
+**界面元素：**
+- 左侧：小尺寸专辑封面
+- 中间：歌曲名和歌手名（单行显示，超出滚动）
+- 右侧：播放/暂停按钮
+
+**交互功能：**
+- 点击整个播放条打开全屏播放器
+- 点击播放按钮控制播放状态
+- 左右滑动切换歌曲
+- 上滑手势展开全屏播放器
+
+## 🎼 全屏播放器需求
+
+**网易云风格界面：**
+- 专辑封面作为模糊背景
+- 顶部状态栏适配
+- 返回按钮（左上角）
+- 更多操作按钮（右上角）
+
+**主要内容区域：**
+- 大尺寸圆形专辑封面（居中）
+- 播放时封面旋转动画
+- 歌曲信息（歌名、歌手、专辑）
+- 收藏按钮（爱心图标）
+
+**播放控制：**
+- 播放模式按钮（列表循环/随机/单曲循环）
+- 上一首按钮
+- 播放/暂停按钮（大尺寸，居中）
+- 下一首按钮
+- 播放列表按钮
+
+**进度和音质：**
+- 播放进度条（可拖拽）
+- 当前时间/总时长显示
+- 音质显示和选择
+
+**歌词区域：**
+- 底部歌词滚动显示
+- 当前歌词高亮
+- 支持点击歌词跳转
+- 可展开全屏歌词模式
+
+**关闭方式：**
+- 点击返回按钮
+- 下拉手势
+- 返回键（Android）
+
+## 📊 音乐平台优先级
+
+### 平台列表（按稳定性和资源丰富度排序）
+1. **netease** - 网易云音乐（默认）
+2. **tencent** - QQ音乐
+3. **kugou** - 酷狗音乐
+4. **kuwo** - 酷我音乐
+5. **migu** - 咪咕音乐
+6. **spotify** - Spotify
+7. **apple** - Apple Music  
+8. **ytmusic** - YouTube Music
+9. **joox** - JOOX
+10. **tidal** - TIDAL
+11. **deezer** - Deezer
+12. **qobuz** - Qobuz
+13. **ximalaya** - 喜马拉雅FM
+
+### 平台选择逻辑
+- 默认使用网易云音乐
+- 用户可在设置中修改默认源
+- 搜索无结果时提示切换到其他平台
+- 记住用户最后使用的音乐源
+
+## 🎨 网易云音乐UI风格规范
+
+### iOS端特色设计
+- 底部安全区域适配
+- 半透明毛玻璃效果
+- 深色模式适配
+- 圆角卡片设计
+- 红色强调色系统
+
+### 色彩系统
+```css
+/* 背景色 */
+--bg-primary: #0c0c0c;           /* 主背景 */
+--bg-card: rgba(255,255,255,0.05); /* 卡片背景 */
+--bg-overlay: rgba(0,0,0,0.8);    /* 遮罩背景 */
+
+/* 强调色 */  
+--accent-red: #ff6b6b;           /* 网易红 */
+--accent-red-hover: #ff5252;     /* 悬浮态 */
+
+/* 文字颜色 */
+--text-primary: #ffffff;         /* 主要文字 */
+--text-secondary: rgba(255,255,255,0.7); /* 次要文字 */
+--text-disabled: rgba(255,255,255,0.4);  /* 禁用文字 */
+```
+
+### 组件规范
+- 底部导航高度：49px + 安全区域
+- 播放条高度：64px
+- 列表项高度：64px
+- 按钮最小触摸区域：44x44px
+- 统一圆角：12px（小元素）、20px（卡片）
+
+## 🧩 组件化架构
+
+### 页面组件
+```
+src/views/
+├── HomePage.vue              # 首页（搜索页面）
+├── MyMusicPage.vue          # 我的音乐页面  
+├── SettingsPage.vue         # 设置页面
+└── FullPlayerPage.vue       # 全屏播放器页面
+```
+
+### 布局组件
+```
+src/components/layout/
+├── AppTabBar.vue            # 底部导航栏
+├── MiniPlayer.vue           # 底部播放条
+├── SearchHeader.vue         # 搜索头部
+└── SafeArea.vue             # 安全区域包装
+```
+
+### 搜索组件
+```
+src/components/search/
+├── SearchBox.vue            # 搜索输入框
+├── SourceSelector.vue       # 音乐源选择弹窗
+├── SearchResults.vue        # 搜索结果列表
+├── SongItem.vue             # 歌曲列表项
+├── SearchHistory.vue        # 搜索历史
+└── InfiniteScroll.vue       # 无限滚动
+```
+
+### 播放器组件
+```
+src/components/player/
+├── AlbumCover.vue           # 专辑封面
+├── SongInfo.vue             # 歌曲信息
+├── PlayControls.vue         # 播放控制
+├── ProgressBar.vue          # 进度条
+├── LyricsView.vue           # 歌词显示
+└── PlayModeToggle.vue       # 播放模式切换
+```
+
+### 收藏组件
+```
+src/components/favorites/
+├── FavoritesList.vue        # 收藏列表
+├── FavoriteItem.vue         # 收藏项
+└── FavoriteButton.vue       # 收藏按钮
+```
+
+### 通用组件
+```
+src/components/common/
+├── Loading.vue              # 加载状态
+├── Empty.vue                # 空状态
+├── Toast.vue                # 提示信息
+├── Modal.vue                # 模态弹窗
+├── BottomSheet.vue          # 底部弹窗
+└── Icon.vue                 # 图标组件
+```
+
+## 💾 数据持久化需求
+
+### LocalStorage存储
+**播放器状态：**
+- 当前播放歌曲信息
+- 播放进度位置
+- 音量设置
+- 播放模式
+
+**用户数据：**
+- 收藏歌曲列表
+- 播放历史记录
+- 搜索历史
+- 用户设置项
+
+**设置数据：**
+- 默认音质选择
+- 默认音乐源
+- 其他用户偏好设置
+
+### 恢复机制
+- 应用启动时恢复播放状态
+- 页面刷新后继续播放
+- 保持用户设置和偏好
+- 离线时显示本地数据
+
+---
+
+## 📡 API接口文档
+
+### 搜索音乐接口
+```
+GET https://music-api.gdstudio.xyz/api.php
+参数：
+- types: search
+- source: 音乐源（netease/tencent/kugou等）
+- name: 搜索关键词（需URL编码）
+- count: 返回数量（默认20，固定值）
+- pages: 页码（从1开始，用于瀑布流）
+
+响应：
+[
+  {
+    "id": "歌曲唯一ID",
+    "name": "歌曲名称", 
+    "artist": "歌手名（字符串或数组）",
+    "album": "专辑名称",
+    "pic_id": "专辑封面ID",
+    "lyric_id": "歌词ID", 
+    "source": "音乐源标识"
+  }
+]
+```
+
+### 获取播放地址接口
+```
+GET https://music-api.gdstudio.xyz/api.php
+参数：
+- types: url
+- source: 音乐源标识
+- id: 歌曲ID
+- br: 音质（128/192/320/740/999）
+
+响应：
+{
+  "url": "音频文件直链",
+  "br": "实际返回音质",
+  "size": "文件大小（KB）"
+}
+```
+
+### 获取歌词接口
+```
+GET https://music-api.gdstudio.xyz/api.php
+参数：
+- types: lyric
+- source: 音乐源标识  
+- id: 歌词ID（通常与歌曲ID相同）
+
+响应：
+{
+  "lyric": "LRC格式原文歌词",
+  "tlyric": "LRC格式翻译歌词（可能为空）"
+}
+```
+
+### 获取专辑封面接口
+```
+GET https://music-api.gdstudio.xyz/api.php
+参数：
+- types: pic
+- source: 音乐源标识
+- id: 专辑封面ID
+- size: 图片尺寸（300小图/500大图）
+
+响应：
+{
+  "url": "图片文件直链"
+}
+```
+
+### 支持的音乐源列表
+```javascript
+const MUSIC_SOURCES = [
+  { code: 'netease', name: '网易云音乐', priority: 1 },
+  { code: 'tencent', name: 'QQ音乐', priority: 2 },
+  { code: 'kugou', name: '酷狗音乐', priority: 3 },
+  { code: 'kuwo', name: '酷我音乐', priority: 4 },
+  { code: 'migu', name: '咪咕音乐', priority: 5 },
+  { code: 'spotify', name: 'Spotify', priority: 6 },
+  { code: 'apple', name: 'Apple Music', priority: 7 },
+  { code: 'ytmusic', name: 'YouTube Music', priority: 8 },
+  { code: 'joox', name: 'JOOX', priority: 9 },
+  { code: 'tidal', name: 'TIDAL', priority: 10 },
+  { code: 'deezer', name: 'Deezer', priority: 11 },
+  { code: 'qobuz', name: 'Qobuz', priority: 12 },
+  { code: 'ximalaya', name: '喜马拉雅FM', priority: 13 }
+]
+```
\ No newline at end of file