YuShiSheJiShi/frontend/src/components/AppHeader.vue

<template>
  <header class="app-header">
    <div class="header-left">
      <router-link to="/" class="logo">
        <span class="logo-text">玉 宗</span>
        <span class="logo-sub">YUZONG JEWELRY</span>
      </router-link>
    </div>
    <nav class="header-nav">
    </nav>
    <div class="header-right">
      <template v-if="isLoggedIn">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="user-dropdown">
            <span class="user-avatar">{{ avatarChar }}</span>
            <span class="user-nickname">{{ userNickname }}</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="user">个人中心</el-dropdown-item>
              <el-dropdown-item command="admin" v-if="isAdmin">管理后台</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <router-link to="/login" class="auth-link">登录</router-link>
        <router-link to="/register" class="auth-link auth-register">注册</router-link>
      </template>
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

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

const isLoggedIn = computed(() => !!userStore.token)
const userNickname = computed(() => userStore.userInfo?.nickname || '用户')
const isAdmin = computed(() => !!userStore.userInfo?.is_admin)
const avatarChar = computed(() => (userStore.userInfo?.nickname || '用')[0])

const handleCommand = (command: string) => {
  if (command === 'user') {
    router.push('/user')
  } else if (command === 'admin') {
    router.push('/admin')
  } else if (command === 'logout') {
    userStore.logout()
    router.push('/login')
  }
}
</script>

<style scoped lang="scss">
$primary-color: #5B7E6B;
$primary-dark: #3D5A4A;
$text-secondary: #6B6B6B;
$text-primary: #2C2C2C;
$border-color: #E8E4DF;
$bg-color: #FAF8F5;

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 32px;
  background-color: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 2px;
  }
  .logo-text {
    font-size: 22px;
    font-weight: 700;
    color: $primary-color;
    letter-spacing: 6px;
    line-height: 1.2;
  }
  .logo-sub {
    font-size: 9px;
    color: $text-secondary;
    letter-spacing: 2.5px;
    font-weight: 400;
    opacity: 0.7;
  }
}

.header-nav {
  display: flex;
  gap: 8px;

  .nav-link {
    color: $text-secondary;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.25s ease;
    font-weight: 500;

    &:hover {
      color: $primary-color;
      background: rgba($primary-color, 0.06);
    }

    &.router-link-active {
      color: #fff;
      background: $primary-color;
    }

    &.admin-link {
      color: #E6A23C;
      &:hover {
        background: rgba(#E6A23C, 0.08);
      }
      &.router-link-active {
        color: #fff;
        background: #E6A23C;
      }
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;

  .auth-link {
    color: $text-secondary;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.25s ease;

    &:hover {
      color: $primary-color;
      background: rgba($primary-color, 0.06);
    }

    &.auth-register {
      background-color: $primary-color;
      color: #fff;

      &:hover {
        background-color: $primary-dark;
      }
    }
  }

  .user-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: $text-primary;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.25s ease;

    &:hover {
      background: rgba($primary-color, 0.06);
      color: $primary-color;
    }
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, $primary-color, $primary-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
  }

  .user-nickname {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>