# Custom Nav Bar 通用导航栏组件

这是一个融合了多个导航栏版本的通用组件，支持多种配置选项。

## 功能特性

- ✅ 可配置背景颜色
- ✅ 可配置标题颜色
- ✅ 可选的返回按钮
- ✅ 可选的搜索按钮
- ✅ 可配置标题对齐方式
- ✅ 支持自定义事件处理
- ✅ 响应式设计，适配不同设备

## 使用方法

### 基础用法

```vue
<template>
  <!-- 基础导航栏 -->
  <custom-nav-bar title="首页" />
</template>
```

### 带返回按钮的导航栏

```vue
<template>
  <!-- 带返回按钮的导航栏 -->
  <custom-nav-bar 
    title="详情页" 
    :show-back="true"
    background-color="#ff803a"
    title-color="#ffffff"
  />
</template>
```

### 带搜索按钮的导航栏

```vue
<template>
  <!-- 带搜索按钮的导航栏 -->
  <custom-nav-bar 
    title="搜索" 
    :show-search="true"
    @search="handleSearch"
  />
</template>
```

### 完整配置示例

```vue
<template>
  <custom-nav-bar 
    title="我的页面"
    :show-back="true"
    :show-search="true"
    background-color="#ff803a"
    title-color="#ffffff"
    icon-color="#ffffff"
    title-align="center"
    @back="handleBack"
    @search="handleSearch"
  />
</template>

<script setup>
const handleBack = () => {
  console.log('返回按钮被点击')
}

const handleSearch = () => {
  console.log('搜索按钮被点击')
}
</script>
```

## 属性说明

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| title | String | '标题' | 导航栏标题 |
| backgroundColor | String | '#ffddca' | 背景颜色 |
| titleColor | String | '#3d3d3d' | 标题颜色 |
| iconColor | String | '#888' | 图标颜色 |
| showBack | Boolean | false | 是否显示返回按钮 |
| showSearch | Boolean | false | 是否显示搜索按钮 |
| titleAlign | String | 'center' | 标题对齐方式 ('left', 'center', 'right') |
| onBack | Function | null | 返回按钮点击回调函数 |
| onSearch | Function | null | 搜索按钮点击回调函数 |

## 事件说明

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| back | 返回按钮点击事件 | 无 |
| search | 搜索按钮点击事件 | 无 |

## 样式定制

组件使用 SCSS 编写，支持通过 CSS 变量或覆盖样式进行定制。主要样式类：

- `.layout` - 整体布局容器
- `.navbar` - 导航栏容器
- `.titleBar` - 标题栏区域
- `.title` - 标题文本
- `.back-button` - 返回按钮
- `.search` - 搜索按钮

## 注意事项

1. 组件会自动处理状态栏高度，确保在不同设备上正确显示
2. 返回按钮默认使用 `navigateBack(1)` 进行页面返回
3. 搜索按钮需要配合 `showSearch` 属性使用
4. 标题对齐方式会影响按钮的布局，建议根据实际需求调整