@gientech/modual 1.2.8 → 1.2.9-fix

package/src/modules/streamFilesReader/GientechStreamReader.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import axios from 'axios';
-import {Fviewer,parseFile} from '@mxmweb/fviewer';
+import { Fviewer, parseFile, registerPDFWorker } from '@mxmweb/fviewer';
 import type { ParseResult } from '@mxmweb/fviewer';
 import Header from './components/Header';
-
-import type { Annotation,  ToolsConfig } from '@mxmweb/fviewer';
+export { registerPDFWorker };
+import type { Annotation, ToolsConfig } from '@mxmweb/fviewer';
 
 import { Styles } from '@mxmweb/zui';
 // Stream接口参数类型
@@ -104,8 +104,12 @@ const ReaderContainer = styled.div<{ $theme: Styles }>`
 
   /* 添加动画样式 */
   @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 `;
 
@@ -118,85 +122,101 @@ const DefaultLoadingComponent: React.FC<{
   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={{
+        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',
+      <div
+        style={{
           position: 'relative',
-          margin: '0 auto'
-        }}>
+          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
+            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
+          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'
-      }}>
+      <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,
+      <div
+        style={{
+          width: '200px',
+          height: '4px',
+          background: theme.colors.border,
           borderRadius: '2px',
-          animation: 'loading-progress 2s ease-in-out infinite'
-        }} />
+          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>
 
       {/* 动画样式 */}
@@ -245,8 +265,6 @@ const ErrorContainer = styled.div<{ $theme: Styles }>`
 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: {
@@ -322,7 +340,7 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
 
   // 通用文件缓存状态
   const [genericContentCache, setGenericContentCache] = useState<{
-    [key: string]: { content: any; timestamp: number }
+    [key: string]: { content: any; timestamp: number };
   }>({});
 
   // 防抖状态 - 防止重复请求
@@ -380,31 +398,31 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
       case 'pdf_slides':
         defaultTools = {
           ...baseTools,
-          annotation: false,  // PDF模式关闭标注功能
-          download: false,    // PDF模式关闭下载功能
-          navigation: true,   // PDF模式开启翻页导航
-          rotate: false,      // PDF模式关闭旋转功能
+          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,
+          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模式关闭缩放功能
+          annotation: false, // Markdown模式开启标注功能
+          download: false, // Markdown模式关闭下载功能
+          navigation: false, // Markdown模式关闭翻页导航
+          rotate: false, // Markdown模式关闭旋转功能
+          zoom: false, // Markdown模式关闭缩放功能
         };
         break;
       case 'text':
@@ -412,11 +430,11 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
       case 'unknown':
         defaultTools = {
           ...baseTools,
-          annotation: false,  // 其他模式关闭标注功能
-          download: false,    // 其他模式关闭下载功能
-          navigation: false,  // 其他模式关闭翻页导航
-          rotate: false,      // 其他模式关闭旋转功能
-          zoom: false,        // 其他模式关闭缩放功能
+          annotation: false, // 其他模式关闭标注功能
+          download: false, // 其他模式关闭下载功能
+          navigation: false, // 其他模式关闭翻页导航
+          rotate: false, // 其他模式关闭旋转功能
+          zoom: false, // 其他模式关闭缩放功能
         };
         break;
       default:
@@ -448,257 +466,296 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
     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 getCachedPage = useCallback(
+    async (pageNo: number): Promise<any | null> => {
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
 
-    // 先检查单个页面缓存
-    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;
+      if (!isPDF) {
+        console.log(`文件类型 ${fileType} 不是PDF，跳过缓存检查`);
+        return null;
       }
-      // 如果没有缓存的PDF文档，需要重新解析
-      return null;
-    }
 
-    // 检查chunk缓存
-    const chunkKey = getChunkKey(pageNo, pageSize);
-    const chunkCached = chunkCache.current[chunkKey];
-    console.log(`检查chunk缓存: ${chunkKey}, 存在: ${!!chunkCached}, 包含页面: ${chunkCached?.pages?.join(', ') || '无'}`);
+      console.log(`检查页面 ${pageNo} 是否在缓存中`);
 
-    if (chunkCached && Date.now() - chunkCached.timestamp < CACHE_EXPIRY_TIME) {
-      // 验证页面是否真的在这个chunk中
-      if (chunkCached.pages.includes(pageNo)) {
-        console.log(`使用chunk缓存: ${pageNo} (chunk: ${chunkKey})`);
-        if (chunkCached.pdfDocument) {
+      // 先检查单个页面缓存
+      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 chunkCached.pdfDocument;
+          return pageCached.pdfDocument;
         }
         // 如果没有缓存的PDF文档，需要重新解析
         return null;
-      } else {
-        console.log(`页面 ${pageNo} 不在chunk ${chunkKey} 中，chunk包含: ${chunkCached.pages.join(', ')}`);
       }
-    }
 
-    console.log(`页面 ${pageNo} 不在任何缓存中，需要重新请求`);
-    return null;
-  }, [pageSize, getChunkKey, fileType]);
+      // 检查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';
+  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} 不支持分页加载`);
-      }
+        if (!isPDF) {
+          console.log(`文件类型 ${fileType} 不需要分页参数，获取完整内容`);
+          throw new Error(`文件类型 ${fileType} 不支持分页加载`);
+        }
 
