feat(menu): 菜单注入方式更换

菜单注入方式修改为使用 HOC 模式，定制更加灵活

config-mf.js

@@ -81,12 +81,12 @@ module.exports = function (config, env) {
           // 'redux',
           // 'redux-thunk',
           "superagent",
-          "react-router-dom",
+          // "react-router-dom",
           // 'use-debounce',
           // 'websocket',
           "chart.js",
         ]),
-        ...createShared(["react", "react-dom"]),
+        ...createShared(["react", "react-dom", "react-router-dom"]),
       },
     })
   );

src/saturnCloud/index.tsx

-import { Suspense, lazy, useState, useEffect } from "react";
+import React, { Suspense, lazy, useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import LoadingComponent from "../common/LoadingComponent";
 import history from "../history";
+import MenuItem from "../screens/Console/Menu/MenuItem";
 // import RemoteComponent from "./RemoteComponent";
 // import loadMenu from "saturn_tenant/menu";
 
@@ -12,6 +13,7 @@ const RemoteSaturnTenant = lazy(() => import("saturn_tenant/App"));
 const RemoteSaturnTenantFullscreen = lazy(
   () => import("saturn_tenant/AppFullscreen")
 );
+const RemoteMenuContainer = lazy(() => import("saturn_tenant/MenuContainer"));
 
 // const loadMenu = () => import("saturn_tenant/menu");
 // console.log("loadMenu", loadMenu);
@@ -27,41 +29,61 @@ const RemoteSaturnTenantFullscreen = lazy(
 /** 在 Layout 下展示的内容 */
 export function SaturnTenant() {
   return (
-    <div>
-      <Suspense fallback={<LoadingComponent />}>
-        <RemoteSaturnTenant history={history} />
-      </Suspense>
-    </div>
+    <Suspense fallback={<LoadingComponent />}>
+      <RemoteSaturnTenant history={history} />
+    </Suspense>
   );
 }
 
 /** 全屏展示的内容 */
 export function SaturnTenantFullscreen() {
   return (
-    <div>
-      <Suspense fallback={<LoadingComponent />}>
-        <RemoteSaturnTenantFullscreen history={history} />
-      </Suspense>
-    </div>
+    <Suspense fallback={<LoadingComponent />}>
+      <RemoteSaturnTenantFullscreen history={history} />
+    </Suspense>
   );
 }
 
-/** 加载侧栏菜单 */
-export function useSaturnConsoleMenu() {
-  const [menu, setMenu] = useState([]);
+/** 全屏展示的内容 */
+export function SaturnTenantMenuContainer({
+  children,
+  isOpen,
+  groupState,
+}: {
+  children: React.ReactNode;
+  isOpen: boolean;
+  groupState: {
+    openGroup: string;
+    setOpenGroup: React.Dispatch<React.SetStateAction<string>>;
+    expandedGroup: string;
+    setExpandedGroup: React.Dispatch<React.SetStateAction<string>>;
+  };
+}) {
+  return (
+    <Suspense fallback={<LoadingComponent />}>
+      <RemoteMenuContainer context={{ MenuItem, NavLink, isOpen, groupState }}>
+        {children}
+      </RemoteMenuContainer>
+    </Suspense>
+  );
+}
 
-  useEffect(() => {
-    import("saturn_tenant/consoleMenu")
-      .then((res) => {
-        const createMenu = res.default;
-        createMenu(NavLink).then((menu) => {
-          setMenu(menu);
-        });
-      })
-      .catch((e) => {
-        console.error(e);
-      });
-  }, []);
+// /** 加载一个函数方法 */
+// export function useSaturnConsoleMenu() {
+//   const [menu, setMenu] = useState([]);
 
-  return menu;
-}
+//   // useEffect(() => {
+//   //   import("saturn_tenant/consoleMenu")
+//   //     .then((res) => {
+//   //       const createMenu = res.default;
+//   //       createMenu(NavLink).then((menu) => {
+//   //         setMenu(menu);
+//   //       });
+//   //     })
+//   //     .catch((e) => {
+//   //       console.error(e);
+//   //     });
+//   // }, []);
+
+//   return menu;
+// }

src/screens/Console/Menu/ConsoleMenuList.tsx

@@ -31,6 +31,7 @@ import {
 import MenuItem from "./MenuItem";
 import { useLocation } from "react-router-dom";
 import history from "../../../history";
+import { SaturnTenantMenuContainer } from "../../../saturnCloud";
 
 const ConsoleMenuList = ({
   menuItems,
@@ -85,115 +86,125 @@ const ConsoleMenuList = ({
         },
       }}
     >
-      <List
-        sx={{
-          flex: 1,
-          paddingTop: 0,
+      <SaturnTenantMenuContainer
+        isOpen={isOpen}
+        groupState={{
+          openGroup,
+          setOpenGroup,
+          expandedGroup,
+          setExpandedGroup,
+        }}
+      >
+        <List
+          sx={{
+            flex: 1,
+            paddingTop: 0,
 
-          "&.mini": {
-            padding: 0,
-            display: "flex",
-            alignItems: "center",
-            flexFlow: "column",
+            "&.mini": {
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              flexFlow: "column",
 
-            "& .main-menu-item": {
-              marginBottom: "20px",
+              "& .main-menu-item": {
+                marginBottom: "20px",
+              },
             },
-          },
-        }}
-        className={`${stateClsName} group-wrapper main-list`}
-      >
-        <React.Fragment>
-          {(menuItems || []).map((menuGroup: any, index) => {
-            if (menuGroup) {
-              return (
-                <MenuItem
-                  stateClsName={stateClsName}
-                  page={menuGroup}
-                  key={`${menuGroup.id}-${index.toString()}`}
-                  id={menuGroup.id}
-                  selectedMenuGroup={openGroup}
-                  setSelectedMenuGroup={setOpenGroup}
-                  pathValue={pathname}
-                  onExpand={setExpandedGroup}
-                  expandedGroup={expandedGroup}
-                />
-              );
-            }
-            return null;
-          })}
-        </React.Fragment>
-      </List>
-      {/* List of Bottom anchored menus */}
-      <List
-        sx={{
-          paddingTop: 0,
-          "&.mini": {
-            padding: 0,
-            margin: "auto",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexFlow: "column",
-          },
-        }}
-        className={`${stateClsName} group-wrapper bottom-list`}
-      >
-        <Box sx={{ display: "flex", alignItems: "center" }}>
-          <ListItem
-            button
-            onClick={() => {
-              history.push("/saturn/userinfo");
-            }}
-            disableRipple
-            sx={{
-              ...menuItemContainerStyles,
-              ...menuItemMiniStyles,
-              marginBottom: "3px",
-            }}
-            className={`$ ${stateClsName} bottom-menu-item`}
-          >
-            <ListItemIcon
+          }}
+          className={`${stateClsName} group-wrapper main-list`}
+        >
+          <React.Fragment>
+            {(menuItems || []).map((menuGroup: any, index) => {
+              if (menuGroup) {
+                return (
+                  <MenuItem
+                    stateClsName={stateClsName}
+                    page={menuGroup}
+                    key={`${menuGroup.id}-${index.toString()}`}
+                    id={menuGroup.id}
+                    selectedMenuGroup={openGroup}
+                    setSelectedMenuGroup={setOpenGroup}
+                    pathValue={pathname}
+                    onExpand={setExpandedGroup}
+                    expandedGroup={expandedGroup}
+                  />
+                );
+              }
+              return null;
+            })}
+          </React.Fragment>
+        </List>
+        {/* List of Bottom anchored menus */}
+        <List
+          sx={{
+            paddingTop: 0,
+            "&.mini": {
+              padding: 0,
+              margin: "auto",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexFlow: "column",
+            },
+          }}
+          className={`${stateClsName} group-wrapper bottom-list`}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <ListItem
+              button
+              onClick={() => {
+                history.push("/saturn/userinfo");
+              }}
+              disableRipple
               sx={{
-                ...menuItemIconStyles,
+                ...menuItemContainerStyles,
+                ...menuItemMiniStyles,
+                marginBottom: "3px",
               }}
+              className={`$ ${stateClsName} bottom-menu-item`}
             >
-              <PersonIcon />
-            </ListItemIcon>
-            <ListItemText
-              primary="个人信息"
-              id={"userinfo"}
-              sx={{ ...menuItemTextStyles }}
-              className={stateClsName}
-            />
-          </ListItem>
-          <ListItem
-            button
-            onClick={onLogoutClick}
-            disableRipple
-            sx={{
-              ...menuItemContainerStyles,
-              ...menuItemMiniStyles,
-              marginBottom: "3px",
-            }}
-            className={`$ ${stateClsName} bottom-menu-item`}
-          >
-            <ListItemIcon
+              <ListItemIcon
+                sx={{
+                  ...menuItemIconStyles,
+                }}
+              >
+                <PersonIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="个人信息"
+                id={"userinfo"}
+                sx={{ ...menuItemTextStyles }}
+                className={stateClsName}
+              />
+            </ListItem>
+            <ListItem
+              button
+              onClick={onLogoutClick}
+              disableRipple
               sx={{
-                ...menuItemIconStyles,
+                ...menuItemContainerStyles,
+                ...menuItemMiniStyles,
+                marginBottom: "3px",
               }}
+              className={`$ ${stateClsName} bottom-menu-item`}
             >
-              <LogoutIcon />
-            </ListItemIcon>
-            <ListItemText
-              primary="退出"
-              id={"logout"}
-              sx={{ ...menuItemTextStyles }}
-              className={stateClsName}
-            />
-          </ListItem>
-        </Box>
-      </List>
+              <ListItemIcon
+                sx={{
+                  ...menuItemIconStyles,
+                }}
+              >
+                <LogoutIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="退出"
+                id={"logout"}
+                sx={{ ...menuItemTextStyles }}
+                className={stateClsName}
+              />
+            </ListItem>
+          </Box>
+        </List>
+      </SaturnTenantMenuContainer>
     </Box>
   );
 };

src/screens/Console/Menu/Menu.tsx

@@ -34,7 +34,6 @@ import MenuToggle from "./MenuToggle";
 import ConsoleMenuList from "./ConsoleMenuList";
 import { validRoutes } from "../valid-routes";
 import { toLoginPage } from "../../../utils/toLogin";
-import { useSaturnConsoleMenu } from "../../../saturnCloud";
 
 const drawerWidth = 245;
 
@@ -102,8 +101,6 @@ const Menu = ({
   setMenuOpen,
   features,
 }: IMenuProps) => {
-  const saturnMenu = useSaturnConsoleMenu();
-
   const logout = () => {
     const deleteSession = () => {
       clearSession();
@@ -123,7 +120,6 @@ const Menu = ({
       });
   };
   const allowedMenuItems = validRoutes(features, operatorMode);
-  allowedMenuItems.push(...saturnMenu);
 
   return (
     <Drawer