播放页优化方案
参考喜马拉雅等主流音频软件设计
一、整体布局设计
┌─────────────────────────────────────┐
│ ← 返回 专辑名称 ⋮ 更多 │ 顶部导航
├─────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ 旋转唱片 │ │ 封面区域
│ │ 封面 │ │ (带旋转动画)
│ └─────────────┘ │
│ │
│ 音频标题 │ 音频信息
│ 专辑名 · 集数 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. 播放列表（可折叠）
- 显示当前专辑/列表所有音频
- 当前播放高亮显示
- 点击切换播放
- 支持拖动排序（可选）
三、视觉效果升级
配色方案
/* 深色主题 - 沉浸式体验 */
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
/* 主题色 */
primary: #4F46E5 (紫色)
accent: #818CF8 (浅紫色)
text-primary: #FFFFFF
text-secondary: #9CA3AF
动画效果
- 唱片旋转：播放时每20秒转一圈
- 按钮反馈：点击缩放动画
- 进度条波纹：播放时动态波纹
- 页面转场：淡入淡出效果
四、交互优化
- 智能续播：记住上次播放位置，提示继续播放
- 自动播放下一首：可选开启
- 后台播放：切换页面继续播放
- 锁屏控制：支持系统锁屏控件
- 蓝牙控制：支持蓝牙耳机切歌
五、需要新增/修改的文件
| 文件 |
操作 |
说明 |
pages/player/index.vue |
修改 |
重构播放页UI |
store/audio.ts |
修改 |
添加循环模式、随机播放等功能 |
components/PlayerCover.vue |
新增 |
可复用封面组件 |
components/PlaylistPanel.vue |
新增 |
播放列表面板组件 |
六、实现优先级
P0 - 核心功能
P1 - 重要功能
P2 - 增强功能
P3 - 优化功能
