Spaces:

CatPtain
/

web_ppt

Running

App Files Files Community

CatPtain commited on Jun 14

Commit

08a6186

verified ·

1 Parent(s): 1d4c41b

Upload public.js

Browse files

Files changed (1) hide show

backend/src/routes/public.js +183 -50

backend/src/routes/public.js CHANGED Viewed

@@ -19,6 +19,68 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
   const slide = pptData.slides[slideIndex];
   const theme = pptData.theme || {};
   // 渲染幻灯片元素
   const renderElements = (elements) => {
     if (!elements || elements.length === 0) return '';
@@ -76,39 +138,41 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>${title} - 第${slideIndex + 1}页</title>
         <style>
             * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
             }
-            html, body {
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                font-family: 'Microsoft YaHei', Arial, sans-serif;
-                background-color: #000;
             }
-            .viewport-container {
-                width: 100vw;
-                height: 100vh;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-color: #000;
             }
             .slide-container {
-                width: 1000px;
-                height: 750px;
-                background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
-                position: relative;
-                transform-origin: center center;
-                overflow: hidden;
             }
             ${slide.background?.type === 'image' ? `
@@ -126,44 +190,113 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 z-index: 0;
             }
             ` : ''}
         </style>
     </head>
-    <body>
-        <div class="viewport-container">
-            <div class="slide-container" id="slideContainer">
-                ${renderElements(slide.elements)}
-            </div>
         </div>
         <script>
