refactor(HomePage): 优化首页组件代码结构和注释

重构首页组件代码，添加详细的注释说明，提升代码可读性和可维护性。主要修改包括：
- 添加组件功能模块和状态管理的详细描述
- 为视频播放、轮播图、打卡等功能添加注释
- 优化代码结构，使其更清晰易读

@@ -63,10 +63,6 @@ const videoOptions = computed(() => ({
   ...props.options,
   ...props.options,
 }));
 }));
 
 
-const onPlayerReady = (instance) => {
-  player = instance;
-};
-
 const handleMounted = (payload) => {
 const handleMounted = (payload) => {
   state.value = payload.state;
   state.value = payload.state;
   player.value = payload.player;
   player.value = payload.player;

 <!--
 <!--
  * @Date: 2025-03-20 19:55:21
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 16:17:17
+ * @LastEditTime: 2025-03-24 17:41:55
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @FilePath: /mlaj/src/views/HomePage.vue
- * @Description: 文件描述
+ * @Description: 亲子学院首页组件
+ *
+ * 主要功能模块：
+ * 1. 用户欢迎区：显示用户信息和每日打卡
+ * 2. 夏令营推广：展示特色夏令营活动
+ * 3. 精选课程：轮播展示推荐课程
+ * 4. 内容分类：推荐、直播、精选三个标签页
+ * 5. 视频播放：支持在线视频播放和切换
+ *
+ * 状态管理：
+ * - 用户认证状态：通过useAuth hook管理
+ * - 打卡状态：包括选择的打卡类型和提交状态
+ * - 轮播状态：当前轮播位置和滚动控制
+ * - 视频播放状态：当前播放的视频索引
+ *
+ * 组件依赖：
+ * - AppLayout：页面布局组件
+ * - FrostedGlass：毛玻璃效果容器
+ * - CourseCard：课程卡片组件
+ * - LiveStreamCard：直播卡片组件
+ * - ActivityCard：活动卡片组件
+ * - SummerCampCard：夏令营卡片组件
+ * - VideoPlayer：视频播放器组件
 -->
 -->
+
 <template>
 <template>
   <AppLayout title="亲子学院" :rightContent="rightContent">
   <AppLayout title="亲子学院" :rightContent="rightContent">
     <div class="pb-16 bg-gradient-to-b from-white via-green-50/10 to-blue-50/10">
     <div class="pb-16 bg-gradient-to-b from-white via-green-50/10 to-blue-50/10">
@@ -489,8 +512,11 @@
 </template>
 </template>
 
 
 <script setup lang="jsx">
 <script setup lang="jsx">
+// 导入所需的Vue核心功能和组件
 import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue'
 import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
+
+// 导入布局和UI组件
 import AppLayout from '@/components/layout/AppLayout.vue'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
 import CourseCard from '@/components/ui/CourseCard.vue'
 import CourseCard from '@/components/ui/CourseCard.vue'
@@ -498,43 +524,53 @@ import LiveStreamCard from '@/components/ui/LiveStreamCard.vue'
 import ActivityCard from '@/components/ui/ActivityCard.vue'
 import ActivityCard from '@/components/ui/ActivityCard.vue'
 import SummerCampCard from '@/components/ui/SummerCampCard.vue'
 import SummerCampCard from '@/components/ui/SummerCampCard.vue'
 import VideoPlayer from '@/components/ui/VideoPlayer.vue'
 import VideoPlayer from '@/components/ui/VideoPlayer.vue'
+
+// 导入模拟数据和工具函数
 import { courses, liveStreams, activities, checkInTypes, userRecommendations } from '@/utils/mockData'
 import { courses, liveStreams, activities, checkInTypes, userRecommendations } from '@/utils/mockData'
 import { useTitle } from '@vueuse/core'
 import { useTitle } from '@vueuse/core'
 import { useAuth } from '@/contexts/auth'
 import { useAuth } from '@/contexts/auth'
 import { showToast } from 'vant'
 import { showToast } from 'vant'
 import 'vant/lib/toast/style'
 import 'vant/lib/toast/style'
 
 
-const activeVideoIndex = ref(null);
-const videoPlayerRefs = ref([]);
+// 视频播放状态管理
+const activeVideoIndex = ref(null); // 当前播放的视频索引
+const videoPlayerRefs = ref([]); // 视频播放器组件引用数组
 
 
+// 播放视频处理函数
 const playVideo = (index, videoUrl) => {
 const playVideo = (index, videoUrl) => {
+  // 如果当前有其他视频在播放，先暂停它
   if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
   if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
     videoPlayerRefs.value[activeVideoIndex.value]?.pause();
     videoPlayerRefs.value[activeVideoIndex.value]?.pause();
   }
   }
+  // 更新当前播放的视频索引
   activeVideoIndex.value = index;
   activeVideoIndex.value = index;
 };
 };
 
 
