cfc/cfc-frontend/pages/mind/soothe-toolbox.vue

<template>
  <view class="toolbox-container">
    <!-- ===== 4-7-8 呼吸练习 ===== -->
    <view class="tool-section">
      <view class="section-header">
        <text class="section-emoji">&#x1F9D8;</text>
        <text class="section-title">4-7-8 呼吸练习</text>
      </view>
      <text class="section-desc">用深呼吸让自己平静下来</text>

      <view class="breathing-area" @click="toggleBreathing">
        <view :class="['breath-circle', breathPhase]">
          <text class="breath-text">{{ breathInstruction }}</text>
        </view>
      </view>
      <text class="breath-hint" v-if="!breathing">点击开始呼吸练习</text>
      <text class="breath-count" v-if="breathing">第 {{ breathRound }} 轮</text>
    </view>

    <!-- ===== 正念练习 ===== -->
    <view class="tool-section">
      <view class="section-header">
        <text class="section-emoji">&#x1F4A1;</text>
        <text class="section-title">正念练习</text>
      </view>
      <view class="mindfulness-cards">
        <view
          :class="['mind-card', activeMindCard === idx ? 'mind-card-active' : '']"
          v-for="(item, idx) in mindfulnessItems"
          :key="idx"
          @click="activeMindCard = idx">
          <text class="mind-card-title">{{ item.title }}</text>
          <text class="mind-card-desc">{{ item.desc }}</text>
        </view>
      </view>
      <view class="mindfulness-content" v-if="activeMindCard !== -1">
        <text class="mindfulness-text">{{ mindfulnessItems[activeMindCard].content }}</text>
      </view>
    </view>

    <!-- ===== 情绪涂鸦 ===== -->
    <view class="tool-section">
      <view class="section-header">
        <text class="section-emoji">&#x1F3A8;</text>
        <text class="section-title">情绪涂鸦</text>
      </view>
      <text class="section-desc">在纸上自由画下你现在的情绪</text>
      <view class="doodle-suggestions">
        <view class="doodle-item" v-for="(item, idx) in doodlePrompts" :key="idx">
          <text class="doodle-icon">{{ item.icon }}</text>
          <text class="doodle-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- ===== 运动释压 ===== -->
    <view class="tool-section">
      <view class="section-header">
        <text class="section-emoji">&#x1F3CB;</text>
        <text class="section-title">运动释压</text>
      </view>
      <text class="section-desc">简单的伸展动作，释放身体紧张</text>
      <view class="exercise-list">
        <view class="exercise-item" v-for="(ex, idx) in exercises" :key="idx">
          <text class="exercise-name">{{ ex.name }}</text>
          <text class="exercise-desc">{{ ex.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="disclaimer">
      <text class="disclaimer-text">以上内容仅供参考，不能替代专业心理咨询或医疗建议。如有需要，请寻求专业帮助。</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      breathing: false,
      breathPhase: 'inhal',
      breathInstruction: '吸气',
      breathRound: 0,
      breathTimer: null,
      activeMindCard: -1,
      mindfulnessItems: [
        {
          title: '5-4-3-2-1 感官练习',
          desc: '快速回归当下',
          content: '找一个舒服的姿势坐下，深呼吸三次。然后：\n\n看：说出你看到的 5 样东西\n听：说出你听到的 4 种声音\n触：感受你身体的 3 处触觉\n闻：闻到的 2 种气味\n味：品尝到的 1 种味道\n\n这个练习能帮你快速从焦虑中回到当下。'
        },
        {
          title: '身体扫描',
          desc: '放松全身',
          content: '闭上眼睛，把注意力带到脚趾。感受脚趾的温度和触感。\n\n慢慢向上移动注意力：脚掌 → 脚踝 → 小腿 → 膝盖 → 大腿 → 腹部 → 胸部 → 手指 → 手臂 → 肩膀 → 脖子 → 面部 → 头顶。\n\n在每个部位停留 3-5 秒，感受那里的感觉。'
        },
        {
          title: '感恩三件事',
          desc: '培养积极心态',
          content: '想一想今天让你感到感恩的三件事。可以是很小的事：\n\n1. 今天吃到了一顿美味的饭\n2. 有人对你说了一句温暖的话\n3. 今天的天气很好\n4. 你学会了一样新东西\n5. 帮助了别人\n\n在心里默默感谢这些美好。'
        }
      ],
      doodlePrompts: [
        { icon: '\u{1F308}', text: '画出你今天的情绪彩虹' },
        { icon: '\u{1F33F}', text: '画一棵代表你内心的小树' },
        { icon: '\u{1F30A}', text: '画出心情波浪' },
        { icon: '\u{1F31F}', text: '画出你心中的星星' }
      ],
      exercises: [
        { name: '耸肩放松', desc: '双肩用力向上耸起（靠近耳朵），保持 5 秒，然后突然放松。重复 5 次。' },
        { name: '颈部伸展', desc: '慢慢将头向右侧倾斜，右手轻压头部，保持 15 秒。换左侧重复。' },
        { name: '猫牛式', desc: '双手双膝着地，吸气时塌腰抬头（牛式），呼气时弓背低头（猫式）。重复 10 次。' },
        { name: '蝴蝶式', desc: '坐姿，双脚掌相对，双手握住脚踝，膝盖向两侧打开轻轻上下抖动，像蝴蝶扇动翅膀。' }
      ]
    }
  },

  methods: {
    toggleBreathing() {
      if (this.breathing) {
        this.stopBreathing()
      } else {
        this.startBreathing()
      }
    },

    startBreathing() {
      this.breathing = true
      this.breathRound = 1
      this.doBreathPhase('inhal', 4)
    },

    doBreathPhase(phase, seconds) {
      var self = this
      if (!self.breathing) return

      self.breathPhase = phase
      var instructions = {
        inhal: '吸气...',
        hold: '屏息...',
        exhale: '呼气...'
      }
      self.breathInstruction = instructions[phase] || ''

      self.breathTimer = setTimeout(function() {
        if (!self.breathing) return
        if (phase === 'inhal') {
          self.doBreathPhase('hold', 7)
        } else if (phase === 'hold') {
          self.doBreathPhase('exhale', 8)
        } else {
          // exhale done, start next round
          var nextRound = self.breathRound + 1
          self.breathRound = nextRound
          if (nextRound <= 5) {
            self.doBreathPhase('inhal', 4)
          } else {
            self.stopBreathing()
            uni.showToast({ title: '完成一组呼吸', icon: 'none' })
          }
        }
      }, seconds * 1000)
    },

    stopBreathing() {
      this.breathing = false
      if (this.breathTimer) {
        clearTimeout(this.breathTimer)
        this.breathTimer = null
      }
      this.breathPhase = 'inhal'
      this.breathInstruction = '吸气'
      this.breathRound = 0
    }
  },

  onUnload() {
    this.stopBreathing()
  }
}
</script>

