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

0.3.1.4

Browse Source
This commit is contained in:
freedakgmail
2025-11-30 20:11:34 +08:00
parent 0326894b09
commit a2873bf3c2
2 changed files with 207 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/d3-org-chart-flow.tsx
+111 -60
View File
@@ -269,25 +269,38 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
.container(chartRef.current)
.data(data)
.nodeWidth(() => 160)
.nodeHeight(() => 120)
.childrenMargin(() => 50)
.compactMarginBetween(() => 35)
.compactMarginPair(() => 35)
.neighbourMargin(() => 35)
.siblingsMargin(() => 35)
.nodeHeight(() => 165)
.childrenMargin(() => 70)
.compactMarginBetween(() => 40)
.compactMarginPair(() => 40)
.neighbourMargin(() => 40)
.siblingsMargin(() => 40)
.linkUpdate(function (d: any, i: any, arr: any) {
// 加深连线颜色
// 中国风连线颜色 - 使用深褐色
d3.select(arr[i])
.attr('stroke', '#475569')
.attr('stroke-width', 2.5)
.attr('stroke', '#78716c')
.attr('stroke-width', 2)
})
.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>`
})
.nodeContent((d: any) => {
const node = d.data
const color = node.gender === '男' ? '#3b82f6' : '#ec4899'
const bgColor = node.gender === '男' ? '#dbeafe' : '#fce7f3'
const isMale = node.gender === '男'
const isDead = !!node.deathYear
// 庄严正式的中国风配色
const borderColor = isDead ? '#78716c' : isMale ? '#92400e' : '#9f1239'
const bgGradient = isDead
? 'linear-gradient(to bottom, #f5f5f4, #e7e5e4)'
: isMale
? 'linear-gradient(to bottom, #fffbeb, #fef3c7, #fffbeb)'
: 'linear-gradient(to bottom, #fff1f2, #fce7f3, #fff1f2)'
const avatarBorder = isDead ? '#78716c' : isMale ? '#b45309' : '#be185d'
const textColor = isDead ? '#57534e' : '#1c1917'
const subTextColor = isDead ? '#78716c' : '#57534e'
const badgeBg = isDead ? '#57534e' : isMale ? '#92400e' : '#9f1239'
const badgeText = '#fef3c7'
// 获取头像URL
const avatarUrl = node.avatarUrl ? avatarCache.get(node.avatarUrl) : null
@@ -300,87 +313,125 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
data-member-id="${node.id}"
style="
position: relative;
width: 160px;
height: 120px;
width: 150px;
height: 155px;
box-sizing: border-box;
background: ${node.deathYear ? '#fafafa' : 'white'};
border: 2px solid ${color};
border-radius: 10px;
padding: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
background: ${bgGradient};
border: 3px solid ${borderColor};
padding: 14px 10px 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
cursor: pointer;
transition: all 0.3s;
"
onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'"
onmouseout="this.style.boxShadow='0 2px 8px rgba(0,0,0,0.1)'"
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)'"
>
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
<!-- 内边框装饰 -->
<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;
left: 50%;
transform: translateX(-50%);
background: ${badgeBg};
color: ${badgeText};
font-size: 11px;
font-weight: 700;
padding: 3px 12px;
border: 2px solid ${borderColor};
font-family: serif;
letter-spacing: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
">
${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>
` : ''}
<!-- 头像和姓名区域 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px;">
<!-- 头像 - 方形庄严风格 -->
<div style="
width: 40px;
height: 40px;
border-radius: 50%;
background: ${bgColor};
width: 50px;
height: 50px;
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: ${color};
font-weight: bold;
flex-shrink: 0;
overflow: hidden;
border: 1px solid ${color}40;
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="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 1 0-16 0"/></svg>`
: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 24px; height: 24px;"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 1 0-16 0"/></svg>`
: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="${isDead ? '#78716c' : isMale ? '#b45309' : '#be185d'}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 1 0-16 0"/></svg>`
}
</div>
<div style="flex: 1; min-width: 0;">
<div style="font-size: 13px; font-weight: 600; color: ${node.deathYear ? '#9ca3af' : '#1f2937'}; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; position: relative; padding-right: 12px;">
<span>${node.name}</span>
<span style="position: absolute; right: 2px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background-color: ${node.deathYear ? '#9ca3af' : '#22c55e'};"></span>
${isSelected ? `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>` : ''}
</div>
<div style="font-size: 9px; color: #6b7280; padding: 1px 4px; background: #f3f4f6; border-radius: 3px; display: inline-block;">
${node.generation}
</div>
<!-- 姓名 -->
<div style="
font-size: 15px;
font-weight: 700;
color: ${textColor};
font-family: serif;
letter-spacing: 2px;
display: flex;
align-items: center;
gap: 6px;
">
<span>${node.name}</span>
<span style="width: 7px; height: 7px; border-radius: 50%; background-color: ${isDead ? '#78716c' : '#16a34a'}; box-shadow: 0 0 3px ${isDead ? '#78716c' : '#16a34a'};"></span>
</div>
</div>
<div style="font-size: 10px; color: #6b7280; line-height: 1.3;">
${node.birthYear ? `<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1px;">
<span>${node.birthYear}${node.deathYear ? ` - ${node.deathYear}` : ''}</span>
${node.ageText ? `<span style="font-size: 9px; color: #9ca3af;">${node.ageText}</span>` : ''}
</div>` : ''}
${node.birthPlace ? `<div style="margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
${node.birthPlace}
</div>` : ''}
<!-- 生卒年信息 -->
<div style="text-align: center; margin-top: 6px;">
${node.birthYear ? `
<div style="font-size: 11px; color: ${subTextColor}; font-family: monospace; letter-spacing: 1px;">
${node.birthYear}${node.deathYear ? ` — ${node.deathYear}` : ' —'}
</div>
${node.ageText ? `<div style="font-size: 10px; color: ${subTextColor}; font-family: serif; margin-top: 2px;">${node.ageText}</div>` : ''}
` : ''}
</div>
<!-- 配偶信息 -->
${node.spouseName && node.spouseId ? `
<div
class="spouse-area"
data-spouse-id="${node.spouseId}"
style="
margin-top: 4px;
padding: 3px 5px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-size: 9px;
color: #4b5563;
margin-top: 6px;
padding: 4px 8px;
background: rgba(120, 113, 108, 0.08);
border: 1px dashed ${borderColor};
font-size: 10px;
color: ${subTextColor};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s;
text-align: center;
font-family: serif;
letter-spacing: 1px;
"
onmouseover="this.style.borderColor='#3b82f6'; this.style.background='#eff6ff'; this.style.color='#1e40af'"
onmouseout="this.style.borderColor='#e5e7eb'; this.style.background='#f9fafb'; this.style.color='#4b5563'"
onmouseover="this.style.background='rgba(120, 113, 108, 0.15)'; this.style.borderStyle='solid'"
onmouseout="this.style.background='rgba(120, 113, 108, 0.08)'; this.style.borderStyle='dashed'"
>
配偶: ${node.spouseName}
配偶：${node.spouseName}
</div>
` : ''}
</div>