happy-life-star/web-flowith/src/components/layout/AppHeader.vue

<template>
  <header class="app-header">
    <div class="header-content">
      <!-- Logo -->
      <router-link to="/" class="logo">
        <span class="logo-text">开心APP</span>
      </router-link>

      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <router-link to="/chat" class="nav-link">聊天</router-link>
        <router-link to="/diary" class="nav-link">日记</router-link>
        <router-link to="/dashboard" class="nav-link">展板</router-link>
      </nav>

      <!-- 右侧操作区 -->
      <div class="header-actions">
        <!-- 未登录状态 -->
        <template v-if="!userStore.isLoggedIn">
          <a-button type="text" @click="$router.push('/login')" class="login-btn">
            登录
          </a-button>
          <a-button type="primary" @click="$router.push('/chat')" class="start-btn">
            免费开始
          </a-button>
        </template>

        <!-- 已登录状态 -->
        <template v-else>
          <a-dropdown>
            <a-button type="text" class="user-btn">
              <UserOutlined />
              {{ userStore.userInfo?.nickname || userStore.userInfo?.account || '用户' }}
              <DownOutlined />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile" @click="$router.push('/dashboard')">
                  <UserOutlined />
                  个人中心
                </a-menu-item>
                <a-menu-item key="settings" @click="$router.push('/settings')">
                  <SettingOutlined />
                  设置
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout" @click="handleLogout">
                  <LogoutOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import {
    UserOutlined,
    DownOutlined,
    SettingOutlined,
    LogoutOutlined
  } from '@ant-design/icons-vue'
  import { useUserStore } from '@/stores/user'

  const router = useRouter()
  const userStore = useUserStore()

  // 退出登录
  const handleLogout = async () => {
    try {
      await userStore.logout()
      message.success('退出登录成功')
      router.push('/')
    } catch (error) {
      message.error('退出登录失败')
    }
  }
</script>

<style lang="scss" scoped>
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e8e8e8;
    padding: 0;
    height: 64px;
    line-height: 64px;
  }

  .header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #4A90E2;
    font-weight: bold;
    font-size: 20px;
  }

  .nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .nav-link {
    color: #888888;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;

    &:hover {
      color: #4A90E2;
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .login-btn {
    color: #4A90E2;
    font-weight: 500;

    &:hover {
      color: #4A90E2;
      background: rgba(74, 144, 226, 0.1);
    }
  }

  .user-btn {
    color: #4A90E2;
    font-weight: 500;

    &:hover {
      color: #4A90E2;
      background: rgba(74, 144, 226, 0.1);
    }
  }

  .start-btn {
    border-radius: 20px;
    font-weight: 600;
  }
</style>