来源：https://ui.docs.xihanfun.com/examples/

# 场景示例

组件参考是一件一件看的：一页一个组件，一个示例一个知识点。这一册反过来——**把十几件组件摆进同一屏**，看它们凑在一起是不是一副样子。

一件组件单看总是对的。间距差一档、圆角差两像素、标题层级各写各的，只有在同框时才显形。所以这一册的每一页都是一整屏的界面，不是组件目录。

## 收了哪几页

| 页 | 主要看什么 | 同框的组件 |
| --- | --- | --- |
| [后台壳](./admin-shell) | 骨架、导航与头部一条线 | 布局 · 侧栏导航 · 面包屑 · 页头 · 工具条 · 角标 · 菜单 · 头像 · 提示 · 卡片 · 统计 · 分隔线 · 标签 · 按钮 |
| [表单页](./form-page) | 一张值表喂七种控件 | 表单 · 字段 · 字段组 · 文本框 · 下拉 · 单选组 · 数字输入 · 标签输入 · 滑块 · 开关 · 复选框 · 警告条 · 页头 |
| [数据页](./data-page) | 筛选、表格与三种状态 | 页头 · 文本框 · 下拉 · 分段控件 · 表格 · 标签 · 分页 · 空态 · 加载指示 · 提示 · 分隔线 · 按钮 |
| [对话页](./chat-page) | 一条回复里的五件套 | 消息流 · 思考过程 · 工具调用 · 流式正文 · 代码视图 · 审批 · 提示输入框 · 头像 · 标签 |

## 这一册怎么写的

- **是真组件，不是截图。** 每页的预览就是当前这一版库跑出来的，点得动、切得了框架配色与深浅模式；源码在「查看代码」里，与预览同一个文件。
- **不写裸色值。** 页面里的每一处颜色都取[设计令牌](../guide/theme)，间距与圆角同理。换主题、换品牌色、切深色，这几页跟着一起变。
- **不写时长与曲线。** 动效节奏交给[动效令牌](../guide/motion)，示例里一个 `ms` 都不出现。
- **数据是假的，接线是真的。** 取数用定时器代替请求，其余的键盘、焦点、校验与状态流转都走组件本身。
- **这一册目前只有 Vue 版。** 顶部的框架切换器切到别的框架时，这几页会明说「还没有这一版」——组件参考那一册里每个组件都有 Vue 版，另外两家各自铺到哪一步见[适配器](/adapters/vue)，场景页是这一册单独欠的账。

想看某一件的完整契约，从[组件参考](../components/)进去；想知道这些页面为什么长这样，看[核心概念](../guide/anatomy)。