freedak/chinese-family-tree-2

Fork 0

Files

T

freedakgmail 3d075c6076 0.0.8.5

2025-11-24 14:02:34 +08:00

4.3 KiB

Raw Blame History

成员姓名显示位置梳理

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

✅ 已实施状态标识的位置

1. 成员列表页面

文件: app/members/page.tsx

成员卡片中的姓名
状态: 已使用 MemberNameWithStatus 组件

2. 首页

文件: app/page.tsx

本月祭祖/纪念 - 成员姓名
近期纪念日 - 成员姓名
状态: 已使用 MemberNameWithStatus 组件

3. 搜索结果

文件: components/site-header.tsx

顶部搜索框下拉结果中的姓名
状态: 已使用 MemberNameWithStatus 组件

4. 家族树图谱

文件: components/tree/family-node.tsx

树形节点中的姓名
状态: 已使用 MemberNameWithStatus 组件

5. D3 组织图表

文件: components/tree/d3-org-chart-flow.tsx

组织图表节点中的姓名
状态: 已在 HTML 字符串中添加状态圆点

⏳ 待实施状态标识的位置

6. 成员详情页面

文件: app/members/[id]/page.tsx

主成员姓名（页面标题）
配偶姓名列表
子女姓名列表
父母姓名
状态: 已使用 MemberNameWithStatus 组件

7. 时间线页面

文件: app/timeline/page.tsx

时间线事件中的成员姓名
诞生事件中的父母姓名
诞生事件中的配偶姓名
迁徙事件中的成员姓名（迁出地和迁入地）
状态: 已使用 MemberNameWithStatus 组件

8. 关系计算器页面

文件: app/relationship/page.tsx

成员A选择按钮显示
成员A下拉列表中的所有成员姓名
成员B选择按钮显示
成员B下拉列表中的所有成员姓名
计算结果中的两个成员姓名
关系说明中的成员姓名
关系路径中的所有成员姓名（使用 RelationshipPathDisplay 组件）
直系亲属中的父母姓名
直系亲属中的配偶姓名
直系亲属中的子女姓名
兄弟姐妹姓名
状态: 已使用 MemberNameWithStatus 和 RelationshipPathDisplay 组件

9. 家族树页面（关系计算结果）

文件: app/tree/page.tsx

关系计算结果中的两个成员姓名
关系说明中的成员姓名
关系路径中的所有成员姓名（使用 RelationshipPathDisplay 组件）
状态: 已使用 MemberNameWithStatus 和 RelationshipPathDisplay 组件

10. 成员表单（选择器）

文件: components/members/member-form.tsx

父亲选择器下拉列表中的姓名
母亲选择器下拉列表中的姓名
配偶选择器下拉列表中的姓名
已选配偶列表中的姓名
子女选择器下拉列表中的姓名
已选子女列表中的姓名
状态: 已使用 MemberNameWithStatus 组件

11. 通知设置

文件: components/settings/notification-settings.tsx

生日提醒列表中的成员姓名
忌日提醒列表中的成员姓名
状态: 已使用 MemberNameWithStatus 组件

📋 实施优先级

✅ 高优先级（用户常见页面）- 已完成

✅ 成员列表
✅ 首页（本月祭祖/纪念、近期纪念日）
✅ 搜索结果
✅ 家族树图谱
✅ D3 组织图表
✅ 成员详情页面
✅ 时间线页面

✅ 中优先级 - 已完成

✅ 关系计算器页面（包括选择器和下拉列表）

✅ 低优先级 - 已完成

✅ 家族树页面的关系计算结果
✅ 成员表单选择器（所有选择器和已选列表）
✅ 通知设置（生日和忌日提醒列表）

🎨 实施标准

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

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

视觉效果:

🟢 在世：绿色圆点，文字正常颜色
⚫ 已故：灰色圆点，文字颜色变浅

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

📝 注意事项

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

4.3 KiB Raw Blame History Unescape Escape