-      // 计算需要请求的chunk
-      const chunkStart = Math.floor((pageNo - 1) / pageSize) * pageSize + 1;
-      const chunkKey = getChunkKey(pageNo, pageSize);
+        // 计算需要请求的chunk
+        const chunkStart = Math.floor((pageNo - 1) / pageSize) * pageSize + 1;
+        const chunkKey = getChunkKey(pageNo, pageSize);
 
-      console.log(`请求PDF chunk数据: ${chunkStart} (包含页面 ${chunkStart}-${chunkStart + pageSize - 1})`);
+        console.log(
+          `请求PDF chunk数据: ${chunkStart} (包含页面 ${chunkStart}-${chunkStart + pageSize - 1})`
+        );
 
-      const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-      };
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        };
 
-      if (authorization) {
-        headers['Authorization'] = authorization;
-      }
+        if (authorization) {
+          headers['Authorization'] = authorization;
+        }
 
-      if (csrfToken) {
-        headers['X-CSRF-TOKEN-IN'] = csrfToken;
-      }
+        if (csrfToken) {
+          headers['X-CSRF-TOKEN-IN'] = csrfToken;
+        }
 
-      // PDF文件类型传递分页参数
-      const requestData = {
-        convertedFilePath,
-        pageNo: chunkStart, // 使用chunk的起始页
-        pageSize,
-      };
+        // PDF文件类型传递分页参数
+        const requestData = {
+          convertedFilePath,
+          pageNo: chunkStart, // 使用chunk的起始页
+          pageSize,
+        };
 
-      const response = await axios.post<ArrayBuffer>(
-        streamApiUrl,
-        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);
         }
-      );
 
