zdl
510494becf
feat: 创建 PageTransitionWrapper - 封装页面过渡动画
## 功能
创建页面过渡动画包装组件，封装复杂的嵌套逻辑
## 核心特性
### 1. 页面过渡动画
使用 framer-motion 提供流畅的页面切换动画：
- **AnimatePresence**: 管理组件进入/退出动画
- **MotionBox**: 动画化的 Box 组件
- mode="wait": 等待退出动画完成后再进入
### 2. 错误边界隔离
**ErrorBoundary 包裹**
- 隔离页面错误，确保导航栏不受影响
- 错误发生时，导航栏仍然可用
- 提供降级 UI（由 ErrorBoundary 组件处理）
### 3. 懒加载支持
**Suspense 边界**
- 支持 React.lazy() 懒加载路由组件
- 显示 PageLoader 组件作为 fallback
- 可自定义加载消息
### 4. 配置化设计
支持自定义配置：
- `animationConfig`: 自定义动画参数
- initial: 初始状态
- animate: 动画状态
- exit: 退出状态
- transition: 过渡配置
- `loaderMessage`: 自定义加载消息
### 5. React.memo 优化
使用 memo 避免不必要的重新渲染
## 封装的复杂逻辑
原 MainLayout 中 18 行复杂嵌套：
```
<Box flex="1" position="relative" overflow="hidden">
<AnimatePresence mode="wait">
<MotionBox key={location.pathname} ...>
<ErrorBoundary>
<Suspense fallback={<PageLoader />}>
<Outlet />
</Suspense>
</ErrorBoundary>
</MotionBox>
</AnimatePresence>
</Box>
```
现在简化为：
```
<PageTransitionWrapper location={location} animationConfig={...}>
<Outlet />
</PageTransitionWrapper>
```
## 优势
- ✅ 单一职责：只负责页面过渡和错误隔离
- ✅ 配置化：支持自定义动画
- ✅ 可复用：可在其他 Layout 中使用
- ✅ 可测试：独立组件，易于单元测试
- ✅ 可维护：清晰的组件边界
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-30 15:23:22 +08:00
..
2025-10-30 15:22:41 +08:00
2025-10-30 15:23:22 +08:00