101 lines
3.9 KiB
Markdown
101 lines
3.9 KiB
Markdown
# 菜单表格优化 - 需求对齐文档
|
||
|
||
## 项目上下文分析
|
||
|
||
### 技术栈
|
||
- 前端框架：Vue 3 + TypeScript + Composition API
|
||
- UI库：Element Plus 2.10.7
|
||
- 构建工具：Vite
|
||
- 滚动库：Perfect Scrollbar（已安装但未在菜单页面使用）
|
||
- 样式：Scoped CSS + Deep Selectors
|
||
|
||
### 现有菜单管理页面架构
|
||
- 页面路径：`/src/views/system/MenuView.vue`
|
||
- 页面布局：使用Flexbox垂直布局，高度填满视口
|
||
- 表格组件：Element Plus `el-table` 组件，支持树形数据结构
|
||
- 数据结构：分层菜单树（目录M/菜单C/按钮F）
|
||
|
||
### 现有实现分析
|
||
**布局结构（从上到下）：**
|
||
1. 卡片头部（60px固定高度）
|
||
2. 搜索容器（100px固定高度）
|
||
3. 表格工具栏（50px固定高度）
|
||
4. 表格容器（`calc(100vh - 280px)`计算高度）
|
||
|
||
**现有高度控制：**
|
||
- 整个页面容器：`height: 100vh, overflow: hidden`
|
||
- 表格容器：`max-height: calc(100vh - 280px)`
|
||
- 表格体滚动：`.el-table__body-wrapper` 设置了 `overflow-y: auto`
|
||
|
||
## 原始需求分析
|
||
|
||
用户描述的问题：
|
||
> "菜单有分层可以展开会导致高度超出浏览器可视区的高度，我想要整个页面是不可滚动的，内部表格会根据是否展开菜单层级自适应变化高度，且最大高度不可超过浏览器可视区域的高度，当超过时，菜单表格可上下滚动"
|
||
|
||
### 需求分解：
|
||
1. **整个页面不可滚动** - 已实现 ✓
|
||
2. **表格根据展开状态自适应高度** - 需要优化 ⚠️
|
||
3. **最大高度不超过可视区域** - 基本实现，需要精准计算 ⚠️
|
||
4. **表格内部可滚动** - 已实现 ✓
|
||
|
||
## 边界确认
|
||
|
||
### 任务范围
|
||
- **包含**：优化菜单表格的高度自适应逻辑
|
||
- **包含**：确保表格滚动体验流畅
|
||
- **包含**：精准计算容器高度
|
||
- **不包含**：修改菜单数据结构
|
||
- **不包含**：重写整个页面布局
|
||
- **不包含**：更换UI框架或组件
|
||
|
||
### 技术约束
|
||
- 必须使用现有的Element Plus表格组件
|
||
- 必须保持现有的Vue 3 Composition API写法
|
||
- 必须保持现有的CSS Scoped样式结构
|
||
- 不能影响现有的功能（搜索、编辑、删除等）
|
||
|
||
## 问题识别
|
||
|
||
### 当前可能存在的问题：
|
||
1. **高度计算不够精准**：`calc(100vh - 280px)` 可能不准确
|
||
2. **展开/折叠时高度没有动态调整**：表格容器高度是固定的
|
||
3. **滚动同步可能有问题**：表头和表体的同步滚动逻辑复杂
|
||
4. **Perfect Scrollbar未使用**：已安装但未在表格中应用
|
||
|
||
### 潜在的用户体验问题：
|
||
1. 展开大量菜单项时，表格可能超出容器范围
|
||
2. 表格滚动可能不够流畅
|
||
3. 表头和表体可能出现不同步的情况
|
||
|
||
## 疑问澄清
|
||
|
||
### 需要确认的关键点：
|
||
|
||
1. **高度计算精度**：当前 `calc(100vh - 280px)` 中的280px是否包含了所有固定元素的高度？
|
||
- 卡片头部：60px
|
||
- 搜索容器：100px
|
||
- 工具栏：50px
|
||
- 卡片内边距：40px (上下各20px)
|
||
- 容器间距：约10px
|
||
- **实际应该是约260px，而非280px**
|
||
|
||
2. **展开状态响应**：用户是否希望表格容器高度根据内容动态调整，还是固定容器高度内滚动？
|
||
- **理解**：用户希望固定容器高度，内容超出时滚动
|
||
|
||
3. **滚动体验优化**：是否需要使用已安装的Perfect Scrollbar来提升滚动体验？
|
||
|
||
4. **浏览器兼容性**：是否需要考虑不同浏览器的视口计算差异？
|
||
|
||
## 技术实现思路
|
||
|
||
### 优化方案：
|
||
1. **精准高度计算**：动态计算所有固定元素高度
|
||
2. **响应式调整**：监听窗口大小变化，动态调整表格容器
|
||
3. **滚动优化**：考虑集成Perfect Scrollbar
|
||
4. **性能优化**：优化展开/折叠时的重新渲染
|
||
|
||
### 实现步骤预估：
|
||
1. 重新计算和校准容器高度
|
||
2. 优化展开/折叠时的高度调整逻辑
|
||
3. 改进滚动同步机制
|
||
4. 测试各种展开状态下的显示效果 |