feat(dataset): 添加子数据集创建功能

- 在创建页面集成父数据集ID传递逻辑
- 使用useMemo缓存location状态中的parentDatasetId
- 添加useEffect同步parentDatasetId到表单状态
- 实现handleCreateChildDataset函数用于导航到创建页面
- 在数据集详情页的操作菜单中添加"创建子数据集"选项
- 为子数据集创建按钮添加PlusOutlined图标
- 定义CreateDatasetLocationState接口规范传递参数类型
This commit is contained in:
2026-01-21 01:00:17 +08:00
parent 0c23fd6c23
commit c51e0fab2f
2 changed files with 55 additions and 19 deletions

View File

@@ -1,24 +1,37 @@
import { useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { ArrowLeft } from "lucide-react"; import { ArrowLeft } from "lucide-react";
import { Button, Form, App } from "antd"; import { Button, Form, App } from "antd";
import { Link, useNavigate } from "react-router"; import { Link, useLocation, useNavigate } from "react-router";
import { createDatasetUsingPost } from "../dataset.api"; import { createDatasetUsingPost } from "../dataset.api";
import { DatasetType } from "../dataset.model"; import { DatasetType } from "../dataset.model";
import BasicInformation from "./components/BasicInformation"; import BasicInformation from "./components/BasicInformation";
export default function DatasetCreate() { export default function DatasetCreate() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const { message } = App.useApp(); const { message } = App.useApp();
const [form] = Form.useForm(); const [form] = Form.useForm();
const [newDataset, setNewDataset] = useState({ const parentDatasetId = useMemo(() => {
const state = location.state as CreateDatasetLocationState | null;
return state?.parentDatasetId || "";
}, [location.state]);
const [newDataset, setNewDataset] = useState(() => ({
name: "", name: "",
description: "", description: "",
datasetType: DatasetType.TEXT, datasetType: DatasetType.TEXT,
tags: [], tags: [],
parentDatasetId: "", parentDatasetId,
}); }));
useEffect(() => {
if (!parentDatasetId) {
return;
}
setNewDataset((prev) => ({ ...prev, parentDatasetId }));
form.setFieldsValue({ parentDatasetId });
}, [form, parentDatasetId]);
const handleSubmit = async () => { const handleSubmit = async () => {
const formValues = await form.validateFields(); const formValues = await form.validateFields();
@@ -39,7 +52,7 @@ export default function DatasetCreate() {
}; };
const handleValuesChange = (_, allValues) => { const handleValuesChange = (_, allValues) => {
setNewDataset({ ...newDataset, ...allValues }); setNewDataset((prev) => ({ ...prev, ...allValues }));
}; };
return ( return (
@@ -82,3 +95,7 @@ export default function DatasetCreate() {
</div> </div>
); );
} }
interface CreateDatasetLocationState {
parentDatasetId?: string;
}

View File

@@ -1,12 +1,13 @@
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Breadcrumb, App, Tabs } from "antd"; import { Breadcrumb, App, Tabs } from "antd";
import { import {
ReloadOutlined, ReloadOutlined,
DownloadOutlined, DownloadOutlined,
UploadOutlined, UploadOutlined,
EditOutlined, EditOutlined,
DeleteOutlined, DeleteOutlined,
} from "@ant-design/icons"; PlusOutlined,
} from "@ant-design/icons";
import DetailHeader from "@/components/DetailHeader"; import DetailHeader from "@/components/DetailHeader";
import { mapDataset, datasetTypeMap } from "../dataset.const"; import { mapDataset, datasetTypeMap } from "../dataset.const";
import type { Dataset } from "@/pages/DataManagement/dataset.model"; import type { Dataset } from "@/pages/DataManagement/dataset.model";
@@ -45,7 +46,7 @@ export default function DatasetDetail() {
const [parentDataset, setParentDataset] = useState<Dataset | null>(null); const [parentDataset, setParentDataset] = useState<Dataset | null>(null);
const filesOperation = useFilesOperation(dataset); const filesOperation = useFilesOperation(dataset);
const [showUploadDialog, setShowUploadDialog] = useState(false); const [showUploadDialog, setShowUploadDialog] = useState(false);
const navigateItems = useMemo(() => { const navigateItems = useMemo(() => {
const items = [ const items = [
{ {
@@ -66,6 +67,14 @@ export default function DatasetDetail() {
}); });
return items; return items;
}, [dataset, parentDataset]); }, [dataset, parentDataset]);
const handleCreateChildDataset = () => {
if (!dataset?.id) {
return;
}
navigate("/data/management/create", {
state: { parentDatasetId: dataset.id },
});
};
const fetchDataset = async () => { const fetchDataset = async () => {
if (!id) { if (!id) {
return; return;
@@ -158,12 +167,22 @@ export default function DatasetDetail() {
]; ];
// 数据集操作列表 // 数据集操作列表
const operations = [ const operations = [
{ ...(dataset?.id && !dataset.parentDatasetId
key: "edit", ? [
label: "编辑", {
icon: <EditOutlined />, key: "create-child",
onClick: () => { label: "创建子数据集",
icon: <PlusOutlined />,
onClick: handleCreateChildDataset,
},
]
: []),
{
key: "edit",
label: "编辑",
icon: <EditOutlined />,
onClick: () => {
setShowEditDialog(true); setShowEditDialog(true);
}, },
}, },