fix(miniprogram): adapt mp-header for WeChat capsule safe area

Co-authored-by: Cursor <cursoragent@cursor.com>

miniprogram/components/app-safe-header.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { getGlobalSafeArea } from '@/utils/safeArea'
+import { getGlobalSafeArea, buildSafeAreaCssVarsStyle } from '@/utils/safeArea'
 
 const props = defineProps({
   title: {
@@ -30,12 +30,8 @@ const props = defineProps({
   },
 })
 
-const safeArea = getGlobalSafeArea()
-
 const headerStyle = computed(() => ({
-  '--sq-safe-top': `${safeArea.topSafeHeight}px`,
-  '--sq-nav-height': `${safeArea.navContentHeight}px`,
-  '--sq-capsule-right-safe': `${safeArea.capsuleRightSafeWidth}px`,
+  ...buildSafeAreaCssVarsStyle(getGlobalSafeArea()),
   '--sq-header-background': props.background,
 }))
 </script>

miniprogram/components/bx-ui/bx-placeholder-page.vue

@@ -2,6 +2,9 @@
 import { computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
+import { getSafeAreaStyle } from '@/utils/safeArea'
+
+const safeAreaStyle = getSafeAreaStyle()
 
 const props = defineProps({
   defaultTitle: { type: String, default: '报销业务' }
@@ -11,7 +14,7 @@ const title = computed(() => props.defaultTitle)
 
 const goBack = () => {
   uni.navigateBack({
-    fail: () => uni.switchTab({ url: PAGE_PATHS.workbench })
+    fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench })
   })
 }
 
@@ -20,7 +23,7 @@ onLoad(() => {})
 
 <template>
   <view class="mp-page">
-    <view class="mp-header">
+    <view class="mp-header" :style="safeAreaStyle">
       <view class="bx-ph__nav" @click="goBack">
         <text class="bx-ph__back">← 工作台</text>
       </view>