LiveRadar 直播雷达
一个基于 Vite、Tailwind 和原生 JavaScript 的轻量 Web 应用，用一块仪表盘集中查看多个平台的主播开播状态，并支持本地备份、导入导出、serverless 状态路径和 Cloudflare Pages 部署。
01
设计挑战
跨平台关注主播很容易变成碎片化操作：平台入口不同，房间标识不同，状态字段、封面可靠性和浏览器访问限制也不同。LiveRadar 需要在不依赖账号系统的前提下，把这些状态整理成一个清楚、可靠的页面。
02
设计方法
项目用浏览器可访问路径和 Cloudflare Pages Functions 统一平台状态，再用注重性能的前端渲染卡片。房间列表保存在本地，支持 JSON 备份与恢复；移动端和 reduced-motion 环境会降低高成本动效，避免工具因为视觉效果变重。
03
最终结果
最终服务可以在一个仪表盘中监控斗鱼、Bilibili 直播、Twitch、Kick、Picarto 和 SOOP/AfreecaTV，同时处理刷新反馈、卡片状态、图片降级和移动端布局。
制作笔记整理
- 搭建 Vite、Tailwind 和原生 JavaScript 前端架构。
- 设计主播卡片网格、命令栏、刷新反馈和移动端布局。
- 统一浏览器可访问端点与 Cloudflare Pages Functions 之间的状态获取流程。
- 实现本地房间存储、JSON 备份导入导出、图片降级和卡片刷新稳定性。
- 减少大房间列表下不必要的 DOM 工作、图片重载和高成本 hover 效果。
- 维护 README、公开部署说明和验证流程。
玩家体验结构
- 直播、离线、回放和收藏状态必须一眼可分辨。
- 房间数据保持本地优先，方便备份，而不是依赖账号系统。
- Serverless 状态路由处理 CORS 敏感平台，同时保留静态前端部署能力。
- 命令栏把平台选择、房间输入、导入导出和刷新动作放在同一个稳定位置。
- 动效和视觉打磨要尊重 reduced-motion 偏好，并在移动端主动降级。
可比较的游戏语言
- 运维仪表盘
- 实时状态卡片
- 本地优先工具
叙事与谜题笔记
- README 将 LiveRadar 描述为集中监控多平台主播的轻量仪表盘。
- 支持平台包括斗鱼、Bilibili 直播、Twitch、Kick、Picarto 和 SOOP/AfreecaTV。
- GitHub 仓库描述为：Live tracking multiple streamers from different websites。
- 集成检查时，公开 Cloudflare Pages 部署返回 HTTP 200。
原始公开页面
