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:
parent
ba87af714a
commit
0fe580ea89
@ -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)',
|
||||
<div
|
||||
style={{
|
||||
padding: '24px',
|
||||
minHeight: '100vh',
|
||||
background: '#f0f2f5',
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: 1200,
|
||||
margin: '0 auto',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{/* 欢迎语区域 */}
|
||||
<div style={{
|
||||
marginBottom: 48,
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '32px',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<h1 style={{
|
||||
fontSize: 32,
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: '32px',
|
||||
fontWeight: 600,
|
||||
color: '#262626',
|
||||
marginBottom: 12,
|
||||
}}>
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
欢迎回来,{username}!
|
||||
</h1>
|
||||
<p style={{
|
||||
fontSize: 16,
|
||||
<p
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
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) => (
|
||||
<QuickActionCard
|
||||
key={action.path}
|
||||
icon={action.icon}
|
||||
title={action.title}
|
||||
description={action.description}
|
||||
themeColor={action.themeColor}
|
||||
to={action.path}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* 快捷操作区域 */}
|
||||
<QuickActionsGrid />
|
||||
|
||||
{/* 移动端响应式样式 */}
|
||||
<style>{`
|
||||
@media (max-width: 768px) {
|
||||
.quick-actions-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
{/* 统计数据预留区域 */}
|
||||
<StatisticsPlaceholder />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user