# HeaderBar 组件设计系统

## 概述

HeaderBar 组件已经与 `Colors.ts` 中的设计系统完全集成，提供了多种变体和优美的 UI 效果。

## 设计理念

### 颜色系统集成
- 完全基于 `Colors.ts` 中定义的语义化颜色系统
- 支持浅色和深色主题自动切换
- 使用透明度创建层次感和视觉深度

### 三种变体设计

#### 1. Default 变体 (默认)
- **背景**: 透明或卡片背景
- **返回按钮**: 绿色强调色背景 (20% 透明度)
- **图标颜色**: 白色 (确保在绿色背景上清晰可见)
- **适用场景**: 标准页面导航

#### 2. Elevated 变体 (提升)
- **背景**: 卡片背景
- **返回按钮**: 主色背景 (15% 透明度) + 边框 (20% 透明度)
- **图标颜色**: 主色
- **边框**: 实线边框
- **适用场景**: 重要页面、模态框、需要突出显示的导航

#### 3. Minimal 变体 (简约)
- **背景**: 页面背景色
- **返回按钮**: 中性色背景 (80% 透明度)
- **图标颜色**: 次要文本色
- **适用场景**: 内容页面、列表页面、需要最小化视觉干扰的场景

## 颜色搭配详解

### 背景色系统
```typescript
// 透明背景
transparent: 'transparent'

// 卡片背景 (浅色主题)
card: palette.gray[25] // #fcfcfd

// 页面背景 (浅色主题)
background: palette.base.white // #ffffff
```

### 按钮背景色
```typescript
// Default 变体
backgroundColor: `${theme.accentGreen}20` // 绿色 20% 透明度

// Elevated 变体
backgroundColor: `${theme.primary}15` // 主色 15% 透明度
borderColor: `${theme.primary}20` // 主色 20% 透明度

// Minimal 变体
backgroundColor: `${theme.neutral100}80` // 中性色 80% 透明度
```

### 文本颜色
```typescript
// 主标题
color: theme.text // 主要文本色

// 次要文本
color: theme.textSecondary // 次要文本色

// 按钮图标
color: theme.onPrimary // 主色上的文字/图标颜色
```

## 使用示例

### 基础用法
```tsx
// 默认透明背景
<HeaderBar
  title="页面标题"
  onBack={() => navigation.goBack()}
/>

// 卡片背景
<HeaderBar
  title="页面标题"
  onBack={() => navigation.goBack()}
  transparent={false}
  showBottomBorder={true}
/>
```

### 变体使用
```tsx
// Elevated 变体 - 重要页面
<HeaderBar
  title="重要操作"
  onBack={() => navigation.goBack()}
  variant="elevated"
  showBottomBorder={true}
/>

// Minimal 变体 - 内容页面
<HeaderBar
  title="内容列表"
  onBack={() => navigation.goBack()}
  variant="minimal"
/>
```

### 自定义右侧内容
```tsx
<HeaderBar
  title="编辑页面"
  onBack={() => navigation.goBack()}
  right={
    <TouchableOpacity onPress={handleSave}>
      <Text style={{ color: theme.primary }}>保存</Text>
    </TouchableOpacity>
  }
  variant="elevated"
/>
```

### 自定义标题
```tsx
<HeaderBar
  title={
    <View>
      <Text style={{ color: theme.text, fontSize: 18, fontWeight: '700' }}>
        主标题
      </Text>
      <Text style={{ color: theme.textSecondary, fontSize: 12 }}>
        副标题
      </Text>
    </View>
  }
  onBack={() => navigation.goBack()}
  variant="elevated"
/>
```

## 视觉层次

### 阴影效果
- 返回按钮添加了微妙的阴影效果
- 增强按钮的立体感和可点击性
- 在浅色和深色主题下都有良好的表现

### 间距系统
- 使用 8px 的基础间距单位
- 标题容器有适当的内边距确保居中
- 按钮有足够的触摸区域 (32x32)

### 字体系统
- 标题字体大小: 18px
- 字重根据变体调整 (700-800)
- 字母间距优化 (-0.3) 提升可读性

## 主题适配

### 浅色主题
- 使用 `palette.gray[900]` 作为主要文本色
- 使用 `palette.gray[25]` 作为卡片背景
- 绿色强调色用于默认按钮

### 深色主题
- 使用 `palette.gray[25]` 作为主要文本色
- 使用 `palette.gray[800]` 作为卡片背景
- 自动调整透明度和对比度

## 最佳实践

1. **选择合适的变体**: 根据页面重要性和视觉需求选择变体
2. **保持一致性**: 在同一应用中保持 HeaderBar 风格的一致性
3. **考虑可访问性**: 确保颜色对比度符合可访问性标准
4. **响应式设计**: 在不同屏幕尺寸下测试显示效果
5. **性能优化**: 避免在 HeaderBar 中放置复杂的交互元素

## 技术实现

### 颜色计算
使用模板字符串和透明度后缀来创建半透明颜色：
```typescript
`${theme.primary}15` // 15% 透明度
`${theme.accentGreen}20` // 20% 透明度
```

### 动态样式
根据变体和主题动态计算样式，确保视觉一致性：
```typescript
const getBackButtonStyle = () => {
  switch (variant) {
    case 'elevated':
      return { backgroundColor: `${theme.primary}15` };
    // ...
  }
};
```

这种设计确保了 HeaderBar 组件与整个应用的设计系统完美融合，提供了优美且一致的用户体验。