astro-jiao77.cn/src/components/Header.astro

---
export interface Props {
  title?: string;
  description?: string;
  navigationItems?: Array<{ label: string; href: string; icon?: string }>;
  className?: string;
}

import GlowButton from './common/GlowButton.astro';

const { 
  title = 'Jiao77 - AI & Technology Explorer',
  description,
  navigationItems,
  className = ''
} = Astro.props;

const defaultNavigation = [
  { label: '首页', href: '/', icon: 'fas fa-home' },
  { label: '报告导航', href: '/report', icon: 'fas fa-chart-line' },
  { label: '关于我', href: '/about', icon: 'fas fa-user-astronaut' },
  { label: '组件测试', href: '/components-demo', icon: 'fas fa-user-astronaut' },
];

const links = navigationItems && navigationItems.length > 0 ? navigationItems : defaultNavigation;
---

<header id="site-header" class={`site-header ${className}`}>
  <div class="header-inner">
    <div class="header-brand">
      <a href="/" class="brand-link" aria-label="返回首页">
        <h1 class="brand-title">{title}</h1>
      </a>
      {description && (
        <p class="brand-description">{description}</p>
      )}
    </div>
    <nav class="main-nav" aria-label="主导航">
      {links.map((item) => (
        <GlowButton
          href={item.href}
          icon={item.icon}
          ariaLabel={item.label}
          className="nav-button"
          size="sm"
          variant="translucent"
        >
          {item.label}
        </GlowButton>
      ))}
    </nav>
  </div>
</header>

<style>
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: rgba(248, 250, 255, 0.18);
    backdrop-filter: blur(30px) saturate(150%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.45s cubic-bezier(0.4, 0.14, 0.2, 1), opacity 0.45s ease;
    overflow: clip;
  }

  .site-header::before,
  .site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .site-header::before {
    background:
      radial-gradient(
        circle at var(--pointer-x, 50%) var(--pointer-y, -40%),
        rgba(96, 165, 250, 0.65),
        rgba(59, 130, 246, 0.05) 42%,
        transparent 65%
      ),
      radial-gradient(
        320px circle at calc(var(--pointer-x, 50%) + 10%) calc(var(--pointer-y, -40%) + 8%),
        rgba(236, 72, 153, 0.35),
        transparent 60%
      );
    filter: saturate(120%) blur(0.65rem);
    mix-blend-mode: screen;
    opacity: calc(var(--pointer-intensity, 0) * 0.75);
    transition: opacity 0.6s ease;
  }

  .site-header::after {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 60%)
      , radial-gradient(80% 160% at 120% -40%, rgba(59, 130, 246, 0.18), transparent 70%);
    opacity: 0.4;
  }

  .site-header.hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }

  .site-header.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
  }

  .site-header.pinned {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  }

  .site-header.showing {
    animation: header-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-header.hiding {
    animation: header-slide-out 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    min-height: 72px;
  }
  
  .header-brand {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  
  .brand-link {
    text-decoration: none;
  }

  .brand-title {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: #011a2d;
    margin: 0;
    background: linear-gradient(135deg, #011a2d, #2c4a6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-description {
    margin: 0;
    font-size: 0.9rem;
    color: #334155;
    max-width: 32rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .main-nav {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
  }

  .nav-button {
    min-width: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .nav-button :global(.glow-button__content) {
    gap: 0.4rem;
    color: #0f172a;
  }

  .nav-button :global(.glow-button__icon) {
    font-size: 0.9rem;
    color: inherit;
  }

  @keyframes header-slide-in {
    0% {
      transform: translateY(-110%);
      opacity: 0;
      filter: blur(6px);
    }
    60% {
      filter: blur(0);
    }
    100% {
      transform: translateY(0);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes header-slide-out {
    0% {
      transform: translateY(0);
      opacity: 1;
      filter: blur(0);
    }
    100% {
      transform: translateY(-120%);
      opacity: 0;
      filter: blur(6px);
    }
  }
  
  @media (max-width: 768px) {
    .header-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
      padding: 0.75rem 1.25rem 1.25rem;
      min-height: unset;
    }

    .brand-title {
      font-size: 1.35rem;
    }

    .brand-description {
      white-space: normal;
    }

    .main-nav {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .nav-button {
      flex: 1 1 auto;
      justify-content: center;
    }
  }
</style>

<script>
  import '../scripts/header.ts';
</script>