Upload public.js

backend/src/routes/public.js

@@ -178,7 +178,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 left: 0 !important;
             }
             
-            /* Body - 填满整个窗口，黑色背景 */
+            /* Body - 填满整个窗口，黑色背景，居中显示容器 */
             body {
                 width: 100vw !important;
                 height: 100vh !important;
@@ -188,20 +188,20 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 position: fixed !important;
                 top: 0 !important;
                 left: 0 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
             }
             
-            /* PPT容器 - 完全填满窗口，无边距 */
+            /* PPT容器 - 保持PPT长宽比，最大化填满窗口 */
             .slide-container {
-                width: 100vw !important;
-                height: 100vh !important;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
-                position: fixed !important;
-                top: 0 !important;
-                left: 0 !important;
+                position: relative !important;
                 overflow: hidden !important;
+                /* 尺寸将通过JavaScript动态设置 */
             }
             
-            /* PPT内容区域 - 自适应容器尺寸 */
+            /* PPT内容区域 - 完全填满容器 */
             .ppt-content {
                 width: 100% !important;
                 height: 100% !important;
@@ -271,42 +271,69 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 height: ${pptDimensions.height}
             };
             
-            console.log('PPT页面初始化 - 自适应填充模式:', window.PPT_DIMENSIONS);
+            console.log('PPT页面初始化 - 长宽比匹配模式:', window.PPT_DIMENSIONS);
+            
+            // 计算容器尺寸，保持PPT长宽比，最大化填满窗口
+            function calculateContainerSize() {
+                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;
+                
+                let containerWidth, containerHeight;
+                
+                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)
+                };
+            }
             
-            // PPT内容自适应窗口尺寸函数
+            // 应用容器尺寸和PPT内容缩放
             function adaptPPTToWindow() {
                 const container = document.getElementById('slideContainer');
                 const content = document.getElementById('pptContent');
                 if (!container || !content) return;
                 
-                const windowWidth = window.innerWidth;
-                const windowHeight = window.innerHeight;
+                const containerSize = calculateContainerSize();
                 const pptWidth = ${pptDimensions.width};
                 const pptHeight = ${pptDimensions.height};
                 
-                // 计算缩放比例
-                const scaleX = windowWidth / pptWidth;
-                const scaleY = windowHeight / pptHeight;
+                // 设置容器尺寸（保持PPT长宽比）
+                container.style.width = containerSize.width + 'px';
+                container.style.height = containerSize.height + 'px';
                 
-                // 使用较大的缩放比例，确保PPT内容完全填满窗口
-                const scale = Math.max(scaleX, scaleY);
+                // 计算PPT内容的缩放比例
+                const scaleX = containerSize.width / pptWidth;
+                const scaleY = containerSize.height / pptHeight;
                 
-                // 应用缩放变换到PPT内容
-                content.style.transform = \`scale(\${scale})\`;
+                // 由于容器已经保持了PPT的长宽比，scaleX和scaleY应该相等
+                const scale = Math.min(scaleX, scaleY);
+                
+                // 设置PPT内容尺寸和缩放
                 content.style.width = pptWidth + 'px';
                 content.style.height = pptHeight + 'px';
-                
-                // 计算居中偏移
-                const scaledWidth = pptWidth * scale;
-                const scaledHeight = pptHeight * scale;
-                const offsetX = (windowWidth - scaledWidth) / 2;
-                const offsetY = (windowHeight - scaledHeight) / 2;
-                
-                content.style.left = offsetX + 'px';
-                content.style.top = offsetY + 'px';
+                content.style.transform = \`scale(\${scale})\`;
                 content.style.position = 'absolute';
+                content.style.top = '0';
+                content.style.left = '0';
                 
-                console.log(\`自适应缩放: 窗口(\${windowWidth}x\${windowHeight}) PPT(\${pptWidth}x\${pptHeight}) 缩放(\${scale.toFixed(3)}) 偏移(\${offsetX.toFixed(1)}, \${offsetY.toFixed(1)})\`);
+                console.log(\`容器尺寸: \${containerSize.width}x\${containerSize.height}, PPT原始: \${pptWidth}x\${pptHeight}, 缩放: \${scale.toFixed(3)}\`);
+                console.log(\`PPT长宽比: \${(pptWidth/pptHeight).toFixed(3)}, 容器长宽比: \${(containerSize.width/containerSize.height).toFixed(3)}\`);
             }
             
             // 页面加载完成后初始化
@@ -316,7 +343,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 const container = document.getElementById('slideContainer');
                 const content = document.getElementById('pptContent');
                 
-                console.log('页面加载完成，开始自适应缩放');
+                console.log('页面加载完成，开始长宽比匹配布局');
                 
                 // 确保页面元素填满窗口
                 html.style.width = '100vw';
@@ -332,18 +359,11 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 body.style.overflow = 'hidden';
                 body.style.margin = '0';
                 body.style.padding = '0';
+                body.style.display = 'flex';
+                body.style.alignItems = 'center';
+                body.style.justifyContent = 'center';
                 
-                // 确保容器填满窗口
-                if (container) {
-                    container.style.width = '100vw';
-                    container.style.height = '100vh';
-                    container.style.position = 'fixed';
-                    container.style.top = '0';
-                    container.style.left = '0';
-                    container.style.overflow = 'hidden';
-                }
-                
-                // 执行自适应缩放
+                // 执行自适应布局
                 adaptPPTToWindow();
                 
                 // 禁用各种用户交互
@@ -377,18 +397,18 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                     }
                 }, { passive: false });
                 
-                console.log('自适应PPT页面初始化完成');
+                console.log('长宽比匹配PPT页面初始化完成');
             });
             
-            // 监听窗口大小变化，实时调整PPT大小
+            // 监听窗口大小变化，实时调整布局
             window.addEventListener('resize', function() {
-                console.log('窗口大小变化，重新自适应PPT尺寸');
+                console.log('窗口大小变化，重新计算长宽比匹配布局');
                 adaptPPTToWindow();
             });
             
             // 监听屏幕方向变化（移动设备）
             window.addEventListener('orientationchange', function() {
-                console.log('屏幕方向变化，重新自适应PPT尺寸');
+                console.log('屏幕方向变化，重新计算长宽比匹配布局');
                 setTimeout(adaptPPTToWindow, 100);
             });
         </script>