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

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

<template v-if="!loading">
<!-- ===== a) 顶部 Banner ===== -->
<!-- ===== 新手任务进度条（onboarding 置顶引导） ===== -->
<OnboardingProgressBar ref="onboardingProgress" />

<!-- ===== 家庭成员选择条 ===== -->
<FamilyMemberStrip
  v-if="isLoggedIn"
  :members="familyMembersVisible"
  :selectedMemberId="selectedMemberId"
  :isParent="isFamilyAdmin"
  @select="onFamilyMemberSelect"
  @switch="onFamilyMemberSwitch"
  @removed="loadFamilyMembersVisible" />

<!-- ===== 无家庭成员空状态引导卡 ===== -->
<view class="empty-family-card" v-if="isLoggedIn && familyMembersVisible.length === 0">
  <view class="empty-family-icon">🏠</view>
  <text class="empty-family-title">创建我的家庭</text>
  <text class="empty-family-desc">添加家庭成员，开启五维能量之旅</text>
  <button class="empty-family-btn" @click="goAddMember">立即添加</button>
</view>

<!-- ===== 微行动卡片（P0:有效启动） ===== -->
<MicroActionCard
  v-if="selectedMemberId && selectedChild && selectedChild.id"
  :memberId="selectedChild.id"
  @completed="onMicroActionCompleted" />

<!-- ===== 健康预警横幅（P1-2） ===== -->
<HealthAlertBanner
  v-if="selectedMemberId && selectedChild && selectedChild.id"
  :alerts="healthAlerts"
  @dismiss="onAlertDismiss" />

      <!-- ===== 家庭健康排行榜（P2-2） ===== -->
        <FamilyHealthRanking
          v-if="rankingMembers && rankingMembers.length > 0"
          :list="rankingMembers"
          :totalScore="rankingTotalScore" />

      <!-- ===== 家庭挑战区域 ===== -->
      <view class="challenge-section">
        <view class="challenge-section-header" @click="goToChallengeManage">
          <text class="challenge-section-title">家庭挑战</text>
          <text class="challenge-section-action">管理 →</text>
        </view>
        <FamilyChallengeCard
          v-for="ch in activeChallenges"
          :key="ch.id"
          :challenge="ch"
          @cardClick="goToChallengeManage(ch.id)" />
      </view>

    <!-- ===== 健康圈入口（P3：社区扩散） ===== -->
    <view class="circle-entry-section">
      <!-- 有健康圈数据：显示排行榜预览 -->
      <PlayfulCard v-if="circleName && circleRankings.length > 0" variant="flat" shadow="sm" :clickable="true" @click="goToHealthCircle" class="circle-card-wide">
        <view class="circle-card-content">
          <view class="circle-header">
            <view class="circle-icon-wrap">
              <text class="circle-icon">🏅</text>
            </view>
            <view class="circle-header-body">
              <text class="circle-card-title">健康圈</text>
              <text class="circle-card-subtitle">{{ circleName }}</text>
            </view>
          </view>
          <view class="circle-ranking-preview">
            <view class="circle-rank-row" v-for="(item, idx) in circleRankings.slice(0, 3)" :key="idx">
              <text class="circle-rank-badge">{{ rankIcon(idx) }}</text>
              <text class="circle-rank-family">家庭 {{ idx + 1 }}</text>
              <text class="circle-rank-score">{{ item.totalScore || 0 }} 分</text>
            </view>
          </view>
          <view class="circle-action">
            <text class="circle-action-text">查看详情 →</text>
          </view>
        </view>
      </PlayfulCard>
      <!-- 无健康圈数据：邀请加入 -->
      <PlayfulCard v-else variant="flat" shadow="sm" :clickable="true" @click="goToHealthCircle" class="circle-card-wide circle-card-invite">
        <view class="circle-invite-content">
          <view class="circle-invite-icon">🏅</view>
          <text class="circle-invite-title">健康圈</text>
          <text class="circle-invite-desc">加入健康圈，和更多家庭一起健康打卡</text>
          <text class="circle-invite-cta">去看看 →</text>
        </view>
      </PlayfulCard>
    </view>

    <!-- ===== 五维家庭自检入口（P0-1/P0-2） ===== -->
    <view class="selfcheck-entry-section">
      <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToSelfCheck" class="selfcheck-card-wide">
        <view class="selfcheck-card-content">
          <view class="selfcheck-icon-wrap">
            <view class="selfcheck-icon-circle" style="background: #FF8C42;">
              <text class="selfcheck-icon-char">身</text>
            </view>
            <view class="selfcheck-icon-circle" style="background: #6366F1;">
              <text class="selfcheck-icon-char">智</text>
            </view>
            <view class="selfcheck-icon-circle" style="background: #F59E0B;">
              <text class="selfcheck-icon-char">富</text>
            </view>
            <view class="selfcheck-icon-circle" style="background: #10B981;">
              <text class="selfcheck-icon-char">行</text>
            </view>
            <view class="selfcheck-icon-circle" style="background: #FF6B9D;">
              <text class="selfcheck-icon-char">心</text>
            </view>
          </view>
          <view class="selfcheck-body">
            <text class="selfcheck-title">五维家庭自检</text>
            <text class="selfcheck-subtitle" v-if="selfCheckScore != null">
              最近得分 {{ selfCheckScore }}/45 分
            </text>
            <text class="selfcheck-subtitle" v-else>
              15题 · 5分钟 · 生成五行相生寻源建议
            </text>
          </view>
          <text class="selfcheck-arrow">→</text>
        </view>
      </PlayfulCard>
    </view>

    <!-- ===== 家庭成员关系图谱 ===== -->
