Situation-Awareness-Platform-Frontend/src/views/Jyh/Dashboard/Header.vue

<template>
  <header class="app-header">
    <div class="header-left">
      <button class="logo-btn" aria-label="Home">
        <a aria-current="page" href="/" class="router-link-active router-link-exact-active logo">
          <img src="@/assets/imgs/logo3.png" alt="Tcode">
        </a>
      </button>
    </div>

    <div class="header-right">
      <div class="agent-text"><router-link to="/ai/home">AI大模型</router-link></div>

      <button class="user-avatar-btn" @click="toggleDropdown" aria-label="User Account">
        用
      </button>

      <transition name="dropdown">
        <div v-if="isDropdownOpen" class="user-dropdown-menu">
          <div class="dropdown-header">
            <div class="user-name">用户名</div>
            <div class="user-email">123456@gmail.com</div>
          </div>
          <hr class="dropdown-divider">

          <a href="#" class="dropdown-item download-link">
            下载适用于 Windows 的版本
          </a>
          <hr class="dropdown-divider">

          <button @click="logout" class="dropdown-item logout-btn">
            退出登录
            <span class="logout-icon">→</span>
          </button>
        </div>
      </transition>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {toLogout} from "@/api/user";
import {reqCatch} from "@/utils/catch";
import {devLogout} from "@/api/org/devIndex";
import {useAccount} from "@/utils/hooks/useAccount";
import {useRoute, useRouter} from "vue-router";

// 控制下拉菜单的显示/隐藏状态
const isDropdownOpen = ref(false);

const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

// 点击外部关闭下拉菜单的逻辑
const closeDropdown = (event) => {
  // 检查点击事件是否发生在下拉菜单或其触发按钮之外
  const header = document.querySelector('.app-header');
  if (header && !header.contains(event.target)) {
    isDropdownOpen.value = false;
  }
};
const route = useRoute();
const router = useRouter();
const { accountInfo, RemoveInfo } = useAccount();
const logout = async () => {
  RemoveInfo(); // 目前先强制清除用户信息，后面接口通了再调
  const res = await toLogout();
  await reqCatch(devLogout, {}); // 清除社区登录
  if (!res.error) {
    RemoveInfo();
    router.push('/');
  }
  // 退出系统刷新页面
  setTimeout(() => {
    location.reload();
  }, 100);
};


onMounted(() => {
  document.addEventListener('click', closeDropdown);
});

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown);
});
</script>

<style scoped>
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px; /* 常见 Header 高度 */
  padding: 0 16px;
  background-color: rgb(20, 18, 11);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ------------------- 左侧 Logo ------------------- */
.logo-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.logo-btn svg circle {
  fill: #fff;
}

/* ------------------- 右侧区域 ------------------- */
.header-right {
  display: flex;
  align-items: center;
  position: relative; /* 用于定位下拉菜单 */
}

.agent-text {
  font-size: 14px;
  margin-right: 12px;
  color: #ccc; /* 略微浅灰色 */
}

/* 用户头像/首字母按钮 */
.user-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #333; /* 头像背景色 */
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid #666; /* 模仿图片的圆形边框 */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* ------------------- 下拉菜单样式 ------------------- */
.user-dropdown-menu {
  position: absolute;
  top: 48px; /* 位于 header 底部下方 */
  right: 0;
  min-width: 250px;
  background-color: #2b2b2b; /* 下拉菜单背景色 */
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 8px 0;
  z-index: 1001;
}

/* 头部信息 (姓名和邮箱) */
.dropdown-header {
  padding: 8px 16px;
  margin-bottom: 8px;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.user-email {
  font-size: 12px;
  color: #aaa;
}

/* 分隔线 */
.dropdown-divider {
  border: none;
  border-top: 1px solid #3c3c3c;
  margin: 4px 0;
}

/* 菜单项基础样式 (链接和按钮) */
.dropdown-item {
  display: flex;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
  box-sizing: border-box;
  align-items: center;
}

.dropdown-item:hover {
  background-color: #3c3c3c; /* 悬停背景色 */
}

/* 下载链接样式 */
.download-link {
  color: #58a6ff; /* 蓝色突出 */
}

/* 退出登录样式 */
.logout-btn {
  justify-content: space-between;
}

.logout-icon {
  font-size: 16px;
  margin-left: 10px;
  line-height: 1;
}

/* Vue 过渡动画 */
.dropdown-enter-active, .dropdown-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}
.dropdown-enter-from, .dropdown-leave-to {
  opacity: 0;
  transform: translateY(-5px);
}

.logo img {
  display: block;
  height: auto;
  width: 86px
}
</style>