英语学习用户学情数据看板

项目架构

数据模型设计

用户维度
├── 单个用户
├── 班级
├── 学校
├── 地区
└── 自定义用户分群

时间维度
├── 当天
├── 近一周
├── 近一月
├── 近一年
└── 自定义时间范围

产品线维度
├── 校内同步
│   ├── 单词跟读
│   ├── 配音
│   ├── 点读
│   └── 练习
├── 新概念英语
│   ├── 单词跟读
│   ├── 配音
│   └── 练习
└── 其他产品线...

模块维度
├── 单词跟读（跨产品线）
├── 配音（跨产品线）
├── 点读
├── 练习
├── 作业（独立模块）
└── 单词专区（独立模块）

页面布局设计

┌─────────────────────────────────────────────────────────┐
│  顶部筛选器区域                                          │
│  [用户选择] [时间选择] [产品线选择] [模块选择]          │
├─────────────────────────────────────────────────────────┤
│  概览卡片区域                                            │
│  [总学习时长] [总练习数] [平均正确率] [完成度]          │
├─────────────────────────────────────────────────────────┤
│  学习日历热力图（GitHub风格）                            │
│  [显示每天的学习活动，不同颜色表示不同模块]              │
├─────────────────────────────────────────────────────────┤
│  产品线进度展示                                          │
│  [各产品线的单元完成情况，进度条展示]                    │
├─────────────────────────────────────────────────────────┤
│  模块数据统计（图表）                                    │
│  [折线图：时间趋势] [柱状图：模块对比]                   │
├─────────────────────────────────────────────────────────┤
│  详细数据列表                                            │
│  [可展开查看具体的学习记录，如单词评分等]                │
└─────────────────────────────────────────────────────────┘

技术栈

• React 18 + TypeScript
• Vite（构建工具）
• Recharts（数据可视化）
• React Calendar Heatmap（日历热力图）
• Tailwind CSS（样式）

启动项目

npm install
npm run dev