feat: 后台管理 Admin 仪表盘

新增完整的后台管理系统 (/admin):
- Dashboard: 系统概览、最近采集状态、预测统计
- Collection: 数据采集触发(bzzoiro/understat/injuries)
- Predictions: 预测历史查看、触发新预测
- Backtest: 回测配置与结果查看
- Monitoring: 系统健康、错误日志、死色队列
- Config: API Key 与数据源配置

技术栈: React Router + Tailwind 暗色主题 + TypeScript
文件: 11 个新文件, +21KB JS / +5KB CSS
This commit is contained in:
shangfangjian
2026-09-17 02:00:14 +08:00
parent 1219b4fd18
commit d3284c48c3
19 changed files with 2671 additions and 81 deletions
+95
View File
@@ -0,0 +1,95 @@
# 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, ProgressBar...)
├── routes.tsx # 路由定义(/admin/*)
└── pages/
├── Dashboard.tsx # 仪表盘(系统概览)
├── Collection.tsx # 数据采集(触发采集任务)
├── Predictions.tsx # 预测管理(触发预测 + 评估结算)
├── Backtest.tsx # 回测管理(策略验证)
├── Monitoring.tsx # 监控面板(健康检查 + 错误日志)
└── Config.tsx # 配置管理(API Key 管理)
```
## 页面说明
### 1. 仪表盘 (`/admin`)
- 数据库表行数统计
- 最近采集任务状态
- 预测统计(总数、今日数、平均延迟)
- 最近错误日志
### 2. 数据采集 (`/admin/collection`)
- 选择数据源: Bzzoiro / Understat / Injuries
- 选择联赛、日期范围
- 触发采集任务
- 实时任务进度显示(每 5 秒自动刷新)
### 3. 预测管理 (`/admin/predictions`)
- 触发预测(全部联赛或指定联赛)
- 模式切换: 五路专家 / 单一模型
- 预测历史分页查看
- 评估结算(回填实际结果)
### 4. 回测管理 (`/admin/backtest`)
- 策略选择: 置信度加权 / Kelly准则 / 固定金额
- 联赛多选、日期范围、初始资金配置
- 回测结果: ROI、胜率、最大回撤、夏普比率
- 交易明细可展开查看
### 5. 监控面板 (`/admin/monitoring`)
- 系统健康状态(服务 + 检查项)
- 错误日志(每 10 秒自动刷新)
- 死信队列监控
### 6. 配置管理 (`/admin/config`)
- API Key 配置(LLM / 数据源 / 系统)
- 脱敏显示 + 在线编辑
## 路由设计
| 路径 | 页面 | 描述 |
|------|------|------|
| `/` | 先知主站 | 报纸风格预测展示 |
| `/admin` | 仪表盘 | 系统概览 |
| `/admin/collection` | 数据采集 | 采集任务管理 |
| `/admin/predictions` | 预测管理 | 预测与评估 |
| `/admin/backtest` | 回测管理 | 策略回测 |
| `/admin/monitoring` | 监控面板 | 系统监控 |
| `/admin/config` | 配置管理 | 参数配置 |
## 技术实现
- **路由**: `react-router-dom` v6 嵌套路由
- **样式**: Tailwind CSS 暗色主题 (gray-900/800/700)
- **API**: 统一 fetch 客户端,30s 超时,类型安全
- **类型**: TypeScript strict mode,与后端 Pydantic 模型对齐
- **错误处理**: ApiError 类 + 页面级错误展示
- **自动刷新**: 采集(5s)、监控(10s)
## 启动方式
```bash
cd /vol2/1000/Docker/Profeto/frontend
npm run dev
# 访问 http://localhost:5173/admin
```
## 访问入口
主站页面顶部「管理后台」链接可跳转至 `/admin`
Admin 后台左侧底栏「返回前台」链接可回到 `/`