博客日志:全新上线“双轨沉浸式专注工作台”(番茄钟 + 心流秒表)
🚀 6.20号更新:双轨沉浸式专注工作台上线!番茄钟 🤝 正向秒表双剑合璧
为了打造一个真正适配多元化深度学习、论文撰写以及代码调试的终极无干扰环境,我将博客的番茄钟页面进行了一次颠覆性的重构升级,全新推出“双轨沉浸式专注工作台”!
这次更新不仅保留了上一版本的硬核自动化逻辑,更引入了全新的正向心流计时赛道,满足你不同场景下的高效生产力需求。
✨ 核心亮点功能
1. ⚔️ 双轨并行:倒计时与正向计时完美互补
摒弃了单一的计时模式,新工作台采用 Flex 响应式双卡片布局(PC 端优雅并列,手机端自动垂直堆叠),将两种截然不同的效率武器融于一体:
- 🎯 番茄倒计时赛道:适合日常背单词、刷基础题、撰写常规报告,用倒计时和自动化机制强制战胜拖延症。
- ⏱️ 流式正向计时赛道:专为深度钻研、高难度 Bug 攻克或长文心流构思设计。此模式下没有任何倒计时与闹铃突然响起来打断你的思路,让你全身心沉浸在无界限的时间流逝中,闭环时一键结算。
2. 📝 “当前任务绑定”与历史复盘
无论是倒计时还是正向计时,现在都支持在开启前绑定具体的专注任务内容(例如:修改大创结题报告、调试 Python 算法绘图脚本):
- 所有的任务内容在结算时,都会与时长、状态、精确时间一起顺畅存入底部的本地历史工作台。
- 让你在一天结束进行高效复盘时,每一分钟的汗水都清晰可循、成就感满格。
3. 🌐 浏览器标签页(Tab)动态同步
当你开启计时并切到其他标签页(去翻阅学术文献或查看 API 文档)时,博客的浏览器标签页标题会根据当前的运行状态进行实时动态刷新:
- 运行番茄钟时显示:
(24:59) 🚀 番茄中... | 站点标题 - 运行秒表心流时显示:
(12:04) 🌊 心流中... | 站点标题
即使不看博客页面,也能对当前的专注节奏一目了然。
4. 🌟 延续“30秒超时无响应”自动循环
完美保留了上一版本的灵魂功能。当番茄钟专注倒计时归零时,若你刚好离座暂离,系统会在 30 秒红色倒计时结束后,自动判定你正处于连贯的心流中,隐退询问层并直接帮你开启下一轮番茄倒计时,绝不让死板的界面阻断高效。
5. 📊 隐私优先的本地持久化数据
工作台所有的历史数据均通过 LocalStorage 密存存在你当前使用的浏览器本地,不经过任何第三方服务器,绝对保护隐私,且在博客执行 hexo g 重新编译部署时永不丢失。
🛠️ 技术实现剖析
- 多定时器异步并发架构:在 JavaScript 底层彻底隔离了主倒计时(
countdown)、询问层定时器(promptInterval)与正向计时器(stopwatchInterval)的变量作用域,确保两条赛道可以独立运行、互不干扰。 - Tab Title 状态拦截器:重构了
updateTabTitle()函数,通过对isRunning和swRunning的状态判定,建立了一套平滑的标签页标题流转优先级,避免多重计时同时开启时标题发生闪烁。 - 完美适配 Butterfly 动效生态:
- 样式完全基于 Butterfly 主题的官方原生变量(
--card-bg、var(--text-highlight-color)等)开发,原生支持日间/夜间暗黑模式的无缝切换。 - 针对 PJAX 局部刷新机制进行了底层的绑定生命周期优化,防止切换页面时定时器在后台死循环泄漏。
- 样式完全基于 Butterfly 主题的官方原生变量(
📅 后续优化计划
- 增加今日专注总量统计(如:今日已成功专注 120 分钟,击败 98% 拖延症)。
- 引入免流量加载的算法合成白噪音(雨声/篝火声)。
- 引入数据可视化周报图表。
快点击导航栏的 **[番茄钟]**,解锁属于你的终极高效工作台吧!
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Sonia Pyne!
评论

.png)