englishread-front/subPages/home/AudioControls.vue

<template>
    <view class="audio-controls-wrapper">
        <!-- 会员限制页面不显示任何音频控制 -->
        <view v-if="isAudioDisabled" class="member-restricted-container">
            <!-- 不显示任何内容，完全隐藏音频功能 -->
        </view>

        <!-- 音频加载中 -->
        <view v-else-if="isTextPage && isAudioLoading" class="audio-loading-container">
            <uv-loading-icon mode="spinner" size="30" color="#06DADC"></uv-loading-icon>
            <text class="loading-text">第{{ currentPage }}页音频加载中，请稍等...</text>
        </view>

        <!-- 正常音频控制栏 -->
        <view v-else-if="isTextPage && hasAudioData" class="audio-controls">
            <!-- 加载指示器 -->
            <view v-if="isAudioLoading" class="loading-indicator">
                <uv-loading-icon mode="spinner" size="16" color="#06DADC"></uv-loading-icon>
                <text class="loading-indicator-text">正在加载更多音频...</text>
            </view>

            <!-- <view class="audio-time">
                <text class="time-text">{{ formatTime(currentTime) }}</text>
                <view class="progress-container">
                    <uv-slider v-model="sliderValue" :min="0" :max="totalTime" :step="0.1" activeColor="#06DADC"
                        backgroundColor="#e0e0e0" :blockSize="16" blockColor="#ffffff" disabled
                        :customStyle="{ flex: 1, margin: '0 10px' }" />
                </view>
                <text class="time-text">{{ formatTime(totalTime) }}</text>
            </view> -->

            <view class="audio-controls-row">
                <view class="control-btn" @click="toggleLoop">
                    <uv-icon name="reload" size="20" :color="loopMode !== 'sequential' ? '#06DADC' : '#999'"></uv-icon>
                    <text class="control-text">{{ loopModeLabel }}</text>
                </view>

                <view class="control-btn" @click="$emit('previous-page')">
                    <text class="control-text">上一页</text>
                </view>

                <view class="play-btn" @click="togglePlay">
                    <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40"
                        color="#666"></uv-icon>
                </view>

                <view class="control-btn" @click="$emit('next-page')">
                    <text class="control-text">下一页</text>
                </view>

                <view class="control-btn" @click="toggleSpeed" :class="{ 'disabled': !playbackRateSupported }">
                    <text class="control-text" :style="{ opacity: playbackRateSupported ? 1 : 0.5 }">
                        {{ playbackRateSupported ? playSpeed + 'x' : '不支持' }}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import config from '@/mixins/config.js'
import audioManager from '@/utils/audioManager.js'
import { 
    splitTextIntelligently, 
    formatTime, 
    generateCacheKey, 
    validateCacheData, 
    findFirstNonLeadAudio,
    limitCacheSize,
    clearAudioCache,
    resetAudioState
} from '@/utils/audioUtils.js'

