本项目是一个面向中小学生英语学习场景的教育训练平台,核心目标是围绕教材同步学习、专项能力训练、学习任务执行和学习结果反馈,提供完整的英语学习闭环。系统主要包含首页、英语学习中心、用户中心、学习任务、学习报告、积分体系等基础模块,同时围绕英语学科拆分出多个核心训练模块:同步单词、同步句子、同步课文、同步阅读、同步语法训练、口语听力、智练多多、词句精准练、作文精准练、趣味学音标、自然拼读、词汇量评测、自由组卷、错题本和学习统计等。用户可以根据当前教材和学习进度进入对应单元,完成听、说、读、写、译、默写、听写、组句、阅读理解、语法训练等多种题型。系统还支持生词本、错题解析、知识点错题统计、学后测试、智能复习和学习记录沉淀,帮助学生从学习、练习、测评到复盘形成连续路径。
整体业务流程以“登录认证 - 补全资料 - 选择/绑定教材 - 进入英语学习中心 - 选择学习模块 - 完成学习或测验 - 提交结果 - 查看报告与复习”为主线。用户登录后,路由守卫会校验 token、账号状态、资料完整度、学习时长余额以及是否存在强制词汇量评测或强制任务;不满足条件时会引导到登录页、资料编辑页或英语首页。正常进入后,用户可从 /english 进入英语学习中心,再按业务路径进入不同模块。例如同步单词路径包含 /english/words/sync-word、智能记忆、智能翻译、智能默写、智能听写、生词本、学后测试和强化训练;同步句子路径包含句子听说、听力学习、组句、翻译、默写、听写等;口语听力路径包含题目列表、听力训练、口语训练、句子复述、文章复述和听力测试;趣味学音标路径包含字母学写、音标总览、音标闯关、自然拼读学习和综合测验。学习完成后,系统通过统一提交接口记录结果,并在学习报告、任务记录、错题本、统计图表中展示后续复习入口。
项目采用 Vue 3 + Vite 的前端架构,使用 Vue Router 管理页面路由,Pinia 管理用户状态、教材学习状态和强制任务状态,Element Plus 作为基础 UI 组件库,Axios 封装统一请求层,Sass 管理全局样式和混入。项目按业务域进行目录拆分:views 承载页面级业务模块,components 封装通用学习组件、题型组件、弹窗组件、布局组件和状态组件,api 负责后端接口聚合,utils 放置音频播放、录音、缓存、URL 参数加密、防调试、设备判断、答题工具函数等公共能力。设计思路上,项目将学习链路抽象为“题目获取 - 页面交互 - 答案处理 - 学习/测验提交 - 结果展示”的统一模式,不同模块通过 helper 文件拆分题型逻辑、流程分发、完成状态、自动跳转、强化训练等细节,降低页面复杂度。构建层面使用 Vite 插件自动导入 Element Plus 组件,配置 Sentry 做线上错误追踪,并针对 Safari 13、平板横屏、音频播放限制等终端兼容场景做了专项处理。