fix: respect message page safe area

src/pages/message/index.scss

@@ -1,7 +1,7 @@
 .message-page {
   position: relative;
   min-height: 100vh;
-  padding: 24rpx 24rpx 156rpx;
+  padding: calc(var(--top-safe-height, 0px) + 24rpx) 24rpx 156rpx;
   box-sizing: border-box;
   background: linear-gradient(180deg, #1d2331 0%, #171d29 100%);
   overflow: hidden;
@@ -29,14 +29,23 @@
   background: radial-gradient(circle, rgba(86, 116, 184, 0.12), transparent 72%);
 }
 
-.message-tabs {
+.message-header {
   position: relative;
   z-index: 1;
+  width: 100%;
+  padding-right: calc(var(--menu-safe-width, 0px) + 12rpx);
+  margin-bottom: 10rpx;
+  box-sizing: border-box;
+  min-height: calc((var(--menu-top, 0px) - var(--top-safe-height, 0px) - 24rpx) + var(--menu-height, 32px) + 24rpx);
+}
+
+.message-tabs {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 110rpx;
-  padding: 20rpx 0 28rpx;
+  min-height: inherit;
+  padding: 0;
 }
 
 .message-tabs__item {

src/pages/message/index.tsx

@@ -1,6 +1,7 @@
 import { Text, View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
-import { useState } from "react";
+import type { CSSProperties } from "react";
+import { useEffect, useState } from "react";
 import BottomTabbar, { type TabbarItem } from "../../components/bottom-tabbar";
 import "./index.scss";
 
@@ -93,9 +94,26 @@ const navItems: TabbarItem[] = [
 
 export default function MessagePage() {
   const [activeTab, setActiveTab] = useState<MessageTabKey>("vital");
+  const [topSafeHeight, setTopSafeHeight] = useState(0);
+  const [menuSafeWidth, setMenuSafeWidth] = useState(0);
+  const [menuTop, setMenuTop] = useState(0);
+  const [menuHeight, setMenuHeight] = useState(0);
 
   const currentMessages = messageList.filter((item) => item.category === activeTab);
 
+  useEffect(() => {
+    const windowInfo = typeof Taro.getWindowInfo === "function" ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
+    const menuButtonRect =
+      typeof Taro.getMenuButtonBoundingClientRect === "function" ? Taro.getMenuButtonBoundingClientRect() : null;
+    const safeTop = menuButtonRect?.bottom || windowInfo.statusBarHeight || 0;
+    const safeRight = menuButtonRect ? windowInfo.windowWidth - menuButtonRect.left : 0;
+
+    setTopSafeHeight(safeTop);
+    setMenuSafeWidth(safeRight);
+    setMenuTop(menuButtonRect?.top || Math.max((windowInfo.statusBarHeight || 0) + 6, 0));
+    setMenuHeight(menuButtonRect?.height || 32);
+  }, []);
+
   const handleTabClick = (item: TabbarItem) => {
     if (item.key === "message") {
       return;
@@ -112,23 +130,32 @@ export default function MessagePage() {
     });
   };
 
+  const pageStyle = {
+    "--top-safe-height": `${topSafeHeight}px`,
+    "--menu-safe-width": `${menuSafeWidth}px`,
+    "--menu-top": `${menuTop}px`,
+    "--menu-height": `${menuHeight}px`
+  } as CSSProperties;
+
   return (
-    <View className="message-page">
+    <View className="message-page" style={pageStyle}>
       <View className="message-page__glow message-page__glow--top" />
       <View className="message-page__glow message-page__glow--side" />
 
-      <View className="message-tabs">
+      <View className="message-header">
-        {tabs.map((item) => {
+        <View className="message-tabs">
-          const isActive = item.key === activeTab;
+          {tabs.map((item) => {
+            const isActive = item.key === activeTab;
 
-          return (
+            return (
-            <View className="message-tabs__item" key={item.key} onClick={() => setActiveTab(item.key)}>
+              <View className="message-tabs__item" key={item.key} onClick={() => setActiveTab(item.key)}>
-              <Text className={`message-tabs__label ${isActive ? "message-tabs__label--active" : ""}`}>{item.label}</Text>
+                <Text className={`message-tabs__label ${isActive ? "message-tabs__label--active" : ""}`}>{item.label}</Text>
-              {item.hasDot ? <View className="message-tabs__dot" /> : null}
+                {item.hasDot ? <View className="message-tabs__dot" /> : null}
-              {isActive ? <View className="message-tabs__line" /> : null}
+                {isActive ? <View className="message-tabs__line" /> : null}
-            </View>
+              </View>
-          );
+            );
-        })}
+          })}
+        </View>
       </View>
 
       <View className="message-list">