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>
   );
 }
 
 /** 全屏展示的内容 */
 export function SaturnTenantFullscreen() {
   return (
-    <div>
     <Suspense fallback={<LoadingComponent />}>
       <RemoteSaturnTenantFullscreen history={history} />
     </Suspense>
-    </div>
   );
 }
 
-/** 加载侧栏菜单 */
-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,6 +86,15 @@ const ConsoleMenuList = ({
         },
       }}
     >
+      <SaturnTenantMenuContainer
+        isOpen={isOpen}
+        groupState={{
+          openGroup,
+          setOpenGroup,
+          expandedGroup,
+          setExpandedGroup,
+        }}
+      >
         <List
           sx={{
             flex: 1,
@@ -194,6 +204,7 @@ const ConsoleMenuList = ({
             </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