<FamilyRelationGraph
  v-if="familyMembersVisible.length > 0"
  dimensionCode="home"
  :selfId="selfMemberId"
  :members="familyMembersVisible"
  :energyMap="energyMapForGraph"
  :intimacyMap="intimacyMapForGraph"
  @memberTap="goMemberDetail" />

      <!-- 通关引导进度条 -->
      <GateGuideBar :unlockStatus="unlockStatus" />

      <!-- ===== 新增：首页广告栏 ===== -->
      <AdBanner
        :activities="recommendedActivities"
        :products="recommendedProducts"
        :autoPlayInterval="3000"
        :swiperDuration="500" />
      <!-- ===== 能量沙盘 ===== -->
      <GateLock v-if="sandboxLocked && sandboxLockGate" :gate="sandboxLockGate" />
      <WuxingSandbox
        v-else-if="sandboxData"
        mode="live"
        :scores="familySandboxScores"
        :overallScore="familySandboxOverall"
        :members="familySandboxMembers"
        :personalData="sandboxPersonalData"
        :dimensions="energyDimensions"
        :totalEnergy="totalEnergy"
        :totalHealthIndex="totalHealthIndex"
        :familyUnlocked="familyUnlocked"
        :currentView="currentSandboxView"
        :memberCount="familyMembersVisible.length"
        starHeight="400rpx"
        showDimensionBar
        @view-change="onSandboxViewChange"
        @point-click="onDomainClick" />

      <!-- 能量数据加载失败兜底 -->
      <view class="error-state" v-if="errorEnergy && !sandboxData && !sandboxLocked" @click="loadData">
        <text class="error-state-text">家庭能量数据加载失败，点击重试</text>
      </view>

      <!-- ===== c) 成长数据 ===== -->
      <view class="stats-section animate-fade-in animate-stagger-5">
        <view class="section-title">成长数据</view>
        <view class="stats-row">
          <!-- 任务完成率：自己的 + 全家平均 -->
          <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToCompletionStats" class="stat-card-wide" 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-label-header">任务完成</text>
                </view>
              </view>
              <view class="stat-compare">
                <view class="stat-compare-row">
                  <text class="compare-label">自己的</text>
                  <text class="compare-value accent-color">{{ myCompletionRate }}%</text>
                </view>
                <view class="progress-bar-sm">
                  <view class="progress-fill-sm" :style="{ width: myCompletionRate + '%' }"></view>
                </view>
                <view class="stat-compare-row">
                  <text class="compare-label">全家平均</text>
                  <text class="compare-value">{{ familyAvgCompletionRate }}%</text>
                </view>
                <view class="progress-bar-sm">
                  <view class="progress-fill-sm muted" :style="{ width: familyAvgCompletionRate + '%' }"></view>
                </view>
              </view>
              <text class="stat-more">查看分析 ›</text>
            </view>
          </PlayfulCard>

          <!-- 成长积分：自己的 + 全家共 -->
          <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToRewards" class="stat-card-wide" 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-label-header">成长积分</text>
                </view>
              </view>
              <view class="stat-compare">
                <view class="stat-compare-row">
                  <text class="compare-label">自己的</text>
                  <text class="compare-value gold-color">{{ myPoints }}</text>
                </view>
                <view class="stat-compare-row">
                  <text class="compare-label">全家共</text>
                  <text class="compare-value">{{ familyTotalPoints }}</text>
                </view>
              </view>
              <text class="stat-encourage" v-if="myPoints > 0">太棒了！</text>
              <text class="stat-encourage muted" v-else>开始赚星星吧</text>
            </view>
          </PlayfulCard>
        </view>
      </view>

      <!-- ===== d) 今日重点 ===== -->
      <view class="today-section animate-fade-in animate-stagger-7">
        <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-8">
        <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-9">
        <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>

      <!-- ===== 重要关系（外部通讯录） ===== -->
      <view class="contact-section" v-if="!loading && familyMembersVisible.length > 0">
        <view class="contact-header">
          <text class="contact-section-title">重要关系</text>
          <view class="contact-header-right">
            <text class="contact-more" @click="loadContacts">刷新</text>
            <text class="contact-import-btn" @click="onShowImport">+ 导入</text>
          </view>
        </view>
        <scroll-view class="contact-scroll" scroll-x enable-flex>
          <view class="contact-scroll-inner">
            <view class="contact-card-wrap" v-for="item in contactList" :key="item.id" @click="onContactClick(item)">
              <ContactCard :contact="item" />
            </view>
            <view class="contact-card-wrap contact-add-card" @click="onShowImport">
              <view class="add-card-inner">
                <text class="add-card-icon">+</text>
                <text class="add-card-label">导入通讯录</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="contact-empty" v-if="contactList.length === 0">
          <text class="contact-empty-text">暂无重要联系人，点击导入添加</text>
        </view>
      </view>

      <!-- 导入联系人弹窗 -->
      <ContactImport
        :visible="showImportModal"
        @close="onCloseImport"
        @success="onImportSuccess" />
      
      <!-- 邀请码二维码弹窗 -->
      <view class="qr-code-modal" v-if="showQrCodeModal" @touchmove.stop.prevent @click="onCloseQrCodeModal">
        <view class="qr-code-modal-content" @click.stop>
          <view class="qr-code-modal-header">
            <text class="qr-code-modal-title">邀请二维码</text>
            <text class="qr-code-modal-close" @click="onCloseQrCodeModal">×</text>
          </view>
          <view class="qr-code-modal-body">
            <view class="qr-code-image-container">
              <image :src="(qrCodeData && qrCodeData.qrCodeBase64) || ''" class="qr-code-image" mode="aspectFit" />
            </view>
            <view class="qr-code-referral-code">
              <text class="qr-code-label">邀请码：</text>
              <text class="qr-code-code">{{ (qrCodeData && qrCodeData.referralCode) || '' }}</text>
              <text class="qr-code-copy" @click="onCopyReferralCode">复制</text>
            </view>
          </view>
        </view>
      </view>

      <!-- ===== 推荐商品+活动（混合信息流） ===== -->
      <RecommendedFeed
        :products="recommendedProducts"
        :activities="recommendedActivities"
        :loading="loadingProducts || loadingActivities"
        @itemClick="onFeedItemClick"
        @more="goMoreDiscover" />
      <view class="error-state" v-if="errorProducts || errorActivities">
        <text class="error-state-text">推荐加载失败</text>
      </view>

      <!-- ===== 推荐阅读（书册风格） ===== -->
      <view class="article-section animate-fade-in animate-stagger-11">
        <view class="article-header">
          <view class="section-title">📖 推荐阅读</view>
          <text class="article-more" @click="goArticles">更多 ›</text>
        </view>
        <ArticleBookshelf
          :articles="indexArticles"
          :loading="articlesLoading"
          :isLoggedIn="isLoggedIn"
          @articleClick="goArticleDetail"
        />
      </view>

      <!-- ===== h) 待审核任务 ===== -->
      <view class="review-section animate-fade-in animate-stagger-11" 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-10">
        <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>
            <!-- Added: QR Code button -->
            <view class="action-item" @click="onShowQrCodeModal">
              <view class="action-icon act-invite">
                <text class="action-icon-text">📱</text>
              </view>
              <text class="action-label">邀请码</text>
            </view>
          </view>
        </PlayfulCard>
      </view>
    </template>
    <!-- ===== L1 即时反馈：Toast + 庆祝 ===== -->
    <FeedbackToast
      :visible="toastVisible"
      :text="toastText"
      :icon="toastIcon"
      :animating="toastAnimating" />
    <MilestoneCelebration
      :visible="celebrationVisible"
      :title="celebrationTitle"
      :subtitle="celebrationSubtitle"
      :particles="celebrationParticles"
      @dismiss="celebrationVisible = false" />
    <!-- ===== L2 深度反馈：每日健康小语 ===== -->
    <DailySummary
      v-if="selectedMemberId && selectedChild && selectedChild.id"
      :memberId="selectedChild.id"
      @dismiss="onDailySummaryDismiss" />
  </view>
