跳到主要内容

录制模式

录制模式是 Schema Element Editor 的高级功能，用于捕获和记录 Schema 数据的动态变化，特别适合 AI 智能体对话场景。

功能概述​

录制模式可以：

  • 📹 持续监控 - 轮询或接收 Schema 数据变化
  • 📸 版本快照 - 自动记录每个不同版本
  • 🔍 Diff 对比 - 选择任意两个版本进行差异对比（详见 Diff 对比）

进入录制模式​

方法一：切换模式后点击元素​

  1. 按住 Alt 键
  2. 按下 R 键（可在配置中自定义）
  3. 高亮框变为红色，表示进入录制模式
  4. 点击目标元素，以录制模式打开编辑器

数据获取模式​

录制模式支持两种数据获取方式：

轮询模式（默认）​

  • 工作原理：插件定时调用 getSchema 获取最新数据
  • 优点：无需额外配置
  • 缺点：有轮询延迟，数据变化密集时可能遗漏
配置项说明默认值
轮询间隔获取数据的时间间隔100ms

事件驱动模式​

  • 工作原理：宿主主动推送数据给插件
  • 优点：实时性更好，性能更高

宿主端实现​

使用 SDK 时，在数据变化时调用 recording.push()：

import { useSchemaElementEditor } from '@schema-element-editor/host-sdk'

function App() {
  const { recording } = useSchemaElementEditor({
    getSchema: (params) => dataStore[params],
    updateSchema: (schema, params) => { /* ... */ },
  })

  // 数据变化时推送（SDK 内部判断是否在录制）
  sseHandler.onData = (params, data) => {
    recording.push(params, data)
  }

  return <div>...</div>
}

详细说明请参阅 SDK 使用指南。

录制界面​

进入录制模式后，编辑器界面会显示：

区域说明
版本列表左侧显示所有录制的版本快照
当前内容右侧显示当前 Schema 内容
状态指示顶部显示录制状态和统计信息

版本列表​

每个版本显示：

  • 时间戳
  • 内容摘要
  • 是否为当前版本

点击版本可查看该版本的完整内容。

Diff 对比​

录制模式支持选择任意两个版本进行 Diff 对比，详细说明请参阅 Diff 对比。

停止录制​

点击「停止录制」按钮结束录制。

停止后您可以：

  • 继续查看和对比已录制的版本
  • 选择某个版本作为当前编辑内容
  • 导出录制数据

配置选项​

在配置页面「元素检测与高亮」→「录制模式」中设置：

配置项说明默认值
启用功能是否启用录制模式开启
快捷键切换录制模式的按键R
高亮颜色录制模式的高亮框颜色#FF4D4F（红色）
数据获取模式轮询或事件驱动轮询
轮询间隔轮询模式下获取数据的间隔100ms
数据无变化自动停止超时无变化时自动停止录制禁用

自动停止​

如果数据长时间无变化，可以配置自动停止录制：

  • 设置超时时间（3-300 秒）
  • 留空表示禁用自动停止

使用场景​

AI 智能体对话​

录制模式特别适合 AI 智能体场景：

  1. 用户发送消息
  2. AI 开始流式输出
  3. 录制模式捕获每次内容更新
  4. 输出完成后，可以对比任意版本

实时数据调试​

当页面数据频繁变化时：

  1. 开启录制模式
  2. 触发数据变化
  3. 查看每次变化的具体内容
  4. 定位数据问题

数据变更追踪​

需要追踪 Schema 变更历史时：

  1. 开启录制模式
  2. 进行一系列操作
  3. 停止录制
  4. 回顾和对比各版本

故障排除​

录制的版本很少/遗漏数据​

可能原因：

  1. 轮询间隔设置过大
  2. 数据变化速度超过轮询频率

解决方案：

  1. 减小轮询间隔（如 50ms）
  2. 使用事件驱动模式

录制导致页面卡顿​

可能原因：

  1. 轮询间隔设置过小
  2. 数据量过大

解决方案：

  1. 增大轮询间隔
  2. 使用事件驱动模式（性能更好）

推送数据不工作​

检查清单：

  1. 确认使用 postMessage 模式
  2. 确认 SDK 正确初始化
  3. 确认调用了 recording.push()
  4. 检查浏览器控制台是否有错误