Upload public.js

backend/src/routes/public.js

@@ -98,26 +98,34 @@ 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: ${element.left}px;
-        top: ${element.top}px;
-        width: ${element.width}px;
-        height: ${element.height}px;
+        left: ${leftPercent}%;
+        top: ${topPercent}%;
+        width: ${widthPercent}%;
+        height: ${heightPercent}%;
         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: ${element.fontSize || 14}px;
+              font-size: ${fontSizePercent}vh;
               font-family: ${element.fontName || 'Arial'};
               color: ${element.defaultColor || '#000'};
               font-weight: ${element.bold ? 'bold' : 'normal'};
@@ -125,9 +133,10 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
               text-decoration: ${element.underline ? 'underline' : 'none'};
               text-align: ${element.align || 'left'};
               line-height: ${element.lineHeight || 1.2};
-              padding: 10px;
+              padding: 1vh;
               word-wrap: break-word;
               overflow: hidden;
+              box-sizing: border-box;
             ">
               ${element.content || ''}
             </div>
@@ -135,14 +144,14 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
         case 'image':
           return `
             <div style="${style}">
-              <img src="${element.src}" alt="" style="width: 100%; height: 100%; object-fit: ${element.objectFit || 'contain'};" />
+              <img src="${element.src}" alt="" style="width: 100%; height: 100%; object-fit: ${element.objectFit || 'cover'}; display: block;" />
             </div>
           `;
         case 'shape':
           const shapeStyle = element.fill ? `background-color: ${element.fill};` : '';
-          const borderStyle = element.outline ? `border: ${element.outline.width || 1}px ${element.outline.style || 'solid'} ${element.outline.color || '#000'};` : '';
+          const borderStyle = element.outline ? `border: ${((element.outline.width || 1) / pptDimensions.height) * 100}vh ${element.outline.style || 'solid'} ${element.outline.color || '#000'};` : '';
           return `
-            <div style="${style} ${shapeStyle} ${borderStyle}"></div>
+            <div style="${style} ${shapeStyle} ${borderStyle} box-sizing: border-box;"></div>
           `;
         default:
           return `<div style="${style}"></div>`;
@@ -201,12 +210,12 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 /* 尺寸将通过JavaScript动态设置 */
             }
             
-            /* PPT内容区域 - 完全填满容器 */
+            /* PPT内容区域 - 完全填满容器，不需要额外缩放 */
             .ppt-content {
                 width: 100% !important;
                 height: 100% !important;
                 position: relative !important;
-                transform-origin: top left !important;
+                overflow: hidden !important;
             }
             
             /* 背景图片处理 */
@@ -271,7 +280,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 height: ${pptDimensions.height}
             };
             
-            console.log('PPT页面初始化 - 长宽比匹配模式:', window.PPT_DIMENSIONS);
+            console.log('PPT页面初始化 - 响应式元素缩放模式:', window.PPT_DIMENSIONS);
             
             // 计算容器尺寸，保持PPT长宽比，最大化填满窗口
             function calculateContainerSize() {
@@ -303,47 +312,33 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 };
             }
             
-            // 应用容器尺寸和PPT内容缩放
+            // 应用容器尺寸，PPT元素会自动适应
             function adaptPPTToWindow() {
                 const container = document.getElementById('slideContainer');
                 const content = document.getElementById('pptContent');
                 if (!container || !content) return;
                 
                 const containerSize = calculateContainerSize();
-                const pptWidth = ${pptDimensions.width};
-                const pptHeight = ${pptDimensions.height};
                 
                 // 设置容器尺寸（保持PPT长宽比）
                 container.style.width = containerSize.width + 'px';
                 container.style.height = containerSize.height + 'px';
                 
-                // 计算PPT内容的缩放比例
-                const scaleX = containerSize.width / pptWidth;
-                const scaleY = containerSize.height / pptHeight;
+                // PPT内容完全填满容器，元素使用百分比单位会自动缩放
+                content.style.width = '100%';
+                content.style.height = '100%';
+                content.style.position = 'relative';
                 
-                // 由于容器已经保持了PPT的长宽比，scaleX和scaleY应该相等
-                const scale = Math.min(scaleX, scaleY);
-                
-                // 设置PPT内容尺寸和缩放
-                content.style.width = pptWidth + 'px';
-                content.style.height = pptHeight + 'px';
-                content.style.transform = \`scale(\${scale})\`;
-                content.style.position = 'absolute';
-                content.style.top = '0';
-                content.style.left = '0';
-                
-                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)}\`);
+                console.log(`容器尺寸: ${containerSize.width}x${containerSize.height}`);
+                console.log(`PPT长宽比: ${(pptDimensions.width/pptDimensions.height).toFixed(3)}, 容器长宽比: ${(containerSize.width/containerSize.height).toFixed(3)}`);
             }
             
             // 页面加载完成后初始化
             window.addEventListener('load', function() {
                 const html = document.documentElement;
                 const body = document.body;
-                const container = document.getElementById('slideContainer');
-                const content = document.getElementById('pptContent');
                 
-                console.log('页面加载完成，开始长宽比匹配布局');
+                console.log('页面加载完成，开始响应式元素布局');
                 
                 // 确保页面元素填满窗口
                 html.style.width = '100vw';
@@ -397,18 +392,18 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                     }
                 }, { passive: false });
                 
-                console.log('长宽比匹配PPT页面初始化完成');
+                console.log('响应式元素PPT页面初始化完成');
             });
             
             // 监听窗口大小变化，实时调整布局
             window.addEventListener('resize', function() {
-                console.log('窗口大小变化，重新计算长宽比匹配布局');
+                console.log('窗口大小变化，重新计算响应式布局');
                 adaptPPTToWindow();
             });
             
             // 监听屏幕方向变化（移动设备）
             window.addEventListener('orientationchange', function() {
-                console.log('屏幕方向变化，重新计算长宽比匹配布局');
+                console.log('屏幕方向变化，重新计算响应式布局');
                 setTimeout(adaptPPTToWindow, 100);
             });
         </script>