pay-admin/src/pages/components/QuickActionsGrid.tsx

import React from 'react';
import {
  BuildOutlined,
  ImportOutlined,
  TeamOutlined,
  ApartmentOutlined,
  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: <ApartmentOutlined />,
      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;