## 顶部导航栏组件

组件名称：顶部导航栏组件

## 功能特性

1. **自适应状态栏高度**：自动获取设备状态栏高度并适配
2. **返回功能**：左侧返回按钮，支持自定义返回事件
3. **标题显示**：支持传入标题文本或使用插槽自定义标题内容
4. **右侧扩展**：支持右侧插槽，可添加自定义操作按钮
5. **响应式设计**：适配不同屏幕尺寸

## 使用方法

### 基础用法

```vue
<template>
  <TopNavBar title="服务工单" />
</template>

<script setup>
import TopNavBar from './components/TopNavBar/index.vue'
</script>
```

### 自定义标题

```vue
<template>
  <TopNavBar>
    <template #title>
      <text class="custom-title">自定义标题</text>
    </template>
  </TopNavBar>
</template>
```

### 自定义右侧操作

```vue
<template>
  <TopNavBar title="服务工单">
    <template #right>
      <image class="menu-icon" src="./images/menu.png" @click="showMenu" />
    </template>
  </TopNavBar>
</template>
```

### 自定义返回事件

```vue
<template>
  <TopNavBar title="服务工单" @back="handleBack" />
</template>

<script setup>
const handleBack = () => {
  // 自定义返回逻辑
  console.log('自定义返回')
}
</script>
```

## Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| title | String | '' | 导航栏标题 |
| showBack | Boolean | true | 是否显示返回按钮 |

## Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| back | 点击返回按钮时触发 | - |

## Slots

| 插槽名 | 说明 |
|--------|------|
| title | 自定义标题内容 |
| right | 自定义右侧操作区域 |

## 样式定制

组件支持通过CSS变量进行样式定制：

```scss
.top-nav-bar {
  --nav-bg-color: #fff;           // 背景色
  --nav-title-color: #333;        // 标题颜色
  --nav-border-color: #f0f0f0;    // 边框颜色
}
```

## 技术实现

- 使用 uniapp + Vue3 组合式 API 开发
- 自动获取系统状态栏高度进行适配
- 使用 fixed 定位实现固定顶部效果
- 支持插槽扩展，提供良好的可定制性
- 响应式设计，适配不同设备屏幕

## 兼容性

- 微信小程序
- H5
- App

## 备注

仅供学习、交流使用，请勿用于商业用途。