bim_engine/docs/components/menu.md

Menu 组件文档

1. 组件概述

BimMenu 是一个通用的菜单列表组件。

• 位置: src/components/menu/index.ts
• 功能: 渲染一组 BimMenuItem，支持分组、排序、图标、快捷键提示和多级子菜单。
• 特点: 数据驱动（通过 Item 类实例），支持国际化。

2. 组件类 API

BimMenu

构造函数

new BimMenu(options: MenuOptions)

方法

方法名	参数	返回值	描述
init	()	void	初始化，渲染 DOM
destroy	()	void	销毁，清理事件和子菜单
getElement	()	HTMLElement	获取根 DOM 元素 (实现 IRightKeyContent)

BimMenuItem (基类)

所有菜单项必须继承此抽象类。

方法/属性	类型	描述
id	string	唯一标识
group	string	分组 ID (默认 'default')
order	number	排序权重
getLabel()	string	获取显示文本
onClick()	void	点击回调
getIcon()	string?	获取图标 HTML
getChildren()	BimMenuItem[]?	获取子菜单项

3. UI 详细描述

• 根元素: <ul class="bim-menu">
• 分组分割线: <li class="bim-menu-divider">
• 菜单项: <li class="bim-menu-item">
  • 图标槽: .bim-menu-item-icon
  • 文本槽: .bim-menu-item-label
  • 箭头槽: .bim-menu-item-arrow (仅当有子菜单时)

4. 逻辑流程

1. 分组与排序:
   • 根据 item.group 将项归类。
   • 根据 options.groupOrder 对组进行排序。
   • 组内根据 item.order 排序。
2. 多级菜单:
   • 鼠标进入 (mouseenter) 带子菜单的项时，创建新的 BimMenu 实例。
   • 将新实例挂载到临时的 fixed 容器中。
   • 自动计算位置（通常在父项右侧，空间不足时翻转）。

5. 类型定义

export interface MenuOptions {
    items: BimMenuItem[];
    groupOrder?: string[];
}