admin
b95c3b8f02
Extract background image into a reusable AuthBackground component and restructure AuthScreen to use MobileShell as the top-level wrapper, mirroring the SplashScreen implementation.
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
"use client";
|
||
/**
|
||
* 认证全屏页面
|
||
*
|
||
* 实现方式与 SplashScreen 同款（MobileShell 顶层 + 内部 .wrapper + 背景组件）：
|
||
* - <MobileShell> 作为 top-level（500px 移动端宽度由 MobileShell 自身约束）
|
||
* - <AuthBackground> 提供全屏 bg image
|
||
* - .content 内部承载 AuthPanel（z-index: 2，垂直居中）
|
||
* - 已登录用户：自动跳 /chat
|
||
* - 登录成功：通知 ChatBloc + UserBloc
|
||
*/
|
||
import { useEffect, useRef } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import { useAuthState } from "@/stores/auth/auth-context";
|
||
import { useChatDispatch } from "@/stores/chat/chat-context";
|
||
import { useUserDispatch } from "@/stores/user/user-context";
|
||
import { ROUTES } from "@/router/routes";
|
||
import { MobileShell } from "@/app/_components/core/mobile-shell";
|
||
import { AuthPanel } from "@/app/auth/components/auth-panel";
|
||
import { AuthBackground } from "@/app/auth/components/auth-background";
|
||
|
||
import styles from "./auth-screen.module.css";
|
||
|
||
export function AuthScreen() {
|
||
// ===== 鉴权路由跳转已由 src/router/proxy.ts 集中处理 =====
|
||
// 本组件只负责：
|
||
// 1. 渲染登录面板
|
||
// 2. 登录成功后初始化 chat/user store + navigate 到 /chat（业务层动作）
|
||
|
||
const router = useRouter();
|
||
const state = useAuthState();
|
||
const chatDispatch = useChatDispatch();
|
||
const userDispatch = useUserDispatch();
|
||
const wasSuccess = useRef(false);
|
||
|
||
// 邮箱登录成功 → 通知 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>
|
||
<div className={styles.wrapper}>
|
||
<AuthBackground />
|
||
<div className={styles.content}>
|
||
<AuthPanel />
|
||
</div>
|
||
</div>
|
||
</MobileShell>
|
||
);
|
||
}
|