Page 与 Component 参考

Page 是操作员使用的 HMI 画面。Component 是 App 内可复用的视觉模板，主要用于 Repeater 等重复内容。需要创建完整画面时使用 Page；需要统一重复项的外观时使用 Component。

何时查这页

在 Resources → Pages 新建或打开 Page；Pages 下的 Components 分组管理 Component。选中画布空白处查看 Page 属性，选中 Widget 查看内容、布局、样式、动作和权限。

对象	作用
Page	一个可导航、可设为首页的运行画面
Widget	文本、按钮、输入、表格、图表、图片、视频、3D、上传等界面元素
Page method	由 Page 生命周期或 Widget 事件调用的界面逻辑
Expression	用 `{{ ... }}` 把 Widget 属性绑定到当前运行数据
Component	接收 props 并重复渲染统一结构的 App 级模板
requiredRoles	控制 Page 是否可访问，或 Widget 是否可见的 App role 列表

类型	适用场景
Flow method	调用 Object 或 Query、显示提示、条件判断和简单顺序动作
TypeScript method	复杂类型转换、组合返回值和需要代码表达的界面逻辑

在 Page 属性的 Methods 中创建方法，再从 Widget 的事件或 action 属性选择该方法。action 应是编辑器或 AI 生成的结构化方法绑定；不要把任意脚本文本直接粘贴到 action 字段。

Page method 应保持短小，并只做界面协调。稳定设备能力放在 Object，自带顺序、等待、超时和恢复的流程放在 Graph。

常见入口如下：

入口	Page 中的用途
`QX.objects`	读取 Object 运行状态，或在方法中调用 Object / Graph 扩展方法
`QX.variables`	读取 App Variable
`QX.queries`	从 Page method 调用 App 级 HTTP Query
`QX.widgets`	在当前 Page method 中访问已保存的 Widget
`QX.globals`	保存当前页面交互需要的轻量共享值
`QX.actions`	导航和其他运行页交互动作
`QX.i18n`	按当前运行页语言读取 App 翻译

示例：

{{ QX.variables.currentOrder }}
{{ QX.objects["station"].variables.runState }}
{{ QX.i18n.get("startButton") }}

表达式用于即时取值，不适合 await、长时间轮询或有副作用的设备操作。需要改变 Object 状态时，调用 Object 或 Graph method；需要写 App / Saved Variable 时，使用 Graph 的 Variable 节点或明确的后端能力。

Component 不是独立 Page，没有自己的运行入口。它定义重复项的视觉结构：

典型 Component 包括工位卡片、报警条目、IO 状态行和任务标签。