Desk Health Web | 工位健康计时器

一个隐私优先的网页端工位健康助手：护眼计时、久坐提醒、眨眼监测、干眼护理和语音提醒都在浏览器里完成。

在线体验：https://veniveci.github.io/desk-health-web/

如果你经常长时间盯屏、忘记休息、眨眼变少，或者需要按医生建议做热敷和用药提醒，这个项目可以作为一个轻量的浏览器健康助手。

亮点

• 纯静态网页：不需要后端，不需要登录，可部署到 GitHub Pages、Cloudflare Pages、Nginx 或任意静态服务器。
• 本地眨眼监测：使用浏览器摄像头和 MediaPipe Face Landmarker，视频画面只在本机处理。
• 护眼和久坐提醒：支持 20-20-20、番茄钟、深度工作、久坐活动等节奏。
• 可选持续追提醒：开启后每隔 20 秒更换搞怪文案、语音和系统通知；关闭时仅额外提醒一次。
• 可选系统强提醒：即使网页在后台，也可以通过需手动关闭的浏览器系统通知提醒休息。
• 干眼护理模式：支持每日 2 次热敷提醒、热敷倒计时、用药提醒和今日完成记录。
• 多风格语音提醒：内置办公极简音、元气少女、相声风、二次元助手、温柔姐姐、低沉男声、赛博电子音等原创风格。
• 不打断工作流：低眨眼提醒 1 秒自动关闭，普通休息提醒保留手动选择。
• 移动端可用：响应式布局，手机和平板也能打开使用。

近期更新

强提醒与后台通知

• 设置中增加“强提醒（系统通知）”开关。
• 开启时会申请浏览器通知权限；休息时间到后同时保留页内弹窗并发送系统通知。
• 系统通知设置为需要用户手动关闭，点击通知会尝试将网页带回前台。
• 通知权限被禁止或浏览器不支持时，设置区域会显示对应状态提示。
• 强提醒设置会保存在当前浏览器中；如果通知权限后来被撤销，页面会自动关闭该选项。

这是纯网页项目，浏览器不能保证网页窗口拥有系统级“始终置顶”能力。强提醒使用的是浏览器和操作系统提供的通知机制，实际展示方式会受到网站权限、浏览器设置以及系统“请勿打扰”设置影响。

可选持续追提醒

• 持续追提醒默认关闭，可以在设置中按需开启。
• 关闭时，首次休息提醒后只额外提醒一次，之后停止声音和系统通知，并停留在提醒页面等待处理。
• 开启后，如果用户一直没有进行操作，每隔 20 秒再次提醒。
• 每次提醒都会更换标题、正文和语音，不会一直重复同一句话。
• 当前内置 8 组搞怪提醒，例如“你的眼睛发来一封辞职信”“检测到椅子正在绑架你”“屏幕不会趁你休息时逃跑”。
• 8 组文案循环使用后，会继续显示“第 N 次催促”，让每次提醒仍有变化。
• 开启强提醒后，每次追提醒也会更新系统通知。
• 点击“休息 1 分钟”“按设置休息”“稍后继续”或“跳过”后，后续追提醒立即停止。
• 勿扰时段仍会更新页内文案，但不会重复播放提示音。

休息语音控制

• 可以单独关闭“休息提醒提示音”，保留弹窗和其他类型的提醒。
• 可以单独控制休息结束后的语音播报；开启时会在休息结束后播报“该工作了”。
• 两项设置都会自动保存在当前浏览器中。

适合谁

• 长时间写代码、写文档、做设计、看屏幕的办公用户。
• 想执行 20-20-20 护眼法则，但经常忘记的人。
• 想关注自己盯屏时眨眼频率的人。
• 有干眼护理计划，需要按时热敷和用药提醒的人。
• 想要一个可自部署、无账号、无后端、隐私友好的健康小工具的人。

截图

以下截图均在摄像头未开启状态下截取，只展示界面和摄像头占位说明，不包含真实人像。

功能

护眼与休息

• 20-20-20 护眼计时
• 番茄钟、深度工作、久坐活动预设
• 自定义专注间隔和休息时长
• 休息 1 分钟、按设置休息、稍后继续、跳过
• 可选强提醒：使用需手动关闭的系统通知，让后台标签页的休息提醒更醒目
• 可选择是否启用每 20 秒持续追提醒；关闭时只额外提醒一次
• 可独立开关休息开始提示音和休息结束语音
• 休息结束时可播报“该工作了”
• 测试提醒按钮，可直接检查弹窗、语音、系统通知和持续追提醒
• 所有节奏与提醒设置自动保存到当前浏览器
• 勿扰时段静音

眨眼监测

• 实时统计眨眼次数
• 最近 60 秒眨眼频率
• 闭眼评分展示
• 低眨眼频率提醒
• 眨眼评估规则弹窗
• 周期语音鼓励

干眼护理

• 干眼护理模式开关
• 默认每日 2 次热敷提醒
• 热敷倒计时
• 用药名称和用药时间自定义
• 今日热敷、用药完成记录
• 支持稍后提醒和今日跳过

语音风格

当前内置原创风格：

• 办公极简音
• 元气少女
• 相声风
• 二次元助手
• 温柔姐姐
• 低沉男声
• 赛博电子音
• 专注教练
• 禅意冥想
• 广播电台
• 游戏播报
• 复古像素

这些风格使用浏览器语音合成和 Web Audio 生成，不使用真人明星、主播或具体 IP 的声音克隆。

隐私与安全

• 摄像头画面只在当前浏览器本机处理。
• 项目没有后端，不上传视频、图片或统计数据。
• 今日统计、热敷时间、用药名称、用药时间和完成记录只保存在当前浏览器本地。
• 干眼护理功能只做遵医嘱提醒和记录，不提供诊断、剂量建议或治疗方案。
• 摄像头权限需要 HTTPS 或 localhost 环境。
• 系统强提醒需要用户允许网站通知权限；浏览器或操作系统关闭通知时，网页无法绕过该限制。

技术栈

• HTML / CSS / JavaScript
• MediaPipe Face Landmarker
• WebRTC Camera API
• Web Speech API
• Web Audio API
• LocalStorage
• GitHub Pages

眨眼识别依赖外部 CDN 和模型文件：

• @mediapipe/tasks-vision
• Google MediaPipe Face Landmarker 模型

如果部署环境需要完全离线运行，可以把这些资源下载到自己的服务器，并把 app.js 里的 CDN 地址替换为站内地址。

本地运行

python -m http.server 5173

然后访问：

http://localhost:5173

部署

这是纯静态项目，把下面文件上传到网站目录即可：

• index.html
• styles.css
• app.js
• assets/

GitHub Pages 部署时，Pages 来源选择：

Branch: main
Folder: / root

路线图

• 支持自定义更多护理任务
• 支持导出本地统计数据
• 支持 PWA 安装到桌面
• 支持多语言界面
• 支持自托管 MediaPipe 模型资源
• 增加更多无版权语音风格

贡献

欢迎提交 issue 或 PR：

• 反馈浏览器兼容性问题
• 补充护眼/久坐/干眼护理场景
• 优化移动端体验
• 增加可访问性改进
• 改进 README、截图和文档

如果这个项目对你有帮助，欢迎点一个 Star，这会帮助更多长时间盯屏办公的人看到它。

License

MIT