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/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 }}
-              <el-tag size="small" type="info" effect="plain">{{ auth.roleLabel }}</el-tag>
+              <template v-if="!isMobile">
+                {{ 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">
-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>

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" />