freedakgmail
139 lines
4.3 KiB
Markdown
139 lines
4.3 KiB
Markdown
# 成员姓名显示位置梳理
|
||
|
||
本文档列出了整个应用中所有显示成员姓名的位置，用于统一实施状态标识（在世/已故）。
|
||
|
||
## ✅ 已实施状态标识的位置
|
||
|
||
### 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. 圆点应该与文字垂直对齐
|