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

<template>
  <view class="container">
    <!-- 品牌头部 -->
    <PageBanner theme="mind-wisdom"
      tagline="心智成长 · 智慧人生"
      quote="知己知彼，百战不殆" />

    <!-- ===== 心/智 Tab栏（最顶部） ===== -->
    <view class="tab-bar">
      <view
        :class="['tab-item', activeTab === 'emotion' ? 'active' : '']"
        @click="switchTab('emotion')">
        <text class="tab-icon">&#x2764;</text>
        <text class="tab-label">心·心理</text>
      </view>
      <view
        :class="['tab-item', activeTab === 'cognitive' ? 'active' : '']"
        @click="switchTab('cognitive')">
        <text class="tab-icon">&#x1F9E0;</text>
        <text class="tab-label">智·认知</text>
      </view>
    </view>

    <!-- 游客登录引导卡 -->
    <template v-if="!isLoggedIn">
      <LoginGuideCard
        title="登录后查看心智成长报告"
        :items="[
          '查看EMI心理测评四维分析',
          '查看DAN认知六维雷达图',
          '阅读专属文章、参与认知训练'
        ]" />
    </template>

    <!-- ===== 心·心理 Tab ===== -->
    <template v-if="activeTab === 'emotion'">

    <!-- 登录后：五维能量条 -->
    <FamilyEnergyBar
      v-if="isLoggedIn"
      dimensionCode="mind"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />

    <!-- 关系图谱（登录后可见） -->
    <FamilyRelationGraph
      v-if="isLoggedIn && familyMembersVisible.length > 0"
      dimensionCode="mind"
      :selfId="activeChildId"
      :members="familyMembersVisible"
      :energyMap="energyMapForGraph"
      :intimacyMap="intimacyMapForGraph"
      @memberTap="goMemberDetail" />

    <!-- 登录后：用户快捷入口 -->
    <UserQuickEntry
      v-if="isLoggedIn"
      :userName="userName"
      roleName="家长"
      :currentChildName="currentChildName"
      :children="children"
      @childChanged="onChildChanged"
      @scrollTo="scrollToSection" />

    <!-- ===== 心理能量概况 ===== -->
    <view class="energy-overview" v-if="emiData">
      <view class="energy-badge">
        <text class="badge-icon">&#x2764;</text>
        <text class="badge-value">{{ emiData.overallScore || 0 }}</text>
        <text class="badge-label">心能量</text>
      </view>
      <view class="energy-badge">
        <text class="badge-icon">&#x1F4AA;</text>
        <text class="badge-value">{{ emiData.resilienceScore || 0 }}</text>
        <text class="badge-label">韧性评分</text>
      </view>
      <view class="energy-badge">
        <text class="badge-icon">&#x1F64F;</text>
        <text class="badge-value">{{ emiData.emotionScore || 0 }}</text>
        <text class="badge-label">情绪评分</text>
      </view>
    </view>

    <!-- EMI 四维条形图 -->
    <view class="emi-section" v-if="emiData">
      <view class="emi-card">
        <text class="emi-card-title">EMI 心理四维</text>
        <view class="emi-bar-item" v-for="dim in emiDimensions" :key="dim.key">
          <text class="emi-bar-label">{{ dim.label }}</text>
          <view class="emi-bar-track">
            <view class="emi-bar-fill" :style="{ width: (emiData[dim.key] || 0) + '%', background: dim.color }"></view>
          </view>
          <text class="emi-bar-score">{{ emiData[dim.key] || 0 }}</text>
          <text :class="['emi-bar-level', 'level-' + getScoreLevel(emiData[dim.key] || 0)]">{{ getScoreLevelText(emiData[dim.key] || 0) }}</text>
        </view>
        <view class="emi-footer">
          <text class="emi-overall">综合EQ分: {{ emiData.overallScore || 0 }}</text>
          <view class="emi-link" @click="goEmotionReport">
            <text class="emi-link-text">查看完整报告</text>
            <text class="emi-link-arrow">&#x2192;</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 无 EMI 数据占位 -->
    <view class="placeholder-card" v-if="!emiData && !emiLoading">
      <text class="placeholder-icon">&#x1F9E0;</text>
      <text class="placeholder-title">心理评估</text>
      <text class="placeholder-desc">完成 EMI 心理测评后，可在此查看详细的心理分析报告</text>
      <view class="placeholder-btn" @click="goAssessment" v-if="isLoggedIn">预约测评</view>
      <view class="placeholder-btn" @click="goLogin" v-else>立即登录</view>
    </view>

    <!-- ===== 大五人格雷达图（从EMI数据中提取） ===== -->
    <view class="section personality-section" v-if="emiData">
      <view class="section-header">
        <text class="section-title">大五人格</text>
      </view>
      <RadarChart
        :dimensions="personalityDimensions"
        :scores="personalityScores"
        :childName="currentChildName || '孩子'"
        fillColor="#8B5CF6"
        gridColor="#EDE9FE"
        labelColor="#6D28D9" />
    </view>

    <!-- 每日心理 -->
    <view class="section" v-if="sectionVisible('daily_tip')">
      <view class="section-header">
        <text class="section-title">每日心理</text>
      </view>
      <view class="tip-card">
        <view class="tip-left-bar"></view>
        <view class="tip-body">
          <text class="tip-title">{{ dailyTip.title }}</text>
          <text class="tip-content">{{ dailyTip.content }}</text>
          <view class="tip-footer">
            <text class="tip-source">{{ dailyTip.source }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐阅读 -->
    <view class="section" v-if="sectionVisible('recommended_reading')">
      <view class="section-header">
        <text class="section-title">推荐阅读</text>
      </view>
      <view class="article-list">
        <view class="article-card" v-for="article in emotionArticles" :key="article.id" @click="goArticleDetail(article.id)">
          <view class="article-category" :style="{ background: article.categoryColor }">
            <text class="article-category-text">{{ article.category }}</text>
          </view>
          <text class="article-title">{{ article.title }}</text>
          <text class="article-summary">{{ article.summary }}</text>
          <view class="article-meta">
            <view class="meta-item">
              <text class="meta-icon">&#x1F4D6;</text>
              <text class="meta-text">{{ article.views }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">&#x1F44D;</text>
              <text class="meta-text">{{ article.likes }}</text>
            </view>
            <text class="article-date">{{ article.date }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 心愿单入口（心理Tab） -->
    <view class="section wishlist-section" v-if="isLoggedIn">
      <view class="wishlist-card" @click="goWishlist">
        <view class="wishlist-left">
          <text class="wishlist-icon">💝</text>
        </view>
        <view class="wishlist-body">
          <text class="wishlist-title">心愿单</text>
          <text class="wishlist-desc">孩子可在此创建、兑换心愿</text>
        </view>
        <text class="wishlist-arrow">›</text>
      </view>
    </view>

    </template>

    <!-- ===== 智·认知 Tab ===== -->
    <template v-if="activeTab === 'cognitive'">

    <!-- 登录后：用户快捷入口 -->
    <UserQuickEntry
      v-if="isLoggedIn"
      :userName="userName"
      roleName="家长"
      :currentChildName="currentChildName"
      :children="children"
      @childChanged="onChildChanged"
      @scrollTo="scrollToSection" />

    <!-- ===== 认知区块 ===== -->
      <!-- 认知总分明细 -->
      <view class="cognitive-score-highlight" v-if="assessmentData">
        <view class="score-big-cell">
          <text class="score-big-label">认知总分</text>
          <text class="score-big-value">{{ assessmentData.overallScore || 0 }}</text>
        </view>
        <view class="score-big-cell">
          <text class="score-big-label">DAN等级</text>
          <text class="score-big-value highlight">{{ assessmentData.danLevel || '-' }}</text>
        </view>
        <view class="score-big-cell">
          <text class="score-big-label">上次测评</text>
          <text class="score-big-value small">{{ assessmentData.assessmentDate || '-' }}</text>
        </view>
      </view>
      <!-- 综合认知评分（操作入口） -->
      <view class="cognitive-overview" v-if="assessmentData">
        <view class="cognitive-score-card">
          <view class="score-actions">
            <view class="score-link" @click="goCognitiveReport">
              <text class="score-link-text">查看完整报告</text>
              <text class="score-link-arrow">&#x2192;</text>
            </view>
            <view class="score-link secondary" @click="goAssessment">
              <text class="score-link-text">预约测评</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 无测评数据占位 -->
      <view class="placeholder-card" v-if="!assessmentData && !assessmentLoading">
        <text class="placeholder-icon">&#x1F9E0;</text>
        <text class="placeholder-title">认知评估</text>
        <text class="placeholder-desc">完成 DAN 认知测评后，可在此查看详细的六维认知分析报告</text>
        <view class="placeholder-btn" @click="goAssessment" v-if="isLoggedIn">预约测评</view>
        <view class="placeholder-btn" @click="goLogin" v-else>立即登录</view>
      </view>

      <!-- 认知六维雷达图 -->
      <view class="radar-section" v-if="assessmentData && familyMembers.length > 0">
        <scroll-view class="member-scroll" scroll-x show-scrollbar="false">
          <view class="member-row">
            <view
              v-for="member in familyMembers"
              :key="member.childId"
              :class="['member-tab', member.childId === selectedChildId ? 'active' : '']"
              @click="selectMember(member.childId)"
            >
              <text class="member-name">{{ member.childName }}</text>
              <text class="member-overall">{{ member.overallScore || 0 }}分</text>
            </view>
          </view>
        </scroll-view>
        <view class="radar-card">
          <RadarChart
            :dimensions="cognitiveDimensions"
            :scores="currentScores"
            :childName="currentChildName"
            @dimensionClick="goTraining"
          />
          <text class="radar-hint">点击维度标签进入能力训练</text>
        </view>
      </view>

      <!-- 认知训练入口 -->
      <view class="section" v-if="isLoggedIn">
        <view class="section-header">
          <text class="section-title">认知训练</text>
        </view>
        <view class="game-grid">
          <view class="game-item" @click="goGame('schulte')">
            <view class="game-icon-wrap" style="background: #FFF7ED">
              <text class="game-icon">&#x1F3AF;</text>
            </view>
            <text class="game-name">舒尔特方格</text>
          </view>
          <view class="game-item" @click="goGame('1a2b')">
            <view class="game-icon-wrap" style="background: #EFF6FF">
              <text class="game-icon">&#x1F522;</text>
            </view>
            <text class="game-name">猜数字</text>
          </view>
          <view class="game-item" @click="goGame('sudoku')">
            <view class="game-icon-wrap" style="background: #EDE9FE">
              <text class="game-icon">&#x1F9E9;</text>
            </view>
            <text class="game-name">数独</text>
          </view>
        </view>
      </view>

      <!-- 本月阅读统计 -->
      <view class="section" v-if="isLoggedIn && readingStats">
        <view class="section-header">
          <text class="section-title">本月阅读</text>
        </view>
        <view class="reading-card">
          <view class="reading-stats">
            <text class="reading-count">{{ readingStats.totalArticles || 0 }}篇</text>
            <text class="reading-divider">/</text>
            <text class="reading-duration">{{ readingMinutes }}分钟</text>
          </view>
          <view class="reading-progress-wrap">
            <view class="reading-progress-track">
              <view class="reading-progress-fill" :style="{ width: (readingStats.progress || 0) + '%' }"></view>
            </view>
            <text class="reading-progress-text">{{ readingStats.progress || 0 }}%</text>
          </view>
          <view class="reading-link" @click="goArticles">
            <text class="reading-link-text">去阅读 &#x2192;</text>
          </view>
        </view>
      </view>

      <!-- 推荐阅读（认知Tab内） -->
      <view class="section" v-if="sectionVisible('recommended_reading')">
        <view class="section-header">
          <text class="section-title">推荐阅读</text>
        </view>
        <view class="article-list">
          <view class="article-card" v-for="article in cognitiveArticles" :key="article.id" @click="goArticleDetail(article.id)">
            <view class="article-category" :style="{ background: article.categoryColor }">
              <text class="article-category-text">{{ article.category }}</text>
            </view>
            <text class="article-title">{{ article.title }}</text>
            <text class="article-summary">{{ article.summary }}</text>
            <view class="article-meta">
              <view class="meta-item">
                <text class="meta-icon">&#x1F4D6;</text>
                <text class="meta-text">{{ article.views }}</text>
              </view>
              <view class="meta-item">
                <text class="meta-icon">&#x1F44D;</text>
                <text class="meta-text">{{ article.likes }}</text>
              </view>
              <text class="article-date">{{ article.date }}</text>
            </view>
          </view>
        </view>
      </view>

    </template>

    <!-- ===== 底部：维度任务/活动/商品 ===== -->
    <DimensionTasks
      v-if="isLoggedIn"
      :dimensionCode="currentDimensionCode"
      :tasks="dimensionTasks"
      @taskClick="onTaskClick"
      @moreTasks="goTasks" />

    <DimensionActivities
      :dimensionCode="currentDimensionCode"
      :activities="dimensionActivities"
      @activityClick="goActivityDetail"
      @moreActivities="goMoreActivities" />

    <DimensionProducts
      :dimensionCode="currentDimensionCode"
      :products="dimensionProducts"
      @productClick="goProductDetail"
      @moreProducts="goMoreProducts" />

    <!-- ===== 底部：功能入口 Grid（通用） ===== -->
    <view class="func-section" v-if="sectionVisible('func_entries')">
      <view class="func-grid">
        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
          <view class="func-icon-wrap">
            <text class="func-icon">{{ item.icon }}</text>
          </view>
          <text class="func-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import RadarChart from '../../components/RadarChart.vue'
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import UserQuickEntry from '../../components/UserQuickEntry.vue'
import DimensionTasks from '../../components/DimensionTasks.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import { getVisibleSections, getFeaturedArticles, getEmiReport, getAssessmentLatestResult, getDailyTip, getReadingStats, getFamilyEnergySandbox, getTodayTasksByCategory, getActivityList, getProductsByDomain, getChildren, getVisibleFamilyMembers, getEnergyOverview } from '../../utils/api.js'
import config from '../../config.js'

export default {
  components: { PageBanner, RadarChart, LoginGuideCard, FamilyEnergyBar, UserQuickEntry, DimensionTasks, DimensionActivities, DimensionProducts, FamilyRelationGraph },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      currentChildId: null,
      visibleSections: [],
      familyMembersVisible: [],

      // 心理 Tab 数据
      emiData: null,
      emiLoading: true,
      personalityDimensions: [
        { key: 'opennessScore', label: '开放性' },
        { key: 'conscientiousnessScore', label: '尽责性' },
        { key: 'extraversionScore', label: '外向性' },
        { key: 'agreeablenessScore', label: '宜人性' },
        { key: 'neuroticismScore', label: '神经质' }
      ],
      dailyTip: {
        title: '成长型思维',
        content: '拥有成长型思维的孩子相信自己的能力可以通过努力提升，他们更愿意接受挑战，从失败中学习。作为家长，多鼓励孩子的努力而非天赋，可以帮助孩子建立成长型思维。',
        source: '—— 卡罗尔·德韦克《终身成长》'
      },
      emiDimensions: [
        { key: 'emotionScore', label: '情绪商数', color: '#FF6B35' },
        { key: 'resilienceScore', label: '心理韧性', color: '#F97316' },
        { key: 'stressCopingScore', label: '压力应对', color: '#FB923C' },
        { key: 'selfAwarenessScore', label: '自我认知', color: '#FBBF24' }
      ],

      // 认知 Tab 数据
      assessmentData: null,
      assessmentLoading: true,
      cognitiveDimensions: [
        { label: '感知', key: 'perception' },
        { label: '专注', key: 'focus' },
        { label: '记忆', key: 'memory' },
        { label: '逻辑', key: 'logic' },
        { label: '空间', key: 'spatial' },
        { label: '加工速度', key: 'processingSpeed' }
      ],
      familyMembers: [],
      selectedChildId: null,
      currentScores: [0, 0, 0, 0, 0, 0],
      currentChildName: '',
      readingStats: null,

      // 功能入口
      funcList: [
        { icon: '\u{1F4D6}', label: '阅读', needLogin: false, page: '/pages/mind/articles' },
        { icon: '\u{1F3AE}', label: '小游戏', needLogin: true, page: '/pages/games/list' },
        { icon: '\u{1F4CA}', label: '测评报告', needLogin: true, page: '/pages/mind/emotion-report' },
        { icon: '\u{1F9EA}', label: '训练中心', needLogin: true, page: '/pages/mind/training' },
        { icon: '\u{1F4DD}', label: '成长档案', needLogin: true, page: '/pages/growth/index' }
      ],
      articles: [],

      // 五维组件数据
      userName: '',
      children: [],
      sandboxData: null,
      dualDimension: null,
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
      activeTab: 'emotion'
    }
  },
  computed: {
    readingMinutes: function() {
      var stats = this.readingStats
      if (!stats || !stats.totalDurationSeconds) return 0
      return Math.floor((stats.totalDurationSeconds || 0) / 60)
    },
    personalityScores: function() {
      if (!this.emiData) return []
      return [
        this.emiData.opennessScore || 0,
        this.emiData.conscientiousnessScore || 0,
        this.emiData.extraversionScore || 0,
        this.emiData.agreeablenessScore || 0,
        this.emiData.neuroticismScore || 0
      ]
    },
    energyMapForGraph: function() {
      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: function() {
      return {}
    },
    emotionArticles: function() {
      if (!this.articles || this.articles.length === 0) return []
      var result = []
      for (var i = 0; i < this.articles.length; i++) {
        var a = this.articles[i]
        if (a.relatedDimensions && a.relatedDimensions.indexOf('mind') !== -1) {
          result.push(a)
        }
      }
      if (result.length === 0) return this.articles.slice(0, 5)
      return result.slice(0, 5)
    },
    cognitiveArticles: function() {
      if (!this.articles || this.articles.length === 0) return []
      var result = []
      for (var i = 0; i < this.articles.length; i++) {
        var a = this.articles[i]
        if (a.relatedDimensions && a.relatedDimensions.indexOf('wisdom') !== -1) {
          result.push(a)
        }
      }
      if (result.length === 0) return this.articles.slice(0, 5)
      return result.slice(0, 5)
    },
    currentDimensionCode: function() {
      return this.activeTab === 'emotion' ? 'mind' : 'wisdom'
    }
  },
  onShow() {
    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.currentChildId = uni.getStorageSync('currentChildId') || null
      this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
    }
    this.loadSectionConfig()
    this.loadFeaturedArticles()
    this.loadDailyTip()
    if (this.isLoggedIn) {
      this.loadChildren()
      this.loadFamilyMembersVisible()
      this.loadSandboxData()
      this.loadEmiData()
      this.loadAssessmentData()
      this.loadReadingStats()
      this.loadFamilyCognitiveData()
      this.loadEnergyData()
    }
    // 游客也能浏览活动和商品
    this.loadDimensionActivities()
    this.loadDimensionProducts()
  },
  methods: {
    // ===== 区块可见性 =====
    loadSectionConfig: function() {
      var self = this
      var baseSections = ['func_entries', 'daily_tip', 'recommended_reading']
      if (!uni.getStorageSync('token')) {
        self.visibleSections = baseSections
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      getVisibleSections({ pageKey: 'mind', role: role }).then(function(res) {
        if (res.code === 200 && res.data) {
          var keys = res.data.map(function(s) { return s.sectionKey })
          var merged = baseSections.slice()
          keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
          self.visibleSections = merged
        }
      }).catch(function() {
        self.visibleSections = ['func_entries', 'daily_tip', 'recommended_reading', 'mind_tasks', 'related_activities', 'purchased_courses']
      })
    },
    sectionVisible: function(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },

    // ===== 心理 Tab：EMI 数据 =====
    loadEmiData: function() {
      var self = this
      var childId = self.currentChildId
      if (!childId) {
        self.emiLoading = false
        return
      }
      self.emiLoading = true
      getEmiReport(childId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.emiData = res.data
        }
        self.emiLoading = false
      }).catch(function() {
        self.emiLoading = false
      })
    },

    // ===== 认知 Tab：测评数据 =====
    loadAssessmentData: function() {
      var self = this
      var childId = self.currentChildId
      if (!childId) {
        self.assessmentLoading = false
        return
      }
      self.assessmentLoading = true
      getAssessmentLatestResult(childId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.assessmentData = res.data
        }
        self.assessmentLoading = false
      }).catch(function() {
        self.assessmentLoading = false
      })
    },

    // ===== 认知 Tab：六维认知数据 =====
    loadFamilyCognitiveData: function() {
      var self = this
      var token = uni.getStorageSync('token')
      var userId = uni.getStorageSync('userId') || ''
      if (!token) return
      uni.request({
        url: config.API_BASE_URL + '/api/cognitive/family',
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + token,
          'X-User-Id': userId
        },
        success: function(r) {
          if (r.statusCode === 200 && r.data && r.data.code === 200 && r.data.data) {
            var data = r.data.data
            if (Array.isArray(data) && data.length > 0) {
              self.familyMembers = data
              var first = data[0]
              self.selectedChildId = first.childId
              self.updateCurrentScores(first)
            }
          }
        }
      })
    },
    selectMember: function(childId) {
      if (childId === this.selectedChildId) return
      this.selectedChildId = childId
      var member = this.familyMembers.find(function(m) { return m.childId === childId })
      if (member) {
        this.updateCurrentScores(member)
      }
    },
    updateCurrentScores: function(member) {
      this.currentChildName = member.childName || ''
      this.currentScores = [
        member.perceptionScore || 0,
        member.focusScore || 0,
        member.memoryScore || 0,
        member.logicScore || 0,
        member.spatialScore || 0,
        member.processingSpeedScore || 0
      ]
    },
    goTraining: function(dimensionKey) {
      if (!this.selectedChildId) {
        uni.showToast({ title: '请先选择家庭成员', icon: 'none' })
        return
      }
      uni.navigateTo({ url: '/pages/mind/training?dimension=' + dimensionKey + '&childId=' + this.selectedChildId })
    },

    // ===== 每日心理 =====
    loadDailyTip: function() {
      var self = this
      getDailyTip().then(function(res) {
        if (res.code === 200 && res.data) {
          self.dailyTip = res.data
        }
      }).catch(function() {})
    },

    // ===== 阅读统计 =====
    loadReadingStats: function() {
      var self = this
      var childId = self.currentChildId
      if (!childId) return
      getReadingStats(childId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.readingStats = res.data
        }
      }).catch(function() {})
    },

    // ===== 文章 =====
    loadFeaturedArticles: function() {
      var self = this
      getFeaturedArticles({ size: 5 }).then(function(res) {
        if (res.code === 200 && res.data) {
          var gradientColors = [
            'linear-gradient(135deg, #8B5CF6, #A78BFA)',
            'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
            'linear-gradient(135deg, #10B981, #34D399)',
            'linear-gradient(135deg, #8B5CF6, #C084FC)',
            'linear-gradient(135deg, #F97316, #FB923C)'
          ]
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.articles = list.map(function(item, index) {
            return {
              id: item.id,
              category: item.categoryName || '成长文章',
              categoryColor: gradientColors[index % gradientColors.length],
              title: item.title || '',
              summary: item.summary || '',
              views: item.viewCount ? String(item.viewCount) : '0',
              likes: '0',
              date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
              relatedDimensions: item.relatedDimensions || []
            }
          })
        }
      }).catch(function() {})
    },

    // ===== EMI 分数评级 =====
    getScoreLevel: function(score) {
      if (score >= 85) return 'excellent'
      if (score >= 70) return 'good'
      if (score >= 55) return 'average'
      return 'low'
    },
    getScoreLevelText: function(score) {
      if (score >= 85) return '优秀'
      if (score >= 70) return '良好'
      if (score >= 55) return '一般'
      return '需提升'
    },

    // ===== 导航 =====
    goEmotionReport: function() {
      var childId = this.currentChildId || ''
      uni.navigateTo({ url: '/pages/mind/emotion-report?childId=' + childId })
    },
    goCognitiveReport: function() {
      var childId = this.currentChildId || ''
      uni.navigateTo({ url: '/pages/mind/emotion-report?childId=' + childId })
    },
    goGame: function(gameCode) {
      if (!this.isLoggedIn) {
        uni.showModal({
          title: '提示',
          content: '请先登录后使用此功能',
          success: function(res) { if (res.confirm) uni.navigateTo({ url: '/pages/login/login' }) }
        })
        return
      }
      uni.navigateTo({ url: '/pages/games/' + gameCode })
    },
    goArticles: function() {
      uni.navigateTo({ url: '/pages/mind/articles' })
    },
    onFuncClick: function(item) {
      if (item.needLogin && !this.isLoggedIn) {
        uni.showModal({
          title: '提示',
          content: '请先登录后使用此功能',
          success: function(res) { if (res.confirm) uni.navigateTo({ url: '/pages/login/login' }) }
        })
        return
      }
      if (item.page) uni.navigateTo({ url: item.page })
    },
    goArticleDetail: function(id) {
      var url = '/pages/mind/article-detail?id=' + id
      uni.navigateTo({ url: url })
    },
    // ===== 孩子列表与维度数据 =====
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          self.children = res.data
          var savedChildId = uni.getStorageSync('currentChildId')
          var found = false
          for (var i = 0; i < self.children.length; i++) {
            if (self.children[i].childId === savedChildId) {
              self.currentChildId = savedChildId
              found = true
              break
            }
          }
          if (!found && self.children.length > 0) {
            self.currentChildId = self.children[0].childId
            uni.setStorageSync('currentChildId', self.currentChildId)
          }
          if (self.currentChildId) {
            self.loadDimensionData()
          }
        }
      }).catch(function(e) {
        console.log('获取孩子列表失败', e)
      })
    },
    loadDimensionData: function() {
      this.loadDimensionTasks()
      this.loadDimensionActivities()
      this.loadDimensionProducts()
    },
    loadSandboxData: function() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data
        }
      }).catch(function() {})
    },
    loadEnergyData: function() {
      var self = this
      if (!this.currentChildId) return
      getEnergyOverview(this.currentChildId).then(function(res) {
        if (res && res.data) {
          var dims = res.data.dimensions
          if (dims && dims.length > 0) {
            var mindDim = null
            var wisdomDim = null
            for (var i = 0; i < dims.length; i++) {
              if (dims[i].code === 'mind') mindDim = dims[i]
              if (dims[i].code === 'wisdom') wisdomDim = dims[i]
            }
            self.dualDimension = {
              primary: mindDim || { code: 'mind', score: 0, label: '心理', color: '#8B5CF6' },
              secondary: wisdomDim || { code: 'wisdom', score: 0, label: '认知', color: '#3B82F6' }
            }
          }
        }
      }).catch(function(e) {
        console.log('获取能量概览失败', e)
      })
    },
    loadDimensionTasks: function() {
      var self = this
      if (!this.currentChildId) return
      getTodayTasksByCategory(this.currentChildId, 'mind').then(function(res) {
        if (res && res.data) {
          self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
        }
      }).catch(function() { self.dimensionTasks = [] })
    },
    loadDimensionActivities: function() {
      var self = this
      var dimCode = self.currentDimensionCode
      getActivityList({ dimensionCode: dimCode, page: 1, size: 3 }).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionActivities = list.slice(0, 3)
        }
      }).catch(function() { self.dimensionActivities = [] })
    },
    loadDimensionProducts: function() {
      var self = this
      var dimCode = self.currentDimensionCode
      getProductsByDomain(dimCode, 1, 4).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionProducts = list.slice(0, 4)
        }
      }).catch(function() { self.dimensionProducts = [] })
    },
    onChildChanged: function(child) {
      this.currentChildId = child.childId
      uni.setStorageSync('currentChildId', child.childId)
      this.loadDimensionData()
      this.loadEmiData()
      this.loadAssessmentData()
      this.loadReadingStats()
    },
    loadFamilyMembersVisible: function() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        self.familyMembersVisible = res.data || []
      }).catch(function(e) {
        console.log('获取可见家庭成员失败', e)
        self.familyMembersVisible = []
      })
    },
    scrollToSection: function(section) {
      uni.pageScrollTo({ selector: '#' + section, duration: 300 })
    },
    onTaskClick: function(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goActivityDetail: function(act) {
      if (act && act.id) uni.navigateTo({ url: '/pages/discover/index?type=activity&id=' + act.id })
    },
    goMoreActivities: function() {
      var dimCode = this.currentDimensionCode
      uni.navigateTo({ url: '/pages/discover/index?type=activity&dimension=' + dimCode })
    },
    goProductDetail: function(prod) {
      if (prod && prod.id) uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + prod.id })
    },
    goMoreProducts: function() {
      var dimCode = this.currentDimensionCode
      uni.navigateTo({ url: '/pages/discover/index?type=product&domain=' + dimCode })
    },
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goMemberDetail: function(member) {
      if (!member || !member.memberId) return
      uni.navigateTo({
        url: '/pages/mind/member-mind-detail?childId=' + member.memberId
      })
    },

    switchTab: function(tab) {
      if (tab === this.activeTab) return
      this.activeTab = tab
      this.loadDimensionActivities()
      this.loadDimensionProducts()
    },
    goWishlist: function() {
      uni.navigateTo({ url: '/pages/rewards/rewards' })
    },
    goAssessment: function() { uni.navigateTo({ url: '/pages/assessment/apply' }) },
    goLogin: function() { uni.navigateTo({ url: '/pages/login/login' }) }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

