diff --git a/src/layouts/components/PageTransitionWrapper.js b/src/layouts/components/PageTransitionWrapper.js
new file mode 100644
index 00000000..504167ee
--- /dev/null
+++ b/src/layouts/components/PageTransitionWrapper.js
@@ -0,0 +1,66 @@
+// src/layouts/components/PageTransitionWrapper.js
+import React, { Suspense, memo } from 'react';
+import { Box } from '@chakra-ui/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import ErrorBoundary from '../../components/ErrorBoundary';
+import PageLoader from '../../components/Loading/PageLoader';
+
+// 创建 motion 包裹的 Box 组件
+const MotionBox = motion(Box);
+
+/**
+ * 页面过渡动画包裹组件
+ *
+ * 功能：
+ * - 页面切换时的过渡动画（AnimatePresence）
+ * - 错误边界隔离（ErrorBoundary）
+ * - 懒加载支持（Suspense）
+ *
+ * 优化：
+ * - ✅ 使用 memo 避免不必要的重新渲染
+ * - ✅ 支持自定义动画配置
+ * - ✅ 错误隔离，确保导航栏不受影响
+ *
+ * @param {React.ReactNode} children - 要渲染的子组件（通常是 <Outlet />）
+ * @param {object} location - 路由位置对象（用于动画 key）
+ * @param {object} animationConfig - 自定义动画配置
+ * @param {string} loaderMessage - 加载时显示的消息
+ */
+const PageTransitionWrapper = memo(({
+    children,
+    location,
+    animationConfig = {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -20 },
+        transition: { duration: 0.2 }
+    },
+    loaderMessage = '页面加载中...'
+}) => {
+    return (
+        <Box flex="1" position="relative" overflow="hidden">
+            <AnimatePresence mode="wait">
+                <MotionBox
+                    key={location.pathname}
+                    initial={animationConfig.initial}
+                    animate={animationConfig.animate}
+                    exit={animationConfig.exit}
+                    transition={animationConfig.transition}
+                    style={{ height: '100%' }}
+                >
+                    {/* 错误边界：隔离页面错误，确保导航栏仍可用 */}
+                    <ErrorBoundary>
+                        {/* Suspense：支持 React.lazy() 懒加载 */}
+                        <Suspense fallback={<PageLoader message={loaderMessage} />}>
+                            {children}
+                        </Suspense>
+                    </ErrorBoundary>
+                </MotionBox>
+            </AnimatePresence>
+        </Box>
+    );
+});
+
+PageTransitionWrapper.displayName = 'PageTransitionWrapper';
+
+export default PageTransitionWrapper;