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

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

const styles = {
  background: 'var(--color-surface)',
  color: 'var(--color-text)'
}
// const route = useRoute()
const userStore = useUserStore()
const showLogin = ref(false)

// 计算是否应该显示用户组件
// 判断用户是否有用户名，有用户名说明用户信息已加载完成
// 使用 userStore.displayName 作为响应式依赖，确保用户信息变化时更新
const shouldShowUser = computed(() => {
  // 检查用户是否有用户名（nickname 或 wechatNickname）
  // 有用户名说明用户信息已加载，可以显示用户组件
  const hasUserName = !!userStore.displayName && userStore.displayName !== '未命名用户'
  
  return hasUserName 
})

// function go(path) {
//   router.push(path)
// }
</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>
          <template v-else>
            <button class="btn-primary-nav" @click="showLogin = true">免费试用</button>
          </template>
        </div>
      </div>
    </div>
  </header>
  <LoginModal v-model:open="showLogin" />
</template>

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

.nav-link {
  height: 70px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0 6px;
  color: var(--color-text-secondary);
  position: relative;
  transition: color .2s ease;
}

.nav-link:hover {
  color: var(--color-text);
}

.nav-link--active {
  color: var(--color-text);
  font-weight: 600;
}

.nav-link--active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
  opacity: 0.55;
  border-radius: 2px;
}

.btn-primary-nav {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--glow-primary);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary-nav:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-primary);
  filter: brightness(1.03);
}
</style>