“你真的睡着了吗？”一个用浏览器就能判断你是否刷夜的小工具

摘要很多人晚上明明说“我困了要睡了”，但身体却还在手机上疯狂滑动，时间一晃就是两小时。本篇文章就来聊聊，怎么通过前端技术手段，判断用户是否“真的睡着了”，并设计一个可以实时记录、反馈和干预的睡眠追踪页。核心思路是结合浏览器行为、交互操作和设备状态来模拟“睡眠感知”，最终形成一个完整的小工具页面。

引言传统的睡眠监测需要硬件设备，比如手环、传感器这些。但很多时候我们只是想知道：我到底几点真正“断电”的？有没有可能用纯软件的方法，基于浏览器，判断用户是否还在“刷”，然后结合睡前情绪、干预建议，形成一个“轻量级的数字睡眠助手”？

我们就试着从这个方向出发，构建一个叫“你真的睡着了吗？”的睡眠追踪页。

核心设计思路睡眠前行为监测的三个信号源我们主要结合以下三个维度做判断：

设备亮度（屏幕调光 + 屏保激活）交互行为（鼠标移动、键盘、触控点击）浏览器活动（页面焦点变化、长时间空闲）用这些行为判断用户是不是已经放下手机，进入了非活跃状态。

睡眠追踪页的功能规划睡前日志记录（写一段当晚的状态）自动检测“最后交互时间”进入非活跃状态超过 X 分钟后标记为“可能入睡”第二天展示可视化报告：入睡时间、活跃时间段、建议等页面模块拆解我们用 Vue 3 + Composition API 来实现主要模块，前端即可实现，后续也可以拓展为 PWA 离线小工具。

交互监测核心逻辑代码语言：html复制

睡前日志 + 睡眠干预建议可选组件：睡前引导内容代码语言：html复制

可视化反馈设计（次日查看）我们可以将交互日志记录到 localStorage，次日展示如下数据：

入睡时间（检测到最后活跃 + 阈值）活跃轨迹（间隔交互图）睡前情绪总结（来自 textarea）建议历史（比如连续 3 天延迟入睡）这部分可以配合图表库（如 Chart.js）扩展，也可以用 canvas 简单渲染。

QA环节：常见开发者问题Q: 用户只是放下鼠标没动，怎么判断不是看视频？A: 我们可以增加“页面焦点变化”（window.blur / focus）和“音频播放状态检测”逻辑，例如监听 HTML5 audio/video 标签的 play 状态，辅助判断。

Q: 如果我想拓展为手机端 App 呢？A: 完全可以，用 Vue + Capacitor 打包成 App；还可以通过 Screen Wake Lock API 判断用户是否主动保持唤醒。

Q: 怎么统计每天入睡时间？A: 使用 localStorage 存储 lastActiveTime 和 isSleeping 的时间戳，当第二天打开页面时回读并展示。

总结这个项目其实是一个很贴近日常的小工具，用纯前端技术、结合用户行为，去“模拟判断”一个人的睡眠状态。没有复杂的生理信号采集器，也不需要设备授权，只靠交互+时间线+页面状态就能初步分析是否入睡。

未来展望增加 AI 情绪识别（基于用户输入判断情绪曲线）和健康 App 绑定，形成跨端日志智能推荐“入睡故事”或轻音乐接入 GPT 推理模型，自动总结你最近的作息习惯