</template>

<script>
import { getFamilyMemberList, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard, getFamilyEnergySandbox, getEnergySandbox, getUnlockStatus, getEnergyOverview, getActivityList, getProductsByDomain, getContactList, getFeaturedArticles, getActiveAlerts, dismissAlert, getFamilyRanking, getChallengeList, getCircleList, getCircleRanking, getInviteQrCode, switchToFamilyMember, getSelfCheckStatus } from '../../utils/api.js'
import store from '../../store/index.js'
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'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import WuxingSandbox from '../../components/wuxing-sandbox.vue'
import ContactCard from '@/pages/home-pages/components/ContactCard.vue'
import FamilyHealthRanking from '@/pages/home-pages/components/FamilyHealthRanking.vue'
import FamilyChallengeCard from '../../components/FamilyChallengeCard.vue'
import ContactImport from '@/pages/home-pages/components/ContactImport.vue'
import RecommendedFeed from '../../components/RecommendedFeed.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import MicroActionCard from '@/pages/home-pages/components/MicroActionCard.vue'
import FeedbackToast from '@/pages/home-pages/components/FeedbackToast.vue'
import MilestoneCelebration from '@/pages/home-pages/components/MilestoneCelebration.vue'
import DailySummary from '@/pages/home-pages/components/DailySummary.vue'
import HealthAlertBanner from '@/pages/home-pages/components/HealthAlertBanner.vue'
import CircleRanking from '@/pages/home-pages/components/CircleRanking.vue'
import AdBanner from '@/pages/home-pages/components/AdBanner.vue'
import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
import OnboardingProgressBar from '../../components/OnboardingProgressBar.vue'
import GateLock from '../../components/gate-lock.vue'
import GateGuideBar from '@/pages/home-pages/components/gate-guide-bar.vue'
import feedbackEngine from '../../utils/feedback-engine.js'

