@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/streamFilesReader/GientechStreamReader.tsx

@@ -0,0 +1,1658 @@
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
+import { Fviewer, parseFile, registerPDFWorker } from '@mxmweb/fviewer';
+import type { ParseResult } from '@mxmweb/fviewer';
+import Header from './components/Header';
+export { registerPDFWorker };
+import type { Annotation, ToolsConfig } from '@mxmweb/fviewer';
+
+import { Styles } from '@mxmweb/zui';
+// Stream接口参数类型
+interface StreamRequestParams {
+  convertedFilePath: string;
+  pageNo: number;
+  pageSize: number;
+}
+
+// Markdown完整内容缓存类型
+interface MarkdownContentCache {
+  data: string; // markdown完整内容
+  timestamp: number;
+}
+
+// GientechStreamReader组件属性接口
+export interface GientechStreamReaderProps {
+  // 文件相关
+  convertedFilePath: string;
+  csrfToken?: string;
+  fileName?: string;
+  fileType: string;
+  initialPage?: number;
+  initialZoom?: number; // 初始缩放比例
+  totalPages?: number; // 添加总页数参数
+  annotations?: (Annotation | any)[]; // 统一的标注数据
+
+  // 用户信息
+  userName?: string;
+  userId?: string;
+  pageSize?: number;
+
+  // API配置
+  streamApiUrl?: string;
+  authorization?: string;
+
+  // 事件回调
+  eventsEmit?: (name: string, data?: any, innerFn?: any) => void;
+
+  // 工具配置 - 用户可自定义，与默认配置合并
+  tools?: Partial<ToolsConfig>;
+
+  // 样式配置
+  styles?: Styles;
+
+  // 自定义组件
+  customComponents?: {
+    LoadingComponent?: React.ComponentType<{
+      status: string;
+      theme: Styles;
+    }>;
+    ErrorComponent?: React.ComponentType<{
+      error: string;
+      theme: Styles;
+    }>;
+  };
+
+  // 自定义类名
+  className?: string;
+  headerClass?: string;
+  contentClass?: string;
+}
+
+// 页面缓存类型 - 重新设计支持分页chunk缓存
+interface PageChunkCache {
+  [chunkKey: string]: {
+    data: ArrayBuffer;
+    pages: number[]; // 这个chunk包含的页面范围
+    timestamp: number;
+    totalPages?: number; // 从响应头获取的总页数
+    pdfDocument?: any; // 缓存解析后的PDF文档
+  };
+}
+
+// 单个页面缓存类型
+interface PageCache {
+  [pageNo: number]: {
+    data: ArrayBuffer;
+    timestamp: number;
+    pdfDocument?: any; // 缓存解析后的PDF文档
+  };
+}
+
+// 样式组件
+const ReaderContainer = styled.div<{ $theme: Styles }>`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: ${props => props.$theme.colors.background};
+  border: 1px solid ${props => props.$theme.colors.border};
+  border-radius: ${props => props.$theme.space.radius};
+  overflow: hidden;
+  min-height: 0;
+  position: relative; // 添加相对定位，用于loading遮罩的绝对定位
+
+  /* 添加动画样式 */
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+/**
+ * 默认文件加载动画组件
+ * 提供美观的文件加载动画效果，支持状态文本显示
+ */
+const DefaultLoadingComponent: React.FC<{
+  status: string;
+  theme: Styles;
+}> = ({ 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: '80px',
+          height: '80px',
+          marginBottom: '24px',
+        }}
+      >
+        {/* 文件图标背景 */}
+        <div
+          style={{
+            width: '60px',
+            height: '80px',
+            background: theme.colors.primary,
+            borderRadius: '8px 8px 0 0',
+            position: 'relative',
+            margin: '0 auto',
+          }}
+        >
+          {/* 文件折角 */}
+          <div
+            style={{
+              position: 'absolute',
+              top: '0',
+              right: '0',
+              width: '0',
+              height: '0',
+              borderStyle: 'solid',
+              borderWidth: '0 20px 20px 0',
+              borderColor: `transparent ${theme.colors.background} transparent transparent`,
+            }}
+          />
+        </div>
+
+        {/* 加载动画圆点 */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: '20px',
+            height: '20px',
+            borderRadius: '50%',
+            background: theme.colors.background,
+            animation: 'pulse 1.5s ease-in-out infinite',
+          }}
+        />
+      </div>
+
+      {/* 状态文本 */}
+      <div
+        style={{
+          fontSize: '16px',
+          fontWeight: '500',
+          color: theme.colors.text,
+          marginBottom: '8px',
+          textAlign: 'center',
+        }}
+      >
+        {status}
+      </div>
+
+      {/* 进度指示器 */}
+      <div
+        style={{
+          width: '200px',
+          height: '4px',
+          background: theme.colors.border,
+          borderRadius: '2px',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            width: '30%',
+            height: '100%',
+            background: theme.colors.primary,
+            borderRadius: '2px',
+            animation: 'loading-progress 2s ease-in-out infinite',
+          }}
+        />
+      </div>
+
+      {/* 动画样式 */}
+      <style>{`
+        @keyframes pulse {
+          0%, 100% {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+          }
+          50% {
+            opacity: 0.5;
+            transform: translate(-50%, -50%) scale(1.1);
+          }
+        }
+
+        @keyframes loading-progress {
+          0% {
+            transform: translateX(-100%);
+          }
+          50% {
+            transform: translateX(0%);
+          }
+          100% {
+            transform: translateX(100%);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+// 移除未使用的 LoadingContainer
+
+const ErrorContainer = styled.div<{ $theme: Styles }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: ${props => props.$theme.colors.error};
+  text-align: center;
+  padding: 20px;
+`;
+
+// 默认配置
+const DEFAULT_STREAM_API_URL = 'http://10.15.12.13:9005/proxy/index/knowledgeBase/file/stream';
+const CACHE_EXPIRY_TIME = 5 * 60 * 1000; // 5分钟缓存过期
+
+// 默认主题
+const defaultTheme: Styles = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#008000',
+    warning: '#FFA500',
+    error: '#FF0000',
+    info: '#0000FF',
+    background: '#f8f9fa',
+    text: '#343a40',
+    border: '#dee2e6',
+    disabled: '#808080',
+    disabledBackground: '#F5F5F5',
+    disabledText: '#808080',
+  },
+  space: {
+    sidebar: '12px',
+    size: '12px',
+    radius: '4px',
+    padding: '8px 12px',
+    margin: '4px',
+    shadow: '0 2px 4px rgba(0,0,0,0.1)',
+    lineHeight: '1.5',
+  },
+};
+
+/**
+ * 将 ArrayBuffer 按文本解码：优先 UTF-8，若出现大量替换字符则尝试 GB18030（常见中文编码），避免中文 txt 显示乱码
+ */
+function decodeArrayBufferAsText(buffer: ArrayBuffer): string {
+  const utf8 = new TextDecoder('utf-8', { fatal: false }).decode(buffer);
+  const replacementCount = (utf8.match(/\uFFFD/g) || []).length;
+  if (replacementCount === 0 || utf8.length < 20) return utf8;
+  try {
+    const gb = new TextDecoder('gb18030', { fatal: false }).decode(buffer);
+    const gbReplacement = (gb.match(/\uFFFD/g) || []).length;
+    return gbReplacement < replacementCount ? gb : utf8;
+  } catch {
+    return utf8;
+  }
+}
+
+/**
+ * GientechStreamReader组件
+ * 基于stream接口的文件读取器，支持分页获取PDF数据并渲染
+ * 遵循adopter_develop规范，使用HOC模式封装core组件
+ *
+ * @param props - 组件属性
+ * @returns GientechStreamReader组件
+ */
+const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
+  convertedFilePath,
+  fileName,
+  fileType,
+  csrfToken,
+  initialPage = 1,
+  initialZoom = 1, // 默认初始缩放比例为1
+  totalPages: userTotalPages, // 接收用户传入的总页数
+  annotations = [],
+  pageSize = 5, // 更新默认值为5，与StreamPreview一致
+  streamApiUrl = DEFAULT_STREAM_API_URL,
+  authorization,
+  eventsEmit = () => {},
+  tools: userTools, // 接收用户传入的工具配置
+  styles,
+  customComponents,
+  className,
+  headerClass,
+  contentClass,
+}) => {
+  // 状态管理
+  const [isLoading, setIsLoading] = useState(true); // 初始为loading状态
+  const [loadingStatus, setLoadingStatus] = useState<string>('正在加载文档...'); // 加载提示文本
+  const [error, setError] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [totalPages, setTotalPages] = useState(userTotalPages || 0); // 使用用户传入的总页数，不自动覆盖
+  const [scale, setScale] = useState(initialZoom);
+  const [rotation, setRotation] = useState(0);
+  const [pdfDocument, setPdfDocument] = useState<any>(null);
+  const [imageContent, setImageContent] = useState<any>(null);
+
+  // Markdown相关状态
+  const [markdownContent, setMarkdownContent] = useState<string>('');
+
+  // 通用文件内容状态
+  const [textContent, setTextContent] = useState<any>(null);
+  const [htmlContent, setHtmlContent] = useState<any>(null);
+
+  // 通用文件缓存状态
+  const [genericContentCache, setGenericContentCache] = useState<{
+    [key: string]: { content: any; timestamp: number };
+  }>({});
+
+  // 防抖状态 - 防止重复请求
+  const isGenericLoadingRef = useRef(false);
+  const hasLoadedGenericRef = useRef(false);
+
+  // 引用
+  const pageCache = useRef<PageCache>({});
+  const chunkCache = useRef<PageChunkCache>({});
+  const markdownContentCache = useRef<MarkdownContentCache | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const currentPageRef = useRef<number>(initialPage); // 添加ref来跟踪当前页面
+  // 调试：跟踪每次渲染计数（必须放在任何条件 return 之前，避免 Hook 次数不一致）
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  console.log('[GientechStreamReader] render count:', renderCountRef.current);
+  console.log('[GientechStreamReader] props snapshot (early):', {
+    fileType,
+    currentPage,
+    totalPages,
+    hasMarkdown: !!markdownContent,
+    hasImage: !!imageContent,
+    hasText: !!textContent,
+    hasHtml: !!htmlContent,
+    isLoading,
+    error,
+  });
+
+  // 使用主题
+  const mergedTheme = styles?.theme || defaultTheme;
+
+  // 当文件类型或文件路径改变时，重置通用加载的防抖/已加载标记，避免影响其它文件类型
+  useEffect(() => {
+    isGenericLoadingRef.current = false;
+    hasLoadedGenericRef.current = false;
+  }, [fileType, convertedFilePath]);
+
+  /**
+   * 根据文件类型动态配置工具，并合并用户自定义配置
+   */
+  const getToolsConfig = useCallback((): ToolsConfig => {
+    const baseTools = {
+      annotation: true,
+      download: true,
+      zoom: true,
+      close: true,
+      navigation: true,
+      rotate: false,
+    };
+
+    let defaultTools: ToolsConfig;
+
+    switch (fileType) {
+      case 'pdf':
+      case 'pdf_slides':
+        defaultTools = {
+          ...baseTools,
+          annotation: false, // PDF模式关闭标注功能
+          download: false, // PDF模式关闭下载功能
+          navigation: true, // PDF模式开启翻页导航
+          rotate: false, // PDF模式关闭旋转功能
+        };
+        break;
+      case 'image':
+        defaultTools = {
+          ...baseTools,
+          annotation: false, // 图片模式关闭标注功能
+          download: false, // 图片模式关闭下载功能
+          navigation: false, // 图片模式关闭翻页导航
+          rotate: true, // 图片模式开启旋转功能
+          zoom: true,
+        };
+        break;
+      case 'markdown':
+      case 'markdown_table':
+        defaultTools = {
+          ...baseTools,
+          annotation: false, // Markdown模式开启标注功能
+          download: false, // Markdown模式关闭下载功能
+          navigation: false, // Markdown模式关闭翻页导航
+          rotate: false, // Markdown模式关闭旋转功能
+          zoom: false, // Markdown模式关闭缩放功能
+        };
+        break;
+      case 'text':
+      case 'html':
+      case 'unknown':
+        defaultTools = {
+          ...baseTools,
+          annotation: false, // 其他模式关闭标注功能
+          download: false, // 其他模式关闭下载功能
+          navigation: false, // 其他模式关闭翻页导航
+          rotate: false, // 其他模式关闭旋转功能
+          zoom: false, // 其他模式关闭缩放功能
+        };
+        break;
+      default:
+        defaultTools = baseTools;
+    }
+
+    // 合并用户自定义配置，用户配置优先
+    if (userTools) {
+      return {
+        ...defaultTools,
+        ...userTools,
+      };
+    }
+
+    return defaultTools;
+  }, [fileType, userTools]);
+
+  // 获取当前文件类型的工具配置
+  const tools = getToolsConfig();
+
+  /**
+   * 计算chunk的key
+   * @param pageNo 页码
+   * @param pageSize 页面大小
+   * @returns chunk key
+   */
+  const getChunkKey = useCallback((pageNo: number, pageSize: number): string => {
+    const chunkStart = Math.floor((pageNo - 1) / pageSize) * pageSize + 1;
+    return `${chunkStart}-${chunkStart + pageSize - 1}`;
+  }, []);
+
+  /**
+   * 检查页面是否在缓存中，并返回解析后的PDF文档
+   * @param pageNo 页码
+   * @returns 缓存的PDF文档或null
+   */
+  const getCachedPage = useCallback(
+    async (pageNo: number): Promise<any | null> => {
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+      if (!isPDF) {
+        console.log(`文件类型 ${fileType} 不是PDF，跳过缓存检查`);
+        return null;
+      }
+
+      console.log(`检查页面 ${pageNo} 是否在缓存中`);
+
+      // 先检查单个页面缓存
+      const pageCached = pageCache.current[pageNo];
+      if (pageCached && Date.now() - pageCached.timestamp < CACHE_EXPIRY_TIME) {
+        console.log(`使用单个页面缓存: ${pageNo}`);
+        if (pageCached.pdfDocument) {
+          console.log(`直接返回缓存的PDF文档: ${pageNo}`);
+          return pageCached.pdfDocument;
+        }
+        // 如果没有缓存的PDF文档，需要重新解析
+        return null;
+      }
+
+      // 检查chunk缓存
+      const chunkKey = getChunkKey(pageNo, pageSize);
+      const chunkCached = chunkCache.current[chunkKey];
+      console.log(
+        `检查chunk缓存: ${chunkKey}, 存在: ${!!chunkCached}, 包含页面: ${chunkCached?.pages?.join(', ') || '无'}`
+      );
+
+      if (chunkCached && Date.now() - chunkCached.timestamp < CACHE_EXPIRY_TIME) {
+        // 验证页面是否真的在这个chunk中
+        if (chunkCached.pages.includes(pageNo)) {
+          console.log(`使用chunk缓存: ${pageNo} (chunk: ${chunkKey})`);
+          if (chunkCached.pdfDocument) {
+            console.log(`直接返回缓存的PDF文档: ${pageNo}`);
+            return chunkCached.pdfDocument;
+          }
+          // 如果没有缓存的PDF文档，需要重新解析
+          return null;
+        } else {
+          console.log(
+            `页面 ${pageNo} 不在chunk ${chunkKey} 中，chunk包含: ${chunkCached.pages.join(', ')}`
+          );
+        }
+      }
+
+      console.log(`页面 ${pageNo} 不在任何缓存中，需要重新请求`);
+      return null;
+    },
+    [pageSize, getChunkKey, fileType]
+  );
+
+  /**
+   * 获取stream数据（仅用于PDF文件）
+   * @param pageNo 页码
+   * @returns Promise<ArrayBuffer>
+   */
+  const fetchStreamData = useCallback(
+    async (pageNo: number): Promise<ArrayBuffer> => {
+      try {
+        // 根据文件类型决定是否传递分页参数
+        const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+        if (!isPDF) {
+          console.log(`文件类型 ${fileType} 不需要分页参数，获取完整内容`);
+          throw new Error(`文件类型 ${fileType} 不支持分页加载`);
+        }
+
+        // 计算需要请求的chunk
+        const chunkStart = Math.floor((pageNo - 1) / pageSize) * pageSize + 1;
+        const chunkKey = getChunkKey(pageNo, pageSize);
+
+        console.log(
+          `请求PDF chunk数据: ${chunkStart} (包含页面 ${chunkStart}-${chunkStart + pageSize - 1})`
+        );
+
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        };
+
+        if (authorization) {
+          headers['Authorization'] = authorization;
+        }
+
+        if (csrfToken) {
+          headers['X-CSRF-TOKEN-IN'] = csrfToken;
+        }
+
+        // PDF文件类型传递分页参数
+        const requestData = {
+          convertedFilePath,
+          pageNo: chunkStart, // 使用chunk的起始页
+          pageSize,
+        };
+
+        const response = await axios.post<ArrayBuffer>(streamApiUrl, requestData, {
+          headers,
+          responseType: 'arraybuffer',
+        });
+
+        // 获取响应头中的CSRF Token并触发事件
+        const responseCsrfToken =
+          response.headers['x-csrf-token-out'] || response.headers['X-CSRF-TOKEN-OUT'];
+        if (responseCsrfToken) {
+          console.log('获取到响应头中的CSRF Token:', responseCsrfToken);
+          eventsEmit('request_finish', responseCsrfToken);
+        }
+
+        // 缓存chunk数据
+        const chunkPages = Array.from({ length: pageSize }, (_, i) => chunkStart + i);
+        chunkCache.current[chunkKey] = {
+          data: response.data,
+          pages: chunkPages,
+          timestamp: Date.now(),
+          totalPages: userTotalPages, // 始终使用用户传入的总页数，不覆盖
+        };
+
+        console.log(
+          `缓存PDF chunk数据: ${chunkKey}, 包含页面: ${chunkPages.join(', ')}, 请求的页面: ${pageNo}`
+        );
+        console.log(`当前所有缓存:`, Object.keys(chunkCache.current));
+
+        return response.data;
+      } catch (error: any) {
+        console.error('获取PDF stream数据失败:', error);
+        throw new Error(`PDF请求失败: ${error.response?.status || '网络错误'}`);
+      }
+    },
+    [
+      streamApiUrl,
+      convertedFilePath,
+      pageSize,
+      authorization,
+      getChunkKey,
+      userTotalPages,
+      totalPages,
+      fileType,
+      eventsEmit,
+    ]
+  );
+
+  /**
+   * 加载PDF文档（仅用于PDF文件类型）
+   * @param pageNo 页码
+   * @param isInitialLoad 是否为初始加载
+   */
+  const loadPDFDocument = useCallback(
+    async (pageNo: number, isInitialLoad: boolean = false) => {
+      if (!pageNo) return;
+
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+      if (!isPDF) {
+        console.log(`文件类型 ${fileType} 不是PDF，跳过PDF加载逻辑`);
+        return null; // 直接返回，不进行任何操作
+      }
+
+      try {
+        if (isInitialLoad) {
+          setIsLoading(true);
+          setLoadingStatus('正在加载PDF文档...');
+        } else {
+          setIsLoading(true);
+          setLoadingStatus(`正在加载第 ${pageNo} 页...`);
+        }
+        setError(null);
+
+        console.log(`开始加载PDF页面: ${pageNo}, 初始加载: ${isInitialLoad}`);
+
+        // 先检查缓存
+        const cachedPdf = await getCachedPage(pageNo);
+        if (cachedPdf) {
+          // 如果缓存中有PDF文档，直接使用，无需重新解析
+          console.log(`使用缓存的PDF文档: ${pageNo}`);
+          setPdfDocument(cachedPdf);
+          setIsLoading(false);
+          setLoadingStatus('');
+          console.log(`页面 ${pageNo} 加载完成（使用缓存）`);
+          return cachedPdf;
+        }
+
+        // 获取stream数据
+        const streamData = await fetchStreamData(pageNo);
+
+        // 使用fileParser解析数据
+        const parseResult: ParseResult = await parseFile(streamData, {
+          fileName: fileName || 'Stream文档',
+          fileType: 'pdf',
+          token: authorization,
+        });
+
+        if (parseResult.error) {
+          throw new Error(parseResult.error);
+        }
+
+        if (parseResult.type !== 'pdf' || !parseResult.content?.document) {
+          throw new Error('解析结果不是有效的PDF文档');
+        }
+
+        const pdf = parseResult.content.document;
+        console.log('设置PDF文档:', pdf);
+        console.log('PDF文档类型:', typeof pdf);
+        console.log(
+          'PDF文档方法:',
+          pdf ? Object.getOwnPropertyNames(Object.getPrototypeOf(pdf)) : '无文档'
+        );
+        console.log('PDF文档页数:', pdf ? pdf.numPages : '无页数');
+        console.log('当前请求的页面:', pageNo);
+        console.log('PDF文档包含的页面范围:', pdf ? `1-${pdf.numPages}` : '无页数');
+        setPdfDocument(pdf);
+
+        // 缓存解析后的PDF文档
+        const chunkKey = getChunkKey(pageNo, pageSize);
+        if (chunkCache.current[chunkKey]) {
+          chunkCache.current[chunkKey].pdfDocument = pdf;
+          console.log(`缓存PDF文档到chunk: ${chunkKey}`);
+        }
+
+        // 设置总页数 - 优先使用用户传入的总页数，如果没有传入则使用PDF文档的实际页数
+        if (userTotalPages) {
+          console.log(`使用用户传入的总页数: ${userTotalPages}`);
+          setTotalPages(userTotalPages);
+        } else if (pdf && pdf.numPages) {
+          const actualTotalPages = pdf.numPages;
+          console.log(`用户未传入总页数，从PDF文档获取实际总页数: ${actualTotalPages}`);
+          setTotalPages(actualTotalPages);
+        }
+
+        setIsLoading(false);
+        setLoadingStatus('');
+
+        console.log(`页面 ${pageNo} 加载完成`);
+        return pdf;
+      } catch (error: any) {
+        console.error('PDF加载失败:', error);
+        setError(error.message || 'PDF加载失败，请稍后重试');
+        setIsLoading(false);
+        setLoadingStatus('');
+        throw error;
+      }
+    },
+    [
+      fetchStreamData,
+      fileName,
+      authorization,
+      totalPages,
+      getCachedPage,
+      getChunkKey,
+      pageSize,
+      fileType,
+    ]
+  );
+
+  /**
+   * 检查页面是否在缓存中（用于调试）
+   */
+  const isPageInCache = useCallback(
+    (pageNo: number): boolean => {
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+      if (!isPDF) {
+        return false;
+      }
+
+      // 先检查单个页面缓存
+      const pageCached = pageCache.current[pageNo];
+      if (pageCached && Date.now() - pageCached.timestamp < CACHE_EXPIRY_TIME) {
+        return !!pageCached.pdfDocument;
+      }
+
+      // 检查chunk缓存
+      const chunkKey = getChunkKey(pageNo, pageSize);
+      const chunkCached = chunkCache.current[chunkKey];
+      if (chunkCached && Date.now() - chunkCached.timestamp < CACHE_EXPIRY_TIME) {
+        return chunkCached.pages.includes(pageNo) && !!chunkCached.pdfDocument;
+      }
+
+      return false;
+    },
+    [pageSize, getChunkKey, fileType]
+  );
+
+  // ========== Markdown相关工具函数 ==========
+
+  /**
+   * 检查markdown内容是否在缓存中
+   * @returns 缓存的内容或null
+   */
+  const getCachedMarkdownContent = useCallback((): string | null => {
+    console.log('检查markdown内容是否在缓存中');
+
+    const cached = markdownContentCache.current;
+    if (cached && Date.now() - cached.timestamp < CACHE_EXPIRY_TIME) {
+      console.log('使用markdown内容缓存');
+      return cached.data;
+    }
+
+    console.log('markdown内容不在缓存中，需要重新请求');
+    return null;
+  }, []);
+
+  /**
+   * 获取完整markdown数据
+   * @returns Promise<string>
+   */
+  const fetchMarkdownData = useCallback(async (): Promise<string> => {
+    try {
+      console.log('请求完整markdown数据');
+
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+
+      if (authorization) {
+        headers['Authorization'] = authorization;
+      }
+
+      if (csrfToken) {
+        headers['X-CSRF-TOKEN-IN'] = csrfToken;
+      }
+
+      const requestData = {
+        convertedFilePath,
+        // 不传pageNo和pageSize，获取完整文章
+      };
+
+      console.log('发送markdown请求:', requestData);
+
+      const response = await axios.post(streamApiUrl, requestData, {
+        headers,
+        responseType: 'text', // markdown返回文本
+      });
+
+      // 获取响应头中的CSRF Token并触发事件
+      const responseCsrfToken =
+        response.headers['x-csrf-token-out'] || response.headers['X-CSRF-TOKEN-OUT'];
+      if (responseCsrfToken) {
+        console.log('获取到响应头中的CSRF Token:', responseCsrfToken);
+        eventsEmit('request_finish', responseCsrfToken);
+      }
+
+      console.log('markdown响应状态:', response.status);
+      console.log('markdown响应数据长度:', response.data?.length || 0);
+
+      return response.data;
+    } catch (error: any) {
+      console.error('获取markdown数据失败:', error);
+      throw new Error(`获取markdown数据失败: ${error.message}`);
+    }
+  }, [convertedFilePath, authorization, streamApiUrl, eventsEmit]);
+
+  /**
+   * 加载完整markdown文档
+   * @returns Promise<string>
+   */
+  const loadMarkdownDocument = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setLoadingStatus('正在加载markdown文档...');
+      setError(null);
+
+      console.log('开始加载完整markdown文档');
+
+      // 先检查缓存
+      const cachedContent = getCachedMarkdownContent();
+      if (cachedContent) {
+        console.log('使用缓存的markdown内容');
+        setMarkdownContent(cachedContent);
+        setIsLoading(false);
+        setLoadingStatus('');
+        return cachedContent;
+      }
+
+      // 获取完整数据
+      const streamData = await fetchMarkdownData();
+
+      // 缓存markdown内容
+      markdownContentCache.current = {
+        data: streamData,
+        timestamp: Date.now(),
+      };
+
+      setMarkdownContent(streamData);
+      setIsLoading(false);
+      setLoadingStatus('');
+      console.log('完整markdown文档加载完成');
+      return streamData;
+    } catch (error: any) {
+      console.error('markdown加载失败:', error);
+      setError(error.message || 'markdown加载失败，请稍后重试');
+      setIsLoading(false);
+      setLoadingStatus('');
+      throw error;
+    }
+  }, [fetchMarkdownData, getCachedMarkdownContent]);
+
+  /**
+   * 获取完整图片数据（以与PDF/Markdown一致的请求方式）
+   */
+  const fetchImageData = useCallback(async (): Promise<ArrayBuffer> => {
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+
+      if (authorization) {
+        headers['Authorization'] = authorization;
+      }
+
+      if (csrfToken) {
+        headers['X-CSRF-TOKEN-IN'] = csrfToken;
+      }
+
+      const requestData = {
+        convertedFilePath,
+        // 不传 pageNo/pageSize，获取完整图片二进制
+      };
+
+      const response = await axios.post<ArrayBuffer>(streamApiUrl, requestData, {
+        headers,
+        responseType: 'arraybuffer',
+      });
+
+      // 获取响应头中的CSRF Token并触发事件
+      const responseCsrfToken =
+        response.headers['x-csrf-token-out'] || response.headers['X-CSRF-TOKEN-OUT'];
+      if (responseCsrfToken) {
+        console.log('获取到响应头中的CSRF Token:', responseCsrfToken);
+        eventsEmit('request_finish', responseCsrfToken);
+      }
+
+      return response.data;
+    } catch (error: any) {
+      console.error('获取图片数据失败:', error);
+      throw new Error(`获取图片数据失败: ${error.message}`);
+    }
+  }, [convertedFilePath, authorization, streamApiUrl, eventsEmit]);
+
+  /**
+   * 加载图片文档
+   */
+  const loadImageDocument = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setLoadingStatus('正在加载图片...');
+      setError(null);
+
+      const imgBuffer = await fetchImageData();
+
+      const parseResult: ParseResult = await parseFile(imgBuffer, {
+        fileName: fileName || '图片',
+        fileType: 'image',
+        token: authorization,
+      });
+
+      if (parseResult.error) {
+        throw new Error(parseResult.error);
+      }
+
+      if (parseResult.type !== 'image' || !parseResult.content) {
+        throw new Error('解析结果不是有效的图片');
+      }
+
+      setImageContent(parseResult.content); // { type: 'image', url }
+      setIsLoading(false);
+      setLoadingStatus('');
+      return parseResult.content;
+    } catch (error: any) {
+      console.error('图片加载失败:', error);
+      setError(error.message || '图片加载失败，请稍后重试');
+      setIsLoading(false);
+      setLoadingStatus('');
+      throw error;
+    }
+  }, [authorization, fileName, fetchImageData]);
+
+  /**
+   * 获取通用文件数据（用于html、text、unknown等文件类型）
+   * 所有文件类型都使用同样的接口，只是非PDF类型不传分页参数
+   * @returns Promise<ArrayBuffer>
+   */
+  const fetchGenericData = useCallback(async (): Promise<ArrayBuffer> => {
+    try {
+      console.log(`请求通用文件数据，文件类型: ${fileType}`);
+
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+
+      if (authorization) {
+        headers['Authorization'] = authorization;
+      }
+
+      if (csrfToken) {
+        headers['X-CSRF-TOKEN-IN'] = csrfToken;
+      }
+
+      const requestData = {
+        convertedFilePath,
+        // 非PDF文件类型不传pageNo和pageSize，获取完整文件内容
+      };
+
+      console.log('发送通用文件请求:', requestData);
+
+      const response = await axios.post<ArrayBuffer>(streamApiUrl, requestData, {
+        headers,
+        responseType: 'arraybuffer',
+      });
+
+      // 获取响应头中的CSRF Token并触发事件
+      const responseCsrfToken =
+        response.headers['x-csrf-token-out'] || response.headers['X-CSRF-TOKEN-OUT'];
+      if (responseCsrfToken) {
+        console.log('获取到响应头中的CSRF Token:', responseCsrfToken);
+        eventsEmit('request_finish', responseCsrfToken);
+      }
+
+      console.log('通用文件响应状态:', response.status);
+      console.log('通用文件响应数据长度:', response.data?.byteLength || 0);
+
+      return response.data;
+    } catch (error: any) {
+      console.error('获取通用文件数据失败:', error);
+      throw new Error(`获取通用文件数据失败: ${error.message}`);
+    }
+  }, [convertedFilePath, authorization, streamApiUrl, eventsEmit]);
+
+  /**
+   * 加载通用文件文档（用于html、text、unknown等文件类型）
+   */
+  const loadGenericDocument = useCallback(async () => {
+    try {
+      console.log(`=== loadGenericDocument 被调用 ===`);
+      console.log(`调用栈:`, new Error().stack);
+      console.log(`当前时间:`, new Date().toISOString());
+
+      // 防抖检查 - 如果正在加载中，直接返回
+      if (isGenericLoadingRef.current) {
+        console.log(`通用文档正在加载中，忽略重复请求，文件类型: ${fileType}`);
+        return;
+      }
+
+      // 如果已经加载过，直接返回
+      if (hasLoadedGenericRef.current) {
+        console.log(`通用文档已经加载过，忽略重复请求，文件类型: ${fileType}`);
+        return;
+      }
+
+      // 检查缓存
+      const cacheKey = `${fileType}_${convertedFilePath}`;
+      const cached = genericContentCache[cacheKey];
+      console.log(
+        `检查通用文档缓存，key: ${cacheKey}, 缓存存在: ${!!cached}, 缓存时间: ${cached ? Date.now() - cached.timestamp : 'N/A'}ms`
+      );
+
+      if (cached && Date.now() - cached.timestamp < CACHE_EXPIRY_TIME) {
+        console.log(`使用缓存的通用文档内容，文件类型: ${fileType}`);
+
+        // 根据文件类型设置相应的状态
+        if (fileType === 'text' && cached.content) {
+          setTextContent(cached.content);
+        } else if (fileType === 'html' && cached.content) {
+          setHtmlContent(cached.content);
+        }
+
+        setCurrentPage(1);
+        // 优先使用用户传入的总页数，如果没有则设为1
+        setTotalPages(userTotalPages || 1);
+        setIsLoading(false);
+        setLoadingStatus('');
+        return cached.content;
+      }
+
+      // 设置防抖状态
+      isGenericLoadingRef.current = true;
+      setIsLoading(true);
+      setLoadingStatus(`正在加载${fileType}文档...`);
+      setError(null);
+
+      console.log(`开始加载通用文档，文件类型: ${fileType}`);
+
+      // 获取通用文件数据
+      const fileData = await fetchGenericData();
+
+      // 显式传入 text 时不再调用 parseFile，避免 fviewer 根据 fileName 误判为 PDF 导致 Invalid PDF structure
+      if (fileType === 'text') {
+        const textContent = decodeArrayBufferAsText(fileData);
+        const finalContent = { type: 'text' as const, content: textContent };
+        setTextContent(finalContent);
+        const cacheKeyForText = `text_${convertedFilePath}`;
+        setGenericContentCache((prev) => ({
+          ...prev,
+          [cacheKeyForText]: { content: finalContent, timestamp: Date.now() },
+        }));
+        setIsLoading(false);
+        setLoadingStatus('');
+        isGenericLoadingRef.current = false;
+        hasLoadedGenericRef.current = true;
+        console.log(`通用文档加载完成（text 直解），文件类型: ${fileType}`);
+        return finalContent;
+      }
+
+      // 使用 fileParser 解析 html / unknown 等
+      const parseResult: ParseResult = await parseFile(fileData, {
+        fileName: fileName || `${fileType}文档`,
+        fileType: fileType as any,
+        token: authorization,
+      });
+
+      if (parseResult.error) {
+        throw new Error(parseResult.error);
+      }
+
+      // 根据解析结果设置相应的状态
+      let finalContent = null;
+      if (parseResult.type === 'text' && parseResult.content) {
+        setTextContent(parseResult.content);
+        finalContent = parseResult.content;
+      } else if (parseResult.type === 'html' && parseResult.content) {
+        setHtmlContent(parseResult.content);
+        finalContent = parseResult.content;
+      } else if (parseResult.type === 'image' && parseResult.content) {
+        setImageContent(parseResult.content);
+        finalContent = parseResult.content;
+      } else {
+        // 如果解析失败，尝试作为文本处理（带编码回退，避免中文乱码）
+        const textContent = decodeArrayBufferAsText(fileData);
+        setTextContent({ type: 'text', content: textContent });
+        finalContent = { type: 'text', content: textContent };
+      }
+
+      // 保存到缓存
+      if (finalContent) {
+        const cacheKey = `${fileType}_${convertedFilePath}`;
+        const newCache = {
+          ...genericContentCache,
+          [cacheKey]: {
+            content: finalContent,
+            timestamp: Date.now(),
+          },
+        };
+        setGenericContentCache(newCache);
+        console.log(`通用文档内容已缓存，文件类型: ${fileType}, 缓存键: ${cacheKey}`);
+        console.log(`当前缓存状态:`, newCache);
+      }
+
+      setIsLoading(false);
+      setLoadingStatus('');
+      isGenericLoadingRef.current = false; // 清除防抖状态
+      hasLoadedGenericRef.current = true; // 标记已加载
+      console.log(`通用文档加载完成，文件类型: ${fileType}`);
+      return parseResult;
+    } catch (error: any) {
+      console.error('通用文档加载失败:', error);
+      setError(error.message || '通用文档加载失败，请稍后重试');
+      setIsLoading(false);
+      setLoadingStatus('');
+      isGenericLoadingRef.current = false; // 清除防抖状态
+      hasLoadedGenericRef.current = true; // 标记已加载（即使失败也标记，避免无限重试）
+      throw error;
+    }
+  }, [fetchGenericData, fileName, authorization, fileType, convertedFilePath, genericContentCache, userTotalPages]);
+
+  // 移除markdown滚动事件处理，不再支持分块加载
+
+  /**
+   * 处理页面变化（仅用于PDF文件类型）
+   */
+  const handlePageChange = useCallback(
+    async (pageNumber: number) => {
+      if (pageNumber === currentPageRef.current) return;
+      if (isLoading) {
+        console.log('页面正在加载中，忽略翻页请求');
+        return;
+      }
+
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+      if (!isPDF) {
+        console.log(`文件类型 ${fileType} 不支持翻页，忽略翻页请求`);
+        return; // 直接返回，不进行任何操作
+      }
+
+      console.log('PDF页面变化:', pageNumber, '当前页:', currentPageRef.current);
+      console.log(`页面 ${pageNumber} 是否在缓存中:`, isPageInCache(pageNumber));
+
+      // 更新ref和state
+      currentPageRef.current = pageNumber;
+      setCurrentPage(pageNumber);
+
+      try {
+        await loadPDFDocument(pageNumber, false); // 非初始加载
+        // 优先使用用户传入的总页数
+        const finalTotalPages = userTotalPages || totalPages;
+        eventsEmit('pageChange', { pageNumber, totalPages: finalTotalPages });
+      } catch (error) {
+        console.error('PDF页面加载失败:', error);
+        // 加载失败时恢复当前页
+        const originalPage = currentPageRef.current;
+        setCurrentPage(originalPage);
+      }
+    },
+    [loadPDFDocument, totalPages, eventsEmit, isPageInCache, isLoading, fileType]
+  );
+
+  // 添加useEffect来监听currentPage变化，确保状态同步
+  useEffect(() => {
+    currentPageRef.current = currentPage;
+    console.log('当前页状态更新:', currentPage);
+  }, [currentPage]);
+
+  /**
+   * 处理缩放变化
+   */
+  const handleZoomChange = useCallback(
+    (newScale: number) => {
+      setScale(newScale);
+      eventsEmit('zoomChange', { scale: newScale });
+    },
+    [eventsEmit]
+  );
+
+  /**
+   * 处理关闭
+   */
+  const handleClose = useCallback(() => {
+    eventsEmit('viewer:close');
+  }, [eventsEmit]);
+
+  /**
+   * 处理放大
+   */
+  const handleZoomIn = useCallback(() => {
+    const newScale = Math.min(3, scale + 0.1);
+    handleZoomChange(newScale);
+  }, [scale, handleZoomChange]);
+
+  /**
+   * 处理缩小
+   */
+  const handleZoomOut = useCallback(() => {
+    const newScale = Math.max(0.3, scale - 0.1);
+    handleZoomChange(newScale);
+  }, [scale, handleZoomChange]);
+
+  /**
+   * 处理左旋转（仅图片）
+   */
+  const handleRotateLeft = useCallback(() => {
+    const newRotation = (rotation - 90 + 360) % 360;
+    setRotation(newRotation);
+    eventsEmit('rotateChange', { rotation: newRotation });
+  }, [rotation, eventsEmit]);
+
+  /**
+   * 处理右旋转（仅图片）
+   */
+  const handleRotateRight = useCallback(() => {
+    const newRotation = (rotation + 90) % 360;
+    setRotation(newRotation);
+    eventsEmit('rotateChange', { rotation: newRotation });
+  }, [rotation, eventsEmit]);
+
+  /**
+   * 处理上一页（仅用于PDF文件类型）
+   */
+  const handlePrevPage = useCallback(() => {
+    // 根据文件类型决定处理方式
+    const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+    if (!isPDF) {
+      console.log(`文件类型 ${fileType} 不支持翻页，忽略翻页请求`);
+      return; // 直接返回，不进行任何操作
+    }
+
+    const prevPage = currentPageRef.current - 1;
+    if (prevPage >= 1) {
+      handlePageChange(prevPage);
+    }
+  }, [handlePageChange, fileType]);
+
+  /**
+   * 处理下一页（仅用于PDF文件类型）
+   */
+  const handleNextPage = useCallback(() => {
+    // 根据文件类型决定处理方式
+    const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+
+    if (!isPDF) {
+      console.log(`文件类型 ${fileType} 不支持翻页，忽略翻页请求`);
+      return; // 直接返回，不进行任何操作
+    }
+
+    const nextPage = currentPageRef.current + 1;
+    // 优先使用用户传入的总页数
+    const finalTotalPages = userTotalPages || totalPages;
+    if (finalTotalPages && nextPage <= finalTotalPages) {
+      handlePageChange(nextPage);
+    }
+  }, [totalPages, handlePageChange, fileType]);
+
+  /**
+   * 清理过期缓存
+   */
+  const cleanupExpiredCache = useCallback(() => {
+    const now = Date.now();
+
+    // 清理单个页面缓存
+    Object.keys(pageCache.current).forEach(pageNo => {
+      const page = pageCache.current[parseInt(pageNo)];
+      if (now - page.timestamp > CACHE_EXPIRY_TIME) {
+        delete pageCache.current[parseInt(pageNo)];
+        console.log(`清理过期页面缓存: ${pageNo}`);
+      }
+    });
+
+    // 清理chunk缓存
+    Object.keys(chunkCache.current).forEach(chunkKey => {
+      const chunk = chunkCache.current[chunkKey];
+      if (now - chunk.timestamp > CACHE_EXPIRY_TIME) {
+        delete chunkCache.current[chunkKey];
+        console.log(`清理过期chunk缓存: ${chunkKey}`);
+      }
+    });
+
+    // 清理markdown内容缓存
+    if (
+      markdownContentCache.current &&
+      now - markdownContentCache.current.timestamp > CACHE_EXPIRY_TIME
+    ) {
+      markdownContentCache.current = null;
+      console.log('清理过期markdown内容缓存');
+    }
+
+    // 清理通用文件缓存
+    setGenericContentCache(prev => {
+      const newCache = { ...prev };
+      Object.keys(newCache).forEach(key => {
+        if (now - newCache[key].timestamp > CACHE_EXPIRY_TIME) {
+          delete newCache[key];
+          console.log(`清理过期通用文件缓存: ${key}`);
+        }
+      });
+      return newCache;
+    });
+  }, []);
+
+  /**
+   * 获取文件名
+   */
+  const getFileName = useCallback(() => {
+    if (fileName) return fileName;
+    try {
+      const urlObj = new URL(convertedFilePath);
+      const fileNameFromUrl = decodeURIComponent(urlObj.pathname.split('/').pop() || '');
+      return fileNameFromUrl || 'Stream文档';
+    } catch {
+      const pathParts = convertedFilePath.split('/');
+      return decodeURIComponent(pathParts[pathParts.length - 1]) || 'Stream文档';
+    }
+  }, [convertedFilePath, fileName]);
+
+  // 定期清理过期缓存
+  useEffect(() => {
+    const cleanupInterval = setInterval(cleanupExpiredCache, CACHE_EXPIRY_TIME);
+    return () => clearInterval(cleanupInterval);
+  }, [cleanupExpiredCache]);
+
+  // 组件卸载时清理缓存
+  useEffect(() => {
+    return () => {
+      pageCache.current = {};
+      chunkCache.current = {};
+      markdownContentCache.current = null;
+      setGenericContentCache({});
+      console.log('组件卸载，清理所有缓存');
+    };
+  }, []);
+
+  // 初始加载
+  useEffect(() => {
+    console.log(`=== useEffect 被触发 ===`);
+    console.log(`触发时间:`, new Date().toISOString());
+    console.log(`触发原因:`, { initialPage, fileType });
+
+    const loadInitialPage = async () => {
+      try {
+        // 根据文件类型决定是否使用翻页参数
+        const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+        const effectivePage = isPDF ? initialPage || 1 : 1;
+        console.log(
+          '开始初始加载，文件类型:',
+          fileType,
+          '有效页码:',
+          effectivePage,
+          '是否PDF:',
+          isPDF
+        );
+
+        if (fileType === 'markdown' || fileType === 'markdown_table') {
+          // Markdown文件加载完整内容，忽略翻页参数
+          await loadMarkdownDocument();
+          setCurrentPage(1);
+          // 优先使用用户传入的总页数，如果没有则设为1
+          setTotalPages(userTotalPages || 1);
+          eventsEmit('pageChange', { pageNumber: 1, totalPages: userTotalPages || 1 });
+        } else if (fileType === 'image') {
+          // 图片文件加载，忽略翻页参数
+          await loadImageDocument();
+          setCurrentPage(1);
+          // 优先使用用户传入的总页数，如果没有则设为1
+          setTotalPages(userTotalPages || 1);
+          setRotation(0);
+          eventsEmit('pageChange', { pageNumber: 1, totalPages: userTotalPages || 1 });
+        } else if (isPDF) {
+          // 只有PDF文件使用页面加载和翻页参数
+          await loadPDFDocument(effectivePage, true);
+          setCurrentPage(effectivePage);
+          // 等待 totalPages 更新后再触发事件，优先使用用户传入的值
+          setTimeout(() => {
+            const finalTotalPages = userTotalPages || totalPages;
+            eventsEmit('pageChange', { pageNumber: effectivePage, totalPages: finalTotalPages });
+          }, 0);
+        } else {
+          // 其他文件类型（text, html, unknown等）使用通用加载函数，忽略翻页参数
+          console.log('=== 初始加载：使用通用加载函数处理文件类型 ===', fileType);
+          await loadGenericDocument();
+          setCurrentPage(1);
+          // 优先使用用户传入的总页数，如果没有则设为1
+          setTotalPages(userTotalPages || 1);
+          eventsEmit('pageChange', { pageNumber: 1, totalPages: userTotalPages || 1 });
+        }
+      } catch (error: any) {
+        console.error('初始加载失败:', error);
+        // 确保错误状态被正确设置，避免组件状态不一致
+        setError(error?.message || '文件加载失败，请稍后重试');
+        setIsLoading(false);
+        setLoadingStatus('');
+      }
+    };
+
+    loadInitialPage();
+  }, [initialPage, fileType, convertedFilePath]);
+
+  // 所有 hooks 必须在条件返回之前调用
+  const pdfStartPage = useMemo(() => {
+    return Math.floor((currentPage - 1) / pageSize) * pageSize + 1;
+  }, [currentPage, pageSize]);
+
+  if (error) {
+    return (
+      <ReaderContainer $theme={mergedTheme} className={className}>
+        {customComponents?.ErrorComponent ? (
+          <customComponents.ErrorComponent error={error} theme={mergedTheme} />
+        ) : (
+          <ErrorContainer $theme={mergedTheme}>
+            <div>加载失败</div>
+            <div style={{ fontSize: '12px', marginTop: '8px' }}>{error}</div>
+          </ErrorContainer>
+        )}
+      </ReaderContainer>
+    );
+  }
+
+  // 渲染加载状态
+  if (isLoading) {
+    return (
+      <ReaderContainer $theme={mergedTheme} className={className}>
+        {/* 头部工具栏 - 始终显示 */}
+        <Header
+          fileName={getFileName()}
+          currentPage={currentPage}
+          totalPage={totalPages}
+          scale={scale}
+          isAnnotating={false}
+          tools={tools}
+          styles={styles}
+          onPrevPage={() => {}}
+          onNextPage={() => {}}
+          onZoomIn={() => {}}
+          onZoomOut={() => {}}
+          onAnnotationToggle={() => {}}
+          onDownload={() => {}}
+          onClose={handleClose}
+          className={headerClass}
+        />
+
+        {/* 内容区域 - 显示加载状态 */}
+        {customComponents?.LoadingComponent ? (
+          <customComponents.LoadingComponent status={loadingStatus} theme={mergedTheme} />
+        ) : (
+          <DefaultLoadingComponent status={loadingStatus} theme={mergedTheme} />
+        )}
+      </ReaderContainer>
+    );
+  }
+
+  return (
+    <ReaderContainer $theme={mergedTheme} className={className}>
+      {/* Header组件 */}
+      <Header
+        fileName={getFileName()}
+        currentPage={currentPage}
+        totalPage={totalPages}
+        scale={scale}
+        isAnnotating={false}
+        tools={{
+          ...tools,
+          // 仅PDF和PDF幻灯片显示导航
+          navigation: fileType === 'pdf' || fileType === 'pdf_slides' ? tools.navigation : false,
+          // 仅图片显示旋转
+          rotate: fileType === 'image',
+        }}
+        styles={styles}
+        onPrevPage={handlePrevPage}
+        onNextPage={handleNextPage}
+        onZoomIn={handleZoomIn}
+        onZoomOut={handleZoomOut}
+        onRotateLeft={fileType === 'image' ? handleRotateLeft : undefined}
+        onRotateRight={fileType === 'image' ? handleRotateRight : undefined}
+        onAnnotationToggle={() => {}}
+        onDownload={() => {}}
+        onClose={handleClose}
+        className={headerClass}
+      />
+
+      {fileType === 'markdown' || fileType === 'markdown_table' ? (
+        // Markdown内容渲染 - 使用Fviewer的markdown渲染逻辑
+        <div
+          ref={scrollContainerRef}
+          style={{
+            flex: 1,
+            overflow: 'auto', // 改为auto，允许滚动条显示
+            position: 'relative',
+          }}
+          className={contentClass}
+        >
+          <Fviewer
+            data={{
+              content: markdownContent, // 直接传递markdown内容字符串
+              ...(getFileName() && { fileName: getFileName() }),
+              ...(fileType && { fileType }),
+              ...(totalPages && { totalPages }),
+            }}
+            annotationData={annotations}
+            totalPage={totalPages}
+            currentPage={currentPage}
+            scale={scale}
+            eventsEmit={(name, data) => {
+              console.log('Fviewer事件:', name, data);
+              // 处理markdown标注事件
+              if (name === 'md_annotation_add') {
+                eventsEmit('md_annotation_add', data);
+              } else if (name === 'table_annotation_add') {
+                eventsEmit('table_annotation_add', data);
+              } else {
+                // 传递其他事件
+                eventsEmit(name, data);
+              }
+            }}
+            styles={styles}
+            tools={tools}
+            customComponents={customComponents}
+            contentClass={contentClass}
+          />
+          {(() => {
+            console.log('=== 传递给Fviewer的markdown内容 ===');
+            console.log('markdownContent:', markdownContent);
+            console.log('markdownContent长度:', markdownContent.length);
+            console.log('markdownContent前100字符:', markdownContent.substring(0, 100));
+            console.log(
+              'markdownContent后100字符:',
+              markdownContent.substring(markdownContent.length - 100)
+            );
+            return null;
+          })()}
+
+          {/* 移除加载更多指示器，不再支持分块加载 */}
+        </div>
+      ) : fileType === 'image' ? (
+        // 图片内容渲染
+        <Fviewer
+          data={{
+            content: imageContent, // { type: 'image', url }
+            ...(getFileName() && { fileName: getFileName() }),
+            ...(fileType && { fileType }),
+          }}
+          annotationData={annotations}
+          totalPage={1}
+          currentPage={1}
+          scale={scale}
+          rotation={rotation}
+          eventsEmit={eventsEmit}
+          styles={styles}
+          tools={{
+            ...tools,
+            navigation: false,
+            rotate: true,
+          }}
+          customComponents={customComponents}
+          contentClass={contentClass}
+        />
+      ) : fileType === 'pdf' || fileType === 'pdf_slides' ? (
+        // PDF内容渲染
+        <Fviewer
+          data={{
+            content: { document: pdfDocument }, // 修复：包装成期望的数据结构
+            ...(getFileName() && { fileName: getFileName() }),
+            ...(fileType && { fileType }),
+            ...(totalPages && { totalPages }),
+            // 添加PDF起始页信息，用于分页PDF的页码映射
+            pdfStartPage,
+          }}
+          annotationData={annotations}
+          totalPage={totalPages}
+          currentPage={currentPage}
+          scale={scale}
+          initialZoom={initialZoom}
+          eventsEmit={(name, data) => {
+            console.log('Fviewer事件:', name, data);
+            // 处理缩放变化事件
+            if (name === 'scaleChange') {
+              console.log('收到缩放变化事件:', data);
+              // 这里需要更新scale状态，但是我们需要一个回调来更新scale
+              // 暂时先传递事件
+              eventsEmit(name, data);
+            } else {
+              // 传递其他事件
+              eventsEmit(name, data);
+            }
+          }}
+          styles={styles}
+          tools={tools}
+          customComponents={customComponents}
+          contentClass={contentClass}
+          setScale={setScale}
+        />
+      ) : (
+        // 通用文件类型渲染（html、text、unknown等）
+        <Fviewer
+          data={{
+            content: textContent || htmlContent || { type: 'text', content: '文件内容加载中...' },
+            ...(getFileName() && { fileName: getFileName() }),
+            ...(fileType && { fileType }),
+          }}
+          annotationData={annotations}
+          totalPage={1}
+          currentPage={1}
+          scale={scale}
+          eventsEmit={eventsEmit}
+          styles={styles}
+          tools={{
+            ...tools,
+            navigation: false, // 通用文件类型不支持翻页
+          }}
+          customComponents={customComponents}
+          contentClass={contentClass}
+        />
+      )}
+    </ReaderContainer>
+  );
+};
+
+export default GientechStreamReader;