098. 通用表格 Vibe 排序以及字段配置

学习目标

这一节继续完善通用表格的 Vibe 排序，并把查询字段配置、排序字段和页面参数合并起来。

学完后，你应该能理解：

• Vibe 查询为什么要能带上排序意图；
• sortField 和 sortOrder 如何进入请求参数；
• 查询条件为什么需要从页面状态里提取；
• 字段配置为什么会影响查询控件和排序能力；
• Vibe 按钮为什么要复用普通查询与排序流程；
• 通用表格如何把 AI 意图转成稳定的前端状态。

Vibe 查询不能绕过普通查询系统

Vibe 查询的入口是自然语言，但最终仍然要落到表格状态。

例如用户说：

查一下预算最高的项目

系统不能只把这句话丢给后端。

它应该提取出明确条件：

• 查询对象是项目表；
• 排序字段可能是预算字段；
• 排序方向是降序；
• 分页仍然走当前表格分页；
• 其他筛选条件仍然保留或按规则覆盖。

这就是 Vibe 查询要接入普通查询系统的原因。

AI 负责理解意图，表格系统负责执行。

排序字段和排序方向

排序通常由两个值表达：

sortField
sortOrder

sortField 表示按哪个字段排序。

sortOrder 表示升序还是降序。

在表格里，排序可能来自两个地方：

• 用户点击表头；
• Vibe 查询解析出的排序意图。

无论来源是什么，最后都要进入同一个请求参数。

这样后端只需要处理稳定的结构化参数，不需要关心它来自按钮、表头还是 AI。

从页面状态提取查询参数

代码里可以看到查询参数会从页面状态中提取，再和排序参数合并。

这一层的重点不是某个函数名，而是职责划分：

• 表单控件负责维护用户输入；
• 表格状态保存当前页、页大小、排序字段、排序方向；
• 参数提取函数把这些状态整理成请求参数；
• 数据加载函数只接收整理后的参数。

如果你写过普通 React 表单，这里可以类比为：

const params = buildParams(formState, tableState);
request(params);

区别是通用表格要面对很多业务页面，所以 buildParams 不能只为一个页面服务。

字段配置的作用

字段配置会影响两件事。

第一是页面怎么显示。

例如字段是文本、数字、日期、下拉选项还是级联选项。

第二是参数怎么生成。

例如：

• 文本字段可以生成模糊查询；
• 下拉字段可以生成等值查询；
• 日期范围要拆成开始时间和结束时间；
• 数字范围要拆成最小值和最大值；
• 排序字段要明确传给后端。

所以字段配置不是“为了少写 JSX”。

它是把 UI、查询语义和后端参数连接起来的协议。

Vibe 按钮的职责

Vibe 按钮不应该自己直接操作表格数据。

它更适合做三件事：

• 收集用户输入的自然语言；
• 调用 AI 能力把自然语言转成结构化条件；
• 把结构化条件写回通用表格状态。

写回状态以后，后续流程就交给普通表格：

• 更新筛选表单；
• 更新排序字段；
• 重置或保留分页；
• 重新请求数据。

这能避免 AI 入口成为一套独立逻辑。

为什么这一节对后续重要

通用表格已经不只是一个展示组件。

它开始具备“低代码页面引擎”的形态：

• 字段配置决定页面；
• 查询配置决定筛选；
• 排序配置决定数据顺序；
• 模块注册决定能力组合；
• Vibe 查询把自然语言接到这些配置上。

对初学 AI 开发的人来说，这里要抓住一个关键点：

AI 不是替代系统设计。

AI 要接入已有系统，仍然需要清晰的数据结构、状态流和接口边界。