@gientech/modual 2.0.3 → 2.0.5

package/src/examples/gientechStreamFilesReader/index.tsx

@@ -0,0 +1,951 @@
+import React, { useState } from 'react';
+import { GientechStreamReader } from '../../modules/streamFilesReader';
+import { AppTheme } from '@mxmweb/zui';
+import type { Annotation, MDAnnotation, TableAnnotation } from '../../../../apps/FViewer/dist/core/types';
+import { rag_dev_server } from '../../utils/testconfigs';
+// 注意：Worker 应该由最终调用方在应用入口处注册
+// import { registerPDFWorker } from '@mxmweb/fviewer';
+// registerPDFWorker('/worker/pdf.worker.min.js');
+
+// 自定义Loading组件示例
+const CustomLoadingComponent: React.FC<{
+  status: string;
+  theme: AppTheme;
+}> = ({ status, theme }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        padding: '40px',
+        background: theme.colors.background,
+      }}
+    >
+      {/* 自定义加载动画 */}
+      <div
+        style={{
+          position: 'relative',
+          width: '100px',
+          height: '100px',
+          marginBottom: '24px',
+        }}
+      >
+        {/* 旋转的圆环 */}
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            border: `4px solid ${theme.colors.border}`,
+            borderTop: `4px solid ${theme.colors.primary}`,
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+          }}
+        />
+
+        {/* 中心图标 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            fontSize: '24px',
+            color: theme.colors.primary,
+          }}
+        >
+          📄
+        </div>
+      </div>
+
+      {/* 状态文本 */}
+      <div
+        style={{
+          fontSize: '18px',
+          fontWeight: '600',
+          color: theme.colors.text,
+          marginBottom: '12px',
+          textAlign: 'center',
+        }}
+      >
+        {status}
+      </div>
+
+      {/* 进度条 */}
+      <div
+        style={{
+          width: '300px',
+          height: '6px',
+          background: theme.colors.border,
+          borderRadius: '3px',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            width: '60%',
+            height: '100%',
+            background: `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.info})`,
+            borderRadius: '3px',
+            animation: 'loading-progress 2s ease-in-out infinite',
+          }}
+        />
+      </div>
+
+      {/* 动画样式 */}
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+
+        @keyframes loading-progress {
+          0% { transform: translateX(-100%); }
+          50% { transform: translateX(0%); }
+          100% { transform: translateX(100%); }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+// 自定义Error组件示例
+const CustomErrorComponent: React.FC<{
+  error: string;
+  theme: AppTheme;
+}> = ({ error, theme }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        padding: '40px',
+        background: theme.colors.background,
+      }}
+    >
+      {/* 错误图标 */}
+      <div
+        style={{
+          width: '80px',
+          height: '80px',
+          borderRadius: '50%',
+          background: theme.colors.error,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '24px',
+          fontSize: '32px',
+          color: 'white',
+        }}
+      >
+        ⚠️
+      </div>
+
+      {/* 错误标题 */}
+      <div
+        style={{
+          fontSize: '20px',
+          fontWeight: '600',
+          color: theme.colors.error,
+          marginBottom: '12px',
+          textAlign: 'center',
+        }}
+      >
+        加载失败
+      </div>
+
+      {/* 错误详情 */}
+      <div
+        style={{
+          fontSize: '14px',
+          color: theme.colors.text,
+          textAlign: 'center',
+          maxWidth: '400px',
+          lineHeight: '1.5',
+        }}
+      >
+        {error}
+      </div>
+
+      {/* 重试按钮 */}
+      <button
+        style={{
+          marginTop: '24px',
+          padding: '12px 24px',
+          background: theme.colors.primary,
+          color: 'white',
+          border: 'none',
+          borderRadius: '6px',
+          fontSize: '14px',
+          fontWeight: '500',
+          cursor: 'pointer',
+          transition: 'background-color 0.2s',
+        }}
+        onMouseEnter={e => {
+          e.currentTarget.style.background = theme.colors.info;
+        }}
+        onMouseLeave={e => {
+          e.currentTarget.style.background = theme.colors.primary;
+        }}
+      >
+        重新加载
+      </button>
+    </div>
+  );
+};
+
+// 测试标注数据
+export const streamAnnotations: Annotation[] =[
+  {
+      "id": "f4b6f9516e0",
+      "pageNumber": 1,
+      "x": 0.4047,
+      "y": 0.481,
+      "width": 0.1898,
+      "height": 0.0172,
+      "content": "",
+      "color": "#C3F74F"
+  },
+  {
+      "id": "4b6f9516e0d",
+      "pageNumber": 1,
+      "x": 0.1495,
+      "y": 0.5243,
+      "width": 0.7003,
+      "height": 0.0534,
+      "content": "",
+      "color": "#C3F74F"
+  },
+  {
+      "id": "b6f9516e0d3",
+      "pageNumber": 1,
+      "x": 0.1495,
+      "y": 0.6057,
+      "width": 0.1763,
+      "height": 0.016,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "6f9516e0d32",
+      "pageNumber": 3,
+      "x": 0.1822,
+      "y": 0.1473,
+      "width": 0.4509,
+      "height": 0.0374,
+      "content": "",
+      "color": "#C3F74F"
+  },
+  {
+      "id": "f9516e0d32b",
+      "pageNumber": 3,
+      "x": 0.2275,
+      "y": 0.5825,
+      "width": 0.3762,
+      "height": 0.0214,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "9516e0d32b4",
+      "pageNumber": 4,
+      "x": 0.6902,
+      "y": 0.1467,
+      "width": 0.0311,
+      "height": 0.2179,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "516e0d32b44",
+      "pageNumber": 4,
+      "x": 0.1478,
+      "y": 0.7922,
+      "width": 0.7019,
+      "height": 0.0689,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "16e0d32b442",
+      "pageNumber": 5,
+      "x": 0.1495,
+      "y": 0.5137,
+      "width": 0.7003,
+      "height": 0.0695,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "6e0d32b442a",
+      "pageNumber": 6,
+      "x": 0.1495,
+      "y": 0.6805,
+      "width": 0.6952,
+      "height": 0.0315,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "e0d32b442a4",
+      "pageNumber": 6,
+      "x": 0.1478,
+      "y": 0.7173,
+      "width": 0.7019,
+      "height": 0.0315,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "0d32b442a43",
+      "pageNumber": 6,
+      "x": 0.1495,
+      "y": 0.7548,
+      "width": 0.7003,
+      "height": 0.0315,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "d32b442a43b",
+      "pageNumber": 6,
+      "x": 0.1495,
+      "y": 0.8165,
+      "width": 0.7003,
+      "height": 0.0315,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "32b442a43b6",
+      "pageNumber": 6,
+      "x": 0.1495,
+      "y": 0.8539,
+      "width": 0.7003,
+      "height": 0.0315,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "2b442a43b6e",
+      "pageNumber": 6,
+      "x": 0.2301,
+      "y": 0.8913,
+      "width": 0.6062,
+      "height": 0.0125,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "b442a43b6e3",
+      "pageNumber": 7,
+      "x": 0.1478,
+      "y": 0.0879,
+      "width": 0.2343,
+      "height": 0.0119,
+      "content": "",
+      "color": "#4FC3F7"
+  },
+  {
+      "id": "442a43b6e3f",
+      "pageNumber": 7,
+      "x": 0.1495,
+      "y": 0.1069,
+      "width": 0.6994,
+      "height": 0.0303,
+      "content": "",
+      "color": "#4FC3F7"
+  }
+]
+
+// 测试Markdown标注数据
+export const streamMDAnnotations: MDAnnotation[] = [
+  {
+    id: 'md-anno-1',
+    start: 0,
+    end: 20, // 标注前20个字符
+    content: '这是第一个 Markdown 标注',
+    color: '#FFEB3B',
+  },
+  {
+    id: 'md-anno-2',
+    start: 50,
+    end: 70, // 标注第50-70个字符
+    content: '这是第二个 Markdown 标注',
+    color: '#A8E6CF',
+  },
+];
+
+// 测试表格标注数据
+export const streamTableAnnotations: TableAnnotation[] = [
+  {
+    "id": "2bd1e2b0fed",
+    "offsets": [
+        [
+            0,
+            0
+        ],
+        [
+            0,
+            1
+        ],
+        [
+            0,
+            2
+        ],
+        [
+            1,
+            0
+        ],
+        [
+            1,
+            1
+        ],
+        [
+            1,
+            2
+        ],
+        [
+            2,
+            0
+        ],
+        [
+            2,
+            1
+        ],
+        [
+            2,
+            2
+        ],
+        [
+            3,
+            0
+        ],
+        [
+            3,
+            1
+        ],
+        [
+            3,
+            2
+        ],
+        [
+            4,
+            0
+        ],
+        [
+            4,
+            1
+        ],
+        [
+            4,
+            2
+        ]
+    ],
+    content: '这是表格标注',
+    color: '#FFEB3B',
+  },
+];
+
+export default function StreamPreview() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // 可配置的参数
+  const [fileType, setFileType] = useState<'pdf'|'pdf_slides' | 'markdown' | 'markdown_table' | 'image' | 'html' | 'text'>('pdf');
+
+  // 统一的标注状态
+  const [annotations, setAnnotations] = useState<(Annotation | MDAnnotation | TableAnnotation)[]>([
+    ...streamAnnotations,
+    ...streamMDAnnotations,
+    ...streamTableAnnotations,
+  ]);
+
+  //http://10.15.12.13:9000/dev-rag-data/测试南自/电压和电池容量的关系.md/V0/电压和电池容量的关系.md
+  //http://10.15.12.13:9000/dev-rag-data/测试南自/中国电子规章制度汇编（2024版）-集团公司第二分册.pdf/V0/中国电子规章制度汇编（2024版）-集团公司第二分册.pdf
+  //http://10.15.12.13:9000/dev-rag-data/测试南自/服务发布专利具体步骤.md/V0/服务发布专利具体步骤.md
+  //http://10.15.12.13:9000/dev-rag-data/测试南自/测试文档.txt/V0/测试文档.txt
+  const [convertedFilePath, setConvertedFilePath] = useState(
+    'http://10.15.12.13:9000/dev-rag-data/合肥晶合演示JBB/一般_山地自行车的组装1.pdf/V0/一般_山地自行车的组装1.pdf'
+  );
+  const [fileName, setFileName] = useState('VR设备专题：Pancake迎来渗透加速，产业链受益硬件升级2023-02-02行业研报.pdf');
+  const [totalPages, setTotalPages] = useState(29); // 根据响应头更新为实际总页数
+  const [initialPage, setInitialPage] = useState(1);
+  const [pageO, setPageO] = useState(1);
+const [initialZoom, setInitialZoom] = useState(1.5);
+  const [authorization, setAuthorization] = useState(
+    rag_dev_server.token
+  );
+  const [streamApiUrl, setStreamApiUrl] = useState(
+    '/proxy/index/knowledgeBase/file/stream'
+  );
+  const [pageSize, setPageSize] = useState(5); // 修改为5，与网络请求一致
+
+  const handleEventsEmit = (name: string, data?: any, innerFn?: any) => {
+    console.log('GientechStreamReader 事件:', name, data);
+
+    switch (name) {
+      case 'viewer:close':
+        setIsVisible(false);
+        break;
+      case 'pageChange':
+        console.log('页面变化事件:', data);
+        console.log('当前页面状态:', data.pageNumber, '总页数:', data.totalPages);
+        break;
+      case 'zoomChange':
+        console.log('缩放变化:', data);
+        break;
+      case 'markdown_scroll_to_top':
+        console.log('Markdown滚动到顶部');
+        break;
+      case 'markdown_scroll_to_bottom':
+        console.log('Markdown滚动到底部');
+        break;
+      case 'md_annotation_add':
+        console.log('添加Markdown标注:', data);
+        setAnnotations(prev => [...prev, data]);
+        break;
+      default:
+        console.log('其他事件:', name, data);
+        break;
+    }
+  };
+
+  if (!isVisible) {
+    return (
+      <div
+        className="preview-container"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          padding: '20px',
+          backgroundColor: '#f5f5f5',
+        }}
+      >
+        <h1 style={{ marginBottom: '30px', color: '#333' }}>
+          GientechStreamReader 测试 -{' '}
+          {fileType === 'markdown'
+            ? 'Markdown'
+            : fileType === 'pdf_slides'
+              ? 'PDF幻灯片'
+            : fileType === 'markdown_table'
+              ? 'Markdown表格'
+              : fileType === 'html'
+                ? 'HTML'
+                : fileType === 'image'
+                  ? '图片'
+                  : fileType === 'text'
+                    ? '文本'
+                    : 'PDF'}{' '}
+          模式
+        </h1>
+
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '15px',
+            width: '100%',
+            maxWidth: '600px',
+            backgroundColor: 'white',
+            padding: '20px',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+          }}
+        >
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              文件类型 (fileType):
+            </label>
+            <select
+              value={fileType}
+              onChange={e => {
+                const newFileType = e.target.value as 'pdf' | 'pdf_slides' | 'markdown' | 'markdown_table' | 'image' | 'html' | 'text';
+                setFileType(newFileType);
+              }}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+            >
+              <option value="pdf_slides">PDF幻灯片</option>
+              <option value="pdf">PDF文件</option>
+              <option value="markdown">Markdown文件</option>
+              <option value="markdown_table">Markdown表格文件</option>
+              <option value="image">图片文件</option>
+              <option value="html">HTML文件</option>
+              <option value="text">文本文件</option>
+            </select>
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              文件路径 (convertedFilePath):
+            </label>
+            <input
+              type="text"
+              value={convertedFilePath}
+              onChange={e => setConvertedFilePath(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder="输入文件路径"
+            />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              文件名 (fileName):
+            </label>
+            <input
+              type="text"
+              value={fileName}
+              onChange={e => setFileName(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder="输入文件名"
+            />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+                        {fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+            ? '总块数 (totalPages) - 仅用于显示:'
+            : '总页数 (totalPages):'}
+            </label>
+            <input
+              type="number"
+              value={totalPages}
+              onChange={e => setTotalPages(Number(e.target.value))}
+              min="1"
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder={
+                fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+                  ? '仅用于显示'
+                  : '输入总页数'
+              }
+              disabled={fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'}
+            />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+                        {fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+            ? '初始块 (initialPage) - 仅用于显示:'
+            : '初始页面 (initialPage):'}
+            </label>
+            <input
+              type="number"
+              value={initialPage}
+              onChange={e => setInitialPage(Number(e.target.value))}
+              min="1"
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder={
+                fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+                  ? '仅用于显示'
+                  : '输入初始页面号'
+              }
+              disabled={fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'}
+            />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              Authorization Token:
+            </label>
+            <input
+              type="text"
+              value={authorization}
+              onChange={e => setAuthorization(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder="输入Authorization token"
+            />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              Stream API URL:
+            </label>
+            <input
+              type="text"
+              value={streamApiUrl}
+              onChange={e => setStreamApiUrl(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder="输入Stream API URL"
+            />
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              {fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+                ? '页面大小 (pageSize) - 仅PDF使用:'
+                : '页面大小 (pageSize):'}
+            </label>
+            <input
+              type="number"
+              value={pageSize}
+              onChange={e => setPageSize(Number(e.target.value))}
+              min="1"
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder={
+                fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+                  ? '仅PDF使用'
+                  : '输入页面大小'
+              }
+              disabled={fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'}
+            />
+          </div>
+
+          <div style={{ marginBottom: '16px' }}>
+            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+              初始缩放比例 (initialZoom):
+            </label>
+            <input
+              type="number"
+              value={initialZoom}
+              onChange={e => setInitialZoom(Number(e.target.value))}
+              min="0.1"
+              max="5"
+              step="0.1"
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+              placeholder="输入初始缩放比例 (0.1-5.0)"
+            />
+          </div>
+
+          <button
+            onClick={() => setIsVisible(true)}
+            style={{
+              padding: '12px 24px',
+              backgroundColor: '#007bff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '16px',
+              fontWeight: 'bold',
+            }}
+          >
+            开始测试{' '}
+            {fileType === 'markdown'
+              ? 'Markdown完整文件'
+              : fileType === 'markdown_table'
+                ? 'Markdown表格文件'
+                : fileType === 'html'
+                  ? 'HTML文件'
+                  : fileType === 'image'
+                    ? '图片'
+                    : 'PDF'}{' '}
+            Stream Reader
+          </button>
+        </div>
+
+        <div style={{ marginTop: '20px', textAlign: 'center', color: '#666' }}>
+          <p>
+            Stream模式：通过接口获取
+            {fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'html'
+              ? '完整的文件内容'
+              : '分页的PDF数据'}
+          </p>
+          <p>
+            {fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'html'
+              ? '支持完整文件渲染、缩放等功能'
+              : '支持页面导航、缩放等功能'}
+          </p>
+
+          {(fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'html') && (
+            <div
+              style={{
+                marginTop: '10px',
+                padding: '10px',
+                backgroundColor: '#e3f2fd',
+                borderRadius: '4px',
+              }}
+            >
+              <p style={{ margin: '0', fontSize: '14px' }}>
+                <strong>
+                  {fileType === 'markdown_table'
+                    ? 'Markdown表格'
+                    : fileType === 'html'
+                      ? 'HTML'
+                      : 'Markdown'}推荐配置：
+                </strong>
+                <br />
+                文件路径:
+                {fileType === 'html'
+                  ? 'http://10.15.12.13:9000/dev-rag-data/demo/示例.html/V0/示例.html'
+                  : 'http://10.15.12.13:9000/dev-rag-data/测试南自/服务发布专利具体步骤.md/V0/服务发布专利具体步骤.md'}
+                <br />
+                总块数: 10 (仅用于显示，实际获取完整文件)
+                <br />
+                注意: {fileType === 'markdown_table'
+                  ? 'Markdown表格'
+                  : fileType === 'html'
+                    ? 'HTML'
+                    : 'Markdown'}文件会获取完整内容，不支持分块加载
+              </p>
+            </div>
+          )}
+
+          {fileType === 'image' && (
+            <div
+              style={{
+                marginTop: '10px',
+                padding: '10px',
+                backgroundColor: '#fff3cd',
+                borderRadius: '4px',
+              }}
+            >
+              <p style={{ margin: '0', fontSize: '14px' }}>
+                <strong>图片推荐配置：</strong>
+                <br />
+                文件路径: 例如 http://10.15.12.13:9000/dev-rag-data/demo/示例图片.png/V0/示例图片.png
+                <br />
+                图片将以相同的接口请求方式获取（POST convertedFilePath），支持缩放与旋转
+              </p>
+            </div>
+          )}
+
+          {fileType === 'pdf' && (
+            <div
+              style={{
+                marginTop: '10px',
+                padding: '10px',
+                backgroundColor: '#f3e5f5',
+                borderRadius: '4px',
+              }}
+            >
+              <p style={{ margin: '0', fontSize: '14px' }}>
+                <strong>PDF推荐配置：</strong>
+                <br />
+                文件路径:
+                http://10.15.12.13:9000/dev-rag-data/测试南自/中国电子规章制度汇编（2024版）-集团公司第二分册.pdf/V0/中国电子规章制度汇编（2024版）-集团公司第二分册.pdf
+                <br />
+                总页数: 676, 页面大小: 5
+              </p>
+            </div>
+          )}
+
+          {fileType === 'text' && (
+            <div
+              style={{
+                marginTop: '10px',
+                padding: '10px',
+                backgroundColor: '#e8f5e8',
+                borderRadius: '4px',
+              }}
+            >
+              <p style={{ margin: '0', fontSize: '14px' }}>
+                <strong>文本文件推荐配置：</strong>
+                <br />
+                文件路径: 例如 http://10.15.12.13:9000/dev-rag-data/测试南自/测试文档.txt/V0/测试文档.txt
+                <br />
+                文本文件会获取完整内容，支持缩放，不支持分页
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: '80vh', width: '85vw' }}>
+      <GientechStreamReader
+        convertedFilePath={convertedFilePath}
+        fileName={fileName}
+        fileType={fileType}
+        initialPage={initialPage}
+        initialZoom={initialZoom} // 传递初始缩放比例
+        totalPages={totalPages} // 传递总页数/总块数
+        annotations={
+          fileType === 'markdown_table'
+            ? streamTableAnnotations
+            : fileType === 'markdown'
+              ? streamMDAnnotations
+              : fileType === 'html'
+                ? [] // HTML不需要标注
+                : streamAnnotations
+        }
+
+        authorization={authorization}
+        csrfToken={'csrfToken'}
+        streamApiUrl={streamApiUrl}
+        pageSize={fileType === 'pdf' ? pageSize : undefined} // 只有PDF模式才传递pageSize
+        eventsEmit={handleEventsEmit}
+        tools={{
+          close: true
+        }}
+        customComponents={{
+          LoadingComponent: CustomLoadingComponent,
+          ErrorComponent: CustomErrorComponent,
+        }}
+      />
+      <input
+        type="number"
+        value={pageO}
+        onChange={e => setPageO(Number(e.target.value))}
+        min="1"
+        style={{
+          width: '100%',
+          padding: '8px',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+        }}
+        placeholder={
+          fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'
+            ? '仅用于显示'
+            : '输入初始页面号'
+        }
+        disabled={fileType === 'markdown' || fileType === 'markdown_table' || fileType === 'image' || fileType === 'html' || fileType === 'text'}
+      />
+      <button onClick={()=>{setInitialPage(pageO)}}>跳转</button>
+    </div>
+  );
+}