perf: 优化页面

packages/app/src/components/CustomNavBar.vue

@@ -0,0 +1,112 @@
+<template>
+  <view
+    class="nav-bar"
+    :class="{ 'nav-bar--transparent': transparent }"
+    :style="{ paddingTop: statusBarHeight + 'px' }"
+  >
+    <view class="nav-bar__inner">
+      <!-- Back button -->
+      <view v-if="showBack" class="nav-bar__left" @tap="handleBack">
+        <text class="nav-bar__back-icon">‹</text>
+      </view>
+      <view v-else class="nav-bar__left" />
+
+      <!-- Title -->
+      <text class="nav-bar__title">{{ title }}</text>
+
+      <!-- Right placeholder (balances the back button) -->
+      <view class="nav-bar__right" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+defineProps<{
+  title: string
+  /** Transparent bg with white text — for pages with colored header */
+  transparent?: boolean
+  /** Show back arrow (for sub-pages navigated via navigateTo) */
+  showBack?: boolean
+}>()
+
+const statusBarHeight = ref(0)
+
+onMounted(() => {
+  const sysInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = sysInfo.statusBarHeight ?? 20
+})
+
+function handleBack() {
+  uni.navigateBack({ delta: 1 })
+}
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 101;
+  background: #ffffff;
+
+  &--transparent {
+    background: transparent;
+
+    .nav-bar__title {
+      color: #ffffff;
+    }
+
+    .nav-bar__back-icon {
+      color: #ffffff;
+    }
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 88rpx;
+    padding: 0 24rpx;
+  }
+
+  &__left,
+  &__right {
+    width: 72rpx;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__left {
+    justify-content: flex-start;
+  }
+
+  &__right {
+    justify-content: flex-end;
+  }
+
+  &__back-icon {
+    font-size: 52rpx;
+    font-weight: 300;
+    color: #1a1a2e;
+    line-height: 1;
+    margin-top: -4rpx;
+  }
+
+  &__title {
+    flex: 1;
+    text-align: center;
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #1a1a2e;
+    letter-spacing: 2rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>