feat: 新增自定义导航组件，更新各页面以使用新导航

src/components/CustomNav.vue

@@ -0,0 +1,73 @@
+<template>
+  <view class="custom-nav">
+    <view class="status_bar"></view>
+    <view class="nav-content">
+      <view class="nav-left" v-if="showBack" @click="goBack">
+        <uni-icons type="back" size="20" color="#333"></uni-icons>
+      </view>
+      <view class="nav-title">{{ title }}</view>
+      <view class="nav-right"></view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  title: string
+  showBack?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showBack: true
+})
+
+const goBack = () => {
+  uni.navigateBack()
+}
+</script>
+
+<style scoped>
+.custom-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: calc(var(--status-bar-height) + 44px);
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.status_bar {
+  height: var(--status-bar-height);
+  width: 100%;
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 15px;
+}
+
+.nav-left {
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.nav-right {
+  width: 40px;
+}
+</style>

src/pages/health/health.vue

@@ -1,4 +1,5 @@
 <template>
+  <CustomNav title="健康数据" />
   <view class="content">
     <PageTitle :title="title" />
   </view>
@@ -7,6 +8,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import PageTitle from '@/components/PageTitle.vue'
+import CustomNav from '@/components/CustomNav.vue'
 
 const title = ref('健康数据')
 </script>
@@ -17,6 +19,7 @@ const title = ref('健康数据')
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-top: calc(var(--status-bar-height) + 44px);
   padding-bottom: 100rpx; /* 给底边栏留空间 */
 }
 

src/pages/index/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <CustomNav title="慢病APP" />
   <view class="content">
     <image class="logo" src="/static/logo.png" />
     <PageTitle :title="title" />
@@ -8,6 +9,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import PageTitle from '@/components/PageTitle.vue'
+import CustomNav from '@/components/CustomNav.vue'
 
 const title = ref('Hello')
 </script>
@@ -18,6 +20,7 @@ const title = ref('Hello')
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-top: calc(var(--status-bar-height) + 44px);
   padding-bottom: 100rpx; /* 给底边栏留空间 */
 }
 

src/pages/login/login.vue

@@ -1,4 +1,5 @@
 <template>
+  <CustomNav title="登录" />
   <view class="login-container">
     <view class="avatar-area">
       <!-- only available in Weixin Mini Program: chooseAvatar open-type -->
@@ -29,6 +30,7 @@
 import { ref } from 'vue'
 import { onMounted } from 'vue'
 import PageTitle from '@/components/PageTitle.vue'
+import CustomNav from '@/components/CustomNav.vue'
 
 const title = ref('登录')
 
@@ -107,6 +109,7 @@ function onSubmit() {
 <style>
 .login-container {
   padding: 40rpx;
+  padding-top: calc(var(--status-bar-height) + 44px + 40rpx);
   display: flex;
   flex-direction: column;
   align-items: center;

src/pages/profile/profile.vue

@@ -1,4 +1,5 @@
 <template>
+  <CustomNav title="个人中心" />
   <view class="profile-container">
     <view class="header">
       <view class="avatar-section">
@@ -42,6 +43,7 @@ import { ref } from 'vue'
 import { computed } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import PageTitle from '@/components/PageTitle.vue'
+import CustomNav from '@/components/CustomNav.vue'
 
 const title = ref('个人中心')
 
@@ -114,6 +116,7 @@ const onLogout = () => {
 .profile-container {
   min-height: 100vh;
   background-color: #f5f5f5;
+  padding-top: calc(var(--status-bar-height) + 44px);
   padding-bottom: 100rpx; /* 给底边栏留空间 */
 }
 
@@ -139,28 +142,6 @@ const onLogout = () => {
   margin-right: 30rpx;
 }
 
-.custom-nav {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 88rpx;
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  border-bottom: 1rpx solid #eee;
-}
-
-.nav-title {
-  font-size: 34rpx;
-  font-weight: bold;
-  color: #333;
-}
-
 .avatar-frame {
   width: 100%;
   height: 100%;