feat: create QuickActionIcons header component

Add quick action icons for header navigation with hover effects.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-04-01 09:46:29 +08:00
parent 41043dafa4
commit 95114f6383

View File

@ -0,0 +1,62 @@
import React from 'react';
import { Space, Tooltip } from 'antd';
import {
BuildingOutlined,
ImportOutlined,
TeamOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'umi';
const QuickActionIcons: React.FC = () => {
const navigate = useNavigate();
const quickActions = [
{
icon: <BuildingOutlined style={{ fontSize: 20 }} />,
title: '添加机构',
path: '/company/list',
},
{
icon: <ImportOutlined style={{ fontSize: 20 }} />,
title: '导入项目',
path: '/asset/list',
},
{
icon: <TeamOutlined style={{ fontSize: 20 }} />,
title: '导入员工',
path: '/company/employees',
},
];
return (
<Space size={16}>
{quickActions.map((action) => (
<Tooltip key={action.path} title={action.title}>
<div
onClick={() => navigate(action.path)}
style={{
fontSize: 20,
color: '#262626',
cursor: 'pointer',
padding: '4px 8px',
borderRadius: 4,
transition: 'all 0.3s ease',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = '#1890ff';
e.currentTarget.style.backgroundColor = 'rgba(24, 144, 255, 0.1)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '#262626';
e.currentTarget.style.backgroundColor = 'transparent';
}}
>
{action.icon}
</div>
</Tooltip>
))}
</Space>
);
};
export default QuickActionIcons;