# 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 模板结构

```html
<!-- 新增：移动端遮罩层 -->
<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

```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 — 改动详解

```css
@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 默认行为，已通过折叠逻辑适配