Upload public.js
Browse files- backend/src/routes/public.js +87 -102
backend/src/routes/public.js
CHANGED
|
@@ -155,7 +155,7 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 155 |
<html lang="zh-CN">
|
| 156 |
<head>
|
| 157 |
<meta charset="UTF-8">
|
| 158 |
-
<meta name="viewport" content="width
|
| 159 |
<title>${title} - 第${slideIndex + 1}页</title>
|
| 160 |
<style>
|
| 161 |
/* 完全重置所有默认样式 */
|
|
@@ -167,42 +167,40 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 167 |
box-sizing: border-box !important;
|
| 168 |
}
|
| 169 |
|
| 170 |
-
/* HTML -
|
| 171 |
html {
|
| 172 |
-
width:
|
| 173 |
-
height:
|
| 174 |
-
min-width: ${pptDimensions.width}px !important;
|
| 175 |
-
min-height: ${pptDimensions.height}px !important;
|
| 176 |
-
max-width: ${pptDimensions.width}px !important;
|
| 177 |
-
max-height: ${pptDimensions.height}px !important;
|
| 178 |
background: #000000 !important;
|
| 179 |
overflow: hidden !important;
|
|
|
|
|
|
|
|
|
|
| 180 |
}
|
| 181 |
|
| 182 |
-
/* Body -
|
| 183 |
body {
|
| 184 |
-
width:
|
| 185 |
-
height:
|
| 186 |
-
min-width: ${pptDimensions.width}px !important;
|
| 187 |
-
min-height: ${pptDimensions.height}px !important;
|
| 188 |
-
max-width: ${pptDimensions.width}px !important;
|
| 189 |
-
max-height: ${pptDimensions.height}px !important;
|
| 190 |
background: #000000 !important;
|
| 191 |
overflow: hidden !important;
|
| 192 |
font-family: 'Microsoft YaHei', Arial, sans-serif !important;
|
| 193 |
-
position:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 194 |
}
|
| 195 |
|
| 196 |
-
/* PPT容器 -
|
| 197 |
.slide-container {
|
| 198 |
width: ${pptDimensions.width}px !important;
|
| 199 |
height: ${pptDimensions.height}px !important;
|
| 200 |
background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
|
| 201 |
-
position:
|
| 202 |
-
top: 0 !important;
|
| 203 |
-
left: 0 !important;
|
| 204 |
overflow: hidden !important;
|
| 205 |
-
|
| 206 |
}
|
| 207 |
|
| 208 |
/* 背景图片处理 */
|
|
@@ -212,8 +210,8 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 212 |
position: absolute !important;
|
| 213 |
top: 0 !important;
|
| 214 |
left: 0 !important;
|
| 215 |
-
width:
|
| 216 |
-
height:
|
| 217 |
background-image: url('${slide.background.image}') !important;
|
| 218 |
background-size: ${slide.background.imageSize || 'cover'} !important;
|
| 219 |
background-position: center !important;
|
|
@@ -250,8 +248,6 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 250 |
zoom: 1 !important;
|
| 251 |
-webkit-text-size-adjust: 100% !important;
|
| 252 |
-ms-text-size-adjust: 100% !important;
|
| 253 |
-
transform: none !important;
|
| 254 |
-
transform-origin: top left !important;
|
| 255 |
}
|
| 256 |
</style>
|
| 257 |
</head>
|
|
@@ -267,58 +263,84 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 267 |
height: ${pptDimensions.height}
|
| 268 |
};
|
| 269 |
|
| 270 |
-
console.log('PPT页面初始化 -
|
| 271 |
|
| 272 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 273 |
window.addEventListener('load', function() {
|
| 274 |
const html = document.documentElement;
|
| 275 |
const body = document.body;
|
| 276 |
const container = document.getElementById('slideContainer');
|
| 277 |
|
| 278 |
-
|
| 279 |
-
const targetHeight = ${pptDimensions.height};
|
| 280 |
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
html.style.width = targetWidth + 'px';
|
| 285 |
-
html.style.height = targetHeight + 'px';
|
| 286 |
-
html.style.minWidth = targetWidth + 'px';
|
| 287 |
-
html.style.minHeight = targetHeight + 'px';
|
| 288 |
-
html.style.maxWidth = targetWidth + 'px';
|
| 289 |
-
html.style.maxHeight = targetHeight + 'px';
|
| 290 |
-
html.style.overflow = 'hidden';
|
| 291 |
html.style.background = '#000000';
|
|
|
|
| 292 |
|
| 293 |
-
|
| 294 |
-
body.style.
|
| 295 |
-
body.style.height = targetHeight + 'px';
|
| 296 |
-
body.style.minWidth = targetWidth + 'px';
|
| 297 |
-
body.style.minHeight = targetHeight + 'px';
|
| 298 |
-
body.style.maxWidth = targetWidth + 'px';
|
| 299 |
-
body.style.maxHeight = targetHeight + 'px';
|
| 300 |
-
body.style.overflow = 'hidden';
|
| 301 |
body.style.background = '#000000';
|
|
|
|
|
|
|
|
|
|
|
|
|
| 302 |
body.style.margin = '0';
|
| 303 |
body.style.padding = '0';
|
| 304 |
|
| 305 |
-
//
|
| 306 |
if (container) {
|
| 307 |
-
container.style.width =
|
| 308 |
-
container.style.height =
|
| 309 |
-
container.style.position = '
|
| 310 |
-
container.style.top = '0';
|
| 311 |
-
container.style.left = '0';
|
| 312 |
container.style.overflow = 'hidden';
|
|
|
|
| 313 |
}
|
| 314 |
|
| 315 |
-
//
|
|
|
|
|
|
|
|
|
|
| 316 |
document.addEventListener('wheel', function(e) {
|
| 317 |
if (e.ctrlKey) e.preventDefault();
|
| 318 |
}, { passive: false });
|
| 319 |
|
| 320 |
document.addEventListener('keydown', function(e) {
|
| 321 |
-
// 禁用Ctrl+滚轮缩放、F11全屏等
|
| 322 |
if ((e.ctrlKey && (e.key === '+' || e.key === '-' || e.key === '0')) || e.key === 'F11') {
|
| 323 |
e.preventDefault();
|
| 324 |
}
|
|
@@ -344,56 +366,19 @@ const generateSlideHTML = (pptData, slideIndex, title) => {
|
|
| 344 |
}
|
| 345 |
}, { passive: false });
|
| 346 |
|
| 347 |
-
|
| 348 |
-
setTimeout(() => {
|
| 349 |
-
const actualDimensions = {
|
| 350 |
-
window: {
|
| 351 |
-
innerWidth: window.innerWidth,
|
| 352 |
-
innerHeight: window.innerHeight
|
| 353 |
-
},
|
| 354 |
-
html: {
|
| 355 |
-
offsetWidth: html.offsetWidth,
|
| 356 |
-
offsetHeight: html.offsetHeight
|
| 357 |
-
},
|
| 358 |
-
body: {
|
| 359 |
-
offsetWidth: body.offsetWidth,
|
| 360 |
-
offsetHeight: body.offsetHeight
|
| 361 |
-
},
|
| 362 |
-
container: container ? {
|
| 363 |
-
offsetWidth: container.offsetWidth,
|
| 364 |
-
offsetHeight: container.offsetHeight
|
| 365 |
-
} : null
|
| 366 |
-
};
|
| 367 |
-
|
| 368 |
-
console.log('最终尺寸验证:', actualDimensions);
|
| 369 |
-
console.log('目标尺寸:', window.PPT_DIMENSIONS);
|
| 370 |
-
|
| 371 |
-
// 检查是否达到目标尺寸
|
| 372 |
-
const isCorrectSize =
|
| 373 |
-
actualDimensions.window.innerWidth === targetWidth &&
|
| 374 |
-
actualDimensions.window.innerHeight === targetHeight &&
|
| 375 |
-
actualDimensions.html.offsetWidth === targetWidth &&
|
| 376 |
-
actualDimensions.html.offsetHeight === targetHeight &&
|
| 377 |
-
actualDimensions.body.offsetWidth === targetWidth &&
|
| 378 |
-
actualDimensions.body.offsetHeight === targetHeight;
|
| 379 |
-
|
| 380 |
-
if (isCorrectSize) {
|
| 381 |
-
console.log('✅ 页面尺寸完全正确，网页窗口与PPT尺寸一致');
|
| 382 |
-
} else {
|
| 383 |
-
console.warn('⚠️ 页面尺寸不完全匹配，可能存在浏览器限制');
|
| 384 |
-
}
|
| 385 |
-
}, 200);
|
| 386 |
});
|
| 387 |
|
| 388 |
-
//
|
| 389 |
window.addEventListener('resize', function() {
|
| 390 |
-
|
| 391 |
-
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
|
|
|
| 397 |
});
|
| 398 |
</script>
|
| 399 |
</body>
|
|
|
|
| 155 |
<html lang="zh-CN">
|
| 156 |
<head>
|
| 157 |
<meta charset="UTF-8">
|
| 158 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
| 159 |
<title>${title} - 第${slideIndex + 1}页</title>
|
| 160 |
<style>
|
| 161 |
/* 完全重置所有默认样式 */
|
|
|
|
| 167 |
box-sizing: border-box !important;
|
| 168 |
}
|
| 169 |
|
| 170 |
+
/* HTML - 填满整个窗口 */
|
| 171 |
html {
|
| 172 |
+
width: 100vw !important;
|
| 173 |
+
height: 100vh !important;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 174 |
background: #000000 !important;
|
| 175 |
overflow: hidden !important;
|
| 176 |
+
position: fixed !important;
|
| 177 |
+
top: 0 !important;
|
| 178 |
+
left: 0 !important;
|
| 179 |
}
|
| 180 |
|
| 181 |
+
/* Body - 填满整个窗口 */
|
| 182 |
body {
|
| 183 |
+
width: 100vw !important;
|
| 184 |
+
height: 100vh !important;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
background: #000000 !important;
|
| 186 |
overflow: hidden !important;
|
| 187 |
font-family: 'Microsoft YaHei', Arial, sans-serif !important;
|
| 188 |
+
position: fixed !important;
|
| 189 |
+
top: 0 !important;
|
| 190 |
+
left: 0 !important;
|
| 191 |
+
display: flex !important;
|
| 192 |
+
align-items: center !important;
|
| 193 |
+
justify-content: center !important;
|
| 194 |
}
|
| 195 |
|
| 196 |
+
/* PPT容器 - 响应式缩放，保持宽高比，填满窗口 */
|
| 197 |
.slide-container {
|
| 198 |
width: ${pptDimensions.width}px !important;
|
| 199 |
height: ${pptDimensions.height}px !important;
|
| 200 |
background-color: ${slide.background?.color || theme.backgroundColor || '#ffffff'} !important;
|
| 201 |
+
position: relative !important;
|
|
|
|
|
|
|
| 202 |
overflow: hidden !important;
|
| 203 |
+
transform-origin: center center !important;
|
| 204 |
}
|
| 205 |
|
| 206 |
/* 背景图片处理 */
|
|
|
|
| 210 |
position: absolute !important;
|
| 211 |
top: 0 !important;
|
| 212 |
left: 0 !important;
|
| 213 |
+
width: 100% !important;
|
| 214 |
+
height: 100% !important;
|
| 215 |
background-image: url('${slide.background.image}') !important;
|
| 216 |
background-size: ${slide.background.imageSize || 'cover'} !important;
|
| 217 |
background-position: center !important;
|
|
|
|
| 248 |
zoom: 1 !important;
|
| 249 |
-webkit-text-size-adjust: 100% !important;
|
| 250 |
-ms-text-size-adjust: 100% !important;
|
|
|
|
|
|
|
| 251 |
}
|
| 252 |
</style>
|
| 253 |
</head>
|
|
|
|
| 263 |
height: ${pptDimensions.height}
|
| 264 |
};
|
| 265 |
|
| 266 |
+
console.log('PPT页面初始化 - 响应式填充模式:', window.PPT_DIMENSIONS);
|
| 267 |
|
| 268 |
+
// 响应式缩放函数 - PPT内容自动填满窗口
|
| 269 |
+
function resizePPTToFitWindow() {
|
| 270 |
+
const container = document.getElementById('slideContainer');
|
| 271 |
+
if (!container) return;
|
| 272 |
+
|
| 273 |
+
const windowWidth = window.innerWidth;
|
| 274 |
+
const windowHeight = window.innerHeight;
|
| 275 |
+
const pptWidth = ${pptDimensions.width};
|
| 276 |
+
const pptHeight = ${pptDimensions.height};
|
| 277 |
+
|
| 278 |
+
// 计算缩放比例，使PPT完全填满窗口
|
| 279 |
+
const scaleX = windowWidth / pptWidth;
|
| 280 |
+
const scaleY = windowHeight / pptHeight;
|
| 281 |
+
|
| 282 |
+
// 使用较大的缩放比例，确保PPT内容填满窗口（可能会有部分内容被裁切）
|
| 283 |
+
const scale = Math.max(scaleX, scaleY);
|
| 284 |
+
|
| 285 |
+
// 应用缩放变换
|
| 286 |
+
container.style.transform = \`scale(\${scale})\`;
|
| 287 |
+
|
| 288 |
+
// 如果需要居中显示（当一个方向填满，另一个方向可能会超出）
|
| 289 |
+
const scaledWidth = pptWidth * scale;
|
| 290 |
+
const scaledHeight = pptHeight * scale;
|
| 291 |
+
|
| 292 |
+
// 计算偏移，使内容居中
|
| 293 |
+
const offsetX = (windowWidth - scaledWidth) / 2 / scale;
|
| 294 |
+
const offsetY = (windowHeight - scaledHeight) / 2 / scale;
|
| 295 |
+
|
| 296 |
+
container.style.left = offsetX + 'px';
|
| 297 |
+
container.style.top = offsetY + 'px';
|
| 298 |
+
|
| 299 |
+
console.log(\`窗口尺寸: \${windowWidth}x\${windowHeight}, PPT尺寸: \${pptWidth}x\${pptHeight}, 缩放比例: \${scale.toFixed(3)}, 偏移: \${offsetX.toFixed(1)}, \${offsetY.toFixed(1)}\`);
|
| 300 |
+
}
|
| 301 |
+
|
| 302 |
+
// 页面加载完成后初始化
|
| 303 |
window.addEventListener('load', function() {
|
| 304 |
const html = document.documentElement;
|
| 305 |
const body = document.body;
|
| 306 |
const container = document.getElementById('slideContainer');
|
| 307 |
|
| 308 |
+
console.log('页面加载完成，开始响应式缩放');
|
|
|
|
| 309 |
|
| 310 |
+
// 确保页面元素填满窗口
|
| 311 |
+
html.style.width = '100vw';
|
| 312 |
+
html.style.height = '100vh';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 313 |
html.style.background = '#000000';
|
| 314 |
+
html.style.overflow = 'hidden';
|
| 315 |
|
| 316 |
+
body.style.width = '100vw';
|
| 317 |
+
body.style.height = '100vh';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 318 |
body.style.background = '#000000';
|
| 319 |
+
body.style.overflow = 'hidden';
|
| 320 |
+
body.style.display = 'flex';
|
| 321 |
+
body.style.alignItems = 'center';
|
| 322 |
+
body.style.justifyContent = 'center';
|
| 323 |
body.style.margin = '0';
|
| 324 |
body.style.padding = '0';
|
| 325 |
|
| 326 |
+
// 初始化PPT容器
|
| 327 |
if (container) {
|
| 328 |
+
container.style.width = '${pptDimensions.width}px';
|
| 329 |
+
container.style.height = '${pptDimensions.height}px';
|
| 330 |
+
container.style.position = 'relative';
|
|
|
|
|
|
|
| 331 |
container.style.overflow = 'hidden';
|
| 332 |
+
container.style.transformOrigin = 'center center';
|
| 333 |
}
|
| 334 |
|
| 335 |
+
// 执行初始缩放
|
| 336 |
+
resizePPTToFitWindow();
|
| 337 |
+
|
| 338 |
+
// 禁用各种用户交互
|
| 339 |
document.addEventListener('wheel', function(e) {
|
| 340 |
if (e.ctrlKey) e.preventDefault();
|
| 341 |
}, { passive: false });
|
| 342 |
|
| 343 |
document.addEventListener('keydown', function(e) {
|
|
|
|
| 344 |
if ((e.ctrlKey && (e.key === '+' || e.key === '-' || e.key === '0')) || e.key === 'F11') {
|
| 345 |
e.preventDefault();
|
| 346 |
}
|
|
|
|
| 366 |
}
|
| 367 |
}, { passive: false });
|
| 368 |
|
| 369 |
+
console.log('响应式PPT页面初始化完成');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 370 |
});
|
| 371 |
|
| 372 |
+
// 监听窗口大小变化，实时调整PPT大小
|
| 373 |
window.addEventListener('resize', function() {
|
| 374 |
+
console.log('窗口大小变化，重新调整PPT尺寸');
|
| 375 |
+
resizePPTToFitWindow();
|
| 376 |
+
});
|
| 377 |
+
|
| 378 |
+
// 监听屏幕方向变化（移动设备）
|
| 379 |
+
window.addEventListener('orientationchange', function() {
|
| 380 |
+
console.log('屏幕方向变化，重新调整PPT尺寸');
|
| 381 |
+
setTimeout(resizePPTToFitWindow, 100); // 延迟一点时间等待方向变化完成
|
| 382 |
});
|
| 383 |
</script>
|
| 384 |
</body>
|