vf_react/src/providers/AppProviders.js

// src/providers/AppProviders.js
// 集中管理应用的所有 Provider

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Provider as ReduxProvider } from 'react-redux';

// Redux Store
import { store } from '../store';

// Theme
import theme from '../theme/theme.js';

// Contexts
import { AuthProvider } from '../contexts/AuthContext';
import { NotificationProvider } from '../contexts/NotificationContext';

/**
 * AppProviders - 应用的 Provider 容器
 * 集中管理所有 Context Provider,避免 App.js 中层级嵌套过深
 *
 * Provider 层级顺序 (从外到内):
 * 1. ReduxProvider - 状态管理层
 * 2. ChakraProvider - UI 框架层
 * 3. NotificationProvider - 通知系统
 * 4. AuthProvider - 认证系统
 *
 * 注意:
 * - AuthModal 已迁移到 Redux (authModalSlice + useAuthModal Hook)
 * - ErrorBoundary 在各 Layout 层实现，不在全局层，以实现精细化错误隔离
 *   - MainLayout: PageTransitionWrapper 包含 ErrorBoundary (页面错误不影响导航栏)
 *   - Auth.js: 独立 ErrorBoundary (认证页错误隔离)
 *
 * @param {Object} props
 * @param {React.ReactNode} props.children - 子组件
 */
export function AppProviders({ children }) {
    return (
        <ReduxProvider store={store}>
            <ChakraProvider
                theme={theme}
                toastOptions={{
                    defaultOptions: {
                        position: 'top',
                        duration: 3000,
                        isClosable: true,
                    }
                }}
            >
                <NotificationProvider>
                    <AuthProvider>
                        {children}
                    </AuthProvider>
                </NotificationProvider>
            </ChakraProvider>
        </ReduxProvider>
    );
}

export default AppProviders;