应用设计：布局、部件、变量、事件

四个构件

对象浏览器和对象视图开箱即用。业务再具体一点，就要为一个工作流搭一个专门的应用。Workshop 已支持用 JSON 定义页面、分区、组件和变量。拖拽编辑器仍待做。设计应用时先分清四个构件：

有一个陷阱：「设置变量」的事件会立刻把值复制过去，但依赖它的下游变量这时还没更新，事件也不会等它们。需要先算完再往下走的步骤，要拆成两次用户触发。

怎样设计得好用

好用与否可以查数字。过载指一屏里能点的东西太多，过挤指没有留白：

• 顶层导航里的主要操作不超过 5 个；一个视图里可见的部件（按钮、面板、部件合计）不超过 10 个。
• 留白占屏幕的 30% 到 40%；间距用紧凑档，约 16 像素。
• 顺着阅读的路线排：从左上角开始，向右、向下；筛选放最左，内容往右流。
• 页眉写清页面的目的，区块标题给内容分组，副标题一句话说明。
• 浮层只做临时、次要的事，比如填一张表；分析类内容别放进浮层，因为对话框会挡住背景。
• 能滚动的区域里，可点击的目标至少 30 像素；导航和标签页放在页眉里，只有内容区滚动。

在 Nexus 应用里怎么对应

Workshop 用 pages、sections、widgets、variables 声明页面。用 aidc semantic applications save --ontology cell-demo --file board.json --dry-run 校验定义，去掉 --dry-run 保存。页面地址是 /semantic/cell-demo/applications/<apiName>。需要定制交互时，Nexus 应用用代码实现同样的构件。界面用界面 SDK 的类和 ui 模块，数据用语义 SDK：

对照一下那个陷阱：脚本里可以先 await 重算，再进下一步，不会读到旧值。下面是示例工厂看板的状态骨架：

const state = { line: null, selected: null };          // 变量：页面上的两个值
const orders = () => client.objects("workOrder").where(
  state.line ? { lineCode: state.line } : {});          // 对象集变量：由别的变量算出来

async function setLine(line) {                          // 事件：换产线
  state.line = line;
  state.selected = null;                                // 先清掉选中的工单
  await render(await orders().fetchPage({ $pageSize: 50 }));   // 再重算，顺序由 await 保证
}