2.3 页面与区块：把积木拼成界面

2.3 页面与区块：把积木拼成界面

本节摘要：界面装配的三层结构是菜单、页面、区块：菜单管导航，页面管布局，区块管数据呈现。本节讲清三层各自的职责边界，给出常用区块的选型对照与操作配置，最后用一页「客户工作台」把 2.2 建的四张表拼成销售真正爱用的界面。

2.2 建好的四张表此刻还躺在数据层里，销售同事看不见也摸不着。这一节把它们搬上台面。界面装配在 NocoBase 里不叫「开发」，叫拼装——因为零件都是预制的，你的工作是把它们放到正确的位置、拧到正确的参数。

一、三层结构：菜单、页面、区块

先分清三层各自的职责。菜单是导航树，决定应用的信息架构：销售入口下挂「客户」「联系人」「商机」几项，每项指向一个页面。页面是布局容器，内部是二十四格栅栏体系，区块像砖块一样摆进栅格，宽度以栅格数计。区块是最小呈现单元，一块区块绑定一张数据表或其视图，负责把数据变成表格、卡片、日历或看板。

三层的拧螺丝顺序永远自上而下：先菜单后页面再区块。反过来先拼一堆区块再想菜单，多半会收获一坨需要返工的布局。

图 2-2 客户工作台的界面分区标注

二、区块选型：按使用姿势挑零件

区块的选型依据是「使用者怎么消费这份数据」。逐行扫描、需要批量操作，用表格；按时间轴回顾，用日历或时间线；按阶段拖拽推进，用看板；单条记录的完整呈现，用详情。同一张表可以同时供多个区块消费——这正是 1.1 讲的解耦红利。选型时问一句「用户在这里的动作是扫、找、拖还是读」，答案就能锁定区块类型。

三、操作与弹窗：让区块动起来

区块只是陈列，操作才是行为。表格区块自带一组默认操作（筛选、刷新、新增、销毁），每颗都能单独启停和改权限；更常用的是自定义弹窗操作：在表格行上加「编辑」按钮，点击弹出详情页，详情页里放表单区块。这一套「行操作 → 弹窗 → 表单」的组合是界面装配的高频套路，配置步骤固定如下：

给客户表格加「编辑」弹窗（界面操作序列）：
  1. 表格区块配置 → 行操作 → 添加「弹窗」操作
  2. 弹窗标题写「编辑客户」，布局选抽屉或对话框
  3. 弹窗内添加「表单」区块，数据来源选「当前记录」
  4. 表单勾选可编辑字段：等级、负责人、备注（名称设为只读）
  5. 表单底部放「提交」操作，类型选「保存后关闭弹窗」
  6. 保存配置 → 回到页面 → 任意行点「编辑」试运转
  预期结果：修改等级并提交，列表该行立即刷新为新值
​

弹窗里挂子表格是这一节的加分动作：编辑客户的弹窗里再放一块「联系人」子表格区块，数据范围绑定「当前记录的关系字段」——销售在客户详情里直接增删联系人，不用跳页。这颗螺丝的参数是区块的「数据范围」配置，选「关联属性」再指到关系字段即可。

四、装配纪律：少即是快

界面层最容易犯的错是贪多：一页塞五块区块、字段全量上列、每个按钮都开。后果是页面加载变慢、新用户无所适从。现场纪律三条：一页聚焦一个任务，区块数量控制在两三块；列表列数控制在六列以内，长文本与金额明细进详情；默认操作之外每加一颗按钮都要能说出它服务的动作。按这套纪律装配，销售打开工作台的三秒内就知道该点哪里——这比展示技术完善度重要得多。

⚠️ 常见坑：把筛选范围漏配。看板区块默认会显示全表数据，如果你的看板只想让销售看自己的客户，必须在区块的数据范围里绑定「当前用户」变量，否则数据越权展示，第 3 章的权限配置也救不回已经看见的眼睛。

💡 关键直觉：界面装配的验收标准不是「功能全」，而是「新同事不看文档能完成主任务」。拉一位没用过的同事试操作五分钟，卡壳处就是你的返工点。

深入一格：区块配置的底稿

界面上拧的每颗螺丝，底层都对应一段配置记录。看一份表格区块的配置底稿，能帮你理解「界面即配置」这句话的分量——你拖拽的每个动作，最终都落成这样一段结构化数据：

// 客户表格区块的配置底稿（界面操作后自动生成，节选）
{
  "contentType": "collection",           // 绑定数据表
  "dataSource": "customers",             // 客户表
  "columns": ["company_name", "level", "owner", "last_contact"],
  "filter": { "level": { "$in": ["A-战略", "B-重点"] } },  // 默认筛选
  "sort": { "last_contact": "desc" },    // 默认排序：最近联系在前
  "pageSize": 20,
  "toolbar": ["filter", "refresh", "create"],  // 顶部启用的操作
  "rowActions": ["view", "update", "destroy"]  // 行操作
}
​

读懂底稿有实际收益：排查「页面显示不对」时，比对配置底稿与预期，比在界面上反复点开面板快得多；5.1 的环境迁移本质上搬运的也是这批记录，看懂一份底稿，就明白了配置包里装的是什么。改配置仍然建议走界面——底稿是给你读的，不是给你手改的，理由在 4.4 的材料学里说过：绕过平台改配置，缓存与校验不知情，灵异现象随之而来。

弹窗与子表格的配置同构：弹窗是页面的特殊形态，子表格是绑定关系字段的区块，配置底稿里各自一段记录。把 2.3 的高频套路练熟之后，你读自己应用的配置包，应当像读自己写的笔记一样顺。

装配要点回顾

• 三层职责：菜单定导航、页面定布局、区块定呈现，自上而下装配不返工；
• 区块选型：按「扫、找、拖、读」的使用动作挑区块，同一张表可多视角复用；
• 高频套路：行操作、弹窗、表单三件套，子表格挂关系字段实现页内维护；
• 数据范围：每个区块独立配数据范围，「只看自己」这类需求在区块层解决；
• 装配纪律：一页一个任务、六列以内、按钮能省则省；
• 下一步：2.4 把整章零件总装成首个应用，走一遍从需求到验收的完整交付。