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