fix: avoid native menu overlap

src/pages/index/index.scss

@@ -1,7 +1,7 @@
 .device-page {
   position: relative;
   min-height: 100vh;
-  padding: calc(var(--status-bar-height, 0px) + 24rpx) 24rpx 156rpx;
+  padding: calc(var(--top-safe-height, 0px) + 24rpx) 24rpx 156rpx;
   box-sizing: border-box;
   background: linear-gradient(180deg, #1e2432 0%, #191f2c 100%);
   overflow: hidden;
@@ -37,6 +37,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-right: calc(var(--menu-safe-width, 0px) + 12rpx);
   margin-bottom: 26rpx;
 }
 

src/pages/index/index.tsx

@@ -63,12 +63,19 @@ export default function Index() {
   const [bluetoothDevices, setBluetoothDevices] = useState<DeviceCandidate[]>([]);
   const [recentDeviceName, setRecentDeviceName] = useState("");
   const [statusHint, setStatusHint] = useState("可通过扫码或蓝牙搜索完成设备绑定。");
-  const [statusBarHeight, setStatusBarHeight] = useState(0);
+  const [topSafeHeight, setTopSafeHeight] = useState(0);
+  const [menuSafeWidth, setMenuSafeWidth] = useState(0);
   const discoveryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const windowInfo = typeof Taro.getWindowInfo === "function" ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
-    setStatusBarHeight(windowInfo.statusBarHeight || 0);
+    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);
 
     return () => {
       if (discoveryTimerRef.current) {
@@ -255,7 +262,8 @@ export default function Index() {
   };
 
   const pageStyle = {
-    "--status-bar-height": `${statusBarHeight}px`
+    "--top-safe-height": `${topSafeHeight}px`,
+    "--menu-safe-width": `${menuSafeWidth}px`
   } as CSSProperties;
 
   return (