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

0.5.0.0

Browse Source
This commit is contained in:
freedakgmail
2025-11-30 21:20:51 +08:00
parent a2873bf3c2
commit 025f2b619f
186 changed files with 809 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tree/d3-org-chart-flow.tsx
+193 -89
View File
@@ -46,8 +46,14 @@ interface ChartNode {
avatarUrl: string | null | undefined
spouseName: string
spouseId: string | null
spouseAvatarUrl?: string | null
spouseGender?: string | null
spouseDeathYear?: string | null
spouseBirthYear?: string | null
spouseAgeText?: string
hasChildren: boolean
ageText: string
isFounder?: boolean
}
// 计算年龄
@@ -226,8 +232,18 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
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,
spouseGender: spouses.length > 0 ? (spouses[0].gender === 'MALE' ? '男' : '女') : null,
spouseDeathYear: spouses.length > 0 ? (spouses[0].deathDate ? new Date(spouses[0].deathDate).getFullYear().toString() : '') : null,
spouseBirthYear: spouses.length > 0 ? (spouses[0].birthDate ? new Date(spouses[0].birthDate).getFullYear().toString() : '') : null,
spouseAgeText: spouses.length > 0 ? (() => {
const sp = spouses[0]
const age = calculateAge(sp.birthDate, sp.deathDate)
return age !== null ? (sp.deathDate ? `享年${age}岁` : `${age}岁`) : ''
})() : '',
hasChildren: Object.values(members).some(m => m.fatherId === member.id || m.motherId === member.id),
ageText: ageText
ageText: ageText,
isFounder: member.isFounder === true
})
// 添加子节点到队列
@@ -268,13 +284,13 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
const chart = new OrgChart()
.container(chartRef.current)
.data(data)
.nodeWidth(() => 160)
.nodeWidth((d: any) => d.data.spouseId ? 260 : 160) // 有配偶时加宽，解决重叠和连线问题
.nodeHeight(() => 165)
.childrenMargin(() => 70)
.compactMarginBetween(() => 40)
.compactMarginPair(() => 40)
.neighbourMargin(() => 40)
.siblingsMargin(() => 40)
.compactMarginBetween(() => 50) // 增加间距
.compactMarginPair(() => 50)
.neighbourMargin(() => 50)
.siblingsMargin(() => 50)
.linkUpdate(function (d: any, i: any, arr: any) {
// 中国风连线颜色 - 使用深褐色
d3.select(arr[i])
@@ -288,32 +304,58 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
const node = d.data
const isMale = node.gender === '男'
const isDead = !!node.deathYear
const hasSpouse = !!node.spouseId
const isFounder = node.isFounder === true
// 庄严正式的中国风配色
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 borderColor = isFounder
? '#d97706' // amber-600 更亮的金色
: isDead ? '#78716c' : isMale ? '#92400e' : '#9f1239'
const bgGradient = isFounder
? 'linear-gradient(to bottom, #fef3c7, #fde68a, #fcd34d)' // 更亮的金色渐变
: isDead
? 'linear-gradient(to bottom, #f5f5f4, #e7e5e4)'
: isMale
? 'linear-gradient(to bottom, #fffbeb, #fef3c7, #fffbeb)'
: 'linear-gradient(to bottom, #fff1f2, #fce7f3, #fff1f2)'
const avatarBorder = isFounder
? '#d97706' // amber-600
: isDead ? '#78716c' : isMale ? '#b45309' : '#be185d'
const textColor = isDead ? '#57534e' : '#1c1917'
const subTextColor = isDead ? '#78716c' : '#57534e'
const badgeBg = isDead ? '#57534e' : isMale ? '#92400e' : '#9f1239'
const badgeBg = isFounder
? '#d97706' // amber-600
: isDead ? '#57534e' : isMale ? '#92400e' : '#9f1239'
const badgeText = '#fef3c7'
// 配偶配色
const spIsMale = node.spouseGender === '男'
const spIsDead = !!node.spouseDeathYear
const spAvatarBorder = spIsDead ? '#78716c' : spIsMale ? '#b45309' : '#be185d'
const spTextColor = spIsDead ? '#57534e' : '#1c1917'
// 获取头像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)
// 动态宽度：有配偶时加宽，与 OrgChart 配置保持一致
const width = hasSpouse ? 260 : 160
return `
<div
data-member-id="${node.id}"
style="
position: relative;
width: 150px;
width: ${width}px;
height: 155px;
box-sizing: border-box;
background: ${bgGradient};
@@ -329,13 +371,13 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
<!-- 内边框装饰 -->
<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;
@@ -350,6 +392,7 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
font-family: serif;
letter-spacing: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 10;
">
${node.generation}
</div>
@@ -361,79 +404,108 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
</div>
` : ''}
<!-- 头像和姓名区域 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px;">
<!-- 头像 - 方形庄严风格 -->
<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;" />`
: `<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="
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="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: 6px;
padding: 4px 8px;
background: rgba(120, 113, 108, 0.08);
border: 1px dashed ${borderColor};
font-size: 10px;
color: ${subTextColor};
<div style="display: flex; justify-content: center; gap: 12px; margin-top: 6px;">
<!-- 主成员 -->
<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;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s;
text-align: center;
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;
"
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}
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;"
onclick="event.stopPropagation()"
>
<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 dashed ${spAvatarBorder};
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
position: relative;
">
<!-- 连字符 -->
<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>`
}
</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>
</div>
` : ''}
</div>
</div>
`
})
@@ -500,8 +572,40 @@ const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
}
}, [members, rootId, onMemberClick, avatarCache])
// 监听selectedMembers变化，动态显示/隐藏勾选图标
// 逻辑已移至tree/page.tsx以避免组件重新渲染
// 监听 selectedMembers 变化，通过 DOM 操作更新选中标记
useEffect(() => {
console.log('Selection useEffect triggered, selectedMembers:', selectedMembers, 'isReady:', isReady)
if (!chartRef.current || !isReady) return
// 移除所有现有的选中标记
const existingMarks = chartRef.current.querySelectorAll('.selection-mark')
existingMarks.forEach(mark => mark.remove())
// 重置所有节点的边框样式
const allNodes = chartRef.current.querySelectorAll('[data-member-id]')
allNodes.forEach(node => {
;(node as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)'
})
// 为选中的成员添加选中标记
selectedMembers.forEach(memberId => {
console.log('Marking member as selected:', memberId)
const nodeElement = chartRef.current?.querySelector(`[data-member-id="${memberId}"]`)
console.log('Found node element:', nodeElement)
if (nodeElement) {
// 添加选中边框效果
;(nodeElement as HTMLElement).style.border = '3px solid #2563eb'
;(nodeElement as HTMLElement).style.boxShadow = '0 0 0 3px rgba(37, 99, 235, 0.3), 0 4px 12px rgba(0,0,0,0.12)'
// 添加打钩标记
const checkMark = document.createElement('div')
checkMark.className = 'selection-mark'
checkMark.style.cssText = 'position: absolute; top: 6px; right: 6px; z-index: 20;'
checkMark.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#2563eb" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10" fill="none" stroke="white" stroke-width="2.5"/></svg>`
nodeElement.appendChild(checkMark)
}
})
}, [selectedMembers, isReady])
// 导出PNG
const handleExportPNG = () => {
components/tree/family-node.tsx
+12 -11
View File
@@ -182,6 +182,7 @@ function PersonCard({
// 庄严正式的中国风配色
const isDead = !!member.deathDate
const isMale = member.gender === 'MALE'
const isFounder = member.isFounder === true
const cardContent = (
<div
@@ -195,8 +196,8 @@ function PersonCard({
? "border-blue-600 bg-blue-50 dark:bg-blue-950/50 ring-2 ring-blue-400"
: isHighlighted
? "border-yellow-600 bg-yellow-50/90 dark:bg-yellow-950/50 ring-2 ring-yellow-400 animate-pulse"
: isRoot
? "border-red-800 bg-gradient-to-b from-red-50 via-amber-50/30 to-red-50 dark:from-red-950/40 dark:to-amber-950/20 shadow-xl"
: 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-stone-500 bg-stone-50/50 dark:bg-stone-900/30"
: isDead
@@ -213,7 +214,7 @@ function PersonCard({
"absolute inset-[3px] border pointer-events-none",
isSelected ? "border-blue-400/50"
: isHighlighted ? "border-yellow-500/50"
: isRoot ? "border-red-600/40"
: isFounder || isRoot ? "border-amber-400/50"
: isSpouse ? "border-stone-400/30"
: isDead ? "border-stone-400/40"
: isMale ? "border-amber-600/40"
@@ -223,27 +224,27 @@ function PersonCard({
{/* 四角装饰 - 更精致的角花 */}
<div className={cn(
"absolute top-0 left-0 w-4 h-4 border-t-[3px] border-l-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
<div className={cn(
"absolute top-0 right-0 w-4 h-4 border-t-[3px] border-r-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
<div className={cn(
"absolute bottom-0 left-0 w-4 h-4 border-b-[3px] border-l-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
<div className={cn(
"absolute bottom-0 right-0 w-4 h-4 border-b-[3px] border-r-[3px]",
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isRoot ? "border-red-800" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
isSelected ? "border-blue-600" : isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-stone-500" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-800"
)} />
{/* 世代标签 - 庄严印章风格 */}
<div className={cn(
"absolute -top-3 px-3 py-1 text-[11px] font-serif font-bold tracking-wider",
"border-2 shadow-md",
isRoot
? "bg-red-800 text-amber-100 border-red-900"
isFounder || isRoot
? "bg-amber-500 text-white border-amber-600"
: isDead
? "bg-stone-600 text-stone-100 border-stone-700"
: isMale
@@ -257,8 +258,8 @@ function PersonCard({
<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",
isRoot
? "border-red-700"
isFounder || isRoot
? "border-amber-500"
: isDead
? "border-stone-400"
: isMale