fix: avatar page

components/NavBar/NavBar.vue

@@ -0,0 +1,120 @@
+<template>
+  <view>
+    <!-- Placeholder to occupy space if fixed -->
+    <view
+      v-if="fixed && placeholder"
+      class="nav-placeholder"
+      :style="{ height: navBarHeight + 'px' }"
+    ></view>
+
+    <!-- Actual Navbar -->
+    <view
+      class="nav-bar"
+      :class="{ fixed: fixed }"
+      :style="{
+        height: navBarHeight + 'px',
+        paddingTop: statusBarHeight + 'px',
+        backgroundColor: background,
+        color: color
+      }"
+    >
+      <view class="nav-content">
+        <view
+          v-if="back"
+          class="back"
+          @tap="goBack"
+          :style="{ color: color }"
+        >‹</view>
+        <text class="nav-title" :style="{ color: color }">{{ title }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  background: {
+    type: String,
+    default: "#ffffff",
+  },
+  color: {
+    type: String,
+    default: "#333333",
+  },
+  back: {
+    type: Boolean,
+    default: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const navBarHeight = ref(64);
+const statusBarHeight = ref(20);
+
+onMounted(() => {
+  navBarHeight.value = getBavBarHeight();
+  statusBarHeight.value = getStatusBarHeight();
+});
+
+const goBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    uni.switchTab({ url: "/pages/index/index" });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 999;
+  
+  &.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 24rpx;
+  position: relative;
+}
+
+.back {
+  font-size: 50rpx;
+  margin-right: 24rpx;
+  line-height: 1;
+  padding: 20rpx;
+  margin-left: -20rpx;
+}
+
+.nav-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  flex: 1;
+  text-align: center;
+  margin-right: 50rpx; /* Balance back button */
+}
+</style>