登录界面优化

2026-10-02 14:56:38 +08:00 · 2026-06-12 11:00:26 +08:00
parent d9df78d2c7
commit 6a1f89936e
13 changed files with 474 additions and 353 deletions
@@ -0,0 +1,67 @@
+"use client"
+
+import type {ReactNode} from "react"
+import {motion} from "motion/react"
+import {WavesIcon} from "lucide-react"
+
+import {cn} from "@/lib/utils"
+
+interface AuthShellProps {
+  children: ReactNode
+  wide?: boolean
+}
+
+export function AuthShell({children, wide = false}: AuthShellProps) {
+  return (
+    <main className="relative flex min-h-screen w-full items-center justify-center overflow-x-hidden bg-background px-4 py-6 sm:px-8 sm:py-8 [@media(max-height:700px)]:py-3">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:56px_56px] opacity-45 [mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border/70"
+      />
+      <motion.section
+        initial={{opacity: 0, y: 18}}
+        animate={{opacity: 1, y: 0}}
+        transition={{duration: 0.45, ease: "easeOut"}}
+        className={cn(
+          "relative w-full border-x border-dashed border-border/80 bg-background/95 px-6 py-8 backdrop-blur-sm sm:px-10 sm:py-10 [@media(max-height:700px)]:py-5",
+          wide ? "max-w-2xl" : "max-w-xl",
+        )}
+      >
+        {children}
+      </motion.section>
+    </main>
+  )
+}
+
+interface AuthHeadingProps {
+  title: string
+  description: string
+  siteName?: string
+}
+
+export function AuthHeading({
+  title,
+  description,
+  siteName = "Wavelet",
+}: AuthHeadingProps) {
+  return (
+    <header className="flex flex-col gap-6 [@media(max-height:700px)]:gap-3">
+      <div className="flex items-center gap-3">
+        <span className="flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8">
+          <WavesIcon aria-hidden="true" />
+        </span>
+        <span className="font-semibold tracking-tight [@media(min-height:761px)]:text-lg">{siteName}</span>
+      </div>
+      <div className="flex flex-col gap-1.5 [@media(max-height:700px)]:gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl [@media(min-height:900px)]:sm:text-4xl">
+          {title}
+        </h1>
+        <p className="text-sm text-muted-foreground [@media(min-height:900px)]:text-base">{description}</p>
+      </div>
+    </header>
+  )
+}
@@ -3,28 +3,31 @@
 import {useEffect, useMemo, useRef, useState} from "react"
 import {useMutation, useQuery} from "@tanstack/react-query"
 import {useRouter, useSearchParams} from "next/navigation"
-import {KeyRound} from "lucide-react"
+import {EyeIcon, EyeOffIcon} from "lucide-react"
 import {toast} from "sonner"
 import Link from "next/link"

 import {useAuth} from "@/components/providers/auth-provider"
 import {Button} from "@/components/ui/button"
 import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
 import {Separator} from "@/components/ui/separator"
 import {Spinner} from "@/components/ui/spinner"
-import {Card, CardContent} from "@/components/ui/card"
+import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
 import {CapWidget} from "@/components/auth/cap-widget"
+import {AuthHeading} from "@/components/auth/auth-shell"
 import {OTPForm} from "./otp-form"
 import services from "@/lib/services"
 import type {LoginRequest} from "@/lib/services/auth/types"

 function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
  const callbackUrl = searchParams.get("callbackUrl")
-  const storedRedirect = sessionStorage.getItem("redirect_after_login")
+  const storedRedirect =
+    typeof window === "undefined"
+      ? null
+      : sessionStorage.getItem("redirect_after_login")
  const target = callbackUrl || storedRedirect || "/home"

-  if (storedRedirect) {
+  if (storedRedirect && typeof window !== "undefined") {
    sessionStorage.removeItem("redirect_after_login")
  }

@@ -33,7 +36,7 @@ function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {

 function persistRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
  const callbackUrl = searchParams.get("callbackUrl")
-  if (callbackUrl) {
+  if (callbackUrl && typeof window !== "undefined") {
    sessionStorage.setItem("redirect_after_login", callbackUrl)
  }
 }
@@ -43,18 +46,23 @@ function configBool(value: string | undefined, fallback: boolean) {
  return value === "true"
 }

-export function LoginForm() {
+export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: boolean) => void }) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { setUser } = useAuth()
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
+  const [showPassword, setShowPassword] = useState(false)
  const [code, setCode] = useState("")
  const [showLoginCodeInput, setShowLoginCodeInput] = useState(false)
  const [loginCooldown, setLoginCooldown] = useState(0)
  const [errorMessage, setErrorMessage] = useState("")
  const [loginCodeTip, setLoginCodeTip] = useState<React.ReactNode>(null)