/* ===== 心/智 Tab 栏 ===== */
.tab-bar {
  display: flex;
  flex-direction: row;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 16rpx;
  transition: all 0.3s;
}
.tab-item.active {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  box-shadow: 0 4rpx 12rpx rgba(139,92,246,0.3);
}
.tab-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.tab-item.active .tab-icon {
  color: #fff;
}
.tab-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #999;
}
.tab-item.active .tab-label {
  color: #fff;
  font-weight: bold;
}

/* ===== 心理能量概况 ===== */
.energy-overview {
  display: flex;
  flex-direction: row;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  justify-content: space-around;
}
.energy-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.badge-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}
.badge-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.badge-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

/* ===== EMI 四维条形图 ===== */
.emi-section {
  margin: 20rpx 30rpx;
}
.emi-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.emi-card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}
.emi-bar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.emi-bar-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
}
.emi-bar-track {
  flex: 1;
  height: 20rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 16rpx;
}
.emi-bar-fill {
  height: 100%;
  border-radius: 10rpx;
  transition: width 0.5s;
}
.emi-bar-score {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  width: 60rpx;
  text-align: right;
  flex-shrink: 0;
}
.emi-bar-level {
  font-size: 20rpx;
  width: 80rpx;
  text-align: right;
  flex-shrink: 0;
}
.level-excellent { color: #10B981; }
.level-good { color: #3B82F6; }
.level-average { color: #F97316; }
.level-low { color: #EF4444; }
.emi-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}
.emi-overall {
  font-size: 28rpx;
  font-weight: bold;
  color: #FF6B35;
}
.emi-link {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.emi-link-text {
  font-size: 26rpx;
  color: #FF6B35;
  font-weight: 500;
}
.emi-link-arrow {
  font-size: 26rpx;
  color: #FF6B35;
  margin-left: 8rpx;
}

/* ===== 占位卡 ===== */
.placeholder-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.placeholder-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.placeholder-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.placeholder-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 30rpx;
}
.placeholder-btn {
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
}

/* ===== 认知总分明细 ===== */
.cognitive-score-highlight {
  display: flex;
  flex-direction: row;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  justify-content: space-around;
}
.score-big-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.score-big-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.score-big-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}
.score-big-value.highlight {
  color: #FFD700;
}
.score-big-value.small {
  font-size: 22rpx;
  color: #666;
}

/* ===== 认知评分卡 ===== */
.cognitive-overview {
  margin: 20rpx 30rpx;
}
.cognitive-score-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.score-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 24rpx;
}
.score-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.score-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.score-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}
.score-value.highlight {
  color: #FFD700;
}
.score-value.small {
  font-size: 24rpx;
  color: #666;
}
.score-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}
.score-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 32rpx;
  padding: 12rpx 24rpx;
}
.score-link.secondary {
  background: #f0f0f0;
}
.score-link-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
}
.score-link.secondary .score-link-text {
  color: #666;
}
.score-link-arrow {
  font-size: 24rpx;
  color: #fff;
  margin-left: 8rpx;
}

