From b0004e30c72237e16a988792bc92a80276dfb4dc Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Mon, 18 May 2026 11:54:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=E9=87=8D=E6=9E=84navbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 |  21 ---
 src/components/common/NavBar.vue            | 161 ++++++++++++++++++++
 src/page_record/feedingRecordForm.vue       |   7 +-
 src/page_report/planProgress.vue            |   4 +-
 src/page_report/replaceForm.vue             |   6 +-
 src/page_report/reportForm.vue              |   4 +-
 src/pages.json                              |  58 ++++---
 src/pages/common/textview/index.vue         |   9 +-
 src/pages/common/webview/index.vue          |  15 +-
 src/pages/index.vue                         |  16 +-
 src/pages/login.vue                         |   2 +
 src/pages/mine.vue                          |  78 ++++++++--
 src/pages/report.vue                        |  29 +++-
 src/pages/work.vue                          |  33 +++-
 src/pages_function/pages/planList/index.vue |  10 +-
 src/pages_function/pages/taskList/index.vue |   5 +-
 src/pages_mine/pages/about/index.vue        |  16 +-
 src/pages_mine/pages/avatar/index.vue       |  13 +-
 src/pages_mine/pages/help/index.vue         |  16 +-
 src/pages_mine/pages/info/edit.vue          |  14 +-
 src/pages_mine/pages/info/index.vue         |  17 +--
 src/pages_mine/pages/pwd/index.vue          |  14 +-
 src/pages_mine/pages/setting/index.vue      |  24 +--
 23 files changed, 397 insertions(+), 175 deletions(-)
 create mode 100644 src/components/common/NavBar.vue

