<!-- src/components/Header.vue -->
<template>
  <div class="header">
    <!-- 左侧导航 -->
    <nav class="nav-left">
      <a href="/" class="nav-item">首页</a>
      <a href="/layout/market" class="nav-item">算力中心</a>
      <a href="/cloud-server" class="nav-item">云主机</a>
    </nav>

    <!-- 右侧导航 -->
    <nav class="nav-right">
      <a href="/docs" class="nav-item">用户文档</a>
      <a href="/controlPanel" class="nav-item active">控制台</a>
      <button class="login-btn" @click="goToLogin">登录/注册</button>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 使用 Vue Router 编程式导航跳转登录页（避免页面刷新）
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 64px;
  box-sizing: border-box;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-left {
  padding-left: 8px; /* 增加左侧内边距 */
}

.nav-right {
  padding-right: 8px; /* 增加右侧内边距 */
}

.nav-item {
  font-size: 15px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 8px 4px;
  position: relative;
  font-weight: 500;
}

.nav-item:hover {
  color: #1890ff;
}

.nav-item.active {
  color: #1890ff;
  font-weight: 600;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 4px;
  right: 4px;
  height: 2px;
  background-color: #1890ff;
  border-radius: 1px;
}

.login-btn {
  padding: 8px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
}

.login-btn:hover {
  background-color: #096dd9;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header {
    padding: 16px 20px;
  }
  
  .nav-left,
  .nav-right {
    gap: 20px;
  }
}
</style>