fix: respect status bar safe area

src/pages/index/index.scss

@@ -1,7 +1,7 @@
 .device-page {
   position: relative;
   min-height: 100vh;
-  padding: 24rpx 24rpx 156rpx;
+  padding: calc(var(--status-bar-height, 0px) + 24rpx) 24rpx 156rpx;
   box-sizing: border-box;
   background: linear-gradient(180deg, #1e2432 0%, #191f2c 100%);
   overflow: hidden;

src/pages/index/index.tsx

@@ -1,5 +1,6 @@
 import { Text, View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
+import type { CSSProperties } from "react";
 import { useEffect, useRef, useState } from "react";
 import "./index.scss";
 
@@ -62,9 +63,13 @@ export default function Index() {
   const [bluetoothDevices, setBluetoothDevices] = useState<DeviceCandidate[]>([]);
   const [recentDeviceName, setRecentDeviceName] = useState("");
   const [statusHint, setStatusHint] = useState("可通过扫码或蓝牙搜索完成设备绑定。");
+  const [statusBarHeight, setStatusBarHeight] = 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);
+
     return () => {
       if (discoveryTimerRef.current) {
         clearTimeout(discoveryTimerRef.current);
@@ -249,8 +254,12 @@ export default function Index() {
     await bindDevice(device.name, device.source === "ble" ? "蓝牙设备" : "演示设备");
   };
 
+  const pageStyle = {
+    "--status-bar-height": `${statusBarHeight}px`
+  } as CSSProperties;
+
   return (
-    <View className="device-page">
+    <View className="device-page" style={pageStyle}>
       <View className="device-page__halo device-page__halo--large" />
       <View className="device-page__halo device-page__halo--small" />