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

0.7.0.0

Browse Source
This commit is contained in:
freedakgmail
2025-12-10 15:21:27 +08:00
parent e7167f4340
commit 1ae59960e8
148 changed files with 681 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/members/new/page.tsx
+34 -35
View File
@@ -157,50 +157,50 @@ export default function NewMemberPage() {
return (
<div className="min-h-screen flex flex-col bg-background">
<SiteHeader />
<main className="container mx-auto py-8 px-4 md:px-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-[calc(100vh-8rem)]">
<main className="container mx-auto py-4 md:py-8 px-3 md:px-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-[calc(100vh-6rem)] md:h-[calc(100vh-8rem)]">
{/* 固定头部区域 */}
<div className="flex-shrink-0 pb-4 border-b border-border">
<div className="flex-shrink-0 pb-3 md:pb-4 border-b border-border">
{/* 返回按钮 */}
<BackButton onClick={() => router.back()} />
{/* Header Section */}
<div className="flex flex-col md:flex-row justify-between items-start gap-6 pb-4">
<div className="flex items-start gap-6">
<div className={`h-24 w-24 rounded-lg bg-muted flex items-center justify-center border-2 ${isFirstMember ? 'border-amber-400 bg-amber-50/30' : 'border-primary/20'} overflow-hidden`}>
<div className="flex flex-col md:flex-row justify-between items-start gap-3 md:gap-6 pb-3 md:pb-4">
<div className="flex items-start gap-3 md:gap-6">
<div className={`h-14 w-14 md:h-24 md:w-24 rounded-lg bg-muted flex items-center justify-center border-2 ${isFirstMember ? 'border-amber-400 bg-amber-50/30' : 'border-primary/20'} overflow-hidden flex-shrink-0`}>
{isFirstMember ? (
<span className="text-4xl">👑</span>
<span className="text-2xl md:text-4xl">👑</span>
) : (
<UserPlus className="h-16 w-16 text-muted-foreground" />
<UserPlus className="h-8 w-8 md:h-16 md:w-16 text-muted-foreground" />
)}
</div>
<div>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-3xl font-bold font-serif text-foreground flex items-center gap-2">
{isFirstMember && <span className="text-amber-600 text-2xl">👑</span>}
{isFirstMember ? '添加家族始祖' : `添加家族${memberType}`}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 md:gap-3 mb-1 md:mb-2 flex-wrap">
<h1 className="text-lg md:text-3xl font-bold font-serif text-foreground flex items-center gap-1 md:gap-2">
{isFirstMember && <span className="text-amber-600 text-lg md:text-2xl">👑</span>}
{isFirstMember ? '添加家族始祖' : `添加${memberType}`}
</h1>
{isFirstMember && (
<span className="px-3 py-1 bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 text-sm font-semibold rounded-full border-2 border-amber-300 shadow-sm">
<span className="px-2 md:px-3 py-0.5 md:py-1 bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 text-xs md:text-sm font-semibold rounded-full border-2 border-amber-300 shadow-sm">
始祖 · 1世
</span>
)}
</div>
<p className="text-muted-foreground">
<p className="text-xs md:text-base text-muted-foreground">
{isFirstMember
? '请认真填写始祖信息，这将是家族历史的起点'
: `填写${memberType}信息，完善家族树`}
? '请认真填写始祖信息'
: `填写${memberType}信息`}
</p>
</div>
</div>
<div className="flex gap-2 flex-wrap">
<Button type="button" variant="outline" onClick={() => router.back()}>
<div className="flex gap-1.5 md:gap-2 flex-wrap">
<Button type="button" variant="outline" onClick={() => router.back()} className="text-xs md:text-sm h-7 md:h-9 px-2 md:px-4">
取消
</Button>
<Button
type="button"
className="bg-primary text-primary-foreground hover:bg-primary/90"
className="bg-primary text-primary-foreground hover:bg-primary/90 text-xs md:text-sm h-7 md:h-9 px-2 md:px-4"
onClick={() => {
const form = document.querySelector('form')
if (form) {
@@ -214,29 +214,28 @@ export default function NewMemberPage() {
</div>
{/* Tab 导航栏 */}
<TabsList className="flex flex-wrap gap-2 bg-muted/70 p-1 w-fit">
<TabsTrigger value="info">基本信息</TabsTrigger>
<TabsTrigger value="details">详细资料</TabsTrigger>
<TabsTrigger value="photos">生平影像</TabsTrigger>
<TabsTrigger value="stories">家族故事</TabsTrigger>
<TabsList className="grid grid-cols-4 md:flex md:flex-wrap gap-1 md:gap-2 bg-muted/70 p-1 w-full md:w-fit h-auto">
<TabsTrigger value="info" className="text-xs md:text-sm px-2 md:px-3 py-1.5">基本信息</TabsTrigger>
<TabsTrigger value="details" className="text-xs md:text-sm px-2 md:px-3 py-1.5">详细资料</TabsTrigger>
<TabsTrigger value="photos" className="text-xs md:text-sm px-2 md:px-3 py-1.5">生平影像</TabsTrigger>
<TabsTrigger value="stories" className="text-xs md:text-sm px-2 md:px-3 py-1.5">家族故事</TabsTrigger>
</TabsList>
{/* 始祖特殊提示框 */}
{/* 始祖特殊提示框 - 移动端简化 */}
{isFirstMember && (
<div className="mt-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 className="mt-3 md:mt-6 p-3 md: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-2 md:gap-4">
<div className="flex-shrink-0 w-10 h-10 md:w-14 md:h-14 bg-gradient-to-br from-amber-200 to-orange-200 rounded-full flex items-center justify-center shadow-sm">
<span className="text-xl md:text-3xl">👑</span>
</div>
<div className="flex-1">
<h2 className="text-2xl font-serif font-bold text-amber-900 mb-3">
<div className="flex-1 min-w-0">
<h2 className="text-lg md:text-2xl font-serif font-bold text-amber-900 mb-1 md:mb-3">
立家族之根基
</h2>
<p className="text-base text-amber-800 leading-relaxed font-serif">
<p className="text-sm md: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 />
血脉由此而始，世系因此而传。
<span className="hidden md:inline"><br />血脉由此而始，世系因此而传。</span>
</p>
</div>
</div>