跳到主要内容

页面状态、按钮与事件

上一课的页面只能看。这一课把它改成安全的前端模拟器：开始、记录一个包装、停止。页面状态只属于当前 Page 实例，不会被误当作设备状态或持久数据。

本节目标​

  • 用 $state 保存当前 Page 实例的临时状态；
  • 用普通 TypeScript 函数处理按钮事件；
  • 在 Design 与 Source 中检查同一份页面源码；
  • 人工调整一个组件的显示样式；
  • 在运行页验证交互和刷新行为。

开始前​

第 1 步：让 AI 加入交互​

记录已有 Git 改动，然后打开 AI Command Center，通过 @ 选择 qxqp 并引用 pages/packaging-station.qp。发送：

目标：把当前包装工作站 QP 首页改成纯前端模拟器。

页面状态：
- let lineRunning = $state(false)
- let packCount = $state(0)

交互：
- “开始模拟”把 lineRunning 设为 true
- “记录一个包装”仅在 lineRunning 为 true 时可用，每次把 packCount 加 1
- “停止模拟”把 lineRunning 设为 false
- 状态和计数直接从页面状态渲染
- 可见文案继续使用当前 App 的 i18n

范围：
- 只修改 pages/packaging-station.qp 和必要的 `i18n.json` 文案
- 使用当前页面支持的事件处理器、$state 和已安装的功能包组件
- 不修改 Variable、Object、QG、C#、Pulsar 或 Safety
- 所有按钮必须清楚标记为模拟，不得暗示会控制真实设备

完成后校验 QP 和 i18n，并报告修改的状态、函数、按钮事件和诊断结果。

第 2 步：检查与微调​

  1. 在 Design 中选择三个按钮，确认 Inspector 的事件指向对应函数。
  2. 切到 Source，确认状态用 $state 声明，按钮没有内嵌设备逻辑。
  3. 回到 Design，选择包装计数组件，调大字号并设置易读的强调色。
  4. 保存并执行 Build，确认 Problems 没有阻止页面运行的错误。

清晰的数据流应是：

按钮事件 → 页面函数 → $state → 界面响应式更新

第 3 步：运行验收​

  1. 先在 Page 的 Preview 中点击开始模拟，确认三个按钮能按预期改变界面状态。
  2. 点击 Build，部署成功后点击 开始。
  3. 在浏览器打开当前运行目标根地址；本机默认是 http://127.0.0.1:9210/。不要在地址后添加 /api。
  4. 点击 记录一个包装 三次，计数应为 3。
  5. 点击 停止模拟，记录按钮应不可用。
  6. 刷新运行页，状态与计数应恢复默认值。

刷新后复位是预期行为：$state 属于当前 Page 实例。需要跨页面或重启保留的数据，应使用明确的 App/Object 存储能力。

安全边界​

注意

页面事件函数只负责 UI 协调。设备批次、长等待、通信、运动和安全联锁必须放在经过工程确认的 Object 或 QG 中。

恢复时可引用当前文件并发送：

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

下一步​

下一课把页面内模拟迁移为可调试的 QG Object：QG 流程、对象调用与调试。