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

<template>
  <view class="container">
    <PageBanner theme="mind-wisdom"
      tagline="能力训练"
      :quote="currentQuote" />

    <!-- 训练概览 -->
    <view class="stats-card" v-if="stats">
      <view class="stats-row">
        <view class="stats-item">
          <text class="stats-value">{{ stats.totalGames || 0 }}</text>
          <text class="stats-label">总训练次数</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.bestScore || 0 }}</text>
          <text class="stats-label">最高分</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.avgScore ? Math.round(stats.avgScore) : 0 }}</text>
          <text class="stats-label">平均分</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.totalPoints || 0 }}</text>
          <text class="stats-label">累计积分</text>
        </view>
      </view>
    </view>
    <view class="stats-card stats-loading" v-else-if="statsLoading">
      <text class="stats-loading-text">加载训练数据...</text>
    </view>

    <!-- 训练维度描述 -->
    <view class="dimension-card" v-if="currentDim">
      <view class="dimension-icon-wrap" :style="{ background: currentDim.lightColor }">
        <text class="dimension-icon">{{ currentDim.icon }}</text>
      </view>
      <text class="dimension-name">{{ currentDim.name }}</text>
      <text class="dimension-desc">{{ currentDim.desc }}</text>
    </view>

    <!-- 推荐游戏 -->
    <view class="section" v-if="currentDim && currentDim.games.length > 0">
      <view class="section-header">
        <text class="section-title">推荐训练</text>
      </view>
      <view class="game-list">
        <view class="game-card" v-for="game in currentDim.games" :key="game.code" @click="goGame(game)">
          <view class="game-icon-wrap" :style="{ background: currentDim.lightColor }">
            <text class="game-card-icon">{{ game.icon }}</text>
          </view>
          <view class="game-info">
            <text class="game-title">{{ game.name }}</text>
            <text class="game-desc">{{ game.desc }}</text>
          </view>
          <text class="game-arrow">&#x2192;</text>
        </view>
      </view>
    </view>

    <!-- 成长建议 -->
    <view class="section" v-if="currentDim">
      <view class="section-header">
        <text class="section-title">成长建议</text>
      </view>
      <view class="tip-card">
        <view class="tip-left-bar" :style="{ background: currentDim.color }"></view>
        <view class="tip-body">
          <text class="tip-content">{{ currentDim.tip }}</text>
        </view>
      </view>
    </view>

    <!-- 其他维度训练 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">其他维度</text>
      </view>
      <view class="other-grid">
        <view class="other-item" v-for="dim in otherDimensions" :key="dim.key" @click="switchDimension(dim.key)">
          <view class="other-icon-wrap" :style="{ background: dim.lightColor }">
            <text class="other-icon">{{ dim.icon }}</text>
          </view>
          <text class="other-name">{{ dim.name }}</text>
        </view>
      </view>
    </view>

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

<script>
import PageBanner from '../../components/PageBanner.vue'
import { getGameStats } from '../../utils/api.js'

var DIMENSION_MAP = {
  perception: {
    key: 'perception',
    name: '感知训练',
    icon: '\u{1F441}',
    color: '#8B5CF6',
    lightColor: '#EDE9FE',
    desc: '通过图形匹配、颜色分辨等练习提升感知能力',
    tip: '感知力是认知的起点。多观察身边事物的细节，锻炼视觉辨识能力，能有效提升感知水平。',
    games: [
      { code: 'schulte', name: '舒尔特方格', icon: '\u{1F3AF}', desc: '快速定位数字，训练视觉搜索' }
    ]
  },
  focus: {
    key: 'focus',
    name: '专注训练',
    icon: '\u{1F3AF}',
    color: '#F97316',
    lightColor: '#FFF7ED',
    desc: '通过舒尔特方格、数字追踪等练习提升专注力',
    tip: '专注力是一切学习的基础。每天坚持10分钟专注训练，持续21天会有显著提升。',
    games: [
      { code: 'schulte', name: '舒尔特方格', icon: '\u{1F3AF}', desc: '按序点击数字，训练持续专注' }
    ]
  },
  memory: {
    key: 'memory',
    name: '记忆训练',
    icon: '\u{1F9E0}',
    color: '#10B981',
    lightColor: '#ECFDF5',
    desc: '通过数字记忆、序列回忆等练习提升记忆力',
    tip: '记忆力可以通过科学训练显著提升。联想记忆法和间隔重复是最有效的两种方法。',
    games: [
      { code: '1a2b', name: '猜数字', icon: '\u{1F522}', desc: '记忆数字排列，训练工作记忆' }
    ]
  },
  logic: {
    key: 'logic',
    name: '逻辑训练',
    icon: '\u{1F9E9}',
    color: '#3B82F6',
    lightColor: '#EFF6FF',
    desc: '通过推理题、模式识别等练习提升逻辑思维',
    tip: '逻辑思维是解决复杂问题的关键。多做推理和归纳练习，能帮助建立清晰的思维框架。',
    games: [
      { code: 'sudoku', name: '数独', icon: '\u{1F9E9}', desc: '数字逻辑推理，训练演绎思维' },
      { code: '1a2b', name: '猜数字', icon: '\u{1F522}', desc: '逻辑排除推理，训练分析能力' }
    ]
  },
  spatial: {
    key: 'spatial',
    name: '空间训练',
    icon: '\u{1F9CA}',
    color: '#8D6E63',
    lightColor: '#EFEBE9',
    desc: '通过空间旋转、立体构建等练习提升空间思维能力',
    tip: '空间思维对数学和科学学习至关重要。拼图和积木是提升空间能力的最佳方式。',
    games: [
      { code: 'sudoku', name: '数独', icon: '\u{1F9E9}', desc: '九宫格空间布局，训练空间推理' }
    ]
  },
  processingSpeed: {
    key: 'processingSpeed',
    name: '加工速度训练',
    icon: '\u26A1',
    color: '#FFD700',
    lightColor: '#FFFBEB',
    desc: '通过快速反应、速度测试等练习提升加工速度',
    tip: '加工速度影响学习和反应效率。速算、速读等限时练习是提升加工速度的有效方法。',
    games: [
      { code: 'schulte', name: '舒尔特方格', icon: '\u{1F3AF}', desc: '限时完成，训练反应速度' },
      { code: '1a2b', name: '猜数字', icon: '\u{1F522}', desc: '快速推理，训练信息处理速度' }
    ]
  }
}

