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

0.5.0.2

Browse Source
This commit is contained in:
freedakgmail
2025-11-30 22:04:36 +08:00
parent 8a1e03d616
commit dd2f67073b
134 changed files with 322 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/family-node.tsx
+14 -10
View File
@@ -192,9 +192,7 @@ function PersonCard({
"border-[3px] rounded-none",
"shadow-lg hover:shadow-xl",
// 根据状态设置样式
isSelected
? "border-blue-600 bg-blue-50 dark:bg-blue-950/50 ring-2 ring-blue-400"
: isHighlighted
isHighlighted
? "border-yellow-600 bg-yellow-50/90 dark:bg-yellow-950/50 ring-2 ring-yellow-400 animate-pulse"
: 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"
@@ -205,15 +203,14 @@ function PersonCard({
: isMale
? "border-amber-800 bg-gradient-to-b from-amber-50 via-orange-50/30 to-amber-50/80 dark:from-amber-950/40 dark:to-orange-950/20"
: "border-rose-800 bg-gradient-to-b from-rose-50 via-pink-50/30 to-rose-50/80 dark:from-rose-950/40 dark:to-pink-950/20",
relationMode && "hover:border-blue-600 hover:shadow-xl"
relationMode && "hover:shadow-xl"
)}
onClick={() => onSelect?.(member)}
>
{/* 内边框装饰 */}
<div className={cn(
"absolute inset-[3px] border pointer-events-none",
isSelected ? "border-blue-400/50"
: isHighlighted ? "border-yellow-500/50"
isHighlighted ? "border-yellow-500/50"
: isFounder || isRoot ? "border-amber-400/50"
: isSpouse ? "border-stone-400/30"
: isDead ? "border-stone-400/40"
@@ -224,21 +221,28 @@ 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" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
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" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
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" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
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" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
{/* 选中打钩标记 */}
{isSelected && (
<div className="absolute top-1 left-1 z-20">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#2563eb" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10" fill="none" stroke="white" strokeWidth="2.5"/></svg>
</div>
)}
{/* 世代标签 - 庄严印章风格 */}
<div className={cn(
"absolute -top-3 px-3 py-1 text-[11px] font-serif font-bold tracking-wider",