cfc-web 管理后台手机自适应改造

日期: 2026-07-24 状态: 已批准实施 范围: cfc-web (Vue 2 + Element UI)

1. 改造策略

原则：只改布局层，不改页面内部逻辑。

所有列表页、表单页的 el-table 在小屏下依赖 Element UI 自带的横向滚动，不做每个页面的单独调整。

2. Layout.vue 改造

2.1 侧边栏响应式折叠

768px 以下：侧边栏默认折叠，显示汉堡菜单按钮
折叠时 sidebar 宽度为 0 / 隐藏，用 position: fixed 遮罩弹出
768px 以上：保持现有 200px 固定侧边栏
汉堡按钮放在 header 左侧

2.2 Header 调整

左侧加汉堡菜单按钮（移动端可见）
右侧按钮间距缩小

2.3 Main 内容区

移动端 padding 从 20px → 12px
el-card__body padding 缩小

3. 全局 CSS

body 背景保持 #f0f2f5
768px 断点：el-table 字号 13px → 12px
搜索表单区域：el-form-item 在小屏下换行

4. Login.vue 调整

已有 900px 断点，768px 以下进一步优化
表单卡片去除圆角、边距，全屏展示

5. 不做的范围

不改造每个页面的表格列（靠横向滚动）
不改造统计卡片布局（Dashboard 4列在移动端变2列，由 el-col 响应式属性处理）
不改造复杂表单的布局

6. 风险

.v-modal { display: none !important } 全局遮罩隐藏 — 侧边栏弹出遮罩需用自定义遮罩，不能用 Element UI 的遮罩层
路由跳转关闭侧边栏的逻辑需正确处理