From e627fafdc6d3dfc09b1f6c3c15950ebfb7df78c8 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 1 Apr 2026 10:45:49 +0800
Subject: [PATCH] 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>
---
 src/pages/components/QuickActionsGrid.tsx | 99 +++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/pages/components/QuickActionsGrid.tsx

diff --git a/src/pages/components/QuickActionsGrid.tsx b/src/pages/components/QuickActionsGrid.tsx
new file mode 100644
index 0000000..5acf038
--- /dev/null
+++ b/src/pages/components/QuickActionsGrid.tsx
@@ -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;