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>