feat(profile): 新增我的收藏页面并集成Vant组件

添加我的收藏页面，支持展示收藏的课程和活动。使用Vant的Tab和Tabs组件实现分类切换，并通过VanList实现分页加载功能。

@@ -23,5 +23,7 @@ declare module 'vue' {
     SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default']
     SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default']
     VanList: typeof import('vant/es')['List']
     VanList: typeof import('vant/es')['List']
     VanRate: typeof import('vant/es')['Rate']
     VanRate: typeof import('vant/es')['Rate']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabs: typeof import('vant/es')['Tabs']
   }
   }
 }
 }

@@ -96,6 +96,12 @@ const routes = [
     component: () => import('../views/courses/MyCoursesPage.vue'),
     component: () => import('../views/courses/MyCoursesPage.vue'),
     meta: { title: '我的课程' }
     meta: { title: '我的课程' }
   },
   },
+  {
+    path: '/profile/favorites',
+    name: 'MyFavorites',
+    component: () => import('../views/profile/MyFavoritesPage.vue'),
+    meta: { title: '我的收藏' }
+  },
 ]
 ]
 
 
 const router = createRouter({
 const router = createRouter({

+<template>
+  <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
+    <!-- 分类切换 -->
+    <div class="px-4 py-3">
+      <van-tabs v-model:active="activeTab" sticky swipeable title-active-color="#4caf50" color="#4caf50">
+        <van-tab title="课程" name="courses">
+          <van-list
+            v-model:loading="coursesLoading"
+            :finished="coursesFinished"
+            finished-text="没有更多了"
+            @load="onCoursesLoad"
+            class="space-y-4 mt-4"
+          >
+            <CourseCard v-for="course in favoriteCourses" :key="course.id" :course="course" />
+          </van-list>
+
+          <!-- 无数据提示 -->
+          <div v-if="!coursesLoading && favoriteCourses.length === 0" class="flex flex-col items-center justify-center py-12">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+            </svg>
+            <p class="mt-4 text-gray-500">暂无收藏课程</p>
+          </div>
+        </van-tab>
+
+        <van-tab title="活动" name="activities">
+          <van-list
+            v-model:loading="activitiesLoading"
+            :finished="activitiesFinished"
+            finished-text="没有更多了"
+            @load="onActivitiesLoad"
+            class="space-y-4 mt-4"
+          >
+            <ActivityCard v-for="activity in favoriteActivities" :key="activity.id" :activity="activity" />
+          </van-list>
+
+          <!-- 无数据提示 -->
+          <div v-if="!activitiesLoading && favoriteActivities.length === 0" class="flex flex-col items-center justify-center py-12">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+            </svg>
+            <p class="mt-4 text-gray-500">暂无收藏活动</p>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import CourseCard from '@/components/ui/CourseCard.vue';
+import ActivityCard from '@/components/ui/ActivityCard.vue';
+import { courses as mockCourses, activities as mockActivities } from '@/utils/mockData';
+import { useTitle } from '@vueuse/core';
+
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+// 页面状态
+const activeTab = ref('courses');
+const favoriteCourses = ref([]);
+const favoriteActivities = ref([]);
+
+// 课程列表加载状态
+const coursesLoading = ref(false);
+const coursesFinished = ref(false);
+const coursePage = ref(1);
+const coursePageSize = 10;
+
+// 活动列表加载状态
+const activitiesLoading = ref(false);
+const activitiesFinished = ref(false);
+const activitiesPage = ref(1);
+const activitiesPageSize = 10;
+
+// 加载收藏课程
+const onCoursesLoad = () => {
+  coursesLoading.value = true;
+  // 模拟异步加载
+  setTimeout(() => {
+    const start = (coursePage.value - 1) * coursePageSize;
+    const end = start + coursePageSize;
+    const newCourses = mockCourses.slice(start, end);
+
+    favoriteCourses.value.push(...newCourses);
+    coursesLoading.value = false;
+
+    if (newCourses.length < coursePageSize) {
+      coursesFinished.value = true;
+    } else {
+      coursePage.value += 1;
+    }
+  }, 1000);
+};
+
+// 加载收藏活动
+const onActivitiesLoad = () => {
+  activitiesLoading.value = true;
+  // 模拟异步加载
+  setTimeout(() => {
+    const start = (activitiesPage.value - 1) * activitiesPageSize;
+    const end = start + activitiesPageSize;
+    const newActivities = mockActivities.slice(start, end);
+
+    favoriteActivities.value.push(...newActivities);
+    activitiesLoading.value = false;
+
+    if (newActivities.length < activitiesPageSize) {
+      activitiesFinished.value = true;
+    } else {
+      activitiesPage.value += 1;
+    }
+  }, 1000);
+};
+</script>