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` 全部通过

README.md

@@ -1,4 +1,4 @@
-# 班级小助手（Class Helper）
+# 班级小助手（Class Helper）
 
 班级信息管理系统，采用 pnpm monorepo，包含**后端服务**、**Web 管理端**（教师/管理员）与
 **桌面客户端**（学生）三端。核心链路：
@@ -36,12 +36,12 @@
 
 ## 三套交付产物
 
-| 产物                            | 文件                                                                          | 用途                                                                                    |
+| 产物                            | 文件                                                                          | 用途                                                                                         |
-| ------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| ------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| **服务端 + Web 管理端安装程序** | `release-server/班级小助手服务端-0.1.0-x64-setup.exe`（34 MB）                | 装到教师电脑/校服务器即完整系统，**内置 Node 运行时**，双击安装、开机自启、自动建库建号 |
+| **服务端 + Web 管理端安装程序** | `release-server/班级小助手服务端-0.1.0-x64-setup.exe`（34 MB）                | 装到教师电脑/校服务器即完整系统，**内置 Node 运行时**，双击安装、开机自启、自动建库建号      |
-| **学生客户端安装程序**          | `packages/desktop-client/release/班级小助手-0.1.0-x64-setup.exe`（107 MB）    | 学生机安装（NSIS 安装包）                                                               |
+| **学生客户端安装程序**          | `packages/desktop-client/release/班级小助手-0.1.0-x64-setup.exe`（107 MB）    | 学生机安装（NSIS 安装包）                                                                    |
-| **学生客户端单文件版**          | `packages/desktop-client/release/班级小助手-0.1.0-x64-portable.exe`（107 MB） | 免安装直接运行（U 盘分发）                                                              |
+| **学生客户端单文件版**          | `packages/desktop-client/release/班级小助手-0.1.0-x64-portable.exe`（107 MB） | 免安装直接运行（U 盘分发）                                                                   |
-| Web 管理端（PWA）               | 由服务端在 `/` 直接托管                                                       | 浏览器打开即用，可在 Edge/Chrome 中「安装为应用」                                       |
+| Web 管理端（PWA）               | 由服务端在 `/` 直接托管                                                       | 浏览器打开即用，可在 Edge/Chrome 中「安装为应用」；**已适配手机小屏**（1Panel 风格抽屉导航） |
 
 生产部署（Windows 安装包 / Docker + MySQL / 手动部署）请看
 **[docs/production.md](docs/production.md)**。
@@ -172,7 +172,7 @@ pnpm verify:desktop
 ```bash
 # 另开一个终端先启动后端：pnpm dev:server
 pnpm verify:e2e          # 后端 + REST + Socket.IO + RBAC + 上课时段拦截：62 项
