默认布局：完成菜单4种混合模式交互
四种导航模式（sider、mixed、top、mixedBar）各自有独特的交互逻辑。本节重点处理混合模式下的细节交互：折叠时二级菜单图标的显示策略、不同模式间的切换过渡效果，以及样式微调确保四种模式在视觉上的一致性。
四种模式的核心差异
| 模式 | 左侧区域 | 顶部区域 | 折叠行为 |
|---|---|---|---|
| sider | 完整菜单（含图标和文字） | 无菜单 | 整体折叠，只保留图标 |
| mixed | 一级菜单 | 二三级菜单 | 左侧折叠 |
| top | 无 | 全部菜单 | 无折叠 |
| mixedBar | 一级菜单（仅图标） | 二三级菜单 | 左侧保持图标模式 |
混合模式下的折叠处理
mixedBar 模式下，左侧默认就只显示图标，因此折叠操作实际上是隐藏顶部的二级菜单。但 sider 模式下折叠时，如果二级菜单项也有图标，需要保持图标可见。
关键 CSS 处理：
.mixed-bar-mode {
:deep(.el-menu--collapse) {
.el-sub-menu__title span,
.el-menu-item span {
display: none;
}
.el-sub-menu__title .el-icon,
.el-menu-item .el-icon {
margin: 0;
}
}
}
scss
模式切换的过渡效果
切换导航模式时，Layout 的结构可能发生变化（如从左右布局变为上下布局）。使用 Vue 的 <Transition> 组件包裹内容区域，添加过渡动画：
<Transition name="fade" mode="out-in">
<component :is="currentLayout" />
</Transition>
vue
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
css
二级菜单图标的测试
在混合模式下测试二级菜单的图标显示，需要在路由配置中为二级菜单也设置 icon 属性：
definePage({
meta: {
title: '图标示例',
icon: 'ep:picture',
order: 1,
},
})
typescript
确保折叠后二级菜单的图标仍然可见，文字被隐藏。
样式调整技巧
样式调整遵循以下工作流程：
- 在浏览器中使用 DevTools 检查目标元素的 class 名
- 找到需要覆盖的 CSS 属性
- 在组件中使用
:deep()选择器覆盖
:deep(.el-menu-item.is-active) {
background-color: var(--el-color-primary-light-9) !important;
}
scss
使用 CSS 变量而非硬编码颜色值，确保暗黑模式下也能正常工作。
本节小结
- 四种模式：每种模式有不同的布局结构和折叠行为，需要分别处理。
- 折叠处理：mixedBar 模式下左侧默认只显示图标，折叠时隐藏顶部菜单。
- 过渡动画：模式切换使用
<Transition>添加淡入淡出效果。 - CSS 变量：使用 Element Plus 的 CSS 变量确保暗黑模式兼容性。
↑