fix

.editorconfig

@@ -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

.gitattributes

@@ -1 +0,0 @@
-* text=auto eol=lf

.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

.prettierrc.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 100
-}

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "esbenp.prettier-vscode"
-  ]
-}

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 设计参考
+
+---
+
+**🎵 享受音乐，享受编程！**

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>

env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

eslint.config.ts

@@ -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,
-)

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>

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"
   }
-}
+}

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>

src/assets/base.css

@@ -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;
-}

src/assets/main.css

@@ -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;
-  }
-}

src/components/HelloWorld.vue

@@ -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>

src/components/TheWelcome.vue

@@ -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>

src/components/WelcomeItem.vue

@@ -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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

src/components/icons/IconCommunity.vue

@@ -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>

src/components/icons/IconDocumentation.vue

@@ -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>

src/components/icons/IconEcosystem.vue

@@ -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>

src/components/icons/IconSupport.vue

@@ -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>

src/components/icons/IconTooling.vue

@@ -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>

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>

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>

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>

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>

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>

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>

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>

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>