englishread-front/subPages/home/book.vue

<template>
  <view class="book-container">
    <!-- 自定义顶部导航栏 -->
    <uv-status-bar></uv-status-bar>
    <view class="custom-navbar" :class="{ 'navbar-hidden': !showNavbar }">
      <uv-status-bar></uv-status-bar>
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <uv-icon name="arrow-left" size="20" color="#262626"></uv-icon>
        </view>
        <view class="navbar-title">{{ currentPageTitle }}</view>

      </view>
    </view>

    <!-- Swiper内容区域 -->
    <swiper 
      class="content-swiper" 
      :current="currentPage - 1"
      @change="onSwiperChange"
    >
      <swiper-item 
        v-for="(page, index) in bookPages" 
        :key="index"
        class="swiper-item"
      >
        <view class="content-area" @click="toggleNavbar">
        
          <!-- 会员限制页面 -->
          <view v-if="!isMember && pagePay[index] === 'Y'" class="member-content">
            <text class="member-title">{{ pageTitles[index] }}</text>
            <view class="member-button" @click="unlockBook">
              <text class="member-button-text">升級會員解鎖</text>
            </view>
          </view>

          <!-- 图片卡片页面 -->
          <view  class="card-content" v-else-if="pageTypes[index] === '1'">
            <view class="card-line">
              <image :src="configParamContent('highlight_icon')" class="card-line-image" mode="aspectFill" />
              <text class="card-line-text">划线重点</text>
            </view>
            <view v-for="(item, index) in page"  :key="index">
              <image class="card-image" v-if="item.type === 'image'" :src="item.imageUrl" mode="aspectFill"></image>
              <view class="english-text-container" v-else-if="item.type === 'text' && item.language === 'en'">
                <text 
                  v-for="(token, tokenIndex) in splitEnglishSentence(item.content)" 
                  :key="tokenIndex"
                  
                  :class="['english-token', { 'clickable-word': token.isWord && findWordDefinition(token.text) }]"
                  @tap="token.isWord && findWordDefinition(token.text) ? handleWordClick(token.text) : null"
                  user-select
                >{{ token.text }}</text>
              </view>
              <text class="chinese-text" v-else-if="item.type === 'text' && item.language === 'zh'" user-select>{{ item.content }}</text>
            </view>
          </view>

          <view v-else>  
            <view v-for="(item, index) in page" :key="index">
              <!-- 文本页面 -->
              <view v-if="item.type === 'text'" class="text-content" >
                <view :class="{ 'text-highlight': isTextHighlighted(page, index) }">
                  <text 
                  class="content-text" 
                  user-select
                  >
                  {{ item.content }}
                  </text>
                </view>
              </view>

              <!-- 文本页面 -->
              <view v-else-if="item.type === 'image'" class="image-container">
                <image class="content-image" :src="item.imageUrl" mode="aspectFill"></image>
              </view>

              <!-- 视频页面 -->
              <view v-else-if="item.type === 'video'" class="video-content">
                <video :src="item.video" class="video-player" controls :poster="item.poster"></video>
              </view>

              
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    
    <!-- 自定义底部控制栏 -->
    <view class="custom-tabbar" :class="{ 'tabbar-hidden': !showNavbar }">
      <!-- 音频控制栏组件 -->
      <AudioControls
        :current-page="currentPage"
        :course-id="courseId"
        :voice-id="voiceId"
        :book-pages="bookPages"
        :is-text-page="isTextPage"
        @previous-page="previousPage"
        @next-page="nextPage"
        @audio-state-change="onAudioStateChange"
        @highlight-change="onHighlightChange"
        ref="audioControls"
      />
    
      
      <view style="background-color: #fff;position: relative;z-index: 100" >
        <view class="tabbar-content">
          <view class="tabbar-left">
            <view class="tab-button" @click="toggleCoursePopup">
              <image src="/static/课程图标.png" class="tab-icon" />
              <text class="tab-text">课程</text>
            </view>
            <view class="tab-button" @click="toggleSound">
              <image src="/static/音色切换图标.png" class="tab-icon" />
              <text class="tab-text">音色切换</text>
            </view>
          </view>
          
          <view class="tabbar-right">
            <view class="page-controls">
              <view class="page-numbers">
                <view 
                  v-for="(page, index) in bookPages" 
                  :key="index"
                  class="page-number"
                  :class="{ 'active': (index + 1) === currentPage }"
                  @click="goToPage(index + 1)"
                >
                  {{ index + 1 }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
    
    <!-- 课程选择弹出窗 -->
    <uv-popup 
      mode="bottom" 
      ref="coursePopup"
      round="32rpx"
      bg-color="#f8f8f8"
    >
      <view class="course-popup">
        <view class="popup-header">
          <view>
            <uv-icon name="arrow-down" color="black" size="20"></uv-icon>
          </view>
          <view class="popup-title">课程</view>
          <view class="popup-title" @click="toggleSort">
            倒序
          </view>
        </view>
        <view class="course-list">
          <view 
            v-for="(course, index) in displayCourseList" 
            :key="course.id"
            class="course-item"
            :class="{ 'active': course.id === currentCourse }"
            @click="selectCourse(course.id)"
          >
            <view class="course-number " :class="{ 'highlight': course.id === currentCourse }">{{ String(course.index).padStart(2, '0') }}</view>
            <view class="course-content">
              <view class="course-english" :class="{ 'highlight': course.id === currentCourse }">{{ course.english }}</view>
              <view class="course-chinese" :class="{ 'highlight': course.id === currentCourse }">{{ course.chinese }}</view>
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    
    <!-- 释义弹出窗 -->
    <uv-popup 
      mode="bottom" 
      
      ref="meaningPopup"
      round="32rpx"
      bg-color="#FFFFFF"
      :overlay="true"
    >
      <view class="meaning-popup" v-if="currentWordMeaning">
        <view class="meaning-header">
          <view class="close-btn" @click="closeMeaningPopup">
            <text class="close-text">关闭</text>
          </view>
          <view class="meaning-title">释义</view>
          <view style="width: 80rpx;"></view>
        </view>
        
        <view class="meaning-content">
          <image class="meaning-image" src="/static/默认图片.png" mode="aspectFill"></image>
          
          <view class="word-info">
            <view class="word-main">
              <text class="word-text">{{ currentWordMeaning.word }}</text>
            </view>
            <view class="phonetic-container">
                <uv-icon 
                  name="volume-fill" 
                  size="16" 
                  color="#007AFF" 
                  class="speaker-icon"
                  @click="repeatWordAudio"
                ></uv-icon>
                <text class="phonetic-text">{{ currentWordMeaning.phonetic }}</text>
            </view>
            <view class="word-meaning">
              <text class="part-of-speech">{{ currentWordMeaning.partOfSpeech }}</text>
              <text class="meaning-text">{{ currentWordMeaning.meaning }}</text>
            </view>
          </view>
          
          <view class="knowledge-gain">
            <view class="knowledge-header">
              <image src="/static/知识收获图标.png" class="knowledge-icon" mode="aspectFill" />
              <text class="knowledge-title">知识收获</text>
            </view>
            <text class="knowledge-content">{{ currentWordMeaning.knowledgeGain }}</text>
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import AudioControls from './AudioControls.vue'

export default {
  components: {
    AudioControls
  },
  data() {
    return {
      isMember: false,
      memberId: '',
      voiceId: null,
      courseId: '',
      showNavbar: true,
      currentPage: 1,
      currentCourse: 1, // 当前课程索引
      currentWordMeaning: null, // 当前显示的单词释义
      isReversed: false, // 是否倒序显示
      // 文本高亮相关
      currentHighlightIndex: -1, // 当前高亮的文本索引
      wordAudioCache: {}, // 單詞語音緩存
      currentWordAudio: null, // 當前播放的單詞音頻實例
      courseIdList: [],
      bookTitle: '',
      courseList: [
     
      ],

      // 二维数组 代表每个页面
      bookPages: [
        
      ],
      // 存储每个页面的标题
      pageTitles: [],
      // 存储每个页面的type信息
      pageTypes: [],
      // 存储每个页面的单词释义数据
      pageWords: [],
      // 存储每个页面的付费状态
      pagePay: [],
    }
  },
  computed: {
    displayCourseList() {
      return this.isReversed ? [...this.courseList].reverse() : this.courseList;
    },
    // 判断当前页面是否为文字类型
    isTextPage() {
      // 如果是卡片页面（type为'1'），不显示音频控制栏
      if (this.currentPageType === '1') {
        return false;
      }
      
      const currentPageData = this.bookPages[this.currentPage - 1];
      // currentPageData是一个数组 其中的一个元素的type是text就会返回true
      return currentPageData && currentPageData.some(item => item.type === 'text');
    },


    // 动态页面标题
    currentPageTitle() {
      return this.pageTitles[this.currentPage - 1] || this.bookTitle;
    },
    
    // 当前页面类型
    currentPageType() {
      return this.pageTypes[this.currentPage - 1] || '';
    },
    
    // 当前页面的单词释义数据
    currentPageWords() {
      return this.pageWords[this.currentPage - 1] || [];
    }
  },
  methods: {
    // 獲取用戶會員信息 判斷是否和傳參傳過來的會員id相同
    async getMemberInfo(){
      const memberRes = await this.$api.member.getUserMemberInfo()
      if (memberRes.code === 200) {
        this.isMember = memberRes.result.map(item => item.memberId).includes(this.memberId)
        console.log('isMember:', this.isMember);
      }
      
    },
    
    // 处理AudioControls组件的事件
    onAudioStateChange(audioState) {
      // 更新高亮状态
      this.currentHighlightIndex = audioState.currentHighlightIndex;
    },
    
    onHighlightChange(highlightIndex) {
      // 更新高亮索引
      this.currentHighlightIndex = highlightIndex;
    },
    

    // 获取音色列表 拿第一个做默认的音色id
    async getVoiceList() {
      const voiceRes = await this.$api.music.list()
      if(voiceRes.code === 200){
        this.voiceId = voiceRes.result[0].voiceType
        console.log('获取默认音色ID:', this.voiceId);
      }
    },
    toggleNavbar() {
      this.showNavbar = !this.showNavbar
    },
    goBack() {
      uni.navigateBack()
    },
    toggleCoursePopup() {
      if (this.$refs.coursePopup) {
        this.$refs.coursePopup.open()
      }
      // console.log('123123123');
      
    },
    toggleSort() {
      this.isReversed = !this.isReversed
    },
    selectCourse(courseId) {
      this.currentCourse = courseId
      if (this.$refs.coursePopup) {
        this.$refs.coursePopup.close()
      }
      // 这里可以添加切换课程的逻辑
      // console.log('选择课程:', courseId)
      this.getCourseList(courseId)
    },
    showWordMeaning() {
        if (this.$refs.meaningPopup) {
          this.$refs.meaningPopup.open()
        }
    },
    closeMeaningPopup() {
      if (this.$refs.meaningPopup) {
        this.$refs.meaningPopup.close()
      }
      this.currentWordMeaning = null
    },
    
    // 将英文句子分割成单词数组
    splitEnglishSentence(sentence) {
      // 使用正则表达式分割句子，保留标点符号
      const tokens = sentence.match(/\b\w+\b|[^\w\s]/g) || [];
      return tokens.map((token, index) => ({
        text: token,
        index: index,
        isWord: /\b\w+\b/.test(token), // 判断是否为单词
        hasDefinition: false // 是否有释义，稍后会设置
      }));
    },
    
    // 查找单词释义
    findWordDefinition(word) {
      const currentPageWords = this.pageWords[this.currentPage - 1] || [];
      // 不区分大小写匹配
      return currentPageWords.find(wordData => 
        wordData.word.toLowerCase() === word.toLowerCase()
      );
    },
    
    async playWordAudio(word) {
      try {
        console.log('開始播放單詞語音:', word);

        // 停止當前播放的單詞語音
        if (this.currentWordAudio) {
          this.currentWordAudio.destroy();
          this.currentWordAudio = null;
        }

        // 調用語音轉換API
        const audioRes = await this.$api.music.textToVoice({
          text: word,
          voiceType: this.voiceId
        });

        console.log('單詞語音API響應:', audioRes);

        // 檢查響應並播放音頻
        if (audioRes && audioRes.result && audioRes.result.audio) {
          // 新格式：直接使用返回的音頻URL
          const audioUrl = audioRes.result.audio;
          
          // 創建並播放音頻
          const audio = uni.createInnerAudioContext();
          audio.src = audioUrl;
          
          audio.onPlay(() => {
            console.log('開始播放單詞語音:', word);
          });

          audio.onEnded(() => {
            console.log('單詞語音播放完成:', word);
            audio.destroy();
            if (this.currentWordAudio === audio) {
              this.currentWordAudio = null;
            }
          });

          audio.onError((error) => {
            console.error('單詞語音播放失敗:', error);
            audio.destroy();
            if (this.currentWordAudio === audio) {
              this.currentWordAudio = null;
            }
            uni.showToast({
              title: '語音播放失敗',
              icon: 'none'
            });
          });

          // 保存當前音頻實例並播放
          this.currentWordAudio = audio;
          audio.play();
        } else {
          console.error('單詞語音請求失敗:', audioRes);
          uni.showToast({
            title: '語音播放失敗',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('播放單詞語音異常:', error);
        uni.showToast({
          title: '語音播放失敗',
          icon: 'none'
        });
      }
    },



    // 重複播放單詞語音（用於釋義彈窗中的揚聲器圖標）
    repeatWordAudio() {
      if (this.currentWordMeaning && this.currentWordMeaning.word) {
        console.log('重複播放單詞語音:', this.currentWordMeaning.word);
        this.playWordAudio(this.currentWordMeaning.word);
      } else {
        console.warn('沒有當前單詞可以播放');
      }
    },

    // 处理单词点击事件
    handleWordClick(word) {
      const definition = this.findWordDefinition(word);
      console.log('查找单词:', word, '释义:', definition);
      
      // 獲取單詞的讀音
      if (word) {
        this.playWordAudio(word);
      }

      if (definition) {
        this.currentWordMeaning = {
          word: definition.word,
          phonetic: definition.soundmark || '',
          partOfSpeech: '', // 可以根据需要添加词性
          meaning: definition.paraphrase || '',
          knowledgeGain: definition.knowledge || ''
        };
        this.showWordMeaning();
      } else {
        console.log('未找到单词释义:', word);
      }
    },
    
    // 计算音频总时长
    async calculateTotalDuration() {
      let totalDuration = 0;
      for (let i = 0; i < this.currentPageAudios.length; i++) {
        const audio = this.currentPageAudios[i];
        
        // 優先使用API返回的時長信息
        if (audio.duration && audio.duration > 0) {
          console.log(`使用API返回的時長 ${i + 1}:`, audio.duration, '秒');
          totalDuration += audio.duration;
          continue;
        }
        
        // 如果沒有API時長信息，嘗試獲取音頻時長
        try {
          const duration = await this.getAudioDuration(audio.url);
          audio.duration = duration;
          totalDuration += duration;
          console.log(`獲取到音頻時長 ${i + 1}:`, duration, '秒');
        } catch (error) {
          console.error('获取音频时长失败:', error);
          // 如果无法获取时长，根據文字長度估算（更精確的估算）
          const textLength = audio.text.length;
          // 假設每分鐘可以讀150-200個字符，這裡用180作為平均值
          const estimatedDuration = Math.max(2, textLength / 3); // 每3個字符約1秒
          audio.duration = estimatedDuration;
          totalDuration += estimatedDuration;
          console.log(`估算音頻時長 ${i + 1}:`, estimatedDuration, '秒 (文字長度:', textLength, ')');
        }
      }
      this.totalTime = totalDuration;
      console.log('音频总时长:', totalDuration, '秒');
    },
    
    // 获取音频时长
    getAudioDuration(audioUrl) {
      return new Promise((resolve, reject) => {
        const audio = uni.createInnerAudioContext();
        audio.src = audioUrl;
        
        let resolved = false;
        
        // 监听音频加载完成事件
        audio.onCanplay(() => {
          console.log('音频可以播放，duration:', audio.duration);
          if (!resolved && audio.duration && audio.duration > 0) {
            resolved = true;
            resolve(audio.duration);
            audio.destroy();
          }
        });
        
        // 监听音频元数据加载完成事件
        audio.onLoadedmetadata = () => {
          console.log('音频元数据加载完成，duration:', audio.duration);
          if (!resolved && audio.duration && audio.duration > 0) {
            resolved = true;
            resolve(audio.duration);
            audio.destroy();
          }
        };
        
        // 监听音频时长更新事件
        audio.onDurationChange = () => {
          console.log('音频时长更新，duration:', audio.duration);
          if (!resolved && audio.duration && audio.duration > 0) {
            resolved = true;
            resolve(audio.duration);
            audio.destroy();
          }
        };
        
        // 如果以上方法都無法獲取時長，嘗試播放一小段來獲取時長
        audio.onPlay(() => {
          console.log('音频开始播放，duration:', audio.duration);
          if (!resolved) {
            setTimeout(() => {
              if (!resolved && audio.duration && audio.duration > 0) {
                resolved = true;
                resolve(audio.duration);
                audio.destroy();
              }
            }, 100); // 播放100ms後檢查時長
          }
        });
        
        audio.onError((error) => {
          console.error('音频加载失败:', error);
          if (!resolved) {
            resolved = true;
            reject(error);
            audio.destroy();
          }
        });
        
        // 設置較長的超時時間，並在超時前嘗試播放
        setTimeout(() => {
          if (!resolved) {
            console.log('嘗試播放音頻以獲取時長');
            audio.play();
          }
        }, 1000);
        
        // 最終超時處理
        setTimeout(() => {
          if (!resolved) {
            console.warn('獲取音頻時長超時，使用默認值');
            resolved = true;
            reject(new Error('获取音频时长超时'));
            audio.destroy();
          }
        }, 5000);
      });
    },
    
    // 音频控制方法
    togglePlay() {
      if (this.currentPageAudios.length === 0) {
        uni.showToast({
          title: '当前页面没有音频内容',
          icon: 'none'
        });
        return;
      }
      
      if (this.isPlaying) {
        this.pauseAudio();
      } else {
        this.playAudio();
      }
    },
    
    // 播放音频
    playAudio() {
      if (this.currentPageAudios.length === 0) return;
      
      // 如果没有当前音频实例或者需要切换音频
      if (!this.currentAudio || this.currentAudio.src !== this.currentPageAudios[this.currentAudioIndex].url) {
        this.createAudioInstance();
      }
      
      this.currentAudio.play();
      this.isPlaying = true;
      // 更新高亮状态
      this.updateHighlightIndex();
    },
    
    // 暂停音频
    pauseAudio() {
      if (this.currentAudio) {
        this.currentAudio.pause();
      }
      this.isPlaying = false;
      // 暂停时清除高亮
      this.currentHighlightIndex = -1;
    },
    
    // 创建音频实例
    createAudioInstance() {
      // 销毁之前的音频实例
      if (this.currentAudio) {
        this.currentAudio.destroy();
      }
      
      // 優先使用微信原生API以支持playbackRate
      let audio;
      if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
        console.log('使用微信原生音頻API');
        audio = wx.createInnerAudioContext();
      } else {
        console.log('使用uni-app音頻API');
        audio = uni.createInnerAudioContext();
      }
      audio.src = this.currentPageAudios[this.currentAudioIndex].url;
      
      // 在音頻可以播放時檢測playbackRate支持
      audio.onCanplay(() => {
        console.log('🎵 音頻可以播放，開始檢測playbackRate支持');
        this.checkPlaybackRateSupport(audio);
        
        // 檢測完成後，設置用戶期望的播放速度
        setTimeout(() => {
          if (this.playbackRateSupported) {
            console.log('設置播放速度:', this.playSpeed);
            audio.playbackRate = this.playSpeed;
            
            // 驗證設置結果
            setTimeout(() => {
              console.log('最終播放速度:', audio.playbackRate);
              if (Math.abs(audio.playbackRate - this.playSpeed) > 0.01) {
                console.log('⚠️ 播放速度設置可能未生效');
              } else {
                console.log('✅ 播放速度設置成功');
              }
            }, 50);
          } else {
            console.log('❌ 當前環境不支持播放速度控制');
          }
        }, 50);
      });
      
      // 音频事件监听
      audio.onPlay(() => {
        console.log('音频开始播放');
        this.isPlaying = true;
      });
      
      audio.onPause(() => {
        console.log('音频暂停');
        this.isPlaying = false;
      });
      
      audio.onTimeUpdate(() => {
        this.updateCurrentTime();
      });
      
      audio.onEnded(() => {
        console.log('当前音频播放结束');
        this.onAudioEnded();
      });
      
      audio.onError((error) => {
        console.error('音频播放错误:', error);
        this.isPlaying = false;
        uni.showToast({
          title: '音频播放失败',
          icon: 'none'
        });
      });
      
      this.currentAudio = audio;
    },
    
    // 更新当前播放时间
    updateCurrentTime() {
      if (!this.currentAudio) return;
      
      let totalTime = 0;
      // 计算之前音频的总时长
      for (let i = 0; i < this.currentAudioIndex; i++) {
        totalTime += this.currentPageAudios[i].duration;
      }
      // 加上当前音频的播放时间
      totalTime += this.currentAudio.currentTime;
      
      this.currentTime = totalTime;
      
      // 如果不是正在拖動滑動條，則同步更新滑動條的值
      if (!this.isDragging) {
        this.sliderValue = this.currentTime;
      }
      
      // 更新当前高亮的文本索引
      this.updateHighlightIndex();
    },
    
    // 更新高亮文本索引
    updateHighlightIndex() {
      if (!this.isPlaying || this.currentPageAudios.length === 0) {
        this.currentHighlightIndex = -1;
        return;
      }
      
      // 根据当前播放的音频索引设置高亮
      this.currentHighlightIndex = this.currentAudioIndex;
      console.log('更新高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);
    },
    
    // 判断当前文本是否应该高亮
    isTextHighlighted(page, index) {
      // 只有当前页面且是文本类型才可能高亮
      if (page !== this.bookPages[this.currentPage - 1]) return false;
      
      // 计算当前页面中text类型元素的索引
      let textIndex = 0;
      for (let i = 0; i <= index; i++) {
        if (page[i].type === 'text') {
          if (i === index) {
            const shouldHighlight = textIndex === this.currentHighlightIndex;
            if (shouldHighlight) {
              console.log('高亮文本:', textIndex, '当前高亮索引:', this.currentHighlightIndex);
            }
            return shouldHighlight;
          }
          textIndex++;
        }
      }
      return false;
    },
    
    // 音频播放结束处理
    onAudioEnded() {
      if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
        // 播放下一个音频
        this.currentAudioIndex++;
        this.playAudio();
      } else {
        // 所有音频播放完毕
        if (this.isLoop) {
          // 循环播放
          this.currentAudioIndex = 0;
          this.playAudio();
        } else {
          // 停止播放
          this.isPlaying = false;
          this.currentTime = this.totalTime;
          this.currentHighlightIndex = -1;
        }
      }
    },
    toggleLoop() {
      this.isLoop = !this.isLoop;
    },
    
    toggleSpeed() {
      // 檢查是否支持播放速度控制
      if (!this.playbackRateSupported) {
        uni.showToast({
          title: '當前設備不支持播放速度控制',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      const currentIndex = this.speedOptions.indexOf(this.playSpeed);
      const nextIndex = (currentIndex + 1) % this.speedOptions.length;
      const oldSpeed = this.playSpeed;
      this.playSpeed = this.speedOptions[nextIndex];
      
      console.log(`播放速度切換: ${oldSpeed}x -> ${this.playSpeed}x`);
      
      // 如果当前有音频在播放，更新播放速度
      if (this.currentAudio) {
        const wasPlaying = this.isPlaying;
        const currentTime = this.currentAudio.currentTime;
        
        // 設置新的播放速度
        this.currentAudio.playbackRate = this.playSpeed;
        
        // 如果正在播放，需要重啟播放才能使播放速度生效
        if (wasPlaying) {
          this.currentAudio.pause();
          setTimeout(() => {
            this.currentAudio.seek(currentTime);
            this.currentAudio.play();
          }, 50);
        }
        
        console.log('音頻實例播放速度已更新為:', this.currentAudio.playbackRate);
        
        // 顯示速度變更提示
        uni.showToast({
          title: `播放速度: ${this.playSpeed}x`,
          icon: 'none',
          duration: 1000
        });
      }
    },
    
    // 滑動條值實時更新 (@input 事件)
    onSliderInput(value) {
      // 在拖動過程中實時更新顯示的時間，但不影響實際播放
      if (this.isDragging) {
        // 可以在這裡實時更新顯示時間，讓用戶看到拖動到的時間點
        // 但不改變實際的 currentTime，避免影響播放邏輯
        console.log('實時更新滑動條值:', value);
      }
    },
    
    // 滑動條拖動過程中的處理 (@changing 事件)
    onSliderChanging(value) {
      // 第一次觸發 changing 事件時，暫停播放並標記為拖動狀態
      if (!this.isDragging) {
        if (this.isPlaying) {
          this.pauseAudio();
          console.log('開始拖動滑動條，暫停播放');
        }
        this.isDragging = true;
      }
      
      // 更新滑動條的值，但不改變實際播放位置
      this.sliderValue = value;
      console.log('拖動中，滑動條值:', value);
    },
    
    // 滑動條拖動結束的處理 (@change 事件)
    onSliderChange(value) {
      console.log('滑動條變化，跳轉到位置:', value, '是否為拖動:', this.isDragging);
      
      // 如果不是拖動狀態（即單點），需要先暫停播放
      if (!this.isDragging && this.isPlaying) {
        this.pauseAudio();
        console.log('單點滑動條，暫停播放');
      }
      
      // 重置拖動狀態
      this.isDragging = false;
      this.sliderValue = value;
      
      // 跳轉到指定位置，但不自動恢復播放
      this.seekToTime(value, false);
      
      console.log('滑動條操作完成，保持暫停狀態，需要手動點擊播放');
    },
    
    // 跳轉到指定時間
    seekToTime(targetTime, shouldResume = false) {
      if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
        console.log('沒有音頻數據，無法跳轉');
        return;
      }
      
      // 確保目標時間在有效範圍內
      targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
      console.log('跳轉到時間:', targetTime, '秒', '總時長:', this.totalTime, '是否恢復播放:', shouldResume);
      
      let accumulatedTime = 0;
      let targetAudioIndex = -1;
      let targetAudioTime = 0;
      
      // 找到目標時間對應的音頻片段
      for (let i = 0; i < this.currentPageAudios.length; i++) {
        const audioDuration = this.currentPageAudios[i].duration || 0;
        console.log(`音頻片段 ${i}: 時長=${audioDuration}, 累計時間=${accumulatedTime}, 範圍=[${accumulatedTime}, ${accumulatedTime + audioDuration}]`);
        
        if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
          targetAudioIndex = i;
          targetAudioTime = targetTime - accumulatedTime;
          break;
        }
        accumulatedTime += audioDuration;
      }
      
      // 如果沒有找到合適的音頻片段，使用最後一個
      if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
        targetAudioIndex = this.currentPageAudios.length - 1;
        targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
        console.log('使用最後一個音頻片段作為目標');
      }
      
      console.log('目標音頻索引:', targetAudioIndex, '目標音頻時間:', targetAudioTime);
      
      if (targetAudioIndex === -1) {
        console.error('無法找到目標音頻片段');
        return;
      }
      
      // 如果需要切換到不同的音頻片段
      if (targetAudioIndex !== this.currentAudioIndex) {
        console.log(`切換音頻片段: ${this.currentAudioIndex} -> ${targetAudioIndex}`);
        this.currentAudioIndex = targetAudioIndex;
        this.createAudioInstance();
        
        // 等待音頻實例創建完成後再跳轉
        this.waitForAudioReady(() => {
          if (this.currentAudio) {
            this.currentAudio.seek(targetAudioTime);
            this.currentTime = targetTime;
            console.log('切換音頻並跳轉到:', targetAudioTime, '秒');
            
            // 如果拖動前正在播放，則恢復播放
            if (shouldResume) {
              this.currentAudio.play();
              this.isPlaying = true;
              console.log('恢復播放狀態');
            }
          }
        });
      } else {
        // 在當前音頻片段內跳轉
        if (this.currentAudio) {
          this.currentAudio.seek(targetAudioTime);
          this.currentTime = targetTime;
          console.log('在當前音頻內跳轉到:', targetAudioTime, '秒');
          
          // 如果拖動前正在播放，則恢復播放
          if (shouldResume) {
            this.currentAudio.play();
            this.isPlaying = true;
            console.log('恢復播放狀態');
          }
        }
      }
    },
    
    // 等待音頻實例準備就緒
    waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
      if (currentAttempt >= maxAttempts) {
        console.error('音頻實例準備超時');
        return;
      }
      
      if (this.currentAudio && this.currentAudio.src) {
        // 音頻實例已準備好
        setTimeout(callback, 50); // 稍微延遲確保完全準備好
      } else {
        // 繼續等待
        setTimeout(() => {
          this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
        }, 100);
      }
    },
    
    // 初始檢測播放速度支持（不依賴音頻實例）
    checkInitialPlaybackRateSupport() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        console.log('初始檢測 - 系統信息:', systemInfo);
        
        // 檢查基礎庫版本 - playbackRate需要2.11.0及以上
        const SDKVersion = systemInfo.SDKVersion || '0.0.0';
        const versionArray = SDKVersion.split('.').map(v => parseInt(v));
        const isVersionSupported = versionArray[0] > 2 || 
          (versionArray[0] === 2 && versionArray[1] > 11) ||
          (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
        
        if (!isVersionSupported) {
          this.playbackRateSupported = false;
          console.log(`初始檢測 - 基礎庫版本過低 (${SDKVersion})，需要2.11.0及以上才支持播放速度控制`);
          return;
        }
        
        // Android 6以下版本不支持
        if (systemInfo.platform === 'android') {
          const androidVersion = systemInfo.system.match(/Android (\d+)/);
          if (androidVersion && parseInt(androidVersion[1]) < 6) {
            this.playbackRateSupported = false;
            console.log('初始檢測 - Android版本過低，需要Android 6及以上才支持播放速度控制');
            return;
          }
        }
        
        // 檢查微信原生API是否可用
        if (typeof wx === 'undefined' || !wx.createInnerAudioContext) {
          console.log('初始檢測 - 微信原生API不可用，可能影響playbackRate支持');
        } else {
          console.log('初始檢測 - 微信原生API可用');
        }
        
        // 如果通過基本檢測，暫時設為支持，等音頻實例創建後再詳細檢測
        this.playbackRateSupported = true;
        console.log('初始檢測 - 基本條件滿足，等待音頻實例檢測');
        
      } catch (error) {
        console.error('初始檢測播放速度支持時出錯:', error);
        this.playbackRateSupported = false;
      }
    },
    
    // 檢查播放速度控制支持
    checkPlaybackRateSupport(audio) {
      try {
        // 檢查基礎庫版本和平台支持
        const systemInfo = uni.getSystemInfoSync();
        console.log('系統信息:', systemInfo);
        console.log('平台:', systemInfo.platform);
        console.log('基礎庫版本:', systemInfo.SDKVersion);
        console.log('系統版本:', systemInfo.system);
        
        // 根據uni-app文檔，微信小程序需要基礎庫2.11.0+才支持playbackRate
        const SDKVersion = systemInfo.SDKVersion || '0.0.0';
        const versionArray = SDKVersion.split('.').map(v => parseInt(v));
        const isVersionSupported = versionArray[0] > 2 || 
          (versionArray[0] === 2 && versionArray[1] > 11) ||
          (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
        
        console.log('基礎庫版本檢查:', {
          version: SDKVersion,
          parsed: versionArray,
          supported: isVersionSupported
        });
        
        if (!isVersionSupported) {
          this.playbackRateSupported = false;
          console.log(`❌ 基礎庫版本不支持 (${SDKVersion})，微信小程序需要2.11.0+才支持playbackRate`);
          return;
        }
        
        // Android平台需要6.0+版本支持
        if (systemInfo.platform === 'android') {
          const androidVersion = systemInfo.system.match(/Android (\d+)/);
          console.log('Android版本檢查:', androidVersion);
          if (androidVersion && parseInt(androidVersion[1]) < 6) {
            this.playbackRateSupported = false;
            console.log(`❌ Android版本不支持 (${androidVersion[1]})，需要Android 6+才支持playbackRate`);
            return;
          }
        }
        
        // 檢查音頻實例是否支持playbackRate
        console.log('🔍 音頻實例檢查:');
        console.log('- playbackRate初始值:', audio.playbackRate);
        console.log('- playbackRate類型:', typeof audio.playbackRate);
        
        // 嘗試設置並檢測是否真正支持
        const testRate = 1.25;
        const originalRate = audio.playbackRate || 1.0;
        
        try {
          audio.playbackRate = testRate;
          console.log('- 設置測試速度:', testRate);
          console.log('- 設置後的值:', audio.playbackRate);
          
          // 檢查設置是否生效
          if (Math.abs(audio.playbackRate - testRate) < 0.01) {
            this.playbackRateSupported = true;
            console.log('✅ playbackRate功能正常');
          } else {
            this.playbackRateSupported = false;
            console.log('❌ playbackRate設置無效，可能不被支持');
          }
          
        } catch (error) {
          this.playbackRateSupported = false;
          console.log('❌ playbackRate設置出錯:', error);
        }
        
      } catch (error) {
        console.error('檢查播放速度支持時出錯:', error);
        this.playbackRateSupported = false;
      }
    },
    
    // 上一个音频
    previousAudio() {
      // 如果正在加载音频，禁止切换
      if (this.isAudioLoading) {
        return;
      }
      
      if (this.currentPageAudios.length === 0) return;
      
      if (this.currentAudioIndex > 0) {
        this.currentAudioIndex--;
        if (this.isPlaying) {
          this.playAudio();
        }
      }
    },
    
    // 下一个音频
    nextAudio() {
      // 如果正在加载音频，禁止切换
      if (this.isAudioLoading) {
        return;
      }
      
      if (this.currentPageAudios.length === 0) return;
      
      if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
        this.currentAudioIndex++;
        if (this.isPlaying) {
          this.playAudio();
        }
      }
    },

    async previousPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
          // 获取对应页面的数据（如果还没有获取过）
          if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
            await this.getBookPages(this.courseIdList[this.currentPage - 1]);
          }
          
          // 通知音频控制组件重置状态
          if (this.$refs.audioControls) {
            this.$refs.audioControls.resetAudioState();
          }
        }
    },
    async nextPage() {
      if (this.currentPage < this.bookPages.length) {
        this.currentPage++;
        // 获取对应页面的数据（如果还没有获取过）
        if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
          await this.getBookPages(this.courseIdList[this.currentPage - 1]);
        }
        
        // 通知音频控制组件重置状态
        if (this.$refs.audioControls) {
          this.$refs.audioControls.resetAudioState();
        }
      }
    },
    toggleSound() {
      console.log('音色切换')
      uni.navigateTo({
        url: '/subPages/home/music?voiceId=' + this.voiceId
      })
    },
    unlockBook() {
      console.log('解锁全书')
      // 这里可以跳转到会员页面或者调用解锁接口
      uni.navigateTo({
        url: '/subPages/member/recharge'
      })
    },
    async goToPage(page) {
      this.currentPage = page
      console.log('跳转到页面:', page)
      // 获取对应页面的数据（如果还没有获取过）
      if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
        await this.getBookPages(this.courseIdList[this.currentPage - 1]);
      }
      
      // 通知音频控制组件重置状态
      if (this.$refs.audioControls) {
        this.$refs.audioControls.resetAudioState();
      }
    },
    async onSwiperChange(e) {
      this.currentPage = e.detail.current + 1
      // 获取对应页面的数据（如果还没有获取过）
      if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
        await this.getBookPages(this.courseIdList[this.currentPage - 1]);
      }
      
      // 通知音频控制组件重置状态
      if (this.$refs.audioControls) {
        this.$refs.audioControls.resetAudioState();
      }
    },
    async getCourseList(id) {
      const res = await this.$api.book.coursePage({
        id: id
      })
      if (res.code === 200) {
        this.courseIdList = res.result.map(item => item.id)
        // 初始化二维数组 换一种方式
        this.bookPages = this.courseIdList.map(() => [])
        // 初始化标题数组
        this.pageTitles = this.courseIdList.map(() => '')
        // 初始化页面类型数组
        this.pageTypes = this.courseIdList.map(() => '')
        // 初始化页面单词数组
        this.pageWords = this.courseIdList.map(() => [])
        // 通知音频控制组件重置状态
        if (this.$refs.audioControls) {
          this.$refs.audioControls.resetAudioState();
        }
        // 初始化第一页
        if (this.courseIdList.length > 0) {
          await this.getBookPages(this.courseIdList[0])
        }
      }
    },
    async getBookPages(id) {
      const res = await this.$api.book.coursesPageDetail({
        id: id
      })
      if (res.code === 200) {
        // 使用$set确保响应式更新
        console.log('获取到的页面数据:', JSON.parse(res.result.content))
        // 确保当前页面存在
        if (this.currentPage - 1 < this.bookPages.length) {
          this.$set(this.bookPages, this.currentPage - 1, JSON.parse(res.result.content))
          // 保存页面标题
          this.$set(this.pageTitles, this.currentPage - 1, res.result.title || '')
          // 保存页面类型
          this.$set(this.pageTypes, this.currentPage - 1, res.result.type || '')
          // 保存页面单词释义数据
          this.$set(this.pageWords, this.currentPage - 1, res.result.words || [])
          // 保存页面付费状态
          this.$set(this.pagePay, this.currentPage - 1, res.result.pay || 'N')
        }
      }
    },
    // 获取课程列表
    async getCoursePageList (bookId) {
      const res = await this.$api.book.course({
        id: bookId
      })
      if (res.code === 200) {
        this.courseList = res.result.records
        // 打上序列号
        this.courseList = this.courseList.map((item, index) => ({
          ...item,
          index,
        }))
      }
    },
    
    // 清理音频缓存
    clearAudioCache() {
      this.audioCache = {};
      console.log('音频缓存已清理');
    },

    // 清理單詞語音緩存
    clearWordAudioCache() {
      this.wordAudioCache = {};
      console.log('單詞語音緩存已清理');
    },
    
    // 限制缓存大小，保留最近访问的页面
    limitCacheSize(maxSize = 10) {
      const cacheKeys = Object.keys(this.audioCache);
      if (cacheKeys.length > maxSize) {
        // 删除最旧的缓存项
        const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
        keysToDelete.forEach(key => {
          delete this.audioCache[key];
        });
        console.log('缓存大小已限制，删除了', keysToDelete.length, '个缓存项');
      }
    },
      // 自動加載第一頁音頻並播放
  async autoLoadAndPlayFirstPage() {
    try {
      console.log('開始自動加載第一頁音頻');
      
      // 確保當前是第一頁且是文字頁面
      if (this.currentPage === 1 && this.isTextPage) {
        console.log('當前是第一頁文字頁面，開始加載音頻');
        
        // 加載音頻
        await this.getCurrentPageAudio();
        
        // 檢查是否成功加載音頻
        if (this.currentPageAudios && this.currentPageAudios.length > 0) {
          console.log('音頻加載成功，開始自動播放');
          
          // 稍微延遲一下確保音頻完全準備好
          setTimeout(() => {
            this.playAudio();
          }, 500);
        } else {
          console.log('第一頁沒有音頻數據');
        }
      } else {
        console.log('當前頁面不是第一頁文字頁面，跳過自動播放');
      }
    } catch (error) {
      console.error('自動加載和播放音頻失敗:', error);
    }
  },
  },
  async onLoad(args) {
    // 监听音色切换事件，传递给AudioControls组件处理
    uni.$on('selectVoice', (voiceId) => {
      console.log('音色切換:', this.voiceId, '->', voiceId);
      this.voiceId = voiceId;
      
      // 清理單詞語音資源
      this.clearWordAudioCache();
      if (this.currentWordAudio) {
        this.currentWordAudio.destroy();
        this.currentWordAudio = null;
      }
    })
    
    this.courseId = args.courseId
    this.memberId = args.memberId
    
    // 先获取点进来的课程的页面列表
    await Promise.all([this.getCourseList(this.courseId), this.getCoursePageList(args.bookId), this.getMemberInfo(), this.getVoiceList()])
    
    // 页面加载完成后，通知AudioControls组件自动加载第一页音频
    this.$nextTick(() => {
      if (this.$refs.audioControls) {
        this.$refs.audioControls.autoLoadAndPlayFirstPage();
      }
    });
  },
  

  
  // 页面卸载时清理资源
  onUnload() {
    uni.$off('selectVoice')
    // 清理單詞語音資源
    if (this.currentWordAudio) {
      this.currentWordAudio.destroy();
      this.currentWordAudio = null;
    }
    // 清理單詞語音緩存
    this.clearWordAudioCache();
    
    // 通知AudioControls组件清理资源
    if (this.$refs.audioControls) {
      this.$refs.audioControls.destroyAudio();
    }
  },
  
  // 页面隐藏时暂停音频
  onHide() {
    // 通知AudioControls组件暂停音频
    if (this.$refs.audioControls) {
      this.$refs.audioControls.pauseOnHide();
    }
  }
}
</script>

