为什么又做一个习惯 App？
市面上的习惯追踪 App 已经够多了。
但我用过的每一个，都活不过 9 天。
不是因为功能不够多，是因为它们只会让你打卡。
打卡第 1 天：充满动力
打卡第 3 天：开始机械
打卡第 7 天：忘了为什么要做这件事
打卡第 9 天：卸载
所以我做了习知（HabitLearner）。
习知的主界面截图，展示仪表盘和习惯卡片
核心就一个公式
|
|
学习（Learn）：每天 5 分钟微课，告诉你为什么要养成这个习惯，怎么做更科学。
实践（Practice）：打卡不是目的，是把学到的东西变成行动。
目前做了什么
1. 智能打卡系统
不是简单的「今天打卡了吗」。
- 支持每日多次打卡（比如「喝 8 杯水」）
- 自动计算连续天数（Streak）
- 每日留言记录感悟
- 乐观更新，点击立即生效，不用等服务器
技术上用了 Vue 3 的响应式系统，配合全局状态管理，确保数据实时同步。
习惯打卡界面，显示连续天数、今日打卡状态、每日留言
2. Notion 级别的计划编辑器
这是我花时间最多的功能。
支持 14 种内容块：
- 文本：标题、正文、引用
- 列表：有序、无序、待办
- 媒体：图片、视频、音频
- 高级：代码、公式、表格、多栏、折叠、标注
交互体验：
- 鼠标悬停显示控制按钮
- 拖拽调整块的位置
- 快捷键快速操作（
Ctrl+B加粗，/打开块选择器） - 自动保存，防抖 500ms
为什么要做这么复杂的编辑器？
因为习惯养成需要计划，而计划需要结构化的内容。
用 Notion 写计划太重，用普通文本框又太简陋。
所以我做了个中间态：够用，但不臃肿。
Notion 风格的块编辑器界面，展示多种内容块类型（标题、列表、代码、图片等）和浮动控制按钮
3. 微学习内容库
根据你的习惯类型，推荐相关的微课。
比如你想养成「每日阅读」的习惯：
- 第 1 天：为什么阅读很重要？
- 第 3 天：如何选择适合自己的书？
- 第 7 天：碎片化阅读 vs 深度阅读
- 第 14 天：如何做读书笔记？
每节课 150 字以内，配视频或图文，5 分钟看完。
用户也可以上传自己的内容，上传成功后链接分享给其他人。
微学习内容页面，展示课程卡片、分类筛选、视频播放界面
4. 数据可视化
仪表盘实时显示：
- 今日完成的习惯数
- 总连续天数
- 习惯完成率趋势图
用 Vue 的计算属性实现，数据变化自动更新，不需要手动刷新。
技术栈
前端：
- Vue 3 + Composition API
- Vite（开发体验真的爽）
- Pinia（状态管理）
- Tailwind CSS（快速写样式）
设计风格：
- 纯黑白配色
- Apple 风格的圆角和阴影
- 完整的暗色模式支持
性能优化：
- 组件懒加载
- 防抖处理
- 代码分割
- 图片懒加载
遇到的坑
1. 状态同步问题
打卡后，仪表盘的统计数据不更新。
原因： Vue 的响应式系统没有检测到深层对象的变化。
解决： 引入全局 forceUpdate 触发器，配合计算属性强制刷新。
2. 块编辑器渲染问题
动态导入组件时，页面显示 [object Promise]。
原因： 异步组件没有正确处理。
解决： 改用同步导入，统一块组件接口。
3. 乐观更新的回滚
用户打卡后，如果服务器返回失败，UI 已经更新了怎么办？
解决： 保存操作前的快照，失败时回滚，并显示错误提示。
目前的状态
- ✅ 核心功能已完成
- ✅ 基础 UI 设计完成
- ✅ 本地开发环境稳定
- 🚧 后端 API 对接中
- 🚧 移动端适配优化中
- 📅 计划 12 月上线内测
下一步
短期：
- 添加习惯分享功能
- 数据导出（PDF/Excel）
- 优化移动端体验
长期：
- AI 推荐习惯和学习内容
- 习惯社区和挑战活动
- 多语言支持
为什么要做这个？
因为我自己需要。
我试过无数个习惯 App，都没坚持下来。
不是因为我不够自律，是因为它们没有给我持续的动力。
打卡只是表象，理解为什么要做这件事才是核心。
所以我做了习知。
项目还在开发中，代码仓库暂时私有。
等稍微能看了再开源。
如果你也对习惯养成感兴趣，或者想一起做点什么，欢迎联系我：
写于 2025.11.30，凌晨写代码写累了，顺手记录一下。