fix: adapt shared page header to safe area

components/PageHeader.vue

@@ -74,9 +74,16 @@ const props = defineProps({
   root: { type: Boolean, default: false },
   unreadCount: { type: Number, default: 0 },
   fallbackUrl: { type: String, default: "/pages/genealogy/g01-my-genealogies" },
+  customBack: { type: Boolean, default: false },
 });
 
+const emit = defineEmits(["brand", "notice", "action", "back"]);
+
 const goBack = () => {
+  if (props.customBack) {
+    emit("back");
+    return;
+  }
   const stack = getCurrentPages();
   if (stack.length > 1) {
     uni.navigateBack();
@@ -88,7 +95,7 @@ const goBack = () => {
 
 <style scoped lang="scss">
 .page-header-slot {
-  height: 104rpx;
+  height: calc(104rpx + var(--status-bar-height, 0px));
   flex: none;
 }
 
@@ -104,8 +111,9 @@ const goBack = () => {
   z-index: 30;
   display: flex;
   align-items: center;
-  height: 104rpx;
+  height: calc(104rpx + var(--status-bar-height, 0px));
   padding: 0 24rpx;
+  padding-top: var(--status-bar-height, 0px);
   box-sizing: border-box;
   background: $brand-red;
   color: #fff9ed;

tests/shared-component-document-flow-contract.ps1

@@ -35,6 +35,10 @@ Assert-Match $header '(?s)\.header-logo,\s*\.header-notice-icon,\s*\.notice-dot\
 if ($header -match '(?s)\.notice-dot\s*\{[^}]*position\s*:') {
   throw 'PageHeader notice dot must use grid alignment instead of positioning'
 }
+Assert-Match $header '(?s)\.page-header-slot\s*\{[^}]*height:\s*calc\(104rpx \+ var\(--status-bar-height, 0px\)\);' 'PageHeader secondary slot must reserve status bar plus 104rpx content height'
+Assert-Match $header '(?s)\.page-header\s*\{[^}]*height:\s*calc\(104rpx \+ var\(--status-bar-height, 0px\)\);[^}]*padding-top:\s*var\(--status-bar-height, 0px\);' 'PageHeader secondary header must place its 104rpx content below the status bar'
+Assert-Match $header '(?s)\.page-header-slot--root\s*\{[^}]*height:\s*calc\(124rpx \+ var\(--status-bar-height, 0px\)\);' 'PageHeader root slot height must remain unchanged'
+Assert-Match $header '(?s)\.page-header--root\s*\{[^}]*height:\s*calc\(124rpx \+ var\(--status-bar-height, 0px\)\);' 'PageHeader root height must remain unchanged'
 
 if ($card -match '(?im)(?<![-\w])position\s*:') {
   throw 'GenealogyCard must use grid instead of positioning'

tests/shared-interaction-accessibility-contract.ps1

@@ -17,6 +17,16 @@ foreach ($pattern in @(
   if ($header -notmatch $pattern) { throw "PageHeader accessibility contract missing: $pattern" }
 }
 if (-not $header.Contains('fallbackUrl')) { throw 'PageHeader must expose a deep-link fallback route' }
+foreach ($token in @(
+  'customBack: { type: Boolean, default: false }',
+  'const emit = defineEmits(["brand", "notice", "action", "back"]);',
+  'if (props.customBack) {',
+  'emit("back");',
+  'uni.navigateBack();',
+  'uni.reLaunch({ url: props.fallbackUrl });'
+)) {
+  if (-not $header.Contains($token)) { throw "PageHeader back contract missing: $token" }
+}
 
 $dialog = Read-Utf8 'components/AppDialog.vue'
 foreach ($token in @('role="dialog"', 'aria-modal="true"', 'tabindex="-1"', '@keydown.esc.stop="cancel"', 'max-height: calc(100vh - 80rpx)', 'overflow-y: auto')) {