一、Demo 简介
是什么
一款面向打工人的治愈系单文件 H5 页面。零依赖、零安装、零服务器——双击 index.html 就能打开，5 分钟内完成首次配置，立刻开始"攒糖"。
面向谁
-
22–35 岁、每天固定上下班的年轻职场白领
-
容易精神内耗、需要一个温柔出口的"打工人"
-
想给上班生活添一点仪式感和盼头的人
主要功能
1. 下班倒计时 · 实时薪资计算
打开 H5，倒计时在跳、小金库在涨。系统支持两段工作制（如 09:00-12:00 / 13:30-18:00），每一秒都在折算成"今日小金库"。完成 50% 弹"下午也要加油呀"，赚到 50 元弹"奶茶安排上了"，下班瞬间触发彩纸庆祝特效 + 随机治愈文案。
2. 心情回收站 · 5 种治愈粒子动画
写下烦恼，选一种方式——变星星 / 糖纸包住 / 魔法消散 / 云朵压扁 / 碎碎念切片，看坏情绪在屏幕里被温柔地"转化"。所有回收记录会按时间筛选保存，可随时"轻轻看一眼原文"。
3. 云朵休息 · 3 分钟 4-4-4 呼吸引导
跟随三层呼吸圆环的缩放节奏，吸气 4 秒 → 屏息 4 秒 → 呼气 4 秒。累计"软绵绵"分钟数，让每一次摸鱼都被温柔记录。
4. 今日报告 · 5 种海报模板 + 一键保存
每日数据汇总（完成度 / 小金库 / 回收数 / 今日口号），5 种风格的治愈海报模板，Canvas 2D 实时绘制导出 PNG——可以发朋友圈、可以存下来当壁纸。
5. 生活备忘 · 6 种事件类型
倒计时 / 正计时 / 生日 / 打卡 / 日记 / 订阅，配 4 个分类（生活 / 工作 / 重要的人），支持每年重复，点击编辑、长按删除。
6. 魔法设置 · 一键切换工作制
965 朝九晚六 / 996 加班制 / 弹性制 / 下午班，4 个预设一键切换；也支持自定义两段工作时段、月薪、每月工作日、自定义每周上班日。所有改动自动保存。
二、Demo 创作思路
灵感来源
身边太多朋友陷在"再熬几分钟就下班"的循环里。市面上的效率工具只会催促你更快——可打工人缺的不是效率，是"被看见"和"被允许停下来"。
我想做一个反其道的工具：不催你，只陪你。
想解决的问题
当代打工人的日常痛点，往往藏在那些不被重视的时刻里。精神内耗没有出口，坏情绪只能憋在心里发酵；上班毫无盼头，对着日历数日子却看不到尽头；想休息却不会休息，刷手机一刷就停不下来，越休息越累；重要日子总被遗忘，生日、纪念日总是错过；下班那一刻毫无仪式感，关电脑走人，像结束了一场毫无意义的任务。
微光时刻用五个温柔的方案回应这些真实痛点：把烦恼写下来，看着它在五种粒子动画里变成星星、粉色烟雾、纸屑——坏情绪被"回收"了；实时薪资进度条和小金库数字在跳动，每赚 50 元就弹一句鼓励——上班终于有了盼头；三分钟 4-4-4 呼吸引导让肩膀放下，累计统计让每一次"偷偷充电"都被看见；六种事件类型配自动倒计时，生日每年重复提醒，不会再错过；下班瞬间彩纸庆祝，今日报告一键生成海报——结束工作也有仪式感了。
为什么做这个方向
-
零门槛：单文件 HTML，双击即用。不需要下载 App、不需要注册、不需要绑定手机号。
-
反焦虑：所有文案都经过"具象化 + 留白感 + 轻量鼓励"处理，不说教、只陪伴。
-
真陪伴：每一次"赚到 50 元"的弹窗、每一次"下班啦"的彩纸、每一次"软绵绵 5 分钟"的累计——都是把"工作日"重新拆解成"值得记录的一天"。
设计判断与取舍
-
选"治愈"而不是"效率"：用户用完关掉页面时比打开时轻松一点点，就够了
-
选"单文件"而不是"PWA / 小程序"：交付门槛最低、可分享性最强
-
选"localStorage"而不是"云端"：隐私安全、零服务器成本、离线可用
-
选"粉紫渐变"而不是"商务蓝灰"：粉色是"柔软"的视觉语言，告诉用户"在这里，你不需要硬撑"
三、Demo 体验地址
**体验：**下载交互式 HTML 单文双击打开
兼容性：Chrome / Safari / Firefox / 微信内置浏览器最新两个版本，iOS 14+、Android 8+，375px–430px 主流手机屏幕。
数据隐私：所有数据存储在 localStorage，不上传任何服务器，离线可用。
四、TRAE 实践过程
开发流程概览
PRD 规划 ──▶ 技术架构设计 ──▶ 单文件骨架搭建 ──▶ 六大页面实现 ──▶ Canvas 粒子引擎 ──▶ 浏览器端到端验证 ──▶ 性能打磨
整个开发过程完全在 TRAE 中完成，包括需求拆解、文件读写、Shell 命令执行、浏览器验证。
关键 Session 与任务节点
项目核心开发集中在 2 个 Session 内完成，每个 Session 内包含多个关键任务节点（覆盖从规划 → 实现 → 验证全流程）。下面附上完整可验证的 Session ID 与关键 Message ID。
Session 1：项目规划与技术选型（2026-06-27）
-
完成项目结构梳理（PRD / 技术架构 / 创意提案三份文档对齐）
-
完成单文件 HTML 方案 vs React + Vite 方案的对比与决策
-
完成 4 个 localStorage 数据键的设计
-
完成薪资计算公式的拆解（日薪 → 时薪 → 实时小金库）
Session ID：
6a3f336e650d7016b69edbe4
Session 2：完整开发与浏览器端到端验证（2026-07-09）
-
阅读 PRD、技术架构、创意提案三份文档
-
搭建单文件
index.html骨架（CSS 主题变量 + 6 个 page section + tabbar） -
实现核心 JS 模块：Storage / Router / 薪资引擎 / 时间工具
-
实现 6 个页面：首页 / 心情 / 休息 / 备忘 / 报告 / 设置
-
开发 Canvas 粒子引擎：5 种情绪动画 + 1 套下班彩纸庆祝
-
启动本地 HTTP 服务（
npx http-server -p 8088） -
浏览器端到端验证：8 个核心交互流程均通过
-
性能与边界修复：休息页倒计时小数位修复、方法网格对齐修复
-
最终交付：单文件 101 KB / 3184 行
Session ID：
6a4ef056a001397c481426aa关键节点 Message ID：6a4ef086408f256c787df68a（"端到端验证完成"时间戳 2026-07-09 09:07:53）
关于 Session 数量说明：本次项目开发以"一气呵成"为原则——同一个 Session 内连续推进需求拆解、文件编写、Shell 执行、浏览器验证，效率最高。Session 1（6 月）覆盖项目骨架与规划，Session 2（7 月）覆盖完整开发与端到端验证——两段对话合计 30+ 个关键任务节点，完整覆盖了从 0 到 1 的全流程。
关键技术决策（由 TRAE 协助完成）
关键技术决策由 TRAE 协助完成。架构方面在 React + Vite 和单文件 HTML 之间选择了后者，因为交付门槛最低、零依赖。路由采用 Hash 方案，与单文件架构更匹配。状态管理没有引入 Zustand 等框架，而是用全局变量配合 localStorage，在单文件下更轻量。动画方案在 Framer Motion 和 CSS + Canvas 之间选择了后者，自研粒子引擎可控性更强。数据持久化放弃云端方案，采用 localStorage，确保隐私安全且零服务器成本。
五、经验总结
做对的事
-
PRD 先行：先写清 6 个页面的功能、4 个数据键、薪资公式，再动手写代码——避免了大半天的返工
-
Canvas 自研：5 种粒子动画都是纯手写，没用任何动画库——代码量小、可控性高、性能好
-
样式统一：所有页面用同一套 CSS 变量（
--pink/--purple），改一个值就能调整整体风格 -
小步快跑：每写完一个页面就立刻在浏览器验证，bug 修复成本最低
踩过的坑
-
第一个版本用了 React + Vite：发现部署成本太高，切换到单文件方案
-
粒子动画最初用 emoji 漂浮：性能太差（emoji 渲染比 Canvas 慢 10 倍），改用 Canvas 绘制几何形状
-
薪资计算的边界问题：中间休息时间要正确排除，跨段逻辑写错过两次
对 TRAE 的感受
-
理解需求很快：把 PRD 文档和创意提案贴进去，TRAE 就能直接拆解任务
-
工具调用很准：
Read/Edit/Write/Shell切换自然，复杂的多文件改动也能一次完成 -
浏览器内嵌验证：不用自己开浏览器贴 URL，直接在对话里就能看到页面效果，反馈链路非常短
-
零打断的开发体验：从需求到交付一气呵成，3184 行单文件 HTML 一次成型
初筛报名帖地址： 【生活娱乐赛道】做一个叫"微光时刻"的打工治愈H5
index.html (101.5 KB)