<style lang="scss" scoped>
.book-container {
  width: 100%;
  height: 100vh;
  background-color: #F8F8F8;
  position: relative;
  overflow: hidden;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #F8F8F8;
  z-index: 1000;
  transition: transform 0.3s ease;
  
  &.navbar-hidden {
    transform: translateY(-100%);
  }
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  // padding-top: calc(20rpx + var(--status-bar-height, 0));
  height: 60rpx;
}

.navbar-left,
.navbar-right {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.navbar-right {
  
  justify-content: flex-end;
  flex: 1;
}

.navbar-title {
  transform: translateX(-50rpx);
  flex: 1;
  text-align: center;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #262626;
  line-height: 48rpx;
}

.content-swiper {
  flex: 1;
  height: calc(100vh - 100rpx);
  // margin-top: 100rpx;
  margin-bottom: 100rpx;
}

.swiper-item {
  height: 100%;
}

.content-area {
  flex: 1;
  padding: 0 40rpx;
  padding-top: 100rpx;
  // background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.card-content {
  background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  height: 1172rpx;
  margin-top: 20rpx;
  border-radius: 32rpx;
    // height: 100%;
    padding: 40rpx;
    // margin: 0 
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    .card-line {
      display: flex;
      align-items: center;
      // margin-bottom: 20rpx;
    }
  
    .card-line-image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
  
    .card-line-text {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 30rpx;
      line-height: 48rpx;
      color: #3B3D3D;
    }
  
    .card-image {
      width: 590rpx;
      height: 268rpx;
      border-radius: 24rpx;
      // margin-bottom: 20rpx;
    }
    .english-text {
      display: block;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      line-height: 48rpx;
      color: #3B3D3D;
      // margin-bottom: 16rpx;
    }
    
    .english-text-container {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
    }
    
    .english-token {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      line-height: 48rpx;
      color: #3B3D3D;
      margin-right: 10rpx;
    }
    
    .clickable-word {
      background: $primary-color;
      text-decoration: underline;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .clickable-word:hover {
      background-color: rgba(0, 122, 255, 0.1);
      border-radius: 4rpx;
    }

    .chinese-text {
      display: block;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 48rpx;
      color: #4F4F4F;
    }
  }

/* 会员限制页面样式 */
.member-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90%;
  background-color: #F8F8F8;
  padding: 40rpx;
  margin: -40rpx;
  box-sizing: border-box;
}

.member-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 40rpx;
  line-height: 1;
  color: #6f6f6f;
  text-align: center;
  margin-bottom: 48rpx;
}

