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

0.0.3.0

Browse Source
This commit is contained in:
freedakgmail
2025-11-23 13:31:06 +08:00
parent 00cfae381b
commit 2b4bc92f1b
1039 changed files with 947611 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/members/page.tsx
+78 -22
View File
@@ -279,19 +279,42 @@ export default function MembersPage() {
<div className="flex-1 h-px bg-border"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{members.map((member) => (
{members.map((member) => {
// 判断是否是配偶：
// 1. 没有父母ID
// 2. 有配偶ID
// 3. 不是始祖（没有'始祖'标签）
const isFounder = member.tags?.includes('始祖')
const isSpouse = !member.fatherId && !member.motherId &&
member.spouseIds && member.spouseIds.length > 0 &&
!isFounder
// 获取配偶信息
const spouse = isSpouse && member.spouseIds?.[0] ? allMembers.find(m => m.id === member.spouseIds[0]) : null
const spouseName = spouse ? spouse.fullName : null
return (
<div key={member.id} className="relative group">
<Link href={`/members/${member.id}`}>
<Card className="hover:border-primary transition-colors cursor-pointer h-full">
<CardContent className="p-3 flex items-start gap-2.5">
<AvatarDisplay
imageId={member.avatarImageId}
fallbackUrl={member.avatarUrl}
fallbackText={member.surname}
gender={member.gender}
className="h-10 w-10 border border-border"
/>
<div className="flex-1 min-w-0">
<CardContent className="p-3 flex items-center gap-3">
<div className="relative flex-shrink-0">
<AvatarDisplay
imageId={member.avatarImageId}
fallbackUrl={member.avatarUrl}
fallbackText={member.surname}
gender={member.gender}
className="h-20 w-20 border-2 border-border"
/>
{/* 在世/去世标识 */}
{member.deathDate && (
<div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-gray-500 border-2 border-white" title="已故" />
)}
{!member.deathDate && (
<div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-white" title="在世" />
)}
</div>
<div className="flex-1 min-w-0 pl-1">
<div className="flex items-baseline justify-between gap-1.5">
<h3 className="text-base font-bold font-serif truncate">
{member.fullName}
@@ -302,18 +325,50 @@ export default function MembersPage() {
)}
</h3>
</div>
<p className="text-[11px] text-muted-foreground mt-0.5 truncate">
{member.generationName ? `字辈: ${member.generationName}` : "未录入字辈"}
</p>
<p className="text-[11px] text-muted-foreground truncate">{member.ancestralHome || "籍贯未知"}</p>
{(member.deathDate || member.tags?.length) && (
{isFounder ? (
<p className="text-[11px] text-amber-700 font-medium mt-0.5 truncate">
家族始祖
</p>
) : isSpouse && spouseName ? (
<p className="text-[11px] text-purple-700 mt-0.5 truncate">
{spouseName}的配偶
</p>
) : (
<p className="text-[11px] text-muted-foreground mt-0.5 truncate">
{member.generationName ? `字辈: ${member.generationName}` : "未录入字辈"}
</p>
)}
{/* 籍贯和生卒年并排 */}
<div className="flex items-start justify-between gap-2 mt-0.5">
<p className="text-[11px] text-muted-foreground truncate flex-1">{member.ancestralHome || "籍贯未知"}</p>
{/* 生卒年和年龄 */}
{(member.birthDate || member.deathDate) && (
<div className="text-[10px] text-muted-foreground text-right space-y-0.5 flex-shrink-0">
<div>
{member.birthDate && new Date(member.birthDate).getFullYear()}
{member.deathDate && ` - ${new Date(member.deathDate).getFullYear()}`}
{!member.deathDate && member.birthDate && ' - '}
</div>
{(() => {
if (!member.birthDate) return null
const birthYear = new Date(member.birthDate).getFullYear()
const deathYear = member.deathDate ? new Date(member.deathDate).getFullYear() : new Date().getFullYear()
const age = deathYear - birthYear
return (
<div className="text-[9px] text-muted-foreground">
{member.deathDate ? `享年${age}岁` : `${age}岁`}
</div>
)
})()}
</div>
)}
</div>
{member.tags && member.tags.length > 0 && (
<div className="mt-1.5 flex flex-wrap gap-1">
{member.deathDate && (
<span className="text-[9px] bg-neutral-100 text-neutral-600 px-1 py-0.5 rounded border border-neutral-200">
已故
</span>
)}
{member.tags?.map((tag) => (
{member.tags.map((tag) => (
<span
key={tag}
className="text-[9px] bg-primary/10 text-primary px-1 py-0.5 rounded border border-primary/20"
@@ -340,7 +395,8 @@ export default function MembersPage() {
<Search className="h-3 w-3" />
</Button>
</div>
))}
)
})}
</div>
</div>
))}