登录界面优化

frontend/components/auth/register-form.tsx

@@ -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>
   )
 }