chinese-family-tree-2/docs/UI_BUTTONS_INVENTORY.md

# 🎯 全站操作按钮梳理文档

## 📋 目录
- [首页 (/)](#首页-)
- [成员列表 (/members)](#成员列表-members)
- [成员详情 (/members/[id])](#成员详情-membersid)
- [新增成员 (/members/new)](#新增成员-membersnew)
- [族谱图 (/tree)](#族谱图-tree)
- [大事记 (/timeline)](#大事记-timeline)
- [关系计算 (/relationship)](#关系计算-relationship)
- [系统设置 (/settings)](#系统设置-settings)
- [登录注册 (/auth)](#登录注册-auth)
- [创建家族树 (/trees/new)](#创建家族树-treesnew)
- [全局导航 (SiteHeader)](#全局导航-siteheader)

---

## 首页 (/)

### 主要操作按钮

| 按钮名称 | 图标 | 样式 | 权限要求 | 功能说明 | 位置 |
|---------|------|------|---------|---------|------|
| **添加成员** | `UserPlus` | `primary` | OWNER/EDITOR | 跳转到新增成员页面 | 顶部右侧 |
| **查看全部** | `ArrowRight` | `ghost` | 所有用户 | 跳转到成员列表页面 | 成员卡片区域 |

### 卡片操作

| 操作 | 触发方式 | 功能 |
|-----|---------|------|
| 查看成员详情 | 点击成员卡片 | 跳转到成员详情页 |
| 查看族谱图 | 点击"查看族谱图"按钮 | 跳转到族谱图页面 |

---

## 成员列表 (/members)

### 顶部操作栏

| 按钮名称 | 图标 | 样式 | 快捷键 | 功能说明 |
|---------|------|------|--------|---------|
| **筛选** | `Filter` | `outline/secondary` | - | 显示/隐藏高级筛选面板 |
| **新增成员** | `Plus` | `primary` | - | 跳转到新增成员页面 |

### 筛选面板

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **重置筛选** | `X` | `ghost` | 清除所有筛选条件 |

### 成员卡片操作

| 按钮名称 | 图标 | 样式 | 显示方式 | 功能说明 |
|---------|------|------|---------|---------|
| **在族谱图中定位** | `Search` | `ghost` | hover显示 | 在族谱图中定位该成员 |

### 筛选器

| 筛选器类型 | 选项 | 说明 |
|-----------|------|------|
| 姓氏 | 下拉选择 | 按姓氏筛选 |
| 籍贯 | 下拉选择 | 按籍贯筛选 |
| 状态 | 全部/在世/已故 | 按生存状态筛选 |
| 世系范围 | 滑块 | 按世代范围筛选 |

---

## 成员详情 (/members/[id])

### 顶部操作栏

| 按钮名称 | 图标 | 样式 | 权限要求 | 功能说明 |
|---------|------|------|---------|---------|
| **返回** | `ArrowLeft` | `ghost` | 所有用户 | 返回上一页 |

### 主要操作按钮

| 按钮名称 | 图标 | 样式 | 权限要求 | 功能说明 |
|---------|------|------|---------|---------|
| **添加父亲** | `UserPlus` | `outline` | OWNER/EDITOR | 快速添加父亲（条件显示） |
| **添加母亲** | `UserPlus` | `outline` | OWNER/EDITOR | 快速添加母亲（条件显示） |
| **添加子女** | `UserPlus` | `default` | OWNER/EDITOR | 快速添加子女 |
| **添加配偶** | `UserPlus` | `secondary` | OWNER/EDITOR | 快速添加配偶 |
| **打印** | `Printer` | `outline` | 所有用户 | 打印成员信息 |
| **分享** | `Share2` | `outline` | 所有用户 | 分享成员信息 |
| **编辑** | `Edit` | `outline` | OWNER/EDITOR | 进入编辑模式 |
| **删除** | `Trash` | `destructive` | OWNER/EDITOR | 删除成员（需确认） |

### 编辑模式

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **返回** | `ArrowLeft` | `ghost` | 退出编辑模式 |
| **取消** | - | `outline` | 取消编辑，返回详情页 |
| **保存** | - | `primary` | 保存修改 |

### 条件显示逻辑

- **添加父亲**: 仅当成员没有父亲时显示
- **添加母亲**: 仅当成员没有母亲时显示
- **添加子女**: 始终显示
- **添加配偶**: 始终显示

---

## 新增成员 (/members/new)

### 顶部操作栏

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **返回** | `ArrowLeft` | `ghost` | 返回上一页 |

### 表单操作

| 按钮名称 | 样式 | 位置 | 功能说明 |
|---------|------|------|---------|
| **取消** | `outline` | 底部左侧 | 取消新增，返回上一页 |
| **保存** | `primary` | 底部右侧 | 保存新成员 |

---

## 族谱图 (/tree)

### 顶部工具栏

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **关系查询** | `Users` | `default/secondary` | 切换关系查询模式 |
| **视图模式** | `LayoutGrid` | `outline` | 切换视图模式（下拉菜单） |
| **放大** | `ZoomIn` | `outline` | 放大族谱图 |
| **缩小** | `ZoomOut` | `outline` | 缩小族谱图 |
| **重置** | `Move` | `outline` | 重置视图位置和缩放 |
| **导出图片** | `Download` | `outline` | 导出族谱图为图片 |

### 视图模式选项

| 模式名称 | 说明 |
|---------|------|
| 传统视图 | 传统的树状布局 |
| D3组织图 | 使用D3.js的组织图布局 |

### 关系查询模式

| 状态 | 说明 | 操作 |
|-----|------|------|
| 未激活 | 正常浏览模式 | 点击"关系查询"按钮激活 |
| 激活 | 选择两个成员计算关系 | 依次点击两个成员 |
| 结果显示 | 弹出对话框显示关系 | 点击"关闭"或"继续查询" |

### 对话框按钮

| 按钮名称 | 样式 | 功能说明 |
|---------|------|---------|
| **关闭** | `outline` | 关闭对话框 |
| **继续查询** | `default` | 关闭对话框并保持查询模式 |

---

## 大事记 (/timeline)

### 标签切换

| 标签名称 | 内容 |
|---------|------|
| 时间线 | 按时间顺序显示事件 |
| 迁徙记录 | 显示家族迁徙地图 |

### 操作

| 操作 | 触发方式 | 功能 |
|-----|---------|------|
| 查看成员详情 | 点击事件中的成员名称 | 跳转到成员详情页 |
| 查看地图 | 切换到"迁徙记录"标签 | 显示迁徙地图 |

---

## 关系计算 (/relationship)

### 主要操作

| 按钮名称 | 样式 | 功能说明 |
|---------|------|---------|
| **计算关系** | `default` | 计算两个成员之间的关系 |
| **清除** | `outline` | 清除选择 |
| **交换** | `ghost` | 交换两个成员的位置 |

### 成员选择

| 选择器 | 说明 |
|-------|------|
| 成员A | 下拉选择第一个成员 |
| 成员B | 下拉选择第二个成员 |

---

## 系统设置 (/settings)

### 用户信息卡片

| 按钮名称 | 样式 | 功能说明 |
|---------|------|---------|
| **修改密码** | `outline` | 打开修改密码对话框 |

### 数据管理

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **导出数据** | `Download` | `outline` | 导出家族树数据为JSON |
| **导入数据** | `Upload` | `outline` | 导入JSON数据 |
| **导出GEDCOM** | `FileText` | `outline` | 导出为GEDCOM格式 |
| **导入GEDCOM** | `Upload` | `outline` | 导入GEDCOM文件 |
| **清空数据** | `AlertTriangle` | `destructive` | 清空所有数据（需确认） |

### 操作日志

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **刷新** | `RefreshCw` | `outline` | 刷新日志列表 |
| **清空日志** | `Trash` | `destructive` | 清空所有日志（需确认） |

### 修改密码对话框

| 按钮名称 | 样式 | 功能说明 |
|---------|------|---------|
| **取消** | `outline` | 关闭对话框 |
| **确认修改** | `default` | 提交密码修改 |

---

## 登录注册 (/auth)

### 登录页面 (/auth/signin)

| 按钮名称 | 样式 | 功能说明 |
|---------|------|---------|
| **登录** | `default` | 提交登录表单 |
| **注册账号** | `link` | 跳转到注册页面 |

### 注册页面 (/auth/register)

| 按钮名称 | 样式 | 功能说明 |
|---------|------|---------|
| **注册** | `default` | 提交注册表单 |
| **已有账号？登录** | `link` | 跳转到登录页面 |

---

## 创建家族树 (/trees/new)

### 表单操作

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **返回** | `ArrowLeft` | `ghost` | 返回首页 |
| **取消** | - | `outline` | 取消创建 |
| **创建** | - | `primary` | 创建新家族树 |

---

## 全局导航 (SiteHeader)

### 主导航

| 导航项 | 路径 | 说明 |
|-------|------|------|
| 总览 | `/` | 首页 |
| 族谱 | `/tree` | 族谱图 |
| 成员 | `/members` | 成员列表 |
| 大事记 | `/timeline` | 时间线 |

### 顶部操作栏

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **搜索** | `Search` | 输入框 | 全局搜索成员 |
| **通知** | `Bell` | `ghost` | 查看通知（未实现） |
| **关系计算器** | `Calculator` | `ghost` | 跳转到关系计算页面 |
| **设置** | `Settings` | `ghost` | 跳转到系统设置 |
| **用户菜单** | `Avatar` | 下拉菜单 | 用户信息和退出登录 |

### 家族树选择器

| 按钮名称 | 图标 | 样式 | 功能说明 |
|---------|------|------|---------|
| **当前家族树** | `ChevronDown` | `outline` | 显示家族树列表 |
| **创建新家族树** | `Plus` | 菜单项 | 跳转到创建页面 |
| **删除家族树** | `Trash2` | `ghost` | 删除家族树（仅所有者） |

### 用户下拉菜单

| 菜单项 | 图标 | 功能说明 |
|-------|------|---------|
| **系统设置** | `Settings` | 跳转到设置页面 |
| **退出登录** | `LogOut` | 退出当前账号 |

---

## 📊 按钮统计

### 按样式分类

| 样式 | 数量 | 用途 |
|-----|------|------|
| `primary` | 8 | 主要操作（保存、创建、新增等） |
| `outline` | 25+ | 次要操作（编辑、导出、返回等） |
| `ghost` | 15+ | 辅助操作（返回、搜索、刷新等） |
| `destructive` | 5 | 危险操作（删除、清空等） |
| `secondary` | 3 | 次要强调操作 |
| `link` | 2 | 链接样式按钮 |

### 按功能分类

| 功能类别 | 按钮数量 | 主要按钮 |
|---------|---------|---------|
| **导航** | 10+ | 返回、跳转、查看全部 |
| **CRUD操作** | 15+ | 新增、编辑、删除、保存 |
| **数据管理** | 8 | 导入、导出、清空 |
| **视图控制** | 6 | 放大、缩小、重置、切换视图 |
| **关系查询** | 4 | 关系查询、计算关系、清除 |
| **用户操作** | 5 | 登录、注册、修改密码、退出 |

### 按权限分类

| 权限级别 | 可用按钮 |
|---------|---------|
| **所有用户** | 查看、搜索、打印、分享、导出 |
| **EDITOR** | 新增、编辑、删除成员 |
| **OWNER** | 所有操作 + 删除家族树、管理协作者 |

---

## 🎨 设计规范

### 按钮尺寸

| 尺寸 | 使用场景 |
|-----|---------|
| `sm` | 辅助操作、图标按钮 |
| `default` | 常规操作 |
| `lg` | 主要操作（未使用） |

### 图标使用

| 图标库 | 使用率 |
|-------|--------|
| Lucide React | 100% |

### 常用图标

| 图标 | 用途 | 使用次数 |
|-----|------|---------|
| `Plus` / `UserPlus` | 新增操作 | 10+ |
| `ArrowLeft` | 返回 | 8 |
| `Edit` | 编辑 | 5 |
| `Trash` / `Trash2` | 删除 | 5 |
| `Download` | 导出/下载 | 4 |
| `Upload` | 导入/上传 | 3 |
| `Search` | 搜索 | 3 |

---

## 🔍 优化建议

### 高优先级

1. **统一确认对话框**
   - 所有删除操作应使用统一的确认对话框
   - 建议使用 `AlertDialog` 组件

2. **加载状态**
   - 为异步操作添加加载状态
   - 使用 `loading` 属性或 `Spinner` 组件

3. **禁用状态**
   - 根据权限自动禁用按钮
   - 添加 `disabled` 状态和提示

4. **快捷键支持**
   - 为常用操作添加快捷键
   - 如：Ctrl+S 保存，Esc 取消

### 中优先级

5. **批量操作**
   - 成员列表添加批量选择
   - 支持批量删除、导出

6. **撤销/重做**
   - 为编辑操作添加撤销功能
   - 特别是删除操作

7. **操作反馈**
   - 添加 Toast 提示
   - 操作成功/失败的明确反馈

### 低优先级

8. **按钮分组**
   - 相关按钮使用 `ButtonGroup` 组件
   - 提高视觉层次

9. **响应式优化**
   - 移动端按钮大小调整
   - 使用下拉菜单收纳次要操作

10. **国际化**
    - 按钮文本支持多语言
    - 图标 + 文本的组合

---

## 📝 维护记录

| 日期 | 更新内容 | 更新人 |
|------|---------|--------|
| 2025-11-23 | 初始版本，梳理全站按钮 | System |

---

## 🔗 相关文档

- [组件库文档](../components/ui/README.md)
- [权限系统文档](./PERMISSIONS.md)
- [用户体验指南](./UX_GUIDELINES.md)