Menu 导航菜单

AuMenu、AuMenuGroup 与 AuMenuItem 用于侧栏、设置分类和工作区视图等持续可见的导航。

基础用法

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

<template>
  <div class="menu-demo">
    <div class="menu-demo__box">
      <div class="menu-demo__menu">
        <AuMenu v-model="activeItem">
          <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 } from 'aurora-plus';
import {
  IconAdjustmentsHorizontal,
  IconBolt,
  IconCalendar,
  IconCalendarStats,
  IconChartHistogram,
  IconChartLine,
  IconLayoutDashboard,
  IconLock,
  IconShieldCheck,
  IconSparkles,
  IconStar,
  IconSettings,
} from 'aurora-plus/icons';
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>

图标侧边栏

<template>
  <div class="rail-demo">
    <div class="rail-demo__box">
      <div class="rail-demo__menu">
        <AuMenu v-model="activeItem" mode="rail">
          <AuMenuGroup spaced />
          <AuMenuItem index="dashboard" label="总览" :icon="IconLayoutDashboard">总览</AuMenuItem>
          <AuMenuItem index="market" label="行情" :icon="IconChartLine">行情</AuMenuItem>
          <AuMenuItem index="watchlist" label="自选" :icon="IconStar" badge="3">自选</AuMenuItem>
          <AuMenuGroup spaced />
          <AuMenuItem index="analysis" label="分析" :icon="IconChartHistogram">分析</AuMenuItem>
          <AuMenuItem index="account" label="账户" :icon="IconUserCircle">账户</AuMenuItem>
          <template #bottom>
            <button type="button" class="rail-demo__action" title="通知">
              <AuIcon :icon="IconBell" :size="20" />
              <span class="rail-demo__dot">5</span>
            </button>
            <button type="button" class="rail-demo__action" title="设置">
              <AuIcon :icon="IconSettings" :size="20" />
            </button>
          </template>
        </AuMenu>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuMenu, AuMenuGroup, AuMenuItem, AuIcon } from 'aurora-plus';
import {
  IconBell,
  IconChartHistogram,
  IconChartLine,
  IconLayoutDashboard,
  IconSettings,
  IconStar,
  IconUserCircle,
} from 'aurora-plus/icons';
const activeItem = ref('dashboard');
</script>
<style scoped>
.rail-demo {
  width: min(100%, 300px);
}
.rail-demo__box {
  box-sizing: border-box;
  width: 100%;
  height: 420px;
  padding: 10px;
  border: 1px solid rgba(105, 123, 154, 0.13);
  border-radius: 12px;
}
.rail-demo__menu {
  height: 100%;
}
.rail-demo__action {
  position: relative;
  display: grid;
  width: 40px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--au-color-text-secondary);
  cursor: pointer;
}
.rail-demo__action:hover {
  background: var(--au-color-background-hover);
  color: var(--au-color-text-primary);
}
.rail-demo__dot {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border: 2px solid var(--au-color-background-overlay);
  border-radius: 999px;
  background: var(--au-color-danger);
  color: #ffffff;
  font-size: 10px;
  font-weight: var(--au-font-weight-semibold);
  line-height: 1;
}
</style>

AuMenu API

Attributes

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

Events

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

Slots

插槽名	说明
default	放置 AuMenuItem
bottom	仅 rail 模式下渲染；底部固定内容，不参与键盘导航与选中

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	尾部徽标文本；rail 模式下退化为右上角计数点	string / number	''
indicator	是否显示尾部状态点	boolean	false
disabled	是否禁用当前项	boolean	false
title	原生鼠标提示；折叠时默认回退为 label	string	''

Slots

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