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

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

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

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import type { ProjectGroup } from "../lesson"
+
+/** 项目的小方块图标：智能家居一个房子、智慧农业一片叶子…… */
+defineProps<{ icon: string; tone: ProjectGroup["tone"]; size?: number }>()
+</script>
+
+<template>
+  <span
+    class="tile"
+    :class="tone"
+    :style="{ width: `${size ?? 36}px`, height: `${size ?? 36}px` }"
+    aria-hidden="true"
+  >
+    <Icon :icon="icon" :width="Math.round((size ?? 36) * 0.55)" />
+  </span>
+</template>
+
+<style scoped>
+.tile {
+  flex-shrink: 0;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+.blue {
+  background: rgba(32, 128, 240, 0.12);
+  color: #1d5bb5;
+}
+.purple {
+  background: rgba(114, 46, 209, 0.1);
+  color: #5b3fa8;
+}
+.green {
+  background: rgba(24, 160, 88, 0.12);
+  color: #0c6b3b;
+}
+.orange {
+  background: rgba(240, 160, 32, 0.16);
+  color: #8a5200;
+}
+.gray {
+  background: rgba(128, 128, 128, 0.12);
+  color: inherit;
+}
+html.dark .blue {
+  color: #70c0e8;
+}
+html.dark .purple {
+  color: #b9a2f0;
+}
+html.dark .green {
+  color: #63e2b7;
+}
+html.dark .orange {
+  color: #f2c97d;
+}
+</style>