-pnpm verify:web          # Web 管理端真实点击（含上课时段紧急通知全屏警告）：8 项
+pnpm verify:web          # Web 管理端真实点击（含手机小屏适配、上课时段紧急通知全屏警告）：15 项
 pnpm verify:desktop      # Electron 客户端（含灵动岛与联网集成）：26 项
 ```
 
@@ -215,7 +215,7 @@ pnpm verify:desktop      # Electron 客户端（含灵动岛与联网集成）
 | `pnpm dist:win`                             | 打包客户端 nsis 安装包 + portable 单文件 EXE                                   |
 | `pnpm dist:all`                             | 服务端安装程序 + 客户端安装程序一起打                                          |
 | `pnpm verify:e2e`                           | 后端端到端验收（62 项，需服务端已启动）                                        |
-| `pnpm verify:web`                           | Web 管理端 UI 真实点击测试（Electron 驱动，8 项）                              |
+| `pnpm verify:web`                           | Web 管理端 UI 真实点击测试（Electron 驱动，15 项，含手机小屏适配）             |
 | `pnpm verify:desktop`                       | EXE 客户端冒烟验证（26 项，含灵动岛行为/像素级截图校验、侧边栏点击与离线回退） |
 | `pnpm typecheck`                            | 全仓库类型检查（含 `vue-tsc`）                                                 |
 | `pnpm lint` / `pnpm lint:fix`               | ESLint 检查 / 自动修复                                                         |
@@ -227,6 +227,59 @@ pnpm verify:desktop      # Electron 客户端（含灵动岛与联网集成）
 | `pnpm db:studio`                            | 打开 Prisma Studio                                                             |
 | `pnpm db:switch:mysql` / `db:switch:sqlite` | 切换数据库 provider                                                            |
 
+## Web 管理端（含手机小屏适配）
+
+布局沿用 **1Panel 风格**：固定深色侧边栏（`#1f2d3d` + 蓝色圆角选中态）+ 白色顶栏（当前页标题/连接状态/用户菜单）+
+浅灰底 + 白色圆角卡片内容区。手机小屏下侧边栏收进抽屉，由顶栏汉堡按钮唤出。
+
+| 断点             | 布局行为                                                                                      |
+| ---------------- | --------------------------------------------------------------------------------------------- |
+| `> 992px` 桌面   | 常驻 210px 深色侧边栏 + 顶栏显示连接状态与"已接收 N 条实时事件"                               |
+| `769–992px` 平板 | 保留侧边栏，内容区内边距压缩（14px）                                                          |
+| `<= 768px` 手机  | 侧边栏**不渲染**，顶栏汉堡按钮 → 240px 深色抽屉菜单；顶栏显示当前页标题；用户菜单收成头像图标 |
+
+手机端细节（1Panel 同款思路：控件纵向铺满、表格卡片内滚动、弹窗自适应）：
+
+| 位置        | 小屏行为                                                                      |
+| ----------- | ----------------------------------------------------------------------------- |
+| 抽屉菜单    | 点汉堡滑出、点菜单项自动收起；`aria-expanded` 标记状态；桌面端侧边栏视觉不变  |
+| 顶栏        | 只保留汉堡 + 当前页标题 + 连接状态圆点 + 头像；身份信息移入用户下拉菜单第一行 |
+| 页面工具栏  | 选择器/搜索框/按钮全部铺满整行（`width: 100%`），方便拇指点击                 |
+| 表格        | 卡片内横向滚动（`.table-card` + `overflow-x: auto`），页面本身不横向滚动      |
+| 弹窗/消息框 | 宽度 `calc(100vw - 24px)`、贴近整屏；表单标签与输入框自适应                   |
+| 详情抽屉    | 宽 86vw；`el-descriptions` 由 2~3 列自动降为单列，避免文字被压成竖排          |
+| 统计卡片    | `.stat-grid` 两列；登录页卡片自适应宽度并保留安全内边距                       |
+
+实拍（`pnpm verify:web` 自动留档到 `docs/screenshots/web-mobile/`）：
+
+| 场景                                      | 截图                                                                  |
+| ----------------------------------------- | --------------------------------------------------------------------- |
+| 手机抽屉菜单                              | ![手机抽屉菜单](docs/screenshots/web-mobile/mobile-1-drawer.png)      |
+| 手机通知页（工具栏铺满 + 表格卡片内滚动） | ![手机通知页](docs/screenshots/web-mobile/mobile-2-notifications.png) |
+| 手机弹窗自适应                            | ![手机弹窗](docs/screenshots/web-mobile/mobile-3-dialog.png)          |
+
+实现位置：`src/composables/useResponsive.ts`（断点 + resize 监听）、`src/layouts/AdminLayout.vue`（抽屉/顶栏）、
+`src/styles/index.css`（全局响应式规则）、各视图表格卡片加 `.table-card`。
+
+`pnpm verify:web` 的 15 项里，后 7 项专门验证手机端（Electron 真实点击 + 真实尺寸窗口）：
+
+| 校验项                                 | 实测结果                                                             |
+| -------------------------------------- | -------------------------------------------------------------------- |
+| 侧边栏收起、顶栏汉堡按钮出现           | ✅ `innerWidth=377` 汉堡=true 桌面侧边栏未渲染                       |
+| 点汉堡滑出抽屉菜单（菜单项完整）       | ✅ 7 项、`left=0`、`transform=none`、遮罩进入动画已结束              |
+| 抽屉里真实点击"通知发布"并自动收起抽屉 | ✅ `path=/notifications`、抽屉 `right=0`（已滑出屏幕）               |
+| 页面无横向溢出                         | ✅ `scrollWidth=377 = innerWidth`，越界元素=无（表格自身滚动不计入） |
+| 表格在卡片内横向滚动                   | ✅ 卡片可视 336px / 内容 576px / 表格 560px                          |
+| 工具栏控件铺满整行                     | ✅ 控件宽 338px（视口 377px）                                        |
+| 弹窗宽度自适应                         | ✅ 弹窗宽 353px、`left=12`（不超出视口且接近整屏）                   |
+
+> 踩坑记录：这套检查必须让窗口**真正可见**（`win.showInactive()`）。
+> Chromium 会冻结隐藏页面的 CSS transition，Vue 的 `<Transition>` 收不到 `transitionend`，
+> Element Plus 抽屉会一直停在 `enter-from`（表现为"点了没反应"）——冒烟里已按"等抽屉滑到位"断言，避免误判。
+
+> 手机访问：与电脑同一局域网时用 `http://<主机IP>:4000` 打开管理端；
+> 支持「添加到主屏幕」（PWA manifest + Service Worker）。
+
 ## EXE 客户端（学生端）
 
 ### 进程结构与安全设置
@@ -532,23 +585,23 @@ pnpm db:migrate && pnpm db:seed
 
 打包产物验证（对最终 EXE 实测，非仅开发产物）：
 
-| 产物                                   | 大小    | 冒烟结果                                                                                               |
+| 产物                                   | 大小    | 冒烟结果                                                                                                 |
-| -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| -------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| 服务端安装程序（内置 Node + Web 端）   | 34MB    | ✅ 静默安装（升级保留 `.env` 与数据库）→ 自动建库建号 → 服务就绪 → **对安装实例跑 62/62 e2e + 8/8 UI** |
+| 服务端安装程序（内置 Node + Web 端）   | 34MB    | ✅ 静默安装（升级保留 `.env` 与数据库）→ 自动建库建号 → 服务就绪 → **对安装实例跑 62/62 e2e + 15/15 UI** |
-| `release/win-unpacked/班级小助手.exe`  | 234.7MB | ✅ 23/23，`packaged: true`，退出码 0                                                                   |
+| `release/win-unpacked/班级小助手.exe`  | 234.7MB | ✅ 23/23，`packaged: true`，退出码 0                                                                     |
-| `release/…-x64-portable.exe`（单文件） | 106.9MB | ✅ 打包后冒烟 **23/23**，`packaged: true`，退出码 0（含灵动岛行为与像素校验）                          |
+| `release/…-x64-portable.exe`（单文件） | 106.9MB | ✅ 打包后冒烟 **23/23**，`packaged: true`，退出码 0（含灵动岛行为与像素校验）                            |
-| `release/…-x64-setup.exe`（客户端）    | 107.2MB | ✅ 构建成功，已嵌入自定义图标；含灵动岛与本次行为修正                                                  |
+| `release/…-x64-setup.exe`（客户端）    | 107.2MB | ✅ 构建成功，已嵌入自定义图标；含灵动岛与本次行为修正                                                    |
 
 当前实测：
 
