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

0.5.0.2

Browse Source
This commit is contained in:
freedakgmail
2025-11-30 22:04:36 +08:00
parent 8a1e03d616
commit dd2f67073b
134 changed files with 322 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/tree/page.tsx
+12 -41
View File
@@ -222,47 +222,23 @@ export default function TreePage() {
console.log('Updating selection mark for:', memberId, 'isSpouse:', isSpouse, 'selected:', selected)
if (selected) {
if (isSpouse) {
// 配偶区域：添加边框和选中标记
nodeElement.style.background = 'rgba(37, 99, 235, 0.1)'
nodeElement.style.borderRadius = '8px'
nodeElement.style.padding = '4px'
nodeElement.style.margin = '-4px'
// 添加打钩标记到配偶区域（右边）
if (!nodeElement.querySelector('.selection-mark')) {
const checkMark = document.createElement('div')
checkMark.className = 'selection-mark'
// 只添加打钩标记，不改变边框和背景
if (!nodeElement.querySelector('.selection-mark')) {
const checkMark = document.createElement('div')
checkMark.className = 'selection-mark'
if (isSpouse) {
// 配偶区域打钩位置（右边）
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"><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.style.position = 'relative'
nodeElement.appendChild(checkMark)
}
} else {
// 主成员节点：添加边框效果
nodeElement.style.border = '3px solid #2563eb'
nodeElement.style.boxShadow = '0 0 0 3px rgba(37, 99, 235, 0.3), 0 4px 12px rgba(0,0,0,0.12)'
// 添加打钩标记到节点左上角（左边）
if (!nodeElement.querySelector('.selection-mark')) {
const checkMark = document.createElement('div')
checkMark.className = 'selection-mark'
} else {
// 主成员打钩位置（左边）
checkMark.style.cssText = 'position: absolute; top: 6px; left: 6px; z-index: 20;'
checkMark.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="#2563eb" stroke="white" stroke-width="2"><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)
}
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"><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)
}
} else {
// 移除选中效果
if (isSpouse) {
nodeElement.style.background = ''
nodeElement.style.borderRadius = ''
nodeElement.style.padding = ''
nodeElement.style.margin = ''
} else {
nodeElement.style.border = ''
nodeElement.style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)'
}
// 移除选中标记
const mark = nodeElement.querySelector('.selection-mark')
if (mark) mark.remove()
}
@@ -297,15 +273,10 @@ export default function TreePage() {
})
setShowRelationDialog(true)
// 延迟清除选中状态 - 使用更可靠的方式清除所有选中标记
// 延迟清除选中状态
setTimeout(() => {
// 清除所有选中标记
document.querySelectorAll('.selection-mark').forEach(mark => mark.remove())
// 重置所有节点的边框样式
document.querySelectorAll('[data-member-id]').forEach(node => {
;(node as HTMLElement).style.border = ''
;(node as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)'
})
setSelectedMembers([])
setRelationMode(false)
}, 300)