0.8.4.0
This commit is contained in:
freedakgmail
+365
-204
@@ -71,6 +71,7 @@ export default function DashboardPage() {
|
||||
const [recentActivities, setRecentActivities] = useState<ActivityLog[]>([])
|
||||
const [selectedPhoto, setSelectedPhoto] = useState<string | null>(null)
|
||||
const [statsExpanded, setStatsExpanded] = useState(true)
|
||||
const [recentActivityExpanded, setRecentActivityExpanded] = useState(false)
|
||||
const [adminToggleLoading, setAdminToggleLoading] = useState<string | null>(null)
|
||||
const [editDialogOpen, setEditDialogOpen] = useState(false)
|
||||
const [editForm, setEditForm] = useState({ name: '', description: '' })
|
||||
@@ -330,7 +331,9 @@ export default function DashboardPage() {
|
||||
})
|
||||
|
||||
// 按日期排序
|
||||
return anniversaries.sort((a, b) => a.day - b.day).slice(0, 5)
|
||||
const sorted = anniversaries.sort((a, b) => a.day - b.day)
|
||||
|
||||
return sorted
|
||||
}, [treeData])
|
||||
|
||||
// 计算家族迁徙记录
|
||||
@@ -801,8 +804,9 @@ export default function DashboardPage() {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="recent" className="mt-0 flex-1 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6">
|
||||
{/* 第一行：本月祭祖和未来三月纪念日 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<ChineseCard variant="plaque" className="shadow-sm">
|
||||
<ChineseCardHeader>
|
||||
<ChineseCardTitle className="flex items-center gap-2 text-primary">
|
||||
@@ -811,53 +815,125 @@ export default function DashboardPage() {
|
||||
</ChineseCardTitle>
|
||||
<ChineseCardDescription>本月需要纪念的家族成员生日与忌日</ChineseCardDescription>
|
||||
</ChineseCardHeader>
|
||||
<ChineseCardContent className="grid gap-4">
|
||||
<ChineseCardContent className="max-h-full overflow-y-auto">
|
||||
{monthlyAnniversaries.length > 0 ? (
|
||||
monthlyAnniversaries.map((anniversary, index) => {
|
||||
const yearsAgo = new Date().getFullYear() - new Date(anniversary.date).getFullYear()
|
||||
return (
|
||||
<Link href={`/members/${anniversary.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${anniversary.member.id}-${anniversary.type}`}>
|
||||
<div className="flex items-center gap-4 p-3 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
||||
{anniversary.isLunar && anniversary.lunarDisplay ? (
|
||||
// 农历日期框 - 红色主题
|
||||
<div className="flex flex-col items-center justify-center w-14 h-14 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border-2 border-red-200/50 text-red-800 font-serif shadow-sm">
|
||||
<span className="text-[10px] leading-tight text-center px-1">
|
||||
{anniversary.lunarDisplay.replace('月', '')}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
// 公历日期框 - 蓝色主题
|
||||
<div className="flex flex-col items-center justify-center w-14 h-14 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border-2 border-blue-200/50 text-blue-800 font-serif shadow-sm">
|
||||
<span className="text-xs font-medium">
|
||||
{anniversary.month}月
|
||||
</span>
|
||||
<span className="font-bold text-xl leading-tight">{anniversary.day}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="font-medium flex items-center gap-2">
|
||||
<MemberNameWithStatus
|
||||
name={anniversary.member.fullName}
|
||||
isDead={!!anniversary.member.deathDate}
|
||||
/> {anniversary.type === 'birth' ? '诞辰' : '忌日'}
|
||||
{anniversary.isLunar && (
|
||||
<span className="text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200">
|
||||
农历
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
第 {anniversary.member.generation} 世 · 距今 {yearsAgo} 年
|
||||
{anniversary.type === 'death' && ' · 已故'}
|
||||
{anniversary.isLunar && anniversary.lunarDisplay && (
|
||||
<span className="ml-1">· {anniversary.lunarDisplay}</span>
|
||||
)}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* 诞辰列 */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<span className="w-1 h-4 bg-green-500 rounded"></span>
|
||||
诞辰
|
||||
<span className="ml-auto text-xs font-normal text-muted-foreground bg-green-50 px-2 py-1 rounded border border-green-200">
|
||||
{monthlyAnniversaries.filter(a => a.type === 'birth').length}
|
||||
</span>
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
|
||||
{monthlyAnniversaries.filter(a => a.type === 'birth').length > 0 ? (
|
||||
monthlyAnniversaries.filter(a => a.type === 'birth').map((anniversary) => {
|
||||
const yearsAgo = new Date().getFullYear() - new Date(anniversary.date).getFullYear()
|
||||
return (
|
||||
<Link href={`/members/${anniversary.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${anniversary.member.id}-${anniversary.type}`}>
|
||||
<div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
||||
{anniversary.isLunar && anniversary.lunarDisplay ? (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border-2 border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[9px] leading-tight text-center px-1">
|
||||
{anniversary.lunarDisplay.replace('月', '')}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border-2 border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[10px] font-medium">
|
||||
{anniversary.month}月
|
||||
</span>
|
||||
<span className="font-bold text-sm leading-tight">{anniversary.day}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-sm flex items-center gap-1 flex-wrap">
|
||||
<MemberNameWithStatus
|
||||
name={anniversary.member.fullName}
|
||||
isDead={!!anniversary.member.deathDate}
|
||||
/>
|
||||
{anniversary.isLunar && (
|
||||
<span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
|
||||
农历
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
第 {anniversary.member.generation} 世 · {yearsAgo} 年
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<p className="text-xs text-muted-foreground">此月无诞辰</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 忌日列 */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<span className="w-1 h-4 bg-gray-500 rounded"></span>
|
||||
忌日
|
||||
<span className="ml-auto text-xs font-normal text-muted-foreground bg-gray-100 px-2 py-1 rounded border border-gray-200">
|
||||
{monthlyAnniversaries.filter(a => a.type === 'death').length}
|
||||
</span>
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
|
||||
{monthlyAnniversaries.filter(a => a.type === 'death').length > 0 ? (
|
||||
monthlyAnniversaries.filter(a => a.type === 'death').map((anniversary) => {
|
||||
const yearsAgo = new Date().getFullYear() - new Date(anniversary.date).getFullYear()
|
||||
return (
|
||||
<Link href={`/members/${anniversary.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${anniversary.member.id}-${anniversary.type}`}>
|
||||
<div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
||||
{anniversary.isLunar && anniversary.lunarDisplay ? (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border-2 border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[9px] leading-tight text-center px-1">
|
||||
{anniversary.lunarDisplay.replace('月', '')}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border-2 border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[10px] font-medium">
|
||||
{anniversary.month}月
|
||||
</span>
|
||||
<span className="font-bold text-sm leading-tight">{anniversary.day}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-sm flex items-center gap-1 flex-wrap">
|
||||
<MemberNameWithStatus
|
||||
name={anniversary.member.fullName}
|
||||
isDead={!!anniversary.member.deathDate}
|
||||
/>
|
||||
{anniversary.isLunar && (
|
||||
<span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
|
||||
农历
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
第 {anniversary.member.generation} 世 · {yearsAgo} 年
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<p className="text-xs text-muted-foreground">此月无忌日</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-sm text-foreground font-light tracking-wide">此月无忆</p>
|
||||
@@ -875,184 +951,267 @@ export default function DashboardPage() {
|
||||
<ChineseCardDescription>即将到来的生日与忌日提醒</ChineseCardDescription>
|
||||
</ChineseCardHeader>
|
||||
<ChineseCardContent>
|
||||
<div className="space-y-3">
|
||||
{(() => {
|
||||
const now = new Date()
|
||||
const threeMonthsLater = new Date(now.getFullYear(), now.getMonth() + 3, now.getDate())
|
||||
const members = Object.values(treeData.members)
|
||||
const upcomingEvents: Array<{
|
||||
member: any
|
||||
type: 'birth' | 'death'
|
||||
date: Date
|
||||
originalDate: string
|
||||
isLunar: boolean
|
||||
lunarDisplay?: string
|
||||
month: number
|
||||
day: number
|
||||
}> = []
|
||||
{(() => {
|
||||
const now = new Date()
|
||||
const threeMonthsLater = new Date(now.getFullYear(), now.getMonth() + 3, now.getDate())
|
||||
const members = Object.values(treeData.members)
|
||||
const upcomingEvents: Array<{
|
||||
member: any
|
||||
type: 'birth' | 'death'
|
||||
date: Date
|
||||
originalDate: string
|
||||
isLunar: boolean
|
||||
lunarDisplay?: string
|
||||
month: number
|
||||
day: number
|
||||
}> = []
|
||||
|
||||
members.forEach(member => {
|
||||
// 生日
|
||||
if (member.birthDate) {
|
||||
const birthDate = new Date(member.birthDate)
|
||||
let thisYearBirth: Date
|
||||
let lunarDisplay: string | undefined
|
||||
|
||||
// 检查是否按农历计算
|
||||
if (member.isLunarDate) {
|
||||
// 农历生日：计算今年对应的公历日期
|
||||
const lunarInfo = solar2lunar(birthDate)
|
||||
if (lunarInfo) {
|
||||
const thisYearLunar = lunar2solar(
|
||||
now.getFullYear(),
|
||||
lunarInfo.lunarMonth,
|
||||
lunarInfo.lunarDay,
|
||||
lunarInfo.isLeap
|
||||
)
|
||||
if (thisYearLunar) {
|
||||
thisYearBirth = thisYearLunar
|
||||
lunarDisplay = `${lunarInfo.monthName}${lunarInfo.dayName}`
|
||||
} else {
|
||||
thisYearBirth = new Date(now.getFullYear(), birthDate.getMonth(), birthDate.getDate())
|
||||
}
|
||||
members.forEach(member => {
|
||||
// 生日
|
||||
if (member.birthDate) {
|
||||
const birthDate = new Date(member.birthDate)
|
||||
let thisYearBirth: Date
|
||||
let lunarDisplay: string | undefined
|
||||
|
||||
// 检查是否按农历计算
|
||||
if (member.isLunarDate) {
|
||||
// 农历生日：计算今年对应的公历日期
|
||||
const lunarInfo = solar2lunar(birthDate)
|
||||
if (lunarInfo) {
|
||||
const thisYearLunar = lunar2solar(
|
||||
now.getFullYear(),
|
||||
lunarInfo.lunarMonth,
|
||||
lunarInfo.lunarDay,
|
||||
lunarInfo.isLeap
|
||||
)
|
||||
if (thisYearLunar) {
|
||||
thisYearBirth = thisYearLunar
|
||||
lunarDisplay = `${lunarInfo.monthName}${lunarInfo.dayName}`
|
||||
} else {
|
||||
thisYearBirth = new Date(now.getFullYear(), birthDate.getMonth(), birthDate.getDate())
|
||||
}
|
||||
} else {
|
||||
// 公历生日
|
||||
thisYearBirth = new Date(now.getFullYear(), birthDate.getMonth(), birthDate.getDate())
|
||||
}
|
||||
|
||||
if (thisYearBirth >= now && thisYearBirth <= threeMonthsLater) {
|
||||
upcomingEvents.push({
|
||||
member,
|
||||
type: 'birth',
|
||||
date: thisYearBirth,
|
||||
originalDate: member.birthDate,
|
||||
isLunar: member.isLunarDate || false,
|
||||
lunarDisplay,
|
||||
month: thisYearBirth.getMonth() + 1,
|
||||
day: thisYearBirth.getDate()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 公历生日
|
||||
thisYearBirth = new Date(now.getFullYear(), birthDate.getMonth(), birthDate.getDate())
|
||||
}
|
||||
|
||||
if (thisYearBirth >= now && thisYearBirth <= threeMonthsLater) {
|
||||
upcomingEvents.push({
|
||||
member,
|
||||
type: 'birth',
|
||||
date: thisYearBirth,
|
||||
originalDate: member.birthDate,
|
||||
isLunar: member.isLunarDate || false,
|
||||
lunarDisplay,
|
||||
month: thisYearBirth.getMonth() + 1,
|
||||
day: thisYearBirth.getDate()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 忌日
|
||||
if (member.deathDate) {
|
||||
const deathDate = new Date(member.deathDate)
|
||||
let thisYearDeath: Date
|
||||
let lunarDisplay: string | undefined
|
||||
|
||||
// 检查是否按农历计算
|
||||
if (member.isLunarDate) {
|
||||
// 农历忌日：计算今年对应的公历日期
|
||||
const lunarInfo = solar2lunar(deathDate)
|
||||
if (lunarInfo) {
|
||||
const thisYearLunar = lunar2solar(
|
||||
now.getFullYear(),
|
||||
lunarInfo.lunarMonth,
|
||||
lunarInfo.lunarDay,
|
||||
lunarInfo.isLeap
|
||||
)
|
||||
if (thisYearLunar) {
|
||||
thisYearDeath = thisYearLunar
|
||||
lunarDisplay = `${lunarInfo.monthName}${lunarInfo.dayName}`
|
||||
} else {
|
||||
thisYearDeath = new Date(now.getFullYear(), deathDate.getMonth(), deathDate.getDate())
|
||||
}
|
||||
// 忌日
|
||||
if (member.deathDate) {
|
||||
const deathDate = new Date(member.deathDate)
|
||||
let thisYearDeath: Date
|
||||
let lunarDisplay: string | undefined
|
||||
|
||||
// 检查是否按农历计算
|
||||
if (member.isLunarDate) {
|
||||
// 农历忌日：计算今年对应的公历日期
|
||||
const lunarInfo = solar2lunar(deathDate)
|
||||
if (lunarInfo) {
|
||||
const thisYearLunar = lunar2solar(
|
||||
now.getFullYear(),
|
||||
lunarInfo.lunarMonth,
|
||||
lunarInfo.lunarDay,
|
||||
lunarInfo.isLeap
|
||||
)
|
||||
if (thisYearLunar) {
|
||||
thisYearDeath = thisYearLunar
|
||||
lunarDisplay = `${lunarInfo.monthName}${lunarInfo.dayName}`
|
||||
} else {
|
||||
thisYearDeath = new Date(now.getFullYear(), deathDate.getMonth(), deathDate.getDate())
|
||||
}
|
||||
} else {
|
||||
// 公历忌日
|
||||
thisYearDeath = new Date(now.getFullYear(), deathDate.getMonth(), deathDate.getDate())
|
||||
}
|
||||
|
||||
if (thisYearDeath >= now && thisYearDeath <= threeMonthsLater) {
|
||||
upcomingEvents.push({
|
||||
member,
|
||||
type: 'death',
|
||||
date: thisYearDeath,
|
||||
originalDate: member.deathDate,
|
||||
isLunar: member.isLunarDate || false,
|
||||
lunarDisplay,
|
||||
month: thisYearDeath.getMonth() + 1,
|
||||
day: thisYearDeath.getDate()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 公历忌日
|
||||
thisYearDeath = new Date(now.getFullYear(), deathDate.getMonth(), deathDate.getDate())
|
||||
}
|
||||
})
|
||||
|
||||
if (thisYearDeath >= now && thisYearDeath <= threeMonthsLater) {
|
||||
upcomingEvents.push({
|
||||
member,
|
||||
type: 'death',
|
||||
date: thisYearDeath,
|
||||
originalDate: member.deathDate,
|
||||
isLunar: member.isLunarDate || false,
|
||||
lunarDisplay,
|
||||
month: thisYearDeath.getMonth() + 1,
|
||||
day: thisYearDeath.getDate()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
upcomingEvents.sort((a, b) => a.date.getTime() - b.date.getTime())
|
||||
upcomingEvents.sort((a, b) => a.date.getTime() - b.date.getTime())
|
||||
|
||||
return upcomingEvents.length > 0 ? (
|
||||
upcomingEvents.slice(0, 5).map((event, index) => {
|
||||
const yearsAgo = now.getFullYear() - new Date(event.originalDate).getFullYear()
|
||||
const daysUntil = Math.ceil((event.date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
|
||||
return (
|
||||
<Link href={`/members/${event.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${event.member.id}-${event.type}-${index}`}>
|
||||
<div className="flex items-center gap-3 p-2 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
||||
{event.isLunar && event.lunarDisplay ? (
|
||||
// 农历日期框 - 红色主题
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border border-red-200/50 text-red-800 font-serif shadow-sm">
|
||||
<span className="text-[9px] leading-tight text-center px-1">
|
||||
{event.lunarDisplay}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
// 公历日期框 - 蓝色主题
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/50 text-blue-800 font-serif shadow-sm">
|
||||
<span className="text-xs font-medium">
|
||||
{event.month}月
|
||||
</span>
|
||||
<span className="font-bold text-sm leading-tight">{event.day}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-sm flex items-center gap-2">
|
||||
<MemberNameWithStatus
|
||||
name={event.member.fullName}
|
||||
isDead={!!event.member.deathDate}
|
||||
/> {event.type === 'birth' ? '诞辰' : '忌日'}
|
||||
{event.isLunar && (
|
||||
<span className="text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200">
|
||||
农历
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
第 {event.member.generation} 世 · {yearsAgo} 年
|
||||
{event.type === 'death' && ' · 已故'}
|
||||
{event.isLunar && event.lunarDisplay && (
|
||||
<span className="ml-1">· {event.lunarDisplay}</span>
|
||||
)}
|
||||
<span className="ml-1 text-primary">· {daysUntil}天后</span>
|
||||
</p>
|
||||
</div>
|
||||
const birthEvents = upcomingEvents.filter(e => e.type === 'birth')
|
||||
const deathEvents = upcomingEvents.filter(e => e.type === 'death')
|
||||
|
||||
return upcomingEvents.length > 0 ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* 诞辰列 */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<span className="w-1 h-4 bg-green-500 rounded"></span>
|
||||
诞辰
|
||||
<span className="ml-auto text-xs font-normal text-muted-foreground bg-green-50 px-2 py-1 rounded border border-green-200">
|
||||
{birthEvents.length}
|
||||
</span>
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
|
||||
{birthEvents.length > 0 ? (
|
||||
birthEvents.map((event, index) => {
|
||||
const yearsAgo = now.getFullYear() - new Date(event.originalDate).getFullYear()
|
||||
const daysUntil = Math.ceil((event.date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
|
||||
return (
|
||||
<Link href={`/members/${event.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${event.member.id}-${event.type}-${index}`}>
|
||||
<div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
||||
{event.isLunar && event.lunarDisplay ? (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[9px] leading-tight text-center px-1">
|
||||
{event.lunarDisplay}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[10px] font-medium">
|
||||
{event.month}月
|
||||
</span>
|
||||
<span className="font-bold text-sm leading-tight">{event.day}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-sm flex items-center gap-1 flex-wrap">
|
||||
<MemberNameWithStatus
|
||||
name={event.member.fullName}
|
||||
isDead={!!event.member.deathDate}
|
||||
/>
|
||||
{event.isLunar && (
|
||||
<span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
|
||||
农历
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
第 {event.member.generation} 世 · {yearsAgo} 年 · <span className="text-primary font-medium">{daysUntil}天</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<p className="text-xs text-muted-foreground">无诞辰</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-sm text-foreground font-light tracking-wide">来日无期</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* 忌日列 */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<span className="w-1 h-4 bg-gray-500 rounded"></span>
|
||||
忌日
|
||||
<span className="ml-auto text-xs font-normal text-muted-foreground bg-gray-100 px-2 py-1 rounded border border-gray-200">
|
||||
{deathEvents.length}
|
||||
</span>
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
|
||||
{deathEvents.length > 0 ? (
|
||||
deathEvents.map((event, index) => {
|
||||
const yearsAgo = now.getFullYear() - new Date(event.originalDate).getFullYear()
|
||||
const daysUntil = Math.ceil((event.date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
|
||||
return (
|
||||
<Link href={`/members/${event.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${event.member.id}-${event.type}-${index}`}>
|
||||
<div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
|
||||
{event.isLunar && event.lunarDisplay ? (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[9px] leading-tight text-center px-1">
|
||||
{event.lunarDisplay}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
|
||||
<span className="text-[10px] font-medium">
|
||||
{event.month}月
|
||||
</span>
|
||||
<span className="font-bold text-sm leading-tight">{event.day}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-sm flex items-center gap-1 flex-wrap">
|
||||
<MemberNameWithStatus
|
||||
name={event.member.fullName}
|
||||
isDead={!!event.member.deathDate}
|
||||
/>
|
||||
{event.isLunar && (
|
||||
<span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
|
||||
农历
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
第 {event.member.generation} 世 · {yearsAgo} 年 · <span className="text-primary font-medium">{daysUntil}天</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<p className="text-xs text-muted-foreground">无忌日</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-sm text-foreground font-light tracking-wide">来日无期</p>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</ChineseCardContent>
|
||||
</ChineseCard>
|
||||
</div>
|
||||
|
||||
<ChineseCard variant="default" cornerOrnament className="shadow-sm">
|
||||
<ChineseCardHeader>
|
||||
<ChineseCardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5 text-primary" />
|
||||
近期修谱动态
|
||||
</ChineseCardTitle>
|
||||
<ChineseCardDescription>记录家族成员的最新变动与修订</ChineseCardDescription>
|
||||
</ChineseCardHeader>
|
||||
<ChineseCardContent>
|
||||
{/* 第二行：近期修谱动态（折叠状态） */}
|
||||
<Collapsible open={recentActivityExpanded} onOpenChange={setRecentActivityExpanded} className="w-full">
|
||||
<ChineseCard variant="default" cornerOrnament className="shadow-sm">
|
||||
<ChineseCardHeader>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5 text-primary" />
|
||||
<ChineseCardTitle>近期修谱动态</ChineseCardTitle>
|
||||
</div>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
{recentActivityExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</div>
|
||||
<ChineseCardDescription>记录家族成员的最新变动与修订</ChineseCardDescription>
|
||||
</ChineseCardHeader>
|
||||
<CollapsibleContent>
|
||||
<ChineseCardContent>
|
||||
<ScrollArea className="h-[600px] pr-4">
|
||||
<div className="space-y-4">
|
||||
{recentActivities.length > 0 ? (
|
||||
@@ -1159,8 +1318,10 @@ export default function DashboardPage() {
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</ChineseCardContent>
|
||||
</ChineseCard>
|
||||
</ChineseCardContent>
|
||||
</CollapsibleContent>
|
||||
</ChineseCard>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
+55
-3
@@ -47,7 +47,7 @@ import type { D3OrgChartRef } from "@/components/tree/d3-org-chart-flow"
|
||||
type ViewMode = "traditional" | "d3-org-chart"
|
||||
|
||||
export default function TreePage() {
|
||||
const { treeData, currentTree, refreshData } = useFamily()
|
||||
const { treeData, currentTree, refreshData, highlightedMemberId, setHighlightedMemberId } = useFamily()
|
||||
const { calculateRelationship } = useRelationship()
|
||||
const { data: session, status } = useSession()
|
||||
const { showAlert } = useDialog()
|
||||
@@ -119,9 +119,14 @@ export default function TreePage() {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const d3ChartRef = useRef<D3OrgChartRef>(null)
|
||||
|
||||
// 传统族谱初始定位到始祖并自适应缩放
|
||||
// 传统族谱初始定位到始祖并自适应缩放（如果有高亮成员则跳过）
|
||||
useEffect(() => {
|
||||
if (viewMode !== 'traditional' || hasInitialPositioned || !treeData.rootId) return
|
||||
// 如果有高亮成员，跳过初始定位，让高亮定位逻辑处理
|
||||
if (highlightedMemberId) {
|
||||
setHasInitialPositioned(true)
|
||||
return
|
||||
}
|
||||
|
||||
// 找到始祖成员：优先使用标记为 isFounder 的成员，否则使用 rootId 对应的成员
|
||||
const founderMember = Object.values(treeData.members).find(m => m.isFounder === true)
|
||||
@@ -180,7 +185,7 @@ export default function TreePage() {
|
||||
}, 500)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [viewMode, treeData.rootId, treeData.members, hasInitialPositioned])
|
||||
}, [viewMode, treeData.rootId, treeData.members, hasInitialPositioned, highlightedMemberId])
|
||||
|
||||
// 切换视图模式时重置初始定位状态和缩放位置
|
||||
useEffect(() => {
|
||||
@@ -189,6 +194,53 @@ export default function TreePage() {
|
||||
setPosition({ x: 0, y: 0 })
|
||||
}, [viewMode])
|
||||
|
||||
// 当有高亮成员时，定位到该成员并居中显示，设置 scale 为 1.0
|
||||
useEffect(() => {
|
||||
if (viewMode !== 'traditional' || !highlightedMemberId) return
|
||||
|
||||
// 第一步：重置位置和缩放为初始状态
|
||||
setScale(1)
|
||||
setPosition({ x: 0, y: 0 })
|
||||
|
||||
// 延迟执行，等待 DOM 完全渲染（需要足够长的时间让树完全展开）
|
||||
const timer = setTimeout(() => {
|
||||
if (!containerRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
// 查找高亮成员的 DOM 元素
|
||||
const highlightedNode = containerRef.current.querySelector(`[data-member-id="${highlightedMemberId}"]`) as HTMLElement
|
||||
if (!highlightedNode) {
|
||||
return
|
||||
}
|
||||
|
||||
const containerRect = containerRef.current.getBoundingClientRect()
|
||||
const nodeRect = highlightedNode.getBoundingClientRect()
|
||||
|
||||
// 计算容器中心
|
||||
const containerCenterX = containerRect.width / 2
|
||||
const containerCenterY = containerRect.height / 2
|
||||
|
||||
// 此时 position 已经是 {x:0, y:0}，所以节点位置就是相对于原点的位置
|
||||
// 我们需要计算让节点居中的偏移量
|
||||
const nodeCenterX = nodeRect.left - containerRect.left + nodeRect.width / 2
|
||||
const nodeCenterY = nodeRect.top - containerRect.top + nodeRect.height / 2
|
||||
|
||||
// 计算偏移量
|
||||
const offsetX = containerCenterX - nodeCenterX
|
||||
const offsetY = containerCenterY - nodeCenterY
|
||||
|
||||
setPosition({ x: offsetX, y: offsetY })
|
||||
|
||||
// 30秒后清除高亮状态
|
||||
setTimeout(() => {
|
||||
setHighlightedMemberId(null)
|
||||
}, 30000)
|
||||
}, 1000) // 增加到1秒，确保DOM完全渲染
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [viewMode, highlightedMemberId, setHighlightedMemberId])
|
||||
|
||||
// 传统族谱自适应视图函数
|
||||
const handleTraditionalFitView = useCallback(() => {
|
||||
if (!containerRef.current || !treeData.rootId) return
|
||||
|
||||
Reference in New Issue
Block a user