perf(StudyCoursePage): 优化滚动和标签页切换的性能

引入防抖函数减少滚动事件触发频率，优化handleScroll函数的逻辑，增加缓冲区域判断。同时，移除handleTabChange函数中的setTimeout，立即更新activeTab的值，提升用户体验。

@@ -217,8 +217,19 @@ onMounted(async () => {
     }, 500);
     }, 500);
 });
 });
 
 
+// 防抖函数
+const debounce = (fn, delay) => {
+    let timer = null;
+    return function (...args) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn.apply(this, args);
+        }, delay);
+    };
+};
+
 // 修改handleScroll函数
 // 修改handleScroll函数
-const handleScroll = () => {
+const handleScroll = debounce(() => {
     const detailElement = document.getElementById('detail');
     const detailElement = document.getElementById('detail');
     const catalogElement = document.getElementById('catalog');
     const catalogElement = document.getElementById('catalog');
     const interactionElement = document.getElementById('interaction');
     const interactionElement = document.getElementById('interaction');
@@ -229,17 +240,31 @@ const handleScroll = () => {
     isTabFixed.value = currentScrollY >= tabOriginalTop.value;
     isTabFixed.value = currentScrollY >= tabOriginalTop.value;
 
 
     const scrollTop = window.scrollY;
     const scrollTop = window.scrollY;
-    const catalogOffset = catalogElement.offsetTop - (isTabFixed.value ? tabElement.offsetHeight : 0);
-    const interactionOffset = interactionElement.offsetTop - (isTabFixed.value ? tabElement.offsetHeight : 0);
+    const tabHeight = tabElement.offsetHeight;
+    const buffer = 50; // 缓冲区域
+
+    // 计算每个区域的位置，考虑固定标签页的高度
+    const detailTop = detailElement.offsetTop - tabHeight - buffer;
+    const catalogTop = catalogElement.offsetTop - tabHeight - buffer;
+    const interactionTop = interactionElement.offsetTop - tabHeight - buffer;
 
 
-    if (scrollTop >= interactionOffset) {
+    // 获取页面总高度和视口高度
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - buffer;
+
+    // 判断当前滚动位置所在区域
+    if (scrollTop <= detailTop) {
+        activeTab.value = 'detail';
+    } else if (isAtBottom || scrollTop >= interactionTop) {
         activeTab.value = 'interaction';
         activeTab.value = 'interaction';
-    } else if (scrollTop >= catalogOffset) {
+    } else if (scrollTop >= catalogTop && scrollTop < interactionTop) {
         activeTab.value = 'catalog';
         activeTab.value = 'catalog';
-    } else {
+    } else if (scrollTop >= detailTop && scrollTop < catalogTop) {
         activeTab.value = 'detail';
         activeTab.value = 'detail';
     }
     }
-};
+}, 100);
+
 
 
 // 处理标签页切换
 // 处理标签页切换
 // 在script setup中添加
 // 在script setup中添加
@@ -253,19 +278,18 @@ const getTransitionTiming = (current, previous) => {
 // 修改handleTabChange函数
 // 修改handleTabChange函数
 const handleTabChange = (name) => {
 const handleTabChange = (name) => {
     previousTab.value = activeTab.value;
     previousTab.value = activeTab.value;
+    activeTab.value = name; // 立即更新activeTab的值
     let offset = 100; // 调整偏移量, 配合目录的高度
     let offset = 100; // 调整偏移量, 配合目录的高度
-    setTimeout(() => {
-        nextTick(() => {
-            const element = document.getElementById(name);
-            if (element) {
-                const topOffset = element.offsetTop - offset - parseInt(topWrapperHeight.value);
-                window.scrollTo({
-                    top: topOffset,
-                    behavior: 'smooth'
-                });
-            }
-        });
-    }, 100);
+    nextTick(() => {
+        const element = document.getElementById(name);
+        if (element) {
+            const topOffset = element.offsetTop - offset - parseInt(topWrapperHeight.value);
+            window.scrollTo({
+                top: topOffset,
+                behavior: 'smooth'
+            });
+        }
+    });
 };
 };
 
 
 // 课程数据
 // 课程数据