# 成员姓名显示位置梳理

本文档列出了整个应用中所有显示成员姓名的位置，用于统一实施状态标识（在世/已故）。

## ✅ 已实施状态标识的位置

### 1. 成员列表页面
**文件**: `app/members/page.tsx`
- [x] 成员卡片中的姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 2. 首页
**文件**: `app/page.tsx`
- [x] 本月祭祖/纪念 - 成员姓名
- [x] 近期纪念日 - 成员姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 3. 搜索结果
**文件**: `components/site-header.tsx`
- [x] 顶部搜索框下拉结果中的姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 4. 家族树图谱
**文件**: `components/tree/family-node.tsx`
- [x] 树形节点中的姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 5. D3 组织图表
**文件**: `components/tree/d3-org-chart-flow.tsx`
- [x] 组织图表节点中的姓名
- **状态**: 已在 HTML 字符串中添加状态圆点

---

## ⏳ 待实施状态标识的位置

### 6. 成员详情页面
**文件**: `app/members/[id]/page.tsx`
- [x] 主成员姓名（页面标题）
- [x] 配偶姓名列表
- [x] 子女姓名列表
- [x] 父母姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 7. 时间线页面
**文件**: `app/timeline/page.tsx`
- [x] 时间线事件中的成员姓名
- [x] 诞生事件中的父母姓名
- [x] 诞生事件中的配偶姓名
- [x] 迁徙事件中的成员姓名（迁出地和迁入地）
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 8. 关系计算器页面
**文件**: `app/relationship/page.tsx`
- [x] 成员A选择按钮显示
- [x] 成员A下拉列表中的所有成员姓名
- [x] 成员B选择按钮显示
- [x] 成员B下拉列表中的所有成员姓名
- [x] 计算结果中的两个成员姓名
- [x] 关系说明中的成员姓名
- [x] 关系路径中的所有成员姓名（使用 `RelationshipPathDisplay` 组件）
- [x] 直系亲属中的父母姓名
- [x] 直系亲属中的配偶姓名
- [x] 直系亲属中的子女姓名
- [x] 兄弟姐妹姓名
- **状态**: 已使用 `MemberNameWithStatus` 和 `RelationshipPathDisplay` 组件

### 9. 家族树页面（关系计算结果）
**文件**: `app/tree/page.tsx`
- [x] 关系计算结果中的两个成员姓名
- [x] 关系说明中的成员姓名
- [x] 关系路径中的所有成员姓名（使用 `RelationshipPathDisplay` 组件）
- **状态**: 已使用 `MemberNameWithStatus` 和 `RelationshipPathDisplay` 组件

### 10. 成员表单（选择器）
**文件**: `components/members/member-form.tsx`
- [x] 父亲选择器下拉列表中的姓名
- [x] 母亲选择器下拉列表中的姓名
- [x] 配偶选择器下拉列表中的姓名
- [x] 已选配偶列表中的姓名
- [x] 子女选择器下拉列表中的姓名
- [x] 已选子女列表中的姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

### 11. 通知设置
**文件**: `components/settings/notification-settings.tsx`
- [x] 生日提醒列表中的成员姓名
- [x] 忌日提醒列表中的成员姓名
- **状态**: 已使用 `MemberNameWithStatus` 组件

---

## 📋 实施优先级

### ✅ 高优先级（用户常见页面）- 已完成
1. ✅ 成员列表
2. ✅ 首页（本月祭祖/纪念、近期纪念日）
3. ✅ 搜索结果
4. ✅ 家族树图谱
5. ✅ D3 组织图表
6. ✅ 成员详情页面
7. ✅ 时间线页面

### ✅ 中优先级 - 已完成
8. ✅ 关系计算器页面（包括选择器和下拉列表）

### ✅ 低优先级 - 已完成
9. ✅ 家族树页面的关系计算结果
10. ✅ 成员表单选择器（所有选择器和已选列表）
11. ✅ 通知设置（生日和忌日提醒列表）

---

## 🎨 实施标准

所有位置统一使用 `MemberNameWithStatus` 组件：

```tsx
<MemberNameWithStatus 
  name={member.fullName}
  isDead={!!member.deathDate}
/>
```

**视觉效果**:
- 🟢 在世：绿色圆点，文字正常颜色
- ⚫ 已故：灰色圆点，文字颜色变浅

**圆点位置**: 人名右侧，`right-0.5 top-1`，尺寸 8px

---

## 📝 注意事项

1. 对于 HTML 字符串渲染（如 D3 图表），需要手动添加状态圆点样式
2. 确保所有位置的视觉效果保持一致
3. 已故成员的文字颜色应该变浅（`text-muted-foreground`）
4. 圆点应该与文字垂直对齐