From 41043dafa42714b0ac56361918821607a7d49715 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 1 Apr 2026 09:45:34 +0800
Subject: [PATCH] feat: create QuickActionCard component

Add reusable card component for quick action shortcuts with hover effects and navigation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/components/QuickActionCard.tsx | 83 ++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/pages/components/QuickActionCard.tsx

diff --git a/src/pages/components/QuickActionCard.tsx b/src/pages/components/QuickActionCard.tsx
new file mode 100644
index 0000000..593c57b
--- /dev/null
+++ b/src/pages/components/QuickActionCard.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Card, Tooltip } from 'antd';
+import { useNavigate } from 'umi';
+
+interface QuickActionCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  themeColor: string;
+  to: string;
+}
+
+const QuickActionCard: React.FC<QuickActionCardProps> = ({
+  icon,
+  title,
+  description,
+  themeColor,
+  to,
+}) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(to);
+  };
+
+  return (
+    <Tooltip title={title}>
+      <Card
+        hoverable
+        onClick={handleClick}
+        style={{
+          width: '100%',
+          height: 160,
+          borderRadius: 8,
+          transition: 'all 0.3s ease',
+          cursor: 'pointer',
+          border: 'none',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        }}
+        styles={{
+          body: {
+            padding: 24,
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 12,
+          }
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = 'translateY(-4px)';
+          e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = 'translateY(0)';
+          e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+        }}
+      >
+        <div style={{ fontSize: 48, color: themeColor }}>
+          {icon}
+        </div>
+        <div style={{
+          fontSize: 18,
+          fontWeight: 600,
+          color: '#262626',
+          textAlign: 'center'
+        }}>
+          {title}
+        </div>
+        <div style={{
+          fontSize: 14,
+          color: '#8c8c8c',
+          textAlign: 'center'
+        }}>
+          {description}
+        </div>
+      </Card>
+    </Tooltip>
+  );
+};
+
+export default QuickActionCard;