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

451 lines
10 KiB
Markdown
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个 (所有按钮)
- 管理操作: 删除家族树、管理协作者
- 数据管理: 清空数据、清空日志
- 系统设置: 所有设置功能
### 权限控制实现
```typescript
// 方式1: 条件渲染（推荐）
{(role === "OWNER" || role === "EDITOR") && (
<Button onClick={handleEdit}>编辑</Button>
)}
// 方式2: 禁用状态
<Button disabled={role === "VIEWER"}>
编辑
</Button>
```
---
## 📱 响应式设计
### 移动端适配
| 适配方式 | 使用次数 | 示例 |
|---------|---------|------|
| 隐藏文字 | 5 | 图标按钮在移动端隐藏文字 |
| 全宽按钮 | 8 | 表单按钮在移动端全宽 |
| 下拉菜单 | 3 | 多个按钮收纳到菜单 |
| 尺寸调整 | 10 | 移动端使用 sm 尺寸 |
### 响应式示例
```tsx
// 移动端全宽
<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处)
- 问题: 部分按钮没有权限检查
- 影响: 可能出现越权操作
- 建议: 添加完整的权限检查
### 中优先级问题
4. **缺少快捷键** (所有页面)
- 问题: 常用操作没有快捷键
- 影响: 效率低
- 建议: 添加快捷键支持
5. **错误处理不完善** (20处)
- 问题: 操作失败没有明确提示
- 影响: 用户不知道出了什么问题
- 建议: 添加 Toast 提示
6. **无障碍访问** (30处)
- 问题: 图标按钮缺少 aria-label
- 影响: 屏幕阅读器无法识别
- 建议: 添加 aria 属性
### 低优先级问题
7. **按钮分组** (5处)
- 问题: 相关按钮没有分组
- 影响: 视觉层次不清晰
- 建议: 使用 ButtonGroup 或间距分组
8. **图标不统一** (3处)
- 问题: 同一功能使用不同图标
- 影响: 用户认知负担
- 建议: 统一图标使用
---
## ✅ 优化建议
### 立即优化 (本周)
1. **添加加载状态**
```tsx
// 所有异步操作添加 loading
const [isLoading, setIsLoading] = useState(false)
<Button disabled={isLoading}>
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isLoading ? '处理中...' : '保存'}
</Button>
```
2. **统一确认对话框**
```tsx
// 使用统一的 showConfirm
const confirmed = await showConfirm(
'确定要删除吗？',
'删除确认',
'destructive'
)
```
3. **完善权限控制**
```tsx
// 所有编辑操作添加权限检查
{(role === "OWNER" || role === "EDITOR") && (
<Button>编辑</Button>
)}
```
### 短期优化 (本月)
4. **添加快捷键**
- Ctrl+S: 保存
- Esc: 取消/关闭
- Ctrl+N: 新增
5. **改进错误处理**
- 所有操作添加 try-catch
- 使用 Toast 显示错误信息
6. **无障碍优化**
- 图标按钮添加 aria-label
- 添加 title 属性
### 长期优化 (下季度)
7. **批量操作**
- 成员列表支持批量选择
- 批量删除、导出
8. **撤销/重做**
- 编辑操作支持撤销
- 删除操作支持恢复
9. **国际化**
- 按钮文本支持多语言
- 图标保持通用性
---
## 📋 检查清单
### 新增按钮检查清单
- [ ] 确定按钮用途和位置
- [ ] 选择合适的 variant
- [ ] 选择合适的 size
- [ ] 添加合适的图标
- [ ] 实现权限控制
- [ ] 添加加载状态
- [ ] 添加错误处理
- [ ] 危险操作添加确认
- [ ] 添加无障碍属性
- [ ] 测试响应式布局
- [ ] 添加快捷键（可选）
- [ ] 更新文档
### 代码审查检查清单
- [ ] 按钮样式是否合适
- [ ] 是否有权限控制
- [ ] 是否有加载状态
- [ ] 是否有错误处理
- [ ] 危险操作是否有确认
- [ ] 是否有无障碍属性
- [ ] 响应式是否正常
- [ ] 图标是否统一
- [ ] 文案是否清晰
---
## 📚 相关文档
1. **[详细按钮清单](./docs/UI_BUTTONS_INVENTORY.md)**
- 所有页面的按钮详细列表
- 按钮功能说明
- 权限要求
2. **[按钮使用规范](./docs/BUTTON_USAGE_GUIDE.md)**
- 按钮样式规范
- 图标使用规范
- 最佳实践
- 代码示例
3. **[组件库文档](./components/ui/README.md)**
- 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