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 { AuthModalProvider } from '../contexts/AuthModalContext';
import { NotificationProvider } from '../contexts/NotificationContext';

// Components
import ErrorBoundary from '../components/ErrorBoundary';

/**
 * AppProviders - 应用的 Provider 容器
 * 集中管理所有 Context Provider,避免 App.js 中层级嵌套过深
 *
 * Provider 层级顺序 (从外到内):
 * 1. ReduxProvider - 状态管理层
 * 2. ChakraProvider - UI 框架层
 * 3. ErrorBoundary - 错误边界
 * 4. NotificationProvider - 通知系统
 * 5. AuthProvider - 认证系统
 * 6. AuthModalProvider - 认证弹窗管理
 *
 * @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,
                    }
                }}
            >
                <ErrorBoundary>
                    <NotificationProvider>
                        <AuthProvider>
                            <AuthModalProvider>
                                {children}
                            </AuthModalProvider>
                        </AuthProvider>
                    </NotificationProvider>
                </ErrorBoundary>
            </ChakraProvider>
        </ReduxProvider>
    );
}

export default AppProviders;