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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-12 18:54:21 +08:00
1 parent 8505115f05
commit f0d64379a7
13 files changed
+51 -37

No files matched your search

@@ -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(() => {
+6 -3
View File
@@ -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(() => {
+3 -1
View File
@@ -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('')
+3 -1
View File
@@ -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,
+4 -3
View File
@@ -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) {
+4 -3
View File
@@ -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) {
+4 -3
View File
@@ -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) {
+4 -2
View File
@@ -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) {
+4 -3
View File
@@ -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() {
+3 -1
View File
@@ -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
+3 -1
View File
@@ -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,
+4 -3
View File
@@ -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) {
+5 -10
View File
@@ -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;