export default {
  components: { RecommendedFeed, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading, FamilyRelationGraph, WuxingSandbox, ContactCard, ContactImport, FamilyMemberStrip, MicroActionCard, FeedbackToast, MilestoneCelebration, DailySummary, HealthAlertBanner, FamilyHealthRanking, FamilyChallengeCard, CircleRanking, ArticleBookshelf, OnboardingProgressBar, GateLock, GateGuideBar, AdBanner },
  data() {
    return {
      nickname: '',
      familyMembers: [],
      children: [],
      selectedChild: null,
      pendingReviewTasks: [],
      pendingReviewWishes: [],
      pendingWishesCount: 0,
      pendingTasks: [],
      hotActivityCount: 0,
      hasNewReport: false,
      myCompletionRate: 0,
      familyAvgCompletionRate: 0,
      myPoints: 0,
      familyTotalPoints: 0,
      // membershipText removed (no real function)
      loading: true,
      currentChildId: '',
      _initialLoadDone: false,
      _familyId: null,
      familyMembersVisible: [],
      selfMemberId: null,
      energyData: null,
      energyDimensions: [],
      totalEnergy: 0,
      totalHealthIndex: 0,
      recommendedActivities: [],
      recommendedProducts: [],
      sandboxData: null,
      sandboxPersonalData: null,
      sandboxFamilyData: null,
      errorEnergy: false,
      // 通关解锁状态
      sandboxLocked: false,
      sandboxLockGate: null,
      currentSandboxView: 'personal',
      familyUnlocked: false,
      familyLockGate: null,
      unlockStatus: null,
      errorTasks: false,
      errorActivities: false,
      errorProducts: false,
      loadingActivities: false,
      loadingProducts: false,
      contactList: [],
      showImportModal: false,
      // QR Code modal
      showQrCodeModal: false,
      qrCodeData: null,
      // 推荐阅读
      indexArticles: [],
      articlesLoading: false,
      isLoggedIn: false,
      gradientColors: [
        'linear-gradient(135deg, #10B981, #34D399)',
        'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
        'linear-gradient(135deg, #8B5CF6, #C084FC)',
        'linear-gradient(135deg, #F97316, #FB923C)',
        'linear-gradient(135deg, #6366F1, #818CF8)'
      ],
      selectedMemberId: null,
      // L1 即时反馈状态
      toastVisible: false,
      toastText: '',
      toastIcon: '✅',
      toastAnimating: false,
      celebrationVisible: false,
      celebrationTitle: '',
      celebrationSubtitle: '',
      celebrationParticles: [],
      // P1-2 健康预警
      healthAlerts: [],
      // P2-2 家庭互动
      rankingMembers: [],
      rankingTotalScore: 0,
      activeChallenges: [],
      // P3 健康圈（社区扩散）
      circleRankings: [],
      circleName: '',
      circleLoading: false,
      selfCheckScore: null
    }
  },
  computed: {
    isFamilyAdmin() {
      if (!this.familyMembersVisible || this.familyMembersVisible.length === 0) return false
      // isAdmin 语义为"成员本人是否为家庭创建者"；自己（isSelf）是创建者即管理员
      var me = this.familyMembersVisible.filter(function(m) { return m.isSelf })[0]
      return !!(me && me.isAdmin === true)
    },
    topPendingTasks() {
      return this.pendingTasks.slice(0, 3)
    },
    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 : []
    },
    sandboxScores() {
      if (!this.sandboxData) return { body: 0, mind: 0, wisdom: 0, action: 0, wealth: 0 }
      return {
        body: this.sandboxData.bodyScore || 0,
        mind: this.sandboxData.mindScore || 0,
        wisdom: this.sandboxData.wisdomScore || 0,
        action: this.sandboxData.actionScore || 0,
        wealth: this.sandboxData.wealthScore || 0
      }
    },
    familySandboxScores() {
      var d = this.sandboxFamilyData || {}
      return {
        body: d.bodyScore || 0,
        mind: d.mindScore || 0,
        wisdom: d.wisdomScore || 0,
        action: d.actionScore || 0,
        wealth: d.wealthScore || 0
      }
    },
    familySandboxOverall() {
      return this.sandboxFamilyData ? (this.sandboxFamilyData.overallScore || 0) : 0
    },
    familySandboxMembers() {
      return this.sandboxFamilyData ? (this.sandboxFamilyData.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)
    },
    energyMapForGraph() {
      var map = {}
      if (this.sandboxData && this.sandboxData.members) {
        for (var i = 0; i < this.sandboxData.members.length; i++) {
          var m = this.sandboxData.members[i]
          map[m.memberId || m.id] = {
            bodyScore: m.bodyScore || 0,
            mindScore: m.mindScore || 0,
            actionScore: m.actionScore || 0
          }
        }
      }
      return map
    },
    intimacyMapForGraph() {
      return {}
    }
  },
  // 使用 mounted 而非 onLoad，因为本组件作为条件渲染子组件（v-if），
  // page 生命周期钩子（onLoad/onShow）可能在组件挂载前已触发完毕
  mounted() {
    if (uni.getStorageSync('token')) {
      this.isLoggedIn = true
      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/home-pages/child-index' })
      return
    }
    if (uni.getStorageSync('token')) {
      this.isLoggedIn = true
      this.loadData()
    }
    if (this.$refs.onboardingProgress) {
      this.$refs.onboardingProgress.reload()
    }
  },
  onPullDownRefresh() {
    this.loadData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    rankIcon: function(idx) {
      var medals = ['🥇', '🥈', '🥉']
      return medals[idx] || '#' + (idx + 1)
    },
    async loadData() {
      this.loading = true
      try {
        var userInfo = uni.getStorageSync('userInfo')
        this.nickname = (userInfo && userInfo.nickname) ? userInfo.nickname : ''
        this.selfMemberId = uni.getStorageSync('userId') || null

        // 优先使用仪表盘接口（包含孩子列表 + 统计数据）
        let dashboardLoaded = false
        var _membersVisibleSet = 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')
          })
          if (filteredChildren.length > 0) {
            this.children = filteredChildren
            // 不自动选孩子：默认显示家长自己，等待用户从 FamilyMemberStrip 选择
            this.familyAvgCompletionRate = dashData.avgCompletionRate || 0
            // 家长自身数据（积分 + 任务完成率）
            this.myPoints = dashData.parentPoints || 0
            this.myCompletionRate = dashData.parentCompletionRate || 0
            // 从仪表盘获取 familyId
            if (dashData.familyId) {
              this._familyId = dashData.familyId
            }
            // 从仪表盘同步设置 familyMembersVisible（含家长本人），避免后续 loadFamilyMembersVisible() 再调 getFamilyMemberList
            var dashMembers = dashData.members || dashData.familyMembers || filteredChildren
            this.familyMembersVisible = dashMembers
            _membersVisibleSet = true
            dashboardLoaded = true
          }
        } catch (e) {
          console.log('获取仪表盘数据失败，降级到单独接口', e)
        }

        // 降级：使用原有单独接口（仅调用一次 getFamilyMemberList，合并 children 与 familyMembers 派生）
        if (!dashboardLoaded) {
          try {
            const currentUserId = uni.getStorageSync('userId')
            const membersRes = await getFamilyMemberList({ visibleOnly: true, includeFamily: true })
            const data = membersRes.data || {}
            var members = data.members || data || []
            if (!Array.isArray(members)) members = []
            const parents = members.filter(function(p) { return p.source === 'parent' && p.id && p.id !== currentUserId }).map(function(p) { return { ...p, role: 'parent' } })
            const children = members.filter(function(c) { return c.source !== 'parent' && c.id }).map(function(c) { return { ...c, role: 'child' } })
            this.familyMembers = [].concat(parents, children)
            // 从同一响应派生 children，避免再调 getChildren()（= getFamilyMemberList({})）
            this.children = children
            // 同步设置 familyMembersVisible，避免 loadFamilyMembersVisible() 重复调用 getFamilyMemberList
            this.familyMembersVisible = members
            _membersVisibleSet = true
            // 不自动选孩子：默认显示家长自己，等待用户从 FamilyMemberStrip 选择
            // 保存 familyId 用于后续请求
            if (data.familyId) {
              this._familyId = data.familyId
            }
          } catch (e) {
            console.log('获取家庭成员失败', e)
          }
        }

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

        try {
          const wishRes = await getPendingWishes()
          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.memberId || 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.memberId
          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
          }
        })

        // 计算全家总积分（家长 + 所有孩子）
        var totalPts = this.myPoints
        for (var pi = 0; pi < this.children.length; pi++) {
          totalPts += (this.children[pi].totalPoints || 0)
        }
        this.familyTotalPoints = totalPts

        // 如果仪表盘未加载到数据，降级：从孩子数据取近似值
        if (!dashboardLoaded) {
          // 降级：家长积分取自己的（从缓存或API），完成率取第一个孩子的
          const targetChild = this.selectedChild || (this.children.length > 0 ? this.children[0] : null)
          if (targetChild) {
            try {
              const statsRes = await getChildCompletionStats({ memberId: targetChild.id })
              if (statsRes && statsRes.data) {
                this.myCompletionRate = statsRes.data.completionRate || 0
              }
            } catch (e) {
              console.log('获取个人完成率失败', e)
            }
            userInfo = uni.getStorageSync('userInfo')
            this.myPoints = (userInfo && userInfo.totalPoints) || 0
            this.familyAvgCompletionRate = this.myCompletionRate
          }
        }

        // 待完成任务 - 优先使用后端返回的真实任务列表
        this.pendingTasks = []
        if (this.children.length > 0) {
          const targetChild = this.selectedChild || this.children[0]
          try {
            const r2 = await getChildCompletionStats({ memberId: targetChild.id })
            if (r2 && r2.data && r2.data.pendingTaskList && r2.data.pendingTaskList.length > 0) {
              this.pendingTasks = r2.data.pendingTaskList.slice(0, 3)
            } else if (r2 && r2.data && r2.data.pendingTasks > 0) {
              // 降级：只有数量没有列表时使用占位
              for (let k = 0; k < Math.min(r2.data.pendingTasks, 3); k++) {
                this.pendingTasks.push({ id: 'pending-' + k, title: '待完成任务' })
              }
            }
            } catch (e) {
            this.pendingTasks = []
          }
        }

        // 加载通关解锁状态
        try {
          var statusRes = await getUnlockStatus()
          if (statusRes && statusRes.data) {
            this.unlockStatus = statusRes.data
          }
        } catch (e) {
          console.log('获取通关解锁状态失败', e)
        }

        // 加载能量沙盘（含通关门禁）
        try {
          var memberId = uni.getStorageSync('currentMemberId') || uni.getStorageSync('currentChildId') || null
          var energyRes = await getEnergySandbox(this.currentSandboxView, memberId)
          if (energyRes && energyRes.data) {
            var ed = energyRes.data
            if (ed.locked) {
              this.sandboxLocked = true
              this.sandboxLockGate = ed.gate || null
              this.sandboxData = null
              this.sandboxPersonalData = null
              this.sandboxFamilyData = null
              this.energyData = null
            } else {
              this.sandboxLocked = false
              this.sandboxLockGate = null
              this.sandboxPersonalData = ed.personalData || null
              this.sandboxFamilyData = ed.familyData || null
              this.sandboxData = this.currentSandboxView === 'family' ? (ed.familyData || null) : (ed.personalData || null)
              this.energyData = ed.personalData || null
              this.familyUnlocked = ed.familyUnlocked || false
              this.familyLockGate = ed.familyGate || null
            }
          }
        } catch (e) {
          console.log('获取能量沙盘数据失败', e)
          this.energyData = null
          this.sandboxData = null
          this.errorEnergy = true
        }

        // 加载推荐活动
        this.loadRecommendedActivities()
        // 加载推荐商品
        this.loadRecommendedProducts()

        // 加载家庭成员可见列表（降级路径已在上面设置，此处跳过避免重复请求）
        if (!_membersVisibleSet) {
          this.loadFamilyMembersVisible()
        }
        this.loadSelfCheckStatus()
        // 加载健康预警（P1-2）
        this.loadAlerts()
        // 加载家庭健康互动（P2-2）
        this.loadFamilyInteraction()
        // 加载健康圈（P3：社区扩散）
        this.loadHealthCircle()
        // 加载外部联系人
        this.loadContacts()
        // 加载推荐阅读
        this.loadFeaturedArticles()

        // 加载五维能量概览（账本模式）
        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
        this.$emit('ready')
      }
    },
    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' })
      }
    },
    // 加载可见家庭成员
    async loadFamilyMembersVisible() {
      try {
        var res = await getFamilyMemberList({ visibleOnly: true })
        this.familyMembersVisible = res.data || []
      } catch (e) {
        console.log('获取可见家庭成员失败', e)
        this.familyMembersVisible = []
      }
    },
    // 成员选择
    goToCompletionStats() {
      if (this.children.length === 1) {
        uni.navigateTo({ url: '/pages/stats/completion-rate?memberId=' + this.children[0].id })
      } else {
        uni.navigateTo({ url: '/pages/stats/completion-rate?familyView=1' })
      }
    },
    onDomainClick(evt) {
      this.goToDomain(evt.code)
    },
    /** 切换沙盘个人/全家视角（本地切换，不重新请求） */
    onSandboxViewChange: function(view) {
      if (view === this.currentSandboxView) return
      this.currentSandboxView = view
      this.sandboxData = view === 'family' ? (this.sandboxFamilyData || null) : (this.sandboxPersonalData || null)
    },
    /** 单独加载沙盘数据（首次进入时使用，一次返回个人+全家） */
    loadSandboxData: async function() {
      try {
        var memberId = uni.getStorageSync('currentMemberId') || uni.getStorageSync('currentChildId') || null
        var energyRes = await getEnergySandbox(this.currentSandboxView, memberId)
        if (energyRes && energyRes.data) {
          var ed = energyRes.data
          if (ed.locked) {
            this.sandboxLocked = true
            this.sandboxLockGate = ed.gate || null
            this.sandboxData = null
            this.sandboxPersonalData = null
            this.sandboxFamilyData = null
          } else {
            this.sandboxLocked = false
            this.sandboxLockGate = null
            this.sandboxPersonalData = ed.personalData || null
            this.sandboxFamilyData = ed.familyData || null
            this.sandboxData = this.currentSandboxView === 'family' ? (ed.familyData || null) : (ed.personalData || null)
            this.familyUnlocked = ed.familyUnlocked || false
            this.familyLockGate = ed.familyGate || null
          }
        }
      } catch (e) {
        console.log('加载沙盘数据失败', e)
      }
    },
    goToDomain(code) {
      // 跳转到能量详情页
      var memberId = this.currentChildId
      if (!memberId || !code) return
      uni.navigateTo({
        url: '/pages/energy/detail?memberId=' + memberId + '&code=' + code
      })
    },
    onFamilyMemberSelect(member) {
      this.selectedMemberId = member.id
      // 选中的是孩子时，设置 selectedChild 以便子组件加载孩子数据
      var matched = this.children.find(function(c) { return c.id === member.id })
      if (matched) {
        this.selectedChild = matched
        this.currentChildId = matched.id
      } else {
        this.selectedChild = null
        this.currentChildId = ''
      }
    },
    async onFamilyMemberSwitch(member) {
      if (!member || !member.id) return
      var self = this
      uni.showModal({
        title: '切换确认',
        content: '切换到"' + (member.nickname || '该成员') + '"后，退出时需要输入您的密码。是否继续？',
        success: async function(res) {
          if (!res.confirm) return
          try {
            var result = await switchToFamilyMember(member.id, member.source || 'family_member')
            if (result.code === 200 && result.data) {
              store.commit('switchToMember', {
                memberId: result.data.memberId,
                effectiveRole: result.data.effectiveRole
              })
              uni.showToast({ title: '已切换到' + (member.nickname || '该成员'), icon: 'success' })
              setTimeout(function() {
                uni.reLaunch({ url: '/pages/index-home/index' })
              }, 1000)
            } else {
              uni.showToast({ title: result.message || '切换失败', icon: 'none' })
            }
          } catch (e) {
            uni.showToast({ title: '切换失败', icon: 'none' })
          }
        }
      })
    },
    onMicroActionCompleted() {
      this.loadData()
      feedbackEngine.trigger('micro_action')
    },
    goAddMember() {
      uni.navigateTo({ url: '/pages/family/add-member' })
    },
    onDailySummaryDismiss() {
      // DailySummary 已关闭，无额外操作
    },
    loadAlerts: function() {
      var memberId = this.selectedChild && this.selectedChild.id
      if (!memberId) return
      var self = this
      getActiveAlerts({ memberId: memberId }).then(function(res) {
        if (res.code === 200) {
          self.healthAlerts = res.data || []
        }
      }).catch(function() {})
    },
    handleDismissAlert: function(alertId) {
      var self = this
      dismissAlert({ id: alertId }).then(function(res) {
        if (res.code === 200) {
          self.healthAlerts = self.healthAlerts.filter(function(a) { return a.id !== alertId })
        }
      }).catch(function() {})
    },
    loadFamilyInteraction: function() {
      var familyId = this._familyId
      if (!familyId) return
      var self = this
      getFamilyRanking({}).then(function(res) {
        if (res.code === 200 && res.data) {
          self.rankingMembers = res.data.members || []
          self.rankingTotalScore = res.data.totalScore || 0
        }
      }).catch(function() {})
      getChallengeList({}).then(function(res) {
        if (res.code === 200 && Array.isArray(res.data)) {
          self.activeChallenges = res.data
        }
      }).catch(function() {})
    },
    loadHealthCircle: function() {
      var familyId = this._familyId
      if (!familyId) return
      var self = this
      self.circleLoading = true
      getCircleList({}).then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          var circleId = res.data[0].id
          getCircleRanking({ circleId: circleId }).then(function(r) {
            if (r.code === 200 && r.data) {
              self.circleName = r.data.circleName || ''
              self.circleRankings = r.data.rankings || []
            }
          }).catch(function() {
            self.circleRankings = []
            self.circleName = ''
          }).finally(function() {
            self.circleLoading = false
          })
        } else {
          self.circleRankings = []
          self.circleName = ''
          self.circleLoading = false
        }
      }).catch(function() {
        self.circleRankings = []
        self.circleName = ''
        self.circleLoading = false
      })
    },
    goToHealthCircle: function() {
      uni.navigateTo({ url: '/pages/share/index' })
    },
    goToSelfCheck: function() {
      uni.navigateTo({ url: '/pages/family/self-check-entry' })
    },
    loadSelfCheckStatus: function() {
      var self = this
      getSelfCheckStatus().then(function(res) {
        if (res.code === 200 && res.data && res.data.lastResult) {
          self.selfCheckScore = res.data.lastResult.totalScore
        }
      }).catch(function() {})
    },
    goMemberDetail(member) {
      if (!member || !member.memberId) return
      uni.navigateTo({
        url: '/pages/member-detail/member-detail?memberId=' + member.memberId + '&memberType=' + (member.memberType || 'child') + '&entrySource=relation-graph'
      })
    },
    addTask() { uni.navigateTo({ url: '/pages/tasks/create-task' }) },
    goToChallengeManage: function(id) {
      uni.navigateTo({ url: '/pages/health/challenge-manage?id=' + id })
    },
    goToReview() { uni.navigateTo({ url: '/pages/tasks/review' }) },
    goToWishApprove() { uni.navigateTo({ url: '/pages/wishes/approve' }) },
    goToAssessmentReport() { uni.navigateTo({ url: '/pages/assessment/report' }) },
    goToActivities() { uni.navigateTo({ url: '/pages/activity/index' }) },
    goToRewards() { uni.navigateTo({ url: '/pages/rewards/rewards' }) },
    onFeedItemClick(item) {
      if (item.type === 'product') {
        uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + item.id })
      } else if (item.type === 'activity') {
        uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + item.id })
      }
    },
    goMoreDiscover() {
      uni.navigateTo({ url: '/pages/discover/index' })
    },
    loadRecommendedActivities() {
      var self = this
      getActivityList({ page: 1, size: 6 }).then(function(res) {
        if (res && res.data) {
          self.recommendedActivities = res.data.records || []
        }
      }).catch(function() {
        self.errorActivities = true
      })
    },
    loadRecommendedProducts() {
      var self = this
      getProductsByDomain('all', 1, 6).then(function(res) {
        if (res && res.data) {
          self.recommendedProducts = res.data.records || []
        }
      }).catch(function() {
        self.errorProducts = true
      })
    },
    goToTaskList() { uni.navigateTo({ url: '/pages/tasks/tasks' }) },
    manageChildren() { uni.navigateTo({ url: '/pages/profile-extra/family-members' }) },

    loadContacts: function() {
      var self = this
      getContactList({}).then(function(res) {
        if (res.code === 200 && res.data) {
          self.contactList = Array.isArray(res.data) ? res.data : []
        }
      }).catch(function(e) {
        console.log('获取联系人失败', e)
      })
    },
    onContactClick: function(item) {
      uni.navigateTo({ url: '/pages/action-detail/contact-detail?id=' + item.id })
    },
    onShowImport: function() {
      this.showImportModal = true
    },
    onCloseImport: function() {
      this.showImportModal = false
    },
    onImportSuccess: function() {
      this.showImportModal = false
      this.loadContacts()
    },
    // QR Code modal methods
    onShowQrCodeModal: async function() {
      this.showQrCodeModal = true
      this.qrCodeData = null
      try {
        const res = await this.getInviteQrCode()
        if (res.code === 200) {
          this.qrCodeData = res.data
        }
      } catch (e) {
        console.error('获取二维码失败', e)
        uni.showToast({ title: '获取二维码失败', icon: 'none' })
      }
    },
    onCloseQrCodeModal: function() {
      this.showQrCodeModal = false
      this.qrCodeData = null
    },
    onCopyReferralCode: function() {
      if (this.qrCodeData && this.qrCodeData.referralCode) {
        uni.setClipboardData({
          data: this.qrCodeData.referralCode,
          success: () => {
            uni.showToast({ title: '复制成功', icon: 'success' })
          }
        })
      }
    },
    // 兼容旧引用
    getInviteQrCode: function() {
      return getInviteQrCode()
    },
    // ===== 推荐阅读 =====
    loadFeaturedArticles: function() {
      var self = this
      this.articlesLoading = true
      getFeaturedArticles({ size: 5 }).then(function(res) {
        self.articlesLoading = false
        if (res && res.code === 200) {
          var rawList = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
          var list = Array.isArray(rawList) ? rawList : []
          self.indexArticles = list.map(function(item, index) {
            return {
              id: item.id,
              category: item.categoryName || item.category || '热门文章',
              categoryColor: self.gradientColors[index % self.gradientColors.length],
              title: item.title || '',
              summary: item.summary || '',
              views: item.viewCount ? String(item.viewCount) : '0',
              date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
              coverImage: item.coverImage
            }
          })
        }
      }).catch(function() {
        self.articlesLoading = false
      })
    },
    goArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index' })
    },
    goArticleDetail: function(articleOrId) {
      var id = typeof articleOrId === 'object' ? articleOrId.id : articleOrId
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
    }
  }
}
</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);
}

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

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

