freedakgmail
143 lines
4.0 KiB
Markdown
143 lines
4.0 KiB
Markdown
# 始祖添加页面UI改进
|
|
|
|
## 新增特殊提醒框
|
|
|
|
当用户添加家族树的第一个成员时，页面会显示一个醒目的提醒框。
|
|
|
|
### 视觉设计
|
|
|
|
#### 整体布局
|
|
- **位置**: 页面顶部，返回按钮和标题之间
|
|
- **背景**: 金色渐变 `from-amber-50 to-orange-50`
|
|
- **边框**: 双像素金色边框 `border-2 border-amber-200`
|
|
- **阴影**: 轻微阴影效果 `shadow-sm`
|
|
- **圆角**: 圆角矩形 `rounded-lg`
|
|
|
|
#### 图标设计
|
|
- **图标**: 👑 皇冠
|
|
- **大小**: `text-2xl`
|
|
- **容器**: 圆形背景 `w-12 h-12 bg-amber-100 rounded-full`
|
|
- **位置**: 左侧固定
|
|
|
|
#### 文字内容
|
|
- **标题**: "添加家族始祖"
|
|
- 字体: `font-serif font-bold`
|
|
- 大小: `text-xl`
|
|
- 颜色: `text-amber-900`
|
|
|
|
- **提示列表**: 4条要点
|
|
- 颜色: `text-amber-800`
|
|
- 大小: `text-sm`
|
|
- 项目符号: 金色圆点 `text-amber-600 font-bold`
|
|
|
|
### 提示内容
|
|
|
|
1. **第一条**: 这是您家族树的**第一位成员**，将成为整个家族的根基
|
|
2. **第二条**: 系统将自动标记为**"始祖"**，并设为**第1代**
|
|
3. **第三条**: 后续所有成员的世代将以始祖为起点计算
|
|
4. **第四条**: 建议填写完整的姓名、生卒年月、籍贯等信息，以便后代追溯
|
|
|
|
### 条件显示
|
|
|
|
```typescript
|
|
{isFirstMember && (
|
|
<div className="mb-6 p-6 bg-gradient-to-r from-amber-50 to-orange-50 border-2 border-amber-200 rounded-lg shadow-sm">
|
|
{/* 提醒框内容 */}
|
|
</div>
|
|
)}
|
|
```
|
|
|
|
只有当 `isFirstMember === true` 时才显示提醒框。
|
|
|
|
### 页面标题和描述
|
|
|
|
#### 始祖模式
|
|
- **标题**: "添加家族始祖"
|
|
- **描述**: "请认真填写始祖信息，这将是家族历史的起点"
|
|
|
|
#### 普通模式
|
|
- **标题**: "新增家族成员"
|
|
- **描述**: "填写成员信息，完善家族树"
|
|
|
|
## 用户体验提升
|
|
|
|
### 视觉引导
|
|
1. **醒目的金色主题**: 使用金色渐变和边框，突出始祖的重要性
|
|
2. **皇冠图标**: 直观传达"始祖"的特殊地位
|
|
3. **清晰的层次**: 标题、图标、内容分层明确
|
|
|
|
### 信息传达
|
|
1. **重要性说明**: 明确告知这是第一位成员，是家族根基
|
|
2. **自动处理说明**: 告知用户系统会自动设置始祖标记和世代
|
|
3. **影响范围说明**: 说明后续成员的世代计算方式
|
|
4. **填写建议**: 提醒用户填写完整信息的重要性
|
|
|
|
### 心理暗示
|
|
- 金色主题营造庄重感
|
|
- 详细说明增加用户的重视程度
|
|
- 建议性文字引导用户认真填写
|
|
|
|
## 技术实现
|
|
|
|
### 检测逻辑
|
|
```typescript
|
|
const existingMembers = Object.values(treeData.members)
|
|
const isFirstMember = existingMembers.length === 0
|
|
```
|
|
|
|
### 条件渲染
|
|
```typescript
|
|
{isFirstMember && (
|
|
// 特殊提醒框
|
|
)}
|
|
|
|
<h1>
|
|
{isFirstMember ? '添加家族始祖' : '新增家族成员'}
|
|
</h1>
|
|
|
|
<p>
|
|
{isFirstMember
|
|
? '请认真填写始祖信息，这将是家族历史的起点'
|
|
: '填写成员信息，完善家族树'}
|
|
</p>
|
|
```
|
|
|
|
## 配色方案
|
|
|
|
### 金色主题
|
|
- **浅金色背景**: `from-amber-50 to-orange-50`
|
|
- **金色边框**: `border-amber-200`
|
|
- **深金色文字**: `text-amber-900` (标题)
|
|
- **中金色文字**: `text-amber-800` (内容)
|
|
- **亮金色强调**: `text-amber-600` (项目符号)
|
|
- **金色图标背景**: `bg-amber-100`
|
|
|
|
### 语义化
|
|
- 金色象征尊贵、重要
|
|
- 渐变增加视觉吸引力
|
|
- 多层次的金色营造丰富的视觉效果
|
|
|
|
## 响应式设计
|
|
|
|
- **移动端**: 提醒框自适应宽度
|
|
- **图标**: 固定大小，不随屏幕变化
|
|
- **文字**: 使用相对单位，保持可读性
|
|
- **间距**: 合理的 padding 和 gap
|
|
|
|
## 可访问性
|
|
|
|
- **语义化HTML**: 使用适当的标签
|
|
- **清晰的层次**: 标题、内容分明
|
|
- **足够的对比度**: 金色文字在浅金色背景上清晰可读
|
|
- **图标辅助**: 皇冠图标增强视觉识别
|
|
|
|
## 未来优化
|
|
|
|
可能的改进方向：
|
|
|
|
- [ ] 添加动画效果（淡入、滑入）
|
|
- [ ] 添加关闭按钮（用户确认后可关闭）
|
|
- [ ] 添加"了解更多"链接到帮助文档
|
|
- [ ] 添加示例信息提示
|
|
- [ ] 支持自定义提醒内容
|