magic_node_web/src/components/headerView/index.vue

<template>
  <div class="header-view">
    <div class="page-header-view">
      <div class="header">
        <div class="left">
          <div class="logo" @click="goHome">
            <img src="@/assets/images/common/logo.svg" alt="Vitiens" class="logo-icon" />
            <img src="@/assets/images/common/Vitiens.svg" alt="Vitiens" class="logo-text" />
          </div>
        </div>
        <div class="header-right">
          <lang-popover ref="langPopoverRef" />
          <div class="avatar-dropdown-container" @click="onToggleAvatarDropdown">
            <img :src="avatarSrc" class="icon icon-avatar" />
            <img src="@/assets/images/common/icon_down.svg" class="icon icon-down" />
            <div v-if="isAvatarDropdownOpen" class="dropdown-container">
              <!-- 用户信息区 -->
              <div class="user-profile-section">
                <img :src="avatarSrc" class="profile-avatar" />
                <div class="profile-info">
                  <div class="profile-name">{{ userInfo?.nickname || userInfo?.username || 'User' }}</div>
                  <div class="profile-uid" @click="onCopy">
                    <span>ID: {{ userInfo?.uid }}</span>
                    <img src="@/assets/images/common/copy-icon.svg" class="copy-icon" />
                  </div>
                </div>
              </div>

              <!-- 余额显示 -->
              <div class="balance-section">
                <div class="balance-label">{{ $t('finance.balance') }}</div>
                <div class="balance-value">{{ userInfo?.balance ?? '0.00' }}</div>
              </div>

              <!-- 基本信息 -->
              <div class="info-section">
                <div class="info-item">
                  <span class="info-label">{{ $t('user.region') }}</span>
                  <span class="info-value">{{ userInfo?.region || '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">{{ $t('user.age') }}</span>
                  <span class="info-value">{{ userInfo?.age || '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">{{ $t('user.gender') }}</span>
                  <span class="info-value">{{ genderText }}</span>
                </div>
              </div>

              <!-- 退出登录 -->
              <div class="logout-wrapper" @click="onLogout">
                <img src="@/assets/images/common/exit.svg" />
                <span>{{ $t("退出登录") }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import LangPopover from "@/components/LangPopover/index.vue";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { copyText } from "@/utils/utils";
import { useGlobalStore } from "@/store/modules/globalStore";
import { requestGetUserInfo } from "@/api";
import defaultAvatar from "@/assets/images/common/logo.svg";

const { t } = useI18n();
const router = useRouter();
const userInfo = ref<UserInfo>();
const avatarSrc = computed(() => userInfo.value?.avatar || defaultAvatar);

const genderText = computed(() => {
  const g = userInfo.value?.gender;
  if (g === 1) return t('user.male');
  if (g === 2) return t('user.female');
  return '--';
});

const isAvatarDropdownOpen = ref(false);
const langPopoverRef = ref<typeof LangPopover>(null);
// 头像下拉框相关方法
const onToggleAvatarDropdown = () => {
  isAvatarDropdownOpen.value = !isAvatarDropdownOpen.value;
  langPopoverRef.value?.close();
};

const onCopy = async () => copyText(userInfo.value?.uid);

const onLogout = () => {
  isAvatarDropdownOpen.value = false;
  localStorage.removeItem("token");
  router.replace("/home");
  window.location.reload();
};

const goHome = () => {
  router.push('/');
};

// 点击外部区域关闭下拉框
const handleClickOutside = (event: Event) => {
  const target = event.target as HTMLElement;
  if (!target.closest(".avatar-dropdown-container")) {
    isAvatarDropdownOpen.value = false;
  }
};

const getUserInfo = async () => {
  const res = await requestGetUserInfo();
  userInfo.value = res.data.user || res.data;
};
const globalStore = useGlobalStore();
const isLoggedIn = computed(() => globalStore.isLoggedIn);
watch(
  () => isLoggedIn.value,
  newVal => {
    if (newVal) {
      getUserInfo();
    }
  }
);
onMounted(() => {
  if (isLoggedIn.value) {
    getUserInfo();
  }
});

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
</script>
<style lang="scss" scoped>
.header-view {
  max-width: 500px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #161617;
  height: min(11.2vw, 53.76px);
}
.page-header-view {
  height: 100%;

  .header {
    height: 100%;
    padding: 0 min(4.267vw, 20.48px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      height: 100%;

      .logo {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: min(6.24vw, 29.9px);
        letter-spacing: 0.5px;
        cursor: pointer;

        .logo-icon {
          width: min(7vw, 32px);
          height: min(7vw, 32px);
          margin-right: min(1.5vw, 6px);
        }

        .logo-text {
          height: min(5vw, 24px);
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      height: 100%;
    }

    .icon-avatar {
      margin-left: 7px;
      width: min(8vw, 38.4px);
      height: min(8vw, 38.4px);
      border-radius: 50%;
      object-fit: cover;
    }

    .icon-down {
      margin-left: 7px;
    }
  }
  .avatar-dropdown-container {
    display: flex;
    align-items: center;
    position: relative;
    .dropdown-container {
      position: absolute;
      top: 150%;
      right: 0;
      width: 220px;
      background: #1e1e20;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      padding: 12px;
      gap: 8px;
      z-index: 50;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.4);

      // 用户信息区
      .user-profile-section {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #2a2a2c;

        .profile-avatar {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid #e8a820;
          flex-shrink: 0;
        }

        .profile-info {
          flex: 1;
          min-width: 0;

          .profile-name {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .profile-uid {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 2px;
            cursor: pointer;

            span {
              font-size: 11px;
              color: #828694;
            }

            .copy-icon {
              width: 12px;
              height: 12px;
              opacity: 0.6;
            }
          }
        }
      }

      // 余额显示
      .balance-section {
        background: linear-gradient(135deg, #2a2520 0%, #1e1e20 100%);
        border: 1px solid #3a3020;
        border-radius: 8px;
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .balance-label {
          font-size: 12px;
          color: #828694;
        }

        .balance-value {
          font-size: 18px;
          font-weight: 700;
          color: #e8a820;
        }
      }

      // 基本信息
      .info-section {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 6px 0;
        border-bottom: 1px solid #2a2a2c;

        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 2px 4px;

          .info-label {
            font-size: 12px;
            color: #828694;
          }

          .info-value {
            font-size: 12px;
            color: #d0d0d0;
          }
        }
      }

      // 退出登录
      .logout-wrapper {
        display: flex;
        align-items: center;
        padding: 8px 4px;
        gap: 6px;
        cursor: pointer;
        color: #828694;
        font-size: 13px;
        border-radius: 6px;
        transition: background 0.2s;

        &:hover {
          background: #232325;
        }

        img {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}
</style>