From 0fe580ea89d7252236b36702fc6b45d85bac150c Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 1 Apr 2026 10:49:03 +0800
Subject: [PATCH] feat: redesign homepage with 6 quick actions and statistics
 area

Replace old 3-card layout with new 6-card grid layout and add 60vh statistics placeholder area for future expansion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/index.tsx | 123 +++++++++++++-------------------------------
 1 file changed, 36 insertions(+), 87 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4236a60..35e118d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,103 +1,52 @@
 import { useMyState } from '@/common';
-import {
-  BuildOutlined,
-  ImportOutlined,
-  TeamOutlined,
-} from '@ant-design/icons';
-import QuickActionCard from './components/QuickActionCard';
+import QuickActionsGrid from './components/QuickActionsGrid';
+import StatisticsPlaceholder from './components/StatisticsPlaceholder';
 
 export default function Index() {
   const { snap } = useMyState();
   const username = snap.session?.user?.username || '用户';
 
-  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',
-    },
-  ];
-
   return (
-    <div style={{
-      padding: '48px 24px',
-      minHeight: 'calc(100vh - 64px)',
-      background: '#f0f2f5',
-    }}>
-      <div style={{
-        maxWidth: 1200,
-        margin: '0 auto',
-      }}>
-        {/* 欢迎语区域 */}
-        <div style={{
-          marginBottom: 48,
+    <div
+      style={{
+        padding: '24px',
+        minHeight: '100vh',
+        background: '#f0f2f5',
+      }}
+    >
+      {/* 欢迎语区域 */}
+      <div
+        style={{
+          marginBottom: '32px',
           textAlign: 'center',
-        }}>
-          <h1 style={{
-            fontSize: 32,
+        }}
+      >
+        <h1
+          style={{
+            fontSize: '32px',
             fontWeight: 600,
             color: '#262626',
-            marginBottom: 12,
-          }}>
-            欢迎回来，{username}！
-          </h1>
-          <p style={{
-            fontSize: 16,
-            color: '#8c8c8c',
-            marginBottom: 0,
-          }}>
-            这里是您的快捷工作台，点击下方卡片快速开始常用操作
-          </p>
-        </div>
-
-        {/* 快捷操作卡片区域 */}
-        <div
-          className="quick-actions-grid"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-            gap: 24,
-            maxWidth: 900,
-            margin: '0 auto',
+            marginBottom: '12px',
           }}
         >
-          {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: 768px) {
-            .quick-actions-grid {
-              grid-template-columns: 1fr !important;
-            }
-          }
-        `}</style>
+          欢迎回来，{username}！
+        </h1>
+        <p
+          style={{
+            fontSize: '16px',
+            color: '#8c8c8c',
+            marginBottom: 0,
+          }}
+        >
+          这里是您的快捷工作台，点击下方卡片快速开始常用操作
+        </p>
       </div>
+
+      {/* 快捷操作区域 */}
+      <QuickActionsGrid />
+
+      {/* 统计数据预留区域 */}
+      <StatisticsPlaceholder />
     </div>
   );
 }