804header下拉

src/components/layout/header.vue

@@ -5,16 +5,25 @@
       <div class="ve_logo_time">{{ currentTime }}</div>
       <div class="ve_logo_text">数据驱动飞行器智能优化设计平台</div>
       <div class="ve_logo_user">
-        <el-dropdown trigger="hover">
-          <el-avatar  :icon="UserFilled"/>
+        <el-avatar  :icon="UserFilled" :size="24" />
+        <el-dropdown trigger="hover" class="user-dropdown">
           <span class="el-dropdown-link">
             {{ nickName }}
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>个人信息</el-dropdown-item>
-              <el-dropdown-item>修改密码</el-dropdown-item>
-              <el-dropdown-item divided>登出</el-dropdown-item>
+              <el-dropdown-item>
+                <el-icon><User /></el-icon>
+                <span>个人信息</span>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-icon><Key /></el-icon>
+                <span>修改密码</span>
+              </el-dropdown-item>
+              <el-dropdown-item divided @click="handleLogout" style="color: #F56C6C;">
+                <el-icon><SwitchButton /></el-icon>
+                <span>登出</span>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -27,17 +36,32 @@
 <script setup>
 import { ref, onMounted, reactive, } from "vue";
 import logo from "@/assets/img/bgheader.png";
+import { UserFilled, ArrowDown, User, Key, SwitchButton } from '@element-plus/icons-vue'
 
 import useCurrentTime from "@/utils/useCurrentTime";
 import { useUserStore } from '@/store/user'
+import { removeToken,removeUserId} from "@/utils/token";
+import { useRouter } from 'vue-router'
 
-import { UserFilled } from '@element-plus/icons-vue'
+import {message} from "@/utils/message";
 
 const userStore = useUserStore()
-const nickName = computed(() => userStore.userInfo.nickName || '用户登录')
+const router = useRouter()
+
+const nickName = computed(() => userStore.userInfo?.nickName || '用户登录')
 
 const { currentTime } = useCurrentTime()
 
+const handleLogout = () => {
+  userStore.clearUserInfo();
+  removeToken();
+  removeUserId();
+  // 跳转到登录页面
+  message.success('登出成功');
+  router.push('/login');
+}
+
+
 </script>
 <style lang="scss" scoped>
 .ve_menu_logo {
@@ -85,21 +109,30 @@ const { currentTime } = useCurrentTime()
     .ve_logo_user{
       position: absolute;
       top: 40%;
-      right: 10%;
+      right: 2%;
       transform: translate(-50%, -50%);
       font-size: 18px;
       color: #FFFFFF;
       font-weight: 400;
 
-      :deep(.el-avatar) {
-        background-color: transparent;
-      }
-
-      :deep(.el-avatar--icon) {
-        color: #2CFFFF;
-      }
+      display: flex;
+      align-items: center;
     }
   }
 
 }
+
+
+.user-dropdown {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  :deep(.el-dropdown-link) {
+    margin-left: 10px;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+  }
+}
 </style>

src/style/index.css

@@ -363,4 +363,16 @@ img{
 .el-divider {
   margin: 0;
   border-color: #0075FF;
+}
+
+.el-dropdown-menu {
+  background-color: #2A3248 !important;
+}
+
+.el-dropdown-menu__item {
+  color: #fff;
+}
+
+.el-dropdown-menu__item:hover {
+  background-color: #3A4258 !important;
 }

src/views/login/index.vue

@@ -88,6 +88,7 @@ import { ElMessage } from 'element-plus'
 import router from "@/router"
 import { request,enPassword } from "@/utils/request"
 import secureStorage from '@/utils/secureStorage'
+import { message } from '@/utils/message'
 
 import { getToken, setToken, setUserId} from "@/utils/token"
 import { useUserStore } from '@/store/user'
@@ -129,7 +130,7 @@ const handleLogin = () => {
     if (!valid) return
     // 检查是否有输入用户名和密码
     if (!loginForm.username || !loginForm.password) {
-      ElMessage.error( '请输入用户名和密码');
+      message.error( '请输入用户名和密码');
       return;
     }
     if (loginForm.remember) {
@@ -171,7 +172,7 @@ const handleLogin = () => {
     })
     .catch((err) => {
       console.error('错误信息：',err);
-      ElMessage.error(err.message);
+      message.error(err.returnMsg);
       loading.value = false;
     })
     .finally(() => {