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

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

原因: .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