-            function resizeSlide() {
-                const container = document.getElementById('slideContainer');
-                const viewport = container.parentElement;
-                // PPT标准尺寸 (4:3 比例)
-                const slideWidth = 1000;
-                const slideHeight = 750;
-                // 窗口尺寸
-                const windowWidth = viewport.clientWidth;
-                const windowHeight = viewport.clientHeight;
-                // 计算缩放比例，使PPT填满窗口
-                const scaleX = windowWidth / slideWidth;
-                const scaleY = windowHeight / slideHeight;
-                const scale = Math.max(scaleX, scaleY); // 使用较大的缩放比例以填满窗口
-                // 应用缩放
-                container.style.transform = \`scale(\${scale})\`;
-                console.log(\`Window: \${windowWidth}x\${windowHeight}, Scale: \${scale}\`);
             }
-            // 页面加载时调整大小
-            window.addEventListener('load', resizeSlide);
-            // 窗口大小改变时重新调整
-            window.addEventListener('resize', resizeSlide);
         </script>
     </body>
     </html>

   const slide = pptData.slides[slideIndex];
   const theme = pptData.theme || {};
+  // 优化的PPT尺寸计算函数 - 确保长宽比一致性
+  const calculatePptDimensions = (slide) => {
+    if (!slide.elements || slide.elements.length === 0) {
+      // 如果没有元素，使用标准PPT 16:9 比例
+      return { width: 1280, height: 720 };
+    }
+    let maxRight = 0;
+    let maxBottom = 0;
+    let minLeft = Infinity;
+    let minTop = Infinity;
+    slide.elements.forEach(element => {
+      const left = element.left || 0;
+      const top = element.top || 0;
+      const width = element.width || 0;
+      const height = element.height || 0;
+      // 计算元素的边界
+      const elementRight = left + width;
+      const elementBottom = top + height;
+      maxRight = Math.max(maxRight, elementRight);
+      maxBottom = Math.max(maxBottom, elementBottom);
+      minLeft = Math.min(minLeft, left);
+      minTop = Math.min(minTop, top);
+    });
+    // 确保有最小边距
+    const padding = 40;
+    const contentWidth = maxRight - Math.max(0, minLeft);
+    const contentHeight = maxBottom - Math.max(0, minTop);
+    // 计算最终尺寸，保持合理的长宽比
+    let finalWidth = Math.max(contentWidth + padding * 2, 800);
+    let finalHeight = Math.max(contentHeight + padding * 2, 600);
+    // 确保长宽比合理（介于4:3到16:9之间）
+    const aspectRatio = finalWidth / finalHeight;
+    const minRatio = 4/3; // 1.33
+    const maxRatio = 16/9; // 1.78
+    if (aspectRatio < minRatio) {
+      // 太高了，调整宽度
+      finalWidth = finalHeight * minRatio;
+    } else if (aspectRatio > maxRatio) {
+      // 太宽了，调整高度
+      finalHeight = finalWidth / maxRatio;
+    }
+    const result = {
+      width: Math.round(finalWidth),
+      height: Math.round(finalHeight)
+    };
+    console.log(`PPT dimensions calculated: ${result.width}x${result.height} (aspect ratio: ${(result.width/result.height).toFixed(2)})`);
+    return result;
+  };
+  const pptDimensions = calculatePptDimensions(slide);
   // 渲染幻灯片元素
   const renderElements = (elements) => {
     if (!elements || elements.length === 0) return '';
     <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>
             * {
+                margin: 0 !important;
+                padding: 0 !important;
+                box-sizing: border-box !important;
             }
+            html {
+                width: 100vw !important;
+                height: 100vh !important;
+                overflow: hidden !important;
+                background-color: #000 !important;
             }
+            body {
+                width: 100vw !important;
+                height: 100vh !important;
+                overflow: hidden !important;
+                font-family: 'Microsoft YaHei', Arial, sans-serif !important;
+                background-color: #000 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
             }
             .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;
+                box-shadow: 0 0 20px rgba(255,255,255,0.1) !important;
+                transform-origin: center center !important;
             }
             ${slide.background?.type === 'image' ? `
                 z-index: 0;
             }
             ` : ''}
+            /* 隐藏滚动条 */
+            ::-webkit-scrollbar {
+                display: none;
+            }
+            /* 截图模式样式 */
+            .screenshot-mode {
+                background-color: transparent !important;
+            }
+            .screenshot-mode body {
+                background-color: transparent !important;
+                width: ${pptDimensions.width}px !important;
+                height: ${pptDimensions.height}px !important;
+                display: block !important;
+            }
+            .screenshot-mode .slide-container {
+                position: absolute !important;
+                top: 0 !important;
+                left: 0 !important;
+                transform: none !important;
+                box-shadow: none !important;
+            }
         </style>
+        <script>
+            // 将PPT尺寸信息传递给JavaScript，用于截图服务
+            window.PPT_DIMENSIONS = {
+                width: ${pptDimensions.width},
+                height: ${pptDimensions.height}
+            };
+            // 截图模式标识
+            window.SCREENSHOT_MODE = window.location.search.includes('screenshot=true');
+        </script>
     </head>
+    <body${slide.background?.type === 'image' && slide.background?.image ? '' : ''}>
+        <div class="slide-container" id="slideContainer">
+            ${renderElements(slide.elements)}
         </div>
         <script>
+            console.log('PPT页面加载完成');
+            console.log('PPT尺寸:', window.PPT_DIMENSIONS);
+            console.log('截图模式:', window.SCREENSHOT_MODE);
+            // 根据模式应用不同的样式和行为
+            if (window.SCREENSHOT_MODE) {
+                // 截图模式：固定尺寸，无缩放
+                document.documentElement.classList.add('screenshot-mode');
+                document.body.style.cssText = \`
+                    width: ${pptDimensions.width}px !important;
+                    height: ${pptDimensions.height}px !important;
+                    background: transparent !important;
+                    overflow: hidden !important;
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    display: block !important;
+                \`;
+                const container = document.getElementById('slideContainer');
+                if (container) {
+                    container.style.cssText = \`
+                        width: ${pptDimensions.width}px !important;
+                        height: ${pptDimensions.height}px !important;
+                        position: absolute !important;
+                        top: 0 !important;
+                        left: 0 !important;
+                        transform: none !important;
+                        box-shadow: none !important;
+                        background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
+                    \`;
+                }
+                console.log('截图模式样式已应用');
+            } else {
+                // 网页浏览模式：响应式缩放，保持长宽比
+                function resizeSlide() {
+                    const container = document.getElementById('slideContainer');
+                    const slideWidth = window.PPT_DIMENSIONS.width;
+                    const slideHeight = window.PPT_DIMENSIONS.height;
+                    // 窗口尺寸
+                    const windowWidth = window.innerWidth;
+                    const windowHeight = window.innerHeight;
+                    // 计算缩放比例，保持宽高比
+                    const scaleX = (windowWidth - 40) / slideWidth; // 留20px边距
+                    const scaleY = (windowHeight - 40) / slideHeight;
+                    const scale = Math.min(scaleX, scaleY, 1); // 最大不超过1倍
+                    // 应用缩放
+                    container.style.transform = \`scale(\${scale})\`;
+                    console.log(\`响应式缩放应用: \${scale.toFixed(3)}x (窗口: \${windowWidth}x\${windowHeight}, PPT: \${slideWidth}x\${slideHeight})\`);
+                }
+                // 页面加载时调整大小
+                window.addEventListener('load', resizeSlide);
+                // 窗口大小改变时重新调整
+                window.addEventListener('resize', resizeSlide);
+                // 立即执行一次
+                resizeSlide();
             }
         </script>
     </body>
     </html>