156 lines
4.0 KiB
TypeScript
156 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/common';
|
|
import { PageContainer } from '@/components/layout';
|
|
import { StatCard } from '@/components/features/dashboard/StatCard';
|
|
import { TrendChart } from '@/components/features/dashboard/TrendChart';
|
|
import { RegionDistribution } from '@/components/features/dashboard/RegionDistribution';
|
|
import { RecentActivity } from '@/components/features/dashboard/RecentActivity';
|
|
import styles from './dashboard.module.scss';
|
|
|
|
// 模拟统计数据
|
|
const statsData = [
|
|
{
|
|
title: '总认种量',
|
|
value: 12580,
|
|
suffix: '棵',
|
|
change: { value: 5.6, trend: 'up' as const },
|
|
color: '#1565C0',
|
|
},
|
|
{
|
|
title: '活跃用户',
|
|
value: 3240,
|
|
suffix: '人',
|
|
change: { value: 3.2, trend: 'up' as const },
|
|
color: '#4CAF50',
|
|
},
|
|
{
|
|
title: '省级公司',
|
|
value: 28,
|
|
suffix: '家',
|
|
change: { value: 2.1, trend: 'up' as const },
|
|
color: '#F5A623',
|
|
},
|
|
{
|
|
title: '市级公司',
|
|
value: 156,
|
|
suffix: '家',
|
|
change: { value: 4.8, trend: 'up' as const },
|
|
color: '#9C27B0',
|
|
},
|
|
];
|
|
|
|
// 模拟趋势数据
|
|
const trendData = [
|
|
{ date: '03-19', value: 150 },
|
|
{ date: '03-20', value: 280 },
|
|
{ date: '03-21', value: 320 },
|
|
{ date: '03-22', value: 250 },
|
|
{ date: '03-23', value: 380 },
|
|
{ date: '03-24', value: 420 },
|
|
{ date: '03-25', value: 390 },
|
|
];
|
|
|
|
// 模拟区域分布数据
|
|
const regionData = [
|
|
{ region: '华东地区', percentage: 35, color: '#1565C0' },
|
|
{ region: '华南地区', percentage: 25, color: '#4CAF50' },
|
|
{ region: '华北地区', percentage: 20, color: '#F5A623' },
|
|
{ region: '华中地区', percentage: 12, color: '#9C27B0' },
|
|
{ region: '其他地区', percentage: 8, color: '#607D8B' },
|
|
];
|
|
|
|
// 模拟最近活动数据
|
|
const activityData = [
|
|
{
|
|
id: '1',
|
|
type: 'user_register' as const,
|
|
icon: '👤',
|
|
title: '新用户注册',
|
|
description: '用户 张三 完成注册',
|
|
timestamp: '5分钟前',
|
|
},
|
|
{
|
|
id: '2',
|
|
type: 'company_activity' as const,
|
|
icon: '🏢',
|
|
title: '公司授权',
|
|
description: '广东省公司完成授权',
|
|
timestamp: '15分钟前',
|
|
},
|
|
{
|
|
id: '3',
|
|
type: 'system_update' as const,
|
|
icon: '⚙️',
|
|
title: '系统更新',
|
|
description: '龙虎榜规则已更新',
|
|
timestamp: '1小时前',
|
|
},
|
|
{
|
|
id: '4',
|
|
type: 'report_generated' as const,
|
|
icon: '📊',
|
|
title: '报表生成',
|
|
description: '3月份运营报表已生成',
|
|
timestamp: '2小时前',
|
|
},
|
|
{
|
|
id: '5',
|
|
type: 'user_register' as const,
|
|
icon: '👤',
|
|
title: '新用户注册',
|
|
description: '用户 李四 完成注册',
|
|
timestamp: '3小时前',
|
|
},
|
|
];
|
|
|
|
export default function DashboardPage() {
|
|
const headerActions = (
|
|
<>
|
|
<Button variant="outline" size="sm">
|
|
添加用户
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
授权管理
|
|
</Button>
|
|
<Button variant="primary" size="sm">
|
|
查看报表
|
|
</Button>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<PageContainer
|
|
title="仪表板"
|
|
breadcrumb={[{ label: '首页', path: '/' }, { label: '仪表板' }]}
|
|
actions={headerActions}
|
|
>
|
|
<div className={styles.dashboard}>
|
|
{/* 统计卡片区 */}
|
|
<div className={styles.dashboard__stats}>
|
|
{statsData.map((stat, index) => (
|
|
<StatCard key={index} {...stat} />
|
|
))}
|
|
</div>
|
|
|
|
{/* 图表区 */}
|
|
<div className={styles.dashboard__charts}>
|
|
<div className={styles.dashboard__mainChart}>
|
|
<TrendChart title="认种趋势" data={trendData} />
|
|
</div>
|
|
<div className={styles.dashboard__sidePanel}>
|
|
<RecentActivity activities={activityData} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 底部区域 */}
|
|
<div className={styles.dashboard__bottom}>
|
|
<div className={styles.dashboard__regionChart}>
|
|
<RegionDistribution data={regionData} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
);
|
|
}
|