cfc/docs/superpowers/specs/2026-05-14-parent-redesign.md

家长端首页重构设计

日期: 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 参数

页面路由

// 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 孩子卡片组件

<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