From 74f07d15cd8116a35825045cc8f1f45af20742d3 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 15:00:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=20AppProviders=20?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=AE=A1=E7=90=86=20Provider=20=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建 src/providers/AppProviders.js (64行)
- 集中管理 6 层 Provider: Redux, Chakra, ErrorBoundary, Notification, Auth, AuthModal
- 添加详细的 JSDoc 注释说明 Provider 层级顺序

优势:
- Provider 配置独立管理,易于维护
- 避免 App.js 中 6 层嵌套
- 便于测试和重用
- 新增 Provider 只需修改一个文件

Provider 层级 (从外到内):
1. ReduxProvider - 状态管理层
2. ChakraProvider - UI 框架层
3. ErrorBoundary - 错误边界
4. NotificationProvider - 通知系统
5. AuthProvider - 认证系统
6. AuthModalProvider - 认证弹窗管理

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/providers/AppProviders.js | 64 +++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/providers/AppProviders.js

diff --git a/src/providers/AppProviders.js b/src/providers/AppProviders.js
new file mode 100644
index 00000000..6358b954
--- /dev/null
+++ b/src/providers/AppProviders.js
@@ -0,0 +1,64 @@
+// 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;