# 前端路由配置指南

## 概述
由于本项目使用基于菜单的动态路由系统，需要先在后端数据库中配置菜单，然后前端会自动生成对应的路由。

## 配置步骤

### 1. 执行SQL脚本
在数据库中执行 `backend-server/sql/barmgr_menu_config.sql` 脚本，这会添加以下菜单结构：

```
门店管理
├── 酒头管理 (/barmgr/tap)
├── 酒款搜索 (/barmgr/search)
└── 整版酒单 (/template/menu)
```

### 2. 组件映射关系
路由系统会自动将菜单配置的 `component` 字段映射到实际的Vue组件：

| 菜单路径 | 组件路径 | 实际文件位置 |
|----------|----------|--------------|
| `barmgr/tap/index` | `/src/views/barmgr/tap/index.vue` | 酒头管理页面 |
| `barmgr/search/index` | `/src/views/barmgr/search/index.vue` | 酒款搜索页面 |
| `template/menu/index` | `/src/views/template/menu/index.vue` | 整版酒单模板页面 |

### 3. 权限配置
每个菜单项都配置了对应的权限标识：

**酒头管理权限：**
- `barmgr:tap:list` - 酒头列表查看
- `barmgr:tap:query` - 酒头详情查询
- `barmgr:tap:stats` - 统计信息查看
- `barmgr:tap:add` - 新酒上枪
- `barmgr:tap:edit` - 酒款管理编辑
- `barmgr:tap:remove` - 批量下架

**酒款搜索权限：**
- `barmgr:platform:search` - 智能搜索
- `barmgr:platform:beer:list` - 酒款列表
- `barmgr:platform:beer:query` - 酒款详情
- `barmgr:platform:brewery:list` - 品牌列表
- `barmgr:platform:brewery:query` - 品牌详情

**模板管理权限：**
- `barmgr:wineMenuTemplate:list` - 模板列表
- `barmgr:wineMenuTemplate:query` - 模板详情
- `barmgr:wineMenuTemplate:add` - 新增模板
- `barmgr:wineMenuTemplate:edit` - 编辑模板
- `barmgr:wineMenuTemplate:remove` - 删除模板
- `barmgr:wineMenuTemplate:generate` - 生成图片

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

1. **检查菜单显示**: 登录系统后，左侧菜单应该显示"门店管理"主菜单及子菜单
2. **检查路由跳转**: 点击菜单项应该能正确跳转到对应页面
3. **检查权限控制**: 不同角色应该看到不同的菜单项和功能按钮

### 5. 故障排除

**问题1: 菜单不显示**
- 检查数据库中的菜单数据是否正确插入
- 检查当前用户角色是否拥有对应的菜单权限
- 查看 `sys_role_menu` 表中的角色菜单关联关系

**问题2: 页面404错误**
- 检查组件文件路径是否正确
- 确认Vue组件文件确实存在于指定位置
- 检查路由组件映射逻辑

**问题3: 权限验证失败**
- 检查后端API的权限注解是否正确
- 确认用户角色拥有对应的功能权限
- 查看 `sys_role_menu` 表中的权限分配

### 6. 菜单图标配置
当前使用的图标：
- 门店管理: `shop`
- 酒头管理: `coffee-cup`
- 酒款搜索: `search`
- 整版酒单: `document`

可以根据实际需要在数据库中修改 `icon` 字段，系统支持Element Plus图标库中的所有图标。

## 自定义配置

### 添加新的子菜单
如果需要添加新的功能菜单，可以参考以下SQL模板：

```sql
-- 添加新菜单项
INSERT INTO sys_menu (menu_name, parent_id, order_num, path, component, query, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, remark)
VALUES ('菜单名称', 父菜单ID, 排序号, '路由路径', '组件路径', '', 1, 0, 'C', '0', '0', '权限标识', '图标', 'admin', sysdate(), '备注说明');

-- 为角色分配菜单权限
INSERT INTO sys_role_menu (role_id, menu_id) VALUES (角色ID, 菜单ID);
```

### 修改菜单顺序
修改 `order_num` 字段可以调整菜单显示顺序：

```sql
UPDATE sys_menu SET order_num = 新顺序号 WHERE menu_id = 菜单ID;
```

## 注意事项

1. **组件路径规范**: 组件路径必须以 `/src/views` 为基础，配置时只需要从views后的相对路径
2. **权限命名规范**: 权限标识建议使用 `模块:功能:操作` 的命名规范
3. **菜单层级限制**: 建议菜单层级不超过3级，以保证良好的用户体验
4. **图标选择**: 选择语义明确的图标，保持整体风格一致

## 相关文件

- **SQL配置文件**: `backend-server/sql/barmgr_menu_config.sql`
- **路由配置**: `frontend-store/src/router/routes.js`
- **组件映射**: `frontend-store/src/router/index.js`
- **页面组件**: `frontend-store/src/views/barmgr/`