🎯 全站操作按钮梳理文档
📋 目录
首页 (/)
主要操作按钮
| 按钮名称 |
图标 |
样式 |
权限要求 |
功能说明 |
位置 |
| 添加成员 |
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 |
创建新家族树 |
主导航
| 导航项 |
路径 |
说明 |
| 总览 |
/ |
首页 |
| 族谱 |
/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 |
🔍 优化建议
高优先级
-
统一确认对话框
- 所有删除操作应使用统一的确认对话框
- 建议使用
AlertDialog 组件
-
加载状态
- 为异步操作添加加载状态
- 使用
loading 属性或 Spinner 组件
-
禁用状态
- 根据权限自动禁用按钮
- 添加
disabled 状态和提示
-
快捷键支持
- 为常用操作添加快捷键
- 如：Ctrl+S 保存，Esc 取消
中优先级
-
批量操作
-
撤销/重做
-
操作反馈
低优先级
-
按钮分组
- 相关按钮使用
ButtonGroup 组件
- 提高视觉层次
-
响应式优化
-
国际化
📝 维护记录
| 日期 |
更新内容 |
更新人 |
| 2025-11-23 |
初始版本，梳理全站按钮 |
System |
🔗 相关文档
freedakgmail