SuperAPI AI 工具集

piu-frontend-sync

前端与建站

查看项目

更新于 10-15 21:09

技能介绍

用途 扫描前端仓库中的 HTTP API 调用,与 PIU 项目的后端路由交叉比对,发现不匹配、缺失端点和类型契约违规。适合前后端接口对齐、接口审计与契约校验。

前置条件 需已存在 PIU 项目且其后端路由已同步(通过 backend-sync 或手动创建)。

主要流程

  1. 重复同步检测:PIU 项目描述中保存上次审计的提交号(格式如 "Frontend audit: <commit_sha> @ <timestamp> from <repo_url>"),用 bun skills/scripts/piu.ts get-project PROJECT_ID 读取。同一提交则跳过;有变更但无 API 相关文件则只更新标记;API 相关文件变更则只重扫变更文件;无历史审计则全量审计。
  2. 克隆并识别前端框架:临时目录克隆仓库,读取 package.json 判断 React、Vue、Angular、Svelte、Next.js,并检测使用的 API 客户端(fetch、axios、ky、ofetch、HttpClient、SWR、react-query 等)。
  3. API 调用发现:按优先级扫描 /api/、/services/、/hooks/、/lib/、/store(s)/,提取 HTTP 方法、URL 路径、请求/响应 TypeScript 接口以及文件与行号;跳过测试与 mock 目录。
  4. 与 PIU 交叉比对:使用 tree、search、search-entities、api-surface 等命令,按方法与规范化路径匹配,分类为 MATCHED、MISSING_IN_PIU、MISSING_IN_FRONTEND。
  5. 契约校验:对匹配端点用 request-models、resolve-fields 对比字段缺失、多余、类型不符、必填/可选差异。可选步骤包括 execute、validate、verify 验证真实响应。
  6. 输出报告:包含前端仓库、提交号、框架、API 客户端、PIU 项目、汇总统计,以及三张表(PIU 缺失、前端缺失、契约不匹配)与建议。
  7. 可选自动修复:通过 create-request、create-model、link-model 创建缺失实体,并用 find-related 追踪关系。
  8. 审计结束后用 update-project 把前端提交号写入 PIU 项目描述。

限制与注意 路径比较前需规范化:去除 /api 前缀、把 :param 转为 {{param}};需先解析 baseURL 配置。monorepo 前端需先确认分析哪个应用。路径匹配模糊时可用语义搜索,model-mermaid 可可视化前后端契约。该技能依赖 bun 与 git,其余平台支持、收费与价格信息暂未提供。