fix(h5): 小程序 WebView 刘海区背景与顶栏安全区

Logo 下移 safe-area、embed 隐藏 HTML 标题；暖色渐变铺满刘海，页面背景上延与全屏洗底层对齐。

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

apps/user-h5/src/App.vue

@@ -4,7 +4,7 @@
       <AppHeader />
       <router-view />
     </div>
-    <IcpFooter />
+    <IcpFooter class="app-footer" />
     <TabBar v-if="!mpEmbed" />
   </div>
 </template>

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: 10px 12px 4px;
+  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 4px;
   background: transparent;
   pointer-events: none;
 }

apps/user-h5/src/components/PageShell.vue

@@ -35,19 +35,17 @@ withDefaults(
 .ps {
   position: relative;
   overflow-x: hidden;
-  padding-top: 48px;
+  margin-top: calc(-1 * var(--yxg-safe-top));
+  padding-top: var(--yxg-page-top);
   padding-bottom: var(--spacing-xs);
-  min-height: 100%;
+  min-height: calc(100% + var(--yxg-safe-top));
-  background:
+  background: var(--yxg-page-wash);
-    radial-gradient(110% 70% at 85% -8%, rgba(255, 190, 170, 0.65) 0%, transparent 52%),
-    radial-gradient(90% 55% at 8% 6%, rgba(255, 220, 200, 0.75) 0%, transparent 48%),
-    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
-    linear-gradient(180deg, var(--color-bg-start) 0%, #ffe4d8 28%, #fff4ef 52%, var(--color-bg-sheet) 100%);
 }
 .ps-flat {
   background: transparent;
   min-height: 0;
-  padding-top: 48px;
+  margin-top: calc(-1 * var(--yxg-safe-top));
+  padding-top: var(--yxg-page-top);
 }
 .atm {
   position: absolute;

apps/user-h5/src/lib/mpEmbed.ts

@@ -1,6 +1,13 @@
 const MP_EMBED_KEY = 'yxg_mp_embed'
 const MP_QUERY = 'mp'
 
+/** Apply document-level embed chrome (safe-area wash, hide HTML title). */
+export function applyMpEmbedDom(): void {
+  if (typeof document === 'undefined' || !isMpEmbed()) return
+  document.title = '\u200b'
+  document.documentElement.classList.add('mp-embed')
+}
+
 /** Persist ?mp=1 from mini-program web-view entry. Call once before router mount. */
 export function initMpEmbed(): void {
   if (typeof window === 'undefined') return
@@ -8,6 +15,7 @@ export function initMpEmbed(): void {
   if (params.get(MP_QUERY) === '1') {
     sessionStorage.setItem(MP_EMBED_KEY, '1')
   }
+  applyMpEmbedDom()
 }
 
 /** True when H5 runs inside WeChat mini-program web-view (no H5 tab bar). */

apps/user-h5/src/pages/HomePage.vue

@@ -48,14 +48,11 @@ const {
 .home {
   position: relative;
   overflow-x: hidden;
-  padding-top: 48px;
+  margin-top: calc(-1 * var(--yxg-safe-top));
+  padding-top: var(--yxg-page-top);
   padding-bottom: var(--spacing-xs);
-  min-height: 100%;
+  min-height: calc(100% + var(--yxg-safe-top));
-  background:
+  background: var(--yxg-page-wash);
-    radial-gradient(110% 70% at 85% -8%, rgba(255, 190, 170, 0.65) 0%, transparent 52%),
-    radial-gradient(90% 55% at 8% 6%, rgba(255, 220, 200, 0.75) 0%, transparent 48%),
-    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
-    linear-gradient(180deg, var(--color-bg-start) 0%, #ffe4d8 28%, #fff4ef 52%, var(--color-bg-sheet) 100%);
 }
 .atm {
   position: absolute;

apps/user-h5/src/styles/app.css

@@ -1,28 +1,57 @@
 *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
-html,body,#app{min-height:100%}
+html,body,#app{min-height:100%;min-height:100dvh}
+html{
+  background-color:var(--color-bg-start);
+}
 body{
   font-family:var(--font-sans);
   font-size:14px;
   line-height:1.65;
   color:var(--color-text-primary);
   -webkit-font-smoothing:antialiased;
-  background:
+  background:var(--yxg-body-wash);
+  background-attachment:fixed;
+}
+:root{
+  --yxg-body-wash:
     radial-gradient(120% 80% at 80% -10%, rgba(255,180,160,.45) 0%, transparent 55%),
     radial-gradient(90% 60% at 10% 8%, rgba(255,210,190,.55) 0%, transparent 50%),
     linear-gradient(180deg, var(--yxg-bg-start) 0%, var(--yxg-bg-end) 28%, var(--color-bg-sheet) 100%);
-  background-attachment:fixed;
+  --yxg-page-wash:
+    radial-gradient(110% 70% at 85% -8%, rgba(255, 190, 170, 0.65) 0%, transparent 52%),
+    radial-gradient(90% 55% at 8% 6%, rgba(255, 220, 200, 0.75) 0%, transparent 48%),
+    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
+    linear-gradient(180deg, var(--color-bg-start) 0%, #ffe4d8 28%, #fff4ef 52%, var(--color-bg-sheet) 100%);
+  --yxg-header-h:50px;
+  --yxg-page-top:calc(env(safe-area-inset-top,0px) + var(--yxg-header-h));
+  --yxg-safe-top:env(safe-area-inset-top,0px);
 }
 .app-shell{
-  max-width:var(--yxg-max-w);margin:0 auto;min-height:100vh;
+  max-width:var(--yxg-max-w);margin:0 auto;min-height:100vh;min-height:100dvh;
   display:flex;flex-direction:column;
   padding-bottom:calc(var(--yxg-nav-h) + env(safe-area-inset-bottom,0px));
   position:relative;
 }
 .app-body{
   flex:1 0 auto;
+  position:relative;
+  z-index:1;
 }
 .app-shell.mp-embed{
   padding-bottom:env(safe-area-inset-bottom,0px);
+  isolation:isolate;
+}
+.app-shell.mp-embed::before{
+  content:"";
+  position:fixed;
+  inset:0;
+  z-index:0;
+  pointer-events:none;
+  background:var(--yxg-body-wash);
+}
+.app-footer{
+  position:relative;
+  z-index:1;
 }
 a{color:inherit;text-decoration:none}