2025-02-25 22:04:17 +08:00
|
|
|
import { Menu } from "antd";
|
2025-03-12 08:23:33 +08:00
|
|
|
import { useNavigate } from "react-router-dom";
|
2025-02-06 16:32:31 +08:00
|
|
|
|
2025-03-12 08:23:33 +08:00
|
|
|
export default function NavigationMenu() {
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
// 导航菜单项配置
|
|
|
|
|
const menuItems = [
|
|
|
|
|
{ key: 'home', label: '首页', path: '/' },
|
|
|
|
|
{ key: 'staff', label: '人员总览', path: '/staff' },
|
|
|
|
|
{ key: 'day', label: '日统计', path: '/day' },
|
|
|
|
|
{ key: 'month', label: '月统计', path: '/month' },
|
|
|
|
|
{ key: 'year', label: '年度统计', path: '/year' }
|
|
|
|
|
];
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{/* 导航菜单 */}
|
|
|
|
|
<Menu
|
|
|
|
|
theme="dark"
|
|
|
|
|
mode="inline"
|
|
|
|
|
className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
|
|
|
|
|
defaultSelectedKeys={['home']}
|
|
|
|
|
>
|
|
|
|
|
{menuItems.map((item) => (
|
|
|
|
|
<Menu.Item
|
|
|
|
|
key={item.key}
|
|
|
|
|
className="!h-14 !flex !items-center !text-gray-300 hover:!text-white group !rounded-lg mx-4"
|
|
|
|
|
onClick={() => navigate(item.path)}
|
|
|
|
|
>
|
|
|
|
|
<div className="flex items-center justify-center w-full px-4 transition-all duration-300 h-full rounded-lg">
|
|
|
|
|
<span className="text-xl font-medium">{item.label}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</Menu.Item>
|
|
|
|
|
))}
|
|
|
|
|
</Menu>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
