前端树形导航菜单_千万级项⽬后台菜单导航设计及reactantd
实现
后台管理系统⼀般通过菜单进⾏各个功能点的导航，在⾯临⼤量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近⼏个百万级、千万级项⽬的开发实施过程中，⽤户对菜单导航结构提出⼀些修改意见，经过若⼲次迭代以优化操作体验，作者将迭代过程总结下做个分享。
⼀、整体布局
第⼀阶段
传统树形菜单导航，根据项⽬的不同，有的采⽤横向排列，有的固定在左侧
顶部菜单：从上到下分别为：标题栏、菜单栏、⼯作区
侧边菜单：导航菜单占据整个左侧，右边从上⽽下为标题栏、⼯作区
侧边菜单有个变形，标题栏占据全部，下边左右分别为导航菜单、⼯作区
早期项⽬曾经采⽤顶部菜单，后来以侧边菜单为主，主要采⽤第三种布局⽅式。
项⽬规模⼤了以后
1)⽤户经常反映⼏百个菜单，不知道要的功能在哪⾥，
2)有时客户现场的项⽬经理也反映开会时点来点去某个功能时被⽤户取笑
第⼆阶段
在对系统菜单分析、整理的过程中，有次点开泛微OA系统，发现在新建流程时，右侧整个⼯作区都是各个流程的操作⼊⼝，分为两个层级。受此启发，将菜单导航划分为四个层级，⼤概⽰意图如下：
这个版本菜单上线后
1)⽤户反映不到菜单的声⾳⼩了许多，但还是会有
导航菜单2)⽤户反馈另外⼀个问题：屏幕本来就不⼤，左侧菜单占空间还不⼩，导致⼯作区过⼩
3)开会的时侯就喜欢⼀眼把内容都看到
让想办法再优化下
第三阶段
在分析解决⽅案过程中，分析了当前主流云⼚商的管理后台系统，基本都是两层导航，第⼀次导航通过⼀个具有视觉冲击⼒⼤页⾯展⽰所有服务，点击后进⼊单个服务的侧边栏导航
改成这种结构也满⾜不了⽤户的需求，⽤户能够分出⼀级菜单的业务⼦系统，⼲脆将⼆、三、四级菜单同时展⽰出来，⼤概⽰意如下
为了⽤户操作⽅便，同时提供⼆级菜单的快捷⽅式。⽤户点击后菜单页⾯直接滚动⾄选中内容，同时⽤户浏览菜单页时，横向⼆级菜单跟随⽤户的操作进⾏联动。
这个版本的菜单导航上线后，⽤户⽐较认可。
⼆、跳转⽅式与多标签页
⽤户通过菜单点击功能后，经常需要进⾏⼆次跳转。最经典的应⽤场景为：通过菜单打开列表界⾯，点击单⾏后显⽰详情，详情的显⽰有⼏种不同的处理⽅式。
1、常见的跳转⽅式
1)浏览器标签页
⽤户每点击⼀次就打开⼀个新的浏览器标签页。优点是⼯作区很⼤，缺点是打开多了，浏览器标签页就会打开很多，要是开会时把浏览器切换⾄全屏模式，基本上就很难到上次打开的内容了。
2)⼯作区直接切换
⽤户点击详情时直接把⼯作区切换为详情。没有浏览器标签页的问题，但是每次只能看到⼀个，尤其是对⽐的时侯操作不⽅便；⽽且很难实现详情页返回时还能看到跳转前的列表。
3)详情页弹出框
⽤户点击详情时点出⼀个对话框，主要适⽤于详情内容⽐较少的场景，也⽆法解决多个详情对⽐的场景。
4)多标签页切换
系统提供多标签页，每打开⼀个功能时打开⼀个标签页，便于在不同功能间进⾏切换。这种⽅式的⼯作区略⼩于浏览器标签页，但是切换⽅便。
2、多标签页
作者采⽤了多标签页的⽅案，主要⽅便⽤户在不同已打开功能间切换。
多标签页在不同系统的实现略有差异：
1)同⼀个详情功能，⽤户在点击第⼀条数据后，点击第⼆条数据时再显⽰⼀个新标签页，还是把第⼀条数据的标签页显⽰成新的。为了避免⽤户打开过多标签页，同⼀个功能点(可理解为同⼀个url地址)只打开⼀个标签页。
2)⽤户从详情页跳转⾄列表页时，列表页是否需要刷新。
⽤户在⼀条⼀条看数据，已经看到第2页了，返回列表时变成第1页时，⽤户不满意要求保留当时的状态；⽤户从待办列表点进去⼀个待办事项处理完后，待办列表中还在，系统是不是出问题了呀。
针对业务场景的不同，具体问题具体分析，⼀般情况下不需要⾃动刷新，需要刷新时由具体功能提供⾃动刷新功能。即：多标签页切换控制提供保存上次状态功能、不提供⾃动刷新，待办列表提供⾃动刷新。
三、react ant design实现
作者开源的蜗⽜365采⽤上述设计实现了菜单导航，前端采⽤react ant design
导航布局采⽤antd组件，多标签页实现还算⽅便，主要是保存上次状态不好实现。
为了适应⼤量功能点的需要，采⽤umi提供的约定式路由。⽬前采⽤react-activation提供的KeepAlive⽅案。
(作者蜗⽜365，每天进步⼀点点，分享软件项⽬的点点滴滴，个⼈「蜗⽜365后台管理系统」，ID：woniublog)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。