# YX 网络检查器示例应用

这是一个完整的示例应用，展示了 YX Net Inspector 的所有功能和使用方法。

## 🚀 功能展示

### 📱 应用结构

示例应用包含三个主要页面：

1. **功能演示页面** - 展示各种网络请求模拟
2. **Dio 集成页面** - 演示 Dio 拦截器的使用
3. **设置页面** - 配置检查器的各种选项

### ✨ 主要功能

#### 🎯 功能演示页面
- **网络请求统计** - 实时显示发送的请求数量
- **真实API端点测试** - 使用真实的开放API进行测试
  - **JSONPlaceholder API** - 用户列表、文章列表、创建文章、更新用户、删除用户
  - **Cat Facts API** - 获取随机猫咪事实
  - **HTTPBin API** - HTTP测试、IP地址、用户代理、错误状态码
  - **ReqRes API** - 用户信息获取
- **快速操作**
  - 随机请求 - 发送随机类型的真实网络请求
  - 批量请求 - 同时发送多个真实请求
  - 错误请求 - 使用HTTPBin测试各种错误状态码
- **批量测试** - 测试大量真实请求的性能和内存管理
- **使用提示** - 详细的操作指导

#### 🔌 Dio 集成页面
- **安装指南** - 详细的 Dio 安装和配置步骤
- **代码示例** - 完整的集成代码示例
- **功能特性** - Dio 拦截器的所有功能说明
- **模拟演示** - 在没有 Dio 的情况下模拟拦截器行为

#### ⚙️ 设置页面
- **检查器状态** - 显示当前的网络请求统计
- **悬浮球设置**
  - 显示/隐藏悬浮球
  - 调整悬浮球大小 (40-100px)
  - 选择悬浮球颜色
  - 启用/禁用拖拽功能
  - 显示/隐藏数量徽章
  - 自动隐藏选项
- **日志设置**
  - 配置最大日志数量 (100-5000)
  - 查看当前日志数量
- **主题设置**
  - 自定义主色调
  - 配置成功/错误/警告颜色
- **操作功能**
  - 应用设置
  - 重置为默认设置
  - 导出日志
  - 清空所有日志
- **详细统计**
  - 各种HTTP方法的请求数量
  - 平均响应时间
  - 最近请求时间

## 🎨 界面特色

### 现代化设计
- **Material Design 3** - 遵循最新的Material设计规范
- **卡片布局** - 清晰的信息分组和层次
- **响应式设计** - 适配不同屏幕尺寸
- **动画效果** - 流畅的交互动画

### 用户体验
- **直观导航** - 底部导航栏快速切换页面
- **实时反馈** - SnackBar 消息提示
- **状态指示** - 加载状态和进度显示
- **帮助提示** - 详细的使用说明和提示

### 颜色系统
- **蓝色主题** - 专业的蓝色配色方案
- **语义化颜色** - 成功(绿色)、警告(橙色)、错误(红色)
- **自定义主题** - 支持主题色彩自定义

## 🌐 使用的真实API

示例应用集成了多个优质的免费开放API，提供真实的网络请求体验：

### 🔗 API 服务商

#### JSONPlaceholder (jsonplaceholder.typicode.com)
- **用途**: REST API 测试
- **端点**: 
  - `GET /users` - 获取用户列表
  - `GET /posts` - 获取文章列表  
  - `POST /posts` - 创建新文章
  - `PUT /users/2` - 更新用户信息
  - `DELETE /users/2` - 删除用户
- **特点**: 返回真实的JSON数据结构，支持所有HTTP方法

#### HTTPBin (httpbin.org)
- **用途**: HTTP 请求测试工具
- **端点**:
  - `GET /json` - 返回JSON测试数据
  - `GET /ip` - 获取客户端IP地址
  - `GET /user-agent` - 获取用户代理信息
  - `GET /status/{code}` - 返回指定的HTTP状态码
- **特点**: 专门用于测试HTTP请求的各种场景

#### ReqRes (reqres.in)
- **用途**: REST API 模拟服务
- **端点**:
  - `GET /api/users/2` - 获取单个用户信息
  - `PUT /api/users/2` - 更新用户信息
  - `DELETE /api/users/2` - 删除用户
- **特点**: 提供真实的API响应格式，支持分页

