# `src/app/(dashboard)/teacher` 产品体验与功能审查报告 v4 > 核查日期:2026-06-20(第四轮·产品/UX 视角) > 核查范围:`src/app/(dashboard)/teacher/` 全部功能模块的页面布局、交互流程、信息架构、用户习惯契合度 > 对标产品:Canvas LMS、PowerSchool、钉钉教育版、企业微信教育版、ClassIn、晓黑板、希沃白板 > 对比基准:[v1](./teacher_bug.md)、[v2](./teacher_bug_v2.md)、[v3](./teacher_bug_v3.md)(前三轮聚焦代码规范,本轮聚焦产品体验) > 应用技能:`web-design-guidelines`(Web 界面规范)、`web-artifacts-builder`(界面优化) --- ## 一、审查维度与方法 本轮审查跳出代码规范层面,从**教师用户真实使用场景**出发,按以下维度评估: | 维度 | 评估要点 | |------|----------| | 信息架构 | 导航结构、功能分组、入口路径是否合理 | | 核心流程 | 高频任务(布置作业/批改/录分/考勤)的操作步数与心智负担 | | 数据呈现 | 列表/详情/统计的信息密度、可读性、可操作性 | | 反馈机制 | 操作后反馈、状态变化、错误恢复 | | 移动适配 | 教师移动端使用场景支持 | | 对标差距 | 与主流 LMS 产品的功能缺失与体验差距 | --- ## 二、信息架构问题 ### 2.1 【P0·严重】导航项过多且分组混乱,违背教师工作流 **位置**:[navigation.ts](../src/modules/layout/config/navigation.ts#L108-L232) 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) **具体缺陷**: 1. `Textbooks` 与 `Lesson Plans` 与 `Course Plans` 三个备课相关功能分散在不同位置,教师备课需要在三个入口间切换 2. `Schedule Changes`(调课申请)与 `Class Management > Schedule`(课表查看)功能相关却分属不同一级入口 3. `Management`(年级管理)入口对普通教师而言语义模糊,且其子项 `Grade Classes` / `Grade Insights` 实际是年级主任功能 4. `Electives`(选修课)对非选修课教师是噪音,应按需显示 **建议**: - 将导航项收敛到 8 个以内:Dashboard / 教学(含备课+教材+课程计划)/ 作业考试 / 成绩 / 考勤 / 班级 / 诊断 / 消息 - `Schedule Changes` 合并到 `Class Management` 子菜单 - `Electives` / `Management` 按角色权限动态显示,非默认可见 - `Textbooks` / `Lesson Plans` / `Course Plans` 合并为「教学资源」折叠组 ### 2.2 【P1·重要】Exams 与 Homework 模块割裂,违背「出题-下发-批改」一体化心智 **位置**:[exams/page.tsx](../src/app/(dashboard)/teacher/exams/page.tsx) redirect 到 `exams/all`;[homework/page.tsx](../src/app/(dashboard)/teacher/homework/page.tsx) redirect 到 `homework/assignments` **问题**: - 教师创建 Exam 后,需要手动跳到 Homework 模块才能下发为作业 - `exams/grading` redirect 到 `homework/submissions`,说明系统已意识到两者关联,但仍保留两个独立入口 - 作业详情页 [homework/assignments/[id]/page.tsx](../src/app/(dashboard)/teacher/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 缺少「待办聚合」,教师需多入口查找待处理事项 **位置**:[teacher-dashboard-view.tsx](../src/modules/dashboard/components/teacher-dashboard/teacher-dashboard-view.tsx) **问题**: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](../src/app/(dashboard)/teacher/homework/assignments/create/page.tsx) + [homework-assignment-form.tsx](../src/modules/homework/components/homework-assignment-form.tsx) **问题**:创建作业的表单**必须选择一个已存在的 Exam** 作为来源(`sourceExamId` 必填),如果没有 Exam 则直接显示空状态「No exams available - Create an exam first」。这意味着教师布置一次日常作业的流程是: 1. 去 Question Bank 建题 2. 去 Exams 创建考试 3. 去 Homework 创建作业(关联 Exam) 4. 等待学生提交 5. 去 Homework Submissions 批改 **5 步才能布置一次作业,严重违背教师工作习惯**。日常作业(如抄写、阅读、小测验)根本不需要走「考试」流程。 **对标分析**: - 钉钉教育:教师直接在「作业」里发文本/图片/文件即可,1 步完成 - Canvas:Assignment 可独立创建,关联 Quiz 是可选的 - 晓黑板:支持快速发布口头作业/书面作业/打卡作业 **建议**: - 支持两种作业创建模式:「快速作业」(直接输入标题+描述+附件,不走 Exam)和「考试派生作业」(现有流程) - 快速作业模式允许教师直接粘贴题目文本或上传图片 ### 3.2 【P0·严重】考勤批量录入缺少快捷操作,逐人下拉选择效率极低 **位置**:[attendance-sheet.tsx](../src/modules/attendance/components/attendance-sheet.tsx#L178-L208) **问题**:考勤表每个学生一行,每行一个 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·严重】成绩批量录入无校验、无快捷键、无保存草稿 **位置**:[batch-grade-entry.tsx](../src/modules/grades/components/batch-grade-entry.tsx) **问题**: 1. **无分数范围校验**:Input 接受任意数字,教师可能输入 150 分(满分 100)或负数,只在提交后才报错 2. **无 Tab 键跳转**:输入完一个学生分数后,Tab 键应自动跳到下一个输入框,现状未验证是否支持 3. **无草稿保存**:40 个学生分数输入到一半,刷新页面全部丢失 4. **无 Excel 粘贴**:教师常在 Excel 里整理好分数,希望直接粘贴整列 5. **无平均分/最高分实时统计**:输入过程中看不到班级整体情况 **对标分析**: - 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](../src/app/(dashboard)/teacher/homework/submissions/[submissionId]/page.tsx) **问题**:批改页面虽然传入了 `prevSubmissionId` / `nextSubmissionId`,但需确认 `HomeworkGradingView` 组件是否渲染了「下一位」按钮。即使有,批改完一个学生后需要:保存 → 点击「下一位」→ 等待加载。40 个学生要重复 40 次。 **对标分析**:Canvas SpeedGrader 批改时,右侧栏可快速切换学生,分数自动保存,支持键盘 `[` / `]` 切换。 **建议**: - 批改界面右侧增加学生列表抽屉,可快速跳转 - 保存分数后自动跳到下一位未批改的学生 - 支持键盘快捷键切换学生 --- ## 四、数据呈现问题 ### 4.1 【P1·重要】列表页普遍缺少分页,数据量大时性能与体验双降 **位置**: - [questions/page.tsx#L44](../src/app/(dashboard)/teacher/questions/page.tsx) `pageSize: 200` 硬编码 200 条 - [homework/assignments/page.tsx](../src/app/(dashboard)/teacher/homework/assignments/page.tsx) 无分页 - [homework/submissions/page.tsx](../src/app/(dashboard)/teacher/homework/submissions/page.tsx) 无分页 - [attendance/page.tsx](../src/app/(dashboard)/teacher/attendance/page.tsx) 无分页 - [grades/page.tsx](../src/app/(dashboard)/teacher/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](../src/app/(dashboard)/teacher/homework/assignments/page.tsx) **问题**:当前列表只有 5 列:Title / Status / Due / Source Exam / Created。教师最关心的「提交率(已交/应交)」「平均分」「是否有学生逾期未交」都没有展示。 **对比**:`homework/submissions/page.tsx` 的列表反而有 Targets / Submitted / Graded 三列,两个列表信息维度不一致。 **建议**:作业列表增加列: - 提交率(Submitted/Targets,带进度条) - 平均分(已批改的均分) - 逾期人数(红色徽标) - 操作列(查看详情 / 提醒未交学生) ### 4.4 【P1·重要】成绩统计页默认无数据引导,教师不知如何开始 **位置**:[grades/stats/page.tsx](../src/app/(dashboard)/teacher/grades/stats/page.tsx) **问题**:页面默认选择第一个班级,但如果该班级没有成绩记录,`ClassGradeReport` 组件显示什么?没有空状态引导。教师看到空白图表会困惑。 **建议**:无数据时显示「该班级暂无成绩记录,去录入成绩」的引导卡片。 ### 4.5 【P2·次要】日期格式不统一,部分页面用英文全称 **位置**: - [teacher-dashboard-header.tsx#L8-L13](../src/modules/dashboard/components/teacher-dashboard/teacher-dashboard-header.tsx) `toLocaleDateString("en-US", { weekday: "long", ... })` 显示「Monday, June 20, 2026」 - 其他页面用 `formatDate()` 工具函数 **问题**:Dashboard 顶部显示长英文日期,但项目面向中文用户(从 lesson-plans 页面用中文「我的备课」可见)。日期格式应本地化为「2026年6月20日 周一」。 **建议**:统一使用 `toLocaleDateString("zh-CN", ...)` 或自定义中文格式。 --- ## 五、交互细节问题 ### 5.1 【P1·重要】空状态 CTA 按钮全部是「主按钮」,视觉噪音过大 **位置**:[empty-state.tsx#L46-L54](../src/shared/components/ui/empty-state.tsx) **问题**:所有空状态都渲染一个 `variant="default"` 的主按钮(实心蓝色)。当列表上方已有多个主按钮时,空状态再放一个主按钮,视觉焦点混乱。 **建议**: - 空状态 CTA 默认用 `variant="outline"` - 仅在「无任何数据」的首次引导场景用主按钮 - 「筛选无结果」场景不显示 CTA,只显示「清除筛选」次级链接 ### 5.2 【P1·重要】表单提交后无 loading 遮罩,可能重复提交 **位置**:[attendance-sheet.tsx](../src/modules/attendance/components/attendance-sheet.tsx)、[batch-grade-entry.tsx](../src/modules/grades/components/batch-grade-entry.tsx)、[homework-assignment-form.tsx](../src/modules/homework/components/homework-assignment-form.tsx) **问题**:虽然 `SubmitButton` 有 `disabled={pending}`,但整个表单没有遮罩,教师仍可修改输入框内容。批量录入 40 人考勤时,提交过程中误触输入框可能导致数据不一致。 **建议**:提交期间在表单区域覆盖半透明 loading 遮罩。 ### 5.3 【P1·重要】考勤/成绩录入切换班级后输入的数据丢失 **位置**:[attendance-sheet.tsx#L71](../src/modules/attendance/components/attendance-sheet.tsx) `const [classId, setClassId] = useState(...)` **问题**:教师在 A 班录了一半考勤,切换到 B 班查看,`statuses` state 保留但学生列表变了,A 班的数据可能被 B 班学生覆盖。成绩录入同理。 **建议**: - 切换班级前弹确认框「当前班级有未保存的考勤记录,确认切换?」 - 或为每个班级缓存独立的 statuses/scores ### 5.4 【P2·次要】详情页返回路径不一致 **位置**: - [textbooks/[id]/page.tsx](../src/app/(dashboard)/teacher/textbooks/[id]/page.tsx) 用 `ArrowLeft` 图标按钮 - [grades/analytics/page.tsx](../src/app/(dashboard)/teacher/grades/analytics/page.tsx) 用「Back to Grades」文字按钮 - [homework/assignments/[id]/page.tsx](../src/app/(dashboard)/teacher/homework/assignments/[id]/page.tsx) 用面包屑「< Assignments / Details」 - [course-plans/[id]/page.tsx](../src/app/(dashboard)/teacher/course-plans/[id]/page.tsx) 无返回按钮(依赖浏览器 back) **问题**:4 种不同的返回交互模式,教师无法形成肌肉记忆。 **建议**:统一为面包屑 + 浏览器 back 支持,或统一为左上角 ArrowLeft 按钮。 ### 5.5 【P2·次要】Dashboard 问候语固定为「Good morning」 **位置**:[teacher-dashboard-header.tsx#L18](../src/modules/dashboard/components/teacher-dashboard/teacher-dashboard-header.tsx) **问题**:`Good morning, {teacherName}` 硬编码 morning,不根据当前时间切换。下午访问显示「Good morning」很突兀。 **建议**:根据 `new Date().getHours()` 动态切换:上午 Good morning / 下午 Good afternoon / 晚上 Good evening。中文版可用「早上好/下午好/晚上好」。 --- ## 六、移动端适配问题 ### 6.1 【P1·重要】表格在移动端横向溢出,无优化方案 **位置**:所有使用 `