Upload public.js
Browse files- backend/src/routes/public.js +47 -3
backend/src/routes/public.js
CHANGED
|
@@ -89,13 +89,24 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 89 |
height: 100%;
|
| 90 |
overflow: hidden;
|
| 91 |
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
|
|
| 92 |
}
|
| 93 |
|
| 94 |
-
.
|
| 95 |
width: 100vw;
|
| 96 |
height: 100vh;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 97 |
background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
|
| 98 |
position: relative;
|
|
|
|
| 99 |
overflow: hidden;
|
| 100 |
}
|
| 101 |
|
|
@@ -117,9 +128,42 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 117 |
</style>
|
| 118 |
</head>
|
| 119 |
<body>
|
| 120 |
-
<div class="
|
| 121 |
-
|
|
|
|
|
|
|
| 122 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 123 |
</body>
|
| 124 |
</html>
|
| 125 |
`;
|
|
|
|
| 89 |
height: 100%;
|
| 90 |
overflow: hidden;
|
| 91 |
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
| 92 |
+
background-color: #000;
|
| 93 |
}
|
| 94 |
|
| 95 |
+
.viewport-container {
|
| 96 |
width: 100vw;
|
| 97 |
height: 100vh;
|
| 98 |
+
display: flex;
|
| 99 |
+
justify-content: center;
|
| 100 |
+
align-items: center;
|
| 101 |
+
background-color: #000;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
.slide-container {
|
| 105 |
+
width: 1000px;
|
| 106 |
+
height: 750px;
|
| 107 |
background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'};
|
| 108 |
position: relative;
|
| 109 |
+
transform-origin: center center;
|
| 110 |
overflow: hidden;
|
| 111 |
}
|
| 112 |
|
|
|
|
| 128 |
</style>
|
| 129 |
</head>
|
| 130 |
<body>
|
| 131 |
+
<div class="viewport-container">
|
| 132 |
+
<div class="slide-container" id="slideContainer">
|
| 133 |
+
${renderElements(slide.elements)}
|
| 134 |
+
</div>
|
| 135 |
</div>
|
| 136 |
+
|
| 137 |
+
<script>
|
| 138 |
+
function resizeSlide() {
|
| 139 |
+
const container = document.getElementById('slideContainer');
|
| 140 |
+
const viewport = container.parentElement;
|
| 141 |
+
|
| 142 |
+
// PPT标准尺寸 (4:3 比例)
|
| 143 |
+
const slideWidth = 1000;
|
| 144 |
+
const slideHeight = 750;
|
| 145 |
+
|
| 146 |
+
// 窗口尺寸
|
| 147 |
+
const windowWidth = viewport.clientWidth;
|
| 148 |
+
const windowHeight = viewport.clientHeight;
|
| 149 |
+
|
| 150 |
+
// 计算缩放比例，使PPT填满窗口
|
| 151 |
+
const scaleX = windowWidth / slideWidth;
|
| 152 |
+
const scaleY = windowHeight / slideHeight;
|
| 153 |
+
const scale = Math.max(scaleX, scaleY); // 使用较大的缩放比例以填满窗口
|
| 154 |
+
|
| 155 |
+
// 应用缩放
|
| 156 |
+
container.style.transform = \`scale(\${scale})\`;
|
| 157 |
+
|
| 158 |
+
console.log(\`Window: \${windowWidth}x\${windowHeight}, Scale: \${scale}\`);
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
// 页面加载时调整大小
|
| 162 |
+
window.addEventListener('load', resizeSlide);
|
| 163 |
+
|
| 164 |
+
// 窗口大小改变时重新调整
|
| 165 |
+
window.addEventListener('resize', resizeSlide);
|
| 166 |
+
</script>
|
| 167 |
</body>
|
| 168 |
</html>
|
| 169 |
`;
|