Sapphire开发日志（七）——界面开发3：dataset组件封装

概述

在Sapphire项目的开发过程中，我们发现多个界面（如创意工坊、我的数据集等）都需要展示数据集的信息。为了提高代码的复用率和维护性，我们决定封装一个通用的组件来展示数据集信息。这个组件不仅展示数据集的基本信息（如名字、概述等），还根据用户的不同状态（是否为发布者、是否认领任务）动态显示不同的操作按钮（如认领、发布、编辑等）。

组件介绍

功能

该组件主要用于展示数据集的信息，包括：

• 数据集名称
• 数据集概述
• 截止时间
• 动态操作按钮（认领、编辑、开工）

动态按钮逻辑

组件根据以下条件动态显示不同的按钮：

• 如果用户既不是数据集的发布者也没有认领该任务，则显示“认领”按钮。
• 如果用户是数据集的发布者，则显示“编辑”按钮。
• 如果用户已经认领了任务，则显示“开工”按钮。

代码实现

以下是组件的具体实现代码：

interface MyDataSetProps {
    dataset: DataSetProps;
}

export default function MyDataSet({ dataset }: MyDataSetProps) {
    const navigate = useNavigate();
    const {
        isPending: claimPending,
        isSuccess: claimSuccess,
        mutate: claimMutate,
    } = useMutation({
        mutationFn: postQueryFn,
    });
    const { enqueueSnackbar } = useSnackbar();
    
    useEffect(() => {
        if (claimSuccess) {
            enqueueSnackbar("认领成功", { variant: "success" });
            navigate("/dataset/detail/" + dataset!.dataSetId);
        }
    }, [claimSuccess]);
    
    return (
        <Paper
            elevation={2}
            sx={{ p: 2, borderRadius: 2, minWidth: 218, margin: 3 }}
        >
            <Stack direction="column" spacing={2}>
                <Stack direction="row" spacing={2}>
                    <Typography variant="h6">{dataset.dataSetName}</Typography>
                    <div style={{ flexGrow: 1 }} />
                    <Button
                        variant="text"
                        onClick={() => {
                            navigate(`/dataset/detail/${dataset.dataSetId}`);
                        }}
                    >
                        查看
                    </Button>
                </Stack>
                <Box sx={{ height: "50px", overflow: "hidden" }}>
                    <Typography variant="caption">{dataset.taskInfo}</Typography>
                </Box>
                <div style={{ flexGrow: 1 }} />
                <Stack direction="row" spacing={2}>
                    <Typography variant="caption">
                        截止时间: 
                        {dataset.schedule == null || dataset.schedule == ""
                            ? "长期"
                            : dataset.schedule}
                    </Typography>
                    <div style={{ flexGrow: 1 }} />
                    {!dataset.claim && !dataset.owner && (
                        <LoadingButton
                            variant="contained"
                            onClick={() => {
                                claimMutate({
                                    url: claim_url + "/" + dataset?.dataSetId,
                                    params: {
                                        creator_id: localStorage.getItem("userId"),
                                    },
                                    method: "POST",
                                });
                            }}
                            loading={claimPending}
                        >
                            认领
                        </LoadingButton>
                    )}
                    {dataset.owner && (
                        <Button
                            variant="contained"
                            onClick={() => {
                                navigate("/dataset/update/" + dataset.dataSetId);
                            }}
                        >
                            编辑
                        </Button>
                    )}
                    {dataset.claim && (
                        <Button
                            variant="contained"
                            onClick={() => {
                                localStorage.setItem(
                                    "workingDatasetId",
                                    dataset!.dataSetId.toString()
                                );
                                navigate("/workdesk?datasetId=" + dataset!.dataSetId);
                            }}
                        >
                            开工
                        </Button>
                    )}
                </Stack>
            </Stack>
        </Paper>
    );
}

使用示例

在创意工坊和我的数据集等页面中，我们可以这样使用这个组件：

import MyDataSet from './components/MyDataSet';

// 在某个页面的渲染函数中
function CreativeWorkshop() {
    const datasets = [...]; // 从API获取的数据集列表

    return (
        <div>
            {datasets.map(dataset => (
                <MyDataSet key={dataset.dataSetId} dataset={dataset} />
            ))}
        </div>
    );
}

系统展示

• 对于我发布的数据集，显示的是编辑按钮

• 对于我认领的数据集，即我需要标注的数据集，显示的是开工按钮。点击后会跳转到工作台。

• 对于其他用户发布的、需要我去认领的数据集，显示的是认领按钮。

总结

通过封装 MyDataSet 组件，我们在多个页面中复用了相同的逻辑和UI，提高了代码的可维护性和开发效率。这个组件不仅简化了数据集信息展示的实现，还通过动态按钮的设计，满足了不同用户角色的操作需求。未来，我们可以继续扩展和优化这个组件，以适应更多的业务场景。