个人主页跳转，通知移入登录后显示

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue

@@ -32,23 +32,27 @@
         </ul>
       </div>
       <router-link to="/feedback" class="nav-btn">反馈站</router-link>
-      <router-link to="/notificationlist" class="nav-btn">通知</router-link>
+      
     </div>
 
     <!-- 登录/注册按钮 -->
     <div class="nav-section">
       <button v-if="!isLoggedIn" @click="showModal" class="login-btn">登录/注册</button>
-      <div v-else class="user-avatar" @mouseenter="showDropdown" @mouseleave="hideDropdown">
-        <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar-img" />
-        <!-- 悬浮板块 -->
-        <div class="user-dropdown-menu" v-show="isDropdownVisible">
-          <p class="user-name">{{ userInfo.userName }}</p>
-          <div class="button-container">
-            <button @click="goToProfile" class="dropdown-btn">个人中心</button>
-            <button @click="logout" class="dropdown-btn">退出登录</button>
+      <div v-else class="user-menu">
+        <router-link to="/notificationlist" class="nav-btn">通知</router-link>
+        <div class="user-avatar" @mouseenter="showDropdown" @mouseleave="hideDropdown">
+          <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar-img" />
+          <!-- 悬浮板块 -->
+          <div class="user-dropdown-menu" v-show="isDropdownVisible">
+            <p class="user-name">{{ userInfo.userName }}</p>
+            <div class="button-container">
+              <button @click="goToProfile" class="dropdown-btn">个人中心</button>
+              <button @click="logout" class="dropdown-btn">退出登录</button>
+            </div>
           </div>
         </div>
       </div>
+      
     </div>
 
     <!-- 登录/注册模态框组件，仅在 isModalVisible 为 true 时显示 -->
@@ -56,14 +60,14 @@
   </header>
 </template>
 
-<script setup name="Header">
+<script lang="js" setup name="Header">
 import { ref, computed } from 'vue';
 import { useUserStore } from '@/stores/user.js';
 import LoginRegisterModal from './LoginRegisterModal.vue';
-
+import { useRouter } from 'vue-router';
 // 用户状态管理
 const userStore = useUserStore();
-
+const router = useRouter();
 // 本地状态
 const isModalVisible = ref(false);
 const isDropdownVisible = ref(false);
@@ -87,7 +91,7 @@ const colleges = ref([
 ]);
 
 // 默认头像
-const defaultAvatar = '@/assets/default-avatar/boy_4.png';
+const defaultAvatar = require("@/assets/default-avatar/boy_4.png");
 
 // 计算属性
 const isLoggedIn = computed(() => userStore.isLoggedIn);
@@ -103,12 +107,13 @@ const hideModal = () => {
 };
 
 const goToProfile = () => {
-  // 跳转到个人中心页面，后续实现
-  //window.location.href = '/profile';
+  router.push({name: 'UserPage',params: { userId: userInfo.value.userid }});
+  isDropdownVisible.value = false; // 隐藏下拉菜单
 };
 
 const logout = () => {
   userStore.logout();
+  router.push({ name: 'Home' }); // 跳转到首页
   isDropdownVisible.value = false; //
 };
 
@@ -116,7 +121,6 @@ let showTimer = null; // 用于控制显示的定时器
 let hideTimer = null; // 用于控制隐藏的定时器
 
 const showDropdown = () => {
-  console.log('showDropdown');
   clearTimeout(hideTimer); // 清除隐藏定时器，防止冲突
   showTimer = setTimeout(() => {
     isDropdownVisible.value = true; // 延迟 0.5 秒显示
@@ -316,6 +320,13 @@ const hideDropdown = () => {
   color: #6fbd87;
   background: #f0f0f0;
 }
+
+.user-menu{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative; 
+}
 .avatar-img {
   width: 35px;
   height: 35px;

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue

@@ -183,7 +183,8 @@ async function sendCode() {
 function Login1() {
    userStore.login({
         avatar:require('@/assets/default-avatar/boy_1.png'),
-        userName: '珈人一号'
+        userName: '珈人一号',
+        userid:1
       }); 
       emit('LoginSuccess');
 }
@@ -212,9 +213,10 @@ async function login() {
 
       userStore.login({
         avatar: '/assets/default-avatar/boy_1.png',
-        userName: '珈人一号'
+        userName: '珈人一号',
+        userid:1
       });
-
+      emit('LoginSuccess'); // 触发登录成功事件
       ElMessage({
         message: '登录成功',
         type: 'success',

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js

@@ -28,7 +28,7 @@ const routes = [
     component: PostDetail 
   },
   {
-    path: '/user',
+    path: '/user/:userId',
     name: 'UserPage',
     component: UserPage
   },

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/user.js

@@ -6,6 +6,7 @@ export const useUserStore = defineStore('user', {
     userInfo: {
       avatar: '', // 用户头像 URL
       username: '', // 用户名
+      userid: 0, // 用户 ID
     },
   }),
   actions: {
@@ -15,7 +16,7 @@ export const useUserStore = defineStore('user', {
     },
     logout() {
       this.isLoggedIn = false;
-      this.userInfo = { avatar: '', username: '' };
+      this.userInfo = { avatar: '', username: '' , userid: 0 };
     },
   },
 });