菜单设计

共计 613 字，约需阅读 2.23 分钟

背景

站点菜单存在需要修改的情况，每次修改之后都需要发布应用代码，严重影响了开发迭代的效率

目标

整体站点是一个经典的顶部-侧边栏，实现一个菜单配置的功能，需要具有如下能力

  • 用户能够自主申请接入
  • 需要管理员进行审批才能生效
  • 生效前只能管理员和菜单所有者才能看到对应配置
  • 能够支持多级菜单
  • 能够支持菜单的自由排序
  • 菜单匹配需要支持精确匹配、前缀匹配和自定义匹配的方式

设计

整体流程

整体流程

数据库

选型

  • 菜单数据量少
  • 存在半结构化的数据类型（owners 可能支持多选和搜索）
  • 无复杂查询场景
  • 并发量不高

表设计

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE `Menu` (
  `_id` number NOT NULL COMMENT '菜单 id，默认生成的唯一 id',
  `order` number NOT NULL COMMENT '菜单顺序',
  `pid` string NOT NULL COMMENT '父菜单 id，一级菜单的父 id 为 root',
  `name` char(64) NOT NULL COMMENT '菜单名称',
  `path` char(64) NOT NULL COMMENT '菜单路由',
  `matchPrefix` boolean NOT NULL COMMENT '是否前缀匹配',
  `hiddenLeftMenu` boolean NOT NULL COMMENT '是否隐藏左侧导航栏',
  `owners` string[] NOT NULL COMMENT '菜单所有者',
  `status` tinyint(4) NOT NULL DEFAULT 1 COMMENT '状态 1: 待上线  10: 已上线',
  `createTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '添加时间',
  `updateTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜单管理'
  • order： 一级菜单 100-999，二级菜单为一级菜单顺序 * 1000 + （1-1000）的范围
  • matchPrefix： 是否前缀匹配，为了支持动态路由和其路径下的菜单匹配
  • hiddenLeftMenu： 是否隐藏左侧导航栏，部分场景无需左侧的菜单

接口设计

  • 菜单查询（分权限展示，未上线的菜单需要在菜单所有者和管理员的场景下能够展示出来）
  • 菜单新增
  • 菜单修改
  • 菜单上线（管理员）
  • 菜单删除（管理员）
  • 菜单排序

前端界面设计

需要支持以下功能

  • 支持菜单的叶子节点和非叶子节点
  • 支持排序

采用 antd 的 tree 进行菜单的编辑功能

备注

菜单设计时需要考虑以下情况

  • 菜单设计时需要考虑排序
  • 权限设计
  • 路由匹配