From 95a38a1c0e936e53647a448270192b5e2197f3ac Mon Sep 17 00:00:00 2001
From: lee-zt <2960166273@qq.com>
Date: Thu, 15 May 2025 11:28:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=BB=E9=A1=B5=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=EF=BC=8C=E9=80=9A=E7=9F=A5=E7=A7=BB=E5=85=A5=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E5=90=8E=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-frontend/src/components/Header.vue    | 43 ++++++++++++-------
 .../vue-frontend/src/components/Login.vue     |  8 ++--
 .../vue-frontend/src/router/index.js          |  2 +-
 .../vue-frontend/src/stores/user.js           |  3 +-
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
index f5799c9..ccac695 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
+++ b/珞珈岛-项目相关文件/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;
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue
index d838f5e..1df707a 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue
+++ b/珞珈岛-项目相关文件/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',
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
index 187972b..999050e 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
+++ b/珞珈岛-项目相关文件/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
   },
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/user.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/user.js
index 8b1c89f..25e761c 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/user.js
+++ b/珞珈岛-项目相关文件/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 };
     },
   },
 });
\ No newline at end of file