fix:splash 界面重定向界面问题

This commit is contained in:
2026-06-11 17:00:04 +08:00
parent e3d549d660
commit 1151a9a61b
7 changed files with 144 additions and 94 deletions
+35 -20
View File
@@ -1,48 +1,63 @@
"use client";
/**
* 认证全屏页面
* Auth 屏
*
* 实现方式与 SplashScreen 同款(MobileShell 顶层 + 内部 .wrapper + 背景组件):
* - <MobileShell> 作为 top-level500px 移动端宽度由 MobileShell 自身约束)
* - <AuthBackground> 提供全屏 bg image
* - .content 内部承载 AuthPanelz-index: 2,垂直居中)
* - 已登录用户:自动跳 /chat
* - 登录成功:通知 ChatBloc + UserBloc
* 原始 Dart: lib/ui/auth/auth_screen.dart
*/
import { useEffect, useRef } from "react";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuthState } from "@/stores/auth/auth-context";
import { MobileShell } from "@/app/_components/core/mobile-shell";
import { useAuthDispatch, 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";
import { AuthBackground } from "./auth-background";
import { AuthPanel } from "./auth-panel";
export function AuthScreen() {
// ===== 鉴权路由跳转已由 src/router/proxy.ts 集中处理 =====
// 本组件只负责:
// 1. 渲染登录面板
// 2. 登录成功初始化 chat/user store + navigate 到 /chat(业务层动作)
// 1. 渲染登录 UI
// 2. 邮箱登录成功初始化 chat/user store + navigate 到 /chat(业务层动作)
const router = useRouter();
const state = useAuthState();
const authDispatch = useAuthDispatch();
const chatDispatch = useChatDispatch();
const userDispatch = useUserDispatch();
const wasSuccess = useRef(false);
const router = useRouter();
// 邮箱登录成功 → 通知 Chat + User + 跳转
// 用 **pendingRedirect flag**(不是 useRef transition detection)——
// re-mount 时 flag 在 auth context 里**持久**,区分"刚按了"和"re-visit"准确无误。
useEffect(() => {
if (state.isSuccess && !wasSuccess.current) {
wasSuccess.current = true;
console.log("[auth-screen] useEffect (loginStatus + pendingRedirect)", {
pending: state.pendingRedirect,
loginStatus: state.loginStatus,
willRedirect:
state.pendingRedirect && state.loginStatus !== "notLoggedIn",
});
if (state.pendingRedirect && state.loginStatus !== "notLoggedIn") {
console.log(
"[auth-screen] useEffect → router.replace(/chat) [via pendingRedirect flag]",
);
authDispatch({ type: "AuthClearPendingRedirect" });
chatDispatch({ type: "ChatAuthStatusChanged" });
userDispatch({ type: "UserInit" });
router.replace(ROUTES.chat);
}
}, [state.isSuccess, chatDispatch, userDispatch, router]);
}, [
state.loginStatus,
state.pendingRedirect,
authDispatch,
chatDispatch,
userDispatch,
router,
]);
return (
<MobileShell>