refactor: relocate components to app directory structure

2026-06-09 14:43:10 +08:00
parent f060301c24
commit cda55c8f9b
61 changed files with 19 additions and 27 deletions
@@ -0,0 +1,74 @@
+"use client";
+/**
+ * 认证全屏页面
+ *
+ * 原始 Dart: lib/ui/auth/auth_screen.dart
+ *
+ * 行为对齐：
+ *  - 500px 移动端宽度（MobileShell）
+ *  - 已登录用户：自动跳 /chat
+ *  - 未登录：渲染 AuthPanel（含 Facebook/Email 两种面板）
+ *  - 登录成功：通知 ChatBloc + UserBloc，然后 router.replace(/chat)
+ */
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+import { useAuthState, useAuthDispatch } from "@/contexts/auth/auth-context";
+import { useChatDispatch } from "@/contexts/chat/chat-context";
+import { useUserDispatch } from "@/contexts/user/user-context";
+import { useAuthGate } from "@/lib/auth/use-auth-gate";
+import { ROUTES } from "@/lib/routes";
+import { MobileShell } from "@/app/_components/core/mobile-shell";
+import { AuthPanel } from "@/app/auth/components/auth-panel";
+
+export interface AuthScreenProps {
+  /** 自定义背景（默认紫粉渐变）。 */
+  background?: string;
+}
+
+export function AuthScreen({
+  background = "var(--color-sidebar-background)",
+}: AuthScreenProps) {
+  const router = useRouter();
+  const { isAuthed } = useAuthGate();
+  const state = useAuthState();
+  const authDispatch = useAuthDispatch();
+  const chatDispatch = useChatDispatch();
+  const userDispatch = useUserDispatch();
+  const wasSuccess = useRef(false);
+
+  // 已登录 → 自动跳 /chat
+  useEffect(() => {
+    if (isAuthed) router.replace(ROUTES.chat);
+  }, [isAuthed, router]);
+
+  // 登录成功 → 通知 Chat + User + 跳转
+  useEffect(() => {
+    if (state.isSuccess && !wasSuccess.current) {
+      wasSuccess.current = true;
+      chatDispatch({ type: "ChatAuthStatusChanged" });
+      userDispatch({ type: "UserInit" });
+      router.replace(ROUTES.chat);
+    }
+  }, [state.isSuccess, chatDispatch, userDispatch, router]);
+
+  return (
+    <MobileShell background={background}>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          padding: "var(--spacing-lg)",
+        }}
+      >
+        <AuthPanel
+          onGoogleSuccess={(idToken, email) => {
+            authDispatch({ type: "AuthWebGoogleLoginSuccess", idToken, email });
+          }}
+        />
+      </div>
+    </MobileShell>
+  );
+}