0.6.0.3
This commit is contained in:
freedakgmail
@@ -35,6 +35,16 @@ export interface D3OrgChartRef {
|
||||
fitView: () => void
|
||||
}
|
||||
|
||||
interface SpouseData {
|
||||
id: string
|
||||
name: string
|
||||
avatarUrl: string | null | undefined
|
||||
gender: string
|
||||
birthYear: string
|
||||
deathYear: string
|
||||
ageText: string
|
||||
}
|
||||
|
||||
interface ChartNode {
|
||||
id: string
|
||||
parentId: string | null
|
||||
@@ -52,6 +62,9 @@ interface ChartNode {
|
||||
spouseDeathYear?: string | null
|
||||
spouseBirthYear?: string | null
|
||||
spouseAgeText?: string
|
||||
// 多配偶支持
|
||||
spouses: SpouseData[]
|
||||
spouseCount: number
|
||||
hasChildren: boolean
|
||||
ageText: string
|
||||
isFounder?: boolean
|
||||
@@ -223,6 +236,20 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
: `${age}岁`
|
||||
: ''
|
||||
|
||||
// 处理多配偶数据
|
||||
const spousesData = spouses.map(sp => ({
|
||||
id: sp.id,
|
||||
name: sp.fullName,
|
||||
avatarUrl: sp.avatarUrl,
|
||||
gender: sp.gender === 'MALE' ? '男' : '女',
|
||||
birthYear: sp.birthDate ? new Date(sp.birthDate).getFullYear().toString() : '',
|
||||
deathYear: sp.deathDate ? new Date(sp.deathDate).getFullYear().toString() : '',
|
||||
ageText: (() => {
|
||||
const age = calculateAge(sp.birthDate, sp.deathDate)
|
||||
return age !== null ? (sp.deathDate ? `享年${age}岁` : `${age}岁`) : ''
|
||||
})()
|
||||
}))
|
||||
|
||||
chartNodes.push({
|
||||
id: member.id,
|
||||
parentId: parentId,
|
||||
@@ -233,6 +260,7 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
birthPlace: member.birthPlace || '',
|
||||
gender: member.gender === 'MALE' ? '男' : '女',
|
||||
avatarUrl: member.avatarUrl,
|
||||
// 保留旧字段兼容
|
||||
spouseName: spouses.length > 0 ? spouses.map(s => s.fullName).join(', ') : '',
|
||||
spouseId: spouses.length > 0 ? spouses[0].id : null,
|
||||
spouseAvatarUrl: spouses.length > 0 ? spouses[0].avatarUrl : null,
|
||||
@@ -244,6 +272,9 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
const age = calculateAge(sp.birthDate, sp.deathDate)
|
||||
return age !== null ? (sp.deathDate ? `享年${age}岁` : `${age}岁`) : ''
|
||||
})() : '',
|
||||
// 新增多配偶数组
|
||||
spouses: spousesData,
|
||||
spouseCount: spouses.length,
|
||||
hasChildren: Object.values(members).some(m => m.fatherId === member.id || m.motherId === member.id),
|
||||
ageText: ageText,
|
||||
isFounder: member.isFounder === true
|
||||
@@ -287,21 +318,43 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
const chart = new OrgChart()
|
||||
.container(chartRef.current)
|
||||
.data(data)
|
||||
.nodeWidth((d: any) => d.data.spouseId ? 260 : 160) // 有配偶时加宽，解决重叠和连线问题
|
||||
.nodeHeight(() => 165)
|
||||
.nodeWidth((d: any) => {
|
||||
const spouseCount = d.data.spouseCount || 0
|
||||
return spouseCount === 0 ? 170 : spouseCount === 1 ? 300 : 170 + spouseCount * 110
|
||||
}) // 根据配偶数量动态调整宽度
|
||||
.nodeHeight(() => 175)
|
||||
.childrenMargin(() => 70)
|
||||
.compactMarginBetween(() => 50) // 增加间距
|
||||
.compactMarginPair(() => 50)
|
||||
.neighbourMargin(() => 50)
|
||||
.siblingsMargin(() => 50)
|
||||
.linkUpdate(function (d: any, i: any, arr: any) {
|
||||
// 中国风连线颜色 - 使用琥珀色
|
||||
// 现代风格连线 - 使用柔和的灰蓝色
|
||||
d3.select(arr[i])
|
||||
.attr('stroke', '#b45309')
|
||||
.attr('stroke', '#94a3b8')
|
||||
.attr('stroke-width', 2)
|
||||
.attr('stroke-dasharray', '')
|
||||
.style('opacity', 0.6)
|
||||
})
|
||||
.buttonContent(({ node }: any) => {
|
||||
return `<div style="color:#716E7B;border-radius:5px;padding:4px;font-size:10px;margin:auto auto;background-color:white;border: 1px solid #E4E2E9"> <span style="font-size:9px">${node.children ? `<i class="fas fa-angle-up"></i>` : `<i class="fas fa-angle-down"></i>`}</span> ${node.data._directSubordinates || 0} </div>`
|
||||
return `<div style="
|
||||
color: #64748b;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin: auto;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: all 0.2s;
|
||||
" onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.12)'" onmouseout="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.08)'">
|
||||
<span style="font-size: 10px;">${node.children ? '▲' : '▼'}</span>
|
||||
<span>${node.data._directSubordinates || 0}</span>
|
||||
</div>`
|
||||
})
|
||||
.nodeContent((d: any) => {
|
||||
const node = d.data
|
||||
@@ -310,49 +363,53 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
const hasSpouse = !!node.spouseId
|
||||
const isFounder = node.isFounder === true
|
||||
|
||||
// 庄严正式的中国风配色 - 主成员
|
||||
// 始祖使用尊贵的金色配色，已故成员使用灰色
|
||||
const borderColor = isFounder
|
||||
? '#d97706' // amber-600 更亮的金色
|
||||
: isDead ? '#78716c' : isMale ? '#92400e' : '#be123c' // 已故用灰色
|
||||
// 现代简约风格配色
|
||||
const topBarGradient = isFounder
|
||||
? 'linear-gradient(to right, #f59e0b, #ea580c, #f59e0b)'
|
||||
: isDead
|
||||
? 'linear-gradient(to right, #78716c, #57534e, #78716c)'
|
||||
: isMale
|
||||
? 'linear-gradient(to right, #38bdf8, #3b82f6, #38bdf8)'
|
||||
: 'linear-gradient(to right, #fb7185, #ec4899, #fb7185)'
|
||||
|
||||
const bgGradient = isFounder
|
||||
? 'linear-gradient(to bottom, #fef3c7, #fde68a, #fcd34d)' // 更亮的金色渐变
|
||||
? 'linear-gradient(135deg, #fffbeb, #fef3c7, #fef9c3)'
|
||||
: isDead
|
||||
? 'linear-gradient(to bottom, #f5f5f4, #e7e5e4)' // 已故用灰色渐变
|
||||
? 'linear-gradient(135deg, #f5f5f4, #e7e5e4, #f5f5f4)'
|
||||
: isMale
|
||||
? 'linear-gradient(to bottom, #fffbeb, #fef3c7, #fffbeb)'
|
||||
: 'linear-gradient(to bottom, #fff1f2, #fce7f3, #fff1f2)'
|
||||
? 'linear-gradient(135deg, #f0f9ff, #e0f2fe, #ecfeff)'
|
||||
: 'linear-gradient(135deg, #fff1f2, #fce7f3, #fdf2f8)'
|
||||
|
||||
const avatarBorder = isFounder
|
||||
? '#d97706' // amber-600
|
||||
: isDead ? '#78716c' : isMale ? '#b45309' : '#be185d' // 已故用灰色
|
||||
|
||||
const textColor = isDead ? '#57534e' : '#1c1917' // 已故用灰色文字
|
||||
const subTextColor = isDead ? '#78716c' : '#57534e' // 已故用灰色副文字
|
||||
? '#f59e0b'
|
||||
: isDead ? '#a8a29e' : isMale ? '#38bdf8' : '#fb7185'
|
||||
|
||||
const badgeBg = isFounder
|
||||
? '#d97706' // amber-600
|
||||
: isDead ? '#57534e' : isMale ? '#92400e' : '#be123c' // 已故用灰色
|
||||
const avatarGlow = isFounder
|
||||
? 'rgba(245, 158, 11, 0.4)'
|
||||
: isDead ? 'rgba(168, 162, 158, 0.3)' : isMale ? 'rgba(56, 189, 248, 0.4)' : 'rgba(251, 113, 133, 0.4)'
|
||||
|
||||
const badgeText = '#fef3c7'
|
||||
const textColor = '#000000' // 纯黑色文字
|
||||
|
||||
// 配偶配色
|
||||
const spIsMale = node.spouseGender === '男'
|
||||
const spIsDead = !!node.spouseDeathYear
|
||||
const spAvatarBorder = spIsDead ? '#78716c' : spIsMale ? '#b45309' : '#be185d' // 已故用灰色
|
||||
const spTextColor = spIsDead ? '#57534e' : '#1c1917' // 已故用灰色
|
||||
const badgeGradient = isFounder
|
||||
? 'linear-gradient(to right, #f59e0b, #ea580c)'
|
||||
: isDead
|
||||
? 'linear-gradient(to right, #78716c, #57534e)'
|
||||
: isMale
|
||||
? 'linear-gradient(to right, #38bdf8, #3b82f6)'
|
||||
: 'linear-gradient(to right, #fb7185, #ec4899)'
|
||||
|
||||
// 获取头像URL
|
||||
const avatarUrl = node.avatarUrl ? avatarCache.get(node.avatarUrl) : null
|
||||
const spAvatarUrl = node.spouseAvatarUrl ? avatarCache.get(node.spouseAvatarUrl) : null
|
||||
|
||||
// 检查是否被选中
|
||||
const isSelected = selectedMembers.includes(node.id)
|
||||
const isSpouseSelected = node.spouseId && selectedMembers.includes(node.spouseId)
|
||||
|
||||
// 动态宽度：有配偶时加宽，与 OrgChart 配置保持一致
|
||||
const width = hasSpouse ? 260 : 160
|
||||
// 多配偶数据
|
||||
const spousesArray = node.spouses || []
|
||||
const spouseCount = spousesArray.length
|
||||
|
||||
// 动态宽度：根据配偶数量调整
|
||||
const width = spouseCount === 0 ? 150 : spouseCount === 1 ? 280 : 150 + spouseCount * 100
|
||||
|
||||
return `
|
||||
<div
|
||||
@@ -360,155 +417,233 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
|
||||
style="
|
||||
position: relative;
|
||||
width: ${width}px;
|
||||
height: 155px;
|
||||
height: 160px;
|
||||
box-sizing: border-box;
|
||||
background: ${bgGradient};
|
||||
border: 3px solid ${borderColor};
|
||||
padding: 14px 10px 10px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||||
border-radius: 16px;
|
||||
padding: 16px 12px 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
"
|
||||
onmouseover="this.style.boxShadow='0 6px 20px rgba(0,0,0,0.2)'; this.style.transform='scale(1.02)'"
|
||||
onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.12)'; this.style.transform='scale(1)'"
|
||||
onmouseover="this.style.boxShadow='0 12px 40px rgba(0,0,0,0.15)'; this.style.transform='translateY(-4px) scale(1.02)'"
|
||||
onmouseout="this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'; this.style.transform='translateY(0) scale(1)'"
|
||||
>
|
||||
<!-- 内边框装饰 -->
|
||||
<div style="position: absolute; inset: 3px; border: 1px solid ${borderColor}40; pointer-events: none;"></div>
|
||||
|
||||
<!-- 四角装饰 -->
|
||||
<div style="position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-top: 3px solid ${borderColor}; border-left: 3px solid ${borderColor};"></div>
|
||||
<div style="position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-top: 3px solid ${borderColor}; border-right: 3px solid ${borderColor};"></div>
|
||||
<div style="position: absolute; bottom: 0; left: 0; width: 12px; height: 12px; border-bottom: 3px solid ${borderColor}; border-left: 3px solid ${borderColor};"></div>
|
||||
<div style="position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-bottom: 3px solid ${borderColor}; border-right: 3px solid ${borderColor};"></div>
|
||||
|
||||
<!-- 世代标签 -->
|
||||
<!-- 顶部装饰条 -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 4px;
|
||||
background: ${topBarGradient};
|
||||
border-radius: 0 0 4px 4px;
|
||||
"></div>
|
||||
|
||||
<!-- 世代标签 - 胶囊风格 -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: ${badgeBg};
|
||||
color: ${badgeText};
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: ${badgeGradient};
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
padding: 3px 12px;
|
||||
border: 2px solid ${borderColor};
|
||||
font-family: serif;
|
||||
letter-spacing: 2px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
z-index: 10;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
${node.generation}
|
||||
</div>
|
||||
|
||||
<!-- 选中标记 -->
|
||||
${isSelected ? `
|
||||
<div style="position: absolute; top: 6px; right: 6px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<div style="position: absolute; top: 8px; left: 8px; z-index: 20;">
|
||||
<div style="width: 20px; height: 20px; border-radius: 50%; background: #3b82f6; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(59,130,246,0.4);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 12px; margin-top: 6px;">
|
||||
<div style="display: flex; justify-content: center; gap: 16px; margin-top: 8px;">
|
||||
<!-- 主成员 -->
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1;">
|
||||
<div style="
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 2px solid ${avatarBorder};
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||||
">
|
||||
${avatarUrl
|
||||
? `<img src="${avatarUrl}" alt="${node.name}" style="width: 100%; height: 100%; object-fit: cover;" />`
|
||||
: node.gender === '女'
|
||||
? `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="${isDead ? '#78716c' : '#be185d'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0"/><circle cx="12" cy="10" r="4"/><circle cx="12" cy="12" r="10"/></svg>`
|
||||
: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="${isDead ? '#78716c' : '#b45309'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>`
|
||||
}
|
||||
</div>
|
||||
<div style="
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: ${textColor};
|
||||
font-family: serif;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
">
|
||||
<span>${node.name}</span>
|
||||
<span style="width: 6px; height: 6px; border-radius: 50%; background-color: ${isDead ? '#78716c' : '#16a34a'}; box-shadow: 0 0 3px ${isDead ? '#78716c' : '#16a34a'};"></span>
|
||||
</div>
|
||||
<!-- 主成员生卒信息 -->
|
||||
<div style="text-align: center; margin-top: -2px;">
|
||||
${node.birthYear ? `
|
||||
<div style="font-size: 11px; color: #000000; font-family: monospace; letter-spacing: 0.5px; font-weight: 600;">
|
||||
${node.birthYear}${node.deathYear ? ` — ${node.deathYear}` : ' —'}
|
||||
</div>
|
||||
${node.ageText ? `<div style="font-size: 10px; color: #000000; font-family: serif; margin-top: 1px; font-weight: 600;">${node.ageText}</div>` : ''}
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配偶 -->
|
||||
${hasSpouse ? `
|
||||
<div
|
||||
class="spouse-area"
|
||||
data-spouse-id="${node.spouseId}"
|
||||
style="display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; cursor: pointer; position: relative;"
|
||||
onclick="event.stopPropagation(); window.d3ChartSpouseClick && window.d3ChartSpouseClick(event, '${node.spouseId}')"
|
||||
>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1;">
|
||||
<!-- 头像带光晕 -->
|
||||
<div style="position: relative;">
|
||||
<div style="
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: 50%;
|
||||
background: ${avatarGlow};
|
||||
filter: blur(8px);
|
||||
"></div>
|
||||
<div style="
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 2px dashed ${spAvatarBorder};
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
border: 3px solid ${avatarBorder};
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 0 0 2px white;
|
||||
">
|
||||
<!-- 连字符 -->
|
||||
<div style="position: absolute; left: -14px; top: 23px; width: 10px; height: 2px; background: ${borderColor};"></div>
|
||||
|
||||
${spAvatarUrl
|
||||
? `<img src="${spAvatarUrl}" alt="${node.spouseName}" style="width: 100%; height: 100%; object-fit: cover;" />`
|
||||
: spIsMale
|
||||
? `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="${spIsDead ? '#78716c' : '#b45309'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>`
|
||||
: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="${spIsDead ? '#78716c' : '#be185d'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0"/><circle cx="12" cy="10" r="4"/><circle cx="12" cy="12" r="10"/></svg>`
|
||||
${avatarUrl
|
||||
? `<img src="${avatarUrl}" alt="${node.name}" style="width: 100%; height: 100%; object-fit: cover;" />`
|
||||
: node.gender === '女'
|
||||
? `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="${isDead ? '#a8a29e' : '#ec4899'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0"/><circle cx="12" cy="10" r="4"/><circle cx="12" cy="12" r="10"/></svg>`
|
||||
: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="${isDead ? '#a8a29e' : '#3b82f6'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>`
|
||||
}
|
||||
</div>
|
||||
<!-- 状态指示器 -->
|
||||
<div style="
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: ${spTextColor};
|
||||
font-family: serif;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
">
|
||||
<span>${node.spouseName}</span>
|
||||
<span style="width: 6px; height: 6px; border-radius: 50%; background-color: ${spIsDead ? '#78716c' : '#16a34a'}; box-shadow: 0 0 3px ${spIsDead ? '#78716c' : '#16a34a'};"></span>
|
||||
</div>
|
||||
<!-- 配偶生卒信息 -->
|
||||
<div style="text-align: center; margin-top: -2px;">
|
||||
${node.spouseBirthYear ? `
|
||||
<div style="font-size: 11px; color: #000000; font-family: monospace; letter-spacing: 0.5px; font-weight: 600;">
|
||||
${node.spouseBirthYear}${node.spouseDeathYear ? ` — ${node.spouseDeathYear}` : ' —'}
|
||||
</div>
|
||||
${node.spouseAgeText ? `<div style="font-size: 10px; color: #000000; font-family: serif; margin-top: 1px; font-weight: 600;">${node.spouseAgeText}</div>` : ''}
|
||||
` : ''}
|
||||
</div>
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: ${isDead ? '#a8a29e' : '#22c55e'};
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
"></div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- 姓名 -->
|
||||
<div style="
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${textColor};
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
font-family: serif;
|
||||
">
|
||||
${node.name}
|
||||
</div>
|
||||
|
||||
<!-- 生卒信息 -->
|
||||
<div style="text-align: center;">
|
||||
${node.birthYear ? `
|
||||
<div style="
|
||||
font-size: 10px;
|
||||
color: #000000;
|
||||
font-family: serif;
|
||||
background: ${isDead ? 'rgba(168,162,158,0.3)' : 'rgba(107,114,128,0.2)'};
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
">
|
||||
${node.birthYear}${node.deathYear ? ` — ${node.deathYear}` : ' —'}
|
||||
</div>
|
||||
${node.ageText ? `<div style="font-size: 10px; color: #000000; margin-top: 2px; font-weight: 500; font-family: serif;">${node.ageText}</div>` : ''}
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配偶们 -->
|
||||
${spousesArray.map((sp: any, idx: number) => {
|
||||
const spIsMale = sp.gender === '男'
|
||||
const spIsDead = !!sp.deathYear
|
||||
const spAvatarBorder = spIsDead ? '#a8a29e' : spIsMale ? '#38bdf8' : '#fb7185'
|
||||
const spAvatarGlow = spIsDead ? 'rgba(168, 162, 158, 0.3)' : spIsMale ? 'rgba(56, 189, 248, 0.4)' : 'rgba(251, 113, 133, 0.4)'
|
||||
const spAvatarUrl = sp.avatarUrl ? avatarCache.get(sp.avatarUrl) : null
|
||||
|
||||
return `
|
||||
<div
|
||||
class="spouse-area"
|
||||
data-spouse-id="${sp.id}"
|
||||
style="display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative; min-width: 80px;"
|
||||
onclick="event.stopPropagation(); window.d3ChartSpouseClick && window.d3ChartSpouseClick(event, '${sp.id}')"
|
||||
>
|
||||
${idx === 0 ? `
|
||||
<!-- 连接线 -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 22px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, ${avatarBorder}, ${spAvatarBorder});
|
||||
border-radius: 1px;
|
||||
"></div>
|
||||
` : ''}
|
||||
|
||||
<!-- 头像带光晕 -->
|
||||
<div style="position: relative;">
|
||||
<div style="
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: 50%;
|
||||
background: ${spAvatarGlow};
|
||||
filter: blur(6px);
|
||||
"></div>
|
||||
<div style="
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 2px solid ${spAvatarBorder};
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
">
|
||||
${spAvatarUrl
|
||||
? `<img src="${spAvatarUrl}" alt="${sp.name}" style="width: 100%; height: 100%; object-fit: cover;" />`
|
||||
: spIsMale
|
||||
? `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${spIsDead ? '#a8a29e' : '#3b82f6'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>`
|
||||
: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${spIsDead ? '#a8a29e' : '#ec4899'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20a6 6 0 0 0-12 0"/><circle cx="12" cy="10" r="4"/><circle cx="12" cy="12" r="10"/></svg>`
|
||||
}
|
||||
</div>
|
||||
<!-- 状态指示器 -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: ${spIsDead ? '#a8a29e' : '#22c55e'};
|
||||
border: 2px solid white;
|
||||
"></div>
|
||||
</div>
|
||||
|
||||
<!-- 姓名 -->
|
||||
<div style="
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
font-family: serif;
|
||||
">
|
||||
${sp.name}
|
||||
</div>
|
||||
|
||||
<!-- 生卒信息 -->
|
||||
${sp.birthYear ? `
|
||||
<div style="
|
||||
font-size: 9px;
|
||||
color: #000000;
|
||||
font-family: serif;
|
||||
background: ${spIsDead ? 'rgba(168,162,158,0.3)' : 'rgba(107,114,128,0.2)'};
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
">
|
||||
${sp.birthYear}${sp.deathYear ? `-${sp.deathYear}` : '-'}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
+110
-104
@@ -199,142 +199,141 @@ function PersonCard({
|
||||
<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",
|
||||
// 根据状态设置样式 - 中国风配色
|
||||
"family-node-card relative flex flex-col items-center p-4 transition-all duration-300 cursor-pointer w-[140px]",
|
||||
// 现代简约中国风 - 圆角卡片
|
||||
"rounded-xl",
|
||||
"hover:scale-[1.03] hover:-translate-y-1",
|
||||
// 柔和阴影效果
|
||||
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-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-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"
|
||||
? "shadow-[0_8px_30px_rgba(234,179,8,0.4)] ring-2 ring-yellow-400"
|
||||
: "shadow-[0_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.15)]",
|
||||
// 根据状态设置背景 - 更柔和的渐变
|
||||
isHighlighted
|
||||
? "bg-gradient-to-br from-yellow-50 via-amber-50 to-yellow-100 dark:from-yellow-950/60 dark:to-amber-900/40"
|
||||
: isFounder || isRoot
|
||||
? "bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 dark:from-amber-950/50 dark:to-orange-900/30"
|
||||
: isSpouse
|
||||
? "bg-gradient-to-br from-rose-50/80 via-pink-50/60 to-rose-50/80 dark:from-rose-950/30 dark:to-pink-900/20"
|
||||
: isDead
|
||||
? "bg-gradient-to-br from-stone-100 via-gray-50 to-stone-100 dark:from-stone-900/50 dark:to-gray-800/30"
|
||||
: isMale
|
||||
? "bg-gradient-to-br from-sky-50 via-blue-50/50 to-indigo-50/30 dark:from-sky-950/40 dark:to-blue-900/20"
|
||||
: "bg-gradient-to-br from-rose-50 via-pink-50/50 to-fuchsia-50/30 dark:from-rose-950/40 dark:to-pink-900/20",
|
||||
relationMode && "hover:ring-2 hover:ring-primary/50"
|
||||
)}
|
||||
onClick={() => onSelect?.(member)}
|
||||
>
|
||||
{/* 内边框装饰 */}
|
||||
{/* 顶部装饰条 */}
|
||||
<div className={cn(
|
||||
"absolute inset-[3px] border pointer-events-none",
|
||||
isHighlighted ? "border-yellow-500/50"
|
||||
: isFounder || isRoot ? "border-amber-400/50"
|
||||
: isSpouse ? "border-amber-300/40"
|
||||
: isDead ? "border-stone-400/40"
|
||||
: isMale ? "border-amber-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-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-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-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-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
|
||||
"absolute top-0 left-4 right-4 h-1 rounded-b-full",
|
||||
isHighlighted ? "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"
|
||||
: isSpouse ? "bg-gradient-to-r from-rose-300 via-pink-400 to-rose-300"
|
||||
: isDead ? "bg-gradient-to-r from-stone-400 via-gray-500 to-stone-400"
|
||||
: isMale ? "bg-gradient-to-r from-sky-400 via-blue-500 to-sky-400"
|
||||
: "bg-gradient-to-r from-rose-400 via-pink-500 to-rose-400"
|
||||
)} />
|
||||
|
||||
{/* 选中打钩标记 */}
|
||||
{isSelected && (
|
||||
<div className="absolute top-1 left-1 z-20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#2563eb" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10" fill="none" stroke="white" strokeWidth="2.5"/></svg>
|
||||
<div className="absolute top-2 left-2 z-20">
|
||||
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 世代标签 - 庄严印章风格 */}
|
||||
{/* 世代标签 - 现代胶囊风格 */}
|
||||
<div className={cn(
|
||||
"absolute -top-3 px-3 py-1 text-[11px] font-serif font-bold tracking-wider",
|
||||
"border-2 shadow-md",
|
||||
"absolute -top-2.5 px-3 py-0.5 text-[10px] font-medium tracking-wider rounded-full",
|
||||
"shadow-md backdrop-blur-sm",
|
||||
isFounder || isRoot
|
||||
? "bg-amber-500 text-white border-amber-600"
|
||||
? "bg-gradient-to-r from-amber-500 to-orange-500 text-white"
|
||||
: isDead
|
||||
? "bg-stone-600 text-stone-100 border-stone-700"
|
||||
? "bg-gradient-to-r from-stone-500 to-gray-500 text-white"
|
||||
: isMale
|
||||
? "bg-amber-800 text-amber-100 border-amber-900"
|
||||
: "bg-rose-700 text-rose-100 border-rose-800"
|
||||
? "bg-gradient-to-r from-sky-500 to-blue-500 text-white"
|
||||
: "bg-gradient-to-r from-rose-500 to-pink-500 text-white"
|
||||
)}>
|
||||
{member.generation}世
|
||||
第{member.generation}世
|
||||
</div>
|
||||
|
||||
{/* 头像 - 方形带庄严边框 */}
|
||||
<div className={cn(
|
||||
"h-14 w-14 flex items-center justify-center overflow-hidden mt-2",
|
||||
"border-2 shadow-inner bg-white/80 dark:bg-black/20",
|
||||
isFounder || isRoot
|
||||
? "border-amber-500"
|
||||
: isDead
|
||||
? "border-stone-400"
|
||||
: isMale
|
||||
? "border-amber-700"
|
||||
: "border-rose-600"
|
||||
)}>
|
||||
{avatarBlobUrl ? (
|
||||
<img
|
||||
src={avatarBlobUrl}
|
||||
alt={member.fullName}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
member.gender === 'FEMALE' ? (
|
||||
<CircleUserRound className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-rose-600")} />
|
||||
{/* 头像 - 圆形带光晕效果 */}
|
||||
<div className="relative mt-3">
|
||||
{/* 光晕背景 */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 rounded-full blur-md opacity-40",
|
||||
isFounder || isRoot ? "bg-amber-400"
|
||||
: isDead ? "bg-stone-400"
|
||||
: isMale ? "bg-sky-400"
|
||||
: "bg-rose-400"
|
||||
)} />
|
||||
<div className={cn(
|
||||
"relative h-14 w-14 rounded-full flex items-center justify-center overflow-hidden",
|
||||
"border-[3px] shadow-lg bg-white dark:bg-gray-800",
|
||||
"ring-2 ring-white dark:ring-gray-700",
|
||||
isFounder || isRoot
|
||||
? "border-amber-400"
|
||||
: isDead
|
||||
? "border-stone-400"
|
||||
: isMale
|
||||
? "border-sky-400"
|
||||
: "border-rose-400"
|
||||
)}>
|
||||
{avatarBlobUrl ? (
|
||||
<img
|
||||
src={avatarBlobUrl}
|
||||
alt={member.fullName}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<CircleUser className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-amber-700")} />
|
||||
)
|
||||
)}
|
||||
member.gender === 'FEMALE' ? (
|
||||
<CircleUserRound className={cn("h-8 w-8", isDead ? "text-stone-400" : "text-rose-500")} />
|
||||
) : (
|
||||
<CircleUser className={cn("h-8 w-8", isDead ? "text-stone-400" : "text-sky-500")} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
{/* 在线/已故状态指示器 */}
|
||||
<div className={cn(
|
||||
"absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800",
|
||||
isDead ? "bg-stone-400" : "bg-emerald-500"
|
||||
)} />
|
||||
</div>
|
||||
|
||||
{/* 姓名和信息 */}
|
||||
<div className="text-center w-full mt-2 space-y-0.5">
|
||||
<div className={cn(
|
||||
"font-serif font-bold leading-tight flex items-center justify-center gap-1 text-base tracking-wide",
|
||||
"text-black"
|
||||
)}>
|
||||
<div className="text-center w-full mt-3 space-y-1">
|
||||
<div className="font-semibold leading-tight text-[15px] tracking-wide text-black dark:text-white">
|
||||
<MemberNameWithStatus
|
||||
name={`${member.surname}${member.givenName}`}
|
||||
isDead={isDead}
|
||||
/>
|
||||
</div>
|
||||
{member.courtesyName && (
|
||||
<div className={cn(
|
||||
"text-[11px] font-serif tracking-wide",
|
||||
"text-black"
|
||||
)}>
|
||||
<div className="text-[11px] tracking-wide text-black dark:text-white">
|
||||
字 {member.courtesyName}
|
||||
</div>
|
||||
)}
|
||||
{lifeSpan && (
|
||||
<div className={cn(
|
||||
"text-[10px] font-mono tracking-wider mt-1",
|
||||
"text-black font-semibold"
|
||||
"text-[10px] font-mono tracking-wider px-2 py-0.5 rounded-full inline-block text-black dark:text-white",
|
||||
isDead
|
||||
? "bg-stone-200 dark:bg-stone-700"
|
||||
: "bg-gray-200 dark:bg-gray-700"
|
||||
)}>
|
||||
{lifeSpan}
|
||||
</div>
|
||||
)}
|
||||
{ageText && (
|
||||
<div className={cn(
|
||||
"text-[10px] font-serif",
|
||||
"text-black font-semibold"
|
||||
)}>
|
||||
<div className="text-[10px] text-black dark:text-white">
|
||||
{ageText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 折叠/展开按钮 */}
|
||||
{/* 折叠/展开按钮 - 更现代的样式 */}
|
||||
{hasChildren && onToggleCollapse && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
@@ -344,22 +343,29 @@ function PersonCard({
|
||||
className={cn(
|
||||
"absolute -bottom-3 left-1/2 -translate-x-1/2 z-20",
|
||||
"w-6 h-6 rounded-full flex items-center justify-center",
|
||||
"bg-white border-2 shadow-md transition-all hover:scale-110",
|
||||
"bg-white dark:bg-gray-800 shadow-lg transition-all duration-200",
|
||||
"hover:scale-110 active:scale-95",
|
||||
"border border-gray-200 dark:border-gray-700",
|
||||
isCollapsed
|
||||
? "border-amber-500 text-amber-600"
|
||||
: "border-amber-400 text-amber-500"
|
||||
? "text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/30"
|
||||
: "text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
||||
)}
|
||||
title={isCollapsed ? "展开子孙" : "折叠子孙"}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={cn("transition-transform duration-200", isCollapsed ? "rotate-180" : "")}
|
||||
>
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -60,9 +60,10 @@ export const TreeNode = memo(function TreeNode({
|
||||
onAddRelation(member, type)
|
||||
}, [member, onAddRelation])
|
||||
|
||||
const handleSelect = useCallback(() => {
|
||||
onNodeClick(member)
|
||||
}, [member, onNodeClick])
|
||||
// 处理成员点击，接收被点击的成员（可能是主成员或配偶）
|
||||
const handleSelect = useCallback((clickedMember: FamilyMember) => {
|
||||
onNodeClick(clickedMember)
|
||||
}, [onNodeClick])
|
||||
|
||||
const handleRef = useCallback((el: HTMLDivElement | null) => {
|
||||
onNodeRef(member.id, el)
|
||||
|
||||
Reference in New Issue
Block a user