Sapphire开发日志（十）——界面开发6：任务集详情界面

这是一个展示任务详细信息和进度的重要页面。该界面内容丰富，包含任务基本信息、参与者、采集进度、时间线和日历热力图等。本文将详细介绍该界面的布局、实现过程，以及开发中的重难点和关键之处。

界面布局

任务集详情界面主要包括以下几个部分：

1. 任务基本信息：展示任务的名称、描述和标签。
2. 参与者信息：展示参与该任务的用户列表。
3. 采集进度：使用进度条展示任务的当前进度。
4. 日历热力图：展示任务在不同日期的活跃度。
5. 时间线：以时间轴的形式展示任务的关键节点和进展。

界面截图如下：

关键代码实现

任务基本信息和参与者信息

任务基本信息和参与者信息通过简单的布局和组件展示，效果如下：

采集进度

采集进度使用 LinearProgress 组件来展示任务的完成情况。

<Typography variant="h6" sx={{ m: 2 }}>
  采集进度
</Typography>
<LinearProgress
  variant="determinate"
  value={80}
  sx={{ ml: 2, flexGrow: 1, marginRight: 4, height: 6 }}
/>

日历热力图

日历热力图使用 DayHeatmap 组件来展示任务在不同日期的活跃度。

<Box sx={{ display: "flex", justifyContent: "center", m: 2 }}>
  <DayHeatmap type="task" id={dataset?.dataSetId} />
</Box>

时间线

时间线使用 Timeline 组件来展示任务的关键节点和进展。

重难点和关键之处

1. 界面布局的合理性

任务集详情界面内容丰富，需要合理布局以确保信息展示的清晰和有序。通过使用 Box、Typography 和 Chip 等组件，我们实现了简洁明了的界面布局。

2. 时间线的实现

时间线使用 Timeline 组件来展示任务的关键节点和进展。通过 TimelineItem、TimelineSeparator 和 TimelineContent 等子组件的组合，我们实现了直观的时间轴展示。

3. 日历热力图的实现

日历热力图使用 DayHeatmap 组件来展示任务在不同日期的活跃度。该组件通过颜色深浅来表示不同日期的任务活跃度，使用户能够直观地了解任务的进展情况。

4. 数据的动态展示

在组件加载时，我们使用 useEffect 钩子来获取并展示任务的详细信息。

useEffect(() => {
  console.log(dataset);
}, []);

总结

通过对任务集详情界面的开发和完善，我们实现了一个功能齐全、布局合理的用户界面。通过使用 Timeline 和 DayHeatmap 等组件，我们解决了时间线和日历热力图的展示问题，提升了用户的交互体验。