构建一个智能的 API 结果可视化工具，用户只需输入 cURL 命令，系统能够：
- 解析并执行 cURL 命令
- 分析 API 返回数据的模式和结构
- 自动生成合适的可视化界面
- 支持多种响应模式的识别和展示
- 降低 API 调试和数据分析的门槛
- 自动化数据展示方案的生成
- 提供直观的数据可视化界面
作为用户 我想要输入一个 cURL 命令 以便系统能够执行并获取 API 响应
验收标准：
- 支持标准 cURL 命令格式输入
- 提供输入框和示例
- 支持常见的 cURL 参数（-H, -X, -d 等）
- 输入验证和错误提示
作为用户 我想要系统能够执行我输入的 cURL 命令 以便获取 API 的响应结果
验收标准：
- 将 cURL 命令转换为 HTTP 请求
- 支持各种 HTTP 方法（GET、POST、PUT、DELETE 等）
- 处理请求头、请求体
- 显示请求执行状态（loading、成功、失败）
作为用户 我想要系统自动分析 API 响应的数据结构 以便理解返回数据的模式
验收标准：
- 识别响应数据类型（JSON、XML、HTML、纯文本等）
- 分析 JSON 数据结构（对象、数组、嵌套结构）
- 识别数据字段类型（字符串、数字、布尔、日期等）
- 检测数据模式（列表、分页、单项、统计数据等）
作为用户 我想要系统为不同的数据模式生成合适的可视化界面 以便直观地查看和理解数据
验收标准：
- 根据数据模式选择合适的可视化方案
- 生成交互式的数据展示界面
- 支持数据筛选、排序、搜索等基础功能
- 响应式设计，适配不同屏幕尺寸
作为用户 我想要查看之前执行过的 cURL 命令历史 以便重新执行或修改之前的请求
验收标准：
- 保存请求历史（本地存储）
- 显示请求列表（URL、时间、状态）
- 支持重新执行历史请求
- 支持删除历史记录
- 前端框架: Next.js 14 (App Router)
- UI 库: Tailwind CSS
- 状态管理: React Context / Zustand
- 数据处理: TypeScript
- 可视化生成: AI Service (抽象接口)
┌─────────────────────────────────────────────────┐
│ 用户界面层 │
│ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│ │ cURL输入 │ │ 历史记录 │ │ 可视化展示区 │ │
│ └──────────┘ └──────────┘ └──────────────┘ │
└─────────────────────────────────────────────────┘
│
┌─────────────────────────────────────────────────┐
│ 业务逻辑层 │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ cURL 解析器 │ │ 请求执行器 │ │
│ └──────────────┘ └──────────────┘ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 模式分析器 │ │ 可视化生成器 │ │
│ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────┘
│
┌─────────────────────────────────────────────────┐
│ 数据层 │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 请求历史存储 │ │ 响应缓存 │ │
│ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────┘
职责： 将 cURL 命令字符串解析为标准的 HTTP 请求对象
接口：
interface ParsedRequest {
url: string;
method: string;
headers: Record<string, string>;
body?: any;
queryParams?: Record<string, string>;
}
class CurlParser {
parse(curlCommand: string): ParsedRequest;
validate(curlCommand: string): ValidationResult;
}职责： 执行 HTTP 请求并处理响应
接口：
interface RequestResult {
request: ParsedRequest;
response: {
status: number;
headers: Record<string, string>;
body: any;
responseTime: number;
};
timestamp: Date;
}
class RequestExecutor {
execute(request: ParsedRequest): Promise<RequestResult>;
}职责： 分析响应数据的结构和模式
接口：
interface DataPattern {
type: 'list' | 'object' | 'paginated' | 'statistics' | 'text' | 'binary';
structure: DataStructure;
metadata: {
totalItems?: number;
hasNested?: boolean;
fieldTypes?: Record<string, FieldType>;
};
}
class PatternAnalyzer {
analyze(response: any): DataPattern;
detectFieldTypes(data: any): Record<string, FieldType>;
}职责： 根据数据模式生成可视化界面（Mock 实现）
接口：
interface VisualizationConfig {
type: string;
layout: any;
components: any[];
interactions: any[];
}
class VisualizationGenerator {
// Mock 实现，后续用 AI 服务替换
generate(
request: ParsedRequest,
response: RequestResult
): Promise<VisualizationConfig>;
}用户输入 cURL
↓
[cURL 解析器] → 解析为 HTTP 请求
↓
[请求执行器] → 执行请求获取响应
↓
[模式分析器] → 分析响应数据模式
↓
[可视化生成器] → 生成可视化配置
↓
[UI 渲染] → 展示可视化界面
/- 主页，包含 cURL 输入和结果展示/history- 请求历史记录页面/api/execute- API 路由，处理请求执行/api/analyze- API 路由，处理模式分析/api/visualize- API 路由，处理可视化生成
- 根节点是数组
- 或包含
items、data、results等常见列表字段
- 包含
page、pageSize、total等分页字段 - 或包含
next、previous链接
- 根节点是对象
- 不包含列表特征
- 包含聚合字段（
count、sum、average等） - 数值型字段占主导
- 包含时间戳字段
- 数据按时间排序
- 简洁直观：主界面突出 cURL 输入框
- 即时反馈：实时显示请求状态和进度
- 智能提示：提供 cURL 命令示例和自动补全
- 响应式设计：适配桌面和移动设备
- 错误友好：清晰的错误信息和解决建议
- cURL 输入和基本解析
- 执行简单的 GET 请求
- 基础的 JSON 响应展示
- Mock 的可视化生成器
- 支持完整的 cURL 参数
- 支持所有 HTTP 方法
- 请求历史功能
- 改进的模式分析
- 高级可视化选项
- 数据导出功能
- 分享和协作功能
- AI 驱动的可视化生成
- CORS 处理：通过服务端代理执行请求
- 输入验证：防止命令注入
- 敏感信息：不存储包含认证信息的请求
- 速率限制：防止滥用
- 单元测试：各个解析器和分析器的核心逻辑
- 集成测试：完整的请求执行流程
- E2E 测试：用户交互流程
- 性能测试：大数据响应的处理
- AI 可视化生成服务的具体接口设计
- 是否支持 WebSocket/SSE 等实时 API
- 是否支持批量请求执行
- 云端存储和同步功能