OpenAPI 查看器

Pivot 提供了一个功能强大的 OpenAPI 规范查看器，让您可以轻松浏览和测试 API 文档。

功能特性

🎯 双布局模式

• 操作详情模式：专注于单个 API 端点的详细信息，包含代码生成和测试面板
• 操作列表模式：显示完整的 API 操作列表概览

📋 示例 API 集合

内置多个知名 API 示例：

• Swagger Petstore
• Box API
• GitHub API
• Netlify API

🔧 交互功能

• 实时预览：输入 OpenAPI 规范 URL 自动加载
• 代码生成：支持 cURL、Python、PHP 等多种语言
• API 测试：内置 Try It Out 功能，直接测试 API
• 智能导航：侧边栏快速定位到任意端点

🎨 现代化界面

• 响应式设计，完美适配各种设备
• 暗色/亮色主题切换
• 清晰的视觉层次和交互反馈

使用方法

1. 访问查看器

点击导航栏中的 "查看器" 或直接访问 /viewer 页面。

2. 选择 API 规范

您可以通过以下方式加载 OpenAPI 规范：

选择预设示例

• 从下拉菜单中选择任一预设的 API 示例
• 系统会自动加载并解析规范

输入自定义 URL

• 在 URL 输入框中输入您的 OpenAPI 规范地址
• 支持 JSON 和 YAML 格式
• 系统会自动检测格式并解析

3. 切换布局模式

使用右上角设置面板中的布局切换按钮在两种模式间切换：

操作详情模式

• 左侧：导航侧边栏，显示所有可用端点
• 中间：选中端点的详细信息
• 右侧：代码生成器和 API 测试面板

操作列表模式

• 显示完整的 API 操作列表，每个操作都有详细信息
• 适合快速浏览整个 API 结构

4. 浏览和测试 API

• 在侧边栏中点击任意端点查看详情
• 查看参数、请求体、响应等信息
• 使用右侧的代码生成器获取调用示例
• 通过 Try It Out 面板直接测试 API

技术实现

查看器基于以下核心组件构建：

• NavigationSidebar：智能导航侧边栏
• OperationListLayout：操作列表布局组件
• OperationDetailedLayout：操作详情布局组件
• 各种代码生成器组件（cURL、Python、PHP 等）

支持的规范

• OpenAPI 3.0+
• Swagger 2.0
• JSON 和 YAML 格式
• 本地和远程规范文件

下一步

尝试访问 查看器页面 开始探索 OpenAPI 规范的强大功能！