freedak/chinese-family-tree-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.9.0

Browse Source
This commit is contained in:
freedakgmail
2025-11-24 16:07:24 +08:00
parent 3d075c6076
commit b25f4bea02
426 changed files with 3619 additions and 4468 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+61 -49
View File
@@ -387,53 +387,65 @@ export default function DashboardPage() {
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
<StatCard
title="家族成员"
value={stats.totalMembers.toString()}
subtitle={`男 ${stats.maleCount} · 女 ${stats.femaleCount}`}
icon={<Users className="h-4 w-4" />}
href={currentTree?.id ? `/members?treeId=${currentTree.id}` : undefined}
/>
<StatCard
title="记录年代"
value={`${stats.yearsSpan} 年`}
subtitle={`始于 ${stats.earliestYear} 年`}
icon={<Clock className="h-4 w-4" />}
href={currentTree?.id ? `/timeline?treeId=${currentTree.id}` : undefined}
/>
<StatCard
title="繁衍代数"
value={`${stats.maxGeneration} 代`}
subtitle={`当前最高世代`}
icon={<Network className="h-4 w-4" />}
href={currentTree?.id ? `/tree?treeId=${currentTree.id}` : undefined}
/>
<StatCard
title="在世 / 已故"
value={`${stats.livingMembers} / ${stats.deceasedMembers}`}
subtitle={`在世率 ${stats.totalMembers > 0 ? Math.round(stats.livingMembers / stats.totalMembers * 100) : 0}%`}
icon={<Users className="h-4 w-4" />}
href={currentTree?.id ? `/members?treeId=${currentTree.id}` : undefined}
/>
<StatCard
title="平均寿命"
value={stats.averageLifespan > 0 ? `${stats.averageLifespan} 岁` : '暂无数据'}
subtitle={`已统计 ${stats.deceasedMembers} 人`}
icon={<Clock className="h-4 w-4" />}
href={currentTree?.id ? `/timeline?treeId=${currentTree.id}` : undefined}
/>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
{/* 第一个卡片：家族成员 + 在世/已故 */}
<Link href={currentTree?.id ? `/members?treeId=${currentTree.id}` : '#'}>
<Card className="relative overflow-hidden border border-border/50 shadow-sm bg-gradient-to-br from-card to-card/50 backdrop-blur transition-all hover:shadow-lg hover:border-primary/30 group cursor-pointer">
<CardContent className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">性别比例</p>
<CardContent className="p-5">
<div className="flex items-center justify-between mb-3">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">家族成员</p>
<div className="text-primary/70 bg-primary/10 p-2.5 rounded-lg group-hover:bg-primary/20 transition-colors">
<Users className="h-4 w-4" />
<Users className="h-5 w-5" />
</div>
</div>
<div className="flex flex-col space-y-1">
<div className="flex items-center justify-center gap-3">
<div className="flex flex-col space-y-1.5">
<span className="text-3xl font-serif font-bold text-foreground tracking-tight">{stats.totalMembers} 人</span>
<div className="flex items-center gap-3 text-sm text-muted-foreground/80 font-medium">
<span className="text-green-600">在世 {stats.livingMembers}</span>
<span className="text-muted-foreground">·</span>
<span className="text-gray-600">已故 {stats.deceasedMembers}</span>
</div>
</div>
</CardContent>
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary/50 via-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity" />
</Card>
</Link>
{/* 第二个卡片：繁衍代数 + 记录年代 + 平均寿命 */}
<Link href={currentTree?.id ? `/timeline?treeId=${currentTree.id}` : '#'}>
<Card className="relative overflow-hidden border border-border/50 shadow-sm bg-gradient-to-br from-card to-card/50 backdrop-blur transition-all hover:shadow-lg hover:border-primary/30 group cursor-pointer">
<CardContent className="p-5">
<div className="flex items-center justify-between mb-3">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">家族历史</p>
<div className="text-primary/70 bg-primary/10 p-2.5 rounded-lg group-hover:bg-primary/20 transition-colors">
<Clock className="h-5 w-5" />
</div>
</div>
<div className="flex flex-col space-y-1.5">
<span className="text-3xl font-serif font-bold text-foreground tracking-tight">{stats.maxGeneration} 代</span>
<div className="flex items-center gap-3 text-sm text-muted-foreground/80 font-medium">
<span>跨越 {stats.yearsSpan} 年</span>
<span className="text-muted-foreground">·</span>
<span>均寿 {stats.averageLifespan > 0 ? `${stats.averageLifespan}岁` : '-'}</span>
</div>
</div>
</CardContent>
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary/50 via-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity" />
</Card>
</Link>
{/* 第三个卡片：性别比例 */}
<Link href={currentTree?.id ? `/members?treeId=${currentTree.id}` : '#'}>
<Card className="relative overflow-hidden border border-border/50 shadow-sm bg-gradient-to-br from-card to-card/50 backdrop-blur transition-all hover:shadow-lg hover:border-primary/30 group cursor-pointer">
<CardContent className="p-5">
<div className="flex items-center justify-between mb-3">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">性别比例</p>
<div className="text-primary/70 bg-primary/10 p-2.5 rounded-lg group-hover:bg-primary/20 transition-colors">
<Users className="h-5 w-5" />
</div>
</div>
<div className="flex flex-col space-y-1.5">
<div className="flex items-center justify-center gap-2.5">
<span className="text-3xl font-serif font-bold text-primary tracking-tight">
{stats.maleCount > 0 ? '1' : '0'}
</span>
@@ -442,7 +454,7 @@ export default function DashboardPage() {
{stats.maleCount > 0 ? (stats.femaleCount / stats.maleCount).toFixed(2) : '0'}
</span>
</div>
<div className="text-center text-xs text-muted-foreground/80 font-medium mt-1">
<div className="text-center text-sm text-muted-foreground/80 font-medium">
男性 {stats.maleCount} · 女性 {stats.femaleCount}
</div>
</div>
@@ -869,15 +881,15 @@ function StatCard({
}: { title: string; value: string; subtitle: string; icon: React.ReactNode; href?: string }) {
const cardContent = (
<Card className="relative overflow-hidden border border-border/50 shadow-sm bg-gradient-to-br from-card to-card/50 backdrop-blur transition-all hover:shadow-lg hover:border-primary/30 group cursor-pointer">
<CardContent className="p-6">
<div className="flex items-center justify-between mb-4">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">{title}</p>
<div className="text-primary/70 bg-primary/10 p-2.5 rounded-lg group-hover:bg-primary/20 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between mb-2">
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">{title}</p>
<div className="text-primary/70 bg-primary/10 p-2 rounded-lg group-hover:bg-primary/20 transition-colors">
{icon}
</div>
</div>
<div className="flex flex-col space-y-1">
<span className="text-3xl font-serif font-bold text-foreground tracking-tight">{value}</span>
<div className="flex flex-col space-y-0.5">
<span className="text-2xl font-serif font-bold text-foreground tracking-tight">{value}</span>
<p className="text-xs text-muted-foreground/80 font-medium">{subtitle}</p>
</div>
</CardContent>