From 5c1f1d2bf82be875013a5d0ed9e5599271aec0d9 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 10:02:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AF=BE=E5=A0=82=E7=9C=8B=E6=9D=BF):=20?=
 =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E9=87=8D=E5=81=9A=E2=80=94=E2=80=94=E9=A1=B6?=
 =?UTF-8?q?=E4=B8=8A=E5=BD=93=E5=9C=BA=E5=A1=AB=E9=A2=98=E5=8F=B7=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=80=E6=8E=92=E9=A2=98=E5=8D=A1=E7=89=87=E7=82=B9=E5=BC=80?=
 =?UTF-8?q?=E7=9C=8B=E8=BF=99=E9=81=93=E9=A2=98=E9=94=99=E5=9C=A8=E5=93=AA?=
 =?UTF-8?q?=EF=BC=8C=E5=85=A8=E7=8F=AD=E4=B8=80=E5=BC=A0=E8=A1=A8=E6=8C=89?=
 =?UTF-8?q?=E6=B2=A1=E4=BA=A4/=E5=8D=A1=E4=BD=8F/=E5=9C=A8=E5=81=9A?=
 =?UTF-8?q?=E6=8E=92=EF=BC=8C=E7=82=B9=E7=BA=A2=E6=A0=BC=E5=AD=90=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E4=BB=A3=E7=A0=81=E8=AE=B2=E9=94=99=E8=AF=AF=E3=80=81?=
 =?UTF-8?q?=E2=86=90=20=E2=86=92=20=E6=8D=A2=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/classroom/board.vue           | 1411 +++++++++++------
 .../oj/classroom/components/ExplainModal.vue  |  200 +++
 apps/web/src/oj/classroom/errorKind.ts        |  107 ++
 .../submission/components/SubmissionView.vue  |   48 +-
 apps/web/src/oj/submission/detail.vue         |   10 +
 5 files changed, 1283 insertions(+), 493 deletions(-)
 create mode 100644 apps/web/src/oj/classroom/components/ExplainModal.vue
 create mode 100644 apps/web/src/oj/classroom/errorKind.ts
 create mode 100644 apps/web/src/oj/submission/detail.vue

diff --git a/apps/web/src/oj/classroom/board.vue b/apps/web/src/oj/classroom/board.vue
index f63e93e..19c65c4 100644
--- a/apps/web/src/oj/classroom/board.vue
+++ b/apps/web/src/oj/classroom/board.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
 import { getClassBoard, setClassLesson } from "oj/api"
+import { useTone } from "oj/submission/composables/tone"
 import { groupClassOptions } from "oj/submission/utils"
 import UserName from "shared/components/UserName.vue"
 import { useLeaveStudents } from "shared/composables/leaveStudents"
@@ -10,17 +13,21 @@ import { errorMessage } from "utils/api"
 import { LANGUAGE_SHOW_VALUE } from "utils/constants"
 import { parseTime } from "utils/functions"
 import type { ClassBoard, ClassBoardCell, ClassBoardProblem, ClassBoardStudent } from "utils/types"
+import ExplainModal, { type ExplainPerson } from "./components/ExplainModal.vue"
+import { errorKind, type ErrorKind } from "./errorKind"
 
 /**
- * 课堂看板（老师）：这个班、今天、这节课的几道题 × 全班学生。
+ * 课堂看板（老师，设计稿「课堂看板重设计」A+B）：这个班、今天、这节课的几道题 × 全班学生。
  *
- * 重点是「今天还没交过」的那批人，不是「卡住的」：2025 秋平均每节课有 14 个平时在用的
- * 学生一道都没交（占三分之一），交了 3 次以上还没过的平均不到 1 个。所以排序是
- * 没交过 → 卡住 → 在做 → 做完，没交过的名单还单独摆在最上面，老师扫一眼就能走过去。
+ * 用法（用户说的）：开在教师电脑上，不投影；看完成情况、谁卡住了，讲没交对的代码错在哪；
+ * 题号是上课时当场填的。所以：
+ * - 顶上一行是班级和这节课的题，题号当场填，填完收成一排小块；
+ * - 一排题卡片（做对 / 错着 / 没做），点一道题，下面把错着的人按错法归堆 —— 同一种错讲一遍；
+ * - 全班一张表，按 举手 → 没交过 → 卡住 → 在做 → 做完 → 请假 排；
+ * - 点红格子或堆里的名字，弹层里讲这份代码（和提交详情同一块），← → 换人。
  *
  * 班级**不记本地**，默认由后端猜最近两小时在交题的班 —— 记本地的话，上一节课的班会
- * 悄悄留在框里，老师看的整个是别人的班。（原来的提交统计弹窗是记一小时的，
- * 那边是老师自己手选的查询；这里后端本来就猜得出，没必要冒这个险。）
+ * 悄悄留在框里，老师看的整个是别人的班。
  */
 
 /** 同一道题今天交了这么多次还没过，算卡住 */
@@ -30,14 +37,43 @@ const REFRESH_MS = 15_000
 const configStore = useConfigStore()
 const collabStore = useCollabStore()
 const message = useMessage()
+const theme = useThemeVars()
+const tone = useTone()
+const router = useRouter()
 
 const board = ref<ClassBoard | null>(null)
 const className = ref<string | null>(null)
-const loading = ref(false)
-const updatedAt = ref<Date | null>(null)
-const projector = ref(false)
 
-const lessonInput = ref("")
+const classOptions = computed(() => {
+  const list = configStore.config?.classList ?? []
+  return groupClassOptions(board.value?.className ? [board.value.className, ...list] : list)
+})
+
+async function load() {
+  if (document.hidden) return
+  try {
+    const data = await getClassBoard(className.value ?? undefined)
+    board.value = data
+    // 第一次由后端猜，之后就固定在这个班上，别每次刷新都换
+    className.value = data.className
+  } catch (error) {
+    message.error(errorMessage(error))
+  }
+}
+
+function changeClass(value: string) {
+  className.value = value
+  selectedId.value = null
+  editing.value = false
+  load()
+}
+
+onMounted(load)
+const { pause } = useIntervalFn(load, REFRESH_MS)
+onUnmounted(pause)
+
+// ---------- 这节课的题：上课时当场填 ----------
+
 /**
  * 这份作业用什么语言做，跟着这一次布置走（用户定的：不是给班级定死的设置）。默认是这个班
  * 上一次布置时选的；选了之后看板和学生那边的「做完」都只认这个语言交对的
@@ -48,44 +84,34 @@ const languageOptions = LESSON_LANGUAGES.map((value) => ({
   label: LANGUAGE_SHOW_VALUE[value],
   value,
 }))
+const lessonInput = ref("")
+const editing = ref(false)
 const saving = ref(false)
 
-const classOptions = computed(() => {
-  const list = configStore.config?.classList ?? []
-  return groupClassOptions(board.value?.className ? [board.value.className, ...list] : list)
-})
-
-async function load() {
-  if (document.hidden) return
-  loading.value = true
-  try {
-    const data = await getClassBoard(className.value ?? undefined)
-    board.value = data
-    // 第一次由后端猜，之后就固定在这个班上，别每次刷新都换
-    className.value = data.className
-    updatedAt.value = new Date()
-  } catch (error) {
-    message.error(errorMessage(error))
-  } finally {
-    loading.value = false
-  }
-}
+/** 还没有题（没布置、今天也推断不出来）：填题号的框就是这页最大的东西 */
+const needLesson = computed(() => !!board.value?.className && !board.value.problems.length)
 
 // 换了班要把输入框换成那个班今天布置的题、布置时选的语言（15 秒一次的刷新不动它们）
 watch(
   () => [board.value?.className, board.value?.source] as const,
-  () => {
-    lessonInput.value =
-      board.value?.source === "teacher"
-        ? board.value.problems.map((problem) => problem.problemDisplayId).join(" ")
-        : ""
-    lessonLanguage.value = board.value?.language ?? board.value?.lastLanguage ?? "Python"
-  },
+  () => resetLessonInput(),
 )
 
