feat: 移除目标管理演示页面并优化相关组件

- 删除目标管理演示页面的代码，简化项目结构
- 更新底部导航，移除目标管理演示页面的路由
- 调整相关组件的样式和逻辑，确保界面一致性
- 优化颜色常量的使用，提升视觉效果

docs/headerbar-design-system.md

@@ -0,0 +1,201 @@
+# 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 组件与整个应用的设计系统完美融合，提供了优美且一致的用户体验。