study_helper/pages/study/study.wxml

<!-- pages/study/study.wxml -->
<view class="study-container">
  <!-- 加载状态 -->
  <view wx:if="{{isLoading}}" class="loading-state">
    <view class="loading-content">
      <image src="/images/loading.gif" class="loading-icon"></image>
      <text class="loading-text">诗歌加载中...</text>
    </view>
  </view>

  <!-- 错误状态 -->
  <view wx:elif="{{loadError}}" class="error-state">
    <view class="error-content">
      <image src="/images/error-icon.png" class="error-icon"></image>
      <text class="error-title">加载失败</text>
      <text class="error-desc">{{originalText}}</text>
      <button class="btn-retry" bindtap="reloadData">重新加载</button>
    </view>
  </view>

  <!-- 正常内容 -->
  <view wx:else class="poem-detail">
    <!-- 头部卡片 -->
    <view class="header-card">
      <view class="poem-basic-info">
        <view class="poem-title">{{poemTitle}}</view>
        <view class="poem-meta">
          <text class="poet-info">{{poetInfo}}</text>
          <view class="poem-type-tag">{{poemType}}</view>
        </view>
      </view>
      <!-- 操作按钮组 -->
      <view class="action-buttons">
        <!-- 语音播报按钮 -->
        <button class="btn-speak" type="default" size="mini" bindtap="speakPoem">
          <text class="btn-icon">🔊</text>
          语音播报
        </button>
      </view>
    </view>

    <!-- 诗歌内容卡片 -->
    <view class="content-card">
      <view class="card-header">
        <text class="card-title">诗歌原文</text>
        <!-- 诗歌原文语音播报按钮 -->
        <button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="content">
          <text class="btn-icon">🔊</text>
        </button>
        <view class="header-actions">
          <button class="btn-copy" bindtap="copyContent">
            <text class="btn-icon">📋</text>
            复制
          </button>
        </view>
      </view>
      <view class="original-text">
        <text class="poem-content">{{originalText}}</text>
      </view>
    </view>

    <!-- 译文卡片 -->
    <view class="content-card">
      <view class="section-header" bindtap="toggleTranslation">
        <view class="section-title-wrapper">
          <text class="card-title">诗歌译文</text>
          <!-- 译文语音播报按钮 -->
          <button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="translation">
            <text class="btn-icon">🔊</text>
          </button>
        </view>
        <view class="toggle-wrapper">
          <text class="toggle-text">{{showTranslation ? '收起' : '展开'}}</text>
          <text class="toggle-icon">{{showTranslation ? '▲' : '▼'}}</text>
        </view>
      </view>
      <view wx:if="{{showTranslation}}" class="translation-text">
        <text class="translation-content">{{translationText}}</text>
      </view>
    </view>

    <!-- 背景信息卡片 -->
    <view class="content-card">
      <view class="section-header" bindtap="toggleBackground">
        <view class="section-title-wrapper">
          <text class="card-title">创作背景</text>
          <!-- 背景语音播报按钮 -->
          <button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="background">
            <text class="btn-icon">🔊</text>
          </button>
        </view>
        <view class="toggle-wrapper">
          <text class="toggle-text">{{showBackground ? '收起' : '展开'}}</text>
          <text class="toggle-icon">{{showBackground ? '▲' : '▼'}}</text>
        </view>
      </view>
      <view wx:if="{{showBackground}}" class="background-text">
        <text class="background-content">{{backgroundInfo}}</text>
      </view>
    </view>

    <!-- 作者信息卡片 -->
    <view class="content-card">
      <view class="card-header">
        <view class="section-title-wrapper">
          <image src="/images/author-icon.png" class="section-icon"></image>
          <text class="card-title">作者简介</text>
          <!-- 作者简介语音播报按钮 -->
          <button class="btn-speak-icon" type="default" size="mini" bindtap="speakPoem" data-type="author">
            <text class="btn-icon">🔊</text>
          </button>
        </view>
      </view>
      <view class="author-text">
        <text class="author-content">{{authorInfo}}</text>
      </view>
    </view>
  </view>

  <!-- 底部背诵按钮 -->
  <view class="bottom-container">
    <button class="recite-button" bindtap="goToRecite">开始背诵</button>
  </view>
</view>