1、增加resize放大缩小处理。

src/components/BookReader/index.vue

@@ -262,6 +262,8 @@ const restoreLoadedImages = (visiblePages, $magazine) => {
 // 新增：封装 PDF viewport 尺寸计算
 const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) => {
   try {
+
+    debugger
     const originalViewport = pdfPage.getViewport({ scale: 1.0 });
     const viewportWidth = originalViewport.viewBox[2];
     const viewportHeight = originalViewport.viewBox[3];
@@ -860,6 +862,12 @@ const initBook = async () => {
     loading.value = false;
     initialLoading.value = false;
 
+    // 确认turn.js事件绑定状态
+    console.log('turn.js初始化完成，事件绑定状态:');
+    console.log('- turning事件:', $magazine.data('turn')?.when?.turning ? '已绑定' : '未绑定');
+    console.log('- turned事件:', $magazine.data('turn')?.when?.turned ? '已绑定' : '未绑定');
+    console.log('- 当前页码:', $magazine.turn("page"));
+
     // 只处理图片页面，PDF页面在loadPdf中处理
     if (!props.isPdf) {
       await loadVisiblePages(1);
@@ -893,8 +901,13 @@ const loadPdf = async () => {
   }
 
   // 防止重复加载
-  if (pdfLoading.value || pdfDocument.value) {
-    console.log("PDF 正在加载中或已加载，跳过重复加载");
+  if (pdfLoading.value) {
+    console.log("PDF 正在加载中，跳过重复加载");
+    return;
+  }
+  
+  if (pdfDocument.value && pdfInitialized.value) {
+    console.log("PDF 已经加载并初始化完成，跳过重复加载");
     return;
   }
 
@@ -950,6 +963,15 @@ const loadPdf = async () => {
     // 等待一小段时间，确保turn.js事件处理完成
     await new Promise((resolve) => setTimeout(resolve, 100));
 
+    // 确认PDF模式下的turn.js事件绑定状态
+    if (magazine.value) {
+      const $magazine = $(magazine.value);
+      console.log('PDF加载完成，turn.js事件绑定状态:');
+      console.log('- turning事件:', $magazine.data('turn')?.when?.turning ? '已绑定' : '未绑定');
+      console.log('- turned事件:', $magazine.data('turn')?.when?.turned ? '已绑定' : '未绑定');
+      console.log('- 当前页码:', $magazine.turn("page"));
+    }
+
     console.log("PDF渲染完成");
   } catch (error) {
     console.error("PDF加载失败:", error);
@@ -975,7 +997,8 @@ watch(
   () => props.pdfUrl,
   async (newUrl, oldUrl) => {
     // 避免在组件初始化时重复加载
-    if (newUrl && props.isPdf && newUrl !== oldUrl) {
+    // 只有在URL真正变化且不是从undefined到有值时才重新加载
+    if (newUrl && props.isPdf && oldUrl && newUrl !== oldUrl) {
       console.log("PDF URL 变化，重新加载:", newUrl);
       await loadPdf();
     }
@@ -999,15 +1022,29 @@ const destroyTurn = () => {
 // 初始化 Intersection Observer
 
 // 渲染单个PDF页面 - 使用PdfViewer的PDFPageView
-const renderPdfPage = async (pageIndex) => {
+const renderPdfPage = async (pageIndex, forceCheck = true) => {
   if (!pdfDocument.value || !magazine.value) return;
 
   let pageNum = pageIndex + 1;
 
   // 检查页面是否已经渲染过
   if (renderedPages.value.has(pageIndex)) {
-    console.log(`页面 ${pageNum} 已经渲染过，跳过`);
-    return;
+    if (forceCheck) {
+      const pageInfo = getPageInfoByPageNum(pageNum);
+      if (!pageInfo) {
+        console.warn(`页面${pageNum}信息获取失败，跳过scale检查`);
+        return;
+      }
+      
+      const { scaleInfo } = pageInfo;
+      console.log(`页面 ${pageNum} 已经渲染过，但需要检查scale是否需要调整`);
+      // 在forceCheck模式下，检查已渲染页面的scale
+      await checkAndUpdatePdfPageScale(pageIndex);
+      return;
+    } else {
+      console.log(`页面 ${pageNum} 已经渲染过，跳过`);
+      return;
+    }
   }
 
   console.log(`开始渲染PDF页面 ${pageNum}，使用PdfViewer`);
@@ -1025,6 +1062,7 @@ const renderPdfPage = async (pageIndex) => {
 
     // 创建页面div元素
     // todo 这里可能能够优化一下
+    debugger
     const pageDiv = document.createElement('div');
     pageDiv.className = 'pdfViewer';
     pageDiv.setAttribute('data-page-number', pageNum);
@@ -1099,44 +1137,178 @@ const renderPdfPage = async (pageIndex) => {
   }
 };
 
-// 重新调整PDF页面尺寸
-// 重新调整PDF页面尺寸
-const resizePdfPage = async (pageIndex) => {
-  if (!pdfViewerInstances.value.has(pageIndex)) return;
+// 检查并更新PDF页面的scale
+const checkAndUpdatePdfPageScale = async (pageIndex) => {
+  if (!pdfViewerInstances.value.has(pageIndex)) return false;
 
   const pageNum = pageIndex + 1;
-  const pageContainer = magazine.value.querySelector(`.p${pageNum}`);
-  if (!pageContainer) return;
+  const pageInfo = getPageInfoByPageNum(pageNum);
+  if (!pageInfo) {
+    console.warn(`页面${pageIndex + 1}信息获取失败，跳过scale检查`);
+    return false;
+  }
+  
+  const { pageContainer, pageView, scaleInfo } = pageInfo;
 
-  const pageView = pdfViewerInstances.value.get(pageIndex);
-  if (!pageView) return;
+  const newScale = scaleInfo.compensatedScale;
 
   try {
-    // 获取新的容器尺寸
-    const containerWidth = pageContainer.clientWidth;
-    const containerHeight = pageContainer.clientHeight;
+    // 获取当前scale值
+    let currentScale = newScale; // 默认值
+    
+    console.log(`before pageView: ${pageView}`);
+    if (pageView.viewport && typeof pageView.viewport.scale === 'number') {
+      currentScale = pageView.viewport.scale;
+      console.log(`从pageView.viewport.scale获取当前scale: ${currentScale}`);
+    } else {
+      console.warn(`页面${pageNum} viewport.scale无效，使用新计算的scale`);
+    }
+    
+    debugger
+    const scaleDifference = Math.abs(currentScale - newScale);
+    const scaleThreshold = 0.01; // 允许的scale差异阈值
+
+    console.log(`页面${pageNum} scale检查: 当前=${currentScale}, 新计算=${newScale}, 差异=${scaleDifference}, 阈值=${scaleThreshold}`);
+
+    if (scaleDifference > scaleThreshold) {
+      console.log(`页面${pageNum} scale不一致，需要重新创建PDFPageView，差异: ${scaleDifference}`);
+      
+      // 销毁旧的PDFPageView实例
+      if (pageView && typeof pageView.destroy === 'function') {
+        pageView.destroy();
+      }
+      
+      // 清除渲染状态
+      renderedPages.value.delete(pageIndex);
+      pdfViewerInstances.value.delete(pageIndex);
+
+      // 找到原来的pdfViewer div并清空内容
+      const existingPdfDiv = pageContainer.querySelector(`.pdfViewer[data-page-number="${pageNum}"]`);
+      if (existingPdfDiv) {
+        // 直接清空现有div的内容，而不是重新创建
+        existingPdfDiv.innerHTML = '';
+        console.log(`找到现有pdfViewer div (页面${pageNum})，已清空内容`);
+      } else {
+        console.warn(`未找到页面${pageNum}的pdfViewer div，创建新的`);
+        // 如果没有找到，才创建新的
+        const pageDiv = document.createElement('div');
+        pageDiv.className = 'pdfViewer';
+        pageDiv.setAttribute('data-page-number', pageNum);
+        pageContainer.appendChild(pageDiv);
+      }
+
+      // 等待DOM更新完成
+      await nextTick();
+
+      // 获取PDF页面和视口
+      const rawPdfDocument = toRaw(pdfDocument.value);
+      const pdfPage = await rawPdfDocument.getPage(pageNum);
+
+      // 获取新的容器尺寸
+      const containerWidth = pageContainer.clientWidth;
+      const containerHeight = pageContainer.clientHeight;
+
+      // 使用封装的函数计算缩放比例
+      const scaleInfo = calculatePdfViewportScale(pdfPage, containerWidth, containerHeight);
+      if (!scaleInfo) {
+        console.error(`页面${pageNum} scale检查时重新计算scale失败`);
+        return false;
+      }
+
+      debugger
+      // 使用补偿后的 scale 创建 viewport
+      const newViewport = pdfPage.getViewport(scaleInfo.compensatedScale);
+
+      // 使用现有的或新创建的div
+      const targetDiv = existingPdfDiv || pageContainer.querySelector('.pdfViewer');
+
+      // 使用封装的函数创建新的 PDFPageView
+      const newPageView = createPdfPageView(targetDiv, pageNum, scaleInfo.compensatedScale, newViewport, eventBus);
 
-    if (containerWidth === 0 || containerHeight === 0) return;
+      // 设置PDF页面
+      newPageView.setPdfPage(pdfPage);
 
-    console.log(`重新调整页面${pageNum}尺寸: ${containerWidth}x${containerHeight}`);
+      // 存储新的页面视图实例
+      pdfViewerInstances.value.set(pageIndex, newPageView);
+
+      // 渲染页面
+      await newPageView.draw();
+
+      // 重新标记页面已渲染
+      renderedPages.value.add(pageIndex);
+      
+      console.log(`页面${pageNum} PDFPageView重新创建完成，新scale: ${scaleInfo.compensatedScale}`);
+      return true;
+    } else {
+      console.log(`页面${pageNum} scale一致，无需刷新`);
+      return false;
+    }
+
+  } catch (error) {
+    console.error(`检查页面${pageNum} scale失败:`, error);
+    return false;
+  }
+};
+
+const getPageInfoByPageNum = (pageNum) => {
+  try {
+    // 首先尝试查找翻页容器，这个容器时动态计算的
+    
+    debugger
+    let pageContainer = magazine.value.querySelector(`.turn-page-wrapper[page="${pageNum}"]`);
+    
+    // 检查容器尺寸
+    const clientWidth = pageContainer.clientWidth;
+    const clientHeight = pageContainer.clientHeight;
+    
+    if (clientWidth === 0 || clientHeight === 0) {
+      console.warn(`页面${pageNum}容器尺寸为0: ${clientWidth}x${clientHeight}`);
+      return null;
+    }
+
+    // 获取页面视图实例
+    const pageIndex = pageNum - 1;
+    const pageView = pdfViewerInstances.value.get(pageIndex);
+    if (!pageView) {
+      console.warn(`页面${pageNum}的PDFPageView实例未找到`);
+      return null;
+    }
 
-    // 获取PDF页面和视口
+    // 获取PDF页面对象
     const pdfPage = pageView.pdfPage;
+    if (!pdfPage) {
+      console.warn(`页面${pageNum}的PDF页面对象未找到`);
+      return null;
+    }
 
-    // 使用封装的函数计算缩放比例
-    const scaleInfo = calculatePdfViewportScale(pdfPage, containerWidth, containerHeight);
+    // 计算缩放比例
+    const scaleInfo = calculatePdfViewportScale(pdfPage, clientWidth, clientHeight);
     if (!scaleInfo) {
-      console.error(`页面${pageNum} resize scale 计算失败`);
-      return;
+      console.warn(`页面${pageNum} scale计算失败`);
+      return null;
     }
 
-    console.log(`页面${pageNum}尺寸调整完成，新缩放比例: ${scaleInfo.scale}`);
+    return {  
+      pageContainer,
+      pageView,
+      scaleInfo
+    };
+  } catch (error) {
+    console.error(`获取页面${pageNum}信息时出错:`, error);
+    return null;
+  }
+}
 
-    // 更新 pageView 的缩放
-    pageView.update(scaleInfo.compensatedScale);
+// 重新调整PDF页面尺寸
+const resizePdfPage = async (pageIndex) => {
+  if (!pdfViewerInstances.value.has(pageIndex)) return;
 
-    // 重新渲染页面
-    await pageView.draw();
+  const pageNum = pageIndex + 1;
+
+  try {
+
+    // 使用通用的scale检查函数
+    await checkAndUpdatePdfPageScale(pageIndex);
 
     console.log(`页面${pageNum} resize 完成`);
 
@@ -1145,7 +1317,6 @@ const resizePdfPage = async (pageIndex) => {
   }
 };
 
-// 批量重新调整所有可见PDF页面尺寸
 // 批量重新调整所有可见PDF页面尺寸
 const resizeVisiblePdfPages = async () => {
   if (!magazine.value || !isInitialized.value) return;
@@ -1160,9 +1331,17 @@ const resizeVisiblePdfPages = async () => {
     // 使用封装的函数获取可见页面索引
     const visiblePages = getVisiblePageIndexes(currentPage, totalPages, isMobile.value);
 
-    // 重新调整可见页面的尺寸
+    console.log(`开始检查可见页面: ${visiblePages.map(i => i + 1).join(', ')}`);
+
+    // 对所有可见页面进行检查和调整
     for (const pageIndex of visiblePages) {
       if (renderedPages.value.has(pageIndex)) {
+        // 已渲染的页面，检查scale是否需要调整
+        console.log(`检查已渲染页面 ${pageIndex + 1} 的scale`);
+        await resizePdfPage(pageIndex); // 使用resizePdfPage来检查已渲染页面的scale
+      } else {
+        // 未渲染的页面，重新调整尺寸
+        console.log(`调整未渲染页面 ${pageIndex + 1} 的尺寸`);
         await resizePdfPage(pageIndex);
       }
     }
@@ -1241,7 +1420,8 @@ const zoomOut = () => {
   updateZoom();
 };
 
-const updateZoom = () => {
+// 提取公共的缩放更新逻辑
+const updateZoomCommon = async (isResize = false) => {
   if (!magazine.value || !isInitialized.value) return;
 
   const $magazine = $(magazine.value);
@@ -1259,49 +1439,44 @@ const updateZoom = () => {
 
     updatePageDimensions(dimensions, $magazine);
     
-    // 使用封装的函数获取可见页面信息
-    if (processedPages.value.length > 0) {
-      const visiblePages = getVisiblePageInfo($magazine, processedPages);
-      restoreLoadedImages(visiblePages, $magazine);
+    // 如果是resize操作，调用turn.js的resize方法重新计算布局
+    if (isResize) {
+      $magazine.turn("resize");
+      // 等待DOM更新完成后再处理PDF页面
+      await nextTick();
     }
     
-    updateViewportStyles();
-  } catch (error) {
-    console.error("Error updating zoom:", error);
-  }
-};
-
-const handleResize = async () => {
-  try {
-    const $magazine = $(magazine.value);
-    if (!$magazine.length) return;
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    
-    const dimensions = calculatePageDimensions(viewportWidth, viewportHeight, zoomLevel.value);
-    if (!dimensions) return;
-
-    updatePageDimensions(dimensions, $magazine);
-    await nextTick();
-    
     // 使用封装的函数获取可见页面信息
     if (processedPages.value.length > 0) {
       const visiblePages = getVisiblePageInfo($magazine, processedPages);
       restoreLoadedImages(visiblePages, $magazine);
     }
 
+    // 处理PDF页面缩放 - 在magazine尺寸更新后重新计算scale
     if (props.isPdf && pdfInitialized.value) {
-      console.log("Resize时重新调整PDF页面尺寸");
-      await resizeVisiblePdfPages();
+      if (isResize) {
+        console.log("Resize时重新调整PDF页面尺寸和scale");
+        await resizeVisiblePdfPages();
+      } else {
+        console.log("Zoom时重新调整PDF页面尺寸和scale");
+        await resizeVisiblePdfPages();
+      }
     }
 
     updateViewportStyles();
   } catch (error) {
-    console.error("Error handling resize:", error);
+    console.error("Error updating zoom:", error);
   }
 };
 
+const updateZoom = () => {
+  updateZoomCommon(false);
+};
+
+const handleResize = async () => {
+  await updateZoomCommon(true);
+};
+
 const handleKeyDown = (e) => {
   switch (e.key) {
     case "ArrowRight":
@@ -1511,12 +1686,6 @@ const debugPageStatus = () => {
 
 // 添加防抖处理
 let resizeTimeout;
-window.addEventListener("resize", () => {
-  clearTimeout(resizeTimeout);
-  resizeTimeout = setTimeout(() => {
-    handleResize();
-  }, 250);
-});
 
 onMounted(async () => {
   // 先加载PDF.js
@@ -1550,16 +1719,33 @@ onMounted(async () => {
 
   // 根据类型选择加载方式
   if (props.isPdf && props.pdfUrl) {
+    console.log('组件挂载时加载PDF:', props.pdfUrl);
     await loadPdf();
   } else if (props.pages && props.pages.length > 0) {
+    console.log('组件挂载时加载图片');
     await loadImages();
+  } else {
+    console.log('组件挂载时无需加载内容');
   }
 
   initAudio();
   window.addEventListener("keydown", handleKeyDown);
-  window.addEventListener("resize", handleResize);
+  
+  // 添加防抖的resize监听器
+  console.log('绑定resize事件监听器');
+  window.addEventListener("resize", () => {
+    console.log('resize事件触发');
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      console.log('调用handleResize');
+      handleResize();
+    }, 250);
+  });
+  
   // Load directory images
   loadDirectoryImages();
+  
+  console.log('onMounted完成，事件绑定完成');
 });
 
 onUnmounted(() => {