基于dify自动mock数据

背景

当前版本存在的痛点之一就是一些手写的ts类型，没法很方便的mock出直接可用的数据，比较影响开发效率。

那么有什么办法可以快速解决吗？

方案

之前部门推出的vscode插件：FEX-AIGC，支持接入dify平台的工作流，具体实现：

dify

在dify中新建一个对话工作流，选择大模型为gpt-4o-mini，并配置好提示词：

ts类型：
{{#sys.query#}}

根据上面给定的ts类型生成相应的mock数据。请遵循以下指导原则：
1. **数据类型**：使用网络行业的专业术语来表达，并使用中文返回。参考类型注释和字段含义，生成符合实际的数据（如手机号、邮箱等），并且需要重复考虑各字段的组合效果（特别是数组结构的，需mock出各种场景）。
2. **顺序一致**：按照ts类型的顺序生成mock数据，不要增加或删除接口，请保证所有接口都能mock到。
3. **类型换行**：在import语句中，每个response类型应单独换行，并带上英文逗号。
4. **mockData**：mockData内容为：严格按照ts的类型生成的mock数据。mock后填充到data后面就行了，不要做别的操作。如果ts类型中已包含success，则将mock出来的数据做为return的值，且response函数的类型不需要用Result包裹。
5. **response函数类型**: 在第4点中，如果ts类型中已包含success，则直接使用该ts类型，否则为Result<response的类型>
6. **eslint**：根据eslint规范，每行多要带上符号，如逗号、分号等。使用两个空格进行缩进。
7. **枚举值**：不能直接使用枚举的key，需取其实际等于的value
          
mock数据生成后，严格按照以下模板填充：
import { Result } from '@/utils/axios/types';

export default [
  {
    url: '/index.php/xx',
    method: 'post',
    response: (): 函数类型 => {
      return {
        success: true,
        data: {
          // mockData
        }
      };
    },
  },
];

作用就是让gpt能生成符合mock.js格式的假数据，我们复制后就能直接使用。

调试完成后发布，得到使用的秘钥

{
    "name": "ts类型mock",
    "description": "根据传入的ts类型，生成专业的mock数据",
    "aiToken": ""
}

FEX-AIGC

在插件右上角自定义指令，复制上刚才得到的秘钥。

找到需要mock的ts类型文件，选中需要的类型，ctrl+L，即可跳转到插件中

再输入/，找到我们配的ts类型mock，回车后即可生成mock数据

yapi-to-typescript

之前根据接口文档自动生成mock数据的逻辑是写死在该插件中，其提示词、gpt模型都是写死在代码中，后续要升级的话不方便修改，这次也顺便将mock的逻辑移植到了dify平台。

后续gpt再更新的话只需在dify上切换一下就行了。

总结

通过dify+FEX-AIGC，将mock数据流程化、简单化，节省开发时间。