aquagreen_wechat_app/src/components/common/TopBar.vue

<template>
  <view class="sticky top-0 z-40 bg-white border-b border-gray-100">
    <view class="status-bar" :style="{ height: `${statusBarHeight}px` }"></view>
    <view class="top-bar px-4 flex items-center justify-between">
      <view class="flex items-center flex-1 min-w-0">
        <view
          v-if="showBack"
          class="mr-2 p-2 -ml-2 clickable rounded-lg"
          @click="goBack"
        >
          <text class="text-gray-600 text-lg">←</text>
        </view>
        <slot name="left" />
        <text class="text-base font-semibold text-gray-800 truncate">{{ title }}</text>
      </view>
      <CapsuleSafeArea>
        <view class="flex items-center">
          <slot name="right" />
        </view>
      </CapsuleSafeArea>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CapsuleSafeArea from './CapsuleSafeArea.vue'

const props = withDefaults(
  defineProps<{
    title: string
    showBack?: boolean
  }>(),
  {
    showBack: false
  }
)

const statusBarHeight = ref(0)

onMounted(() => {
  try {
    const info = uni.getSystemInfoSync()
    statusBarHeight.value = info.statusBarHeight || 0
  } catch (e) {
    statusBarHeight.value = 0
  }
})

function goBack() {
  if (props.showBack) {
    uni.navigateBack({ delta: 1 })
  }
}
</script>

<style scoped>
.top-bar {
  height: 44px;
}
</style>