前端 示例内容 · 待替换

组件化学习仪表盘

把分散的课程进度、任务和成绩聚合为一个快速、可定制的个人学习首页。

角色
独立开发
时间
2025.10 - 2025.12
组件化学习仪表盘封面
01 / PROBLEM

一句话

学生需要在多个系统之间切换,才能确认今天要做什么、哪些课程正在落后。

02 / CONTEXT

背景与目标

课程平台、待办工具和表格各自保存数据,零散信息让每周复盘成本很高。目标是做一个只读聚合层,让学习状态在十秒内可被理解。

  • 在同一页面展示今日任务、课程进度、成绩趋势和风险提醒。
  • 首屏在常见校园网络下稳定低于 1.5 秒完成可交互。
  • 通过组件属性和主题令牌支持后续接入不同数据源。
03 / ROLE

我的角色

独立开发

  1. 设计信息层级、组件拆分和响应式布局。
  2. 实现仪表盘状态管理、图表联动和本地偏好设置。
  3. 完成性能预算、无障碍检查和部署流程。
04 / STACK

技术栈

TypeScriptVue 3PiniaECharts
05 / SYSTEM

架构图 / 数据流

数据适配层将不同课程源统一为领域模型,Pinia 管理页面快照,视图组件按卡片独立订阅。

学习仪表盘的数据流
学习仪表盘的数据流
06 / FEATURES

核心功能

聚合视图

今日任务、课程风险和趋势图集中在可配置网格中。

图表联动

点击课程卡片后,成绩和任务图表同步切换上下文。

本地定制

支持卡片排序、隐藏与布局偏好持久化。

07 / TRADE-OFFS

难点与解决方案

多个数据源的字段结构不一致

定义统一的 CourseSnapshot 模型,并让每个适配器只负责转换和校验,隔离上游变化。

图表组件让首屏包体持续增长

将图表按卡片懒加载,拆分路由包,并用构建产物体积门禁阻止回退。

08 / OUTCOME

结果

完成可独立运行的演示版本,学习信息整理时间从约 8 分钟缩短到 2 分钟,并形成一套可复用卡片组件。

62%首屏包体下降从 418KB 降至 159KB
1.2s可交互时间校园网络测试中位数
96Lighthouse 性能分移动端模拟测试
11 / RETROSPECTIVE

复盘

如果重做,我会更早固定数据契约,并把图表库从主包中彻底隔离;同时先和真实用户验证卡片优先级,再投入主题定制能力。