# 学习信息后台 总设计

> ADMIN-INFO-000 | v1.0 | 2026-06-09

## 1. 概述

基于 M8 + M-API-ADMIN-INFO 后端接口，构建学习信息管理后台的前端页面。

## 2. 技术栈

- React 19 + TypeScript
- Ant Design 5 (antd)
- @ant-design/pro-components (ProTable)
- React Router v6
- @tanstack/react-query
- ECharts (图表)

## 3. 路由结构

```
/admin/learning/dashboard          — Dashboard
/admin/learning/reading-events     — 阅读事件列表
/admin/learning/reading-events/:id — 事件详情
/admin/learning/sessions           — 学习会话列表
/admin/learning/progress           — 阅读进度列表
/admin/learning/daily-activities   — 每日活动/热力图
/admin/learning/records            — 学习记录列表
/admin/learning/anomalies          — 异常数据
/admin/learning/user-diagnose      — 用户诊断
/admin/learning/material-diagnose  — 资料诊断
/admin/learning/temporary-materials — 临时文件
/admin/learning/export             — 数据导出
```

## 4. 组件树

```
AdminLayout
├── DashboardPage        — 统计卡片 + 图表
├── ReadingEventPage     — ProTable + 筛选
│   └── EventDetailPage  — 描述列表
├── SessionPage          — ProTable
├── ProgressPage         — ProTable
├── DailyActivityPage    — 日历热力图
├── RecordPage           — ProTable
├── AnomalyPage          — 异常列表
├── UserDiagnosePage     — 用户数据面板
├── MaterialDiagnosePage — 资料数据面板
├── TempMaterialPage     — 临时文件管理
└── ExportPage           — 导出表单
```

## 5. API 对接

所有接口 base: `/admin/learning/*`

| 页面 | API |
|------|-----|
| Dashboard | `GET /admin/learning/dashboard` |
| 事件列表 | `GET /admin/learning/reading-events` |
| 事件详情 | `GET /admin/learning/reading-events/:id` |
| 会话列表 | `GET /admin/learning/sessions` |
| 进度列表 | `GET /admin/learning/progress` |
| 每日活动 | `GET /admin/learning/daily-activities` |
| 记录列表 | `GET /admin/learning/records` |
| 用户诊断 | `GET /admin/learning/user-diagnose?userId=` |
| 资料诊断 | `GET /admin/learning/material-diagnose?materialId=` |
| 异常数据 | `GET /admin/learning/anomalies` |
| 重算 | `POST /admin/learning/recalculate` |
| 导出 | `GET /admin/learning/export` |