.member-button {
  width: 670rpx;
  height: 72rpx;
  background: #06DADC;
  border-radius: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-button-text {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #FFFFFF;
}

.video-content {
  width: 100vw;
  margin: 200rpx -40rpx 0;
  height: 500rpx;
  background-color: #FFFFFF;
  // padding: 40rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .video-player{
    width: 670rpx;
    margin: 0 auto;
    height: 376rpx;
  }
}



.text-content {
  width: 100vw;
  background-color: #F6F6F6;
  height: 100%;
  padding: 40rpx;
  margin: -40rpx;
  box-sizing: border-box;
}

.content-text {
  font-family: PingFang SC;
  // font-weight: 400;
  font-size: 28rpx;
  color: #3B3D3D;
  line-height: 48rpx;
  letter-spacing: 0;
  text-align: justify;
  word-break: break-all;
  transition: all 0.3s ease;
}

.text-highlight {
  background-color: $primary-color;
  // color: #fff;
  // padding: 8rpx 16rpx;
  // border-radius: 8rpx;
  // box-shadow: 0 2rpx 8rpx rgba(6, 218, 220, 0.3);
}

.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // background-color: #fff;
  border-top: 1rpx solid #EEEEEE;
  z-index: 1000;
  transition: transform 0.3s ease;
  
  &.tabbar-hidden {
    transform: translateY(100%);
  }
}

.tabbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 62rpx;
  // z-index: 100;
  // position: relative;
  // background-color: #fff;
  // padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  height: 88rpx;
}

.tabbar-left {
  display: flex;
  align-items: center;
  gap: 35rpx;
}

.tab-button {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8rpx;
}

.tab-icon {
  width: 52rpx;
  height: 52rpx;
}

.tab-text {
  font-family: PingFang SC;
  // font-weight: 400;
  font-size: 22rpx;
  color: #999;
  line-height: 24rpx;
}

.tabbar-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.page-controls {
  display: flex;
  align-items: center;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 8rpx;
  overflow-x: auto;
  max-width: 400rpx;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.page-number {
  min-width: 84rpx;
  height: 58rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100rpx;
  font-family: PingFang SC;
  // font-weight: 400;
  font-size: 30rpx;
  color: #3B3D3D;
  background-color: transparent;
  border: 1px solid #3B3D3D;
  transition: all 0.3s ease;
  
  &.active {
    border: 1px solid $primary-color;
    color: $primary-color;
  }
}

/* 课程弹出窗样式 */
.course-popup {
  padding: 0 32rpx;
  max-height: 80vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #EEEEEE
  // margin-bottom: 40rpx;
}

.popup-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 34rpx;
  color: #181818;
}