-      // 获取响应头中的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, // 始终使用用户传入的总页数，不覆盖
-      };
+        // 缓存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));
+        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]);
+        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';
+  const loadPDFDocument = useCallback(
+    async (pageNo: number, isInitialLoad: boolean = false) => {
+      if (!pageNo) return;
 
-    if (!isPDF) {
-      console.log(`文件类型 ${fileType} 不是PDF，跳过PDF加载逻辑`);
-      return null; // 直接返回，不进行任何操作
-    }
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
 
-    try {
-      if (isInitialLoad) {
-        setIsLoading(true);
-        setLoadingStatus('正在加载PDF文档...');
-      } else {
-        setIsLoading(true);
-        setLoadingStatus(`正在加载第 ${pageNo} 页...`);
+      if (!isPDF) {
+        console.log(`文件类型 ${fileType} 不是PDF，跳过PDF加载逻辑`);
+        return null; // 直接返回，不进行任何操作
       }
-      setError(null);
 
-      console.log(`开始加载PDF页面: ${pageNo}, 初始加载: ${isInitialLoad}`);
+      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;
+        }
 
-      // 先检查缓存
-      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);
 
-      // 获取stream数据
-      const streamData = await fetchStreamData(pageNo);
+        // 使用fileParser解析数据
+        const parseResult: ParseResult = await parseFile(streamData, {
+          fileName: fileName || 'Stream文档',
+          fileType: 'pdf',
+          token: authorization,
+        });
 
-      // 使用fileParser解析数据
-      const parseResult: ParseResult = await parseFile(streamData, {
-        fileName: fileName || 'Stream文档',
-        fileType: 'pdf',
-        token: authorization,
-      });
+        if (parseResult.error) {
+          throw new Error(parseResult.error);
+        }
 
-      if (parseResult.error) {
-        throw new Error(parseResult.error);
-      }
+        if (parseResult.type !== 'pdf' || !parseResult.content?.document) {
+          throw new Error('解析结果不是有效的PDF文档');
+        }
 
-      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}`);
+        }
 
-      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文档的实际页数
+        if (userTotalPages) {
+          console.log(`使用用户传入的总页数: ${userTotalPages}`);
+          setTotalPages(userTotalPages);
+        } else if (pdf && pdf.numPages) {
+          const actualTotalPages = pdf.numPages;
+          console.log(`用户未传入总页数，从PDF文档获取实际总页数: ${actualTotalPages}`);
+          setTotalPages(actualTotalPages);
+        }
 
-      // 缓存解析后的PDF文档
-      const chunkKey = getChunkKey(pageNo, pageSize);
-      if (chunkCache.current[chunkKey]) {
-        chunkCache.current[chunkKey].pdfDocument = pdf;
-        console.log(`缓存PDF文档到chunk: ${chunkKey}`);
-      }
+        setIsLoading(false);
+        setLoadingStatus('');
 
-      // 设置总页数 - 优先使用用户传入的总页数，如果没有传入则使用PDF文档的实际页数
-      if (userTotalPages) {
-        console.log(`使用用户传入的总页数: ${userTotalPages}`);
-        setTotalPages(userTotalPages);
-      } else if (pdf && pdf.numPages) {
-        const actualTotalPages = pdf.numPages;
-        console.log(`用户未传入总页数，从PDF文档获取实际总页数: ${actualTotalPages}`);
-        setTotalPages(actualTotalPages);
+        console.log(`页面 ${pageNo} 加载完成`);
+        return pdf;
+      } catch (error: any) {
+        console.error('PDF加载失败:', error);
+        setError(error.message || 'PDF加载失败，请稍后重试');
+        setIsLoading(false);
+        setLoadingStatus('');
+        throw error;
       }
-
-      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]);
+    },
+    [
+      fetchStreamData,
+      fileName,
+      authorization,
+      totalPages,
+      getCachedPage,
+      getChunkKey,
+      pageSize,
+      fileType,
+    ]
+  );
 
   /**
    * 检查页面是否在缓存中（用于调试）
    */
-  const isPageInCache = useCallback((pageNo: number): boolean => {
-    // 根据文件类型决定处理方式
-    const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+  const isPageInCache = useCallback(
+    (pageNo: number): boolean => {
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
 
-    if (!isPDF) {
-      return false;
-    }
+      if (!isPDF) {
+        return false;
+      }
 
-    // 先检查单个页面缓存
-    const pageCached = pageCache.current[pageNo];
-    if (pageCached && Date.now() - pageCached.timestamp < CACHE_EXPIRY_TIME) {
-      return !!pageCached.pdfDocument;
-    }
+      // 先检查单个页面缓存
+      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;
-    }
+      // 检查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]);
+      return false;
+    },
+    [pageSize, getChunkKey, fileType]
+  );
 
   // ========== Markdown相关工具函数 ==========
 
@@ -752,7 +809,8 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
       });
 
       // 获取响应头中的CSRF Token并触发事件
-      const responseCsrfToken = response.headers['x-csrf-token-out'] || response.headers['X-CSRF-TOKEN-OUT'];
+      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);
@@ -796,7 +854,7 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
       // 缓存markdown内容
       markdownContentCache.current = {
         data: streamData,
-        timestamp: Date.now()
+        timestamp: Date.now(),
       };
 
       setMarkdownContent(streamData);
@@ -835,17 +893,14 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
         // 不传 pageNo/pageSize，获取完整图片二进制
       };
 
-      const response = await axios.post<ArrayBuffer>(
-        streamApiUrl,
-        requestData,
-        {
-          headers,
-          responseType: 'arraybuffer',
-        }
-      );
+      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'];
+      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);
@@ -924,17 +979,14 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
 
       console.log('发送通用文件请求:', requestData);
 
-      const response = await axios.post<ArrayBuffer>(
-        streamApiUrl,
-        requestData,
-        {
-          headers,
-          responseType: 'arraybuffer',
-        }
-      );
+      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'];
+      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);
@@ -974,7 +1026,9 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
       // 检查缓存
       const cacheKey = `${fileType}_${convertedFilePath}`;
       const cached = genericContentCache[cacheKey];
-      console.log(`检查通用文档缓存，key: ${cacheKey}, 缓存存在: ${!!cached}, 缓存时间: ${cached ? Date.now() - cached.timestamp : 'N/A'}ms`);
+      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}`);
@@ -1042,8 +1096,8 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
           ...genericContentCache,
           [cacheKey]: {
             content: finalContent,
-            timestamp: Date.now()
-          }
+            timestamp: Date.now(),
+          },
         };
         setGenericContentCache(newCache);
         console.log(`通用文档内容已缓存，文件类型: ${fileType}, 缓存键: ${cacheKey}`);
