0.7.0.0
This commit is contained in:
+39
-39
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user