Chrome 接口 Mock 覆盖生成器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_1d8afadc/sc-api-mock-generator-v1。
技能介绍
要解决什么问题
前端联调时,后端接口未就绪或环境不稳定,你往往只能靠 Postman 或手写 JSON 临时顶替。Chrome Local Overrides 可以在不改动业务代码的前提下,让浏览器对指定域名下的请求直接返回本地文件;难点在于:路径要符合 Overrides 的无扩展名规则,响应体还要带上你们网关惯用的 code / message / result 外壳,字段值还得看起来像真数据而不是 "string" 占位。
技能如何工作
技能把「接口定义」当成输入:接口地址、请求方式、响应参数的 TypeScript 类型(或等价 JSON 结构)是必填;可选环境(test / pre,默认 test)、数组条数、success / error / empty 等 mock 场景。
核心流程可以概括为四步:
- 解析输入:抽取 URL、方法、环境与响应形态
- 生成 Mock JSON:在固定外层下填充
result;按字段名语义推断值(如imageUrl用 picsum、email/phone用合理格式、amount用数值区间等) - 落盘到 overrides:按
{overrides}/{域名}/{路径段}/{最末段}创建无扩展名文件;路径参数如{id}会替换为示例值 - 输出摘要:给出目录结构、JSON 预览,以及首次使用时的 DevTools Overrides 配置提示
环境域名在 SKILL 中已约定:test 对应 test-sino-gateway.sinoclick.com,pre 对应 pre-sino-gateway.sinoclick.com。批量接口时可逐个生成或合并脚本。
适用边界与注意点
- 外层响应结构由技能固定;若你们线上协议字段名不同,需要自行改生成结果或扩展约定
- 字段语义靠命名模式推断,非常规字段名可能不够贴切,建议在 TS 类型或描述里补充含义
- 默认面向项目根目录下的
overrides/;在非 Cursor 环境或只要脚本时,可要求输出 shell 而非直接 Write signUrl/ossUrl等会结合同类型里是否出现 video 相关字段或注释,在图片与视频 URL 策略间选择
使用场景
- 网关 test 环境接口未部署,需在 Chrome 里用 Local Overrides 拦截 `/api/user/list` 并返回带分页的列表 JSON
- 已有接口的 TS 响应类型,想一次性生成 5 条语义化 mock 并写入 `overrides/` 对应无扩展名路径
- 要验证列表空态与错误态 UI,分别生成 `empty` 与 `error` 场景的 `code`/`message`/`result` 外壳
- 同一迭代里多个 REST 接口(GET/POST)需批量落盘,并汇总 tree 路径供团队对照 Network 面板 ⚠️ 标记
适合人员
- 负责 Sinoclick 网关前后端联调的前端,需在 test/pre 域名下本地替换接口响应
- 维护 TypeScript 接口契约的同学,希望按字段名自动生成图片 URL、金额、手机号等逼真数据
- 写列表/详情/错误页的前端,要快速切换 success、empty、error 三种 mock 而不改业务请求代码
- 在非 Cursor 环境协作的同事,需要可执行的 shell 脚本批量创建 overrides 目录与 mock 文件