yz/frontend-store

Fork 0

davy 3a86a7a763 多酒款功能可用

2025-08-04 20:02:06 +08:00

4.7 KiB

Raw Permalink Blame History

静态菜单配置说明

概述

当前系统使用静态菜单配置，所有菜单项都在前端代码中硬编码定义。菜单配置位于 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的图标：

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

修改菜单

添加新菜单

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

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

添加子菜单

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

隐藏菜单

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

菜单顺序

菜单的显示顺序由添加顺序决定：

temp.unshift(): 添加到数组开头（顶部显示）
temp.push(): 添加到数组末尾（底部显示）

当前顺序：

我的酒单（unshift）
模板管理（unshift，所以实际显示在第1位）
酒款搜索（push，隐藏）
个人中心（push，隐藏）

实际显示顺序：

模板管理
我的酒单

后续迁移到动态路由

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

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

优势与限制

静态路由优势

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

静态路由限制

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

测试验证

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

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

4.7 KiB Raw Permalink Blame History Unescape Escape