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

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

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

apps/web/src/admin/achievement/components/AchievementModal.vue

@@ -10,6 +10,7 @@ import {
 } from "admin/api"
 import AchievementIcon from "shared/components/AchievementIcon.vue"
 import { RARITY_LABEL } from "utils/constants"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const rarityOptions = Object.entries(RARITY_LABEL).map(([value, label]) => ({
   label,
@@ -44,6 +45,7 @@ function confirmDelete() {
 }
 
 const message = useMessage()
+const { isMobile } = useBreakpoints()
 const metrics = ref<MetricOption[]>([])
 const saving = ref(false)
 
@@ -115,7 +117,8 @@ async function save() {
     :title="editing ? '编辑成就' : '新建成就'"
     @update:show="emit('update:show', $event)"
   >
-    <n-form label-placement="left" :label-width="80">
+    <!-- 手机上弹框只有 350 宽，标签放到上面，输入框才有地方 -->
+    <n-form :label-placement="isMobile ? 'top' : 'left'" :label-width="80">
       <n-form-item label="名称" required>
         <n-input v-model:value="form.name" placeholder="成就名称" />
       </n-form-item>
@@ -146,7 +149,7 @@ async function save() {
       <n-form-item label="指标" required>
         <n-select v-model:value="form.metric" :options="metricOptions" filterable />
       </n-form-item>
-      <n-form-item v-if="metricHelp" label=" ">
+      <n-form-item v-if="metricHelp" label=" " :show-label="!isMobile">
         <n-text depth="3">{{ metricHelp }}</n-text>
       </n-form-item>
       <n-form-item label="条件">

apps/web/src/admin/achievement/list.vue

@@ -216,4 +216,32 @@ onMounted(load)
 .off-note {
   color: v-bind("theme.errorColor");
 }
+
+/* 手机上指标名放在一组上头，下面两档一行；箭头拿掉（折行之后箭头会单独落在行首） */
+@media (max-width: 768px) {
+  .group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 12px 10px;
+  }
+
+  .metric {
+    width: auto;
+    font-weight: 600;
+  }
+
+  .steps {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .arrow {
+    display: none;
+  }
+
+  .step {
+    min-width: 0;
+  }
+}
 </style>