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>
2026-07-26 00:58:18 +08:00
parent 29bb10e1fa
commit 788a2abbe4
6 changed files with 52 additions and 6 deletions
@@ -0,0 +1,28 @@
+/**
+ * 顶部状态栏高度。
+ *
+ * 全局 navigationStyle 为 custom,页面需自行避让状态栏。这里不能用 CSS 方案:
+ * - env(safe-area-inset-top) 在 Android WebView 恒为 0(该值本是 iOS 刘海概念,
+ *   Chromium 仅在配置 display-cutout 时才上报);
+ * - uni-app 注入的 --status-bar-height 在 App 端实测同样取不到值。
+ * 两者都会静默回落成 0,造成"看起来改了但没生效"。故统一读 uni 的系统信息 API,
+ * 由各页面以内联样式绑定,行为跨端一致且可验证。
+ */
+
+let cached: number | null = null;
+
+/** 状态栏高度(px);取不到时返回 0,H5 下即为 0。 */
+export const statusBarHeight = (): number => {
+  if (cached !== null) return cached;
+  try {
+    const info = uni.getSystemInfoSync?.();
+    const height = typeof info?.statusBarHeight === 'number' ? info.statusBarHeight : 0;
+    cached = Number.isFinite(height) && height > 0 ? height : 0;
+  } catch {
+    cached = 0;
+  }
+  return cached;
+};
+
+/** 状态栏避让内边距:状态栏高度 + 额外留白。 */
+export const safeTopPadding = (extra = 0) => `${statusBarHeight() + extra}px`;