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

<template>
  <view class="container">
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="mind" />

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

    <!-- ===== 心·心理 ===== -->
    <view class="section-title-bar">
      <text class="section-title-icon">&#x2764;</text>
      <text class="section-title-text">心·心理</text>
    </view>

    <!-- 游客登录引导卡 -->
    <template v-if="!isLoggedIn">
      <LoginGuideCard
        title="登录后查看心理成长报告"
        :items="[
          '查看EMI心理测评四维分析',
          '查看大五人格分析报告',
          '阅读专属文章、参与情绪打卡'
        ]" />
    </template>

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

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

    <!-- 登录后：用户快捷入口 -->
    

    <!-- ===== 心理能量概况 ===== -->
    <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>

    <!-- ===== 大五人格雷达图（始终显示） ===== -->
    <view class="emi-section">
      <view class="emi-card">
        <view class="personality-header">
          <text class="emi-card-title">大五人格</text>
          <view class="test-btn" @click="goAssessment">
            <text class="test-btn-text">测试</text>
          </view>
        </view>
        <template v-if="emiData">
          <RadarChart
            :dimensions="personalityDimensions"
            :scores="personalityScores"
            :childName="currentChildName || '孩子'"
            fillColor="#8B5CF6"
            gridColor="#EDE9FE"
            labelColor="#6D28D9" />
          <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>
        </template>
        <template v-else-if="!emiLoading">
          <view class="placeholder-content">
            <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>
        </template>
      </view>
    </view>

    <!-- 肠脑轴情绪卡片 -->
    <view class="section" v-if="gutIndicators && gutIndicators.length > 0">
      <view class="section-header">
        <text class="section-title">&#x1F9E0; 肠脑情绪关联</text>
      </view>
      <view class="gut-insight-text" v-if="gutInsight">
        <text>{{ gutInsight }}</text>
      </view>
      <view class="gut-indicator-list">
        <view class="gut-indicator-item" v-for="ind in gutIndicators" :key="ind.id">
          <view class="gut-indicator-left">
            <text class="gut-indicator-name">{{ ind.indicatorName || ind.name }}</text>
          </view>
          <view class="gut-indicator-bar-track">
            <view class="gut-indicator-bar-fill" :style="{ width: (ind.value || 0) + '%', background: indicatorColor(ind.status) }"></view>
          </view>
          <text class="gut-indicator-value">{{ ind.value }}{{ ind.unit || '%' }}</text>
          <text :class="['gut-indicator-status', 'status-' + (ind.status || 'normal')]">{{ statusLabel(ind.status) }}</text>
        </view>
      </view>
    </view>

    <!-- 推荐阅读 -->
    <DimensionArticles
      dimensionCode="mind"
      :articles="emotionArticles"
      :isLoggedIn="isLoggedIn"
      @articleClick="goArticleDetail"
      @moreArticles="goArticles" />

    <!-- ===== 传统文化（八字/五行/星座/灵数） ===== -->
    <view class="culture-section" v-if="isLoggedIn && traditionalData">
      <!-- 八字四柱 -->
      <view class="culture-card" v-if="traditionalData.eightCharacters">
        <view class="culture-card-header">
          <text class="culture-card-icon">&#x2637;</text>
          <text class="culture-card-title">八字四柱</text>
        </view>
        <view class="bazi-grid">
          <view class="bazi-column" v-for="(val, key) in traditionalData.eightCharacters" :key="key">
            <text class="bazi-pillar-label">{{ pillarLabels[key] || key }}</text>
            <text class="bazi-pillar-value">{{ val }}</text>
          </view>
        </view>
      </view>

      <!-- 五行能量 -->
      <view class="culture-card" v-if="traditionalData.wuxingElements">
        <view class="culture-card-header">
          <text class="culture-card-icon">&#x267E;</text>
          <text class="culture-card-title">五行能量</text>
        </view>
        <view class="wuxing-list">
          <view class="wuxing-item" v-for="wx in wuxingData" :key="wx.key">
            <text class="wuxing-label">{{ wx.label }}</text>
            <view class="wuxing-bar-track">
              <view class="wuxing-bar-fill" :style="{ width: wx.value + '%', background: wx.color }"></view>
            </view>
            <text class="wuxing-value">{{ wx.value }}%</text>
          </view>
        </view>
        <view class="wuxing-reading" v-if="traditionalData.wuxingReading">
          <text>{{ traditionalData.wuxingReading.personalTrait || '' }}</text>
        </view>
      </view>

      <!-- 太阳星座 + 生命灵数 双栏 -->
      <view class="culture-dual">
        <view class="culture-dual-item" v-if="traditionalData.zodiac">
          <text class="culture-dual-icon">&#x2600;</text>
          <text class="culture-dual-label">太阳星座</text>
          <text class="culture-dual-value">{{ traditionalData.zodiac }}</text>
        </view>
        <view class="culture-dual-item" v-if="traditionalData.numSoul">
          <text class="culture-dual-icon">&#x1F52E;</text>
          <text class="culture-dual-label">生命灵数</text>
          <text class="culture-dual-value">{{ traditionalData.lifeNumber || '' }}</text>
        </view>
      </view>

      <!-- 关键信息（家庭 + 个人） -->
      <view class="key-info-card" v-if="compatibilityData || traditionalData">
        <view class="key-info-header">
          <text class="key-info-icon">&#x1F511;</text>
          <text class="key-info-title">关键信息</text>
        </view>
        <view class="key-info-body">
          <!-- 左侧：家庭概览 -->
          <view class="key-info-col" v-if="compatibilityData">
            <view class="ki-subtitle">家庭</view>
            <view class="ki-row" v-if="familyWuxingLabel">
              <text class="ki-label">主导五行</text>
              <view class="ki-dot" :style="'background:' + familyWuxingLabel.color"></view>
              <text class="ki-valued">{{ familyWuxingLabel.label }} {{ familyWuxingLabel.value }}%</text>
            </view>
            <view class="ki-row">
              <text class="ki-label">成员</text>
              <text class="ki-valued">{{ familyMemberCount }}人</text>
            </view>
          </view>
          <!-- 右侧：个人速览 -->
          <view class="key-info-col" v-if="traditionalData">
            <view class="ki-subtitle">个人</view>
            <view class="ki-row" v-if="luckyColorInfo">
              <text class="ki-label">幸运色</text>
              <view class="ki-swatch" :style="'background:' + luckyColorInfo.hex"></view>
              <text class="ki-valued">{{ luckyColorInfo.name }}</text>
            </view>
            <view class="ki-row" v-if="luckyNumber">
              <text class="ki-label">幸运数</text>
              <text class="ki-num">{{ luckyNumber }}</text>
            </view>
            <view class="ki-row" v-if="dailyFortune">
              <text class="ki-label">运势</text>
              <text class="ki-fortune" :class="'ki-fortune-' + dailyFortune.level">{{ dailyFortune.text }}</text>
            </view>
          </view>
        </view>
        <!-- 本周提示 -->
        <view class="ki-insight" v-if="familyWeeklyInsight">
          <text class="ki-insight-icon">&#x1F4A1;</text>
          <text class="ki-insight-text">{{ familyWeeklyInsight }}</text>
        </view>
        <!-- 查看详情 -->
        <view class="ki-footer" @click="onFuncClick({needLogin:true, page:'/pages/mind-detail/family-dashboard'})">
          <text>查看家庭天盘详细 &#x2192;</text>
        </view>
      </view>
    </view>

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

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

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

    <!-- ===== Phase 1.2: 心理告警横幅 ===== -->
    <PsychCrisisBanner v-if="isLoggedIn" :childId="currentChildId" source="screening" />

    <!-- ===== 底部：功能入口 Grid（通用，两行） ===== -->
    <view class="func-section" v-if="sectionVisible('func_entries')">
      <view class="func-grid">
        <view class="func-row">
          <view class="func-item" v-for="item in funcListRow1" :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 class="func-row">
          <view class="func-item" v-for="item in funcListRow2" :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>

    

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

