# 家长端首页重构设计

**日期**: 2026-05-14
**状态**: 设计稿

## 1. 目标

重构家长端小程序首页，适配一孩到多孩场景，让孩子信息成为首页核心导航入口。

## 2. 设计原则

- **保留现有功能**：首页原有统计概览、待处理、快捷操作不动
- **增加而非替换**：在顶部增加孩子卡片行，现有内容下沉
- **一孩/多孩自适应**：一个孩子时卡片占满一行，多个孩子时横向滚动
- **成长档案不放在首页**：放入孩子详情页

## 3. 页面结构

### 3.1 家长首页 (`parent-index.vue`)

```
┌──────────────────────────────────────┐
│  上午好，王爸爸 👋                   │
│                                      │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │ 👦小明│ │ 👧小红│ │ 👶小华│  ← 孩子卡片行│
│  │ ⭐28  │ │ ⭐45  │ │ ⭐12  │         │
│  │ 📋2   │ │ ✅    │ │ 💝1   │         │
│  └──────┘ └──────┘ └──────┘        │
│                                      │
│  今日概览 (保留现有统计)              │
│  ✅任务完成 68%  ⭐本月积分 85       │
│  🔥连续打卡 5天  📝待审任务 3        │
│                                      │
│  待处理 (增强，混排所有孩子)          │
│  ├─ 📋 小明·整理书包 → [审核]        │
│  ├─ 💝 小红·买画笔 → [审批]          │
│  └─ 📋 小明·练字 → [审核]            │
│                                      │
│  快捷操作                             │
│  [➕创建任务] [📋任务审核] [💝心愿审批] │
└──────────────────────────────────────┘
```

**孩子卡片行规则：**
- 一孩：卡片占宽约 70%，居中，信息更丰富（含待审核数）
- 多孩：横向滚动，每卡片 160rpx 宽，显示头像、姓名、积分、待处理数
- 点击卡片 → `navigateTo /pages/parent/child-detail?childId=X`

### 3.2 孩子详情页 (`pages/parent/child-detail.vue`) — 新页面

```
┌──────────────────────────────────────┐
│  ← 返回          小明               │
│                                      │
│  ┌────── 孩子信息卡片 ──────┐        │
│  │  👦 小明  ⭐ 28 分       │        │
│  │  DAN: L3  🔥连续 5 天   │        │
│  │  📋 今日任务 3/5 完成    │        │
│  └──────────────────────────┘        │
│                                      │
│  操作区                               │
│  ┌──────────┐ ┌──────────┐          │
│  │ 📝       │ │ 💝       │          │
│  │ 创建任务  │ │ 心愿审核  │          │
│  └──────────┘ └──────────┘          │
│  ┌──────────┐                        │
│  │ 📊       │                        │
│  │ 成长档案  │  ← 这里放成长档案      │
│  └──────────┘                        │
│                                      │
│  今日任务                             │
│  ├─ ✅ 整理书包                      │
│  ├─ ⏳ 练字 30分钟                   │
│  └─ ⏳ 阅读 20分钟                   │
│                                      │
│  待处理                              │
│  ├─ 💝 买画笔 → 待审批              │
│  └─ 📋 整理书包 → 待审核            │
└──────────────────────────────────────┘
```

## 4. 文件变更清单

| 文件 | 变更类型 | 说明 |
|------|----------|------|
| `pages/index/parent-index.vue` | 修改 | 顶部增加孩子卡片行，快捷操作去掉成长档案 |
| `pages/parent/child-detail.vue` | 新增 | 孩子总览页 + 操作入口 |
| `pages.json` | 修改 | 注册 child-detail 路由 |
| `pages/tasks/create-task.vue` | 修改 | 支持 childId 参数自动选择孩子 |
| `pages/parent/wishes/index.vue` | 修改 | 支持 childId 参数过滤心愿列表 |
| `pages/growth/index.vue` | 修改 | 支持 childId 参数自动选择孩子 |
| `utils/api.js` | 修改 | 按需新增 childId 过滤 API 参数 |

### 页面路由

```json
// pages.json 新增
{
  "path": "pages/parent/child-detail",
  "style": { "navigationBarTitleText": "孩子详情" }
}
```

### API 改动策略

- 不新增后端 API
- 现有 `getChildren()` 已返回 id、nickname、danLevel、totalPoints、streakDays
- 待审核任务：`getPendingReviewTasks()` → 前端按 childId 过滤
- 待审批心愿：wish API 已支持 childId 参数
- 成长档案：`/api/growth/record/child/{childId}` 已存在

## 5. 组件设计要点

### 5.1 孩子卡片组件

```vue
<ChildCard>
  props: { child: Object, isSingle: Boolean }
  - 显示头像(emoji)、昵称、积分、DAN等级
  - 待审核任务数、待审批心愿数
  - 点击 @click → 跳转 child-detail
  - 单孩子模式: 大卡片，信息更多
  - 多孩子模式: 小卡片，横向滚动
</ChildCard>
```

### 5.2 首页数据加载

```
onShow():
  await getChildren() → 孩子列表
  await getPendingReviewTasks() → 按 childId 分组
  await getFamilyMembers() 或 points/stats → 今日概览
```

## 6. 错误/边界情况

- **孩子列表为空**：首页显示"添加孩子"引导卡片
- **挂载失败**：孩子卡片显示重试按钮
- **API 超时**：首页保留现有统计，孩子区域显示加载中
- **单个孩子**：卡片占宽 70%，居中显示
- **4+ 孩子**：横向滚动，最右侧有"查看更多"指示

## 7. 视觉风格

沿用现有配色：
- 卡片底色: #fff, 圆角 16rpx, 阴影
- 积分: 蓝色 #3B82F6
- 待审核: 橙色 #F59E0B
- 已完成: 绿色 #10B981