预览、构建与交付

本文解释预览、截图、构建和交付分别解决什么问题；实际操作与故障排查以预览、截图与构建工作流为准。

实时预览

页面保存后，Backend 会创建预览上下文，Runtime 加载页面源码、配置包、资源和组件，Editor 通过 iframe 展示渲染结果。

实时预览适合用来确认：

• 页面代码是否能正常运行。
• 图片、字体、图标和组件引用是否存在。
• 当前主题和样式是否符合预期。
• AI 修改后的视觉结果是否需要继续调整。

页面可视化编辑

Vue 页面可以在 Editor 中打开受限可视化编辑工作区。默认从中间 Runtime 画布直接选择文字、区块或组件，右侧属性面板按“常用样式 → 更多样式 → 技术详情”逐步展示能力；需要定位复杂层级时再展开左侧“页面结构（高级）”。

可视化修改采用“草稿后保存”方式：编辑控件不会实时改写 iframe；保存时 Backend 校验页面版本和源码基线，由 Runtime 完整应用结构化操作，成功后只生成一个新页面版本并刷新画布。这样可以避免编辑态覆盖值与 Backend 规范源码产生两套状态。

AssetImage.v1 使用专用图片检查器：图片资源、替代文本、填充方式和位置控制图片内容，组件 class 只控制外层图片框。原生 <img>、动态属性和缺失属性不会被自动改写；这类情况应改用 AssetImage.v1、AI 或高级源码。

首期适合处理静态字面量，以及由稳定字符串或整数 key 定位的单层 v-for 本地数组项，包括 const、ref 和 reactive 数组字面量。普通结构、段落和组件可以复制或删除；循环中的数据项可以单独复制或删除，循环模板本身只允许整体删除。动态表达式、嵌套循环、复杂 CSS、Tailwind 任意值和未识别类仅展示或保留，不提供可视化写回。

与循环或组件参数直接关联的静态 JSON 数组、对象也可以在属性面板中整块编辑。例如简单字符串列表可以直接调整完整数组，不要求每项额外提供 ID。组件声明为 JSON 的参数只校验 JSON 格式，仍应遵守组件自身的数据要求；编辑中的 JSON 不会实时覆盖画布，保存成功后统一刷新。

组件预览

组件预览依赖组件源码和 previewSchema。previewSchema 应覆盖组件的典型输入，让创作者在发布前确认组件在不同参数下都能稳定渲染。

发布组件前建议检查：

• 参数说明是否清晰。
• 预览输入是否覆盖常见状态。
• 是否依赖已存在的资源、字体或 Runtime Kit 能力。
• 视觉结构是否适合跨项目复用。

截图

截图能力用于生成页面缩略图、预览图和文档展示图。AssetImage.v1 的图片加载失败时，页面会显示资源占位提示，截图仍可生成；补齐图片文件后需手动刷新截图。其他资源加载失败、页面运行错误或 Runtime 服务不可用仍可能导致截图失败。

如果页面看起来正常但截图失败，应优先检查页面是否有长时间阻塞渲染的脚本、缺失资源或运行时报错。

构建与交付

发起构建后，Backend 创建构建任务和 build snapshot，Runtime 拉取 snapshot 并执行构建，再把产物回传给 Backend。构建成功后，用户可以通过稳定链接访问或下载产物。

构建前建议确认：

• 页面顺序、标题和内容已经整理完成。
• 所有资源、字体和组件引用都能预览成功。
• 项目主题和样式已经应用到目标页面。
• 重要页面已经完成截图或人工验收。

完整操作说明见 预览、截图与构建。