MenuRenderer 侧边栏菜单

侧边栏菜单渲染组件。从权限 Store 获取用户菜单数据，递归处理菜单树，渲染为 Naive UI 的 <n-menu>。自动根据当前路由高亮和展开匹配的菜单项。

• 基础用法
• Props
• 菜单数据处理
• 注意事项

基础用法

<template>
  <aside class="sidebar">
    <MenuRenderer :collapsed="sidebarCollapsed" />
  </aside>
</template>

<script setup>
import { ref } from 'vue'
import MenuRenderer from '@/components/MenuRenderer.vue'

const sidebarCollapsed = ref(false)
</script>

Props

属性	类型	默认值	说明
collapsed	Boolean	false	菜单是否折叠（仅显示图标）

菜单数据处理

菜单数据来自 usePermissionStore().menus，组件内部处理三级菜单结构：

菜单类型	处理方式
subapp（子应用）	渲染为 NMenuOptionGroup 分组
module（模块）	渲染为可展开的 NSubmenu 子菜单
menu（菜单项）	渲染为可点击的 NMenuOption 菜单项

路由匹配逻辑：根据 $route.path 自动匹配对应菜单项并高亮，同时展开其所有父级菜单。

注意事项

• 组件内部依赖 usePermissionStore()，确保权限数据已加载
• 菜单点击后通过路由跳转，不暴露自定义事件
• 折叠模式下菜单项显示 tooltip 提示完整标题