关于前端:我花了一周的时间优化了一下reactadminplus这下终于可以拿得出手了

50次阅读

共计 1263 个字符，预计需要花费 4 分钟才能阅读完成。

明天是 2021 年的最初一天，我花了一周的工夫优化的 react-admin-plus 也算实现了一个小阶段，算是一个好的结尾吧。

还得从去年说起，过后刚学 react, 看了看官网文档后做了几个小 demo，感觉写起来得心应手，舒畅自若，用老话说那叫 纱布擦屁股 -- 想给大家露一手 , 所以想写一个admin 的开源我的项目，看了看市面上的同类型我的项目，而后就开始整。

最开始做了个 react-admin-plus 1.0，我认为上线之后会有很多小迷弟迷妹们过去崇拜我，没想到并没有失去很多反应，失去的却是：

还有：

起初我静下心来好好的看了看我的我的项目，发现了很多问题，比方屏幕的适配，还有一些花里胡哨的性能，比方这个渐变色的登录页，我已我决定好好的优化一下。

我首先优化的就是这个登录页，更换了一下背景色，换成了这个样子：

说进去泥坑不信，这个背景百分百是用 css 写的，这是之前我看到了一个宝藏级网站，是一个孟加拉国产品设计师搭建的，里边有很多的素材，如果你有须要，能够去看一下：链接

第二我优化了一下左侧的菜单。首先增加的左侧导航的快捷切换按钮，能够管制导航开展收起，更加不便（以前是放在全局设置里的）。而后增加了字体图标，这里说一下，图标必须绑定在 icon 这个属性下，如果你本人写在 className 属性上，收起菜单的时候组件不会辨认图标，款式会产生错乱，具体写法如下：

{/* 主页导航 */}
{MENU_LIST.map((el:NavItem) => {let { key, name} = el;
        return <Menu.Item key={key} 
                    icon={<i className={el.icon}></i>}
                onClick={() => clickMenuItem(el)}> {name}  </Menu.Item>
    })
}

第三点我优化了一下网站的头部，我感觉这里有很多扩展性比方加一些全局搜寻或者音讯告诉之类的，所以我加了一下头部，增加了头像，用户名，以及一些性能按钮, 而后我感觉 ant-ui 的标签页太大了，所以调整了一下标签的款式，最终长下边这个样子

最初一点就是挪动端的适配，菜单放在了侧滑中，进入主页的时候判断一把登录的设施，我特意封装了一个办法，放在我的开源我的项目 h5-api 中，有趣味能够去star。

这里有一个问题没有解决，就是当关上太多标签的时候这个标签页不会追随激活的标签滚动，所以我限度了一下，当关上的标签大于 4 个的时候我就敞开最开始关上的。如果有小伙伴晓得如何解决能够提交 pr 给我。

所有的代码我都上传到了我的 github 中，齐全开源，能够收费商用。地址