0.0.8.5

2025-11-24 14:02:34 +08:00
parent b7a8c9ee6e
commit 3d075c6076
941 changed files with 25613 additions and 27641 deletions
@@ -0,0 +1,211 @@
+# 始祖成员详情页特殊处理
+
+## 功能概述
+
+在成员详情页面，始祖成员会有特殊的视觉标识和功能限制。
+
+## 视觉特殊处理
+
+### 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结构
+- 图标辅助文字说明
+
+## 未来优化
+
+可能的改进方向:
+
+- [ ] 添加始祖专属的徽章系统
+- [ ] 始祖成员的特殊背景效果
+- [ ] 始祖成员的专属统计信息
+- [ ] 始祖成员的保护机制（防止误删）
+- [ ] 始祖成员的特殊打印样式