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

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

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

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

<!-- ===== 微行动卡片（P0:有效启动） ===== -->
<MicroActionCard
  v-if="selectedMemberId && selectedChild && selectedChild.id"
  :childId="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" />

<!-- ===== 家庭挑战卡片（P2-2） ===== -->
<FamilyChallengeCard
  v-for="ch in activeChallenges"
  :key="ch.id"
  :challenge="ch"
  :childId="currentChildId"
  @updated="loadFamilyInteraction" />

    <!-- ===== 健康圈入口（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>

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

      <!-- 能量沙盘 -->
      <WuxingSandbox
        v-if="sandboxData"
        mode="live"
        :scores="sandboxScores"
        :overallScore="sandboxData.overallScore || 0"
        :members="sandboxData.members || []"
        :dimensions="energyDimensions"
        :totalEnergy="totalEnergy"
        :totalHealthIndex="totalHealthIndex"
        starHeight="400rpx"
        showDimensionBar
        @point-click="onDomainClick" />

      <!-- 能量数据加载失败兜底 -->
      <view class="error-state" v-if="errorEnergy && !sandboxData" @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>

      <!-- ===== 推荐阅读（书册风格） ===== -->
      <ArticleBookshelf
        :articles="indexArticles"
        :loading="articlesLoading"
        :isLoggedIn="isLoggedIn"
        @articleClick="goArticleDetail"
        @moreArticles="goArticles"
      />

      <!-- ===== 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"
      :childId="selectedChild.id"
      @dismiss="onDailySummaryDismiss" />
  </view>
</template>

<script>
import { getFamilyMembers, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard, getFamilyEnergySandbox, getEnergyOverview, getVisibleFamilyMembers, getActivityList, getProductsByDomain, getContactList, getFeaturedArticles, getActiveAlerts, dismissAlert, getFamilyRanking, getChallengeList, getCircleRanking, getInviteQrCode } from '../../utils/api.js'
import PageBanner from '../../components/PageBanner.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'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import WuxingSandbox from '../../components/wuxing-sandbox.vue'
import ContactCard from '../../components/ContactCard.vue'
import FamilyHealthRanking from '../../components/FamilyHealthRanking.vue'
import FamilyChallengeCard from '../../components/FamilyChallengeCard.vue'
import ContactImport from '../../components/ContactImport.vue'
import RecommendedFeed from '../../components/RecommendedFeed.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import MicroActionCard from '../../components/MicroActionCard.vue'
import FeedbackToast from '../../components/FeedbackToast.vue'
import MilestoneCelebration from '../../components/MilestoneCelebration.vue'
import DailySummary from '../../components/DailySummary.vue'
import HealthAlertBanner from '../../components/HealthAlertBanner.vue'
import CircleRanking from '../../components/CircleRanking.vue'
import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
import feedbackEngine from '../../utils/feedback-engine.js'

export default {
  components: { PageBanner, RecommendedFeed, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading, FamilyRelationGraph, WuxingSandbox, ContactCard, ContactImport, FamilyMemberStrip, MicroActionCard, FeedbackToast, MilestoneCelebration, DailySummary, HealthAlertBanner, FamilyHealthRanking, FamilyChallengeCard, CircleRanking, ArticleBookshelf },
  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: [],
      hasFamilyData: false,
      sandboxData: null,
      errorEnergy: false,
      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
    }
  },
  computed: {
    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
      }
    },
    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()
    }
  },
  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
        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
            this.selectedChild = filteredChildren[0]
            this.currentChildId = filteredChildren[0].id
            this.familyAvgCompletionRate = dashData.avgCompletionRate || 0
            // 家长自身数据（积分 + 任务完成率）
            this.myPoints = dashData.parentPoints || 0
            this.myCompletionRate = dashData.parentCompletionRate || 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]
              this.currentChildId = children[0].id
            }
            // 保存 familyId 用于后续请求
            if (data.familyId) {
              this._familyId = data.familyId
            }
          } catch (e) {
            console.log('获取家庭成员失败', e)
          }

          if (this.children.length === 0) {
            try {
              const childrenRes = await getChildren()
              const rawChildren = childrenRes.data || []
              this.children = rawChildren
              if (this.children.length > 0 && !this.selectedChild) {
                this.selectedChild = this.children[0]
                this.currentChildId = this.children[0].id
              }
            } 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._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
          }
        })

        // 计算全家总积分（家长 + 所有孩子）
        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({ childId: 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({ childId: 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 {
          const energyRes = await getFamilyEnergySandbox()
          this.energyData = energyRes.data || null
          this.sandboxData = energyRes.data || null
          this.hasFamilyData = !!(energyRes.data && energyRes.data.members && energyRes.data.members.length > 0)
        } catch (e) {
          console.log('获取能量沙盘数据失败', e)
          this.energyData = null
          this.errorEnergy = true
        }

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

        // 加载家庭成员可见列表
        this.loadFamilyMembersVisible()
        // 加载健康预警（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 getVisibleFamilyMembers()
        this.familyMembersVisible = res.data || []
      } catch (e) {
        console.log('获取可见家庭成员失败', e)
        this.familyMembersVisible = []
      }
    },
    // 成员选择
    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' })
      }
    },
    onDomainClick(evt) {
      this.goToDomain(evt.code)
    },
    goToDomain(code) {
      // 跳转到能量详情页
      var childId = this.currentChildId
      if (!childId || !code) return
      uni.navigateTo({
        url: '/pages/energy/detail?childId=' + childId + '&code=' + code
      })
    },
    onFamilyMemberSelect(member) {
      this.selectedMemberId = member.id
    },
    onMicroActionCompleted() {
      this.loadData()
      feedbackEngine.trigger('micro_action')
    },
    onDailySummaryDismiss() {
      // DailySummary 已关闭，无额外操作
    },
    loadAlerts: function() {
      var childId = this.selectedChild && this.selectedChild.id
      if (!childId) return
      var self = this
      getActiveAlerts({ childId: childId }).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({ familyId: familyId }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.rankingMembers = res.data.members || []
          self.rankingTotalScore = res.data.totalScore || 0
        }
      }).catch(function() {})
      getChallengeList({ familyId: familyId }).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
      getCircleRanking({ familyId: familyId }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.circleName = res.data.circleName || ''
          self.circleRankings = res.data.rankings || []
        }
      }).catch(function() {
        self.circleRankings = []
        self.circleName = ''
      }).finally(function() {
        self.circleLoading = false
      })
    },
    goToHealthCircle: function() {
      uni.navigateTo({ url: '/pages/share/index' })
    },
    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' }) },
    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' }) },
    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.switchTab({ 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.switchTab({ 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/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) : ''
            }
          })
        }
      }).catch(function() {
        self.articlesLoading = false
      })
    },
    goArticles: function() {
      uni.navigateTo({ url: '/pages/mind-detail/articles' })
    },
    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-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;
}

/* ===== 健康圈入口卡片（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;
}

/* ===== 邀请码二维码弹窗 ===== */
.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;
}

</style>