chinese-family-tree-2/FOUNDER_FEATURE.md

始祖标识功能说明

功能概述

当创建新家族树后添加第一个成员时，系统会自动将其标记为"始祖"，并赋予特殊的视觉标识。

自动设置

第一个成员自动处理

当家族树中没有任何成员时，添加的第一个成员会自动：

1. 设置世代：自动设为第 1 代
2. 添加标签：自动添加"始祖"标签
3. 特殊提示：页面标题显示"添加家族始祖"

页面提示

• 标题：添加家族始祖
• 说明：这是家族树的第一位成员，将自动标记为"始祖"并设为第1代

视觉标识

始祖标签样式

"始祖"标签具有特殊的视觉样式：

• 图标：👑 皇冠图标
• 颜色：金色主题（amber）
  • 背景：bg-amber-100
  • 文字：text-amber-800
  • 边框：border-amber-300
• 字体：加粗显示（font-semibold）

普通标签样式

其他标签使用默认样式：

• 背景：bg-primary/10
• 文字：text-primary
• 边框：border-primary/20

显示位置

始祖标签会显示在以下位置：

1. 成员列表页：每个成员卡片的标签区域
2. 成员详情页：成员信息的标签部分
3. 族谱图：成员节点上

使用场景

创建新家族树

1. 创建家族树后，点击"添加成员"
2. 系统检测到这是第一个成员
3. 页面显示"添加家族始祖"
4. 填写成员信息并保存
5. 成员自动标记为"始祖"，世代为1

后续添加成员

• 第二个及以后的成员不会自动标记为始祖
• 需要手动设置世代和关系
• 可以手动添加其他标签

技术实现

检测逻辑

const existingMembers = Object.values(treeData.members)
const isFirstMember = existingMembers.length === 0

自动设置

const memberData = isFirstMember ? {
  ...newMember,
  generation: 1,
  tags: [...(newMember.tags || []), '始祖'],
  createdAt: new Date().toISOString(),
  updatedAt: new Date().toISOString(),
} : {
  ...newMember,
  createdAt: new Date().toISOString(),
  updatedAt: new Date().toISOString(),
}

样式渲染

className={tag === '始祖' 
  ? "text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded border border-amber-300 font-semibold" 
  : "text-xs bg-primary/10 text-primary px-2 py-0.5 rounded border border-primary/20"}

注意事项

1. 唯一性：每个家族树只有第一个成员会自动标记为始祖
2. 不可撤销：一旦标记为始祖，需要手动编辑才能移除标签
3. 世代固定：始祖默认为第1代
4. 视觉突出：始祖标签使用金色主题，在列表中更加醒目

未来扩展

可能的功能扩展：

• 支持多个始祖（如夫妻双方都是始祖）
• 始祖成员在族谱图中的特殊显示
• 始祖成员的专属统计信息
• 从始祖开始的完整世系追溯