-| 验证                                                                         | 结果                                |
+| 验证                                                                            | 结果                                |
-| ---------------------------------------------------------------------------- | ----------------------------------- |
+| ------------------------------------------------------------------------------- | ----------------------------------- |
-| `pnpm verify:e2e`（开发环境与**安装后的生产实例**各跑一次）                  | **62/62** ✅                        |
+| `pnpm verify:e2e`（开发环境与**安装后的生产实例**各跑一次）                     | **62/62** ✅                        |
-| `pnpm verify:web`（Web 管理端真实点击 + 上课时段紧急通知 + PWA）             | **8/8** ✅                          |
+| `pnpm verify:web`（Web 管理端真实点击 + 手机小屏适配 + 上课时段紧急通知 + PWA） | **15/15** ✅                        |
-| `pnpm verify:desktop`（客户端冒烟 + 灵动岛行为 + 像素级截图校验 + 离线回退） | **26/26** ✅                        |
+| `pnpm verify:desktop`（客户端冒烟 + 灵动岛行为 + 像素级截图校验 + 离线回退）    | **26/26** ✅                        |
-| `pnpm typecheck` / `pnpm lint` / `pnpm format:check`                         | 全部通过 ✅                         |
+| `pnpm typecheck` / `pnpm lint` / `pnpm format:check`                            | 全部通过 ✅                         |
-| 安装程序完整生命周期（静默安装 → 启停脚本 → 卸载）                           | 通过 ✅                             |
+| 安装程序完整生命周期（静默安装 → 启停脚本 → 卸载）                              | 通过 ✅                             |
-| Docker / Nginx 部署样例                                                      | 文件已提供，本机无 Docker 未实测 ⚠️ |
+| Docker / Nginx 部署样例                                                         | 文件已提供，本机无 Docker 未实测 ⚠️ |
 
 ## 常见问题（本机环境已知坑）
 

packages/web-admin/src/composables/useResponsive.ts

@@ -0,0 +1,51 @@
+import { computed, onMounted, onUnmounted, readonly, ref } from 'vue';
+
+/**
+ * 响应式断点（与 1Panel 风格一致：小屏把侧边栏收进抽屉，内容区单列铺满）。
+ *
+ * - `<= 768px`  手机：侧边栏抽屉化、顶部工具栏铺满、表格卡片内横向滚动
+ * - `769-992px` 平板：保留侧边栏，内容做适度压缩
+ * - `> 992px`   桌面：维持原有双栏布局
+ */
+export const MOBILE_MAX_WIDTH = 768;
+export const TABLET_MAX_WIDTH = 992;
+
+function currentWidth(): number {
+  return typeof window === 'undefined' ? 1280 : window.innerWidth;
+}
+
+/**
+ * 视口响应式状态。
+ * 同一时刻可以有多个组件使用（各自持有监听），只做一次 `innerWidth` 读取 + resize 监听。
+ */
+export function useResponsive() {
+  const width = ref(currentWidth());
+
+  const sync = (): void => {
+    width.value = currentWidth();
+  };
+
+  onMounted(() => {
+    sync();
+    window.addEventListener('resize', sync, { passive: true });
+    window.addEventListener('orientationchange', sync, { passive: true });
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', sync);
+    window.removeEventListener('orientationchange', sync);
+  });
+
+  const isMobile = computed(() => width.value <= MOBILE_MAX_WIDTH);
+  const isTablet = computed(() => width.value > MOBILE_MAX_WIDTH && width.value <= TABLET_MAX_WIDTH);
+  const isDesktop = computed(() => width.value > TABLET_MAX_WIDTH);
+
+  return {
+    width: readonly(width),
+    isMobile,
+    isTablet,
+    isDesktop,
+    /** 手动同步一次（例如窗口尺寸被外部改变后） */
+    sync,
+  };
+}

packages/web-admin/src/layouts/AdminLayout.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import { authApi } from '@/api';
 import { useAuthStore } from '@/stores/auth';
 import { useRealtimeStore } from '@/stores/realtime';
+import { useResponsive } from '@/composables/useResponsive';
 import { APP_TITLE } from '@/config';
 
 const route = useRoute();
 const router = useRouter();
 const auth = useAuthStore();
 const realtime = useRealtimeStore();
