fix: fix the bug of changing the state during the render process and other small bugs

package.json

@@ -42,6 +42,7 @@
     "react-intl-universal": "^2.4.2",
     "react-json-view": "^1.21.3",
     "react-resizable": "^1.11.0",
+    "react-router-dom": "^6.15.0",
     "redux-logger": "^3.0.6",
     "setprototypeof": "^1.1.0",
     "url-polyfill": "^1.0.10"

src/layouts/BasicLayout.js

@@ -115,7 +115,8 @@ class BasicLayout extends React.PureComponent {
       localeName: window.sessionStorage.getItem("locale")
         ? window.sessionStorage.getItem("locale")
         : "en-US",
-      pluginsLoaded: false
+      pluginsLoaded: false,
+      processedMenus: []
     };
   }
 
@@ -135,6 +136,7 @@ class BasicLayout extends React.PureComponent {
       });
       return;
     }
+    this.processMenus()
     const { dispatch } = this.props;
     dispatch({
       type: "global/fetchPlatform"
@@ -216,19 +218,9 @@ class BasicLayout extends React.PureComponent {
     });
   };
 
-  render() {
-    const {
-      collapsed,
-      routerData,
-      match,
-      location,
-      plugins,
-      menuTree,
-      permissions,
-      dispatch
-    } = this.props;
-    const { localeName, pluginsLoaded } = this.state;
-    const bashRedirect = this.getBaseRedirect();
+  processMenus() {
+    const { plugins, menuTree, permissions, dispatch } = this.props
+    const { pluginsLoaded } = this.state
     let menus = getMenuData();
     if (menuTree.length > 0) {
       menus = menus.slice(0, 1);
@@ -308,13 +300,27 @@ class BasicLayout extends React.PureComponent {
       }
     });
 
+    this.setState({processedMenus: menus})
+  }
+
+  render() {
+    const {
+      collapsed,
+      routerData,
+      match,
+      location,
+      dispatch
+    } = this.props;
+    const { localeName, processedMenus } = this.state;
+    const bashRedirect = this.getBaseRedirect();
+
     const layout = (
       <Layout>
         <SiderMenu
           logo={logo}
           TitleLogo={TitleLogo}
           dispatch={dispatch}
-          menuData={menus}
+          menuData={processedMenus}
           collapsed={collapsed}
           location={location}
           onCollapse={this.handleMenuCollapse}

src/layouts/UserLayout.less

@@ -22,7 +22,7 @@
   flex-direction: column;
   height: 100vh;
   overflow: auto;
-  background-image: url();
+  // background-image: url();
   background: #ffffff;
 }
 
@@ -78,4 +78,4 @@
   color: #ffffff;
   margin-top: 12px;
   margin-bottom: 40px;
-}
+}

src/routes/System/Plugin/index.js

@@ -359,7 +359,7 @@ export default class Plugin extends Component {
           width: 120,
           render: (text, record) => {
             return record.url
-              ? <Link to={record.url}><div style={{color: "#1890ff", "fontWeight": "bold", "text-decoration-line": "underline"}}>{text || "----"}</div></Link>
+              ? <Link to={record.url}><div style={{color: "#1890ff", "fontWeight": "bold", "textDecorationLine": "underline"}}>{text || "----"}</div></Link>
               : <div style={{color: "#260033", "fontWeight": "bold"}}>{text || "----"}</div>;
           }
         },