统一导航栏组件

src/components/NavBar/NavBar.vue

@@ -0,0 +1,131 @@
+<template>
+  <view class="navbar-container">
+    <!-- 状态栏占位 -->
+    <view :style="{ height: statusBarHeight + 'px' }"></view>
+
+    <!-- 导航栏主体 -->
+    <view class="navbar-content">
+      <!-- 左侧区域 - 返回按钮 -->
+      <view class="navbar-left">
+        <slot name="left">
+          <view class="default-left" @click="handleBack">
+            <image class="arrow-icon" :src="iconMap.ArrowLeft" />
+          </view>
+        </slot>
+      </view>
+
+      <!-- 中间区域 -->
+      <view class="navbar-center">
+        <slot name="title">
+          <text v-if="title" class="title-text">{{ title }}</text>
+        </slot>
+      </view>
+
+      <!-- 右侧区域 -->
+      <view class="navbar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import iconMap from '@/utils/imagesMap'
+
+interface Props {
+  title?: string
+  backFn?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  backFn: undefined,
+})
+
+const emit = defineEmits<{
+  back: []
+}>()
+
+const statusBarHeight = ref(0)
+
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 0
+})
+
+const handleBack = () => {
+  if (props.backFn && typeof props.backFn === 'function') {
+    props.backFn()
+    emit('back')
+  } else {
+    uni.navigateBack({
+      delta: 1,
+      fail: () => {
+        console.warn('返回上一页失败，可能已经到达第一页')
+      },
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar-container {
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.navbar-content {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 15px;
+}
+
+.navbar-left {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 60px;
+  max-width: 120px;
+}
+
+.default-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.arrow-icon {
+  width: 21px;
+  height: 21px;
+}
+
+.navbar-center {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.title-text {
+  overflow: hidden;
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.navbar-right {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 60px;
+  max-width: 120px;
+}
+</style>

src/components/SpreadDesigner/SpreadPDFViewer.vue

@@ -1,11 +1,10 @@
 <template>
   <view class="spread-designer-generic">
-    <view class="navigator-bar">
-      <view class="nav-left">
-        <button class="back-btn" @click="goBack">←</button>
-      </view>
-      <view class="nav-title">{{ navTitle }}</view>
-      <view class="nav-right">
+    <NavBar>
+      <template #title>
+        <text class="nav-title">{{ navTitle }}</text>
+      </template>
+      <template #right>
         <button
           v-for="(button, index) in navButtons"
           :key="index"
@@ -14,8 +13,8 @@
         >
           {{ button.text }}
         </button>
-      </view>
-    </view>
+      </template>
+    </NavBar>
 
     <view class="main-container">
       <Designer
@@ -91,6 +90,7 @@ import '@grapecity-software/spread-sheets-io'
 import '@grapecity-software/spread-sheets-designer-resources-cn'
 import Designer from '@grapecity-software/spread-sheets-designer-vue'
 import { buildFileUrl } from '@/utils/index'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 const props = defineProps({
   businessConfig: {
@@ -1245,6 +1245,14 @@ defineExpose({
   align-items: center;
 }
 
+.nav-title {
+  flex: 1;
+  font-size: 17px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
 .back-btn {
   padding: 0 8px;
   font-size: 18px;

src/components/SpreadDesigner/spreadDesigner.vue

@@ -1,27 +1,25 @@
 <template>
   <view class="spread-designer">
-    <view class="navigator-bar">
-      <view class="nav-left-wrapper">
-        <view class="nav-left">
-          <button class="back-btn" @click="goBack">←</button>
+    <NavBar>
+      <template #title>
+        <view class="nav-title-wrapper">
+          <select
+            v-if="reportList && reportList.length > 0"
+            v-model="selectedReportId"
+            class="report-select"
+            @change="handleReportSelectChange"
+          >
+            <option value="" disabled>-- 选择报告模板 --</option>
+            <option v-for="report in reportList" :key="report.id" :value="report.id">
+              {{ report.reportName }}
+            </option>
+          </select>
         </view>
-        <select
-          v-if="reportList && reportList.length > 0"
-          v-model="selectedReportId"
-          class="report-select"
-          @change="handleReportSelectChange"
-        >
-          <option value="" disabled>-- 选择报告模板 --</option>
-          <option v-for="report in reportList" :key="report.id" :value="report.id">
-            {{ report.reportName }}
-          </option>
-        </select>
-      </view>
-
-      <view class="nav-right">
+      </template>
+      <template #right>
         <button class="nav-btn primary" @click="saveRecord">记录保存</button>
-      </view>
-    </view>
+      </template>
+    </NavBar>
 
     <view class="main-container">
       <Designer
@@ -99,6 +97,7 @@ import '@grapecity-software/spread-sheets-formula-panel'
 import '@grapecity-software/spread-sheets-io'
 import '@grapecity-software/spread-sheets-designer-resources-cn'
 import Designer from '@grapecity-software/spread-sheets-designer-vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 const props = defineProps({
   checkItemData: {
@@ -1181,6 +1180,12 @@ defineExpose({
   align-items: center;
 }
 
+.nav-title-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
 .nav-left {
   display: flex;
   align-items: center;

src/components/SpreadDesigner/spreadDesignerGeneric.vue

@@ -1,11 +1,10 @@
 <template>
   <view class="spread-designer-generic">
-    <view class="navigator-bar">
-      <view class="nav-left">
-        <button class="back-btn" @click="goBack">←</button>
-      </view>
-      <view class="nav-title">{{ navTitle }}</view>
-      <view class="nav-right">
+    <NavBar>
+      <template #title>
+        <text class="nav-title">{{ navTitle }}</text>
+      </template>
+      <template #right>
         <button
           v-for="(button, index) in navButtons"
           :key="index"
@@ -14,8 +13,8 @@
         >
           {{ button.text }}
         </button>
-      </view>
-    </view>
+      </template>
+    </NavBar>
 
     <view class="main-container">
       <Designer
@@ -90,6 +89,7 @@ import '@grapecity-software/spread-sheets-formula-panel'
 import '@grapecity-software/spread-sheets-io'
 import '@grapecity-software/spread-sheets-designer-resources-cn'
 import Designer from '@grapecity-software/spread-sheets-designer-vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 const props = defineProps({
   businessConfig: {
@@ -1144,7 +1144,7 @@ defineExpose({
 
 .nav-title {
   flex: 1;
-  font-size: clamp(16px, 4vw, 18px);
+  font-size: 17px;
   font-weight: 600;
   color: #333;
   text-align: center;

src/components/components.d.ts

@@ -7,6 +7,7 @@ DateTime: typeof import('./DateTime/DateTime.vue')['default']
 Grid: typeof import('./Grid/Grid.vue')['default']
 ImgPreview: typeof import('./ImgPreview/ImgPreview.vue')['default']
 LFile: typeof import('./LFile/LFile.vue')['default']
+NavBar: typeof import('./NavBar/NavBar.vue')['default']
 PageLayout: typeof import('./PageLayout/PageLayout.vue')['default']
 Popup: typeof import('./Popup/Popup.vue')['default']
 PopupDict: typeof import('./PopupDict/PopupDict.vue')['default']

src/pages/deviceExam/deviceExam.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="device-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">设备查询</text>
-    </view>
+    <NavBar title="设备查询" />
 
     <!-- 查询表单 -->
     <view class="query-form-header" @click="controlQueryVisible = !controlQueryVisible">
@@ -101,6 +99,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useConfigStore } from '@/store/config'
 import { EquipFuncName, requestFunc } from '@/api/ApiRouter/equipment'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'deviceExam',

src/pages/deviceExam/deviceExamDetail.vue

@@ -11,13 +11,7 @@
 <template>
   <view class="detail-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">设备详情</text>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar title="设备详情" />
 
     <!-- Tab 栏 -->
     <view class="tab-bar">
@@ -78,6 +72,7 @@ import ContainerEquipmentInfo from '@/pages/equipment/detail/components/Containe
 import BoilerEquipmentInfo from '@/pages/equipment/detail/components/BoilerEquipmentInfo.vue'
 import PipeEquipmentInfo from '@/pages/equipment/detail/components/PipeEquipmentInfo.vue'
 import HistoryReport from '@/pages/equipment/detail/components/HistoryReport.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface TabItem {
   value: string

src/pages/equipment/detail/components/BoilerInspectProject.vue

@@ -1,12 +1,6 @@
 <template>
   <view class="inspect-project-container">
-    <scroll-view
-      class="scroll-list"
-      scroll-y
-      :refresher-enabled="useOnline === '1'"
-      :refresher-triggered="refreshing"
-      @refresherrefresh="onRefresh"
-    >
+    <scroll-view class="scroll-list" scroll-y>
       <view class="report-list">
         <view v-for="([part, reportArr], index) in reportGroupedList" :key="index">
           <!-- 暂时注释掉的部件分组逻辑 -->

src/pages/equipment/detail/components/PipeInspectProject.vue

@@ -1,12 +1,6 @@
 <template>
   <view class="inspect-project-container">
-    <scroll-view
-      class="scroll-list"
-      scroll-y
-      :refresher-enabled="useOnline === '1'"
-      :refresher-triggered="refreshing"
-      @refresherrefresh="onRefresh"
-    >
+    <scroll-view class="scroll-list" scroll-y>
       <view class="report-list">
         <view v-for="item in reportList" :key="item.id" class="report-item">
           <view class="item-top" @click="handleSelectProject(item)">

src/pages/equipment/detail/equipmentDetail.vue

@@ -11,15 +11,13 @@
 <template>
   <view class="equipment-detail-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">
-        设备详情 {{ useOnline === '1' ? '（在线录入）' : '（本地待录入）' }}
-      </text>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar>
+      <template #title>
+        <text class="nav-title">
+          设备详情 {{ useOnline === '1' ? '（在线录入）' : '（本地待录入）' }}
+        </text>
+      </template>
+    </NavBar>
 
     <!-- Tab 栏 -->
     <view class="tab-bar">
@@ -181,6 +179,7 @@ import PipeCheckProject from './components/checkProjectPopup/PipeCheckProject.vu
 import { useConfigStore } from '@/store/config'
 import { TaskOrderFuncName, requestFunc } from '@/api/ApiRouter/taskOrder'
 import { EquipFuncName, requestFunc as equipRequestFunc } from '@/api/ApiRouter/equipment'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 const currentTab = ref(0)
 const dataSource = ref<any>({})
@@ -614,6 +613,12 @@ watch(
   width: 20px;
 }
 
+.nav-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
 .tab-bar {
   display: flex;
   flex-direction: row;

src/pages/home/index.vue

@@ -15,13 +15,7 @@
 
 <template>
   <view class="home-container">
-    <scroll-view
-      class="scroll-view"
-      scroll-y
-      :refresher-enabled="true"
-      :refresher-triggered="refresh"
-      @refresherrefresh="onRefresh"
-    >
+    <scroll-view class="scroll-view" scroll-y>
       <!-- 状态栏占位 -->
       <view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>
 

src/pages/inspectionApproval/list/inspectionApprovalList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="approval-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">检验方案批准</text>
-    </view>
+    <NavBar title="检验方案批准" />
 
     <!-- 筛选栏 -->
     <view class="filter-bar">
@@ -54,6 +52,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useUserStore } from '@/store/user'
 import { getMajorIssuesAuditList } from '@/api/task'
 import Item from '@/pages/inspectionPlanAudit/components/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'InspectionApprovalList',

src/pages/inspectionApproval/preViewReport/index.vue

@@ -11,20 +11,16 @@
 <template>
   <view class="preview-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">检验方案批准</text>
-      <view class="navigate-right">
+    <NavBar title="检验方案批准">
+      <template #right>
         <view class="action-btn" @click="showGoBackPopup">
           <text class="btn-text reject">退回</text>
         </view>
         <view class="action-btn" @click="handleFinish">
           <text class="btn-text pass">通过</text>
         </view>
-      </view>
-    </view>
+      </template>
+    </NavBar>
 
     <!-- PDF 预览区域 -->
     <view class="pdf-container">
@@ -80,6 +76,7 @@
 import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getApprovalDetail, getUserGroupUserList, passOpinionNoticeApproval, rejectOpinionNoticeApproval } from '@/api/task'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface UserItem {
   id: string

src/pages/inspectionPlanAudit/list/InspectionPlanAuditList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="audit-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">检验方案审核</text>
-    </view>
+    <NavBar title="检验方案审核" />
 
     <!-- 筛选栏 -->
     <view class="filter-bar">
@@ -58,6 +56,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useUserStore } from '@/store/user'
 import { getMajorIssuesAuditList } from '@/api/task'
 import Item from '@/pages/inspectionPlanAudit/components/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'InspectionPlanAuditList',

src/pages/inspectionPlanAudit/preViewReport/index.vue

@@ -11,20 +11,16 @@
 <template>
   <view class="preview-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">检验方案审核</text>
-      <view class="navigate-right">
+    <NavBar title="检验方案审核">
+      <template #right>
         <view class="action-btn" @click="showGoBackPopup">
           <text class="btn-text reject">退回</text>
         </view>
         <view class="action-btn" @click="handleFinish">
           <text class="btn-text pass">通过</text>
         </view>
-      </view>
-    </view>
+      </template>
+    </NavBar>
 
     <!-- PDF 预览区域 -->
     <view class="pdf-container">
@@ -80,6 +76,7 @@
 import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getApprovalDetail, getUserGroupUserList, passOpinionNoticeApproval, rejectOpinionNoticeApproval } from '@/api/task'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface UserItem {
   id: string

src/pages/pendingApproval/list/PendingApprovalList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="approval-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">报告审核</text>
-    </view>
+    <NavBar title="报告审核" />
 
     <!-- 查询视图 -->
     <QueryView :query-type="queryType" @query-action="queryAction" />
@@ -48,6 +46,7 @@ import { useUserStore } from '@/store/user'
 import { getApprovalListApi } from '@/api/pendingApproval'
 import QueryView from '@/pages/pendingVerification/components/query/QueryView.vue'
 import Item from '@/pages/pendingVerification/list/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingApprovalList',

src/pages/pendingApproval/preViewReport/index.vue

@@ -11,9 +11,7 @@
 <template>
   <view class="preview-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">报告审核预览</text>
-    </view>
+    <NavBar title="报告审核预览" />
 
     <!-- 头部视图 -->
     <HeadView
@@ -49,6 +47,7 @@
 import { ref, onMounted } from 'vue'
 import { submitApi, rollbackApi } from '@/api/pendingApproval'
 import HeadView from '@/pages/pendingVerification/preViewReport/HeadView.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingApprovalPreview',

src/pages/pendingPreparation/list/PendingPreparationList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="preparation-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">报告编制</text>
-    </view>
+    <NavBar title="报告编制" />
 
     <!-- 查询视图 -->
     <QueryView :query-type="queryType" @query-action="queryAction" />
@@ -48,6 +46,7 @@ import { useUserStore } from '@/store/user'
 import { getPendingPreparationListApi } from '@/api/pendingPreparation'
 import QueryView from '@/pages/pendingVerification/components/query/QueryView.vue'
 import Item from '@/pages/pendingVerification/list/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingPreparationList',

src/pages/pendingPreparation/preViewReport/index.vue

@@ -11,9 +11,7 @@
 <template>
   <view class="preview-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">报告编制预览</text>
-    </view>
+    <NavBar title="报告编制预览" />
 
     <!-- 头部视图 -->
     <HeadView
@@ -43,6 +41,7 @@
 import { ref, onMounted } from 'vue'
 import { submitApi } from '@/api/pendingPreparation'
 import HeadView from '@/pages/pendingVerification/preViewReport/HeadView.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingPreparationPreview',

src/pages/pendingRatify/list/PendingRatifyList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="ratify-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">报告审批</text>
-    </view>
+    <NavBar title="报告审批" />
 
     <!-- 查询视图 -->
     <QueryView :query-type="queryType" @query-action="queryAction" />
@@ -48,6 +46,7 @@ import { useUserStore } from '@/store/user'
 import { getRatifyListApi } from '@/api/pendingRatify'
 import QueryView from '@/pages/pendingVerification/components/query/QueryView.vue'
 import Item from '@/pages/pendingVerification/list/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingRatifyList',

src/pages/pendingRatify/preViewReport/index.vue

@@ -11,9 +11,7 @@
 <template>
   <view class="preview-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">报告审批预览</text>
-    </view>
+    <NavBar title="报告审批预览" />
 
     <!-- 头部视图 -->
     <HeadView
@@ -48,6 +46,7 @@
 import { ref, onMounted } from 'vue'
 import { finishApi, rollbackApi } from '@/api/pendingRatify'
 import HeadView from '@/pages/pendingVerification/preViewReport/HeadView.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingRatifyPreview',

src/pages/pendingVerification/list/PendingVerificationList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="verification-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">记录校核</text>
-    </view>
+    <NavBar title="记录校核" />
 
     <!-- 查询视图 -->
     <QueryView :query-type="queryType" @query-action="queryAction" />
@@ -48,6 +46,7 @@ import { useUserStore } from '@/store/user'
 import { getPendingVerificationListApi } from '@/api/pendingVerification'
 import QueryView from '@/pages/pendingVerification/components/query/QueryView.vue'
 import Item from '@/pages/pendingVerification/list/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'PendingVerificationList',

src/pages/securityCheck/detail/index.vue

@@ -11,16 +11,12 @@
 <template>
   <view class="detail-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <view class="navigate-center">
+    <NavBar>
+      <template #title>
         <HeadView v-if="renderCenter" title="操作指导书批准详情" :btn-array="btnArray" />
-        <text v-else class="navigate-title">安全检查记录详情</text>
-      </view>
-      <view class="navigate-right"></view>
-    </view>
+        <text v-else class="nav-title">安全检查记录详情</text>
+      </template>
+    </NavBar>
 
     <!-- PDF 预览区域 -->
     <view class="pdf-container">
@@ -48,6 +44,7 @@ import { useUserStore } from '@/store/user'
 import { isH5 } from '@/utils/platform'
 import dayjs from 'dayjs'
 import HeadView from '../components/HeadView.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 // 路由参数
 const detailItem = ref<any>({})
@@ -328,6 +325,12 @@ onMounted(async () => {
   align-items: center;
 }
 
+.nav-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
 .pdf-container {
   flex: 1;
   background-color: #f5f5f5;

src/pages/securityCheck/securityCheckList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="security-check-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">安全检查记录</text>
-    </view>
+    <NavBar title="安全检查记录" />
 
     <!-- 列表 -->
     <scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
@@ -45,6 +43,7 @@ import { onLoad, onShow } from '@dcloudio/uni-app'
 import Item from './components/Item.vue'
 import { useConfigStore } from '@/store/config'
 import { SecurityCheckFuncName, requestFunc } from '@/api/ApiRouter/taskOrderSecurityCheck'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'securityCheckList',

src/pages/serviceOrderDetail/index.vue

@@ -12,15 +12,11 @@
 <template>
   <view class="detail-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <view class="navigate-center">
-        <text class="navigate-title">{{ businessTypeTitle }}详情</text>
-      </view>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar>
+      <template #title>
+        <text class="nav-title">{{ businessTypeTitle }}详情</text>
+      </template>
+    </NavBar>
 
     <!-- PDF 预览区域 -->
     <view class="pdf-container">
@@ -47,6 +43,7 @@ import { getServiceOrderPDF, getServiceFromTemplate, getServerHisVersionPage } f
 import { useUserStore } from '@/store/user'
 import { isH5 } from '@/utils/platform'
 import dayjs from 'dayjs'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 // 路由参数
 const orderId = ref('')
@@ -309,6 +306,12 @@ onMounted(async () => {
   align-items: center;
 }
 
+.nav-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
 .pdf-container {
   flex: 1;
   background-color: #f5f5f5;

src/pages/sign-detail/index.vue

@@ -11,13 +11,11 @@
 <template>
   <view class="detail-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">{{ title }}</text>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar>
+      <template #title>
+        <text class="nav-title">{{ title }}</text>
+      </template>
+    </NavBar>
 
     <!-- 内容区域 -->
     <scroll-view class="scroll-content" scroll-y>
@@ -86,6 +84,7 @@ import { getGcConfig, getTaskOrderSignImg, pushTaskOrder } from '@/api/sign'
 import { useUserStore } from '@/store/user'
 import { createBusinessConfig } from '@/pages/webview/common/config/businessEditorConfig'
 import { setSpreadsheetEditParams } from '@/common/global'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 const title = ref('')
 const routeType = ref('')
@@ -427,6 +426,12 @@ onMounted(() => {
   width: 44px;
 }
 
+.nav-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
 .scroll-content {
   flex: 1;
   padding: 10px;

src/pages/sign/index.vue

@@ -11,13 +11,11 @@
 <template>
   <view class="sign-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">{{ title }}</text>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar>
+      <template #title>
+        <text class="nav-title">{{ title }}</text>
+      </template>
+    </NavBar>
 
     <!-- 内容区域 -->
     <scroll-view class="scroll-content" scroll-y>
@@ -174,6 +172,7 @@ import { useUserStore } from '@/store/user'
 import SignatureCanvas from '@/components/Signature/SignatureCanvas.vue'
 import SpreadPDFViewer from '@/components/SpreadDesigner/SpreadPDFViewer.vue'
 import PDFViewer from '@/components/PDFViewer/index.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 const title = ref('')
 const routeType = ref<'FWD' | 'JYRS' | 'AQJC' | 'ZXXX'>()
@@ -826,6 +825,12 @@ onMounted(() => {
   }
 }
 
+.nav-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
 .scroll-content {
   flex: 1;
   padding: 16px;

src/pages/systemFile/systemFile.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="system-file-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">体系文件</text>
-    </view>
+    <NavBar title="体系文件" />
 
     <!-- 查询表单 -->
     <view class="query-form-header" @click="controlQueryVisible = !controlQueryVisible">
@@ -91,6 +89,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { getStandardDocList, getStandardDocFileByUploadId } from '@/api/index'
 import dayjs from 'dayjs'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'systemFile',

src/pages/taskOnline/TaskOnlineEquipmentList.vue

@@ -14,13 +14,7 @@
 
 <template>
   <view class="equipment-list-container">
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">设备列表（分配项目）</text>
-      <view class="navigate-right" />
-    </view>
+    <NavBar title="设备列表（分配项目）" />
 
     <scroll-view
       class="list-scroll"
@@ -308,6 +302,7 @@ import dayjs from 'dayjs'
 import UpdateContactPopup from '@/pages/unClaim/components/UpdateContactPopup.vue'
 import * as signApis from '@/api/sign'
 import { TaskOrderFuncName, requestFunc } from '@/api/ApiRouter/taskOrder'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface PopupData {
   text: string

src/pages/taskOnlinePage/taskOnline.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="task-online-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">在线录入</text>
-    </view>
+    <NavBar title="在线录入" />
 
     <!-- 查询视图 -->
     <QueryView ref="queryViewRef" :query-type="defaultTypeValue" @query-action="queryAction" />
@@ -66,6 +64,7 @@ import QueryView from './components/query/QueryView.vue'
 import TaskItem from './components/TaskItem.vue'
 import { useConfigStore } from '@/store/config'
 import { TaskOrderFuncName, requestFunc } from '@/api/ApiRouter/taskOrder'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'taskOnline',

src/pages/unClaim/unClaimList.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="unclaim-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">任务单</text>
-    </view>
+    <NavBar title="任务单" />
 
     <!-- 查询视图 -->
     <view class="query-view-wrapper">
@@ -119,6 +117,7 @@ import TipsPopup from '@/components/popup/components/TipsPopup.vue'
 import { useConfigStore } from '@/store/config'
 import { EquipmentType } from '@/utils/dictMap'
 import { TaskOrderFuncName, requestFunc } from '@/api/ApiRouter/taskOrder'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'unClaimList',
@@ -435,21 +434,6 @@ defineExpose({
   background-color: #f5f5f5;
 }
 
-.navigate-view {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 44px;
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
-}
-
-.navigate-title {
-  font-size: 17px;
-  font-weight: 500;
-  color: #333;
-}
-
 .query-view-wrapper {
   flex-shrink: 0;
 }

src/pages/unitQuery/unitQuery.vue

@@ -15,9 +15,7 @@
 <template>
   <view class="unit-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <text class="navigate-title">单位信息查询</text>
-    </view>
+    <NavBar title="单位信息查询" />
 
     <!-- 查询表单 -->
     <view class="query-form-header" @click="controlQueryVisible = !controlQueryVisible">
@@ -98,6 +96,7 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue'
 import { getSystemClientUnitList } from '@/api/index'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({
   name: 'unitQuery',

src/pages/unitQuery/unitQueryDetail.vue

@@ -11,13 +11,7 @@
 <template>
   <view class="detail-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">单位详情</text>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar title="单位详情" />
 
     <!-- 内容区域 -->
     <scroll-view class="scroll-content" scroll-y>
@@ -68,6 +62,7 @@ import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getSystemClientUnitById } from '@/api/index'
 import dayjs from 'dayjs'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface InfoItem {
   prop: string | string[]

src/pages/uploadFile/UploadFile.vue

@@ -10,13 +10,11 @@
 
 <template>
   <view class="upload-file-container">
-    <view class="navigate-view">
-      <view class="navigate-left" @click="handleBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">{{ isEdit ? '附件上传' : '查看附件' }}</text>
-      <view class="navigate-right"></view>
-    </view>
+    <NavBar>
+      <template #title>
+        <text class="nav-title">{{ isEdit ? '附件上传' : '查看附件' }}</text>
+      </template>
+    </NavBar>
 
     <view v-if="readOnly" class="readonly-tip">
       <text class="readonly-text">⚠️ 只读模式：只能查看文件，无法上传</text>
@@ -86,6 +84,7 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface FileItem {
   checkItemId: string
@@ -386,6 +385,12 @@ const saveOffline = async () => {
   width: 20px;
 }
 
+.nav-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #333;
+}
+
 .readonly-tip {
   margin: 10px 15px;
   padding: 12px;

src/pages/workInstructionAudit/list/WorkInstructionAuditList.vue

@@ -14,9 +14,7 @@
 
 <template>
   <view class="audit-container">
-    <view class="navigate-view">
-      <text class="navigate-title">操作指导书批准</text>
-    </view>
+    <NavBar title="操作指导书批准" />
 
     <view class="filter-bar">
       <view
@@ -51,6 +49,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useUserStore } from '@/store/user'
 import { getMajorIssuesAuditList } from '@/api/task'
 import Item from '@/pages/inspectionPlanAudit/components/Item.vue'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 defineOptions({ name: 'WorkInstructionAuditList' })
 

src/pages/workInstructionAudit/preViewReport/index.vue

@@ -11,20 +11,16 @@
 <template>
   <view class="preview-container">
     <!-- 导航栏 -->
-    <view class="navigate-view">
-      <view class="navigate-left" @click="goBack">
-        <image class="back-icon" src="/static/images/back.png" />
-      </view>
-      <text class="navigate-title">操作指导书批准</text>
-      <view class="navigate-right">
+    <NavBar title="操作指导书批准">
+      <template #right>
         <view class="action-btn" @click="showGoBackPopup">
           <text class="btn-text reject">退回</text>
         </view>
         <view class="action-btn" @click="handleFinish">
           <text class="btn-text pass">通过</text>
         </view>
-      </view>
-    </view>
+      </template>
+    </NavBar>
 
     <!-- PDF 预览区域 -->
     <view class="pdf-container">
@@ -80,6 +76,7 @@
 import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getApprovalDetail, getUserGroupUserList, passOpinionNoticeApproval, rejectOpinionNoticeApproval } from '@/api/task'
+import NavBar from '@/components/NavBar/NavBar.vue'
 
 interface UserItem {
   id: string