+const { isMobile } = useResponsive();
 
 const menuItems = [
   { path: '/dashboard', title: '仪表盘', icon: 'Odometer' },
@@ -25,6 +27,23 @@ const menuItems = [
 /** 高亮当前菜单：直接比较路由路径，避免依赖路由名 */
 const activeMenu = computed(() => route.path);
 
+/** 顶栏显示的当前页面标题（小屏下替代侧边栏的"我在哪"提示，1Panel 同款做法） */
+const currentTitle = computed(() => menuItems.find((item) => item.path === route.path)?.title ?? APP_TITLE);
+
+/** 小屏：侧边栏收进抽屉，由顶栏汉堡按钮唤出 */
+const drawerVisible = ref(false);
+
+watch(
+  () => route.path,
+  () => {
+    drawerVisible.value = false;
+  },
+);
+
+watch(isMobile, (mobile) => {
+  if (!mobile) drawerVisible.value = false;
+});
+
 /**
  * 菜单点击回调。
  * 注意：el-menu 的 @select 抛出的是 el-menu-item 的 index（这里即路由路径），
@@ -32,6 +51,7 @@ const activeMenu = computed(() => route.path);
  */
 function handleMenuSelect(index: string): void {
   void router.push(index);
+  drawerVisible.value = false;
 }
 
 /** 开发期自检：菜单路径必须存在于路由表中，防止再次出现"点了没反应" */
@@ -102,7 +122,8 @@ async function submitPassword(): Promise<void> {
 
 <template>
   <el-container class="layout">
-    <el-aside width="210px" class="layout-aside">
+    <!-- 桌面/平板：常驻深色侧边栏 -->
+    <el-aside v-if="!isMobile" width="210px" class="layout-aside ch-sidebar">
       <div class="brand">
         <el-icon :size="22"><School /></el-icon>
         <span class="brand-text">班级小助手</span>
@@ -115,14 +136,35 @@ async function submitPassword(): Promise<void> {
       </el-menu>
     </el-aside>
 
-    <el-container>
+    <el-container class="layout-body">
       <el-header class="layout-header">
         <div class="header-left">
-          <span class="header-title">{{ APP_TITLE }}</span>
+          <!-- 小屏：汉堡按钮唤出抽屉菜单 -->
-          <el-tag :type="connectionType" size="small" effect="light">
+          <button
+            v-if="isMobile"
+            type="button"
+            class="nav-toggle"
+            aria-label="打开菜单"
+            :aria-expanded="drawerVisible ? 'true' : 'false'"
+            @click="drawerVisible = true"
+          >
+            <el-icon :size="20"><Menu /></el-icon>
+          </button>
+          <span class="header-title">{{ isMobile ? currentTitle : APP_TITLE }}</span>
+          <el-tag v-if="!isMobile" :type="connectionType" size="small" effect="light">
             <span class="header-conn">{{ connectionText }}</span>
           </el-tag>
-          <el-tag v-if="realtime.eventCount > 0" size="small" type="info" effect="plain">
+          <el-tag
+            v-else
+            :type="connectionType"
+            size="small"
+            effect="light"
+            class="header-conn-dot"
+            :title="connectionText"
+          >
+            <span class="conn-dot" :class="`conn-${connectionType}`"></span>
+          </el-tag>
+          <el-tag v-if="realtime.eventCount > 0 && !isMobile" size="small" type="info" effect="plain">
             已接收 {{ realtime.eventCount }} 条实时事件
           </el-tag>
         </div>
@@ -131,13 +173,16 @@ async function submitPassword(): Promise<void> {
           <el-dropdown trigger="click">
             <span class="user-chip">
               <el-icon><UserFilled /></el-icon>
-              {{ auth.displayName }}
+              <template v-if="!isMobile">
-              <el-tag size="small" type="info" effect="plain">{{ auth.roleLabel }}</el-tag>
+                {{ auth.displayName }}
+                <el-tag size="small" type="info" effect="plain">{{ auth.roleLabel }}</el-tag>
+              </template>
               <el-icon><ArrowDown /></el-icon>
             </span>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item @click="passwordVisible = true">
+                <el-dropdown-item disabled>{{ auth.displayName }} · {{ auth.roleLabel }}</el-dropdown-item>
+                <el-dropdown-item divided @click="passwordVisible = true">
                   <el-icon><Lock /></el-icon>
                   修改密码
                 </el-dropdown-item>
@@ -158,6 +203,28 @@ async function submitPassword(): Promise<void> {
       </el-main>
     </el-container>
 
+    <!-- 小屏抽屉菜单（1Panel 风格：深色侧栏内容与桌面端完全一致） -->
+    <el-drawer
+      v-model="drawerVisible"
+      direction="ltr"
+      size="240px"
+      :with-header="false"
+      class="ch-nav-drawer"
+    >
+      <div class="ch-sidebar ch-sidebar-drawer">
+        <div class="brand">
+          <el-icon :size="22"><School /></el-icon>
+          <span class="brand-text">班级小助手</span>
+        </div>
+        <el-menu :default-active="activeMenu" class="layout-menu" @select="handleMenuSelect">
+          <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
+            <el-icon><component :is="item.icon" /></el-icon>
+            <span>{{ item.title }}</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </el-drawer>
+
     <el-dialog v-model="passwordVisible" title="修改密码" width="420px">
       <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="90px">
         <el-form-item label="当前密码" prop="currentPassword">
@@ -181,11 +248,14 @@ async function submitPassword(): Promise<void> {
 <style scoped>
 .layout {
   height: 100vh;
+  height: 100dvh;
+}
+
+.layout-body {
+  min-width: 0;
 }
 
 .layout-aside {
-  background: #1f2d3d;
-  color: #fff;
   display: flex;
   flex-direction: column;
 }
@@ -232,16 +302,40 @@ async function submitPassword(): Promise<void> {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  padding: 0 16px;
+}
+
+.nav-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-right: 2px;
+  border: none;
+  border-radius: 8px;
+  background: #f2f3f5;
+  color: #303133;
+  cursor: pointer;
+  transition: background 0.18s ease;
+}
+
+.nav-toggle:hover {
+  background: #e6e8eb;
 }
 
 .header-left {
   display: flex;
   align-items: center;
   gap: 10px;
+  min-width: 0;
 }
 
 .header-title {
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .header-conn {
@@ -251,6 +345,7 @@ async function submitPassword(): Promise<void> {
 .header-right {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
 }
 
 .user-chip {
@@ -266,4 +361,37 @@ async function submitPassword(): Promise<void> {
   padding: 0;
   overflow-y: auto;
 }
+
+/* 小屏：顶栏更紧凑，正文留出安全区 */
+@media (max-width: 768px) {
+  .layout-header {
+    height: var(--ch-header-height);
+    padding: 0 10px;
+    gap: 8px;
+  }
+
+  .header-title {
+    font-size: 15px;
+  }
+}
+</style>
+
+<style>
+/* 侧边栏配色放在全局：桌面 asider 与移动端抽屉复用同一套样式（抽屉内容在 teleport 中，scoped 样式不生效） */
+.ch-sidebar {
+  background: #1f2d3d;
+  color: #fff;
+}
+
+.ch-sidebar-drawer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 小屏抽屉：去掉 Element Plus 默认内边距，让深色侧栏铺满 */
+.ch-nav-drawer .el-drawer__body {
+  padding: 0;
+  overflow: hidden;
+}
 </style>

packages/web-admin/src/styles/index.css

@@ -2,6 +2,9 @@
   --ch-bg: #f5f7fa;
   --ch-card-radius: 10px;
   --ch-border: #e4e7ed;
+  /* 1Panel 风格：固定顶栏 + 深色侧栏 */
+  --ch-header-height: 56px;
+  --ch-aside-width: 210px;
 }
 
 * {
@@ -20,6 +23,8 @@ body {
   font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background: var(--ch-bg);
   color: #303133;
+  /* 小屏上禁止整页横向滚动（内容用卡片内滚动承载） */
+  overflow-x: hidden;
 }
 
 .page {
@@ -117,3 +122,143 @@ body {
   background: #f56c6c;
   margin-right: 6px;
 }
+
+/* ---------------------------------------------------------------- 小屏适配 */
+
+/*
+ * 断点：<=768px 手机（侧边栏抽屉化、工具栏铺满、表格卡片内横向滚动），
+ *       769-992px 平板（保留侧边栏，适度压缩），>992px 桌面（保持原样）。
+ */
+
+/* 平板：内容区收紧一点，避免横向滚动 */
+@media (max-width: 992px) {
+  .page {
+    padding: 14px 14px 20px;
+  }
+
+  .page-header {
+    margin-bottom: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page {
+    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .page-header {
+    margin-bottom: 10px;
+    gap: 8px;
+  }
+
+  .page-title {
+    font-size: 16px;
+  }
+
+  .page-subtitle {
+    font-size: 12px;
+  }
+
+  /* 工具栏：控件纵向铺满，方便拇指点击 */
+  .toolbar {
+    width: 100%;
+    gap: 8px;
+  }
+
+  .toolbar > .el-select,
+  .toolbar > .el-input,
+  .toolbar > .el-date-editor,
+  .toolbar > .el-input-number,
+  .toolbar > .el-dropdown,
+  .toolbar > .el-button {
+    width: 100% !important;
+  }
+
+  .toolbar > .el-button {
+    justify-content: center;
+  }
+
+  /* 统计卡片：小屏两列 */
+  .stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .stat-card {
+    padding: 12px;
+  }
+
+  .stat-value {
+    font-size: 22px;
+  }
+
+  /* 表格：放进卡片内横向滚动，避免整页左右晃动 */
+  .table-card > .el-card__body {
+    padding: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .table-card .el-table {
+    min-width: 560px;
+  }
+
+  .table-card .el-table__inner-wrapper {
+    min-width: 100%;
+  }
+
+  /* 弹窗 / 消息框 / 抽屉：小屏自适应宽度 */
+  .el-dialog {
+    width: calc(100vw - 24px) !important;
+    max-width: 560px;
+    margin: 10px auto !important;
+  }
+
+  .el-dialog__body {
+    padding: 12px 14px !important;
+  }
+
+  .el-dialog__header {
+    padding: 14px 14px 6px !important;
+  }
+
+  .el-message-box {
+    width: calc(100vw - 40px) !important;
+  }
+
+  .el-drawer.ltr,
+  .el-drawer.rtl {
+    width: 86vw !important;
+  }
+
+  /* 侧边栏抽屉固定宽度（选择器与 .el-drawer.ltr 同权重，靠后生效） */
+  .el-drawer.ch-nav-drawer {
+    width: 240px !important;
+    max-width: 82vw;
+  }
+
+  /* 表单标签顶部对齐，输入框占满整行 */
+  .el-form-item {
+    margin-bottom: 14px;
+  }
+
+  .page .el-descriptions__label {
+    width: 76px;
+  }
+
+  .el-pagination {
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  /* 标签页在窄屏下可横向滚动，避免换行挤压 */
+  .el-tabs__nav-wrap {
+    overflow-x: auto;
+  }
+
+  .el-message {
+    min-width: 0;
+    width: calc(100vw - 32px);
+  }
+}

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

@@ -1,5 +1,5 @@
-<script setup lang="ts">
+<script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+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>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import {
@@ -148,7 +148,7 @@ function openNotification(item: NotificationDto): void {
       </el-col>
     </el-row>
 
-    <el-card shadow="never" class="mt-16">
+    <el-card shadow="never" class="mt-16 table-card">
       <template #header>
         <div class="card-header">
           <span>最近作业</span>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import * as echarts from 'echarts';
@@ -305,7 +305,7 @@ onUnmounted(() => {
       </el-col>
     </el-row>
 
-    <el-card shadow="never" class="mt-16">
+    <el-card shadow="never" class="mt-16 table-card">
       <el-table v-loading="loading" :data="grades" empty-text="暂无成绩记录" max-height="520">
         <el-table-column label="学生" width="140">
           <template #default="{ row }">{{ row.student?.name ?? '-' }}</template>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import {
@@ -13,8 +13,13 @@ import {
 } from '@classhelper/shared';
 import { classApi, courseApi, homeworkApi } from '@/api';
 import { useRealtimeStore } from '@/stores/realtime';
+import { useResponsive } from '@/composables/useResponsive';
 
 const realtime = useRealtimeStore();
+const { isMobile } = useResponsive();
+
+/** 小屏下详情描述改为单列，避免文字被压成竖排 */
+const detailColumns = computed(() => (isMobile.value ? 1 : 2));
 
 const loading = ref(false);
 const classes = ref<ClassDto[]>([]);
@@ -196,7 +201,7 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="never" class="table-card">
       <el-table v-loading="loading" :data="homeworks" empty-text="暂无作业">
         <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
         <el-table-column label="课程" width="110">
@@ -267,7 +272,7 @@ onUnmounted(() => {
 
     <el-drawer v-model="detailVisible" size="46%" :title="current?.title ?? '作业详情'">
       <template v-if="current">
-        <el-descriptions :column="2" border size="small">
+        <el-descriptions :column="detailColumns" border size="small">
           <el-descriptions-item label="课程">{{ current.course?.name ?? '-' }}</el-descriptions-item>
           <el-descriptions-item label="发布人">{{ current.creator?.name ?? '-' }}</el-descriptions-item>
           <el-descriptions-item label="截止时间">

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

@@ -90,21 +90,44 @@ async function submit(): Promise<void> {
 
 <style scoped>
 .login-page {
-  height: 100vh;
+  min-height: 100vh;
+  min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 16px;
   background: linear-gradient(135deg, #1f2d3d 0%, #3a5169 55%, #409eff 100%);
 }
 
 .login-card {
   width: 400px;
+  max-width: 100%;
   background: #fff;
   border-radius: 14px;
   padding: 30px 28px 22px;
   box-shadow: 0 18px 40px rgba(15, 30, 50, 0.28);
 }
 
+@media (max-width: 768px) {
+  .login-card {
+    padding: 22px 18px 18px;
+    border-radius: 12px;
+  }
+
+  .login-title {
+    font-size: 18px;
+  }
+
+  .login-brand {
+    margin-bottom: 16px;
+  }
+
+  .demo-tag {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .login-brand {
   display: flex;
   align-items: center;

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import {
@@ -206,7 +206,7 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="never" class="table-card">
       <el-table v-loading="loading" :data="notifications" empty-text="暂无通知">
         <el-table-column label="优先级" width="90">
           <template #default="{ row }">

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import {
@@ -216,7 +216,7 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <el-card v-loading="loading" shadow="never">
+    <el-card v-loading="loading" shadow="never" class="table-card">
       <template #header>
         <div class="toolbar">
           <span>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import { ROLE_LABELS, formatDate, type ClassDto, type StudentDto } from '@classhelper/shared';
@@ -132,7 +132,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <el-card shadow="never">
+    <el-card shadow="never" class="table-card">
       <el-table v-loading="loading" :data="students" empty-text="暂无学生数据">
         <el-table-column prop="username" label="用户名" width="140" />
         <el-table-column prop="name" label="姓名" width="120" />

scripts/nsis/server-installer.nsi

@@ -71,6 +71,13 @@ Section "主程序" SecMain
   IfFileExists "$INSTDIR\.env" 0 +2
     Rename "$INSTDIR\.env" "$INSTDIR\.env.previous"
 
+  ; 先清掉旧版本的代码目录再铺新文件：
+  ; 否则 web/assets 里的旧 hash 分片、server/dist 旧模块、node_modules 旧依赖会残留，
+  ; 出现"新旧版本混装"（例如 shared/dist 是旧的，服务启动直接报找不到导出）。
+  RMDir /r "$INSTDIR\web"
+  RMDir /r "$INSTDIR\server"
+  RMDir /r "$INSTDIR\node_modules"
+
   File /r "${STAGING}\*.*"
 
   IfFileExists "$INSTDIR\.env.previous" 0 +3

scripts/ui-smoke/main.cjs

@@ -331,9 +331,254 @@ async function main() {
   })()`);
   record('Service Worker 已注册（浏览器可安装为应用）', Boolean(swInfo?.ok), String(swInfo?.detail ?? ''));
 
+  // 8. 手机小屏适配（390×844，1Panel 风格：侧边栏收进抽屉 + 卡片内横向滚动）
+  await runMobileChecks(win);
+
   await finish(win);
 }
 
+/** 移动端截图留档目录（可用 UI_SMOKE_SHOTS_DIR 覆盖） */
+const SHOTS_DIR = process.env.UI_SMOKE_SHOTS_DIR ?? '';
+
+async function captureMobileShot(win, name) {
+  if (!SHOTS_DIR) return '';
+  try {
+    const image = await win.webContents.capturePage();
+    fs.mkdirSync(SHOTS_DIR, { recursive: true });
+    const file = path.join(SHOTS_DIR, `${name}.png`);
+    fs.writeFileSync(file, image.toPNG());
+    console.log(`[ui-smoke] 移动端截图：${file}`);
+    return file;
+  } catch (error) {
+    console.warn('[ui-smoke] 移动端截图失败', error);
+    return '';
+  }
+}
+
+/**
+ * 手机小屏适配验证（真实点击）：
+ *   1. 侧边栏收起 → 顶栏出现汉堡按钮（桌面侧边栏不渲染）
+ *   2. 点汉堡 → 抽屉菜单打开并渲染全部菜单项
+ *   3. 抽屉里点"通知发布" → 路由跳转且抽屉自动收起
+ *   4. 页面无横向溢出（scrollWidth <= innerWidth，表格自身滚动不计入）
+ *   5. 表格在卡片内横向滚动（卡片可滚动，页面不滚动）
+ *   6. 弹窗宽度自适应（不超出视口且接近整屏宽）
+ *   7. 工具栏控件铺满整行
+ *
+ * 注意：这套检查必须让窗口真正可见（showInactive）。
+ * Chromium 对隐藏的页面会冻结 CSS transition，Vue 的 <Transition> 收不到
+ * transitionend，抽屉会一直停在 enter-from（表现为"点了没反应"）。
+ */
+async function runMobileChecks(win) {
+  const MOBILE = { width: 390, height: 844 };
+  win.showInactive();
+  await sleep(500);
+  win.setBounds({ ...win.getBounds(), width: MOBILE.width, height: MOBILE.height });
+  await sleep(600);
+  await waitFor(win, `window.innerWidth <= 768`, 8000);
+
+  const layout = await win.webContents.executeJavaScript(`(() => {
+    const toggle = document.querySelector('.nav-toggle');
+    const aside = document.querySelector('.layout-aside');
+    const drawer = document.querySelector('.ch-nav-drawer');
+    return {
+      innerWidth: window.innerWidth,
+      hasToggle: Boolean(toggle),
+      toggleVisible: Boolean(toggle && toggle.getBoundingClientRect().width > 0),
+      asideRendered: Boolean(aside),
+      drawerOpen: Boolean(drawer && drawer.getBoundingClientRect().width > 0),
+      title: document.querySelector('.header-title')?.textContent?.trim() ?? '',
+    };
+  })()`);
+  record(
+    '手机端布局：侧边栏收起、顶栏汉堡按钮出现',
+    layout?.innerWidth <= 768 && layout?.toggleVisible && layout?.asideRendered === false,
+    `innerWidth=${layout?.innerWidth} 汉堡=${layout?.toggleVisible} 桌面侧边栏渲染=${layout?.asideRendered} 顶栏标题=${layout?.title}`,
+  );
+
+  await win.webContents.executeJavaScript(
+    `(() => { const button = document.querySelector('.nav-toggle'); if (button) button.click(); return true; })()`,
+  );
+  // 等抽屉真的滑出来（左边缘回到 0），而不是只等元素出现
+  await waitFor(
+    win,
+    `(() => { const node = document.querySelector('.ch-nav-drawer'); const rect = node && node.getBoundingClientRect(); return Boolean(rect && rect.left >= -1 && rect.width > 0); })()`,
+    5000,
+  );
+  const drawerInfo = await win.webContents.executeJavaScript(`(() => {
+    const drawer = document.querySelector('.ch-nav-drawer');
+    const overlay = document.querySelector('.el-overlay.is-drawer, .el-overlay.is-modal-drawer');
+    const toggle = document.querySelector('.nav-toggle');
+    const rect = drawer ? drawer.getBoundingClientRect() : null;
+    return {
+      open: Boolean(rect && rect.left >= -1 && rect.width > 0),
+      left: rect ? Math.round(rect.left) : null,
+      right: rect ? Math.round(rect.right) : null,
+      expandAttr: toggle ? toggle.getAttribute('aria-expanded') : null,
+      transform: drawer ? getComputedStyle(drawer).transform : '',
+      overlayClass: overlay ? overlay.className : '',
+      items: document.querySelectorAll('.ch-nav-drawer .el-menu-item').length,
+      labels: Array.from(document.querySelectorAll('.ch-nav-drawer .el-menu-item')).map((n) => n.textContent.trim()).join('|'),
+    };
+  })()`);
+  await captureMobileShot(win, 'mobile-1-drawer');
+  record(
+    '手机端抽屉菜单（点汉堡滑出，菜单项完整）',
+    drawerInfo?.open === true && drawerInfo?.items >= 7 && !/enter-from/.test(drawerInfo?.overlayClass ?? ''),
+    `菜单项=${drawerInfo?.items} left=${drawerInfo?.left} aria-expanded=${drawerInfo?.expandAttr} ` +
+      `transform=${drawerInfo?.transform} 遮罩类=${drawerInfo?.overlayClass}`,
+  );
+
+  const drawerNav = await win.webContents.executeJavaScript(`(async () => {
+    const item = Array.from(document.querySelectorAll('.ch-nav-drawer .el-menu-item')).find((node) =>
+      (node.textContent ?? '').trim().startsWith('通知发布'),
+    );
+    if (!item) return { ok: false, reason: '抽屉里未找到"通知发布"' };
+    item.click();
+    const deadline = Date.now() + 5000;
+    while (Date.now() < deadline && location.pathname !== '/notifications') {
+      await new Promise((resolve) => setTimeout(resolve, 60));
+    }
+    return { ok: location.pathname === '/notifications', path: location.pathname };
+  })()`);
+  // 等抽屉收起动画结束（右边缘回到 0 以内）
+  await waitFor(
+    win,
+    `(() => { const node = document.querySelector('.ch-nav-drawer'); const rect = node && node.getBoundingClientRect(); return Boolean(rect && rect.right <= 1); })()`,
+    5000,
+  );
+  const drawerClosed = await win.webContents.executeJavaScript(`(() => {
+    const drawer = document.querySelector('.ch-nav-drawer');
+    const rect = drawer ? drawer.getBoundingClientRect() : null;
+    const overlay = document.querySelector('.el-overlay');
+    return {
+      left: rect ? Math.round(rect.left) : null,
+      right: rect ? Math.round(rect.right) : null,
+      overlayDisplay: overlay ? getComputedStyle(overlay).display : 'none',
+      path: location.pathname,
+    };
+  })()`);
+  await captureMobileShot(win, 'mobile-2-notifications');
+  record(
+    '手机端抽屉菜单真实点击导航（通知发布并自动收起抽屉）',
+    Boolean(drawerNav?.ok) && drawerClosed?.right <= 1,
+    `path=${drawerNav?.path}/${drawerClosed?.path} 抽屉 right=${drawerClosed?.right}（<=1 表示已收起）遮罩=${drawerClosed?.overlayDisplay}`,
+  );
+
+  const overflow = await win.webContents.executeJavaScript(`(() => {
+    const doc = document.documentElement;
+    // 只统计"真正把页面撑宽"的元素：祖先里有横向可滚动容器（表格卡片）的属于正常设计
+    const insideScroller = (node) => {
+      let parent = node.parentElement;
+      while (parent && parent !== document.body) {
+        const style = getComputedStyle(parent);
+        const scrollable = /(auto|scroll)/.test(style.overflowX);
+        if (scrollable && parent.scrollWidth > parent.clientWidth + 1) return true;
+        parent = parent.parentElement;
+      }
+      return false;
+    };
+    let worst = null;
+    for (const node of document.querySelectorAll('.page *')) {
+      const rect = node.getBoundingClientRect();
+      if (rect.width === 0 || rect.right <= window.innerWidth + 1) continue;
+      if (insideScroller(node)) continue;
+      worst = (node.className || node.tagName) + '@' + Math.round(rect.left) + '..' + Math.round(rect.right);
+      break;
+    }
+    return {
+      innerWidth: window.innerWidth,
+      docScrollWidth: doc.scrollWidth,
+      bodyScrollWidth: document.body.scrollWidth,
+      widest: worst,
+    };
+  })()`);
+  record(
+    '手机端无页面横向溢出（表格滚动不计入）',
+    overflow?.docScrollWidth <= overflow?.innerWidth + 1 && !overflow?.widest,
+    `scrollWidth=${overflow?.docScrollWidth} body=${overflow?.bodyScrollWidth} innerWidth=${overflow?.innerWidth} 越界元素=${overflow?.widest ?? '无'}`,
+  );
+
+  const tableScroll = await win.webContents.executeJavaScript(`(() => {
+    const body = document.querySelector('.table-card .el-card__body');
+    const table = document.querySelector('.table-card .el-table');
+    return {
+      hasCard: Boolean(body),
+      cardClientWidth: body ? body.clientWidth : 0,
+      cardScrollWidth: body ? body.scrollWidth : 0,
+      tableWidth: table ? Math.round(table.getBoundingClientRect().width) : 0,
+    };
+  })()`);
+  record(
+    '手机端表格在卡片内横向滚动（页面不横向滚动）',
+    Boolean(tableScroll?.hasCard) && tableScroll.cardScrollWidth > tableScroll.cardClientWidth,
+    `卡片可视=${tableScroll?.cardClientWidth} 内容宽=${tableScroll?.cardScrollWidth} 表格宽=${tableScroll?.tableWidth}`,
+  );
+
+  const toolbar = await win.webContents.executeJavaScript(
+    `(() => {
+       const control = document.querySelector('.toolbar .el-select') ?? document.querySelector('.toolbar .el-input');
+       return {
+         innerWidth: window.innerWidth,
+         width: control ? Math.round(control.getBoundingClientRect().width) : 0,
+       };
+     })()`,
+  );
+  record(
+    '手机端工具栏控件铺满整行',
+    toolbar?.width >= toolbar?.innerWidth - 48,
+    `控件宽=${toolbar?.width} 视口宽=${toolbar?.innerWidth}`,
+  );
+
+  const dialog = await win.webContents.executeJavaScript(`(async () => {
+    const open = Array.from(document.querySelectorAll('button')).find((node) =>
+      (node.textContent ?? '').trim().includes('发布通知'),
+    );
+    if (!open) return { ok: false, reason: '未找到"发布通知"按钮' };
+    open.click();
+    const deadline = Date.now() + 5000;
+    while (Date.now() < deadline && !document.querySelector('.el-dialog')) {
+      await new Promise((resolve) => setTimeout(resolve, 60));
+    }
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    const node = document.querySelector('.el-dialog');
+    if (!node) return { ok: false, reason: '弹窗未打开' };
+    const rect = node.getBoundingClientRect();
+    return {
+      ok: true,
+      width: Math.round(rect.width),
+      innerWidth: window.innerWidth,
+      left: Math.round(rect.left),
+      formItemWidth: Math.round(
+        document.querySelector('.el-dialog .el-form-item')?.getBoundingClientRect().width ?? 0,
+      ),
+    };
+  })()`);
+  await captureMobileShot(win, 'mobile-3-dialog');
+  record(
+    '手机端弹窗宽度自适应（不超出视口且接近整屏）',
+    Boolean(dialog?.ok) &&
+      dialog.width <= dialog.innerWidth &&
+      dialog.width >= dialog.innerWidth - 32 &&
+      dialog.left >= 0,
+    `弹窗宽=${dialog?.width} 视口宽=${dialog?.innerWidth} left=${dialog?.left}`,
+  );
+
+  await win.webContents.executeJavaScript(`(() => {
+    const cancel = Array.from(document.querySelectorAll('.el-dialog__footer button')).find((node) =>
+      (node.textContent ?? '').trim() === '取消',
+    );
+    if (cancel) cancel.click();
+    return true;
+  })()`);
+  await sleep(300);
+
+  // 恢复桌面尺寸并隐藏窗口，避免影响后续（结果已全部记录）
+  win.setBounds({ ...win.getBounds(), width: 1440, height: 900 });
+  await sleep(300);
+  win.hide();
+}
+
 async function finish(win) {
   const failed = results.filter((item) => !item.ok);
   const passed = results.length - failed.length;