<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]
           flex items-center px-[30px]
           bg-sidebar border-b border-sidebar-border
           text-sidebar-foreground"
    :style="{ height: 'var(--header-height)' }"
  >
    <div class="flex items-center gap-md flex-1">
      <BrandLogo :size="40" />
    </div>
    <div class="flex items-center gap-md pr-1">
      <UserDropdown v-if="shouldShowUser" />
    </div>
  </header>
</template>