+  useEffect(() => {
+    onOTPStateChange?.(showLoginCodeInput)
+  }, [showLoginCodeInput, onOTPStateChange])
+
  useEffect(() => {
    if (loginCooldown > 0) {
      const timer = setTimeout(() => setLoginCooldown(loginCooldown - 1), 1000)
@@ -125,9 +133,7 @@ export function LoginForm() {

      if (errorMsg.startsWith("smtp_invalid:")) {
        const tip = errorMsg.substring("smtp_invalid:".length)
-        setLoginCodeTip(
-          <span className="text-amber-500 font-medium">{tip}</span>
-        )
+        setLoginCodeTip("请输入您的登录验证码。")
        setShowLoginCodeInput(true)
        setLoginCooldown(0)
        toast.warning(tip)
@@ -217,11 +223,9 @@ export function LoginForm() {

  if (publicConfigQuery.isPending) {
    return (
-      <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
-        <CardContent className="flex justify-center items-center py-12">
-          <Spinner />
-        </CardContent>
-      </Card>
+      <div className="flex items-center justify-center py-24">
+        <Spinner />
+      </div>
    )
  }

@@ -240,111 +244,123 @@ export function LoginForm() {
  }

  return (
-    <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
-      <CardContent className="space-y-5 p-5 sm:p-6">
-        <div className="space-y-2 text-center">
-          <h2 className="text-xl font-semibold tracking-tight text-foreground">
-            账号登录
-          </h2>
-        </div>
+    <div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
+      <AuthHeading
+        siteName={publicConfigQuery.data?.site_name}
+        title="登录到您的账号"
+        description="欢迎回来，请输入您的账号信息继续。"
+      />

-        <div className="space-y-4 pt-2">
-          <div className="space-y-3">
-            <div className="space-y-3">
-              <div className="space-y-1.5">
-                <Label htmlFor="username">邮箱/用户名</Label>
-                <Input
-                  id="username"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  placeholder="请输入邮箱或用户名"
-                  autoComplete="username"
-                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="password">密码</Label>
-                <Input
-                  id="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  type="password"
-                  placeholder="请输入密码"
-                  autoComplete="current-password"
-                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
-                />
-              </div>
-
-            </div>
-
-            {/* Cap 人机验证 */}
-            {capEnabled && (
-              <CapWidget
-                key={capResetKey}
-                onToken={handleCapToken}
-                onError={handleCapError}
-                autoStart={capAutoSolve}
+      <div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
+        <FieldGroup className="gap-4 [@media(max-height:700px)]:gap-3">
+          <Field className="gap-1.5">
+            <FieldLabel htmlFor="username">
+              邮箱或用户名 <span className="text-destructive">*</span>
+            </FieldLabel>
+            <Input
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="输入邮箱或用户名"
+              autoComplete="username"
+              className="h-10 text-sm [@media(max-height:700px)]:h-9"
+              onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+            />
+          </Field>
+          <Field className="gap-1.5">
+            <FieldLabel htmlFor="password">
+              密码 <span className="text-destructive">*</span>
+            </FieldLabel>
+            <div className="relative">
+              <Input
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                type={showPassword ? "text" : "password"}
+                placeholder="输入您的密码"
+                autoComplete="current-password"
+                className="h-10 pr-11 text-sm [@media(max-height:700px)]:h-9"
+                onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
              />
-            )}
-
-            {errorMessage ? (
-              <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
-                {errorMessage}
-              </div>
-            ) : null}
-
-            <Button
-              type="button"
-              className="w-full"
-              variant={"secondary"}
-              onClick={handlePasswordLogin}
-              disabled={loginDisabled}
-            >
-              {loginMutation.isPending ? (
-                <>
-                  <Spinner className="mr-2" />
-                  登录中...
-                </>
-              ) : (
-                <>
-                  <KeyRound className="mr-2 size-4" />
-                  登录
-                </>
-              )}
-            </Button>
-          </div>
-        </div>
-
-        {authSources.length > 0 ? (
-          <>
-            <Separator />
-            <div className="space-y-3">
-              <div className="grid gap-2">
-                {authSources.map((source) => (
-                  <Button
-                    key={source.id}
-                    type="button"
-                    variant="outline"
-                    className="justify-start"
-                    onClick={() => void handleOAuthLogin(source.name)}
-                  >
-                    {source.display_name || source.name} 登录
-                  </Button>
-                ))}
-              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                aria-label={showPassword ? "隐藏密码" : "显示密码"}
+                className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+                onClick={() => setShowPassword((visible) => !visible)}
+              >
+                {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+              </Button>
            </div>
-          </>
+          </Field>
+        </FieldGroup>
+
+        {/* Cap 人机验证 */}
+        {capEnabled && (
+          <CapWidget
+            key={capResetKey}
+            onToken={handleCapToken}
+            onError={handleCapError}
+            autoStart={capAutoSolve}
+          />
+        )}
+
+        {errorMessage ? (
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+            {errorMessage}
+          </div>
        ) : null}

-        {registrationEnabled && (
-          <div className="text-center text-xs text-muted-foreground mt-4">
-            {"Don't have an account?"}{" "}
-            <Link href="/register" className="font-semibold text-indigo-500 hover:text-indigo-600 transition-colors">
-              Sign up
-            </Link>
+        <Button
+          type="button"
+          className="h-10 w-full [@media(max-height:700px)]:h-9"
+          variant="auth"
+          onClick={handlePasswordLogin}
+          disabled={loginDisabled}
+        >
+          {loginMutation.isPending ? (
+            <>
+              <Spinner />
+              登录中...
+            </>
+          ) : (
+            "登录"
+          )}
+        </Button>
+      </div>
+
+      {authSources.length > 0 ? (
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-3">
+            <Separator className="flex-1" />
+            <span className="text-xs text-muted-foreground">或者使用</span>
+            <Separator className="flex-1" />
          </div>
-        )}
-      </CardContent>
-    </Card>
+          <div className="grid gap-2">
+            {authSources.map((source) => (
+              <Button
+                key={source.id}
+                type="button"
+                variant="outline"
+                className="h-10 [@media(max-height:700px)]:h-9"
+                onClick={() => void handleOAuthLogin(source.name)}
+              >
+                {source.display_name || source.name} 登录
+              </Button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {registrationEnabled && (
+        <div className="text-center text-sm text-muted-foreground">
+          还没有账号？{" "}
+          <Link href="/register" className="font-medium text-foreground underline underline-offset-4">
+            立即注册
+          </Link>
+        </div>
+      )}
+    </div>
  )
 }
@@ -6,9 +6,9 @@ import {useRouter, useSearchParams} from "next/navigation"
 import {toast} from "sonner"
 import {Spinner} from "@/components/ui/spinner"
 import {LoginForm} from "@/components/auth/login-form"
+import {AuthShell} from "@/components/auth/auth-shell"
 import {Check} from "lucide-react"

-import {AuroraBackground} from "@/components/ui/aurora-background"
 import services from "@/lib/services"
 import {useAuth} from "@/components/providers/auth-provider"

@@ -27,6 +27,7 @@ export function LoginPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { setUser } = useAuth()
+  const [showOTP, setShowOTP] = useState(false)

  /* 处理OAuth回调 */
  const [isProcessingCallback, setIsProcessingCallback] = useState(() => {
@@ -136,25 +137,8 @@ export function LoginPage() {
  }, [searchParams, router, resolveRedirectTarget, setUser])

  return (
-    <AuroraBackground>
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{
-          delay: 0.3,
-          duration: 0.8,
-          ease: "easeInOut",
-        }}
-        className="relative z-10 w-full max-w-sm px-4"
-      >
-        {/*Title Do Not Remove*/}
-        {/*<div className="text-center mb-8 space-y-2">*/}
-        {/*  <h1 className="text-3xl font-bold tracking-tight text-foreground">*/}
-        {/*    Refresh*/}
-        {/*  </h1>*/}
-        {/*</div>*/}
-
+    <AuthShell wide={showOTP}>
+      <div className="w-full">
        <AnimatePresence mode="wait">
          {isProcessingCallback || isCheckingSession ? (
            <motion.div
@@ -165,36 +149,36 @@ export function LoginPage() {
              className="w-full"
            >
              {isCheckingSession ? (
-                <div className="flex flex-col items-center justify-center space-y-4 py-2">
+                <div className="flex flex-col items-center justify-center gap-4 py-16">
                  <div className="relative">
-                    <Spinner className="w-8 h-8 text-blue-600" />
+                    <Spinner className="size-8" />
                  </div>
-                  <div className="text-center space-y-2">
+                  <div className="flex flex-col gap-2 text-center">
                    <h3 className="font-semibold tracking-tight text-foreground">正在检查登录状态</h3>
                    <p className="text-xs text-muted-foreground">请稍候，我们正在确认当前会话...</p>
                  </div>
                </div>
              ) : loginSuccess ? (
-                <div className="flex flex-col items-center justify-center space-y-4 py-2">
+                <div className="flex flex-col items-center justify-center gap-4 py-16">
                  <motion.div
                    initial={{ scale: 0.5, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                    className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 ring-1 ring-green-500/20"
+                    className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-primary/20"
                  >
-                    <Check className="w-6 h-6" strokeWidth={3} />
+                    <Check className="size-6" strokeWidth={3} />
                  </motion.div>
-                  <div className="text-center space-y-2">
+                  <div className="flex flex-col gap-2 text-center">
                    <h3 className="font-semibold tracking-tight text-foreground">登录成功</h3>
                    <p className="text-xs text-muted-foreground">正在跳转至控制台...</p>
                  </div>
                </div>
              ) : (
-                <div className="flex flex-col items-center justify-center space-y-4 py-2">
+                <div className="flex flex-col items-center justify-center gap-4 py-16">
                  <div className="relative">
-                    <Spinner className="w-8 h-8 text-blue-600" />
+                    <Spinner className="size-8" />
                  </div>
-                  <div className="text-center space-y-2">
+                  <div className="flex flex-col gap-2 text-center">
                    <h3 className="font-semibold tracking-tight text-foreground">正在验证凭据</h3>
                    <p className="text-xs text-muted-foreground">请稍候，我们正在为您建立安全会话...</p>
                  </div>
@@ -209,11 +193,11 @@ export function LoginPage() {
              transition={{ duration: 0.4 }}
              className="w-full"
            >
-              <LoginForm />
+              <LoginForm onOTPStateChange={setShowOTP} />
            </motion.div>
          )}
        </AnimatePresence>
-      </motion.div>
-    </AuroraBackground>
+      </div>
+    </AuthShell>
  )
 }
@@ -4,9 +4,9 @@ import * as React from "react"
 import {RefreshCwIcon} from "lucide-react"

 import {Button} from "@/components/ui/button"
-import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card"
 import {Field, FieldLabel} from "@/components/ui/field"
 import {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot,} from "@/components/ui/input-otp"
+import {AuthHeading} from "@/components/auth/auth-shell"
 import {cn} from "@/lib/utils"

 interface OTPFormProps {
@@ -29,17 +29,16 @@ export function OTPForm({
  onSubmit,
 }: OTPFormProps) {
  return (
-    <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
-      <CardHeader className="space-y-1.5 p-5 sm:p-6 pb-2 text-center">
-        <CardTitle className="text-xl font-semibold tracking-tight text-foreground">
-          验证登录
-        </CardTitle>
-        <CardDescription className="text-sm text-muted-foreground leading-normal">
-          {loginCodeTip}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-5 p-5 sm:p-6 pt-2">
-        <Field className="space-y-3">
+    <div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
+      <AuthHeading
+        title="验证您的登录"
+        description="输入发送到安全邮箱的 6 位验证码。"
+      />
+      {loginCodeTip ? (
+        <p className="text-sm leading-6 text-muted-foreground">{loginCodeTip}</p>
+      ) : null}
+      <div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
+        <Field className="gap-3">
          <div className="flex items-center justify-between">
            <FieldLabel htmlFor="otp-verification" className="text-sm font-medium">
              验证码
@@ -50,13 +49,13 @@ export function OTPForm({
              type="button"
              onClick={onResend}
              disabled={loginCooldown > 0 || isPending}
-              className="gap-1 text-xs px-2 py-1 h-7"
+              className="h-8 text-xs"
            >
-              <RefreshCwIcon className={cn("size-3", isPending && "animate-spin")} />
+              <RefreshCwIcon className={cn(isPending && "animate-spin")} />
              {loginCooldown > 0 ? `${loginCooldown}秒后重发` : "重新发送"}
            </Button>
          </div>
-          <div className="flex justify-center">
+          <div className="flex justify-start">
            <InputOTP
              maxLength={6}
              id="otp-verification"
@@ -80,17 +79,16 @@ export function OTPForm({
            </InputOTP>
          </div>
        </Field>
-      </CardContent>
-      <CardFooter className="flex-col gap-4 p-5 sm:p-6 pt-2">
        <Button
          type="button"
-          className="w-full"
+          className="h-10 w-full [@media(max-height:700px)]:h-9"
+          variant="auth"
          onClick={onSubmit}
          disabled={isPending || code.length < 6}
        >
          {isPending ? "验证中..." : "验证"}
        </Button>
-        <div className="text-xs text-muted-foreground text-center">
+        <div className="text-center text-sm text-muted-foreground">
          遇到登录问题？{" "}
          <a
            href="#"
@@ -99,7 +97,7 @@ export function OTPForm({
            联系客服
          </a>
        </div>
-      </CardFooter>
-    </Card>
+      </div>
+    </div>
  )
 }
@@ -3,22 +3,24 @@
 import {useEffect, useMemo, useState} from "react"
 import {useMutation, useQuery} from "@tanstack/react-query"
 import {useRouter, useSearchParams} from "next/navigation"
-import {UserPlus} from "lucide-react"
 import {toast} from "sonner"
 import Link from "next/link"

 import {useAuth} from "@/components/providers/auth-provider"
 import {Button} from "@/components/ui/button"
 import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
 import {Spinner} from "@/components/ui/spinner"
-import {Card, CardContent} from "@/components/ui/card"
+import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
+import {AuthHeading} from "@/components/auth/auth-shell"
 import services from "@/lib/services"
 import type {RegisterRequest} from "@/lib/services/auth/types"

 function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
  const callbackUrl = searchParams.get("callbackUrl")
-  const storedRedirect = sessionStorage.getItem("redirect_after_login")
+  const storedRedirect =
+    typeof window === "undefined"
+      ? null
+      : sessionStorage.getItem("redirect_after_login")
  return callbackUrl || storedRedirect || "/home"
 }

@@ -142,11 +144,9 @@ export function RegisterForm() {

  if (publicConfigQuery.isPending) {
    return (
-      <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
-        <CardContent className="flex justify-center items-center py-12">
-          <Spinner />
-        </CardContent>
-      </Card>
+      <div className="flex items-center justify-center py-24">
+        <Spinner />
+      </div>
    )
  }

@@ -155,125 +155,124 @@ export function RegisterForm() {
  }

  return (
-    <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
-      <CardContent className="space-y-5 p-5 sm:p-6">
-        <div className="space-y-2 text-center">
-          <h2 className="text-xl font-semibold tracking-tight text-foreground">
-            创建账号
-          </h2>
-        </div>
+    <div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
+      <AuthHeading
+        siteName={publicConfigQuery.data?.site_name}
+        title="创建您的账号"
+        description="填写以下信息，开始使用平台服务。"
+      />

-        <div className="space-y-3 pt-2">
-          <div className="space-y-3">
-            <div className="space-y-1.5">
-              <Label htmlFor="username">用户名</Label>
-              <Input
-                id="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="请输入用户名"
-                autoComplete="username"
-                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="nickname">
-                昵称
-                <span className="text-muted-foreground font-normal text-xs ml-1">（可选）</span>
-              </Label>
-              <Input
-                id="nickname"
-                value={nickname}
-                onChange={(e) => setNickname(e.target.value)}
-                placeholder="请输入昵称"
-                autoComplete="nickname"
-                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="password">密码</Label>
-              <Input
-                id="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                type="password"
-                placeholder="请输入密码（至少 8 位）"
-                autoComplete="new-password"
-                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="email">电子邮箱</Label>
-              <Input
-                id="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="请输入电子邮箱"
-                autoComplete="email"
-                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
-              />
-            </div>
-            {emailRegisterEnabled && (
-              <div className="space-y-1.5">
-                <Label htmlFor="code">邮箱验证码</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="code"
-                    value={code}
-                    onChange={(e) => setCode(e.target.value)}
-                    placeholder="请输入 6 位邮箱验证码"
-                    maxLength={6}
-                    className="flex-1"
-                    onKeyDown={(e) => e.key === "Enter" && handleRegister()}
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleSendRegisterCode}
-                    disabled={registerCooldown > 0 || sendRegisterCodeMutation.isPending}
-                    className="w-[120px] text-xs"
-                  >
-                    {registerCooldown > 0 ? `${registerCooldown}秒后重发` : "获取验证码"}
-                  </Button>
-                </div>
+      <div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
+        <FieldGroup className="gap-4 [@media(min-width:500px)]:grid [@media(min-width:500px)]:grid-cols-2 [@media(max-height:700px)]:gap-3">
+          <Field className="gap-1.5">
+            <FieldLabel htmlFor="username">用户名 <span className="text-destructive">*</span></FieldLabel>
+            <Input
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="请输入用户名"
+              autoComplete="username"
+              className="h-10 text-sm [@media(max-height:700px)]:h-9"
+              onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+            />
+          </Field>
+          <Field className="gap-1.5">
+            <FieldLabel htmlFor="nickname">
+              昵称
+              <span className="ml-1 text-xs font-normal text-muted-foreground">（可选）</span>
+            </FieldLabel>
+            <Input
+              id="nickname"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
+              placeholder="请输入昵称"
+              autoComplete="nickname"
+              className="h-10 text-sm [@media(max-height:700px)]:h-9"
+              onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+            />
+          </Field>
+          <Field className="gap-1.5">
+            <FieldLabel htmlFor="email">电子邮箱 <span className="text-destructive">*</span></FieldLabel>
+            <Input
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="请输入电子邮箱"
+              autoComplete="email"
+              className="h-10 text-sm [@media(max-height:700px)]:h-9"
+              onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+            />
+          </Field>
+          <Field className="gap-1.5">
+            <FieldLabel htmlFor="password">密码 <span className="text-destructive">*</span></FieldLabel>
+            <Input
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              type="password"
+              placeholder="请输入密码（至少 8 位）"
+              autoComplete="new-password"
+              className="h-10 text-sm [@media(max-height:700px)]:h-9"
+              onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+            />
+          </Field>
+          {emailRegisterEnabled && (
+            <Field className="gap-1.5 [@media(min-width:500px)]:col-span-2">
+              <FieldLabel htmlFor="code">邮箱验证码 <span className="text-destructive">*</span></FieldLabel>
+              <div className="flex gap-2">
+                <Input
+                  id="code"
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="请输入 6 位邮箱验证码"
+                  maxLength={6}
+                  className="h-10 flex-1 text-sm [@media(max-height:700px)]:h-9"
+                  onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleSendRegisterCode}
+                  disabled={registerCooldown > 0 || sendRegisterCodeMutation.isPending}
+                  className="h-10 w-[120px] text-xs [@media(max-height:700px)]:h-9"
+                >
+                  {registerCooldown > 0 ? `${registerCooldown}秒后重发` : "获取验证码"}
+                </Button>
              </div>
-            )}
+            </Field>
+          )}
+        </FieldGroup>
+
+        {errorMessage ? (
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+            {errorMessage}
          </div>
+        ) : null}

-          {errorMessage ? (
-            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
-              {errorMessage}
-            </div>
-          ) : null}
+        <Button
+          type="button"
+          className="h-10 w-full [@media(max-height:700px)]:h-9"
+          variant="auth"
+          onClick={handleRegister}
+          disabled={registerMutation.isPending}
+        >
+          {registerMutation.isPending ? (
+            <>
+              <Spinner />
+              注册中...
+            </>
+          ) : (
+            "创建账号"
+          )}
+        </Button>
+      </div>

-          <Button
-            type="button"
-            className="w-full"
-            variant="secondary"
-            onClick={handleRegister}
-            disabled={registerMutation.isPending}
-          >
-            {registerMutation.isPending ? (
-              <>
-                <Spinner className="mr-2" />
-                注册中...
-              </>
-            ) : (
-              <>
-                <UserPlus className="mr-2 size-4" />
-                创建账号
-              </>
-            )}
-          </Button>
-        </div>
-
-        <div className="text-center text-xs text-muted-foreground mt-4">
-          Already have an account?{" "}
-          <Link href="/login" className="font-semibold text-indigo-500 hover:text-indigo-600 transition-colors">
-            Sign in
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
+      <div className="text-center text-sm text-muted-foreground">
+        已经有账号？{" "}
+        <Link href="/login" className="font-medium text-foreground underline underline-offset-4">
+          返回登录
+        </Link>
+      </div>
+    </div>
  )
 }
@@ -1,25 +1,12 @@
 "use client"

-import {motion} from "motion/react"
 import {RegisterForm} from "@/components/auth/register-form"
-import {AuroraBackground} from "@/components/ui/aurora-background"
+import {AuthShell} from "@/components/auth/auth-shell"

 export function RegisterPage() {
  return (
-    <AuroraBackground>
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{
-          delay: 0.3,
-          duration: 0.8,
-          ease: "easeInOut",
-        }}
-        className="relative z-10 w-full max-w-sm px-4"
-      >
-        <RegisterForm />
-      </motion.div>
-    </AuroraBackground>
+    <AuthShell wide>
+      <RegisterForm />
+    </AuthShell>
  )
 }