交互式贡献图系统
系统概述
交互式贡献图系统是一个灵感来源于 GitHub 贡献图的个人生产力跟踪工具。它允许你记录每日任务清单、完成情况和大方向，并通过可视化的方式展示你的工作节奏。
主要功能
🎯 每日记录
- 任务清单: 记录当天要完成的具体任务
- 方向标记: 用 familiar domain、new exploration、running、reading、communication 标记当天的大方向
- 可选备注: Daily note 默认隐藏，需要时手动展开
📊 数据可视化
- GitHub 风格: 采用熟悉的日历方块布局
- 完成率显示: 根据当天任务清单完成百分比显示不同的颜色深度
- 完成日标记: 当天所有任务完成后会有更明确的完成状态
🔄 交互体验
- 点击记录: 直接点击日期方块即可快速添加或编辑记录
- 悬停提示: 鼠标悬停显示当天任务和完成率
- 实时更新: 打卡后贡献图立即更新显示
使用方法
添加打卡记录
- 点击日期方块: 在贡献图中点击任意日期的小方块
- 填写信息:
- 选择当天的大方向
- 添加当天任务清单
- 勾选已经完成的任务
- 按需展开 Daily note 并记录备注
- 保存记录: 点击保存按钮完成打卡
方向标记说明
系统预设了 5 种方向标记，用于保留当天工作的宏观分类：
- familiar domain - 熟悉领域内的持续推进
- new exploration - 对新领域的探索和试验
- running - 跑步与体能训练
- reading - 读书、课程和长期学习
- communication - 会议、讨论和对外沟通
统计分析
系统会自动计算并显示：
- 任务完成数: 过去一年的已完成任务数量
- 连续记录天数: 当前连续完成任务记录的天数
- 完成率: 已完成任务占计划任务的百分比
- 方向统计: 根据方向标记统计长期投入分布
技术特性
🔧 数据存储
- API 接口: RESTful API 支持增删改查操作
- 类型安全: 完整的 TypeScript 类型定义
- 实时同步: 前后端数据实时同步
🎨 用户体验
- 响应式设计: 适配不同屏幕尺寸
- 暗色模式: 支持系统主题切换
- 无障碍访问: 完整的键盘导航和屏幕阅读器支持
⚡ 性能优化
- 懒加载: 按需加载历史数据
- 缓存机制: 智能数据缓存减少请求
- 动画优化: 流畅的交互动画效果
快捷操作
键盘快捷键
Escape- 关闭打卡弹窗Ctrl/Cmd + Enter- 快速保存记录
最佳实践
📝 制定计划
- 具体明确: 工作计划要具体可执行
- 合理预期: 当天任务数量要符合实际能力
- 定期回顾: 通过数据分析优化工作习惯
🎯 保持动力
- 连续打卡: 努力保持连续记录的习惯
- 完成日挑战: 尽量完成当天列出的关键任务
- 数据分析: 利用统计信息不断优化
故障排除
常见问题
Q: 数据没有保存成功？ A: 检查网络连接，确保工作计划字段已填写
Q: 贡献图显示异常？ A: 刷新页面重新加载数据，或检查浏览器控制台错误信息
Q: 无法删除记录？ A: 确认有删除权限，或联系管理员
技术支持
如果遇到其他问题，可以：
- 检查浏览器开发者工具的控制台信息
- 查看 API 响应状态和错误信息
- 提交 issue 到项目仓库
这个交互式贡献图系统旨在帮助你更好地跟踪和分析自己的工作习惯，通过可视化的方式激励自己保持良好的工作节奏。记住，关键不在于每天都完成最多的任务，而在于建立并维持一个可持续的工作习惯。