故事要从一堆手机相册里的"半成品"说起……

🌙 灵感：凌晨三点的"手账债务"

作为一个宝妈，你是不是也这样——

宝宝第一次翻身，拍了；第一次叫妈妈，录了；第一次吃辅食，连拍20张…… 然后呢？然后就没有然后了。

照片躺在相册里，像一笔还不清的"手账债务"。每次想整理成手账，打开排版软件，选模板、调字体、加贴纸…… 半小时过去了，孩子哭了，手账？下次吧。

下次复下次，下次何其多。

我就在想：能不能拍张照，AI就把手账给我写了？

于是就有了「懒人手账」—— 一个让"懒人"也能坚持记录生活的小程序。

---

🎯 设计思路：把简单做到极致

核心理念：三步完成一篇手账

传统手账APP的问题是什么？太复杂了。

打开APP → 选择模板 → 上传图片 → 排版 → 写文案 → 加滤镜 → 选贴纸 → 调字体…… 等你弄完，娃都睡了一觉了。

懒人手账的逻辑刚好反过来：

1. 选个风格（日常/亲子/美食/旅行/探索/工作，6种随便挑）
2. 拍张照（或者从相册选，最多100张，任性传）
3. 点保存（AI自动写文案、打标签、配表情）

就三步。多一步都算我输。

六大风格，覆盖生活全场景

风格	适用场景	代表emoji
📋 日常打卡	写日记、自律打卡	📋 ✅ 📝 ✨ 🌟
👶 亲子遛娃	宝宝成长、遛娃日常	👶 🍼 🎮 🏃 💝
🍽️ 美食记录	探店打卡、DIY美食	🍽️ 🍕 ☕ 🎂 🍜
🏞️ 短途旅行	周边游、露营、citywalk	🏞️ 🚗 ✈️ 🏕️ 🗺️
🗺️ 探索新世界	解锁新地点、体验新事物	🗺️ 🔍 🎨 🌿 ✨
💼 工作学习	打工人日记、学习打卡	💼 📚 💪 ☕ 🏆

每种风格下还有N个快速模板，点一下就自动填入正文+标签，连标题都给你想好了。

---

💻 技术实现：单文件HTML的快乐

你没看错，整个项目就是 一个HTML文件。

为什么用单文件？因为——

• TRAE改起来方便：所有代码在一个文件里，AI一眼就能看懂上下文
• 部署零成本：扔到任何静态服务器都能跑，甚至本地双击打开就行
• 原型迭代快：想到什么新功能，马上就能改了看效果

技术栈一览

纯前端三件套：HTML + CSS + JavaScript
数据存储：localStorage（浏览器本地存储）
UI风格：微信小程序风 + 梦幻紫粉配色
动画效果：CSS transition + 一点点小心机

核心架构：AppState 一把梭

没有Redux，没有Vuex，就一个朴素的 AppState 对象管全局：

const AppState = {
  user: null,              // 用户信息
  handbooks: [...],        // 手账列表
  activeTab: 'home',       // 当前Tab
  activeView: 'home',      // 当前页面
  theme: 'default',        // 主题
  checkin: {},             // 签到记录
  cloudBindings: {},       // 云存储绑定
  // ... 等等等等
};

渲染就靠一个 render() 函数，状态变了就重新渲染整个页面。什么虚拟DOM、diff算法…… 咱这页面小，直接全量重绘也快得很。

简单的项目，用简单的方法。别搞复杂了。

---

✨ 那些花了心思的小细节

1. 智能emoji系统

日历上每天显示的小图标不是瞎选的，是根据记录风格智能匹配的：

function getSmartEmoji(handbook) {
  // 有自定义emoji？用它
  if (handbook.emoji && handbook.emoji !== '🌸') return handbook.emoji;
  
  // 按风格随机选
  const styleEmojis = {
    parenting: ['👶', '🍼', '🎮', '🏃', '💝'],
    food: ['🍽️', '🍕', '☕', '🎂', '🍜'],
    // ...
  };
  
  if (styleEmojis[handbook.styleId]) {
    return 随机选一个;
  }
  
  // 实在没有就默认🌸
  return '🌸';
}

为什么是随机？因为生活需要一点小惊喜嘛。

2. 上传图片的"变形记"

新建手账页面的上传区域有两种形态：

• 没传图时：占半屏的大框框，引导你上传
• 传了图后：缩成一行滚动的小缩略图，末尾一个+号，正文区域扩大

就像这样：

[  大大的上传框  ]   →   [图1][图2][图3][+]
[  流程说明文字  ]       [  标题输入框    ]
                         [  正文大文本框  ]

为什么这么设计？因为没传图的时候，用户需要明确的引导；传了图之后，重点就变成写内容了，上传区域就该"退居二线"。

3. 成就勋章：给坚持一点仪式感

光记录多无聊？加点游戏化元素：

• ✍️ 记录达人：累计写满10/50/100篇解锁铜/银/金
• 📸 摄影收藏家：上传图片达到一定数量
• 🔥 连续打卡：连续记录7/30/100天
• 🎯 全能选手：体验过所有记录风格
• 💝 分享达人：分享手账达到次数

小小的勋章，大大的成就感。

