quyun-v2/frontend/portal/src/components/TopNavbar.vue

<template>
  <nav class="fixed top-0 w-full z-50 bg-white border-b border-slate-200 h-16">
    <div class="mx-auto max-w-screen-xl h-full flex items-center justify-between">
      <!-- Left: Logo -->
      <router-link to="/" class="flex items-center gap-2">
        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold text-xl">Q</div>
        <span class="text-xl font-bold text-slate-900 hidden sm:block">Quyun</span>
      </router-link>

      <!-- Center-Left: Nav Links (Desktop) -->
      <div class="hidden md:flex items-center space-x-8">
        <router-link to="/" class="text-slate-600 font-medium hover:text-primary-600" active-class="text-primary-600">首页</router-link>
        <router-link to="/explore" class="text-slate-600 font-medium hover:text-primary-600" active-class="text-primary-600">发现</router-link>
        <router-link to="/topics" class="text-slate-600 font-medium hover:text-primary-600" active-class="text-primary-600">专题</router-link>
      </div>

      <!-- Center-Right: Global Search -->
      <div class="hidden sm:flex flex-1 max-w-md mx-8">
        <div class="relative w-full">
          <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
          <input 
            type="text" 
            placeholder="搜索感兴趣的内容..." 
            class="w-full h-10 pl-10 pr-4 rounded-full bg-slate-100 border-none focus:bg-white focus:ring-2 focus:ring-primary-100 text-sm transition-all"
          >
        </div>
      </div>

      <!-- Right: User Actions -->
      <div class="flex items-center gap-4">
        <template v-if="isLoggedIn">
           <!-- Notification -->
           <router-link to="/me/notifications" class="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-50 text-slate-600">
             <i class="pi pi-bell text-xl"></i>
             <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
           </router-link>
           
           <!-- Creator Entry -->
           <router-link to="/creator/apply" class="hidden sm:flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg border border-slate-200">
             <i class="pi pi-pencil"></i>
             <span>创作</span>
           </router-link>

           <!-- Avatar Dropdown -->
           <div class="relative group h-full flex items-center">
              <button class="w-9 h-9 rounded-full overflow-hidden border border-slate-200 focus:ring-2 ring-primary-100">
                <img :src="user.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${user.id}`" alt="User" class="w-full h-full object-cover">
              </button>
              <!-- Dropdown Menu -->
              <div class="absolute right-0 top-full pt-2 w-48 hidden group-hover:block">
                  <div class="bg-white rounded-xl shadow-lg border border-slate-100 py-1">
                    <div class="px-4 py-3 border-b border-slate-50">
                       <p class="text-sm font-bold text-slate-900">{{ user.nickname }}</p>
                       <p class="text-xs text-slate-500 truncate">{{ user.phone }}</p>
                    </div>
                    <router-link to="/me" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">个人中心</router-link>
                    <router-link to="/creator" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">创作者中心</router-link>
                    <div class="border-t border-slate-50 mt-1"></div>
                    <button @click="logout" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">退出登录</button>
                  </div>
              </div>
           </div>
        </template>
        
        <template v-else>
           <router-link to="/auth/login" class="bg-primary-600 text-white px-6 py-2 rounded-full font-medium hover:bg-primary-700 transition-all shadow-sm shadow-primary-100 active:scale-95">登录 / 注册</router-link>
        </template>
        
        <!-- Mobile Menu Button -->
        <button class="md:hidden w-10 h-10 flex items-center justify-center text-slate-600">
           <i class="pi pi-bars text-xl"></i>
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const isLoggedIn = ref(false);
const user = ref({});
const router = useRouter();
const route = useRoute();

const checkAuth = () => {
    const token = localStorage.getItem('token');
    const userStr = localStorage.getItem('user');
    if (token && userStr) {
        isLoggedIn.value = true;
        try {
            user.value = JSON.parse(userStr);
        } catch (e) {
            isLoggedIn.value = false;
        }
    } else {
        isLoggedIn.value = false;
    }
};

onMounted(() => {
    checkAuth();
});

// Watch route changes to refresh auth state (e.g. after login redirect)
watch(() => route.path, () => {
    checkAuth();
});

const logout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    isLoggedIn.value = false;
    user.value = {};
    router.push('/');
};
</script>