重构工作中，代码规范：B端前端开发过程中开发者总会面临重复开发的痛点，很多CRUD页面的元素模块基本相似，但仍需手动开发，将时间花在简单的元素搭建上，降低了业务需求的开发效率，同时因为不同开发者的代码风格不一致，使得迭代时其他人上手成本较高。
AI代替简单脑力：AI大模型的不断发展，已经具备简单的理解能力，并可以进行语言到指令的转换。对于基础页面搭建这样的通用指令可满足日常基础页面搭建的需求，提升通用场景业务开发效率。
B端页面列表、表单、详情都支持生成，链路大概可分为以下几个步骤。
图片
第一步是告诉它开发怎样的界面。提到这里，我们首先想到的是页面配置，即目前主流的低代码产品形式，用户通过一系列的图形化配置对页面进行搭建，如下图：
图片
针对通用场景（例如后台管理较为简单的CURD页面）或特定的业务场景（例如会场搭建）有良好的提效作用。对于需要不断迭代逻辑相对复杂的需求来说，由于是通过图形化操作的方式进行配置，对于交互设计要求较高，并且具备一定的上手成本，同时随着需求的复杂度越来越高，配置表单交互越来越复杂，维护成本也越来越高。因此，页面配置的方式前端领域的使用是相对克制的。
AI生成代码在工具函数场景下应用较多，但对于公司内部特定业务场景的需求，可能需要考虑以下几点：
GPT其实还有个很重要的能力，那就是自然语言转指令，指令即行动，举个例子：我们假设一个函数方法实现，输入是自然语言，结合GPT与内置的prompt，让其稳定的输出某几个单词，我们是不是就可以通过对这些单词输出做出进一步的行动？这相对于图形化配置有以下几个优点：
这里大家可能会有个疑问：
生成的指令信息不也会出现大模型幻觉吗？如何保证每次生成指令信息是稳定且一致的呢？
自然语言转指令可行大致有以下几个原因：
让我们来看最终的信息转化结果：
对于代码辅助来说，基于用户的需求描述，经过PROMPT处理，可以拿到这样的信息。为代码生成提供基础信息。
图片
通过大模型拿到自然语言对应可编码的信息（即上面例子中的JSON）后，我们就可以基于这个信息转化代码了。对于一个有明确场景的页面而言，一般情况下可分为主代码模板（列表、表单、描述框架） 业务组件。
图片
我们如何开发代码的？
其实这一步很像我们自己开发代码，我们拿到需求后，大脑中会提取其中的关键信息，即上方提到的自然语言转指令，然后我们会在vscode中创建一个文件，然后会进行以下操作：
首先一定是创建代码模板，然后根据场景引入对应重型组件，如列表就引入ProTable，表单就引入ProForm。
基于ProTable等重型组件并向其中添加一些属性，如headerTitle、pageSize等列表相关信息。
根据需求描述引入组件，比如识别到筛选项中存在类目选择，会在useColumns新增业务组件，识别到需求描述中存在导入导出组件，会在页面的指定位置新增导入导出业务组件。
拿到mock链接，新增请求层，在页面指定位置引入。
对于以上常用的代码插入场景都可以封装进JSON中，然后通过代码模板结合AST插入或字符串模板替换的方式生成对应代码。
源码辅助主要帮助开发者减少重复的工作，提升编码效率，和低代码页面搭建属于完全不同的赛道，低代码重在特定场景下搭建完整的页面，并且页面功能数量是可枚举的，业界低代码搭建也有很优秀的实践。而源码辅助工具旨在帮助用户尽可能多的初始化业务需求代码，后面的修改维护在代码层面交给用户，提升新增页面的开发效率。
具体的功能架构见下方：
图片
对于前端开发来说，提效的本质是少开发代码，更快的页面生成是一方面，良好的组件抽离是相当重要的一环，我们结合向量对组件的引入链路进行了优化，在初始化模板与存量代码中快速搜索定位组件。
图片
支持快速获取组件的描述内容与组件引入范式，一键录入组件，组件描述会转化为向量数据存入向量数据库。
图片
用户输入描述后，会将描述转化为向量，基于余弦相似度与组件列表进行比对，找到相似度最高的组件TOP N。
图片
用户可以在存量代码中快速通过描述搜索匹配度最高的组件，回车进行插入。
图片
以上是大模型下B端前端代码辅助生成的思考与实践的详细内容。更多信息请关注PHP中文网其他相关文章！
