Today is the last day of 2021, and the react-Admin-Plus I’ve been optimizing for a week has completed a small phase, which is a good ending.

I have to start from last year, when I just learned React, I read the official documents and made several small demos. I felt that it was easy to write, smooth and comfortable. As an old saying goes, it is called wiping your ass with gauze — I wanted to show my hand to everyone, so I wanted to write an admin open source project.

Initially, I made a react-Admin-Plus 1.0. I thought I would get a lot of fans to worship me when I launched, but I didn’t get a lot of reaction. Instead, I got:

There are:

After I settled down and took a good look at my project, I found a lot of problems, such as screen adaptation, and some fancy features, such as the gradient landing page, which I decided to optimize.

The first thing I optimized was the landing page, changing the background color to look like this:

This background is 100% written in CSS. I saw a treasure site built by a Bangladeshi product designer. There are a lot of materials in it

Second, I optimized the menu on the left. First added is the shortcut toggle button on the left navigation, which can control the navigation expansion and collapse, more convenient (previously placed in the global Settings). The icon must be bound to the icon property. If you write the icon on the className property, the component will not recognize the icon when closing the menu, and the style will be wrong.

{/* home navigation */} {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> }) }Copy the code

The third point I optimize the site of the head, I think there are many extensibility, add some global search or notification, so I added the head, head is added, the user name, and some function button, and then I think ant – UI TAB is too big, so adjusted the style of the label, eventually grow below like this

The last point is the adaptation of mobile terminal. The menu is placed in the side slide. When entering the home page, I can determine the device to log in to.

One unsolved problem here is that when too many tabs are open the TAB will not scroll with the active TAB, so I limited myself to closing the first TAB when more than 4 tabs are open. If you know how to solve the problem, you can submit pr to me.

I uploaded all the code to my Github, which is completely open source and free to use. address

Open source is not easy, give a star!!

Finally, heartfelt thanks to the authors of all the plug-ins above

  • TypeScript
  • react
  • react-router-dom
  • ant-ui
  • mobx
  • sass
  • gh-pages
  • echarts
  • echarts-for-react
  • copy-to-clipboard
  • react-amap
  • braft-editor

Hello everyone, I am a small code farmers in Phoenix, you can pay attention to my vX public number [small code farmers in Phoenix], for more practical technical articles.