# 高级界面

这些组件是可选的增量能力。应用应先通过 `platform.can("ui.<name>")` 判断，再提供清楚的降级结构；不能因为宿主没有组件就让页面打不开。

## 分段选择与日期

- `segment(items, options?)`：返回带 `tablist` 角色的分段控件，项目为 `{ id, label }`，选项支持 `value` 和 `onChange(id)`。
- `datePicker(attrs?)`：返回原生日期输入，默认 `type="date"`，属性会传给输入节点。
- `calendar({ value, dates, onChange })`：返回日期按钮网格；`dates` 是 `YYYY-MM-DD` 字符串，选择后回调该字符串。

```js preview height=300
export default function render(root, platform) {
  const ui = platform.ui;
  const status = ui.hint("当前显示本周");
  const segment = ui.segment([
    { id: "week", label: "本周" },
    { id: "month", label: "本月" },
  ], { onChange: (id) => { status.textContent = id === "week" ? "当前显示本周" : "当前显示本月"; } });
  const date = ui.datePicker({ value: "2026-10-14" });
  date.setAttribute("aria-label", "选择日期");
  root.replaceChildren(ui.page([ui.card(ui.stack([segment, date, status]))]));
}
```

## 图表

`chart({ type, data, label, max })` 使用内联 SVG，`type` 支持 `line`、`bar`、`donut`。`data` 可以是数字数组，也可以是 `{ value }` 数组。它只负责表达已经准备好的数据，不会自行读取数据库；`label` 是无障碍名称。

```js preview height=300
export default function render(root, platform) {
  const ui = platform.ui;
  root.replaceChildren(ui.page([ui.card(ui.stack([
    ui.title("本周趋势"),
    ui.chart({ type: "line", data: [3, 5, 4, 8, 6], label: "本周完成事项趋势" }),
    ui.chart({ type: "bar", data: [{ value: 4 }, { value: 7 }, { value: 2 }], label: "分类数量" }),
  ]))]));
}
```

## 状态、菜单与抽屉

- `skeleton(lines?)`：表示正在加载的页面骨架；加载结束后替换节点，不要与空状态混用。
- `emptyState({ title, text, action, onAction })`：带标题、说明和可选动作的空状态。
- `menu(items, options?)`：返回原生 `details` 菜单；项目为 `{ label, disabled, onSelect }`。
- `drawer({ title, children, closeLabel, onClose })`：立即显示右侧抽屉并返回遮罩节点。它适合轻量详情或编辑，不适合多步骤长任务。

```js preview height=340
export default function render(root, platform) {
  const ui = platform.ui;
  const menu = ui.menu([
    { label: "编辑", onSelect: () => ui.toast("可以在这里打开编辑") },
    { label: "删除", onSelect: () => ui.toast("请先显示确认") },
  ], { label: "更多操作" });
  root.replaceChildren(ui.page([ui.header("记录", menu), ui.card([
    ui.emptyState({ title: "还没有记录", text: "添加第一条记录后会显示在这里。", action: "添加记录", onAction: () => ui.toast("开始添加") }),
    ui.button("查看详情", () => ui.drawer({ title: "记录详情", children: [ui.hint("抽屉保留当前列表位置。"), ui.button("关闭", () => document.querySelector(".lo-drawer-mask")?.remove(), "secondary")] }), "secondary"),
  ])]));
}
```

降级示例：

```js
const chart = platform.can("ui.chart")
  ? ui.chart({ type: "line", data: values, label: "趋势" })
  : ui.list(values.map((value, index) => ui.row(`第 ${index + 1} 项`, String(value))));
```

这些组件仍然使用宿主的颜色变量和 `lo-*` 类，应用可以覆盖布局。图表不包含外部脚本或图片请求；抽屉和菜单的复杂键盘焦点管理需要应用根据自己的任务补充。