Upload public.js

backend/src/routes/public.js

@@ -98,34 +98,26 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
   
   const pptDimensions = calculatePptDimensions(slide);
   
-  // 渲染幻灯片元素 - 使用相对单位，支持动态缩放
+  // 渲染幻灯片元素 - 使用原始像素值，完全保真
   const renderElements = (elements) => {
     if (!elements || elements.length === 0) return '';
     
     return elements.map(element => {
-      // 计算相对于PPT原始尺寸的百分比位置和大小
-      const leftPercent = ((element.left || 0) / pptDimensions.width) * 100;
-      const topPercent = ((element.top || 0) / pptDimensions.height) * 100;
-      const widthPercent = ((element.width || 0) / pptDimensions.width) * 100;
-      const heightPercent = ((element.height || 0) / pptDimensions.height) * 100;
-      
       const style = `
         position: absolute;
-        left: ${leftPercent}%;
-        top: ${topPercent}%;
-        width: ${widthPercent}%;
-        height: ${heightPercent}%;
+        left: ${element.left || 0}px;
+        top: ${element.top || 0}px;
+        width: ${element.width || 0}px;
+        height: ${element.height || 0}px;
         transform: rotate(${element.rotate || 0}deg);
         z-index: ${element.zIndex || 1};
       `;
       
       switch (element.type) {
         case 'text':
-          // 字体大小也需要相对于容器尺寸进行缩放
-          const fontSizePercent = ((element.fontSize || 14) / pptDimensions.height) * 100;
           return `
             <div style="${style} 
-              font-size: ${fontSizePercent}vh;
+              font-size: ${element.fontSize || 14}px;
               font-family: ${element.fontName || 'Arial'};
               color: ${element.defaultColor || '#000'};
               font-weight: ${element.bold ? 'bold' : 'normal'};
@@ -133,7 +125,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
               text-decoration: ${element.underline ? 'underline' : 'none'};
               text-align: ${element.align || 'left'};
               line-height: ${element.lineHeight || 1.2};
-              padding: 1vh;
+              padding: 10px;
               word-wrap: break-word;
               overflow: hidden;
               box-sizing: border-box;
@@ -149,7 +141,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
           `;
         case 'shape':
           const shapeStyle = element.fill ? `background-color: ${element.fill};` : '';
-          const borderStyle = element.outline ? `border: ${((element.outline.width || 1) / pptDimensions.height) * 100}vh ${element.outline.style || 'solid'} ${element.outline.color || '#000'};` : '';
+          const borderStyle = element.outline ? `border: ${element.outline.width || 1}px ${element.outline.style || 'solid'} ${element.outline.color || '#000'};` : '';
           return `
             <div style="${style} ${shapeStyle} ${borderStyle} box-sizing: border-box;"></div>
           `;
@@ -187,7 +179,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 left: 0 !important;
             }
             
-            /* Body - 填满整个窗口，黑色背景，居中显示容器 */
+            /* Body - 填满整个窗口，黑色背景，居中显示PPT */
             body {
                 width: 100vw !important;
                 height: 100vh !important;
@@ -202,20 +194,15 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 justify-content: center !important;
             }
             
-            /* PPT容器 - 保持PPT长宽比，最大化填满窗口 */
+            /* PPT容器 - 使用PPT原始尺寸 */
             .slide-container {
+                width: ${pptDimensions.width}px !important;
+                height: ${pptDimensions.height}px !important;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
                 position: relative !important;
                 overflow: hidden !important;
-                /* 尺寸将通过JavaScript动态设置 */
-            }
-            
-            /* PPT内容区域 - 完全填满容器，不需要额外缩放 */
-            .ppt-content {
-                width: 100% !important;
-                height: 100% !important;
-                position: relative !important;
-                overflow: hidden !important;
+                transform-origin: center center !important;
+                /* 缩放将通过JavaScript动态设置 */
             }
             
             /* 背景图片处理 */
@@ -268,9 +255,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
     </head>
     <body>
         <div class="slide-container" id="slideContainer">
-            <div class="ppt-content" id="pptContent">
-                ${renderElements(slide.elements)}
-            </div>
+            ${renderElements(slide.elements)}
         </div>
         
         <script>
@@ -280,65 +265,45 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 height: ${pptDimensions.height}
             };
             
-            console.log('PPT页面初始化 - 响应式元素缩放模式:', window.PPT_DIMENSIONS);
+            console.log('PPT页面初始化 - 原始尺寸整体缩放模式:', window.PPT_DIMENSIONS);
             
-            // 计算容器尺寸，保持PPT长宽比，最大化填满窗口
-            function calculateContainerSize() {
+            // 计算整体缩放比例，让PPT适应窗口大小
+            function calculateScale() {
                 const windowWidth = window.innerWidth;
                 const windowHeight = window.innerHeight;
                 const pptWidth = ${pptDimensions.width};
                 const pptHeight = ${pptDimensions.height};
                 
-                // PPT的长宽比
-                const pptAspectRatio = pptWidth / pptHeight;
-                // 窗口的长宽比
-                const windowAspectRatio = windowWidth / windowHeight;
+                // 计算缩放比例，保持PPT长宽比
+                const scaleX = windowWidth / pptWidth;
+                const scaleY = windowHeight / pptHeight;
                 
-                let containerWidth, containerHeight;
+                // 使用较小的缩放比例，确保PPT完全可见（会有黑边）
+                const scale = Math.min(scaleX, scaleY);
                 
-                if (windowAspectRatio > pptAspectRatio) {
-                    // 窗口比PPT更宽，以高度为准
-                    containerHeight = windowHeight;
-                    containerWidth = containerHeight * pptAspectRatio;
-                } else {
-                    // 窗口比PPT更高，以宽度为准
-                    containerWidth = windowWidth;
-                    containerHeight = containerWidth / pptAspectRatio;
-                }
-                
-                return {
-                    width: Math.floor(containerWidth),
-                    height: Math.floor(containerHeight)
-                };
+                return Math.min(scale, 1); // 最大不超过1（不放大）
             }
             
-            // 应用容器尺寸，PPT元素会自动适应
-            function adaptPPTToWindow() {
+            // 应用缩放变换
+            function scalePPTToFitWindow() {
                 const container = document.getElementById('slideContainer');
-                const content = document.getElementById('pptContent');
-                if (!container || !content) return;
+                if (!container) return;
                 
-                const containerSize = calculateContainerSize();
+                const scale = calculateScale();
                 
-                // 设置容器尺寸（保持PPT长宽比）
-                container.style.width = containerSize.width + 'px';
-                container.style.height = containerSize.height + 'px';
+                // 应用缩放变换
+                container.style.transform = \`scale(\${scale})\`;
                 
-                // PPT内容完全填满容器，元素使用百分比单位会自动缩放
-                content.style.width = '100%';
-                content.style.height = '100%';
-                content.style.position = 'relative';
-                
-                console.log(`容器尺寸: ${containerSize.width}x${containerSize.height}`);
-                console.log(`PPT长宽比: ${(pptDimensions.width/pptDimensions.height).toFixed(3)}, 容器长宽比: ${(containerSize.width/containerSize.height).toFixed(3)}`);
+                console.log(\`PPT整体缩放: \${scale.toFixed(3)}x (窗口: \${window.innerWidth}x\${window.innerHeight}, PPT: \${${pptDimensions.width}}x\${${pptDimensions.height}})\`);
             }
             
             // 页面加载完成后初始化
             window.addEventListener('load', function() {
                 const html = document.documentElement;
                 const body = document.body;
+                const container = document.getElementById('slideContainer');
                 
-                console.log('页面加载完成，开始响应式元素布局');
+                console.log('页面加载完成，开始整体缩放布局');
                 
                 // 确保页面元素填满窗口
                 html.style.width = '100vw';
@@ -358,8 +323,15 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 body.style.alignItems = 'center';
                 body.style.justifyContent = 'center';
                 
-                // 执行自适应布局
-                adaptPPTToWindow();
+                // 确保PPT容器使用原始尺寸
+                if (container) {
+                    container.style.width = '${pptDimensions.width}px';
+                    container.style.height = '${pptDimensions.height}px';
+                    container.style.transformOrigin = 'center center';
+                }
+                
+                // 执行整体缩放
+                scalePPTToFitWindow();
                 
                 // 禁用各种用户交互
                 document.addEventListener('wheel', function(e) {
@@ -392,19 +364,28 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                     }
                 }, { passive: false });
                 
-                console.log('响应式元素PPT页面初始化完成');
+                console.log('原始尺寸PPT页面初始化完成');
+                
+                // 验证最终效果
+                setTimeout(() => {
+                    const actualScale = container.style.transform.match(/scale\\(([^)]+)\\)/);
+                    const scaleValue = actualScale ? parseFloat(actualScale[1]) : 1;
+                    
+                    console.log(\`✅ PPT以原始尺寸(\${${pptDimensions.width}}x\${${pptDimensions.height}})显示，整体缩放: \${scaleValue.toFixed(3)}x\`);
+                    console.log('🎯 显示效果与编辑器完全一致，周围黑边正常');
+                }, 200);
             });
             
-            // 监听窗口大小变化，实时调整布局
+            // 监听窗口大小变化，实时调整缩放
             window.addEventListener('resize', function() {
-                console.log('窗口大小变化，重新计算响应式布局');
-                adaptPPTToWindow();
+                console.log('窗口大小变化，重新计算整体缩放');
+                scalePPTToFitWindow();
             });
             
             // 监听屏幕方向变化（移动设备）
             window.addEventListener('orientationchange', function() {
-                console.log('屏幕方向变化，重新计算响应式布局');
-                setTimeout(adaptPPTToWindow, 100);
+                console.log('屏幕方向变化，重新计算整体缩放');
+                setTimeout(scalePPTToFitWindow, 100);
             });
         </script>
     </body>