|
|
@@ -0,0 +1,148 @@
|
|
|
+# 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. 后续扩展建议（本期不做）
|
|
|
+
|
|
|
+- [ ] 列表页表格列宽自适应（依赖各页面改造）
|
|
|
+- [ ] Dashboard 统计卡片移动端 2 列布局
|
|
|
+- [ ] 复杂表单（如文章编辑）移动端优化
|
|
|
+- [ ] 侧边栏二级/三级菜单移动端手风琴样式
|
Sisyphus