101. Vibe 系统使用效果介绍

学习目标

这一节展示 Vibe 系统的实际使用效果，包括菜单管理、模块页面、AI 助手生成页面代码，以及把通用表格能力迁移到新业务模块。

学完后，你应该能理解：

• 通用表格完成后，为什么要看整套系统的使用效果；
• 菜单管理如何决定页面入口；
• 新业务模块如何复用表格、查询、新建、编辑等能力；
• AI 助手在页面生成中承担什么角色；
• 为什么先做底层引擎，再做业务页面会更省力；
• 后续学习应该关注“配置、代码、页面效果”三者的关系。

从菜单管理开始看系统

系统左侧有菜单树，例如：

• 系统技能管理；
• 菜单管理；
• 模块管理；
• 智能简历；
• 组件示例。

菜单管理不是简单的导航。

它决定了用户能从哪里进入某个功能，也决定了业务模块在系统中的位置。

例如一个模块要上线，通常不只是写一个页面，还要配置：

• 菜单名称；
• 菜单路径；
• 菜单图标；
• 菜单顺序；
• 所属范围；
• 备注信息。

这些内容会影响真实后台系统的可用性。

新业务模块复用通用表格

页面里展示了新的业务模块，例如小说、漫画相关管理页面。

这些页面仍然使用前面完成的通用表格能力：

• 查询表单；
• 数据列表；
• 新建按钮；
• 编辑、复制、删除；
• 分页；
• 字段配置；
• AI 助手。

这说明前面的通用表格不是只服务某一个演示页面。

它可以作为后台系统的基础设施，继续承接新的业务模块。

AI 助手生成页面代码

右侧 AI 助手会根据需求给出 Ant Design 页面设计或代码片段。

这里要注意一个边界：

AI 生成的是页面实现建议。

系统真正能跑起来，还要依赖已有的工程结构：

• 路由放在哪里；
• 菜单如何注册；
• 字段配置怎么写；
• 表格组件怎么调用；
• 接口路径如何匹配；
• 数据模型是否已经存在。

所以 AI 不是单独完成系统，而是加速你在已有框架里的开发。

配置、代码和效果要闭环

一个 Vibe 系统页面通常要经历三步。

第一步是配置。

你要知道字段、菜单、模块、接口、权限在哪里声明。

第二步是代码。

页面组件要能读取配置，并调用通用表格能力。

第三步是效果。

页面要能真实查询、新建、编辑、删除，并且显示在正确菜单下。

只完成其中一步都不算真正完成。

这也是前面反复做运行验证的原因。

为什么先做引擎

如果每个业务页面都从零写表格、表单和接口，效率会很低。

通用表格完成以后，新模块可以复用：

• 表格渲染；
• 查询区；
• 表单新建；
• 抽屉编辑；
• 行操作；
• 父子表；
• Vibe 查询；
• AI 页面辅助。

业务开发就从“写一堆重复代码”变成“补字段、补配置、补少量定制逻辑”。

这就是低代码 CRUD 和 Vibe 开发的价值。

对初学者的关注点

这一节不要只看页面长什么样。

更应该关注几个问题：

• 一个菜单如何对应一个页面；
• 一个页面如何对应一份字段配置；
• 一份字段配置如何驱动表格、表单和查询；
• AI 生成代码后，如何放回项目结构；
• 最终页面是否能走通真实数据。

把这些关系看懂，后面学习 AI Agent 全栈开发会轻松很多。