# 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. 类型定义

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