7.0 KiB
7.0 KiB
任务 05 检查记录:数据中枢纵向闭环
日期:2026-08-31(含对照原型图的二次校准)
交付内容
后端统计服务与接口
server/src/services/stats.ts(统计唯一来源):collectStudyDates(当日学习行为日期集合)、computeStreak(连续打卡)、dailyMinutes(当日耗时)、computeDaysToExam(距离考试天数)、computeMastery(五大模块最近 30 天正确率)、computeWeakPoints(最近 7 天错题按子模块聚合 → 次数 + 错因)。server/src/handlers/dashboard.ts:overview返回备考天数/距离考试天数/考试日期/目标分/连续打卡/今日是否打卡/今日时长/较昨日百分比/今日刷题/今日正确率/今日任务/待复习错题/今日新增错题等;trends补齐每日 minutes;新增mastery、weakPoints。路由 31 → 33。server/src/schemas/api.ts:DashboardOverviewResponseSchema扩展字段、DashboardWeakPointsResponseSchema改为{ module, point, count, reasons }。
演示数据
- 题库 18 题覆盖五大模块(含行程问题/图形推理/增长率各多题);相对「今天」生成近 14 天作答记录、5 场模考(54→67 上升趋势)、7 条错题(覆盖 4 个子模块、含错因)。
前端数据中枢
- 侧栏(
router/nav.ts+DesktopLayout.vue):「刷题中心」展开子菜单(刷题/错题本/申论),子项缩进;router增加/practice/wrong、/practice/essay。 api/index.ts:dashboardApi增加mastery/weakPoints。- 组件:
AppLineChart(SVG 折线 + 目标参考线)、StatCard(指标卡)、MockTrendCard(模考成绩趋势 + 稳定上升标签)、MasteryCard(掌握度)、WeakPointsCard(薄弱考点,compact 切换)、TodayTasksCard(今日任务 + 查看全部)。 DashboardView:桌面「数据中枢」(页头标题+副标题+今日已打卡徽章 → 4 指标卡 → 模考趋势+今日任务 → 掌握度+薄弱考点)与移动「首页」(问候语 → hero 备考天数/距离国考 → 今日学习 → 三指标 → 开始刷题/今日计划 → 待复习错题 → 薄弱考点 → 最近模考)共用同一份后端数据,按isMobile条件渲染。MobileLayout:首页隐藏顶部栏标题(以问候语作为页头)。
对照原型图(OCR 提取 + 结构核对)
使用 pymupdf + rapidocr 提取原型 PNG 文字与坐标,重建布局后逐项对齐:
| 原型要素 | 实现 |
|---|---|
| 桌面:页头「数据中枢」+「备考第86天:距离国考还有96天:已连续打卡12天」+「今日已打卡」徽章 | ✅ 副标题/徽章/连续打卡均真实计算 |
| 桌面:4 指标卡(今日学习时长/今日刷题/待复习错题/今日任务,含子文案与语义色) | ✅ StatCard |
| 桌面:模考成绩趋势(折线+目标线+稳定上升标签+近N场) | ✅ MockTrendCard + AppLineChart |
| 桌面:今日任务(查看全部+列表) | ✅ TodayTasksCard |
| 桌面:模块掌握度(5 模块进度+百分比) | ✅ MasteryCard |
| 桌面:本周薄弱考点(子模块+次数) | ✅ WeakPointsCard(compact) |
| 桌面侧栏:刷题中心展开刷题/错题本/申论 | ✅ 子菜单 |
| 移动:问候语 + hero(备考天数/距离国考) + 今日学习 + 三指标 + 开始刷题/今日计划 + 待复习错题 + 薄弱考点(含错因) + 最近模考 | ✅ 全部落地 |
接口实测(curl)
| 接口 | 结果 |
|---|---|
GET /api/dashboard/overview |
studyDays 92 / daysToExam 91 / examDate 2026-11-30 / target 72 / streak 6 / checkedInToday true / todayMinutes 25 / minutesDelta 39 / todayAnswered 8 / todayAccuracy 63 / tasks 1/3 / pendingReview 7 / todayNewWrong 2 |
GET /api/dashboard/mastery |
言语 92% / 数量 36% / 判断 90% / 资料 22% / 常识 89% |
GET /api/dashboard/weak-points |
行程问题(2·公式记忆不牢/审题不清)、图形推理(2)、增长率计算(2)、逻辑判断(1) |
GET /api/mock-exams/analysis |
records 67/64/61/58/54,trend 54→67,target 72 |
浏览器检查(agent-browser)
| 场景 | 结果 |
|---|---|
| 桌面 1440 | 侧栏子菜单、页头徽章、4 指标卡、模考趋势折线、今日任务、掌握度、薄弱考点均渲染 |
| 移动 390 | 问候语、hero、今日学习、三指标、CTA、待复习、薄弱考点、最近模考、TabBar;scrollWidth 380 ≤ 390 无溢出 |
| 空状态 | 清空数据 → 「还没有学习数据」;恢复后正常 |
| 命令 | server tsc、client vue-tsc、vite build 均通过 |
截图:deliverables/checks/task-05-desktop.png、task-05-mobile.png。
完成标准核对
- ✅ 有演示数据时指标、图表、任务、掌握度、薄弱考点全部可见。
- ✅ 清空数据显示合理空状态。
- ✅ 刷新后结果一致(数据均来自后端 JSON)。
- ✅ PC 数据看板与 Mobile 首页共用同一份后端数据。
- ✅ 页面布局与原型图结构对齐(含「模考成绩趋势」而非学习趋势)。
当前结论
任务 05 完成并按原型图二次校准:数据中枢桌面版与移动首页的结构、板块、字段均对照原型重建,统计计算真实接入后端数据。
任务 05 二次调整(2026-08-31)
完成了什么
依据原型图与《开发计划》完成任务 05「数据中枢纵向闭环」,打通「后端统计计算 → 接口 → 前端页面」完整链路,并对照原型图二次校准了 PC 数据看板与 Mobile 首页的结构。
- 后端:新增统计服务
services/stats.ts(连续打卡 / 每日时长 / 距离考试 / 模块掌握度 / 薄弱考点);扩展overview返回备考天数、距离考试、连续打卡、今日四项指标等;新增GET /api/dashboard/mastery、GET /api/dashboard/weak-points(路由 31 → 33)。 - 演示数据:题库 18 题覆盖五大模块,作答记录 51 条、模考 5 场(上升趋势)、错题 7 条(含错因),日期相对当天生成。
- 前端:数据中枢页重做为五板块——页头(标题+副标题+打卡徽章)、4 指标卡、模考成绩趋势、今日任务、模块掌握度、本周薄弱考点;移动首页为问候 + hero + 今日学习 + 三指标 + CTA + 待复习 + 薄弱考点 + 最近模考;侧栏加「刷题中心」子菜单。
关键决策
- 「趋势」按原型对应「模考成绩趋势」(来自模考数据),非学习趋势。
- 薄弱考点按原型改为「基于错题错因归因」聚合(最近 7 天,次数 + 错因),与「模块掌握度」(正确率)分离。
- 统计计算集中在后端
services/stats.ts,前端仅做展示型派生(如完成百分比、较上次差值)。 - 图表用自绘 SVG(
AppLineChart),不引入 ECharts,延续「不引重依赖」约定。
验证结论
- 有数据时指标、图表、任务、掌握度、薄弱考点全部可见;清空数据显示空状态;刷新一致。
- 桌面 1440 / 移动 390 双端实测渲染正常,移动无横向溢出;typecheck / build 通过。
- 结构已逐项对照原型 OCR 结果对齐。