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

0.0.6.0

Browse Source
This commit is contained in:
freedakgmail
2025-11-23 16:41:14 +08:00
parent bae0e2c45a
commit 8c53014714
34 changed files with 780 additions and 5315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+7 -45
View File
@@ -241,54 +241,16 @@ export default function DashboardPage() {
<Users className="h-4 w-4" />
</div>
</div>
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-center gap-3 py-2">
<span className="text-5xl font-serif font-bold text-primary tracking-wider">
1
</span>
<span className="text-4xl font-bold text-muted-foreground">:</span>
<span className="text-5xl font-serif font-bold text-primary tracking-wider">
<div className="flex flex-col space-y-1">
<div className="flex items-center justify-center gap-3">
<span className="text-3xl font-serif font-bold text-primary tracking-tight">1</span>
<span className="text-2xl font-bold text-muted-foreground">:</span>
<span className="text-3xl font-serif font-bold text-primary tracking-tight">
{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-2">
男性 : 女性
</div>
{/* 双色进度条 */}
<div className="space-y-2">
<div className="flex items-center justify-between text-xs">
<span className="text-primary/80 font-medium flex items-center gap-1">
<span className="w-2 h-2 rounded-full bg-primary/60"></span>
男性 {stats.maleCount}
</span>
<span className="text-primary/80 font-medium flex items-center gap-1">
女性 {stats.femaleCount}
<span className="w-2 h-2 rounded-full bg-primary/60"></span>
</span>
</div>
<div className="h-3 bg-background/60 border border-border/50 rounded-full overflow-hidden flex">
<div
className="h-full bg-primary/70 transition-all duration-500 flex items-center justify-center"
style={{ width: `${stats.totalMembers > 0 ? (stats.maleCount / stats.totalMembers * 100) : 0}%` }}
>
{stats.totalMembers > 0 && stats.maleCount > 0 && (
<span className="text-[10px] text-primary-foreground font-bold px-1">
{Math.round(stats.maleCount / stats.totalMembers * 100)}%
</span>
)}
</div>
<div
className="h-full bg-primary/40 transition-all duration-500 flex items-center justify-center"
style={{ width: `${stats.totalMembers > 0 ? (stats.femaleCount / stats.totalMembers * 100) : 0}%` }}
>
{stats.totalMembers > 0 && stats.femaleCount > 0 && (
<span className="text-[10px] text-primary-foreground font-bold px-1">
{Math.round(stats.femaleCount / stats.totalMembers * 100)}%
</span>
)}
</div>
</div>
<div className="text-center text-xs text-muted-foreground/80 font-medium mt-1">
男性 {stats.maleCount} · 女性 {stats.femaleCount}
</div>
</div>
</CardContent>