100. 前端通用表格总结

学习目标

这一节总结前端通用表格从入口、配置、服务、模块、SQL 构建到后端接口的整体架构。

学完后，你应该能理解：

• 通用表格为什么能支撑低代码 CRUD 页面；
• AutoColumn、AutoFilter、AutoForm、AutoTable 各自负责什么；
• 模块注册为什么是扩展能力的关键；
• 前端配置和后端 REST 接口如何连接；
• 为什么 AI 能力要落在已有表格引擎上；
• 通用表格阶段完成后，后续项目可以怎样复用。

一张架构图串起来

总结图把通用表格拆成几层。

从上到下可以这样理解：

• 入口层：页面请求和用户操作；
• 配置层：列配置、筛选配置、表单配置；
• 服务层：筛选、表单、表格模块；
• 工具层：查询参数合并、说明文案生成、模块注册；
• SQL 构建层：查询、排序、插入、更新、删除；
• 数据层：REST Backend 和 Database。

这条链路说明一件事：

前端表格不是孤立 UI。

它背后连接着字段协议、请求协议、后端接口和数据库操作。

AutoColumn

AutoColumn 负责列配置。

它决定哪些字段显示在表格里，字段标题是什么，类型是什么，是否支持筛选、排序、表单展示等。

前面做的字段默认值、列类型扩展、图片列、操作列，都属于这一层。

对 JS 开发者来说，可以把它理解成“列 schema”。

页面不再手写所有 JSX，而是把字段声明交给表格引擎。

AutoFilter

AutoFilter 负责查询表单。

它根据字段配置渲染输入框、下拉框、级联选择、范围筛选等控件。

它也负责把用户输入转成查询参数。

后面接入 Vibe 查询时，AI 生成的条件也要回到 AutoFilter 的参数体系里。

这样普通查询和 AI 查询不会分裂成两套系统。

AutoForm

AutoForm 负责新建和编辑表单。

它复用字段配置生成表单项，也能接入 AI 填充。

行内编辑、抽屉表单、批量 AI 新建，看起来是不同交互，但都依赖同一套字段描述。

字段配置越稳定，表单能力越容易复用。

AutoTable Modules

AutoTable 的核心是模块化。

课程里已经出现很多模块，例如：

• config；
• filterForm；
• buttons；
• columns；
• singleSelect；
• multipleSelect；
• formService；
• vibeCreate；
• sort；
• vibeButton。

每个模块只负责一块能力，再通过注册器按顺序安装。

这让通用表格能持续扩展，而不是越写越像一个巨大的组件。

SQL Builder 和后端接口

前端配置最终要落到后端接口。

查询、排序、插入、更新、删除都会进入 SQL Builder 或通用接口层。

所以低代码 CRUD 不是只有前端配置。

它还需要后端能理解这些配置，并且能把它们转成安全、稳定的数据库操作。

前端通用表格和后端通用 CRUD 是一组配套能力。

AI 的位置

AI 不应该绕开这套架构。

更好的接入方式是：

• AI 生成字段配置；
• AI 生成查询条件；
• AI 填充表单；
• AI 批量创建数据；
• AI 解释当前表格能做什么；
• AI 辅助生成页面代码。

这些能力都要落回 AutoColumn -> AutoFilter -> AutoForm -> AutoTable 这条链路。

这样 AI 输出不会变成一次性的文本，而会进入可运行的系统。

阶段结论

前端通用表格阶段的核心不是“做了一个表格”。

核心是做出一套可复用的 CRUD 页面引擎。

后面无论是项目管理、小说管理、漫画管理，还是其他业务模块，都可以在这套能力上继续扩展。