export default {
    name: 'AudioControls',
    mixins: [config],
    props: {
        // 基础数据
        currentPage: {
            type: Number,
            default: 1
        },
        courseId: {
            type: String,
            default: ''
        },
        voiceId: {
            type: [String, Number],
            default: ''
        },
        bookPages: {
            type: Array,
            default: () => []
        },
        isTextPage: {
            type: Boolean,
            default: false
        },
        shouldLoadAudio: {
            type: Boolean,
            default: false
        },
        isMember: {
            type: Boolean,
            default: false
        },
        currentPageRequiresMember: {
            type: Boolean,
            default: false
        },
        pagePay: {
            type: Array,
            default: () => []
        },
        isWordAudioPlaying: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 音频控制相关数据
            isPlaying: false,
            currentTime: 0,
            totalTime: 0,
            sliderValue: 0, // 滑動條的值
            isDragging: false, // 是否正在拖動滑動條
            loopMode: 'sequential',
            playSpeed: 1.0,
            speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
            playbackRateSupported: true, // 播放速度控制是否支持
            // 音频数组管理
            currentPageAudios: [], // 当前页面的音频数组
            currentAudioIndex: 0, // 当前播放的音频索引
            audioContext: null, // 音频上下文
            currentAudio: null, // 当前音频实例
            // 音频缓存管理
            audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
            // 预加载相关状态
            isPreloading: false, // 是否正在预加载
            preloadProgress: 0, // 预加载进度 (0-100)
            preloadQueue: [], // 预加载队列
            // 音频加载状态
            isAudioLoading: false, // 音频是否正在加载
            hasAudioData: false, // 当前页面是否已有音频数据
            isVoiceChanging: false, // 音色切换中的加载状态
            audioLoadFailed: false, // 音频获取失败状态
            // 文本高亮相关
            currentHighlightIndex: -1, // 当前高亮的文本索引
            // 课程切换相关状态
            isJustSwitchedCourse: false, // 是否刚刚切换了课程
            // 页面切换防抖相关
            pageChangeTimer: null, // 页面切换防抖定时器
            isPageChanging: false, // 是否正在切换页面
            // 请求取消相关
            currentRequestId: null, // 当前音频请求ID
            shouldCancelRequest: false, // 是否应该取消当前请求
            // 本地音色ID（避免直接修改prop）
            localVoiceId: '', // 本地音色ID，从prop初始化
            // 倍速检查相关
            lastSpeedCheckTime: -1, // 上次检查倍速的时间点
            // 防抖相关
            isProcessingEnded: false, // 防止 onAudioEnded 多次触发
        }
    },
    computed: {
        // 计算音频播放进度百分比
        progressPercent() {
            return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
        },

        // 检查当前页面是否有缓存的音频
        hasCurrentPageCache() {
            const cacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            const cachedData = this.audioCache[cacheKey];

            // 更严格的缓存有效性检查
            if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
                return false;
            }

            // 使用公共方法验证缓存数据
            return validateCacheData(cachedData, this.currentPage);
        },

        // 判断音频功能是否应该被禁用（会员限制页面且用户非会员）
        isAudioDisabled() {
            // 免费用户不受音频播放限制
            if (this.userInfo && this.userInfo.freeUser === 'Y') {
                return false;
            }
            return this.currentPageRequiresMember && !this.isMember;
        },

        // 检查当前页面是否正在预加载中
        isCurrentPagePreloading() {
            // 如果全局预加载状态为true，需要检查当前页面是否在预加载队列中
            if (this.isPreloading) {
                // 检查当前页面是否有缓存（如果有缓存说明已经预加载完成）
                const cacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
                const hasCache = this.audioCache[cacheKey] && this.audioCache[cacheKey].audios && this.audioCache[cacheKey].audios.length > 0;

                // 如果没有缓存且正在预加载，说明当前页面可能正在预加载中
                if (!hasCache) {
                    // console.log('当前页面可能正在预加载中，页面:', this.currentPage, '缓存状态:', hasCache);
                    return true;
                }
            }
            return false;
        },

        // 播放模式文案
        loopModeLabel() {
            switch (this.loopMode) {
                case 'sentence':
                    return '单句';
                case 'page':
                    return '单页';
                default:
                    return '顺序';
            }
        }
    },
    watch: {
        // 监听页面变化，重置音频状态
        currentPage: {
            handler(newPage, oldPage) {
                if (newPage !== oldPage) {
                    // console.log('页面切换:', oldPage, '->', newPage);

                    // 设置页面切换状态
                    this.isPageChanging = true;

                    // 立即重置音频状态，防止穿音
                    this.resetAudioState();

                    // 清除之前的防抖定时器
                    if (this.pageChangeTimer) {
                        clearTimeout(this.pageChangeTimer);
                    }

                    // 使用防抖机制，避免频繁切换时重复加载
                    this.pageChangeTimer = setTimeout(() => {
                        this.isPageChanging = false;

                        // 检查新页面是否有预加载完成的音频缓存
                        this.$nextTick(() => {
                            this.checkAndLoadPreloadedAudio();
                        });
                    }, 300); // 300ms防抖延迟
                }
            },
            immediate: false
        },
        // 监听音色变化，更新本地音色ID
        voiceId: {
            handler(newVoiceId, oldVoiceId) {
                if (newVoiceId !== oldVoiceId) {
                    // console.log('🎵 音色ID变化:', oldVoiceId, '->', newVoiceId);
                    // 更新本地音色ID
                    this.localVoiceId = newVoiceId;
                }
            },
            immediate: true // 立即执行，用于初始化
        },
        // 监听页面数据变化，当页面数据重新加载后自动获取音频
        bookPages: {
            handler(newBookPages, oldBookPages) {
                // 检查当前页面数据是否从无到有
                const currentPageData = newBookPages && newBookPages[this.currentPage - 1];
                const oldCurrentPageData = oldBookPages && oldBookPages[this.currentPage - 1];

                if (currentPageData && !oldCurrentPageData && this.shouldLoadAudio && this.courseId) {
                    console.log(`🎵 bookPages监听: 当前页面数据已加载，自动获取音频，页面=${this.currentPage}`);
                    this.$nextTick(() => {
                        this.getCurrentPageAudio(true); // 启用自动播放
                    });
                }
            },
            deep: true // 深度监听数组变化
        }
    },
    methods: {
        // ==================== 原有方法 ====================

        // 辅助方法：查找第一个非导语音频的索引
        findFirstNonLeadAudio() {
            return findFirstNonLeadAudio(this.currentPageAudios);
        },

        // 格式化时间显示
        formatTime(seconds) {
            return formatTime(seconds);
        },

        /**
         * 重置音频播放状态
         * @param {boolean} clearHighlight - 是否清除高亮索引，默认true
         * @param {boolean} emitEvent - 是否发送状态变化事件，默认true
         */
        resetPlaybackState(clearHighlight = true, emitEvent = true) {
            this.isPlaying = false;
            this.currentTime = 0;
            this.sliderValue = 0;
            
            if (clearHighlight) {
                this.currentHighlightIndex = -1;
            }
            
            if (emitEvent) {
                this.$emit('audio-state-change', {
                    hasAudioData: this.hasAudioData,
                    isLoading: this.isAudioLoading,
                    currentHighlightIndex: this.currentHighlightIndex
                });
            }
        },

        /**
         * 清除高亮索引并发送事件
         */
        clearHighlight() {
            this.currentHighlightIndex = -1;
            this.emitHighlightChange(-1);
        },

        /**
         * 初始化音频索引为第一个非导语音频
         * @returns {number} 设置的音频索引
         */
        initializeAudioIndex() {
            const firstNonLeadIndex = this.findFirstNonLeadAudio();
            this.currentAudioIndex = firstNonLeadIndex >= 0 ? firstNonLeadIndex : 0;
            return this.currentAudioIndex;
        },

        // 检查并自动加载预加载完成的音频
        checkAndLoadPreloadedAudio() {
            // 只在需要加载音频的页面检查
            if (!this.shouldLoadAudio) {
                // 非文本页面，确保音频状态为空
                this.currentPageAudios = [];
                this.totalTime = 0;
                this.hasAudioData = false;
                this.isAudioLoading = false;

                // 通知父组件音频状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: false,
                    isLoading: false,
                    currentHighlightIndex: -1
                });
                return;
            }

            // 检查当前页面是否有缓存的音频数据
            const pageKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            const cachedAudio = this.audioCache[pageKey];

            console.log(`🎵 checkAndLoadPreloadedAudio: 检查缓存，页面=${this.currentPage}, 缓存键=${pageKey}, 有缓存=${!!cachedAudio}`);

            if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
                // 有缓存：直接显示控制栏并自动播放
                this.currentPageAudios = cachedAudio.audios;
                this.totalTime = cachedAudio.totalDuration || 0;
                this.hasAudioData = true;
                this.isAudioLoading = false;
                
                // 初始化音频索引为第一个非导语音频
                this.initializeAudioIndex();
                this.currentTime = 0;
                this.clearHighlight();

                console.log(`🎵 checkAndLoadPreloadedAudio: 从缓存加载音频，页面=${this.currentPage}, 音频数量=${this.currentPageAudios.length}, 缓存页面=${cachedAudio.pageNumber || '未知'}`);

                // 验证缓存数据是否属于当前页面
                if (cachedAudio.pageNumber && cachedAudio.pageNumber !== this.currentPage) {
                    console.error(`🚨 缓存数据页面不匹配！当前页面=${this.currentPage}, 缓存页面=${cachedAudio.pageNumber}`);
                    // 清除错误的缓存数据
                    delete this.audioCache[pageKey];
                    // 重新加载正确的音频
                    this.getCurrentPageAudio(true);
                    return;
                }

                // 通知父组件音频状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: true,
                    isLoading: false,
                    currentHighlightIndex: -1
                });

                // 自动播放缓存的音频
                this.$nextTick(() => {
                    if (this.currentPageAudios.length > 0 && !this.isVoiceChanging) {
                        // 查找第一个非导语音频
                        const firstNonLeadIndex = this.findFirstNonLeadAudio();
                        if (firstNonLeadIndex >= 0 && firstNonLeadIndex < this.currentPageAudios.length) {
                            // 设置当前音频索引为第一个非导语音频
                            this.currentAudioIndex = firstNonLeadIndex;
                            const firstAudioData = this.currentPageAudios[firstNonLeadIndex];
                            
                            console.log(`🎵 自动播放缓存音频（跳过导语）: 索引=${firstNonLeadIndex}, isLead=${firstAudioData.isLead}, url=${firstAudioData.url}`);
                            audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
                            this.isPlaying = true;
                            
                            // 页面切换时需要立即更新高亮和滚动，不受防抖机制影响
                            const highlightIndex = firstAudioData.originalTextIndex !== undefined ? firstAudioData.originalTextIndex : firstNonLeadIndex;
                            this.currentHighlightIndex = highlightIndex;
                            
                            // 立即发送高亮变化事件
                            this.emitHighlightChange(highlightIndex, firstAudioData);
                            
                            // 立即发送滚动事件，传入音频数据
                            this.emitScrollToText(highlightIndex, firstAudioData);
                            
                            console.log(`🎵 页面切换自动播放（跳过导语）: 高亮索引=${highlightIndex}, 页面=${this.currentPage}`);
                        }
                    }
                });
            } else {
                // 没有缓存：自动开始加载音频
                console.log(`🎵 checkAndLoadPreloadedAudio: 无缓存，开始加载音频，页面=${this.currentPage}`);
                this.getCurrentPageAudio(true); // 启用自动播放
            }
        },

        // 分批次请求音频
        async requestAudioInBatches(text, voiceType) {
            const segments = splitTextIntelligently(text);
            const audioSegments = [];
            let totalDuration = 0;
            const requestId = this.currentRequestId; // 保存当前请求ID

            for (let i = 0; i < segments.length; i++) {
                // 检查是否应该取消请求
                if (this.shouldCancelRequest || this.currentRequestId !== requestId) {

                    return null; // 返回null表示请求被取消
                }

                const segment = segments[i];

                try {
                    console.log(`请求第 ${i + 1}/${segments.length} 段音频:`, segment.text.substring(0, 50) + '...');

                    const radioRes = await this.$api.music.textToVoice({
                        text: segment.text,
                        voiceType: voiceType,
                    });

                    if (radioRes.code === 200 && radioRes.result && radioRes.result.url) {
                        const audioUrl = radioRes.result.url;
                        const duration = radioRes.result.time || 0;

                        audioSegments.push({
                            url: audioUrl,
                            text: segment.text,
                            duration: duration,
                            startIndex: segment.startIndex,
                            endIndex: segment.endIndex,
                            segmentIndex: i,
                            isSegmented: segments.length > 1,
                            originalText: text
                        });

                        totalDuration += duration;


                    } else {
                        console.error(`第 ${i + 1} 段音频请求失败:`, radioRes);
                        // 即使某段失败，也继续处理其他段
                        audioSegments.push({
                            url: null,
                            text: segment.text,
                            duration: 0,
                            startIndex: segment.startIndex,
                            endIndex: segment.endIndex,
                            segmentIndex: i,
                            error: true,
                            isSegmented: segments.length > 1,
                            originalText: text
                        });
                    }
                } catch (error) {
                    console.error(`第 ${i + 1} 段音频请求异常:`, error);
                    audioSegments.push({
                        url: null,
                        text: segment.text,
                        duration: 0,
                        startIndex: segment.startIndex,
                        endIndex: segment.endIndex,
                        segmentIndex: i,
                        error: true,
                        isSegmented: segments.length > 1,
                        originalText: text
                    });
                }

                // 每个请求之间间隔200ms，避免请求过于频繁
                if (i < segments.length - 1) {
                    await new Promise(resolve => setTimeout(resolve, 0));
                }
            }

            console.log(`分批次音频请求完成，成功 ${audioSegments.filter(s => !s.error).length}/${segments.length} 段`);

            return {
                audioSegments: audioSegments,
                totalDuration: totalDuration,
                originalText: text
            };
        },

        // 获取当前页面的音频内容
        async getCurrentPageAudio(autoPlay = false) {
            // 🎯 确保音色ID已加载完成后再获取音频
            if (!this.localVoiceId || this.localVoiceId === '' || this.localVoiceId === null || this.localVoiceId === undefined) {

                // 设置加载失败状态
                this.isAudioLoading = false;
                this.audioLoadFailed = true;
                this.hasAudioData = false;

                // 通知父组件音频状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: false,
                    isLoading: false,
                    currentHighlightIndex: -1
                });

                uni.showToast({
                    title: '音色未加载，请稍后重试',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }



            // 检查是否正在页面切换中，如果是则不加载音频
            if (this.isPageChanging) {

                return;
            }

            // 检查是否需要加载音频
            if (!this.shouldLoadAudio) {

                // 清空音频状态
                this.currentPageAudios = [];
                this.hasAudioData = false;
                this.isAudioLoading = false;
                this.audioLoadFailed = false;
                this.currentAudioIndex = 0;
                this.currentTime = 0;
                this.totalTime = 0;
                this.clearHighlight();

                // 通知父组件音频状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: false,
                    isLoading: false,
                    currentHighlightIndex: -1
                });
                return;
            }

            // 检查会员限制
            if (this.isAudioDisabled) {
                return;
            }

            // 检查是否已经在加载中，防止重复加载（音色切换时除外）
            if (this.isAudioLoading && !this.isVoiceChanging) {
                return;
            }

            console.log('this.audioCache:', this.audioCache);

            // 检查缓存中是否已有当前页面的音频数据
            // 在加载开始前对关键参数做快照，确保整个流程参数一致
            const loadCourseId = this.courseId;
            const loadPage = this.currentPage;
            const loadVoiceId = this.localVoiceId;

            const cacheKey = generateCacheKey(loadCourseId, loadPage, loadVoiceId);
            if (this.audioCache[cacheKey]) {

                // 从缓存加载音频数据
                this.currentPageAudios = this.audioCache[cacheKey].audios;
                this.totalTime = this.audioCache[cacheKey].totalDuration;
                
                // 初始化音频索引为第一个非导语音频
                this.initializeAudioIndex();
                this.resetPlaybackState(false, false);
                this.hasAudioData = true;
                this.isAudioLoading = false;

                // 如果是课程切换后的自动加载，清除切换标识
                if (this.isJustSwitchedCourse) {
                    this.isJustSwitchedCourse = false;
                }

                // 通知父组件音频状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: this.hasAudioData,
                    isLoading: this.isAudioLoading,
                    currentHighlightIndex: this.currentHighlightIndex
                });
                return;
            }

            // 开始加载状态
            this.isAudioLoading = true;
            this.hasAudioData = false;

            // 重置请求取消标识并生成新的请求ID
            this.shouldCancelRequest = false;
            this.currentRequestId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);


            // 清空当前页面音频数组
            this.currentPageAudios = [];
            this.currentAudioIndex = 0;
            this.isPlaying = false;
            this.currentTime = 0;
            this.totalTime = 0;

            // 通知父组件开始加载
            this.$emit('audio-state-change', {
                hasAudioData: this.hasAudioData,
                isLoading: this.isAudioLoading,
                currentHighlightIndex: this.currentHighlightIndex
            });

            try {
                // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
                const currentPageData = this.bookPages[loadPage - 1];
                console.log(`🎵 getCurrentPageAudio: 当前页面=${loadPage}, 音色ID=${loadVoiceId}, 课程ID=${loadCourseId}`);
                console.log(`🎵 getCurrentPageAudio: bookPages长度=${this.bookPages.length}, 当前页面数据:`, currentPageData);

                // 检查页面数据是否存在且不为空
                if (!currentPageData || currentPageData.length === 0) {
                    console.log(`🎵 getCurrentPageAudio: 当前页面数据为空，可能还在加载中`);
                    // 通知父组件页面数据需要加载
                    this.$emit('page-data-needed', loadPage);

                    // 设置加载失败状态
                    this.isAudioLoading = false;
                    this.audioLoadFailed = true;
                    this.hasAudioData = false;

                    // 通知父组件音频状态变化
                    this.$emit('audio-state-change', {
                        hasAudioData: false,
                        isLoading: false,
                        currentHighlightIndex: -1
                    });

                    uni.showToast({
                        title: '页面数据加载中，请稍后重试',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }

                if (currentPageData) {
                    // 收集所有text类型的元素
                    const textItems = currentPageData.filter(item => item.type === 'text');
                    console.log(`🎵 getCurrentPageAudio: 找到${textItems.length}个文本项:`, textItems.map(item => item.content?.substring(0, 50) + '...'));

                    if (textItems.length > 0) {
                        let firstAudioPlayed = false; // 标记是否已播放第一个音频
                        let loadedAudiosCount = 0; // 已加载的音频数量

                        // 逐个处理文本项，支持长文本分割
                        for (let index = 0; index < textItems.length; index++) {
                            const item = textItems[index];

                            try {


                                // 使用分批次请求音频

                                const batchResult = await this.requestAudioInBatches(item.content, loadVoiceId);

                                // 检查请求是否被取消
                                if (batchResult === null) {

                                    return;
                                }

                                if (batchResult.audioSegments.length > 0) {
                                    // 同时保存到原始数据中以保持兼容性（使用第一段的URL）
                                    const firstValidSegment = batchResult.audioSegments.find(seg => !seg.error);
                                    if (firstValidSegment) {
                                        item.audioUrl = firstValidSegment.url;
                                    }

                                    // 将所有音频段添加到音频数组
                                    for (const segment of batchResult.audioSegments) {
                                        if (!segment.error) {
                                            const audioData = {
                                                isLead : item.isLead,
                                                url: segment.url,
                                                text: segment.text,
                                                duration: segment.duration || 0,
                                                startIndex: segment.startIndex,
                                                endIndex: segment.endIndex,
                                                segmentIndex: segment.segmentIndex,
                                                originalTextIndex: index, // 标记属于哪个原始文本项
                                                isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
                                            };
                                            this.currentPageAudios.push(audioData);
                                            loadedAudiosCount++;
                                        }
                                    }

                                    // 如果是第一个音频，立即开始播放
                                    if (!firstAudioPlayed && this.currentPageAudios.length > 0) {
                                        firstAudioPlayed = true;
                                        this.hasAudioData = true;
                                        
                                        // 初始化音频索引为第一个非导语音频
                                        const firstNonLeadIndex = this.findFirstNonLeadAudio();
                                        this.currentAudioIndex = firstNonLeadIndex >= 0 ? firstNonLeadIndex : 0;



                                        // 通知父组件有音频数据了，但仍在加载中
                                        this.$emit('audio-state-change', {
                                            hasAudioData: this.hasAudioData,
                                            isLoading: this.isAudioLoading, // 保持加载状态
                                            currentHighlightIndex: this.currentHighlightIndex
                                        });

                                        // 立即使用audioManager播放第一个非导语音频
                                        if (autoPlay || !this.isVoiceChanging) {
                                            // 查找第一个非导语音频
                                            const firstNonLeadIndex = this.findFirstNonLeadAudio();
                                            if (firstNonLeadIndex >= 0 && firstNonLeadIndex < this.currentPageAudios.length) {
                                                // 设置当前音频索引为第一个非导语音频
                                                this.currentAudioIndex = firstNonLeadIndex;
                                                const firstAudioData = this.currentPageAudios[firstNonLeadIndex];
                                                
                                                console.log(`🎵 getCurrentPageAudio 自动播放（跳过导语）: 索引=${firstNonLeadIndex}, isLead=${firstAudioData.isLead}`);
                                                audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
                                                this.isPlaying = true;
                                                this.updateHighlightIndex();
                                            }
                                        }
                                    }

                                    console.log(`文本项 ${index + 1} 处理完成，获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
                                } else {
                                    console.error(`文本项 ${index + 1} 音频请求全部失败`);
                                }
                            } catch (error) {
                                console.error(`文本项 ${index + 1} 处理异常:`, error);
                            }
                        }

                        // 如果有音频，重新计算精确的总时长
                        if (this.currentPageAudios.length > 0) {
                            await this.calculateTotalDuration();

                            // 将音频数据保存到缓存中
                            const cacheKey = generateCacheKey(loadCourseId, loadPage, loadVoiceId);
                            this.audioCache[cacheKey] = {
                                audios: [...this.currentPageAudios], // 深拷贝音频数组
                                totalDuration: this.totalTime,
                                voiceId: loadVoiceId, // 保存音色ID用于验证
                                pageNumber: loadPage, // 保存页面号码用于验证
                                timestamp: Date.now() // 保存时间戳
                            };


                            // 限制缓存大小
                            this.limitCacheSize(1000);
                        }
                    }
                }

                // 结束加载状态
                this.isAudioLoading = false;
                this.isVoiceChanging = false; // 清除音色切换加载状态

                // 如果是课程切换后的自动加载，清除切换标识
                if (this.isJustSwitchedCourse) {
                    this.isJustSwitchedCourse = false;
                }

                // 设置音频数据状态和失败状态
                this.hasAudioData = this.currentPageAudios.length > 0;
                this.audioLoadFailed = !this.hasAudioData && this.shouldLoadAudio; // 如果需要音频但没有音频数据，则认为获取失败

                // 通知父组件音频状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: this.hasAudioData,
                    isLoading: this.isAudioLoading,
                    audioLoadFailed: this.audioLoadFailed,
                    currentHighlightIndex: this.currentHighlightIndex
                });

            } catch (error) {
                console.error('getCurrentPageAudio 方法执行异常:', error);

                // 确保在异常情况下重置加载状态
                this.isAudioLoading = false;
                this.isVoiceChanging = false;
                this.audioLoadFailed = true;
                this.hasAudioData = false;

                // 通知父组件音频加载失败
                this.$emit('audio-state-change', {
                    hasAudioData: false,
                    isLoading: false,
                    audioLoadFailed: true,
                    currentHighlightIndex: this.currentHighlightIndex
                });

                // 显示错误提示
                uni.showToast({
                    title: '音频加载失败，请重试',
                    icon: 'none',
                    duration: 2000
                });
            }
        },

        // 重新获取音频
        retryGetAudio() {


            // 检查是否需要加载音频
            if (!this.shouldLoadAudio) {

                return;
            }

            // 重置失败状态
            this.audioLoadFailed = false;
            // 清除当前页面的音频缓存
            const pageKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            if (this.audioCache[pageKey]) {
                delete this.audioCache[pageKey];

            }
            // 重新获取音频
            this.getCurrentPageAudio();
        },

        // 重置音频状态
        resetAudioState() {
            // 取消当前正在进行的音频请求
            this.shouldCancelRequest = true;

            // 使用audioManager停止当前音频
            audioManager.stopCurrentAudio();
            this.currentAudio = null;

            // 使用公共方法重置播放状态
            this.resetPlaybackState(true, false);
            this.totalTime = 0;
            this.isAudioLoading = false;
            this.audioLoadFailed = false;
            this.playSpeed = 1.0;

            // 页面切换时，始终清空当前音频数据，避免数据错乱
            // 音频数据的加载由checkAndLoadPreloadedAudio方法统一处理
            this.currentPageAudios = [];
            this.totalTime = 0;
            this.hasAudioData = false;

            // 通知父组件音频状态变化
            this.$emit('audio-state-change', {
                hasAudioData: false,
                isLoading: false,
                currentHighlightIndex: -1
            });
        },

        // 加载缓存的音频数据并显示播放控制栏
        loadCachedAudioData() {
            const cacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            const cachedData = this.audioCache[cacheKey];

            // 使用公共方法验证缓存数据
            if (!validateCacheData(cachedData, this.currentPage)) {
                console.warn('缓存数据不存在或无效:', cacheKey);
                uni.showToast({
                    title: '缓存音频数据无效',
                    icon: 'none'
                });
                return;
            }

            // 检查音色ID是否匹配
            if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
                console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
                // uni.showToast({
                //     title: '音色已切换，请重新获取音频',
                //     icon: 'none'
                // });
                return;
            }

            // 检查音频URL是否有效
            const firstAudio = cachedData.audios[0];
            if (!firstAudio || !firstAudio.url) {
                console.warn('缓存音频URL无效');
                uni.showToast({
                    title: '缓存音频数据损坏',
                    icon: 'none'
                });
                return;
            }



            // 从缓存加载音频数据
            this.currentPageAudios = cachedData.audios;
            this.totalTime = cachedData.totalDuration || 0;
            this.currentAudioIndex = 0;
            this.isPlaying = false;
            this.currentTime = 0;
            this.hasAudioData = true;
            this.isAudioLoading = false;
            this.audioLoadFailed = false;
            this.clearHighlight();

            // 通知父组件音频状态变化
            this.$emit('audio-state-change', {
                hasAudioData: this.hasAudioData,
                isLoading: this.isAudioLoading,
                currentHighlightIndex: this.currentHighlightIndex
            });


        },

        // 手动获取音频
        async handleGetAudio() {
            // 检查会员限制
            if (this.isAudioDisabled) {
                return;
            }

            // 检查是否有音色ID
            if (!this.localVoiceId) {
                // uni.showToast({
                //     title: '音色未加载，请稍后重试',
                //     icon: 'none'
                // });
                return;
            }

            // 检查当前页面是否支持音频播放
            if (!this.shouldLoadAudio) {
                uni.showToast({
                    title: '当前页面不支持音频播放',
                    icon: 'none'
                });
                return;
            }

            // 检查是否正在加载
            if (this.isAudioLoading) {
                return;
            }

            // 调用获取音频方法
            await this.getCurrentPageAudio();
        },

        // 计算音频总时长
        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) {

                    totalDuration += audio.duration;
                } else {
                    // 如果没有时长信息，使用文字长度估算（备用方案）
                    const textLength = audio.text.length;
                    // 假设较快语速每分钟约300个字符，即每秒约5个字符
                    const estimatedDuration = Math.max(1, textLength / 5);
                    audio.duration = estimatedDuration;
                    totalDuration += estimatedDuration;
                    console.log(`备用估算音频时长 ${i + 1}:`, estimatedDuration, '秒 (文字长度:', textLength, ')');
                }
            }
            this.totalTime = totalDuration;

        },

        // 获取音频时长
        getAudioDuration(audioUrl) {
            return new Promise((resolve, reject) => {
                const audio = uni.createInnerAudioContext();
                audio.src = audioUrl;

                let resolved = false;

                // 监听音频加载完成事件
                audio.onCanplay(() => {

                    if (!resolved && audio.duration && audio.duration > 0) {
                        resolved = true;
                        resolve(audio.duration);
                        audio.destroy();
                    }
                });

                // 监听音频元数据加载完成事件
                audio.onLoadedmetadata = () => {

                    if (!resolved && audio.duration && audio.duration > 0) {
                        resolved = true;
                        resolve(audio.duration);
                        audio.destroy();
                    }
                };

                // 监听音频时长更新事件
                audio.onDurationChange = () => {

                    if (!resolved && audio.duration && audio.duration > 0) {
                        resolved = true;
                        resolve(audio.duration);
                        audio.destroy();
                    }
                };

                // 移除onPlay監聽器，避免意外播放

                audio.onError((error) => {
                    console.error('音频加载失败:', error);
                    if (!resolved) {
                        resolved = true;
                        reject(error);
                        audio.destroy();
                    }
                });

                // 設置較長的超時時間，但不播放音頻
                setTimeout(() => {
                    if (!resolved) {

                        resolved = true;
                        reject(new Error('無法獲取音頻時長'));
                        audio.destroy();
                    }
                }, 1000);

                // 最終超時處理
                setTimeout(() => {
                    if (!resolved) {
                        console.warn('獲取音頻時長超時，使用默認值');
                        resolved = true;
                        reject(new Error('获取音频时长超时'));
                        audio.destroy();
                    }
                }, 5000);
            });
        },

        // 音频控制方法
        togglePlay() {
            // 检查会员限制
            if (this.isAudioDisabled) {
                return;
            }

            if (this.currentPageAudios.length === 0) {
                uni.showToast({
                    title: '当前页面没有音频内容',
                    icon: 'none'
                });
                return;
            }

            if (this.isPlaying) {
                this.pauseAudio();
            } else {
                this.playAudio();
            }
        },

        // 播放音频
        async playAudio() {
            // 检查会员限制
            if (this.isAudioDisabled) {
                return;
            }

            // 检查音频数据有效性
            if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
                console.warn('🎵 playAudio: 没有音频数据');
                return;
            }

            // 如果当前索引无效，重置为第一个非导语音频
            if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) {
                console.log('🎵 playAudio: 音频索引无效，重置为第一个非导语音频');
                this.currentAudioIndex = this.findFirstNonLeadAudio();
                if (this.currentAudioIndex < 0) {
                    console.error('🎵 playAudio: 找不到有效的音频');
                    return;
                }
            }

            let currentAudioData = this.currentPageAudios[this.currentAudioIndex];
            
            // 如果当前音频是导语，跳转到下一个非导语音频
            if (currentAudioData && currentAudioData.isLead) {
                console.log(`🎵 playAudio: 当前音频是导语（索引=${this.currentAudioIndex}），查找下一个非导语音频`);
                
                // 从当前索引开始查找下一个非导语音频
                let nextNonLeadIndex = -1;
                for (let i = this.currentAudioIndex; i < this.currentPageAudios.length; i++) {
                    const audioData = this.currentPageAudios[i];
                    if (audioData && !audioData.isLead) {
                        nextNonLeadIndex = i;
                        break;
                    }
                }
                
                if (nextNonLeadIndex >= 0) {
                    this.currentAudioIndex = nextNonLeadIndex;
                    currentAudioData = this.currentPageAudios[this.currentAudioIndex];
                    console.log(`🎵 playAudio: 跳转到非导语音频，新索引=${this.currentAudioIndex}, isLead=${currentAudioData.isLead}`);
                } else {
                    console.warn('🎵 playAudio: 没有找到非导语音频，播放当前音频');
                }
            }

            if (!currentAudioData || !currentAudioData.url) {
                console.error('🎵 playAudio: 音频数据无效', currentAudioData);
                return;
            }

            // 检查音频数据是否属于当前页面
            const audioCacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            const currentPageCache = this.audioCache[audioCacheKey];

            if (!currentPageCache || !currentPageCache.audios.includes(currentAudioData)) {
                console.error('🎵 playAudio: 音频数据与当前页面不匹配，停止播放');
                return;
            }

            try {
                console.log(`🎵 playAudio: 播放音频，索引=${this.currentAudioIndex}, isLead=${currentAudioData.isLead}`);
                
                // 使用audioManager播放句子音频，应用全局语速设置
                await audioManager.playAudio(currentAudioData.url, 'sentence', {
                    playbackRate: audioManager.getGlobalPlaybackRate()
                });

                // 更新高亮索引
                this.updateHighlightIndex();
            } catch (error) {
                console.error('🎵 播放音频失败:', error);
                uni.showToast({
                    title: '音频播放失败',
                    icon: 'none'
                });
            }
        },

        // 暂停音频
        pauseAudio() {
            audioManager.pause();
            this.isPlaying = false;
            // 暂停时清除高亮
            this.clearHighlight();
            // 通知父组件高亮状态变化
            this.emitHighlightChange(-1);
        },

        // 文本标准化函数 - 移除多余空格、标点符号等
        normalizeText(text) {
            if (!text || typeof text !== 'string') return '';

            return text
                .trim()
                .replace(/\s+/g, ' ')  // 将多个空格替换为单个空格
                .replace(/[，。！？；：""''（）【】《》]/g, '')  // 移除中文标点
                .replace(/[,.!?;:"'()\[\]<>]/g, '')  // 移除英文标点
                .toLowerCase();  // 转为小写（对英文有效）
        },

        // 备用方案：使用 TTS API 实时生成并播放音频
        // async playTextWithTTS(textContent) {
        //   try {


        //     // 停止当前播放的音频
        //     if (this.currentAudio) {
        //       this.currentAudio.pause();
        //       this.currentAudio.destroy();
        //       this.currentAudio = null;
        //     }

        //     // 显示加载提示
        //     uni.showLoading({
        //       title: '正在生成音频...'
        //     });

        //     // 调用 TTS API
        //     const audioRes = await this.$api.music.textToVoice({
        //       text: textContent,
        //       voiceType: this.voiceId || 1 // 使用当前语音类型，默认为1
        //     });

        //     uni.hideLoading();



        //     if (audioRes && audioRes.result && audioRes.result.url) {
        //       const audioUrl = audioRes.result.url;

        //       // 创建并播放音频
        //       const audio = uni.createInnerAudioContext();
        //       audio.src = audioUrl;

        //       audio.onPlay(() => {

        //         this.isPlaying = true;
        //       });

        //       audio.onEnded(() => {

        //         this.isPlaying = false;
        //         audio.destroy();
        //         if (this.currentAudio === audio) {
        //           this.currentAudio = null;
        //         }
        //       });

        //       audio.onError((error) => {
        //         console.error('🔊 TTS 音频播放失败:', error);
        //         this.isPlaying = false;
        //         audio.destroy();
        //         if (this.currentAudio === audio) {
        //           this.currentAudio = null;
        //         }
        //         uni.showToast({
        //           title: '音频播放失败',
        //           icon: 'none'
        //         });
        //       });

        //       // 保存当前音频实例并播放
        //       this.currentAudio = audio;
        //       audio.play();


        //       return true;
        //     } else {
        //       console.error('❌ TTS API 请求失败:', audioRes);
        //       uni.showToast({
        //         title: '音频生成失败',
        //         icon: 'none'
        //       });
        //       return false;
        //     }
        //   } catch (error) {
        //     uni.hideLoading();
        //     console.error('❌ TTS 音频生成异常:', error);
        //     uni.showToast({
        //       title: '音频生成失败',
        //       icon: 'none'
        //     });
        //     return false;
        //   }
        // },

        // 播放指定的音频段落（通过文本内容匹配）
        playSpecificAudio(textContent) {

            // 检查textContent是否有效
            if (!textContent || typeof textContent !== 'string') {
                console.error('❌ 无效的文本内容:', textContent);
                uni.showToast({
                    title: '无效的文本内容',
                    icon: 'none'
                });
                return false;
            }

            // 检查音频数据是否已加载
            if (this.currentPageAudios.length === 0) {
                console.warn('⚠️ 当前页面音频数据为空，可能还在加载中');
                uni.showToast({
                    title: '音频正在加载中，请稍后再试',
                    icon: 'none'
                });
                return false;
            }

            // 标准化目标文本
            const normalizedTarget = this.normalizeText(textContent);


            // 打印所有音频文本用于调试

            this.currentPageAudios.forEach((audio, index) => {

                console.log(`  [${index}] 标准化文本: "${this.normalizeText(audio.text)}"`);
                if (audio.originalText) {

                }
            });

            let audioIndex = -1;

            // 第一步：精确匹配（标准化后）
            audioIndex = this.currentPageAudios.findIndex(audio => {
                if (!audio.text) return false;
                const normalizedAudio = this.normalizeText(audio.text);
                return normalizedAudio === normalizedTarget;
            });

            if (audioIndex !== -1) {

            } else {


                // 第二步：包含匹配
                audioIndex = this.currentPageAudios.findIndex(audio => {
                    if (!audio.text) return false;
                    const normalizedAudio = this.normalizeText(audio.text);

                    // 双向包含检查
                    return normalizedAudio.includes(normalizedTarget) || normalizedTarget.includes(normalizedAudio);
                });

                if (audioIndex !== -1) {

                } else {


                    // 第三步：分段音频匹配
                    audioIndex = this.currentPageAudios.findIndex(audio => {
                        if (!audio.text) return false;

                        // 检查是否为分段音频，且原始文本匹配
                        if (audio.isSegmented && audio.originalText) {
                            const normalizedOriginal = this.normalizeText(audio.originalText);
                            return normalizedOriginal === normalizedTarget ||
                                normalizedOriginal.includes(normalizedTarget) ||
                                normalizedTarget.includes(normalizedOriginal);
                        }

                        return false;
                    });

                    if (audioIndex !== -1) {

                    } else {


                        // 第四步：句子分割匹配（针对长句子）


                        // 将目标句子按标点符号分割
                        const targetSentences = normalizedTarget.split(/[，。！？；：,!?;:]/).filter(s => s.trim().length > 0);


                        if (targetSentences.length > 1) {
                            // 尝试匹配分割后的句子片段
                            for (let i = 0; i < targetSentences.length; i++) {
                                const sentence = targetSentences[i].trim();
                                if (sentence.length < 3) continue; // 跳过太短的片段

                                audioIndex = this.currentPageAudios.findIndex(audio => {
                                    if (!audio.text) return false;
                                    const normalizedAudio = this.normalizeText(audio.text);
                                    return normalizedAudio.includes(sentence) || sentence.includes(normalizedAudio);
                                });

                                if (audioIndex !== -1) {

                                    break;
                                }
                            }
                        }

                        if (audioIndex === -1) {


                            // 第五步：关键词匹配（提取关键词进行匹配）
                            const keywords = normalizedTarget.split(/\s+/).filter(word => word.length > 2);


                            let bestKeywordMatch = -1;
                            let bestKeywordCount = 0;

                            this.currentPageAudios.forEach((audio, index) => {
                                if (!audio.text) return;
                                const normalizedAudio = this.normalizeText(audio.text);

                                // 计算匹配的关键词数量
                                const matchedKeywords = keywords.filter(keyword => normalizedAudio.includes(keyword));
                                const matchCount = matchedKeywords.length;

                                if (matchCount > bestKeywordCount && matchCount >= Math.min(2, keywords.length)) {
                                    bestKeywordCount = matchCount;
                                    bestKeywordMatch = index;
                                    console.log(`  [${index}] 关键词匹配: ${matchCount}/${keywords.length}, 匹配词: [${matchedKeywords.join(', ')}]`);
                                }
                            });

                            if (bestKeywordMatch !== -1) {
                                audioIndex = bestKeywordMatch;

                            } else {


                                // 第六步：相似度匹配（最后的尝试）
                                let bestMatch = -1;
                                let bestSimilarity = 0;

                                this.currentPageAudios.forEach((audio, index) => {
                                    if (!audio.text) return;

                                    const normalizedAudio = this.normalizeText(audio.text);

                                    // 计算简单的相似度（共同字符数 / 较长文本长度）
                                    const commonChars = [...normalizedTarget].filter(char => normalizedAudio.includes(char)).length;
                                    const maxLength = Math.max(normalizedTarget.length, normalizedAudio.length);
                                    const similarity = maxLength > 0 ? commonChars / maxLength : 0;

                                    console.log(`  [${index}] 相似度: ${similarity.toFixed(2)}, 文本: "${audio.text}"`);

                                    if (similarity > bestSimilarity && similarity > 0.5) { // 降低相似度阈值到50%
                                        bestSimilarity = similarity;
                                        bestMatch = index;
                                    }
                                });

                                if (bestMatch !== -1) {
                                    audioIndex = bestMatch;

                                }
                            }
                        }
                    }
                }
            }

            if (audioIndex !== -1) {
                // 使用audioManager停止当前音频并播放新音频
                audioManager.stopCurrentAudio();

                // 设置新的音频索引
                this.currentAudioIndex = audioIndex;

                // 重置播放状态
                this.isPlaying = false;
                this.currentTime = 0;
                this.sliderValue = 0;

                // 更新高亮索引
                this.currentHighlightIndex = audioIndex;
                this.emitHighlightChange(audioIndex);

                // 使用audioManager播放指定音频
                const audioData = this.currentPageAudios[audioIndex];
                audioManager.playAudio(audioData.url, 'sentence', { playbackRate: this.playSpeed });
                this.isPlaying = true;

                return true; // 成功找到并播放
            } else {
                console.error('❌ 未找到匹配的音频段落:', textContent);


                // 最后的尝试：首字符匹配（针对划线重点等特殊情况）
                if (normalizedTarget.length > 5) {
                    const firstChars = normalizedTarget.substring(0, Math.min(10, normalizedTarget.length));


                    audioIndex = this.currentPageAudios.findIndex(audio => {
                        if (!audio.text) return false;
                        const normalizedAudio = this.normalizeText(audio.text);
                        return normalizedAudio.startsWith(firstChars) || firstChars.startsWith(normalizedAudio.substring(0, Math.min(10, normalizedAudio.length)));
                    });

                    if (audioIndex !== -1) {


                        // 使用audioManager停止当前音频并播放新音频
                        audioManager.stopCurrentAudio();

                        // 设置新的音频索引
                        this.currentAudioIndex = audioIndex;

                        // 重置播放状态
                        this.isPlaying = false;
                        this.currentTime = 0;
                        this.sliderValue = 0;

                        // 更新高亮索引
                        this.currentHighlightIndex = audioIndex;
                        this.emitHighlightChange(audioIndex);

                        // 使用audioManager播放指定音频
                        const audioData = this.currentPageAudios[audioIndex];
                        audioManager.playAudio(audioData.url, 'sentence', { playbackRate: this.playSpeed });
                        this.isPlaying = true;

                        return true;
                    }
                }



                // 备用方案：当找不到匹配音频时，显示提示信息
                console.warn('⚠️ 未找到匹配的音频段落，无法播放:', textContent);
                this.$emit('showToast', '未找到对应的音频内容');
                return false;
            }
        },

        // 创建音频实例
        // 更新当前播放时间
        updateCurrentTime() {
            // 使用audioManager获取当前播放时间
            const currentTime = audioManager.getCurrentTime();
            if (currentTime === null) return;

            let totalTime = 0;
            // 计算之前音频的总时长
            for (let i = 0; i < this.currentAudioIndex; i++) {
                totalTime += this.currentPageAudios[i].duration;
            }
            // 加上当前音频的播放时间
            totalTime += currentTime;

            this.currentTime = totalTime;

            // 如果不是正在拖動滑動條，則同步更新滑動條的值
            if (!this.isDragging) {
                this.sliderValue = this.currentTime;
            }

            // 更新当前高亮的文本索引
            this.updateHighlightIndex();
        },

        // 更新高亮文本索引
        updateHighlightIndex() {
            if (!this.isPlaying || this.currentPageAudios.length === 0) {
                this.currentHighlightIndex = -1;
                this.emitHighlightChange(-1);
                return;
            }

            // 检查是否正在页面切换中，如果是则不更新高亮
            if (this.isPageChanging) {
                return;
            }

            // 获取当前播放的音频数据
            const currentAudio = this.currentPageAudios[this.currentAudioIndex];
            if (!currentAudio) {
                this.currentHighlightIndex = -1;
                this.emitHighlightChange(-1);
                return;
            }

            // 检查音频数据是否属于当前页面，防止页面切换时的数据错乱
            const audioCacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            const currentPageCache = this.audioCache[audioCacheKey];

            // 如果当前音频数据不属于当前页面，则不更新高亮
            if (!currentPageCache || !currentPageCache.audios.includes(currentAudio)) {
                console.warn('🎵 updateHighlightIndex: 音频数据与当前页面不匹配，跳过高亮更新');
                return;
            }

            // 如果是分段音频，需要计算正确的高亮索引
            if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
                // 使用原始文本项的索引作为高亮索引
                this.currentHighlightIndex = currentAudio.originalTextIndex;

            } else {
                // 非分段音频，使用音频索引
                this.currentHighlightIndex = this.currentAudioIndex;

            }

            // 使用辅助方法发送高亮变化事件
            this.emitHighlightChange(this.currentHighlightIndex);

            // 发送滚动事件，让页面滚动到当前高亮的文本
            this.emitScrollToText(this.currentHighlightIndex);
        },

        // 发送高亮变化事件的辅助方法
        emitHighlightChange(highlightIndex = -1, audioData = null) {
            if (highlightIndex === -1) {
                // 清除高亮
                this.$emit('highlight-change', -1);
                return;
            }

            // 获取当前播放的音频数据，优先使用传入的audioData
            const currentAudioData = audioData || this.currentPageAudios[this.currentAudioIndex];
            if (!currentAudioData) {
                this.$emit('highlight-change', -1);
                return;
            }

            const highlightData = {
                highlightIndex: currentAudioData.originalTextIndex !== undefined ? currentAudioData.originalTextIndex : highlightIndex,
                isSegmented: currentAudioData.isSegmented || false,
                segmentIndex: currentAudioData.segmentIndex,
                startIndex: currentAudioData.startIndex || 0,
                endIndex: currentAudioData.endIndex || 0,
                currentText: currentAudioData.text || ''
            };

            // 发送详细的高亮信息
            this.$emit('highlight-change', highlightData);
        },

        // 发送滚动到文本事件的辅助方法
        emitScrollToText(highlightIndex = -1, audioData = null) {
            if (highlightIndex === -1) {
                return;
            }

            // 获取当前播放的音频数据，优先使用传入的audioData
            const currentAudioData = audioData || this.currentPageAudios[this.currentAudioIndex];
            if (!currentAudioData) {
                return;
            }

            // 检查音频数据是否属于当前页面，防止页面切换时的数据错乱
            const audioCacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
            const currentPageCache = this.audioCache[audioCacheKey];

            // 如果当前音频数据不属于当前页面，则不发送滚动事件
            if (!currentPageCache || !currentPageCache.audios.includes(currentAudioData)) {
                console.warn('🎵 emitScrollToText: 音频数据与当前页面不匹配，跳过滚动事件');
                return;
            }

            const scrollData = {
                highlightIndex: currentAudioData.originalTextIndex !== undefined ? currentAudioData.originalTextIndex : highlightIndex,
                isSegmented: currentAudioData.isSegmented || false,
                segmentIndex: currentAudioData.segmentIndex || 0,
                currentText: currentAudioData.text || '',
                currentPage: this.currentPage
            };

            // 发送滚动事件
            this.$emit('scroll-to-text', scrollData);
        },

        // 音频播放结束处理
        onAudioEnded() {
            // 防止多次触发，添加防抖机制
            if (this.isProcessingEnded) {
                console.log('🎵 onAudioEnded: 正在处理中，跳过重复调用');
                return;
            }

            this.isProcessingEnded = true;
            console.log(`🎵 onAudioEnded: 当前索引=${this.currentAudioIndex}, 总音频数=${this.currentPageAudios.length}`);

            // 添加延迟确保音频状态完全清理
            setTimeout(() => {
                try {
                    // 检查音频数据有效性
                    if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
                        console.warn('🎵 onAudioEnded: 没有音频数据');
                        this.isProcessingEnded = false;
                        return;
                    }

                    // 单句循环模式：重播当前句（如果是导语则跳到第一个非导语）
                    if (this.loopMode === 'sentence') {
                        this.playAudio();
                        this.isProcessingEnded = false;
                        return;
                    }

                    if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
                        // 还有下一个音频，继续播放
                        let currentAudioData = this.currentPageAudios[this.currentAudioIndex];
                        
                        // 检查当前音频的 isLead 状态
                        if (currentAudioData && !currentAudioData.isLead) {
                            console.log('🎵 onAudioEnded: 当前音频 isLead=false，检查是否需要跳过 isLead=true 的音频');
                            
                            // 从当前索引开始，跳过所有 isLead=true 的音频
                            let nextIndex = this.currentAudioIndex;
                            while (nextIndex < (this.currentPageAudios.length - 1)) {
                                const audioData = this.currentPageAudios[nextIndex + 1];
                                if (audioData && audioData.isLead == true) {
                                    console.log(`🎵 onAudioEnded: 跳过 isLead=true 的音频，索引=${nextIndex + 1}`);
                                    nextIndex++;
                                } else {
                                    break;
                                }
                            }
                            
                            // 更新当前音频索引
                            if (nextIndex !== this.currentAudioIndex) {
                                this.currentAudioIndex = nextIndex;
                                console.log(`🎵 onAudioEnded: 跳过后的新索引=${this.currentAudioIndex}`);
                                
                                // 检查新索引是否有效
                                if (this.currentAudioIndex >= this.currentPageAudios.length - 1) {
                                    console.log('🎵 onAudioEnded: 跳过后已到达音频列表末尾，进入播放完毕逻辑');
                                    // 跳转到播放完毕的逻辑
                                    this.handlePlaybackComplete();
                                    return;
                                }
                            }
                        }

                        // 移动到下一个音频索引
                        this.currentAudioIndex++;
                        
                        // 确保索引在有效范围内
                        if (this.currentAudioIndex >= this.currentPageAudios.length) {
                            console.log('🎵 onAudioEnded: 索引超出范围，进入播放完毕逻辑');
                            this.handlePlaybackComplete();
                            return;
                        }

                        console.log(`🎵 onAudioEnded: 准备播放下一个音频，索引=${this.currentAudioIndex}`);

                        // 确保音频数据有效
                        const nextAudio = this.currentPageAudios[this.currentAudioIndex];
                        if (nextAudio && nextAudio.url) {
                            this.playAudio();
                        } else {
                            console.error('🎵 onAudioEnded: 下一个音频数据无效', nextAudio);
                            // 如果下一个音频无效，尝试播放再下一个
                            this.findAndPlayNextValidAudio();
                        }

                    } else {
                        // 所有音频播放完毕
                        this.handlePlaybackComplete();
                    }
                } catch (error) {
                    console.error('🎵 onAudioEnded: 处理过程中发生错误', error);
                } finally {
                    // 重置防抖标志
                    this.isProcessingEnded = false;
                }
            }, 50); // 添加50ms延迟确保状态清理完成
        },

        // 处理播放完毕的逻辑
        handlePlaybackComplete() {
            console.log('🎵 handlePlaybackComplete: 所有音频播放完毕');
            
            if (this.loopMode === 'page') {
                // 循环播放 - 跳过导语音频
                console.log('🎵 handlePlaybackComplete: 循环播放，查找第一个非导语音频');
                const firstNonLeadIndex = this.findFirstNonLeadAudio();
                
                if (firstNonLeadIndex >= 0 && firstNonLeadIndex < this.currentPageAudios.length) {
                    this.currentAudioIndex = firstNonLeadIndex;
                    const firstAudio = this.currentPageAudios[firstNonLeadIndex];
                    
                    if (firstAudio && firstAudio.url) {
                        console.log(`🎵 handlePlaybackComplete: 循环播放从非导语音频开始，索引=${firstNonLeadIndex}, isLead=${firstAudio.isLead}`);
                        this.playAudio();
                    } else {
                        console.error('🎵 handlePlaybackComplete: 第一个非导语音频数据无效，停止循环播放');
                        this.stopPlayback();
                    }
                } else {
                    console.error('🎵 handlePlaybackComplete: 找不到有效的非导语音频，停止循环播放');
                    this.stopPlayback();
                }
            } else {
                // 停止播放
                this.stopPlayback();
            }
        },

        // 停止播放的逻辑
        stopPlayback() {
            console.log('🎵 stopPlayback: 播放完毕，停止播放');
            this.isPlaying = false;
            this.currentTime = this.totalTime;
            this.currentHighlightIndex = -1;
            this.$emit('highlight-change', -1);
            
            // 通知父组件音频状态变化
            this.$emit('audio-state-change', {
                hasAudioData: this.hasAudioData,
                isLoading: false,
                currentHighlightIndex: -1
            });
        },

        // 查找并播放下一个有效的音频
        findAndPlayNextValidAudio() {
            console.log('🎵 findAndPlayNextValidAudio: 查找下一个有效音频');
            
            // 从当前索引开始查找有效音频
            for (let i = this.currentAudioIndex + 1; i < this.currentPageAudios.length; i++) {
                const audio = this.currentPageAudios[i];
                if (audio && audio.url) {
                    console.log(`🎵 findAndPlayNextValidAudio: 找到有效音频，索引=${i}`);
                    this.currentAudioIndex = i;
                    this.playAudio();
                    return;
                }
            }
            
            // 没有找到有效音频，播放完毕
            console.log('🎵 findAndPlayNextValidAudio: 没有找到有效音频，播放完毕');
            this.handlePlaybackComplete();
        },

        // 滚动到当前播放音频对应的文字
        // scrollToCurrentAudio() {
        //   try {
        //     // 获取当前播放的音频数据
        //     const currentAudio = this.currentPageAudios[this.currentAudioIndex];
        //     if (!currentAudio) {
        //       console.log('🔍 scrollToCurrentAudio: 没有当前音频数据');
        //       return;
        //     }
        //     
        //     // 确定要滚动到的文字索引
        //     let targetTextIndex = this.currentAudioIndex;
        //     
        //     // 如果是分段音频，使用原始文本索引
        //     if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
        //       targetTextIndex = currentAudio.originalTextIndex;
        //     }
        //     
        //     // 获取当前页面数据
        //     const currentPageData = this.bookPages[this.currentPage - 1];
        //     if (!currentPageData || !Array.isArray(currentPageData)) {
        //       console.warn('⚠️ scrollToCurrentAudio: 无法获取当前页面数据');
        //       return;
        //     }
        //     
        //     // 判断目标索引位置的元素类型
        //     const targetElement = currentPageData[targetTextIndex];
        //     let refPrefix = 'textRef'; // 默认为文本
        //     
        //     if (targetElement && targetElement.type === 'image') {
        //       refPrefix = 'imageRef';
        //     }
        //     
        //     // 构建ref名称：根据元素类型使用不同前缀
        //     const refName = `${refPrefix}_${this.currentPage - 1}_${targetTextIndex}`;
        //     
        //     console.log('🎯 scrollToCurrentAudio:', {
        //       currentAudioIndex: this.currentAudioIndex,
        //       targetTextIndex: targetTextIndex,
        //       targetElementType: targetElement?.type || 'unknown',
        //       refPrefix: refPrefix,
        //       refName: refName,
        //       isSegmented: currentAudio.isSegmented,
        //       originalTextIndex: currentAudio.originalTextIndex,
        //       audioText: currentAudio.text?.substring(0, 50) + '...'
        //     });
        //     
        //     // 通过父组件调用scrollTo插件
        //     this.$emit('scroll-to-text', refName);
        //     
        //   } catch (error) {
        //     console.error('❌ scrollToCurrentAudio 执行失败:', error);
        //   }
        // },

        toggleLoop() {
            const modes = ['sequential', 'sentence', 'page'];
            const idx = modes.indexOf(this.loopMode);
            this.loopMode = modes[(idx + 1) % modes.length];
            this.$emit('loop-mode-change', this.loopMode);
            uni.showToast({
                title: `播放模式：${this.loopModeLabel}`,
                icon: 'none',
                duration: 800
            });
        },

        toggleSpeed() {


            // 简化检测：只在极少数情况下阻止倍速切换


            // 只有在明确禁用的情况下才阻止（比如Android 4.x）
            if (!this.playbackRateSupported) {

                // 不再直接返回，而是继续尝试
            }

            const currentIndex = this.speedOptions.indexOf(this.playSpeed);
            const nextIndex = (currentIndex + 1) % this.speedOptions.length;
            const oldSpeed = this.playSpeed;
            this.playSpeed = this.speedOptions[nextIndex];

            // 同步语速设置到audioManager
            audioManager.setGlobalPlaybackRate(this.playSpeed);

            console.log('⚡ 倍速切换详情:', {
                可用选项: this.speedOptions,
                当前索引: currentIndex,
                下一个索引: nextIndex,
                旧速度: oldSpeed + 'x',
                新速度: this.playSpeed + 'x',
                切换时间: new Date().toLocaleTimeString()
            });

            // 同步全局播放速度到audioManager
            audioManager.setGlobalPlaybackRate(this.playSpeed);

            // 显示速度变更提示
            uni.showToast({
                title: `🎵 播放速度: ${this.playSpeed}x`,
                icon: 'none',
                duration: 1000
            });
        },

        // 滑動條值實時更新 (@input 事件)
        onSliderInput(value) {
            // 在拖動過程中實時更新顯示的時間，但不影響實際播放
            if (this.isDragging) {
                // 可以在這裡實時更新顯示時間，讓用戶看到拖動到的時間點
                // 但不改變實際的 currentTime，避免影響播放邏輯

            }
        },

        // 滑動條拖動過程中的處理 (@changing 事件)
        onSliderChanging(value) {
            // 第一次觸發 changing 事件時，暫停播放並標記為拖動狀態
            if (!this.isDragging) {
                if (this.isPlaying) {
                    this.pauseAudio();

                }
                this.isDragging = true;
            }

            // 更新滑動條的值，但不改變實際播放位置
            this.sliderValue = value;

        },

        // 滑動條拖動結束的處理 (@change 事件)
        onSliderChange(value) {


            // 如果不是拖動狀態（即單點），需要先暫停播放
            if (!this.isDragging && this.isPlaying) {
                this.pauseAudio();

            }

            // 重置拖動狀態
            this.isDragging = false;
            this.sliderValue = value;

            // 跳轉到指定位置，但不自動恢復播放
            this.seekToTime(value, false);


        },

        // 跳轉到指定時間
        seekToTime(targetTime, shouldResume = false) {
            if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
                return;
            }

            // 確保目標時間在有效範圍內
            targetTime = Math.max(0, Math.min(targetTime, this.totalTime));

            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;

                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;
            }

            if (targetAudioIndex === -1) {
                console.error('無法找到目標音頻片段');
                return;
            }

            // 如果需要切換到不同的音頻片段
            if (targetAudioIndex !== this.currentAudioIndex) {
                this.currentAudioIndex = targetAudioIndex;
                // 使用audioManager播放指定音频并跳转到指定时间
                const audioData = this.currentPageAudios[targetAudioIndex];
                audioManager.playAudio(audioData.url, 'sentence', { playbackRate: this.playSpeed, startTime: targetAudioTime });
                this.currentTime = targetTime;

                if (shouldResume) {
                    this.isPlaying = true;
                } else {
                    // 如果不需要恢复播放，则暂停
                    audioManager.pause();
                    this.isPlaying = false;
                }
            } else {
                // 在當前音頻片段內跳轉
                audioManager.seekTo(targetAudioTime);
                this.currentTime = targetTime;

                if (shouldResume) {
                    audioManager.resume();
                    this.isPlaying = true;
                }
            }
        },

        // 等待音頻實例準備就緒
        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('📱 系统信息:', {
                    platform: systemInfo.platform,
                    system: systemInfo.system,
                    SDKVersion: systemInfo.SDKVersion,
                    brand: systemInfo.brand,
                    model: systemInfo.model
                });

                // 简化检测逻辑：默认启用倍速功能
                // 只在极少数明确不支持的情况下禁用
                this.playbackRateSupported = true;

                // 仅对非常老的Android版本进行限制（Android 4.x及以下）
                if (systemInfo.platform === 'android') {
                    const androidVersion = systemInfo.system.match(/Android (\d+)/);
                    if (androidVersion && parseInt(androidVersion[1]) < 5) {
                        this.playbackRateSupported = false;
                        console.log(`⚠️ Android版本过低 (${androidVersion[1]})，禁用倍速功能`);
                        uni.showToast({
                            title: `Android ${androidVersion[1]} 不支持倍速`,
                            icon: 'none',
                            duration: 2000
                        });
                        return;
                    }
                }

                // 显示成功提示
                // uni.showToast({
                //     title: '✅ 倍速功能可用',
                //     icon: 'none',
                //     duration: 1500
                // });

            } catch (error) {
                console.error('💥 检测播放速度支持时出错:', error);
                // 即使出错也默认启用
                this.playbackRateSupported = true;

            }
        },

        // 应用播放速度设置
        applyPlaybackRate(audio) {
            if (!audio) return;


            console.log('📊 当前状态检查:', {
                playbackRateSupported: this.playbackRateSupported,
                期望速度: this.playSpeed + 'x',
                音频当前速度: audio.playbackRate + 'x',
                音频播放状态: this.isPlaying ? '播放中' : '未播放'
            });

            if (this.playbackRateSupported) {
                try {
                    // 多次尝试设置倍速，确保生效
                    const maxAttempts = 3;
                    let attempt = 0;

                    const trySetRate = () => {
                        attempt++;
                        audio.playbackRate = this.playSpeed;

                        setTimeout(() => {
                            const actualRate = audio.playbackRate;
                            const rateDifference = Math.abs(actualRate - this.playSpeed);



                            if (rateDifference >= 0.01 && attempt < maxAttempts) {

                                setTimeout(trySetRate, 100);
                            } else if (rateDifference < 0.01) {

                            } else {

                            }
                        }, 50);
                    };

                    trySetRate();

                } catch (error) {

                }
            } else {

            }
        },

        // 检查播放速度控制支持（简化版本）
        checkPlaybackRateSupport(audio) {

            try {
                // 如果初始检测已经禁用，直接返回
                if (!this.playbackRateSupported) {

                    return;
                }

                console.log('🎧 音频实例信息:', {
                    音频对象存在: !!audio,
                    音频对象类型: typeof audio,
                    音频src: audio ? audio.src : '无'
                });

                // 检测音频实例类型和倍速支持
                let isHTML5Audio = false;
                let supportsPlaybackRate = false;

                if (audio) {
                    // 检查是否为HTML5 Audio包装实例
                    if (audio._nativeAudio && audio._nativeAudio instanceof Audio) {
                        isHTML5Audio = true;
                        supportsPlaybackRate = true;

                    }
                    // 检查是否为原生HTML5 Audio
                    else if (audio instanceof Audio) {
                        isHTML5Audio = true;
                        supportsPlaybackRate = true;

                    }
                    // 检查uni-app音频实例的playbackRate属性
                    else if (typeof audio.playbackRate !== 'undefined') {
                        supportsPlaybackRate = true;

                    } else {

                    }

                    // console.log('🔍 音频实例分析:', {
                    //   是否HTML5Audio: isHTML5Audio,
                    //   支持倍速: supportsPlaybackRate,
                    //   实例类型: audio.constructor?.name || 'unknown',
                    //   playbackRate属性: typeof audio.playbackRate
                    // });

                    // 如果支持倍速，尝试设置当前播放速度
                    if (supportsPlaybackRate) {
                        try {
                            const currentSpeed = this.playSpeed || 1.0;
                            audio.playbackRate = currentSpeed;
                            // console.log(`🔧 设置播放速度为 ${currentSpeed}x`);

                            // 验证设置结果
                            // setTimeout(() => {
                            //   const actualRate = audio.playbackRate;
                            //   console.log('🔍 播放速度验证:', {
                            //     期望值: currentSpeed,
                            //     实际值: actualRate,
                            //     设置成功: Math.abs(actualRate - currentSpeed) < 0.1
                            //   });
                            // }, 50);

                        } catch (error) {

                        }
                    }
                } else {

                }

                // 保持倍速功能启用状态


            } catch (error) {
                console.error('💥 检查播放速度支持时出错:', error);
                // 即使出错也保持启用状态

            }
        },

        // 清理音频缓存
        clearAudioCache() {
            this.audioCache = {};
        },

        // 限制缓存大小，保留最近访问的页面
        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];
                });

            }
        },

        // 自動加載第一頁音頻並播放
        async autoLoadAndPlayFirstPage() {
            try {


                // 確保當前是第一頁且需要加載音頻
                if (this.currentPage === 1 && this.shouldLoadAudio) {


                    // 加載音頻
                    await this.getCurrentPageAudio();

                    // 檢查是否成功加載音頻
                    if (this.currentPageAudios && this.currentPageAudios.length > 0) {

                        // getCurrentPageAudio方法已經處理了第一個音頻的播放，這裡不需要再次調用playAudio
                    } else {

                    }
                } else {

                }
            } catch (error) {
                console.error('自動加載和播放音頻失敗:', error);
            }
        },

        // 清理音频资源
        destroyAudio() {
            // 使用audioManager停止当前音频
            audioManager.stopCurrentAudio();

            // 重置所有播放状态
            this.isPlaying = false;
            this.currentTime = 0;
            this.sliderValue = 0;
            this.currentHighlightIndex = -1;

            // 清理音频缓存
            this.clearAudioCache();

            // 取消正在进行的请求
            this.shouldCancelRequest = true;

            // 重置加载状态
            this.isAudioLoading = false;
            this.isVoiceChanging = false;
            this.audioLoadFailed = false;
        },

        // 停止单词音频播放（全局音频管理）
        stopWordAudio() {
            // 使用audioManager停止当前音频（如果是单词音频）
            if (audioManager.currentAudioType === 'word') {
                audioManager.stopCurrentAudio();
            }
        },

        // 课程切换时的完整数据清理（保留音色设置）
        resetForCourseChange() {
            // 停止当前音频播放
            if (this.isPlaying) {
                this.pauseAudio();
            }

            // 使用audioManager停止当前音频
            audioManager.stopCurrentAudio();

            // 清空所有音频相关数据
            this.currentPageAudios = [];
            this.currentAudioIndex = 0;
            this.currentTime = 0;
            this.totalTime = 0;
            this.sliderValue = 0;
            this.isDragging = false;
            this.isPlaying = false;
            this.hasAudioData = false;
            this.isAudioLoading = false;
            this.audioLoadFailed = false;
            this.currentHighlightIndex = -1;

            // 3. 清空音频缓存（因为课程变了，所有缓存都无效）
            this.clearAudioCache();

            // 4. 重置预加载状态
            this.isPreloading = false;
            this.preloadProgress = 0;
            this.preloadedPages = new Set();

            // 5. 重置播放控制状态
            this.loopMode = 'sequential';
            this.playSpeed = 1.0;
            this.playbackRateSupported = true;

            // 6. 重置音色切换状态
            this.isVoiceChanging = false;

            // 7. 设置课程切换状态
            this.isJustSwitchedCourse = true;

            // 注意：不清空 voiceId，保留用户的音色选择



            // 7. 通知父组件状态变化
            this.$emit('audio-state-change', {
                hasAudioData: false,
                isLoading: false,
                audioLoadFailed: false,
                currentHighlightIndex: -1
            });
        },

        // 自动加载并播放音频（课程切换后调用）
        async autoLoadAndPlayAudio() {


            // 检查是否需要加载音频
            if (!this.shouldLoadAudio) {

                return;
            }

            // 检查必要条件
            if (!this.courseId || !this.currentPage) {

                return;
            }

            try {
                // 设置加载状态
                this.isAudioLoading = true;

                // 开始加载音频
                await this.getCurrentPageAudio();


            } catch (error) {
                console.error('自动加载音频失败:', error);
                this.isAudioLoading = false;
            }
        },

        // 暂停音频（页面隐藏时调用）
        pauseOnHide() {
            this.pauseAudio();
        },

        // 处理音色切换（由父组件调用）
        async handleVoiceChange(newVoiceId, options = {}) {
            console.log(`🎵 handleVoiceChange: 开始音色切换 ${this.localVoiceId} -> ${newVoiceId}`);
            console.log(`🎵 handleVoiceChange: 当前页面=${this.currentPage}, 课程ID=${this.courseId}, bookPages长度=${this.bookPages.length}`);

            // 检查是否正在加载音频，如果是则阻止音色切换
            if (this.isAudioLoading) {
                console.log(`🎵 handleVoiceChange: 音频正在加载中，阻止音色切换`);
                throw new Error('音频加载中，请稍后再试');
            }

            const { preloadAllPages = true } = options; // 默认预加载所有页面

            try {
                // 1. 停止当前播放的音频
                if (this.isPlaying) {
                    this.pauseAudio();
                }

                // 2. 销毁当前音频实例
                audioManager.stopCurrentAudio();
                this.currentAudio = null;

                // 3. 清理所有音频缓存（因为音色变了，所有缓存都无效）
                this.clearAudioCache();


                // 4. 重置音频状态
                this.currentPageAudios = [];
                this.currentAudioIndex = 0;
                this.isPlaying = false;
                this.currentTime = 0;
                this.totalTime = 0;
                this.hasAudioData = false;
                this.audioLoadFailed = false;
                this.currentHighlightIndex = -1;

                // 5. 设置音色切换加载状态
                this.isVoiceChanging = true;
                this.isAudioLoading = true;

                // 6. 更新本地音色ID（不直接修改prop）
                this.localVoiceId = newVoiceId;

                // 7. 通知父组件开始加载状态
                this.$emit('audio-state-change', {
                    hasAudioData: false,
                    isLoading: true,
                    currentHighlightIndex: -1
                });

                // 8. 如果当前页面需要加载音频，优先获取当前页面音频
                if (this.shouldLoadAudio && this.courseId && this.currentPage) {
                    console.log(`🎵 handleVoiceChange: 开始获取当前页面音频，页面=${this.currentPage}, 课程=${this.courseId}`);
                    await this.getCurrentPageAudio();
                    console.log(`🎵 handleVoiceChange: 当前页面音频获取完成，hasAudioData=${this.hasAudioData}`);
                } else {
                    // 如果不需要加载音频，直接清除加载状态
                    console.log(`🎵 handleVoiceChange: 不需要加载音频，shouldLoadAudio=${this.shouldLoadAudio}, courseId=${this.courseId}, currentPage=${this.currentPage}`);
                    this.isAudioLoading = false;
                }

                // 9. 清除音色切换加载状态
                this.isVoiceChanging = false;

                // 10. 如果需要预加载其他页面，启动预加载
                if (preloadAllPages) {

                    // 延迟启动预加载，确保当前页面音频加载完成
                    setTimeout(() => {
                        this.preloadAllPagesAudio();
                    }, 1000);
                }

                // 11. 通知父组件最终状态
                this.$emit('audio-state-change', {
                    hasAudioData: this.hasAudioData,
                    isLoading: this.isAudioLoading,
                    currentHighlightIndex: this.currentHighlightIndex
                });

                // 12. 通知父组件音色切换完成
                this.$emit('voice-change-complete', {
                    voiceId: newVoiceId,
                    hasAudioData: this.hasAudioData,
                    preloadAllPages: preloadAllPages
                });


            } catch (error) {
                console.error('🎵 AudioControls: 音色切换处理失败:', error);
                // 清除加载状态
                this.isVoiceChanging = false;
                this.isAudioLoading = false;

                // 通知父组件状态变化
                this.$emit('audio-state-change', {
                    hasAudioData: false,
                    isLoading: false,
                    currentHighlightIndex: -1
                });

                this.$emit('voice-change-error', error);
            }
        },

        // 预加载所有页面音频（音色切换时使用）
        async preloadAllPagesAudio() {
            if (this.isPreloading) {

                return;
            }

            try {

                this.isPreloading = true;
                this.preloadProgress = 0;

                // 获取所有文本页面
                const allTextPages = [];
                for (let i = 0; i < this.bookPages.length; i++) {
                    const pageData = this.bookPages[i];
                    const hasTextContent = pageData && pageData.some(item => item.type === 'text');

                    if (hasTextContent && i !== this.currentPage - 1) { // 排除当前页面，因为已经加载过了
                        allTextPages.push({
                            pageIndex: i + 1,
                            pageData: pageData
                        });
                    }
                }

                if (allTextPages.length === 0) {

                    this.isPreloading = false;
                    return;
                }



                // 逐页预加载音频
                for (let i = 0; i < allTextPages.length; i++) {
                    const pageInfo = allTextPages[i];

                    try {
                        console.log(`预加载第 ${pageInfo.pageIndex} 页音频 (${i + 1}/${allTextPages.length})`);
                        await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);

                        // 更新进度
                        this.preloadProgress = Math.round(((i + 1) / allTextPages.length) * 100);


                        // 添加小延迟，避免请求过于频繁
                        if (i < allTextPages.length - 1) {
                            await new Promise(resolve => setTimeout(resolve, 100));
                        }
                    } catch (error) {
                        console.error(`预加载第 ${pageInfo.pageIndex} 页音频失败:`, error);
                        // 继续预加载其他页面，不因单页失败而中断
                    }
                }


            } catch (error) {
                console.error('预加载所有页面音频失败:', error);
            } finally {
                this.isPreloading = false;
                this.preloadProgress = 100;

            }
        },

        // 开始预加载音频（由父组件调用）
        async startPreloadAudio() {
            if (this.isPreloading) {

                return;
            }

            try {

                this.isPreloading = true;
                this.preloadProgress = 0;

                // 获取需要预加载的页面列表（当前页面后的几页）
                const preloadPages = this.getPreloadPageList();

                if (preloadPages.length === 0) {

                    this.isPreloading = false;
                    return;
                }



                // 逐个预加载页面音频
                for (let i = 0; i < preloadPages.length; i++) {
                    const pageInfo = preloadPages[i];

                    try {

                        await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);

                        // 更新预加载进度
                        this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);


                        // 延迟一下，避免请求过于频繁
                        await new Promise(resolve => setTimeout(resolve, 150));

                    } catch (error) {
                        console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
                        // 继续预加载其他页面
                    }
                }



            } catch (error) {
                console.error('预加载音频失败:', error);
            } finally {
                this.isPreloading = false;
                this.preloadProgress = 100;
            }
        },

        // 获取需要预加载的页面列表
        getPreloadPageList() {
            const preloadPages = [];
            const maxPreloadPages = 3; // 优化：最多预加载3页，减少服务器压力

            // 从当前页面的下一页开始预加载
            for (let i = this.currentPage; i < Math.min(this.currentPage + maxPreloadPages, this.bookPages.length); i++) {
                const pageData = this.bookPages[i];

                // 检查页面是否需要会员且用户非会员，如果是则跳过
                const pageRequiresMember = this.pagePay[i] === 'Y';
                // 免费用户不受会员限制
                const isFreeUser = this.userInfo && this.userInfo.freeUser === 'Y';
                if (pageRequiresMember && !this.isMember && !isFreeUser) {

                    continue;
                }

                // 检查页面是否有文本内容且未缓存
                if (pageData && pageData.length > 0) {
                    const hasTextContent = pageData.some(item => item.type === 'text' && item.content);
                    const cacheKey = generateCacheKey(this.courseId, i + 1, this.localVoiceId);
                    const isAlreadyCached = this.audioCache[cacheKey];

                    if (hasTextContent && !isAlreadyCached) {
                        preloadPages.push({
                            pageIndex: i,
                            pageData: pageData
                        });
                    }
                }
            }

            return preloadPages;
        },

        // 预加载单个页面的音频
        async preloadPageAudio(pageIndex, pageData) {
            const cacheKey = generateCacheKey(this.courseId, pageIndex + 1, this.localVoiceId);

            // 检查是否已经缓存
            if (this.audioCache[cacheKey]) {

                return;
            }

            // 收集页面中的文本内容
            const textItems = pageData.filter(item => item.type === 'text' && item.content);

            if (textItems.length === 0) {

                return;
            }



            const audioArray = [];
            let totalDuration = 0;

            // 逐个处理文本项，支持长文本分割
            for (let i = 0; i < textItems.length; i++) {
                const item = textItems[i];

                try {


                    // 使用分批次请求音频
                    const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);

                    // 检查请求是否被取消
                    if (batchResult === null) {

                        return;
                    }

                    if (batchResult.audioSegments.length > 0) {
                        // 将所有音频段添加到音频数组
                        for (const segment of batchResult.audioSegments) {
                            if (!segment.error) {
                                audioArray.push({
                                    isLead: item.isLead,
                                    url: segment.url,
                                    text: segment.text,
                                    duration: segment.duration || 0,
                                    startIndex: segment.startIndex,
                                    endIndex: segment.endIndex,
                                    segmentIndex: segment.segmentIndex,
                                    originalTextIndex: i, // 标记属于哪个原始文本项
                                    isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
                                });

                                totalDuration += segment.duration || 0;
                            }
                        }

                        console.log(`第${pageIndex + 1}页第${i + 1}个文本项预加载完成，获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
                    } else {
                        console.error(`第${pageIndex + 1}页第${i + 1}个文本项音频预加载全部失败`);
                    }
                } catch (error) {
                    console.error(`第${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);
                }

                // 每个文本项处理之间间隔150ms，避免请求过于频繁
                if (i < textItems.length - 1) {
                    await new Promise(resolve => setTimeout(resolve, 150));
                }
            }

            // 保存到缓存
            if (audioArray.length > 0) {
                this.audioCache[cacheKey] = {
                    audios: audioArray,
                    totalDuration: totalDuration,
                    voiceId: this.localVoiceId, // 保存音色ID用于验证
                    pageNumber: pageIndex + 1, // 保存页面号码用于验证
                    timestamp: Date.now() // 保存时间戳
                };



                // 限制缓存大小
                this.limitCacheSize(1000);
            }
        },

        // 检查指定页面是否有音频缓存
        checkAudioCache(pageNumber) {
            const cacheKey = generateCacheKey(this.courseId, pageNumber, this.localVoiceId);
            const cachedData = this.audioCache[cacheKey];

            if (!validateCacheData(cachedData, pageNumber)) {
                return false;
            }
            return true;


            return false;
        },

        // 自动播放已缓存的音频
        async autoPlayCachedAudio() {
            try {
                // 如果正在音色切换中，不自动播放
                if (this.isVoiceChanging) {

                    return;
                }

                const cacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
                const cachedData = this.audioCache[cacheKey];

                if (!validateCacheData(cachedData, this.currentPage)) {
                    return;
                }



                // 停止当前播放的音频
                this.pauseAudio();

                // 设置当前页面的音频数据
                this.currentPageAudios = cachedData.audios;
                this.totalDuration = cachedData.totalDuration;

                // 查找第一个非导语音频
                const firstNonLeadIndex = this.findFirstNonLeadAudio();
                this.currentAudioIndex = firstNonLeadIndex;
                this.currentTime = 0;
                this.isPlaying = false;

                console.log(`🎵 autoPlayCachedAudio: 设置起始索引为${this.currentAudioIndex}（跳过导语）`);

                // 如果所有音频都是导语，不播放
                if (firstNonLeadIndex < 0) {
                    console.log('🎵 autoPlayCachedAudio: 所有音频都是导语，不播放');
                    return;
                }

                // 延迟一下再开始播放，确保UI更新完成
                setTimeout(() => {
                    this.playAudio();
                }, 300);

            } catch (error) {
                console.error('自动播放缓存音频失败:', error);
            }
        },

        // 清理audioManager事件监听
        removeAudioManagerListeners() {
            if (this.audioManagerListeners) {
                audioManager.off('play', this.audioManagerListeners.onPlay);
                audioManager.off('pause', this.audioManagerListeners.onPause);
                audioManager.off('ended', this.audioManagerListeners.onEnded);
                audioManager.off('error', this.audioManagerListeners.onError);
                audioManager.off('timeupdate', this.audioManagerListeners.onTimeupdate);
                this.audioManagerListeners = null;
            }
        },

        // 初始化audioManager事件监听
        initAudioManagerListeners() {
            // 先清理已有的监听器
            this.removeAudioManagerListeners();

            // 创建监听器对象，保存引用以便后续清理
            this.audioManagerListeners = {
                onPlay: (data) => {
                    if (data && data.audioType === 'sentence') {
                        this.isPlaying = true;
                        console.log('🎵 句子音频开始播放');
                        // 播放开始时立即更新高亮
                        this.updateHighlightIndex();
                    }
                },

                onPause: (data) => {
                    if (data && data.audioType === 'sentence') {
                        this.isPlaying = false;
                        console.log('⏸️ 句子音频暂停');
                    }
                },

                onEnded: (data) => {
                    if (data && data.audioType === 'sentence') {
                        this.isPlaying = false;
                        console.log('✅ 句子音频播放结束');
                        // 自动播放下一个音频
                        this.onAudioEnded();
                    }
                },

                onError: (data) => {
                    if (data && data.audioType === 'sentence') {
                        this.isPlaying = false;
                        console.error('❌ 句子音频播放错误:', data.error);
                        uni.showToast({
                            title: '音频播放失败',
                            icon: 'none'
                        });
                    }
                },

                onTimeupdate: (data) => {
                    if (data.audioType === 'sentence') {
                        // 计算总时间（包括之前音频的时长）
                        let totalTime = 0;
                        for (let i = 0; i < this.currentAudioIndex; i++) {
                            totalTime += this.currentPageAudios[i].duration;
                        }
                        totalTime += data.currentTime;

                        this.currentTime = totalTime;

                        // 如果不是正在拖動滑動條，則同步更新滑動條的值
                        if (!this.isDragging) {
                            this.sliderValue = this.currentTime;
                        }
                    }
                }
            };

            // 绑定事件监听器
            audioManager.on('play', this.audioManagerListeners.onPlay);
            audioManager.on('pause', this.audioManagerListeners.onPause);
            audioManager.on('ended', this.audioManagerListeners.onEnded);
            audioManager.on('error', this.audioManagerListeners.onError);
            audioManager.on('timeupdate', this.audioManagerListeners.onTimeupdate);
        }
    },
    mounted() {
        console.log('⚙️ 初始倍速配置:', {
            默認播放速度: this.playSpeed + 'x',
            可選速度選項: this.speedOptions.map(s => s + 'x'),
            初始支持狀態: this.playbackRateSupported
        });

        // 初始檢測播放速度支持
        this.checkInitialPlaybackRateSupport();

        // 从audioManager获取全局语速设置，如果存在则同步到本地
        const globalPlaybackRate = audioManager.getGlobalPlaybackRate();
        if (globalPlaybackRate && globalPlaybackRate !== this.playSpeed) {
            this.playSpeed = globalPlaybackRate;
        } else {
            // 同步初始语速设置到audioManager
            audioManager.setGlobalPlaybackRate(this.playSpeed);
        }

        // 初始化audioManager事件监听
        this.initAudioManagerListeners();
    },

    // 自动播放预加载的音频
    async autoPlayPreloadedAudio() {
        try {
            // 如果正在音色切换中，不自动播放
            if (this.isVoiceChanging) {

                return;
            }

            // 检查是否有音频数据
            if (!this.hasAudioData || this.currentPageAudios.length === 0) {

                return;
            }

            // 查找第一个非导语音频
            const firstNonLeadIndex = this.findFirstNonLeadAudio();
            if (firstNonLeadIndex < 0 || firstNonLeadIndex >= this.currentPageAudios.length) {
                console.warn('🎵 autoPlayPreloadedAudio: 找不到有效的非导语音频');
                return;
            }

            const firstAudio = this.currentPageAudios[firstNonLeadIndex];
            if (!firstAudio || !firstAudio.url) {
                console.warn('🎵 autoPlayPreloadedAudio: 第一个非导语音频数据无效');
                return;
            }

            // 设置播放状态（跳过导语）
            this.currentAudioIndex = firstNonLeadIndex;
            this.currentTime = 0;
            this.sliderValue = 0;
            
            // 设置高亮索引
            const highlightIndex = firstAudio.originalTextIndex !== undefined ? firstAudio.originalTextIndex : firstNonLeadIndex;
            this.currentHighlightIndex = highlightIndex;

            console.log(`🎵 autoPlayPreloadedAudio: 播放第一个非导语音频，索引=${firstNonLeadIndex}, isLead=${firstAudio.isLead}`);

            // 使用audioManager播放第一个非导语音频
            audioManager.playAudio(firstAudio.url, 'sentence', { playbackRate: this.playSpeed });
            this.isPlaying = true;

        } catch (error) {
            console.error('自动播放预加载音频失败:', error);
        }
    },

    beforeDestroy() {
        // 清理页面切换防抖定时器
        if (this.pageChangeTimer) {
            clearTimeout(this.pageChangeTimer);
            this.pageChangeTimer = null;
        }

        // 清理音频资源
        this.destroyAudio();

        // 清理audioManager事件监听器
        this.removeAudioManagerListeners();
    }
}
</script>

<style lang="scss" scoped>
/* 音频控制栏样式 */
.audio-controls-wrapper {
    position: relative;
    z-index: 10;
}

.audio-controls {
    background: #fff;
    padding: 20rpx 40rpx;
    border-bottom: 1rpx solid #eee;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 10;

    &.audio-hidden {
        transform: translateY(100%);
    }
}

.audio-time {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.time-text {
    font-size: 28rpx;
    color: #999;
    min-width: 80rpx;
}

.progress-container {
    flex: 1;
    margin: 0 20rpx;
}

.audio-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.control-btn {
    display: flex;
    align-items: center;
    padding: 10rpx;
    gap: 8rpx;
}

.control-btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.control-text {
    font-size: 28rpx;
    color: #4A4A4A;
}

.play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx;
}

/* 音频加载状态样式 */
.audio-loading-container {
    background: #fff;
    padding: 40rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    position: relative;
    z-index: 10;
}

/* 加载指示器样式 */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    padding: 10rpx 20rpx;
    background: rgba(6, 218, 220, 0.1);
    border-radius: 20rpx;
    margin-bottom: 10rpx;
}

.loading-indicator-text {
    font-size: 24rpx;
    color: #06DADC;
}

.loading-text {
    font-size: 28rpx;
    color: #999;
}

/* 音色切换加载状态特殊样式 */
.voice-changing {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe7d9 100%);
    border: 2rpx solid #ff6b35;
}

.voice-changing-text {
    color: #ff6b35;
    font-weight: 500;
}

/* 预加载状态特殊样式 */
.preloading {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2rpx solid #06DADC;
}

.preloading .loading-text {
    color: #06DADC;
    font-weight: 500;
}

/* 课程切换状态特殊样式 */
.course-switching {
    background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
    border: 2rpx solid #52c41a;
}

.course-switching .loading-text {
    color: #52c41a;
    font-weight: 500;
}

/* 获取音频按钮样式 */
.audio-get-button-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30rpx;
    border-radius: 20rpx;
    border: 2rpx solid #E5E5E5;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.get-audio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    padding: 20rpx 40rpx;
    background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
    border-radius: 50rpx;
    box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
    transition: all 0.3s ease;
}

.get-audio-btn:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
}

/* 音频预加载提示样式 */
.audio-preloaded-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.preloaded-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    padding: 20rpx 40rpx;
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    border-radius: 50rpx;
    box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);
    transition: all 0.3s ease;
}

.preloaded-text {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
}

/* 音频获取失败样式 */
.audio-failed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    gap: 20rpx;
}

.failed-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    padding: 20rpx 40rpx;
    background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
    border-radius: 50rpx;
    box-shadow: 0 8rpx 20rpx rgba(255, 77, 79, 0.3);
}

.failed-text {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
}

.retry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    padding: 16rpx 32rpx;
    background: linear-gradient(135deg, #06DADC 0%, #05B8BA 100%);
    border-radius: 40rpx;
    box-shadow: 0 6rpx 16rpx rgba(6, 218, 220, 0.3);
    transition: all 0.3s ease;
}

.retry-btn:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(6, 218, 220, 0.4);
}

.retry-text {
    color: #ffffff;
    font-size: 26rpx;
    font-weight: 500;
}

.get-audio-text {
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: 500;
}

/* 会员限制容器样式 */
.member-restricted-container {
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
</style>