/* ===== 雷达图区域 ===== */
.radar-section {
  margin: 20rpx 30rpx;
}
.member-scroll {
  width: 100%;
  margin-bottom: 16rpx;
}
.member-row {
  display: flex;
  flex-direction: row;
  padding: 4rpx 0;
  white-space: nowrap;
}
.member-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 32rpx;
  margin-right: 16rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  min-width: 120rpx;
  flex-shrink: 0;
}
.member-tab.active {
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
}
.member-tab.active .member-name {
  color: #fff;
}
.member-tab.active .member-overall {
  color: rgba(255,255,255,0.9);
}
.member-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.member-overall {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}
.radar-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 20rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.radar-hint {
  font-size: 22rpx;
  color: #bbb;
  margin-top: 16rpx;
}

/* ===== 认知训练入口 ===== */
.game-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.game-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.game-icon {
  font-size: 40rpx;
}
.game-name {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}
.game-item:active {
  opacity: 0.7;
}

/* ===== 阅读统计 ===== */
.reading-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.reading-stats {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 16rpx;
}
.reading-count {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF6B35;
}
.reading-divider {
  font-size: 28rpx;
  color: #ccc;
  margin: 0 8rpx;
}
.reading-duration {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.reading-progress-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.reading-progress-track {
  flex: 1;
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: 16rpx;
}
.reading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B35, #FFD700);
  border-radius: 8rpx;
  transition: width 0.5s;
}
.reading-progress-text {
  font-size: 24rpx;
  color: #999;
  width: 80rpx;
  text-align: right;
  flex-shrink: 0;
}
.reading-link {
  display: flex;
  justify-content: flex-end;
}
.reading-link-text {
  font-size: 26rpx;
  color: #FF6B35;
  font-weight: 500;
}

