Upload public.js

backend/src/routes/public.js

@@ -83,24 +83,66 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 padding: 0;
                 box-sizing: border-box;
             }
-            body {
+            
+            html, body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
                 font-family: 'Microsoft YaHei', Arial, sans-serif;
-                background-color: #f5f5f5;
+                background-color: #1a1a1a;
+            }
+            
+            .fullscreen-container {
+                width: 100vw;
+                height: 100vh;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                min-height: 100vh;
-                padding: 0;
+                background-color: #1a1a1a;
+                position: relative;
             }
+            
             .slide-container {
-                width: 900px;
-                height: 506px;
+                width: 100%;
+                height: 100%;
+                max-width: 100vw;
+                max-height: 100vh;
                 background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
                 position: relative;
-                border-radius: 8px;
-                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+                transform-origin: center center;
+                box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
                 overflow: hidden;
             }
+            
+            /* 16:9 宽屏比例优化 */
+            @media (min-aspect-ratio: 16/9) {
+                .slide-container {
+                    width: calc(100vh * 16/9);
+                    height: 100vh;
+                }
+            }
+            
+            @media (max-aspect-ratio: 16/9) {
+                .slide-container {
+                    width: 100vw;
+                    height: calc(100vw * 9/16);
+                }
+            }
+            
+            /* 移动设备适配 */
+            @media (max-width: 768px) {
+                .slide-container {
+                    width: 100vw;
+                    height: 100vh;
+                    max-width: none;
+                    max-height: none;
+                }
+                
+                .fullscreen-container {
+                    align-items: flex-start;
+                }
+            }
+            
             ${slide.background?.type === 'image' ? `
             .slide-container::before {
                 content: '';
@@ -116,12 +158,215 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
                 z-index: 0;
             }
             ` : ''}
+            
+            /* 控制栏样式 */
+            .control-bar {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                display: flex;
+                gap: 10px;
+                z-index: 1000;
+                opacity: 0.7;
+                transition: opacity 0.3s ease;
+            }
+            
+            .control-bar:hover {
+                opacity: 1;
+            }
+            
+            .control-btn {
+                background: rgba(0, 0, 0, 0.8);
+                color: white;
+                border: none;
+                padding: 10px 15px;
+                border-radius: 5px;
+                cursor: pointer;
+                font-size: 14px;
+                transition: background 0.3s ease;
+            }
+            
+            .control-btn:hover {
+                background: rgba(0, 0, 0, 0.9);
+            }
+            
+            /* 全屏时隐藏滚动条 */
+            .slide-container::-webkit-scrollbar {
+                display: none;
+            }
+            
+            /* 页面信息显示 */
+            .slide-info {
+                position: fixed;
+                bottom: 20px;
+                left: 20px;
+                background: rgba(0, 0, 0, 0.8);
+                color: white;
+                padding: 10px 15px;
+                border-radius: 5px;
+                font-size: 14px;
+                z-index: 1000;
+                opacity: 0.7;
+                transition: opacity 0.3s ease;
+            }
+            
+            .slide-info:hover {
+                opacity: 1;
+            }
         </style>
     </head>
     <body>
-        <div class="slide-container">
-            ${renderElements(slide.elements)}
+        <div class="fullscreen-container">
+            <div class="slide-container">
+                ${renderElements(slide.elements)}
+            </div>
         </div>
