# Profeto Admin 后台管理系统

## 概述

Profeto 后台管理界面,为足球 LLM 预测系统提供运维管理能力。
暗色主题设计,支持响应式布局(移动端 / 平板 / 桌面)。

## 文件结构

```
src/admin/
├── AdminApp.tsx          # Admin 应用入口(独立路由)
├── AdminLayout.tsx       # 管理后台布局(侧边栏 + 顶栏 + 内容区)
├── api.ts                # 统一 API 客户端(带超时、错误处理、类型安全)
├── dal.ts                # 数据访问层(封装所有 API 端点调用)
├── types.ts              # TypeScript 类型定义(与 FastAPI Pydantic 对齐)
├── components.tsx        # 通用 UI 组件(Card, Table, Badge, ResponsiveTable...)
├── routes.tsx            # 路由定义(/admin/*)
└── pages/
    ├── Dashboard.tsx     # 仪表盘(系统概览)
    ├── Collection.tsx    # 数据采集(触发采集任务)
    ├── Predictions.tsx   # 预测管理(触发预测 + 评估结算)
    ├── Backtest.tsx      # 回测管理(策略验证)
    ├── Monitoring.tsx    # 监控面板(健康检查 + 错误日志)
    ├── DataSources.tsx   # 数据源管理(数据源配置与测试)
    ├── LLMConfig.tsx     # LLM 配置(模型连接与统计)
    └── Config.tsx        # 系统配置(.env 配置查看与修改指南)
```

## 页面说明

### 1. 仪表盘 (`/admin`)
- 系统健康状态概览
- 联赛 / 比赛 / 预测数量统计
- 最近联赛列表
- 快捷操作导航

### 2. 数据采集 (`/admin/collection`)
- 选择数据源: Bzzoiro / Understat / Injuries
- 选择联赛、日期范围
- 触发采集任务
- 实时任务进度显示(每 5 秒自动刷新)

### 3. 预测管理 (`/admin/predictions`)
- 触发预测(选择比赛 + 模式)
- 模式切换: 五路专家 / 单一模型
- 预测历史列表

### 4. 回测管理 (`/admin/backtest`)
- 回测配置: 联赛、日期范围、场数、模式
- 回测结果: 准确率、已评分数
- 模型评估统计

### 5. 监控面板 (`/admin/monitoring`)
- 系统健康状态(服务 + 检查项)
- 版本与运行时间

### 6. 数据源管理 (`/admin/data-sources`) ✨ 新增
- 数据源状态: API Key 配置状态(脱敏)
- 测试连接: 调用采集 API 验证
- 数据源说明文档

### 7. LLM 配置 (`/admin/llm-config`) ✨ 新增
- 当前配置: provider, model, base_url
- 连接测试: 调用 /predict 验证
- 使用统计: 预测次数、延迟、成功率
- 可用模型列表

### 8. 系统配置 (`/admin/config`) 🔧 增强
- 配置列表: 脱敏显示所有 .env 配置项
- 配置修改指南: SSH 修改 .env + 重启服务
- 快速导航: 数据源 / LLM 配置页面

## 路由设计

| 路径 | 页面 | 描述 |
|------|------|------|
| `/` | 先知主站 | 报纸风格预测展示 |
| `/admin` | 仪表盘 | 系统概览 |
| `/admin/collection` | 数据采集 | 采集任务管理 |
| `/admin/predictions` | 预测管理 | 预测与评估 |
| `/admin/backtest` | 回测管理 | 策略回测 |
| `/admin/monitoring` | 监控面板 | 系统监控 |
| `/admin/data-sources` | 数据源管理 | 数据源配置 |
| `/admin/llm-config` | LLM 配置 | 模型管理 |
| `/admin/config` | 系统配置 | 参数配置 |

## 响应式布局

### 移动端 (< 768px)
- 侧边栏折叠为汉堡菜单,点击展开
- 表格隐藏,显示卡片视图
- 表单单列布局
- 按钮最小 44px 触摸目标
- 统计卡片 1 列

### 平板 (768px - 1024px)
- 侧边栏可折叠
- 部分表格可用
- 统计卡片 2 列

### 桌面 (> 1024px)
- 侧边栏固定显示
- 完整表格视图
- 统计卡片 4 列

## 技术实现

- **路由**: `react-router-dom` v6 嵌套路由
- **样式**: Tailwind CSS 暗色主题 (gray-900/800/700)
- **API**: 统一 fetch 客户端,30s 超时,类型安全
- **类型**: TypeScript strict mode,与后端 Pydantic 模型对齐
- **错误处理**: ApiError 类 + 页面级错误展示
- **响应式**: Tailwind 断点 (sm:, md:, lg:, xl:)
- **触摸友好**: 所有按钮 min-h-[44px]
- **移动端**: 可折叠侧边栏 + 卡片视图替代表格

## 启动方式

```bash
cd /vol2/1000/Docker/Profeto/frontend
npm run dev
# 访问 http://localhost:5173/admin
```

## 访问入口

主站页面顶部「管理后台」链接可跳转至 `/admin`。
Admin 后台左侧底栏「返回前台」链接可回到 `/`。