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

0.6.0.2

Browse Source
This commit is contained in:
freedakgmail
2025-12-10 10:19:29 +08:00
parent 09809c0e49
commit e9b1641509
144 changed files with 1736 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/family-node.tsx
+14 -13
View File
@@ -197,23 +197,24 @@ function PersonCard({
const cardContent = (
<div
data-member-id={member.id}
className={cn(
"family-node-card relative flex flex-col items-center p-4 transition-all cursor-pointer hover:scale-[1.02] w-[140px]",
// 庄严的边框样式 - 双层边框效果
"border-[3px] rounded-none",
"shadow-lg hover:shadow-xl",
// 根据状态设置样式
// 根据状态设置样式 - 中国风配色
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"
: isSpouse
? "border-dashed border-stone-500 bg-stone-50/50 dark:bg-stone-900/30"
? "border-dashed border-amber-400 bg-amber-50/50 dark:bg-amber-900/20"
: isDead
? "border-stone-500 bg-gradient-to-b from-stone-100 to-stone-50 dark:from-stone-900/50 dark:to-stone-800/30"
: 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",
: "border-rose-700 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:shadow-xl"
)}
onClick={() => onSelect?.(member)}
@@ -223,28 +224,28 @@ function PersonCard({
"absolute inset-[3px] border pointer-events-none",
isHighlighted ? "border-yellow-500/50"
: isFounder || isRoot ? "border-amber-400/50"
: isSpouse ? "border-stone-400/30"
: isSpouse ? "border-amber-300/40"
: isDead ? "border-stone-400/40"
: isMale ? "border-amber-600/40"
: "border-rose-600/40"
: "border-rose-500/40"
)} />
{/* 四角装饰 - 更精致的角花 */}
<div className={cn(
"absolute top-0 left-0 w-4 h-4 border-t-[3px] border-l-[3px]",
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-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
)} />
<div className={cn(
"absolute top-0 right-0 w-4 h-4 border-t-[3px] border-r-[3px]",
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-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
)} />
<div className={cn(
"absolute bottom-0 left-0 w-4 h-4 border-b-[3px] border-l-[3px]",
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-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
)} />
<div className={cn(
"absolute bottom-0 right-0 w-4 h-4 border-b-[3px] border-r-[3px]",
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-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
)} />
{/* 选中打钩标记 */}
@@ -264,7 +265,7 @@ function PersonCard({
? "bg-stone-600 text-stone-100 border-stone-700"
: isMale
? "bg-amber-800 text-amber-100 border-amber-900"
: "bg-rose-800 text-rose-100 border-rose-900"
: "bg-rose-700 text-rose-100 border-rose-800"
)}>
{member.generation}世
</div>
@@ -279,7 +280,7 @@ function PersonCard({
? "border-stone-400"
: isMale
? "border-amber-700"
: "border-rose-700"
: "border-rose-600"
)}>
{avatarBlobUrl ? (
<img
@@ -289,7 +290,7 @@ function PersonCard({
/>
) : (
member.gender === 'FEMALE' ? (
<CircleUserRound className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-rose-700")} />
<CircleUserRound className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-rose-600")} />
) : (
<CircleUser className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-amber-700")} />
)
@@ -346,7 +347,7 @@ function PersonCard({
"bg-white border-2 shadow-md transition-all hover:scale-110",
isCollapsed
? "border-amber-500 text-amber-600"
: "border-stone-400 text-stone-500"
: "border-amber-400 text-amber-500"
)}
title={isCollapsed ? "展开子孙" : "折叠子孙"}
>