src/App.vue

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<template>
  <div class="min-h-screen bg-gray-50 text-gray-900 font-sans">
    <nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center cursor-pointer" @click="router.push('/')">
              <span class="text-xl font-bold text-blue-900">FinanceAdvisor</span>
            </div>
            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
              <router-link to="/" class="border-transparent text-gray-500 hover:border-blue-800 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</router-link>
              <router-link v-if="authStore.isAuthenticated()" to="/dashboard" class="border-transparent text-gray-500 hover:border-blue-800 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">投资仪表板</router-link>
              <router-link v-if="authStore.isAuthenticated()" to="/chat" class="border-transparent text-gray-500 hover:border-blue-800 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">AI咨询</router-link>
              <router-link v-if="authStore.isAuthenticated()" to="/assessment" class="border-transparent text-gray-500 hover:border-blue-800 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">风险评估</router-link>
            </div>
          </div>
          <div class="flex items-center">
            <div v-if="!authStore.isAuthenticated()" class="flex space-x-4">
              <router-link to="/login" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">登录</router-link>
              <router-link to="/login" class="bg-blue-900 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-800">注册</router-link>
            </div>
            <div v-else class="flex items-center space-x-4">
              <span class="text-sm text-gray-700">欢迎, {{ authStore.user?.name || '用户' }}</span>
              <router-link to="/profile" class="text-gray-500 hover:text-gray-900">个人中心</router-link>
              <button @click="handleLogout" class="text-gray-500 hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium">退出</button>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style>
/* Global styles if needed */
body {
  @apply bg-gray-50;
}
</style>