diff --git a/apps/web/src/oj/api.ts b/apps/web/src/oj/api.ts
index b01da55..bd6fda6 100644
--- a/apps/web/src/oj/api.ts
+++ b/apps/web/src/oj/api.ts
@@ -10,6 +10,7 @@ import {
   type TutorialSummary,
   type ClassActivity,
   type ClassBoard,
+  type ClassLesson,
   type KnowledgeMap,
   type ClassComparisonResponse,
   type ClassRankItem,
@@ -223,6 +224,11 @@ export function getClassBoard(className?: string) {
   return api.get<ClassBoard>("classroom/board", { params: { className } })
 }
 
+/** 这个班「这节课」的题（提交列表那颗按钮用）。不传班级就猜正在上课的班，和看板一样 */
+export function getClassLesson(className?: string) {
+  return api.get<ClassLesson>("classroom/lesson", { params: { className } })
+}
+
 /** 给这个班布置今天的题，空数组 = 清掉 */
 export function setClassLesson(className: string, problemDisplayIds: string[]) {
   return api.put<null>("classroom/lesson", { className, problemDisplayIds })
@@ -412,6 +418,7 @@ export function getFlowchartSubmission(id: string) {
 
 export function getFlowchartSubmissions(params: {
   username?: string
+  className?: string
   problemDisplayId?: string
   myself?: string
   offset?: number
diff --git a/apps/web/src/oj/classroom/board.vue b/apps/web/src/oj/classroom/board.vue
index f3c6242..919e7bc 100644
--- a/apps/web/src/oj/classroom/board.vue
+++ b/apps/web/src/oj/classroom/board.vue
@@ -198,6 +198,24 @@ const GROUP_LABEL: Record<
   working: { text: "在做", type: "info" },
   done: { text: "做完了", type: "success" },
 }
+
+const router = useRouter()
+
+/**
+ * 点格子 / 名字到提交列表看他今天交的代码。新标签打开：看板多半正投在屏幕上，别把它顶掉。
+ * 用户名按整名匹配（学号互相包含是常态，ks24a1 会混进 ks24a10）
+ */
+function submissionsHref(student: ClassBoardStudent, problemDisplayId?: string) {
+  return router.resolve({
+    name: "submissions",
+    query: {
+      username: student.username,
+      exactUsername: "1",
+      today: "1",
+      ...(problemDisplayId ? { problem: problemDisplayId } : {}),
+    },
+  }).href
+}
 </script>
 
 <template>
@@ -331,7 +349,18 @@ const GROUP_LABEL: Record<
               </thead>
               <tbody>
                 <tr v-for="student in students" :key="student.userId">
-                  <td class="name">{{ nameOf(student) }}</td>
+                  <td class="name">
+                    <a
+                      v-if="student.lastSubmitAt"
+                      class="cell-link"
+                      :href="submissionsHref(student)"
+                      target="_blank"
+                      :title="`看 ${nameOf(student)} 今天交的全部`"
+                    >
+                      {{ nameOf(student) }}
+                    </a>
+                    <template v-else>{{ nameOf(student) }}</template>
+                  </td>
                   <td>
                     <n-tag
                       size="small"
@@ -350,7 +379,16 @@ const GROUP_LABEL: Record<
                     </n-tag>
                   </td>
                   <td v-for="(cell, i) in student.cells" :key="i" :class="cellClass(cell)">
-                    {{ cellText(cell) }}
+                    <a
+                      v-if="cell.attempts"
+                      class="cell-link"
+                      :href="submissionsHref(student, board.problems[i]!.problemDisplayId)"
+                      target="_blank"
+                      :title="`看 ${nameOf(student)} 今天在这道题上交的 ${cell.attempts} 次`"
+                    >
+                      {{ cellText(cell) }}
+                    </a>
+                    <template v-else>{{ cellText(cell) }}</template>
                   </td>
                   <td class="meta">
                     {{ student.lastSubmitAt ? parseTime(student.lastSubmitAt, "HH:mm") : "—" }}
@@ -371,6 +409,17 @@ const GROUP_LABEL: Record<
 </template>
 
 <style scoped>
+/* 格子、名字能点进提交列表，但别长得像一片蓝色链接 —— 投影上一眼看的是颜色 */
+.cell-link {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.cell-link:hover {
+  text-decoration: underline;
+}
+
 .board {
   max-width: 1400px;
   margin: 0 auto;
diff --git a/apps/web/src/oj/submission/components/CodeView.vue b/apps/web/src/oj/submission/components/CodeView.vue
new file mode 100644
index 0000000..4a370bb
--- /dev/null
+++ b/apps/web/src/oj/submission/components/CodeView.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import { useDark } from "@vueuse/core"
+
+/**
+ * 只读的代码区：行号 + 高亮 + 可选地标红一行（编译失败 / 运行时错误报了行号时）。
+ *
+ * 不用 n-code 自带的 show-line-numbers：它没法标出某一行。行高写死成一个值，
+ * 标红的那条底色按行号算 top，和代码逐行对齐。
+ */
+const props = withDefaults(
+  defineProps<{
+    code: string
+    /** highlight.js 的语言名（LANGUAGE_FORMAT_VALUE） */
+    language: string
+    /** 要标红的行，1 起 */
+    markLine?: number | null
+    fontSize?: number
+    lineHeight?: number
+  }>(),
+  { markLine: null, fontSize: 18, lineHeight: 30 },
+)
+
+const theme = useThemeVars()
+const isDark = useDark()
+
+const PADDING = 8
+const lineCount = computed(() => Math.max(1, props.code.split("\n").length))
+const markStyle = computed(() =>
+  props.markLine && props.markLine <= lineCount.value
+    ? {
+        top: `${PADDING + (props.markLine - 1) * props.lineHeight}px`,
+        height: `${props.lineHeight}px`,
+      }
+    : null,
+)
+
+const scroller = useTemplateRef<HTMLElement>("scroller")
+// 换了一条就回到顶上；有标红行的，滚到那一行附近
+watch(
+  () => [props.code, props.markLine] as const,
+  async () => {
+    await nextTick()
+    const el = scroller.value
+    if (!el) return
+    const target = props.markLine ? (props.markLine - 3) * props.lineHeight : 0
+    el.scrollTop = Math.max(0, target)
+    el.scrollLeft = 0
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div
+    ref="scroller"
+    class="code-view"
+    :style="{
+      '--fs': `${fontSize}px`,
+      '--lh': `${lineHeight}px`,
+      '--pad': `${PADDING}px`,
+    }"
+  >
+    <div class="gutter">
+      <div v-for="n in lineCount" :key="n" :class="{ marked: n === markLine }">{{ n }}</div>
+    </div>
+    <div class="body">
+      <div v-if="markStyle" class="mark" :style="markStyle"></div>
+      <n-code :code="code" :language="language" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.code-view {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  align-items: flex-start;
+  overflow: auto;
+  border: 1px solid v-bind("theme.dividerColor");
+  border-radius: 6px;
+  background: v-bind("theme.cardColor");
+  font-family: Consolas, Monaco, monospace;
+  font-size: var(--fs);
+  line-height: var(--lh);
+}
+
+.gutter {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  flex: none;
+  min-width: 40px;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: var(--pad) 10px var(--pad) 8px;
+  text-align: right;
+  color: v-bind("theme.textColor3");
+  background: v-bind("isDark ? 'rgba(255,255,255,0.03)' : '#fafafb'");
+  border-right: 1px solid v-bind("theme.dividerColor");
+  user-select: none;
+}
+
+.gutter .marked {
+  color: v-bind("theme.errorColor");
+  font-weight: 700;
+}
+
+.body {
+  position: relative;
+  flex: 1 0 auto;
+  padding: var(--pad) 14px;
+}
+
+.mark {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: v-bind("isDark ? 'rgba(232, 128, 128, 0.16)' : '#fdf0f2'");
+}
+
+.body :deep(.n-code) {
+  position: relative;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.body :deep(pre) {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre;
+}
+</style>
diff --git a/apps/web/src/oj/submission/components/FlowchartPane.vue b/apps/web/src/oj/submission/components/FlowchartPane.vue
new file mode 100644
index 0000000..1fc9980
--- /dev/null
+++ b/apps/web/src/oj/submission/components/FlowchartPane.vue
@@ -0,0 +1,470 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { getFlowchartSubmission } from "oj/api"
+import { useMermaid } from "shared/composables/useMermaid"
+import { sortFlowchartCriteria } from "utils/constants"
+import type { FlowchartSubmission, FlowchartSubmissionListItem } from "utils/types"
+import { FlowchartSubmissionStatus } from "utils/types"
+import { useTone } from "../composables/tone"
+import { submissionTimeText } from "../utils"
+import FlowchartState from "./FlowchartState.vue"
+import UserName from "./UserName.vue"
+
+/**
+ * 流程图模式的右栏：左边画出来的图，右边四项评分和建议。原来要点编号再开一个
+ * 1000px 宽的弹框（FlowchartScoreDetail），翻全班的图时一样是「开 → 关 → 开」。
+ */
+const props = defineProps<{
+  row: FlowchartSubmissionListItem
+  teacher: boolean
+  position: { index: number; count: number } | null
+  /** 手机上的整屏详情：头部折行、图和评分上下排、不提方向键 */
+  narrow?: boolean
+}>()
+
+const emit = defineEmits<{
+  filterUser: [username: string]
+  filterProblem: [displayId: string]
+  openProblem: [row: FlowchartSubmissionListItem]
+  retry: [id: string]
+}>()
+
+const theme = useThemeVars()
+const tone = useTone()
+const { renderError, renderFlowchart } = useMermaid()
+
+const detail = ref<FlowchartSubmission | null>(null)
+const loading = ref(false)
+const failed = ref(false)
+const cache = new Map<string, FlowchartSubmission>()
+
+const graph = useTemplateRef<HTMLElement>("graph")
+const bigGraph = useTemplateRef<HTMLElement>("bigGraph")
+const bigOpen = ref(false)
+
+const evaluating = computed(
+  () =>
+    props.row.status === FlowchartSubmissionStatus.PENDING ||
+    props.row.status === FlowchartSubmissionStatus.PROCESSING,
+)
+
+async function load() {
+  const row = props.row
+  failed.value = false
+  bigOpen.value = false
+  if (!row.showLink) {
+    detail.value = null
+    return
+  }
+  const key = `${row.id}:${row.status}`
+  let res = cache.get(key)
+  if (!res) {
+    loading.value = true
+    try {
+      res = await getFlowchartSubmission(row.id)
+      if (!evaluating.value) cache.set(key, res)
+    } catch {
+      if (props.row.id === row.id) failed.value = true
+      return
+    } finally {
+      if (props.row.id === row.id) loading.value = false
+    }
+  }
+  if (props.row.id !== row.id) return
+  detail.value = res
+  await nextTick()
+  await renderFlowchart(graph.value, res.mermaidCode)
+}
+
+watch(() => [props.row.id, props.row.status, props.row.showLink] as const, load, {
+  immediate: true,
+})
+
+watch(bigOpen, async (open) => {
+  if (!open || !detail.value) return
+  await nextTick()
+  await renderFlowchart(bigGraph.value, detail.value.mermaidCode)
+})
+
+const shown = computed(() => (detail.value?.id === props.row.id ? detail.value : null))
+
+/**
+ * 评分项明细。内容是 AI 模型原样吐出的 JSON，后端不校验形状，只能按约定断言，
+ * 字段缺失时用 0 / 空串兜底。jsonb 不保留键序，按固定顺序排（逻辑正确性在最前）
+ */
+const criteria = computed(() => {
+  const raw = shown.value?.aiCriteriaDetails ?? {}
+  const parsed = Object.fromEntries(
+    Object.entries(raw).map(([key, value]) => {
+      const item = (value ?? {}) as Partial<{ score: number; max: number; comment: string }>
+      return [key, { score: item.score ?? 0, max: item.max ?? 0, comment: item.comment ?? "" }]
+    }),
+  )
+  return sortFlowchartCriteria(parsed)
+})
+
+function barColor(score: number, max: number) {
+  const pct = max ? score / max : 0
+  if (pct >= 0.8) return tone("success").solid
+  if (pct >= 0.6) return tone("info").solid
+  if (pct >= 0.4) return tone("warning").solid
+  return tone("error").solid
+}
+
+const suggestions = computed(() =>
+  (shown.value?.aiSuggestions ?? "")
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean),
+)
+
+const canRetry = computed(
+  () =>
+    props.teacher &&
+    (props.row.status === FlowchartSubmissionStatus.COMPLETED ||
+      props.row.status === FlowchartSubmissionStatus.FAILED),
+)
+</script>
+
+<template>
+  <section class="pane" :class="{ narrow }">
+    <div class="head">
+      <div class="who">
+        <UserName :username="row.username" />
+        <button v-if="teacher" class="filter-pill" @click="emit('filterUser', row.username)">
+          <Icon icon="ph:funnel-simple-bold" :width="11" />只看他
+        </button>
+      </div>
+      <span class="dot">·</span>
+      <a class="problem" href="#" @click.prevent="emit('openProblem', row)">
+        <span class="problem-id">{{ row.problemDisplayId }}</span>
+        {{ row.problemTitle }}
+      </a>
+      <button
+        v-if="teacher"
+        class="filter-pill"
+        @click="emit('filterProblem', row.problemDisplayId)"
+      >
+        <Icon icon="ph:funnel-simple-bold" :width="11" />只看这题
+      </button>
+      <div class="spacer"></div>
+      <n-button
+        v-if="shown && !renderError && shown.mermaidCode"
+        size="small"
+        @click="bigOpen = true"
+      >
+        <template #icon><Icon icon="ph:corners-out" /></template>
+        查看大图
+      </n-button>
+      <n-button v-if="teacher" size="small" :disabled="!canRetry" @click="emit('retry', row.id)">
+        <template #icon><Icon icon="ph:arrow-clockwise" /></template>
+        重新评分
+      </n-button>
+    </div>
+
+    <div class="meta">
+      <FlowchartState :status="row.status" :grade="row.aiGrade" :score="row.aiScore" />
+      <span>{{ submissionTimeText(row.createTime, true) }}</span>
+      <span v-if="row.processingTime">评分用时 {{ row.processingTime.toFixed(1) }} 秒</span>
+    </div>
+
+    <div v-if="!row.showLink" class="locked">
+      <Icon icon="ph:lock-simple" :width="30" class="lock-icon" />
+      <span class="locked-title">别人画的流程图看不到</span>
+    </div>
+    <div v-else class="body">
+      <div class="graph-box">
+        <n-alert v-if="renderError" type="error" title="流程图画不出来">
+          {{ renderError }}
+        </n-alert>
+        <div v-show="!renderError" ref="graph" class="graph"></div>
+        <n-spin v-if="loading && !shown" size="small" />
+        <span v-if="failed" class="muted"
+          >没拉下来，<a href="#" @click.prevent="load">再试一次</a></span
+        >
+      </div>
+      <div class="score-box">
+        <template v-if="evaluating">
+          <n-spin size="small" />
+          <span class="muted">AI 正在评分，一般几秒钟</span>
+        </template>
+        <template v-else-if="row.status === FlowchartSubmissionStatus.FAILED">
+          <span class="muted">这次评分失败了{{ teacher ? "，可以点「重新评分」" : "" }}</span>
+        </template>
+        <template v-else-if="shown">
+          <div v-for="[name, item] in criteria" :key="name" class="crit">
+            <div class="crit-head">
+              <b>{{ name }}</b>
+              <div class="spacer"></div>
+              <span class="num">{{ item.score }} / {{ item.max }}</span>
+            </div>
+            <div class="bar">
+              <div
+                class="bar-fill"
+                :style="{
+                  width: `${item.max ? Math.min(100, (item.score / item.max) * 100) : 0}%`,
+                  background: barColor(item.score, item.max),
+                }"
+              ></div>
+            </div>
+            <div v-if="item.comment" class="muted small">{{ item.comment }}</div>
+          </div>
+          <div v-if="shown.aiFeedback" class="note">{{ shown.aiFeedback }}</div>
+          <div v-if="suggestions.length" class="note">
+            <b>改进建议：</b>
+            <div v-for="(line, i) in suggestions" :key="i">{{ line }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="!narrow" class="foot">
+      <span class="keys"><kbd>↑</kbd><kbd>↓</kbd></span>
+      <span>换上一张 / 下一张</span>
+      <div class="spacer"></div>
+      <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
+    </div>
+
+    <n-modal v-model:show="bigOpen" preset="card" title="流程图" style="width: 90vw">
+      <div ref="bigGraph" class="big-graph"></div>
+    </n-modal>
+  </section>
+</template>
+
+<style scoped>
+.pane {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 14px 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: v-bind("theme.bodyColor");
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  font-size: 15px;
+}
+
+.narrow {
+  padding: 12px 14px;
+  overflow-y: auto;
+}
+
+.narrow .head {
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+
+.narrow .head .spacer {
+  flex-basis: 100%;
+}
+
+.narrow .body {
+  flex-direction: column;
+  flex: none;
+}
+
+.narrow .graph-box {
+  flex: none;
+  height: 320px;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.dot,
+.problem-id,
+.muted {
+  color: v-bind("theme.textColor3");
+}
+
+.problem {
+  color: v-bind("theme.textColor1");
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-pill {
+  flex: none;
+  height: 22px;
+  padding: 0 7px;
+  border: 1px solid v-bind("tone('success').background");
+  border-radius: 11px;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: v-bind("tone('success').color");
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.spacer {
+  flex: 1 1 0;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+}
+
+.body {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  gap: 12px;
+}
+
+.graph-box,
+.score-box,
+.locked {
+  border: 1px solid v-bind("theme.dividerColor");
+  border-radius: 6px;
+  background: v-bind("theme.cardColor");
+}
+
+.graph-box {
+  flex: 0 0 42%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.graph {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.graph :deep(svg) {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.score-box {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: auto;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.crit {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+}
+
+.crit-head {
+  display: flex;
+  align-items: center;
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+}
+
+.bar {
+  height: 6px;
+  border-radius: 3px;
+  background: v-bind("theme.dividerColor");
+}
+
+.bar-fill {
+  height: 6px;
+  border-radius: 3px;
+}
+
+.small {
+  font-size: 12px;
+}
+
+.note {
+  font-size: 13px;
+  line-height: 1.6;
+  border-top: 1px solid v-bind("theme.dividerColor");
+  padding-top: 10px;
+}
+
+.locked {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-style: dashed;
+}
+
+.lock-icon {
+  color: v-bind("theme.textColor3");
+  opacity: 0.7;
+}
+
+.locked-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.keys {
+  display: inline-flex;
+  gap: 3px;
+}
+
+kbd {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 3px;
+  background: v-bind("theme.cardColor");
+  font: inherit;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.big-graph {
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+  max-height: 80vh;
+}
+</style>
diff --git a/apps/web/src/oj/submission/components/FlowchartState.vue b/apps/web/src/oj/submission/components/FlowchartState.vue
new file mode 100644
index 0000000..d116e32
--- /dev/null
+++ b/apps/web/src/oj/submission/components/FlowchartState.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { FlowchartSubmissionStatus } from "utils/types"
+import { useTone, type Tone } from "../composables/tone"
+
+/**
+ * 流程图提交在列表里的那个胶囊：评完的直接是「A 级 86 分」，没评完的是
+ * 排队中 / 评分中 / 评分失败。原来等级、分数、状态分三列，老师要横着对。
+ */
+const props = defineProps<{
+  status: number
+  grade: string | null
+  score: number | null
+}>()
+
+const tone = useTone()
+
+const GRADE_TONE: Record<string, Tone> = { S: "success", A: "info", B: "warning", C: "error" }
+
+const view = computed(() => {
+  if (props.status === FlowchartSubmissionStatus.COMPLETED && props.grade) {
+    return { tone: GRADE_TONE[props.grade] ?? "default", grade: props.grade, text: "" }
+  }
+  if (props.status === FlowchartSubmissionStatus.FAILED) {
+    return { tone: "error" as const, grade: "", text: "评分失败" }
+  }
+  if (props.status === FlowchartSubmissionStatus.PROCESSING) {
+    return { tone: "info" as const, grade: "", text: "评分中" }
+  }
+  return { tone: "default" as const, grade: "", text: "排队中" }
+})
+
+const colors = computed(() => tone(view.value.tone))
+</script>
+
+<template>
+  <span class="pill" :style="{ color: colors.color, background: colors.background }">
+    <template v-if="view.grade">
+      <b>{{ view.grade }} 级</b><span class="score">{{ score ?? 0 }} 分</span>
+    </template>
+    <template v-else>{{ view.text }}</template>
+  </span>
+</template>
+
+<style scoped>
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex: none;
+}
+
+.score {
+  font-weight: 400;
+}
+</style>
diff --git a/apps/web/src/oj/submission/components/StatusPill.vue b/apps/web/src/oj/submission/components/StatusPill.vue
new file mode 100644
index 0000000..a977799
--- /dev/null
+++ b/apps/web/src/oj/submission/components/StatusPill.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
+import type { SUBMISSION_RESULT } from "utils/types"
+import { useTone, type Tone } from "../composables/tone"
+
+const props = defineProps<{ result: SUBMISSION_RESULT }>()
+
+const tone = useTone()
+
+/**
+ * 判题结果的胶囊。颜色按「学生该怎么想」分三档，而不是照搬 JUDGE_STATUS 的 type：
+ * 红 = 答案不对（答案错误、超时、超内存、系统错误），橙 = 程序本身有问题
+ * （编译失败、运行时错误）或对了一半（部分正确、语法未通过），蓝 = 还在判。
+ */
+const TONE: Partial<Record<number, Tone>> = {
+  [SubmissionStatus.accepted]: "success",
+  [SubmissionStatus.wrong_answer]: "error",
+  [SubmissionStatus.cpu_time_limit_exceeded]: "error",
+  [SubmissionStatus.real_time_limit_exceeded]: "error",
+  [SubmissionStatus.memory_limit_exceeded]: "error",
+  [SubmissionStatus.system_error]: "error",
+  [SubmissionStatus.compile_error]: "warning",
+  [SubmissionStatus.runtime_error]: "warning",
+  [SubmissionStatus.partial_accepted]: "warning",
+  [SubmissionStatus.ast_check_failed]: "warning",
+  [SubmissionStatus.pending]: "info",
+  [SubmissionStatus.judging]: "info",
+  [SubmissionStatus.submitting]: "info",
+}
+
+const judging = computed(
+  () =>
+    props.result === SubmissionStatus.pending ||
+    props.result === SubmissionStatus.judging ||
+    props.result === SubmissionStatus.submitting,
+)
+
+const icon = computed(() => {
+  const r = props.result
+  if (r === SubmissionStatus.accepted || r === SubmissionStatus.ast_check_failed) {
+    return "ph:check-bold"
+  }
+  if (
+    r === SubmissionStatus.compile_error ||
+    r === SubmissionStatus.runtime_error ||
+    r === SubmissionStatus.partial_accepted
+  ) {
+    return "ph:warning-bold"
+  }
+  if (
+    r === SubmissionStatus.cpu_time_limit_exceeded ||
+    r === SubmissionStatus.real_time_limit_exceeded
+  ) {
+    return "ph:clock-bold"
+  }
+  return "ph:x-bold"
+})
+
+const colors = computed(() => tone(TONE[props.result] ?? "default"))
+</script>
+
+<template>
+  <span
+    class="pill"
+    :style="{ color: colors.color, background: colors.background }"
+    :title="JUDGE_STATUS[result]?.title"
+  >
+    <span v-if="judging" class="spinner" :style="{ borderTopColor: colors.color }"></span>
+    <Icon v-else :icon="icon" :width="12" />
+    {{ JUDGE_STATUS[result]?.name ?? "未知状态" }}
+  </span>
+</template>
+
+<style scoped>
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 9px 0 7px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex: none;
+}
+
+.spinner {
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid rgba(128, 128, 128, 0.35);
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/apps/web/src/oj/submission/components/SubmissionPane.vue b/apps/web/src/oj/submission/components/SubmissionPane.vue
new file mode 100644
index 0000000..b4edc23
--- /dev/null
+++ b/apps/web/src/oj/submission/components/SubmissionPane.vue
@@ -0,0 +1,629 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { getSubmission } from "oj/api"
+import { explainPythonCompileError } from "oj/problem/utils/pythonError"
+import { explainRuntimeError } from "oj/problem/utils/runtimeError"
+import { useUserStore } from "shared/store/user"
+import {
+  JUDGE_STATUS,
+  LANGUAGE_FORMAT_VALUE,
+  LANGUAGE_SHOW_VALUE,
+  SubmissionStatus,
+} from "utils/constants"
+import {
+  submissionCaseResults,
+  submissionMemoryFormat,
+  submissionTimeFormat,
+} from "utils/functions"
+import type { Submission, SubmissionListItem } from "utils/types"
+import { useCopySubmission } from "../composables/copySubmission"
+import { useTone } from "../composables/tone"
+import { submissionTimeText } from "../utils"
+import CodeView from "./CodeView.vue"
+import StatusPill from "./StatusPill.vue"
+import UserName from "./UserName.vue"
+
+/**
+ * 提交列表的右栏：选中那一条的代码和结果（设计稿「提交列表重设计 · 定稿」）。
+ * 原来要点开一个弹框看，老师翻全班代码时是「点开 → 看 → 关掉 → 点下一行」。
+ */
+const props = defineProps<{
+  row: SubmissionListItem
+  /** 老师那套：「只看他」「只看这题」、重新判题、逐个测试点 */
+  teacher: boolean
+  /** 在比赛的提交列表里（不能重判，题目链接走比赛） */
+  contest: boolean
+  /** 右下角的「本页第 i / n 条」 */
+  position: { index: number; count: number } | null
+  /** 手机上的整屏详情：头部折行、不提方向键 */
+  narrow?: boolean
+}>()
+
+const emit = defineEmits<{
+  filterUser: [username: string]
+  filterProblem: [displayId: string]
+  openProblem: [row: SubmissionListItem]
+  rejudge: [id: string]
+}>()
+
+const userStore = useUserStore()
+const theme = useThemeVars()
+// 暗色下测试点方块的底色是主题色本身（浅），白字就看不清了
+const isDark = useDark()
+const tone = useTone()
+const { copyToCat, copyToProblem } = useCopySubmission()
+
+/**
+ * 详情按「id + 结果」缓存：同一条判完之前结果会变，变了要重拉；判完的代码不会再变，
+ * 老师在几行之间来回按方向键时不用每次都等网络。
+ */
+const cache = new Map<string, Submission>()
+const detail = ref<Submission | null>(null)
+const loading = ref(false)
+const failed = ref(false)
+
+const judging = computed(
+  () =>
+    props.row.result === SubmissionStatus.pending || props.row.result === SubmissionStatus.judging,
+)
+
+async function load() {
+  const row = props.row
+  failed.value = false
+  if (!row.showLink) {
+    detail.value = null
+    return
+  }
+  const key = `${row.id}:${row.result}`
+  const hit = cache.get(key)
+  if (hit) {
+    detail.value = hit
+    return
+  }
+  // 换行时先别清空：接口一般几十毫秒就回来，清了会闪一下白
+  loading.value = true
+  try {
+    const res = await getSubmission(row.id)
+    if (props.row.id !== row.id) return
+    if (!judging.value) cache.set(key, res)
+    detail.value = res
+  } catch {
+    if (props.row.id === row.id) failed.value = true
+  } finally {
+    if (props.row.id === row.id) loading.value = false
+  }
+}
+
+watch(() => [props.row.id, props.row.result, props.row.showLink] as const, load, {
+  immediate: true,
+})
+
+const shown = computed(() => (detail.value?.id === props.row.id ? detail.value : null))
+
+const locked = computed(() => {
+  if (props.row.showLink) return null
+  if (!userStore.isAuthed) return "anon" as const
+  if (props.row.userId === userStore.user?.id) return "problemset" as const
+  return "others" as const
+})
+
+/** 逐个测试点。只有管理员拿得到 info（每个点带 output_md5），学生只有 caseSummary 两个数 */
+const cases = computed(() => submissionCaseResults(shown.value?.info))
+
+function stripJudgePath(text: string) {
+  return text.replace(/\/judger\/run\/[^/"]+\//g, "")
+}
+
+/**
+ * 编译失败 / 运行时错误说清楚「错在第几行、为什么」—— 翻译表和题目页结果区同一份
+ * （pythonError.ts / runtimeError.ts）。原来的看代码弹框压根不显示报错。
+ */
+const explain = computed(() => {
+  const s = shown.value
+  if (!s) return null
+  const info = s.statisticInfo
+  const err = info?.err_info ? stripJudgePath(info.err_info) : ""
+  switch (s.result) {
+    case SubmissionStatus.compile_error: {
+      const ex = s.language === "Python" && err ? explainPythonCompileError(err) : null
+      if (ex) return { line: ex.line, text: ex.message, raw: err }
+      return { line: null, text: "编译没通过，看看下面的原始报错。", raw: err }
+    }
+    case SubmissionStatus.runtime_error: {
+      const rt = info?.runtime_error
+      if (rt) return { line: rt.line ?? null, text: explainRuntimeError(rt), raw: err }
+      return { line: null, text: "程序运行到一半出错，停下来了。", raw: err }
+    }
+    case SubmissionStatus.cpu_time_limit_exceeded:
+    case SubmissionStatus.real_time_limit_exceeded:
+      return {
+        line: null,
+        text: "程序跑了太久还没结束：可能有死循环，或者在等一个没有给的输入。",
+        raw: "",
+      }
+    case SubmissionStatus.memory_limit_exceeded:
+      return { line: null, text: "程序占的内存太多了。", raw: "" }
+    case SubmissionStatus.system_error:
+      return { line: null, text: "判题机出错了，不是代码的问题。", raw: err }
+    case SubmissionStatus.wrong_answer: {
+      const check = info?.sample_check
+      if (!check) return null
+      const text = check.passed
+        ? "题目里的例子都对，错在没公开的测试点上。"
+        : `在例子 ${(check.index ?? 0) + 1} 上就错了。`
+      return { line: null, text, raw: "" }
+    }
+    case SubmissionStatus.ast_check_failed: {
+      const failedRules = (info?.ast_results ?? []).filter((rule) => !rule.passed)
+      const text = failedRules.length
+        ? `答案对了，但没按要求写：${failedRules.map((rule) => rule.description).join("；")}`
+        : "答案对了，但没按题目要求的写法写。"
+      return { line: null, text, raw: "" }
+    }
+    default:
+      return null
+  }
+})
+
+const explainTone = computed(() => {
+  const r = props.row.result
+  return tone(
+    r === SubmissionStatus.compile_error ||
+      r === SubmissionStatus.runtime_error ||
+      r === SubmissionStatus.ast_check_failed
+      ? "warning"
+      : r === SubmissionStatus.system_error
+        ? "default"
+        : "error",
+  )
+})
+
+const rawOpen = ref(false)
+watch(
+  () => props.row.id,
+  () => (rawOpen.value = false),
+)
+
+const failedCaseText = computed(() => {
+  const bad = cases.value
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => item.result !== SubmissionStatus.accepted)
+  if (!bad.length) return ""
+  const names = bad.map(({ index }) => index + 1).join("、")
+  const kinds = new Set(bad.map(({ item }) => JUDGE_STATUS[item.result]?.name ?? ""))
+  return kinds.size === 1 ? `测试点 ${names} ${[...kinds][0]}` : `测试点 ${names} 没通过`
+})
+
+function caseColor(result: number) {
+  if (result === SubmissionStatus.accepted) return tone("success").solid
+  if (result === SubmissionStatus.runtime_error) return tone("warning").solid
+  return tone("error").solid
+}
+
+const canRejudge = computed(() => props.teacher && !props.contest)
+const moreOptions = computed(() => [
+  { label: "复制回到题目", key: "problem" },
+  ...(shown.value?.language !== "SQL" ? [{ label: "复制到自测猫", key: "cat" }] : []),
+])
+
+function handleMore(key: string) {
+  if (!shown.value) return
+  if (key === "problem") copyToProblem(shown.value)
+  else copyToCat(shown.value)
+}
+
+function openStandalone() {
+  window.open("/submission/" + props.row.id, "_blank")
+}
+</script>
+
+<template>
+  <section class="pane" :class="{ narrow }">
+    <div class="head">
+      <div class="who">
+        <UserName :username="row.username" :muted="!!locked && locked !== 'problemset'" />
+        <button
+          v-if="teacher"
+          class="filter-pill"
+          title="只看这个人的提交"
+          @click="emit('filterUser', row.username)"
+        >
+          <Icon icon="ph:funnel-simple-bold" :width="11" />只看他
+        </button>
+      </div>
+      <span class="dot">·</span>
+      <a class="problem" href="#" @click.prevent="emit('openProblem', row)">
+        <span class="problem-id">{{ row.problemDisplayId }}</span>
+        {{ row.problemTitle }}
+      </a>
+      <button
+        v-if="teacher"
+        class="filter-pill"
+        title="只看这道题的提交"
+        @click="emit('filterProblem', row.problemDisplayId)"
+      >
+        <Icon icon="ph:funnel-simple-bold" :width="11" />只看这题
+      </button>
+      <a
+        v-if="row.problemSet"
+        class="problemset"
+        :href="'/problemset/' + row.problemSet.id"
+        target="_blank"
+        :title="'从题单「' + row.problemSet.title + '」交的'"
+      >
+        题单 {{ row.problemSet.title }}
+      </a>
+      <div class="spacer"></div>
+      <template v-if="shown">
+        <template v-if="teacher">
+          <n-button v-if="canRejudge" size="small" @click="emit('rejudge', row.id)">
+            <template #icon><Icon icon="ph:arrow-clockwise" /></template>
+            重新判题
+          </n-button>
+          <n-button
+            size="small"
+            quaternary
+            title="新页面打开（有测试点明细）"
+            aria-label="新页面打开"
+            @click="openStandalone"
+          >
+            <template #icon><Icon icon="ph:arrow-square-out" /></template>
+          </n-button>
+          <n-dropdown :options="moreOptions" trigger="click" @select="handleMore">
+            <n-button size="small" quaternary aria-label="更多" title="复制回到题目、复制到自测猫">
+              <template #icon><Icon icon="ph:dots-three-bold" /></template>
+            </n-button>
+          </n-dropdown>
+        </template>
+        <template v-else>
+          <n-button size="small" type="primary" @click="copyToProblem(shown)">
+            <template #icon><Icon icon="ph:arrow-u-up-left" /></template>
+            复制回到题目
+          </n-button>
+          <n-button v-if="shown.language !== 'SQL'" size="small" @click="copyToCat(shown)">
+            复制到自测猫
+          </n-button>
+          <n-button
+            size="small"
+            quaternary
+            title="新页面打开"
+            aria-label="新页面打开"
+            @click="openStandalone"
+          >
+            <template #icon><Icon icon="ph:arrow-square-out" /></template>
+          </n-button>
+        </template>
+      </template>
+    </div>
+
+    <div class="meta">
+      <StatusPill :result="row.result" />
+      <span v-if="teacher && cases.length" class="cases">
+        <span
+          v-for="(item, index) in cases"
+          :key="index"
+          class="case"
+          :style="{ background: caseColor(item.result), color: isDark ? '#18181c' : '#ffffff' }"
+          :title="`测试点 ${index + 1}：${JUDGE_STATUS[item.result]?.name ?? ''}`"
+        >
+          {{ index + 1 }}
+        </span>
+        <span v-if="failedCaseText" class="muted">{{ failedCaseText }}</span>
+      </span>
+      <span
+        v-else-if="row.caseSummary && row.caseSummary.passed < row.caseSummary.total"
+        class="partial"
+        :style="{ color: tone('error').color }"
+      >
+        通过 {{ row.caseSummary.passed }}/{{ row.caseSummary.total }} 个测试点
+      </span>
+      <span>{{ LANGUAGE_SHOW_VALUE[row.language] }}</span>
+      <span>{{ submissionTimeText(row.createTime, true) }}</span>
+      <template v-if="row.statisticInfo?.time_cost !== undefined">
+        <span>耗时 {{ submissionTimeFormat(row.statisticInfo.time_cost) }}</span>
+        <span>内存 {{ submissionMemoryFormat(row.statisticInfo.memory_cost) }}</span>
+      </template>
+    </div>
+
+    <!-- 看不到代码的三种情况 -->
+    <div v-if="locked" class="locked">
+      <Icon icon="ph:lock-simple" :width="30" class="lock-icon" />
+      <template v-if="locked === 'others'">
+        <span class="locked-title">别人的代码看不到</span>
+        <span class="muted">自己动手做出来，才是自己的。</span>
+        <n-button type="primary" @click="emit('openProblem', row)">
+          去做 {{ row.problemDisplayId }} {{ row.problemTitle }}
+        </n-button>
+      </template>
+      <template v-else-if="locked === 'problemset'">
+        <span class="locked-title">这道题在你加入的题单里</span>
+        <span class="muted">加入题单之前交的代码先藏起来，在题单里做完这道题就能看到。</span>
+      </template>
+      <template v-else>
+        <span class="locked-title">登录之后才能看自己的代码</span>
+        <span class="muted">谁交了什么题、对没对，不登录也能看。</span>
+      </template>
+    </div>
+
+    <template v-else>
+      <div
+        v-if="explain"
+        class="explain"
+        :style="{ background: explainTone.background, borderColor: explainTone.background }"
+      >
+        <div class="explain-line">
+          <b :style="{ color: explainTone.color }">
+            <template v-if="explain.line">第 {{ explain.line }} 行：</template>{{ explain.text }}
+          </b>
+          <div class="spacer"></div>
+          <a v-if="explain.raw" href="#" class="raw-toggle" @click.prevent="rawOpen = !rawOpen">
+            原始报错
+            <Icon :icon="rawOpen ? 'ph:caret-up-bold' : 'ph:caret-down-bold'" :width="11" />
+          </a>
+        </div>
+        <pre v-if="rawOpen && explain.raw" class="raw">{{ explain.raw }}</pre>
+      </div>
+      <CodeView
+        v-if="shown"
+        :code="shown.code"
+        :language="LANGUAGE_FORMAT_VALUE[shown.language]"
+        :mark-line="explain?.line ?? null"
+      />
+      <div v-else class="placeholder">
+        <n-spin v-if="loading" size="small" />
+        <span v-else-if="failed" class="muted">
+          代码没拉下来，
+          <a href="#" @click.prevent="load">再试一次</a>
+        </span>
+      </div>
+    </template>
+
+    <div v-if="!narrow" class="foot">
+      <span class="keys"><kbd>↑</kbd><kbd>↓</kbd></span>
+      <span>
+        {{
+          teacher
+            ? "换上一条 / 下一条，到本页头尾自动翻页"
+            : "换上一条 / 下一条（只在能看代码的提交之间走）"
+        }}
+      </span>
+      <div class="spacer"></div>
+      <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.pane {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 14px 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: v-bind("theme.bodyColor");
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  font-size: 15px;
+  min-width: 0;
+}
+
+.narrow {
+  padding: 12px 14px;
+}
+
+.narrow .head {
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+
+.narrow .head .spacer {
+  flex-basis: 100%;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.dot {
+  color: v-bind("theme.textColor3");
+}
+
+.problem {
+  color: v-bind("theme.textColor1");
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.problem:hover {
+  color: v-bind("theme.primaryColor");
+}
+
+.problem-id {
+  color: v-bind("theme.textColor3");
+}
+
+.problemset {
+  flex: none;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 10px;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: v-bind("tone('info').color");
+  background: v-bind("tone('info').background");
+}
+
+.filter-pill {
+  flex: none;
+  height: 22px;
+  padding: 0 7px;
+  border: 1px solid v-bind("tone('success').background");
+  border-radius: 11px;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: v-bind("tone('success').color");
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.filter-pill:hover {
+  background: v-bind("tone('success').background");
+}
+
+.spacer {
+  flex: 1 1 0;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+  white-space: nowrap;
+  flex-wrap: wrap;
+  row-gap: 6px;
+}
+
+.cases {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.case {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cases .muted {
+  margin-left: 4px;
+}
+
+.partial {
+  font-weight: 600;
+}
+
+.muted {
+  color: v-bind("theme.textColor3");
+}
+
+.explain {
+  padding: 10px 14px;
+  border-radius: 6px;
+  border: 1px solid;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.explain-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.6;
+}
+
+.raw-toggle {
+  flex: none;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: v-bind("theme.textColor3");
+  text-decoration: none;
+}
+
+.raw {
+  margin: 0;
+  max-height: 140px;
+  overflow: auto;
+  font-family: Consolas, Monaco, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.locked,
+.placeholder {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-align: center;
+  padding: 16px;
+  border-radius: 6px;
+}
+
+.locked {
+  border: 1px dashed v-bind("theme.borderColor");
+  background: v-bind("theme.cardColor");
+}
+
+.lock-icon {
+  color: v-bind("theme.textColor3");
+  opacity: 0.7;
+}
+
+.locked-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.keys {
+  display: inline-flex;
+  gap: 3px;
+}
+
+kbd {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 3px;
+  background: v-bind("theme.cardColor");
+  font: inherit;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/apps/web/src/oj/submission/components/UserName.vue b/apps/web/src/oj/submission/components/UserName.vue
new file mode 100644
index 0000000..35bcb0e
--- /dev/null
+++ b/apps/web/src/oj/submission/components/UserName.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import { USERNAME_CLASS_RE } from "utils/constants"
+
+/**
+ * 用户名：班级前缀（`ks253`）淡一档，名字加粗 —— 一个班的人前缀都一样，
+ * 老师要认的是后面那段。`muted` 用在学生看别人的那几行（看得到结果、看不到代码）。
+ */
+const props = defineProps<{ username: string; muted?: boolean }>()
+
+const theme = useThemeVars()
+
+const parts = computed(() => {
+  const match = props.username.match(USERNAME_CLASS_RE)
+  if (!match) return { prefix: "", name: props.username }
+  return { prefix: match[0], name: props.username.slice(match[0].length) || match[0] }
+})
+</script>
+
+<template>
+  <span class="user" :class="{ muted }" :title="username">
+    <span v-if="parts.prefix" class="prefix">{{ parts.prefix }}</span>
+    <span class="name">{{ parts.name }}</span>
+  </span>
+</template>
+
+<style scoped>
+.user {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.prefix {
+  color: v-bind("theme.textColor3");
+}
+
+.name {
+  font-weight: 600;
+  color: v-bind("theme.textColor1");
+}
+
+.muted .name {
+  font-weight: 400;
+  color: v-bind("theme.textColor2");
+}
+</style>
diff --git a/apps/web/src/oj/submission/composables/copySubmission.ts b/apps/web/src/oj/submission/composables/copySubmission.ts
new file mode 100644
index 0000000..f513505
--- /dev/null
+++ b/apps/web/src/oj/submission/composables/copySubmission.ts
@@ -0,0 +1,60 @@
+import { LANGUAGE_FORMAT_VALUE } from "utils/constants"
+import { compressToBase64 } from "utils/functions"
+import type { Submission } from "utils/types"
+import { useCodeStore } from "oj/store/code"
+import storage from "utils/storage"
+
+/**
+ * 「复制到自测猫」「复制回到题目」。提交列表的右栏和独立的 /submission/:id 页面共用。
+ */
+export function useCopySubmission() {
+  const route = useRoute()
+  const router = useRouter()
+  const codeStore = useCodeStore()
+
+  function copyToCat(submission: Submission) {
+    const data = {
+      lang: LANGUAGE_FORMAT_VALUE[submission.language],
+      code: submission.code,
+      input: "",
+    }
+    const base64 = compressToBase64(JSON.stringify(data))
+    const url = `${import.meta.env.PUBLIC_CODE_URL}?share=${encodeURIComponent(base64)}`
+    window.open(url, "_blank")
+  }
+
+  /**
+   * 编辑器的 storageKey 用 display id（problem._id），不是 submission.problemId
+   * （内部数字 id）。**不能只靠调用方传的题号** —— 独立的 /submission/:id 路由
+   * 只有提交 id，原来会一路带进 router.push 抛 `Missing required param "problemID"`。
+   * 响应里的 problemDisplayId 就是干这个的。
+   *
+   * 比赛提交的 contestId 只下发给管理员；学生在比赛里复制，靠的是当前路由上的比赛 id。
+   */
+  function copyToProblem(submission: Submission) {
+    const { code, language } = submission
+    const problemID = submission.problemDisplayId
+    const contestId =
+      submission.contestId ?? (route.params.contestID ? Number(route.params.contestID) : null)
+    const storageKey = `problem_${problemID}_contest_${contestId || null}_lang_${language}`
+    storage.set(storageKey, code)
+    // 设置语言 + 代码：localStorage 覆盖全新挂载的编辑器，
+    // setCode 覆盖已挂载（同页 modal）的编辑器
+    codeStore.setLanguage(language)
+    codeStore.setCode(code)
+
+    const problemSetId = (route.params.problemSetId as string) ?? ""
+    if (contestId) {
+      router.push({
+        name: "contest problem",
+        params: { contestID: String(contestId), problemID },
+      })
+    } else if (problemSetId) {
+      router.push({ name: "problemset problem", params: { problemSetId, problemID } })
+    } else {
+      router.push({ name: "problem", params: { problemID } })
+    }
+  }
+
+  return { copyToCat, copyToProblem }
+}
diff --git a/apps/web/src/oj/submission/composables/tone.ts b/apps/web/src/oj/submission/composables/tone.ts
new file mode 100644
index 0000000..f24b37a
--- /dev/null
+++ b/apps/web/src/oj/submission/composables/tone.ts
@@ -0,0 +1,50 @@
+import { useThemeVars } from "naive-ui"
+import { useDark } from "@vueuse/core"
+
+export type Tone = "success" | "error" | "warning" | "info" | "default"
+
+function rgba(hex: string, alpha: number) {
+  const value = hex.replace("#", "")
+  const full =
+    value.length === 3
+      ? value
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : value.slice(0, 6)
+  const n = parseInt(full, 16)
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`
+}
+
+/**
+ * 提交列表里各种小胶囊的配色：浅底 + 深一档的字（设计稿「提交列表重设计 · 定稿」）。
+ * 从主题色里取，暗色下字换成主题色本身（深色字放在暗底上看不清）。
+ * 不用 color-mix：Chrome 105 没有（111 才有），机房有一部分还是 105。
+ */
+export function useTone() {
+  const theme = useThemeVars()
+  const isDark = useDark()
+
+  return function tone(kind: Tone) {
+    const t = theme.value
+    const base = {
+      success: t.successColor,
+      error: t.errorColor,
+      warning: t.warningColor,
+      info: t.infoColor,
+      default: t.textColor3,
+    }[kind]
+    const pressed = {
+      success: t.successColorPressed,
+      error: t.errorColorPressed,
+      warning: t.warningColorPressed,
+      info: t.infoColorPressed,
+      default: t.textColor2,
+    }[kind]
+    return {
+      color: isDark.value ? base : pressed,
+      background: kind === "default" ? t.actionColor : rgba(base, isDark.value ? 0.16 : 0.12),
+      solid: base,
+    }
+  }
+}
diff --git a/apps/web/src/oj/submission/detail.vue b/apps/web/src/oj/submission/detail.vue
index 5cba86c..b9664bf 100644
--- a/apps/web/src/oj/submission/detail.vue
+++ b/apps/web/src/oj/submission/detail.vue
@@ -8,13 +8,11 @@ import {
   submissionMemoryFormat,
   submissionResultTitle,
   submissionTimeFormat,
-  compressToBase64,
 } from "utils/functions"
 import type { Submission } from "utils/types"
 import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { useCodeStore } from "oj/store/code"
-import storage from "utils/storage"
+import { useCopySubmission } from "./composables/copySubmission"
 
 const props = defineProps<{
   submissionID: string
@@ -26,10 +24,6 @@ const props = defineProps<{
 // 在弹框中使用时，父组件监听此事件关闭弹框，否则弹框会挡住已更新的编辑器
 const emit = defineEmits<{ copied: [] }>()
 
-const route = useRoute()
-const router = useRouter()
-const codeStore = useCodeStore()
-
 const { isMobile, isDesktop } = useBreakpoints()
 
 const submission = ref<Submission>()
@@ -69,51 +63,14 @@ const columns: DataTableColumn<JudgeCaseResult>[] = [
   },
 ]
 
+const { copyToCat: catCopy, copyToProblem: problemCopy } = useCopySubmission()
+
 function copyToCat() {
-  const lang = LANGUAGE_FORMAT_VALUE[submission.value!.language]
-  const data = {
-    lang,
-    code: submission.value!.code,
-    input: "",
-  }
-  const base64 = compressToBase64(JSON.stringify(data))
-  const url = `${import.meta.env.PUBLIC_CODE_URL}?share=${encodeURIComponent(base64)}`
-  window.open(url, "_blank")
+  catCopy(submission.value!)
 }
 
 function copyToProblem() {
-  const { code, language, contestId } = submission.value!
-  // 编辑器的 storageKey 用 display id（problem._id），不是 submission.problemId
-  // （内部数字 id）。**不能只靠 props.problemID** —— 独立的 /submission/:id 路由
-  // 只喂 submissionID，那个 prop 是 undefined，原来会一路带进 router.push 抛
-  // `Missing required param "problemID"`。响应里的 problemDisplayId 就是干这个的。
-  const problemID = props.problemID ?? submission.value!.problemDisplayId
-  const contestIDForKey = contestId || null
-  const storageKey = `problem_${problemID}_contest_${contestIDForKey}_lang_${language}`
-  storage.set(storageKey, code)
-  // 设置语言 + 代码：localStorage 覆盖全新挂载的编辑器，
-  // setCode 覆盖已挂载（同页 modal）的编辑器
-  codeStore.setLanguage(language)
-  codeStore.setCode(code)
-
-  const problemSetId = (route.params.problemSetId as string) ?? ""
-  if (contestId) {
-    router.push({
-      name: "contest problem",
-      params: { contestID: String(contestId), problemID },
-    })
-  } else if (problemSetId) {
-    router.push({
-      name: "problemset problem",
-      params: { problemSetId, problemID },
-    })
-  } else {
-    router.push({
-      name: "problem",
-      params: { problemID },
-    })
-  }
-
+  problemCopy(submission.value!)
   emit("copied")
 }
 
diff --git a/apps/web/src/oj/submission/list.vue b/apps/web/src/oj/submission/list.vue
index 83ffbf7..5bd768e 100644
--- a/apps/web/src/oj/submission/list.vue
+++ b/apps/web/src/oj/submission/list.vue
@@ -1,90 +1,110 @@
 <script setup lang="ts">
-import { errorCode } from "utils/api"
-import { NButton, NFlex, NTag, NText } from "naive-ui"
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
 import { useRouteQuery } from "@vueuse/router"
+import { errorCode } from "utils/api"
 import {
   adminRejudge,
+  getClassLesson,
   getFlowchartSubmissions,
   getSubmissions,
   getTodaySubmissionCount,
   retryFlowchartSubmission,
 } from "oj/api"
-import { parseTime } from "utils/functions"
-import type { Grade as GradeValue } from "utils/types"
-import type { FlowchartSubmissionListItem, LANGUAGE, SubmissionListItem } from "utils/types"
+import { useContestStore } from "oj/store/contest"
 import Pagination from "shared/components/Pagination.vue"
-import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { usePagination } from "shared/composables/pagination"
+import { useConfigStore } from "shared/store/config"
 import { useUserStore } from "shared/store/user"
-import { LANGUAGE_SHOW_VALUE } from "utils/constants"
+import { SubmissionStatus } from "utils/constants"
+import { parseTime } from "utils/functions"
+import type {
+  ClassLesson,
+  FlowchartSubmissionListItem,
+  LANGUAGE,
+  SubmissionListItem,
+} from "utils/types"
 import { FlowchartSubmissionStatus } from "utils/types"
+import FlowchartState from "./components/FlowchartState.vue"
+import StatusPill from "./components/StatusPill.vue"
+import UserName from "./components/UserName.vue"
+import { useTone } from "./composables/tone"
+import { classLabel, submissionClockText, submissionDayText } from "./utils"
 
-// 流程图提交的四种状态，列表里原来一列都没有 ——
-// 老师分不出「还在评」和「评失败了」，两种都只是分数栏空着
-const FLOWCHART_STATUS_TAG: Record<
-  number,
-  { text: string; type: "default" | "info" | "success" | "error" }
-> = {
-  [FlowchartSubmissionStatus.PENDING]: { text: "排队中", type: "default" },
-  [FlowchartSubmissionStatus.PROCESSING]: { text: "评分中", type: "info" },
-  [FlowchartSubmissionStatus.COMPLETED]: { text: "已完成", type: "success" },
-  [FlowchartSubmissionStatus.FAILED]: { text: "评分失败", type: "error" },
-}
-import ButtonWithSearch from "./components/ButtonWithSearch.vue"
-import SubmissionLink from "./components/SubmissionLink.vue"
-import Grade from "./components/Grade.vue"
-import FlowchartLink from "./components/FlowchartLink.vue"
+/**
+ * 提交列表（设计稿「提交列表重设计 · 定稿」）：左边列表、右边常驻选中那条的代码。
+ *
+ * 老师课上的三种用法 —— 一条条翻全班的代码、看某一个学生、看完成情况 —— 前两种在
+ * 这一页里做完：↑ ↓ 换条，右边跟着换，不再「点开弹框 → 关掉 → 点下一行」。
+ * 完成情况在课堂看板和「数据统计」里，这页不重复造一张表。
+ */
 
-// 下面四个组件只在默认关闭的 n-modal 里用，其中两个统计面板还只有老师看得见。
-// 静态 import 会把它们拖进本路由的关键路径——光 chart.js 就 197KB，进页面前必须先下完。
-// 改成异步后本路由增量下载从 675KB / 59 个文件降到 360KB 出头。
+// 右栏和两个统计弹框都不在关键路径上：右栏要等选中一条才有内容，弹框默认关着
+// （光 chart.js 就 197KB）
+const SubmissionPane = defineAsyncComponent(() => import("./components/SubmissionPane.vue"))
+const FlowchartPane = defineAsyncComponent(() => import("./components/FlowchartPane.vue"))
 const StatisticsPanel = defineAsyncComponent(() => import("shared/components/StatisticsPanel.vue"))
 const FlowchartStatisticsPanel = defineAsyncComponent(
   () => import("shared/components/FlowchartStatisticsPanel.vue"),
 )
 const TodayStatistics = defineAsyncComponent(() => import("./components/TodayStatistics.vue"))
-const SubmissionDetail = defineAsyncComponent(() => import("./detail.vue"))
-const FlowchartScoreDetail = defineAsyncComponent(
-  () => import("./components/FlowchartScoreDetail.vue"),
-)
 
 interface SubmissionQuery {
   username: string
+  className: string
   result: string
   myself: "0" | "1"
   problem: string
-  language: LANGUAGE | ""
+  language: LANGUAGE | "" | "Flowchart"
   today: "0" | "1"
 }
 
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
+const configStore = useConfigStore()
+const contestStore = useContestStore()
 const message = useMessage()
-
+const theme = useThemeVars()
+const tone = useTone()
 const { isMobile, isDesktop } = useBreakpoints()
 
+const inContest = computed(() => route.name === "contest submissions")
+const teacher = computed(() => userStore.isTeacherOrAbove)
+
+// 一节课一个班要交一百来条，每页 10 条得翻十几页；30 条配上右栏的方向键正好
+const { query, clearQuery } = usePagination<SubmissionQuery>(
+  {
+    username: useRouteQuery("username", "").value,
+    className: useRouteQuery("className", "").value,
+    result: useRouteQuery("result", "").value,
+    myself: useRouteQuery("myself", "0").value,
+    problem: useRouteQuery("problem", "").value,
+    language: useRouteQuery("language", "").value,
+    // 原来写死成 "0"，从别处带着 today=1 进来也不认
+    today: useRouteQuery("today", "0").value,
+  },
+  { defaultLimit: 30 },
+)
+
+const flowMode = computed(() => !inContest.value && query.language === "Flowchart")
+
+/**
+ * 用户名按整名匹配的那一个名字。默认是「包含」，而学号互相包含是常态（ks24a1 会混进
+ * ks24a10–ks24a19）。两处会设它：协作条「看他交过什么」带进来的 `exactUsername=1`，
+ * 和右栏的「只看他」。老师在输入框里改了名字就回到包含匹配
+ */
+const exactFor = ref(useRouteQuery<string>("exactUsername", "").value === "1" ? query.username : "")
+
 const submissions = ref<SubmissionListItem[]>([])
 const flowcharts = ref<FlowchartSubmissionListItem[]>([])
 const total = ref(0)
 const todayCount = ref(0)
-// 没有它的话，等接口这段时间表格就是一片空白，连转圈都没有
 const loading = ref(false)
+const loaded = ref(false)
 
-/**
- * 转圈圈延迟出现。翻页、切筛选大多在一百毫秒内就回来了，直接切数据比「闪一下
- * 转圈再切」看着稳；只有真的慢到 300ms 以上才值得给个反馈。
- *
- * 注意是**单向**延迟：只推迟「显示」，一旦请求结束立刻收掉，不留尾巴。
- *
- * 为什么不用 n-spin 的 delay：n-data-table 压根不走 n-spin，它渲染的是内部的
- * _internal/loading，直接由 loading 控制、没有 delay 参数。要用内置的就得把表格
- * 包进 <n-spin :show :delay> 再去掉 :loading —— 那会换掉加载样式，还会丢掉
- * loading 时锁住排序/分页交互（DataTable 里那个 `disabled: this.loading`）。
- * 下面这几行就是 n-spin 内部同样的写法（watchEffect + setTimeout + 清理）。
- */
-const LOADING_DELAY = 300
+/** 转圈延迟 300ms 才出现：翻页、切筛选大多一百毫秒内回来，直接换数据比闪一下转圈稳 */
 const showLoading = ref(false)
 let loadingTimer: ReturnType<typeof setTimeout> | undefined
 watch(loading, (value) => {
@@ -93,155 +113,397 @@ watch(loading, (value) => {
     showLoading.value = false
     return
   }
-  loadingTimer = setTimeout(() => (showLoading.value = true), LOADING_DELAY)
+  loadingTimer = setTimeout(() => (showLoading.value = true), 300)
 })
 onUnmounted(() => clearTimeout(loadingTimer))
 
-// 使用分页 composable
-const { query, clearQuery } = usePagination<SubmissionQuery>({
-  username: useRouteQuery("username", "").value,
-  result: useRouteQuery("result", "").value,
-  myself: useRouteQuery("myself", "0").value,
-  problem: useRouteQuery("problem", "").value,
-  language: useRouteQuery("language", "").value,
-  today: "0",
-})
-/**
- * 从题目页协作条「看他交过什么」点进来时带着 `exactUsername=1`：用户名按整名匹配。
- * 默认是「包含」，而学号互相包含是常态（帮 ks24a1 时会混进 ks24a10–ks24a19）。
- * 只对带进来的那个用户名生效，老师在输入框里改了名字就回到原来的包含匹配
- */
-const exactUsernameFor =
-  useRouteQuery<string>("exactUsername", "").value === "1" ? query.username : ""
-const submissionID = ref("")
-const problemDisplayID = ref("")
-const [statisticPanel, toggleStatisticPanel] = useToggle(false)
-// 「今日提交数」旁边那颗「统计」按钮的弹框
-const [todayPanel, toggleTodayPanel] = useToggle(false)
+type Row = SubmissionListItem | FlowchartSubmissionListItem
+const rows = computed<Row[]>(() => (flowMode.value ? flowcharts.value : submissions.value))
 
-const [codePanel, toggleCodePanel] = useToggle(false)
-const [scoreDetailPanel, toggleScoreDetailPanel] = useToggle(false)
-const selectedFlowchartId = ref("")
-const selectedFlowchart = computed(() => {
-  return flowcharts.value.find((f) => f.id === selectedFlowchartId.value)
-})
+function fetchPage() {
+  const offset = query.limit * (query.page - 1)
+  if (flowMode.value) {
+    return getFlowchartSubmissions({
+      username: query.username,
+      className: query.className,
+      problemDisplayId: query.problem,
+      myself: query.myself,
+      offset,
+      limit: query.limit,
+      today: query.today,
+      grade: query.result,
+    })
+  }
+  return getSubmissions({
+    username: query.username,
+    className: inContest.value ? undefined : query.className,
+    result: query.result,
+    myself: query.myself,
+    offset,
+    limit: query.limit,
+    page: query.page,
+    problemDisplayId: query.problem,
+    contestId: inContest.value ? String(route.params.contestID) : "",
+    language: inContest.value ? "" : (query.language as LANGUAGE | ""),
+    today: inContest.value ? undefined : query.today,
+    ...(exactFor.value && query.username === exactFor.value ? { exactUsername: "1" as const } : {}),
+  })
+}
 
-const resultOptions: SelectOption[] = [
-  { label: "全部", value: "" },
-  { label: "答案正确", value: "0" },
-  { label: "语法未通过", value: "10" },
-  { label: "答案错误", value: "-1" },
-  { label: "编译失败", value: "-2" },
-  { label: "运行时错误", value: "4" },
-]
+// 并发的几次请求只认最后一次：连着切筛选时，先发的晚回来会把新结果盖掉
+let requestSeq = 0
 
-const gradeOptions: SelectOption[] = [
-  { label: "全部", value: "" },
-  { label: "S级", value: "S" },
-  { label: "A级", value: "A" },
-  { label: "B级", value: "B" },
-  { label: "C级", value: "C" },
-]
-
-const languageOptions: SelectOption[] = [
-  { label: "流程图", value: "Flowchart" },
-  { label: "全部语言", value: "" },
-  { label: "Python", value: "Python" },
-  { label: "C语言", value: "C" },
-  { label: "C++", value: "C++" },
-]
 async function listSubmissions() {
   if (query.page < 1) query.page = 1
-  const offset = query.limit * (query.page - 1)
+  const seq = ++requestSeq
+  const mode = flowMode.value
   loading.value = true
   try {
-    if (query.language === "Flowchart") {
-      const res = await getFlowchartSubmissions({
-        username: query.username,
-        problemDisplayId: query.problem,
-        myself: query.myself,
-        offset,
-        limit: query.limit,
-        today: query.today,
-        grade: query.result,
-      })
-      total.value = res.total
-      flowcharts.value = res.results
-    } else {
-      const res = await getSubmissions({
-        ...query,
-        offset,
-        problemDisplayId: query.problem,
-        contestId: (route.params.contestID as string) ?? "",
-        language: query.language,
-        today: query.today,
-        ...(exactUsernameFor && query.username === exactUsernameFor
-          ? { exactUsername: "1" as const }
-          : {}),
-      })
-      submissions.value = res.results
-      total.value = res.total
-    }
+    const res = await fetchPage()
+    if (seq !== requestSeq) return
+    if (mode) flowcharts.value = res.results as FlowchartSubmissionListItem[]
+    else submissions.value = res.results as SubmissionListItem[]
+    total.value = res.total
+    newCount.value = 0
+    loaded.value = true
+    settleSelection()
   } finally {
-    loading.value = false
+    if (seq === requestSeq) loading.value = false
   }
-  consumePendingJump()
 }
 
 async function getTodayCount() {
-  const res = await getTodaySubmissionCount(query.language)
-  todayCount.value = res
+  todayCount.value = await getTodaySubmissionCount(flowMode.value ? "Flowchart" : undefined)
 }
 
 onMounted(() => {
   listSubmissions()
-  if (route.name === "submissions") {
-    getTodayCount()
-  }
+  if (route.name === "submissions") getTodayCount()
 })
 
-function search(username: string, problem: string) {
-  query.username = username
-  query.problem = problem
-}
+watchDebounced(() => [query.username, query.problem], listSubmissions, {
+  debounce: 500,
+  maxWait: 1000,
+})
+watch(
+  () => [
+    query.page,
+    query.limit,
+    query.myself,
+    query.result,
+    query.language,
+    query.today,
+    query.className,
+  ],
+  listSubmissions,
+)
+// 代码和流程图的「结果」不是一套（判题状态 / 等级），切过去要清掉
+watch(
+  () => query.language,
+  (value, old) => {
+    if ((value === "Flowchart") !== (old === "Flowchart")) query.result = ""
+    if (route.name === "submissions") getTodayCount()
+  },
+)
+// 登录态一变，能看哪些代码就变了（showLink 是后端逐行算的）
+watch(() => userStore.isAuthed, listSubmissions)
 
-function clear() {
-  clearQuery()
-}
+// ==================== 选中与翻阅 ====================
 
-async function rejudge(submissionID: string) {
-  await adminRejudge(submissionID)
-  message.success("重新判分成功")
-  listSubmissions()
-}
+const selectedId = ref("")
+const selectedRow = computed(() => rows.value.find((row) => row.id === selectedId.value) ?? null)
 
-async function retryFlowchart(submissionId: string) {
-  // 后端会拒掉「还在评分中」的提交（409 retry-not-allowed），也可能撞上限流。
-  // 不兜住的话拦截器静默 reject，老师点下去完全没反应。
-  // 按错误码分支而不是 match 文案（见 utils/api.ts 的约定）——后端文案是英文的，
-  // 直接弹给老师看不合适
-  const retryTips: Record<string, string> = {
-    "retry-not-allowed": "这条还在评分中，等出了结果再重新评分",
-    "too-many-submissions": "操作太频繁了，缓一下再试",
-    "flowchart-not-found": "提交不存在，或者没有权限",
+/** 方向键只在能看的行之间走：跳到一条看不了的上面只会看到一把锁 */
+const navigable = computed(() => rows.value.filter((row) => row.showLink))
+const position = computed(() => {
+  const index = navigable.value.findIndex((row) => row.id === selectedId.value)
+  return index === -1 ? null : { index: index + 1, count: navigable.value.length }
+})
+
+// 翻页是异步的，先记下「落地后停在哪一头」，新一页回来再选
+let pendingJump: "first" | "last" | null = null
+
+function settleSelection() {
+  const jump = pendingJump
+  pendingJump = null
+  const list = navigable.value
+  if (jump) {
+    const row = jump === "first" ? list[0] : list[list.length - 1]
+    if (row) {
+      select(row.id)
+      return
+    }
+    message.info("这一页没有可以查看的代码")
   }
-  try {
-    await retryFlowchartSubmission(submissionId)
-  } catch (err) {
-    message.error(retryTips[errorCode(err) ?? ""] ?? "重新评分失败")
+  if (rows.value.some((row) => row.id === selectedId.value)) return
+  // 手机上没有右栏，不用预先选一条
+  if (isMobile.value) {
+    selectedId.value = ""
     return
   }
-  message.success("重新评分已提交")
-  listSubmissions()
+  selectedId.value = (list[0] ?? rows.value[0])?.id ?? ""
 }
 
-function problemClicked(row: SubmissionListItem | FlowchartSubmissionListItem) {
-  if (route.name === "contest submissions") {
+function select(id: string) {
+  selectedId.value = id
+  nextTick(() => {
+    document
+      .querySelector(`[data-row-id="${CSS.escape(id)}"]`)
+      ?.scrollIntoView({ block: "nearest" })
+  })
+}
+
+const maxPage = computed(() => Math.max(1, Math.ceil(total.value / query.limit)))
+
+function move(step: 1 | -1) {
+  // 这一页一条能看的都没有（学生看全站时常见）：不翻页，不然按一下翻一页停不下来
+  if (!navigable.value.length) return
+  const all = rows.value
+  const start = all.findIndex((row) => row.id === selectedId.value)
+  for (let i = start + step; i >= 0 && i < all.length; i += step) {
+    if (all[i]!.showLink) {
+      select(all[i]!.id)
+      return
+    }
+  }
+  const page = query.page + step
+  if (page < 1 || page > maxPage.value) return
+  pendingJump = step > 0 ? "first" : "last"
+  query.page = page
+}
+
+const [statisticPanel, toggleStatisticPanel] = useToggle(false)
+const [todayPanel, toggleTodayPanel] = useToggle(false)
+
+onKeyStroke(["ArrowUp", "ArrowDown"], (e: KeyboardEvent) => {
+  if (!isDesktop.value || statisticPanel.value || todayPanel.value) return
+  // 焦点在输入框、下拉框里时不抢方向键
+  const target = e.target as HTMLElement | null
+  if (
+    target &&
+    (target.tagName === "INPUT" ||
+      target.tagName === "TEXTAREA" ||
+      target.isContentEditable ||
+      target.closest(".n-base-select-menu, .n-dropdown-menu, .n-modal"))
+  ) {
+    return
+  }
+  if (!rows.value.length) return
+  e.preventDefault()
+  move(e.key === "ArrowUp" ? -1 : 1)
+})
+
+// 手机上没有右栏：点一行从右边滑出整屏的详情
+const mobilePane = ref(false)
+function rowClicked(row: Row) {
+  select(row.id)
+  if (isMobile.value) mobilePane.value = true
+}
+
+// ==================== 实时更新 ====================
+
+/**
+ * 两件事，一个定时器：
+ * - 本页有「正在评分」的，3 秒拉一次，把结果原地换上；
+ * - 第一页每 15 秒看一眼有没有新交的。**新的不直接插进来** —— 老师正看着第 5 行，
+ *   上面突然塞进 3 行，选中的那行就跑了。顶上给一条「有 N 条新提交」，点了才换。
+ * 页面切到后台就停。
+ */
+const newCount = ref(0)
+const newCountCapped = computed(() => newCount.value >= query.limit)
+let lastPoll = Date.now()
+const visibility = useDocumentVisibility()
+
+function isPending(row: Row) {
+  if ("result" in row) {
+    return row.result === SubmissionStatus.pending || row.result === SubmissionStatus.judging
+  }
+  return (
+    row.status === FlowchartSubmissionStatus.PENDING ||
+    row.status === FlowchartSubmissionStatus.PROCESSING
+  )
+}
+
+const hasPending = computed(() => rows.value.some(isPending))
+
+useIntervalFn(async () => {
+  if (visibility.value !== "visible" || loading.value || !loaded.value) return
+  const interval = hasPending.value ? 3000 : 15000
+  if (Date.now() - lastPoll < interval) return
+  if (!hasPending.value && query.page !== 1) return
+  lastPoll = Date.now()
+  const seq = requestSeq
+  const mode = flowMode.value
+  let res
+  try {
+    res = await fetchPage()
+  } catch {
+    return
+  }
+  // 这期间筛选变了、翻页了，这份结果就作废
+  if (seq !== requestSeq || mode !== flowMode.value) return
+  const fresh = new Map<string, Row>(res.results.map((row) => [row.id, row]))
+  if (mode) {
+    flowcharts.value = flowcharts.value.map(
+      (row) => (fresh.get(row.id) as FlowchartSubmissionListItem | undefined) ?? row,
+    )
+  } else {
+    submissions.value = submissions.value.map(
+      (row) => (fresh.get(row.id) as SubmissionListItem | undefined) ?? row,
+    )
+  }
+  if (query.page === 1) {
+    const current = new Set(rows.value.map((row) => row.id))
+    const newest = rows.value[0]?.createTime ?? ""
+    newCount.value = res.results.filter(
+      (row) => !current.has(row.id) && row.createTime > newest,
+    ).length
+  }
+}, 1000)
+
+function showNew() {
+  newCount.value = 0
+  if (query.page !== 1) query.page = 1
+  else listSubmissions()
+}
+
+// ==================== 筛选 ====================
+
+const resultOptions = [
+  { label: "全部结果", value: "" },
+  { label: "答案正确", value: String(SubmissionStatus.accepted) },
+  { label: "答案错误", value: String(SubmissionStatus.wrong_answer) },
+  { label: "编译失败", value: String(SubmissionStatus.compile_error) },
+  { label: "运行时错误", value: String(SubmissionStatus.runtime_error) },
+  { label: "运行超时", value: String(SubmissionStatus.cpu_time_limit_exceeded) },
+  { label: "内存超限", value: String(SubmissionStatus.memory_limit_exceeded) },
+  { label: "语法未通过", value: String(SubmissionStatus.ast_check_failed) },
+  { label: "正在评分", value: String(SubmissionStatus.judging) },
+  { label: "系统错误", value: String(SubmissionStatus.system_error) },
+]
+
+const gradeOptions = [
+  { label: "全部等级", value: "" },
+  { label: "S 级", value: "S" },
+  { label: "A 级", value: "A" },
+  { label: "B 级", value: "B" },
+  { label: "C 级", value: "C" },
+]
+
+// 原来没有 SQL：3 月以来有 91 条 SQL 提交、9 道题开了 SQL，想筛只能靠翻
+const languageOptions = [
+  { label: "全部语言", value: "" },
+  { label: "Python", value: "Python" },
+  { label: "C语言", value: "C" },
+  { label: "C++", value: "C++" },
+  { label: "SQL", value: "SQL" },
+]
+
+const classOptions = computed(() => {
+  const list = configStore.config?.classList ?? []
+  // 带进来的班级不在配置里（老班、手打的）也要显示得出来，不然框里是空的却在筛
+  const all = query.className && !list.includes(query.className) ? [query.className, ...list] : list
+  return all.map((item) => ({ label: classLabel(item), value: item }))
+})
+
+const contestProblemOptions = computed(() => [
+  { label: "全部题目", value: "" },
+  ...contestStore.problems.map((problem) => ({
+    label: `${problem._id} ${problem.title}`,
+    value: problem._id,
+  })),
+])
+
+const mode = computed({
+  get: () => (flowMode.value ? "flow" : "code"),
+  set: (value: string) => (query.language = value === "flow" ? "Flowchart" : ""),
+})
+
+const scope = computed({
+  get: () => (query.myself === "1" ? "mine" : "all"),
+  set: (value: string) => (query.myself = value === "mine" ? "1" : "0"),
+})
+
+const today = computed({
+  get: () => query.today === "1",
+  set: (value: boolean) => (query.today = value ? "1" : "0"),
+})
+
+/** 「这节课」：一键筛到 班级 + 这节课的题 + 今天。班级和题的取法同课堂看板 */
+const lesson = ref<ClassLesson | null>(null)
+const lessonIds = computed(
+  () => lesson.value?.problems.map((problem) => problem.problemDisplayId).join(",") ?? "",
+)
+const lessonActive = computed(
+  () =>
+    !!lesson.value?.className &&
+    !!lesson.value.problems.length &&
+    query.className === lesson.value.className &&
+    query.problem === lessonIds.value &&
+    query.today === "1",
+)
+const lessonLoading = ref(false)
+
+async function toggleLesson() {
+  if (lessonActive.value) {
+    query.problem = ""
+    query.today = "0"
+    return
+  }
+  lessonLoading.value = true
+  try {
+    const res = await getClassLesson(query.className || undefined)
+    if (!res.className) {
+      message.info("猜不出是哪个班在上课，先在班级里选一个")
+      return
+    }
+    query.className = res.className
+    if (!res.problems.length) {
+      message.info(`${classLabel(res.className)}今天还没有布置题，也还没人交。可以先去课堂看板布置`)
+      return
+    }
+    lesson.value = res
+    query.problem = lessonIds.value
+    query.today = "1"
+  } finally {
+    lessonLoading.value = false
+  }
+}
+
+const activeFilters = computed(
+  () =>
+    [query.username, query.className, query.result, query.problem].filter(Boolean).length +
+    (query.today === "1" ? 1 : 0) +
+    (query.language && query.language !== "Flowchart" ? 1 : 0),
+)
+const mobileFilters = ref(false)
+
+function clear() {
+  const keepMode = query.language === "Flowchart" ? "Flowchart" : ""
+  exactFor.value = ""
+  clearQuery()
+  query.myself = "0"
+  query.today = "0"
+  query.language = keepMode
+}
+
+function filterUser(username: string) {
+  exactFor.value = username
+  query.myself = "0"
+  query.username = username
+}
+
+function filterProblem(displayId: string) {
+  query.problem = displayId
+}
+
+// ==================== 行上的动作 ====================
+
+function openProblem(row: Row) {
+  if (inContest.value) {
     const path = router.resolve({
       name: "contest problem",
-      params: {
-        problemID: row.problemDisplayId,
-      },
+      params: { contestID: route.params.contestID, problemID: row.problemDisplayId },
     })
     window.open(path.href, "_blank")
   } else {
@@ -249,431 +511,421 @@ function problemClicked(row: SubmissionListItem | FlowchartSubmissionListItem) {
   }
 }
 
-// 今日统计弹框里点题目。那颗按钮只在 route.name === "submissions" 上出现
-// （今日提交数本身就只在那一页拉），所以不用管比赛里的题目路由
-function openProblem(displayId: string) {
-  window.open("/problem/" + displayId, "_blank")
+async function rejudge(id: string) {
+  try {
+    await adminRejudge(id)
+  } catch {
+    message.error("重新判题没成功")
+    return
+  }
+  message.success("已重新判题，结果出来会自己更新")
+  const row = submissions.value.find((item) => item.id === id)
+  if (row) row.result = SubmissionStatus.pending
+  lastPoll = 0
 }
 
-function showCodePanel(id: string, problem: string) {
-  toggleCodePanel(true)
-  submissionID.value = id
-  problemDisplayID.value = problem
+async function retryFlowchart(id: string) {
+  // 按错误码分支而不是 match 文案（见 utils/api.ts 的约定）——后端文案是英文的
+  const retryTips: Record<string, string> = {
+    "retry-not-allowed": "这条还在评分中，等出了结果再重新评分",
+    "too-many-submissions": "操作太频繁了，缓一下再试",
+    "flowchart-not-found": "提交不存在，或者没有权限",
+  }
+  try {
+    await retryFlowchartSubmission(id)
+  } catch (err) {
+    message.error(retryTips[errorCode(err) ?? ""] ?? "重新评分失败")
+    return
+  }
+  message.success("已重新评分，结果出来会自己更新")
+  const row = flowcharts.value.find((item) => item.id === id)
+  if (row) row.status = FlowchartSubmissionStatus.PENDING
+  lastPoll = 0
+}
+
+function caseText(row: SubmissionListItem) {
+  const summary = row.caseSummary
+  if (!summary) return null
+  return { text: `${summary.passed}/${summary.total}`, full: summary.passed >= summary.total }
+}
+
+/** 学生看别人的那几行：名字淡一档、带一把锁（自己的看不了是题单那道闸，另说） */
+function othersRow(row: SubmissionListItem) {
+  return !row.showLink && row.userId !== userStore.user?.id
 }
 
 /**
- * 代码详情的键盘翻阅。老师看一个班的提交时原来是「点开 → 看 → 关掉 → 再点下一行」，
- * 这里让弹框开着就能上下切换，走到本页头尾自动翻页续上。
- *
- * 只在**能看代码**的行之间走 —— showLink 是后端按题单规则算出来的，
- * 跳到一条看不了的上面只会得到一个空弹框。
+ * 按天插一条分隔行，时间那一列只写钟点。原来每行都写「9月28日 23:59」，
+ * 左栏 560 宽里题目名就只剩三个字。
  */
-const viewableSubmissions = computed(() => submissions.value.filter((row) => row.showLink))
-const currentCodeIndex = computed(() =>
-  viewableSubmissions.value.findIndex((row) => row.id === submissionID.value),
-)
-const maxPage = computed(() => Math.ceil(total.value / query.limit))
-
-// 翻页是异步的，所以先记下「落地后停在哪一头」，等新一页的数据回来再开
-let pendingJump: "first" | "last" | null = null
-
-function consumePendingJump() {
-  const jump = pendingJump
-  pendingJump = null
-  if (!jump || !codePanel.value) return
-  const list = viewableSubmissions.value
-  const row = jump === "first" ? list[0] : list[list.length - 1]
-  // 整页都是看不了代码的（题单没做出来那批），此时保持弹框里原来那条不动
-  if (!row) {
-    message.info("这一页没有可以查看的代码")
-    return
-  }
-  showCodePanel(row.id, row.problemDisplayId)
+function dayKey(time: string) {
+  return parseTime(time, "YYYY-MM-DD")
 }
 
-function moveCodePanel(step: 1 | -1) {
-  const index = currentCodeIndex.value
-  if (index === -1) return
-  const next = viewableSubmissions.value[index + step]
-  if (next) {
-    showCodePanel(next.id, next.problemDisplayId)
-    return
-  }
-  const page = query.page + step
-  if (page < 1 || page > maxPage.value) return
-  pendingJump = step > 0 ? "first" : "last"
-  query.page = page // 监听器会去 listSubmissions，回来后 consumePendingJump 接手
+function dayBreak(index: number) {
+  const list = rows.value
+  const key = dayKey(list[index]!.createTime)
+  if (index > 0 && dayKey(list[index - 1]!.createTime) === key) return ""
+  return submissionDayText(list[index]!.createTime)
 }
-
-// 上下（和左右）翻阅代码详情。Esc 关弹框是 n-modal 自带的，不用管。
-// 弹框没开就什么都不做，页面正常滚动
-onKeyStroke(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], (e: KeyboardEvent) => {
-  if (!codePanel.value) return
-  // 焦点在输入框里（弹框底下那几个筛选框）时不抢方向键
-  const target = e.target as HTMLElement | null
-  if (
-    target &&
-    (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
-  ) {
-    return
-  }
-  e.preventDefault()
-  moveCodePanel(e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1)
-})
-
-function showScoreDetail(id: string) {
-  selectedFlowchartId.value = id
-  toggleScoreDetailPanel(true)
-}
-
-function getGradeType(grade?: string) {
-  if (!grade) return "default"
-  if (grade === "S") return "primary"
-  if (grade === "A") return "info"
-  if (grade === "B") return "warning"
-  return "error"
-}
-
-// 监听用户名和题号变化（防抖）
-watchDebounced(() => [query.username, query.problem], listSubmissions, {
-  debounce: 500,
-  maxWait: 1000,
-})
-
-// 监听其他查询条件变化
-watch(
-  () => [query.page, query.limit, query.myself, query.result, query.language, query.today],
-  listSubmissions,
-)
-
-// 切换语言时重置过滤条件，刷新今日提交数
-watch(
-  () => query.language,
-  () => {
-    query.result = ""
-    if (route.name === "submissions") getTodayCount()
-  },
-)
-
-// 登录状态变化后刷新提交列表，更新提交编号列的可点击状态。
-// 今日提交数不看登录态，onMounted 那次就够了，这里不用再拉一遍。
-watch(
-  () => userStore.isAuthed,
-  () => listSubmissions(),
-)
-
-const columns = computed(() => {
-  const res: DataTableColumn<SubmissionListItem>[] = [
-    {
-      title: "提交时间",
-      key: "create_time",
-      minWidth: 200,
-      render: (row) => parseTime(row.createTime, "YYYY-MM-DD HH:mm:ss"),
-    },
-    {
-      title: "提交编号",
-      key: "id",
-      minWidth: 200,
-      render: (row) =>
-        h(SubmissionLink, {
-          submission: row,
-          onShowCode: () => showCodePanel(row.id, row.problemDisplayId),
-        }),
-    },
-    {
-      title: "状态",
-      key: "status",
-      minWidth: 140,
-      render: (row) => h(SubmissionResultTag, { result: row.result }),
-    },
-    {
-      title: "题目",
-      key: "problem",
-      minWidth: 360,
-      render: (row) => {
-        const problem = h(
-          ButtonWithSearch,
-          {
-            type: "题目",
-            onClick: () => problemClicked(row),
-            onSearch: () => (query.problem = row.problemDisplayId),
-          },
-          () => `${row.problemDisplayId} ${row.problemTitle}`,
-        )
-        // 从题单入口做出来的提交才有这个标记（后端只在提交时记来源），
-        // 同一道题从普通题库刷的不会带。老提交里只有当年首次 AC 那条有
-        const problemSet = row.problemSet
-        if (!problemSet) return problem
-        return h(NFlex, { align: "center", size: 8, wrap: false }, () => [
-          problem,
-          h(
-            NTag,
-            {
-              size: "small",
-              round: true,
-              type: "info",
-              bordered: false,
-              style: { cursor: "pointer", flexShrink: 0 },
-              onClick: () => window.open("/problemset/" + problemSet.id, "_blank"),
-            },
-            () => "题单 " + problemSet.title,
-          ),
-        ])
-      },
-    },
-    {
-      title: "语言",
-      key: "language",
-      minWidth: 120,
-      render: (row) => LANGUAGE_SHOW_VALUE[row.language],
-    },
-    {
-      title: "用户",
-      key: "username",
-      minWidth: 200,
-      render: (row) =>
-        h(
-          ButtonWithSearch,
-          {
-            type: "用户",
-            username: row.username,
-            onClick: () => window.open("/user?name=" + row.username, "_blank"),
-            onSearch: () => (query.username = row.username),
-            onFilterClass: (classname: string) => (query.username = classname),
-          },
-          () => row.username,
-        ),
-    },
-  ]
-  if (!route.params.contestID && userStore.isTeacherOrAbove) {
-    res.push({
-      title: "选项",
-      key: "rejudge",
-      render: (row) =>
-        h(
-          NButton,
-          {
-            quaternary: true,
-            size: "small",
-            type: "primary",
-            onClick: () => rejudge(row.id),
-          },
-          () => "重新判题",
-        ),
-    })
-  }
-  return res
-})
-
-const flowchartColumns = computed(() => {
-  const res: DataTableColumn<FlowchartSubmissionListItem>[] = [
-    {
-      title: "提交时间",
-      key: "create_time",
-      render: (row) => parseTime(row.createTime, "YYYY-MM-DD HH:mm:ss"),
-    },
-    {
-      title: "提交编号",
-      key: "id",
-      render: (row) =>
-        h(FlowchartLink, {
-          flowchart: row,
-          onShowDetail: (id: string) => showScoreDetail(id),
-        }),
-    },
-    {
-      title: "题目",
-      key: "problem_title",
-      render: (row) =>
-        h(
-          ButtonWithSearch,
-          {
-            type: "题目",
-            onClick: () => problemClicked(row),
-            onSearch: () => (query.problem = row.problemDisplayId),
-          },
-          () => `${row.problemDisplayId} ${row.problemTitle}`,
-        ),
-    },
-    {
-      title: "状态",
-      key: "status",
-      render: (row) => {
-        const tag = FLOWCHART_STATUS_TAG[row.status]
-        return h(
-          NTag,
-          { size: "small", round: true, type: tag?.type ?? "default" },
-          () => tag?.text ?? "未知",
-        )
-      },
-    },
-    {
-      title: "评分",
-      key: "ai_score",
-      // 只有评完的才有分数。没评完也渲染 Grade 的话会显示成 0 分，
-      // 看着像「评了但得了 0 分」
-      render: (row) =>
-        row.status === FlowchartSubmissionStatus.COMPLETED
-          ? h(Grade, {
-              score: row.aiScore ?? 0,
-              grade: (row.aiGrade ?? "") as GradeValue,
-            })
-          : h(NText, { depth: 3 }, () => "—"),
-    },
-    {
-      title: "用户",
-      key: "username",
-      minWidth: 200,
-      render: (row) =>
-        h(
-          ButtonWithSearch,
-          {
-            type: "用户",
-            username: row.username,
-            onClick: () => window.open("/user?name=" + row.username, "_blank"),
-            onSearch: () => (query.username = row.username),
-            onFilterClass: (classname: string) => (query.username = classname),
-          },
-          () => row.username,
-        ),
-    },
-  ]
-  if (!route.params.contestID && userStore.isTeacherOrAbove) {
-    res.push({
-      title: "选项",
-      key: "retry",
-      // 后端只接受已完成 / 已失败的重判（其余返回 409），这里同步置灰，
-      // 免得老师点了才发现不行
-      render: (row) =>
-        h(
-          NButton,
-          {
-            quaternary: true,
-            size: "small",
-            type: "primary",
-            disabled:
-              row.status !== FlowchartSubmissionStatus.COMPLETED &&
-              row.status !== FlowchartSubmissionStatus.FAILED,
-            onClick: () => retryFlowchart(row.id),
-          },
-          () => "重新判题",
-        ),
-    })
-  }
-  return res
-})
 </script>
+
 <template>
-  <n-flex vertical size="large">
-    <n-space>
-      <n-form :show-feedback="false" inline label-placement="left">
-        <n-form-item v-if="isDesktop && userStore.isAuthed" label="只看自己">
-          <n-switch v-model:value="query.myself" checked-value="1" unchecked-value="0" />
-        </n-form-item>
-        <n-form-item label="语言" v-if="route.name !== 'contest submissions'">
-          <n-select class="select" v-model:value="query.language" :options="languageOptions" />
-        </n-form-item>
-        <n-form-item :label="query.language === 'Flowchart' ? '等级' : '状态'">
-          <n-select
-            class="select"
-            v-model:value="query.result"
-            :options="query.language === 'Flowchart' ? gradeOptions : resultOptions"
-          />
-        </n-form-item>
-      </n-form>
-      <n-form :show-feedback="false" inline label-placement="left">
-        <n-form-item>
-          <n-input
-            :disabled="query.myself === '1'"
-            style="width: 140px"
-            clearable
-            v-model:value="query.username"
-            placeholder="用户"
-          />
-        </n-form-item>
-        <n-form-item>
-          <n-input
-            style="width: 120px"
-            clearable
-            v-model:value="query.problem"
-            placeholder="题号"
-          />
-        </n-form-item>
-      </n-form>
-      <n-form :show-feedback="false" inline label-placement="left">
-        <n-form-item v-if="isMobile && userStore.isAuthed" label="只看自己">
-          <n-switch v-model:value="query.myself" checked-value="1" unchecked-value="0" />
-        </n-form-item>
-        <n-form-item>
-          <n-button @click="search(query.username, query.problem)"> 搜索 </n-button>
-        </n-form-item>
-        <n-form-item>
-          <n-button @click="clear" quaternary>重置</n-button>
-        </n-form-item>
-        <n-form-item v-if="userStore.isTeacherOrAbove && route.name === 'submissions'">
-          <n-button quaternary type="warning" @click="toggleStatisticPanel(true)">
-            数据统计
-          </n-button>
-        </n-form-item>
-      </n-form>
-      <n-flex v-if="todayCount > 0" align="center" :size="8">
-        <n-tag
-          checkable
-          :checked="query.today === '1'"
-          type="success"
-          size="large"
-          @update:checked="(v: boolean) => (query.today = v ? '1' : '0')"
+  <div class="page" :class="{ contest: inContest, mobile: isMobile }">
+    <!-- 筛选栏 -->
+    <div v-if="isDesktop" class="filters">
+      <!-- 流程图列表要登录才能看（GET /flowcharts 是 requireAuth），没登录就不给这个切换 -->
+      <template v-if="!inContest && userStore.isAuthed">
+        <n-radio-group v-model:value="mode" size="small">
+          <n-radio-button value="code">代码</n-radio-button>
+          <n-radio-button value="flow">流程图</n-radio-button>
+        </n-radio-group>
+        <span class="vsep"></span>
+      </template>
+
+      <template v-if="teacher && !inContest">
+        <button
+          class="lesson"
+          :class="{ on: lessonActive }"
+          :disabled="lessonLoading"
+          title="筛到正在上课的班、这节课的题、今天"
+          @click="toggleLesson"
         >
-          <n-gradient-text v-if="query.today !== '1'" type="success">
-            今日提交数：{{ todayCount }}
-          </n-gradient-text>
-          <template v-else>今日提交数：{{ todayCount }}</template>
-        </n-tag>
-        <!--
-          筛到今天之后才出现。流程图那档不给 —— 这个统计只算代码提交
-          （流程图提交在另一张表、只有 AI 评级没有判题状态），点开会是一份
-          对不上标签数字的统计。
-        -->
-        <n-button
-          v-if="query.today === '1' && query.language !== 'Flowchart'"
-          quaternary
-          type="success"
-          @click="toggleTodayPanel(true)"
-        >
-          统计
-        </n-button>
+          <Icon v-if="lessonActive" icon="ph:check-bold" :width="12" />
+          <b>这节课</b>
+          <template v-if="lessonActive && lesson?.className">
+            <span>
+              {{ classLabel(lesson.className) }} · {{ lesson.problems.length }} 道题 · 今天
+            </span>
+            <Icon icon="ph:x-bold" :width="12" class="lesson-x" />
+          </template>
+        </button>
+        <n-select
+          v-if="!lessonActive"
+          :value="query.className || null"
+          class="w-class"
+          size="small"
+          :options="classOptions"
+          placeholder="全部班级"
+          clearable
+          filterable
+          @update:value="(v: string | null) => (query.className = v ?? '')"
+        />
+      </template>
+      <n-radio-group v-else-if="userStore.isAuthed" v-model:value="scope" size="small">
+        <n-radio-button value="all">全部</n-radio-button>
+        <n-radio-button value="mine">我的</n-radio-button>
+      </n-radio-group>
+
+      <n-input
+        v-model:value="query.username"
+        class="w-user"
+        size="small"
+        clearable
+        :disabled="query.myself === '1'"
+        :placeholder="teacher ? '学生' : '用户'"
+      >
+        <template #prefix><Icon icon="ph:magnifying-glass" /></template>
+      </n-input>
+      <n-select
+        v-if="inContest"
+        v-model:value="query.problem"
+        class="w-problem-select"
+        size="small"
+        :options="contestProblemOptions"
+      />
+      <n-input
+        v-else-if="!lessonActive"
+        v-model:value="query.problem"
+        class="w-problem"
+        size="small"
+        clearable
+        placeholder="题号"
+      >
+        <template #prefix><Icon icon="ph:hash" /></template>
+      </n-input>
+      <n-select
+        v-model:value="query.result"
+        class="w-result"
+        size="small"
+        :options="flowMode ? gradeOptions : resultOptions"
+      />
+      <n-select
+        v-if="!inContest && !flowMode"
+        v-model:value="query.language"
+        class="w-lang"
+        size="small"
+        :options="languageOptions"
+      />
+      <button
+        v-if="!inContest && !lessonActive"
+        class="chip"
+        :class="{ on: today }"
+        @click="today = !today"
+      >
+        <Icon v-if="today" icon="ph:check-bold" :width="12" />今天
+      </button>
+      <n-button size="small" quaternary @click="clear">清空</n-button>
+
+      <div class="spacer"></div>
+      <n-button
+        v-if="route.name === 'submissions' && !flowMode"
+        size="small"
+        quaternary
+        @click="toggleTodayPanel(true)"
+      >
+        <template #icon><Icon icon="ph:chart-bar" /></template>
+        今日统计<span v-if="todayCount" class="count">{{ todayCount }}</span>
+      </n-button>
+      <n-button
+        v-if="teacher && route.name === 'submissions'"
+        size="small"
+        @click="toggleStatisticPanel(true)"
+      >
+        <template #icon><Icon icon="ph:chart-pie-slice" /></template>
+        数据统计
+      </n-button>
+    </div>
+
+    <!-- 手机：只留全部/我的，其余收进「筛选」 -->
+    <div v-else class="filters mobile-filters">
+      <n-radio-group v-if="userStore.isAuthed" v-model:value="scope" size="small">
+        <n-radio-button value="all">全部</n-radio-button>
+        <n-radio-button value="mine">我的</n-radio-button>
+      </n-radio-group>
+      <div class="spacer"></div>
+      <n-button size="small" @click="mobileFilters = !mobileFilters">
+        <template #icon><Icon icon="ph:funnel-simple" /></template>
+        筛选<template v-if="activeFilters"> · {{ activeFilters }}</template>
+      </n-button>
+    </div>
+    <div v-if="isMobile && mobileFilters" class="mobile-panel">
+      <n-radio-group v-if="!inContest && userStore.isAuthed" v-model:value="mode" size="small">
+        <n-radio-button value="code">代码</n-radio-button>
+        <n-radio-button value="flow">流程图</n-radio-button>
+      </n-radio-group>
+      <n-input
+        v-model:value="query.username"
+        size="small"
+        clearable
+        :disabled="query.myself === '1'"
+        placeholder="用户"
+      />
+      <n-input v-model:value="query.problem" size="small" clearable placeholder="题号" />
+      <n-select
+        v-model:value="query.result"
+        size="small"
+        :options="flowMode ? gradeOptions : resultOptions"
+      />
+      <n-flex align="center">
+        <button v-if="!inContest" class="chip" :class="{ on: today }" @click="today = !today">
+          <Icon v-if="today" icon="ph:check-bold" :width="12" />今天
+        </button>
+        <n-button size="small" quaternary @click="clear">清空</n-button>
       </n-flex>
-    </n-space>
-    <n-data-table
-      v-if="query.language === 'Flowchart'"
-      :bordered="false"
-      :columns="flowchartColumns"
-      :data="flowcharts"
-      :loading="showLoading"
-    />
-    <n-data-table
-      v-else
-      :bordered="false"
-      :columns="columns"
-      :data="submissions"
-      :loading="showLoading"
-    />
-  </n-flex>
-  <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
+    </div>
+
+    <div class="split">
+      <!-- 左栏：列表 -->
+      <section class="list">
+        <button v-if="newCount" class="new-bar" @click="showNew">
+          <Icon icon="ph:arrow-up-bold" :width="13" />
+          有 {{ newCount }}{{ newCountCapped ? "+" : "" }} 条新提交，点这里显示
+        </button>
+        <div class="rows" :class="{ dim: showLoading }">
+          <template v-if="flowMode">
+            <template v-for="(row, index) in flowcharts" :key="row.id">
+              <div v-if="dayBreak(index)" class="day">{{ dayBreak(index) }}</div>
+              <div
+                class="row"
+                :class="{ on: row.id === selectedId && !isMobile }"
+                :data-row-id="row.id"
+                @click="rowClicked(row)"
+              >
+                <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
+                <span class="c-user"><UserName :username="row.username" /></span>
+                <span class="c-problem">
+                  <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
+                </span>
+                <span class="c-state">
+                  <FlowchartState :status="row.status" :grade="row.aiGrade" :score="row.aiScore" />
+                </span>
+              </div>
+            </template>
+          </template>
+          <template v-else>
+            <template v-for="(row, index) in submissions" :key="row.id">
+              <div v-if="dayBreak(index)" class="day">{{ dayBreak(index) }}</div>
+              <div
+                class="row"
+                :class="{ on: row.id === selectedId && !isMobile, mobile: isMobile }"
+                :data-row-id="row.id"
+                @click="rowClicked(row)"
+              >
+                <template v-if="isDesktop">
+                  <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
+                  <span class="c-user">
+                    <UserName :username="row.username" :muted="othersRow(row)" />
+                  </span>
+                  <span class="c-problem">
+                    <span class="title">
+                      <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
+                    </span>
+                    <span
+                      v-if="row.problemSet"
+                      class="ps"
+                      :title="'从题单「' + row.problemSet.title + '」交的'"
+                    >
+                      题单
+                    </span>
+                  </span>
+                  <span class="c-case">
+                    <span
+                      v-if="caseText(row)"
+                      :style="{
+                        color: caseText(row)!.full ? theme.textColor3 : tone('error').color,
+                      }"
+                    >
+                      {{ caseText(row)!.text }}
+                    </span>
+                  </span>
+                  <span class="c-state"><StatusPill :result="row.result" /></span>
+                  <span v-if="!teacher" class="c-lock">
+                    <Icon
+                      v-if="!row.showLink"
+                      icon="ph:lock-simple"
+                      :width="13"
+                      :title="othersRow(row) ? '别人的代码看不到' : '在题单里做完才能看'"
+                    />
+                  </span>
+                </template>
+                <template v-else>
+                  <div class="m-line">
+                    <UserName :username="row.username" :muted="othersRow(row)" />
+                    <div class="spacer"></div>
+                    <StatusPill :result="row.result" />
+                  </div>
+                  <div class="m-line sub">
+                    <span>{{ submissionClockText(row.createTime) }}</span>
+                    <span class="title">{{ row.problemDisplayId }} {{ row.problemTitle }}</span>
+                    <div class="spacer"></div>
+                    <span v-if="caseText(row)">{{ caseText(row)!.text }}</span>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </template>
+          <div v-if="loaded && !rows.length" class="empty">
+            <span class="empty-title">
+              {{ lessonActive ? "这节课的题还没有人交" : "没有符合条件的提交" }}
+            </span>
+            <n-button v-if="activeFilters" size="small" @click="clear">清空筛选</n-button>
+          </div>
+          <div v-if="!loaded" class="empty"><n-spin size="small" /></div>
+        </div>
+        <div class="list-foot">
+          <span v-if="total" class="total">共 {{ total }} 条</span>
+          <div class="spacer"></div>
+          <Pagination
+            class="pager"
+            :total="total"
+            v-model:limit="query.limit"
+            v-model:page="query.page"
+          />
+        </div>
+      </section>
+
+      <!-- 右栏：选中那一条 -->
+      <template v-if="isDesktop && selectedRow">
+        <FlowchartPane
+          v-if="flowMode"
+          :row="selectedRow as FlowchartSubmissionListItem"
+          :teacher="teacher"
+          :position="position"
+          @filter-user="filterUser"
+          @filter-problem="filterProblem"
+          @open-problem="openProblem"
+          @retry="retryFlowchart"
+        />
+        <SubmissionPane
+          v-else
+          :row="selectedRow as SubmissionListItem"
+          :teacher="teacher"
+          :contest="inContest"
+          :position="position"
+          @filter-user="filterUser"
+          @filter-problem="filterProblem"
+          @open-problem="openProblem"
+          @rejudge="rejudge"
+        />
+      </template>
+      <section v-else-if="isDesktop" class="pane-empty">
+        <span v-if="loaded && rows.length">点左边一行看代码</span>
+      </section>
+    </div>
+  </div>
+
+  <n-drawer v-if="isMobile" v-model:show="mobilePane" width="100%" placement="right">
+    <n-drawer-content
+      closable
+      title="提交详情"
+      :body-content-style="{ padding: 0, height: '100%' }"
+    >
+      <div v-if="selectedRow" class="mobile-pane">
+        <FlowchartPane
+          v-if="flowMode"
+          :row="selectedRow as FlowchartSubmissionListItem"
+          :teacher="false"
+          :position="null"
+          narrow
+          @open-problem="openProblem"
+        />
+        <SubmissionPane
+          v-else
+          :row="selectedRow as SubmissionListItem"
+          :teacher="false"
+          :contest="inContest"
+          :position="null"
+          narrow
+          @open-problem="openProblem"
+        />
+      </div>
+      <!-- 手机没有方向键：上一条 / 下一条换成按钮，走的是同一个 move() -->
+      <template #footer>
+        <n-flex justify="space-between" style="width: 100%">
+          <n-button
+            :disabled="!position || (position.index <= 1 && query.page <= 1)"
+            @click="move(-1)"
+          >
+            上一条
+          </n-button>
+          <span class="mobile-pos">{{
+            position ? `${position.index} / ${position.count}` : ""
+          }}</span>
+          <n-button @click="move(1)">下一条</n-button>
+        </n-flex>
+      </template>
+    </n-drawer-content>
+  </n-drawer>
+
   <n-modal
-    v-if="userStore.isTeacherOrAbove"
+    v-if="teacher"
     v-model:show="statisticPanel"
     preset="card"
     :style="{ maxWidth: isDesktop && '800px', maxHeight: '80vh' }"
     :content-style="{ overflow: 'auto' }"
-    :title="query.language === 'Flowchart' ? '流程图提交的统计' : '提交记录的统计'"
+    :title="flowMode ? '流程图提交的统计' : '提交记录的统计'"
   >
     <FlowchartStatisticsPanel
-      v-if="query.language === 'Flowchart'"
+      v-if="flowMode"
       :problem="query.problem"
-      :username="query.username"
+      :username="query.className ? 'ks' + query.className : query.username"
+    />
+    <StatisticsPanel
+      v-else
+      :problem="query.problem"
+      :username="query.className ? 'ks' + query.className : query.username"
     />
-    <StatisticsPanel v-else :problem="query.problem" :username="query.username" />
   </n-modal>
   <n-modal
     v-model:show="todayPanel"
@@ -682,73 +934,384 @@ const flowchartColumns = computed(() => {
     :content-style="{ overflow: 'auto' }"
     title="今日提交统计"
   >
-    <TodayStatistics @open-problem="(id: string) => openProblem(id)" />
-  </n-modal>
-  <n-modal
-    v-model:show="codePanel"
-    preset="card"
-    :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
-    :content-style="{ overflow: 'auto' }"
-  >
-    <template #header>
-      <n-flex align="center" :size="12">
-        <n-text>代码详情</n-text>
-        <n-text v-if="isDesktop && viewableSubmissions.length > 1" depth="3">
-          <span class="shortcut-hint">
-            本页第 {{ currentCodeIndex + 1 }} / {{ viewableSubmissions.length }}
-            条 · ↑ ↓ ← → 切换上下一条 · Esc 关闭
-          </span>
-        </n-text>
-      </n-flex>
-    </template>
-    <!--
-      key 换掉才会重新拉代码 —— detail.vue 只在 onMounted 里取一次，
-      键盘切换时不换 key 的话弹框里还是上一条的代码
-    -->
-    <SubmissionDetail
-      :key="submissionID"
-      :problemID="problemDisplayID"
-      :submissionID="submissionID"
-      hideList
-      @copied="toggleCodePanel(false)"
-    />
-  </n-modal>
-  <n-modal
-    v-model:show="scoreDetailPanel"
-    preset="card"
-    :style="{ maxWidth: isDesktop && '1000px', maxHeight: '80vh' }"
-    :content-style="{ overflow: 'auto' }"
-  >
-    <template #header>
-      <n-flex align="center">
-        <n-text>流程图评分详情</n-text>
-        <n-text v-if="selectedFlowchart" :type="getGradeType(selectedFlowchart.aiGrade ?? '')">
-          {{ selectedFlowchart.aiScore }}分 {{ selectedFlowchart.aiGrade }}级
-        </n-text>
-      </n-flex>
-    </template>
-    <FlowchartScoreDetail :submissionId="selectedFlowchartId" />
+    <TodayStatistics @open-problem="(id: string) => openProblem({ problemDisplayId: id } as Row)" />
   </n-modal>
 </template>
+
 <style scoped>
-.select {
+/* 铺满顶栏以下：和题目页一样用负边距吃掉外层 16px 的内边距（顶栏 56） */
+.page {
+  margin: -16px;
+  height: calc(100vh - 56px);
+  display: flex;
+  flex-direction: column;
+  background: v-bind("theme.cardColor");
+}
+
+/* 比赛里套在比赛页头下面，不铺满，给个框 */
+.page.contest {
+  margin: 0;
+  height: calc(100vh - 150px);
+  min-height: 480px;
+  border: 1px solid v-bind("theme.dividerColor");
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* 手机上整页自然滚动，不锁高度 */
+.page.mobile {
+  height: auto;
+}
+
+.mobile .split {
+  flex: none;
+}
+
+.filters {
+  height: 52px;
+  flex: none;
+  box-sizing: border-box;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.mobile-filters {
+  padding: 0 14px;
+}
+
+.mobile-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.vsep {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: v-bind("theme.dividerColor");
+}
+
+.w-class {
+  width: 132px;
+}
+.w-user {
   width: 120px;
 }
-
-.code {
-  font-size: 20px;
-  overflow: auto;
+.w-problem {
+  width: 100px;
+}
+.w-problem-select {
+  width: 160px;
+}
+.w-result {
+  width: 112px;
+}
+.w-lang {
+  width: 104px;
 }
 
-.shortcut-hint {
+.spacer {
+  flex: 1 1 0;
+}
+
+.count {
+  margin-left: 4px;
+  color: v-bind("theme.textColor3");
+}
+
+.chip,
+.lesson {
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 14px;
+  background: transparent;
+  font: inherit;
   font-size: 13px;
-  font-weight: normal;
+  color: v-bind("theme.textColor2");
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  flex: none;
 }
 
-.flowchart-iframe {
+.chip.on,
+.lesson.on {
+  border-color: v-bind("theme.primaryColor");
+  background: v-bind("tone('success').background");
+  color: v-bind("tone('success').color");
+}
+
+.chip.on {
+  font-weight: 600;
+}
+
+.lesson b {
+  font-weight: 600;
+}
+
+.lesson-x {
+  margin-left: 2px;
+  opacity: 0.7;
+}
+
+.split {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+}
+
+.list {
+  width: 560px;
+  flex: none;
+  box-sizing: border-box;
+  border-right: 1px solid v-bind("theme.dividerColor");
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* 1366 以下（机房 1280 的屏）左栏收窄一点，右边的代码多留几列 */
+@media (max-width: 1365px) {
+  .list {
+    width: 520px;
+  }
+}
+
+.mobile .list {
   width: 100%;
+  border-right: 0;
+}
+
+.new-bar {
+  height: 32px;
+  flex: none;
+  border: 0;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  background: v-bind("tone('success').background");
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("tone('success').color");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.rows {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  transition: opacity 0.15s;
+}
+
+/* 手机上整页滚：列表按内容撑高（flex: 1 1 0 在不定高的容器里会算成 0） */
+.mobile .rows {
+  flex: none;
+  overflow: visible;
+}
+
+.rows.dim {
+  opacity: 0.55;
+}
+
+.row {
+  height: 40px;
+  box-sizing: border-box;
+  padding: 0 16px 0 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.row:hover {
+  background: v-bind("theme.hoverColor");
+}
+
+.row.on {
+  background: v-bind("tone('success').background");
+}
+
+.row.mobile {
+  height: 60px;
+  padding: 0 14px;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 4px;
+}
+
+.m-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.m-line.sub {
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.m-line .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c-time {
+  width: 44px;
+  flex: none;
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* 按天的分隔行：吸在顶上，往下翻时一直知道在看哪天 */
+.day {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: 26px;
+  box-sizing: border-box;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: v-bind("theme.textColor3");
+  background: v-bind("theme.actionColor");
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.c-user {
+  width: 132px;
+  flex: none;
+  display: flex;
+  overflow: hidden;
+}
+
+.c-problem {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  color: v-bind("theme.textColor2");
+}
+
+.c-problem .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pid {
+  color: v-bind("theme.textColor3");
+}
+
+.ps {
+  flex: none;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  color: v-bind("tone('info').color");
+  background: v-bind("tone('info').background");
+}
+
+.c-case {
+  width: 34px;
+  flex: none;
+  text-align: right;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.c-state {
+  width: 104px;
+  flex: none;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.c-lock {
+  width: 14px;
+  flex: none;
+  display: flex;
+  color: v-bind("theme.textColor3");
+  opacity: 0.6;
+}
+
+.empty {
+  padding: 48px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: v-bind("theme.textColor3");
+}
+
+.empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: v-bind("theme.textColor2");
+}
+
+.list-foot {
+  height: 44px;
+  flex: none;
+  box-sizing: border-box;
+  padding: 0 16px 0 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.total {
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+  white-space: nowrap;
+}
+
+/* Pagination 组件自带上下 20px 外边距和整行宽，放进这条细栏里要收掉 */
+.list-foot :deep(.pager) {
+  margin: 0;
+  width: auto;
+}
+
+.pane-empty {
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: v-bind("theme.textColor3");
+  background: v-bind("theme.bodyColor");
+}
+
+.mobile-pane {
   height: 100%;
-  border: none;
-  display: block;
+  display: flex;
+}
+
+.mobile-pos {
+  align-self: center;
+  color: v-bind("theme.textColor3");
 }
 </style>
diff --git a/apps/web/src/oj/submission/utils.ts b/apps/web/src/oj/submission/utils.ts
new file mode 100644
index 0000000..60edc43
--- /dev/null
+++ b/apps/web/src/oj/submission/utils.ts
@@ -0,0 +1,36 @@
+import { parseTime } from "utils/functions"
+
+/**
+ * 提交时间的显示：今天的只写钟点，别的日子带上月日，跨年再带年份。列表里一眼看的是
+ * 「刚才」还是「以前」，完整的年月日时分秒只会把这一列撑宽。
+ * 日历按东八区算（parseTime），不跟浏览器时区走。
+ */
+export function submissionTimeText(time: string, withSeconds = false) {
+  const clock = parseTime(time, withSeconds ? "HH:mm:ss" : "HH:mm")
+  const day = parseTime(time, "YYYY-MM-DD")
+  const now = parseTime(new Date(), "YYYY-MM-DD")
+  if (day === now) return clock
+  if (day.slice(0, 4) === now.slice(0, 4)) return `${parseTime(time, "M月D日")} ${clock}`
+  return `${parseTime(time, "YYYY年M月D日")} ${clock}`
+}
+
+/** 列表里每行只写钟点，日期在分隔行上（submissionDayText） */
+export function submissionClockText(time: string) {
+  return parseTime(time, "HH:mm")
+}
+
+/** 分隔行上的日子：今天 / 昨天 / 9月28日（跨年带年份） */
+export function submissionDayText(time: string) {
+  const day = parseTime(time, "YYYY-MM-DD")
+  const now = parseTime(new Date(), "YYYY-MM-DD")
+  const yesterday = parseTime(new Date(Date.now() - 86_400_000), "YYYY-MM-DD")
+  if (day === now) return "今天"
+  if (day === yesterday) return `昨天 · ${parseTime(time, "M月D日")}`
+  if (day.slice(0, 4) === now.slice(0, 4)) return parseTime(time, "M月D日")
+  return parseTime(time, "YYYY年M月D日")
+}
+
+/** 班级下拉的标签：`253` → `25计算机3班`，和统计面板、班级 PK 同一个写法 */
+export function classLabel(className: string) {
+  return `${className.slice(0, 2)}计算机${className.slice(2)}班`
+}
diff --git a/apps/web/src/utils/types.ts b/apps/web/src/utils/types.ts
index bb74a2a..ea4c531 100644
--- a/apps/web/src/utils/types.ts
+++ b/apps/web/src/utils/types.ts
@@ -268,6 +268,8 @@ export interface SubmissionListPayload {
   username?: string
   /** "1" = username 精确匹配（默认是「包含」）。协作中老师看某个学生的提交用 */
   exactUsername?: "1"
+  /** 班级（user.class_name，如 `253`），精确匹配；和 username 可以同时用 */
+  className?: string
   contestId?: string
   problemDisplayId?: string
   language: LANGUAGE | ""
@@ -293,7 +295,7 @@ export type { ClassComparison, ClassRankItem, ClassUserRank } from "@oj2/contrac
 export type { ClassActivity, ClassActivityProblem } from "@oj2/contract"
 
 /** 课堂看板：一个班今天这节课的题 × 全班学生 */
-export type { ClassBoard, ClassBoardStudent, ClassBoardCell } from "@oj2/contract"
+export type { ClassBoard, ClassBoardStudent, ClassBoardCell, ClassLesson } from "@oj2/contract"
 
 /** 知识点地图：每个知识点做对几道、在第几档，只给自己看 */
 export type { KnowledgeLevel, KnowledgeMap } from "@oj2/contract"