134 lines
4.5 KiB
Markdown
134 lines
4.5 KiB
Markdown
# 侧边菜单交互按钮修复报告
|
||
|
||
## 问题描述
|
||
|
||
前端菜单栏的展开隐藏交互按钮存在反直觉的问题：
|
||
- 当按钮显示展开图标时，用户期望点击后会展开菜单
|
||
- 但实际上点击后菜单会折叠，与用户预期相反
|
||
|
||
## 问题分析
|
||
|
||
### 原始逻辑问题
|
||
1. **图标显示逻辑**：
|
||
- 隐藏时显示 `Menu` 图标 ✓
|
||
- 折叠时显示 `Expand` 图标 ❌（应该显示折叠相关图标）
|
||
- 展开时显示 `Fold` 图标 ❌（应该显示展开相关图标）
|
||
|
||
2. **交互逻辑**：
|
||
- 展开 → 折叠 ✓
|
||
- 折叠 → 隐藏 ✓
|
||
- 隐藏 → 展开 ✓
|
||
|
||
### 根本原因
|
||
图标显示的含义与实际操作不匹配，导致用户困惑。
|
||
|
||
## 解决方案
|
||
|
||
### 修复后的图标逻辑
|
||
```typescript
|
||
// 图标显示逻辑：显示当前可执行的操作
|
||
<template v-if="isHidden">
|
||
<Menu /> <!-- 隐藏状态：显示菜单图标，点击展开 -->
|
||
</template>
|
||
<template v-else-if="autoCollapse">
|
||
<ArrowLeft /> <!-- 折叠状态：显示左箭头图标，点击隐藏 -->
|
||
</template>
|
||
<template v-else>
|
||
<Fold /> <!-- 展开状态：显示折叠图标，点击收起 -->
|
||
</template>
|
||
```
|
||
|
||
### 修复后的交互逻辑
|
||
```typescript
|
||
const toggleSidebar = () => {
|
||
if (isHidden.value) {
|
||
// 隐藏状态 → 展开状态（显示菜单图标时点击展开）
|
||
isHidden.value = false
|
||
sidebarWidthValue.value = 200
|
||
} else if (autoCollapse.value) {
|
||
// 折叠状态 → 隐藏状态（显示折叠图标时点击隐藏）
|
||
isHidden.value = true
|
||
} else {
|
||
// 展开状态 → 折叠状态（显示展开图标时点击折叠）
|
||
sidebarWidthValue.value = MIN_WIDTH
|
||
}
|
||
}
|
||
```
|
||
|
||
## 修复内容
|
||
|
||
### 文件修改
|
||
- **文件**：`admin-frontend/src/layout/LayoutView.vue`
|
||
- **修改内容**：
|
||
1. 调整图标显示逻辑，让图标表示当前可执行的操作
|
||
2. 重新排列交互逻辑的判断顺序，提高代码可读性
|
||
3. 添加详细注释说明每种状态的图标和操作
|
||
4. **图标优化**：将展开状态的拉伸图标改为折叠图标，折叠状态使用左箭头图标
|
||
5. **动画优化**：解决菜单展开时文本延迟显示的问题
|
||
- 缩短 Element Plus 菜单的过渡动画时间
|
||
- 优化文本显示的时机
|
||
- 使用 nextTick 避免 DOM 更新冲突
|
||
|
||
### 交互流程
|
||
1. **隐藏状态**：显示菜单图标 → 点击展开菜单
|
||
2. **展开状态**：显示折叠图标 → 点击折叠为图标模式
|
||
3. **折叠状态**：显示左箭头图标 → 点击完全隐藏
|
||
|
||
## 测试建议
|
||
|
||
1. **功能测试**：
|
||
- 验证三种状态间的切换是否正常
|
||
- 确认图标显示与实际操作一致
|
||
|
||
2. **用户体验测试**：
|
||
- 确认图标的直观性
|
||
- 验证交互的流畅性
|
||
|
||
## 图标选择说明
|
||
|
||
### 图标语义
|
||
- **Menu 图标**：表示菜单，用于隐藏状态，暗示可以展开菜单
|
||
- **Fold 图标**：表示折叠/收起，用于展开状态，暗示可以收起菜单
|
||
- **ArrowLeft 图标**：表示向左隐藏，用于折叠状态，暗示可以完全隐藏
|
||
|
||
### 为什么不用 Expand 图标
|
||
原来的 `Expand` 图标在展开状态下显示会让用户困惑，因为：
|
||
1. 视觉上像拉伸符号，不够直观
|
||
2. 用户看到展开图标会期望点击后进一步展开，而不是收起
|
||
3. `Fold` 图标更清楚地表达"收起"的含义
|
||
|
||
## 动画优化说明
|
||
|
||
### 问题分析
|
||
菜单展开时文本延迟显示的原因：
|
||
1. Element Plus 的 `el-menu` 组件有内置的折叠/展开动画
|
||
2. 默认的过渡时间较长（约 0.3s）
|
||
3. 文本显示需要等待宽度动画完成
|
||
|
||
### 解决方案
|
||
1. **缩短过渡时间**：将菜单项的过渡时间从默认的 0.3s 缩短到 0.15s
|
||
2. **优化文本显示**：确保文本在菜单展开时立即显示
|
||
3. **DOM 更新优化**：使用 `nextTick` 避免状态变化时的冲突
|
||
|
||
### CSS 优化
|
||
```css
|
||
/* 缩短Element Plus默认的过渡时间 */
|
||
.sidebar-menu .el-menu-item,
|
||
.sidebar-menu .el-sub-menu {
|
||
transition: all 0.15s ease !important;
|
||
}
|
||
|
||
/* 立即显示文本 */
|
||
.sidebar-menu:not(.el-menu--collapse) .el-menu-item span,
|
||
.sidebar-menu:not(.el-menu--collapse) .el-sub-menu__title span {
|
||
opacity: 1 !important;
|
||
transition: opacity 0.1s ease !important;
|
||
}
|
||
```
|
||
|
||
## 总结
|
||
|
||
通过调整图标显示逻辑、选择更合适的图标，以及优化菜单展开动画，现在侧边栏的交互体验更加流畅和直观：
|
||
1. 按钮图标准确反映点击后的操作结果
|
||
2. 菜单展开时文本立即显示，无延迟
|
||
3. 整体交互更符合用户预期 |