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

0.0.4.0

Browse Source
This commit is contained in:
freedakgmail
2025-11-23 14:46:53 +08:00
parent 2b4bc92f1b
commit d797f1abb9
98 changed files with 187824 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/family-node.tsx
+17 -12
View File
@@ -11,6 +11,8 @@ interface FamilyNodeProps {
isRoot?: boolean
onSelect?: (member: FamilyMember) => void
isHighlighted?: boolean
relationMode?: boolean
isSelected?: boolean
}
// 格式化日期显示（只显示年份）
@@ -38,7 +40,7 @@ function calculateAge(birthDate?: string, deathDate?: string): number | null {
}
// 单个人员卡片组件
function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { member: FamilyMember; isRoot?: boolean; isSpouse?: boolean; onSelect?: (member: FamilyMember) => void; isHighlighted?: boolean }) {
function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relationMode, isSelected }: { member: FamilyMember; isRoot?: boolean; isSpouse?: boolean; onSelect?: (member: FamilyMember) => void; isHighlighted?: boolean; relationMode?: boolean; isSelected?: boolean }) {
const { avatarUrl: avatarBlobUrl } = useAvatarCache(member?.avatarImageId)
const birthYear = formatYear(member.birthDate)
@@ -61,13 +63,16 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { mem
<div
className={cn(
"family-node-card relative flex flex-col items-center gap-2 p-3 rounded-lg transition-all cursor-pointer hover:scale-105 shadow-sm w-32",
isHighlighted
? "border-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 ring-4 ring-yellow-200 dark:ring-yellow-800 animate-pulse"
: isRoot
? "border-2 border-primary bg-primary/5"
: isSpouse
? "border-2 border-dashed border-border/60 bg-muted/30"
: "border-2 border-border bg-card",
isSelected
? "border-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20 ring-4 ring-blue-200 dark:ring-blue-800"
: isHighlighted
? "border-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 ring-4 ring-yellow-200 dark:ring-yellow-800 animate-pulse"
: isRoot
? "border-2 border-primary bg-primary/5"
: isSpouse
? "border-2 border-dashed border-border/60 bg-muted/30"
: "border-2 border-border bg-card",
relationMode && "hover:border-blue-400 hover:shadow-lg"
)}
onClick={() => onSelect?.(member)}
>
@@ -120,17 +125,17 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { mem
)
}
export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted }: FamilyNodeProps) {
export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted, relationMode, isSelected }: FamilyNodeProps) {
if (!spouse) {
return <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} />
return <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} />
}
// 有配偶时，并排显示
return (
<div className="flex items-center gap-2">
<PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} />
<PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} />
<Heart className="h-4 w-4 text-red-400 flex-shrink-0" />
<PersonCard member={spouse} isSpouse={true} onSelect={onSelect} />
<PersonCard member={spouse} isSpouse={true} onSelect={onSelect} relationMode={relationMode} />
</div>
)
}