.course-list {
  max-height: 60vh;
  overflow-y: auto;
}

.course-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding-top: 24rpx;
  padding-right: 8rpx;
  padding-bottom: 24rpx;
  padding-left: 8rpx;

  border-bottom: 1px solid #EEEEEE;
  cursor: pointer;
  
  &:last-child {
    border-bottom: none;
  }
}

.course-number {
  width: 80rpx;
  font-family: PingFang SC;
  // font-weight: 400;
  font-size: 36rpx;
  color: #999;
  &.highlight {
    color: $primary-color;
  }
  // margin-right: 24rpx;
}

.course-content {
  flex: 1;
}

.course-english {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  line-height: 44rpx;
  color: #252545;
  margin-bottom: 8rpx;
  
  &.highlight {
    color: $primary-color;
  }
}

.course-chinese {
  font-size: 28rpx;
  line-height: 48rpx;
  color: #3B3D3D;
  &.highlight {
    color: $primary-color;
  }
}

/* 释义弹窗样式 */
.meaning-popup {
  // width: 670rpx;
  background-color: #FFFFFF;
  // border-radius: 32rpx;
  overflow: hidden;
}

.meaning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid #EEEEEE;
}

.close-btn {
  width: 80rpx;
}

.close-text {
  font-family: PingFang SC;
  font-size: 32rpx;
  color: #8b8b8b;
}

