From c293f7f9706d5f2776b682ce99e7b89a3cc997c2 Mon Sep 17 00:00:00 2001
From: czz <862977248@qq.com>
Date: Thu, 7 May 2026 16:04:39 +0800
Subject: [PATCH] fix: respect status bar safe area

---
 src/pages/index/index.scss |  2 +-
 src/pages/index/index.tsx  | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 92ba0f8..052debd 100644
--- a/src/pages/index/index.scss
+++ b/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;
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 76f5c6c..7489825 100644
--- a/src/pages/index/index.tsx
+++ b/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" />