diff --git a/src/App.vue b/src/App.vue
index cfec83f..6bbca27 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,8 +12,6 @@ function wrapUniTextApi() {
 	const rawShowToast = uni.showToast
 	const rawShowModal = uni.showModal
 	const rawShowLoading = uni.showLoading
-	const rawSetNavigationBarTitle = uni.setNavigationBarTitle
-	const rawSetNavigationBarColor = uni.setNavigationBarColor
 
 	uni.showToast = (options = {}) => {
 		const next = { ...options }
@@ -45,25 +43,6 @@ function wrapUniTextApi() {
 		}
 		return rawShowModal(next)
 	}
-	uni.setNavigationBarTitle = (options = {}) => {
-		const next = { ...options }
-		if (typeof next.title === 'string') {
-			next.title = translateLiteral(next.title)
-		}
-		const result = rawSetNavigationBarTitle(next)
-		setTimeout(() => {
-			const pages = getCurrentPages()
-			if (pages && pages.length > 0) {
-				const route = pages[pages.length - 1].route || ''
-				if (route === 'pages/login') {
-					rawSetNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ffffff' })
-				} else {
-					rawSetNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#22486e' })
-				}
-			}
-		}, 150)
-		return result
-	}
 }
 
 export default {
diff --git a/src/components/common/NavBar.vue b/src/components/common/NavBar.vue
new file mode 100644
index 0000000..4de5575
--- /dev/null
+++ b/src/components/common/NavBar.vue
@@ -0,0 +1,161 @@
+<template>
+  <view class="custom-navbar" :style="navbarStyle">
+    <view class="navbar-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+    <view class="navbar-body" :style="{ height: navBodyHeight + 'px' }">
+      <view class="navbar-left">
+        <view v-if="showBackBtn" class="back-btn" @click="handleBack">
+          <uni-icons type="arrow-left" :size="20" :color="textColor"></uni-icons>
+        </view>
+      </view>
+      <view class="navbar-center">
+        <text class="navbar-title" :style="{ color: textColor }">{{ translatedTitle }}</text>
+      </view>
+      <view class="navbar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useI18n } from 'vue-i18n'
+import { translateLiteral } from '@/locales'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  backgroundColor: {
+    type: String,
+    default: '#22486e'
+  },
+  textColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  showBack: {
+    type: Boolean,
+    default: undefined
+  }
+})
+
+const systemInfo = uni.getSystemInfoSync()
+const statusBarHeight = ref(systemInfo.statusBarHeight || 0)
+const currentPagesLength = ref(1)
+
+const navBodyHeight = computed(() => {
+  const platform = systemInfo.platform || ''
+  if (platform === 'android') return 48
+  if (platform === 'ios') return 44
+  return 44
+})
+
+const isLoginPage = computed(() => {
+  const pages = getCurrentPages()
+  if (pages && pages.length > 0) {
+    return pages[pages.length - 1].route === 'pages/login'
+  }
+  return false
+})
+
+const showBackBtn = computed(() => {
+  if (props.showBack !== undefined) return props.showBack
+  return currentPagesLength.value > 1
+})
+
+const navbarStyle = computed(() => {
+  const bg = isLoginPage.value ? '#ffffff' : props.backgroundColor
+  return {
+    backgroundColor: bg,
+    paddingTop: '0px'
+  }
+})
+
+const translatedTitle = computed(() => translateLiteral(props.title))
+
+const textColor = computed(() => {
+  if (isLoginPage.value) return '#000000'
+  return props.textColor
+})
+
+onShow(() => {
+  const pages = getCurrentPages()
+  currentPagesLength.value = pages ? pages.length : 1
+})
+
+function handleBack() {
+  uni.navigateBack({
+    fail: () => {
+      uni.switchTab({
+        url: '/pages/index'
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-navbar {
+  position: relative;
+  width: 100%;
+  z-index: 999;
+}
+
+.navbar-body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16rpx;
+  position: relative;
+}
+
+.navbar-left,
+.navbar-right {
+  width: 120rpx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.navbar-left {
+  justify-content: flex-start;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  padding: 8rpx 12rpx;
+  border-radius: 8rpx;
+}
+
+.back-text {
+  font-size: 28rpx;
+  line-height: 1;
+  margin-left: 4rpx;
+}
+
+.navbar-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
+  max-width: calc(100% - 240rpx);
+}
+
+.navbar-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.navbar-right {
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/src/page_record/feedingRecordForm.vue b/src/page_record/feedingRecordForm.vue
index 386563d..46b4eb5 100644
--- a/src/page_record/feedingRecordForm.vue
+++ b/src/page_record/feedingRecordForm.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="container">
+    <NavBar title="新增投料记录" />
 
     <view class="example">
       <uni-forms ref="customForm" :rules="customRules" labelWidth="60px" :modelValue="formData">
@@ -52,6 +53,7 @@
 </template>
 
 <script>
+import NavBar from '@/components/common/NavBar.vue'
 import {create} from "@/api/mes/record"
 import {getUnitList,getItemList} from "@/api/mes/product"
 import { pipelineTypes,feedingTypes, findTextByValue} from "@/api/system/dict/data";
@@ -59,7 +61,10 @@ import {showConfirm} from "@/utils/common";
 import tab from "@/plugins/tab";
 import modal from "@/plugins/modal";
 export default {
-  components: {},
+  components: {
+    NavBar
+  },
+  name: "feedingRecordForm",
   data() {
     return {
       // 自定义表单数据
diff --git a/src/page_report/planProgress.vue b/src/page_report/planProgress.vue
index fa6ff03..db8b18d 100644
--- a/src/page_report/planProgress.vue
+++ b/src/page_report/planProgress.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="container">
+    <NavBar title="计划进度" />
     <uni-card :is-shadow="false" is-full>
       <uni-row>
         <uni-col :span="10">
@@ -45,6 +46,7 @@
 </template>
 
 <script>
+import NavBar from '@/components/common/NavBar.vue'
 
 import {processTypes,findTextByValue} from "@/api/system/dict/data";
 import {getPlanProgress} from "@/api/mes/plan"
@@ -52,7 +54,7 @@ import {getPlanProgress} from "@/api/mes/plan"
 import tab from "@/plugins/tab";
 import modal from "@/plugins/modal";
 export default {
-  components: {},
+  components: { NavBar },
   data() {
     return {
       planDo: undefined,
diff --git a/src/page_report/replaceForm.vue b/src/page_report/replaceForm.vue
index 63ec286..a754723 100644
--- a/src/page_report/replaceForm.vue
+++ b/src/page_report/replaceForm.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="container">
+    <NavBar title="代报工" />
     <view class="example">
       <!-- 自定义表单校验 -->
       <uni-forms ref="customForm" :rules="customRules" labelWidth="60px" :modelValue="customFormData">
@@ -91,6 +92,7 @@
 </template>
 
 <script>
+import NavBar from '@/components/common/NavBar.vue'
 
 import {processTypes, groupTypes} from "@/api/system/dict/data";
 import {
@@ -106,7 +108,9 @@ import tab from "@/plugins/tab";
 import modal from "@/plugins/modal";
 import {getById, getDetailByReportId, update} from "@/api/mes/report";
 export default {
-  components: {},
+  components: {
+    NavBar
+  },
   data() {
     return {
       // 自定义表单数据
diff --git a/src/page_report/reportForm.vue b/src/page_report/reportForm.vue
index 685f028..4577b4d 100644
--- a/src/page_report/reportForm.vue
+++ b/src/page_report/reportForm.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="container">
+		<NavBar title="生产报工" />
 		<uni-card :is-shadow="false" is-full>
 			<text class="uni-h6">如个人无法填报，请寻找主管代为报工</text>
 		</uni-card>
@@ -91,6 +92,7 @@
 </template>
 
 <script>
+import NavBar from '@/components/common/NavBar.vue'
 
 import useUserStore from "@/store/modules/user";
 import {processTypes, groupTypes} from "@/api/system/dict/data";
@@ -100,7 +102,7 @@ import {showConfirm} from "@/utils/common";
 import tab from "@/plugins/tab";
 import modal from "@/plugins/modal";
 export default {
-  components: {},
+  components: { NavBar },
   data() {
     let userStore = {
       name: '',
diff --git a/src/pages.json b/src/pages.json
index cb855e6..e46527c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -12,15 +12,14 @@
     }
   },
   "globalStyle": {
-    "navigationBarTextStyle": "white",
-    "navigationBarTitleText": "BESURE",
-    "navigationBarBackgroundColor": "#22486e"
+    "navigationBarTitleText": "BESURE"
   },
   "pages": [
     {
       "path": "pages/index",
       "style": {
         "navigationBarTitleText": "首页",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
     },
@@ -28,39 +27,43 @@
       "path": "pages/login",
       "style": {
         "navigationBarTitleText": "登录",
-        "navigationBarBackgroundColor": "#ffffff",
-        "navigationBarTextStyle": "black"
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/work",
       "style": {
         "navigationBarTitleText": "管理",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/mine",
       "style": {
-        "navigationBarTitleText": "个人中心"
+        "navigationBarTitleText": "个人中心",
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/common/webview/index",
       "style": {
-        "navigationBarTitleText": "浏览网页"
+        "navigationBarTitleText": "浏览网页",
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/common/textview/index",
       "style": {
-        "navigationBarTitleText": "浏览文本"
+        "navigationBarTitleText": "浏览文本",
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/report",
       "style": {
         "navigationBarTitleText": "报表",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
     }
@@ -72,19 +75,22 @@
         {
           "path": "reportForm",
           "style": {
-            "navigationBarTitleText": "生产报工"
+            "navigationBarTitleText": "生产报工",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "replaceForm",
           "style": {
-            "navigationBarTitleText": "代报工"
+            "navigationBarTitleText": "代报工",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "planProgress",
           "style": {
-            "navigationBarTitleText": "计划进度"
+            "navigationBarTitleText": "计划进度",
+            "navigationStyle": "custom"
           }
         }
       ]
@@ -95,7 +101,8 @@
         {
           "path": "feedingRecordForm",
           "style": {
-            "navigationBarTitleText": "新增投料记录"
+            "navigationBarTitleText": "新增投料记录",
+            "navigationStyle": "custom"
           }
         }
       ]
@@ -106,43 +113,50 @@
         {
           "path": "avatar/index",
           "style": {
-            "navigationBarTitleText": "修改头像"
+            "navigationBarTitleText": "修改头像",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "info/index",
           "style": {
-            "navigationBarTitleText": "个人信息"
+            "navigationBarTitleText": "个人信息",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "info/edit",
           "style": {
-            "navigationBarTitleText": "编辑资料"
+            "navigationBarTitleText": "编辑资料",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "pwd/index",
           "style": {
-            "navigationBarTitleText": "修改密码"
+            "navigationBarTitleText": "修改密码",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "setting/index",
           "style": {
-            "navigationBarTitleText": "应用设置"
+            "navigationBarTitleText": "应用设置",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "help/index",
           "style": {
-            "navigationBarTitleText": "常见问题"
+            "navigationBarTitleText": "常见问题",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "about/index",
           "style": {
-            "navigationBarTitleText": "关于我们"
+            "navigationBarTitleText": "关于我们",
+            "navigationStyle": "custom"
           }
         }
       ]
@@ -597,13 +611,15 @@
         {
           "path": "planList/index",
           "style": {
-            "navigationBarTitleText": "生产计划"
+            "navigationBarTitleText": "生产计划",
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "taskList/index",
           "style": {
-            "navigationBarTitleText": "任务计划"
+            "navigationBarTitleText": "任务计划",
+            "navigationStyle": "custom"
           }
         }
       ]
diff --git a/src/pages/common/textview/index.vue b/src/pages/common/textview/index.vue
index e9b05fb..40ac4f0 100644
--- a/src/pages/common/textview/index.vue
+++ b/src/pages/common/textview/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view>
+    <NavBar :title="title" />
     <uni-card class="view-title" :title="title">
       <text class="uni-body view-content">{{ content }}</text>
     </uni-card>
@@ -7,7 +8,12 @@
 </template>
 
 <script>
+  import NavBar from '@/components/common/NavBar.vue'
+
   export default {
+    components: {
+      NavBar
+    },
     data() {
       return {
         title: '',
@@ -17,9 +23,6 @@
     onLoad(options) {
       this.title = options.title
       this.content = options.content
-      uni.setNavigationBarTitle({
-        title: options.title
-      })
     }
   }
 </script>
diff --git a/src/pages/common/webview/index.vue b/src/pages/common/webview/index.vue
index 8388c76..3a0cdfe 100644
--- a/src/pages/common/webview/index.vue
+++ b/src/pages/common/webview/index.vue
@@ -1,11 +1,17 @@
 <template>
-  <view v-if="params.url">
-    <web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
+  <view>
+    <NavBar v-if="params.title" :title="params.title" />
+    <web-view v-if="params.url" :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
   </view>
 </template>
 
 <script>
+  import NavBar from '@/components/common/NavBar.vue'
+
   export default {
+    components: {
+      NavBar
+    },
     data() {
       return {
         params: {},
@@ -24,11 +30,6 @@
     },
     onLoad(event) {
       this.params = event
-      if (event.title) {
-        uni.setNavigationBarTitle({
-          title: event.title
-        })
-      }
     }
   }
 </script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 1c839fd..aa2afe5 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,11 +1,10 @@
 <template>
   <view class="page-container">
+    <NavBar :title="pageTitle" />
     <scroll-view scroll-y class="main-scroll" :scroll-top="scrollTop" scroll-with-animation @scroll="onScroll">
       <BannerSection />
       <view class="content-section">
-        <!-- 功能导航 -->
         <NavSection />
-        <!-- 生产/质量概览统计 -->
         <StatsSection v-if="currentMode === 'production'" @mode-change="onModeChange" />
         <QualitySection v-else @mode-change="onModeChange" />
       </view>
@@ -18,13 +17,18 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { onLocaleChange, offLocaleChange, setNavigationTitle } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
 import BannerSection from '@/components/dashboard/BannerSection.vue'
 import NavSection from '@/components/dashboard/NavSection.vue'
 import StatsSection from '@/components/dashboard/StatsSection.vue'
 import QualitySection from '@/components/dashboard/QualitySection.vue'
 
+const { t } = useI18n()
+const pageTitle = computed(() => t('nav.home'))
+
 const scrollTop = ref(0)
 const currentMode = ref('production')
 
@@ -46,12 +50,6 @@ function goTop() {
     scrollTop.value = 0
   }, 0)
 }
-
-const updatePageTitle = () => setNavigationTitle('nav.home')
-onLocaleChange(updatePageTitle)
-onUnmounted(() => {
-  offLocaleChange(updatePageTitle)
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index a36cfbe..5bee2fb 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="scroll-container">
+    <NavBar title="登录" />
     <view class="login-container">
 
       <!-- Logo区域 -->
@@ -51,6 +52,7 @@ import { getCodeImg } from '@/api/login'
 import { ref } from "vue";
 import config from '@/config.js'
 import useUserStore from '@/store/modules/user'
+import NavBar from '@/components/common/NavBar.vue'
 
 const userStore = useUserStore()
 const codeUrl = ref("");
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index 82bfc62..a62bf11 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="mine-container" :style="{ height: `${windowHeight}px` }">
+    <NavBar :title="pageTitle" />
     <view class="header-section">
       <view class="flex padding justify-between">
         <view class="flex align-center">
@@ -83,14 +84,17 @@
 </template>
 
 <script setup>
-import { onUnmounted, ref } from "vue";
+import { computed, onUnmounted, ref } from "vue";
 import { useI18n } from 'vue-i18n'
 import useUserStore from '@/store/modules/user'
-import { onLocaleChange, offLocaleChange, setNavigationTitle } from '@/locales'
+import { onLocaleChange, offLocaleChange } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
+
 const userStore = useUserStore()
 const name = userStore.name;
 const { t } = useI18n()
 
+const pageTitle = computed(() => t('nav.mine'))
 const avatar = ref(userStore.avatar);
 const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
 const popup = ref(null);
@@ -99,9 +103,6 @@ uni.$on('refresh', () => {
   avatar.value = userStore.avatar;
 })
 
-const updatePageTitle = () => setNavigationTitle('nav.mine')
-onLocaleChange(updatePageTitle)
-
 function handleToInfo() {
   uni.navigateTo({
     url: '/pages_mine/pages/info/index'
@@ -163,12 +164,71 @@ function handleBuilding() {
     duration: 1000
   });
 }
+</script>
 
-onUnmounted(() => {
-  offLocaleChange(updatePageTitle)
-})
+<style lang="scss">
+page {
+  background-color: #f5f6f7;
+}
 
-</script>
+.mine-container {
+  width: 100%;
+  height: 100%;
+
+
+  .header-section {
+    padding: 15px 15px 45px 15px;
+    background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
+    color: white;
+
+    .login-tip {
+      font-size: 18px;
+      margin-left: 10px;
+    }
+
+    .cu-avatar {
+      border: 2px solid #eaeaea;
+
+      .icon {
+        font-size: 40px;
+      }
+    }
+
+    .user-info {
+      margin-left: 15px;
+
+      .u_title {
+        font-size: 18px;
+        line-height: 30px;
+      }
+    }
+  }
+
+  .content-section {
+    position: relative;
+    top: -50px;
+
+    .mine-actions {
+      margin: 15px 15px;
+      padding: 20px 0px;
+      border-radius: 8px;
+      background-color: white;
+
+      .action-item {
+        .icon {
+          font-size: 28px;
+        }
+
+        .text {
+          display: block;
+          font-size: 13px;
+          margin: 8px 0px;
+        }
+      }
+    }
+  }
+}
+</style>
 
 <style lang="scss">
 page {
diff --git a/src/pages/report.vue b/src/pages/report.vue
index f429bc6..89c1a61 100644
--- a/src/pages/report.vue
+++ b/src/pages/report.vue
@@ -1,12 +1,29 @@
 <template>
-  <!-- 原固定报表菜单已移除，改为根据权限接口返回的 menus 动态渲染 -->
-  <PermissionMenuPage
-    page-path="pages/report"
-    title="报表中心"
-    subtitle="数据驱动决策 · 智能分析"
-  />
+  <view class="page-container">
+    <NavBar :title="pageTitle" />
+    <PermissionMenuPage
+      page-path="pages/report"
+      title="报表中心"
+      subtitle="数据驱动决策 · 智能分析"
+    />
+  </view>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import NavBar from '@/components/common/NavBar.vue'
 import PermissionMenuPage from '@/components/common/PermissionMenuPage.vue'
+
+const { t } = useI18n()
+const pageTitle = computed(() => t('tab.report'))
 </script>
+
+<style lang="scss" scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f6f7;
+}
+</style>
diff --git a/src/pages/work.vue b/src/pages/work.vue
index 1682fb9..26df729 100644
--- a/src/pages/work.vue
+++ b/src/pages/work.vue
@@ -1,14 +1,31 @@
 <template>
-  <!-- 原固定管理菜单已移除，改为根据权限接口返回的 menus 动态渲染 -->
-  <PermissionMenuPage
-    page-path="pages/work"
-    title="管理中心"
-    subtitle="系统配置与管理"
-    :searchable="true"
-    :show-go-top="true"
-  />
+  <view class="page-container">
+    <NavBar :title="pageTitle" />
+    <PermissionMenuPage
+      page-path="pages/work"
+      title="管理中心"
+      subtitle="系统配置与管理"
+      :searchable="true"
+      :show-go-top="true"
+    />
+  </view>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import NavBar from '@/components/common/NavBar.vue'
 import PermissionMenuPage from '@/components/common/PermissionMenuPage.vue'
+
+const { t } = useI18n()
+const pageTitle = computed(() => t('tab.work'))
 </script>
+
+<style lang="scss" scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f6f7;
+}
+</style>
diff --git a/src/pages_function/pages/planList/index.vue b/src/pages_function/pages/planList/index.vue
index 64e2974..df9aae7 100644
--- a/src/pages_function/pages/planList/index.vue
+++ b/src/pages_function/pages/planList/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="page-container">
+    <NavBar :title="pageTitle" />
     <view class="plan-list">
       <view v-for="(item, index) in planList" :key="index" class="plan-card" @click="handleItemClick(item)">
         <view class="plan-header">
@@ -59,15 +60,15 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, computed, reactive, onMounted } from 'vue'
 import { onReachBottom, onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import request from '@/utils/request'
-import { setNavigationTitle } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
 
 const { t } = useI18n()
-
-const planList = reactive([])
+const planList = ref([])
+const pageTitle = computed(() => t('dashboard.productionPlan'))
 const pageNo = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
@@ -145,7 +146,6 @@ onReachBottom(() => {
 })
 
 onShow(() => {
-  setNavigationTitle('dashboard.productionPlan')
 })
 </script>
 
diff --git a/src/pages_function/pages/taskList/index.vue b/src/pages_function/pages/taskList/index.vue
index 7897d5e..8fd3ad8 100644
--- a/src/pages_function/pages/taskList/index.vue
+++ b/src/pages_function/pages/taskList/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="page-container">
+    <NavBar :title="pageTitle" />
     <view class="filter-bar">
       <view class="filter-toggle" @click="showFilter = !showFilter">
         <text class="filter-toggle-text">{{ t('taskList.filter') }}</text>
@@ -106,11 +107,12 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { onReachBottom, onShow, onLoad } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import request from '@/utils/request'
-import { setNavigationTitle } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
 import { DICT_TYPE, getDictLabel, useDict } from '@/utils/dict'
 
 const { t } = useI18n()
 const { mes_task_status } = useDict(DICT_TYPE.MES_TASK_STATUS)
+const pageTitle = computed(() => t('dashboard.production'))
 
 const statusOptions = computed(() => {
   return [{ label: t('functionCommon.all'), value: '' }, ...(mes_task_status.value || [])]
@@ -261,7 +263,6 @@ onReachBottom(() => {
 })
 
 onShow(() => {
-  setNavigationTitle('dashboard.productionPlan')
 })
 </script>
 
diff --git a/src/pages_mine/pages/about/index.vue b/src/pages_mine/pages/about/index.vue
index 72cd379..7c7e7c5 100644
--- a/src/pages_mine/pages/about/index.vue
+++ b/src/pages_mine/pages/about/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="about-container">
+    <NavBar :title="pageTitle" />
     <view class="header-section text-center">
       <image style="width: 150rpx;height: 150rpx;" src="/static/logo.png" mode="widthFix">
       </image>
@@ -44,24 +45,15 @@
 </template>
 
 <script setup>
-import { onUnmounted } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import config from '@/config.js'
-import { onLocaleChange, offLocaleChange, setNavigationTitle } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
 
 const { t } = useI18n()
+const pageTitle = computed(() => t('nav.about'))
 const url = config.appInfo.site_url;
 const version = config.appInfo.version;
-const updatePageTitle = () => setNavigationTitle('nav.about')
-
-onShow(() => {
-  updatePageTitle()
-})
-onLocaleChange(updatePageTitle)
-onUnmounted(() => {
-  offLocaleChange(updatePageTitle)
-})
 </script>
 
 <style lang="scss">
diff --git a/src/pages_mine/pages/avatar/index.vue b/src/pages_mine/pages/avatar/index.vue
index 39cda57..9e14207 100644
--- a/src/pages_mine/pages/avatar/index.vue
+++ b/src/pages_mine/pages/avatar/index.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="container">
+		<NavBar :title="$t('nav.avatar')" />
 		<view class="page-body uni-content-info">
 			<view class='cropper-content'>
 				<view v-if="isShowImg" class="uni-corpper"
@@ -50,6 +51,7 @@
 </template>
 
 <script>
+import NavBar from '@/components/common/NavBar.vue'
 import config from '@/config'
 import { uploadAvatar } from "@/api/system/user"
 import useUserStore from '@/store/modules/user'
@@ -76,6 +78,9 @@ let PAGE_X, // 手按下的x位置
 	DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
 
 export default {
+	components: {
+		NavBar
+	},
 	/**
 	 * 页面的初始数据
 	 */
@@ -114,20 +119,12 @@ export default {
 	 * 生命周期函数--监听页面初次渲染完成
 	 */
 	onReady: function () {
-		uni.setNavigationBarTitle({
-			title: this.$t('nav.avatar')
-		})
-		uni.$on('app-locale-changed', this.handleLocaleChange)
 		this.loadImage()
 	},
 	onUnload() {
-		uni.$off('app-locale-changed', this.handleLocaleChange)
 	},
 	methods: {
 		handleLocaleChange() {
-			uni.setNavigationBarTitle({
-				title: this.$t('nav.avatar')
-			})
 		},
 		setData: function (obj) {
 			let that = this
diff --git a/src/pages_mine/pages/help/index.vue b/src/pages_mine/pages/help/index.vue
index 7d329e4..a3fa9fb 100644
--- a/src/pages_mine/pages/help/index.vue
+++ b/src/pages_mine/pages/help/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="help-container">
+    <NavBar :title="pageTitle" />
     <view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
       <view class="text-title">
         <view :class="item.icon"></view>{{ item.title }}
@@ -16,12 +17,12 @@
 </template>
 
 <script setup>
-import { computed, onUnmounted } from "vue";
-import { onShow } from '@dcloudio/uni-app'
+import { computed } from "vue";
 import { useI18n } from 'vue-i18n'
-import { onLocaleChange, offLocaleChange, setNavigationTitle } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
 
 const { t } = useI18n()
+const pageTitle = computed(() => t('nav.help'))
 
 const list = computed(() => [{
   icon: 'iconfont icon-github',
@@ -55,21 +56,12 @@ const list = computed(() => [{
   }]
 }])
 
-const updatePageTitle = () => setNavigationTitle('nav.help')
-onShow(() => {
-  updatePageTitle()
-})
-onLocaleChange(updatePageTitle)
-
 function handleText(item) {
   uni.navigateTo({
     url: `/pages/common/textview/index?title=${item.title}&content=${item.content}`
   });
 }
 
-onUnmounted(() => {
-  offLocaleChange(updatePageTitle)
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages_mine/pages/info/edit.vue b/src/pages_mine/pages/info/edit.vue
index 7f50a6b..9f2e95a 100644
--- a/src/pages_mine/pages/info/edit.vue
+++ b/src/pages_mine/pages/info/edit.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="container">
+    <NavBar :title="$t('nav.editInfo')" />
     <view class="example">
       <uni-forms ref="form" :model="user" labelWidth="80px">
         <uni-forms-item :label="$t('editInfo.nickname')" name="nickName">
@@ -21,10 +22,14 @@
 </template>
 
 <script>
+import NavBar from '@/components/common/NavBar.vue'
 import { getUserProfile } from "@/api/system/user"
 import { updateUserProfile } from "@/api/system/user"
 
 export default {
+  components: {
+    NavBar
+  },
   data() {
     return {
       user: {
@@ -43,13 +48,9 @@ export default {
     this.refreshI18n()
     this.localeChangeHandler = () => {
       this.refreshI18n()
-      this.setPageTitle()
     }
     uni.$on('app-locale-changed', this.localeChangeHandler)
   },
-  onShow() {
-    this.setPageTitle()
-  },
   onUnload() {
     if (this.localeChangeHandler) {
       uni.$off('app-locale-changed', this.localeChangeHandler)
@@ -59,11 +60,6 @@ export default {
     this.$refs.form.setRules(this.rules)
   },
   methods: {
-    setPageTitle() {
-      uni.setNavigationBarTitle({
-        title: this.$t('nav.editInfo')
-      })
-    },
     refreshI18n() {
       this.sexs = [{
         text: this.$t('info.male'),
diff --git a/src/pages_mine/pages/info/index.vue b/src/pages_mine/pages/info/index.vue
index f8fc558..8ce5358 100644
--- a/src/pages_mine/pages/info/index.vue
+++ b/src/pages_mine/pages/info/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="container">
+    <NavBar :title="pageTitle" />
     <uni-list>
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'contact' }" :title="t('info.username')" :rightText="user.email" />
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" :title="t('info.nickname')" :rightText="user.nickname" />
@@ -16,21 +17,17 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { getUserProfile } from "@/api/system/user"
-import { onUnmounted, ref } from "vue";
+import { ref } from "vue";
 import { onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import {timestampToTime} from "@/utils/dateUtil";
-import { onLocaleChange, offLocaleChange, setNavigationTitle } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
 
 const { t } = useI18n()
 const user = ref({})
-
-const updatePageTitle = () => setNavigationTitle('nav.info')
-onShow(() => {
-  updatePageTitle()
-})
-onLocaleChange(updatePageTitle)
+const pageTitle = computed(() => t('nav.info'))
 
 function getUser() {
   getUserProfile().then(response => {
@@ -39,10 +36,6 @@ function getUser() {
 }
 getUser()
 
-onUnmounted(() => {
-  offLocaleChange(updatePageTitle)
-})
-
 </script>
 
 <style lang="scss">
diff --git a/src/pages_mine/pages/pwd/index.vue b/src/pages_mine/pages/pwd/index.vue
index 6c3b2bf..5349780 100644
--- a/src/pages_mine/pages/pwd/index.vue
+++ b/src/pages_mine/pages/pwd/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="pwd-retrieve-container">
+    <NavBar :title="$t('nav.pwd')" />
     <uni-forms ref="form" :value="user" labelWidth="80px">
       <uni-forms-item required name="oldPassword" :label="$t('pwd.oldPassword')">
         <uni-easyinput type="password" v-model="user.oldPassword" :placeholder="$t('pwd.oldPasswordPlaceholder')" />
@@ -16,9 +17,13 @@
 </template>
 
 <script>
+  import NavBar from '@/components/common/NavBar.vue'
   import { updateUserPwd } from "@/api/system/user"
 
   export default {
+    components: {
+      NavBar
+    },
     data() {
       return {
         user: {
@@ -34,13 +39,9 @@
       this.refreshI18n()
       this.localeChangeHandler = () => {
         this.refreshI18n()
-        this.setPageTitle()
       }
       uni.$on('app-locale-changed', this.localeChangeHandler)
     },
-    onShow() {
-      this.setPageTitle()
-    },
     onUnload() {
       if (this.localeChangeHandler) {
         uni.$off('app-locale-changed', this.localeChangeHandler)
@@ -50,11 +51,6 @@
       this.$refs.form.setRules(this.rules)
     },
     methods: {
-      setPageTitle() {
-        uni.setNavigationBarTitle({
-          title: this.$t('nav.pwd')
-        })
-      },
       refreshI18n() {
         this.rules = {
           oldPassword: {
diff --git a/src/pages_mine/pages/setting/index.vue b/src/pages_mine/pages/setting/index.vue
index ed010ad..79a69d7 100644
--- a/src/pages_mine/pages/setting/index.vue
+++ b/src/pages_mine/pages/setting/index.vue
@@ -1,5 +1,6 @@
 <template>
   <view class="setting-container" :style="{ height: `${windowHeight}px` }">
+    <NavBar :title="pageTitle" />
     <view class="menu-list">
       <view class="list-cell list-cell-arrow" @click="handleLanguageChange">
         <view class="menu-item-box">
@@ -45,31 +46,21 @@
 </template>
 
 <script setup>
-import { computed, onUnmounted, ref } from "vue";
-import { onShow } from '@dcloudio/uni-app'
+import { computed, ref } from "vue";
 import { useI18n } from 'vue-i18n'
 import useUserStore from '@/store/modules/user'
-import { getCurrentLocale, setLocale, onLocaleChange, offLocaleChange, setNavigationTitle } from '@/locales'
+import { getCurrentLocale, setLocale } from '@/locales'
+import NavBar from '@/components/common/NavBar.vue'
+
 const userStore = useUserStore()
 const { t } = useI18n()
 
+const pageTitle = computed(() => t('nav.setting'))
 const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
 const popup = ref(null);
 const currentLocale = ref(getCurrentLocale())
 const currentLanguageLabel = computed(() => currentLocale.value === 'en-US' ? t('setting.enUS') : t('setting.zhCN'))
 
-const updatePageTitle = () => setNavigationTitle('nav.setting')
-onShow(() => {
-  updatePageTitle()
-})
-
-const updateLocale = (locale) => {
-  currentLocale.value = locale
-  updatePageTitle()
-}
-
-onLocaleChange(updateLocale)
-
 function handleToPwd() {
   uni.navigateTo({
     url: '/pages_mine/pages/pwd/index'
@@ -121,9 +112,6 @@ function dialogConfirm() {
 function dialogClose() {
 };
 
-onUnmounted(() => {
-  offLocaleChange(updateLocale)
-})
 </script>
 
 <style lang="scss" scoped>