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

0.6.0.3

Browse Source
This commit is contained in:
freedakgmail
2025-12-10 11:13:16 +08:00
parent e9b1641509
commit 77df6a0e74
143 changed files with 857 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/d3-org-chart-flow.tsx
+285 -150
View File
@@ -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>
`