You've already forked DataMate
init datamate
This commit is contained in:
Dallas98
79
frontend/src/pages/DataManagement/Create/CreateDataset.tsx
Normal file
79
frontend/src/pages/DataManagement/Create/CreateDataset.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { Button, Form, App } from "antd";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { createDatasetUsingPost } from "../dataset.api";
|
||||
import { DatasetType, DataSource } from "../dataset.model";
|
||||
import BasicInformation from "./components/BasicInformation";
|
||||
|
||||
export default function DatasetCreate() {
|
||||
const navigate = useNavigate();
|
||||
const { message } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [newDataset, setNewDataset] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
datasetType: DatasetType.TEXT,
|
||||
tags: [],
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const formValues = await form.validateFields();
|
||||
|
||||
const params = {
|
||||
...formValues,
|
||||
files: undefined,
|
||||
};
|
||||
try {
|
||||
await createDatasetUsingPost(params);
|
||||
message.success(`数据集创建成功`);
|
||||
navigate("/data/management");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error("数据集创建失败，请重试");
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleValuesChange = (_, allValues) => {
|
||||
setNewDataset({ ...newDataset, ...allValues });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col flex-1">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center">
|
||||
<Link to="/data/management">
|
||||
<Button type="text">
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
<h1 className="text-xl font-bold bg-clip-text">创建数据集</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* form */}
|
||||
<div className="h-full flex flex-col flex-1 overflow-auto bg-white border-gray-200 rounded shadow-sm">
|
||||
<div className="flex-1 p-6 overflow-auto">
|
||||
<Form
|
||||
form={form}
|
||||
initialValues={newDataset}
|
||||
onValuesChange={handleValuesChange}
|
||||
layout="vertical"
|
||||
>
|
||||
<BasicInformation data={newDataset} setData={setNewDataset} />
|
||||
</Form>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end p-6 border-t border-gray-200">
|
||||
<Button onClick={() => navigate("/data/management")}>取消</Button>
|
||||
<Button type="primary" onClick={handleSubmit}>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
frontend/src/pages/DataManagement/Create/EditDataset.tsx
Normal file
101
frontend/src/pages/DataManagement/Create/EditDataset.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import BasicInformation from "./components/BasicInformation";
|
||||
import {
|
||||
queryDatasetByIdUsingGet,
|
||||
updateDatasetByIdUsingPut,
|
||||
} from "../dataset.api";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dataset, DatasetType } from "../dataset.model";
|
||||
import { App, Button, Drawer, Form, Modal } from "antd";
|
||||
|
||||
export default function EditDataset({
|
||||
open,
|
||||
data,
|
||||
onClose,
|
||||
onRefresh,
|
||||
}: {
|
||||
open: boolean;
|
||||
data: Dataset | null;
|
||||
onClose: () => void;
|
||||
onRefresh?: () => void;
|
||||
}) {
|
||||
const [form] = Form.useForm();
|
||||
const { message } = App.useApp();
|
||||
|
||||
const [newDataset, setNewDataset] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
datasetType: DatasetType.TEXT,
|
||||
tags: [],
|
||||
});
|
||||
const fetchDataset = async () => {
|
||||
// 如果有id，说明是编辑模式
|
||||
if (data && data.id) {
|
||||
const { data: newData } = await queryDatasetByIdUsingGet(data.id);
|
||||
const updatedDataset = {
|
||||
...newData,
|
||||
type: newData.type,
|
||||
tags: newData.tags.map((tag) => tag.name) || [],
|
||||
};
|
||||
setNewDataset(updatedDataset);
|
||||
form.setFieldsValue(updatedDataset);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDataset();
|
||||
}, [data]);
|
||||
|
||||
const handleValuesChange = (_, allValues) => {
|
||||
setNewDataset({ ...newDataset, ...allValues });
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const formValues = await form.validateFields();
|
||||
|
||||
const params = {
|
||||
...formValues,
|
||||
files: undefined,
|
||||
};
|
||||
try {
|
||||
await updateDatasetByIdUsingPut(data?.id, params);
|
||||
onClose();
|
||||
message.success("数据集更新成功");
|
||||
onRefresh?.();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error("数据集更新失败，请重试");
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`编辑数据集${data?.name}`}
|
||||
onCancel={onClose}
|
||||
open={open}
|
||||
width={600}
|
||||
maskClosable={false}
|
||||
footer={
|
||||
<>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button type="primary" onClick={handleSubmit}>
|
||||
确定
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
initialValues={newDataset}
|
||||
onValuesChange={handleValuesChange}
|
||||
layout="vertical"
|
||||
>
|
||||
<BasicInformation
|
||||
data={newDataset}
|
||||
setData={setNewDataset}
|
||||
hidden={["datasetType"]}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import RadioCard from "@/components/RadioCard";
|
||||
import { Input, Select, Form } from "antd";
|
||||
import { datasetTypes } from "../../dataset.const";
|
||||
import { useEffect, useState } from "react";
|
||||
import { mockPreparedTags } from "@/components/TagManagement";
|
||||
import { queryDatasetTagsUsingGet } from "../../dataset.api";
|
||||
|
||||
export default function BasicInformation({
|
||||
data,
|
||||
setData,
|
||||
hidden = [],
|
||||
}: {
|
||||
data: any;
|
||||
setData: any;
|
||||
hidden?: string[];
|
||||
}) {
|
||||
const [tagOptions, setTagOptions] = useState<
|
||||
{
|
||||
label: JSX.Element;
|
||||
title: string;
|
||||
options: { label: JSX.Element; value: string }[];
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
// 获取标签
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
const { data } = await queryDatasetTagsUsingGet();
|
||||
const preparedTags = mockPreparedTags.map((tag) => ({
|
||||
label: tag.name,
|
||||
value: tag.name,
|
||||
}));
|
||||
const customTags = data.map((tag) => ({
|
||||
label: tag.name,
|
||||
value: tag.name,
|
||||
}));
|
||||
setTagOptions([
|
||||
{
|
||||
label: <span>预置标签</span>,
|
||||
title: "prepared",
|
||||
options: preparedTags,
|
||||
},
|
||||
{
|
||||
label: <span>自定义标签</span>,
|
||||
title: "custom",
|
||||
options: customTags,
|
||||
},
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tags: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTags();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label="名称"
|
||||
name="name"
|
||||
rules={[{ required: true, message: "请输入数据集名称" }]}
|
||||
>
|
||||
<Input placeholder="输入数据集名称" />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<Input.TextArea placeholder="描述数据集的用途和内容" rows={3} />
|
||||
</Form.Item>
|
||||
|
||||
{/* 数据集类型选择 - 使用卡片形式 */}
|
||||
{!hidden.includes("datasetType") && (
|
||||
<Form.Item
|
||||
label="类型"
|
||||
name="datasetType"
|
||||
rules={[{ required: true, message: "请选择数据集类型" }]}
|
||||
>
|
||||
<RadioCard
|
||||
options={datasetTypes}
|
||||
value={data.type}
|
||||
onChange={(datasetType) => setData({ ...data, datasetType })}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item name="tags" label="标签">
|
||||
<Select
|
||||
className="w-full"
|
||||
mode="tags"
|
||||
options={tagOptions}
|
||||
placeholder="请选择标签"
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user