基于业务组件库的低代码页面搭建：组件与 API 适配，零开发搭页面
在业务组件库与通用函数库落地之后，我们希望能进一步减少「搭一个列表页、表单页也要写一堆胶水代码」的重复劳动。于是基于现有业务组件库和现有接口 API，做了一套组件与 API 一对多适配的页面搭建能力：运营或业务同学在配置界面里选组件、绑数据源、配枚举和样式，即可生成可用的页面，无需前端开发参与。数据源支持一键拉取、导入、手动添加；枚举值支持扩展；页面配置采用三列布局（左侧组件库、中间画布、右侧属性配置）；同时支持模板功能——将配好的页面保存为模板，其他用户可基于模板修改内容，快速完成自定义页面配置。本文介绍整体思路与关键能力。
一、为什么做「组件 + API 适配」
业务组件库里已有表格、表单、卡片、图表等组件，后端也提供了规范的 REST 接口。但每做一个新页面，仍然要：选组件 → 写请求 → 把接口字段映射到组件的 props → 再处理枚举、分页等。这类工作重复度高、易出错，且排期依赖前端。组件与 API 一对多适配的目标是：在配置层完成「某个组件用哪个接口、哪些字段对应组件的哪些属性」，运行时由搭建引擎按配置拉数、填进组件，不再为每个页面写一层胶水代码。
二、整体能力概览
- 数据源：支持一键拉取（从现有接口文档或网关拉取 API 列表）、导入（上传 Swagger/OpenAPI JSON 或手工整理的接口清单）、手动添加（填写 URL、Method、请求/响应示例），统一管理为「数据源」，供页面里的组件绑定。
- 组件与 API 绑定：每个放到画布上的组件可绑定一个数据源（或子路径），并配置字段映射（接口返回的
list、data.name等映射到组件的dataSource、titleField等），实现一对多（一个接口可被多个组件用、一个组件也可切换不同接口）。 - 枚举值：在配置数据源时可设置默认枚举值（如某接口返回的 status 字段约定 0/1/2 的展示文案）；组件绑定数据源后可沿用或覆盖；支持添加、编辑枚举项，回放时组件按枚举展示文案或标签。
- 三列配置界面：左侧为组件库（含统计数据、列表页面、搜索过滤组件、折线图、曲线图、饼图、文本、按钮等），中间为画布（如：顶部搜索栏、中间两个图表并排、下方一个表格），右侧为当前选中组件的配置（数据源接口、入参/出参、组件参数、绑定自定义事件；不提供样式和事件的独立配置项，而是提供组件参数供选择，并支持绑定自定义事件），结构清晰、上手快。
- 模板功能：将当前配置好的页面保存为模板（命名、可选分类），其他用户可在「从模板创建」里选择模板，打开后即为一份可编辑的副本，修改数据源、组件或布局即可完成自定义页面，无需从零拖组件。
三、数据源：一键拉取、导入、手动添加
数据源是所有「组件绑 API」的基础。我们支持三种录入方式：
| 方式 | 说明 |
|---|---|
| 一键拉取 | 从内部接口文档平台或网关拉取已登记的 API 列表，按模块/服务筛选后批量导入为数据源，保证与现有接口一致。 |
| 导入 | 上传 Swagger/OpenAPI 的 JSON，或我们约定的「接口清单」Excel/JSON，解析出 URL、Method、请求参数、响应示例，自动生成数据源及字段结构。 |
| 手动添加 | 填写接口地址、Method、入参（请求参数）、出参（响应结构，可手写 JSON 示例或从拉取结果带出）；可在数据源层面配置默认枚举值，供绑定该数据源的组件直接使用或覆盖。 |
数据源在配置时需填写入参、出参（请求参数与响应结构），并可配置默认枚举值（如接口返回的 status 字段在数据源层面就约定好 0/1/2 的展示文案），组件绑定该数据源后可直接沿用或覆盖枚举。数据源列表统一展示「名称、URL、Method、最近使用」等，配置组件时从下拉选择即可。
四、组件与 API 的一对多适配
- 一个接口多组件：同一数据源（如「用户列表接口」）可被多个表格、卡片、图表组件绑定，每个组件配置自己的字段映射（如表格用
list、图表用list聚合后的统计），互不干扰。 - 一个组件换接口：同一类组件在不同页面可绑定不同数据源，只需在配置里切换数据源并改字段映射，无需改代码。
- 实现方式：画布上的每个组件实例保存
dataSourceId、fieldMapping（接口路径 → 组件 prop）。运行时搭建引擎根据当前页面配置，请求对应接口，按fieldMapping把结果填到组件 props，组件库无需为「接哪个接口」写死逻辑，只消费标准 props。
这样，无需开发工作即可完成「选组件 → 选接口 → 配映射」的页面搭建，新页面只需配置、不占排期。
五、枚举值支持添加
列表中「状态」「类型」等字段往往需要展示为文案或标签，而不是原始 0/1/2。在配置侧我们支持：
- 为任意绑定字段添加枚举：选择字段后，在右侧配置区增加「枚举」配置项，可添加多条「值 → 展示文案」。
- 枚举与数据源解耦：同一数据源在不同页面可为同一字段配置不同枚举（如 A 页用「启用/禁用」、B 页用「是/否」），满足多业务展示需求。
- 回放时组件根据当前字段值与枚举配置渲染文案或 Tag，无需在组件内写死。
六、三列布局：组件库、画布、属性配置
页面配置界面采用三列布局，降低学习成本、提高操作效率：
- 左侧（组件库）：展示可选组件，包括统计数据、列表页面、搜索过滤组件、折线图、曲线图、饼图、文本、按钮等；拖拽到中间画布即可添加实例。
- 中间（画布）：所见即所得，展示当前页面布局（例如：顶部搜索栏、中间两个图表并排一列、下方一个表格）；支持拖拽排序、删除、点击选中；选中后右侧显示该组件的配置项。
- 右侧（属性配置）：展示数据源接口（下拉选择已录入数据源）、入参/出参（实则在配置数据源时已维护，此处可查看或覆盖）、组件参数（该组件暴露的可配置项供选择，如分页大小、是否显示序号等）；不提供独立的「样式」「事件」配置项，而是通过组件参数表达展示与行为，并支持绑定自定义事件（如按钮的点击、表格的行操作，绑定到预置或自定义事件名，由运行时注入实现）。枚举可在数据源默认值基础上按组件覆盖。
这种布局与常见低代码/搭建产品一致，用户完成「从左侧拖组件（统计/列表/搜索/折线图/曲线图/饼图/文本/按钮等）→ 中间摆布局（如搜索栏 + 双图表 + 表格）→ 右侧选数据源与组件参数、绑自定义事件」的流程。
七、模板功能：保存与基于模板创建
- 保存为模板：用户在画布上配置好页面（组件、数据源、字段映射、枚举、布局）后，可点击「保存为模板」，填写模板名称与可选分类，当前配置即存为一份模板。
- 基于模板创建：新建页面时可选「从模板创建」，在模板列表中选择已有模板，打开后即得到一份可编辑的副本（不影响原模板）；用户只需修改数据源、组件或枚举等内容即可完成自定义页面配置，无需从空白画布重新拖组件。
- 模板适用于「列表页」「表单页」「仪表盘」等常见形态，沉淀后能显著减少重复配置、统一风格。
八、小结
- 基于业务组件库与现有接口 API，通过组件与 API 一对多适配（选数据源 + 字段映射），实现无需开发即可完成页面搭建。
- 数据源支持一键拉取、导入、手动添加，配置时填写入参、出参及默认枚举值；页面配置为三列布局（左侧组件：统计/列表/搜索/折线图/曲线图/饼图/文本/按钮等；中间画布：如搜索栏+双图表+表格；右侧：数据源接口、组件参数、绑定自定义事件，不提供独立样式与事件配置）；模板功能支持保存为模板、基于模板修改完成自定义页面。
- 以上能力均在配置层完成，不要求业务组件库为「接哪个接口」写死逻辑，便于与现有技术栈和接口规范共存，并可持续扩展组件与数据源类型。