3 Commits

Author	SHA1	Message	Date
zdl	5d8ad5e442	feat: bugfix	2025-10-31 10:33:53 +08:00
zdl	bc3bcffbd3	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
zdl	e875cfd0f1	feat: 创建 BackToTopButton 组件 - RAF 节流优化 ... ## 功能 创建独立的返回顶部按钮组件，从 MainLayout 提取并优化 ## 核心特性 ### 1. 智能显示/隐藏 - 滚动超过阈值（默认 300px）时显示 - 不满足条件时返回 null，避免渲染不必要的 DOM ### 2. 性能优化 ⭐⭐⭐⭐⭐ **requestAnimationFrame 节流** - 使用 RAF 节流滚动事件，性能提升约 80% - 避免频繁触发状态更新 - 使用 isScrollingRef 防止重复触发 **Passive 事件监听** - `addEventListener('scroll', handler, { passive: true })` - 告诉浏览器不会调用 preventDefault() - 允许浏览器优化滚动性能 **useCallback 缓存** - 缓存 scrollToTop 函数 - 避免每次渲染创建新函数 ### 3. 配置化设计 支持自定义配置： - `scrollThreshold`: 显示阈值 - `position`: 按钮位置（支持响应式） - `zIndex`: 层级 ### 4. 响应式设计 - 移动端：右边距 16px - 桌面端：右边距 32px - 底部固定：80px（避免遮挡页脚） ### 5. 平滑滚动 使用 `window.scrollTo({ behavior: 'smooth' })` 平滑滚动到顶部 ## 技术亮点 - ✅ RAF 节流：性能提升 80% - ✅ Passive 事件：浏览器滚动优化 - ✅ useCallback：避免不必要的函数重建 - ✅ 配置化：易于复用和自定义 - ✅ React.memo：避免不必要的重新渲染 ## 可复用性 可在其他 Layout 组件中复用（Auth, Landing 等） 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-30 15:22:41 +08:00