个人效率 / 习惯养成工具(Self-improvement / Habit Tracking)。
典型用户可通过「每日打卡 + 连续天数 +完成率」形成正反馈、培养长期习惯的个人用户。产品形态类似于 Habitica、Streaks 这类轻量打卡产品,但更简单纯粹。
点击空白处退出提示
语言技术
React、TypeScript系统类型
Web行业分类
生活旅游
个人效率 / 习惯养成工具(Self-improvement / Habit Tracking)。
典型用户可通过「每日打卡 + 连续天数 +完成率」形成正反馈、培养长期习惯的个人用户。产品形态类似于 Habitica、Streaks 这类轻量打卡产品,但更简单纯粹。
- 添加习惯:支持颜色标签,不选则自动轮转分配
- 近 7 天打卡视图:点击切换某天的完成/未完成状态
- 统计:当前连续天数 / 历史最长连续天数 / 近 30 天完成率(带进度条)
- 本地持久化:数据存 localStorage
- 导出 JSON 备份(文件名带日期)
- 删除习惯:二次确认的破坏性操作保护
架构分层(依赖严格单向向下):
src/app/ Server Component 外壳(layout、page、metadata)
src/components/ Client Components("use client")
src/lib/use-habit-store.ts React 桥(唯一接 store 的地方)
src/lib/store.ts 内存快照 + 订阅 + mutate() 唯一写入口



评论