chinese-family-tree-2/FOUNDER_DETAIL_PAGE.md

始祖成员详情页特殊处理

功能概述

在成员详情页面，始祖成员会有特殊的视觉标识和功能限制。

视觉特殊处理

1. 名字显示

始祖成员

<h1 className="text-4xl font-bold font-serif text-foreground flex items-center gap-2">
  {member.isFounder && <span className="text-amber-600 text-3xl">👑</span>}
  {member.fullName}
</h1>

• 皇冠图标: 👑（金色，3xl大小）
• 位置: 名字前方

普通成员

• 无特殊图标
• 仅显示名字

2. 世代标签

始祖成员

<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">
  始祖 · {member.generation}世
</span>

样式特点:

• 金色渐变背景 from-amber-100 to-orange-100
• 深金色文字 text-amber-800
• 双像素金色边框 border-2 border-amber-300
• 轻微阴影 shadow-sm
• 加粗字体 font-semibold
• 显示"始祖 · X世"

普通成员

<span className="px-2 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full border border-primary/20">
  {member.generation}世
</span>

样式特点:

• 主题色背景
• 普通边框
• 仅显示"X世"

3. 特殊说明文字

始祖成员专属

{member.isFounder && (
  <p className="text-amber-700 font-semibold text-sm flex items-center gap-1">
    <span>家族始祖</span>
    <span className="text-amber-600">•</span>
    <span>家族树的根基</span>
  </p>
)}

显示内容:

• "家族始祖 • 家族树的根基"
• 金色文字
• 加粗显示
• 位于字、号、籍贯之前

普通成员

• 无此说明

功能限制

禁用的操作按钮

始祖成员

• ❌ 添加父亲按钮: 隐藏（始祖是第一代，无父母）
• ❌ 添加母亲按钮: 隐藏（始祖是第一代，无父母）
• ✅ 添加子女按钮: 显示
• ✅ 添加配偶按钮: 显示

普通成员

• ✅ 添加父亲按钮: 显示（如果没有父亲）
• ✅ 添加母亲按钮: 显示（如果没有母亲）
• ✅ 添加子女按钮: 显示
• ✅ 添加配偶按钮: 显示

代码实现

{!member.isFounder && !member.fatherId && (
  <Button variant="outline" onClick={handleQuickAddFather} className="gap-2">
    <UserPlus className="h-4 w-4" /> 添加父亲
  </Button>
)}

{!member.isFounder && !member.motherId && (
  <Button variant="outline" onClick={handleQuickAddMother} className="gap-2">
    <UserPlus className="h-4 w-4" /> 添加母亲
  </Button>
)}

完整视觉对比

始祖成员详情页

┌─────────────────────────────────────────┐
│  [头像]  👑 王德厚                      │
│          [始祖 · 1世] (金色渐变标签)    │
│          家族始祖 • 家族树的根基        │
│          字：德厚                        │
│          籍贯：山东省济南市              │
│                                         │
│  [添加子女] [添加配偶] [编辑] [删除]    │
└─────────────────────────────────────────┘

普通成员详情页

┌─────────────────────────────────────────┐
│  [头像]  王建国                          │
│          [2世] (普通标签)                │
│          字：建国                        │
│          籍贯：山东省济南市              │
│                                         │
│  [添加父亲] [添加母亲] [添加子女]       │
│  [添加配偶] [编辑] [删除]               │
└─────────────────────────────────────────┘

设计理念

1. 视觉层次

• 皇冠图标: 直观传达始祖身份
• 金色主题: 营造尊贵感
• 渐变效果: 增加视觉吸引力
• 特殊说明: 强调始祖的重要性

2. 功能合理性

• 隐藏父母按钮: 始祖是第一代，逻辑上不应有父母
• 保留子女配偶: 始祖可以有后代和配偶
• 避免误操作: 防止用户为始祖添加父母导致数据混乱

3. 一致性

• 与成员列表页的始祖标识保持一致
• 使用相同的金色主题
• 使用相同的皇冠图标

用户体验

视觉引导

1. 一眼识别始祖成员
2. 金色主题营造特殊感
3. 清晰的身份说明

操作限制

1. 防止逻辑错误
2. 引导正确的家族树构建
3. 保持数据一致性

技术实现

检测逻辑

const isFounder = member.isFounder === true

条件渲染

{member.isFounder && (
  // 始祖专属内容
)}

{!member.isFounder && (
  // 普通成员内容
)}

响应式设计

• 移动端：图标和标签自适应
• 平板：保持完整显示
• 桌面：最佳视觉效果

可访问性

• 清晰的视觉层次
• 足够的颜色对比度
• 语义化的HTML结构
• 图标辅助文字说明

未来优化

可能的改进方向:

• 添加始祖专属的徽章系统
• 始祖成员的特殊背景效果
• 始祖成员的专属统计信息
• 始祖成员的保护机制（防止误删）
• 始祖成员的特殊打印样式