frontend-store/docs/static_menu_configuration.md

# 静态菜单配置说明

## 概述
当前系统使用静态菜单配置，所有菜单项都在前端代码中硬编码定义。菜单配置位于 `src/api/layout/index.js` 文件中的 `getUserMenu()` 函数。

## 当前菜单结构

```
我的酒单 (/taplist)
├── 组件: /barmgr/tap/index
├── 图标: IconProIdcardOutlined
└── 功能: 酒头管理页面

模板管理 (/template) - 目录菜单
├── 酒单模板 (/template/index)
│   ├── 组件: /template/beer/index
│   └── 图标: IconProLinkOutlined
└── 整版酒单 (/template/menu)
    ├── 组件: /template/menu/index
    └── 图标: IconProAppstoreOutlined

酒款搜索 (/search) - 隐藏菜单
├── 组件: /barmgr/search/index
├── 图标: IconProConnectionOutlined
└── 状态: hide: true (不在菜单中显示，但路由可用)

个人中心 (/profile) - 隐藏菜单
├── 组件: profile
├── 图标: IconProUserOutlined
└── 状态: hide: true
```

## 菜单项属性说明

### 基本属性
- `path`: 路由路径
- `component`: 对应的Vue组件路径
- `meta.title`: 菜单显示名称
- `meta.icon`: 菜单图标
- `meta.hide`: 是否隐藏菜单项（true表示隐藏）
- `redirect`: 目录菜单的重定向路径
- `children`: 子菜单数组

### 特殊配置
- **目录菜单**: 设置 `children` 属性，包含子菜单
- **隐藏菜单**: 设置 `meta.hide: true`，路由存在但不显示在菜单中
- **重定向**: 目录菜单设置 `redirect` 到默认子菜单

## 组件映射关系

| 菜单路径 | 组件路径 | 实际文件位置 |
|----------|----------|--------------|
| `/taplist` | `/barmgr/tap/index` | `src/views/barmgr/tap/index.vue` |
| `/search` | `/barmgr/search/index` | `src/views/barmgr/search/index.vue` |
| `/template/index` | `/template/beer/index` | `src/views/template/beer/index.vue` |
| `/template/menu` | `/template/menu/index` | `src/views/template/menu/index.vue` |
| `/profile` | `profile` | `src/views/profile/index.vue` |

## 图标配置

当前使用的图标都映射到Element Plus的图标：

```javascript
const ruoYiIcons = {
  // ... 其他图标映射
  'IconProIdcardOutlined': '身份证图标',
  'IconProConnectionOutlined': '连接图标', 
  'IconProLinkOutlined': '链接图标',
  'IconProAppstoreOutlined': '应用商店图标',
  'IconProUserOutlined': '用户图标'
}
```

## 修改菜单

### 添加新菜单
在 `getUserMenu()` 函数中添加新的菜单对象：

```javascript
temp.unshift({
  path: '/new-menu',
  component: '/path/to/component',
  meta: { title: '新菜单', icon: 'IconName' }
});
```

### 添加子菜单
```javascript
temp.unshift({
  path: '/parent',
  redirect: '/parent/child1',
  meta: { title: '父菜单', icon: 'IconName' },
  children: [
    {
      path: '/parent/child1',
      component: '/path/to/child1',
      meta: { title: '子菜单1', icon: 'IconName' }
    }
  ]
});
```

### 隐藏菜单
```javascript
temp.push({
  path: '/hidden-menu',
  component: '/path/to/component',
  meta: {
    title: '隐藏菜单',
    icon: 'IconName',
    hide: true
  }
});
```

## 菜单顺序

菜单的显示顺序由添加顺序决定：
- `temp.unshift()`: 添加到数组开头（顶部显示）
- `temp.push()`: 添加到数组末尾（底部显示）

当前顺序：
1. 我的酒单（unshift）
2. 模板管理（unshift，所以实际显示在第1位）
3. 酒款搜索（push，隐藏）
4. 个人中心（push，隐藏）

实际显示顺序：
1. 模板管理
2. 我的酒单

## 后续迁移到动态路由

当需要迁移到动态路由时：

1. **数据库配置**: 使用 `backend-server/sql/barmgr_menu_config.sql`
2. **接口调用**: 修改 `getUserMenu()` 函数调用后端API
3. **权限控制**: 结合角色权限系统
4. **数据映射**: 将数据库菜单数据转换为前端路由格式

## 优势与限制

### 静态路由优势
- ✅ 简单直接，无需数据库配置
- ✅ 开发调试方便
- ✅ 性能好，无需额外API请求
- ✅ 不依赖后端权限系统

### 静态路由限制
- ❌ 无法根据用户权限动态显示菜单
- ❌ 修改菜单需要重新部署前端
- ❌ 无法实现精细化权限控制
- ❌ 不适合多角色复杂系统

## 测试验证

配置完成后，可以通过以下方式验证：

1. **菜单显示**: 登录系统查看左侧菜单是否正确显示
2. **路由跳转**: 点击菜单项检查页面跳转是否正常
3. **隐藏菜单**: 确认隐藏菜单不在菜单中显示
4. **直接访问**: 在浏览器地址栏直接访问隐藏菜单路径

## 相关文件

- **菜单配置**: `frontend-store/src/api/layout/index.js`
- **页面组件**: `frontend-store/src/views/barmgr/`
- **路由系统**: `frontend-store/src/router/`