我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了

今天是2021年的最后一天,我花了一周的时间优化的react-admin-plus也算完成了一个小阶段,算是一个好的结尾吧。

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

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第1张图片

最开始做了个 react-admin-plus 1.0,我以为上线之后会有很多小迷弟迷妹们过来崇拜我,没想到并没有得到很多反响,得到的却是:

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第2张图片

还有:

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第3张图片

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

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

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第4张图片

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

第二我优化了一下左侧的菜单。首先添加的左侧导航的快捷切换按钮,可以控制导航展开收起,更加方便(以前是放在全局设置里的)。然后添加了字体图标,这里说一下,图标必须绑定在icon这个属性下,如果你自己写在className属性上,收起菜单的时候组件不会识别图标,样式会发生错乱,具体写法如下:

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

第三点我优化了一下网站的头部,我觉得这里有很多扩展性比如加一些全局搜索或者消息通知之类的,所以我加了一下头部,添加了头像,用户名,以及一些功能按钮,然后我觉得ant-ui的标签页太大了,所以调整了一下标签的样式,最终长下边这个样子

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第5张图片

最后一点就是移动端的适配,菜单放在了侧滑中,进入主页的时候判断一把登录的设备,我特意封装了一个方法,放在我的开源项目h5-api中,有兴趣可以去star

这里有一个问题没有解决,就是当打开太多标签的时候这个标签页不会跟随激活的标签滚动,所以我限制了一下,当打开的标签大于4个的时候我就关闭最开始打开的。如果有小伙伴知道如何解决可以提交pr给我。

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第6张图片

我花了一周的时间,优化了一下react-admin-plus,这下终于可以拿得出手了_第7张图片

所有的代码我都上传到了我的github中,完全开源,可以免费商用。地址

开源不易,给个star吧!!

最后,衷心的感谢以上所有插件的作者

大家好,我是凤凰城下的小码农,可以关注我的同名vx公号【凤凰城下的小码农】,获取更多实用的技术文章。

你可能感兴趣的