3.9 KiB

Raw Permalink Blame History

菜单表格优化 - 需求对齐文档

项目上下文分析

技术栈

前端框架：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）

现有实现分析

布局结构（从上到下）：

卡片头部（60px固定高度）
搜索容器（100px固定高度）
表格工具栏（50px固定高度）
表格容器（calc(100vh - 280px)计算高度）

现有高度控制：

整个页面容器：height: 100vh, overflow: hidden
表格容器：max-height: calc(100vh - 280px)
表格体滚动：.el-table__body-wrapper 设置了 overflow-y: auto

原始需求分析

用户描述的问题：

"菜单有分层可以展开会导致高度超出浏览器可视区的高度，我想要整个页面是不可滚动的，内部表格会根据是否展开菜单层级自适应变化高度，且最大高度不可超过浏览器可视区域的高度，当超过时，菜单表格可上下滚动"

需求分解：

整个页面不可滚动 - 已实现 ✓
表格根据展开状态自适应高度 - 需要优化 ⚠️
最大高度不超过可视区域 - 基本实现，需要精准计算 ⚠️
表格内部可滚动 - 已实现 ✓

边界确认

任务范围

包含：优化菜单表格的高度自适应逻辑
包含：确保表格滚动体验流畅
包含：精准计算容器高度
不包含：修改菜单数据结构
不包含：重写整个页面布局
不包含：更换UI框架或组件

技术约束

必须使用现有的Element Plus表格组件
必须保持现有的Vue 3 Composition API写法
必须保持现有的CSS Scoped样式结构
不能影响现有的功能（搜索、编辑、删除等）

问题识别

当前可能存在的问题：

高度计算不够精准：calc(100vh - 280px) 可能不准确
展开/折叠时高度没有动态调整：表格容器高度是固定的
滚动同步可能有问题：表头和表体的同步滚动逻辑复杂
Perfect Scrollbar未使用：已安装但未在表格中应用

潜在的用户体验问题：

展开大量菜单项时，表格可能超出容器范围
表格滚动可能不够流畅
表头和表体可能出现不同步的情况

疑问澄清

需要确认的关键点：

高度计算精度：当前 calc(100vh - 280px) 中的280px是否包含了所有固定元素的高度？
- 卡片头部：60px
- 搜索容器：100px
- 工具栏：50px
- 卡片内边距：40px (上下各20px)
- 容器间距：约10px
- 实际应该是约260px，而非280px
展开状态响应：用户是否希望表格容器高度根据内容动态调整，还是固定容器高度内滚动？
- 理解：用户希望固定容器高度，内容超出时滚动
滚动体验优化：是否需要使用已安装的Perfect Scrollbar来提升滚动体验？
浏览器兼容性：是否需要考虑不同浏览器的视口计算差异？

技术实现思路

优化方案：

精准高度计算：动态计算所有固定元素高度
响应式调整：监听窗口大小变化，动态调整表格容器
滚动优化：考虑集成Perfect Scrollbar
性能优化：优化展开/折叠时的重新渲染

实现步骤预估：

重新计算和校准容器高度
优化展开/折叠时的高度调整逻辑
改进滚动同步机制
测试各种展开状态下的显示效果