0.0.5.1
This commit is contained in:
freedakgmail
@@ -88,11 +88,10 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
const member = members[currentId]
|
||||
if (!member) continue
|
||||
|
||||
// 获取配偶信息，确保配偶存在于members中
|
||||
let spouse = null
|
||||
if (member.spouseIds?.[0] && members[member.spouseIds[0]]) {
|
||||
spouse = members[member.spouseIds[0]]
|
||||
}
|
||||
// 获取所有配偶信息，确保配偶存在于members中
|
||||
const spouses = member.spouseIds
|
||||
?.map(id => members[id])
|
||||
.filter(Boolean) || []
|
||||
|
||||
// 确定父节点ID - 只有根节点的parentId为null
|
||||
let parentId: string | null = null
|
||||
@@ -135,8 +134,8 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
birthPlace: member.birthPlace || '',
|
||||
gender: member.gender === 'MALE' ? '男' : '女',
|
||||
avatarImageId: member.avatarImageId,
|
||||
spouseName: spouse?.fullName || '',
|
||||
spouseId: spouse?.id || null,
|
||||
spouseName: spouses.length > 0 ? spouses.map(s => s.fullName).join(', ') : '',
|
||||
spouseId: spouses.length > 0 ? spouses[0].id : null,
|
||||
hasChildren: Object.values(members).some(m => m.fatherId === member.id || m.motherId === member.id),
|
||||
ageText: ageText
|
||||
})
|
||||
|
||||
@@ -8,6 +8,7 @@ import { CircleUser, CircleUserRound, Heart } from "lucide-react"
|
||||
interface FamilyNodeProps {
|
||||
member: FamilyMember
|
||||
spouse?: FamilyMember
|
||||
spouses?: FamilyMember[]
|
||||
isRoot?: boolean
|
||||
onSelect?: (member: FamilyMember) => void
|
||||
isHighlighted?: boolean
|
||||
@@ -88,7 +89,7 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relatio
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
member.gender === 'female' ? (
|
||||
member.gender === 'FEMALE' ? (
|
||||
<CircleUserRound className="h-8 w-8 text-pink-400" />
|
||||
) : (
|
||||
<CircleUser className="h-8 w-8 text-blue-400" />
|
||||
@@ -125,17 +126,24 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relatio
|
||||
)
|
||||
}
|
||||
|
||||
export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted, relationMode, isSelected }: FamilyNodeProps) {
|
||||
if (!spouse) {
|
||||
export function FamilyNode({ member, spouse, spouses, isRoot, onSelect, isHighlighted, relationMode, isSelected }: FamilyNodeProps) {
|
||||
// 优先使用 spouses 数组，如果没有则使用单个 spouse
|
||||
const spouseList = spouses || (spouse ? [spouse] : [])
|
||||
|
||||
if (spouseList.length === 0) {
|
||||
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} relationMode={relationMode} isSelected={isSelected} />
|
||||
<Heart className="h-4 w-4 text-red-400 flex-shrink-0" />
|
||||
<PersonCard member={spouse} isSpouse={true} onSelect={onSelect} relationMode={relationMode} />
|
||||
{spouseList.map((spouseMember, index) => (
|
||||
<div key={spouseMember.id} className="flex items-center gap-2">
|
||||
<Heart className="h-4 w-4 text-red-400 flex-shrink-0" />
|
||||
<PersonCard member={spouseMember} isSpouse={true} onSelect={onSelect} relationMode={relationMode} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -139,10 +139,10 @@ export function TreeLayout({
|
||||
|
||||
const hasChildren = member.childrenIds && member.childrenIds.length > 0
|
||||
|
||||
// 获取配偶（取第一个配偶）
|
||||
const spouse = member.spouseIds && member.spouseIds.length > 0
|
||||
? getMember(member.spouseIds[0])
|
||||
: undefined
|
||||
// 获取所有配偶
|
||||
const spouses = member.spouseIds && member.spouseIds.length > 0
|
||||
? member.spouseIds.map(id => getMember(id)).filter(Boolean) as FamilyMember[]
|
||||
: []
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
@@ -159,7 +159,7 @@ export function TreeLayout({
|
||||
>
|
||||
<FamilyNode
|
||||
member={member}
|
||||
spouse={spouse}
|
||||
spouses={spouses}
|
||||
onSelect={handleNodeClick}
|
||||
isRoot={isRoot}
|
||||
isHighlighted={member.id === highlightedMemberId}
|
||||
@@ -177,9 +177,27 @@ export function TreeLayout({
|
||||
gap: `${HORIZONTAL_GAP}px`
|
||||
}}
|
||||
>
|
||||
{member.childrenIds.map((childId) => (
|
||||
<TreeNode key={childId} memberId={childId} />
|
||||
))}
|
||||
{(() => {
|
||||
// 对子节点进行排序：始祖排最左边，其他按出生日期排序
|
||||
const sortedChildren = [...member.childrenIds].sort((aId, bId) => {
|
||||
const a = getMember(aId)
|
||||
const b = getMember(bId)
|
||||
if (!a || !b) return 0
|
||||
|
||||
// 始祖永远排最左边
|
||||
const aIsFounder = a.tags?.includes('始祖') || a.generation === 1
|
||||
const bIsFounder = b.tags?.includes('始祖') || b.generation === 1
|
||||
if (aIsFounder && !bIsFounder) return -1
|
||||
if (!aIsFounder && bIsFounder) return 1
|
||||
|
||||
// 其他按出生日期排序
|
||||
return (a.birthDate || "").localeCompare(b.birthDate || "")
|
||||
})
|
||||
|
||||
return sortedChildren.map((childId) => (
|
||||
<TreeNode key={childId} memberId={childId} />
|
||||
))
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -205,13 +223,13 @@ export function TreeLayout({
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="absolute bg-foreground/25"
|
||||
className="absolute bg-black"
|
||||
style={{
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
transform: isHorizontal ? 'scaleY(0.3)' : 'scaleX(0.3)',
|
||||
transform: isHorizontal ? 'scaleY(0.5)' : 'scaleX(0.5)',
|
||||
transformOrigin: 'top left',
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user