0.8.4.0

components/tree/family-node.tsx

@@ -26,6 +26,7 @@ interface FamilyNodeProps {
   isRoot?: boolean
   onSelect?: (member: FamilyMember) => void
   isHighlighted?: boolean
+  highlightedMemberId?: string | null
   relationMode?: boolean
   isSelected?: boolean
   selectedMembers?: string[]
@@ -502,6 +503,7 @@ export function FamilyNode({
   isRoot, 
   onSelect, 
   isHighlighted, 
+  highlightedMemberId,
   relationMode, 
   isSelected, 
   selectedMembers = [], 
@@ -535,6 +537,11 @@ export function FamilyNode({
   // 有配偶时，合并到一个卡片中显示（类似D3布局）
   const isMale = member.gender === 'MALE'
   const isDead = !!member.deathDate
+  
+  // 检查是否有任何配偶被高亮，如果是则整个卡片高亮
+  const isAnySpouseHighlighted = spouseList.some(sp => sp.id === highlightedMemberId)
+  const isCardHighlighted = isHighlighted || isAnySpouseHighlighted
+  
   // 使用 isRoot prop 而不是 isFounder 字段
   const isFounder = isRoot === true
   const avatarUrl = member.avatarUrl
@@ -552,8 +559,8 @@ export function FamilyNode({
         "relative rounded-xl overflow-hidden transition-all duration-300",
         "shadow-[0_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.15)]",
         "hover:scale-[1.02] hover:-translate-y-1",
-        isHighlighted
-          ? "bg-gradient-to-br from-yellow-50 via-amber-50 to-yellow-100 ring-2 ring-yellow-400"
+        isCardHighlighted
+          ? "bg-gradient-to-br from-yellow-50 via-amber-50 to-yellow-100 ring-2 ring-yellow-400 shadow-[0_8px_30px_rgba(234,179,8,0.4)]"
           : isFounder || isRoot
             ? "bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50"
             : "bg-gradient-to-br from-slate-50 via-gray-50 to-slate-100"
@@ -562,7 +569,7 @@ export function FamilyNode({
       {/* 顶部装饰条 */}
       <div className={cn(
         "h-1.5",
-        isHighlighted ? "bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-400"
+        isCardHighlighted ? "bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-400"
           : isFounder || isRoot ? "bg-gradient-to-r from-amber-400 via-orange-500 to-amber-400"
           : "bg-gradient-to-r from-slate-400 via-gray-500 to-slate-400"
       )} />
@@ -669,8 +676,8 @@ export function FamilyNode({
               {/* 配偶卡片 */}
               <div 
                 className={cn(
-                  "flex flex-col items-center cursor-pointer min-w-[80px] relative",
-                  relationMode && "hover:ring-2 hover:ring-primary/50 rounded-lg p-1"
+                  "flex flex-col items-center cursor-pointer min-w-[80px] relative p-2 rounded-lg transition-all",
+                  relationMode && "hover:ring-2 hover:ring-primary/50"
                 )}
                 data-member-id={sp.id}
                 onClick={() => onSelect?.(sp)}

components/tree/tree-node.tsx

@@ -86,6 +86,7 @@ export const TreeNode = memo(function TreeNode({
           onSelect={handleSelect} 
           isRoot={isRoot}
           isHighlighted={isHighlighted}
+          highlightedMemberId={highlightedMemberId}
           relationMode={relationMode}
           isSelected={isSelected}
           selectedMembers={selectedMembers}