fix(miniprogram): adapt bx topbar for WeChat capsule safe area

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

miniprogram/components/bx-ui/bx-wf-config-page.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="onBack">
           <text class="topbar-back-icon">‹</text>
@@ -160,7 +160,6 @@
         <view class="bx-sheet__title">选择审批人</view>
         <view class="search-wrap" style="padding: 8px 16px 0">
           <view class="search-box">
-            <text class="search-box__icon">⌕</text>
             <input
               v-model="approverKeyword"
               class="search-input"
@@ -197,6 +196,8 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { workflowApi, fetchPortalUserOptions } from '@/api/bx'
 import { statusLabel, adminStatusTagClass } from '@/utils/bxFormat'
 import { PAGE_PATHS } from '@/config/api'
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
 
 const props = defineProps({
   bizType: { type: String, required: true },
@@ -452,7 +453,7 @@ async function moveDown(node) {
 }
 
 function onBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
 }
 
 onMounted(() => {

miniprogram/pages/bx/admin/expense-item.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="onBack">
           <text class="topbar-back-icon">‹</text>
@@ -216,6 +216,9 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { expenseItemApi } from '@/api/bx'
 import { statusLabel, adminStatusTagClass } from '@/utils/bxFormat'
 import { PAGE_PATHS } from '@/config/api'
+import { getSafeAreaStyle, getGlobalSafeArea } from '@/utils/safeArea'
+
+const safeAreaStyle = getSafeAreaStyle()
 
 const expenseTree = ref([])
 const loading = ref(false)
@@ -258,7 +261,7 @@ const dialogTitle = computed(() => {
 function measureListHeight() {
   try {
     const sys = uni.getSystemInfoSync()
-    const topbar = 44 + (sys.statusBarHeight || 0)
+    const topbar = getGlobalSafeArea().headerHeight
     listHeight.value = `${Math.max(320, (sys.windowHeight || 600) - topbar)}px`
   } catch (e) {
     listHeight.value = '70vh'
@@ -417,7 +420,7 @@ function handleDelete(item) {
 }
 
 function onBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
 }
 
 onMounted(() => {

miniprogram/pages/bx/advance/apply.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page bx-page--form">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -89,6 +89,8 @@ import { ref, reactive, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { advanceApi, attachmentApi } from '@/api/bx'
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
 
 const MAX_ATTACHMENTS = 10
 const editId = ref('')

miniprogram/pages/bx/advance/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page bx-page--form">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -197,6 +197,8 @@ import { onLoad } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { advanceApi, attachmentApi } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   statusLabel,
   ticketHeaderStatusToneClass,
   formatAmount,

miniprogram/pages/bx/advance/list.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -14,7 +14,6 @@
 
     <view class="search-wrap">
       <view class="search-box">
-        <text class="search-box__icon">⌕</text>
         <input
           class="search-input"
           v-model="keyword"
@@ -132,6 +131,8 @@ import { onShow } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { advanceApi } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   statusLabel,
   workflowListStatusTagClass,
   formatAmount,
@@ -240,7 +241,7 @@ function clearKeyword() {
 }
 
 function goBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
 }
 
 function goApply(id) {

miniprogram/pages/bx/all/list.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -36,7 +36,6 @@
 
     <view class="search-wrap">
       <view class="search-box">
-        <text class="search-box__icon">⌕</text>
         <input
           class="search-input"
           v-model="keyword"
@@ -207,6 +206,8 @@ import { onShow } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { advanceApi, reimburseApi, expenseItemApi } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   statusLabel,
   ticketHeaderStatusToneClass,
   workflowListStatusTagClass,
@@ -406,7 +407,7 @@ function clearKeyword() {
 }
 
 function goBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
 }
 
 function goDetail(item) {

miniprogram/pages/bx/invoice/admin.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="onBack">
           <text class="topbar-back-icon">‹</text>
@@ -16,7 +16,6 @@
     <template v-if="!detailUser">
       <view class="search-wrap">
         <view class="search-box">
-          <text class="search-box__icon">⌕</text>
           <input
             class="search-input"
             v-model="keyword"
@@ -221,6 +220,8 @@
 <script setup>
 import { reactive, ref, onMounted } from 'vue'
 import { attachmentApi, invoiceApi, invoiceWalletApi } from '@/api/bx'
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
 
 const PAGE_SIZE = 5
 
@@ -509,7 +510,7 @@ function onBack() {
     resetWalletList()
     return
   }
-  uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: '/pages/workbench/workbench' }) })
 }
 
 function onDelete(inv) {

miniprogram/pages/bx/invoice/mine.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -217,6 +217,8 @@
 <script setup>
 import { reactive, ref, onMounted } from 'vue'
 import { attachmentApi, invoiceApi, invoiceWalletApi } from '@/api/bx'
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
 
 const PAGE_SIZE = 5
 
@@ -251,7 +253,7 @@ const uploadPaths = ref([])
 const uploading = ref(false)
 
 function goBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: '/pages/workbench/workbench' }) })
 }
 
 function money(v) {

miniprogram/pages/bx/mine/list.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -31,7 +31,6 @@
 
     <view class="search-wrap">
       <view class="search-box">
-        <text class="search-box__icon">⌕</text>
         <input
           class="search-input"
           v-model="keyword"
@@ -248,6 +247,8 @@ import { onShow } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { advanceApi, reimburseApi, expenseItemApi } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   statusLabel,
   workflowListStatusTagClass,
   formatAmount,
@@ -402,7 +403,7 @@ function clearKeyword() {
 }
 
 function goBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
 }
 
 function onFabAdd() {

miniprogram/pages/bx/reimburse/apply.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page bx-page--form">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -261,6 +261,8 @@ import {
   invoiceApi
 } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   normalizeExpenseItem,
   flattenExpenseTree,
   formatExpenseName

