Skip to content

M
minio-scs
提交 72538401 作者: yueyang.lv
操作

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

菜单注入方式修改为使用 HOC 模式，定制更加灵活
上级 84bbaf41
正在显示 包含 163 行增加 和 134 行删除
config-mf.js
...@@ -81,12 +81,12 @@ module.exports = function (config, env) { ...@@ -81,12 +81,12 @@ module.exports = function (config, env) {
// 'redux', // 'redux',
// 'redux-thunk', // 'redux-thunk',
"superagent", "superagent",
"react-router-dom", // "react-router-dom",
// 'use-debounce', // 'use-debounce',
// 'websocket', // 'websocket',
"chart.js", "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 { NavLink } from "react-router-dom";
import LoadingComponent from "../common/LoadingComponent"; import LoadingComponent from "../common/LoadingComponent";
import history from "../history"; import history from "../history";
import MenuItem from "../screens/Console/Menu/MenuItem";
// import RemoteComponent from "./RemoteComponent"; // import RemoteComponent from "./RemoteComponent";
// import loadMenu from "saturn_tenant/menu"; // import loadMenu from "saturn_tenant/menu";
...@@ -12,6 +13,7 @@ const RemoteSaturnTenant = lazy(() => import("saturn_tenant/App")); ...@@ -12,6 +13,7 @@ const RemoteSaturnTenant = lazy(() => import("saturn_tenant/App"));
const RemoteSaturnTenantFullscreen = lazy( const RemoteSaturnTenantFullscreen = lazy(
() => import("saturn_tenant/AppFullscreen") () => import("saturn_tenant/AppFullscreen")
); );
const RemoteMenuContainer = lazy(() => import("saturn_tenant/MenuContainer"));
// const loadMenu = () => import("saturn_tenant/menu"); // const loadMenu = () => import("saturn_tenant/menu");
// console.log("loadMenu", loadMenu); // console.log("loadMenu", loadMenu);
...@@ -27,41 +29,61 @@ const RemoteSaturnTenantFullscreen = lazy( ...@@ -27,41 +29,61 @@ const RemoteSaturnTenantFullscreen = lazy(
/** 在 Layout 下展示的内容 */ /** 在 Layout 下展示的内容 */
export function SaturnTenant() { export function SaturnTenant() {
return ( return (
<div> <Suspense fallback={<LoadingComponent />}>
<Suspense fallback={<LoadingComponent />}> <RemoteSaturnTenant history={history} />
<RemoteSaturnTenant history={history} /> </Suspense>
</Suspense>
</div>
); );
} }
/** 全屏展示的内容 */ /** 全屏展示的内容 */
export function SaturnTenantFullscreen() { export function SaturnTenantFullscreen() {
return ( return (
<div> <Suspense fallback={<LoadingComponent />}>
<Suspense fallback={<LoadingComponent />}> <RemoteSaturnTenantFullscreen history={history} />
<RemoteSaturnTenantFullscreen history={history} /> </Suspense>
</Suspense>
</div>
); );
} }
/** 加载侧栏菜单 */ /** 全屏展示的内容 */
export function useSaturnConsoleMenu() { export function SaturnTenantMenuContainer({
const [menu, setMenu] = useState([]); 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") // export function useSaturnConsoleMenu() {
.then((res) => { // const [menu, setMenu] = useState([]);
const createMenu = res.default;
createMenu(NavLink).then((menu) => {
setMenu(menu);
});
})
.catch((e) => {
console.error(e);
});
}, []);
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 { ...@@ -31,6 +31,7 @@ import {
import MenuItem from "./MenuItem"; import MenuItem from "./MenuItem";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import history from "../../../history"; import history from "../../../history";
import { SaturnTenantMenuContainer } from "../../../saturnCloud";
const ConsoleMenuList = ({ const ConsoleMenuList = ({
menuItems, menuItems,
...@@ -85,115 +86,125 @@ const ConsoleMenuList = ({ ...@@ -85,115 +86,125 @@ const ConsoleMenuList = ({
}, },
}} }}
> >
<List <SaturnTenantMenuContainer
sx={{ isOpen={isOpen}
flex: 1, groupState={{
paddingTop: 0, openGroup,
setOpenGroup,
expandedGroup,
setExpandedGroup,
}}
>
<List
sx={{
flex: 1,
paddingTop: 0,
"&.mini": { "&.mini": {
padding: 0, padding: 0,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexFlow: "column", flexFlow: "column",
"& .main-menu-item": { "& .main-menu-item": {
marginBottom: "20px", marginBottom: "20px",
},
}, },
}, }}
}} className={`${stateClsName} group-wrapper main-list`}
className={`${stateClsName} group-wrapper main-list`} >
> <React.Fragment>
<React.Fragment> {(menuItems || []).map((menuGroup: any, index) => {
{(menuItems || []).map((menuGroup: any, index) => { if (menuGroup) {
if (menuGroup) { return (
return ( <MenuItem
<MenuItem stateClsName={stateClsName}
stateClsName={stateClsName} page={menuGroup}
page={menuGroup} key={`${menuGroup.id}-${index.toString()}`}
key={`${menuGroup.id}-${index.toString()}`} id={menuGroup.id}
id={menuGroup.id} selectedMenuGroup={openGroup}
selectedMenuGroup={openGroup} setSelectedMenuGroup={setOpenGroup}
setSelectedMenuGroup={setOpenGroup} pathValue={pathname}
pathValue={pathname} onExpand={setExpandedGroup}
onExpand={setExpandedGroup} expandedGroup={expandedGroup}
expandedGroup={expandedGroup} />
/> );
); }
} return null;
return null; })}
})} </React.Fragment>
</React.Fragment> </List>
</List> {/* List of Bottom anchored menus */}
{/* List of Bottom anchored menus */} <List
<List sx={{
sx={{ paddingTop: 0,
paddingTop: 0, "&.mini": {
"&.mini": { padding: 0,
padding: 0, margin: "auto",
margin: "auto", display: "flex",
display: "flex", alignItems: "center",
alignItems: "center", justifyContent: "center",
justifyContent: "center", flexFlow: "column",
flexFlow: "column", },
}, }}
}} className={`${stateClsName} group-wrapper bottom-list`}
className={`${stateClsName} group-wrapper bottom-list`} >
> <Box sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <ListItem
<ListItem button
button onClick={() => {
onClick={() => { history.push("/saturn/userinfo");
history.push("/saturn/userinfo"); }}
}} disableRipple
disableRipple
sx={{
...menuItemContainerStyles,
...menuItemMiniStyles,
marginBottom: "3px",
}}
className={`$ ${stateClsName} bottom-menu-item`}
>
<ListItemIcon
sx={{ sx={{
...menuItemIconStyles, ...menuItemContainerStyles,
...menuItemMiniStyles,
marginBottom: "3px",
}} }}
className={`$ ${stateClsName} bottom-menu-item`}
> >
<PersonIcon /> <ListItemIcon
</ListItemIcon> sx={{
<ListItemText ...menuItemIconStyles,
primary="个人信息" }}
id={"userinfo"} >
sx={{ ...menuItemTextStyles }} <PersonIcon />
className={stateClsName} </ListItemIcon>
/> <ListItemText
</ListItem> primary="个人信息"
<ListItem id={"userinfo"}
button sx={{ ...menuItemTextStyles }}
onClick={onLogoutClick} className={stateClsName}
disableRipple />
sx={{ </ListItem>
...menuItemContainerStyles, <ListItem
...menuItemMiniStyles, button
marginBottom: "3px", onClick={onLogoutClick}
}} disableRipple
className={`$ ${stateClsName} bottom-menu-item`}
>
<ListItemIcon
sx={{ sx={{
...menuItemIconStyles, ...menuItemContainerStyles,
...menuItemMiniStyles,
marginBottom: "3px",
}} }}
className={`$ ${stateClsName} bottom-menu-item`}
> >
<LogoutIcon /> <ListItemIcon
</ListItemIcon> sx={{
<ListItemText ...menuItemIconStyles,
primary="退出" }}
id={"logout"} >
sx={{ ...menuItemTextStyles }} <LogoutIcon />
className={stateClsName} </ListItemIcon>
/> <ListItemText
</ListItem> primary="退出"
</Box> id={"logout"}
</List> sx={{ ...menuItemTextStyles }}
className={stateClsName}
/>
</ListItem>
</Box>
</List>
</SaturnTenantMenuContainer>
</Box> </Box>
); );
}; };
......
src/screens/Console/Menu/Menu.tsx
...@@ -34,7 +34,6 @@ import MenuToggle from "./MenuToggle"; ...@@ -34,7 +34,6 @@ import MenuToggle from "./MenuToggle";
import ConsoleMenuList from "./ConsoleMenuList"; import ConsoleMenuList from "./ConsoleMenuList";
import { validRoutes } from "../valid-routes"; import { validRoutes } from "../valid-routes";
import { toLoginPage } from "../../../utils/toLogin"; import { toLoginPage } from "../../../utils/toLogin";
import { useSaturnConsoleMenu } from "../../../saturnCloud";
const drawerWidth = 245; const drawerWidth = 245;
...@@ -102,8 +101,6 @@ const Menu = ({ ...@@ -102,8 +101,6 @@ const Menu = ({
setMenuOpen, setMenuOpen,
features, features,
}: IMenuProps) => { }: IMenuProps) => {
const saturnMenu = useSaturnConsoleMenu();
const logout = () => { const logout = () => {
const deleteSession = () => { const deleteSession = () => {
clearSession(); clearSession();
...@@ -123,7 +120,6 @@ const Menu = ({ ...@@ -123,7 +120,6 @@ const Menu = ({
}); });
}; };
const allowedMenuItems = validRoutes(features, operatorMode); const allowedMenuItems = validRoutes(features, operatorMode);
allowedMenuItems.push(...saturnMenu);
return ( return (
<Drawer <Drawer
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论