shangfangjian
91e406f5ee
移动端自适应: - AdminLayout: 汉堡菜单 + 可折叠侧边栏 + 遮罩层 + ESC 关闭 - 所有页面响应式布局 (grid-cols-1 sm:grid-cols-2 lg:grid-cols-4) - 触摸友好按钮 (min-h-[44px]) - 表格移动端卡片视图 新增页面: - DataSources: 数据源状态 + API Key 脱敏 + 测试连接 - LLMConfig: LLM 配置 + 测试连接 + 使用统计 + 最近预测 增强功能: - Config: 配置列表 + 修改指南 + 快捷导航 - types: 新增 DataSourceStatus, LLMUsageStats 等类型 - dal: 新增 testDataSource, fetchDataSourceStatuses, testLLMConnection 等
4.3 KiB
4.3 KiB
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-domv6 嵌套路由 - 样式: Tailwind CSS 暗色主题 (gray-900/800/700)
- API: 统一 fetch 客户端,30s 超时,类型安全
- 类型: TypeScript strict mode,与后端 Pydantic 模型对齐
- 错误处理: ApiError 类 + 页面级错误展示
- 响应式: Tailwind 断点 (sm:, md:, lg:, xl:)
- 触摸友好: 所有按钮 min-h-[44px]
- 移动端: 可折叠侧边栏 + 卡片视图替代表格
启动方式
cd /vol2/1000/Docker/Profeto/frontend
npm run dev
# 访问 http://localhost:5173/admin
访问入口
主站页面顶部「管理后台」链接可跳转至 /admin。
Admin 后台左侧底栏「返回前台」链接可回到 /。