页面与交互
场景与控件
用场景定义页面边界，用控件定义稳定动作入口。
页面与交互
页面负责展示，动作负责结算
场景是一次页面运行的边界；控件是可绑定、可测试的动作节点。纯 AI 页面通常由一个响应式渲染布局和少量稳定控件组成。
# 页面合同
向 AI 描述一个场景时提供：
- 玩家进入页面的目标和离开路径；
- 顶部状态、主要内容、动作区和弹窗；
- 读取的属性、对象、表格和动态字符串；
- 每个动作的成功、失败和重复提交行为；
- 桌面、窄屏、触摸和键盘需求；
- 页面切换时必须清理的特效、音频和临时状态。
AI 应先查询现有资源，再创建最小控件集合。视觉元素不需要一一对应控件；只有需要触发 Worker 规则或插件能力的交互才绑定控件。
# 控件是语义动作
渲染布局中的按钮
-> lp-control 绑定稳定控件 ID
-> 控件需求/脚本在 Worker 中结算
-> 属性、对象或表格改变
-> 页面收到新快照并重新渲染
例如“领取奖励”控件拥有稳定 ID 和一次性领取脚本。文字、图标和排版由渲染布局决定，奖励不在 HTML onclick 中实现。
# 页面和规则的边界
| 内容 | 放在哪里 |
|---|---|
| 页面 HTML/CSS 与响应式布局 | 渲染布局脚本 |
| 高频精灵和连续绘制 | Canvas renderer |
| 点击、输入和插件入口 | 控件 binding |
| 属性/对象变更 | 控件或事件 Worker 脚本 |
| 场景跳转 | tools.gotoScene(sceneID) |
| 临时反馈 | 客户端特效和音频 |
# 场景生命周期
flowchart LR
A[检查场景解锁] --> B[进入场景]
B --> C[读取状态快照]
C --> D[渲染页面与绑定]
D --> E[玩家触发控件]
E --> F[规则结算]
F --> C
D --> G[离开页面并清理表现会话]
解锁判断只返回是否可进入，不应在读取时发奖励。进入事件要考虑重复进入和刷新。
# 传统布局边界
打开传统模式文档后，场景还可维护名称、按钮、图标、描述、背景音乐、子链接、解锁需求、进入事件和控件顺序。普通布局和绝对定位用于维护旧项目；迁移到渲染布局时保留场景/控件 ID 和脚本，逐页替换表现。
传统控件字段详见 深入理解控件，默认纯 AI 路径无需逐项学习。
# 验收
测试首次进入、解锁失败、返回、刷新、快速点击、异步失败、对象列表为空、弹窗关闭、页面清理和窄屏。规则成功后页面快照应更新；表现失败不回滚规则。
下一步：渲染布局与 Canvas。