sionrui/frontend/app/web-gold/src/components/TopNav.vue

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

const styles = {
  background: 'var(--color-gray-900)',
  color: 'var(--color-text-inverse)'
}

const userStore = useUserStore()

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

<template>
  <header class="header-box" :style="styles">
    <div>
      <div class="h-[70px] flex items-center">
        <div class="flex items-center gap-3 flex-1 pl-[30px]">
          <!-- 左侧可放 logo 或其他内容 -->
        </div>
        <div class="flex items-center gap-4 pr-[35px]">
          <template v-if="shouldShowUser">
            <UserDropdown />
          </template>
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped>
.header-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
}
</style>