miniprogram-1/miniprogram/pages/scene_sentence/scene_sentence.wxml

<view class="scene-sentence-container">
  <view wx:if="{{loadingMaskVisible}}" class="page-loading-mask">
    <view class="scanner scanner-visible">
      <view class="star star1"></view>
      <view class="star star2"></view>
      <view class="star star3"></view>
    </view>
    <view class="status-text">场景分析中...</view>
  </view>
  <view class="container {{contentVisible ? 'fade-in' : 'fade-out'}}" wx:if="{{scene && scene.list && scene.list.length > 0}}">
    <block wx:if="{{scene.list[currentIndex]}}">
      <view class="sentence-header">
        <view class="sentence-en sentence-content-wrapper">
          <view wx:for="{{englishWords}}" wx:for-item="w" wx:for-index="i" wx:key="i" class="sentence-word" style="{{i === 0 ? 'text-transform: capitalize;' : ''}}" data-word="{{w}}" data-index="{{i}}" bindtap="onWordTap">{{w}}</view>
        </view>
        <text class="sentence-zh">{{scene.list[currentIndex].sentenceZh}}</text>
      </view>

      <scroll-view class="sentence-body" scroll-y="true" scroll-with-animation="true">
        <view class="tags-wrap">
          <t-tag wx:for="{{scene.list[currentIndex].functionTags}}" wx:key="idx" variant="light"><text>#</text>{{item}}</t-tag>
        </view>

        <view class="tip-card">
          <view class="tip-title">
            <t-icon name="info-circle" size="40rpx" />
            <text>发音提示</text>
          </view>
          <view class="tip-content">
            <text>{{scene.list[currentIndex].pronunciationTip}}</text>
          </view>
          <view class="fluency-hack" wx:if="{{scene.list[currentIndex].fluencyHacks}}">
            <view class="hack-title">
              <t-icon name="chat-bubble-smile" size="32rpx" />
              <text>技巧</text>
            </view>
            <view class="hack-content">
              <text>{{scene.list[currentIndex].fluencyHacks}}</text>
            </view>
          </view>
        </view>

        <view class="tip-card">
          <view class="tip-title">
            <t-icon name="chat-bubble-error" size="40rpx" />
            <text>常见错误</text>
          </view>
          <view class="tip-content">
            <text wx:for="{{commonMistakes}}" wx:for-index="i" wx:key="idx" class="mistake-item ">{{item}}</text>
          </view>
          <!-- <view class="fluency-hack" wx:if="{{scene.list[currentIndex].fluencyHacks}}">
            <view class="hack-title">
              <t-icon name="notification-error" size="32rpx" />
              <text>注意事项</text>
            </view>
            <view class="hack-content">
              <text>{{scene.list[currentIndex].avoidScenarios}}</text>
            </view>
          </view> -->
        </view>

        <view class="section-title">
          <text>相似句型</text>
        </view>
        <view class="mistake-card" wx:if="{{pragmaticAlternative && pragmaticAlternative.length > 0}}">
          <view class="mistake-list">
            <text wx:for="{{pragmaticAlternative}}" wx:for-index="i" wx:key="idx" class="mistake-item ">{{item}}</text>
          </view>
        </view>

        <view class="section-title">
          <text>搭话</text>
        </view>
        <view class="mistake-card" wx:if="{{responsePairs && responsePairs.length > 0}}">
          <view class="mistake-list">
            <text wx:for="{{responsePairs}}" wx:for-index="i" wx:key="idx" class="mistake-item ">{{item}}</text>
          </view>
        </view>

        <view class="section-title">
          <text>核心词汇</text>
          <text class="section-count">{{scene.list[currentIndex].coreVocab.length}} words</text>
        </view>
        <view class="core-vocab">
          <t-tag class="core-vocab-tag" wx:for="{{scene.list[currentIndex].coreVocab}}" wx:for-index="i" wx:key="word" variant="light" theme="primary" data-word="{{item}}" bindtap="onWordTap">{{item}} {{scene.list[currentIndex].coreVocabDesc[i]}}</t-tag>
        </view>

        <view class="section-title">
          <text>搭配用法</text>
        </view>
        <view class="collocations">
          <t-tag wx:for="{{scene.list[currentIndex].collocations}}" wx:key="idx" variant="light" theme="primary">{{item}}</t-tag>
        </view>

        <!-- <view class="scene-explain">
          <text>{{scene.list[currentIndex].sceneExplanation}}</text>
        </view> -->
      </scroll-view>
    </block>

  </view>
  <view class="highlight-area {{overlayVisible ? 'show' : ''}}" catchtouchstart="noop" catchtouchmove="noop" catchtouchend="noop">
    <view wx:for="{{highlightWords}}" wx:key="index"
          class="overlay-word {{highlightShow ? 'show' : ''}} {{highlightZoom ? 'zoom' : ''}}"
          style="left: {{item.left}}px; top: {{item.top}}px; width: {{item.width}}px; height: {{item.height}}px; {{item.transform ? ('transform: ' + item.transform) : ''}}">
      <view class="overlay-text">{{item.text}}</view>
    </view>
  </view>
  <view wx:if="{{isRecording}}" class="recording-mask" catchtouchstart="noop" catchtouchmove="noop" catchtouchend="noop"></view>
    <view class="bottom-bar {{buttonsVisible ? 'show' : ''}}">
      <t-icon name="chevron-left" class="bottom-btn {{currentIndex <= 0 ? 'disabled' : ''}}" size="48rpx" bind:tap="onPrevTap" />
      <t-icon name="{{isPlaying ? 'pause' : 'play'}}" class="bottom-btn" size="48rpx" bind:tap="playStandardVoice" />
      <view class="mic-wrap" bind:longpress="handleRecordStart" bind:touchend="handleRecordEnd" bind:touchcancel="handleRecordEnd">
        <t-icon name="microphone-1" class="microphone {{isRecording ? 'recording' : 'bottom-btn'}}" size="48rpx" />
        <view wx:if="{{isRecording}}" class="mic">
          <view class="mic-shadow"></view>
        </view>
    </view>
    <t-icon name="fact-check" class="bottom-btn {{(hasScoreInfo && !isRecording) ? '' : 'disabled'}}" size="48rpx" bind:tap="onScoreTap" />
    <t-icon name="chevron-right" class="bottom-btn {{(scene.list && (currentIndex >= scene.list.length - 1)) ? 'disabled' : ''}}" size="48rpx" bind:tap="onNextTap" />
  </view>
    <score-modal
      wx:if="{{isScoreModalOpen && hasScoreInfo}}"
      visible="{{scoreModalVisible}}"
      hasScoreInfo="{{hasScoreInfo}}"
      sentence="{{currentSentence}}"
      totalScore="{{totalScore}}"
      accuracyScore="{{accuracyScore}}"
      completenessScore="{{completenessScore}}"
      fluencyScore="{{fluencyScore}}"
      circleProgressStyle="{{circleProgressStyle}}"
      accuracyCircleStyle="{{accuracyCircleStyle}}"
      completenessCircleStyle="{{completenessCircleStyle}}"
      fluencyCircleStyle="{{fluencyCircleStyle}}"
      wordScores="{{wordScores}}"
      bind:close="onCloseScoreModal"
      bind:play="playStandardVoice"
    />
    <word-dictionary
      visible="{{showDictPopup}}"
      expanded="{{showDictExtended}}"
      loading="{{dictLoading}}"
      wordDict="{{wordDict}}"
      isWordEmptyResult="{{isWordEmptyResult}}"
      dictDefaultTabValue="{{dictDefaultTabValue}}"
      bind:close="handleDictClose"
      bind:more="handleDictMore"
      bind:wordTap="onWordTap"
    />
    <view class="word-popup-mask" wx:if="{{showDictPopup}}" bindtap="handleDictClose"></view>
</view>