104. 菜单页、模块页与建表语句展示

学习目标

这一节回到前端，把菜单管理、模块管理和模块详情页补齐，让前面做好的后端能力能在界面里使用。

学完后，你应该能理解：

• 菜单管理为什么本身也可以用通用模块实现；
• 模块管理页面如何复用 AutoTable；
• 模块详情页为什么要展示配置、前端代码、接口定义和建表语句；
• 为什么代码编辑器适合承载模块代码；
• 前端页面不是孤立 UI，而是 AI 开发流程的一部分。

菜单管理页面

菜单管理负责把系统功能挂到左侧导航。

一个菜单通常需要配置：

• 菜单名称；
• 菜单路径；
• 菜单图标；
• 排序；
• 是否公开；
• 关联模块。

课程里先把菜单管理也作为一个通用模块来处理。

这样菜单页面不需要单独写一套 CRUD，而是继续复用前面封装好的通用表格能力。

这体现了通用表格的价值：只要字段和接口规则稳定，系统内部管理页也可以被快速搭出来。

模块管理页面

模块管理是 Vibe 系统的核心入口。

它负责管理每个业务模块的数据，例如：

• 模块名称；
• 模块标识；
• 模块说明；
• 模块配置；
• 前端代码；
• 后端接口；
• 建表语句。

页面仍然使用 AutoTable 来展示模块列表。

进入某个模块详情后，才会看到更复杂的编辑区域。

模块详情页

模块详情页不是普通详情。

它是 AI 开发模块的工作台。

课程里逐步补齐几个页签：

• 模块配置；
• 前端代码；
• 前端预览；
• 接口定义；
• 建表语句。

这些页签分别对应 AI 生成页面时需要处理的几类产物。

前端代码决定页面长什么样，模块配置决定字段和接口如何组织，接口定义决定后端业务逻辑，建表语句则让 AI 理解数据库结构。

代码编辑器

模块配置、前端代码和后端接口都需要编辑大段文本。

课程里使用类似 Monaco Editor 的编辑器来承载这些内容。

这比普通输入框更合适，因为代码需要：

• 保持缩进；
• 支持多行编辑；
• 方便复制；
• 方便阅读；
• 后续可能支持语法高亮。

对前端开发者来说，这里可以理解成把 IDE 里的一部分编辑体验搬进业务系统。

建表语句展示

建表语句页签会根据当前模块表名调用后端接口，查询数据库里的真实建表语句。

它的意义不只是给人看。

后面 AI 要判断字段、表名、字段类型时，也会依赖这类能力。

如果一个模块已经有表，AI 可以读出当前结构后再修改。

如果一个模块还没有表，AI 就需要先生成建表 SQL。

调试真实问题

课程里也演示了调试过程。

例如切换页签时没有请求建表语句，就要检查表名从哪里来。

如果表名不是从正确的 formData 或模块配置里取，就会导致接口不发请求或参数为空。

这类问题对初学者很重要：

前端页面看起来只是一个页签，但背后其实有数据来源、状态同步、接口参数和渲染时机。

和 AI 生成闭环的关系

当这些页面完成后，Vibe 系统开始具备完整工作台形态。

AI 可以围绕一个模块完成：

• 读模块基础信息；
• 生成模块配置；
• 生成前端代码；
• 预览前端效果；
• 生成后端接口；
• 查看建表语句；
• 测试接口行为。

这就是从“通用表格组件”走向“AI 辅助开发系统”的关键一步。

阶段重点

这一节的重点是把已有能力组织到页面上。

不要只看菜单和页签。

更应该看清楚：菜单决定入口，模块决定上下文，详情页承载配置和代码，建表语句连接数据库事实。

这些东西放在一起，AI 才能在一个明确的模块上下文里工作。