在 VibeCoding 的同时劳逸结合 — 一站式程序员健康助手
CodeFuel 是一款专为程序员设计的健康管理工具，帮助你在高强度编码时保持劳逸结合。集智能计时、健康看板、放松教程、AI 建议和炫酷黑科技于一体。
本项目为 TRAE 创意大赛参赛作品，主题为「程序员加油站——在 VibeCoding 的同时劳逸结合」。
打开 codefuel.html 即可使用全部功能，无需安装任何依赖。
# 直接用浏览器打开，或启动本地服务器
python -m http.server 8090
# 然后访问 http://localhost:8090/codefuel.html将 codefuel-extension/ 文件夹加载为 Chrome/Edge 插件，后台常驻运行。
# Chrome: 地址栏输入 chrome://extensions/
# Edge: 地址栏输入 edge://extensions/
# 1. 打开「开发者模式」
# 2. 点击「加载已解压的扩展程序」
# 3. 选择 codefuel-extension 文件夹| 模块 | 功能 | 说明 |
|---|---|---|
| 智能计时器 | 番茄钟 25/5、52/17 法则、自由模式 | 三种工作节奏，圆环进度可视化，专注结束自动暂停等待确认 |
| 健康看板 | 编码时长、休息次数、疲劳指数、健康评分 | 实时统计今日数据，周图表趋势，饮水追踪（8 杯），连续打卡天数 |
| 放松教程 | 眼部放松、颈椎拉伸、正念呼吸、肩背活动、手部放松、腰部拉伸 | 6 套引导式放松课程，步骤式动画，呼吸引导圆 |
| AI 建议 | 智能健康分析 | 根据编码时长、休息频率、饮水量动态生成个性化建议 |
| 设置 | 自定义时长、提醒开关、声音 | 番茄钟/52/17/自由模式切换，专注/休息时长滑块调节 |
| 功能 | 标签 | 说明 |
|---|---|---|
| 颈椎瑜伽教练 | 原创 | 全屏沉浸式颈部运动引导，6 组动作完整课程，页面随动作缓慢倾斜，配合呼吸节奏和进度追踪 |
| 沉浸式休息空间 | NEW | 全屏星空/极光/深海三种场景，80 颗闪烁星星 + 星云动画，呼吸引导 + 倒计时 |
| 智能水滴提醒 | COOL | 屏幕顶部水滴下落动画提醒喝水，喝水后水波纹扩散效果，每 45 分钟自动触发 |
| 久坐脉冲警报 | HOT | 检测鼠标键盘活动，30 分钟无活动时屏幕边缘红色脉冲呼吸警告 |
| 番茄花园 | NEW | 每完成一轮专注种一棵树，连续 3 轮开花，10 棵解锁森林成就，看板页可视化花园 |
| 护眼色温模式 | COOL | 根据时间自动调节页面色温，18 点后暖黄滤镜，22 点后加深暖色，减少蓝光 |
| 疲劳渐变滤镜 | NEW | 编码越久页面越模糊变暖，1h 轻微、2h 明显、3h 红色危险警告 |
| 强制休息锁屏 | COOL | 休息时全屏沉浸式呼吸引导覆盖屏幕，10 秒倒计时后才能解锁 |
| 粒子庆祝效果 | NEW | 完成专注时 60 颗彩色粒子从屏幕中心爆炸扩散 + 闪光效果 |
| 3D 视差倾斜 | COOL | 页面跟随鼠标移动产生 3D 倾斜深度感，卡片分层浮动 |
| 粒子效果试玩 | DEMO | 一键触发粒子爆炸预览 |
专注中 (25:00 → 00:00)
│
├─ 时间到 → 暂停计时器 → 弹出休息通知
│ │
│ ├─ 点击「开始休息」→ 恢复计时器 → 休息倒计时 (05:00 → 00:00)
│ ├─ 点击「跳过」→ 直接进入下一轮专注
│ └─ 点击「×」→ 关闭通知（计时器保持暂停）
│
└─ 休息结束 → 自动进入下一轮专注
| 快捷键 | 功能 |
|---|---|
Space |
开始 / 暂停计时器 |
R |
重置计时器 |
Esc |
关闭放松弹窗 |
Shift + T |
运行单元测试 |
内置 213 个自动化单元测试，覆盖所有模块：
| 测试模块 | 测试数 | 覆盖内容 |
|---|---|---|
| 计时器 Timer | 21 | 初始化、启动/暂停/重置、tick 递减、force 跳过、模式切换、暂停验证 |
| 通知 Notification | 17 | 显示/隐藏、accept/skip、防重复、timeout 管理、display 控制 |
| 看板 Dashboard | 17 | 编码时长、疲劳指数、周图表、饮水追踪、健康评分、时间线 |
| 放松 Relax | 15 | 弹窗开关、步骤导航、4 种程序验证 |
| AI 建议 | 5 | 默认建议、疲劳预警、饮水提醒、正面反馈、分析数据 |
| 设置 Settings | 10 | 保存/加载、开关状态、范围值 |
| 数据 Data | 13 | 存储/读取、清空今日/全部、空数据安全 |
| 边缘案例 Edge Cases | 32 | 快速连点、负数值、零除法、null 数据、极端值、视图切换 |
| 黑科技 Black Tech | 83 | 颈椎瑜伽、休息空间、水滴提醒、久坐检测、番茄花园、护眼色温、倾斜、疲劳滤镜、锁屏、粒子、视差 |
# 方式一：URL 参数自动运行
http://localhost:8090/codefuel.html?test=1
# 方式二：页面内按 Shift + T测试结果以全屏报告展示，包含通过/失败统计、分类明细、失败详情，同时输出到浏览器控制台。
CodeFuel/
├── codefuel.html # 主应用（单文件，包含全部功能 + 单元测试）
├── index.html # 大赛展示页（第一版，含 inline SVG 插画）
├── codefuel-preview.html # 浏览器插件视觉预览页
├── README.md # 项目说明（本文件）
├── codefuel-extension/ # Chrome/Edge 浏览器插件
│ ├── manifest.json # 插件清单 (Manifest V3)
│ ├── background.js # 后台服务 (计时器/通知/活动检测)
│ ├── popup/
│ │ ├── popup.html # 弹窗界面
│ │ ├── popup.css # 弹窗样式
│ │ └── popup.js # 弹窗逻辑
│ ├── content/
│ │ └── content.js # 内容脚本 (编码活动检测 + 内联提醒)
│ ├── options/
│ │ ├── options.html # 设置页面
│ │ └── options.js # 设置逻辑
│ ├── icons/
│ │ ├── icon16.png # 16x16 图标
│ │ ├── icon48.png # 48x48 图标
│ │ └── icon128.png # 128x128 图标
│ └── README.md # 插件安装说明
├── codefuel-vscode/ # VS Code 插件
│ ├── package.json # 扩展清单 (commands, configuration)
│ ├── extension.js # 扩展主逻辑 (状态栏计时器 + Webview 面板)
│ └── README.md # 安装和使用说明
├── hero-bg.jpg # 展示页素材（第一版，已合并为 SVG）
├── icon-timer.jpg # 展示页素材
├── icon-health.jpg # 展示页素材
├── icon-relax.jpg # 展示页素材
└── icon-ai.jpg # 展示页素材
- 纯原生：HTML + CSS + JavaScript，零依赖，零框架
- 数据持久化：localStorage（单页应用）/ chrome.storage.local（插件）
- 设计系统：CSS 变量驱动的暗色主题（霓虹绿 #00e68a / 青色 #00d4ff / 紫色 #a855f7）
- 字体：Noto Sans SC（中文）+ JetBrains Mono（等宽数字）
- 动画：CSS Transitions / Keyframes + Web Animations API（粒子效果）
- 测试：自研轻量测试框架（TestRunner），无外部依赖
深色背景 + 霓虹色调 + 毛玻璃效果 + 发光阴影，营造科技感编程氛围。
Grid + Flexbox 弹性布局，适配桌面和移动端。
- 键盘快捷键支持
- 按钮有清晰焦点状态
- 通知可通过 × 按钮关闭，不强制操作
- 休息通知弹出时暂停计时器，等待用户决策
- 所有数据存储在本地，不上传任何服务器
- 支持一键清空今日数据 / 全部数据
- 日期自动滚动（跨天自动归零）
| 权限 | 用途 |
|---|---|
storage |
存储计时器和健康数据 |
alarms |
后台计时器调度 |
notifications |
休息/饮水提醒通知 |
tabs |
向网页注入内联提醒 |
idle |
检测用户空闲状态 |
scripting |
内容脚本注入 |
- 长时间编码的程序员
- VibeCoding / AI 辅助编程用户
- 容易忘记休息的开发者
- 关注颈椎/视力健康的码农
- 喜欢炫酷工具的极客
- 亮色模式（设置页可切换暗色/亮色主题，自动保存偏好）
- 数据导出 / 导入（JSON 格式，支持备份和恢复）
- 疲劳模糊改为真实页面活跃时间驱动（不点计时器也会逐渐模糊）
- 浏览器插件同步黑科技功能（popup 新增黑科技标签页，含水滴提醒/久坐警报/疲劳滤镜/护眼色温）
- 更多放松课程（手部放松操 8 步 + 腰部拉伸 9 步）
- 国际化（English）（i18n 系统，中英文一键切换，导航栏/计时器/设置等核心 UI 已翻译）
- VS Code 插件版本（状态栏计时器 + Webview 面板 + 喝水/久坐提醒）
MIT
- 灵感来源：TRAE 创意大赛
- 颈椎瑜伽教练：原创设计，非照抄
- 沉浸式休息空间：受 Calm / Headspace 启发
- 番茄花园：受 Forest 启发
CodeFuel — Keep coding, keep healthy.