diff --git a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx index ea8e0d0..2d2736e 100644 --- a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx +++ b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx @@ -43,6 +43,12 @@ export default function CreateAnnotationTask({ const [datasetPreviewLoading, setDatasetPreviewLoading] = useState(false); const [selectedDatasetId, setSelectedDatasetId] = useState(null); + // 文件内容预览相关状态 + const [fileContentVisible, setFileContentVisible] = useState(false); + const [fileContent, setFileContent] = useState(""); + const [fileContentLoading, setFileContentLoading] = useState(false); + const [previewFileName, setPreviewFileName] = useState(""); + useEffect(() => { if (!open) return; const fetchData = async () => { @@ -113,6 +119,42 @@ export default function CreateAnnotationTask({ } }; + // 预览文件内容 + const handlePreviewFileContent = async (file: any) => { + // 支持预览的文本文件类型 + const textExtensions = ['.json', '.jsonl', '.txt', '.csv', '.tsv', '.xml', '.md', '.yaml', '.yml']; + const fileName = file.fileName?.toLowerCase() || ''; + const isTextFile = textExtensions.some(ext => fileName.endsWith(ext)); + + if (!isTextFile) { + message.warning("仅支持预览文本类文件(JSON、JSONL、TXT、CSV 等)"); + return; + } + + setFileContentLoading(true); + setPreviewFileName(file.fileName); + try { + const response = await fetch(`/api/data-management/datasets/${selectedDatasetId}/files/${file.id}/download`); + if (!response.ok) { + throw new Error('下载失败'); + } + const text = await response.text(); + // 限制预览内容长度,避免大文件导致页面卡顿 + const maxLength = 50000; + if (text.length > maxLength) { + setFileContent(text.substring(0, maxLength) + '\n\n... (内容过长,仅显示前 50000 字符)'); + } else { + setFileContent(text); + } + setFileContentVisible(true); + } catch (error) { + console.error("Preview file content error:", error); + message.error("获取文件内容失败"); + } finally { + setFileContentLoading(false); + } + }; + const generateXmlFromConfig = (objects: any[], labels: any[]) => { let xml = '\n'; @@ -532,6 +574,7 @@ export default function CreateAnnotationTask({ ]} > +
点击文件名可预览文本类文件内容
( + + ), }, { title: "大小", @@ -560,6 +614,34 @@ export default function CreateAnnotationTask({ size="small" /> + + {/* 文件内容预览弹窗 */} + setFileContentVisible(false)} + title={`文件预览:${previewFileName}`} + width={800} + footer={[ + + ]} + > +
+          {fileContent}
+        
+
); }