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>
This commit is contained in:
Your Name 2026-04-01 10:49:03 +08:00
parent ba87af714a
commit 0fe580ea89

View File

@ -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>
);
}