feat: 管理界面优化 — 移动端自适应 + 数据源 + LLM 配置

移动端自适应: - 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 等
2026-09-17 02:43:44 +08:00
parent 6680da7d61
commit 91e406f5ee
14 changed files with 1312 additions and 174 deletions
@@ -3,7 +3,7 @@
 ## 概述

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

 ## 文件结构

@@ -14,7 +14,7 @@ src/admin/
 ├── api.ts                # 统一 API 客户端(带超时、错误处理、类型安全)
 ├── dal.ts                # 数据访问层(封装所有 API 端点调用)
 ├── types.ts              # TypeScript 类型定义(与 FastAPI Pydantic 对齐)
-├── components.tsx        # 通用 UI 组件(Card, Table, Badge, ProgressBar...)
+├── components.tsx        # 通用 UI 组件(Card, Table, Badge, ResponsiveTable...)
 ├── routes.tsx            # 路由定义(/admin/*)
 └── pages/
    ├── Dashboard.tsx     # 仪表盘(系统概览)
@@ -22,16 +22,18 @@ src/admin/
    ├── Predictions.tsx   # 预测管理(触发预测 + 评估结算)
    ├── Backtest.tsx      # 回测管理(策略验证)
    ├── Monitoring.tsx    # 监控面板(健康检查 + 错误日志)
-    └── Config.tsx        # 配置管理(API Key 管理)
+    ├── DataSources.tsx   # 数据源管理(数据源配置与测试)
+    ├── LLMConfig.tsx     # LLM 配置(模型连接与统计)
+    └── Config.tsx        # 系统配置(.env 配置查看与修改指南)
 ```

 ## 页面说明

 ### 1. 仪表盘 (`/admin`)
- 数据库表行数统计
- 最近采集任务状态
- 预测统计(总数、今日数、平均延迟)
- 最近错误日志
+- 系统健康状态概览
+- 联赛 / 比赛 / 预测数量统计
+- 最近联赛列表
+- 快捷操作导航

 ### 2. 数据采集 (`/admin/collection`)
 - 选择数据源: Bzzoiro / Understat / Injuries
@@ -40,25 +42,34 @@ src/admin/
 - 实时任务进度显示(每 5 秒自动刷新)

 ### 3. 预测管理 (`/admin/predictions`)
- 触发预测(全部联赛或指定联赛)
+- 触发预测(选择比赛 + 模式)
 - 模式切换: 五路专家 / 单一模型
- 预测历史分页查看
- 评估结算(回填实际结果)
+- 预测历史列表

 ### 4. 回测管理 (`/admin/backtest`)
- 策略选择: 置信度加权 / Kelly准则 / 固定金额
- 联赛多选、日期范围、初始资金配置
- 回测结果: ROI、胜率、最大回撤、夏普比率
- 交易明细可展开查看
+- 回测配置: 联赛、日期范围、场数、模式
+- 回测结果: 准确率、已评分数
+- 模型评估统计

 ### 5. 监控面板 (`/admin/monitoring`)
 - 系统健康状态(服务 + 检查项)
- 错误日志(每 10 秒自动刷新)
- 死信队列监控
+- 版本与运行时间

-### 6. 配置管理 (`/admin/config`)
- API Key 配置(LLM / 数据源 / 系统)
- 脱敏显示 + 在线编辑
+### 6. 数据源管理 (`/admin/data-sources`) ✨ 新增
+- 数据源状态: API Key 配置状态(脱敏)
+- 测试连接: 调用采集 API 验证
+- 数据源说明文档
+
+### 7. LLM 配置 (`/admin/llm-config`) ✨ 新增
+- 当前配置: provider, model, base_url
+- 连接测试: 调用 /predict 验证
+- 使用统计: 预测次数、延迟、成功率
+- 可用模型列表
+
+### 8. 系统配置 (`/admin/config`) 🔧 增强
+- 配置列表: 脱敏显示所有 .env 配置项
+- 配置修改指南: SSH 修改 .env + 重启服务
+- 快速导航: 数据源 / LLM 配置页面

 ## 路由设计

@@ -70,7 +81,28 @@ src/admin/
 | `/admin/predictions` | 预测管理 | 预测与评估 |
 | `/admin/backtest` | 回测管理 | 策略回测 |
 | `/admin/monitoring` | 监控面板 | 系统监控 |
-| `/admin/config` | 配置管理 | 参数配置 |
+| `/admin/data-sources` | 数据源管理 | 数据源配置 |
+| `/admin/llm-config` | LLM 配置 | 模型管理 |
+| `/admin/config` | 系统配置 | 参数配置 |
+
+## 响应式布局
+
+### 移动端 (< 768px)
+- 侧边栏折叠为汉堡菜单,点击展开
+- 表格隐藏,显示卡片视图
+- 表单单列布局
+- 按钮最小 44px 触摸目标
+- 统计卡片 1 列
+
+### 平板 (768px - 1024px)
+- 侧边栏可折叠
+- 部分表格可用
+- 统计卡片 2 列
+
+### 桌面 (> 1024px)
+- 侧边栏固定显示
+- 完整表格视图
+- 统计卡片 4 列

 ## 技术实现

@@ -79,7 +111,9 @@ src/admin/
 - **API**: 统一 fetch 客户端,30s 超时,类型安全
 - **类型**: TypeScript strict mode,与后端 Pydantic 模型对齐
 - **错误处理**: ApiError 类 + 页面级错误展示
- **自动刷新**: 采集(5s)、监控(10s)
+- **响应式**: Tailwind 断点 (sm:, md:, lg:, xl:)
+- **触摸友好**: 所有按钮 min-h-[44px]
+- **移动端**: 可折叠侧边栏 + 卡片视图替代表格

 ## 启动方式