lowcode 插件 已经迭代了差不多 3 年。作为我的生产力工具，平常一些不需要动脑的搬砖活基本上都是用 lowcode 去完成，比如管理脚手架，生成 CURD 页面，根据接口文档生成 TS 类型，生成 mock 等等。
借助 lowcode 的区块物料的功能，能快速生成 CURD 页面，但是前一段时间在做一些财务相关的需求时，变量的命名成了一个难题，一个列表十几二十个字段，而且大部分是那种看着中文都不知道是什么意思的抽象名词。做着做着我简单粗暴的使用 column1 ~ column20 去命名（反正一个个去翻译出来我也不认识）。
同事提了一嘴 "变量命名让 ChatGPT 去做"，然后我就开始去研究 ChatGPT 命名:
看起来问题不大，之后就是在 lowcode 插件里接入 ChatGPT API 了。
开发过程中研究了几个 vscode 上下载量比较多的 ChatGPT 插件，基本上大同小异，都是在右键菜单里加了分析代码，重构代码，给代码写单元测试，给代码找缺陷的固定选项。假如我想要 ChatGPT 将我选中的代码的里的中文变量翻译成英文，需要每次复制粘贴代码，写 Prompt 。
借助 lowcode 原有的代码片段的功能，几乎毫不费劲的就实现了预置 Prompt 的功能，如下：
目前 lowcode 已经支持接入 openai 官方的 api ，也可以使用国内的一些收费的中转服务，下面介绍使用方法。
配置 ChatGPT
预置 Prompt 模板
使用 lowcode 原有代码片段功能，可以随意预置 Prompt ，支持 EJS 模板语法，可快速创建分析代码、重构代码、代码添加注释等 Prompt 。
拉到最底部，配置 chatGPT 字段：
commandPrompt 既右键菜单选择模板后发送的内容，支持 EJS 模板语法。
viewPrompt 为 代码片段或者区块物料可视化详情页点 Ask ChatGPT 按钮后发送的内容。
lowcode 代码生成功能结合 ChatGPT
配置生成 CURD 界面的时候，如果全部使用中文命名，根据模板会生成如下的代码：
import { reactive, ref } from "vue";
interface ITableListItem {
id: string;
成本中心编码: string;
成本中心名称: string;
账套编码: string;
银行核算编码: string;
订单号: string;
订单金额: string;
确收时间: string;
"劳务成本-不含税": string;
}
interface IFormData {
成本中心编码?: string;
成本中心名称?: string;
账套编码?: string;
银行核算编码?: string;
订单号?: string;
订单金额?: string;
确收时间?: string;
"劳务成本-不含税"?: string;
}
const defaultFormData: IFormData = {
成本中心编码: undefined,
成本中心名称: undefined,
账套编码: undefined,
银行核算编码: undefined,
订单号: undefined,
订单金额: undefined,
确收时间: undefined,
"劳务成本-不含税": undefined,
};
export const useModel = () => {
const filterForm = reactive[I]({ ...defaultFormData });
const tableList = ref(
[],
);
const pagination = reactive({
page: 1,
pageSize: 10,
total: 0,
});
const loading = reactive({
list: false,
});
return {
filterForm,
tableList,
pagination,
loading,
};
};
export type Model = ReturnType;
ChatGPT 处理之后：
import { reactive, ref } from "vue";
interface ITableListItem {
id: string;
costCenterCode: string;
costCenterName: string;
accountingCode: string;
bankAccountingCode: string;
orderNumber: string;
orderAmount: string;
confirmedTime: string;
laborCostExcludingTax: string;
}
interface IFormData {
costCenterCode?: string;
costCenterName?: string;
accountingCode?: string;
bankAccountingCode?: string;
orderNumber?: string;
orderAmount?: string;
confirmedTime?: string;
laborCostExcludingTax?: string;
}
const defaultFormData: IFormData = {
costCenterCode: undefined,
costCenterName: undefined,
accountingCode: undefined,
bankAccountingCode: undefined,
orderNumber: undefined,
orderAmount: undefined,
confirmedTime: undefined,
laborCostExcludingTax: undefined,
};
export const useModel = () => {
const filterForm = reactive[I]({ ...defaultFormData });
const tableList = ref(
[],
);
const pagination = reactive({
page: 1,
pageSize: 10,
total: 0,
});
const loading = reactive({
list: false,
});
return {
filterForm,
tableList,
pagination,
loading,
};
};
export type Model = ReturnType;
string, undefined, const, chatgpt
