This commit is contained in:
freedakgmail
2025-12-10 15:21:27 +08:00
parent e7167f4340
commit 1ae59960e8
148 changed files with 681 additions and 477 deletions
+39 -39
View File
@@ -430,11 +430,11 @@ export default function DashboardPage() {
<div className="flex h-screen flex-col bg-background font-sans overflow-hidden">
<SiteHeader />
<main className="flex-1 container mx-auto py-8 px-4 md:px-6 flex flex-col overflow-hidden">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8 flex-shrink-0">
<main className="flex-1 container mx-auto py-4 md:py-8 px-3 md:px-6 flex flex-col overflow-y-auto overflow-x-hidden">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 md:gap-4 mb-4 md:mb-8 flex-shrink-0">
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-serif font-bold text-foreground">
<div className="flex items-center gap-2 md:gap-3 flex-wrap">
<h1 className="text-2xl md:text-3xl font-serif font-bold text-foreground">
{currentTree?.name || '家族族谱'}
</h1>
{currentTree?.currentUserRole && (
@@ -470,7 +470,7 @@ export default function DashboardPage() {
</div>
</div>
<Collapsible open={statsExpanded} onOpenChange={setStatsExpanded} className="mb-8 flex-shrink-0">
<Collapsible open={statsExpanded} onOpenChange={setStatsExpanded} className="mb-4 md:mb-8 flex-shrink-0">
<div className="flex items-center justify-between mb-3">
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2 text-muted-foreground hover:text-foreground -ml-2">
@@ -480,21 +480,21 @@ export default function DashboardPage() {
</CollapsibleTrigger>
</div>
<CollapsibleContent className="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4">
{/* 第一个卡片:家族成员 + 在世/已故 */}
<Link href={currentTree?.id ? `/members?treeId=${currentTree.id}` : '#'}>
<ChineseCard variant="default" cornerOrnament className="chinese-stat-card transition-all hover:shadow-lg group cursor-pointer h-full">
<ChineseCardContent className="p-5 pt-6">
<div className="flex items-center justify-between mb-3">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide"></p>
<ChineseCardContent className="p-4 md:p-5 pt-5 md:pt-6">
<div className="flex items-center justify-between mb-2 md:mb-3">
<p className="text-xs md:text-sm font-semibold text-muted-foreground uppercase tracking-wide"></p>
<div className="chinese-seal chinese-seal-sm">
<Users className="h-4 w-4" />
</div>
</div>
<div className="flex flex-col space-y-1.5">
<span className="text-3xl font-serif font-bold text-foreground tracking-tight">{stats.totalMembers} </span>
<ChineseDivider variant="simple" className="my-2" />
<div className="flex items-center gap-3 text-sm text-muted-foreground/80 font-medium">
<div className="flex flex-col space-y-1">
<span className="text-2xl md:text-3xl font-serif font-bold text-foreground tracking-tight">{stats.totalMembers} </span>
<ChineseDivider variant="simple" className="my-1.5 md:my-2" />
<div className="flex items-center gap-2 md:gap-3 text-xs md: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>
@@ -507,17 +507,17 @@ export default function DashboardPage() {
{/* 第二个卡片:繁衍代数 + 记录年代 + 平均寿命 */}
<Link href={currentTree?.id ? `/timeline?treeId=${currentTree.id}` : '#'}>
<ChineseCard variant="default" cornerOrnament className="chinese-stat-card transition-all hover:shadow-lg group cursor-pointer h-full">
<ChineseCardContent className="p-5 pt-6">
<div className="flex items-center justify-between mb-3">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide"></p>
<ChineseCardContent className="p-4 md:p-5 pt-5 md:pt-6">
<div className="flex items-center justify-between mb-2 md:mb-3">
<p className="text-xs md:text-sm font-semibold text-muted-foreground uppercase tracking-wide"></p>
<div className="chinese-seal chinese-seal-sm">
<Clock className="h-4 w-4" />
</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>
<ChineseDivider variant="simple" className="my-2" />
<div className="flex items-center gap-3 text-sm text-muted-foreground/80 font-medium">
<div className="flex flex-col space-y-1">
<span className="text-2xl md:text-3xl font-serif font-bold text-foreground tracking-tight">{stats.maxGeneration} </span>
<ChineseDivider variant="simple" className="my-1.5 md:my-2" />
<div className="flex items-center gap-2 md:gap-3 text-xs md:text-sm text-muted-foreground/80 font-medium flex-wrap">
<span> {stats.yearsSpan} </span>
<span className="text-muted-foreground">·</span>
<span>寿 {stats.averageLifespan > 0 ? `${stats.averageLifespan}` : '-'}</span>
@@ -530,25 +530,25 @@ export default function DashboardPage() {
{/* 第三个卡片:性别比例 */}
<Link href={currentTree?.id ? `/members?treeId=${currentTree.id}` : '#'}>
<ChineseCard variant="default" cornerOrnament className="chinese-stat-card transition-all hover:shadow-lg group cursor-pointer h-full">
<ChineseCardContent className="p-5 pt-6">
<div className="flex items-center justify-between mb-3">
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide"></p>
<ChineseCardContent className="p-4 md:p-5 pt-5 md:pt-6">
<div className="flex items-center justify-between mb-2 md:mb-3">
<p className="text-xs md:text-sm font-semibold text-muted-foreground uppercase tracking-wide"></p>
<div className="chinese-seal chinese-seal-sm">
<Users className="h-4 w-4" />
</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">
<div className="flex flex-col space-y-1">
<div className="flex items-center justify-center gap-2">
<span className="text-2xl md:text-3xl font-serif font-bold text-primary tracking-tight">
{stats.maleCount > 0 ? '1' : '0'}
</span>
<span className="text-2xl font-bold text-muted-foreground">:</span>
<span className="text-3xl font-serif font-bold text-primary tracking-tight">
<span className="text-xl md:text-2xl font-bold text-muted-foreground">:</span>
<span className="text-2xl md:text-3xl font-serif font-bold text-primary tracking-tight">
{stats.maleCount > 0 ? (stats.femaleCount / stats.maleCount).toFixed(2) : '0'}
</span>
</div>
<ChineseDivider variant="simple" className="my-2" />
<div className="text-center text-sm text-muted-foreground/80 font-medium">
<ChineseDivider variant="simple" className="my-1.5 md:my-2" />
<div className="text-center text-xs md:text-sm text-muted-foreground/80 font-medium">
{stats.maleCount} · {stats.femaleCount}
</div>
</div>
@@ -559,17 +559,17 @@ export default function DashboardPage() {
</CollapsibleContent>
</Collapsible>
<Tabs defaultValue="photos" className="w-full flex-1 flex flex-col overflow-hidden">
<div className="flex items-center justify-between mb-4 flex-shrink-0">
<TabsList className="bg-muted/50">
<TabsTrigger value="photos"></TabsTrigger>
<TabsTrigger value="recent"></TabsTrigger>
<TabsTrigger value="statistics"></TabsTrigger>
<TabsTrigger value="migration"></TabsTrigger>
<Tabs defaultValue="photos" className="w-full flex-1 flex flex-col min-h-0">
<div className="flex items-center justify-between mb-3 md:mb-4 flex-shrink-0 gap-2">
<TabsList className="bg-muted/50 h-8 md:h-9">
<TabsTrigger value="photos" className="text-[11px] md:text-sm px-2 md:px-3 h-7 md:h-8"></TabsTrigger>
<TabsTrigger value="recent" className="text-[11px] md:text-sm px-2 md:px-3 h-7 md:h-8"></TabsTrigger>
<TabsTrigger value="statistics" className="text-[11px] md:text-sm px-2 md:px-3 h-7 md:h-8"></TabsTrigger>
<TabsTrigger value="migration" className="text-[11px] md:text-sm px-2 md:px-3 h-7 md:h-8"></TabsTrigger>
</TabsList>
<Link href={currentTree?.id ? `/members?treeId=${currentTree.id}` : '/members'}>
<Button variant="ghost" size="sm" className="text-muted-foreground gap-1">
<ArrowRight className="h-3 w-3" />
<Button variant="ghost" size="sm" className="text-muted-foreground gap-1 text-[11px] md:text-sm h-8 px-2 md:px-3">
<ArrowRight className="h-3 w-3" />
</Button>
</Link>
</div>