feat(后台): 手机上也能用了——菜单收进左边抽屉，列表一行一张卡，不用再横着滑

- 侧栏手机上不再占一列图标，顶栏左边 ☰ 拉出整张菜单，按返回键先关菜单
- 题目、比赛、用户、公告、题单列表手机上一项一张卡：名字一行、小字一行、按钮一行，
  「学生看得到」开关单独一列靠右
- 卡点分析、AI 报告手机上点开一项整屏看，返回键关掉；年度趋势、自学情况、首页改成上下排
- 出题页、教程编辑、题单编辑、标签、设置手机上排成一列；测试数据「删掉」手机上常驻
- 弹框一律收进屏幕宽度

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

apps/web/src/admin/learn/ExerciseAttempts.vue

@@ -3,13 +3,22 @@ import { NText } from "naive-ui"
 import { getLearnExerciseAttempts } from "admin/api"
 import { parseTime } from "utils/functions"
 import type { LearnExerciseAttempt } from "utils/types"
+import UserName from "shared/components/UserName.vue"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const props = defineProps<{ exerciseId: number; className: string }>()
+const { isMobile } = useBreakpoints()
 
 const loading = ref(true)
 const rows = ref<LearnExerciseAttempt[]>([])
 
-const columns: DataTableColumn<LearnExerciseAttempt>[] = [
+function renderResult(row: LearnExerciseAttempt) {
+  return row.solved
+    ? h(NText, { type: "success" }, () => `做对了（第 ${row.attemptsToSolve} 次）`)
+    : h(NText, { type: "error" }, () => "还没做对")
+}
+
+const desktopColumns: DataTableColumn<LearnExerciseAttempt>[] = [
   { title: "班级", key: "className", width: 80 },
   { title: "学号", key: "username", width: 140 },
   {
@@ -22,10 +31,7 @@ const columns: DataTableColumn<LearnExerciseAttempt>[] = [
     title: "结果",
     key: "solved",
     width: 130,
-    render: (row) =>
-      row.solved
-        ? h(NText, { type: "success" }, () => `做对了（第 ${row.attemptsToSolve} 次）`)
-        : h(NText, { type: "error" }, () => "还没做对"),
+    render: renderResult,
   },
   { title: "提交次数", key: "attempts", width: 100, sorter: "default" },
   {
@@ -45,6 +51,27 @@ const columns: DataTableColumn<LearnExerciseAttempt>[] = [
   },
 ]
 
+/** 手机上七列放不下：一个人一格，名字和结果一行，下面一行小字是交了几次、最后错在哪 */
+const mobileColumns: DataTableColumn<LearnExerciseAttempt>[] = [
+  {
+    title: "学生",
+    key: "username",
+    render: (row) =>
+      h("div", { class: "m-row" }, [
+        h("div", { class: "m-line" }, [h(UserName, { username: row.username }), renderResult(row)]),
+        h(
+          NText,
+          { depth: 3, class: "m-sub" },
+          () =>
+            `交了 ${row.attempts} 次 · ${parseTime(row.lastAttemptAt, "M月D日 HH:mm")}` +
+            (row.lastWrongAnswer ? ` · 最后错在 ${row.lastWrongAnswer}` : ""),
+        ),
+      ]),
+  },
+]
+
+const columns = computed(() => (isMobile.value ? mobileColumns : desktopColumns))
+
 onMounted(async () => {
   try {
     rows.value = await getLearnExerciseAttempts(props.exerciseId, {
@@ -72,3 +99,19 @@ onMounted(async () => {
     style="padding: 16px 0"
   />
 </template>
+
+<style scoped>
+:deep(.m-row) {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:deep(.m-line) {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+:deep(.m-sub) {
+  font-size: 12px;
+}
+</style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
 import type { LearnBoard, LearnBoardStudent, LearnExerciseProgress } from "utils/types"
 import { getLearnBoard, getLearnExercises } from "admin/api"
 import { parseTime, readableDuration } from "utils/functions"
@@ -18,6 +19,7 @@ import ExerciseAttempts from "./ExerciseAttempts.vue"
  * 不选班就按排名页同一套规则猜老师在教哪个班。
  */
 const configStore = useConfigStore()
+const theme = useThemeVars()
 
 const KIND: Record<string, string> = {
   mcq: "选择",
@@ -148,7 +150,7 @@ onMounted(load)
         :options="classOptions"
         filterable
         placeholder="选班级"
-        style="width: 170px"
+        class="class-select"
       />
     </div>
 
@@ -257,7 +259,7 @@ onMounted(load)
                 v-model:value="lessonId"
                 :options="lessonOptions"
                 size="small"
-                style="width: 170px"
+                class="lesson-select"
               />
             </div>
             <div v-if="!lessonExercises.length" class="muted none">这课没有练一练</div>
@@ -595,4 +597,63 @@ onMounted(load)
 .flag {
   color: var(--learn-orange-text);
 }
+.class-select,
+.lesson-select {
+  width: 170px;
+}
+
+/* 手机上：方块格在自己的框里横着滑（名字列钉在左边），练一练排到下面 */
+@media (max-width: 768px) {
+  .top {
+    flex-wrap: wrap;
+  }
+  .top .title {
+    width: 100%;
+  }
+  .top .grow {
+    display: none;
+  }
+  .class-select {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+  .stats {
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  .stat {
+    padding: 10px 12px;
+  }
+  .stat-label {
+    font-size: 12px;
+  }
+  .stat-value {
+    font-size: 18px;
+  }
+  .unit {
+    font-size: 13px;
+  }
+  .main {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .c-name {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    width: 96px;
+    margin-left: -16px;
+    padding-left: 16px;
+    background: v-bind("theme.bodyColor");
+  }
+  .side {
+    width: auto;
+  }
+  .lesson-select {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+}
 </style>