组件化学习仪表盘
把分散的课程进度、任务和成绩聚合为一个快速、可定制的个人学习首页。
01 / PROBLEM
一句话
学生需要在多个系统之间切换,才能确认今天要做什么、哪些课程正在落后。
02 / CONTEXT
背景与目标
课程平台、待办工具和表格各自保存数据,零散信息让每周复盘成本很高。目标是做一个只读聚合层,让学习状态在十秒内可被理解。
- 在同一页面展示今日任务、课程进度、成绩趋势和风险提醒。
- 首屏在常见校园网络下稳定低于 1.5 秒完成可交互。
- 通过组件属性和主题令牌支持后续接入不同数据源。
03 / ROLE
我的角色
独立开发
- 设计信息层级、组件拆分和响应式布局。
- 实现仪表盘状态管理、图表联动和本地偏好设置。
- 完成性能预算、无障碍检查和部署流程。
04 / STACK
技术栈
05 / SYSTEM
架构图 / 数据流
数据适配层将不同课程源统一为领域模型,Pinia 管理页面快照,视图组件按卡片独立订阅。
06 / FEATURES
核心功能
聚合视图
今日任务、课程风险和趋势图集中在可配置网格中。
图表联动
点击课程卡片后,成绩和任务图表同步切换上下文。
本地定制
支持卡片排序、隐藏与布局偏好持久化。
07 / TRADE-OFFS
难点与解决方案
多个数据源的字段结构不一致
定义统一的 CourseSnapshot 模型,并让每个适配器只负责转换和校验,隔离上游变化。
图表组件让首屏包体持续增长
将图表按卡片懒加载,拆分路由包,并用构建产物体积门禁阻止回退。
08 / OUTCOME
结果
完成可独立运行的演示版本,学习信息整理时间从约 8 分钟缩短到 2 分钟,并形成一套可复用卡片组件。
62%首屏包体下降从 418KB 降至 159KB
1.2s可交互时间校园网络测试中位数
96Lighthouse 性能分移动端模拟测试
09 / SCREENS
截图或 GIF
10 / LINKS
Demo / 代码仓库
11 / RETROSPECTIVE
复盘
如果重做,我会更早固定数据契约,并把图表库从主包中彻底隔离;同时先和真实用户验证卡片优先级,再投入主题定制能力。