更换 UI

src/layouts/MobileShell.jsx

@@ -1,14 +1,20 @@
 import { Outlet } from 'react-router-dom'
+import { SafeArea } from 'antd-mobile'
 import BottomNav from '../components/BottomNav.jsx'
 
-// 移动端应用外壳: 底栏 + 滚动主区
+// 移动端应用外壳
+//   - 顶部 SafeArea: 让出手机状态栏高度
+//   - 中间 <main>: flex:1 可滚动主区
+//   - 底部 TabBar: antd-mobile TabBar 自带底部安全区
+// 解决: 状态栏遮挡/底部 TabBar 遮挡/左右贴边
 export default function MobileShell() {
   return (
     <div className="app-root">
+      <SafeArea position="top" />
       <main className="app-main">
         <Outlet />
       </main>
       <BottomNav />
     </div>
   )
-}
+}