Files
chinese-family-tree-2/app/members/new/page.tsx
T
freedakgmail b25f4bea02 0.0.9.0
2025-11-24 16:07:24 +08:00

159 lines
5.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { useFamily } from "@/context/family-context"
import { SiteHeader } from "@/components/site-header"
import { MemberForm } from "@/components/members/member-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import type { FamilyMember } from "@/types/family"
import { useMemo, useEffect } from "react"
import { useSession } from "next-auth/react"
export default function NewMemberPage() {
const router = useRouter()
const searchParams = useSearchParams()
const { addMember, treeData, getMember } = useFamily()
const { data: session, status } = useSession()
// 未登录时重定向到登录页
useEffect(() => {
if (status === 'unauthenticated') {
router.push('/auth/signin')
}
}, [status, router])
const existingMembers = Object.values(treeData.members)
const isFirstMember = existingMembers.length === 0
// 从URL参数获取预填信息
const initialData = useMemo(() => {
const fatherId = searchParams.get('fatherId')
const motherId = searchParams.get('motherId')
const spouseId = searchParams.get('spouseId')
const childId = searchParams.get('childId')
const generation = searchParams.get('generation')
const gender = searchParams.get('gender')
if (!fatherId && !motherId && !spouseId && !childId && !generation && !gender) return undefined
const data: Partial<FamilyMember> = {}
// 处理父母信息
if (fatherId) {
data.fatherId = fatherId
// 如果有父亲,尝试获取母亲(父亲的配偶)
const father = getMember(fatherId)
if (father?.spouseIds && father.spouseIds.length > 0) {
data.motherId = father.spouseIds[0]
}
}
if (motherId) {
data.motherId = motherId
// 如果有母亲,尝试获取父亲(母亲的配偶)
const mother = getMember(motherId)
if (mother?.spouseIds && mother.spouseIds.length > 0) {
data.fatherId = mother.spouseIds[0]
}
}
// 处理配偶信息
if (spouseId) {
data.spouseIds = [spouseId]
}
// 处理子女信息(添加父母时使用)
if (childId) {
data.childrenIds = [childId]
}
// 处理世代
if (generation) {
data.generation = parseInt(generation)
}
// 处理性别
if (gender) {
data.gender = gender.toUpperCase() as 'MALE' | 'FEMALE'
}
return data
}, [searchParams, getMember])
const handleSave = async (newMember: FamilyMember) => {
try {
// 如果是第一个成员,自动设置为始祖
const memberData = isFirstMember ? {
...newMember,
generation: 1,
isFounder: true,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
} : {
...newMember,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
}
await addMember(memberData)
// 跳转到成员列表页,保留treeId参数
const params = new URLSearchParams(window.location.search)
router.push(`/members?${params.toString()}`)
} catch (error) {
console.error('添加成员失败:', error)
alert('添加成员失败: ' + (error as Error).message)
}
}
return (
<div className="min-h-screen flex flex-col bg-background">
<SiteHeader />
<div className="container mx-auto py-8">
<div className="mb-6">
<Button variant="ghost" onClick={() => router.back()} className="mb-4">
<ArrowLeft className="mr-2 h-4 w-4" />
</Button>
{isFirstMember && (
<div className="mb-6 p-6 bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 border-2 border-amber-400 rounded-xl shadow-md">
<div className="flex items-start gap-4">
<div className="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-amber-200 to-orange-200 rounded-full flex items-center justify-center shadow-sm">
<span className="text-3xl">👑</span>
</div>
<div className="flex-1">
<h2 className="text-2xl font-serif font-bold text-amber-900 mb-3">
</h2>
<p className="text-base text-amber-800 leading-relaxed font-serif">
<span className="font-bold text-amber-900"></span>
<span className="font-bold text-amber-900"></span>
<br />
</p>
</div>
</div>
</div>
)}
<h1 className="text-3xl font-serif font-bold mb-2">
{isFirstMember ? '添加家族始祖' : '新增家族成员'}
</h1>
<p className="text-muted-foreground">
{isFirstMember
? '请认真填写始祖信息,这将是家族历史的起点'
: '填写成员信息,完善家族树'}
</p>
</div>
<MemberForm
initialData={initialData}
existingMembers={existingMembers}
onSubmit={handleSave}
onCancel={() => router.back()}
isFounder={isFirstMember}
/>
</div>
</div>
)
}