直播互动 H5（前端与接口接入开发案例）产品系统Vibe Coding

面向直播社交业务的移动端 H5 项目，为已有 App 和业务后台补充浏览器访问入口，减少用户安装门槛。主要覆盖手机号登录注册、免费直播间访问、文字互动及个人资料管理，复用现有业务接口，并针对手机浏览器的播放限制、页面切换和弱网状态进行适配。

1. 登录与资料：手机号、验证码交互，新用户资料补全、会话恢复与退出。
2. 首页列表：直播间展示、类型标识、列表刷新及返回首页后的状态更新。
3. 直播观看：免费房间进入与退出、音视频播放接入、点击开启声音、卡顿和中断反馈、房间切换与资源回收。
4. 实时互动：普通文字聊天、在线人数展示及异常状态提示。
5. 账户交互：个人资料、头像上传交互、余额读取、礼物选择与赠送状态反馈。
6. 移动体验：手机屏幕和安全区适配、英文与繁体中文界面、PWA 基础支持。

负责 H5 前端和 Node.js BFF 接入层的开发、联调与问题修复，使用 Vue 3、TypeScript、Vite、HTML5/CSS，接入 Socket.IO、声网和视频播放组件。
重点处理既有 App 接口向 Web 的适配、服务端签名与会话管理、房间切换时的资源释放和过期响应隔离，以及余额/礼物状态反馈与防重复提交。
开发过程包含类型检查、单元测试、组件与浏览器模拟验证，另有指定场景的真机和真实服务联调记录。作品为阶段开发案例，具体交付以约定范围和验收结果为准；展示图片使用本地模拟数据，不代表真实在线人数、余额或交易。