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.

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;
+}

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>
+  );
+}

src/app/auth/components/auth-screen.module.css

@@ -1,22 +1,23 @@
-/* 原始 Dart: lib/ui/auth/auth_screen.dart
+/* auth-screen.module.css
- *
+ * 与 splash-screen.module.css 同款结构（MobileShell 顶层 + .wrapper + .content）
- * 视觉规格（与 Dart 对齐）：
+ * 删：.fullBleed（mobile 宽度约束改由 MobileShell.content 的 max-width: 500px 提供）
- *   - 全屏 `bg_login.png` 背景（cover）
- *   - 500px 内容列由 MobileShell 约束
- *   - 内容列居中
  */
-.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);

src/app/auth/components/auth-screen.tsx

@@ -2,14 +2,12 @@
 /**
  * 认证全屏页面
  *
- * 原始 Dart: lib/ui/auth/auth_screen.dart
+ * 实现方式与 SplashScreen 同款（MobileShell 顶层 + 内部 .wrapper + 背景组件）：
- *
+ *   - <MobileShell> 作为 top-level（500px 移动端宽度由 MobileShell 自身约束）
- * 行为对齐：
+ *   - <AuthBackground> 提供全屏 bg image
- *   - 500px 移动端宽度（MobileShell）
+ *   - .content 内部承载 AuthPanel（z-index: 2，垂直居中）
- *   - 全屏 `bg_login.png` 背景（cover 模式，扩展到 viewport）
  *   - 已登录用户：自动跳 /chat
- *   - 未登录：渲染 AuthPanel（含 Facebook/Email 两种面板）
+ *   - 登录成功：通知 ChatBloc + UserBloc
- *   - 登录成功：通知 ChatBloc + UserBloc，然后 router.replace(/chat)
  */
 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>
   );
 }