Spaces:

CatPtain
/

web_ppt

Running

App Files Files Community

CatPtain commited on Jun 14

Commit

9cae52d

verified ·

1 Parent(s): d58052f

Upload public.js

Browse files

Files changed (1) hide show

backend/src/routes/public.js +110 -189

backend/src/routes/public.js CHANGED Viewed

@@ -155,19 +155,19 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=${pptDimensions.width}, height=${pptDimensions.height}, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
         <title>${title} - 第${slideIndex + 1}页</title>
         <style>
-            /* 全局重置 - 完全消除所有边距和填充 */
-            * {
                 margin: 0 !important;
                 padding: 0 !important;
                 box-sizing: border-box !important;
-                border: none !important;
-                outline: none !important;
             }
-            /* HTML根元素 - 严格设置为PPT精确尺寸 */
             html {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
@@ -175,18 +175,11 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 min-height: ${pptDimensions.height}px !important;
                 max-width: ${pptDimensions.width}px !important;
                 max-height: ${pptDimensions.height}px !important;
                 overflow: hidden !important;
-                background: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
-                position: fixed !important;
-                top: 0 !important;
-                left: 0 !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                border: none !important;
-                outline: none !important;
             }
-            /* Body元素 - 严格设置为PPT精确尺寸 */
             body {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
@@ -194,37 +187,21 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 min-height: ${pptDimensions.height}px !important;
                 max-width: ${pptDimensions.width}px !important;
                 max-height: ${pptDimensions.height}px !important;
                 overflow: hidden !important;
                 font-family: 'Microsoft YaHei', Arial, sans-serif !important;
-                background: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
-                position: fixed !important;
-                top: 0 !important;
-                left: 0 !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                border: none !important;
-                outline: none !important;
             }
-            /* PPT容器 - 严格设置为PPT精确尺寸，完全填充 */
             .slide-container {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
-                min-width: ${pptDimensions.width}px !important;
-                min-height: ${pptDimensions.height}px !important;
-                max-width: ${pptDimensions.width}px !important;
-                max-height: ${pptDimensions.height}px !important;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
-                position: fixed !important;
                 top: 0 !important;
                 left: 0 !important;
                 overflow: hidden !important;
-                transform: none !important;
-                transform-origin: top left !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                border: none !important;
-                outline: none !important;
                 z-index: 1 !important;
             }
