封装通用导航栏组件

components/custom-nav-bar/README.md

@@ -0,0 +1,118 @@
+# 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. 标题对齐方式会影响按钮的布局，建议根据实际需求调整 

components/custom-nav-bar/custom-nav-bar.vue

@@ -24,7 +24,7 @@
       </view>
     </view>
 
-    <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
+    <view v-if="fill" :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
   </view>
 </template>
 
@@ -50,7 +50,7 @@ const props = defineProps({
   // 背景颜色
   backgroundColor: {
     type: String,
-    default: '#ffddca',
+    default: '#fff',
   },
   // 标题颜色
   titleColor: {
@@ -87,6 +87,11 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  //是否填充
+  fill: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 // 定义事件

pages/agents/requestAgent.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="agents-page">
     <!-- 头部区域 -->
-    <custom-nav-bar3 title=""></custom-nav-bar3>
+    <custom-nav-bar :fill="false" :show-back="true" background-color="transparent" title="" />
     <view class="header">
       <image :src="commonEnum.INVITE" class="agent-background" mode="aspectFill"></image>
     </view>

pages/cashFlow/cashFlow.vue

@@ -6,10 +6,13 @@
     class="page"
   >
     <!-- 头部区域 -->
-    <custom-nav-bar4
-      :style="{ background: '#ff803a !important' }"
+    <custom-nav-bar
+      :fill="false"
+      :show-back="true"
+      background-color="#ff803a"
       title="收支明细"
-    ></custom-nav-bar4>
+      title-color="white"
+    ></custom-nav-bar>
     <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
     <view
       :style="{

pages/index/index.vue

@@ -2,7 +2,11 @@
   <view class="home-container">
     <!-- 头部信息 -->
 
-    <custom-nav-bar title="福鼎创特物联科技有限公司" title-align="left"></custom-nav-bar>
+    <custom-nav-bar
+      background-color="#FFDECB"
+      title="福鼎创特物联科技有限公司"
+      title-align="left"
+    ></custom-nav-bar>
 
     <!-- 公告栏 -->
     <announcement-bar

pages/lease/lease.vue

@@ -2,7 +2,12 @@
   <view class="lease-page">
     <!-- 头部区域 -->
 
-    <custom-nav-bar background-color="#FFDECB" title="租赁申请" title-align="center" />
+    <custom-nav-bar
+      :fill="false"
+      background-color="#FFDECB"
+      title="租赁申请"
+      title-align="center"
+    />
     <view class="header">
       <image
         :src="commonEnum.FIRE_BACKGROUND_FULL"