d915db1016
Replace simple welcome message with functional dashboard including greeting and quick action cards. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import React from 'react';
|
||
import { useMyState } from '@/common';
|
||
import {
|
||
BuildingOutlined,
|
||
ImportOutlined,
|
||
TeamOutlined,
|
||
} from '@ant-design/icons';
|
||
import QuickActionCard from './components/QuickActionCard';
|
||
|
||
export default function Index() {
|
||
const { snap } = useMyState();
|
||
const username = snap.session?.user?.username || '用户';
|
||
|
||
const quickActions = [
|
||
{
|
||
icon: <BuildingOutlined />,
|
||
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,
|
||
textAlign: 'center',
|
||
}}>
|
||
<h1 style={{
|
||
fontSize: 32,
|
||
fontWeight: 600,
|
||
color: '#262626',
|
||
marginBottom: 12,
|
||
}}>
|
||
欢迎回来，{username}！
|
||
</h1>
|
||
<p style={{
|
||
fontSize: 16,
|
||
color: '#8c8c8c',
|
||
marginBottom: 0,
|
||
}}>
|
||
这里是您的快捷工作台，点击下方卡片快速开始常用操作
|
||
</p>
|
||
</div>
|
||
|
||
{/* 快捷操作卡片区域 */}
|
||
<div 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>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|