From 21cc505f97d80ec0ba2edc245cf7db3ca7fa1a6b Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Mon, 19 Jan 2026 19:38:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(data-annotation):=20=E6=89=A9=E5=B1=95?=
=?UTF-8?q?=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=E6=94=AF?=
=?UTF-8?q?=E6=8C=81=E5=A4=9A=E5=AA=92=E4=BD=93=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 添加对图片、视频、音频文件的预览支持
- 新增文件类型检测逻辑，支持多种媒体格式扩展名
- 实现不同文件类型的预览界面适配
- 更新预览弹窗以支持文本、图像、音视频内容展示
- 调整预览窗口尺寸以优化不同媒体类型显示效果
- 完善预览组件卸载时的状态清理机制
---
.../components/CreateAnnotationTaskDialog.tsx | 134 +++++++++++++-----
1 file changed, 100 insertions(+), 34 deletions(-)
diff --git a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
index 2d2736e..840ebd1 100644
--- a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
+++ b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
@@ -48,6 +48,8 @@ export default function CreateAnnotationTask({
const [fileContent, setFileContent] = useState("");
const [fileContentLoading, setFileContentLoading] = useState(false);
const [previewFileName, setPreviewFileName] = useState("");
+ const [previewFileType, setPreviewFileType] = useState<"text" | "image" | "video" | "audio">("text");
+ const [previewMediaUrl, setPreviewMediaUrl] = useState("");
useEffect(() => {
if (!open) return;
@@ -121,30 +123,57 @@ 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 等）");
+ // 文件类型扩展名映射
+ const textExtensions = ['.json', '.jsonl', '.txt', '.csv', '.tsv', '.xml', '.md', '.yaml', '.yml'];
+ const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
+ const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
+ const audioExtensions = ['.mp3', '.wav', '.ogg', '.aac', '.flac', '.m4a'];
+
+ const isTextFile = textExtensions.some(ext => fileName.endsWith(ext));
+ const isImageFile = imageExtensions.some(ext => fileName.endsWith(ext));
+ const isVideoFile = videoExtensions.some(ext => fileName.endsWith(ext));
+ const isAudioFile = audioExtensions.some(ext => fileName.endsWith(ext));
+
+ if (!isTextFile && !isImageFile && !isVideoFile && !isAudioFile) {
+ message.warning("不支持预览该文件类型");
return;
}
setFileContentLoading(true);
setPreviewFileName(file.fileName);
+
+ const fileUrl = `/api/data-management/datasets/${selectedDatasetId}/files/${file.id}/download`;
+
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);
+ if (isTextFile) {
+ // 文本文件：获取内容
+ const response = await fetch(fileUrl);
+ 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);
+ }
+ setPreviewFileType("text");
+ } else if (isImageFile) {
+ // 图片文件：直接使用 URL
+ setPreviewMediaUrl(fileUrl);
+ setPreviewFileType("image");
+ } else if (isVideoFile) {
+ // 视频文件：使用 URL
+ setPreviewMediaUrl(fileUrl);
+ setPreviewFileType("video");
+ } else if (isAudioFile) {
+ // 音频文件：使用 URL
+ setPreviewMediaUrl(fileUrl);
+ setPreviewFileType("audio");
}
setFileContentVisible(true);
} catch (error) {
@@ -574,7 +603,7 @@ export default function CreateAnnotationTask({
]}
>
- 点击文件名可预览文本类文件内容
+ 点击文件名可预览文件内容（支持文本、图片、音频、视频）
setFileContentVisible(false)}
+ onCancel={() => {
+ setFileContentVisible(false);
+ setPreviewMediaUrl("");
+ setFileContent("");
+ }}
title={`文件预览：${previewFileName}`}
- width={800}
+ width={previewFileType === "text" ? 800 : 700}
footer={[
-