40 lines
1.8 KiB
YAML
40 lines
1.8 KiB
YAML
|
# Module Spec：VabMenu
|
|||
|
|
|
|||
|
|
module:
|
|||
|
|
id: vab-menu
|
|||
|
|
name: VabMenu（菜单体系）
|
|||
|
|
type: ui
|
|||
|
|
entrypoints:
|
|||
|
|
- library/components/VabMenu/index.vue
|
|||
|
|
- library/components/VabMenu/components/VabMenuItem.vue
|
|||
|
|
- library/components/VabMenu/components/VabSubMenu.vue
|
|||
|
|
|
|||
|
|
public_api:
|
|||
|
|
concept:
|
|||
|
|
- "递归渲染菜单：VabMenu 根据子路由可见性选择渲染 VabSubMenu 或 VabMenuItem"
|
|||
|
|
- "点击菜单：根据 meta.target/_blank、外链/内链、同路由刷新等逻辑进行跳转或触发 reload"
|
|||
|
|
|
|||
|
|
usage_examples:
|
|||
|
|
- "布局组件中引入 VabMenu，配合路由 meta 与权限渲染导航"
|
|||
|
|
|
|||
|
|
dependency_closure:
|
|||
|
|
runtime:
|
|||
|
|
- "vue-router：useRoute/useRouter（跳转/判断当前路由）"
|
|||
|
|
- "store-settings：collapse/device/theme(layout) + foldSideBar（移动端点击收起）"
|
|||
|
|
- "plugin-vab：inject('$pub')（同路由点击触发 $pub('reload-router-view')）"
|
|||
|
|
- "config：isHashRouterMode（hash 模式下 _blank 打开内部路由）"
|
|||
|
|
- "utils/validate：isExternal（外链判断）"
|
|||
|
|
- "i18n：translate（菜单 title）"
|
|||
|
|
- "Element Plus：el-menu-item/el-sub-menu/el-tag"
|
|||
|
|
- "VabIcon"
|
|||
|
|
|
|||
|
|
acceptance:
|
|||
|
|
- "item.children 中存在可见子路由时渲染 VabSubMenu，否则渲染 VabMenuItem"
|
|||
|
|
- "meta.target === '_blank' 时按外链/内链规则在新窗口打开"
|
|||
|
|
- "点击当前已激活路由时触发 $pub('reload-router-view')"
|
|||
|
|
|
|||
|
|
pitfalls:
|
|||
|
|
- "组件内部使用 webpack require.context 自动注册子组件；迁移到非 webpack 构建器需等效替代"
|
|||
|
|
- "Element Plus 关于 teleported 的历史兼容问题：弹层渲染到 body 下时需要全局样式配合（见 VabMenu/index.vue 注释）"
|
|||
|
|
- "如果菜单权限依赖 ACL/指令（v-permissions/hasPermission），迁移时必须把相关依赖一起带走"
|