fix: navbar commpontents

pages/mine/profile.vue

@@ -1,18 +1,6 @@
 <template>
-  <view class="profile-page" :style="{ paddingTop: navBarHeight + 'px' }">
-    <!-- Custom Navbar -->
-    <view
-      class="nav-bar"
-      :style="{
-        height: navBarHeight + 'px',
-        paddingTop: statusBarHeight + 'px',
-      }"
-    >
-      <view class="nav-left" @click="goBack">
-        <uni-icons type="left" size="24" color="#000" />
-      </view>
-      <text class="nav-title">个人信息</text>
-    </view>
+  <view class="profile-page" >
+    <NavBar title="个人信息" />
 
     <!-- Content -->
     <view class="content">
@@ -96,15 +84,10 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { storeToRefs } from "pinia";
-import {
-  getBavBarHeight,
-  getStatusBarHeight as getStatus,
-} from "@/utils/system";
 import { useUserStore } from "@/stores/user";
 import { updateUserInfo } from "@/api/auth.js";
+import NavBar from "@/components/NavBar/NavBar.vue";
 
-const navBarHeight = getBavBarHeight();
-const statusBarHeight = getStatus();
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
 
@@ -132,10 +115,6 @@ watch(
   { immediate: true, deep: true },
 );
 
-const goBack = () => {
-  uni.navigateBack();
-};
-
 const handleAvatarClick = () => {
   // Navigate to avatar page or open picker
   uni.navigateTo({
@@ -247,36 +226,6 @@ const handleSave = async () => {
   padding-bottom: 200rpx;
 }
 
-.nav-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: #fcfcfc;
-  display: flex;
-  align-items: center;
-  padding: 0 24rpx;
-  z-index: 100;
-
-  .nav-left {
-    display: flex;
-    align-items: center;
-    margin-right: 24rpx;
-    /* 增大点击区域 */
-    padding: 20rpx;
-    margin-left: -20rpx;
-  }
-
-  .nav-title {
-    font-size: 34rpx;
-    font-weight: 600;
-    color: #000;
-    flex: 1;
-    text-align: center;
-    margin-right: 50rpx; /* Balance back button */
-  }
-}
-
 .content {
   padding: 30rpx;
 }