feat: 优化web

web/components/providers/AppProviders.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { LoginModal } from '@/components/auth/LoginModal';
+import { ToastHost } from '@/components/feedback/ToastHost';
+import { ErrorBoundary } from '@/components/providers/ErrorBoundary';
+import { registerAuthEvents } from '@/lib/notify/auth-events';
+import { subscribeRemoteLogout } from '@/lib/sync/logout-broadcast';
+import { useAuthStore } from '@/stores/auth-store';
+import { useAuthUiStore } from '@/stores/auth-ui-store';
+import { useToastStore } from '@/stores/toast-store';
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname() ?? '';
+
+  useEffect(() => {
+    registerAuthEvents({
+      on401: (msg) => {
+        useAuthUiStore.getState().openLoginModal(msg);
+      },
+      on403: (msg) => {
+        useToastStore.getState().show(msg || '禁止访问', 'error');
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    return subscribeRemoteLogout(() => {
+      useAuthStore.getState().setTokens(null, null);
+      useToastStore.getState().show('已在其他标签退出登录', 'info');
+      if (pathname.startsWith('/dashboard')) {
+        router.replace(`/login?from=${encodeURIComponent(pathname)}`);
+      }
+    });
+  }, [pathname, router]);
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <ErrorBoundary>{children}</ErrorBoundary>
+      <ToastHost />
+      <LoginModal />
+    </TooltipProvider>
+  );
+}

web/components/providers/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Component, type ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+type State = {
+  hasError: boolean;
+  error: Error | null;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[ErrorBoundary]', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return (
+        <div className="flex min-h-[200px] flex-col items-center justify-center gap-3 p-6 text-center">
+          <p className="text-sm text-neutral-600">页面出现异常</p>
+          <button
+            type="button"
+            className="rounded bg-neutral-900 px-3 py-1.5 text-sm text-white hover:bg-neutral-800"
+            onClick={() => this.setState({ hasError: false, error: null })}
+          >
+            重试
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}