@@ -246,20 +223,16 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
             ` : ''}
             /* 隐藏所有滚动条 */
-            html::-webkit-scrollbar,
-            body::-webkit-scrollbar,
-            *::-webkit-scrollbar {
                 display: none !important;
-                width: 0 !important;
-                height: 0 !important;
             }
-            /* Firefox滚动条���藏 */
             html {
                 scrollbar-width: none !important;
             }
-            /* 禁用文本选择和拖拽 */
             * {
                 -webkit-user-select: none !important;
                 -moz-user-select: none !important;
@@ -272,31 +245,15 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 user-drag: none !important;
             }
-            /* 禁用所有可能的缩放和调整 */
             body {
                 zoom: 1 !important;
                 -webkit-text-size-adjust: 100% !important;
                 -ms-text-size-adjust: 100% !important;
             }
         </style>
-        <script>
-            // PPT尺寸信息 - 用于截图服务和JavaScript处理
-            window.PPT_DIMENSIONS = {
-                width: ${pptDimensions.width},
-                height: ${pptDimensions.height}
-            };
-            // 强制设置viewport尺寸
-            const viewportMeta = document.querySelector('meta[name="viewport"]');
-            if (viewportMeta) {
-                viewportMeta.setAttribute('content', \`width=\${window.PPT_DIMENSIONS.width}, height=\${window.PPT_DIMENSIONS.height}, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover\`);
-            }
-            console.log('PPT页面初始化 - 固定尺寸模式:', {
-                dimensions: window.PPT_DIMENSIONS,
-                userAgent: navigator.userAgent
-            });
-        </script>
     </head>
     <body>
         <div class="slide-container" id="slideContainer">
@@ -304,88 +261,74 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
         </div>
         <script>
-            // 页面加载完成后的初始化 - 确保完全精确的尺寸
             window.addEventListener('load', function() {
-                const container = document.getElementById('slideContainer');
                 const html = document.documentElement;
                 const body = document.body;
-                // 强制设置精确尺寸
-                const exactWidth = ${pptDimensions.width};
-                const exactHeight = ${pptDimensions.height};
-                const backgroundColor = '${slide.background?.color || theme.backgroundColor || '#ffffff'}';
-                console.log('强制设置页面精确尺寸:', exactWidth + 'x' + exactHeight);
-                // 应用固定尺寸样式 - 完全消除白边
-                const applyExactSize = (element, width, height) => {
-                    if (!element) return;
-                    element.style.cssText = \`
-                        width: \${width}px !important;
-                        height: \${height}px !important;
-                        min-width: \${width}px !important;
-                        min-height: \${height}px !important;
-                        max-width: \${width}px !important;
-                        max-height: \${height}px !important;
-                        overflow: hidden !important;
-                        margin: 0 !important;
-                        padding: 0 !important;
-                        border: none !important;
-                        outline: none !important;
-                        position: fixed !important;
-                        top: 0 !important;
-                        left: 0 !important;
-                        transform: none !important;
-                        transform-origin: top left !important;
-                        background: \${backgroundColor} !important;
-                        box-sizing: border-box !important;
-                    \`;
-                };
-                // 设置HTML和Body元素
-                applyExactSize(html, exactWidth, exactHeight);
-                applyExactSize(body, exactWidth, exactHeight);
-                // 设置容器元素
                 if (container) {
-                    container.style.cssText = \`
-                        width: \${exactWidth}px !important;
-                        height: \${exactHeight}px !important;
-                        min-width: \${exactWidth}px !important;
-                        min-height: \${exactHeight}px !important;
-                        max-width: \${exactWidth}px !important;
-                        max-height: \${exactHeight}px !important;
-                        position: fixed !important;
-                        top: 0 !important;
-                        left: 0 !important;
-                        overflow: hidden !important;
-                        margin: 0 !important;
-                        padding: 0 !important;
-                        border: none !important;
-                        outline: none !important;
-                        transform: none !important;
-                        box-shadow: none !important;
-                        z-index: 1 !important;
-                        background-color: \${backgroundColor} !important;
-                    \`;
                 }
-                // 禁用所有可能的缩放和调整
                 document.addEventListener('wheel', function(e) {
-                    if (e.ctrlKey) {
-                        e.preventDefault();
-                    }
                 }, { passive: false });
-                // 禁用触摸缩放
-                document.addEventListener('touchstart', function(e) {
-                    if (e.touches.length > 1) {
                         e.preventDefault();
                     }
-                }, { passive: false });
-                // 禁用双击缩放
                 let lastTouchEnd = 0;
                 document.addEventListener('touchend', function(e) {
                     const now = new Date().getTime();
@@ -395,84 +338,62 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                     lastTouchEnd = now;
                 }, false);
-                // 禁用右键菜单
-                document.addEventListener('contextmenu', function(e) {
-                    e.preventDefault();
-                }, false);
-                // 禁用F11全屏
-                document.addEventListener('keydown', function(e) {
-                    if (e.key === 'F11') {
                         e.preventDefault();
                     }
-                }, false);
-                console.log('固定尺寸模式样式应用完成，精确尺寸:', exactWidth + 'x' + exactHeight);
-                // 最终验证尺寸 - 确保网页分辨率与PPT分辨率完全一致
                 setTimeout(() => {
                     const actualDimensions = {
                         html: {
-                            width: html.offsetWidth,
-                            height: html.offsetHeight,
-                            clientWidth: html.clientWidth,
-                            clientHeight: html.clientHeight
                         },
                         body: {
-                            width: body.offsetWidth,
-                            height: body.offsetHeight,
-                            clientWidth: body.clientWidth,
-                            clientHeight: body.clientHeight
-                        },
-                        container: {
-                            width: container ? container.offsetWidth : 0,
-                            height: container ? container.offsetHeight : 0,
-                            clientWidth: container ? container.clientWidth : 0,
-                            clientHeight: container ? container.clientHeight : 0
                         },
-                        viewport: {
-                            width: window.innerWidth,
-                            height: window.innerHeight
-                        }
                     };
-                    console.log('最终页面尺寸验证:', actualDimensions);
-                    console.log('PPT目标尺寸:', window.PPT_DIMENSIONS);
-                    // 检查是否存在尺寸不一致的情况
-                    const htmlSizeMatch = actualDimensions.html.width === window.PPT_DIMENSIONS.width &&
-                                         actualDimensions.html.height === window.PPT_DIMENSIONS.height;
-                    const bodySizeMatch = actualDimensions.body.width === window.PPT_DIMENSIONS.width &&
-                                         actualDimensions.body.height === window.PPT_DIMENSIONS.height;
-                    const containerSizeMatch = container ?
-                        (actualDimensions.container.width === window.PPT_DIMENSIONS.width &&
-                         actualDimensions.container.height === window.PPT_DIMENSIONS.height) : true;
-                    if (!htmlSizeMatch || !bodySizeMatch || !containerSizeMatch) {
-                        console.warn('检测到尺寸不一致，可能出现白边问题');
-                        console.warn('HTML尺寸匹配:', htmlSizeMatch);
-                        console.warn('Body尺寸匹配:', bodySizeMatch);
-                        console.warn('容器尺寸匹配:', containerSizeMatch);
-                        // 尝试强制修正
-                        if (!htmlSizeMatch) {
-                            html.style.width = window.PPT_DIMENSIONS.width + 'px';
-                            html.style.height = window.PPT_DIMENSIONS.height + 'px';
-                        }
-                        if (!bodySizeMatch) {
-                            body.style.width = window.PPT_DIMENSIONS.width + 'px';
-                            body.style.height = window.PPT_DIMENSIONS.height + 'px';
-                        }
-                        if (container && !containerSizeMatch) {
-                            container.style.width = window.PPT_DIMENSIONS.width + 'px';
-                            container.style.height = window.PPT_DIMENSIONS.height + 'px';
-                        }
-                        console.log('已尝试强制修正尺寸不一致问题');
                     } else {
-                        console.log('✅ 页面尺寸验证通过，网页分辨率与PPT分辨率完全一致，无白边');
                     }
-                }, 100);
             });
         </script>
     </body>

     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=${pptDimensions.width}, height=${pptDimensions.height}, initial-scale=1.0, user-scalable=no">
         <title>${title} - 第${slideIndex + 1}页</title>
         <style>
+            /* 完全重置所有默认样式 */
+            *, *::before, *::after {
                 margin: 0 !important;
                 padding: 0 !important;
+                border: 0 !important;
+                outline: 0 !important;
                 box-sizing: border-box !important;
             }
+            /* HTML - 设置为PPT精确尺寸，黑色背景 */
             html {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
                 min-height: ${pptDimensions.height}px !important;
                 max-width: ${pptDimensions.width}px !important;
                 max-height: ${pptDimensions.height}px !important;
+                background: #000000 !important;
                 overflow: hidden !important;
             }
+            /* Body - 设置为PPT精确尺寸，黑色背景 */
             body {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
                 min-height: ${pptDimensions.height}px !important;
                 max-width: ${pptDimensions.width}px !important;
                 max-height: ${pptDimensions.height}px !important;
+                background: #000000 !important;
                 overflow: hidden !important;
                 font-family: 'Microsoft YaHei', Arial, sans-serif !important;
+                position: relative !important;
             }
+            /* PPT容器 - 完全填充整个页面 */
             .slide-container {
                 width: ${pptDimensions.width}px !important;
                 height: ${pptDimensions.height}px !important;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
+                position: absolute !important;
                 top: 0 !important;
                 left: 0 !important;
                 overflow: hidden !important;
                 z-index: 1 !important;
             }
             ` : ''}
             /* 隐藏所有滚动条 */
