yz/frontend-store

Fork 0

davy a88d939796 多酒款功能可用

2025-08-04 09:59:12 +08:00

4.3 KiB

Raw Permalink Blame History

前端路由配置指南

概述

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

配置步骤

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. 验证配置

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

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

5. 故障排除

问题1: 菜单不显示

检查数据库中的菜单数据是否正确插入
检查当前用户角色是否拥有对应的菜单权限
查看 sys_role_menu 表中的角色菜单关联关系

问题2: 页面404错误

检查组件文件路径是否正确
确认Vue组件文件确实存在于指定位置
检查路由组件映射逻辑

问题3: 权限验证失败

检查后端API的权限注解是否正确
确认用户角色拥有对应的功能权限
查看 sys_role_menu 表中的权限分配

6. 菜单图标配置

当前使用的图标：

门店管理: shop
酒头管理: coffee-cup
酒款搜索: search
整版酒单: document

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

自定义配置

添加新的子菜单

如果需要添加新的功能菜单，可以参考以下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 字段可以调整菜单显示顺序：

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

注意事项

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

4.3 KiB Raw Permalink Blame History Unescape Escape