保存、发布与嵌入

大屏做好后有三种交付方式：发布得到一个运行态链接，直接打开或投屏；导出部署文件，放到自己的服务器上离线运行；用 SDK 嵌入，在自己的系统里加载工程、推送数据、响应交互。本篇按「保存 → 发布 → 部署 → 嵌入」的顺序介绍，例子沿用新手入门做的销售看板。

保存

按 Ctrl+S 或点顶栏「保存」，工程保存到服务器，顶部提示「已保存到服务端」。保存的是草稿：首页卡片显示「草稿」，运行态链接还是上次发布的内容。

编辑器不会自动保存。关闭页面或刷新前记得保存；如果只是打开别人的示例看看，不保存就不会改动它。

历史版本

每次保存时，如果内容和上一份不同，上一份会自动归档成历史版本。点顶栏「历史」查看：

1. 当前版本：编辑器里正在编辑的这一份。
2. 历史记录：按保存时间排列，最多保留 30 条未固定的记录，更早的自动清理；内容相同的稿不会重复归档。
3. 还原 / 备注 / 固定 / 删除：「还原」用这条历史替换当前稿，当前稿如果还没归档会先存一条，不会丢；「备注」写一句说明，方便以后找；「固定」的记录不会被自动清理。

发布

点顶栏右侧的「发布」，生成线上版本：

1. 运行态地址：https://vjmap.com/server/vp/view?project=<工程 ID>，打开就是全屏的运行态，不需要登录。
2. 复制链接：复制运行态地址，发给别人或配到投屏设备上。
3. 打开运行态：在新标签页打开。

发布后首页卡片变成「已发布」。之后再改工程并保存，卡片会回到「草稿」，运行态仍是上次发布的内容，直到再次发布。

项目部署

顶栏「项目 → 项目部署...」把发布相关的操作集中在一起，分两个页签。

发布 Web 链接

1. 两个页签：「发布 Web 链接」和「导出部署文件」。
2. 运行链接：当前的运行态地址，右边是「重新发布」和「复制」。还没发布过时，这里提示先发布。
3. 运行域名：留空时运行态由平台自己的 /view 页面承载，发布后直接能打开；私有化部署时如果把运行态单独部署成一个站点，在这里填它的地址，运行链接会跟着变。

导出部署文件

不想依赖平台服务器，或者要在内网、离线环境里运行，就导出部署文件：

1. 导出类型：
   • 运行包（静态）：一个压缩包，解压后用任意静态服务器（Nginx、IIS、对象存储等）打开 index.html 就能运行，适合直接交付。
   • 二次开发工程包：一个 Vite + Vue 源码工程，内置运行时 SDK、工程数据和入口回调；解压后执行 pnpm i && pnpm build 就能再开发、编译和部署，产物在 dist/，回调写在 src/hooks.ts。
2. 选项：「将动态数据源转换为静态（离线自包含）」会把接口、WebSocket、平台数据等动态数据源冻结成当前数据，适合完全离线演示；「附带原始工程文件」会在包里放一份 .vpproj.json，以后可以再导入编辑器修改。
3. 导出部署文件：生成并下载压缩包。

另存为工程文件

顶栏「项目 → 另存为」（Ctrl+Shift+S）把工程导出成文件，用于备份、在两台服务器之间搬工程，或交给开发人员：

1. 文件名：默认是工程名。
2. 格式：
   • 工程文件（.vpproj.json）：纯数据，可在首页「导入项目文件」再次载入。
   • 工程包（.vpproj.zip，含素材）：连同引用的图片等素材一起打包，换服务器时选它。
   • 工程代码（.vp.tsx）：把工程导出成一份可读的代码，适合让 AI 或开发人员整体修改后再导回。
   • TSX 工程包（.zip，可独立编译）：代码形式的完整工程。
3. 将动态数据源转换为静态：先刷新一次数据，再把接口等动态数据源内联为当前快照。
4. 导出：下载文件。

嵌入到自己的系统

按集成深度从浅到深，有三种做法：

SDK 的用法很简单，第一个参数是挂载容器，第二个是工程文件的内容：

const ctx = createVpViewer('#app', body /* 工程文件内容 */, {
  params: { region: '华东' },   // 项目参数，按用户或场景显示不同内容
  onReady(ctx) {
    console.log('页面数：', ctx.screens.length)
  },
})

// 替换某个数据源里某张表的数据，绑定它的组件自动重绘
ctx.setData('<连接 ID>', '<表 ID>', rows)

连接 ID 和表 ID 可以在导出的工程文件里查到。返回的 ctx 还能切换页面、打开或关闭弹窗、查找组件、修改组件属性、监听交互事件。完整接口见开发文档的 SDK 与扩展开发，AI 可视化平台示例里有几百个可以在线修改运行的 SDK 示例。