+// 视频播放事件处理
 const handleVideoPlay = (index) => {
 const handleVideoPlay = (index) => {
+  // 确保同一时间只有一个视频在播放
   if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
   if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
     videoPlayerRefs.value[activeVideoIndex.value]?.pause();
     videoPlayerRefs.value[activeVideoIndex.value]?.pause();
   }
   }
 };
 };
 
 
+// 路由相关
 const $route = useRoute()
 const $route = useRoute()
-const $router = useRouter()
-useTitle($route.meta.title)
+useTitle($route.meta.title) // 设置页面标题
 
 
-// 获取认证状态
+// 获取用户认证状态
 const { currentUser } = useAuth()
 const { currentUser } = useAuth()
 
 
-// 响应式状态
-const activeTab = ref('推荐')
-const selectedCheckIn = ref(null)
-const checkInContent = ref('')
-const currentSlide = ref(0)
-const isCheckingIn = ref(false)
-const checkInSuccess = ref(false)
-const carouselRef = ref(null)
+// 响应式状态管理
+const activeTab = ref('推荐') // 当前激活的内容标签页
+const selectedCheckIn = ref(null) // 选中的打卡类型
+const checkInContent = ref('') // 打卡内容
+const currentSlide = ref(0) // 当前轮播图索引
+const isCheckingIn = ref(false) // 打卡提交状态
+const checkInSuccess = ref(false) // 打卡成功状态
+const carouselRef = ref(null) // 轮播图容器引用
+
+// 右侧导航组件：搜索和消息通知
 
 
 // 右侧内容组件
 // 右侧内容组件
 const RightContent = defineComponent({
 const RightContent = defineComponent({
@@ -558,39 +594,40 @@ const RightContent = defineComponent({
 
 
 const rightContent = h(RightContent)
 const rightContent = h(RightContent)
 
 
-// 图片加载错误处理
+// 工具函数：处理图片加载错误，设置默认头像
 const handleImageError = (e) => {
 const handleImageError = (e) => {
-  e.target.onerror = null
-  e.target.src = 'https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg'
+  e.target.onerror = null // 防止循环触发错误
+  e.target.src = 'https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg' // 设置默认头像
 }
 }
 
 
-// 格式化今天的日期
+// 工具函数：格式化今天的日期为中文格式
 const formatToday = () => {
 const formatToday = () => {
   const today = new Date()
   const today = new Date()
-  const options = { month: 'long', day: 'numeric', weekday: 'long' }
-  return today.toLocaleDateString('zh-CN', options)
+  const options = { month: 'long', day: 'numeric', weekday: 'long' } // 设置日期格式选项
+  return today.toLocaleDateString('zh-CN', options) // 返回中文格式的日期
 }
 }
 
 
-// 轮播图滚动到指定位置
+// 轮播图控制：滚动到指定位置
 const scrollToSlide = (index) => {
 const scrollToSlide = (index) => {
   if (carouselRef.value) {
   if (carouselRef.value) {
-    const slideWidth = carouselRef.value.offsetWidth
+    const slideWidth = carouselRef.value.offsetWidth // 获取轮播图容器宽度
     carouselRef.value.scrollTo({
     carouselRef.value.scrollTo({
-      left: index * slideWidth,
-      behavior: 'smooth'
+      left: index * slideWidth, // 计算目标滚动位置
+      behavior: 'smooth' // 使用平滑滚动效果
     })
     })
-    currentSlide.value = index
+    currentSlide.value = index // 更新当前轮播图索引
   }
   }
 }
 }
 
 
-// 处理打卡类型选择
+// 打卡功能：处理打卡类型选择
 const handleCheckInSelect = (checkInType) => {
 const handleCheckInSelect = (checkInType) => {
-  selectedCheckIn.value = checkInType
-  checkInContent.value = ''
+  selectedCheckIn.value = checkInType // 更新选中的打卡类型
+  checkInContent.value = '' // 清空打卡内容
 }
 }
 
 
-// 处理打卡提交
+// 打卡功能：处理打卡提交
 const handleCheckInSubmit = () => {
 const handleCheckInSubmit = () => {
+  // 表单验证
   if (!selectedCheckIn.value) {
   if (!selectedCheckIn.value) {
     showToast('请选择打卡项目')
     showToast('请选择打卡项目')
     return
     return