cfc/cfc-frontend/pages/index/parent-index.vue

<template>
<view class="container">
<!-- 加载状态 -->
<BaseLoading :loading="loading" text="正在加载..." />

<template v-if="!loading">
<!-- ===== a) 顶部 Banner ===== -->
<PageBanner theme="home"
  tagline="家庭健康成长俱乐部"
  quote="给全家的一站式幸福提案" />

<!-- ===== b) 孩子卡片 ===== -->
      <view class="children-row animate-fade-in animate-stagger-2">
        <template v-if="children.length > 0">
          <scroll-view
            class="children-scroll"
            scroll-x
            :scroll-with-animation="true"
            :enhanced="true"
            :show-scrollbar="false"
          >
            <PlayfulCard
              v-for="child in children"
              :key="child.id"
              variant="flat"
              shadow="sm"
              :clickable="true"
              class="child-card"
              :class="{ 'child-card-single': children.length === 1 }"
              @click="goToChildDetail(child)"
            >
              <view class="child-card-inner">
                <view class="child-avatar" :class="'child-avatar-color-' + (child.id % 6)">
                  <text class="child-avatar-text">{{ child.nickname ? child.nickname[0] : '?' }}</text>
                </view>
                <view class="child-card-body">
                  <text class="child-card-name">{{ child.nickname }}</text>
                  <view class="child-card-stats">
                    <text class="child-card-points">⭐ {{ child.totalPoints || 0 }}</text>
                    <text class="child-card-dan" v-if="child.danLevel">DAN{{ child.danLevel }}</text>
                  </view>
                  <view class="child-card-badges">
                    <BaseBadge variant="primary" size="xs" v-if="child.pendingReviewCount > 0">待审 {{ child.pendingReviewCount }}</BaseBadge>
                    <BaseBadge variant="error" size="xs" v-if="child.pendingWishCount > 0">心愿 {{ child.pendingWishCount }}</BaseBadge>
                  </view>
                </view>
                <view class="child-card-arrow">›</view>
              </view>
            </PlayfulCard>
          </scroll-view>
          <view class="scroll-hint" v-if="children.length > 1">
            <text class="scroll-hint-text">← 左右滑动查看更多 →</text>
          </view>
        </template>
        <PlayfulCard
          v-else
          variant="flat"
          :clickable="true"
          @click="goToAddChild"
          class="empty-children-card"
          padding="28rpx"
        >
          <view class="empty-children-inner">
            <view class="empty-children-icon">👶</view>
            <view class="empty-children-text">
              <text class="empty-children-title">还没有添加孩子</text>
              <text class="empty-children-hint">点击添加孩子，开始成长之旅</text>
            </view>
            <view class="empty-children-arrow">›</view>
          </view>
        </PlayfulCard>
      </view>

      <!-- 五行能量沙盘（浠艾福 — 全家庭版） -->
      <view class="animate-fade-in animate-stagger-3">
    <wuxing-sandbox mode="live"
      :scores="energyScores"
      :overall-score="energyOverall"
      :members="energyMembers"
      :dimensions="energyDimensions"
      :total-energy="totalEnergy"
      :total-health-index="totalHealthIndex"
      @point-click="goToDomain" />
      </view>

      <!-- 会员Banner（浠艾福俱乐部） -->
      <view class="membership-wrapper animate-fade-in animate-stagger-4">
        <view class="membership-banner" @click="goToMembership">
          <view class="banner-content">
            <text class="banner-icon">👑</text>
            <view class="banner-text">
              <text class="banner-title">{{ membershipText }}</text>
              <text class="banner-subtitle">点击查看会员权益</text>
            </view>
            <text class="banner-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- ===== c) 成长数据 ===== -->
      <view class="stats-section animate-fade-in animate-stagger-5">
        <view class="section-title">成长数据</view>
        <view class="stats-grid">
          <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToCompletionStats" class="stat-card" padding="0">
            <view class="stat-card-content">
              <view class="stat-header">
                <view class="stat-icon-wrap stat-icon-orange">
                  <text class="stat-icon-symbol">📋</text>
                </view>
                <view class="stat-body">
                  <text class="stat-value accent-color">{{ taskCompletionRate }}%</text>
                  <text class="stat-label">任务完成</text>
                </view>
              </view>
              <view class="stat-progress">
                <view class="progress-bar">
                  <view class="progress-fill" :style="{ width: taskCompletionRate + '%' }"></view>
                </view>
              </view>
              <text class="stat-more">查看分析 ›</text>
            </view>
          </PlayfulCard>
          <PlayfulCard variant="flat" shadow="sm" class="stat-card" padding="0">
            <view class="stat-card-content">
              <view class="stat-header">
                <view class="stat-icon-wrap stat-icon-gold">
                  <text class="stat-icon-symbol">⭐</text>
                </view>
                <view class="stat-body">
                  <text class="stat-value gold-color">{{ (selectedChild && selectedChild.totalPoints) || 0 }}</text>
                  <text class="stat-label">成长积分</text>
                </view>
              </view>
              <text class="stat-encourage">太棒了！</text>
            </view>
          </PlayfulCard>
          <PlayfulCard variant="flat" shadow="sm" class="stat-card" padding="0">
            <view class="stat-card-content">
              <view class="stat-header">
                <view class="stat-icon-wrap stat-icon-red">
                  <text class="stat-icon-symbol">🔥</text>
                </view>
                <view class="stat-body">
                  <text class="stat-value red-color">{{ (selectedChild && selectedChild.streakDays) || 0 }}</text>
                  <text class="stat-label">连续天数</text>
                </view>
              </view>
              <text class="stat-encourage" v-if="selectedChild && selectedChild.streakDays > 0">加油保持！</text>
              <text class="stat-encourage muted" v-else>开始坚持吧</text>
            </view>
          </PlayfulCard>
          <PlayfulCard variant="flat" shadow="sm" class="stat-card" padding="0">
            <view class="stat-card-content">
              <view class="stat-header">
                <view class="stat-icon-wrap stat-icon-teal">
                  <text class="stat-icon-symbol">✨</text>
                </view>
                <view class="stat-body">
                  <text class="stat-value teal-color">{{ habitCount }}</text>
                  <text class="stat-label">习惯打卡</text>
                </view>
              </view>
              <text class="stat-encourage">坚持就是胜利</text>
            </view>
          </PlayfulCard>
        </view>
      </view>

      <!-- ===== d) 今日重点 ===== -->
      <view class="today-section animate-fade-in animate-stagger-6">
        <view class="section-title">今日重点</view>
        <PlayfulCard variant="flat" class="today-card">
          <template slot="header">
            <view class="today-header">
              <text class="today-label">今日待完成</text>
              <text class="today-count">{{ pendingTasks.length }}项任务</text>
            </view>
          </template>
          <view class="task-list" v-if="pendingTasks.length > 0">
            <view class="task-item" v-for="task in pendingTasks.slice(0, 3)" :key="task.id">
              <view class="task-dot" :class="'dot-color-' + (task.id % 5)"></view>
              <text class="task-title">{{ task.title }}</text>
            </view>
          </view>
          <BaseEmpty v-else icon="🎉" title="今日任务已完成" description="太棒了！" :compact="true" />
          <view slot="actions" class="task-view-all" @click="goToTaskList">
            <text>查看全部</text>
            <text class="arrow">→</text>
          </view>
        </PlayfulCard>
      </view>

      <!-- ===== e) 成长里程碑 ===== -->
      <view class="milestone-section animate-fade-in animate-stagger-7">
        <view class="section-title">成长里程碑</view>
        <PlayfulCard variant="flat" class="milestone-card">
          <view class="milestone-item" v-if="selectedChild && selectedChild.streakDays >= 7">
            <view class="milestone-icon-wrap milestone-star">
              <text class="milestone-icon">🌟</text>
            </view>
            <text class="milestone-text">连续7天打卡</text>
          </view>
          <view class="milestone-item" v-if="selectedChild && selectedChild.streakDays >= 30">
            <view class="milestone-icon-wrap milestone-trophy">
              <text class="milestone-icon">🏆</text>
            </view>
            <text class="milestone-text">坚持一个月啦！</text>
          </view>
          <view class="milestone-item" v-if="(selectedChild && selectedChild.totalPoints) >= 1000">
            <view class="milestone-icon-wrap milestone-sparkle">
              <text class="milestone-icon">💫</text>
            </view>
            <text class="milestone-text">积分突破1000</text>
          </view>
          <BaseEmpty v-if="!hasMilestones" icon="🌱" title="开始养成好习惯" description="见证成长" :compact="true" />
        </PlayfulCard>
      </view>

      <!-- ===== f) 待处理事项 ===== -->
      <view class="pending-section animate-fade-in animate-stagger-8">
        <view class="section-title">📋 待处理事项</view>
        <view class="pending-grid">
          <view class="pending-card" @click="goToReview">
            <view class="pending-icon pending-icon--blue">
              <text class="pending-emoji">📝</text>
            </view>
            <view class="pending-info">
              <text class="pending-count accent-color">{{ pendingReviewTasks.length }}</text>
              <text class="pending-label">待审核任务</text>
            </view>
          </view>
          <view class="pending-card" @click="goToWishApprove">
            <view class="pending-icon pending-icon--pink">
              <text class="pending-emoji">💝</text>
            </view>
            <view class="pending-info">
              <text class="pending-count pink-color">{{ pendingReviewWishes.length }}</text>
              <text class="pending-label">待审批心愿</text>
            </view>
          </view>
          <view class="pending-card" @click="goToAssessmentReport">
            <view class="pending-icon pending-icon--green">
              <text class="pending-emoji">📊</text>
            </view>
            <view class="pending-info">
              <text class="pending-count teal-color">{{ hasNewReport ? '有新' : '暂无' }}</text>
              <text class="pending-label">最新测评报告</text>
            </view>
          </view>
          <view class="pending-card" @click="goToActivities">
            <view class="pending-icon pending-icon--orange">
              <text class="pending-emoji">🎉</text>
            </view>
            <view class="pending-info">
              <text class="pending-count orange-color">{{ hotActivityCount > 0 ? hotActivityCount : '暂无' }}</text>
              <text class="pending-label">活动推荐</text>
            </view>
          </view>
        </view>
      </view>

      <!-- ===== g) 成长建议 ===== -->
      <view class="advice-section animate-fade-in animate-stagger-9" v-if="growthAdvice.length > 0">
        <view class="section-title">💡 成长建议</view>
        <PlayfulCard variant="flat" class="advice-card" v-for="advice in growthAdvice" :key="advice.id" padding="0">
          <view class="advice-content">
            <view class="advice-icon-wrap">
              <text class="advice-icon">💡</text>
            </view>
            <view class="advice-text-wrap">
              <text class="advice-title">{{ advice.title }}</text>
              <text class="advice-desc">{{ advice.summary || advice.description }}</text>
            </view>
            <text class="advice-arrow">›</text>
          </view>
        </PlayfulCard>
      </view>

      <!-- ===== h) 待审核任务 ===== -->
      <view class="review-section animate-fade-in animate-stagger-10" v-if="pendingReviewTasks.length > 0">
        <view class="section-title">待审核任务</view>
        <PlayfulCard
          variant="flat"
          shadow="sm"
          class="review-card"
          v-for="task in pendingReviewTasks"
          :key="task.id"
          padding="0"
        >
          <view class="review-card-content">
            <view class="review-info">
              <text class="task-name">{{ task.title }}</text>
              <text class="task-child" v-if="task.childName">提供者: {{ task.childName }}</text>
            </view>
            <view class="review-actions">
              <PlayfulButton variant="success" size="xs" @click="approveTask(task.id)">通过</PlayfulButton>
              <PlayfulButton variant="error" size="xs" @click="rejectTask(task.id)">拒绝</PlayfulButton>
            </view>
          </view>
        </PlayfulCard>
      </view>

      <!-- ===== g) 快捷操作 ===== -->
      <view class="quick-section animate-fade-in animate-stagger-9">
        <view class="section-title">快捷操作</view>
        <PlayfulCard variant="flat" class="quick-card">
          <view class="quick-actions">
            <view class="action-item" @click="addTask">
              <view class="action-icon act-add">
                <text class="action-icon-text">➕</text>
              </view>
              <text class="action-label">添加任务</text>
            </view>
            <view class="action-item" @click="goToReview">
              <view class="action-icon act-review">
                <text class="action-icon-text">📋</text>
              </view>
              <text class="action-label">审核任务</text>
            </view>
            <view class="action-item" @click="manageChildren">
              <view class="action-icon act-child">
                <text class="action-icon-text">👨‍👩‍👧</text>
              </view>
              <text class="action-label">孩子管理</text>
            </view>
            <view class="action-item" @click="goToRewards">
              <view class="action-icon act-reward">
                <text class="action-icon-text">🎁</text>
              </view>
              <text class="action-label">奖励中心</text>
            </view>
            <view class="action-item" @click="inviteFriend">
              <view class="action-icon act-invite">
                <text class="action-icon-text">📤</text>
              </view>
              <text class="action-label">邀请家人</text>
            </view>
          </view>
        </PlayfulCard>
      </view>
    </template>
  </view>