#### Cat Facts API (catfact.ninja)
- **用途**: 有趣的猫咪事实
- **端点**:
  - `GET /fact` - 获取随机猫咪事实
- **特点**: 轻量级API，返回有趣的内容

### 🎯 真实API的优势

1. **真实网络延迟** - 体验真实的网络请求时间
2. **真实响应数据** - 查看实际的API响应格式
3. **网络错误处理** - 体验真实的网络异常情况
4. **HTTP状态码** - 测试各种HTTP状态码的处理
5. **请求头信息** - 查看完整的HTTP请求头
6. **响应头信息** - 分析真实的HTTP响应头

### 🚀 网络测试场景

- **成功请求** - 体验200, 201等成功状态码
- **客户端错误** - 测试400, 401, 403, 404等错误
- **服务器错误** - 模拟500, 502, 503等服务器问题
- **网络超时** - 在网络不稳定时观察超时处理
- **大数据量** - 通过批量请求测试性能

## 🛠 技术实现

### 代码结构
```
example/
├── lib/
│   ├── main.dart              # 应用入口和主页面
│   └── pages/
│       ├── demo_page.dart     # 功能演示页面
│       ├── dio_demo_page.dart # Dio 集成演示
│       └── settings_page.dart # 设置页面
└── README.md                  # 本文档
```

### 核心功能
- **网络请求模拟** - 使用 YxNetInspectorController 手动记录日志
- **状态管理** - 使用 StatefulWidget 管理页面状态
- **数据持久化** - 演示配置的保存和加载
- **错误处理** - 完善的异常处理机制

## 📖 使用指南

### 快速开始

1. **运行示例应用**
   ```bash
   cd example
   flutter run
   ```

2. **查看悬浮球**
   - 应用启动后会看到蓝色的悬浮球
   - 点击悬浮球打开网络检查器

3. **测试功能**
   - 在"功能演示"页面发送各种网络请求
   - 观察悬浮球上的数字变化
   - 在检查器中查看详细的请求信息

### 高级功能

#### 批量测试
- 使用"批量测试"功能发送大量请求
- 观察内存管理和性能表现
- 验证日志数量限制功能

#### Dio 集成
- 查看"Dio 集成"页面的详细说明
- 按照指南在实际项目中集成 Dio 拦截器
- 使用模拟功能了解拦截器行为

#### 个性化设置
- 在"设置"页面自定义检查器配置
- 调整悬浮球外观和行为
- 配置日志管理选项

## 🎯 最佳实践

### 开发建议
1. **合理配置日志数量** - 根据应用需求设置合适的最大日志数
2. **选择合适的悬浮球大小** - 平衡可见性和界面美观
3. **使用搜索功能** - 在大量日志中快速定位问题
4. **定期清理日志** - 避免内存占用过多

### 调试技巧
1. **错误请求测试** - 使用错误请求功能测试异常处理
2. **性能测试** - 使用批量请求测试应用性能
3. **网络状态监控** - 通过统计信息了解网络状况

## 🔧 自定义扩展

### 添加新的请求类型
可以在 `demo_page.dart` 中的 `_endpoints` 列表中添加新的API端点：

```dart
{
  'name': '自定义API',
  'method': 'PATCH',
  'url': 'https://api.example.com/custom',
  'description': '自定义API描述',
  'icon': Icons.custom_icon,
}
```

### 扩展设置选项
在 `settings_page.dart` 中可以添加更多配置选项：

```dart
// 添加新的设置项
SwitchListTile(
  title: const Text('新功能开关'),
  subtitle: const Text('启用新功能'),
  value: _newFeatureEnabled,
  onChanged: (value) {
    setState(() {
      _newFeatureEnabled = value;
    });
  },
),
```

## 📚 相关资源

- [YX Net Inspector 主文档](../README.md)
- [API 参考文档](../README.md#api-参考)
- [Dio 集成指南](../README.md#dio-集成)
- [Flutter 官方文档](https://flutter.dev/docs)

## 🤝 贡献

欢迎提交 Issues 和 Pull Requests 来改进示例应用：

1. Fork 本仓库
2. 创建功能分支
3. 提交更改
4. 发起 Pull Request

## 📄 许可证

本示例应用遵循与 YX Net Inspector 相同的 MIT 许可证。