#可视化编辑与组件组合

点击预览上方「手动编辑」进入编辑器。左侧是组件树，中间调整选中节点，右侧实时预览。复杂作品可以进入全屏，获得更大的编辑空间。

#用节点 ID 找到正确组件

同一个作品可能有多个文字、按钮或容器。组件树显示节点 ID，并辅助说明类型。先根据 ID 选中节点，再查看属性；不要只根据“按钮”“文字”判断位置。

JVM 演示 中，title 是标题，q1pick 是第一题选择器。天气演示中，btn_fetch 是获取天气的按钮。这些节点 ID 只标识作品内部的节点，不是嵌入整个项目的项目 ID。

可使用「选取修改」从预览定位目标。调整容器关系时，先确认父子结构，再通过节点配置移动；避免把展示内容放到不接受该子节点的组件中。

#五个编辑区域

文字等属性更改后，离开输入框使更改生效；带有「保存事件配置」「应用属性绑定」「校验并应用」的区域，需要点击相应按钮。最后再保存项目。

#从基础组件组合，而不是堆满页面

「基础组件」提供搜索、分类、属性与交互试用。先用容器确定结构，再加入展示和输入组件，最后补充反馈。

优先用主题统一字号、圆角和间距，再为少量重点节点做局部调整。手机端重点检查宽表格、横向排列、长文本和弹层是否仍易用。

#参数和状态如何区分

参数描述作品可配置的内容，例如默认标题、阈值和颜色选项。状态描述运行时会改变的数据，例如当前选中答案、加载中标记和接口结果。

参数页中的「当前实例参数」可用于试不同输入；定义与默认值用于描述作品本身。文章和主题使用项目 ID 引用时，按已保存作品的参数默认值加载，不能靠修改标签中的大段 JSON 覆盖。不同位置需要不同固定内容时，可以创建项目副本，调整默认值后分别引用。

修改状态 JSON 后点击「校验并应用」。例如天气组件初始值：

{
  "loading": false,
  "error": "",
  "fetched": false,
  "response": {}
}

不要把预览已经获取到的一次天气结果当成始终有效的初始值。需要最新数据，应配置打开作品时请求接口，见 天气教程。

#数据绑定

动态属性读取状态路径，例如天气温度读取 /response/current_weather/temperature。有数据绑定入口的属性可通过字段选择器核对来源，再应用绑定。

先保存正确的接口响应示例，编辑器和 AI 才能知道可选字段。字段名称、层级和类型必须与实际响应一致；数字 0、空字符串、空数组和 null 也应分别考虑。

只修改数据来源时，保留已有的计算和空值处理。看到空白结果时，先检查路径和是否已经请求，而不是立即更换展示组件。

#编辑后的检查顺序

完整 JSON 编辑适合需要精确处理结构的使用者。改动前导出一份作品，校验成功后再保存；日常调整优先使用属性和交互面板。