feat(web-admin): 手机小屏适配（1Panel 风格抽屉导航）并补齐移动端自动化验证

## 布局与交互（沿用 1Panel 风格）

- 新增 `src/composables/useResponsive.ts`：断点 768 / 992px + resize/orientationchange 监听
- `AdminLayout.vue`：
  - >992px 桌面保持原样（210px 深色侧栏 + 顶栏连接状态 + "已接收 N 条实时事件"）
  - <=768px 手机：侧边栏不再渲染，顶栏出现汉堡按钮（`aria-expanded` 标记状态），
    点击唤出 240px 深色抽屉菜单，点菜单项自动收起；顶栏显示当前页标题，
    用户菜单收成头像图标（身份信息移入下拉菜单首行）
  - 复用同一套 `.ch-sidebar` 样式，抽屉内容与桌面侧栏视觉一致
- `styles/index.css` 增加全局响应式规则：工具栏控件铺满整行、`.table-card` 表格卡片内横向滚动、
  弹窗 `calc(100vw - 24px)`、消息框/抽屉自适应、`.stat-grid` 小屏两列、分页居中、标签页可横滑
- 各视图：7 个表格卡片加 `.table-card`；班级详情/作业详情的 `el-descriptions` 小屏降为单列；
  登录页卡片自适应宽度并加安全内边距

## 自动化验证（scripts/ui-smoke）

- 新增 `runMobileChecks`：把窗口真实缩到 390×844，用真实点击验证 7 项——
  侧边栏收起 + 汉堡出现、抽屉滑出且菜单完整、抽屉内点击"通知发布"跳转并收起、
  页面无横向溢出（表格自身滚动不计入）、表格在卡片内可滚动、工具栏控件铺满、弹窗宽度自适应
- 移动端截图留档到 `docs/screenshots/web-mobile/`（`UI_SMOKE_SHOTS_DIR` 可覆盖）
- 踩坑修复：隐藏窗口下 Chromium 会冻结 CSS transition，Vue `<Transition>` 收不到 transitionend，
  Element Plus 抽屉会卡在 `enter-from`（表现为"点了没反应"）——移动端检查改为 `showInactive()` 并断言
  "抽屉滑到位/收起到位"，而不是只看元素是否存在

## 安装包升级健壮性

- `scripts/nsis/server-installer.nsi`：覆盖安装前先 `RMDir /r web|server|node_modules`，
  避免旧 hash 分片、旧 dist 模块、旧依赖残留导致"新旧版本混装"
  （此前 web/assets 里累积了 4 份 AdminLayout 分片）

## 验证结果（均在安装后的生产实例上）

- `pnpm verify:web` 15/15 ✅（8 项原有 + 7 项移动端）
- `pnpm verify:e2e` 62/62 ✅
- 覆盖安装：`.env` 与数据库保持不变，`web/assets` 只剩当前版本分片，服务 `healthz` 正常
- `pnpm lint` / `format:check` / `typecheck` 全部通过

packages/web-admin/src/views/ClassesView.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import {
   SOCKET_EVENTS,
@@ -12,8 +12,13 @@ import {
 } from '@classhelper/shared';
 import { classApi, courseApi, teacherApi } from '@/api';
 import { useRealtimeStore } from '@/stores/realtime';
+import { useResponsive } from '@/composables/useResponsive';
 
 const realtime = useRealtimeStore();
+const { isMobile } = useResponsive();
+
+/** 小屏下详情描述改为单列，避免文字被压成竖排 */
+const detailColumns = computed(() => (isMobile.value ? 1 : 3));
 
 const loading = ref(false);
 const classes = ref<ClassDto[]>([]);
@@ -238,7 +243,7 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="never" class="table-card">
       <el-table v-loading="loading" :data="classes" empty-text="暂无班级，点击右上角新建">
         <el-table-column prop="name" label="班级" min-width="140" />
         <el-table-column prop="grade" label="年级" width="100" />
@@ -289,7 +294,7 @@ onUnmounted(() => {
     <!-- 班级详情 -->
     <el-drawer v-model="detailVisible" size="60%" :title="detail ? `${detail.name} · 详情` : '班级详情'">
       <div v-loading="detailLoading">
-        <el-descriptions v-if="detail" :column="3" border size="small">
+        <el-descriptions v-if="detail" :column="detailColumns" border size="small">
           <el-descriptions-item label="年级">{{ detail.grade }}</el-descriptions-item>
           <el-descriptions-item label="班主任">{{ detail.teacher?.name ?? '-' }}</el-descriptions-item>
           <el-descriptions-item label="学生数">{{ detail.students.length }}</el-descriptions-item>