今天是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公号【凤凰城下的小码农】，获取更多实用的技术文章。
标签：我花,admin,一下,react,开源,标签,优化 来源： https://www.cnblogs.com/qisi007/p/15761837.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。