freedak/chinese-family-tree-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b7a8c9ee6e854a103db55f408c5e111e58fc284f
chinese-family-tree-2/BUTTONS_SUMMARY.md
T
freedakgmail e44dd0bd95 0.0.8.0
2025-11-23 18:03:04 +08:00

10 KiB
Raw Blame History

🎯 全站按钮梳理总结

📊 统计概览

总体统计

指标 数量
总页面数 11
总按钮数 80+
操作类型 6 大类
图标种类 30+

按页面分布

页面 按钮数量 主要功能
首页 (/) 3 添加成员、查看全部
成员列表 (/members) 5 筛选、新增、定位
成员详情 (/members/[id]) 10 CRUD、快速添加、打印分享
新增成员 (/members/new) 3 保存、取消、返回
族谱图 (/tree) 8 视图控制、关系查询、导出
大事记 (/timeline) 2 标签切换
关系计算 (/relationship) 4 计算、清除、交换
系统设置 (/settings) 12 数据管理、密码修改、日志
登录注册 (/auth) 4 登录、注册、跳转
创建家族树 (/trees/new) 3 创建、取消、返回
全局导航 (Header) 10+ 搜索、通知、设置、用户菜单

🎨 按钮样式分布

样式使用统计

primary (default)    ████████░░ 15%  (12个)
outline             ████████████████████ 40%  (32个)
ghost               ████████████ 25%  (20个)
destructive         ████░░ 8%   (6个)
secondary           ███░░ 6%   (5个)
link                ██░░ 4%   (3个)

样式使用建议

样式 当前使用 建议使用 说明
primary 15% 10-15% ✅ 合理，主要操作突出
outline 40% 30-40% ✅ 合理，次要操作为主
ghost 25% 20-30% ✅ 合理，辅助操作
destructive 8% 5-10% ✅ 合理，危险操作
secondary 6% 10-15% ⚠️ 可增加使用
link 4% 5-10% ⚠️ 可增加使用

🔧 功能分类

1. CRUD 操作 (25个)

操作 数量 主要页面
新增 (Create) 8 首页、成员列表、成员详情
查看 (Read) 5 各页面
编辑 (Update) 7 成员详情、设置
删除 (Delete) 5 成员详情、设置、导航

代表按钮:

  • 添加成员
  • 新增成员
  • 编辑
  • 保存
  • 删除

2. 导航操作 (18个)

操作 数量 说明
返回 6 返回上一页
跳转 8 跳转到其他页面
查看全部 4 查看列表页

代表按钮:

  • 返回
  • 查看全部
  • 在族谱图中定位

3. 数据管理 (12个)

操作 数量 页面
导入 3 设置
导出 4 设置、族谱图
清空 2 设置
刷新 3 设置、各页面

代表按钮:

  • 导出数据
  • 导入数据
  • 导出GEDCOM
  • 清空数据

4. 视图控制 (10个)

操作 数量 页面
放大/缩小 2 族谱图
重置 2 族谱图
切换视图 3 族谱图
筛选 3 成员列表

代表按钮:

  • 放大
  • 缩小
  • 重置
  • 筛选
  • 视图模式

5. 关系查询 (6个)

操作 数量 页面
关系查询 2 族谱图、关系计算
计算关系 2 关系计算
清除/交换 2 关系计算

代表按钮:

  • 关系查询
  • 计算关系
  • 清除选择
  • 交换成员

6. 用户操作 (9个)

操作 数量 页面
登录/注册 4 登录注册
修改密码 2 设置
退出登录 1 导航
用户菜单 2 导航

代表按钮:

  • 登录
  • 注册
  • 修改密码
  • 退出登录

🎯 图标使用统计

Top 10 常用图标

排名 图标 使用次数 主要用途
1 Plus / UserPlus 12 新增操作
2 ArrowLeft 8 返回
3 Search 6 搜索、定位
4 Edit 5 编辑
5 Trash / Trash2 5 删除
6 Download 4 导出/下载
7 Upload 3 导入/上传
8 Settings 3 设置
9 Filter 2 筛选
10 X 2 关闭、清除

图标分类

类别 图标数量 示例
操作类 15 Plus, Edit, Trash, Save
导航类 8 ArrowLeft, ArrowRight, ChevronDown
功能类 10 Search, Filter, Download, Upload
状态类 5 Bell, Check, X, Loader2
其他 8 User, Settings, Calendar, Map

🔐 权限控制

按权限级别分类

VIEWER (查看者)

可用按钮: 20个

  • 查看相关: 查看详情、查看全部
  • 导航相关: 返回、跳转
  • 视图控制: 放大、缩小、切换视图
  • 工具功能: 打印、分享、关系查询

EDITOR (编辑者)

可用按钮: 50个 (包含 VIEWER 的所有按钮)

  • 新增操作: 添加成员、新增成员
  • 编辑操作: 编辑、保存
  • 删除操作: 删除成员
  • 快速添加: 添加父母、子女、配偶

OWNER (所有者)

可用按钮: 80个 (所有按钮)

  • 管理操作: 删除家族树、管理协作者
  • 数据管理: 清空数据、清空日志
  • 系统设置: 所有设置功能

权限控制实现

// 方式1: 条件渲染（推荐）
{(role === "OWNER" || role === "EDITOR") && (
  <Button onClick={handleEdit}>编辑</Button>
)}

