From 6dfed934a5aa70dcc46f066b58a1133e3feb7a5b Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Fri, 30 Jan 2026 17:32:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(file-preview):=20=E5=A2=9E=E5=8A=A0PDF?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A2=84=E8=A7=88=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入统一的文件预览工具函数和类型定义
- 添加PDF文件类型的识别和预览支持
- 使用iframe实现PDF文件在线预览
- 重构文件预览逻辑，统一处理不同文件类型的预览
- 优化文本内容预览的长度截取机制
- 更新预览按钮加载状态显示
- 统一预览窗口的最大高度配置
- 修改API调用路径为专门的预览接口
---
 .../components/CreateAnnotationTaskDialog.tsx | 73 ++++++++-----------
 .../Detail/components/Overview.tsx            | 29 ++++++--
 .../Detail/useFilesOperation.ts               | 15 ++--
 .../Detail/KnowledgeSetDetail.tsx             | 16 +++-
 frontend/src/utils/filePreview.ts             |  6 +-
 5 files changed, 82 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
index 451e1e1..daf28a1 100644
--- a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
+++ b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
@@ -6,6 +6,12 @@ import TextArea from "antd/es/input/TextArea";
 import { useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import { Eye } from "lucide-react";
+import {
+  PREVIEW_TEXT_MAX_LENGTH,
+  resolvePreviewFileType,
+  truncatePreviewText,
+  type PreviewFileType,
+} from "@/utils/filePreview";
 import {
   createAnnotationTaskUsingPost,
   getAnnotationTaskByIdUsingGet,
@@ -53,6 +59,7 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
   !!value && typeof value === "object" && !Array.isArray(value);
 
 const DEFAULT_SEGMENTATION_ENABLED = true;
+const FILE_PREVIEW_MAX_HEIGHT = 500;
 const SEGMENTATION_OPTIONS = [
   { label: "需要切片段", value: true },
   { label: "不需要切片段", value: false },
@@ -116,7 +123,7 @@ 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 [previewFileType, setPreviewFileType] = useState<PreviewFileType>("text");
   const [previewMediaUrl, setPreviewMediaUrl] = useState("");
 
   // 任务详情加载状态（编辑模式）
@@ -297,57 +304,32 @@ export default function CreateAnnotationTask({
 
   // 预览文件内容
   const handlePreviewFileContent = async (file: DatasetPreviewFile) => {
-    const fileName = file.fileName?.toLowerCase() || '';
-
-    // 文件类型扩展名映射
-    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) {
+    const fileType = resolvePreviewFileType(file.fileName);
+    if (!fileType) {
       message.warning("不支持预览该文件类型");
       return;
     }
 
     setFileContentLoading(true);
     setPreviewFileName(file.fileName);
+    setPreviewFileType(fileType);
+    setFileContent("");
+    setPreviewMediaUrl("");
 
-    const fileUrl = `/api/data-management/datasets/${selectedDatasetId}/files/${file.id}/download`;
+    const previewUrl = `/api/data-management/datasets/${selectedDatasetId}/files/${file.id}/preview`;
 
     try {
-      if (isTextFile) {
+      if (fileType === "text") {
         // 文本文件：获取内容
-        const response = await fetch(fileUrl);
+        const response = await fetch(previewUrl);
         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");
+        setFileContent(truncatePreviewText(text, PREVIEW_TEXT_MAX_LENGTH));
+      } else {
+        // 媒体/PDF 文件：直接使用预览地址
+        setPreviewMediaUrl(previewUrl);
       }
       setFileContentVisible(true);
     } catch (error) {
@@ -878,7 +860,7 @@ export default function CreateAnnotationTask({
           </Button>
         ]}
       >
-        <div className="mb-2 text-xs text-gray-500">点击文件名可预览文件内容（支持文本、图片、音频、视频）</div>
+        <div className="mb-2 text-xs text-gray-500">点击文件名可预览文件内容（支持文本、图片、音频、视频、PDF）</div>
         <Table
           dataSource={datasetPreviewData}
           columns={[
@@ -942,7 +924,7 @@ export default function CreateAnnotationTask({
         {previewFileType === "text" && (
           <pre
             style={{
-              maxHeight: '500px',
+              maxHeight: `${FILE_PREVIEW_MAX_HEIGHT}px`,
               overflow: 'auto',
               backgroundColor: '#f5f5f5',
               padding: '12px',
@@ -960,16 +942,23 @@ export default function CreateAnnotationTask({
             <img
               src={previewMediaUrl}
               alt={previewFileName}
-              style={{ maxWidth: '100%', maxHeight: '500px', objectFit: 'contain' }}
+              style={{ maxWidth: '100%', maxHeight: `${FILE_PREVIEW_MAX_HEIGHT}px`, objectFit: 'contain' }}
             />
           </div>
         )}
+        {previewFileType === "pdf" && (
+          <iframe
+            src={previewMediaUrl}
+            title={previewFileName || "PDF 预览"}
+            style={{ width: '100%', height: `${FILE_PREVIEW_MAX_HEIGHT}px`, border: 'none' }}
+          />
+        )}
         {previewFileType === "video" && (
           <div style={{ textAlign: 'center' }}>
             <video
               src={previewMediaUrl}
               controls
-              style={{ maxWidth: '100%', maxHeight: '500px' }}
+              style={{ maxWidth: '100%', maxHeight: `${FILE_PREVIEW_MAX_HEIGHT}px` }}
             >
               您的浏览器不支持视频播放
             </video>
diff --git a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
index 0367b02..f5923f4 100644
--- a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
+++ b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
@@ -330,13 +330,21 @@ export default function Overview({
           );
         }
 
-        return (
-        <div className="flex">
-          <Button
-            size="small"
-            type="link"
-            onClick={() => handleDownloadFile(record)}
-          >
+        return (
+        <div className="flex">
+          <Button
+            size="small"
+            type="link"
+            loading={previewLoading && previewFileName === record.fileName}
+            onClick={() => handlePreviewFile(record)}
+          >
+            预览
+          </Button>
+          <Button
+            size="small"
+            type="link"
+            onClick={() => handleDownloadFile(record)}
+          >
             下载
           </Button>
           <Button
@@ -549,6 +557,13 @@ export default function Overview({
             />
           </div>
         )}
+        {previewFileType === "pdf" && (
+          <iframe
+            src={previewMediaUrl}
+            title={previewFileName || "PDF 预览"}
+            style={{ width: "100%", height: `${PREVIEW_MAX_HEIGHT}px`, border: "none" }}
+          />
+        )}
         {previewFileType === "video" && (
           <div style={{ textAlign: "center" }}>
             <video
diff --git a/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts b/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts
index e44d185..66702f8 100644
--- a/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts
+++ b/frontend/src/pages/DataManagement/Detail/useFilesOperation.ts
@@ -4,7 +4,12 @@ import type {
 } from "@/pages/DataManagement/dataset.model";
 import { App } from "antd";
 import { useState } from "react";
-import { PREVIEW_TEXT_MAX_LENGTH, resolvePreviewFileType, truncatePreviewText } from "@/utils/filePreview";
+import {
+  PREVIEW_TEXT_MAX_LENGTH,
+  resolvePreviewFileType,
+  truncatePreviewText,
+  type PreviewFileType,
+} from "@/utils/filePreview";
 import {
   deleteDatasetFileUsingDelete,
   downloadFileByIdUsingGet,
@@ -35,7 +40,7 @@ export function useFilesOperation(dataset: Dataset) {
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewContent, setPreviewContent] = useState("");
   const [previewFileName, setPreviewFileName] = useState("");
-  const [previewFileType, setPreviewFileType] = useState<"text" | "image" | "video" | "audio">("text");
+  const [previewFileType, setPreviewFileType] = useState<PreviewFileType>("text");
   const [previewMediaUrl, setPreviewMediaUrl] = useState("");
   const [previewLoading, setPreviewLoading] = useState(false);
 
@@ -111,7 +116,7 @@ export function useFilesOperation(dataset: Dataset) {
       return;
     }
 
-    const fileUrl = `/api/data-management/datasets/${datasetId}/files/${file.id}/download`;
+    const previewUrl = `/api/data-management/datasets/${datasetId}/files/${file.id}/preview`;
     setPreviewFileName(file.fileName);
     setPreviewFileType(fileType);
     setPreviewContent("");
@@ -120,7 +125,7 @@ export function useFilesOperation(dataset: Dataset) {
     if (fileType === "text") {
       setPreviewLoading(true);
       try {
-        const response = await fetch(fileUrl);
+        const response = await fetch(previewUrl);
         if (!response.ok) {
           throw new Error("下载失败");
         }
@@ -136,7 +141,7 @@ export function useFilesOperation(dataset: Dataset) {
       return;
     }
 
-    setPreviewMediaUrl(fileUrl);
+    setPreviewMediaUrl(previewUrl);
     setPreviewVisible(true);
   };
 
diff --git a/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx b/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
index 1911167..2ac6afa 100644
--- a/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
+++ b/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
@@ -41,7 +41,12 @@ import CreateKnowledgeSet from "../components/CreateKnowledgeSet";
 import KnowledgeItemEditor from "../components/KnowledgeItemEditor";
 import ImportKnowledgeItemsDialog from "../components/ImportKnowledgeItemsDialog";
 import { formatDate } from "@/utils/unit";
-import { PREVIEW_TEXT_MAX_LENGTH, resolvePreviewFileType, truncatePreviewText } from "@/utils/filePreview";
+import {
+  PREVIEW_TEXT_MAX_LENGTH,
+  resolvePreviewFileType,
+  truncatePreviewText,
+  type PreviewFileType,
+} from "@/utils/filePreview";
 
 const PREVIEW_MAX_HEIGHT = 500;
 const PREVIEW_MODAL_WIDTH = {
@@ -67,7 +72,7 @@ const KnowledgeSetDetail = () => {
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewContent, setPreviewContent] = useState("");
   const [previewFileName, setPreviewFileName] = useState("");
-  const [previewFileType, setPreviewFileType] = useState<"text" | "image" | "video" | "audio">("text");
+  const [previewFileType, setPreviewFileType] = useState<PreviewFileType>("text");
   const [previewMediaUrl, setPreviewMediaUrl] = useState("");
   const [previewLoadingItemId, setPreviewLoadingItemId] = useState<string | null>(null);
 
@@ -560,6 +565,13 @@ const KnowledgeSetDetail = () => {
             />
           </div>
         )}
+        {previewFileType === "pdf" && (
+          <iframe
+            src={previewMediaUrl}
+            title={previewFileName || "PDF 预览"}
+            style={{ width: "100%", height: `${PREVIEW_MAX_HEIGHT}px`, border: "none" }}
+          />
+        )}
         {previewFileType === "video" && (
           <div style={{ textAlign: "center" }}>
             <video
diff --git a/frontend/src/utils/filePreview.ts b/frontend/src/utils/filePreview.ts
index dd4f9d6..531da2a 100644
--- a/frontend/src/utils/filePreview.ts
+++ b/frontend/src/utils/filePreview.ts
@@ -22,8 +22,9 @@ const IMAGE_FILE_EXTENSIONS = [
 ];
 const VIDEO_FILE_EXTENSIONS = [".mp4", ".webm", ".ogg", ".mov", ".avi"];
 const AUDIO_FILE_EXTENSIONS = [".mp3", ".wav", ".ogg", ".aac", ".flac", ".m4a"];
+const PDF_FILE_EXTENSIONS = [".pdf"];
 
-export type PreviewFileType = "text" | "image" | "video" | "audio";
+export type PreviewFileType = "text" | "image" | "video" | "audio" | "pdf";
 
 export const resolvePreviewFileType = (fileName?: string): PreviewFileType | null => {
   const lowerName = (fileName || "").toLowerCase();
@@ -39,6 +40,9 @@ export const resolvePreviewFileType = (fileName?: string): PreviewFileType | nul
   if (AUDIO_FILE_EXTENSIONS.some((ext) => lowerName.endsWith(ext))) {
     return "audio";
   }
+  if (PDF_FILE_EXTENSIONS.some((ext) => lowerName.endsWith(ext))) {
+    return "pdf";
+  }
   return null;
 };