freedakgmail
212 lines
5.4 KiB
Markdown
212 lines
5.4 KiB
Markdown
# 始祖成员详情页特殊处理
|
|
|
|
## 功能概述
|
|
|
|
在成员详情页面，始祖成员会有特殊的视觉标识和功能限制。
|
|
|
|
## 视觉特殊处理
|
|
|
|
### 1. 名字显示
|
|
|
|
#### 始祖成员
|
|
```tsx
|
|
<h1 className="text-4xl font-bold font-serif text-foreground flex items-center gap-2">
|
|
{member.isFounder && <span className="text-amber-600 text-3xl">👑</span>}
|
|
{member.fullName}
|
|
</h1>
|
|
```
|
|
|
|
- **皇冠图标**: 👑（金色，3xl大小）
|
|
- **位置**: 名字前方
|
|
|
|
#### 普通成员
|
|
- 无特殊图标
|
|
- 仅显示名字
|
|
|
|
### 2. 世代标签
|
|
|
|
#### 始祖成员
|
|
```tsx
|
|
<span className="px-3 py-1 bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 text-sm font-semibold rounded-full border-2 border-amber-300 shadow-sm">
|
|
始祖 · {member.generation}世
|
|
</span>
|
|
```
|
|
|
|
**样式特点**:
|
|
- 金色渐变背景 `from-amber-100 to-orange-100`
|
|
- 深金色文字 `text-amber-800`
|
|
- 双像素金色边框 `border-2 border-amber-300`
|
|
- 轻微阴影 `shadow-sm`
|
|
- 加粗字体 `font-semibold`
|
|
- 显示"始祖 · X世"
|
|
|
|
#### 普通成员
|
|
```tsx
|
|
<span className="px-2 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full border border-primary/20">
|
|
{member.generation}世
|
|
</span>
|
|
```
|
|
|
|
**样式特点**:
|
|
- 主题色背景
|
|
- 普通边框
|
|
- 仅显示"X世"
|
|
|
|
### 3. 特殊说明文字
|
|
|
|
#### 始祖成员专属
|
|
```tsx
|
|
{member.isFounder && (
|
|
<p className="text-amber-700 font-semibold text-sm flex items-center gap-1">
|
|
<span>家族始祖</span>
|
|
<span className="text-amber-600">•</span>
|
|
<span>家族树的根基</span>
|
|
</p>
|
|
)}
|
|
```
|
|
|
|
**显示内容**:
|
|
- "家族始祖 • 家族树的根基"
|
|
- 金色文字
|
|
- 加粗显示
|
|
- 位于字、号、籍贯之前
|
|
|
|
#### 普通成员
|
|
- 无此说明
|
|
|
|
## 功能限制
|
|
|
|
### 禁用的操作按钮
|
|
|
|
#### 始祖成员
|
|
- ❌ **添加父亲按钮**: 隐藏（始祖是第一代，无父母）
|
|
- ❌ **添加母亲按钮**: 隐藏（始祖是第一代，无父母）
|
|
- ✅ **添加子女按钮**: 显示
|
|
- ✅ **添加配偶按钮**: 显示
|
|
|
|
#### 普通成员
|
|
- ✅ **添加父亲按钮**: 显示（如果没有父亲）
|
|
- ✅ **添加母亲按钮**: 显示（如果没有母亲）
|
|
- ✅ **添加子女按钮**: 显示
|
|
- ✅ **添加配偶按钮**: 显示
|
|
|
|
### 代码实现
|
|
|
|
```tsx
|
|
{!member.isFounder && !member.fatherId && (
|
|
<Button variant="outline" onClick={handleQuickAddFather} className="gap-2">
|
|
<UserPlus className="h-4 w-4" /> 添加父亲
|
|
</Button>
|
|
)}
|
|
|
|
{!member.isFounder && !member.motherId && (
|
|
<Button variant="outline" onClick={handleQuickAddMother} className="gap-2">
|
|
<UserPlus className="h-4 w-4" /> 添加母亲
|
|
</Button>
|
|
)}
|
|
```
|
|
|
|
## 完整视觉对比
|
|
|
|
### 始祖成员详情页
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ [头像] 👑 王德厚 │
|
|
│ [始祖 · 1世] (金色渐变标签) │
|
|
│ 家族始祖 • 家族树的根基 │
|
|
│ 字：德厚 │
|
|
│ 籍贯：山东省济南市 │
|
|
│ │
|
|
│ [添加子女] [添加配偶] [编辑] [删除] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### 普通成员详情页
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ [头像] 王建国 │
|
|
│ [2世] (普通标签) │
|
|
│ 字：建国 │
|
|
│ 籍贯：山东省济南市 │
|
|
│ │
|
|
│ [添加父亲] [添加母亲] [添加子女] │
|
|
│ [添加配偶] [编辑] [删除] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
## 设计理念
|
|
|
|
### 1. 视觉层次
|
|
|
|
- **皇冠图标**: 直观传达始祖身份
|
|
- **金色主题**: 营造尊贵感
|
|
- **渐变效果**: 增加视觉吸引力
|
|
- **特殊说明**: 强调始祖的重要性
|
|
|
|
### 2. 功能合理性
|
|
|
|
- **隐藏父母按钮**: 始祖是第一代，逻辑上不应有父母
|
|
- **保留子女配偶**: 始祖可以有后代和配偶
|
|
- **避免误操作**: 防止用户为始祖添加父母导致数据混乱
|
|
|
|
### 3. 一致性
|
|
|
|
- 与成员列表页的始祖标识保持一致
|
|
- 使用相同的金色主题
|
|
- 使用相同的皇冠图标
|
|
|
|
## 用户体验
|
|
|
|
### 视觉引导
|
|
1. 一眼识别始祖成员
|
|
2. 金色主题营造特殊感
|
|
3. 清晰的身份说明
|
|
|
|
### 操作限制
|
|
1. 防止逻辑错误
|
|
2. 引导正确的家族树构建
|
|
3. 保持数据一致性
|
|
|
|
## 技术实现
|
|
|
|
### 检测逻辑
|
|
```typescript
|
|
const isFounder = member.isFounder === true
|
|
```
|
|
|
|
### 条件渲染
|
|
```typescript
|
|
{member.isFounder && (
|
|
// 始祖专属内容
|
|
)}
|
|
|
|
{!member.isFounder && (
|
|
// 普通成员内容
|
|
)}
|
|
```
|
|
|
|
## 响应式设计
|
|
|
|
- 移动端：图标和标签自适应
|
|
- 平板：保持完整显示
|
|
- 桌面：最佳视觉效果
|
|
|
|
## 可访问性
|
|
|
|
- 清晰的视觉层次
|
|
- 足够的颜色对比度
|
|
- 语义化的HTML结构
|
|
- 图标辅助文字说明
|
|
|
|
## 未来优化
|
|
|
|
可能的改进方向:
|
|
|
|
- [ ] 添加始祖专属的徽章系统
|
|
- [ ] 始祖成员的特殊背景效果
|
|
- [ ] 始祖成员的专属统计信息
|
|
- [ ] 始祖成员的保护机制（防止误删）
|
|
- [ ] 始祖成员的特殊打印样式
|