refactor: scope providers by route and use XState selectors

src/providers/chat-route-providers.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { ChatProvider } from "@/stores/chat/chat-context";
+import { PaymentProvider } from "@/stores/payment";
+import {
+  ChatAuthSync,
+  ChatPaymentSuccessSync,
+  PaymentSuccessSync,
+} from "@/stores/sync";
+
+export function ChatRouteProviders({ children }: { children: ReactNode }) {
+  return (
+    <PaymentProvider>
+      <PaymentSuccessSync />
+      <ChatProvider>
+        <ChatAuthSync />
+        <ChatPaymentSuccessSync />
+        {children}
+      </ChatProvider>
+    </PaymentProvider>
+  );
+}

src/providers/payment-route-provider.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { PaymentProvider } from "@/stores/payment";
+import { PaymentSuccessSync } from "@/stores/sync";
+
+export function PaymentRouteProvider({ children }: { children: ReactNode }) {
+  return (
+    <PaymentProvider>
+      <PaymentSuccessSync />
+      {children}
+    </PaymentProvider>
+  );
+}

src/providers/private-room-route-provider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { PrivateRoomProvider } from "@/stores/private-room";
+
+export function PrivateRoomRouteProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <PrivateRoomProvider>{children}</PrivateRoomProvider>;
+}

src/providers/root-providers.tsx

@@ -3,15 +3,8 @@
 /**
  * 根级 Client Providers 包装
  *
- * 把所有功能 Provider 串起来：
- *   AuthProvider → UserProvider → PaymentProvider → ChatProvider → PrivateRoomProvider
- *   + AuthStatusChecker（启动时一次：派发 AuthInit）
- *   + OAuthSessionSync   （持续监听 NextAuth session → auth machine）
- *   + UserAuthSync       （auth 登录态恢复后 hydrate user machine）
- *   + ChatAuthSync       （持续监听 auth loginStatus → chat machine）
- *
- * 它们始终挂载，保证各页面直接 `use*State()` / `use*Dispatch()` 即可，
- * 无需在每个页面单独包裹。
+ * 这里只保留跨路由的 Auth、User 和 viewport Provider。Chat、Payment、
+ * PrivateRoom 状态机由对应路由 layout 按需挂载。
  */
 
 import type { ReactNode } from "react";
@@ -21,14 +14,7 @@ import { AppNavigationGuard } from "@/router/app-navigation-guard";
 import { AuthProvider } from "@/stores/auth/auth-context";
 import { AuthStatusChecker } from "@/stores/auth/auth-status-checker";
 import { OAuthSessionSync } from "@/stores/auth/oauth-session-sync";
-import { ChatProvider } from "@/stores/chat/chat-context";
-import { PaymentProvider } from "@/stores/payment";
-import { PrivateRoomProvider } from "@/stores/private-room";
-import {
-  ChatAuthSync,
-  PaymentSuccessSync,
-  UserAuthSync,
-} from "@/stores/sync";
+import { UserAuthSync } from "@/stores/sync";
 import { UserProvider } from "@/stores/user/user-context";
 
 export interface RootProvidersProps {
@@ -39,24 +25,13 @@ export function RootProviders({ children }: RootProvidersProps) {
   return (
     <ViewportCssVarsProvider>
       <AuthProvider>
-        {/* AuthStatusChecker 必须在 AuthProvider 内部（依赖 useAuthDispatch），
-         * 必须在 UserProvider/ChatProvider 外部（它们可能在 init 完成前就 mount） */}
         <AuthStatusChecker />
-        {/* OAuthSessionSync 同样依赖 AuthProvider 上下文 */}
         <OAuthSessionSync />
         <AppNavigationGuard />
         <UserProvider>
           <UserAuthSync />
-          <PaymentProvider>
-            <ChatProvider>
-              <PrivateRoomProvider>
-                <ChatAuthSync />
-                <PaymentSuccessSync />
-                {children}
-                <div id="toast-portal" />
-              </PrivateRoomProvider>
-            </ChatProvider>
-          </PaymentProvider>
+          {children}
+          <div id="toast-portal" />
         </UserProvider>
       </AuthProvider>
     </ViewportCssVarsProvider>