pc_nuxt/app/layouts/default.vue

<template>
  <div class="min-h-screen flex flex-col bg-slate-50">
    <!-- 顶部导航 -->
    <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200/60">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <!-- Logo -->
          <NuxtLink to="/" class="flex items-center gap-2 shrink-0">
            <div class="w-8 h-8 rounded-lg bg-indigo-500 flex items-center justify-center">
              <span class="text-white font-bold text-sm">奇</span>
            </div>
            <span class="text-lg font-semibold text-slate-800 hidden sm:block">奇想宇宙</span>
          </NuxtLink>

          <!-- 导航链接 -->
          <nav class="hidden md:flex items-center gap-1">
            <NuxtLink
              v-for="item in navItems"
              :key="item.to"
              :to="item.to"
              class="px-3 py-2 text-sm rounded-lg text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 transition-colors duration-200"
              active-class="text-indigo-600 bg-indigo-50 font-medium"
            >
              {{ item.label }}
            </NuxtLink>
          </nav>

          <!-- 右侧操作 -->
          <div class="flex items-center gap-3">
            <template v-if="isLogin">
              <span class="text-xs text-slate-500 hidden sm:inline">
                余额 <span class="text-indigo-600 font-semibold">{{ userInfo.balance }}</span> 点
              </span>
              <NuxtLink
                to="/works"
                class="px-3 py-2 text-sm text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors duration-200"
              >
                我的作品
              </NuxtLink>
              <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
                <span class="text-indigo-600 text-xs font-bold">
                  {{ (userInfo.nickname || userInfo.user_name || '用')[0] }}
                </span>
              </div>
            </template>
            <button
              v-else
              class="px-4 py-2 text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600 rounded-lg transition-colors duration-200 cursor-pointer"
              @click="showLogin = true"
            >
              登录
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="flex-1">
      <slot />
    </main>

    <!-- 页脚 -->
    <footer class="border-t border-slate-200 bg-white py-8 mt-auto">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-sm text-slate-400">
        <p>&copy; {{ new Date().getFullYear() }} 奇想宇宙 AIonline. All rights reserved.</p>
      </div>
    </footer>

    <!-- 登录弹窗 -->
    <LoginModal
      v-if="showLogin"
      @close="showLogin = false"
      @login-success="onLoginSuccess"
    />
  </div>
</template>

<script setup>
const navItems = [
  { label: '首页', to: '/' },
  { label: 'AI 取名', to: '/ai-name' },
  { label: '动漫头像', to: '/anime-avatar' },
  { label: '充值', to: '/recharge' },
]

const { userInfo, isLogin, showLogin, setLogin } = useUser()

function onLoginSuccess(data) {
  setLogin(data)
  showLogin.value = false
}
</script>