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 { useMyState } from '@/common';
import { import QuickActionsGrid from './components/QuickActionsGrid';
BuildOutlined, import StatisticsPlaceholder from './components/StatisticsPlaceholder';
ImportOutlined,
TeamOutlined,
} from '@ant-design/icons';
import QuickActionCard from './components/QuickActionCard';
export default function Index() { export default function Index() {
const { snap } = useMyState(); const { snap } = useMyState();
const username = snap.session?.user?.username || '用户'; 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 ( return (
<div style={{ <div
padding: '48px 24px', style={{
minHeight: 'calc(100vh - 64px)', padding: '24px',
minHeight: '100vh',
background: '#f0f2f5', background: '#f0f2f5',
}}> }}
<div style={{ >
maxWidth: 1200,
margin: '0 auto',
}}>
{/* 欢迎语区域 */} {/* 欢迎语区域 */}
<div style={{ <div
marginBottom: 48, style={{
marginBottom: '32px',
textAlign: 'center', textAlign: 'center',
}}> }}
<h1 style={{ >
fontSize: 32, <h1
style={{
fontSize: '32px',
fontWeight: 600, fontWeight: 600,
color: '#262626', color: '#262626',
marginBottom: 12, marginBottom: '12px',
}}> }}
>
{username} {username}
</h1> </h1>
<p style={{ <p
fontSize: 16, style={{
fontSize: '16px',
color: '#8c8c8c', color: '#8c8c8c',
marginBottom: 0, marginBottom: 0,
}}> }}
>
</p> </p>
</div> </div>
{/* 快捷操作卡片区域 */} {/* 快捷操作区域 */}
<div <QuickActionsGrid />
className="quick-actions-grid"
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: 24,
maxWidth: 900,
margin: '0 auto',
}}
>
{quickActions.map((action) => (
<QuickActionCard
key={action.path}
icon={action.icon}
title={action.title}
description={action.description}
themeColor={action.themeColor}
to={action.path}
/>
))}
</div>
{/* 移动端响应式样式 */} {/* 统计数据预留区域 */}
<style>{` <StatisticsPlaceholder />
@media (max-width: 768px) {
.quick-actions-grid {
grid-template-columns: 1fr !important;
}
}
`}</style>
</div>
</div> </div>
); );
} }