完成后你将得到
一个显示实时温度与设备状态的画面，重新打开后绑定和布局仍保留。
开始前准备
- 第 2 章采集闭环已通过，记下两个可用通道：一个数值、一个状态。
- React 宿主已启用 PlgSvgEditor，并有工程编辑与视图查看权限。
01 · 创建最小画面
- 在宿主打开 SVG 组态列表（/svg-editor），新建练习工程，取一个可识别的名称。
- 放置标题、数值文本、单位、设备符号和状态说明，先在常用屏幕比例下整理对齐和间距。
预期结果
画布上的对象清晰可选，设计尺寸适合目标显示器。
02 · 绑定一个真实值
- 选中数值组件，在当前组件的数据绑定设置中选择已验证的通道，将数值映射到显示属性。
- 设置单位与数值格式；按组件支持的状态属性区分有效数据、无数据和通信异常。
- 设备符号按状态值配置显示或颜色规则，同时保留文字说明，避免只靠颜色判断。
预期结果
预览时数值与表视图一致，状态变化能够被识别。
03 · 加入工程图片
- 需要背景或示意图时，使用选择图片窗口的本地上传或共享图库。
- 当前版本会把选中的图片嵌入工程；在保存前确认图片加载完整。无需为了单张图片依赖公共图库在线。
预期结果
重新打开时背景和图元图片仍可显示。
04 · 保存、重开并挂视图
- 点击保存，离开编辑页后重新打开同一工程，检查布局、绑定与图片。
- 通过项目支持的视图配置入口选择 SvgEditorView 并关联已保存工程，再配置对象与查看权限。
- 使用普通查看账号从行业导航打开运行画面，不以编辑器预览代替运行验收。
预期结果
设计保存、工程重开与最终视图三个入口显示一致。
遇到问题，先检查这里
预览有值，运行无值
检查运行视图关联的工程是否正确、是否已保存，以及运行账号对通道与视图的权限。
只看到默认数值
检查是否仍使用静态示例值、绑定到的属性是否正确，以及上游通道是否有效。