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',
background: '#f0f2f5', minHeight: '100vh',
}}> background: '#f0f2f5',
<div style={{ }}
maxWidth: 1200, >
margin: '0 auto', {/* 欢迎语区域 */}
}}> <div
{/* 欢迎语区域 */} style={{
<div style={{ marginBottom: '32px',
marginBottom: 48,
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}
</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',
}} }}
> >
{quickActions.map((action) => ( {username}
<QuickActionCard </h1>
key={action.path} <p
icon={action.icon} style={{
title={action.title} fontSize: '16px',
description={action.description} color: '#8c8c8c',
themeColor={action.themeColor} marginBottom: 0,
to={action.path} }}
/> >
))}
</div> </p>
{/* 移动端响应式样式 */}
<style>{`
@media (max-width: 768px) {
.quick-actions-grid {
grid-template-columns: 1fr !important;
}
}
`}</style>
</div> </div>
{/* 快捷操作区域 */}
<QuickActionsGrid />
{/* 统计数据预留区域 */}
<StatisticsPlaceholder />
</div> </div>
); );
} }