# 布局与文字

使用 `page` 组织应用页面，使用 `card` 与 `section` 分组。文字参数按照纯文本显示。

| 方法 | 返回节点 | 参数与用途 |
| --- | --- | --- |
| `page(children)` | div.lo-app | 页面容器，提供整体间距。 |
| `stack(children)` | div.lo-stack | 纵向排列内容。 |
| `card(children)` | section.lo-card | 白色卡片容器。 |
| `header(text, extra?)` | header.lo-header | 页面标题；右侧可放字符串或节点。 |
| `section(title, children)` | section.lo-section | 分组标题与内容；空标题不显示标题节点。 |
| `divider()` | hr.lo-divider | 分隔线。 |
| `title(text)` | h1.lo-title | 主标题。 |
| `hint(text)` | p.lo-hint | 说明文字。 |
| `muted(text)` | span.lo-muted | 行内次要文字。 |
| `empty(text)` | p.lo-empty | 无数据时的提示。 |

```js preview height=340
export default function render(root, platform) {
  const ui = platform.ui;
  root.replaceChildren(ui.page([
    ui.header("生活记录", "今天"),
    ui.card(ui.stack([
      ui.section("待办", [ui.hint("所有事项已经处理完毕。"), ui.empty("暂时没有待办")]),
      ui.divider(),
      ui.muted("新增内容后，可以在这里查看。"),
    ])),
  ]));
}
```

不要让每一张卡片都包含大标题。整页使用一个明确的主标题，分组使用 `section`，说明文字使用 `hint` 或 `muted`。