修复「我」页顶部安全区与蓝色渐变头部割裂

现象: 顶部安全区修好后, 其他页面正常, 但「我」页顶部多出一条白色/色块,
把原本从屏幕顶端开始的蓝色渐变隔断.

原因: .app-safe-top 是独立占位元素, 固定使用页面底色.
「我」页头部 me-profile 是通栏蓝色渐变 (无 PageHeader), 安全区夹在中间
就形成一条异色带, 视觉上把蓝色切成两段.

修复:
- MePage 挂载时给 body 加 me-safe-top 标记, 卸载时移除
- 该标记下把 .app-safe-top 高度归零, 改由 .me-profile 的
  padding-top: calc(24px + var(--safe-top)) 吸收状态栏高度
- 这样蓝色渐变直接从屏幕最顶端开始, 是一整块连续色域, 无接缝,
  同时内容仍正确避开电量/信号栏

其他页面不受影响 (无该 body 标记, 安全区照常占位).

src/pages/MePage.jsx

@@ -25,6 +25,14 @@ export default function MePage() {
   const { user, logout } = useAuth()
   const navigate = useNavigate()
 
+  // 顶部安全区与「我」页蓝色渐变头部无缝衔接: 给 body 打标记,
+  // 由 CSS 让 .app-safe-top 也使用同一条渐变, 避免出现一条白边/色块把蓝色割断.
+  // 离开本页时移除标记, 其他页恢复默认底色.
+  useEffect(() => {
+    document.body.classList.add('me-safe-top')
+    return () => { document.body.classList.remove('me-safe-top') }
+  }, [])
+
   // OTA 状态
   const [otaState, setOtaState] = useState('idle') // idle | checking | available | none | downloading | ready | error
   const [otaInfo, setOtaInfo] = useState(null) // 检查结果中的 info

src/styles/globals.css

@@ -53,7 +53,9 @@ input, textarea, select { font: inherit; }
   padding-right: var(--safe-right);
 }
 
-/* 顶部状态栏安全区占位: 高度由 --safe-top 决定 (main.jsx 实测校准后覆盖) */
+/* 顶部状态栏安全区占位: 高度由 --safe-top 决定 (main.jsx 实测校准后覆盖)
+   默认页面底色; 有通栏彩色头部的页面 (如「我」页蓝色渐变) 由该页
+   给 body 加标记类来覆盖背景, 使安全区与头部无缝衔接. */
 .app-safe-top {
   flex: 0 0 auto;
   height: var(--safe-top);
@@ -273,9 +275,18 @@ input, textarea, select { font: inherit; }
 .login-error { background: #fef2f2; color: var(--color-danger); padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
 
 /* ================== 我的页 ================== */
-/* 「我」页不设顶部头部条: 头像区直接贴顶 (2026-10-23 界面调整) */
+/* 「我」页不设顶部头部条: 头像区直接贴顶 (2026-10-23 界面调整)
+   该页头部是通栏蓝色渐变, 若安全区单独占位会出现一条白边/色块把蓝色割断.
+   做法: 让安全区高度归零, 改由 me-profile 用 padding-top 吸收状态栏高度,
+   这样蓝色渐变从屏幕最顶端开始, 是一整块连续的色域. */
+body.me-safe-top .app-safe-top { height: 0; }
 .me-page { display: flex; flex-direction: column; min-height: 100%; background: var(--color-bg); }
-.me-profile { background: linear-gradient(135deg, #1677ff, #4096ff); color: #fff; padding: 24px 16px 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
+.me-page .me-profile {
+  background: linear-gradient(135deg, #1677ff, #4096ff);
+  color: #fff;
+  padding: calc(24px + var(--safe-top)) 16px 28px;
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+}
 .me-avatar { background: rgba(255,255,255,.2); color: #fff; font-size: 28px; }
 .me-name { font-size: 18px; font-weight: 600; }
 .me-email { font-size: 13px; opacity: .85; }