feat(自学): 教程和练一练都留痕，老师能看到谁学了多少

自学模块以前一个字节都不落库：读到第几课只存在浏览器的 localStorage 里，
练一练的对错是组件内的一个 ref，刷新即失忆。老师能看到的只有「谁交了题」。

现在两张新表：
* tutorial_progress —— 一个学生 × 一课，记打开次数和累计停留秒数
* exercise_attempt  —— 一个学生 × 一道练习，记试了几次、错了几次、
  第几次做对的、最后一次做错时填的什么

都存聚合不存流水。练习那张表尤其明显：流水会随着学生反复点提交无限长，
而多出来的行回答不了任何新问题 ——「他第 3 次和第 5 次都选了 B」对老师
没有意义，「他试了 7 次才对」有。

停留时长只在页面可见、且十分钟内有过操作时才计。机房的电脑经常开着页面
就走了，不设这道闸的话「停留时长」会变成「电脑开机时长」，老师看到的
数字全是假的。换课、切标签页、关窗口都会先把攒着的秒数冲给**离开的那一课**。

练一练的对错仍然是前端判的：答案本来就随题面一起下发到浏览器，后端再判
一遍也挡不住任何人，只是重复实现七套判题。所以这是教学观察数据，不是成绩。
`last_wrong_answer` 存的是前端拼好的一句人话（「选了 C」「顺序 3-1-2」），
不是原始作答结构 —— 七种题型形状各不相同，存结构就得在后台按题型各写一套
渲染，而老师要看的只是他错在哪。

顺带修掉预测输出题的一个老问题：它的 `submitted` 一旦为真就不再收回，而
`allCorrect` 是跟着输入实时算的，于是学生错一次之后把答案改对，界面直接
跳成「输出正确！」、提交按钮同时禁用，submit() 再也执行不到 —— 这道题
**永远不会被记成做对**。排序/连线/找错/分组四种题本来就在交互处把 submitted
置回 false，只有这里漏了，按同一套补上。

学生端：目录每课显示「✓ 已读 · 11 分钟」和「练一练 3/5」。教程保持免登录
可读，未登录只是不留痕，并明说一句。

老师端：后台新开「自学情况」（教师及以上可进），三个 tab ——
按学生（默认把读得最少的排在最前，这张表要回答的是谁还没开始）、
按练习（每道题的正确率、一次做对几人、做对的人平均试几次；展开看逐人明细
和他们最后错在哪）、按课程。班级框填 3-4 位是具体班级，1-2 位当年级前缀。

外键用了库级 CASCADE，和 Django 建的那批 NO ACTION 不同：删教程、删用户
不必再记得回来手工清子表。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GW5ef6C2kRW8Ru27ghCaUu

apps/web/src/oj/learn/index.vue

@@ -9,20 +9,13 @@
     >
       <n-gi :span="1" class="learn-col">
         <n-card title="教程目录" :bordered="false" size="small">
-          <n-list hoverable clickable>
-            <n-list-item
-              v-for="(item, index) in titles"
-              :key="item.id"
-              @click="goToLesson(index + 1)"
-            >
-              <n-text
-                :type="step === index + 1 ? 'primary' : undefined"
-                :strong="step === index + 1"
-              >
-                {{ index + 1 }}. {{ item.title }}
-              </n-text>
-            </n-list-item>
-          </n-list>
+          <LessonList
+            :titles="titles"
+            :step="step"
+            :progress="progress"
+            :traced="traced"
+            @select="goToLesson"
+          />
         </n-card>
       </n-gi>
 
@@ -69,20 +62,13 @@
     <template v-if="tutorial.id && !isDesktop">
       <n-tabs type="line" animated v-model:value="activeTab">
         <n-tab-pane name="catalog" tab="目录">
