feat(首页): 添加推荐内容随机显示功能

在首页的推荐内容部分，增加随机显示功能，用户点击“换一批”按钮时，会随机显示不同的推荐内容，提升用户体验

@@ -17,7 +17,11 @@ export const userRecommendations = [
   { title: "亲子阅读技巧入门", duration: "15分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg" },
   { title: "3-6岁孩子的情绪管理", duration: "20分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/27kCu7bXGEI.jpg" },
   { title: "趣味数学启蒙课", duration: "12分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/jbwr0qZvpD4.jpg" },
-  { title: "儿童英语绘本故事", duration: "18分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/GGCP6vshpPY.jpg" }
+  { title: "儿童英语绘本故事", duration: "18分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/GGCP6vshpPY.jpg" },
+  { title: "*亲子阅读技巧入门", duration: "15分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg" },
+  { title: "*3-6岁孩子的情绪管理", duration: "20分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/27kCu7bXGEI.jpg" },
+  { title: "*趣味数学启蒙课", duration: "12分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/jbwr0qZvpD4.jpg" },
+  { title: "*儿童英语绘本故事", duration: "18分钟", image: "https://cdn.ipadbiz.cn/mlaj/images/GGCP6vshpPY.jpg" },
 ];
 
 // Live streaming sessions

 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 18:10:32
+ * @LastEditTime: 2025-03-25 15:57:15
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 亲子学院首页组件
  *
@@ -287,7 +287,10 @@
           <section class="mb-7">
             <div class="flex justify-between items-center mb-3">
               <h3 class="font-medium">为您推荐</h3>
-              <button class="text-xs text-gray-500 flex items-center">
+              <button
+                class="text-xs text-gray-500 flex items-center"
+                @click="displayedRecommendations = getRecommendations(true)"
+              >
                 换一批
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
@@ -296,7 +299,7 @@
             </div>
             <div class="grid grid-cols-2 gap-4">
               <FrostedGlass
-                v-for="(item, index) in userRecommendations"
+                v-for="(item, index) in displayedRecommendations"
                 :key="index"
                 class="p-3 rounded-xl"
               >
@@ -553,6 +556,21 @@ const checkInContent = ref('') // 打卡内容
 const currentSlide = ref(0) // 当前轮播图索引
 const isCheckingIn = ref(false) // 打卡提交状态
 const checkInSuccess = ref(false) // 打卡成功状态
+const displayedRecommendations = ref([]) // 当前显示的推荐内容
+
+// 获取推荐内容
+const getRecommendations = (random = false) => {
+  if (random) {
+    const shuffled = [...userRecommendations].sort(() => 0.5 - Math.random())
+    return shuffled.slice(0, 4)
+  }
+  return userRecommendations.slice(0, 4)
+}
+
+// 初始化显示推荐内容
+onMounted(() => {
+  displayedRecommendations.value = getRecommendations()
+})
 const carouselRef = ref(null) // 轮播图容器引用
 
 // 右侧导航组件：搜索和消息通知