登录，退出登录

珞珈岛-项目相关文件/luojia-island/vue-frontend/package.json

@@ -28,7 +28,8 @@
   "eslintConfig": {
     "root": true,
     "env": {
-      "node": true
+      "node": true,
+      "vue/setup-compiler-macros": true
     },
     "extends": [
       "plugin:vue/vue3-essential",

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

@@ -38,11 +38,15 @@
     <!-- 登录/注册按钮 -->
     <div class="nav-section">
       <button v-if="!isLoggedIn" @click="showModal" class="login-btn">登录/注册</button>
-      <div v-else class="user-avatar">
+      <div v-else class="user-avatar" @mouseenter="showDropdown" @mouseleave="hideDropdown">
         <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar-img" />
-        <div class="dropdown-menu">
-          <button @click="goToProfile">个人中心</button>
-          <button @click="logout">退出登录</button>
+        <!-- 悬浮板块 -->
+        <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>
@@ -54,7 +58,7 @@
 
 <script setup name="Header">
 import { ref, computed } from 'vue';
-import { useUserStore } from '@/stores/user.ts';
+import { useUserStore } from '@/stores/user.js';
 import LoginRegisterModal from './LoginRegisterModal.vue';
 
 // 用户状态管理
@@ -62,6 +66,7 @@ const userStore = useUserStore();
 
 // 本地状态
 const isModalVisible = ref(false);
+const isDropdownVisible = ref(false);
 const colleges = ref([
   { name: '武大官网', url: 'https://www.whu.edu.cn/' },
   { name: '计算机学院', url: 'https://cs.whu.edu.cn/' },
@@ -82,7 +87,7 @@ const colleges = ref([
 ]);
 
 // 默认头像
-const defaultAvatar = '@/assets/default-avatar.png';
+const defaultAvatar = '@/assets/default-avatar/boy_4.png';
 
 // 计算属性
 const isLoggedIn = computed(() => userStore.isLoggedIn);
@@ -104,7 +109,25 @@ const goToProfile = () => {
 
 const logout = () => {
   userStore.logout();
-  window.location.href = '/';
+  isDropdownVisible.value = false; //
+};
+
+let showTimer = null; // 用于控制显示的定时器
+let hideTimer = null; // 用于控制隐藏的定时器
+
+const showDropdown = () => {
+  console.log('showDropdown');
+  clearTimeout(hideTimer); // 清除隐藏定时器，防止冲突
+  showTimer = setTimeout(() => {
+    isDropdownVisible.value = true; // 延迟 0.5 秒显示
+  }, 200);
+};
+
+const hideDropdown = () => {
+  clearTimeout(showTimer); // 清除显示定时器，防止冲突
+  hideTimer = setTimeout(() => {
+    isDropdownVisible.value = false; // 延迟 1 秒隐藏
+  }, 400);
 };
 </script>
 
@@ -217,7 +240,7 @@ const logout = () => {
   position: absolute;
   top: 100%;
   left: 0;
-  background-color: white;
+  background-color: rgb(255, 255, 255);
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -293,4 +316,61 @@ const logout = () => {
   color: #6fbd87;
   background: #f0f0f0;
 }
+.avatar-img {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* 头像悬浮板块样式 */
+.user-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 水平居中用户名 */
+  text-align: center; /* 确保文字居中 */
+  gap: 10px; /* 增加子元素之间的间距 */
+  width: 200px; /* 固定宽度，确保布局一致 */
+}
+
+/* 用户名样式 */
+.user-name {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #54ac52;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between; /* 按钮左右排列 */
+  width: 100%; /* 按钮容器占满父容器宽度 */
+}
+/* 悬浮板块按钮样式 */
+.dropdown-btn {
+  width: 45%; /* 按钮占据父容器的 45% 宽度 */
+  padding: 8px 10px;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.dropdown-btn:hover {
+  background-color: #f0f0f0;
+  color: #6fbd87;
+}
 </style>

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

@@ -15,7 +15,8 @@
     </div>
 
     <!-- 登录表单 -->
-    <form @submit.prevent="login" class="login-form">
+     <button @click="login" v-if="false">测试登录</button>
+    <form @submit.prevent="Login1" class="login-form">
       <div class="input-group">
         <!-- 用户标识输入框（用户名/邮箱/手机） -->
         <input
@@ -70,20 +71,17 @@
   </div>
 </template>
 
-<script>
+<script setup name="UserLogin">
 import { ref, computed } from 'vue';
 import axios from 'axios';
 import request from '@/utils/request';
 import { ElMessage } from 'element-plus';
-import { useUserStore } from '@/stores/user.ts';
+import { useUserStore } from '@/stores/user.js';
 
-export default {
-  name: 'UserLogin',
-  //TODO: 引入props, { emit }然后实现登陆成功跳转
-  setup() {
 const currentType = ref('username'); // 当前选择的登录方式
 const cooldown = ref(0); // 验证码发送倒计时
 const userStore = useUserStore(); // 引入用户状态管理
+const emit = defineEmits(['toggleForm', 'LoginSuccess']); // 定义事件
 // 登录方式
 const loginTypes = [
   { label: '用户名登录', value: 'username' },
@@ -102,19 +100,26 @@ export default {
 // 输入框类型
 const inputType = computed(() => {
   switch (currentType.value) {
-        case 'email': return 'email';    // 邮箱输入类型
-        case 'phone': return 'tel';      // 电话号码输入类型
-        default: return 'text';          // 默认文本输入类型
+    case 'email':
+      return 'email'; // 邮箱输入类型
+    case 'phone':
+      return 'tel'; // 电话号码输入类型
+    default:
+      return 'text'; // 默认文本输入类型
   }
 });
 
 // 输入框提示文字
 const placeholder = computed(() => {
   switch (currentType.value) {
-        case 'username': return '请输入用户名';
-        case 'email': return '请输入邮箱';
-        case 'phone': return '请输入手机号';
-        default: return '';
+    case 'username':
+      return '请输入用户名';
+    case 'email':
+      return '请输入邮箱';
+    case 'phone':
+      return '请输入手机号';
+    default:
+      return '';
   }
 });
 
@@ -125,7 +130,7 @@ export default {
 
 // 验证输入框是否有效
 const isValidInput = computed(() => {
-      const value = loginForm.value.userFlag
+  const value = loginForm.value.userFlag;
   if (!value) return false; // 输入不能为空
 
   switch (currentType.value) {
@@ -174,16 +179,15 @@ export default {
     console.error('发送验证码失败:', error);
   }
 }
-
-    //登录
-    /*
-    function login1() {
+//前端测试登录
+function Login1() {
    userStore.login({
-            avatar: '/assets/default-avatar/boy_1.png',
+        avatar:require('@/assets/default-avatar/boy_1.png'),
         userName: '珈人一号'
-         })
-    }*/
-
+      }); 
+      emit('LoginSuccess');
+}
+// 登录
 async function login() {
   if (!isvalidForm.value) return;
 
@@ -191,7 +195,7 @@ export default {
     const loginData = {
       userFlag: loginForm.value.userFlag,
       password: loginForm.value.password
-        }
+    };
 
     if (showVerifyCode.value) {
       loginData.verifyCode = loginForm.value.verifyCode; // 验证码
@@ -202,7 +206,6 @@ export default {
 
     if (response.code === 200) {
       // 登录成功，保存token到本地存储
-          //还应读入用户数据，后续设计
       const { accessToken, refreshToken } = response.data;
       localStorage.setItem('accessToken', accessToken);
       localStorage.setItem('refreshToken', refreshToken);
@@ -210,15 +213,14 @@ export default {
       userStore.login({
         avatar: '/assets/default-avatar/boy_1.png',
         userName: '珈人一号'
-          })
+      });
 
       ElMessage({
         message: '登录成功',
         type: 'success',
         duration: 500
       });
-          //TODO:跳转到目标页面
-          //or 关闭登录弹窗
+      // TODO: 跳转到目标页面或关闭登录弹窗
     } else {
       // 登录失败
       ElMessage({
@@ -227,38 +229,19 @@ export default {
         duration: 500
       });
     }
-
   } catch (error) {
     console.error('登录失败:', error);
     alert(error.response?.message || '登录失败，请稍后重试');
   }
 }
 
-    //切换登陆方式时重置表单
+// 切换登录方式时重置表单
 const switchLoginType = (type) => {
   currentType.value = type;
   loginForm.value.userFlag = '';
   loginForm.value.password = '';
   loginForm.value.verifyCode = '';
-    }
-
-    // 返回模板需要使用的数据和方法
-    return {
-      currentType,
-      loginTypes,
-      loginForm,
-      inputType,
-      placeholder,
-      showVerifyCode,
-      cooldown,
-      sendCode,
-      //login1,
-      login,
-      switchLoginType,
-      isValidInput
 };
-  }
-}
 </script>
 
 <style scoped>

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

@@ -8,7 +8,7 @@
       <!-- 模态框内容区域 -->
       <div class="modal-content">
         <!-- 根据 isLogin 状态动态切换登录/注册组件 -->
-        <UserLogin v-if="isLogin" @toggleForm="toggleForm" />
+        <UserLogin v-if="isLogin" @toggleForm="toggleForm" @LoginSuccess="close"/>
         <UserRegister v-else @toggleForm="toggleForm" />
       </div>
     </div>
@@ -39,7 +39,7 @@ export default {
     return {
       isLogin,
       toggleForm,
-      close: () => emit('close') // 关闭模态框的方法
+      close: () => {emit('close')} // 关闭模态框的方法
     };
   }
 }