feat(annotation): 更新标注任务创建对话框的数据集预览功能

- 替换 previewDatasetUsingGet 为 queryDatasetFilesUsingGet 接口
- 使用 App.useApp() 获取 message 实例替代直接导入
- 调整数据集预览表格结构显示文件名和大小信息
- 修改预览模态框标题和宽度设置
- 优化文件大小格式化显示功能
- 统一错误处理消息提示方式
This commit is contained in:
2026-01-19 18:47:57 +08:00
parent 1c5ff37985
commit fe5c0fd0a3

View File

@@ -1,6 +1,6 @@
import { queryDatasetsUsingGet, previewDatasetUsingGet } from "@/pages/DataManagement/dataset.api"; import { queryDatasetsUsingGet, queryDatasetFilesUsingGet } from "@/pages/DataManagement/dataset.api";
import { mapDataset } from "@/pages/DataManagement/dataset.const"; import { mapDataset } from "@/pages/DataManagement/dataset.const";
import { Button, Form, Input, Modal, Select, message, Radio, Table } from "antd"; import { App, Button, Form, Input, Modal, Select, Radio, Table } from "antd";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Eye } from "lucide-react"; import { Eye } from "lucide-react";
@@ -22,6 +22,7 @@ export default function CreateAnnotationTask({
onClose: () => void; onClose: () => void;
onRefresh: () => void; onRefresh: () => void;
}) { }) {
const { message } = App.useApp();
const [manualForm] = Form.useForm(); const [manualForm] = Form.useForm();
const [datasets, setDatasets] = useState<Dataset[]>([]); const [datasets, setDatasets] = useState<Dataset[]>([]);
const [templates, setTemplates] = useState<AnnotationTemplate[]>([]); const [templates, setTemplates] = useState<AnnotationTemplate[]>([]);
@@ -97,9 +98,9 @@ export default function CreateAnnotationTask({
} }
setDatasetPreviewLoading(true); setDatasetPreviewLoading(true);
try { try {
const res = await previewDatasetUsingGet(selectedDatasetId, { limit: 10 }); const res = await queryDatasetFilesUsingGet(selectedDatasetId, { page: 0, size: 10 });
if (res.code === 200 && res.data) { if (res.code === '0' && res.data) {
setDatasetPreviewData(res.data || []); setDatasetPreviewData(res.data.content || []);
setDatasetPreviewVisible(true); setDatasetPreviewVisible(true);
} else { } else {
message.error("获取数据集预览失败"); message.error("获取数据集预览失败");
@@ -272,13 +273,13 @@ export default function CreateAnnotationTask({
labelConfig: finalLabelConfig, labelConfig: finalLabelConfig,
}; };
await createAnnotationTaskUsingPost(requestData); await createAnnotationTaskUsingPost(requestData);
message?.success?.("创建标注任务成功"); message.success("创建标注任务成功");
onClose(); onClose();
onRefresh(); onRefresh();
} catch (err: any) { } catch (err: any) {
console.error("Create annotation task failed", err); console.error("Create annotation task failed", err);
const msg = err?.message || err?.data?.message || "创建失败,请稍后重试"; const msg = err?.message || err?.data?.message || "创建失败,请稍后重试";
(message as any)?.error?.(msg); message.error(msg);
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -523,8 +524,8 @@ export default function CreateAnnotationTask({
<Modal <Modal
open={datasetPreviewVisible} open={datasetPreviewVisible}
onCancel={() => setDatasetPreviewVisible(false)} onCancel={() => setDatasetPreviewVisible(false)}
title="数据集预览" title="数据集预览(前10条文件)"
width={900} width={700}
footer={[ footer={[
<Button key="close" onClick={() => setDatasetPreviewVisible(false)}> <Button key="close" onClick={() => setDatasetPreviewVisible(false)}>
@@ -533,25 +534,29 @@ export default function CreateAnnotationTask({
> >
<Table <Table
dataSource={datasetPreviewData} dataSource={datasetPreviewData}
columns={ columns={[
datasetPreviewData.length > 0 {
? Object.keys(datasetPreviewData[0]).map((key) => ({ title: "文件名",
title: key, dataIndex: "fileName",
dataIndex: key, key: "fileName",
key: key, ellipsis: true,
ellipsis: true, },
render: (value: any) => { {
if (typeof value === 'object') { title: "大小",
return JSON.stringify(value); dataIndex: "fileSize",
} key: "fileSize",
return String(value ?? ''); width: 120,
}, render: (value: number) => {
})) if (!value) return "-";
: [] if (value < 1024) return `${value} B`;
} if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
rowKey={(_, index) => String(index)} return `${(value / 1024 / 1024).toFixed(1)} MB`;
},
},
]}
rowKey="id"
pagination={false} pagination={false}
scroll={{ x: 'max-content', y: 400 }} scroll={{ y: 300 }}
size="small" size="small"
/> />
</Modal> </Modal>