学习闭环三页与生活侧页面落地
一、阶段背景在完成桌面端基础壳子、登录建档链路以及聊天模块首版之后项目进入了两个非常关键的业务阶段第二阶段优先做学习闭环三页第三阶段优先做生活侧页面这两个阶段的目标非常明确不是单纯把页面补出来而是要让前端真正形成业务闭环。第二阶段要完成“聊天 - 计划 - 错题 - 复习”的学习链路第三阶段要完成“情绪/饮食 - 状态中心 - 学习节奏调整”的生活链路到了这一步项目开发的重点已经不再是“页面能不能打开”而是“数据能不能真正流动起来、动作能不能真实回写、状态能不能在多个页面之间同步变化”。二、第二阶段目标第二阶段的核心任务是完成三个页面今日计划页面错题本页面复习任务页面同时补齐对应的服务层和状态层desktop/src/services/api/plan.tsdesktop/src/services/api/wrongBook.tsdesktop/src/services/api/review.tsdesktop/src/store/usePlanStore.tsdesktop/src/store/useStudyStore.ts这一阶段之所以优先级高是因为它和聊天模块已经实现的动作按钮直接相连open_plan需要落到计划页add_wrong_book需要真实沉淀到错题本add_review需要真实出现在复习任务里只有把这三页做成真实可用页面聊天模块才不只是“会说话”而是可以真正驱动学习流程。三、第二阶段完成内容1. 今日计划页面完成落地计划页已经不再是占位页面而是具备了比较完整的学习任务管理能力主要包括任务分组展示任务完成率统计日期切换生成计划调整计划完成任务跳过任务跳转复习任务拖拽排序对应页面拆分如下desktop/src/pages/Plan/index.tsxdesktop/src/pages/Plan/PlanHeader.tsxdesktop/src/pages/Plan/TaskList.tsxdesktop/src/pages/Plan/TaskItem.tsxdesktop/src/pages/Plan/AdjustModal.tsx2. 错题本页面完成落地错题本页面已经完成了从“错题列表”到“错题资产管理”的过渡支持统计概览多条件筛选排序详情抽屉再练入口复习记录查看掌握度趋势图对应页面拆分如下desktop/src/pages/WrongBook/index.tsxdesktop/src/pages/WrongBook/StatsOverview.tsxdesktop/src/pages/WrongBook/FilterBar.tsxdesktop/src/pages/WrongBook/WrongList.tsxdesktop/src/pages/WrongBook/WrongDetail.tsxdesktop/src/pages/WrongBook/RetryModal.tsxdesktop/src/pages/WrongBook/ReviewRecordsModal.tsxdesktop/src/pages/WrongBook/MasteryTrendChart.tsx3. 复习任务页面完成落地复习页已经完成了从待办展示到复习执行链路的主要流程支持今日待复习列表未来 7 天视图开始复习查看答案自评提交跳过复习结果反馈对应页面拆分如下desktop/src/pages/Review/index.tsxdesktop/src/pages/Review/TodayReview.tsxdesktop/src/pages/Review/UpcomingReview.tsxdesktop/src/pages/Review/ReviewExercise.tsxdesktop/src/pages/Review/ReviewResult.tsx四、第二阶段遇到的问题与补齐过程第二阶段并不是一次性完美完成的中间经历过几轮收口和补齐。最核心的问题主要有以下几类。1. 学习页面最初是“能看”但还不够“能闭环”一开始虽然计划、错题、复习三个页面已经从占位页升级成真实页面但仍然存在一个明显问题聊天动作已经能触发成功提示但页面侧的真实承接还不够完整也就是说用户在聊天里点击add_wrong_book、add_review、open_plan时虽然前端有响应但业务结果还没有完全沉淀成“能立即看到的页面变化”。2. 错题本缺少更强的“管理视角”早期错题本的问题主要是缺少掌握度趋势图缺少复习记录查看入口详情信息足够但复盘感不强后来通过补齐MasteryTrendChart.tsx和ReviewRecordsModal.tsx让错题本从静态详情展示提升为可追踪、可回看的动态资产页。3. 复习页对未来节奏的表达不够直观之前未来 7 天的复习安排更多是列表式展示虽然能用但不够直观。后来将它收口为更具日历感的 7 天网格视图让用户更容易感知接下来几天的负载分布。4. 计划页缺少排序交互任务管理手感不够强计划页早期更偏向“展示型页面”能看到任务但调整节奏仍然偏依赖按钮和弹窗。后续补上拖拽排序之后页面的交互效率明显提高用户可以直接按优先级调整任务顺序更符合桌面端高效率操作的定位。5. 跨页刷新容易失联第二阶段最大的技术问题其实不是 UI而是“写操作后哪些页面该刷新”。比如完成计划任务后计划页要刷新状态面板也要刷新提交复习结果后复习页、错题本、计划页、状态面板都可能受影响错题重新练习后错题列表和掌握度数据要同步变化为了解决这个问题项目在useAppStore中统一建立了emitRefreshTargets机制让业务动作能够按目标维度发出刷新信号再由对应页面监听并重新拉取数据。这一步做完之后第二阶段才真正从“页面联调”进入“业务联动”。五、第二阶段最终效果当第二阶段问题全部补齐后学习闭环三页已经形成了较稳定的闭环聊天中的open_plan可以真实打开计划页聊天中的add_wrong_book能在错题本里看到沉淀结果聊天中的add_review能在复习页中看到任务结果计划完成、复习完成、错题再练之后相关页面和右侧状态面板都能同步刷新这说明第二阶段已经不只是“把 3 个页面做出来了”而是真正把学习链路接通了。六、第三阶段目标第三阶段的核心任务是先做生活侧页面情绪记录页面饮食记录页面同时补齐对应服务层desktop/src/services/api/mood.tsdesktop/src/services/api/meal.ts这一阶段和第二阶段不同它的重点不在于聊天动作承接而在于让生活数据真实进入状态中心让状态变化进一步影响学习节奏换句话说第三阶段解决的是“系统是否真的具备学习与生活联动能力”。七、第三阶段完成内容1. 情绪记录页面完成落地情绪页已经实现了完整的记录和回看链路主要包括今日打卡心情分数选择关键词多选自由文本备注是否影响学习标记最近 7 天趋势图历史记录分页展示对应文件如下desktop/src/pages/Mood/index.tsxdesktop/src/pages/Mood/MoodCheckin.tsxdesktop/src/pages/Mood/MoodTrend.tsxdesktop/src/pages/Mood/MoodHistory.tsxdesktop/src/services/api/mood.ts2. 饮食记录页面完成落地饮食页已经实现了“概览 记录 推荐”的完整结构主要包括今日饮食概览早餐/午餐/晚餐/加餐状态展示缺失餐次提醒记录一餐菜单选择或自定义输入当前餐次推荐推荐原因说明一键采用推荐并记录对应文件如下desktop/src/pages/Meal/index.tsxdesktop/src/pages/Meal/TodayMeals.tsxdesktop/src/pages/Meal/MealRecord.tsxdesktop/src/pages/Meal/MealRecommend.tsxdesktop/src/services/api/meal.ts3. 状态中心联动完成第三阶段最关键的不是页面展示而是回写状态中心。现在已经形成以下闭环情绪打卡后会触发状态中心刷新当情绪较低且影响学习时还会联动计划强度柔化并触发计划页刷新饮食记录后会更新规律度并刷新状态中心右侧状态面板会重新拉取/profile/state展示最新的情绪分数、规律度和状态标签这意味着生活侧数据已经不再是孤立存在而是开始真正影响系统的学习决策。八、第三阶段遇到的问题与解决方式1. 生活数据容易做成“单页自嗨”情绪页和饮食页最容易出现的问题是页面自己能提交成功但提交完之后项目整体状态没有变化。如果只是做成这样那生活侧就只是两个“记录页面”没有真正接入系统。为了解决这个问题前端没有让情绪页和饮食页停留在局部状态里而是统一通过刷新信号驱动状态面板重新拉取/profile/state把生活数据同步进全局状态视图。2. 情绪页需要和计划系统联动情绪记录并不是单纯记录心情。项目任务里已经明确情绪会影响计划强度。这意味着当用户低情绪且学习受影响时前端不能只显示“提交成功”还需要反映出计划被柔化的结果。现在情绪页提交后已经会根据接口返回结果决定是否同时触发state和plan刷新这一步把“生活侧”真正接进了“学习侧”。3. 饮食推荐不能只是静态文案饮食页的推荐如果只是写几个固定建议会显得非常假也无法体现系统设计逻辑。现在的实现方式是根据当前时间推断餐次结合用户偏好、规律度、近期状态生成推荐给出原因说明支持一键采用推荐并直接记录这样做之后推荐区就不只是装饰而是真正成为操作入口。九、第二、三阶段完成后的整体变化当第二、三阶段全部收口之后桌面端前端已经从“聊天驱动的壳子应用”进一步升级为“有学习闭环、有生活联动能力的业务系统”。已经形成的核心链路包括聊天 - 计划 - 错题 - 复习情绪/饮食 - 状态中心 - 学习节奏调整这两个链路打通后整个项目前端的业务骨架已经明显稳了下来。后续继续做课堂记忆、学习复盘、悬浮窗、截图、通知这些能力时不再需要返工基础业务流。十、这一阶段的收获这一轮开发给我最大的感受是真正难的不是“把页面写出来”而是“让页面之间真的产生业务关系”。第二阶段解决的是学习链路闭环问题第三阶段解决的是生活数据接入问题。只有把这两部分都做扎实项目才会从一个“功能拼装的前端”变成一个“真正围绕用户学习节奏运转的桌面应用”。十一、下一步计划在第二、三阶段完成之后接下来最自然的推进方向就是课堂记忆页面跟课上下文入口题集小测流程页学习复盘页面悬浮窗、截图、桌面通知、全局快捷键等桌面能力也就是说后面的重点会从“基础业务闭环”转向“课堂场景深化”和“桌面端特色能力完善”。十二、阶段总结第二阶段和第三阶段的完成标志着项目前端已经迈过了最容易松散的两个阶段学习页面不再只是孤立列表页而是形成了真实学习闭环生活页面不再只是独立记录页而是接入了状态中心与计划调节逻辑从项目整体推进上看这两阶段的价值非常高。它们让后续更复杂的课堂场景和桌面能力有了稳定的业务基础也让整个应用逐渐具备了“陪伴式学习助手”的真实形态。