提交 42004930 作者: yueyang.lv

fix(menu|redux|runApp): 菜单容器优化,共享 redux,新增 runApp 远程模块

菜单容器个人信息交由租户端控制,redux 模块共享用于子模块获取权限相关, ReactDom 挂载回调后 import RunApp 模块
上级 72538401
......@@ -31,6 +31,9 @@ if (!remoteOrigin) {
}
// 模块联邦
module.exports = function (config, env) {
if (process.env.REACT_APP_SATURN_ENV === "private") {
return config;
}
// config.output.crossOriginLoading = "use-credentials";
config.output.crossOriginLoading = "anonymous";
console.log(`土星云业务远程地址为:${remoteOrigin}`);
......@@ -73,20 +76,23 @@ module.exports = function (config, env) {
// 'react-grid-layout',
// 'react-hot-loader',
// 'react-moment',
// 'react-redux',
// 'react-virtualized',
// 'react-window',
// 'react-window-infinite-loader',
// 'recharts',
// 'redux',
// 'redux-thunk',
"superagent",
// "react-router-dom",
// 'use-debounce',
// 'websocket',
"chart.js",
]),
...createShared(["react", "react-dom", "react-router-dom"]),
...createShared([
"react",
"react-dom",
"react-router-dom",
"react-redux",
"redux",
"redux-thunk",
]),
},
})
);
......
......@@ -27,6 +27,7 @@ import {
} from "@mui/material/styles";
import { ThemeProvider } from "@mui/styles";
import withStyles from "@mui/styles/withStyles";
import { runInject } from "./saturnCloud";
import "react-virtualized/styles.css";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
......@@ -117,7 +118,8 @@ ReactDOM.render(
</ThemeProvider>
</StyledEngineProvider>
</Provider>,
document.getElementById("root")
document.getElementById("root"),
runInject
);
// If you want your app to work offline and load faster, you can change
......
import React, { Suspense, lazy, useState, useEffect } from "react";
import React, { Suspense, lazy } 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";
// const URL = "http://localhost:9000/remoteEntry.js";
// const SCOPE = "saturn_tenant";
// 对 lazy 包装一层,在私有部署环境中没有模块联邦,直接返回 null
const _lazy: typeof lazy = (factory) => {
if (process.env.REACT_APP_SATURN_ENV === "private") {
return null;
}
return lazy(factory);
};
const RemoteSaturnTenant = lazy(() => import("saturn_tenant/App"));
const RemoteSaturnTenantFullscreen = lazy(
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);
// export function SaturnTenant() {
// return <RemoteComponent url={URL} scope={SCOPE} module="./App" />;
// }
// export function SaturnTenantFullscreen() {
// return <RemoteComponent url={URL} scope={SCOPE} module="./AppFullscreen" />;
// }
const RemoteMenuContainer = _lazy(() => import("saturn_tenant/MenuContainer"));
/** 在 Layout 下展示的内容 */
export function SaturnTenant() {
......@@ -59,6 +51,10 @@ export function SaturnTenantMenuContainer({
setExpandedGroup: React.Dispatch<React.SetStateAction<string>>;
};
}) {
// 这里比较特殊,因为是 hack 不能直接返回 null 了
if (process.env.REACT_APP_SATURN_ENV === "private") {
return <>{children}</>;
}
return (
<Suspense fallback={<LoadingComponent />}>
<RemoteMenuContainer context={{ MenuItem, NavLink, isOpen, groupState }}>
......@@ -68,6 +64,12 @@ export function SaturnTenantMenuContainer({
);
}
export function runInject() {
if (process.env.REACT_APP_SATURN_ENV !== "private") {
import("saturn_tenant/run");
}
}
// /** 加载一个函数方法 */
// export function useSaturnConsoleMenu() {
// const [menu, setMenu] = useState([]);
......
......@@ -18,7 +18,6 @@ import React, { useEffect, useState } from "react";
import { Box } from "@mui/material";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import PersonIcon from "@mui/icons-material/Person";
import LogoutIcon from "../../../icons/LogoutIcon";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
......@@ -30,7 +29,6 @@ import {
} from "./MenuStyleUtils";
import MenuItem from "./MenuItem";
import { useLocation } from "react-router-dom";
import history from "../../../history";
import { SaturnTenantMenuContainer } from "../../../saturnCloud";
const ConsoleMenuList = ({
......@@ -152,33 +150,6 @@ const ConsoleMenuList = ({
<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
sx={{
...menuItemIconStyles,
}}
>
<PersonIcon />
</ListItemIcon>
<ListItemText
primary="个人信息"
id={"userinfo"}
sx={{ ...menuItemTextStyles }}
className={stateClsName}
/>
</ListItem>
<ListItem
button
onClick={onLogoutClick}
disableRipple
sx={{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论