第 3 章：搭建页面 — 从空白到可用
上一章我们把数据表的骨架搭好了，但现在数据只存在于"后台"——用户根本看不到。这一章，我们要把数据摆上台面，让它变成一张真正能用的工单列表。
3.1 什么是区块（Block）
在 NocoBase 中，区块就是页面上的"积木"。想展示一张表格？放一个表格区块。想展示一个表单？放一个表单区块。一个页面可以自由组合多个区块，还能拖拽调整布局。
常见的区块类型：
| 类型 | 用途 |
|---|---|
| 表格（Table） | 以行列形式展示多条数据 |
| 表单（Form） | 让用户输入或编辑数据 |
| 详情（Details） | 展示单条记录的完整信息 |
| 筛选表单（Filter Form） | 提供筛选条件，过滤其他区块的数据 |
| 图表（Chart） | 饼图、折线图等可视化展示 |
| Markdown | 放一段自定义文字或说明 |
记住这个比喻：区块 = 积木，我们接下来就用积木搭出工单管理页面。
3.2 添加菜单和页面
首先，我们需要在系统里创建"工单管理"的入口。
- 点击右上角 UI 编辑器 开关，进入界面配置模式（整个页面会出现橙色的可编辑边框）。
- 鼠标移到顶部导航栏的 「添加菜单项（Add menu item）」 按钮，选择 「添加分组（Add group）」，命名为 「工单管理」。
- 顶部导航栏会立即出现「工单管理」菜单。点击它，左侧会展开分组菜单栏。
- 在左侧菜单栏，点击橙色的 「添加菜单项（Add menu item）」 按钮，选择 「新版页面（v2）（Modern page (v2)）」，依次添加两个子页面：
- 工单列表 — 展示所有工单
- 工单分类 — 管理分类数据
注意：添加页面时会看到「旧版页面（v1）」和「新版页面（v2）」两个选项，本教程统一使用 v2。
3.3 添加表格区块
现在进入「工单列表」页面，给它添加一个表格区块：
- 在空白页面中，点击 「创建区块（Add block）」。
- 选择 数据区块 → 表格。
- 在弹出的数据表列表中，选择 「工单」（就是我们上一章创建的 tickets 表）。
表格区块添加成功后，页面上会出现一个空表格。别急，我们接下来配置它要显示哪些列。
3.4 配置显示列
默认情况下表格不会自动显示所有字段，我们需要手动选择要展示的列：
- 在表格区块表头右侧，点击 「字段（Fields）」。
- 勾选需要展示的字段：
- 标题 — 工单主题，一眼就能看到
- 状态 — 当前处理进度
- 优先级 — 紧急程度
- 分类 — 关联字段，会显示分类名称
- 提交人 — 谁提的工单
- 处理人 — 谁在负责
- 不需要展示的字段（如 ID、创建时间）就不勾选，保持表格清爽。
小技巧：字段的显示顺序可以通过拖拽来调整。把最重要的"标题"和"状态"放在前面，方便一眼扫到关键信息。
关联字段显示 ID 的问题
勾选「分类」后，你会发现表格中显示的是分类的 ID（数字），而不是名称。这是因为关联字段默认用 ID 作为标题字段。有两种方式修复：
方式一：在表格列配置项中修改（仅当前表格生效）
点击「分类」列的配置项，找到 「标题字段（Title field）」，将其从 ID 改为 名称。这种方式只影响当前这个表格区块。
方式二：在数据源中修改（全局生效，推荐）
进入 设置 → 数据源 → 数据表 → 分类表，将 「标题字段」 改为 名称。这样所有引用分类表的地方都会默认显示名称，一劳永逸。修改后需要回到页面重新添加该字段才能生效。
3.5 添加筛选和排序
工单越来越多以后，我们需要快速找到特定工单。NocoBase 提供了多种方式，我们先介绍最常用的 筛选表单区块。
添加筛选表单
- 在工单列表页面，点击 「创建区块」，选择 筛选区块 → 筛选表单。
- v2 页面中不需要选择数据表——筛选表单会直接添加到页面上。
- 在筛选表单中，点击 「字段（Fields）」，会展示当前页面中所有可被筛选的数据区块列表，例如
Table: 工单 #c48b（后面的代码是区块的 UID，用来区分同一张表的多个区块）。
- 鼠标移到区块名称上，会展开该区块可筛选的字段列表。点击字段即可将其添加为筛选项：状态、优先级、分类。
- 添加后，用户在筛选表单中输入条件，表格数据会实时自动筛选。
多字段模糊搜索
如果我们想通过一个搜索框同时搜多个字段，怎么做呢？
点击搜索字段右上角的配置项，会看到 「连接字段（Connect fields）」 选项。展开后会列出每个区块中可被关联搜索的字段——你会发现默认只连接了「标题」。
我们可以选择更多字段，比如：描述，这样用户输入关键字时会同时搜索这些字段。
甚至还能通过关联对象的字段来筛选——点击「分类」，在下一级选项中勾选「分类名称」，搜索时也会匹配分类名称。
连接字段很强大：它可以跨多个区块、多个字段生效。如果页面上有多个数据区块，不妨自己新建区块试试效果！
不想自动筛选？
如果希望用户点击按钮后才触发筛选，可以在筛选表单右下角点击 「操作（Actions）」，勾选 「筛选（Filter）」 和 「重置（Reset）」 按钮。这样用户填好条件后需要手动点击才会执行筛选。
另一种筛选方式：表格自带的筛选操作
除了独立的筛选表单区块，表格区块本身也带有 「筛选（Filter）」 操作按钮。在表格区块上方点击 「操作（Actions）」，勾选 「筛选」，表格工具栏会出现一个筛选按钮。点击后弹出条件面板，用户可以直接按字段条件过滤数据。
如果不想每次点开筛选按钮后再手动找字段，可以在筛选按钮的配置项中预设默认筛选字段，这样用户点开就能直接看到常用的筛选条件。
注意：表格自带的筛选操作目前不支持多字段模糊搜索。如果需要多字段搜索，请使用上面的筛选表单区块配合「连接字段」功能。
设置默认排序
我们希望最新的工单排在最前面：
- 点击表格区块右上角的 区块设置（三横线图标）。
- 找到 「设置排序规则」。
- 添加排序字段：选择 创建时间，排序方式选 降序。
这样，新提交的工单永远排在最上面，处理起来更方便。
3.6 配置行操作
光看列表还不够，我们还需要能点进去查看工单详情，以及编辑工单。
- 在操作列上方，点击第二个 ”+“ 号。
- 点击操作：查看、编辑、删除。
- 每行数据操作栏位会出现「查看」、「编辑」和「删除」按钮。
点击「查看」或者「查看」按钮，会打开一个抽屉（Drawer），里面可以放详情区块来展示完整信息。我们下一章会详细配置它。 点击「删除」，这行数据会被清理掉。
3.7 调整页面布局
到目前为止，页面上已经有了筛选表单和表格两个区块，但它们默认是上下堆叠的，看起来可能不太美观。NocoBase 支持通过拖拽来调整区块的位置和布局。
在配置模式下，把鼠标移到区块左上角的拖拽手柄上（光标会变成十字箭头），按住拖动即可。
把筛选表单拖到表格上方：拖住筛选表单区块，移动到表格区块的上边缘，出现蓝色提示线后松手，筛选表单就会排到表格上面。
把筛选字段拖到同一行：在筛选表单内部，字段默认也是竖着排列的。把「优先级」拖到「状态」右侧，出现竖向提示线后松手，两个字段就会并排在同一行，节省纵向空间。
NocoBase 中几乎所有元素都支持拖拽——操作按钮、表格列、菜单项等等，可以自行探索！
3.8 配置工单分类页面
别忘了我们在 3.2 节创建了「工单分类」子页面，现在来给它添加内容。配置流程和工单列表类似——添加表格区块、勾选字段、配置操作——这里就不重复了，只说一个关键区别。
还记得第 2 章我们创建的「工单分类」表吗？它是一张 树表（支持父子层级）。要让表格正确展示树形结构，需要开启一个配置项：
- 进入「工单分类」页面，添加一个表格区块，选择「工单分类」数据表。
- 点击表格区块的 区块设置（三横线图标），找到 「启用树表格（Tree table）」，开启它。
开启后，表格会以缩进层级的方式展示父子分类关系，而不是平铺所有记录。
- 勾选需要展示的字段（如名称、描述等），配置行操作（添加、编辑、删除）。
- 布局建议：把「名称」放在第一列、「操作」栏放在第二列。分类表字段不多，这样两列布局更紧凑友好。
小结
恭喜你！我们的工单系统已经有了一个像样的管理界面：
- 一个清晰的菜单结构（工单管理 → 工单列表 / 工单分类）
- 一张展示工单数据的表格区块
- 能按状态、优先级、分类快速筛选的筛选表单
- 按创建时间倒序排列的排序规则
- 行操作按钮，方便查看和编辑
- 一张展示分类层级的树表格
是不是比想象中简单？整个过程没有写一行代码，全部通过界面拖拽和配置完成。
下一章预告
光能"看"还不够——用户还得能提交新工单。下一章，我们来搭建表单区块，配置字段联动规则，还会启用记录历史来追踪工单的每一次变更。