预览、演示与构建交付
创作完成后，web-presentation 提供从实时预览、全屏演讲、图片离线包导出到生产静态构建的全链路交付支持。
1. 实时预览与全屏演示
1.1 编辑区单页预览
在页面编辑工作台（PageDetailView）中，中间区域即为 Runtime 渲染沙箱：
- 任何在“可视化”或“源码”面板中的变更，均会即时在沙箱中渲染呈现；
- 画布自动按照项目设定的比例（如 16:9）与尺寸进行矢量自适应缩放，保证所见即所得。
1.2 项目级全屏演示 (Presentation Mode)
当你需要面向团队进行汇报、演讲或全流程核验时：
- 回到项目页面列表（
PagesView），点击顶部操作栏的 “预览 / 播放” 按钮。 - 系统将在新窗口或全屏模式下启动整套演示文稿：
- 翻页操作：使用键盘
←/→、PageUp/PageDown或空格键进行前后翻页； - 路由保持：自动按项目配置好的页面路由顺序（
01 封面->02 目录->03 核心结论...）无缝平滑切换； - 纯净演示：隐藏所有编辑器边框与工具栏，呈现干净大气的演讲视觉。
- 翻页操作：使用键盘
1.3 临时预览失效与恢复
临时预览链接默认有效期为 1 小时。长时间挂起后再次打开或刷新，链接可能已经失效；服务重启等情况也可能让临时预览提前不可用。
编辑器内的页面、历史版本、组件和资源预览遇到链接失效时会尝试自动重新生成一次；切回标签页时也会检查链接是否已过期。恢复仍需有效登录态与访问权限，历史版本预览会保持原版本。若自动恢复失败，可点击“重新生成预览”。独立预览窗口会显示失效提示和“返回工作台”入口，请回到工作台重新发起预览。
2. 页面截图与批量图片导出
平台内置基于 Chromium 的高保真截图引擎，不仅为页面生成缩略图，更能导出高质量的静态汇报材料。
2.1 单页截图刷新
在页面卡片右上角点击“刷新截图”图标，后台渲染池会调起无头浏览器完成精准栅格化渲染，生成最新的缩略图。
2.2 批量导出图片包（ZIP）
小团队在汇报时经常需要离线交付图片版 PPT 或将页面发送到微信/飞书/邮件群中：
- 在项目页面列表点击 “批量截图” 或“下载全部截图”；
- 系统会自动为项目内所有路由页面执行截图排队任务；
- 全部完成后，浏览器将自动下载一个包含所有高清 PNG 图片的 ZIP 压缩包；
- 图片按页面顺序规范命名，方便直接插入传统 Office PPT 或作为长图文素材发布。
2.3 导出可编辑 PPTX
在项目预览的“导出”中选择 PPTX 格式及页面范围，即可下载演示文稿。导出优先保留可编辑的文本、形状和表格：内容超出容器边界或触及圆角时仍保持原生对象，容器内部边缘可能与网页的裁切效果不同，可在 PowerPoint/WPS 中继续调整。
不支持的滤镜、显式遮罩和复杂视觉效果仍可能生成局部截图，具体结果可查看导出报告。
为减少字体字宽差异造成的意外换行，单行文本框会在可用空白内预留宽度余量，字号保持原样。已经排成多行的段落保留原宽度，避免扩宽改变段落形状和留白。旁边有图表或容器空间不足时，文本继续正常换行；不同字体造成的换行差异仍可能存在。
3. 项目生产构建与在线直链交付
若你需要将演示文稿以 Web 站点的形式交付给客户、投资人或跨部门同事，直接发起项目构建是最优雅的方式。
3.1 发起构建
- 在项目操作栏中点击 “构建”（Build）；
- 弹出的构建窗口中，系统会展示本次构建所引用的资源清单与组件版本；
- 点击“开始构建”，Backend 会自动生成当前项目的不可变快照（Snapshot），并调度 Runtime 执行 Vite 生产环境编译打包。
3.2 独立托管与访问链接
- 稳定直链：构建完成后，系统会为该项目生成一条固定的公开访问链接（如
http://你的域名:8080/builds/<build_id>/index.html）； - 只读免密浏览：访问该链接的人员无需登录平台，即可在任何手机、平板或电脑浏览器中享受流畅的高性能交互式演讲体验；
- 版本归档：历史多次构建的记录均在构建历史列表中保存，可随时回溯或下载历史构建产物包。
4. 导出离线模板包
若你需要将制作好的整套文稿（含所有页面源码、引用的组件与本地资源）迁移到其他服务器、备份或分享给其他团队：
- 在项目操作栏点击 “导出”（Export）；
- 系统会执行资源完整性校验，确认无缺失后，打包生成标准的平台离线包（
.zip）； - 离线包内严格包含
manifest.json、project/与相关元数据，可用于后续一键导入。
5. 常见问题与排障
| 现象 | 可能原因 | 建议排查方法 |
|---|---|---|
| 预览区域空白 | Vue 页面语法报错，或引用了不存在的组件/资源 | 1. 切换到“源码”面板检查编辑器底部是否有红线报错； 2. 检查 @runtime-kit 路径版本号是否正确；3. 打开浏览器 F12 查看 Console 日志。 |
| 图片或字体显示叉号/回退 | 资源未上传、已被归档或公开回源地址配置不匹配 | 1. 进入“资源管理”检查该素材是否被意外归档； 2. 检查环境变量 RUNTIME_PUBLIC_BASE_URL 是否可在当前浏览器正常连通。 |
| 截图一直转圈或超时 | 服务端 Chromium 渲染实例负载过高或页面含有死循环 | 检查服务器 CPU/内存占用，并确认页面中没有阻塞执行的 JavaScript 逻辑。 |
| 构建产物外链 404 | 反向代理未配置 /builds 路径转发 | 检查 Gateway 路由规则，单体版默认由内部网关自动路由，确保反代未做截断。 |