部门静态导航页设计
前言 每一个公司或者团队有会有相关的项目网址，考虑到团队共用的东西，所以计划是开发一个静态导航页，这样就不需要每个人自己维护了，使用同一套即可，当时在Github上面找了一些开源的静态导航页项目，使用的是开源库static-nav，它是使用HTML+CSS+JQ简单实现的，代码里面网址都是直接写死的，我只要将其替换就可以。 1. 遇到问题 static-nav虽然可以正常应对当前的需求，但是使用一段时间之后发现，如果我要替换或者新增一些网址，每次都需要在.html文件中修改，然后再重新部署。一两次还好，次数多了，就有点受不了了，再加上一个模块的网址多了之后，好几个模块所占用的空间不一致的话，那布局就容易错乱，为了解决这个问题，我每次都需要使用占位符解决。 2. 解决方案 考虑到维护、后期拓展难的问题，就打算重构这个项目，并命名为dst-static-nav，基于vue next + vite + element-plus 实现，通过一个navLists.ts文件动态配置，后期只需要将这个文件存放在服务器，如有任何需求，只需要改动这个navLists.ts文件即可，不需要改动项目界面，然后又要重新部署一遍，因为最近百度捣鼓了一个开发者搜索，所以也加了一下，项目效果图，如下所示： 功能主要是以下几点，分别是： 左边菜单栏快速定位，右边静态导航页动态渲染 通过navList.ts配置，无需改动前端页面 支持百度开发者搜索 当前只是这些功能，后期可能考虑部署线上，然后怎么可以做到通用一点。 3. 技术要点 项目虽然很小，但是有一些细节点还是可以梳理记录一下的，技术没有高低之分，只要能解决了问题就是好技术。 3.1 基于el-scrollbar实现左右联动定位到标题栏 项目开发过程中，主要解决的问题是，左侧菜单栏和右边导航布局页面的联动，需求就是左侧菜单栏选中，右边导航页对应的标题栏滚动到顶部显示，在实现中主要使用document.getElementsByName()这个函数，当上定义了name属性，就可以通过这个函数获取到它与顶部的距离offsetTop，以此可以将滚动条滚动到指定的位置，如下所示： const handleSelect = (key: string, keyPath: string[]) => { let offsetTop = document.getElementsByName(key)[0].offsetTop scrollbarRef.value!.setScrollTop(offsetTop - 20) } 3.2 实现左侧菜单栏最后几个菜单的标题置顶 在项目使用过程中，发现左侧菜单栏最后几个菜单，来回切换，导航标题没有置顶，原因很简单，因为布局不够，为了解决这个问题，就需要在最后一个导航模块增加布局，但是应该要增加多少呢？每个导航模块的高度都是不定的，所以要新增的布局高度只能通过计算，动态设置。 首先，需要知道最后一个导航模块的名称，如下所示： // 获取左侧菜单最后一项，基于它加上需补充的空间高度(浏览器内高度-卡片整个高度) let lastNavName = navLists.at(-1)?.chindren.at(-1)?.label 然后，需要获取当前浏览器页面的高度，减去这个导航模块的高度，就可以知道需要新增多高的布局了，如下所示： const handleSelect = (key: string, keyPath: string[]) => { let offsetTop = document.getElementsByName(key)[0].offsetTop scrollbarRef.value!.setScrollTop(offsetTop - 20) } 总结 dst-static-nav项目还有蛮多东西需要完善的，也是在逐步新增需求，虽然不是什么了不起的项目，但是项目开发整个流程规范是一样的，争取培养起来用心做事情的感觉，从中体验到丝丝成就感。