@@ -1072,40 +1126,43 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
   /**
    * 处理页面变化（仅用于PDF文件类型）
    */
-  const handlePageChange = useCallback(async (pageNumber: number) => {
-    if (pageNumber === currentPageRef.current) return;
-    if (isLoading) {
-      console.log('页面正在加载中，忽略翻页请求');
-      return;
-    }
+  const handlePageChange = useCallback(
+    async (pageNumber: number) => {
+      if (pageNumber === currentPageRef.current) return;
+      if (isLoading) {
+        console.log('页面正在加载中，忽略翻页请求');
+        return;
+      }
 
-    // 根据文件类型决定处理方式
-    const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
+      // 根据文件类型决定处理方式
+      const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
 
-    if (!isPDF) {
-      console.log(`文件类型 ${fileType} 不支持翻页，忽略翻页请求`);
-      return; // 直接返回，不进行任何操作
-    }
+      if (!isPDF) {
+        console.log(`文件类型 ${fileType} 不支持翻页，忽略翻页请求`);
+        return; // 直接返回，不进行任何操作
+      }
 
-    console.log('PDF页面变化:', pageNumber, '当前页:', currentPageRef.current);
-    console.log(`页面 ${pageNumber} 是否在缓存中:`, isPageInCache(pageNumber));
+      console.log('PDF页面变化:', pageNumber, '当前页:', currentPageRef.current);
+      console.log(`页面 ${pageNumber} 是否在缓存中:`, isPageInCache(pageNumber));
 
-    // 更新ref和state
-    currentPageRef.current = pageNumber;
-    setCurrentPage(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]);
+      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(() => {
@@ -1116,10 +1173,13 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
   /**
    * 处理缩放变化
    */
-  const handleZoomChange = useCallback((newScale: number) => {
-    setScale(newScale);
-    eventsEmit('zoomChange', { scale: newScale });
-  }, [eventsEmit]);
+  const handleZoomChange = useCallback(
+    (newScale: number) => {
+      setScale(newScale);
+      eventsEmit('zoomChange', { scale: newScale });
+    },
+    [eventsEmit]
+  );
 
   /**
    * 处理关闭
@@ -1225,7 +1285,10 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
     });
 
     // 清理markdown内容缓存
-    if (markdownContentCache.current && now - markdownContentCache.current.timestamp > CACHE_EXPIRY_TIME) {
+    if (
+      markdownContentCache.current &&
+      now - markdownContentCache.current.timestamp > CACHE_EXPIRY_TIME
+    ) {
       markdownContentCache.current = null;
       console.log('清理过期markdown内容缓存');
     }
@@ -1285,8 +1348,15 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
       try {
         // 根据文件类型决定是否使用翻页参数
         const isPDF = fileType === 'pdf' || fileType === 'pdf_slides';
-        const effectivePage = isPDF ? (initialPage || 1) : 1;
-        console.log('开始初始加载，文件类型:', fileType, '有效页码:', effectivePage, '是否PDF:', isPDF);
+        const effectivePage = isPDF ? initialPage || 1 : 1;
+        console.log(
+          '开始初始加载，文件类型:',
+          fileType,
+          '有效页码:',
+          effectivePage,
+          '是否PDF:',
+          isPDF
+        );
 
         if (fileType === 'markdown' || fileType === 'markdown_table') {
           // Markdown文件加载完整内容，忽略翻页参数
@@ -1321,22 +1391,28 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
           setTotalPages(userTotalPages || 1);
           eventsEmit('pageChange', { pageNumber: 1, totalPages: userTotalPages || 1 });
         }
-      } catch (error) {
+      } 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}
-          />
+          <customComponents.ErrorComponent error={error} theme={mergedTheme} />
         ) : (
           <ErrorContainer $theme={mergedTheme}>
             <div>加载失败</div>
@@ -1347,10 +1423,6 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
     );
   }
 
-  const pdfStartPage = useMemo(()=>{
-    return Math.floor((currentPage - 1) / pageSize) * pageSize + 1
-  },[currentPage,pageSize])
-
   // 渲染加载状态
   if (isLoading) {
     return (
@@ -1376,15 +1448,9 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
 
         {/* 内容区域 - 显示加载状态 */}
         {customComponents?.LoadingComponent ? (
-          <customComponents.LoadingComponent
-            status={loadingStatus}
-            theme={mergedTheme}
-          />
+          <customComponents.LoadingComponent status={loadingStatus} theme={mergedTheme} />
         ) : (
-          <DefaultLoadingComponent
-            status={loadingStatus}
-            theme={mergedTheme}
-          />
+          <DefaultLoadingComponent status={loadingStatus} theme={mergedTheme} />
         )}
       </ReaderContainer>
     );
@@ -1392,8 +1458,8 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
 
   return (
     <ReaderContainer $theme={mergedTheme} className={className}>
-        {/* Header组件 */}
-        <Header
+      {/* Header组件 */}
+      <Header
         fileName={getFileName()}
         currentPage={currentPage}
         totalPage={totalPages}
@@ -1401,8 +1467,8 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
         isAnnotating={false}
         tools={{
           ...tools,
-                  // 仅PDF和PDF幻灯片显示导航
-        navigation: (fileType === 'pdf' || fileType === 'pdf_slides') ? tools.navigation : false,
+          // 仅PDF和PDF幻灯片显示导航
+          navigation: fileType === 'pdf' || fileType === 'pdf_slides' ? tools.navigation : false,
           // 仅图片显示旋转
           rotate: fileType === 'image',
         }}
@@ -1419,7 +1485,7 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
         className={headerClass}
       />
 
-            {(fileType === 'markdown' || fileType === 'markdown_table') ? (
+      {fileType === 'markdown' || fileType === 'markdown_table' ? (
         // Markdown内容渲染 - 使用Fviewer的markdown渲染逻辑
         <div
           ref={scrollContainerRef}
@@ -1432,7 +1498,7 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
         >
           <Fviewer
             data={{
-              content: markdownContent,  // 直接传递markdown内容字符串
+              content: markdownContent, // 直接传递markdown内容字符串
               ...(getFileName() && { fileName: getFileName() }),
               ...(fileType && { fileType }),
               ...(totalPages && { totalPages }),
@@ -1463,7 +1529,10 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
             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));
+            console.log(
+              'markdownContent后100字符:',
+              markdownContent.substring(markdownContent.length - 100)
+            );
             return null;
           })()}
 
@@ -1496,12 +1565,12 @@ const GientechStreamReader: React.FC<GientechStreamReaderProps> = ({
         // PDF内容渲染
         <Fviewer
           data={{
-            content: { document: pdfDocument },  // 修复：包装成期望的数据结构
+            content: { document: pdfDocument }, // 修复：包装成期望的数据结构
             ...(getFileName() && { fileName: getFileName() }),
             ...(fileType && { fileType }),
             ...(totalPages && { totalPages }),
             // 添加PDF起始页信息，用于分页PDF的页码映射
-            pdfStartPage
+            pdfStartPage,
           }}
           annotationData={annotations}
           totalPage={totalPages}