Header 页面头部

页面顶部导航栏

---

功能描述

页面顶部固定的导航栏，包含返回、标题、操作按钮等。

---

属性规范

属性	类型	必需	默认值	说明
title	string | node	N	-	标题
subtitle	string	N	-	副标题
left	node	N	-	左侧内容
right	node	N	-	右侧内容
showBack	boolean	N	auto	是否显示返回按钮
onBack	() => void	N	-	返回回调
transparent	boolean	N	false	透明背景
border	boolean	N	true	是否显示底部边框

---

布局规范

标准布局

┌─────────────────────────────────────────────────┐
│  [←]              标题              [操作]      │
│                   副标题                        │
└─────────────────────────────────────────────────┘

仅标题

┌─────────────────────────────────────────────────┐
│                    标题                         │
└─────────────────────────────────────────────────┘

左右对称

┌─────────────────────────────────────────────────┐
│  [取消]           标题           [完成]         │
└─────────────────────────────────────────────────┘

自定义标题区

┌─────────────────────────────────────────────────┐
│  [←]    [下拉选择器 ▼]          [搜索] [更多]  │
└─────────────────────────────────────────────────┘

---

行为规范

必须 (MUST)

1. 固定在页面顶部
2. 适配顶部安全区域
3. 返回按钮可点击返回上一页
4. 标题居中（或左对齐，保持一致）

建议 (SHOULD)

1. 标题超长时截断显示
2. iOS 左滑返回时，返回按钮同步动画
3. 有 left/right 时自动平衡布局

可选 (MAY)

1. 支持滚动时透明度变化
2. 支持大标题折叠效果

---

设计标注

尺寸规格

部分	规格
高度	44-56px
内边距	16px
标题字号	17px (iOS) / 20px (Android)
副标题字号	13px
图标尺寸	24px
按钮触摸区域	44x44px

颜色规格

部分	颜色
背景	--color-background
标题	--color-foreground
图标	--color-foreground
边框	--color-border

---

变体

透明头部

用于详情页或有背景图的页面：

transparent: true
border: false

图标和文字需要确保在任何背景上可见（使用阴影或固定颜色）。

搜索头部

┌─────────────────────────────────────────────────┐
│  [←]   [🔍 搜索...]                   [取消]   │
└─────────────────────────────────────────────────┘

大标题头部

┌─────────────────────────────────────────────────┐
│  [←]                                   [操作]   │
│                                                 │
│  大标题                                         │
└─────────────────────────────────────────────────┘

滚动时折叠为标准头部。

---

可访问性

要求	说明
返回按钮 aria-label	"返回"
标题	作为页面标题通告
操作按钮	明确的 aria-label