0.0.0.4

components/tree/family-node.tsx

@@ -2,21 +2,72 @@
 
 import type { FamilyMember } from "@/types/family"
 import { cn } from "@/lib/utils"
+import { useAvatarCache } from "@/hooks/use-avatar-cache"
+import { CircleUser, CircleUserRound, Heart } from "lucide-react"
 
 interface FamilyNodeProps {
   member: FamilyMember
   spouse?: FamilyMember
   isRoot?: boolean
   onSelect?: (member: FamilyMember) => void
+  isHighlighted?: boolean
 }
 
-export function FamilyNode({ member, spouse, isRoot, onSelect }: FamilyNodeProps) {
+// 格式化日期显示（只显示年份）
+function formatYear(dateString?: string): string {
+  if (!dateString) return ''
+  const year = dateString.split('-')[0]
+  return year
+}
+
+// 计算年龄
+function calculateAge(birthDate?: string, deathDate?: string): number | null {
+  if (!birthDate) return null
+  
+  const birth = new Date(birthDate)
+  const end = deathDate ? new Date(deathDate) : new Date()
+  
+  let age = end.getFullYear() - birth.getFullYear()
+  const monthDiff = end.getMonth() - birth.getMonth()
+  
+  if (monthDiff < 0 || (monthDiff === 0 && end.getDate() < birth.getDate())) {
+    age--
+  }
+  
+  return age
+}
+
+// 单个人员卡片组件
+function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { member: FamilyMember; isRoot?: boolean; isSpouse?: boolean; onSelect?: (member: FamilyMember) => void; isHighlighted?: boolean }) {
+  const { avatarUrl: avatarBlobUrl } = useAvatarCache(member?.avatarImageId)
+  
+  const birthYear = formatYear(member.birthDate)
+  const deathYear = formatYear(member.deathDate)
+  const age = calculateAge(member.birthDate, member.deathDate)
+  
+  const lifeSpan = birthYear
+    ? deathYear
+      ? `${birthYear}-${deathYear}`
+      : `${birthYear}-`
+    : ''
+  
+  const ageText = age !== null
+    ? member.deathDate
+      ? `享年${age}岁`
+      : `${age}岁`
+    : ''
+  
   return (
     <div
       className={cn(
-        "relative flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all cursor-pointer hover:scale-105 shadow-sm w-32",
-        isRoot ? "border-primary bg-primary/5" : "border-border bg-card",
-        member.gender === "female" ? "rounded-full w-28 h-28 justify-center" : "rounded-lg", // Traditional round sky/square earth or just variety
+        "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",
       )}
       onClick={() => onSelect?.(member)}
     >
@@ -24,28 +75,62 @@ export function FamilyNode({ member, spouse, isRoot, onSelect }: FamilyNodeProps
         {member.generation}世
       </div>
 
-      <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground overflow-hidden border border-border/50">
-        {member.avatarUrl ? (
+      <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-muted-foreground overflow-hidden border border-border/50">
+        {avatarBlobUrl ? (
           <img
-            src={member.avatarUrl || "/placeholder.svg"}
+            src={avatarBlobUrl}
             alt={member.fullName}
             className="h-full w-full object-cover"
           />
         ) : (
-          <span className="font-serif font-bold text-lg text-foreground/70">{member.surname}</span>
+          member.gender === 'female' ? (
+            <CircleUserRound className="h-8 w-8 text-pink-400" />
+          ) : (
+            <CircleUser className="h-8 w-8 text-blue-400" />
+          )
         )}
       </div>
 
-      <div className="text-center">
-        <div className="font-serif font-bold text-foreground leading-tight">{member.givenName}</div>
+      <div className="text-center w-full">
+        <div className="font-serif font-bold text-foreground leading-tight">{member.surname} {member.givenName}</div>
         {member.courtesyName && (
           <div className="text-[10px] text-muted-foreground mt-0.5">字 {member.courtesyName}</div>
         )}
+        {lifeSpan && (
+          <div className="text-[9px] text-muted-foreground/70 mt-1 font-mono">
+            {lifeSpan}
+          </div>
+        )}
+        {ageText && (
+          <div className="text-[9px] text-muted-foreground/60 font-mono">
+            {ageText}
+          </div>
+        )}
+        {member.phone && (
+          <div className="text-[9px] text-muted-foreground/60 font-mono truncate">
+            📱 {member.phone}
+          </div>
+        )}
       </div>
 
-      {member.lifeStatus === "deceased" && (
+      {member.deathDate && (
         <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-neutral-400 ring-2 ring-background" />
       )}
     </div>
   )
 }
+
+export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted }: FamilyNodeProps) {
+  if (!spouse) {
+    return <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} />
+  }
+  
+  // 有配偶时，并排显示
+  return (
+    <div className="flex items-center gap-2">
+      <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} />
+      <Heart className="h-4 w-4 text-red-400 flex-shrink-0" />
+      <PersonCard member={spouse} isSpouse={true} onSelect={onSelect} />
+    </div>
+  )
+}