Spaces:

CatPtain
/

web_ppt

Running

App Files Files Community

CatPtain commited on Jun 14

Commit

c90f6fe

verified ·

1 Parent(s): e850c33

Upload public.js

Browse files

Files changed (1) hide show

backend/src/routes/public.js +55 -44

backend/src/routes/public.js CHANGED Viewed

@@ -167,7 +167,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 box-sizing: border-box !important;
             }
-            /* HTML - 填满整个窗口 */
             html {
                 width: 100vw !important;
                 height: 100vh !important;
@@ -178,7 +178,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 left: 0 !important;
             }
-            /* Body - 填满整个窗口 */
             body {
                 width: 100vw !important;
                 height: 100vh !important;
@@ -188,19 +188,25 @@ 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容器 - 响应式缩放，保持宽高比，填满窗口 */
             .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;
-                transform-origin: center center !important;
             }
             /* 背景图片处理 */
@@ -213,7 +219,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 width: 100% !important;
                 height: 100% !important;
                 background-image: url('${slide.background.image}') !important;
-                background-size: ${slide.background.imageSize || 'cover'} !important;
                 background-position: center !important;
                 background-repeat: no-repeat !important;
                 z-index: 0 !important;
@@ -253,7 +259,9 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
     </head>
     <body>
         <div class="slide-container" id="slideContainer">
-            ${renderElements(slide.elements)}
         </div>
         <script>
@@ -263,40 +271,42 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 height: ${pptDimensions.height}
             };
