cfc/docs/superpowers/plans/2026-07-24-cfc-web-responsive-implementation.md

cfc-web 管理后台手机自适应 — 实施计划

日期: 2026-07-24 状态: ✅ 已实施（commit: 3ee7289e） 范围: cfc-web (Vue 2 + Element UI) 设计文档: specs/2026-07-24-cfc-web-responsive-design.md

---

1. 改动摘要

文件	改动类型	说明
src/views/Layout.vue	修改	响应式侧边栏折叠 + 汉堡按钮 + 全局响应式 CSS
src/views/Login.vue	修改	480px 断点全屏表单
docs/superpowers/specs/2026-07-24-cfc-web-responsive-design.md	新增	设计文档

---

2. Layout.vue — 改动详解

2.1 模板结构

<!-- 新增：移动端遮罩层 -->
<div v-if="isMobile && sidebarVisible" class="sidebar-overlay" @click="sidebarVisible = false"></div>

<!-- 修改：el-aside 添加响应式 class -->
<el-aside :class="['el-aside', { 'sidebar-mobile': isMobile, ... }]" :width="...">
  ...
</el-aside>

<!-- 新增：header 左侧汉堡按钮 -->
<el-header>
  <div class="header-left">
    <el-button v-if="isMobile" type="text" @click="toggleSidebar">
      <i :class="sidebarVisible ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </el-button>
  </div>
  <div class="header-right">...</div>
</el-header>

2.2 数据属性

属性	类型	说明
isMobile	boolean	window.innerWidth <= 768，监听 resize 动态切换
sidebarVisible	boolean	侧边栏显隐，桌面默认 true，移动端默认 false

2.3 方法

方法	说明
toggleSidebar()	切换 sidebarVisible
handleResize()	resize 监听，自动切换桌面/移动端模式
handleMenuSelect()	增加移动端选中后自动关闭侧边栏

2.4 计算属性

属性	说明
$route watch	路由切换时，移动端自动关闭侧边栏

2.5 生命周期

• mounted(): 添加 window.resize 监听
• beforeDestroy(): 移除监听

2.6 关键 CSS

/* 移动端侧边栏：fixed 定位 + transform 滑入/滑出 */
@media (max-width: 768px) {
  .sidebar-mobile {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar-mobile.sidebar-open {
    transform: translateX(0);
  }
  .sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1001;
  }
  /* padding 缩小 */
  .el-main { padding: 12px; }
  .el-card__body { padding: 12px; }
  .el-table { font-size: 12px; }
}

---

3. Login.vue — 改动详解

@media screen and (max-width: 480px) {
  .form-panel { padding: 0; align-items: stretch; }
  .form-card {
    max-width: none;
    border-radius: 0;
    padding: 36px 24px 24px;
    box-shadow: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .form-header { margin-bottom: 28px; }
}

效果: 480px 以下表单卡片全屏展示，去圆角去边距，垂直居中，视觉清爽。

---

4. 响应式断点策略

断点	内容
> 768px	桌面端，侧边栏固定展开，全功能
<= 768px	移动端，侧边栏折叠，汉堡按钮控制
<= 480px	登录页全屏表单

---

5. 构建验证

• ✅ npx vue-cli-service build --mode development 零错误
• ✅ 工作区干净，无遗留文件
• ✅ 已推送到远程 cfclub 分支

---

6. 后续扩展（已全部实施）

• ✅ 列表页表格横向滚动 — 全局 CSS min-width: 600px + overflow-x: auto
• ✅ Dashboard 统计卡片移动端 2 列 — :xs="12" :sm="12" :md="6"
• ✅ 复杂表单移动端优化 — .el-form-item--inline 换行 + 100% 宽度
• ✅ 侧边栏二级/三级菜单移动端手风琴 — Element UI 默认行为，已通过折叠逻辑适配