# 使用统计前端访问指南

## 📍 访问路径

### 方式 1：通过设置页面导航

1. 登录系统
2. 点击左侧导航栏的"设置"
3. 在设置页面顶部选择"系统配置"标签
4. 在左侧菜单中点击"使用统计"
5. 点击"查看使用统计"按钮

### 方式 2：直接访问 URL

```
http://localhost:5173/settings/usage
```

## 🎨 页面功能

### 1. 统计概览

页面顶部显示 4 个关键指标卡片：

```
┌─────────────┬─────────────┬─────────────┬─────────────┐
│ 总请求数     │ 总输入Token │ 总输出Token │ 总成本      │
│ 📄 1,234    │ ⬆️ 45,678   │ ⬇️ 23,456   │ 💰 ¥12.34  │
└─────────────┴─────────────┴─────────────┴─────────────┘
```

### 2. 时间范围筛选

右上角可以选择统计时间范围：
- 最近 7 天
- 最近 30 天
- 最近 90 天

### 3. 图表展示

#### 按供应商统计（饼图）
- 显示各供应商的成本占比
- 鼠标悬停显示详细数据
- 图例可点击切换显示/隐藏

#### 按模型统计（柱状图）
- 显示前 10 个模型的成本
- 按成本从高到低排序
- 鼠标悬停显示详细数据

#### 每日成本趋势（折线图）
- 显示每日成本变化
- 平滑曲线展示趋势
- 区域填充增强视觉效果

### 4. 使用记录表格

详细记录每次 API 调用：

| 时间 | 供应商 | 模型 | 输入Token | 输出Token | 成本 | 分析类型 | 会话ID |
|------|--------|------|-----------|-----------|------|----------|--------|
| 2025-10-07 10:30:25 | dashscope | qwen-max | 1,234 | 567 | ¥0.0456 | stock_analysis | session_123 |

### 5. 分页功能

- 支持每页显示 10/20/50/100 条记录
- 支持页码跳转
- 显示总记录数

### 6. 清理旧记录

点击"清理旧记录"按钮可以删除 90 天前的旧数据。

## 🔧 配置模型定价

### 访问配置管理

1. 进入"设置 > 系统配置 > 配置管理"
2. 选择"大模型配置"标签
3. 找到要配置定价的模型
4. 点击"编辑"按钮

### 配置定价信息

在编辑对话框中找到"定价配置"部分：

```
┌─────────────────────────────────────┐
│ 定价配置                             │
├─────────────────────────────────────┤
│ 输入价格: [0.0200] CNY/1K tokens    │
│ 输出价格: [0.0600] CNY/1K tokens    │
│ 货币单位: [CNY ▼]                   │
└─────────────────────────────────────┘
```

填写说明：
- **输入价格**: 每 1000 个输入 token 的价格
- **输出价格**: 每 1000 个输出 token 的价格
- **货币单位**: 选择 CNY(人民币)、USD(美元) 或 EUR(欧元)

### 查看定价信息

配置完成后，在模型卡片中会显示定价信息：

```
┌─────────────────────────────────────┐
│ 🖥️ qwen-max                  ✅ 启用 │
├─────────────────────────────────────┤
│ Token: 4000                         │
│ 温度: 0.7                           │
│ 超时: 60s                           │
├─────────────────────────────────────┤
│ 💰 定价:                            │
│   输入: 0.0200 CNY/1K               │
│   输出: 0.0600 CNY/1K               │
└─────────────────────────────────────┘
```

## 📊 使用示例

### 场景 1：查看本周成本

1. 访问使用统计页面
2. 选择"最近 7 天"
3. 查看总成本卡片
4. 查看每日成本趋势图

### 场景 2：对比不同模型成本

1. 访问使用统计页面
2. 查看"按模型统计"柱状图
3. 对比不同模型的成本
4. 识别高成本模型

### 场景 3：分析供应商使用情况

1. 访问使用统计页面
2. 查看"按供应商统计"饼图
3. 了解各供应商的成本占比
4. 优化供应商选择

### 场景 4：查看详细使用记录

1. 访问使用统计页面
2. 滚动到使用记录表格
3. 查看每次 API 调用的详细信息
4. 根据需要调整每页显示数量

### 场景 5：清理历史数据

1. 访问使用统计页面
2. 点击"清理旧记录"按钮
3. 确认删除 90 天前的数据
4. 查看删除结果

## 🎯 最佳实践

### 1. 定期查看

建议每周查看一次使用统计，了解：
- 成本趋势是否正常
- 是否有异常高成本
- 各模型使用情况

### 2. 成本优化

根据统计数据优化模型选择：
- 对于简单任务使用低成本模型
- 对于复杂任务使用高性能模型
- 平衡成本和效果

### 3. 预算控制

- 设定每月预算目标
- 定期对比实际成本
- 及时调整使用策略

### 4. 数据管理

- 定期清理旧数据（建议保留 90 天）
- 重要数据可以导出备份
- 关注异常使用记录

## 🔍 故障排查

### 问题 1：页面加载失败

**症状**: 页面显示错误或无法加载

**解决方案**:
1. 检查网络连接
2. 刷新页面
3. 检查后端服务是否正常
4. 查看浏览器控制台错误信息

### 问题 2：图表不显示

**症状**: 图表区域空白

**解决方案**:
1. 检查是否有数据
2. 尝试切换时间范围
3. 刷新页面
4. 检查 ECharts 是否正确加载

### 问题 3：数据不准确

**症状**: 显示的数据与预期不符

**解决方案**:
1. 检查模型定价配置是否正确
2. 检查时间范围选择
3. 检查数据库中的使用记录
4. 联系管理员检查后端日志

### 问题 4：无法清理旧记录

**症状**: 点击清理按钮无反应或报错

**解决方案**:
1. 检查用户权限
2. 检查后端服务状态
3. 查看浏览器控制台错误
4. 联系管理员

## 📱 响应式设计

使用统计页面支持不同屏幕尺寸：

- **桌面端** (>1200px): 完整显示所有功能
- **平板端** (768px-1200px): 图表自适应调整
- **移动端** (<768px): 垂直布局，图表缩小

## 🔐 权限说明

- 需要登录才能访问
- 所有登录用户都可以查看使用统计
- 只能查看自己的使用记录（如果启用了用户隔离）
- 管理员可以查看所有用户的使用记录

## 📝 注意事项

1. **数据延迟**: 统计数据可能有几秒钟延迟
2. **货币单位**: 确保所有模型使用统一的货币单位
3. **定价更新**: 供应商调整价格后需要及时更新配置
4. **数据备份**: 重要数据建议定期导出备份
5. **浏览器兼容**: 建议使用 Chrome、Firefox、Edge 等现代浏览器

## 🚀 未来功能

计划中的功能：
- [ ] 导出统计报表（Excel/PDF）
- [ ] 成本预警通知
- [ ] 预算管理
- [ ] 更多图表类型
- [ ] 自定义时间范围
- [ ] 成本优化建议

## 📚 相关文档

- [使用统计与定价配置功能](./USAGE_STATISTICS_AND_PRICING.md)
- [配置管理文档](./CONFIG_MANAGEMENT.md)
- [API 文档](./API_DOCUMENTATION.md)

