fix bugs

src/layouts/MobileShell.jsx

@@ -1,4 +1,5 @@
-import { Outlet } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
 import { SafeArea } from 'antd-mobile'
 import BottomNav from '../components/BottomNav.jsx'
 
@@ -8,11 +9,23 @@ import BottomNav from '../components/BottomNav.jsx'
 //   - 底部 TabBar: antd-mobile TabBar 自带底部安全区
 // 解决: 状态栏遮挡/底部 TabBar 遮挡/左右贴边
 export default function MobileShell() {
+  const location = useLocation()
+  // pathname 变化时给页面容器加动画 class (仅播放入场动画, 不重挂载子树,
+  // 避免破坏 MacroPage 等页内子路由的挂载状态与滚动位置)
+  const [animating, setAnimating] = useState(false)
+  useEffect(() => {
+    setAnimating(true)
+    const t = setTimeout(() => setAnimating(false), 320)
+    return () => clearTimeout(t)
+  }, [location.pathname])
+
   return (
     <div className="app-root">
       <SafeArea position="top" />
       <main className="app-main">
-        <Outlet />
+        <div className={'page-transition' + (animating ? ' active' : '')}>
+          <Outlet />
+        </div>
       </main>
       <BottomNav />
     </div>