店铺菜单

平台端 / 店铺 / 店铺设置

📋 店铺菜单

所属模块: 店铺管理 > 店铺设置 > 店铺菜单
版本: JAVA-MER-v2.1
路由路径: /merchant/system
最后更新: 2026-06-04
适用角色: 平台管理员

📖 它是干什么的？

店铺菜单是商户后台侧边栏菜单的配置中心。简单说，平台管理员在这里搭好菜单骨架（目录 → 菜单 → 按钮），商户后台就能看到对应的导航和操作入口。

💡 一句话: 你在这配了什么菜单，商户后台就长什么样。属于 RBAC 权限体系的”菜单层”——先有菜单，再绑权限，最后赋给角色。

🏗️ 菜单层级模型

采用经典的三级 RBAC 菜单模型：

目录 (M)         菜单 (C)         按钮 (A)
────────        ────────        ────────
店铺管理   ──→   店铺列表   ──→   添加店铺
│               │            └─→   编辑店铺
│               │            └─→   删除店铺
│               └─→   店铺分类  ──→   添加分类
│                            └─→   编辑分类
└─→   店铺设置   ──→   店铺菜单  ──→   新增
                                 └─→   修改
                                 └─→   删除

类型 标识 说明 典型例子

目录 M 侧边栏的一级分组，不可点击跳转 “店铺管理””商品管理””订单管理”

菜单 C 可点击的实际页面入口 “店铺列表””店铺分类””店铺入驻申请”

按钮 A 页面内的操作权限点 “添加””编辑””删除””审核”

🔍 列表筛选

筛选项 说明

菜单名称 模糊搜索菜单/目录/按钮名称

菜单类型 下拉选择：目录(M) / 菜单(C) / 按钮(A)

📋 列表字段

列名 说明

菜单名称 树形展示，支持三级父子关系

图标 Element UI 图标类名，如 el-icon-s-shop

排序 数字越小越靠前

权限标识 按钮类型的权限字符，如 platform:merchant:menu:add

组件路径 菜单对应的 Vue 组件路径，如 views/merchant/list/index

状态 显示(绿) / 隐藏(红) — 隐藏的菜单不在侧边栏展示但 URL 仍可访问

类型 目录(蓝) / 菜单(橙) / 按钮(灰)

操作 修改 / 新增子级 / 删除

🔧 功能操作

展开/折叠

点击「展开/折叠」按钮可一键展开或收起树形表格的所有节点。

新增菜单

点击「新增」按钮（或某行的「新增」链接新增子级），弹出表单：

字段 必填 说明

上级菜单 ❌ 树形选择器，选”主目录”则为一级菜单

菜单类型 ✅ 目录(M) / 菜单(C) / 按钮(A)

菜单图标 ❌ 仅目录和菜单可设，点击图标库选择

菜单名称 ✅ 菜单显示文字

组件路径 ❌ 仅目录和菜单，如 system/user/index，默认在 views 目录下

显示排序 ✅ 数字越小越靠前，范围 0-9999

权限字符 ❌ 仅按钮类型，如 platform:merchant:menu:add

显示状态

仅非按钮类型，显示/隐藏

修改菜单

点击某行的「修改」链接，打开预填表单进行编辑。

删除菜单

点击某行的「删除」链接，确认后删除。

⚠️ 注意: 删除菜单前请确保没有子节点和角色引用。删除操作不可恢复。

📸 操作截图

🔌 接口速查

方法 路径 说明

GET api/admin/platform/merchant/menu/list 菜单列表（含搜索/筛选）

GET api/admin/platform/merchant/menu/info/{id} 菜单详情

POST api/admin/platform/merchant/menu/add 新增菜单

POST api/admin/platform/merchant/menu/update 修改菜单

POST api/admin/platform/merchant/menu/delete/{id} 删除菜单

🗃️ 技术要点

项目 说明

前端页面 mer_plat_admin/src/views/merchant/system/index.vue

路由路径 /merchant/system，路由名 MerchantAystem，归属 店铺 顶级菜单

树形组件 @riophae/vue-treeselect（上级菜单选择器）+ el-table tree-props（列表展示）

图标选择 通过 $modalIcon 全局方法调起 Element UI 图标选择器

权限前缀 platform:merchant:menu:list/add/update/delete

RBAC 关联 菜单配置后通过角色绑定到商户管理员，控制商户后台可见的导航和操作

❓ 常见问题

Q: 新增了菜单为什么商户后台看不到？

A: 三步检查：① 菜单状态是否为”显示”；② 菜单对应的权限标识是否已赋给商户的角色；③ 商户管理员是否拥有对应角色。

Q: 菜单类型”目录””菜单””按钮”有什么区别？

A: 目录是侧边栏的折叠分组（不可点击），菜单是实际页面入口（可点击），按钮是页面内的操作权限点（不在侧边栏显示，控制页面上的增删改按钮是否可见）。

Q: 隐藏的菜单还能访问吗？

A: 能。隐藏只是不在侧边栏展示，知道 URL 依然可以直接访问。如需彻底禁止访问，需在角色权限中移除。