feat(首页): 添加轮播滚动监听以同步底部指示器

在首页轮播组件中添加滚动事件监听，当用户手动滑动时同步更新底部指示器位置。通过计算滚动位置与容器宽度的比例确定当前页索引，并确保索引值在有效范围内。

 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-11 17:18:13
+ * @LastEditTime: 2025-12-04 16:15:23
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 美乐爱觉教育首页组件
  *
@@ -642,6 +642,44 @@ onMounted(async () => {
 
   // 获取最新活动（外部接口）
   await fetchExternalActivities()
+
+  // 监听轮播容器的滚动，手动滑动时同步底部指示器
+  if (carouselRef.value) {
+      /**
+       * @description 根据滚动位置同步当前轮播索引
+       * @returns {void}
+       * 注释：通过容器 scrollLeft 与容器宽度计算当前页，向最近页取整。
+       */
+      const syncCurrentSlide = () => {
+          const container = carouselRef.value
+          const total = goodCourses.value.slice(0, 4).length
+          if (!container || total === 0) return
+          const slideWidth = container.offsetWidth
+          if (slideWidth === 0) return
+          const rawIndex = container.scrollLeft / slideWidth
+          const idx = Math.round(rawIndex)
+          const bounded = Math.min(Math.max(idx, 0), total - 1)
+          currentSlide.value = bounded
+      }
+
+      /**
+       * @description 轮播滚动事件处理（被动监听）
+       * @returns {void}
+       * 注释：在用户手动滑动时触发，调用同步函数更新指示器位置。
+       */
+      const handleCarouselScroll = () => {
+          syncCurrentSlide()
+      }
+
+      carouselRef.value.addEventListener('scroll', handleCarouselScroll, { passive: true })
+
+      // 在卸载时移除监听
+      onUnmounted(() => {
+          if (carouselRef.value) {
+              carouselRef.value.removeEventListener('scroll', handleCarouselScroll)
+          }
+      })
+  }
 })
 
 onUnmounted(() => {