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

<script setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import LoginModal from '@/components/LoginModal.vue'
import UserDropdown from '@/components/UserDropdown.vue'
import TestService from '@/api/test'

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

// 测试按钮点击事件
const handleTest = async () => {
  if (testLoading.value) return
  
  testLoading.value = true
  try {
    // 调用一键测试接口（升级会员 + 初始化OSS）
    const res = await TestService.testAll({
      vipLevel: 1,
      totalStorage: 10 * 1024 * 1024 * 1024, // 10GB
      totalQuota: 10000
    })
    
    if (res.code === 0) {
      message.success('测试成功！已升级会员并创建OSS目录', 3)
      console.log('OSS初始化信息:', res.data)
    } else {
      message.error(res.msg || '测试失败', 3)
    }
  } catch (error) {
    console.error('测试失败:', error)
    message.error(error?.response?.data?.msg || error?.message || '测试失败', 3)
  } finally {
    testLoading.value = 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]">
          <!-- 测试按钮（仅开发环境显示） -->
          <button 
            v-if="shouldShowUser"
            class="btn-test-nav" 
            :disabled="testLoading"
            @click="handleTest"
          >
            {{ testLoading ? '测试中...' : '测试' }}
          </button>
          
          <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: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-blue);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary-nav:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
  filter: brightness(1.03);
}

.btn-test-nav {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-button);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
}

.btn-test-nav:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-test-nav:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>