<script>
import TabTransition from '../../components/tab-transition.vue'
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 DimensionTasks from '../../components/DimensionTasks.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import DimensionArticles from '../../components/DimensionArticles.vue'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'

import PsychCrisisBanner from '../../components/PsychCrisisBanner.vue'
import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
import { getVisibleSections, getFeaturedArticles, getEmiReport, getFamilyEnergySandbox, getTodayTasksByCategory, getActivityList, getProductsByDomain, getChildren, getVisibleFamilyMembers, getEnergyOverview } from '../../utils/api.js'
import config from '../../config.js'

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

      // 心理 Tab 数据
      emiData: null,
      emiLoading: true,
      emiDimensions: [
        { key: 'emotionScore', label: '情绪商数', color: '#FF6B35' },
        { key: 'resilienceScore', label: '心理韧性', color: '#F97316' },
        { key: 'stressCopingScore', label: '压力应对', color: '#FB923C' },
        { key: 'selfAwarenessScore', label: '自我认知', color: '#FBBF24' }
      ],
      // 大五维度（用于雷达图）
      personalityDimensions: [
        { key: 'opennessScore', label: '开放性' },
        { key: 'conscientiousnessScore', label: '尽责性' },
        { key: 'extraversionScore', label: '外向性' },
        { key: 'agreeablenessScore', label: '宜人性' },
        { key: 'neuroticismScore', label: '神经质' }
      ],

      // 功能入口
      funcList: [
        { icon: '\u{1F4D6}', label: '阅读', needLogin: false, page: '/pages/mind/articles' },
        { icon: '\u{1F4CA}', label: '测评报告', needLogin: true, page: '/pages/mind/emotion-report' },
        { icon: '\u{1F4DD}', label: '成长档案', needLogin: true, page: '/pages/growth/index' },
        { icon: '\u{2728}', label: '情绪打卡', needLogin: true, page: '/pages/mind-detail/emotion-checkin' },
        { icon: '\u{1F4C8}', label: '情绪趋势', needLogin: true, page: '/pages/mind-detail/emotion-trend' },
        { icon: '\u{1F9E9}', label: '心理自评', needLogin: true, page: '/pages/mind-detail/screening' },
        { icon: '\u{1F3E0}', label: '家庭天盘', needLogin: true, page: '/pages/mind-detail/family-dashboard' },
        { icon: '\u{1F9D8}', label: '疏导工具', needLogin: true, page: '/pages/mind-detail/soothe-toolbox' }
      ],
      articles: [],

      // 肠脑轴数据
      gutIndicators: null,
      gutInsight: '',

      // 传统文化数据
      traditionalData: null,
      traditionalLoading: true,
      compatibilityData: null,
      wuxingConfig: {
        wood: { label: '木', color: '#10B981' },
        fire: { label: '火', color: '#FF6B9D' },
        earth: { label: '土', color: '#FF8C42' },
        metal: { label: '金', color: '#6366F1' },
        water: { label: '水', color: '#3B82F6' }
      },
      pillarLabels: { year: '年柱', month: '月柱', day: '日柱', hour: '时柱' },
      familyScore: 0,

      // 五维组件数据
      userName: '',
      children: [],
      sandboxData: null,
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
    }
  },
  computed: {
    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 {}
    },
    compatibilityMapForGraph: function() {
      var map = {}
      if (this.compatibilityData && this.compatibilityData.relationships) {
        for (var i = 0; i < this.compatibilityData.relationships.length; i++) {
          var r = this.compatibilityData.relationships[i]
          var key = r.memberId1 < r.memberId2 ? r.memberId1 + '-' + r.memberId2 : r.memberId2 + '-' + r.memberId1
          map[key] = { overallScore: r.overallScore }
        }
      }
      return map
    },
    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)
    },
    wuxingData: function() {
      if (!this.traditionalData || !this.traditionalData.wuxingElements) return []
      var elements = this.traditionalData.wuxingElements
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var result = []
      for (var i = 0; i < keys.length; i++) {
        var k = keys[i]
        if (elements[k] !== undefined) {
          result.push({
            key: k,
            label: this.wuxingConfig[k].label,
            color: this.wuxingConfig[k].color,
            value: elements[k]
          })
        }
      }
      return result.sort(function(a, b) { return b.value - a.value })
    },
    currentDimensionCode: function() {
      return 'mind'
    },
    funcListRow1: function() {
      return this.funcList.slice(0, 4)
    },
    funcListRow2: function() {
      return this.funcList.slice(4)
    },
    // ===== 关键信息 - 家庭 =====
    familyWuxingLabel: function() {
      if (!this.compatibilityData || !this.compatibilityData.familyWuxing || !this.compatibilityData.familyWuxing.aggregatePercentages) return null
      var pcts = this.compatibilityData.familyWuxing.aggregatePercentages
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var maxKey = null
      var maxVal = -1
      for (var i = 0; i < keys.length; i++) {
        if (pcts[keys[i]] !== undefined && pcts[keys[i]] > maxVal) {
          maxVal = pcts[keys[i]]
          maxKey = keys[i]
        }
      }
      if (!maxKey) return null
      return { key: maxKey, label: this.wuxingConfig[maxKey].label, color: this.wuxingConfig[maxKey].color, value: maxVal }
    },
    familyMemberCount: function() {
      if (!this.compatibilityData || !this.compatibilityData.members) return 0
      return this.compatibilityData.members.length
    },
    familyWeeklyInsight: function() {
      if (!this.compatibilityData || !this.compatibilityData.weeklyInsight) return ''
      return this.compatibilityData.weeklyInsight
    },
    // ===== 关键信息 - 个人 =====
    dominantElement: function() {
      if (!this.traditionalData || !this.traditionalData.wuxingElements) return null
      var elements = this.traditionalData.wuxingElements
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var maxKey = null
      var maxVal = -1
      for (var i = 0; i < keys.length; i++) {
        if (elements[keys[i]] !== undefined && elements[keys[i]] > maxVal) {
          maxVal = elements[keys[i]]
          maxKey = keys[i]
        }
      }
      return maxKey
    },
    luckyColorInfo: function() {
      var colorMap = {
        wood: { name: '绿', hex: '#10B981' },
        fire: { name: '红', hex: '#FF6B9D' },
        earth: { name: '黄', hex: '#FF8C42' },
        metal: { name: '白', hex: '#6366F1' },
        water: { name: '蓝', hex: '#3B82F6' }
      }
      var elem = this.dominantElement
      if (!elem) return null
      return colorMap[elem] || null
    },
    luckyNumber: function() {
      if (this.traditionalData && this.traditionalData.lifeNumber) {
        return this.traditionalData.lifeNumber
      }
      var numMap = { wood: 3, fire: 9, earth: 5, metal: 7, water: 1 }
      var elem = this.dominantElement
      return elem ? numMap[elem] : null
    },
    fortuneSeed: function() {
      if (this.traditionalData && this.traditionalData.lifeNumber) {
        return String(this.traditionalData.lifeNumber)
      }
      return '0'
    },
    dailyFortune: function() {
      if (!this.dominantElement) return null
      var today = new Date()
      var dateStr = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
      var seedStr = dateStr + (this.fortuneSeed || '')
      var hash = 0
      for (var i = 0; i < seedStr.length; i++) {
        hash = ((hash << 5) - hash) + seedStr.charCodeAt(i)
        hash = hash & hash
      }
      var level = Math.abs(hash) % 5
      var levels = ['大吉', '吉', '平', '凶', '大凶']
      var descMap = {
        wood: ['大吉：木气旺盛，宜规划', '吉：行动力强', '平：静心养性', '凶：谨言慎行', '大凶：忌冲动'],
        fire: ['大吉：热情高涨', '吉：精力充沛', '平：适当休息', '凶：注意情绪', '大凶：静心冥想'],
        earth: ['大吉：稳重踏实', '吉：贵人运佳', '平：按部就班', '凶：注意肠胃', '大凶：不宜投资'],
        metal: ['大吉：决策力强', '吉：思维清晰', '平：保持专注', '凶：注意言辞', '大凶：不宜强求'],
        water: ['大吉：灵感丰富', '吉：人际和谐', '平：安静内省', '凶：情绪波动', '大凶：宜藏不宜放']
      }
      var descList = descMap[this.dominantElement] || descMap.wood
      return { level: level, text: levels[level], description: descList[level] }
    }
  },
  onShow() {
    this.showTabTransition = true

    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()
    if (this.isLoggedIn) {
      this.loadChildren()
      this.loadFamilyMembersVisible()
      this.loadSandboxData()
      this.loadEmiData()
      this.loadGutData()
      this.loadEnergyData()
      this.loadTraditionalCultureData()
    }
    // 游客也能浏览活动和商品
    this.loadDimensionActivities()
    this.loadDimensionProducts()
    this._watchPageReady()
  },
  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
      })
    },

    // ===== 肠脑轴情绪指标 =====
    loadGutData: function() {
      var self = this
      var childId = self.currentChildId
      if (!childId) return
      var token = uni.getStorageSync('token')
      // 获取神经递质指标
      uni.request({
        url: config.API_BASE_URL + '/api/mind/neurotransmitters',
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        data: { childId: childId },
        success: function(r) {
          if (r.statusCode === 200 && r.data && r.data.code === 200) {
            var list = r.data.data
            if (Array.isArray(list) && list.length > 0) {
              self.gutIndicators = list.slice(0, 4)
            }
          }
        }
      })
      // 获取情绪洞察摘要
      uni.request({
        url: config.API_BASE_URL + '/api/mind/gut-emotion-insight',
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        data: { childId: childId },
        success: function(r) {
          if (r.statusCode === 200 && r.data && r.data.code === 200 && r.data.data) {
            self.gutInsight = r.data.data.summary || ''
          }
        }
      })
    },
    indicatorColor: function(status) {
      if (status === 'abnormal' || status === '偏高' || status === '偏低') return '#EF4444'
      if (status === 'warning' || status === '偏高' || status === '偏低') return '#F59E0B'
      return '#10B981'
    },
    statusLabel: function(status) {
      if (status === 'normal') return '正常'
      if (status === 'abnormal') return '异常'
      if (status === 'warning') return '警讯'
      return status || '正常'
    },

    // ===== 文章 =====
    parseRelatedDimensions: function(val) {
      if (!val) return []
      if (Array.isArray(val)) return val
      if (typeof val === 'string') {
        try {
          var parsed = JSON.parse(val)
          return Array.isArray(parsed) ? parsed : []
        } catch (e) {
          return val.split(',').map(function(s) { return s.trim() }).filter(function(s) { return s })
        }
      }
      return []
    },
    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: self.parseRelatedDimensions(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-detail/emotion-report?childId=' + childId })
    },
    goArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index?dimension=mind' })
    },
    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(article) {
      var id = article.id || article
      uni.navigateTo({ url: '/pages/mind-detail/article-detail?id=' + id })
    },
    // ===== 孩子列表与维度数据 =====
    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()
      if (this.familyMembersVisible.length > 0) {
        this.loadCompatibilityData()
      }
    },
    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) {
            for (var i = 0; i < dims.length; i++) {
              if (dims[i] && dims[i].code === 'mind' && res.data.energyScores) {
                self.familyScore = res.data.energyScores.mindScore || 0
              }
            }
          }
        }
      }).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.loadTraditionalCultureData()
    },
    loadFamilyMembersVisible: function() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        self.familyMembersVisible = res.data || []
      }).catch(function(e) {
        console.log('获取可见家庭成员失败', e)
        self.familyMembersVisible = []
      })
    },
    loadCompatibilityData: function() {
      var self = this
      var familyId = uni.getStorageSync('currentFamilyId')
      if (!familyId) {
        var userInfo = uni.getStorageSync('userInfo')
        if (userInfo && userInfo.familyId) familyId = userInfo.familyId
      }
      if (!familyId) return
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/mind/traditional/family-dashboard',
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        data: { familyId: familyId },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.compatibilityData = res.data.data
          }
        },
        fail: function() {}
      })
    },
    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-detail/activity-detail/activity-detail?id=' + act.id })
    },
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/activity/index' })
    },
    goProductDetail: function(prod) {
      if (prod && prod.id) uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
    },
    goMoreProducts: function() {
      uni.navigateTo({ url: '/pages/shop/index' })
    },
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goMemberDetail: function(member) {
      if (!member || !member.memberId) return
      var currentId = this.currentChildId
      uni.navigateTo({
        url: '/pages/member-detail/member-detail?memberId=' + member.memberId + '&entrySource=relation-graph&selfId=' + currentId + '&dimensionCode=mind'
      })
    },
    goFamilyMembers: function() {
      uni.navigateTo({ url: '/pages/profile/family-members' })
    },

    goAssessment: function() { uni.navigateTo({ url: '/pages/assessment/apply' }) },
    goLogin: function() { uni.navigateTo({ url: '/pages/login/login' }) },

    loadTraditionalCultureData: function() {
      var self = this
      var memberId = this.currentChildId
      if (!memberId) {
        self.traditionalLoading = false
        return
      }
      self.traditionalLoading = true
      uni.request({
        url: config.API_BASE_URL + '/api/mind/traditional/mirror',
        method: 'POST',
        data: { memberId: memberId, memberType: 'child' },
        success: function(res) {
          self.traditionalLoading = false
          if (res.data && res.data.code === 200 && res.data.data) {
            var d = res.data.data
            if (d.eightCharacters || d.wuxingElements || d.zodiac || d.numSoul) {
              self.traditionalData = d
            } else {
              self.traditionalData = null
            }
          } else {
            self.traditionalData = null
          }
        },
        fail: function() {
          self.traditionalLoading = false
          self.traditionalData = null
        }
      })
    },
    _watchPageReady() {
      var self = this
      var unwatch = this.$watch(function() {
        if (self.isLoggedIn) {
          return !!(self.emiData || self.energyOverview || (self.dimensionActivities && self.dimensionActivities.length > 0))
        }
        return !!(self.dimensionActivities && self.dimensionActivities.length > 0)
      }, function(val) {
        if (val) {
          if (unwatch) unwatch()
          self.showTabTransition = false
        }
      })
      setTimeout(function() {
        if (unwatch) unwatch()
        self.showTabTransition = false
      }, 5000)
    }
  }
}
</script>

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

