/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-14 14:22:07
|
* @LastEditTime: 2022-02-17 15:12:00
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 导航菜单
|
*/
|
import React from 'react';
|
import { useLocation, Outlet, Link } from 'react-router-dom';
|
import { Menu, Badge, Avatar, Dropdown } from 'antd';
|
import {
|
TeamOutlined,
|
ShoppingCartOutlined,
|
SafetyCertificateOutlined,
|
DeploymentUnitOutlined,
|
QuestionCircleOutlined,
|
BellOutlined,
|
UserOutlined,
|
LogoutOutlined,
|
} from '@ant-design/icons';
|
import './index.less';
|
|
// 头部导航菜单
|
const headerMenu = [
|
{
|
key: 'operation',
|
title: '运营中心',
|
},
|
];
|
|
const userMenu = (
|
<Menu>
|
<Menu.Item key="loginOut">
|
<Link to="/login">
|
<LogoutOutlined style={{ marginRight: '8px' }} />
|
退出登录
|
</Link>
|
</Menu.Item>
|
</Menu>
|
);
|
|
function urlString(str) {
|
let arr = str.split('/');
|
return arr[arr.length - 1];
|
}
|
|
const Navigation = () => {
|
const location = useLocation() || {};
|
|
let menuKey = urlString(location.pathname);
|
|
return (
|
<div className="layout">
|
<div className="layout-header">
|
<div className="layout-header-logo">logo</div>
|
<div className="layout-header-menu">
|
{headerMenu.map((x, t) => {
|
return (
|
<div className={`layout-header-menu-item ${location.pathname?.indexOf(x.key) != -1 ? 'layout-header-menu-active' : ''}`} key={x.key}>
|
{x.title}
|
</div>
|
);
|
})}
|
</div>
|
<div className="layout-header-user">
|
<div className="layout-header-user-item">
|
<QuestionCircleOutlined />
|
</div>
|
<div className="layout-header-user-item">
|
<Badge>
|
<BellOutlined />
|
</Badge>
|
</div>
|
<Dropdown overlay={userMenu}>
|
<div className="layout-header-user-avatar">
|
<Avatar style={{ backgroundColor: '#1089ff' }} icon={<UserOutlined />} />
|
<div>
|
<div className="layout-header-user-name">xxxx</div>
|
<div className="layout-header-user-unit">某某某单位</div>
|
</div>
|
</div>
|
</Dropdown>
|
</div>
|
</div>
|
<div className="layout-main">
|
<nav className="layout-nva">
|
<Menu style={{ width: '200px' }} mode="inline" selectedKeys={[menuKey]}>
|
<Menu.Item key="customer" icon={<TeamOutlined />}>
|
客户管理
|
</Menu.Item>
|
<Menu.Item key="edition" icon={<ShoppingCartOutlined />}>
|
版本管理
|
</Menu.Item>
|
<Menu.Item key="power" icon={<SafetyCertificateOutlined />}>
|
功能管理
|
</Menu.Item>
|
<Menu.Item key="equipment" icon={<DeploymentUnitOutlined />}>
|
设备管理
|
</Menu.Item>
|
</Menu>
|
</nav>
|
<main className="layout-child">
|
<Outlet />
|
</main>
|
</div>
|
</div>
|
);
|
};
|
|
export default Navigation;
|
