ERPTurbo_Admin/packages/app-operation/src/components/LeftMenu/index.tsx

import { MenuDataItem } from '@ant-design/pro-components';
import { getMatchMenu } from '@umijs/route-utils';
import { Layout, Menu } from 'antd';
import { MenuItemType } from 'antd/es/menu/interface';
import React, { useEffect, useState } from 'react';
import useButtonStyle from './style.style';

interface ILeftMenuProps {
	menuData: MenuDataItem[];
	pathname: string;
	onClick: (item: MenuItemType) => void;
}

// 递归 menuData tree 树状结构 增加 label 参数
const notNullArray = (value: any[]) => Array.isArray(value) && value.length > 0;

/**
 * 删除 hideInMenu 和 item.name 不存在的
 */
const defaultFilterMenuData = (menuData: MenuDataItem[] = []): MenuItemType[] =>
	menuData
		.filter(
			(item) =>
				item &&
				(item.name || notNullArray(item.children as MenuItemType[])) &&
				!item.hideInMenu,
		)
		.map((item) => {
			const newItem = { ...item };
			const routerChildren = newItem.children || [];
			delete newItem.children;

			if (
				notNullArray(routerChildren) &&
				!newItem.hideInMenu &&
				routerChildren.some((child) => child && !!child.name)
			) {
				const newChildren = defaultFilterMenuData(routerChildren);
				if (newChildren.length)
					return {
						key: item.key,
						label: item.name,
						name: item.name,
						path: item.path,
						children: newChildren,
						// type: 'group',
					} as unknown as MenuItemType;
			}
			return {
				key: newItem.key,
				label: newItem.name,
				name: item.name,
				path: newItem.path,
			} as MenuItemType;
		})
		.filter((item) => item);

const LeftMenu: React.FC<ILeftMenuProps> = (props) => {
	const { styles } = useButtonStyle();
	const { pathname, menuData, onClick } = props;

	// 根据提供的 menuData 提供的 tree 结构，获取第一层等级菜单
	// moduleMenu
	const moduleMenu = menuData.map((item: MenuDataItem) => {
		return {
			key: item.key,
			label: item.name,
			path: item.path,
		} as MenuItemType;
	});

	const [openKeys, setOpenKeys] = useState<string[]>([]);
	const [activeMenuKey, setActiveMenuKey] = useState<string[]>();
	const [subMenuList, setSubMenuList] = useState<MenuItemType[]>([]);

	useEffect(() => {
		// 通过循环 moduleMenu 判断 history.location.pathname 是否包含 key
		const activeMenu = getMatchMenu(pathname, menuData, true);
		const activeMenuKey = activeMenu.map(
			(item: MenuDataItem) => item.key as string,
		);

		setSubMenuList(
			activeMenu[0]?.children
				? defaultFilterMenuData(activeMenu[0]?.children)
				: [],
		);
		setActiveMenuKey(activeMenuKey);
		setOpenKeys([...openKeys, ...activeMenuKey]);
	}, [pathname, menuData]);

	if (!menuData) {
		return null;
	}

	return (
		<>
			<div
				className={styles.box}
				style={{
					// @ts-ignore
					'--box-with': subMenuList.length > 0 ? '248px' : '100px',
				}}
			></div>
			<Layout.Sider
				className={styles.sider}
				style={{ position: 'fixed' }}
				width={'auto'}
				theme={'light'}
			>
				<Menu
					items={moduleMenu}
					className={styles.moduleMenu}
					selectedKeys={activeMenuKey}
					theme={'dark'}
					onClick={(item) => {
						onClick(item as any);
					}}
				/>
				{subMenuList.length > 0 && (
					<Menu
						items={subMenuList}
						className={styles.subMenu}
						selectedKeys={activeMenuKey}
						openKeys={openKeys}
						onOpenChange={(keys) => setOpenKeys(keys)}
						mode="inline"
						inlineIndent={12}
						onClick={(item) => {
							onClick(item as any);
						}}
					/>
				)}
			</Layout.Sider>
		</>
	);
};

export default LeftMenu;