/* ===== 心·心理 标题栏 ===== */
.section-title-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 30rpx 10rpx;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(139,92,246,0.25);
}
.section-title-icon {
  font-size: 32rpx;
  color: #fff;
  margin-right: 12rpx;
}
.section-title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

/* ===== 心理能量概况 ===== */
.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;
  display: block;
}
.personality-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}
.test-btn {
  background: #8B5CF6;
  padding: 8rpx 28rpx;
  border-radius: 30rpx;
}
.test-btn-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
}
.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-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
}

/* ===== 占位卡 ===== */
.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);
}

/* ===== 传统文化卡片 ===== */
.culture-section {
  margin: 20rpx 30rpx;
}
.culture-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  margin-bottom: 16rpx;
}
.culture-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.culture-card-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}
.culture-card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.culture-card-body {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
}
/* 八字四柱 */
.bazi-grid {
  display: flex;
  justify-content: space-around;
  padding: 8rpx 0;
}
.bazi-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bazi-pillar-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 6rpx;
}
.bazi-pillar-value {
  font-size: 32rpx;
  font-weight: 700;
  color: #8B5CF6;
  background: #F5F0FF;
  padding: 10rpx 14rpx;
  border-radius: 10rpx;
}
/* 五行能量 */
.wuxing-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.wuxing-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.wuxing-label {
  font-size: 26rpx;
  font-weight: 600;
  width: 44rpx;
  text-align: center;
}
.wuxing-bar-track {
  flex: 1;
  height: 20rpx;
  background: #F0F0F0;
  border-radius: 10rpx;
  overflow: hidden;
}
.wuxing-bar-fill {
  height: 100%;
  border-radius: 10rpx;
}
.wuxing-value {
  font-size: 22rpx;
  color: #666;
  width: 56rpx;
  text-align: right;
}
.wuxing-reading {
  margin-top: 12rpx;
  padding: 12rpx 14rpx;
  background: #F8F6F0;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}
/* 星座+灵数双栏 */
.culture-dual {
  display: flex;
  gap: 16rpx;
}
.culture-dual-item {
  flex: 1;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.culture-dual-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}
.culture-dual-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 6rpx;
}
.culture-dual-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #8B5CF6;
}
.culture-empty {
  text-align: center;
  padding: 30rpx 0;
  color: #bbb;
  font-size: 24rpx;
}

