Menu 导航菜单

AuMenu、AuMenuGroup 与 AuMenuItem 用于侧栏、设置分类和工作区视图等持续可见的导航。临时操作集合应使用 AuDropdown 或 AuContextMenu。

基础用法

使用 v-model 管理当前项，菜单项的 index 是唯一业务值。图标既可通过 icon 属性传入，也可由 icon 插槽完全自定义。

侧栏导航

支持分组、选中、图标、徽标、状态点和完整键盘导航。

• 分析工作台
• 我的工作区
• 系统管理

vue

<template>
  <div class="menu-demo">
    <div class="menu-demo__box">
      <div class="menu-demo__menu">
        <AuMenu v-model="activeItem" aria-label="主导航">
          <AuMenuGroup label="分析工作台" />
          <AuMenuItem index="dashboard" label="总览" :icon="IconLayoutDashboard">总览</AuMenuItem>
          <AuMenuItem index="daily-review" label="每日复盘" :icon="IconCalendar">每日复盘</AuMenuItem>
          <AuMenuItem index="auction" label="竞价决策" :icon="IconBolt" badge="LIVE">竞价决策</AuMenuItem>
          <AuMenuItem index="screener" label="AI 选股" :icon="IconSparkles" badge="LIVE">AI 选股</AuMenuItem>
          <AuMenuItem index="strategy" label="策略中心" :icon="IconChartHistogram">策略中心</AuMenuItem>
          <AuMenuItem index="backtest" label="策略回测" :icon="IconChartLine">策略回测</AuMenuItem>
          <AuMenuGroup label="我的工作区" spaced />
          <AuMenuItem index="watchlist" label="自选观察" :icon="IconStar">自选观察</AuMenuItem>
          <AuMenuItem index="risk" label="风控中心" :icon="IconShieldCheck">风控中心</AuMenuItem>
          <AuMenuItem index="ai-settings" label="AI 模型设置" :icon="IconSettings" indicator>AI 模型设置</AuMenuItem>
          <AuMenuItem index="account" label="账户安全" :icon="IconLock">账户安全</AuMenuItem>
          <AuMenuGroup label="系统管理" spaced />
          <AuMenuItem index="admin" label="管理中心" :icon="IconAdjustmentsHorizontal">管理中心</AuMenuItem>
          <AuMenuItem index="content" label="复盘内容管理" :icon="IconCalendarStats">复盘内容管理</AuMenuItem>
        </AuMenu>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import {
  AuMenu,
  AuMenuGroup,
  AuMenuItem,
  IconAdjustmentsHorizontal,
  IconBolt,
  IconCalendar,
  IconCalendarStats,
  IconChartHistogram,
  IconChartLine,
  IconLayoutDashboard,
  IconLock,
  IconShieldCheck,
  IconSparkles,
  IconStar,
  IconSettings,
} from 'aurora-plus';
const activeItem = ref('dashboard');
</script>
<style scoped>
.menu-demo {
  width: min(100%, 300px);
}
.menu-demo__box {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 14px;
  border: 1px solid rgba(105, 123, 154, 0.13);
  border-radius: 12px;
}
.menu-demo__menu {
  width: 100%;
}
</style>

使用建议

• 菜单适合放在持续可见的侧栏或设置区域中，当前项会显示浅色选中面和左侧激活条。
• 分组标题使用 AuMenuGroup，需要更大的段落间距时设置 spaced。
• 纵向菜单使用 ArrowUp、ArrowDown，横向菜单使用 ArrowLeft、ArrowRight；Home、End 定位首尾项，Enter 和 Space 选择当前项。
• 折叠菜单应为每个菜单项提供 label，组件会将它保留为无障碍名称与鼠标提示。

AuMenu API

Attributes

属性	说明	类型	默认值
modelValue	当前菜单项的 index	string / number	''
mode	排列方向，可选 vertical / horizontal	string	vertical
collapse	纵向菜单是否折叠为仅图标模式	boolean	false
disabled	是否禁用整个菜单	boolean	false
loop	方向键到达边界后是否循环	boolean	true
ariaLabel	菜单的无障碍名称	string	导航菜单

未声明的属性会透传至根 ul[role="menu"]。

Events

事件名	说明	参数
update:modelValue	选中项发生变化	(index)
select	菜单项被选择；重复选择当前项也会触发	(index, event)
change	选中值实际变化	(index, previousIndex)

Slots

插槽名	说明
default	放置 AuMenuItem

Exposes

属性或方法	说明
focus(index?)	聚焦指定可用项；未找到时聚焦当前项或首个可用项
menuRef	菜单根元素引用

AuMenuGroup API

Attributes

属性	说明	类型	默认值
label	分组标题	string	''
spaced	是否增加与上一组的间距	boolean	false

Slots

插槽名	说明
default	自定义分组标题

AuMenuItem API

Attributes

属性	说明	类型	默认值
index	菜单项唯一值	string / number	必填
label	文本回退值，并为折叠模式提供无障碍名称	string	''
icon	Aurora Plus 图标组件	Component	null
iconColor	图标颜色	string	''
badge	尾部徽标文本	string / number	''
indicator	是否显示尾部状态点	boolean	false
disabled	是否禁用当前项	boolean	false
title	原生鼠标提示；折叠时默认回退为 label	string	''
ariaCurrent	选中项的 aria-current 值	string	page

Slots

插槽名	作用域参数	说明
default	—	菜单项文字
icon	{ active, disabled }	自定义图标
suffix	{ active, disabled }	徽标、数量或快捷提示等尾部内容