feat: 功能

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

@@ -1,8 +1,8 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useUserStore } from '@/stores/user'
 import LoginModal from '@/components/LoginModal.vue'
-import TokenInput from '@/components/TokenInput.vue'
+import UserDropdown from '@/components/UserDropdown.vue'
 
 const styles = {
   background: 'var(--color-surface)',
@@ -12,6 +12,17 @@ const styles = {
 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)
 // }
@@ -28,11 +39,9 @@ const showLogin = ref(false)
           <!-- 左侧可放 logo 或其他内容 -->
         </div>
         <div class="flex items-center gap-4 pr-[35px]">
-          <!-- Token 输入（仅开发/测试环境） -->
-          <TokenInput />
           
-          <template v-if="userStore.isLoggedIn && userStore.displayAvatar">
-            <img class="w-8 h-8 rounded-full" :src="userStore.displayAvatar" alt="avatar" />
+          <template v-if="shouldShowUser">
+            <UserDropdown />
           </template>
           <template v-else>
             <button class="btn-primary-nav" @click="showLogin = true">免费试用</button>