Sapphire开发日志（九）——界面开发5：我的数据集界面

“我的数据集”界面是用户管理和浏览自己相关数据集的重要平台。该界面提供了数据集的筛选功能，用户可以根据不同的状态（我认领的、进行中的、我发布的）来查看数据集。本文将详细介绍该界面的布局、实现过程，以及开发中的重难点和关键之处。

界面布局

“我的数据集”界面的布局主要包括以下几个部分：

1. 筛选标签：用户可以通过标签切换来筛选不同状态的数据集。
2. 数据集展示区域：根据用户选择的标签，展示相应的数据集。
3. 加载状态显示：在数据加载过程中显示加载动画，提升用户体验。

界面截图如下：

关键代码实现

筛选标签

筛选标签使用了 Tabs 组件，用户可以通过点击不同的标签来切换数据集的状态。

<Box sx={{ borderBottom: 1, borderColor: "divider", width: "100%" }}>
  <Tabs
    value={type}
    onChange={(e, val: number) => setType(val)}
    aria-label="basic tabs example"
  >
    <Tab label="我认领的" id="0" />
    <Tab label="进行中的" id="1" />
    <Tab label="我发布的" id="2" />
  </Tabs>
</Box>

数据集展示区域

数据集展示区域根据用户选择的标签，动态展示相应的数据集。这里使用了 MyDataSet 组件来展示每个数据集的信息。

{type == 0 && joined_Success && (
  <Box sx={{ maxWidth: "1000px", width: "100%" }}>
    {joined_dataset.data.data.map((e: any) => {
      return <MyDataSet dataset={e} />;
    })}
  </Box>
)}
{type == 0 && joined_Loading && <Loading />}
{type == 1 && running_Success && (
  <Box sx={{ maxWidth: "1000px", width: "100%" }}>
    {running_dataset.data.data.map((e: any) => {
      return <MyDataSet dataset={e} />;
    })}
  </Box>
)}
{type == 1 && running_Loading && <Loading />}
{type == 2 && created_Success && (
  <Box sx={{ maxWidth: "1000px", width: "100%" }}>
    {created_dataset.data.data.map((e: any) => {
      return <MyDataSet dataset={e} />;
    })}
  </Box>
)}
{type == 2 && created_Loading && <Loading />}

加载状态显示

在数据加载过程中，使用 Loading 组件显示加载动画，提升用户体验。

{type == 0 && joined_Loading && <Loading />}
{type == 1 && running_Loading && <Loading />}
{type == 2 && created_Loading && <Loading />}

数据获取

使用 useQuery 钩子从后端获取数据集信息，并根据不同的标签进行数据展示。

const {
  data: joined_dataset,
  isSuccess: joined_Success,
  isError: joined_Error,
  isLoading: joined_Loading,
} = useQuery({
  queryKey: [get_joined_dataset_url],
  queryFn: queryFn,
});

const {
  data: created_dataset,
  isSuccess: created_Success,
  isError: created_Error,
  isLoading: created_Loading,
} = useQuery({
  queryKey: [get_created_dataset_url],
  queryFn: queryFn,
});
const {
  data: running_dataset,
  isSuccess: running_Success,
  isError: running_Error,
  isLoading: running_Loading,
} = useQuery({
  queryKey: [running_dataset_url],
  queryFn: queryFn,
});

重难点和关键之处

1. 数据集展示逻辑

在多个标签中展示不同状态的数据集，需要确保展示逻辑的统一和简洁。我们通过封装 MyDataSet 组件，将数据集展示的逻辑统一封装在一个组件中，减少代码冗余，提高代码的可维护性。

2. 数据加载状态管理

在数据加载过程中，需要实时显示加载动画，并在数据加载完成后展示数据集。使用 useQuery 钩子和 Loading 组件，我们能够有效管理数据加载状态，提升用户体验。

3. 用户交互体验

用户在切换标签时，需要确保界面响应迅速，避免卡顿和延迟。通过合理的状态管理和事件处理，我们确保了用户交互的流畅性。

总结

通过对“我的数据集”界面的开发和完善，我们实现了一个功能齐全、布局合理的用户界面。通过使用 MyDataSet 组件和 useQuery 钩子，我们不仅解决了数据展示和加载状态管理的问题，还提升了用户的交互体验。