// 方式2: 禁用状态
<Button disabled={role === "VIEWER"}>
  编辑
</Button>

📱 响应式设计

移动端适配

适配方式 使用次数 示例
隐藏文字 5 图标按钮在移动端隐藏文字
全宽按钮 8 表单按钮在移动端全宽
下拉菜单 3 多个按钮收纳到菜单
尺寸调整 10 移动端使用 sm 尺寸

响应式示例

// 移动端全宽
<Button className="w-full md:w-auto">
  保存
</Button>

// 移动端隐藏文字
<Button>
  <Plus className="h-4 w-4 md:mr-2" />
  <span className="hidden md:inline">新增</span>
</Button>

⚠️ 发现的问题

高优先级问题

  1. 缺少加载状态 (15处)

    • 问题: 异步操作没有加载提示
    • 影响: 用户体验差，不知道是否在处理
    • 建议: 添加 loading 状态和 Spinner

  2. 确认对话框不统一 (8处)

    • 问题: 删除操作的确认方式不一致
    • 影响: 用户体验不统一
    • 建议: 使用统一的 AlertDialog 组件

  3. 权限控制不完整 (12处)

    • 问题: 部分按钮没有权限检查
    • 影响: 可能出现越权操作
    • 建议: 添加完整的权限检查

中优先级问题

  1. 缺少快捷键 (所有页面)

    • 问题: 常用操作没有快捷键
    • 影响: 效率低
    • 建议: 添加快捷键支持

  2. 错误处理不完善 (20处)

    • 问题: 操作失败没有明确提示
    • 影响: 用户不知道出了什么问题
    • 建议: 添加 Toast 提示

  3. 无障碍访问 (30处)

    • 问题: 图标按钮缺少 aria-label
    • 影响: 屏幕阅读器无法识别
    • 建议: 添加 aria 属性

低优先级问题

  1. 按钮分组 (5处)

    • 问题: 相关按钮没有分组
    • 影响: 视觉层次不清晰
    • 建议: 使用 ButtonGroup 或间距分组

  2. 图标不统一 (3处)

    • 问题: 同一功能使用不同图标
    • 影响: 用户认知负担
    • 建议: 统一图标使用

✅ 优化建议

立即优化 (本周)

  1. 添加加载状态

    // 所有异步操作添加 loading
const [isLoading, setIsLoading] = useState(false)

<Button disabled={isLoading}>
  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
  {isLoading ? '处理中...' : '保存'}
</Button>

  2. 统一确认对话框

    // 使用统一的 showConfirm
const confirmed = await showConfirm(
  '确定要删除吗？',
  '删除确认',
  'destructive'
)

  3. 完善权限控制

    // 所有编辑操作添加权限检查
{(role === "OWNER" || role === "EDITOR") && (
  <Button>编辑</Button>
)}

短期优化 (本月)

  1. 添加快捷键

    • Ctrl+S: 保存
    • Esc: 取消/关闭
    • Ctrl+N: 新增

  2. 改进错误处理

    • 所有操作添加 try-catch
    • 使用 Toast 显示错误信息

  3. 无障碍优化

    • 图标按钮添加 aria-label
    • 添加 title 属性

长期优化 (下季度)

  1. 批量操作

    • 成员列表支持批量选择
    • 批量删除、导出

  2. 撤销/重做

    • 编辑操作支持撤销
    • 删除操作支持恢复

  3. 国际化

    • 按钮文本支持多语言
    • 图标保持通用性

📋 检查清单

新增按钮检查清单

  • 确定按钮用途和位置
  • 选择合适的 variant
  • 选择合适的 size
  • 添加合适的图标
  • 实现权限控制
  • 添加加载状态
  • 添加错误处理
  • 危险操作添加确认
  • 添加无障碍属性
  • 测试响应式布局
  • 添加快捷键（可选）
  • 更新文档

代码审查检查清单

  • 按钮样式是否合适
  • 是否有权限控制
  • 是否有加载状态
  • 是否有错误处理
  • 危险操作是否有确认
  • 是否有无障碍属性
  • 响应式是否正常
  • 图标是否统一
  • 文案是否清晰

📚 相关文档

  1. 详细按钮清单

    • 所有页面的按钮详细列表
    • 按钮功能说明
    • 权限要求

  2. 按钮使用规范

    • 按钮样式规范
    • 图标使用规范
    • 最佳实践
    • 代码示例

  3. 组件库文档

    • Button 组件 API
    • 样式定制
    • 主题配置

🎯 总结

当前状态

  • ✅ 按钮数量: 80+ 个
  • ✅ 覆盖页面: 11 个
  • ✅ 功能完整: 基本功能齐全
  • ⚠️ 用户体验: 需要优化
  • ⚠️ 代码质量: 需要改进

优化重点

  1. 用户体验 (高优先级)

    • 加载状态
    • 错误提示
    • 确认对话框

  2. 代码质量 (中优先级)

    • 权限控制
    • 错误处理
    • 代码复用

  3. 功能增强 (低优先级)

    • 快捷键
    • 批量操作
    • 撤销/重做

下一步行动

  1. 本周: 修复高优先级问题
  2. 本月: 完成中优先级优化
  3. 下季度: 实现功能增强

文档版本: v1.0
最后更新: 2025-11-23
维护人员: System

Reference in New Issue View Git Blame Copy Permalink