huaanglimeng/pages/index/index.wxml

<view class="container">
  <view class="title-area">
  <text class="app-title">塔罗 · 今日指引</text>
  <text class="app-subtitle">📅 今日指引 · {{todayDate}}</text>
  <text class="instruction" style="font-size: 14px; margin-top: 5px; opacity: 0.8; color: #ccc;">当你需要一个答案时</text>
</view>

  <!-- 标题区域 -->
  <view class="header">
    <text class="app-title">🔮 神秘塔罗 🔮</text>
  </view>

  <!-- 1. 待机与引导状态 -->
  <view class="intro" wx:if="{{state === 'idle' || state === 'focusing'}}">
    <view class="deck-container" animation="{{deckAnimation}}" bindtap="drawCard">
      <image class="card-deck" src="{{cardBackImage}}" mode="widthFix"></image>
      <text class="tap-hint" wx:if="{{state === 'idle'}}">点击开始抽牌</text>
    </view>
    
    <view class="guide-text" animation="{{guideAnimation}}" style="opacity: 0;">
      <text class="instruction">请在心中默念你的问题</text>
    </view>
  </view>

  <!-- 2. 抽牌与结果展示状态 -->
  <view class="card-display" wx:if="{{state === 'flipping' || state === 'revealed'}}">
    <view class="flip-scene" animation="{{cardAnimation}}">
      <view class="flip-card {{isRevealed ? 'flipped' : ''}}">
        <!-- A. 牌背 -->
        <view class="card-face face-back">
          <image class="card-image" src="{{cardBackImage}}" mode="widthFix"></image>
        </view>

        <!-- B. 牌面 -->
        <view class="card-face face-front">
          <image class="card-image {{currentCard.isReversed ? 'reversed' : ''}}" src="{{currentCard.image}}" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <!-- 解读区域：翻牌完成 (revealed) 后显示 -->
    <view class="card-info" animation="{{infoAnimation}}" style="opacity: 0; transform: translateY(20px);">
      <!-- 1. 牌名与位置 -->
      <view class="info-header">
        <text class="card-name">{{currentCard.name}}</text>
        <text class="card-pos">{{currentCard.isReversed ? '· 逆位' : '· 正位'}}</text>
      </view>

      <!-- 2. 关键词 (权重最高) -->
      <view class="keyword-area">
        <text class="keyword-tag">{{currentCard.keyword}}</text>
      </view>

      <!-- 3. 一句话核心解读 (判词) -->
      <view class="core-meaning">
        <text>{{currentCard.isReversed ? '警告：' : '启示：'}}{{currentCard.isReversed ? currentCard.reversedMeaning : currentCard.meaning}}</text>
      </view>
      
      <!-- 4. 详细解释文本 (权重最低) -->
      <view class="detail-explanation">
        <view class="loading-ai" wx:if="{{isAiLoading}}">
          <text class="loading-dot">···</text>
          <text>AI 正在感应心灵能量...</text>
        </view>
        <text class="explanation-text" wx:else>{{aiExplanation || explanation}}</text>
      </view>

    </view>
  </view>

  <!-- 3. 抽卡按钮：点击触发 drawCard -->
  <button class="draw-btn" bindtap="drawCard" type="primary">
    {{currentCard ? '重抽一张' : '✨ 抽一张塔罗牌'}}
  </button>

</view>