richarjiang
c12329bc96
- 删除目标管理演示页面的代码，简化项目结构 - 更新底部导航，移除目标管理演示页面的路由 - 调整相关组件的样式和逻辑，确保界面一致性 - 优化颜色常量的使用，提升视觉效果
202 lines
4.8 KiB
Markdown
202 lines
4.8 KiB
Markdown
# 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 组件与整个应用的设计系统完美融合，提供了优美且一致的用户体验。
|