168 lines
4.7 KiB
Markdown
168 lines
4.7 KiB
Markdown
# 静态菜单配置说明
|
||
|
||
## 概述
|
||
当前系统使用静态菜单配置，所有菜单项都在前端代码中硬编码定义。菜单配置位于 `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/` |