diff --git a/src/layouts/MobileShell.jsx b/src/layouts/MobileShell.jsx index 9b07fa1..7e2eac6 100644 --- a/src/layouts/MobileShell.jsx +++ b/src/layouts/MobileShell.jsx @@ -1,13 +1,16 @@ import { useEffect, useState } from 'react' import { Outlet, useLocation } from 'react-router-dom' -import { SafeArea } from 'antd-mobile' import BottomNav from '../components/BottomNav.jsx' // 移动端应用外壳 -// - 顶部 SafeArea: 让出手机状态栏高度 +// - 顶部安全区: 用 --safe-top 撑开 (由 main.jsx 的 calibrateSafeTop 实测校准) // - 中间
: flex:1 可滚动主区 // - 底部 TabBar: antd-mobile TabBar 自带底部安全区 -// 解决: 状态栏遮挡/底部 TabBar 遮挡/左右贴边 +// +// 注意: 这里不再用 antd-mobile 的 . +// 它只是一个空 div, 高度完全依赖 env(safe-area-inset-top); 而 Android WebView +// (Tauri) 下该变量常为 0, 会导致内容顶到状态栏底下 —— V0.2 把 45px 的 NavBar +// 换成 23px 的 PageHeader 后这个问题就暴露了. 改用可控高度的 div + JS 校准. export default function MobileShell() { const location = useLocation() // pathname 变化时给页面容器加动画 class (仅播放入场动画, 不重挂载子树, @@ -21,7 +24,7 @@ export default function MobileShell() { return (
- +