-          <n-list hoverable clickable>
-            <n-list-item
-              v-for="(item, index) in titles"
-              :key="item.id"
-              @click="goToLesson(index + 1)"
-            >
-              <n-text
-                :type="step === index + 1 ? 'primary' : undefined"
-                :strong="step === index + 1"
-              >
-                {{ index + 1 }}. {{ item.title }}
-              </n-text>
-            </n-list-item>
-          </n-list>
+          <LessonList
+            :titles="titles"
+            :step="step"
+            :progress="progress"
+            :traced="traced"
+            @select="goToLesson"
+          />
         </n-tab-pane>
 
         <n-tab-pane name="content" :tab="`第 ${step} 课`">
@@ -140,11 +126,19 @@
 <script setup lang="ts">
 import { MdPreview } from "md-editor-v3"
 import "md-editor-v3/lib/preview.css"
-import type { Tutorial, Exercise, LANGUAGE } from "utils/types"
-import { getTutorial, getTutorials, getExercises } from "../api"
+import type { Tutorial, Exercise, LANGUAGE, TutorialProgress } from "utils/types"
+import {
+  getTutorial,
+  getTutorials,
+  getExercises,
+  getLearnProgress,
+} from "../api"
 import { parseExercises } from "./composables/useExerciseParse"
+import { useLearnTrace } from "./composables/useLearnTrace"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { useLearnProgress } from "shared/composables/learnProgress"
+import { useUserStore } from "shared/store/user"
+import LessonList from "./components/LessonList.vue"
 
 const ExerciseWidget = defineAsyncComponent(
   () => import("./components/ExerciseWidget.vue"),
@@ -158,6 +152,10 @@ const route = useRoute()
 const router = useRouter()
 const { isDesktop } = useBreakpoints()
 const { learnStep } = useLearnProgress()
+const userStore = useUserStore()
+
+// 未登录也能看教程（学习页本来就不要求登录），只是不留痕
+const traced = computed(() => userStore.isAuthed)
 
 const step = computed(() => {
   const value = route.params.step as string | undefined
@@ -180,6 +178,7 @@ const editorLanguage = computed<LANGUAGE>(() =>
   tutorial.value.type === "c" ? "C" : "Python3",
 )
 const titles = ref<{ id: number; title: string }[]>([])
+const progress = ref<Record<number, TutorialProgress>>({})
 const exercises = ref<Exercise[]>([])
 const activeTab = ref("content")
 const isEmpty = ref(false)
@@ -188,6 +187,12 @@ const segments = computed(() =>
   parseExercises(tutorial.value.content ?? "", exercises.value),
 )
 
+// 留痕的计时器。tutorial.id 变了才算换课 —— 用 step 会在内容还没加载好时就上报
+useLearnTrace(
+  computed(() => tutorial.value.id ?? 0),
+  traced,
+)
+
 const isFirstLesson = computed(() => step.value === 1)
 const isLastLesson = computed(() => step.value === titles.value.length)
 
@@ -204,6 +209,23 @@ function goToNextLesson() {
   if (step.value < titles.value.length) goToLesson(step.value + 1)
 }
 
+/**
+ * 拉自己的自学留痕，给目录打勾。失败就当没有 —— 目录少几个勾不影响上课，
+ * 但弹个错会把「我是不是没学」的焦虑塞给学生。
+ */
+async function loadProgress() {
+  if (!traced.value) {
+    progress.value = {}
+    return
+  }
+  try {
+    const rows = await getLearnProgress(type.value)
+    progress.value = Object.fromEntries(rows.map((row) => [row.tutorialId, row]))
+  } catch {
+    progress.value = {}
+  }
+}
+
 async function init() {
   const res1 = await getTutorials(type.value)
   titles.value = res1
@@ -217,6 +239,7 @@ async function init() {
   if (res2.status === "fulfilled") tutorial.value = res2.value
   exercises.value = exs.status === "fulfilled" ? exs.value : []
   learnStep.value[type.value] = step.value
+  loadProgress()
 }
 
 watch(
@@ -226,6 +249,10 @@ watch(
   },
   { immediate: true },
 )
+
+// 在教程页上登录/退出时把目录的勾重新拉一遍。学生多半是先点开教程、
+// 被弹窗拦下才登录的，不盯着这个的话勾要等他刷新页面才出现
+watch(traced, loadProgress)
 </script>
 
 <style scoped>