<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import UserDropdown from '@/components/UserDropdown.vue'
import BrandLogo from '@/components/BrandLogo.vue'

const userStore = useUserStore()

// 计算是否应该显示用户组件
const shouldShowUser = computed(() => {
  const hasUserName = !!userStore.displayName && userStore.displayName !== '未命名用户'
  return hasUserName
})
</script>

<template>
  <header
    class="fixed top-0 left-0 right-0 z-[100]
           h-[70px] flex items-center px-[30px]
           bg-gray-900 text-white
           border-b border-border"
  >
    <div class="flex items-center gap-3 flex-1">
      <BrandLogo :size="40" />
    </div>
    <div class="flex items-center gap-4 pr-1">
      <UserDropdown v-if="shouldShowUser" />
    </div>
  </header>
</template>
