astro-jiao77.cn/docs/HEADER_IMPROVEMENTS.md

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

功能概述

已成功改进Header组件，实现了两个重要功能：

1. 显示页面标题而非网站标题：在报告页面中显示具体的报告标题
2. 点击标题返回顶部：当显示页面标题时，点击可快速返回页面顶部

核心改进

1. Header组件Props扩展

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. 样式改进

.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报告页面

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

模板页面

<Header 
  pageTitle={reportConfig.title}
  showPageTitle={true}
  description={reportConfig.subtitle}
/>

普通页面（首页等）

<Header /> <!-- 使用默认配置，显示网站标题 -->

技术实现

1. 条件渲染逻辑

{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. 滚动到顶部功能

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/ - 报告模板页面

🔄 可扩展页面

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

<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组件更加智能和用户友好，在不同页面类型中提供了最适合的交互体验！