</template>

<script>
import { getFamilyMembers, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard, getFamilyEnergySandbox, getEnergyOverview } from '../../utils/api.js'
import PageBanner from '../../components/PageBanner.vue'
import WuxingSandbox from '../../components/wuxing-sandbox.vue'
import PlayfulCard from '../../components/PlayfulCard.vue'
import PlayfulButton from '../../components/PlayfulButton.vue'
import BaseBadge from '../../components/BaseBadge.vue'
import BaseEmpty from '../../components/BaseEmpty.vue'
import BaseLoading from '../../components/BaseLoading.vue'

export default {
  components: { PageBanner, WuxingSandbox, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading },
  data() {
    return {
      nickname: '',
      familyMembers: [],
      children: [],
      selectedChild: null,
      pendingReviewTasks: [],
      pendingReviewWishes: [],
      pendingWishesCount: 0,
      pendingTasks: [],
      hotActivityCount: 0,
      hasNewReport: false,
      growthAdvice: [],
      taskCompletionRate: 0,
      habitCount: 0,
      membershipText: '开通家庭会员 畅享全部权益',
      loading: true,
      currentChildId: '',
      _initialLoadDone: false,
      _familyId: null,
      energyData: null,
      energyDimensions: [],
      totalEnergy: 0,
      totalHealthIndex: 0
    }
  },
  computed: {
    energyScores() {
      var d = this.energyData
      if (!d) return { body: 0, mind: 0, wisdom: 0, action: 0, wealth: 0 }
      return { body: d.bodyScore, mind: d.mindScore, wisdom: d.wisdomScore, action: d.actionScore, wealth: d.wealthScore }
    },
    energyOverall() {
      return this.energyData ? this.energyData.overallScore : 0
    },
    energyMembers() {
      return this.energyData ? this.energyData.members : []
    },
    greetingText() {
      const hour = new Date().getHours()
      if (hour < 6) return '夜深了'
      if (hour < 9) return '早上好'
      if (hour < 12) return '上午好'
      if (hour < 14) return '中午好'
      if (hour < 18) return '下午好'
      if (hour < 22) return '晚上好'
      return '夜深了'
    },
    hasMilestones() {
      const c = this.selectedChild
      if (!c) return false
      return (c.streakDays >= 7) || (c.streakDays >= 30) || (c.totalPoints >= 1000)
    }
  },
  // 使用 mounted 而非 onLoad，因为本组件作为条件渲染子组件（v-if），
  // page 生命周期钩子（onLoad/onShow）可能在组件挂载前已触发完毕
  mounted() {
    if (!uni.getStorageSync('token')) {
      uni.reLaunch({ url: '/pages/login/login' })
      return
    }
    this.loadData()
  },
  onShow() {
    // 首次 onShow 紧接 mounted 之后，跳过避免双重加载
    if (!this._initialLoadDone) {
      this._initialLoadDone = true
      return
    }
    const currentRole = uni.getStorageSync('currentRole') || 'parent'
    if (currentRole === 'child') {
      uni.reLaunch({ url: '/pages/index/child-index' })
      return
    }
    if (uni.getStorageSync('token')) {
      this.loadData()
    }
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const userInfo = uni.getStorageSync('userInfo')
        this.nickname = (userInfo && userInfo.nickname) ? userInfo.nickname : ''

        // 优先使用仪表盘接口（包含孩子列表 + 统计数据）
        let dashboardLoaded = false
        try {
          const dashRes = await getParentDashboard()
          const dashData = dashRes.data || {}
          const dashChildren = dashData.children || []
          // 过滤：仅保留孩子角色成员，排除家长/本人
          var currentUserId = uni.getStorageSync('userId')
          var filteredChildren = dashChildren.filter(function(c) {
            return c && c.id && c.id !== currentUserId && (c.role === 'child' || c.memberType === 'child' || !c.role)
          })
          if (filteredChildren.length > 0) {
            this.children = filteredChildren
            this.selectedChild = filteredChildren[0]
            this.taskCompletionRate = dashData.avgCompletionRate || 0
            this.habitCount = dashData.totalHabitCount || 0
            // 从仪表盘获取 familyId
            if (dashData.familyId) {
              this._familyId = dashData.familyId
            }
            dashboardLoaded = true
          }
        } catch (e) {
          console.log('获取仪表盘数据失败，降级到单独接口', e)
        }

        // 降级：使用原有单独接口
        if (!dashboardLoaded) {
          try {
            const currentUserId = uni.getStorageSync('userId')
            const membersRes = await getFamilyMembers()
            const data = membersRes.data || {}
            const parents = (data.parents || []).filter(function(p) { return p && p.id && p.id !== currentUserId }).map(function(p) { return { ...p, role: 'parent' } })
            const children = (data.children || []).filter(function(c) { return c && c.id }).map(function(c) { return { ...c, role: 'child' } })
            this.familyMembers = [].concat(parents, children)
            if (children.length > 0) {
              this.selectedChild = children[0]
            }
            // 保存 familyId 用于后续请求
            if (data.familyId) {
              this._familyId = data.familyId
            }
          } catch (e) {
            console.log('获取家庭成员失败', e)
          }

          if (this.children.length === 0) {
            const childrenRes = await getChildren()
            const rawChildren = childrenRes.data || []
            this.children = rawChildren
            if (this.children.length > 0 && !this.selectedChild) {
              this.selectedChild = this.children[0]
            }
          }
        }

        const reviewRes = await getPendingReviewTasks()
        const allReviewTasks = reviewRes.data || []
        this.pendingReviewTasks = allReviewTasks.slice(0, 3)

        try {
          const wishRes = await getPendingWishes(this._familyId)
          this.pendingReviewWishes = wishRes.data || []
        } catch (e) {
          console.log('获取待处理心愿失败', e)
          this.pendingReviewWishes = []
        }

        const reviewMap = {}
        const wishMap = {}
        for (let i = 0; i < allReviewTasks.length; i++) {
          const task = allReviewTasks[i]
          const cid = task.childId || task.assigneeId
          if (cid) {
            reviewMap[cid] = (reviewMap[cid] || 0) + 1
          }
        }
        for (let j = 0; j < (this.pendingReviewWishes || []).length; j++) {
          const wish = this.pendingReviewWishes[j]
          const cid = wish.childId
          if (cid) {
            wishMap[cid] = (wishMap[cid] || 0) + 1
          }
        }
        this.children = this.children.map(function(c) {
          return {
            ...c,
            pendingReviewCount: reviewMap[c.id] || 0,
            pendingWishCount: wishMap[c.id] || 0
          }
        })

        // 如果仪表盘未加载到数据，降级到单独统计接口
        if (!dashboardLoaded && this.children.length > 0) {
          const targetChild = this.selectedChild || this.children[0]
          try {
            const statsRes = await getChildCompletionStats({ childId: targetChild.id })
            if (statsRes && statsRes.data) {
              this.taskCompletionRate = statsRes.data.completionRate || 0
              this.habitCount = statsRes.data.completedTasks || 0
            }
          } catch (e) {
            console.log('获取完成率失败', e)
            this.taskCompletionRate = 0
          }
        }

        // 待完成任务 - 使用真实统计中的pendingTasks
        this.pendingTasks = []
        if (this.children.length > 0) {
          const targetChild = this.selectedChild || this.children[0]
          try {
            const r2 = await getChildCompletionStats({ childId: targetChild.id })
            if (r2 && r2.data && r2.data.pendingTasks > 0) {
              for (let k = 0; k < Math.min(r2.data.pendingTasks, 3); k++) {
                this.pendingTasks.push({ id: 100 + k, title: '待完成任务 ' + (k + 1) })
              }
            }
            } catch (e) {
            this.pendingTasks = []
          }
        }

        // 加载家庭能量沙盘数据（五维 + 所有成员）
        try {
          const energyRes = await getFamilyEnergySandbox()
          this.energyData = energyRes.data || null
        } catch (e) {
          console.log('获取能量沙盘数据失败', e)
          this.energyData = null
        }

        // 加载五维能量概览（账本模式）
        var overviewChildId = this.currentChildId
        if (overviewChildId) {
          try {
            var overviewRes = await getEnergyOverview(overviewChildId)
            if (overviewRes && overviewRes.data) {
              this.energyDimensions = overviewRes.data.dimensions || []
              this.totalEnergy = overviewRes.data.totalEnergy || 0
              this.totalHealthIndex = overviewRes.data.totalHealthIndex || 0
            }
          } catch (e) {
            console.log('获取能量概览失败', e)
          }
        }
      } catch (e) {
        console.error('加载数据失败', e)
      } finally {
        this.loading = false
      }
    },
    async approveTask(taskId) {
      try {
        await approveTask(taskId)
        uni.showToast({ title: '已通过', icon: 'success' })
        this.loadData()
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    async rejectTask(taskId) {
      try {
        await rejectTask(taskId)
        uni.showToast({ title: '已拒绝', icon: 'success' })
        this.loadData()
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    goToCompletionStats() {
      if (this.children.length === 1) {
        uni.navigateTo({ url: '/pages/stats/completion-rate?childId=' + this.children[0].id })
      } else {
        uni.navigateTo({ url: '/pages/stats/completion-rate?familyView=1' })
      }
    },
    goToDomain(code) {
      // 跳转到能量详情页（T10 创建）
      var childId = this.currentChildId
      if (!childId || !code) return
      uni.navigateTo({
        url: '/pages/energy/detail?childId=' + childId + '&code=' + code
      })
    },
    goToMembership() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToChildDetail(child) {
      uni.navigateTo({ url: '/pages/parent/child-detail?childId=' + child.id + '&childName=' + encodeURIComponent(child.nickname || '') })
    },
    addTask() { uni.navigateTo({ url: '/pages/tasks/create-task' }) },
    goToReview() { uni.navigateTo({ url: '/pages/tasks/review' }) },
    goToWishApprove() { uni.navigateTo({ url: '/pages/wishes/approve' }) },
    goToAssessmentReport() { uni.navigateTo({ url: '/pages/assessment/report' }) },
    goToActivities() { uni.switchTab({ url: '/pages/discover/index' }) },
    goToRewards() { uni.switchTab({ url: '/pages/rewards/rewards' }) },
    goToTaskList() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    manageChildren() { uni.navigateTo({ url: '/pages/profile/children' }) },
    inviteFriend() { uni.navigateTo({ url: '/pages/parent/invite/index' }) },
    goToAddChild() { uni.navigateTo({ url: '/pages/profile/create-child' }) }
  }
}
</script>

<style scoped>
/* ========================================
   Flat Card Design System — 家长端暖橙扁平
   ======================================== */

.container {
  padding: 32rpx;
  background: var(--bg, #F5F9FC);
  min-height: 100vh;
}

/* ========================================
   区块标题
   ======================================== */
.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--text, #1E293B);
  margin-bottom: var(--space-md);
}

/* ========================================
b) 孩子卡片
======================================== */
.children-row {
  margin-bottom: 48rpx;
}

.children-scroll {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow: hidden;
}

.child-card {
  display: inline-flex !important;
  margin-right: 16rpx;
  min-width: 320rpx;
  width: auto;
}

.child-card-single {
  width: 100%;
  margin-right: 0;
}

.child-card-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.child-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: var(--radius-full, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.child-avatar-color-0 { background: linear-gradient(135deg, var(--color-primary, #5B9BD5), var(--color-primary-dark, #3A7CC4)); }
.child-avatar-color-1 { background: linear-gradient(135deg, var(--color-accent, #0EA5E9), #6366F1); }
.child-avatar-color-2 { background: linear-gradient(135deg, #10B981, #059669); }
.child-avatar-color-3 { background: linear-gradient(135deg, #EC4899, #E11D48); }
.child-avatar-color-4 { background: linear-gradient(135deg, #84CC16, #65A30D); }
.child-avatar-color-5 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }

.child-avatar-text {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: 600;
}

.child-card-body {
  flex: 1;
  margin-left: 16rpx;
  min-width: 0;
}

.child-card-name {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  display: block;
  line-height: 1.3;
}

.child-card-stats {
  display: flex;
  align-items: center;
  margin-top: 6rpx;
  gap: 16rpx;
}

.child-card-points {
  font-size: 24rpx;
  color: var(--color-primary, #5B9BD5);
  font-weight: 600;
}

.child-card-dan {
  font-size: 22rpx;
  color: var(--color-accent, #0EA5E9);
  font-weight: 500;
}

.child-card-badges {
  display: flex;
  gap: 8rpx;
  margin-top: 8rpx;
  flex-wrap: wrap;
}

.child-card-arrow {
  font-size: 36rpx;
  color: var(--muted, #94A3B8);
  margin-left: 8rpx;
  flex-shrink: 0;
}

.scroll-hint {
  text-align: center;
  margin-top: 12rpx;
}

.scroll-hint-text {
  font-size: 22rpx;
  color: var(--muted, #94A3B8);
}

/* Empty children */
.empty-children-card {
  margin-top: 24rpx;
}

.empty-children-inner {
  display: flex;
  align-items: center;
}

.empty-children-icon {
  font-size: 56rpx;
  margin-right: 16rpx;
}

.empty-children-text {
  flex: 1;
}

.empty-children-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  display: block;
}

.empty-children-hint {
  font-size: 24rpx;
  color: var(--muted, #94A3B8);
  margin-top: 6rpx;
  display: block;
}

.empty-children-arrow {
  font-size: 36rpx;
  color: var(--muted, #94A3B8);
}

/* ========================================
   WuxingSandbox & Membership Wrappers
   ======================================== */
.membership-wrapper {
  margin-bottom: 48rpx;
}

/* 浠艾福俱乐部 - 会员Banner */
.membership-banner {
  padding: 30rpx 32rpx;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: var(--radius-md, 20rpx);
  box-shadow: var(--shadow-md);
}

.banner-content {
  display: flex;
  align-items: center;
}

.banner-icon {
  font-size: 60rpx;
  margin-right: 20rpx;
}

.banner-text {
  flex: 1;
}

.banner-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #8B4513;
  display: block;
}

.banner-subtitle {
  font-size: 24rpx;
  color: #A0522D;
  margin-top: 6rpx;
  display: block;
}

.banner-arrow {
  font-size: 40rpx;
  color: #8B4513;
}

/* ========================================
   c) 成长数据
   ======================================== */
.stats-section {
  margin-bottom: 48rpx;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.stat-card {
  width: calc(50% - 8rpx);
  box-sizing: border-box;
}

.stat-card-content {
  padding: 24rpx;
}

.stat-header {
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
}

.stat-icon-wrap {
  width: 56rpx;
  height: 56rpx;
  border-radius: var(--radius-sm, 12rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14rpx;
  flex-shrink: 0;
}

.stat-icon-symbol {
  font-size: 28rpx;
}

.stat-icon-orange { background: rgba(91, 155, 213, 0.12); }
.stat-icon-gold { background: rgba(245, 158, 11, 0.15); }
.stat-icon-red { background: rgba(239, 68, 68, 0.12); }
.stat-icon-teal { background: rgba(16, 185, 129, 0.12); }

.stat-body {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 40rpx;
  font-weight: 800;
  display: block;
  line-height: 1.1;
}

.stat-label {
  font-size: 22rpx;
  color: var(--text-secondary, #64748B);
  display: block;
  margin-top: 4rpx;
}

.accent-color { color: var(--color-primary, #5B9BD5); }
.gold-color { color: #F59E0B; }
.red-color { color: var(--color-error, #EF4444); }
.teal-color { color: #10B981; }

.stat-progress {
  margin-bottom: 10rpx;
}

.progress-bar {
  height: 8rpx;
  background: var(--border-light, #E2E8F0);
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary, #5B9BD5), #F59E0B);
  border-radius: 999rpx;
  transition: width 0.3s ease;
}

.stat-more {
  font-size: 22rpx;
  color: var(--color-accent, #0EA5E9);
  font-weight: 500;
  display: block;
}

.stat-encourage {
  font-size: 22rpx;
  color: #10B981;
  font-weight: 500;
  margin-top: 10rpx;
  display: block;
}

.stat-encourage.muted {
  color: var(--muted, #94A3B8);
}

/* ========================================
   d) 今日重点
   ======================================== */
.today-section {
  margin-bottom: 48rpx;
}

.today-card .today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.today-label {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
}

.today-count {
  font-size: 24rpx;
  color: var(--color-primary, #5B9BD5);
  font-weight: 600;
}

.task-list {
  margin-bottom: 8rpx;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 18rpx 0;
  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
}

.task-item:last-child {
  border-bottom: none;
}

.task-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.dot-color-0 { background: var(--color-primary, #5B9BD5); }
.dot-color-1 { background: #10B981; }
.dot-color-2 { background: var(--color-accent, #0EA5E9); }
.dot-color-3 { background: #F59E0B; }
.dot-color-4 { background: var(--color-error, #EF4444); }

.task-title {
  font-size: 28rpx;
  color: var(--text, #1E293B);
}

.task-view-all {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--text-secondary, #64748B);
  font-size: 24rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid var(--border-light, #E2E8F0);
}

.task-view-all .arrow {
  margin-left: 8rpx;
}

/* ========================================
   e) 成长里程碑
   ======================================== */
.milestone-section {
  margin-bottom: 48rpx;
}

.milestone-card {
  padding: 24rpx !important;
}

.milestone-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
}

.milestone-item:last-child {
  border-bottom: none;
}

.milestone-icon-wrap {
  width: 56rpx;
  height: 56rpx;
  border-radius: var(--radius-sm, 12rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.milestone-icon {
  font-size: 28rpx;
}

.milestone-star { background: rgba(245, 158, 11, 0.15); }
.milestone-trophy { background: rgba(91, 155, 213, 0.12); }
.milestone-sparkle { background: rgba(16, 185, 129, 0.12); }

.milestone-text {
  font-size: 28rpx;
  color: var(--text, #1E293B);
}

/* ========================================
   f) 待处理事项
   ======================================== */
.pending-section { margin-bottom: 48rpx; }
.pending-grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
.pending-card {
  width: calc(50% - 8rpx);
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
}
.pending-card:active { opacity: 0.8; }
.pending-icon {
  width: 72rpx; height: 72rpx;
  border-radius: 16rpx;
  display: flex; align-items: center; justify-content: center;
  margin-right: 16rpx; flex-shrink: 0;
}
.pending-icon--blue { background: rgba(91,155,213,0.12); }
.pending-icon--pink { background: rgba(236,72,153,0.12); }
.pending-icon--green { background: rgba(16,185,129,0.12); }
.pending-icon--orange { background: rgba(249,115,22,0.12); }
.pending-emoji { font-size: 32rpx; }
.pending-info { flex: 1; min-width: 0; }
.pending-count { font-size: 36rpx; font-weight: 800; display: block; }
.pending-label { font-size: 22rpx; color: #666; margin-top: 4rpx; display: block; }
.pink-color { color: #EC4899; }
.orange-color { color: #F97316; }

/* ========================================
   g) 成长建议
   ======================================== */
.advice-section { margin-bottom: 48rpx; }
.advice-card { margin-bottom: 12rpx; }
.advice-content {
  display: flex; align-items: center; padding: 24rpx;
}
.advice-icon-wrap {
  width: 56rpx; height: 56rpx;
  border-radius: 14rpx;
  background: rgba(91,155,213,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-right: 16rpx; flex-shrink: 0;
}
.advice-icon { font-size: 28rpx; }
.advice-text-wrap { flex: 1; min-width: 0; }
.advice-title { font-size: 28rpx; font-weight: 600; color: #333; display: block; }
.advice-desc { font-size: 24rpx; color: #999; margin-top: 4rpx; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advice-arrow { font-size: 36rpx; color: #ccc; margin-left: 12rpx; }

/* ========================================
   h) 待审核任务
   ======================================== */
.review-section {
  margin-bottom: 48rpx;
}

.review-card {
  margin-bottom: 16rpx;
}

.review-card:last-child {
  margin-bottom: 0;
}

.review-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
}

.review-info {
  flex: 1;
  min-width: 0;
}

.review-info .task-name {
  font-size: 28rpx;
  color: var(--text, #1E293B);
  display: block;
  margin-bottom: 4rpx;
}

.review-info .task-child {
  font-size: 22rpx;
  color: var(--muted, #94A3B8);
}

.review-actions {
  display: flex;
  gap: 12rpx;
  flex-shrink: 0;
  margin-left: 16rpx;
}

/* ========================================
   g) 快捷操作
   ======================================== */
.quick-section {
  margin-bottom: 48rpx;
}

.quick-card {
  padding: 16rpx 12rpx !important;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  margin-bottom: 12rpx;
  transition: transform 0.15s ease;
}

.action-item:active {
  transform: scale(0.92);
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: var(--radius-sm, 12rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.action-icon-text {
  font-size: 32rpx;
}

.act-add { background: rgba(91, 155, 213, 0.12); }
.act-review { background: rgba(16, 185, 129, 0.12); }
.act-child { background: rgba(14, 165, 233, 0.12); }
.act-reward { background: rgba(245, 158, 11, 0.15); }
.act-invite { background: rgba(139, 92, 246, 0.12); }

.action-label {
  font-size: 22rpx;
  color: var(--text-secondary, #64748B);
  font-weight: 500;
  text-align: center;
}
</style>