100 lines
2.3 KiB
TypeScript
100 lines
2.3 KiB
TypeScript
|
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;
|