-            console.log('PPT页面初始化 - 响应式填充模式:', window.PPT_DIMENSIONS);
-            // 响应式缩放函数 - PPT内容自动填满窗口
-            function resizePPTToFitWindow() {
                 const container = document.getElementById('slideContainer');
-                if (!container) return;
                 const windowWidth = window.innerWidth;
                 const windowHeight = window.innerHeight;
                 const pptWidth = ${pptDimensions.width};
                 const pptHeight = ${pptDimensions.height};
-                // 计算缩放比例，使PPT完全填满窗口
                 const scaleX = windowWidth / pptWidth;
                 const scaleY = windowHeight / pptHeight;
-                // 使用较大的缩放比例，确保PPT内容填满窗口（可能会有部分内容被裁切）
                 const scale = Math.max(scaleX, scaleY);
-                // 应用缩放变换
-                container.style.transform = \`scale(\${scale})\`;
-                // 如果需要居中显示（当一个方向填满，另一个方向可能会超出）
                 const scaledWidth = pptWidth * scale;
                 const scaledHeight = pptHeight * scale;
-                // 计算偏移，使内容居中
-                const offsetX = (windowWidth - scaledWidth) / 2 / scale;
-                const offsetY = (windowHeight - scaledHeight) / 2 / scale;
-                container.style.left = offsetX + 'px';
-                container.style.top = offsetY + 'px';
-                console.log(\`窗口尺寸: \${windowWidth}x\${windowHeight}, PPT尺寸: \${pptWidth}x\${pptHeight}, 缩放比例: \${scale.toFixed(3)}, 偏移: \${offsetX.toFixed(1)}, \${offsetY.toFixed(1)}\`);
             }
             // 页面加载完成后初始化
@@ -304,36 +314,37 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 const html = document.documentElement;
                 const body = document.body;
                 const container = document.getElementById('slideContainer');
-                console.log('页面加载完成，开始响应式缩放');
                 // 确保页面元素填满窗口
                 html.style.width = '100vw';
                 html.style.height = '100vh';
                 html.style.background = '#000000';
                 html.style.overflow = 'hidden';
                 body.style.width = '100vw';
                 body.style.height = '100vh';
                 body.style.background = '#000000';
                 body.style.overflow = 'hidden';
-                body.style.display = 'flex';
-                body.style.alignItems = 'center';
-                body.style.justifyContent = 'center';
                 body.style.margin = '0';
                 body.style.padding = '0';
-                // 初始化PPT容器
                 if (container) {
-                    container.style.width = '${pptDimensions.width}px';
-                    container.style.height = '${pptDimensions.height}px';
-                    container.style.position = 'relative';
                     container.style.overflow = 'hidden';
-                    container.style.transformOrigin = 'center center';
                 }
-                // 执行初始缩放
-                resizePPTToFitWindow();
                 // 禁用各种用户交互
                 document.addEventListener('wheel', function(e) {
@@ -366,19 +377,19 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                     }
                 }, { passive: false });
-                console.log('响应式PPT页面初始化完成');
             });
             // 监听窗口大小变化，实时调整PPT大小
             window.addEventListener('resize', function() {
-                console.log('窗口大小变化，重新调整PPT尺寸');
-                resizePPTToFitWindow();
             });
             // 监听屏幕方向变化（移动设备）
             window.addEventListener('orientationchange', function() {
-                console.log('屏幕方向变化，重新调整PPT尺寸');
-                setTimeout(resizePPTToFitWindow, 100); // 延迟一点时间等待方向变化完成
             });
         </script>
     </body>

                 box-sizing: border-box !important;
             }
+            /* HTML - 填满整个窗口，黑色背景 */
             html {
                 width: 100vw !important;
                 height: 100vh !important;
                 left: 0 !important;
             }
+            /* Body - 填满整个窗口，黑色背景 */
             body {
                 width: 100vw !important;
                 height: 100vh !important;
                 position: fixed !important;
                 top: 0 !important;
                 left: 0 !important;
             }
+            /* 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;
                 overflow: hidden !important;
+            }
+            /* PPT内容区域 - 自适应容器尺寸 */
+            .ppt-content {
+                width: 100% !important;
+                height: 100% !important;
+                position: relative !important;
+                transform-origin: top left !important;
             }
             /* 背景图片处理 */
                 width: 100% !important;
                 height: 100% !important;
                 background-image: url('${slide.background.image}') !important;
+                background-size: cover !important;
                 background-position: center !important;
                 background-repeat: no-repeat !important;
                 z-index: 0 !important;
     </head>
     <body>
         <div class="slide-container" id="slideContainer">
+            <div class="ppt-content" id="pptContent">
+                ${renderElements(slide.elements)}
+            </div>
         </div>
         <script>
                 height: ${pptDimensions.height}
             };
+            console.log('PPT页面初始化 - 自适应填充模式:', window.PPT_DIMENSIONS);
+            // 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 pptWidth = ${pptDimensions.width};
                 const pptHeight = ${pptDimensions.height};
+                // 计算缩放比例
                 const scaleX = windowWidth / pptWidth;
                 const scaleY = windowHeight / pptHeight;
+                // 使用较大的缩放比例，确保PPT内容完全填满窗口
                 const scale = Math.max(scaleX, scaleY);
+                // 应用缩放变换到PPT内容
+                content.style.transform = \`scale(\${scale})\`;
+                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.position = 'absolute';
+                console.log(\`自适应缩放: 窗口(\${windowWidth}x\${windowHeight}) PPT(\${pptWidth}x\${pptHeight}) 缩放(\${scale.toFixed(3)}) 偏移(\${offsetX.toFixed(1)}, \${offsetY.toFixed(1)})\`);
             }
             // 页面加载完成后初始化
                 const html = document.documentElement;
                 const body = document.body;
                 const container = document.getElementById('slideContainer');
+                const content = document.getElementById('pptContent');
+                console.log('页面加载完成，开始自适应缩放');
                 // 确保页面元素填满窗口
                 html.style.width = '100vw';
                 html.style.height = '100vh';
                 html.style.background = '#000000';
                 html.style.overflow = 'hidden';
+                html.style.margin = '0';
+                html.style.padding = '0';
                 body.style.width = '100vw';
                 body.style.height = '100vh';
                 body.style.background = '#000000';
                 body.style.overflow = 'hidden';
                 body.style.margin = '0';
                 body.style.padding = '0';
+                // 确保容器填满窗口
                 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();
                 // 禁用各种用户交互
                 document.addEventListener('wheel', function(e) {
                     }
                 }, { passive: false });
+                console.log('自适应PPT页面初始化完成');
             });
             // 监听窗口大小变化，实时调整PPT大小
             window.addEventListener('resize', function() {
+                console.log('窗口大小变化，重新自适应PPT尺寸');
+                adaptPPTToWindow();
             });
             // 监听屏幕方向变化（移动设备）
             window.addEventListener('orientationchange', function() {
+                console.log('屏幕方向变化，重新自适应PPT尺寸');
+                setTimeout(adaptPPTToWindow, 100);
             });
         </script>
     </body>