witSideBar 侧边栏菜单
witSideBar 是一个基于 Element Plus Menu 实现的侧边栏菜单组件，支持垂直布局、折叠/展开功能和不同布局模式下的路由菜单展示。组件提供了流畅的滚动体验、响应式设计和自定义样式支持，适用于各种管理系统的导航需求。
用法实例
vue
<template>
<div>
<!-- 基础侧边栏菜单 -->
<wit-side-bar />
<!-- 指定布局模式的侧边栏菜单 -->
<wit-side-bar layout="comprehensive" />
</div>
</template>
<script lang="ts" setup>
// 组件会自动从路由和设置中获取数据
</script>API
组件
vue
<wit-side-bar
:layout="vertical"
/>属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
layout | String | vertical | 布局模式，可选值：'vertical'、'comprehensive' |
插槽
| 插槽名 | 描述 |
|---|---|
| 无 | 无自定义插槽 |
事件
| 事件名 | 描述 | 参数 |
|---|---|---|
| 无 | 无自定义事件 | - |
功能特性
路由菜单展示
- 支持根据布局模式展示不同的路由菜单
- 全面布局模式下显示部分路由
- 垂直布局模式下处理顶层路由的显示逻辑
- 自动展开指定的菜单节点
折叠/展开功能
- 支持侧边栏的折叠和展开
- 折叠状态下提供悬浮菜单
- 折叠/展开状态由设置存储管理
- 集成wit-fold组件实现折叠操作
响应式设计
- 支持不同屏幕尺寸的适配
- 提供滚动条支持，处理长菜单内容
- 折叠状态下的弹窗菜单样式优化
- 无头部布局下的特殊处理
自定义样式
- 支持主题色和背景色的自定义
- 菜单项激活状态的高亮显示
- 折叠状态下的特殊样式处理
- 支持自定义图标和文字颜色
布局模式支持
- 垂直布局（vertical）：标准侧边栏布局
- 综合布局（comprehensive）：特殊的路由展示方式
菜单处理逻辑
垂直布局：
- 如果路由设置了levelHidden且有子路由，则显示子路由
- 否则显示完整路由
综合布局：
- 直接使用部分路由列表
激活状态处理：
- 自动高亮当前激活的菜单
- 支持唯一打开的菜单（unique-opened）
- 自定义激活状态的样式
样式结构
基础样式：
- 固定定位的侧边栏容器
- 自动高度计算，适配不同屏幕
- 支持滚动条的侧边栏内容
菜单项样式：
- 自定义的菜单项高度和间距
- 图标和文字的对齐方式
- 激活状态和悬停状态的样式
折叠状态样式：
- 收缩的侧边栏宽度
- 悬浮菜单的样式优化
- 折叠按钮的位置调整
TIP
- 组件依赖路由配置和设置配置，需要确保应用已正确配置路由和设置存储
- 组件支持无头部布局，通过添加no-header类名实现
- 折叠状态下的弹窗菜单样式可以通过CSS变量自定义
- 菜单项的图标支持多种格式（ri-*、icon-*等）
- 组件会自动从routesStore获取路由数据，并从settingsStore获取折叠状态