# 家庭成员页面重新设计

## 概述

重新设计小程序家庭成员管理页面，从丑旧的行式列表改为温暖家庭风的卡片式布局，并将"添加成员"和"邀请成员"提升为底部固定按钮，邀请直接弹出海报。

## 当前问题

- 页面视觉老旧（紫色渐变头部 + 简单行式列表）
- 添加/邀请功能藏在齿轮设置弹窗中，需要额外点击
- 邀请流程需经过中间邀请码卡片，步骤多
- 成员行显示三维评分条，信息过重

## 设计方案

### 视觉风格：温暖家庭风

- 主色：暖橙 `#F97316` / 米白 `#FFFCF5` / 暖灰 `#F5F0EB`
- 卡片圆角 + 柔和阴影，家庭相册感
- 去掉紫色渐变，使用暖橙渐变头部

### 页面结构

```
┌─────────────────────────────┐
│  🏠 幸福之家 · 5位成员        │  ← 暖橙渐变头部
├─────────────────────────────┤
│                             │
│  ┌─────┐                    │
│  │ 🧑  │ 爸爸 · 家长        │  ← 卡片式成员条目
│  └─────┘                    │
│  ┌─────┐                    │
│  │ 👩  │ 妈妈 · 家长        │
│  └─────┘                    │
│  ┌─────┐                    │
│  │ 👦  │ 小明 · 孩子        │
│  └─────┘                    │
│                             │
│  [空状态: 邀请家人加入引导]     │
│                             │
├─────────────────────────────┤
│  [＋ 添加成员] [📨 邀请成员]  │  ← 底部固定栏
└─────────────────────────────┘
```

### 组件详细设计

#### 1. 页面头部

- 暖橙渐变背景 `linear-gradient(135deg, #F97316, #EA580C)`
- 居中布局：🏠 家庭图标 + 家庭名称 + 成员数
- 白色文字
- 圆角底部

#### 2. 成员列表

- 白底圆角卡片，柔和阴影
- 每行包含：
  - 左侧：头像 80rpx 圆形
  - 中间：昵称（粗体 30rpx）+ 关系标签（彩色小标签）
  - 右侧：箭头 `›`
- 无三维评分条
- 无筛选标签
- 点击 → 成员详情弹窗
- 卡片间间距 16rpx

#### 3. 空状态

- 当成员数为 0 时显示
- 大图标 👨‍👩‍👧‍👦
- 文案："还没有家庭成员"
- 副文案："邀请家人加入，一起记录成长"
- 按钮：「邀请家人」（暖橙填充）

#### 4. 底部固定栏

- 固定在页面底部，安全区适配
- 两个按钮并排，间距 20rpx
- 「＋ 添加成员」：白色背景 + 暖橙边框/文字，flex:1
- 「📨 邀请成员」：暖橙渐变填充，白色文字，flex:1
- 添加 → 跳转 `/pages/family/add-member`
- 邀请 → 加载 QR 码 → 直接弹出 SharePoster

#### 5. 成员详情弹窗

- 保留现有功能，视觉改造为暖色风格
- 顶部：头像 + 昵称 + 关系标签
- 信息区：性别 · 年龄 · 手机号
- 操作按钮 2 列网格：切换身份 / 编辑资料 / 关系问卷 / 记录互动 / 移出家庭

#### 6. 邀请流程

简化前：
```
点击齿轮 → 邀请成员 → 显示邀请码卡片 → 点击分享邀请卡 → 弹出海报
```

简化后：
```
点击「邀请成员」→ 加载 QR 码 → 直接弹出海报
```

### 移除内容

| 移除项 | 原因 |
|--------|------|
| 紫色渐变头部 | 改为暖橙家庭风 |
| 齿轮设置弹窗 | 功能合并到底部栏 |
| 筛选标签（全部/家长/孩子） | 精简需求 |
| 行内三维评分条 | 精简需求 |
| 中间邀请码卡片 | 直接弹出海报 |

### 保留内容

| 保留项 | 说明 |
|--------|------|
| 成员详情弹窗 | 操作入口，保留全部功能 |
| SharePoster 组件 | 邀请海报，直接触发 |
| 添加成员页面 | `/pages/family/add-member`，保持不变 |
| 切换身份/编辑资料/移出家庭等操作 | 在详情弹窗中保留 |

### 数据流

```
页面加载 → listFamilyMembers() → 渲染成员列表
点击成员 → showMemberDetail(m) → 详情弹窗
点击添加 → uni.navigateTo(/pages/family/add-member)
点击邀请 → generateFamilyInviteQrCode() → 获取 qrCodeBase64 → showPoster = true
```

### 文件变更清单

| 文件 | 变更类型 | 说明 |
|------|----------|------|
| `pages/profile-extra/family-members.vue` | 重写 | 模板/样式/脚本全部重新设计 |
| `components/SharePoster.vue` | 无变更 | 保持现有，直接调用 |

### 非功能性要求

- 遵循小程序限制：禁止可选链 `?.`、禁止 CSS Grid、禁止 `:key` 表达式
- 使用 Vue 2 Options API
- 匹配现有品牌色系