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

0.5.0.0

Browse Source
This commit is contained in:
freedakgmail
2025-11-30 21:20:51 +08:00
parent a2873bf3c2
commit 025f2b619f
186 changed files with 809 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/family-node.tsx
+12 -11
View File
@@ -182,6 +182,7 @@ function PersonCard({
// 庄严正式的中国风配色
const isDead = !!member.deathDate
const isMale = member.gender === 'MALE'
const isFounder = member.isFounder === true
const cardContent = (
<div
@@ -195,8 +196,8 @@ function PersonCard({
? "border-blue-600 bg-blue-50 dark:bg-blue-950/50 ring-2 ring-blue-400"
: isHighlighted
? "border-yellow-600 bg-yellow-50/90 dark:bg-yellow-950/50 ring-2 ring-yellow-400 animate-pulse"
: isRoot
? "border-red-800 bg-gradient-to-b from-red-50 via-amber-50/30 to-red-50 dark:from-red-950/40 dark:to-amber-950/20 shadow-xl"
: isFounder || isRoot
? "border-amber-500 bg-gradient-to-b from-amber-100 via-yellow-50 to-amber-100 dark:from-amber-900/40 dark:to-yellow-900/20 shadow-xl ring-1 ring-amber-300"
: isSpouse
? "border-dashed border-stone-500 bg-stone-50/50 dark:bg-stone-900/30"
: isDead
@@ -213,7 +214,7 @@ function PersonCard({
"absolute inset-[3px] border pointer-events-none",
isSelected ? "border-blue-400/50"
: isHighlighted ? "border-yellow-500/50"
: isRoot ? "border-red-600/40"
: isFounder || isRoot ? "border-amber-400/50"
: isSpouse ? "border-stone-400/30"
: isDead ? "border-stone-400/40"
: isMale ? "border-amber-600/40"
@@ -223,27 +224,27 @@ function PersonCard({
{/* 四角装饰 - 更精致的角花 */}
<div className={cn(
"absolute top-0 left-0 w-4 h-4 border-t-[3px] border-l-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
<div className={cn(
"absolute top-0 right-0 w-4 h-4 border-t-[3px] border-r-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
<div className={cn(
"absolute bottom-0 left-0 w-4 h-4 border-b-[3px] border-l-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
<div className={cn(
"absolute bottom-0 right-0 w-4 h-4 border-b-[3px] border-r-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
{/* 世代标签 - 庄严印章风格 */}
<div className={cn(
"absolute -top-3 px-3 py-1 text-[11px] font-serif font-bold tracking-wider",
"border-2 shadow-md",
isRoot
? "bg-red-800 text-amber-100 border-red-900"
isFounder || isRoot
? "bg-amber-500 text-white border-amber-600"
: isDead
? "bg-stone-600 text-stone-100 border-stone-700"
: isMale
@@ -257,8 +258,8 @@ function PersonCard({
<div className={cn(
"h-14 w-14 flex items-center justify-center overflow-hidden mt-2",
"border-2 shadow-inner bg-white/80 dark:bg-black/20",
isRoot
? "border-red-700"
isFounder || isRoot
? "border-amber-500"
: isDead
? "border-stone-400"
: isMale