cfc/docs/backup/superpowers/plans/2026-05-16-parent-redesign.md

家长首页重构 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development to implement this plan task-by-task.

Goal: Reconstruct parent mini-program homepage with child cards as core navigation, add child detail page.

Architecture: Vue 2 + uni-app. Add child card row to parent-index.vue top, move growth archive into new child-detail.vue page. Other pages add childId query param support.

Tech Stack: uni-app (Vue 2), WeChat miniprogram

---

Task 1: Create child-detail.vue (new page)

Files:

• Create: cfc-frontend/pages/parent/child-detail.vue

Spec:

• Route /pages/parent/child-detail?childId=X
• Top: child info card (avatar, name, points, DAN level, streak days)
• Middle: action buttons (创建任务 → navigate with childId, 心愿审核, 成长档案)
• Bottom: today's tasks list (call getTodayTasks(childId)), pending review items
• Use onLoad(options) to get childId from query params
• Data: getChildren() → find child by id, getTodayTasks(childId), getPendingReviewTasks(), wish API
• Style: match parent-index.vue color scheme (#FFF9F0 background, orange #FF8C42 accents, white cards with shadow)

Key code structure:

<template>
  <view class="child-detail-container">
    <!-- 孩子信息卡片 -->
    <view class="info-card">...</view>
    <!-- 操作区 -->
    <view class="actions">...</view>
    <!-- 今日任务 -->
    <view class="tasks-section">...</view>
    <!-- 待处理 -->
    <view class="pending-section">...</view>
  </view>
</template>

Task 2: Restructure parent-index.vue

Files:

• Modify: cfc-frontend/pages/index/parent-index.vue

Changes:

1. Replace the existing child-status-card with a child cards row at the top (after greeting):
   • One child: single large card ~70% width, centered, shows avatar, name, points, pending count
   • Multiple children: horizontal scroll scroll-view, each card ~160rpx wide
   • Click card → navigate to child-detail
2. Keep existing sections below: stat cards (今日概览), 今日重点, 成长里程碑
3. Enhance 待审核 section to show per-child items
4. Quick actions: remove 成长档案 (moved to child-detail), keep others

Layout structure:

welcome greeting
child cards row (scroll-view horizontal, new)
成长数据 (existing stats-grid)
今日重点 (existing today-section)
成长里程碑 (existing milestone-section)
待审核任务 (existing review-section, kept)
快捷操作 (existing quick-section, minus 成长档案)

Task 3: Register child-detail route in pages.json

Files:

• Modify: cfc-frontend/pages.json

Add:

{
  "path": "pages/parent/child-detail",
  "style": {
    "navigationBarTitleText": "孩子详情"
  }
}

Task 4: Support childId param in create-task.vue

Files:

• Modify: cfc-frontend/pages/tasks/create-task.vue

Changes:

• In onLoad(options): if options.childId exists, pre-select that child in the picker
• Add childId to data, set in onLoad
• The child picker already has children from mounted/getChildren, just set selectedChildIndex based on childId

Task 5: Support childId param in parent/wishes/index.vue

Files:

• Modify: cfc-frontend/pages/parent/wishes/index.vue

Changes:

• In onLoad(options): accept childId, filter wishes by childId if provided
• Add childId to data, pass to API calls that support it

Task 6: Support childId param in growth/index.vue

Files:

• Modify: cfc-frontend/pages/growth/index.vue

Changes:

• In onLoad(options): accept childId, auto-select that child
• If childId provided, skip the children list selection and directly load that child's records