var GAME_PAGES = {
  schulte: '/pages/games/schulte',
  '1a2b': '/pages/games/1a2b',
  sudoku: '/pages/games/sudoku'
}

export default {
  components: { PageBanner },
  data: function() {
    return {
      dimension: null,
      memberId: null,
      stats: null,
      statsLoading: false
    }
  },
  computed: {
    currentDim: function() {
      var dim = DIMENSION_MAP[this.dimension]
      return dim || null
    },
    currentQuote: function() {
      var dim = this.currentDim
      return dim ? dim.desc : '知己知彼，百战不殆'
    },
    otherDimensions: function() {
      var self = this
      var keys = Object.keys(DIMENSION_MAP)
      var result = []
      for (var i = 0; i < keys.length; i++) {
        if (keys[i] !== self.dimension) {
          result.push(DIMENSION_MAP[keys[i]])
        }
      }
      return result
    }
  },
  onLoad: function(options) {
    if (options && options.dimension) {
      this.dimension = options.dimension
    }
    if (options && options.memberId) {
      this.memberId = options.memberId
    } else {
      this.memberId = uni.getStorageSync('currentChildId') || null
    }
    uni.setNavigationBarTitle({
      title: this.currentDim ? this.currentDim.name : '能力训练'
    })
    this.loadStats()
  },
  methods: {
    loadStats: function() {
      var self = this
      if (!self.memberId) return
      self.statsLoading = true
      getGameStats({ memberId: self.memberId }).then(function(res) {
        if (res && res.data) {
          self.stats = res.data
        }
      }).catch(function() {
        // silent — stats not critical
      }).finally(function() {
        self.statsLoading = false
      })
    },
    goGame: function(game) {
      var url = GAME_PAGES[game.code]
      if (!url) {
        uni.showToast({ title: '游戏暂未开放', icon: 'none' })
        return
      }
      var memberId = this.memberId || ''
      url = url + '?memberId=' + memberId + '&dimension=' + (this.dimension || '')
      uni.navigateTo({ url: url })
    },
    switchDimension: function(key) {
      this.dimension = key
      uni.setNavigationBarTitle({
        title: DIMENSION_MAP[key].name
      })
    }
  }
}
</script>

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

/* ===== 训练概览卡 ===== */
.stats-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.stats-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stats-value {
  font-size: 44rpx;
  font-weight: bold;
  color: #F97316;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 22rpx;
  color: #999;
}

.stats-divider {
  width: 1rpx;
  height: 60rpx;
  background: #eee;
  flex-shrink: 0;
}

.stats-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
}

.stats-loading-text {
  font-size: 26rpx;
  color: #bbb;
}

/* ===== 维度描述卡 ===== */
.dimension-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.dimension-icon-wrap {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.dimension-icon {
  font-size: 56rpx;
}

.dimension-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.dimension-desc {
  font-size: 26rpx;
  color: #888;
  text-align: center;
  line-height: 1.6;
}

/* ===== 通用区段 ===== */
.section {
  margin: 20rpx 30rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* ===== 推荐游戏列表 ===== */
.game-list {
  display: flex;
  flex-direction: column;
}

.game-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin-bottom: 20rpx;
}

.game-card:active {
  opacity: 0.7;
}

.game-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.game-card-icon {
  font-size: 40rpx;
}

.game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}

.game-desc {
  font-size: 22rpx;
  color: #999;
}

.game-arrow {
  font-size: 28rpx;
  color: #ccc;
  margin-left: 16rpx;
  flex-shrink: 0;
}

/* ===== 成长建议卡 ===== */
.tip-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  overflow: hidden;
}

.tip-left-bar {
  width: 6rpx;
  flex-shrink: 0;
}

.tip-body {
  flex: 1;
  padding: 28rpx 24rpx;
}

.tip-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.7;
}

/* ===== 其他维度网格 ===== */
.other-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.other-item {
  width: calc(33.33% - 20rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 8rpx;
  margin: 0 10rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.other-item:active {
  opacity: 0.7;
}

.other-icon-wrap {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.other-icon {
  font-size: 32rpx;
}

.other-name {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}

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