.meaning-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 34rpx;
  color: #181818;
}

.meaning-content {
  padding: 32rpx;
}

.meaning-image {
  width: 670rpx;
  height: 268rpx;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
}

.word-info {
  margin-bottom: 32rpx;
}

.word-main {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 8rpx;
}

.word-text {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 40rpx;
  color: #181818;
}

.phonetic-container{
  display: flex;
  gap: 24rpx;
  align-items: center;
  
  .speaker-icon {
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 8rpx;
    border-radius: 8rpx;
    
    &:hover {
      opacity: 0.7;
      background-color: rgba(0, 122, 255, 0.1);
    }
  }
  
  .phonetic-text {
    font-family: PingFang SC;
    font-size: 28rpx;
    color: #262626;
    margin-bottom: 16rpx;
  }
}

.word-meaning {
  display: flex;
  gap: 16rpx;
}

.part-of-speech {
  font-family: PingFang SC;
  font-size: 28rpx;
  color: #262626;
}

.meaning-text {
  font-family: PingFang SC;
  font-size: 28rpx;
  color: #181818;
  flex: 1;
}

.knowledge-gain {
  background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
  border-radius: 24rpx;
  padding: 32rpx 40rpx;
}

.knowledge-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.knowledge-icon {
  width: 48rpx;
  height: 48rpx;
}

.knowledge-title {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 30rpx;
  color: #3B3D3D;
}

.knowledge-content {
  font-family: PingFang SC;
  font-size: 28rpx;
  color: #4f4f4f;
  line-height: 48rpx;
}


</style>