fix(音频控制): 修复音频加载过程中参数不一致问题

在音频加载前对关键参数做快照，确保整个流程参数一致
添加元素位置缓存优化滚动性能
修复duration未定义时的默认值处理

subPages/home/AudioControls.vue

@@ -581,7 +581,12 @@ export default {
             console.log('this.audioCache:', this.audioCache);
 
             // 检查缓存中是否已有当前页面的音频数据
-            const cacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
+            // 在加载开始前对关键参数做快照，确保整个流程参数一致
+            const loadCourseId = this.courseId;
+            const loadPage = this.currentPage;
+            const loadVoiceId = this.localVoiceId;
+
+            const cacheKey = generateCacheKey(loadCourseId, loadPage, loadVoiceId);
             if (this.audioCache[cacheKey]) {
 
                 // 从缓存加载音频数据
@@ -633,15 +638,15 @@ export default {
 
             try {
                 // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
-                const currentPageData = this.bookPages[this.currentPage - 1];
-                console.log(`🎵 getCurrentPageAudio: 当前页面=${this.currentPage}, 音色ID=${this.localVoiceId}, 课程ID=${this.courseId}`);
+                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', this.currentPage);
+                    this.$emit('page-data-needed', loadPage);
 
                     // 设置加载失败状态
                     this.isAudioLoading = false;
@@ -681,7 +686,7 @@ export default {
 
                                 // 使用分批次请求音频
 
-                                const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
+                                const batchResult = await this.requestAudioInBatches(item.content, loadVoiceId);
 
                                 // 检查请求是否被取消
                                 if (batchResult === null) {
@@ -703,7 +708,7 @@ export default {
                                                 isLead : item.isLead,
                                                 url: segment.url,
                                                 text: segment.text,
-                                                duration: segment.duration,
+                                                duration: segment.duration || 0,
                                                 startIndex: segment.startIndex,
                                                 endIndex: segment.endIndex,
                                                 segmentIndex: segment.segmentIndex,
@@ -759,19 +764,17 @@ export default {
                             }
                         }
 
-
-
                         // 如果有音频，重新计算精确的总时长
                         if (this.currentPageAudios.length > 0) {
                             await this.calculateTotalDuration();
 
                             // 将音频数据保存到缓存中
-                            const cacheKey = generateCacheKey(this.courseId, this.currentPage, this.localVoiceId);
+                            const cacheKey = generateCacheKey(loadCourseId, loadPage, loadVoiceId);
                             this.audioCache[cacheKey] = {
                                 audios: [...this.currentPageAudios], // 深拷贝音频数组
                                 totalDuration: this.totalTime,
-                                voiceId: this.localVoiceId, // 保存音色ID用于验证
-                                pageNumber: this.currentPage, // 保存页面号码用于验证
+                                voiceId: loadVoiceId, // 保存音色ID用于验证
+                                pageNumber: loadPage, // 保存页面号码用于验证
                                 timestamp: Date.now() // 保存时间戳
                             };
 
@@ -1620,7 +1623,7 @@ export default {
             const highlightData = {
                 highlightIndex: currentAudioData.originalTextIndex !== undefined ? currentAudioData.originalTextIndex : highlightIndex,
                 isSegmented: currentAudioData.isSegmented || false,
-                segmentIndex: currentAudioData.segmentIndex || 0,
+                segmentIndex: currentAudioData.segmentIndex,
                 startIndex: currentAudioData.startIndex || 0,
                 endIndex: currentAudioData.endIndex || 0,
                 currentText: currentAudioData.text || ''
@@ -2244,7 +2247,6 @@ export default {
         // 清理音频缓存
         clearAudioCache() {
             this.audioCache = {};
-
         },
 
         // 限制缓存大小，保留最近访问的页面
@@ -2717,7 +2719,7 @@ export default {
                                     isLead: item.isLead,
                                     url: segment.url,
                                     text: segment.text,
-                                    duration: segment.duration,
+                                    duration: segment.duration || 0,
                                     startIndex: segment.startIndex,
                                     endIndex: segment.endIndex,
                                     segmentIndex: segment.segmentIndex,
@@ -2725,7 +2727,7 @@ export default {
                                     isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
                                 });
 
-                                totalDuration += segment.duration;
+                                totalDuration += segment.duration || 0;
                             }
                         }
 

subPages/home/book.vue

@@ -57,6 +57,7 @@
                                     'lead-text': isCardTextHighlighted(page, itemIndex),
                                     'introduction-text' : item.isLead,
                                 }"
+                                :id="`text-${itemIndex}`"
                                     v-else-if="item && item.type === 'text' && item.content"
                                     @click.stop="handleTextClick(item.content, item, index)">
                                     <text v-for="(segment, segmentIndex) in processChineseText(item.content)"
@@ -211,6 +212,8 @@ export default {
             pageWords: [],
             // 存储每个页面的付费状态
             pagePay: [],
+
+            elementPositionsCache: {}, // 缓存每个页面的元素位置信息
         }
     },
     onShow() {
@@ -519,19 +522,6 @@ export default {
             });
         },
 
-        // 处理音频切换时的自动滚动
-        // onScrollToText(refName) {
-        //   try {
-        //     console.log('🎯 onScrollToText 被调用:', refName);
-        //     
-        //     // 调用scrollTo插件
-        //     this.$scrollTo(refName);
-        //     
-        //   } catch (error) {
-        //     console.error('❌ onScrollToText 执行失败:', error);
-        //   }
-        // },
-
         // 处理文本点击事件
         handleTextClick(textContent, item, pageIndex) {
 
@@ -724,7 +714,7 @@ export default {
             
             // 检查是否应该阻止自动滚动（用户正在手动操作）
             if (this.shouldPreventAutoScroll()) {
-                console.log('🚫 用户正在手动滚动，跳过自动滚动到文本');
+                // console.log('🚫 用户正在手动滚动，跳过自动滚动到文本');
                 return;
             }
 
@@ -736,7 +726,7 @@ export default {
             this.scrollDebounceTimer = setTimeout(() => {
                 // 再次检查是否应该阻止自动滚动
                 if (this.shouldPreventAutoScroll()) {
-                    console.log('🚫 防抖延迟后检测到用户手动滚动，跳过自动滚动到文本');
+                    // console.log('🚫 防抖延迟后检测到用户手动滚动，跳过自动滚动到文本');
                     return;
                 }
                 this.performScrollToText(scrollData);
@@ -747,7 +737,7 @@ export default {
         performScrollToText(scrollData) {
             // 最终检查：如果用户正在手动操作，直接返回
             if (this.shouldPreventAutoScroll()) {
-                console.log('🚫 执行滚动前检测到用户手动操作，取消自动滚动');
+                // console.log('🚫 执行滚动前检测到用户手动操作，取消自动滚动');
                 return;
             }
 
@@ -845,13 +835,13 @@ export default {
                         }
                     } else {
                         // 精确计算失败，使用原有的查询方法作为备用
-                        console.log('🔄 精确计算失败，使用备用查询方法');
-                        this.fallbackScrollToText(selector, resetScrollingState, safetyTimeout);
+                        console.error('🔄 精确计算失败，使用备用查询方法');
+                        //this.fallbackScrollToText(selector, resetScrollingState, safetyTimeout);
                     }
                 } catch (error) {
                     console.error('❌ 精确滚动计算失败:', error);
                     // 使用原有的查询方法作为备用
-                    this.fallbackScrollToText(selector, resetScrollingState, safetyTimeout);
+                    //this.fallbackScrollToText(selector, resetScrollingState, safetyTimeout);
                 }
             });
         },
@@ -966,6 +956,13 @@ export default {
         // 获取所有页面元素的位置信息
         async getAllElementPositions() {
             return new Promise((resolve) => {
+
+                // 检查缓存是否存在
+                if (this.elementPositionsCache[this.currentPage - 1]) {
+                    resolve(this.elementPositionsCache[this.currentPage - 1]);
+                    return;
+                }
+
                 const currentPageData = this.bookPages[this.currentPage - 1];
                 if (!currentPageData || !Array.isArray(currentPageData)) {
                     resolve([]);
@@ -993,6 +990,7 @@ export default {
 
                 query.exec((res) => {
                     const containerRect = res[0];
+                    console.log('getAllElementPositions res:', res, this.scrollTops[this.currentPage - 1]);
                     if (!containerRect) {
                         resolve([]);
                         return;
@@ -1004,12 +1002,14 @@ export default {
                         if (item && (item.type === 'text' || item.type === 'image' || item.type === 'video')) {
                             const elementRect = res[resultIndex];
                             if (elementRect) {
+                                let top = elementRect.top - (containerRect.height / 2);
                                 elementPositions.push({
+                                    id : elementRect.id,
                                     index: index,
                                     type: item.type,
-                                    top: elementRect.top - containerRect.top,
+                                    top: top,
                                     height: elementRect.height,
-                                    bottom: elementRect.top - containerRect.top + elementRect.height
+                                    bottom: top + elementRect.height
                                 });
                             }
                             resultIndex++;
@@ -1018,6 +1018,12 @@ export default {
 
                     resolve(elementPositions);
                 });
+            }).then((elementPositions) => {
+                //进行缓存
+                if (elementPositions.length > 0) {
+                    this.elementPositionsCache[this.currentPage - 1] = elementPositions;
+                }
+                return elementPositions;
             });
         },
 
@@ -1098,10 +1104,10 @@ export default {
 
             let targetElementIndex = -1;
             
-            if (scrollData.segmentIndex !== undefined) {
-                // 分段音频情况
-                targetElementIndex = scrollData.segmentIndex;
-            } else if (scrollData.highlightIndex !== undefined) {
+            // if (scrollData.segmentIndex !== undefined) {
+            //     // 分段音频情况
+            //     targetElementIndex = scrollData.segmentIndex;
+            if (scrollData.highlightIndex !== undefined) {
                 // 普通音频情况，需要找到对应的文本元素
                 targetElementIndex = this.findTextItemIndex(scrollData.highlightIndex);
             }
@@ -1114,7 +1120,7 @@ export default {
             const targetElement = elementPositions.find(pos => pos.index === targetElementIndex && pos.type === 'text');
             
             if (!targetElement) {
-                console.warn('未找到目标元素位置信息:', targetElementIndex);
+                console.error('未找到目标元素位置信息:', elementPositions, targetElementIndex);
                 return null;
             }
 
@@ -1859,6 +1865,7 @@ export default {
                                 console.error('课程切换后音频加载失败:', error);
                             }
                         }
+                        this.getAllElementPositions()
                     });
 
                     // 预加载后续几页的内容（异步执行，不阻塞当前页面显示）