From b95c3b8f02aef2517179d259354a5a4502e28edd Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Wed, 10 Jun 2026 18:00:58 +0800
Subject: [PATCH] refactor(auth): align auth screen with splash screen layout
 pattern

Extract background image into a reusable AuthBackground component and restructure AuthScreen to use MobileShell as the top-level wrapper, mirroring the SplashScreen implementation.
---
 .../components/auth-background.module.css     | 14 +++++++++++
 src/app/auth/components/auth-background.tsx   | 23 +++++++++++++++++++
 .../auth/components/auth-screen.module.css    | 21 +++++++++--------
 src/app/auth/components/auth-screen.tsx       | 22 +++++++++---------
 4 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 src/app/auth/components/auth-background.module.css
 create mode 100644 src/app/auth/components/auth-background.tsx

diff --git a/src/app/auth/components/auth-background.module.css b/src/app/auth/components/auth-background.module.css
new file mode 100644
index 00000000..a2613091
--- /dev/null
+++ b/src/app/auth/components/auth-background.module.css
@@ -0,0 +1,14 @@
+/* Auth 背景图片容器（与 splash-background.module.css 同款） */
+
+.bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: var(--color-page-background);
+  overflow: hidden;
+}
+
+.image {
+  object-fit: cover;
+  object-position: center;
+}
diff --git a/src/app/auth/components/auth-background.tsx b/src/app/auth/components/auth-background.tsx
new file mode 100644
index 00000000..6a9c9b27
--- /dev/null
+++ b/src/app/auth/components/auth-background.tsx
@@ -0,0 +1,23 @@
+/**
+ * Auth 背景图片
+ *
+ * 与 splash-background.tsx 同款模式（next/image fill + 500px sizes）。
+ * 资源: /public/images/auth/bg-login.png
+ */
+import Image from "next/image";
+import styles from "./auth-background.module.css";
+
+export function AuthBackground() {
+  return (
+    <div className={styles.bg}>
+      <Image
+        src="/images/auth/bg-login.png"
+        alt=""
+        fill
+        priority
+        sizes="(max-width: 500px) 100vw, 500px"
+        className={styles.image}
+      />
+    </div>
+  );
+}
diff --git a/src/app/auth/components/auth-screen.module.css b/src/app/auth/components/auth-screen.module.css
index 67485eb0..e340de27 100644
--- a/src/app/auth/components/auth-screen.module.css
+++ b/src/app/auth/components/auth-screen.module.css
@@ -1,22 +1,23 @@
-/* 原始 Dart: lib/ui/auth/auth_screen.dart
- *
- * 视觉规格（与 Dart 对齐）：
- *   - 全屏 `bg_login.png` 背景（cover）
- *   - 500px 内容列由 MobileShell 约束
- *   - 内容列居中
+/* auth-screen.module.css
+ * 与 splash-screen.module.css 同款结构（MobileShell 顶层 + .wrapper + .content）
+ * 删：.fullBleed（mobile 宽度约束改由 MobileShell.content 的 max-width: 500px 提供）
  */
-.fullBleed {
+
+.wrapper {
   position: relative;
-  flex: 1 1 auto;
+  flex: 1;
   display: flex;
   flex-direction: column;
+  width: 100%;
   min-height: 100dvh;
-  background: url("/images/auth/bg-login.png") center / cover no-repeat;
+  overflow: hidden;
 }
 
 .content {
-  flex: 1 1 auto;
+  position: relative;
+  z-index: 2;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
   padding: var(--spacing-lg);
diff --git a/src/app/auth/components/auth-screen.tsx b/src/app/auth/components/auth-screen.tsx
index 17c360ab..3a488a35 100644
--- a/src/app/auth/components/auth-screen.tsx
+++ b/src/app/auth/components/auth-screen.tsx
@@ -2,14 +2,12 @@
 /**
  * 认证全屏页面
  *
- * 原始 Dart: lib/ui/auth/auth_screen.dart
- *
- * 行为对齐：
- *   - 500px 移动端宽度（MobileShell）
- *   - 全屏 `bg_login.png` 背景（cover 模式，扩展到 viewport）
+ * 实现方式与 SplashScreen 同款（MobileShell 顶层 + 内部 .wrapper + 背景组件）：
+ *   - <MobileShell> 作为 top-level（500px 移动端宽度由 MobileShell 自身约束）
+ *   - <AuthBackground> 提供全屏 bg image
+ *   - .content 内部承载 AuthPanel（z-index: 2，垂直居中）
  *   - 已登录用户：自动跳 /chat
- *   - 未登录：渲染 AuthPanel（含 Facebook/Email 两种面板）
- *   - 登录成功：通知 ChatBloc + UserBloc，然后 router.replace(/chat)
+ *   - 登录成功：通知 ChatBloc + UserBloc
  */
 import { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
@@ -20,6 +18,7 @@ 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";
 
@@ -46,12 +45,13 @@ export function AuthScreen() {
   }, [state.isSuccess, chatDispatch, userDispatch, router]);
 
   return (
-    <div className={styles.fullBleed}>
-      <MobileShell>
+    <MobileShell>
+      <div className={styles.wrapper}>
+        <AuthBackground />
         <div className={styles.content}>
           <AuthPanel />
         </div>
-      </MobileShell>
-    </div>
+      </div>
+    </MobileShell>
   );
 }