Love_Chengke/ClassHelper
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## 布局与交互（沿用 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` 全部通过
This commit is contained in:
LoveChengke committed 2026-09-12 10:09:11 +08:00
1 parent e434032b6e
commit f759aac0a2
17 files changed
+714 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/web-admin/src/layouts/AdminLayout.vue
+139 -11
View File
@@ -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>