# 播放页优化方案

> 参考喜马拉雅等主流音频软件设计

## 一、整体布局设计

```
┌─────────────────────────────────────┐
│  ← 返回     专辑名称     ⋮ 更多    │  顶部导航
├─────────────────────────────────────┤
│                                     │
│         ┌─────────────┐             │
│         │   旋转唱片   │             │  封面区域
│         │    封面     │             │  (带旋转动画)
│         └─────────────┘             │
│                                     │
│         音频标题                     │  音频信息
│         专辑名 · 集数 2/10          │
│                                     │
│  0:00 ════════════════○──────── 3:45 │  进度条
│                                     │
│   🔀      ⏮      ▶      ⏭      🔁  │  播放控制
│  随机      上一    播放    下一    循环│
│                                     │
│  ⏰定时    ❤️收藏    ⬇下载    ↗分享  │  辅助功能
│                                     │
├─────────────────────────────────────┤
│  📋 播放列表                         │  播放列表
│  ┌───────────────────────────────┐  │  (可折叠)
│  │ 1. 第一章 - 正在播放    ▶     │  │
│  │ 2. 第二章 - 未播放           │  │
│  │ 3. 第三章 - 未播放           │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘
```

## 二、核心功能模块

### 1. 封面展示区
- **旋转唱片效果**：播放时封面缓慢旋转，暂停时停止
- **毛玻璃背景**：封面模糊处理作为页面背景
- **光晕效果**：封面周围添加渐变光晕

### 2. 音频信息展示
- **标题**：大字显示音频名称
- **专辑信息**：专辑名 + 当前集数/总集数
- **作者信息**：主播/作者名称 + 订阅按钮

### 3. 进度控制区
- **进度条**：可拖动，显示播放进度
- **时间显示**：当前时间 / 总时长
- **波纹动画**：播放时进度条有动态波纹效果

### 4. 播放控制区

| 功能 | 图标 | 说明 |
|------|------|------|
| 随机播放 | 🔀 | 开启/关闭随机播放模式 |
| 上一首 | ⏮ | 播放上一集 |
| 播放/暂停 | ▶/⏸ | 主播放按钮(大尺寸) |
| 下一首 | ⏭ | 播放下一集 |
| 循环模式 | 🔁 | 列表循环/单曲循环/关闭 |

### 5. 辅助功能区

| 功能 | 说明 |
|------|------|
| 定时关闭 | 15/30/45/60分钟/播完关闭 |
| 收藏 | 心形图标，收藏当前音频 |
| 下载 | 下载当前音频到本地 |
| 播放速度 | 0.5x/0.75x/1x/1.25x/1.5x/2x |
| 音质 | 标准/高品质切换 |
| 分享 | 分享给好友 |

### 6. 播放列表（可折叠）
- 显示当前专辑/列表所有音频
- 当前播放高亮显示
- 点击切换播放
- 支持拖动排序（可选）

## 三、视觉效果升级

### 配色方案

```css
/* 深色主题 - 沉浸式体验 */
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);

/* 主题色 */
primary: #4F46E5 (紫色)
accent: #818CF8 (浅紫色)
text-primary: #FFFFFF
text-secondary: #9CA3AF
```

### 动画效果
1. **唱片旋转**：播放时每20秒转一圈
2. **按钮反馈**：点击缩放动画
3. **进度条波纹**：播放时动态波纹
4. **页面转场**：淡入淡出效果

## 四、交互优化

1. **智能续播**：记住上次播放位置，提示继续播放
2. **自动播放下一首**：可选开启
3. **后台播放**：切换页面继续播放
4. **锁屏控制**：支持系统锁屏控件
5. **蓝牙控制**：支持蓝牙耳机切歌

## 五、需要新增/修改的文件

| 文件 | 操作 | 说明 |
|------|------|------|
| `pages/player/index.vue` | 修改 | 重构播放页UI |
| `store/audio.ts` | 修改 | 添加循环模式、随机播放等功能 |
| `components/PlayerCover.vue` | 新增 | 可复用封面组件 |
| `components/PlaylistPanel.vue` | 新增 | 播放列表面板组件 |

## 六、实现优先级

### P0 - 核心功能
- [ ] 封面旋转动画
- [ ] 播放控制（上一首/下一首/播放暂停）
- [ ] 进度条拖动
- [ ] 播放列表展示

### P1 - 重要功能
- [ ] 循环模式（列表循环/单曲循环）
- [ ] 随机播放
- [ ] 播放速度控制
- [ ] 收藏功能
- [ ] 定时关闭

### P2 - 增强功能
- [ ] 下载功能
- [ ] 分享功能
- [ ] 音质切换
- [ ] 毛玻璃背景效果
- [ ] 播放列表折叠/展开

### P3 - 优化功能
- [ ] 按钮点击动画
- [ ] 页面转场动画
- [ ] 锁屏控件支持
- [ ] 后台播放优化