老师不是只有上课。真正磨一节课的功夫，都在课后的碎片时间里：看到一段好引文、想起一道好题、听见学生一句有意思的话……这些念头来得快、散得快，存哪儿都嫌麻烦。所以我做了个小盒子，专门接住它们。
作品介绍
教案碎片收纳盒 —— 一个给教师备课用的轻量素材收纳工具。纯前端、零后端、零依赖，双击就能用。
平时备课最零碎的那些东西，都能顺手丢进去：
- 课堂上学生的精彩提问和回答
- 突然冒出来的教学灵感
- 易错题、好题、开放性题目
- 教案设计思路、板书主线
- 看到的名言、想到的课堂活动
每一条都可以打上标签分类，随手搜索，拖拽排序，攒够了还能一键导出成 Markdown 或者 Word 文档，直接进教案。
成果展示
主界面——左侧标签栏，右侧素材卡片，顶部录入区：
导出预览——勾选素材后可以预览、编辑再复制，或下载 Word 文档：
教师节彩蛋——右下角藏着一支粉笔，鼠标悬停显形，点开是一段祝福：
体验方式
- GitHub 仓库：教案碎片收纳盒
- 打开方式：下载后双击
index.html即可使用（或python -m http.server起个静态服务） - 首次打开会自动注入 60 条备课场景示例数据（6 个标签 × 10 条），马上就能体验全部功能；数据只存在浏览器本地，也可以一键导出 JSON 备份
创作分享
最有意思的其实是过程。做一个工具不难，难的是把它做成"老师愿意用"的样子：
- 先让产品经理挑毛病：第一版做完，我让产品经理审了一轮，结果指出三个真问题——数据只存本地没有备份入口、导出前不能预览、编辑要走回顶部。后来补上了 JSON 备份导入导出、导出预览弹窗。
- UI 设计师嫌弃配色太"AI"：一开始是那种奶油白+柔光的通用配色，被设计师点名说"太工具化"。于是推翻重来，换成宣纸米黄打底、墨色文字、朱砂红点缀的纸墨质感，标题用楷体，有种教案本的感觉。
- 渗透工程师来扫了一遍：导入备份文件做了结构和大小校验，所有用户内容先 HTML 转义再上样式，XSS 载荷测试全过。
- Word 导出的坑：纯前端生成 Word 最省事的办法是输出 HTML 存成
.doc，但素材内容必须严格转义，否则会把内容当代码执行。我把转换逻辑抽成独立模块，还补了 25 个单元测试，连 7 个井号这种边界都测了。
最满意的是那个彩蛋：右下角半透明的粉笔，不打扰，但悬停会亮起来。就像老师这个职业——大多数时候安安静静，但你一需要，它就在。