PLANNING.md

视频播放器开发执行计划（Trae Solo 专用）

阶段一：项目基建 & 类型系统

1. 搭建规范目录结构
2. 定义全部 TS 类型、配置项、事件类型
3. 初始化播放器基础 DOM 结构
4. 关闭原生 controls，初始化基础样式

阶段二：核心能力封装（纯逻辑层）

1. 时间格式化工具
2. 音量、静音逻辑封装
3. 全屏、样式全屏兼容封装
4. 画中画 API 兼容封装
5. 视频下载逻辑封装
6. 原生 video 事件统一管理

阶段三：基础控制器开发

1. 内置全部基础 SVG 图标
2. 进度条渲染、缓冲、拖拽、点击跳转
3. 时间展示组件实时更新
4. 音量滑块交互、静音切换
5. 控制器自动显隐逻辑

阶段四：XGPlayer 悬浮图标核心交互

1. 首次加载居中初始播放图标
2. 点击销毁初始图标 + 触发播放
3. 视频空白区点击监听
4. 播放/暂停临时悬浮图标 + 淡出动画

阶段五：选配按钮 & 双全屏功能

1. 画中画按钮交互与兼容降级
2. 下载按钮功能与异常降级
3. 样式全屏、原生全屏实现
4. 各功能浏览器兼容判断

阶段六：自适应收纳 + 三点菜单

1. ResizeObserver 容器监听
2. 按钮宽度自动计算
3. 自动收纳优先级逻辑
4. 三点菜单弹窗、外部点击关闭

阶段七：自定义按钮功能

1. 自定义按钮渲染逻辑
2. 优先级排序、自动收纳适配
3. 自定义事件、tooltip 绑定

阶段八：优化 & 兼容 & 生命周期

1. 键盘快捷键
2. 移动端触摸优化
3. 所有监听/观察者销毁逻辑
4. 事件订阅系统完善

阶段九：自测 & demo 编写

1. 全覆盖需求自测
2. 编写基础使用 demo
3. 修复边界问题

阶段十：体验优化（新增）

1. 播放按钮点击事件绑定（修复无响应问题）
2. 控制栏暂停时不自动隐藏
3. MORE按钮动态显示（仅在需要收纳时显示）
4. 拉伸屏幕后更多菜单自动关闭
5. 更多菜单显示时控制栏不自动隐藏
6. 全屏按钮图标切换（进入/退出状态切换）