fix(mobile): avoid status bar overlap on custom-nav pages

全局 navigationStyle 为 custom,页面需自行避让状态栏,但四处顶部内容仍被状态栏
压住:练习页标题与对话页标题、我的页顶部卡片、问答页头部。

避让不能走 CSS:env(safe-area-inset-top) 在 Android WebView 恒为 0(该值本是
iOS 刘海概念,Chromium 仅在配置 display-cutout 时才上报),uni-app 注入的
--status-bar-height 实测在 App 端同样取不到,两者都会静默回落成 0,造成"构建产物
里改动存在但运行时无效"。改由 utils/safe-area.ts 读
uni.getSystemInfoSync().statusBarHeight,各页面以内联样式绑定 padding-top。

profile 页同时把 min-height 从 100vh 改为 100%:叠加状态栏内边距后 100vh 会
溢出一屏高度产生多余滚动。

真机(vivo V2443A,720x1600,状态栏 72px)像素验证:修复前状态栏下缘 60-80px 带内
有 872 个文字像素,修复后四处均为 0。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

mobile-uni/src/pages/user/practice/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="page practice-page employee-page-shell">
-    <view class="practice-head">
+    <view class="practice-head" :style="{ paddingTop: safeTopPadding(12) }">
       <text class="page-title">{{ practicePageTitle }}</text>
       <text class="page-subtitle">{{ practicePageSubtitle }}</text>
     </view>
@@ -276,7 +276,7 @@
     </view>
 
     <view v-if="practiceView === 'active'" class="practice-chat">
-      <view class="chat-head">
+      <view class="chat-head" :style="{ paddingTop: safeTopPadding(8) }">
         <view class="chat-head-row">
           <text class="chat-title">{{ activeScenarioName }}</text>
           <text class="chat-context">{{ realtimeActive ? `实时 · ${realtimeStatusLabel}` : `第 ${Math.min(roundIndex + 1, activeRoundCount)}/${activeRoundCount} 轮` }}</text>
@@ -531,6 +531,7 @@ import type { SpeechCapture, SpeechCaptureSession } from '@/services/speech-capt
 import { createPageRequestScope, currentAccountKey, type RequestScopeTicket } from '@/services/request-scope';
 import { createRealtimePracticeController, createRealtimeSession, fetchRealtimePersonas, invokeRealtimeTool, type RealtimePersonaOption } from '@/services/realtime-practice';
 import { stripInternalCodes } from '@/services/text';
+import { safeTopPadding } from '@/utils/safe-area';
 
 type PracticeStatus = 'idle' | 'starting' | 'active' | 'submitting' | 'finished';
 type RecentPracticeItem = {
@@ -1849,6 +1850,8 @@ onUnload(() => {
 .practice-head {
   position: relative;
   margin: 0 -18px;
+  /* padding-top 由模板内联绑定(状态栏高度 + 12),见 utils/safe-area.ts；
+     此处 30px 仅为 H5 观感基线,App 端会被内联值覆盖。 */
   padding: 30px 28px 24px;
   overflow: hidden;
   background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 100%);
@@ -3357,6 +3360,8 @@ onUnload(() => {
 
 .practice-chat .chat-head {
   flex-shrink: 0;
+  /* .practice-chat 为 fixed 定位,不受页面内边距影响,头部需自行避让状态栏。 */
+  /* padding-top 由模板内联绑定(状态栏高度 + 8),见 utils/safe-area.ts */
   padding: 8px 12px 8px;
   background: #ffffff;
   border-bottom: 1px solid #ebedf0;

mobile-uni/src/pages/user/profile/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page profile-page employee-page-shell">
+  <view class="page profile-page employee-page-shell" :style="{ paddingTop: safeTopPadding(12) }">
     <!-- Top Hero Header Card -->
     <view class="hero-identity-card">
       <view class="hero-brand-bar">
@@ -316,6 +316,7 @@ import {
 import { getCompetencyProfile, getPracticeHistory, getPromotionEvidence } from '@/services/practice';
 import { resetPageScroll } from '@/services/navigation';
 import { ensureEmployeePosition } from '@/services/position';
+import { safeTopPadding } from '@/utils/safe-area';
 import {
   getTtsVoicePreference,
   getTtsDialectPreference,
@@ -1074,9 +1075,11 @@ onShow(() => {
 }
 
 .profile-page {
+  /* padding-top 由模板内联绑定(状态栏高度 + 12),见 utils/safe-area.ts */
   padding: 12px 16px 36px;
   background: #f7f8fa;
-  min-height: 100vh;
+  /* 改用 100% 而非 100vh:叠加状态栏内边距后 100vh 会溢出一屏高度产生多余滚动。 */
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   gap: 14px;