prs_frontend/src/AppLayOut.jsx

import React, { useState, useEffect } from 'react'
import { Layout, Menu, Image  } from 'antd'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import NavHeader from './components/NavHeader'
import HeadLeftTtile from './components/HeadLeftTtile'
import PubSub from 'pubsub-js'
import memoryUtils from './util/memoryUtils'
import storageUtils from './util/storageUtils'
import './App.css'
import {
	AppstoreOutlined,
	UsergroupAddOutlined,
	CalendarOutlined,
	RestOutlined,
	ShoppingOutlined,
	PieChartOutlined,
	SettingOutlined,
	FilterOutlined,
} from '@ant-design/icons'
// import GlobalRouter from './routes/GlobalRouter'
const { Header, Sider, Content } = Layout
// 读取localStorage保存的userInfo，保存到内存里面

function AppLayOut() {
	const location = useLocation()
	const navigate = useNavigate()
	const [collapsed, setCollapsed] = useState(true)
	const [headnav, setHeadnav] = useState('')
	const [defaultSelectedKeys, setdefaultSelectedKeys] = useState('/')

	//添加用户登录信息
	var userInfo = storageUtils.getUser()
	memoryUtils.userInfo = userInfo

	// 单击侧边栏跳转路由
	const click = (e) => {
		navigate(e.key)
	}

	const select = (e) => {
		const { title } = e.item.props
		PubSub.publish('headtitle', { headtitle: title })
	}

	// 鼠标移入
	const handlMouseEnter = () => {
		setCollapsed(false)
	}

	// 鼠标移出
	const handlMouseLeave = () => {
        console.log(11111)
		setCollapsed(true)
	}

	useEffect(() => {
		// return ()=>{
		const pathname = location.pathname
		const pathurl = pathname.split('/')[2]
		setHeadnav(pathurl)
		setdefaultSelectedKeys(pathurl ? '/admin/' + pathurl : pathname)
		// }
		// const routes = matchRoutes(GlobalRouter, location.pathname);
	}, [location.pathname])

	const hr_items = [
		{
			key: '/',
			icon: <AppstoreOutlined />,
			label: '总览',
			title: '总览',
		},
		{
			key: '/admin/candidate',
			icon: <UsergroupAddOutlined />,
			label: '候选人管理',
			title: '候选人管理',
		},
		{
			key: '/admin/interview',
			icon: <CalendarOutlined />,
			label: '面试安排',
			title: '面试安排',
		},
		{
			key: '/admin/position',
			icon: <ShoppingOutlined />,
			label: '职位管理',
			title: '职位管理',
		},
		{
			key: '/admin/talentpool',
			icon: <RestOutlined />,
			label: '人才库',
			title: '人才库',
		},
		{
			key: '/admin/reportforms',
			icon: <PieChartOutlined />,
			label: '报表中心',
			title: '报表中心',
		},
		{
			key: '/admin/setup',
			icon: <SettingOutlined />,
			label: '设置',
			title: '设置',
		},
	]

	const manager_items = [
		{
			key: '/',
			icon: <AppstoreOutlined />,
			label: '总览',
			title: '总览',
		},
        {
            key: '/admin/Interview_manager',
            icon: <CalendarOutlined />,
            label: '经理-面试安排',
            title: '经理-面试安排',
        },
		{
			key: '/admin/resumescreen',
			icon: <FilterOutlined />,
			label: '简历筛选',
			title: '简历筛选',
		},
		{
			key: '/admin/setup',
			icon: <SettingOutlined />,
			label: '设置',
			title: '设置',
		},
	]

    const root_items = [
		{
			key: '/',
			icon: <AppstoreOutlined />,
			label: '总览',
			title: '总览',
		},
        {
			key: '/admin/resumescreen',
			icon: <FilterOutlined />,
			label: '简历筛选',
			title: '简历筛选',
		},
		{
			key: '/admin/Interview_manager',
			icon: <CalendarOutlined />,
			label: '经理-面试安排',
			title: '经理-面试安排',
		},
		{
			key: '/admin/candidate',
			icon: <UsergroupAddOutlined />,
			label: '候选人管理',
			title: '候选人管理',
		},
		{
			key: '/admin/interview',
			icon: <CalendarOutlined />,
			label: '面试安排',
			title: '面试安排',
		},
		{
			key: '/admin/position',
			icon: <ShoppingOutlined />,
			label: '职位管理',
			title: '职位管理',
		},
		{
			key: '/admin/talentpool',
			icon: <RestOutlined />,
			label: '人才库',
			title: '人才库',
		},
		{
			key: '/admin/reportforms',
			icon: <PieChartOutlined />,
			label: '报表中心',
			title: '报表中心',
		},
		{
			key: '/admin/setup',
			icon: <SettingOutlined />,
			label: '设置',
			title: '设置',
		},
	]

	return (
		<Layout>
			<Sider
				trigger={null}
				collapsible
				collapsed={collapsed}
				onMouseLeave={handlMouseLeave}
				onMouseEnter={handlMouseEnter}
			>
				{/* <div className="logo" /> */}
				<div className="logo_box">
					<div className="logo">
						<img src='https://legu-cdn-source.obs.cn-east-2.myhuaweicloud.com/hrms/216.png'/>
					</div>
					<div className={collapsed ? 'logo_txt' : 'logo_txt2'}>
						<p className="introduction">Legu</p>
						<p className="role">{userInfo.rank === 1? 'HR端':'经理端'}</p>
					</div>
				</div>
                
				<Menu
					theme="dark"
					mode="inline"
					selectedKeys={defaultSelectedKeys}
					defaultSelectedKeys={defaultSelectedKeys}
					items={userInfo.rank === 1 ? hr_items : userInfo.rank === 2? manager_items: root_items}
					onClick={click}
					onSelect={select}
				/>
			</Sider>
			<Layout className="site-layout">
				<Header
					className="site-layout-background"
					style={{
						padding: 0,
					}}
				>
					<HeadLeftTtile />
					<NavHeader userInfo={userInfo} />
				</Header>
				<Content className="appcontent">
					<Outlet />
				</Content>
			</Layout>
		</Layout>
	)
}

export default AppLayOut