miniprogram/pages/bx/reimburse/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page bx-page--form">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -220,6 +220,8 @@ import { onLoad } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { reimburseApi, attachmentApi, expenseItemApi } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   statusLabel,
   ticketHeaderStatusToneClass,
   formatAmount,

miniprogram/pages/bx/reimburse/list.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="bx-page">
-    <view class="topbar">
+    <view class="topbar" :style="safeAreaStyle">
       <view class="topbar-left">
         <view class="topbar-back" @click="goBack">
           <text class="topbar-back-icon">‹</text>
@@ -14,7 +14,6 @@
 
     <view class="search-wrap">
       <view class="search-box">
-        <text class="search-box__icon">⌕</text>
         <input
           class="search-input"
           v-model="keyword"
@@ -147,6 +146,8 @@ import { onShow } from '@dcloudio/uni-app'
 import { PAGE_PATHS } from '@/config/api'
 import { reimburseApi, expenseItemApi } from '@/api/bx'
 import {
+import { getSafeAreaStyle } from '@/utils/safeArea'
+const safeAreaStyle = getSafeAreaStyle()
   statusLabel,
   workflowListStatusTagClass,
   formatAmount,
@@ -269,7 +270,7 @@ function clearKeyword() {
 }
 
 function goBack() {
-  uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
 }
 
 function goApply(id) {

miniprogram/styles/bx-theme.scss

@@ -76,10 +76,11 @@
   top: 0;
   z-index: 50;
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: minmax(0, 1fr) auto var(--sq-capsule-right-safe, 96px);
   align-items: center;
-  height: calc(58px + env(safe-area-inset-top, 0px));
-  padding: env(safe-area-inset-top, 0px) 12px 0;
+  height: var(--sq-header-height, calc(44px + 44px));
+  padding: var(--sq-safe-top, 44px) 12px 0;
+  box-sizing: border-box;
   background: rgba(255, 255, 255, 0.92);
   box-shadow: 0 1px 0 rgba(217, 232, 226, 0.85), 0 8px 20px rgba(15, 23, 42, 0.06);
 }
@@ -90,7 +91,7 @@
   left: 0;
   right: 0;
   top: 0;
-  height: calc(58px + env(safe-area-inset-top, 0px));
+  height: var(--sq-header-height, calc(44px + 44px));
   background: linear-gradient(
     135deg,
     rgba(16, 185, 129, 0.1),
@@ -164,12 +165,6 @@
   height: 40px;
 }
 
-.bx-page .search-box__icon {
-  color: var(--text-muted);
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
 .bx-page .search-box input,
 .bx-page .search-box .search-input {
   flex: 1;