明天是 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 中,齐全开源,能够收费商用。地址
开源不易,给个 star 吧!!
最初,衷心的感激以上所有插件的作者
- TypeScript
- react
- react-router-dom
- ant-ui
- mobx
- sass
- gh-pages
- echarts
- echarts-for-react
- copy-to-clipboard
- react-amap
- braft-editor
大家好,我是凤凰城下的小码农,能够关注我的同名 vx 公号【凤凰城下的小码农】,获取更多实用的技术文章。