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

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

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

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

@@ -5,13 +5,16 @@ import { usePagination } from "shared/composables/pagination"
 import { parseTime } from "utils/functions"
 import type { AdminProblemSet } from "utils/types"
 import { getProblemSetList, toggleProblemSetVisible } from "../api"
-import { NButton, NSwitch, NTag } from "naive-ui"
+import { NButton, NSwitch, NTag, useThemeVars } from "naive-ui"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 /**
  * 后台题单列表。难度、状态两列和筛选拿掉了（线上全是简单 / 活跃，「状态 + 可见」合成了「公开」），
  * 换成老师真正关心的：几道题、多少人加入 / 做完、布置到哪天。点一行进一屏编辑
  */
 const router = useRouter()
+const theme = useThemeVars()
+const { isMobile } = useBreakpoints()
 const total = ref(0)
 const problemSets = ref<AdminProblemSet[]>([])
 
@@ -21,14 +24,60 @@ function edit(row: AdminProblemSet) {
   router.push({ name: "admin problemset edit", params: { problemSetId: row.id } })
 }
 
-const columns: DataTableColumn<AdminProblemSet>[] = [
+function renderTitle(row: AdminProblemSet) {
+  return h(NButton, { text: true, onClick: () => edit(row) }, { default: () => row.title })
+}
+
+function renderAssigned(row: AdminProblemSet) {
+  return row.assigning
+    ? h(
+        NTag,
+        { type: "info", size: "small", bordered: false },
+        { default: () => `到 ${parseTime(row.assignedUntil!, "M月D日")}` },
+      )
+    : "—"
+}
+
+function renderVisible(row: AdminProblemSet) {
+  return h(NSwitch, {
+    value: row.visible,
+    size: isMobile.value ? "medium" : "small",
+    rubberBand: false,
+    onUpdateValue: () => toggleVisible(row.id),
+  })
+}
+
+/** 手机上一个题单一张卡：名字一行（点了编辑），题数 · 加入 / 做完 · 奖章 · 创建者 · 日期一行小字 */
+function renderMobileCard(row: AdminProblemSet) {
+  const items = [
+    `${row.problemsCount} 道题`,
+    `${row.participantCount} 人加入 · ${row.completedCount} 人做完`,
+    row.badgeCount ? `${row.badgeCount} 个奖章` : null,
+    row.createdBy.username,
+    parseTime(row.createTime, "YYYY-MM-DD"),
+  ].filter((it): it is string => !!it)
+  return h("div", { class: "m-card" }, [
+    h("div", { class: "m-head" }, [renderTitle(row), row.assigning ? renderAssigned(row) : null]),
+    h(
+      "div",
+      { class: "m-meta" },
+      items.map((text, i) => h("span", { class: "m-item", key: i }, i ? ` · ${text}` : text)),
+    ),
+  ])
+}
+
+const mobileColumns: DataTableColumn<AdminProblemSet>[] = [
+  { title: "题单", key: "title", render: renderMobileCard },
+  { title: "公开", key: "visible", width: 72, align: "center", render: renderVisible },
+]
+
+const desktopColumns: DataTableColumn<AdminProblemSet>[] = [
   { title: "ID", key: "id", width: 70 },
   {
     title: "题单",
     key: "title",
     minWidth: 200,
-    render: (row) =>
-      h(NButton, { text: true, onClick: () => edit(row) }, { default: () => row.title }),
+    render: renderTitle,
   },
   { title: "题数", key: "problemsCount", width: 70 },
   {
@@ -42,14 +91,7 @@ const columns: DataTableColumn<AdminProblemSet>[] = [
     title: "布置",
     key: "assignedUntil",
     width: 130,
-    render: (row) =>
-      row.assigning
-        ? h(
-            NTag,
-            { type: "info", size: "small", bordered: false },
-            { default: () => `到 ${parseTime(row.assignedUntil!, "M月D日")}` },
-          )
-        : "—",
+    render: renderAssigned,
   },
   {
     title: "创建者",
@@ -67,16 +109,12 @@ const columns: DataTableColumn<AdminProblemSet>[] = [
     title: "公开",
     key: "visible",
     width: 80,
-    render: (row) =>
-      h(NSwitch, {
-        value: row.visible,
-        size: "small",
-        rubberBand: false,
-        onUpdateValue: () => toggleVisible(row.id),
-      }),
+    render: renderVisible,
   },
 ]
 
+const columns = computed(() => (isMobile.value ? mobileColumns : desktopColumns))
+
 async function listProblemSets() {
   if (query.page < 1) query.page = 1
   const offset = (query.page - 1) * query.limit
@@ -108,10 +146,37 @@ watch(() => [query.page, query.limit], listProblemSets)
         placeholder="搜题单名字"
         clearable
         @clear="clearQuery"
-        style="width: 220px"
+        :style="{ width: isMobile ? '100%' : '220px' }"
       />
     </template>
   </PageHeader>
-  <n-data-table striped :columns="columns" :data="problemSets" />
+  <n-data-table striped class="set-table" :columns="columns" :data="problemSets" />
   <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
 </template>
+
+<style scoped>
+.set-table :deep(.m-card) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.set-table :deep(.m-head) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.set-table :deep(.m-meta) {
+  font-size: 13px;
+  line-height: 1.5;
+  color: v-bind("theme.textColor3");
+}
+
+.set-table :deep(.m-item) {
+  white-space: nowrap;
+}
+</style>