KTV UI 组件实现清单

这份清单配合 ui_rebuild_spec.md 使用，目标是让另一个项目按模块逐项落地，不遗漏页面与组件。

1. 全局层

• [ ] 配置全局主题
• [ ] 字体切到 SF Pro Display
• [ ] Scaffold 背景色设置为 #10071D
• [ ] 默认卡片圆角统一为 24
• [ ] 主题种子色设置为 #6A36FF

2. 页面壳体

• [ ] 实现沉浸横屏模式
• [ ] 实现普通宽屏模式
• [ ] 实现紧凑竖屏模式
• [ ] 实现 maxWidth = 980 的内容限制
• [ ] 实现非紧凑模式下 852 / 393 的主视觉比例
• [ ] 实现全局背景渐变
• [ ] 实现环境 glow 和 ring 装饰

3. 首页

3.1 首页骨架

• [ ] 宽屏首页横向双栏布局
• [ ] 紧凑首页纵向单栏布局
• [ ] 宽屏首页左右两栏比例保持 384 : 324
• [ ] 宽屏首页左右外侧留白 48

3.2 首页工具栏

• [ ] 实现工具栏容器
• [ ] 实现品牌标题 金调KTV
• [ ] 实现 pill 样式按钮
• [ ] 实现按钮顺序：
  • 搜索
  • 已点
  • 原唱/伴唱
  • 切歌
  • 播放/暂停
  • 设置
  • 退出
• [ ] 实现宽屏 Row
• [ ] 实现紧凑模式 Wrap

3.3 首页预览卡

• [ ] 实现 16:9 预览卡
• [ ] 实现 fallback 图层
• [ ] 实现视频层
• [ ] 实现黑色透明渐变遮罩
• [ ] 实现“等待点唱”标签
• [ ] 实现播放状态覆盖层
• [ ] 实现底部进度条
• [ ] 实现点击进入全屏

3.4 首页快捷入口

• [ ] 实现 2 列网格
• [ ] 实现快捷入口卡片样式
• [ ] 配置 6 个入口：
  • 排行榜
  • 歌名
  • 歌星
  • 本地
  • 收藏
  • 常唱
• [ ] 配置每个入口的图标
• [ ] 配置每个入口的渐变色

4. 点歌工作区

4.1 外层壳体

• [ ] 实现宽屏点歌壳体
• [ ] 实现紧凑点歌壳体
• [ ] 实现沉浸横屏点歌壳体
• [ ] 实现宽屏左列固定 304
• [ ] 实现沉浸模式左列 min(340, screenWidth * 0.25)

4.2 左列

• [ ] 实现左列顶部空白
• [ ] 实现左列预览区
• [ ] 实现左列搜索框
• [ ] 实现 route 快速信息面板
• [ ] 实现字母键盘
• [ ] 实现数字键盘
• [ ] 实现字母/数字模式切换

4.3 右列

• [ ] 实现右上操作 pill 组
• [ ] 实现 breadcrumb
• [ ] 实现返回按钮
• [ ] 实现歌名页语种筛选 tab
• [ ] 实现 route meta hint chip
• [ ] 实现 route 内容容器

5. 列表内容

5.1 歌曲列表

• [ ] 实现双列歌曲布局
• [ ] 实现歌曲 tile 样式
• [ ] 实现当前播放状态样式
• [ ] 实现已加入队列状态样式
• [ ] 实现空态卡

5.2 已点列表

• [ ] 实现当前播放项样式
• [ ] 实现队列项样式
• [ ] 实现 置顶 按钮
• [ ] 实现 移除 按钮
• [ ] 实现当前播放不显示右侧操作

5.3 分页器

• [ ] 实现上一页按钮
• [ ] 实现下一页按钮
• [ ] 实现页码文字
• [ ] 实现宽屏右对齐
• [ ] 实现紧凑居中

5.4 歌手网格

• [ ] 实现白底歌手面板
• [ ] 实现 maxWidth < 520 的单列布局
• [ ] 实现双列布局
• [ ] 实现歌手卡背景渐变
• [ ] 实现头像圆点
• [ ] 实现歌手 accent 动态配色

5.5 状态卡

• [ ] 实现未配置目录状态
• [ ] 实现扫描中状态
• [ ] 实现扫描失败状态
• [ ] 实现空媒体库状态
• [ ] 实现带 action 的 FilledButton
• [ ] 实现 footer 区

5.6 占位页

• [ ] 实现分类占位页
• [ ] 实现收藏占位页
• [ ] 实现常唱占位页
• [ ] 实现统一 construction 图标样式

6. 播放相关覆盖层

6.1 播放状态覆盖层

• [ ] 实现普通预览状态浮层
• [ ] 实现全屏状态浮层
• [ ] 实现 loading 状态
• [ ] 实现 error 状态
• [ ] 实现无视频输出状态

6.2 进度条

• [ ] 实现轨道背景色
• [ ] 实现玫粉进度色
• [ ] 实现点击 seek
• [ ] 实现拖动 seek

6.3 全屏播放层

• [ ] 实现全黑背景
• [ ] 实现点击空白切换 chrome
• [ ] 实现顶部操作按钮
• [ ] 实现顶部歌曲信息
• [ ] 实现顶部渐变遮罩
• [ ] 实现底部进度条

7. 弹窗

7.1 设置弹窗

• [ ] 实现 媒体库设置 AlertDialog
• [ ] 实现路径卡
• [ ] 实现 Android 重授权提示卡
• [ ] 实现媒体处理引擎信息卡
• [ ] 实现自动扫描开关
• [ ] 实现 选择目录 按钮
• [ ] 实现 清空路径 按钮
• [ ] 实现错误提示卡
• [ ] 实现底部 关闭 / 完成 actions

7.2 播放错误弹窗

• [ ] 实现标题
• [ ] 实现错误正文
• [ ] 实现可选诊断信息区
• [ ] 实现 知道了 按钮

8. 复刻验收项

• [ ] 首页宽屏比例正确
• [ ] 点歌页宽屏比例正确
• [ ] 沉浸横屏内容宽度正确
• [ ] 首页按钮顺序与文案一致
• [ ] 左列搜索框尺寸正确
• [ ] 左列小预览宽屏圆角为 4
• [ ] 所有小按钮都是半透明浅底高圆角
• [ ] 歌手页是白底卡片，不是深色卡
• [ ] 全屏点击空白可切换 chrome
• [ ] 设置弹窗最大宽度和最大高度正确