# Header组件改进：页面标题与返回顶部功能

## 功能概述

已成功改进Header组件，实现了两个重要功能：
1. **显示页面标题而非网站标题**：在报告页面中显示具体的报告标题
2. **点击标题返回顶部**：当显示页面标题时，点击可快速返回页面顶部

## 核心改进

### 1. Header组件Props扩展

```typescript
export interface Props {
  title?: string;
  description?: string;
  navigationItems?: Array<{ label: string; href: string; icon?: string }>;
  className?: string;
  pageTitle?: string;      // 新增：页面标题，优先于通用标题
  showPageTitle?: boolean; // 新增：是否显示页面标题而不是网站标题
}
```

### 2. 智能标题显示逻辑

- **默认行为**：显示网站标题 "Jiao77 - AI & Technology Explorer"
- **报告页面**：当设置 `showPageTitle={true}` 时，显示具体的页面标题
- **动态切换**：根据 `showPageTitle` 和 `pageTitle` 的值智能选择显示内容

### 3. 交互行为优化

#### 网站标题模式（默认）
- 显示：`"Jiao77 - AI & Technology Explorer"`
- 点击行为：`<a href="/">` - 返回首页
- 样式：链接样式

#### 页面标题模式（报告页面）
- 显示：具体的报告标题（如 "基于AI的集成电路版图识别开题报告"）
- 点击行为：`<button onclick="scrollToTop()">` - 平滑滚动到页面顶部
- 样式：按钮样式，带悬停效果

### 4. 样式改进

```css
.scroll-to-top-btn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.scroll-to-top-btn:hover {
  transform: translateY(-1px);
  opacity: 0.8;
}

.scroll-to-top-btn:active {
  transform: translateY(0);
}
```

## 应用实例

### 20250609报告页面
```astro
<Header 
  pageTitle="基于AI的集成电路版图识别开题报告"
  showPageTitle={true}
  description="面向版图模板识别的AI技术路径探索"
/>
```

### 模板页面
```astro
<Header 
  pageTitle={reportConfig.title}
  showPageTitle={true}
  description={reportConfig.subtitle}
/>
```

### 普通页面（首页等）
```astro
<Header /> <!-- 使用默认配置，显示网站标题 -->
```

## 技术实现

### 1. 条件渲染逻辑
```astro
{titleClickAction === 'scroll-to-top' ? (
  <button class="brand-link scroll-to-top-btn" aria-label="返回页面顶部">
    <h1 class="brand-title">{displayTitle}</h1>
  </button>
) : (
  <a href="/" class="brand-link" aria-label="返回首页">
    <h1 class="brand-title">{displayTitle}</h1>
  </a>
)}
```

### 2. 滚动到顶部功能
```typescript
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

function initScrollToTop() {
  const scrollButtons = document.querySelectorAll('.scroll-to-top-btn');
  scrollButtons.forEach(button => {
    button.addEventListener('click', scrollToTop);
  });
}
```

### 3. 多页面支持
- 支持传统页面导航（DOMContentLoaded）
- 支持Astro页面导航（astro:page-load事件）
- 自动初始化和事件绑定

## 用户体验优化

### 1. 视觉反馈
- **悬停效果**：鼠标悬停时轻微上移和透明度变化
- **点击反馈**：点击时的视觉响应
- **平滑过渡**：所有状态变化都有平滑的过渡动画

### 2. 无障碍支持
- **语义化标签**：使用正确的 `<button>` 和 `<a>` 标签
- **ARIA标签**：提供清晰的可访问性标签
- **键盘支持**：完全支持键盘导航

### 3. 响应式设计
- 继承原有的响应式布局
- 在移动设备上保持良好的可用性
- 标题文本自适应截断（ellipsis）

## 页面兼容性

### ✅ 已更新页面
- `/report/20250609/` - 20250609报告页面
- `/report/template/` - 报告模板页面

### 🔄 可扩展页面
所有其他报告页面都可以通过相同方式快速升级：

```astro
<Header 
  pageTitle="你的报告标题"
  showPageTitle={true}
  description="报告描述"
/>
```

### 📋 保持默认行为的页面
- 首页 `/`
- 报告导航页 `/report/`
- 组件演示页 `/components-demo/`
- 其他导航页面

## 测试说明

### 功能测试
1. **报告页面**：访问 `/report/20250609/` 或 `/report/template/`
   - 验证Header显示报告标题而非网站标题
   - 点击Header标题，页面应平滑滚动到顶部

2. **普通页面**：访问首页 `/`
   - 验证Header显示网站标题
   - 点击Header标题，应导航到首页

3. **多次测试**：
   - 在不同页面间导航
   - 测试滚动到页面中间后点击标题的效果
   - 验证移动设备上的表现

### 浏览器兼容性
- ✅ 现代浏览器（Chrome, Firefox, Safari, Edge）
- ✅ 移动浏览器
- ✅ 支持 `scrollTo` API 的所有浏览器

这个改进让Header组件更加智能和用户友好，在不同页面类型中提供了最适合的交互体验！