feat: create QuickActionsGrid component with 6 action buttons
Add responsive grid layout for 6 quick action buttons with breakpoints for desktop (6), tablet (3x2), and mobile (2x3). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a59870283d
commit
e627fafdc6
99
src/pages/components/QuickActionsGrid.tsx
Normal file
99
src/pages/components/QuickActionsGrid.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
BuildOutlined,
|
||||
ImportOutlined,
|
||||
TeamOutlined,
|
||||
BuildColumnsOutlined,
|
||||
DollarOutlined,
|
||||
AuditOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import QuickActionCard from './QuickActionCard';
|
||||
|
||||
const QuickActionsGrid: React.FC = () => {
|
||||
const quickActions = [
|
||||
{
|
||||
icon: <BuildOutlined />,
|
||||
title: '添加机构',
|
||||
description: '快速创建新的机构',
|
||||
themeColor: '#1890ff',
|
||||
path: '/company/list',
|
||||
},
|
||||
{
|
||||
icon: <ImportOutlined />,
|
||||
title: '导入项目',
|
||||
description: '批量导入项目数据',
|
||||
themeColor: '#52c41a',
|
||||
path: '/asset/list',
|
||||
},
|
||||
{
|
||||
icon: <TeamOutlined />,
|
||||
title: '导入员工',
|
||||
description: '批量导入员工数据',
|
||||
themeColor: '#fa8c16',
|
||||
path: '/company/employees',
|
||||
},
|
||||
{
|
||||
icon: <BuildColumnsOutlined />,
|
||||
title: '导入楼栋',
|
||||
description: '批量导入楼栋数据',
|
||||
themeColor: '#722ed1',
|
||||
path: '/asset/houses',
|
||||
},
|
||||
{
|
||||
icon: <DollarOutlined />,
|
||||
title: '创建收费标准',
|
||||
description: '创建费用收费标准',
|
||||
themeColor: '#13c2c2',
|
||||
path: '/charge/standard',
|
||||
},
|
||||
{
|
||||
icon: <AuditOutlined />,
|
||||
title: '登记审核',
|
||||
description: '审核登记申请',
|
||||
themeColor: '#f5222d',
|
||||
path: '/examine/house_registers_audit',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(6, 1fr)',
|
||||
gap: '16px',
|
||||
marginBottom: '24px',
|
||||
}}
|
||||
className="quick-actions-grid"
|
||||
>
|
||||
{quickActions.map((action) => (
|
||||
<QuickActionCard
|
||||
key={action.path}
|
||||
icon={action.icon}
|
||||
title={action.title}
|
||||
description={action.description}
|
||||
themeColor={action.themeColor}
|
||||
to={action.path}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<style>{`
|
||||
@media (max-width: 1200px) {
|
||||
.quick-actions-grid {
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
gap: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.quick-actions-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickActionsGrid;
|
||||
Loading…
x
Reference in New Issue
Block a user