/* ===== 每日心理 ===== */
.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: column;
  gap: 16rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.func-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.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;
}

/* ===== 肠脑轴 ===== */
.gut-insight-text {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
  padding: 12rpx 16rpx;
  background: #F0FFF4;
  border-radius: 12rpx;
  line-height: 1.6;
}
.gut-indicator-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.gut-indicator-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.gut-indicator-left {
  width: 80rpx;
  flex-shrink: 0;
}
.gut-indicator-name {
  font-size: 22rpx;
  color: #666;
}
.gut-indicator-bar-track {
  flex: 1;
  height: 16rpx;
  background: #F0F0F0;
  border-radius: 8rpx;
  overflow: hidden;
}
.gut-indicator-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s;
}
.gut-indicator-value {
  font-size: 22rpx;
  color: #666;
  width: 60rpx;
  text-align: right;
}
.gut-indicator-status {
  font-size: 20rpx;
  padding: 2rpx 12rpx;
  border-radius: 10rpx;
  width: 60rpx;
  text-align: center;
}
.status-normal {
  background: #D1FAE5;
  color: #059669;
}
.status-abnormal {
  background: #FEE2E2;
  color: #DC2626;
}
.status-warning {
  background: #FEF3C7;
  color: #D97706;
}

/* ===== 关键信息（家庭+个人） ===== */
.key-info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-top: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.key-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.key-info-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.key-info-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.key-info-body {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
}
.key-info-col {
  flex: 1;
  background: #F8F9FA;
  border-radius: 14rpx;
  padding: 16rpx;
  min-width: 0;
}
.ki-subtitle {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 12rpx;
  font-weight: 500;
}
.ki-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  flex-wrap: nowrap;
}
.ki-row:last-child {
  margin-bottom: 0;
}
.ki-label {
  font-size: 22rpx;
  color: #888;
  margin-right: 8rpx;
  white-space: nowrap;
}
.ki-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 6rpx;
  flex-shrink: 0;
}
.ki-valuel {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}
.ki-valued {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}
.ki-swatch {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  margin-right: 6rpx;
  border: 2rpx solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.ki-num {
  font-size: 30rpx;
  font-weight: 700;
  color: #FF6B9D;
}
.ki-fortune {
  font-size: 24rpx;
  font-weight: 700;
  padding: 2rpx 12rpx;
  border-radius: 10rpx;
}
.ki-fortune-0 {
  color: #D32F2F;
  background: #FFEBEE;
}
.ki-fortune-1 {
  color: #E65100;
  background: #FFF3E0;
}
.ki-fortune-2 {
  color: #F9A825;
  background: #FFFDE7;
}
.ki-fortune-3 {
  color: #7B1FA2;
  background: #F3E5F5;
}
.ki-fortune-4 {
  color: #B71C1C;
  background: #FFCDD2;
}
.ki-insight {
  display: flex;
  align-items: flex-start;
  margin-top: 16rpx;
  padding: 16rpx;
  background: #FFF8F0;
  border-radius: 12rpx;
}
.ki-insight-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}
.ki-insight-text {
  font-size: 22rpx;
  color: #8B6914;
  line-height: 1.5;
}
.ki-footer {
  margin-top: 16rpx;
  text-align: center;
  padding: 12rpx;
  font-size: 24rpx;
  color: #8B5CF6;
  font-weight: 500;
  background: #F5F3FF;
  border-radius: 12rpx;
}
.ki-footer:active {
  opacity: 0.7;
}
</style>