feat: wrap TopBar right slot with CapsuleSafeArea, add min-w-0 for title truncation

src/components/common/TopBar.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="sticky top-0 z-40 bg-white border-b border-gray-100">
-    <view class="status-bar"></view>
-    <view class="top-bar px-4 h-12 flex items-center justify-between">
-      <view class="flex items-center flex-1">
+    <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"
@@ -13,14 +13,19 @@
         <slot name="left" />
         <text class="text-base font-semibold text-gray-800 truncate">{{ title }}</text>
       </view>
-      <view class="flex items-center">
-        <slot name="right" />
-      </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
@@ -31,6 +36,17 @@ const props = withDefaults(
   }
 )
 
+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 })
@@ -42,8 +58,4 @@ function goBack() {
 .top-bar {
   height: 44px;
 }
-
-.status-bar {
-  height: var(--status-bar-height);
-}
 </style>