<style scoped>
.toolbox-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 50%, #FFF7ED 100%);
  padding-bottom: 40rpx;
}

.tool-section {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.section-emoji {
  font-size: 36rpx;
  margin-right: 12rpx;
}

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

.section-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 20rpx;
}

/* ===== 呼吸练习 ===== */
.breathing-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.breath-circle {
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #A7F3D0, #6EE7B7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 8rpx 40rpx rgba(16, 185, 129, 0.2);
}

.breath-circle.inhal {
  animation: breatheIn 4s ease-in-out;
}

.breath-circle.hold {
  background: linear-gradient(135deg, #FDE68A, #F59E0B);
  box-shadow: 0 8rpx 40rpx rgba(245, 158, 11, 0.3);
}

.breath-circle.exhale {
  animation: breatheOut 8s ease-in-out;
}

.breath-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
}

.breath-hint {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #999;
}

.breath-count {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #10B981;
  margin-top: 8rpx;
}

/* ===== 正念练习 ===== */
.mindfulness-cards {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.mind-card {
  padding: 20rpx;
  background: #F9F9F9;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
}

.mind-card-active {
  background: #F0FDF4;
  border-color: #10B981;
}

.mind-card-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  display: block;
}

.mind-card-desc {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
}

.mindfulness-content {
  margin-top: 16rpx;
  padding: 20rpx;
  background: #F0FDF4;
  border-radius: 12rpx;
  border-left: 6rpx solid #10B981;
}

.mindfulness-text {
  font-size: 24rpx;
  color: #555;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* ===== 情绪涂鸦 ===== */
.doodle-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.doodle-item {
  width: calc(50% - 8rpx);
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx;
  background: #FFFBEB;
  border-radius: 12rpx;
  box-sizing: border-box;
}

.doodle-icon {
  font-size: 36rpx;
}

.doodle-text {
  font-size: 24rpx;
  color: #666;
  flex: 1;
}

/* ===== 运动释压 ===== */
.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.exercise-item {
  padding: 20rpx;
  background: #F0F9FF;
  border-radius: 12rpx;
  border-left: 6rpx solid #3B82F6;
}

.exercise-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #2563EB;
  display: block;
  margin-bottom: 6rpx;
}

.exercise-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

/* ===== 免责声明 ===== */
.disclaimer {
  margin: 32rpx;
  padding: 20rpx;
  background: #FEF3C7;
  border-radius: 12rpx;
}

.disclaimer-text {
  font-size: 22rpx;
  color: #92400E;
  line-height: 1.6;
}
</style>