团队进度跟踪

概述

团队进度跟踪系统允许团队监控成员在不同资源（路线图、最佳实践和自定义路线图）上的学习历程。团队进度跟踪是一项核心功能，可实现

团队管理员监控整体团队进度
团队成员查看彼此的学习路径
比较同一路线图上不同成员的进度
通过带有进度指示器的路线图渲染可视化进度

该系统集成了用户进度系统和路线图渲染组件，以提供协作式学习环境。

来源

数据模型

团队进度跟踪系统依赖几个关键的数据结构来模拟团队成员、进度和活动。

来源

进度跟踪工作流

团队进度跟踪系统遵循特定的工作流，允许团队成员更新和查看其自身及其队友的进度。

来源

进度可视化组件

团队进度跟踪系统使用多个组件来可视化不同级别的进度

MemberProgressModal 是一个关键组件，用于显示成员在特定路线图上的进度。它渲染带有已完成、进行中和已跳过主题的视觉指示器的路线图 SVG。

当用户查看自己的进度时，他们可以从此模态框直接更新进度，使用

左键单击：打开主题详细信息
右键单击：将主题标记为完成/未完成
Shift+单击：将主题标记为学习中/未学习中
Alt+单击：将主题标记为已跳过/未跳过

对于使用编辑器创建的自定义路线图，将使用功能类似的专用 `MemberCustomProgressModal`。

来源

团队进度页面

TeamProgressPage 是团队进度可视化的主要入口点。它提供两种视图：

以成员为中心的视图：显示所有成员在不同资源上的进度
以路线图为中心的视图：显示所有路线图，以及每个团队成员的进度

来源

进度数据管理

团队进度跟踪系统通过多个 API 和辅助函数来管理进度数据。

API 集成

该系统使用多个 API 端点来获取和更新进度数据

v1-get-team-progress/${teamId}：获取所有团队成员的进度
v1-get-member-resource-progress/${teamId}/${memberId}：获取成员在特定资源上的进度
v1-get-team-activity/${teamId}：获取团队活动流
v1-update-team-resource-config/${teamId}：更新团队资源配置

进度通过将 CSS 类应用于路线图 SVG 元素来可视化

done：已完成的主题
learning：正在学习的主题
skipped：已跳过的主题
removed：已从路线图中移除的主题

来源

进度更新流程

当用户更新主题上的进度时，会发生以下序列

进度更新函数处理不同的状态类型

done：将主题标记为已完成
learning：将主题标记为进行中
skipped：将主题标记为已跳过
pending：重置主题的状态

来源

团队活动跟踪

团队进度跟踪系统包含活动跟踪功能，用于显示团队成员的近期进度

活动按以下方式分组

用户
活动类型（已开始、已完成、已回答）
资源（路线图、最佳实践、问题）

这提供了一个团队进度的时间线视图，并鼓励协作和良性竞争。

来源

权限管理

团队进度跟踪系统根据团队成员的角色实施权限控制

管理员：可以查看和管理所有团队进度
经理：可以查看所有团队进度并管理某些方面
成员：可以查看自己的进度，并且根据团队设置，还可以查看其他成员的进度

该系统遵守 `personalProgressOnly` 设置，启用该设置后，成员只能查看自己的进度。

来源

与仪表盘集成

团队进度跟踪系统与仪表盘集成，以便快速访问团队进度。

团队仪表盘：显示团队活动和资源进度。
团队进度页面：按成员或路线图详细查看团队进度。
团队成员详情页面：详细查看特定成员的进度。

此集成创造了一个统一的体验，让团队能够跟踪和管理学习进度。

来源

进度如何渲染

进度渲染系统采用以下方法：

从服务器获取路线图 JSON。
使用 wireframeJSONToSVG 或 renderFlowJSON (用于自定义路线图) 将 JSON 转换为 SVG。
从 API 获取成员进度。
根据进度状态将 CSS 类应用于 SVG 元素。
为用户交互设置事件处理程序。

对于使用编辑器创建的自定义路线图，过程类似，但使用了来自 @roadmapsh/editor 的 ReadonlyEditor 组件。

来源

结论

团队进度跟踪系统为团队提供了一个全面的解决方案，用于跟踪、可视化和管理各种资源的学习进度。该系统与用户进度系统、路线图渲染组件和团队管理功能紧密集成，以创造一个协作式学习环境。