feat(自学): 自学重做——首页课程地图、读一课按项目分目录、代码块就地运行、学完给题做

- 顶栏「自学」进新的自学首页 /learn：接着学（按服务端记录，不再串到上一个学生）+ 按项目分组的课程地图
- 读一课：左边目录按项目折叠，正文加宽，右边本课大纲带练一练标记；去掉了不能运行的示例代码栏
- 正文里的代码块能改能运行，报错用题目页那套中文解释；读输入的代码出输入框
- 课末：练一练做到几道 → 学完了 → 老师挑的几道题（必会标出来）→ 下一课
- 练一练统一成绿色提交、结果一行字；手机版目录从底部弹出
- 后台：教程列表按项目分组拖动排序，编辑页左写右看、练一练插到光标处、挑相关题；
  自学情况改成方块格 + 还没打开过的名单

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

apps/web/src/oj/learn/components/ExerciseDebug.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ExerciseResult from "./ExerciseResult.vue"
 import type { Exercise, ExerciseDebugData } from "utils/types"
 import { highlightLines } from "../composables/useCodeHighlight"
 import "./exercise-highlight.css"
@@ -83,11 +84,7 @@ function reset() {
 </script>
 
 <template>
-  <n-card style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
-    <template #header>
-      <n-tag type="info" :bordered="false">练一练 · 代码找错</n-tag>
-    </template>
-
+  <div>
     <p style="font-weight: 500; font-size: 16px; margin-bottom: 8px">
       {{ data.question }}
     </p>
@@ -109,20 +106,19 @@ function reset() {
       </div>
     </n-space>
 
-    <n-alert
+    <ExerciseResult
       v-if="submitted"
       :type="allCorrect ? 'success' : 'error'"
       :title="allCorrect ? '找对了！' : '还没找全，红色行是错误所在'"
-      style="margin-top: 12px"
     >
       <template v-if="submitted && data.explanation" #default>
         {{ data.explanation }}
       </template>
-    </n-alert>
+    </ExerciseResult>
 
     <n-space style="margin-top: 12px" :size="8">
-      <n-button type="info" :disabled="locked" @click="submit">提交</n-button>
+      <n-button type="primary" :disabled="locked" @click="submit">提交</n-button>
       <n-button @click="reset">重置</n-button>
     </n-space>
-  </n-card>
+  </div>
 </template>