fix:修复不同比例动态计算，修复文字层的叠加问题

public/pdfjs-dist/web/pdf_viewer.css

@@ -15,11 +15,10 @@
 
 .textLayer {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  right: auto;
-  bottom: auto;
+  left: 0;
+  top: 0;
+  width: 100% !important;
+  height: 100% !important;
   overflow: hidden;
   opacity: 0.2;
   line-height: 1.0;
@@ -303,21 +302,22 @@
   cursor: pointer;
 }
 
-.pdfViewer .canvasWrapper {
+.pdfViewer {
   overflow: hidden;
-  width: 100%;
-  height: 100%;
+  align-self: unset;
+  align-content: center;
+}
 
+.pdfViewer .canvasWrapper {
+  overflow: hidden;
 }
 
 .pdfViewer .page {
   direction: ltr;
-  width: 816px;
-  height: 1056px;
   /* margin: 1px auto -8px auto; */
   position: relative;
   overflow: visible;
-  border: 9px solid transparent;
+  /* border: 9px solid transparent; */
   background-clip: content-box;
   -o-border-image: url(images/shadow.png) 9 9 repeat;
   border-image: url(images/shadow.png) 9 9 repeat;

src/components/BookReader/index.vue

@@ -579,26 +579,44 @@ const initBook = async () => {
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
 
-  // 移动端使用不同的尺寸计算
+  // 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
+  const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍)
+  
+  // 计算基于宽度的最大尺寸
+  const maxWidth = viewportWidth / 2 - 50;
+  const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
+  
+  // 计算基于高度的最大尺寸
+  const maxHeight = viewportHeight - 100;
+  const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
+  
   let pageWidth, pageHeight;
-  if (isMobile.value) {
-    // 移动端：宽度等于设备宽度减去边距
-    pageWidth = viewportWidth - 20; // 左右各留10px边距
-    // 高度按比例计算（假设标准比例为 4:3）
-    pageHeight = (pageWidth * 4) / 3;
-    // 确保高度不超过视口高度
-    if (pageHeight > viewportHeight - 100) {
-      // 上下各留50px边距
-      pageHeight = viewportHeight - 92;
-      // 重新计算宽度以保持比例
-      pageWidth = (pageHeight * 3) / 4;
-    }
+  
+  // 选择能撑满一边的方案
+  if (maxHeightByWidth <= maxHeight) {
+    // 宽度能撑满，高度也满足
+    pageWidth = maxWidth;
+    pageHeight = maxHeightByWidth;
+    console.log(`选择宽度撑满方案: 宽度=${pageWidth}, 高度=${pageHeight}`);
   } else {
-    // 桌面端保持原有逻辑
-    pageWidth = Math.min(600, viewportWidth / 2 - 50);
-    pageHeight = Math.min(800, viewportHeight - 100);
+    // 高度能撑满，宽度也满足
+    pageWidth = maxWidthByHeight;
+    pageHeight = maxHeight;
+    console.log(`选择高度撑满方案: 宽度=${pageWidth}, 高度=${pageHeight}`);
   }
   
+  // 确保不超过移动端的限制
+  if (isMobile.value) {
+    pageWidth = Math.min(pageWidth, viewportWidth - 20);
+    pageHeight = pageWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
+    console.log(`移动端调整后: 宽度=${pageWidth}, 高度=${pageHeight}`);
+  }
+  
+  // 添加调试信息
+  console.log(`视口尺寸: ${viewportWidth}x${viewportHeight}`);
+  console.log(`计算出的页面尺寸: ${pageWidth}x${pageHeight}, 比例: ${(pageWidth/pageHeight).toFixed(3)}`);
+  console.log(`PDF标准比例: ${PDF_RATIO}, 实际比例: ${(pageWidth/pageHeight).toFixed(3)}`);
+
   await nextTick();
 
   try {
@@ -644,6 +662,7 @@ const initBook = async () => {
     });
 
     // 移动端使用单页显示
+    console.log(`turn.js初始化参数: 宽度=${isMobile.value ? pageWidth : pageWidth * 2}, 高度=${pageHeight}`);
     $magazine.turn({
       width: isMobile.value ? pageWidth : pageWidth * 2,
       height: pageHeight,
@@ -859,15 +878,8 @@ const renderPdfPage = async (pageIndex) => {
     // 创建页面div元素
     // todo 这里可能能够优化一下
     const pageDiv = document.createElement('div');
-    pageDiv.className = 'pdf-page-container';
+    pageDiv.className = 'pdfViewer';
     pageDiv.setAttribute('data-page-number', pageNum);
-    pageDiv.style.position = 'relative';
-    pageDiv.style.width = '100%';
-    pageDiv.style.height = '100%';
-    pageDiv.style.overflow = 'hidden';
-    pageDiv.style.display = 'flex';
-    pageDiv.style.alignItems = 'center';
-    pageDiv.style.justifyContent = 'center';
     
     // 将页面div添加到容器中
     pageContainer.appendChild(pageDiv);
@@ -902,29 +914,25 @@ const renderPdfPage = async (pageIndex) => {
 
     console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`);
 
-    // 设置页面div的尺寸
-    // 这里可能能够优化
-    // pageDiv.style.width = `${containerWidth}px`;
-    // pageDiv.style.height = `${containerHeight}px`;
-
     // 创建PDF页面视图
     const rawPdfDocument = toRaw(pdfDocument.value);
     const pdfPage = await rawPdfDocument.getPage(pageNum);
 
     // 先计算缩放比例
     const originalViewport = pdfPage.getViewport({ scale: 1.0 });
-    const scaleX = containerWidth / originalViewport.width;
-    const scaleY = containerHeight / originalViewport.height;
-    const scale = Math.min(scaleX, scaleY);
+    const viewportWidth = originalViewport.viewBox[2];
+    const viewportHeight = originalViewport.viewBox[3];
+    const scaleX = containerWidth / viewportWidth;
+    const scaleY = containerHeight / viewportHeight;
+    const scale =  Math.max(scaleX, scaleY);
 
-    // 创建基于缩放比例的视口
-    const scaledViewport = pdfPage.getViewport({ scale: scale });
+    const cssUnits = pdfjsViewer.CSS_UNITS || (96.0 / 72.0);
 
-    // 源码可以设置宽高，但是对文字层和page层还是不按照这个来。
-    // scaledViewport.width = containerWidth;
-    // scaledViewport.height = containerHeight;
+    // 计算补偿后的 scale
+    const compensatedScale = scale / cssUnits;
 
-    console.log(`PDF原始尺寸: ${originalViewport.width}x${originalViewport.height}, 缩放比例: ${scale}, 缩放后尺寸: ${scaledViewport.width}x${scaledViewport.height}`);
+    // 3. 重新创建 viewport 和 pageView
+    const newViewport = pdfPage.getViewport(scale);
 
     // 创建PDFPageView实例
     if (!pdfjsViewer) {
@@ -933,8 +941,8 @@ const renderPdfPage = async (pageIndex) => {
     const pageView = new pdfjsViewer.PDFPageView({
       container: pageDiv,
       id: pageNum - 1,
-      scale: 1.0, // 使用1.0，因为我们已经通过scaledViewport处理了缩放
-      defaultViewport: scaledViewport,
+      scale: compensatedScale, // 使用1.0，因为我们已经通过scaledViewport处理了缩放
+      defaultViewport: newViewport,
       eventBus: toRaw(eventBus.value),
       textLayerMode: 1, // 根据开关状态设置
       annotationMode: 0, // 1=ENABLE
@@ -942,7 +950,8 @@ const renderPdfPage = async (pageIndex) => {
       renderer: "canvas",
       enableXfa: false,
       l10n: null,
-      textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()
+      textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(),
+      useOnlyCssZoom: false  // 添加这一行
     });
 
     // 设置PDF页面
@@ -975,17 +984,6 @@ const renderPdfPage = async (pageIndex) => {
       if (canvas) {
         console.log(`Canvas CSS尺寸: ${elementStyle.width}x${elementStyle.height}, 实际尺寸: ${canvas.width}x${canvas.height}`);
       
-        // 确保canvas尺寸正确
-        if (Math.abs(rect.width - containerWidth) > 5 || Math.abs(rect.height - containerHeight) > 5) {
-          console.warn(`页面${pageNum}尺寸不匹配，Canvas: ${rect.width}x${rect.height}, 容器: ${containerWidth}x${containerHeight}`);
-          
-          // 尝试强制调整canvas尺寸
-          if (Math.abs(canvas.width - scaledViewport.width) > 5) {
-            console.log(`强制调整Canvas尺寸从 ${canvas.width}x${canvas.height} 到 ${scaledViewport.width}x${scaledViewport.height}`);
-            canvas.style.width = `${scaledViewport.width}px`;
-            canvas.style.height = `${scaledViewport.height}px`;
-          }
-        }
       }
     }
 
@@ -1172,11 +1170,37 @@ const updateZoom = () => {
       }
     }
 
-    // 计算新的尺寸
+    // 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    const baseWidth = Math.min(600, viewportWidth / 2 - 50);
-    const baseHeight = Math.min(800, viewportHeight - 100);
+    const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍)
+    
+    // 计算基于宽度的最大尺寸
+    const maxWidth = viewportWidth / 2 - 50;
+    const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
+    
+    // 计算基于高度的最大尺寸
+    const maxHeight = viewportHeight - 100;
+    const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
+    
+    let baseWidth, baseHeight;
+    
+    // 选择能撑满一边的方案
+    if (maxHeightByWidth <= maxHeight) {
+      // 宽度能撑满，高度也满足
+      baseWidth = maxWidth;
+      baseHeight = maxHeightByWidth;
+    } else {
+      // 高度能撑满，宽度也满足
+      baseWidth = maxWidthByHeight;
+      baseHeight = maxHeight;
+    }
+    
+    // 确保不超过移动端的限制
+    if (isMobile.value) {
+      baseWidth = Math.min(baseWidth, viewportWidth - 20);
+      baseHeight = baseWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
+    }
 
     // 应用缩放
     const scaledWidth = baseWidth * zoomLevel.value;
@@ -1256,11 +1280,40 @@ const handleResize = async () => {
         }
       }
 
-      // 计算新的尺寸
+      // 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
-      const baseWidth = Math.min(600, viewportWidth / 2 - 50);
-      const baseHeight = Math.min(800, viewportHeight - 100);
+      const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍)
+      
+      // 计算基于宽度的最大尺寸
+      const maxWidth = viewportWidth / 2 - 50;
+      const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
+      
+      // 计算基于高度的最大尺寸
+      const maxHeight = viewportHeight - 100;
+      const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
+      
+      let baseWidth, baseHeight;
+      
+      // 选择能撑满一边的方案
+      if (maxHeightByWidth <= maxHeight) {
+        // 宽度能撑满，高度也满足
+        baseWidth = maxWidth;
+        baseHeight = maxHeightByWidth;
+        console.log(`Resize选择宽度撑满方案: 宽度=${baseWidth}, 高度=${baseHeight}`);
+      } else {
+        // 高度能撑满，宽度也满足
+        baseWidth = maxWidthByHeight;
+        baseHeight = maxHeight;
+        console.log(`Resize选择高度撑满方案: 宽度=${baseWidth}, 高度=${baseHeight}`);
+      }
+      
+      // 确保不超过移动端的限制
+      if (isMobile.value) {
+        baseWidth = Math.min(baseWidth, viewportWidth - 20);
+        baseHeight = baseWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
+        console.log(`Resize移动端调整后: 宽度=${baseWidth}, 高度=${baseHeight}`);
+      }
 
       // 应用缩放
       const scaledWidth = baseWidth * currentZoom;
@@ -1287,6 +1340,12 @@ const handleResize = async () => {
         }
       });
 
+      // 如果是PDF模式，重新调整PDF页面尺寸
+      if (props.isPdf && pdfInitialized.value) {
+        console.log("Resize时重新调整PDF页面尺寸");
+        await resizeVisiblePdfPages();
+      }
+
       // 更新视口样式
       const $viewport = $(".magazine-viewport");
       $viewport.css({