+        
+        <div class="control-bar">
+            <button class="control-btn" onclick="toggleFullscreen()">
+                <span id="fullscreen-text">全屏</span>
+            </button>
+            <button class="control-btn" onclick="fitToWindow()">适应窗口</button>
+            <button class="control-btn" onclick="resetZoom()">重置大小</button>
+        </div>
+        
+        <div class="slide-info">
+            <div>${title}</div>
+            <div>第 ${slideIndex + 1} 页，共 ${pptData.slides.length} 页</div>
+        </div>
+
+        <script>
+            let isFullscreen = false;
+            let currentScale = 1;
+            
+            // 全屏切换
+            function toggleFullscreen() {
+                const container = document.querySelector('.fullscreen-container');
+                const text = document.getElementById('fullscreen-text');
+                
+                if (!isFullscreen) {
+                    if (container.requestFullscreen) {
+                        container.requestFullscreen();
+                    } else if (container.webkitRequestFullscreen) {
+                        container.webkitRequestFullscreen();
+                    } else if (container.msRequestFullscreen) {
+                        container.msRequestFullscreen();
+                    }
+                } else {
+                    if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    } else if (document.webkitExitFullscreen) {
+                        document.webkitExitFullscreen();
+                    } else if (document.msExitFullscreen) {
+                        document.msExitFullscreen();
+                    }
+                }
+            }
+            
+            // 监听全屏状态变化
+            document.addEventListener('fullscreenchange', updateFullscreenStatus);
+            document.addEventListener('webkitfullscreenchange', updateFullscreenStatus);
+            document.addEventListener('msfullscreenchange', updateFullscreenStatus);
+            
+            function updateFullscreenStatus() {
+                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+                const text = document.getElementById('fullscreen-text');
+                text.textContent = isFullscreen ? '退出全屏' : '全屏';
+            }
+            
+            // 适应窗口大小
+            function fitToWindow() {
+                const slideContainer = document.querySelector('.slide-container');
+                slideContainer.style.transform = 'scale(1)';
+                slideContainer.style.width = '100%';
+                slideContainer.style.height = '100%';
+                currentScale = 1;
+            }
+            
+            // 重置缩放
+            function resetZoom() {
+                const slideContainer = document.querySelector('.slide-container');
+                slideContainer.style.transform = 'scale(1)';
+                slideContainer.style.width = '';
+                slideContainer.style.height = '';
+                currentScale = 1;
+            }
+            
+            // 键盘快捷键
+            document.addEventListener('keydown', function(e) {
+                switch(e.key) {
+                    case 'F11':
+                        e.preventDefault();
+                        toggleFullscreen();
+                        break;
+                    case 'Escape':
+                        if (isFullscreen) {
+                            toggleFullscreen();
+                        }
+                        break;
+                    case '+':
+                    case '=':
+                        e.preventDefault();
+                        currentScale = Math.min(currentScale * 1.1, 3);
+                        updateScale();
+                        break;
+                    case '-':
+                        e.preventDefault();
+                        currentScale = Math.max(currentScale * 0.9, 0.5);
+                        updateScale();
+                        break;
+                    case '0':
+                        e.preventDefault();
+                        resetZoom();
+                        break;
+                }
+            });
+            
+            function updateScale() {
+                const slideContainer = document.querySelector('.slide-container');
+                slideContainer.style.transform = \`scale(\${currentScale})\`;
+            }
+            
+            // 鼠标滚轮缩放
+            document.addEventListener('wheel', function(e) {
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    if (e.deltaY > 0) {
+                        currentScale = Math.max(currentScale * 0.9, 0.5);
+                    } else {
+                        currentScale = Math.min(currentScale * 1.1, 3);
+                    }
+                    updateScale();
+                }
+            });
+            
+            // 自动隐藏控制栏
+            let hideControlsTimeout;
+            
+            function showControls() {
+                const controlBar = document.querySelector('.control-bar');
+                const slideInfo = document.querySelector('.slide-info');
+                controlBar.style.opacity = '0.7';
+                slideInfo.style.opacity = '0.7';
+                
+                clearTimeout(hideControlsTimeout);
+                hideControlsTimeout = setTimeout(() => {
+                    if (isFullscreen) {
+                        controlBar.style.opacity = '0';
+                        slideInfo.style.opacity = '0';
+                    }
+                }, 3000);
+            }
+            
+            document.addEventListener('mousemove', showControls);
+            document.addEventListener('keydown', showControls);
+            
+            // 页面加载完成后的初始化
+            window.addEventListener('load', function() {
+                console.log('PPT页面加载完成');
+                fitToWindow();
+            });
+        </script>
     </body>
     </html>
   `;