-function changeClass(value: string) {
-  className.value = value
-  load()
+function resetLessonInput() {
+  lessonInput.value =
+    board.value?.source === "teacher"
+      ? board.value.problems.map((problem) => problem.problemDisplayId).join(" ")
+      : ""
+  lessonLanguage.value = board.value?.language ?? board.value?.lastLanguage ?? "Python"
+}
+
+function startEdit() {
+  resetLessonInput()
+  // 推断出来的题也带进框里，老师多半只是确认一下
+  if (!lessonInput.value && board.value?.problems.length) {
+    lessonInput.value = board.value.problems.map((problem) => problem.problemDisplayId).join(" ")
+  }
+  editing.value = true
 }
 
 async function saveLesson() {
@@ -94,11 +120,9 @@ async function saveLesson() {
   saving.value = true
   try {
     await setClassLesson(className.value, ids, ids.length ? lessonLanguage.value : null)
-    message.success(
-      ids.length
-        ? `已布置（${LANGUAGE_SHOW_VALUE[lessonLanguage.value]}），学生首页会显示这几道题`
-        : "已清掉，学生那边改回自动推断",
-    )
+    message.success(ids.length ? "已布置，学生首页会显示这几道题" : "已清掉")
+    editing.value = false
+    selectedId.value = null
     await load()
   } catch (error) {
     message.error(errorMessage(error))
@@ -107,10 +131,6 @@ async function saveLesson() {
   }
 }
 
-onMounted(load)
-const { pause } = useIntervalFn(load, REFRESH_MS)
-onUnmounted(pause)
-
 // ---------- 分组与排序 ----------
 
 type Group = "help" | "idle" | "stuck" | "working" | "done" | "leave"
@@ -126,13 +146,17 @@ function helpOf(student: ClassBoardStudent) {
 
 /**
  * 经常不动手：最近几节课里最多只交过一节。至少有 3 节课可比才下结论，
- * 开学头两节谁都一样。只给老师看，投影模式里不出现。
+ * 开学头两节谁都一样。没交过的人里把他们排在前面，「最后交」那格写上来过几节
  */
 function oftenIdle(student: ClassBoardStudent) {
   const total = board.value?.recentLessons ?? 0
   return total >= 3 && student.recentAttended <= 1
 }
 
+function doneCount(student: ClassBoardStudent) {
+  return student.cells.filter((cell) => cell.status === "accepted").length
+}
+
 function groupOf(student: ClassBoardStudent): Group {
   if (absent(student)) return "leave"
   if (helpOf(student)) return "help"
@@ -153,13 +177,17 @@ const GROUP_ORDER: Record<Group, number> = {
   leave: 5,
 }
 
-/** 名字和别处一样用用户名（ks241XXX），不用真名 */
-function nameOf(student: ClassBoardStudent) {
-  return student.username
+const GROUP_LABEL: Record<Group, string> = {
+  help: "举手了",
+  idle: "还没交过",
+  stuck: "卡住了",
+  working: "在做",
+  done: "全做完了",
+  leave: "请假",
 }
 
 /**
- * 请假：老师在「请假」框里勾上今天不在的人，看板的人数、进度、「还没交过」都不算他们，
+ * 请假：老师在「请假」框里勾上今天不在的人，人数、进度、卡片都不算他们，
  * 表格里变灰排到最后（不藏掉 —— 标了谁、标错没有，一眼看得见）。
  * 今天有效，只记在这台电脑上（见 leaveStudents.ts）。
  *
@@ -175,7 +203,6 @@ function absent(student: ClassBoardStudent) {
 }
 const boardStudents = computed(() => board.value?.students ?? [])
 const leaveStudents = computed(() => boardStudents.value.filter(absent).sort(byName))
-const leaveNames = computed(() => leaveStudents.value.map(nameOf).join("、"))
 
 // 标过请假、后来交了题或举手的：来了，把标记清掉（不然名单里一直挂着一个其实在的人）
 watchEffect(() => {
@@ -202,7 +229,7 @@ function saveLeave() {
 }
 
 function byName(a: ClassBoardStudent, b: ClassBoardStudent) {
-  return nameOf(a).localeCompare(nameOf(b), "zh-CN")
+  return a.username.localeCompare(b.username, "zh-CN")
 }
 
 const students = computed(() =>
@@ -211,74 +238,174 @@ const students = computed(() =>
       GROUP_ORDER[groupOf(a)] - GROUP_ORDER[groupOf(b)] ||
       // 同样是没交过，经常不动手的排前面
       Number(oftenIdle(b)) - Number(oftenIdle(a)) ||
+      // 同样在做，做对得少的排前面（只做了一道的那几个）
+      (groupOf(a) === "working" ? doneCount(a) - doneCount(b) : 0) ||
       byName(a, b),
   ),
 )
-/** 到了的人：人数、进度都按这些算 */
+/** 到了的人：人数、卡片都按这些算 */
 const present = computed(() => students.value.filter((student) => groupOf(student) !== "leave"))
-/** 表格里第一个请假的人，在他上面插一行说明 */
-const firstLeaveId = computed(
-  () => students.value.find((student) => groupOf(student) === "leave")?.userId,
-)
-
-const idle = computed(() => students.value.filter((student) => groupOf(student) === "idle"))
-const idleOften = computed(() => idle.value.filter(oftenIdle))
-const idleOthers = computed(() => idle.value.filter((student) => !oftenIdle(student)))
-const helpNames = computed(() =>
-  students.value
-    .filter((student) => groupOf(student) === "help")
-    .map(nameOf)
-    .join("、"),
-)
-const helpCount = computed(
-  () => students.value.filter((student) => groupOf(student) === "help").length,
-)
-const stuckCount = computed(
-  () => students.value.filter((student) => groupOf(student) === "stuck").length,
-)
-
-const summary = computed(() => {
-  // 分母也减掉请假的，不然「做完 30/38」永远到不了头
-  const all = present.value
-  return (board.value?.problems ?? []).map((problem, i) => ({
-    ...problem,
-    done: all.filter((student) => student.cells[i]?.status === "accepted").length,
-    total: all.length,
-  }))
+const groupCount = computed(() => {
+  const count: Record<Group, number> = { help: 0, idle: 0, stuck: 0, working: 0, done: 0, leave: 0 }
+  for (const student of students.value) count[groupOf(student)]++
+  return count
+})
+/** 每组第一个人，在他上面插一行组名 */
+const groupStarts = computed(() => {
+  const starts = new Set<number>()
+  let last: Group | null = null
+  for (const student of students.value) {
+    const group = groupOf(student)
+    if (group !== last) starts.add(student.userId)
+    last = group
+  }
+  return starts
 })
 
-/** 今天之前就通过了的，显示「之前」而不是一个日期 */
-function cellText(cell: ClassBoardCell) {
-  if (cell.status === "accepted") {
-    const day = cell.acceptedAt ? parseTime(cell.acceptedAt, "YYYY-MM-DD") : ""
-    return day === board.value?.day ? `✓ ${parseTime(cell.acceptedAt!, "HH:mm")}` : "✓ 之前"
-  }
-  if (cell.status === "tried") return cell.attempts ? `✗ ${cell.attempts} 次` : "✗ 之前"
-  return "·"
-}
+// ---------- 题卡片和「错着的人按错法归堆」 ----------
 
-function cellClass(cell: ClassBoardCell) {
-  if (cell.status === "accepted") return "cell-done"
-  if (cell.status === "tried") return cell.attempts >= STUCK_ATTEMPTS ? "cell-stuck" : "cell-tried"
-  return "cell-none"
+interface WrongPerson {
+  student: ClassBoardStudent
+  cell: ClassBoardCell
+  kind: ErrorKind
 }
 
-const GROUP_LABEL: Record<
-  Group,
-  { text: string; type: "default" | "error" | "warning" | "info" | "success" }
-> = {
-  help: { text: "在求助", type: "warning" },
-  idle: { text: "没交过", type: "default" },
-  stuck: { text: "卡住了", type: "error" },
-  working: { text: "在做", type: "info" },
-  done: { text: "做完了", type: "success" },
-  leave: { text: "请假", type: "default" },
-}
-
-const router = useRouter()
-
 /**
- * 点格子 / 名字到提交列表看他今天交的。新标签打开：看板多半正投在屏幕上，别把它顶掉。
+ * 没做对的人：今天交过代码的按最后一次提交归错法。另外两种没有今天的代码可讲，单独成堆，
+ * 和卡片上「错着 N」的 N 对得上：今天只画了流程图的，以前交过没做对、今天还没动的
+ */
+function wrongOf(index: number): WrongPerson[] {
+  return present.value.flatMap((student) => {
+    const cell = student.cells[index]
+    if (!cell || cell.status !== "tried") return []
+    const kind: ErrorKind = cell.latest
+      ? errorKind(cell.latest)
+      : cell.attempts
+        ? { key: "flowchart", label: "今天只画了流程图", line: null }
+        : { key: "before", label: "以前交过，今天还没交", line: null }
+    return [{ student, cell, kind }]
+  })
+}
+
+const problemStats = computed(() =>
+  (board.value?.problems ?? []).map((problem, i) => {
+    const done = present.value.filter((student) => student.cells[i]?.status === "accepted").length
+    const wrong = present.value.filter((student) => student.cells[i]?.status === "tried").length
+    const total = present.value.length
+    return { problem, done, wrong, none: total - done - wrong, total }
+  }),
+)
+
+const selectedId = ref<number | null>(null)
+const selectedIndex = computed(() =>
+  (board.value?.problems ?? []).findIndex((problem) => problem.problemId === selectedId.value),
+)
+function toggleProblem(problemId: number) {
+  selectedId.value = selectedId.value === problemId ? null : problemId
+}
+
+/** 选中那道题错着的人，按错法归堆：人多的堆在前，堆里次数多的在前 */
+const wrongGroups = computed(() => {
+  if (selectedIndex.value < 0) return []
+  const groups = new Map<string, { kind: ErrorKind; people: WrongPerson[] }>()
+  for (const person of wrongOf(selectedIndex.value)) {
+    const group = groups.get(person.kind.key) ?? { kind: person.kind, people: [] }
+    group.people.push(person)
+    groups.set(person.kind.key, group)
+  }
+  return [...groups.values()]
+    .map((group) => ({
+      ...group,
+      people: group.people.sort((a, b) => b.cell.attempts - a.cell.attempts),
+      // 一堆人报错指到同一行才写「第 N 行」
+      line: group.people.every((p) => p.kind.line === group.people[0]!.kind.line)
+        ? group.kind.line
+        : null,
+    }))
+    .sort((a, b) => b.people.length - a.people.length)
+})
+
+// ---------- 讲错误的弹层 ----------
+
+const explainShow = ref(false)
+const explainIndex = ref(0)
+const explainProblemIndex = ref(-1)
+const explainProblem = computed(() => board.value?.problems[explainProblemIndex.value] ?? null)
+/** 弹层顶上那排人：这道题错着的人，顺序和错法堆一样 */
+const explainPeople = computed<ExplainPerson[]>(() => {
+  if (explainProblemIndex.value < 0) return []
+  const people = wrongOf(explainProblemIndex.value).filter((person) => person.cell.latest)
+  const order = new Map<string, number>()
+  for (const person of people) {
+    order.set(person.kind.key, (order.get(person.kind.key) ?? 0) + 1)
+  }
+  return people
+    .sort(
+      (a, b) =>
+        order.get(b.kind.key)! - order.get(a.kind.key)! ||
+        a.kind.key.localeCompare(b.kind.key) ||
+        b.cell.attempts - a.cell.attempts,
+    )
+    .map((person) => ({
+      userId: person.student.userId,
+      username: person.student.username,
+      submissionId: person.cell.latest!.submissionId,
+      label: person.kind.label,
+    }))
+})
+
+function openExplain(problemIndex: number, userId: number) {
+  explainProblemIndex.value = problemIndex
+  explainIndex.value = Math.max(
+    0,
+    explainPeople.value.findIndex((person) => person.userId === userId),
+  )
+  explainShow.value = true
+}
+
+// ---------- 格子 ----------
+
+/** 今天之前就通过了的，颜色淡一档 */
+function acceptedToday(cell: ClassBoardCell) {
+  return !!cell.acceptedAt && parseTime(cell.acceptedAt, "YYYY-MM-DD") === board.value?.day
+}
+
+function cellText(cell: ClassBoardCell) {
+  if (cell.status === "accepted") return "✓"
+  if (cell.status === "tried") return cell.attempts ? `✗ ${cell.attempts}` : "✗"
+  return ""
+}
+
+function cellStyle(cell: ClassBoardCell) {
+  if (cell.status === "accepted") {
+    const t = tone("success")
+    return acceptedToday(cell)
+      ? { background: t.background, color: t.color }
+      : { background: t.background, color: t.color, opacity: 0.5 }
+  }
+  if (cell.status === "tried") {
+    if (cell.attempts >= STUCK_ATTEMPTS) {
+      return { background: theme.value.errorColor, color: "#ffffff" }
+    }
+    const t = tone("warning")
+    return { background: t.background, color: t.color }
+  }
+  return { background: theme.value.actionColor }
+}
+
+function cellTitle(cell: ClassBoardCell, student: ClassBoardStudent) {
+  if (cell.status === "accepted") {
+    return acceptedToday(cell) ? `${parseTime(cell.acceptedAt!, "HH:mm")} 做对` : "以前就做对了"
+  }
+  if (cell.status === "tried") {
+    if (cell.latest) return `讲讲 ${student.username} 这道题的错`
+    return cell.attempts ? `今天画了 ${cell.flowchartAttempts} 张流程图` : "以前交过，没做对"
+  }
+  return ""
+}
+
+/**
+ * 点格子 / 名字到提交列表看他今天交的。新标签打开：看板一般开着不关，别把它顶掉。
  * 用户名按整名匹配（学号互相包含是常态，ks24a1 会混进 ks24a10）。
  *
  * 今天只画了流程图、没写代码的，跳到列表的「流程图」那边 —— 不然这节课整班在画流程图时，
@@ -288,6 +415,8 @@ function submissionsHref(
   student: ClassBoardStudent,
   problem: ClassBoardProblem | undefined,
   flowchart: boolean,
+  /** 「以前交过、今天还没交」的人要看以前的，不能只列今天 */
+  today = true,
 ) {
   // SQL 题不受布置的语言限制，格子数的是 SQL 交的
   const language = problem?.isSql ? "SQL" : board.value?.language
@@ -296,62 +425,86 @@ function submissionsHref(
     query: {
       username: student.username,
       exactUsername: "1",
-      today: "1",
+      ...(today ? { today: "1" } : {}),
       // 布置时选了语言的，代码那边只看这个语言交的（和格子里数的一致）
       ...(flowchart ? { language: "Flowchart" } : language ? { language } : {}),
       ...(problem ? { problem: problem.problemDisplayId } : {}),
     },
   }).href
 }
+
+function lastText(student: ClassBoardStudent) {
+  if (student.lastSubmitAt) return parseTime(student.lastSubmitAt, "HH:mm")
+  if (oftenIdle(student)) {
+    return `近 ${board.value?.recentLessons} 节交过 ${student.recentAttended} 节`
+  }
+  return "—"
+}
+
+function shortTitle(title: string, size: number) {
+  const chars = [...title]
+  return chars.length <= size ? title : chars.slice(0, size - 1).join("") + "…"
+}
 </script>
 
 <template>
-  <div class="board" :class="{ projector }">
-    <n-flex align="center" justify="space-between" class="toolbar">
-      <n-flex align="center">
-        <h2 class="title">课堂看板</h2>
+  <div class="board">
+    <div class="toolbar">
+      <n-select
+        :value="className"
+        :options="classOptions"
+        placeholder="选择班级"
+        filterable
+        class="class-select"
+        @update:value="changeClass"
+      />
+
+      <!-- 这节课的题：当场填，填完收成一排小块 -->
+      <div v-if="editing" class="lesson-edit">
         <n-select
-          :value="className"
-          :options="classOptions"
-          placeholder="选择班级"
-          filterable
-          style="width: 180px"
-          @update:value="changeClass"
+          v-model:value="lessonLanguage"
+          :options="languageOptions"
+          aria-label="用什么语言做"
+          class="lang-select"
         />
-        <!-- 投影时不出名字，请假这个按钮也收起来 -->
-        <n-button
-          v-if="board?.className && !projector"
-          :type="leaveStudents.length ? 'warning' : 'default'"
-          :secondary="!!leaveStudents.length"
-          class="leave-button"
-          @click="openLeaveDialog"
-        >
-          <template v-if="leaveStudents.length">
-            <span class="leave-names">请假 {{ leaveStudents.length }} 人：{{ leaveNames }}</span>
-            <span class="leave-edit">修改</span>
-          </template>
-          <template v-else>请假</template>
+        <n-input
+          v-model:value="lessonInput"
+          placeholder="这节课的题号，用空格隔开"
+          clearable
+          autofocus
+          @keyup.enter="saveLesson"
+        />
+        <n-button type="primary" :loading="saving" @click="saveLesson">布置</n-button>
+        <n-button @click="editing = false">取消</n-button>
+      </div>
+      <div v-else-if="board?.problems.length" class="lesson">
+        <span class="lesson-label">{{ board.source === "teacher" ? "这节课" : "今天在做" }}</span>
+        <span v-if="board.language" class="chip lang">{{
+          LANGUAGE_SHOW_VALUE[board.language]
+        }}</span>
+        <span v-for="problem in board.problems" :key="problem.problemId" class="chip">
+          {{ problem.problemDisplayId }}
+        </span>
+        <n-button text class="edit" @click="startEdit">
+          <template #icon><Icon icon="ph:pencil-simple" /></template>
+          {{ board.source === "teacher" ? "改" : "布置" }}
         </n-button>
-      </n-flex>
-      <n-flex align="center">
-        <n-text depth="3" class="meta">
-          每 15 秒刷新<template v-if="updatedAt">
-            · {{ parseTime(updatedAt, "HH:mm:ss") }}</template
-          >
-        </n-text>
-        <n-button :loading="loading" @click="load">刷新</n-button>
-        <!-- 看板只管今天；以前几节课的、任意时间段的去统计（带上这个班） -->
-        <n-button
-          v-if="!projector"
-          @click="router.push({ name: 'statistics', query: className ? { className } : {} })"
-        >
-          回头看 →
-        </n-button>
-        <n-button :type="projector ? 'primary' : 'default'" @click="projector = !projector">
-          {{ projector ? "退出投影" : "投影模式" }}
-        </n-button>
-      </n-flex>
-    </n-flex>
+      </div>
+
+      <div class="spacer"></div>
+      <n-button
+        v-if="board?.className"
+        :type="leaveStudents.length ? 'warning' : 'default'"
+        :secondary="!!leaveStudents.length"
+        @click="openLeaveDialog"
+      >
+        {{ leaveStudents.length ? `请假 ${leaveStudents.length} 人` : "请假" }}
+      </n-button>
+      <!-- 看板只管今天；以前几节课的、任意时间段的去统计（带上这个班） -->
+      <n-button @click="router.push({ name: 'statistics', query: className ? { className } : {} })">
+        回头看 →
+      </n-button>
+    </div>
 
     <n-empty
       v-if="board && !board.className"
@@ -360,192 +513,230 @@ function submissionsHref(
     />
 
     <template v-else-if="board">
-      <!-- 布置题目：投影时收起来 -->
-      <n-card v-if="!projector" class="section">
-        <n-flex align="center" :wrap="false">
-          <n-text strong style="flex-shrink: 0">这节课的题</n-text>
+      <!-- 刚上课还没有题：填题号的框是这页最大的东西 -->
+      <section v-if="needLesson" class="start">
+        <div class="start-title">这节课做哪几道题？</div>
+        <div class="start-row">
           <n-select
             v-model:value="lessonLanguage"
             :options="languageOptions"
             aria-label="用什么语言做"
-            style="width: 110px; flex-shrink: 0"
+            size="large"
+            class="lang-select"
           />
           <n-input
             v-model:value="lessonInput"
-            placeholder="输入题号，用空格隔开，比如 8019 8020 8021"
-            clearable
+            size="large"
+            placeholder="输入题号，用空格隔开"
+            class="start-input"
             @keyup.enter="saveLesson"
           />
-          <n-button type="primary" :loading="saving" @click="saveLesson">布置</n-button>
-        </n-flex>
-        <n-text depth="3" class="meta">
-          <template v-if="board.source === 'teacher'">
-            学生首页的「班里在做」显示的就是这几道<template v-if="board.language"
-              >，用 {{ LANGUAGE_SHOW_VALUE[board.language] }} 交对才算做完<template
-                v-if="board.language !== 'SQL' && board.problems.some((p) => p.isSql)"
-                >（SQL 题交对 SQL 就算）</template
-              ></template
-            >。清空再点布置就改回自动推断。
-          </template>
-          <template v-else-if="board.source === 'inferred'">
-            还没布置。下面这几道是按今天的提交记录推断的（同班 5 人以上做过的题）。
-          </template>
-          <template v-else>
-            布置之后，学生打开首页就能看到这几道题，没听清题号的也能找到；打开题目时编辑器默认就是左边选的语言。
-          </template>
-        </n-text>
-      </n-card>
-
-      <!-- 求助和布没布置题无关，放在「还没有题」的判断外面；投影时不出名字，这条也收起来 -->
-      <n-alert
-        v-if="helpCount && !projector"
-        type="info"
-        :title="`有 ${helpCount} 人在求助：${helpNames}`"
-        class="section"
-      >
-        <n-button size="small" @click="collabStore.helpPanelOpen = true">打开求助列表</n-button>
-      </n-alert>
-
-      <n-empty
-        v-if="!board.problems.length"
-        description="还没有题：在上面输入这节课的题号"
-        style="margin: 40px 0"
-      />
+          <n-button type="primary" size="large" :loading="saving" @click="saveLesson">
+            布置
+          </n-button>
+        </div>
+      </section>
 
       <template v-else>
-        <!-- 每道题的完成度。投影模式下只剩这一块，不出现名字 -->
-        <div class="summary">
-          <div v-for="problem in summary" :key="problem.problemId" class="summary-item">
-            <div class="summary-title">{{ problem.problemDisplayId }} {{ problem.title }}</div>
-            <n-progress
-              type="line"
-              status="success"
-              :percentage="problem.total ? Math.round((problem.done / problem.total) * 100) : 0"
-              :show-indicator="false"
-              :height="projector ? 28 : 12"
-            />
-            <div class="summary-count">{{ problem.done }} / {{ problem.total }} 人做完</div>
-          </div>
+        <div class="cards">
+          <button
+            v-for="stat in problemStats"
+            :key="stat.problem.problemId"
+            type="button"
+            class="card"
+            :class="{ on: stat.problem.problemId === selectedId }"
+            @click="toggleProblem(stat.problem.problemId)"
+          >
+            <span class="card-title">
+              <b>{{ stat.problem.problemDisplayId }}</b>
+              <span class="muted">{{ stat.problem.title }}</span>
+            </span>
+            <span class="card-done">
+              <b>{{ stat.done }}</b
+              ><span class="muted">/{{ stat.total }} 做对</span>
+            </span>
+            <span class="bar">
+              <i :style="{ width: stat.total ? `${(stat.done / stat.total) * 100}%` : '0' }"></i>
+            </span>
+            <span class="card-foot">
+              <span :class="stat.wrong ? 'wrong' : 'muted'">错着 {{ stat.wrong }}</span>
+              <span class="muted">没做 {{ stat.none }}</span>
+            </span>
+          </button>
         </div>
 
-        <template v-if="!projector">
-          <n-alert
-            v-if="idle.length"
-            type="warning"
-            :title="`今天还没交过（${idle.length} 人）`"
-            class="section"
-          >
-            <n-text v-if="leaveStudents.length" depth="3" class="meta">
-              请假的 {{ leaveStudents.length }} 人不算在里面
-            </n-text>
-            <div v-if="idleOften.length">
-              <b>经常没交</b>（最近 {{ board.recentLessons }} 节课最多交过 1 节）：{{
-                idleOften.map(nameOf).join("、")
-              }}
-            </div>
-            <div v-if="idleOthers.length">
-              <template v-if="idleOften.length"><b>其他</b>：</template
-              >{{ idleOthers.map(nameOf).join("、") }}
-            </div>
-          </n-alert>
-
-          <n-text v-if="stuckCount" type="error" class="meta">
-            有 {{ stuckCount }} 人卡住了（同一道题今天交了
-            {{ STUCK_ATTEMPTS }} 次以上还没过），有题的话排在表格最前面
-          </n-text>
-
-          <div class="table-wrap">
-            <table class="grid">
-              <thead>
-                <tr>
-                  <th class="name">学生</th>
-                  <th>状态</th>
-                  <th v-for="problem in board.problems" :key="problem.problemId">
-                    <router-link :to="`/problem/${problem.problemDisplayId}`" class="plain">
-                      {{ problem.problemDisplayId }}
-                    </router-link>
-                  </th>
-                  <th>最后提交</th>
-                  <th>最近 {{ board.recentLessons }} 节</th>
-                </tr>
-              </thead>
-              <tbody>
-                <template v-for="student in students" :key="student.userId">
-                  <tr v-if="student.userId === firstLeaveId" class="leave-sep">
-                    <td :colspan="board.problems.length + 4">
-                      请假 {{ leaveStudents.length }} 人 · 不算进上面的人数和进度 ·
-                      交了题或举手就自动回到上面
-                    </td>
-                  </tr>
-                  <tr :class="{ 'leave-row': groupOf(student) === 'leave' }">
-                    <td class="name">
-                      <a
-                        v-if="student.codeToday || student.drawnToday"
-                        class="cell-link"
-                        :href="submissionsHref(student, undefined, !student.codeToday)"
-                        target="_blank"
-                        :title="`看 ${nameOf(student)} 今天交的全部`"
-                      >
-                        <UserName :username="student.username" />
-                      </a>
-                      <UserName v-else :username="student.username" />
-                    </td>
-                    <td>
-                      <n-tag
-                        size="small"
-                        :bordered="false"
-                        :type="GROUP_LABEL[groupOf(student)].type"
-                        :class="{ 'help-tag': helpOf(student) }"
-                        @click="helpOf(student) && (collabStore.helpPanelOpen = true)"
-                      >
-                        {{
-                          helpOf(student)
-                            ? helpOf(student)!.status === "active"
-                              ? "老师在帮"
-                              : "举手了"
-                            : GROUP_LABEL[groupOf(student)].text
-                        }}
-                      </n-tag>
-                    </td>
-                    <td v-for="(cell, i) in student.cells" :key="i" :class="cellClass(cell)">
-                      <a
-                        v-if="cell.attempts"
-                        class="cell-link"
-                        :href="submissionsHref(student, board.problems[i], !cell.codeAttempts)"
-                        target="_blank"
-                        :title="
-                          cell.codeAttempts
-                            ? `看 ${nameOf(student)} 今天在这道题上交的 ${cell.codeAttempts} 次代码`
-                            : `看 ${nameOf(student)} 今天在这道题上画的 ${cell.flowchartAttempts} 张流程图`
-                        "
-                      >
-                        {{ cellText(cell) }}
-                      </a>
-                      <template v-else>{{ cellText(cell) }}</template>
-                    </td>
-                    <td class="meta">
-                      {{ student.lastSubmitAt ? parseTime(student.lastSubmitAt, "HH:mm") : "—" }}
-                    </td>
-                    <td
-                      :class="{
-                        'cell-stuck': oftenIdle(student) && groupOf(student) !== 'leave',
-                      }"
-                    >
-                      {{
-                        board.recentLessons
-                          ? `${student.recentAttended}/${board.recentLessons}`
-                          : "—"
-                      }}
-                    </td>
-                  </tr>
-                </template>
-              </tbody>
-            </table>
+        <section v-if="selectedIndex >= 0" class="panel">
+          <div class="panel-head">
+            <b class="panel-title">
+              <span class="muted">{{ board.problems[selectedIndex]!.problemDisplayId }}</span>
+              {{ board.problems[selectedIndex]!.title }}
+            </b>
+            <span>
+              错着的 <b class="wrong">{{ problemStats[selectedIndex]!.wrong }}</b> 人
+            </span>
+            <span class="muted">没做 {{ problemStats[selectedIndex]!.none }} 人</span>
+            <div class="spacer"></div>
+            <n-button quaternary size="small" aria-label="收起" @click="selectedId = null">
+              <template #icon><Icon icon="ph:x-bold" /></template>
+            </n-button>
           </div>
-        </template>
+          <div v-if="wrongGroups.length" class="groups">
+            <div
+              v-for="group in wrongGroups"
+              :key="group.kind.key"
+              class="err-group"
+              :class="{ quiet: group.kind.key === 'before' || group.kind.key === 'flowchart' }"
+            >
+              <div class="err-title">
+                {{ group.kind.label }}
+                <span class="wrong">{{ group.people.length }} 人</span>
+                <span v-if="group.line" class="muted"> · 第 {{ group.line }} 行</span>
+              </div>
+              <div class="err-people">
+                <template v-for="person in group.people" :key="person.student.userId">
+                  <button
+                    v-if="person.cell.latest"
+                    type="button"
+                    class="who"
+                    @click="openExplain(selectedIndex, person.student.userId)"
+                  >
+                    <UserName :username="person.student.username" />
+                    <span class="mini" :style="cellStyle(person.cell)"
+                      >✗ {{ person.cell.attempts }}</span
+                    >
+                  </button>
+                  <!-- 没有今天的代码可讲：去提交列表看他交过的 -->
+                  <a
+                    v-else
+                    class="who"
+                    :href="
+                      submissionsHref(
+                        person.student,
+                        board.problems[selectedIndex],
+                        !!person.cell.attempts,
+                        !!person.cell.attempts,
+                      )
+                    "
+                    target="_blank"
+                  >
+                    <UserName :username="person.student.username" />
+                  </a>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div v-else class="muted">这道题现在没有人错着</div>
+        </section>
       </template>
+
+      <div class="table-wrap">
+        <table class="grid">
+          <thead>
+            <tr>
+              <th class="name">学生</th>
+              <th
+                v-for="(stat, i) in problemStats"
+                :key="stat.problem.problemId"
+                class="col"
+                :class="{ hl: i === selectedIndex }"
+                @click="toggleProblem(stat.problem.problemId)"
+              >
+                <div class="col-id">{{ stat.problem.problemDisplayId }}</div>
+                <div class="col-title" :title="stat.problem.title">
+                  {{ shortTitle(stat.problem.title, 6) }}
+                </div>
+                <div class="col-count">{{ stat.done }}/{{ stat.total }}</div>
+                <div class="bar">
+                  <i
+                    :style="{ width: stat.total ? `${(stat.done / stat.total) * 100}%` : '0' }"
+                  ></i>
+                </div>
+              </th>
+              <th class="narrow-col">做对</th>
+              <th class="narrow-col">最后交</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="student in students" :key="student.userId">
+              <tr v-if="groupStarts.has(student.userId)" class="group-row">
+                <td :colspan="board.problems.length + 3">
+                  {{ GROUP_LABEL[groupOf(student)] }}
+                  <span class="muted">{{ groupCount[groupOf(student)] }}</span>
+                </td>
+              </tr>
+              <tr :class="{ 'leave-row': groupOf(student) === 'leave' }">
+                <td class="name">
+                  <a
+                    v-if="student.codeToday || student.drawnToday"
+                    class="plain"
+                    :href="submissionsHref(student, undefined, !student.codeToday)"
+                    target="_blank"
+                    :title="`看 ${student.username} 今天交的全部`"
+                  >
+                    <UserName :username="student.username" />
+                  </a>
+                  <UserName v-else :username="student.username" />
+                  <n-tag
+                    v-if="helpOf(student)"
+                    size="small"
+                    :bordered="false"
+                    type="warning"
+                    class="help-tag"
+                    @click="collabStore.helpPanelOpen = true"
+                  >
+                    {{ helpOf(student)!.status === "active" ? "老师在帮" : "举手了" }}
+                  </n-tag>
+                </td>
+                <td
+                  v-for="(cell, i) in student.cells"
+                  :key="i"
+                  :class="{ hl: i === selectedIndex }"
+                >
+                  <button
+                    v-if="cell.status === 'tried' && cell.latest"
+                    type="button"
+                    class="cell"
+                    :style="cellStyle(cell)"
+                    :title="cellTitle(cell, student)"
+                    @click="openExplain(i, student.userId)"
+                  >
+                    {{ cellText(cell) }}
+                  </button>
+                  <a
+                    v-else-if="cell.attempts"
+                    class="cell"
+                    :style="cellStyle(cell)"
+                    :href="submissionsHref(student, board.problems[i], !cell.codeAttempts)"
+                    target="_blank"
+                    :title="cellTitle(cell, student)"
+                  >
+                    {{ cellText(cell) }}
+                  </a>
+                  <span
+                    v-else
+                    class="cell"
+                    :style="cellStyle(cell)"
+                    :title="cellTitle(cell, student)"
+                  >
+                    {{ cellText(cell) }}
+                  </span>
+                </td>
+                <td class="num">{{ doneCount(student) }}/{{ board.problems.length }}</td>
+                <td class="num muted">{{ lastText(student) }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
     </template>
 
+    <ExplainModal
+      v-model:show="explainShow"
+      v-model:index="explainIndex"
+      :problem="explainProblem"
+      :people="explainPeople"
+    />
+
     <n-modal
       v-model:show="leaveDialog"
       preset="card"
@@ -556,26 +747,17 @@ function submissionsHref(
       "
       style="width: 640px; max-width: calc(100vw - 32px)"
     >
-      <template v-if="leaveCandidates.length">
-        <n-text depth="3" class="meta">
-          勾上不在的人，看板就不算他们。<template
-            v-if="boardStudents.length > leaveCandidates.length"
-            >其余
-            {{ boardStudents.length - leaveCandidates.length }} 人今天交过题，不用标。</template
-          >
-        </n-text>
-        <n-checkbox-group v-model:value="leaveSelected">
-          <div class="leave-grid">
-            <n-checkbox
-              v-for="student in leaveCandidates"
-              :key="student.userId"
-              :value="student.username"
-              :label="nameOf(student)"
-              class="leave-option"
-            />
-          </div>
-        </n-checkbox-group>
-      </template>
+      <n-checkbox-group v-if="leaveCandidates.length" v-model:value="leaveSelected">
+        <div class="leave-grid">
+          <n-checkbox
+            v-for="student in leaveCandidates"
+            :key="student.userId"
+            :value="student.username"
+            :label="student.username"
+            class="leave-option"
+          />
+        </div>
+      </n-checkbox-group>
       <n-text v-else depth="3">请假的人一定是没交过题的，现在没有人可以标。</n-text>
       <template #footer>
         <n-flex align="center" :wrap="false">
@@ -594,158 +776,437 @@ function submissionsHref(
 </template>
 
 <style scoped>
-/* 格子、名字能点进提交列表，但别长得像一片蓝色链接 —— 投影上一眼看的是颜色 */
-.cell-link {
-  color: inherit;
-  text-decoration: none;
+.board {
+  max-width: 1286px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding-top: 8px;
+}
+
+.muted {
+  color: v-bind("theme.textColor3");
+}
+
+.wrong {
+  color: v-bind("theme.errorColor");
+  font-weight: 600;
+}
+
+.spacer {
+  flex: 1 1 0;
+}
+
+/* ---------- 顶上一行 ---------- */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.class-select {
+  width: 160px;
+}
+
+.lang-select {
+  width: 110px;
+  flex-shrink: 0;
+}
+
+.lesson,
+.lesson-edit {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.lesson-edit {
+  flex: 1 1 520px;
+  gap: 8px;
+}
+
+.lesson-label {
+  margin-right: 4px;
+  font-size: 14px;
+  color: v-bind("theme.textColor3");
+  white-space: nowrap;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 8px;
+  border-radius: 4px;
+  background: v-bind("theme.actionColor");
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.chip.lang {
+  background: v-bind("tone('success').background");
+  color: v-bind("tone('success').color");
+  font-weight: 600;
+}
+
+.edit {
+  margin-left: 4px;
+  font-size: 14px;
+  color: v-bind("theme.textColor2");
+}
+
+/* ---------- 刚上课 ---------- */
+
+.start {
+  padding: 22px 24px;
+  border-radius: 10px;
+  border: 1px solid v-bind("tone('success').background");
+  background: v-bind("theme.cardColor");
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.start-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.start-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.start-input {
+  flex: 1 1 0;
+  font-size: 18px;
+}
+
+/* ---------- 题卡片 ---------- */
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid v-bind("theme.dividerColor");
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor1");
+  font: inherit;
+  text-align: left;
+  min-width: 0;
   cursor: pointer;
 }
 
-.cell-link:hover {
-  text-decoration: underline;
+.card:hover {
+  border-color: v-bind("theme.borderColor");
 }
 
-.leave-button {
-  max-width: 420px;
+.card.on {
+  border-color: v-bind("theme.successColor");
+  box-shadow: inset 0 0 0 1px v-bind("theme.successColor");
 }
 
-.leave-names {
+.card-title {
+  font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.leave-edit {
-  margin-left: 8px;
+.card-title b {
+  margin-right: 4px;
+  font-variant-numeric: tabular-nums;
+}
+
+.card-done {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  font-size: 13px;
+}
+
+.card-done b {
+  font-size: 22px;
+  line-height: 28px;
+  font-variant-numeric: tabular-nums;
+}
+
+.card-foot {
+  display: flex;
+  gap: 10px;
+  font-size: 13px;
+}
+
+.bar {
+  display: block;
+  height: 4px;
+  border-radius: 2px;
+  background: v-bind("theme.actionColor");
+  overflow: hidden;
+}
+
+.bar i {
+  display: block;
+  height: 4px;
+  background: v-bind("theme.successColor");
+}
+
+/* ---------- 点开一道题：错着的人按错法归堆 ---------- */
+
+.panel {
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: 1px solid v-bind("tone('success').background");
+  background: v-bind("theme.cardColor");
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+}
+
+.panel-title {
+  font-size: 16px;
+}
+
+.groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.err-group {
+  min-width: 260px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: v-bind("tone('error').background");
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 今天没有代码可讲的两堆（以前交过 / 只画了流程图）不是今天的错，不用红底 */
+.err-group.quiet {
+  background: v-bind("theme.actionColor");
+}
+
+.err-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.err-people {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.who {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 6px;
+  border: 1px solid v-bind("theme.dividerColor");
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor1");
+  font: inherit;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+a.who {
+  text-decoration: none;
+}
+
+.who:hover {
+  border-color: v-bind("theme.borderColor");
+}
+
+.mini {
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- 全班一张表 ---------- */
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+.grid {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  font-size: var(--oj-fs-body);
+}
+
+.grid th {
+  padding: 8px 4px;
+  font-weight: 400;
+  vertical-align: bottom;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  white-space: nowrap;
+}
+
+.grid td {
+  height: 40px;
+  padding: 0 4px;
+  text-align: center;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  white-space: nowrap;
+}
+
+.grid .name {
+  width: 200px;
+  padding-left: 12px;
+  text-align: left;
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+}
+
+.grid td.name {
+  font-size: inherit;
+  color: inherit;
+}
+
+.grid th.col {
+  width: 96px;
+  cursor: pointer;
+}
+
+.grid th.narrow-col {
+  width: 80px;
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+}
+
+.grid .hl {
+  background: v-bind("tone('success').background");
+}
+
+.col-id {
+  font-size: 14px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.col-title {
+  max-width: 88px;
+  margin: 0 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.col-count {
+  margin: 2px 0 4px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.grid th .bar {
+  margin: 0 6px;
+}
+
+.group-row td {
+  height: 34px;
+  padding-left: 12px;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 600;
+  background: v-bind("theme.actionColor");
+}
+
+.group-row .muted {
+  margin-left: 4px;
+  font-weight: 400;
+}
+
+.leave-row td {
+  opacity: 0.45;
+}
+
+.cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 28px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: 5px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  vertical-align: middle;
+}
+
+button.cell,
+a.cell {
+  cursor: pointer;
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+}
+
+.plain {
+  color: inherit;
+  text-decoration: none;
+}
+
+.plain:hover {
   text-decoration: underline;
 }
 
+.help-tag {
+  margin-left: 8px;
+  cursor: pointer;
+}
+
 .leave-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 10px 8px;
-  margin-top: 12px;
 }
 
 .leave-option {
   font-size: 15px;
 }
 
-.grid .leave-sep td {
-  text-align: left;
-  font-size: 12px;
-  opacity: 0.6;
-  padding-top: 12px;
-}
-
-.grid .leave-row td {
-  opacity: 0.45;
-}
-
-.board {
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.toolbar {
-  margin: 8px 0 var(--oj-gap);
-}
-
-.title {
-  margin: 0 4px 0 0;
-  font-size: var(--oj-fs-title);
-}
-
-.section {
-  margin-bottom: var(--oj-gap);
-}
-
 .meta {
   font-size: var(--oj-fs-sec);
 }
-
-.summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 20px 32px;
-  margin-bottom: 24px;
-}
-
-.summary-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 6px;
-  font-size: var(--oj-fs-body);
-  font-weight: 600;
-}
-
-.summary-count {
-  font-size: var(--oj-fs-sec);
-  opacity: 0.75;
-  margin-top: 4px;
-}
-
-.projector .summary {
-  grid-template-columns: 1fr;
-  gap: 28px;
-  font-size: 28px;
-}
-
-.projector .summary-count {
-  font-size: 24px;
-}
-
-.table-wrap {
-  overflow-x: auto;
-  margin-top: 12px;
-}
-
-.grid {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: var(--oj-fs-body);
-}
-
-.grid th,
-.grid td {
-  padding: 10px 12px;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-  text-align: center;
-  white-space: nowrap;
-}
-
-.grid th {
-  font-size: var(--oj-fs-sec);
-  font-weight: 500;
-  opacity: 0.8;
-}
-
-.grid .name {
-  text-align: left;
-}
-
-.plain {
-  color: inherit;
-}
-
-.cell-done {
-  color: #18a058;
-}
-
-.cell-tried {
-  color: #f0a020;
-}
-
-.cell-stuck {
-  color: #d03050;
-  font-weight: 600;
-}
-
-.help-tag {
-  cursor: pointer;
-}
-
-.cell-none {
-  opacity: 0.35;
-}
 </style>
diff --git a/apps/web/src/oj/classroom/components/ExplainModal.vue b/apps/web/src/oj/classroom/components/ExplainModal.vue
new file mode 100644
index 0000000..4e27a46
--- /dev/null
+++ b/apps/web/src/oj/classroom/components/ExplainModal.vue
@@ -0,0 +1,200 @@
+<script lang="ts">
+export interface ExplainPerson {
+  userId: number
+  username: string
+  submissionId: string
+  /** 错法的短名（errorKind），挂在名字后面 */
+  label: string
+}
+</script>
+
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { onKeyStroke } from "@vueuse/core"
+import { useThemeVars } from "naive-ui"
+import SubmissionView from "oj/submission/components/SubmissionView.vue"
+import UserName from "shared/components/UserName.vue"
+import type { ClassBoardProblem } from "utils/types"
+
+/**
+ * 课堂看板「讲错误」（设计稿 BdOpen）：点一个红格子或错法堆里的名字打开。老师在讲台上
+ * 一个个讲这道题错着的人，所以顶上是这几个人，← → 换人；下面和独立的提交详情页同一块
+ * （代码占满宽、为什么错在后），只是不出名字那一行、点「第几次」就地换。
+ */
+const props = defineProps<{
+  problem: ClassBoardProblem | null
+  people: ExplainPerson[]
+}>()
+const show = defineModel<boolean>("show", { required: true })
+const index = defineModel<number>("index", { required: true })
+
+const theme = useThemeVars()
+/**
+ * 颜色走内联的 CSS 变量，不用 <style> 里的 v-bind()：n-modal 把内容挂到 body 下面，
+ * v-bind 的变量挂在组件根上，传不过去（弹层底色整个透明）
+ */
+const vars = computed(() => ({
+  "--card": theme.value.cardColor,
+  "--text1": theme.value.textColor1,
+  "--text2": theme.value.textColor2,
+  "--text3": theme.value.textColor3,
+  "--divider": theme.value.dividerColor,
+  "--border": theme.value.borderColor,
+  "--success": theme.value.successColor,
+  "--hover": theme.value.hoverColor,
+}))
+const current = computed(() => props.people[index.value] ?? null)
+
+function step(delta: -1 | 1) {
+  const next = index.value + delta
+  if (next >= 0 && next < props.people.length) index.value = next
+}
+
+onKeyStroke(["ArrowLeft", "ArrowRight"], (event) => {
+  if (!show.value || props.people.length < 2) return
+  if (event.altKey || event.ctrlKey || event.metaKey) return
+  event.preventDefault()
+  step(event.key === "ArrowLeft" ? -1 : 1)
+})
+</script>
+
+<template>
+  <n-modal v-model:show="show" :auto-focus="false">
+    <!-- 无 preset 的 n-modal 直接子节点要是普通元素 -->
+    <div
+      class="sheet"
+      :style="vars"
+      role="dialog"
+      :aria-label="problem ? `讲 ${problem.problemDisplayId} 的错误` : '讲错误'"
+    >
+      <div class="top">
+        <span v-if="problem" class="problem">
+          <b>{{ problem.problemDisplayId }}</b> {{ problem.title }}
+          <template v-if="people.length > 1"> · 错着的</template>
+        </span>
+        <div class="people">
+          <button
+            v-for="(person, i) in people"
+            :key="person.userId"
+            type="button"
+            class="person"
+            :class="{ on: i === index }"
+            @click="index = i"
+          >
+            <UserName :username="person.username" />
+            <span class="kind">{{ person.label }}</span>
+          </button>
+        </div>
+        <span v-if="people.length > 1" class="keys"><kbd>←</kbd><kbd>→</kbd> 换人</span>
+        <div class="spacer"></div>
+        <n-button
+          v-if="current"
+          tag="a"
+          :href="'/submission/' + current.submissionId"
+          target="_blank"
+        >
+          在新页面打开
+        </n-button>
+        <n-button quaternary aria-label="关闭" @click="show = false">
+          <template #icon><Icon icon="ph:x-bold" /></template>
+        </n-button>
+      </div>
+      <SubmissionView v-if="current" :id="current.submissionId" embedded />
+    </div>
+  </n-modal>
+</template>
+
+<style scoped>
+.sheet {
+  width: min(1240px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 18px 24px 24px;
+  border-radius: 10px;
+  background: var(--card);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.problem {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--text3);
+  white-space: nowrap;
+}
+
+.problem b {
+  color: var(--text2);
+}
+
+.people {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.person {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 6px;
+  border: 1px solid var(--divider);
+  background: var(--card);
+  color: var(--text1);
+  font: inherit;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.person.on {
+  border-color: var(--success);
+  background: var(--hover);
+}
+
+.kind {
+  font-size: 12px;
+  color: var(--text3);
+}
+
+.keys {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--text3);
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+
+kbd {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--card);
+  font: inherit;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spacer {
+  flex: 1 1 0;
+}
+</style>
diff --git a/apps/web/src/oj/classroom/errorKind.ts b/apps/web/src/oj/classroom/errorKind.ts
new file mode 100644
index 0000000..2f131fa
--- /dev/null
+++ b/apps/web/src/oj/classroom/errorKind.ts
@@ -0,0 +1,107 @@
+import { classifyDiff, type DiffKind } from "oj/problem/utils/wrongAnswer"
+import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
+import type { ClassBoardCell } from "utils/types"
+
+/**
+ * 课堂看板：一道题错着的人「按错法归堆」（设计稿「课堂看板重设计」A+B）。老师讲错误时
+ * 要的是「这道题全班错在哪」：同一种错讲一遍就够，所以按最后一次提交归类，堆名要短，
+ * 一眼能读完 —— 长的中文解释在点开之后的弹层里（和提交详情同一份）。
+ *
+ * 依据是提交里存的 runtime_error / sample_check（判题机写的），和提交详情、题目页结果区同源。
+ */
+export type BoardLatest = NonNullable<ClassBoardCell["latest"]>
+
+export interface ErrorKind {
+  /** 归堆用：同一个 key 是同一种错 */
+  key: string
+  label: string
+  /** 报错指到的行，答案错误没有 */
+  line: number | null
+}
+
+const DIFF_LABEL: Record<DiffKind, string> = {
+  "no-output": "什么都没输出",
+  whitespace: "只差空格、换行",
+  punctuation: "中英文标点不对",
+  case: "大小写不对",
+  extra: "多输出了东西",
+  missing: "少输出了东西",
+  "number-format": "小数位数不对",
+  values: "算出来的数不对",
+  other: "输出和例子不一样",
+}
+
+/** runtime-diagnosis.ts 细分出来的 kind 里常见的几种；没列的按异常类型归 */
+const KIND_LABEL: Record<string, string> = {
+  "int-parse": "int() 转换失败",
+  "float-parse": "float() 转换失败",
+  unpack: "拆出来的个数对不上",
+  "unpack-number": "一个数拆给好几个变量",
+  "str-concat": "文字和数字用 + 连",
+  operand: "文字和数字一起算",
+  compare: "文字和数字比大小",
+  "not-int": "该给整数的地方不是整数",
+  "format-spec": "保留小数的格式写错",
+  "not-callable": "把不是函数的当函数用",
+  "func-value": "函数名后面忘了括号",
+  "none-value": "拿 None 接着用",
+  "map-value": "map() 的结果没转成列表",
+}
+
+const TYPE_LABEL: Record<string, string> = {
+  EOFError: "input() 用多了",
+  IndexError: "下标越界",
+  ZeroDivisionError: "除以 0",
+  KeyError: "字典里没有这个键",
+  RecursionError: "递归停不下来",
+  UnboundLocalError: "变量还没赋值就用",
+  ModuleNotFoundError: "导入了没有的模块",
+  ImportError: "导入了没有的模块",
+  ValueError: "值不符合要求",
+  TypeError: "类型不对",
+}
+
+/** C / C++ 只有信号：11 段错误、8 除零 */
+const SIGNAL_LABEL: Record<number, string> = {
+  11: "数组越界或指针出错",
+  8: "除以 0",
+}
+
+export function errorKind(latest: BoardLatest): ErrorKind {
+  const result = latest.result
+  if (result === SubmissionStatus.wrong_answer) {
+    const check = latest.sampleCheck
+    if (!check) return { key: "wa", label: "答案错误", line: null }
+    if (check.passed) return { key: "wa-hidden", label: "例子都对，错在没公开的测试点", line: null }
+    const diff = classifyDiff(check.expected ?? "", check.output ?? "")
+    return { key: `wa-${diff}`, label: DIFF_LABEL[diff], line: null }
+  }
+  if (result === SubmissionStatus.runtime_error) {
+    const rt = latest.runtimeError
+    const line = rt?.line ?? null
+    if (!rt) return { key: "re", label: "运行时出错", line }
+    if (rt.signal && SIGNAL_LABEL[rt.signal]) {
+      return { key: `re-signal-${rt.signal}`, label: SIGNAL_LABEL[rt.signal]!, line }
+    }
+    if (rt.type === "NameError") {
+      return rt.name
+        ? { key: `re-name-${rt.name}`, label: `「${rt.name}」没有定义`, line }
+        : { key: "re-name", label: "用了没定义的名字", line }
+    }
+    if (rt.kind && KIND_LABEL[rt.kind]) {
+      return { key: `re-${rt.kind}`, label: KIND_LABEL[rt.kind]!, line }
+    }
+    if (rt.type && TYPE_LABEL[rt.type]) {
+      return { key: `re-${rt.type}`, label: TYPE_LABEL[rt.type]!, line }
+    }
+    return { key: "re", label: "运行时出错", line }
+  }
+  if (result === SubmissionStatus.compile_error) {
+    return { key: "ce", label: "编译没通过", line: null }
+  }
+  return {
+    key: `r${result}`,
+    label: JUDGE_STATUS[result as keyof typeof JUDGE_STATUS]?.name ?? "没通过",
+    line: null,
+  }
+}
diff --git a/apps/web/src/oj/submission/components/SubmissionView.vue b/apps/web/src/oj/submission/components/SubmissionView.vue
index 33cdd18..1329832 100644
--- a/apps/web/src/oj/submission/components/SubmissionView.vue
+++ b/apps/web/src/oj/submission/components/SubmissionView.vue
@@ -17,13 +17,13 @@ import {
 } from "utils/constants"
 import { parseTime, submissionCaseResults } from "utils/functions"
 import type { Submission } from "utils/types"
-import CodeView from "./components/CodeView.vue"
-import ExplainNote from "./components/ExplainNote.vue"
-import StatusPill from "./components/StatusPill.vue"
-import { useCopySubmission } from "./composables/copySubmission"
-import { useSubmissionExplain } from "./composables/explain"
-import { useTone } from "./composables/tone"
-import { classLabel, submissionTimeText } from "./utils"
+import { useCopySubmission } from "../composables/copySubmission"
+import { useSubmissionExplain } from "../composables/explain"
+import { useTone } from "../composables/tone"
+import { classLabel, submissionTimeText } from "../utils"
+import CodeView from "./CodeView.vue"
+import ExplainNote from "./ExplainNote.vue"
+import StatusPill from "./StatusPill.vue"
 
 /**
  * 单独打开的一条提交（设计稿「提交详情重设计」A，用户改成代码在前、例子在后）：一栏到底 ——
@@ -33,8 +33,12 @@ import { classLabel, submissionTimeText } from "./utils"
  *
  * 入口是提交列表右栏的「新页面打开」、统计页的方块、后台卡点分析 —— 多半是老师在看某个学生
  * 怎么一次次改对的。
+ *
+ * 独立的提交详情页（detail.vue）和课堂看板「讲错误」的弹层共用这一个。`embedded`（弹层里）：
+ * 不出名字和题目那一行（弹层顶上有一排人名），不占 ← →（弹层拿它换人），
+ * 点「第几次」就地换、不改地址栏。
  */
-const props = defineProps<{ submissionID: string }>()
+const props = defineProps<{ id: string; embedded?: boolean }>()
 
 const router = useRouter()
 const message = useMessage()
@@ -45,6 +49,13 @@ const userStore = useUserStore()
 const { isMobile } = useBreakpoints()
 const { copyToCat, copyToProblem } = useCopySubmission()
 
+/** 正在看的那一条：页面里跟着地址栏走，弹层里点「第几次」就地换 */
+const currentId = ref(props.id)
+watch(
+  () => props.id,
+  (id) => (currentId.value = id),
+)
+
 const detail = ref<Submission | null>(null)
 /** forbidden：别人的代码；missing：链接不对 / 已删掉 */
 const state = ref<"loading" | "ok" | "forbidden" | "missing" | "failed">("loading")
@@ -65,7 +76,7 @@ async function load(quiet = false) {
   clearTimeout(timer)
   if (!quiet) state.value = "loading"
   try {
-    const res = await getSubmission(props.submissionID, true)
+    const res = await getSubmission(currentId.value, true)
     if (seq !== loadSeq) return
     detail.value = res
     state.value = "ok"
@@ -82,11 +93,7 @@ async function load(quiet = false) {
   }
 }
 
-watch(
-  () => props.submissionID,
-  () => load(),
-  { immediate: true },
-)
+watch(currentId, () => load(), { immediate: true })
 onBeforeUnmount(() => clearTimeout(timer))
 
 const shown = computed(() => (state.value === "ok" ? detail.value : null))
@@ -144,7 +151,9 @@ function step(delta: -1 | 1) {
 }
 
 function openAttempt(id: string) {
-  if (id !== shown.value?.id) router.replace("/submission/" + id)
+  if (id === shown.value?.id) return
+  if (props.embedded) currentId.value = id
+  else router.replace("/submission/" + id)
 }
 
 function typing(event: KeyboardEvent) {
@@ -154,6 +163,7 @@ function typing(event: KeyboardEvent) {
 
 // 这几次是横着排的一串，所以用 ← →（竖着排的列表才用 ↑ ↓，见提交列表）
 onKeyStroke(["ArrowLeft", "ArrowRight"], (event) => {
+  if (props.embedded) return
   if (typing(event) || event.altKey || event.ctrlKey || event.metaKey || attempts.value.length < 2)
     return
   event.preventDefault()
@@ -228,9 +238,9 @@ function handleMore(key: string) {
 </script>
 
 <template>
-  <div class="oj-page detail" :class="{ narrow: isMobile }">
+  <div class="detail" :class="{ 'oj-page': !embedded, narrow: isMobile }">
     <template v-if="shown">
-      <div class="head">
+      <div v-if="!embedded" class="head">
         <div class="who">
           <a
             class="user-link"
@@ -332,7 +342,9 @@ function handleMore(key: string) {
           <StatusPill v-else :result="item.result" bare />
           <span class="t">{{ attemptTime(item.createTime) }}</span>
         </a>
-        <span v-if="!isMobile && canStep" class="keys"><kbd>←</kbd><kbd>→</kbd> 换一次</span>
+        <span v-if="!isMobile && !embedded && canStep" class="keys"
+          ><kbd>←</kbd><kbd>→</kbd> 换一次</span
+        >
       </section>
 
       <div v-if="!shown.showLink" class="locked">
diff --git a/apps/web/src/oj/submission/detail.vue b/apps/web/src/oj/submission/detail.vue
new file mode 100644
index 0000000..7643e63
--- /dev/null
+++ b/apps/web/src/oj/submission/detail.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import SubmissionView from "./components/SubmissionView.vue"
+
+/** 单独打开的一条提交，主体在 SubmissionView（课堂看板「讲错误」的弹层也用它） */
+defineProps<{ submissionID: string }>()
+</script>
+
+<template>
+  <SubmissionView :id="submissionID" />
+</template>