DEV Community
·
使用 React 和 TypeScript 构建生产力应用中的目标跟踪系统
💡
原文英文，约6400词，阅读约需24分钟。
📝
内容提要
本文讨论了为生产力应用程序构建目标跟踪系统的过程。该系统允许用户设定和跟踪目标，包括设置截止日期、跟踪进度和为目标分配表情符号等功能。文章涵盖了实现细节，包括将目标存储在数据库中、使用React进行前端实现以及应用程序中使用的各种组件和钩子。还包括了显示时间轴、分组目标和编辑/创建目标等系统不同部分的代码片段。
🎯
关键要点
- 本文讨论了为生产力应用程序构建目标跟踪系统的过程。
- 系统允许用户设定和跟踪目标，包括设置截止日期、跟踪进度和为目标分配表情符号等功能。
- 目标实体包含唯一标识符、表情符号、目标名称、状态、截止日期、高级计划、可测量目标的当前值和目标值等属性。
- 使用DynamoDB作为数据库，目标存储在用户项中，目标ID作为键。
- 前端实现包括两个子页面：一个用于活动目标，另一个用于已完成目标。
- GoalsViewSelector组件用于在活动目标和已完成目标之间切换视图。
- 活动视图包括时间轴、教育块和目标列表，用户可以添加新目标。
- GoalsTimeline组件根据用户的出生日期显示时间轴，并提示用户设置出生日期。
- SetDobPrompt组件用于提示用户设置出生日期，SetDobForm组件用于提交出生日期。
- GoalsTimelineProvider组件计算时间轴的起止时间，并生成时间标签。
- GroupedGoals组件根据截止日期对目标进行分组，以避免在时间轴上重叠。
- GoalItem组件用于显示目标的内容，包括名称、状态、截止日期和计划。
- EditGoalForm组件允许用户编辑或删除目标，并在提交时调用更新目标的API。
- 目标状态标签显示目标的状态及其完成百分比。
- GoalDeadline组件显示目标的截止日期和剩余时间。
➡️
