feat(导航): 替换 router-link 为 div 并添加点击事件处理

在 BottomNav.vue 中，将 router-link 替换为 div，并添加 handleNavClick 方法以处理导航点击事件。如果用户未登录且点击了“个人资料”项，则跳转到登录页面。同时，在 HomePage.vue 中，根据当前用户状态动态显示用户信息和头像。

+<!--
+ * @Date: 2025-03-20 20:36:36
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-21 10:20:44
+ * @FilePath: /mlaj/src/components/layout/BottomNav.vue
+ * @Description: 文件描述
+-->
 <template>
 <template>
   <nav class="fixed bottom-0 left-0 right-0 bg-white/70 backdrop-blur-lg border-t border-gray-100 z-50">
   <nav class="fixed bottom-0 left-0 right-0 bg-white/70 backdrop-blur-lg border-t border-gray-100 z-50">
     <div class="flex justify-around items-center h-16">
     <div class="flex justify-around items-center h-16">
-      <router-link
+      <div
         v-for="item in navItems"
         v-for="item in navItems"
         :key="item.name"
         :key="item.name"
-        :to="item.path"
-        class="flex flex-col items-center justify-center w-1/4 h-full"
+        @click="handleNavClick(item)"
+        class="flex flex-col items-center justify-center w-1/4 h-full cursor-pointer"
         :class="{
         :class="{
           'text-green-500': isActive(item.path),
           'text-green-500': isActive(item.path),
           'text-gray-500': !isActive(item.path)
           'text-gray-500': !isActive(item.path)
@@ -24,16 +31,19 @@
           v-html="item.icon"
           v-html="item.icon"
         />
         />
         <span class="text-xs">{{ item.name }}</span>
         <span class="text-xs">{{ item.name }}</span>
-      </router-link>
+      </div>
     </div>
     </div>
   </nav>
   </nav>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { computed } from 'vue'
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuth } from '@/contexts/auth'
 
 
 const route = useRoute()
 const route = useRoute()
+const router = useRouter()
+const { currentUser } = useAuth()
 
 
 const navItems = [
 const navItems = [
   {
   {
@@ -61,4 +71,12 @@ const navItems = [
 const isActive = (path) => {
 const isActive = (path) => {
   return route.path === path || (path !== '/' && route.path.startsWith(path))
   return route.path === path || (path !== '/' && route.path.startsWith(path))
 }
 }
+
+const handleNavClick = (item) => {
+  if (item.path === '/profile' && !currentUser.value) {
+    router.push('/login')
+    return
+  }
+  router.push(item.path)
+}
 </script>
 </script>

@@ -9,19 +9,19 @@
   <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">
       <!-- Header Section with Welcome & Weather -->
       <!-- Header Section with Welcome & Weather -->
-      <div class="px-4 pt-3 pb-4">
+      <div v-if="currentUser" class="px-4 pt-3 pb-4">
         <FrostedGlass class="p-4 rounded-xl mb-4">
         <FrostedGlass class="p-4 rounded-xl mb-4">
           <div class="flex justify-between items-center mb-3">
           <div class="flex justify-between items-center mb-3">
             <div class="flex items-center">
             <div class="flex items-center">
               <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
               <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                 <img
                 <img
-                  src="https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg"
-                  alt="王小明"
+                  :src="currentUser.avatar"
+                  :alt="currentUser.name"
                   class="w-full h-full object-cover"
                   class="w-full h-full object-cover"
                   @error="handleImageError" />
                   @error="handleImageError" />
               </div>
               </div>
               <div>
               <div>
-                <h2 class="text-xl font-bold">欢迎回来，小明！</h2>
+                <h2 class="text-xl font-bold">欢迎回来，{{ currentUser.name }}！</h2>
                 <p class="text-sm text-gray-500">{{ formatToday() }}</p>
                 <p class="text-sm text-gray-500">{{ formatToday() }}</p>
               </div>
               </div>
             </div>
             </div>
@@ -489,11 +489,15 @@ 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 { 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'
 
 
-const $route = useRoute();
-const $router = useRouter();
-useTitle($route.meta.title);
+const $route = useRoute()
+const $router = useRouter()
+useTitle($route.meta.title)
+
+// 获取认证状态
+const { currentUser } = useAuth()
 
 
 // 响应式状态
 // 响应式状态
 const activeTab = ref('推荐')
 const activeTab = ref('推荐')