跳到主要内容

页面变量、按钮与 Page Method

上一课的页面只能看。这一课让 AI 把它改成一个安全的前端模拟器：开始、记录一个包装、停止。你会理解按钮如何调用 Page Method，以及为什么页面变量不能当作设备状态或持久数据。

本节目标​

  • 用页面 globals 保存本页的临时状态
  • 用 Page Method 集中处理按钮动作
  • 检查按钮和方法之间的结构化绑定
  • 人工调整一个 Widget 的显示样式
  • 在运行页验证交互和页面刷新行为

只需要先懂四个概念​

概念作用
页面变量（globals）当前页面实例的临时 UI 状态；刷新页面后会恢复默认值。
Page Method页面内有名字的交互逻辑，按钮只调用它，不把脚本塞进 action 字段。
ActionWidget 事件与 Page Method 之间的结构化绑定。
QXPage Method 访问 Widget、页面变量、对象和查询的统一运行入口。

本课使用 QX.globals，因为计数和运行状态只是 UI 演示。跨页面运行状态应放在 App 变量；需要重启后保留的小型参数应使用 Saved 变量；真实设备状态应来自 Object。

开始前​

第 1 步：让 AI 加入交互​

先在 Git 面板或任务详情中记下已有改动。然后打开 AI Command Center，在输入区通过 @ 选择 qxpage，并引用 pages/packaging-station.qxpage。发送：

目标：把当前包装工作站首页改成“纯页面模拟”的可交互版本。

页面状态：
- QX.globals.lineRunning，默认 false
- QX.globals.packCount，默认 0

交互：
- “开始模拟”按钮调用命名 Page Method，把 lineRunning 设为 true
- “记录一个包装”按钮只在 lineRunning 为 true 时可用，每次把 packCount 加 1
- “停止模拟”按钮调用命名 Page Method，把 lineRunning 设为 false
- 状态和计数 Widget 使用表达式读取页面 globals
- 操作后给出简短、可翻译的提示

范围与约束：
- 只修改 pages/packaging-station.qxpage 和必要的 i18n.json 文案
- 使用 qxpage 当前支持的 Page Method 和结构化 action invocation
- action 字段中不得直接写 JavaScript，也不得使用非空字符串方法名
- 不修改 variables.json、objects.json、Graph、C#、PLC、Pulsar 或 Safety
- 这些按钮必须清楚标记为模拟，不得暗示会控制真实设备

完成标准：
- 校验页面和 i18n.json
- 列出 globals、Page Methods、三个按钮各自绑定的方法和校验结果

本节的主要工程产物​

这一步仍然只应修改：

  • pages/packaging-station.qxpage
  • i18n.json

页面文件内部会增加 globals、methods 和 Widget action。variables.json 不应变化，因为这里没有创建跨页面 App 变量。

第 2 步：在编辑器中检查​

  1. 打开 packaging-station 页面。
  2. 点击画布空白处，右侧页面属性中找到 方法。
  3. 确认能看到负责开始、计数和停止的命名方法；名称可以与提示词不同，但职责应一一对应。
  4. 逐个选择三个按钮，在右侧属性面板检查 action 指向正确的方法。
  5. 选择状态和计数 Widget，确认它们使用表达式读取 QX.globals，而不是写死结果。
  6. 检查底部 问题（Problems） 中没有错误。

判断是否设计正确时，重点不是方法叫什么，而是这条链路是否清楚：

按钮事件 → 结构化 Action → Page Method → QX.globals → 画面更新

人工微调：突出包装计数​

这次不让 AI 包办最后一步：

  1. 在画布中选择显示包装计数的 Widget。
  2. 在右侧属性面板切到样式相关区域。
  3. 把字号调大一级，并选择与标题不同但仍易读的强调色。
  4. 保存页面（Cmd+S / Ctrl+S）。

这个微调不会改变方法或数据，只验证你能在 AI 生成后继续使用可视化编辑器接管设计。

第 3 步：运行验收​

  1. 点击标题栏 开始，等待状态变为 运行中。
  2. 从应用中心打开运行页。
  3. 点击 开始模拟，状态应变为运行中。
  4. 连续点击 记录一个包装 三次，计数应变为 3。
  5. 点击 停止模拟，记录按钮应回到不可用状态。
  6. 刷新运行页，状态和计数应回到默认值。

最后一步是预期行为，不是数据丢失：QX.globals 只属于当前页面实例。

安全边界​

注意

Page Method 适合 UI 事件胶水，不适合承载设备批次、长时间等待、底层通信、运动控制或安全联锁。真实“开始”按钮应调用经过人工确认的 Object/Graph 方法，不能直接在页面里实现机器流程。

不要因为按钮已能点击，就把它连接到现场设备。下一课会先建立模拟 Object 和可调试 Graph，再让页面调用明确的设备能力。

出问题时怎么恢复​

症状检查和恢复
按钮点击没有反应确认已保存并刷新运行页；检查 action 是否是带 method 的结构化绑定，目标方法是否仍存在。
计数文字不更新检查 Widget 表达式是否读取 QX.globals.packCount，方法是否真的修改同一个 key。
刷新后计数归零这是页面 globals 的正常边界；不要用隐藏的浏览器存储规避。需要持久化时重新设计为 Saved 变量或业务存储。
问题面板报未知 QX.*@ 引用页面，让 AI 基于当前诊断修复同一文件，不要让它添加宽泛降级。
AI 似乎改了 Graph 或对象与任务开始前的基线比较，让 AI 先解释；只恢复确认由本轮任务产生的越界改动。

可以复制下面的恢复指令：

请只分析并修复 @pages/packaging-station.qxpage 当前的问题诊断。
保留现有布局和三种模拟交互，不新增对象、Graph、C# 或持久化方案。
修复后重新校验，并说明原因为何。

下一步​

下一课把页面模拟升级为分层的模拟设备流程，并用断点观察成功和超时分支：模拟对象、Graph 与调试。