/* ===== 每日心理 ===== */
.tip-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.tip-left-bar {
  width: 6rpx;
  background: linear-gradient(180deg, #5B9BD5, #8FC5E8);
  flex-shrink: 0;
}
.tip-body {
  flex: 1;
  padding: 28rpx 24rpx;
}
.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #5B9BD5;
  display: block;
  margin-bottom: 12rpx;
}
.tip-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 16rpx;
}
.tip-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.tip-source {
  font-size: 22rpx;
  color: #bbb;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* ===== 推荐阅读 ===== */
.article-list {
  display: flex;
  flex-direction: column;
}
.article-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin-bottom: 20rpx;
}
.article-category {
  display: inline-block;
  padding: 4rpx 18rpx;
  border-radius: 20rpx;
  margin-bottom: 14rpx;
}
.article-category-text {
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
}
.article-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.article-summary {
  font-size: 24rpx;
  color: #888;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
}
.article-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20rpx;
}
.meta-icon {
  font-size: 22rpx;
  margin-right: 4rpx;
}
.meta-text {
  font-size: 22rpx;
  color: #bbb;
}
.article-date {
  font-size: 22rpx;
  color: #bbb;
  margin-left: auto;
}

/* ===== 功能区入口 ===== */
.func-section {
  margin: 20rpx 30rpx;
}
.func-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.func-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.func-icon {
  font-size: 40rpx;
}
.func-label {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}
.func-item:active {
  opacity: 0.7;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 120rpx;
}

/* ===== 心愿单入口 ===== */
.wishlist-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.wishlist-left {
  width: 72rpx;
  height: 72rpx;
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.wishlist-icon {
  font-size: 36rpx;
}
.wishlist-body {
  flex: 1;
}
.wishlist-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}
.wishlist-desc {
  font-size: 22rpx;
  color: #999;
}
.wishlist-arrow {
  font-size: 36rpx;
  color: #ccc;
  margin-left: 12rpx;
}
</style>