feat(课堂看板): 做对的格子写第几次做对，点开看他今天交的每一次和代码

- 格子：一次就对的还是「✓」，第 9 次才对的写「✓ 9」
- 点做对的格子弹出方块串（一格一次、从早到晚），停在哪格看哪次的代码，
  默认停在做对前最后错的那次；下面能开这次提交、去提交列表看全部
- 方块配色和代码缓存从统计页的 AttemptSquares 抽到 statistics/attempts.ts 两边共用
- 点开一道题后面板里的题名可以点，新标签打开题目

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/statistics/attempts.ts

@@ -0,0 +1,40 @@
+import { getSubmission } from "oj/api"
+import { SubmissionStatus } from "utils/constants"
+import type { Submission } from "utils/types"
+import type { Tone } from "shared/composables/tone"
+
+/**
+ * 一次提交一格的那串方块（统计页的 AttemptSquares、课堂看板做对格子的轨迹）共用的两样：
+ * 方块的颜色，和停上去看代码时拉的提交。
+ */
+
+/** 对了绿；编译失败、运行时错误、语法规则没过、部分通过橙；判题中蓝；其余红 */
+export function attemptTone(result: number): Tone {
+  if (result === SubmissionStatus.accepted) return "success"
+  if (
+    result === SubmissionStatus.compile_error ||
+    result === SubmissionStatus.runtime_error ||
+    result === SubmissionStatus.ast_check_failed ||
+    result === SubmissionStatus.partial_accepted
+  ) {
+    return "warning"
+  }
+  if (result === SubmissionStatus.pending || result === SubmissionStatus.judging) return "info"
+  return "error"
+}
+
+/**
+ * 代码按提交 id 缓存，整页共用：交了就不会再变，老师在一排方块之间来回对比时
+ * 不用每次都等网络。失败的不进缓存，下次停上去再试。
+ */
+const codeCache = new Map<string, Promise<Submission>>()
+
+export function cachedSubmission(id: string) {
+  let hit = codeCache.get(id)
+  if (!hit) {
+    hit = getSubmission(id)
+    hit.catch(() => codeCache.delete(id))
+    codeCache.set(id, hit)
+  }
+  return hit
+}

apps/web/src/oj/statistics/components/AttemptSquares.vue

@@ -1,20 +1,10 @@
-<script lang="ts">
-import type { Submission } from "utils/types"
-
-/**
- * 代码按提交 id 缓存，整页共用：交了就不会再变，老师在一排方块之间来回对比时
- * 不用每次都等网络。失败的不进缓存，下次停上去再试。
- */
-const codeCache = new Map<string, Submission>()
-</script>
-
 <script setup lang="ts">
 import { useThemeVars } from "naive-ui"
-import { getSubmission } from "oj/api"
-import { JUDGE_STATUS, LANGUAGE_FORMAT_VALUE, SubmissionStatus } from "utils/constants"
+import { JUDGE_STATUS, LANGUAGE_FORMAT_VALUE } from "utils/constants"
 import { parseTime } from "utils/functions"
-import type { SUBMISSION_RESULT } from "utils/types"
-import { useTone, type Tone } from "shared/composables/tone"
+import type { Submission, SUBMISSION_RESULT } from "utils/types"
+import { useTone } from "shared/composables/tone"
+import { attemptTone, cachedSubmission } from "../attempts"
 
 /**
  * 一个人在一道题上的每一次提交，一格一次、从早到晚（设计稿「统计重设计」）。
@@ -31,34 +21,13 @@ const props = withDefaults(
 const tone = useTone()
 const theme = useThemeVars()
 
-function toneOf(result: number): Tone {
-  if (result === SubmissionStatus.accepted) return "success"
-  if (
-    result === SubmissionStatus.compile_error ||
-    result === SubmissionStatus.runtime_error ||
-    result === SubmissionStatus.ast_check_failed ||
-    result === SubmissionStatus.partial_accepted
-  ) {
-    return "warning"
-  }
-  if (result === SubmissionStatus.pending || result === SubmissionStatus.judging) return "info"
-  return "error"
-}
-
 const code = reactive<Record<string, Submission | "loading" | "failed">>({})
 
 async function load(id: string) {
-  const hit = codeCache.get(id)
-  if (hit) {
-    code[id] = hit
-    return
-  }
-  if (code[id] === "loading") return
+  if (code[id] && code[id] !== "failed") return
   code[id] = "loading"
   try {
-    const res = await getSubmission(id)
-    codeCache.set(id, res)
-    code[id] = res
+    code[id] = await cachedSubmission(id)
   } catch {
     code[id] = "failed"
   }
@@ -72,7 +41,7 @@ const cells = computed(() =>
   props.items.map((item, index) => ({
     ...item,
     index: index + 1,
-    color: tone(toneOf(item.result)).solid,
+    color: tone(attemptTone(item.result)).solid,
   })),
 )
 </script>