From 9d4fb52d29e4b6773393e7216e86f4abeda3f80c Mon Sep 17 00:00:00 2001
From: jackyu66git <jackyu666@icloud.com>
Date: Tue, 25 Aug 2026 01:18:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(h5):=20=E5=B0=8F=E7=A8=8B=E5=BA=8F=20WebVie?=
 =?UTF-8?q?w=20=E9=80=9A=E8=BF=87=20sbh=20=E5=8F=82=E6=95=B0=E9=93=BA?=
 =?UTF-8?q?=E6=BB=A1=E5=88=98=E6=B5=B7=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WebView 内 safe-area-inset-top 常为 0，改由小程序传入 statusBarHeight；
全屏洗底层上延并同步原生页背景色，修复刘海露白。
---
 apps/user-h5/src/components/AppHeader.vue |  2 +-
 apps/user-h5/src/lib/mpEmbed.spec.ts      |  7 +++++++
 apps/user-h5/src/lib/mpEmbed.ts           | 14 ++++++++++++++
 apps/user-h5/src/styles/app.css           | 15 +++++++++++++--
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/apps/user-h5/src/components/AppHeader.vue b/apps/user-h5/src/components/AppHeader.vue
index ec5a980..cc7fbe4 100644
--- a/apps/user-h5/src/components/AppHeader.vue
+++ b/apps/user-h5/src/components/AppHeader.vue
@@ -36,7 +36,7 @@ const showBack = computed(() => {
   grid-template-columns: 44px 1fr 44px;
   align-items: center;
   gap: 4px;
-  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 4px;
+  padding: calc(8px + var(--yxg-safe-top)) 12px 4px;
   background: transparent;
   pointer-events: none;
 }
diff --git a/apps/user-h5/src/lib/mpEmbed.spec.ts b/apps/user-h5/src/lib/mpEmbed.spec.ts
index c0ab93d..69f50a5 100644
--- a/apps/user-h5/src/lib/mpEmbed.spec.ts
+++ b/apps/user-h5/src/lib/mpEmbed.spec.ts
@@ -17,6 +17,13 @@ describe('mpEmbed', () => {
     expect(isMpEmbed()).toBe(true)
   })
 
+  it('applies status bar height from ?sbh=', () => {
+    window.history.replaceState({}, '', '/psy/?mp=1&sbh=47')
+    initMpEmbed()
+    expect(document.documentElement.style.getPropertyValue('--yxg-safe-top')).toBe('47px')
+    expect(document.documentElement.style.getPropertyValue('--yxg-page-top')).toBe('calc(47px + 50px)')
+  })
+
   it('returns false without mp query', () => {
     initMpEmbed()
     expect(isMpEmbed()).toBe(false)
diff --git a/apps/user-h5/src/lib/mpEmbed.ts b/apps/user-h5/src/lib/mpEmbed.ts
index 15bf21f..075d758 100644
--- a/apps/user-h5/src/lib/mpEmbed.ts
+++ b/apps/user-h5/src/lib/mpEmbed.ts
@@ -1,5 +1,15 @@
 const MP_EMBED_KEY = 'yxg_mp_embed'
 const MP_QUERY = 'mp'
+const SBH_QUERY = 'sbh'
+const HEADER_H_PX = 50
+
+function applySafeTopInset(px: number): void {
+  if (typeof document === 'undefined' || px <= 0) return
+  const root = document.documentElement
+  const safe = `${px}px`
+  root.style.setProperty('--yxg-safe-top', safe)
+  root.style.setProperty('--yxg-page-top', `calc(${safe} + ${HEADER_H_PX}px)`)
+}
 
 /** Apply document-level embed chrome (safe-area wash, hide HTML title). */
 export function applyMpEmbedDom(): void {
@@ -15,6 +25,10 @@ export function initMpEmbed(): void {
   if (params.get(MP_QUERY) === '1') {
     sessionStorage.setItem(MP_EMBED_KEY, '1')
   }
+  const sbh = params.get(SBH_QUERY)
+  if (sbh && /^\d+$/.test(sbh)) {
+    applySafeTopInset(parseInt(sbh, 10))
+  }
   applyMpEmbedDom()
 }
 
diff --git a/apps/user-h5/src/styles/app.css b/apps/user-h5/src/styles/app.css
index 1369e0f..d0f90bc 100644
--- a/apps/user-h5/src/styles/app.css
+++ b/apps/user-h5/src/styles/app.css
@@ -37,6 +37,14 @@ body{
   position:relative;
   z-index:1;
 }
+html.mp-embed{
+  background-color:var(--color-bg-start);
+  background-image:var(--yxg-body-wash);
+  background-attachment:fixed;
+}
+html.mp-embed body{
+  background:transparent;
+}
 .app-shell.mp-embed{
   padding-bottom:env(safe-area-inset-bottom,0px);
   isolation:isolate;
@@ -44,10 +52,14 @@ body{
 .app-shell.mp-embed::before{
   content:"";
   position:fixed;
-  inset:0;
+  top:calc(-1 * var(--yxg-safe-top));
+  left:0;
+  right:0;
+  bottom:0;
   z-index:0;
   pointer-events:none;
   background:var(--yxg-body-wash);
+  background-color:var(--color-bg-start);
 }
 .app-footer{
   position:relative;
@@ -297,4 +309,3 @@ a{color:inherit;text-decoration:none}
 .fc-c .yxg-feed-cover{background:linear-gradient(145deg,#D6E8FF,#B0D0F5);color:#3A6FB0}
 .fc-d .yxg-feed-cover{background:linear-gradient(145deg,#D8F0DC,#B5E0BE);color:#3A8A4A}
 .fc-e .yxg-feed-cover{background:linear-gradient(145deg,#FFE6C8,#F5C98A);color:#B07A28}
-)