feat: Implement content truncation for preview to prevent memory overflow and enhance user experience

Author: experdot

sources/gc-qa-rag-etl/etlapp-web/src/GenericETL.tsx

@@ -265,6 +265,37 @@ const GenericETL: React.FC = () => {
     };
 
     // Single file content preview
+    // 限制预览内容大小，避免大文件导致内存溢出
+    const truncateContentForPreview = (content: any, maxItems: number = 50): any => {
+        if (!content) return content;
+
+        // 处理 Groups 数组（QA/Full 结果）
+        if (content.Groups && Array.isArray(content.Groups)) {
+            if (content.Groups.length > maxItems) {
+                return {
+                    ...content,
+                    Groups: content.Groups.slice(0, maxItems),
+                    _truncated: true,
+                    _originalCount: content.Groups.length,
+                };
+            }
+        }
+
+        // 处理 chunks 数组（Embedding 结果）
+        if (content.chunks && Array.isArray(content.chunks)) {
+            if (content.chunks.length > maxItems) {
+                return {
+                    ...content,
+                    chunks: content.chunks.slice(0, maxItems),
+                    _truncated: true,
+                    _originalCount: content.chunks.length,
+                };
+            }
+        }
+
+        return content;
+    };
+
     const handlePreview = async (
         row: any,
         stage: "das" | "embedding" | "qa" | "full"
@@ -286,7 +317,9 @@ const GenericETL: React.FC = () => {
             );
             title = `${row.filename} - ${stage}`;
         }
-        setPreviewContent(content);
+        // 截断大内容以避免内存问题
+        const truncatedContent = truncateContentForPreview(content);
+        setPreviewContent(truncatedContent);
         setPreviewTitle(title);
         setPreviewModal(true);
     };

sources/gc-qa-rag-etl/etlapp-web/src/components/PreviewModal.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Modal } from "antd";
+import React, { useMemo } from "react";
+import { Modal, Alert } from "antd";
 
 interface PreviewModalProps {
     open: boolean;
@@ -8,30 +8,77 @@ interface PreviewModalProps {
     onCancel: () => void;
 }
 
+const MAX_PREVIEW_LENGTH = 100000; // 限制预览字符数为 100KB
+
 const PreviewModal: React.FC<PreviewModalProps> = ({
     open,
     title,
     content,
     onCancel,
-}) => (
-    <Modal
-        open={open}
-        title={title}
-        onCancel={onCancel}
-        footer={null}
-        width={800}
-    >
-        <div
-            style={{
-                maxHeight: 500,
-                overflow: "auto",
-                borderRadius: 6,
-                padding: 12,
-            }}
+}) => {
+    const { displayContent, isTruncated, totalSize, truncatedInfo } = useMemo(() => {
+        if (!content) {
+            return { displayContent: "", isTruncated: false, totalSize: 0, truncatedInfo: "" };
+        }
+
+        // 检查是否有数据层面的截断标记
+        const dataLevelTruncated = content._truncated === true;
+        const originalCount = content._originalCount || 0;
+        let truncatedInfo = "";
+        if (dataLevelTruncated) {
+            const currentCount = content.Groups?.length || content.chunks?.length || 0;
+            truncatedInfo = `数据已截断: 仅显示前 ${currentCount} 条，共 ${originalCount} 条`;
+        }
+
+        const fullJson = JSON.stringify(content, null, 2);
+        const totalSize = fullJson.length;
+
+        if (totalSize <= MAX_PREVIEW_LENGTH) {
+            return { displayContent: fullJson, isTruncated: dataLevelTruncated, totalSize, truncatedInfo };
+        }
+
+        // 截断内容，保留前 MAX_PREVIEW_LENGTH 字符
+        const truncated = fullJson.slice(0, MAX_PREVIEW_LENGTH);
+        return {
+            displayContent: truncated + "\n\n... (内容已截断)",
+            isTruncated: true,
+            totalSize,
+            truncatedInfo: truncatedInfo || `内容过大，仅显示前 ${(MAX_PREVIEW_LENGTH / 1024).toFixed(0)} KB`,
+        };
+    }, [content]);
+
+    return (
+        <Modal
+            open={open}
+            title={title}
+            onCancel={onCancel}
+            footer={null}
+            width={800}
         >
-            {content ? JSON.stringify(content, null, 2) : ""}
-        </div>
-    </Modal>
-);
+            {isTruncated && (
+                <Alert
+                    message={truncatedInfo || `内容过大 (${(totalSize / 1024 / 1024).toFixed(2)} MB)，仅显示前 ${(MAX_PREVIEW_LENGTH / 1024).toFixed(0)} KB`}
+                    type="warning"
+                    showIcon
+                    style={{ marginBottom: 12 }}
+                />
+            )}
+            <pre
+                style={{
+                    maxHeight: 500,
+                    overflow: "auto",
+                    borderRadius: 6,
+                    padding: 12,
+                    backgroundColor: "#f5f5f5",
+                    fontSize: 12,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-all",
+                }}
+            >
+                {displayContent}
+            </pre>
+        </Modal>
+    );
+};
 
 export default PreviewModal;