refactor(ui): extract auth and avatar components

src/app/auth/components/auth-back-button.module.css

@@ -0,0 +1,29 @@
+.backButton {
+  position: absolute;
+  top: var(--spacing-xl);
+  left: var(--spacing-xl);
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--auth-back-button-size);
+  height: var(--auth-back-button-size);
+  padding: 0 2px 0 0;
+  color: var(--color-auth-text-primary);
+  cursor: pointer;
+  background: var(--color-auth-surface);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition:
+    background 0.15s ease,
+    transform 0.05s ease;
+}
+
+.backButton:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.backButton:active {
+  transform: scale(0.96);
+}

src/app/auth/components/auth-back-button.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { ChevronLeft } from "lucide-react";
+
+import styles from "./auth-back-button.module.css";
+
+export interface AuthBackButtonProps {
+  onClick: () => void;
+}
+
+export function AuthBackButton({ onClick }: AuthBackButtonProps) {
+  return (
+    <button
+      type="button"
+      className={styles.backButton}
+      onClick={onClick}
+      aria-label="Back"
+    >
+      <ChevronLeft size={20} strokeWidth={2.5} aria-hidden="true" />
+    </button>
+  );
+}

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

@@ -4,7 +4,7 @@
   position: absolute;
   inset: 0;
   z-index: 0;
-  background: var(--color-page-background);
+  background: #fbf1f2;
   overflow: hidden;
 }
 

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

@@ -2,7 +2,6 @@
  *
  * 视觉规格（与 Dart 对齐）：
  *   - panelShell 包裹整个面板（position: relative）
- *   - 悬浮返回按钮：40×40 白色圆形 + 淡黑阴影，固定 top/left 20px
  */
 .panelShell {
   position: relative;
@@ -12,31 +11,3 @@
   width: 100%;
   min-height: 0;
 }
-
-.backButton {
-  position: absolute;
-  top: var(--spacing-xl);
-  left: var(--spacing-xl);
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--auth-back-button-size);
-  height: var(--auth-back-button-size);
-  border: none;
-  border-radius: 50%;
-  background: var(--color-auth-surface);
-  color: var(--color-auth-text-primary);
-  padding: 0 2px 0 0;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: background 0.15s ease, transform 0.05s ease;
-}
-
-.backButton:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.backButton:active {
-  transform: scale(0.96);
-}

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

@@ -3,10 +3,10 @@
  * 认证面板：顶层 switch（Facebook / Email）+ 悬浮返回按钮
  */
 import { useRouter } from "next/navigation";
-import { ChevronLeft } from "lucide-react";
 
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 
+import { AuthBackButton } from "./auth-back-button";
 import { AuthEmailPanel } from "./auth-email-panel";
 import { AuthFacebookPanel } from "./auth-facebook-panel";
 import styles from "./auth-panel.module.css";
@@ -29,14 +29,7 @@ export function AuthPanel() {
 
   return (
     <div className={styles.panelShell}>
-      <button
-        type="button"
-        className={styles.backButton}
-        onClick={handleBack}
-        aria-label="Back"
-      >
-        <ChevronLeft size={20} strokeWidth={2.5} aria-hidden="true" />
-      </button>
+      <AuthBackButton onClick={handleBack} />
 
       {state.authPanelMode === "facebook" ? (
         <AuthFacebookPanel />

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

@@ -10,6 +10,7 @@
   flex-direction: column;
   width: 100%;
   min-height: 100dvh;
+  background: #fbf1f2;
   overflow: hidden;
 }
 

src/app/auth/components/index.ts

@@ -3,6 +3,7 @@
  */
 
 export * from "./auth-background";
+export * from "./auth-back-button";
 export * from "./auth-divider";
 export * from "./auth-email-panel";
 export * from "./auth-error-message";