Menu 菜单
独立的菜单列表，支持选中态与键盘导航。
基础用法
基础用法
默认选中
默认选中（value 回显）
禁用项
禁用项
多级子菜单
带 children 的菜单项显示展开箭头（›），点击或悬停展开子菜单，子菜单缩进展示；键盘 ArrowRight 进入、ArrowLeft 返回。
多级子菜单
水平导航
mode="horizontal" 时菜单项横排，呈顶部导航条样式；一级子菜单向下浮出，二级及以上仍向右浮出。
水平导航（顶部导航条样式）
收起态
collapsed（仅 vertical 生效）将菜单收窄为只显示图标，悬停或点击图标项时子菜单向右浮出，子菜单内仍为完整菜单。
收起态（只显示图标）
分组
type: "group" 的菜单项渲染为带组标题的分区（组标题小字、次要色、不可点），组内子项平铺在同一层，可继续混入子菜单与分隔线。
分组
带图标
icon 使用 @oas-ui/icons 的图标名（iconRegistry），以内联 SVG 渲染在文字左侧。
带图标
分隔线
type: "divider" 渲染一条细分隔线，不可点、不参与键盘导航。
分隔线
暗色菜单
theme="dark" 使菜单局部使用暗色 token（深背景 + 浅文字），独立于全局主题；不设置时跟随全局主题。
暗色菜单
选择事件
选择事件
多选（checkbox）
kind: "checkbox" 的叶子项渲染为方块勾选框（role="menuitemcheckbox"，与 radio 的 ✓ 区分）；多选勾选集以 JSON 数组形态写入 value，点击某项后 oas-select 的 detail 携带 checked（本次点击后的勾选态）。
多选（checkbox）
危险操作项
danger: true 使用红色语义（--oas-color-danger），用于删除、退出登录等危险操作；hover / 键盘高亮时红底加深。
危险操作项（danger）
链接项（href）
href 使菜单项渲染为 <a>（锚点语义：支持中键 / 右键新窗口，SEO 友好），target / rel 原样透传；点击仍会派发 oas-select 并写入选中态。示例链接用 target="_blank" 新开标签页，避免离开文档页。
链接项（href）
长菜单滚动
max-height 限定菜单可视高度（纯数字自动补 px），超出部分在菜单内部滚动，适合长列表。
长菜单滚动（max-height）
字符定位（typeahead）
菜单聚焦后直接输入字符，即跳转到 label 匹配的项（连续字符缓冲，500ms 无输入自动重置；前缀匹配优先，无前缀则包含匹配）。示例标签带英文便于按键触发：按 c 跳到 Copy，继续按 u（组合 cu）跳到 Cut。
字符定位（typeahead）
inline 侧边导航
mode="inline" 时子菜单就地展开（不浮出），是侧边导航的主流形态；展开 / 收起带高度过渡动画，支持多级嵌套。
inline 就地展开
受控展开
expanded（JSON 数组）为受控属性：外部设置 / 更新它即可指定展开的子菜单集合；每次展开 / 收起派发 oas-expand-change（detail: { expanded, value, isExpanded }），受控场景下宿主据此把状态写回 expanded。
expanded 受控展开
选中不收起
浮出形态（vertical / horizontal）默认选中叶子项即收起展开的子菜单（展开态是临时的）；close-on-select="false" 可保持展开，适合在浮层里连续选多项。mode="inline" 侧边导航默认不收（用户需看到所在分区），close-on-select="true" 可改为收起。kind="checkbox" 项的勾选切换永不收起。
选中不收起（close-on-select）
vertical + close-on-select="false"：点叶子后子菜单保持展开
inline + close-on-select="true"：点叶子后收起父级子菜单
手风琴
accordion（配合 mode="inline"）使同级子菜单互斥：展开一个自动收起同级的其他展开项。
手风琴互斥（inline + accordion）
水平溢出收纳
mode="horizontal" 下容器宽度不足时，超宽的菜单项自动收进末尾「···」子菜单，导航条不换行、不截断。
水平溢出收纳
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
accordion | 手风琴互斥（inline 模式同级只展开一个子菜单） | boolean | — |
close-on-select | 选中叶子项后是否收起展开的子菜单。缺省分形态：inline 侧边导航不收、浮出形态收；checkbox 项勾选切换永不收起 | string | — |
collapsed | 收起态（仅 vertical）：只显示图标，子菜单向右浮出 | — | — |
expanded | 受控展开项集合（JSON 数组字符串，inline 模式哪些子菜单展开）；非受控时内部管理 | string | — |
items | 菜单项 JSON（支持 disabled / loading 禁点、icon、children 子菜单） | string | [] |
max-height | 长菜单最大高度，超出内部滚动（数字补 px） | string | — |
mode | 布局模式：vertical 纵向菜单 / horizontal 顶部导航条 | — | — |
theme | 局部主题：dark 使用暗色 token（独立于全局主题） | — | — |
value | 当前选中值。纯字符串时全局单选（无组场景，兼容旧用法）；JSON 对象字符串（如 {"sort":"name","view":"list"}）时按组 id 作用域独立记录——type:"group" 项的 value 作组 id，组内点选只更新该组 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-expand-change | 子菜单展开状态变化，detail: { expanded: string[], value, isExpanded }（受控/非受控都派发） |
oas-select | 选择某项，detail: { value, kind? }。kind 仅动作项（kind: "action"）出现，值为 "action"；radio 项 detail.kind 不出现 |
MenuItem 字段：
| 字段 | 说明 | 类型 |
|---|---|---|
label | 菜单项文字 | string |
value | 选中值 | string |
type | 菜单项类型：item（默认）/ group（分组标题）/ divider（分隔线） | string |
kind | 叶子项语义：radio（默认，可勾选）/ action（动作项，无勾选态、点击不写回 value） | string |
icon | 图标名（@oas-ui/icons 的 iconRegistry 键） | string |
disabled | 禁用该项 | boolean |
children | 子菜单项数组，结构与父项一致（可继续嵌套） | MenuItem[] |
children 为可选子菜单项数组；有 children 的项点击/悬停展开子菜单，选中态只落在叶子项。group 的 children 平铺展示在同一层，组标题不可点、不参与键盘导航；divider 不可点、不参与键盘导航。
键盘导航：方向键移动（自动跳过组标题与分隔线）、Enter 选择（含子菜单的项 Enter/ArrowRight 进入）、Home / End 跳转、ArrowLeft 返回父级；role="menu" + menuitemradio（子菜单父项为 menuitem），选中项显示对勾。