菜单管理 Skill

管理 EsportManager2 项目的侧边栏菜单配置。

关键文件

项目有两个侧边栏组件，修改菜单时必须同时更新两个文件：

路由配置文件：

• •src/router/index.ts - 添加新页面时需要同步添加路由

菜单结构

Sidebar.vue 结构

const menuItems: MenuItem[] = [
  { name: '菜单名', path: '/path', icon: 'iconName' },
  // 带子菜单
  {
    name: '父菜单',
    path: '/parent',
    icon: 'iconName',
    children: [
      { name: '子菜单1', path: '/parent/child1', icon: 'childIcon' },
    ]
  },
]

可用图标（定义在 icons 对象中）：

• •dashboard, clock, trophy, users, gamepad, clipboard
• •exchange, chart, wallet, stats, star, award
• •medal, settings, wrench, chevron

子菜单图标：

• •国旗：cn, kr, eu, us（使用 emoji）
• •其他：preview, market, broadcast, robot（使用 emoji）

MainLayout.vue 结构

使用 Element Plus 的 el-menu 组件：

<!-- 普通菜单项 -->
<el-menu-item index="/path" :disabled="isMenuDisabled('/path')">
  <el-icon><IconName /></el-icon>
  <span>菜单名</span>
</el-menu-item>

<!-- 带子菜单 -->
<el-sub-menu index="menu-id" :disabled="isMenuDisabled('/parent')">
  <template #title>
    <el-icon><IconName /></el-icon>
    <span>父菜单</span>
  </template>
  <el-menu-item index="/parent/child1">子菜单1</el-menu-item>
</el-sub-menu>

工作流程

添加菜单项

1. •在 Sidebar.vue 的 menuItems 数组中添加菜单项
2. •在 MainLayout.vue 的 <el-menu> 中添加对应的 <el-menu-item>
3. •如需新图标，在 Sidebar.vue 的 icons 对象中添加 SVG path
4. •在 MainLayout.vue 中 import 对应的 Element Plus 图标
5. •在 src/router/index.ts 中添加路由配置

删除菜单项

1. •从 Sidebar.vue 的 menuItems 数组中移除菜单项
2. •从 MainLayout.vue 的 <el-menu> 中移除对应元素
3. •可选：从 src/router/index.ts 中移除路由（如果页面也要删除）

添加子菜单

1. •在 Sidebar.vue 中，将菜单项改为带 children 数组的结构
2. •在 MainLayout.vue 中，将 <el-menu-item> 改为 <el-sub-menu> 结构
3. •确保 expandedMenus ref 中包含父菜单名称（如需默认展开）

注意事项

• •两个文件的菜单项必须保持一致
• •路径必须与路由配置匹配
• •isMenuDisabled 用于控制未加载存档时禁用菜单
• •/settings 和 /dev-tools 始终可用（不受存档加载限制）