.stat-card-wide {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

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

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

.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-body {
  flex: 1;
  min-width: 0;
}

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

/* 对比行布局 */
.stat-compare {
  margin-bottom: 12rpx;
}

.stat-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rpx;
}

.compare-label {
  font-size: 22rpx;
  color: var(--text-secondary, #64748B);
}

.compare-value {
  font-size: 30rpx;
  font-weight: 700;
}

/* 进度条 - 紧凑版 */
.progress-bar-sm {
  height: 6rpx;
  background: var(--border-light, #E2E8F0);
  border-radius: 999rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

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

.progress-fill-sm.muted {
  background: linear-gradient(90deg, #94A3B8, #CBD5E1);
}

.accent-color { color: var(--color-primary, #5B9BD5); }
.gold-color { color: #F59E0B; }

.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: 8rpx;
  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 {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  width: calc(50% - 8rpx);
  box-sizing: border-box;
}
.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;
}

/* ===== Error State ===== */
.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  background: #FFF;
  border-radius: 16rpx;
  border: 1rpx dashed #E2E8F0;
}
.error-state-text {
  font-size: 26rpx;
  color: #94A3B8;
  text-align: center;
}

/* ===== 重要关系（通讯录） ===== */
.contact-section {
  margin: 20rpx 20rpx 0;
}
.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.contact-section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.contact-header-right {
  display: flex;
  gap: 16rpx;
  align-items: center;
}
.contact-more {
  font-size: 24rpx;
  color: #999;
}
.contact-import-btn {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}
.contact-scroll {
  white-space: nowrap;
  overflow: hidden;
}
.contact-scroll-inner {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  padding: 8rpx 0 16rpx;
}
.contact-card-wrap {
  flex-shrink: 0;
  width: 220rpx;
}
.contact-card-wrap:active {
  opacity: 0.8;
}
.contact-add-card {
  width: 160rpx;
}
.add-card-inner {
  width: 160rpx;
  height: 280rpx;
  background: #fff;
  border-radius: 16rpx;
  border: 2rpx dashed #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}
.add-card-icon {
  font-size: 48rpx;
  color: #ccc;
}
.add-card-label {
  font-size: 22rpx;
  color: #999;
}
.contact-empty {
  padding: 40rpx 0;
  text-align: center;
}
.contact-empty-text {
  font-size: 26rpx;
  color: #ccc;
}

/* ===== 推荐阅读 ===== */
.article-section {
  margin-bottom: 48rpx;
}
.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.article-header .section-title {
  margin-bottom: 0;
}
.article-more {
  font-size: 26rpx;
  color: var(--color-primary, #F97316);
}
.article-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.article-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.article-card:active {
  opacity: 0.8;
}
.article-category {
  display: inline-block;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}
.article-category-text {
  font-size: 20rpx;
  color: #fff;
}
.article-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  line-height: 1.4;
}
.article-summary {
  display: block;
  font-size: 24rpx;
  color: #888;
  line-height: 1.5;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 4rpx;
}
.meta-icon {
  font-size: 24rpx;
}
.meta-text {
  font-size: 22rpx;
  color: #999;
}
.article-date {
  font-size: 22rpx;
  color: #bbb;
}

/* ===== 家庭挑战区域 ===== */
.challenge-section {
  margin-bottom: 28rpx;
}
.challenge-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx 12rpx;
}
.challenge-section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1E293B;
}
.challenge-section-action {
  font-size: 24rpx;
  color: #10B981;
  font-weight: 600;
}

/* ===== 健康圈入口卡片（P3：社区扩散） ===== */
.circle-entry-section {
  margin: 0 20rpx 28rpx 20rpx;
}
.circle-card-wide {
  width: 100%;
}
.circle-card-content {
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.circle-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.circle-icon-wrap {
  width: 56rpx;
  height: 56rpx;
  border-radius: 14rpx;
  background: linear-gradient(135deg, #10B981, #34D399);
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-icon {
  font-size: 28rpx;
}
.circle-header-body {
  flex: 1;
}
.circle-card-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.4;
}
.circle-card-subtitle {
  display: block;
  font-size: 22rpx;
  color: #6B7280;
  margin-top: 2rpx;
}
.circle-ranking-preview {
  background: #F0FDF4;
  border-radius: 12rpx;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.circle-rank-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.circle-rank-badge {
  font-size: 24rpx;
  width: 40rpx;
  text-align: center;
}
.circle-rank-family {
  flex: 1;
  font-size: 24rpx;
  color: #374151;
  font-weight: 500;
}
.circle-rank-score {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 600;
}
.circle-action {
  display: flex;
  justify-content: flex-end;
}
.circle-action-text {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}

/* 无数据：邀请加入样式 */
.circle-card-invite {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
}
.circle-invite-content {
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}
.circle-invite-icon {
  font-size: 48rpx;
  margin-bottom: 4rpx;
}
.circle-invite-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #065F46;
}
.circle-invite-desc {
  font-size: 24rpx;
  color: #6B7280;
  text-align: center;
  line-height: 1.5;
}
.circle-invite-cta {
  font-size: 26rpx;
  color: #F97316;
  font-weight: 600;
  margin-top: 4rpx;
}

/* ===== 五维家庭自检入口卡片（P0-1/P0-2） ===== */
.selfcheck-entry-section {
  margin: 0 20rpx 28rpx 20rpx;
}
.selfcheck-card-wide {
  width: 100%;
}
.selfcheck-card-content {
  padding: 28rpx 24rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.selfcheck-icon-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.selfcheck-icon-circle {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10rpx;
  border: 4rpx solid #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.12);
}
.selfcheck-icon-circle:last-child {
  margin-right: 0;
}
.selfcheck-icon-char {
  font-size: 24rpx;
  font-weight: 700;
  color: #fff;
}
.selfcheck-body {
  flex: 1;
}
.selfcheck-title {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.4;
}
.selfcheck-subtitle {
  display: block;
  font-size: 22rpx;
  color: #6B7280;
  margin-top: 4rpx;
}
.selfcheck-arrow {
  font-size: 30rpx;
  color: #F97316;
  font-weight: 600;
  flex-shrink: 0;
}

/* ===== 邀请码二维码弹窗 ===== */
.qr-code-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
}

.qr-code-modal-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 32rpx;
  max-width: 600rpx;
  width: 100%;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
  position: relative;
}

.qr-code-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.qr-code-modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1E293B;
}

.qr-code-modal-close {
  font-size: 48rpx;
  color: #94A3B8;
  line-height: 1;
  padding: 8rpx;
  cursor: pointer;
}

.qr-code-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rpx;
}

.qr-code-image-container {
  width: 280rpx;
  height: 280rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 16rpx;
  padding: 20rpx;
}

.qr-code-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-code-referral-code {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx;
  background: #f9fafb;
  border-radius: 16rpx;
  width: 100%;
  box-sizing: border-box;
}

.qr-code-label {
  font-size: 26rpx;
  color: #64748b;
  font-weight: 500;
}

.qr-code-code {
  flex: 1;
  font-size: 32rpx;
  font-weight: 700;
  color: #1E293B;
  word-break: break-all;
  letter-spacing: 2rpx;
}

.qr-code-copy {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
  padding: 8rpx 16rpx;
  background: #fff;
  border-radius: 8rpx;
  border: 1px solid #F97316;
  cursor: pointer;
}

.qr-code-copy:active {
  opacity: 0.8;
}

/* 无家庭成员空状态引导卡 */
.empty-family-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx 24rpx;
  padding: 48rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  border: 2rpx dashed #FED7AA;
}
.empty-family-icon {
  font-size: 88rpx;
  margin-bottom: 16rpx;
}
.empty-family-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #9A3412;
  margin-bottom: 10rpx;
}
.empty-family-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 28rpx;
}
.empty-family-btn {
  width: 320rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #F97316, #FF8C42);
  border-radius: 40rpx;
  border: none;
}
.empty-family-btn::after {
  border: none;
}

</style>