本文基于考试系统21张表的最终结构，聚焦考试模块设计前端交互，覆盖"考试创建-发布-学生参与-过程监控-结果统计"全流程，兼顾教师端管控效率与学生端操作便捷性，交互逻辑严格对齐表字段关联（如mock_exam的状态/时间字段、mock_exam_record的排名/得分字段等）。
一、核心设计原则
-
字段联动一致：前端交互需与表关键字段强绑定（如考试状态联动
mock_exam.status，批改进度关联marking_task.marked_questions），避免数据脱节。 -
角色权限隔离：区分教师端（创建/管控/统计）、学生端（参与/查分/错题）、管理员端（权限配置），对应表中
user.role字段逻辑。 -
流程闭环精简：贴合第一版本精简设计，避免复杂交互，用筛选替代分组，减少操作层级（呼应
marking_task_group表移除后的设计逻辑）。 -
状态可视化：核心状态（考试状态、答题进度、评分状态）用直观图标/颜色标注，降低认知成本。
二、教师端交互设计（核心流程）
对应表：mock_exam（考试配置）、paper（试卷关联）、mock_exam_record（结果统计）、exam_screen_record（监控）、marking_task（阅卷关联）。
2.1 考试创建与配置页
核心交互
- 基础信息配置：
-
表单字段严格对应
mock_exam表关键字段：考试标题（title）、关联试卷（paper_id，弹窗选择已发布试卷，联动paper表publish_status=1的数据，展示试卷总分total_score、时长duration供校验）、考试时长（total_time，默认继承试卷时长，支持修改）。 -
时间配置：开始/结束时间（
start_time/end_time），选择后自动校验"结束时间>开始时间""时长与试卷时长匹配"，避免无效配置。 -
规则配置：是否允许暂停（
allow_pause）、是否实时判分（real_time_judge）、是否展示解析（show_analysis），对应mock_exam表字段，默认勾选常用选项。
- 考生范围选择：
- 支持按年级（
grade表）、班级（classroom表）批量选择，或手动输入学生账号（关联user表role=STUDENT数据），选择后展示考生总数，同步mock_exam.student_ids字段（JSON格式存储）。
- 保存与预览：
- 点击"保存"后，
mock_exam.publish_status设为0（未发布），跳转至考试列表页；点击"预览"，以学生视角展示考试页面，校验配置合理性。
优化建议
-
试卷选择弹窗增加"科目筛选"（关联
subject表），支持按科目快速定位试卷，适配多科目教学场景。 -
增加"模板保存"功能，将常用考试规则（如允许暂停、展示解析）保存为模板，后续创建可直接复用，提升效率。
2.2 考试列表与发布页
核心交互
- 列表展示：
-
列字段对应：考试标题、关联试卷、科目（联动
paper.subject）、考生数、考试时间、状态（mock_exam.status：未开始/进行中/已结束，用不同颜色标签标注）、发布状态（publish_status：未发布/已发布/已结束）、操作按钮。 -
筛选功能：支持按状态、科目、创建时间筛选，替代分组逻辑（呼应
marking_task_group表移除设计），快速定位目标考试。
- 发布与编辑：
-
未发布考试支持"编辑"（修改配置）、"发布"（点击后
publish_status设为1，系统自动向选中考生推送考试通知）、"删除"。 -
已发布/进行中考试禁止删除，仅支持"查看详情""终止考试"（终止后
status设为3，学生无法继续答题）。
优化建议
-
列表增加"快速统计"悬浮窗：鼠标 hover 至考试条目，展示已参与/未参与考生数（联动
mock_exam_record表），无需进入详情页即可掌握核心数据。 -
发布后增加"撤销发布"按钮（仅限发布后30分钟内，且无学生参与时），避免误操作导致的流程阻断。
2.3 考试过程监控页
核心交互
- 实时监控面板：
-
核心数据：总考生数、已进入考试数、已提交数、剩余时间（联动
mock_exam时间字段），数据实时同步mock_exam_record表。 -
考生状态列表：展示考生姓名、班级（关联
classroom表）、进入时间、答题时长、当前状态（答题中/已提交/异常退出），支持按状态筛选。
- 异常行为预警：
-
联动
exam_screen_record表，当学生页面切换频率过高（如1分钟内切换>5次），列表中该考生条目标红，展示"页面切换频繁"预警，点击可查看切换详情（时间、前后位置）。 -
支持"一键提醒"功能，向异常考生发送弹窗通知（如"请专注考试，避免频繁切换页面"）。
优化建议
-
增加"批量提醒"功能：勾选多个异常考生，统一发送提醒，提升管控效率（适配大班额场景）。
-
页面切换详情增加"时间轴"展示，直观呈现学生切换行为轨迹，便于判断是否存在作弊嫌疑。
2.4 考试结果统计页
核心交互
- 整体统计：
-
联动
mock_exam_record表，展示平均分、最高分、最低分、及格率（60分及以上）、优秀率（85分及以上），用图表（柱状图/折线图）展示分数分布，直观呈现整体成绩。 -
支持按班级/年级筛选统计（关联
classroom/grade表），对比不同班级成绩差异。
- 考生详情：
-
列表展示考生姓名、班级、总分（
actual_score）、班级排名（class_rank）、年级排名（grade_rank）、用时（spent_time），支持按总分/排名排序。 -
点击考生姓名，跳转至个人答题详情页，联动
mock_exam_answer表，展示单题答案、得分、是否正确，以及对应知识点（关联knowledge表），便于针对性讲评。
- 阅卷关联：
- 若存在主观题，页面增加"创建阅卷任务"按钮，跳转至阅卷模块（联动
marking_task表），自动关联当前考试ID、考生及主观题数据，无需重复配置。
优化建议
-
增加"成绩导出"功能，支持导出Excel（含考生信息、总分、排名、单题得分），导出字段可自定义选择，适配不同讲评需求。
-
分数分布图表增加"知识点维度"切换，展示各知识点错题率（联动
wrong_question_item、knowledge表），辅助定位教学薄弱点。
三、学生端交互设计（核心流程）
对应表：mock_exam（考试信息）、mock_exam_record（考试记录）、mock_exam_answer（答题记录）、wrong_question_item（错题收集）。
3.1 考试通知与进入页
核心交互
- 通知展示：
-
首页展示待参与考试列表，字段包含：考试标题、科目、开始/结束时间、剩余时间，支持按时间排序（即将开始在前）。
-
考试开始前15分钟，推送弹窗提醒（含考试名称、时长、进入入口），避免错过考试。
- 进入考试校验：
-
点击"进入考试"，校验当前时间（未到开始时间/已结束则禁止进入）、考试尝试次数（联动
mock_exam.max_attempts，默认1次，禁止重复进入）。 -
校验通过后，展示考试须知（时长、规则），点击"开始答题"生成
mock_exam_record记录（status=1，开始时间为当前时间），进入答题页。
优化建议
-
增加"考试倒计时"组件，待开始考试条目展示倒计时（精确到分钟），直观提示考试启动时间。
-
考试须知页面增加"确认勾选"按钮，勾选后才可进入答题页，避免学生忽略考试规则导致违规。
3.2 答题页面
核心交互
- 页面布局：
-
左侧：试题导航栏，展示题号、题型（关联
question.type）、答题状态（未答/已答/标记），点击题号快速跳转至对应试题。 -
中间：试题内容区，展示题干（
question.content）、选项（options，客观题）、答题区域（主观题支持多行输入），客观题选中后实时保存选项（selected_option）。 -
右侧：考试信息栏，展示剩余时间、已答/总题数、当前科目，剩余10分钟时变红提醒。
- 答题操作：
-
自动保存：每30秒自动保存答题内容（联动
mock_exam.auto_save_interval），避免意外退出（如浏览器崩溃）导致答案丢失，保存状态在页面角落提示。 -
标记功能：支持"标记疑问"，标记后导航栏题号标黄，便于后续回头检查。
-
提交答题：点击"提交"后，弹出确认弹窗（提示"提交后不可修改"），确认后生成
mock_exam_answer记录（同步各题答案、得分），更新mock_exam_record状态（status=2，结束时间、用时、实际得分）。
优化建议
-
增加"草稿纸"功能：主观题下方提供草稿区域（支持文字输入、简单绘图），草稿内容随答题内容同步保存，辅助学生梳理思路。
-
剩余时间提醒分级：10分钟、5分钟、1分钟分别触发弹窗提醒，同时导航栏未答题号标红，引导学生优先完成未答题。
3.3 考试结果与错题页
核心交互
- 结果展示：
-
答题结束后，跳转至结果页，展示总分、用时、班级/年级排名（联动
mock_exam_record表），以及各题型得分情况（客观题/主观题）。 -
支持"查看答题详情"，展示每道题的答案、标准答案（
correct_answer）、解析（question.analysis）、得分，错题标红标注，明确错误原因（error_reason）。
- 错题收集：
-
错题自动同步至默认错题集（联动
wrong_question_collection、wrong_question_item表），支持"手动添加/移除"错题，自定义错题集分类。 -
点击错题对应的知识点（
knowledge.name），可跳转至知识点详情页，查看知识点内容（knowledge.content），辅助查漏补缺。
优化建议
-
增加"错题复盘"功能：错题页提供"相似题推荐"（联动
knowledge表，推荐同知识点试题），帮助学生强化薄弱点。 -
结果页增加"分享"按钮（需教师允许），支持分享成绩至班级群，同时隐藏排名信息，保护学生隐私。
四、通用交互优化建议
-
加载状态优化：涉及表数据联动查询（如考试结果统计、错题加载）时，展示骨架屏而非单纯loading，标注"加载中（共X条数据）"，提升等待体验。
-
异常处理机制：网络中断时，本地缓存答题内容/配置信息，网络恢复后自动同步；数据加载失败时，提供"重试"按钮，同时展示简易错误提示（如"网络不稳定，请稍后重试"）。
-
响应式适配：支持PC端、平板端适配，答题页在平板端优化布局（导航栏可折叠），确保不同设备下操作流畅。
-
操作追溯：关键操作（如发布考试、提交答题、终止考试）记录操作日志（联动
operation_log表），前端支持管理员查看操作轨迹，便于问题排查。
五、交互与表结构联动说明
所有前端交互严格遵循表结构关联逻辑，核心联动点如下，确保数据一致性：
-
考试状态流转：前端操作（发布/终止/提交）同步更新
mock_exam.status、mock_exam.publish_status、mock_exam_record.status字段，形成状态闭环。 -
数据同步规则：答题内容、得分、排名等核心数据，前端仅做展示与提交，最终存储与校验依赖后端表结构（如
mock_exam_answer的is_correct字段由后端判分生成）。 -
筛选与统计：前端筛选、统计功能均基于表字段设计（如按班级筛选关联
classroom.id，按知识点筛选关联knowledge.id），避免冗余数据处理。