079. 通用表格目标、AI 能力与组件设计

学习目标

这一节开始进入前端通用表格。

学完后，你应该能理解：

• 为什么后端有通用接口，前端也需要通用表格；
• 通用表格要解决哪些业务重复劳动；
• AI 表格能力依赖哪些后端能力；
• 行内编辑和表单编辑为什么都需要；
• 为什么组件要设计成可扩展、可配置、可发布。

从后端到前端

前面已经完成了后端通用接口。

后端可以通过配置生成很多增删改查接口。

前端也需要对应的通用能力。

否则后端接口已经通用了，前端页面还是每个表格都手写一遍。

这样整体效率仍然不高。

所以接下来要封装通用表格组件。

通用表格的目标

通用表格不是只给一个页面用。

它要尽量适配：

• 不同项目；
• 不同部门；
• 不同字段；
• 不同按钮；
• 不同查询方式；
• 不同编辑方式；
• 不同业务扩展。

目标是让大多数后台表格页面都能用同一套能力搭出来。

不改核心代码也能扩展

通用组件最难的地方不是显示表格。

难点是让调用方可以扩展功能。

例如某个页面需要一个特殊按钮。

另一个页面不需要。

一个页面新增时走默认行内新增。

另一个页面新增时要弹自定义表单。

如果每次都改组件核心代码，组件会很快失控。

所以通用表格要提供配置和扩展点。

调用方通过配置或插槽式能力扩展功能，而不是直接改核心。

AI 查询和排序

通用表格会集成 AI 能力。

例如用户可以用自然语言表达：

把项目预算金额放到左边并固定

或者：

按预算金额排序

前端把意图转成表格配置或查询参数。

后端要支持多字段排序、复杂筛选表达式。

否则 AI 只能理解意图，却无法让系统真正执行。

AI 新增数据

表格还可以支持 AI 新增。

例如用户截图或输入一段数据。

AI 识别后生成新增表单数据。

再走原本的新增流程。

这有一个重要点：AI 生成的数据也要经过原有校验。

如果某个字段必填，AI 没填也不能绕过。

如果某个字段类型不对，也应该报错。

AI 是输入助手，不是权限或校验绕过器。

字段顺序个性化

不同岗位关注的字段不同。

同一张表里，有人希望预算字段靠前。

有人希望负责人字段靠前。

有人希望某些字段固定在左侧。

传统做法是用户每次手动拖拽或配置。

AI 能力可以让用户用一句话修改表格配置。

这类能力本质上是在修改前端表格状态。

行内编辑

行内编辑适合大量快速修改。

例如一批数据里只改某几个字段。

如果每条都打开抽屉或弹窗，效率会很低。

所以通用表格需要支持行内编辑。

它更像 Excel 式操作。

适合高频、轻量、局部修改。

表单编辑

字段很多时，横向表格不适合编辑。

这时表单编辑更合适。

它可以把字段纵向排列。

还可以分组、校验、展示更复杂的控件。

所以行内编辑和表单编辑都需要。

它们解决的是不同场景。

常规表格能力

除了 AI 能力，通用表格还要有常规能力。

例如：

• 分页查询；
• 新增；
• 编辑；
• 删除；
• 批量新增；
• 复制数据；
• 行选择；
• 多选；
• 索引列；
• 关联表字段；
• 子表编辑。

这些能力是后台表格的基础。

AI 能力是在这些基础上叠加。

主表和子表

一些业务页面会有主表和子表。

例如项目是主表。

项目成员、费用明细可以是子表。

通用表格要能处理这种组合。

不是每个表都单独孤立存在。

后面做更复杂页面时，会反复用到主子表能力。

页面代码要变少

通用表格封装好以后，具体页面代码应该很少。

页面主要写：

• 模块标识；
• 字段配置；
• 特殊按钮；
• 特殊业务逻辑；
• 少量默认参数。

通用的查询、分页、编辑、删除交给组件和 Hook。

这样一个页面可以控制在比较少的代码量里。

组件形态

这里的通用表格更准确地说不是单一组件。

它更像一个 Hook 或组合函数。

例如：

useAutoTable(...)

Hook 负责组织：

• 状态；
• 请求；
• 表格配置；
• 列配置；
• 操作方法；
• AI 功能入口。

页面再把 Hook 返回的东西渲染出来。

组件发布

通用表格可以封装成包。

未来可以发布到 npm 或内部私有包仓库。

但组件包会依赖 React、Ant Design、项目主题等外部环境。

所以真正跨项目复用时，要考虑：

• 依赖版本；
• 样式隔离；
• 主题变量；
• 类型定义；
• 构建产物；
• 项目接入成本。

TypeScript 的作用

前端通用组件很依赖 TypeScript。

它能让调用方获得明确提示。

例如：

• 哪些配置项可以传；
• 哪些字段必填；
• 哪些函数参数类型不对；
• 哪些返回值能使用。

没有测试时，类型能提供第一层静态保护。

但类型不能替代运行时测试。

这一节的重点

这一节是前端通用表格的总体设计。

你需要记住：

• 后端通用接口需要前端通用表格配合；
• 通用表格要服务多项目、多部门、多字段场景；
• 扩展能力要通过配置和扩展点实现；
• AI 查询和排序依赖后端复杂查询能力；
• AI 新增也必须走原有校验；
• 行内编辑和表单编辑解决不同编辑场景；
• Hook 形态比单一组件更适合承载复杂表格逻辑；
• TypeScript 是通用组件体验的重要部分。