+            ::-webkit-scrollbar {
                 display: none !important;
             }
             html {
                 scrollbar-width: none !important;
+                -ms-overflow-style: none !important;
             }
+            /* 禁用用户交互 */
             * {
                 -webkit-user-select: none !important;
                 -moz-user-select: none !important;
                 user-drag: none !important;
             }
+            /* 禁用缩放 */
             body {
                 zoom: 1 !important;
                 -webkit-text-size-adjust: 100% !important;
                 -ms-text-size-adjust: 100% !important;
+                transform: none !important;
+                transform-origin: top left !important;
             }
         </style>
     </head>
     <body>
         <div class="slide-container" id="slideContainer">
         </div>
         <script>
+            // PPT尺寸信息
+            window.PPT_DIMENSIONS = {
+                width: ${pptDimensions.width},
+                height: ${pptDimensions.height}
+            };
+            console.log('PPT页面初始化 - 精确尺寸模式:', window.PPT_DIMENSIONS);
+            // 确保页面加载完成后强制设置尺寸
             window.addEventListener('load', function() {
                 const html = document.documentElement;
                 const body = document.body;
+                const container = document.getElementById('slideContainer');
+                const targetWidth = ${pptDimensions.width};
+                const targetHeight = ${pptDimensions.height};
+                console.log('强制设置精确尺寸:', targetWidth + 'x' + targetHeight);
+                // 强制设置HTML尺寸
+                html.style.width = targetWidth + 'px';
+                html.style.height = targetHeight + 'px';
+                html.style.minWidth = targetWidth + 'px';
+                html.style.minHeight = targetHeight + 'px';
+                html.style.maxWidth = targetWidth + 'px';
+                html.style.maxHeight = targetHeight + 'px';
+                html.style.overflow = 'hidden';
+                html.style.background = '#000000';
+                // 强制设置Body尺寸
+                body.style.width = targetWidth + 'px';
+                body.style.height = targetHeight + 'px';
+                body.style.minWidth = targetWidth + 'px';
+                body.style.minHeight = targetHeight + 'px';
+                body.style.maxWidth = targetWidth + 'px';
+                body.style.maxHeight = targetHeight + 'px';
+                body.style.overflow = 'hidden';
+                body.style.background = '#000000';
+                body.style.margin = '0';
+                body.style.padding = '0';
+                // 强制设置容器尺寸
                 if (container) {
+                    container.style.width = targetWidth + 'px';
+                    container.style.height = targetHeight + 'px';
+                    container.style.position = 'absolute';
+                    container.style.top = '0';
+                    container.style.left = '0';
+                    container.style.overflow = 'hidden';
                 }
+                // 禁用各种缩放和调整
                 document.addEventListener('wheel', function(e) {
+                    if (e.ctrlKey) e.preventDefault();
                 }, { passive: false });
+                document.addEventListener('keydown', function(e) {
+                    // 禁用Ctrl+滚轮缩放、F11全屏等
+                    if ((e.ctrlKey && (e.key === '+' || e.key === '-' || e.key === '0')) || e.key === 'F11') {
                         e.preventDefault();
                     }
+                }, false);
+                document.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
+                }, false);
+                // 禁用触摸缩放
                 let lastTouchEnd = 0;
                 document.addEventListener('touchend', function(e) {
                     const now = new Date().getTime();
                     lastTouchEnd = now;
                 }, false);
