diff --git a/nkebao/src/components/NavCommon/index.tsx b/nkebao/src/components/NavCommon/index.tsx index 991de16ec..d44221e44 100644 --- a/nkebao/src/components/NavCommon/index.tsx +++ b/nkebao/src/components/NavCommon/index.tsx @@ -1,8 +1,7 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import { NavBar } from "antd-mobile"; import { ArrowLeftOutlined } from "@ant-design/icons"; import { useNavigate } from "react-router-dom"; -import { getTopSafeAreaHeight, initSafeArea } from "@/utils/safeArea"; interface NavCommonProps { title: string; @@ -18,49 +17,8 @@ const NavCommon: React.FC = ({ left, }) => { const navigate = useNavigate(); - const [topBarHeight, setTopBarHeight] = useState(0); - - useEffect(() => { - // 初始化安全区域 - initSafeArea(); - - // 计算顶部安全区域高度 - const calculateTopBarHeight = () => { - const height = getTopSafeAreaHeight(); - setTopBarHeight(height); - }; - - // 立即计算一次 - calculateTopBarHeight(); - - // 监听屏幕方向变化 - const handleOrientationChange = () => { - setTimeout(calculateTopBarHeight, 100); - }; - - // 监听窗口大小变化 - const handleResize = () => { - calculateTopBarHeight(); - }; - - window.addEventListener("orientationchange", handleOrientationChange); - window.addEventListener("resize", handleResize); - - return () => { - window.removeEventListener("orientationchange", handleOrientationChange); - window.removeEventListener("resize", handleResize); - }; - }, []); - return ( <> -
{ > 选择组件测试 - - diff --git a/nkebao/src/utils/safeArea.ts b/nkebao/src/utils/safeArea.ts deleted file mode 100644 index 440e02b3e..000000000 --- a/nkebao/src/utils/safeArea.ts +++ /dev/null @@ -1,176 +0,0 @@ -// 安全区域高度计算工具 - -/** - * 获取设备的安全区域信息 - */ -export interface SafeAreaInfo { - top: number; - bottom: number; - left: number; - right: number; - statusBarHeight: number; - navBarHeight: number; -} - -/** - * 计算安全区域高度 - */ -export function getSafeAreaHeight(): SafeAreaInfo { - // 获取CSS环境变量 - const getCSSValue = (property: string): number => { - const value = getComputedStyle(document.documentElement).getPropertyValue( - property, - ); - return parseInt(value) || 0; - }; - - // 获取状态栏高度 - const statusBarHeight = - getCSSValue("--status-bar-height") || - getCSSValue("--sat") || - getCSSValue("--safe-area-inset-top") || - 0; - - // 获取底部安全区域高度 - const bottomSafeArea = getCSSValue("--safe-area-inset-bottom") || 0; - - // 获取左右安全区域 - const leftSafeArea = getCSSValue("--safe-area-inset-left") || 0; - const rightSafeArea = getCSSValue("--safe-area-inset-right") || 0; - - // 导航栏高度(通常是44px,但可能因设备而异) - const navBarHeight = 44; - - return { - top: statusBarHeight, - bottom: bottomSafeArea, - left: leftSafeArea, - right: rightSafeArea, - statusBarHeight, - navBarHeight, - }; -} - -/** - * 获取顶部安全区域高度(用于mobile-top-bar) - */ -export function getTopSafeAreaHeight(): number { - const safeArea = getSafeAreaHeight(); - - // 如果状态栏高度为0,尝试其他方法 - if (safeArea.statusBarHeight === 0) { - // 尝试从CSS变量获取 - const statusBar = getComputedStyle( - document.documentElement, - ).getPropertyValue("--status-bar-height"); - if (statusBar) { - return parseInt(statusBar) || 0; - } - - // 尝试从CSS变量获取安全区域 - const safeAreaTop = getComputedStyle( - document.documentElement, - ).getPropertyValue("--safe-area-inset-top"); - if (safeAreaTop) { - return parseInt(safeAreaTop) || 0; - } - - // 默认值(iPhone X及以后的设备通常为44px) - return 44; - } - - return safeArea.statusBarHeight; -} - -/** - * 动态设置CSS变量 - */ -export function setSafeAreaCSSVariables(): void { - const safeArea = getSafeAreaHeight(); - - // 设置CSS变量 - document.documentElement.style.setProperty( - "--safe-area-top", - `${safeArea.top}px`, - ); - document.documentElement.style.setProperty( - "--safe-area-bottom", - `${safeArea.bottom}px`, - ); - document.documentElement.style.setProperty( - "--safe-area-left", - `${safeArea.left}px`, - ); - document.documentElement.style.setProperty( - "--safe-area-right", - `${safeArea.right}px`, - ); - document.documentElement.style.setProperty( - "--status-bar-height", - `${safeArea.statusBarHeight}px`, - ); - document.documentElement.style.setProperty( - "--nav-bar-height", - `${safeArea.navBarHeight}px`, - ); -} - -/** - * 检测设备类型 - */ -export function getDeviceType(): "ios" | "android" | "unknown" { - const userAgent = navigator.userAgent.toLowerCase(); - - if (/iphone|ipad|ipod/.test(userAgent)) { - return "ios"; - } else if (/android/.test(userAgent)) { - return "android"; - } - - return "unknown"; -} - -/** - * 检测是否为刘海屏设备 - */ -export function isNotchDevice(): boolean { - const deviceType = getDeviceType(); - - if (deviceType === "ios") { - // iOS设备检测 - const screenHeight = window.screen.height; - const screenWidth = window.screen.width; - - // iPhone X及以后的设备 - return screenHeight >= 812 || screenWidth >= 812; - } else if (deviceType === "android") { - // Android设备检测 - const screenHeight = window.screen.height; - const screenWidth = window.screen.width; - - // 高分辨率设备可能是刘海屏 - return screenHeight >= 800 || screenWidth >= 800; - } - - return false; -} - -/** - * 初始化安全区域 - */ -export function initSafeArea(): void { - // 设置CSS变量 - setSafeAreaCSSVariables(); - - // 监听屏幕方向变化 - window.addEventListener("orientationchange", () => { - setTimeout(() => { - setSafeAreaCSSVariables(); - }, 100); - }); - - // 监听窗口大小变化 - window.addEventListener("resize", () => { - setSafeAreaCSSVariables(); - }); -}