4. 手账广场：让记录被看见

写了手账没人看？那多寂寞。

• 热榜TOP5：按点赞+浏览量排序，看看大家都在看什么
• 新榜TOP5：按发布时间排序，新鲜出炉的手账
• 公开/私密切换：想分享就公开，想自留就私密，全凭你心情

---

🐛 踩坑实录：那些让我挠头的Bug

做项目哪有不踩坑的？说几个印象深刻的——

坑1：返回按钮"神秘消失"事件

症状：点击置顶、切换主题、签到…… 各种操作后，页首的返回按钮就没了。

排查过程：

• 第一次：以为是CSS问题，调了半天z-index
• 第二次：以为是DOM结构问题，查了半天元素
• 第三次：打开控制台一看—— 红了！

哦，原来 renderDetail() 里有一行：

$('#editBtn').onclick = () => ... 

但是HTML里根本没有 id="editBtn" 这个按钮！JS报错了，后面的 renderNavBar() 就没执行……

修复：加上缺失的编辑按钮，保证JS不报错。

心得：页面出问题先看控制台，90%的Bug都在报错信息里。

坑2：textarea高度"不听话"

症状：我把正文框的 min-height 改成320px了，怎么还是那么矮？

原因：HTML里写了内联样式 style="min-height:100px;"，内联样式优先级比类选择器高，CSS被覆盖了。

修复：把内联样式删掉，统一用CSS控制。

心得：CSS优先级是个好东西，内联样式少用为妙。

坑3：日历图标"叠罗汉"

症状：同一天有多篇手账时，emoji叠在一起，还溢出格子了。

修复：

1. 用 new Set() 去重，相同的emoji只显示一个
2. 最多显示1个，多了显示 +N
3. 给格子加 overflow: hidden，防止溢出

心得：列表展示永远要考虑"多了怎么办"。

---

🚀 云备份：给数据多一层安全感

做记录类产品，用户最担心的是什么？数据丢了。

所以我加了个"快速备份到云"功能，支持三个选项：

• ☁️ 巨量云：免费10GB，极速传输
• 📦 百度云：2TB大空间，智能备份
• 🖥️ 私有NAS：数据自己掌控，隐私无忧

点击后弹出仿微信授权风格的弹窗，点"同意授权"就绑定成功了。虽然是模拟的，但该有的仪式感一点不少——

真实产品中，这一块得接真实的SDK，不过原型嘛，模拟一下意思到了就行。

---

🎨 四套主题，换个心情换个色

做了四套配色方案，总有一款适合你：

主题	风格	主色调
主色调	紫粉橙渐变 · 梦幻	💜 #9D5BFF
可爱活泼	天蓝薄荷粉橙 · 少女	💗 #FF8A83
暖阳温馨	橙黄黑白 · 温暖	🧡 #FF7530
赛博朋克	黄紫天蓝 · 霓虹	💛 #F5E200

点一下就切换，瞬间换个心情。实现原理就是CSS变量 + 一个 applyTheme() 函数，简单得很。

---

📱 iPhone 17 Pro 外壳：让原型更有那味儿

为了让演示更有小程序内味儿，我还加了个手机外壳模拟：

• 灵动岛
• 侧边音量键、电源键
• 底部Home Indicator
• 圆角边框

放在电脑上演示的时候，一眼就能看出"哦，这是个小程序原型"。

---

💡 开发心得：用TRAE做原型有多爽

这次全程用TRAE开发，最大的感受就是—— 快。

快在哪里？

1. 需求到原型，一步到位
   把需求文档扔给TRAE，它直接就能理解并生成代码。不用自己从零搭架子。

2. 改UI特别高效
   “按钮往左挪一点”、“颜色调淡一点”、“加个动画”—— 说人话就行，TRAE秒改。

3. Bug排查快
   遇到问题直接描述现象，TRAE帮你分析原因、给出解决方案。

4. 不用查文档
   什么CSS属性、JS API，记不住没关系，TRAE都记得住。

一些小建议

如果你也想用TRAE做项目：

• ✅ 先想清楚再动手：需求越清晰，AI做出来的东西越符合预期
• ✅ 小步快跑迭代：一次改一个功能，别一口气提一大堆需求
• ✅ 多看图多对比：有参考图的话，效果会好很多
• ✅ 别急着重构：原型阶段能用就行，代码整洁度往后放

---

🌟 写在最后

做这个项目的初衷其实很简单：我就是想让记录这件事变得更容易一点。

我们这代人，手机里存着成千上万张照片，却很少有时间回头看。那些开心的、难过的、值得纪念的瞬间，就静静地躺在相册里，慢慢被遗忘。

如果有一个工具，能让你花10秒钟，就能把那一刻的心情记录下来，多年后翻到的时候，还能想起当时的温暖—— 那就够了。

生活值得被记录，哪怕是用最懒的方式。

---

项目地址：lazy-handbook
如何体验：前往github 下载index.html，直接预览
报名帖：TRAE AI创造力大赛 -初赛- 懒人手账

如果觉得有意思，欢迎点个Star ⭐ 有什么想法也欢迎在评论区交流～

🌸 愿你也能找到属于自己的"懒人记录法"。