Skip to content

sweetwisdom/electron-api

Repository files navigation

API 文档自动化工具

Electron Vue Arco Design License

基于 Electron + Vue 3 的接口文档自动收集与管理工具

快速开始 · 功能特性 · 使用指南 · 开发文档

5aabf12f384a43abc702312368c99b05


📖 项目简介

API 文档自动化工具是一款桌面端应用,通过与 Postman 联动,自动收集和整理 API 接口信息,并支持 TypeScript 类型定义生成和 Markdown 文档导出。

核心价值

  • 🚀 自动化收集 - 无需手动整理,开发过程中自动记录接口信息
  • 💎 类型生成 - 智能分析 JSON 数据,生成 TypeScript 类型定义
  • 📝 灵活导出 - 支持自定义字段的 Markdown 文档导出
  • 💾 本地存储 - 使用 IndexedDB 存储,数据安全可靠
  • 🎨 现代界面 - 基于 Arco Design,界面美观易用

✨ 功能特性

1. 自动接口收集

通过 Postman 全局后置脚本,自动将接口请求和响应数据转发到本地服务,无需手动录入。

支持记录的信息:

  • 接口名称
  • 请求方式(GET/POST/PUT/DELETE 等)
  • 请求路径(自动去除 baseUrl)
  • 请求参数
  • 响应数据

2. TypeScript 类型生成

参考 json-to-ts 的实现,智能分析请求参数和响应数据的结构,自动生成 TypeScript 类型定义。

特性:

  • 识别基础类型(string/number/boolean/null)
  • 处理复杂类型(数组、嵌套对象)
  • 自动提取嵌套对象为独立 interface
  • 支持类型合并与可选属性推断

3. 项目管理

  • 支持多项目管理
  • 自动根据 baseUrl 匹配项目
  • 接口按项目分类组织
  • 支持搜索、筛选、排序

4. Markdown 导出

  • 勾选要导出的项目和接口
  • 自定义导出字段(默认全选)
  • 生成格式规范的 Markdown 文档
  • 支持代码高亮展示

📚 使用指南

步骤 1:启动应用

运行应用后,本地 HTTP 服务会自动启动,默认监听端口 3737

系统托盘会显示服务状态:

  • 🟢 运行中
  • 🔴 已停止

步骤 2:配置 Postman

在 Postman 中配置全局后置脚本:

路径: SettingsScriptsGlobal ScriptsPost-response

脚本内容:

// 获取请求和响应数据
const requestData = {
  requestName: pm.info.requestName,
  request: {
    url: pm.request.url.toString(),
    method: pm.request.method,
    headers: pm.request.headers.toObject(),
    body: pm.request.body
  },
  response: {
    code: pm.response.code,
    status: pm.response.status,
    body: pm.response.json(),
    headers: pm.response.headers.toObject()
  }
}

// 转发到本地服务
pm.sendRequest(
  {
    url: 'http://localhost:3737/api/collect',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    body: {
      mode: 'raw',
      raw: JSON.stringify(requestData)
    }
  },
  (err, res) => {
    if (err) {
      console.log('转发失败:', err)
    } else {
      console.log('转发成功')
    }
  }
)

步骤 3:发起请求

在 Postman 中正常发起 API 请求,应用会自动接收并记录接口信息。

步骤 4:管理接口

在应用界面中:

  1. 查看项目和接口列表
  2. 点击接口查看详情(包含 TypeScript 类型定义)
  3. 编辑接口信息(名称、描述、标签等)
  4. 搜索和筛选接口

image-20251111111158623

步骤 5:导出文档

  1. 勾选要导出的项目

  2. 勾选要导出的接口(默认全选)

  3. 选择要导出的字段(默认全选)

  4. 点击"导出"按钮

  5. 选择保存路径

    image-20251111111214302

生成的 Markdown 文档包含完整的接口信息和类型定义。

image-20251111111311422


开发文档

开发文档

⭐ 如果这个项目对你有帮助,请给它一个 Star!

Made with ❤️ by Your Team

About

electron express vue 跨平台桌面app

Topics

Resources

Contributing

Stars

Watchers

Forks

Packages

No packages published