平台页面统计
7
学生端页面
13
教师端页面
2
管理端页面
22
总页面数
45+
API接口
学生端页面流程
1. 首页
2. 搜索图书
3. 选择方式
4. 测验答题
5. 书籍评分
6. 测验结果
7. 进度查看
👨‍🎓
学生端页面(7个)
极简设计,无分数显示,专注阅读
查看学生端API →
序号 页面名称 文件名 功能说明 主要交互/API 跳转目标
1 学生首页 student-home.html 学生端入口页面,显示练习入口、等级测验入口、快捷功能卡片
  • GET /api/student/profile
  • GET /api/student/stats
  • student-search.html
    student-progress.html
    2 图书搜索 student-search.html 搜索图书/文章,显示搜索结果列表,支持等级筛选、类型筛选
  • GET /api/content/search
  • GET /api/content/list
  • GET /api/content/{id}
  • student-quiz-options.html
    3 选择练习方式 student-quiz-options.html 显示书籍详细信息,选择测验方式:听故事/阅读理解/词汇练习
  • GET /api/content/{id}
  • GET /api/audio/{contentId}
  • GET /api/quiz/types
  • student-quiz.html
    4 测验答题 student-quiz.html 播放音频(听故事模式),显示测验题目和选项,答题界面,计时功能
  • GET /api/quiz/{quizId}/questions
  • POST /api/quiz/session/start
  • POST /api/quiz/session/answer
  • POST /api/quiz/session/submit
  • student-rating.html
    5 书籍评分 student-rating.html 测验完成后,为书籍评分(1-5星)、写评论、推荐给同学
  • POST /api/rating/create
  • POST /api/comment/create
  • student-result.html
    6 测验结果 student-result.html 显示测验结果(不显示分数)、答对题数、获得积分、答题详情回顾
  • GET /api/quiz/session/{sessionId}/result
  • GET /api/quiz/session/{sessionId}/details
  • student-search.html
    student-progress.html
    7 我的进度 student-progress.html 显示当前等级、学习进度条(不显示百分比)、完成的书籍历史列表
  • GET /api/student/level
  • GET /api/student/progress
  • GET /api/student/history
  • student-search.html
    教师端页面流程
    记录书首页
    目标设定
    内容录入
    内容管理
    报表中心
    实时监控
    👨‍🏫
    教师端页面(13个)
    班级管理、内容录入、报表分析、实时监控
    查看教师端API →
    序号 页面名称 文件名 功能说明 主要交互/API 跳转目标
    1 记录书首页 teacher-home.html 教师端核心页面,包含4个标签页:阅读目标(班级级别)、最新测验、证书进度、双语报告
  • GET /api/teacher/classes
  • GET /api/class/{classId}/goals
  • GET /api/class/{classId}/students
  • GET /api/class/{classId}/quizzes
  • GET /api/class/{classId}/certifications
  • teacher-goals-setup.html
    teacher-certification-setup.html
    student-detail页
    2 阅读目标设定 teacher-goals-setup.html 设定班级级别的阅读目标,选择目标模型(K-2徽章制/3-5积分制/6+综合制),配置目标参数(正确率85%、积分、阅读范围)
  • GET /api/goals/models
  • GET /api/class/{classId}/goals/current
  • POST /api/class/{classId}/goals/create
  • PUT /api/class/{classId}/goals/update
  • teacher-home.html
    3 证书目标设定 teacher-certification-setup.html 为学生设定证书等级目标(Ready Reader到Honors Reader共8级),批量设置、查看当前证书进度
  • GET /api/certifications/list
  • GET /api/student/{studentId}/certification
  • POST /api/student/certification/set
  • PUT /api/student/certification/update
  • teacher-home.html
    4 录入新内容
    3步流程
    teacher-content-add.html 3步步进器录入流程:①定义测验详情(类型、标题、等级、分类)→②编写题目(添加题目、设置选项、标记正确答案)→③审核测验(预览全部内容、提交审核)
  • POST /api/content/create
  • POST /api/content/quiz/create
  • POST /api/content/question/create
  • POST /api/content/submit-review
  • POST /api/content/audio/upload
  • teacher-content-quiz.html
    teacher-content-success.html
    5 配置测验题目
    已整合
    teacher-content-quiz.html 已整合到teacher-content-add.html第二步,配置测验题目数量、难度、题型 - -
    6 设定目标群体
    已整合
    teacher-content-target.html 已整合到teacher-content-add.html,设定内容适用的年级、班级、学生群体 - -
    7 提交成功页 teacher-content-success.html 内容提交审核成功提示页,显示审核流程说明、预计审核时间 - teacher-content-manage.html
    8 管理内容列表 teacher-content-manage.html 查看已录入内容列表,筛选状态(已发布/待审核/草稿/已拒绝)、编辑、下架、查看审核状态
  • GET /api/teacher/content/list
  • GET /api/content/{id}/status
  • PUT /api/content/{id}/update
  • DELETE /api/content/{id}
  • PUT /api/content/{id}/withdraw
  • teacher-content-add.html
    9 报表中心 teacher-reports.html 报表中心入口页,包含4个标签:班级概况、学生报告(5个可点击报告)、内容统计、等级进度
  • GET /api/report/class/overview
  • GET /api/report/content/stats
  • GET /api/report/level/progress
  • 各报告详情页
    10 综合诊断报告
    新增
    teacher-report-diagnostic-summary.html 按年级分组展示阅读测验数据:学生人数、低于85%比例、平均正确率、平均难度等级、积分获得
  • POST /api/report/diagnostic/generate
  • GET /api/report/diagnostic/data
  • teacher-reports.html
    11 学生表现记录
    新增
    teacher-report-student-performance.html 每个学生的测验历史记录:日期、测验编号、语言、标题、虚构/非虚构、正确率、积分、难度等级
  • POST /api/report/student-performance/generate
  • GET /api/student/{studentId}/quiz-history
  • teacher-reports.html
    12 学校综合报告
    新增
    teacher-report-schoolwide-summary.html 班级/年级汇总数据:学生人数、低于85%比例、平均正确率、平均难度等级、积分总计/中位数、汇总统计
  • POST /api/report/schoolwide/generate
  • GET /api/report/schoolwide/data
  • teacher-reports.html
    13 TWI报告
    新增
    teacher-report-twi.html 三种阅读模式分析(Read To听故事、Read With陪伴、Read Independently独立),虚构/非虚构分类统计,全班汇总
  • POST /api/report/twi/generate
  • GET /api/report/twi/data
  • teacher-reports.html
    14 学期进度报告
    新增
    teacher-report-marking-period.html 按学期追踪班级进度:学期编号、平均正确率、参与积分总计/中位数、难度等级、风险学生比例
  • POST /api/report/marking-period/generate
  • GET /api/report/marking-period/data
  • teacher-reports.html
    15 实时监控 teacher-monitor.html 班级实时状态监控,显示预警学生列表、热力图监控、在线状态、测验进度
  • GET /api/monitor/class/{classId}/realtime
  • GET /api/monitor/class/{classId}/warnings
  • GET /api/monitor/class/{classId}/heatmap
  • POST /api/monitor/alert/create
  • student-detail页
    ⚙️
    管理端页面(2个)
    内容审核、教师管理
    查看管理端API →
    序号 页面名称 文件名 功能说明 主要交互/API 跳转目标
    1 管理首页 admin-home.html 管理员入口页面,显示待审核内容列表、教师列表、平台统计数据
  • GET /api/admin/stats
  • GET /api/admin/content/pending
  • GET /api/admin/teachers/list
  • admin-content-review.html
    2 内容审核 admin-content-review.html 审核教师提交的内容,查看内容详情、测验题目,批准或拒绝
  • GET /api/admin/content/{id}
  • GET /api/admin/content/{id}/quiz
  • POST /api/admin/content/{id}/approve
  • POST /api/admin/content/{id}/reject
  • admin-home.html
    📦
    已废弃/整合页面
    功能已整合或不再使用
    序号 页面名称 文件名 原功能说明 废弃原因
    1 内容浏览(旧版) student-content.html 学生浏览图书内容详情 功能整合到student-search.html
    2 创建测验(旧版) teacher-quiz-create.html 教师创建测验题目 功能整合到teacher-content-add.html第二步
    3 组件展示 components.html UI组件演示页面 开发参考用,非功能页面
    4 阅读快照 teacher-reading-snapshot.html 阅读数据快照 功能整合到teacher-home.html双语报告标签
    API接口文档
    完整的API接口清单已整理到独立文档,包含:
    查看完整API清单 → 学生端API(15个) 教师端API(25个) 管理端API(5个)
    API设计原则:
    • RESTful风格,统一使用JSON格式
    • 学生端API:极简设计,不返回分数数据,只返回等级和进度
    • 教师端API:完整的班级管理、内容管理、报表生成功能
    • 管理端API:内容审核、教师管理、系统配置
    • 认证:JWT Token,角色权限控制
    技术架构说明

    前端架构

    • Angular 17+ 统一组件结构
    • 响应式设计,支持移动端
    • 学生端:极简UI,无分数显示
    • 教师端:Material Design风格

    后端架构

    • Spring Boot 核心业务服务
    • Node.js 音频处理服务
    • PostgreSQL 单库(支持10万用户)
    • Redis 单节点(3000并发)
    • Elasticsearch + IK中文分词