- Update architecture impact map, data, feature checklist, gap audit - Add audit reports for dashboard, exam-homework, grades-diagnostic, settings-profile, textbooks - Update bug reports (admin, teacher, lesson-preparation, others, shared) - Update coding standards, DR plan, design docs, and README
26 KiB
src/app/(dashboard)/teacher 产品体验与功能审查报告 v4
核查日期:2026-06-20(第四轮·产品/UX 视角) 核查范围:
src/app/(dashboard)/teacher/全部功能模块的页面布局、交互流程、信息架构、用户习惯契合度 对标产品:Canvas LMS、PowerSchool、钉钉教育版、企业微信教育版、ClassIn、晓黑板、希沃白板 对比基准:v1、v2、v3(前三轮聚焦代码规范,本轮聚焦产品体验) 应用技能:web-design-guidelines(Web 界面规范)、web-artifacts-builder(界面优化)
一、审查维度与方法
本轮审查跳出代码规范层面,从教师用户真实使用场景出发,按以下维度评估:
| 维度 | 评估要点 |
|---|---|
| 信息架构 | 导航结构、功能分组、入口路径是否合理 |
| 核心流程 | 高频任务(布置作业/批改/录分/考勤)的操作步数与心智负担 |
| 数据呈现 | 列表/详情/统计的信息密度、可读性、可操作性 |
| 反馈机制 | 操作后反馈、状态变化、错误恢复 |
| 移动适配 | 教师移动端使用场景支持 |
| 对标差距 | 与主流 LMS 产品的功能缺失与体验差距 |
二、信息架构问题
2.1 【P0·严重】导航项过多且分组混乱,违背教师工作流
位置:navigation.ts teacher 导航配置
问题:teacher 侧边栏共有 17 个一级导航项(Dashboard / Textbooks / Exams / Homework / Grades / Question Bank / Class Management / Course Plans / Lesson Plans / Attendance / Schedule Changes / Diagnostic / Electives / Management / Announcements / Messages),远超人脑短时记忆容量(7±2)。
对标分析:
- Canvas:6 个主入口(Dashboard / Courses / Calendar / Inbox / History / Account)
- 钉钉教育:5 个主入口(消息 / 工作 / 通讯录 / 日程 / 我的)
- PowerSchool:7 个主入口(Start Page / Classes / Students / Reports / Setup / System / District)
具体缺陷:
Textbooks与Lesson Plans与Course Plans三个备课相关功能分散在不同位置,教师备课需要在三个入口间切换Schedule Changes(调课申请)与Class Management > Schedule(课表查看)功能相关却分属不同一级入口Management(年级管理)入口对普通教师而言语义模糊,且其子项Grade Classes/Grade Insights实际是年级主任功能Electives(选修课)对非选修课教师是噪音,应按需显示
建议:
- 将导航项收敛到 8 个以内:Dashboard / 教学(含备课+教材+课程计划)/ 作业考试 / 成绩 / 考勤 / 班级 / 诊断 / 消息
Schedule Changes合并到Class Management子菜单Electives/Management按角色权限动态显示,非默认可见Textbooks/Lesson Plans/Course Plans合并为「教学资源」折叠组
2.2 【P1·重要】Exams 与 Homework 模块割裂,违背「出题-下发-批改」一体化心智
位置:exams/page.tsx redirect 到 exams/all;homework/page.tsx redirect 到 homework/assignments
问题:
- 教师创建 Exam 后,需要手动跳到 Homework 模块才能下发为作业
exams/gradingredirect 到homework/submissions,说明系统已意识到两者关联,但仍保留两个独立入口- 作业详情页 homework/assignments/[id]/page.tsx 显示「Source Exam」字段,但无法反向跳转到原 Exam
对标分析:Canvas 的「Assignments」统一管理作业(可关联 Quiz),教师在一个列表里完成创建/下发/批改,无需在两个模块间跳转。
建议:
- 在 Exam 详情页增加「下发为作业」按钮,直接跳转到
homework/assignments/create?examId=xxx - 在 Homework 列表的「Source Exam」列增加链接,点击跳回 Exam 详情
- 长期考虑合并为「作业考试」一级入口,子菜单区分类型
2.3 【P1·重要】Dashboard 缺少「待办聚合」,教师需多入口查找待处理事项
问题:Dashboard 展示了 4 个统计卡片 + 成绩趋势 + 待批改 + 今日课表 + 作业 + 班级,但没有统一的「今日待办」列表。教师需要:
- 去
homework/submissions看待批改 - 去
attendance/sheet看今天是否要考勤 - 去
schedule-changes看调课申请是否被批准 - 去
grades/entry看是否要录成绩
对标分析:
- Canvas Dashboard 顶部有「To Do」侧栏,聚合所有待办(待批改/待提交/待评分)
- 钉钉教育首页有「待办」卡片,按紧急程度排序
建议:在 Dashboard 左栏顶部增加「今日待办」卡片,聚合:
- 待批改作业(N 份)→ 点击跳转
- 今日待考勤班级(N 个)→ 点击跳转
- 待处理调课申请(N 条)
- 近 3 天到期的作业未提交学生提醒
三、核心流程问题
3.1 【P0·严重】作业创建流程强制依赖 Exam,无法独立出题
位置:homework/assignments/create/page.tsx + homework-assignment-form.tsx
问题:创建作业的表单必须选择一个已存在的 Exam 作为来源(sourceExamId 必填),如果没有 Exam 则直接显示空状态「No exams available - Create an exam first」。这意味着教师布置一次日常作业的流程是:
- 去 Question Bank 建题
- 去 Exams 创建考试
- 去 Homework 创建作业(关联 Exam)
- 等待学生提交
- 去 Homework Submissions 批改
5 步才能布置一次作业,严重违背教师工作习惯。日常作业(如抄写、阅读、小测验)根本不需要走「考试」流程。
对标分析:
- 钉钉教育:教师直接在「作业」里发文本/图片/文件即可,1 步完成
- Canvas:Assignment 可独立创建,关联 Quiz 是可选的
- 晓黑板:支持快速发布口头作业/书面作业/打卡作业
建议:
- 支持两种作业创建模式:「快速作业」(直接输入标题+描述+附件,不走 Exam)和「考试派生作业」(现有流程)
- 快速作业模式允许教师直接粘贴题目文本或上传图片
3.2 【P0·严重】考勤批量录入缺少快捷操作,逐人下拉选择效率极低
问题:考勤表每个学生一行,每行一个 Select 下拉框选状态。一个 40 人的班级要点 40 次下拉框。虽然有「Mark All Present」按钮,但实际场景中教师通常需要标记 2-3 个缺席/迟到学生,现状是:
- 点「Mark All Present」→ 再逐个改 2-3 个异常学生
- 或者逐个选 40 次
对标分析:
- 钉钉教育:支持「一键全部到齐」+ 点击学生头像快速切换状态(弹出 5 个状态按钮)
- ClassIn:支持快捷键(P=Present, A=Absent, L=Late)+ 批量框选
建议:
- 每个学生行改为 5 个状态按钮组(单选),一键点击切换,无需下拉
- 支持键盘快捷键:P/A/L/E/X
- 默认全部 Present,教师只需点击异常学生
- 支持搜索学生姓名快速定位
3.3 【P0·严重】成绩批量录入无校验、无快捷键、无保存草稿
问题:
- 无分数范围校验:Input 接受任意数字,教师可能输入 150 分(满分 100)或负数,只在提交后才报错
- 无 Tab 键跳转:输入完一个学生分数后,Tab 键应自动跳到下一个输入框,现状未验证是否支持
- 无草稿保存:40 个学生分数输入到一半,刷新页面全部丢失
- 无 Excel 粘贴:教师常在 Excel 里整理好分数,希望直接粘贴整列
- 无平均分/最高分实时统计:输入过程中看不到班级整体情况
对标分析:
- PowerSchool Gradebook:支持 Tab 跳转、自动保存、分数范围校验、Excel 粘贴
- Canvas SpeedGrader:支持键盘快捷键批量评分
建议:
- 输入框
min={0} max={maxScore}+onBlur校验 - 支持 Tab 键自动跳转下一行
- 每 30 秒自动保存草稿到 localStorage
- 支持从 Excel 粘贴一列分数
- 顶部实时显示「已录入 N/M,平均 X 分,最高 Y 分」
3.4 【P1·重要】批改作业缺少「下一位」快捷跳转,需返回列表再进入
位置:homework/submissions/[submissionId]/page.tsx
问题:批改页面虽然传入了 prevSubmissionId / nextSubmissionId,但需确认 HomeworkGradingView 组件是否渲染了「下一位」按钮。即使有,批改完一个学生后需要:保存 → 点击「下一位」→ 等待加载。40 个学生要重复 40 次。
对标分析:Canvas SpeedGrader 批改时,右侧栏可快速切换学生,分数自动保存,支持键盘 [ / ] 切换。
建议:
- 批改界面右侧增加学生列表抽屉,可快速跳转
- 保存分数后自动跳到下一位未批改的学生
- 支持键盘快捷键切换学生
四、数据呈现问题
4.1 【P1·重要】列表页普遍缺少分页,数据量大时性能与体验双降
位置:
- questions/page.tsx#L44
pageSize: 200硬编码 200 条 - homework/assignments/page.tsx 无分页
- homework/submissions/page.tsx 无分页
- attendance/page.tsx 无分页
- grades/page.tsx 无分页
问题:题库硬编码 200 条,作业/提交/考勤/成绩列表均无分页。教师使用 1 年后,作业列表可能有几百条,成绩记录可能上千条,一次性渲染会导致:
- 首屏加载慢(>2s)
- DOM 节点过多导致滚动卡顿
- 无法快速定位历史数据
对标分析:Canvas 所有列表均分页(10/20/50 条/页),支持排序与搜索。
建议:
- 统一引入分页组件(10/20/50 条/页可选)
- 题库改为无限滚动或分页
- 列表默认按时间倒序,支持按状态/班级/日期范围筛选
4.2 【P1·重要】列表筛选条件不持久化,刷新即丢失
位置:所有使用 searchParams 的列表页
问题:筛选条件通过 URL searchParams 传递(这是正确做法),但:
- 教师点击列表中的「查看详情」再返回,浏览器 back 能保留筛选(✅)
- 但点击侧边栏导航再回来,筛选丢失(❌)
- 教师切换标签页再回来,无法恢复上次筛选
建议:
- 将筛选条件同步到 sessionStorage,2 小时内有效
- 或在列表页顶部增加「最近筛选」快捷标签
4.3 【P1·重要】作业列表缺少关键列:提交率、平均分、是否逾期
位置:homework/assignments/page.tsx#L85-L92
问题:当前列表只有 5 列:Title / Status / Due / Source Exam / Created。教师最关心的「提交率(已交/应交)」「平均分」「是否有学生逾期未交」都没有展示。
对比:homework/submissions/page.tsx 的列表反而有 Targets / Submitted / Graded 三列,两个列表信息维度不一致。
建议:作业列表增加列:
- 提交率(Submitted/Targets,带进度条)
- 平均分(已批改的均分)
- 逾期人数(红色徽标)
- 操作列(查看详情 / 提醒未交学生)
4.4 【P1·重要】成绩统计页默认无数据引导,教师不知如何开始
问题:页面默认选择第一个班级,但如果该班级没有成绩记录,ClassGradeReport 组件显示什么?没有空状态引导。教师看到空白图表会困惑。
建议:无数据时显示「该班级暂无成绩记录,去录入成绩」的引导卡片。
4.5 【P2·次要】日期格式不统一,部分页面用英文全称
位置:
- teacher-dashboard-header.tsx#L8-L13
toLocaleDateString("en-US", { weekday: "long", ... })显示「Monday, June 20, 2026」 - 其他页面用
formatDate()工具函数
问题:Dashboard 顶部显示长英文日期,但项目面向中文用户(从 lesson-plans 页面用中文「我的备课」可见)。日期格式应本地化为「2026年6月20日 周一」。
建议:统一使用 toLocaleDateString("zh-CN", ...) 或自定义中文格式。
五、交互细节问题
5.1 【P1·重要】空状态 CTA 按钮全部是「主按钮」,视觉噪音过大
问题:所有空状态都渲染一个 variant="default" 的主按钮(实心蓝色)。当列表上方已有多个主按钮时,空状态再放一个主按钮,视觉焦点混乱。
建议:
- 空状态 CTA 默认用
variant="outline" - 仅在「无任何数据」的首次引导场景用主按钮
- 「筛选无结果」场景不显示 CTA,只显示「清除筛选」次级链接
5.2 【P1·重要】表单提交后无 loading 遮罩,可能重复提交
位置:attendance-sheet.tsx、batch-grade-entry.tsx、homework-assignment-form.tsx
问题:虽然 SubmitButton 有 disabled={pending},但整个表单没有遮罩,教师仍可修改输入框内容。批量录入 40 人考勤时,提交过程中误触输入框可能导致数据不一致。
建议:提交期间在表单区域覆盖半透明 loading 遮罩。
5.3 【P1·重要】考勤/成绩录入切换班级后输入的数据丢失
位置:attendance-sheet.tsx#L71 const [classId, setClassId] = useState(...)
问题:教师在 A 班录了一半考勤,切换到 B 班查看,statuses state 保留但学生列表变了,A 班的数据可能被 B 班学生覆盖。成绩录入同理。
建议:
- 切换班级前弹确认框「当前班级有未保存的考勤记录,确认切换?」
- 或为每个班级缓存独立的 statuses/scores
5.4 【P2·次要】详情页返回路径不一致
位置:
- textbooks/[id]/page.tsx 用
ArrowLeft图标按钮 - grades/analytics/page.tsx 用「Back to Grades」文字按钮
- homework/assignments/[id]/page.tsx 用面包屑「< Assignments / Details」
- course-plans/[id]/page.tsx 无返回按钮(依赖浏览器 back)
问题:4 种不同的返回交互模式,教师无法形成肌肉记忆。
建议:统一为面包屑 + 浏览器 back 支持,或统一为左上角 ArrowLeft 按钮。
5.5 【P2·次要】Dashboard 问候语固定为「Good morning」
位置:teacher-dashboard-header.tsx#L18
问题:Good morning, {teacherName} 硬编码 morning,不根据当前时间切换。下午访问显示「Good morning」很突兀。
建议:根据 new Date().getHours() 动态切换:上午 Good morning / 下午 Good afternoon / 晚上 Good evening。中文版可用「早上好/下午好/晚上好」。
六、移动端适配问题
6.1 【P1·重要】表格在移动端横向溢出,无优化方案
位置:所有使用 <Table> 组件的页面(作业列表、提交列表、学生列表、成绩列表、考勤记录列表、题库列表)
问题:Table 组件在窄屏下会出现横向滚动条,但:
- 滚动条不明显,教师可能不知道可以横滑
- 关键操作列(如「Grade」按钮)可能被滚出视口
- 表头不固定,滚动后看不到列名
对标分析:Canvas 移动端将表格转为卡片列表,每条记录一张卡片。
建议:
- 窄屏(<768px)将表格转为卡片布局
- 或至少固定表头 + 首列
- 操作列固定在右侧
6.2 【P1·重要】考勤/成绩批量录入在移动端几乎不可用
位置:attendance-sheet.tsx、batch-grade-entry.tsx
问题:40 行表格 + 每行一个 Select/Input,在手机上需要大量滚动和点击。教师移动端巡课时无法快速考勤。
建议:
- 移动端考勤改为「学生头像网格」,点击头像切换状态
- 移动端成绩录入改为「逐个学生卡片」模式,滑动切换下一位
6.3 【P2·次要】Dashboard 双栏布局在移动端堆叠顺序不合理
位置:teacher-dashboard-view.tsx#L65-L81
问题:左栏(成绩趋势 + 待批改)在移动端会显示在右栏(今日课表 + 作业 + 班级)之前。但教师移动端最关心的是「下一节课是什么」和「待批改多少」,成绩趋势优先级应降低。
建议:移动端顺序调整为:今日课表 → 待批改 → 作业 → 班级 → 成绩趋势。
七、对标产品的功能缺失
7.1 【P0·严重】缺少「通知/提醒」机制
缺失场景:
- 学生提交作业后,教师无实时通知(需主动刷新 Dashboard)
- 作业即将到期,教师无法一键提醒未提交学生
- 调课申请被批准/拒绝,教师无通知
- 成绩录入后,无通知家长/学生的入口
对标分析:
- Canvas:站内消息 + 邮件通知 + 移动端推送
- 钉钉教育:Ding 一下强提醒学生
- 晓黑板:自动通知家长
建议:
- 站内消息中心已有
/messages入口,但未与业务事件联动 - 作业详情页增加「提醒未提交学生」按钮(发站内信)
- 关键状态变更(调课审批、作业提交)触发站内通知
7.2 【P0·严重】缺少「作业模板/复用」功能
缺失场景:教师每周布置类似作业(如「背诵第 N 课课文」),每次都要重新创建。
对标分析:Canvas 支持作业模板 + 一键复制历史作业。
建议:
- 作业列表增加「复制」操作
- 支持保存为模板,下次创建时可选「从模板创建」
7.3 【P1·重要】缺少「学生画像」聚合页
缺失场景:教师想了解某个学生的整体情况(成绩趋势 + 考勤率 + 作业提交率 + 知识点掌握),需要分别去 Grades / Attendance / Homework / Diagnostic 四个模块查询。
对标分析:Canvas 的 Student Context Card 在一处展示学生的所有信息。
建议:在 classes/students 列表点击学生姓名,打开学生画像页,聚合:
- 基本信息卡片
- 成绩趋势图
- 考勤统计
- 作业提交率
- 知识点掌握雷达图
- 历史评语
7.4 【P1·重要】缺少「班级对比」功能
缺失场景:教师同时教 4 个班,想对比哪个班掌握得差,需要逐个切换班级查看统计。
现状:grades/analytics 有 ClassComparisonChart,但需要选择年级(gradeId),而非教师自己的班级对比。
建议:在 grades/analytics 增加「我的班级对比」模式,默认对比教师所教的所有班级。
7.5 【P1·重要】缺少「导出报告」的完整体系
现状:
grades/page.tsx有ExportButton(导出成绩)grades/stats/page.tsx有ExportButton(导出统计)- 其他页面无导出功能
缺失:
- 考勤统计无法导出
- 作业提交情况无法导出
- 学生诊断报告无法导出
- 班级学情报告无法导出 PDF
建议:统一导出能力,支持 Excel + PDF 两种格式。
7.6 【P2·次要】缺少「评语库」功能
缺失场景:批改作业时写评语,教师常重复输入「做得好」「请认真订正」等。
对标分析:Canvas SpeedGrader 支持保存评语库,一键插入。
建议:批改界面的评语输入框增加「从评语库选择」按钮。
八、可访问性与国际化
8.1 【P1·重要】中英文混杂严重,违背用户预期
位置:全模块
问题:
- 导航项全英文(Dashboard / Textbooks / Exams...)
lesson-plans/page.tsx用中文(「我的备课」「新建课案」)proctoring/page.tsx权限提示用中文(「您没有监考权限」)grades/stats/page.tsx导出按钮用中文(「导出成绩」)- 空状态文案全英文(「No assignments」「You haven't created any assignments yet.」)
影响:中文教师用户看到混杂的中英文会感到不专业,且无法形成统一的语言心智。
建议:
- 确定产品语言策略:全中文 or 全英文 or 双语切换
- 若面向中国 K12 市场,建议全中文(含导航、按钮、空状态、日期格式)
- 引入 i18n 框架(如 next-intl)支持未来多语言
8.2 【P2·次要】Dashboard 问候语未本地化
见 5.5 节,Good morning 应改为「早上好」。
九、问题汇总与优先级
9.1 按严重程度分布
| 级别 | 数量 | 说明 |
|---|---|---|
| P0(严重,阻断核心流程) | 6 | 导航混乱、作业创建强制依赖Exam、考勤录入低效、成绩录入无校验、缺通知机制、缺作业模板 |
| P1(重要,影响体验与效率) | 14 | 模块割裂、Dashboard无待办、列表无分页、筛选不持久、移动端表格溢出、缺学生画像等 |
| P2(次要,优化项) | 6 | 日期格式、返回路径、问候语、移动端堆叠顺序、评语库等 |
| 合计 | 26 |
9.2 按模块分布
| 模块 | 问题数 | 主要问题 |
|---|---|---|
| 全局导航 | 3 | 导航项过多、分组混乱、Exams/Homework割裂 |
| Dashboard | 3 | 无待办聚合、问候语硬编码、移动端堆叠顺序 |
| 作业/考试 | 5 | 强制依赖Exam、无模板复用、列表缺关键列、无分页、无通知 |
| 成绩 | 4 | 录入无校验/草稿/粘贴、统计无空状态引导、导出不完整 |
| 考勤 | 3 | 录入低效、切换班级丢数据、移动端不可用 |
| 班级/学生 | 2 | 缺学生画像、缺班级对比 |
| 列表通用 | 3 | 无分页、筛选不持久、空状态CTA过重 |
| 移动端 | 3 | 表格溢出、批量录入不可用、堆叠顺序 |
| 国际化 | 2 | 中英文混杂、问候语未本地化 |
十、改进路线建议
10.1 第一阶段(P0 修复,1-2 周)
- 导航重构:收敛到 8 个一级入口,合并备课相关功能
- 作业创建解耦:支持「快速作业」模式,不强制依赖 Exam
- 考勤录入优化:改为状态按钮组 + 默认全到 + 快捷键
- 成绩录入加固:分数校验 + 草稿保存 + Tab 跳转
- 通知机制 MVP:作业提交触发站内通知
10.2 第二阶段(P1 修复,2-4 周)
- Dashboard 待办聚合:统一待办卡片
- 列表分页:统一分页组件
- 学生画像页:聚合成绩/考勤/作业/诊断
- 移动端表格优化:卡片布局
- 作业列表补列:提交率/平均分/逾期
- 语言统一:全中文或引入 i18n
10.3 第三阶段(P2 优化,4-6 周)
- 作业模板/复用
- 评语库
- 导出体系完善
- 班级对比模式
- 返回路径统一
- 日期格式本地化
十一、与 v1-v3 的关系
| 轮次 | 视角 | 问题数 | 修复率 |
|---|---|---|---|
| v1 | 代码规范 | 64 | 1.6% |
| v2 | 代码规范(复审) | 74 | 1.6% |
| v3 | 代码规范(终审) | 74 | 100% |
| v4 | 产品/UX | 26 | 0%(待规划) |
v1-v3 解决了「代码是否符合规范」的问题,v4 发现的是「产品是否符合用户习惯」的问题。两者互补:代码规范是底线,产品体验是上限。建议在 v3 代码规范已闭环的基础上,按 v4 路线图推进产品体验升级。
十二、核查结论
12.1 核心优势(保持)
- ✅ 架构合规:三层架构清晰,数据访问通过 data-access 层
- ✅ 权限完备:每个页面有权限校验,DataScope 数据范围控制
- ✅ 性能基础:Promise.all 并行查询,force-dynamic 声明
- ✅ 空状态覆盖:所有列表页有 EmptyState 引导
- ✅ Suspense 流式加载:exams/questions/textbooks 等页面有骨架屏
12.2 核心缺陷(待改进)
- ❌ 导航信息过载:17 个一级入口远超同类产品(Canvas 6 个)
- ❌ 作业流程断裂:强制依赖 Exam,5 步才能布置作业
- ❌ 批量录入低效:考勤逐人下拉、成绩无校验无草稿
- ❌ 列表无分页:数据量增长后性能与体验双降
- ❌ 缺通知机制:教师需主动刷新发现待办
- ❌ 中英文混杂:面向中文用户却用英文 UI
12.3 总体评价
当前 teacher 模块在代码工程质量上已达到企业级标准(v3 100% 通过),但在产品体验上与主流 LMS(Canvas/钉钉教育)仍有明显差距。核心差距不在技术实现,而在对教师真实工作流的理解:系统按「数据模型」组织功能(Exam/Homework/Grade 分表),而非按「教师任务」组织(布置作业/批改/反馈)。
建议产品团队优先解决 P0 的 6 个流程阻断问题,可显著提升教师日均使用效率。