+                document.addEventListener('touchstart', function(e) {
+                    if (e.touches.length > 1) {
                         e.preventDefault();
                     }
+                }, { passive: false });
+                // 验证最终尺寸
                 setTimeout(() => {
                     const actualDimensions = {
+                        window: {
+                            innerWidth: window.innerWidth,
+                            innerHeight: window.innerHeight
+                        },
                         html: {
+                            offsetWidth: html.offsetWidth,
+                            offsetHeight: html.offsetHeight
                         },
                         body: {
+                            offsetWidth: body.offsetWidth,
+                            offsetHeight: body.offsetHeight
                         },
+                        container: container ? {
+                            offsetWidth: container.offsetWidth,
+                            offsetHeight: container.offsetHeight
+                        } : null
                     };
+                    console.log('最终尺寸验证:', actualDimensions);
+                    console.log('目标尺寸:', window.PPT_DIMENSIONS);
+                    // 检查是否达到目标尺寸
+                    const isCorrectSize =
+                        actualDimensions.window.innerWidth === targetWidth &&
+                        actualDimensions.window.innerHeight === targetHeight &&
+                        actualDimensions.html.offsetWidth === targetWidth &&
+                        actualDimensions.html.offsetHeight === targetHeight &&
+                        actualDimensions.body.offsetWidth === targetWidth &&
+                        actualDimensions.body.offsetHeight === targetHeight;
+                    if (isCorrectSize) {
+                        console.log('✅ 页面尺寸完全正确，网页窗口与PPT尺寸一致');
                     } else {
+                        console.warn('⚠️ 页面尺寸不完全匹配，可能存在浏览器限制');
                     }
+                }, 200);
+            });
+            // 监听窗口大小变化，防止用户调整
+            window.addEventListener('resize', function() {
+                const targetWidth = ${pptDimensions.width};
+                const targetHeight = ${pptDimensions.height};
+                if (window.innerWidth !== targetWidth || window.innerHeight !== targetHeight) {
+                    console.log('检测到窗口大小变化，尝试恢复原始尺寸');
+                    // 注意：无法通过JavaScript强制调整浏览器窗口大小，只能设置内容尺寸
+                }
             });
         </script>
     </body>